html {
   height: 100%;
}
body {
   min-height: 100%;
}

	img{
      max-width: 100%;
      height: auto;
    }

 
    .play{
        float: left;
    }

	.preto {
    position: absolute;
    width: 96%;
		position: absolute;
		height: 93%;
		color: #FFF;
		padding: 10px;
		border-radius: 15px;
    overflow: auto;
    border-radius: 8px;
    border: 1px solid #800080;
}

.quadroum {
    margin: 5px;
    height: 97%;
    color: #FFF;
    padding: 5px;
    float: left;
    border-radius: 15px;
    border: 0px solid #FFF;
  }

  .quadrodois {
    margin: 5px;
    height: 97%;
    float: left;
    padding: 5px;
    border-radius: 15px;
    border: 0px solid #FFF;
  }
	
  .embed-quadroum iframe {
    width: 95%;
    height: 97%;
    border-radius: 8px;
    border: 1px solid #800080;
  }

  .embed-quadrodois iframe {
    width: 95%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid #800080;
  }

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

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


	.titulo {
		width: 100%;
		background: #000;
		margin: 5px;
	}

	.avatar {
		width: 90%;
		height: 45%;
		margin: 5px;
		background: #000;
		text-align: center;
	}


.embed-quadroum {
    position: relative;
    height: 97%;
}


#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: 'Old Standard TT', serif;
  color: #B76923;
  font-family: 'Old Standard TT', serif;
  text-align: left;
}

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

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

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

.td{
  width: 90%
  height: 97%;
  border: 0px solid #FF0000;
}

.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: 'Tangerine', cursive;
}


.cx_alfa{
  width: 90%;
  text-align: center;
  border: 0px solid #c0c0c0;
}

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

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

.letra{
  width: 17px;
  height: 18;
  margin: 1px;
  border-radius: 5px;
  border: 1px solid #c0c0c0;
  font-size: 20px;
  color: #ffffff;
  float: left;
  background: #000000;
}

.tds{
  width: 57px;
  height: 18;
  margin: 2px;
  border-radius: 5px;
  border: 1px solid #c0c0c0;
  font-size: 20px;
  color: #ff0000;
  float: left;
  background: #000000;
}



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

.quadrodois{
    width: 72%;
  }


}


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

.quadrodois{
    width: 63%;
  }


}

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

.quadrodois{
    width: 50%;
  }


}


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

.quadrodois{
    width: 47%;
  }


}


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

.quadrodois{
    width: 98%;
  }


}


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

.quadrodois{
    width: 82%;
  }


}