/* Styles used for the animations */

.animatable {
    visibility: hidden;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.animated {
    visibility: visible;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

.hidden {
    visibility: hidden;
}

.hidden-fade-in {
    visibility: hidden;
}

.appear-from-up {
    visibility: visible;
    animation: appeardown 2s;
}

.appear-from-down {
    animation: appeardown 2s;
    display: block;
}

.appear-from-left {
    animation: appearleft 2s;
}

.appear-from-right {
    animation: appearright 2s;
}

.hidden-footer {
    display: none;
}

.text-write {
    word-wrap: normal;
}

.finished-text-write {
    white-space: normal !important;
}

.fade-in {
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Internet Explorer */

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes write-text {
    0% {
        width: 0ch;
    }
    99.99% {
        width: 19ch;
    }
    100% {
        /* white-space: normal; */
        overflow: hidden;
    }
}

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

@-moz-keyframes moz-appearup {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }
}

@-o-keyframes o-appearup {
    0% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0px);
    }
}

@keyframes w-appearup {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes appeardown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    50% {
        opacity: 0.5;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

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

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

@media(min-width: 992px) {
    .text-write {
        animation: write-text 2.5s steps(60, end);
        overflow: hidden;
        white-space: nowrap;
        margin: auto 0;
        letter-spacing: .15em;
        text-align: left;
        animation-fill-mode: forwards;
    }
}

@media(min-width: 2560px) {
    .text-write {
        animation: write-text-k 2.5s steps(60, end);
        animation-fill-mode: forwards;
    }
    @keyframes write-text-k {
        0% {
            width: 0ch;
        }
        100% {
            width: 24ch;
        }
    }
}