/*  animation */

.anime-fade-enter-active {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.anime-fade-leave-active {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	-webkit-animation-duration: .15s;
	animation-duration: .15s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/*
.anime-flip-enter-active {
	-webkit-animation-name: flipInX;
	animation-name: flipInX;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.anime-flip-leave-active {
	-webkit-animation-name: flipOutX;
	animation-name: flipOutX;
	-webkit-animation-duration: .25s;
	animation-duration: .25s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}*/


.anime-flip-x-enter-active {
	-webkit-animation-name: flipInX;
	animation-name: flipInX;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.anime-flip-x-leave-active {
	-webkit-animation-name: flipOutX;
	animation-name: flipOutX;
	-webkit-animation-duration: .25s;
	animation-duration: .25s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.anime-flip-y-enter-active {
	-webkit-animation-name: flipInY;
	animation-name: flipInY;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.anime-flip-y-leave-active {
	-webkit-animation-name: flipOutY;
	animation-name: flipOutY;
	-webkit-animation-duration: .25s;
	animation-duration: .25s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.anime-zoom-enter-active {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
}
.anime-zoom-leave-active {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	-webkit-animation-duration: .15s;
	animation-duration: .15s;
}

@-webkit-keyframes fadeIn {
	0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
	}
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes flipInX {
  from {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	opacity: 0;
  }
  40% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
	transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
  60% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
	transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
	opacity: 1;
  }
  80% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
	-webkit-transform: perspective(400px);
	transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	opacity: 0;
  }
  40% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
	transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
  60% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
	transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
	opacity: 1;
  }
  80% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
	-webkit-transform: perspective(400px);
	transform: perspective(400px);
  }
}

@-webkit-keyframes flipOutX {
  from {
	-webkit-transform: perspective(400px);
	transform: perspective(400px);
  }
  30% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
	transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
	opacity: 1;
  }
  to {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	opacity: 0;
  }
}

@keyframes flipOutX {
  from {
	-webkit-transform: perspective(400px);
	transform: perspective(400px);
  }
  30% {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
	transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
	opacity: 1;
  }
  to {
	-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
	transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
	opacity: 0;
  }
}


@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  60% {
    opacity: .1;
    -webkit-transform: scale3d(.1, .1, .1);
    transform: scale3d(.1, .1, .1);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  60% {
    opacity: .1;
    -webkit-transform: scale3d(.1, .1, .1);
    transform: scale3d(.1, .1, .1);
  }

  to {
    opacity: 0;
  }
}

/*
@-webkit-keyframes zoomOut{
	0%{
		opacity:1
	}
	50%{
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	to{
		opacity:0
	}
}
	
@keyframes zoomOut{
	0%{
		opacity:1
	}
	50%{
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	to{
		opacity:0
	}
}*/