/*
============================
HERO SLIDER
============================
 */
#hero-slider {

    .hero-slide {
        height: 250px;
        position: relative;
        overflow: hidden;
        @media (min-width: 575.8px) {
            height: 350px;
        }
        @media (min-width: 991.8px) {
            height: 500px;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
    }
}

.hero-slider-nav {
    padding: 10px 0;
    margin-inline: 0;

    .hero-slide-nav {
        position: relative;
        padding-inline: 5px;
        cursor: pointer;

        .hero-slide-nav-inner {
            position: relative;
            overflow: hidden;
            height: 120px;
            @media (min-width: 575.8px) {
                height: 150px;
            }

            @media (min-width: 991.8px) {
                height: 200px;
            }

        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
    }
}

/*
============================
TOP POST SLIDER
============================
 */
.top-posts-slide {
    &:not(:first-child) img {
        display: none;
    }

    &.slick-active img {
        display: block;
    }

    a {
        text-decoration: none;

        .top-post-slide-inner {
            height: 250px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border-radius: 10px;
            margin-bottom: 15px;

            @media (min-width: 575.8px) {
                height: 300px;
                padding-top: 0;
                margin-bottom: 0;
            }
            @media (min-width: 767.8px) {
                height: 400px;
                padding-top: 0;
            }

            &::before {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                /*background-color: rgba(0, 0, 0, 0.5);*/
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: .4s all;
            }

            .top-post-inner-text-wrapper {
                margin-top: auto;
                padding: 15px;
                background-color: rgba(0, 0, 0, 0.8);
                z-index: 2;

            }

        }
    }

    &:hover {
        img {
            transform: scale(1.05);
        }

        h3 {
            color: var(--green);
        }
    }
}

#home-top-posts {
    padding-top: 0;

    .slick-list {
        height: auto !important;
    }
}

.top-posts-slider-nav {
    margin-top: 20px;
    @media (min-width: 767.8px) {
        margin-top: 0;
    }

    .slick-track {
        transform: none !important;
        height: 400px !important;

        .top-posts-slide-nav {
            width: 100%;

            &:first-of-type article {
                margin-top: 0;
            }

            &.slick-current article {
                border-color: var(--green);
            }


            article {
                padding: 5px;
                border: 1px solid rgba(0, 0, 0, 0.1);
                border-radius: 10px;
                margin-top: 5px;

                a {
                    text-decoration: none;


                    .nav-post-slide-inner {
                        align-items: flex-start;
                        display: flex;
                        flex-wrap: wrap;

                        .nav-post-image {
                            width: 60px;
                            height: 60px;
                            position: relative;
                            overflow: hidden;
                            border-radius: 8px;

                            & img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .nav-post-inner-text-wrapper {
                            width: calc(100% - 70px);
                            flex-basis: calc(100% - 70px);
                            padding-left: 10px;

                            p {
                                font-size: 0.875rem;
                                line-height: 130%;
                                font-weight: 700;
                            }
                        }
                    }

                    &:hover {
                        p {
                            color: var(--green)
                        }
                    }
                }
            }
        }
    }
}


/*
============================
HOME CATEGORIES BIG
============================
 */
.home-category {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    @media (min-width: 991.8px) {
        margin-bottom: 30px;
    }


    .home-category-title {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-around;
        background-color: var(--green);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 0;
        padding: 10px;

        .category-title {
            color: var(--white);
            margin-bottom: 0;
        }

    }

    .button-wrapper {
        margin-top: auto;
    }


    .button {
        margin-top: 20px;
    }


    .post-category-big {

        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding-bottom: 15px;

        a {
            text-decoration: none;


            .post-image-holder {
                position: relative;
                height: 200px;
                border-radius: 10px;
                overflow: hidden;
                margin-bottom: 10px;

                &:first-of-type {
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                }

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

            }

            .post-bottom-wrapper {
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                justify-content: flex-start;
                line-height: 100%;
                margin-top: 10px;
                font-size: .75rem;
            }

            .date {
                color: var(--red);
            }


            .date {
                padding-right: 5px;
            }

            .category {
                position: relative;
                padding-left: 5px;
                border-left: 1px solid var(--grey);
                color: var(--grey);
            }

            &:hover {
                text-decoration: none;

                h5 {
                    color: var(--green);
                }
            }
        }


    }
}

/*
============================
HOME CATEGORIES SMALL
============================
 */
.post-category-small {

    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-block: 15px;

    a {
        text-decoration: none;


        .post-image-holder {
            position: relative;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        }

        .post-bottom-wrapper {
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: flex-start;
            line-height: 100%;
            margin-top: 10px;
            font-size: .75rem;
        }

        .date {
            color: var(--red);
        }


        .date {
            padding-right: 5px;
        }

        .category {
            position: relative;
            padding-left: 5px;
            border-left: 1px solid var(--grey);
            color: var(--grey);
        }

        .post-title {
            margin-bottom: 0;
        }

        &:hover {
            text-decoration: none;

            h5 {
                color: var(--green);
            }
        }
    }


}

/*
==============================
PARTNERS
==============================
 */
#partners-row {
    margin-bottom: 20px;
    justify-content: center;
}

.partner-wrapper {
    display: flex;
    padding: 15px;
    max-width: 100%;
    flex-basis: 50%;
    width: 50%;
    @media (min-width: 575.8px) {
        flex-basis: 33.33%;
        width: 33.33%;
    }
    @media (min-width: 991.8px) {
        flex-basis: 20%;
        width: 20%;
    }


    a {
        text-decoration-line: none;
        width: 100%;

        &:hover {
            img {
                transform: scale(.95);
            }

            p {
                color: var(--red);
            }


        }
    }

    .partner-inner {
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;

        .partner-logo-holder {
            position: relative;
            overflow: hidden;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;

            img {
                width: auto;
                max-width: 100%;
                max-height: 130px;
                webkit-transition: all .4s ease-out;
                -moz-transition: all .4s ease-out;
                -o-transition: all .4s ease-out;
                transition: all .4s ease-out;
            }
        }

        .partner-text {
            margin-top: auto;

            p {
                text-align: center;
                font-size: 0.75rem;
            }
        }
    }
}

.partners-text p {
    text-align: center;
}