/*-----------------------------------------------------------------------------------
	theme name: 404 eror theme series 6 (Broken page)
	designer name: کلکسیون طراحی
	designer web: http://wp-qaleb.ir
-------------------------------------------------------------------------------------*/
@font-face {font-family:'BBCNassim';src:url('../fonts/BBCNassim.eot?#') format('eot'),  /* IE6–8 */url('../fonts/BBCNassim.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/url('../fonts/BBCNassim.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */}

html,body,input{
	margin:0;padding:0;
}
html,body{
	width:100%;
	height:100%;
}
body{
	font-family: 'BBCNassim', Arial, Tahoma;
	font-size:18px;
	background:url(../images/pattern.png);
}


/* :::::::::::::::::::::::::: 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:'BBCNassim', Arial, Tahoma;
	margin-top:30px;
	color:#000;
}

.texts{
	display: inline-block;
	vertical-align: middle;
	height:50%;
	width:100%;
}
.vadjust:before{
	content: '';
	display: inline-block;
	vertical-align: middle;
	height:25%;
}
.vadjust{
	height:30;
}

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

/* :::::::::::::::::::::::::: Content ::::::::::::::::::::::::: */
#content{
	min-height:45%;
	height:50%;
	background:#1b1b1b;
	border-top:5px solid #266a9b;
	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:10%;
			}
			.question-holder{
				display: inline-block;
				vertical-align: middle;
				color:#fff;
				border-top:0px solid #aaa;
				height:50%;
				width:100%;
				
			}
			.question-title{
				font-family:'BBCNassim', 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:#266a9b;
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				-o-border-radius:5px;
			}
			.yes:hover,
			.goto:hover,
			.no:hover,
			.top:hover{
				background:#939393;
				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 ::::::::::::::::::::::::: */
	


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

		@media only screen and (max-width: 767px) {
			#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 h1{
				font-size:20px;
			}
			#header p{
				font-size:13px;
			}
			#content{
				height:50%;
			}
			#search form{
				margin:0 5%;
				width: 90%;
			}
			.q{
				font-size:13px;
			}

			.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%;
				}

				.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 --------------------------- */