body, html {
		width: 100%;
		height: 100%;
		margin: 0;
		font-family: Gill Sans, sans-serif;
		}
		#wrapper {
		width: 90%;
		height: auto;
		margin: 0 auto;
		}
		h3 {
		color: #000000;
		font-weight: 600;
		font-size: 5vw;
		margin: 0 auto;
		margin-top: 30px;
		text-align: center;
		width: 80%;
		}
		.loading:after {
		content: ' .';
		animation: dots 1s steps(5, end) infinite;
		}
		@keyframes dots {
		0%, 20% {
		color: rgba(0,0,0,0);
		text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
		}
		40% {
		color: #006400;
		text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
		}
		60% {
		text-shadow: .25em 0 0 #000000, .5em 0 0 rgba(0,0,0,0);
		}
		80%, 100% {
		text-shadow: .25em 0 0 #000000, .5em 0 0 #000000;
		}
		}
		#myProgress {
		width: 100%;
		height: 40px;
		/* background-color: #CEE1F2; */
		border-radius: 5vw;
		margin: 0 auto;
		background: repeating-linear-gradient( -55deg, #555, #555 10px, #444 10px, #444 20px );
		background-size: 200% 200%;
		animation: barberpole 10s linear infinite;
		}
		@keyframes barberpole {
		100% {
		background-position: 50% 50%;
		}
		}
		#myBar {
		border-radius: 5vw;
		height: 40px;
		background-color: #006400;
		text-align: center;
		line-height: 40px;
		color: white;
		font-size: 4vw;
		background: repeating-linear-gradient( -55deg, #4169E1, #4169E1 10px, #4169E1 10px, #4169E1 20px );
		background-size: 200% 200%;
		animation: barberpole 10s linear infinite;
		;
		}
		p {
		line-height: 1.4;
		margin: 0;
		font-size: 4vw;
		color: #000000;
		}
		.container {
		padding: 10px;
		}
		#instruction {
		width: 95%;
		margin: 0 auto;
		}
		#btnOK {
		width: 40%;
		font-size: 4vw;
		/* background-color: #1B507F; */
		color: #fff;
		margin: 20px auto;
		margin-bottom: 0;
		text-align: center;
		padding: 10px;
		border-radius: 5vw;
		border-top: 1px solid #006400;
		background: #006400;
		background: -webkit-gradient(linear, left top, left bottom, from(#4169E1), to(#4169E1));
		background: -webkit-linear-gradient(top, #4169E1, #4169E1);
		background: -moz-linear-gradient(top, #4169E1, #4169E1);
		background: -ms-linear-gradient(top, #4169E1, #4169E1);
		background: -o-linear-gradient(top, #4169E1, #4169E1);
		-webkit-border-radius: 5vw;
		-moz-border-radius: 5vw;
		-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
		-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
		box-shadow: rgba(0,0,0,1) 0 1px 0;
		text-shadow: rgba(0,0,0,.4) 0 1px 0;
		}
		#btnOK:hover {
		background: #4169E1;
		background: -webkit-gradient(linear, left bottom, left top, from(#4169E1), to(#4169E1));
		background: -webkit-linear-gradient(bottom, #4169E1, #4169E1);
		background: -moz-linear-gradient(bottom, #4169E1, #4169E1);
		background: -ms-linear-gradient(bottom, #4169E1, #4169E1);
		background: -o-linear-gradient(bottom, #4169E1, #4169E1);
		color: #ffffff;
		}
		#btnOK:active {
		border-top-color: #4169E1;
		background: #4169E1;
		}
		#countdown {
		margin: 0 auto;
		width: 40%;
		display: block;
		padding: 10px 10px;
		text-align: center;
		font-size: 4vw;
		color: #000000;
		line-height: 3;
		}
		@media only screen and (min-width: 800px) {
		#wrapper {
		width: 50%;
		}
		.loading {
		font-size: 3vw;
		}
		#myProgress {
		height: 30px;
		}
		#myBar {
		height: 30px;
		font-size: 1.5vw;
		line-height: 30px;
		}
		p {
		font-size: 1.5vw;
		}
		#btnOK {
		font-size: 1.5vw;
		}
		#countdown {
		font-size: 1.5vw;
		}
		}
		@media only screen and (min-width: 1400px) {
		#wrapper {
		width: 30%;
		}
		.loading {
		font-size: 2vw;
		}
		#myProgress {
		height: 30px;
		}
		#myBar {
		height: 30px;
		font-size: 1vw;
		line-height: 30px;
		}
		p {
		font-size: 1vw;
		}
		#btnOK {
		font-size: 1vw;
		}
		#countdown {
		font-size: 1vw;
		}
		}
		@media only screen and (max-width: 460px) {
		#instruction {
		width: 100%;
		}
		#myBar {
		height: 25px;
		line-height: 20px;
		}
		#myProgress {
		height: 25px;
		}
		}
		a {
		text-decoration: none;
		}