@import url(http://fonts.googleapis.com/css?family=Raleway:600);

#loader-wrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: #272929; z-index: 99999; }

#loader-wrapper h1 { text-align: center; position: absolute; right: 0; left: 0; top: 30%; text-transform: uppercase; color: #a6cc36; font-family: 'Raleway', sans-serif; margin-bottom: 0; }

.loader {position: absolute; left: 50%; top: 50%; margin: -35px 0px 0px -50px; width: 112px; height: 70px; } 

/*----*****---- << Loader Style >> ----*****----*/
@-webkit-keyframes finger-little-animation { 0% { padding: 12px 0px 5px; } 20% { padding: 12px 0px 5px; } 29% { padding: 4px 0px 24px; } 35% { padding: 4px 0px 24px; } 41% { padding: 12px 0px 5px; }
100% { padding: 12px 0px 5px; } }
@-o-keyframes finger-little-animation { 0% { padding: 12px 0px 5px; } 20% { padding: 12px 0px 5px; } 29% { padding: 4px 0px 24px; } 35% { padding: 4px 0px 24px; } 41% { padding: 12px 0px 5px; }
100% { padding: 12px 0px 5px; } }
@-ms-keyframes finger-little-animation { 0% { padding: 12px 0px 5px; } 20% { padding: 12px 0px 5px; } 29% { padding: 4px 0px 24px; } 35% { padding: 4px 0px 24px; } 41% { padding: 12px 0px 5px; }
100% { padding: 12px 0px 5px; } }
@keyframes finger-little-animation { 0% { padding: 12px 0px 5px; } 20% { padding: 12px 0px 5px; } 29% { padding: 4px 0px 24px; } 35% { padding: 4px 0px 24px; } 41% { padding: 12px 0px 5px; }
100% { padding: 12px 0px 5px; } }

@-webkit-keyframes finger-little-animation-span { 0% { top: 0px; } 20% { top: 0px; } 29% { top: -7px; } 35% { top: -7px; } 41% { top: 0px; } 100% { top: 0px; } }
@-o-keyframes finger-little-animation-span { 0% { top: 0px; } 20% { top: 0px; } 29% { top: -7px; } 35% { top: -7px; } 41% { top: 0px; } 100% { top: 0px; } }
@-ms-keyframes finger-little-animation-span { 0% { top: 0px; } 20% { top: 0px; } 29% { top: -7px; } 35% { top: -7px; } 41% { top: 0px; } 100% { top: 0px; } }
@keyframes finger-little-animation-span { 0% { top: 0px; } 20% { top: 0px; } 29% { top: -7px; } 35% { top: -7px; } 41% { top: 0px; } 100% { top: 0px; } }

@-webkit-keyframes finger-little-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 20% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;background-clip: padding-box; } 29% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 35% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 41% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;    background-clip: padding-box; }	}
@-o-keyframes finger-little-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 20% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;background-clip: padding-box; } 29% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 35% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 41% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;    background-clip: padding-box; }	}
@-ms-keyframes finger-little-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 20% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;background-clip: padding-box; } 29% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 35% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 41% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;    background-clip: padding-box; }	}
@keyframes finger-little-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 20% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } 29% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 35% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 41% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;    background-clip: padding-box; }	}

