/* Audiowide - latin-ext */
@font-face {
      font-family: 'Audiowide';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/audiowide/v20/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Audiowide - latin */
@font-face {
      font-family: 'Audiowide';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/audiowide/v20/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.LogoEmpresa{position: fixed;display: block;overflow: visible;z-index:2;float: none;
      top:300px;left: 3%;margin: 0px;padding: 20px;
      width: 100%;min-width: 100px;max-width: 150px;height: auto;min-height: auto;max-height: 80px;
      opacity: 1;background: none;background-color: #FFFFFF;border: 12px ridge #000000;}

#Bandeira {position: fixed;display: block;overflow: visible;z-index:2;float: none;
      top:280px;right: 10%;margin: 0px;padding: 0px;
      width: 200px;height: 350px; border: none;background-color: none; }

#Fio-Bandeira {position: absolute;display: block;overflow: visible;z-index:1;float: none;
      top:30px;left: 40px;margin: 0px;padding: 0px;rotate: 45deg;
      width: 120px;height: 120px; 
      border: none;border-left: 3px ridge #686868;border-top: 3px ridge #686868; }

#Barra-Bandeira {position: absolute;display: block;overflow: visible;z-index:1;float: none;
      top:89px;left: 17px;margin: 0px;padding: 0px;
      width: 170px;height: 5px; 
      border: none;border-top: 5px ridge #686868;}

#quadro-vendas {position: absolute;display: block;overflow: visible;z-index:2;float: none;
      top:90px;left: 25px;margin: 0px;padding: 0px;padding-top: 20px;cursor: pointer;
      width: 155px;height: 150px; border: none; background-color: #5386E4;
      font-family: 'Audiowide';font-size: 150%;text-align: center;color: #FFFFFF;}

#quadro-vendas p{font-family: Arial, Helvetica, sans-serif;margin-top: 20px; font-size: 50%;text-align: center;color: #FFFFFF;cursor: pointer;}

#triangulo-para-baixo {position: absolute;display: block;overflow: visible;z-index:2;float: none;
      top:260px;left: 25px;margin: 0px;padding: 0px;cursor: pointer;
      width: 0;height: 0; border-left: 78px solid transparent;
      border-right: 78px solid transparent; border-top: 78px solid #5386E4;}

#QuadroMenu {position: fixed;display: block;overflow: hidden;z-index:2;float: none;
            top:1px;left:1%;margin: 0px;opacity: 1;
            width: 97%;min-width: 350px;max-width: 97%;height: 130px;min-height: auto;max-height: 130px;
            background: none;background-color: none;border: none;}
            
#QuadroMenu .MenuCentral {position: relative;display: block;white-space: nowrap;
                        margin: 0px;margin-left: auto;margin-right: auto;
                        overflow: scroll; scrollbar-width: 10px;overflow-y: hidden; overflow-x: auto; 
                        scrollbar-color: #177214 #000000;border: none;
                        width: 79%;min-width: auto;max-width: 1920px;
                        height: auto;min-height: 90%;max-height: 97%;}

#QuadroMenu button{position: relative;display: inline-block;overflow: hidden;z-index:2;float: none;cursor: pointer;
                  top:auto;left:0px;margin: 0px;margin-left: 1%; margin-top: 10px;opacity: 1;
                  width: 20%;min-width: auto;max-width: 200px;height: 95px;min-height: auto;max-height: 95px;
                  background: none;background-color: #413f3f;border: 1px solid #413f3f;border-radius: 10px;
                  font-size: 120%;text-align: center;white-space: normal;line-height: 1.8;}

#QuadroMenu button:hover {transform: scale(1.03);box-shadow: 2px 2px 20px;position: relative;z-index: 2;}

#QuadroMenu .Cor0 {color: #FFFFFF;}

#QuadroMenu .Cor1 {color: #e4cc60;}

#QuadroMenu .Cor2 {color: #479b6a;}

#QuadroMenu .Cor3 {color: #5681d1;}

#QuadroMenu .Cor4 {color: #c9503a;}

