body {overflow-x:hidden;}

.container{width: 100%;position: relative;margin: 0px auto; box-sizing:border-box; padding: 0px 5%;}
header {padding: 0px 0px; top: 0px;}
header.active {padding:0px 0px;}
header .container {padding: 40px 5%;}
header .logo {width:100%;}
header .logo img {max-height: 40px; max-width: 50%;}

h2.title {font-size: 20px; line-height: 24px;}
h3.title {font-size: 20px; line-height: 24px; letter-spacing: 4px; margin-bottom: 40px;}
h4.title {font-size: 16px; line-height: 20px; letter-spacing: 4px;}
h5.title {font-size: 18px; line-height: 24px; margin-bottom: 10px;}
h6.title {font-size: 18px; line-height: 24px;}
p.text {font-size:14px; line-height: 20px;}
button.botao-transparente {color: #FFF; font-size:16px; border:2px solid #878788; background: transparent; line-height: 20px; padding: 15px 40px; font-family: 'Galano Grotesque Bold'; text-transform:uppercase; margin-top: 15px;}
button.botao-transparente:hover {background:#000; border:2px solid #878788; color: #FFF; cursor: pointer;}
button.botao-investimento {color: #000; font-size:16px; border:2px solid #878788; background: transparent; line-height: 20px; padding: 15px 40px; font-family: 'Galano Grotesque Bold'; text-transform:uppercase; margin-top: 15px;}
button.botao-investimento:hover {background:#000; border:2px solid #878788; color: #FFF; cursor: pointer;}
button.botao-diferenciais {color: #000; font-size:16px; border:2px solid #878788; background: #FFF; line-height: 20px; padding: 15px 40px; font-family: 'Galano Grotesque Bold'; text-transform:uppercase; margin-top: 15px;}
button.botao-diferenciais:hover {background:#FFF; border:2px solid #878788; color: #000; cursor: pointer;}


#banner {height: 72vh; background-attachment: initial;}
#banner .title h1 {font-size: 32px;}
#banner .title h2 {font-size: 20px;}

#depoimentos {background:linear-gradient(to bottom, #878788 50%, #FFFFFF 50%); padding: 60px 0px 20px 0px;}
#depoimentos .titulo {float: none; width: 100%; display: block; height: auto; text-align: left;}
#depoimentos .box {width: 100%; height: auto; float: none; margin-top: 30px; background: transparent;}
#depoimentos .box .botao {font-size: 14px; width: 100%;}

#historia {padding: 20px 0px 40px 0px; background: linear-gradient(to bottom, #FFFFFF 30%, #c8c8c8 70%);}
#historia .images {width: 100%; margin: 40px auto;}
#historia .images img {margin: 0px 2% 0px 0px; width: 48%;}
#historia .item img {margin-bottom: 15px;}
#historia .images img + img {margin: 0px 0px 0px 2%;}
#historia p.text {font-size: 18px;}
#historia::before {display: none;}
#historia::after {display: none;}
#historia h2 {margin-bottom: 20px;}
#historia h3 {margin: 0px 15%; font-size: 20px; letter-spacing:3px;}
#historia .item {display: block; width: 100%; min-height: auto; margin: 30px 0px;}
#historia .item p strong {font-size: 20px; line-height: 24px;}

.swiper-button-prev2{display: none;}
.swiper-button-next2{display: none;}

#vantagens {padding: 40px 0px 40px 0px;}
#vantagens .item .box {width: 100%; height: 200px; display: block;}
#vantagens .item p {width: 100%; display: block; margin-left: 0px; font-size: 14px; line-height: 24px;}
#vantagens .item:nth-child(even) {direction: ltr;}
#vantagens .item:nth-child(odd) {direction: ltr;}
#vantagens .item p strong {margin-top: 10px;}
#vantagens .item p i {font-size: 48px; left: 6px; top: 6%;}
#vantagens .botao {margin-top: 0px; width: 100%;}
#vantagens .item .dep {width: 100%; margin-left: 0%;}
#vantagens .item .dep i {font-size: 56px; top: 16px;}
#vantagens .item .dep .dep-text p {line-height: 28px;}

#investimento::before {left: 10%;width: 80%; height: 80px; top: -30px;}
#investimento h6.title {margin: 0px auto 60px auto;}
#investimento .item {width: 100%; min-height: auto; display: block; margin-bottom: 30px;}
#investimento .item p small {font-size: 18px; line-height: 20px;}
#investimento .item img {margin-bottom: 10px;}
#investimento {padding: 0px 0px 20px 0px;}

#sede {height: 50vh;}
#sede .box {width: 90%; left: 5%; transform:none; padding: 30px; font-size: 20px; line-height: 28px;}
#sede::before {width: 90%; left: 5%; transform:none; height: 20px; bottom: -20px;}

#franquias {padding: 60px 0px;}
#franquias::before {top: 150px; height: 180px;}
#franquias .item .info img {height: 240px;}

#sustentabilidade {height: auto; padding: 60px 0px;}
#sustentabilidade .trees {width: 10%; height:calc(100% + 30px); top:-30px;}
#sustentabilidade .box {position: relative; right: auto; top: auto; height: auto; border: none; width: 80%; text-align: right; padding: 0px 0px 0px 0px; line-height: 32px;}
#sustentabilidade .box div {font-size: 36px;}
#sustentabilidade .box p {font-size: 16px; line-height: 24px;}

#diferenciais {height: auto; padding: 60px 0px; min-height: auto;}
#diferenciais .trees {width: 10%; height:calc(100% + 30px); top:-30px;}
#diferenciais .box {position: relative; right: auto; left: 15%; top: auto; height: auto; border: none; width: 80%; text-align: left; padding: 0px 0px 0px 0px; line-height: 32px;}
#diferenciais .box div {font-size: 36px;}
#diferenciais .box p {font-size: 16px; line-height: 24px;}

#imagem {height: 40vh; background-attachment: initial; position: relative;}
#imagem .gallery-slick, #imagem .slick-list {height: 100%;}
#imagem .gallery-slick img {height: 40vh !important;}

#horaCerta {padding: 40px 5%;}
#horaCerta::before {height: 10vh; top: -10vh;}
#horaCerta .box {width: 100%; padding: 0px 0px 0px 0px;}
#horaCerta .box .titulo {width: 100%; display: block; text-align: left; font-size: 32px; line-height: 32px;}
#horaCerta .box .content {width: 100%; display: block; text-align: left; margin-left: 0px; margin-top: 20px;}

#formulario {padding-top: 25px;}
#formulario .box {width: 86%; top: 0px; padding: 30px;}
#formulario .campo {width: 100%; float: none;}
#formulario .campo + .campo{width: 100%; margin-left: 0%; float: none;}

footer {padding: 60px 0px 60px 0px;}
footer .column {width: 100%; float: none; display: block; margin-bottom: 20px; text-align: center;}