/* =========================================================
   ALERTS
========================================================= */

.alert1 p,
.alert1 ul,
.alert1 ol {
    background-color: #f7f7f7;
}

.news h2
{
    margin-bottom: 10px;
}
/* =========================================================
   FEATURED NEWS SECTION
========================================================= */

.featured_news {
    position: relative;
    padding: 3rem 0 4rem;
}

.featured_news h2 {
    color: #00614b;
    margin-bottom: 2rem;
    border-image: none !important;
    border-width: 0 !important;
    padding: 0;
}


/* =========================================================
   FEATURED NEWS SLICK SLIDER
========================================================= */

.featured_news_slider {
    position: relative;
    overflow: hidden;
}

.featured_news_slider::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(to right,
            #00614b 0%,
            #00614b 53%,
            #f3f3f3 53%,
            #f3f3f3 100%);

    z-index: 0;
}

.featured_news_slider .slick-list,
.featured_news_slider .slick-track,
.featured_news_slider .slick-slide,
.featured_news_slider .slick-slide > div {
    position: relative;
    z-index: 1;
}

.featured_news_slider .slick-list {
    overflow: hidden;
}

.featured_news_slider .slick-track {
    display: flex;
    align-items: stretch;
}

.featured_news_slider .slick-slide {
    height: auto;
}

.featured_news_slider .slick-slide > div {
    height: 100%;
}


/* =========================================================
   FEATURED ARTICLE LAYOUT
========================================================= */

.featured_news .brief_item {
    display: grid !important;
    grid-template-columns: 56% 44%;
    align-items: center;

    margin: 0;
    padding: 2rem;

    background: transparent;
}

.featured_news .brief_item > div {
    position: relative;
    z-index: 2;

    transform: translateX(3%);
}

.featured_news .brief_item > div,
.featured_news .brief_item figcaption {
    align-self: center;
}
.page_news .featured_news .brief_item > div, .page_news .featured_news .brief_item figcaption {
    align-self: center;
    float: none;
    width: auto;
    margin: 0;
    min-height: 0;
    display: grid;
    align-items: center;
}


.featured_news .brief_item img {
    width: 100%;
    height: auto;
    display: block;
}

.featured_news .brief_item figcaption {
    padding: 2rem 3rem 2rem 6rem;
    color: #636363;
}

.featured_news .brief_item h3 {
    margin-top: 0;
    color: #00614b;
}

.featured_news .brief_item h3 a {
    color: inherit;
    text-decoration: none;
}

.featured_news .brief_item p {
    margin-bottom: 0;
}


/* =========================================================
   FEATURED SLIDER NAVIGATION
========================================================= */

.featured_news .slick-prev-link,
.featured_news .slick-next-link {
    border: 0;
    position: absolute;

    right: 34px;
    bottom: 0px;

    color: #02614b;

    z-index: 5;
}

.featured_news .slick-prev-link {
    right: 88px;
}


/* =========================================================
   NEWS SECTION
========================================================= */
.full_width .grid {
    grid-gap: 2rem;
}
.news {
    --news-img-height: 180px;
    padding-bottom: 2rem;
}

.page_news .news {
    padding-block: 2rem;
    --news-img-height: 132px;
}

.page_news .green_button:link,
.page_news .green_button:visited {
    margin-top: 2rem;
    margin-right: 2rem;
    font-size: 85%;
}

.page_news .news + div {
    margin-bottom: 2rem;
}

.news.is-light {
    background: #fff;
}

.news.is-dark {
    background: #f7f7f7;
}

.news:last-of-type {
    background: #fff !important;
}


/* =========================================================
   NEWS HEADINGS
========================================================= */

.news h2 {
    border-bottom: 0;
    border-width: 0 !important;
    padding-bottom: 0;
}

.news h2 a {
    font-size: 220%;
    color: rgba(0, 97, 75, 0.3);
    text-decoration: none;
    transition: color 0.3s ease;
}

.news h2 a:hover {
    opacity: 1;
    text-decoration: none;
    color: rgba(0, 97, 75, 1);
}

.news:last-of-type h2 {
    padding-bottom: 4rem;
}

.news:last-of-type h2 a {
    color: rgba(101, 189, 17, 1);
}

.news:last-of-type h2 a:hover {
    color: rgba(101, 189, 17, 0.4);
}


/* =========================================================
   LEFT ACCENT BAR
========================================================= */

.news .pad_1 {
    position: relative;
    padding-left: 1.25rem;
    padding-top: 0;
}

.news .pad_1::before {
    content: "";
    position: absolute;

    top: 0.3rem;
    left: 0;

    width: 1rem;
    height: var(--news-img-height);
}

.news.is-dark .pad_1::before,
.news.is-light .pad_1::before {
    background: #00614b;
}

.news:last-of-type .pad_1::before {
    content: none;
}


/* =========================================================
   NEWS GRID
========================================================= */

.news_grid {
    position: relative;
}

