@font-face {
font-family: 'Galano Grotesque Regular';
font-style: normal;
font-weight: normal;
src: local('Galano Grotesque Regular'), url('../fonts/GalanoGrotesqueRegular.woff') format('woff');
}
@font-face {
font-family: 'Galano Grotesque ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Galano Grotesque ExtraLight'), url('../fonts/GalanoGrotesqueExtraLight.woff') format('woff');
}
@font-face {
font-family: 'Galano Grotesque Bold';
font-style: normal;
font-weight: normal;
src: local('Galano Grotesque Bold'), url('../fonts/GalanoGrotesqueBold.woff') format('woff');
}

::selection{background: #0f0e13; color: #fff;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,hr,th,td {margin:0; padding:0;}
h1, h2, h3,h4,h5,h6 {font-weight: normal; font-family: 'Galano Grotesque ExtraLight';}
small {font-size:12px;}
html {-webkit-font-smoothing: antialiased;}
html {font-size: 100%;}
strong, b {font-weight: normal; font-family: 'Galano Grotesque Bold';}
* {font-family: 'Galano Grotesque Regular'; font-weight: normal;}
body {color: #0f0e13; background: #FFFFFF; font-size: 14px; font-weight: normal; overflow-x:hidden;}
.clear {width: 100%; clear: both; display: block; height: 0px;}
a, input, button {transition:all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; text-decoration:none; cursor:pointer; outline:none;}
p {line-height: 24px; font-size: 14px;}
.container{width: 76%;position: relative;margin: 0px auto; }
.leftColumn {float: left; width: 50%;}
.rightColumn {float: right; width: 50%;}
.container::after {content:" ";clear:both; width: 100%; display: block;}

input#control-nav {visibility: hidden;position: absolute;left: -9999px;opacity: 0;}
header{background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); width: 100%; position: fixed; z-index:9998; padding:60px 0px; transition:all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
header .logo {width: 50%; left: 0%; position: relative; float: left;}
header .logo img {filter:brightness(0) invert(1); height: 32px; transition:all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
header h1.frase {float: right; font-size: 14px; text-transform: uppercase; color: #FFFFFF; font-family: 'Galano Grotesque Regular'; line-height: 32px; opacity: 0; transition:all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; cursor:pointer;}
header h1.frase hr {width: 0px; height:1px; background:#FFFFFF; border:none; margin-top:10px; transition:all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
header h1.frase:hover hr {width: 30px;}
header.active {padding: 48px 0px;}
header.active .logo img {height: 26px;}
header.active h1.frase {line-height: 26px; opacity: 1;}

footer {width: 100%; line-height: 28px; padding: 0px 0px 60px 0px; color: #FFFFFF; position: relative; background: url('../img/banner-franquias.jpg') no-repeat center center; background-color: #333333; background-blend-mode: multiply; background-size: cover; background-attachment: fixed;}
footer .column {width: 33%; float: left; text-align: center;}
footer .column p {font-size: 14px;}
footer .column p a {color: #FFFFFF;}
footer .column p a:hover {color: #878788;}
footer .column img {filter:brightness(0) invert(1); height: 32px;}
footer ul {list-style: none; margin: 0px;}
footer ul li {display: inline-block; margin: 0px 10px 0px 10px; text-align:center;}
footer ul li.divider {margin:0px 20px; color: #FFFFFF;}
footer ul li a {color: #FFFFFF; display: inline-block; line-height: 32px; font-size: 16px; padding:0px 0px; position: relative;}
footer ul li a:hover {color: #878788;}

#banner {width: 100%; min-height:450px; box-sizing:border-box; position: relative; background: no-repeat center center; background-size: cover; /*background-attachment: fixed;*/ padding-top:15px;padding-left:85px;}
#banner .container {height: 100%;}
#banner i {color: #FFFFFF; position: absolute; opacity: .25; left: 60px; bottom: 60px; font-size: 24px;}
#banner i + i {left: 100px;}
#banner .title {color: #FFFFFF; display: flex; align-items:flex-start; height: 100%; flex-direction: column; justify-content: center; text-align: left;}
#banner .title h1 {text-transform: uppercase; font-size: 48px; border: 1px solid #FFFFFF; border-left:none; padding: 30px 50px 30px 0px; position: relative;  text-shadow:1px 1px 2px #999;}
#banner .title h1::before {content:""; border: 1px solid #FFFFFF; border-right:none; border-left:none; position: absolute; left:-12vw; top:-1px; width: 12vw; height: 100%;}
#banner .title h2 {font-family: 'Galano Grotesque Regular'; font-size: 22px; text-align: left; margin-top: 40px;}

.inscreva {position: fixed; z-index:9998; background: #33bc49; border:1px solid #33bc49; color: #FFFFFF; bottom: 40px; right:40px; padding: 15px 15px; border-radius: 32px; font-weight: normal; line-height:32px; width:32px; text-align:center; font-size: 32px; letter-spacing: 0px; text-transform: uppercase; transition:all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
.inscreva:hover {background: #878788; border:1px solid #878788; color: #FFFFFF;}

.swiper-button-prev2{left: -60px; top:50%; font-size:36px; color:#FFFFFF; position: absolute; z-index: 5; cursor: pointer; transition:all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
.swiper-button-next2{right: -60px; top:50%; font-size:36px; color:#FFFFFF; position: absolute; z-index: 5; cursor: pointer; transition:all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
.swiper-button-next2:hover {transform:scale(1.02); color:#434e72;}

h2.title {font-size: 48px; line-height: 48px; margin-bottom: 60px; color: #878788; text-transform: uppercase;}
h3.title {font-size: 48px; line-height: 48px; margin-bottom: 60px; letter-spacing: 10px; color: #878788; text-transform: uppercase;}
h4.title {font-size: 26px; line-height: 36px; margin-bottom: 0px; letter-spacing: 4px; color: #FFFFFF; text-transform: uppercase;}
h5.title {font-size: 22px; line-height: 36px; margin-bottom: 20px;}
h6.title {font-size: 32px; line-height: 36px; margin-bottom: 40px; text-align: center; text-transform:uppercase;}
p.text {color: #a8a8a8; font-size:18px; line-height: 24px;}
footer .pixel {height:36px;}
button.botao {color: #878788; font-size:16px; border:1px solid #878788; background: #FFFFFF; line-height: 20px; padding: 15px 40px; font-family: 'Galano Grotesque Bold'; text-transform:uppercase; margin-top: 15px;}
button.botao:hover {background:#151419; border:1px solid #878788; color: #FFFFFF; cursor: pointer;}
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;}

#depoimentos {background: #FFFFFF; position: relative; padding: 120px 0px 0px 0px;}
#depoimentos .titulo {width: 35%; float: left; text-align:right; height: 360px; display: flex;}
#depoimentos .titulo h4 {display: grid; align-items:center; width: 100%; color: #878788;}
#depoimentos .box {width: 60%; height: 400px; background: #000000; margin: 0px auto; float: right; position: relative;}
#depoimentos .box .botao {margin-top: 20px; position: relative; z-index: 5;}

/*#historia::before {content:""; border: 1px solid rgba(0,0,0,0.4); border-bottom:none; position: absolute; left:16%; top:-50px; width: 68%; height: 50px; pointer-events: none;}
#historia::after {content:""; border: 1px solid rgba(0,0,0,0.4); border-top:none; position: absolute; left:16%; top:0px; width: 68%; height: 200px;}*/
#historia {background: linear-gradient(to bottom, #FFFFFF 50%, #c8c8c8 50%); padding: 80px 0px 40px 0px; text-align: center; position: relative;}
#historia .images {width: 94%; margin: 80px auto;}
#historia h2 {margin-bottom:120px;}
#historia h3 {font-size:32px; letter-spacing: 3px;}
#historia .images img {width: 46%; margin: 0px 2% 0px 2%; float: left;}
#historia .images img + img {margin-top: 0px;}
#historia .items {width: 100%; margin:0px auto; text-align: center;}
#historia .item {display: inline-block; width: 24%; box-sizing:border-box; padding: 0px 3%; vertical-align: top; margin-bottom: 50px; text-align: center; min-height: 206px;}
/*#historia .item + .item {border-left: 1px solid rgba(0,0,0,0.1);}*/
#historia .item img {width: 64px; margin-bottom: 30px;}
#historia .item p {line-height: 18px;}
#historia .item p strong {font-size:16px; line-height: 16px; margin-bottom: 0px; display:block; text-transform: uppercase;}
#historia .text p{
    font-size: 16px;
    line-height: 36px;
}

#investimento::before {content:""; background: #565656; position: absolute; left:25%; top:-50px; width: 50%; height: 130px;}
#investimento {padding: 0px 0px 60px 0px; text-align: center; position: relative;}
#investimento h6.title {color: #FFFFFF; width: 50%; margin: 0px auto 100px auto;}
#investimento .items {width: 100%; margin:0px auto; text-align: center;}
#investimento .item {display: inline-block; width: 24%; box-sizing:border-box; padding: 0px 3%; vertical-align: top; text-align: center; min-height: 206px;}
/*#investimento .item + .item {border-left: 1px solid rgba(0,0,0,0.1);}*/
#investimento .item img {width: 56px; margin-bottom: 30px;}
#investimento .item p {line-height: 32px; font-size:13px;}
#investimento .item p strong {font-size:24px; line-height: 20px; margin-bottom: 0px; display:block; letter-spacing: -1px; font-family: 'Galano Grotesque ExtraLight';}
#investimento .item p small {font-family: 'Galano Grotesque Bold'; font-size:12px; line-height: 16px; margin-bottom: 0px; display:block; color: #0e0e13; text-transform: uppercase;}

#vantagens {padding: 100px 0px 70px 0px; background: #f5f5f5; text-align: center; position: relative;}
#vantagens .item {display: block; width: 100%; margin-bottom: 20px;}
#vantagens .item .box {width: 40%; height: auto; display: inline-block; vertical-align: middle;}
#vantagens .item .dep {width: 50%; display: inline-block; vertical-align: middle; margin-left: 8%; position: relative; font-size: 16px; text-align: left; box-sizing:border-box; padding: 30px 5%; line-height: 36px;}
#vantagens .item .dep .dep-text{display: inline-block; vertical-align: middle; margin-left: 0; position: relative; font-size: 16px; text-align: left; box-sizing: border-box; line-height: 36px; }
#vantagens .item .dep .dep-text p{ display: inline-block;vertical-align: middle;margin-left: 0;position: relative;font-size: 16px;text-align: left;box-sizing: border-box;line-height: 32px;direction: ltr;}
#vantagens .item .dep i {position: absolute; opacity: .1; left: 0px; top: 0%; font-size: 72px;}
#vantagens .item .dep strong {font-size:20px; font-family: 'Galano Grotesque ExtraLight'; display: block; text-transform: uppercase; margin-top: 20px;}
#vantagens .item:nth-child(even) {direction: rtl;}
#vantagens .item:nth-child(odd) {direction: ltr;}
#vantagens .botao {margin-top: 40px;}

#sede {background: no-repeat center center; background-color:#999999; background-blend-mode:multiply; background-size:cover; width: 100%; background-attachment:fixed; padding:25% 0px; position: relative; z-index:1;}
#sede .box {z-index:1; position: absolute; border: 1px solid #FFFFFF; border-bottom:none; color: #FFFFFF; left: 50%; box-sizing: border-box; font-size: 28px; padding: 80px; text-align: left; line-height: 48px; text-align: center; bottom:0px; transform:translateX(-50%); width: 50%;}
#sede::before {content:""; border: 1px solid rgba(0,0,0,0.4); border-top:none; position: absolute; left: 50%; bottom:-50px; height: 50px; transform:translateX(-50%); width: 50%;}

#franquias {padding: 120px 0px; background: #f5f5f5; text-align: center; position: relative;}
#franquias::before {content: ""; background: #464646; position: absolute; left: 0px; top: 240px; height: 240px; width: 100%;}
#franquias .list {width: 100%; margin:0px auto; overflow: hidden;}
#franquias .item {width: 100%; height: auto; position: relative; display: block;}
#franquias .item .info {width: 100%; padding: 0px 0px 0px 0px; text-align: left;}
#franquias .item .info img {width:100%; height:320px; object-fit:cover;}
#franquias .item .info h3 {font-size: 18px; line-height: 24px; margin: 15px 0px 0px 0px; font-family: 'Galano Grotesque Regular';}
#franquias .item .info p {line-height: 20px; font-size: 13px;}

#imagem {background: no-repeat center center; background-size:cover; width: 100%; background-attachment:fixed; height:auto;}

#sustentabilidade {width: 100%; height:100vh; position: relative; background: #1e1e1e;}
#sustentabilidade .trees {width: 50%; height:calc(100% + 60px); position: absolute; right: 0px; top:-60px; z-index: 0;}
#sustentabilidade .trees .imgTree {background: no-repeat center center; background-size:cover; width: 100%; height: 100%; }
#sustentabilidade .box {z-index:1; position: absolute; border: 1px solid rgba(255,255,255,.5); border-left:0px; color: #FFFFFF; right: 45%; top: 20%; height:60%; box-sizing: border-box; font-family: 'Galano Grotesque ExtraLight'; font-size: 58px; padding: 5% 10% 5% 5%; text-align: right; line-height: 58px; text-transform: uppercase;}
#sustentabilidade .box div {font-family: 'Galano Grotesque ExtraLight';}
#sustentabilidade .box p {font-size: 20px; line-height: 32px; text-transform: initial; margin-top: 30px; font-family: 'Galano Grotesque ExtraLight'; width: 80%; margin-left: 20%; margin-bottom: 30px;}
#sustentabilidade .box a {text-transform: uppercase; color:#181818; background:#FFFFFF; font-size:18px; padding: 5px 25px; border:1px solid #FFFFFF; margin-bottom: 20px; display: inline-block;}
#sustentabilidade .box a:hover {background:#181818; color:#FFFFFF;}

#diferenciais {width: 100%; height:100%; min-height: 870px; position: relative; background: #1e1e1e;}
#diferenciais .trees {width: 50%; height:calc(100% + 60px); position: absolute; left: 0px; top:-60px; z-index: 0;}
#diferenciais .trees .imgTree {background: no-repeat center center; background-size:cover; width: 100%; height: 100%; }
#diferenciais .box {z-index:1; position: absolute; border: 1px solid rgba(255,255,255,.5); border-right:0px; color: #FFFFFF; left: 45%; top: 3%; box-sizing: border-box; font-family: 'Galano Grotesque ExtraLight'; font-size: 48px; padding: 5% 2% 0% 5%; text-align: left; line-height: 58px; text-transform: uppercase;}
#diferenciais .box > div {font-family: 'Galano Grotesque ExtraLight';
    padding-left: 5%;}
#diferenciais .box .description p{margin-bottom: 10px;}
#diferenciais .box .description {font-size: 20px; line-height: 32px; text-transform: initial; margin-top: 30px; font-family: 'Galano Grotesque ExtraLight'; 
    width: 95%;
    margin-bottom: 30px;}
#diferenciais .box a {text-transform: uppercase; color:#181818; background:#FFFFFF; font-size:18px; padding: 5px 25px; border:1px solid #FFFFFF; margin-bottom: 20px; display: inline-block;}
#diferenciais .box a:hover {background:#181818; color:#FFFFFF;}

#horaCerta {background: #F5F5F5; position: relative; padding:40px 0px 80px 40px;}
#horaCerta::before {content:""; width: 100%; height: 300px; position: absolute; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8)); top: -300px; left: 0px;}
#horaCerta .box {padding: 60px 60px 60px 60px; box-sizing:border-box; width: 80%; position: relative; margin: 0px auto;}
#horaCerta .box .titulo {color: #1e1e1e; text-align: right; display: inline-block; width: 38%; vertical-align: middle; font-size: 48px; line-height: 48px; font-family: 'Galano Grotesque ExtraLight';}
#horaCerta .box .content {text-align: left; display: inline-block; width: 48%; margin-left:12%; vertical-align: middle;}
#horaCerta .box .content hr {width: 40px; height:1px; background:#878788; margin:25px 0px; border:none;}
#horaCerta .box button {width: 100%; position: absolute; bottom: 0px; left: 0px;}

#formulario {background: url('../img/banner-franquias.jpg') no-repeat center center; background-color: #333333; background-blend-mode:multiply; background-size: cover; background-attachment: fixed; width: 100%; position: relative; box-sizing:border-box; text-align: center;}
#formulario .box {background-color: #FFFFFF; width: 60%; margin: 0px auto; text-align:left; padding:60px; position: relative; box-sizing:border-box; text-align: center; top: -80px;}
#formulario h2 {font-size: 32px; font-family: 'Galano Grotesque ExtraLight'; letter-spacing: -1px;}
#formulario .container {width: 46%; margin: 0px 0px 0px 16%;}
#formulario .imagem {width: 26%; position: absolute; top: 0px; right: 0px; height: 100%; background: url('../img/representantes.png') no-repeat center center; background-size:cover;}
#formulario p {font-size:16px;}
#formulario p a {text-decoration: underline; color:#666666;}
#formulario p a:hover {text-decoration: none;}
#formulario form {margin-top: 30px; text-align: left;}
#formulario form div {position: relative; margin-bottom: 5px;}
#formulario form div label {font-size:13px; margin-bottom: 5px; display:block;}
#formulario .campo {width: 50%; float: left;}
#formulario .campo + .campo{width: 45%; margin-left: 5%; float: right;}
/* #formulario input {width: 100%; background: #f5f5f5; border: none; font-size:13px; line-height: 30px; padding: 10px 12px; box-sizing:border-box; outline:none; letter-spacing: -.5px;}
#formulario select {width: 100%; background: #f5f5f5; border: none; font-size:13px; line-height: 30px; padding: 15px 12px; box-sizing:border-box; outline:none; letter-spacing: -.5px;}
#formulario input[type="radio"] {text-align: left; display: inline-block; width: 5%; vertical-align: middle;}
#formulario input[type="radio"] + p {text-align: left; display: inline-block; font-size: 11px; width: 85%; vertical-align: middle; line-height: 11px;}
#formulario input::placeholder {color: rgba(0,0,0,.5);} */
#formulario button {background: #FFFFFF; font-size:18px; border:1px solid #151419; color: #151419; line-height: 20px; text-transform:uppercase; width: 100%; margin-top: 15px;}
#formulario button:hover {background:#151419; color: #FFFFFF; cursor: pointer;}