/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html { font-size: 1em; line-height: 1.4; font-family: 'poppinsregular'; }

body { background-color: #fff; }
* { box-sizing: border-box; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset { border: 0; margin: 0; padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea { resize: vertical; }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #000; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #000; }
:-o-input-placeholder { /* Internet Explorer 10-11 */
color: #000; }
:-moz-input-placeholder { /* Internet Explorer 10-11 */
color: #000; }
::-ms-input-placeholder { /* Microsoft Edge */
color: #000; }
@font-face { font-family: 'poppinsblack'; src: url('fonts/poppins-black-webfont.woff2') format('woff2'), url('fonts/poppins-black-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'poppinsbold'; src: url('fonts/poppins-bold-webfont.woff2') format('woff2'), url('fonts/poppins-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'poppinsregular'; src: url('fonts/poppins-regular-webfont.woff2') format('woff2'), url('fonts/poppins-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'poppinssemibold'; src: url('fonts/poppins-semibold-webfont.woff2') format('woff2'), url('fonts/poppins-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'poppinslight'; src: url('fonts/poppins-light-webfont.woff2') format('woff2'), url('fonts/poppins-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

/*ancoras*/
.ancora { width: 2px; height: 1px; position: absolute; left: 50%; margin-left: -1px; }
.a-inicio { top: 0px; }
.a-beneficios { top: -50px !important; }
.a-faca-parte { top: -150px !important; }
.a-atrativos { top: -62px !important; }
.a-cultura { top: -65px !important; }
.a-roadmap { top: -20px !important; }
.desktop { display: block; }
.mobile { display: none; }
.opacidade { opacity: 0; }
#mascara { width: 100%; height: 0%; position: fixed; top: 0px; left: 0px; z-index: 1000; background-color: #f5f5f5; opacity: 0; }
#cta-fixo-ecologica { width: 250px; height: auto; position: fixed; padding: 18px 100px 12px 20px; bottom: -330px; /* começa fora da tela */ right: 30px; background-color: #ff8282 !important; font-size: 16px; color: #fff; font-family: 'poppinssemibold'; border-radius: 16px; overflow: hidden; z-index: 999; opacity: 0; /* começa invisível */  /* animação */
-webkit-animation: sobe-cta 1s cubic-bezier(.25, .8, .25, 1) forwards; -webkit-animation-delay: 4s; animation: sobe-cta 1s cubic-bezier(.25, .8, .25, 1) forwards; animation-delay: 3s; }
@-webkit-keyframes sobe-cta {
  0% { bottom: -330px; opacity: 0; }
  60% { bottom: 50px; opacity: 1; }

  /* passa um pouquinho do ponto */
  100% { bottom: 30px; opacity: 1; }

/* volta suavemente */ }
@keyframes sobe-cta {
  0% { bottom: -330px; opacity: 0; }
  60% { bottom: 50px; opacity: 1; }
  100% { bottom: 30px; opacity: 1; }
}
#gif-cta-ecologica { width: 100px; height: 75px; position: absolute; right: 0px; top: 0px; background: url(img/gif-mambai.gif); background-size: 100px; cursor: pointer; }
#cta-fixo-ecologica:hover { background-color: #FF6969 !important; color: #fff; }
#aviso-bora-pra-mambai { width: 520px; height: 290px; position: fixed; left: 50%; top: 250%; margin-top: -145px; margin-left: -260px; background-color: #fff; border: 1px solid #dadada; z-index: 99999 !important; border-radius: 20px; overflow: hidden; }
#marcador-load { width: 0%; height: 10px; position: absolute; bottom: 0px; bottom: 0px; background-color: #60AE91; border-radius: 20px; }
#faixa-gif-logo { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
#gif-logo-bora-pra-mambai { width: 250px; height: 125px; position: relative; margin: auto; background: url('img/gif-logo-bora-pra-mambai.gif'); background-size: 250px; background-repeat: no-repeat;}
#faixa-txt-aviso-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; color: #000; font-size: 16px; text-align: center; padding: 0px 30px; }
#faixa-ctas-janela-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 20px; }
.item-cta-bora-prambai { width: 47%; height: auto; position: relative; float: left; margin-left: 5px; margin-right: 5px; padding: 10px 20px; background-color: #006F4B; color: #fff; font-size: 14px; text-align: center; border-radius: 30px; }
.item-cta-bora-prambai:hover { background-color: #005C3E; }
.bg-cta-voltar { background-color: #FF6163; }
.bg-cta-voltar:hover { background-color: #FF4446; }

/* ==========================================================================
 Bora começar a Landingpage aqui!
 ========================================================================== */
#menu-fixo {
    width: 1000px;
    height: 70px;
    position: fixed;
    top: 30px;
    left: 50%;
    margin-left: -500px;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 50px;
    z-index: 999;

}
.logo-bora-pra-mambai-menu-fixo { width: 109px; height: 53px; position: relative; float: left; margin-left: 20px; top: 12px; background: url(img/logo-bora-pra-mambai.png); background-size: 109px; background-repeat: no-repeat; }
#container-itens-menu-fixo { width: 645px; height: 70px; position: relative; float: left; margin-left: 30px; }
#container-itens-menu-fixo ul li {
    width: auto;
    height: auto;
    position: relative;
    float: left;
    margin-right: 30px;
    margin-top: 8px;
    font-size: 17px;
    color: rgb(0, 0, 0);
    z-index: 2;
    cursor: pointer;

}
#container-itens-menu-fixo ul li:hover { color: #006F4B; }
#cta-faz-parte {
    width: auto;
    height: auto;
    position: relative;
    float: right;
    margin-right: 26px;
    margin-top: 12px;
    padding: 12px 40px 7px 20px;
    color: #fff;
    font-size: 17px;
    border-radius: 150px !important;
    cursor: pointer;
    background-color: #006F4B;

}
#arrow-menu-fixo { width: 40px; height: 40px; position: absolute; right: 4px; top: 3px; background: url('img/arrow-menu-fixo.png'); background-size: 40px; /* Transição suave na rotação */ -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
#cta-faz-parte:hover { background-color: #039061; }

/* quando passar o mouse no botão */
#cta-faz-parte:hover #arrow-menu-fixo { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); }
.atv-menu-fixo { color: #006F4B !important; }
#marcador-atv-menu-fixo {
    width: 80px;
    height: 40px;
    position: absolute;
    left: -17px;
    background-color: #E1FFDD;
    border-radius: 50px;
    z-index: 1;
    -webkit-transition: left 0.5s ease, width 0.5s ease;
    -moz-transition: left 0.5s ease, width 0.5s ease;
    -o-transition: left 0.5s ease, width 0.5s ease;
    -ms-transition: left 0.5s ease, width 0.5s ease;
    transition: left 0.5s ease, width 0.5s ease;
    margin-top: -2px;

}
#super-banner-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; padding-top: 64px; background-color: #226b4f; }
#super-banner-int-bora-pramambai { width: 90%; height: auto; position: relative; margin: auto; max-width: 1700px; border-radius: 50px; overflow: hidden; }
.swiper { width: 100%; height: auto; }
.item-slider-topo { width: 100%; height: auto; position: relative; float: left; }
#faixa-seletor-banner { width: 100%; height: auto; position: absolute; bottom: -40px; z-index: 20; }
#faixa-int-seletor-banner { width: 520px; height: 80px; position: relative; margin: auto; background-color:#428e72 !important; border-radius: 100px; padding-left: 25px; }
#faixa-int-seletor-banner ul li { width: auto; height: auto; position: relative; float: left; font-size: 25px; font-family: 'poppinssemibold'; color: #fff; margin-right: 0px; margin-left: 30px; margin-top: 24px; z-index: 30; cursor: pointer; }
#faixa-int-seletor-banner ul li:hover { color: #174735 !important; }
#marcador-atrativos-topo { width: 115px; height: 40px; position: absolute; left: 37px; top: 18.5px; background-color: #E7FAE4; border-radius: 70px; transition: left 0.4s ease, width 0.4s ease; /* transição suave */ }
.atv-atrativos-banner { color: #006F4B !important; }

/*Inicio da segunda sessão*/
#segunda-sessao-lp { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; overflow: hidden; padding-bottom: 160px; background-color: #226b4f; }
#view-segunda-sessao-lp { width: 1200px; height: auto; min-height: 900px; position: relative; margin: auto; }
#mapa-e { width: 762px; height: 843px; position: absolute; left: -430px; top: 180px; background: url('img/mapa.png'); background-size: 762px; opacity: 0.1; }
#mapa-d { width: 762px; height: 843px; position: absolute; right: -330px; top: 30px; background: url('img/mapa.png'); background-size: 762px; opacity: 0.1; }
#chamada-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; }
#chamada-s2-lp h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 42px; color: #ffffff; padding: 0px 280px; line-height: 49px; }
#chamada-s2-lp p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; text-align: center; font-size: 22px; color: #ffffff; padding: 0px 260px; }
#chamada-s2-lp .marca { background: #fff;           /* fundo branco */ color: #4bb397;             /* cor do texto */ padding: 6px 20px 2px 20px;          /* espaço interno */ border-radius: 50px;        /* bordas arredondadas */ display: inline-block;      /* garante o ajuste */ }
#faixa-trilha-topo { width: 100%; position: relative; float: left; margin-top: -390px; line-height: 0; }
#faixa-trilha-topo img { display: block; width: 100%; height: auto; }
#item-ft-trila-1 { width: 150px; height: 150px; position: absolute; left: 2%; top: 45px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
#ftt-int-1 { width: 160px; height: 160px; position: absolute; left: 50%; top: 50%; margin-left: -80px; margin-top: -80px; background-color: green; }
#item-ft-trila-2 { width: 170px; height: 170px; position: absolute; left: 29%; top: -59px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
#ftt-int-2 { width: 180px; height: 180px; position: absolute; left: 50%; top: 50%; margin-left: -90px; margin-top: -90px; background-color: green; }
#item-ft-trila-3 { width: 180px; height: 180px; position: absolute; left: 58%; top: -26px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
#ftt-int-3 { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; background-color: green; }
#item-ft-trila-4 { width: 140px; height: 140px; position: absolute; left: 86%; top: 14px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
#ftt-int-4 { width: 142px; height: 142px; position: absolute; left: 50%; top: 50%; margin-left: -71px; margin-top: -71px; background-color: green; }
.flutua { -webkit-animation: flutuar 4s ease-in-out infinite; -moz-animation: flutuar 4s ease-in-out infinite; -o-animation: flutuar 4s ease-in-out infinite; animation: flutuar 4s ease-in-out infinite; }
.flutua-2 { -webkit-animation: flutuar 4.5s ease-in-out infinite; -moz-animation: flutuar 4.5s ease-in-out infinite; -o-animation: flutuar 4.5s ease-in-out infinite; animation: flutuar 4.5s ease-in-out infinite; }
#view-2-sessao-lp { width: 1200px; height: auto; position: relative; margin: auto; }
#faixa-s2-sessao-lp { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; }
#chamada-view-2-sessao-lp { width: 28%; height: auto; position: relative; float: left; }
#chamada-view-2-sessao-lp h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 40px; color: #ffffff; }
#cards-s2 { width: 72%; height: auto; position: relative; float: left; }
.item-card-s2 { width: 32%; height: 460px; position: relative; float: left; margin-right: 1%; background-color: #287358; border-radius: 20px; }
.faixa-foto-card-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.bloco-ft-card-s2 { width: 85%; height: 200px; position: relative; margin: auto; background-color: #E7FAE4; border-radius: 20px; overflow: hidden; }
.foto-int-card-s2 { width: 240px; height: 220px; position: absolute; left: 50%; top: 50%; margin-left: -120px; margin-top: -110px; }
.legenda-foto-card { width: auto; height: auto; position: absolute; bottom: 20px; left: 20px; font-size: 20px; color: #fff; font-family: 'poppinssemibold'; z-index: 10; }
.faixa-sobre-card { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
.faixa-sobre-card p { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; font-size: 16px; line-height: 23px; color: #fff; font-family: 'poppinslight'; }

/*Terceira sessão LP*/
#div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding-bottom: 150px; background-color: #fffefa; }
#view-div-s3 { width: 1200px; height: auto; position: relative; margin: auto; }
#view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; font-size: 42px; color: #121212; text-align: center; }
#view-div-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 24px; color: #121212; text-align: center; padding: 0px 260px; }
#faixa-cards-beneficios { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#box-cards-beneficios-int { width: 900px; height: auto; position: relative; margin: auto; padding-bottom: 150px; }

/* item card beneficio */
.item-card-beneficio { width: 100%; height: auto; position: relative; float: left; margin-bottom: 5px; padding: 30px 20px 30px 30px; font-size: 18px; color: #121212 !important; border-radius: 20px; background-color: #F2FFF0 !important; cursor: pointer; transition: background-color .3s, color .3s; }
.arrow-card-beneficio { width: 40px; height: 40px; position: absolute; right: 20px; top: 50%; margin-top: -20px; background-color: #60AE91 !important; border-radius: 50%; overflow: hidden; /* impede que a seta fique visível fora da bolinha */ }
.arrow-int-card-beneficio { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; background: url('img/seta-d.png'); background-size: 30px; }

/* animação ao passar o mouse */
.item-card-beneficio:hover .arrow-int-card-beneficio { animation: arrow-move 1s ease-in-out forwards; }

/* keyframes da animação */
@keyframes arrow-move {
  0% { transform: translateX(0); }
  40% { transform: translateX(60px); opacity: 0; }

  /* sai pela direita */
  41% { transform: translateX(-60px); opacity: 0; }

  /* reaparece pela esquerda */
  100% { transform: translateX(0); opacity: 1; }

/* volta à posição inicial */ }
.item-card-beneficio:hover { background-color: #DBF9D7 !important; color: #1B6B4E !important; }
@-webkit-keyframes flutuar {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
}
@-moz-keyframes flutuar {
  0%, 100% { -moz-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-8px); transform: translateY(-8px); }
}
@-o-keyframes flutuar {
  0%, 100% { -o-transform: translateY(0); transform: translateY(0); }
  50% { -o-transform: translateY(-8px); transform: translateY(-8px); }
}
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/*Inicio quarta sessão*/
#div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #fffefa; padding-bottom: 150px; }
#view-div-s4 { width: 1200px; height: auto; position: relative; margin: auto; }
#div-a-s4 { width: 50%; height: auto; position: relative; float: left; }
#div-foto-s4 { width: 100%; height: auto; position: relative; float: left; border-radius: 40px; overflow: hidden; }
.item-foto-s4 { width: 100%; height: auto; position: relative; float: left; }
#div-b-s4 { width: 50%; height: auto; position: relative; float: left; padding-left: 60px; }
#div-b-s4 h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 42px; padding-right: 150px; color: #121212; }
#seletor-categoria-form-a { width: 315px; height: auto; position: relative; float: left; padding: 12px 10px 10px 20px; background-color: #60AE91; border: 1px solid #1B6B4E; border-radius: 50px; z-index: 20; }
#cta-empreendedor { width: auto; height: auto; position: relative; float: left; font-size: 16px; color: #fff; z-index: 10; cursor: pointer; }
#cta-projetos { width: auto; height: auto; position: relative; float: left; margin-left: 30px; font-size: 16px; color: #fff; z-index: 10; cursor: pointer; }
#bg-seletor-form { width: 217px; height: 45px; position: absolute; left: 0px; top: 0px; background-color: #1B6B4E; border-radius: 50px; z-index: 5; }
#faixa-sobre-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 19px; color: #000; line-height: 27px; padding-right: 100px; }
#faixa-cta-quero-fazer-parte { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#cta-fazer-parte { width: auto; height: auto; position: relative; float: left; padding: 14px 50px 10px 20px; background-color: #1B6B4E; color: #fff; font-size: 18px; border-radius: 50px; cursor: pointer; }
#arrow-fazer-parte { width: 40px; height: 40px; position: absolute; right: 10px; top: 5px; background: url('img/arrow-menu-fixo.png'); background-size: 40px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
#cta-fazer-parte:hover { background-color: #039061; }

/* quando passar o mouse no botão */
#cta-fazer-parte:hover #arrow-fazer-parte { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); }

/* ==========================================================================
 Início atrativos Bora pra Mambaí
 ========================================================================== */
#div-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; padding-top: 80px; padding-bottom: 240px; background-color: #226b50; overflow: hidden; }
#view-div-atrativos { width: 100%; height: auto; position: relative; margin: auto; padding-left: 20% }
#conteudo-div-atrativos { width: 100%; height: auto; position: relative; float: left; }
#conteudo-div-atrativos h3 { width: 380px; height: auto; position: relative; float: left; margin-top: 140px; margin-right: 90%; color: #fff; font-size: 42px; padding-right: 10px; }
#conteudo-div-atrativos p { width: 380px; height: auto; position: relative; float: left; margin-top: -5px; color: #fff; font-size: 20px; }
#faixa-controle-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: 5px; }
.item-controle-atrativo { width: 72px; height: 72px; position: relative; float: left; margin-right: 20px; opacity: 0.8; cursor: pointer; }
.ctrl-e-a { background: url('img/ctrl-e.png'); background-size: 72px; background-repeat: no-repeat; }
.ctrl-e-b { background: url('img/ctrl-d.png'); background-size: 72px; background-repeat: no-repeat; }
.item-controle-atrativo:hover { opacity: 1; }
#faixa-atrativos-ext { width: 100%; height: 470px; position: absolute; left: 390px; top: 100px; overflow: hidden; }
#faixa-cards-atrativos { width: 5000px; height: auto; position: absolute; }
.item-card-atrativo { width: 320px; height: 450px; position: relative; float: left; margin-right: 10px; background-color: #1B6B4E; border-radius: 20px; overflow: hidden;  /* 👇 aqui a transição */ transition: all 1.5s ease; }
.item-card-atrativo:hover .box-legenda-atrativo { background-color: #228863; }
.foto-atrativo-card { width: 330px; height: 460px; position: absolute; left: 50%; top: 50%; margin-left: -165px; margin-top: -230px; }
.box-legenda-atrativo { width: 90%; height: 68px; position: absolute; bottom: 20px; left: 5%; background-color: #1B6B4E; border-radius: 20px; z-index: 20; }
.box-legenda-atrativo h5 { width: 95%; height: auto; position: relative; float: left; padding: 10px 15px; color: #fff; font-size: 15px; margin-top: 8px; line-height: 18px; }
.box-legenda-atrativo h6 { width: 60%; height: auto; position: absolute; bottom: 11px; left: 15px; font-size: 12px; color: #fff; }
.cta-ver-mais-card-atrativo { width: auto; height: auto; position: absolute; right: 20px; bottom: 15px; color: #fff; font-size: 12px; font-family: 'poppinsbold'; }

/* ==========================================================================
 Início Experiências
 ========================================================================== */
#div-experiencias { width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden; }
#faixa-ornamento-experiencias { width: 100%; height: 150px; position: relative; float: left; margin-top: 20px; overflow: hidden; }
.faixa-ornamento-a-atracoes { width: 4000px; height: 72px; position: absolute; left: 0px; background: url('img/ornamento-atracoes-c.jpg'); background-repeat: repeat-x; background-size: 1680px; }
.move-faixa-a-atracoes { -webkit-animation: moveA 240s  infinite alternate; -moz-animation: moveA 240s  infinite alternate; -ms-animation: moveA 240s  infinite alternate; -o-animation: moveA 240s  infinite alternate; animation: moveA 240s  infinite alternate; }
@-webkit-keyframes moveA {
  from { left: 0px; }
  to { left: -2000px; }
}
@-moz-keyframes moveA {
  from { left: 0px; }
  to { left: -2000px; }
}
@-ms-keyframes moveA {
  from { left: 0px; }
  to { left: -2000px; }
}
@-o-keyframes moveA {
  from { left: 0px; }
  to { left: -2000px; }
}
@keyframes moveA {
  from { left: 0px; }
  to { left: -2000px; }
}
.faixa-ornamento-b-atracoes { width: 5000px; height: 72px; position: absolute; left: -2500px; top: 70px; background: url('img/ornamento-atracoes-d.jpg'); background-repeat: repeat-x; background-size: 1840px;}
.move-faixa-b-atracoes { -webkit-animation: moveB 280s  infinite alternate; -moz-animation: moveB 280s  infinite alternate; -ms-animation: moveB 280s  infinite alternate; -o-animation: moveB 280s  infinite alternate; animation: moveB 280s  infinite alternate; }
@-webkit-keyframes moveB {
  from { left: -2500px; }
  to { left: -500px; }

/* -2500 + 2000 */ }
@-moz-keyframes moveB {
  from { left: -2500px; }
  to { left: -500px; }
}
@-ms-keyframes moveB {
  from { left: -2500px; }
  to { left: -500px; }
}
@-o-keyframes moveB {
  from { left: -2500px; }
  to { left: -500px; }
}
@keyframes moveB {
  from { left: -2500px; }
  to { left: -500px; }
}
#faixa-conteudo-experiencias { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; overflow: hidden; background-color: #fff; }
#view-contedo-experiencias { width: 1200px; height: auto; position: relative; margin: auto; }
#view-conteudo-txt-exp { width: 40%; height: auto; position: relative; float: left; }
#view-conteudo-txt-exp h2 { width: 100%; height: auto; position: relative; margin-top: 40px; font-size: 42px; color: #000; }
#view-conteudo-txt-exp p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 18px; color: #000; line-height: 30px; }
#bloco-ornamento-experiencias { width: 60%; height: auto; position: relative; float: left; }
#faixa-cards-experiencias-out { width: 6000px; height: 300px; position: absolute; top: 150px; left: 80px; overflow: hidden; }
#faixa-cards-experiencias { width: 5500px; height: auto; position: absolute; left: 0px;  /* animação com prefixos */ }
.move-card-experiencias { -webkit-animation: deslizar 220s linear infinite alternate; -moz-animation: deslizar 220s linear infinite alternate; -o-animation: deslizar 220s linear infinite alternate; animation: deslizar 220s linear infinite alternate; }
@-webkit-keyframes deslizar {
  from { left: 80px; }
  to { left: -4600px; }
}
@-moz-keyframes deslizar {
  from { left: 80px; }
  to { left: -4600px; }
}
@-o-keyframes deslizar {
  from { left: 80px; }
  to { left: -4600px; }
}
@keyframes deslizar {
  from { left: 80px; }
  to { left: -4600px; }
}
.item-foto-card-experiencia { width: 300px; height: 200px; position: relative; float: left; margin-right: 10px; border-radius: 25px; overflow: hidden; background-color: #dadada; }
.ft-int-card-experiencia { width: 310px; height: 210px; position: absolute; left: 50%; top: 50%; margin-left: -155px; margin-top: -105px; }
.nome-exp-int { width: 100%; height: 30px; position: absolute; top: 50%; margin-top: -15px; color: #fff; font-size: 24px; text-align: center; }
.cor-exp-1 { background-color: #1B6B4E; }
.cor-exp-2 { background-color: #FF6163; }

/*Slides ruas Mambai*/
#slides-rua-mambai { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: 130px; }
.item-rua-mambai { width: 100%; height: auto; position: relative; float: left; }

/*sobre História cultura e cerrado*/
#s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 80px; background-color: #1B6B4E; }
#view-s5 { width: 1200px; height: auto; position: relative; margin: auto; }
#view-s5 h5 { width: 20%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 48px; color: #fff; font-family: 'poppinssemibold'; }
#view-s5 p { width: 75%; height: auto; position: relative; float: left; margin-left: 30px; margin-top: 115px; font-size: 18px; color: #fff; }
#road-map { width: 100%; height: auto; position: relative; float: left; background-color: #fff; }
#view-road-map { width: 1200px; height: auto; position: relative; margin: auto; }
#view-road-map h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; text-align: center; font-size: 42px; color: #1D1D1D; padding: 0px 280px; line-height: 49px; }
#view-road-map p { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; text-align: center; font-size: 20px; color: #1D1D1D; padding: 0px 220px; }
#faixa-controles-road-map { width: 100%; height: auto; position: relative; float: left; }
#view-controles-road-map { width: 164px; height: auto; position: relative; margin: auto; }
.item-controle-rdm { width: 72px; height: 67px; position: relative; float: left; margin-left: 10px; cursor: pointer; opacity: 0.9; }
.ctrl-e-rdm { background: url('img/ctrl-e-rdm.png'); background-size: 72px; }
.ctrl-d-rdm { background: url('img/ctrl-d-rdm.png'); background-size: 72px; }
.item-controle-rdm:hover { opacity: 1; }

/*faixa cards road map*/
#faixa-road-map { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }

/*Inicio cards road map*/
#faixa-cards-road-map { width: 100%; height: auto; position: relative; float: left; overflow: hidden; }

/*Card road mamp*/
.card-raod-map { width: auto; height: 390px; position: relative; float: left; margin-left: 0px; margin-top: 60px; background-color: #1B6B4E; border-radius: 20px; }
.faixa-foto-card-rdm { width: 100%; height: auto; position: relative; float: left; margin-top: -140px; display: none; }
.foto-card-rdm { width: 85%; height: 250px; position: relative; margin: auto; background-color: #dadada; border-radius: 20px; overflow: hidden; }
.foto-int-card-rdm { width: 400px; height: 260px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -130px; }
.conteudo-card-rdm { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 20px; }
.conteudo-card-rdm h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #E7FAE4; font-size: 22px; padding-right: 35px; }
.conteudo-card-rdm p { width: 95%; height: auto; position: relative; float: left; margin-top: -5px; color: #E7FAE4; font-size: 16px; font-family: 'poppinslight'; }
.faixa-data-lancamento { width: 100%; height: auto; position: absolute; bottom: 30px; padding: 0px 20px; }
.numero-card { width: 55px; height: 55px; position: relative; float: left; background-color: #e7fae4 !important; border-radius: 50%; }
.numero-int-card { width: 100%; height: 30px; position: absolute; top: 50%; margin-top: -15px; }
.numer-int-txt-card { width: 100%; height: auto; position: relative; float: left; margin-top: 3px; font-size: 24px; color: #1B6B4E; text-align: center; font-family: 'poppinssemibold'; }
.legenda-data-card { width: auto; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 2px; padding: 17px 20px 13px 20px; background-color: #E7FAE4; color: #1B6B4E; border-radius: 30px; font-family: 'poppinssemibold'; }

/*ínicio rodapé*/
#rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; padding-bottom: 140px; }
#view-rodape { width: 90%; height: auto; position: relative; max-width: 1500px; margin: auto; border-top: 1px solid #D2D2D2; }
#faixa-creditos-ecologica { width: 100%; height: 87px; position: absolute; left: 0px; top: -87px; overflow: hidden; }
#txt-credito-ecologica { width: 483px; height: auto; position: relative; margin: auto; padding-top: 31px; font-size: 16px; color: #000; text-align: center; }
#icone-fotografo { width: 80px; height: 80px; position: absolute; left: 50%; margin-left: -330px; top: 70px; margin-top: 14px; background: url('img/fotografo.png'); background-size: 80px; }
.s-rodape { width: 37%; height: auto; position: relative; float: left; padding-top: 20px; }
.s-rodape-b { width: 33%; height: auto; position: relative; float: left; padding-top: 20px; }
.s-rodape-c { width: 30%; height: auto; position: relative; float: left; padding-top: 20px; }
#logo-r-bora-pra-mambai { width: 145px; height: 65px; position: relative; float: left; margin-top: 10px; background: url('img/logo-rodape-bora-pra-mambai.png'); background-size: 145px; }
#legenda-logo-r-bora-pra-mambai { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 15px; font-size: 16px; color: #000; }
#legenda-insta { width: 100px; height: auto; position: relative; float: left; margin-top: 23px; font-size: 17px; color: #000; }
#icon-insta { width: 40px; height: 40px; position: relative; float: left; margin-left: 10px; margin-top: 23px; background: url('img/insta-icn.png'); background-size: 40px; }
#endereco-instagram { width: auto; height: auto; position: relative; float: left; margin-top: 31px; margin-left: 18px; font-size: 19px; color: #000; }
#logo-roots-do-cerrado { width: 144px; height: 43px; position: relative; float: left; margin-top: 20px; background: url('img/logo-roots-do-cerrado.png'); background-size: 144px; }
#legenda-logo-roots-cerrado { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 24px; font-size: 16px; color: #000; }
#faixa-politica-privacidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#link-politica-privacidade { width: 275px; height: auto; position: relative; margin: auto; }
#link-int-privacidade { width: auto; height: auto; position: relative; float: left; font-size: 18px; color: #000; cursor: pointer; font-family: 'poppinssemibold'; }
#seta-link { width: 50px; height: 50px; position: relative; float: left; margin-left: -5px; margin-top: -12px; background: url('img/seta-politica.png'); background-size: 50px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
#link-politica-privacidade:hover #link-int-privacidade { color: #1B6B4E; }
#link-politica-privacidade:hover #seta-link { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); }

/*Inicio janelas*/
#janela-beneficio-out { width: 390px; height: 0%; position: fixed; top: 0px; right: 0px; z-index: 999999 !important; overflow: hidden; }
#janela-beneficio { width: 380px; height: 100%; position: absolute; right: -500px; background-color: #1B6B4E; border-radius: 30px 0px 0px 30px; overflow: hidden; border: 1px solid #2b8362; }
#foto-janela-beneficio { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#foto-janela-beneficio-int { width: 300px; height: 280px; position: relative; margin: auto; border-radius: 30px; overflow: hidden; }
#foto-janela-beneficio-int-jpg { width: 310px; height: 290px; position: absolute; left: 50%; top: 50%; margin-left: -155px; margin-top: -145px; }
#conteudo-janela-benificio { width: 100%; height: 100%; position: relative; float: left; margin-top: 10px; padding: 0px 35px 400px 35px; overflow-y: scroll; }
#conteudo-janela-benificio h4 { width: 90%; height: auto; position: relative; font-size: 26px; color: #E7FAE4; }
#conteudo-janela-benificio p { width: 100%; height: auto; position: relative; margin-top: 5px;    /* margin-bottom: 15px; */ font-size: 16px; color: #E7FAE4; font-family: 'poppinslight'; }
.descricao-beneficio-dinamica { margin-top: 12px; color: #fff; font-size: 15px; line-height: 1.6; }
.descricao-beneficio-dinamica ul { margin: 25px 0 25px 20px; padding-left: 0px; list-style-type: disc; }

/* Cada item */
.descricao-beneficio-dinamica ul li { width: 100%; height: auto; position: relative; float: none; margin-bottom: 6px; font-size: 15px; color: #E7FAE4; list-style-position: outside; list-style: disc; }
#faixa-cta-janela-beneficio { width: 100%; height: 100px; position: absolute; bottom: 0px; background-color: #1B6B4E; z-index: 90; }
#faixa-int-janela-beneficio { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#cta-int-fechar-j-beneficio { width: 143px; height: auto; position: relative; margin: auto; font-size: 19px; color: #fff; padding: 14px 0px 10px 30px; background-color: #60AE92; border-radius: 30px; cursor: pointer; }
#seta-cta-fechar-beneficio { width: 40px; height: 40px; position: absolute; right: 10px; top: 5px; background: url('img/seta-cta-fechar-beneficio.png'); background-size: 40px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
#cta-int-fechar-j-beneficio:hover { background-color: #144E39; }
#cta-int-fechar-j-beneficio:hover #seta-cta-fechar-beneficio { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); }

/*Janela formulário*/
#janela-formulario { width: 900px; height: 550px; position: fixed; z-index: 99999; background-color: #fff; left: 50%; top: 250%; margin-left: -450px; margin-top: -340px; border-radius: 40px; }
#div-chamada-formulario-janela { width: 48%; height: auto; position: relative; float: left; }
#ilustra-janela-form { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; }
#ilustra-form-int { width: 316px; height: 195px; position: relative; margin: auto; background: url('img/ilustra-form.png'); background-size: 316px; }
#div-chamada-formulario-janela p { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 40px; font-size: 17px; color: #000; }
#div-campos-formulario { width: 50%; height: auto; position: relative; float: left; }
#selecao-tipo-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 30px; }
#seletor-categoria-form-a-j { width: 315px; height: auto; position: relative; float: left; padding: 12px 10px 10px 20px; background-color: #60AE91; border: 1px solid #1B6B4E; border-radius: 50px; }
#cta-empreendedor-j { width: auto; height: auto; position: relative; float: left; font-size: 16px; color: #fff; z-index: 10; cursor: pointer; }
#cta-projetos-j { width: auto; height: auto; position: relative; float: left; margin-left: 34px; font-size: 16px; color: #fff; z-index: 10; cursor: pointer; }
#bg-seletor-form-j { width: 217px; height: 45px; position: absolute; left: 0px; top: 0px; background-color: #1B6B4E; border-radius: 50px; z-index: 5; }
#div-formulario-janela-int { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 30px; }
#div-formulario-janela-int input { width: 100%; height: auto; position: relative; float: left; margin-bottom: 7px; padding: 15px 20px 12px 20px; color: #1B6B4E; font-size: 16px; background-color: #E1FFDD; border-radius: 14px; box-sizing: border-box; border: 1px solid #c5e4cd; }
#div-formulario-janela-int textarea { width: 100%; height: 170px !important; position: relative; float: left; padding: 20px 20px !important; background-color: #E1FFDD; border-radius: 16px !important; font-size: 16px !important; color: #1B6B4E; border: 1px solid #BAE7C5 !important; box-sizing: border-box !important; }
#faixa-ctas-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 18px; padding: 0px 0px; }
#cta-envia-formulario { width: auto; height: auto; position: relative; float: left; padding: 13px 50px 11px 20px; background-color: #006F4B; color: #fff; font-size: 15px; border-radius: 30px; cursor: pointer; }
#icn-enviar-form { width: 22px; height: 22px; position: absolute; top: 10px; right: 18px; background: url('img/icn-enviar-form.png'); background-size: 22px; }
#cta-envia-formulario:hover { background-color: #009465; }
#cta-fechar-formulario { width: auto; height: auto; position: relative; float: right; padding: 13px 50px 11px 20px; border: 1px solid #006F4B; color: 006F4B; font-size: 15px; color: #006F4B; border-radius: 30px; cursor: pointer; }
#icn-fechar-form { width: 22px; height: 22px; position: absolute; top: 10px; right: 18px; background: url('img/icn-fechar-form.png'); background-size: 22px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
#cta-fechar-formulario:hover { background-color: #E7FAE4; }
#cta-fechar-formulario:hover #icn-fechar-form { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/* ==========================================================================
 Janela Atrativo
 ========================================================================== */
#janela-atrativo { width: 1180px; height: 650px; position: fixed; left: 50%; top: 150%; margin-left: -590px; margin-top: -325px; background-color: #1B6B4E; border-radius: 50px; z-index: 9999; opacity: 0; display: none; }
#cta-fechar-janela-atrativo { width: auto; height: auto; position: absolute; top: 44px; right: 70px; padding: 10px 40px 6px 20px; background-color: #DFFF69; font-size: 18px; color: #000; border-radius: 40px; cursor: pointer; z-index: 10; }
#icn-fechar-janela-atrativo { width: 22px; height: 22px; position: absolute; right: 10px; top: 9px; background: url('img/fechar-janela-icn.png'); background-size: 22px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.6s ease; -moz-transition: -moz-transform 0.6s ease; -ms-transition: -ms-transform 0.6s ease; -o-transition: -o-transform 0.6s ease; transition: transform 0.6s ease; }
#cta-fechar-janela-atrativo:hover #icn-fechar-janela-atrativo { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
#cta-fechar-janela-atrativo:hover { background-color: #A0FF35; }
#slide-janela-atrativo { width: 40%; height: 100%; position: relative; float: left; }
#bloco-foto-slide-atrativo { width: 92%; height: 90%; position: relative; float: left; margin-left: 6.5%; margin-top: 6.5%; border-radius: 30px; overflow: hidden; }
.item-slide-foto-atrativo { width: 100% !important; height: 100%; position: relative; float: left; overflow: hidden; }
.foto-int-slide-atrativo { width: 440px; height: 610px; position: absolute; left: 50%; top: 50%; margin-left: -217px; margin-top: -305px; }
#cta-slide-visite-com-a-ecologica { width: 300px; height: auto; position: absolute; left: 50%; margin-left: -150px; bottom: 30px; padding: 17px 0px 10px 23px; font-size: 17px; color: #000; background-color: #FFF !important; border-radius: 40px; cursor: pointer; z-index: 90; }
#seta-cta-visite-com-a-ecologica { width: 40px; height: 40px; position: absolute; right: 10px; top: 6px; background: url('img/seta-cta-ecologica-janela.png'); background-size: 40px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }

/* Animação da seta */
@-webkit-keyframes moverSeta {
  0% { -webkit-transform: translateX(0); }
  25% { -webkit-transform: translateX(-3px); }
  50% { -webkit-transform: translateX(0); }
  75% { -webkit-transform: translateX(3px); }
  100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes moverSeta {
  0% { -moz-transform: translateX(0); }
  25% { -moz-transform: translateX(-3px); }
  50% { -moz-transform: translateX(0); }
  75% { -moz-transform: translateX(3px); }
  100% { -moz-transform: translateX(0); }
}
@-ms-keyframes moverSeta {
  0% { -ms-transform: translateX(0); }
  25% { -ms-transform: translateX(-3px); }
  50% { -ms-transform: translateX(0); }
  75% { -ms-transform: translateX(3px); }
  100% { -ms-transform: translateX(0); }
}
@-o-keyframes moverSeta {
  0% { -o-transform: translateX(0); }
  25% { -o-transform: translateX(-3px); }
  50% { -o-transform: translateX(0); }
  75% { -o-transform: translateX(3px); }
  100% { -o-transform: translateX(0); }
}
@keyframes moverSeta {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Aplica a animação enquanto o mouse estiver sobre o CTA */
#cta-slide-visite-com-a-ecologica:hover #seta-cta-visite-com-a-ecologica { -webkit-animation: moverSeta 0.6s ease-in-out infinite; -moz-animation: moverSeta 0.6s ease-in-out infinite; -ms-animation: moverSeta 0.6s ease-in-out infinite; -o-animation: moverSeta 0.6s ease-in-out infinite; animation: moverSeta 0.6s ease-in-out infinite; }
#cta-slide-visite-com-a-ecologica:hover { background-color: #A0FF35; }
#conteudo-janela-atrativo { width: 60%; height: 100%; position: relative; float: left; padding-left: 30px; }
#conteudo-janela-atrativo h3 { width: 70%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 38px; color: #fff; font-family: 'poppinsbold'; }
#paragrafos-janela-atrativo { width: 100%; height: 52%; position: relative; float: left; margin-top: 5px; overflow-y: scroll; }
#paragrafos-janela-atrativo p { width: 90%; height: auto; position: relative; float: left; margin-bottom: 0px; font-size: 16px; line-height: 24px; color: #fff; font-family: 'poppinslight'; }
#alerta-texto-atrativo { position: absolute; bottom: 170px; z-index: 90; padding: 10px 20px 8px 20px; background-color: #00b171; color: #fff; border-radius: 40px; display: none; opacity: 0; transition: opacity 0.4s ease; }
#box-info-atrativo { width: 93%; height: 117px; position: relative; float: left; margin-left: 0px; margin-top: 45px; border-radius: 15px; background-color: #278664; z-index: 90; }
.item-controle-inf-atrativo { width: 50px; height: 50px; position: absolute; top: 50%; margin-top: -20px; background-color: #278664; border-radius: 50%; z-index: 10; cursor: pointer; }
.item-controle-inf-atrativo:hover { background-color: #278664; }
.ctrl-e-inf-atr { left: -25px; }
.ctrl-d-inf-atr { right: -25px; }
.seta-ctrl-atr { width: 15px; height: 27px; position: absolute; top: 50%; margin-top: -13.5px; left: 50%; margin-left: -7.5px; }
.seta-e-ctrl-atr { background: url('img/seta-e-inf-atrativo.png'); background-size: 15px; }
.seta-d-ctrl-atr { background: url('img/seta-e-inf-atrativo.png'); background-size: 15px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); }
#box-slides-inf-atrativo { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; border-radius: 30px; }
.item-slide-inf-atrativo-txt { width: 100%; height: 100%; position: relative; float: left; padding: 0px 50px; }
.div-conteudo-inf-atrativo { width: 100%; height: auto; position: relative; float: left; }
.div-conteudo-inf-atrativo h4 { width: 90%; height: auto; position: relative; float: left; margin-top: 24px; color: #fff; font-size: 19px; font-family: 'poppinssemibold'; }
.div-conteudo-inf-atrativo p { width: 90%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 16px; color: #fff; }
@media only screen  
and (min-width:1200px) 
and (max-width:1500px) {
  #view-2-sessao-lp { width: 1150px; height: auto; position: relative; margin: auto; }
  #super-banner-int-bora-pramambai { width: 95%; height: auto; position: relative; margin: auto; max-width: 1700px; border-radius: 50px; overflow: hidden; }
  #view-div-atrativos { width: 100%; height: auto; position: relative; margin: auto; padding-left: 61px; }
  #view-div-s4 { width: 1150px; height: auto; position: relative; margin: auto; }
  #div-b-s4 h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 42px; padding-right: 120px; color: #121212; }
  #view-contedo-experiencias { width: 1150px; height: auto; position: relative; margin: auto; }
  #view-s5 { width: 1150px; height: auto; position: relative; margin: auto; }
  #view-rodape { width: 95%; height: auto; position: relative; max-width: 1500px; margin: auto; border-top: 1px solid #D2D2D2; }
  #legenda-logo-r-bora-pra-mambai { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 27px; font-size: 14px; color: #000; }
  #legenda-insta { width: 74px; height: auto; position: relative; float: left; margin-top: 27px; font-size: 14px; color: #000; }
  #icon-insta { width: 30px; height: 30px; position: relative; float: left; margin-left: 10px; margin-top: 29px; background: url('img/insta-icn.png'); background-size: 30px; }
  #endereco-instagram { width: auto; height: auto; position: relative; float: left; margin-top: 34px; margin-left: 9px; font-size: 16px; color: #000; }
  #legenda-logo-roots-cerrado { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 26px; font-size: 15px; color: #000; }
}
@media only screen  
and (min-width:1000px) 
and (max-width:1200px) {

  /* ==========================================================================
     Bora começar a Landingpage aqui!
     ========================================================================== */
  #menu-fixo { width: 860px; height: 70px; position: fixed; top: 30px; left: 50%; margin-left: -430px; background-color: #fff; border: 1px solid #DBEDD8; border-radius: 50px; z-index: 999; }
  #container-itens-menu-fixo { width: 510px; height: 70px; position: relative; float: left; margin-left: 30px; }
  #faixa-int-seletor-banner { width: 520px; height: 70px; position: relative; margin: auto; background-color: #82cf59; border-radius: 100px; padding-left: 25px; }
  #faixa-int-seletor-banner ul li { width: auto; height: auto; position: relative; float: left; font-size: 25px; font-family: 'poppinssemibold'; color: #fff; margin-right: 0px; margin-left: 30px; margin-top: 20px; z-index: 30; cursor: pointer; }
  #marcador-atrativos-topo { width: 115px; height: 40px; position: absolute; left: 37px; top: 15.5px; background-color: #E7FAE4; border-radius: 70px; transition: left 0.4s ease, width 0.4s ease; }

  /*Inicio da segunda sessão*/
  #segunda-sessao-lp { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; overflow: hidden; padding-bottom: 110px; background-color: #226b4f; }
  #view-segunda-sessao-lp { width: 95%; height: auto; min-height: 900px; position: relative; margin: auto; }
  #mapa-e { width: 762px; height: 843px; position: absolute; left: -530px; top: 180px; background: url('img/mapa.png'); background-size: 762px; opacity: 0.1; }
  #mapa-d { width: 762px; height: 843px; position: absolute; right: -580px; top: 30px; background: url('img/mapa.png'); background-size: 762px; opacity: 0.1; }
  #chamada-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 71px; }
  #chamada-s2-lp h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 36px; color: #ffffff; padding: 0px 200px; line-height: 41px; }
  #chamada-s2-lp p { width: 100%; height: auto; position: relative; float: left; margin-top: -1px; text-align: center; font-size: 22px; color: #ffffff; padding: 0px 150px; }
  #faixa-s2-sessao-lp { width: 100%; height: auto; position: relative; float: left; margin-top: -110px; }
  #chamada-view-2-sessao-lp { width: 100%; height: auto; position: relative; float: left; }
  #chamada-view-2-sessao-lp h2 { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; font-size: 40px; text-align: center; padding: 0px 240px; color: #ffffff; }
  #cards-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 40px; }

  /*Terceira sessão LP*/
  #div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding-bottom: 80px; background-color: #fffefa; }
  #view-div-s3 { width: 950px; height: auto; position: relative; margin: auto; }
  #view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; font-size: 41px; color: #121212; text-align: center; }
  #view-div-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 22px; color: #121212; text-align: center; padding: 0px 130px; }

  /*Inicio quarta sessão*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #fffefa; padding-bottom: 50px; }
  #div-b-s4 { width: 50%; height: auto; position: relative; float: left; padding-left: 40px; }
  #faixa-sobre-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 18px; color: #000; line-height: 24px; padding-right: 60px; }

  /* ==========================================================================
     Início atrativos Bora pra Mambaí
     ========================================================================== */
  #div-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; padding-top: 0px; padding-bottom: 620px; background-color: #226b50; overflow: hidden; }
  #conteudo-div-atrativos h3 { width: 520px; height: auto; position: relative; float: left; margin-top: 96px; margin-right: 90%; color: #fff; font-size: 42px; padding-right: 10px; }
  #conteudo-div-atrativos p { width: 490px; height: auto; position: relative; float: left; margin-top: -5px; color: #fff; font-size: 17px; }
  #faixa-controle-atrativos { width: 20%; height: auto; position: relative; float: right; margin-top: 5px; margin-right: 40px; }
  .item-controle-atrativo { width: 72px; height: 72px; position: relative; float: left; margin-right: 20px; opacity: 0.8; cursor: pointer; }
  #faixa-atrativos-ext { width: 100%; height: 470px; position: absolute; left: 0px; top: 328px; overflow: hidden; }
  #view-conteudo-txt-exp { width: 50%; height: auto; position: relative; float: left; }
  #view-conteudo-txt-exp h2 { width: 100%; height: auto; position: relative; margin-top: 40px; font-size: 32px; color: #000; }
  #view-conteudo-txt-exp p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #000; line-height: 30px; }
  #bloco-ornamento-experiencias { width: 50%; height: auto; position: relative; float: left; }
  #view-s5 h5 { width: 30%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 48px; color: #fff; font-family: 'poppinssemibold'; }
  #view-s5 p { width: 65%; height: auto; position: relative; float: left; margin-left: -10px; margin-top: 90px; font-size: 18px; color: #fff; }
  #view-road-map { width: 950px; height: auto; position: relative; margin: auto; }
  #view-road-map h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; text-align: center; font-size: 38px; color: #1D1D1D; padding: 0px 20px; line-height: 49px; }
  #view-road-map p { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; text-align: center; font-size: 20px; color: #1D1D1D; padding: 0px 130px; }

  /*ínicio rodapé*/
  #rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; padding-bottom: 130px; }
  .s-rodape { width: 50%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-b { width: 50%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-c { width: 50%; height: auto; position: relative; float: left; padding-top: 20px; }
  #faixa-politica-privacidade { width: 50%; height: auto; position: relative; float: left; margin-top: -36px; }
  #view-2-sessao-lp { width: 950px; height: auto; position: relative; margin: auto; }
  #super-banner-int-bora-pramambai { width: 95%; height: auto; position: relative; margin: auto; max-width: 1700px; border-radius: 40px; overflow: hidden; }
  #view-div-atrativos { width: 100%; height: auto; position: relative; margin: auto; padding-left: 61px; }
  #view-div-s4 { width: 950px; height: auto; position: relative; margin: auto; }
  #div-b-s4 h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 43px; font-size: 34px; padding-right: 110px; color: #121212; }
  #view-contedo-experiencias { width: 910px; height: auto; position: relative; margin: auto; }
  #view-s5 { width: 900px; height: auto; position: relative; margin: auto; }
  #view-rodape { width: 95%; height: auto; position: relative; max-width: 1500px; margin: auto; border-top: 1px solid #D2D2D2; }
  #legenda-logo-r-bora-pra-mambai { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 27px; font-size: 14px; color: #000; }
  #legenda-insta { width: 74px; height: auto; position: relative; float: left; margin-top: 27px; font-size: 14px; color: #000; }
  #icon-insta { width: 30px; height: 30px; position: relative; float: left; margin-left: 10px; margin-top: 29px; background: url('img/insta-icn.png'); background-size: 30px; }
  #endereco-instagram { width: auto; height: auto; position: relative; float: left; margin-top: 34px; margin-left: 9px; font-size: 16px; color: #000; }
  #legenda-logo-roots-cerrado { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 26px; font-size: 15px; color: #000; }

  /* ==========================================================================
     Janela Atrativo
     ========================================================================== */
  #janela-atrativo { width: 950px; height: 650px; position: fixed; left: 50%; top: 150%; margin-left: -475px; margin-top: -325px; background-color: #1B6B4E; border-radius: 30px; z-index: 9999; }
  #bloco-foto-slide-atrativo { width: 92%; height: 90%; position: relative; float: left; margin-left: 6.5%; margin-top: 7.5%; border-radius: 30px; overflow: hidden; }
  #conteudo-janela-atrativo h3 { width: 63%; height: auto; position: relative; float: left; margin-top: 59px; font-size: 23px; color: #fff; font-family: 'poppinsbold'; }
  #box-info-atrativo { width: 93%; height: 117px; position: relative; float: left; margin-left: 0px; margin-top: 50px; border-radius: 15px; }
  .foto-int-slide-atrativo { width: 430px; height: 580px; position: absolute; left: 50%; top: 50%; margin-left: -173px; margin-top: -295px; }
}
@media only screen  
and (min-width:750px) 
and (max-width:1000px) {

  /* ==========================================================================
     Bora começar a Landingpage aqui!
     ========================================================================== */
  #menu-fixo { width: 700px; height: 70px; position: fixed; top: 30px; left: 50%; margin-left: -350px; background-color: #fff; border: 1px solid #DBEDD8; border-radius: 50px; z-index: 999; }
  #marcador-atv-menu-fixo {
        width: 80px;
        height: 40px;
        position: absolute;
        left: -17px;
        background-color: #E1FFDD;
        border-radius: 50px;
        top: 16px;
        margin-left: -2px;
        z-index: 1;
        -webkit-transition: left 0.5s ease, width 0.5s ease;
        -moz-transition: left 0.5s ease, width 0.5s ease;
        -o-transition: left 0.5s ease, width 0.5s ease;
        -ms-transition: left 0.5s ease, width 0.5s ease;
        transition: left 0.5s ease, width 0.5s ease;
    
    }
  #container-itens-menu-fixo ul li { width: auto; height: auto; position: relative; float: left; margin-right: 30px; margin-top: 8px; font-size: 17px; color: rgb(0, 163, 110); z-index: 2; cursor: pointer; }
  #container-itens-menu-fixo { width: 530px; height: 70px; position: relative; float: left; margin-left: 30px; }
  #cta-faz-parte { width: auto; height: auto; position: relative; float: right; margin-right: 26px; margin-top: 14px; padding: 12px 40px 7px 20px; color: #fff; font-size: 17px; border-radius: 13px; cursor: pointer; background-color: #006F4B; display: none; }
  #super-banner-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; padding-top: 124px; background-color: #226b4f; }
  #super-banner-int-bora-pramambai { width: 95%; height: auto; position: relative; margin: auto; max-width: 1700px; border-radius: 30px; overflow: hidden; }
  #faixa-seletor-banner { width: 100%; height: auto; position: absolute; bottom: -35px; z-index: 20; }
  #faixa-int-seletor-banner { width: 520px; height: 70px; position: relative; margin: auto; background-color: #82cf59; border-radius: 100px; padding-left: 25px; }
  #faixa-int-seletor-banner ul li { width: auto; height: auto; position: relative; float: left; font-size: 25px; font-family: 'poppinssemibold'; color: #fff; margin-right: 0px; margin-left: 30px; margin-top: 20px; z-index: 30; cursor: pointer; }
  #marcador-atrativos-topo { width: 115px; height: 40px; position: absolute; left: 37px; top: 14.5px; background-color: #E7FAE4; border-radius: 70px; transition: left 0.4s ease, width 0.4s ease; }
  #marcador-atrativos-topo { width: 115px; height: 40px; position: absolute; left: 37px; top: 14.5px; background-color: #E7FAE4; border-radius: 70px; transition: left 0.4s ease, width 0.4s ease; }
  .atv-atrativos-banner { color: #006F4B !important; }

  /*Inicio da segunda sessão*/
  #segunda-sessao-lp { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; overflow: hidden; padding-bottom: 60px; background-color: #226b4f; }
  #view-segunda-sessao-lp { width: 95%; height: auto; min-height: 900px; position: relative; margin: auto; }
  #mapa-e { width: 762px; height: 843px; position: absolute; left: -630px; top: 180px; background: url('img/mapa.png'); background-size: 762px; opacity: 0.1; }
  #mapa-d { width: 762px; height: 843px; position: absolute; right: -550px; top: 30px; background: url('img/mapa.png'); background-size: 762px; opacity: 0.1; }
  #chamada-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
  #chamada-s2-lp h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 32px; color: #ffffff; padding: 0px 110px; line-height: 37px; }
  #chamada-s2-lp p { width: 100%; height: auto; position: relative; float: left; margin-top: 1px; text-align: center; font-size: 21px; color: #ffffff; padding: 0px 20px; }
  #item-ft-trila-1 { width: 100px; height: 100px; position: absolute; left: 5%; top: 5px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-1 { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -60px; background-color: green; }
  #item-ft-trila-2 { width: 120px; height: 120px; position: absolute; left: 29%; top: -47px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-2 { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -60px; background-color: green; }
  #item-ft-trila-3 { width: 100px; height: 100px; position: absolute; left: 58%; top: -26px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-3 { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -60px; background-color: green; }
  #item-ft-trila-4 { width: 100px; height: 100px; position: absolute; left: 82%; top: -14px; background-color: #fff; outline: solid 12px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-4 { width: 110px; height: 110px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: green; }
  #view-2-sessao-lp { width: 90%; height: auto; position: relative; margin: auto; }
  #chamada-view-2-sessao-lp { width: 100%; height: auto; position: relative; float: left; }
  #chamada-view-2-sessao-lp h2 { width: 100%; height: auto; position: relative; float: left; margin-top: -110px; font-size: 36px; padding: 0px 130px; color: #ffffff; text-align: center; }
  #cards-s2 { width: 100%; height: auto; position: relative; float: left; }
  .item-card-s2 { width: 100%; height: auto; position: relative; float: left; margin-right: 1%; background-color: #287358; border-radius: 20px; margin-bottom: 20px; padding-bottom: 30px; }
  .faixa-foto-card-s2 { width: 238px; height: auto; position: relative; float: left; margin-top: 26px; margin-left: 29px; }
  .bloco-ft-card-s2 { width: 100%; height: 200px; position: relative; margin: auto; background-color: #E7FAE4; border-radius: 20px; overflow: hidden; }
  .faixa-sobre-card { width: 50%; height: auto; position: relative; float: left; margin-top: 61px; }
  .faixa-sobre-card p { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; font-size: 18px; line-height: 23px; color: #fff; font-family: 'poppinslight'; }

  /*Terceira sessão LP*/
  #div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding-bottom: 50px; background-color: #fffefa; }
  #view-div-s3 { width: 95%; height: auto; position: relative; margin: auto; }
  #view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 76px; font-size: 38px; color: #121212; text-align: center; }
  #view-div-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 20px; color: #121212; text-align: center; padding: 0px 50px; }
  #box-cards-beneficios-int { width: 90%; height: auto; position: relative; margin: auto; padding-bottom: 150px; }

  /*Inicio quarta sessão*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #fffefa; padding-bottom: 20px; }
  #view-div-s4 { width: 85%; height: auto; position: relative; margin: auto; }
  #div-a-s4 { width: 100%; height: auto; position: relative; float: left; }
  #div-b-s4 { width: 100%; height: auto; position: relative; float: left; padding-left: unset; padding: 0px 20px; }
  #div-b-s4 h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 35px; padding-right: 240px; color: #121212; }
  #seletor-categoria-form-a { width: 315px; height: auto; position: relative; float: left; padding: 12px 10px 10px 20px; background-color: #60AE91; border: 1px solid #1B6B4E; border-radius: 50px; margin-top: -201px; }
  #faixa-sobre-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; font-size: 19px; color: #000; line-height: 27px; padding-right: 100px; }

  /* ==========================================================================
     Início atrativos Bora pra Mambaí
     ========================================================================== */
  #div-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; padding-top: 50px; padding-bottom: 583px; background-color: #226b50; overflow: hidden; }
  #view-div-atrativos { width: 100%; height: auto; position: relative; margin: auto; padding-left: 30px; }
  #conteudo-div-atrativos h3 { width: 380px; height: auto; position: relative; float: left; margin-top: 30px; margin-right: 0%; color: #fff; font-size: 32px; padding-right: 10px; }
  #conteudo-div-atrativos p { width: 380px; height: auto; position: relative; float: left; margin-top: -5px; color: #fff; font-size: 16px; }
  #faixa-controle-atrativos { width: 27%; height: auto; position: relative; float: right; margin-top: 22px; }
  #faixa-atrativos-ext { width: 100%; height: 470px; position: absolute; left: 0px; top: 250px; overflow: hidden;    /* display: none; */ }
  #faixa-conteudo-experiencias { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; overflow: hidden; background-color: #fff; }
  #view-contedo-experiencias { width: 95%; height: auto; position: relative; margin: auto; }
  #view-conteudo-txt-exp { width: 100%; height: auto; position: relative; float: left; }
  #view-conteudo-txt-exp h2 { width: 44%; height: auto; position: relative; float: left; margin-top: 94px; font-size: 33px; color: #000; margin-left: 3%; }
  #view-conteudo-txt-exp p { width: 50%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 18px; color: #000; line-height: 30px; }
  #bloco-ornamento-experiencias { width: 100%; height: auto; position: relative; float: left; margin-top: 390px; }
  #faixa-cards-experiencias-out { width: 6000px; height: 210px; position: absolute; top: -320px; left: -20px; overflow: hidden; }

  /*Slides ruas Mambai*/
  #slides-rua-mambai { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: 10px; }

  /*sobre História cultura e cerrado*/
  #s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 65px; background-color: #1B6B4E; }
  #view-s5 { width: 90%; height: auto; position: relative; margin: auto; }
  #view-s5 h5 { width: 30%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 39px; color: #fff; font-family: 'poppinssemibold'; }
  #view-s5 p { width: 65%; height: auto; position: relative; float: left; margin-left: 30px; margin-top: 72px; font-size: 16px; color: #fff; }
  #view-road-map { width: 95%; height: auto; position: relative; margin: auto; }
  #view-road-map h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; text-align: center; font-size: 36px; color: #1D1D1D; padding: 0px 20px; line-height: 49px; }
  #view-road-map p { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; text-align: center; font-size: 17px; color: #1D1D1D; padding: 0px 40px; }

  /*ínicio rodapé*/
  #rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 111px; padding-bottom: 130px; }
  .s-rodape { width: 50%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-b { width: 50%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-c { width: 50%; height: auto; position: relative; float: left; padding-top: 26px; }
  #logo-r-bora-pra-mambai { width: 145px; height: 65px; position: relative; float: left; margin-top: 19px; background: url('img/logo-rodape-bora-pra-mambai.png'); background-size: 145px; }
  #legenda-logo-r-bora-pra-mambai { width: 50%; height: auto; position: relative; float: left; margin-left: 16px; margin-top: 28px; font-size: 14px; color: #000; }
  #legenda-insta { width: 100px; height: auto; position: relative; float: left; margin-top: 29px; font-size: 16px; color: #000; }
  #icon-insta { width: 30px; height: 30px; position: relative; float: left; margin-left: -3px; margin-top: 33px; background: url('img/insta-icn.png'); background-size: 30px; }
  #endereco-instagram { width: auto; height: auto; position: relative; float: left; margin-top: 37px; margin-left: 14px; font-size: 17px; color: #000; }
  #legenda-logo-roots-cerrado { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 18px; font-size: 14px; color: #000; }
  #faixa-politica-privacidade { width: 50%; height: auto; position: relative; float: left; margin-top: -42px; }

  /*Janela Fomulário*/
  #janela-formulario { width: 750px; height: 550px; position: fixed; z-index: 99999; background-color: #fff; left: 50%; top: 250%; margin-left: -375px; margin-top: -340px; border-radius: 40px; }

  /* ==========================================================================
     Janela Atrativo
     ========================================================================== */
  #janela-atrativo { width: 720px; height: 650px; position: fixed; left: 50%; top: 150%; margin-left: -360px; margin-top: -325px; background-color: #1B6B4E; border-radius: 48px; z-index: 9999; }
  #cta-fechar-janela-atrativo { width: auto; height: auto; position: absolute; top: 44px; right: 20px; padding: 9px 41px 6px 15px; background-color: #DFFF69; font-size: 16px; color: #000; border-radius: 40px; cursor: pointer; z-index: 10; }
  #icn-fechar-janela-atrativo { width: 22px; height: 22px; position: absolute; right: 10px; top: 7px; background: url('img/fechar-janela-icn.png'); background-size: 22px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.6s ease; -moz-transition: -moz-transform 0.6s ease; -ms-transition: -ms-transform 0.6s ease; -o-transition: -o-transform 0.6s ease; transition: transform 0.6s ease; }
  #slide-janela-atrativo { width: 50%; height: 100%; position: relative; float: left; }
  #bloco-foto-slide-atrativo { width: 92%; height: 89%; position: relative; float: left; margin-left: 8.5%; margin-top: 9.5%; border-radius: 30px; overflow: hidden; }
  .foto-int-slide-atrativo { width: 420px; height: 610px; position: absolute; left: 50%; top: 50%; margin-left: -210px; margin-top: -286px; }
  #conteudo-janela-atrativo { width: 50%; height: 100%; position: relative; float: left; padding-left: 26px; }
  #conteudo-janela-atrativo h3 { width: 60%; height: auto; position: relative; float: left; margin-top: 46px; font-size: 22px; color: #fff; font-family: 'poppinsbold'; }
  #paragrafos-janela-atrativo { width: 100%; height: 52%; position: relative; float: left; margin-top: 0px; overflow-y: scroll; }
  #paragrafos-janela-atrativo p { width: 90%; height: auto; position: relative; float: left; margin-bottom: 0px; font-size: 14px; line-height: 21px; color: #fff; font-family: 'poppinslight'; }
  #box-info-atrativo { width: 85%; height: 117px; position: relative; float: left; margin-left: 14px; margin-top: 45px; border-radius: 23px; }
  .item-controle-inf-atrativo { width: 40px; height: 40px; position: absolute; top: 50%; margin-top: -20px; border-radius: 50%; z-index: 10; cursor: pointer; }
  .ctrl-e-inf-atr { left: -14px; }
  .ctrl-d-inf-atr { right: -14px; }
  .seta-ctrl-atr { width: 12px; height: 22px; position: absolute; top: 50%; margin-top: -11.5px; left: 50%; margin-left: -1.5px; background-repeat: no-repeat !important; }
  .seta-e-ctrl-atr { background: url('img/seta-e-inf-atrativo.png'); background-size: 12px; margin-left: -12px; }
  .seta-d-ctrl-atr { background: url('img/seta-e-inf-atrativo.png'); background-size: 12px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); }
  #alerta-texto-atrativo { position: absolute; bottom: 170px; left: 18px; z-index: 90; padding: 10px 20px 8px 20px; font-size: 14px; border-radius: 40px; display: none; opacity: 0; transition: opacity 0.4s ease; }
  .item-slide-inf-atrativo-txt { width: 100%; height: 100%; position: relative; float: left; padding: 0px 30px; }
  .div-conteudo-inf-atrativo h4 { width: 90%; height: auto; position: relative; float: left; margin-top: 18px; font-size: 17px; font-family: 'poppinssemibold'; }
  .div-conteudo-inf-atrativo p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 14px; }
}
@media only screen  
and (min-width:440px) 
and (max-width:750px) {

  .desktop { display: none; }
  .mobile { display: block; }
  #mascara { background-color: #226B50; }

  #cta-fixo-ecologica { width: 260px; height: auto; position: fixed; padding: 15px 120px 12px 20px; bottom: -330px; right: 50%; margin-right: -130px; background-color: #34906f; font-size: 15px; line-height: 19px; color: #fff; font-family: 'poppinssemibold'; border-radius: 16px; overflow: hidden; z-index: 999; opacity: 0; -webkit-animation: sobe-cta 1s cubic-bezier(.25, .8, .25, 1) forwards; -webkit-animation-delay: 4s; animation: sobe-cta 1s cubic-bezier(.25, .8, .25, 1) forwards; animation-delay: 3s; }
  #aviso-bora-pra-mambai { width: 90%; height: 270px; position: fixed; left: 5%; top: 250%; margin-top: -145px; margin-left: -0px; background-color: #fff; border: 1px solid #dadada; z-index: 999; border-radius: 20px; overflow: hidden; }
  #marcador-load { width: 0%; height: 10px; position: absolute; bottom: 0px; bottom: 0px; background-color: #60AE91; border-radius: 20px; }
  #faixa-gif-logo { width: 100%; height: auto; position: relative; float: left; margin-top: 11px; }
  #gif-logo-bora-pra-mambai { width: 180px; height: 103px; position: relative; margin: auto; background: url('img/gif-logo-bora-pra-mambai.gif'); background-size: 180px; }
  #faixa-txt-aviso-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; color: #000; font-size: 16px; text-align: center; padding: 0px 30px; }
  #faixa-ctas-janela-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; padding: 0px 20px; }
  .item-cta-bora-prambai { width: 46%; height: auto; position: relative; float: left; margin-left: 5px; margin-right: 5px; padding: 10px 20px; background-color: #006F4B; color: #fff; font-size: 14px; text-align: center; border-radius: 30px; }
  .item-cta-bora-prambai:hover { background-color: #005C3E; }
  .bg-cta-voltar { background-color: #FF6163; }
  .bg-cta-voltar:hover { background-color: #FF4446; }
  #menu-fixo { width: 90%; height: 65px; position: fixed; top: 20px; left: 5%; margin-left: -0px; background-color: #fff; border: 1px solid #DBEDD8; border-radius: 50px; z-index: 999; }
  .logo-bora-pra-mambai-menu-fixo { width: 97px; height: 50px; position: relative; float: left; margin-left: 11px; top: 11px; background: url(img/logo-bora-pra-mambai.png); background-size: 97px; background-repeat: no-repeat; }
  #cta-faz-parte { width: auto; height: auto; position: relative; float: right; margin-right: 15px; margin-top: 11px; padding: 11px 37px 8px 20px; color: #fff; font-size: 16px; border-radius: 203px; cursor: pointer; background-color: #006F4B; }
  #arrow-menu-fixo { width: 40px; height: 40px; position: absolute; right: 2px; top: 2px; background: url('img/arrow-menu-fixo.png'); background-size: 40px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
  #container-itens-menu-fixo { width: 645px; height: 70px; position: relative; float: left; margin-left: 30px; display: none; }
  #super-banner-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; padding-top: 0px; background-color: #226b4f; }
  #super-banner-int-bora-pramambai { width: 100%; height: auto; position: relative; margin: auto; max-width: 100%; border-radius: 0px; overflow: hidden; }
  #faixa-seletor-banner { width: 100%; height: auto; position: absolute; bottom: -32px; z-index: 20; }
  #faixa-int-seletor-banner { width: 520px; height: 80px; left: 50%; position: relative; margin: unset; margin-left: -260px; background-color: #82cf59; border-radius: 100px; padding-left: 25px; transform: scale(0.7); }

  /*Inicio da segunda sessão*/
  #segunda-sessao-lp { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; overflow: hidden; padding-bottom: 80px; background-color: #226b4f; border-radius: 40px 40px 0px 0px; z-index: 10; margin-top: -60px; }
  #view-segunda-sessao-lp { width: 95%; height: auto; min-height: unset; position: relative; margin: auto; }
  #faixa-int-seletor-banner ul li { width: auto; height: auto; position: relative; float: left; font-size: 25px; font-family: 'poppinssemibold'; color: #fff; margin-right: 0px; margin-left: 30px; margin-top: 23px; z-index: 30; cursor: pointer; }
  #mapa-e { width: 762px; height: 843px; position: absolute; left: -290px; top: 240px; background: url('img/mapa.png'); background-size: 442px; opacity: 0.1; background-repeat: no-repeat; }
  #mapa-d { width: 762px; height: 843px; position: absolute; right: -620px; top: -60px; background: url('img/mapa.png'); background-size: 299px; opacity: 0.1; background-repeat: no-repeat; }
  #chamada-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 96px; }
  #chamada-s2-lp h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 27px; color: #ffffff; padding: 0px 10px; line-height: 32px; }
  #chamada-s2-lp p { width: 100%; height: auto; position: relative; float: left; margin-top: -2px; text-align: center; font-size: 17px; color: #ffffff; padding: 0px 21px; }
  #chamada-s2-lp .marca { background: #fff; color: #4bb397; padding: 3px 15px 0px 15px; border-radius: 40px; display: inline-block; }
  #faixa-trilha-topo { width: 100%; position: relative; float: left; margin-top: 70px; line-height: 0; }
  #item-ft-trila-1 { width: 70px; height: 70px; position: absolute; left: 5%; top: -8px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-1 { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background-color: green; }
  #item-ft-trila-2 { width: 70px; height: 70px; position: absolute; left: 31%; top: -27px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-2 { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background-color: green; }
  #item-ft-trila-3 { width: 60px; height: 60px; position: absolute; left: 55%; top: -7px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-3 { width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px; background-color: green; }
  #item-ft-trila-4 { width: 70px; height: 70px; position: absolute; left: 79%; top: -14px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-4 { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background-color: green; }
  #view-2-sessao-lp { width: 100%; height: auto; position: relative; margin: auto; }
  #faixa-s2-sessao-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; }
  #chamada-view-2-sessao-lp { width: 100%; height: auto; position: relative; float: left; padding: 0px 30px; }
  #chamada-view-2-sessao-lp h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 27px; text-align: center; padding: 0px 50px; color: #ffffff; }
  #cards-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
  .item-card-s2 { width: 100%; height: auto; position: relative; float: left; margin-right: 0%; margin-bottom: 10px; padding-bottom: 28px; background-color: #287358; border-radius: 20px; }
  .faixa-foto-card-s2 { width: auto; height: auto; position: relative; float: left; margin-top: 30px; }
  .bloco-ft-card-s2 { width: 130px; height: 110px; position: relative; margin: unset; float: left; margin-left: 20px; background-color: #E7FAE4; border-radius: 12px; overflow: hidden; }
  .foto-int-card-s2 { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; }
  .legenda-foto-card { width: 100%; height: auto; position: absolute; bottom: 59px; left: 0px; font-size: 16px; text-align: center; color: #fff; font-family: 'poppinssemibold'; z-index: 10; }
  .faixa-sobre-card { width: 60%; height: auto; position: relative; float: left; margin-top: 0px; }
  .faixa-sobre-card p { width: 100%; height: auto; position: relative; float: left; padding: 0px 14px; font-size: 13px; line-height: 20px; margin-top: 37px; color: #fff; margin-left: 2px; font-family: 'poppinslight'; }

  /*Terceira sessão LP*/
  #div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: -40px; padding-bottom: 60px; background-color: #fffefa; border-radius: 40px 40px 0px 0px; z-index: 40; }
  #view-div-s3 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; padding: 0px 110px; margin-top: 60px; font-size: 27px; color: #121212; text-align: center; }
  #view-div-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 16px; color: #121212; text-align: center; padding: 0px 50px; }
  #faixa-cards-beneficios { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #box-cards-beneficios-int { width: 90%; height: auto; position: relative; margin: auto; padding-bottom: 150px; }

  /* item card beneficio */
  .item-card-beneficio { width: 100%; height: auto; position: relative; float: left; margin-bottom: 5px; padding: 25px 60px 25px 30px; font-size: 15px; color: #ffffff; border-radius: 20px; background-color: #226b50; cursor: pointer; transition: background-color .3s, color .3s; }
  .arrow-card-beneficio { width: 30px; height: 30px; position: absolute; right: 20px; top: 50%; margin-top: -15px; background-color: #7bc355; border-radius: 50%; overflow: hidden; }
  .arrow-int-card-beneficio { width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; margin-left: -13px; margin-top: -14px; background: url('img/seta-d.png'); background-size: 30px; }

  /*Inicio quarta sessão*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #fffefa; padding-bottom: 70px; }
  #view-div-s4 { width: 90%; height: auto; position: relative; margin: auto; }
  #div-a-s4 { width: 100%; height: auto; position: relative; float: left; }
  #div-foto-s4 { width: 100%; height: auto; position: relative; float: left; border-radius: 30px; overflow: hidden; }
  #div-b-s4 { width: 100%; height: auto; position: relative; float: left; padding-left: 0px; }
  #div-b-s4 h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 28px; padding-right: unset; padding: 0px 70px; text-align: center; color: #121212; }
  #seletor-categoria-form-a { width: 315px; height: auto; left: 50%; position: relative; float: left; margin-left: -157.5px; padding: 12px 10px 10px 20px; background-color: #60AE91; border: 1px solid #1B6B4E; border-radius: 50px; margin-top: -193px; }
  #faixa-sobre-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #000; line-height: 24px; padding-right: 0px; text-align: center; }
  #cta-fazer-parte { width: 236px; height: auto; position: relative; float: unset; margin: auto; padding: 14px 20px 10px 24px; background-color: #1B6B4E; color: #fff; font-size: 18px; border-radius: 50px; cursor: pointer; }

  /* ==========================================================================
     Início atrativos Bora pra Mambaí
     ========================================================================== */
  #div-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: -23px; padding-top: 50px; padding-bottom: 80px; background-color: #226b50; overflow: hidden; border-radius: 40px 40px 0px 0px; }
  #view-div-atrativos { width: 100%; height: auto; position: relative; margin: auto; padding-left: unset; padding: 0px 30px; }
  #conteudo-div-atrativos h3 { width: 310px; height: auto; position: relative; float: left; margin-top: 0px; margin-right: 0%; color: #fff; font-size: 28px; padding-right: 10px; }
  #conteudo-div-atrativos p { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; color: #fff; font-size: 16px; }
  #faixa-controle-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: 1px; display: none; }
  .item-controle-atrativo { width: 50px; height: 50px; position: relative; float: left; margin-right: 20px; opacity: 0.8; cursor: pointer; }
  .ctrl-e-a { background: url('img/ctrl-e.png'); background-size: 50px; background-repeat: no-repeat; }
  .ctrl-e-b { background: url('img/ctrl-d.png'); background-size: 50px; background-repeat: no-repeat; }
  #faixa-atrativos-ext { width: 100%; height: 470px; position: absolute; left: 390px; top: 100px; overflow: hidden; display: none; }
  #faixa-atrativos-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 15px; padding-left: 30px; }

  /*item card atrativo mobile*/
  .item-card-atrativo { width: 320px; height: 450px; position: relative; float: left; margin-right: 10px; background-color: #1B6B4E; border-radius: 20px; overflow: hidden;  /* 👇 aqui a transição */ transition: all 1.5s ease; }
  .item-card-atrativo:hover .box-legenda-atrativo { background-color: #228863; }
  .foto-atrativo-card { width: 330px; height: 460px; position: absolute; left: 50%; top: 50%; margin-left: -165px; margin-top: -230px; }
  .box-legenda-atrativo { width: 90%; height: 80px; position: absolute; bottom: 20px; left: 5%; background-color: #1B6B4E; border-radius: 20px; z-index: 20; }
  .box-legenda-atrativo h5 { width: 95%; height: auto; position: relative; float: left; padding: 10px 15px; color: #fff; font-size: 15px; margin-top: 14px; line-height: 18px; }
  .box-legenda-atrativo h6 { width: 60%; height: auto; position: absolute; bottom: 15px; left: 15px; font-size: 12px; color: #fff; }
  .cta-ver-mais-card-atrativo { width: auto; height: auto; position: absolute; right: 20px; bottom: 15px; color: #fff; font-size: 12px; font-family: 'poppinsbold'; }

  /* ==========================================================================
     Início Experiências
     ========================================================================== */
  #div-experiencias { width: 100%; height: auto; position: relative; float: left; margin-top: -40px; background-color: #fff; overflow: hidden; border-radius: 40px 40px 0px 0px; z-index: 90; }
  #faixa-conteudo-experiencias { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; overflow: hidden; background-color: #fff; }
  #view-contedo-experiencias { width: 100%; height: auto; position: relative; margin: auto; padding: 0px 25px; }
  #view-conteudo-txt-exp { width: 100%; height: auto; position: relative; float: left; }
  #view-conteudo-txt-exp h2 { width: 100%; height: auto; position: relative; margin-top: 0px; font-size: 30px; padding-right: 50px; color: #000; }
  #view-conteudo-txt-exp p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #000; line-height: 27px; }
  #slides-rua-mambai { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: 60px; }
  .faixa-ornamento-a-atracoes { width: 4000px; height: 72px; position: absolute; left: 0px; top: 10px; background: url('img/ornamento-atracoes-c.jpg'); background-repeat: repeat-x; background-size: 1500px; }
  .faixa-ornamento-b-atracoes { width: 5000px; height: 72px; position: absolute; left: -2500px; top: 70px; background: url('img/ornamento-atracoes-d.jpg'); background-repeat: repeat-x; background-size: 1500px; }

  /*sobre História cultura e cerrado*/
  #s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 110px; background-color: #1B6B4E; }
  #view-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-s5 h5 { width: 60%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 34px; color: #fff; font-family: 'poppinssemibold'; padding: 0px 30px; }
  #view-s5 p { width: 75%; height: auto; position: relative; float: left; margin-left: 30px; margin-top: 5px; font-size: 14px; color: #fff; }
  #road-map { width: 100%; height: auto; position: relative; float: left; margin-top: -70px; background-color: #fff; border-radius: 40px 40px 0px 0px; }
  #view-road-map { width: 94%; height: auto; position: relative; margin: auto; }
  #view-road-map h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 85px; text-align: left; font-size: 32px; color: #1D1D1D; padding: 0px 20px; line-height: 37px; }
  #view-road-map p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; text-align: left; font-size: 17px; color: #1D1D1D; padding: 0px 20px; }
  #view-controles-road-map { width: 130px; height: auto; position: relative; margin: auto; }
  .item-controle-rdm { width: 55px; height: 52px; position: relative; float: left; margin-left: 10px; cursor: pointer; opacity: 0.9; background-repeat: no-repeat !important; }
  .ctrl-e-rdm { background: url('img/ctrl-e-rdm.png'); background-size: 55px; }
  .ctrl-d-rdm { background: url('img/ctrl-d-rdm.png'); background-size: 55px; }

  /*Inicio cards road map*/
  #faixa-cards-road-map { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-left: 0px; }
  #faixa-controles-road-map { width: 100%; height: auto; position: relative; float: left; display: none; }

  /*Card road mamp*/
  .card-raod-map { width: auto; height: 340px; position: relative; float: left; margin-left: 0px; margin-top: 20px; background-color: #1B6B4E; border-radius: 20px; }
  .faixa-foto-card-rdm { width: 100%; height: auto; position: relative; float: left; margin-top: -50px; }
  .foto-card-rdm { width: 50%; height: 140px; position: relative; float: left; margin-left: 20px !important; margin: unset; background-color: #dadada; border-radius: 20px; overflow: hidden; }
  .foto-int-card-rdm { width: 230px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -115px; margin-top: -71px; }
  .conteudo-card-rdm h3 { width: 80%; height: auto; position: relative; float: left; margin-top: 10px; color: #E7FAE4; font-size: 20px; padding-right: 30px; }
  .conteudo-card-rdm p { width: 95%; height: auto; position: relative; float: left; margin-top: -5px; color: #E7FAE4; font-size: 14px; font-family: 'poppinslight'; }
  .numero-card { width: 45px; height: 45px; position: relative; float: left; background-color: #f0ff00; border-radius: 50%; }
  .numer-int-txt-card { width: 100%; height: auto; position: relative; float: left; margin-top: 2px; font-size: 24px; color: #1B6B4E; text-align: center; font-family: 'poppinssemibold'; }
  .legenda-data-card { width: auto; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 2px; padding: 12px 20px 9px 20px; background-color: #E7FAE4; color: #1B6B4E; border-radius: 30px; font-size: 14px; font-family: 'poppinssemibold'; }

  /*ínicio rodapé*/
  #icone-fotografo { width: 80px; height: 80px; position: relative; left: 0%; float: left; margin-left: 0px; top: 70px; margin-top: 14px; background: url('img/fotografo.png'); background-size: 80px; }
  #txt-credito-ecologica { width: 74%; height: auto; position: relative; margin: unset; float: left; padding-top: 31px; padding-left: 90px; font-size: 11px; color: #000; text-align: left; }
  #rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; padding-bottom: 120px; }
  #icone-fotografo { width: 80px; height: 80px; position: relative; left: unset; margin-left: 0px; top: 70px; margin-top: 14px; background: url('img/fotografo.png'); background-size: 80px; }
  #txt-credito-ecologica { width: 70%; height: auto; position: absolute; margin: unset; float: unset; right: 0px; padding-top: unset; top: 30px; font-size: 12px; color: #000; padding-left: 10px; text-align: left; }
  #view-rodape { width: 79%; height: auto; position: relative; max-width: 1500px; margin: auto; border-top: 1px solid #D2D2D2; }
  .s-rodape { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-b { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-c { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; }
  #legenda-logo-r-bora-pra-mambai { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 20px; font-size: 14px; color: #000; }
  #legenda-logo-roots-cerrado { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 26px; font-size: 14px; color: #000; }
  #faixa-politica-privacidade { width: 100%; height: auto; position: relative; float: left; margin-top: 28px; overflow: hidden; }
  #link-politica-privacidade { width: 270px; height: auto; left: 50%; position: relative; float: left; margin: unset; margin-left: -126px; }
  #seta-link { width: 50px; height: 50px; position: relative; float: left; margin-left: -1px; margin-top: -12px; background: url('img/seta-politica.png'); background-size: 50px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }

  /*Inicio Janelas*/
  #janela-beneficio-out { width: 100%; height: 0%; position: fixed; right: 0px; z-index: 9999; overflow: hidden; }
  #janela-beneficio { width: 100%; height: 100%; position: absolute; right: -120%; background-color: #1B6B4E; border-radius: 0px 0px 0px 0px; }
  #foto-janela-beneficio { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
  #foto-janela-beneficio-int { width: 310px; height: 280px; position: relative; margin: auto; border-radius: 30px; overflow: hidden; }
  #conteudo-janela-benificio { width: 100%; height: 100%; position: relative; float: left; margin-top: 10px; padding: 0px 55px 400px 65px; overflow-y: scroll; }
  #conteudo-janela-benificio h4 { width: 90%; height: auto; position: relative; font-size: 24px; color: #E7FAE4; }
  #conteudo-janela-benificio p { width: 100%; height: auto; position: relative; margin-top: 5px; font-size: 16px; color: #E7FAE4; font-family: 'poppinslight'; }

  /*Janela formulário*/
  #janela-formulario { width: 90%; height: 550px; position: fixed; z-index: 99999; background-color: #fff; left: 5%; top: 250%; margin-left: 0px; margin-top: -270px; border-radius: 40px; }
  #div-campos-formulario { width: 100%; height: auto; position: relative; float: left; }
  #div-chamada-formulario-janela { width: 48%; height: auto; position: relative; float: left; display: none; }

  /* ==========================================================================
     Janela Atrativo
     ========================================================================== */
  #janela-atrativo { width: 100%; height: 100%; position: fixed; left: 0%; top: 150%; margin-left: 0px; margin-top: 0px; background-color: #1B6B4E; border-radius: 0px; overflow-y: scroll; z-index: 9999; }
  #cta-fechar-janela-atrativo { width: 120px; height: auto; position: fixed; top: 50px; bottom: unset; right: 50%; margin-right: -60px; padding: 10px 40px 6px 20px; background-color: #DFFF69; font-size: 18px; color: #000; border-radius: 40px; cursor: pointer; z-index: 10; }
  #slide-janela-atrativo { width: 100%; height: 520px; position: relative; float: left; }
  #bloco-foto-slide-atrativo { width: 90%; height: 90%; position: relative; float: left; margin-left: 5%; margin-top: 33px; border-radius: 30px; overflow: hidden; }
  .foto-int-slide-atrativo { width: 420px; height: 530px; position: absolute; left: 50%; top: 50%; margin-left: -210px; margin-top: -286px; }
  #cta-slide-visite-com-a-ecologica { width: 300px; height: auto; position: absolute; left: 50%; margin-left: -150px; bottom: 30px; padding: 13px 0px 10px 23px; font-size: 17px; color: #000; background-color: #DEFF68; border-radius: 40px; cursor: pointer; z-index: 90; }
  #seta-cta-visite-com-a-ecologica { width: 40px; height: 40px; position: absolute; right: 10px; top: 5px; background: url('img/seta-cta-ecologica-janela.png'); background-size: 40px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  #conteudo-janela-atrativo { width: 100%; height: auto; position: relative; float: left; padding-left: 30px; }
  .div-conteudo-inf-atrativo { width: 100%; height: auto; position: relative; float: left; }
  #conteudo-janela-atrativo h3 { width: 90%; height: auto; position: relative; float: left; margin-top: 11px; font-size: 36px; color: #fff; font-family: 'poppinsbold'; }
  #paragrafos-janela-atrativo { width: 100%; height: auto; position: relative; float: left; margin-top: -25px; overflow-y: unset; padding-bottom: 190px; }
  #box-info-atrativo { width: 80%; height: 117px; position: fixed; float: unset; margin-left: 2%; margin-top: unset; border-radius: 15px; bottom: 30px; }
  #bloco-foto-slide-atrativo { width: 380px; height: 90%; left: 50%; position: relative; float: left; margin-left: -190px; margin-top: 30px; border-radius: 30px; overflow: hidden; }
  .item-slide-inf-atrativo-txt { width: 100%; height: 100%; position: relative; float: left; padding: 0px 30px; }
  .div-conteudo-inf-atrativo h4 { width: 90%; height: auto; position: relative; float: left; margin-top: 23px; font-size: 18px; font-family: 'poppinssemibold'; }
  .div-conteudo-inf-atrativo p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 15px; }

  .fix-faixa-ornamento-experiencias { width: 100%; height: 150px; position: relative; float: left; margin-top: 60px !important; margin-bottom: -20px; overflow: hidden; }

}
@media only screen  
and (min-width:370px) 
and (max-width:440px) {

  .desktop { display: none; }
  .mobile { display: block; }
  #mascara { background-color: #226B50; }
  #cta-fixo-ecologica { width: 260px; height: auto; position: fixed; padding: 15px 120px 12px 20px; bottom: -330px; right: 50%; margin-right: -130px; background-color: #34906f; font-size: 15px; line-height: 19px; color: #fff; font-family: 'poppinssemibold'; border-radius: 16px; overflow: hidden; z-index: 999; opacity: 0; -webkit-animation: sobe-cta 1s cubic-bezier(.25, .8, .25, 1) forwards; -webkit-animation-delay: 4s; animation: sobe-cta 1s cubic-bezier(.25, .8, .25, 1) forwards; animation-delay: 3s; }
 
  #aviso-bora-pra-mambai { width: 90%; height: 270px; position: fixed; left: 5%; top: 250%; margin-top: -145px; margin-left: -0px; background-color: #fff; border: 1px solid #dadada; z-index: 999; border-radius: 20px; overflow: hidden; }
  #marcador-load { width: 0%; height: 10px; position: absolute; bottom: 0px; bottom: 0px; background-color: #60AE91; border-radius: 20px; }
  #faixa-gif-logo { width: 100%; height: auto; position: relative; float: left; margin-top: 11px; }
  #gif-logo-bora-pra-mambai { width: 180px; height: 103px; position: relative; margin: auto; background: url('img/gif-logo-bora-pra-mambai.gif'); background-size: 180px; }
  #faixa-txt-aviso-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; color: #000; font-size: 14px; text-align: center; padding: 0px 20px; }
  #faixa-ctas-janela-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; padding: 0px 20px; }
  
  .item-cta-bora-prambai { width: 46%; height: auto; position: relative; float: left; margin-left: 5px; margin-right: 5px; padding: 10px 20px; background-color: #006F4B; color: #fff; font-size: 14px; text-align: center; border-radius: 30px; }
  .item-cta-bora-prambai:hover { background-color: #005C3E; }
  .bg-cta-voltar { background-color: #FF6163; }
  .bg-cta-voltar:hover { background-color: #FF4446; }
  #menu-fixo { width: 90%; height: 65px; position: fixed; top: 20px; left: 5%; margin-left: -0px; background-color: #fff; border: 1px solid #DBEDD8; border-radius: 50px; z-index: 999; }
  .logo-bora-pra-mambai-menu-fixo { width: 97px; height: 50px; position: relative; float: left; margin-left: 11px; top: 11px; background: url(img/logo-bora-pra-mambai.png); background-size: 97px; background-repeat: no-repeat; }
  #cta-faz-parte { width: auto; height: auto; position: relative; float: right; margin-right: 15px; margin-top: 11px; padding: 11px 37px 8px 20px; color: #fff; font-size: 16px; border-radius: 203px; cursor: pointer; background-color: #006F4B; }
  #arrow-menu-fixo { width: 40px; height: 40px; position: absolute; right: 2px; top: 2px; background: url('img/arrow-menu-fixo.png'); background-size: 40px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
  #container-itens-menu-fixo { width: 645px; height: 70px; position: relative; float: left; margin-left: 30px; display: none; }
  #super-banner-bora-pra-mambai { width: 100%; height: auto; position: relative; float: left; padding-top: 0px; background-color: #226b4f; }
  #super-banner-int-bora-pramambai { width: 100%; height: auto; position: relative; margin: auto; max-width: 100%; border-radius: 0px; overflow: hidden; }
  #faixa-seletor-banner { width: 100%; height: auto; position: absolute; bottom: -34px; z-index: 20; scale: 0.9; }
  #faixa-int-seletor-banner { width: 520px; height: 80px; left: 50%; position: relative; margin: unset; margin-left: -260px; background-color: #82cf59; border-radius: 100px; padding-left: 25px; transform: scale(0.7); }

  /*Inicio da segunda sessão*/
  #segunda-sessao-lp { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; overflow: hidden; padding-bottom: 80px; background-color: #226b4f; border-radius: 40px 40px 0px 0px; z-index: 10; margin-top: -60px; }
  #faixa-int-seletor-banner ul li { width: auto; height: auto; position: relative; float: left; font-size: 25px; font-family: 'poppinssemibold'; color: #fff; margin-right: 0px; margin-left: 30px; margin-top: 23px; z-index: 30; cursor: pointer; }
  #view-segunda-sessao-lp { width: 95%; height: auto; min-height: unset; position: relative; margin: auto; }
  #mapa-e { width: 762px; height: 843px; position: absolute; left: -290px; top: 240px; background: url('img/mapa.png'); background-size: 442px; opacity: 0.1; background-repeat: no-repeat; }
  #mapa-d { width: 762px; height: 843px; position: absolute; right: -620px; top: -60px; background: url('img/mapa.png'); background-size: 299px; opacity: 0.1; background-repeat: no-repeat; }
  #chamada-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
  #chamada-s2-lp h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 22px; color: #ffffff; padding: 0px 10px; line-height: 32px; }
  #chamada-s2-lp p { width: 100%; height: auto; position: relative; float: left; margin-top: -2px; text-align: center; font-size: 14px; color: #ffffff; padding: 0px 20px; }
  #chamada-s2-lp .marca { background: #fff; color: #4bb397; padding: 3px 15px 0px 15px; border-radius: 40px; display: inline-block; }
  #faixa-trilha-topo { width: 100%; position: relative; float: left; margin-top: 70px; line-height: 0; }
  #item-ft-trila-1 { width: 70px; height: 70px; position: absolute; left: 5%; top: -8px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-1 { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background-color: green; }
  #item-ft-trila-2 { width: 70px; height: 70px; position: absolute; left: 31%; top: -27px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-2 { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background-color: green; }
  #item-ft-trila-3 { width: 60px; height: 60px; position: absolute; left: 55%; top: -7px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-3 { width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px; background-color: green; }
  #item-ft-trila-4 { width: 70px; height: 70px; position: absolute; left: 79%; top: -14px; background-color: #fff; outline: solid 6px #2b604c; border-radius: 50%; overflow: hidden; }
  #ftt-int-4 { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background-color: green; }
  #view-2-sessao-lp { width: 100%; height: auto; position: relative; margin: auto; }
  #faixa-s2-sessao-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; }
  #chamada-view-2-sessao-lp { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; }
  #chamada-view-2-sessao-lp h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 22px; text-align: center; padding: 0px 60px; color: #ffffff; }
  #cards-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; }
  .item-card-s2 { width: 100%; height: auto; position: relative; float: left; margin-right: 0%; margin-bottom: 10px; padding-bottom: 28px; background-color: #287358; border-radius: 20px; }
  .faixa-foto-card-s2 { width: auto; height: auto; position: relative; float: left; margin-top: 30px; }
  .bloco-ft-card-s2 { width: 130px; height: 110px; position: relative; margin: unset; float: left; margin-left: 20px; background-color: #E7FAE4; border-radius: 12px; overflow: hidden; }
  .foto-int-card-s2 { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; }
  .legenda-foto-card { width: 100%; height: auto; position: absolute; bottom: 59px; left: 0px; font-size: 16px; text-align: center; color: #fff; font-family: 'poppinssemibold'; z-index: 10; }
  .faixa-sobre-card { width: 55%; height: auto; position: relative; float: left; margin-top: 0px; }
  .faixa-sobre-card p { width: 100%; height: auto; position: relative; float: left; padding: 0px 14px; font-size: 13px; line-height: 20px; margin-top: 28px; color: #fff; margin-left: 2px; font-family: 'poppinslight'; }

  /*Terceira sessão LP*/
  #div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: -40px; padding-bottom: 50px; background-color: #fffefa; border-radius: 40px 40px 0px 0px; z-index: 40; }
  #view-div-s3 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; padding: 0px 30px; margin-top: 51px; font-size: 24px; color: #121212; text-align: center; }
  #view-div-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -13px; font-size: 16px; color: #121212; text-align: center; padding: 0px 20px; }
  #faixa-cards-beneficios { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #box-cards-beneficios-int { width: 90%; height: auto; position: relative; margin: auto; padding-bottom: 150px; }

  /* item card beneficio */
  .item-card-beneficio { width: 100%; height: auto; position: relative; float: left; margin-bottom: 5px; padding: 25px 60px 25px 30px; font-size: 15px; color: #ffffff; border-radius: 20px; background-color: #226b50; cursor: pointer; transition: background-color .3s, color .3s; }
  .arrow-card-beneficio { width: 30px; height: 30px; position: absolute; right: 20px; top: 50%; margin-top: -15px; background-color: #7bc355; border-radius: 50%; overflow: hidden; }
  .arrow-int-card-beneficio { width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; margin-left: -13px; margin-top: -14px; background: url('img/seta-d.png'); background-size: 30px; }

  /*Inicio quarta sessão*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #fffefa; padding-bottom: 70px; }
  #view-div-s4 { width: 90%; height: auto; position: relative; margin: auto; }
  #div-a-s4 { width: 100%; height: auto; position: relative; float: left; }
  #div-foto-s4 { width: 100%; height: auto; position: relative; float: left; border-radius: 30px; overflow: hidden; }
  #div-b-s4 { width: 100%; height: auto; position: relative; float: left; padding-left: 0px; }
  #div-b-s4 h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 24px; padding-right: unset; padding: 0px 30px; text-align: center; color: #121212; }
  #seletor-categoria-form-a { width: 315px; height: auto; left: 50%; position: relative; float: left; margin-left: -157.5px; padding: 12px 10px 10px 20px; background-color: #60AE91; border: 1px solid #1B6B4E; border-radius: 50px; margin-top: -173px; }
  #faixa-sobre-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #000; line-height: 24px; padding-right: 0px; text-align: center; }
  #cta-fazer-parte { width: 236px; height: auto; position: relative; float: unset; margin: auto; padding: 14px 20px 10px 24px; background-color: #1B6B4E; color: #fff; font-size: 18px; border-radius: 50px; cursor: pointer; }

  /* ==========================================================================
     Início atrativos Bora pra Mambaí
     ========================================================================== */
  #div-atrativos { width: 100%; height: 100%; position: relative; float: left; margin-top: -23px; padding-top: 90px; padding-bottom: 142px; background-color: #226b50; overflow: hidden; border-radius: 40px 40px 0px 0px; }
  #view-div-atrativos { width: 100%; height: auto; position: relative; margin: auto; padding-left: unset; padding: 0px 30px; }
  #conteudo-div-atrativos h3 { width: 270px; height: auto; position: relative; float: left; margin-top: 0px; margin-right: 0%; color: #fff; font-size: 28px; padding-right: 10px; }
  #conteudo-div-atrativos p { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; color: #fff; font-size: 17px; }
  #faixa-controle-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: 1px; }
  .item-controle-atrativo { width: 50px; height: 50px; position: relative; float: left; margin-right: 20px; opacity: 0.8; cursor: pointer; }
  .ctrl-e-a { background: url('img/ctrl-e.png'); background-size: 50px; background-repeat: no-repeat; }
  .ctrl-e-b { background: url('img/ctrl-d.png'); background-size: 50px; background-repeat: no-repeat; }
  #faixa-atrativos-ext { width: 100%; height: 470px; position: absolute; left: 390px; top: 100px; overflow: hidden; display: none; }
  #faixa-atrativos-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; padding-left: 30px; }

  /*item card atrativo mobile*/
  #faixa-controle-atrativos { width: 100%; height: auto; position: relative; float: left; margin-top: 1px; display: none; }
  .item-card-atrativo { width: 320px; height: 450px; position: relative; float: left; margin-right: 10px; background-color: #1B6B4E; border-radius: 20px; overflow: hidden;  /* 👇 aqui a transição */ transition: all 1.5s ease; }
  .item-card-atrativo:hover .box-legenda-atrativo { background-color: #228863; }
  .foto-atrativo-card { width: 330px; height: 460px; position: absolute; left: 50%; top: 50%; margin-left: -165px; margin-top: -230px; }
  .box-legenda-atrativo { width: 90%; height: 68px; position: absolute; bottom: 20px; left: 5%; background-color: #1B6B4E; border-radius: 20px; z-index: 20; }
  .box-legenda-atrativo h5 { width: 95%; height: auto; position: relative; float: left; padding: 10px 15px; color: #fff; font-size: 15px; margin-top: 8px; line-height: 18px; }
  .box-legenda-atrativo h6 { width: 60%; height: auto; position: absolute; bottom: 11px; left: 15px; font-size: 12px; color: #fff; }
  .cta-ver-mais-card-atrativo { width: auto; height: auto; position: absolute; right: 20px; bottom: 15px; color: #fff; font-size: 12px; font-family: 'poppinsbold'; }

  /* ==========================================================================
     Início Experiências
     ========================================================================== */
  #div-experiencias { width: 100%; height: auto; position: relative; float: left; margin-top: -40px; background-color: #fff; overflow: hidden; border-radius: 40px 40px 0px 0px; z-index: 90; }
  #faixa-conteudo-experiencias { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; overflow: hidden; background-color: #fff; }
  #view-contedo-experiencias { width: 100%; height: auto; position: relative; margin: auto; padding: 0px 25px; }
  #view-conteudo-txt-exp { width: 100%; height: auto; position: relative; float: left; }
  #view-conteudo-txt-exp h2 { width: 100%; height: auto; position: relative; margin-top: 0px; font-size: 24px; padding-right: 50px; color: #000; }
  #view-conteudo-txt-exp p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 16px; color: #000; line-height: 27px; }
  #slides-rua-mambai { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: 60px; }
  .faixa-ornamento-a-atracoes { width: 4000px; height: 72px; position: absolute; left: 0px; top: 10px; background: url('img/ornamento-atracoes-c.jpg'); background-repeat: repeat-x; background-size: 1420px; }
  .faixa-ornamento-b-atracoes { width: 5000px; height: 72px; position: absolute; left: -2500px; top: 70px; background: url('img/ornamento-atracoes-d.jpg'); background-repeat: repeat-x; background-size: 1500px; }

  /*sobre História cultura e cerrado*/
  #s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 140px; background-color: #1B6B4E; }
  #view-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-s5 h5 { width: 60%; height: auto; position: relative; float: left; margin-top: 70px; font-size: 33px; color: #fff; font-family: 'poppinssemibold'; padding: 0px 30px; }
  #view-s5 p { width: 80%; height: auto; position: relative; float: left; margin-left: 30px; margin-top: 5px; font-size: 16px; color: #fff; }
  #road-map { width: 100%; height: auto; position: relative; float: left; margin-top: -70px; background-color: #fff; border-radius: 40px 40px 0px 0px; }
  #view-road-map { width: 94%; height: auto; position: relative; margin: auto; }
  #view-road-map h1 { width: 70%; height: auto; position: relative; float: left; margin-top: 60px; text-align: left; font-size: 24px; color: #1D1D1D; padding: 0px 20px; line-height: 30px; }
  #view-road-map p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; text-align: left; font-size: 16px; color: #1D1D1D; padding: 0px 20px; }
  #view-controles-road-map { width: 130px; height: auto; position: relative; margin: auto; }
  .item-controle-rdm { width: 55px; height: 52px; position: relative; float: left; margin-left: 10px; cursor: pointer; opacity: 0.9; background-repeat: no-repeat !important; }
  .ctrl-e-rdm { background: url('img/ctrl-e-rdm.png'); background-size: 55px; }
  .ctrl-d-rdm { background: url('img/ctrl-d-rdm.png'); background-size: 55px; }

  /*Inicio cards road map*/
  #faixa-cards-road-map { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-left: 0px; }
  #faixa-controles-road-map { width: 100%; height: auto; position: relative; float: left; display: none; }

  /*Card road mamp*/
  .card-raod-map { width: auto; height: 450px; position: relative; float: left; margin-left: 0px; margin-top: 30px; background-color: #1B6B4E; border-radius: 20px; }
  .faixa-foto-card-rdm { width: 100%; height: auto; position: relative; float: left; margin-top: -50px; }
  .foto-card-rdm { width: 50%; height: 140px; position: relative; float: left; margin-left: 20px !important; margin: unset; background-color: #dadada; border-radius: 20px; overflow: hidden; }
  .foto-int-card-rdm { width: 230px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -115px; margin-top: -71px; }
  .conteudo-card-rdm h3 { width: 95%; height: auto; position: relative; float: left; margin-top: 10px; color: #E7FAE4; font-size: 20px; padding-right: 30px; }
  .conteudo-card-rdm p { width: 95%; height: auto; position: relative; float: left; margin-top: -5px; color: #E7FAE4; font-size: 14px; font-family: 'poppinslight'; }
  .numero-card { width: 45px; height: 45px; position: relative; float: left; background-color: #f0ff00; border-radius: 50%; }
  .numer-int-txt-card { width: 100%; height: auto; position: relative; float: left; margin-top: 2px; font-size: 24px; color: #1B6B4E; text-align: center; font-family: 'poppinssemibold'; }
  .legenda-data-card { width: auto; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 2px; padding: 12px 20px 9px 20px; background-color: #E7FAE4; color: #1B6B4E; border-radius: 30px; font-size: 14px; font-family: 'poppinssemibold'; }

  /*ínicio rodapé*/
  #rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; padding-bottom: 120px; }
  #icone-fotografo { width: 80px; height: 80px; position: relative; left: unset; margin-left: 0px; top: 70px; margin-top: 14px; background: url('img/fotografo.png'); background-size: 80px; }
  #txt-credito-ecologica { width: 70%; height: auto; position: absolute; margin: unset; float: unset; right: 0px; padding-top: unset; top: 30px; font-size: 12px; color: #000; padding-left: 10px; text-align: left; }
  #view-rodape { width: 89%; height: auto; position: relative; max-width: 1500px; margin: auto; border-top: 1px solid #D2D2D2; }
  #icon-insta { width: 40px; height: 40px; position: relative; float: left; margin-left: 9px; margin-top: 23px; background: url('img/insta-icn.png'); background-size: 40px; }
  #endereco-instagram { width: auto; height: auto; position: relative; float: left; margin-top: 33px; margin-left: 18px; font-size: 16px; color: #000; }
  .s-rodape { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-b { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; }
  .s-rodape-c { width: 100%; height: auto; position: relative; float: left; padding-top: 20px; }
  #legenda-logo-r-bora-pra-mambai { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 20px; font-size: 14px; color: #000; }
  #legenda-logo-roots-cerrado { width: 50%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 20px; font-size: 14px; color: #000; }
  #faixa-politica-privacidade { width: 100%; height: auto; position: relative; float: left; margin-top: 28px; overflow: hidden; }
  #link-politica-privacidade { width: 270px; height: auto; left: 50%; position: relative; float: left; margin: unset; margin-left: -122px; }
  #seta-link { width: 50px; height: 50px; position: relative; float: left; margin-left: -1px; margin-top: -12px; background: url('img/seta-politica.png'); background-size: 50px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }

  /*Inicio Janelas*/
  #janela-beneficio-out { width: 100%; height: 0%; position: fixed; right: 0px; z-index: 9999; overflow: hidden; }
  #janela-beneficio { width: 100%; height: 100%; position: absolute; right: -120%; background-color: #1B6B4E; border-radius: 0px 0px 0px 0px; }
  #foto-janela-beneficio { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
  #foto-janela-beneficio-int { width: 310px; height: 280px; position: relative; margin: auto; border-radius: 30px; overflow: hidden; }
  #conteudo-janela-benificio { width: 100%; height: 100%; position: relative; float: left; margin-top: 10px; padding: 0px 35px 460px 39px; overflow-y: scroll; }
  #conteudo-janela-benificio h4 { width: 90%; height: auto; position: relative; font-size: 24px; color: #E7FAE4; }
  #conteudo-janela-benificio p { width: 100%; height: auto; position: relative; margin-top: 5px; font-size: 16px; color: #E7FAE4; font-family: 'poppinslight'; }
  .descricao-beneficio-dinamica { width: 100%; height: auto; position: relative; float: left; }

  /*Janela formulário*/
  #janela-formulario { width: 90%; height: 550px; position: fixed; z-index: 99999; background-color: #fff; left: 5%; top: 250%; margin-left: 0px; margin-top: -270px; border-radius: 40px; }
  #selecao-tipo-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 30px; scale: 0.9; margin-left: -18px; }
  #div-formulario-janela-int { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 20px; }
  #cta-envia-formulario { width: auto; height: auto; position: relative; float: left; padding: 13px 50px 11px 20px; background-color: #006F4B; color: #fff; font-size: 14px; border-radius: 30px; cursor: pointer; }
  #cta-fechar-formulario { width: 105px; height: auto; position: relative; float: right; padding: 13px 50px 11px 20px; border: 1px solid #006F4B; color: 006F4B; font-size: 14px; color: #006F4B; border-radius: 30px; cursor: pointer; }
  #div-campos-formulario { width: 100%; height: auto; position: relative; float: left; }
  #div-chamada-formulario-janela { width: 48%; height: auto; position: relative; float: left; display: none; }
  #icn-fechar-form { width: 22px; height: 22px; position: absolute; top: 10px; right: 9px; background: url('img/icn-fechar-form.png'); background-size: 22px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }

  /* ==========================================================================
   Janela Atrativo
   ========================================================================== */
  #janela-atrativo { width: 100%; height: 100%; position: fixed; left: 0%; top: 250%; margin-left: 0px; margin-top: 0px; background-color: #1B6B4E; border-radius: 0px; overflow-y: scroll; z-index: 9999; }
  #cta-fechar-janela-atrativo { width: 120px; height: auto; position: fixed; top: 50px; bottom: unset; right: 50%; margin-right: -60px; padding: 10px 40px 6px 20px; background-color: #DFFF69; font-size: 18px; color: #000; border-radius: 40px; cursor: pointer; z-index: 10; }
  #slide-janela-atrativo { width: 100%; height: 520px; position: relative; float: left; }
  #bloco-foto-slide-atrativo { width: 90%; height: 90%; position: relative; float: left; margin-left: 5%; margin-top: 33px; border-radius: 30px; overflow: hidden; }
  .foto-int-slide-atrativo { width: 420px; height: 530px; position: absolute; left: 50%; top: 50%; margin-left: -210px; margin-top: -292px; }
  #conteudo-janela-atrativo { width: 100%; height: 100%; position: relative; float: left; padding-left: 30px; }
  .div-conteudo-inf-atrativo { width: 100%; height: auto; position: relative; float: left; }
  #conteudo-janela-atrativo h3 { width: 90%; height: auto; position: relative; float: left; margin-top: 12px; font-size: 29px; color: #fff; font-family: 'poppinsbold'; }
  #cta-slide-visite-com-a-ecologica { width: 300px; height: auto; position: absolute; left: 50%; margin-left: -150px; bottom: 30px; padding: 13px 0px 10px 23px; font-size: 17px; color: #000; background-color: #DEFF68; border-radius: 40px; cursor: pointer; z-index: 90; }
  #seta-cta-visite-com-a-ecologica { width: 40px; height: 40px; position: absolute; right: 10px; top: 4px; background: url('img/seta-cta-ecologica-janela.png'); background-size: 40px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  #paragrafos-janela-atrativo { width: 100%; height: auto; position: relative; float: left; margin-top: -29px; overflow-y: unset; padding-bottom: 230px; }
  #box-info-atrativo { width: 80%; height: 117px; position: fixed; float: unset; margin-left: 2%; margin-top: unset; border-radius: 15px; bottom: 26px; }
  #bloco-foto-slide-atrativo { width: 340px; height: 90%; left: 50%; position: relative; float: left; margin-left: -170px; margin-top: 33px; border-radius: 30px; overflow: hidden; }
  .item-slide-inf-atrativo-txt { width: 100%; height: 100%; position: relative; float: left; padding: 0px 30px; }
  .div-conteudo-inf-atrativo h4 { width: 90%; height: auto; position: relative; float: left; margin-top: 23px; font-size: 16px; font-family: 'poppinssemibold'; }
  .div-conteudo-inf-atrativo p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 14px; }

  .fix-faixa-ornamento-experiencias { width: 100%; height: 150px; position: relative; float: left; margin-top: 60px !important; margin-bottom: -20px; overflow: hidden; }

}

/* ==========================================================================
 Helper classes
 ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden, [hidden] { display: none !important; }

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;  /* 1 */ }

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; }

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible { visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }

/* ==========================================================================
 EXAMPLE Media Queries for Responsive Design.
 These examples override the primary ('mobile first') styles.
 Modify as content requires.
 ========================================================================== */
@media only screen and (min-width:35em) {

/* Style adjustments for viewports that meet the condition */ }
@media print, (-webkit-min-device-pixel-ratio:1.25), (min-resolution:1.25dppx), (min-resolution:120dpi) {

/* Style adjustments for high resolution devices */ }

/* ==========================================================================
 Print styles.
 Inlined to avoid the additional HTTP request:
 https://www.phpied.com/delay-loading-your-print-css/
 ========================================================================== */
@media print {
  *, *::before, *::after { background: #fff !important; color: #000 !important;    /* Black prints faster */ box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " ("attr(href) ")"; }
  abbr[title]::after { content: " ("attr(title) ")"; }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
  pre { white-space: pre-wrap !important; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}