@font-face {
    font-family: 'Graphik Arabic';
    src: url('/fonts/GraphikArabic-Light.eot');
    src: local('Graphik Arabic Light'), local('GraphikArabic-Light'),
        url('/fonts/GraphikArabic-Light.eot?#iefix') format('embedded-opentype'),
        url('/fonts/GraphikArabic-Light.woff2') format('woff2'),
        url('/fonts/GraphikArabic-Light.woff') format('woff'),
        url('/fonts/GraphikArabic-Light.ttf') format('truetype'),
        url('/fonts/GraphikArabic-Light.svg#GraphikArabic-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body{margin:0; padding:0; direction:rtl; font:12px/18px tahoma; background:#0d2f52;}
body *{box-sizing:border-box}
ul{margin:0; padding:0; list-style:none}
figure{margin:0; padding:0;}
a{text-decoration:none; color:#fff;}
h1,h2,h3{font-weight:normal; margin:0; padding:0}

.background{position:fixed; top:0; left:0; right:0; bottom:0; margin:0; padding:0}
.background>img{position:absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top;}
.wrapper{position:fixed; top:0; left:0; right:0; bottom:0; display:flex; flex-direction: column}
.container{display:block; width:70vw; height:auto; margin:0 auto; position:relative}
.top-row{position:relative; width:100%; height:100%; margin:0 auto;}
.besmellah{position:absolute; top:96px; right:0; width:100px;}
.besmellah img{width:100%}
.json-reader{position:absolute; top:180px; right:0; width:340px; bottom:0px;/* overflow:hidden*/}
.json-reader header{display:table; width:100%; color:#c4ad7b; font-size:11px; white-space:nowrap; line-height:30px; margin-bottom:16px;}
.json-reader header .persian-text{display:inline; float:right;}
.json-reader header .english-text{display:inline; float:left; direction:ltr}
.json-reader header .persian-text:before,
.json-reader header .english-text:before{content:""; display:inline-block; vertical-align:middle; width:6px; height:6px; border-radius:1px; background:#fff; margin-left:4px;}
.json-reader header .english-text:before{margin-left:0px; margin-right:4px;}
.json-reader #listViewWrapper{position:absolute;top:46px; left:0; right:0; bottom:0;}
.json-reader #listViewWrapper .simplebar-scrollbar:before{background-color:rgba(255,255,255,1); width:4px; border-radius:4px; opacity:0.05}
.json-reader #listViewWrapper .simplebar-track.simplebar-vertical{right:-16px;}
.json-reader #listView{position:relative;top:0; left:0; display:flex; flex-direction: column-reverse; overflow:hidden; justify-content: flex-end}
.json-reader #listView.loading:before{content:""; position:absolute; width:40px; height:40px; top:0; left:50%; margin-left:-20px; background:url(/images/loader.svg) no-repeat center center; background-size:contain}
.json-reader #listView>li{display:table; width:100%; height:auto;}
.json-reader #listView>li>article{display:inline; width:calc(100% - 45px); border-bottom:1px solid #c4ad7b; position:relative; overflow:hidden; min-height:45px;}
.json-reader #listView>li:last-child>article{border-bottom:none}
.json-reader #listView>li>article:hover{text-shadow:0 0 3px rgba(255,255,255,0.6)}
.json-reader #listView>li>article.rtl{float:right; direction:rtl; padding-right:45px}
.json-reader #listView>li>article.ltr{float:left; direction:ltr; padding-left:45px;}
.json-reader #listView>li>article .language{position:absolute; bottom:18px; font-size:20px; color:#c4ad7b; font-weight:normal; font-family:'Graphik Arabic'}
.json-reader #listView>li>article.rtl .language{right:0; text-align:right}
.json-reader #listView>li>article.ltr .language{left:0; text-align:left}

.json-reader #listView>li>article .details{display:table; width:100%; padding:16px 0}
.json-reader #listView>li>article.rtl .details{text-align:right; direction:rtl}
.json-reader #listView>li>article.ltr .details{text-align:left; direction:ltr}
.json-reader #listView>li>article .details .date{color:#5a7590; font-size:11px; width:100%; display:table; margin-bottom:4px;}
.json-reader #listView>li>article:hover .details .date{text-shadow:none}

.json-reader #listView>li>article .details .title{font-size:13px; line-height:18px;}

.json-reader #listView>li>article>a{position:absolute; top:0; left:0; right:0; bottom:0; display:block}

.top-row .container{height:100%}
.bottom-row{
	display:block; width:100%; margin:0 auto; padding:64px 0 16px;
	background:rgba(6,27,58,0.85);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#061b3a+0,061b3a+100&0+0,0.5+20,1+50 */
	background: -moz-linear-gradient(top,  rgba(6,27,58,0) 0%, rgba(6,27,58,0.5) 20%, rgba(6,27,58,1) 50%, rgba(6,27,58,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(6,27,58,0) 0%,rgba(6,27,58,0.5) 20%,rgba(6,27,58,1) 50%,rgba(6,27,58,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(6,27,58,0) 0%,rgba(6,27,58,0.5) 20%,rgba(6,27,58,1) 50%,rgba(6,27,58,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00061b3a', endColorstr='#061b3a',GradientType=0 ); /* IE6-9 */
}
.menu{display:block; margin:0 calc(((100% / 8) / -2) + 16px); overflow:hidden;}
.menu ul{display:flex; width:100%;}
.menu ul>li{width:100%; padding:0 16px; position:relative;}
.menu ul>li:after{content:""; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-6px; background:#c4ad7b}
.menu ul>li:last-child:after{background:transparent; display:none}
.menu ul>li a{display:block; width:100%; height:40px; line-height:40px; white-space:nowrap; text-align:center;}
.menu ul>li a:hover{text-shadow:0 0 3px rgba(255,255,255,0.6);}
.copyright{display:flex; width:100%; margin-top:32px; height:40px}
.copyright>div{font-size:11px; color:#c4ad7b; white-space:nowrap; line-height:40px;}
.copyright-text-en{direction:ltr}
.copyright>div.copyright-logo{text-align:center; width:100%; margin:0 32px;}
.copyright-logo img{height:36px; width:auto;}

@media only screen and (max-width: 1700px){
	.background>img{object-position: center top;}
	.copyright>div{white-space: normal; width:100%; line-height:18px;}
	.copyright>div.copyright-logo{width:185px;}
}
@media only screen and (max-width: 1300px){
	.background>img{width:120%}/*object-fit:contain;*/ 
	.container{width:90vw}
}
@media only screen and (max-width: 1200px){
	.copyright{flex-direction:column; height:auto; text-align:center}
	.copyright>div.copyright-text-fa{order:1; margin-bottom:16px;}
	.copyright>div.copyright-text-en{order:2; margin-bottom:16px;}
	
	.copyright>div.copyright-logo{width:100%; text-align:center; margin:0; order:3}
	.copyright>div.copyright-logo>figure{height:36px;}
}
@media only screen and (max-width: 1080px){
	.background>img{width:130%;}
	.json-reader{width:250px;}
}
@media only screen and (max-width: 900px){
	.background>img{width:150%;}
}
@media only screen and (max-width: 680px){
	.background>img{width:150%;}
}
@media only screen and (max-width: 750px){
	.background>img{width:160%;}
}
@media only screen and (max-width: 680px){
	.background>img{width:225%;}
	.json-reader{display:none}
	.menu ul{flex-wrap: wrap; justify-content: center}
	.menu ul li{width:auto}
	/*.menu ul li.small-hide{display:none}*/
	.besmellah{display:none}
	.copyright>div.copyright-text-fa{display:none}
	
	.top-row{position:absolute; top:0; left:0}
	.bottom-row{position:absolute; bottom:0; left:0}
}
@media only screen and (max-width: 560px){
	.background>img{width:250%;}
}
@media only screen and (max-width: 520px){
	.background>img{width:250%;}
}
@media only screen and (max-width: 460px){
	.background>img{height:80%;}
	.besmellah{top:18px}
}

@media only screen and (max-width: 560px) and (max-height: 700px){
	.background>img{width:235%;}
}
@media only screen and (max-width: 520px) and (max-height: 700px){
	.background>img{width:235%;}
}
@media only screen and (max-width: 460px) and (max-height: 700px){
	.background>img{height:90%;}
}

@media only screen and (max-height: 600px) and (orientation: landscape){
	.background{display:none;}
	.besmellah{top:32px;}
	.json-reader{width:100%; top:80px;}
	.json-reader > ul{flex-wrap: wrap; flex-direction: row-reverse}
	.json-reader > ul > li{width:calc(33.33% - 16px); margin:8px; padding:8px; background:rgba(255,255,255,0.1);}
	.json-reader > ul > li > article{width:100%; border-bottom:none;}
	.json-reader > ul > li > article .details{padding-top:0}
	.json-reader > ul > li > article.rtl{padding-right: 0}
	.json-reader > ul > li > article.ltr{padding-left: 0}
	.json-reader > ul > li > article .language{top:0}
	.json-reader > ul > li > article .details .date{padding:0 35px}
}