﻿.loading{
	position:absolute;
	width:100%;
	height: 100%;
	display:table;
    z-index:999999;
}

.loader-box{
  width:200px;
  height:200px;
  margin:auto;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  background-color: rgba(255,255,255,0.7);
  margin-top:100px;
  text-align:center;
      display: table-cell;
    vertical-align: middle;
}

.lable{
  font-size:20px;
}

.loader{
  width:140px;
  height:140px;
  background-color:#FFFFFF;
  overflow:hidden;
  display:block;
  -moz-border-radius:100%;
  -webkit-border-radius:100%;
  border-radius:100%;
  border:5px solid #3db4e5;
  position:relative;
  margin:15px auto;
  z-index:1;
}

.loader2{
border:0;
}

.element-animation{
  animation:animationFrames linear 5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames linear 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames linear 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames linear 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames linear 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}


@keyframes animationFrames{
  0% {
    transform: translate(-777px,15px)  ;
  }
  100% {
    transform: translate(-7px,15px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    transform: translate(-777px,15px)  ;
  }
  100% {
    transform: translate(-7px,15px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    transform: translate(-777px,15px)  ;
  }
  100% {
    transform: translate(-7px,15px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    transform: translate(-777px,15px)  ;
  }
  100% {
    transform: translate(-7px,15px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    transform: translate(-777px,15px)  ;
  }
  100% {
    transform: translate(-7px,15px)  ;
  }
}

/**/

	.cp-round:before {
	    border-radius: 50%;
	    content: " ";
	    width: 140px;
	    height: 140px;
	    display: inline-block;
	    box-sizing: border-box;
	    border-top: solid 5px #3db4e5;
	    border-right: solid 5px #3db4e5;
	    border-bottom: solid 5px #3db4e5;
	    border-left: solid 5px #3db4e5;
	    position: absolute;
	    top: 0;
	    left: 0;
	}

	.cp-spinner {
	    width: 140px;
	    height: 140px;
	    display: inline-block;
	    box-sizing: border-box;
	    position: relative;
	}

	.cp-round:after {
	    border-radius: 50%;
	    content: " ";
	    width: 140px;
	    height: 140px;
	    display: inline-block;
	    box-sizing: border-box;
	    border-top: solid 5px #222222;
	    border-right: solid 5px transparent;
	    border-bottom: solid 5px transparent;
	    border-left: solid 5px transparent;
	    position: absolute;
	    top: 0;
	    left: 0;
	    animation: cp-round-animate 1s ease-in-out infinite;
	}

	@keyframes cp-round-animate{
		0%{
			transform:rotate(0)
		}

		100%{
			transform:rotate(360deg)
		}
	}