style.css

/*---------------------------------------------------HEADER---------------------------------------------------------*/
body {
	width: 100%;
	font-family: 'Source Sans Pro', sans-serif; /*fonte do texto*/
	/*padding-top: 100px; /*espaço para o menu fixo*/
	background: linear-gradient(45deg, #D8F3E7, #D7F1FF); /*fundo degradê*/
}

nav a {
	text-decoration: none; /*remove a decoração*/
	color: white; 
	transition: 0.2s; /*tempo de transição*/
	text-shadow: 2px 2px 5px gray; /*sombra*/
	cursor: pointer; /*mostra que o item é "clicável" ao passar o mouse*/
}

/*diminui a opacidade ao passar o mouse em cima*/
.a-menu:hover {
	opacity: 0.6;
}

/*diminui a opacidade da seta*/
.a-menu:hover .seta {
	opacity: 0.8;
}

/*imagem logo*/
.img-logo {
	width: 13%;
	margin-left: 4%;
}

/*titulo logo*/
.h1-logo {
	font-family: 'Merriweather Sans', sans-serif; 
	letter-spacing: 2px; /*espaço entre as letras*/
	font-size: 40px; /*tamanho da fonte*/
	margin-left: 3.5%;
	color: white;
	text-shadow: 2px 2px 5px black;
}

.menu-de-navegacao {
	top: 0; 
	left: 0;
	width: 100%; /*ocupa a largura inteira da página*/
	height: 100px;
	background: linear-gradient(45deg, #4BB4FF, #007540); /*cor de fundo*/
	font-size: 25px;
}

.menu {
	width: 80%;
	margin-left: 10%;
	margin-right: 3%;
	text-transform: uppercase; /*deixa o texto em maiúsculo*/
}

.menu-lista li{
	padding: 25px;
}

.submenu-lista {
	position: absolute; /*posição fixa*/
	top: 100px;
	background: linear-gradient(45deg, #4BB4FF, #007540);
	border: 1px solid #D9E0E8;
	display: none; /*deixa o submenu escondido*/
	transition: 0.9s all;
}

.submenu-lista li { 
	border: 0.5px solid #D9E0E8; /*borda*/
	line-height: 30px; /*espaçamento entre as linhas*/
	width: 190px;
	transition: 0.3s background; /*tempo de transição*/
}

.submenu-lista a {
	color: white;
	font-size: 13px;
	text-decoration: none;
	text-shadow: 0.5px 0.5px 5px gray;
}

/*torna o submenu visível*/
.menu-de-navegacao ul .submenu-lista.mostra {
	display: block;
}

/*virar a seta qunado o submenu estiver aberto*/
.menu-lista li a img.gira {
	transform: rotate(180deg); /*roda 180 graus*/
}

.seta {
	transition: 0.5s;
	width: 20px;
}

/*diminui a opacidade ao passar o mouse em cima*/
.submenu-div li:hover {
	opacity: 0.6;
}





/*--------------------------------------------------INDEX----------------------------------------------------------*/
.main-index {
	padding-bottom: 100px;
}

h2 {
	font-size: 28px;
	margin: 50px 80px 40px 80px;
	font-weight: bold; /*negrito*/
}

h3 {
	font-size: 22px;
	margin: 0px 70px 10px 70px;
}

p {
	font-size: 21px;
	text-align: justify;
	line-height: 40px;
	margin: 10px 100px 20px 100px;
}

.img-capa {
	margin-top: 20px;
	width: 100%;
}

.video {
	margin-top: 60px;
	margin-bottom: 80px;
	width: 41.2em;
	height: 25.9em;
}

.duvidas, .orientacoes {
	width: 100%;
	padding-bottom: 30px;
	background: linear-gradient(45deg, #EAF8FF, #F3FFF8); /*fundo degradê*/
}

.duvidas p, .duvidas h3, .orientacoes p {
	margin: 0 100px 10px 100px;
 }

.trilhas p {
 	margin-bottom: 20px;
}

.trilhas {
	margin-bottom: 30px;
}

.orientacoes li {
	font-size: 20px;
	text-align: justify;
	line-height: 40px;
	margin: 10px 100px 25px 100px;
}

.duvidas p {
	font-size: 20px;
	margin-bottom: 50px;
	margin-top: 10px;
}

.duvidas a, .orientacoes a, .trilhas a {
	text-decoration: none;
	color: #007540;
	font-size: 21px;
}

/*muda a cor ao passar o mouse em cima*/
.duvidas a:hover, .orientacoes a:hover, .trilhas a:hover {
	color: #2EAB68;
}





/*-------------------------------------------------TRILHAS---------------------------------------------------------*/
.main-trilhas {
	padding-bottom: 100px;
}

.div-trilhas h2 {
	margin-bottom: 30px;
}

.div-trilhas h3 {
	margin-left: 100px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.conteudos {
	font-size: 20px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.div-trilhas .video {
	width: 41.2em;
	height: 25.9em;
	margin-top: 50px;
	margin-bottom: 60px;
}

.nivel-1, .nivel-2, .front-end, .mobile, .cienciaDados, .java, .python {
	margin: 0 100px 30px 100px;
	padding-bottom: 60px;
	padding-top: 30px;
}

.nivel-2 {
	margin-bottom: 30px;
}





/*------------------------------------------------INSCRIÇÃO--------------------------------------------------------*/
.main-formulario {
	background-color: #AAE1FF;
	padding-bottom: 100px;
}

.form {
	border: 2px solid white;
	border-radius: 10px;
	margin: 50px 100px 50px 100px;
	padding-top: 50px;
	padding-bottom: 100px;
	background-color: white;
}

.formulario {
	height: 30px;
	padding: 10px
}

.div-form-perguntas, .div-form-opcoes, .div-form-trilha {
	margin: 0px 100px 0px 100px;
	font-size: 21px;
	text-align: justify;
	line-height: 40px;
}

.div-form-perguntas label {
	margin: 0px 0px 20px 0px;
}

.div-form-perguntas span {
	font-size: 16px;
	color: red;
}

.div-form-perguntas input {
	font-size: 15px;
	border: 1px solid rgb(133, 133, 133);
	border-radius: 5px; /*canto da borda arredondado*/
	margin-bottom: 40px;
	outline: none; /*remove o contorno padrão do navegador*/
}

.div-form-perguntas input:focus {
	border: 1px solid black;
	outline: 1px solid black;		
}

.div-form-perguntas input:hover {
	border: 1px solid black;		
}

.div-form-opcoes label {
	padding: 5px 0px 20px 0px;
}

.div-form-opcoes input {
	margin-left: 10px;
}

.div-form-trilha label {
	margin: 10px 0px 20px 0px;
}

.div-form-trilha input {
	margin-top: 20px;
}

.div-form-opcoes {
	margin-top: 20px;
}

.botao, .a-avancar, .a-confirmar {
	width: 300px;
	font-size: 21px;
	padding: 10px;
	margin: 60px;
	/*Usei a cor azul no botão porque os tipos mais frequentes de daltonismo estão relacionados às cores verde e vermelho*/
	background-color: #1563DE;
	color: white;
	border: 1px solid white;
	border-radius: 5px;
	box-shadow: 2px 2px 5px gray;
	transition: 0.5s;
}

.botao:hover, .a-avancar:hover, .a-confirmar:hover {
	background-color: #063B8E;
}

#a-avancar, #a-confirmar, .subtitulo-form {
	text-align: center;
}

.subtitulo-form {
	margin: 30px 0 50px 0;
	font-size: 25px;
}

/*esconde o conteúdo*/
#mais-1, #mais-2, #mais-3, #mais-4, #mais-5, #a-avancar, #turno-texto {
	display: none;
}

.img-inscricao {
	width: 40%;
	margin-bottom: 30px;
}




/*--------------------------------------------------FOOTER---------------------------------------------------------*/
footer {
	width: 100%;
	height: 380px;
	background: linear-gradient(45deg, #7DD2FF, #007540); /*fundo degradê*/
	color: white;
	text-shadow: 2px 2px 5px gray;
}

.rodape-logo {
	width: 230px;
	height: 230px;
	margin-top: 30px;
	margin-left: 40px;
}

.titulo-rodape {
	font-size: 21px;
	font-weight: bold;
	margin: 0;
	padding-bottom: 20px;
}

.rodape a {
	color: white;
	text-decoration: none;
	padding: 3px;
	font-size: 17px;
	transition: 0.3s all;
	line-height: 25px;
}

.rodape p {
	font-size: 17px;
	margin: 0;
	line-height: 30px;
}

.rodape a:hover {
	color: #A3D8FE;
}

.rodape-contato, .rodape-endereco {
	padding: 50px 50px 20px 35px;
	cursor: inherit;
}

.rodape-contato img, .rodape-endereco img {
	width: 20px;
}

.rodape-redes-sociais img {
	width: 30px;
	margin-left: 10px;
	margin-top: 30px;
	transition: 1s;
}

.rodape-redes-sociais img:hover {
	transform: scale(1.1); /*aumenta a imagem ao passar o mouse em cima*/
	opacity: 0.8;
}

.rodape-mapa {
	width: 320px;
	height: 100px;
	margin-top: 35px;
	border: 1px solid white;
}

.copyright {
	font-size: 15px;
	margin-top: 2%;
}