@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Titillium+Web:300,400,600,600i');
@import url('https://fonts.googleapis.com/earlyaccess/droidarabickufi');

@font-face { 
    font-family: mixfm-ar-normal; 
    src: url('./mixfmfonts/helveticaneuelt-arabic-55-roman.ttf');
}

@font-face { 
    font-family: mixfm-ar-bold; 
    src: url('./mixfmfonts/HelveticaNeueLT-Arabic-75-Bold.ttf');
}

@font-face { 
    font-family: mixfm-en-normal; 
    src: url('./mixfmfonts/VAGRoundedStd-Light.otf');
}

@font-face { 
    font-family: mixfm-en-bold; 
    src: url('./mixfmfonts/VAGRoundedStd-Bold.otf');
} 


@media (min-width: 1200px){
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9{
    float: right;
}
}

* {
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 400;
    font-family: 'droid arabic kufi', 'Raleway', sans-serif;
}

html,
body {
    height: auto;
}

body {
    font-family: 'droid arabic kufi', 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #2b2f45;
    background: url('../../uploads/bg/yellowbg2.png');
    background-position: top;
    background-attachment: fixed;
    background-size: 2300px auto;
}

p {
    font-size: 13px;
    line-height: 1.7;
}

a {
    display: inline-block;
    text-decoration: none;
    outline: none;
    background: none;
    color: #ff8960;
}

a:focus {
    outline: 0 solid
}

a:hover {
    text-decoration: none
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    outline: none;
}
input:focus,
button:focus: {
    outline: none;
    box-shadow: 0 0 0 0 #ffffff;
}

/*=======================
2. Helper-class
========================*/

.fix {
    overflow: hidden;
}

.section-padding {
    padding: 2px 0;
}

.black-bg {
    background: rgb(255,230,0);
    background: linear-gradient(90deg, rgba(255,230,0,1) 0%, rgba(255,137,96,1) 49%, rgba(255,37,199,1) 100%);
}

.padding-down {
    padding-bottom: 60px;
}

.bttn {
    background-color: #ed009b;
    border-radius: 3px;
    color: #ffffff;
    padding: 10px 30px;
    text-transform: uppercase;
}

.bttn-lg {
    font-size: 20px;
    font-weight: 700;
    padding: 16px 50px;
}


/*======================
3. page-title
=======================*/

.page-title {
    color: #2b2f45;
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin: auto;
    text-align: center;
    width: 80%;
    padding-bottom: 20px
}

.page-title h2 {
    background: rgba(0, 0, 0, 0) no-repeat scroll center bottom;
    color: #2698f8; /*#221f1f;*/
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 50px;
    padding-bottom: 70px;
    text-transform: uppercase;
}

.page-title h2 i{
    color: #221f1f;
    color: #2698f8;
    margin-right: 10px;
}

.black-bg .page-title h2 {
    color: #ffffff;
}

.black-bg .page-title {
    color: #ffffff;
}

.home2 .page-title h2 {
    padding: 10px 0px 10px 0;
    display: inline-block;
    float: left;
    margin-bottom: 0;
    margin-right: 10px;
    /*text-shadow: 2px 1px 0px #333;*/
}

.home2 .page-title,
.home2 .news-area .fix {
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


/*======================
4. Header-style
========================*/

.top-area {
    height: auto;
    position: relative;
    width: 100%;
}

.pogoSlider-slide:before,
.mainmenu-area.stick:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    /*background: rgb(127, 0, 99) none repeat scroll 0 0; */
    /*background: #ff8960;*/
    background: rgb(255,230,0);
    background: linear-gradient(90deg, rgba(255,230,0,1) 0%, rgba(255,137,96,1) 49%, rgba(255,37,199,1) 100%);
    /* Old browsers */
    /* FF3.6-15 
    background: -webkit-linear-gradient(top, #d540f5 0%, #3125c9 64%);*/
    /* Chrome10-25,Safari5.1-6 
    background: linear-gradient(to bottom, #d540f5 0%, #3125c9 64%);*/
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d540f5', endColorstr='#3125c9', GradientType=0);*/
}

.mainmenu-area {
    top: -100px;
    -webkit-transition: 0.4s;
    transition: 0.4s
}

.mainmenu-area.stick {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 111;
    padding-bottom: 8px;
}
.mainmenu-area.stick .logo{
    display: none;
}

.mainmenu-area.stick .menu > ul > li a{
        color: #ffffff;
}
.mainmenu-area.stick .menu > ul li.active a, .mainmenu-area.stick .menu > ul > li a:hover, .mainmenu-area.stick .menu > ul > li a:focus{
    color: #ff0178;
    color: #000;
}

.mainmenu-area:after {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.mainmenu-area.stick:after {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    z-index: -1;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background: rgb(255,230,0);
    background: linear-gradient(90deg, rgba(255,230,0,1) 0%, rgba(255,137,96,1) 49%, rgba(255,37,199,1) 100%);
}

.header-top-area {
    /*background: rgba(255, 255, 255, 0.65) none repeat scroll 0 0;
    background: rgba(0, 0, 0, 0.65) none repeat scroll 0 0;*/
    background: transparent;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
    padding: 6px 0px;
}

.logo{
    width: 165px;
    float: right;
    margin-top: 10px;
}
.logo-area {
    padding: 5px 0;
    border-bottom: 2px solid #fff;
    background: transparent;
    height: 680px;
    background-repeat: no-repeat;
    background: url('../../uploads/bg/mixfm-bg.jpg');
    background-size: contain; 
    background-repeat: no-repeat;
}

.mobile-logo {
    display: none;
}
.sel-lan{ display: inline-block;  }

.sel-lan form {
    border: 1px solid #ffffff;
    border-radius: 2px;
    display: inline-block;
    min-width: 60px;
    position: relative;
}

.sel-lan form label {
    color: #ffffff;
    position: absolute;
    right: 10px;
    top: 2px;
    z-index: -1;
}

.sel-lan select {
    background: none;
    border: none;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
    width: 100%;
    z-index: 1;
    font-weight: 400;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.sel-lan select option {
    background-color: #ffffff;
    border: medium none;
}

.social-link {
    text-align: right;
    float: left;
}

.social-link a {
    color: #ffffff;
    display: inline-block;
    width: 41px;
    height: 50px;
    text-align: center;
    line-height: 2;
    font-size: 25px;
}

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

.social-link{ display: inline-block;  }
.social-link a:hover {
    color: #000;
}

.search-box input,
.search-box button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #b7b7b7;
}

.search-box input {
    width: 100%;
    padding: 2px;
    height: 100%;
    
}
.search-box input:focus {
    outline: none;
}
.search-box form {
    background-color: #ffffff;
    border-radius: 50px;
    display: inline-block;
    padding: 4px 15px;
    margin: 6px 0;
    position: relative;
    width: 300px;
    text-align: left;
    height: 35px;
}

.search-box button.search-bttn {
    position: absolute;
    right: -0px;
    top: 0;
    background: #ffffff;
    width: 35px;
    height: 100%;
    border-radius: 0 30px 30px 0;
    border-left: 1px solid #b7b7b7;
    color: #b7b7b7;
}
.search-box button.search-bttn:hover {
    background: #ed009b;
    color: #ffffff;
}
.header-text-area .pogoSlider {
    position: static;
}

.header-text-area .pogoSlider-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.pogoSlider-nav {
    display: none;
}

.display-table {
    display: table;
    width: 100%;
    height: 100%;
}

.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}

.header-text-area h2 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 46px;
    margin-bottom: 20px;
    padding-top: 80px;
}

.header-text-area {
    color: #ffffff;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 17px;
    width: 100%;
    height: 100%;
}

.header-text-area p {
    width: 60%;
    margin: auto;
    font-style: italic;
}

.header-text h2 span {
    background-color: #ed009b;
    box-shadow: 10px 0 0 0 rgba(255, 0, 120, 0.4), 20px 0 0 0 rgba(255, 0, 120, 0.3);
    padding: 0 10px;
    margin-right: 15px;
}

.scrolldown,
.scrolldown span {
    position: absolute;
    width: 20px;
    height: 40px;
    border: 2px solid #fff;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    bottom: 10px;
    border-radius: 20px;
    background: none;
    cursor: pointer;
    display: inline-block;
    z-index: 9;
}

.scrolldown span {
    width: 0;
    height: 10px;
    bottom: auto;
    top: 10px;
    -webkit-animation: spin 0.8s linear 0.6s infinite alternate;
    animation: spin 0.8s linear 0.6s infinite alternate;
}

@-webkit-keyframes spin {
    0% {
        top: 5px;
    }
    100% {
        top: 20px;
    }
}

@keyframes spin {
    0% {
        top: 5px;
    }
    100% {
        top: 20px;
    }
}


/*==================
5. News area
==================*/

.news-area a {
    width: 100%;
}

.single-news,
.single-blog,
.single-feature,
.event-photo,
.single-album {
    overflow: hidden;
    position: relative;
    width: 100%;
    border-radius: 5px;
    background: #000;
}

.blog-single .single-blog {
    border-radius: 0;
}

.single-blog img,
.single-news img,
.single-album img,
.single-feature img,
.event-photo img,
.video-thumb img {
    width: 100%;
}

.single-blog:hover img,
.single-news:hover img,
.single-album:hover img,
.single-feature:hover img,
.event-photo:hover img,
.video-thumb:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.single-news:after {
    background-color: #ed009b;
    border-radius: 5px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-transition: 0.3s;
    transition: 0.3s
}

.single-news:hover:after {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"
}

