/*! 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
   ========================================================================== */

/*ancoras*/
.ancora { width: 1px; height: 1px; position: absolute; left: 0px; top: 0px; }
#a-produtos { top: -180px; }
#a-neurocosmetica { top: -10px; }
#a-produtos { top: -180px; }
#a-produtos { top: -180px; }
html { color: #222; font-size: 1em; line-height: 1.4; color: #0E293D; height: 100%; font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }
body { height: 100%; }
#mascara-formulario { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: #ffd7d7; opacity: 0; z-index: 999; display: none; }
#mascara-telas-menores { display: none; }
.mobile { display: none; }
#cta-cupom-fisico { width: 400px; height: 172px; position: fixed;    /* left: 50%; */    /* margin-left: -257px; */
bottom: -320px; right: 20px; background: url('../img/cta-cupom.png'); background-size: 400px; z-index: 600; cursor: pointer; display: none !important; }

/* =========================
   FIX: Instagram In-App WebView
   ========================= */

/* 1) use var(--vh) no lugar de 100vh quando precisar */
.vh-100-fix { height: calc(var(--vh, 1vh) * 100); min-height: calc(var(--vh, 1vh) * 100); }

/* se você tiver seções que usam 100vh, aplique a classe .vh-100-fix nelas */

/* 2) Safe areas (notch) */:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }

/* exemplo: padding seguro no topo/baixo quando tiver header fixo */
.safe-padding { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); }

/* 3) Evita “zoom/resize” estranho em inputs no iOS/Instagram */
input, select, textarea { font-size: 16px; /* iOS evita zoom ao focar */ }

/* 4) Scroll mais estável no iOS */
html, body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; }

/* 5) Evita esticar imagens/vídeos em alguns webviews */
img, video { max-width: 100%; height: auto; }
video { object-fit: cover; }

/* 6) Melhor toque (sem travar scroll vertical) */
.touch-pan-y { touch-action: pan-y; }

