/****** fonts *********/


@font-face {
    font-family: 'Ara-Hamah-1964-B';
    src: url('../fonts/AraHamah1964B-Bold.eot');
    src: url('../fonts/AraHamah1964B-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AraHamah1964B-Bold.woff2') format('woff2'),
        url('../fonts/AraHamah1964B-Bold.woff') format('woff'),
        url('../fonts/AraHamah1964B-Bold.ttf') format('truetype'),
        url('../fonts/AraHamah1964B-Bold.svg#AraHamah1964B-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Ara-Hamah-1964-R';
    src: url('../fonts/AraHamah1964R-Regular.eot');
    src: url('../fonts/AraHamah1964R-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AraHamah1964R-Regular.woff2') format('woff2'),
        url('../fonts/AraHamah1964R-Regular.woff') format('woff'),
        url('../fonts/AraHamah1964R-Regular.ttf') format('truetype'),
        url('../fonts/AraHamah1964R-Regular.svg#AraHamah1964R-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Ara-Hamah-Kilania';
    src: url('../fonts/AraHamahKilania-Regular.eot');
    src: url('../fonts/AraHamahKilania-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AraHamahKilania-Regular.woff2') format('woff2'),
        url('../fonts/AraHamahKilania-Regular.woff') format('woff'),
        url('../fonts/AraHamahKilania-Regular.ttf') format('truetype'),
        url('../fonts/AraHamahKilania-Regular.svg#AraHamahKilania-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Ara-Hamah-Sahet-AlAssi';
    src: url('../fonts/AraHamahSahetAlAssi-Regular.eot');
    src: url('../fonts/AraHamahSahetAlAssi-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AraHamahSahetAlAssi-Regular.woff2') format('woff2'),
        url('../fonts/AraHamahSahetAlAssi-Regular.woff') format('woff'),
        url('../fonts/AraHamahSahetAlAssi-Regular.ttf') format('truetype'),
        url('../fonts/AraHamahSahetAlAssi-Regular.svg#AraHamahSahetAlAssi-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BahijTheSansArabic-Bold';
    src: url('../fonts/BahijTheSansArabic-Bold.svg#BahijTheSansArabic-Bold') format('svg'),
    url('../fonts/BahijTheSansArabic-Bold.ttf') format('truetype'),
    url('../fonts/BahijTheSansArabic-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bahij_TheSansArabic-Bold';
    src: url('../fonts/Bahij_TheSansArabic-Bold.eot');
    src: url('../fonts/Bahij_TheSansArabic-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Bahij_TheSansArabic-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BahijTheSansArabic-Plain';
    src: url('../fonts/BahijTheSansArabic-Plain.svg#BahijTheSansArabic-Plain') format('svg'),
    url('../fonts/BahijTheSansArabic-Plain.ttf') format('truetype'),
    url('../fonts/BahijTheSansArabic-Plain.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bahij_TheSansArabic-Plain';
    src: url('../fonts/Bahij_TheSansArabic-Plain.eot');
    src: url('../fonts/Bahij_TheSansArabic-Plain.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Bahij_TheSansArabic-Plain.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}





@font-face {
    font-family: 'Ara-Hamah-1982';
    src: url('../fonts/AraHamah1982-Regular.eot');
    src: url('../fonts/AraHamah1982-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AraHamah1982-Regular.woff2') format('woff2'),
        url('../fonts/AraHamah1982-Regular.woff') format('woff'),
        url('../fonts/AraHamah1982-Regular.ttf') format('truetype'),
        url('../fonts/AraHamah1982-Regular.svg#AraHamah1982-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Ara-Hamah-AlFidaa';
    src: url('../fonts/AraHamahAlFidaa-Regular.eot');
    src: url('../fonts/AraHamahAlFidaa-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AraHamahAlFidaa-Regular.woff2') format('woff2'),
        url('../fonts/AraHamahAlFidaa-Regular.woff') format('woff'),
        url('../fonts/AraHamahAlFidaa-Regular.ttf') format('truetype'),
        url('../fonts/AraHamahAlFidaa-Regular.svg#AraHamahAlFidaa-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lucida';
    src: url('../fonts/LucidaSansUnicode.eot');
    src: url('../fonts/LucidaSansUnicode.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LucidaSansUnicode.woff2') format('woff2'),
        url('../fonts/LucidaSansUnicode.woff') format('woff'),
        url('../fonts/LucidaSansUnicode.ttf') format('truetype'),
        url('../fonts/LucidaSansUnicode.svg#LucidaSansUnicode') format('svg');
    font-weight: normal;
    font-style: normal;
}

/****** global style ***/

.loginBtn {
    box-sizing: border-box;
    position: relative;
    /* width: 13em;  - apply for fixed size */
    margin: 0.2em;
    padding: 5px 40px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 16px;
    color: #FFF;
}
.loginBtn:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
}
.loginBtn:focus {
    outline: none;
}
.loginBtn:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
/* Facebook */
.loginBtn--facebook {
    background-color: #4C69BA;
    background-image: linear-gradient(#4C69BA, #3B55A0);
    /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
    text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
    border-right: #364e92 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
    background-color: #5B7BD5;
    background-image: linear-gradient(#5B7BD5, #4864B1);
}
/* Google */
.loginBtn--google {
    /*font-family: "Roboto", Roboto, arial, sans-serif;*/
    background: #DD4B39;
}
.loginBtn--google:before {
    border-right: #BB3F30 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
    background: #E74B37;
}

.auth-box-msg{
    color: #F00;
}
.auth-box-msg:before {content:""; display: block; }

*{
    text-align: right;
}
body{
    background-color: #F3F4F4;
}
body.fixed{
    overflow: hidden;
}
.bg-white{
    background-color: #ffffff;
}
h3{
    font-family: "Ara-Hamah-1964-B";
    font-size: 28pt;
    color: #009DCC;
}
h3::after{
    content: '';
    width: 7px;
    height: 26px;
    background-color: #FFAD03;
    position: relative;
    float: right;
    margin-top: 8px;
    margin-left: 10px;
}
figcaption
{
    border-width: 2px;
    border-style: solid;
    border-color: #189dbf;
    background-color: #f3ac3a;
    text-align: center;
    font-weight: 400;
    color: #ffffff;
}

h1{
    font-family: "Ara-Hamah-1964-B";
    font-size: 28pt;
    color: #009DCC;
}

h1::after{
    content: '';
    width: 7px;
    height: 26px;
    background-color: #FFAD03;
    position: relative;
    float: right;
    margin-top: 8px;
    margin-left: 10px;
}
.black-h1{
    font-family: "Ara-Hamah-1964-B";
    font-size: 36pt;
    margin-top: 10px;
    margin-bottom: 20px;
    color: #000000;
}
.black-h1::after{
    content: '';
    width: 0px;
    height: 0px;
    background-color: transparent;
    position: relative;
    float: right;
    margin-top: 0px;
    margin-left: 0px;
    display: none;
}
h2{
    font-family: "Ara-Hamah-1964-B";
    font-size: 26pt;
    color: #189DBF;
}

.slick-dotted.slick-slider{
    margin-bottom: 22px;
}
.slick-dots{
    bottom: -22px;
}
.slick-dots li button::before{
    color: #ffffff;
}
.slick-dots li.slick-active button::before{
    color: #FFAD03;
}

/****** Header *********/
#header{
    border: none;
    position: relative;
    float: left;
    width: 100%;
}
.header-bar-container{
    position:relative;
    float:left;
    width:100%;
    height: 42px;
    background-color: #0099CC;
}
.header-bar-live-radio-container{
    position: relative;
    float: left;
    width: 110px;
    height: 100%;
    background-color: #FFAD03;
    font-family: "Ara-Hamah-1964-B";
    color: #ffffff;
    font-size: 14pt;
    padding-left: 16px;
    padding-top: 5px;
}
.header-bar-live-radio-container i{
    position: relative;
    float: right;
    font-size: 18pt;
    margin-right: 8px;
    margin-top: 2px;
    margin-left:7px;
}
.header-bar-live-radio-container:hover{
    color: #ffffff;
    text-decoration: none;
}
.header-bar-live-cam-container{
    position: relative;
    float: left;
    width: 110px;
    height: 100%;
    font-family: "Ara-Hamah-1964-R";
    color: #ffffff;
    font-size: 14pt;
    padding-left: 16px;
    padding-top: 5px;
}
.header-bar-live-cam-container:hover{
    color: #ffffff;
    text-decoration: none;
}
.header-bar-live-cam-container i{
    position: relative;
    float: right;
    font-size: 18pt;
    margin-right: 5px;
    margin-left: 10px;
    margin-top: 2px;
}
.header-bar-social{
    position: relative;
    float: right;
    height: 42px;
}
.header-bar-social a{
    color: #ffffff;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    transition: color 0.5s ease;
}
.header-bar-social i{

    font-size: 23pt;
    position: relative;
    float: left;
    margin: 5px;
}
.header-bar-social a:hover{
    color: #FFAD03;
}

.header-bar-search-box{
    position: relative;
    float: right;
    height: 42px;
}

.header-bar-search-box i{
    font-size: 18pt;
    position: relative;
    float: left;
    margin: 5px;
    margin-top: 8px;
    color: #ffffff;
}

#header-bar-search-input{
    position: relative;
    float: right;
    text-align: right;
    background: transparent;
    border: none;
    margin-top: 10px;
    margin-right: 11px;
    width: 43px;
    color: #ffffff;
    -webkit-transition: width 0.5s ease-out;
    -moz-transition: width 0.5s ease-out;
    -o-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}
#header-bar-search-input:focus{
    width: 110px;
}

#header-bar-search-input::placeholder {
    color: #ffffff;
    font-family: "Ara-Hamah-1964-R";
}
#header-bar-search-input:-ms-input-placeholder {
    color: #ffffff;
    font-family: "Ara-Hamah-1964-R";
}
#header-bar-search-input::-ms-input-placeholder {
    color: #ffffff;
    font-family: "Ara-Hamah-1964-R";
}

.header-bar-v-separator{
    background-color: #FFAD03;
    width: 3px;
    height: 26px;
    margin: 8px;
    position: relative;
    float: right;
}

.header-box-inscription-btn{
    position: relative;
    float: right;
    height: 100%;
    font-family: "Ara-Hamah-1964-R";
    color: #ffffff;
    font-size: 14pt;
    padding: 6px 10px;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
}
.header-box-inscription-btn:hover{
    color:#FFAD03;
}

.header-box-inscription-btn i{
    font-size: 23pt;
    position: relative;
    float: right;
    margin-left: 8px;
}

.header-box-inscription-btn span{
    position: relative;
    float: right;
}

.menu-bar-container{
    height: 82px;
    width: 100%;
    position: relative;
    float: left;
    background-color:#ffffff;
}

.logo{
    position: relative;
    float: right;
    margin-top: 13px;
}
.burger{
    width: 35px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
.burger span{
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #3C3D3D;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.burger span:nth-child(1){
    top:0px;
}
.burger span:nth-child(2){
    top:12px;
}
.burger span:nth-child(3){
    top:12px;
}
.burger span:nth-child(4){
    top:26px;
}
.burger.opened span:nth-child(1){
    top: 15px;
    width: 0%;
    left: 50%;
}
.burger.opened span:nth-child(2){
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.burger.opened span:nth-child(3){
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.burger.opened span:nth-child(4){
    top: 15px;
    width: 0%;
    left: 50%;
}
.menu-hamberger-btn{
    position: relative;
    float: right;
    margin-top: 27px;
    margin-right: 30px;
}
.menu-hamberger-btn:hover{
    text-decoration: none;
}
.menu-hamberger-btn i{
    color: #3C3D3D;
    font-size:30pt;
}
.menu-bar-table{
    width:CALC(100% - 190px);
    position: relative;
    float: left;
    margin-top: 23px;
    margin-left: 15px;
}
.menu-bar-table a{
    font-family: "Ara-Hamah-1964-R";
    color: #4D4D4D;
    font-size: 16pt;
    text-align: left;
    float: right;
    margin-right: 25px;
    padding: 0px;
}
.menu-bar-table a:hover{
    text-decoration: none;
}
.menu-bar-table .dropdown-menu{
    border: none;
    background-color: transparent;
    padding-bottom: 0px;
}
.menu-bar-table .dropdown-menu a{
    position: relative;
    float: right;
    text-align: right;
    padding-right: 10px;
    border-bottom: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    background-color: #ffffff;
    width: 100%;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}
.menu-bar-table .dropdown-menu a:nth-child(1){
    border-top: 1px solid #e2e2e2;
}
.menu-bar-table .dropdown-menu a:hover{
    width: 110%;
}
.menu2-bar-container{
    position: relative;
    float: left;
    display: table;
    width: 100%;
    height: 52px;
    background-color: #E8E9EA;
}

.menu2-bar-container ul{
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 12px;
}

.menu2-bar-container li{
    float: right;
    margin-left: 25px;
}

.menu2-bar-container a{
    font-family: "Ara-Hamah-1964-R";
    color: #6C8490;
    text-align: center;
    text-decoration: none;
    font-size: 14pt;
    position: relative;
    float: right;
    border-bottom:6px solid #E8E9EA;
    padding-bottom: 6px;
}

.menu2-bar-container a:hover, .menu2-bar-container .active{
    border-bottom:6px solid #FFAD03;
}

.dropdown-item:hover, .dropdown-item:focus{
    background-color: inherit;
    color: #4D4D4D;
}
.dropdown-menu{
    border-radius:0px;
}
.dropdown-toggle::after{
    float: left;
    margin-right: 0.255em;
    margin-top: 0.7em;
}


/****** hamburger menu *****/
.hamberger-menu{
    position: fixed;
    top: 124px;
    right: 0px;
    width: 1000px;
    bottom: 0px;
    z-index: 9999;
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -moz-transition: all .5s;
    direction: rtl;
}
.hamberger-menu.active{
    display:block;
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.2);
    -ms-box-shadow:5px 5px 10px 0 rgba(0,0,0,0.2);
    -o-box-shadow:5px 5px 10px 0 rgba(0,0,0,0.2);
    -moz-box-shadow:5px 5px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.2);
}
.hamberger-menu-backdrop{
    position: fixed;
    top: 124px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 9998;
    background-color: rgba(0,0,0,.1);
    display: none;
}
.hamberger-menu-backdrop.active{
    display: block;
    cursor: pointer;
}
.hamberger-menu-header{
    height: 40px;
    border: 1px solid #d7d7d7;
    border-collapse: collapse;
}
#header-bar-search-input-hamberger-menu{
    position: relative;
    float: right;
    height: 30px;
    margin-top: 4px;
    margin-right: 21px;
    width: 300px;
}
.hamberger-menu-header .icon-search{
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: -26px;
    font-size: 14pt;
}
.hamberger-menu-menu1{
    width: 100%;
    list-style-type: none;
    padding-right: 22px;
}
.hamberger-menu-menu1 .hamberger-menu-title{
    font-family: "Ara-Hamah-1964-B";
    color: #009DCC;
    font-size: 18pt;
}
.hamberger-menu-menu1 .hamberger-menu-title:hover{
    text-decoration: none;
}
.hamberger-menu-menu1 .hamberger-menu-title::before{
    content: '';
    width: 5px;
    height: 15px;
    background-color: #FFAD03;
    position: relative;
    float: right;
    margin-top: 11px;
    margin-left: 5px;
}
.hamberger-menu-item{
    font-family: "Ara-Hamah-1964-R";
    color: #4D4D4D;
    font-size: 15pt;
}
.hamberger-menu-item:hover{
    text-decoration: none;
}
/****** main-content *****/

#main-content{
    padding-top:25px;
    position: relative;
    float: left;
    width: 100%;
}
.head-banner{
    position: relative;
    float: left;
    width: 1000px;
    height: 300px;
    margin-bottom:24px;
}

.programs-carousel-container{
    background-color: #0590BB;
    height: 42px;
}
.programs-carousel{
    margin-left: 30px;
    margin-right: 30px;
}

.programs-carousel .slick-prev:before {
    content: "\e90f";
    font-family: 'diwan-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.programs-carousel .slick-next:before {
    content: "\e90b";
    font-family: 'diwan-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.carousel-program-title{
    font-family: "Ara-Hamah-Sahet-AlAssi";
    font-size:16pt;
    text-align: right;
    color: #ffffff;
    position: relative;
    float: right;
    margin-top: 3px;

}

.carouseel-program-time{
    font-family: "Ara-Hamah-1982";
    font-size: 14pt;
    text-align: right;
    color: #ffffff;
    padding: 5px 10px 3px 3px;
    background-color: #009DCC;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    position: relative;
    float: right;
    line-height: 1;
    margin: 7px;
}
.program-carousel-actual{
    background-color: #FFAD03;
}
.feed-item.juicer.image-post.juicer-ad{
	display: none;
}

.most-viewed-panel{
    background-color: #F3F4F4;
    padding: 7px 10px 10px 10px;
    margin-bottom: 12px;
    position: relative;
    float: left;
    width: 100%;
}
.most-viewed-panel-title{
    position: relative;
    float: left;
    width: 100%;
    font-family: "Ara-Hamah-1964-R";
    font-size: 11pt;
    color: #6C8490;
}
.most-viewed-panel-title:hover{
    text-decoration: none;
    color: #6C8490;
}
.most-viewed-panel-time{
    font-family: "Ara-Hamah-1964-R";
    font-size: 11pt;
    color: #CED0D2;
    position: relative;
    float: left;
    width: 100%;
}
.most-viewed-panel-time > i {
    position: relative;
    float: right;
    margin-top: 3px;
    margin-left: 6px;
}

.most-viewed-panel-time > i > .path1{
    color: #CED0D2;
}

.main-last-news {
    background-color:#009DCC;
    padding: 20px 20px 0px 20px;
    margin-top: 8px;
    margin-bottom: 20px;
}
.main-last-news h2{
    font-family: "Ara-Hamah-1964-B";
    color: #ffffff;
    font-size: 24pt;
    position: relative;
    float: right;
    width: 100%;
    margin-top: -18px;
    margin-bottom: 21px;
    margin-right: -15px;
}

.main-last-news .article-img{
    width: 100%;
    margin-bottom: 15px;
    position: absolute;
    top: 0px;
}
.main-last-news h2 img{
    width: 27px;
    margin-top: -15px;
}

.main-last-news h3{
    font-family: "Ara-Hamah-Kilania";
    color: #ffffff;
    font-size: 16pt;
    position: relative;
    float: right;
    width: 100%;
    padding-right: 10px;
    overflow: hidden;
    height: 55px;

}
.main-last-news h3::after{
    content: '';
    width: 0px;
    height: 0px;
    margin: 0px;
}
.main-last-news p{
    font-family: "Ara-Hamah-1982";
    font-size: 12pt;
    color: #ffffff;
    padding-right: 10px;
    line-height: 1.3;
    margin-top: 7px;
    position: relative;
    float: left;
    overflow: hidden;
    height: 104px;
}
.main-last-news a{
    font-family: "Ara-Hamah-1982";
    font-size: 15pt;
    color:#ffffff;
    border: 2px solid #ffffff;
    margin-right: 10px;
    padding: 5px 16px;
}
.main-last-news a:hover{
    text-decoration: none;
}
.main-last-news .tag{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #ffffff;
    font-family:"Ara-Hamah-Sahet-AlAssi";
    font-size:16pt;
    color: #009DCC;
    padding: 0px 16px;
}

.article-box {
    margin-bottom:15px;
}

.article-box h4{
    font-family: "Ara-Hamah-AlFidaa";
    font-size:14pt;
    color: #000000;
    margin-top: 15px;
    margin-bottom: 0px;
}

.article-box h4 a,.article-box h4 a:hover{
    color: #000000;
    text-decoration: none;
}

.article-box .timer span{
    font-family: "Ara-Hamah-1982";
    font-size:11pt;
    color: #48484A;
    margin: 0px 0px 10px 5px;
    position: relative;
    float: right;
}
.article-box .timer i{
    color: #FFAD03;
    position: relative;
    float: right;
    margin-top: 3px;
    margin-left: 5px;
}
.article-box p{
    font-family:"Ara-Hamah-Sahet-AlAssi";
    font-size: 12pt;
    color: #A8AAAD;
    margin-top: 10px;
    direction: rtl;
    height: 75px;
    overflow: hidden;
}

.article-box img{
    width: 100%;
}
.article-box .tag{
    position: absolute;
    top: 0px;
    font-family: "Ara-Hamah-Sahet-AlAssi";
    font-size: 16pt;
    color: #ffffff;
    padding: 0px 50px 0px 10px;
}

.show-more{
    font-family:"Ara-Hamah-Sahet-AlAssi";
    font-size: 12pt;
    color: #A8AAAD;
    width: 100%;
    text-align: center;
    position: relative;
    float: left;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom:15px;
}
.show-more:hover{
    text-decoration: none;
    color: #A8AAAD;
}

.show-more i{
    color: #FFAD03;
    margin-left: 5px;
    margin-bottom:15px;
}

.video-section{
    background-color: #189DBF;
}
.video-section h2{
    font-family:"Ara-Hamah-1964-B";
    font-size: 20pt;
    color: #ffffff;
    padding: 15px 0px;
}

.video-section h2 i{
    position: relative;
    float: right;
    margin-top: 2px;
    margin-left: 7px;
    color: #FFAD03;
}

.video-listbox-home{
    background-color: #1990AF;
    margin-bottom: 10px;
    padding: 10px;
}

.video-listbox-home .video-img{
    width: 100%;
}
.video-listbox-home .play-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
}

.video-listbox-home h4{
    font-family: "Ara-Hamah-Kilania";
    font-size:14pt;
    margin-bottom: 10px;
    color: #ffffff;
    height: 38px;
}
.video-listbox-home h4 a,.video-listbox-home h4 a:hover{
    color:#ffffff;
    text-decoration: none;
}
.video-listbox-home span{
    font-family:"Ara-Hamah-Sahet-AlAssi";
    font-size: 12pt;
    color: rgba(255,255,255,0.6);
}

.video-listbox-home span i{
    position: relative;
    float: right;
    margin-top: 7px;
    margin-left: 8px;
    color:#ffffff;
}

.video-box-big-home{
    background-color: #1990AF;
    height: 406px;
}
.video-box-big-home img{
    width:100%;
}
.video-box-big-home .play-btn{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -28px;
    margin-top: -28px;
    width: 56px;
}

.video-box-big-home h4{
    font-family: "Ara-Hamah-Kilania";
    font-size:18pt;
    margin-bottom: 10px;
    color: #ffffff;
}
.video-box-big-home h4 a,.video-box-big-home h4 a:hover{
    color: #ffffff;
    text-decoration: none;
}

.video-box-big-home span{
    font-family:"Ara-Hamah-Sahet-AlAssi";
    font-size: 15pt;
    color: rgba(255,255,255,0.6);
}

.video-box-big-home span i{
    position: relative;
    float: right;
    margin-top: 7px;
    margin-left: 8px;
    color:#ffffff;
}

.video-section .show-more{
    color: #ffffff;
}

.programs-section-home .container{
    border-bottom: 10px solid #189DBF;
}
.programs-section-home h2{
    font-family:"Ara-Hamah-1964-B";
    font-size: 20pt;
    color: #009DCC;
    padding: 15px 0px;
}

.program-listbox{
    margin-bottom: 30px;
}

.program-listbox img{
    width: 100%;
}

.program-listbox .title{
    font-family:"Ara-Hamah-1964-B";
    font-size: 15pt;
    color: #000000;
}
.program-listbox .title a,.program-listbox .title a:hover{
    color: #000000;
    text-decoration: none;
}

.program-listbox .summary{
    font-family:"Ara-Hamah-Sahet-AlAssi";
    font-size:13pt;
    color:#8A8B86;
}

.program-listbox .program-animator{
    font-family:"Ara-Hamah-Sahet-AlAssi";
    font-size:11pt;
    color:#FFAD03;
}

.program-title{
    font-family: 'Ara-Hamah-1964-B';
    color: #189DBF;
    font-size: 25pt;
    margin-bottom: 0px;
}
.program-title::after{
    content: '';
    width: 7px;
    height: 55px;
    background-color: #FFAD03;
    position: relative;
    float: right;
    margin-top: 8px;
    margin-left: 20px;
}
.program-subtitle{
    font-family: 'Ara-Hamah-1964-R';
    text-align: right;
    margin-right: 15px;
    color: #A5A7AA;
    font-size: 16pt;
    direction: rtl;

}
.program-subtitle-animator{
    font-family: 'Ara-Hamah-1964-B';
    color: #000000;
}

.program-social-links{
    position: relative;
    float: left;
    width: 100%;
    margin-top: -50px;
}

.program-hashtag-box{
    font-family: 'Ara-Hamah-1964-R';
    background-color: #FFAD03;
    padding: 25px;
    color: #ffffff;
    text-align: center;
    margin-top: 30px;

}
.program-hashtag-box div{
    text-align: center;
    font-size: 13pt;
    margin-top: 15px;
}
.program-hashtag-box .hashtag-icon{
    font-size: 20pt;
    padding: 16px 18px 9px 15px;
    color: #5D5D5D;
    background: #ffffff;
    border-radius: 50%;
}
.program-hashtag-box .hashtag{
    color:#805800;
    margin-top: 0px;
    font-size: 22pt;
}

.program-description{
    font-family: 'Ara-Hamah-1964-R';
    text-align: right;
    margin-right: 15px;
    color: #5D5D5D;
    font-size: 13pt;
    line-height: 1.3;
}

.podcast-box{
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    float: left;
    width: 100%;
}
.podcast-box img {
    width: 100%;
}
.podcast-box .description{
    background-color: #189DBF;
    position: relative;
    float: left;
    width: 100%;
    padding: 5px 15px 15px 15px;
}
.podcast-box-title{
    color: #FFAD03;
    position: relative;
    float: left;
    width: 100%;
    font-family: 'Ara-Hamah-1964-B';
    font-size:22pt;
    line-height: 1;
    margin-bottom: 5px;
}
.podcast-left-box{
    position: relative;
    float: left;
    color: #ffffff;
    font-family: 'Ara-Hamah-1964-R';
    font-size: 12pt;
}
.podcast-right-box{
    position: relative;
    float: right;
    color: #ffffff;
    font-family: 'Ara-Hamah-1964-R';
    font-size: 12pt;
}

.podcast-filter select{
    font-family: 'Ara-Hamah-1964-R';
    font-size: 15pt;
    line-height: 1;
    color: #333333;
    border-color: #77787B;
    appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.select2-container--default .select2-selection--single{
    height: 40px;
    color: #333333;
    border-color: #77787B;
    font-family: 'Ara-Hamah-1964-R';
    font-size: 15pt;
    line-height: 1;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:transparent;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    padding-right:30px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 1.7;
    color:#333333;
    font-family: 'Ara-Hamah-1964-R';
    font-size: 16pt;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b::after {
    content:"\e902";
    font-family: 'diwan-icons';
    color: #FFAD03;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 15px;
    height: 15px;
    pointer-events: none;
    box-sizing: border-box;
    font-size: 13pt;
    margin-top: -5px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:transparent;
    border-width: 5px 4px 0 4px;
}
.podcast-filter .icon-input input{
    border-color: #77787B;
    font-family: 'Ara-Hamah-1964-R';
    color: #231F20;
    font-size: 16pt;
    line-height: 1.5;
    height: 40px;
    padding-right: 35px;
}
.podcast-filter .icon-input input::placeholder{
    font-family: 'Ara-Hamah-1964-R';
    color: #231F20;
}
.podcast-filter .icon-input i{
    position: absolute;
    right: 23px;
    top: 11px;
    font-size: 16pt;
    color: #FFAD03;
}
.description i{
    margin-top: 2px;
    position: relative;
    float: right;
    font-size: 16pt;
    margin-left: 5px;
}

.bread-crumb{
    direction: rtl;
    padding-top: 10px;
}

.bread-crumb span,.bread-crumb a{
    font-family:"Ara-Hamah-1964-R";
    font-size:14pt;
    color:#A5A7AA;
    position: relative;
    float: right;

}

.bread-crumb a:hover{
    text-decoration:none;
}
.bread-crumb i{
    color:#FFAD03;
    font-size: 8pt;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    float: right;
    margin-top: 9px;
}
.category-tag{
    font-family: "Ara-Hamah-Sahet-AlAssi";
    font-size: 28pt;
    color: #ffffff;
    position: relative;
    float: right;
    line-height: 1;
    padding: 2px 20px;
    margin-top: 15px;
    border: 1px solid rgba(0,0,0,0.25);
}
.category-tag.orange-tag{

    background-color: #FFAD03;
}

.social-share{
    position: relative;
    float: left;
    color: #5D5D5D;
    font-size: 25pt;
    margin-right: 10px;
    line-height: 1;
}
.social-share:hover,.social-share:active{
    color: #5D5D5D;
    text-decoration: none;
}
.social-share-separator{
    position: relative;
    float: left;
    height: 22px;
    width: 1px;
    background-color: #FFAD03;
    margin-right: 10px;
    margin-top: 5px;
}

.article-page h1{
    font-family: "Ara-Hamah-1964-B";
    font-size: 36pt;
    margin-top: 10px;
    margin-bottom: 20px;
    color: #000000;
}

.article-page h1::after{
    display:none;
}

.article-page .timer{
    position: relative;
    float: right;
}
.article-page .timer span{
    font-family: "Ara-Hamah-1982";
    font-size:17pt;
    color: #5D5D5D;
    margin: 0px 0px 10px 5px;
    position: relative;
    float: right;
}
.article-page .timer i{
    color: #5D5D5D;
    position: relative;
    float: right;
    margin-top: 6px;
    font-size: 15pt;
    margin-left: 5px;
}

.article-cover{
    margin-top: 15px;
    margin-bottom: 30px;
}
.article-page .article-summary{
    font-family: "Bahij_TheSansArabic-Bold";
    font-size:15pt;
    color: #000000;
    padding:0px 10px;
    border-right: 5px solid #DEDEDE;
    margin-bottom: 30px;
}

.article-page .video-summary{
    font-family: "Bahij_TheSansArabic-Bold";
    font-size:14pt;
    color: #000000;
    padding:0px 10px;
    margin-bottom: 30px;
}

.article-page .article-main-content{
    font-family: "Bahij_TheSansArabic-Plain";
    font-size:14pt;
    color: #000000;
}

.article-page .tags-title{
    font-family: "Ara-Hamah-1964-R";
    font-size:14pt;
    color: #FFAD03;
}
.article-page .tag-link{
    position: relative;
    float: right;
    border: 2px solid #189DBF;
    padding: 3px 12px;
    border-radius: 7px;
    line-height: 1;
    font-family: "Ara-Hamah-1964-R";
    font-size:17pt;
    color: #5D5D5D;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.article-page .tag-link:hover{
    text-decoration: none;
}

.side-bar-news{
    border: 2px solid #189DBF;
    padding: 3px 12px;
    font-family: "Ara-Hamah-1964-R";
    font-size:17pt;
    color: #5D5D5D;
    margin-top: 10px;
}
.side-bar-news a,.side-bar-news a:hover{
    color: #5D5D5D;
    text-decoration: none;
}

.ajax-load{
    display:none;
}

.adress-contact-box{
    width: 100%;
    padding: 15px;
    background-color: #FFAD03;
    position: relative;
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;
}

.adress-contact-box h2{
    font-family: "Ara-Hamah-1964-B";
    font-size: 28pt;
    color: #ffffff;
}
.adress-contact-box p{
    font-family: "Ara-Hamah-1964-R";
    font-size: 12pt;
    color: #231F20;
}

.social-contact-box{
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
    background-color: #189DBF;
    position: relative;
    float: left;
}
.contact-social{
    position: relative;
    float: right;

    font-size: 30pt;
    margin-left: 10px;
}
.contact-social a,.contact-social a:hover{
    color: #ffffff;
    text-decoration: none;
}

.social-contact-box h2{
    font-family: "Ara-Hamah-1964-B";
    font-size: 28pt;
    color: #ffffff;
}
.social-contact-box p{
    font-family: "Ara-Hamah-1964-R";
    font-size: 12pt;
    color: #ffffff;
}

#contact-form label{
    color:#231F20;
    font-family: "Ara-Hamah-1964-R";
    font-size: 14pt;
}

#contact-form input[type='text']{
    border-color: #77787B;
    border-radius: 5pt;
    height: 40px;
}

#contact-form textarea{
    border-color: #77787B;
    border-radius: 5pt;
    height: 340px;
}

#contact-form .form-check{
    display: block;
    position: relative;
    padding-right: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#contact-form .checkmark{
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #009DCC;
    cursor: pointer;
}

#contact-form .checkmark::after{
    content:"";
    position: absolute;
    display: none;
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#contact-form input[type='checkbox']:checked ~ .checkmark::after{
    display: block;
}

#contact-form input[type='checkbox']:checked ~ .checkmark{
    background-color:#009DCC;
}

