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: #e61b72;
	background-color: #e61b72;
	width: 298px;
	height: 248px;
	overflow: hidden;
}
#content{
	position: absolute;
	width: 298px;
	height: 248px;
	top: 0;
	left: 0;
}
#fondo{
	position: absolute;
	top: 0;
	left: 0;
}


#logos{
	position: absolute;
	top: 0;					
	left: 0;
	margin: 0;				
	animation-duration: 9833ms;
	animation-name: logos;
	animation-timing-function: ease-out both;
	animation-iteration-count: 3;
}


@keyframes logos{
	0% {		
		transform: translate(0, 50px);
		opacity: 0;
	}
	4%{
		transform: translate(0, 0);
		opacity: 1
	}
	6%,
	99%{
		transform: translate(0);
		animation-timing-function: ease-out;
		opacity: 1;
	}
	99.1%,
	100%{
		transform: translate(0, 100px);
		opacity: 0;
		animation-timing-function: ease-out;
	}
}



#test{
	position: absolute;
	top: 0;					
	left: 0;
	margin: 0;				
	animation-duration: 9833ms;
	animation-name: test;
	animation-timing-function: ease-out both;
	animation-iteration-count: 3;
}


@keyframes test{
	0%,
	7%{
		opacity: 0;
		transform: rotate(-540deg) scale(0);
		filter: blur(40px);
	}
	11%, 
	40%{
		transform: rotate(0) scale(1);
		filter: blur(0);
		opacity: 1;
	}

	43%,
	100%{
		transform: rotate(-540deg) scale(0);
		filter: blur(40px);
		opacity: 0;
	}
}



#contacto {
	position: absolute;
	top: 0;
	left: 0;
	animation-name: contacto;
	animation-duration: 9833ms;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
	animation-iteration-count: 3;
}

@keyframes contacto{
	0%,
	43.5%{
		opacity: 0;
		transform: translate(0, 300px);
	}
	46%, 
	98%{
		transform: translate(0);
		opacity: 1;
	}

	98.1%,
	100%{
		transform: translate(0, 300px);
		opacity: 0;
	}
}



#conoce{
	position: absolute;
	top: 0;
	left:0;
	margin: 0;
	animation-duration: 9833ms;
	animation-timing-function: ease-out;
	animation-name: conoce;
	animation-iteration-count: 3;
}
@keyframes conoce{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 0;
		transform: scale(2);
	}
	52%{
		opacity: 1;
		transform: scale(0.9);
	}
	54%{
		transform: scale(1);
	}
	55%{
		transform: scale(1);
	}
}

#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: 100;
}
@keyframes back-up{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}