#QuadroMenu .Cor5 {color: #ffa500;}

#fundotransp {display:none;position:fixed;top: 0px;z-index:5;padding: 0px;
            width: 100%;min-width: 800px;height: 100%;min-height:600px;
            background-color: #E8E8E8;opacity:0.4;filter:alpha(opacity=40);border: none;}

#MsgAguarde {display:none;position: fixed; top:20%;left: 50%;z-index:12;
            margin: 0px;margin-top: 160px;margin-left: -150px;padding: 20px;
            width: 250px;min-width: 30px;max-width: 250px;
            height: auto;min-height: 30px;max-height: auto;
            background-color: #E8E8E8;background: #E8E8E8;
            opacity:1;filter:alpha(opacity=100);
            color: #000000;font-size: 120%;font-weight: normal;text-align:center;
            border: none;}

#Parede {position: fixed;display: block;overflow: hidden;z-index:1;float: none;
      top:130px;left:0px;margin: 0px;opacity: 1;
      width: 100%;min-width: auto;max-width: 100%;height: 90%;min-height: 100%;max-height: 99%;
      background: none;background-color: #d8d4d3;border: none;
      background-image: url("imagens/grafiato.jpg");background-repeat: repeat;
      background-size: 30% 90%;
}

#Fundo {position: absolute;display: block;overflow: hidden;z-index:1;float: none;
      top:0px;left:0px;margin: 0px;opacity: 0;
      width: 100%;min-width: auto;max-width: 100%;height: 100%;min-height: 100%;max-height: 100%;
      background: none;background-color: none;border: none;
      animation: ApareceFundo 2s 1; animation-fill-mode: forwards;}
@keyframes ApareceFundo { from {opacity: 0;} to {opacity: 1;} }

#LogoAndroidTV {position: relative;display: block;overflow: hidden;z-index:1;float: none;
      top:30%;left:0px;margin: 0px;margin-left: auto;margin-right: auto; opacity: 1;
      width: 55%;min-width: auto;max-width: 55%;height: 20%;min-height: auto;max-height: 20%;
      background: none;background-color: none;border: none;
      background-image: url("imagens/LogoAndroidTV.png");background-repeat: no-repeat;
      background-size: 100% 100%;
}

#TracoAndroidTV {position: absolute;display: block;overflow: hidden;z-index:1;float: none;
      top:54%;left:25%;margin: 0px;margin-left: auto;margin-right: auto; opacity: 1;
      width: 50px;min-width: auto;max-width: 50px;height: 10px;min-height: auto;max-height: 10px;
      background: none;background-color: none;border: none;border-top: 2px solid #1b812c;
      animation: MovtracoATV 3s infinite;
}
@keyframes MovtracoATV { 50% {left: 68%;} }

#VinhetaSTVLogo{display: block; position: absolute; overflow: hidden; z-index: 3;
      float: none; top: calc(40% - 82px); left: calc(50% - 75px); 
      margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
      width: 150px;min-width: auto;max-width: auto;height: 88px;min-height: auto;max-height: auto;
      background-image: url('imagens/logo.png');background-repeat: no-repeat;background-size: 100% 100%;
      border: none;}

#VinhetaSTVSlogan {display: block; position: absolute; overflow: hidden;
      float: none; top: 45%; left: 0px; z-index: 2;
      width: 100%; min-width: 255px; height: auto;
      margin: 0px;margin-bottom: 20px;padding: 10px;
      border: none; background: none; background-color: none;
      font-family: Audiowide;color: #669edd;font-size: 200%;text-align: center;
      animation: fadeColorSlogan 5s 1; animation-fill-mode: forwards;}