.single-news img {
    width: 100%;
    z-index: -1;
}

.news-details,
.event-details {
    bottom: 0;
    color: #ffffff;
    font-weight: 600;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
    z-index: 2
}

.news-details h3 {
    font-size: 30px;
    margin-bottom: 6px;
    text-transform: capitalize;
}


/*===================
6. Feature Area
====================*/

.feature-area .col-sm-6,
.album-area .col-sm-4,
.news-area .col-sm-6 {
    padding: 0 30px;
    margin-bottom: 20px;
}

.feature-area .row,
.album-area .row,
.news-area .row {
    margin: 0px 0px;
}
.row {
    margin: 0px 0px;
}

.feature-text {
    bottom: 0;
    color: #ffffff;
    display: block;
    height: auto;
    left: 0;
    margin: 0px;
    padding: 16px;
    width: 100%;
    border-bottom: 1px solid #fff;

    /*position: absolute;*/
}

.feature-text h3,
.event-details h2 {
    margin-bottom: 5px;
    text-transform: uppercase;
}

.feature-text h4 {
    font-style: italic;
    margin: 0;
    color: #7b7b7b;
}

.feature-social-link {
    height: auto;
    /*position: absolute;
    right: 0;
    top: 10px;*/
    padding-top: 5px;
    width: auto;
}


/*========================
7. Ablum Area
=========================*/

.single-album img,
.single-feature img {
    width: 100%;
}

.feature-social-link > a {
    color: #ffffff;
    display: inline-block;
    font-size: 20px;
    height: 40px;
    text-align: center;
    width: 40px;
}

.feature-social-link a:hover {
    color: #ff6900;
}

.album-text {
    bottom: 0;
    color: #ed009b;
    left: 0;
    padding-left: 16px;
    position: absolute;
    width: 100%;
}

.album-area .play-button {
    color: #ffffff;
    font-size: 30px;
    position: absolute;
    right: 15px;
    top: 5px;
}

.album-area .play-button:hover {
    color: #ed009b;
}

.album-text h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 5px;
}

.album-text span {
    float: right;
    margin-right: 15px;
}

.album-text span a {
    color: #ffffff;
    margin-left: 10px;
}

.album-text span a:hover {
    color: #ed009b;
}

.single-album a {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.single-album:hover a {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


/*===================
8. Event Area
====================*/

.event-details .location {
    margin-bottom: 5px;
    text-transform: capitalize;
}

.event-details .location i.fa {
    margin-right: 8px;
}

.single-event {
    overflow: hidden;
    margin-bottom: 60px;
}

.event-area .event-photo {
    float: left;
    width: 36%;
}

.event-area .event-ticket {
    float: left;
    margin-top: 64px;
    width: 64%;
}

.event-ticket a.bttn {
    border: 2px solid rgba(0, 0, 0, 0);
    float: right;
    margin-top: 25px;
}

.event-price h2 {
    color: #ff0078;
    font-size: 60px;
    font-weight: 600;
}

.event-area .event-price {
    float: left;
    margin-left: 190px;
    text-align: center;
}

.event-price h2 span {
    display: block;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
}

.event-area .single-event {
    border-bottom: 2px solid #dddddd;
    margin-bottom: 30px;
    overflow: hidden;
    padding-bottom: 30px;
}

.event-ticket a:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid;
    color: #ff0078;
}

.single-event:last-child {
    border-bottom: medium none;
}


/*========================
9. Video Area
==========================*/

.video-area {
    /*padding-bottom: 120px;*/
    overflow: hidden;
}

.video-item {
    position: relative;
}

.play-bttn {
    bottom: 0;
    color: #ffffff;
    font-size: 40px;
    height: 40px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}

.play-bttn:hover {
    color: #ff0078;
}

.single-video {
    font-weight: 600;
    margin-bottom: 29px;
    text-align: center;
    text-transform: uppercase;
}

.video-thumb img {
    width: 100%;
}

.video-thumb {
    overflow: hidden;
    border-radius: 5px;
}

.single-video h2 {
    margin: 20px 0 10px;
}


/*======================
10. Mail Subscribe Form
=======================*/

.mail-subscribe {
    text-align: center;
}

.mail-subscribe input {
    border: none;
    background: none;
    border-bottom: 2px solid;
    color: #ff0078;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
    text-align: left;    
}
.mail-subscribe input:focus {
    outline: none;
}

.mail-subscribe .bttn {
    border: 2px solid #ff0078;
    border-radius: 50px;
}

.mail-subscribe .bttn:hover {
    background: none;
}


/*======================
11. Footer Area
=======================*/

.footer-logo {
    margin-bottom: 15px;
}

.copyright {
    color: #fff;
}

.copyright a {
    color: #fff;
}

.copyright a:hover {
    color: #ff8960;
}

#scrollUp {
    background: rgb(254,37,199);
    border: 1px solid rgb(254,37,199);
    border-radius: 3px;
    bottom: 80px;
    color: #ffffff;
    font-size: 20px;
    height: 40px;
    line-height: 1.8;
    position: fixed;
    right: 40px;
    text-align: center;
    width: 40px;
    z-index: 999999;
}

#scrollUp:hover {
    background: #292423;
    border: 1px solid #292423;
    color: #ff0078;
}


/*===========================
12. Home 2 Style
==============================*/

.home2 .news-area .col-sm-6 {
    margin-bottom: 0px;
}

.home2 .mail-subscribe input {
    
    border: 2px solid #292423;
    width: 300px;
    margin-right: 50px;
}

.home2 .mail-subscribe button {
    background: none;
    border: medium none;
    border-radius: 0;
    border: 2px solid #292423;
    color: #292423;
}

.home2 .mail-subscribe input:hover,
.home2 .mail-subscribe input:focus {
    border-color: #ff0078;
}

.home2 .mail-subscribe button:hover {
    border-color: #ff0078;
    color: #ff0078
}

.blog .row {
    margin-bottom: 60px;
}

.blog a {
    text-transform: uppercase;
}

.blog-meta > a {
    color: #959595;
    font-size: 12px;
    margin-right: 10px;
}

.blog-meta > a:hover {
    color: #ff0078;
}

.blog-meta > a i.fa {
    margin-right: 5px;
}

.single-blog-title {
    border-bottom: 1px solid #E0DFDF;
    display: inline-block;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

a.read-more {
    color: #959595;
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    margin-top: 10px;
}

a.read-more i.fa {
    margin-left: 5px;
}

a.read-more:hover {
    color: #ff0078;
    text-decoration: underline;
}

.indector > ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.indector ul li {
    display: inline-block;
    margin: 0 5px;
}

.indector ul li a {
    background-color: #231f1e;
    border-radius: 50px;
    color: #fff;
    display: block;
    height: 35px;
    line-height: 2.4;
    width: 60px;
}

.indector ul li a:hover {
    background-color: #ff0078;
}

.header-location-menu a {
    color: #000;
    text-transform: uppercase;
}

.header-location-menu a:last-child {
    float: right;
}

.header-location-menu a i.fa {
    padding-right: 5px;
}

.header-location-menu a:last-child i.fa {
    padding-left: 5px;
    padding-right: 0;
}

.header-location-menu {
    background-color: #fafafa;
    padding: 40px 0;
}


/*===================
13. Single Blog Page
====================*/

.blog-single .single-blog-title {
    display: block;
    margin-top: 30px;
}

.content p {
    display: block;
    margin-bottom: 50px;
}

.blog-single blockquote {
    color: #a1b1bc;
    display: block;
    width: 100%;
    border: 1px solid #E0DFDF;
    border-left: 8px solid #ff0078;
    padding: 30px 150px 30px 60px;
    position: relative;
    margin-bottom: 60px;
}

blockquote h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

blockquote:after {
    color: #a1b1bc;
    content: "\f10e";
    font-family: fontawesome;
    font-size: 50px;
    position: absolute;
    right: 80px;
    top: 30px;
}

.tag-menu > span,
.social-menu span {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #000;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    left: 0;
    padding: 0 14px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 40px;
}

.tag-menu:hover > span,
.social-menu:hover > span {
    background-color: #ff0078;
}

.tag-menu,
.social-menu {
    border: 1px solid #dfdfdf;
    margin-bottom: 20px;
    padding: 0 0 0 50px;
    position: relative;
    min-height: 40px;
}

.tag-menu > a,
.social-menu > a {
    color: #A1B1BC;
    margin: 0 5px;
    display: inline-block;
}

.social-menu > a:hover .fa-facebook {
    color: #3B5998;
}

.social-menu > a:hover .fa-twitter {
    color: #55ACEE;
}

.social-menu > a:hover .fa-pinterest-p {
    color: #CB2026;
}

.social-menu > a:hover .fa-google-plus {
    color: #DD4C3B;
}

.social-menu > a:hover .fa-deviantart {
    color: #2F584A;
}

.social-menu > a:hover .fa-instagram {
    color: #7A43BA;
}

.social-menu > a:hover .fa-dribbble {
    color: #EC4A89;
}

.social-menu > a:hover .fa-github {
    color: #4DCE7D;
}

.social-menu > a:hover .fa-wordpress {
    color: #AAAAAA;
}

.social-menu > a:hover .fa-vimeo {
    color: #63B4E4;
}

.social-menu > a:hover .fa-youtube {
    color: #E52C27;
}

.tag-menu > a:hover {
    color: #ff0078;
    text-decoration: underline;
}

.tag-menu > a {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    text-transform: capitalize;
    padding-top: 2px;
}

.tag-menu a:after {
    content: ",";
    font-size: 20px;
    margin-left: 3px;
}

.tag-menu a:last-child:after {
    content: "";
}

.social-menu > a {
    height: auto;
    margin: 0;
    text-align: center;
    width: 36px;
    padding: 9px 0;
}

.comment-header {
    margin-top: 60px;
    overflow: hidden;
    margin-bottom: 10px;
}

.comment-header h2 {
    float: left;
    font-size: 22px;
    text-transform: uppercase;
}

.comment-header .edit-comment {
    float: right;
}

.edit-comment button {
    background: none;
    border: none;
    line-height: 2;
}

.edit-comment button i.fa {
    border: 1px solid;
    border-radius: 2px;
    display: block;
    float: left;
    height: 30px;
    line-height: 2;
    margin-right: 10px;
    width: 30px;
}

.edit-comment button:hover i.fa {
    color: #ff0078;
}

ul.single-comment {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.single-comment > li {
    border: 1px solid #e0dfdf;
    margin-bottom: 30px;
    padding: 20px 20px 20px 20px;
    position: relative;
    color: #a1b1bc;
    border-radius: 2px;
}

.single-comment > li:nth-child(1n+2) {
    margin-left: 40px;
}

.single-comment > li p {
    margin-bottom: 0;
}

.com-thumb {
    float: left;
    margin: 0 10px 5px 0;
}

.single-comment h3 {
    color: #2c3e50;
    margin-bottom: 5px;
}

.single-comment .comment-date {
    color: #ff0078;
    display: inline-block;
    font-size: 14px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.single-comment .reply-button {
    background-color: #221f1f;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    padding: 3px 10px;
    position: absolute;
    top: 24px;
    right: 14px;
}

.single-comment .reply-button:hover {
    background-color: #ff0078;
}

.reply-form {
    display: none;
}

.reply-form > input {
    border: 1px solid #a1b1bc;
    margin-top: 15px;
    padding: 3px 10px;
    width: 300px;
}

.comment-box h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

.com-input {
    float: left;
    overflow: hidden;
    position: relative;
    width: 47%;
}

.comment-box textarea,
.com-input > input {
    background: none;
    border: none;
    border-bottom: 2px solid #ff0078;
    padding: 10px;
    width: 100%;
    border-radius: 2px;
}

.comment-box textarea {
    margin-top: 40px;
}

.com-input > span {
    color: #d0d8dd;
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 11px;
}

.com-input:first-child {
    margin-right: 6%;
}

.comment-box button {
    background: #ff0078;
    border: 2px solid transparent;
    border-radius: 2px;
    color: #fff;
    float: right;
    letter-spacing: 1px;
    margin-top: 20px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
}

.comment-box button:hover {
    background: none;
    color: #ff0078;
    border: 2px solid #ff0078
}


/*=====================
14. Single Video Page
=======================*/

.main-video-area {
    background: #F4F6F7;
    padding: 60px;
    border-radius: 5px;
}

.main-video {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
}

#cvideo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    top: 0;
    left: 0;
    margin: auto;
}

#polina {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin: auto;
    z-index: 9;
    text-align: center;
}

#polina button {
    border: none;
    background: none;
    color: #fff;
    font-size: 56px;
    line-height: 1;
}

