// DIRECTIONAL
// ---------------------------------------------------------------
$rtl: 0 !default;
$dir: ltr !default;

@import "../theme/theme-imports";

@keyframes flash {
	0%, 50%, 100% {opacity: 1;}
	25%, 75% {opacity: 0;}
}

.flash {
	@include animation-name(flash);
}

@keyframes shake {
	0%, 100% {transform: translateX(0);opacity: 1;}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
	@include animation-name(shake);
}

@keyframes rubberBand {
    from,to {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }
}

.rubberBand {
    @include animation-name(rubberBand);
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);opacity: 1;}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.bounce {
	@include animation-name(bounce);
}

@keyframes tada {
	0% {transform: scale(1);}
	10%, 20% {transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
	100% {transform: scale(1) rotate(0);opacity: 1;}
}

.tada {
	@include animation-name(tada);
}

@keyframes swing {
	20% { transform: rotate(15deg); }
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); opacity: 1;}
}

.swing {
	transform-origin: top center;
	@include animation-name(swing);
}

/* originally authored by Nick Pettit - https: //github.com/nickpettit/glide */
@keyframes wobble {
	0% { transform: translateX(0%); }
	15% { transform: translateX(-25%) rotate(-5deg); }
	30% { transform: translateX(20%) rotate(3deg); }
	45% { transform: translateX(-15%) rotate(-3deg); }
	60% { transform: translateX(10%) rotate(2deg); }
	75% { transform: translateX(-5%) rotate(-1deg); }
	100% { transform: translateX(0%); opacity: 1;}
}

.wobble {
	@include animation-name(wobble);
}

@keyframes wiggle {
	0% { transform: skewX(9deg); }
	10% { transform: skewX(-8deg); }
	20% { transform: skewX(7deg); }
	30% { transform: skewX(-6deg); }
	40% { transform: skewX(5deg); }
	50% { transform: skewX(-4deg); }
	60% { transform: skewX(3deg); }
	70% { transform: skewX(-2deg); }
	80% { transform: skewX(1deg); }
	90% { transform: skewX(0deg); }
	100% { transform: skewX(0deg); opacity: 1;}
}

.wiggle {
	@include animation-name(wiggle);
	@include animation-timing-function(ease-in);
}

/* originally authored by Nick Pettit - https: //github.com/nickpettit/glide */
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); opacity: 1;}
}

.pulse {
	@include animation-name(pulse);
}


@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp {
	@include animation-name(fadeInUp);
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	@include animation-name(fadeInDown);
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-40px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	@include animation-name(fadeInLeft);
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(40px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRight {
	@include animation-name(fadeInRight);
}

@keyframes fadeInUpBig {
	0% {
		opacity: 0;
		transform: translateY(2000px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUpBig {
	@include animation-name(fadeInUpBig);
}

@keyframes fadeInDownBig {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDownBig {
	@include animation-name(fadeInDownBig);
}

@keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeftBig {
	@include animation-name(fadeInLeftBig);
}

@keyframes fadeInRightBig {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRightBig {
	@include animation-name(fadeInRightBig);
}


@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    animation-name: fadeOut
}


@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }
}

.fadeOutDown {
    animation-name: fadeOutDown
}


@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

.fadeOutDownBig {
    animation-name: fadeOutDownBig
}


@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }
}

.fadeOutLeft {
    animation-name: fadeOutLeft
}


@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }
}

.fadeOutLeftBig {
    animation-name: fadeOutLeftBig
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }
}

.fadeOutRight {
    animation-name: fadeOutRight
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }
}

.fadeOutRightBig {
    animation-name: fadeOutRightBig
}


@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }
}

