@media (max-width: 1200px) {
    /* .posts-cards-block .card:first-child {
        height: 800px;
    } */

    .section-title {
        font-size: 20px;
    }

    .hero-main .slider-posts>div {
        padding: 0 20px;
    }

    .hero-main .slide .slide-title {
        bottom: 120px;
        padding-right: 1rem !important;
    }

    .hero-main .slide .slide-title h3 {
        font-size: 22px;
    }

    .hero-main .slider-posts {
        height: 100px;
        margin-top: -100px;
    }

    .breaking-news-slider {
        height: max-content;
    }

    .posts-cards-block .card {
        width: calc(50% - 15px);
        /* height: 400px; */
    }

    .darkbox-post-content {
        width: 100%;
        padding-bottom: 0;
    }

    .darkbox-post-sub-container {
        margin-top: 0px;
        padding: 0;
        width: 100%;
    }

    .darkbox-post-sub-item {
        margin-top: 20px;
    }

    .darkbox-post-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .darkbox-post-section .postcard-title-side .post-time-ago {
        display: block;
        color: var(--light);
        font-size: 12px !important;
    }


    /* article.single header {
        height: calc(100vw * (900/1600))
    } */

    article.single.video>header,
    article.single.video>header video {
        height: calc(100vw * (900/1600));
    }

    .hero-main .embed-responsive iframe {
        width: 100%;
        height: calc((100vw + 15px) * 9 / 16);
        padding: 10px;
        background-color: #fff;
        pointer-events: none;
    }

    article.single.youtube header {
        height: calc(100vw * (900/1600));
    }

    article.single header h1 {
        width: 100%;
        font-size: 25px;
        /* line-height: 40px; */
    }

    .single-post-content {
        width: 100%;
    }

    /* article:not(:first-of-type) .post-content-warper {
        height: 150px;
        overflow: hidden;
        position: relative;
    }

    article:not(:first-of-type) .post-content-warper::after {
        content: 'إقرا المزيد';
        position: absolute;
        bottom: -50px;
    }

    article:not(:first-of-type) .post-content-warper::after {
        right: 0;
    }

    article:not(:first-of-type) .post-content-warper::after {
        left: 0;
    } */

}

