.Preloader{
    position: fixed;
    width:100%;
    height:100%;
    z-index: 999;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.3);
    display: none;
}
.loader{
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    top:50%;
    left:5%;
    transform:translate(-50%,-50%);
 }
 .loader .loader-inner{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }
 .loader .loader-inner:before{
    content: "";
    display: block;
    width: 15%;
    height: 25%;
    border-radius: 100%;
    background: #106c85;
    margin: 0 auto;
    animation: loading-1 1.2s infinite ease-in-out both;
 }
 .loader .box-2{ transform: rotate(30deg); }
 .loader .box-3{ transform: rotate(60deg); }
 .loader .box-4{ transform: rotate(90deg); }
 .loader .box-5{ transform: rotate(120deg); }
 .loader .box-6{ transform: rotate(150deg); }
 .loader .box-7{ transform: rotate(180deg); }
 .loader .box-8{ transform: rotate(210deg); }
 .loader .box-9{ transform: rotate(240deg); }
 .loader .box-10{ transform: rotate(270deg); }
 .loader .box-11{ transform: rotate(300deg); }
 .loader .box-12{ transform: rotate(330deg); }
 .loader .box-2:before{ animation-delay: -1.1s; }
 .loader .box-3:before{ animation-delay: -1s; }
 .loader .box-4:before{ animation-delay: -0.9s; }
 .loader .box-5:before{ animation-delay: -0.8s; }
 .loader .box-6:before{ animation-delay: -0.7s; }
 .loader .box-7:before{ animation-delay: -0.6s; }
 .loader .box-8:before{ animation-delay: -0.5s; }
 .loader .box-9:before{ animation-delay: -0.4s; }
 .loader .box-10:before{ animation-delay: -0.3s; }
 .loader .box-11:before{ animation-delay: -0.2s; }
 .loader .box-12:before{ animation-delay: -0.1s; }
 @keyframes loading-1{
     0%, 39%, 100%{ opacity: 0; }
     40%{ opacity: 1; }
 }