.main-video-area .list-add {
    position: absolute;
    bottom: 0;
    text-align: right;
    width: 100%;
    left: 0;
}

.list-add a {
    background-color: #ffffff;
    color: #ff0078;
    padding: 10px 20px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 4px 0px #dddddd;
}

.list-add a:hover {
    background-color: #ff0078;
    color: #ffffff;
}

.gallery-header {
    border-bottom: 2px solid #E0DFDF;
    margin-bottom: 40px;
    padding-bottom: 30px;
}

.gallery-header h2 {
    font-size: 26px;
    text-transform: uppercase;
}

.video-meta {
    font-size: 12px;
}

.video-meta-item {
    margin-right: 10px;
    display: inline-block;
}

.video-meta-item i.fa {
    margin-right: 5px;
}

.video-meta-item a {
    margin-left: 5px;
    color: #959595;
}

.video-meta-item a:hover {
    color: #ff0078;
}

.main-video-area.in .list-add {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.main-video-area.in #polina {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.main-video-area.in #polina:hover {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}


/*=======================
15. Error Page
========================*/

.error-page {
    background: url("images/404.jpg") no-repeat scroll top center/100% 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.error-page .social-link {
    text-align: center;
    margin-top: 30px;
}

.error-page .social-link a {
    margin: 0 10px;
}

.error-page .content {
    color: #fff;
    margin: auto;
    font-style: italic;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.error-page .content h1 {
    font-size: 120px;
    font-style: normal;
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
}

.error-page .content h1 span {
    color: #ff0078;
}

.error-page .header-area,
.error-page .footer-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 40px 0;
}

.error-page .footer-area {
    top: auto;
    bottom: 0;
}

.comingsoon {
    color: #ffffff;
}

.comingsoon h3 {
    margin-bottom: 40px;
}

.count-down {
    margin-bottom: 50px;
}

.comingsoon .mail-subscribe {
    margin-top: 40px;
}

.counter ul {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 40px;
}

.counter ul li {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    padding: 0 30px;
    text-transform: uppercase;
    background: url("images/icon/page-title-stick.png") no-repeat scroll right center/auto 100%;
}

.counter ul li span {
    display: block;
    font-size: 40px;
}

.counter ul li:last-child {
    background: none;
}

ul.ubaplayer-controls {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 40px;
}

.ubaplayer-controls li {
    background-color: #f4f6f7;
    position: relative;
    padding-left: 50px;
}

.ubaplayer-controls li:nth-child(2n+2) {
    background: url(images/album_list_bg.jpg) no-repeat scroll 0 0 / cover;
}

.ubaplayer-controls li span {
    padding-right: 10px;
    border-right: 1px solid #221F1F;
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 6px 15px;
    bottom: 0;
    margin: 5px 0;
}

.ubaplayer-controls li:nth-child(2n+2) span {
    border-right: 1px solid #F4F6F7;
    color: #F4F6F7;
}

.ubaplayer-controls li a {
    font-family: 'Raleway', sans-serif;
    color: #221f1f;
    font-weight: 400;
    padding: 2px;
    z-index: 2;
}

.ubaplayer-controls li a:after {
    content: "\f144";
    position: absolute;
    right: 10px;
    top: 2px;
    font-family: fontawesome;
    color: #221f1f;
    font-size: 26px;
    z-index: 1;
}

.ubaplayer-controls li a.ubaplayer-playing:after {
    content: "\f28b";
}

.ubaplayer-controls li:nth-child(2n+2) a,
.ubaplayer-controls li:nth-child(2n+2) a:after {
    color: #ffffff;
}

.ubaplayer-controls li a small {
    color: #ff0078;
    display: block;
}

.ubaplayer-controls li:nth-child(2n+2) a {
    color: #ffffff;
}



/**
 * Grid Featured Posts
 * -----------------------------------------------------------------------------
 */

#featured-posts {
    margin-bottom: 30px;
    overflow: hidden;
    display: block;
    position: relative;
}

#featured-posts .featured-post.fea-1,
#featured-posts .featured-post.fea-2,
#featured-posts .featured-post.fea-3,
#featured-posts .featured-post.fea-4,
#featured-posts .featured-post.fea-5,
#featured-posts .featured-posts-single-slide .featured-post {
    display: block;
}

#featured-posts .featured-post {
    display: none;
    float: left;
    position: relative;
    overflow: hidden;
    padding-left: 1px;
}

#featured-posts .featured-post-inner {
    height: 250px;
    position: relative;
    line-height: 0;
    color: #FFF;
    background-position: center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

#featured-posts .featured-post img {
    max-width: 100%;
    height: auto;
}

#featured-posts .featured-post.featured-post-1,
#featured-posts .featured-post.featured-post-3 {
    padding-left: 0;
}

.featured-post-1,
.featured-post-2 {
    width: 50%;
}

.featured-post-3,
.featured-post-4,
.featured-post-5 {
    width: 33.33333333%;
    padding-top: 1px;
}

.featured-cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
        -ms-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background:    -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background:     -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background:      -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background:         linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
}

.featured-cover a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.featured-cover a span{
    display: none;
}

#featured-posts .featured-post-inner:hover .featured-cover {
    opacity: 1;
}

.featured-title {
    position: absolute;
    width: 100%;
    bottom: -60px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    line-height: 20px;
    padding: 20px;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}

.featured-title h2 {
    margin-bottom: 15px;
    text-shadow: rgba(0, 0, 0, .6) 0 0 5px;
    font-size: 20px;
    line-height: 26px;
}

.featured-title h3 {
    font-size: 10pt;
    opacity: 0;
    min-height: 40px;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}

.featured-title span.tie-date{
    font-size: 9pt;
}

.featured-title a {
    color: #FFF;
}

#featured-posts .flex-direction-nav a {
    width: 40px;
    height: 40px;
    margin: 0;
    color: #FFF;
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    background: #222;
}

#featured-posts.featured-posts-disable-nav .flex-direction-nav {
    display: none;
}

#featured-posts .flex-direction-nav .flex-next {
    right: 5px !important;
}

#featured-posts .flex-direction-nav .flex-prev {
    right: 50px !important;
    left: auto !important;
}

#featured-posts .flex-direction-nav .flex-next:before,
#featured-posts .flex-direction-nav .flex-prev:before {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20pt;
    display: block;
    text-align: center;
}

#featured-posts:hover .flex-next,
#featured-posts:hover .flex-prev {
    opacity: 0.8;
}

