#preloader-1 {
height: 200px;
width: 200px;
}
#preloader-1 .object {
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
position: absolute;
border-left: 5px solid #FFF;
border-right: 5px solid #FFF;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
-webkit-animation: preloader-1 2s infinite;
animation: preloader-1 2s infinite;
}
#preloader-1 #object_one {
left: 75px;
top: 75px;
width: 50px;
height: 50px;
}
#preloader-1 #object_two {
left: 65px;
top: 65px;
width: 70px;
height: 70px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#preloader-1 #object_three {
left: 55px;
top: 55px;
width: 90px;
height: 90px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#preloader-1 #object_four {
left: 45px;
top: 45px;
width: 110px;
height: 110px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes preloader-1 {
50% {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes preloader-1 {
50% {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#preloader-2 {
height: 150px;
width: 150px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#preloader-2 .object {
width: 20px;
height: 20px;
background-color: #FFF;
position: absolute;
left: 65px;
top: 65px;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
}
#preloader-2 .object:nth-child(2n+0) {
margin-right: 0px;
}
#preloader-2 #object_one {
-webkit-animation: preloader2_object_one 2s infinite;
animation: preloader2_object_one 2s infinite;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#preloader-2 #object_two {
-webkit-animation: preloader2_object_two 2s infinite;
animation: preloader2_object_two 2s infinite;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#preloader-2 #object_three {
-webkit-animation: preloader2_object_three 2s infinite;
animation: preloader2_object_three 2s infinite;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#preloader-2 #object_four {
-webkit-animation: preloader2_object_four 2s infinite;
animation: preloader2_object_four 2s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#preloader-2 #object_five {
-webkit-animation: preloader2_object_five 2s infinite;
animation: preloader2_object_five 2s infinite;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#preloader-2 #object_six {
-webkit-animation: preloader2_object_six 2s infinite;
animation: preloader2_object_six 2s infinite;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#preloader-2 #object_seven {
-webkit-animation: preloader2_object_seven 2s infinite;
animation: preloader2_object_seven 2s infinite;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#preloader-2 #object_eight {
-webkit-animation: preloader2_object_eight 2s infinite;
animation: preloader2_object_eight 2s infinite;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#preloader-2 #object_big {
position: absolute;
width: 50px;
height: 50px;
left: 50px;
top: 50px;
-webkit-animation: preloader2_object_big 2s infinite;
animation: preloader2_object_big 2s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes preloader2_object_big {
50% {
-webkit-transform: scale(0.5);
}
}
@keyframes preloader2_object_big {
50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes preloader2_object_one {
50% {
-webkit-transform: translate(-65px, -65px);
}
}
@keyframes preloader2_object_one {
50% {
transform: translate(-65px, -65px);
-webkit-transform: translate(-65px, -65px);
}
}
@-webkit-keyframes preloader2_object_two {
50% {
-webkit-transform: translate(0, -65px);
}
}
@keyframes preloader2_object_two {
50% {
transform: translate(0, -65px);
-webkit-transform: translate(0, -65px);
}
}
@-webkit-keyframes preloader2_object_three {
50% {
-webkit-transform: translate(65px, -65px);
}
}
@keyframes preloader2_object_three {
50% {
transform: translate(65px, -65px);
-webkit-transform: translate(65px, -65px);
}
}
@-webkit-keyframes preloader2_object_four {
50% {
-webkit-transform: translate(65px, 0);
}
}
@keyframes preloader2_object_four {
50% {
transform: translate(65px, 0);
-webkit-transform: translate(65px, 0);
}
}
@-webkit-keyframes preloader2_object_five {
50% {
-webkit-transform: translate(65px, 65px);
}
}
@keyframes preloader2_object_five {
50% {
transform: translate(65px, 65px);
-webkit-transform: translate(65px, 65px);
}
}
@-webkit-keyframes preloader2_object_six {
50% {
-webkit-transform: translate(0, 65px);
}
}
@keyframes preloader2_object_six {
50% {
transform: translate(0, 65px);
-webkit-transform: translate(0, 65px);
}
}
@-webkit-keyframes preloader2_object_seven {
50% {
-webkit-transform: translate(-65px, 65px);
}
}
@keyframes preloader2_object_seven {
50% {
transform: translate(-65px, 65px);
-webkit-transform: translate(-65px, 65px);
}
}
@-webkit-keyframes preloader2_object_eight {
50% {
-webkit-transform: translate(-65px, 0);
}
}
@keyframes preloader2_object_eight {
50% {
transform: translate(-65px, 0);
-webkit-transform: translate(-65px, 0);
}
}
#preloader-3 {
height: 50px;
width: 300px;
}
#preloader-3 .object {
width: 18px;
height: 18px;
background-color: #FFF;
float: left;
margin-top: 15px;
margin-right: 15px;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
-webkit-animation: preloader_3_object 1s infinite;
animation: preloader_3_object 1s infinite;
}
#preloader-3 .object:last-child {
margin-right: 0px;
}
#preloader-3 .object:nth-child(9) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#preloader-3 .object:nth-child(8) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#preloader-3 .object:nth-child(7) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#preloader-3 .object:nth-child(6) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#preloader-3 .object:nth-child(5) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#preloader-3 .object:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#preloader-3 .object:nth-child(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#preloader-3 .object:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes preloader_3_object {
50% {
-ms-transform: translate(0, -50px);
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
}
@keyframes preloader_3_object {
50% {
-ms-transform: translate(0, -50px);
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
}
#preloader-4 {
height: 60px;
width: 60px;
-ms-transform: rotate(0deg) !important;
-webkit-transform: rotate(0deg) !important;
transform: rotate(0deg) !important;
margin-top: -30px;
margin-left: -30px;
-webkit-animation: preloader_4 1s infinite;
animation: preloader_4 1s infinite;
}
#preloader-4 .object {
width: 20px;
height: 20px;
background-color: #FFF;
float: left;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
margin-right: 20px;
margin-bottom: 20px;
}
#preloader-4 .object:nth-child(2n+0) {
margin-right: 0px;
}
#preloader-4 #object_one {
-webkit-animation: preloader_4_object_one 1s infinite;
animation: preloader_4_object_one 1s infinite;
}
#preloader-4 #object_two {
-webkit-animation: preloader_4_object_two 1s infinite;
animation: preloader_4_object_two 1s infinite;
}
#preloader-4 #object_three {
-webkit-animation: preloader_4_object_three 1s infinite;
animation: preloader_4_object_three 1s infinite;
}
#preloader-4 #object_four {
-webkit-animation: preloader_4_object_four 1s infinite;
animation: preloader_4_object_four 1s infinite;
}
@-webkit-keyframes preloader_4 {
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes preloader_4 {
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes preloader_4_object_one {
50% {
-ms-transform: translate(20px, 20px);
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes preloader_4_object_one {
50% {
-ms-transform: translate(20px, 20px);
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@-webkit-keyframes preloader_4_object_two {
50% {
-ms-transform: translate(-20px, 20px);
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes preloader_4_object_two {
50% {
-ms-transform: translate(-20px, 20px);
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@-webkit-keyframes preloader_4_object_three {
50% {
-ms-transform: translate(20px, -20px);
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes preloader_4_object_three {
50% {
-ms-transform: translate(20px, -20px);
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@-webkit-keyframes preloader_4_object_four {
50% {
-ms-transform: translate(-20px, -20px);
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
@keyframes preloader_4_object_four {
50% {
-ms-transform: translate(-20px, -20px);
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
#preloader-5 {
height: 20px;
width: 140px;
margin-top: -10px;
margin-left: -70px;
-ms-transform: rotate(0deg) !important;
-webkit-transform: rotate(0deg) !important;
transform: rotate(0deg) !important;
-webkit-animation: preloader_5 1s infinite;
animation: preloader_5 1s infinite;
}
#preloader-5 .object {
width: 20px;
height: 20px;
background-color: #FFF;
float: left;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
margin-right: 20px;
margin-bottom: 20px;
}
#preloader-5 .object:last-child {
margin-right: 0px;
}
#preloader-5 #object_one {
-webkit-animation: preloader_5_object_one 1s infinite;
animation: preloader_5_object_one 1s infinite;
}
#preloader-5 #object_two {
-webkit-animation: preloader_5_object_two 1s infinite;
animation: preloader_5_object_two 1s infinite;
}
#preloader-5 #object_three {
-webkit-animation: preloader_5_object_three 1s infinite;
animation: preloader_5_object_three 1s infinite;
}
#preloader-5 #object_four {
-webkit-animation: preloader_5_object_four 1s infinite;
animation: preloader_5_object_four 1s infinite;
}
@-webkit-keyframes preloader_5 {
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes preloader_5 {
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes preloader_5_object_one {
50% {
-ms-transform: translate(20px, 20px);
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes preloader_5_object_one {
50% {
-ms-transform: translate(20px, 20px);
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@-webkit-keyframes preloader_5_object_two {
50% {
-ms-transform: translate(-20px, 20px);
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes preloader_5_object_two {
50% {
-ms-transform: translate(-20px, 20px);
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@-webkit-keyframes preloader_5_object_three {
50% {
-ms-transform: translate(20px, -20px);
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes preloader_5_object_three {
50% {
-ms-transform: translate(20px, -20px);
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@-webkit-keyframes preloader_5_object_four {
50% {
-ms-transform: translate(-20px, -20px);
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
@keyframes preloader_5_object_four {
50% {
-ms-transform: translate(-20px, -20px);
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
#preloader-6 {
height: 20px;
width: 100px;
}
#preloader-6 .object {
width: 20px;
height: 20px;
background-color: #FFF;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
margin-right: 20px;
margin-bottom: 20px;
position: absolute;
}
#preloader-6 #object_one {
-webkit-animation: preloader_6_object 2s linear infinite;
animation: preloader_6_object 2s linear infinite;
}
#preloader-6 #object_two {
-webkit-animation: preloader_6_object 2s linear infinite -.4s;
animation: preloader_6_object 2s linear infinite -.4s;
}
#preloader-6 #object_three {
-webkit-animation: preloader_6_object 2s linear infinite -.8s;
animation: preloader_6_object 2s linear infinite -.8s;
}
#preloader-6 #object_four {
-webkit-animation: preloader_6_object 2s linear infinite -1.2s;
animation: preloader_6_object 2s linear infinite -1.2s;
}
#preloader-6 #object_five {
-webkit-animation: preloader_6_object 2s linear infinite -1.6s;
animation: preloader_6_object 2s linear infinite -1.6s;
}
@-webkit-keyframes preloader_6_object {
0% {
left: 100px;
top: 0
}
80% {
left: 0;
top: 0;
}
85% {
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90% {
width: 40px;
height: 15px;
}
95% {
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100% {
left: 100px;
top: 0;
}
}
@keyframes preloader_6_object {
0% {
left: 100px;
top: 0
}
80% {
left: 0;
top: 0;
}
85% {
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90% {
width: 40px;
height: 15px;
}
95% {
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100% {
left: 100px;
top: 0;
}
}
#preloader-7 {
height: 150px;
width: 150px;
margin-top: -75px;
margin-left: -75px;
-ms-transform: rotate(45deg) !important;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
}
#preloader-7 .object {
width: 20px;
height: 20px;
background-color: #FFF;
position: absolute;
left: 65px;
top: 65px;
}
#preloader-7 .object:nth-child(2n+0) {
margin-right: 0px;
}
#preloader-7 #object_one {
-webkit-animation: preloader_7_object_one 2s infinite;
animation: preloader_7_object_one 2s infinite;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#preloader-7 #object_two {
-webkit-animation: preloader_7_object_two 2s infinite;
animation: preloader_7_object_two 2s infinite;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#preloader-7 #object_three {
-webkit-animation: preloader_7_object_three 2s infinite;
animation: preloader_7_object_three 2s infinite;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#preloader-7 #object_four {
-webkit-animation: preloader_7_object_four 2s infinite;
animation: preloader_7_object_four 2s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#preloader-7 #object_five {
-webkit-animation: preloader_7_object_five 2s infinite;
animation: preloader_7_object_five 2s infinite;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#preloader-7 #object_six {
-webkit-animation: preloader_7_object_six 2s infinite;
animation: preloader_7_object_six 2s infinite;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#preloader-7 #object_seven {
-webkit-animation: preloader_7_object_seven 2s infinite;
animation: preloader_7_object_seven 2s infinite;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#preloader-7 #object_eight {
-webkit-animation: preloader_7_object_eight 2s infinite;
animation: preloader_7_object_eight 2s infinite;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#preloader-7 #object_big {
position: absolute;
width: 50px;
height: 50px;
left: 50px;
top: 50px;
-webkit-animation: preloader_7_object_big 2s infinite;
animation: preloader_7_object_big 2s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes preloader_7_object_big {
50% {
-webkit-transform: scale(0.5);
}
}
@keyframes preloader_7_object_big {
50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes preloader_7_object_one {
50% {
-webkit-transform: translate(-65px, -65px);
}
}
@keyframes preloader_7_object_one {
50% {
transform: translate(-65px, -65px);
-webkit-transform: translate(-65px, -65px);
}
}
@-webkit-keyframes preloader_7_object_two {
50% {
-webkit-transform: translate(0, -65px);
}
}
@keyframes preloader_7_object_two {
50% {
transform: translate(0, -65px);
-webkit-transform: translate(0, -65px);
}
}
@-webkit-keyframes preloader_7_object_three {
50% {
-webkit-transform: translate(65px, -65px);
}
}
@keyframes preloader_7_object_three {
50% {
transform: translate(65px, -65px);
-webkit-transform: translate(65px, -65px);
}
}
@-webkit-keyframes preloader_7_object_four {
50% {
-webkit-transform: translate(65px, 0);
}
}
@keyframes preloader_7_object_four {
50% {
transform: translate(65px, 0);
-webkit-transform: translate(65px, 0);
}
}
@-webkit-keyframes preloader_7_object_five {
50% {
-webkit-transform: translate(65px, 65px);
}
}
@keyframes preloader_7_object_five {
50% {
transform: translate(65px, 65px);
-webkit-transform: translate(65px, 65px);
}
}
@-webkit-keyframes preloader_7_object_six {
50% {
-webkit-transform: translate(0, 65px);
}
}
@keyframes preloader_7_object_six {
50% {
transform: translate(0, 65px);
-webkit-transform: translate(0, 65px);
}
}
@-webkit-keyframes preloader_7_object_seven {
50% {
-webkit-transform: translate(-65px, 65px);
}
}
@keyframes preloader_7_object_seven {
50% {
transform: translate(-65px, 65px);
-webkit-transform: translate(-65px, 65px);
}
}
@-webkit-keyframes preloader_7_object_eight {
50% {
-webkit-transform: translate(-65px, 0);
}
}
@keyframes preloader_7_object_eight {
50% {
transform: translate(-65px, 0);
-webkit-transform: translate(-65px, 0);
}
}
#preloader-8 {
height: 200px;
width: 200px;
}
#preloader-8 .object {
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0);
margin-right: auto;
margin-left: auto;
border: 4px solid #FFF;
left: 73px;
top: 73px;
position: absolute;
}
#preloader-8 #first_object {
-webkit-animation: first_object_animate 1s infinite ease-in-out;
animation: first_object_animate 1s infinite ease-in-out;
}
#preloader-8 #second_object {
-webkit-animation: second_object 1s forwards, second_object_animate 1s infinite ease-in-out;
animation: second_object 1s forwards, second_object_animate 1s infinite ease-in-out;
}
#preloader-8 #third_object {
-webkit-animation: third_object 1s forwards, third_object_animate 1s infinite ease-in-out;
animation: third_object 1s forwards, third_object_animate 1s infinite ease-in-out;
}
@-webkit-keyframes second_object {
100% {
width: 100px;
height: 100px;
left: 48px;
top: 48px;
}
}
@keyframes second_object {
100% {
width: 100px;
height: 100px;
left: 48px;
top: 48px;
}
}
@-webkit-keyframes third_object {
100% {
width: 150px;
height: 150px;
left: 23px;
top: 23px;
}
}
@keyframes third_object {
100% {
width: 150px;
height: 150px;
left: 23px;
top: 23px;
}
}
@-webkit-keyframes first_object_animate {
0% {
-webkit-transform: perspective(100px);
}
50% {
-webkit-transform: perspective(100px) rotateY(-180deg);
}
100% {
-webkit-transform: perspective(100px) rotateY(-180deg) rotateX(-180deg);
}
}
@keyframes first_object_animate {
0% {
transform: perspective(100px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
}
100% {
transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
}
}
@-webkit-keyframes second_object_animate {
0% {
-webkit-transform: perspective(200px);
}
50% {
-webkit-transform: perspective(200px) rotateY(180deg);
}
100% {
-webkit-transform: perspective(200px) rotateY(180deg) rotateX(180deg);
}
}
@keyframes second_object_animate {
0% {
transform: perspective(200px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(200px) rotateX(180deg) rotateY(0deg);
-webkit-transform: perspective(200px) rotateX(180deg) rotateY(0deg);
}
100% {
transform: perspective(200px) rotateX(180deg) rotateY(180deg);
-webkit-transform: perspective(200px) rotateX(180deg) rotateY(180deg);
}
}
@-webkit-keyframes third_object_animate {
0% {
-webkit-transform: perspective(300px);
}
50% {
-webkit-transform: perspective(300px) rotateY(-180deg);
}
100% {
-webkit-transform: perspective(300px) rotateY(-180deg) rotateX(-180deg);
}
}
@keyframes third_object_animate {
0% {
transform: perspective(300px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
}
100% {
transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
}
}
#preloader-9 {
height: 100px;
width: 100px;
}
#preloader-9 .object {
width: 25px;
height: 25px;
background-color: rgba(255, 255, 255, 0);
margin-right: auto;
margin-left: auto;
border: 4px solid rgba(239, 74, 74, 1);
left: 37px;
top: 37px;
position: absolute;
}
#preloader-9 #first_object {
-webkit-animation: preloader_9_first_object 1s infinite;
animation: preloader_9_first_object 1s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#preloader-9 #second_object {
-webkit-animation: preloader_9_second_object 1s infinite;
animation: preloader_9_second_object 1s infinite;
}
#preloader-9 #third_object {
-webkit-animation: preloader_9_third_object 1s infinite;
animation: preloader_9_third_object 1s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#preloader-9 #forth_object {
-webkit-animation: preloader_9_forth_object 1s infinite;
animation: preloader_9_forth_object 1s infinite;
}
@-webkit-keyframes preloader_9_first_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(150%, 150%) scale(2, 2);
-webkit-transform: translate(150%, 150%) scale(2, 2);
transform: translate(150%, 150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
@keyframes preloader_9_first_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(150%, 150%) scale(2, 2);
-webkit-transform: translate(150%, 150%) scale(2, 2);
transform: translate(150%, 150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
@-webkit-keyframes preloader_9_second_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(-150%, 150%) scale(2, 2);
-webkit-transform: translate(-150%, 150%) scale(2, 2);
transform: translate(-150%, 150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
@keyframes preloader_9_second_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(-150%, 150%) scale(2, 2);
-webkit-transform: translate(-150%, 150%) scale(2, 2);
transform: translate(-150%, 150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
@-webkit-keyframes preloader_9_third_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(-150%, -150%) scale(2, 2);
-webkit-transform: translate(-150%, -150%) scale(2, 2);
transform: translate(-150%, -150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
@keyframes preloader_9_third_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(-150%, -150%) scale(2, 2);
-webkit-transform: translate(-150%, -150%) scale(2, 2);
transform: translate(-150%, -150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
@-webkit-keyframes preloader_9_forth_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(150%, -150%) scale(2, 2);
-webkit-transform: translate(150%, -150%) scale(2, 2);
transform: translate(150%, -150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
@keyframes preloader_9_forth_object {
0% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
50% {
-ms-transform: translate(150%, -150%) scale(2, 2);
-webkit-transform: translate(150%, -150%) scale(2, 2);
transform: translate(150%, -150%) scale(2, 2);
}
100% {
-ms-transform: translate(1, 1) scale(1, 1);
-webkit-transform: translate(1, 1) scale(1, 1);
transform: translate(1, 1) scale(1, 1);
}
}
#preloader-10 {
height: 118px;
width: 118px;
}
#preloader-10 .object {
width: 20px;
height: 20px;
background-color: #FFF;
margin-right: 20px;
float: left;
margin-bottom: 20px;
}
#preloader-10 .object:nth-child(3n+0) {
margin-right: 0px;
}
#preloader-10 #object_one {
-webkit-animation: preloader_10_animate 1s -0.9s ease-in-out infinite;
animation: preloader_10_animate 1s -0.9s ease-in-out infinite;
}
#preloader-10 #object_two {
-webkit-animation: preloader_10_animate 1s -0.8s ease-in-out infinite;
animation: preloader_10_animate 1s -0.8s ease-in-out infinite;
}
#preloader-10 #object_three {
-webkit-animation: preloader_10_animate 1s -0.7s ease-in-out infinite;
animation: preloader_10_animate 1s -0.7s ease-in-out infinite;
}
#preloader-10 #object_four {
-webkit-animation: preloader_10_animate 1s -0.6s ease-in-out infinite;
animation: preloader_10_animate 1s -0.6s ease-in-out infinite;
}
#preloader-10 #object_five {
-webkit-animation: preloader_10_animate 1s -0.5s ease-in-out infinite;
animation: preloader_10_animate 1s -0.5s ease-in-out infinite;
}
#preloader-10 #object_six {
-webkit-animation: preloader_10_animate 1s -0.4s ease-in-out infinite;
animation: preloader_10_animate 1s -0.4s ease-in-out infinite;
}
#preloader-10 #object_seven {
-webkit-animation: preloader_10_animate 1s -0.3s ease-in-out infinite;
animation: preloader_10_animate 1s -0.3s ease-in-out infinite;
}
#preloader-10 #object_eight {
-webkit-animation: preloader_10_animate 1s -0.2s ease-in-out infinite;
animation: preloader_10_animate 1s -0.2s ease-in-out infinite;
}
#preloader-10 #object_nine {
-webkit-animation: preloader_10_animate 1s -0.1s ease-in-out infinite;
animation: preloader_10_animate 1s -0.1s ease-in-out infinite;
}
@-webkit-keyframes preloader_10_animate {
50% {
-ms-transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes preloader_10_animate {
50% {
-ms-transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#preloader-11 {
height: 100px;
width: 100px;
}
#preloader-11 .object {
width: 25px;
height: 25px;
background-color: #FFF;
margin-right: 50px;
float: left;
margin-bottom: 50px;
}
#preloader-11 .object:nth-child(2n+0) {
margin-right: 0px;
}
#preloader-11 #object_one {
-webkit-animation: preloader_11_object_one 2s infinite;
animation: preloader_11_object_one 2s infinite;
}
#preloader-11 #object_two {
-webkit-animation: preloader_11_object_two 2s infinite;
animation: preloader_11_object_two 2s infinite;
}
#preloader-11 #object_three {
-webkit-animation: preloader_11_object_three 2s infinite;
animation: preloader_11_object_three 2s infinite;
}
#preloader-11 #object_four {
-webkit-animation: preloader_11_object_four 2s infinite;
animation: preloader_11_object_four 2s infinite;
}
@-webkit-keyframes preloader_11_object_one {
25% {
-webkit-transform: translate(75px, 0) rotate(-90deg) scale(0.5);
}
50% {
-webkit-transform: translate(75px, 75px) rotate(-180deg);
}
75% {
-webkit-transform: translate(0, 75px) rotate(-270deg) scale(0.5);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes preloader_11_object_one {
25% {
transform: translate(75px, 0) rotate(-90deg) scale(0.5);
-webkit-transform: translate(75px, 0) rotate(-90deg) scale(0.5);
}
50% {
transform: translate(75px, 75px) rotate(-180deg);
-webkit-transform: translate(75px, 75px) rotate(-180deg);
}
75% {
transform: translate(0, 75px) rotate(-270deg) scale(0.5);
-webkit-transform: translate(0, 75px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
@-webkit-keyframes preloader_11_object_two {
25% {
-webkit-transform: translate(0, 75px) rotate(-90deg) scale(0.5);
}
50% {
-webkit-transform: translate(-75px, 75px) rotate(-180deg);
}
75% {
-webkit-transform: translate(-75px, 0) rotate(-270deg) scale(0.5);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes preloader_11_object_two {
25% {
transform: translate(0, 75px) rotate(-90deg) scale(0.5);
-webkit-transform: translate(0, 75px) rotate(-90deg) scale(0.5);
}
50% {
transform: translate(-75px, 75px) rotate(-180deg);
-webkit-transform: translate(-75px, 75px) rotate(-180deg);
}
75% {
transform: translate(-75px, 0) rotate(-270deg) scale(0.5);
-webkit-transform: translate(-75px, 0) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
@-webkit-keyframes preloader_11_object_three {
25% {
-webkit-transform: translate(0, -75px) rotate(-90deg) scale(0.5);
}
50% {
-webkit-transform: translate(75px, -75px) rotate(-180deg);
}
75% {
-webkit-transform: translate(75px, 0) rotate(-270deg) scale(0.5);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes preloader_11_object_three {
25% {
transform: translate(0, -75px) rotate(-90deg) scale(0.5);
-webkit-transform: translate(0, -75px) rotate(-90deg) scale(0.5);
}
50% {
transform: translate(75px, -75px) rotate(-180deg);
-webkit-transform: translate(75px, -75px) rotate(-180deg);
}
75% {
transform: translate(75px, 0) rotate(-270deg) scale(0.5);
-webkit-transform: translate(75px, 0) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
@-webkit-keyframes preloader_11_object_four {
25% {
-webkit-transform: translate(-75px, 0) rotate(-90deg) scale(0.5);
}
50% {
-webkit-transform: translate(-75px, -75px) rotate(-180deg);
}
75% {
-webkit-transform: translate(0, -75px) rotate(-270deg) scale(0.5);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes preloader_11_object_four {
25% {
transform: translate(-75px, 0) rotate(-90deg) scale(0.5);
-webkit-transform: translate(-75px, 0) rotate(-90deg) scale(0.5);
}
50% {
transform: translate(-75px, -75px) rotate(-180deg);
-webkit-transform: translate(-75px, -75px) rotate(-180deg);
}
75% {
transform: translate(0, -75px) rotate(-270deg) scale(0.5);
-webkit-transform: translate(0, -75px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
#preloader-12 {
height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;
-ms-transform: rotate(45deg) !important;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
-webkit-animation: preloader_12 1.5s infinite;
animation: preloader_12 1.5s infinite;
}
#preloader-12 .object {
width: 25px;
height: 25px;
background-color: #FFF;
float: left;
}
#preloader-12 #object_one {
-webkit-animation: preloader_12_object_one 1.5s infinite;
animation: preloader_12_object_one 1.5s infinite;
}
#preloader-12 #object_two {
-webkit-animation: preloader_12_object_two 1.5s infinite;
animation: preloader_12_object_two 1.5s infinite;
}
#preloader-12 #object_three {
-webkit-animation: preloader_12_object_three 1.5s infinite;
animation: preloader_12_object_three 1.5s infinite;
}
#preloader-12 #object_four {
-webkit-animation: preloader_12_object_four 1.5s infinite;
animation: preloader_12_object_four 1.5s infinite;
}
@-webkit-keyframes preloader_12 {
100% {
-webkit-transform: rotate(-45deg);
}
}
@keyframes preloader_12 {
100% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
}
@-webkit-keyframes preloader_12_object_one {
25% {
-webkit-transform: translate(0, -50px) rotate(-180deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(-180deg);
}
}
@keyframes preloader_12_object_one {
25% {
transform: translate(0, -50px) rotate(-180deg);
-webkit-transform: translate(0, -50px) rotate(-180deg);
}
100% {
transform: translate(0, 0) rotate(-180deg);
-webkit-transform: translate(0, 0) rotate(-180deg);
}
}
@-webkit-keyframes preloader_12_object_two {
25% {
-webkit-transform: translate(50px, 0) rotate(-180deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(-180deg);
}
}
@keyframes preloader_12_object_two {
25% {
transform: translate(50px, 0) rotate(-180deg);
-webkit-transform: translate(50px, 0) rotate(-180deg);
}
100% {
transform: translate(0, 0) rotate(-180deg);
-webkit-transform: translate(0, 0) rotate(-180deg);
}
}
@-webkit-keyframes preloader_12_object_three {
25% {
-webkit-transform: translate(-50px, 0) rotate(-180deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(-180deg);
}
}
@keyframes preloader_12_object_three {
25% {
transform: translate(-50px, 0) rotate(-180deg);
-webkit-transform: translate(-50px, 0) rotate(-180deg);
}
100% {
transform: translate(0, 0) rotate(-180deg);
-webkit-transform: rtranslate(0, 0) rotate(-180deg);
}
}
@-webkit-keyframes preloader_12_object_four {
25% {
-webkit-transform: translate(0, 50px) rotate(-180deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(-180deg);
}
}
@keyframes preloader_12_object_four {
25% {
transform: translate(0, 50px) rotate(-180deg);
-webkit-transform: translate(0, 50px) rotate(-180deg);
}
100% {
transform: translate(0, 0) rotate(-180deg);
-webkit-transform: translate(0, 0) rotate(-180deg);
}
}
#preloader-13 {
height: 100px;
width: 50px;
}
#preloader-13 .object {
width: 50px;
height: 8px;
margin-bottom: 15px;
background-color: #FFF;
-webkit-animation: preloader_13_animate 0.8s infinite;
animation: preloader_13_animate 0.8s infinite;
}
#preloader-13 #object_two {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#preloader-13 #object_four {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes preloader_13_animate {
50% {
-ms-transform: translate(50%, 0);
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
}
}
@keyframes preloader_13_animate {
50% {
-ms-transform: translate(50%, 0);
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
}
}
#preloader-14 {
height: 50px;
width: 150px;
}
#preloader-14 .object {
width: 8px;
height: 50px;
margin-right: 5px;
background-color: #FFF;
-webkit-animation: preloader_14_animate 1s infinite;
animation: preloader_14_animate 1s infinite;
float: left;
}
#preloader-14 .object:last-child {
margin-right: 0px;
}
#preloader-14 .object:nth-child(10) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#preloader-14 .object:nth-child(9) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#preloader-14 .object:nth-child(8) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#preloader-14 .object:nth-child(7) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#preloader-14 .object:nth-child(6) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#preloader-14 .object:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#preloader-14 .object:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#preloader-14 .object:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#preloader-14 .object:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
@-webkit-keyframes preloader_14_animate {
50% {
-ms-transform: translateX(-25px) scaleY(0.5);
-webkit-transform: translateX(-25px) scaleY(0.5);
transform: translateX(-25px) scaleY(0.5);
}
}
@keyframes preloader_14_animate {
50% {
-ms-transform: translateX(-25px) scaleY(0.5);
-webkit-transform: translateX(-25px) scaleY(0.5);
transform: translateX(-25px) scaleY(0.5);
}
}
.pacman {
position: relative;
}
.pacman>div:nth-child(2) {
-webkit-animation: pacman-balls 1s -0.99s infinite linear;
animation: pacman-balls 1s -0.99s infinite linear;
}
.pacman>div:nth-child(3) {
-webkit-animation: pacman-balls 1s -0.66s infinite linear;
animation: pacman-balls 1s -0.66s infinite linear;
}
.pacman>div:nth-child(4) {
-webkit-animation: pacman-balls 1s -0.33s infinite linear;
animation: pacman-balls 1s -0.33s infinite linear;
}
.pacman>div:nth-child(5) {
-webkit-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear;
}
.pacman>div:first-of-type {
width: 0px;
height: 0px;
border-right: 25px solid transparent !important;
border-top: 25px solid #fff;
border-left: 25px solid #fff;
border-bottom: 25px solid #fff;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
animation: rotate_pacman_half_up 0.5s 0s infinite;
position: relative;
left: -30px;
}
.pacman>div:nth-child(2) {
width: 0px;
height: 0px;
border-right: 25px solid transparent !important;
border-top: 25px solid #fff;
border-left: 25px solid #fff;
border-bottom: 25px solid #fff;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
animation: rotate_pacman_half_down 0.5s 0s infinite;
margin-top: -50px;
position: relative;
left: -30px;
}
.pacman>div:nth-child(3),
.pacman>div:nth-child(4),
.pacman>div:nth-child(5),
.pacman>div:nth-child(6) {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
-webkit-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
top: 25px;
left: 70px;
}
@-webkit-keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@-webkit-keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes pacman-balls {
75% {
opacity: 0.7;
}
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
@keyframes pacman-balls {
75% {
opacity: 0.7;
}
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
#preloader-15.loading {
width: 112px;
height: 70px;
*zoom: 1;
}
#preloader-15.loading:before,
#preloader-15.loading:after {
display: table;
content: "";
}
#preloader-15.loading:after {
clear: both;
}
#preloader-15.loading .finger {
float: left;
margin: 0 2px 0 0;
width: 20px;
height: 100%;
}
#preloader-15.loading .finger-1 {
-webkit-animation: finger-1-animation 2s infinite ease-out;
animation: finger-1-animation 2s infinite ease-out;
}
#preloader-15.loading .finger-1 span {
-webkit-animation: finger-1-animation-span 2s infinite ease-out;
animation: finger-1-animation-span 2s infinite ease-out;
}
#preloader-15.loading .finger-1 i {
-webkit-animation: finger-1-animation-i 2s infinite ease-out;
animation: finger-1-animation-i 2s infinite ease-out;
}
#preloader-15.loading .finger-2 {
-webkit-animation: finger-2-animation 2s infinite ease-out;
animation: finger-2-animation 2s infinite ease-out;
}
#preloader-15.loading .finger-2 span {
-webkit-animation: finger-2-animation-span 2s infinite ease-out;
animation: finger-2-animation-span 2s infinite ease-out;
}
#preloader-15.loading .finger-2 i {
-webkit-animation: finger-2-animation-i 2s infinite ease-out;
animation: finger-2-animation-i 2s infinite ease-out;
}
#preloader-15.loading .finger-3 {
-webkit-animation: finger-3-animation 2s infinite ease-out;
animation: finger-3-animation 2s infinite ease-out;
}
#preloader-15.loading .finger-3 span {
-webkit-animation: finger-3-animation-span 2s infinite ease-out;
animation: finger-3-animation-span 2s infinite ease-out;
}
#preloader-15.loading .finger-3 i {
-webkit-animation: finger-3-animation-i 2s infinite ease-out;
animation: finger-3-animation-i 2s infinite ease-out;
}
#preloader-15.loading .finger-4 {
-webkit-animation: finger-4-animation 2s infinite ease-out;
animation: finger-4-animation 2s infinite ease-out;
}
#preloader-15.loading .finger-4 span {
-webkit-animation: finger-4-animation-span 2s infinite ease-out;
animation: finger-4-animation-span 2s infinite ease-out;
}
#preloader-15.loading .finger-4 i {
-webkit-animation: finger-4-animation-i 2s infinite ease-out;
animation: finger-4-animation-i 2s infinite ease-out;
}
#preloader-15.loading .finger-item {
position: relative;
width: 100%;
height: 100%;
-webkit-border-radius: 6px 6px 8px 8px;
-webkit-background-clip: padding-box;
-moz-border-radius: 6px 6px 8px 8px;
-moz-background-clip: padding;
border-radius: 6px 6px 8px 8px;
background-clip: padding-box;
background: #fff;
}
#preloader-15.loading .finger-item span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
padding: 5px 5px 0 5px;
}
#preloader-15.loading .finger-item span:before,
#preloader-15.loading .finger-item span:after {
content: '';
position: relative;
display: block;
margin: 0 0 2px 0;
width: 100%;
height: 2px;
background: #4492f4;
}
#preloader-15.loading .finger-item i {
position: absolute;
left: 3px;
bottom: 3px;
width: 14px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
background: #4492f4;
}
#preloader-15.loading .last-finger {
position: relative;
float: left;
width: 24px;
height: 100%;
overflow: hidden;
}
#preloader-15.loading .last-finger-item {
position: absolute;
right: 0;
top: 32px;
width: 110%;
height: 20px;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
background: #fff;
-webkit-animation: finger-5-animation 2s infinite linear;
animation: finger-5-animation 2s infinite linear;
}
#preloader-15.loading .last-finger-item i {
position: absolute;
left: 0;
top: -8px;
width: 22px;
height: 8px;
background: #fff;
overflow: hidden;
}
#preloader-15.loading .last-finger-item i:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 34px;
height: 20px;
-webkit-border-radius: 0 0 15px 15px;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 0 15px 15px;
-moz-background-clip: padding;
border-radius: 0 0 15px 15px;
background-clip: padding-box;
background: #4492f4;
}
@-webkit-keyframes finger-1-animation {
0% {
padding: 12px 0 5px 0;
}
20% {
padding: 12px 0 5px 0;
}
29% {
padding: 4px 0 24px 0;
}
35% {
padding: 4px 0 24px 0;
}
41% {
padding: 12px 0 5px 0;
}
100% {
padding: 12px 0 5px 0;
}
}
@keyframes finger-1-animation {
0% {
padding: 12px 0 5px 0;
}
20% {
padding: 12px 0 5px 0;
}
29% {
padding: 4px 0 24px 0;
}
35% {
padding: 4px 0 24px 0;
}
41% {
padding: 12px 0 5px 0;
}
100% {
padding: 12px 0 5px 0;
}
}
@-webkit-keyframes finger-1-animation-span {
0% {
top: 0;
}
20% {
top: 0;
}
29% {
top: -7px;
}
35% {
top: -7px;
}
41% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-1-animation-span {
0% {
top: 0;
}
20% {
top: 0;
}
29% {
top: -7px;
}
35% {
top: -7px;
}
41% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-1-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
20% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
29% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
35% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
41% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-1-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
20% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
29% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
35% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
41% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-2-animation {
0% {
padding: 6px 0 2px 0;
}
24% {
padding: 6px 0 2px 0;
}
33% {
padding: 2px 0 16px 0;
}
39% {
padding: 2px 0 16px 0;
}
45% {
padding: 6px 0 2px 0;
}
100% {
padding: 6px 0 2px 0;
}
}
@keyframes finger-2-animation {
0% {
padding: 6px 0 2px 0;
}
24% {
padding: 6px 0 2px 0;
}
33% {
padding: 2px 0 16px 0;
}
39% {
padding: 2px 0 16px 0;
}
45% {
padding: 6px 0 2px 0;
}
100% {
padding: 6px 0 2px 0;
}
}
@-webkit-keyframes finger-2-animation-span {
0% {
top: 0;
}
24% {
top: 0;
}
33% {
top: -7px;
}
39% {
top: -7px;
}
45% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-2-animation-span {
0% {
top: 0;
}
24% {
top: 0;
}
33% {
top: -7px;
}
39% {
top: -7px;
}
45% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-2-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
24% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
33% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
39% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
45% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-2-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
24% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
33% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
39% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
45% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-3-animation {
0% {
padding: 0 0 0 0;
}
28% {
padding: 0 0 0 0;
}
37% {
padding: 0 0 12px 0;
}
43% {
padding: 0 0 12px 0;
}
49% {
padding: 0 0 0 0;
}
100% {
padding: 0 0 0 0;
}
}
@keyframes finger-3-animation {
0% {
padding: 0 0 0 0;
}
28% {
padding: 0 0 0 0;
}
37% {
padding: 0 0 12px 0;
}
43% {
padding: 0 0 12px 0;
}
49% {
padding: 0 0 0 0;
}
100% {
padding: 0 0 0 0;
}
}
@-webkit-keyframes finger-3-animation-span {
0% {
top: 0;
}
28% {
top: 0;
}
37% {
top: -7px;
}
43% {
top: -7px;
}
49% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-3-animation-span {
0% {
top: 0;
}
28% {
top: 0;
}
37% {
top: -7px;
}
43% {
top: -7px;
}
49% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-3-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
28% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
37% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
43% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
49% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-3-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
28% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
37% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
43% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
49% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-4-animation {
0% {
padding: 8px 0 3px 0;
}
32% {
padding: 8px 0 3px 0;
}
41% {
padding: 4px 0 20px 0;
}
47% {
padding: 4px 0 20px 0;
}
53% {
padding: 8px 0 3px 0;
}
100% {
padding: 8px 0 3px 0;
}
}
@keyframes finger-4-animation {
0% {
padding: 8px 0 3px 0;
}
32% {
padding: 8px 0 3px 0;
}
41% {
padding: 4px 0 20px 0;
}
47% {
padding: 4px 0 20px 0;
}
53% {
padding: 8px 0 3px 0;
}
100% {
padding: 8px 0 3px 0;
}
}
@-webkit-keyframes finger-4-animation-span {
0% {
top: 0;
}
32% {
top: 0;
}
41% {
top: -7px;
}
47% {
top: -7px;
}
53% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-4-animation-span {
0% {
top: 0;
}
32% {
top: 0;
}
41% {
top: -7px;
}
47% {
top: -7px;
}
53% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-4-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
32% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
41% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
47% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
53% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-4-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
32% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
41% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
47% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
53% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-5-animation {
0% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
34% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
43% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
50% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
60% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes finger-5-animation {
0% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
34% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
43% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
50% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
60% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}