@font-face {
	font-family: 'afshari';
	src: url('../fonts/BYekan+.eot');
	src: local('BYekan+'), url('../fonts/BYekan+.woff') format('woff'), url('../fonts/BYekan+.ttf') format('truetype'), url('../fonts/BYekan+.svg') format('svg');
}
* {
	font-family: afshari;
	word-wrap: break-word;
}
/*************header***********/

.h_iframe-aparat_embed_frame {
	position: relative;
}
.h_iframe-aparat_embed_frame .ratio {
	display: block;
	width: 100%;
	height: auto;
}
.h_iframe-aparat_embed_frame iframe {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 500px;
    min-height: 280px;
}
#ap_box_918128{
	height: 100% !important;
}
html{
	height: 100%;
}
body{
	background-color: #f0f6fa;
	overflow: hidden;
	height: 100%;
}
.app{
    width: 224px;
    height: 110px;
    position: absolute;
    left: 10px;
    top: 10px;
}
.app .imgapp{
	float: left;
	margin: 5px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
}
.app .imgapp label{
	position:absolute;
	left:0;
	bottom: -100%;
	transition: all .5s;
	text-align:center;
	background-color: #E2E6E7;
	color: #727272;
	width: 100%;
	margin: 0;
}
.app .imgapp:hover label{
	bottom: 0;	
}
.loading{
	width: 100%;
	height: 100%;
	background-color: #727272;
    position: absolute;
    z-index: 9999;
    opacity: 1;
    transition: all 3s;
}

