/*--------------------------------------------------------------

# Reset

--------------------------------------------------------------*/

*{

  margin:0;

  padding:0;

  scroll-behavior:smooth;

  box-sizing: border-box;

}



ol, ul {

    list-style: none;

}



/*--------------------------------------------------------------

# General

--------------------------------------------------------------*/

body {

  background-image: url("../img/lp-offline/body-background.png");

  background-repeat: no-repeat;

  background-size: contain;

  background-color: rgba(255,255,255,0.9);



  font-family: "Open Sans", sans-serif;

  color: #444444;

}



:root{

  --primary-green: #799c1f;

  --second-green: #90b828;

  --primary-orange: #ff7403;

}



/*--------------------------------------------------------------

# Botão de compra

--------------------------------------------------------------*/

a.buttonBay{

  text-transform: uppercase;

  font-size: 33px;

  text-decoration: none;

  font-weight: 800;

  background-color: white;

  color: var(--primary-orange);

  border: 3px solid var(--primary-orange);

  transition: .3s;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 80px;

}



a.buttonBay:hover{

  background-color: var(--primary-orange);

  color: white;

  border: 3px solid var(--primary-orange);

  transition: .3s;

}



/*--------------------------------------------------------------

# Botão de play dos vídeos

--------------------------------------------------------------*/

a.videoButtonPlay{

  top: 35%;

  position: absolute;

  border-radius: 50px;

  width: 70px !important;

  height: 70px !important;

  background-color: var(--primary-orange);

  border: 6px solid #fbaa68;

  transition: .3s;

}



a.videoButtonPlay:hover{

  border: 6px solid var(--primary-orange);

  transition: .3s;

}



a.videoButtonPlay img{

  width: 22px;

  margin-right: -6px;

}



/*--------------------------------------------------------------

# Estilização #header

--------------------------------------------------------------*/

#header h2, #header h3{

  text-align: center;

  color: var(--primary-green);

}

#header h2{

  font-size: 50px;

  font-weight: 800;

  padding-bottom: 10px;

  margin-bottom: 10px;

  border-bottom: 1px solid var(--primary-orange);

}



#header h3{

  font-style: italic;

}



#header .container{

  padding-top: 50px;

}



#header #logo{

  border-right: 1px solid var(--primary-green);

  padding-right: 65px;

}



#topMenu{

  margin-left: 65px;

}



#topper{

  height: 40px;

  margin-bottom: 25px;

  padding-left: 0px !important;

}



#topper li{

  margin-right: 51px;

  padding-bottom: 10px;

}



#topper li:hover{

  border-bottom: 3px solid var(--primary-green);

}



#topper li a, #bottom li a{

  font-weight: 600;

  text-decoration: none;

  color: var(--primary-green);

}



#topper li:last-child{

  padding-bottom: unset;

  margin-right: unset

}



#topper li:last-child:hover{

  border: unset;

}



#topper li:last-child a{

  font-weight: 700;

  color: var(--primary-orange);

  background-color: white;

  padding: 10px 25px 10px 25px;

  border: 2px solid var(--primary-orange);

  border-radius: 5px;

}



#topper li:last-child a:hover{

  color: white;

  background-color: var(--primary-orange);

  transition: 0.3s;

}



#bottom{

  background-color: var(--primary-green);

  height: 60px;

}



#bottom li a{

  color: white;

  font-size: 22px;

}



#bottom li:first-child{

  padding-right: 50px;

  margin-right: 50px;

  border-right: 1px solid white;

}



#bottom .dropdown ul.left, #bottom .dropdown ul.right {

  display: block;

  position: absolute;

  right: 20px;

  top: calc(100% + 30px);

  margin: 0;

  padding: 25px 0;

  z-index: 99;

  opacity: 1;

  visibility: hidden;

  background: #fff;

  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);

  transition: 0.3s;

  width: 300px;

  text-align: center;

}



#bottom .dropdown ul.right {

  width: 380px;

  right: unset;

}



#bottom .dropdown ul.right li, #bottom .dropdown ul.left li{

  padding-right: unset;

  margin-right: unset;

  margin-bottom: 18px;

}



