:root{
	--primaria: #00b8f4;
	--secundaria: rgb(0, 0, 0);
	--fundo-gelo: whitesmoke;
	--fundo-branco: #fff;
	--ponteiro: #c2cf07;

}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html{
	scroll-behavior: smooth;
}

.body{
	font-family: monospace;
	background-color: var(--secundaria);
}

/* Navbar */											
.navbar{											/*area navbar*/
	height: 15vh;
	background-color:var(--secundaria);
}

.navbar-toggler-icon i{								/* icone navbar */
	color: var(--primaria);
	font-size: 28px;
}

#navegacao ul li a{									/* links navbar*/
	color: var(--primaria);
}

a.navbar-brand img{									/* icone logo */
	height: 8vh;
	
}

a.dropdown-item img{								/* logo submenu */
	height: 30px;
}

/* Header */
.header{
	height: 90vh;
	width: 80vw;
	margin: 0 auto;
	background-image: url(imagens/molde2_grande.png);
	background-size: 100% 100%;
	/* background-attachment: fixed; */
}

/* Main */
section{											/* area section */
	background-color: var(--fundo-branco);
	border-radius: 15px;
	padding: 20px;
	width: 80vw;
	margin: 0 auto;
	margin: 10vh auto;
}

/* Section Sobre */
.titulo p{												/* titulo das sections */
	border-left: 5px solid var(--primaria);
	padding-left: 10px;
	color: var(--primaria);
	font-size: 2em;
	text-indent: 25px;
	text-transform: uppercase;
	font-weight: bold;
}

.box-sobre{
	display: flex;						/* area section sobre */
}

.foto{
	width: 30%;							/* area foto sobre */
	
}

.foto img{								/* imagem sobre */
	width: 100%;
	border-radius: 50%;
	margin-top: 20px;
}

.texto{										/* area texto sobre */
	width: 70%;
}


/* Section estudos */
.box{												/* campo estudos e portfolio */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.box div{ 											/* box individual estudos e portfolio */
	width: 250px;
	height: 250px;
	margin: 0 15px 15px 0;
	background-color: var(--fundo-gelo);
	border-radius: 15px;
}

.box div img{
	width: 100%;	
	padding: 15px;
	height: 100%;					         /* tamanho imgagem dentro dos box*/
}

.box div ul{										/* area da ul dos box */
	display: none;
	background-color: #36c9fa;
	height: 100%;
}

.box ul li{
	font-weight: bold;
}

.box div:hover img{									/* retirando a imagem */
	display: none;
}

.box div:hover ul{						
	animation: 2s;
	display: block;
	padding: 10px 30px;
	border-radius: 15px;
}

/* Section Certificados */
.box-certificado{							/* area certificado*/
	height: 60vh;
	margin: 0 auto;
}

.carousel-item img{								/*imagem certificados*/
	width: 100%;
	height: 50vh;
}

.carousel-indicators i{							/* icones indicadores */
	font-size: 40px;
	margin-right: 10px;
	cursor: pointer;
	color:var(--primaria);
}

.carousel-indicators i.active{					/* indicadores ativos */
	color: var(--ponteiro);
}


.carousel-control-prev i, .carousel-control-next i{  /* item pre e pos  */
	font-size: 40px;
	margin-right: 10px;
	cursor: pointer;
	color:var(--primaria);
}


/* Section contatos */
.box-contatos{							/* area de contatos */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.box-icone{ 								/* area de icone */
	display: flex;
	align-items: center;
	background-color: var(--fundo-gelo);
	padding: 10px;
	border-radius: 15px;
	margin-bottom: 10px;
}

.box-icone i{								/*icone tamanho*/	
	font-size: 40px;
}

.box-icone span{							/* texto icone */	
	color: var(--secundaria);
	padding-left: 5px;
	font-size: 1.3em;
}

.box-contatos a, .box-contatos a span{  	
	color: var(--primaria);
}

.box-contatos a:hover, .box-contatos a:hover span{
	color: var(--fundo-branco);
	background-color: var(--primaria);
	text-decoration: none;
}


/* Footer */
footer{
	height: 10vh;
	background-color: rgb(65, 63, 63);
}

#rodape{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.logo-footer img{
	height: 8vh;
}

.texto-footer{
	height: 10vh;
	margin-left: 5px;
	display: flex;
	flex-direction: column;
}

.texto-footer p{
	line-height: 1vh;
	padding-top: 5px;
}




 @media (max-width:300px){          /* telas pequenas */
	.titulo p{												
		border-left: 5px solid var(--primaria);
		padding-left: 10px;
		color: var(--primaria);
		font-size: 1.4em;
		text-indent: 25px;
		text-transform: uppercase;
	}

	.box-sobre{
		display: flex;	
		flex-direction: column;					
	}

	.foto{
		width: 100%;
		order: 1;							/* area foto sobre */
	}
	
	.foto img{								/* imagem sobre */
		width: 100%;
		border-radius: 50%;
		margin-top: 0px;
	}
	
	.texto{										/* area texto sobre */
		width: 100%;
	}

	.box div ul{										/* area da ul dos box */
		display: none;
		background-color: var(--primaria);
		height: 100%;
		font-size: .6em;
	}

	ol.carousel-indicators{
		display: none;
	}

	.box-icone span{							/* texto icone */	
		color: var(--secundaria);
		padding-left: 5px;
		font-size: .6em;
	}

	.box ul li{
		font-weight: bold;
	}

	.box-certificado{							/* area certificado*/
		height: 35vh;
		margin: 0 auto;
	}

	.carousel-item img{								/*imagem certificados*/
		width: 100%;
		height: 35vh;
	}

}

@media (min-width:301px) and (max-width:500px){          /* telas media */
	.titulo p{												
		border-left: 5px solid var(--primaria);
		padding-left: 10px;
		color: var(--primaria);
		font-size: 1.4em;
		text-indent: 25px;
		text-transform: uppercase;
	}

	.box-sobre{
		display: flex;	
		flex-direction: column;					
	}

	.foto{
		width: 100%;
		order: 1;							/* area foto sobre */
	}
	
	.foto img{								/* imagem sobre */
		width: 100%;
		border-radius: 50%;
		margin-top: 0px;
	}
	
	.texto{										/* area texto sobre */
		width: 100%;
	}

	.box div ul{										/* area da ul dos box */
		display: none;
		background-color: var(--primaria);
		height: 100%;
		font-size: .8em;
	}

	.box ul li{
		font-weight: bold;
	}

	ol.carousel-indicators{
		display: none;
	}

	.box-icone span{							/* texto icone */	
		color: var(--secundaria);
		padding-left: 5px;
		font-size: .8em;
	}

	.box-certificado{							/* area certificado*/
		height: 30vh;
		margin: 0 auto;
	}

	.carousel-item img{								/*imagem certificados*/
		width: 100%;
		height: 30vh;
	}

}