.loading .tt{
	width: 100%;
	height: 64px;
    background: url('../images/loading.png') no-repeat;
    background-position: center center;
    background-size: auto 100%;
    position: absolute;
    bottom: 20%;
    left: 0;
    opacity: 0;
}
.loading .ee{
	position: absolute;
    left: 30%;
    bottom: -50px;
    color: #fff;
    font-size: 20px;
    opacity: 0;
}
.loading .xx{
	position: absolute;
    bottom: 5%;
    left:0;
	width: 100%;
	direction: ltr;
	text-align: left;
}
.loading .xx hr{
	position: absolute;
	left:0;
	color: #1BCDD4;
	border: none;
    height: 5px;
    background-color: #1BCDD4;
    width: 0%;
}
.p{
 	overflow: hidden;	
	
}
.p1{
	width: 100%;
	height: 100%;
	background-color:#000;
	background-image:url('../images/main.jpg');
	background-size:auto 100%;
	background-position:top right;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
}
.p3{
	width: 100%;
	height: 100%;
	background-color:#a09b9b;
	background-image:url('../images/tarane.jpg');
	background-size:auto 100%;
	background-position:top right;
	background-repeat: no-repeat;
	position: absolute;
	top:100%;
}
.p2{
	width: 100%;
	height: 100%;
	background-color:#1a1a1a;
	background-image:url('../images/bio.jpg');
	background-size:auto 100%;
	background-position:top left;
	background-repeat: no-repeat;
	position: absolute;
	top:100%;
}
.p4{
	width: 100%;
	height: 100%;
	background-color:#1b1a2a;
	background-image:url('../images/back-BOOK.jpg');
	background-size:100% 100%;
	background-position:bottom left;
	background-repeat: no-repeat;
	position: absolute;
	top:100%;
}
.p4 .imgBook{
	width: 100%;
	height: 100%;
	background-image:url('../images/LEFT-BOOKImg.png');
	background-size:auto 100%;
	background-position:top left;
	background-repeat: no-repeat;
}
.p5{
	width: 100%;
	height: 100%;
	background-color:#f5f5f5;
	background-image:url('../images/videoha.jpg');
	background-size:100% 100%;
	background-position:top left;
	background-repeat: no-repeat;
	position: absolute;
	top:100%;
}
.p5 .imgPic{
	width: 100%;
	height: 100%;
	background-image:url('../images/videohaImg.png');
	background-size:auto 120%;
	background-position:top left;
	background-repeat: no-repeat;
}
.p6{
	width: 100%;
	height: 100%;
	background-color:#c6ac99;
	background-image:url('../images/deklameha.jpg');
	background-size:auto 100%;
	background-position:top right;
	background-repeat: no-repeat;
	position: absolute;
	top:100%;
}
.p7{
	width: 100%;
	height: 100%;
	background-color:#111111;
	background-image:url('../images/ashaar-back.jpg');
	background-size:100% 100%;
	background-position:top left;
	background-repeat: no-repeat;
	position: absolute;
	top:100%;
}
.p7 .imgAsh{
	width: 100%;
	height: 100%;
	background-image:url('../images/ashaar-afsharii.png');
	background-size:auto 120%;
	background-position:top left;
	background-repeat: no-repeat;
}
.p8{
	width: 100%;
	height: 100%;
	background-color:#060607;
	background-image:url('../images/tasavir-back.jpg');
	background-size:100% 100%;
	background-position:top right;
	background-repeat: no-repeat;
	position: absolute;
	top:100%;
}
.p8 .imgT{
	width: 100%;
	height: 100%;
	background-image:url('../images/tasavir-afshari.png');
	background-size:auto 120%;
	background-position:top right;
	background-repeat: no-repeat;
}
/*menu*/
.ulModel{
	position: fixed;
	bottom: 10%;
	right: 21%;
	z-index: 9999;
	min-width: 475px;
	transition: height .7s;
}
.ulModel .small-menu{
	/*height: 40px;*/
	border-bottom: 1px solid #999999;
	text-align:center;
	border-radius: 10px 10px 0 0;
	font-size:18px;
	font-weight:bold;
	color:rgba(0, 0, 0, 0.46);
	padding-top:8px;
	margin:0 1%;
	cursor:pointer;
	display: none;
}
.ulModel .liModel{
	margin-left:20px;
	font-size: 20px;
	display: inline-block;
	position: relative;
}
.ulModel .liModel .midU{
	width: 100%;
	height: 1px;
	position: absolute;
	right: -50%;
	background-color: #bcbdc8;
	opacity:0;
	transition: all .5s;
}
.ulModel .liModel .midD{
	position: absolute;
	left: -50%;
	width: 100%;
	height: 1px;
	background-color: #bcbdc8;
	opacity:0;
	transition: all .5s;
}
.ulModel .liModel:hover .midU{

	opacity:1;
	right: 0%;
	
}
.ulModel .liModel:hover .midD{

	opacity:1;
	left: 0%;
	
}
.ulModel .liModel  a{
	color: #bcbdc8;	
	cursor: pointer;
	text-decoration: none;
}
.logoMain{
	position: fixed;
	bottom: 25%;
	right: 40%;
	z-index: 9;
	 
	
}
.p2 .bio{
	position: relative;
    width: 60%;
    height: 100%;
}
.p2 .bio .titleBio{
    position: relative;
    right: -20%;
    margin-top: 5%;
    opacity: 0;
}
.p2 .bio .titleBio img{
	width: 200px;
	opacity: 1;
}
.p2 .bio .txtBio{
    width: 70%;
    height: 50%;
    padding-right: 30px;
    position: relative;
    right: -50%;
    overflow-y: scroll;
    color: #ffffff;
    opacity: 0;
    text-align: justify;
}
.p3 .tarane{
	position: relative;
	width: 60%;
	height: 500px;
	right: 50%;
}
.p3 .tarane .boxT{
	width: 500px;
	height: 500px;
	position:absolute;
	top: 50px;
	left: -100%;
	border: #ddd solid 0px;
	border-radius: 5px;
}
.p3 .tarane .boxT .col-md-12{
	background-color: rgba(255,255,255,.7);
}
.p3 .tarane .boxT .picT{
	width:200px;
	height:200px;
	position: absolute;
	left: 0;
	background-color: #000;
}
.p3 .tarane .boxT .picT img{
	width: 100%;
	height: 100%;
}
.p3 .tarane .boxT .titleT{
	width:60%;
	height:200px;
}
.p3 .tarane .boxT .textT{
	overflow: hidden;
	overflow-y: scroll;
	width: 100%;
	height: 300px;
	text-align: justify;
}
.p3 .tarane .titleTarane{
	position: absolute;
	right:-100%;
	top:5%;
	opacity: 0;
}
.p3 .tarane .titleTarane img{
	width: 200px;
	opacity: 1;
}
.p3 .tarane  ul{
	position: absolute;
	right: -100%;
	top: 45%;
	color: #fff;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	opacity: 0;
}
.p3 .tarane  ul li{
	font-size: 20px;
	display: block;
	cursor: pointer;
	
}


