/* HEADER */
.taglineoverlay {
    bottom: 100px !important;

    &>.fixed {
        text-transform: uppercase;
        font-size: calc(var(--fs2) + 2px);
        font-weight: 700;
        letter-spacing: 0.2em;
        line-height: 1.4em;

        &>span {
            letter-spacing: 0;
            font-family: var(--font-cursive);
            font-size: var(--fs2);
            color: rgb(var(--color1)) !important;
            text-transform: none;

        }
    }

    &::before {
        content: '';
        position: absolute;
        width: 63px;
        height: 63px;
        top: -74px;
        left: 50%;
        transform: translateX(-50%);
        background-image: var(--TreeIcon);
        background-position: 50% 50%;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

/* HOME QUICK LINKS */
section.homequicklinks.mod_image_text {
    z-index: 1;
    margin-bottom: -70px;

    &>.Text {
        max-width: 1100px;
        position: relative;

        &>ul {
            margin-right: auto;
            margin-left: 0;
            column-width: auto;
            width: calc(56% - 50px);
            background-color: transparent;
            padding-top: 40px;

            &>li a.Item {
                width: 100%;

                &>.ItemBefore {
                    top: 0;
                    bottom: auto;
                    background-size: cover;
                    pointer-events: none;
                    right: 0;
                    left: auto;
                    max-width: none;
                    width: 44%;
                    border-radius: 50%;
                    overflow: hidden;

                    &>img {
                        height: 0;
                        padding-bottom: 100%;
                        background-image: var(--item-image);
                        background-size: cover;
                        background-position: 50% 50%;
                        border-radius: 50%;
                    }

                    &::before {
                        content: 'DON’T MISS A DATE!';
                        position: absolute;
                        width: calc(100% - 235px);
                        height: 50px;
                        line-height: 50px;
                        font-size: 11px;
                        font-weight: 600;
                        left: 50%;
                        bottom: 110px;
                        transform: translateX(-50%);
                        background-color: rgb(var(--color1));
                        color: white;
                        border-radius: 30px;
                        min-width: 160px;
                        text-align: center;
                    }
                }

                &>.ItemInner {
                    padding-right: 10px;
                    margin-left: 25px;
                    border-bottom: 1px solid rgb(var(--color3));
                    display: block;
                    position: relative;

                    &>.Title {
                        color: rgb(var(--color2));
                        text-transform: uppercase;
                        font-size: var(--fs4);
                        font-family: var(--font-heading);
                        padding: 12px 0 17px 0;
                        letter-spacing: 0.2em;
                        position: relative;
                    }

                    &>.ItemIcon {
                        display: block;
                        position: absolute;
                        width: calc(100% + 35px);
                        height: calc(100% + 10px);
                        background-image: linear-gradient(to right, rgb(var(--color2)), rgb(var(--color1)));
                        opacity: 0;
                        transition: 0.3s;
                        border-radius: 10px;
                        left: -25px;
                        top: -7px;
                        &::before{
                            display: none;
                        }
                    }
                }

                &:hover {
                    .ItemInner {
                        .Title {
                            color: white;
                        }

                        &>.ItemIcon {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    &::before {
        content: '';
        position: absolute;
        width: 290px;
        height: 290px;
        background-image: var(--TreeBlue);
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        right: 0;
        bottom: 80px;
        opacity: 0.1;
    }
}


/* WELCOME */
body section.homewelcome {
    padding: 95px 20px !important;
    background-color: rgb(var(--color2));

    &>div.Welcome>div.WelcomeFlex {
        --welcome-max-width: 1100px;
        padding-left: min(calc(var(--welcome-max-width)*(7/25) + 65px), calc(28% + 65px));

        &>.Title {
            font-family: var(--hp-bloq-family);
            font-weight: var(--hp-bloq-weight);
            font-size: var(--hp-bloq-font-size);
            text-transform: var(--hp-bloq-text-transform);
            letter-spacing: var(--hp-bloq-letter-spacing);
            padding-top: 80px;
            color: rgb(var(--color3));

            &>span {
                font-family: var(--hp-bloq-span-family);
                font-weight: var(--hp-bloq-span-weight);
                font-size: var(--hp-bloq-span-font-size);
                text-transform: var(--hp-bloq-span-text-transform);
                letter-spacing: var(--hp-bloq-span-letter-spacing);
                line-height: 1;
                color: white;
            }
        }

        &>.ItemContent .paracontent {

            /* &> h1, h2, h3 h4, h5, h6, &>p{
                color: white !important;
            } */
            &>* {
                color: white !important;
            }
        }

        &>.LinkWrapper .buttonstyle {
            color: white;
        }

        &>.ItemImage {
            width: 28%;

            &>.ItemBefore {
                border-radius: 50%;
            }
        }

        &>input:checked+label {
            background-color: rgb(var(--color3));

            &+.ItemImage {
                display: flex;
                align-items: flex-end;
            }
        }

        &>label {
            position: absolute;
            left: calc((var(--n) - 1) * 160px);
            top: 0px;
            display: inline-grid;
            place-items: center;
            background-color: rgba(var(--button-background-color), 1);
            padding: var(--button-padding);
            font-size: var(--button-font-size);
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            text-transform: var(--button-text-transform);
            border: 1px solid rgb(var(--color3));
            margin: var(--button-gap);
            border-radius: var(--button-border-radius);
            font-family: var(--button-font-family);
            font-weight: var(--button-font-weight);
            min-width: 138px;
            line-height: 1.5em;
            color: white;
            z-index: 1;

            &:hover {
                background-color: rgb(var(--color3));
            }
        }
    }

}

/* BANNER */
section.homebanner {
    padding: 32px 20px 28px 20px !important;

    &>h2.bloqTitle {
        color: rgb(var(--color2));
        text-align: center;
        margin-bottom: 0;
        opacity: 0.25;
        font-size: calc(var(--fs0) + 10px);
    }
}

/* EVENTS */
section.homeevents.mod_mini_slider {
    --SliderRowHeight: 250px;
    --SliderItemMinWidth: 260px;
    --SliderGridGap: 30px;
    background-color: rgb(var(--color3));
    padding-bottom: 240px !important;

    &>h2.bloqTitle {
        color: white;
        text-align: center;
        padding: 100px 0 65px 0;

        &>span {
            color: white;
        }
    }

    &>.filterSourceSideBySideButtons {
        position: absolute;
        left: 50%;
        top: 589px;
        margin: 0;
        transform: translateX(-50%);
        width: calc(100% - 80px);
        max-width: 1080px;
        padding: 0 20px;

        &>.FilterSet {
            width: 100%;
            justify-content: center;
            margin: 0;

            .filterbutton {
                height: fit-content;
                padding: var(--button-padding);
                border-radius: var(--button-border-radius);
                font-size: var(--button-font-size);
                color: white;
                border-color: white;
                margin: 10px 6px;
                margin-right: 6px !important;

                &:hover {
                    border-color: rgb(var(--color1));
                    background-color: rgb(var(--color1));
                    color: white;
                }

                &.selected {
                    border-color: rgb(var(--color1));
                    background-color: rgb(var(--color1));
                }
            }
        }

        &>.sourceButtonWrapper {
            position: absolute;
            left: 0;
            top: -435px;
            width: max-content;
            &>.calendarPageLink {
                height: fit-content;
                padding: var(--button-padding);
                border-radius: var(--button-border-radius);
                font-size: var(--button-font-size);
                color: white;
                border-color: white;
                background-color: transparent;
                margin: 0;

                &:hover {
                    border-color: rgb(var(--color1));
                    background-color: rgb(var(--color1));
                    color: white;
                }
            }
        }
    }

    &>div.Slider {
        max-width: 1120px;
        margin: 0 auto;
        padding: 0 20px;

        &>.nav {
            top: -116px !important;
            background-color: transparent;
            border: 1px solid white;

            &.next {
                right: 20px;
            }

            &.last {
                right: 83px;
                left: auto;
            }

            &:hover {
                background-color: white;
                color: rgb(var(--color3));
            }
        }

        &>.SliderInner {
            overflow: clip;
            overflow-clip-margin: 23px;

            &>ul>li .Item {
                overflow: visible;

                &>.ItemInner {
                    height: 100%;
                    bottom: 0;
                    background-color: transparent;
                    justify-content: flex-start;
                    padding-top: 115px;

                    &>.Title {
                        font-size: 20px;
                    }

                    &>.ItemDate {
                        &>* {
                            display: none;
                        }

                        &>d:nth-child(1) {
                            position: absolute;
                            z-index: 1;
                            left: 50%;
                            transform: translateX(-50%);
                            top: 11px;
                            font-size: 32px;
                            font-weight: 400;
                            display: block;
                        }

                        &>d:nth-child(2) {
                            position: absolute;
                            z-index: 1;
                            left: calc(50% + 2px);
                            transform: translateX(-50%);
                            top: 55px;
                            font-size: 13px;
                            font-family: var(--font-heading);
                            letter-spacing: 0.2em;
                            text-align: center;
                            display: block;
                        }

                        &>i {
                            position: absolute;
                            left: 20px;
                            bottom: 12px;
                            top: auto;
                            font-size: 14px;
                            font-weight: 400;
                            display: block;

                            &+d {
                                position: absolute;
                                left: 40px;
                                bottom: 9px;
                                top: auto;
                                font-size: 15px;
                                font-weight: 400;
                                display: block;
                            }
                        }
                    }

                    &>.ItemIcon {
                        font-size: 0px;
                        top: 49px !important;
                        height: calc(100% - 49px) !important;
                        width: 100% !important;
                        background-color: rgb(var(--color2));
                        border-radius: 11px;
                        max-width: 100% !important;
                    }

                    &>.ItemContent {
                        opacity: 1;

                        .paracontent .cardBottomLinks {
                            width: 100%;
                            height: 39px;
                            margin: 0 0;
                            background-color: rgb(var(--color1));
                            border-radius: 0 0 10px 10px;

                            &>a.downloadics {
                                min-width: 1px;
                                width: 21px;
                                height: 21px;
                                text-align: center;
                                line-height: 21px;
                                color: rgb(var(--color2));
                                background-color: white;
                                bottom: 9.5px;
                                right: 20px;
                                border-radius: 50%;
                                padding: 0;
                                left: auto;
                                transform: translateX(0%);

                                &::before {
                                    font-style: normal;
                                    font-variant: normal;
                                    text-rendering: auto;
                                    -webkit-font-smoothing: antialiased;
                                    font-family: "Font Awesome 6 Free";
                                    font-weight: 900;
                                    content: '\2b';
                                    font-size: 11px;
                                    transition: 0.3s;
                                }

                                &::after {
                                    content: 'ADD TO CALENDAR';
                                    position: absolute;
                                    width: max-content;
                                    height: fit-content;
                                    padding: 0px 14px;
                                    border-radius: 13px;
                                    text-align: center;
                                    background-color: white;
                                    color: rgb(var(--color2));
                                    border: 1px solid rgb(var(--color2));
                                    top: -26px;
                                    right: -43px;
                                    font-size: 9px;
                                    font-weight: 600;
                                    opacity: 0;
                                    transition: 0.3s;

                                    &:hover {
                                        background-color: rgb(var(--color2));
                                        color: white;
                                    }
                                }
                            }
                        }
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        width: 88px;
                        height: 88px;
                        border-radius: 50%;
                        left: 50%;
                        top: 0;
                        transform: translateX(-50%);
                        background-image: linear-gradient(to bottom, rgb(var(--color2)), rgb(var(--color1)));
                        border: 5px solid white;
                        z-index: 1;
                    }
                }

                &:hover {
                    &>.ItemInner .ItemContent .paracontent .cardBottomLinks a.downloadics {
                        background-color: rgb(var(--color2));
                        color: white;

                        &::after {
                            opacity: 1;
                        }
                    }
                }
            }
        }

    }

    &::before {
        content: '';
        position: absolute;
        width: 100%;
        max-width: 450px;
        height: 500px;
        bottom: 100px;
        background-image: var(--TreeWhite);
        background-position: 100% 100%;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.1;
        right: max(-139px, -27.8%);
    }
}




@media only screen and (max-width: 900px) {
    section.homequicklinks.mod_image_text {
        margin-bottom: 0;

        &>.Text ul {
            padding: 0 0px;
            width: 100%;

            &>li a.Item .ItemBefore {
                display: none;
            }
        }
    }
    body section.homewelcome div.Welcome>div.WelcomeFlex {
        padding-left: 0;
        &>.ItemImage{
            display: none !important;
        }
    }

    section.homebanner h2.bloqTitle {
        font-size: calc(var(--fs0) - 10px);
    }

    section.homeevents.mod_mini_slider{
        padding: 0 0 240px 0 !important;
        &>.filterSourceSideBySideButtons {
            top: 690px !important;
        &>.sourceButtonWrapper{
            left: 50%;
            transform: translateX(-50%);
            top: -393px;
        }
        &>.FilterSet .filterbutton{
                            font-size: 9px;
                padding: 10px 18px;
        }
    }
    &>h2.bloqTitle{
        padding: 100px 0 205px 0;
    }
        & > div.Slider {
        &>.nav{
            top: -176px !important;
            &.next{
                right: calc(50% - 35px);
                transform: translateX(50%);
            }
            &.last{
                right: calc(50% + 35px);
                transform: translateX(50%);
            }
        }
        .SliderInner > ul > li .Item > .ItemInner > .ItemContent .paracontent .cardBottomLinks > a.downloadics::after{
            right: -20px;
        }
    }
    } 
}

@media only screen and (max-width: 500px){
    section.homeevents.mod_mini_slider{
        padding-bottom: 320px !important;
    }
}