html { font-size:21px; }
body { background:#05324F; font-family: 'Montserrat'; }

header { position:fixed; top:0; left:0; z-index: 99; width:100%; display:flex; height:80px; align-items: center; background: #0069BF; overflow-y:hidden; }
header a { color:#fff; text-decoration: none; font-size:18px; padding:10px 20px; font-weight: 600; transition: all 200ms linear; }
header a:hover { color:#A8E52E; }
header .redes a { margin:0; transition: all 200ms linear; }
header .redes a path { transition: all 200ms linear; }
header .redes a:hover path { fill:#A8E52E; }
header .redes a:hover circle { stroke:#A8E52E; }
header .menu { display: flex; align-items: center; justify-content: center; height: 100%; }
header .menu a { padding:10px 40px; }


main { max-width:100vw; overflow: hidden; }
main .banner { background:#fff url(../img/banner-bg.jpg) no-repeat top center; background-size:cover; aspect-ratio: 1920 / 858;  }
main .banner .logo { }

main .porque { background:#fff url(../img/infraestrutura-bg.jpg) no-repeat top center; background-size:cover; padding:50px 0; }
main .porque h1 { font-size:90px; font-weight:400; color:#fff; letter-spacing: -3px;  position: relative; z-index: 10; }
main .porque .baloes { position: relative; z-index: 12; }

main .quero { display: flex; justify-content: start; margin:20px 0; }
main .quero.end { justify-content: end; }
main .quero.center { justify-content: center; }
main .quero a { color:#05324F; font-size:35px; background:#fff; padding:0 20px; border-radius:50px; text-decoration: none; font-weight: 700; transition: all 200ms linear; }
main .quero a:hover { background:#8DC63F; }

main .vem { margin:120px 0; position: relative; display: flex; justify-content: center; flex-direction: column; }
main .vem span { display: inline-block; text-align: right ;}
main .vem span::after { z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content:" "; background:url(../img/vem-bg.png) no-repeat center center; width:1500px; height:1500px; }
main .destaques { position: relative; z-index: 10; padding:90px 0 0 60px; display:flex; justify-content:end; }

main .fale { display: flex; justify-content: end; margin:20px 0; z-index: 10; position: relative; }
main .fale a { color:#fff; font-size:35px; background:#05324F; padding:0 20px; border-radius:50px; text-decoration: none; font-weight: 700; transition: all 200ms linear; }
main .fale a:hover { background:#8DC63F; }

main .cursos { margin-top:30px; }
main .cursos h1 { line-height:124px; }
main #cursos .borda { border: 3px solid #fff; border-radius: 80px; margin-top:100px; padding:30px 50px; }

main .collapser { display: flex; flex-direction: row; width:100%; position: relative; z-index: 20; margin-top:30px; }
main .collapser-item { width:8%; max-height:600px; overflow: hidden ; display:flex; flex-direction:row; background:#05324F; border:3px solid #fff; border-radius:40px; margin-right:1%; transition: all 200ms linear; }
main .collapser div:nth-child(9) { margin-right:0 !important; }
main .collapser-title { width:100%; max-width:80px; position: relative; cursor: pointer; display: flex;; align-items: center; }
main .collapser-title h5 { position: relative; min-width:400px; white-space: nowrap; text-align: center; font-size:30px; font-weight:bold; color:#fff; transform: rotate(-90deg); left:50%; top:calc(100% - 200px); transform-origin:0; }
main .collapser-content { width: 0; overflow: hidden; font-size:18px; color:#fff; padding:20px; padding-left:0; display:flex; flex-direction: column; align-items: start; justify-content: center; }
main .collapser-content { transition: all 200ms linear; overflow: hidden; max-height:600px; min-height: 400px; }
main .collapser-content p,
main .collapser-content .detalhes { width:300px; }
main .collapser-item.open { width:40%; }
main .collapser-item.open .collapser-content { width:100%; }
main .collapser .detalhes .duracao,
main .collapser .detalhes .periodo,
main .collapser .detalhes .formato { background:url(../img/formato.png) no-repeat left center; padding-left:35px; font-size: 15px; line-height: 40px; display: inline-block; margin-right:10px; }
main .collapser .detalhes .duracao { background-image:url(../img/duracao.png); }
main .collapser .detalhes .periodo { background-image:url(../img/periodo.png); }

main .infraestrutura { background: #05324F no-repeat right center; padding:80px 0; }
main .infraestrutura h1 { font-size:72px; font-weight:400; color:#fff; letter-spacing: -3px;  position: relative; z-index: 10; line-height: 70px; margin-bottom:auto; }
main .infraestrutura p { font-size:34px; color:#fff; }
main .infraestrutura p strong { color:#8DC63F; }
main .infraestrutura .infra-slideshow { margin:50px 30px; }
main .infraestrutura .slick-dots { margin-top:20px; bottom:-60px; }
main .infraestrutura .slick-dots li { width: 27px; height: 27px; border-radius: 50%; border:2px solid #A8E52E; cursor: pointer; list-style-type: none; list-style: none; }
main .infraestrutura .slick-dots li.slick-active { background-color:#A8E52E; }
main .infraestrutura .slick-dots li button:before { color:transparent; }

main .agora { border: 3px solid #fff; border-radius: 80px; margin-top:100px; padding:80px; background:url(../img/agora-bg.png) no-repeat center center; background-size: cover; }
main .agora h1 { font-size:100px; font-weight:400; color:#fff; letter-spacing: -3px;  position: relative; z-index: 10; line-height: 100px; }


main .saiba { background: #05324F url(../img/saiba-bg.jpg) no-repeat right center; background-size: cover; padding:100px 0; border-radius:80px 80px 0 0; }
main .saiba span { white-space: nowrap; }
main .saiba h1 { font-size:80px; font-weight:400; color:#fff; letter-spacing: -3px;  position: relative; z-index: 10; line-height: 70px; }
main .saiba p { font-size:36px; color:#fff; line-height: 50px; margin-top:30px; }
main .saiba p em { font-weight: bold; }

main .saiba a { background: #05324F; border:3px solid #fff; border-radius:40px 40px 40px 0; position: relative; color:#fff; display: inline-block; text-decoration: none; font-weight: bold; font-size:38px; padding:10px 30px 10px 10px; height:88px; margin-bottom:20px; }
main .saiba a:before { content:""; position: absolute; left:-23px; bottom:-3px; width:47px; height:30px; background:url(../img/balao-corner.png) no-repeat center center; }
main .saiba a em { background-image:url(../img/balao-corner-2.png); } /* cache da imagem */
main .saiba a span { margin-left:20px; }
main .saiba a:hover { background:#0268AB; }
main .saiba a:hover:before { background-image:url(../img/balao-corner-2.png); }
main .saiba a > div { display: flex; align-items: center; height: 100%;; }
main .saiba a img { max-height:40px; margin-left:10px; }

.rodape { background-color: #fff; }

footer { color:#fff; }
footer p { margin-bottom:0; }
footer a { color:#fff; text-decoration: none; }
footer img { margin:0 10px; }
footer .direitos { background:#000; }
footer .direitos .doma { background:#000; }
footer .direitos .doma img { transform:scale(1) rotate(0); transition: all ease-in-out 5s; }
footer .direitos .doma:hover img { transform:scale(1.3) rotate(10deg) }

.wp-footer { position: fixed; right: 30px; bottom: 30px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #1EBEA5; padding: 2px; font-size: 60px; text-align: center;   -webkit-box-shadow: 0px 0px 46px -20px rgba(0,0,0,0.56); -moz-box-shadow: 0px 0px 46px -20px rgba(0,0,0,0.56); box-shadow: 0px 0px 46px -20px rgba(0,0,0,0.56); z-index: 10; }
.wp-footer a,
.wp-footer a:hover { color: #fff; text-decoration: none; }



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

	header { overflow-y: visible; }
	header a { padding:10px 10px; }

	header .menu-mobile { opacity:0; top:-1000px; background:#0268AB; position: absolute; left:0; padding:30px; border-radius:0 30px 30px 30px; z-index: 10; transition:opacity 200ms linear; }
	header .menu-mobile a { display: block; }
	header .menu-mobile.on { top:67px; opacity:1; }

	main .banner { background-image:url(../img/banner-mobile-bg.jpg); aspect-ratio: 7 / 5;  }

	main { margin-top:80px; }
	main .infraestrutura h1 { font-size:60px; }
	main .quero a,
	main .fale a { font-size:25px; }
	main .quero.end { justify-content: center; }
	main .fale { justify-content: center; }
	main .vem { margin:0 0 30px 0; }
	main .vem span { text-align: center; }
	main .vem .fale a { background:#8DC63F; color:#05324F; }
	main .destaques { padding:0 50px 30px 50px; }

	main .vem span::after { width: 400px; height: 800px; background-size: cover; }

	main .porque h1 { font-size:50px; line-height:50px; }
	main .infraestrutura h1 { font-size:50px; line-height:50px; }

	main .cursos { margin-top:0; }
	main .cursos h1 { line-height:54px; font-size:45px; }
	main #cursos .borda { border-radius: 50px; margin-top:40px; padding:20px 30px; margin: 20px; width:calc(100% - 40px); }

	main .collapser { flex-direction: column; }
	main .collapser-content p { font-size:16px; line-height:22px; } 
	main .collapser-item.open,
	main .collapser-item { width:100% !important; flex-direction: column; margin-bottom:20px; max-height:50px; border-radius:30px; }
	main .collapser-item.open { max-height:600px; }
	main .collapser-title { width:100%; max-width: 100%; }
	main .collapser-title h5 { font-size:18px; transform: rotate(0); left:0 !important; top:10px !important; width:70%; min-width:100%; text-align: center; }
	main .collapser-item .collapser-content { width:100% !important; margin-top:20px; padding:0 20px 20px !important; min-height:100px;  }
	main .collapser-content p, 
	main .collapser-content .detalhes{ width:100% !important; }
	main .collapser-content .detalhes { width:100% !important; }
	main .infraestrutura { padding:40px 0; }
	main .infraestrutura h1 { font-size:50px; padding-bottom:40px; }
	main .infraestrutura p { font-size:12px; }
	main .infraestrutura .slick-dots { bottom:-120px; }
	main .infraestrutura .slick-slide { display:flex; justify-content: center; }
	main .saiba { border-radius:40px 40px 0 0; padding:40px 20px; }
	main .saiba h1 { font-size:50px; line-height: 50px; }
	main .saiba p { font-size:18px; line-height:30px; }
	main .saiba a { font-size:18px; height:50px; margin-left:16px; }
	main .saiba a img { max-height:30px; margin-left:10px; }
	main .saiba a em { background-image:url(../img/balao-corner-sm-2.png); } /* cache da imagem */
	main .saiba a:before { width:26px; height:22px; left:-16px; background-position: left top; background-image:url(../img/balao-corner-sm.png); }
	main .saiba a:hover:before { background-image:url(../img/balao-corner-sm-2.png); }
	
	main .agora { padding:40px; }
	main .agora img { max-width:200px; }
	main .agora h1 { font-size:50px; line-height: 60px; }

	footer p,
	footer a { font-size:0.8rem; text-align: center; }
	footer p { font-size:12px; }
	footer img { max-width:50px !important; }

}

@media only screen and (max-width: 1399px) {
	main .collapser-title h5 { top:calc(100% - 240px); }
	main .collapser-content p, 
	main .collapser-content .detalhes { width:250px; }
}

@media only screen and (max-width: 1349px) {
	main .collapser-title h5 { top:calc(100% - 270px); }
	main .collapser-content .detalhes { width:200px; }
}

@media only screen and (max-width: 1200px) {
	main .collapser-title h5 { top:calc(200px); }
	main .collapser-item.open { width:50%; }
	main .collapser-content .detalhes { width:17vw; }
}