.loader .finger { float: left; margin: 0px 2px 0px 0px; width: 20px; height: 100%; }
.loader .finger-item { position: relative; width: 100%; height: 100%; border-radius: 6px 6px 8px 8px; background: none repeat scroll 0% 0% #daf66a; }
.loader .finger-item span { position: absolute; left: 0px; top: 0px; width: 100%; height: auto; padding: 5px 5px 0px; }
.loader .finger-item i { position: absolute; left: 3px; bottom: 3px; width: 14px; height: 14px; border-radius: 10px 10px 7px 7px; background: none repeat scroll 0% 0% #000; }

.loader .finger-little {  animation: 2s ease-out 0s normal none infinite running finger-little-animation; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-little-animation;*/ 
/*-ms-animation: 2s ease-out 0s normal none infinite running finger-little-animation; */
-webkit-animation-name: finger-little-animation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-little-animation;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
}
.loader .finger-little span { animation: 2s ease-out 0s normal none infinite running finger-little-animation-span; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-little-animation-span;*/
-ms-animation: 2s ease-out 0s normal none infinite running finger-little-animation-span;
-webkit-animation-name: finger-little-animation-span;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;
 }
.loader .finger-little i { animation: 2s ease-out 0s normal none infinite running finger-little-animation-i; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-little-animation-i;*/
/*-ms-animation: 2s ease-out 0s normal none infinite running finger-little-animation-i;*/
-webkit-animation-name: finger-little-animation-i;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-little-animation-i;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }

.loader .finger-ring { animation: 2s ease-out 0s normal none infinite running finger-ring-animation; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-ring-animation;*/
/*-ms-animation: 2s ease-out 0s normal none infinite running finger-ring-animation;*/
-webkit-animation-name: finger-ring-animation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-ring-animation;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }
.loader .finger-ring span { animation: 2s ease-out 0s normal none infinite running finger-ring-animation-span; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-ring-animation-span;*/ /*-ms-animation: 2s ease-out 0s normal none infinite running finger-ring-animation-span;*/
-webkit-animation-name: finger-ring-animation-span;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-ring-animation-span;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }
.loader .finger-ring i { animation: 2s ease-out 0s normal none infinite running finger-ring-animation-i; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-ring-animation-i;*/
/*-ms-animation: 2s ease-out 0s normal none infinite running finger-ring-animation-i;*/
-webkit-animation-name: finger-ring-animation-i;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-ring-animation-i;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }

.loader .finger-middle { animation: 2s ease-out 0s normal none infinite running finger-middle-animation; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-middle-animation;*/ 
/*-ms-animation: 2s ease-out 0s normal none infinite running finger-middle-animation;*/
-webkit-animation-name: finger-middle-animation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-middle-animation;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }
.loader .finger-middle span { animation: 2s ease-out 0s normal none infinite running finger-middle-animation-span; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-middle-animation-span;*/ /*-ms-animation: 2s ease-out 0s normal none infinite running finger-middle-animation-span;*/
-webkit-animation-name: finger-middle-animation-span;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-middle-animation-span;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }
.loader .finger-middle i { animation: 2s ease-out 0s normal none infinite running finger-middle-animation-i; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-middle-animation-i;*/ /*-ms-animation: 2s ease-out 0s normal none infinite running finger-middle-animation-i;*/
-webkit-animation-name: finger-middle-animation-i;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-middle-animation-i;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }

.loader .finger-index { animation: 2s ease-out 0s normal none infinite running finger-index-animation; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-index-animation;*/ 
/*-ms-animation: 2s ease-out 0s normal none infinite running finger-index-animation;*/
-webkit-animation-name: finger-index-animation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-index-animation;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }
.loader .finger-index span { animation: 2s ease-out 0s normal none infinite running finger-index-animation-span; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-index-animation-span;*/ /*-ms-animation: 2s ease-out 0s normal none infinite running finger-index-animation-span; */
-webkit-animation-name: finger-index-animation-span;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-index-animation-span;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
}
.loader .finger-index i { animation: 2s ease-out 0s normal none infinite running finger-index-animation-i; /*-webkit-animation: 2s ease-out 0s normal none infinite running finger-index-animation-i;*/ 
/*-ms-animation: 2s ease-out 0s normal none infinite running finger-index-animation-i;*/
-webkit-animation-name: finger-index-animation-i;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-index-animation-i;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }

.loader .thumb-finger { position: relative; float: left; width: 24px; height: 100%; overflow: hidden; }
.loader .thumb-finger-item { position: absolute; right: 0px; top: 32px; width: 110%; height: 20px; border-radius: 0px 5px 14px 0px; background: #daf66a; 
animation: 2s linear 0s normal none infinite running finger-5-animation; /*-webkit-animation: 2s linear 0s normal none infinite running finger-5-animation;*/ /*-ms-animation: 2s linear 0s normal none infinite running finger-5-animation;*/
-webkit-animation-name: finger-5-animation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;
-webkit-animation-direction: normal;

-ms-animation-name: finger-5-animation;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;
-ms-animation-fill-mode: none;
-ms-animation-direction: normal;
 }
.loader .thumb-finger-item i { position: absolute; left: 0px; top: -8px; width: 22px; height: 8px; background: none repeat scroll 0% 0% #daf66a; overflow: hidden; }

@-ms-keyframes finger-ring-animation { 0% { padding: 6px 0px 2px; } 24% { padding: 6px 0px 2px; } 33% { padding: 2px 0px 16px; } 39% { padding: 2px 0px 16px; } 45% { padding: 6px 0px 2px; } 
100% { padding: 6px 0px 2px; } }
@-webkit-keyframes finger-ring-animation { 0% { padding: 6px 0px 2px; } 24% { padding: 6px 0px 2px; } 33% { padding: 2px 0px 16px; } 39% { padding: 2px 0px 16px; } 45% { padding: 6px 0px 2px; } 
100% { padding: 6px 0px 2px; } }
@-o-keyframes finger-ring-animation { 0% { padding: 6px 0px 2px; } 24% { padding: 6px 0px 2px; } 33% { padding: 2px 0px 16px; } 39% { padding: 2px 0px 16px; } 45% { padding: 6px 0px 2px; } 
100% { padding: 6px 0px 2px; } }
@keyframes finger-ring-animation { 0% { padding: 6px 0px 2px; } 24% { padding: 6px 0px 2px; } 33% { padding: 2px 0px 16px; } 39% { padding: 2px 0px 16px; } 45% { padding: 6px 0px 2px; } 
100% { padding: 6px 0px 2px; } }

@-webkit-keyframes finger-ring-animation-span { 0% { top: 0px; } 24% { top: 0px; } 33% { top: -7px; } 39% { top: -7px; } 45% { top: 0px; } 100% { top: 0px; } }
@-o-keyframes finger-ring-animation-span { 0% { top: 0px; } 24% { top: 0px; } 33% { top: -7px; } 39% { top: -7px; } 45% { top: 0px; } 100% { top: 0px; } }
@keyframes finger-ring-animation-span { 0% { top: 0px; } 24% { top: 0px; } 33% { top: -7px; } 39% { top: -7px; } 45% { top: 0px; } 100% { top: 0px; } }
@-ms-keyframes finger-ring-animation-span { 0% { top: 0px; } 24% { top: 0px; } 33% { top: -7px; } 39% { top: -7px; } 45% { top: 0px; } 100% { top: 0px; } }


@-webkit-keyframes finger-ring-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 24% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;background-clip: padding-box; } 33% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 39% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 45% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@-o-keyframes finger-ring-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 24% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;background-clip: padding-box; } 33% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 39% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 45% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@keyframes finger-ring-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 24% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } 33% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 39% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 45% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@-ms-keyframes finger-ring-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 24% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } 33% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 39% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 45% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }

