#map-box {
    background: transparent url(../images/global_loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px;
}

.module {
    opacity: 0;
}

/*** FADE IN ***/

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

/*** Slide from right ***/
@-webkit-keyframes slideFromRight {
    0% {
        opacity: 0;
        left: 120%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
 }
@-moz-keyframes slideFromRight {
    0% {
        opacity: 0;
        left: 120%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@-o-keyframes slideFromRight {
    0% {
        opacity: 0;
        left: 120%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes slideFromRight {
    0% {
        opacity: 0;
        left: 120%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

/*** Slide back to the right ***/
@-webkit-keyframes slideBackToTheRight {
    to {
        opacity: 0;
        left: 120%;
    }
}
@-moz-keyframes slideBackToTheRight {
    to {
        opacity: 0;
        left: 120%;
    }
}
@-o-keyframes slideBackToTheRight {
    to {
        opacity: 0;
        left: 120%;
    }
}
@keyframes slideBackToTheRight {
    to {
        opacity: 0;
        left: 120%;
    }
}

/*** Slide in from bottom ***/
@-webkit-keyframes slidefromBottom {
    0% {
        visibility:hidden;
        bottom: -55%;
    }
    30% {
        visibility:hidden;
        bottom: -40%;
    }
    100% {
        visibility: visible;
        bottom: 0%;
    }
}
@-moz-keyframes slidefromBottom {
    0% {
        visibility:hidden;
        bottom: -55%;
    }
    30% {
        visibility:hidden;
        bottom: -40%;
    }
    100% {
        visibility: visible;
        bottom: 0;
    }
}
@-o-keyframes slidefromBottom {
    0% {
        visibility:hidden;
        bottom: -55%;
    }
    30% {
        visibility:hidden;
        bottom: -40%;
    }
    100% {
        visibility: visible;
        bottom: 0;
    }
}
@keyframes slidefromBottom {
    0% {
        visibility:hidden;
        bottom: -55%;
    }
    30% {
        visibility:hidden;
        bottom: -40%;
    }
    100% {
        visibility: visible;
        bottom: 0;
    }
}



/***************** ANIMATIONS ?? ***************/

/*** Slide in from bottom ***/
.come-in {
    transform: translateY(150px);
    -webkit-transform: translateY(150px);
    -moz-transform: translateY(150px);
    -ms-transform: translateY(150px);
    -o-transform: translateY(150px);
    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 0.6s ease 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.fade-in,
.fade-me-in.already-visible{
    opacity: 1;
}