#bottom .dropdown ul.right a, #bottom .dropdown ul.left a{

  font-size: 15.5px;

  color: var(--primary-green);

}



#bottom .dropdown ul.right a:hover, #bottom .dropdown ul.left a:hover{

  color: var(--primary-orange);

  transition: 0.2s;

}



#bottom .dropdown:hover > ul {

  opacity: 1;

  top: 120%;

  visibility: visible;

}



/* Mobile Navigation */

.mobile-nav-toggle {

  position: fixed;

  right: 15px;

  top: 15px;

  z-index: 9998;

  border: 0;

  background: none;

  font-size: 24px;

  transition: all 0.4s;

  outline: none !important;

  line-height: 1;

  cursor: pointer;

  text-align: right;

}



.mobile-nav-toggle i {

  color: var(--primary-orange);

}



.mobile-nav {

  position: fixed;

  top: 55px;

  right: 15px;

  bottom: 15px;

  left: 15px;

  z-index: 9999;

  overflow-y: auto;

  background: #fff;

  transition: ease-in-out 0.2s;

  opacity: 0;

  visibility: hidden;

  border-radius: 10px;

  padding: 10px 0;

}



.mobile-nav * {

  margin: 0;

  padding: 0;

  list-style: none;

}



#top_mobile_menu.mobile-nav a {

  display: block;

  position: relative;

  color:#799c1e;

  padding: 10px 20px;

  font-weight: 500;

  outline: none;

}



#top_mobile_menu.mobile-nav a:hover{

  border-bottom: 3px solid #799c1e;

  padding-bottom: 20px;

}



.mobile-nav-overly {

  width: 100%;

  height: 100%;

  z-index: 9997;

  top: 0;

  left: 0;

  position: fixed;

  background: rgba(29, 28, 31, 0.6);

  overflow: hidden;

  display: none;

  transition: ease-in-out 0.2s;

}



.mobile-nav-active {

  overflow: hidden;

}



.mobile-nav-active .mobile-nav {

  opacity: 1;

  visibility: visible;

}



.mobile-nav-active .mobile-nav-toggle i {

  color: var(--primary-orange);

}



@media screen and (max-width: 1200px) {



  #topper li{

    margin-right: 18px;

  }



  #topper li a{

    font-size: 15px;

  }



  #bottom li a{

    font-size: 20px;

  }



  #bottom li:first-child{

    padding-right: 25px;

    margin-right: 25px;

  }



  #bottom .dropdown ul.right a, #bottom .dropdown ul.left a{

    font-size: 13px;

  }



  #bottom .dropdown ul.right {

    width: 300px;

    right: 20px;

  }



  #bottom .dropdown ul.left {

    right: -20px;

  }

}



@media screen and (max-width: 991px) {



  #topper {

    height: 380px;

    text-align: center;

  }



  #topper li{

    height: 50px;

    padding-bottom:unset;

    margin-right: unset;

    margin-bottom: 15px;

  }



  #topper li a {

    font-size: 22px;

    padding-bottom: 15px;

    margin-right: unset;

    display: block;

  }



  #topMenu {

    margin-left: unset;

    align-items: center;

  }



  #bottom{

    height: 120px;

  }



  #bottom li:first-child {

    padding-right: unset;

    margin-right: unset;

    border-right: none;

  }



  #topper li:last-child a{

    margin-top: 15px;

  }



  #header #logo{

    width: 100%;

    display: flex;

    justify-content: center;

    border-right:unset;

    padding-right: unset;

  }



}



/*--------------------------------------------------------------

# theSystem

--------------------------------------------------------------*/

#theSystem .container{

  margin-top: 150px;

}



#theSystem h1{

  color: var(--primary-green);

  font-weight: 800;

  font-size: 48px;

}



#highlights{

  height: 85px;

  padding-bottom: 15px;

}



#theHighlights{

  width: 33.3333%;

  font-weight: 700;

  color: var(--primary-green);

  border-right: 1px solid var(--primary-green);

}



#theHighlights:last-child{

  border-right: unset;

}



#theHighlights img{

  width: 30px;

}



#theHighlights span{

  text-align: center;

  font-size: 10.5px;

}



