.qodef-e-media-image img{
z-index: 99999;
position: relative;
}
.fifty-loader-wrapper {
position:absolute;
top:50%;
left:50%;
max-height:406px;
transform:translate(-50%,-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:30px
}
.fifty-loader-wrapper span{
position: absolute;
top: 60px;
right: 10px;
font-size: 50px;
font-weight: 600;
color: #909090;
}
.fifty-loading {
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #e6e6e6;
z-index: 9999;
position: absolute;width: 100%;height: 100%;
}
.fifty-loader {
border-radius: 50%;
padding: 40px;
height: 150px;
width: 150px;
background-color: #e1e1e1;
box-sizing: border-box;
box-shadow: 2px 2px 20px 4px rgba(0,0,0,.02);
}
.fifty-loader-boxes {
height: 100%;
width: 100%;
position: relative;
}
.fifty-loader-box:first-of-type {
width: 20%;
height: 100%;
left: 0;
top: 0;
}
.fifty-loader-box {
position: absolute;
background-color: #40454d;
animation: load 1.8s linear infinite;
}
.fifty-loader-box:nth-of-type(2) {
top: 0;
animation-delay: calc(1.8s / 4 * -1);
}
.fifty-loader-box:nth-of-type(3) {
top: 40%;
animation-delay: calc(1.8s / 4 * -2);
}
.fifty-loader-box:not(:first-of-type) {
right: 0;
height: 20%;
width: 60%;
}
.text-loader-box {
position: absolute;
background-color: #40454d;
animation: load 1.8s linear infinite;
width: 200px;
height: 20px;
}
.text-loader-box:first-of-type {
top: 0;
animation-delay: calc(1.8s / 4 * -1);
}
.text-loader-box:nth-of-type(2) {
top: 40px;
animation-delay: calc(1.8s / 4 * -2);
width: 130px;
}
@keyframes load {
0% {
opacity:.3
}
50% {
opacity:1
}
to {
opacity:.3
}
}