body #preload {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #51009A;
    z-index: 99999;
    opacity: 0;
    animation: preloadInOut 5s ease;
}
@keyframes preloadInOut {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#loading-center{
    width: 100%;
    height: 100%;
    position: relative;
}
#loading-center img {
    width:150px;
    position: absolute;
    left:calc(50% - 75px);
    top:30%;
    opacity: 0;
    display: block;
    animation: logoDown 3.5s ease forwards;
}
@media (max-width: 960px) {
    #loading-center img {
        top: 20%;
        animation: mobileLogoDown 4s ease forwards;
    }
}
@keyframes logoDown {
    0% {
        opacity: 0;
        top:30%
    }
    25% {
        opacity: 1;
        top:35%;
    }
    75% {
        opacity: 1;
        top:35%;
    }
    100% {
        opacity: 0;
        top:30%;
    }
}
@-webkit-keyframes logoDown {
    0% {
        opacity: 0;
        top:35%
    }
    25% {
        opacity: 1;
        top:40%;
    }
    75% {
        opacity: 1;
        top:40%;
    }
    100% {
        opacity: 0;
        top:35;
    }
}
@keyframes mobileLogoDown {
    0% {
        opacity: 0;
        top:20%
    }
    25% {
        opacity: 1;
        top:25%;
    }
    75% {
        opacity: 1;
        top:25%;
    }
    100% {
        opacity: 0;
        top:20%;
    }
}
@-webkit-keyframes mobileLogoDown {
    0% {
        opacity: 0;
        top:20%
    }
    25% {
        opacity: 1;
        top:25%;
    }
    75% {
        opacity: 1;
        top:25%;
    }
    100% {
        opacity: 0;
        top:25%;
    }
}
#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 200px;
    margin-top: -25px;
    margin-left: -100px;
    animation:objFade .5s ease forwards;
    animation-delay: 2.5s;
}
.object{
    width: 20px;
    height:20px;
    background-color: #FFF;
    float: left;
    margin-top: 15px;
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
}
#first_object{
    -webkit-animation: first_object 2s infinite;
    animation: first_object 2s infinite;
}
#second_object{
    -webkit-animation: second_object 2s infinite;
    animation: second_object 2s infinite;
}
@keyframes objFade {
    0% {
        opacity:1;
        margin-top:-25px;
    }
    100% {
        opacity:0;
        margin-top:0px;
    }
}
@-webkit-keyframes objFade {
    0% {
        opacity:1;
        margin-top:-25px;
    }
    100% {
        opacity:0;
        margin-top:0px;
    }
}
@-webkit-keyframes first_object {
    25% {
        -ms-transform: translate(90px,0) scale(2);
        -webkit-transform: translate(90px,0) scale(2);
        transform: translate(90px,0) scale(2);
    }
    50% {
        -ms-transform: translate(180px,0) scale(1);
        -webkit-transform: translate(180px,0) scale(1);
        transform: translate(180px,0) scale(1);
    }
    75% {
        -ms-transform: translate(90px,0) scale(2);
        -webkit-transform: translate(90px,0) scale(2);
        transform: translate(90px,0) scale(2);
    }
}
@keyframes first_object {
    25% {
        -ms-transform: translate(90px,0) scale(2);
        -webkit-transform: translate(90px,0) scale(2);
        transform: translate(90px,0) scale(2);
    }
    50% {
        -ms-transform: translate(180px,0) scale(1);
        -webkit-transform: translate(180px,0) scale(1);
        transform: translate(180px,0) scale(1);
    }
    75% {
        -ms-transform: translate(90px,0) scale(2);
        -webkit-transform: translate(90px,0) scale(2);
        transform: translate(90px,0) scale(2);
    }
}
@-webkit-keyframes second_object {
    25% {
        -ms-transform: translate(-90px,0) scale(2);
        -webkit-transform: translate(-90px,0) scale(2);
        transform: translate(-90px,0) scale(2);
    }
    50% {
        -ms-transform: translate(-180px,0) scale(1);
        -webkit-transform: translate(-180px,0) scale(1);
        transform: translate(-180px,0) scale(1);
    }
    75% {
        -ms-transform: translate(-90px,0) scale(2);
        -webkit-transform: translate(-90px,0) scale(2);
        transform: translate(-90px,0) scale(2);
    }
}
@keyframes second_object {
    25% {
        -ms-transform: translate(-90px,0) scale(2);
        -webkit-transform: translate(-90px,0) scale(2);
        transform: translate(-90px,0) scale(2);
    }
    50% {
    -ms-transform: translate(-180px,0) scale(1);
        -webkit-transform: translate(-180px,0) scale(1);
        transform: translate(-180px,0) scale(1);
    }
    75% {
        -ms-transform: translate(-90px,0) scale(2);
        -webkit-transform: translate(-90px,0) scale(2);
        transform: translate(-90px,0) scale(2);
    }
}
