/*--------------------------------------loading spiner animation -------------------------------*/

#page-loader {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: fixed;
    top: 0;
    bottom: 0%;
    left: 0;
    right: 0%;
    z-index: 10;
    display: none;
    text-align: center;
    width: 100%;
    padding-top: 120px;
}
.loader {
    position: absolute;
    top: 50%;margin:- 32px 0px 0px -32px;
    left:50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}
.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
-webkit-animation-name:rotate-one ;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: running ;
    border-bottom: 4px solid #fff;
}
.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
-webkit-animation-name:rotate-two ;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: running ;

    border-right: 4px solid #fff;
}
.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
-webkit-animation-name:rotate-three;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: running ;
    border-top: 4px solid #fff;
}
@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-one {
    from   {
 		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    to {
 		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-two {
     from   {
 		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    to  {
 
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-three {
     from   {
 		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    to  {
 		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
/*****************************************End Animation--------------------------*/