.loader-bg{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;     left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;}
  .loader-bg.bg-1{background-color: #29b770;}
  .loader-bg.bg-2{
    background-color: #9cc715;
    opacity:0;
    transition: all 1.5s;}
  .loader-bg.bg-1.open,.loader-bg.bg-2.timeout.open{
    opacity: 0;
    z-index:-1;}
  .loader-text{
    position:absolute;
    top:50%;    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    font-weight:bold;
    color:#fff;}
  .bg-1 .loader-text{
    opacity: 0;
    transition:all 1s;}
  .bg-1 .loader-text.op{opacity:1;}
  .loader-bg.bg-2.timeout{opacity:1;}
  .bg-1 .loader-text{font-size:3vw;}
  .bg-2 .loader-text{z-index:5;}
@media screen and (max-width:700px){
    .bg-1 .loader-text{font-size:5vw;}
}

@-webkit-keyframes outerRotate1 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(360deg);}
}
@-moz-keyframes outerRotate1 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(360deg);}
}
@-o-keyframes outerRotate1 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes outerRotate1 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(360deg);}
}
@-webkit-keyframes outerRotate2 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(-360deg);}
}
@-moz-keyframes outerRotate2 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(-360deg);}
}
@-o-keyframes outerRotate2 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(-360deg);}
}
@keyframes outerRotate2 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(-360deg);}
}

.m-loader{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-51%, -50%);
    -moz-transform: translate(-51%, -50%);
    -ms-transform: translate(-51%, -50%);
    -o-transform: translate(-51%, -50%);
    transform: translate(-51%, -50%);
    width: 240px;
    height: 240px;
    background-color:#9cc715;
    border: 5px solid #fff;
    border-radius: 120px;
    box-sizing: border-box;}

.m-loader:after, .m-loader:before{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-51%, -50%);
    -moz-transform: translate(-51%, -50%);
    -ms-transform: translate(-51%, -50%);
    -o-transform: translate(-51%, -50%);
    transform: translate(-51%, -50%);
    content: " ";
    display: block;
    background-color:#9cc715;
    transform-origin: center;
    z-index: 0;}
.m-loader:before {
    width: 110%;
    height: 40px;
    -webkit-animation: outerRotate2 3.5s infinite linear;
    -moz-animation: outerRotate2 3.5s infinite linear;
    -o-animation: outerRotate2 3.5s infinite linear;
    animation: outerRotate2 3.5s infinite linear;}
.m-loader:after {
    width: 40px;
    height: 110%;
    -webkit-animation: outerRotate1 8s infinite linear;
    -moz-animation: outerRotate1 8s infinite linear;
    -o-animation: outerRotate1 8s infinite linear;
    animation: outerRotate1 8s infinite linear;}