@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

body .oswald { font-family: "Oswald", sans-serif;}

#loja { float: left; width: 100%; min-height: 500px;}
#loja .titulo { padding: 11px 5px; font-size: 1.2em; border-bottom: 1px solid rgb(90 90 90 / 20%);}

#loja .carousel { display: none;}
#loja .carousel .owl { float: left; width: 100%; position: relative;}
#loja .carousel .owl-carousel { float: left; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; display: none; }
#loja .carousel .owl-carousel.owl-loaded { display: block;}
#loja .carousel .owl-carousel.owl-loading { opacity: 0; display: block;}
#loja .carousel .owl-stage-outer { display: flex; position: relative; overflow: hidden;}
#loja .carousel .owl-stage { display: flex;}
#loja .carousel .owl-item { display: flex; float: left; position: relative; -webkit-tap-highlight-color: transparent;}
#loja .carousel .owl-nav { position: absolute; width: 100%; top: 50%; left: 0; margin: -15px 0 0 0;}
#loja .carousel .owl-nav button { position: absolute; width: 30px; height: 30px; top: 0; opacity: 0.7; background-position: 50%; background-repeat: no-repeat; background-color: transparent; cursor: pointer; outline: 0; border: 0; font-size: 0;}
#loja .carousel .owl-nav button.owl-prev { left: -40px;}
#loja .carousel .owl-nav button.owl-next { right: -40px;}
#loja .carousel .owl-nav button:hover { opacity: 1;}
#loja .carousel .owl-nav button:hover { opacity: 0.3; cursor: default;}
#loja .carousel .owl-nav.disabled button:hover { opacity: 0.3;}
#loja .carousel .owl-dots { display: none;}
#loja .carousel .no-js .owl-carousel { display: block;}

#loja .produto .imagem { height: 1px;}
#loja .produto .imagem .fundo { background-color: rgb(90 90 90 / 10%);}
#loja .produto .detalhes h2 { font-size: 1em; line-height: 1.1; overflow: hidden;}
#loja .produto .detalhes h3 { font-size: 1.1em;}
#loja .produto .detalhes h4 { font-size: 1em;}
#loja .produto .detalhes h4 i { font-style: normal; text-decoration: line-through;}

#loja .erro404 { padding: 41px 0 61px;}
#loja .erro404 .nome { font-size: 5em;}
#loja .erro404 .numero { margin: 20px 0; font-size: 12em;}
#loja .erro404 .numero b { padding: 0 20px; outline: 2px solid rgb(150 150 150);}
#loja .erro404 .infor { font-size: 2em;}

#loja .editou { font-size: 18px; line-height: 1.4;}
#loja .editou h1 { text-transform: uppercase; font-weight: bold;}
#loja .editou h2 { text-transform: uppercase; font-weight: bold;}
#loja .editou h3 { text-transform: uppercase; font-weight: bold;}
#loja .editou iframe { max-width: 100%;}
#loja .editou img { max-width: 100%;}
#loja .editou a { color: rgb(0 150 190);}
#loja .editou a:hover { text-decoration: underline;}

#loja .compartilhar { padding: 8px 0; margin: 11px 0 0; border-top: 1px solid rgb(90 90 90 / 40%); border-bottom: 1px solid rgb(90 90 90 / 40%); font-size: 0.9em;}
#loja .compartilhar .nome { padding: 15px 0; line-height: 0;}
#loja .compartilhar .sociais { width: 30px; height: 30px; background: rgb(220 0 0) 50% no-repeat;}
#loja .compartilhar .sociais.whatsapp { background-image: url('../../imagens/loja/footer-sociais-whatsapp.png?v1'); background-size: 60%;}
#loja .compartilhar .sociais.facebook { background-image: url('../../imagens/loja/footer-sociais-facebook.png?v1'); background-size: 30%;}
#loja .compartilhar .sociais.twitter { background-image: url('../../imagens/loja/footer-sociais-twitter.png?v2'); background-size: 50%;}
#loja .compartilhar .sociais:hover { background-color: rgb(5 5 5);}

#wfixo { width: 70px; height: 70px; right: 20px; bottom: 20px; z-index: 20; background: rgb(8 131 73) url('../../imagens/loja/wfixo.png?v2') 50% no-repeat;}

@media only screen and (max-width: 1000px){
  #loja .titulo { padding: 10px 0 5px;}
  #loja .carousel .owl-nav button { display: none;}
}
@media only screen and (max-width: 700px){
  #wfixo { width: 50px; height: 50px; right: 5px; bottom: 55px;}
}
@media only screen and (max-width: 500px){
  #loja .erro404 .nome { font-size: 4em;}
  #loja .erro404 .numero { font-size: 6em;}
  #loja .erro404 .infor { font-size: 1em;}
}