:root {
    --logo: url('/wp-content/themes/wijzijndestad/assets/images/logo/winterstad_2024.svg');
    /* safari relative path variable bug */

    --color-primary: #009289;
    --color-primary-hover: #000;
    --color-secondary: #4C6172;
    --color-tertiary: #9DAFBE;

    --color-quote: #e6edf2!important;

    --color-divider: #E7EBEF;
    --color-light: #F6F7F9;
    --color-quote: #FEF3EF;

    --font-poppins: 'Poppins';
    --font-flood: 'Flood';
    --font-sintony: 'Sintony';
}

#header-logo {
    width: 450px;
}
body.scrolled #header-logo {
    width: 260px;
}
#body {
    padding-top: 160px;
}

#header-logo:after {
    content: '';
    display: block;
    padding-bottom: 27%;
}

#winterstad-snowflakes {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 1;
}

#winterstad-snowflakes .snowflake {
    z-index: 1!important;
}

#winterstad-snowflakes:after {
    content: '';
    display: block;
    height: 50px;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.winter-slides {
    --color-primary: #005FAB;
}

.winter-agenda-maps {
    width: 100%;
    height: 600px;
    max-height: 80vh;
    background-color: #eee;
    border-radius: 10px;
    margin-bottom: 100px;
    box-shadow: 0 7px 30px rgba(0,0,0,0.05);
}

.winter-agenda-maps:not(.show){
    display: none;
}

.winterstad-infowindow {
    position: relative;
    max-width: 360px;
    margin: 4px 0 0 4px;
    display: flex;
    flex-direction: column;
}

.winterstad-infowindow img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    object-position: 50% 50%;
    height: auto;
    margin-bottom: 8px;
}

.winterstad-logo_circ {
    width: 200px;
    height: 200px;
    float: right;
}

@media only screen and (max-width: 1024px) {
    .winterstad-logo_circ {
        display: none;
    }
    .winter-agenda-maps {
        margin-bottom: 40px;
    }
}

h2 span, h3 span {
    color: var(--color-primary);
}
.agenda-show-map {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}

.agenda-show-map a {
    margin-right: 0;
}



.snow_wrap {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    pointer-events: none;
}
.snow,.snow:after,.snow::before {
    content: '';
    position: absolute;
    top: -650px;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(4px 4px at 100px 50px,#fff,transparent),
                      radial-gradient(6px 6px at 200px 150px, #fff,transparent),
                      radial-gradient(3px 3px at 300px 250px,#fff,transparent),
                      radial-gradient(4px 4px at 400px 350px,#fff,transparent),
                      radial-gradient(6px 6px at 500px 100px,#fff,transparent),
                      radial-gradient(3px 3px at 50px 200px,#fff,transparent),
                      radial-gradient(4px 4px at 150px 300px,#fff,transparent),
                      radial-gradient(6px 6px at 250px 400px,#fff,transparent),
                      radial-gradient(3px 3px at 350px 500px,#fff,transparent),
                      radial-gradient(4px 4px at 550px 550px,#fff,transparent);
    background-size: 650px 650px;
    animation: SnowAnim 6s linear infinite;
}
.snow:after {
    margin-left: -250px;
    opacity: 0.5;
    animation-direction: reverse;
    animation-duration: 12s;
}
.snow::before {
    margin-left: -350px;
    opacity: 0.7;
    animation-direction: reverse;
    animation-duration: 18s;
}
@keyframes SnowAnim {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(650px);
    }
}

.agenda-search-form-date-range.active {
    border-color: var(--color-primary);
}