#produto{

  position: relative;

  margin-top: 130px;

  height: 580px;

}



#slides{

  overflow: hidden;

  height: auto;

}



#slides div{

  width: 100%;

  flex: 0 0 auto;

}



#slides div img{

  max-height: 500px;

}



#previews{

  overflow: auto;

  margin-top: 1px;

}



#previews a{

  border: 1px solid var(--primary-orange);

  margin-right: 4px;

  display: block;

}



#previews a:last-child{

  margin-right: 0px;

}



#previews a img{

  width: 76px;

  height: 76px;

}



#produtoInfo{

  padding-left: 20px;

  text-align: left;

}



#infoAlign{

  align-self: baseline;

}



#nVendas{

  color: #595959;

  font-weight: 300;

  font-style: italic;

  font-size: 15px;

}



#ratingFourStars img{

  width: 118px;

}



#maisVendidos{

  font-weight: 700;

  padding: 3px 7px 3px 7px;

  border-radius: 5px;

  background-color: var(--primary-orange);

  color: white;

  font-size: 13px;

  margin-right: 5px;

}



#precoAntes{

  font-weight: 700;

  font-size: 18px;

  color: #817f7f;

  text-decoration: line-through;

}



#precopor, #precoAtual{

  font-size: 20px;

  font-weight: 800;

  color: var(--primary-orange);

}



#precoAtual{

  font-size: 100px;

  margin-top: -30px;

  margin-left: -7px;

  margin-bottom: -10px;

  width: 100%;

}



#produtoInfo img{

  margin-bottom: 10px;

}



#produtoInfo a{

  width: 100%;

}



@media screen and (max-width: 1200px) {



  #precoAtual{

    font-size: 85px;

  }



  #precoAntes {

    font-size: 18px;

  }



  #precopor{

    font-size: 23px;

    align-self: flex-start;

  }



}



@media screen and (max-width: 991px) {



  #produto{

    height: auto;

  }



  #precopor, #precoAntes{

    font-size: 35px;

    align-self: flex-start;

  }



  #precoAntes{

    font-size: 28px;

  }



  #precoAtual{

    font-size: 160px;

  }



  #produtoInfo{

    padding-left: unset;

    padding-top: 10px;

  }



  #nVendas, #ratingFourStars, #maisVendidos{

    align-self: baseline;

  }



  #ratingFourStars, #maisVendidos, #precoAntes{

    margin-top: 3px;

  }



  #ratingFourStars img{

    margin-bottom: unset;

  }



  #previews a img{

    height: unset;

  }



}



@media screen and (max-width: 768px) {



  #theHighlights {

    margin-top: 25px;

    padding-bottom: 25px;

  }



  #theHighlights:last-child{

    border-bottom: unset;

  }



  #highlights{

    margin-bottom: 50px;

  }



  #produto{

    margin-top: 50px;

  }



  #precoAtual {

    font-size: 7.5em;

  }



  #mercadoPago, #compraSegura{

    margin-bottom: 20px !important;

  }



}



@media screen and (max-width: 560px) {



  #precoAntes {

    font-size: 18px;

  }



  #precoAtual {

    font-size: 74px;

    width: 100%;

  }



  #theSystem h1{

    font-size: 45px;

  }



}



/*--------------------------------------------------------------

# garantia

--------------------------------------------------------------*/

#garantia{

  margin-top: 130px;

  margin-bottom: 130px;

}



#garantia .container{

  height: 330px;

  background-color: #fafafa;

  border-radius: 5px;

  border: 1px solid var(--primary-orange);

}



#garantia .container img{

  width: 232px;

}



#garantiaInfo{

  color: var(--primary-green);

  margin-left: 25px;

}



#garantiaInfo h3{

  font-size: 35px;

  font-weight: 800;

  padding-bottom: 20px;

  margin-bottom: 20px;

  border-bottom: 2px solid var(--primary-green);

}



@media screen and (max-width: 992px) {



  #garantia .container {

    height: unset;

    padding-top: 35px;

    padding-bottom: 35px;

  }



  #garantiaInfo h3, #garantiaInfo p{

    text-align: center;

  }



}



@media screen and (max-width: 768px) {



  #garantiaInfo {

    margin-left: unset;

  }



}



