@charset "utf-8";

/* =========================================================
   ERI — CSR / SPONSORING
   Pages:
   - CSR
   - Sponsoring
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.CSR_row {
    justify-content: center;
}

.CSR_row .slick-dots {
    bottom: -50px;
}

.CSR_row .slick-dots li.slick-active button:before,
.CSR_row .slick-dots li button:before {
    color: white;
}


.CSR_Layout {
    width: 100% !important;
    max-width: 980px;
}

.CSR_Layout .entry-title {
    text-transform: uppercase;
}

.CSR_Layout .more-link::after {
    content: "";
    background:
        url('/wp-content/uploads/2021/01/big_arrow_white.svg')
        no-repeat center center;
    background-size: contain;
    position: absolute;
    display: inline-block;
    top: 10px;
    right: 8px;
    width: 20px;
    height: 20px;
}


/* =========================================================
   DESKTOP >= 981px
   ========================================================= */

@media screen and (min-width: 981px) {

    .CSR_Layout article {
        padding: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .CSR_Layout article:before {
        background-color: #00C2CA !important;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 223px;
        height: 153px;
        margin: 0;
        display: inline-block;
        content: '';

        -webkit-mask:
            url(/wp-content/uploads/2021/01/CadreLarge_TopLeft.svg)
            no-repeat 50% 50%;
        mask:
            url(/wp-content/uploads/2021/01/CadreLarge_TopLeft.svg)
            no-repeat 50% 50%;

        -webkit-mask-size: cover;
        mask-size: cover;
    }

    .CSR_Layout article:after {
        background-color: #00C2CA !important;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 223px;
        height: 153px;
        margin: 0;
        display: inline-block;
        content: '';

        -webkit-mask:
            url(/wp-content/uploads/2021/01/CadreLarge_BottomRight.svg)
            no-repeat 50% 50%;
        mask:
            url(/wp-content/uploads/2021/01/CadreLarge_BottomRight.svg)
            no-repeat 50% 50%;

        -webkit-mask-size: cover;
        mask-size: cover;

        visibility: visible !important;
    }

    .CSR_Layout .entry-featured-image-url img {
        padding-right: 25px;
    }

    .CSR_Layout .entry-title {
        position: absolute;
        top: 40px;
        left: 50%;
        padding-right: 25px;
        font-size: 20px;
        text-transform: uppercase;
    }

    .CSR_Layout .post-content {
        position: absolute;
        top: 120px;
        left: 50%;
        padding-right: 25px;
    }

    #sponsoringHome .CSR_Layout h5 a,
    .CSR_Layout .post-content h5 {
        color: #00C2CA !important;
        font-weight: 300;
    }

    .CSR_Layout .post-content p {
        font-size: 20px;
        letter-spacing: 0;
        line-height: 115%;

        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .CSR_Layout .more-link {
        color: white;
        border: 1px solid white;
        border-radius: 3px !important;

        height: 40px;
        width: 120px;

        font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        letter-spacing: 1.25px;
        font-size: 14px;
        line-height: 40px !important;

        display: flex !important;
        align-items: center;

        right: 40px;
        float: right;
        top: 170px;

        padding-left: 5px;

        position: absolute !important;
        content: "More" !important;
        z-index: 10;
    }
}


/* =========================================================
   DESKTOP XL >= 1381px
   ========================================================= */

@media screen and (min-width: 1381px) {

    .CSR_row .slick-dots {
        display: none;
    }
}


/* =========================================================
   DESKTOP 981px — 1380px
   ========================================================= */

@media screen and (max-width: 1380px) and (min-width: 981px) {

    .CSR_row .prev-button,
    .CSR_row .next-button,
    .CSR_row .slick-arrow {
        display: none !important;
    }

    .CSR_Layout article {
        padding: 20px;
    }

    .CSR_Layout .entry-title {
        top: 20px;
    }

    .CSR_Layout .more-link {
        top: auto;
    }
}


/* =========================================================
   TABLET 768px — 980px
   ========================================================= */

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

    .CSR_row {
        display: flex;
        width: 100%;
    }

    .CSR_row .prev-button,
    .CSR_row .next-button,
    .CSR_row .slick-arrow {
        display: none !important;
    }

    .CSR_Layout .post-content p {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .CSR_Layout article {
        display: grid;
        grid-template-rows: auto;
        grid-row-gap: 20px;
        width: 100%;
        margin-bottom: 60px;
    }

    .CSR_Layout .entry-title {
        grid-row: 1;
    }

    .CSR_Layout .post-content {
        grid-row: 2;
    }

    #sponsoringHome .CSR_Layout h5 a,
    .CSR_Layout .post-content h5 {
        color: #00C2CA !important;
        font-weight: 100;
    }

    .CSR_Layout .post-meta {
        display: none;
    }

    .CSR_Layout .more-link {
        color: white;
        border: 1px solid white;
        border-radius: 3px !important;

        height: 40px;
        width: 100%;

        font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        letter-spacing: 1.25px;
        font-size: 14px;
        line-height: 40px !important;

        display: flex !important;
        align-items: center;
        justify-content: center;

        float: right;
        bottom: 0;

        padding-left: 5px;

        position: absolute !important;
        content: "More" !important;
        z-index: 10;
    }

    .CSR_Layout article:before {
        background-color: #00C2CA !important;
        position: absolute;
        left: -20px;
        top: -20px;
        z-index: 2;

        width: 223px;
        height: 153px;

        margin: 0;
        display: inline-block;
        content: '';

        -webkit-mask:
            url(/wp-content/uploads/2021/01/CadreLarge_TopLeft.svg)
            no-repeat 50% 50%;
        mask:
            url(/wp-content/uploads/2021/01/CadreLarge_TopLeft.svg)
            no-repeat 50% 50%;

        -webkit-mask-size: cover;
        mask-size: cover;
    }
}


/* =========================================================
   MOBILE <= 767px
   ========================================================= */

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

    .CSR_row {
        width: 100vw;
    }

    .CSR_Layout .post-content p {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .CSR_Layout article {
        display: grid;
        grid-template-rows: auto;
        grid-row-gap: 20px;
        width: 100%;
        margin-bottom: 60px;
    }

    .CSR_Layout .entry-title {
        grid-row: 1;
    }

    .CSR_Layout .post-content {
        grid-row: 2;
    }

    #sponsoringHome .CSR_Layout h5 a,
    .CSR_Layout .post-content h5 {
        color: #00C2CA !important;
        font-weight: 100;
    }

    .CSR_Layout .post-meta {
        display: none;
    }

    .CSR_Layout .more-link {
        color: white;
        border: 1px solid white;
        border-radius: 3px !important;

        height: 40px;
        width: 100%;

        font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        letter-spacing: 1.25px;
        font-size: 14px;
        line-height: 40px !important;

        display: flex !important;
        align-items: center;
        justify-content: center;

        float: right;
        bottom: 0;

        padding-left: 5px;

        position: absolute !important;
        content: "More" !important;
        z-index: 10;
    }

    .CSR_Layout .entry-featured-image-url img {
        grid-row: 4;
    }

    .CSR_Layout article:before {
        background-color: #00C2CA !important;
        position: absolute;
        left: -20px;
        top: -20px;
        z-index: 2;

        width: 223px;
        height: 153px;

        margin: 0;
        display: inline-block;
        content: '';

        -webkit-mask:
            url(/wp-content/uploads/2021/01/CadreLarge_TopLeft.svg)
            no-repeat 50% 50%;
        mask:
            url(/wp-content/uploads/2021/01/CadreLarge_TopLeft.svg)
            no-repeat 50% 50%;

        -webkit-mask-size: cover;
        mask-size: cover;
    }
}