/*-----------------------------------------------------------------*/
/* 01. CSS RESET
/*-----------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline: 0px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html { 
	min-height: 100%;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height:auto;
	width: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

input[type="text"],input[type="password"],input[type="email"], textarea {
	width: 100%;
	font-family: inherit; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
}

/******************************************************************
/******************************************************************
/******************************************************************
/******************************************************************/

.clear-both{ clear: both; }
.vertical-center-align{ display: flex; flex-direction: column; justify-content: center; }
.center-align{ text-align: center; }
.right-align{ text-align: right; }
.destaque{ font-weight: bold; color: #E589FF; }
.destaque-dark{ font-weight: bold; color: #8700AC; }

.spacer-10{ height: 10px; }
.spacer-15{ height: 15px; }
.spacer-20{ height: 20px; }
.spacer-25{ height: 25px; }
.spacer-30{ height: 30px; }
.spacer-35{ height: 35px; }
.spacer-40{ height: 40px; }
.spacer-45{ height: 45px; }
.spacer-50{ height: 50px; }

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

body, html { font-family: 'Montserrat', sans-serif; scroll-behavior: smooth; background-color: #FFF; color: #000; }
p{ padding: 20px 0 10px;}
strong{ font-weight: 600; }

.parallax-section { position: relative; height: 100vh; background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; z-index: 1; }
.parallax-section.half{ height: 50vh; }
.parallax-section .overlay{     background: transparent url("../img/overlay.png"); opacity: 0.5; z-index: 0; width: 100%; height: 100%; position: absolute; z-index: 3; top: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.parallax-cena-home { background-image: url('../img/cena-home.jpg'); }
.parallax-cena-jardim { background-image: url('../img/cena-jardim.jpg'); }
.parallax-cena-correndo { background-image: url('../img/cena-correndo.jpg'); }
.parallax-cena-capacete { background-image: url('../img/cena-capacete.jpg'); }
.parallax-cena-acidente { background-image: url('../img/cena-acidente.jpg'); }
.parallax-cena-balanco { background-image: url('../img/cena-balanco.jpg'); }
.parallax-cena-estrelas { background-image: url('../img/cena-estrelas.jpg'); }

.overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white;  z-index: 2; pointer-events: none; text-align: center; z-index: 5; }
.overlay-text h1{ font-size: 3rem; font-weight: bold; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.overlay-text img{ filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); }

.intern .overlay-text h1{ font-size: 5rem; font-weight: bold; text-shadow: 0 0 10px rgba(0,0,0,0.5); }

.top{ padding: 10px 0; position: fixed; background-color: #FFF; z-index: 999; width: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.top .logo img{ cursor: pointer; }
.top .menu { list-style: none; display: flex; justify-content: flex-end; padding: 0; margin: 0; background-color: transparent; }
.top .menu li { padding: 0 20px; border-left: 1px solid #2F6C9F; color: #000; cursor: pointer;}
.top .menu li:first-child { border-left: none; }
.top .subtitle { font-size: 25px; text-transform: uppercase; font-weight: 300; color: #939393; font-family: 'Titillium Web', sans-serif; }
.top .menu.mobile{ display: none; text-align: right; padding-right: 10px; }
.top .menu.mobile img{ cursor: pointer; }
.top .instagram{ text-align: center; font-size: 12px; }
.top .instagram img{ height: 30px; margin-bottom: 3px; }
.top .instagram a{ color:#000; }

#menu-mobile{ background: linear-gradient(135deg, #eeeeee 0%, #ffffff 50%, #eeeeee 100%); color: #000; position: fixed; top: 68px; width: 100%; z-index: 5000; padding: 15px; text-align: center; display: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
#menu-mobile .item{ padding: 5px 0; border-bottom: solid 1px #CCC; line-height: 1.5}
#menu-mobile .item.last{ border: none; }

.content { padding: 30px 20px; align-items: center; justify-content: center; font-size: 1.2rem; color: #464646; }
.content h2 { font-size: 35px; text-transform: uppercase; font-weight: 300; color: #939393; font-family: 'Titillium Web', sans-serif;
    text-align: center; }
.content .spacer { width: 65px; height: 3px; margin: auto; margin-bottom: 30px; margin-top: 10px; background: #2F6C9F; }
.content.footer{ font-size: 1rem; text-align: center; }
.content.footer .agradecimentos{ font-size: 14px; }
.content.padding-bottom-none{ padding-bottom: 0; }

#painelCampanha{ position: relative; padding-top: calc((60% * (2 / 3) * 0.6) - 100px); }
#painelCampanha p{ line-height: 1.5 }
#painelCampanha p.destaque{ text-align: center; font-size: 1.5rem; font-weight: normal; color: #2F6C9F; margin-bottom: 30px; }
#painelCampanha p.center{ text-align: center; }
#painelCampanha .videoclipe{ width: 60%; aspect-ratio: 16 / 9; /*background: #F4F5F1;*/ position: absolute; z-index: 10; top: -30px; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); display: flex; justify-content: center; align-items: center; }
#painelCampanha .videoclipe .siclope{ position: absolute; top: -70px; left: 50%; transform: translate(-50%); }
#painelCampanha .videoclipe .siclope img{ height: 60px; }
#painelCampanha .realizacao{ text-align: center; font-size: 0.8rem; margin-top: 20px; }
#painelCampanha .realizacao .logo{ margin: 20px 0; }
#painelCampanha .realizacao .logo img{ max-height: 50px; }

#painelPrincipios .principio{ margin: 15px 0; }
#painelPrincipios .principio .ico{ background: linear-gradient(to right, #FFF 50%, #F4F5F1 50%); padding: 20px; display: flex; align-items: center; justify-content: center }
#painelPrincipios .principio .ico .icon{ width: 89px; height: 73px; background-image: url(../img/ico.png); display: flex; justify-content: center; align-items: center; color: #FFF; font-size: 2rem; font-weight: bold; }
#painelPrincipios .principio .text{ background-color: #F4F5F1; padding: 20px; }
#painelPrincipios .principio .text .hl{ font-weight: 600; font-style: italic; color:#2F6C9F; }
#painelPrincipios .principio h3{ font-weight: 600; }
#painelPrincipios h3.chapeu{ text-align: center; font-weight: bold; margin-bottom: 10px; }

#painelContato .field{ background-color: #F4F5F1; border: solid 1px #FFF; border-radius: 5px; color: #494949 }
#painelContato .btn{ display: flex; flex-direction: row; justify-content: flex-end; }
#painelContato .status{ color: #2F6C9F; font-size: 1rem; }
#painelContato #btnSubmit{ background-color: #2F6C9F; color: #FFF; border: none; padding: 3px 10px; font-size: 1rem; border-radius: 5px; cursor: pointer; height: 40px; }
#painelContato .status img{ width: 40px; height: 40px; }
#painelContato .content .instagram img{ width: 30px; margin-right: 15px; }
#painelContato .realizacao .instagram{ margin-bottom: 10px; }

#painelApoiadores p{ text-align: center; }
#painelApoiadores .lista{ padding: 30px 0; }
#painelApoiadores .lista .logo{ margin: 10px; min-height: 100px; display: flex; align-items: center; align-content: center; justify-content: center; }
#painelApoiadores .lista .logo img{ max-height: 60px; max-width: 200px; height: auto; width: auto; object-fit: contain; }
#painelApoiadores .lista .logo.empty{ background-color: #F4F5F1; }
#painelApoiadores .ver-mais-wrapper{ text-align: center; width: 100%; padding-top: 50px; }
#painelApoiadores .ver-mais-wrapper #verMaisBtn{ background-color: #2F6C9F; padding: 10px; border-radius: 5px; color:#FFF; cursor: pointer;}
#painelApoiadores #modalCompanies .close{ position: absolute; right: 20px; font-size: 14px; font-weight: bold; cursor: pointer; color:#1779ba; }
#painelApoiadores #modalCompanies p.text{ padding: 10px 80px; line-height: 1.3;}
#painelApoiadores #modalCompanies .companies-list .cabecalho{ font-weight: bold; margin: 30px 0; }
#painelApoiadores #modalCompanies .companies-list .linha{ margin-bottom: 5px; padding-bottom: 5px; border-bottom: dotted 1px #CCC;}
#painelApoiadores #modalCompanies .companies-list .linha.nome a{ color: #464646; }
#painelApoiadores #modalCompanies .companies-list .adesao{ text-align: center; }

#painelParticipe{ text-align: center; }
#painelParticipe h3{ font-weight: bold; color: #2F6C9F; }
#painelParticipe .ico{ width: 100px; height: 100px; background: linear-gradient(135deg, #2F6C9F, #1e4b72); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; margin: 30px auto 20px; }
#painelParticipe .ico.share{ -webkit-mask-image: url('../img/ico-share2.svg'); mask-image: url('../img/ico-share2.svg'); }
#painelParticipe .ico.sing{ -webkit-mask-image: url('../img/ico-sing.svg'); mask-image: url('../img/ico-sing.svg'); }
#painelParticipe .ico.work{ -webkit-mask-image: url('../img/ico-work.svg'); mask-image: url('../img/ico-work.svg'); }
#painelParticipe .bloco{ color: #2F6C9F; margin-bottom: 30px; }
#painelParticipe .bloco p{ font-size: 1rem; }
#painelParticipe p a{ text-decoration: underline; }
#painelParticipe p a:hover{ text-decoration: none; }

#painelMakingof p{ text-align: center; }
#painelMakingof .video-makingof{ width: 60%; aspect-ratio: 16 / 9; background: #F4F5F1; margin: 0 auto; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3)); display: flex; justify-content: center; align-items: center; }

#bgblock{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: none; }

.modalBox {position: fixed; top: 50%; left: 50%; width: 80vw; max-height: 80vh; transform: translate(-50%, -50%); background-color: #FFF; border-radius: 20px; z-index: 10000; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 30px; display: none; overflow: hidden;}
.modalBox .companies-list {overflow-y: auto; height: calc(100% - 220px); padding-right: 10px;}
.modalBox .close {position: absolute; right: 20px; top: 20px; font-size: 14px; font-weight: bold; cursor: pointer; color: #1779ba;}
.modalBox .close span.x{ display: none; }
.modalBox h2{ font-size: 2rem; text-transform: uppercase; font-weight: 300; color: #939393; font-family: 'Titillium Web', sans-serif; text-align: center; }
.modalBox .modal-content {overflow-y: auto; max-height: calc(70vh - 80px); padding-right: 10px; line-height: 1.5}

.modalBox .modal-content .list-icons {list-style: none; padding-left: 0;}
.modalBox .modal-content .list-icons li {position: relative; padding-left: 35px; margin-bottom: 10px;}
.modalBox .modal-content .list-icons li::before {content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: linear-gradient(135deg, #2F6C9F, #1e4b72); -webkit-mask-image: url('../img/ico-work.svg'); mask-image: url('../img/ico-work.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;}
#modalDivulgue.modalBox .modal-content .list-icons li::before{ -webkit-mask-image: url('../img/ico-share2.svg'); mask-image: url('../img/ico-share2.svg'); }
#modalCante.modalBox .modal-content .list-icons li::before{ -webkit-mask-image: url('../img/ico-sing.svg'); mask-image: url('../img/ico-sing.svg'); }
.modalBox .modal-content .todo-list p{ text-align: center; font-weight: bold; margin-bottom: 20px; }
.modalBox .spacer { width: 65px; height: 3px; margin: auto; margin-bottom: 30px; margin-top: 10px; background: #2F6C9F; }

#painelCarrossel {position: relative; overflow: hidden; padding: 20px 80px; }
#painelCarrossel #items {display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px;}
#painelCarrossel #items .item {flex: 0 0 auto; scroll-snap-align: start; margin: 0 5px;}
#painelCarrossel .carousel-prev, #painelCarrossel .carousel-next {position: absolute; top: 50%; transform: translateY(-50%); z-index: 1000; background: #fff; border: 1px solid #ccc; width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; line-height: 40px; text-align: center; cursor: pointer; color: #333; box-shadow: 0 2px 5px rgba(0,0,0,0.1);} 
#painelCarrossel .carousel-prev {left: 10px;} 
#painelCarrossel .carousel-next {right: 10px;}

#instagram-cta{ margin-top: 30px; }
#instagram-cta .image img{ height: 500px; }
#instagram-cta .text,
#instagram-cta .image { display: flex; justify-content: center; align-items: center; height: 500px; text-align: center; }
#instagram-cta .text img{ height: 30px; margin-right: 10px; }
#instagram-cta .text { flex-direction: column; }

#selos { padding-top: 10px; box-shadow: inset 0 20px 20px -10px rgba(0, 0, 0, 0.25); }
#selos .selos{ padding-top: 30px; text-align: center; }
#selos .selos .cell{ margin-bottom: 20px; padding:  }
#selos .selos img{ height: 100px; }
#selos .selos div{ padding: 10px; }
#selos .selos div.dark{ background-color: rgba(0,0,0,0.8); border-radius: 5px; background-image: url("../img/cena-home.jpg") }
#selos span{ font-size: 14px; color: #2F6C9F }

/* RESPONSIVO */

@media only screen and (max-width: 780px){
	#painelCarrossel { padding: 20px 34px; }
	#painelCampanha{ padding-top: calc((90% * (2 / 3) * 0.6) - 30px); }
	#painelCampanha .videoclipe, #painelMakingof .video-makingof{ width: 90%; }
	.menu.desktop{ display: none; }
	.top .menu.mobile{ display: block; }
	.top .subtitle{ display: none; }
	.top .logo{ padding-left: 10px; }
	.top .logo img{ height: auto; }
	.top .instagram{ display: none; }
	#painelPrincipios .principio .ico{ background: linear-gradient(to bottom, #FFF 50%, #F4F5F1 50%); }
	.overlay-text{ left: 15%; transform: translate(-10%, -50%); }
	#painelApoiadores .lista .logo img{ max-width: 100%; }
	#painelApoiadores .companies-list .website{ display: none; }
	#painelApoiadores #modalCompanies p.text{ padding: 30px 10px; }
	#painelApoiadores #modalCompanies .companies-list .linha{ font-size: medium; }
	#painelApoiadores #modalCompanies .companies-list .linha.nome{ font-weight: bold; }
	#painelApoiadores #modalCompanies .companies-list .linha.nome a{ color:#1779ba; }
	.modalBox h2{ font-size: 1.5rem}
	.modalBox .close{ right: 10px; top: 10px; }
	.modalBox .close span.x{ display: block; }
	.modalBox .close span.text{ display: none; }
	#modalEngaje iframe,#modalDivulgue iframe,#modalCante iframe,#modalAdesao iframe{ min-width: auto !important; }
	.parallax-cena-home { background-image: url('../img/cena-home-mobile.jpg'); }
	.parallax-cena-jardim { background-image: url('../img/cena-jardim-mobile.jpg'); }
	.parallax-cena-correndo { background-image: url('../img/cena-correndo-mobile.jpg'); }
	.parallax-cena-acidente { background-image: url('../img/cena-acidente-mobile.jpg'); }
	.parallax-cena-balanco { background-image: url('../img/cena-balanco-mobile.jpg'); }
	.parallax-cena-estrelas { background-image: url('../img/cena-estrelas-mobile.jpg'); }
}