.fadeOutUp {
    animation-name: fadeOutUp
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

.fadeOutUpBig {
    animation-name: fadeOutUpBig
}


@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		opacity: 1;
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.bounceIn {
	@include animation-name(bounceIn);
}

@keyframes bounceInUp {
	0% {
		opacity: 0;
		transform: translateY(2000px);
	}

	60% {
		opacity: 1;
		transform: translateY(-30px);
	}

	80% {
		transform: translateY(10px);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.bounceInUp {
	@include animation-name(bounceInUp);
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}

	60% {
		opacity: 1;
		transform: translateY(30px);
	}

	80% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.bounceInDown {
	@include animation-name(bounceInDown);
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		transform: translateX(30px);
	}

	80% {
		transform: translateX(-10px);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.bounceInLeft {
	@include animation-name(bounceInLeft);
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		opacity: 1;
		transform: translateX(-30px);
	}

	80% {
		transform: translateX(10px);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.bounceInRight {
	@include animation-name(bounceInRight);
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9,.9,.9)
    }

    50%,55% {
        opacity: 1;
        transform: scale3d(1.1,1.1,1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }
}

.bounceOut {
    animation-duration: .75s;
    animation-name: bounceOut
}


@keyframes bounceOutDown {
    20% {
        transform: translate3d(0,10px,0)
    }

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

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

.bounceOutDown {
    animation-name: bounceOutDown
}


@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px,0,0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }
}

.bounceOutLeft {
    animation-name: bounceOutLeft
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,0,0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }
}

.bounceOutRight {
    animation-name: bounceOutRight
}


@keyframes bounceOutUp {
    20% {
        transform: translate3d(0,-10px,0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,20px,0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

.bounceOutUp {
    animation-name: bounceOutUp
}


@keyframes rotateIn {
	0% {
		transform-origin: center center;
		transform: rotate(-200deg);
		opacity: 0;
	}

	100% {
		transform-origin: center center;
		transform: rotate(0);
		opacity: 1;
	}
}

.rotateIn {
	@include animation-name(rotateIn);
}

@keyframes rotateInUpLeft {
	0% {
		transform-origin: left bottom;
		transform: rotate(90deg);
		opacity: 0;
	}

	100% {
		transform-origin: left bottom;
		transform: rotate(0);
		opacity: 1;
	}
}

.rotateInUpLeft {
	@include animation-name(rotateInUpLeft);
}

@keyframes rotateInDownLeft {
	0% {
		transform-origin: left bottom;
		transform: rotate(-90deg);
		opacity: 0;
	}

	100% {
		transform-origin: left bottom;
		transform: rotate(0);
		opacity: 1;
	}
}

.rotateInDownLeft {
	@include animation-name(rotateInDownLeft);
}

@keyframes rotateInUpRight {
	0% {
		transform-origin: right bottom;
		transform: rotate(-90deg);
		opacity: 0;
	}

	100% {
		transform-origin: right bottom;
		transform: rotate(0);
		opacity: 1;
	}
}

.rotateInUpRight {
	@include animation-name(rotateInUpRight);
}

@keyframes rotateInDownRight {
	0% {
		transform-origin: right bottom;
		transform: rotate(90deg);
		opacity: 0;
	}

	100% {
		transform-origin: right bottom;
		transform: rotate(0);
		opacity: 1;
	}
}

.rotateInDownRight {
	@include animation-name(rotateInDownRight);
}

@keyframes rotateOut {
    0% {
        transform-origin: center;
        opacity: 1
    }

    to {
        transform-origin: center;
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    animation-name: rotateOut
}

@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate(45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    animation-name: rotateOutDownLeft
}


@keyframes rotateOutDownRight {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    animation-name: rotateOutDownRight
}


@keyframes rotateOutUpLeft {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    animation-name: rotateOutUpLeft
}


@keyframes rotateOutUpRight {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    animation-name: rotateOutUpRight
}

@keyframes slideInLeft {
	0% {
		transform: translateX(-101%);
		visibility: visible
	}
	100% {
		transform: translateX(0)
	}
}
.slideInLeft {
	animation-name: slideInLeft
}

@keyframes slideInRight {
	0% {
		opacity: 1;
		transform: translateX(2000px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.slideInRight {
	animation-name: slideInRight;
}

@keyframes slideInUp {
	0% {
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}
	to {
		transform: translateZ(0)
	}
}
.slideInUp {
	animation-name: slideInUp
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0,-100%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInDown {
    animation-name: slideInDown
}

@keyframes slideOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 1;
		transform: translateX(-2000px);
	}
}
.slideOutLeft {
	animation-name: slideOutLeft;
}

@keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,100%,0)
    }
}

.slideOutDown {
    animation-name: slideOutDown
}
@keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%,0,0)
    }
}

.slideOutRight {
    animation-name: slideOutRight
}

@keyframes slideOutUp {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,-100%,0)
    }
}

