/* Logo
================================================== */
header .logo { animation:inLeft 1.5s 1 ease-in-out; -webkit-animation:inLeft 1.5s 1 ease-in-out;}
@keyframes inLeft {
	0% { opacity:0; transform: rotateY(100deg);}
	100% { opacity:1; transform: rotateY(0deg);}
	}
@-webkit-keyframes inLeft {
	0% { opacity:0; -webkit-transform: rotateY(90deg);}
	100% { opacity:1; -webkit-transform: rotateY(0deg);}
	}

/* Login
================================================== */
header fieldset, .title { animation:inRight 1.5s 1 ease-in-out; -webkit-animation:inRight 1.5s 1 ease-in-out;}
@keyframes inRight {
	0%, 40% { opacity:0; right:-80px;}
	100% { opacity:1; right:0;}
	}
@-webkit-keyframes inRight {
	0%, 40% { opacity:0; right:-80px;}
	100% { opacity:1; right:0;}
	}



/* Menu
================================================== */
.menu-web { animation: menu-up 1.5s 1 ease-in-out; -webkit-animation: menu-up 1.5s 1 ease-in-out;transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%;}
@keyframes menu-up {
	0%, 30% { transform: rotateX(-90deg);}
	100% { transform: rotateX(0deg);}
	}
@-webkit-keyframes menu-up {
	0%, 30% { -webkit-transform: rotateX(-90deg);}
	100% { -webkit-transform: rotateX(0deg);}
	}

.submenu { animation: menu-down 2s 1 ease-in-out; -webkit-animation: menu-down 2s 1 ease-in-out;transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%;}
@keyframes menu-down {
	0%,70% { transform: rotateX(90deg);}
	90% { transform: rotateX(-20deg);}
	95% { transform: rotateX(10deg);}
	100% { transform: rotateX(0deg);}
	}
@-webkit-keyframes menu-down {
	0%,70% { -webkit-transform: rotateX(90deg);}
	90% { -webkit-transform: rotateX(-20deg);}
	95% { -webkit-transform: rotateX(10deg);}
	100% { -webkit-transform: rotateX(0deg);}
	}
	
.submenu li:hover ul { animation-name: swingdown; animation-duration: 1s; animation-timing-function: ease; -webkit-animation-name: swingdown; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease;}
@keyframes swingdown {
	0% { opacity: .05; transform: rotateX(90deg);}
	30% { opacity: 0.9999; transform: rotateX(-20deg); animation-timing-function: ease-in-out;}
	65% { transform: rotateX(20deg); animation-timing-function: ease-in-out;}
	100% { transform: rotateX(0); animation-timing-function: ease-in-out;}
	}
@-webkit-keyframes swingdown {
	0% { opacity: .05; -webkit-transform: rotateX(90deg);}
	30% { opacity: 0.9999; -webkit-transform: rotateX(-20deg); -webkit-animation-timing-function: ease-in-out;}
	65% { -webkit-transform: rotateX(20deg); -webkit-animation-timing-function: ease-in-out;}
	100% { -webkit-transform: rotateX(0); -webkit-animation-timing-function: ease-in-out;}
	}


/* Slidertop
================================================== */
#slidertop { animation:slider 2s 1 ease-in-out; -webkit-animation:slider 2s 1 ease-in-out;}
@keyframes slider {
	0%, 50% { opacity:0;}
	100% { opacity:1;}
	}
@-webkit-keyframes slider {
	0%, 50% { opacity:0;}
	100% { opacity:1;}
	}


/* Contenido
================================================== */
.box { animation:box 2s 1 ease-in-out; -webkit-animation:box 2s 1 ease-in-out; transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%;}
@keyframes box {
	0%, 60% { transform: rotateY(-90deg); opacity:0;}
	100% { transform: rotateY(0deg); opacity:1;}
	}
@-webkit-keyframes box {
	0%, 60% { -webkit-transform: rotateY(-90deg); opacity:0;}
	100% { -webkit-transform: rotateY(0deg); opacity:1;}
	}
	
.box > img { animation:girar 2.2s 1 ease-in-out; -webkit-animation:girar 2.2s 1 ease-in-out;}
@keyframes girar {
	0%, 80% { opacity:0; transform:rotate(-460deg);}
	100% { opacity:1; transform:rotate(0deg);}
	}
@-webkit-keyframes girar {
	0%, 80% { opacity:0; -webkit-transform:rotate(-460deg);}
	100% { opacity:1;-webkit- transform:rotate(0deg);}
	}
	
.box h2 { animation:up 2.8s 1 ease-in-out; -webkit-animation:up 2.8s 1 ease-in-out;}
@keyframes up {
	0%, 80% { opacity:0; top:20px;}
	100% { opacity:1; top:0;}
	}
@-webkit-keyframes up {
	0%, 80% { opacity:0; top:20px;}
	100% { opacity:1; top:0;}
	}

.box li { animation:lineas 3s 1 ease-in-out; -webkit-animation:lineas 3s 1 ease-in-out;}
@keyframes lineas {
	0%, 80% { opacity:0; width:0%;}
	100% { opacity:1; width:100%;}
	}
@-webkit-keyframes lineas {
	0%, 80% { opacity:0; width:0;}
	100% { opacity:1; width:100%;}
	}


/* Detalle
================================================== */
#detalle { animation:inLeft 1.5s 1 ease-in-out; -webkit-animation:inLeft 1.5s 1 ease-in-out;}
@keyframes inLeft {
	0%, 40% { opacity:0; left:-80px;}
	100% { opacity:1; left:0;}
	}
@-webkit-keyframes inLeft {
	0%, 40% { opacity:0; left:-80px;}
	100% { opacity:1; left:0;}
	}