@charset "utf-8";

@font-face {
	font-family: "VI_WN_ICON_CLOSE";
    src: url("../fonts/icons-close.eot");
    src: url("../fonts/icons-close.eot?#iefix") format("embedded-opentype"),
    url("../fonts/icons-close.woff2") format("woff2"),
    url("../fonts/icons-close.woff") format("woff"),
    url("../fonts/icons-close.ttf") format("truetype"),
    url("../fonts/icons-close.svg#icons-close") format("svg");
    font-weight: normal;
    font-style: normal;
 }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @	font-face {
		font-family: "VI_WN_ICON_CLOSE";
		src: url("../fonts/icons-close.svg#icons-close") format("svg");
	}
 }
[class^="vi-wn-icons-close-"]:before,
[class*=" vi-wn-icons-close-"]:before,
[class^="vi-wn-icons-close-"]:after,
[class*=" vi-wn-icons-close-"]:after {
	font-family: VI_WN_ICON_CLOSE;
	font-size: 20px;
	font-style: normal;
 }
.vi-wn-icons-close-cancel:before {
	content: "\f100";
 }
.vi-wn-icons-close-cross:before {
	content: "\f101";
 }
.vi-wn-icons-close-close:before {
	content: "\f102";
 }
.notify-close {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    border: none;
    overflow: hidden;
    display: flex;
    opacity: 1;
    transition: opacity 200ms;
}
.notify-close:before {
    content: "\f101";
    font-family: VI_WN_ICON_CLOSE;
    font-size: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.notify-close:hover {
    opacity: .6;
}


/* ✓ nFadeIn ·························································································································································· */
@keyframes nFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0px, 100%, 0px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.fade-in {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: nFadeIn;
    opacity: 0;
}

/* ✓ nFadeOut ·························································································································································· */
@keyframes nFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        bottom: 0;
        opacity: 0;
        transform: translate3d(0px, 100%, 0px);
    }
}
.fade-out {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: nFadeOut;
    opacity: 1;
}

/* ✓ nFadeOutDown ·························································································································································· */
@keyframes nFadeOutDown {
    0% {
        opacity: 1;
    }
    100% {
        bottom: 0;
        opacity: 0;
        transform: translate3d(0px, 100%, 0px);
    }
}
.fadeOutDown {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: nFadeOutDown;
    opacity: 1;
}

/* ✓ nFadeOutUp ·························································································································································· */
@keyframes nFadeOutUp {
    0% {
        opacity: 1;
    }
    100% {
        top: 0;
        opacity: 0;
        transform: translate3d(0px, -100%, 0px);
    }
}
.fadeOutUp {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: nFadeOutUp;
    opacity: 1;
}

/* ✓ nbounceIn ·························································································································································· */
@keyframes nbounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.bounceIn {
    animation-duration: 1s;
    animation-name: nbounceIn;
}

/* ✓ nbounceInDown ·························································································································································· */
@keyframes nbounceInDown {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: none;
    }
}
.bounceInDown {
    animation-duration: 1s;
    animation-name: nbounceInDown;
}

/* ✓ bounceInLeft ·························································································································································· */
@keyframes nbounceInLeft {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }
    75% {
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        transform: translate3d(5px, 0, 0);
    }
    to {
        transform: none;
    }
}
.bounceInLeft {
    animation-duration: 1s;
    animation-name: nbounceInLeft;
}

/* ✓ bounceInRight ·························································································································································· */
@keyframes nbounceInRight {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    to {
        transform: none;
    }
}
.bounceInRight {
    animation-duration: 1s;
    animation-name: nbounceInRight;
}