@-ms-keyframes finger-middle-animation { 0% { padding: 0px; } 28% { padding: 0px; } 37% { padding: 0px 0px 12px; } 43% { padding: 0px 0px 12px; } 49% { padding: 0px; } 100% { padding: 0px; } }
@-ms-keyframes finger-middle-animation-span { 0% { top: 0px; } 28% { top: 0px; } 37% { top: -7px; } 43% { top: -7px; } 49% { top: 0px; } 100% { top: 0px; } }
@-ms-keyframes finger-middle-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;  background-clip: padding-box; } 28% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;
background-clip: padding-box; } 37% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 43% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 49% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@-webkit-keyframes finger-middle-animation { 0% { padding: 0px; } 28% { padding: 0px; } 37% { padding: 0px 0px 12px; } 43% { padding: 0px 0px 12px; } 49% { padding: 0px; } 100% { padding: 0px; } }
@-webkit-keyframes finger-middle-animation-span { 0% { top: 0px; } 28% { top: 0px; } 37% { top: -7px; } 43% { top: -7px; } 49% { top: 0px; } 100% { top: 0px; } }
@-webkit-keyframes finger-middle-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;  background-clip: padding-box; } 28% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;
background-clip: padding-box; } 37% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 43% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 49% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@-o-keyframes finger-middle-animation { 0% { padding: 0px; } 28% { padding: 0px; } 37% { padding: 0px 0px 12px; } 43% { padding: 0px 0px 12px; } 49% { padding: 0px; } 100% { padding: 0px; } }
@-o-keyframes finger-middle-animation-span { 0% { top: 0px; } 28% { top: 0px; } 37% { top: -7px; } 43% { top: -7px; } 49% { top: 0px; } 100% { top: 0px; } }
@-o-keyframes finger-middle-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;  background-clip: padding-box; } 28% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;
background-clip: padding-box; } 37% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 43% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 49% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@keyframes finger-middle-animation { 0% { padding: 0px; } 28% { padding: 0px; } 37% { padding: 0px 0px 12px; } 43% { padding: 0px 0px 12px; } 49% { padding: 0px; } 100% { padding: 0px; } }
@keyframes finger-middle-animation-span { 0% { top: 0px; } 28% { top: 0px; } 37% { top: -7px; } 43% { top: -7px; } 49% { top: 0px; } 100% { top: 0px; } }
@keyframes finger-middle-animation-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;  background-clip: padding-box; } 28% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;
background-clip: padding-box; } 37% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 43% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; 
background-clip: padding-box; } 49% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }

