@charset "UTF-8";
/* CSS Document */
/* Div layer for the entire banner. */

body, body * {
	vertical-align: baseline;
	border:0;
	outline: 0;
	padding: 0;
	margin: 0;
	font-family: 'Open Sans',arial, sans-serif;
}
	
#container_dc {
	position: absolute;
	width: 298px;
	height: 248px;
	top: 0px;
	left: 0px;
	overflow:hidden;
	margin: auto;
	border:1px solid #000000;
	
}

#content_dc {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	background-color: #FFF;
	z-index: -100;
	
	
}

#bg_img {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	z-index: -100;
	background-position: 70% 70%;
	background-size: 200%;
	
		
}

#myLogoDc{
	width:300px;
	height:250px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1000
	animation:logo 2s infinite;
	-webkit-animation:logo 2s infinite;
	-webkit-animation-iteration-count:1;
	
	-moz-animation:logo 2s infinite;
	-moz-animation-iteration-count:1;
	
	-ms-animation:logo 2s infinite;
	-ms-animation-iteration-count:1;
	
	-o-animation:logo 2s infinite;
	-o-animation-iteration-count:1;
	
}

#boton{
	width:180px;
	height:150px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:-1;
	animation:benef 5s;
	animation-delay:7s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	
	-webkit-animation-delay:7s;
	-webkit-animation:benef 5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;	
		
	-moz-animation-delay:7s;
	-moz-animation:benef 5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	-ms-animation-delay:7s;
	-ms-animation:benef 5s;
	-ms-animation-iteration-count:1;
	-ms-animation-fill-mode:forwards;
	
	-o-animation-delay:7s;
	-o-animation:benef 5s;
	-o-animation-iteration-count:1;
	-o-animation-fill-mode:forwards;
}

#text1{
	position:absolute;
	width:220px;
	height:135px;
	top:25px;
	left:19px;
	font-family: 'Open Sans',arial, sans-serif;
	font-size: 20px;
	font-weight:bold;
	color:#FFFFFF;
	text-shadow: 2px 1px 3px #000000;
	animation:claim 3s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	
	-webkit-animation:claim 3s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;
	
	-moz-animation:claim 3s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	-ms-animation:claim 3s;
	-ms-animation-iteration-count:1;
	-ms-animation-fill-mode:forwards;
	
	-o-animation:claim 3s;
	-o-animation-iteration-count:1;
	-o-animation-fill-mode:forwards;
}

#text2{
	position:absolute;
	width:235px;
	height:135px;
	top:25px;
	left:19px;
	font-family: 'Open Sans',arial, sans-serif;
	font-size: 20px;
	font-weight:bold;
	color:#FFFFFF;
	text-shadow: 2px 1px 3px #000000;
	animation:benef 5s;
	animation-delay:7s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	
	-webkit-animation-delay:7s;
	-webkit-animation:benef 5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;	
		
	-moz-animation-delay:7s;
	-moz-animation:benef 5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	-ms-animation-delay:7s;
	-ms-animation:benef 5s;
	-ms-animation-iteration-count:1;
	-ms-animation-fill-mode:forwards;
	
	-o-animation-delay:7s;
	-o-animation:benef 5s;
	-o-animation-iteration-count:1;
	-o-animation-fill-mode:forwards;
	
}

#cta{
	position:absolute;
	width:150px;
	height:135px;
	top:114px;
	left:15px;
	text-align:center;
	font-family: 'Open Sans',arial, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color:#00477f;
	z-index:1;
	animation:benef 5s;
	animation-delay:7s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	
	-webkit-animation-delay:7s;
	-webkit-animation:benef 5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;	
		
	-moz-animation-delay:7s;
	-moz-animation:benef 5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	-ms-animation-delay:7s;
	-ms-animation:benef 5s;
	-ms-animation-iteration-count:1;
	-ms-animation-fill-mode:forwards;
	
	-o-animation-delay:7s;
	-o-animation:benef 5s;
	-o-animation-iteration-count:1;
	-o-animation-fill-mode:forwards;
		
}

/* Invisible button for background clickthrough. */
#background_exit_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	cursor: pointer;
	opacity: 0;
	z-index: 1000;
}

/*Animación Logo Iberostar-------------------------------------------*/

@keyframes logo
{
	from {opacity:0;}
	to {opacity:1}
}
@-webkit-keyframes logo
{
	from {opacity:0;}
	to {opacity:1}
}

@-moz-keyframes logo
{
	from {opacity:0;}
	to {opacity:1}
}

@-ms-keyframes logo
{
	from {opacity:0;}
	to {opacity:1}
}

@-o-keyframes logo
{
	from {opacity:0;}
	to {opacity:1}
}


/*Animación Texto1-------------------------------------------*/

@keyframes claim
{
	0% {opacity:0;}
	
	50% {opacity:1;}
	
	100% {opacity:0;}
}
@-webkit-keyframes claim
{
	0% {opacity:0;}
		
	50% {opacity:1;}
	
	100% {opacity:0;}
}

@-moz-keyframes claim
{
	0% {opacity:0;}
		
	50% {opacity:1;}
	
	100% {opacity:0;}
}

@-ms-keyframes claim
{
	0% {opacity:0;}
		
	50% {opacity:1;}
	
	100% {opacity:0;}
}

@-o-keyframes claim
{
	0% {opacity:0;}
		
	50% {opacity:1;}
	
	100% {opacity:0;}
}

/*Animación Texto2-------------------------------------------*/

@keyframes benef
{
	0% {opacity:0;}
	
	25% {opacity:0;}
	
	50% {opacity:0;}
	
	75% {opacity:1;}
	
	100% {opacity:1;}
}
@-webkit-keyframes benef
{
	0% {opacity:0;}
	
	25% {opacity:0;}
	
	50% {opacity:0;}
	
	75% {opacity:1;}
	
	100% {opacity:1;}
}

@-moz-keyframes benef
{
	0% {opacity:0;}
	
	25% {opacity:0;}
	
	50% {opacity:0;}
	
	75% {opacity:1;}
	
	100% {opacity:1;}
}

@-ms-keyframes benef
{
	0% {opacity:0;}
	
	25% {opacity:0;}
	
	50% {opacity:0;}
	
	75% {opacity:1;}
	
	100% {opacity:1;}
}

@-o-keyframes benef
{
	0% {opacity:0;}
	
	25% {opacity:0;}
	
	50% {opacity:0;}
	
	75% {opacity:1;}
	
	100% {opacity:1;}
}