.loader {
    position: absolute;width: 100%;height: 100%; display: block; text-align: center; z-index: 1500; background-color: black;
    transition: opacity 1s;
    }
.loader .inner-wrapper {
    border: 4px solid black;
    display: block;
    width: 50vw;
    height: 50vh;
    margin-left: 25vw;
    margin-top: 25vh;
}
.loader .inner {
    /* width: 30vw; */
    top: 43%;
    width: 50%;
    left: 0;
    margin: 0 auto;
    right: 0;
    position: absolute;
    z-index: 5000;
    animation-name: loaderspinner;
    -webkit-animation-name: loaderspinner;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    }
.loader .inner img{
    width: 25vw
}
@media (max-width:768px){
    .loader .inner img{
        width: 80vw
    }
}
 
.loaded {opacity: 0;}

@-webkit-keyframes loaderspinner {
0%	{ 	transform: perspective(450px) rotateY(0deg); }
100%{   transform: perspective(450px) rotateY(360deg);}    
}
@keyframes loaderspinner {
0%	{ 	transform: perspective(450px) rotateY(0deg);}
100%{   transform: perspective(450px) rotateY(360deg);}
}


.loader .spinner {
margin: 0 auto 0;
width: 180px;
text-align: center;
position: absolute;

top: calc(40% + 95px);
left: calc(50% - 90px);

}
.loader .spinner > div {
width: 18px;
height: 18px;
background-color: darkblue;
margin-left: 30px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loader .spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.loader .spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% { 
-webkit-transform: scale(0);
transform: scale(0);
} 40% { 
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

/* @media screen and (max-width: 480px) {
   .loader .inner {
        left: calc(50vw - 182px);
   }
   .loader .spinner {
        left: calc(50% - 100px);
   };
} */