@charset "UTF-8";

.loader {
    width: 100%;
    height: 100%;
    background: #DBDAC2;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    opacity: 1;
    -webkit-transition: all 1s ease-out .7s;
    -moz-transition: all 1s ease-out .7s;
    transition: all 1s ease-out .7s;
}

.loader-logo {
    -webkit-transform: translate(0,-60%);
    -moz-transform: translate(0,-60%);
    -ms-transform: translate(0,-60%);
    -o-transform: translate(0,-60%);
    transform: translate(0,-60%);
}

.loader-logo, .bubblingG {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: all .7s ease-out;
    -moz-transition: all .7s ease-out;
    transition: all .7s ease-out;
}

.bubblingG {
    text-align: center;
    width: 80px;
    height: 50px;
    -webkit-transform: translate(0,50%);
    -moz-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    -o-transform: translate(0,50%);
    transform: translate(0,50%);
}

    .bubblingG span {
        display: inline-block;
        vertical-align: middle;
        width: 10px;
        height: 10px;
        margin: 25px auto;
        background: #000;
        border-radius: 50px;
        -webkit-animation: bubblingG .7s infinite alternate;
        -moz-animation: bubblingG .7s infinite alternate;
        animation: bubblingG .7s infinite alternate;
    }

#bubblingG_1 {
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    animation-delay: 0;
}

#bubblingG_2 {
    -webkit-animation-delay: .21s;
    -moz-animation-delay: .21s;
    animation-delay: .21s;
}

#bubblingG_3 {
    -webkit-animation-delay: .42s;
    -moz-animation-delay: .42s;
    animation-delay: .42s;
}

@-webkit-keyframes bubblingG {
    0% {
        width: 10px;
        height: 10px;
        background-color: #000;
        -webkit-transform: translateY(0);
    }

    100% {
        width: 24px;
        height: 24px;
        background-color: #fff;
        -webkit-transform: translateY(-21px);
    }
}

@-moz-keyframes bubblingG {
    0% {
        width: 10px;
        height: 10px;
        background-color: #000;
        -moz-transform: translateY(0);
    }

    100% {
        width: 24px;
        height: 24px;
        background-color: #fff;
        -moz-transform: translateY(-21px);
    }
}

@keyframes bubblingG {
    0% {
        width: 10px;
        height: 10px;
        background-color: #000;
        transform: translateY(0);
    }

    100% {
        width: 24px;
        height: 24px;
        background-color: #fff;
        transform: translateY(-21px);
    }
}

.loader--loading .logo {
    opacity: 1;
}

.loader--loading .site-wrapper, .loader--loading .nav-left, .loader--loading .nav-right, .loader--loading .nav-social {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

.loader--loading .site-wrapper {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.loader--loading .nav-left {
    -webkit-transform: translate(-200%,-50%);
    -moz-transform: translate(-200%,-50%);
    -ms-transform: translate(-200%,-50%);
    -o-transform: translate(-200%,-50%);
    transform: translate(-200%,-50%);
}

.loader--loading .nav-right {
    -webkit-transform: translate(200%,-50%);
    -moz-transform: translate(200%,-50%);
    -ms-transform: translate(200%,-50%);
    -o-transform: translate(200%,-50%);
    transform: translate(200%,-50%);
}

.loader--loading .nav-social {
    -webkit-transform: translateY(200%);
    -moz-transform: translateY(200%);
    -ms-transform: translateY(200%);
    -o-transform: translateY(200%);
    transform: translateY(200%);
}

.loader--loaded .loader {
    opacity: 0;
}

.loader--loaded .loader-logo {
    -webkit-transform: translate(0,-600%);
    -moz-transform: translate(0,-600%);
    -ms-transform: translate(0,-600%);
    -o-transform: translate(0,-600%);
    transform: translate(0,-600%);
}

.loader--loaded .bubblingG {
    -webkit-transform: translate(0,1500%);
    -moz-transform: translate(0,1500%);
    -ms-transform: translate(0,1500%);
    -o-transform: translate(0,1500%);
    transform: translate(0,1500%);
}

.loader--loaded .site-wrapper {
    -webkit-transition: all 1s ease-in 1.2s;
    -moz-transition: all 1s ease-in 1.2s;
    transition: all 1s ease-in 1.2s;
}

.loader--loaded .nav-left, .loader--loaded .nav-right, .loader--loaded .nav-social {
    -webkit-transition: all 1s ease-out 1.7s;
    -moz-transition: all 1s ease-out 1.7s;
    transition: all 1s ease-out 1.7s;
}

.loader--loaded .site-wrapper, .loader--loaded .nav-social {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.loader--loaded .nav-left, .loader--loaded .nav-right {
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

@media only screen and (max-width:1219px) {
    .loader--loading .nav-left, .loader--loading .nav-right {
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -o-transform: translateY(-200%);
        transform: translateY(-200%);
    }

    .loader--loaded .nav-left, .loader--loaded .nav-right {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}