/* YOUR CUSTOM STYLES */

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

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

html {
    direction: rtl;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    html {
        margin-left: 1px;
    }

}

body {
    font-family: 'DINNextLTArabic-Regular';
    text-align: right;
}

ul {
    padding: 0;
}

ul, ul li {
    list-style: none;
}

header {
    background-color: #245679;
    /*height: 100px;*/
    border-bottom: 5px solid #fdc601;
    box-shadow: 1px 1px 4px -1px #888;
    /*margin-top: 15px;*/
    position: relative;
    z-index: 999999999999;
}

[type=checkbox], [type=radio] {
    left: auto;
    right: -9999px;
}

[type=checkbox]+label, [type=radio]+label {
    padding-left: 0;
    padding-right: 25px;
}

[type=checkbox]+label:before,
[type=radio]+label:after, [type=radio]+label:before {
    left: auto;
    right: 0;
    top: 3px;
}

[type=checkbox]:checked+label:before {
    left: auto;
    right: 9px;
    top: -2px;
}

.logo img {
    height: 70px;
    width: 70px;
    z-index: 99;
    position: relative;
}

.header-first-part {
    position: relative;
}

.manar-info {
    color: #fff;
    padding: 5px;
    text-align: center;
    margin-top: 5px;
}

#menu-toggle {

}

/*#menu-toggle.active a {*/
    /*background-color: #fff;*/
    /*color: #00d3ff;*/
/*}*/

#menu-toggle  {
    /*background-color: transparent;*/
    /*color: #fff;*/
    /*border: none;*/
    /*font-size: 22px;*/
    /*border-radius: 5px 5px 0 0;*/
    /*padding: 0;*/
    /*font-family: 'DINNextLTArabic-Bold';*/
    /*cursor: pointer;*/
}

.menu-bars {
    color: #00d3ff;
    font-size: 26px;
}

.side-nav .collapsible a {
    padding-right: 5px;
}

.navigation {
    display: none;
    position: absolute;
    bottom: -131px;
    z-index: 5;
}

.header-left {
    color: #fff;
}

.header-left .header-search {
    margin-top: 0;
    position: absolute;
    right: -165px;
    width: 200px;
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    top: 3px;
    display: none;
}

table.gsc-search-box {
    margin: 0;
}

.header-search input.gsc-search-button {
    /*display: none;*/
    background: url(/images/magnifier.png) no-repeat !important;
    text-indent: -9999em;
    width: 33px;
    min-width: 33px;
    background-position: center !important;
    height: 35px;
    border: 1px solid #fdc601 !important;
    border-radius: 0 !important;
    margin-right: 0;
}

/*.header-search td.gsc-search-button {*/
    /*border: 1px solid #fdc601;*/
/*}*/

.header-search input.gsc-input {
    border-color: #fff;
    height: 33px;
    text-indent: 5px !important;
    padding: 0 6px;
}

.header-search td.gsc-input {
    /*border-bottom: 1px solid #fff;*/
}

@-moz-document url-prefix() {
    .header-search td.gsc-input {
        border-top: 1px solid #fff;
    }
}

.header-search form.gsc-search-box,
.header-search table.gsc-search-box {
    margin: 0;
}

.header-search ::-webkit-input-placeholder { /* WebKit browsers */
    color: transparent;
}
.header-search :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: transparent;
}
.header-search ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: transparent;
}
.header-search :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: transparent;
}

input.gsc-search-button {
    height: 2.1rem;
    border-radius: 0;
    border-color: #245679;
}

.cse input.gsc-input, input.gsc-input {
    padding: 0 6px;
}

.gsc-refinementsArea,
.gsc-above-wrapper-area {
    display: none;.
}

.gsc-table-result,
.gsc-control-cse {
    font-family: Droid Arabic Kufi,sans-serif;
}

.gsc-table-cell-snippet-close,
.gs-promotion-text-cell {
    padding-right: 15px;
}

.gsc-input {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
}

.gsc-clear-button {
    display: none;
}

.cse .gsc-control-cse, .gsc-control-cse {
    padding: 0 !important;
    border: none !important;
}

.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
    border-color: #e7e7e7 !important;
}

.gsc-webResult.gsc-result:last-of-type, .gsc-results .gsc-imageResult:last-of-type {
    border: none !important;
}

.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
    font-family: "Droid Arabic Kufi",​sans-serif !important;
}

.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
    font-family: "Droid Arabic Naskh",sans-serif !important;
    font-size: 12px !important;
    line-height: 20px !important;
}

