/*
Written by Joachim Reichwaldt for Ancora
All rights reserved
2024
*/
:root{
   --angle: 60deg; 
}
#preloader{
    position:fixed;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items: center;
    background:#4481a2;
    z-index:5;
    opacity:1;
}
.faded_out{
    animation-name:fadeout;
    animation-duration:1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    opacity:1;
}
@keyframes fadeout {0% {opacity:1;}100% {opacity:0;}}

#bg, #rot_layer{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items: center;
}
#rot_layer{
    animation: spin 5s linear infinite;
}
#bg img, .rot_wrapper img{
    position:relative;
}
.rot_wrapper{
    position:absolute;
}

#bg img{
    width:10%;
}
.rot_wrapper{
    width:30%;

}
.rot_wrapper img{
    width:16%;
}
#preloader img{
    filter: drop-shadow(6px 6px 12px rgba(0, 102, 102, 1));
    
}
@media (orientation: landscape) {
 #bg img{
    width:10%;
}
.rot_wrapper{
    width:30%;

}
.rot_wrapper img{
    width:16%;
}
}

@media (orientation: portrait) {
  #bg img{
    width:30%;
}
.rot_wrapper{
    width:90%;

}
.rot_wrapper img{
    width:16%;
}
}

.rot_wrapper:nth-child(1) { transform: rotate(0deg);}
.rot_wrapper:nth-child(2) { transform: rotate(60deg);}
.rot_wrapper:nth-child(3) { transform: rotate(120deg);}
.rot_wrapper:nth-child(4) { transform: rotate(180deg);}
.rot_wrapper:nth-child(5) { transform: rotate(240deg);}
.rot_wrapper:nth-child(6) { transform: rotate(300deg);}

.rot_wrapper:nth-child(1) img{ transform: rotate(0deg); animation: spin1 5s linear infinite;}
.rot_wrapper:nth-child(2) img{ transform: rotate(-60deg); animation: spin2 5s linear infinite;}
.rot_wrapper:nth-child(3) img{ transform: rotate(-120deg); animation: spin3 5s linear infinite;}
.rot_wrapper:nth-child(4) img{ transform: rotate(-180deg); animation: spin4 5s linear infinite;}
.rot_wrapper:nth-child(5) img{ transform: rotate(-240deg); animation: spin5 5s linear infinite;}
.rot_wrapper:nth-child(6) img{ transform: rotate(-300deg); animation: spin6 5s linear infinite;}

@keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

@keyframes spin1 {0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);}}
@keyframes spin2 {0% {transform: rotate(-60deg);}100% {transform: rotate(-420deg);}}
@keyframes spin3 {0% {transform: rotate(-120deg);}100% {transform: rotate(-480deg);}}    
@keyframes spin4 {0% {transform: rotate(-180deg);}100% {transform: rotate(-540deg);}}   
@keyframes spin5 {0% {transform: rotate(-240deg);}100% {transform: rotate(-600deg);}}
@keyframes spin6 {0% {transform: rotate(-300deg);}100% {transform: rotate(-660deg);}}

/*@keyframes spin1 {0% {transform: rotate(0deg);} 100% {transform: rotate(720deg);}}
@keyframes spin2 {0% {transform: rotate(-60deg);}100% {transform: rotate(660deg);}}
@keyframes spin3 {0% {transform: rotate(-120deg);}100% {transform: rotate(600deg);}}    
@keyframes spin4 {0% {transform: rotate(-180deg);}100% {transform: rotate(540deg);}}   
@keyframes spin5 {0% {transform: rotate(-240deg);}100% {transform: rotate(480deg);}}
@keyframes spin6 {0% {transform: rotate(-300deg);}100% {transform: rotate(420deg);}}*/

/*@keyframes spin1 {0% {transform: rotate(0deg);} 100% {transform: rotate(1080deg);}}
@keyframes spin2 {0% {transform: rotate(-60deg);}100% {transform: rotate(1020deg);}}
@keyframes spin3 {0% {transform: rotate(-120deg);}100% {transform: rotate(960deg);}}    
@keyframes spin4 {0% {transform: rotate(-180deg);}100% {transform: rotate(900deg);}}   
@keyframes spin5 {0% {transform: rotate(-240deg);}100% {transform: rotate(840deg);}}
@keyframes spin6 {0% {transform: rotate(-300deg);}100% {transform: rotate(780deg);}}*/