@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'dinarabicregular';
    src: url('../fonts/DINNEXTLTARABIC-REGULAR.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'dinarabicbold';
    src: url('../fonts/DINNEXTLTARABIC-BOLD.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'dinarabiclight';
    src: url('../fonts/DINNEXTLTARABIC-LIGHT.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'aalmaghribi';
    src: url('../fonts/AALMAGHRIBI.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




:root{
  --primColor : #b57847;
  --primColorRGB : 181,120,71;
  --secColor : #8d6e54;
  --secColorRGB : 141,110,84;
  --thirdColor: #eee2d0;
  --thirdColorRGB : 238,226,208;
  --fourthColor: #414042;
  --fourthColorRGB : 65,64,66;
}


html{ height: 100%;}
body{
    margin:0; font-family:'dinarabicregular', sans-serif; font-size: 23px; line-height: 30px; background: var(--thirdColor);
    text-align: justify; color: var(--secColor); height: 100%; min-height: 100%; position: relative;
}
header, section, footer, article, aside{ display:block;}
a{ color: inherit; text-decoration: none;
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}
a.link{ color: var(--primColor); }
h1, h2, h3, h4, h5{ font-weight: normal; font-family: 'dinarabicregular';}
*{ box-sizing: border-box; }
#fancybox-wrap, #fancybox-outer, #fancybox-content{ box-sizing: content-box !important; }

.container{ width: 98%; max-width: 1280px; margin: auto;}




/*ASIDE*/
aside{
    position:fixed; right:0; top:0; display:flex; flex-direction:column; height:100%; width:250px; background:var(--secColor);
    color: #FFF;
}
.aside_header{ font-size:30px; display:flex; }
.aside_header a{ display:block; width:50%; text-align:center; padding:5px; color:var(--thirdColor); }
.aside_header a.activ{ border-bottom:1px solid var(--thirdColor); }
.aside_content{ overflow:auto; }
aside nav ul{ list-style-type:none; }
aside nav ul li a{ display:block; padding:5px 0; font-size:15px }
a.tomon_link{ width:25%; text-align:center; }
#tomon_nav{ display:none; }
#tomon_nav ul li+li{ margin-top:10px; border-top:solid 1px var(--thirdColor); }
/*END OF ASIDE*/


/*HEADER*/
header{
    width: 100%; height: 70px; background: rgba(255,255,255,0.5);
    position: absolute; top: 0; right: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
header .header_content, header .header_nav{ display:flex; }
header .header_nav_item{ padding:0 10px }
header .burger{}
.burger a{ display: block;}
.burger div{
    width: 30px; height: 2px;
    background: var(--secColor);
    margin: 8px 0;
}
header .header_title{ height:70px; padding:0 10px }
header .header_title h1{ font-size:21px; color:var(--secColor); text-align:right; font-family:'dinarabicbold' }
/*END OF HEADER*/


/*FOOTER*/
footer{
    height: 70px; background: var(--thirdColor);
    position: absolute; bottom: 0; right: 0; left: 0;
    border-radius: 20px 20px 0 0; overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer nav, footer nav .row, footer nav .one_third{ height:100% }
footer nav a{
    display: block; width: 100%; height: 100%;
    position: relative; text-align: center; line-height: 15px;
    color: var(--secColor); font-size: 14px;
}
footer nav a .icon{ padding:10px 0 5px 0 }
footer nav a .icon img{ display:block; margin:auto; height:30px }
footer nav a.activ{ background:rgba(255,255,255,0.7) }
footer nav a.activ:after{
    display: block; content: ""; height: 3px;
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--secColor);
}
/*END OF FOOTER*/


section{ position: absolute; top: 70px; bottom: 70px; left: 0; right: 250px; }



/*coran_page*/
.coran_page{ }
.coran_page_details{ font-size:13px; color:var(--fourthColor); padding:5px 0; min-height:70px; margin-bottom:20px }
.coran_page_details .surah_title{ float:right; margin-top:10px }
.coran_page_details .hizb_title{ float:left; margin-top:10px }
.page_number{ text-align:center; }
.page_number .icon img{ display:block; width:20px; margin:auto; }


.surah_intro{ margin-bottom:10px }
.surah_intro img{ display:block; width:100%; max-width:700px; margin:auto; }
.surah_page{ width:100%; max-width: 700px; margin: auto; position:relative; font-family:'aalmaghribi'; color:#000; text-align:center; }
.surah_page.tomon_page{ max-width:inherit; }
.surah_page.first_page{
    background: url(../img/bg-first-page.png) no-repeat center bottom; background-size: 100%;
    padding: 250px 0 250px 0; background-position-y:120px;
}
.surah_page.first_page .bg img{ display:block; width:100%; max-width:600px; margin:auto; }
.surah_page.first_page .surah_title{
    position: absolute; top: 0; right: 0;
}
.surah_page .surah_title{
    width: 100%; background: url(../img/bg-surah-title.png) no-repeat center;
    background-size: 100%; height: 100px; line-height: 100px; font-size: 40px;
}
.surah_page .surah_text{
    font-size: 40px; line-height: 30px;
}
.surah_page .surah_line+.surah_line{ margin-top:5% }
.surah_page .surah_line a{ display:inline-block; position:relative; padding:0 1px }
.surah_page .surah_line a:hover{ background:rgba(var(--primColorRGB), 0.4); }
.surah_page .surah_line .word_id{ display:none; }

.surah_page.tomon_page .surah_line{ display:inline; }
.surah_page.tomon_page .surah_text{ line-height:60px }
.surah_page.tomon_page .surah_line+.surah_line{ margin-top:0 }
.surah_page.tomon_page .surah_line .surah_title{ margin:40px 0 10px 0;}


.surah_popup_menu{  position: fixed; display: none; width: 90%; max-width: 450px; right: 0; left: 0; margin: auto;}
.surah_popup_menu_content{
    width: 100%; position:relative; background:rgba(var(--primColorRGB), 0.95);
    color:#FFF; font-size: 12px; padding: 15px 5px; border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); font-family: 'dinarabiclight';
}
.surah_popup_menu .nav{ width:100% }
.surah_popup_menu .nav a{ display:block; line-height: 1; text-align:center; width:16.66% }
.surah_popup_menu .nav a+a{ }
.surah_popup_menu .nav a .icon{ width:30px; margin:auto; }
.surah_popup_menu .nav a .icon img{ width:100%; display:block; margin:auto; }

.surah_popup_menu_arrow{
    width: 16px; height: 16px; transition: 0.3s;
    position: absolute; bottom: -8px; overflow: hidden;
    
}
.surah_popup_menu_arrow .icon{
    width: 100%; height: 100%; background:rgba(var(--primColorRGB), 0.95);
    transform: rotate(45deg); position: relative; bottom: 5px; transition: 0.3s;

}
/*End of coran_page*/

/*coran_modal*/
.coran_modal{
    position: fixed; bottom: -100%; left: 0; right: 0; display: flex;
    transition: 0.5s; height: 100%; background: rgba(var(--fourthColorRGB), 0.5);
    flex-direction: column-reverse;
}
.coran_modal.show{ bottom:0; }
.coran_modal_nav{
    background: var(--thirdColor); font-size: 13px;
    width: 80%; margin: auto; border-radius: 10px 10px 0 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.coran_modal_nav a{
    display:block; height:35px; line-height:35px;
    padding: 0 7px; color: var(--fourthColor);
}
.coran_modal_nav a.activ{ background:#FFF; color:var(--primColor); }
.coran_modal_content{
    width: 100%; background:#FFF ; color: #000;
    padding: 10px 10px 80px 10px; border-radius: 20px 20px 0 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.coran_modal_header, .coran_modal_header_nav{ display:flex; }
.coran_modal_header_nav a{
    display: inline-block; color: var(--secColor); font-size: 18px;
    padding: 0 5px;
}
.coran_modal_header .close{
    font-size: 21px;
    color: var(--secColor);
}
.coran_modal_content h2{
    margin:0 0 3px 0; font-size:25px; text-align:center; padding-bottom: 10px;
    color: var(--secColor); border-bottom:solid 1px rgba(var(--primColorRGB), 0.2);
}
.coran_modal_tabs_wrapper{ border-bottom:solid 1px rgba(var(--primColorRGB), 0.2); padding-bottom:3px }
.coran_modal_tabs{ font-size:15px; color:#ba9f78; }
.coran_modal_tabs a{ display:inline-block; padding:2px 7px; }
.coran_modal_tabs a.activ{ background:rgba(var(--primColorRGB),0.5); color:#FFF; border-radius:10px }
.coran_modal_params{ float:left; margin-top:3px; font-size:14px; font-family:'dinarabiclight'; position:relative; }
.coran_modal_params a{ flex-direction:row-reverse; color:var(--secColor);}
.coran_modal_params a .icon{ font-size:21px; margin-right:5px; }
.coran_modal_params .coran_modal_params_dropdown{
    width: 100px; height: auto; position: absolute; left: 0; top: 30px;
    background: var(--primColor); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px; overflow: hidden; text-align: center; display: none; 
}
.coran_modal_params .coran_modal_params_dropdown.reciters{ width:200px }
.coran_modal_params .coran_modal_params_dropdown.tafsir_dropdown{ width:150px }
.coran_modal_params .coran_modal_params_dropdown ul{
    list-style: none; margin: 0; padding: 0;
}
.coran_modal_params .coran_modal_params_dropdown a{
    display: block; padding: 5px 20px; color: var(--thirdColor);
}
.coran_modal_params .coran_modal_params_dropdown a.activ{ background:var(--secColor); }
.coran_modal_details{
    margin:10px 0; height:300px; padding:0;
}
.coran_modal_details .param_property{ font-family:'aalmaghribi'; font-size:31px; }
.coran_modal_details .param_value{ font-size:18px; font-family:'dinarabiclight'}
.coran_modal_details .param_value.fr{text-align:left;}
.coran_modal_details_scroll{ height:100%; overflow:auto; }
.coran_modal_details .poeme{ text-align:center; }

.coran_modal_arrows{ text-align:center; font-size:15px; }
.coran_modal_arrows a{ width:100%;  }
.coran_modal_arrows .icon{ font-size:21px; color:var(--primColor); margin: 0 5px}
/*End of coran_modal*/


/*audio_player_block*/
.audio_player_block{ padding:20px 0; }
.audio_player_block .audio_buttons button{ display:block; border:none; background:transparent; }
.audio_player_block .audio_buttons button.play{
    width: 70px; height: 70px; line-height: 70px; margin: 0 30px;
    text-align: center; font-size: 30px; border-radius: 100%;
    background: var(--primColor); color: #FFF;
}
.audio_player_block .audio_buttons button.play i{ position:relative; left:2px; top:-1px }
.audio_player_block .audio_buttons button.play.pause i{ left:0; right:0 }
.audio_player_block .audio_buttons button.audio_nav{ color:var(--primColor); font-size:30px; }
.audio_time_line{  margin:20px 0 0 0; justify-content:space-between; }
.audio_time{ width:55px; font-size:11px; text-align:center; }
.audio_time_slider_block{
    width: 100%; height: auto;
    position: relative; display: flex; user-select: none;
}
.audio_time_slider_block input{
    width: 100%; -webkit-appearance:none; height: 5px; outline: none;
    background: rgba(var(--primColorRGB), 0.2); cursor: pointer;
    margin: 0; padding: 0; border-radius: 5px; overflow: hidden;
}
.audio_time_slider_block input::-webkit-slider-thumb{
    -webkit-appearance:none; height: 5px; z-index: 3; position: relative;
}
.audio_time_slider{
    position: absolute; width: 15px; height: 15px; background: var(--primColor);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 2; border-radius: 100%;
}
.audio_progress{
    width: 50%; height: 5px; background: var(--primColor);
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); pointer-events: none;
}
.audio_speaker{ text-align:center; font-size:13px }
/*End of audio_player_block*/


/*audio_settings_modal*/
.audio_settings_modal{
    position: fixed; left: 0; top: 0;
    height: 100%; background: rgba(0, 0, 0, 0.5); display: none;
    z-index: 4; width: 100%; height: 100%; padding-bottom: 70px;
}
.audio_settings_modal.show{ display:flex; }
.audio_settings_modal .audio_settings_modal_wrapper{
    width: 80%; height: 70%; background: var(--thirdColor);
    border-radius: 20px; display: flex; flex-direction: column;
    padding: 20px; overflow: auto;
}
.settings_item .input{ padding:10px }
.settings_item .input label{ display:block; color:var(--fourthColor); font-size:15px }
.settings_item .input select{
    display: block; width: 100%; margin: 8px 0; border: solid 1px var(--secColor);
    height: 30px; line-height: 30px; border-radius: 10px; background: rgba(255,255,255,0.2);
}
.settings_button{ padding: 20px;}
.settings_button a{
    display: block; height: 40px; line-height: 40px;
    font-size: 17px; text-align: center; color: white; background: var(--primColor);
    border-radius: 10px;
}
.settings_button a.close_settings{ background:var(--fourthColor); }
.settings_button a+a{ margin-top:10px }
/*End of audio_settings_modal*/

/*reciters_modal*/
.reciters_modal{
    position: fixed; left: 0; top: 0; display: none;
    height: 100%; background: rgba(0, 0, 0, 0.5);
    z-index: 4; width: 100%; height: 100%; padding-bottom: 70px;
}
.reciters_modal.show{ display:flex; }
.reciters_modal .reciters_modal_wrapper{
    width: 80%; height: 80%; background: var(--thirdColor);
    border-radius: 20px; display: flex; flex-direction: column;
}
.reciters_list{ margin-top:auto; overflow:auto; }
.reciters_list .data_list .item_title{ margin-right:0 }
.reciters_list .data_list li{ padding:10px; border-radius:10px }
.reciters_list .data_list li.activ{ background:rgba(var(--primColorRGB), 0.5);}
.reciters_list .data_list li.activ .item_title{ color:#FFF }
/*End of reciters_modal*/


/*bookmarks_page*/
.bookmarks_page{ padding:20px; flex-direction:column; height:100% }
.bookmarks_list{ width:100% }
.bookmarks_page .bookmarks_list_item{
 padding: 10px; background: rgba(var(--secColorRGB), 0.1); border-radius: 10px;
 width: 100%;
}
.bookmarks_page .bookmarks_list_item+.bookmarks_list_item{ margin-top:20px }
.bookmarks_list .bookmarks_list_item .icon{
    width: 30px; font-size: 20px; color: var(--primColor);
}
.bookmarks_list .bookmarks_list_item .bookmarks_title{color:var(--fourthColor); }
.bookmarks_list .bookmarks_list_item .bookmarks_title h3{ font-size:21px; margin:0; }
.bookmarks_list .bookmarks_list_item .verse_text{ font-family:'aalmaghribi'; font-size:21px; }
.bookmarks_list .bookmarks_list_item .verse_number{
    width:60px; height:60px; background:var(--thirdColor);
    line-height: 60px; font-size: 14px; color: var(--secColor);
    margin-right: auto; border-radius: 100%; text-align: center;
    font-family: 'dinarabiclight';
}

.bookmarks_buttons{ margin-top:auto; text-align:center; }
.bookmarks_buttons .one_half{ padding:10px }
.bookmarks_buttons a{
    display:block; width: 100%; padding:10px; 
    background: var(--secColor); color: #FFF; font-size: 15px;
    border-radius: 10px;
}
/*End of bookmarks_page*/


/*simpleTable*/
.simpleTable{ margin: 20px 0; width: 100%; text-align: center;}
.simpleTable th{ border: none; background: var(--primColor); color: #FFF; font-weight: normal; padding: 15px 10px; text-align: center; color: #FFF;}

.simpleTable tbody tr{background: rgba(var(--primColorRGB), 0.1);}
.simpleTable td{ padding: 10px; font-size: 15px;}
/*end of simpleTable*/

.placeholder{ display: block; width: 100%; visibility: hidden;}


.row:after{ display: block; content: ""; clear: both; }
.row_flex{ display: flex;}
.flex_wrap{ flex-wrap: wrap; }
.row_flex:after{ display: block; content: ""; clear: both; }
.vcenter{
  -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center;
}
.hcenter{justify-content: center;}
.space_between{ justify-content: space-between; }
.one_half{ width: 50%; float: right;}
.one_third{ width: 33.33%; float: right;}
.one_fourth{ width: 25%; float: right;}
.two_third{ width: 66.66%; float: right;}
.three_fourth{ width: 75%; float: right; }
.one_fifth{ width: 20%; float: right; }
.one_sixth{ width: 16.66%; float: right; }


.row_grid { display: grid; height: auto; grid-template-columns: 2fr 1fr;}
.grid_col { width: 100%; height: auto; position: relative;}
.row_grid_text{padding: 30px 180px 30px 50px;}



.padding5{ padding: 5px;}
.padding10{ padding: 10px;}
.padding20{ padding: 20px;}
.paddingLeft{ padding-left: 20px;}
.paddingRight{ padding-right: 20px;}
.clear{ clear: both;}
.clearRight{ clear: right;}



.social a.facebook:hover{ background: #3b5998; color: #FFF;}
.social a.twitter:hover{ background: #55acee; color: #FFF;}
.social a.google-plus:hover{ background: #dd4b39; color: #FFF;}
.social a.linkedin:hover{ background: #007bb5; color: #FFF;}
.social a.youtube:hover{ background: #bb0000; color: #FFF;}
.social a.viadeo:hover{ background: #f6876d; color: #FFF;}
.social a.instagram:hover{ background: #bc2a8d; color: #FFF;}
.social a.pinterest:hover{ background: #bd081c; color: #FFF;}
.social a.soundcloud:hover{ background: #FE5000; color: #FFF;}
.social a.spotify:hover{ background: #1ed760; color: #FFF;}



/*animations*/
@keyframes blinker {
  100% {
    opacity: 0; transform: scale(3);
  }
}


.animation-element{
    opacity: 0; position: relative;
    transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    -ms-transition:1s;
    -moz-transition:1s;
}
.animation-element.in-view{ opacity: 1;}

.animation-element.slide-left {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-right {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.animation-element.slide-bottom {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0, 30px, 0px);
  -webkit-transform: translate3d(0, 30px, 0px);
  -o-transform: translate(0, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 30px, 0px);
}


.animation-element.slide-scale {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  transform: scale(0.9);
}


.animation-element.slide-left.in-view, .animation-element.slide-right.in-view, .animation-element.slide-bottom.in-view{
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-scale.in-view{ transform: scale(1); }


/*end of animations*/