@keyframes fadeColorSlogan {
      from { color: #5f5b5b; font-size: 100%;}
      to { color: #ffffff; font-size: 250%;}  
}
     
.Titulo {display: block; position: absolute; overflow: hidden;
      float: none; top: 3%; left: 0px; z-index: 2;
      width: 100%; min-width: 255px; height: auto;
      margin: 0px;padding: 0px;
      border: none; background: none; background-color: none;
      font-family: Arial;color: #FFFFFF;font-size: 300%;text-align: center;font-weight: bold;
      animation: fadeTitNoticia 3s 1; animation-fill-mode: forwards;opacity: 0;}

@keyframes fadeTitNoticia { from {opacity: 0;} to {opacity: 1;} }

.SubTitulo {display: block; position: absolute; overflow: hidden;
      float: none; top: 15%; left: 0px; z-index: 2;
      width: 100%; min-width: 255px; height: auto;
      margin: 0px;margin-bottom: 20px;padding: 10px;
      border: none; background: none; background-color: none;
      font-family: Arial;color: #FFFFFF;font-size: 200%;text-align: center;
      animation: fadeTitNoticia 3s 1; animation-fill-mode: forwards;opacity: 0;}

.LogNoticias {display: block; position: absolute; overflow: hidden; z-index: 3;
      float: none; margin: 0px;padding: 0px;opacity: 0;
      width: 14%;min-width: auto;max-width: 14%;height: 23%;min-height: auto;max-height: 23%;
      background-repeat: no-repeat;background-size: 100% 100%;border: none;}

@keyframes fadeLogNoticia { from {opacity: 0;} to {opacity: 1;} }

#LogNotG1 {top: 35%; left: 10%;background-image: url('imagens/g1.jpg');
      animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;}

#LogNotUOL {top: 35%; left: 40%; 
      background-image: url('imagens/uol.png');
      animation: fadeLogNoticia 10s 1;animation-fill-mode: forwards;}

#LogNotCNN {top: 35%; left: 70%; 
            background-image: url('imagens/cnnlogo.jpeg');
            animation: fadeLogNoticia 15s 1;animation-fill-mode: forwards;}
      
#LogNotComp {top: 66%; left: 10%;background-image: url('imagens/compartilhar.png');
             animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;}

#LogNotCine {top: 66%; left: 40%; 
             background-image: url('imagens/adorocinema.jpg');
             animation: fadeLogNoticia 10s 1;animation-fill-mode: forwards;}

#LogNotR7 {top: 66%; left: 70%; 
            background-image: url('imagens/r7logo.png');
            animation: fadeLogNoticia 15s 1;animation-fill-mode: forwards;}

#TitDicas {top: 0px;font-size: 400%;color: #FF0000;font-family: Pacifico, serif;text-decoration: underline;}

.TextDicas {display: block; position: absolute; overflow: hidden; z-index: 3;
      float: none; margin: 0px;padding: 0px;opacity: 0;
      width: auto;min-width: auto;max-width: auto;height: auto;min-height: auto;max-height: auto;
      font-family: 'Courier New', Courier, monospace;font-size: 300%;}

#TxtShow {top: 23%; left: 10%;animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;color: #1b812c;}

#TxtTeatro {top: 31%; left: 33%;animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;color: #fdfdfd;}
      
#TxtPalestra {top: 42%; left: 60%;animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;color: #59df6a;}

#TxtCuriosidades {top: 50%; left: 5%;animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;color: #2597f4;}

#TxtManutencao {top: 63%; left: 40%;animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;color: #ce7726;}
      
#TxtSeguranca {top: 74%; left: 10%;animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;color: #f5ff3d;}

#TxtMutioMais {top: 83%; left: 50%;animation: fadeLogNoticia 5s 1;animation-fill-mode: forwards;color: #a43aff;}

#Panfleto{display: block; position: absolute; overflow: hidden; z-index: 3;
      float: none; top: 36%; left: 25%; 
      margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
      width: 400px;min-width: auto;max-width: auto;height: 227px;min-height: auto;max-height: auto;
      background-image: url('imagens/divulgar.png');background-repeat: no-repeat;background-size: 100% 100%;
      border: none;}

#TitInst {font-size: 350%;font-family: Yatra One, serif;font-weight: 400;font-style: normal;}