#contact-form input[type='checkbox']{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

#contact-form input[type='submit']{
    background-color: #009DCC;
    border: 1px solid rgba(0,0,0,0.25);
    color: #ffffff;
    padding: 5px 34px;
    font-family: "Ara-Hamah-1964-R";
    font-size: 17pt;
    margin-top: 10px;
    margin-bottom: 30px;
    cursor: pointer;
}

#contact-form input[type='submit']:disabled,#contact-form input[type='submit'][disabled]{
    background-color: #79B5C8;
    cursor:not-allowed;
}
#contact-form-success{
    display:none;
}

.load-more-container{
    background-color: #C7C8CA;
    width: CALC(100% + 30px);
    position: relative;
    float: left;
    margin-left: -15px;
}

.load-more-container-white-bg{
    background-color: #ffffff;
    width: CALC(100% + 30px);
    position: relative;
    float: left;
    margin-left: -15px;
}

.loader-img{
    position: relative;
    float: left;
    left: 50%;
    margin-left: -15px;
}

.load-more-shadow{
    position: absolute;
    left: 50%;
    margin-left: -359px;
}
.load-more-container a,.load-more-container a:hover{
    color: #ffffff;
}
.load-more-container i{
    color: #ffffff;
}


/****** footer ******/
#footer{
    width: 100%;
    border: none;
    position: relative;
    float: left;
    width: 100%;
    padding-top: 40px;
}