/*--------------------------------------------------------------

# apresentacaoVideo

--------------------------------------------------------------*/

#apresentacaoVideo #header{

  width: 100%;

}



#video{

  margin-top: 100px;

  position: relative;

}



#aprVd_bay{

  align-self: center;

  width: 450px;

  margin-top: 150px;

  margin-bottom: 150px;

}



@media screen and (max-width: 480px) {



  #aprVd_bay{

    width: 100%;

  }



}



/*--------------------------------------------------------------

# descricao

--------------------------------------------------------------*/

#descricao #header{

  margin-bottom: 100px;

}



#paragrafos{

  color: var(--primary-green);

  font-size: 18px;

  margin-bottom: 100px;

}



#descricao details{

  background-color: #fafafa;

  margin-bottom: 10px;

  border-radius: 5px;

  border: 1px solid var(--primary-orange);

  font-size: 20px;

  width: 100%;

  box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 20%);

  padding: 17px;

  margin-bottom: 20px;

}



#insideDtl{

  margin-left: 20px;

  font-size: 25px;

  font-weight: 700;
  text-transform: uppercase;

  color: var(--primary-green);

}



#descricao details summary{

  display: flex;

  align-items: center;

  position: relative;

}



#descricao summary:after {

  transition: 0.9s;

  content: "";

  font-size: 20px;

  background-image: url("../img/lp-offline/icons/mais-detalhes.png");

  background-repeat: no-repeat;

  background-color: var(--primary-orange);

  background-position: center;

  font-size: 20px;

  font-weight: bold;

  padding: 0;

  text-align: center;

  width: 45px;

  height: 45px;

  position: absolute;

  right: 0px;

}



#descricao details[open] summary:after {

  background-image: url("../img/lp-offline/icons/menos-detalhes.png");

  background-repeat: no-repeat;

  background-position: center;

}



#descricao details ul{

  padding-top: 50px;

  padding-left: 0px;

  margin-bottom: 30px;

}



#descricao details ul li{

  font-style: italic;

  font-weight: 400;

  color: var(--primary-green);

  padding: 27px 0px 27px 0px;

  border-top: 1px solid var(--primary-orange);

}



#descricao details ul li:last-child{

  border-bottom: 1px solid var(--primary-orange);

}



#descricao details ul li img{

  margin-right: 15px;

}



/*--------------------------------------------------------------

# opiniaoVideo

--------------------------------------------------------------*/



#opiniaoVideo #header{

  margin-bottom: 130px;

}



#depoimentoBox{

  position: relative;

  width: 540px;

  height: 304px;

  margin-bottom: 35px;

  border: 1px solid var(--primary-orange);

}



#depoimentoBox a{

  z-index: 9;

  left: 43%;

}



#depoimentoBox h4{

  z-index: 10;

  position: absolute;

  bottom: 0px;

  background-color: rgba(255, 255, 255, 0.9);

  font-weight: 700;

  color: var(--primary-orange);

  padding: 10px;

  margin: 5px;

}



#depoimentoBox.youtube{

  overflow: hidden;

  cursor: pointer;

}



#depoimentoBox.youtube iframe {

  height: 101%;

  width: 101%;

  top: 0px;

  left: 0px;

  position: absolute;

}



#depoimentoBox.youtube img{

  position: absolute;

  width: 100%;

  left: 0;

  top: -16.82%;

}



#depoimentoBox.youtube a img{

  width: 22px;

  left: unset;

  top: unset;

}



#depoimentoBox.youtube img,

#depoimentoBox.youtube .play-button {

  cursor: pointer;

}



@media screen and (max-width: 1200px) {



  #depoimentoBox{

    position: relative;

    width: 460px;

    height: 260px;

  }



}



@media screen and (max-width: 480px) {



  #depoimentoBox{

    position: relative;

    width: 355px;

    height: 200px;

  }



  #depoimentoBox h4{

    font-size: 13px;

  }



}



/*--------------------------------------------------------------

# faq

--------------------------------------------------------------*/

#faq #container span{

  font-size: 25px;

  margin-bottom: 50px;

}



#faq #container h3{

  margin-bottom: 100px;

}