.p4 .book{
	position: relative;
	width: 60%;
	height: 500px;
}
.p4 .book .titleBook{
	position: absolute;
	right:-100%;
	top:5%;
	opacity: 0;
}
.p4 .book .titleBook img{
	width: 200px;
	opacity: 1;
}
.p4 .book  ul{
	position: absolute;
	right: -100%;
	top: 45%;
	color: #e2e6e7;
	opacity: 0;
}
.p4 .book  ul li{
	font-size: 20px;
	display: block;
	cursor: pointer;
}

.p5 .video{
	position: relative;
	width: 60%;
	height: 650px;
	
}
.p5 .video .flash{
	position: absolute;
	bottom: 10%;
	left: -7%;
	display: inline;
	cursor: pointer;
	font-size: x-large;
}
.p5 .video .titleVideo{
	position: absolute;
	right:-30%;
	top:5%;
	opacity: 0;
}
.p5 .video .titleVideo img{
	width: 200px;
	opacity: 1;
}
.p5 .video .tableVideo{
	width: 100%;
	position: absolute;
	top: 30%;
}
.p5 .video .subT{
	width: 33%;
	height: 150px;
	margin: 5px;
	float: left;
	border: 1px solid #000;
	border-radius: 5px;
	opacity: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform:scale3d(0, 0, 0);
	transition: all .6s;
	cursor: pointer;
}

.p6 .deklame{
	position: relative;
	width: 60%;
	height: 500px;
	right: 50%;
}
.p6 .deklame .titleDeklame{
	position: absolute;
	right:-100%;
	top:5%;
	opacity: 0;
}
.p6 .deklame .titleDeklame img{
	width: 200px;
	opacity: 1;
}
.p6 .deklame  ul{
	position: absolute;
	right: -100%;
	top: 45%;
	color: #000;
	opacity: 0;
}
.p6 .deklame  ul li{
	font-size: 20px;
	display: block;
	cursor: pointer;
	
}

.p6 .deklame .boxR{
	width: 500px;
	height: 500px;
	position:absolute;
	top: 50px;
	left: -100%;
	background-color: rgba(255,255,255,.7);
	border: #ddd solid 0px;
	border-radius: 5px;
}
.p6 .deklame .boxR .picR{
	width:200px;
	height:200px;
	position: absolute;
	left: 0;
	background-color: #000;
}
.p6 .deklame .boxR .picR img{
	width: 100%;
	height: 100%;
}
.p6 .deklame .boxR .titleR{
	width:60%;
	height:200px;
}
.p6 .deklame .boxR .textR{
	overflow: hidden;
	overflow-y: scroll;
	width: 100%;
	height: 300px;
	text-align: justify;
}

.p7 .ashaar{
	position: relative;
	width: 60%;
	height: 500px;
	
}
.p7 .ashaar .titleAshaar{
	position: absolute;
	left:-100%;
	top:5%;
	opacity: 0;
}
.p7 .ashaar .titleAshaar img{
	width: 200px;
	opacity: 1;
}
.p7 .ashaar  ul{
	position: absolute;
	right: -100%;
	top: 45%;
	color: #fff;
	opacity: 0;
}
.p7 .ashaar ul li{
	font-size: 20px;
	display: block;
	cursor: pointer;
	
}
.p7 .ashaar .boxP{
	width: 500px;
	height: 500px;
	position:absolute;
	top: 50px;
	right: -100%;
	background-color: rgba(255,255,255,.7);
	border: #ddd solid 0px;
	border-radius: 5px;
	display: none;
}