#featured-posts .flex-next:hover,
#featured-posts .flex-prev:hover {
    background: #F88C00;
}

#featured-posts .featured-post-inner:hover .featured-title {
    bottom: 0px;
}

#featured-posts .featured-post-inner:hover .featured-title h3 {
    opacity: .8;
}

#home-page-helper{
    height: 0px;
}
.spacer{
    clear: both;
    height: 30px;
}


.footer-bottom {
    position: fixed;
    width: 100%;
    z-index: 999999;
    bottom: 0;
    height: 60px;
    display: none;
}

.footer-bottom.plshow {
    bottom: -80px;
}

.menu{
    float: right;
    margin-top: 35px;
}

.menu-mobile {
    display: none;
    padding: 20px 0;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 10px;
    font-size: 46px;
    color: #ffffff;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: right;
    margin: 0 15px 0 0;
    padding: 0;
    font-family: 'droid arabic kufi';
    border-bottom: 2px solid transparent !important;
}

.menu > ul > li.active,
.menu > ul > li:hover {
    /*border-bottom: 2px solid #f50c96 !important;*/
}

.menu > ul li.active > a,
.menu > ul li:hover > a {
    color: #ff8960;
    font-family: 'droid arabic kufi';
}

.menu > ul > li:last-child {
    
}

.menu > ul > li a {
    color: #ffffff;
    display: block;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    font-family: 'droid arabic kufi';
}

.menu > ul > li > a > i.fa {
    color: inherit;
    margin-left: 5px;
}

.menu > ul > li > a > span {
    display: block;
    text-transform: capitalize;
    color: #ccc;
    font-family: 'Raleway', sans-serif;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #269ef8;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    top: 100%;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #ffffff;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li a:hover {
    color: #f50c96;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul li:last-child ul.normal-sub {
    right: 0;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}

@media only screen and (max-width: 959px) {
    .mainmenu-area {
        background: transparent;
    }
    .menu > ul li.active > a, .menu > ul li:hover > a{
        color: #000;
    }
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
        padding: 10px 0px;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
}
.listen{
    font-size: 24px;
    background: url(../images/mixfm-listen-now.png);
    border: 0px;
    padding: 0px;
    outline: 0;
    background-repeat: no-repeat;

    background-size: 280px;
    height: 270px;
    width: 280px;
}
.listen:hover{
    background: url(../images/mixfm-listen-now-2.png);
    background-repeat: no-repeat;
    background-size: 280px;
    height: 270px;
    width: 280px;
}
.listen.active{
    background: url(../images/mixfm-listen-now-3.png);
    background-repeat: no-repeat;
    background-size: 280px;
    height: 270px;
    width: 280px;
}

@-webkit-keyframes rotation {
        from {
                -webkit-transform: rotate(0deg);
        }
        to {
                -webkit-transform: rotate(359deg);
        }
}

.title-section{
    opacity: 0;
    display: block;
    cursor: pointer;
    color: #ffffff;
    background: rgba(0,0,0,.6);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
}
.title-section:hover, .title-section:focus{
    opacity: 1;
}
.title-section h2{
    /*-webkit-animation: spin 0.8s linear 0.6s infinite alternate;
    animation: spin 0.8s linear 0.6s infinite alternate;
    */
    /*position: absolute;*/
    line-height: 34px;
    width: 100%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    line-height: 20px;
    padding: 50px 10px 5px 10px;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.title-section h3{
    width: 100%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    line-height: 34px;
    padding:0px 20px 0px 20px;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}

.title-section ul{
    margin: 0px;
    padding: 0px;
}

.title-section ul li{
    display: inline-block;
    list-style: none;
    margin: 0px 20px 0px 0px;
}

.title-section ul li a{
    font-size: 40px;
    color: #ffffff;
}

.heading-title{
    font-size: 33px;
    font-weight: 400;
    color:#ff8960;
    background: #fbfbfb;
    padding: 10px;
    border-bottom: 2px solid #ff8960;
}
.heading-title a{
    color: #ff8960;
}

.topweek{
    background: #f1f1f1;
    padding: 2px 3px;
    border-radius: 5px;
}

.heading-title2{
    color: #fff;
    background: #ff8960;
    padding: 10px;
    font-size: 26px;
    margin-bottom: 0px;
    border-radius: 5px 5px 0px 0px;
}
.badge{
    background-color: #1c90f1;
    padding:7px 10px;
    font-size: 14px;

    background-color: #fe9300;
    padding:3px 6px;
    font-size: 12px;
}
.topweekbody{
    background: #ffffff;
    padding: 10px;
}
.topweekbody .list-unstyled{
    padding-right: 0px;
    overflow: hidden;
}

.topweekbody .list-unstyled li{
    border-bottom: 1px solid #eee;
    padding: 10px 0px;
    overflow: hidden;
    float: right;
    width: 48%;
}
.topweekbody .list-unstyled li.full-width{
    width: 100%
}
.topweekbody .list-unstyled li:nth-child(odd){
    margin-left: 0px;
}
.topweekbody .list-unstyled li:nth-child(even){
    margin-left: 0px;
}

.topweekbody .list-unstyled li span{
    /*font-size: 15px;*/
}

.topweekbody .list-unstyled li:last-child{
    border-bottom: 0px solid #eee;
}

.topweekbody .list-unstyled li a{
    color: #444;
    font-size: 14px;
    line-height: 19px;
}

.topweekbody .list-unstyled li a.track-name{
    color: #999;
    font-size: 12px;
}

.blue-bg{
    background: #1c90f1;
    padding: 0px 0px;
    border-radius: 5px 5px 5px 5px;
    margin-left: 20px; 
}
.gray-bg{
    background: #f1f1f1;
    padding: 0px 0px;
    border-radius: 5px 5px 5px 5px;
    margin-left: 20px;
}
.marquee-bg{
    background: #f1f1f1;
    padding: 0px 0px;
    margin-bottom: 20px;
    border-radius: 5px 0px 0px 5px;
}

.marquee-bg .heading{
    background: #1c90f1;
    display: inline-block;
    padding: 5px 5px 5px 5px;
        border-radius: 0px 5px 5px 0px;
}
.marquee-bg .heading h2{
    padding: 0px;
    margin: 0px;
    color: #fff;
}

.ticker{
    display: inline-block;
    float: left;
    width: 100%;
}

.scrolling-text{
    height: 50px;  
    overflow: hidden;
    position: relative;
}

.scrolling-text h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    -moz-transform:translateX(-100%);
    -webkit-transform:translateX(-100%);   
    transform:translateX(-100%);
    /* Apply animation to this element */  
    -moz-animation: scrollingtext 15s linear infinite;
    -webkit-animation: scrollingtext 15s linear infinite;
    animation: scrollingtext 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scrollingtext {
    0%   { -moz-transform: translateX(-100%); }
    100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scrollingtext {
    0%   { -webkit-transform: translateX(-100%); }
    100% { -webkit-transform: translateX(100%); }
}
@keyframes scrollingtext {
    0%   { 
    -moz-transform: translateX(-100%); /* Firefox bug fix */
    -webkit-transform: translateX(-100%); /* Firefox bug fix */
    transform: translateX(-100%);      
    }
    100% { 
    -moz-transform: translateX(100%); /* Firefox bug fix */
    -webkit-transform: translateX(100%); /* Firefox bug fix */
    transform: translateX(100%); 
    }
}


.footer-area{
    background: rgb(255,230,0);
    background: linear-gradient(90deg, rgba(255,230,0,1) 0%, rgba(255,137,96,1) 49%, rgba(255,37,199,1) 100%);
    padding: 20px 0px;
}

.schedule-heading{
    color: #fff;
    margin-top: 15px;
    border-bottom: 3px solid #fff;
    padding-bottom: 15px;
}

.schedule-off h3{
    font-size: 16px;
    margin: 0 0 8px;
}

.schedule-off span{
    font-size: 12px;
}
.schedule-off li{
    border-bottom: 1px solid #999;
}

.clients img{
    display: inline-block;
    margin: 0px 10px;
}


.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

footer .border-left {
    
    min-height: 200px;
}

.footer-area{

}

footer li{
    padding: 10px 0px;
}

footer li a{
    color: #ffffff;
    font-size: 15px;
    opacity: 0.85;
}

footer li a:hover, footer li a:focus{
    opacity: 1;
}

.owl-wrapper {
    positon: relative;
}
.owl-theme .owl-controls .owl-page span {
    background: #fff !important;
}
.owl-img {
    width: 100%;
}
.owl-text-overlay {
position: absolute;
text-align: right;
width: 50%;
top: 12%;
color: #fff;
right: 2%;
}
h2.owl-title {
font-size: 24px;
font-weight: bold;
margin-bottom:0px;
line-height: 26px;
}
p.owl-caption {
font-size: 18px;
line-height: 24px;
}
.owl-theme .owl-controls .owl-page span:active {
background: #fff !important;
}
/* hide previous and next */

.owl-buttons {
visibility: hidden;
display: none;
}

#scrollUp{
    position: fixed; z-index: 2147483647;display: none;
}
.topheaderspace{
    height: 100px;
    clear: both;
}
.header-with-no-bg{
    
}
.header-with-no-bg .menu > ul > li a{
    color: #ffffff;
}
.header-with-no-bg .menu > ul li.active > a, .header-with-no-bg .menu > ul li:hover > a{
    color: #ff0178;
    color: #000;
}
.main-body{
    min-height: 350px;
}

#schedule{
    margin: 30px 0px;
    clear: both;
    position: relative;
}
.schedule-7{
    min-height: 680px;
}
.schedule-7{
    min-height: 880px;
}
.horizontal-section{
    clear: both;
}
.horizontal-section .tile {
    overflow: hidden;
    margin-bottom: 6px;
    width: 19%;
    height: 140px;
    margin-left: 6px;
    float: right;
    /*background-color: rgb(163, 26, 163);*/
    background-color: #ff8960;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    cursor: pointer;
}
.horizontal-section .first{
    background: rgb(71, 71, 71) !important;
    background: #000 !important;
}
.horizontal-section .tile h3 {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 100%;
    height: 30px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font: 20px/30px 'droid arabic kufi', 'Raleway', sans-serif;
    font-weight: bold;
    direction: rtl;
}
.vertical-section{
    clear: both;
}
.vertical-section .tile {
    overflow: hidden;
    clear: both;
    margin-bottom: 6px;
    width: 19%;
    height: 140px;
    margin-left: 6px;
    background-color: rgb(163, 26, 163);
    background-color: #ff8960;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    cursor: pointer;
}
 .vertical-section .tile h3 {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 100%;
    height: 30px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font: 20px/30px 'droid arabic kufi', 'Raleway', sans-serif;
    font-weight: bold;
    direction: rtl;
}