/* ✓ nbounceInUp ·························································································································································· */
@keyframes nbounceInUp {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
    75% {
        transform: translate3d(0, 10px, 0);
    }
    90% {
        transform: translate3d(0, -5px, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.bounceInUp {
    animation-duration: 1.5s;
    animation-name: nbounceInUp;
}

/* ✓ bounceOut ·························································································································································· */
@keyframes nbounceOut {
    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: 1.5s;
    animation-name: nbounceOut;
    opacity: 0;
}

/* ✓ bounceOutDown ·························································································································································· */
@keyframes nbounceOutDown {
    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-duration: 1.5s;
    animation-name: nbounceOutDown;
    opacity: 0;
}

/* ✓ bounceOutLeft ·························································································································································· */
@keyframes nbounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}
.bounceOutLeft {
    animation-duration: 1.5s;
    animation-name: nbounceOutLeft;
    opacity: 0;
}

/* ✓ bounceOutRight ·························································································································································· */
@keyframes nbounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}
.bounceOutRight {
    animation-duration: 1.5s;
    animation-name: nbounceOutRight;
    opacity: 0;
}

/* ✓ nbounceOutUp ·························································································································································· */
@keyframes nbounceOutUp {
    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-duration: 1.5s;
    animation-name: nbounceOutUp;
    opacity: 0;
}

/* ✓ fadeInDown ·························································································································································· */
@keyframes nfadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInDown {
    animation-duration: 1s;
    animation-name: nfadeInDown;
}

/* ✓ fadeInDownBig ·························································································································································· */
@keyframes nfadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInDownBig {
    animation-duration: 1s;
    animation-name: nfadeInDownBig;
}

/* ✓ fadeInLeft ·························································································································································· */
@keyframes nfadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInLeft {
    animation-duration: 1s;
    animation-name: nfadeInLeft;
}

/* ✓ fadeInLeftBig ·························································································································································· */
@keyframes nfadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInLeftBig {
    animation-duration: 1s;
    animation-name: nfadeInLeftBig;
}

/* ✓ fadeInRight ·························································································································································· */
@keyframes nfadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInRight {
    animation-duration: 1s;
    animation-name: nfadeInRight;
}

/* ✓ fadeInRightBig ·························································································································································· */
@keyframes nfadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInRightBig {
    animation-duration: 1s;
    animation-name: nfadeInRightBig;
}

/* ✓ fadeInUp ·························································································································································· */
@keyframes nfadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInUp {
    animation-duration: 1s;
    animation-name: nfadeInUp;
}

/* ✓ fadeInUpBig ·························································································································································· */
@keyframes nfadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInUpBig {
    animation-duration: 1s;
    animation-name: nfadeInUpBig;
}

/* ✓ fadeOutDown ·························································································································································· */
@keyframes nfadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}
.fadeOutDown {
    animation-duration: 1.5s;
    animation-name: nfadeOutDown;
    opacity: 0;
}

/* ✓ fadeOutDownBig ·························································································································································· */
@keyframes nfadeOutDownBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}
.fadeOutDownBig {
    animation-duration: 1.5s;
    animation-name: nfadeOutDownBig;
    opacity: 0;
}

/* ✓ fadeOutLeft ·························································································································································· */
@keyframes nfadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}
.fadeOutLeft {
    animation-duration: 1.5s;
    animation-name: nfadeOutLeft;
    opacity: 0;
}

/* ✓ fadeOutLeftBig ·························································································································································· */
@keyframes nfadeOutLeftBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}
.fadeOutLeftBig {
    animation-duration: 1.5s;
    animation-name: nfadeOutLeftBig;
    opacity: 0;
}

/* ✓ fadeOutRight ·························································································································································· */
@keyframes nfadeOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}
.fadeOutRight {
    animation-duration: 1.5s;
    animation-name: nfadeOutRight;
    opacity: 0;
}

/* ✓ fadeOutRightBig ·························································································································································· */
@keyframes nfadeOutRightBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}
.fadeOutRightBig {
    animation-duration: 1.5s;
    animation-name: nfadeOutRightBig;
    opacity: 0;
}

/* ✓ fadeOutUp ·························································································································································· */
@keyframes nfadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
.fadeOutUp {
    animation-duration: 1.5s;
    animation-name: nfadeOutUp;
    opacity: 0;
}

/* ✓ fadeOutUpBig ·························································································································································· */
@keyframes nfadeOutUpBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}
.fadeOutUpBig {
    animation-duration: 1.5s;
    animation-name: nfadeOutUpBig;
    opacity: 0;
}

