@charset "utf-8";
/* CSS Document */

/*https://xd.adobe.com/view/3b5d8da7-d28f-417e-905c-2c54ebe94518-6e0e/screen/7caf3665-a440-4481-8eb8-4f92e1fe8b0e/specs/*/

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css');
@import url('https://vjs.zencdn.net/8.3.0/video-js.css');
 

@import url('fonts/gilroy.css');
@import url('fonts/cartograph.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');

html, body { overflow-x:hidden; }

#wrapper { font-family: 'Poppins', sans-serif!important; font-size:1rem; background-color:#000; color:#fff; }

a:hover { color:#01FF9F; }

.hideme,.h-cases { display:none!important; }

#menu, #full_menu { position:fixed; top:0px; z-index:999; width:100%; }
#menu, .painel_menu { height:150px; }
/* { transition: all 600ms ease-out; will-change:contents; height:150px; } */

.control { position:absolute; top:50%; left:45%; z-index:9999; }

a.controla_menu { display: grid; text-decoration: none; }
a.controla_menu i { color:#fff!important; font-size:45px; vertical-align: 0.5em; cursor:pointer;  }
.abre a.controla_menu i { vertical-align:0.2em!important; }
a.controla_menu:hover i { color:#00FF9F!important; }

#full_menu { display:none; position:fixed; height:100vh; background-color:#0036EA; z-index:999999; }
#full_menu a { color:#00FF9F; font-size:38px; text-decoration: none; font-weight: 700; }
#full_menu .items a:first-of-type { margin-top:50px; }
#full_menu .items a { margin-bottom: 20px; display:block; }
a.slide_to:first-of-type { margin-top:-50px!important; }
#full_menu a:hover { color:#fff; }

a.idioma { display:flex!important; height:47px; width:47px; font-size:13px!important; border-radius:42px; color:#0036EA!important; background-color:rgba(255,255,255,0.9); justify-content: center; align-items: center; }
a.idioma:hover { background-color:#00FF9F;  }
a.idioma.ativo { background-color:#00FF9F; font-weight: 800; }
#full_menu .socials a { color:#fff; }
#full_menu .socials a:hover { color:#00FF9F; }

#video { position:relative; background: #20262E; margin-bottom: 80px;}
#video video { width:100%; height:100%; font-weight: 800; }
.video-js .vjs-big-play-button {
	border-radius: 26px;
    background-color: rgba(255,255,255,0.5);
	border:none;
	color:#000;
	line-height: 1.65em;
    height: 1.63332em;
    width: 1.7em;
    transition: all 0s; }
.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus { background-color: rgba(255,255,255,1); }

#video img { width:100%!important; }

.abrir_mais { margin:20px auto; cursor:pointer; display: flex; flex-direction: row; align-content: center; align-items: center; }
.abrir_mais img { padding-right:20px; }

#criatividade h1 { font-family:'Poppins',sans-serif; font-weight: 700; font-size:3rem; line-height:65px; margin-bottom:48px; }
#criatividade h1 span { color:#00FF9F; }
#criatividade p { font-size:22px; line-height: 39px; margin-bottom:30px; }
#criatividade { margin-bottom:100px; }

.item-case { display:flex; }
#cases .conteudo { display:flex; width:100%; min-height:556px; line-height: 39px; flex-direction: column; justify-content: center; padding: 0 6rem 0 5rem; color:#DDDDDD; }
#cases .conteudo h3 { font-size:35px; margin-bottom:31px; }
#cases .conteudo p { font-size:22px; }
strong, b { font-weight: bold!important; }
.botao-casos { margin:77px auto; }
.base-button { font-weight:700; background-color:#01ff9f; border-radius:20px;line-height:32px; padding:18px 29px; border:none;  }
.base-button:hover { background-color:#A2FFDC; }

.swiper { width: 100%; height: 100%; overflow: hidden; }
.swiper-slide { text-align: center; height:556px; display: flex;justify-content: center;align-items: center; }
.swiper-slide img { display: block;width: 100%;height: 100%;object-fit: cover; }
.swiper-pagination { bottom:20px!important; }
.swiper-pagination-bullet { position:relative!important; height:6px!important; width:50px!important; border-radius:3px; background-color: #fff; opacity:1; margin:auto 5px!important; }
.swiper-pagination-bullet b { position: absolute; bottom: 0; left: 0; z-index: 2; width: 0%; border-radius:5px; margin-left:0.2px; height: 6px; background-color: #01ff9f; }
.swiper-pagination-bullet-active b { animation-name: countingBar; animation-duration: 3s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-direction: alternate ; animation-fill-mode:forwards; border-radius:3px; }
@keyframes countingBar { 0% {width: 0;} 100% {width:100%;} }

.separador { margin-bottom:125px!important; }
.vinteanos p { font-weight:700; font-size:30px!important; color:#0062FF; line-height: 42px; padding:25px 70px 25px 50px; }

#oquefazemos { color:#00FF9F; line-height: 30px; }
#oquefazemos h2 { font-size:33px; font-weight: 700; margin:30px auto; }
#oquefazemos .colunas { font-size: 18px; line-height: 30px; font-weight: 400; color:#DDDDDD; text-transform:uppercase; text-align:left; }
#oquefazemos h3 { line-height: 30px; font-weight: 400; font-size:24px; margin:50px auto; }

#marcas h2, #quem_passou h2 { font-size:28px; text-align: left; font-weight: 700; margin-bottom:60px; color:#00FF9F; line-height: 39px; }
#marcas .gx-5, #quem_passou .gx-5 { --bs-gutter-x: 0!important; }
#quem_passou { margin-top:90px; }
#quem_passou h2 { color:#909C9F; }
/*#quem_passou img { opacity: 0.35; }*/

#marcas img, #quem_passou img { margin:30px auto 50px; }

#rodape { margin:180px auto 0px!important; padding-bottom:98px!important; }
#rodape a { color:#DDDDDD }
#rodape a:hover { color:#00FF9F; }
.sociais { margin:80px auto 70px; }
.sociais i { font-size:40px; }

#contato { background-color :#4D5A5D; position:fixed; bottom:0px; width:100%; z-index:999; }
.controle_contato { height:56px; display: flex; align-items: center; justify-content: center; }
.controle_contato span { display:inline-block; font-weight: 700; color:#01FF9F; text-decoration: none; cursor: pointer; font-size:24px; }
.painel_contato { display:none; height:100vh; padding:55px 0px 30px; }
.painel_contato h2 { font-size:38px; font-weight: 700; line-height: 42px; color:#00FF9F; margin-bottom:34px; }
.painel_contato p { font-size:16px; line-height: 32px; font-weight: normal; margin-bottom:34px; }
.painel_contato p a { display:block; color:#DDDDDD; }
.painel_contato p a:hover { color:#00FF9F; }

.painel_contato .socials { margin:66px auto 59px auto; }
.painel_contato .socials a i { font-size:32px; color:#fff; }
.painel_contato .socials a:hover i { color:#00FF9F } 
.fecha_contato { cursor:pointer; }

.modal.show .modal-dialog { max-width:75vw; }
.modal-content { height:90vh; border-radius:1.5rem; }
.modal-title { font-size:32px; color:#000; font-weight: 800; padding:1rem 2rem 0px; }
.modal-header { border-bottom:none; }
.modal-body { color:#000; padding:1rem 3rem 2rem; line-height: 1.7; overflow:auto; margin:0px 1rem 1rem 0px; }
.modal-body p { margin:25px 0px; }
.modal-body em { font-style: italic; }
.modal-body strong { font-size:18px; }

@media screen and (max-width:1024px)
{
	
	html,body { overflow-x:hidden; }
	
	#full_menu { width:100vw!important; }
	.tablet_fix { margin-top:60px; }
	
	#cases .conteudo { max-height: 364px!important; padding: 0 4rem 0 3rem; }
	.separador { margin-bottom:95px!important; }
	#rodape { margin:217px auto 97px!important; }

	.painel_contato h2 { font-size:32px; line-height: 36px; margin-bottom:30px; }
	.painel_contato p { font-size:16px; line-height: 28px; margin-bottom:14px; }
	.painel_contato .socials { margin:46px auto 39px auto; }

}


@media screen and (max-width:767.9px)
{
	#video { margin-bottom: 30px; } 
	#vdesktop { display:none; }
	#vmobile, #vmobile_html5_api { display:block!important; }
	.video-js .vjs-big-play-button { margin-left: -0.8em; top:45%; }	
	.control { position:absolute; top:50%; left:40%; z-index:9999; }
	
	.painel_menu img, .painel_contato img { width:100%; }
	#full_menu a { font-size:30px; display: block; text-decoration: none; font-weight: 700; line-height:45px; }
	#full_menu a:first-of-type { margin-top:50px; }

	#full_menu .controla_menu, .fecha_contato { width:80%!important; }
	
	#criatividade h1 { font-size:34px;  font-weight: bold; line-height:42px; margin-bottom:48px; }
	#criatividade h1 span { color:#00FF9F; }
	#criatividade p { font-size:18px; line-height: 30px; }

	#criatividade h2 { font-size:34px;  font-weight: bold; line-height:42px; margin-bottom:48px; }
	#criatividade h2 span { color:#00FF9F; }
	#criatividade p { font-size:18px; line-height: 30px; }

	#cases .conteudo { min-height:220px!important; padding: 0 2rem; }
	#cases .conteudo h3 { font-size:20px; line-height: 39px;  margin-bottom:10px; }
	#cases .conteudo p { font-size:16px; line-height: 26px; }
	.more-cases { padding:18px 18px; border:none;  }
	
	.swiper-slide { height:auto!important; }
	
	.vinteanos p { text-align:left; padding:25px 0px; }
	
	#oquefazemos h2 { font-size: 30px; margin:50px auto 30px; }
	#oquefazemos h3 { margin:30px auto; }
	.base-button.fazemos { margin:16px auto; padding:10px 40px; }
	
	#marcas h2, #quem_passou h2 { font-size:24px; }
	#marcas .gx-5, #quem_passou .gx-5 { --bs-gutter-x: 3rem!important; }
	#marcas img, #quem_passou img { margin:30px 0px; max-height: 80px!important; }
	
	#rodape { margin:96px auto 50px!important; }
	.rodape { flex-direction:column-reverse; }
	
	.painel_contato { padding:40px 0px 30px; }
	.painel_contato h2 { font-size:30px; line-height: 32px; margin-bottom:25px; }
	.painel_contato p { line-height: 30px; margin-bottom:20px; }
	.painel_contato .socials { margin:56px auto 49px auto; }
	
	.tablet_fix { margin-top: 50px; }
	.mobile-reverse-column { flex-direction: column-reverse!important; }

	.modal.show .modal-dialog { max-width:100vw; }
	.modal-title { font-size:26px; color:#000; font-weight: 800; }
	.modal-body { font-size:15px; color:#000; padding:2rem 1rem; }
}

@media screen and (min-width:350px) and (max-width:380px)
{
	.painel_contato h2 { font-size:26px; line-height: 28px; margin-bottom:20px; }
	.painel_contato p { font-size:14px; line-height: 26px; margin-bottom:14px; }
	.painel_contato .socials { margin:46px auto 39px auto; }
}