.vertical-section .tile:hover, .horizontal-section .tile:hover{
    background:rgb(31, 144, 241);
    background: #ed009b;
}

.horizontal-section .active, .vertical-section .active{
    background:rgb(31, 144, 241);
    background: #ff0078;
    background: #ed009b;
}

.schedule-content{
    position: absolute;
    top: 145px;
    right: 20%;
    z-index: 233;
    width: 77%;
}

.schedule-list{
    overflow: hidden;
}
.schedule-list li.grid{
    width: 23.5%;
    float: right;
    margin: 0px 0.5%;
    border: 1px solid #f9f9f9;
    min-height: 230px;
    padding: 10px;
    margin-bottom: 20px;
}
.schedule-list .title{
    padding: 10px;
}
/*.schedule-list li.grid:nth-child(odd) {float: right;}
.schedule-list li.grid:nth-child(even) {float: left;}
*/

.schedule-presenter{
    background: #ff8960;
    color: #fff !important;
    padding: 2px;
    margin: 2px;
    font-size: 12px;
}

.schedule-presenter{
    background: #ff8960;
    color: #fff !important;
    padding: 2px;
    margin: 2px;
    font-size: 11px;
}

.schedule-list li{
    border-bottom: 6px solid #ffffff;
    padding: 10px 0px;
    overflow: hidden;
}

.schedule-list li:last-child{
    /*border: 0px;*/
}

.schedule-list li a, .schedule-list li span{
    color: #ffffff;
}

.schedule-list h3{
    font-size: 18px;
}

.schedule-heading{
    color: #444;
}

.schedule-list li a, .schedule-list li span{
    color: #666;
}
.clearfix{
    clear: both;
}
.list-space{
    clear: both !important;
    width: 100% !important;
    float: none !important;
    border: 0px !important;
    padding: 0px !important;
    height: 10px !important;
}

#presenter-list .presenter-text-overlay{
    position: absolute;
    text-align: right;
    width: 50%;
    top: 6%;
    color: #fff;
    right: 5%;
}
#presenter-list h2.presenter-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 35px;
}

#presenter-list h2.presenter-title .presenter-title-a{
    color: #ffffff;
    /*background: #1f90f1d1;*/
    background: #ff8960;
    padding: 7px 2px;
    font-size: 18px;
    line-height: 20px;
}

#presenter-list p.presenter-caption {
    
}
#presenter-list p.presenter-caption a{
    color: #ffffff;
    padding: 7px 2px;
    background: #ff8960;
    font-size: 12px;
    line-height: 20px;
    margin: 0px 0px 6px 0px;
}

.live{
    color: #ffffff !important;
}
.presenter-tab a.presenters-img{
    background: #f3f3f3;
    display: inline-block;
    min-height: 150px;
}
.zero-margin{
    margin: 0px;
}

.profile-details{
    margin: 20px 0px;
    background: #fbfbfb;
    padding: 10px;
    overflow: hidden;
}
.presenters-img{
    display: block;
}

.btn-twitter{
    background-color: #32CCFE;
    color: #fff;
    width: 80px;
    padding: 1px 0px;
    font-size: 15px;
    opacity: 0.85;
    margin-left: 20px;
}
.btn-facebook{
    background-color: #3C599F;
    color: #fff;
    width: 80px;
    padding: 1px 0px;
    font-size: 15px;
    opacity: 0.85;
    margin-left: 20px;
}
.btn-instagram{
    background-color: #A1755C;
    color: #fff;
    width: 80px;
    padding: 1px 0px;
    font-size: 15px;
    opacity: 0.85;
    margin-left: 20px;
}
.btn-facebook:hover, .btn-twitter:hover, .btn-instagram:hover{
    opacity: 1;
}

.news-list{
    /*background: #f9f9f9;
    border-bottom: 1px solid #1f90f1;*/
    padding: 15px 10px 0px 10px;
    margin-bottom:0px !important;
}
.news-list .list{
    position: relative;
    text-align: center;
    color: white;
}
.news-list .list .bottom-left {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.6);
    padding:0px 10px;
    width: 100%;
    text-align: right;
    color: #fff;
}
.news-list .list .bottom-left a{
    color: #ffffff;
}



/*
.vertical-section{
    position: absolute;
    perspective: 3000px;
    -webkit-perspective: 3000px;
}
.vertical-section .tile {
    position: relative;
    z-index: 5;
    overflow: hidden;
    margin-bottom: 3px;
    width: 164px;
    height: 164px;
    background-color: rgb(163, 26, 163);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.vertical-section .first{
    background-color:rgb(31, 144, 241)
}
.vertical-section .tile a {
    display: block;
    width: 100%;
    height: 100%;
}
.vertical-section .tile a.active {
    display: block;
    background: #fff;
}
.vertical-section .tile a h3 {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 100%;
    height: 30px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font: 20px/30px 'droid arabic kufi', 'Raleway', sans-serif;
    font-weight: bold;
    direction: rtl;
}*/


/*Change icons size here*/
.social-icons .fa {
    font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #FFF;
    color: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{ 
    border-radius: 50%;
}
.social-icons.icon-rounded .fa{
    border-radius:5px;
}
.social-icons.icon-flat .fa{
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333; 
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active { 
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); 
}
.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active { 
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}
 
.social-icons .fa-adn{background-color:#504e54;} 
.social-icons .fa-apple{background-color:#aeb5c5;} 
.social-icons .fa-android{background-color:#A5C63B;}  
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;} 
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;} 
.social-icons .fa-css3{background-color:#1572B7;} 
.social-icons .fa-dribbble{background-color:#F46899;}  
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;} 
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;} 
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;} 
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;} 
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;} 
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;} 
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;} 
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}



.jp-gui button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    font-size: 28px;
    height: 40px;
    width: 40px;
}

.jp-gui button:hover {
    color: #f50c96;
}

.jp-controls {
    margin: auto;
    padding: 15px 0px 5px 0px;
    text-align: center;
    width: 50px;
}

.jp-volume-controls {
    position: relative;
    margin: auto;
    padding: 5px 0px 10px 10px;
    text-align: center;
    display: block;
}

.jp-type-playlist {
    position: relative;
}

.jp-volume-bar {
    background-color: #292423;
    cursor: pointer;
    height: 100px;
    width: 15px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    display: none;
}

.jp-volume-bar-value {
    background-color: #f50c96;
}

.jp-time-holder {
    color: #ffffff;
    position: absolute;
    right: 220px;
    top: 34px;
    width: 100px;
}

.jp-time-holder .jp-current-time {
    float: left;
    margin-right: 15px;
}

.jp-toggles .jp-repeat,
.jp-toggles .jp-shuffle {
    left: 200px;
    margin: auto;
    position: absolute;
    right: 0;
    top: 20px;
}

.jp-state-playing .jp-controls button.jp-play,
jp-state-shuffled .jp-toggles .jp-shuffle,
.jp-state-looped .jp-toggles .jp-repeat {
    color: #f50c96;
}

.jp-toggles .jp-shuffle {
    left: 0;
    right: 200px;
}

.jp-playlist {
    background-color: #231f1e;
    border-radius: 5px 5px 0 0;
    bottom: 100%;
    box-shadow: 0 0 3px 0 #534946;
    color: #ffffff;
    display: none;
    min-width: 300px;
    padding: 20px;
    position: absolute;
    right: 10px;
}

.jp-playlist ul {
    height: 200px;
    list-style: outside none none;
    margin: 0;
    overflow-y: scroll;
    padding: 0;
}

.jp-playlist ul li a {
    color: #ffffff;
    font-weight: 600;
}

.jp-playlist ul li {
    border-bottom: 1px solid;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.jp-toggles .jp-list {
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 20px;
}

.jp-controls button.jp-play {
    position: relative;
}

.jp-controls button.jp-play:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-family: fontawesome;
    content: "\f144";
    font-size: 40px;
    line-height: 0.9;
}

.jp-state-playing .jp-controls button.jp-play:after {
    content: "\f28b";
}

.jp-playlist ul li.jp-playlist-current a {
    color: #f50c96;
}

.jp-controls .jp-previous {
    float: left;
}

.jp-controls .jp-next {
    float: right;
}

