/* Comentario */

/* 
nome de uma tag{...}
#nome de uma tag com id{...}
.nome de uma tag com uma classe{...}
 */

*{
	margin:0px;
	padding:0px;
	
	}

	img{
		display: block;
		width: 100%;
	}

.img-a{
	display: block;
	width: 100%;
	max-width: 560px;
    margin-left: auto;
	margin-right: auto;
}
	/* Bordas img */

	.borda{
		border: 5px solid blue;
	}

/* Tipografia */

.titulo-topo{
	color:#57240F;
	font-size: 25px;
	margin-bottom: 10px;
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	text-align: center;
}

.titulo-a{
	color:#57240F;
	font-size: 26px;
	margin-bottom: 10px;
	font-family: "Roboto Serif", serif;
	font-weight: 500;
	margin-left:auto;
	margin-right: auto;
text-align: center;
}


.titulo-b{
	color:#FA9F1C;
	font-size: 22px;
	margin-bottom: 5px;
	margin top: 95px;
	text-align: center;
}

.texto{
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	color:#E8F4E7;
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 10px;
	margin-top: 55px;
	text-align: center;

}


.texto-a{

font-family: "Roboto Serif", serif;
	font-weight: 400;
	color: #57240F;
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 10px;
	margin-top: 55px;
	text-align: center;

}




.texto-topo{
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	color:#ff00d4;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 10px;
	text-align: center;
}



/* ESTRUTURA */

header{
	width: 100%;
	height: 80px;
	background-color: #57240F;
}

.header-centro{
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	height: 80px;
	display: flex;
	justify-content: space-between;
}

.logo{
display: flex;
align-items: center;
font-size: 30px;
color: #E8F4E7;
font-family: "Roboto Serif", serif;
font-weight: 400;
}


nav{


display: flex;
align-items: center;

}




ul{

display: flex;
align-items: center;
}


ul a{

text-decoration: none;
color: #FFB851;
font-size: 16px;
font-family: "Roboto Serif", serif;
}


ul a:hover {

	text-decoration: underline;
	color: #b701ff;
	

}





li{

list-style-type: none;
padding-left: 30px;
}




section{
	width: 100%;
}

footer{
	width: 100%;
	height: 80px;
	background-color: #57240F;
    padding-top: 20px;
	text-align: center;
}


footer p{

color: #E8F4E7;
font-size: 16px;
font-family: "Roboto Serif", serif;
margin-bottom: 10px;

}




.container-col{

margin-left: auto;
margin-right: auto;
width:100%;
max-width:900px;
}

.container-topo{
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	height: 500px;
	background-color: #FA9F1C;
	display:flex;
	justify-content: center;
	align-items: center;
}

.container-centro{

	margin-left: auto;
	margin-right: auto;
	width:100%;
	max-width: 450px;
	}

.box-topo{
    width: 100%;
	max-width: 500px;
}



/* COLUNAS*/

.col-2{
 margin-bottom: 10px;
 width: 50%;
 
}

.col-3{
	margin-bottom: 10px;
	width: 33.3%;
	
   }

   .col-4{
	margin-bottom: 10px;
	width: 25%;
	
   }
/* FLEX*/

.flex-sb{
	display: flex;
	justify-content: space-between;
}

.flex-center{
	display: flex;
	justify-content: center;
}

.flex-sa{
	display: flex;
	justify-content: space-around;
}

.flex-gap-peq{
    display: flex;
	gap: 20px;
}
/* CORES DE FUNDO */

.bc-escuro{
	background-color: #57240F;
}

.bc-medio{
	background-color: #CA7F13;
}

.bc-claro{
	background-color: #d7d7d7;
}

/*PADDINGS E MARGINS*/

.pad-t-b-grande{
	padding-top: 100px;
	padding-bottom: 100px;
}

.pad-t-b-medio{
	padding-top: 60px;
	padding-bottom: 60px;
}

.pad-t-b-pequeno{
	padding-top: 20px;
	padding-bottom: 20px;
}


.teste{
	width: 200px;
	height: 200px;
	background-color: aqua;
	margin-left: auto;
	margin-right: auto;
}

.margem{
margin-top: auto;
margin-bottom: auto;
}





/*Colunas Responsivo*/

@media only screen and (max-width: 750px){



.flex-gap-peq{
flex-wrap: wrap;
}



.col-2{

	width: 100%;
}


.col-3{

	width: 100%;
}

.col-4{

	width: 48%;
}























}