@charset "UTF-8";
/* CSS Document */
body
{
	margin: 0;}
.modal{
	width: 100%;
	height: 100vh;
	position: absolute;
	background-color:rgba(255,0,0,0.3);
	top: 0; left: 0;
	display: flex;
	animation: modal 2s 1s forwards;
	visibility: hidden;
	opacity: 0;
	z-index: 50;
}
#cerrar:checked + label, #cerrar:checked ~ .modal
{display: none;}
.contenido{
	width: 30%; height: auto;
	margin: auto;
	background: #fff;
	color: #DA2427;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 500;text-align: center;
	font-size: 2em;
}
.contenido img
{max-width: 100%;}
#cerrar{display: none;}
#cerrar + label{position: absolute;
background-color: #fff;
z-index: 100;
top: 10%; right: 35%;
cursor: pointer;
animation: modal 2s 1s forwards;
	visibility: hidden;
	opacity: 0;
}

@keyframes modal
{100% {visibility: visible;
	opacity: 1;}}
@media only screen and (orientation: landscape)
{
	.contenido{font-size: .8em;}
}	#cerrar + label{top: 2%;}
@media only screen and (min-width: 768px)
{.contenido{
	width: 60%;}
	#cerrar + label{top: 12%; right: 15%;}
}
@media only screen and (max-width: 670px) 
{.contenido{
	width: 90%;
	font-size: 1em;
	}
	#cerrar + label{top:17%;
		right: 10%;
	}
}