.gsc-result .gs-title {
    height: 1.6em !important;
    line-height: 1.6em !important;
}

.gcsc-branding {
    display: none;
}

div[class^="gsc-adB"] {
    display: none;
}

.gsc-completion-container > tbody > tr:last-child {
    visibility: hidden;
}

.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b,
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
    color: #245679 !important;
}

.header-left .social-icons {
    position: absolute;
    top: 50%;
    transform: translateY(-53%);
    left: 0;
}

.header-left .social-icons a{
    font-size: 1.5rem;
    margin: 0;
    color: #fff;
}

@media (max-width: 992px) {
    .header-left .social-icons a {
        font-size: 1rem;
    }
}

.header-search .md-form {
    margin-bottom: 0;
}

.header-search .md-form.form-sm label {
    right: 0;
}

.header-search .md-form .prefix {
    left: 0;
    width: 2rem;
    top: 1rem;

}

main {
    margin-top: 20px;
}

.top-section {
    margin-bottom: 15px;
}

.pagination .page-item.disabled {
    display: none;
}

.videoWrapper {
    overflow: hidden;
}

.videoWrapper.yt {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper.yt iframe {
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.singular .card-block {
    display: none;
}

.card-text {
    padding: 0 10px 10px;
    line-height: 1.5em;
    color: #245679;
    text-align: justify;
}

.singular .slick-prev,
.singular .slick-next {
    top: auto;
    transform: none;
    bottom: -25px;
    z-index: 100;
}

.slick-prev i,
.slick-next i {
    color: #245679;
}

.singular .slick-prev {
    right: 5px;
}

.singular .slick-next {
    left: 5px;
    right: auto;
}

/*.singular .slick-prev::before,*/
/*.singular  .slick-next::before {*/
    /*color: #245679;*/
/*}*/

/*.singular .slick-prev::before {*/
    /*content: "→";*/
/*}*/

/*.singular .slick-next::before {*/
    /*content: "←";*/
/*}*/

.singular .card {
    box-shadow: none;
}

.singular .img-card-container {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    position: relative; /* If you want text inside of it */
}

.singular .img-card-container img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

[dir='rtl'] .responsive .slick-prev,
[dir='rtl'] .responsive-3 .slick-prev {
    right: 10px;
}

[dir='rtl'] .responsive .slick-next,
[dir='rtl'] .responsive-3 .slick-next {
    left: 10px;
}

[dir='rtl'] .responsive .slick-arrow,
[dir='rtl'] .responsive-3 .slick-arrow {
    top: 27px;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
    height: 35px;
    width: 35px;
}

[dir='rtl'] .responsive .slick-arrow:before,
[dir='rtl'] .responsive-3 .slick-arrow:before {
    opacity: 1;
    color: #fdc601;
}

.responsive .slick-prev i,
.responsive-3 .slick-prev i,
.responsive .slick-next i,
.responsive-3 .slick-next i {
    color: #fff;
    font-size: 26px;
}

.responsive,
.responsive-3 {
    display: none;
}

.slick-initialized {
    display: block !important;
    animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.card-datetime {
    height: 100%;
    background-color: #fdc601;
    text-align: center;
}

.card-date {
    background-color: #245679;
    color: #fdc601;
    border-bottom: 5px solid #fff;
    height: 60%;
}

.card-date,
.card-time {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    justify-content: center;
    line-height: 23px;
    padding: 3px;
}

@media (max-width: 1200px) {
    .card-date,
    .card-time {
        font-size: 13px;
        line-height: 20px;
    }
}

@media (min-width: 786px) and (max-width: 992px) {
    .card-date {
        height: 100%;
        border: none;
    }

    .card-time {
        display: none;
    }
}

.card-date i,
.card-time i{
    margin-bottom: 6px;
}

.card-date *,
.card-time * {
    margin-bottom: 3px;
}

.card-date *:last-child {
    margin-bottom: 0;
}

.card-time {
    color: #245679;
    height: 40%;
}

.no-left-pad {
    padding-left: 0;
}

.right-pad-5 {
    padding-right: 5px;
}

.top-section .slick-dots li {
    border: 2px solid #fdc601;
    border-radius: 50%;
}

.top-section .slick-dots li button {
    border-radius: 50%;
}

/*.top-section .slick-dots li button::before {*/
    /*background-color: #245679;*/
    /*border-radius: 50%;*/
    /*content: "";*/
    /*height: 9px;*/
    /*left: 2px;*/
    /*opacity: 0;*/
    /*position: absolute;*/
    /*text-align: center;*/
    /*top: 2px;*/
    /*width: 9px;*/
/*}*/

.top-section .slick-dots li button {
    height: 10px;
    width: 10px;
    background-color: #245679;
}

.top-section .slick-dots li {
    padding: 2px;
}

.top-calendar {
    padding: 5px;
    overflow: hidden;
}

.section-head {
    border-bottom: 4px solid #245679;
    margin-bottom: 10px;
}

.section-head h2 {
    display: inline-block;
    margin-bottom: 13px;
    position: relative;
    color: #245679;
    font-weight: bold;
    font-size: 26px;
}

.section-head h2::after {
    border-bottom: 4px solid #fdc601;
    bottom: -17px;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
}

.no-shadow {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.slider .slick-slide .card {
    margin: 10px;
}

.top-calendar .slider .slick-slide .card {
    margin: 0;
}

.bottom-sections .slick-dots li {
    border: 2px solid #245679;
    border-radius: 50%;
}

.bottom-sections .slick-dots li button {
    border-radius: 50%;
}

.slick-dots li.slick-active button {
    opacity: 1;
}

.slick-dots li button {
    opacity: 0;
}

/*.bottom-sections .slick-dots li button::before {*/
    /*background-color: #32cbfd;*/
    /*border-radius: 50%;*/
    /*content: "";*/
    /*height: 13px;*/
    /*left: 2px;*/
    /*opacity: 0;*/
    /*position: absolute;*/
    /*text-align: center;*/
    /*top: 2px;*/
    /*width: 13px;*/
/*}*/

.videos-section {
    margin-bottom: 15px;
}

.videos-section .card-block {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.videos-section .card-title {
    border-bottom: 1px solid #ddd;
    color: #245679;
    /*padding-bottom: 15px;*/
    font-size: 20px;
    line-height: 1.5em;
    margin-bottom: 0;
}

.program-archive .card-block small,
.videos-section .card-block small {
    color: #888a85;
}

.videos-section .card-block a {
    background-color: #245679;
    color: #fdc601 !important;
    font-weight: bold;
}

.latest-videos .card,
.related-section .card {
    box-shadow: none;
}

.latest-videos .card-block,
.related-section .card-block {
    padding: 0.3rem;
}

.latest-videos .card-title,
.related-section .card-title {
    border-bottom: none;
}

.latest-videos .img-card-container,
.related-section .img-card-container {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.episode-video {
    position: relative;
    overflow: hidden;
}

.video-navigation {
    padding: 0 10px 0 0;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    bottom: 30px;
    right: -100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.episode-video:hover .video-navigation {
    right: 0;
}

.fb-share-button span {
    vertical-align: top !important;
}

.episode-share {
    margin-top: 5px;
}

.navigation-list {
    padding-left: 15px;
}

ul.navigation-list > li {
    padding: 10px 5px;
    text-align: center;
}

ul.navigation-list > li a {
    color: #00d3ff;
}

ul.navigation-list > li:not(:last-child) {
    border-bottom: 1px solid #00d3ff;
}

.video-sub-navigation a {
    font-size: 80%;
    color: #eee !important;
}

.rating-stars input:disabled {
    display: none;
}

.img-card-container {
    position: relative;
}

.program-archive .card-block {
    padding: 5px;
}

.program-archive .card-title {
    font-size: 18px;
    line-height: 1.5em;
    margin-bottom: 0;
}

.program-archive .card {
    margin-bottom: 10px;
}


#timeline-wrapper {
    /*background-image: url("https://www.walldevil.com/wallpapers/a76/background-blue-blurry-wallpapers.jpg");*/
    background: radial-gradient(ellipse at right, rgba(254,255,255,1) 0%,rgba(75,101,117,1) 59%,rgba(36,86,121,1) 100%);
}

body #timeline-wrapper .timeline-top .top-year > span {
    font-size: 3rem;
}

body #timeline-wrapper .timeline-block {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 20px;
}

body #timeline-wrapper .timeline-block:after {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    background-color: #fff;
    left: 50%;
    top: 0;
    margin-left: -2px;
}

body #timeline-wrapper .timeline-block .timeline-events .l-event {
    float: left;
    position: relative;
}

body #timeline-wrapper .timeline-block .timeline-events .l-event .thumb {
    right: 0;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

body #timeline-wrapper .timeline-block .timeline-events .l-event:before, body #timeline-wrapper .timeline-block .timeline-events .l-event:after {
    position: absolute;
    content: '';
    color: #333;
    width: 52px;
    height: 52px;
    background: #fff;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    border-radius: 50%;
    z-index: 4;
    top: 50%;
    right: 0;
}

body #timeline-wrapper .timeline-block .timeline-events .l-event:after {
    width: 60px;
    height: 60px;
    z-index: 3;
    border-radius: 50%;
    background: #6a8098;
    border: 2px solid #fff;
}