.p7 .ashaar .boxP .titleP{
	width:60%;
	height:50px;
	display: inline-block;
}
.backBtn{
	position: absolute;
    left: 15px;
    top: 5px;
}
.downloadBtn{
	position: absolute;
    left: 210px;
    bottom: 5px;
}
.tarane .backBtn, .deklame .backBtn{
	left: 210px;
}
.p7 .ashaar .boxP .textP{
	overflow: hidden;
	overflow-y: scroll;
	width: 100%;
	height: 450px;
	text-align: justify;
}

.p8 .tasavir{
	position: relative;
	width: 40%;
	height: 600px;
	float: left;
	
	
}
.p8 .tasavir .titleTasavir{
	position: absolute;
	left:-100%;
	top:5%;
	bottom: 20px;
	opacity: 0;
}
.p8 .tasavir .titleTasavir img{
	width: 200px;
	opacity: 1;
}
.p8 .tasavir .tableTasavir{
	width: 100%;
	position: absolute;
	top: 30%;
	left: 10%;
}
.p8 .tasavir .subT{
	width: 40%;
	height: 150px;
	background-color: #000;
	background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
	margin: 5px;
	float: left;
	border-radius: 5px;
	opacity: 0;
	transform:scale3d(0, 0, 0);
	transition: all .6s;
	cursor: pointer;
	z-index: 99;
}
.p8 .tasavir .flash{
	position: absolute;
	bottom: 1%;
	right:-40px;
	display: inline;
	cursor: pointer;
	z-index: 99;
	font-size: x-large;
}
/*tasavir*/
.tasavirAfshari{
	background-color: #1bcdd4;
}
/*videoha*/
.videohaAfshari{
	background-color: #945eb6;
}
.movie .modal-content{
	width: 100%;
    margin: auto;
    
}
.movie .exit{
	width: 100%;
    height: 100%;
    position: absolute;
    
}

.ulModel-m{
	
	padding-bottom: 50px;
	right: 0;
    bottom: 0 !important;
    width: 100%;
    height: 90px;
    background-color: #f5f5f5;
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: inset 0px 15px 55px -23px rgba(0,0,0,0.68);
	-moz-box-shadow: inset 0px 15px 55px -23px rgba(0,0,0,0.68);
	box-shadow: inset 0px 15px 55px -23px rgba(0,0,0,0.68);
	transition: height .7s;
}
.ulModel-m .liModel {
    font-size: 40px;
    position: relative;
    max-width: 130px;
    margin: auto;
    text-align: center;
    margin-top: 25px;
    display: block;
}
.ulModel-m .small-menu{
	display: block;
	font-size: 60px;
}
.footer{
	position:fixed;
	bottom:3%;
	z-index:9;
	left:1.25%;
}
.footer a{
	color:#fff;
	float:left;
	font-size: 10px;
	text-decoration: none;
}

.footer a .Davat{
	visibility: visible;
  	opacity: 1;
  	transition: visibility 0s, opacity 1s linear;	
}

.footer a .Savat{
	position:absolute;
	left:25px;
	visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 1s linear;	
}

.footer a:hover .Davat{
	
	visibility: hidden;
  	opacity: 0;
}

.footer a:hover .Savat{
	
	visibility: visible;
  	opacity: 1;
}
@media only screen and (max-width: 920px) {
	.logoMain{
		display: none;
	}
}
@media only screen and (max-width: 630px) {
	.ulModel{
		right: 0;
	    bottom: 0 !important;
	    width: 100%;
	    height: 40px;
	    background-color: #f5f5f5;
	    border-radius: 10px 10px 0 0;
	    -webkit-box-shadow: inset 0px 15px 55px -23px rgba(0,0,0,0.68);
		-moz-box-shadow: inset 0px 15px 55px -23px rgba(0,0,0,0.68);
		box-shadow: inset 0px 15px 55px -23px rgba(0,0,0,0.68);
	}
	.ulModel .liModel {
	    font-size: 20px;
	    position: relative;
	    max-width: 90px;
	    margin: auto;
	    text-align: center;
	    margin-top: 15px;
	    display: block;
	}
	.ulModel .small-menu{
		display: block;
	}
	.ulModel:hover{
		height: 370px;
	}
}
.o-wrapper{transition:transform .3s}
::-webkit-scrollbar {
    width: 0px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}