/*** Slide in from bottom ***/

.animate {
    transform: translateY(120px);
    -webkit-transform: translateY(120px);
    -moz-transform: translateY(120px);
    -ms-transform: translateY(120px);
    -o-transform: translateY(120px);
    opacity: 0;
}
.animate.come-in {
    animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
    animation-duration: 0.6s; /* So they look staggered */
}

@keyframes come-in {
    to {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        opacity: 1;
    }
}

/*** Slide in from the left ***/

.slide-from-left {
    opacity: 0;
}

.slide-from-left.slide-in,
.slide-from-left.already-visible {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    animation: slide-from-left 0.6s ease forwards;
}
.slide-from-left.slide-in.slower,
.slide-from-left.already-visible.slower {
    animation-duration: 1.6s;
}

@keyframes slide-from-left {
    to {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        opacity:1;
    }
}

/*** Slide in from the right ***/

.slide-from-right {
    opacity: 0;
}

.slide-from-right.slide-in,
.slide-from-right.already-visible {
    transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    animation: slide-from-right 1s ease-in forwards;
}
.slide-from-right.slide-in.slower,
.slide-from-right.already-visible.slower {
    animation-duration: 1.1s;
}

@keyframes slide-from-right {
    to {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        opacity:1;
    }
}

@keyframes underline-from-left {
    to {
        transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        opacity: 1;
    }
}
/*** Fade in ***/
.fade-me-in {
    opacity: 0;
    transition: opacity .85s ease-in-out;
    -moz-transition: opacity .85s ease-in-out;
    -webkit-transition: opacity .85s ease-in-out;
}
.fade-me-in:nth-of-type(2) {
    transition: opacity 1.1s ease-in-out;
    -moz-transition: opacity 1.1s ease-in-out;
    -webkit-transition: opacity 1.1s ease-in-out;
}
.fade-me-in:nth-of-type(3) {
    transition: opacity 1.3s ease-in-out;
    -moz-transition: opacity 1.3s ease-in-out;
    -webkit-transition: opacity 1.3s ease-in-out;
}
.fade-me-in.slower {
    transition: opacity 1.2s ease-in-out;
    -moz-transition: opacity 1.2s ease-in-out;
    -webkit-transition: opacity 1.2s ease-in-out;
}
.fade-me-in.fade-in,
.fade-me-in.already-visible{
    opacity: 1;
}

/*** menu block animation desktop ***/
@keyframes show-menu-block {
    0%      {
        transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        opacity:0;
    }
    65%     {
        transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        opacity:0;
    }
    100%    {
        transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        opacity:1;
    }
}
@keyframes hide-menu-block {
    to {
        transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        opacity:0;
    }
}


.pop-me-in {
    transform: scale(0.1);
    transition: transform .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
}
.pop-me-in.show {
    transform: scale(1)
}