.slideOutUp {
    animation-name: slideOutUp
}


@keyframes wave {
	0% {
		transform: rotateZ(0deg) translate3d(0, 10%, 0) rotateZ(0deg);
	}

	100% {
		transform: rotateZ(360deg) translate3d(0, 10%, 0) rotateZ(-360deg);
	}
}

@keyframes maskUp {
	from {
		transform: translate(0, 100%);
	}

	to {
		transform: translate(0, 0);
	}
}
.maskUp {
	animation-name: maskUp;
}

@keyframes flip {
    0% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
}

.appear-animation-visible.flip {
    backface-visibility: visible;
    animation-name: flip
}

@keyframes flipInX {
  0% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transition-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% { transform: perspective(400px); }
}
.flipInX { backface-visibility: visible !important; animation-name: flipInX; }

@keyframes flipInY {
  0% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transition-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transition-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% { transform: perspective(400px); }
}
.flipInY { backface-visibility: visible !important; animation-name: flipInY; }

@keyframes flipOutX {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    animation-duration: .75s;
    animation-name: flipOutX;
    backface-visibility: visible!important
}

@keyframes flipOutY {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    animation-duration: .75s;
    backface-visibility: visible!important;
    animation-name: flipOutY
}

@keyframes lightSpeedIn {
    0% {
        transform: translate3d(100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg)
    }

    to {
        transform: translateZ(0)
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(100%,0,0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0) rotate(-120deg)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.rollIn {
    animation-name: rollIn
}

@keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0) rotate(120deg)
    }
}

.rollOut {
    animation-name: rollOut
}

@keyframes hinge {
    0% {
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        transform: translate3d(0,700px,0);
        opacity: 0
    }
}

.hinge {
    animation-duration: 2s;
    animation-name: hinge
}


.revealDirTop:after {
    animation-name: blockSlideToTop;
}

.revealDirLeft:after {
    animation-name: blockSlideToLeft;
}

.revealDirRight:after {
    animation-name: blockSlideToRight;
}

.revealDirDown:after {
    animation-name: blockSlideToDown;
}

/* Block Slide */
@keyframes blockSlideToRight {
    0% { left: 0; right: auto; width: 0%; }
    45% { left: 0; right: auto; width: 100%; }
    55% { left: auto; right: 0; width: 100% }
    to { left: auto; right: 0; width: 0% }
}
@keyframes blockSlideToLeft {
	0%{left:auto;right:0;width:0%}
	45%{left:auto;right:0;width:100%}
	55%{left:0;right:auto;width:100%}
	to{left:0;right:auto;width:0%}
}
@keyframes blockSlideToTop {
	0%{top:auto;bottom:0;height:0%}
	45%{top:auto;bottom:0;height:100%}
	55%{top:0;bottom:auto;height:100%}
	to{top:0;bottom:auto;height:0%}
}
@keyframes blockSlideToDown {
	0%{top:0;bottom:auto;height:0%}
	45%{top:0;bottom:auto;height:100%}
	55%{top:auto;bottom:0;height:100%}
	to{top:auto;bottom:0;height:0%}
}
/* Text Entrance */
@keyframes textEntrance {
	from {
		opacity: 0;
		transform: translateY(100%) rotateX(-80deg);
	}

	to {
		transform: none;
		opacity: 1;
	}
}

.textEntrance {
	transform-origin: center top;
	transform-style: preserve-3d;
	transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-duration: 0.8s;
	animation-name: textEntrance;
}