html {padding:0;margin:0;}
body {font-family:Arial;font-size:20px;padding:0;margin:0;}
#desktop {background:url('circus-cream-no-dots.png') center center no-repeat;width:100%;height:100%;margin:0;padding:0;}
#header {padding-top:0;background:url(strongman-transparent.png) no-repeat;	background-position:bottom center;background-size:contain;height:20%;}
#wrapper {position:relative;width:90%;height:70%;margin:0px auto 0px;background:url(old-wood-texture-resized.jpg) repeat left top;border:4px solid #333;text-align:center;padding:20px 30px 0 0;filter: drop-shadow(10px 10px 4px #444444);}
#content { width:100%;margin:100px 0 40px 40px;}
#instructions { margin: 40px auto;font-family: 'Rye', cursive;}
#instructions h1 {position:absolute;top:2%;left:0;text-indent:-9999px;background:url(test-your-strength-v1.png) no-repeat top center;background-size:contain;height:25%;width:100%;margin:0;padding:0;}
#instructions h2 {display:none;text-align:center;font-size:40px;}
#instructions img {width:40%;margin:-30px 0 0 0;		}
/*	h1 {font-family: 'Rye', cursive; color:#ff0205; font-size:50px;}*/

#passwordoptions {
	width:100%;
	position:absolute;
	top:37%;
	height:62%;
}
#passwordoptions div {
	position:absolute;

	text-align:center;
	background:url(option-bg-long.png) no-repeat center left;
	background-size:70%;
/*		background-width:2%;*/
/*		background:#0ff;*/
	background-position:0px 0px;
	width:60%;
	height:30%;
	vertical-align:middle;
	padding-top:0px;
	padding-left:0px;
	filter: drop-shadow(4px 4px 6px #444444);
/*		left:10%;*/
}
#option1wrapper {
	left:3%;
	top:0%;
}
#option2wrapper {
	left:12%;
	top:33%;
}
#option3wrapper {
	left:21%;
	top:66%;
}	

#passwordoptions .optionnum  {
	text-align:center;
	position:absolute;
	left:3.5%;
	top:10%;
	margin:0;
	padding:0;
	display:block;
    text-align:center;
    font-size:4vw;
	font-family: 'Rye', cursive;
    color:#fff;
}
#passwordoptions .options {
	position:absolute;
	top:27%;
	left:13%;
	width:54%;
	padding:0px;
	margin:0px;
	text-align:center;
	font-size:2vw;
}

#passwordoptions p.correct {color:#1c752d;font-weight:bold;}
#passwordoptions p.incorrect {color:#782a34; text-decoration:line-through;}
#passwordoptions p.optionresults {position:absolute; top: 10%; left: 72%; font-size:2vw;text-align:center;margin:0px;padding:0;color:#000000;}


#complexity {display:none;}
#result {display:none;position:absolute;font-size:2.5rem;z-index:1000;top:5%;left:25%;width:50%;margin:0;font-family: 'Rye', cursive;padding:1rem; border:4px solid;}
#result p {margin:0;padding:0;}
#result.win {background:#7ccc8b;border-color:#0e2b10;color:#144717;}
#result.lose {background:#782a34;border-color:#381519;color:#fff;}
#result.nomatch {background:#fff;border-color:#333;}

#reset {
/*	display:none;*/
	font-size:1.5rem;
	color:#fff;
	margin:0;
	padding:0;

}

#disclaimer {font-size:14px;}
#estimate {margin-top:30px;}
#estimate span {}
#warningmessage {color:#900;}
.char_type {width:200px;display:inline;margin:0 10px 0 0;color:#fff;padding:2px;}
#footer {width:100%;text-align:center;font-size:0.6em;color:#fff;margin:1em 0 1em 0;}
#footer p {padding:1em;background-color:rgba(3,3,3,0.5);display:inline;text-align:center;}
#footer a {color:#fff;}

#passwords {}

#difficulty {text-align:left;display:none;}

#meter {
	position:absolute;
	right:0%;
	bottom:0%;
	width:20%;
	background:url('strength-machine.png') center bottom no-repeat;
/*		background-position-y: 25%;*/
	height:100%;
	max-height:100%;
	background-size:contain;
filter: drop-shadow(4px 4px 6px #444444);
}
#meterresult {position:absolute;height:60%;width:20%;left:40%;bottom:14%;}
#meter0 {background:#F7350B;}
#meter1 {background:#F7A30B;}
#meter2 {background:#F7E80B;}
#meter3 {background:#EAF70B;}
#meter4 {background:#7EF70B;}
#meter #dinger {
	display:block;
	background:url(dinger.png) no-repeat bottom center;
	background-size:100%;
	background-position: center bottom;
	width:100%;
	height:9%;
	position: absolute;
	bottom:1%;
    animation-duration: 3s;
/*	    transition: transform 1.4s cubic-bezier(0.0, 0.5, 0.5, 1.0);*/
/*	    transition: transform 1.4s ease-in-out;*/
/*	    animation-timing-function:cubic-bezier(0,0,0,0);*/
}

@keyframes meter0animate {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(-100%); }
}

@keyframes meter1animate {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(-200%); }
}

@keyframes meter2animate {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(-600%); }
}
@keyframes meter3animate {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(-900%); }
}
@keyframes meter4animate {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(-1100%); }
}




/* For extremely small screen devices (595px and below) */
@media only screen and (max-width: 800px) {


#instructions h1 {}
#passwordoptions {top:35%;}
#passwordoptions div {
	background-size:100%;
	left:0%;
}

#passwordoptions .optionnum {left:6%;}
#passwordoptions .options {font-size:3vw;top:15%;left:20%;width:75%;}

#meter {right:5%;height:70%;bottom:0;}

	#option1wrapper {
		top:0%;
	}
	#option2wrapper {
		top:33%;
	}
	#option3wrapper {
		top:66%;
	}	

#result {top:0%;font-size:5vw;}


#passwordoptions p.optionresults {font-size:4vw;top:55%;left:20%;width:75%;font-weight:bold;}

#meterresult {position:absolute;height:52%;width:20%;left:40%;bottom:13%;}


@keyframes meter4animate {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(-1100%); }
}

	
}