/* ✓ flipInX ·························································································································································· */
@keyframes nflipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}
.flipInX {
    animation-duration: 1s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: nflipInX;
}

/* ✓ flipInY ·························································································································································· */
@keyframes nflipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}
.flipInY {
    animation-duration: 1s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: nflipInY;
}

/* ✓ flipOutX ·························································································································································· */
@keyframes nflipOutX {
    from {
        transform: perspective(400px);
    }
    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}
.flipOutX {
    animation-duration: 1.5s;
    animation-name: nflipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    opacity: 0;
}

/* ✓ flipOutY ·························································································································································· */
@keyframes nflipOutY {
    from {
        transform: perspective(400px);
    }
    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}
.flipOutY {
    animation-duration: 1.5s;
    animation-name: nflipOutY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    opacity: 0;
}

/* ✓ lightSpeedIn ·························································································································································· */
@keyframes nlightSpeedIn {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
.lightSpeedIn {
    animation-duration: 1s;
    animation-name: nlightSpeedIn;
    animation-timing-function: ease-out;
}

/* ✓ lightSpeedOut ·························································································································································· */
@keyframes nlightSpeedOut {
    from {
        opacity: 1;
    }
    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}
.lightSpeedOut {
    animation-duration: 1.5s;
    animation-name: nlightSpeedOut;
    animation-timing-function: ease-in;
    opacity: 0;
}

/* ✓ rotateIn ·························································································································································· */
@keyframes nrotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: none;
        opacity: 1;
    }
}
.rotateIn {
    animation-duration: 1s;
    animation-name: nrotateIn;
}

/* ✓ rotateInDownLeft ·························································································································································· */
@keyframes nrotateInDownLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}
.rotateInDownLeft {
    animation-duration: 1s;
    animation-name: nrotateInDownLeft;
}

/* ✓ rotateInDownRight ·························································································································································· */
@keyframes nrotateInDownRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1;
    }
}
.rotateInDownRight {
    animation-duration: 1s;
    animation-name: nrotateInDownRight;
}

/* ✓ rotateInUpLeft ·························································································································································· */
@keyframes nrotateInUpLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}
.rotateInUpLeft {
    animation-duration: 1s;
    animation-name: nrotateInUpLeft;
}

/* ✓ rotateInUpRight ·························································································································································· */
@keyframes nrotateInUpRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }
    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1;
    }
}
.rotateInUpRight {
    animation-duration: 1s;
    animation-name: nrotateInUpRight;
}

