﻿#loading {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    margin-top: 0px;
    top: 0px;
    margin-left: 0px;
    left: 0px;
}

#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}

#loading-center-absolute{
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 501px;
    margin-top: -25px;
    margin-left: -250px;
}

.object {
    width: 50px;
    height: 50px;
    background-color: #FFF;
    margin-right: 25px;
    float: left;
    /*margin-bottom: 50px;*/
}

    .object:nth-child(7) {
        margin-right: 0px;
    }


#object_one {
    -webkit-animation: object_one 3s infinite;
    animation: object_one 3s infinite;
}

#object_two {
    -webkit-animation: object_two 3s infinite;
    animation: object_two 3s infinite;
}

#object_three {
    -webkit-animation: object_three 3s infinite;
    animation: object_three 3s infinite;
}

#object_four {
    -webkit-animation: object_four 3s infinite;
    animation: object_four 3s infinite;
}

#object_five {
    -webkit-animation: object_five 3s infinite;
    animation: object_five 3s infinite;
}

#object_six {
    -webkit-animation: object_six 3s infinite;
    animation: object_six 3s infinite;
}

#object_seven {
    -webkit-animation: object_seven 3s infinite;
    animation: object_seven 3s infinite;
}

@-webkit-keyframes object_one {
    20% {
        -webkit-transform: translate(0px,0);
    }

    30% {
        -webkit-transform: translate(225px,0);
    }

    80% {
        -webkit-transform: translate(225px,0);
    }

    85% {
        -webkit-transform: translate(0px,0);
    }
}

@keyframes object_one {
    20% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }

    30% {
        transform: translate(225px,0px);
        -webkit-transform: translate(225px,0px);
    }

    80% {
        transform: translate(225px,0px);
        -webkit-transform: translate(225px,0px);
    }

    85% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }
}


@-webkit-keyframes object_two {
    10% {
        -webkit-transform: translate(0px,0);
    }

    20% {
        -webkit-transform: translate(150px,0);
    }

    60% {
        -webkit-transform: translate(150px,0);
    }

    65% {
        -webkit-transform: translate(0px,0);
    }
}

@keyframes object_two {
    10% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }

    20% {
        transform: translate(150px,0px);
        -webkit-transform: translate(150px,0px);
    }

    60% {
        transform: translate(150px,0px);
        -webkit-transform: translate(150px,0px);
    }

    65% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }
}


@-webkit-keyframes object_three {
    10% {
        -webkit-transform: translate(75px,0);
    }

    70% {
        -webkit-transform: translate(75px,0);
    }

    75% {
        -webkit-transform: translate(0px,0);
    }
}

@keyframes object_three {
    10% {
        transform: translate(75px,0px);
        -webkit-transform: translate(75px,0px);
    }

    70% {
        transform: translate(75px,0px);
        -webkit-transform: translate(75px,0px);
    }

    75% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }
}

@-webkit-keyframes object_four {
    5% {
        -webkit-transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.33);
    }

    15% {
        -webkit-transform: scale(1.66);
    }

    20% {
        -webkit-transform: scale(2);
    }

    25% {
        -webkit-transform: scale(2.33);
    }

    30% {
        -webkit-transform: scale(2.66);
    }

    35% {
        -webkit-transform: scale(3);
    }

    60% {
        -webkit-transform: scale(3) rotate(0deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(540deg);
    }
}

@keyframes object_four {
    5% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    10% {
        transform: scale(1.33);
        -webkit-transform: scale(1.33);
    }

    15% {
        transform: scale(1.66);
        -webkit-transform: scale(1.66);
    }

    20% {
        transform: scale(2);
        -webkit-transform: scale(2);
    }

    25% {
        transform: scale(2.33);
        -webkit-transform: scale(2.33);
    }

    30% {
        transform: scale(2.66);
        -webkit-transform: scale(2.66);
    }

    35% {
        transform: scale(3) rotate(0deg);
        -webkit-transform: scale(3) rotate(0deg);
    }

    60% {
        transform: scale(3) rotate(0deg);
        -webkit-transform: scale(3) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(540deg);
        -webkit-transform: scale(1) rotate(540deg);
    }
}

@-webkit-keyframes object_five {
    5% {
        -webkit-transform: translate(0px,0);
    }

    15% {
        -webkit-transform: translate(-75px,0);
    }

    75% {
        -webkit-transform: translate(-75px,0);
    }

    80% {
        -webkit-transform: translate(0px,0);
    }
}

@keyframes object_five {
    5% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }

    15% {
        transform: translate(-75px,0px);
        -webkit-transform: translate(-75px,0px);
    }

    75% {
        transform: translate(-75px,0px);
        -webkit-transform: translate(-75px,0px);
    }

    80% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }
}

@-webkit-keyframes object_six {
    15% {
        -webkit-transform: translate(px,0);
    }

    25% {
        -webkit-transform: translate(-150px,0);
    }

    85% {
        -webkit-transform: translate(-150px,0);
    }

    90% {
        -webkit-transform: translate(0px,0);
    }
}

@keyframes object_six {
    15% {
        transform: translate(0px,0px);
        -webkit-transform: translate(-150px,0px);
    }

    25% {
        transform: translate(-150px,0px);
        -webkit-transform: translate(-150px,0px);
    }

    85% {
        transform: translate(-150px,0px);
        -webkit-transform: translate(-150px,0px);
    }

    90% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }
}

@-webkit-keyframes object_seven {
    25% {
        -webkit-transform: translate(0px,0);
    }

    35% {
        -webkit-transform: translate(-225px,0);
    }

    65% {
        -webkit-transform: translate(-225px,0);
    }

    100% {
        -webkit-transform: translate(0px,0);
    }
}

@keyframes object_seven {
    25% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }

    35% {
        transform: translate(-225px,0px);
        -webkit-transform: translate(-225px,0px);
    }

    65% {
        transform: translate(-225px,0px);
        -webkit-transform: translate(-225px,0px);
    }

    70% {
        transform: translate(0px,0px);
        -webkit-transform: translate(0px,0px);
    }
}

#loading-mobile {
    background-color: #f5f5f5;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    margin-top: 0px;
    top: 0px;
    margin-left: 0px;
    left: 0px;
}

#loading-center-mobile {
    width: 100%;
    height: 100%;
    position: relative;
}


#loading-center-absolute-mobile {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 290px;
    width: 90px;
    margin-top: -70px;
    margin-left: -50px;
}

.shape {
    width: 200px;
    height: 200px;
    background-color: #00eaff;
    border-radius: 50%;
    border-top-right-radius: 0;
    transform: rotate(-45deg);
    float: left;
    margin-top: 50px;
    margin-left: 20px;
    border: 5px solid #fff;
}

#loading-center-absolute-mobile svg {
    width: 90px;
    height:auto;
    position: absolute;
}

    #loading-center-absolute-mobile svg path {
        background-image: url(../../img/wave.png);
        background-position: 0px 350px;
        background-repeat: repeat-x;
        animation: filling 10s ease-in-out infinite;
        border: 6px solid #262626;
    }
