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

	}

/* Tipografia */

.titulo-a{
	color:rgb(44, 153, 196);
	font-family: "Roboto", serif;
	font-weight: 400px;
	font-size: 40px;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	
}

.titulo-b{
	color:rgb(44, 153, 196);
	font-family: "Roboto", serif;
	font-weight: 400px;
	font-size: 40px;
	margin-bottom: 20px;
	

}

.titulo-topo{
	color:white;
	font-family: "Roboto", serif;
	font-weight: 400px;
	font-size: 40px;
	margin-left: auto;
	margin-bottom: 15px;
	text-align: center;
}

.texto-topo{
	color:#62B6CB;
	font-family: "Roboto", serif;
	font-weight: 400px;
	font-size: 22px;
	margin-left: auto;
	margin-top: 15px;
	margin-bottom: 20px;
	text-align: center;
	
}

p.texto{
	font-family: "Roboto", serif;
	font-weight: 100;
	color:#ffffff;
	font-size: 20px;
	text-align: center;
	
}

h2 {
	color: rgb(244, 243, 248);
	font-size: 20px;
	margin-left:40px;
	margin-bottom: 30px;
	text-align: center;
	margin-top: 5px;
	
}

h1 {
	color: rgb(238, 236, 247);
	font-size: 40px;
	margin-left:40px;
	margin-bottom: 10px;
	
}

.racha {
	color: rgb(238, 236, 247);
	font-size: 35px;
	margin-left:40px;
	margin-bottom: 40px;
}
	
.membros{
	color: rgb(238, 236, 247);
	font-size: 55px;
	margin-left:40px;
	margin-bottom: 60px;
	
}	

.titulo-seg-sec{
	color:rgb(44, 153, 196);
	font-family: "Roboto", serif;
	font-weight: 400px;
	font-size: 45px;
	margin-top: 30px;
	margin-bottom: 40px;
	margin-left: 9%;
	text-align: left;
	
}

p.texto-seg-sec{
	font-family: "Roboto", serif;
	font-weight: 100;
	color:#ffffff;
	font-size: 20px;
	margin-bottom: 20px;
	margin-left: 9%;
	
}

.Cor-nome-racha{
	color:rgb(44, 153, 196); 
}

/* EXTRUTURA */

header{
	width: 100%;
	height: 80px;
	background-color: #1B4965;
}

.header-centro{
	width: 100%;
	max-width: 900px;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo{
	display: flex;
	align-items: center;
	font-family: "Roboto Serif", serif;
	font-weight: 400px;
	font-size: 35px;
	color: #ffffff;
}

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

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

ul a{
	text-decoration: none;
	color: white;
	font-size: 20px
}

ul a:hover{
	text-decoration: none;
	color: #000000;
}

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

section{
	width: 100%;
}

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

footer p{
	font-family: "Roboto Serif", serif;
	margin-bottom: 10px;
	font-size: 15px;
	color: #ffffff;
}

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

.container-topo{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1400px;
	height: 600px;
	background-color: black;
	background-image: url(imagens/skz\ escuro.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.box-topo{
max-width: 500px;

}

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

}

.flex-gap-peq-vocal{
	display: flex ;
	gap: 50px;

}
/* COLUNAS*/

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

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

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

}
/* CORES DE FUNDO*/

.bc-escuro {
	background-color: #1B4965;
}

.bc-médio {
	background-color: #62B6CB;
}

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


/* PADDING E MARGING*/

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

.pad-t-b-médio{
	padding-top: 60px;
	padding-bottom: 60px;
}

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

.teste{
	width: 900px;
	height: 355px;
	background-color: #1B4965;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 50px;
}

.moldura{
border: 5px solid blue;

}

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

}