body #timeline-wrapper .timeline-block .timeline-events .l-event .event-body:before {
    position: absolute;
    content: '';
    color: #333;
    width: 16px;
    height: 16px;
    background: #fff;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    -webkit-transform: rotate(45deg) translate(-50%, -50%);
    transform: rotate(45deg) translate(-50%, -50%);
    right: -24px;
    top: 60px;
}

body #timeline-wrapper .timeline-block .timeline-events .r-event {
    float: right;
    position: relative;
}

body #timeline-wrapper .timeline-block .timeline-events .r-event .thumb {
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

body #timeline-wrapper .timeline-block .timeline-events .r-event:before, body #timeline-wrapper .timeline-block .timeline-events .r-event:after {
    position: absolute;
    content: '';
    color: #333;
    width: 52px;
    height: 52px;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    top: 50%;
    left: 0;
    z-index: 4;
}

body #timeline-wrapper .timeline-block .timeline-events .r-event:after {
    width: 60px;
    height: 60px;
    z-index: 3;
    border-radius: 50%;
    background: #6a8098;
    border: 2px solid #fff;
}

body #timeline-wrapper .timeline-block .timeline-events .r-event .event-body {
    float: right;
    /*-webkit-transform: perspective(1000px) rotateY(-4deg);*/
    /*transform: perspective(1000px) rotateY(-4deg);*/
    flex-direction: row-reverse;
}