#footer h4{
    font-family: "Ara-Hamah-Kilania";
    font-size: 20pt;
    color: #FFAD03;
    text-align: right;
    margin-bottom:15px;
}

#footer ul{
    list-style-type: none;
    text-align: right;
    padding: 0px;
}
#footer li{
    margin: 5px 0px;
}
#footer li a{
    color:#8A8C8E;
    text-decoration: none;
    font-family: "Ara-Hamah-Kilania";
    font-size: 14pt;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
}
#footer li a:hover{
    color: #FFAD03;
}
#footer p{
    text-align: right;
    color:#8A8C8E;
    text-decoration: none;
    font-family: "Ara-Hamah-Kilania";
    font-size: 14pt;
}

#footer i{
    font-size: 20pt;
    margin-left: 10px;
}
#footer a{
    color: #8A8C8E;
    text-decoration: none;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
}
#footer a:hover{
    color: #FFAD03;
}

.copyright-bar{
    position: relative;
    float: left;
    width: 100%;
    height: 54px;
    background-color:#ADAFB2;
}

.logo-piximind{
    position: relative;
    float: left;
    margin-top: 15px;
}
.logo-piximind img{
    width: 100px;
}
.copyright-text{
    text-align: right;
    position: relative;
    float: right;
    color: #ffffff;
    font-family: "Ara-Hamah-Kilania";
    font-size:16pt;
    margin-top: 13px;
}
/************* animator liste **************/
.animator-img-box{
    position: relative;
    float: left;
}
.animator-img{
    opacity: 1;
    display: block;
    width: 100%;
    transition: .5s ease;
    backface-visibility: hidden;
    border: 1px solid;
    border-color: #9B9DA0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.animator-box .overlay{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #FFAD03;
}
.animator-box .bottom-bar{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 8px;
    transition: .5s ease;
    background-color: #FFAD03;
    left:0;
}
.animator-box-name{
    margin-top: 5px;
    text-align: center;
}
.animator-box-name a{
    color: #189DBF;
    font-size: 20pt;
    text-decoration: none;
    font-family: 'Ara-Hamah-1964-B';
}
.animator-box:hover .bottom-bar {
    opacity: 0;
  }
