/* ! 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
========================================================================== */
/* Checkout: hides WooCommerce AJAX loading overlay */
body.woocommerce-checkout .blockUI.blockOverlay { background: transparent !important; opacity: 0 !important; }
body.woocommerce-checkout .blockUI.blockOverlay::before { display: none !important; }
a { color: #8BC671 !important; }
html { color: #222; font-size: 1em; line-height: 1.4; font-family: "Poppins", sans-serif; color: #fff; }
mark { background: #a3df2c; color: #1b5b12; padding: 0px 10px; border-radius: 20px; }
.collapsible, .collapsible * { color: #367639 !important; }
.gm-meta span { display: flex; gap: 6px; display: none !important; }
.desktop { display: block; }
.tablet { display: none; }
.mobile { display: none; }
.btn-degrade { background: unset !important; /* fallback para navegadores muito antigos */ background: -webkit-linear-gradient(left, unset 0%, unset 100%); /* Safari, Chrome antigos */ background: -moz-linear-gradient(left, unset 0%, unset 100%); /* Firefox antigos */ background: -o-linear-gradient(left, unset 0%, unset 100%); /* Opera antigos */ background: linear-gradient(90deg, unset 0%, unset 100%); /* padrão moderno */ transition: all 0.3s ease; /* Isso faz a saída da classe ser suave */ }
.gm-buyrow .in-stock { display: none; }
#icn-menu-sd{display: none;}
#mask-menu-mobile{display: none;}
#menu-mobile-list-out{display: none;}
/* Escopo apenas para a página de política de privacidade */
.privacy-policy-page { background-color: #272C34; color: #f0f0f0; padding: 4rem 1.5rem; font-family: 'Inter', sans-serif; margin-top: 160px; }
/* Container para centralizar tudo */
.privacy-policy-page .privacy-content-wrapper { max-width: 800px; margin: 0 auto; }
/* Título principal alinhado */
.privacy-policy-page h1.entry-title { font-size: 2.5rem; margin-bottom: 0.5rem; color: #ffffff; font-weight: 700; }
/* Info "last updated" também dentro do wrapper */
.privacy-policy-page .last-updated { font-size: 0.9rem; color: #aaa; margin-bottom: 2rem; }
.privacy-policy-page .entry-content { line-height: 1.7; font-size: 1.1rem; }
.privacy-policy-page .entry-content h2 { font-size: 2rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1rem; color: #ffffff; }
.privacy-policy-page .entry-content p { margin-bottom: 1.2rem; }
.privacy-policy-page .entry-content ul, .privacy-policy-page .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.privacy-policy-page .entry-content strong { font-weight: 600; color: #ffffff; }
.privacy-policy-page .entry-content a { color: #33bdf2; text-decoration: underline; }
.privacy-policy-page .entry-content a:hover { color: #ffffff; text-decoration: none; }
/* Escopo apenas para a página de política de privacidade */
.privacy-policy-page { background-color: #1c1f26; color: #f0f0f0; padding: 4rem 1.5rem; font-family: 'Inter', sans-serif; margin-top: 200px; background-color: #272C34; }
.privacy-policy-page h1.entry-title { font-size: 2.3rem; margin-bottom: 0.5rem; color: #ffffff; font-weight: 700; text-align: left !important; }
.privacy-policy-page .last-updated { font-size: 0.9rem; color: #aaa; margin-bottom: 2rem; }
.privacy-policy-page .entry-content { max-width: 100%; margin: 0 auto; line-height: 1.7; font-size: 1.1rem; }
.privacy-policy-page .entry-content h2 { font-size: 2rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1rem; color: #ffffff; }
.privacy-policy-page .entry-content p { margin-bottom: 1.2rem; }
.privacy-policy-page .entry-content ul, .privacy-policy-page .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.privacy-policy-page .entry-content strong { font-weight: 600; color: #ffffff; }
.privacy-policy-page .entry-content a { color: #33bdf2; text-decoration: underline; }
.privacy-policy-page .entry-content a:hover { color: #ffffff; text-decoration: none; }
/* Responsivo */
@media (max-width:768px) {
.privacy-policy-page { padding: 3rem 1rem; }
.privacy-policy-page h1.entry-title { font-size: 1.8rem; text-align: left !important; }
.privacy-policy-page .last-updated { font-size: 0.85rem; }
.privacy-policy-page .entry-content { font-size: 0.95rem; line-height: 1.6; }
.privacy-policy-page .entry-content h2 { font-size: 1.5rem; margin-top: 2rem; }
}
/*
* 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: unset; }
body { background-color: #30363D; }
@-webkit-keyframes fade-loop {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
@-moz-keyframes fade-loop {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
@-o-keyframes fade-loop {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
@keyframes fade-loop {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
.toast { background-color: #cfff8d; color: #367639; }
/* Anchors: invisible elements for navigation offset */
.ancora { width: 1px; height: 1px; position: absolute; left: 0px; }
.a-inicio { top: 0px; left: 0px; }
.a-produtos { top: -140px; left: 0px; }
.a-shopping { top: -180px; left: 0px; }
.a-science { top: -140px; left: 0px; }
.a-quality { top: -270px; left: 0px; }
.a-learn { top: -120px; left: 0px; }
.a-about { top: -160px; left: 0px; }
.a-philosophy { top: -220px; left: 0px; }
.a-contact { top: -100px; left: 0px; }
.a-iframe { top: -185px; left: 0px; }
.fade-animada { -webkit-animation: fade-loop 6s ease-in-out infinite; -moz-animation: fade-loop 6s ease-in-out infinite; -o-animation: fade-loop 6s ease-in-out infinite; animation: fade-loop 6s ease-in-out infinite; }
.fade-animada-2 { -webkit-animation: fade-loop 15s ease-in-out infinite; -moz-animation: fade-loop 15s ease-in-out infinite; -o-animation: fade-loop 15s ease-in-out infinite; animation: fade-loop 15s ease-in-out infinite; }
.fade-animada-3 { -webkit-animation: fade-loop 10s ease-in-out infinite; -moz-animation: fade-loop 10s ease-in-out infinite; -o-animation: fade-loop 10s ease-in-out infinite; animation: fade-loop 10s ease-in-out infinite; }
.fade-animada-4 { -webkit-animation: fade-loop 13s ease-in-out infinite; -moz-animation: fade-loop 13s ease-in-out infinite; -o-animation: fade-loop 13s ease-in-out infinite; animation: fade-loop 13s ease-in-out infinite; }
.fast-transition { transition: transform 5s ease; -webkit-transition: -webkit-transform 5s ease; -moz-transition: -moz-transform 5s ease; -o-transition: -o-transform 5s ease; -ms-transition: -ms-transform 5s ease; }
/* Triggers: small hidden elements used for scroll or animation triggers */
.gatilho-s1 { width: 1px; height: 1px; position: absolute; bottom: 50px; }
.gatilho-s2 { width: 1px; height: 1px; position: absolute; top: 50px; }
.gatilho-s3 { width: 1px; height: 1px; position: absolute; top: 50px; }
.gatilho-s4 { width: 1px; height: 1px; position: absolute; top: 250px; }
.gatilho-s5 { width: 1px; height: 1px; position: absolute; top: 250px; }
.gatilho-s6 { width: 1px; height: 1px; position: absolute; top: 250px; }
#iframe-shop { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
#ifram-int-shop { width: 1200px; height: 1150px; position: relative; margin: auto; border-radius: 20px; overflow: hidden; }
#faixa-cta-iframe { width: 100%; height: 100px; position: relative; float: left; margin-top: -30px; }
.cta-join-moviment { width: 250px; height: auto; position: relative; margin: auto; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.cta-join-moviment:hover { background-color: #A0C56D; }
.cta-join-moviment:hover .icn-cta-faq-shop { animation: swing-left-right 2s ease-in-out infinite; }
.iframe-links { width: 100%; height: auto; position: relative; float: left; }
#mascara-contato-enviado { width: 100%; height: 100%; position: fixed; z-index: 9999; background-color: #000; opacity: 0.9; }
#container-mensagem-contato-enviado { width: 600px; height: 300px; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -280px; background-color: #272C34; border-radius: 30px; z-index: 99999; }
#chamada-contato-enviado { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; color: #fff; font-size: 28px; text-align: center; }
#sobre-contato-enviado { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 20px; color: #fff; text-align: center; padding: 0px 80px; }
@-webkit-keyframes flutuacao-suave {
0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
50% { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-moz-keyframes flutuacao-suave {
0% { -moz-transform: translateY(0px); transform: translateY(0px); }
50% { -moz-transform: translateY(-8px); transform: translateY(-8px); }
100% { -moz-transform: translateY(0px); transform: translateY(0px); }
}
@-o-keyframes flutuacao-suave {
0% { -o-transform: translateY(0px); transform: translateY(0px); }
50% { -o-transform: translateY(-8px); transform: translateY(-8px); }
100% { -o-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes flutuacao-suave {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0px); }
}
.flutuando-suave { -webkit-animation: flutuacao-suave 5s ease-in-out infinite; -moz-animation: flutuacao-suave 5s ease-in-out infinite; -o-animation: flutuacao-suave 5s ease-in-out infinite; animation: flutuacao-suave 5s ease-in-out infinite; }
.flutuando-suave-2 { -webkit-animation: flutuacao-suave 6s ease-in-out infinite; -moz-animation: flutuacao-suave 6s ease-in-out infinite; -o-animation: flutuacao-suave 6s ease-in-out infinite; animation: flutuacao-suave 6s ease-in-out infinite; }
.flutuando-suave-3 { -webkit-animation: flutuacao-suave 7s ease-in-out infinite; -moz-animation: flutuacao-suave 7s ease-in-out infinite; -o-animation: flutuacao-suave 7s ease-in-out infinite; animation: flutuacao-suave 7s ease-in-out infinite; }
.ondas-animadas { animation: ondas-distorcao 6s ease-in-out infinite alternate; display: block; }
@keyframes ondas-distorcao {
0% { transform: scaleX(1) skewY(0deg); filter: blur(0px); }
50% { transform: scaleX(1.03) skewY(1.5deg); filter: blur(0.4px); }
100% { transform: scaleX(1) skewY(0deg); filter: blur(0px); }
}
/* Fixed Menu */
#faixa-menu-fixo { width: 100%; height: auto; position: fixed; top: 100px; z-index: 999; }
#view-menu-fixo { width: 90%; height: 75px; position: relative; margin: auto; background: #1E202F; border-radius: 80px; max-width: 1340px; -webkit-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -moz-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -o-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -ms-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); }
#bg-logo { width: 182px; height: 207px; position: absolute; top: -59px; left: -30px; background-image: url(img/pg-logo-menu.png); background-size: 182px; }
#logo-menu-topo { width: 130px; height: 85px; position: absolute; left: 50%; top: 50%; margin-left: -65px; margin-top: -48px; background: url('img/logo-menu-topo.png'); background-size: 130px; }
/* Landing Page Top Section */
#s1-lp { width: 100%; height: 1000px; position: relative; float: left; background: #272C34; }
#ornamento-topo { width: 100%; height: 336px; position: absolute; top: -70px; background: url('img/ornamento-topo.png'); background-repeat: repeat-x; }
.item-menu-fixo { width: auto; height: auto; position: relative; float: left; margin-left: 20px; margin-right: -10px; margin-top: 20px; padding: 7px 15px; color: #fff; font-size: 17px; border-radius: 60px; cursor: pointer; }
.item-menu-fixo:hover { color: #CFFF8D; }
.btn-degrade { background: #a0d95c; /* fallback para navegadores muito antigos */ background: -webkit-linear-gradient(left, #a0d95c 0%, #57d0c6 100%); /* Safari, Chrome antigos */ background: -moz-linear-gradient(left, #a0d95c 0%, #57d0c6 100%); /* Firefox antigos */ background: -o-linear-gradient(left, #a0d95c 0%, #57d0c6 100%); /* Opera antigos */ background: linear-gradient(90deg, #a0d95c 0%, #57d0c6 100%); /* padrão moderno */ transition: all 0.3s ease; /* Isso faz a saída da classe ser suave */ }
.btn-degrade:hover { color: #fff !important; }
.btn-degrade-2 { background: #a0d95c; /* fallback para navegadores muito antigos */ background: -webkit-linear-gradient(left, #a0d95c 0%, #57d0c6 100%); /* Safari, Chrome antigos */ background: -moz-linear-gradient(left, #a0d95c 0%, #57d0c6 100%); /* Firefox antigos */ background: -o-linear-gradient(left, #a0d95c 0%, #57d0c6 100%); /* Opera antigos */ background: linear-gradient(90deg, #a0d95c 0%, #57d0c6 100%); /* padrão moderno */ transition: all 0.3s ease; /* Isso faz a saída da classe ser suave */ }
.btn-degrade-2:hover { color: #fff !important; }
.menu-fixo-e { width: auto; height: auto; position: relative; float: left; margin-left: 142px; }
.menu-fixo-d { width: 440px; height: auto; position: relative; float: right; margin-right: 21px; }
#my-acount-menu { width: 30px; height: 30px; position: absolute; right: 129px; top: 24px; }
#cart-menu { width: 30px; height: 30px; position: absolute; right: 87px; top: 24px; }
#insta-menu { width: 30px; height: 30px; position: absolute; right: 40px; top: 24px; }
.material-tooltip { background-color: #CDFF87 !important; /* verde-limão */ color: #2B5720 !important; /* verde escuro */ font-weight: bold; border-radius: 8px; font-size: 14px; padding: 10px 16px; box-shadow: none !important; /* remove sombra */ opacity: 1 !important; /* força opacidade */ mix-blend-mode: normal !important; /* evita mesclagem estranha */ backdrop-filter: none !important; /* remove filtros */ }
.waves-ripple { background-color: transparent !important; display: none !important; }
/* Top content start */
#view-conteudo-topo { width: 1200px; height: 100%; position: relative; margin: auto; }
#view-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 300px; font-size: 45px; color: #fff; text-align: center; padding: 0px 80px; }
@-webkit-keyframes gradient-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes gradient-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-o-keyframes gradient-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes gradient-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.highlight-natural { background: -webkit-linear-gradient(90deg, #a0d95c 0%, #57d0c6 100%); background: -moz-linear-gradient(90deg, #a0d95c 0%, #57d0c6 100%); background: -o-linear-gradient(90deg, #a0d95c 0%, #57d0c6 100%); background: linear-gradient(90deg, #a0d95c 0%, #57d0c6 100%); background-size: 400% 400%; /* <<< maior área pra criar mais movimento */ -webkit-animation: gradient-move 2.5s ease-in-out infinite alternate; -moz-animation: gradient-move 2.5s ease-in-out infinite alternate; -o-animation: gradient-move 2.5s ease-in-out infinite alternate; animation: gradient-move 2.5s ease-in-out infinite alternate; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent; font-weight: 700; }
@-webkit-keyframes gradient-move-vibrant {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes gradient-move-vibrant {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-o-keyframes gradient-move-vibrant {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes gradient-move-vibrant {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.highlight-vibrant { background: -webkit-linear-gradient(90deg, #FFB652 0%, #FF4001 100%); background: -moz-linear-gradient(90deg, #FFB652 0%, #FF4001 100%); background: -o-linear-gradient(90deg, #FFB652 0%, #FF4001 100%); background: linear-gradient(90deg, #FFB652 0%, #FF4001 100%); background-size: 400% 400%; -webkit-animation: gradient-move-vibrant 2.5s ease-in-out infinite alternate; -moz-animation: gradient-move-vibrant 2.5s ease-in-out infinite alternate; -o-animation: gradient-move-vibrant 2.5s ease-in-out infinite alternate; animation: gradient-move-vibrant 2.5s ease-in-out infinite alternate; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent; font-weight: 700; }
#container-ctas-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
#container-cta-topo-int { width: 490px; height: auto; position: relative; margin: auto; }
.item-cta-topo { width: 215px; height: auto; position: relative; float: left; margin-left: 20px; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 30px; border-radius: 80px; }
.icn-cta-topo { width: 25px; height: 25px; position: absolute; right: 16px; top: 8px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
.icn-cta-topo-2 { width: 25px; height: 25px; position: absolute; right: 16px; top: 6px; background: url('img/tubo-ensaio.png'); background-size: 25px; }
.item-cta-topo:hover { background-color: #A0C56D; }
#ornamento-cta-topo { width: 144px; height: 96px; position: absolute; left: -170px; top: -60px; background: url('img/ornamento-cta.png'); background-size: 144px; }
#faixa-depoimentos-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
#dp-1 { width: 250px; height: 250px; position: absolute; left: 70px; top: 100px; }
#ft-dp1 { width: 147px; height: 147px; position: absolute; left: 0px; top: 0px; background: url('img/foto-dp1.png'); background-size: 147px; }
#ornamento-dp1 { width: 214px; height: 260px; position: absolute; right: -203px; top: -111px; background: url('img/ornamento-dp1.png'); background-size: 214px; }
#bloco-txt-dp1 { width: 350px; height: 100px; position: absolute; left: -110px; top: -120px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; }
#dp-2 { width: 500px; height: 150px; position: absolute; left: 50%; margin-left: -345px; top: 110px; }
#bloco-txt-dp2 { width: 350px; height: 100px; position: absolute; top: 19px; left: -370px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; }
#ft-dp2 { width: 147px; height: 147px; position: absolute; right: 0px; top: 0px; background: url('img/foto-dp2.png'); background-size: 147px; }
#ornamento-dp2 { width: 128px; height: 143px; position: absolute; bottom: -120px; left: -60px; background: url('img/ornamento-dp2.png'); background-size: 128px; }
#dp-3 { width: 400px; height: 150px; position: absolute; right: 260px; top: 30px; }
#bloco-txt-dp3 { width: 240px; height: 150px; position: absolute; top: 19px; right: -250px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; z-index: 20; }
#ft-dp3 { width: 147px; height: 147px; position: absolute; right: 0px; top: 0px; background: url('img/foto-dp3.png'); background-size: 147px; }
#ornamento-dp3 { width: 278px; height: 151px; position: absolute; bottom: 120px; left: 320px; background: url('img/ornamento-dp3.png'); background-size: 278px; }
.txt-dp { width: 100%; height: 100%; position: relative; float: left; z-index: 10; }
.perninha-dp { width: 40px; height: 40px; position: absolute; background-color: #fff; border-radius: 7px; bottom: -5px; transform: rotate(45deg); }
.l-dp1 { left: 50%; margin-left: -10px; bottom: -10px; z-index: 1 }
.l-dp2 { right: -10px; bottom: 20px; }
.l-dp3 { left: -7px; bottom: 60px; }
#faixa-palavras { width: 100%; height: auto; position: relative; float: left; overflow: hidden; }
@-webkit-keyframes faixa-move {
0% { margin-left: 0px; }
100% { margin-left: -3000px; }
}
@-moz-keyframes faixa-move {
0% { margin-left: 0px; }
100% { margin-left: -3000px; }
}
@-o-keyframes faixa-move {
0% { margin-left: 0px; }
100% { margin-left: -3000px; }
}
@keyframes faixa-move {
0% { margin-left: 0px; }
100% { margin-left: -3000px; }
}
#faixa-palavra-int { width: 7200px; height: auto; position: relative; top: 0px; -webkit-animation: faixa-move 80s ease-in-out infinite alternate; -moz-animation: faixa-move 80s ease-in-out infinite alternate; -o-animation: faixa-move 80s ease-in-out infinite alternate; animation: faixa-move 80s ease-in-out infinite alternate; }
.item-palavra { width: 200px; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 400; text-align: center; padding: 15px 0px; }
.bg-p1 { background-color: #25A0C1; }
.bg-p2 { background-color: #B3CC8F; }
.bg-p3 { background-color: #FFBD5C; }
.bg-p4 { background-color: #FFA485; }
.bg-p5 { background-color: #7CC5BF; }
.bg-p6 { background-color: #C1A18E; }
#div-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #272C34; padding-bottom: 140px; }
#view-s2 { width: 1200px; height: auto; position: relative; margin: auto; }
#conteudo-s2 { width: 50%; height: 100%; position: relative; float: left; }
#conteudo-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 60px; color: #fff; font-weight: 700; }
@-webkit-keyframes gradient-nature-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes gradient-nature-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-o-keyframes gradient-nature-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes gradient-nature-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.text-gradient-nature { background: -webkit-linear-gradient(90deg, #C5F94C 0%, #54D0E5 100%); background: -moz-linear-gradient(90deg, #C5F94C 0%, #54D0E5 100%); background: -o-linear-gradient(90deg, #C5F94C 0%, #54D0E5 100%); background: linear-gradient(90deg, #C5F94C 0%, #54D0E5 100%); background-size: 300% 300%; -webkit-animation: gradient-nature-move 3.5s ease-in-out infinite alternate; -moz-animation: gradient-nature-move 3.5s ease-in-out infinite alternate; -o-animation: gradient-nature-move 3.5s ease-in-out infinite alternate; animation: gradient-nature-move 3.5s ease-in-out infinite alternate; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent; }
#conteudo-s2 p { width: 75%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 26px; color: #fff; font-weight: 300; }
#bloco-sobre-linha-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; z-index: 10; }
#ctas-linhas-de-produtos { width: 100%; height: auto; position: relative; float: left; }
.item-cta-linha-produto { width: auto; height: auto; position: relative; float: left; margin-right: 10px; color: #fff; font-weight: 500; font-size: 20px; border-radius: 60px; padding: 8px 30px; cursor: pointer; }
.atv-sobre-l-produto { background-color: #fff; color: #272C34; }
.atv-sobre-l-produto:hover { color: #272C34 !important; }
.item-cta-linha-produto:hover { color: #CFFF8D; }
#tipografia-s2-int { transition: opacity 0.3s ease, transform 0.3s ease; }
#tipografia-s2-int.fade-out { opacity: 0; transform: scale(0.85); }
#tipografia-s2-int.fade-in { opacity: 1; transform: scale(1); }
#sobre-produto-int { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; margin-top: 25px; font-weight: 300; }
#faixa-cta-sobre-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
#cta-sobre-linha-produto { width: 230px; height: auto; position: relative; float: left; margin-left: 0px; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 30px; border-radius: 80px; cursor: pointer; }
#cta-sobre-linha-produto:hover { background-color: #A0C56D; }
#icn-cta-sobre-linha-produto { width: 25px; height: 25px; position: absolute; right: 16px; top: 10px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
/* tipografia s2 */
#tipografia-s2 { width: 50%; height: 100%; position: relative; float: left; }
#tipografia-s2-int { width: 100%; height: 200px; position: relative; float: left; margin-top: 30px; font-size: 600px; color: #fff; text-transform: uppercase; text-align: center; font-weight: 600; }
#div-s3 { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; padding-bottom: 30px; }
.fix-shop-page { margin-top: 150px; }
@-webkit-keyframes girar-suave {
0% { -webkit-transform: rotate(-9deg); transform: rotate(-9deg); }
100% { -webkit-transform: rotate(9deg); transform: rotate(9deg); }
}
@-moz-keyframes girar-suave {
0% { -moz-transform: rotate(-9deg); transform: rotate(-9deg); }
100% { -moz-transform: rotate(9deg); transform: rotate(9deg); }
}
@-o-keyframes girar-suave {
0% { -o-transform: rotate(-9deg); transform: rotate(-9deg); }
100% { -o-transform: rotate(9deg); transform: rotate(9deg); }
}
@keyframes girar-suave {
0% { transform: rotate(-9deg); }
100% { transform: rotate(9deg); }
}
#ornamto-e-s3 { width: 552px; height: 553px; position: absolute; left: -220px; top: -220px; background: url('img/folhas.png'); background-size: 552px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#ornamto-d-s3-out { width: 543px; height: 539px; position: absolute; right: 0px; top: -340px; overflow: hidden; }
@-webkit-keyframes girar-suave-d {
0% { -webkit-transform: rotate(4deg); transform: rotate(4deg); }
100% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); }
}
@-moz-keyframes girar-suave-d {
0% { -moz-transform: rotate(4deg); transform: rotate(4deg); }
100% { -moz-transform: rotate(-4deg); transform: rotate(-4deg); }
}
@-o-keyframes girar-suave-d {
0% { -o-transform: rotate(4deg); transform: rotate(4deg); }
100% { -o-transform: rotate(-4deg); transform: rotate(-4deg); }
}
@keyframes girar-suave-d {
0% { transform: rotate(4deg); }
100% { transform: rotate(-4deg); }
}
#ornamto-d-s3 { width: 100%; height: 100%; position: absolute; top: 0px; right: -180px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#view-div-s3 { width: 1200px; height: auto; position: relative; margin: auto; }
#view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; font-size: 330px; color: #fff; text-align: center; font-weight: 800; }
#subtitulo-s3 { width: 570px; height: auto; position: absolute; bottom: -167px; right: 430px; font-size: 48px; color: #fff; font-weight: 400; }
@-webkit-keyframes gradient-orange-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes gradient-orange-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-o-keyframes gradient-orange-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes gradient-orange-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.text-gradient-orange { background: -webkit-linear-gradient(90deg, #FBB040 0%, #F15A24 50%, #ED1C24 100%); background: -moz-linear-gradient(90deg, #FBB040 0%, #F15A24 50%, #ED1C24 100%); background: -o-linear-gradient(90deg, #FBB040 0%, #F15A24 50%, #ED1C24 100%); background: linear-gradient(90deg, #FBB040 0%, #F15A24 50%, #ED1C24 100%); background-size: 300% 300%; -webkit-animation: gradient-orange-move 3s ease-in-out infinite alternate; -moz-animation: gradient-orange-move 3s ease-in-out infinite alternate; -o-animation: gradient-orange-move 3s ease-in-out infinite alternate; animation: gradient-orange-move 3s ease-in-out infinite alternate; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent; }
/* Product category section start */
#div-cat-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
/* Product category item */
.item-categoria-produto { width: 25%; height: auto; position: relative; float: left; }
.icn-categoria { width: 80px !important; height: 80px !important; position: relative; float: left; border-radius: 25px !important; border: 2px solid transparent; /* importante! */ background: linear-gradient(#30363D, #30363D) padding-box, /* fundo interno */
linear-gradient(135deg, #C5F94C 0%, #54D0E5 100%) border-box; /* borda degrade */ background-clip: padding-box, border-box; cursor: pointer; }
.icn-categoria:hover { width: 100px; height: 100px; position: relative; float: left; border-radius: 25px; border: 2px solid transparent; /* importante! */ background: linear-gradient(#30363D, #1E2226) padding-box, /* fundo interno */
linear-gradient(135deg, #C5F94C 0%, #54D0E5 100%) border-box; /* borda degrade */ background-clip: padding-box, border-box; }
.icn-int-categoria { width: 60px !important; height: 60px !important; position: absolute; left: 50%; top: 50%; margin-left: -30px; margin-top: -30px; }
.legenda-categoria-seletor { width: 200px; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 10px; font-size: 14px; color: #fff; }
/* Product cards section start */
#div-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding-bottom: 100px; }
/* Product card start */
.item-card-produto { width: 23% !important; height: 530px !important; position: relative !important; float: left !important; margin-left: 0% !important; margin-right: 2% !important; margin-bottom: 30px !important; background-color: #3D444C !important; border-radius: 20px !important; opacity: 1 !important; visibility: visible !important; transition: opacity 0.4s ease, visibility 0.4s ease !important; }
.item-card-produto.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.faixa-preco-produto { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
.tag-preco { width: auto; height: auto; position: relative; float: left; padding: 6px 20px; border-radius: 9px; margin-top: 20px; color: #367639; font-weight: 500; font-size: 18px; }
.bg-green-money { background: linear-gradient(90deg, #A6ED66 0%, #01C723 100%); display: inline-block; text-align: center; }
.bg-green-money-b { background-color: #CFFF8D !important; }
.faixa-foto-produto-card { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 20px; }
.box-foto-produto-int { width: 100%; height: auto; position: relative; float: left; border-radius: 20px; overflow: hidden; }
.bg-white-to-darkgreen { background: #ffffff; background: -webkit-linear-gradient(top, #ffffff 0%, #0f3e24 100%); background: -moz-linear-gradient(top, #ffffff 0%, #0f3e24 100%); background: -o-linear-gradient(top, #ffffff 0%, #0f3e24 100%); background: linear-gradient(#b7edbd, #3d444c); }
.foto-produto-interno { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
.descricao-produto { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; padding: 0px 20px; }
.titulo-descricao-produto { width: 100% !important; height: 65px !important; position: relative !important; float: left !important; margin-top: 7px !important; font-size: 17px !important; color: #fff !important; line-height: 20px; }
.titulo-descricao-produto a { color: #fff; }
.descricao-produto-int { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 14px; color: #fff; opacity: 0.8; }
.faixa-cta-card { width: 100%; height: auto; position: absolute; bottom: 25px; }
.cta-card-produto { width: 195px; height: auto; position: relative; float: left; margin-left: 20px; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.cta-card-produto:hover { background-color: #A0C56D; }
.icn-cta-card-produto { width: 25px; height: 25px; position: absolute; right: 13px; top: 9px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
@keyframes swing-left-right {
0% { transform: rotate(0deg); }
25% { transform: rotate(-20deg); }
50% { transform: rotate(20deg); }
75% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
.item-card-produto:hover .icn-cta-card-produto { animation: swing-left-right 2s ease-in-out infinite; }
.cta-comprar-agora:hover .icn-cta-comprar-agora { animation: swing-left-right 2s ease-in-out infinite; }
.cta-ver-blog:hover .icn-cta-ver-blog { animation: swing-left-right 2s ease-in-out infinite; }
.cta-faq-shop:hover .icn-cta-faq-shop, .cta-shop-2:hover .icn-cta-shop-2, .cta-shop-3:hover .icn-cta-shop-3, #cta-sobre-linha-produto:hover #icn-cta-sobre-linha-produto, .item-cta-topo:hover .icn-cta-topo, .item-cta-topo:hover .icn-cta-topo-2 { animation: swing-left-right 2s ease-in-out infinite; }
.item-categoria-produto:hover .icn-int-categoria { animation: swing-left-right 2s ease-in-out infinite; }
/* The Science section start */
#div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #282C34; padding-bottom: 100px; }
#ornamento-s4-e { width: 543px; height: 539px; position: absolute; margin-left: 0px; left: -220px; top: -320px; background: url('img/cogumelos-2.png'); background-size: 543px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#ornamento-s4-d { width: 552px; height: 553px; position: absolute; right: 0px; top: -300px; overflow: hidden; }
#ornamento-s4-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -200px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-s4 { width: 90%; height: auto; position: relative; margin: auto; max-width: 1600px; }
#headline-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; font-size: 190px; color: #fff; font-weight: 800; text-align: center; z-index: 20; }
#molecula { width: 100%; height: auto; position: relative; float: left; margin-top: -270px; }
#faixa-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
#selo-qualidade { width: 200px; height: 200px; position: relative; margin: auto; background: url('img/selo.png'); background-size: 200px; }
#faixa-topicos-qualidade { width: 1200px; height: auto; position: relative; margin: auto; }
#chamada-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; color: #fff; font-size: 80px; font-weight: 700; text-align: center; }
#faixa-bloco-itens-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
.item-qualidade { width: 33%; height: auto; position: relative; float: left; padding: 0px 20px; }
.item-qualidade h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 24px; color: #fff; font-weight: 600; }
.item-qualidade p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 17px; color: #fff; font-weight: 300; }
#faixa-cta-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
.cta-comprar-agora { width: 185px; height: auto; left: 50%; position: relative; margin: unset; margin-left: -92.5px; font-size: 18px; font-weight: 500; margin-left: -92.5px; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.cta-comprar-agora:hover { background-color: #A0C56D; }
.icn-cta-comprar-agora { width: 25px; height: 25px; position: absolute; right: 16px; top: 10px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
/* Blog section start */
#div-s5 { width: 100%; height: auto; position: relative; float: left; display: none; }
#topo-div-s5 { width: 100%; height: 600px; position: relative; float: left; background-color: #3D3D45; overflow: hidden; }
#cogu-1 { width: 457px; height: 451px; position: absolute; right: -90px; top: -130px; background: url('img/cogu1.png'); background-size: 457px; }
#cogu-2 { width: 457px; height: 451px; position: absolute; left: -90px; bottom: -130px; background: url('img/cogu2.png'); background-size: 457px; }
#ornamto-e-s5 { width: 552px; height: 553px; position: absolute; left: -220px; top: -220px; background: url('img/folhas.png'); background-size: 552px; z-index: 10; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#ornamto-d-s5-out { width: 543px; height: 539px; position: absolute; right: 0px; top: -340px; overflow: hidden; z-index: 10; }
#ornamto-d-s5 { width: 100%; height: 100%; position: absolute; top: 0px; right: -180px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#view-div-blog-home { width: 1200px; height: auto; position: relative; margin: auto; }
#chamada-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; font-size: 74px; color: #fff; font-weight: 600; text-align: center; }
@-webkit-keyframes gradient-withus-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes gradient-withus-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-o-keyframes gradient-withus-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes gradient-withus-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.text-gradient-withus { background: -webkit-linear-gradient(90deg, #00E7F5 0%, #C4F364 100%); background: -moz-linear-gradient(90deg, #00E7F5 0%, #C4F364 100%); background: -o-linear-gradient(90deg, #00E7F5 0%, #C4F364 100%); background: linear-gradient(90deg, #00E7F5 0%, #C4F364 100%); background-size: 300% 300%; -webkit-animation: gradient-withus-move 4s ease-in-out infinite alternate; -moz-animation: gradient-withus-move 4s ease-in-out infinite alternate; -o-animation: gradient-withus-move 4s ease-in-out infinite alternate; animation: gradient-withus-move 4s ease-in-out infinite alternate; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent; font-weight: 700; }
.linha-rascunho { width: 297px; height: 66px; position: absolute; right: 340px; bottom: -40px; background: url('img/rascunho.png'); background-size: 297px; background-repeat: no-repeat; }
#sobre-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 20px; color: #fff; text-align: center; padding: 0px 300px; font-weight: 300; }
#faixa-cta-blog { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.cta-ver-blog { width: 200px; height: auto; position: relative; margin: auto; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.cta-ver-blog:hover { background-color: #A0C56D; }
.icn-cta-ver-blog { width: 25px; height: 25px; position: absolute; right: 16px; top: 10px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
#s-posts-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; z-index: 90; display: none; }
#view-posts-blog-home { width: 1200px; height: auto; position: relative; margin: auto; }
/* item card post blog */
.card-post-home { width: 33%; height: auto; position: relative; float: left; padding: 0px 20px; cursor: pointer; }
.img-card-post { width: 100%; height: auto; position: relative; float: left; border-radius: 20px; overflow: hidden; }
.tag-img-post { width: auto; height: auto; position: absolute; bottom: 20px; left: 20px; padding: 8px 15px; background-color: #DEF8DE; color: #3F9182; border-radius: 20px; z-index: 90; }
.resumo-post-home { width: 100%; height: 250px; position: relative; float: left; margin-top: 20px; }
.resumo-post-home h5 { width: 100%; height: 50px; position: relative; float: left; line-height: 25px; font-size: 20px; color: #000; font-weight: 500; }
.resumo-post-home p { width: 100%; height: auto; position: relative; float: left; margin-top: 5px; color: #000; font-size: 16px; }
.card-post-home:hover .resumo-post-home h5 { color: #3F9182; }
/* FAQ section */
#div-s6 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; background-color: #fff; padding: 100px 0px; }
#view-div-s6 { width: 1200px; height: auto; position: relative; margin: auto; }
#div-e-s6 { width: 50%; height: auto; position: relative; float: left; }
#faq-chamada { width: 100%; height: auto; position: relative; float: left; font-size: 65px; font-weight: 800; line-height: 70px; color: #000; }
#sobre-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 24px; color: #000; font-weight: 400; }
#cta-shop-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.cta-faq-shop { width: 240px; height: auto; position: relative; float: left; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.cta-faq-shop:hover { background-color: #A0C56D; }
.icn-cta-faq-shop { width: 25px; height: 25px; position: absolute; right: 16px; top: 7px; background: url("img/icn-logo-thc.png") 0% 0% / 25px auto; }
#div-d-s6 { width: 50%; height: auto; position: relative; float: left; padding: 0px 20px; }
#box-faq { width: 100%; height: auto; position: relative; float: left; background-color: #F4FFF4; border-radius: 30px; overflow: hidden; }
.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; background-color: unset; 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; }
#div-s7 { width: 100%; height: 3090px; position: relative; float: left; background-color: #30363D; margin-top: 100px; overflow: hidden; }
#view-div-s7 { width: 1200px; height: auto; position: relative; margin: auto; }
#headline-s7 { width: 100%; height: auto; position: relative; float: left; margin-top: 160px; text-align: center; font-size: 100px; color: #fff; font-weight: 800; z-index: 9; }
@-webkit-keyframes gradient-here-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes gradient-here-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-o-keyframes gradient-here-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes gradient-here-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.text-gradient-here { background: -webkit-linear-gradient(90deg, #B1EFC8 0%, #76C8F4 100%); background: -moz-linear-gradient(90deg, #B1EFC8 0%, #76C8F4 100%); background: -o-linear-gradient(90deg, #B1EFC8 0%, #76C8F4 100%); background: linear-gradient(90deg, #B1EFC8 0%, #76C8F4 100%); background-size: 300% 300%; -webkit-animation: gradient-here-move 4s ease-in-out infinite alternate; -moz-animation: gradient-here-move 4s ease-in-out infinite alternate; -o-animation: gradient-here-move 4s ease-in-out infinite alternate; animation: gradient-here-move 4s ease-in-out infinite alternate; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent; font-weight: 800; }
#bg-here { width: 270px; height: 170px; position: absolute; right: 167px; top: 150px; background: url('img/bg-here.png'); background-size: 270px; }
#conteudo-div-s7 { width: 100%; height: auto; position: relative; float: left; }
#molecula-4 { width: 675px; height: 925px; position: absolute; margin-top: -180px; left: 50%; margin-left: -337.5px; background: url('img/molecula-2.png'); background-size: 675px; }
#txt-1-m { width: 400px; height: 300px; position: absolute; left: 100px; top: 70px; color: #fff; font-size: 20px; font-weight: 300; opacity: 0; }
#txt-2-m { width: 500px; height: 300px; position: absolute; right: 50px; top: 260px; color: #fff; font-size: 20px; font-weight: 300; opacity: 0; }
#txt-3-m { width: 420px; height: 300px; position: absolute; left: 0px; top: 460px; color: #fff; font-size: 20px; font-weight: 300; opacity: 0; }
#ornamento-m-s7 { width: 335px; height: 259px; position: absolute; left: 50px; top: 450px; background: url('img/ornamento-molecula-1a.png'); background-size: 335px; }
#ornamento-m-s7-a { width: 278px; height: 374px; position: absolute; right: 50px; top: 550px; background: url('img/ornamento-molecula-2a.png'); background-size: 278px; }
#ornamento-m-s7-b { width: 343px; height: 261px; position: absolute; left: 50px; top: 950px; background: url('img/ornamento-molecula-3a.png'); background-size: 343px; }
#o-f1-s7 { width: 302px; height: 529px; position: absolute; margin-left: 0px; left: -50px; top: 600px; background: url('img/f1.png'); background-size: 302px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#o-f2-s7 { width: 548px; height: 529px; position: absolute; right: -150px; top: 850px; background: url('img/f2-s7.png'); background-size: 548px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#faixa-cta-div-s7-1 { width: 100%; height: auto; position: relative; float: left; margin-top: 780px; }
.cta-shop-2 { width: 240px; height: auto; position: relative; margin: auto; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.cta-shop-2:hover { background-color: #A0C56D; }
.icn-cta-shop-2 { width: 25px; height: 25px; position: absolute; right: 16px; top: 10px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
#conteudo-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#headline-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 140px; text-align: center; font-size: 100px; color: #fff; font-weight: 800; z-index: 9; }
@-webkit-keyframes degrade-who-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes degrade-who-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-o-keyframes degrade-who-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes degrade-who-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.degrade-who { background: -webkit-linear-gradient(to right, #f9a43d, #ed1c24); background: -moz-linear-gradient(to right, #f9a43d, #ed1c24); background: -o-linear-gradient(to right, #f9a43d, #ed1c24); background: linear-gradient(to right, #f9a43d, #ed1c24); background-size: 300% 300%; -webkit-animation: degrade-who-move 3.5s ease-in-out infinite alternate; -moz-animation: degrade-who-move 3.5s ease-in-out infinite alternate; -o-animation: degrade-who-move 3.5s ease-in-out infinite alternate; animation: degrade-who-move 3.5s ease-in-out infinite alternate; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent; }
#bg-who { width: 284px; height: 178px; position: absolute; left: 264px; top: 116px; background: url('img/bg-who.png'); background-size: 284px; }
#molecula-s7-2 { width: 681px; height: 1335px; position: absolute; left: 50%; margin-left: -170px; top: 420px; background: url('img/molecula-45.png'); background-size: 681px; }
#txt-s7-2 { width: 400px; height: 600px; position: absolute; left: 0px; top: 400px; opacity: 0; }
#txt-s7-2 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 28px; color: #fff; font-weight: 600; }
#txt-s7-2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 18px; color: #fff !important; font-weight: 300; }
#txt-s7-3 { width: 400px; height: 600px; position: absolute; left: 0px; top: 1150px; opacity: 0; }
#txt-s7-3 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 28px; color: #fff; font-weight: 600; }
#txt-s7-3 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 18px; color: #fff !important; font-weight: 300; }
#txt-s7-4 { width: 400px; height: 600px; position: absolute; right: 0px; top: 680px; opacity: 0; }
#txt-s7-4 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 28px; color: #fff; font-weight: 600; }
#txt-s7-4 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 18px; color: #fff !important; font-weight: 300; }
#faixa-cta-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 1800px; }
.cta-shop-3 { width: 240px; height: auto; position: relative; margin: auto; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.cta-shop-3:hover { background-color: #A0C56D; }
.icn-cta-shop-3 { width: 25px; height: 25px; position: absolute; right: 16px; top: 10px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
#div-s8 { width: 100%; height: auto; position: relative; float: left; background-color: #3D3D45; padding-bottom: 51px; }
#view-div-s8 { width: 1200px; height: auto; position: relative; margin: auto; }
#ornamento-s8-e { width: 543px; height: 539px; position: absolute; margin-left: 0px; left: -220px; top: -320px; background: url('img/cogumelos-2.png'); background-size: 543px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#ornamento-s8-d { width: 552px; height: 553px; position: absolute; right: 0px; top: -300px; overflow: hidden; }
#ornamento-s8-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -200px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-contato { width: 1200px; height: auto; position: relative; margin: auto; }
#ornamento-bg-contato { width: 477px; height: 257px; position: absolute; left: 50%; margin-left: -300px; margin-top: 100px; background: url('img/bg-ornamento-contato.png'); background-size: 477px; }
#div-chamada-form-contato { width: 50%; height: auto; position: relative; float: left; margin-top: 270px; }
#div-chamada-form-contato h6 { width: 70%; height: auto; position: relative; float: left; font-size: 75px; color: #fff; font-weight: 700; z-index: 10; }
.text-gradient-hear { background: linear-gradient(90deg, #D8FF75 0%, #54D637 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#bg-hear-you { width: 448px; height: 280px; position: absolute; left: -41px; top: -10px; background: url('img/bg-hear-you.png'); background-size: 448px; }
#div-sobre-contato { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
#div-sobre-contato h5 { width: 100%; height: auto; position: relative; float: left; font-size: 32px; color: #fff; font-weight: 700; }
#div-sobre-contato p { width: 80%; height: auto; position: relative; float: left; margin-top: 5px; font-size: 22px; color: #fff; font-weight: 300; }
#arrow-form { width: 242px; height: 38px; position: absolute; right: -160px; top: 50%; margin-top: -250px; background: url('img/arrow-form.png'); background-size: 242px; }
#div-form-contato { width: 30%; height: auto; position: relative; float: right; }
#chamada-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 200px; font-size: 24px; color: #fff; }
#box-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.label { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; margin-bottom: -9px; }
.label input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 4px 20px !important; border-radius: 15px !important; font-size: 14px; color: #3F9182; }
.label textarea { width: 111% !important; height: auto; position: relative; float: left; background-color: #fff !important; padding: 20px 20px !important; border-radius: 15px !important; font-size: 17px !important; color: #3F9182; }
#cta-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
.cta-envia-form { width: 240px; height: auto; position: relative; font-size: 18px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
.icn-cta-envia-form { width: 25px; height: 25px; position: absolute; right: 16px; top: 10px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
.cta-envia-form:hover .icn-cta-envia-form { animation: swing-left-right 2s ease-in-out infinite; }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #418F45; opacity: 1;/* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #418F45; }
:-o-input-placeholder { /* Internet Explorer 10-11 */
color: #418F45; }
:-moz-input-placeholder { /* Internet Explorer 10-11 */
color: #418F45; }
::-ms-input-placeholder { /* Microsoft Edge */
color: #418F45; }
/* Inicio rodapé */
#div-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; }
#ornamento-e-r { width: 457px; height: 476px; position: absolute; left: -250px; top: -280px; background: url('img/ornamento-e-r.png'); background-size: 457px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#ornamento-o-d-r { width: 492px; height: 494px; position: absolute; right: 0px; top: 30px; overflow: hidden; }
#ornamento-d-r { width: 492px; height: 494px; position: absolute; right: -280px; background: url('img/ornamento-r-d.png'); background-size: 492px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#view-rodape { width: 1200px; height: auto; position: relative; margin: auto; z-index: 90; }
#box-form-news-letter { width: 800px; height: 200px; position: relative; margin: auto; margin-top: -70px; background-color: #30363D; border-radius: 30px; display: none; padding: 0px 50px; }
#box-form-news-letter h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; color: #fff; text-align: center; font-size: 30px; font-weight: 600; }
#label-form-news { width: 85%; height: auto; position: relative; float: left; margin-top: 12px; }
#label-form-news input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 16px 20px !important; border-radius: 15px !important; font-size: 20px; color: #3F9182; box-sizing: border-box; }
#cta-enviar-news { width: 90px; height: 62px; position: relative; float: left; margin-top: 12px; margin-left: 10px; background-color: #EAFF8D; border-radius: 20px; cursor: pointer; }
#icn-cta-enviar-news { width: 49px; height: 49px; position: absolute; left: 50%; top: 50%; margin-left: -24px; margin-top: -24px; background: url('img/icn-news.png'); background-size: 49px; }
#cta-enviar-news:hover { background-color: #AFBF69; }
#faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; }
#logo-rodape { width: 218px; height: 142px; position: relative; margin: auto; background: url('img/logo-rodape.png'); background-size: 218px; }
#faixa-links-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; margin-bottom: 170px; }
.div-s-rodape { width: 33.3%; height: 150px; position: relative; float: left; }
.div-s-rodape h3 { width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #fff; }
.div-s-rodape h2 { width: 100%; height: auto; position: relative; float: left; font-size: 24px; text-align: right; color: #fff; }
.div-s-rodape ul li { width: 100%; height: auto; position: relative; float: left; margin-bottom: 6px; font-size: 18px; color: #fff; cursor: pointer; }
.div-s-rodape ul li:hover { color: #CFFF8D; }
.item-icn-sm { width: 30px; height: 30px; position: relative; float: right; cursor: pointer; opacity: 0.7; margin-top: -10px; cursor: pointer; }
.item-icn-sm:hover { opacity: 1; }
#faixa-politica-privacidade { width: 100%; height: auto; position: relative; bottom: unset; float: left; background-color: #2C3035; padding: 15px 20px; color: #fff; text-align: center; font-size: 20px; cursor: pointer; margin-bottom: 0px; }
#faixa-politica-privacidade:hover { color: #EAFF8D; }
#infos-rodape { width: 100%; height: auto; position: relative; margin: auto; max-width: 1200px; color: #fff; padding-bottom: 40px; padding-top: 50px; font-size: 13px; font-weight: 300; }
/* Cart Page */
#topo-pagina-de-carrinho { width: 100%; height: auto; position: relative; float: left; background-color: #272C34; padding-bottom: 200px; }
#conteudo-topo-pg-carrinho { width: 1200px; height: auto; position: relative; margin: auto; }
.div-conteudo-e-pg-carrinho { width: 70%; height: auto; position: relative; float: left; }
.div-conteudo-e-pg-carrinho h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 280px; font-size: 60px; color: #fff; font-weight: 700; }
.div-conteudo-e-pg-carrinho p { width: 50%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 20px; color: #fff; font-weight: 300; }
.formulario-lista-de-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.div-conteudo-d-pg-carrinho { width: 30%; height: auto; position: relative; float: left; margin-top: 336px; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: left; width: 100%; padding-left: 26px; }
.woocommerce table.shop_table { border: 1px solid rgba(255, 255, 255, 0.1); margin: 0 -1px 24px 0; text-align: left; width: 100%; border-collapse: separate; border-radius: 21px; padding: 20px 30px; color: #d5d5d5; }
tr.woocommerce-cart-form__cart-item td { border-bottom: 1px solid #41464B; /* a borda que você quer */ }
.woocommerce a.remove { display: block; font-size: 2.5em; height: 1em; width: 1em; text-align: center; line-height: 1; border-radius: 100%; color: #d4ff4e !important; text-decoration: none; font-weight: 700; border: 0; }
.woocommerce a.remove:hover { background: #218838 !important; /* verde escuro */ color: #fff !important; transform: scale(1.1); }
/* Container quantidade */
.woocommerce .quantity { display: flex; align-items: center; gap: 6px; justify-content: center; }
/* Input quantidade */
.woocommerce .quantity input[type=number].qty { background: transparent; border: none; border-bottom: 2px solid #28a745; color: #fff; font-size: 16px; font-weight: 500; width: 50px; text-align: center; padding: 5px 0; outline: none; }
/* Força input aceitar só números */
.woocommerce .quantity input[type=number].qty::-webkit-outer-spin-button, .woocommerce .quantity input[type=number].qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity input[type=number].qty { -moz-appearance: textfield; }
/* Botões + e - */
.woocommerce .quantity button.qty-btn { background: #28a745; border: none; color: #fff; font-size: 16px; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; }
.woocommerce .quantity button.qty-btn:hover { background: #43d463; }
/* Botões do carrinho iguais aos botões de produto */
.woocommerce-cart-form .button, .cart-collaterals .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: #CFFF8D !important; color: #367639 !important; font-weight: 600; border: none; border-radius: 999px; padding: 16px 25px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; }
/* Hover */
.woocommerce-cart-form .button:hover, .cart-collaterals .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: #CFFF8D; /* tom mais escuro no hover */ color: #367639; }
/* Ícone dentro dos botões */
.woocommerce-cart-form .button .icn-cta-card-produto, .cart-collaterals .button .icn-cta-card-produto { width: 18px; height: 18px; background: url('icone-cannabis.svg') no-repeat center center; background-size: contain; }
/* Campo de input do cupom */
.woocommerce-cart-form .coupon input#coupon_code { width: 220px; padding: 0px 15px; border: 2px solid #cfff8d; border-radius: 999px; background: transparent; color: #fff; font-size: 15px; margin-right: 15px; outline: none; margin-top: 20px; transition: border-color 0.3s ease; }
/* Placeholder */
.woocommerce-cart-form .coupon input#coupon_code::placeholder { color: #367639; opacity: 0.8; }
/* Hover e foco */
.woocommerce-cart-form .coupon input#coupon_code:focus { border-color: #CFFF8D; /* verde claro igual ao botão */ }
/* Espaço extra em cima do botão Update cart */
.woocommerce-cart-form .actions .button[name="update_cart"] { margin-top: 22px !important; padding: 17px 20px !important; color: rgb(54, 118, 57) !important; }
.woocommerce-cart-form .coupon input.input-text::placeholder { color: #CFFF8D !important; opacity: 1; /* garante visibilidade no Chrome/Safari */ }
.cart_totals h2 { font-size: 32px !important; color: #fff; font-weight: 600; margin-top: 60px; }
/* Cart totals / carrinho: overlay sutil */
.woocommerce .cart_totals .blockUI.blockOverlay, .woocommerce .woocommerce-cart-form .blockUI.blockOverlay { background: transparent !important; opacity: 1 !important; /* tira o cinza */ pointer-events: none !important; /* não bloqueia mouse */ }
/* Remove a caixinha/spinner do BlockUI */
.woocommerce .blockUI.blockMsg, .woocommerce .blockUI.blockMsg.blockElement { display: none !important; }
/* Evita "apagão" quando entra estado .processing */
.woocommerce .cart_totals.processing, .woocommerce .woocommerce-cart-form.processing { opacity: 1 !important; filter: none !important; }
/* Botão Proceed to Checkout */
.woocommerce a.checkout-button, .woocommerce button.checkout-button, .woocommerce input.checkout-button { background-color: #CFFF8D !important; /* verde claro */ color: #367639 !important; /* verde escuro no texto */ font-weight: 600; border: none; border-radius: 999px; padding: 14px 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; }
/* Hover */
.woocommerce a.checkout-button:hover, .woocommerce button.checkout-button:hover, .woocommerce input.checkout-button:hover { background-color: #b6ff66 !important; /* tom mais forte no hover */ color: #265328 !important; }
.bg-btn-view-cart { background-color: #fff130 !important; }
.wc-forward { display: none !important; }
/* Estilo do alerta WooCommerce como toast fixo */
.woocommerce-notices-wrapper { position: fixed !important; bottom: 20px; right: 20px; width: auto; max-width: 300px; z-index: 99999; /* sempre acima */ pointer-events: none; /* evita bloquear cliques abaixo */ }
.woocommerce-message, .woocommerce-error, .woocommerce-info { background: #CFFF8D; /* fundo verde claro */ color: #367639; /* texto verde escuro */ font-weight: 600; border-radius: 12px; padding: 12px 18px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); margin: 0 0 10px 0; pointer-events: all; /* o texto continua selecionável */ animation: fadein 0.4s ease; }
/* ínicio página de checkout */
#div-checkout { width: 100%; height: auto; position: relative; float: left; margin-top: 240px; padding-bottom: 140px; }
#view-div-checkout { width: 1200px; height: auto; position: relative; margin: auto; }
#div-checkout p { color: #fff; opacity: 0.8; margin-top: 10px; }
#order_review_heading { color: #fff; }
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { font-weight: 700; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.woocommerce table.shop_table td { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 9px 12px; vertical-align: middle; line-height: 1.5em; }
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { position: relative; box-sizing: border-box; width: 100%; padding: 1em; margin: 1em 0; font-size: .92em; border-radius: 2px; line-height: 1.5; background-color: #699639; color: #515151; border-radius: 8px; }
#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before { content: ""; display: block; border: 1em solid #699639; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; position: absolute; top: -.75em; left: 0; margin: -1em 0 0 2em; }
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: rgba(129, 110, 153, .14); border-radius: 9px; }
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: left; margin-top: 20px; }
/* Animação de entrada */
@keyframes fadein {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Animação de saída */
@keyframes fadeout {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(20px); }
}
#coupon-error-notice { font-size: 16px; position: absolute; margin-left: 17px; }
/* Overlay central quando o carrinho está vazio */
.woo-empty-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 16, 20, 0.9); z-index: 99999; padding: 24px; }
.woo-empty-card { max-width: 560px; width: 100%; background: #2d3439; border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); padding: 28px; text-align: center; padding-bottom: 77px; }
.woo-empty-card h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.25; color: #fff; }
.woo-empty-card p { margin: 0 0 22px; color: #cfd6dc; }
/* Reaproveita seu estilo de CTA (ajuste nomes se necessário) */
/* Botão centralizado no overlay do carrinho vazio */
.woo-empty-card .cta-card-produto { display: inline-flex; align-items: center; justify-content: center; gap: 10px; /* espaço entre texto e ícone */ width: 100%; max-width: 280px; /* largura máxima */ margin: 0 auto; /* centraliza */ background-color: #CFFF8D; color: #367639; font-weight: 600; font-size: 18px; border-radius: 999px; padding: 14px 28px; text-decoration: none; transition: background-color 0.3s ease; text-align: center; }
.woo-empty-card .cta-card-produto:hover { background-color: #b8f46a; /* hover */ color: #367639; }
/* Ajuste do ícone dentro do botão */
.cta-carrinho-vazio { width: 250px; height: auto; position: absolute; left: 50%; margin-left: -125px; padding: 10px 0px; background-color: #CFFF8D; color: #367639 !important; font-size: 18px; text-align: center; border-radius: 50px; cursor: pointer; font-weight: 600; }
.woocommerce a.button.checkout, .wc-proceed-to-checkout a.checkout-button { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
.woocommerce-billing-fields { color: #fff; }
label { font-size: 0.8rem; color: #d9ffb1; }
#view-div-checkout .col-1 { width: 90%; }
#view-div-checkout .col-2 { width: 90%; margin-right: unset; left: -100px; float: left; margin-right: 900px; }
#view-div-checkout input { width: 100%; height: auto; position: relative; float: left; margin-bottom: 5px; background-color: #fff !important; padding: 12px 20px !important; border-radius: 5px !important; font-size: 14px; color: #3F9182; }
/* grid de 2 colunas: esquerda (form) e direita (resumo) */
:root { --gm-sidebar-width: 480px; }
.gm-checkout-grid { display: grid; gap: 24px; }
@media (min-width:1024px) {
.gm-checkout-grid { grid-template-columns: minmax(0, 1fr) var(--gm-sidebar-width); align-items: start; }
.gm-checkout-aside { position: sticky; top: 24px; }
}
/* opcional: limitar largura total do conteúdo */
#view-div-checkout { max-width: 1200px; margin: 0 auto; }
/* (continua valendo o seu CSS visual dos inputs/botões) */
/* Esconde opt-in de newsletter no checkout */
.woocommerce .form-row[id*="newsletter"], .woocommerce .form-row[class*="newsletter"], .woocommerce input[name*="newsletter"], .woocommerce label[for*="newsletter"], .wc-block-checkout .wc-block-components-checkbox label:contains("newsletter"), .wc-block-checkout .wc-block-components-checkbox input[name*="newsletter"] { display: none !important; }
/* Thankyou page */
#div-th-page { width: 100%; height: auto; position: relative; float: left; margin-top: 290px; background-color: #272C34; color: #fff !important; padding-bottom: 120px; }
#view-th-page { width: 1200px; height: auto; position: relative; margin: auto; }
#div-th-page h1 { color: #fff; }
#div-th-page p { color: #fff; }
.gm-section-title { font-size: 20px; }
#div-th-page h4 { font-size: 20px; }
#div-th-page h5 { font-size: 20px; }
.woocommerce-order-details__title { font-size: 20px; }
.woocommerce-column__title { font-size: 20px; }
.gm-summary > div { display: flex; flex-direction: column; gap: 4px; }
.gm-summary > div strong::after { content: ""; }
/* remove os dois-pontos */
/* === Toggle "Ship to a different address?" como botão-pílula === */
#ship-to-different-address { text-align: center; margin: 18px 0 12px; }
#ship-to-different-address .woocommerce-form__label { display: inline-flex !important; /* vence regras do tema */ align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(200, 243, 106, .10); border: 1px solid rgba(200, 243, 106, .35); color: #c8f36a; font-weight: 700; cursor: pointer; user-select: none; }
/* esconde o checkbox nativo, mas mantém acessível */
#ship-to-different-address .woocommerce-form__input-checkbox { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
/* texto + chevron que gira quando abre */
#ship-to-different-address span { line-height: 1; }
#ship-to-different-address span::after { content: "▾"; margin-left: 8px; transition: transform .2s ease; }
#ship-to-different-address-checkbox:checked + span::after { transform: rotate(180deg); }
/* caixa dos campos de envio com destaque quando aberta */
.woocommerce-shipping-fields .shipping_address.is-open { padding: 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .04); }
#div-conta { width: 100%; height: auto; position: relative; float: left; margin-top: 300px; padding-bottom: 140px; z-index: 99; background-color: #272C34; }
#view-div-conta { width: 1200px; height: auto; position: relative; margin: auto; }
#div-conta p { color: #fff !important; }
#view-account h1 { text-align: left !important; color: #fff !important; margin-bottom: -10px; }
#view-account h2 { font-size: 18px !important; color: #fff !important }
.woocommerce-LostPassword a { color: #fff; }
.woocommerce-LostPassword a: hover;
{ color: #CFFF8D !important; }
/* Conta logada */
.woocommerce-MyAccount-navigation { margin-top: 40px; margin-bottom: 40px; }
nav { color: #fff; background-color: #1e202f; width: 100%; border-radius: 12px; height: 56px; line-height: 56px; }
.woocommerce-customer-details { color: #fff; }
.woocommerce-customer-details address { color: #fff; }
#div-account { color: #fff; }
#interna-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 280px; background-color: #272C34; padding-bottom: 200px; }
#view-interna-produto { width: 900px; height: auto; position: relative; margin: auto; }
#interna-produto h2 { font-size: 28px; }
.gm-panel__body ul li { font-weight: 300; }
/* Grid principal */
.gm-single__top { display: grid; gap: 40px; grid-template-columns: 420px 1fr; }
@media (max-width:980px) {
.gm-single__top { grid-template-columns: 1fr; }
}
/* Título, preço, descrição curta */
.woocommerce div.product .product_title { margin: 0 0 8px; font-size: 42px; line-height: 1.15; }
.woocommerce div.product .price { margin: 4px 0 12px; font-weight: 700; }
/* Estoque */
.gm-stock { margin: 8px 0 14px; color: #c8f36a; font-weight: 600; }
/* Qty + botão lado a lado */
.gm-buyrow form.cart { display: flex; gap: 12px; align-items: center; }
.gm-buyrow .quantity { margin: 0; }
.gm-buyrow .single_add_to_cart_button { border-radius: 10px; padding: 12px 16px; font-weight: 700; }
/* Meta (SKU/Categorias/Tags) em linha */
.gm-meta { margin-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; opacity: .85; }
.gm-meta span { display: flex; gap: 6px; }
/* Tabs */
.gm-single__tabs { margin-top: 28px; }
/* Lupinha da galeria */
.woocommerce-product-gallery__trigger { top: 10px; left: 10px; width: 42px; height: 42px; background: rgba(0, 0, 0, .45); border-radius: 50%; }
/* Página interna de produto */
/* ===== SINGLE PRODUCT – layout e fixes ===== */
/* Grid superior */
.gm-single__top { display: grid; gap: 40px; grid-template-columns: 420px 1fr; }
@media (max-width:980px) {
.gm-single__top { grid-template-columns: 1fr; }
}
/* Estoque em verde */
.gm-stock { margin: 8px 0 14px; color: #c8f36a; font-weight: 600; }
/* Linha qty + botão */
.gm-buyrow form.cart { display: flex; gap: 12px; align-items: center; }
.gm-buyrow .quantity { margin: 0; }
/* ===== CTA: botão Add to cart no padrão do site ===== */
.single_add_to_cart_button.button, .single_add_to_cart_button.button.alt { background: #c8f36a !important; color: #1e2a20 !important; border: 1px solid rgba(200, 243, 106, .35) !important; border-radius: 999px !important; padding: 12px 18px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important; }
.single_add_to_cart_button:hover { filter: brightness(.95); }
/* ===== Meta (SKU / Category / Tags) em linha ===== */
.gm-meta { margin-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; opacity: .85; }
.gm-meta span { display: flex; gap: 6px; }
/* ===== Abas: Description / Additional information ===== */
.gm-tabs .woocommerce-tabs { margin-top: 26px; }
.gm-tabs .woocommerce-tabs .tabs { display: flex; gap: 12px; list-style: none; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.gm-tabs .woocommerce-tabs .tabs li { margin: 0; }
.gm-tabs .woocommerce-tabs .tabs li a { display: block; padding: 8px 12px; border-radius: 6px; color: #c8f36a; text-decoration: none; font-weight: 700; border-bottom: 2px solid transparent; }
.gm-tabs .woocommerce-tabs .tabs li.active a { color: #fff; border-color: #c8f36a; background: transparent; }
.gm-tabs .woocommerce-Tabs-panel { padding-top: 10px; }
/* ===== Desliga o efeito de zoom/scale no hover (hard stop) ===== */
.woocommerce-product-gallery__trigger { display: none !important; }
/* some a “lupinha” */
.woocommerce-product-gallery .zoomImg { display: none !important; }
.woocommerce-product-gallery__image img { transform: none !important; transition: none !important; }
/* (Opcional) uniformiza o visual do seletor de variações */
.variations_form .variations { margin: 12px 0 6px; }
.variations_form .value select { width: 100%; }
/* ====== GALERIA: alinhar à esquerda ====== */
.gm-single__gallery, .woocommerce div.product div.images, .woocommerce-product-gallery { margin: 0; text-align: left; justify-self: start; /* corrige grid */ }
.woocommerce div.product div.images img { display: block; margin: 0; }
/* ====== SELECT (variações) nativo porém estilizado ====== */
.gm-single__summary .variations .value select, .gm-single__summary select.browser-default { width: 320px; max-width: 100%; padding: 10px 40px 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .20); background: rgba(255, 255, 255, .10); color: #fff; font-weight: 600; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg fill=!string!xmlns=!string!viewBox=!string!%3E%3Cpath d=!string!/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.gm-single__summary .variations .value select:focus { outline: none; border-color: #c8f36a; box-shadow: 0 0 0 2px rgba(200, 243, 106, .25); }
/* link "Clear" mais discreto/alinhado */
.gm-single__summary a.reset_variations { visibility: visible !important; /* vence inline */ display: inline-block; margin-top: 6px; color: #8ddf5c; text-decoration: none; font-weight: 600; }
/* ====== QUANTITY: campo maior + botões ====== */
.quantity { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.quantity .qty { width: 68px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .20); background: rgba(255, 255, 255, .10); color: #fff; text-align: center; font-weight: 700; }
/* esconde setas nativas */
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity .qty[type=number] { -moz-appearance: textfield; }
/* botões +/- */
.qty-btn { width:44px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .20); background: rgba(255, 255, 255, .10); color: #fff; font-weight: 700; display: flex; /* centraliza */ align-items: center; /* centraliza vertical */ justify-content: center; /* centraliza horizontal */ font-size: 18px; /* garante boa legibilidade */ line-height: 1; /* remove influência do line-height */ }
.qty-btn--minus { order: -1; }
/* - à esquerda */
/* ====== CTA: Add to cart no padrão e sem quebrar linha ====== */
.single_add_to_cart_button.button, .single_add_to_cart_button.button.alt { background: #c8f36a !important; color: #416547 !important; border: 1px solid rgba(200, 243, 106, .35) !important; border-radius: 999px !important; padding: 12px 20px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; }
.single_add_to_cart_button:hover { filter: brightness(.95); }
/* ====== ABAS (Description / Additional information) ====== */
.gm-tabs .woocommerce-tabs { margin-top: 26px; }
.gm-tabs .woocommerce-tabs .tabs { display: flex; gap: 12px; list-style: none; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.gm-tabs .woocommerce-tabs .tabs li { margin: 0; }
.gm-tabs .woocommerce-tabs .tabs li a { display: block; padding: 8px 12px; border-radius: 6px; color: #c8f36a; text-decoration: none; font-weight: 700; border-bottom: 2px solid transparent; }
.gm-tabs .woocommerce-tabs .tabs li.active a { color: #fff; border-color: #c8f36a; background: transparent; }
.gm-tabs .woocommerce-Tabs-panel { padding-top: 10px; }
/* ====== sem zoom/hover obrigatório ====== */
.woocommerce-product-gallery__trigger { display: none !important; }
.woocommerce-product-gallery .zoomImg { display: none !important; }
.woocommerce-product-gallery__image img { transform: none !important; transition: none !important; }
/* ---- SINGLE PRODUCT: layout e sobreposição ---- */
.gm-single__top { display: grid; grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); gap: 40px; align-items: start; }
/* NADA de float/largura fixa herdada do Woo */
.gm-single__gallery .woocommerce-product-gallery, .gm-single__summary.summary { float: none !important; width: auto !important; margin: 0; }
/* Galeria não pode “sangrar” para a 2ª coluna */
.gm-single__gallery { position: relative; z-index: 1; overflow: hidden; /* segura qualquer overflow da imagem */ }
.gm-single__summary { position: relative; z-index: 2; /* garante que o texto fica acima, se encostar */ }
/* Imagem sempre dentro do bloco */
.gm-single__gallery .woocommerce-product-gallery__image, .gm-single__gallery .woocommerce-product-gallery__wrapper { max-width: 100%; }
.gm-single__gallery img { display: block; width: 100%; height: auto; }
/* Mobile: empilha */
@media (max-width:900px) {
.gm-single__top { grid-template-columns: 1fr; }
.gm-single__gallery { max-width: 520px; margin: 0 auto; }
}
/* incicio página de testes */
#conteudo-pg-teste { width: 100%; height: auto; position: relative; float: left; }
#view-testing { width: 1200px; height: auto; position: relative; margin: auto; }
#chamada-testing { width: 100%; height: auto; position: relative; margin-top: 250px; float: left; font-size: 48px; color: #fff; font-weight: 700; }
#headline-testing { width: 80%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #fff; }
/* lista de testes */
#lista-testes { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding-bottom: 100px; }
.item-teste { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; margin-bottom: 40px; padding-bottom: 25px; border-bottom: 1px solid #30373F; }
.teste-icn { width: 30px; height: 30px; position: relative; float: left; background: url('img/icn-logo-thc.png'); background-size: 30px; animation: swing-icn 2s ease-in-out infinite; }
@keyframes swing-icn {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(-6deg); }
100% { transform: rotate(0deg); }
}
.nome-teste { width: 60%; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 4px; font-size: 18px; color: #fff; }
.cta-testes { width: auto; height: auto; position: relative; float: right; margin-left: 10px; padding: 6px 20px; font-size: 16px; color: #CFFF8D; border: 1px solid #CFFF8D; border-radius: 30px; cursor: pointer; }
.item-teste:hover .cta-testes { color: #347039; border: 1px solid #CFFF8D; background-color: #CFFF8D; }
.item-teste:hover .nome-teste { color: #CFFF8D; }
/* Página Join Us */
#formulario-join-us{width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding-bottom: 80px;}
#formulario-join-us input { width: 28%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; }
#formulario-join-us textarea { width: 98%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; font-family: inherit; box-sizing: border-box; resize: none; }
#faixa-cta-join-us {width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}
#div-stores{width:100%; height: auto; position: relative; float: left; margin-top: 40px; border-radius: 30px; overflow: hidden;}
.fix-stores{margin-bottom: 80px;}
.modal {background-color: #2d3138 !important;}
.modal .modal-footer {background-color: #1f232a;}
@media only screen
and (min-width:1000px)
and (max-width:1300px) {
#insta-menu { width: 30px; height: 30px; position: absolute; right: 40px; top: 24px; }
#infos-rodape { width: 100%; height: auto; position: relative; margin: auto; max-width: 95%; color: #fff; padding-bottom: 10px; padding-top: 50px; }
.desktop { display: block; }
.tablet { display: none; }
.mobile { display: none; }
#view-menu-fixo { width: 90%; height: 75px; position: relative; margin: auto; background: #1E202F; border-radius: 80px; -webkit-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -moz-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -o-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -ms-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); }
#s1-lp { width: 100%; height: 1090px; position: relative; float: left; background: #272C34; }
.item-menu-fixo { width: auto; height: auto; position: relative; float: left; margin-left: 20px; margin-right: -10px; margin-top: 20px; padding: 7px 15px; color: #fff; font-size: 17px; border-radius: 60px; cursor: pointer; }
.menu-fixo-e { width: 100%; height: auto; position: relative; float: left; margin-left: 158px; }
.menu-fixo-d { width: 432px; height: auto; position: relative; float: right; margin-right: -30px; }
#my-acount-menu { width: 30px; height: 30px; position: absolute; right: 100px; top: 24px; }
/* Top content start */
#view-conteudo-topo { width: 950px; height: 100%; position: relative; margin: auto; z-index: 10; }
#view-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 310px; font-size: 36px; color: #fff; text-align: center; padding: 0px 80px; }
#dp-1 { width: 250px; height: 250px; position: absolute; left: 120px; top: 150px; }
#dp-2 { width: 500px; height: 150px; position: absolute; left: 50%; margin-left: -345px; top: 300px; /* display: none; */ }
#ornamento-dp2 { width: 128px; height: 143px; position: absolute; bottom: 2px; left: 147px; background: url('img/ornamento-dp2.png'); background-size: 128px; }
#dp-3 { width: 340px; height: 150px; position: absolute; right: 330px; top: 90px; /* display: none; */ }
#bloco-txt-dp3 { width: 310px; height: 120px; position: absolute; top: 19px; right: -320px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; z-index: 20; }
#view-s2 { width: 950px; height: auto; position: relative; margin: auto; z-index: 10; }
#conteudo-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 65px; font-size: 20px; color: #fff; font-weight: 700; }
#conteudo-s2 p { width: 90%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 22px; color: #fff; font-weight: 300; }
#bloco-sobre-linha-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
.item-cta-linha-produto { width: auto; height: auto; position: relative; float: left; margin-right: -12px; color: #fff; font-weight: 500; font-size: 16px; border-radius: 60px; padding: 8px 30px; cursor: pointer; }
#sobre-produto-int { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #fff; margin-top: 25px; font-weight: 300; }
#tipografia-s2-int { width: 100%; height: 200px; position: relative; float: left; margin-top: 40px; font-size: 430px; color: #fff; text-transform: uppercase; text-align: center; font-weight: 600; }
#ornamto-e-s3 { width: 412px; height: 380px; position: absolute; left: -140px; top: -170px; background: url('img/folhas.png'); background-size: 412px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#ornamto-d-s3-out { width: 423px; height: 539px; position: absolute; right: 0px; top: -270px; overflow: hidden; }
#div-s3 { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; padding-bottom: 40px; }
#view-div-s3 { width: 95%; height: auto; position: relative; margin: auto; }
#view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; font-size: 250px; color: #fff; text-align: center; font-weight: 800; }
#subtitulo-s3 { width: 570px; height: auto; position: absolute; bottom: -120px; right: 50%; margin-right: -230px; font-size: 39px; color: #fff; font-weight: 400; }
.icn-categoria { width: 100px; height: 100px; left: 50%; position: relative; float: left; margin-left: -50px; border-radius: 25px; border: 2px solid transparent; background: linear-gradient(#30363D, #30363D) padding-box, /* fundo interno */
linear-gradient(135deg, #C5F94C 0%, #54D0E5 100%) border-box; background-clip: padding-box, border-box; cursor: pointer; }
.legenda-categoria-seletor { width: 100%; height: auto; position: relative; float: left; margin-top: 18px; padding: 0px 10px; font-size: 14px; color: #fff; text-align: center; }
/* Product card start */
.item-card-produto { width: 32%; height: 500px; position: relative; float: left; margin-left: 0%; margin-right: 1%; margin-bottom: 10px; background-color: #3D444C; border-radius: 20px; }
#ornamento-s4-e { width: 360px; height: 400px; position: absolute; margin-left: 0px; left: -140px; top: -280px; background: url('img/cogumelos-2.png'); background-size: 420px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; }
#ornamento-s4-d { width: 452px; height: 553px; position: absolute; right: 0px; top: -350px; overflow: hidden; }
#ornamento-s4-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -150px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-s4 { width: 100%; height: auto; position: relative; margin: auto; max-width: 1600px; overflow: hidden; }
#headline-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; font-size: 110px; color: #fff; font-weight: 800; text-align: center; z-index: 20; }
#molecula { width: 100%; height: auto; position: relative; float: left; margin-top: -190px; margin-left: 0%; }
#selo-qualidade { width: 180px; height: 180px; position: relative; margin: auto; background: url('img/selo.png'); background-size: 180px; }
#faixa-topicos-qualidade { width: 950px; height: auto; position: relative; margin: auto; }
#chamada-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; color: #fff; font-size: 50px; font-weight: 700; text-align: center; }
#faixa-bloco-itens-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
.item-qualidade h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 19px; color: #fff; font-weight: 600; }
.item-qualidade p { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #fff; font-weight: 300; }
#cogu-1 { width: 350px; height: 401px; position: absolute; right: -90px; top: -200px; background: url('img/cogu1.png'); background-size: 400px; }
#cogu-2 { width: 400px; height: 420px; position: absolute; left: -130px; bottom: -190px; background: url('img/cogu2.png'); background-size: 397px; }
#ornamto-e-s5 { width: 420px; height: 450px; position: absolute; left: -170px; top: -220px; background: url('img/folhas.png'); background-size: 440px; z-index: 10; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; background-repeat: no-repeat; }
#ornamto-d-s5-out { width: 410px; height: 460px; position: absolute; right: 0px; top: -280px; overflow: hidden; z-index: 10; }
#ornamto-d-s5 { width: 100%; height: 100%; position: absolute; top: 0px; right: -140px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#view-div-blog-home { width: 950px; height: auto; position: relative; margin: auto; }
#chamada-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; font-size: 58px; color: #fff; font-weight: 600; text-align: center; }
#sobre-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 20px; color: #fff; text-align: center; padding: 0px 210px; font-weight: 300; }
#view-posts-blog-home { width: 950px; height: auto; position: relative; margin: auto; }
.tag-img-post { width: auto; height: auto; position: absolute; bottom: 13px; left: 10px; padding: 8px 15px; background-color: #DEF8DE; color: #3F9182; border-radius: 20px; z-index: 90; font-size: 12px; }
.resumo-post-home { width: 100%; height: 250px; position: relative; float: left; margin-top: 4px; }
.resumo-post-home h5 { width: 100%; height: 50px; position: relative; float: left; line-height: 21px; font-size: 17px; color: #000; font-weight: 500; }
.resumo-post-home p { width: 100%; height: auto; position: relative; float: left; margin-top: -8px; color: #000; font-size: 14px; line-height: 20px; }
#view-div-s6 { width: 950px; height: auto; position: relative; margin: auto; }
#div-e-s6 { width: 50%; height: auto; position: relative; float: left; margin-top: 90px; }
#faq-chamada { width: 100%; height: auto; position: relative; float: left; font-size: 52px; font-weight: 800; line-height: 62px; color: #000; }
#sobre-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 21px; color: #000; font-weight: 400; }
#div-s7 { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; margin-top: 100px; overflow: hidden; padding-bottom: 70px; }
#view-div-s7 { width: 950px; height: auto; position: relative; margin: auto; }
#headline-s7 { width: 100%; height: auto; position: relative; float: left; margin-top: 160px; text-align: center; font-size: 70px; color: #fff; font-weight: 800; z-index: 9; }
#bg-here { width: 270px; height: 170px; position: absolute; right: 87px; top: 154px; background: url('img/bg-here.png'); background-size: 180px; background-repeat: no-repeat; }
#bg-here { width: 270px; height: 170px; position: absolute; right: 87px; top: 154px; background: url('img/bg-here.png'); background-size: 180px; background-repeat: no-repeat; }
#molecula-4 { width: 675px; height: 925px; position: absolute; margin-top: -180px; left: 50%; margin-left: -282.5px; background: url('img/molecula-2.png'); background-size: 545px; background-repeat: no-repeat; }
#txt-1-m { width: 330px; height: 100px; position: absolute; left: 40px; top: 30px; color: #fff; font-size: 17px; font-weight: 300; opacity: 0; }
#txt-2-m { width: 420px; height: 300px; position: absolute; right: 50px; top: 188px; color: #fff; font-size: 16px; font-weight: 300; opacity: 0; }
#txt-3-m { width: 350px; height: 140px; position: absolute; left: 80px; top: 487px; color: #fff; font-size: 16px; font-weight: 300; opacity: 0; }
#ornamento-m-s7 { width: 280px; height: 219px; position: absolute; left: 150px; top: 530px; background: url('img/ornamento-molecula-1a.png'); background-size: 280px; background-repeat: no-repeat; }
#ornamento-m-s7-a { width: 210px; height: 374px; position: absolute; right: 110px; top: 620px; background: url('img/ornamento-molecula-2a.png'); background-size: 210px; background-repeat: no-repeat; }
#ornamento-m-s7-b { width: 230px; height: 261px; position: absolute; left: -10px; top: 1030px; background: url('img/ornamento-molecula-3a.png'); background-size: 230px; background-repeat: no-repeat; }
#o-f1-s7 { width: 212px; height: 379px; position: absolute; margin-left: 0px; left: -52px; top: 490px; background: url('img/f1.png'); background-size: 302px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; background-size: 250px; }
#o-f2-s7 { width: 408px; height: 399px; position: absolute; right: -110px; top: 600px; background: url('img/f2-s7.png'); background-size: 408px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; background-repeat: no; }
#faixa-cta-div-s7-1 { width: 100%; height: auto; position: relative; float: left; margin-top: 640px; }
#conteudo-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 43px; }
#headline-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; text-align: center; font-size: 80px; color: #fff; font-weight: 800; z-index: 9; }
#bg-who { width: 284px; height: 178px; position: absolute; left: 224px; top: 13px; background: url('img/bg-who.png'); background-size: 214px; background-repeat: no-repeat; }
#molecula-s7-2 { width: 681px; height: 1335px; position: absolute; left: 50%; margin-left: -170px; top: 172px; background: url('img/molecula-45.png'); background-size: 540px; background-repeat: no-repeat; }
#txt-s7-2 { width: 300px; height: 600px; position: absolute; left: 0px; top: 230px; opacity: 0; }
#txt-s7-2 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
#txt-s7-2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 15px; color: #fff !important; font-weight: 300; }
#txt-s7-3 { width: 329px; height: 600px; position: absolute; left: 0px; top: 880px; opacity: 0; }
#txt-s7-3 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
#txt-s7-3 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 15px; color: #fff !important; font-weight: 300; }
#txt-s7-4 { width: 380px; height: 400px; position: absolute; right: 20px; top: 350px; opacity: 0; }
#txt-s7-4 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
#txt-s7-4 p { width: 100%; height: auto; position: relative; float: left; margin-top: 13px; margin-bottom: 5px; font-size: 15px; color: #fff !important; font-weight: 300; }
#faixa-cta-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 1140px; }
#view-div-s8 { width: 100%; height: auto; position: relative; margin: auto; }
#ornamento-s8-e { width: 350px; height: 329px; position: absolute; margin-left: 0px; left: -130px; top: -320px; background: url('img/cogumelos-2.png'); background-size: 350px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#ornamento-s8-d { width: 422px; height: 553px; position: absolute; right: 0px; top: -250px; overflow: hidden; }
#ornamento-s8-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -140px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-contato { width: 950px; height: auto; position: relative; margin: auto; }
#ornamento-bg-contato { width: 400px; height: 257px; position: absolute; left: 50%; margin-left: -300px; margin-top: 20px; background: url('img/bg-ornamento-contato.png'); background-size: 400px; background-repeat: no-repeat; }
#div-chamada-form-contato { width: 50%; height: auto; position: relative; float: left; margin-top: 300px; }
#div-chamada-form-contato h6 { width: 70%; height: auto; position: relative; float: left; font-size: 60px; color: #fff; font-weight: 700; z-index: 10; }
#bg-hear-you { width: 330px; height: 280px; position: absolute; left: -11px; top: 10px; background: url('img/bg-hear-you.png'); background-size: 315px; background-repeat: no-repeat; }
#div-sobre-contato { width: 100%; height: auto; position: relative; float: left; margin-top: 3px; }
#div-sobre-contato h5 { width: 100%; height: auto; position: relative; float: left; font-size: 27px; color: #fff; font-weight: 700; }
#div-sobre-contato p { width: 80%; height: auto; position: relative; float: left; margin-top: 5px; font-size: 20px; color: #fff; font-weight: 300; }
#arrow-form { width: 242px; height: 38px; position: absolute; right: -160px; top: 50%; margin-top: -250px; background: url('img/arrow-form.png'); background-size: 242px; display: none; }
#div-form-contato { width: 50%; height: auto; position: relative; float: right; }
#chamada-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 220px; font-size: 20px; color: #fff; }
#box-formulario { width: 88%; height: auto; position: relative; float: left; margin-top: 20px; }
.label textarea { width: 110% !important; height: auto; position: relative; float: left; background-color: #fff !important; padding: 20px 20px !important; border-radius: 15px !important; font-size: 17px !important; color: #3F9182; }
#ornamento-e-r { width: 370px; height: 476px; position: absolute; left: -220px; top: -170px; background: url('img/ornamento-e-r.png'); background-size: 370px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; }
#ornamento-o-d-r { width: 440px; height: 348px; position: absolute; right: 0px; top: 60px; overflow: hidden; }
#ornamento-d-r { width: 492px; height: 494px; position: absolute; right: -340px; background: url('img/ornamento-r-d.png'); background-size: 322px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; }
#view-rodape { width: 93%; height: auto; position: relative; margin: auto; }
#box-form-news-letter h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; color: #fff; text-align: center; font-size: 25px; font-weight: 600; }
#label-form-news input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 14px 20px !important; border-radius: 15px !important; font-size: 20px; color: #3F9182; box-sizing: border-box; }
#cta-enviar-news { width: 90px; height: 59px; position: relative; float: left; margin-top: 12px; margin-left: 10px; background-color: #EAFF8D; border-radius: 20px; cursor: pointer; }
.atv-sobre-l-produto { background-color: #fff; color: #272C34; }
#cart-menu { width: 30px; height: 30px; position: absolute; right: 160px; top: 22px; }
#ifram-int-shop { width: 90%; height: 1070px; position: relative; margin: auto; border-radius: 20px; overflow: hidden; }
#view-div-conta { width: 90%; height: auto; position: relative; margin: auto; }
#conteudo-topo-pg-carrinho { width: 90%; height: auto; position: relative; margin: auto; }
.div-conteudo-e-pg-carrinho { width: 100%; height: auto; position: relative; float: left; }
.div-conteudo-d-pg-carrinho { width: 100%; height: auto; position: relative; float: left; margin-top: -54px; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: left; width: 100%; padding-left: 0px; }
/* ínicio página de checkout */
#div-checkout { width: 100%; height: auto; position: relative; float: left; margin-top: 240px; padding-bottom: 140px; }
#view-div-checkout { width: 90%; height: auto; position: relative; margin: auto; }
#div-th-page { width: 100%; height: auto; position: relative; float: left; margin-top: 290px; background-color: #272C34; color: #fff !important; padding-bottom: 120px; }
#view-th-page { width: 90%; height: auto; position: relative; margin: auto; }
.woocommerce ul.products.columns-4 li.product { width: 31.33% !important; clear: none !important; }
.item-card-produto { width: 23% !important; height: 600px !important; position: relative !important; float: left !important; margin-left: 0% !important; margin-right: 2% !important; margin-bottom: 30px !important; background-color: #3D444C !important; border-radius: 20px !important; opacity: 1 !important; visibility: visible !important; transition: opacity 0.4s ease, visibility 0.4s ease !important; }
#interna-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 280px; background-color: #272C34; padding-bottom: 200px; }
#view-interna-produto { width: 80%; height: auto; position: relative; margin: auto; }
/* incicio página de testes */
#conteudo-pg-teste { width: 100%; height: auto; position: relative; float: left; }
#view-testing { width: 900px; height: auto; position: relative; margin: auto; }
#chamada-testing { width: 100%; height: auto; position: relative; margin-top: 250px; float: left; font-size: 48px; color: #fff; font-weight: 700; }
#headline-testing { width: 80%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #fff; }
/* lista de testes */
#lista-testes { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding-bottom: 100px; }
.item-teste { width: 100%; height: auto; position: relative; float: left; border-bottom: 1px solid #30373F; }
.teste-icn { width: 30px; height: 30px; position: relative; float: left; background: url('img/icn-logo-thc.png'); background-size: 30px; animation: swing-icn 2s ease-in-out infinite; }
@keyframes swing-icn {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(-6deg); }
100% { transform: rotate(0deg); }
}
.nome-teste { width: 50%; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 4px; font-size: 18px; color: #fff; }
.cta-testes { width: auto; height: auto; position: relative; float: right; margin-left: 10px; padding: 6px 20px; font-size: 16px; color: #CFFF8D; border: 1px solid #CFFF8D; border-radius: 30px; cursor: pointer; }
.item-teste:hover .cta-testes { color: #347039; border: 1px solid #CFFF8D; background-color: #CFFF8D; }
.item-teste:hover .nome-teste { color: #CFFF8D; }
#headline-testing { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #fff; }
#formulario-join-us input { width: 26%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; }
#formulario-join-us textarea { width: 95%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; font-family: inherit; box-sizing: border-box; resize: none; }
.variations_form.cart { display: flex; flex-direction: column; }
.variations_form.cart table.variations { order: 1; }
.variations_form.cart .reset_variations_alert { order: 3; }
.variations_form.cart .single_variation_wrap { order: 2; }
.gm-single__summary h1.product_title.entry-title, .gm-single__summary .woocommerce-product-details__short-description h1 { font-size: 20px !important; line-height: 1.3; }
}
@media only screen
and (min-width:750px)
and (max-width:1000px) {
/* Menu mobile */
#mask-menu-mobile{display: block; width:0%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: #000; opacity: 0; z-index: 9999;}
#menu-mobile-list-out{display: block; width: 0%; height: 100%; position: fixed; z-index: 999999; overflow: hidden; top: 0px;}
#menu-mobile-list { width: 540px; height: 100%; position: absolute; right: -150%; border-radius: 30px 0px 0px 30px; background-color: #292c37; z-index: 99999; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); }
#top-menu-mobile{width: 100%; height: auto; position: relative; float: left; margin-top: 10px;}
#logo-menu-mobile{width: 140px; height: auto; position: relative; float: left; margin-left: 20px; margin-top: 20px; }
#close-menu-mobile-topo { width: 50px; height: 50px; position: absolute; right: 20px; top: 56px; border-radius: 50%; background-color: #cfff8d; cursor: pointer; }
#close-icon-menu-mobile { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; background: url(img/close.png); background-size: 30px; }
#close-menu-mobile-topo:hover{background-color: #ACE959;}
#menu-mobile-list-links{width: 100%; height: auto; position: relative; float: left; margin-top: 5px; padding: 0px 20px;}
#menu-mobile-list-links h4 { width: 100%; height: auto; position: relative; float: left; margin-left: 19px; font-size: 29px; font-weight: 400; color: #ffffff; }
.item-menu-mobile { width: 100%; height: auto; position: relative; float: left; margin-bottom: 10px; padding: 10px 20px; background-color: #1e202f; color: #ffffff; font-size: 18px; border-radius: 30px; cursor: pointer; }
.item-menu-mobile:hover { background-color: #CFFF8D; color: #367639; }
.icon-menu-mobile { width: 25px; height: 25px; position: absolute; right: 10px; top: 10px; background-color: #292c37; border-radius: 50%; }
.arrow-menu-mobile{width: 15px; height: 15px; position: absolute; left: 50%; top: 50%; margin-left: -7.5px; margin-top: -7.5px; background: url(img/icn-logo-thc.png); background-size: 15px;}
.item-menu-mobile:hover .icon-menu-mobile{background-color: #ACE959;}
.m-mobile-atv{background-color: #db0404; color: #fff;}
.icon-menu-mobile-atv{background-color: #b90000;}
.menu-mobile-faq { width: 100%; height: auto; position: relative; float: left; border-radius: 10px; padding: 15px 20px; background-color: #def5ff; color: #7a858f; font-size: 18px; font-weight: 500; }
.menu-mobile-faq:hover{background-color: #5cceff; color: #fff;}
.icon-menu-mobile-faq { width: 40px; height: 40px; position: absolute; right: 10px; top: 8px; background-color: #8dddff; border-radius: 50%; }
.icon-faq-menu-mobile {width:20px; height:20px; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; background: url(img/comment.png); background-size: 20px;}
#sm-menu-mobile{width: 100%; height: auto; position: absolute; bottom: 20px; padding: 0px 20px;}
#chmada-sm-menu-mobile { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #ffffff; }
.icon-sm-mobile{width: 30px; height: 30px; position: relative; float: left; margin-right: 10px; cursor: pointer;}
#infos-rodape { width: 100%; height: auto; position: relative; margin: auto; max-width: 90%; color: #fff; padding-bottom: 40px; padding-top: 50px; }
.desktop { display: none; }
.tablet { display: block; }
.mobile { display: none; }
#view-menu-fixo { width: 720px; height: 67px; position: relative; margin: auto; background: #1E202F; border-radius: 80px; -webkit-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -moz-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -o-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -ms-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); }
#bg-logo { width: 150px; height: 207px; position: absolute; top: -59px; left: -14px; margin-left: 0px; background-image: url(img/pg-logo-menu.png); background-size: 160px; background-repeat: no-repeat; }
#logo-menu-topo { width: 110px; height: 78px; position: absolute; left: 50%; top: 50%; margin-left: -54px; margin-top: -48px; background: url('img/logo-menu-topo.png'); background-size: 120px; background-repeat: no-repeat; }
/* Landing Page Top Section */
#s1-lp { width: 100%; height: 1070px; position: relative; float: left; background: #272C34; }
#ornamento-topo { width: 100%; height: 316px; position: absolute; top: -70px; background: url('img/ornamento-topo.png'); background-repeat: repeat-x; }
.item-menu-fixo { width: auto; height: auto; position: relative; float: left; margin-left: 11px; margin-right: -1px; margin-top: 14px; padding: 7px 16px; color: #fff; font-size: 16px; border-radius: 60px; cursor: pointer; }
.menu-fixo-e { width: 296px; height: auto; position: relative; float: left; }
.menu-fixo-d { width: 316px; height: auto; position: relative; float: right; margin-right: -29px; }
.menu-fixo-e { width: 100%; height: auto; position: relative; float: left; margin-left: 150px; margin-top: 4px; }
.menu-fixo-d { width: 316px; height: auto; position: relative; float: right; margin-right: 11px; margin-top: -57px; }
#my-acount-menu { width: 30px; height: 30px; position: absolute; right: 132px; top: 18px; }
#cart-menu { width: 30px; height: 30px; position: absolute; right: 80px; top: 16px; }
#insta-menu { width: 30px; height: 30px; position: absolute; right: 28px; top: 18px; }
#m-8 { display: none; }
.remove-store-menu{display: none;}
#icn-menu-sd{width: 30px; height: 30px; position: absolute; right: 28px; top: 18px; display: block; cursor: pointer;}
/* Top content start */
#view-conteudo-topo { width: 720px; height: 100%; position: relative; margin: auto; }
#view-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 251px; font-size: 31px; color: #fff; text-align: center; padding: 0px 50px; }
#container-ctas-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
#ornamento-cta-topo { width: 144px; height: 96px; position: absolute; left: -132px; top: -60px; background: url('img/ornamento-cta.png'); background-size: 144px; }
#dp-1 { width: 250px; height: 250px; position: absolute; left: 30px; top: 160px; }
#bloco-txt-dp1 { width: 350px; height: 100px; position: absolute; left: 10px; top: -120px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; z-index: 10; }
#dp-2 { width: 500px; height: 150px; position: absolute; left: 50%; margin-left: -195px; top: 334px; /* display: none; */ }
#dp-3 { width: 400px; height: 150px; position: absolute; right: 260px; top: 160px; /* display: none; */ }
.l-dp1 { left: 50%; margin-left: -128px; bottom: -10px; z-index: 1; }
#view-s2 { width: 90%; height: auto; position: relative; margin: auto; }
#conteudo-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 40px; color: #fff; font-weight: 700; }
#conteudo-s2 p { width: 75%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #fff; font-weight: 300; }
.item-cta-linha-produto { width: auto; height: auto; position: relative; float: left; margin-right: 10px; color: #fff; font-weight: 500; font-size: 18px; border-radius: 60px; padding: 8px 30px; cursor: pointer; }
#sobre-produto-int { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #fff; margin-top: 25px; font-weight: 300; }
#tipografia-s2-int { width: 100%; height: 200px; position: relative; float: left; margin-top: 180px; font-size: 400px; color: #fff; text-transform: uppercase; text-align: center; font-weight: 600; }
#ornamto-e-s3 { width: 400px; height: 383px; position: absolute; left: -150px; top: -160px; background: url('img/folhas.png'); background-size: 552px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; background-size: 400px; }
#ornamto-d-s3-out { width: 473px; height: 539px; position: absolute; right: 0px; top: -360px; overflow: hidden; }
#div-s3 { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; padding-bottom: 40px; }
#faixa-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 18px; }
#view-div-s3 { width: 98%; height: auto; position: relative; margin: auto; }
#view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 178px; color: #fff; text-align: center; font-weight: 800; }
#subtitulo-s3 { width: 570px; height: auto; position: absolute; bottom: -92px; right: 127px; font-size: 28px; color: #fff; font-weight: 400; }
.icn-categoria { width: 100px; height: 100px; left: 50%; position: relative; float: left; margin-left: -50px; border-radius: 25px; border: 2px solid transparent; background: linear-gradient(#30363D, #30363D) padding-box, /* fundo interno */
linear-gradient(135deg, #C5F94C 0%, #54D0E5 100%) border-box; background-clip: padding-box, border-box; cursor: pointer; }
.legenda-categoria-seletor { width: 100%; height: auto; position: relative; float: left; margin-top: 18px; padding: 0px 10px; font-size: 14px; color: #fff; text-align: center; }
/* Product card start */
.item-card-produto { width: 47%; height: 590px; position: relative; float: left; margin-left: 2%; margin-right: 1%; margin-bottom: 21px; background-color: #3D444C; border-radius: 20px; }
#ornamento-s4-e { width: 300px; height: 350px; position: absolute; margin-left: 0px; left: -140px; top: -150px; background: url('img/cogumelos-2.png'); background-size: 420px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; background-size: 300px; }
#ornamento-s4-d { width: 380px; height: 553px; position: absolute; right: 0px; top: -170px; overflow: hidden; }
#ornamento-s4-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -150px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-s4 { width: 100%; height: auto; position: relative; margin: auto; max-width: 1600px; overflow: hidden; }
#headline-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; font-size: 76px; color: #fff; font-weight: 800; text-align: center; z-index: 20; }
#molecula { width: 118%; height: auto; position: relative; float: left; margin-top: -190px; margin-left: -2%; }
#selo-qualidade { width: 150px; height: 150px; position: relative; margin: auto; background: url('img/selo.png'); background-size: 150px; }
#faixa-topicos-qualidade { width: 720px; height: auto; position: relative; margin: auto; }
#chamada-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; color: #fff; font-size: 43px; font-weight: 700; text-align: center; }
#faixa-bloco-itens-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
.item-qualidade h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 19px; color: #fff; font-weight: 600; }
.item-qualidade p { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #fff; font-weight: 300; }
#cogu-1 { width: 350px; height: 401px; position: absolute; right: -90px; top: -200px; background: url('img/cogu1.png'); background-size: 400px; }
#cogu-2 { width: 400px; height: 420px; position: absolute; left: -130px; bottom: -190px; background: url('img/cogu2.png'); background-size: 397px; }
#topo-div-s5 { width: 100%; height: 530px; position: relative; float: left; background-color: #3D3D45; overflow: hidden; }
.linha-rascunho { width: 297px; height: 66px; position: absolute; right: 150px; bottom: -50px; background: url('img/rascunho.png'); background-size: 297px; background-repeat: no-repeat; }
#ornamto-e-s5 { width: 340px; height: 350px; position: absolute; left: -90px; top: -190px; background: url('img/folhas.png'); background-size: 340px; z-index: 10; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; background-repeat: no-repeat; }
#ornamto-d-s5-out { width: 410px; height: 460px; position: absolute; right: 0px; top: -280px; overflow: hidden; z-index: 10; }
#ornamto-d-s5 { width: 100%; height: 100%; position: absolute; top: 0px; right: -140px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#view-div-blog-home { width: 720px; height: auto; position: relative; margin: auto; }
#chamada-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; font-size: 55px; color: #fff; font-weight: 600; text-align: center; }
#sobre-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 19px; color: #fff; text-align: center; padding: 0px 100px; font-weight: 300; }
#view-posts-blog-home { width: 750px; height: auto; position: relative; margin: auto; }
.tag-img-post { width: auto; height: auto; position: absolute; bottom: 13px; left: 10px; padding: 8px 15px; background-color: #DEF8DE; color: #3F9182; border-radius: 20px; z-index: 90; font-size: 12px; }
.resumo-post-home p { width: 100%; height: auto; position: relative; float: left; margin-top: 21px; color: #000; font-size: 14px; line-height: 20px; }
#view-div-s6 { width: 750px; height: auto; position: relative; margin: auto; }
#div-e-s6 { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; padding: 0px 20px; }
#box-form-news-letter { width: 700px; height: 160px; position: relative; margin: auto; margin-top: -40px; background-color: #30363D; border-radius: 30px; padding: 0px 50px; }
#label-form-news { width: 83%; height: auto; position: relative; float: left; margin-top: 12px; }
#view-div-s6 { width: 950px; height: auto; position: relative; margin: auto; }
#div-e-s6 { width: 50%; height: auto; position: relative; float: left; margin-top: 90px; }
#view-div-s6 { width: 750px; height: auto; position: relative; margin: auto; }
#div-e-s6 { width: 50%; height: auto; position: relative; float: left; margin-top: 96px; }
#faq-chamada { width: 100%; height: auto; position: relative; float: left; font-size: 34px; font-weight: 800; line-height: 44px; color: #000; }
#sobre-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 21px; color: #000; font-weight: 400; }
#div-s7 { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; margin-top: 50px; overflow: hidden; padding-bottom: 70px; }
#view-div-s7 { width: 720px; height: auto; position: relative; margin: auto; }
#headline-s7 { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; text-align: center; font-size: 50px; color: #fff; font-weight: 800; z-index: 9; }
#bg-here { width: 270px; height: 170px; position: absolute; right: 87px; top: 154px; background: url('img/bg-here.png'); background-size: 180px; background-repeat: no-repeat; }
#bg-here { width: 140px; height: 170px; position: absolute; right: 141px; top: 93px; background: url('img/bg-here.png'); background-size: 140px; background-repeat: no-repeat; }
#molecula-4 { width: 405px; height: 925px; position: absolute; margin-top: -110px; left: 50%; margin-left: -202.5px; background: url('img/molecula-2.png'); background-size: 405px; background-repeat: no-repeat; }
#txt-1-m { width: 250px; height: 100px; position: absolute; left: 20px; top: 44px; color: #fff; font-size: 14px; font-weight: 300; opacity: 0; }
#txt-2-m { width: 270px; height: 300px; position: absolute; right: 50px; top: 128px; color: #fff; font-size: 14px; font-weight: 300; opacity: 0; }
#txt-3-m { width: 350px; height: 140px; position: absolute; left: 180px; top: 467px; color: #fff; font-size: 14px; font-weight: 300; opacity: 0; }
#ornamento-m-s7 { width: 210px; height: 219px; position: absolute; left: 150px; top: 460px; background: url('img/ornamento-molecula-1a.png'); background-size: 210px; background-repeat: no-repeat; }
#ornamento-m-s7-a { width: 210px; height: 374px; position: absolute; right: 155px; top: 500px; background: url('img/ornamento-molecula-2a.png'); background-size: 150px; background-repeat: no-repeat; }
#ornamento-m-s7-b { width: 230px; height: 261px; position: absolute; left: -10px; top: 1030px; background: url('img/ornamento-molecula-3a.png'); background-size: 230px; background-repeat: no-repeat; }
#o-f1-s7 { width: 172px; height: 379px; position: absolute; margin-left: 0px; left: -2px; top: 490px; background: url('img/f1.png'); background-size: 302px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; background-size: 190px; /* background: no-repeat; */ background-size: no-; }
#o-f2-s7 { width: 300px; height: 299px; position: absolute; right: -70px; top: 600px; background: url('img/f2-s7.png'); background-size: 300px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; background-repeat: no no-repeat; }
#faixa-cta-div-s7-1 { width: 100%; height: auto; position: relative; float: left; margin-top: 640px; }
#conteudo-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 43px; }
#headline-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; text-align: center; font-size: 60px; color: #fff; font-weight: 800; z-index: 9; }
#bg-who { width: 174px; height: 178px; position: absolute; left: 164px; top: 13px; background: url('img/bg-who.png'); background-size: 174px; background-repeat: no-repeat; }
#molecula-s7-2 { width: 681px; height: 1335px; position: absolute; left: 50%; margin-left: -150px; top: 172px; background: url('img/molecula-45.png'); background-size: 420px; background-repeat: no-repeat; }
#txt-s7-2 { width: 200px; height: 600px; position: absolute; left: 0px; top: 150px; opacity: 0; }
#txt-s7-2 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; font-weight: 600; }
#txt-s7-2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 13px; color: #fff !important; font-weight: 300; }
#txt-s7-3 { width: 329px; height: 600px; position: absolute; left: 0px; top: 820px; opacity: 0; }
#txt-s7-3 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; font-weight: 600; }
#txt-s7-3 p { width: 64%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 13px; color: #fff !important; font-weight: 300; }
#txt-s7-4 { width: 300px; height: 400px; position: absolute; right: 10px; top: 270px; opacity: 0; }
#txt-s7-4 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; font-weight: 600; }
#txt-s7-4 p { width: 100%; height: auto; position: relative; float: left; margin-top: 13px; margin-bottom: 5px; font-size: 13px; color: #fff !important; font-weight: 300; }
#faixa-cta-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 960px; }
#view-div-s8 { width: 100%; height: auto; position: relative; margin: auto; }
#ornamento-s8-e { width: 350px; height: 329px; position: absolute; margin-left: 0px; left: -130px; top: -170px; background: url('img/cogumelos-2.png'); background-size: 350px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#ornamento-s8-d { width: 422px; height: 553px; position: absolute; right: 0px; top: -440px; overflow: hidden; }
#ornamento-s8-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -140px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-contato { width: 660px; height: auto; position: relative; margin: auto; }
#ornamento-bg-contato { width: 400px; height: 257px; position: absolute; left: 50%; margin-left: -300px; margin-top: 20px; background: url('img/bg-ornamento-contato.png'); background-size: 400px; background-repeat: no-repeat; }
#div-chamada-form-contato { width: 50%; height: auto; position: relative; float: left; margin-top: 150px; }
#div-chamada-form-contato h6 { width: 70%; height: auto; position: relative; float: left; font-size: 40px; color: #fff; font-weight: 700; z-index: 10; }
#bg-hear-you { width: 230px; height: 140px; position: absolute; left: -11px; top: 3px; background: url('img/bg-hear-you.png'); background-size: 225px; background-repeat: no-repeat; }
#div-sobre-contato { width: 100%; height: auto; position: relative; float: left; margin-top: 3px; }
#div-sobre-contato h5 { width: 100%; height: auto; position: relative; float: left; font-size: 27px; color: #fff; font-weight: 700; }
#div-sobre-contato p { width: 80%; height: auto; position: relative; float: left; margin-top: 5px; font-size: 20px; color: #fff; font-weight: 300; }
#arrow-form { width: 242px; height: 38px; position: absolute; right: -160px; top: 50%; margin-top: -250px; background: url('img/arrow-form.png'); background-size: 242px; display: none; }
#div-form-contato { width: 50%; height: auto; position: relative; float: right; }
#chamada-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 20px; color: #fff; }
#box-formulario { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; }
.label textarea { width: 114% !important; height: auto; position: relative; float: left; background-color: #fff !important; padding: 20px 20px !important; border-radius: 15px !important; font-size: 17px !important; color: #3F9182; }
#ornamento-e-r { width: 370px; height: 476px; position: absolute; left: -220px; top: -210px; background: url('img/ornamento-e-r.png'); background-size: 370px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; }
#ornamento-o-d-r { width: 440px; height: 348px; position: absolute; right: 0px; top: 60px; overflow: hidden; }
#ornamento-d-r { width: 492px; height: 494px; position: absolute; right: -340px; background: url('img/ornamento-r-d.png'); background-size: 322px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; }
#view-rodape { width: 90%; height: auto; position: relative; margin: auto; }
#box-form-news-letter h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; color: #fff; text-align: center; font-size: 25px; font-weight: 600; }
#label-form-news input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 14px 20px !important; border-radius: 15px !important; font-size: 20px; color: #3F9182; box-sizing: border-box; }
#cta-enviar-news { width: 90px; height: 59px; position: relative; float: left; margin-top: 12px; margin-left: 10px; background-color: #EAFF8D; border-radius: 20px; cursor: pointer; }
.atv-sobre-l-produto { background-color: #fff; color: #272C34; }
#ifram-int-shop { width: 90%; height: 970px; position: relative; margin: auto; border-radius: 20px; overflow: hidden; }
#div-conta { width: 100%; height: auto; position: relative; float: left; margin-top: 200px; padding-bottom: 100px; z-index: 99; background-color: #272C34; }
#view-div-conta { width: 90%; height: auto; position: relative; margin: auto; }
#view-div-conta { width: 90%; height: auto; position: relative; margin: auto; }
#conteudo-topo-pg-carrinho { width: 90%; height: auto; position: relative; margin: auto; }
.div-conteudo-e-pg-carrinho { width: 100%; height: auto; position: relative; float: left; }
.div-conteudo-d-pg-carrinho { width: 100%; height: auto; position: relative; float: left; margin-top: -54px; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: left; width: 100%; padding-left: 0px; }
/* ínicio página de checkout */
#div-checkout { width: 100%; height: auto; position: relative; float: left; margin-top: 240px; padding-bottom: 220px; }
#view-div-checkout { width: 90%; height: auto; position: relative; margin: auto; }
/* Checkout main container sempre responsivo */
.gm-checkout-main { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding: 0 15px; /* opcional: cria respiro lateral */ }
/* Ajusta grid do checkout */
.gm-checkout-grid { display: flex; flex-wrap: wrap; width: 100% !important; max-width: 100% !important; }
/* Coluna dos campos */
.gm-checkout-main #customer_details, .gm-checkout-main .col-1, .gm-checkout-main .col-2 { width: 100% !important; max-width: 100% !important; float: none !important; }
#div-th-page { width: 100%; height: auto; position: relative; float: left; margin-top: 290px; background-color: #272C34; color: #fff !important; padding-bottom: 120px; }
#view-th-page { width: 90%; height: auto; position: relative; margin: auto; }
.woocommerce ul.products.columns-4 li.product { width: 31.33% !important; clear: none !important; }
.item-card-produto { width: 23% !important; height: 550px !important; position: relative !important; float: left !important; margin-left: 0% !important; margin-right: 2% !important; margin-bottom: 30px !important; background-color: #3D444C !important; border-radius: 20px !important; opacity: 1 !important; visibility: visible !important; transition: opacity 0.4s ease, visibility 0.4s ease !important; }
#interna-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 280px; background-color: #272C34; padding-bottom: 200px; }
#view-interna-produto { width: 80%; height: auto; position: relative; margin: auto; }
/* incicio página de testes */
#conteudo-pg-teste { width: 100%; height: auto; position: relative; float: left; }
#view-testing { width: 90%; height: auto; position: relative; margin: auto; }
#chamada-testing { width: 100%; height: auto; position: relative; margin-top: 250px; float: left; font-size: 38px; color: #fff; font-weight: 700; }
#headline-testing { width: 80%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #fff; }
/* lista de testes */
#lista-testes { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding-bottom: 100px; }
.item-teste { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; margin-bottom: 40px; padding-bottom: 25px; border-bottom: 1px solid #30373F; }
.teste-icn { width: 30px; height: 30px; position: relative; float: left; background: url('img/icn-logo-thc.png'); background-size: 30px; animation: swing-icn 2s ease-in-out infinite; }
@keyframes swing-icn {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(-6deg); }
100% { transform: rotate(0deg); }
}
.nome-teste { width: 40%; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 4px; font-size: 18px; color: #fff; }
.cta-testes { width: auto; height: auto; position: relative; float: right; margin-left: 10px; padding: 6px 20px; font-size: 16px; color: #CFFF8D; border: 1px solid #CFFF8D; border-radius: 30px; cursor: pointer; }
.item-teste:hover .cta-testes { color: #347039; border: 1px solid #CFFF8D; background-color: #CFFF8D; }
.item-teste:hover .nome-teste { color: #CFFF8D; }
#headline-testing { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #fff; }
#formulario-join-us input { width: 100%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; box-sizing: border-box;}
#formulario-join-us textarea { width: 100%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; font-family: inherit; box-sizing: border-box; resize: none; }
.variations_form.cart { display: flex; flex-direction: column; }
.variations_form.cart table.variations { order: 1; }
.variations_form.cart .reset_variations_alert { order: 3; }
.variations_form.cart .single_variation_wrap { order: 2; }
.gm-single__summary h1.product_title.entry-title, .gm-single__summary .woocommerce-product-details__short-description h1 { font-size: 20px !important; line-height: 1.3; }
}
@media only screen
and (min-width:400px)
and (max-width:750px) {
/* Menu mobile */
#icn-menu-sd { width: 30px; height: 30px; position: absolute; right: 28px; top: 22px; display: block; cursor: pointer; }
#mask-menu-mobile{display: block; width:0%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: #000; opacity: 0; z-index: 9999;}
#menu-mobile-list-out{display: block; width: 0%; height: 100%; position: fixed; z-index: 999999; overflow: hidden; top: 0px;}
#menu-mobile-list { width: 100%; height: 100%; position: absolute; right: -150%; border-radius: 0px 0px 0px 0px; background-color: #292c37; z-index: 99999; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); }
#top-menu-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
#logo-menu-mobile { width: 140px; height: auto; position: relative; float: left; margin-left: 40px; margin-top: 20px; }
#close-menu-mobile-topo { width: 50px; height: 50px; position: absolute; right: 20px; top: 56px; border-radius: 50%; background-color: #cfff8d; cursor: pointer; }
#close-icon-menu-mobile { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; background: url(img/close.png); background-size: 30px; }
#close-menu-mobile-topo:hover{background-color: #ACE959;}
.hide-itens-menu{display: none;}
#menu-mobile-list-links{width: 100%; height: auto; position: relative; float: left; margin-top: 5px; padding: 0px 20px;}
#menu-mobile-list-links h4 { width: 100%; height: auto; position: relative; float: left; margin-left: 19px; font-size: 29px; font-weight: 400; color: #ffffff; }
.item-menu-mobile { width: 100%; height: auto; position: relative; float: left; margin-bottom: 10px; padding: 10px 20px; background-color: #1e202f; color: #ffffff; font-size: 18px; border-radius: 30px; cursor: pointer; }
.item-menu-mobile:hover { background-color: #CFFF8D; color: #367639; }
.icon-menu-mobile { width: 25px; height: 25px; position: absolute; right: 10px; top: 10px; background-color: #292c37; border-radius: 50%; }
.arrow-menu-mobile{width: 15px; height: 15px; position: absolute; left: 50%; top: 50%; margin-left: -7.5px; margin-top: -7.5px; background: url(img/icn-logo-thc.png); background-size: 15px;}
.item-menu-mobile:hover .icon-menu-mobile{background-color: #ACE959;}
.m-mobile-atv{background-color: #db0404; color: #fff;}
.icon-menu-mobile-atv{background-color: #b90000;}
.menu-mobile-faq { width: 100%; height: auto; position: relative; float: left; border-radius: 10px; padding: 15px 20px; background-color: #def5ff; color: #7a858f; font-size: 18px; font-weight: 500; }
.menu-mobile-faq:hover{background-color: #5cceff; color: #fff;}
.icon-menu-mobile-faq { width: 40px; height: 40px; position: absolute; right: 10px; top: 8px; background-color: #8dddff; border-radius: 50%; }
.icon-faq-menu-mobile {width:20px; height:20px; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; background: url(img/comment.png); background-size: 20px;}
#sm-menu-mobile{width: 100%; height: auto; position: absolute; bottom: 20px; padding: 0px 20px;}
#chmada-sm-menu-mobile { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #ffffff; }
.icon-sm-mobile{width: 30px; height: 30px; position: relative; float: left; margin-right: 10px; cursor: pointer;}
.cta-comprar-agora { width: 185px; height: auto; left: 0%; position: relative; margin: unset; margin-left: 0px; font-size: 18px; font-weight: 500; margin-left: 0px; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
#insta-menu { width: 30px; height: 30px; position: absolute; right: 70px; top: 24px; display: none; }
#infos-rodape { width: 100%; height: auto; position: relative; margin: auto; max-width: 90%; color: #fff; padding-bottom: 10px; padding-top: 50px; }
.desktop { display: none; }
.tablet { display: none; }
.mobile { display: block; }
.mobile-hide { display: none !important; }
#m-6 { display: none; }
#cart-menu {
width: 30px;
height: 30px;
position: absolute;
right: 75px;
top: 21px;
}
#my-acount-menu {
width: 30px;
height: 30px;
position: absolute;
right: 120px;
top: 22px;
}
#mascara-contato-enviado { width: 100%; height: 100%; position: fixed; z-index: 9999; background-color: #000; opacity: 0.9; }
#container-mensagem-contato-enviado { width: 350px; height: 250px; position: fixed; left: 50%; top: 50%; margin-left: -175px; margin-top: -150px; background-color: #272C34; border-radius: 30px; z-index: 99999; }
#chamada-contato-enviado { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; color: #fff; font-size: 20px; text-align: center; padding: 0px 10px; }
#sobre-contato-enviado { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 15px; color: #fff; text-align: center; padding: 0px 20px; }
/* Fixed Menu */
#faixa-menu-fixo { width: 100%; height: auto; position: fixed; top: 60px; z-index: 999; }
#view-menu-fixo { max-width: 400px; width: 95%; height: 75px; position: relative; margin: auto; background: #1E202F; border-radius: 80px; -webkit-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -moz-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -o-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -ms-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); }
#bg-logo { width: 122px; height: 128px; position: absolute; top: -30px; left: -10px; margin-left: 0px; background-image: url(img/pg-logo-menu.png); background-size: 122px; }
#logo-menu-topo { width: 85px; height: 85px; position: absolute; left: 50%; top: 50%; margin-left: -44px; margin-top: -25px; background: url('img/logo-menu-topo.png'); background-size: 85px; background-repeat: no-repeat; }
#ornamento-topo { width: 100%; height: 316px; position: absolute; top: -90px; background: url('img/ornamento-topo.png'); background-repeat: repeat-x; }
.item-menu-fixo { width: auto; height: auto; position: relative; float: left; margin-left: 16px; margin-right: -14px; margin-top: 20px; padding: 7px 15px; color: #fff; font-size: 17px; border-radius: 60px; cursor: pointer; }
.menu-fixo-e { width: auto; height: auto; position: relative; float: left; margin-left: 99px; }
.menu-fixo-d { width: auto; height: auto; position: relative; float: right; margin-right: 19px; }
/* Landing Page Top Section */
#s1-lp { width: 100%; height: 1000px; position: relative; float: left; background: #272C34; }
#container-ctas-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; }
#faixa-depoimentos-topo { width: 100%; height: auto; position: relative; float: left; display: block; margin-top: 29px; }
#dp-1 { width: 250px; height: 250px; position: absolute; left: 129px; top: 130px; }
#ft-dp1 { width: 147px; height: 147px; position: absolute; left: -15px; top: 0px; background: url('img/foto-dp1.png'); background-size: 147px; }
#bloco-txt-dp1 { width: 350px; height: 100px; position: absolute; left: -91px; top: -120px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; }
#dp-2 { width: 500px; height: 150px; position: absolute; left: 50%; margin-left: -345px; top: 250px; display: block; }
#bloco-txt-dp2 { width: 350px; height: 100px; position: absolute; top: 179px; left: -190px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; }
#ft-dp2 { width: 147px; height: 147px; position: absolute; right: -10px; top: -12px; background: url('img/foto-dp2.png'); background-size: 147px; }
#ornamento-dp2 { width: 128px; height: 143px; position: absolute; display: none; bottom: -1px; left: -130px; background: url('img/ornamento-dp2.png'); background-size: 128px; }
#dp-3 { width: 400px; height: 150px; position: absolute; right: 260px; top: 30px; display: block; }
#bloco-txt-dp3 { width: 240px; height: 150px; position: absolute; top: 19px; right: -250px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; z-index: 20; display: none; }
#ft-dp3 { width: 147px; height: 147px; position: absolute; right: -21px; top: 210px; background: url('img/foto-dp3.png'); background-size: 147px; }
#ornamento-dp3 { width: 278px; height: 151px; position: absolute; bottom: 120px; left: 320px; background: url('img/ornamento-dp3.png'); background-size: 278px; display: none; }
.l-dp1 { left: 50%; margin-left: -30px; bottom: -10px; z-index: 1; }
.l-dp2 { right: 70px; bottom: 70px; }
.item-palavra { width: 200px; height: auto; position: relative; float: left; font-size: 18px; color: #fff; font-weight: 400; text-align: center; padding: 11px 0px; }
#div-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #272C34; padding-bottom: 70px; }
#view-s2 { width: 95%; height: auto; position: relative; margin: auto; max-width: 400px; }
#conteudo-s2 { width: 100%; height: 100%; position: relative; float: left; padding: 20px; }
#conteudo-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 40px; color: #fff; line-height: 40px; font-weight: 700; }
#conteudo-s2 p { width: 75%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #fff; font-weight: 300; }
#sobre-produto-int { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #fff; margin-top: 25px; font-weight: 300; }
/* tipografia s2 */
#tipografia-s2 { width: 50%; height: 100%; position: relative; float: left; display: none; }
#ornamto-e-s3 { width: 250px; height: 250px; position: absolute; left: -100px; top: -180px; background: url('img/folhas.png'); background-size: 250px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#ornamto-d-s3-out { width: 343px; height: 539px; position: absolute; right: 0px; top: -270px; overflow: hidden; }
#view-div-s3 { width: 95%; height: auto; position: relative; margin: auto; max-width: 900px; }
#view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 88px; color: #fff; text-align: center; font-weight: 800; }
#subtitulo-s3 { width: 220px; height: 69px; position: absolute; bottom: -20px; right: 50%; margin-right: -90px; font-size: 14px; color: #fff; font-weight: 400; background-color: red; z-index: 90; }
#div-cat-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.icn-categoria { width: 94%; height: 90px; position: relative; float: left; margin-right: unset; border-radius: 20px; border: 2px solid transparent; background: linear-gradient(#30363D, #30363D) padding-box, /* fundo interno */
linear-gradient(135deg, #C5F94C 0%, #54D0E5 100%) border-box; background-clip: padding-box, border-box; cursor: pointer; }
.legenda-categoria-seletor { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 10px; font-size: 10px; color: #fff; }
/* Product cards section start */
#div-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding-bottom: 100px; padding: 0px 10px; }
/* Product card start */
.item-card-produto { width: 100%; height: auto; position: relative; float: left; margin-left: 0%; margin-right: 0%; margin-bottom: 14px; background-color: #3D444C; border-radius: 20px; padding-bottom: 110px; }
.titulo-descricao-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 32px; font-size: 22px; color: #fff; }
.descricao-produto-int { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; font-size: 16px; color: #fff; }
#ornamento-s4-e { width: 270px; height: 269px; position: absolute; margin-left: 0px; left: -130px; top: -200px; background: url('img/cogumelos-2.png'); background-size: 300px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#ornamento-s4-d { width: 400px; height: 400px; position: absolute; right: 0px; top: -200px; overflow: hidden; }
#ornamento-s4-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -170px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#headline-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; font-size: 40px; color: #fff; font-weight: 800; text-align: center; z-index: 20; line-height: 70px; }
#molecula-out { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; overflow: hidden; }
#molecula { width: 100%; height: auto; position: relative; float: left; margin-left: 0px; margin-top: 0px; }
/* Top content start */
#view-conteudo-topo { width: 95%; height: 100%; position: relative; margin: auto; max-width: 400px; }
#view-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 210px; font-size: 23px; color: #fff; text-align: center; padding: 0px 20px; }
#container-cta-topo-int { width: 95%; height: auto; position: relative; margin: auto; }
.item-cta-topo { width: 171px; height: auto; /* left: 50%; */ position: relative; float: left; /* margin: auto; */ margin-left: unset; font-size: 15px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 20px; border-radius: 80px; margin-left: 11px; }
.icn-cta-topo { width: 25px; height: 25px; position: absolute; right: 16px; top: 7px; background: url('img/icn-logo-thc.png'); background-size: 25px; }
.icn-cta-topo-2 { width: 25px; height: 25px; position: absolute; right: 11px; top: 5px; background: url('img/tubo-ensaio.png'); background-size: 25px; }
/* The Science section start */
#div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #282C34; padding-bottom: 50px; }
#faixa-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
#selo-qualidade { width: 150px; height: 150px; position: relative; margin: auto; background: url('img/selo.png'); background-size: 150px; }
#faixa-topicos-qualidade { width: 95%; height: auto; position: relative; margin: auto; }
#chamada-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #fff; font-size: 28px; font-weight: 700; text-align: center; }
.item-qualidade { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; margin-bottom: 30px; }
.item-qualidade h4 { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 23px; color: #fff; font-weight: 600; }
.item-qualidade p { width: 100%; height: auto; position: relative; float: left; margin-top: 6px; font-size: 16px; color: #fff; font-weight: 300; }
#faixa-cta-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
#topo-div-s5 { width: 100%; height: 470px; position: relative; float: left; background-color: #3D3D45; overflow: hidden; }
#cogu-1 { width: 457px; height: 451px; position: absolute; right: -290px; top: -180px; background: url('img/cogu1.png'); background-size: 267px; background-repeat: no-repeat; }
#cogu-2 { width: 267px; height: 451px; position: absolute; left: -90px; bottom: -300px; background: url('img/cogu2.png'); background-repeat: no-repeat; background-size: 267px; }
#ornamto-e-s5 { width: 300px; height: 273px; position: absolute; left: -160px; top: -170px; background: url('img/folhas.png'); background-size: 300px; z-index: 10; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#ornamto-d-s5-out { width: 300px; height: 279px; position: absolute; right: 0px; top: -300px; overflow: hidden; z-index: 10; }
#ornamto-d-s5 { width: 100%; height: 100%; position: absolute; top: 0px; right: -180px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#view-div-blog-home { width: 95%; height: auto; position: relative; margin: auto; }
#chamada-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; font-size: 42px; color: #fff; font-weight: 600; text-align: center; }
.linha-rascunho { width: 297px; height: 66px; position: absolute; right: -74px; bottom: -50px; background: url('img/rascunho.png'); background-size: 177px; background-repeat: no-repeat; }
#sobre-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 13px; font-size: 15px; color: #fff; text-align: center; padding: 0px 20px; font-weight: 300; }
#s-posts-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: -117px; z-index: 90; display: none; }
#view-posts-blog-home { width: 95%; height: auto; position: relative; margin: auto; }
/* item card post blog */
.card-post-home { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; cursor: pointer; margin-bottom: 20px; }
.resumo-post-home { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
.resumo-post-home p { width: 100%; height: auto; position: relative; float: left; margin-top: 5px; color: #000; font-size: 14px; }
/* FAQ section */
#div-s6 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
#view-div-s6 { width: 95%; height: auto; position: relative; margin: auto; padding: 0px 20px; max-width: 400px; }
#div-e-s6 { width: 100%; height: auto; position: relative; float: left; }
#faq-chamada { width: 100%; height: auto; position: relative; float: left; font-size: 34px; font-weight: 800; line-height: 39px; color: #000; }
#sobre-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #000; font-weight: 400; }
#div-d-s6 { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; margin-top: 30px; }
#div-s7 { width: 100%; height: 3090px; position: relative; float: left; background-color: #30363D; margin-top: 50px; overflow: hidden; }
#view-div-s7 { width: 95%; height: auto; position: relative; margin: auto; max-width: 400px; }
#headline-s7 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; text-align: center; font-size: 40px; color: #fff; font-weight: 800; z-index: 9; }
#bg-here { width: 190px; height: 100px; position: absolute; right: 14px; top: 20px; background: url('img/bg-here.png'); background-size: 200px; }
#molecula-4 { width: 675px; height: 925px; position: absolute; margin-top: -10px; left: unset; margin-left: unset; right: -360px; background: url('img/molecula-2.png'); background-size: 605px; background-repeat: no-repeat; }
#txt-1-m { width: 280px; height: 110px; position: absolute; left: 20px; top: 10px; color: #fff; font-size: 18px; font-weight: 300; opacity: 0; }
#txt-2-m { width: 270px; height: 300px; position: absolute; right: unset; margin-left: 20px; top: 153px; color: #fff; font-size: 16px; font-weight: 300; opacity: 0; }
#txt-3-m { width: 190px; height: 300px; position: absolute; left: 20px; top: 450px; color: #fff; font-size: 16px; font-weight: 300; opacity: 0; }
#ornamento-m-s7 { width: 335px; height: 259px; position: absolute; left: 50px; top: 450px; background: url('img/ornamento-molecula-1a.png'); display: none; background-size: 335px; }
#ornamento-m-s7-a { width: 278px; height: 374px; position: absolute; right: 50px; top: 550px; background: url('img/ornamento-molecula-2a.png'); background-size: 278px; display: none; }
#ornamento-m-s7-b { width: 343px; height: 261px; position: absolute; left: 50px; top: 950px; background: url('img/ornamento-molecula-3a.png'); background-size: 343px; display: none; }
#o-f1-s7 { width: 172px; height: 259px; position: absolute; margin-left: 0px; left: -60px; top: 790px; background: url('img/f1.png'); background-size: 172px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#o-f2-s7 { width: 300px; height: 539px; position: absolute; right: -10px; top: 850px; background: url('img/f2-s7.png'); background-size: 408px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; display: none; }
#faixa-cta-div-s7-1 { width: 100%; height: auto; position: relative; float: left; margin-top: 680px; }
#headline-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; text-align: center; font-size: 50px; color: #fff; font-weight: 800; z-index: 9; }
#bg-who { width: 129px; height: 78px; position: absolute; left: 42px; top: 28px; background: url('img/bg-who.png'); background-size: 130px; }
#molecula-s7-2 { width: 825px; height: 1335px; position: absolute; left: 50%; margin-left: -320px; top: 110px; background: url('img/molecula-34.png'); background-size: 575px; background-repeat: no-repeat; }
#txt-s7-2 { width: 240px; height: 600px; position: absolute; left: 129px; top: 135px; opacity: 0; /* display: none; */ }
#txt-s7-2 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #fff; font-weight: 600; }
#txt-s7-2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 11px; margin-bottom: 5px; font-size: 16px; color: #fff !important; font-weight: 300; }
#txt-s7-3 { width: 400px; height: 600px; position: absolute; left: 0px; top: 1150px; opacity: 0; /* display: none; */ }
#txt-s7-4 { width: 250px; height: 600px; position: absolute; right: 0px; top: 880px; opacity: 0; /* display: none; */ }
#txt-s7-4 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #fff; font-weight: 600; }
#txt-s7-4 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 16px; color: #fff !important; font-weight: 300; }
#txt-s7-3 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
#txt-s7-3 p { width: 50%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 23px; font-size: 16px; color: #fff !important; font-weight: 300; text-align: left; }
#faixa-cta-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 1660px; }
#view-div-s8 { width: 95%; height: auto; position: relative; margin: auto; }
#ornamento-s8-e { width: 350px; height: 450px; position: absolute; margin-left: 0px; left: -224px; top: -250px; background: url('img/cogumelos-2.png'); background-size: 350px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; }
#ornamento-s8-d { width: 292px; height: 283px; position: absolute; right: 0px; top: -320px; overflow: hidden; }
#ornamento-s8-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -120px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-contato { width: 95%; height: auto; position: relative; margin: auto; }
#ornamento-bg-contato { width: 477px; height: 257px; position: absolute; left: 50%; margin-left: -300px; margin-top: 100px; background: url('img/bg-ornamento-contato.png'); background-size: 477px; display: none; }
#div-chamada-form-contato { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; }
#div-chamada-form-contato h6 { width: 100%; height: auto; position: relative; float: left; font-size: 40px; color: #fff; font-weight: 700; z-index: 10; }
#bg-hear-you { width: 240px; height: 160px; position: absolute; left: -21px; top: -10px; background: url('img/bg-hear-you.png'); background-size: 258px; }
#div-sobre-contato { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; }
#div-sobre-contato h5 { width: 100%; height: auto; position: relative; float: left; font-size: 25px; color: #fff; font-weight: 700; }
#div-sobre-contato p { width: 80%; height: auto; position: relative; float: left; margin-top: 5px; font-size: 17px; color: #fff; font-weight: 300; }
#arrow-form { width: 242px; height: 38px; position: absolute; right: -160px; top: 50%; margin-top: -250px; background: url('img/arrow-form.png'); background-size: 242px; display: none; }
#div-form-contato { width: 100%; height: auto; position: relative; float: right; }
#chamada-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 16px; padding-right: 60px; color: #fff; }
.label input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 4px 20px !important; border-radius: 10px !important; font-size: 14px; color: #3F9182; box-sizing: border-box !important; }
.label textarea { width: 100% !important; height: auto; position: relative; float: left; background-color: #fff !important; padding: 20px 20px !important; border-radius: 10px !important; font-size: 17px !important; color: #3F9182; box-sizing: border-box; }
/* Inicio rodapé */
#div-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; }
#ornamento-e-r { width: 457px; height: 476px; position: absolute; left: -150px; top: -280px; background: url('img/ornamento-e-r.png'); background-size: 457px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; display: none; }
#ornamento-o-d-r { width: 492px; height: 494px; position: absolute; right: 0px; top: 30px; overflow: hidden; display: none; }
#view-rodape { width: 95%; height: auto; position: relative; margin: auto; max-width: 1200px; }
#box-form-news-letter { width: 90%; height: 150px; position: relative; margin: auto; margin-top: -70px; background-color: #30363D; border-radius: 20px; padding: 0px 20px; display: none; }
#box-form-news-letter h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; color: #fff; text-align: center; font-size: 17px; font-weight: 600; margin-bottom: 9px; }
#label-form-news { width: 73%; height: auto; position: relative; float: left; margin-top: 7px; }
#label-form-news input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 10px 20px !important; border-radius: 10px !important; font-size: 20px; color: #3F9182; box-sizing: border-box; }
#cta-enviar-news { width: 70px; height: 52px; position: relative; float: left; margin-top: 7px; margin-left: 10px; background-color: #EAFF8D; border-radius: 13px; cursor: pointer; }
#faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; }
#logo-rodape { width: 145px; height: 95px; position: relative; margin: auto; background: url('img/logo-rodape.png'); background-size: 145px; background-repeat: no-repeat; }
#faixa-links-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 20px; margin-bottom: -70px; }
.div-s-rodape { width: 50%; height: 200px; position: relative; float: left; }
.div-s-rodape h3 { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #fff; }
.div-s-rodape h2 { width: 100%; height: auto; position: relative; float: left; font-size: 19px; margin-top: 35px; text-align: left; margin-bottom: 10px; color: #fff; }
.item-icn-sm { width: 30px; height: 30px; position: relative; float: left; cursor: pointer; opacity: 0.7; cursor: pointer; margin-top: 0px; }
#infos-rodape { width: 100%; height: auto; position: relative; margin: auto; max-width: 90%; color: #fff; padding-bottom: 20px; padding-top: 50px; }
.div-s-rodape ul li { width: 100%; height: auto; position: relative; float: left; margin-bottom: 3px; font-size: 14px; color: #fff; cursor: pointer; }
#faixa-politica-privacidade { width: 100%; height: auto; position: absolute; bottom: 0px; background-color: #2C3035; padding: 11px 20px; color: #fff; text-align: center; font-size: 17px; cursor: pointer; }
#txt-s7-3 { width: 100%; height: 600px; position: absolute; left: 0px; top: 1220px; opacity: 0; padding: 0px 20px; /* display: none; */ max-width: 400px; }
#txt-s7-3 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
#txt-s7-3 p { width: 50%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 23px; font-size: 16px; color: #fff !important; font-weight: 300; text-align: left; }
#faixa-cta-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 1660px; }
#view-div-s8 { width: 95%; height: auto; position: relative; margin: auto; max-width: 400px; }
#txt-s7-4 { width: 250px; height: 600px; position: absolute; right: unset; left: 129px; top: 690px; opacity: 0; /* display: none; */ }
#div-s7 { width: 100%; height: 2470px; position: relative; float: left; background-color: #30363D; margin-top: 50px; overflow: hidden; }
#ornamento-dp1 { width: 214px; height: 260px; position: absolute; right: -203px; top: -111px; background: url('img/ornamento-dp1.png'); background-size: 214px; display: none; }
#ifram-int-shop { width: 98%; height: 1150px; position: relative; margin: auto; border-radius: 20px; overflow: hidden; }
.btn-degrade { background: unset; /* fallback para navegadores muito antigos */ background: -webkit-linear-gradient(left, unset 0%, unset 100%); /* Safari, Chrome antigos */ background: -moz-linear-gradient(left, unset 0%, unset 100%); /* Firefox antigos */ background: -o-linear-gradient(left, unset 0%, unset 100%); /* Opera antigos */ background: linear-gradient(90deg, unset 0%, unset 100%); /* padrão moderno */ transition: all 0.3s ease; /* Isso faz a saída da classe ser suave */ }
#div-conta { width: 100%; height: auto; position: relative; float: left; margin-top: 180px; padding-bottom: 40px; z-index: 99; background-color: #272C34; }
#view-div-conta { width: 90%; height: auto; position: relative; margin: auto; }
nav { color: #fff; background-color: #1e202f; width: 100%; border-radius: 12px; height: 116px; line-height: 56px; }
.woocommerce-cart-form .button, .cart-collaterals .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: #CFFF8D !important; color: #367639 !important; font-weight: 600; border: none; border-radius: 999px; padding: 7px 25px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease; }
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details th, .woocommerce-table.woocommerce-table--order-details.shop_table.order_details td { font-size: 14px; display: block; /* opcional: deixa as colunas empilhadas */ width: 100% !important; }
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details tr { display: block; margin-bottom: 12px; }
#conteudo-topo-pg-carrinho { width: 90%; height: auto; position: relative; margin: auto; }
#topo-pagina-de-carrinho { width: 100%; height: auto; position: relative; float: left; background-color: #272C34; padding-bottom: 70px; }
.div-conteudo-e-pg-carrinho { width: 100%; height: auto; position: relative; float: left; }
.div-conteudo-d-pg-carrinho { width: 100%; height: auto; position: relative; float: left; margin-top: -54px; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: left; width: 100%; padding-left: 0px; }
.div-conteudo-e-pg-carrinho h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 190px; font-size: 40px; color: #fff; font-weight: 700; }
.div-conteudo-e-pg-carrinho p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 18px; color: #fff; font-weight: 300; }
/* Força botões do carrinho/checkout a 100% */
.woocommerce .cart input.button, .woocommerce .cart button.button, .woocommerce .cart .button, .woocommerce button.button, .woocommerce input.button { width: 100% !important; max-width: 100% !important; display: block !important; text-align: center; padding: 16px 0px; margin-bottom: -10px; box-sizing: border-box; }
.woocommerce .cart input.input-text#coupon_code, .woocommerce .cart input.button, .woocommerce .cart button.button { width: 100% !important; max-width: 100% !important; display: block; }
.woocommerce-cart-form .button, .cart-collaterals .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: #CFFF8D !important; color: #367639 !important; font-weight: 600; border: none; border-radius: 999px; padding: 19px 25px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease; }
#conteudo-topo-pg-carrinho { width: 90%; height: auto; position: relative; margin: auto; }
.div-conteudo-e-pg-carrinho { width: 100%; height: auto; position: relative; float: left; }
.div-conteudo-d-pg-carrinho { width: 100%; height: auto; position: relative; float: left; margin-top: -54px; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: left; width: 100%; padding-left: 0px; }
/* ínicio página de checkout */
#div-checkout { width: 100%; height: auto; position: relative; float: left; margin-top: 240px; padding-bottom: 220px; }
#view-div-checkout { width: 90%; height: auto; position: relative; margin: auto; }
/* Checkout main container sempre responsivo */
.gm-checkout-main { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding: 0 15px; /* opcional: cria respiro lateral */ }
/* Ajusta grid do checkout */
.gm-checkout-grid { display: flex; flex-wrap: wrap; width: 100% !important; max-width: 100% !important; }
/* Coluna dos campos */
.gm-checkout-main #customer_details, .gm-checkout-main .col-1, .gm-checkout-main .col-2 { width: 100% !important; max-width: 100% !important; float: none !important; }
/* Checkout resumo responsivo */
.gm-checkout-aside { width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box; padding: 0 15px; /* opcional, respiro lateral */ }
/* Garante que a tabela dentro também não estoure */
.gm-checkout-aside .shop_table { width: 100% !important; max-width: 100% !important; table-layout: fixed; word-wrap: break-word; white-space: normal; }
#div-checkout { width: 100%; height: auto; position: relative; float: left; margin-top: 170px; padding-bottom: 70px; }
.woocommerce-billing-fields h3 { font-size: 24px !important; }
.woocommerce-billing-fields h3, #order_review_heading { font-size: 24px !important; }
#div-th-page { width: 100%; height: auto; position: relative; float: left; margin-top: 180px; background-color: #272C34; color: #fff !important; padding-bottom: 80px; }
#view-th-page { width: 90%; height: auto; position: relative; margin: auto; }
.shop_table.order_details.gm-table { width: 100% !important; max-width: 100% !important; table-layout: fixed; border-collapse: collapse; word-wrap: break-word; white-space: normal; }
.shop_table.order_details.gm-table th, .shop_table.order_details.gm-table td { word-break: break-word; white-space: normal; padding: 10px; }
.gm-summary > div { display: flex; flex-direction: column; gap: 15px; }
.woocommerce ul.products.columns-4 li.product { width: 100% !important; clear: none !important; }
.item-card-produto { width: 100% !important; height: auto !important; position: relative !important; float: left !important; margin-left: 0% !important; margin-right: 2% !important; margin-bottom: 30px !important; background-color: #3D444C !important; border-radius: 20px !important; opacity: 1 !important; visibility: visible !important; transition: opacity 0.4s ease, visibility 0.4s ease !important; padding-bottom: 120px !important; }
#div-s3 { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; padding-bottom: 170px; }
#div-s6 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
.woocommerce-cart-form .button, .cart-collaterals .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: #CFFF8D !important; color: #367639 !important; font-weight: 600; border: none; border-radius: 999px; padding: 12px 25px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease; }
#interna-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 230px; background-color: #272C34; padding-bottom: 200px; }
#view-interna-produto { width: 90%; height: auto; position: relative; margin: auto; }
/* incicio página de testes */
#conteudo-pg-teste { width: 100%; height: auto; position: relative; float: left; }
#view-testing { width: 90%; height: auto; position: relative; margin: auto; }
#chamada-testing { width: 100%; height: auto; position: relative; margin-top: 220px; float: left; font-size: 27px; color: #fff; font-weight: 700; }
#headline-testing { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 15px; color: #fff; }
/* lista de testes */
#lista-testes { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; padding-bottom: 10px; }
.item-teste { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; margin-bottom: 60px; padding-bottom: 25px; border-bottom: 1px solid #30373F; }
.teste-icn { width: 30px; height: 30px; /* top: 50%; */ position: relative; float: left; background: url('img/icn-logo-thc.png'); background-size: 30px; animation: swing-icn 2s ease-in-out infinite; }
@keyframes swing-icn {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(-6deg); }
100% { transform: rotate(0deg); }
}
.nome-teste {
width: 80%;
height: auto;
position: relative;
float: left;
margin-left: 10px;
margin-top: 4px;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
}
.cta-testes {
width: 200px;
height: auto;
position: relative;
float: left;
margin-left: 10px;
padding: 6px 0px;
font-size: 16px;
color: #CFFF8D;
border: 1px solid #CFFF8D;
border-radius: 30px;
cursor: pointer;
text-align: center;
margin-bottom: 10px;
}
.item-teste:hover .cta-testes { color: #347039; border: 1px solid #CFFF8D; background-color: #CFFF8D; }
.item-teste:hover .nome-teste { color: #CFFF8D; }
#headline-testing { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #fff; }
#formulario-join-us input { width: 100%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; box-sizing: border-box;}
#formulario-join-us textarea { width: 100%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; font-family: inherit; box-sizing: border-box; resize: none; }
.variations_form.cart { display: flex; flex-direction: column; }
.variations_form.cart table.variations { order: 1; }
.variations_form.cart .reset_variations_alert { order: 3; }
.variations_form.cart .single_variation_wrap { order: 2; }
.gm-single__summary h1.product_title.entry-title, .gm-single__summary .woocommerce-product-details__short-description h1 { font-size: 20px !important; line-height: 1.3; }
}
@media only screen
and (min-width:370px)
and (max-width:400px) {
#cart-menu {
width: 30px;
height: 30px;
position: absolute;
right: 75px;
top: 21px;
}
#my-acount-menu {
width: 30px;
height: 30px;
position: absolute;
right: 120px;
top: 22px;
}
/* Menu mobile */
.hide-itens-menu{display: none;}
#icn-menu-sd{
width: 30px;
height: 30px;
position: absolute;
right: 28px;
top: 21px;
display: block;
cursor: pointer;
}
#mask-menu-mobile{display: block; width:0%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: #000; opacity: 0; z-index: 9999;}
#menu-mobile-list-out{display: block; width: 0%; height: 100%; position: fixed; z-index: 999999; overflow: hidden; top: 0px;}
#menu-mobile-list { width: 100%; height: 100%; position: absolute; right: -150%; border-radius: 0px 0px 0px 0px; background-color: #292c37; z-index: 99999; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); }
#top-menu-mobile { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
#logo-menu-mobile { width: 140px; height: auto; position: relative; float: left; margin-left: 40px; margin-top: 20px; }
#close-menu-mobile-topo { width: 50px; height: 50px; position: absolute; right: 20px; top: 56px; border-radius: 50%; background-color: #cfff8d; cursor: pointer; }
#close-icon-menu-mobile { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; background: url(img/close.png); background-size: 30px; }
#close-menu-mobile-topo:hover{background-color: #ACE959;}
#menu-mobile-list-links{width: 100%; height: auto; position: relative; float: left; margin-top: 5px; padding: 0px 20px;}
#menu-mobile-list-links h4 { width: 100%; height: auto; position: relative; float: left; margin-left: 19px; font-size: 29px; font-weight: 400; color: #ffffff; }
.item-menu-mobile { width: 100%; height: auto; position: relative; float: left; margin-bottom: 10px; padding: 10px 20px; background-color: #1e202f; color: #ffffff; font-size: 18px; border-radius: 30px; cursor: pointer; }
.item-menu-mobile:hover { background-color: #CFFF8D; color: #367639; }
.icon-menu-mobile { width: 25px; height: 25px; position: absolute; right: 10px; top: 10px; background-color: #292c37; border-radius: 50%; }
.arrow-menu-mobile{width: 15px; height: 15px; position: absolute; left: 50%; top: 50%; margin-left: -7.5px; margin-top: -7.5px; background: url(img/icn-logo-thc.png); background-size: 15px;}
.item-menu-mobile:hover .icon-menu-mobile{background-color: #ACE959;}
.m-mobile-atv{background-color: #db0404; color: #fff;}
.icon-menu-mobile-atv{background-color: #b90000;}
.menu-mobile-faq { width: 100%; height: auto; position: relative; float: left; border-radius: 10px; padding: 15px 20px; background-color: #def5ff; color: #7a858f; font-size: 18px; font-weight: 500; }
.menu-mobile-faq:hover{background-color: #5cceff; color: #fff;}
.icon-menu-mobile-faq { width: 40px; height: 40px; position: absolute; right: 10px; top: 8px; background-color: #8dddff; border-radius: 50%; }
.icon-faq-menu-mobile {width:20px; height:20px; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; background: url(img/comment.png); background-size: 20px;}
#sm-menu-mobile{width: 100%; height: auto; position: absolute; bottom: 20px; padding: 0px 20px;}
#chmada-sm-menu-mobile { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #ffffff; }
.icon-sm-mobile{width: 30px; height: 30px; position: relative; float: left; margin-right: 10px; cursor: pointer;}
#insta-menu { width: 30px; height: 30px; position: absolute; right: 70px; top: 24px; display: none; }
#infos-rodape { width: 100%; height: auto; position: relative; margin: auto; max-width: 90%; color: #fff; padding-bottom: 10px; padding-top: 10px; }
.desktop { display: none; }
.tablet { display: none; }
.mobile { display: block; }
.mobile-hide { display: none !important; }
#mascara-contato-enviado { width: 100%; height: 100%; position: fixed; z-index: 9999; background-color: #000; opacity: 0.9; }
#container-mensagem-contato-enviado { width: 350px; height: 250px; position: fixed; left: 50%; top: 50%; margin-left: -175px; margin-top: -150px; background-color: #272C34; border-radius: 30px; z-index: 99999; }
#chamada-contato-enviado { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; color: #fff; font-size: 20px; text-align: center; padding: 0px 10px; }
#sobre-contato-enviado { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 15px; color: #fff; text-align: center; padding: 0px 20px; }
/* Fixed Menu */
#faixa-menu-fixo { width: 100%; height: auto; position: fixed; top: 60px; z-index: 999; }
#view-menu-fixo { max-width: 400px; width: 95%; height: 75px; position: relative; margin: auto; background: #1E202F; border-radius: 80px; -webkit-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -moz-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -o-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); -ms-box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); box-shadow: 0px 0px 59px -12px rgba(0, 0, 0, 0.47); }
#bg-logo { width: 122px; height: 128px; position: absolute; top: -30px; left: -10px; margin-left: 0px; background-image: url(img/pg-logo-menu.png); background-size: 122px; }
#logo-menu-topo { width: 85px; height: 85px; position: absolute; left: 50%; top: 50%; margin-left: -44px; margin-top: -25px; background: url('img/logo-menu-topo.png'); background-size: 85px; background-repeat: no-repeat; }
#ornamento-topo { width: 100%; height: 316px; position: absolute; top: -90px; background: url('img/ornamento-topo.png'); background-repeat: repeat-x; }
.item-menu-fixo { width: auto; height: auto; position: relative; float: left; margin-left: 6px; margin-right: -15px; margin-top: 20px; padding: 7px 15px; color: #fff; font-size: 17px; border-radius: 60px; cursor: pointer; }
.menu-fixo-e { width: auto; height: auto; position: relative; float: left; margin-left: 99px; }
.menu-fixo-d { width: auto; height: auto; position: relative; float: right; margin-right: 19px; }
/* Landing Page Top Section */
#s1-lp { width: 100%; height: 970px; position: relative; float: left; background: #272C34; overflow: hidden; }
#container-ctas-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; }
#faixa-depoimentos-topo { width: 100%; height: auto; position: relative; float: left; display: block; margin-top: 29px; }
#dp-1 { width: 250px; height: 250px; position: absolute; left: 129px; top: 130px; }
#ft-dp1 { width: 147px; height: 147px; position: absolute; left: -38px; top: 0px; background: url('img/foto-dp1.png'); background-size: 147px; }
#bloco-txt-dp1 { width: 350px; height: 100px; position: absolute; left: -91px; top: -120px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; }
#dp-2 { width: 500px; height: 150px; position: absolute; left: 50%; margin-left: -345px; top: 250px; display: block; }
#bloco-txt-dp2 { width: 350px; height: 100px; position: absolute; top: 179px; left: -190px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; }
#ft-dp2 { width: 147px; height: 147px; position: absolute; right: -10px; top: -12px; background: url('img/foto-dp2.png'); background-size: 147px; }
#ornamento-dp2 { width: 128px; height: 143px; position: absolute; display: none; bottom: -1px; left: -130px; background: url('img/ornamento-dp2.png'); background-size: 128px; }
#dp-3 { width: 400px; height: 150px; position: absolute; right: 260px; top: 30px; display: block; }
#bloco-txt-dp3 { width: 240px; height: 150px; position: absolute; top: 19px; right: -250px; background-color: #fff; border-radius: 15px; padding: 15px 20px 8px 20px; color: #000; font-size: 16px; z-index: 20; display: none; }
#ft-dp3 { width: 147px; height: 147px; position: absolute; right: -41px; top: 210px; background: url('img/foto-dp3.png'); background-size: 147px; }
#ornamento-dp3 { width: 278px; height: 151px; position: absolute; bottom: 120px; left: 320px; background: url('img/ornamento-dp3.png'); background-size: 278px; display: none; }
.l-dp1 { left: 50%; margin-left: -30px; bottom: -10px; z-index: 1; }
.l-dp2 { right: 70px; bottom: 70px; }
.item-palavra { width: 200px; height: auto; position: relative; float: left; font-size: 18px; color: #fff; font-weight: 400; text-align: center; padding: 11px 0px; }
#div-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #272C34; padding-bottom: 70px; }
#view-s2 { width: 95%; height: auto; position: relative; margin: auto; }
#conteudo-s2 { width: 100%; height: 100%; position: relative; float: left; padding: 20px; }
#conteudo-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 40px; color: #fff; line-height: 40px; font-weight: 700; }
#conteudo-s2 p { width: 75%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #fff; font-weight: 300; }
#sobre-produto-int { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #fff; margin-top: 25px; font-weight: 300; }
/* tipografia s2 */
#tipografia-s2 { width: 50%; height: 100%; position: relative; float: left; display: none; }
#ornamto-e-s3 { width: 250px; height: 250px; position: absolute; left: -100px; top: -180px; background: url('img/folhas.png'); background-size: 250px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#ornamto-d-s3-out { width: 343px; height: 539px; position: absolute; right: 0px; top: -270px; overflow: hidden; }
#view-div-s3 { width: 95%; height: auto; position: relative; margin: auto; }
#view-div-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 88px; color: #fff; text-align: center; font-weight: 800; }
#subtitulo-s3 { width: 220px; height: 69px; position: absolute; bottom: -20px; right: 50%; margin-right: -85px; font-size: 14px; color: #fff; font-weight: 400; background-color: red; z-index: 90; }
#div-cat-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; }
.icn-categoria { width: 94%; height: 90px; position: relative; float: left; margin-right: unset; border-radius: 20px; border: 2px solid transparent; background: linear-gradient(#30363D, #30363D) padding-box, /* fundo interno */
linear-gradient(135deg, #C5F94C 0%, #54D0E5 100%) border-box; background-clip: padding-box, border-box; cursor: pointer; }
.legenda-categoria-seletor { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 10px; font-size: 10px; color: #fff; }
/* Product cards section start */
#div-cards-produtos { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding-bottom: 100px; padding: 0px 10px; }
/* Product card start */
.item-card-produto { width: 100%; height: auto; position: relative; float: left; margin-left: 0%; margin-right: 0%; margin-bottom: 14px; background-color: #3D444C; border-radius: 20px; padding-bottom: 110px; }
.titulo-descricao-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 32px; font-size: 22px; color: #fff; }
.descricao-produto-int { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; font-size: 16px; color: #fff; }
#ornamento-s4-e { width: 270px; height: 269px; position: absolute; margin-left: 0px; left: -130px; top: -200px; background: url('img/cogumelos-2.png'); background-size: 300px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#ornamento-s4-d { width: 400px; height: 400px; position: absolute; right: 0px; top: -200px; overflow: hidden; }
#ornamento-s4-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -170px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#headline-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; font-size: 40px; color: #fff; font-weight: 800; text-align: center; z-index: 20; line-height: 70px; }
#molecula-out { width: 110%; height: auto; position: relative; float: left; margin-top: -10px; overflow: hidden; margin-left: -16px; }
#molecula { width: 100%; height: auto; position: relative; float: left; margin-left: 0px; margin-top: 0px; }
/* Top content start */
#view-conteudo-topo { width: 95%; height: 100%; position: relative; margin: auto; }
#view-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 181px; font-size: 23px; color: #fff; text-align: center; padding: 0px 20px; }
#container-cta-topo-int { width: 95%; height: auto; position: relative; margin: auto; }
.item-cta-topo { width: 151px; height: auto;/* left: 50%; */ position: relative; float: left;/* margin: auto; */ margin-left: unset; font-size: 14px; font-weight: 500; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 12px; border-radius: 80px; margin-left: 11px; }
.icn-cta-topo { width: 20px; height: 20px; position: absolute; right: 16px; top: 9px; background: url('img/icn-logo-thc.png'); background-size: 20px; }
.icn-cta-topo-2 { width: 20px; height: 20px; position: absolute; right: 11px; top: 6px; background: url('img/tubo-ensaio.png'); background-size: 20px; }
/* The Science section start */
#div-s4 { width: 100%; height: auto; position: relative; float: left; background-color: #282C34; padding-bottom: 50px; }
#faixa-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
#selo-qualidade { width: 150px; height: 150px; position: relative; margin: auto; background: url('img/selo.png'); background-size: 150px; }
#faixa-topicos-qualidade { width: 100%; height: auto; position: relative; margin: auto; }
#chamada-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #fff; font-size: 28px; font-weight: 700; text-align: center; }
.item-qualidade { width: 100%; height: auto; position: relative; float: left; padding: 0px 13px; margin-bottom: 30px; }
.item-qualidade h4 { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 22px; color: #fff; font-weight: 600; }
.item-qualidade p { width: 100%; height: auto; position: relative; float: left; margin-top: -6px; font-size: 16px; color: #fff; font-weight: 300; }
#faixa-cta-qualidade { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
#topo-div-s5 { width: 100%; height: 470px; position: relative; float: left; background-color: #3D3D45; overflow: hidden; }
#cogu-1 { width: 457px; height: 451px; position: absolute; right: -290px; top: -180px; background: url('img/cogu1.png'); background-size: 267px; background-repeat: no-repeat; }
#cogu-2 { width: 267px; height: 451px; position: absolute; left: -90px; bottom: -300px; background: url('img/cogu2.png'); background-repeat: no-repeat; background-size: 267px; }
#ornamto-e-s5 { width: 300px; height: 273px; position: absolute; left: -160px; top: -170px; background: url('img/folhas.png'); background-size: 300px; z-index: 10; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#ornamto-d-s5-out { width: 300px; height: 279px; position: absolute; right: 0px; top: -300px; overflow: hidden; z-index: 10; }
#ornamto-d-s5 { width: 100%; height: 100%; position: absolute; top: 50px; right: -200px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; }
#view-div-blog-home { width: 95%; height: auto; position: relative; margin: auto; }
#chamada-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; font-size: 42px; color: #fff; font-weight: 600; text-align: center; }
.linha-rascunho { width: 297px; height: 66px; position: absolute; right: -74px; bottom: -50px; background: url('img/rascunho.png'); background-size: 177px; background-repeat: no-repeat; }
#sobre-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: 13px; font-size: 15px; color: #fff; text-align: center; padding: 0px 20px; font-weight: 300; }
#s-posts-blog-home { width: 100%; height: auto; position: relative; float: left; margin-top: -117px; z-index: 90; display: none; }
#view-posts-blog-home { width: 95%; height: auto; position: relative; margin: auto; }
/* item card post blog */
.card-post-home { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; cursor: pointer; margin-bottom: 20px; }
.resumo-post-home { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
.resumo-post-home p { width: 100%; height: auto; position: relative; float: left; margin-top: 5px; color: #000; font-size: 14px; }
/* FAQ section */
#div-s6 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
#view-div-s6 { width: 95%; height: auto; position: relative; margin: auto; padding: 0px 20px; }
#div-e-s6 { width: 100%; height: auto; position: relative; float: left; }
#faq-chamada { width: 100%; height: auto; position: relative; float: left; font-size: 34px; font-weight: 800; line-height: 39px; color: #000; }
#sobre-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #000; font-weight: 400; }
#div-d-s6 { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; margin-top: 30px; }
#div-s7 { width: 100%; height: 3090px; position: relative; float: left; background-color: #30363D; margin-top: 50px; overflow: hidden; }
#view-div-s7 { width: 95%; height: auto; position: relative; margin: auto; }
#headline-s7 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; text-align: left; font-size: 40px; color: #fff; font-weight: 800; z-index: 9; padding-left: 18px; }
#bg-here { width: 190px; height: 100px; position: absolute; right: 14px; top: 0px; background: url('img/bg-here.png'); background-size: 200px; }
#molecula-4 { width: 675px; height: 925px; position: absolute; margin-top: -10px; left: unset; margin-left: unset; right: -390px; background: url('img/molecula-2.png'); background-size: 605px; background-repeat: no-repeat; }
#txt-1-m { width: 87%; height: 110px; position: absolute; left: 20px; top: 25px; color: #fff; font-size: 17px; font-weight: 300; opacity: 0; }
#txt-2-m { width: 90%; height: 280px; position: absolute; right: unset; margin-left: 20px; top: 141px; color: #fff; font-size: 16px; font-weight: 300; opacity: 0; }
#txt-3-m { width: 90%; height: 300px; position: absolute; left: 20px; top: 390px; color: #fff; font-size: 16px; font-weight: 300; opacity: 0; }
#ornamento-m-s7 { width: 335px; height: 259px; position: absolute; left: 50px; top: 450px; background: url('img/ornamento-molecula-1a.png'); display: none; background-size: 335px; }
#ornamento-m-s7-a { width: 278px; height: 374px; position: absolute; right: 50px; top: 550px; background: url('img/ornamento-molecula-2a.png'); background-size: 278px; display: none; }
#ornamento-m-s7-b { width: 343px; height: 261px; position: absolute; left: 50px; top: 950px; background: url('img/ornamento-molecula-3a.png'); background-size: 343px; display: none; }
#o-f1-s7 { width: 172px; height: 259px; position: absolute; margin-left: 0px; left: -60px; top: 790px; background: url('img/f1.png'); background-size: 172px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#o-f2-s7 { width: 300px; height: 539px; position: absolute; right: -10px; top: 850px; background: url('img/f2-s7.png'); background-size: 408px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; display: none; }
#faixa-cta-div-s7-1 { width: 100%; height: auto; position: relative; float: left; margin-top: 520px; }
#headline-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; text-align: center; font-size: 50px; color: #fff; font-weight: 800; z-index: 9; }
#bg-who { width: 129px; height: 78px; position: absolute; left: 42px; top: 28px; background: url('img/bg-who.png'); background-size: 130px; }
#molecula-s7-2 { width: 825px; height: 1215px; position: absolute; left: 50%; margin-left: -320px; top: 110px; background: url('img/molecula-34.png'); background-size: 575px; background-repeat: no-repeat; }
#txt-s7-2 { width: 230px; height: 600px; position: absolute; left: 117px; top: 105px; opacity: 0; /* display: none; */ }
#txt-s7-2 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #fff; font-weight: 600; }
#txt-s7-2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 11px; margin-bottom: 5px; font-size: 16px; color: #fff !important; font-weight: 300; }
#txt-s7-3 { width: 400px; height: 600px; position: absolute; left: 0px; top: 1150px; opacity: 0; /* display: none; */ }
#txt-s7-4 { width: 250px; height: 600px; position: absolute; right: 0px; top: 880px; opacity: 0; /* display: none; */ }
#txt-s7-4 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #fff; font-weight: 600; }
#txt-s7-4 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 5px; font-size: 16px; color: #fff !important; font-weight: 300; }
#txt-s7-3 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
#txt-s7-3 p { width: 50%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 23px; font-size: 16px; color: #fff !important; font-weight: 300; text-align: left; }
#faixa-cta-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 1660px; }
#view-div-s8 { width: 95%; height: auto; position: relative; margin: auto; }
#ornamento-s8-e { width: 350px; height: 450px; position: absolute; margin-left: 0px; left: -224px; top: -250px; background: url('img/cogumelos-2.png'); background-size: 350px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; background-repeat: no-repeat; }
#ornamento-s8-d { width: 292px; height: 283px; position: absolute; right: 0px; top: -320px; overflow: hidden; }
#ornamento-s8-d-int { width: 100%; height: 100%; position: absolute; margin-right: 0px; right: -120px; top: 0px; -webkit-animation: girar-suave 6s ease-in-out infinite alternate; -moz-animation: girar-suave 6s ease-in-out infinite alternate; -o-animation: girar-suave 6s ease-in-out infinite alternate; animation: girar-suave 6s ease-in-out infinite alternate; }
#view-div-contato { width: 95%; height: auto; position: relative; margin: auto; }
#ornamento-bg-contato { width: 477px; height: 257px; position: absolute; left: 50%; margin-left: -300px; margin-top: 100px; background: url('img/bg-ornamento-contato.png'); background-size: 477px; display: none; }
#div-chamada-form-contato { width: 100%; height: auto; position: relative; float: left; margin-top: 47px; }
#div-chamada-form-contato h6 { width: 100%; height: auto; position: relative; float: left; font-size: 40px; color: #fff; font-weight: 700; z-index: 10; }
#bg-hear-you { width: 240px; height: 160px; position: absolute; left: -21px; top: -8px; background: url('img/bg-hear-you.png'); background-size: 258px; }
#div-sobre-contato { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; }
#div-sobre-contato h5 { width: 100%; height: auto; position: relative; float: left; font-size: 25px; color: #fff; font-weight: 700; }
#div-sobre-contato p { width: 80%; height: auto; position: relative; float: left; margin-top: 5px; font-size: 17px; color: #fff; font-weight: 300; }
#arrow-form { width: 242px; height: 38px; position: absolute; right: -160px; top: 50%; margin-top: -250px; background: url('img/arrow-form.png'); background-size: 242px; display: none; }
#div-form-contato { width: 100%; height: auto; position: relative; float: right; }
#chamada-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 16px; padding-right: 60px; color: #fff; }
.label input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 4px 20px !important; border-radius: 10px !important; font-size: 14px; color: #3F9182; box-sizing: border-box !important; }
.label textarea { width: 100% !important; height: auto; position: relative; float: left; background-color: #fff !important; padding: 20px 20px !important; border-radius: 10px !important; font-size: 17px !important; color: #3F9182; box-sizing: border-box; }
/* Inicio rodapé */
#div-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; }
#ornamento-e-r { width: 457px; height: 476px; position: absolute; left: -150px; top: -280px; background: url('img/ornamento-e-r.png'); background-size: 457px; -webkit-animation: girar-suave-d 8s ease-in-out infinite alternate; -moz-animation: girar-suave-d 8s ease-in-out infinite alternate; -o-animation: girar-suave-d 8s ease-in-out infinite alternate; animation: girar-suave-d 8s ease-in-out infinite alternate; display: none; }
#ornamento-o-d-r { width: 492px; height: 494px; position: absolute; right: 0px; top: 30px; overflow: hidden; display: none; }
#view-rodape { width: 95%; height: auto; position: relative; margin: auto; }
#box-form-news-letter { width: 90%; height: 150px; position: relative; margin: auto; margin-top: -70px; background-color: #30363D; border-radius: 20px; padding: 0px 20px; display: none; }
#box-form-news-letter h4 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; color: #fff; text-align: center; font-size: 17px; font-weight: 600; margin-bottom: 9px; }
#label-form-news { width: 70%; height: auto; position: relative; float: left; margin-top: 7px; }
#label-form-news input { width: 100%; height: auto; position: relative; float: left; background-color: #fff !important; padding: 10px 20px !important; border-radius: 10px !important; font-size: 20px; color: #3F9182; box-sizing: border-box; }
#cta-enviar-news { width: 70px; height: 52px; position: relative; float: left; margin-top: 7px; margin-left: 10px; background-color: #EAFF8D; border-radius: 13px; cursor: pointer; }
#faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
#logo-rodape { width: 145px; height: 95px; position: relative; margin: auto; background: url('img/logo-rodape.png'); background-size: 145px; background-repeat: no-repeat; }
#faixa-links-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 20px; margin-bottom: -92px; }
.div-s-rodape h3 { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #fff; }
.div-s-rodape h2 { width: 100%; height: auto; position: relative; float: left; font-size: 18px; margin-top: 23px; text-align: left; color: #fff; }
.div-s-rodape ul li { width: 100%; height: auto; position: relative; float: left; margin-bottom: 3px; font-size: 14px; color: #fff; cursor: pointer; }
#faixa-politica-privacidade { width: 100%; height: auto; position: absolute; bottom: 0px; background-color: #2C3035; padding: 11px 20px; color: #fff; text-align: center; font-size: 17px; cursor: pointer; }
#txt-s7-3 { width: 100%; height: 440px; position: absolute; left: 0px; top: 1210px; opacity: 0; padding: 0px 20px 0px 115px; /* display: none; */ }
#txt-s7-3 h6 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
#txt-s7-3 p { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 8px; font-size: 16px; color: #fff !important; font-weight: 300; text-align: left; }
#faixa-cta-div-s7-2 { width: 100%; height: auto; position: relative; float: left; margin-top: 1440px; z-index: 10; }
#view-div-s8 { width: 95%; height: auto; position: relative; margin: auto; }
#txt-s7-4 { width: 230px; height: 600px; position: absolute; right: unset; left: 116px; top: 630px; opacity: 0; /* display: none; */ }
#div-s7 { width: 100%; height: 2420px; position: relative; float: left; background-color: #30363D; margin-top: 50px; overflow: hidden; }
#ornamento-dp1 { width: 214px; height: 260px; position: absolute; right: -203px; top: -111px; background: url('img/ornamento-dp1.png'); background-size: 214px; display: none; }
#div-s8 { width: 100%; height: auto; position: relative; float: left; background-color: #3D3D45; padding-bottom: 50px; }
#div-s5 { width: 100%; height: auto; position: relative; float: left; display: none; }
#m-6 { display: none; }
#cart-menu {
width: 30px;
height: 30px;
position: absolute;
right: 72px;
top: 20px;
}
#my-acount-menu {
width: 30px;
height: 30px;
position: absolute;
right: 116px;
top: 22px;
}
#ifram-int-shop { width: 98%; height: 800px; position: relative; margin: auto; border-radius: 20px; overflow: hidden; }
.item-icn-sm { width: 30px; height: 30px; position: relative; float: left; cursor: pointer; opacity: 0.7; margin-top: -10px; cursor: pointer; }
.div-s-rodape {
width: 50%;
height: 210px;
position: relative;
float: left;
}
.btn-degrade { background: unset; /* fallback para navegadores muito antigos */ background: -webkit-linear-gradient(left, unset 0%, unset 100%); /* Safari, Chrome antigos */ background: -moz-linear-gradient(left, unset 0%, unset 100%); /* Firefox antigos */ background: -o-linear-gradient(left, unset 0%, unset 100%); /* Opera antigos */ background: linear-gradient(90deg, unset 0%, unset 100%); /* padrão moderno */ transition: all 0.3s ease; /* Isso faz a saída da classe ser suave */ }
#div-conta { width: 100%; height: auto; position: relative; float: left; margin-top: 180px; padding-bottom: 40px; z-index: 99; background-color: #272C34; }
#view-div-conta { width: 90%; height: auto; position: relative; margin: auto; }
nav { color: #fff; background-color: #1e202f; width: 100%; border-radius: 12px; height: 116px; line-height: 56px; }
.woocommerce-cart-form .button, .cart-collaterals .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: #CFFF8D !important; color: #367639 !important; font-weight: 600; border: none; border-radius: 999px; padding: 7px 25px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease; }
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details th, .woocommerce-table.woocommerce-table--order-details.shop_table.order_details td { font-size: 14px; display: block; /* opcional: deixa as colunas empilhadas */ width: 100% !important; }
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details tr { display: block; margin-bottom: 12px; }
#conteudo-topo-pg-carrinho { width: 90%; height: auto; position: relative; margin: auto; }
#topo-pagina-de-carrinho { width: 100%; height: auto; position: relative; float: left; background-color: #272C34; padding-bottom: 70px; }
.div-conteudo-e-pg-carrinho { width: 100%; height: auto; position: relative; float: left; }
.div-conteudo-d-pg-carrinho { width: 100%; height: auto; position: relative; float: left; margin-top: -54px; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: left; width: 100%; padding-left: 0px; }
.div-conteudo-e-pg-carrinho h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 190px; font-size: 40px; color: #fff; font-weight: 700; }
.div-conteudo-e-pg-carrinho p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 18px; color: #fff; font-weight: 300; }
/* Força botões do carrinho/checkout a 100% */
.woocommerce .cart input.button, .woocommerce .cart button.button, .woocommerce .cart .button, .woocommerce button.button, .woocommerce input.button { width: 100% !important; max-width: 100% !important; display: block !important; text-align: center; padding: 16px 0px; margin-bottom: -10px; box-sizing: border-box; }
.woocommerce .cart input.input-text#coupon_code, .woocommerce .cart input.button, .woocommerce .cart button.button { width: 100% !important; max-width: 100% !important; display: block; }
.woocommerce-cart-form .button, .cart-collaterals .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: #CFFF8D !important; color: #367639 !important; font-weight: 600; border: none; border-radius: 999px; padding: 10px 25px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease; }
/* ínicio página de checkout */
#div-checkout { width: 100%; height: auto; position: relative; float: left; margin-top: 240px; padding-bottom: 220px; }
#view-div-checkout { width: 90%; height: auto; position: relative; margin: auto; }
/* Checkout main container sempre responsivo */
.gm-checkout-main { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding: 0 15px; /* opcional: cria respiro lateral */ }
/* Ajusta grid do checkout */
.gm-checkout-grid { display: flex; flex-wrap: wrap; width: 100% !important; max-width: 100% !important; }
/* Coluna dos campos */
.gm-checkout-main #customer_details, .gm-checkout-main .col-1, .gm-checkout-main .col-2 { width: 100% !important; max-width: 100% !important; float: none !important; }
/* Checkout resumo responsivo */
.gm-checkout-aside { width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box; padding: 0 15px; /* opcional, respiro lateral */ }
/* Garante que a tabela dentro também não estoure */
.gm-checkout-aside .shop_table { width: 100% !important; max-width: 100% !important; table-layout: fixed; word-wrap: break-word; white-space: normal; }
#div-checkout { width: 100%; height: auto; position: relative; float: left; margin-top: 170px; padding-bottom: 70px; }
.woocommerce-billing-fields h3 { font-size: 24px !important; }
.woocommerce-billing-fields h3, #order_review_heading { font-size: 24px !important; }
#div-th-page { width: 100%; height: auto; position: relative; float: left; margin-top: 180px; background-color: #272C34; color: #fff !important; padding-bottom: 60px; }
#view-th-page { width: 90%; height: auto; position: relative; margin: auto; }
.shop_table.order_details.gm-table { width: 100% !important; max-width: 100% !important; table-layout: fixed; border-collapse: collapse; word-wrap: break-word; white-space: normal; }
.shop_table.order_details.gm-table th, .shop_table.order_details.gm-table td { word-break: break-word; white-space: normal; padding: 10px; }
.gm-summary > div { display: flex; flex-direction: column; gap: 15px; }
.woocommerce ul.products.columns-4 li.product { width: 31.33% !important; clear: none !important; }
.item-card-produto { width: 100% !important; height: auto !important; position: relative !important; float: left !important; margin-left: 0% !important; margin-right: 2% !important; margin-bottom: 30px !important; background-color: #3D444C !important; border-radius: 20px !important; opacity: 1 !important; visibility: visible !important; transition: opacity 0.4s ease, visibility 0.4s ease !important; padding-bottom: 100px !important; }
.shop_table.order_details.gm-table { width: 100% !important; max-width: 100% !important; table-layout: fixed; border-collapse: collapse; word-wrap: break-word; white-space: normal; }
.shop_table.order_details.gm-table th, .shop_table.order_details.gm-table td { word-break: break-word; white-space: normal; padding: 10px; }
.gm-summary > div { display: flex; flex-direction: column; gap: 15px; }
.woocommerce ul.products.columns-4 li.product { width: 100% !important; clear: none !important; }
.item-card-produto { width: 100% !important; height: auto !important; position: relative !important; float: left !important; margin-left: 0% !important; margin-right: 2% !important; margin-bottom: 30px !important; background-color: #3D444C !important; border-radius: 20px !important; opacity: 1 !important; visibility: visible !important; transition: opacity 0.4s ease, visibility 0.4s ease !important; padding-bottom: 120px !important; }
#div-s3 { width: 100%; height: auto; position: relative; float: left; background-color: #30363D; padding-bottom: 170px; }
#div-s6 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }
#interna-produto { width: 100%; height: auto; position: relative; float: left; margin-top: 180px; background-color: #272C34; padding-bottom: 200px; }
#view-interna-produto { width: 90%; height: auto; position: relative; margin: auto; }
.cta-comprar-agora { width: 185px; height: auto; left: 0%; position: relative; margin: unset; margin-left: 0px; font-size: 18px; font-weight: 500; margin-left: 0px; color: #367639; background-color: #CFFF8D; padding: 10px 0px 10px 25px; border-radius: 80px; cursor: pointer; }
/* incicio página de testes */
#conteudo-pg-teste { width: 100%; height: auto; position: relative; float: left; }
#view-testing { width: 90%; height: auto; position: relative; margin: auto; }
#chamada-testing { width: 100%; height: auto; position: relative; margin-top: 190px; float: left; font-size: 27px; color: #fff; font-weight: 700; }
#headline-testing { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 15px; color: #fff; }
/* lista de testes */
#lista-testes { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; padding-bottom: 10px; }
.item-teste { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; margin-bottom: 60px; padding-bottom: 25px; border-bottom: 1px solid #30373F; }
.teste-icn { width: 30px; height: 30px; /* top: 50%; */ position: relative; float: left; background: url('img/icn-logo-thc.png'); background-size: 30px; animation: swing-icn 2s ease-in-out infinite; }
@keyframes swing-icn {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(-6deg); }
100% { transform: rotate(0deg); }
}
.nome-teste { width: 80%; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 4px; font-size: 16px; color: #fff; margin-bottom: 30px; }
.cta-testes { width: 200px; height: auto; position: relative; float: left; margin-left: 10px; padding: 6px 0px; font-size: 16px; color: #CFFF8D; border: 1px solid #CFFF8D; border-radius: 30px; cursor: pointer; text-align: center; margin-bottom: 10px; }
.item-teste:hover .cta-testes { color: #347039; border: 1px solid #CFFF8D; background-color: #CFFF8D; }
.item-teste:hover .nome-teste { color: #CFFF8D; }
#headline-testing { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 17px; color: #fff; }
#formulario-join-us input { width: 100%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; box-sizing: border-box;}
#formulario-join-us textarea { width: 100%; height: auto; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #fff !important; padding: 11px 20px !important; border-radius: 15px !important; font-size: 16px; color: #3F9182; font-family: inherit; box-sizing: border-box; resize: none; }
.variations_form.cart { display: flex; flex-direction: column; }
.variations_form.cart table.variations { order: 1; }
.variations_form.cart .reset_variations_alert { order: 3; }
.variations_form.cart .single_variation_wrap { order: 2; }
.gm-single__summary h1.product_title.entry-title, .gm-single__summary .woocommerce-product-details__short-description h1 { font-size: 20px !important; line-height: 1.3; }
}
/* ==========================================================================
Helper classes
========================================================================== */
/* * Hide visually and from screen readers */
.hidden, [hidden] { display: none !important; }
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */ }
/*
* Extends the .visually-hidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; }
/* * Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }
/*
* Clearfix: contain floats
*
* The use of `table` rather than `block` is only necessary if using
* `::before` to contain the top-margins of child elements.
*/
.clearfix::before, .clearfix::after { content: '%23c8f36a'; 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: 'http://www.w3.org/2000/svg'attr(href) ")"; }
abbr[title]::after { content: '0 0 24 24'attr(title) ")"; }
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]::after, a[href^="javascript:"]::after { content: 'M7 10l5 5 5-5z'; }
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; }
}