body #timeline-wrapper .timeline-block .timeline-events .r-event .event-body:before {
    position: absolute;
    content: '';
    color: #333;
    width: 16px;
    height: 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    -webkit-transform: rotate(45deg) translate(-50%, -50%);
    transform: rotate(45deg) translate(-50%, -50%);
    top: 60px;
    left: -23px;
}

body #timeline-wrapper .timeline-block .event {
    min-height: 100px;
    background: none;
    position: relative;
    margin-top: 20px;
    padding: 0 40px;
}

body #timeline-wrapper .timeline-block .event .thumb {
    font-size: 20px;
    position: absolute;
    top: 50%;
    color: #6a8098;;;
    z-index: 5;
    /*margin-top: -4px;*/
    line-height: 0.7;
    text-align: center;
}

body #timeline-wrapper .timeline-block .event .event-body {
    /*background-color: #fff;*/
    min-height: 100px;
    width: 100%;
    position: relative;
    display: flex;
}

body #timeline-wrapper .timeline-block .event .event-body .event-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #00000044;
    color: #fff;
    font-size: 20px;
}

.program-image img {
    border-radius: 0;
    max-width: 200px;
}

.event-episode-name {
    color: #fdc601;
}

.event-absolute {
    position: absolute;
    bottom: 0;
    right: 0;
}

.l-event .event-absolute {
    right: 0;
    left: auto;
    font-size: 11px;
}

.r-event .event-absolute {
    left: 0;
    right: auto;
    font-size: 11px;
}

.event-replay {
    padding: 0 10px 3px;
    color: #fff;
    background-color: orange;
}

.event-include {
    padding: 0 10px 3px;
    color: #fff;
    background-color: darkgreen;
}

.event-live {
    padding: 0 10px 3px;
    color: #fff;
    background-color: darkred;
}

