﻿/* ==============================
   Custom appear animation
   ============================== */

.appear-animate .wordsAnimIn .word {
    opacity: 0;
    -webkit-transform: translateY(1em) scale(.75) skew(-5deg) rotate(7deg);
    transform: translateY(1em) scale(.75) skew(-5deg) rotate(7deg);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition: all 0.5s cubic-bezier(0, 0.55, 0.45, 1);
    transition: all 0.5s cubic-bezier(0, 0.55, 0.45, 1);
    transition-delay: calc( 0.05s * var(--word-index) );
}

html:not(.mobile) .appear-animate .wordsAnimIn .word {
    will-change: opacity, transform;
}

@media print {
    .appear-animate .wordsAnimIn .word {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

.wordsAnimIn.animated .word,
.mobile .wordsAnimIn .word {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1) skew(0) rotate(0);
    transform: translateY(0) scale(1) skew(0) rotate(0);
}

.appear-animate .wordsAnimLongIn .word {
    opacity: 0;
    -webkit-transform: translateY(.5em);
    transform: translateY(.5em);
    -webkit-transition: all 2.5s cubic-bezier(0, 0.55, 0.45, 1);
    transition: all 2.5s cubic-bezier(0, 0.55, 0.45, 1);
    -webkit-transition-delay: calc( 0.3s * var(--word-index) );
    transition-delay: calc( 0.3s * var(--word-index) );
}

html:not(.mobile) .appear-animate .wordsAnimLongIn .word {
    will-change: opacity, transform;
}

@media print {
    .appear-animate .wordsAnimLongIn .word {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

.wordsAnimLongIn.animated .word,
.mobile .wordsAnimLongIn .word {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.appear-animate .linesAnimIn .word {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateY(60px) translateZ(0) scale(1.0) rotate(0.02deg);
    transform: translateY(60px) translateZ(0) scale(1.0) rotate(0.02deg);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition: all 1s cubic-bezier(0, 0.55, 0.45, 1);
    transition: all 1s cubic-bezier(0, 0.55, 0.45, 1);
    -webkit-transition-delay: calc( 0.1s * var(--line-index) );
    transition-delay: calc( 0.1s * var(--line-index) );
}

html:not(.mobile) .appear-animate .linesAnimIn .word {
    will-change: opacity, transform;
}

@media print {
    .appear-animate .linesAnimIn .word {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

.linesAnimIn.animated .word,
.mobile .linesAnimIn .word {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0) scale(1.0) rotate(0.02deg);
    transform: translateY(0) translateZ(0) scale(1.0) rotate(0.02deg);
}

/*
 * Extra styles for animate.css
 */

.wow,
.wow-menubar,
.wow-p {
    opacity: 0.01;
}

html:not(.mobile) .wow,
html:not(.mobile) .wow-menubar,
html:not(.mobile) .wow-p {
    will-change: opacity, transform;
}

.appear-animate .wow.scaleOutIn {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

    .appear-animate .wow.animated,
    .appear-animate .wow.scaleOutIn.animated,
    .appear-animate .wow-p.amimated,
    .appear-animate .wow-menubar.animated,
    .mobile .appear-animate .wow,
    .mobile .appear-animate .wow-menubar,
    .mobile .appear-animate .wow-p {
        opacity: 1;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

@media print {
    .wow,
    .wow.scaleOutIn,
    .wow-menubar,
    .wow-p {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
}

.fadeInDownShort, .fadeInUpShort, .scalexIn, .fadeScaleIn,
.fadeScaleOutIn, .fadeScaleOutInShort,
.backInDown, .backInLeft, .backInRight, .backInUp,
.bounceIn, .bounceInDown, .bounceInLeft, .bounceInRight, .bounceInUp,
.fadeIn, .fadeInDown, .fadeInDownBig, .fadeInLeft, .fadeInLeftBig,
.fadeInRight, .fadeInRightBig, .fadeInUp, .fadeInUpBig, .fadeInTopLeft,
.fadeInTopRight, .fadeInBottomLeft, .fadeInBottomRight, .flipInX, .flipInY,
.lightSpeedInRight, .lightSpeedInLeft, .rotateIn, .rotateInDownLeft,
.rotateInDownRight, .rotateInUpLeft, .rotateInUpRight, .jackInTheBox,
.rollIn, .zoomIn, .zoomInDown, .zoomInLeft, .zoomInRight, .zoomInUp {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

@keyframes fadeInDownShort {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-37px,0);
        transform: translate3d(0,-37px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

.fadeInDownShort {
    -webkit-animation-name: fadeInDownShort;
    animation-name: fadeInDownShort
}

@keyframes fadeInUpShort {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,37px,0);
        transform: translate3d(0,37px,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

.fadeInUpShort {
    -webkit-animation-name: fadeInUpShort;
    animation-name: fadeInUpShort;
}

@keyframes scalexIn {
    0% {
        opacity: 0;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.scalexIn {
    -webkit-animation-name: scalexIn;
    animation-name: scalexIn;
}

@keyframes fadeScaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.975) rotate(0.1deg);
        transform: scale(.975) rotate(0.1deg);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1.001) rotate(0);
        transform: scale(1.00) rotate(0);
    }
}

.fadeScaleIn {
    -webkit-animation-name: fadeScaleIn;
    animation-name: fadeScaleIn;
}

@keyframes scaleOutIn {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.scaleOutIn {
    -webkit-animation-name: scaleOutIn;
    animation-name: scaleOutIn;
}

@keyframes fadeScaleOutIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.fadeScaleOutIn {
    -webkit-animation-name: fadeScaleOutIn;
    animation-name: fadeScaleOutIn;
}

@keyframes fadeScaleOutInShort {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.fadeScaleOutInShort {
    -webkit-animation-name: fadeScaleOutInShort;
    animation-name: fadeScaleOutInShort;
}
