html,body,input{
	margin:0;padding:0;
}
html,body{
	width:100%;
	height:100%;
}
body{
	font-family: 'Open Sans', Arial, Tahoma;
	font-size:18px;
	background:url(../images/bg.png);
}
a{
	text-decoration:none;
}
.container{
	width:960px;
	margin:0 auto;
}

/* :::::::::::::::::::::::::: Transition ::::::::::::::::::::::::: */
/* add elements that need CSS3 transition here*/

a,
.yes,
.goto,
.no,
.top,
.search-field,#search form{
	-moz-transition:all 0.5s ease 0s;
	-webkit-transition:all 0.5s ease 0s;
	transition:all 0.5s ease 0s;
}

/* ::: END ------------------ Transition --------------------------- */


/* :::::::::::::::::::::::::: Header ::::::::::::::::::::::::: */

#header{
	text-align:center;
	min-height:55%;
	height:55%;
}
#header h1{
	font-size:30px;
	font-family:'Coda', Arial, Tahoma;
	margin-top:30px;
	color:#000;
}
#header p{
	font-size:15px;
}
#header img{
	height:auto;
}
.texts{
	display: inline-block;
	vertical-align: middle;
	height:50%;
	width:100%;
}
.vadjust:before{
	content: '';
	display: inline-block;
	vertical-align: middle;
	height:25%;
}
.vadjust{
	height:50%;
}
			/*::::::::::::::: Search :::::::::::::::::::::::::: */
			#search {
				clear:both;
				position:relative;
				top:-20px;
				height:0;
			}
			#search form{
				margin:0 25%;
				width: 50%;
				text-align:center;
			}
			#search .search-field {
				background: url("../images/icons.png") no-repeat scroll 10px 10px #fff;
				border:0;
				border-right:5px solid #adff00;
				border-left:5px solid #adff00;
				color: #555;
				height: 30px;
				line-height: 30px;
				padding:5px 10%;
				width:50%;
				text-align:center;
				border-radius:25px;
				-moz-border-radius:25px;
				-webkit-border-radius:25px;
			}
			#search .search-field:hover {
				border-color:#adff00;
				background-position:10px -30px; 
				background-color:#fff;
			}
			#search .search-field:focus {
				background-position:10px -30px; 
				color:#000;
				border-color:#33c9cc;
				background-color:rgba(255,255,255,1);
			}
			#submit{
				display:none;
			}
			/* ::: END ------ Search --------------- */

/* ::: END ------------------ Header --------------------------- */

/* :::::::::::::::::::::::::: Content ::::::::::::::::::::::::: */
#content{
	min-height:45%;
	height:45%;
	background:#1b1b1b;
	border-top:5px solid #adff00;
	width:100%;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
		/* :::::::::::::::::: Questions :::::::::::::::::::::::: */
			.valign:before{
				content: '';
				display: inline-block;
				vertical-align: middle;
				height:45%;
			}
			.valign{
				height:50%;
			}
			.question-holder{
				display: inline-block;
				vertical-align: middle;
				color:#fff;
				border-top:0px solid #aaa;
				height:50%;
				width:100%;
				
			}
			.question-title{
				font-family:'Coda', Arial, Tahoma;
				font-size:25px;
				clear:both;
				padding-bottom:25px;
				border-bottom:0px solid #fff;
				text-align:center;
			}
			.questions{
				height:120px;
				overflow:hidden;
				padding:15px 0;
			}
			.question{
				height:120px;
				margin:15px 0; 
			}
			.q{
				width:100%;
				margin-bottom:30px;
				text-align:center;
				clear:both;
			}
			.answerbtn{
				width:300px;
				margin:0 auto;
			}
			.yes,
			.no,
			.top{
				width:100px;
				padding:5px 20px;
				margin:10px 5px;
				cursor:pointer;
				float:left;
				text-align:center;
			}
			.goto{
				padding:5px 20px;
				margin:10px 5px;
				cursor:pointer;
				text-align:center;
				float:none;
			}
			.top{
				float:none;
				margin:0 auto !important;
			}
			.no,
			.top,
			.yes,
			.goto{
				color:#000;
				background:#adff00;
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				-o-border-radius:5px;
			}
			.yes:hover,
			.goto:hover,
			.no:hover,
			.top:hover{
				background:#33c9cc;
				color:#fff;
			}
			.goto,.top{
				cursor:auto;
			}
			.back,.top{
				cursor:pointer;
			}
			#target a,
			#target a:visited{
				color:#000;
			}
			#target a:hover{
				color:#fff;
			}
			

			/* ::: END ------------------ Questions ------------- */
/* ::: END ------------------ Content --------------------------- */


/* :::::::::::::::::::::::::: Responsive layout ::::::::::::::::::::::::: */
	
	
	/* :::::::::::::::::::::::::: Smaller than standard 960 (devices and browsers) */
		
		@media only screen and (max-width: 959px) {
			.container{
				width:700px;
			}
		}
	
	/* :::::::::::::::::::::::::: Tablet Portrait size to standard 960 (devices and browsers) / 1. Step */
	
		@media only screen and (min-width: 768px) and (max-width: 959px) {
			.container{
					width:750px;
				}
		}
	

	/* :::::::::::::::::::::::::: All Mobile Sizes (devices and browser) / all under Tablet */

		@media only screen and (max-width: 767px) {
			#header img{
				width:150px;
			}
			#search form{
				margin:0 5%;
				width: 90%;
			}	
		}
	
	/* :::::::::::::::::::::::::: Mobile Portrait Size to Mobile Landscape Size (devices and browsers) 3. Step */
	
		@media only screen and (max-width: 479px) {
			#header img{
				width:150px;
			}
			#header h1{
				font-size:20px;
			}
			#header p{
				font-size:13px;
			}
			#content{
				height:50%;
			}
			#search form{
				margin:0 5%;
				width: 90%;
			}
			.q{
				font-size:13px;
			}
			.container{
					width:300px;
			}
			.question-title{
				font-size:18px;
			}
		}
	/* :::::::::::::::::::::::::: Mobile Landscape Size to Tablet Portrait (devices and browsers) 2. Step */
		@media only screen and (max-height: 480px) {
				#header{
					min-height:100%;
					height:100%;
				}
				#content{
					height:100%;
				}
				.container{
					width:460px;
				}
				.question-title{
					font-size:22px;
				}
		}
	
		
	/* :::::::::::::::::::::::::: For devies that have height < 600px */
	
		@media only screen and (min-height: 700px) {
			.vadjust:before{
				height:50%;
				}
		}
	
/* ::: END ------------------ Responsive Layout --------------------------- */