@-webkit-keyframes finger-index-animation { 0% { padding: 8px 0px 3px; } 32% { padding: 8px 0px 3px; } 41% { padding: 4px 0px 20px; } 47% { padding: 4px 0px 20px; } 53% { padding: 8px 0px 3px; } 
100% { padding: 8px 0px 3px; } }
@-o-keyframes finger-index-animation { 0% { padding: 8px 0px 3px; } 32% { padding: 8px 0px 3px; } 41% { padding: 4px 0px 20px; } 47% { padding: 4px 0px 20px; } 53% { padding: 8px 0px 3px; } 
100% { padding: 8px 0px 3px; } }
@keyframes finger-index-animation { 0% { padding: 8px 0px 3px; } 32% { padding: 8px 0px 3px; } 41% { padding: 4px 0px 20px; } 47% { padding: 4px 0px 20px; } 53% { padding: 8px 0px 3px; } 
100% { padding: 8px 0px 3px; } }
@-ms-keyframes finger-index-animation { 0% { padding: 8px 0px 3px; } 32% { padding: 8px 0px 3px; } 41% { padding: 4px 0px 20px; } 47% { padding: 4px 0px 20px; } 53% { padding: 8px 0px 3px; } 
100% { padding: 8px 0px 3px; } }
@-webkit-keyframes finger-index-animation-span { 0% { top: 0px; } 32% { top: 0px; } 41% { top: -7px; } 47% { top: -7px; } 53% { top: 0px; } 100% { top: 0px; } }
@-o-keyframes finger-index-animation-span { 0% { top: 0px; } 32% { top: 0px; } 41% { top: -7px; } 47% { top: -7px; } 53% { top: 0px; } 100% { top: 0px; } }
@keyframes finger-index-animation-span { 0% { top: 0px; } 32% { top: 0px; } 41% { top: -7px; } 47% { top: -7px; } 53% { top: 0px; } 100% { top: 0px; } }
@-ms-keyframes finger-index-animation-span { 0% { top: 0px; } 32% { top: 0px; } 41% { top: -7px; } 47% { top: -7px; } 53% { top: 0px; } 100% { top: 0px; } }
@-webkit-keyframes finger-index-animation-span-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 32% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 41% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 47% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px;     background-clip: padding-box; } 53% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@-o-keyframes finger-index-animation-span-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 32% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 41% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 47% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px;     background-clip: padding-box; } 53% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@keyframes finger-index-animation-span-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 32% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;
 background-clip: padding-box; } 41% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 47% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px;     background-clip: padding-box; } 53% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }
@-ms-keyframes finger-index-animation-span-i { 0% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 32% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;
 background-clip: padding-box; } 41% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 47% { bottom: 8px; height: 12px; border-radius: 7px 7px 4px 4px;     background-clip: padding-box; } 53% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; border-radius: 10px 10px 7px 7px;     background-clip: padding-box; } }

@-webkit-keyframes finger-5-animation { 0% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 34% { top: 32px; right: 0px; 
border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 43% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); }
50% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); } 60% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; 
background-clip: padding-box; transform: rotate(0deg); } 100% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } }
@-o-keyframes finger-5-animation { 0% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 34% { top: 32px; right: 0px; 
border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 43% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); }
50% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); } 60% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; 
background-clip: padding-box; transform: rotate(0deg); } 100% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } }
@keyframes finger-5-animation { 0% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 34% { top: 32px; right: 0px; 
border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 43% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); }
50% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); } 60% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; 
background-clip: padding-box; transform: rotate(0deg); } 100% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } }
@-ms-keyframes finger-5-animation { 0% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 34% { top: 32px; right: 0px; 
border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } 43% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); }
50% { top: 20px; right: 2px; border-radius: 0px 8px 20px 0px; background-clip: padding-box; transform: rotate(-12deg); } 60% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; 
background-clip: padding-box; transform: rotate(0deg); } 100% { top: 32px; right: 0px; border-radius: 0px 5px 14px 0px; background-clip: padding-box; transform: rotate(0deg); } }

.loader .finger-item span::before, .loader .finger-item span::after { background: #000; content: ""; display: block; height: 2px; margin-bottom: 2px; margin-left: 0; margin-right: 0; margin-top: 0;
position: relative; width: 100%; }
.loader .thumb-finger-item i::after { background: #272929; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 0; border-top-right-radius: 0; bottom: 0; content: "";
height: 20px; left: 0; position: absolute; width: 34px; }



/*----*****---- << Responsive >> ----*****----*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#loader-wrapper h1 { top: 35%; font-size: 24px; }
	
}

@media only screen and (min-width: 320px) and (max-width: 479px) { 

	#loader-wrapper h1 { top: 35%; font-size: 20px; }
	
}

@media only screen and (max-width: 319px) {
	
	#loader-wrapper h1 { top: 35%; font-size: 20px; }
	
}