.wrapper {
	position: absolute;  background: #fff; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999;
	padding: 20% 10%;
	box-sizing: border-box;
	text-align: center;
}

.wrapper p a {
	color: #757575;
	text-decoration: none;
}

.wrapper .load-bar {
	width: 100%;
	height: 10px;
	margin: 10px auto;
	border-radius: 20px;
	background-color: #D9D9D9;
	position: relative;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.wrapper .load-bar:hover .load-bar-inner,
.wrapper .load-bar:hover #counter {
	animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

.stop {
	animation-play-state: paused !important;
	-moz-animation-play-state: paused !important;
	-o-animation-play-state: paused !important;
	-webkit-animation-play-state: paused !important;
}

.wrapper .load-bar-inner {
	height: 99%;
	width: 0%;
	border-radius: inherit;
	position: relative;
	background-color: #0096F5;
	animation: loader 2s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-webkit-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
	animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
}

.wrapper #counter {
	position: absolute;

	padding: 5px 10%;
	border-radius: 0.4em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
	left: -25px;
	top: -35px;
	font-size: 12px;
	font-weight: bold;
	width: 44px;
	/* animation: counter 4s linear infinite;
	-moz-animation: counter 4s linear infinite;
	-webkit-animation: counter 4s linear infinite;
	-o-animation: counter 4s linear infinite; */
}

.wrapper #counter:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: #E7E6E3;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	left: 50%;
	margin-left: -4px;
	bottom: -4px;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
	border-radius: 0 0 3px 0;
}

.wrapper h1 {
	font-size: 28px;
	padding: 20px 0 8px 0;
}

.wrapper p {
	font-size: 13px;
}

@keyframes loader {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

@-moz-keyframes loader {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

@-webkit-keyframes loader {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

@-o-keyframes loader {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

@keyframes counter {
	from {
		left: -25px;
	}

	to {
		left: 323px;
	}
}

@-moz-keyframes counter {
	from {
		left: -25px;
	}

	to {
		left: 323px;
	}
}

@-webkit-keyframes counter {
	from {
		left: -25px;
	}

	to {
		left: 323px;
	}
}

@-o-keyframes counter {
	from {
		left: -25px;
	}

	to {
		left: 323px;
	}
}

@keyframes loader {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

.load-bar-inner {
	height: 99%;
	width: 0%;
	border-radius: inherit;
	position: relative;
	background: #c2d7ac;

	animation: loader 10s linear infinite;
}