@media (max-width: 992px) {

    [dir=rtl] .breaking {
        margin-right: 0px;
    }

    .stories-container {
        width: 100vw!important;
    }
    
    .breaking {
        margin-left: 0px;
    }

    .about-us-content {
        transform: translateY(0);
        margin-top: 20px;
    }

    .post-template-card .card-subtitle {
        /* display: none!important; */
        font-size: 13px;
        margin: 0;
        padding: 2px 5px;
    }

    .post-template-card .subtitle {
        margin-top: -24px;
    }

    .post-template-card__title {
        font-size: 13px;
    }

    .post-template-card.variant-title-inside .post-template-card__content {
        padding: 10px !important;
    }

    #wpadminbar {
        display: none;
    }

    .breaking {
        width: 100% !important;
    }

    article.single header video {
        /* height: calc((65vw - 215px) * (900/1600)); */
        max-height: calc(100vh - 67px)
    }

    .hero-main video {
        width: 100vw;
    }

    .gallery-grid .gallery-plus {
        font-size: 2rem;
    }

    .hero-main {
        width: calc(100vw) !important;
        position: relative;
    }

    .hero-main>div:first-child,
    .hero-main .slider,
    .hero-main .slide {
        height: calc((100vw) * (1080 / 1920)) !important;
    }

    .collapse:not(.show) {
        display: block !important;
    }

    .navbar-toggler {
        display: none;
    }

    .default-template .side-header.collapsed .side-header-inner>section:nth-child(2) {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .default-template .side-header.collapsed {
        background-color: transparent;
        top: -84px;
        height: 0px;
        overflow: hidden;
        position: relative!important;
    }

    .main-container {
        transform: translateX(0px);
        transition: .5s;
    }

    .default-template .side-header section {
        transition: all 0.2s ease-in-out;
    }

    .default-template .side-header {
        width: 100vw;
    }

    .default-template .side-header .menu-section {
        padding-top: 0;
    }

    .default-template .side-header .scroll-section>div {
        height: max-content;
    }

    .default-template .side-header .scroll-section {
        height: calc(100vh - 175px);
        margin-top: 84px;
        padding-bottom: 150px;
        overflow: scroll;
    }

    .default-template .side-header .side-header-inner>section:nth-child(1),
    .default-template .side-header .side-header-inner>section:nth-child(2) {
        background-color: var(--dark);
    }

    .default-template .side-header .side-header-inner>section:nth-child(2) {
        position: fixed;
        width: 100vw;
    }

    .default-template .side-header {
        max-height: 100vh;
    }

    .default-template {
        flex-direction: column;
    }

    .default-template .content {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 67px;
        /* margin-top: 133px; */
    }

    .side-header section:not(.logo-section),
    .default-template .side-header.collapsed .search-section {
        display: none;
    }

    .default-template .side-header .menu-section ul li>ul {
        overflow: auto;
        position: relative;
        width: 100%;
        transform: none !important;
    }

    .default-template .side-header .menu-section ul li:hover>ul {
        display: none;
    }

    .default-template .side-header:not(.collapsed) .header-chips {
        display: none !important;
    }

    .default-template .side-header .select-province-box:not(.collapsed) {
        position: relative;
        left: 0;
        margin: 0;
        margin-top: 20px;
        width: 100%;
    }

    .search-form {
        background-color: #111;
    }

    .search-form>div {
        align-items: flex-start;
        padding-top: 80px;
    }


    .slick-slider {
        touch-action: auto;
        -ms-touch-action: auto;
    }

    /* .breaking-news-slider {
        position: relative;
    } */

    .postcard.postcard-title-outside .post-title {
        margin-top: 15px;
        max-height: max-content;
        line-height: 27px;
        overflow: visible;
        display: block !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
    }

    .posts-cards-block .card {
        width: 100% !important;
        height: auto;
        margin: 0 0 65px 0;
    }

    /* .posts-cards-block .card:first-child {
        width: 100%;
        height: 500px;
    } */

    .news-section .postcard-title-side img {
        width: 80px;
    }

    article.single header .overlay {
        top: 133px;
    }

    .timeline .timeline__image {
        width: 100px;
        height: 100px;
    }

    .breaking-news-slider h3 {
        font-size: 18px;
        /* display: block !important; */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    article.single.video>header,
    article.single.video>header video {
        height: auto !important;
        max-height: calc(100vh - 138px);
    }

    .postcard.postcard-title-side h3 {
        font-size: 15px;
    }

    .postcard.postcard-title-side .post-title {
        -webkit-line-clamp: 3;
    }

}

/* @media screen and (min-width: 992px) {
    article.single header .overlay {
        top: -70px;
    }
} */

@media screen and (max-width: 500px) {
    .social-embed.youtube {
        height: 250px;
    }
}

@media screen and (max-width: 400px) {
    .social-embed.youtube {
        height: 200px;
    }
}

@media screen and (max-width: 767px) {

    .timeline-item > * {
        border: 1px solid #fff1;
    }

    .timeline-image {
        border-radius: 0;
    }

    .timeline-day-end {
        display: block;
        width: 100%;
        height: 2px;
        margin: 25px 0;
        background-color: var(--primary-color);
    }

    .timeline-day-end > * {
        position: absolute;
        color: #fff;
        left: calc(100% - 50% - 45px);
        background-color: #1f1f22;
        padding: 0 10px;
        transform: translateY(-50%);
    }

    .social-embed.youtube {
        height: 300px;
    }

    .card.postcard.classic-postcard h3 {
        font-size: 14px;
    }

    .timeline-item h3 {
        font-size: 12px;
    }

    .timeline-item .subtitle {
        font-size: 12px;
        color: #777;
    }

    article.single .headline>div {
        padding: 3.15px 40px 3.15px 40px;
    }

    .breaking-tiny-slider-item a {
        font-size: 14px;
    }

    .hero-main .slide>.progress-bar {
        display: block;
    }

    .gallery-grid-close-preview {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .hero-main video {
        width: calc(100vw) !important;
        max-height: calc(100vw * 9/16);
        /* max-height: 50vh; */
        padding: 10px 10px 0 10px;
        background-color: #fff;
    }

    article .post-content p {
        margin-bottom: 5px !important;
    }

    .caption {
        font-size: 10px!important;
    }

    article .header-mobile .headline .subtitle {
        font-size: 16px !important;
    }

    article .header-mobile .headline::before {
        content: '';
        width: 31px;
        height: 31px;
        background-color: #000;
        position: absolute;
    }

    article .header-mobile .headline::after {
        content: '';
        width: 31px;
        height: 31px;
        background-color: #fff;
        position: absolute;
    }

    article .header-mobile h1 {
        top: 0;
    }

    .breaking-news-slider {
        padding-bottom: 5px;
    }

    .breaking-news-slider h2 {
        /* margin: 0 22px; */
        margin: 5px;
        padding: 10px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .breaking-news-slider h3 {
        font-size: 12px;
        padding: 0 7px;
    }

    /* .breaking-news-slick {
        width: 100%;
    } */

    .breaking-news-slider h3 {
        height: auto;
    }

    /* .breaking-news-slider::before {
        background-color: var(--dark-gray);
    } */

    article.single h1 {
        font-size: 15px !important;
        /* font-size: 23px; */
    }

    article.single .subtitle {
        font-size: 16px !important;
        /* font-size: 23px; */
    }

    .header-content-inner {
        /* width: 100vw;
        margin-right: -1.5rem; */
        /* margin-top: -32px; */
    }

    .hero-main .slide h3 {
        font-size: 18px;
    }

    article .post-content h2 {
        font-size: 18px;
    }

    article .post-content h3,
    article .post-content h4,
    article .post-content h5,
    article .post-content h6 {
        font-size: 16px;
    }

    article .post-content p {
        font-size: 16px;
    }

    article .post-content li {
        font-size: 16px;
    }

    .hero-main .slider {
        background-color: var(--white);
    }

    .hero-main .slide .slide-title {
        /* bottom: 40px;
        width: 100%; */
        bottom: 0 !important;
        width: 100%;
        position: relative;
        padding: 10px !important;
        background-color: var(--white);
        margin-top: -10px;
    }

    .hero-main>div:first-child,
    .hero-main .slider,
    .hero-main .slide {
        height: max-content !important;
    }

    .hero-main::before {
        content: '';
        transition: all 0.05s ease-in-out;
        width: 0%;
        height: 3px;
        background-color: #000;
        border-top: 1px solid #fff1;
        display: block;
        position: absolute;
        top: 0;
        z-index: 99;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5)
    }

    [dir=rtl] .hero-main::before {
        right: 0;
    }

    [dir=ltr] .hero-main::before {
        left: 0;
    }

    .hero-main .slide:not(:first-child) {
        display: none;
    }

    .hero-main .overlay {
        display: none;
    }

    /*
    .hero-main .slider .slide,
    .hero-main .slider.full-height .slide {
        height: calc(400px) !important;
    }

    .hero-main .slider .slide-inner {
        width: 100%;
        height: 100%;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 80%);
    } */

    .breaking-news-slider ul.slick-dots {
        opacity: 0;
        pointer-events: none;
    }

    .hero-main .slider .slide-inner p {
        font-size: 14px !important;
    }

    .hero-main .slider .slide-inner h3 {
        font-size: 14px !important;
        color: var(--dark);
    }

    .breaking-news-slider h2 {
        background-color: #222;
        color: #fff;
    }

    ul.slick-dots {
        opacity: 1;
    }

    .chip .chip-text {
        font-size: 14px;
    }

    .chip .chip-icon {
        font-size: 14px;
    }

    /* .hero-main,
    .hero-main>div,
    .hero-main>div>div {
        height: max-content !important;
    } */

}

@media screen and (max-width: 1400px) {
    .hero-main .slide h3 {
        font-size: 23px;
    }
}

@media screen and (max-width: 1500px) {
    article.single h1 {
        font-size: 24px;
    }
}

@media screen and (min-width: 992px) {

    .default-template .side-header .search-section,
    .default-template .side-header.collapsed .search-section {
        display: flex !important;
        justify-content: space-between;
    }

    @media screen and (max-height: 1000px) {
        .default-template .side-header section {
            padding: 25px 32px;
        }
    }

    @media screen and (max-height: 960px) {
        .default-template .side-header section {
            padding: 17px 32px;
        }
    }

    @media screen and (max-height: 900px) {
        .default-template .side-header section {
            padding: 10px 32px;
        }

        .default-template .side-header section:nth-child(2) {
            padding-top: 15px;
        }
    }

    @media screen and (max-height: 870px) {

        .default-template .side-header section .navbar li a {
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 16px;
        }

        .default-template .side-header section .chip {
            margin-top: 13px !important;
            margin-bottom: 13px !important;
            font-size: 16px;
        }

        .default-template .side-header section:nth-child(1) {
            padding-top: 10px;
        }

        .default-template .side-header section:nth-child(2) {
            padding-top: 15px;
        }

    }

    @media screen and (max-height: 800px) {

        .default-template .side-header section .navbar li a {
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 14px;
            /* font-size: 16px; */
        }

        a.nav-link>div {
            padding: 4px 0 !important;
        }

        a.nav-link>div>span:last-child {
            font-size: 16px !important;
        }

        .single .related-posts h3 {
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            max-height: 40px;
            display: block !important;
            line-height: 20px;
            font-size: 13px;
        }

        article.single h1 {
            font-size: 20px;
        }

        article.single .subtitle {
            font-size: .95rem !important;
        }

        article .header-mobile .headline::before,
        article .header-mobile .headline::after {
            width: 34px;
            height: 34px;
        }

        article.single .headline>div {
            padding: 3.15px 40px 3.15px 40px;
        }

        article .post-content p {
            font-size: 18px;
        }

        .single .related-posts h2 {
            font-size: 20px;
        }

        article .related-posts img {
            width: 100px;
        }

        .default-template .side-header section .chip {
            margin-top: 10px !important;
            margin-bottom: 10px !important;
            font-size: 16px;
        }

        .default-template .side-header section:nth-child(1) {
            padding-top: 10px;
        }

        .default-template .side-header section:nth-child(2) {
            padding-top: 15px;
        }

        .default-template .side-header {
            width: 180px;
        }

        .stories-container {
            width: calc(100vw - 180px)!important;
        }

        [dir=rtl] .breaking {
            margin-right: 180px;
        }
        
        .breaking {
            margin-left: 180px;
        }

        .hero-main .embed-responsive iframe {
            width: 100%;
            height: calc((100vw - 180px) * 9 / 16);
        }

        [dir=rtl] .default-template .content {
            margin-right: 180px;
        }

        [dir=ltr] .default-template .content {
            margin-left: 180px;
        }

        [dir=rtl] .default-template .side-header .menu-section ul li>ul {
            transform: translate(-180px, -50px);
        }

        [dir=ltr] .default-template .side-header .menu-section ul li>ul {
            transform: translate(180px, -50px);
        }

        .hero-main,
        .hero-main>div:first-child,
        .hero-main .slider,
        .hero-main .slide {
            width: calc(100vw - 180px);
            position: relative;
        }

        .hero-main video {
            width: calc(100vw - 180px);
        }

        .breaking {
            width: calc(100% - 180px) !important;
        }

        .default-template .side-header .select-province-section {
            font-size: 15px;
        }

    }

}