#Institucional {display: block; position: absolute; overflow: hidden; z-index: 3;
            float: none; top: 43%; left: 23%; 
            margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
            width: 400px;min-width: auto;max-width: auto;height: 227px;min-height: auto;max-height: auto;
            background-image: url('imagens/recepcao.jpg');background-repeat: no-repeat;background-size: 100% 100%;
            border: none;}

#TitMusica {font-size: 350%;font-family: Pacifico, serif;color: #ff6c3e;}

#SubTitMusica {top: 25%;}

#Musica {display: block; position: absolute; overflow: hidden; z-index: 3;
            float: none; top: 50%; left: 0px; 
            margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
            width: 100%;min-width: auto;max-width: auto;height: 130px;min-height: auto;max-height: auto;
            background-image: url('imagens/notasmusicais.png');background-repeat: no-repeat;background-size: 100% 100%;
            border: none;}
            
#Anuncio{display: block; position: absolute; overflow: hidden; z-index: 3;
      float: none; top: 36%; left: 25%; 
      margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
      width: 414px;min-width: auto;max-width: auto;height: 289px;min-height: auto;max-height: auto;
      background-image: url('imagens/cidade.png');background-repeat: no-repeat;background-size: 100% 100%;
      border: none;}

#TitDinamico {color: #1a1a40;font-size: 350%;font-family: Rubik Dirt, serif;font-weight: 400;font-style: normal;}

#Dinamico {display: block; position: absolute; overflow: hidden; z-index: 3;
            float: none; top: 38%; left: 25%; 
            margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
            width: 400px;min-width: auto;max-width: auto;height: 228px;min-height: auto;max-height: auto;
            background-image: url('imagens/dinamico.jpg');background-repeat: no-repeat;background-size: 100% 100%;
            border: none;}


/* CSS para montar a TV  */
#container {position: fixed;top: 200px;left: calc(50% - 500px);
      width: 1000px; max-width: 1000px;margin: auto;border: none;
}

#monitor {position: relative;margin: 5%;padding: 2% 2% 4% 2%; 
      background: #000;border-top: 3px solid #888;       
      border-radius: 10px; border-bottom-left-radius: 50% 2%; border-bottom-right-radius: 50% 2%; 
      transition: margin-right 1s;
      height: 100%;max-height: 100%;
}
    
#monitor:after {position: absolute;display: block;content: '';
          bottom: 4%;left: 36%;
          height: .5%;width: 28%;
          background: #ddd; border-radius: 50%; box-shadow: 0 0 3px 0 white; }
    
#monitorscreen {position: relative;overflow: hidden;
      background-color: #292727;background-size: cover; 
      background-position: top center;border: none;
      height: 0; padding-bottom: 56.25%; 
}

@media screen and (max-width: 1700px) {
      #QuadroMenu button{max-width:170px;height: 90px;max-height: 90px;}

      #Bandeira {right: 2%;}

} 

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

      #container {left: calc(45% - 400px);}

      #QuadroMenu .MenuCentral {width: 91%;}

}

@media screen and (max-width: 1400px) { 
      #container {left: calc(40% - 300px); width: 800px; max-width: 800px;;}

      .LogoEmpresa{top:250px;left: 2%;max-width: 100px;max-height: 60px;}

      #QuadroMenu button{top:10px;max-width:140px;height: 80px;max-height: 80px;}     

      #Panfleto{top: 40%; left: 30%; width: 300px;height: 180px;}

      #Anuncio{top: 40%; left: 29%; width: 300px;height: 200px;}

      #Dinamico {width: 300px;height: 190px;}

      .TextDicas {font-size: 200%;}

      #Institucional {top: 50%; left: 25%;width: 300px;height: 160px;}

}