/*
 * 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; }
a { color: #0E293D; }
*, *::before, *::after { box-sizing: border-box; }

/* GLOBAL: aplica em inputs, textareas e qualquer elemento com placeholder */
::-webkit-input-placeholder { color: #000; opacity: 1; }
:-moz-placeholder { color: #000; opacity: 1; }

/* Firefox 4-18 */
::-moz-placeholder { color: #000; opacity: 1; }

/* Firefox 19+ */
:-ms-input-placeholder { color: #000; }

/* IE 10-11 */
::-ms-input-placeholder { color: #000; }

/* Edge Legacy */
::placeholder { color: #000; opacity: 1; }

/* Padrão */

/* Se quiser garantir que não fique “acinzentado” por herança */
input::placeholder, textarea::placeholder { color: #000; opacity: 1; }
.mobile { display: none; }

/*menu fixo*/
#faixa-menu-fixo { width: 100%; height: auto; position: fixed; top: 40px; z-index: 999; }
#view-menu-fixo { width: 90%; height: auto; position: relative; margin: auto; max-width: 1430px; }
#bg-menu-fixo { width: 100%; height: 85px; position: absolute; left: 0px; top: 0px; background-color: #63b82f; border: 1px solid #a7e87e; border-radius: 120px; opacity: 0; transition: opacity 0.2s linear; }
#itens-menu { width: 100%; height: 100%; position: absolute; left: 0px; top: 3px; z-index: 10; }
#logo-menu-fixo { width: 190px; height: 50px; position: relative; float: left; margin-left: 30px; margin-top: 14px; background: url('../img/logo-tf.png'); background-size: 190px; }
#lista-itens-menu { width: 740px; height: auto; position: relative; float: left; margin-left: -20px; margin-top: 11px; }
#lista-itens-menu ul li { width: auto; height: auto; position: relative; float: left; margin-left: 35px; font-size: 20px; color: #fff; cursor: pointer; font-weight: 300; z-index: 10; font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }
#lista-itens-menu ul li:hover { color: #FFC100; }
#marcador-menu { width: 75px; height: 35px; position: absolute; left: 13px; top: 10px; background-color: #134045; border-radius: 40px; z-index: 9; transition: all 0.4s cubic-bezier(.22, .61, .36, 1); will-change: left, width; }
#cta-login { width: auto; height: auto; position: relative; float: right; margin-top: 18px; margin-right: 29px; padding: 9px 25px 8px 25px; color: rgb(255, 204, 0); font-size: 17px; background-color: #ffcc00 !important; color: #19535A !important; border-radius: 30px; cursor: pointer; display: none; }
#cta-login:hover { background-color: #ddffa2 !important; }
#cta-produzir-conteudo { width: auto; height: auto; position: relative; float: right; margin-top: 18px; margin-right: 28px; padding: 11px 25px 11px 25px; color: #000; font-size: 17px; font-weight: 600; background-color: #047837; color: #ffffff; border-radius: 30px; cursor: pointer; }
#cta-produzir-conteudo:hover { background-color: #4e9621; }

/*Inicio LP*/
#topo-lp { width: 100%; height: 100%; min-height: 1100px; position: relative; float: left; background: url('../img/ana-paula-usa-serum-facial-terra-flor.jpg'); background-size: cover; }
#faixa-alerta-topo-lp { width: 100%; height: 55px; position: fixed; top: 0px; z-index: 600; background-color: #91f500; color: #000; overflow: hidden; border-bottom: 1px solid #a5da57; cursor: pointer; display: none; }
#faixa-alerta-topo-lp:hover { background-color: #ffc6eb; }
#esteira-txt-alerta-topo { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; margin-top: 14px; margin-left: 20px; font-weight: 700; word-spacing: 2px; }

/* brilho “novo” correndo da esquerda p/ direita + blend mode */
#luz-alerta-topo { width: 80px; height: 300px; position: absolute; top: -20px; left: -150px; /* posição inicial fora da tela (fallback) */ z-index: 90;  /* aparência do brilho */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);  /* mistura com o que está por baixo (muda cor/intensidade) */ -webkit-mix-blend-mode: screen; mix-blend-mode: screen;  /* suaviza/“estoura” um pouco o brilho */ -webkit-filter: blur(0.4px); filter: blur(0.4px); -webkit-transform: rotate(8deg) translate3d(0, 0, 0); -moz-transform: rotate(8deg) translate3d(0, 0, 0); -ms-transform: rotate(8deg) translate3d(0, 0, 0); -o-transform: rotate(8deg) translate3d(0, 0, 0); transform: rotate(8deg) translate3d(0, 0, 0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; opacity: 0.7;  /* animação: sai pela direita e reaparece pela esquerda */ -webkit-animation: brilhoAlertaTopo 60.8s ease-in-out infinite; -moz-animation: brilhoAlertaTopo 60.8s ease-in-out infinite; -o-animation: brilhoAlertaTopo 60.8s ease-in-out infinite; animation: brilhoAlertaTopo 60.8s ease-in-out infinite; }

/* do -150px até “passar” a tela toda (use 120% pra garantir que suma) */
@-webkit-keyframes brilhoAlertaTopo {
  0% { left: -150px; opacity: 0; }
  10% { opacity: 0.75; }
  85% { opacity: 0.75; }
  100% { left: 120%; opacity: 0; }
}
@-moz-keyframes brilhoAlertaTopo {
  0% { left: -150px; opacity: 0; }
  10% { opacity: 0.75; }
  85% { opacity: 0.75; }
  100% { left: 120%; opacity: 0; }
}
@-o-keyframes brilhoAlertaTopo {
  0% { left: -150px; opacity: 0; }
  10% { opacity: 0.75; }
  85% { opacity: 0.75; }
  100% { left: 120%; opacity: 0; }
}
@keyframes brilhoAlertaTopo {
  0% { left: -150px; opacity: 0; }
  10% { opacity: 0.75; }
  85% { opacity: 0.75; }
  100% { left: 120%; opacity: 0; }
}
#div-video-bg-topo { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; background-color: #72420F; }
#div-video-bg-topo video { width: 100%; height: 100%; object-fit: cover; /* cobre toda a área sem distorcer */ position: absolute; top: 0; left: 0; }
#div-mascara-video { width: 100%; height: 100%; position: absolute; z-index: 100; background-color: #000; opacity: 0.4; }

/*conteudo div topo*/
#conteudo-div-topo { width: 100%; height: 350px; position: absolute; top: 50%; margin-top: -185px; z-index: 150; }
#div-view-conteudo-topo { width: 600px; height: 100%; position: relative; margin: auto; padding-top: 10px; }
#logo-terraflor-topo { width: 291px; height: 89px; position: relative; margin: auto; background: url(../img/logo-terra-flor.webp); background-size: 291px; opacity: 1 !important; }
#txt-header { opacity: 1 !important; }
#div-view-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 44px; font-weight: 700; color: #FFC82A; }
#div-view-conteudo-topo h1 span { font-weight: 400; color: #FFF; }
.item-sub-chamada-topo { width: 100%; height: auto; position: relative; float: left; }
#subchamada-topo-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; opacity: 1 !important; }
#subchamada-topo-lp p { width: 100%; height: auto; position: relative; float: left; font-size: 18px; font-weight: 300; color: #fff; text-align: center; padding: 0px 60px; }

/*CTA topo LP*/
#faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }

/*CTA padrão*/
.cta-padrao-lp { width: 380px; height: auto; position: relative; margin: auto; text-align: center; padding: 17px 20px 17px 20px; font-size: 19px; color: #fff; font-weight: 600; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; opacity: 0; }

/* ADICIONAR (fade in) */
#logo-terraflor-topo, #txt-header, #subchamada-topo-lp, #chamada-cta-topo, .cta-padrao-lp { opacity: 1 !important; -webkit-animation: fadeInLP 1.1s ease forwards; animation: fadeInLP 1.1s ease forwards; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* HOVER */
.cta-padrao-lp:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, rgba(0, 140, 63, 1) 20%, rgba(170, 235, 70, 1) 80%); }
.circulo-cta-padrao { width: 38px; height: 38px; position: absolute; left: 16px; top: 13px; background: #93D93E; background: linear-gradient(180deg, rgba(147, 217, 62, 1) 31%, rgba(0, 140, 63, 1) 76%); border-radius: 50%; display: none; }
.icn-cta-padrao { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; background: url('../img/icone-cta.png'); background-size: 30px; }
#chamada-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #fff; font-size: 22px; text-align: center; opacity: 0; display: none !important; }
#chamada-cta-topo span { color: #FFC72B; font-weight: 700; }

/*Segunda sessão LP*/
#div-s2-lp { width: 100%; height: 900px; position: relative; float: left; }
#faixa-sinais-de-confianca { width: 100%; height: 100px; position: relative; float: left; background-color: #7EBA27; overflow: hidden; }
#esteira-faixa-sinais-confianca { width: 3100px; height: 64px; position: absolute; top: 22px; left: 0px; /* começa no zero */ background: url('../img/sinais-confianca.png'); background-size: 3100px; -webkit-animation: esteiraSinaisConfianca 50s linear infinite; -moz-animation: esteiraSinaisConfianca 50s linear infinite; -o-animation: esteiraSinaisConfianca 50s linear infinite; animation: esteiraSinaisConfianca 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-will-change: left; will-change: left; }
@-webkit-keyframes esteiraSinaisConfianca {
  0% { left: 0px; }
  50% { left: -1500px; }
  100% { left: 0px; }
}
@-moz-keyframes esteiraSinaisConfianca {
  0% { left: 0px; }
  50% { left: -1500px; }
  100% { left: 0px; }
}
@-o-keyframes esteiraSinaisConfianca {
  0% { left: 0px; }
  50% { left: -1500px; }
  100% { left: 0px; }
}
@keyframes esteiraSinaisConfianca {
  0% { left: 0px; }
  50% { left: -1500px; }
  100% { left: 0px; }
}
#bloco-s2 { width: 100%; height: 3000px; position: relative; float: left; margin-top: 140px; }
#view-blocos-s2 { width: 90%; height: auto; position: relative; margin: auto; max-width: 1600px; }

/*Blocos fotos S2*/
.div-bloco-foto-s2 { width: 32.5%; height: 600px; position: relative; float: left; }
#ft1-b1 { width: 100%; height: 47%; position: relative; float: left; border-radius: 40px; overflow: hidden; opacity: 0; }
#ft2-b1 { width: 47%; height: 47%; position: relative; float: left; margin-top: 20px; border-radius: 40px; overflow: hidden; opacity: 0; }
#ft3-b1 { width: 47%; height: 47%; position: relative; float: left; margin-left: 6%; margin-top: 20px; border-radius: 40px; overflow: hidden; opacity: 0; }
.div-bloco-s2-conteudo { width: 35%; height: 600px; position: relative; float: left; padding: 0px 22px; }
.div-bloco-s2-conteudo-int { width: 100%; height: 47%; position: relative; float: left; margin-bottom: 3.5%; border-radius: 40px; overflow: hidden; background-color: #ebf7da; }
.div-bloco-s2-conteudo-int h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; font-size: 48px; font-weight: 800; text-align: center; color: #047837; }
.div-bloco-s2-conteudo-int p { width: 100%; height: auto; position: relative; float: left; margin-top: -17px; font-size: 24px; font-weight: 300; text-align: center; color: #047837; }
.mostra-t1 { margin-top: 100px !important; }
.slow-transition { transition: all 1s ease-out; -ms-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; }
.slow-transition-b { transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; }
.slow-transition-c { transition: all 10s ease-out; -ms-transition: all 10s ease-out; -moz-transition: all 10s ease-out; -o-transition: all 10s ease-out; -webkit-transition: all 10s ease-out; }
.item-lista-bloco-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 50px; margin-top: 40px; margin-bottom: -15px; opacity: 0; }
.icn-item-conteudo-s2 { width: 52px; height: 52px; position: relative; float: left; background-color: #fff; border-radius: 50%; border: 2px #047837 solid; }
.txt-item-conteudo-s2 { width: 76%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 1px; font-size: 16px; color: #047837; }
.icn-int-conteudo-s2 { width: 38px; height: 38px; position: absolute; left: 50%; top: 50%; margin-left: -19px; margin-top: -19px; }
.ft4-b1 { width: 56%; height: 97%; position: relative; float: left; border-radius: 40px; overflow: hidden; opacity: 0; }
.ft5-b1 { width: 39%; height: 46.8%; position: relative; float: left; margin-left: 5%; margin-bottom: 4%; border-radius: 40px; overflow: hidden; opacity: 0; }
.ft5-b2 { width: 39%; height: 46.8%; position: relative; float: left; margin-left: 5%; margin-bottom: 4%; border-radius: 40px; overflow: hidden; opacity: 0; }
.ft4-b1-int { width: 300px; height: 600px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -300px; background: url(../img/gel-aloe-vera.png); background-size: 300px; }
.ft5-b1-int { width: 210px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -105px; margin-top: -150px; background: url(../img/modelo-ft1-.png); background-size: 210px; }
.ft5-b2-int { width: 210px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -105px; margin-top: -150px; background: url(../img/serum.png); background-size: 210px; }
.estilos-bloco-1 { background-color: #EFA902; overflow: hidden; }
.ft-int-ft1 { width: 540px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -270px; margin-top: -150px; background: url('../img/mc-1.png'); background-size: 540px; }
.ft-int-ft2 { width: 250px; height: 290px; position: absolute; left: 50%; top: 50%; margin-left: -125px; margin-top: -145px; background: url('../img/ft-01-b.png'); background-size: 250px; }
.ft-int-ft3 { width: 250px; height: 290px; position: absolute; left: 50%; top: 50%; margin-left: -125px; margin-top: -145px; background: url('../img/ft-02-b.png'); background-size: 250px; }
.mostra-ft { opacity: 1 !important; }
#faixa-cta-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
#legenda-cta-s2 { width: 500px; height: auto; position: absolute; left: 50%; margin-left: -250px; bottom: -69px; font-size: 18px; padding: 0px 100px; color: #017937; text-align: center; }
#div-galeria-de-fotos { width: 100%; height: auto; position: relative; float: left; margin-top: 190px; background-color: #dadada; overflow: hidden; }
#esteira-fotos-galeria { width: 4000px; height: auto; position: relative; top: 0; }

/*Inicio comparação*/
#div-s3 { width: 100%; height: 900px; position: relative; float: left; background-color: #dadada; }
#ancora-div-s3 { width: 10px; height: 10px; position: absolute; left: 0px; top: 1000px; }

/* WEBKIT */
@-webkit-keyframes galeriaMove {
  0% { -webkit-transform: translateX(0px); }
  50% { -webkit-transform: translateX(-1500px); }
  100% { -webkit-transform: translateX(0px); }
}

/* MOZ */
@-moz-keyframes galeriaMove {
  0% { -moz-transform: translateX(0px); }
  50% { -moz-transform: translateX(-1500px); }
  100% { -moz-transform: translateX(0px); }
}

/* O */
@-o-keyframes galeriaMove {
  0% { -o-transform: translateX(0px); }
  50% { -o-transform: translateX(-1500px); }
  100% { -o-transform: translateX(0px); }
}

/* PADRÃO */
@keyframes galeriaMove {
  0% { transform: translateX(0px); }
  50% { transform: translateX(-1500px); }
  100% { transform: translateX(0px); }
}
.move-esteira { -webkit-animation: galeriaMove 60s ease-in-out infinite; -moz-animation: galeriaMove 60s ease-in-out infinite; -o-animation: galeriaMove 60s ease-in-out infinite; animation: galeriaMove 60s ease-in-out infinite; -webkit-will-change: transform; -moz-will-change: transform; will-change: transform; }
.item-esteira-foto { width: 400px; height: auto; position: relative; float: left; }

/*Inicio o que são neurocosmeticos*/
#div-s3 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 180px; background-color: #FFC82A; }
#view-div-s3 { width: 1400px; height: auto; position: relative; margin: auto; }
#conteudo-txt-div-s3 { width: 40%; height: auto; position: relative; float: left; }
#conteudo-txt-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 175px; font-size: 50px; color: #000; font-weight: 600; }
#conteudo-txt-div-s3 h3 span { color: #C4136F; }
#conteudo-txt-div-s3 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; margin-bottom: 10px; }
#faixa-cta-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }

/*CTA padrão*/
.cta-padrao-lp-b { width: 380px; height: auto; position: relative; left: 0px; text-align: center; padding: 17px 20px 17px 20px; font-size: 18px; color: #fff; font-weight: 700; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; }

/* HOVER */
.cta-padrao-lp-b:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, rgba(0, 140, 63, 1) 20%, rgba(170, 235, 70, 1) 80%); }
#conteudo-s3-como-funciona { width: 50%; height: auto; position: relative; float: left; margin-left: 10%; }
#conteudo-s3-como-funciona h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 225px; font-size: 60px; color: #000; font-family: "Reenie Beanie", cursive; }
#faixa-blocos-passo-a-passo-fomo-funciona { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
.item-out-passo-a-passo { width: 30%; height: 300px; position: relative; float: left; margin-left: 1.5%; margin-right: 1.5%; }
.item-passo-a-passo-cmf { width: 100%; height: 300px; position: relative; float: left; border-radius: 30px; overflow: hidden; }
.container-video-passo-a-passo { width: 220px; height: 320px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -160px; overflow: hidden; }
.container-video-passo-a-passo video { width: 100%; height: 100%; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; }
.numero-passo-a-passo { width: 45px; height: 45px; position: absolute; left: 20px; top: 20px; z-index: 90; background-color: #FFB9C6; border-radius: 50%; }
.numero-passo-a-passo-txt { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; font-size: 42px; color: #000; text-align: center; font-family: "Reenie Beanie", cursive; }
.legenda-bloco-passo-a-passo { width: 100%; height: auto; position: absolute; bottom: -70px; font-size: 18px; color: #000; text-align: center; }
#inicio-bloco-comparacao { width: 100%; height: auto; position: relative; padding-bottom: 70px; float: left; }
#view-inicio-bloco-comparacao { width: 1400px; height: 100%; position: relative; margin: auto; }
#view-inicio-bloco-comparacao h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 200px; font-size: 52px; text-align: center; color: #000; font-weight: 600; }
#view-inicio-bloco-comparacao span { color: #C71270; }
#view-inicio-bloco-comparacao p { width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #000; text-align: center; margin-top: -10px; padding: 0px 410px; }
#container-conteudo-div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#view-cards-comparacao { width: 1100px; height: auto; position: relative; margin: auto; }
.item-card-comparacao { width: 50%; height: 100%; position: relative; float: left; margin-top: 50px; }
.titulo-card-comparacao { width: 70%; height: auto; position: relative; text-align: center; margin: auto; padding: 20px 20px; background-color: #C71270; border-radius: 60px; color: #fff; font-size: 18px; }
.titulo-card-comparacao-outros { width: 70%; height: auto; position: relative; text-align: center; margin: auto; padding: 20px 20px; background-color: #fff; border: 2px solid #C71270; border-radius: 60px; color: #C71270; font-size: 18px; }
.foto-card-comparacao { width: 100%; height: 600px; position: relative; float: left; margin-top: 50px; padding: 0px 20px; opacity: 0; }
.bloco-lista-comparacao { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 80px; }
.item-comparacao { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; opacity: 1 !important; }
.icn-item-comparacao-ok { width: 25px; height: 25px; position: relative; float: left; border-radius: 50%; background: url('../img/check.png'); background-size: 25px; }
.icn-item-comparacao-x { width: 25px; height: 25px; position: relative; float: left; border-radius: 50%; background: url('../img/x.png'); background-size: 25px; }
.item-comparacao-txt { width: 85%; height: auto; position: relative; float: left; margin-left: 10px; font-size: 18px; color: #000; }
#faixa-cta-s-comparacao { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; }
.mostra-comp { opacity: 1; }

/*Inicio Ciência acessivel*/
#div-sessao-acessivel {
    width: 100%;
    height: auto;
    position: relative;
    float: left;
    margin-top: -30px;
    margin-bottom: -40px;

}
#view-sessao-acessivel { width: 1400px; height: atuo; position: relative; margin: auto; }
#div-chamada-ciencia-acessivel { width: 40%; height: 100%; position: relative; float: left; }
#div-chamada-ciencia-acessivel h3 { width: 85%; height: auto; position: relative; float: left; line-height: 35px; font-size: 26px; color: #000; }
#div-chamada-ciencia-acessivel span { font-size: 50px; font-weight: 600; color: #FF824E; }
#box-ornamento-ciencia-acessivel { width: 60%; height: 140px; position: relative; float: left; margin-top: 10px; border-radius: 40px; overflow: hidden; }

/*esteira ornamento-ca*/
#esteira-ornamento-ciencia-acessivel { width: 3500px; height: 140px; position: absolute; left: 0px; -webkit-animation: ornamentoMove 100s ease-in-out infinite; -moz-animation: ornamentoMove 100s ease-in-out infinite; -o-animation: ornamentoMove 100s ease-in-out infinite; animation: ornamentoMove 100s ease-in-out infinite; -webkit-will-change: transform; -moz-will-change: transform; will-change: transform; }

/* WEBKIT */
@-webkit-keyframes ornamentoMove {
  0% { -webkit-transform: translateX(0px); }
  50% { -webkit-transform: translateX(-2000px); }
  100% { -webkit-transform: translateX(0px); }
}

/* MOZ */
@-moz-keyframes ornamentoMove {
  0% { -moz-transform: translateX(0px); }
  50% { -moz-transform: translateX(-2000px); }
  100% { -moz-transform: translateX(0px); }
}

/* O */
@-o-keyframes ornamentoMove {
  0% { -o-transform: translateX(0px); }
  50% { -o-transform: translateX(-2000px); }
  100% { -o-transform: translateX(0px); }
}

/* PADRÃO */
@keyframes ornamentoMove {
  0% { transform: translateX(0px); }
  50% { transform: translateX(-2000px); }
  100% { transform: translateX(0px); }
}
.item-a-ca { width: 120px; height: 100%; position: relative; float: left; margin-right: 20px; background-color: #FF824F; border-radius: 40px; overflow: hidden; }
.item-b-ca { width: 250px; height: 100%; position: relative; float: left; margin-right: 20px; background-color: #FF824F; border-radius: 40px; overflow: hidden; }
.foto-item-int-a-ce { width: 130px; height: 150px; position: absolute; left: 50%; top: 50%; margin-left: -65px; margin-top: -75px; background-color: rgb(255, 222, 205); }
.foto-item-int-b-ce { width: 260px; height: 150px; position: absolute; left: 50%; top: 50%; margin-left: -130px; margin-top: -75px; background-color: rgb(255, 222, 205); }
#sessao-video-bg { width: 100%; height: 700px; position: relative; float: left; margin-top: 70px; background-color: #f5f5f5; overflow: hidden; }
#sessao-video-bg video { width: 100%; height: 100%; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; }
#inicio-sessao-serum-facial { width: 100%; height: 1200px; position: relative; float: left; background-color: #FFF; }
#view-serum-facial { width: 1600px; height: auto; position: relative; margin: auto; }
#faixa-serum-facial-topo { width: 100%; height: auto; position: relative; float: left; }
#view-circulos-bg { width: 1170px; height: auto; position: relative; margin: auto; padding-top: 170px; overflow: hidden; }
.item-circulo-bg { width: 350px; height: 350px; position: relative; float: left; margin-right: 60px; background-color: #FF4D3E; border-radius: 100%;  /* estado inicial */ -webkit-transform: translateY(-700px); -moz-transform: translateY(-700px); -ms-transform: translateY(-700px); -o-transform: translateY(-700px); transform: translateY(-700px); opacity: 0; -webkit-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -moz-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -o-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -webkit-will-change: transform, opacity; -moz-will-change: transform, opacity; will-change: transform, opacity; }
.item-circulo-bg-b { background-color: #FFC82A !important; }
.item-circulo-bg:last-child { margin-right: 0px; }
.item-foto-rotina { width: 360px; height: 360px; position: absolute; left: 50%; top: 50%; margin-left: -180px; margin-top: -180px; }

/* delays em sequência */
.c1 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; }
.c2 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; }
.c3 { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; }

/* WEBKIT */
@-webkit-keyframes desceCirculo {
  to { -webkit-transform: translateY(0); opacity: 1; }
}

/* MOZ */
@-moz-keyframes desceCirculo {
  to { -moz-transform: translateY(0); opacity: 1; }
}

/* O */
@-o-keyframes desceCirculo {
  to { -o-transform: translateY(0); opacity: 1; }
}

/* PADRÃO */
@keyframes desceCirculo {
  to { transform: translateY(0); opacity: 1; }
}
#inicio-cartucho-serum { width: 435px; height: 2700px; position: absolute; left: 50%; margin-left: -227px; top: -221px; }
#conteudo-sobre-serum-facial { width: 100%; height: auto; position: relative; float: left; }
#conteudo-sobre-serum-facial h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; line-height: 55px; font-size: 50px; color: #000; text-align: center; }
#conteudo-sobre-serum-facial span { font-weight: 700; color: #8AC239; }
#conteudo-sobre-serum-facial p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; font-size: 20px; color: #000; padding: 0px 450px; }

/*Inicio beneficios*/
#faixa-beneficios-serum { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; }
.item-foto-beneficio { width: 20%; height: 250px; position: relative; float: left; border-radius: 20px; background-color: #dadada; overflow: hidden; }
.item-foto-beneficio-int { width: 320px; height: 250px; position: absolute; left: 50%; top: 50%; margin-left: -160px; margin-top: -125px; background-color: rgb(255, 222, 205); }
.item-txt-beneficio { width: 30%; height: auto; position: relative; float: left; padding: 0px 40px; }
.item-txt-beneficio h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 17.5px !important; margin-bottom: 20px; text-align: left !important; font-size: 40px !important; line-height: 45px !important; color: #89C239 !important; }
.item-txt-beneficio span { font-weight: 700; }
.lista-beneficios-serum { width: 100%; height: auto; position: relative; float: left; }
.lista-beneficios-serum ul { list-style: none; padding: 0; margin: 0; }
.lista-beneficios-serum ul li { width: 100%; height: auto; position: relative; float: left; font-size: 19px; color: #000; padding-left: 23px; margin-bottom: 12px; }

/* Tick */
.lista-beneficios-serum ul li::before { content: "✔"; position: absolute; left: 0; top: 2px; font-size: 18px; color: #93D93E; font-weight: bold; }

/*faixa-ideal-para*/
#faixa-ideal-para { width: 100%; height: auto; position: relative; float: left; }
#faixa-ideal-para h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; font-size: 68px; color: #047837; font-weight: 700; text-align: center; }
#faixa-circulos-ideal-para { width: 100%; height: auto; position: relative; float: left; }
#view-circulos-ideal-para { width: 660px; height: auto; position: relative; margin: auto; }
.item-faixa-circulos-ideal-para { width: 200px; height: 200px; position: relative; float: left; margin-top: 30px; margin-right: 30px; border-radius: 50%; background-color: #dadada; }
.item-faixa-circulos-ideal-para:last-child { margin-right: 0px; }
.ft-item-ideal-para { width: 200px; height: 200px; position: absolute; border-radius: 50%; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; overflow: hidden; }
.ft-item-ideal-para-int { width: 210px; height: 210px; position: absolute; left: 50%; top: 50%; margin-left: -105px; margin-top: -105px; background-color: rgb(255, 222, 205); }
.legenda-ideal-para { width: 100%; height: auto; position: absolute; bottom: -65px; color: #000; font-size: 15px; text-align: center; }

/*inicio div Sessão 04*/
#div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #BBE73A; margin-top: 630px; padding-bottom: 240px; }
#view-div-s4 { width: 1400px; height: auto; position: relative; margin: auto; }
#view-div-s4 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; color: #000; font-size: 50px; text-align: center; }
#view-div-s4 span { font-weight: 700; color: #FF7940; }
#view-div-s4 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 300px; }

/*faixa passo a passo */
#faixa-passo-a-passo-2 { width: 100%; height: auto; position: relative; float: left; margin-top: -50px; }
#faixa-passo-a-passo-2 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; font-size: 50px; color: #000; font-family: "Reenie Beanie", cursive; text-align: center; padding: 0px 30px; }
#faixa-itens-passo-a-passo-2 { width: 100%; height: auto; position: relative; float: left; }

/*item passo a passo 2*/
.item-passo-a-passo-b { width: 25%; height: auto; position: relative; float: left; padding: 0px 30px; }
.foto-out-passo-a-passo { width: 100%; height: 300px; position: relative; float: left; margin-top: 15px; border-radius: 30px; overflow: hidden; background-color: #dadada; }
.foto-int-passo-a-pass-b { width: 360px; height: 310px; position: absolute; left: 50%; top: 50%; margin-left: -176px; margin-top: -166px; background-color: rgb(255, 222, 205); }
.numero-passo-a-passo-b { width: 50px; height: 50px; position: absolute; left: 22px; top: 21px; background-color: #FFB9C6; border-radius: 50%; z-index: 90; }
.legenda-passo-a-passo-b { width: 83%; height: auto; position: absolute; bottom: -80px; color: #000; text-align: center; font-size: 19px; padding: 0px 10px; }
.numero-txt-passo-a-passo-b { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; font-size: 46px; text-align: center !important; color: #000; font-family: "Reenie Beanie", cursive; text-align: left; }
#faixa-selos-s4 { width: 100%; height: auto; position: absolute; bottom: -72px; }
#view-faixa-selos { width: 331px; height: auto; position: relative; margin: auto; }
.item-selo-s4 { width: 150px; height: 150px; position: relative; float: left; margin-right: 30px; background-color: #dadada; border-radius: 50%; }
.item-selo-s4:last-child { margin-right: 0px; }

/*Inicio ritual*/
#div-s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 100px; }
#view-faixa-ritual { width: 1300px; height: auto; position: relative; margin: auto; }
#chamada-ritual-terra-flor { width: 100%; height: auto; position: relative; float: left; margin-top: 140px; }
#chamada-ritual-terra-flor h6 { width: 100%; height: auto; position: relative; float: left; font-size: 44px; color: #000; text-align: center; }
#chamada-ritual-terra-flor span { font-weight: 600; color: #FB804D; }
#chamada-ritual-terra-flor p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 410px; }
#faixa-produtos-ritual-b { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; }
#view-circulos-produtos { width: 980px; height: auto; position: relative; margin: auto; }

/* Estrutura base */
.item-circulo-bg-ritual-b { width: 300px; height: 300px; position: relative; float: left; margin-right: 40px; border-radius: 50%; opacity: 0; -webkit-animation: fadeSequencial 2s ease forwards; -moz-animation: fadeSequencial 2s ease forwards; -o-animation: fadeSequencial 2s ease forwards; animation: fadeSequencial 2s ease forwards; -webkit-will-change: opacity; -moz-will-change: opacity; will-change: opacity; }

/* Cores */
.bg-c1 { background-color: #9760A3; }
.bg-c2 { background-color: #FB804F; }
.bg-c3 { background-color: #FFC82A; }

/* Delays em sequência */
.bg-c1 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; }
.bg-c2 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; }
.bg-c3 { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; }

/* Keyframes */
@-webkit-keyframes fadeSequencial {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fadeSequencial {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-o-keyframes fadeSequencial {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeSequencial {
  from { opacity: 0; }
  to { opacity: 1; }
}
.item-circulo-bg-ritual-b:last-child { margin-right: 0px; }
#ritual-sessao-s5 { width: 400px; height: 600px; position: absolute; left: 50%; margin-left: -200px; margin-top: -190px; z-index: 30; }

/*Inicio cards produtos*/
#div-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; padding-bottom: 40px; min-height: 500px; }
#view-div-cards-produtos { width: 1500px; height: auto; position: relative; margin: auto; }
#toolbar-ecommerce { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
#chamada-div-cards-produtos { width: 500px; height: auto; position: relative; float: left; line-height: 40px; font-size: 35px; color: #7FBA26; }
#chamada-div-cards-produtos span { color: #047837; font-weight: 700; }
#sub-chamada-filtros-produtos { width: 80%; height: auto; position: relative; float: left; font-size: 18px; line-height: 25px; color: #000; margin-top: 10px; }
#box-filtros-cards-produtos { width: 660px; height: auto; position: relative; float: right; margin-top: 140px; }
#chamada-filtros-produtos { width: 100%; height: auto; position: relative; float: left; text-align: right; font-size: 18px; color: #047837; padding: 0px 20px; }
#chamada-filtros-produtos p { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #000; }
#faixa-btns-filtro { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; }

/*Item filtro*/
.btn-filtro { width: 25%; height: auto; position: relative; float: right; padding: 0px 10px; cursor: pointer; }
.btn-filtro-int { width: 100%; height: auto; position: relative; float: left; padding: 15px 20px; background-color: #F8FEF0; border-radius: 10px; border: 1px solid #cce4ad; color: #047837; font-size: 14px; text-align: center; cursor: position }
.btn-filtro-int:hover { background-color: #047837; color: #F8FEF0; }

/*Inicio quadro de cards*/
#div-quadro-cards { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; }
.item-card-produto { width: 25%; height: 690px; position: relative; float: left; margin-bottom: 40px; padding: 0px 20px; }
.item-card-int-produto { width: 100%; height: 100%; position: relative; float: left; border-radius: 40px; border: 2px solid #F2F8EA; overflow: hidden; }
.foto-card-produto { width: 100%; height: auto; position: relative; float: left; background-color: #F2F8EA; }
.circulo-marcacao-card-produto { width: 260px; height: 260px; position: absolute; left: 50%; top: 50%; margin-left: -130px; margin-top: -130px; background-color: #fff; border-radius: 50%; }
.produto-card-ft { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 40px; }
.infos-produto-card { width: 100%; height: auto; position: relative; float: left; padding: 0px 30px; }
.item-card-produto:hover .circulo-marcacao-card-produto { width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -250px; background-color: #fff; border-radius: 50%; }
.tag-produto-card {
    width: 190px;
    height: auto;
    position: absolute;
    left: 20px;
    bottom: -20px;
    color: #fff;
    font-size: 19px;
    padding: 7px 10px;
    border-radius: 10px;
    text-align: center;
    background: #047D3A;
    background: -webkit-linear-gradient(180deg, rgba(4, 125, 58, 1) 0%, rgba(128, 201, 48, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(4, 125, 58, 1) 0%, rgba(128, 201, 48, 1) 100%);
    background: linear-gradient(180deg, rgba(4, 125, 58, 1) 0%, rgba(128, 201, 48, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#047D3A", endColorstr="#80C930", GradientType=0);

}
.infos-produto-card h6 { width: 70%; height: 32px; position: relative; float: left; margin-top: 27px; line-height: 25px; font-size: 20px; color: #047837; font-weight: 600; }
.infos-produto-card p { width: 100%; height: 60px; position: relative; float: left; font-size: 14px; color: #000; margin-top: 22px; }
.infos-valores-card { width: 100%; height: auto; position: relative; float: left; }
.faixa-valor-de { width: 100%; height: auto; position: relative; float: left; margin-top: 5px; }
.valor-de-int { width: auto; height: auto; position: relative; float: left; color: #FC814F; font-size: 18px; text-decoration: line-through; display: block !important; }
.tag-desconto-off { width: auto; height: auto; position: relative; float: right; margin-top: -4px; margin-left: 0px; padding: 7px 15px; font-size: 18px; color: #fff; background-color: #047837; border-radius: 10px; display: block !important; }
.valor-por { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; margin-bottom: -5px; font-size: 13px; color: rgb(0, 0, 0); display: block !important; }
.valor-por span { font-size: 24px; font-weight: 600; }
.faixa-valor-dividido { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; font-size: 16px; display: block !important; color: #9F9F9F; }
.faixa-cta-card-produto { width: 100%; height: 30px; position: absolute; bottom: 40px; padding: 0px 20px; }
.cta-ver-detalhes { width: auto; height: auto; position: relative; float: left; padding: 12px 40px; color: #047837; background-color: #F2F8EA; border: solid 1px #CBDDD3; border-radius: 50px; cursor: pointer; }
.cta-ver-detalhes:hover { background-color: #047837; color: #F2F8EA; }
.cta-carrinho { width: 50px; height: 50px; position: relative; float: right; margin-right: 0px; background-color: #047837; border-radius: 50%; cursor: pointer; display: block !important; }
.icn-cta-carrinho { width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px; background: url('../img/icn-carrinho.png'); background-size: 24px; }
.cta-carrinho:hover { background-color: #35a767; }
#faixa-diferenciais-produto { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; padding-bottom: 50px; }
#view-diferenciais-produto { width: 1400px; height: auto; position: relative; margin: auto; }
#view-diferenciais-produto h6 { width: 550px; height: auto; position: relative; float: left; line-height: 28px; font-size: 22px; color: #000; padding-left: 0.5%; }
#faixa-itens-diferenciais-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.item-diferencial-produto { width: 99%; height: 101px; position: relative; float: left; padding: 20px 20px; background-color: #E2FBC1; border-radius: 20px; }
.icn-check-diferencial-produto { width: 42px; height: 100%; position: relative; float: left; }
.bloco-icn-check-diferencial-produto { width: 50px; height: 50px; position: absolute; left: -7px; top: 50%; margin-top: -25px; background-color: #fff; border-radius: 17px; overflow: hidden; }
.icn-check-diferencial-produto-int { width: 22px; height: 22px; position: absolute; left: 50%; top: 50%; margin-left: -11px; margin-top: -11px; background: url('../img/icn-check.png'); background-size: 22px; }
.txt-card-diferencial-produto { width: 79%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 8px; line-height: 17px; color: #000; font-size: 14px; }
#faixa-ugc { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#titulo-ugc { width: 100%; height: auto; position: relative; float: left; }
#view-titulo-ugc { width: 1400px; height: auto; position: relative; margin: auto; }
#view-titulo-ugc h4 { width: 470px; height: auto; position: relative; float: left; margin-right: 90%; font-size: 39px; color: #7FBA26; line-height: 40px; }
#view-titulo-ugc span { font-weight: 700; color: #047837; }
#view-titulo-ugc p { width: 550px; height: auto; position: relative; float: left; margin-top: 0px; font-size: 17px; }

/*controles UGC*/
#box-controles-ugc { width: 400px; height: auto; position: absolute; right: 0px; bottom: -220px; }
.ctrl-ugc { width: 60px; height: 60px; position: relative; float: right; margin-right: 20px; background-color: #7FBA26; border-radius: 60px; cursor: pointer; display: none;}
.ctrl-ugc:hover { background-color: #9fde3f; }
.arrow-ctrl-ugc { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; }

/*Cards UGC*/
#faixa-cards-ugc { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; overflow: hidden; }

/*Item card UGC*/
.item-card-ugc { width: 320px; height: 500px; position: relative; float: left; margin-left: 20px; border-radius: 40px; overflow: hidden; cursor: pointer; }
.video-card-ugc { position: relative; width: 100%; height: 100%; /* se a div não tiver altura definida, ajuste aqui */ overflow: hidden; }
.video-card-ugc .video-ugc { width: 100%; height: 100%; object-fit: cover; /* preenche tudo (corta um pouco se precisar) */ display: block; }
.conteudo-card-ugc { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 90; }
.nome-ugc { width: 100%; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 12px; font-size: 20px; color: #fff; padding: 20px 20px; font-weight: 600; }
.faixa-review-ugc { width: 100%; height: auto; position: absolute; bottom: 35px; border-radius: 30px; padding-left: 20px; padding-right: 20px; }
.estrela-ugc { width: 18px; height: 18px; position: relative; float: left; margin-left: 10px; background: url('../img/esrela-ugc.png'); background-size: 18px; }
.play-ugc { width: 50px; height: 50px; position: absolute; right: 23px; bottom: -12px; background: url('../img/play-ugc.png'); background-size: 50px; opacity: 0.7; }
.item-card-ugc:hover .play-ugc { opacity: 1; }
#diferenciais-marca { width: 100%; height: auto; position: relative; float: left; margin-top: 55px; }
#view-diferenciais { width: 1300px; height: auto; position: relative; margin: auto; }

/*Item diferencial*/
.item-diferencial { width: 33.3%; height: auto; position: relative; float: left; }
.icone-diferencial { width: 70px; height: 70px; position: relative; float: left; }
.icone-diferencial-int { width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px; }
.diferencial-icone-txt { width: 61%; height: auto; position: relative; float: left; margin-left: 16px; margin-top: 12px; font-size: 17px; color: #000; }
#div-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
#view-div-faq { width: 1400px; height: auto; position: relative; margin: auto; }
#chamada-faq { width: 47%; height: 100%; position: relative; float: left; }
#box-chamada-faq { width: 600px; height: 600px; position: relative; float: left; margin-top: 160px; background-color: #EBFCD3; border-radius: 30px; overflow: hidden; }
#box-chamada-faq-int { width: 100%; height: auto; position: relative; float: left; font-size: 55px; color: #047837; margin-top: 204px; padding-left: 80px; font-weight: 700; line-height: 50px; }
#box-chamada-faq-int span { color: #7FBA26; }
#box-faq { width: 50%; height: auto; position: relative; float: left; padding-top: 300px; }
.collapsible-header { display: flex; align-items: center; gap: 10px; /* espaço entre ícone e texto */ }
.icn-faq { width: 20px;   /* ajuste se quiser maior/menor */ height: 20px; object-fit: contain; flex: 0 0 auto; display: block; }
.collapsible-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; line-height: 1.5; padding: 1rem; font-size: 17px; background-color: #fff; border-bottom: 1px solid #ddd; }
.collapsible { border-top: 0px solid #ddd; border-right: 0px solid #ddd; border-left: 0px solid #ddd; margin: 0.5rem 0 1rem 0; }

/*inicio div S5*/
#div-s5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 240px; margin-top: 130px; background-color: #EDFED7; }
#view-div-s5 { width: 1400px; height: auto; position: relative; margin: auto; }
#view-div-s5 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; font-size: 45px; color: #000000; text-align: center; }
#view-div-s5 span { color: #047837; font-weight: 700; }

/*inicio faixa ornamento div s5*/
#div-faixa-ornamento-div-s5 { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; overflow: hidden; }

/* Esteira */
#esteira-faixa-ornamento-div-s5 { width: 4000px; height: auto; position: relati0e; float: left; margin-left: 0px; -webkit-animation: esteiraOrnamento 40s linear infinite alternate; animation: esteiraOrnamento 40s linear infinite alternate; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-will-change: -webkit-transform; will-change: transform; }
@-webkit-keyframes esteiraOrnamento {
  from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-1000px, 0, 0); -moz-transform: translate3d(-1000px, 0, 0); -ms-transform: translate3d(-1000px, 0, 0); -o-transform: translate3d(-1000px, 0, 0); transform: translate3d(-1000px, 0, 0); }
}
@-moz-keyframes esteiraOrnamento {
  from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-1000px, 0, 0); -moz-transform: translate3d(-1000px, 0, 0); -ms-transform: translate3d(-1000px, 0, 0); -o-transform: translate3d(-1000px, 0, 0); transform: translate3d(-1000px, 0, 0); }
}
@-o-keyframes esteiraOrnamento {
  from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-1000px, 0, 0); -moz-transform: translate3d(-1000px, 0, 0); -ms-transform: translate3d(-1000px, 0, 0); -o-transform: translate3d(-1000px, 0, 0); transform: translate3d(-1000px, 0, 0); }
}
@keyframes esteiraOrnamento {
  from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-1000px, 0, 0); -moz-transform: translate3d(-1000px, 0, 0); -ms-transform: translate3d(-1000px, 0, 0); -o-transform: translate3d(-1000px, 0, 0); transform: translate3d(-1000px, 0, 0); }
}
.item-ornamento-faixa-s5 { width: 240px; height: 240px; position: relative; float: left; margin-left: 20px; background-color: red; border-radius: 30px; overflow: hidden; }
.img-int-faixa-s5 { width: 260px; height: 260px; position: absolute; left: 50%; top: 50%; margin-left: -130px; margin-top: -130px; background-color: rgb(255, 222, 205); }
#sub-chamada-ornamento-s5 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
#view-sub-chamada-s5 { width: 1200px; height: auto; position: relative; margin: auto; }
#view-sub-chamada-s5 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 350px; }
#faixa-icns-div-s5 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#view-faixa-icns-s5 { width: 600px; height: auto; position: relative; margin: auto; }
.item-icn-div-s5 { width: 33.3%; height: 90px; position: relative; float: left; }
.ft-icn-div-s5 { width: 100%; height: auto; position: relative; float: left; }
.ft-int-icn-div-s5 { width: 60px; height: 60px; position: relative; margin: auto; }
.legenda-icn-div-s5 { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #000; bottom: 0px; text-align: center; padding: 0px 0px; }
.fix-icn-caixa { margin-left: 59px; }
.fix-icn-compra { margin-left: 78px; }

/*selo experimente por 30 dias*/
#faixa-selo-30-dias { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
#view-selo-30-dias { width: 450px; height: auto; position: relative; margin: auto; padding: 50px 0px; background-color: #fff; border: 1px solid #b3d289; border-radius: 20px; }
#icone-selo-30 { width: 100px; height: 70px; position: relative; float: left; margin-top: -34px; }
.icn-selo-30 { width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; margin-left: -30px; margin-top: -30px; }
#legenda-selo-30 { width: 75%; height: auto; position: relative; float: left; font-size: 18px; margin-top: -25px; color: #000; }

/*Inicio rodape*/
#container-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; padding-bottom: 20px !important; }
#ornamento-rodape { width: 400px; height: 400px; position: absolute; left: 50%; margin-left: -200px; margin-top: -80px; border-radius: 100%; background-color: #fff; }
#logo-terra-flor-rodape { width: 170px; height: 143px; position: absolute; left: 50%; top: 50%; margin-left: -85px; margin-top: -150px; background: url('../img/logo-terra-flor-rodape.png'); background-size: 170px; }
#view-rodape { width: 1200px; height: auto; position: relative; margin: auto; padding-top: 150px; }
.div-sessao-rodape { width: 33.3%; height: auto; position: relative; float: left; padding: 0px 20px; }
.div-sessao-rodape h4 { width: 100%; height: auto; position: relative; float: left; text-align: center; color: #000; font-size: 22px; font-weight: 600; }
.div-sessao-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; text-align: center; color: #000; font-size: 16px; }
.faixa-cta-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 2px; }
.cta-int-rodape { width: 320px; height: auto; position: relative; margin: auto; padding: 14px 0px 15px 70px; color: #000; border: 1px solid #c2ec8b; border-radius: 40px; font-size: 17px; text-align: left; cursor: pointer; }
.icn-cta-whatsapp { width: 35px; height: 35px; position: absolute; left: 35px; top: 9px; background: url('../img/icn-whatsapp.png'); background-size: 35px; z-index: 10; }
.cta-int-rodape:hover { background-color: #EDFFD2; }

/*cta rodape terra flor*/
.box-cta-terra-flor-rodape { width: 73%; height: auto; position: relative; float: unset; margin: auto; padding-top: 150px; }
.cta-int-rodape-terra-flor { width: 200px; height: auto; position: relative; float: left; padding: 13px 10px; font-size: 17px; text-align: center; margin-top: -8px; border: 1px solid #000; border-radius: 40px; cursor: pointer; }
.box-icn-instagram-rodape { width: 40px; height: 40px; position: relative; float: left; margin-left: 11px; margin-top: -3px; background: url('../img/instagram-icn.png'); background-size: 40px; background-repeat: no-repeat; }
.cta-int-rodape-terra-flor:hover { background-color: #EDFFD2; border: 1px solid #c2ec8b; }
.cta-int-rodape-b { width: 320px; height: auto; position: relative; margin: auto; padding: 14px 20px 15px 20px; color: #000; border: 1px solid #000; border-radius: 40px; font-size: 17px; text-align: center; cursor: pointer; }
.cta-int-rodape-b:hover { background-color: #EDFFD2; border: 1px solid #c2ec8b; }

/*Inicio janelas*/

/*Janela de produto*/
#card-janela-produto { width: 400px; height: 700px; position: fixed; left: 50%; top: 50%; margin-left: -200px; margin-top: -350px; background-color: #fff; border-radius: 30px; overflow: hidden; z-index: 9999; display: none; }
#div-foto-produto-janela { width: 100%; height: auto; position: relative; float: left; background-color: #fff; }
#div-foto-int-produto-janela { width: 100%; height: auto; position: relative; float: left; padding: 20px 90px 0px 90px; }
#faixa-titulo-categoria-card-janela { width: 100%; height: auto; position: relative; float: left; background-color: #E0FF13; padding: 15px 25px; color: #000; }
#titulo-nome-produto-janela { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #000; font-weight: 600; cursor: pointer; }
#faixa-categorias-janela-produto { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #000; }
#descricao-janela-produto { width: 100%; height: 200px; position: relative; float: left; overflow-y: scroll; padding: 20px 20px 0px 20px; }
#descricao-janela-produto p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; margin-bottom: 0px; }

/*cta-card-produto*/
#div-cta-card-produto { width: 100%; height: auto; position: absolute; bottom: 25px; }
.scale-cta-card-produto { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); }
#fechar-janela-produto { width: 60px; height: 60px; position: absolute; right: 30px; top: 30px; background-color: #fff600; border-radius: 50%; z-index: 99; cursor: pointer; }
#fechar-cta-icn { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: url('../img/fechar.png'); background-size: 40px; }

/*Janela UGC*/
#janela-ugc-video-play { width: 338px; height: 600px; position: fixed; left: 50%; top: 50%; margin-left: -169px; margin-top: -300px; background-color: #fff; overflow: hidden; border-radius: 30px; z-index: 9999; display: none; opacity: 0; }
#fechar-janela-video { width: 60px; height: 60px; position: absolute; right: 30px; top: 30px; background-color: #fff; border-radius: 50%; z-index: 99; cursor: pointer; }
#fechar-cta-icn-video { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: url('../img/fechar.png'); background-size: 40px; }
#faixa-cta-video { width: 100%; height: 50px; position: absolute; bottom: 35px; z-index: 99; }
.cta-padrao-lp-janela-video { width: 300px; height: auto; position: relative; margin: auto; text-align: center; padding: 17px 20px 17px 20px; font-size: 16px; color: #fff; font-weight: 600; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; opacity: 0; }

/*Inicio janela produto*/
#janela-cupom-desconto { width: 900px; height: 600px; position: fixed; top: 50%; left: 50%; margin-left: -450px; margin-top: -300px; background-color: #fff; border-radius: 30px; z-index: 9999; overflow: hidden; display: none; opacity: 0; }
#foto-janela-desconto { width: 50%; height: 100%; position: relative; float: left; background-color: #dadada; }
#foto-int-galeria { width: 460px; height: 610px; position: absolute; left: 50%; top: 50%; margin-left: -230px; margin-top: -305px; }
#janela-campos-cupom { width: 50%; height: 100%; position: relative; float: left; padding: 20px 30px; opacity: 0; }
#fechar-janela-cupom { width: 60px; height: 60px; position: absolute; right: 20px; top: 20px; background-color: #fff; border-radius: 50%; z-index: 99; cursor: pointer; }
#fechar-cta-icn-cupom { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; background: url('../img/fechar.png'); background-size: 50px; }
#fechar-janela-cupom:hover { background-color: #E6AAAC; }
#chamada-cupom { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding: 0px 20px; font-size: 28px; color: #000; font-weight: 700; line-height: 35px; }
#subchamada-cupom { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 20px; font-size: 18px; color: #000; font-size: 300; }
#letreiro-cupom-janela { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
#box-letreiro { width: 90%; height: 50px; position: relative; margin: auto; background-color: #FFC72B; font-size: 16px; color: #000; border-radius: 10px; overflow: hidden; }
#esteira-letreiro { width: 200%; height: 100%; position: absolute; left: 0px; top: 0px; }
.item-frase-letreiro { width: 50%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; padding: 15px 20px; font-weight: 700; }
.item-letreiro-a { margin-left: 0%; }
#campos-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 20px 20px; }
#campos-formulario input { width: 89%; height: auto; position: relative; float: left; padding: 15px 20px; background-color: #D0F2FF; border-radius: 30px; border-bottom: 0px solid #0000 !important; }
#faixa-cta-formulario { width: 86%; height: auto; position: absolute; bottom: 91px; }
.cta-padrao-lp-janela-whatsapp { width: 300px; height: auto; position: relative; margin: auto; text-align: center; padding: 17px 20px 17px 20px; font-size: 16px; color: #fff; font-weight: 600; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; opacity: 1; }
.cta-padrao-lp-janela-whatsapp:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, rgba(0, 140, 63, 1) 20%, rgba(170, 235, 70, 1) 80%); }
.toast { border-radius: 2px; top: 35px; width: auto; margin-top: 10px; position: relative; max-width: 100%; height: auto; min-height: 48px; line-height: 1.5em; word-break: break-all; background-color: #ff008f; padding: 10px 25px; font-size: 1.1rem; font-weight: 300; color: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; cursor: default; }
.cancelar-filtro { width: 30px; height: 30px; position: absolute; right: 0px; top: -9px; background-color: rgb(255, 198, 0); border-radius: 70px; z-index: 90; padding: 5px; opacity: 0; }
.btn-filtro .cancelar-filtro, .btn-filtro .cancelar-traco-filtro { opacity: 0; transition: opacity .2s ease; -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -ms-transition: opacity .2s ease; -o-transition: opacity .2s ease; }
.btn-filtro.filtro-ativo .cancelar-filtro, .btn-filtro.filtro-ativo .cancelar-traco-filtro { opacity: 1; }
@media only screen  
and (min-width:1300px) 
and (max-width:1650px) {

  /*Topo LP*/
  #view-blocos-s2 { width: 95%; height: auto; position: relative; margin: auto; max-width: 1250px; }
  .div-bloco-s2-conteudo-int { width: 100%; height: 47%; position: relative; float: left; margin-bottom: 3.5%; border-radius: 40px; overflow: hidden; padding-top: 10px; background-color: #ebf7da; }
  .div-bloco-s2-conteudo-int h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; font-size: 38px; font-weight: 800; text-align: center; color: #047837; }
  .div-bloco-s2-conteudo-int p { width: 100%; height: auto; position: relative; float: left; margin-top: -17px; font-size: 22px; font-weight: 300; text-align: center; color: #047837; }
  .item-lista-bloco-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; margin-top: 40px; margin-bottom: -19px; opacity: 0; }
  .icn-item-conteudo-s2 { width: 45px; height: 45px; position: relative; float: left; background-color: #fff; border-radius: 50%; border: 2px #047837 solid; }
  .txt-item-conteudo-s2 { width: 80%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 1px; font-size: 15px; color: #047837; }
  .icn-int-conteudo-s2 { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }

  /*Inicio o que são neurocosmeticos*/
  #div-s3 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 240px; background-color: #FFC82A; }
  #view-div-s3 { width: 100%; max-width: 1400px; padding: 0px 50px; height: auto; position: relative; margin: auto; }
  #conteudo-txt-div-s3 { width: 45%; height: auto; position: relative; float: left; padding-left: 16px; }
  #conteudo-txt-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 204px; font-size: 46px; color: #000; font-weight: 600; }
  #conteudo-txt-div-s3 p { width: 100%; height: auto; position: relative; float: left; font-size: 19px; color: #000; margin-bottom: 10px; }
  #conteudo-s3-como-funciona { width: 50%; height: auto; position: relative; float: left; margin-left: 5%; }
  #conteudo-s3-como-funciona h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 212px; font-size: 60px; color: #000; font-family: "Reenie Beanie", cursive; }
  .legenda-bloco-passo-a-passo { width: 100%; height: auto; position: absolute; bottom: -63px; font-size: 15px; color: #000; text-align: center; }
  #inicio-bloco-comparacao { width: 100%; height: auto; position: relative; float: left; padding-bottom: 170px; }
  #view-inicio-bloco-comparacao { width: 100%; max-width: 1400px; padding: 0px 50px; height: 100%; position: relative; margin: auto; }
  #view-inicio-bloco-comparacao h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 140px; font-size: 50px; text-align: center; color: #000; font-weight: 600; }
  #view-inicio-bloco-comparacao p { width: 100%; height: auto; position: relative; float: left; font-size: 21px; color: #000; text-align: center; margin-top: -10px; padding: 0px 300px; }
  .item-card-comparacao { width: 50%; height: 100%; position: relative; float: left; margin-top: 60px; }
  #div-sessao-acessivel { width: 100%; height: auto; position: relative; float: left; margin-top: -40px; }
  #view-sessao-acessivel { width: 100%; max-width: 1400px; padding: 0px 50px; height: auto; position: relative; margin: auto; }
  #div-chamada-ciencia-acessivel h3 { width: 85%; height: auto; position: relative; float: left; line-height: 35px; font-size: 23px; color: #000; }
  #div-chamada-ciencia-acessivel span { font-size: 42px; font-weight: 600; color: #FF824E; }
  #sessao-video-bg { width: 100%; height: 700px; position: relative; float: left; margin-top: 120px; background-color: #f5f5f5; overflow: hidden; }
  #view-serum-facial { width: 100%; max-width: 1400px; padding: 0px 50px; height: auto; position: relative; margin: auto; }

  /*Inicio cards produtos*/
  #chamada-div-cards-produtos { width: 720px; height: auto; position: relative; float: left; line-height: 44px; font-size: 41px; color: #7FBA26; }
  #box-filtros-cards-produtos { width: 660px; height: auto; position: relative; float: left; margin-top: 60px; }
  #chamada-filtros-produtos { width: 100%; height: auto; position: relative; float: left; text-align: left; font-size: 18px; color: #047837; padding: 0px 20px; }

  /*Controles UGC*/
  #box-controles-ugc { width: 400px; height: auto; position: absolute; right: 50px; bottom: -220px; }

  /*Inicio beneficios*/
  #faixa-beneficios-serum { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; padding: 0px 50px; }
  .item-txt-beneficio h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 11.5px !important; margin-bottom: 20px; text-align: left !important; font-size: 35px !important; line-height: 41px !important; color: #89C239 !important; }
  .lista-beneficios-serum ul li { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; padding-left: 23px; margin-bottom: 12px; }
  #conteudo-sobre-serum-facial h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 104px; line-height: 49px; font-size: 45px; color: #000; text-align: center; }
  #conteudo-sobre-serum-facial p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; font-size: 20px; color: #000; padding: 0px 310px; }
  #view-div-s4 { width: 100%; max-width: 1400px; padding: 0px 50px; height: auto; position: relative; margin: auto; }
  #view-div-s4 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; color: #000; font-size: 48px; text-align: center; }
  #faixa-passo-a-passo-2 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; font-size: 50px; color: #000; font-family: "Reenie Beanie", cursive; text-align: left; text-align: center; padding: 0px 30px; }
  .legenda-passo-a-passo-b { width: 84%; height: auto; position: absolute; bottom: -80px; color: #000; text-align: center; font-size: 18px; padding: 0px 5px; }
  #view-div-cards-produtos { width: 100%; height: auto; position: relative; margin: auto; max-width: 100%; max-width: 1400px; padding: 0px 50px; }
  .item-card-produto { width: 33%; height: 750px; position: relative; float: left; margin-bottom: 40px; padding: 0px 20px; }
  .produto-card-ft { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 40px; }
  #view-diferenciais-produto { width: 100%; max-width: 100%; padding: 0px 0px; height: auto; position: relative; margin: auto; }
  #view-diferenciais-produto h6 { width: 550px; height: auto; position: relative; float: left; line-height: 31px; font-size: 26px; color: #000; padding-left: 0.5%; padding: 0px 50px; }
  .txt-card-diferencial-produto { width: 78%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 6px; line-height: 21px; color: #000; font-size: 16px; }
  #view-titulo-ugc { width: 100%; max-width: 1400px; padding: 0px 50px; height: auto; position: relative; margin: auto; }
  #view-diferenciais { width: 100%; max-width: 1300px; padding: 0px 50px; height: auto; position: relative; margin: auto; }
  #view-div-faq { width: 100%; max-width: 1400px; padding: 0px 50px; height: auto; position: relative; margin: auto; }
  #chamada-faq { width: 47%; height: 100%; position: relative; float: left; }
  #box-chamada-faq { width: 510px; height: 510px; position: relative; float: left; margin-left: 30px; margin-top: 130px; background-color: #EBFCD3; border-radius: 30px; overflow: hidden; }
  #box-chamada-faq-int { width: 100%; height: auto; position: relative; float: left; font-size: 49px; color: #047837; margin-top: 156px; padding-left: 80px; font-weight: 700; line-height: 50px; }
  #box-faq { width: 50%; height: auto; position: relative; float: left; padding-top: 210px; }

  /*inicio div S5*/
  #div-s5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 200px; margin-top: 150px; background-color: #EDFED7; }
  #view-div-s5 { width: 1250px; height: auto; position: relative; margin: auto; }
  #view-div-s5 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 140px; font-size: 41px; color: #000000; text-align: center; }
  #view-sub-chamada-s5 { width: 100%; max-width: 1400px; padding: 0px 50px; height: auto; position: relative; margin: auto; }
  #view-sub-chamada-s5 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 360px; }
  .icone-diferencial-int { width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -22px; }

  /*Inicio rodape*/
  #container-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; padding-bottom: 210px; }
  #box-filtros-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; }
  #faixa-btns-filtro { width: 99%; height: auto; position: relative; float: left; margin-top: 12px; }

  /*Item filtro*/
  .btn-filtro { width: 25%; height: auto; position: relative; float: right; padding: 0px 10px; cursor: pointer; }
  .btn-filtro-int { width: 96%; height: auto; position: relative; float: left; padding: 20px 20px; background-color: #F8FEF0; border-radius: 10px; border: 1px solid #cce4ad; color: #047837; font-size: 18px; text-align: center; line-height: 19px; padding: 20px 80px; cursor: position; }
}
@media only screen  
and (min-width:1000px) 
and (max-width:1300px) {
  #lista-itens-menu { width: 520px; height: auto; position: relative; float: left; margin-left: -20px; margin-top: 11px; }
  #lista-itens-menu ul li { width: auto; height: auto; position: relative; float: left; margin-left: 20px; font-size: 20px; color: #fff; cursor: pointer; font-weight: 300; z-index: 10; font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }
  #view-menu-fixo { width: 95%; height: auto; position: relative; margin: auto; max-width: 100%; }
  .telas-menores { display: none; }

  /*Inicio LP*/
  #topo-lp { width: 100%; height: 100%; min-height: 100px; position: relative; float: left; min-height: 1100px; }

  /*Segunda sessão LP*/
  #div-s2-lp { width: 100%; height: 900px; position: relative; float: left; }
  #ft3-b1 { width: 100%; height: 47%; position: relative; float: left; margin-left: 0%; margin-top: 20px; border-radius: 40px; overflow: hidden; opacity: 0; }
  .ft-int-ft1 { width: 500px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -201px; margin-top: -148px; background: url('../img/mc-1.png'); background-size: 510px; }
  .ft-int-ft3 { width: 360px; height: 290px; position: absolute; left: 50%; top: 50%; margin-left: -133px; margin-top: -144px; background: url('../img/ft-02-b.png'); background-size: 260px; }
  #view-div-s3 { width: 950px; height: auto; position: relative; margin: auto; }
  #conteudo-txt-div-s3 { width: 100%; height: auto; position: relative; float: left; }
  #conteudo-txt-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 135px; font-size: 47px; margin-bottom: 4px; color: #000; text-align: center; font-weight: 600; padding: 0px 200px; }
  #conteudo-txt-div-s3 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; margin-bottom: 10px; padding: 0px 190px; }

  /*Blocos fotos S2*/
  .div-bloco-foto-s2 { width: 25%; height: 600px; position: relative; float: left; }
  .div-bloco-s2-conteudo { width: 50%; height: 600px; position: relative; float: left; padding: 0px 22px; }
  .div-bloco-s2-conteudo-int h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; font-size: 41px; font-weight: 800; text-align: center; color: #047837; }
  .div-bloco-s2-conteudo-int p { width: 100%; height: auto; position: relative; float: left; margin-top: -17px; font-size: 22px; font-weight: 300; text-align: center; color: #047837; }
  .item-lista-bloco-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 28px; margin-top: 40px; margin-bottom: -15px; opacity: 0; }
  .txt-item-conteudo-s2 { width: 76%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 1px; font-size: 15px; color: #047837; }
  .ft4-b1 { width: 100%; height: 97%; position: relative; float: left; border-radius: 40px; overflow: hidden; opacity: 0; }
  .ft4-b1-int { width: 330px; height: 600px; position: absolute; left: 50%; top: 50%; margin-left: -160px; margin-top: -300px; background: url(../img/gel-aloe-vera.png); background-size: 320px; }

  /*CTA padrão*/
  .cta-padrao-lp-b { width: 380px; height: auto; position: relative; left: unset; margin: auto; text-align: center; padding: 17px 20px 17px 20px; font-size: 18px; color: #fff; font-weight: 700; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; }
  #conteudo-s3-como-funciona { width: 100%; height: auto; position: relative; float: left; margin-left: 0%; }
  #conteudo-s3-como-funciona h3 { width: 100%; height: auto; position: relative; float: left; text-align: center; margin-top: 75px; font-size: 60px; color: #000; font-family: "Reenie Beanie", cursive; }
  .container-video-passo-a-passo { width: 300px; height: 320px; position: absolute; left: 50%; top: 50%; margin-left: -137px; margin-top: -160px; overflow: hidden; }
  #view-inicio-bloco-comparacao { width: 90%; height: 100%; position: relative; margin: auto; }
  #view-inicio-bloco-comparacao h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 52px; text-align: center; color: #000; font-weight: 600; }
  #view-inicio-bloco-comparacao p { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #000; text-align: center; margin-top: -10px; padding: 0px 220px; }
  #view-cards-comparacao { width: 950px; height: auto; position: relative; margin: auto; }

  /*Inicio Ciência acessivel*/
  #div-sessao-acessivel { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
  #view-sessao-acessivel { width: 950px; height: atuo; position: relative; margin: auto; }
  #div-chamada-ciencia-acessivel h3 { width: 85%; height: auto; position: relative; float: left; line-height: 35px; font-size: 22px; color: #000; margin-top: 5px; }
  #div-chamada-ciencia-acessivel span { font-size: 40px; font-weight: 600; color: #FF824E; }
  #sessao-video-bg { width: 100%; height: 700px; position: relative; float: left; margin-top: 90px; background-color: #f5f5f5; overflow: hidden; }
  #inicio-sessao-serum-facial { width: 100%; height: auto; position: relative; float: left; background-color: #FFF; }
  #view-serum-facial { width: 950px; height: auto; position: relative; margin: auto; }
  #view-circulos-bg { width: 950px; height: auto; position: relative; margin: auto; padding-top: 170px; overflow: hidden; }
  .item-circulo-bg { width: 300px; height: 300px; position: relative; float: left; margin-right: 25px; background-color: #FF4D3E; border-radius: 100%; -webkit-transform: translateY(-700px); -moz-transform: translateY(-700px); -ms-transform: translateY(-700px); -o-transform: translateY(-700px); transform: translateY(-700px); opacity: 0; -webkit-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -moz-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -o-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -webkit-will-change: transform, opacity; -moz-will-change: transform, opacity; will-change: transform, opacity; }
  #inicio-cartucho-serum { width: 350px; height: 2700px; position: absolute; left: 50%; margin-left: -175px; top: -181px; }
  #conteudo-sobre-serum-facial h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; line-height: 42px; font-size: 40px; color: #000; text-align: center; }
  #conteudo-sobre-serum-facial p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; font-size: 20px; color: #000; padding: 0px 170px; }
  .item-foto-beneficio { width: 50%; height: 320px; position: relative; float: left; border-radius: 20px; background-color: #dadada; overflow: hidden; }
  .item-foto-beneficio-int { width: 490px; height: 290px; position: absolute; left: 50%; top: 50%; margin-left: -240px; margin-top: -182px; background-color: rgb(255, 222, 205); }
  .item-txt-beneficio { width: 50%; height: 400px; position: relative; float: left; padding: 0px 40px; }
  #faixa-ideal-para h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px;        /* margin-bottom: 0px; */ font-size: 55px; color: #047837; font-weight: 700; text-align: center; }

  /*inicio div Sessão 04*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #BBE73A; margin-top: 170px; padding-bottom: 240px; }
  #view-div-s4 { width: 950px; height: auto; position: relative; margin: auto; }
  #view-div-s4 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; color: #000; font-size: 50px; text-align: center; }
  #view-div-s4 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 180px; margin-top: 8px; }

  /*item passo a passo 2*/
  .item-passo-a-passo-b { width: 25%; height: auto; position: relative; float: left; padding: 0px 10px; }
  .legenda-passo-a-passo-b { width: 94%; height: auto; position: absolute; bottom: -80px; color: #000; text-align: center; font-size: 17px; padding: 0px 10px; }
  #view-faixa-ritual { width: 950px; height: auto; position: relative; margin: auto; }
  #chamada-ritual-terra-flor p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 160px; }
  #view-div-cards-produtos { width: 950px; height: auto; position: relative; margin: auto; }
  #box-filtros-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; }
  #chamada-filtros-produtos { width: 100%; height: auto; position: relative; float: left; text-align: left; font-size: 18px; color: #047837; padding: 0px 20px; }
  .item-card-produto { width: 50%; height: auto; position: relative; float: left; margin-bottom: 40px; padding: 0px 20px; }
  .item-card-int-produto { width: 100%; height: 100%; position: relative; float: left; border-radius: 40px; border: 2px solid #F2F8EA; overflow: hidden; padding-bottom: 140px; }
  #view-diferenciais-produto { width: 950px; height: auto; position: relative; margin: auto; }
  #view-titulo-ugc { width: 900px; height: auto; position: relative; margin: auto; }
  #view-titulo-ugc p { width: 550px; height: auto; position: relative; float: left; margin-top: 8px; font-size: 17px; }

  /*controles UGC*/
  #box-controles-ugc { width: 400px; height: auto; position: absolute; right: 0px; bottom: -229px; }
  #view-diferenciais { width: 950px; height: auto; position: relative; margin: auto; }
  .diferencial-icone-txt { width: 61%; height: auto; position: relative; float: left; margin-left: 16px; margin-top: 7px; font-size: 14px; color: #000; }
  #view-div-faq { width: 950px; height: auto; position: relative; margin: auto; }
  #chamada-faq { width: 43%; height: 100%; position: relative; float: left; }
  #box-chamada-faq { width: 370px; height: 600px; position: relative; float: left; margin-top: 130px; background-color: #EBFCD3; border-radius: 30px; overflow: hidden; }
  #box-chamada-faq-int { width: 100%; height: auto; position: relative; float: left; font-size: 45px; color: #047837; margin-top: 225px; padding-left: 50px; font-weight: 700; line-height: 42px; }
  #box-faq { width: 54%; height: auto; position: relative; float: left; padding-top: 270px; }
  #view-div-s5 { width: 950px; height: auto; position: relative; margin: auto; }
  #view-div-s5 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 140px; font-size: 38px; color: #000000; text-align: center; }
  #view-rodape { width: 950px; height: auto; position: relative; margin: auto; padding-top: 150px; }

  /*Inicio ritual*/
  #div-s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 100px; display: none; }
  #chamada-div-cards-produtos { width: 800px; height: auto; position: relative; float: left; line-height: 44px; font-size: 40px; margin-top: 30px; margin-bottom: -20px; color: #7FBA26; }
  #sub-chamada-filtros-produtos { width: 80%; height: auto; position: relative; float: left; font-size: 20px; line-height: 28px; color: #000; margin-top: 10px; }
  .btn-filtro-int { width: 100%; height: auto; position: relative; float: left; padding: 15px 20px; background-color: #F8FEF0; border-radius: 10px; border: 1px solid #cce4ad; color: #047837; font-size: 16px; padding: 20px 40px; text-align: center; cursor: position; }
  #div-s5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 170px; margin-top: 170px; background-color: #EDFED7;        /* display: none; */ }
  #view-sub-chamada-s5 { width: 950px; height: auto; position: relative; margin: auto; }
  #view-sub-chamada-s5 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 170px; }
  #container-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; padding-bottom: 80px;    /* display: none; */ }
  .div-sessao-rodape h4 { width: 100%; height: auto; position: relative; float: left; text-align: center; color: #000; font-size: 21px; font-weight: 600; }
  .cta-int-rodape { width: 293px; height: auto; position: relative; margin: auto; padding: 14px 0px 15px 61px; color: #000; border: 1px solid #c2ec8b; border-radius: 40px; font-size: 15px; text-align: left; cursor: pointer; }
  .icn-cta-whatsapp { width: 30px; height: 30px; position: absolute; left: 14px; top: 11px; background: url('../img/icn-whatsapp.png'); background-size: 30px; z-index: 10; }

  /*cta rodape terra flor*/
  .box-cta-terra-flor-rodape { width: 85%; height: auto; position: relative; float: unset; margin: auto; padding-top: 150px; }
  .cta-int-rodape-terra-flor { width: 183px; height: auto; position: relative; float: left; padding: 13px 10px; font-size: 16px; text-align: center; margin-top: -8px; border: 1px solid #000; border-radius: 40px; cursor: pointer; }
  .box-icn-instagram-rodape { width: 40px; height: 40px; position: relative; float: left; margin-left: 11px; margin-top: -3px; background: url('../img/instagram-icn.png'); background-size: 40px; background-repeat: no-repeat; }
  .cta-int-rodape-b { width: 274px; height: auto; position: relative; margin: auto; padding: 14px 20px 15px 20px; color: #000; border: 1px solid #000; border-radius: 40px; font-size: 15px; text-align: center; cursor: pointer; }
  .infos-produto-card h6 { width: 76%; height: 32px; position: relative; float: left; margin-top: 48px; line-height: 29px; font-size: 24px; color: #047837; font-weight: 600; }
  .infos-produto-card p { width: 100%; height: 60px; position: relative; float: left; font-size: 16px; color: #000; margin-top: 30px; margin-bottom: 25px; }
  .produto-card-ft { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 80px; }

  /*faixa passo a passo */
  #faixa-passo-a-passo-2 { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; }
  .bloco-lista-comparacao { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 40px; }
  .txt-card-diferencial-produto { width: 79%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 8px; line-height: 18px; color: #000; font-size: 16px; }
}
@media only screen  
and (min-width:750px) 
and (max-width:1000px) {
  #view-menu-fixo { width: 95%; height: auto; position: relative; margin: auto; max-width: 100%; }
  .telas-menores { display: none; }
  .hide-tablet { display: none; }
  #lista-itens-menu { width: 620px; height: auto; position: relative; float: left; margin-left: -20px; margin-top: 11px; }
  #lista-itens-menu ul li { width: auto; height: auto; position: relative; float: left; margin-left: 20px; font-size: 20px; color: #fff; cursor: pointer; font-weight: 300; z-index: 10; font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }

  /*Inicio LP*/
  #topo-lp { width: 100%; height: 100%; min-height: 100px; position: relative; float: left; }

  /*Segunda sessão LP*/
  #div-s2-lp { width: 100%; height: 900px; position: relative; float: left; }
  #ft3-b1 { width: 100%; height: 47%; position: relative; float: left; margin-left: 0%; margin-top: 20px; border-radius: 40px; overflow: hidden; opacity: 0; }
  .ft-int-ft1 { width: 500px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -201px; margin-top: -148px; background: url('../img/mc-1.png'); background-size: 510px; }
  .ft-int-ft3 { width: 360px; height: 290px; position: absolute; left: 50%; top: 50%; margin-left: -133px; margin-top: -144px; background: url('../img/ft-02-b.png'); background-size: 260px; }
  #view-div-s3 { width: 740px; height: auto; position: relative; margin: auto; }
  #conteudo-txt-div-s3 { width: 100%; height: auto; position: relative; float: left; }
  #conteudo-txt-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 125px; font-size: 40px; margin-bottom: 4px; color: #000; text-align: center; font-weight: 600; padding: 0px 200px; }
  #conteudo-txt-div-s3 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; margin-bottom: 10px; padding: 0px 90px; }

  /*Blocos fotos S2*/
  .div-bloco-foto-s2 { width: 34%; height: 600px; position: relative; float: left; }
  .div-bloco-s2-conteudo { width: 61%; height: 600px; position: relative; float: left; padding: 0px 22px; }
  .div-bloco-s2-conteudo-int h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; font-size: 41px; font-weight: 800; text-align: center; color: #047837; }
  .div-bloco-s2-conteudo-int p { width: 100%; height: auto; position: relative; float: left; margin-top: -17px; font-size: 22px; font-weight: 300; text-align: center; color: #047837; }
  .item-lista-bloco-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 28px; margin-top: 40px; margin-bottom: -15px; opacity: 0; }
  .txt-item-conteudo-s2 { width: 76%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 1px; font-size: 15px; color: #047837; }
  .ft4-b1 { width: 100%; height: 97%; position: relative; float: left; border-radius: 40px; overflow: hidden; opacity: 0; }
  .ft4-b1-int { width: 330px; height: 600px; position: absolute; left: 50%; top: 50%; margin-left: -160px; margin-top: -300px; background: url(../img/gel-aloe-vera.png); background-size: 320px; }

  /*CTA padrão*/
  .cta-padrao-lp-b { width: 380px; height: auto; position: relative; left: unset; margin: auto; text-align: center; padding: 17px 20px 17px 20px; font-size: 18px; color: #fff; font-weight: 700; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; }
  #conteudo-s3-como-funciona { width: 100%; height: auto; position: relative; float: left; margin-left: 0%; padding: 0px 30px; }
  #conteudo-s3-como-funciona h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 85px; font-size: 60px; color: #000; font-family: "Reenie Beanie", cursive; }
  .container-video-passo-a-passo { width: 300px; height: 320px; position: absolute; left: 50%; top: 50%; margin-left: -137px; margin-top: -160px; overflow: hidden; }
  #view-inicio-bloco-comparacao { width: 90%; height: 100%; position: relative; margin: auto; }
  #view-inicio-bloco-comparacao h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 140px; font-size: 40px; text-align: center; color: #000; font-weight: 600; }
  #view-inicio-bloco-comparacao p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; margin-top: -10px; padding: 0px 20px; }
  #view-cards-comparacao { width: 100%; height: auto; position: relative; margin: auto; }

  /*Inicio Ciência acessivel*/
  #div-sessao-acessivel { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
  #view-sessao-acessivel { width: 670px; height: atuo; position: relative; margin: auto; }
  #div-chamada-ciencia-acessivel h3 { width: 85%; height: auto; position: relative; float: left; line-height: 24px; font-size: 16px; color: #000; margin-top: 30px; }
  #div-chamada-ciencia-acessivel span { font-size: 35px; font-weight: 600; color: #FF824E; }
  #sessao-video-bg { width: 100%; height: 420px; position: relative; float: left; margin-top: 100px; background-color: #f5f5f5; overflow: hidden; }
  #inicio-sessao-serum-facial { width: 100%; height: auto; position: relative; float: left; background-color: #FFF;        /* display: none; */ }
  #view-serum-facial { width: 740px; height: auto; position: relative; margin: auto; }
  #view-circulos-bg { width: 100%; height: auto; position: relative; margin: auto; padding-top: 100px; overflow: hidden; }
  .item-circulo-bg { width: 230px; height: 230px; position: relative; float: left; margin-right: 25px; background-color: #FF4D3E; border-radius: 100%; -webkit-transform: translateY(-700px); -moz-transform: translateY(-700px); -ms-transform: translateY(-700px); -o-transform: translateY(-700px); transform: translateY(-700px); opacity: 0; -webkit-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -moz-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -o-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -webkit-will-change: transform, opacity; -moz-will-change: transform, opacity; will-change: transform, opacity; }
  #inicio-cartucho-serum { width: 330px; height: 2700px; position: absolute; left: 50%; margin-left: -174px; top: -221px; }
  #conteudo-sobre-serum-facial h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; line-height: 42px; font-size: 40px; color: #000; text-align: center; }
  #conteudo-sobre-serum-facial p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; font-size: 19px; color: #000; padding: 0px 140px; }
  .item-foto-beneficio { width: 50%; height: 320px; position: relative; float: left; border-radius: 20px; background-color: #dadada; overflow: hidden; }
  .item-foto-beneficio-int { width: 490px; height: 290px; position: absolute; left: 50%; top: 50%; margin-left: -240px; margin-top: -182px; background-color: rgb(255, 222, 205); }
  .item-txt-beneficio { width: 50%; height: 400px; position: relative; float: left; padding: 0px 40px; }
  #faixa-ideal-para h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 55px; color: #047837; font-weight: 700; text-align: center; }

  /*inicio div Sessão 04*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #BBE73A; margin-top: 220px; padding-bottom: 140px; display:;        /* display: none; */ }
  #view-div-s4 { width: 90%; height: auto; position: relative; margin: auto; }
  #view-div-s4 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; color: #000; font-size: 41px; text-align: center; }
  #view-div-s4 p { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #000; text-align: center; padding: 0px 50px; margin-top: 8px; }

  /*item passo a passo 2*/
  .item-passo-a-passo-b { width: 50%; height: auto; position: relative; float: left; padding: 0px 10px; margin-bottom: 90px; }
  .legenda-passo-a-passo-b { width: 94%; height: auto; position: absolute; bottom: -74px; color: #000; text-align: center; font-size: 17px; padding: 0px 10px; }
  #view-faixa-ritual { width: 740px; height: auto; position: relative; margin: auto; }
  #chamada-ritual-terra-flor p { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #000; text-align: center; padding: 0px 160px; }
  #view-div-cards-produtos { width: 740px; height: auto; position: relative; margin: auto; }
  #box-filtros-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; }
  #chamada-filtros-produtos { width: 100%; height: auto; position: relative; float: left; text-align: left; font-size: 18px; color: #047837; padding: 0px 20px; }
  .item-card-produto { width: 50%; height: auto; position: relative; float: left; margin-bottom: 40px; padding: 0px 20px; }
  .item-card-int-produto { width: 100%; height: 100%; position: relative; float: left; border-radius: 40px; border: 2px solid #F2F8EA; overflow: hidden; padding-bottom: 140px; }
  #view-diferenciais-produto { width: 100%; height: auto; position: relative; margin: auto; }
  #view-titulo-ugc { width: 740px; height: auto; position: relative; margin: auto; }
  #view-titulo-ugc p { width: 460px; height: auto; position: relative; float: left; margin-top: 8px; font-size: 17px; }

  /*controles UGC*/
  #box-controles-ugc { width: 200px; height: auto; position: absolute; right: 30px; bottom: -299px; }
  #view-diferenciais { width: 100%; height: auto; position: relative; margin: auto; }
  .diferencial-icone-txt { width: 100%; height: auto; position: relative; float: left; margin-left: 0px; margin-top: 17px; font-size: 14px; color: #000; padding: 0px 30px; text-align: center; }
  #view-div-faq { width: 740px; height: auto; position: relative; margin: auto; }
  #chamada-faq { width: 100%; height: 100%; position: relative; float: left; }
  #box-chamada-faq { width: 90%; height: 290px; position: relative; float: left; margin-left: 5%; margin-top: 100px; background-color: #EBFCD3; border-radius: 30px; overflow: hidden; }
  #box-chamada-faq-int { width: 100%; height: auto; position: relative; float: left; font-size: 45px; color: #047837; margin-top: 85px; padding-left: 50px; font-weight: 700; line-height: 42px; }
  #box-faq { width: 100%; height: auto; position: relative; float: left; padding-top: 60px; padding-left: 60px; padding-right: 60px; }
  #view-div-s5 { width: 740px; height: auto; position: relative; margin: auto; }
  #view-div-s5 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; font-size: 36px; color: #000000; text-align: center; }
  #view-rodape { width: 100%; height: auto; position: relative; margin: auto; padding-top: 150px; }

  /*Inicio ritual*/
  #div-s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 92px;        /* display: none; */ }
  #chamada-div-cards-produtos { width: 740px; height: auto; position: relative; float: left; line-height: 44px; font-size: 40px; margin-top: 30px; margin-bottom: -20px; color: #7FBA26; }
  #sub-chamada-filtros-produtos { width: 80%; height: auto; position: relative; float: left; font-size: 20px; line-height: 28px; color: #000; margin-top: 10px; }
  .btn-filtro-int { width: 100%; height: auto; position: relative; float: left; padding: 15px 20px; background-color: #F8FEF0; border-radius: 10px; border: 1px solid #cce4ad; color: #047837; font-size: 18px; padding: 20px 80px; text-align: center; cursor: position; }
  #div-s5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 180px; margin-top: 70px; background-color: #EDFED7;        /* display: none; */ }
  #view-sub-chamada-s5 { width: 740px; height: auto; position: relative; margin: auto; }
  #view-sub-chamada-s5 p { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #000; text-align: center; padding: 0px 90px; }
  #container-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; padding-bottom: 20px;        /* display: none; */ }
  .div-sessao-rodape h4 { width: 100%; height: auto; position: relative; float: left; text-align: center; color: #000; font-size: 21px; font-weight: 600; }
  .cta-int-rodape { width: 293px; height: auto; position: relative; margin: auto; padding: 14px 0px 15px 61px; color: #000; border: 1px solid #c2ec8b; border-radius: 40px; font-size: 15px; text-align: left; cursor: pointer; }
  .icn-cta-whatsapp { width: 30px; height: 30px; position: absolute; left: 14px; top: 11px; background: url('../img/icn-whatsapp.png'); background-size: 30px; z-index: 10; }

  /*cta rodape terra flor*/
  .box-cta-terra-flor-rodape { width: 53%; height: auto; position: relative; float: unset; margin: auto; padding-top: 20px; }
  .cta-int-rodape-terra-flor { width: 183px; height: auto; position: relative; float: left; padding: 13px 10px; font-size: 16px; text-align: center; margin-top: -8px; border: 1px solid #000; border-radius: 40px; cursor: pointer; }
  .box-icn-instagram-rodape { width: 40px; height: 40px; position: relative; float: left; margin-left: 11px; margin-top: -3px; background: url('../img/instagram-icn.png'); background-size: 40px; background-repeat: no-repeat; }
  .cta-int-rodape-b { width: 274px; height: auto; position: relative; margin: auto; padding: 14px 20px 15px 20px; color: #000; border: 1px solid #000; border-radius: 40px; font-size: 15px; text-align: center; cursor: pointer; }
  .infos-produto-card h6 { width: 76%; height: 32px; position: relative; float: left; margin-top: 28px; line-height: 27px; font-size: 21px; color: #047837; font-weight: 600; }
  .infos-produto-card p { width: 100%; height: 60px; position: relative; float: left; font-size: 16px; color: #000; margin-top: 30px; margin-bottom: 25px; }
  .produto-card-ft { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 20px; }

  /*faixa passo a passo */
  #faixa-passo-a-passo-2 { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; }
  .bloco-lista-comparacao { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 40px; }
  .txt-card-diferencial-produto { width: 79%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 8px; line-height: 18px; color: #000; font-size: 16px; }
  .div-sessao-rodape { width: 100%; height: auto; position: relative; float: left; padding: 0px 230px; margin-bottom: 40px; }
  #logo-terra-flor-rodape { width: 170px; height: 144px; position: absolute; left: 50%; top: 50%; margin-left: -85px; margin-top: -150px; background: url('../img/logo-terra-flor-rodape.png'); background-size: 170px; }
  #div-faq { width: 100%; height: auto; position: relative; float: left; margin-top: -40px; display:;    /* display: none; */ }
  .icone-diferencial { width: 100%; height: 70px; position: relative; float: left; }
  #diferenciais-marca { width: 100%; height: auto; position: relative; float: left; margin-top: 55px; display:;    /* display: none; */ }
  #view-titulo-ugc h4 { width: 370px; height: auto; position: relative; float: left; margin-right: 90%; font-size: 39px; color: #7FBA26; line-height: 40px; }
  #faixa-ugc { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; display:; padding: 0px 0px; overflow: hidden; }
  #titulo-ugc { width: 100%; height: auto; position: relative; float: left; padding: 0px 30px; }
  #view-diferenciais-produto h6 { width: 550px; height: auto; position: relative; float: left; line-height: 26px; font-size: 20px; color: #000; padding-left: 0.5%; padding: 0px 33px; }
  #faixa-diferenciais-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding-bottom: 50px; display:;    /* display: none; */ }

  /*Item filtro*/
  .btn-filtro { width: 50%; height: auto; position: relative; float: right; padding: 0px 10px; cursor: pointer; margin-bottom: 11px; }
  #toolbar-ecommerce { width: 100%; height: auto; position: relative; float: left; padding: 0px 30px; }
  #ritual-sessao-s5 { width: 330px; height: 600px; position: absolute; left: 50%; margin-left: -170px; margin-top: -190px; z-index: 30; }

  /*Inicio cards produtos*/
  #div-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding-bottom: 40px; min-height: 500px; overflow: hidden; }
  #view-circulos-produtos { width: 740px; height: auto; position: relative; margin: auto; }

  /* Estrutura base */
  .item-circulo-bg-ritual-b { width: 220px; height: 220px; position: relative; float: left; margin-right: 40px; border-radius: 50%; opacity: 0; -webkit-animation: fadeSequencial 2s ease forwards; -moz-animation: fadeSequencial 2s ease forwards; -o-animation: fadeSequencial 2s ease forwards; animation: fadeSequencial 2s ease forwards; -webkit-will-change: opacity; -moz-will-change: opacity; will-change: opacity; }
  #chamada-ritual-terra-flor h6 { width: 100%; height: auto; position: relative; float: left; font-size: 42px; color: #000; text-align: center; }
  .foto-int-passo-a-pass-b { width: 350px; height: 350px; position: absolute; left: 50%; top: 50%; margin-left: -165px; margin-top: -155px; background-color: rgb(255, 222, 205); }
  .lista-beneficios-serum ul li { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #000; padding-left: 23px; margin-bottom: 12px; }
  .item-txt-beneficio h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 17.5px !important; margin-bottom: 20px; text-align: left !important; font-size: 35px !important; line-height: 39px !important; color: #89C239 !important; }

  /*Inicio beneficios*/
  #faixa-beneficios-serum { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; padding: 0px 70px; }
  .item-comparacao-txt { width: 80%; height: auto; position: relative; float: left; margin-left: 9px; font-size: 16px; color: #000; }
  .item-card-comparacao { width: 50%; height: 100%; position: relative; float: left; margin-top: 10px; }
  .titulo-card-comparacao { width: 70%; height: auto; position: relative; text-align: center; margin: auto; padding: 20px 20px; background-color: #C71270; border-radius: 60px; color: #fff; font-size: 14px; }
  .titulo-card-comparacao-outros { width: 70%; height: auto; position: relative; text-align: center; margin: auto; padding: 19px 20px; background-color: #fff; border: 2px solid #C71270; border-radius: 60px; color: #C71270; font-size: 14px; }
  .foto-card-comparacao { width: 100%; height: 460px; position: relative; float: left; margin-top: 50px; padding: 0px 20px; opacity: 1; }
  .legenda-bloco-passo-a-passo { width: 99%; height: auto; position: absolute; bottom: -70px; font-size: 18px; color: #000; text-align: center; }
  #inicio-bloco-comparacao { width: 100%; height: 1260px; position: relative; float: left; }
  .item-out-passo-a-passo { width: 30%; height: 300px; position: relative; float: left; margin-left: 1.5%; margin-right: 1.5%; }
  #div-galeria-de-fotos { width: 100%; height: auto; position: relative; float: left; margin-top: 160px; background-color: #dadada; overflow: hidden; }
  #bloco-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; }
  #cta-cupom-fisico { width: 400px; height: 172px; position: fixed; left: 50%; margin-left: -194px; bottom: -530px; right: 20px; background: url('../img/cta-cupom.png'); background-size: 400px; z-index: 600; }
}

@media only screen  
and (min-width:400px) 
and (max-width:750px) {


  #cta-produzir-conteudo { width: auto; height: auto; position: relative; float: right; margin-top: 15px; margin-right: 15px; padding: 11px 22px 11px 22px; color: #000; font-size: 14px; font-weight: 600; background-color: #047837; color: #ffffff; border-radius: 30px; cursor: pointer; }
  #logo-menu-fixo { width: 160px; height: 45px; position: relative; float: left; margin-left: 18px; margin-top: 14px; background: url('../img/logo-tf.png'); background-size: 160px; }
  #bg-menu-fixo { width: 100%; height: 75px; position: absolute; left: 0px; top: 0px; background-color: #63b82f; border: 1px solid #a7e87e; border-radius: 120px; opacity: 0; transition: opacity 0.2s linear; }
  .hide-m-mobile { display: none; }
  #topo-lp { width: 100%; height: 100%; min-height: 860px; position: relative; float: left; }
  #conteudo-div-topo { width: 100%; height: 350px; position: absolute; top: 50%; margin-top: -290px; z-index: 150; }
  #div-view-conteudo-topo {
        width: 100%;
        height: 100%;
        position: relative;
        margin: auto;
        padding-top: 150px;
    
    }
  #logo-terraflor-topo { width: 190px; height: 58px; position: relative; margin: auto; background: url(../img/logo-terra-flor.png); background-size: 190px; opacity: 0; margin-bottom: -10px; }
  #div-view-conteudo-topo h1 {
        width: 100%;
        height: auto;
        position: relative;
        float: left;
        text-align: center;
        font-size: 37px;
        font-weight: 700;
        color: #FFC82A;
        padding: 0px 25px;
    
    }
  #div-view-conteudo-topo h1 span {
        font-weight: 400;
        color: #FFF;
        font-size: 22px;
        margin-top: -13px;
        line-height: 0px;
    
    }
  #faixa-sinais-de-confianca { width: 100%; height: 80px; position: relative; float: left; background-color: #7EBA27; overflow: hidden; }
  #esteira-faixa-sinais-confianca { width: 3100px; height: 48px; position: absolute; top: 15px; left: 0px; background: url('../img/sinais-confianca.png'); background-size: 2710px; -webkit-animation: esteiraSinaisConfianca 50s linear infinite; -moz-animation: esteiraSinaisConfianca 50s linear infinite; -o-animation: esteiraSinaisConfianca 50s linear infinite; animation: esteiraSinaisConfianca 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-will-change: left; will-change: left; }
  .move-esteira { -webkit-animation: galeriaMove 200s ease infinite; -moz-animation: galeriaMove 200s ease infinite; -o-animation: galeriaMove 200s ease infinite; animation: galeriaMove 200s ease infinite; -webkit-will-change: transform; -moz-will-change: transform; will-change: transform; }
  #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; margin-bottom: 0px; }
  .cta-padrao-lp { width: 325px; height: auto; position: relative; margin: auto; text-align: center; padding: 17px 20px 17px 20px; font-size: 16px; color: #fff; font-weight: 600; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; opacity: 0; }
  #chamada-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; color: #fff; font-size: 18px; text-align: center; opacity: 0; }
  #subchamada-topo-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 2px; opacity: 0; }
  #subchamada-topo-lp p { width: 100%; height: auto; position: relative; float: left; font-size: 12px; font-weight: 300; color: #fff; text-align: center; padding: 0px 60px; }
  .item-esteira-foto { width: 270px; height: auto; position: relative; float: left; }
  #bloco-s2 { width: 100%; height: 3000px; position: relative; float: left; margin-top: 140px; display: none; }
  #div-s3 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 80px; background-color: #FFC82A; }
  #view-div-s3 { width: 100%; height: auto; position: relative; margin: auto; }
  #conteudo-s3-como-funciona { width: 50%; height: auto; position: relative; float: left; margin-left: 10%; display: none; }
  #inicio-bloco-comparacao { width: 100%; height: auto; position: relative; float: left; }
  #view-inicio-bloco-comparacao { width: 100%; height: 100%; position: relative; margin: auto; padding: 0px 0px; }
  #view-inicio-bloco-comparacao h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 64px; font-size: 29px; text-align: center; color: #000; font-weight: 600; }
  #view-inicio-bloco-comparacao p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; margin-top: -10px; padding: 0px 30px; }
  #view-cards-comparacao { width: 100%; height: auto; position: relative; margin: auto; display: none; }
  #conteudo-txt-div-s3 { width: 100%; height: auto; position: relative; float: left; }
  #conteudo-txt-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 59px; margin-bottom: 29px; font-size: 27px; text-align: center; color: #000; font-weight: 600; padding: 0px 20px; }
  #conteudo-txt-div-s3 p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; margin-bottom: 34px; padding: 0px 20px; text-align: center; margin-top: -12px; }
  #faixa-cta-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }

  /*cards comparacao mobile*/
  #faixa-cards-comparacao-mobile { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: -10px; margin-bottom: 30px; }
  #faixa-seletor-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 20px; }
  #seletor-comparacao-mobile { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; border: 1px solid #C81370; border-radius: 50px; overflow: hidden; }
  .item-btn-seletor-mobile { width: 50%; height: auto; position: relative; float: left; padding: 10px 20px; color: #C81370; text-align: center; font-size: 14px; cursor: pointer; z-index: 10; line-height: 15px; }
  .marcador-seletor-mobile { width: 50%; height: 100%; position: absolute; top: 0px; left: 0%; border-radius: 50px; background-color: #C81370; }
  .marcador-seletor-mobile:hover { background-color: #D9147A; }
  .atv-btn-seletor-mobile { color: #fff; }
  #faixa-slider-comparacao-mobile { width: 100%; height: 540px; position: relative; float: left; overflow: hidden; }
  .item-slider-comparacao { width: 100%; height: auto; position: relative; float: left; }
  .bg-1-c { width: 200px; height: 200px; position: absolute; left: -110px; top: 80px; background-color: #C81370; border-radius: 100%; }
  .bg-2-c { width: 200px; height: 200px; position: absolute; left: 50%; top: 80px; margin-left: -100px; background-color: #FFC72B; border-radius: 50%; }
  .bg-3-c { width: 200px; height: 200px; position: absolute; right: -110px; top: 80px; background-color: #C81370; border-radius: 50%; }
  .bg-4-c { background-color: #dadada !important; }
  .foto-frasco-mobile-comparacao { width: 100%; height: 300px; position: relative; float: left; margin-top: -80px; z-index: 90; }
  .foto-int-comparacao-mobile { width: 300px; height: 514px; position: relative; margin: auto; }
  .zindex-slider-comp { z-index: 10; }
  .bloco-lista-comparacao-mobile { width: 340px; height: auto; left: 50%; position: relative; float: left; margin-left: -170px; margin-top: 124px; padding: 0px 20px; }
  #container-conteudo-div-s3 { width: 100%; height: 620px; position: relative; float: left; margin-top: 20px; }
  .icn-item-comparacao-ok { width: 20px; height: 20px; position: relative; float: left; border-radius: 50%; background: url('../img/check.png'); background-size: 20px; }
  .icn-item-comparacao-x { width: 20px; height: 20px; position: relative; float: left; border-radius: 50%; background: url('../img/x.png'); background-size: 20px; }
  .item-comparacao { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; margin-bottom: -6px; opacity: 1; }
  .item-comparacao-txt { width: 85%; height: auto; position: relative; float: left; margin-left: 9px; font-size: 13px; margin-top: 1px; color: #000; }
  .cta-padrao-lp-b { width: 322px; height: auto; left: 50%; position: relative; margin-left: -161px; text-align: center; padding: 17px 20px 17px 20px; font-size: 17px; color: #fff; font-weight: 700; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; }
  #view-sessao-acessivel { width: 100%; height: auto; position: relative; margin: auto; }
  #div-chamada-ciencia-acessivel { width: 100%; height: 100%; position: relative; float: left; padding-left: 20px; }
  #div-chamada-ciencia-acessivel h3 { width: 200px; height: auto; position: relative; float: left; line-height: 24px; font-size: 14px; font-weight: 600; color: #000; }
  #div-chamada-ciencia-acessivel span { font-size: 30px; font-weight: 600; color: #FF824E; }
  #box-ornamento-ciencia-acessivel { width: 60%; height: 140px; position: relative; float: left; margin-top: 10px; border-radius: 40px; overflow: hidden; display: none; }
  #box-ornamento-ciencia-acessivel-mobile { width: 120px; height: 130px; position: relative; float: right; margin-right: 20px; margin-top: 8px; border-radius: 20px; overflow: hidden; background-color: #dadada; }
  #box-ornamento-ciencia-acessivel-mobile-ft-int { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; }
  #sessao-video-bg { width: 100%; height: 270px; position: relative; float: left; margin-top: 70px; background-color: #f5f5f5; overflow: hidden; }
  #inicio-sessao-serum-facial { width: 100%; height: auto; position: relative; float: left; background-color: #FFF;/* overflow: hidden; */ }
  #view-serum-facial { width: 100%; height: auto; position: relative; margin: auto; }
  #view-circulos-bg { width: 100%; height: 310px; position: relative; margin: auto; padding-top: 170px; overflow: hidden; }
  .item-circulo-bg { width: 240px; height: 240px; position: absolute; float: unset; top: 50px; margin-right: unset; background-color: #FF4D3E; border-radius: 100%; -webkit-transform: translateY(-700px); -moz-transform: translateY(-700px); -ms-transform: translateY(-700px); -o-transform: translateY(-700px); transform: translateY(-700px); opacity: 0; -webkit-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -moz-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -o-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -webkit-will-change: transform, opacity; -moz-will-change: transform, opacity; will-change: transform, opacity; }
  .c1 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; left: -180px; }
  .c2 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; left: 50%; margin-left: -120px; }
  .item-circulo-bg:last-child { margin-right: 0px; right: -180px; }
  #inicio-cartucho-serum { width: 280px; height: 490px; position: absolute; left: 50%; margin-left: -147px; top: -201px;/* overflow: hidden; */ }
  #conteudo-sobre-serum-facial { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; }
  #conteudo-sobre-serum-facial h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 38px; line-height: 39px; font-size: 32px; color: #000; text-align: center; }
  #conteudo-sobre-serum-facial p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; font-size: 16px; color: #000; padding: 0px 10px; }

  /*Inicio beneficios*/
  #faixa-beneficios-serum { width: 100%; height: auto; position: relative; float: left; margin-top: 14px; padding: 0px 20px; }
  .item-foto-beneficio { width: 100%; height: 250px; position: relative; float: left; border-radius: 20px; background-color: #dadada; overflow: hidden; }
  .item-foto-beneficio-int { width: 370px; height: 250px; position: absolute; left: 50%; top: 50%; margin-left: -189px; margin-top: -125px; background-color: rgb(255, 222, 205); }
  .item-txt-beneficio { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; margin-top: 26px; margin-bottom: 40px; }
  .item-txt-beneficio h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 17.5px !important; margin-bottom: 20px; text-align: left !important; font-size: 22px !important; line-height: 45px !important; color: #89C239 !important; display: none; }
  .titulo-mobile-beneficios { width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #000; text-align: center; margin-bottom: 20px; }
  .titulo-mobile-beneficios span { color: #027938 !important; font-weight: 700; }
  .lista-beneficios-serum { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
  .lista-beneficios-serum ul li { width: 100%; height: auto; position: relative; float: left; font-size: 15px; color: #000; padding-left: 23px; margin-bottom: 12px; }
  #faixa-ideal-para h4 { width: 50%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 30px; color: #047837; font-weight: 700; text-align: left; padding-left: 20px }
  #faixa-circulos-ideal-para { width: 100%; height: auto; position: relative; float: left; display: none; }

  /*inicio ideal para mobile*/
  #controles-ideal-para-mobile { width: 140px; height: auto; position: relative; float: right; padding-right: 20px; z-index: 20; }
  .item-ctrl-m-ip { width: 40px; height: 40px; position: relative; float: right; margin-right: 0px; margin-left: 11px; background-color: #7EBB27; border-radius: 50%; cursor: pointer; }
  .icn-item-ctrl-m-ip { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }
  #faixa-slider-ideal-para-mobile { width: 100%; height: 369px; position: relative; float: left; margin-top: -53px; overflow: hidden; }
  .item-slider-ideal-mobile { width: 100%; height: auto; position: relative; float: left; }
  .bg-1-d { width: 180px; height: 180px; position: absolute; left: -90px; top: 90px; background-color: #FFC72B; border-radius: 100%; }
  .bg-2-d { width: 180px; height: 180px; position: absolute; left: 50%; top: 90px; margin-left: -90px; background-color: #FFC72B; border-radius: 50%; overflow: hidden; }
  .bg-3-d { width: 180px; height: 180px; position: absolute; right: -95px; top: 90px; background-color: #FFC72B; border-radius: 50%; }
  .legenda-ideal-para-mobile { width: 220px; height: auto; position: absolute; bottom: 37px; left: 50%; margin-left: -110px; font-size: 16px; color: #000; text-align: center; }
  .foto-int-slide-ideal-para-mobile { width: 220px; height: 220px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -110px; }

  /*inicio div Sessão 04*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #BBE73A; margin-top: 10px; padding-bottom: 110px; }
  #view-div-s4 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-div-s4 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; margin-bottom: -1px; color: #000; font-size: 32px; text-align: center; }
  #view-div-s4 p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; padding: 0px 20px; }

  /*faixa passo a passo */
  #faixa-passo-a-passo-2 { width: 100%; height: auto; position: relative; float: left; display: none; }
  #faixa-selos-s4 { width: 100%; height: auto; position: absolute; bottom: -52px; }
  #view-faixa-selos { width: 230px; height: auto; position: relative; margin: auto; }
  .item-selo-s4 { width: 100px; height: 100px; position: relative; float: left; margin-right: 30px; background-color: #dadada; border-radius: 50%; }

  /*Faixa sessão mobile passo a passo*/
  #faixa-sessao-mobile-passo-a-passo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #chamada-passo-a-passo-mobile { width: 55%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 34px; font-family: "Reenie Beanie", cursive; color: #000; padding: 0px 20px; }

  /*inicio ideal para mobile*/
  #controles-pp-mobile-mobile { width: 140px; height: auto; position: relative; float: right; padding-right: 20px; z-index: 20; }
  .item-ctrl-pp-ip { width: 40px; height: 40px; position: relative; float: right; margin-right: 0px; margin-left: 11px; background-color: #FF7841; border-radius: 50%; cursor: pointer; }
  .icn-item-ctrl-pp-ip { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }

  /*faixa-itens-slider-passo-a-passo*/
  #faixa-slider-passo-a-passo-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; overflow: hidden; }

  /*Item slider mobile*/
  .item-slider-mobile { width: 250px; height: auto; position: relative; float: left; margin-left: 20px; border-radius: 20px; }
  .video-slider-pp-m { width: 100%; height: 250px; position: relative; float: left; border-radius: 20px; overflow: hidden; }
  .video-slider-int-pp-m { width: 260px; height: 260px; position: absolute; left: 50%; top: 50%; margin-left: -130px; margin-top: -130px; }
  .legenda-passo-a-passo-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; color: #000; text-align: center; font-size: 16px; padding: 0px 20px; }

  /*Inicio ritual*/
  #div-s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 10px; }

  /* Estrutura base */
  .item-circulo-bg-ritual-b { width: 240px; height: 240px; position: absolute; float: unset; left: unset; margin-right: unset; border-radius: 50%; opacity: 0; -webkit-animation: fadeSequencial 2s ease forwards; -moz-animation: fadeSequencial 2s ease forwards; -o-animation: fadeSequencial 2s ease forwards; animation: fadeSequencial 2s ease forwards; -webkit-will-change: opacity; -moz-will-change: opacity; will-change: opacity; }
  #view-faixa-ritual { width: 100%; height: auto; position: relative; margin: auto; }
  #chamada-ritual-terra-flor { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; }
  #chamada-ritual-terra-flor h6 { width: 100%; height: auto; position: relative; float: left; font-size: 30px; color: #000; text-align: center; }
  #chamada-ritual-terra-flor p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; padding: 0px 20px; }
  #faixa-produtos-ritual-b { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #view-circulos-produtos { width: 100%; height: 420px; position: relative; margin: auto; overflow: hidden; }
  .bg-c1 { background-color: #9760A3; left: -173px; }
  .bg-c2 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; left: 50%; margin-left: -120px; }
  .item-circulo-bg-ritual-b:last-child { margin-right: 0px; right: -172px; }
  .item-circulo-bg-ritual-b:last-child { margin-right: 0px; right: -172px; }
  #ritual-sessao-s5 { width: 330px; height: 600px; position: absolute; left: 50%; margin-left: -172px; margin-top: -530px; z-index: 30; }

  /*Inicio cards produtos*/
  #div-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: -0px; padding-bottom: 40px; min-height: 500px; padding: 0px 0px; }
  #view-div-cards-produtos { width: 100%; height: auto; position: relative; margin: auto; }
  #chamada-div-cards-produtos { width: 100%; height: auto; position: relative; float: left; text-align: center; line-height: 33px; font-size: 26px; color: #7FBA26; }
  #sub-chamada-filtros-produtos { width: 100%; height: auto; position: relative; float: left; font-size: 16px; line-height: 22px; color: #000; margin-top: 10px; padding: 0px 20px; }
  #box-filtros-cards-produtos { width: 660px; height: auto; position: relative; float: right; margin-top: 140px; display: none; }
  #toolbar-ecommerce { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; }
  #faixa-filtros-produtos-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
  #chamada-filtros-mobile { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; font-size: 18px; margin-top: 7px; color: #000; text-align: left; }
  #controles-pp-filtros-mobile { width: 117px; height: auto; position: absolute; right: 20px; z-index: 20; margin-top: 0px; }
  #faixa-cards-filtros-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 22px; padding-top: 10px; z-index: 10; }
  .item-filtro-mobile { width: 150px; height: auto; position: relative; float: left; padding: 10px 20px; font-size: 16px; color: #027937; text-align: center; border-radius: 10px; cursor: pointer; background-color: #e1ffbe; border: 1px solid #CCE4AD; }
  .item-filtro-mobile:hover { background-color: #047837; color: #fff; }

  /*controles filtros mobile*/
  #controles-pp-filtros-mobile { width: 140px; height: auto; position: absolute; right: 20px; z-index: 20; }
  .item-ctrl-pp-ip-filtros { width: 40px; height: 40px; position: relative; float: right; margin-right: 0px; margin-left: 11px; background-color: #047837; border-radius: 50%; cursor: pointer; }
  .icn-item-ctrl-pp-ip-filtros { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }
  #faixa-diferenciais-produto { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; padding-bottom: 50px; }
  #view-diferenciais-produto { width: 100%; height: auto; position: relative; margin: auto; }
  #view-diferenciais-produto h6 { width: 100%; height: auto; position: relative; float: left; line-height: 22px; font-size: 16px; text-align: center; padding: 0px 30px; color: #000; padding-left: 40px; }
  #faixa-ugc { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
  #view-titulo-ugc { width: 100%; height: auto; position: relative; margin: auto; }
  #view-titulo-ugc h4 { width: 100%; height: auto; position: relative; float: left; margin-right: 90%; font-size: 25px; color: #7FBA26; line-height: 30px; text-align: center; padding: 0px 54px; }
  #view-titulo-ugc p { width: 100%; height: auto; position: relative; float: left; margin-top: 3px; text-align: center; font-size: 16px; padding: 0px 20px; }

  /*controles UGC*/
  #box-controles-ugc { width: 160px; height: auto; position: absolute; right: 50%; margin-right: -89px; bottom: -320px; }
  .ctrl-ugc { width: 50px; height: 50px; position: relative; float: right; margin-right: 20px; background-color: #7FBA26; border-radius: 60px; cursor: pointer; display: block;}

  /*Cards UGC*/
  #faixa-cards-ugc { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; overflow: hidden; }
  #view-diferenciais { width: 100%; height: auto; position: relative; margin: auto; }

  /*Item diferencial*/
  .item-diferencial { width: 33.3%; height: auto; position: relative; float: left; display: none; }
  #div-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
  #view-div-faq { width: 90%; height: auto; position: relative; margin: auto; }
  #chamada-faq { width: 100%; height: 100%; position: relative; float: left; }
  #box-chamada-faq { width: 100%; height: 190px; position: relative; float: left; margin-top: 0px; background-color: #EBFCD3; border-radius: 30px; overflow: hidden; }
  #box-chamada-faq-int { width: 100%; height: auto; position: relative; float: left; font-size: 32px; color: #047837; margin-top: 48px; padding-left: 40px; font-weight: 700; line-height: 33px; }
  #box-faq { width: 100%; height: auto; position: relative; float: left; padding-top: 30px; padding: 0px 10px; margin-top: 28px; }
  .collapsible-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; line-height: 1.5; padding: 1rem; font-size: 15px; background-color: #fff; border-bottom: 1px solid #ddd; }

  /*inicio div S5*/
  #div-s5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 120px; margin-top: 70px; background-color: #EDFED7; }
  #view-div-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-div-s5 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; font-size: 24px; line-height: 26px; color: #000000; text-align: center; }

  /*inicio faixa ornamento div s5*/
  #div-faixa-ornamento-div-s5 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; overflow: hidden; }
  .item-ornamento-faixa-s5 { width: 140px; height: 140px; position: relative; float: left; margin-left: 10px; background-color: red; border-radius: 30px; overflow: hidden; }
  .img-int-faixa-s5 { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; background-color: rgb(255, 222, 205); }
  #sub-chamada-ornamento-s5 { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; }
  #view-sub-chamada-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-sub-chamada-s5 p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; padding: 0px 30px; }
  #view-faixa-icns-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  .ft-int-icn-div-s5 { width: 45px; height: 45px; position: absolute; margin: unset; left: 50%; margin-left: -22.5px !important; }
  .legenda-icn-div-s5 { width: 100%; height: auto; position: absolute; float: left; font-size: 14px; color: #000; bottom: 0px; text-align: center; padding: 0px 0px; bottom: -3px; }
  .fix-icn-compra { margin-left: unset; }
  #view-selo-30-dias { width: 90%; height: auto; position: relative; margin: auto; padding: 50px 0px; background-color: #fff; border: 1px solid #b3d289; border-radius: 20px; }
  #legenda-selo-30 { width: 65%; height: auto; position: relative; float: left; font-size: 14px; margin-top: -19px; color: #000; }

  /*Faixa*/
  #faixa-itens-diferenciais-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; margin-bottom: -10px; }

  /*Inicio rodape*/
  #container-rodape { width: 100%; height: auto; position: relative; float: left; background-color: rgb(255, 255, 255); padding-bottom: 30px !important; }
  #logo-terra-flor-rodape { width: 120px; height: 102px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -170px; background: url('../img/logo-terra-flor-rodape.png'); background-size: 120px; }
  #view-rodape { width: 100%; height: auto; position: relative; margin: auto; padding-top: 70px; max-width: 380px; }
  .div-sessao-rodape { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; margin-bottom: 30px; }
  .div-sessao-rodape h4 { width: 100%; height: auto; position: relative; float: left; text-align: center; color: #000; font-size: 18px; font-weight: 600; }
  .div-sessao-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; color: #000; font-size: 16px; }
  .cta-int-rodape { width: 320px; height: auto; position: relative; margin: auto; padding: 14px 0px 15px 74px; color: #000; border: 1px solid #c2ec8b; border-radius: 40px; font-size: 17px; text-align: left; cursor: pointer; }
  .icn-cta-whatsapp { width: 35px; height: 35px; position: absolute; left: 30px; top: 9px; background: url('../img/icn-whatsapp.png'); background-size: 35px; z-index: 10; }

  /*cta rodape terra flor*/
  .box-cta-terra-flor-rodape { width: 100%; height: auto; position: relative; float: unset; margin: auto; padding-top: 0px; }
  .cta-int-rodape-terra-flor { width: 200px; height: auto; position: relative; float: left; padding: 13px 10px; font-size: 17px; margin-left: 35px; text-align: center; margin-top: 25px; border: 1px solid #000; border-radius: 40px; cursor: pointer; }
  .box-icn-instagram-rodape { width: 40px; height: 40px; position: relative; float: left; margin-left: 11px; margin-top: 32px; background: url('../img/instagram-icn.png'); background-size: 40px; background-repeat: no-repeat; }
  .cta-int-rodape-b { width: 320px; height: auto; position: relative; margin: auto; padding: 14px 20px 15px 20px; color: #000; border: 1px solid #000; border-radius: 40px; font-size: 17px; text-align: center; cursor: pointer; }
  .item-card-produto { width: 100%; height: auto; position: relative; float: left; margin-bottom: 40px; padding: 0px 20px; }
  .item-card-int-produto { width: 100%; height: 100%; position: relative; float: left; border-radius: 40px; border: 2px solid #F2F8EA; overflow: hidden; padding-bottom: 110px; }
  .produto-card-ft { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 30px; }
  .infos-produto-card h6 { width: 80%; height: 32px; position: relative; float: left; margin-top: 40px; line-height: 23px; font-size: 20px; color: #047837; font-weight: 600; }

  /*inicio sessões mobile*/
  .desktop { display: none; }
  .mobile { display: block; }

  /*inicio div s2 */
  #div-s2-lp { width: 100%; height: auto; position: relative; float: left; }
  #div-conteudo-s2-mobile { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; }
  #faixa-a-mobile-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
  #chamada-s2-mobile { width: 60%; height: auto; position: relative; float: left; line-height: 27px; margin-top: 50px; font-size: 25px; color: #027938; }
  #chamada-s2-mobile span { font-weight: 700; }
  #sub-chamada-s2-mobile { width: 55%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 16px; color: #000; }
  #bloco-foto-a-s2-mobile { width: 130px; height: 160px; position: relative; float: right; background-color: #dadada; border-radius: 20px; overflow: hidden; margin-top: -101px; }
  #bloco-foto-a-s2-mobile-int { width: 140px; height: 170px; position: absolute; top: 50%; left: 50%; margin-left: -70px; margin-top: -85px; }
  #faixa-b-mobile-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
  .item-foto-bloco-s2 { width: 47.5%; height: 160px; position: relative; float: left; margin-top: 20px; margin-right: 5%; background-color: #dadada; border-radius: 20px; overflow: hidden; }
  .item-foto-bloco-s2:last-child { margin-right: 0%; }
  .foto-int-mobile-s2-b2 { width: 200px; height: 170px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -85px; }
  #faixa-c-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 20px; }
  .item-outros-cosmeticos-s2-mobile { width: 100%; height: auto; position: relative; margin-bottom: 10px; padding: 20px 20px; float: left; background-color: #BFF778; border-radius: 20px; }
  .icone-l-outros-cosmeticos { width: 70px; height: 70px; position: relative; float: left; background-color: #fff; border-radius: 50%; overflow: hidden; }
  .icone-l-outros-cosmeticos-int { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; }
  .item-outros-cosmeticos-s2-mobile-txt { width: 70%; height: auto; position: relative; float: left; margin-left: 21px; color: #017937; font-size: 16px; }
  .fix-txt-cosmetico-int { margin-top: 12px; }
  #faixa-cta-s2-div-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #div-galeria-de-fotos { width: 100%; height: auto; position: relative; float: left; margin-top: 38px; background-color: #dadada; overflow: hidden; }
  #faixa-como-funciona-mobile { width: 100%; height: auto; position: relative; float: left; overflow: hidden; }
  #chamada-como-funciona-mobile { width: 55%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 34px; font-family: "Reenie Beanie", cursive; color: #000; padding: 0px 20px; }
  #controles-mobile-cf { width: 150px; height: auto; position: relative; float: right; margin-top: 10px; margin-right: 10px; }
  .item-controle-mobile-cf { width: 40px; height: 40px; position: relative; float: right; margin-left: 10px; background-color: #C4146F; border-radius: 50%; cursor: pointer; }
  .icn-ctrl-mobile-cf { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }
  #carrossel-mobile-como-funciona { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: 0px; margin-bottom: 50px; }

  /*card-como-funciona-mobile*/
  .card-mobile-como-funciona-out { width: 220px; height: auto; position: relative; float: left; margin-top: 20px; margin-left: 0px; }
  .card-como-funciona-mobile { width: 220px; height: 320px; position: relative; float: left; background-color: #dadada; border-radius: 20px; overflow: hidden; }
  .numero-como-funciona-mobile { width: 40px; height: 40px; position: absolute; left: 12px; top: 12px; background-color: #FFB9C6; border-radius: 50%; z-index: 99; }
  .numero-como-funciona-mobile-txt { width: 100%; height: auto; position: absolute; top: -6px; left: 0px; font-size: 36px; text-align: center; color: #000; font-family: "Reenie Beanie", cursive; }
  .legenda-card-como-funciona-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 15px; color: #000; text-align: center; font-size: 16px; font-weight: 400; padding: 0px 20px; }

  /*Inicio janelas mobile*/
  #card-janela-produto { width: 360px; height: 640px; position: fixed; left: 50%; top: 50%; margin-left: -180px; margin-top: -340px; background-color: #fff; border-radius: 30px; overflow: hidden; z-index: 9999; display: none; }
  #janela-cupom-desconto { width: 360px; height: 700px; position: fixed; top: 50%; left: 50%; margin-left: -180px; margin-top: -350px; background-color: #fff; border-radius: 30px; z-index: 9999; overflow: hidden; display: none; opacity: 0; }
  #foto-janela-desconto { width: 100%; height: 210px; position: relative; float: left; background-color: #dadada; }
  #foto-int-galeria { width: 100%; height: auto; position: absolute; left: 0%; top: 0%; margin-left: 0px; margin-top: 0px; }
  #janela-campos-cupom { width: 100%; height: auto; position: relative; float: left; padding: 20px 20px; opacity: 0; }
  #fechar-janela-cupom { width: 50px; height: 50px; position: absolute; right: 19px; top: -190px; background-color: #fff; border-radius: 50%; z-index: 99; cursor: pointer; }
  #chamada-cupom { width: 100%; height: auto; position: relative; float: left; margin-top: 72px; padding: 0px 0px; font-size: 22px; color: #000; font-weight: 700; text-align: center; line-height: 28px; }
  #subchamada-cupom { width: 100%; height: auto; position: relative; float: left; margin-top: 2px; padding: 0px 0px; font-size: 17px; color: #000; font-size: 300; text-align: center; }
  #letreiro-cupom-janela { width: 330px; height: auto; position: absolute; float: unset; left: 50%; margin-left: -165px; margin-top: -12px; }
  #box-letreiro { width: 100%; height: 50px; position: relative; margin: auto; background-color: #FFC72B; font-size: 14px; color: #000; border-radius: 10px; overflow: hidden; }
  #faixa-cta-formulario { width: 86%; height: auto; position: absolute; bottom: -29px; }
  .fix-icn { float: right !important; }
  #cta-cupom-fisico { width: 400px; height: 172px; position: fixed; left: 50%; margin-left: -194px; bottom: -630px; right: 20px; background: url('../img/cta-cupom.png'); background-size: 400px; z-index: 600; }
}
@media only screen  
and (min-width:100px) 
and (max-width:400px) {
  .hide-m-mobile { display: none; }
  #faixa-menu-fixo { width: 100%; height: auto; position: fixed; top: 30px; z-index: 999; }
  #view-menu-fixo { width: 97%; height: auto; position: relative; margin: auto; max-width: 350px; }
  #bg-menu-fixo { width: 100%; height: 73px; position: absolute; left: 0px; top: 0px; background-color: #63b82f; border: 1px solid #a7e87e; border-radius: 120px; opacity: 0; transition: opacity 0.2s linear; }
  #logo-menu-fixo { width: 130px; height: 39px; position: relative; float: left; margin-left: 17px; margin-top: 14px; background: url(../img/logo-tf.png); background-size: 150px; }
  #cta-produzir-conteudo { width: auto; height: auto; position: relative; float: right; margin-top: 13px; margin-right: 17px; padding: 11px 25px 11px 25px; color: #000; font-size: 14px; font-weight: 600; background-color: #047837; color: #ffffff; border-radius: 30px; cursor: pointer; }
  #topo-lp { width: 100%; height: 100%; min-height: 860px; position: relative; float: left; }
  #conteudo-div-topo { width: 100%; height: 350px; position: absolute; top: 50%; margin-top: -290px; z-index: 150; }
  #div-view-conteudo-topo { width: 100%; height: 100%; position: relative; margin: auto; padding-top: 100px; }
  #logo-terraflor-topo { width: 190px; height: 58px; position: relative; margin: auto; background: url(../img/logo-terra-flor.png); background-size: 190px; opacity: 0; margin-bottom: -10px; }
  #div-view-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 37px; font-weight: 700; color: #FFC82A; }
  #div-view-conteudo-topo h1 span { font-weight: 400; color: #FFF; font-size: 22px; margin-top: -13px; }
  #faixa-sinais-de-confianca { width: 100%; height: 80px; position: relative; float: left; background-color: #7EBA27; overflow: hidden; }
  #esteira-faixa-sinais-confianca { width: 3100px; height: 48px; position: absolute; top: 15px; left: 0px; background: url('../img/sinais-confianca.png'); background-size: 2710px; -webkit-animation: esteiraSinaisConfianca 50s linear infinite; -moz-animation: esteiraSinaisConfianca 50s linear infinite; -o-animation: esteiraSinaisConfianca 50s linear infinite; animation: esteiraSinaisConfianca 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-will-change: left; will-change: left; }
  .move-esteira { -webkit-animation: galeriaMove 200s ease infinite; -moz-animation: galeriaMove 200s ease infinite; -o-animation: galeriaMove 200s ease infinite; animation: galeriaMove 200s ease infinite; -webkit-will-change: transform; -moz-will-change: transform; will-change: transform; }
  #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; margin-bottom: 0px; }
  .cta-padrao-lp { width: 325px; height: auto; position: relative; margin: auto; text-align: center; padding: 17px 20px 17px 20px; font-size: 16px; color: #fff; font-weight: 600; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; opacity: 0; }
  #chamada-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; color: #fff; font-size: 18px; text-align: center; opacity: 0; }
  #subchamada-topo-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 2px; opacity: 0; }
  #subchamada-topo-lp p { width: 100%; height: auto; position: relative; float: left; font-size: 14px; font-weight: 300; color: #fff; text-align: center; padding: 0px 20px; }
  .item-esteira-foto { width: 270px; height: auto; position: relative; float: left; }
  #bloco-s2 { width: 100%; height: 3000px; position: relative; float: left; margin-top: 140px; display: none; }
  #div-s3 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 80px; background-color: #FFC82A; }
  #view-div-s3 { width: 100%; height: auto; position: relative; margin: auto; }
  #conteudo-s3-como-funciona { width: 50%; height: auto; position: relative; float: left; margin-left: 10%; display: none; }
  #inicio-bloco-comparacao {
        width: 100%;
        height: auto;
        position: relative;
        float: left;
        padding-bottom: 0px;
    
    }
  #view-inicio-bloco-comparacao { width: 100%; height: 100%; position: relative; margin: auto; padding: 0px 0px; }
  #view-inicio-bloco-comparacao h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 64px; font-size: 29px; text-align: center; color: #000; font-weight: 600; }
  #view-inicio-bloco-comparacao p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; margin-top: -10px; padding: 0px 40px; }
  #view-cards-comparacao { width: 100%; height: auto; position: relative; margin: auto; display: none; }
  #conteudo-txt-div-s3 { width: 100%; height: auto; position: relative; float: left; }
  #conteudo-txt-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 59px; margin-bottom: 29px; font-size: 27px; text-align: center; color: #000; font-weight: 600; padding: 0px 20px; }
  #conteudo-txt-div-s3 p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; margin-bottom: 34px; padding: 0px 20px; text-align: center; margin-top: -12px; }
  #faixa-cta-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }

  /*cards comparacao mobile*/
  #faixa-cards-comparacao-mobile { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: -10px; margin-bottom: 30px; }
  #faixa-seletor-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 20px; }
  #seletor-comparacao-mobile { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; border: 1px solid #C81370; border-radius: 50px; overflow: hidden; }
  .item-btn-seletor-mobile { width: 50%; height: auto; position: relative; float: left; padding: 10px 20px; color: #C81370; text-align: center; font-size: 14px; cursor: pointer; z-index: 10; line-height: 15px; }
  .marcador-seletor-mobile { width: 50%; height: 100%; position: absolute; top: 0px; left: 0%; border-radius: 50px; background-color: #C81370; }
  .marcador-seletor-mobile:hover { background-color: #D9147A; }
  .atv-btn-seletor-mobile { color: #fff; }
  #faixa-slider-comparacao-mobile { width: 100%; height: 540px; position: relative; float: left; overflow: hidden; }
  .item-slider-comparacao { width: 100%; height: auto; position: relative; float: left; }
  .bg-1-c { width: 200px; height: 200px; position: absolute; left: -110px; top: 80px; background-color: #C81370; border-radius: 100%; }
  .bg-2-c { width: 200px; height: 200px; position: absolute; left: 50%; top: 80px; margin-left: -100px; background-color: #FFC72B; border-radius: 50%; }
  .bg-3-c { width: 200px; height: 200px; position: absolute; right: -110px; top: 80px; background-color: #C81370; border-radius: 50%; }
  .bg-4-c { background-color: #dadada !important; }
  .foto-frasco-mobile-comparacao { width: 100%; height: 300px; position: relative; float: left; margin-top: -80px; z-index: 90; }
  .foto-int-comparacao-mobile { width: 300px; height: 514px; position: relative; margin: auto; }
  .zindex-slider-comp { z-index: 10; }
  .bloco-lista-comparacao-mobile { width: 340px; height: auto; left: 50%; position: relative; float: left; margin-left: -170px; margin-top: 124px; padding: 0px 20px; }
  #container-conteudo-div-s3 { width: 100%; height: 620px; position: relative; float: left; margin-top: 20px; }
  .icn-item-comparacao-ok { width: 20px; height: 20px; position: relative; float: left; border-radius: 50%; background: url('../img/check.png'); background-size: 20px; }
  .icn-item-comparacao-x { width: 20px; height: 20px; position: relative; float: left; border-radius: 50%; background: url('../img/x.png'); background-size: 20px; }
  .item-comparacao { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; margin-bottom: -6px; opacity: 1; }
  .item-comparacao-txt { width: 85%; height: auto; position: relative; float: left; margin-left: 9px; font-size: 13px; margin-top: 1px; color: #000; }
  .cta-padrao-lp-b { width: 322px; height: auto; left: 50%; position: relative; margin-left: -161px; text-align: center; padding: 17px 20px 17px 20px; font-size: 17px; color: #fff; font-weight: 700; background: #008C3F; background: linear-gradient(180deg, rgba(0, 140, 63, 1) 15%, rgba(147, 217, 62, 1) 72%); border-radius: 80px; cursor: pointer; border: solid 2px #7FBA26; transition: all 0.25s ease; }
  #view-sessao-acessivel { width: 100%; height: auto; position: relative; margin: auto; }
  #div-chamada-ciencia-acessivel { width: 100%; height: 100%; position: relative; float: left; padding-left: 20px; }
  #div-chamada-ciencia-acessivel h3 { width: 200px; height: auto; position: relative; float: left; line-height: 24px; font-size: 14px; font-weight: 600; color: #000; }
  #div-chamada-ciencia-acessivel span { font-size: 30px; font-weight: 600; color: #FF824E; }
  #box-ornamento-ciencia-acessivel { width: 60%; height: 140px; position: relative; float: left; margin-top: 10px; border-radius: 40px; overflow: hidden; display: none; }
  #box-ornamento-ciencia-acessivel-mobile { width: 120px; height: 130px; position: relative; float: right; margin-right: 20px; margin-top: 8px; border-radius: 20px; overflow: hidden; background-color: #dadada; }
  #box-ornamento-ciencia-acessivel-mobile-ft-int { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; }
  #sessao-video-bg { width: 100%; height: 270px; position: relative; float: left; margin-top: 70px; background-color: #f5f5f5; overflow: hidden; }
  #inicio-sessao-serum-facial { width: 100%; height: auto; position: relative; float: left; background-color: #FFF;/* overflow: hidden; */ }
  #view-serum-facial { width: 100%; height: auto; position: relative; margin: auto; }
  #view-circulos-bg { width: 100%; height: 310px; position: relative; margin: auto; padding-top: 170px; overflow: hidden; }
  .item-circulo-bg { width: 240px; height: 240px; position: absolute; float: unset; top: 50px; margin-right: unset; background-color: #FF4D3E; border-radius: 100%; -webkit-transform: translateY(-700px); -moz-transform: translateY(-700px); -ms-transform: translateY(-700px); -o-transform: translateY(-700px); transform: translateY(-700px); opacity: 0; -webkit-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -moz-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -o-animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; animation: desceCirculo 1s cubic-bezier(.22, .61, .36, 1) forwards; -webkit-will-change: transform, opacity; -moz-will-change: transform, opacity; will-change: transform, opacity; }
  .c1 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; left: -180px; }
  .c2 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; left: 50%; margin-left: -120px; }
  .item-circulo-bg:last-child { margin-right: 0px; right: -180px; }
  #inicio-cartucho-serum { width: 260px; height: 490px; position: absolute; left: 50%; margin-left: -135px; top: -171px;/* overflow: hidden; */ }
  #conteudo-sobre-serum-facial { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; }
  #conteudo-sobre-serum-facial h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 38px; line-height: 39px; font-size: 32px; color: #000; text-align: center; }
  #conteudo-sobre-serum-facial p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; font-size: 16px; color: #000; padding: 0px 10px; }

  /*Inicio beneficios*/
  #faixa-beneficios-serum { width: 100%; height: auto; position: relative; float: left; margin-top: 14px; padding: 0px 20px; }
  .item-foto-beneficio { width: 100%; height: 250px; position: relative; float: left; border-radius: 20px; background-color: #dadada; overflow: hidden; }
  .item-foto-beneficio-int { width: 370px; height: 250px; position: absolute; left: 50%; top: 50%; margin-left: -189px; margin-top: -125px; background-color: rgb(255, 222, 205); }
  .item-txt-beneficio { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; margin-top: 26px; margin-bottom: 40px; }
  .item-txt-beneficio h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 17.5px !important; margin-bottom: 20px; text-align: left !important; font-size: 22px !important; line-height: 45px !important; color: #89C239 !important; display: none; }
  .titulo-mobile-beneficios { width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #000; text-align: center; margin-bottom: 20px; }
  .titulo-mobile-beneficios span { color: #027938 !important; font-weight: 700; }
  .lista-beneficios-serum { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
  .lista-beneficios-serum ul li { width: 100%; height: auto; position: relative; float: left; font-size: 15px; color: #000; padding-left: 23px; margin-bottom: 12px; }
  #faixa-ideal-para h4 { width: 50%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 30px; color: #047837; font-weight: 700; text-align: left; padding-left: 20px }
  #faixa-circulos-ideal-para { width: 100%; height: auto; position: relative; float: left; display: none; }

  /*inicio ideal para mobile*/
  #controles-ideal-para-mobile { width: 140px; height: auto; position: relative; float: right; padding-right: 20px; z-index: 20; }
  .item-ctrl-m-ip { width: 40px; height: 40px; position: relative; float: right; margin-right: 0px; margin-left: 11px; background-color: #7EBB27; border-radius: 50%; cursor: pointer; }
  .icn-item-ctrl-m-ip { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }
  #faixa-slider-ideal-para-mobile { width: 100%; height: 369px; position: relative; float: left; margin-top: -53px; overflow: hidden; }
  .item-slider-ideal-mobile { width: 100%; height: auto; position: relative; float: left; }
  .bg-1-d { width: 180px; height: 180px; position: absolute; left: -90px; top: 90px; background-color: #FFC72B; border-radius: 100%; }
  .bg-2-d { width: 180px; height: 180px; position: absolute; left: 50%; top: 90px; margin-left: -90px; background-color: #FFC72B; border-radius: 50%; overflow: hidden; }
  .bg-3-d { width: 180px; height: 180px; position: absolute; right: -95px; top: 90px; background-color: #FFC72B; border-radius: 50%; }
  .legenda-ideal-para-mobile { width: 220px; height: auto; position: absolute; bottom: 37px; left: 50%; margin-left: -110px; font-size: 16px; color: #000; text-align: center; }
  .foto-int-slide-ideal-para-mobile { width: 220px; height: 220px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -110px; }

  /*inicio div Sessão 04*/
  #div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #BBE73A; margin-top: 10px; padding-bottom: 110px; }
  #view-div-s4 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-div-s4 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; margin-bottom: -1px; color: #000; font-size: 32px; text-align: center; }
  #view-div-s4 p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; padding: 0px 20px; }

  /*faixa passo a passo */
  #faixa-passo-a-passo-2 { width: 100%; height: auto; position: relative; float: left; display: none; }
  #faixa-selos-s4 { width: 100%; height: auto; position: absolute; bottom: -52px; }
  #view-faixa-selos { width: 230px; height: auto; position: relative; margin: auto; }
  .item-selo-s4 { width: 100px; height: 100px; position: relative; float: left; margin-right: 30px; background-color: #dadada; border-radius: 50%; }

  /*Faixa sessão mobile passo a passo*/
  #faixa-sessao-mobile-passo-a-passo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #chamada-passo-a-passo-mobile { width: 58%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 34px; font-family: "Reenie Beanie", cursive; color: #000; padding: 0px 20px; }

  /*inicio ideal para mobile*/
  #controles-pp-mobile-mobile { width: 140px; height: auto; position: relative; float: right; padding-right: 20px; z-index: 20; }
  .item-ctrl-pp-ip { width: 40px; height: 40px; position: relative; float: right; margin-right: 0px; margin-left: 11px; background-color: #FF7841; border-radius: 50%; cursor: pointer; }
  .icn-item-ctrl-pp-ip { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }

  /*faixa-itens-slider-passo-a-passo*/
  #faixa-slider-passo-a-passo-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 28px; overflow: hidden; }

  /*Item slider mobile*/
  .item-slider-mobile { width: 250px; height: auto; position: relative; float: left; margin-left: 20px; border-radius: 20px; }
  .video-slider-pp-m { width: 100%; height: 250px; position: relative; float: left; border-radius: 20px; overflow: hidden; }
  .video-slider-int-pp-m { width: 260px; height: 260px; position: absolute; left: 50%; top: 50%; margin-left: -130px; margin-top: -130px; }
  .legenda-passo-a-passo-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; color: #000; text-align: center; font-size: 16px; padding: 0px 20px; }

  /*Inicio ritual*/
  #div-s-5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 10px; }

  /* Estrutura base */
  .item-circulo-bg-ritual-b { width: 240px; height: 240px; position: absolute; float: unset; left: unset; margin-right: unset; border-radius: 50%; opacity: 0; -webkit-animation: fadeSequencial 2s ease forwards; -moz-animation: fadeSequencial 2s ease forwards; -o-animation: fadeSequencial 2s ease forwards; animation: fadeSequencial 2s ease forwards; -webkit-will-change: opacity; -moz-will-change: opacity; will-change: opacity; }
  #view-faixa-ritual { width: 100%; height: auto; position: relative; margin: auto; }
  #chamada-ritual-terra-flor { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; }
  #chamada-ritual-terra-flor h6 { width: 100%; height: auto; position: relative; float: left; font-size: 30px; color: #000; text-align: center; }
  #chamada-ritual-terra-flor p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; padding: 0px 20px; }
  #faixa-produtos-ritual-b { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #view-circulos-produtos { width: 100%; height: 420px; position: relative; margin: auto; overflow: hidden; }
  .bg-c1 { background-color: #9760A3; left: -173px; }
  .bg-c2 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; left: 50%; margin-left: -120px; }
  .item-circulo-bg-ritual-b:last-child { margin-right: 0px; right: -172px; }
  .item-circulo-bg-ritual-b:last-child { margin-right: 0px; right: -172px; }
  #ritual-sessao-s5 { width: 330px; height: 600px; position: absolute; left: 50%; margin-left: -172px; margin-top: -530px; z-index: 30; }

  /*Inicio cards produtos*/
  #div-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: -0px; padding-bottom: 40px; min-height: 500px; padding: 0px 0px; }
  #view-div-cards-produtos { width: 100%; height: auto; position: relative; margin: auto; }
  #chamada-div-cards-produtos { width: 100%; height: auto; position: relative; float: left; text-align: center; line-height: 33px; font-size: 26px; color: #7FBA26; }
  #sub-chamada-filtros-produtos { width: 100%; height: auto; position: relative; float: left; font-size: 16px; line-height: 22px; color: #000; margin-top: 10px; padding: 0px 20px; }
  #box-filtros-cards-produtos { width: 660px; height: auto; position: relative; float: right; margin-top: 140px; display: none; }
  #toolbar-ecommerce { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; }
  #faixa-filtros-produtos-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
  #chamada-filtros-mobile { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; font-size: 18px; margin-top: 7px; color: #000; text-align: left; }
  #controles-pp-filtros-mobile { width: 117px; height: auto; position: absolute; right: 20px; z-index: 20; margin-top: 0px; }
  #faixa-cards-filtros-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 22px; padding-top: 10px; z-index: 10; }
  .item-filtro-mobile { width: 150px; height: auto; position: relative; float: left; padding: 10px 20px; font-size: 16px; color: #027937; text-align: center; border-radius: 10px; cursor: pointer; background-color: #e1ffbe; border: 1px solid #CCE4AD; }
  .item-filtro-mobile:hover { background-color: #047837; color: #fff; }

  /*controles filtros mobile*/
  #controles-pp-filtros-mobile { width: 140px; height: auto; position: absolute; right: 20px; z-index: 20; }
  .item-ctrl-pp-ip-filtros { width: 40px; height: 40px; position: relative; float: right; margin-right: 0px; margin-left: 11px; background-color: #047837; border-radius: 50%; cursor: pointer; }
  .icn-item-ctrl-pp-ip-filtros { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }
  #faixa-diferenciais-produto { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; padding-bottom: 50px; }
  #view-diferenciais-produto { width: 100%; height: auto; position: relative; margin: auto; }
  #view-diferenciais-produto h6 { width: 100%; height: auto; position: relative; float: left; line-height: 22px; font-size: 16px; text-align: center; padding: 0px 30px; color: #000; padding-left: 40px; }
  #faixa-ugc { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
  #view-titulo-ugc { width: 100%; height: auto; position: relative; margin: auto; padding-top: 10px; }
  #view-titulo-ugc h4 { width: 100%; height: auto; position: relative; float: left; margin-right: 90%; font-size: 25px; color: #7FBA26; line-height: 30px; text-align: center; padding: 0px 54px; }
  #view-titulo-ugc p { width: 100%; height: auto; position: relative; float: left; margin-top: 3px; text-align: center; font-size: 16px; padding: 0px 20px; }

  /*controles UGC*/
  #box-controles-ugc { width: 160px; height: auto; position: absolute; right: 50%; margin-right: -89px; bottom: -344px; }
  .ctrl-ugc { width: 50px; height: 50px; position: relative; float: right; margin-right: 20px; background-color: #7FBA26; border-radius: 60px; cursor: pointer; display: block;}

  /*Cards UGC*/
  #faixa-cards-ugc { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; overflow: hidden; }
  #view-diferenciais { width: 100%; height: auto; position: relative; margin: auto; }

  /*Item diferencial*/
  .item-diferencial { width: 33.3%; height: auto; position: relative; float: left; display: none; }
  #div-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
  #view-div-faq { width: 90%; height: auto; position: relative; margin: auto; }
  #chamada-faq { width: 100%; height: 100%; position: relative; float: left; }
  #box-chamada-faq { width: 100%; height: 190px; position: relative; float: left; margin-top: 0px; background-color: #EBFCD3; border-radius: 30px; overflow: hidden; }
  #box-chamada-faq-int { width: 100%; height: auto; position: relative; float: left; font-size: 32px; color: #047837; margin-top: 48px; padding-left: 40px; font-weight: 700; line-height: 33px; }
  #box-faq { width: 100%; height: auto; position: relative; float: left; padding-top: 30px; padding: 0px 10px; margin-top: 28px; }
  .collapsible-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; line-height: 1.5; padding: 1rem; font-size: 15px; background-color: #fff; border-bottom: 1px solid #ddd; }

  /*inicio div S5*/
  #div-s5 { width: 100%; height: auto; position: relative; float: left; padding-bottom: 120px; margin-top: 70px; background-color: #EDFED7; }
  #view-div-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-div-s5 h5 { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; font-size: 24px; line-height: 26px; color: #000000; text-align: center; }

  /*inicio faixa ornamento div s5*/
  #div-faixa-ornamento-div-s5 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; overflow: hidden; }
  .item-ornamento-faixa-s5 { width: 140px; height: 140px; position: relative; float: left; margin-left: 10px; background-color: red; border-radius: 30px; overflow: hidden; }
  .img-int-faixa-s5 { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; background-color: rgb(255, 222, 205); }
  #sub-chamada-ornamento-s5 { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; }
  #view-sub-chamada-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  #view-sub-chamada-s5 p { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; padding: 0px 30px; }
  #view-faixa-icns-s5 { width: 100%; height: auto; position: relative; margin: auto; }
  .ft-int-icn-div-s5 { width: 45px; height: 45px; position: absolute; margin: unset; left: 50%; margin-left: -22.5px !important; }
  .legenda-icn-div-s5 { width: 100%; height: auto; position: absolute; float: left; font-size: 14px; color: #000; bottom: 0px; text-align: center; padding: 0px 0px; bottom: -3px; }
  .fix-icn-compra { margin-left: unset; }
  #view-selo-30-dias { width: 90%; height: auto; position: relative; margin: auto; padding: 50px 0px; background-color: #fff; border: 1px solid #b3d289; border-radius: 20px; }
  #legenda-selo-30 { width: 65%; height: auto; position: relative; float: left; font-size: 14px; margin-top: -29px; color: #000; }

  /*Faixa*/
  #faixa-itens-diferenciais-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; margin-bottom: -10px; }

  /*Inicio rodape*/
  #container-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; padding-bottom: 20px !important; }
  #logo-terra-flor-rodape { width: 120px; height: 102px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -170px; background: url('../img/logo-terra-flor-rodape.png'); background-size: 120px; }
  #view-rodape { width: 100%; height: auto; position: relative; margin: auto; padding-top: 70px; max-width: 380px; }
  .div-sessao-rodape { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; margin-bottom: 30px; }
  .div-sessao-rodape h4 { width: 100%; height: auto; position: relative; float: left; text-align: center; color: #000; font-size: 18px; font-weight: 600; }
  .div-sessao-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; text-align: center; color: #000; font-size: 16px; }
  .cta-int-rodape { width: 320px; height: auto; position: relative; margin: auto; padding: 14px 0px 15px 74px; color: #000; border: 1px solid #c2ec8b; border-radius: 40px; font-size: 17px; text-align: left; cursor: pointer; }
  .icn-cta-whatsapp { width: 35px; height: 35px; position: absolute; left: 30px; top: 9px; background: url('../img/icn-whatsapp.png'); background-size: 35px; z-index: 10; }

  /*cta rodape terra flor*/
  .box-cta-terra-flor-rodape { width: 100%; height: auto; position: relative; float: unset; margin: auto; padding-top: 0px; }
  .cta-int-rodape-terra-flor { width: 200px; height: auto; position: relative; float: left; padding: 13px 10px; font-size: 17px; margin-left: 35px; text-align: center; margin-top: 25px; border: 1px solid #000; border-radius: 40px; cursor: pointer; }
  .box-icn-instagram-rodape { width: 40px; height: 40px; position: relative; float: left; margin-left: 11px; margin-top: 32px; background: url('../img/instagram-icn.png'); background-size: 40px; background-repeat: no-repeat; }
  .cta-int-rodape-b { width: 320px; height: auto; position: relative; margin: auto; padding: 14px 20px 15px 20px; color: #000; border: 1px solid #000; border-radius: 40px; font-size: 17px; text-align: center; cursor: pointer; }
  .item-card-produto { width: 100%; height: auto; position: relative; float: left; margin-bottom: 40px; padding: 0px 20px; }
  .item-card-int-produto { width: 100%; height: 100%; position: relative; float: left; border-radius: 40px; border: 2px solid #F2F8EA; overflow: hidden; padding-bottom: 110px; }
  .produto-card-ft { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 30px; }
  .infos-produto-card h6 { width: 80%; height: 32px; position: relative; float: left; margin-top: 40px; line-height: 23px; font-size: 20px; color: #047837; font-weight: 600; }

  /*inicio sessões mobile*/
  .desktop { display: none; }
  .mobile { display: block; }

  /*inicio div s2 */
  #div-s2-lp { width: 100%; height: auto; position: relative; float: left; }
  #div-conteudo-s2-mobile { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; }
  #faixa-a-mobile-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
  #chamada-s2-mobile { width: 60%; height: auto; position: relative; float: left; line-height: 27px; margin-top: 50px; font-size: 25px; color: #027938; }
  #chamada-s2-mobile span { font-weight: 700; }
  #sub-chamada-s2-mobile { width: 55%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 16px; color: #000; }
  #bloco-foto-a-s2-mobile { width: 130px; height: 160px; position: relative; float: right; background-color: #dadada; border-radius: 20px; overflow: hidden; margin-top: -81px; }
  #bloco-foto-a-s2-mobile-int { width: 140px; height: 170px; position: absolute; top: 50%; left: 50%; margin-left: -70px; margin-top: -85px; }
  #faixa-b-mobile-s2 { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
  .item-foto-bloco-s2 { width: 47.5%; height: 160px; position: relative; float: left; margin-top: 20px; margin-right: 5%; background-color: #dadada; border-radius: 20px; overflow: hidden; }
  .item-foto-bloco-s2:last-child { margin-right: 0%; }
  .foto-int-mobile-s2-b2 { width: 200px; height: 170px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -85px; }
  #faixa-c-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 20px; }
  .item-outros-cosmeticos-s2-mobile { width: 100%; height: auto; position: relative; margin-bottom: 10px; padding: 20px 20px; float: left; background-color: #BFF778; border-radius: 20px; }
  .icone-l-outros-cosmeticos { width: 70px; height: 70px; position: relative; float: left; background-color: #fff; border-radius: 50%; overflow: hidden; }
  .icone-l-outros-cosmeticos-int { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; }
  .item-outros-cosmeticos-s2-mobile-txt { width: 67%; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 6px; color: #017937; font-size: 14px; }
  .fix-txt-cosmetico-int { margin-top: 15px; }
  .fix-icn { float: right !important; }
  #faixa-cta-s2-div-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
  #div-galeria-de-fotos { width: 100%; height: auto; position: relative; float: left; margin-top: 38px; background-color: #dadada; overflow: hidden; }
  #faixa-como-funciona-mobile { width: 100%; height: auto; position: relative; float: left; overflow: hidden; }
  #chamada-como-funciona-mobile { width: 55%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 34px; font-family: "Reenie Beanie", cursive; color: #000; padding: 0px 20px; }
  #controles-mobile-cf { width: 150px; height: auto; position: relative; float: right; margin-top: 10px; margin-right: 10px; }
  .item-controle-mobile-cf { width: 40px; height: 40px; position: relative; float: right; margin-left: 10px; background-color: #C4146F; border-radius: 50%; cursor: pointer; }
  .icn-ctrl-mobile-cf { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; }
  #carrossel-mobile-como-funciona { width: 100%; height: auto; position: relative; float: left; overflow: hidden; margin-top: 0px; margin-bottom: 50px; }

  /*card-como-funciona-mobile*/
  .card-mobile-como-funciona-out { width: 220px; height: auto; position: relative; float: left; margin-top: 20px; margin-left: 0px; }
  .card-como-funciona-mobile { width: 220px; height: 320px; position: relative; float: left; background-color: #dadada; border-radius: 20px; overflow: hidden; }
  .numero-como-funciona-mobile { width: 40px; height: 40px; position: absolute; left: 12px; top: 12px; background-color: #FFB9C6; border-radius: 50%; z-index: 99; }
  .numero-como-funciona-mobile-txt { width: 100%; height: auto; position: absolute; top: -6px; left: 0px; font-size: 36px; text-align: center; color: #000; font-family: "Reenie Beanie", cursive; }
  .legenda-card-como-funciona-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 15px; color: #000; text-align: center; font-size: 16px; font-weight: 400; padding: 0px 20px; }

  /*Inicio janelas mobile*/
  #card-janela-produto { width: 360px; height: 640px; position: fixed; left: 50%; top: 50%; margin-left: -180px; margin-top: -340px; background-color: #fff; border-radius: 30px; overflow: hidden; z-index: 9999; display: none; }
  #janela-cupom-desconto { width: 360px; height: 700px; position: fixed; top: 50%; left: 50%; margin-left: -180px; margin-top: -350px; background-color: #fff; border-radius: 30px; z-index: 9999; overflow: hidden; display: none; opacity: 0; }
  #foto-janela-desconto { width: 100%; height: 210px; position: relative; float: left; background-color: #dadada; }
  #foto-int-galeria { width: 100%; height: auto; position: absolute; left: 0%; top: 0%; margin-left: 0px; margin-top: 0px; }
  #janela-campos-cupom { width: 100%; height: auto; position: relative; float: left; padding: 20px 20px; opacity: 0; }
  #fechar-janela-cupom { width: 50px; height: 50px; position: absolute; right: 19px; top: -190px; background-color: #fff; border-radius: 50%; z-index: 99; cursor: pointer; }
  #chamada-cupom { width: 100%; height: auto; position: relative; float: left; margin-top: 72px; padding: 0px 0px; font-size: 22px; color: #000; font-weight: 700; text-align: center; line-height: 28px; }
  #subchamada-cupom { width: 100%; height: auto; position: relative; float: left; margin-top: 2px; padding: 0px 0px; font-size: 17px; color: #000; font-size: 300; text-align: center; }
  #letreiro-cupom-janela { width: 330px; height: auto; position: absolute; float: unset; left: 50%; margin-left: -165px; margin-top: -12px; }
  #box-letreiro { width: 100%; height: 50px; position: relative; margin: auto; background-color: #FFC72B; font-size: 14px; color: #000; border-radius: 10px; overflow: hidden; }
  #faixa-cta-formulario { width: 86%; height: auto; position: absolute; bottom: -29px; }
  #ornamento-rodape { width: 350px; height: 392px; position: absolute; left: 50%; margin-left: -173px; margin-top: -64px; border-radius: 100%; background-color: #fff; }
  .txt-card-diferencial-produto { width: 78%; height: auto; position: relative; float: left; margin-left: 14px; margin-top: 6px; line-height: 17px; color: #000; font-size: 13px; }
  #cta-cupom-fisico { width: 340px; height: 146px; position: fixed; left: 50%; margin-left: -170px; bottom: -500px; right: 20px; background: url('../img/cta-cupom.png'); background-size: 340px; z-index: 600; }
}

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

/*
 * Hide visually and from screen readers
 */

.hidden, [hidden] { display: none !important; }
.img-ratio { width: 100% !important; height: auto !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; }
}