/*documento*/
html,body{
    width: 100%;
    height:100%;
}
  img{
      max-width: 100%;
      height: auto;
    }

 
    .play{
        float: left;
    }

  .preto {
    position: absolute;
    width: 98%;
    position: absolute;
    height: 93%;
    color: #FFF;
    padding: 10px;
    border-radius: 15px;
    overflow: auto;
    border-radius: 8px;
    border: 0px solid #FF0000;
}
  
/*quadroum*/
.embed-quadroum iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
      border: 0px solid #FF0000;
  }

  .embed-quadroum iframe {
   top:0;
    left: 0;
    padding: 5px;
    }

  .quadroum {
    position: fixed;
    top: 2px;
    margin: 0px;
    background-color: #000;
    padding: 5px;
    border-radius: 15px;
    border: 0px solid #555;
  }

  .embed-quadrodois iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
      border: 0px solid #FF0000;
  }

  .embed-quadrodois iframe {
   top:0;
    left: 0;
    padding: 5px;
    }

  .quadrodois {
    margin: 0px;
    padding: 5px;
    border-radius: 15px;
  }

  .embed-quadrodois {
    height: 100%;
    overflow: hidden;
}


#container {
    margin-right: 2px;
    width: 90%;
    border-radius: 15px;
  
    }

#vermelho {
  height: 100%;
    margin: 20px;
    padding: 10px;
}

#topo{
    margin: 23px;
    text-align: center;
}

.inicio_rodape {
  width: 94%;
  height: 100px;
  margin: 19px;
  text-align: center;
}

#moldura{
    text-align: center;
    padding: 8px;
}

.generos{
  overflow: auto;
}

.categoria-geral{
  width: 100%;
  text-align: center;
  overflow: auto;
}

.categoria{
  border: 0px solid #fff;
  overflow: auto;
}

.ave{
  width: 18%;
  float: left;
}

.ritmo{
  width: 60%;
  float: left;
}

.infor{
  font-family: 'Roboto', sans-serif;
  color: #B76923;
}

.alfa{
  padding: 2px;
  float: left;
}

.alfatd{
  width: 100%;
  position: relative;
}

.todos{
  margin: 5px;
  text-align: center;
}

.td{
  width: 80%
  border: 0px solid #FFF;
  text-align: center;
}

.sub{
  width: 60%;
  float: right;
  text-align: center;
}

.image{
  padding: 2px;
  float: left;
}

.geral {
    width: 96%;
    position: absolute;
    height: 100%;
    color: #FFF;
    padding: 10px;
    border-radius: 15px;
    overflow: auto;
}

.rodape{
  width: 100%;
  font: 18px;
  font-size: 18px;
  color: #999;
  font-weight: 700;
  text-align: center;
}

.nomes{
  float: left;
  font-size: 60px;
  color: #C0C0C0;
  font-family: 'Roboto', sans-serif;
}

.top{
  margin-top: 140px;
}

.titu{
  float: left;
}


             /* Estilos para celulares principais - 10201
========================================================================== */
@media all and (min-width: 1000px) {
 
 .quadroum{
    width: 96%;
    height: 150px;
  }

.quadrodois{
    width: 98%;
  }


}


                /* Estilos para celulares principais - 900 x 999
========================================================================== */
@media all and (min-width: 900px) and (max-width: 999px) {
 
 .quadroum{
    width: 100%;
    height: 220px;
  }

.quadrodois{
    width: 98%;
  }


}

                /* Estilos para celulares principais - 650 x 899
========================================================================== */
@media all and (min-width: 650px) and (max-width: 899px) {
 
 .quadroum{
    width: 100%;
    height: 85px;
  }

.quadrodois{
    width: 98%;
  }


}


                /* Estilos para celulares principais - 441 x 649
========================================================================== */
@media all and (min-width: 441px) and (max-width: 649px) {
 
 .quadroum{
    width: 95%;
    height: 85px;
  }

.quadrodois{
    width: 98%;
  }


}


                /* Estilos para celulares principais - 360 x 440
========================================================================== */
@media all and (min-width: 360px) and (max-width: 440px) {
 
 .quadroum{
    width: 95%;
    height: 85px;
  }

.quadrodois{
    width: 98%;
  }


}


              /* Estilos para celulares principais - 359
========================================================================== */
@media all and (max-width: 359px) and {
 
 .quadroum{
    width: 95%;
    height: 85px;
  }

.quadrodois{
    width: 98%;
  }


}