/**
 * ----------------------------------------
 * animation fades
 * ----------------------------------------
 */
@keyframes fadeinleft {
    0% {
        opacity: 0;
        transform: translateX(0%);
    }

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

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes cloud {
    0% {
        -webkit-transform: translate(0, -5px);
        transform: translate(0, -5px);
    }

    50% {
        -webkit-transform: translate(-8px, -8px);
        transform: translate(-8px, -8px);
    }

    100% {
        -webkit-transform: translate(-15px, -5px);
        transform: translate(-15px, -5px);
    }
}

@keyframes cloud {
    0% {
        -webkit-transform: translate(0, -5px);
        transform: translate(0, -5px);
    }

    50% {
        -webkit-transform: translate(-8px, -8px);
        transform: translate(-8px, -8px);
    }

    100% {
        -webkit-transform: translate(-15px, -5px);
        transform: translate(-15px, -5px);
    }
}

@keyframes twinkle {
    50% {
        opacity: .2;
    }
}

/**
 * ----------------------------------------
 * animation sliding
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50px);
    }

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

@keyframes slide-in-top {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

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

/**
 * ----------------------------------------
 * animation coffee-machine
 * ----------------------------------------
 */
@keyframes drawFirst {
    0% {
        stroke-dashoffset: 6186.919921875;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes drawSecond {
    from {
        stroke-dashoffset: 6186.919921875;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/*@-webkit-keyframes wordspin {*/
/*    10% {*/
/*        -webkit-transform: translateY(-100%);*/
/*        transform: translateY(-100%);*/
/*    }*/

/*    25% {*/
/*        -webkit-transform: translateY(-100%);*/
/*        transform: translateY(-100%);*/
/*    }*/

/*    35% {*/
/*        -webkit-transform: translateY(-200%);*/
/*        transform: translateY(-200%);*/
/*    }*/

/*    50% {*/
/*        -webkit-transform: translateY(-200%);*/
/*        transform: translateY(-200%);*/
/*    }*/

/*    60% {*/
/*        -webkit-transform: translateY(-300%);*/
/*        transform: translateY(-300%);*/
/*    }*/

/*    75% {*/
/*        -webkit-transform: translateY(-300%);*/
/*        transform: translateY(-300%);*/
/*    }*/

/*    85% {*/
/*        -webkit-transform: translateY(-400%);*/
/*        transform: translateY(-400%);*/
/*    }*/

/*    100% {*/
/*        -webkit-transform: translateY(-400%);*/
/*        transform: translateY(-400%);*/
/*    }*/
/*}*/

/**
 * ----------------------------------------
 * animations (Barba.js + local)
 * ----------------------------------------
 */
#content, #page {
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-leave,
.fade-enter-to {
    opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-leave-to,
.fade-enter {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .g-fadein,
    .g-fadein.visible,
    .g-fadein-up,
    .g-fadein-up.visible,
    .g-fadein-down,
    .g-fadein-down.visible,
    .g-fadeout,
    .g-fadeout.visible {
        transition: none;
        transform: none;
    }
}

/* Fade In Up */
.g-fadein-up {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease, transform 1s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.g-fadein-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Down */
.g-fadein-down {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 1s ease, transform 1s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.g-fadein-down.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Regular Fade In (no direction) */
.g-fadein {
    opacity: 0;
    transition: opacity 1s ease;
}
.g-fadein.visible {
    opacity: 1;
}

/* Fade Out (for future use) */
.g-fadeout {
    opacity: 1;
    transition: opacity 1s ease;
}
.g-fadeout.hidden {
    opacity: 0;
}

/* Delay classes */
.dt-100 {
    transition-delay: 0.1s;
}

.dt-200 {
    transition-delay: 0.2s;
}

.dt-300 {
    transition-delay: 0.3s;
}

.dt-400 {
    transition-delay: 0.4s;
}

.dt-500 {
    transition-delay: 0.5s;
}

.dt-600 {
    transition-delay: 0.6s;
}

.dt-700 {
    transition-delay: 0.7s;
}

.dt-800 {
    transition-delay: 0.8s;
}

.dt-900 {
    transition-delay: 0.9s;
}

.dt-1000 {
    transition-delay: 1s;
}

.dt-1100 {
    transition-delay: 1.1s;
}

.dt-1200 {
    transition-delay: 1.2s;
}

.dt-1300 {
    transition-delay: 1.3s;
}

.dt-1400 {
    transition-delay: 1.4s;
}

.dt-1500 {
    transition-delay: 1.5s;
}

.dt-1600 {
    transition-delay: 1.6s;
}

.dt-1700 {
    transition-delay: 1.7s;
}

.dt-1800 {
    transition-delay: 1.8s;
}

.dt-1950 {
    transition-delay: 1.95s;
}

.dt-2100 {
    transition-delay: 2.1s;
}

.dt-2250 {
    transition-delay: 2.25s;
}