@charset "utf-8";

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

body .clear .pontinhos.abrir { background-image: url('../../imagens/app/pontinhos-abrir-preto.png?v3');}
body .clear .pontinhos.fechar { background-image: url('../../imagens/app/pontinhos-fechar-preto.png?v3');}
body .dark .pontinhos.abrir { background-image: url('../../imagens/app/pontinhos-abrir-branco.png?v3');}
body .dark .pontinhos.fechar { background-image: url('../../imagens/app/pontinhos-fechar-branco.png?v3');}

body .anton { font-family: "Anton", sans-serif;}

body .pontinhos { background-position: 50% 0; background-repeat: no-repeat;}
body .pontinhos:hover { background-position: 50% -30px;}
body .suspenso .um { outline: 1px solid rgb(255 255 255 / 20%); outline-offset: -1px;}
body .suspenso .um:hover { background-color: rgb(90 90 90 / 50%);}

#app .titulo { margin: 0 0 11px;}
#app .titulo h1 { font-size: 1.5em;}
#app .titulo h2 { font-size: 1.1em;}

#app .carousel { display: none;}
#app .carousel .owl { float: left; width: 100%; position: relative;}
#app .carousel .owl-carousel { float: left; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; display: none; }
#app .carousel .owl-carousel.owl-loaded { display: block;}
#app .carousel .owl-carousel.owl-loading { opacity: 0; display: block;}
#app .carousel .owl-stage-outer { display: flex; position: relative; overflow: hidden;}
#app .carousel .owl-stage { display: flex;}
#app .carousel .owl-item { display: flex; float: left; position: relative; -webkit-tap-highlight-color: transparent;}
#app .carousel .owl-nav { display: none; position: absolute;}
#app .carousel .owl-nav.disabled button { opacity: 0.7; cursor: default;}
#app .carousel .owl-nav.disabled button:hover { opacity: 0.7; cursor: default;}
#app .carousel .owl-dots { display: none;}
#app .carousel .no-js .owl-carousel { display: block;}

#app .compartilhar { font-size: 0.9em;}
#app .compartilhar .nome { padding: 15px 0; line-height: 0;}
#app .compartilhar .sociais { background: rgb(26 33 47) 50% no-repeat;}
#app .compartilhar .sociais.whatsapp { background-image: url('../../imagens/app/compartilhar-whatsapp.png?v1'); background-size: 60%;}
#app .compartilhar .sociais.facebook { background-image: url('../../imagens/app/compartilhar-facebook.png?v1'); background-size: 30%;}
#app .compartilhar .sociais.twitter { background-image: url('../../imagens/app/compartilhar-twitter.png?v1'); background-size: 50%;}
#app .compartilhar .sociais:hover { background-color: rgb(5 5 5);}

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

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

#app .tocavideo .pp.play { background: url('../../imagens/app/tocavideo-play.png?v2') 50% no-repeat;}
#app .tocavideo .pp.pause { background: url('../../imagens/app/tocavideo-pause.png?v2') 50% no-repeat;}
#app .tocavideo .muted { top: 5px; right: 5px;}
#app .tocavideo .muted.sim { background: url('../../imagens/app/tocavideo-muted-sim.png?v2') 50% no-repeat;}
#app .tocavideo .muted.nao { background: url('../../imagens/app/tocavideo-muted-nao.png?v2') 50% no-repeat;}
#app .tocavideo .barra { bottom: 0; left: 0; height: 5px; background-color: rgb(5 5 5 / 5%);}
#app .tocavideo .progresso { width: 0%; top: 0; left: 0; height: 100%; background-color: rgb(0 132 255 / 50%);}

@media only screen and (max-width: 1000px){
  #app .titulo { margin: 0 0 5px;}
}
@media only screen and (max-width: 500px){
  #app .erro404 .nome { font-size: 4em;}
  #app .erro404 .numero { font-size: 6em;}
  #app .erro404 .infor { font-size: 1em;}
}