.page_news .news_grid {
    grid-gap: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.news:last-of-type .news_grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.news_grid span, .grid span {
    display: block;
    padding: 1rem 0 0;
    line-height: 1.5rem;
}

.news_grid span::before {
    content: none;
}

.news_grid .slick-list {
    overflow: hidden;
}

.news_grid .slick-track {
    display: flex !important;
    align-items: stretch;
}

.news_grid .slick-slide {
    height: auto;
    box-sizing: border-box;

}

.news_grid .slick-slide img {
    width: 100%;
    height: var(--news-img-height);
    object-fit: cover;
    display: block;
}
.news_grid a img {
    width: 100%;
    height: var(--news-img-height);
    object-fit: cover;
    display: block;
}
body main .news_grid a, .page_news_category .grid a {
    color: #02614b;
    font-weight: bold;
    background: transparent;
    padding-inline: 0.5rem;
    text-decoration: none;
}


/* =========================================================
   LAST NEWS SECTION LINKS
========================================================= */

.news:last-of-type .news_grid .slick-slide {
    padding-right: 5rem;
}

.news:last-of-type .news_grid a {
    position: relative;
    display: block;
    padding-inline: 0;
    padding-top: 1rem;
    color: #3a3e42;
    font-weight: 400;
    text-decoration: none;

}

.page_news .news:last-of-type .news_grid a {
    padding-inline: .5rem;
}


.news:last-of-type .news_grid a:hover, .page_news_category .grid a:hover {
    color: #65bd11;
}

.news:last-of-type .news_grid a::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 70px;
    height: 4px;

    background: #65bd11;
}


/* =========================================================
   SLICK NAVIGATION
========================================================= */
.slick-slider {
    margin-bottom: 30px;
}


.slick-prev-link,
.slick-next-link {
    position: absolute;

    right: 16px;
    bottom: -44px;

    width: 44px !important;
    height: 44px;

    border-radius: 50%;

    text-align: center;
    text-decoration: none;
    line-height: 34px;

    font-size: 24px;
    font-weight: 700;

    z-index: 5;
}

.slick-prev-link {
    right: 78px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media only screen and (max-width: 1200px) {

    .alert1,
    .alert2,
    .out_wrap_large {
        padding-inline: 0;
    }
}
@media only screen and (min-width: 980px) and (max-width: 1200px)  {
 .news,
    .featured_news {
        padding-inline: 1rem;
    }
}

/* =========================================================
   RESPONSIVE — TABLET & MOBILE
========================================================= */

@media only screen and (max-width: 980px) {

    .news,
    .featured_news {
        padding: 24px;
        padding-top: 0;

    }
   .news, .page_news .news
   {
    --news-img-height: 185px;
    }


    .featured_news_slider::before {
        background: none;
    }

    .featured_news .brief_item {
        display: grid !important;
        grid-template-columns: 1fr;

        padding: 0;
        background: none;

        position: relative;
    }

    .featured_news .brief_item::before {
        content: "";
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 60%;

        background: #00614b;

        z-index: 0;
    }

    .featured_news .brief_item > div {
        position: relative;
        z-index: 1;

        padding: 3rem 3rem 0;

        transform: none;
    }

    .featured_news .brief_item figcaption {
        position: relative;
        z-index: 0;

        margin-top: -2.5rem;
        padding: 4rem 3rem;

        background: #f7f7f7;
    }

    .page_news .news_grid {
        grid-template-columns: 1fr 1fr;
    }

    .news:last-of-type .news_grid {
        grid-template-columns: 1fr 1fr;
    }

    .news_grid .slick-track {
        gap: 20px;
    }

    .news h2 a {
        font-size: 180%;
        line-height: 2rem;
    }


}


/* =========================================================
   RESPONSIVE — PORTRAIT HERO IMAGE
========================================================= */

@media only screen and (max-width: 750px) and (orientation: portrait) {

    .with_video .hero figure {
        background-image: url("https://www.lau.edu.lb/images/fire-detection-system-mobile-new.jpg");
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media only screen and (max-width: 640px) {

    .featured_news .brief_item > div {
        padding: 2rem 2rem 0;
    }

    .featured_news .brief_item figcaption {
        padding: 3rem 2rem;
    }

    .news .pad_1 {
        padding-top: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .news .pad_1::before {
        top: 0;
        left: 0;

        width: 100%;
        height: 1rem;
    }

    body main .news_grid a {
        padding-inline: 0;
    }

    .news h2 a {
        font-size: 150%;
    }

    .page_news .news_grid {
        grid-template-columns: 1fr;
    }

    .news:last-of-type .news_grid {
        grid-template-columns: 1fr;
    }

    .news_grid .slick-track {
        gap: 0;
    }

    .news_grid .slick-slide img {
        height: auto;
    }

    .news_grid span {
        padding: 1em 0;
    }
    .page_news    .news_grid span {
        padding: .5em 0 1.5em 0;
    }
}