@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

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

body .navegacao { flex-direction: column; top: 40%; left: 0;}
body .navegacao a { width: 50px; height: 60px;}
body .navegacao a.home { background-image: url('../../imagens/app/navegacao-home.png?v1');}
body .navegacao a.auth { background-image: url('../../imagens/app/navegacao-auth.png?v1');}
body .navegacao a.suporte { background-image: url('../../imagens/app/navegacao-suporte.png?v1');}
body .navegacao a:hover { background-color: rgb(90 90 90 / 15%);}

#header .linha1 { justify-content: center; align-items: center; gap: 50px;}
#header .links .um { float: left; padding: 5px 10px;}

#app .titulo h1 { font-size: 1.5em;}
#app .titulo h2 { font-size: 1em;}
#app .erro404 { padding: 41px 0 61px;}
#app .erro404 .nome { font-size: 4em;}
#app .erro404 .numero { margin: 20px 0; font-size: 8em;}
#app .erro404 .numero b { padding: 0 20px; outline: 2px solid rgb(150 150 150);}
#app .erro404 .infor { font-size: 1.5em;}
#app .dek-esconder { display: none;}

#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){
  body .navegacao { flex-direction: row; justify-content: space-around; top: auto; width: 100%; bottom: 0; left: 0;}
  body .navegacao a { height: 45px;}

  #footer { margin: 0 0 45px;}
}
@media only screen and (max-width: 800px){
  #app .mob-esconder { display: none;}
  #app .dek-esconder { display: block;}
}
@media only screen and (max-width: 500px){
  #app .erro404 .nome { font-size: 3em;}
  #app .erro404 .numero { font-size: 5em;}
  #app .erro404 .infor { font-size: 1em;}
}