@-webkit-keyframes showSearch {
    0%   {
        z-index: 999;
    }
    1% {
        opacity: 1;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes showSearch {
    0%   {
        z-index: 999;
    }
    1% {
        opacity: 1;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

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

.animate {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    opacity: 0;
}
.animate.come-in {
    -webkit-animation: come-in 1s ease forwards;
    animation: come-in 1s ease forwards;
}
.come-in:nth-child(even) {
    -webkit-animation-duration: 1s;
    animation-duration: 1s; /* So they look staggered */
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-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;
    }
}

@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;
    transform: translateX(-50px);
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
}

.slide-from-left.slide-in,
.slide-from-left.already-visible {
    -webkit-animation: slide-from-left 1s ease forwards;
    animation: slide-from-left 1s ease forwards;
}
.slide-from-left.slide-in.slower,
.slide-from-left.already-visible.slower {
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
}

@-webkit-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;
    }
}

@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;
    transform: translateX(50px);
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
    -webkit-transform: translateX(50px);
}

.slide-from-right.slide-in,
.slide-from-right.already-visible {
    -webkit-animation: slide-from-right 1s ease forwards;
    animation: slide-from-right 1s ease forwards;
}
.slide-from-right.slide-in.slower,
.slide-from-right.already-visible.slower {
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
}

@-webkit-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 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;
    }
}




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

.slide-from-bottom {
    opacity: 0;
    transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
}

.slide-from-bottom.slide-in,
.slide-from-bottom.already-visible {
    -webkit-animation: slide-from-bottom 1s ease-in forwards;
    animation: slide-from-bottom 1s ease-in forwards;
}

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

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


/*** Underline ***/


@-webkit-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;
    }
}

@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 and rotate ***/
.fade-and-rotate-right {
    opacity: 0;
    -webkit-transform: translateY(300px) rotate(5deg);
    -ms-transform: translateY(300) rotate(5deg);
    transform: translateY(300px) rotate(5deg);
}

.fade-and-rotate-right.show,
.fade-and-rotate-right.already-visible {
    -webkit-animation: fade-and-rotate-right 0.65s ease-in forwards;
    animation: fade-and-rotate-right 0.65s ease-in forwards;
}

.fade-and-rotate-left {
    opacity: 0;
    -webkit-transform: translateY(300px) rotate(5deg);
    -ms-transform: translateY(300px) rotate(5deg);
    transform: translateY(300px) rotate(5deg);
}
.fade-and-rotate-left.show,
.fade-and-rotate-left.already-visible {
    -webkit-animation: fade-and-rotate-left 0.65s ease-in forwards;
    animation: fade-and-rotate-left 0.65s ease-in forwards;
}

@-webkit-keyframes fade-and-rotate-right {
    to {
        -webkit-transform: translateY(0) rotate(10deg);
        transform: translateY(0) rotate(10deg);
        opacity:1;
    }
}

@keyframes fade-and-rotate-right {
    to {
        -webkit-transform: translateY(0) rotate(10deg);
        transform: translateY(0) rotate(10deg);
        opacity:1;
    }
}

@-webkit-keyframes fade-and-rotate-left {
    to {
        -webkit-transform: translateY(0) rotate(-10deg);
        transform: translateY(0) rotate(-10deg);
        opacity:1;
    }
}

@keyframes fade-and-rotate-left {
    to {
        -webkit-transform: translateY(0) rotate(-10deg);
        transform: translateY(0) rotate(-10deg);
        opacity:1;
    }
}


/*** Fade in ***/
.fade-me-in {
    opacity: 0;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}
.fade-me-in:nth-of-type(2) {
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
}
.fade-me-in:nth-of-type(3) {
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}
.fade-me-in.slower {
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
}
.fade-me-in.slow {
    -o-transition: opacity .65s ease-in-out;
    transition: opacity .65s ease-in-out;
    -moz-transition: opacity .65s ease-in-out;
    -webkit-transition: opacity .65s ease-in-out;
}

.fade-me-in.fade-in,
.fade-me-in.already-visible{
    opacity: 1;
}

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


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



/*** Animated Field JS Styles ***/
.animated_field {
    overflow: hidden;
}

.animated_field span.word {
    display: inline-table;
    overflow: hidden;
    white-space: nowrap;
}

.animated_field span.space,
.animated_field span.word {
    display: inline-table;
    overflow: hidden;
    white-space: nowrap;
}

.animated_field span.space:last-of-type {
    height: 0 !important;
    font-size: 0 !important;
}

.animated_field span.word > span {
    -webkit-transform:translate(0px, 1000px);
    -ms-transform:translate(0px, 1000px);
    transform:translate(0px, 1000px); /* Make the text appear outside the overflow by default */
}

.animated_field span.word > span  {
    display: inline-block;
}


.letterEntrance {
    -webkit-animation-name: letterEntranceAnimation;
    animation-name: letterEntranceAnimation;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes letterEntranceAnimation {
    0% {
        -webkit-transform:translate(0px,1000px);
        transform:translate(0px,1000px); /* Match the default outside the overflow setting */
    }
    100% {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);} /* Set back to neutral position */
}
@keyframes letterEntranceAnimation {
    0% {
        -webkit-transform:translate(0px,1000px);
        transform:translate(0px,1000px); /* Match the default outside the overflow setting */
    }
    100% {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);} /* Set back to neutral position */
}