.pre-loader {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999991;
background-color: var(--wdtBodyBGColor);
}
.loader-inner {
text-transform:uppercase;
width:100%;
text-align:center;
line-height:50px;
margin:auto;
position:absolute;
left:0;right:0;top:50%;
transform:translateY(-50%);
}
.loader-inner-container {
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader-inner-item {
width: 50px;
height: 50px;
position: absolute;
}
.loader-inner-item-1 {
background-color: var(--wdtPrimaryColor);
top: 0;
left: 0;
z-index: 1;
animation: loader-inner-item-1_move 1.6s cubic-bezier(.6,.01,.4,1) infinite;
}
.loader-inner-item-2 {
background-color:var(--wdtSecondaryColor);
top: 0;
right: 0;
animation: loader-inner-item-2_move 1.6s cubic-bezier(.6,.01,.4,1) infinite;
}
.loader-inner-item-3 {
background-color: var(--wdtTertiaryColor);
bottom: 0;
right: 0;
z-index: 1;
animation: loader-inner-item-3_move 1.6s cubic-bezier(.6,.01,.4,1) infinite;
}
.loader-inner-item-4 {
background-color: var(--wdtBorderColor);
bottom: 0;
left: 0;
animation: loader-inner-item-4_move 1.6s cubic-bezier(.6,.01,.4,1) infinite;
}
@keyframes loader-inner-item-1_move {
0%, 100% {transform: translate(0, 0)} 
25% {transform: translate(0, 50px)} 
50% {transform: translate(50px, 50px)} 
75% {transform: translate(50px, 0)} 
}
@keyframes loader-inner-item-2_move {
0%, 100% {transform: translate(0, 0)} 
25% {transform: translate(-50px, 0)} 
50% {transform: translate(-50px, 50px)} 
75% {transform: translate(0, 50px)} 
}
@keyframes loader-inner-item-3_move {
0%, 100% {transform: translate(0, 0)} 
25% {transform: translate(0, -50px)} 
50% {transform: translate(-50px, -50px)} 
75% {transform: translate(-50px, 0)} 
}
@keyframes loader-inner-item-4_move {
0%, 100% {transform: translate(0, 0)} 
25% {transform: translate(50px, 0)} 
50% {transform: translate(50px, -50px)} 
75% {transform: translate(0, -50px)} 
} .loader-inner .loader-text:after { background-color: var(--wdtPrimaryColor); }   @media only screen and (min-width: 480px) and (max-width: 767px) {
} @media only screen and (max-width: 479px) {
}