$transition2: .45s 1 $transition;

.animation {
	@include opacity(0);
	@include translate3d(0,0,0);
	@include perspective(1000);
	will-change: opacity;
	@media only screen and (max-width: $break-small) {
		@include opacity(1);
	}
}
.animate {
	will-change: opacity, transform;
}
.fade-in.animate {
	@include animation(fade-in $transition2);
	@media only screen and (max-width: $break-small) {
		@include animation(none);
	}
}
.right-to-left.animate {
	@include animation(right-to-left $transition2);
	@media only screen and (max-width: $break-small) {
		@include animation(none);
	}
}
.left-to-right.animate {
	@include animation(left-to-right $transition2);
	@media only screen and (max-width: $break-small) {
		@include animation(none);
	}
}
.bottom-to-top.animate {
	@include animation(bottom-to-top $transition2);
	@media only screen and (max-width: $break-small) {
		@include animation(none);
	}
}
.top-to-bottom.animate {
	@include animation(top-to-bottom $transition2);
	@media only screen and (max-width: $break-small) {
		@include animation(none);
	}
}
.scale.animate {
	@include animation(scale $transition2);
	@media only screen and (max-width: $break-small) {
		@include animation(none);
	}
}
.swingIn.animate {
	@include transform-origin(50%, 0);
	@include animation(swingInX $transition2);
	@media only screen and (max-width: $break-small) {
		@include animation(none);
	}
}
.animate {
	@include opacity(1);
}
.spinY {
	@include animation(spinY 0.5s linear);
	@include animation-fill-mode(both);
	@include animation-timing-function(cubic-bezier(0.75, 0, 0.175, 1));
}
@include keyframes(fade-in) {
    0%   {@include opacity(0);}
    100% {@include opacity(1);}
}
@include keyframes(right-to-left) {
    0%   {@include opacity(0); @include translateX(50px);}
    100% {@include opacity(1); @include translateX(0px);}
}
@include keyframes(left-to-right) {
    0%   {@include opacity(0); @include translateX(-50px);}
    100% {@include opacity(1); @include translateX(0px);}
}
@include keyframes(bottom-to-top) {
    0%   {@include opacity(0); @include translateY(50px);}
    100% {@include opacity(1); @include translateY(0px);}
}
@include keyframes(top-to-bottom) {
    0%   {@include opacity(0); @include translateY(-50px);}
    100% {@include opacity(1); @include translateY(0px);}
}
@include keyframes(scale) {
    0%   {@include opacity(0); @include scale(0);}
    100% {@include opacity(1); @include scale(1);}
}
@include keyframes(swingInX) {
    0% { @include transform(perspective(1000px) rotateX(-90deg)); }
    100% { @include transform(perspective(1000px) rotateX(0deg)); }
}
@include keyframes(swingOutX) {
    0% {  @include transform(perspective(1000px) rotateX(0deg)); }
    100% {  @include transform(perspective(1000px) rotateX(-90deg)); }
}
@include keyframes(bounceInY) {
    0% {  @include transform(translateY(-100%)); }
    60% {  @include transform(translateY(30px)); }
    80% {  @include transform(translateY(-10px)); }
    100% {  @include transform(translateY(0)); }
}
@include keyframes(bounceOutY) {
    0% {  @include transform(translateY(0)); }
    30% {  @include transform(translateY(20px)); }
    100% {  @include transform(translateY(-100%)); }
}
@include keyframes(spinY) {
    0%   { @include rotateY(0); }
    100% { @include rotateY(360deg); }
}

/* 
 *  Owl Carousel CSS3 Transitions 
 *  v1.3.2
 */

.owl-origin {
	-webkit-perspective: 1200px;
	-webkit-perspective-origin-x : 50%;
	-webkit-perspective-origin-y : 50%;
	-moz-perspective : 1200px;
	-moz-perspective-origin-x : 50%;
	-moz-perspective-origin-y : 50%;
	perspective : 1200px;
}
/* fade */
.owl-fade-out {
  z-index: 10;
  -webkit-animation: fadeOut .7s both ease;
  -moz-animation: fadeOut .7s both ease;
  animation: fadeOut .7s both ease;
}
.owl-fade-in {
  -webkit-animation: fadeIn .7s both ease;
  -moz-animation: fadeIn .7s both ease;
  animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out {
  -webkit-animation: backSlideOut 1s both ease;
  -moz-animation: backSlideOut 1s both ease;
  animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
  -webkit-animation: backSlideIn 1s both ease;
  -moz-animation: backSlideIn 1s both ease;
  animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out {
  -webkit-animation: scaleToFade .7s ease both;
  -moz-animation: scaleToFade .7s ease both;
  animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
  -webkit-animation: goDown .6s ease both;
  -moz-animation: goDown .6s ease both;
  animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in {
  -webkit-animation: scaleUpFrom .5s ease both;
  -moz-animation: scaleUpFrom .5s ease both;
  animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
  -webkit-animation: scaleUpTo .5s ease both;
  -moz-animation: scaleUpTo .5s ease both;
  animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
  0% {opacity: 1}
}
@-moz-keyframes empty {
  0% {opacity: 1}
}
@keyframes empty {
  0% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@-moz-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; }
}
@-moz-keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
@-webkit-keyframes backSlideOut {
  25% { opacity: .5; -webkit-transform: translateZ(-500px); }
  75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@-moz-keyframes backSlideOut {
  25% { opacity: .5; -moz-transform: translateZ(-500px); }
  75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideOut {
  25% { opacity: .5; transform: translateZ(-500px); }
  75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@-webkit-keyframes backSlideIn {
  0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; -webkit-transform: translateZ(-500px); }
  100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@-moz-keyframes backSlideIn {
  0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; -moz-transform: translateZ(-500px); }
  100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
}
@keyframes backSlideIn {
  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; transform: translateZ(-500px); }
  100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@-webkit-keyframes scaleToFade {
  to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleToFade {
  to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleToFade {
  to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes goDown {
  from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes goDown {
  from { -moz-transform: translateY(-100%); }
}
@keyframes goDown {
  from { transform: translateY(-100%); }
}

@-webkit-keyframes scaleUpFrom {
  from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpFrom {
  from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpFrom {
  from { opacity: 0; transform: scale(1.5); }
}

@-webkit-keyframes scaleUpTo {
  to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpTo {
  to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpTo {
  to { opacity: 0; transform: scale(1.5); }
}