.flower-spinner,  .flower-spinner * {
box-sizing: border-box;
}

.flower-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
height: 70px;
width: 70px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.flower-spinner .dots-container {
height: calc(70px / 7);
width: calc(70px / 7);
}

.flower-spinner .smaller-dot {
background: #68a8b0ff;
height: 100%;
width: 100%;
border-radius: 50%;
animation: flower-spinner-smaller-dot-animation 2.5s 0s infinite both;

}

.flower-spinner .bigger-dot {
background: #68a8b0ff;
height: 100%;
width: 100%;
padding: 10%;
border-radius: 50%;
animation: flower-spinner-bigger-dot-animation 2.5s 0s infinite both;
}

@keyframes flower-spinner-bigger-dot-animation {
0%, 100% {
    box-shadow: rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px;
}

50% {
    transform: rotate(180deg);
}

25%, 75% {
    box-shadow: rgb(104 168 176) 26px 0px 0px,
    rgb(104 168 176) -26px 0px 0px,
    rgb(104 168 176) 0px 26px 0px,
    rgb(104 168 176) 0px -26px 0px,
    rgb(104 168 176) 19px -19px 0px,
    rgb(104 168 176) 19px 19px 0px,
    rgb(104 168 176) -19px -19px 0px,
    rgb(104 168 176) -19px 19px 0px;
}

100% {
    transform: rotate(360deg);
    box-shadow: rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px;
}
}

@keyframes flower-spinner-smaller-dot-animation {
0%, 100% {
    box-shadow: rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px;
}

25%, 75% {
    box-shadow: rgb(104 168 176) 14px 0px 0px,
    rgb(104 168 176) -14px 0px 0px,
    rgb(104 168 176) 0px 14px 0px,
    rgb(104 168 176) 0px -14px 0px,
    rgb(104 168 176) 10px -10px 0px,
    rgb(104 168 176) 10px 10px 0px,
    rgb(104 168 176) -10px -10px 0px,
    rgb(104 168 176) -10px 10px 0px;
}

100% {
    box-shadow: rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px,
    rgb(104 168 176) 0px 0px 0px;
}
}
#load_box{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
/* -webkit-transition: all 1.2s ease;
        transition: all 1.2s ease; */
color: #fff;
background-color: #fff;
}
/* #load_box.loaded{
opacity:0;
visibility:hidden;
pointer-events:none;
} */

.loaded {
    animation : fadeOut 1s;
    animation-fill-mode: both;
}
@keyframes fadeOut {
0% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}