@media screen and ((max-width: 1150px) or (max-height: 600px)) { 

      #container {left: calc(40% - 200px); width: 600px; max-width: 600px;}
      
      .LogoEmpresa{left: 2%;min-width: 80px;max-width: 80px;max-height: 50px;}

      #QuadroMenu button{top:20px;max-width:120px;max-height: 65px;}

      #VinhetaSTVSlogan {top: 50%;}

      @keyframes fadeColorSlogan {
                  from { color: #5f5b5b; font-size: 50%;}
                  to { color: #ffffff; font-size: 200%;}  
      }            

      .Titulo {font-size: 200%;}

      .SubTitulo {font-size: 120%;}

      #Panfleto{top: 40%; left: 30%; width: 250px;height: 150px;}

      #Anuncio{top: 40%; left: 29%; width: 240px;height: 140px;}
      
      .TextDicas {font-size: 150%;}
      
      #TitDicas {font-size: 250%;}

      #TitDinamico {font-size: 250%;}

      #Dinamico {top: 40%;width: 250px;height: 140px;}

      #SubTitMusica {top: 30%;}

      #Institucional {top: 43%; width: 230px;height: 140px;}

      #Bandeira {top:230px;width: 150px;}

      #Fio-Bandeira {width: 80px;height: 80px;}

      #Barra-Bandeira {top:70px;left: 23px;width: 116px;}

      #quadro-vendas {top:71px;left: 26px;width: 110px;height: 110px;font-size: 130%;padding-top: 10px;font-size: 100%;}

      #triangulo-para-baixo {top:191px;left: 25px;border-left: 56px solid transparent;
      border-right: 56px solid transparent; border-top: 56px solid #5386E4;}
}

@media screen and (max-width: 900px) {
      #QuadroMenu .MenuCentral {width: 99%;}
      #QuadroMenu button{max-width:110px;max-height: 65px;}
      .LogoEmpresa{left: 1%;}
      #Bandeira {width: 130px;right: 1px;}
}

@media screen and (max-height: 800px) {
      #container {top: 110px;}
      #Bandeira {top:130px;}
      .LogoEmpresa{top:200px;}
}

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

      .LogoEmpresa{top:3px;left: 10%;width: 150px;max-width: 150px;max-height: 88px;background-color: #000000;border: none;}
      
      #QuadroMenu {top: 130px; height: 300px;max-height: 300px;bottom: 1%;}

      #QuadroMenu .MenuCentral{overflow: hidden;white-space: normal;}

      #QuadroMenu button{width: 45%;max-width: 45%;margin-left: 3%;}

      #Parede {background-color: #000000; background-image: none;  }
      
      #container {top: 400px;left: 5%;}

      #monitor {background: #4d4a4a;}       
      
      #Bandeira {top:8px;right: 5%;height: 130px;;}

      #Fio-Bandeira {display: none;}

      #Barra-Bandeira {display: none;}

      #quadro-vendas {top:1px;left: 2px;background-color: black;}

      #triangulo-para-baixo {display: none;}

}

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

      .LogoEmpresa{left: 22%;}
      
      #Parede {background-color: #000000; background-image: none;  }
      
      #container {top: 480px;left: 10%;width: 350px; max-width: 350px;}

      #TracoAndroidTV {width: 30px;max-width: 30px; }
      
      #VinhetaSTVLogo{top: 12%; left: calc(50% - 50px); width: 100px;height: 53px;}
      
      #VinhetaSTVSlogan {top: 55%;font-size: 90%;}
      
      @keyframes fadeColorSlogan {
            from { color: #5f5b5b; font-size: 90%;}
            to { color: #ffffff; font-size: 140%;}  
      }

      .Titulo {font-size: 140%;}

      .SubTitulo {font-size: 90%;}

      #Panfleto{top: 42%; left: 25%; width: 150px;height: 70px;}
      
      #Anuncio{top: 42%; left: 25%; width: 150px;height: 70px;}
           
      #TitDicas {font-size: 150%;}
      
      .TextDicas {font-size: 80%;}

      #TitDinamico {font-size: 150%;top: 8%}

      #Dinamico {top: 42%;width: 150px;height: 70px;}

      #TitMusica {font-size: 150%;}

      #SubTitMusica {top: 22%;}

      #Musica {height: 45px;}

      #TitInst{font-size: 150%;}

      #Institucional {top: 59%; width: 130px;height: 40px;}

}


@media screen and ((max-width: 800px) and (max-height: 730px)) {
      
      #container {display: none;}
}