/* ✓ rotateOut ·························································································································································· */
@keyframes nrotateOut {
    from {
        transform-origin: center;
        opacity: 1;
    }
    to {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}
.rotateOut {
    animation-duration: 1.5s;
    animation-name: nrotateOut;
    opacity: 0;
}

/* ✓ rotateOutDownLeft ·························································································································································· */
@keyframes nrotateOutDownLeft {
    from {
        transform-origin: left bottom;
        opacity: 1;
    }
    to {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}
.rotateOutDownLeft {
    animation-duration: 1.5s;
    animation-name: nrotateOutDownLeft;
    opacity: 0;
}

/* ✓ rotateOutDownRight ·························································································································································· */
@keyframes nrotateOutDownRight {
    from {
        transform-origin: right bottom;
        opacity: 1;
    }
    to {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}
.rotateOutDownRight {
    animation-duration: 1.5s;
    animation-name: nrotateOutDownRight;
    opacity: 0;
}

/* ✓ rotateOutUpLeft ·························································································································································· */
@keyframes nrotateOutUpLeft {
    from {
        transform-origin: left bottom;
        opacity: 1;
    }
    to {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}
.rotateOutUpLeft {
    animation-duration: 1.5s;
    animation-name: nrotateOutUpLeft;
    opacity: 0;
}

/* ✓ rotateOutUpRight ·························································································································································· */
@keyframes nrotateOutUpRight {
    from {
        transform-origin: right bottom;
        opacity: 1;
    }
    to {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}
.rotateOutUpRight {
    animation-duration: 1.5s;
    animation-name: nrotateOutUpRight;
    opacity: 0;
}

/* ✓ rollIn ·························································································································································· */
@keyframes nrollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.rollIn {
    animation-duration: 1s;
    animation-name: nrollIn;
}

/* ✓ rollOut ·························································································································································· */
@keyframes nrollOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}
.rollOut {
    animation-duration: 1.5s;
    animation-name: nrollOut;
    opacity: 0;
}

/* ✓ zoomIn ·························································································································································· */
@keyframes nZoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}
.zoomIn {
    animation-duration: 1s;
    animation-name: nZoomIn;
}

/* ✓ zoomInDown ·························································································································································· */
@keyframes nZoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInDown {
    animation-duration: 1s;
    animation-name: nZoomInDown;
}

/* ✓ zoomInLeft ·························································································································································· */
@keyframes nZoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInLeft {
    animation-duration: 1s;
    animation-name: nZoomInLeft;
}

/* ✓ zoomInRight ·························································································································································· */
@keyframes nZoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInRight {
    animation-duration: 1s;
    animation-name: nZoomInRight;
}

/* ✓ zoomInUp ·························································································································································· */
@keyframes nZoomInUp {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInUp {
    animation-duration: 1s;
    animation-name: nZoomInUp;
}

/* ✓ zoomOut ·························································································································································· */
@keyframes nZoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    to {
        opacity: 0;
    }
}
.zoomOut {
    animation-duration: 1.5s;
    animation-name: nZoomOut;
    opacity: 0;
}

/* ✓ zoomOutDown ·························································································································································· */
@keyframes nZoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomOutDown {
    animation-duration: 1.5s;
    animation-name: nZoomOutDown;
    opacity: 0;
}

/* ✓ zoomOutLeft ·························································································································································· */
@keyframes nZoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }
    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center;
    }
}
.zoomOutLeft {
    animation-duration: 1.5s;
    animation-name: nZoomOutLeft;
    opacity: 0;
}

/* ✓ zoomOutRight ·························································································································································· */
@keyframes nZoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }
    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center;
    }
}
.zoomOutRight {
    animation-duration: 1.5s;
    animation-name: nZoomOutRight;
    opacity: 0;
}

/* ✓ zoomOutUp ·························································································································································· */
@keyframes nZoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomOutUp {
    animation-duration: 1.5s;
    animation-name: nZoomOutUp;
    opacity: 0;
}

/* ✓ slideInDown ·························································································································································· */
@keyframes nslideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInDown {
    animation-duration: 1s;
    animation-name: nslideInDown;
}

/* ✓ slideInLeft ·························································································································································· */
@keyframes nslideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInLeft {
    animation-duration: 1s;
    animation-name: nslideInLeft;
}

/* ✓ slideInRight ·························································································································································· */
@keyframes nslideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInRight {
    animation-duration: 1s;
    animation-name: nslideInRight;
}

/* ✓ slideInUp ·························································································································································· */
@keyframes nslideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInUp {
    animation-duration: 1s;
    animation-name: nslideInUp;
}

/* ✓ slideOutDown ·························································································································································· */
@keyframes nslideOutDown {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
}
.slideOutDown {
    animation-duration: 1.5s;
    animation-name: nslideOutDown;
    opacity: 0;
}

/* ✓ slideOutLeft ·························································································································································· */
@keyframes nslideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
}
.slideOutLeft {
    animation-duration: 1.5s;
    animation-name: nslideOutLeft;
    opacity: 0;
}

/* ✓ slideOutRight ·························································································································································· */
@keyframes nslideOutRight {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}
.slideOutRight {
    animation-duration: 1.5s;
    animation-name: nslideOutRight;
    opacity: 0;
}

/* ✓ slideOutUp ·························································································································································· */
@keyframes nslideOutUp {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        visibility: hidden;
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
.slideOutUp {
    animation-duration: 1.5s;
    animation-name: nslideOutUp;
    opacity: 0;
}