@media (max-width: 768px) {

    body #timeline-wrapper .timeline-block .timeline-events .r-event .event-body:before,
    body #timeline-wrapper .timeline-block .timeline-events .l-event .event-body:before {
        display: none;
    }

    body #timeline-wrapper .timeline-block .timeline-events .l-event:before, body #timeline-wrapper .timeline-block .timeline-events .l-event:after {
        right: 40px;
    }

    body #timeline-wrapper .timeline-block .timeline-events .l-event .thumb {
        right: 40px;
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event:before, body #timeline-wrapper .timeline-block .timeline-events .r-event:after {
        left: 40px;
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event .thumb {
        left: 40px;
    }

    body #timeline-wrapper .timeline-top {
        text-align: right;
        padding-right: 20%;
    }

    body .timeline-block {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    body .timeline-block:after {
        content: "";
        position: absolute;
        height: 100%;
        background-color: #333;
        left: 5%;
        top: 0;
        margin-left: -3px;
        display: none;
    }

    .top-calendar {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .widget {
        margin-bottom: 15px;
    }

    .episode-video {
        margin-bottom: 15px;
    }

    .video-navigation {
        position: static;
        background-color: transparent;
        max-height: 300px;
        margin: 5px 0;
    }

    ul.navigation-list > li {
        text-align: inherit;
    }

}

body .social {
    color: #999;
    letter-spacing: 1px;
}
body .social i {
    background: #eee;
    color: #777;
    padding: 5px;
    border-radius: 50%;
}
body .social i:hover {
    color: #111;
}

@-webkit-keyframes light {
    to {
        color: #111;
    }
}
@keyframes light {
    to {
        color: #111;
    }
}

.schedule-datepicker {
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    width: 100%;
    color: #fff;
}

.wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    float: left;
    /*width: 120px;*/
    /* Styles */
    cursor: pointer;
    outline: none;

    /* Font settings */
    color: #fff;
}

.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -15px;
    top: 50%;
    /*margin-top: -3px;*/
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #fff transparent;
}

.wrapper-dropdown-3 .dropdown {
    /* Size & position */
    position: absolute;
    top: 140%;
    left: 0;
    width: 140px;
    z-index: 999;

    /* Styles */
    background: white;
    border-radius: inherit;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    transition: all 0.5s ease-in;
    list-style: none;


    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-3 .dropdown li.active {
    background-color: rgba(36, 86, 121, 0.56);
}

.wrapper-dropdown-3 .dropdown li.active a {
    color: #fff;
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    text-align: left;
    color: #245679;
    border-bottom: 1px solid rgba(36, 86, 121, 0.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    transition: all 0.3s ease-out;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
    background: rgba(36, 86, 121, 0.56);
}

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: initial;
}

/* Radial Out */
.hvr-radial-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-radial-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000015;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.event:hover .hvr-radial-out:hover, .event:focus .hvr-radial-out, .event:active .hvr-radial-out:active {
    color: white;
}

.event:hover .hvr-radial-out:before, .event:focus .hvr-radial-out:before, .event:active .hvr-radial-out:before {
    -webkit-transform: scale(2);
    transform: scale(2);
}


.category-section .card .card-block {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    bottom: -100%;
    right: 0;
    left: 0;
    padding: 5px 10px;
    transition: all 0.2s ease;
}

.category-section .card:hover .card-block {
    bottom: 0;
}

.card .img-card-container {
    overflow: hidden;
}

.img-card-container img {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    width: 100%;
}

.card:hover .img-card-container img {
    transform: scale(1.2);
}

.card:hover .play-border .fa-play {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    color: #c60000;
}


.play-container {
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    box-shadow: 0 0 4px 0 #111;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    padding: 3px;
    z-index: 99;
}

.play-border {
    height: 44px;
    width: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 38px;
}

.play-border .fa-play {
    margin-left: 3px;
}

div.vast-skip-button {
    bottom: auto;
    top: 0;
    right: auto;
    left: 0;
    border-right: 1px solid white;
}

.widgets-section {
    margin-top: 20px;
    padding: 20px 0;
    background-color: #f5f5f5;
}

.widget {
    border: 1px solid #3c88a3;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0 0 1px #444;
}

.polls-widget {
    padding: 10px;
    background-color: #fff;
}

.polls-result-form h1 {
    font-size: 1rem;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    color: #005a78;
    padding-bottom: 10px;
}

.poll-submit {
    margin: 0;
}

.polls-result-show h2 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    line-height: 2rem;
    text-align: justify;
}

.polls-result-show h3 {
    font-size: 1.2rem;
}

.btn-poll {
    background-color: #005a78 !important;
    color: #fdc601 !important;
    font-weight: bold;
    font-size: 0.8rem !important;
}

.weather-widget {

}

.weather-today {
    background-color: #00d3ff;
    padding: 10px;
    color: #fff;
    font-size: 26px;
    border-bottom: 3px solid #fff;
}

.max-temp {
    font-size: 36px;
    margin: 10px 0 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
}

.min-temp {
    color: #005a78;
}

.wind-speed {
    font-size: 12px;
}

.others-weather {
    background-color: #005a7a;
    color: #fdc601;
}

.others-weather [class*=col]:not(:last-child) {
    border-left: 3px solid #fff;
}

.others-weather [class*=col] {
    padding-bottom: 5px;
    padding-top: 5px;
}