.animator-box:hover .overlay {
    opacity: 0.9;
  }
.animator-plus{
    top: -25%;
    margin-top: -30px;
    text-align: center;
    opacity: 1;
    position: relative;
    transition: all .5s;
}
.animator-box:hover .animator-plus{
    top:50%;
}
.animator-plus a{
    font-size: 35pt;
    color: #ffffff;
    margin-top: 25%;
    text-align: center;
    opacity: 1;
    text-decoration: none;
}
.animator-name{
    font-family: 'Ara-Hamah-1964-B';
    color: #189DBF;
    font-size: 25pt;
    margin-bottom: 0px;
}
.animator-name a{
    font-family: 'Ara-Hamah-1964-B';
    text-align: center;
    color: #189DBF;
    font-size: 25pt;
    text-decoration: none;
}
.animator-description{
    font-family: 'Ara-Hamah-1964-R';
    text-align: right;
    margin-top:-10px;
    color: #5D5D5D;
    font-size: 14pt;
}

.animator-subtitle{
    font-family: 'Ara-Hamah-1964-R';
    text-align: right;
    margin-right: 15px;
    color: #5D5D5D;
    font-size: 14pt;
}


.animator-box .animator-description{
    text-align: center;
    margin-top: 5px;
}

.animator-box .animator-description span{
    font-family: 'Ara-Hamah-1964-R';
    font-size: 15pt;
    color: #5D5D5D;
}
.animator-box .animator-description span i{
    position: absolute;
    color: #FFAD03;
    font-size: 19pt;
    margin-left: 8px;
}