.player-volume-continer{
    width: 12%;
    padding: 8px 0px 0px 0px;
    margin: 0 auto;
    text-align: center;
    float: right;
}
.player-play-continer{
    width: 12%;
    padding: 8px 0px 0px 0px;
    margin: 0 auto;
    text-align: center;
    float: left;
}

.player-text-continer{
    width: 74%;
    padding: 0px;
    margin: 0 auto;
    text-align: center;
    float: left;
}
.player-text-continer h4{
    color: #fffff;
    padding: 10px 0px 10px 0px;
    margin: 0;
    overflow: hidden;
    font-size: 21px;
}

.player-volume-continer button,  .player-play-continer button{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #ffffff;
    font-size: 30px;
    height: 45px;
    width: 45px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    outline: 0;
}

.player-volume-continer button i,  .player-play-continer button i{
    position: absolute;
    left: 3px;
    top: 8px;
    font-size: 28px;
    line-height: 0.9;
    width: 100%;
    height: 100%;
}
.jp-gui button:hover {
    color: #f50c96;
}

.player-play-continer button i.fa-pause{
    font-size: 28px;
    left: 1px;
    top: 8px;
}

button.player-toggle {
    background: #269ef8 none repeat scroll 0 0;
    border-radius: 0 5px 0 0;
    bottom: 100%;
    color: #f50c96;
    height: 60px;
    left: 0;
    padding-right: 10px;
    position: absolute;
    text-align: center;
    width: 60px;
}


.jplayer-volume .fa-volume-off, .jplayer-volume .fa-volume-up{
    left: 0px;
}
.text-center{
    text-align: center;
}
.inline-block{
    display: inline-block;
}
.btn-like{
    background-color: #ff8960;
    color: #fff !important;
    width: 30px;
    padding: 1px 8px;
    font-size: 15px;
    opacity: 0.85;
    float: left;
}
.btn-like:hover, .btn-like:focus{
    opacity: 1;
}

.liked{
    background-color: #0c0c0c;
}

.play-progress{
    margin-top: 10px;
}
.progress{
    margin-bottom: 0px;
    background-color: #f1f1f1;
}
.progress-bar{
    background: #1c90f1;
    background-color: #1c90f1;
    width: 5%;
}


h2.owl-title a{
    color: #ff0178;
}

.owl-caption a{
    color: #ff0178;
    font-size: 14px;
}

.has-feedback label~.form-control-feedback{
    top: 0px;
}
.error, .invalid-feedback{
    color: #ff0000;
}
.modal-title{
    display: inline-block;
}
.modal-header .close{
    text-align: left;
    float: left;
}
.modal-body{
    height: 450px;
    overflow: scroll;
}
.heading-title-news{
    font-size: 21px;
    font-weight: 400;
    color: #f50c96;
    background: #fbfbfb;
    padding: 10px;
    border-bottom: 2px solid #f50c96;
}
.desc p{
    line-height: 30px;
}

.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: black;
    color: rgb(202, 255, 195);
}
ul.marquee li {
    display: inline-block;
    padding: 10px 20px;
    font-size: 70px;
}

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

.justify-content-center {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    margin: 12px 0px 0px 0px;
}

.navbar-toggler {
    color: #ffffff;
    border-color: rgba(255,255,255,.5);
}
.navbar-toggler:hover {
    color: rgba(255,255,255,255);
    border-color: rgba(255,255,255,2555);
}
.navbar-toggler-icon {
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    font-size: 26px;
}

.play-button-main{
    position: relative; 
    top: 410px; 
}
.navbar-toggler{
    display: none;
}

.image-list{
    overflow: hidden;
    clear: both;
}
.image-item{
    float: right;
}
.image-item img{
    width: 280px;
    opacity: 0.8;
    cursor: pointer;
}
.image-item img:hover{
    opacity: 1;
}


.video-link{
    position: relative;
    opacity: 0.85;
}
.video-link span{
    position: absolute;
    top: 25%;
    right: 45%;
    font-size: 60px;
    color: #fff;
}
.video-link:hover{
    opacity: 1;
}

.center{
    text-align: center;
}

.app-downloads{
    display: block;
    margin: 20px auto 20px auto;
    text-align: center;
    clear: both;
}

.app-downloads a{
    display: inline-block;
    text-align: center;
    opacity: 0.9;
}
.app-downloads a:hover{
    opacity: 1;
}


.video-list-home{
    margin-bottom: 20px;
}
.video-list-home:nth-child(odd){
    clear: both;
}


.nav-tabs>li{
    float: right;
}

.col-2{
    float: right;
    width: 50%;
    margin-bottom: 15px;
}




.modal-dialog{
    margin: 110px auto;
}





.scroll-right {
 height: 67px;  
 overflow: hidden;
 position: relative;
}
.scroll-right h4 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);   
 transform:translateX(-100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-right 10s linear infinite;
 -webkit-animation: scroll-right 10s linear infinite;
 animation: scroll-right 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-right {
 0%   { -moz-transform: translateX(-100%); }
 100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
 0%   { -webkit-transform: translateX(-100%); }
 100% { -webkit-transform: translateX(100%); }
}
@keyframes scroll-right {
 0%   { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%);      
 }
 100% { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 
 }
}

.scroll-right h4 span{
    /*font-size: 14px;
    line-height: 15px; */
}

.top-ten-image-list{
    float: right;
    margin-left: 6px;
    width: 70px;
}
.top-ten-image{
    padding: 5px;border: 1px solid #ececec;
}
.top-ten-title{
    float: right;
    width: 175px;
}
.top-ten-title .song-title{
    font-size: 15px;
    line-height: 24px;
    margin: 0px 4px 5px 0px;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.top-ten-title .song-artist{
    font-size: 12px;
    display: block;
    margin-top: 10px;
        direction: rtl;
}

.top-ten-like{
    float: left;
    padding: 0px 0px;
    width: 70px;
}
.top-ten-like a{
    width: 100%;
    display: block;
    margin-bottom: 8px;
}
.nav-tabs>li>a{
    text-align: center;
}

.topweek .nav-tabs>li{
    width: 50%
}



#home-new .logo{
    width: 270px;
    margin-top: 0px;
}
#home-new .social-link a{
    color: #ffffff;
}
#home-new .live{
    color: #ffffff !important
}
#home-new .header-top-area{
    position: initial;
}
#home-new .mainmenu-area{
    top: 0px;
    background: transparent;
    padding: 0px;
}
#home-new .menu{
        margin-top: 0px !important;
}
#home-new .menu > ul li.active > a, #home-new .menu > ul li:hover > a {
    color: #000000;
}
#home-new .app-downloads {
    display: block;
    margin: 18px auto 18px auto;
    text-align: left;
    clear: both;
}
#home-new .app-downloads a {
    display: inline-block;
    text-align: left;
    opacity: 0.9;
    width: 130px;
    vertical-align: top;
}
#home-new .social-link{
    text-align: left;
}
#home-new .new-play{
    float: right;
}
#home-new .play-button-main{
    position: initial;
    top: 0;
}
#home-new .listen {
    background: url(../images/mixfm-listen-now-newface.png);
    border: 0px;
    padding: 0px;
    outline: 0;
    background-repeat: no-repeat;
    background-size: 170px;
    height: 61px;
    width: 280px;
    display: inline-block;
    text-align: right;
    margin-left: 50px;
}
#home-new .listen:hover{
    background: url(../images/mixfm-listen-now-newface-hover.png);
    border: 0px;
    padding: 0px;
    outline: 0;
    background-repeat: no-repeat;
    background-size: 170px;
    height: 61px;
    width: 280px;
    display: inline-block;
    text-align: right;
    margin-left: 50px;
}
#home-new .listen.active{
    background: url(../images/mixfm-listen-now-newface-hover.png);
    border: 0px;
    padding: 0px;
    outline: 0;
    background-repeat: no-repeat;
    background-size: 170px;
    height: 61px;
    width: 280px;
    display: inline-block;
    text-align: right;
    margin-left: 50px;
}
#home-new.top-area{
    height: auto;
    position: initial;
    width: 100%;
    margin-bottom: 0px;
    background: rgb(255,230,0);
    background: linear-gradient(90deg, rgba(255,230,0,1) 0%, rgba(255,137,96,1) 49%, rgba(255,37,199,1) 100%);
}

.events-first a{
    display: block;
    color: #ffffff;
}

.events-first .main-image{
    position: relative;
    text-align: center;
    color: white;
}
.events-first .main-image .bottom-left{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px 10px;
    width: 100%;
    text-align: right;
    color: #fff;
}
.events-first .main-image .top-left {
  position: absolute;
  top: 8px;
  right: 16px;
}
.events-first .main-image .bottom-left h3{
    margin: 0px;
}
.events-first .main-image .bottom-left span{
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

.event-list{
    position: relative;
    text-align: center;
}
.event-list a{
    display: block;
    color: #ffffff;
}
.event-list .event-title{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    width: 100%;
    text-align: right;
    color: #fff;
}
.event-list .event-title h3{
    margin: 0px;
}
.btn-tickets{
    background-color: #ef3600;
    color: #ffffff;
}
.event-main .desc{
    margin-top: 10px;
    clear: both; 
    line-height: 28px;
    font-size: 16px;
}
.event-main .location{
    margin-top: 20px;
    clear: both;    
}
.event-main .location h3{
    color: #0c0c0c;
}
.event-main .location-title{
    font-size: 32px;
    color: #333;
}
.event-main .location-title span{
    font-size: 18px;
    color: #0c0c0c
}
.event-main .space{
    margin-top: 20px;
    clear: both;
}
.event-main .time{
    margin-top: 20px;
    clear: both;
}
.align-right{
    text-align: right;
}
.align-left{
    text-align: left;
}
.align-center{
    text-align: center;
}
.event-main .fa{

}
.event-main .event-title-other{
    font-size: 24px;
    border-bottom: 1px solid #ef3600;
    padding-bottom: 10px;
    color: #ef3600;
    line-height: 26px;
}

.competition-main .competition-title{
    font-size: 24px;
    padding-bottom: 10px;
    color: #ef3600;
    line-height: 26px;
}

.comp-table thead th {
    background: #ef3600;
    color: #fff;
}



.freq-body {
    clear: both;
}
.freq-body .container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

#myPageContent{ 
    height:100% !important; 
    width:100% !important;
    position: relative;
    background: #f9f9f9;
}


