.owl-carousel .animated {
	-webkit-animation-duration: 1000ms;
	animation-duration: 1000ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
	z-index: 4
}

.owl-carousel .owl-animated-out {
	z-index: 2
}

.owl-carousel .fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut
}

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

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

.owl-height {
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out
}

.owl-carousel {
	/*display: none;*/
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 1
}

.owl-carousel .owl-stage {
	position: relative;
	-ms-touch-action: pan-Y
}

.owl-carousel .owl-stage:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0
}

.owl-carousel .owl-stage-outer {
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
	cursor: pointer;
	cursor: hand;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.owl-carousel.owl-loaded {
	display: block
}

.owl-carousel.owl-loading {
	opacity: 0;
	display: block
}

.owl-carousel.owl-hidden {
	opacity: 0
}

.owl-carousel .owl-refresh .owl-item {
	display: none
}

.owl-carousel .owl-item {
	position: relative;
	min-height: 1px;
	float: left;
	-webkit-backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.owl-carousel .owl-item img {
	display: block;
	width: 100%;
	-webkit-transform-style: preserve-3d
}

.owl-carousel.owl-text-select-on .owl-item {
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto
}

.owl-carousel .owl-grab {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -o-grab;
	cursor: -ms-grab;
	cursor: grab
}

.owl-carousel.owl-rtl {
	direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
	float: right
}

.no-js .owl-carousel {
	display: block
}

.owl-carousel .owl-item img {
	transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
	position: relative;
	height: 100%;
	background: #000
}

.owl-carousel .owl-video-play-icon {
	position: absolute;
	height: 80px;
	width: 80px;
	left: 50%;
	top: 50%;
	margin-left: -40px;
	margin-top: -40px;
	background: url(../css/owl.video.play.png) no-repeat;
	cursor: pointer;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-webkit-transition: scale 100ms ease;
	-moz-transition: scale 100ms ease;
	-ms-transition: scale 100ms ease;
	-o-transition: scale 100ms ease;
	transition: scale 100ms ease
}

.owl-carousel .owl-video-play-icon:hover {
	-webkit-transition: scale(1.3, 1.3);
	-moz-transition: scale(1.3, 1.3);
	-ms-transition: scale(1.3, 1.3);
	-o-transition: scale(1.3, 1.3);
	transition: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
	display: none
}

.owl-carousel .owl-video-tn {
	opacity: 0;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	-webkit-transition: opacity 400ms ease;
	-moz-transition: opacity 400ms ease;
	-ms-transition: opacity 400ms ease;
	-o-transition: opacity 400ms ease;
	transition: opacity 400ms ease
}

.owl-carousel .owl-video-frame {
	position: relative;
	z-index: 1
}
/* dot */
.visual_section .owl-dots {
	position: absolute;
	z-index: 20;
	bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	left: 50%;
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.owl-dots {
	position: absolute;
	z-index: 20;
	bottom: 15px;
	/*margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;*/
	display: inline-block;
	text-align: center;
	left: 50%;
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.owl-theme .owl-dots .owl-dot {
	display: inline-block;
	zoom: 1;
}
.owl-theme .owl-dots .owl-dot span {
	position: relative;
    display: inline-block;
	width: 12px;
	height: 12px;
	margin: 5px 5px;
	-webkit-backface-visibility: visible;
	border-radius: 30px;
}
.owl-theme .owl-dots .owl-dot span:before {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 1px solid #666;
	border-radius: 30px;
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
    content: '';
	/*box-shadow: 0 0 1px transparent;
	box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;*/
}
.owl-theme .owl-dots .owl-dot.active span:before {
	background-color: #000;
	width: 12px;
    height: 12px;
}






/*Owl Animation : https://codepen.io/SGD/pen/bGNMmBa */

%owl-animate{
    .owl-stage{
        transform: none !important;
        width: 100% !important;
        position: relative;
        height: 0;
        border: none;
        overflow: hidden;
        display: block;
        padding-top: 31.25%; // 1600x500
    }

    .owl-item{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0 !important;
        left: 0 !important;
        opacity: 0;
        z-index: 10;

        &.active{
            z-index: 20;
            opacity: 1;
        }

        &.owl-animated-out{
            opacity: 1;
        }

        &.owl-animated-in{
            opacity: 0;
        }
    }
}


/*****************************************/
/* Soft Scale */
/*****************************************/
.fxSoftScale{
    .animated{
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
}

.fxSoftScaleOutNext {
    animation-name: scaleUp;
}

.fxSoftScaleInNext {
    animation-name: scaleDownUp;
}

.fxSoftScaleOutPrev {
    animation-name: scaleDown;
}

.fxSoftScaleInPrev {
    animation-name: scaleUpDown;
}

@keyframes scaleUp {
    from {
        opacity: 1;
    }
    to {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes scaleDownUp {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleDown {
    from {}
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes scaleUpDown {
    from {
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/*****************************************/
/* Press away */
/*****************************************/
.fxPressAway{
    .animated{
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
}

.fxPressAwayOutNext {
    animation-name: slideOutScaleRight;
}

.fxPressAwayInNext {
    animation-name: slideInFromLeft;
}

.fxPressAwayOutPrev {
    animation-name: slideOutScaleLeft;
}

.fxPressAwayInPrev {
    animation-name: slideInFromRight;
}

@keyframes slideOutScaleRight {
    from {} 
    to {
        transform: translateX(100%) scale(0.9);
        opacity: 0;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutScaleLeft {
    from {} 
    to {
        transform: translateX(-100%) scale(0.9);
        opacity: 0;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}


/*****************************************/
/* Slide Swing */
/*****************************************/
.fxSideSwing{
    .animated{
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(1, -0.2, 0, 1);
    }
}

.fxSideSwingOutNext {
    animation-name: slideOutScaleRight;
}

.fxSideSwingInNext {
    animation-name: slideInFromLeft;
}

.fxSideSwingOutPrev {
    animation-name: slideOutScaleLeft;
}

.fxSideSwingInPrev {
    animation-name: slideInFromRight;
}


/*****************************************/
/* Fortune wheel */
/*****************************************/
.fxFortuneWheel {
    .owl-stage{
        perspective: 1600px;
    }

    .animated{
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
}

.fxFortuneWheelOutNext {
    animation-name: slideOutScaleRight;
}

.fxFortuneWheelInNext {
    transform-origin: 100% 50%;
    animation-name: rotateInFromLeft;
}

.fxFortuneWheelOutPrev {
    animation-name: slideOutScaleLeft;
}

.fxFortuneWheelInPrev {
    transform-origin: 0% 50%;
    animation-name: rotateInFromRight;
}

@keyframes rotateInFromLeft {
    from {
        transform: translateX(-100%) rotateY(-55deg);
    }
    to {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes rotateInFromRight {
    from {
        transform: translateX(100%) rotateY(55deg);
    }
    to {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }
}


/*****************************************/
/* Swipe */
/*****************************************/
$owl-swipe: 0.8s forwards ease-in-out;

.fxSwipe{
    @extend %owl-animate;

    .owl-item{
        &.fxSwipeOutNext{
            z-index: 30;
        }

        &.fxSwipeInPrev{
            opacity: 1
        }
    }
}

.fxSwipeOutNext {
    animation: decreaseHeight $owl-swipe;
}

.fxSwipeInNext {
    animation: show $owl-swipe;
}

.fxSwipeOutPrev {
    animation: hide $owl-swipe;
}

.fxSwipeInPrev {
    animation: increaseHeight $owl-swipe;
}

@keyframes increaseHeight {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@keyframes decreaseHeight {
    from {}
    to {
        height: 0;
    }
}

@keyframes show {
    0% {
        opacity: 0;
    }
    1%,100% {
        opacity: 1;
    }
}

@keyframes hide {
    0%,99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/*****************************************/
/* Push reveal */
/*****************************************/
.fxPushReveal{
    @extend %owl-animate;

    .owl-item.animated{
        opacity: 1;
        animation-duration: 0.7s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
}

.fxPushRevealOutNext {
    animation-name: slideOutBottom;
}

.fxPushRevealInNext {
    animation-name: slideInHalfFromTop;

    .fxPushReveal &.owl-item{
        z-index: 5;
    }
}

.fxPushRevealOutPrev {
    animation-name: slideOutHalfTop;
}

.fxPushRevealInPrev {
    animation-name: slideInFromBottom;
}

@keyframes slideOutBottom {
    from {} 
    to {
        transform: translateY(100%);
    }
}

@keyframes slideInHalfFromTop {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideOutHalfTop {
    from {} 
    to {
        transform: translateY(-50%);
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}


/*****************************************/
/* Snap in */
/*****************************************/
.fxSnapIn{
    @extend %owl-animate;

    .owl-item{
        &:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            pointer-events: none;
            background-color: rgba(0,0,0,0.8);
            transition: opacity 0.4s 0.1s ease-in;
        }

        &.owl-animated-out{
            &:after{
                opacity: 1;
            }
        }

        &.owl-animated-in{
            opacity: 1;
        }
    }

    .animated{
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .owl-animated-in{
        animation-timing-function: ease-in;
    }

    .owl-animated-out{
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
}

.fxSnapInOutNext {
    animation-name: slideOutLeft;
}

.fxSnapInInNext {
    animation-name: slideFromRightFast;
}

.fxSnapInOutPrev {
    animation-name: slideOutRight;
}

.fxSnapInInPrev {
    animation-name: slideFromLeftFast;
}

@keyframes slideOutLeft {
    from {} 
    to {
        transform: translateX(-10%);
    }
}

@keyframes slideFromRightFast {
    0%,50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes slideOutRight {
    from {} 
    to {
        transform: translateX(10%);
    }
}

@keyframes slideFromLeftFast {
    0%,50% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/*****************************************/
/* Let me in */
/*****************************************/

.fxLetMeIn {
    @extend %owl-animate;

    .owl-stage{
        perspective: 1600px;
    }

    .owl-item {
        &:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            pointer-events: none;
            background-color: rgba(0,0,0,0.6);
            transition: opacity 0.5s ease-in-out;
        }

        &.fxLetMeInOutNext,
        &.fxLetMeInOutPrev{
            &:after {
                opacity: 1;
            }
        }

        &.fxLetMeInInNext,
        &.fxLetMeInInPrev{
            z-index: 30;
            opacity: 1;
        }
    }
}

.fxLetMeInOutNext {
    transform-origin: 0% 50%;
    animation: rotateOutRight 0.5s forwards ease-in-out;
}

.fxLetMeInInNext {
    animation: slideFromRightFast 0.5s forwards ease;
}

.fxLetMeInOutPrev {
    transform-origin: 100% 0%;
    animation: rotateOutLeft 0.5s forwards ease-in-out;
}

.fxLetMeInInPrev {
    animation: slideFromLeftFast 0.5s forwards ease;
}

@keyframes rotateOutRight {
    from {} 
    to {
        transform: rotateY(10deg);
    }
}

@keyframes rotateOutLeft {
    from {} 
    to {
        transform: rotateY(-10deg);
    }
}

/*****************************************/
/* Stick it */
/*****************************************/

.fxStickIt{
    @extend %owl-animate;

    .owl-stage{
        perspective: 1600px;
    }

    .owl-item{
        &.fxStickItInNext{
            opacity: 1;
        }
    }
}

.fxStickItOutNext {
    transform-origin: 50% 0%;
    animation: rotateBottomSideOut 0.8s forwards ease-in;
}

.fxStickItInNext {
    animation: slideInFromBottomDelayed 0.8s forwards;
}

.fxStickItOutPrev {
    opacity: 1;
    animation: slideOutToBottom 0.8s forwards;
}

.fxStickItInPrev {
    transform-origin: 50% 0%;
    animation: rotateBottomSideIn 0.8s 0.1s forwards ease-in;
}

@keyframes rotateBottomSideOut {
    from {} 
    40% {
        transform: rotateX(-15deg);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateZ(-200px);
    }
}

@keyframes slideInFromBottomDelayed {
    0%, 30% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes rotateBottomSideIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateZ(-200px);
    }
    60% {
        transform: scale(1) translateZ(0) rotateX(-15deg);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0) rotateX(0deg);
    }
}

/*****************************************/
/* Archive me */
/*****************************************/
$owl-archive-me: 0.7s cubic-bezier(0.7, 0, 0.3, 1) !default;

.fxArchiveMe{
    .owl-item{
        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background-color: rgba(0,0,0,0.7);
            transition: opacity $owl-archive-me;
        }

        &.fxArchiveMeInNext{
            z-index: 30;
            opacity: 1;

            &:after{
                transition: none;
            }
        }

        &:after,
        &.fxArchiveMeOutNext:before {
            opacity: 1;
        }

        &:before,
        &.active:after,
        &.fxArchiveMeInNext:after,
        &.fxArchiveMeInPrev:after {
            opacity: 0;
        }
    }
}

.fxArchiveMeOutNext {
    animation: scaleHalfDown $owl-archive-me;
}

.fxArchiveMeInNext {
    animation: slideInFromBottom $owl-archive-me;
}

.fxArchiveMeOutPrev {
    animation: slideOutToBottom $owl-archive-me;
}

.fxArchiveMeInPrev {
    animation: scaleHalfUp $owl-archive-me;
}

@keyframes scaleHalfDown {
    from {} 
    to {
        transform: scale(0.6);
        opacity: 0;
    }
}

@keyframes slideOutToBottom {
    from {} 
    to {
        transform: translateY(100%);
    }
}

@keyframes scaleHalfUp {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/*****************************************/
/* Vertical growth */
/*****************************************/
$owl-fxVGrowth: 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1) !default;

.fxVGrowth{
    .owl-item{
        &.fxVGrowthInNext,
        &.fxVGrowthInPrev{
            z-index: 30;
            opacity: 1;
        }
    }
}

.fxVGrowthOutNext {
    animation: scaleDown $owl-fxVGrowth;
}

.fxVGrowthInNext {
    transform-origin: 50% 100%;
    animation: maximize $owl-fxVGrowth;
}

.fxVGrowthOutPrev {
    animation: scaleDown $owl-fxVGrowth;
}

.fxVGrowthInPrev {
    transform-origin: 50% 0%;
    animation: maximize $owl-fxVGrowth;
}

@keyframes maximize {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}


/*****************************************/
/* Slide Behind */
/* From https://github.com/hakimel/kontext by Hakim El Hattab, http://hakim.se */
/*****************************************/
$owl-slideBehind: 0.8s forwards !default;

.fxSlideBehind{
    @extend %owl-animate;

    .owl-stage{
        perspective: 1000px;
    }
}

.fxSlideBehindOutNext {
    animation: hideLeft $owl-slideBehind;
}

.fxSlideBehindInNext {
    animation: showRight $owl-slideBehind;
}

.fxSlideBehindOutPrev {
    animation: hideRight $owl-slideBehind;
}

.fxSlideBehindInPrev {
    animation: showLeft $owl-slideBehind;
}

@keyframes hideLeft {
    0% {
        transform: translateZ( 0px );
    }
    40% {
        transform: translate( 0, -40% ) scale( 0.8 ) rotateX( -20deg );
        z-index: 30;
    }
    100% {
        opacity: 1;
        transform: translateZ( -400px );
    }
}

@keyframes showRight {
    0% {
        transform: translateZ( -400px );
        opacity: 1;
    }
    40% {
        transform: translate( 0, 40% ) scale( 0.8 ) rotateX( 20deg );
        opacity: 1;
    }
    41% {
        transform: translate( 0, 40% ) scale( 0.8 ) rotateX( 20deg );
        opacity: 1;
        z-index: 30;
    }
    100% {
        transform: translateZ( 0px );
        opacity: 1;
        z-index: 30;
    }
}

@keyframes hideRight {
    0% {
        transform: translateZ( 0px );
    }
    40% {
        transform: translate( 0, 40% ) scale( 0.8 ) rotateX( 20deg );
        z-index: 30;
    }
    100% {
        opacity: 1;
        transform: translateZ( -400px );
    }
}

@keyframes showLeft {
    0% {
        transform: translateZ( -400px );
        opacity: 1;
    }
    40% {
        transform: translate( 0, -40% ) scale( 0.8 ) rotateX( -20deg );
        opacity: 1;
    }
    41% {
        transform: translate( 0, -40% ) scale( 0.8 ) rotateX( -20deg );
        opacity: 1;
        z-index: 30;
    }
    100% {
        transform: translateZ( 0px );
        opacity: 1;
        z-index: 30;
    }
}


/*****************************************/
/* Soft Pulse */
/*****************************************/

.fxSoftPulseOutPrev,
.fxSoftPulseOutNext {
    animation: scaleUpFadeOut 0.8s forwards ease-in;
}

.fxSoftPulseInPrev,
.fxSoftPulseInNext {
    animation: scaleDownFadeIn 0.8s forwards ease-out;
}

@keyframes scaleUpFadeOut {
    from {} 
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    75% {
        transform: scale(1.1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes scaleDownFadeIn {
    from {} 
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/*****************************************/
/* Earthquake */
/* From https://elrumordelaluz.github.io/csshake/ by Lionel, http://t.co/thCECnx1Yg */
/*****************************************/

.fxEarthquake{
    .owl-item{
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            pointer-events: none;
            background-color: rgba(0,0,0,0.3);
            transition: opacity 0.5s;
        }

        &:after,
        &:after {
            opacity: 1;
        }

        &.fxEarthquakeInPrev{
            opacity: 1;
        }
    }
}

.fxEarthquakeOutNext {
    animation: shakeSlideBottom 1s 0.1s forwards;
}

.fxEarthquakeInNext {
    animation: pushFromTop 1s 0.1s forwards;
}

.fxEarthquakeOutPrev {
    animation: shakeSlideTop 1s 0.1s forwards;
}

.fxEarthquakeInPrev{
    animation: pushFromBottom 1s 0.1s forwards;
}

@keyframes shakeSlideBottom {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    2% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    4% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    6% { transform: translate(0px, 0px) rotate(-0.5deg); }
    8% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    10% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    12% { transform: translate(0px, 0px) rotate(-0.5deg); }
    14% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    16% { transform: translate(0px, 0px) rotate(-0.5deg); }
    18% { transform: translate(0px, -1px) rotate(-0.5deg); }
    20% { transform: translate(0px, -1px) rotate(-0.5deg); }
    22% { transform: translate(0px, -1px) rotate(-0.5deg); }
    24% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    26% { transform: translate(0px, 0px) rotate(-0.5deg); }
    28% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    30% { transform: translate(0px, -1px) rotate(-0.5deg); }
    32% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    34% { transform: translate(0px, -1px) rotate(-0.5deg); }
    36% { transform: translate(0px, 0px) rotate(-0.5deg); }
    38% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    40% { transform: translate(0px, 0px) rotate(-0.5deg); }
    42% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    44% { transform: translate(0px, -1px) rotate(-0.5deg); }
    46% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    48% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    50% { transform: translate(0px, -1px) rotate(-0.5deg); }
    52% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    54% { transform: translate(0px, -1px) rotate(-0.5deg); }
    56% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    58% { transform: translate(0px, 0px) rotate(-0.5deg); }
    60% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    62% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    64% { transform: translate(0px, -1px) rotate(-0.5deg); }
    66% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    68% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    70% { transform: translate(0px, 0px) rotate(-0.5deg); }
    100% { transform: translateY(100%); }
}

@keyframes pushFromTop {
    0%, 70% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shakeSlideTop {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    2% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    4% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    6% { transform: translate(0px, 0px) rotate(-0.5deg); }
    8% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    10% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    12% { transform: translate(0px, 0px) rotate(-0.5deg); }
    14% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    16% { transform: translate(0px, 0px) rotate(-0.5deg); }
    18% { transform: translate(0px, -1px) rotate(-0.5deg); }
    20% { transform: translate(0px, -1px) rotate(-0.5deg); }
    22% { transform: translate(0px, -1px) rotate(-0.5deg); }
    24% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    26% { transform: translate(0px, 0px) rotate(-0.5deg); }
    28% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    30% { transform: translate(0px, -1px) rotate(-0.5deg); }
    32% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    34% { transform: translate(0px, -1px) rotate(-0.5deg); }
    36% { transform: translate(0px, 0px) rotate(-0.5deg); }
    38% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    40% { transform: translate(0px, 0px) rotate(-0.5deg); }
    42% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    44% { transform: translate(0px, -1px) rotate(-0.5deg); }
    46% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    48% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    50% { transform: translate(0px, -1px) rotate(-0.5deg); }
    52% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    54% { transform: translate(0px, -1px) rotate(-0.5deg); }
    56% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    58% { transform: translate(0px, 0px) rotate(-0.5deg); }
    60% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    62% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    64% { transform: translate(0px, -1px) rotate(-0.5deg); }
    66% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    68% { transform: translate(-1px, 0px) rotate(-0.5deg); }
    70% { transform: translate(0px, 0px) rotate(-0.5deg); }
    100% { transform: translateY(-100%); }
}

@keyframes pushFromBottom {
    0%, 70% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*****************************************/
/* Cliff diving */
/*****************************************/
$owl-fxCliffDiving: 0.9s cubic-bezier(0.7, 0, 0.3, 1) !default;

.fxCliffDiving{
    .owl-item{
        transform-origin: 50% 400%;

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            pointer-events: none;
            background-color: rgba(0,0,0,1);
            transition: opacity $owl-fxCliffDiving;
        }

        &.fxCliffDivingInNext,
        &.fxCliffDivingInPrev{
            opacity: 1;
        }
    }
}

.fxCliffDivingOutNext {
    animation: rotateOutCircLeft $owl-fxCliffDiving;
}

.fxCliffDivingInNext {
    animation: rotateInCircRight $owl-fxCliffDiving;
}

.fxCliffDivingOutPrev {
    animation: rotateOutCircRight $owl-fxCliffDiving;
}

.fxCliffDivingInPrev {
    animation: rotateInCircLeft $owl-fxCliffDiving;
}

@keyframes rotateOutCircLeft {
    from {} 
    to {
        transform: rotate(-20deg) translateX(-100%);
    }
}

@keyframes rotateInCircRight {
    from {
        transform: rotate(20deg) translateX(100%);
    }
    to {
        transform: rotate(0deg) translateX(0);
    }
}

@keyframes rotateOutCircRight {
    from {} 
    to {
        transform: rotate(20deg) translateX(100%);
    }
}

@keyframes rotateInCircLeft {
    from {
        transform: rotate(-20deg) translateX(-100%);
    }
    to {
        transform: rotate(0deg) translateX(0);
    }
}