input[type=checkbox]{display:none}
input[type=checkbox] + label{width:50px;height:50px;background-image:url('../img/cerrar.png'); display:none; position:fixed;top:10%; left:1%; z-index:100; display:none;}

input[type=checkbox] ~ .modalContenedor{width:100%; height:100%; background-color:black; position: absolute; top:0;opacity:0; z-index:-1000; 		
	transition:z-index 0.5s, opacity 3s;
	-moz-transition:z-index 0.5s, opacity 3s;
	-webkit-transition:z-index 0.5s, opacity 3s;
	-o-transition:z-index 0.5s, opacity 3s;	
	-ms-transition:z-index 0.5s, opacity 3s;
  }
input[type=checkbox]:checked ~ .modalContenedor{opacity:0.8; z-index:1;}

/*-------------------------------------------------------
Estilos para pantallas entre 1025 y 1280 pixels;
---------------------------------------------------------*/
@media screen and  (min-width: 1025px)
{

.ventanaModal{position: fixed; top:-150%; left:50%; width:500px; height:270px; color:#fff; background-color: #3C3C3B; z-index:10; margin-left:-250px;
	transition:top 2s;
	-moz-transition:top 2s;
	-webkit-transition:top 2s;
	-o-transition:top 2s;	
	-ms-transition:top 2s;		
}
input[type=checkbox]:checked ~ .ventanaModal{top: 30%;}
input[type=checkbox]:checked + label{display:inline-block;cursor: pointer;}

.contenidoModal{ width:90%; height:80%; margin:0 auto;}
.tituloModal{ color:#fff}
}
/*-------------------------------------------------------
Estilos para pantallas entre 681 y 1024 pixels;
---------------------------------------------------------*/
@media screen and  (min-width: 681px)  and (max-width: 1024px) 
{
input[type=checkbox] + label{top:20%; left:1%; z-index:100; display:none;}
.ventanaModal{position: fixed; top:-150%; left:-80%; width:500px; height:250px; color:#fff; background-color: #3C3C3B; z-index:10; margin-left:-250px;
	transition:top 2s;
	-moz-transition:top 2s;
	-webkit-transition:top 2s;
	-o-transition:top 2s;	
	-ms-transition:top 2s;
	
}
input[type=checkbox]:checked ~ .ventanaModal{top: 30%;}
input[type=checkbox]:checked + label{display:inline-block; cursor: pointer;}

.contenidoModal{ width:90%; height:80%; margin:0 auto;}
.tituloModal{  color:#fff}

}
/*-------------------------------------------------------
Estilos para pantallas entre 1 y 680px pixels;
---------------------------------------------------------*/
@media screen and  (min-width: 1px)  and (max-width: 680px) 
{
input[type=checkbox] + label{top:23%; left:1%; z-index:100; display:none}
.ventanaModal{position: fixed; top:-150%; left:50%; width:90%;  color:#fff; background-color: #3C3C3B; z-index:10; margin-left:-45%;
	transition:top 2s;
	-moz-transition:top 2s;
	-webkit-transition:top 2s;
	-o-transition:top 2s;	
	-ms-transition:top 2s;
	
}
input[type=checkbox]:checked ~ .ventanaModal{top: 30%;}
input[type=checkbox]:checked + label{display:inline-block; cursor: pointer;}

.contenidoModal{ width:90%; height:80%; margin:0 auto;}
.contenidoModal p{ font-size:14px;}
.tituloModal{ color:#fff;}

}