/* Slider */
#textSlider.row {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100% !important;
    border: 1px solid #ef3600;
}
#textSlider div {
    color: #2b2f45;
    text-transform: uppercase;
}

.iamCol {
    text-align: right;
    float: right;
    font-weight: 300;
    font-size:30pt;
}

.iamCol p{
    color: #ff8960;
    font-weight: 300;
    font-size: 20pt;
    line-height: 38pt;
}

.iamCol p:nth-child(2) { margin-top: -20pt !important; }
.slideCol {
    text-align: left;
    overflow: hidden;
    font-weight: 900;
    font-size:70pt;
    display: block;
    white-space: nowrap;
}
.slideCol p { 
    margin: 0px !important; 
    font-weight: 900;
    font-size:20pt;
    line-height: 70pt;
    text-align: right;
}

.scroller {
   height: 70pt;
   line-height: 70pt;
   overflow: hidden;
}
.scroller .inner { animation: 30s normal infinite running scroll; }
@keyframes scroll {
   
   0%   {margin-top: 0px;}
   3%   {margin-top: 0px;}

   4%  {margin-top: -70pt;}
   7%  {margin-top: -70pt;}
   
   8%  {margin-top: -140pt;}
   11%  {margin-top: -140pt;}

   12%  {margin-top: -210pt;}
   15%  {margin-top: -210pt;}

   16%  {margin-top: -280pt;}
   19%  {margin-top: -280pt;}

   20%  {margin-top: -350pt;}
   23%  {margin-top: -350pt;}

   24%  {margin-top: -420pt;}
   27%  {margin-top: -420pt;}

   28%  {margin-top: -490pt;}
   31%  {margin-top: -490pt;}

   32%  {margin-top: -560pt;}
   35%  {margin-top: -560pt;}

   36%  {margin-top: -630pt;}
   39%  {margin-top: -630pt;}

   40%  {margin-top: -700pt;}
   45%  {margin-top: -700pt;}

   46%  {margin-top: -770pt;}
   50%  {margin-top: -770pt;}

   51%  {margin-top: -840pt;}
   55%  {margin-top: -840pt;}

   56%  {margin-top: -910pt;}
   60%  {margin-top: -910pt;}

   61%  {margin-top: -980pt;}
   65%  {margin-top: -980pt;}

   66%  {margin-top: -1050pt;}
   70%  {margin-top: -1050pt;}

   71%  {margin-top: -1120pt;}
   75%  {margin-top: -1120pt;}

   76%  {margin-top: -1190pt;}
   80%  {margin-top: -1190pt;}

   81%  {margin-top: -1260pt;}
   85%  {margin-top: -1260pt;}

   86%  {margin-top: -1330pt;}
   90%  {margin-top: -1330pt;}

   91%  {margin-top: -1400pt;}
   97%  {margin-top: -1400pt;}

   100% {margin-top: 0px;}

   /*0%     {margin-top: 0px;}
   5%   {margin-top: 0px;}

   25%  {margin-top: -70pt;}
   40%  {margin-top: -70pt;}
   
   50%  {margin-top: -140pt;}
   65%  {margin-top: -140pt;}

   75%  {margin-top: -210pt;}
   90%  {margin-top: -210pt;}

   100%  {margin-top: -280pt;}
   115%  {margin-top: -280pt;}

   125%  {margin-top: -350pt;}
   140%  {margin-top: -350pt;}

   150%  {margin-top: -420pt;}
   165%  {margin-top: -420pt;}

   175%  {margin-top: -490pt;}
   190%  {margin-top: -490pt;}

   200%  {margin-top: -560pt;}
   215%  {margin-top: -560pt;}

   225%  {margin-top: -630pt;}
   240%  {margin-top: -630pt;}

   100% {margin-top: 0px;}*/
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) and (max-width : 479px) {
    #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
    .iamCol { text-align: center; font-size:20pt; }
    .iamCol p { display: inline !important; }
    .slideCol { font-size: 25pt; text-align: center; margin-top: -20px; }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (max-width : 765px) {
    #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
    .iamCol { text-align: center; font-size:25pt; }
    .iamCol p { display: inline !important; }
    .slideCol { font-size: 38pt; text-align: center; margin-top: -20px; }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (max-width : 992px) {
    #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
    .iamCol { text-align: center; font-size:30pt; }
    .iamCol p { display: inline !important; }
    .slideCol { font-size: 50pt; text-align: center; margin-top: 5px; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) and (max-width : 1200px) {
    #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
    .iamCol { text-align: right; font-size:30pt; }
    .slideCol { font-size: 55pt; text-align: left; }
}





.stick-logo{
    display: none;
}





/******************************************************************/
/***************************MOBILE*********************************/
/******************************CSS*********************************/
/******************************************************************/
/******************************************************************/

@media (max-width: 790px){
    .topweek{
        float: none;
        margin-bottom: 25px;
        clear: both;
    }
    .col-2{
        float: none;
        width: 100%;
    }
    .app-downloads{
        margin: 25px auto 0px auto;
    }
    .col-xs-6{
        width: 100%;
    }
    .schedule-list-mobile{
        clear: both;
        overflow: hidden;
    }
    .schedule-list-mobile .tile {
        overflow: hidden;
        width: 13.3%;
        height: 50px;
        margin-left: 3px;
        float: right;
        background-color: #ff8960;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        cursor: pointer;
    }
    .schedule-list-mobile .tile:last-child{
        margin: 0px;
    }
    .schedule-list-mobile .tile h3 {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        width: 100%;
        height: 30px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        font: 20px/30px 'droid arabic kufi', 'Raleway', sans-serif;
        /* font-weight: bold; */
        direction: rtl;
        font-size: 12px;
    }

    .schedule-list-mobile .tile:hover {
        background:#ff8960;
    }

    .schedule-list-mobile .active {
        background:#ff8960;
    }

    .schedule-content-mobile{
        width: 100%;
        clear: both;
        margin-top: 20px;
    }

    .schedule-list-m{
        overflow: hidden;
    }
    .schedule-list-m li.grid{
        width: 47%;
        margin: 0px;
        border-bottom: 1px solid #dedede;
        padding: 5px 0px;
        margin-bottom: 5px;
        min-height: 90px;
        float: left;
        margin-left: 20px;
    }
    .schedule-list-m li.grid .img{
        display: block;
        float: right;
        width: 20%;
    }
    .schedule-list-m .title{
        padding: 3px 13px 0px 0px;
        float: right;
        width: 75%;
    }
    .schedule-list-m .title h3 {
        font-size: 16px;
        margin-bottom: 6px;
        font-weight: bold;
    }
    .schedule-list-m .title h3 a{
        font-weight: bold;
    }
    .schedule-list-m li a, .schedule-list-m li span{
        color: #666;
        font-weight: 500;
    }
    .schedule-desktop{display: none !important;}
    #schedule-mobile{ display: block !important;  }

    .play-button-main{
        position: relative;
        top: 215px;
        right: -5%;
    }
    .listen, .listen:hover, .listen.active {
        background-size: 230px;
        height: 225px;
        width: 225px;
    }
    .player-text-continer h4{
        font-size: 13px;
    }
    
}
@media (max-width: 955px){
    .navbar-toggler{
        display: block;
    }
    .menu{
        float: none;
        margin-top: 15px;
        display: none;
        border-top: 0px solid #fff;
    }
    .video-list{
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 20px;
    }
    .video-link {
        position: relative;
        opacity: 1;
        text-align: center;
        margin: 0 auto;
        display: inherit;
    }
}
/** MOBILE CSS WIDTH:490 **/
@media (max-width: 490px){
    #home-new .logo{
        width: 100%;
        margin-top: 0px;
        margin: 0 auto;
        float: none;
        text-align: center;
    }
    #home-new .new-play{
        display: none;
    }

    .zero-margin{
        margin:0 0 15px; 
    }
    .program-tab{
        padding: 0px;
    }

    .video-list{
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 20px;
    }
    .video-link {
        position: relative;
        opacity: 1;
        text-align: center;
        margin: 0 auto;
        display: inherit;
    }
    .col-xs-6{
        width: 100%;
    }
    .presenter-tab{
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 20px;
    }

    .image-item{
        float: none;
    }
    .image-item img{
        width: 100%;
        margin-bottom: 5px;
    }
    .schedule-desktop{display: none !important;}
    #schedule-mobile{ display: block !important;  }
    .navbar-toggler{
        display: inline-block;
        margin: 8px 0px;
    }
    .menu{
        float: none;
        margin-top: 15px;
        display: none;
        border-top: 0px solid #fff;
    }
    .social-link{
        display: none;    
    }
    .topweekbody .list-unstyled li{
        float: none;
        width: 100%;
        margin: 0px;
    }
    .logo{
        width: 95px;
        float: left;
        margin-top: 5px;
        display: inline-block !important;
    }
    .menu > ul > li{
        margin:0px;
    }
    .menu > ul > li a{
        padding: 1em;
    }
    .logo-area{
        height: 250px;
        background-size: cover;
    }
    .play-button-main{
        position: relative;
        top: 151px;
        right: -3%;
    }
    .listen, .listen:hover, .listen.active {
        background-size: 150px;
        height: 170px;
        width: 145px;
    }
    .player-text-continer h4{
        font-size: 13px;
    }

    .col-xs-1, .col-xs-8, .col-xs-10, .col-xs-4{
        width: 100%;
        float: none;
        padding: 0px;
    }
    footer .border-left{
        border: 0px;
    }
    .col-one-by-two{
        width: 100%;
        float: none;
        text-align: center;
    }
    footer li{
        text-align: center;
    }

    .spacer{
        height: 10px;
    }
    .marquee-bg{ display: none !important; }
    .topweek{ margin-top: 0px; }
    .pull-right{ float: none !important; }


    .schedule-list-mobile{
        clear: both;
        overflow: hidden;
    }
    .schedule-list-mobile .tile {
        overflow: hidden;
        width: 13.3%;
        height: 50px;
        margin-left: 3px;
        float: right;
        background-color: #ff8960;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        cursor: pointer;
    }
    .schedule-list-mobile .tile:last-child{
        margin: 0px;
    }
    .schedule-list-mobile .tile h3 {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        width: 100%;
        height: 30px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        font: 20px/30px 'droid arabic kufi', 'Raleway', sans-serif;
        /* font-weight: bold; */
        direction: rtl;
        font-size: 12px;
    }

    .schedule-list-mobile .tile:hover {
        background:#ff8960;
    }

    .schedule-list-mobile .active {
        background:#ff8960;
    }

    .schedule-content-mobile{
        width: 100%;
        clear: both;
        margin-top: 10px;
    }

    .schedule-list-m{
        overflow: hidden;
    }
    .schedule-list-m li.grid{
        width: 100%;
        margin: 0px;
        border-bottom: 1px solid #dedede;
        padding: 5px 0px;
        margin-bottom: 5px;
        min-height: 85px;
    }
    .schedule-list-m li.grid .img{
        display: block;
        float: right;
        width: 20%;
    }
    .schedule-list-m .title{
        padding: 3px 13px 0px 0px;
        float: right;
        width: 75%;
    }
    .schedule-list-m .title h3 {
        font-size: 16px;
        margin-bottom: 6px;
        font-weight: bold;
    }
    .schedule-list-m .title h3 a{
        font-weight: bold;
    }
    .schedule-list-m li a, .schedule-list-m li span{
        color: #666;
        font-weight: 500;
    }

    .footer-bottom {
        left: 0;
        position: fixed;
        width: 100%;
        z-index: 999999;
        bottom: 0;
        height: 60px;
        overflow: hidden;
        top: auto;
        display: block;
    }
    .jp-controls{
        display: inline-block;
        float: left;
        text-align: center;
        width: 30%;
        overflow: hidden;
    }
    .jp-volume-controls{
        margin: auto;
        padding: 12px 0px 10px 10px;
        text-align: center;
        width: 40%;
        display: block;
        float: right;
        overflow: hidden;
    }

    .mainmenu-area.stick .stick-logo{
        display: inline-block;
        float: left;
    }

} /** 490 WIDTH **/


.bg-frequency-main{
    width: 23%;
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
}
.bg-frequency{
    width: 100%;
    color: #ffffff;
}
.bg-frequency-1{
    background: rgb(0,205,255);
}
.bg-frequency-2{
    background: rgb(255,129,0);
    
}
.bg-frequency-3{
    background: rgb(245,12,150);
}
.bg-frequency-4{
    background: rgb(104,199,0);
}
.bg-frequency-5{
    background: rgb(0,0,0);
}
.bg-frequency-6{
    background: rgb(255,255,255);
}
.card-title {
    margin-bottom: 0.75rem;
    font-size: 16px;
    font-weight: 700;
}

#cookie-law-info-bar{
    font-size: 12pt;
    margin: 0 auto;
    padding: 12px 0px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    z-index: 9999;
    box-shadow: rgba(0,0,0,.5) 0px 5px 50px;
    left: 0px;
    font-weight: 300;
    background: linear-gradient(90deg, rgba(255,230,0,1) 0%, rgba(255,137,96,1) 49%, rgba(255,37,199,1) 100%);
    color: rgb(255, 255, 255);
    font-family: inherit;
    bottom: 0px;
    position: fixed;
    display: none;
}
#cookie-law-info-bar span {
    vertical-align: middle;
}
.cookie_action_close_header{
    display: inline-block; 
    color: rgb(74, 130, 219); 
    background-color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin-top: 5px;
    padding: 10px 16px 10px;
    position: relative;
    cursor: pointer;
    margin-left: 0px;
}
.iframe-leaderboard {
    width: 730px;
    display: block;
    margin: 10px auto;
    height: 90px;
}
.iframe-leaderboard.main {
    margin-bottom: 30px;
}
.iframe-sticky-bottom-mobile {
    width: 100.5%;
    display: none;
    margin: 10px auto;
    height: 50px;
    padding-left: 4%;
}