/************* animator details ***************/
.audio-player{
    background-color:#188CAB;
    position: inherit;
    height: 36px;
}
.audio-player i{
    position: relative;
    float: left;
    font-size: 15pt;
    margin-left: 10px;
    margin-top: 8px;
    margin-bottom: 3px;
    color:#ffffff;
}

.animator-bottom-bar{
    position: absolute;
    margin-top: -8px;
    width:90.3%;
    height: 8px;
    transition: .5s ease;
    background-color: #FFAD03;
    margin-left: -0.32%;
}
.animator-box:hover .animator-bottom-bar {
    opacity: 0;
  }

.animator-title a{
    text-decoration: none;
    color: #000000;
}


.animator-name::after {
    content: '';
    width: 7px;
    height: 55px;
    background-color: #FFAD03;
    position: relative;
    float: right;
    margin-top: 8px;
    margin-left: 20px;
}


.animator-box:hover .animator-overlay {
    opacity: 0.9;
}
.animator-box:hover .animator-overlay1 {
    opacity: 0.9;
}
.animator-overlay{
    position: absolute;
    top: 0;
    width:90%;
    height: 204px;
    margin-left: -0.32%;
    opacity: 0;
    transition: .5s ease;
    background-color: #FFAD03;
}
.animator-overlay1{
    position: absolute;
    top: auto;
    width:90%;
    height: 204px;
    margin-left: -0.32%;
    opacity: 0;
    transition: .5s ease;
    background-color: #FFAD03;
}

