.preload{
    width:100%;
    height:100%;
    background:linear-gradient(rgba(51,51,51,0.7),rgba(51,51,51,0.7));
    position:fixed;
    top:0;
    left:0;
    font-family:monospace;
    z-index:1000;
}

.load-logo{
    width:300px;
    height:70px;
    font-size:50px;
    text-shadow:-1px 2px 2px #000;
    text-align:center;
    position:fixed;
    top:40%;
}

.loader-frame{
    width:300px;
    height:300px;
    margin:auto;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.loader1, .loader2{
    position:absolute;
    border:5px solid transparent;
    border-radius:50%;
}

.loader1{
    width:300px;
    height:300px;
    border-top:5px solid azure;
    border-bottom:5px solid azure;    
    animation:ClockWise 2s linear infinite;

}

.loader2{
    width:290px;
    height:290px;
    border-left:5px solid darkturquoise;
    border-right:5px solid darkturquoise;
    top:5px;
    left:5px;
    animation:AntiClockWise 2s linear infinite;
}

@keyframes ClockWise{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
     }
}

@keyframes AntiClockWise{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(-360deg);
     }
}