body {
	margin: 0px;
	font-family: 'Nunito', sans-serif;
}
#ad {
	display: block;
	border: 1px solid #666;
	overflow: hidden;
	width: 298px;
	height: 248px;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}	
#banner{
	position: absolute;
	display: block;
	background-color: #FFF;
	width: 298px;
	height: 248px;
	overflow: hidden;
}
#content{
	position: absolute;
	width: 298px;
	height: 248px;
	top: 0;
	left: 0;
}
#logo{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	animation-name: logo;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}
@keyframes logo{
	0% {
		opacity: 1;
	}
}


#fondo{
	position: absolute;
	top: 0;
	left: 0;
	animation-duration: 9833ms;
	animation-name: fondo;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}

@keyframes fondo{
	0% {
		opacity: 0;
		filter: blur(10px);
	}

	5%,
	29% {
		opacity: 1;
		filter: blur(0px);
	}

	34%, 100% {
		opacity: 0;
		filter: blur(10px);
	}
}

#infouno{
	position: absolute;
	top: 0;					
	left: 0;
	margin: 0;				
	animation-duration: 9833ms;
	animation-name: infouno;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}


@keyframes infouno{
	0%, 6% {
		transform: translateY(-400px);
		opacity: 0.5;
		filter: blur(10px);
	}

	10% {
		transform: translateY(0px);
		opacity: 1;
		filter: blur(10px);
	}

	11%,
	26% {
		transform: translateY(0px);
		opacity: 1;
		filter: blur(0);
	}
	36%,
	100% {
		transform: translateX(-400px);
		opacity: 0;
		filter: blur(10px);
	}
}

#fondodos{
	position: absolute;
	top: 0;
	left: 0;
	animation-duration: 9833ms;
	animation-name: fondodos;
	transform-origin: 50% 50%;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}

@keyframes fondodos{
	0%, 30% {
		opacity: 0;
		filter: blur(10px);
	}

	34%,
	67% {
		opacity: 1;
		filter: blur(0px);
	}

	68%, 100% {
		opacity: 0;
		filter: blur(10px);
	}
}

#infodos{
	position: absolute;
	top: 0;					
	left: 0;
	margin: 0;				
	animation-duration: 9833ms;
	animation-name: infodos;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}


@keyframes infodos{
	0%,
	36% {
		transform: translateY(400px);
		opacity: 0.5;
		filter: blur(10px);
	}

	40% {
		transform: translateY(0);
		opacity: 1;
		filter: blur(10px);
	}

	40.1%,
	65% {
		transform: translateY(0);
		opacity: 1;
		filter: blur(0);
	}

	69%, 100% {
		transform: translateY(-400px);
		opacity: 0;
		filter: blur(10px);
	}

}

#infotres{
	position: absolute;
	top: 0;					
	left: 0;
	margin: 0;				
	animation-duration: 9833ms;
	animation-name: infotres;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}


@keyframes infotres{
	0%,
	40% {
		opacity: 0;
		filter: blur(10px);
	}

	44% {
		opacity: 0.5;
		filter: blur(0px);
	}

	46%,
	65% {
		transform: translateY(0);
		opacity: 1;
		filter: blur(0);
	}

	69%, 100% {
		opacity: 0;
		filter: blur(10px);
	}

}

#fondotres{
	position: absolute;
	top: 0;
	left: 0;
	animation-duration: 9833ms;
	animation-name: fondotres;
	transform-origin: 50% 50%;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}

@keyframes fondotres{
	0%, 66% {
		opacity: 0;
		filter: blur(10px);
	}

	71%,
	99% {
		opacity: 1;
		filter: blur(0px);
	}

	100% {
		opacity: 0;
		filter: blur(10px);
	}
}

#infocuatro{
	position: absolute;
	top: 0;					
	left: 0;
	margin: 0;				
	animation-duration: 9833ms;
	animation-name: infocuatro;
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-iteration-count: 3;
}


@keyframes infocuatro{
	0%,
	66% {
		opacity: 0;
		filter: blur(10px);
	}

	70% {
		opacity: 0.5;
		filter: blur(0px);
	}

	71%,
	99% {
		opacity: 1;
		filter: blur(0);
	}

	100% {
		opacity: 0;
		filter: blur(10px);
	}
}

#conoce{
	position: absolute;
	left : 0;
	top : 0;
	animation-duration: 9833ms;
	transform-origin: 50% 70%;
	animation-timing-function: ease-out;
	animation-name: conoce;
	animation-iteration-count: 3;
}
@keyframes conoce{
	0%{
		opacity: 0;
	}
	70%{
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	72%{
		opacity: 1;
		transform: scale3d(1.1, 1.1, 1.1);
	}
	74%{
		transform: scale3d(.9, .9, .9);
	}
	76%{
		transform: scale3d(1.03, 1.03, 1.03);
	}
	78%{
		transform: scale3d(.97, .97, .97);
	}
	80%{
		transform: scale3d(1, 1, 1);
	}
	82%{
		transform: scale3d(1, 1, 1);
	}
	84%{
		transform: scale3d(.7, .7, .7);
	}
	86%{
		opacity: 1;
		transform: scale3d(1.1, 1.1, 1.1);
	}
	88%{
		transform: scale3d(.9, .9, .9);
	}
	90%{
		transform: scale3d(1.03, 1.03, 1.03);
	}
	92%{
		transform: scale3d(.97, .97, .97);
	}
	94%{
		transform: scale3d(1, 1, 1);
	}
	99%{
		opacity: 1;
	}
	100%{
		opacity:0;
	}	
}


#back-up{
	position: absolute;
	top: 0px;
	left: 0px;
	animation-duration: 9833ms;
	animation-timing-function: ease-out;
	animation-name: back-up;
	animation-iteration-count: 3;
	z-index: 300;
}
@keyframes back-up{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}