/* 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%;
	}
	

/* TEXTO */

	.titulo-A{
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	color: red;
	font-size: 50px;
	line-height: 60px;
	margin-top: 30px;
}


.titulo-B{
	font-family: "Roboto Serif", serif;
	font-weight: 900;
	color:white;
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 10px;
	text-align: center;
	
}


.texto{
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	color:white;
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 10px;


}

.intro{
	font-family: "Roboto Serif", serif;
	font-weight: 300;
	color: #f5f2f2;
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 10px;

}

.intro-texto{
	font-family: "Roboto Serif", serif;
	font-weight: 600;
	color: #f5f2f2;
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 50px;
	margin-top: 50px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	text-align: center;

}


/* ESTRUTURA */ 

.teste{
	width: 50%;
	height: 600px;
	background-color: yellow;
}

 
header{
	width: 100%;
	
}
section{
	width: 100%;
}

footer{
	width: 100%;
	
}

.header-conteiner{
	width: 100%;
    max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
} 

.logo{
	color: black;
	font-size: 20px;
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	
}

nav li{
   list-style-type: none;
   padding-left: 30px;

}

nav ul{
	display: flex;
}

nav a{
   color: black;
   text-decoration: none;
   font-size: 15px;
   font-family: "Roboto Serif", serif;
   font-weight: 400;

}

nav a:hover{
text-decoration: underline;
color: blue;

}

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


.conteiner-topo{
	width: 200%;
	height: 500px;
    max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(imagens/baaaaaaaaad.jpg);
	background-size: cover;
    background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-bottom: 10px;

} 

.foother-conteiner{
	width: 100%;
    max-width: 900px;
	margin-left: auto;
	margin-right: auto;
} 

footer p{
color: blue;
text-align: center;
margin-bottom: 10px;
font-family: "Roboto Serif", serif;
font-weight: 400;

}

.flex-center{
	display: flex;
	align-items: center;
}

/*COLUNAS*/

.caixa-topo{
	text-align: center;

}


.flex{
	display: flex;
	content: space-between;
	gap: 30px;
}

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

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

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

.gap-peq{
	gap: 20;
}


.gap-med{
	gap: 30;
}


.gap-gran{
	gap: 40;
}


/* CORES DE FUNDO */ 

.bc-escuro{
	background-color: #B2B600;
}

.bc-meio{
	background-color:#00349B;
}

.bc-claro{
	background-color: #00349B;
}

/* MARGINS E PADINGS*/

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

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

.pad-tb-pequeno{
	padding-top:20px;
	padding-bottom:20px;
}
	
/*
  Colunas Responsivo
   */

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

  
   .flex{
	flex-wrap:wrap;
   }

   .col-2{
	width: 100%;
   }

   .col-3{
	width: 100%;
}

.col-4{
	width: 48%;
}


}