/* CSS Document */

#wrapper{
width:100%;
height: 100vh;
-webkit-animation: fadein 1s linear 0s forwards;
}

.pace-running #wrapper {
    display: none;
}
.pace-running .load_logo{
    background-image: url(../image/load_logo.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size:16%;
	width:100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	opacity:1;
	visibility: visible;
	-webkit-animation: fadein 1s linear 0s forwards;
	transition: opacity 1s, visibility 1s;
}

@-webkit-keyframes fadein {
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.pace-done .load_logo{
    background-image: url(../image/load_logo.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size:16%;
	width:100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	-webkit-animation: fadeout 1s linear 0s forwards;
	visibility: hidden;
	transition: opacity 1s, visibility 1s;
}

@-webkit-keyframes fadeout {
	0% {
		opacity :1;
	}
	95%{
	}
	100% {
		opacity:0;
	}
}

.pace-running{

}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-progress {
  background-color: rgba(169,23,33,1);
  position: fixed;
  z-index: 200;
  top: 0;
  right:100%;
  bottom: 0;
  width: 100%;
}

.pace-inactive .pace-progress {
  background-color: rgba(169,23,33,1);
  position: fixed;
  z-index: 200;
  top: 0;
  right:100%;
  bottom: 0;
  animation-name: anime1;
  animation-delay: 0s;
  animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-fill-mode:forwards;
}





/* CSS animation */
@keyframes anime1{
  0% { width:100%; }
  100% {width:0%;
  		right:0;}
}



@-webkit-keyframes pace-spinner {
  0% { right:0; }
  100% { right: 100%; }
}
@-moz-keyframes pace-spinner {
  0% { right:0; }
  100% { right: 100%; }
}
@-o-keyframes pace-spinner {
  0% { right:0; }
  100% { right: 100%; }
}
@-ms-keyframes pace-spinner {
  0% { right:0; }
  100% { right: 100%; }
}
@keyframes pace-spinner {
  0% { right:0; }
  50% { right: 100%; }
  100%{ right:0; }
}