@media (max-width: 490px){
    #cookie-law-info-bar{
        bottom: 60px;
    }
    .iframe-leaderboard{
        display:none;
    }
    .iframe-sticky-bottom-mobile{
        display:block;
    }
}



/*======================
TRENDING
=======================*/

.trending-main{
    background-color: #e6e6e6;
    border-bottom: 1px solid #f5f5f5;
    width: 100%;
    padding: 5px 0px; 
}
.trending-menu-links{
    list-style: none;
    margin: 3px 25px;
}
.trending_links_item{
    float: right;
    margin: 0px;
    padding: 10px;
    font-family: 'droid arabic kufi';
}
.trending_link{
    color: #ef3500;
    font-style: normal;
    position: relative;
    border-left: 2px solid #777;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    font-family: 'droid arabic kufi';
    padding-left: 10px;
}
.trending_links_item:last-child .trending_link{
    border-left: 0px;
}
.first-link{
    display: block;
    font-size: 16px;
    padding-left: 10px;
    font-family: 'droid arabic kufi';
}

@media (max-width: 600px){
    .trending_links_item{
        float: none;
        padding: 5px;
    }
    .trending_link{
        border-left: 0px;
        font-size: 12px;
    }
    .first-link{
        font-size: 12px;
    }
}


.podcast-box{
    background: #f7f7f7;
    padding: 10px;
    text-align: center;
    margin:20px 16px;
    box-shadow:0 4px 8px 0 rgb(128 1 158);
}

.podcast-box-link{
    color: #ff8960;
}

.podcast-tab{
    color: #ff8960;
    background-color: #f5f5f5;
    border-color: #ff8960;
    border-radius: 4px;
    margin: 20px 35px;
    border-color: #ff8960;
    box-shadow: 0 1px 1px rgb(128 1 158);
}

.btn-info {
    color: #fff;
    background-color: #ff8960;
    border-color: #ff8960;
}
.btn-info:hover {
    color: #fff;
    background-color: #64ff2b;
    border-color: #64ff2b;
    color: #000;
}



/****  schedule  *****/

.schedule-list-mobile{
        clear: both;
        overflow: hidden;
    }
    .schedule-list-mobile .tile {
        overflow: hidden;
        width: 13.3%;
        height: 50px;
        margin-left: 3px;
        float: right;
        background-color: #ff8960;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        cursor: pointer;
    }
    .schedule-list-mobile .tile:last-child{
        margin: 0px;
    }
    .schedule-list-mobile .tile h3 {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        width: 100%;
        height: 30px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        font: 20px/30px 'droid arabic kufi', 'Raleway', sans-serif;
        /* font-weight: bold; */
        direction: rtl;
        font-size: 12px;
    }

    .schedule-list-mobile .tile:hover {
        background:#ff8960;
    }

    .schedule-list-mobile .active {
        background:#ff8960;
    }

    .schedule-content-mobile{
        width: 100%;
        clear: both;
        margin-top: 10px;
    }

    .schedule-list-m{
        overflow: hidden;
    }
    .schedule-list-m li.grid{
        width: 46%;
        margin: 0px;
        border-bottom: 1px solid #dedede;
        padding: 5px 0px;
        margin-bottom: 5px;
        min-height: 95px;
        float: right;
        margin-left: 30px;
    }
    .schedule-list-m li.grid .img{
        display: block;
        float: right;
        width: 20%;
    }
    .schedule-list-m .title{
        padding: 3px 13px 0px 0px;
        float: right;
        width: 75%;
    }
    .schedule-list-m .title h3 {
        font-size: 16px;
        margin-bottom: 6px;
        font-weight: bold;
    }
    .schedule-list-m .title h3 a{
        font-weight: bold;
    }
    .schedule-list-m li a, .schedule-list-m li span{
        color: #666;
        font-weight: 500;
    }


.mainbody{
    background: #fff;
    box-shadow: 0px 0px 10px;
    padding-top: 20px;
}
#presenter-list{
    height: auto;
    overflow: hidden;
    margin-bottom: 25px;
}

.frequency-table{
    color:#ff8960;
    border:1px solid #ff8960;
}
.frequency-table tr th{
    border:1px solid #ff8960 !important;
    text-align:right;
}
.frequency-table tr td{
    border:1px solid #ff8960;
    text-align:right;
}