#preloader-background {
background: #fff none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
#preloader-background .preloader-wrapper {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform:  translate(-50%, -50%);
-moz-transform:  translate(-50%, -50%);
-ms-transform:  translate(-50%, -50%);
-o-transform:  translate(-50%, -50%);
transform:  translate(-50%, -50%);
}  .ball1, .ball2, .ball3 {
height: 10px;
width: 10px;
border-radius: 50%;
float: left;
margin: 0 3px;
}
.ball1 {
background-color: #62abc1;
-webkit-animation: single1ball1anim 2s infinite linear;
animation: single1ball1anim 2s infinite linear;
}
@-webkit-keyframes single1ball1anim {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
12.5% {
-webkit-transform: scale(1.2);
transform: scale(1.5);
}
25%, 100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes single1ball1anim {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
12.5% {
-webkit-transform: scale(1.2);
transform: scale(1.5);
}
25%, 100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
.ball2 {
background-color: #62abc1;
-webkit-animation: single1ball2anim 2s infinite linear;
animation: single1ball2anim 2s infinite linear;
}
@-webkit-keyframes single1ball2anim {
0%, 25% {
-webkit-transform: scale(1);
transform: scale(1);
}
37.5% {
-webkit-transform: scale(1.2);
transform: scale(1.5)
}
50%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes single1ball2anim {
0%, 25% {
-webkit-transform: scale(1);
transform: scale(1);
}
37.5% {
-webkit-transform: scale(1.2);
transform: scale(1.5)
}
50%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.ball3 {
background-color: #62abc1;
-webkit-animation: single1ball3anim 2s infinite linear;
animation: single1ball3anim 2s infinite linear;
}
@-webkit-keyframes single1ball3anim {
0%, 50% {
-webkit-transform: scale(1);
transform: scale(1);
}
62.5% {
-webkit-transform: scale(1.2);
transform: scale(1.5)
}
75%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes single1ball3anim {
0%, 50% {
-webkit-transform: scale(1);
transform: scale(1);
}
62.5% {
-webkit-transform: scale(1.2);
transform: scale(1.5)
}
75%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}  .single1ball {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #F54337;
-webkit-animation: single1animation 4s infinite linear;
animation: single1animation 4s infinite linear; 
}
@-webkit-keyframes single1animation {
0%, 9%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
10%, 19%, 90%, 99% {
-webkit-transform: scale(.2);
transform: scale(.2);
}
20%, 29%, 80%, 89% {
-webkit-transform: scale(.4);
transform: scale(.4);
}
30%, 39%, 70%, 79% {
-webkit-transform: scale(.6);
transform: scale(.6);
}
40%, 49%, 60%, 69% {
-webkit-transform: scale(.8);
transform: scale(.8);
}
50%, 59% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes single1animation {
0%, 9%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
10%, 19%, 90%, 99% {
-webkit-transform: scale(.2);
transform: scale(.2);
}
20%, 29%, 80%, 89% {
-webkit-transform: scale(.4);
transform: scale(.4);
}
30%, 39%, 70%, 79% {
-webkit-transform: scale(.6);
transform: scale(.6);
}
40%, 49%, 60%, 69% {
-webkit-transform: scale(.8);
transform: scale(.8);
}
50%, 59% {
-webkit-transform: scale(1);
transform: scale(1);
}
}  .single4 {
width: 50px;
height: 50px;
border-radius: 50%;
border: 6px solid #EEEEEE;
border-top-color: #F54337;
border-bottom-color: #F54337;
-webkit-animation: single4 2.5s infinite ease-in-out;
animation: single4 2.5s infinite ease-in-out;
}
@-webkit-keyframes single4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
}
@keyframes single4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
}  .single6 {
height: 60px;
width: 60px;
border-radius: 50%;
background-color: #f54337;
-webkit-animation: single6 1s infinite ease-in;
animation: single6 1s infinite ease-in;
}
@-webkit-keyframes single6 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes single6 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}  .single5 {
height: 50px;
width: 50px;
background-color: var(--preloader-color);
-webkit-animation: single5 5s infinite linear;
animation: single5 5s infinite linear;
}
@-webkit-keyframes single5 {
0% { 
-webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg);
background-color: var(--preloader-color);
}
25% { 
-webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
background-color: var(--preloader-color);
}
50% { 
-webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
background-color: var(--preloader-color);
}
75% { 
-webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg);
background-color: var(--preloader-color);
}
100% { 
-webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg);
background-color: var(--preloader-color);
}
}
@keyframes single5 {
0% { 
transform: perspective(180px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg);
background-color: var(--preloader-color);
}
25% { 
transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
background-color: var(--preloader-color);
}
50% { 
transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
-webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
background-color: var(--preloader-color);
}
75% { 
transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
-webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg);
background-color: var(--preloader-color);
}
100% { 
transform: perspective(180px) rotateX(0deg) rotateY(360deg);
-webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg);
background-color: var(--preloader-color);
}
}  .single8 {
width: 40px;
height: 40px;
border-radius: 50%;
border: 10px solid red;
-webkit-animation: single8 8s infinite linear;
animation: single8 8s infinite linear;
} 
@-webkit-keyframes single8 {
0%, 100%{ border: solid 20px var(--preloader-color); }
6.25% { border: solid 2px var(--preloader-color); }
12.5% { border: solid 2px var(--preloader-color); }
18.75% { border: solid 20px var(--preloader-color); }
25% { border: solid 20px var(--preloader-color); }
31.25% { border: solid 2px var(--preloader-color); }
37.5% { border: solid 2px var(--preloader-color); }
43.75% { border: solid 20px var(--preloader-color); }
50% { border: solid 20px var(--preloader-color); }
56.25% { border: solid 2px var(--preloader-color); }
62.5% { border: solid 2px var(--preloader-color); }
68.75% { border: solid 20px var(--preloader-color); }
75% { border: solid 20px var(--preloader-color); }
81.25% { border: solid 2px var(--preloader-color); }
87.5% { border: solid 2px var(--preloader-color); }
93.75% { border: solid 20px var(--preloader-color); }   
}
@keyframes single8 {
0%, 100%{ border: solid 20px var(--preloader-color); }
6.25% { border: solid 2px var(--preloader-color); }
12.5% { border: solid 2px var(--preloader-color); }
18.75% { border: solid 20px var(--preloader-color); }
25% { border: solid 20px var(--preloader-color); }
31.25% { border: solid 2px var(--preloader-color); }
37.5% { border: solid 2px var(--preloader-color); }
43.75% { border: solid 20px var(--preloader-color); }
50% { border: solid 20px var(--preloader-color); }
56.25% { border: solid 2px var(--preloader-color); }
62.5% { border: solid 2px var(--preloader-color); }
68.75% { border: solid 20px var(--preloader-color); }
75% { border: solid 20px var(--preloader-color); }
81.25% { border: solid 2px var(--preloader-color); }
87.5% { border: solid 2px var(--preloader-color); }
93.75% { border: solid 20px var(--preloader-color); }
}  .single9 {
height: 6px;
width: 75px;
background-color: #d8d7d7;
position: relative;
}
.single9:before {
content: '';
height: 6px;
width: 10px;
position: absolute;
left: 0;
background-color: #0288d1;
-webkit-animation: single9anim 4s infinite ease-in-out;
animation: single9anim 4s infinite ease-in-out;
}
@-webkit-keyframes single9anim {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(65px);
transform: translateX(65px);
}
}
@keyframes single9anim {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(65px);
transform: translateX(65px);
}
} .news-portal-wave {
margin: 40px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.news-portal-wave .np-rect {
background-color: #F54337;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: news-portal-waveStretchDelay 1.2s infinite ease-in-out;
animation: news-portal-waveStretchDelay 1.2s infinite ease-in-out;
}
.news-portal-wave .np-rect1 {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.news-portal-wave .np-rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.news-portal-wave .np-rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.news-portal-wave .np-rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.news-portal-wave .np-rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes news-portal-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes news-portal-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
} .news-portal-three-bounce {
margin: 40px auto;
width: 80px;
text-align: center;
}
.news-portal-three-bounce .np-child {
width: 20px;
height: 20px;
background-color: #E53935;
border-radius: 100%;
display: inline-block;
-webkit-animation: news-portal-three-bounce 1.4s ease-in-out 0s infinite both;
animation: news-portal-three-bounce 1.4s ease-in-out 0s infinite both;
}
.news-portal-three-bounce .np-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.news-portal-three-bounce .np-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes news-portal-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes news-portal-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
} .news-portal-folding-cube {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.news-portal-folding-cube .np-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.news-portal-folding-cube .np-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #F54337;
-webkit-animation: np-foldCubeAngle 2.4s infinite linear both;
animation: np-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.news-portal-folding-cube .np-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.news-portal-folding-cube .np-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.news-portal-folding-cube .np-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.news-portal-folding-cube .np-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.news-portal-folding-cube .np-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.news-portal-folding-cube .np-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes np-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes np-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}