/*
Instructions:
    - Add "animated--element" to the element you want to animate
    - Add "animated--element__{{effect}}" to specify the desired effect, {{effect}} can be: expand, rotate, fade, fadeInLeftShort, FlipInX
    - Add "animate--text__hide" to the text element you want to hide while scrolling
*/

@-webkit-keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.animated--element {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated--element__expand {
    transform: scale(0);
    transition: all 2s;
}

.animated--element__rotate {
    transform: rotate(0deg);
    transition: all 2s;
}

.animated--element__fade {
    opacity: 0;
    transition: all 2s;
}

.animated--element__expand.animate {
    transform: scale(1);
}

.animated--element__rotate.animate {
    transform: rotate(360deg);
}

.animated--element__fade.animate {
    opacity: 1;
}
.animated--element__fadeInLeftShort {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
.animated--element__fadeInLeftShort.animate {
    -webkit-animation-name: fadeInLeftShort;
    animation-name: fadeInLeftShort;
}

.animated--element__flipInX {
    opacity: 0;
}

.animated--element__flipInX.animate {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}