#faq #container details{

  font-size: 20px;

  width: 100%;

  box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 20%);

  border-radius: 5px;

  padding: 17px;

  text-align: center;

  margin-bottom: 20px;

}



#faq #container details div{

  display: flex;

  justify-content: space-between;

  align-items: center;

}



#faq #container details summary{

  display: flex;

}



#faq #container details summary div{

  width: 100%;

}



#faq #container details summary img:first-child{

  margin-right: 25px;

}



#faq #container details summary img:last-child{

 margin: 0px 0px 0px 25px;

}



#faq #container details p{

  margin-top: 50px;

  color: #799c1e;

}



#faq #container summary:after {

  transition: 0.9s;

   content: "";

   background-image: url("../img/lp-offline/icons/saiba-mais-perguntas-frequentes.png");

   background-repeat: no-repeat;

   background-position: center;

   font-size: 20px;

   font-weight: bold;

   margin: 0 5px;

   padding: 0;

   width: 20px;

   text-align: center;

}



#faq #container details[open] summary:after {

  transition: 0.5s;

  background-image: url("../img/lp-offline/icons/saiba-mais-perguntas-frequentes2.png");

  background-repeat: no-repeat;

  background-position: center;

}



#insideDtl{

  width: 100% !important;

  margin-bottom: unset !important;

}



@media screen and (max-width: 480px) {



  #insideDtl{

    margin-left: unset;

    font-size: 17px;

    padding-right: 15px;

    padding-left: 15px;

  }



  #faq #container span{

    font-size: 15px;

  }



  #faq #container details summary img:first-child {

    margin-right: unset;

  }



}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
footer{
  background-image: url("../img/lp-offline/footer-back-image.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #799c1e;
  color: white;

}
#footer_container{
  height: 500px;
  display: flex;
  margin-top: 100px;

}

#footer_top{
  padding: 40px 0px 40px 0px;
  margin-bottom: 70px;
  border-bottom: 2px solid white;
}

#ft_ste_seguro{

  height: 100px;

  align-items: center;

}



#ft_ste_seguro img{

  margin-right: 20px;

}



#ft_ste_seguro_content span:first-child{

  font-size: 25px;

}



#ft_ste_seguro_content span:last-child{

  font-size: 13px;

}



.borderWhite{

  border-right: 2px solid white;

}



.littleBox{

  width: 300px;

}



.bigBox{

  width: 486px;

}



#footer_content{

  color: white;

}



#left_content{

  border-right: 2px solid white;

}



#left_content ul{

  margin: 20px 0px 20px 0px;

  list-style: none;

  padding: 0px 0px 0px 0px;

}



#left_content ul li a{

  font-weight: 600;

  color: white;

  font-size: 20px;

  text-decoration: none;

}



#left_content span{

  font-weight: 600;

  font-size: 20px;

}

#social{

  margin-top: 20px;

  width: 50%;

  padding: 10px;

}



#social a{

  display: flex;

  align-items: center;

}



#right_content ul{

  list-style: none;

  text-align: center;

}



#right_content ul li:first-child{

  font-weight: 700;

  font-size: 23px;

}



#right_content ul li{

  font-weight: 300;

  font-size: 17px;

  font-style: italic;

}



#right_content ul li a{

  text-decoration: none;

  color: white;

  font-size: 19px;

}



#the_last_section{
  height: 100px;
  background-color: white;
  color: black;
  margin-top: 100px;
}



#developer{

  height: 100%;

  font-size: 13px;

}



#developer a{

  text-decoration: none;

  color: black;

}



@media screen and (max-width: 992px){



  #footer_container{

    height: 800px;

  }



  #footer_content {

    color: white;

    height: 800px;

  }



  .littleBox{

    width: 100%;

  }



  .bigBox{

    width: 100%;

  }



  .borderWhite{

    border: none;

  }



  #social {

    padding: 10px;

  }



  #left_content{

    border-right:none;

    margin-bottom: 30px;

  }



  #right_content ul{

    padding-left: 0px;

  }



}



@media screen and (max-width: 992px){



  #footer_container{

    padding-top: 75px;

    padding-bottom: 75px;

    height: 900px;

  }



}