/* --------------------------------- */

@-webkit-keyframes drawMainDivider {
    from {
        width: 0%;
    }
    to {
        width: 49%;
    }
}

@keyframes drawMainDivider {
    from {
        width: 0%;
    }
    to {
        width: 49%;
    }
}

/* -------------------------- */

@-webkit-keyframes smoothReveal {
    0% {
        /* top: -4em; */
        transform: translatex(-5px);
        opacity: 0;
    }
    100% {
        /* top: 0; */
        /* transform: translateX(0); */
        opacity: 1;
    }
}

@keyframes smoothReveal {
    0% {
        /* top: -4em; */
        transform: translatex(-5px);
        opacity: 0;
    }
    100% {
        /* top: 0; */
        /* transform: translateX(0); */
        opacity: 1;
    }
}

/* ---------------------------- */

@-webkit-keyframes revealFromLeft {
    from {
        -webkit-transform: translateX(-4em);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes revealFromLeft {
    from {
        transform: translateX(-4rem);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* -------------------------- */

/* ---------------------------- */

@-webkit-keyframes revealFromTop {
    from {
        -webkit-transform: translateY(-4em);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes revealFromTop {
    from {
        transform: translateY(-4rem);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* -------------------------- */

/* ---------------------------- */

@-webkit-keyframes revealFromBottom {
    from {
        -webkit-transform: translateY(4em);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes revealFromBottom {
    from {
        transform: translateY(4rem);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* -------------------------- */

/* ---------------------------- */

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

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

/* -------------------------- */

/* ---------------------------- */

@-webkit-keyframes hideToTop {
    from {
        -webkit-transform: translateY(-4em);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hideToTop {
    from {
        opacity: 1;
    }
    to {
        transform: translateY(-4rem);
        opacity: 0;
    }
}

/* -------------------------- */

/* ============================ */

.smoothReveal {
    -webkit-animation: smoothReveal 1s ease .2s both;
    animation: smoothReveal 1s ease .2s both;
}

.smoothReveal-2 {
    -webkit-animation: smoothReveal 1s ease .4s both;
    animation: smoothReveal 1s ease .4s both;
}

.smoothReveal-3 {
    -webkit-animation: smoothReveal 1s ease .6s both;
    animation: smoothReveal 1s ease .6s both;
}

.revealHeader {
    -webkit-animation: reveal 1s ease 2s both;
    animation: reveal 1s ease 2s both;
}

.revealHeaderAlt {
    -webkit-animation: revealFromTop .3s ease .1s both;
    animation: revealFromTop .3s ease .1s both;
}

.hideHeaderAlt {
    -webkit-animation: hideToTop .3s ease .1s backwards;
    animation: hideToTop .3s ease .1s backwards;
}

.revealMenu {
    display: block !important;
    -webkit-animation: reveal .3s ease 0s both;
    animation: reveal .3s ease 0s both;
}

/* --- */

@media screen and (max-width:825px) {
    .animate-scroll {
        opacity: 1 !important;
    }
    .revealHeader {
        -webkit-animation: reveal .3s ease 0s both;
        animation: reveal .3s ease 0s both;
    }
}

@media screen and (min-width:824px) {
    .animate-scroll {
        opacity: 0;
    }
    .revealServices:nth-of-type(1) {
        animation: revealFromLeft 1s .5s ease-out both;
        -webkit-animation: revealFromLeft 1s .5s ease-out both;
    }
    .revealServices:nth-of-type(2) {
        animation: revealFromLeft 1s .8s ease-out both;
        -webkit-animation: revealFromLeft 1s .8s ease-out both;
    }
    .revealServices:nth-of-type(3) {
        animation: revealFromLeft 1s 1.1s ease-out both;
        -webkit-animation: revealFromLeft 1s 1.1s ease-out both;
    }
    .revealServices:nth-of-type(4) {
        animation: revealFromLeft 1s 1.4s ease-out both;
        -webkit-animation: revealFromLeft 1s 1.4s ease-out both;
    }
    /* --- */
    .revealAbout:nth-child(1n) {
        animation: revealFromTop 1s .1s ease-out both;
        -webkit-animation: revealFromTop 1s .1s ease-out both;
    }
    .revealAbout:nth-child(2n) {
        animation: revealFromTop 1s .6s ease-out both;
        -webkit-animation: revealFromTop 1s .6s ease-out both;
    }
    .revealAbout:nth-child(3n) {
        animation: revealFromTop 1s 1.1s ease-out both;
        -webkit-animation: revealFromTop 1s 1.1s ease-out both;
    }
    /* --- */
    .revealPlus {
        animation: revealFromBottom 1s .1s ease-out both;
        -webkit-animation: revealFromBottom 1s .1s ease-out both;
    }
    .revealPlus-2 {
        animation: smoothReveal 1s .35s ease-out both;
        -webkit-animation: smoothReveal 1s .35s ease-out both;
    }
}