div#preloader{background-color:#ecf0f1;overflow:hidden;background-repeat:no-repeat;background-position:center center;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99999;}
.loader01{width:56px;height:56px;border:8px solid #14b6f2;border-right-color:transparent;border-radius:50%;position:relative;animation:loader-rotate 1s linear infinite;top:50%;margin:-28px auto 0;}
.loader01::after{content:'';width:8px;height:8px;background:#14b6f2;border-radius:50%;position:absolute;top:-1px;left:33px;}
@keyframes loader-rotate {
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}
.loader02{width:56px;height:56px;border:8px solid rgba(20, 182, 242, 0.25);border-top-color:#14b6f2;border-radius:50%;position:relative;animation:loader-rotate 1s linear infinite;top:50%;margin:-28px auto 0;}
@keyframes loader-rotate {
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}
.loader03{width:56px;height:56px;border:8px solid transparent;border-top-color:#14b6f2;border-bottom-color:#14b6f2;border-radius:50%;position:relative;animation:loader-rotate 1s linear infinite;top:50%;margin:-28px auto 0;}
@keyframes loader-rotate {
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}
.loader04{width:56px;height:56px;border:2px solid rgba(20, 182, 242, 0.5);border-radius:50%;position:relative;animation:loader-rotate 1s ease-in-out infinite;top:50%;margin:-28px auto 0;}
.loader04::after{content:'';width:10px;height:10px;border-radius:50%;background:#14b6f2;position:absolute;top:-6px;left:50%;margin-left:-5px;}
@keyframes loader-rotate {
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}
.loader05{width:56px;height:56px;border:4px solid #14b6f2;border-radius:50%;position:relative;animation:loader-scale 1s ease-out infinite;top:50%;margin:-28px auto 0;}
@keyframes loader-scale {
0%{transform:scale(0);opacity:0;}
50%{opacity:1;}
100%{transform:scale(1);opacity:0;}
}
.loader06{width:56px;height:56px;border:4px solid transparent;border-radius:50%;position:relative;top:50%;margin:-28px auto 0;}
.loader06::before{content:'';border:4px solid rgba(20, 182, 242, 0.5);border-radius:50%;width:67.2px;height:67.2px;position:absolute;top:-9.6px;left:-9.6px;animation:loader-scale 1s ease-out infinite;animation-delay:1s;opacity:0;}
.loader06::after{content:'';border:4px solid #14b6f2;border-radius:50%;width:56px;height:56px;position:absolute;top:-4px;left:-4px;animation:loader-scale 1s ease-out infinite;animation-delay:0.5s;}
@keyframes loader-scale {
0%{transform:scale(0);opacity:0;}
50%{opacity:1;}
100%{transform:scale(1);opacity:0;}
}
.loader07{width:16px;height:16px;border-radius:50%;position:relative;animation:loader-circles 1s linear infinite;top:50%;margin:-8px auto 0;}
@keyframes loader-circles {
0%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.05), 19px -19px 0 0 rgba(20, 182, 242, 0.1), 27px 0 0 0 rgba(20, 182, 242, 0.2), 19px 19px 0 0 rgba(20, 182, 242, 0.3), 0 27px 0 0 rgba(20, 182, 242, 0.4), -19px 19px 0 0 rgba(20, 182, 242, 0.6), -27px 0 0 0 rgba(20, 182, 242, 0.8), -19px -19px 0 0 #14b6f2;}
12.5%{box-shadow:0 -27px 0 0 #14b6f2, 19px -19px 0 0 rgba(20, 182, 242, 0.05), 27px 0 0 0 rgba(20, 182, 242, 0.1), 19px 19px 0 0 rgba(20, 182, 242, 0.2), 0 27px 0 0 rgba(20, 182, 242, 0.3), -19px 19px 0 0 rgba(20, 182, 242, 0.4), -27px 0 0 0 rgba(20, 182, 242, 0.6), -19px -19px 0 0 rgba(20, 182, 242, 0.8);}
25%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.8), 19px -19px 0 0 #14b6f2, 27px 0 0 0 rgba(20, 182, 242, 0.05), 19px 19px 0 0 rgba(20, 182, 242, 0.1), 0 27px 0 0 rgba(20, 182, 242, 0.2), -19px 19px 0 0 rgba(20, 182, 242, 0.3), -27px 0 0 0 rgba(20, 182, 242, 0.4), -19px -19px 0 0 rgba(20, 182, 242, 0.6);}
37.5%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.6), 19px -19px 0 0 rgba(20, 182, 242, 0.8), 27px 0 0 0 #14b6f2, 19px 19px 0 0 rgba(20, 182, 242, 0.05), 0 27px 0 0 rgba(20, 182, 242, 0.1), -19px 19px 0 0 rgba(20, 182, 242, 0.2), -27px 0 0 0 rgba(20, 182, 242, 0.3), -19px -19px 0 0 rgba(20, 182, 242, 0.4);}
50%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.4), 19px -19px 0 0 rgba(20, 182, 242, 0.6), 27px 0 0 0 rgba(20, 182, 242, 0.8), 19px 19px 0 0 #14b6f2, 0 27px 0 0 rgba(20, 182, 242, 0.05), -19px 19px 0 0 rgba(20, 182, 242, 0.1), -27px 0 0 0 rgba(20, 182, 242, 0.2), -19px -19px 0 0 rgba(20, 182, 242, 0.3);}
62.5%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.3), 19px -19px 0 0 rgba(20, 182, 242, 0.4), 27px 0 0 0 rgba(20, 182, 242, 0.6), 19px 19px 0 0 rgba(20, 182, 242, 0.8), 0 27px 0 0 #14b6f2, -19px 19px 0 0 rgba(20, 182, 242, 0.05), -27px 0 0 0 rgba(20, 182, 242, 0.1), -19px -19px 0 0 rgba(20, 182, 242, 0.2);}
75%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.2), 19px -19px 0 0 rgba(20, 182, 242, 0.3), 27px 0 0 0 rgba(20, 182, 242, 0.4), 19px 19px 0 0 rgba(20, 182, 242, 0.6), 0 27px 0 0 rgba(20, 182, 242, 0.8), -19px 19px 0 0 #14b6f2, -27px 0 0 0 rgba(20, 182, 242, 0.05), -19px -19px 0 0 rgba(20, 182, 242, 0.1);}
87.5%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.1), 19px -19px 0 0 rgba(20, 182, 242, 0.2), 27px 0 0 0 rgba(20, 182, 242, 0.3), 19px 19px 0 0 rgba(20, 182, 242, 0.4), 0 27px 0 0 rgba(20, 182, 242, 0.6), -19px 19px 0 0 rgba(20, 182, 242, 0.8), -27px 0 0 0 #14b6f2, -19px -19px 0 0 rgba(20, 182, 242, 0.05);}
100%{box-shadow:0 -27px 0 0 rgba(20, 182, 242, 0.05), 19px -19px 0 0 rgba(20, 182, 242, 0.1), 27px 0 0 0 rgba(20, 182, 242, 0.2), 19px 19px 0 0 rgba(20, 182, 242, 0.3), 0 27px 0 0 rgba(20, 182, 242, 0.4), -19px 19px 0 0 rgba(20, 182, 242, 0.6), -27px 0 0 0 rgba(20, 182, 242, 0.8), -19px -19px 0 0 #14b6f2;}
}
.loader08{width:20px;height:20px;position:relative;animation:loader08 1s ease infinite;top:50%;margin:-46px auto 0;}
@keyframes loader08 {
0%, 100%{box-shadow:-13px 20px 0 #14b6f2, 13px 20px 0 rgba(20, 182, 242, 0.2), 13px 46px 0 rgba(20, 182, 242, 0.2), -13px 46px 0 rgba(20, 182, 242, 0.2);}
25%{box-shadow:-13px 20px 0 rgba(20, 182, 242, 0.2), 13px 20px 0 #14b6f2, 13px 46px 0 rgba(20, 182, 242, 0.2), -13px 46px 0 rgba(20, 182, 242, 0.2);}
50%{box-shadow:-13px 20px 0 rgba(20, 182, 242, 0.2), 13px 20px 0 rgba(20, 182, 242, 0.2), 13px 46px 0 #14b6f2, -13px 46px 0 rgba(20, 182, 242, 0.2);}
75%{box-shadow:-13px 20px 0 rgba(20, 182, 242, 0.2), 13px 20px 0 rgba(20, 182, 242, 0.2), 13px 46px 0 rgba(20, 182, 242, 0.2), -13px 46px 0 #14b6f2;}
}
.loader09{width:10px;height:48px;background:#14b6f2;position:relative;animation:loader09 1s ease-in-out infinite;animation-delay:0.4s;top:50%;margin:-28px auto 0;}
.loader09::after, .loader09::before{content:'';position:absolute;width:10px;height:48px;background:#14b6f2;animation:loader09 1s ease-in-out infinite;}
.loader09::before{right:18px;animation-delay:0.2s;}
.loader09::after{left:18px;animation-delay:0.6s;}
@keyframes loader09 {
0%, 100%{box-shadow:0 0 0 #14b6f2, 0 0 0 #14b6f2;}
50%{box-shadow:0 -8px 0 #14b6f2, 0 8px 0 #14b6f2;}
}
.loader10{width:28px;height:28px;border-radius:50%;position:relative;animation:loader10 0.9s ease alternate infinite;animation-delay:0.36s;top:50%;margin:-42px auto 0;}
.loader10::after, .loader10::before{content:'';position:absolute;width:28px;height:28px;border-radius:50%;animation:loader10 0.9s ease alternate infinite;}
.loader10::before{left:-40px;animation-delay:0.18s;}
.loader10::after{right:-40px;animation-delay:0.54s;}
@keyframes loader10 {
0%{box-shadow:0 28px 0 -28px #14b6f2;}
100%{box-shadow:0 28px 0 #14b6f2;}
}
.loader11{width:20px;height:20px;border-radius:50%;box-shadow:0 40px 0 #14b6f2;position:relative;animation:loader11 0.8s ease-in-out alternate infinite;animation-delay:0.32s;top:50%;margin:-50px auto 0;}
.loader11::after, .loader11::before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;box-shadow:0 40px 0 #14b6f2;animation:loader11 0.8s ease-in-out alternate infinite;}
.loader11::before{left:-30px;animation-delay:0.48s;}
.loader11::after{right:-30px;animation-delay:0.16s;}
@keyframes loader11 {
0%{box-shadow:0 40px 0 #14b6f2;}
100%{box-shadow:0 20px 0 #14b6f2;}
}
.loader12{width:20px;height:20px;border-radius:50%;position:relative;animation:loader12 1s linear alternate infinite;top:50%;margin:-50px auto 0;}
@keyframes loader12 {
0% {
box-shadow: -60px 40px 0 2px #14b6f2, -30px 40px 0 0 rgba(20, 182, 242, 0.2), 0 40px 0 0 rgba(20, 182, 242, 0.2), 30px 40px 0 0 rgba(20, 182, 242, 0.2), 60px 40px 0 0 rgba(20, 182, 242, 0.2);
}
25% {
box-shadow: -60px 40px 0 0 rgba(20, 182, 242, 0.2), -30px 40px 0 2px #14b6f2, 0 40px 0 0 rgba(20, 182, 242, 0.2), 30px 40px 0 0 rgba(20, 182, 242, 0.2), 60px 40px 0 0 rgba(20, 182, 242, 0.2);
}
50% {
box-shadow: -60px 40px 0 0 rgba(20, 182, 242, 0.2), -30px 40px 0 0 rgba(20, 182, 242, 0.2), 0 40px 0 2px #14b6f2, 30px 40px 0 0 rgba(20, 182, 242, 0.2), 60px 40px 0 0 rgba(20, 182, 242, 0.2);
}
75% {
box-shadow: -60px 40px 0 0 rgba(20, 182, 242, 0.2), -30px 40px 0 0 rgba(20, 182, 242, 0.2), 0 40px 0 0 rgba(20, 182, 242, 0.2), 30px 40px 0 2px #14b6f2, 60px 40px 0 0 rgba(20, 182, 242, 0.2);
}
100% {
box-shadow: -60px 40px 0 0 rgba(20, 182, 242, 0.2), -30px 40px 0 0 rgba(20, 182, 242, 0.2), 0 40px 0 0 rgba(20, 182, 242, 0.2), 30px 40px 0 0 rgba(20, 182, 242, 0.2), 60px 40px 0 2px #14b6f2;
}
}