/*@import '/css/fonts.css' screen;*/
/*
@font-face {
    font-family: 'PF Din Text Cond Pro';
    src: url('/css/images/ac54ae3f47241ba1e4c5a5d01c4a27f0.eot');
    src: local('PF Din Text Cond Pro'), local('PF Din Text Cond Pro'),
        url('/css/images/ac54ae3f47241ba1e4c5a5d01c4a27f0.eot?#iefix') format('embedded-opentype'),
        url('/css/images/ac54ae3f47241ba1e4c5a5d01c4a27f0.woff2') format('woff2'),
        url('/css/images/ac54ae3f47241ba1e4c5a5d01c4a27f0.woff') format('woff'),
        url('/css/images/ac54ae3f47241ba1e4c5a5d01c4a27f0.ttf') format('truetype'),
		url('/css/images/ac54ae3f47241ba1e4c5a5d01c4a27f0.svg#PF Din Text Cond Pro') format('svg');
}
*/
@font-face {
    font-family: 'PF Din Text Cond Pro';
	src: url('/css/images/Truetypewriter PolyglOTT.ttf');
}

.no-visible {display:none !important}
.name-section{display:none !important}
html,body{margin:0;padding:0;font-size:14px;font-family:'PF Din Text Cond Pro',sans-serif;min-height:100vh}
body {min-width:320px;color:#FFF;overflow:hidden;overflow-y:auto;font-weight:normal;min-height:100vh;
	background: #636363;
	background: -moz-linear-gradient(top,  #636363 0%, #1f2020 100%);
	background: -webkit-linear-gradient(top,  #636363 0%,#1f2020 100%);
	background: linear-gradient(to bottom,  #636363 0%,#1f2020 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#1f2020',GradientType=0 ); /* IE6-9 */
}
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none !important}
a,img{border:none;text-decoration:underline}
img{max-width:100%;height:auto !important}
a:hover {text-decoration: none}
p,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;word-wrap:break-word;font-weight:normal}
.clearfix:before, .clearfix:after { content:" "; display:table; width:100%}
.bg-cover{background-position:50% 50%;background-repeat:no-repeat;background-size:cover}
.bg-contain{background-position:50% 50%;background-repeat:no-repeat;background-size:contain}
.bg-cover-top{background-position:50% 0;background-repeat:no-repeat;background-size:cover}
.bg-contain-top{background-position:50% 0;background-repeat:no-repeat;background-size:contain}
.bg-cover-right{background-position:100% 50%;background-repeat:no-repeat;background-size:cover}
.user-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
/*********flex**********/
.flex{display:-webkit-flex;display:flex}
.flex-wrap{flex-flow:row wrap;-webkit-flex-flow:row wrap}
.flex-align-center{align-items:center;-webkit-align-items:center}
.flex-align-start{align-items:start;-webkit-align-items:start}
.flex-align-end{align-items:flex-end;-webkit-align-items:flex-end}
.flex-justify-between{justify-content:space-between;-webkit-justify-content:space-between}
.flex-justify-center{justify-content:center;-webkit-justify-content:center}
.flex-justify-end{justify-content:flex-end;-webkit-justify-content:flex-end}
.flex-justify-around{justify-content:space-around;-webkit-justify-content:space-around}
.flex-column{display:-webkit-flex;display:flex;flex-direction:column;-webkit-flex-direction:column}
/*************pleer*******/
.window-start{position:fixed;top:0;left:0;height:100vh;width:100%;z-index:100;
	animation:stop 1s ease-in-out forwards 3s,stop1 0s ease-in-out forwards 4.7s;
	-webkit-animation:stop 1s ease-in-out forwards 3s,stop1 0s ease-in-out forwards 4.7s;
	background: #636363;
	background: -moz-linear-gradient(top,  #636363 0%, #1f2020 100%);
	background: -webkit-linear-gradient(top,  #636363 0%,#1f2020 100%);
	background: linear-gradient(to bottom,  #636363 0%,#1f2020 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#1f2020',GradientType=0 ); /* IE6-9 */
}
.window-start>div{margin:0 30px 0 10px;
	transform:scale(0.3);-webkit-transform:scale(0.3);
	animation:start 1.5s ease-in-out forwards;-webkit-animation:start 1.5s ease-in-out forwards
}
.window-start>div img{display:block}
@keyframes start{
	from {transform:scale(0.3);-webkit-transform:scale(0.3);}
	to {transform:scale(1);-webkit-transform:scale(1);}
}
@-webkit-keyframes start{
	from {transform:scale(0.3);-webkit-transform:scale(0.3);}
	to {transform:scale(1);-webkit-transform:scale(1);}
}
@keyframes stop{100%{opacity:0}}
@-webkit-keyframes stop{100%{opacity:0}}
@keyframes stop1{100% {left:-99999px}}
@-webkit-keyframes stop1{100% {left:-99999px}}

.content{min-height:100vh;display:-webkit-flex;display:flex;padding:0 10px;
	align-items:center;-webkit-align-items:center;justify-content:center;-webkit-justify-content:center
}
.content-pleer{width:100%;max-width:905px;position:relative;display:-webkit-flex;display:flex}
.content-pleer_left{width:300px;margin-right:4px;height:541px;max-height:540px;overflow:hidden;
	flex:0 0 auto;-webkit-flex:0 0 auto;background:url(/img/bg_left.png) 50% 50% no-repeat;
	display:-webkit-flex;display:flex;flex-direction:column;-webkit-flex-direction:column
}
.content-name{height:60px;font-size:18px;position:relative;font-weight:400;cursor:pointer;
	display:-webkit-flex;display:flex;align-items:center;-webkit-align-items:center;
	justify-content:center;-webkit-justify-content:center
}
.content-name *{transition:all 0.3s;-webkit-transition:all 0.3s}
.content-name:after{content:"";width:100%;height:1px;background:url(/img/left_line.png) 50% 50% no-repeat;
	position:absolute;bottom:0;left:0
}
.content-name_burger{position:absolute;right:15px;top:50%;line-height:0;
	transform:translateY(-50%);-webkit-transform:translateY(-50%)
}
.content-name_burger span{width:5px;height:5px;display:inline-block;vertical-align:top;
	margin-left:3px;border-radius:50%;background:#FFF;
	transition:all 0.3s;-webkit-transition:all 0.3s
}
.content-name:hover{color:#d5a156}
.content-name:hover .content-name_burger span{background:#d5a156}

.left_list{min-height:450px;max-height:450px;overflow:hidden;overflow-y:auto;margin-top:10px;position:relative;
	display:-webkit-flex;display:flex;flex-direction:column;-webkit-flex-direction:column
}
.left_list.overflow-hidden{overflow-y:hidden;margin-top:0}
.left_list_{height:45px;padding:0 15px 0 20px;cursor:pointer;overflow:hidden;
	display:-webkit-flex;display:flex;align-items:center;-webkit-align-items:center;
	justify-content:space-between;-webkit-justify-content:space-between;
	flex:0 0 auto;-webkit-flex:0 0 auto;
	background-image:url(/img/hover1.png);background-position-y:0px;background-repeat:no-repeat;
	transition:background-position-x 1s;-webkit-transition:background-position-x 1s;
	background-position-x:-200px
}
.left_list_.active{position:absolute;top:0px;width:100%;left:0;height:60px;background:#000;
	padding-left:35px;font-size:16px;z-index:10
}
.left_list_.active>span{display:none}
.left_list_.active:before{content:"";position:absolute;width:8px;height:8px;border:1px solid transparent;
	border-left-color:#d5a156;border-bottom-color:#d5a156;left:20px;top:50%;margin-top:-5px;
	transform:rotate(45deg);-webkit-transform:rotate(45deg)
}
.left_list_.active:after{content:"";width:100%;height:1px;background:url(/img/left_line.png) 50% 50% no-repeat;
	position:absolute;bottom:0;left:0
}
.left_list_ h2{font-size:16px;font-weight:400;transition:color 1s;-webkit-transition:color 1s
}
.left_list_ span{color:#9e9e9e;font-size:11px;font-weight:300}
.left_list_ span>span{color:#d5a156;display:inline-block;width:15px;text-align:right}
.left_list_content{min-height:390px;max-height:390px;margin-top:60px;overflow:hidden;overflow-y:auto}
.left_list_h3{height:30px;font-size:14px;padding:0 37px 0 20px;cursor:pointer;overflow:hidden;position:relative;
	display:-webkit-flex;display:flex;align-items:center;-webkit-align-items:center;line-height:1;
	background-image:url(/img/hover.png);background-position-y:0px;background-repeat:no-repeat;
	transition:background-position-x 1s;-webkit-transition:background-position-x 1s;
	background-position-x:-200px
}
.left_list_h3.info:after{content:"";width:17px;height:11px;position:absolute;right:15px;top:50%;
	transform:translateY(-50%);-webkit-transform:translateY(-50%);
	background:url(/img/book.svg) 50% 50% no-repeat
}
.left_list_h3.muzon{padding-right:58px}
.left_list_h3.muzon:before{content:"";width:19px;height:20px;position:absolute;right:34px;top:50%;
	transform:translateY(-50%);-webkit-transform:translateY(-50%);
	background:url(/img/play1.png) 50% 50% no-repeat
}
.left_list_h3.active{
	transition:background-position-x 0s;-webkit-transition:background-position-x 0s;
	background-position-x:0
}
/********************************************************/
.content-pleer_right{width:601px;max-width:601px;height:541px;max-height:540px;overflow:hidden;
	position:relative;flex:0 1 auto;-webkit-flex:0 1 auto;border-radius:22px;
	background:url(/img/bg_right.png) 50% 50% no-repeat
}
.right-book{width:450px;position:absolute;top:50%;left:50%;z-index:0;
	transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)
}
.verses{position:relative;position:absolute;top:35px;bottom:35px;left:40px;right:40px;
	overflow:hidden;font-size:18px;color:#b1b1b1;opacity:0;
	transition:opacity 0.4s;-webkit-transition:opacity 0.4s
}
.verses-name{font-size:16px;height:30px;position:absolute;top:0px;left:0;width:100%;color:#FFF;z-index:10;display:none}
.verses-content{position:absolute;top:30px;bottom:0;left:0;width:100%;overflow:auto;padding:0 0 40px}
.verses-content.active{bottom:80px}
.verses-muzon{position:absolute;height:80px;left:0;bottom:0;width:100%;display:none}
.verses-muzon:after{content:"";width:100%;height:1px;background:url(/img/right_line.png) 50% 50% no-repeat;
	position:absolute;top:0;left:0
}
.verses-muzon.active{display:-webkit-flex;display:flex;align-items:center;-webkit-align-items:center;
	justify-content:center;-webkit-justify-content:center
}
.content-pleer_right.active .right-book{opacity:0.35}
.verses.active{opacity:1}
/* AUDIO */
.full-audio{margin:0 -10px}
.myaudio{margin:0 auto 20px}
/******Full Pages******/
.mobil{display:none}
.mobil-visible{visibility:hidden}
.noread{cursor:not-allowed !important;pointer-events:none;opacity:.65}

@media screen and (min-width: 1024px) {
	::-webkit-scrollbar{width:3px;height:3px;}
	::-webkit-scrollbar-button{display:none}
	::-webkit-scrollbar-track {background-color:transparent;border-radius:3px}
	::-webkit-scrollbar-track-piece{background-color:transparent}
	::-webkit-scrollbar-thumb{height:50px;background-color:#d5a156;border-radius:3px}
	::-webkit-scrollbar-corner{background-color:transparent}
	::-webkit-resizer{background-color:#d5a156}
	.left_list_:hover{
		transition:background-position-x 0s;-webkit-transition:background-position-x 0s;
		background-position-x:0
	}
	.left_list_:hover h2{color:#000}
	.left_list_.active:hover h2{color:#d5a156}
	.left_list_h3:hover{
		transition:background-position-x 0s;-webkit-transition:background-position-x 0s;
		background-position-x:0
	}
}
@media screen and (max-width: 1024px){
	body{overflow-x:auto;padding:0}
	.verses{top:20px;bottom:120px;left:20px;right:20px}
}
@media screen and (max-width: 550px) {
	/*.right-book{display:none}*/
	.verses-name{display:block}
	.content-pleer_right{position:fixed;left:100%;top:0;width:100%;height:100vh;max-height:100vh;
		background:#000;border-radius:0;z-index:300;
		transition:left 0.4s;-webkit-transition:left 0.4s
	}
	.content-pleer_right.show{left:0}
	.content{background:#000;padding:0}
	.content-pleer{height:100vh;overflow:hidden}
	.content-pleer_left{width:100%;height:100vh;max-height:100vh;background-size:cover;background-position:50% 0}
	.left_list{min-height:calc(100vh - 50px);max-height:calc(100vh - 50px)}
	.left_list.overflow-hidden{overflow-x:auto}
	.content-name{padding:0 10px}
	.content-name:after{background: url(/img/right_line.png) 50% 50% no-repeat}
	.left_list_ h2{font-size:15px}
	.left_list_content{min-height:auto;max-height:none;position:absolute;top:70px;margin-top:0;
		bottom:50px;width:100%
	}
	.left_list_h3{font-size:14px;padding:0 47px 0 10px}
	.verses-name{padding-left:25px}
	.verses-name:before{content:"";position:absolute;width:8px;height:8px;border:1px solid transparent;
		border-left-color:#d5a156;border-bottom-color:#d5a156;left:10px;top:50%;margin-top:-8px;
		transform:rotate(45deg);-webkit-transform:rotate(45deg)
	}
}
