@charset "utf-8";
/* CSS Document */

/* The animation code */
@keyframes flip {
  0% {width: 210px;}
	50% {width: 0px;}
	100% {width: 210px;}
}

/* The element to apply the animation to */
.flip{
    animation-name: flip;
    animation-duration: 500ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in-out;
} 


/* delayed_hover */

/* Keyframes */
@keyframes delayed_hover {
  0% {height: 0; opacity: 0;}
	100% {height: initial; opacity: 1;}
}
/* Asignación y propiedades */
.casilla_que_hacemos:hover .reverso {
  animation-name: delayed_hover;
  animation-duration: 600ms;
  -webkit-animation-delay: 300ms; /* Chrome, Safari, Opera */
  animation-delay: 300ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in-out;
} 

/* delayed_hover 500 */

/* Keyframes */
@keyframes delayed_1000 {
  0% {opacity: 0;}
	100% {opacity: 1;}
}
/* Asignación y propiedades */
.contenido_banda {
  animation-name: delayed_1000;
  animation-duration: 600ms;
  -webkit-animation-delay: 1000ms; /* Chrome, Safari, Opera */
  animation-delay: 1000ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in-out;
} 

/* ancho */

/* Keyframes */
@keyframes banda {
  0% {width: 0;}
	100% {width: 100%;}
}
/* Asignación y propiedades */
.banda {
  animation-name: banda;
  animation-duration: 600ms;
  -webkit-animation-delay: 500ms; /* Chrome, Safari, Opera */
  animation-delay:500ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in-out;
}