/************* video **********/
.video-img-box .overlay{
    position: absolute;
    top: 0;
    left:15px;
    right: 15px;
    height: 100%;
    background-color: transparent;
    transition: all 0.5s;
}
.video-img-box .overlay:hover{
    background-color:rgba(0,0,0,0.5);
}
.video-img-box .overlay a{
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    -webkit-transition: width 0.5s, height 0.5s, margin-left 0.5s, margin-top 0.5s;
    transition: width 0.5s, height 0.5s, margin-left 0.5s, margin-top 0.5s;
    border-radius: 50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color: #FFAD03;
}
.video-img-box .overlay:hover{
    background-color: rgba(0,0,0,.5);
}
.video-img-box .overlay:hover a{
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
}
.video-play-btn img{
    width: 27px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -18px;
}
.youtube-video{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
}
.youtube-video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/************* gallery ************/
.gallery-box {
    margin-bottom:15px;
}

.gallery-box h4{
    font-family: "Ara-Hamah-1964-R";
    font-size:16pt;
    color: #000000;
    margin-bottom: 0px;
}

.gallery-box h4 a,.article-box h4 a:hover{
    color: #000000;
    text-decoration: none;
}

.gallery-box .timer span{
    font-family: "Ara-Hamah-1982";
    font-size:14pt;
    color: #9B9696;
    margin-right: 10px;
}
.gallery-box .timer i{
    color: #FFAD03;
    position: relative;
    float: right;
    margin-top: 7px;
}
.gallery-img-box img{
    width: 100%;
}
.gallery-img-box .overlay{
    position: absolute;
    top: 0;
    left:15px;
    right: 15px;
    height: 100%;
    background-color: transparent;
    transition: all 0.5s;
}
.gallery-img-box .overlay:hover{
    background-color:rgba(0,0,0,0.5);
}
.gallery-img-box .overlay a{
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    -webkit-transition: width 0.5s, height 0.5s, margin-left 0.5s, margin-top 0.5s;
    transition: width 0.5s, height 0.5s, margin-left 0.5s, margin-top 0.5s;
    border-radius: 50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color: rgba(255,173,3,0.7);
}
.gallery-img-box i{
    color: #ffffff;
    position: absolute;
    font-size: 46px;
    top: 50%;
    margin-top: -23px;
    left: 50%;
    margin-left: -23px;
}
.gallery-img-box .overlay:hover{
    background-color: rgba(0,0,0,.5);
}
.gallery-img-box .overlay:hover a{
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
}
/************* page ***************/
.page-content{
    font-family: "Ara-Hamah-1964-R";
    font-size: 17pt;
    color: #000000;
}

/************* popup ***************/
.popup-body{
    background-image: url("../images/popup-bg.jpg");
    padding-top: 20px;
}
.popup-body .container-fluid{
    padding-left: 30px;
    padding-right: 30px;
}

.popup-body h1{
    font-family: "Ara-Hamah-1964-B";
    font-size: 26pt;
    color: #ffffff;
}
.popup-body h1::after{
    width: 0px;
    margin: 0px;
}
.popup-body h1 i{
    color: #189DBF;
    position: relative;
    float: right;
    margin-left: 15px;
    margin-top: 5px;
}
.popup-body .studio-badge{
    position: relative;
    float: left;
    border: 1px solid #ffffff;
    font-family: "Ara-Hamah-1964-B";
    font-size: 26pt;
    color: #ffffff;
    padding: 6px 10px 3px 10px;
}
.popup-body .studio-badge:hover{
    text-decoration: none;
}
.popup-body .studio-badge i{
    color: #FFAD03;
    position: relative;
    float: right;
    margin-left: 15px;
    margin-top: 5px;
}
.popup-body h3{
    margin-top: 15px;
    margin-bottom: 0px;
    color: #ffffff;
}
.popup-body h3::after{
    background-color: #009DCC;
}