.widget .prayer-times {
    padding-bottom: 10px;
    background-color: #fff;
}

.prayers-header {
    padding-bottom: 5px;
    color: #245679;
}

.prayers-header a {
    color: #245679;
}

.prayers-header strong {
    font-weight: bold !important;
}

.mosque-image {
    position: relative;
    margin-bottom: 25px;
}

.mosque-image img {
    border-radius: 0;
}

.mosque-image time {
    padding: 5px 20px;
    color: #fdc601;
    position: absolute;
    bottom: -15px;
    background-color: #245679;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 0 2px 0 #444;
    right: 50%;
    transform: translateX(50%);
}

.times-list {
    padding: 0 10px;
}

.times-list ul {
    margin: 0;
}

.times-list li {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
}

.times-list li:not(:last-child) {
    border-bottom: 1px solid #eaeae9;
}

.times-list span {
    width: 60%;
    color: #245679;
}

.times-list time {
    width: 40%;
    border-right: 1px solid #eaeae9;
    color: #00d3ff;
}

.program-cover {
    margin-bottom: 20px;
}

.programs-tab .nav-tabs {
    background-color: #245679;
}

.programs-tab .tab-content {
    overflow-y: scroll;
}

.tab-content {
    border-radius: 0;
}

.program-info .social-icons .icons-sm:first-child {
    padding-right: 0;
    margin-right: 0;
}

.program-info .social-icons .fa-facebook {
    color: #3B5998;
}

.program-info .social-icons .fa-twitter {
    color: #1DA1F2;
}

.program-info .social-icons .fa-youtube {
    color: #cc181e;
}

.program-info .social-icons .fa-whatsapp,
.program-info .social-icons small {
    color: #34af23;
}

.programs-tab .nav-tabs .nav-item.show .nav-link,
.programs-tab .nav-tabs .nav-link.active {
    background-color: transparent;
    border: none;
    border-bottom: 4px solid #fdc601;
    color: #00d3ff;
}

.programs-tab .nav-tabs .nav-link {
    border: none;
    color: #fff;
}

.programs-tab .tab-pane {
    padding: 10px 10px 10px 15px;
}

.episode-details li:not(:last-child) {

}

.program-row-title {
    color: #00d3ff;
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
}

li:first-of-type .program-row-title {
    padding-top: 0;
}

.program-row-content {
    color: #666;
}

footer {
    background-color: #245679;
    border-top: 5px solid #fdc601;
    color: #fff;
}

.footer-top,
.footer-middle,
.footer-bottom {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #fdc601;
}

footer .social-icons a {
    font-size: 1.5rem;
    color: #fff;
}

.footer-menu h2 {
    font-size: 20px;
    color: #fdc601;
}

.footer-menu a {
    color: #fff;
}

.footer-menu a:hover {
    text-decoration: underline;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}

@media (max-width: 768px) {
    .logo img {
        width: 55px;
        height: 55px;
    }
}

.side-nav {
    position: static;
    width: auto;
    left: auto;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    background-color: #245679;
    overflow-y: scroll;;
}

.mobile-menu {
    border-left: 5px solid #fdc601;
    /*padding: 10px;*/
}

.menu-toggle-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

.menu-toggle-container .menu-bars {
    color: #fff;
}

.js-slideout-close {
    position: absolute;
    left: 10px;
    font-weight: bold;
    font-size: 29px;
    top: -7px;
    color: #ff5f5f;
    z-index: 9999;
}

.js-slideout-toggle {
    background-color: transparent;
    border: none;
    color: #fff;
}

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    min-height: 100vh;
    /*overflow-y: scroll;*/
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
}

.slideout-menu-left {
    left: 0;
}

.slideout-menu-right {
    right: 0;
}

.slideout-panel {
    position: relative;
    z-index: 1;
    will-change: transform;
    background-color: #FFF; /* A background-color is required */
    min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open .slideout-menu {
    display: block;
}

.main-menu {
    text-align: center;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}

.main-menu li {
    display: inline-block;
    padding: 3px 0;
}

.main-menu li:not(:last-child) {
    border-left: 1px solid #fff;
}

.main-menu a {
    transition: all 0.3s linear;
    color: #fff;
    /*font-size: 1.3rem;*/
    display: block;
    padding: 0 10px;
    margin-top: -5px;
}

#menu-toggle .active,
.main-menu a:hover {
    color: #00d3ff;
}

.main-menu a i {
    font-size: 10px;
}