@charset "utf-8";
/* CSS Document */


*{
margin:0;
padding:0;
box-sizing:border-box;

}

 .modal{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;

}
.modal{
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.5);
	transition: all 500ms ease;
	opacity:0;
	visibility:hidden;}
	
	#btn-modal:checked ~ .modal{opacity:1; visibility:visible; } 
	#btn-modal1:checked ~ .modal{opacity:1; visibility:visible; }	
	#btn-modal2:checked ~ .modal{opacity:1; visibility:visible; }
	#btn-modal3:checked ~ .modal{opacity:1; visibility:visible; }
	#btn-modal4:checked ~ .modal{opacity:1; visibility:visible; }	
	#btn-modal5:checked ~ .modal{opacity:1; visibility:visible; }	
	#btn-modal6:checked ~ .modal{opacity:1; visibility:visible; }	
	#btn-modal7:checked ~ .modal{opacity:1; visibility:visible; }	
	#btn-modal8:checked ~ .modal{opacity:1; visibility:visible; }	
	#btn-modal9:checked ~ .modal{opacity:1; visibility:visible; }	
			/*Aqui hay que modificar*/
	.contenedor{
	
	width:500px;
	
		margin:auto;
		background: #fff;
		box-shadow: 1px 7px 25px rgba(0,0,0,0.6);
		transition: all 500ms ease;
		position:relative;
		transform:translateY(-30%);
		}
		
		#btn-modal:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal1:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal2:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal3:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal4:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal5:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal6:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal7:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal8:checked ~ .modal .contenedor{transform:translateY(0%);}
	    #btn-modal9:checked ~ .modal .contenedor{transform:translateY(0%);}
	
	
		.contenedor header{
			padding:10px;
			background:#A935D5;
			
			color: #fff;
			}
			
			.contenedor label{
				position: absolute;
			color:#fff;
			top: 10px;
				right: 10px;
				
				cursor:pointer;
	
				}
			
	    #btn-modal{display: none;}
		#btn-modal1{display: none;}
		#btn-modal2{display: none;}
		#btn-modal3{display: none;}
		#btn-modal4{display: none;}
		#btn-modal5{display: none;}
		#btn-modal6{display: none;}
		#btn-modal7{display: none;}
		#btn-modal8{display: none;}
		#btn-modal9{display: none;}
		
		
		
            .lbl-modal{
	          background:#fff;
			  padding:10px 15px;
			  border-radius: 4px;
			  cursor:pointer;}
		
			@media (max-width: 500px){
	
	.modal .contenedor{
		
		width: 90%;
		
		max-width:none;
		left:5%;
		margin-left:0;
	
		}
			}