@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*
{
	box-sizing:border-box !important;
}

html,body
{
	width:100% !important;
	margin:0px !important;
	padding:0px !important;
	float:left !important;
	
	font-family:'Poppins';
	font-size:13px;
	color:#8b877c;

	height:100%;
	min-height:100%;
	display:table !important;
	
	background-color:rgb(248,248,248);
}

.banner
{
	width:100%;
	height:100%;
	float:left;
	
	display:table;
	
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	
	animation: fadeIn 4s ease-in-out forwards; /* Defina a duração da animação e a curva de tempo */
    opacity: 0; /* Inicialmente, torna a opacidade da imagem 0 para que ela pareça carregar lentamente */
}

@keyframes fadeIn 
{
    from {
        opacity: 0; /* Opacidade inicial */
    }
    to {
        opacity: 1; /* Opacidade final */
    }
}

.content
{
	width:100%;
	float:left;
	display:table;	
}

.center
{
	width:300px;
	
	display:table;
	margin:0 auto;
	margin-top:10%;
	/*background-color:rgb(100,100,100,0.8);*/

	text-align:center;	
	border-radius:10px;
}

.itens
{
	width:100%;
	float:left;
	margin-top:10px;
	cursor:pointer;
	
	/*background:linear-gradient(to bottom, rgb(255,255,255), rgb(245,245,245));*/
	background-color:rgb(255,255,255);
	text-align:center;	
	font-family:'Poppins';
	font-size:16px;
	color:rgb(100,100,100);
	
	line-height:50px;
	height:50px;
	border-radius:3px;
	
	letter-spacing:0.5px;
}

@media screen and (min-width:1000px) 
{
   .itens:hover
    {
        background-color:rgb(1,190,211);
        color:#FFFFFF !important;

        -webkit-transition: all 0.1s;
        -moz-transition: all 0.1s;
        transition: all 0.1s;

        -webkit-transform: scale(1.06) !important;
        -moz-transform: scale(1.06) !important;
        transform: scale(1.06) !important;
    } 
}

@media screen and (max-width:900px) 
{
	.center
	{
		margin-top:30% !important;	
		width:90%;
	}
	
	.itens
	{
		font-size:18px;
		
		line-height:70px;
		height:70px;
		
		letter-spacing:0.7px;
		margin-bottom:10px;
	}
    
    .itens:hover
    {
        background-color:#00C9ED;
        color:#FFFFFF !important;
    }
}