@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('../../content/fonts/eot/IRANSansWeb_Bold.eot');
	src: url('../../content/fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../../content/fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../../content/fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../../content/fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 500;
	src: url('../../content/fonts/eot/IRANSansWeb_Medium.eot');
	src: url('../../content/fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../../content/fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../../content/fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../../content/fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 300;
	src: url('../../content/fonts/eot/IRANSansWeb_Light.eot');
	src: url('../../content/fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../../content/fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../../content/fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../../content/fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 200;
	src: url('../../content/fonts/eot/IRANSansWeb_UltraLight.eot');
	src: url('../../content/fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../../content/fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../../content/fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../../content/fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: normal;
	src: url('../../content/fonts/eot/IRANSansWeb.eot');
	src: url('../../content/fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../../content/fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../../content/fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../../content/fonts/ttf/IRANSansWeb.ttf') format('truetype');
}
html,body,input{
	margin:0;padding:0;
}
html,body{
	width:100%;
	height:100%;
}
body{
	font-family: IRANSans;
	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 #FFCB02;
				border-left:5px solid #FFCB02;
				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:#FFCB02;
				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 #FFCB02;
	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:#FFCB02;
				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%;
				}
		}
	@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
body {
	font-family: IRANSans !important;
	font-weight: 300;
	direction: rtl;
	background-color: #E2E2E2;
	margin: 0;
}
h1, h2, h3, h4, h5, h6,input, textarea {
	font-family: IRANSans !important;
}
h1 {
	font-weight: bold;
}
.wrapper {
	max-width: 900px;
	margin: 0 auto;
}
.ltr {
	direction: ltr;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-small {
	font-size: 0.8em;
}
.text-xsmall {
	font-size: 0.6em;
}
.text-large {
	font-size: 1.2em;
}
.text-xlarge {
	font-size: 1.4em;
}
.text-underline {
	text-decoration:underline;
}
.text-ultralight {
	font-weight: 200;
}
.text-light {
	font-weight: 300;
}
.text-regular {
	font-weight: normal;
}
.text-medium {
	font-weight: 500;
}
.text-bold {
	font-weight: bold;
}
blockquote {
	font-weight: 500;
	padding: 10px;
	border: 1px dashed #666666;
}

.mainbox {
	width: 100%;
	background-color: #EFEFEF;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #FFFF33;
}

.mainboxnegativ {
	width: 100%;
	background-color: #000000;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #FFFF33;
	color: #F9F9F9;
}

.mainbox2 {
	font-size: 1em;
	width: 90%;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.mainbox3 {
	width: 100%;
	background-color: #b8b8b8;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #bd70ff;
}

.mainbox2negativ {
	font-size: 1em;
	color: #F9F9F9;
	background-color: #000000;
	padding-right: 20px;
}

.farsiparagraph {
	font-size: 1em;
	width: 47%;
	float:right;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;

}
.englishparagraph {
	font-size: 1em;
	width: 47%;
	float: left;
	direction:ltr;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;


}
.rightbox {
	width: 60%;
	padding-right: 20px;
	padding-left: 5px;
	float: right;
	margin-left: 10px;
	margin-bottom: 0px;
	min-width: 0px;
	background-color: #F7F7F7;

}

.titelbox {
	width: 60%;
	padding-right: 25px;
	padding-left: 0px;
	float: right;
	margin-left: 10px;
	margin-bottom: 0px;
	min-width: 0px;
	background-color: #F2F2F2;
	color: #4B4B4B;
}


.lefttbox {
	
	padding-right: 20px;
	padding-left: 4px;
	float: right;
	margin-bottom: 10px;
	min-width: 0px;
}

.alphabet {
	width: 35%;
	float: left;
	font-size: 21em;
	text-align: center;
	font-weight: 500;
	color: #999999;
}

.alphabet2 {
	width: 35%;
	float: left;
	direction: ltr;
	font-size: 1.6em;
	text-align: left;
	font-weight: 500;
	color: #333333;
	margin-top: 100px;
}
.footer {
	font-weight: 300;
	font-size: 0.7em;
	text-align: center;
	direction: ltr;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

a, a:visited {
	text-decoration: none;
	color: white;
}

a:hover {
	color: #FFCB02;
}


/* ::: END ------------------ Responsive Layout --------------------------- */