/*cuadro modal*/
.modal{
width:100%;
height:100%;
background: rgba(0,0,0,0.6);
position:fixed;
top:0;
left:0;
display:flex;
animation: modal 2s 3s forwards;
/*animation-fill-mode:forwards;forward cuando termine la animacion se quede ahi laimagen*/
visibility:hidden;
opacity:0;
z-index:5090;
}

/* .modal .contenido{
  max-width: 800px;
} */
.contenido{
	width: 100%;
	max-width: 700px;
	padding: 10px;
/*background:white;*/
-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* -moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000; */
margin:auto;
/* width:45%; */
/* height:75%; */
}
.contenido img{height:auto; width:100%;}

#cerrar{display:none;}

#cerrar + label {
animation: modal 2s 3s forwards;
background:red;
color:#fff;
cursor:pointer;
font-size:25px;
width:40px;
height:40px;
line-height:40px;
opacity:0;
	position:fixed;
	top:5%;
	right: 50px;
	/* transform: translateY(-360px);
	transform: translateX(800px) translateY(-380px);
	top:10%;
	right:26%; */
	text-align:center;
	visibility:hidden;
	z-index:6000;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	/* -moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000; 
	animation-delay:3s;*/		
}
#cerrar:checked + label, #cerrar:checked ~ .modal{
display:none;
}

@keyframes modal{
	100%{
		visibility:visible;
		opacity:1;
	}
}
@media (max-width: 600px){
	#cerrar + label {
		right: 20px;
	}
}