/*************** kids ***********/
.kids-body{
    background-color: #189DBF;
    background-image: url("../images/kids-bg.jpg");
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
}
.bg-kids{
    background-color: #ffffff;
    background-image: url("../images/kids-bottom-bg.jpg");
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 300px;
}
.kids-body #footer {
background-color: #ffffff;
margin-top: 30px;
}
.kids-body .copyright-bar{
    background-color: #189DBF;
}
.kids-body h1{
    margin-top: 20px;
    font-size: 19pt;
}
.kids-body h1::after{
    content:'';
    background-color: transparent;
    background-image: url("../images/papillon.png");
    width: 41px;
    height: 43px;
    margin-top: -4px;
}
.kids-body h2{
    font-family: "Ara-Hamah-1964-B";
    font-size: 28pt;
    color: #009DCC;
}
.kids-body h2::after{
        content: '';
        width: 7px;
        height: 26px;
        background-color: #FFAD03;
        position: relative;
        float: right;
        margin-top: 8px;
        margin-left: 10px;
}
.kids-story-box{
    margin-bottom: 15px;
}
.kids-story-box img{
    width: 100%;
}
.kids-story-box h4{
    font-family: "Ara-Hamah-AlFidaa";
    font-size: 14pt;
    color: #000000;
    margin-bottom: 0px;
}
.kids-story-box h4 a,.kids-story-box h4 a:hover{
    color: #000000;
    text-decoration: none;
}
.kids-story-box .overlay{
    position: absolute;
    bottom: 0px;
    left: 15px;
    width: calc(100% - 30px);
    height: 0%;
    background-color: rgba(0,0,0,.7);
    overflow: hidden;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}
.kids-story-box .overlay p{
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: 0px;
    color: #ffffff;
    text-align: right;
    padding: 0px 10px;
    font-family: 'Ara-Hamah-1964-R';
    font-size: 11pt;
}
.kids-story-box:hover .overlay{
    height: 100%;
}
.kids-lightbox-backdrop{
    background-color: rgba(25,157,191,0.7);
    position: fixed;
    top:0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: none;
}
.kids-lightbox-backdrop.active{
    display: block;
}
.kids-lightbox{
    padding: 30px;
    width: 1000px;
    position: fixed;
    height: 500px;
    top: 50%;
    background-color: #ffffff;
    left: 50%;
    display: none;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.kids-lightbox.active{
    display: block;
}
.kids-close{
    background-color: #FFAD03;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    position: absolute;
    top: -14px;
    right: -20px;
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    padding: 8px;
}
.kids-close:hover{
    text-decoration: none;
}
.kids-close i{
    color: #ffffff;
    font-size: 25pt;
}
.kids-lightbox-backdrop img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -65px;
    margin-top: -20px;
}
.kids-lightbox .social-container,.kids-body .social-container{
    position: relative;
    float: left;
    margin-top: -45px;
}

/*** ticker news *****/
.tickercontainer img{
    width: 140px;
}

.breaking-news-ticker-close,.breaking-news-ticker-close:hover{
    color: #ffffff;
    font-size: 20pt;
    position: absolute;
    right: 10px;
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    text-decoration: none;
    z-index: 999;
    top: 4px;
}


.gallery-slider-viewer img{
    width: 100%;
}
.slider-prev{
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 10px;
    left: 20px;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 12pt;
}
.slider-loop{
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 10px;
    left: 55px;
    border: 1px solid #ffffff;
    color: #FFAD03;
    font-size: 12pt;
}

.slider-next{
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 10px;
    left: 90px;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 12pt;
}
.slider-prev i,.slider-loop i,.slider-next i{
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    text-align: center;
    line-height: 1.6;
    color: #fff;
}
.slider-next i{
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.gallery-slider-viewer .img-container {
    background-color: #3c3d3f;
}
.gallery-backdrop{
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    background-color: rgba(255,173,3,0.7);
}
.gallery-slider-item:hover .gallery-backdrop{
    top: 0px;
}
.gallery-backdrop i{
    font-size: 30pt;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
.marchi-container h4.head-title{
    position: relative;
    font-size: 22pt;
    font-family: "Ara-Hamah-1964-R";
    margin-bottom: 30px;
 }

 .marchi-container h4.head-title::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    width: 19%;
    margin: 0 auto;
    height: 5px;
    background: #FFAD03;
 }

 .marchi-body #main-content{
    background-color: #d8c99e;
    background-image: url("../images/marchi-bg.jpg");
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
 }

 .marchi-container p.intro{
    max-width: 676px;
    margin-bottom: 3.125rem;
    font-family: "Ara-Hamah-AlFidaa";
    font-size: 16pt;
 }
 .marchi-container .category-list{
    padding-bottom: 84px;
 }

 .marchi-container .category-list .item a{
    display: block;
    color: #FFAD03;
 }

 .marchi-container h6{
    margin-top: 22px;
    color: #212529;
    font-family: "Ara-Hamah-AlFidaa";
    font-size: 16pt;
 }

 .marchi-product .marchi-jumbotron h4.head-title{
    font-family: "Ara-Hamah-1964-B";
    font-weight: bold;
    color: #009DCC;
    font-size: 30pt;
 }

 .marchi-product .top-header h6{
    font-family: 'Ara-Hamah-1964-R';
    text-align: left;
    margin-top: 14px;
 }

 .marchi-product .top-header h6 i{
    font-size: 18px;
    color: #FFAD03;
    vertical-align: -3px;
    margin-left: 5px;
 }

 .marchi-product .item h6{
    font-family: "Ara-Hamah-1964-B";
    font-size: 22pt;
    color: #009DCC;
    margin-top: 6px;
 }
 .marchi-product .item .price-range, .marchi-product .price-state, .marchi-product #ModChartLabel{
    font-family: 'Ara-Hamah-AlFidaa';
    font-size: 14pt;
    color: #212529;
 }
 .marchi-product .price-state i{
    vertical-align: -4px;
    margin-left: 5px;
 }
 .marchi-product .price-state.up, .modal-state-price.up, .modal-max-price{
    color: #CD003B;
 }
 .marchi-product .price-state.down, .modal-state-price.down, .modal-min-price{
    color: #508E00;
 }
 .marchi-product .price-state.stable, .modal-state-price.stable{
    color: #189DBF;
 }

 .marchi-product #ModChartLabel{
    position: absolute;
    top: 9px;
    margin-top: 0px;
    right: 38px;
    color: #fbbd50;
    font-size: 20pt;
 }

 /*helper*/
 .rtl-wrp {
    direction: rtl !important;
 }

 .marchi-body .product-list .item a:hover{
    text-decoration: none;
 }

  .main-last-news .main-last-news-img-link{
    border: none;
    padding: 0px;
  }
  .article-main-content img{
    width:100%;
  }

  .timer{
    direction:ltr;
}

.fixed-height-last-items{
    height: 255px;
    overflow: hidden;
}

article h1{
    direction: rtl;
}


/* fr articles */
.article-box.lang-fr h4{
    text-align: left;
    font-family: "lucida";
    font-size: 12pt;
}

.article-box.lang-fr .timer i{
    float: left;
}

.article-box.lang-fr .timer span{
    float: left;
}
.article-box.lang-fr p{
    text-align: left;
    font-family: "Lucida";
    font-size: 9pt;
}
.article-page.lang-fr h1{
    font-family: "lucida";
    font-size: 24pt;
    font-weight: 600;
    text-align: left;
}

.article-page.lang-fr .article-summary{
    font-family: "Bahij_TheSansArabic-Bold";
    font-size: 12pt;
    font-weight: 600;
    text-align: left;
    border-left: 5px solid #DEDEDE;
    border-right: none;
}

.article-page.lang-fr p{
    direction: ltr;
    text-align: left;
    font-family: "lucida";
    font-size: 12pt;
}

.side-bar-news.lang-fr{
    font-family: "lucida";
    font-size: 12pt;
}

.article-page.lang-fr .program-subtitle{
    font-family: 'Ara-Hamah-1964-R';
    text-align: right;
    margin-right: 15px;
    color: #A5A7AA;
    font-size: 16pt;
    direction: rtl;
}



