@charset "utf-8";

.animated {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function:ease-out
  animation-timing-function:ease-out
}

@keyframes flip {
0%		{transform:translateY(50px);opacity:0;}
100%	{transform:translateY(0);opacity:1;}
}
.animated.flip {-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;}

@keyframes fadeInUp {
0%		{transform:translateY(50px);opacity:0;}
100%	{transform:translateY(0);opacity:1;}
}
.animated.fadeInUp {opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:fadeInUp;animation-name:fadeInUp;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;}

@keyframes fadeInDown {
0%		{transform:translateY(-50px);opacity:0;}
100%	{transform:translateY(0);opacity:1;}
}
.animated.fadeInDown {opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:fadeInDown;animation-name:fadeInDown;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;}

@keyframes fadeInLeft {
0%		{transform:translateX(-50px);opacity:0;}
100%	{transform:translateX(0);opacity:1;}
}
.animated.fadeInLeft {opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;}

@keyframes fadeInRight {
0%		{transform:translateX(50px);opacity:0;}
100%	{transform:translateX(0);opacity:1;}
}
.animated.fadeInRight {opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:fadeInRight;animation-name:fadeInRight;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;}

@keyframes fadeOutUp {
0%		{transform:translateY(0);opacity:1;}
100%	{transform:translateY(-30px);opacity:0;}
}
.animated.fadeOutUp {-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;}

.spin {animation:spin 3s ease-out;}

@keyframes spin {
    0%   {
		transform:rotateY(0deg);
    }
    50%  {
        transform:rotateY(180deg);
    }
    100% {
        transform:rotateY(0deg);
    }
}

.brightness {animation:brightness 3s ease-out;}

@keyframes brightness {
    0%   {
        filter: brightness(100%);
		 filter: contrast(100%);
    }
    40%  {
        filter: brightness(180%);
		 filter: contrast(180%);
    }
    100% {
        filter: brightness(100%);
		filter: contrast(100%);
    }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
  animation-fill-mode:both
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 300px, 0);
    transform: translate3d(0, 300px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 300px, 0);
    transform: translate3d(0, 300px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dang {
    0%   {transform:rotateY(0deg) }
    60%  {transform:rotateY(90deg)  }
    100% {transform:rotateY(0deg)}
}