#Parede {position: absolute;display: block;overflow: hidden;z-index:1;float: none;
      top:0px;left:0px;margin: 0px;opacity: 1;
      width: 50%;min-width: auto;max-width: 50%;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% - 70px); 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: 80px;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: 50%; left: 0px; z-index: 2;
      width: 100%; min-width: 150px; height: auto;
      margin: 0px;margin-bottom: 20px;padding: 10px;
      border: none; background: none; background-color: none;
      font-family: Audiowide;color: #669edd;font-size: 100%;text-align: center;
      animation: fadeColorSlogan 5s 1; animation-fill-mode: forwards;}

@keyframes fadeColorSlogan {
      from { color: #5f5b5b; font-size: 100%;}
      to { color: #ffffff; font-size: 180%;}  
}
     
.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: 200%;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: 20%; left: 0px; z-index: 2;
      width: 100%; min-width: 250px; height: auto;
      margin: 0px;padding: 0px;
      border: none; background: none; background-color: none;
      font-family: Arial;color: #FFFFFF;font-size: 130%;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: 12%;min-width: auto;max-width: 12%;height: 22%;min-height: auto;max-height: 22%;
      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: 200%;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: 130%;}

#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: 45%; left: 10%; 
      margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
      width: 70%;min-width: auto;max-width: auto;height: 45%;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: 300%;top: 10px;font-family: Yatra One, serif;font-weight: 400;font-style: normal;}

#Institucional {display: block; position: absolute; overflow: hidden; z-index: 3;
            float: none; top: 50%; left: 20%; 
            margin: 0px;margin-left: auto;margin-right: auto;padding: 10px;
            width: 60%;min-width: auto;max-width: auto;height: 40%;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: 250%;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: 40%;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: 40%;min-width: auto;max-width: auto;height: 55%;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: 220%;top: 15px; font-family: Rubik Dirt, serif;font-weight: 400;font-style: normal;}

#Dinamico {display: block; position: absolute; overflow: hidden; z-index: 3;
            float: none; top: 42%; left: 15%; 
            margin: 0px;margin-bottom: 20px;margin-left: auto;margin-right: auto;padding: 10px;
            width: 60%;min-width: auto;max-width: auto;height: 45%;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: absolute;top: 0px;left: 10%;
      width: 80%; max-width: 80%;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: 1300px) {

      #container {top: -8px;left: 1%;width: 95%; max-width: 95%; }

      #VinhetaSTVLogo{top: calc(40% - 50px); width: 120px;height: 60px;}

      #VinhetaSTVSlogan {top: 55%;}

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

      .Titulo {font-size: 150%;}

      .SubTitulo {font-size: 100%;}

      #Anuncio{top: 40%; left: 30%;width: 35%;height: 50%;}

      #TitDinamico {font-size: 220%;top: 10px;}

      #Dinamico {top: 45%;width: 55%;height: 40%;}

      #SubTitMusica {top: 35%;}

      #TitInst {font-size: 250%;top: 5px;}

      #Institucional {width: 50%;height: 35%;}

}

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

      #Parede {position: relative;
            width: 100%;max-width: 100%;height: 300px;min-height: 300px;max-height: 300px;}

      #container {top: -8px;left: 10%;width: 80%; max-width: 80%;}

}

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

      #Parede {height: 250px;min-height: 250px;max-height: 250px;}

      #container {top: 0px;left: 0px;width: 100%; max-width: 100%;}

      #TitDinamico {font-size: 180%;top: 10px;}

      #TitInst {font-size: 180%;top: 5px;}

      .SubTitulo {font-size: 90%;}
}