.adslot_1 {
    width: 320px; height: 100px;
}
@media(min-width: 500px) {
    .adslot_1 {
        width: 468px; height: 60px;
    }
}
@media(min-width: 800px) {
    .adslot_1 {
        width: 728px; height: 90px;
    }
}
#check_all, #uncheck_all{
    color:white !important;
}
.card-footer{
    text-align: left;
    background: none;
    border: none;
}
.category-modal-table{
    display: table
}
.category-modal-table td{
    padding:0.6rem;
}




#mainContainer {
    position: relative;
    width: 640px;
    height: 360px;
}

#content, #adContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 640px;
    height: 360px;
}

#contentElement {
    width: 640px;
    height: 360px;
    overflow: hidden;
}


:root {
    --navHeight: 70px;
    --sage: #D2CCA1;
    --paleSpringBud: #DEDABA;
    --goldCrayola: #E5C687;
    --richBlackForeground: #0F1A20;
    --white: #f8f8f8;
    --black: #222;
    --msuGreen: #2D4739;
    --gray: #eee;
    --whiteGrey: #F3F4F4;
    --secondaryWhite: #189DBF;
    --blockWhite: #009DCC;
    --darkGrey: #18191A;
    --secondaryDark: #242526;
    --blockDark: #242526;
    --titleDark: #E4E6EB;
    --titleWhite: #E4E6EB;
    --secondarySmallDark: #B0B3B8;
    --secondarySmallWhite: #48484A;
    --BasicDarkWhite: #1C8DA9;
    /*--BasicDarkBlack: #18191A;*/
    /*--LightDark:;*/
    --LightWhite:#000000;
    --borderColorWhite:#EEEFEF;
    --borderColorBlack:#3E4042;
    --lowDark: #3A3B3C;
    --lowWhite: #fff;
    --secondaryTextWhite:#105161 ;
    --paragraphWhite: #525354;
    --smallDark: #5D5D5D;
    --contentColorDark: #E4E6DF;
    --iconColorDark: #B8BBBF;
    --orange: #FFAD03;
    --DarkGrey: #7b7d7d;
    --blueIce: #188CAB;
    --blueLight: #1DAACC;
    --LightenedGrey: #545454;
    --moreLignetedGrey: #e6e6e6e6;
    --WhiteBlue: #007bff;
    --DarkBlue: #4599ff;
    --tooLightWhite: rgba(0, 0, 0, 0.03);
}
.light-theme {
    --themeDropDownBg: var(--goldCrayola);
    --themeIconBorderColor: var(--sage);
    --navBg: var(--secondaryWhite);
    --navLinkHoverBg: var(--paleSpringBud);
    --mainBg: var(--whiteGrey);
    --fontColor: var(--black);
    --blockColor: var(--blockWhite);
    --titleColor: var(--titleWhite);
    --secondaryText: var(--secondarySmallWhite);
    --hambergerBg: var(--BasicDarkWhite);
    --HambergerTitleColor: var(--LightWhite);
    --LineColor: var(--borderColorWhite);
    --inputBg: var(--lowWhite);
    --secondaryTitle:var(--secondaryTextWhite);
    --articleBox: var(--lowWhite);
    --articleTitle: var(--LightWhite);
    --articleBoxP: var(--paragraphWhite);
    --HambergerMenuColor: var(--lowWhite);
    --articleBg: var(--lowWhite);
    --articleTitlePage: var(--LightWhite);
    --articleTime: var(--smallDark);
    --articleContentColor: var(--LightWhite);
    --articleAuthor: var(--LightWhite);
    --socialIcons: var(--smallDark);
    --articleKeywords: var(--secondaryWhite);
    --mostVisited: var(--secondaryTextWhite);
    --keywordWord: var(--orange);
    --mostVisitedIcon: var(--orange);
    --articleIcon: var(--orange);
    --animatorBox: var(--lowWhite);
    --animatorName: var(--LightWhite);
    --animatorRole: var(--smallDark);
    --HeaderTitleColor:var(--blockWhite);
    --audioPlayerColor: var(--blueIce);
    --audioPlayerLiveColor: var(--orange);
    --podcastColor: var(--lowWhite);
    --programAnimator: var(--lowWhite);
    --filterIcon: var(--secondaryWhite);
    --filterBg: var(--lowWhite);
    --btnBg: var(--secondaryDark);
    --placeholderColor: var(--LightenedGrey);
    --menuIcons: var(--LightenedGrey);
    --teamMainBg: var(--moreLignetedGrey);
    --inputColor: var(--secondaryTitle);
    --searchKeyword: var(--LightWhite);
    --secondMenuBg: var(--lowWhite);
    --secondMenuColor: var(--secondaryText);
    --mpName: var(--blueIce);
    --blue-link: var(--WhiteBlue);
    --podcastBg: var(--lowWhite);
    --cardBg: var(--lowWhite);
    --cardHeader: var(--tooLightWhite);
    --cardTextColor:var(--LightWhite);
}

.dark-theme {
    --themeDropDownBg: var(--msuGreen);
    --themeIconBorderColor: var(--richBlackForeground);
    --navBg: var(--secondaryDark);
    --navLinkHoverBg: var(--msuGreen);
    --mainBg: var(--darkGrey);
    --fontColor: var(--white);
    --blockColor: var(--blockDark);
    --HambergerMenuColor: var(--blockDark);
    --titleColor: var(--titleDark);
    --secondaryText: var(--secondarySmallDark);
    --hambergerBg: var(--darkGrey);
    --HambergerTitleColor: var(--titleDark);
    --LineColor: var(--borderColorBlack);
    --inputBg: var(--lowDark);
    --secondaryTitle:var(--secondaryText);
    --articleBox: var(--blockDark);
    --articleTitle: var(--titleDark);
    --articleBoxP: var(--titleDark);
    --articleBg: var(--secondaryDark);
    --articleTitlePage: var(--titleDark);
    --articleTime: var(--secondarySmallDark);
    --articleContentColor: var(--contentColorDark);
    --articleAuthor: var(--secondarySmallDark);
    --socialIcons: var(--iconColorDark);
    --articleKeywords: var(--borderColorBlack);
    --mostVisited: var(--secondaryText);
    --keywordWord: var(--secondarySmallDark);
    --mostVisitedIcon: var(--secondaryText);
    --articleIcon: var(--secondaryText);
    --animatorBox: var(--blockDark);
    --animatorName: var(--titleDark);
    --animatorRole: var(--titleDark);
    --HeaderTitleColor:var(--secondarySmallDark);
    --audioPlayerColor: var(--DarkGrey);
    --audioPlayerLiveColor: var(--DarkGrey);
    --podcastColor: var(--blockDark);
    --programAnimator: var(--blockDark);
    --filterIcon: var(--secondaryText);
    --filterBg: var(--blockDark);
    --btnBg: var(--secondaryDark);
    --placeholderColor: var(--titleDark);
    --menuIcons: var(--iconColorDark);
    --teamMainBg: var(--darkGrey);
    --inputColor: var(--lowWhite);
    --searchKeyword: var(--lowWhite);
    --secondMenuBg: var(--lowDark);
    --secondMenuColor: var(--lowWhite);
    --mpName: var(--DarkGrey);
    --blue-link: var(--DarkBlue);
    --podcastBg: var(--LightenedGrey);
    --cardBg: var(--blockDark);
    --cardHeader: var(--blockDark);
    --cardTextColor:var(--lowWhite);
}