/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body
{
    font-size: 16px;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
    background: url("../img/bg.jpg") top center repeat;
}

.wrapper
{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
}

.main-container .wrapper
{
	height: 41.66vw;
	max-height: 600px;
}

.header-container
{
    border-bottom: 2px solid #ffc100;
    background: #353432;
    height: 144px;
    position: relative;
}

.logo
{
	background: url("../img/logo.png") center center no-repeat;	
	background-size: 100% 100%;
	display: inline-block;
}

.header-container .logo
{
	width: 282px;
	height: 111px;
	max-width: 30%;
	position: absolute;
	top: 16px;
	left: 100px;
}

.header-container .title 
{
	color: #a8acaf;
	font-size: 37px;
	line-height: 1;
	font-weight: 800;
	text-transform: uppercase;
	max-width: 70%;
	display: inline-block;
	position: absolute;
	right: 100px;
	top: 28px;
	margin: 0;
	
}

.header-container .title b
{
	color: #ecf0fb;
	font-size: 48px;
	letter-spacing: 1px;
}

.main-container
{
	width: 100%;
	height: 41.66vw;
	max-height: 600px;
	background: url("../img/main_bg-01.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
	
}

#girl
{
	height: 41.66vw;
	max-height: 600px;
	background: url("../img/girl-01.gif") top center no-repeat;
	background-size: 100%;
	width: 485px;
	max-width: 40vw;
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	
}

#questions
{
	width: 1000px;
	max-width: 50vw;
	height: 41.66vw;
	max-height: 600px;
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 0;
}


#questions h2.qtitle
{
	color: #000;
	font-size: 30px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
	padding-top: 2vw;
	margin: 0;
	line-height: 1;
}

#questions h2.qtitle b
{
	font-size: 37px;
	font-weight: 800;
}

#questions h3.qtext
{
	color: #000;
	font-size: 36px;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;	
	text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
	padding-top: 4vw;
	
	margin: 0;
	line-height: 1;
}

#questions a.qbtn
{
	width: 140px;
	height: 72px;
	line-height: 72px;
	text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
	
	display: inline-block;
	
	text-align: right;
	
	color: #000;
	font-size: 36px;
	font-weight: 800;
	text-transform: uppercase;
	text-align: right;	
	text-decoration: none;
	text-shadow: 3px 3px 2px rgba(255, 255, 255, 1);
	
	margin-top: 5vh;
	outline: 0;

	cursor: pointer;
}

#questions a.qyes
{
	background: url("../img/btn_yes.png") top left no-repeat;
	margin-left: 12vw;	
}

#questions a.qno
{
	background: url("../img/btn_no.png") top left no-repeat;
	margin-left: 10vw;
	
}

#questions a.qclose
{
	background: url("../img/btn_no.png") top left no-repeat;
	margin: 0px auto;
	width: 195px;
	display: block;
	margin-top: 5vh;
	
	
}

#questions #notpass .qtext{ color: #f00;}

/*
#questions a.qbtn:hover 
{
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
	position: relative;
	top: 2px;
	left: 2px;
}
*/

#questions #userId,
#questions #question02,
#questions #question03,
#questions #question04,
#questions #question05,
#questions #question06,
#questions #notpass,
#questions #passed,
#questions #reviewing,
#questions #approved
{
	display: none;
}


#questions .progressbar
{
	 display: none;
    height: 45px;
    position: relative;
    background: #555 none repeat scroll 0% 0%;
    border-radius: 12px;
    padding: 2px;
    box-shadow: 0px -1px 1px rgba(255, 255, 255, 0.3) inset;
    max-width: 90%;
    margin-left: 5%;
    margin-top: 10vh;
}

#questions .progressbar > span 
{
    line-height: 41px;
    color: #000;
    display: block;
    text-align: center;
    height: 100%;
    width: 1%;
    border-radius: 12px;
    background-color: #2BC253;
    background-image: -moz-linear-gradient(center bottom , #2BC253 37%, #54F054 69%);
    position: relative;
    overflow: hidden;
}

#questions #passedId,
#questions #approvalId { color: #0097D5; }

#questions #approved .qtext
{
	text-transform: none;
}


#approved .sitelink
{
	outline: 0px none;
	display: block;
	margin-top: 5vh;
	text-align: center;
	
	color: #0097D5;
	font-size: 36px;
	font-weight: 800;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px #fff;
	line-height: 1;
}

#approved .sitelink:hover
{
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.4);

}


.loadingimg{ margin: 0 auto; text-align: center; display: block; margin-top: 25px;}














.footer-container
{
    border-top: 22px solid #ffc100;
    height: 110px;
    position: relative;
}

.footer-container .logo
{
	width: 191px;
	height: 75px;
	display: inline-block;
	max-width: 15%;
	position: absolute;
	left: 100px;
	top: 17px;
}

.footer-container p
{
	display: inline-block;
	max-width: 80%;
	width: 68%;
	padding-left: 5%;
	color: #FFF;
	position: absolute;
	right: 100px;
	top: 5px;
	text-align: center;
	font-size: 14px;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 1284px) and (orientation: landscape)
{
	.header-container .logo	{ left: 50px;}
	.header-container .title {	right: 50px;	}
	.footer-container .logo	{ left: 50px; }
   .footer-container p { right: 50px; }
}

@media only screen and (max-width: 1024px) and (orientation: landscape)
{
	.header-container .logo	{ left: 0px;}
	.footer-container .logo	{ left: 0px; }
   .footer-container p { right: 0px; }
   
   .header-container .title 
   {
    font-size: 28px;
    max-width: 65%;
    right: 0px;
    top: 36px;
	}
	
	.header-container .title  b
   {
    font-size: 36px;
	}
	
	#questions h3.qtext { font-size: 28px;	}
	#questions h2.qtitle { font-size: 25px; }
	#questions h2.qtitle b { font-size: 30px;	}
	
	#questions a.qyes { margin-left: 5vw; }
	.footer-container p { width: 80%; padding-left: 1%; font-size: 13px; }
	.footer-container .logo { max-width: 25%; width: 171px; height: 67px;}
}



@media only screen and (max-width: 767px) and (orientation: portrait) 
{
	.header-container 
	{
    height: auto;
    position: relative;
	}

	.wrapper 
	{
    width: 96vw;
    max-width: 1500px;
    margin: 0px auto;
    position: relative;
	}
	
	.main-container .wrapper 
	{
    height: auto;
    max-height: 1000px;
	}
	
	.main-container 
	{
    width: 100%;
    height: auto;
    max-height: 2000px;
    background: transparent url("../img/main_bg-01.jpg") no-repeat scroll center center / cover;
    position: relative;
    padding-bottom: 4vh;
    min-height: 40vh;
	}
	
	.header-container .logo
	{
    width: 50vw;
    height: 19.68vw;
    max-width: 50vw;
    position: relative;
    top: 16px;
    left: auto;
    display: block;
    margin: 0 auto;
	}
	
	.header-container .title 
	{
    font-size: 16px;
	 max-width: 96vw;
    display: block;
    position: relative;
    right: auto;
    top: auto;
    margin: 15px auto;
    text-align: center;
	}
	
	.header-container .title b 
	{
    font-size: 21px;
    letter-spacing: 0;
	}
	
	#girl { display: none;}
	
	#questions 
	{
    display: block;
    right: auto;
    bottom: auto;
    width: 96vw;
    max-width: 96vw;
    height: auto;
    position: relative;
	}

	#questions a.qbtn 
	{
    display: block;
	 height: 48px;
	 line-height: 48px;
	 background-size: 48px !important;
	 font-size: 28px;
	 width: 100px;
	 
	}

	#questions a.qyes,
	#questions a.qno
	{
    margin: 1vh auto 0 auto;
	}
	
	#questions a.qclose { width: 140px; margin: 2vh auto 0px; }
	
	#questions h2.qtitle b 
	{
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 2vh;
	}
	
	#questions h2.qtitle	{ font-size: 19px; }
   #questions h3.qtext { font-size: 20px; }

	#questions h3.qtext img { width: 125px; }
	#approved .sitelink 
	{
    margin-top: 4vh;
    font-size: 22px;
   }
   
   


	
	.footer-container .logo { display: none;}
	
	.footer-container	{ height: auto; }
	
	.footer-container p 
	{
    display: inline-block;
    max-width: 98vw;
    width: 98vw;
    padding-left: 0;
    color: #FFF;
    position: absolute;
    right: auto;
    top: auto;
    text-align: center;
    font-size: 13px;
    line-height: 1;
	}
	
}

@media only screen and (max-width: 999px) and (orientation: landscape)
{
	.wrapper	{ width: 96vw;	}

	.main-container .wrapper 
	{
    max-height: 1600px;
    height: auto;
    min-height: 40vw;
	}
	
	.main-container 
	{
    width: 100%;
    max-height: 1600px;
    position: relative;
    height: auto;
	}

	.header-container	{ height: 104px;}
	.header-container .logo
	{
    width: 30vw;
    height: 11.8vw;
    max-width: 50vw;
	}
	
	.header-container .title 
   {
    font-size: 20px;
    max-width: 65%;
    right: 0px;
    top: 30px;
	}
	
	.header-container .title b	{ font-size: 25px; }
	
	#girl 
	{
    height: 35vw;
    max-height: 600px;
    width: 30vw;
    max-width: 30vw;
    display: inline-block;
    position: absolute;
    left: 0px;
    bottom: 0px;
	}
	
	#questions 
	{
    width: 68vw;
    max-width: 68vw;
    height: auto;
    max-height: 1600px;
    display: inline-block;
    position: relative;
    padding-left:29vw;
    
	}

	#questions h2.qtitle b 
	{
    font-size: 20px;
    letter-spacing: -1px;
	}
	
	#questions h2.qtitle 
	{
    font-size: 18px;
	}
	
	#questions h3.qtext 
	{
    font-size: 19px;
	}
	
	#questions a.qbtn 
	{
	 height: 48px;
	 line-height: 48px;
	 background-size: 48px !important;
	 font-size: 28px;
	 width: 100px;
	 margin-bottom: 2vh;
	 
	}
	
	#questions h3.qtext img { width: 125px; }
	
	#approved .sitelink 
	{
    margin-top: 4vh;
    font-size: 22px;
   }
   
   #questions a.qclose {width: 140px;}
	
	
	
	
	.footer-container .logo { display: none;}
	
	.footer-container	{ height: auto; }
	
	.footer-container p 
	{
    display: inline-block;
    max-width: 96vw;
    width: 96vw;
    padding-left: 0;
    color: #FFF;
    position: absolute;
    right: auto;
    top: auto;
    text-align: center;
    font-size: 13px;
    line-height: 1;
	}
	
}	

@media only screen and (max-width: 767px) and (orientation: landscape) 
{
	
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}