.modal {
	width: 100%;
	height: 100vh;
	background:  rgba(0,0,0,0);
	

	position: absolute;
	top: 0;
	left: 0;

	display: flex;

	animation: modal 2s forwards;
	
	visibility: hidden;
	opacity: 0;

}

.contenido{
	margin: auto;
	width: 40%;
	height: 100%;
	
	

}

#cerrar{
display: none;

}

#cerrar + label {
	position: absolute;
   top: 1em;
   right: 1em;
   z-index: 100;
   color: #000;
   font-weight: bold;
   cursor: pointer;
   
   width: 25px;
   height: 25px;
   line-height: 25px;
   text-align: center;
   border-radius: 50%;
   transition: all .5s;



	animation: modal 2s forwards;
	visibility: hidden;
	opacity: 0;

}
#cerrar:checked ~ .modal, #cerrar:checked + label   {
	display: none;
}

@keyframes modal {
	100% {
			visibility: visible;
			opacity: 1;
	}
}