@charset "utf-8";
    /* CSS Document */
    
    @import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
    @font-face {
        font-family: "Neirizi";
        src: url("../Fonts/Neirizi/Neirizi.eot");
        src: local("☺"), url("../Fonts/Neirizi/Neirizi.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    /* https://fonts.google.com/specimen/Amiri?selection.family=Amiri */
    /*@import url('https://fonts.googleapis.com/css?family=Amiri');*/
    /*====================================================================================================
		| ----------------------------- | Shortcodes |----------------------------- |
====================================================================================================*/
    /* bootstrap accordion / collapse */
    /* http://bootsnipp.com/snippets/50gOv */
    /* Dreamwaver emmet |  http://docs.emmet.io/cheat-sheet/ */
    /* font-family: "Neirizi", arial, verdana, sans-serif */
    /* font-family: 'Droid Arabic Naskh', Arial, Helvetica, sans-serif; */
    /* font-family: 'Amiri', Arial, Helvetica, sans-serif; */
    /* font-family: 'JF Flat Light', Arial, Helvetica, sans-serif */
    /* font-family: 'JF Flat Regular', Arial, Helvetica, sans-serif */
    /* font-family: 'JF Flat Medium', Arial, Helvetica, sans-serif */
    /* Vertical align anything with just 3 lines of CSS */
    /* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
    /*
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
*/
    /* Use :before */
    /* .Icon:before { content: "\f02d"; 
    position:relative;
	font-family: FontAwesome;
	font-size:2em;
	color:#FFFFFF;
    left:5%;
	top:25%;
	
    }*/
    /* .Icon:before { content: url(../images/Viewer/icons/Ico-Title.png); 
    position:relative;
	font-family: FontAwesome;
	font-size:2em;
	color:#FFFFFF;
    left:5%;
	top:25%;
	
    }*/
    /* A list of Font Awesome icons and their CSS content values | and make the icon bg | http://astronautweb.co/snippet/font-awesome/#comment-194592 */
    /* how to flip glyphicon icon | http://stackoverflow.com/questions/18609819/how-to-flip-glyphicon-icon |  */
    /* https://fortawesome.github.io/Font-Awesome/examples/ | Rotated & Flipped | fa-flip-horizontal & fa-flip-vertical */
    /*#HomeNews .ContentWraqpper .NewsBox .Data a.More .icon {position:relative;
		
		-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);	
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";;}	*/
    /* Modern Clean CSS “Sticky Footer” | http://mystrd.at/modern-clean-css-sticky-footer/*/
    /* make the div as table */
    /* http://www.mattboldt.com/kicking-ass-with-display-table/ */
    /*====================================================================================================
		| ----------------------------- |Home & Master Style |----------------------------- |
====================================================================================================*/
    /* ------------------ Reset  ------------------ */
    
    html {
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -webkit-user-select: none;
        /* Safari */
        -ms-user-select: none;
        /* IE 10 and IE 11 */
        user-select: none;
        /* Standard syntax */
    }
    
    body {
        min-height: 100vh;
        margin: 0px;
        padding: 0px;
        border: none;
        font: 14px 'Droid Arabic Naskh', Arial, Helvetica, sans-serif;
        color: #FFF;
        line-height: 150%;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.20), rgba(147, 143, 84, 0.20), rgba(247, 143, 84, 0.15)), url(../images/ra_img/bg.jpg) #FFF;
        direction: rtl;
        background-attachment: fixed;
    }
    /* ------------------ full screen  ------------------ */
    
    .body_container {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }
    
    .body {
        position: relative;
        width: 100vw;
        padding-top: 15px
    }
    /* fix full screen background problem | Viewport units: vw, vh, vmin, vmax | https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ */
    /* ------------------ Main Css  ------------------ */
    
    #mba {
        background: url(../images/ra_img/bg.jpg) #FFF;
    }
    
    #rs_container {
        position: relative
    }
    /* logo */
    
    .ra-logo {
        position: absolute;
        z-index: 20;
        right: 0;
        top: 0;
    }
    /* controls */
    
    .ra-controls {
        text-align: left;
        margin-bottom: 15px
    }
    
    .ra-controls .ra_sound {
        display: inline-block;
    }
    
    .ra-controls a.ra_close {
        display: inline-block;
        background: #b84d49;
        width: 25px;
        height: 25px;
        border-radius: 3px;
        text-align: center;
        line-height: 29px;
        margin-right: 2px
    }
    
    .ra-controls a.ra_close img {
        display: inline-block;
    }
    
    .ra-controls a:hover.ra_close {
        background: #a53c3b;
    }
    
    .ra-controls a.ra_fs {
        display: inline-block;
        background: #4f7c2c;
        width: 25px;
        height: 25px;
        border-radius: 3px;
        text-align: center;
        line-height: 29px;
        margin-right: 4px
    }
    
    .ra-controls a.ra_fs img {
        display: inline-block;
    }
    
    .ra-controls a:hover.ra_fs {
        background: #437021;
    }
    
    .ra-controls a.ra_efs {
        display: inline-block;
        background: #437021;
        width: 25px;
        height: 25px;
        border-radius: 3px;
        text-align: center;
        line-height: 29px;
        margin-right: 4px
    }
    
    #nav001 {
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
    }
    
    #nav002 {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0
    }
    
    #nav001 ul {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
        width: calc(100% - 50px);
    }
    
    #nav002 ul {
        list-style: none;
        margin: 0;
        padding: 0
    }
    
    #nav001 li {
        display: block;
        width: 20%;
        padding: 0;
        margin: 0;
        float: right
    }
    
    #nav002 li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0
    }
    
    #nav001 a.card_link,
    #nav002 a.card_link {
        display: block;
        background: #333;
        color: white;
        text-decoration: none;
    }
    
    #nav001 a.card_link:active,
    #nav002 a.card_link:active {
        background: blue;
    }
    
    #nav001 select,
    #nav002 select {
        display: none;
        width: 100%
    }
    
    .main_area {
        position: relative
    }
    
    .main_scr {
        position: relative;
    }
    
    .main_scr .r1_r {
        width: 23px;
        height: 22px;
        background: url(../images/ra_img/r1_r.png)
    }
    
    .main_scr .r1_m {
        background: url(../images/ra_img/r1_m_1.png) right no-repeat, url(../images/ra_img/r1_m_2.png) left no-repeat, url(../images/ra_img/r1_m_3.png);
    }
    
    .main_scr .r1_l {
        width: 23px;
        height: 22px;
        background: url(../images/ra_img/r1_l.png)
    }
    
    .main_scr .r2_r {
        background: url(../images/ra_img/r2_r_1.png) top no-repeat, url(../images/ra_img/r2_r_2.png) bottom no-repeat, url(../images/ra_img/r2_r_3.png)
    }
    
    .main_scr .r2_m {
        background: url(../images/ra_img/bat01.png), url(../images/ra_img/main_scr.jpg);
        background-size: auto, cover;
        height: 550px;
        position: relative
    }
    
    .main_scr .r2_l {
        background: url(../images/ra_img/r2_l_1.png) top no-repeat, url(../images/ra_img/r2_l_2.png) bottom no-repeat, url(../images/ra_img/r2_l_3.png)
    }
    
    .main_scr .r3_r {
        width: 23px;
        height: 20px;
        background: url(../images/ra_img/r3_r.png)
    }
    
    .main_scr .r3_m {
        background: url(../images/ra_img/r3_m_1.png) right no-repeat, url(../images/ra_img/r3_m_2.png) left no-repeat, url(../images/ra_img/r3_m_3.png);
    }
    
    .main_scr .r3_l {
        width: 23px;
        height: 20px;
        background: url(../images/ra_img/r3_l.png)
    }
    
    .main_scr .r2_m .screen_outer {
        position: relative;
        width: 90%;
        margin: 40px auto;
        background: #FFF url(../images/ra_img/bat01.png);
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.42);
        min-height: 470px;
        overflow: hidden
    }
    
    .main_scr .r2_m .screen_inner {
        margin: 20px;
        position: relative;
        overflow: hidden;
        height: 430px
    }
    
    .main_scr .r2_m .screen_inner .screen_vid {
        width: 110%;
        position: absolute;
        top: -110px
    }
    
    .main_scr .r2_m .screen_inner .screen_sun {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9
    }
    
    .main_scr .r2_m .screen_inner .screen_data {
        position: absolute;
        padding: 20px;
        width: 65%;
        height: 96%;
        right: 10px;
        background-color: rgba(255, 255, 255, .25);
        z-index: 9999;
        overflow: auto;
        color: #000;
        top: 2%;
    }
    
    .main_scr .r2_m .screen_inner .screen_data p {
        color: #000;
        font-size: 18px;
        line-height: 180%;
        margin: 5px 0px;
        padding: 0
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.top-20 {
        margin-top: -20px
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.top-15 {
        margin-top: -15px
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.top-10 {
        margin-top: -10px
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.top_20 {
        margin-top: 20px
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.top_15 {
        margin-top: 15px
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.top_10 {
        margin-top: 10px
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.big-title {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 40px;
        line-height: 200%
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.big-title2 {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 30px;
        line-height: 180%
    }
    
    .main_scr .r2_m .screen_inner .screen_data ol.bm li {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 21px;
        line-height: 200%;
        margin-bottom: 5px
    }
    
    .main_scr .r2_m .screen_inner .screen_data ol.bm li a {
        display: inline-block;
        color: #000;
        border-bottom: 1px dashed #3A3A3A;
        text-decoration: none;
        cursor: pointer
    }
    
    .main_scr .r2_m .screen_inner .screen_data ol.bm li a:hover {
        color: #000;
        text-shadow: 1px 1px 1px #FFF;
        border-bottom: 1px dotted #3c5700;
    }
    
    .tooltip-inner {
        font-family: 'Droid Arabic Naskh', Arial, Helvetica, sans-serif;
        font-size: 16px;
    }
    
    .modal {
        z-index: 99999
    }
    
    .bm_mod .modal-title {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 25px;
    }
    
    .bm_mod .modal-title img.bm-txt {
        display: inline-block;
        margin: 0px 2px;
        width: 40px;
        height: auto
    }
    
    .modal-body {
        height: 75vh !important;
        overflow: auto
    }
    
    .bm_mod .modal-body p {
        font-size: 16px;
        color: #000;
        margin-bottom: 10px;
        line-height: 200%
    }
    
    .bm_mod .modal-body p span.Quran {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 18px;
        color: #2e4f00;
    }
    
    .bm_mod .modal-body p span.SuraaName {
        color: #bd3b00
    }
    
    .bm_mod .modal-body p span.Hadeeth {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 16px;
        color: #53633c
    }
    
    .bm_mod .modal-body p img.ra-txt {
        display: inline-block;
        margin: 0px 2px;
        width: 30px;
        height: auto
    }
    
    .bm_mod .modal-body p img.ra-txt2 {
        display: inline-block;
        margin: 0px 2px;
        width: 22px;
        height: auto
    }
    
    .bm_mod .modal-body p.title1 {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 21px;
        color: #2a3d00;
        margin-bottom: 10px;
        margin-top: 5px;
        line-height: 180%;
        display: inline-block;
        width: 99%;
        border-bottom: 1px dotted #000
    }
    
    .bm_mod .modal-body p.title2 {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
        margin-top: 5px;
        line-height: 180%
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.h1 {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 26px;
        line-height: 200%
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.h2 {
        font-size: 19px;
    }
    
    .main_scr .r2_m .screen_inner .screen_data img.ras {
        display: inline-block;
        margin: 0px 2px;
        width: 35px;
        height: auto
    }
    
    .main_scr .r2_m .screen_inner .screen_data img.ras2 {
        display: inline-block;
        margin: 0px 2px;
        width: 30px;
        height: auto
    }
    
    .main_scr .r2_m .screen_inner .screen_data img.ras3 {
        display: inline-block;
        margin: 0px 2px;
        width: 25px;
        height: auto
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.h1 img.ras {
        display: inline-block;
        margin: 0px 2px;
        width: 45px;
        height: auto
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.ra_t01 {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 28px;
        line-height: 140%
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.ra_t01 img.ras {
        display: inline-block;
        margin: 0px 2px;
        width: 48px;
        height: auto
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.ra_t02 {
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 24px;
        line-height: 140%;
        border-bottom: 1px dotted #505050;
        padding-bottom: 5px;
        margin-bottom: 15px;
        margin-top: 15px
    }
    
    .main_scr .r2_m .screen_inner .screen_data p.ra_t02 img.ras {
        display: inline-block;
        margin: 0px 2px;
        width: 40px;
        height: auto
    }
    
    .main_scr .r2_m .screen_inner .screen_data .mt_01 {
        margin-top: 30px !important
    }
    
    .main_scr .r2_m .screen_inner .screen_intro img.intro1 {
        position: absolute;
        z-index: 9999;
        max-width: 100%;
        height: auto;
        top: -25px;
        right: -30px;
        opacity: 0;
        /* animation */
        animation-name: intro1;
        animation-duration: 5s;
        animation-timing-function: ease-out;
        animation-delay: 0s;
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-fill-mode: none;
        animation-play-state: running;
    }
    
    .main_scr .r2_m .screen_inner .screen_intro img.intro2 {
        position: absolute;
        z-index: 9999;
        max-width: 100%;
        height: auto;
        top: 20px;
        right: 0px;
        opacity: 0;
        /* animation */
        animation-name: intro1;
        animation-duration: 5s;
        animation-timing-function: ease-out;
        animation-delay: 4.0s;
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-fill-mode: none;
        animation-play-state: running;
    }
    
    .main_scr .r2_m .screen_inner .screen_intro img.intro3 {
        position: absolute;
        z-index: 9999;
        max-width: 100%;
        height: auto;
        top: 10px;
        right: 0px;
        opacity: 0;
        /* animation */
        animation-name: intro1;
        animation-duration: 5s;
        animation-timing-function: ease-out;
        animation-delay: 8s;
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-fill-mode: none;
        animation-play-state: running;
    }
    
    .main_scr .r2_m .screen_inner .screen_intro img.intro4 {
        position: absolute;
        z-index: 9999;
        max-width: 100%;
        height: auto;
        top: 90px;
        right: -30px;
        opacity: 1;
        /* animation */
        animation-name: intro2;
        animation-duration: 22s;
        animation-timing-function: ease-out;
        animation-delay: 0s;
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-fill-mode: none;
        animation-play-state: running;
    }
    
    .main_scr .r2_m .screen_inner .screen_intro a.go {
        display: block;
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-size: 24px;
        color: #FFF;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
        position: absolute;
        z-index: 999999;
        width: 220px;
        height: 60px;
        line-height: 60px;
        max-width: 100%;
        left: 0px;
        right: 160px;
        top: 320px;
        text-align: center;
        text-decoration: none;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, .1);
        opacity: 1;
        /* animation */
        animation-name: intro2;
        animation-duration: 23.8s;
        animation-timing-function: ease-out;
        animation-delay: 0s;
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-fill-mode: none;
        animation-play-state: running;
    }
    
    .main_scr .r2_m .screen_inner .screen_intro a.go:hover {
        background: rgba(255, 255, 255, .2)
    }
    
    @keyframes intro1 {
        0% {
            transform: scale(.3);
            opacity: 0;
        }
        30% {
            transform: scale(1);
            opacity: 1;
        }
        60% {
            transform: scale(1);
            opacity: 1;
        }
        61% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(0);
            opacity: 0;
        }
    }
    
    @keyframes intro2 {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(0);
            opacity: 0;
        }
        58% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    .main_scr .r2_m .screen_inner .screen_mosque {
        display: block;
        position: absolute;
        bottom: -5px;
        left: 30px;
        z-index: 8;
        width: 30%;
        height: auto
    }
    
    .main_scr .r2_m .screen_inner .fullscreen-bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
    }
    
    .fullscreen-bg__video {
        position: absolute;
        left: 0;
        width: 100%;
        background: #000;
        height: 350%;
        top: -180%;
    }
    
    .author_div {
        background: #FFF url(../images/ra_img/bat01.png);
        border-style: solid;
        border-width: 4px;
        border-color: rgb(160, 161, 111);
        box-shadow: 0px 0px 12.64px 3.36px rgba(0, 0, 0, 0.60);
    }
    
    .Points {
        position: absolute;
        bottom: 4px;
        text-align: center;
        width: 100%;
        display: none
    }
    
    .Points a {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin: 0px 3px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
        background: rgb(255, 255, 255);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
        /* IE6-9 */
    }
    
    .Points a.active {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f8b500+51,fbdf93+100;Orange+3D+%235 */
        background: rgb(252, 234, 187);
        /* Old browsers */
        background: -moz-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=1);
        /* IE6-9 */
    }
    
    .footer {
        text-align: center;
        width: 100%;
        padding-top: 20px;
        line-height: 180%;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.25px
    }
    
    .footer a {
        color: #FFF;
        letter-spacing: 6px;
        font-weight: normal
    }
    /* ----------------------------- | Satrt Screen |----------------------------- */
    
    .start_scr {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        /* background: linear-gradient(-45deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.80)), url(../images/ra_img/start_bg.jpg); */
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.20), rgba(147, 143, 84, 0.20), rgba(247, 143, 84, 0.15)), url(../images/ra_img/bg.jpg) #FFF;
        background-attachment: fixed;
        ;
        position: fixed;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 9;
    }
    
    .start_scr_inner {
        padding: 30px;
        background: rgba(255, 255, 255, 0.10);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.30);
    }
    /* CSS */
    
    .button-85 {
        font-size: 30px;
        font-weight: 700;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
        border: 2px solid rgba(255, 255, 255, 1);
        outline: none;
        color: rgb(255, 255, 255);
        background: #111;
        cursor: pointer;
        position: relative;
        z-index: 0;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: 120px;
        height: 120px;
        line-height: 120px;
        border-radius: 50%;
    }
    
    .button-85:before {
        content: "";
        background: linear-gradient( 45deg, #879460, #9c975a, #897653, #272f10, #879460, #9c975a, #897653, #272f10);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        animation: glowing-button-85 20s linear infinite;
        transition: opacity 0.3s ease-in-out;
        border-radius: 50%;
    }
    
    @keyframes glowing-button-85 {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 400% 0;
        }
        100% {
            background-position: 0 0;
        }
    }
    
    .button-85:after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(../images/ra_img/main_scr.jpg);
        background-size: cover;
        left: 0;
        top: 0;
        border-radius: 50%;
    }
    
    .start_scr .logo_start {
        display: inline-block;
        height: auto;
    }
    
    .start_scr .logo_start {
        box-shadow: 0 0 50px 15px rgba(225, 225, 225, 0.5);
        border-radius: 50%;
    }
    
    .start_title {
        display: block;
        font-family: "Neirizi", arial, verdana, sans-serif;
        font-weight: 700;
        color: rgba(0, 0, 0, 1.9);
        font-size: 20px;
        padding: 20px;
        padding-bottom: 5px;
        text-shadow: 1px 1px 1px rgba(225, 225, 225, 0.5);
    }
    
    .topnav_mob {
        display: none;
    }
    /* make the div as table */
    /*<div class="table"><div class="table-row"><div class="table-cell"></div><div class="table-cell"></div><div class="table-cell"></div></div></div>*/
    
    .table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 0px;
        background: none;
        table-layout: inheritin/* CSS display:table-cell child width bug */
    }
    
    .table-row {
        display: table-row;
    }
    
    .table-cell,
    .table-head {
        display: table-cell;
        /*padding:1em;*/
        /*border:#f0f0f0 1px solid;*/
    }
    
    .table-head {
        font-weight: bold;
    }
    /* How to center the modal - JSFiddle | http://jsfiddle.net/rensdenobel/sRmLV/13/ */
    /*====================================================================================================
| ----------------------------- | Responcive Cases |----------------------------- |
 Bootstrap 3 Media Queries  | https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries 
====================================================================================================*/
    /* ----------------------------- | @media only screen and (min-width : 1199px) |----------------------------- */
    
    @media only screen and (min-width: 1199px) {
        #nav001 a.card_link,
        #nav002 a.card_link {
            position: relative;
            height: 75px;
            background: #FFF url(../images/ra_img/bat01.png);
            border: 4px solid #a0a16f;
            margin-right: -3px;
            font-family: 'Neirizi', Arial, Helvetica, sans-serif;
            color: #000;
            font-size: 45px;
            line-height: 90px;
            box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
        }
        #nav001 a.card_link img,
        #nav002 a.card_link img {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 20%;
            height: auto
        }
        #nav001 a.card_link:hover,
        #nav002 a.card_link:hover,
        #nav001 a.card_link.active,
        #nav002 a.card_link.active {
            height: 85px;
            margin-top: -10px;
            line-height: 85px;
            -webkit-transition: all 100ms ease-in;
            -moz-transition: all 100ms ease-in;
            -ms-transition: all 100ms ease-in;
            -o-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
            background: #a39d5e url(../images/ra_img/bat01.png);
        }
        #nav002 a.card_link {
            height: auto;
            min-height: 123px;
            font-size: 28px;
            line-height: 40px;
            padding: 15px;
            margin-top: -5px
        }
        #nav002 a.card_link img {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 20%;
            height: auto
        }
        #nav002 a.card_link:hover,
        #nav002 a.card_link.active {
            height: auto;
            margin-top: -5px;
            line-height: 40px;
            -webkit-transition: all 100ms ease-in;
            -moz-transition: all 100ms ease-in;
            -ms-transition: all 100ms ease-in;
            -o-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
        }
        #nav002 a.card_link span {
            display: inline-block;
            width: 100%
        }
        #nav003 a {
            width: 100%;
            height: 50px;
            clear: both;
            float: none;
            transform: rotate(270deg);
            transform-origin: right bottom 0;
            margin-top: 115px
        }
        #nav001 .z0,
        #nav002 .z0 {
            z-index: 0
        }
        #nav001 .z1,
        #nav002 .z1 {
            z-index: 1
        }
        #nav001 .z2,
        #nav002 .z2 {
            z-index: 2
        }
        #nav001 .z3,
        #nav002 .z3 {
            z-index: 3
        }
        #nav001 .z4,
        #nav002 .z4 {
            z-index: 4
        }
        #nav001 .z5,
        #nav002 .z5 {
            z-index: 5
        }
        #nav001 .z6,
        #nav002 .z6 {
            z-index: 6
        }
        #nav001 .z7,
        #nav002 .z7 {
            z-index: 7
        }
        #nav001 .z8,
        #nav002 .z8 {
            z-index: 8
        }
        #nav001 .z9,
        #nav002 .z9 {
            z-index: 9
        }
        #nav001 .z10,
        #nav002 .z10 {
            z-index: 10
        }
        #nav001 .z11,
        #nav002 .z11 {
            z-index: 11
        }
        #nav001 .z12,
        #nav002 .z12 {
            z-index: 12
        }
    }
    /* ----------------------------- | @media only screen and (max-width : 1199px) |----------------------------- */
    /* Large Devices, Wide Screens */
    
    @media only screen and (max-width: 1199px) {
        #nav001 a.card_link,
        #nav002 a.card_link {
            position: relative;
            height: 75px;
            background: #FFF url(../images/ra_img/bat01.png);
            border: 4px solid #a0a16f;
            margin-right: -3px;
            font-family: 'Neirizi', Arial, Helvetica, sans-serif;
            color: #000;
            font-size: 45px;
            line-height: 90px;
            box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
        }
        #nav001 a.card_link img,
        #nav002 a.card_link img {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 20%;
            height: auto
        }
        #nav001 a.card_link:hover,
        #nav002 a.card_link:hover,
        #nav001 a.card_link.active,
        #nav002 a.card_link.active {
            height: 85px;
            margin-top: -10px;
            line-height: 85px;
            -webkit-transition: all 100ms ease-in;
            -moz-transition: all 100ms ease-in;
            -ms-transition: all 100ms ease-in;
            -o-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
            background: #a39d5e url(../images/ra_img/bat01.png);
        }
        #nav002 a.card_link {
            height: auto;
            min-height: 123px;
            font-size: 26px;
            line-height: 28px;
            padding: 15px;
            margin-top: -5px
        }
        #nav002 a.card_link:hover,
        #nav002 a.card_link.active {
            height: auto;
            margin-top: -5px;
            line-height: 28px;
            -webkit-transition: all 100ms ease-in;
            -moz-transition: all 100ms ease-in;
            -ms-transition: all 100ms ease-in;
            -o-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
        }
        #nav002 a.card_link span {
            display: inline-block;
            width: 100%
        }
        #nav002 a.card_link.z6,
        #nav002 a.card_link.z9,
        #nav002 a.card_link.z10 {
            font-size: 28px
        }
        #nav002 a.card_link.z6 span,
        #nav002 a.card_link.z9 span,
        #nav002 a.card_link.z10 span {
            padding-top: 10px;
            padding-bottom: 10px
        }
        .main_scr .r2_m .screen_inner .screen_mosque {
            display: block;
            position: absolute;
            bottom: -5px;
            left: 10px;
            z-index: 8;
            width: 30%;
            height: auto
        }
        .main_scr .r2_m .screen_inner .screen_vid {
            width: 110%;
            position: absolute;
            top: -10px
        }
        .main_scr .r2_m .screen_inner .screen_intro a.go {
            left: 0px;
            right: calc(50% - 110px);
            top: 300px
        }
        .main_scr .r2_m .screen_inner .screen_data ol.bm {
            margin: 0;
            padding: 0
        }
        .main_scr .r2_m .screen_inner .screen_data ol.bm li {
            font-family: "Neirizi", arial, verdana, sans-serif;
            font-size: 18px;
            line-height: 200%;
            margin-bottom: 5px;
            list-style: none
        }
        .main_scr .r2_m .screen_inner .screen_data ol.bm li a {
            padding: 10px 5px;
            display: block;
            color: #000;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.42);
            text-decoration: none;
            cursor: pointer
        }
        .main_scr .r2_m .screen_inner .screen_data ol.bm li a:hover {
            color: #000;
            text-shadow: 1px 1px 1px #FFF;
            border-bottom: 1px dotted #3c5700;
        }
    }
    
    @media only screen and (min-width: 992px) {
        /* https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height | Different Tricks on How to Make Bootstrap Columns All the Same Height */
        .row.is-flex {
            display: flex;
            flex-wrap: wrap;
        }
        .row.is-flex>[class*='col-'] {
            display: flex;
            flex-direction: column;
        }
        /*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
        .row.is-flex {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .row.is-flex>[class*='col-'] {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
        .row.no-gutters {
            margin-right: 0;
            margin-left: 0;
        }
        .row.no-gutters>[class^="col-"],
        .row.no-gutters>[class*=" col-"] {
            padding-right: 0;
            padding-left: 0;
        }
        .author_div {
            position: relative;
        }
        .author_div p {
            display: inline-block;
            margin: 0;
            padding: 0;
            position: absolute;
            transform: rotate(-90deg);
            transform-origin: right top 0;
            width: 480px;
            height: 85px;
            top: 70px;
            left: -460px;
            text-align: center;
            color: #000;
            font-weight: bold;
            font-size: 13px;
            line-height: 180%
        }
        .author_div p a {
            color: #000
        }
        #nav003 a {
            width: 100%;
            height: 50px;
            clear: both;
            float: none;
            transform: rotate(270deg);
            transform-origin: right bottom 0;
            margin-top: 115px
        }
        #nav001 .z0,
        #nav002 .z0 {
            z-index: 0
        }
        #nav001 .z1,
        #nav002 .z1 {
            z-index: 1
        }
        #nav001 .z2,
        #nav002 .z2 {
            z-index: 2
        }
        #nav001 .z3,
        #nav002 .z3 {
            z-index: 3
        }
        #nav001 .z4,
        #nav002 .z4 {
            z-index: 4
        }
        #nav001 .z5,
        #nav002 .z5 {
            z-index: 5
        }
        #nav001 .z6,
        #nav002 .z6 {
            z-index: 6
        }
        #nav001 .z7,
        #nav002 .z7 {
            z-index: 7
        }
        #nav001 .z8,
        #nav002 .z8 {
            z-index: 8
        }
        #nav001 .z9,
        #nav002 .z9 {
            z-index: 9
        }
        #nav001 .z10,
        #nav002 .z10 {
            z-index: 10
        }
        #nav001 .z11,
        #nav002 .z11 {
            z-index: 11
        }
        #nav001 .z12,
        #nav002 .z12 {
            z-index: 12
        }
    }
    /* ----------------------------- | @media only screen and (max-width : 991px) |----------------------------- */
    /* Medium Devices, Desktops */
    
    @media only screen and (max-width: 991px) {
        /* logo */
        .logo_area {
            text-align: center
        }
        .ra-logo {
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
        }
        .ra-logo img {
            width: 100%;
            max-width: 150px;
            height: auto;
        }
        .ra-controls {
            text-align: center
        }
        .ra-controls a.ra_fs,
        .ra-controls a.ra_close {
            display: none;
        }
        .ra-controls .ra_sound {
            display: block;
            width: 100%;
        }
        .mbMiniPlayer.mySkin.jp-state-no-volume.jp-state-playing {
            display: block !important;
        }
        /* .mbMiniPlayer.mySkin.jp-state-no-volume.jp-state-playing .mbMiniPlayer .playerTable {
            width: 100%!important;
        } */
        /* The select layout */
        nav.select {
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
            width: 100%;
        }
        nav.select select {
            display: inline-block;
            width: 100%;
            cursor: pointer;
            padding: 10px 15px;
            outline: 0;
            border: 0;
            border-radius: 0;
            background: #e6e6e6;
            color: #7b7b7b;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        nav.select select::-ms-expand {
            display: none;
        }
        nav.select select:hover,
        nav.select select:focus {
            color: #000;
            background: #ccc;
        }
        nav.select select:disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        nav.select .select__arrow {
            position: absolute;
            top: 16px;
            left: 15px;
            width: 0;
            height: 0;
            pointer-events: none;
            border-style: solid;
            border-width: 8px 5px 0 5px;
            border-color: #7b7b7b transparent transparent transparent;
        }
        nav.select select:hover~nav.select .select__arrow,
        nav.select select:focus~nav.select .select__arrow {
            border-top-color: #000;
        }
        nav.select select:disabled~nav.select .select__arrow {
            border-top-color: #ccc;
        }
        #nav001 ul,
        #nav002 ul {
            display: none;
        }
        #nav001 select,
        #nav002 select {
            display: inline-block;
        }
        #secondMenu {
            display: none
        }
        .Points {
            position: relative;
            bottom: 4px;
            text-align: center;
            width: 100%;
            display: inline-block
        }
        .Points a {
            display: inline-block;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin: 10px 5px;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
            background: rgb(255, 255, 255);
            /* Old browsers */
            background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
            /* IE6-9 */
        }
        .Points a.active {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f8b500+51,fbdf93+100;Orange+3D+%235 */
            background: rgb(252, 234, 187);
            /* Old browsers */
            background: -moz-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=1);
            /* IE6-9 */
        }
        .author_div p {
            display: inline-block;
            width: 100%;
            text-align: center;
            color: #000;
            font-weight: bold;
            font-size: 13px;
            line-height: 180%;
            ;
            height: auto;
            margin-bottom: 10px;
            margin-top: 10px
        }
        .author_div p a {
            color: #000
        }
        .topnav_mob {
            display: block;
            overflow: hidden;
            background-color: #384229;
            position: relative;
        }
        .topnav_mob #myLinks {
            display: none;
        }
        .topnav_mob a {
            color: white;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 14px;
            display: block;
            border-bottom: 1px solid rgba(225, 225, 225, 0.25);
        }
        .topnav_mob a.icon {
            background: #384229;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            max-height: 59px;
            border-bottom: none;
        }
        .topnav_mob .active {
            background-color: #a09c5c;
            color: #000;
        }
        .topnav_mob a:not(.icon):hover {
            background-color: #a09c5c;
            color: #000;
        }
        .topnav_mob .active.main,
        .topnav_mob .active.main:hover {
            background-color: #FFF;
            color: #000;
            /* padding-left: 90px; */
        }
        .topnav_mob .active img {
            display: inline-block;
            width: auto;
            height: 30px;
        }
        .main_scr .r2_m .screen_inner .screen_data {
            width: calc(100% - 20px);
            background-color: rgba(225, 225, 225, 0.55);
            border: 1px solid rgba(225, 225, 225, 1);
        }
    }
    /* ----------------------------- | @media only screen and (max-width : 768px) |----------------------------- */
    /* Small Devices, Tablets */
    
    @media only screen and (max-width: 768px) {
        .Points a {
            width: 16px;
            height: 16px;
        }
        .main_scr .r2_m .screen_outer {
            margin-bottom: 20px;
        }
        .main_scr .r2_m .screen_inner .screen_data p.ra_t01 {
            font-size: 24px;
        }
        .main_scr .r2_m .screen_inner .screen_data p.ra_t02 {
            font-size: 21px;
        }
        .main_scr .r2_m .screen_inner .screen_vid {
            display: none
        }
        .main_scr .r2_m .screen_inner {
            background: url(../video/sky.png) no-repeat;
            background-size: cover
        }
        .main_scr .r2_m .screen_inner .screen_data p.h1 {
            font-size: 21px;
            line-height: 200%
        }
        .main_scr .r2_m .screen_inner .screen_data p.big-title {
            font-size: 24px;
        }
        .main_scr .r2_m .screen_inner .screen_data p {
            font-size: 16px;
        }
        .main_scr .r2_m .screen_inner .screen_intro img.intro4 {
            right: -1%;
        }
    }
    /* ----------------------------- | @media only screen and (max-width : 767px) |----------------------------- */
    
    @media only screen and (max-width: 767px) {}
    /* ----------------------------- | @media only screen and (max-width : 600px) |----------------------------- */
    
    @media only screen and (max-width: 600px) {}
    /* ----------------------------- | @media only screen and (max-width : 550px) |----------------------------- */
    
    @media only screen and (max-width: 550px) {}
    /* ----------------------------- | @media only screen and (max-width : 524px) |----------------------------- */
    
    @media only screen and (max-width: 524px) {}
    /* ----------------------------- | @media only screen and (max-width : 480px) |----------------------------- */
    /* Extra Small Devices, Phones */
    
    @media only screen and (max-width: 480px) {
        .modal-content .mCSB_container {
            left: auto !important;
            padding-right: 5px;
        }
        .main_scr .r2_m {
            height: auto;
            padding-bottom: 0;
        }
        .main_scr .r2_m .screen_outer {
            width: 100%;
            margin: 0px auto;
            min-height: 0;
        }
        .main_scr .r2_m .screen_inner {
            margin: 5px;
        }
        .author_div {
            padding: 5px;
            width: calc(100% - 30px);
            margin: auto;
        }
        .author_div p {
            font-size: 11px;
        }
        .Points {
            padding-top: 10px;
            display: block;
            bottom: auto;
        }
        .main_scr .r2_m .screen_inner .screen_data {
            position: absolute;
            padding: 10px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            right: 5px;
            top: 5px;
        }
        .mCS-dir-rtl>.mCSB_inside>.mCSB_container {
            /* RTL direction/left-side scrollbar */
            margin-right: 0px;
            margin-left: 20px;
        }
    }
    /* ----------------------------- | @media only screen and (max-width : 390px) |----------------------------- */
    
    @media only screen and (max-width: 390px) {
        .big_row_01,
        .big_row_03,
        .big_row_02 .r2_r,
        .big_row_02 .r2_l {
            display: none;
        }
    }
    /* ----------------------------- | @media only screen and (max-width : 320px) |----------------------------- */
    /* Custom, iPhone Retina */
    
    @media only screen and (max-width: 360px) {}
    /*====================================================================================================
			| ----------------------------- | Super Codes |----------------------------- |
====================================================================================================*/
    
    .hidden {
        display: none;
        visibility: hidden
    }
    
    .invisible {
        visibility: hidden
    }
    
    .cleaner {
        clear: both
    }
    
    .justify {
        text-align: justify
    }
    
    .LTR {
        direction: ltr;
        display: inline-block
    }
    
    .modal-dialog {
        margin-top: 0;
        margin-bottom: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .modal.fade .modal-dialog {
        transform: translate(0, -100%);
    }
    
    .modal.in .modal-dialog {
        transform: translate(0, 0);
    }