/***
    The new CSS reset - version 1.4.9 (last updated 11.2.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    all: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

.vegas-content-scrollable,.vegas-overlay,.vegas-slide,.vegas-slide-inner,.vegas-timer{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;border:none;padding:0;margin:0}.vegas-content-scrollable{position:relative;height:100%;overflow:auto}.vegas-overlay{opacity:.5;background:url(../lib/plugins/vegas/overlays/02.png) center center}.vegas-timer{top:auto;bottom:0;height:2px}.vegas-timer-progress{width:0%;height:100%;background:#fff;transition:width ease-out}.vegas-timer-running .vegas-timer-progress{width:100%}.vegas-slide,.vegas-slide-inner{margin:0;padding:0;background:center center no-repeat;transform:translateZ(0);will-change:transform,opacity}body .vegas-container{overflow:hidden!important;position:relative}.vegas-video{min-width:100%;min-height:100%;width:auto;height:auto}body.vegas-container{overflow:auto;position:static;z-index:-2}body.vegas-container>.vegas-overlay,body.vegas-container>.vegas-slide,body.vegas-container>.vegas-timer{position:fixed;z-index:-1}.vegas-transition-blur,.vegas-transition-blur2{opacity:0;filter:blur(32px) brightness(1.01)}.vegas-transition-blur-in,.vegas-transition-blur2-in{opacity:1;filter:blur(0) brightness(1.01)}.vegas-transition-blur2-out{opacity:0}.vegas-transition-burn,.vegas-transition-burn2{opacity:0;filter:contrast(1000%) saturate(1000%)}.vegas-transition-burn-in,.vegas-transition-burn2-in{opacity:1;filter:contrast(100%) saturate(100%)}.vegas-transition-burn2-out{opacity:0;filter:contrast(1000%) saturate(1000%)}.vegas-transition-fade,.vegas-transition-fade2{opacity:0}.vegas-transition-fade-in,.vegas-transition-fade2-in{opacity:1}.vegas-transition-fade2-out{opacity:0}.vegas-transition-flash,.vegas-transition-flash2{opacity:0;filter:brightness(25)}.vegas-transition-flash-in,.vegas-transition-flash2-in{opacity:1;filter:brightness(1)}.vegas-transition-flash2-out{opacity:0;filter:brightness(25)}.vegas-transition-negative,.vegas-transition-negative2{opacity:0;filter:invert(100%)}.vegas-transition-negative-in,.vegas-transition-negative2-in{opacity:1;filter:invert(0)}.vegas-transition-negative2-out{opacity:0;filter:invert(100%)}.vegas-transition-slideDown,.vegas-transition-slideDown2{transform:translateY(-100%)}.vegas-transition-slideDown-in,.vegas-transition-slideDown2-in{transform:translateY(0)}.vegas-transition-slideDown2-out{transform:translateY(100%)}.vegas-transition-slideLeft,.vegas-transition-slideLeft2{transform:translateX(100%)}.vegas-transition-slideLeft-in,.vegas-transition-slideLeft2-in{transform:translateX(0)}.vegas-transition-slideLeft2-out,.vegas-transition-slideRight,.vegas-transition-slideRight2{transform:translateX(-100%)}.vegas-transition-slideRight-in,.vegas-transition-slideRight2-in{transform:translateX(0)}.vegas-transition-slideRight2-out{transform:translateX(100%)}.vegas-transition-slideUp,.vegas-transition-slideUp2{transform:translateY(100%)}.vegas-transition-slideUp-in,.vegas-transition-slideUp2-in{transform:translateY(0)}.vegas-transition-slideUp2-out{transform:translateY(-100%)}.vegas-transition-swirlLeft,.vegas-transition-swirlLeft2{transform:scale(2) rotate(35deg);opacity:0}.vegas-transition-swirlLeft-in,.vegas-transition-swirlLeft2-in{transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlLeft2-out,.vegas-transition-swirlRight,.vegas-transition-swirlRight2{transform:scale(2) rotate(-35deg);opacity:0}.vegas-transition-swirlRight-in,.vegas-transition-swirlRight2-in{transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlRight2-out{transform:scale(2) rotate(35deg);opacity:0}.vegas-transition-zoomIn,.vegas-transition-zoomIn2{transform:scale(0);opacity:0}.vegas-transition-zoomIn-in,.vegas-transition-zoomIn2-in{transform:scale(1);opacity:1}.vegas-transition-zoomIn2-out,.vegas-transition-zoomOut,.vegas-transition-zoomOut2{transform:scale(2);opacity:0}.vegas-transition-zoomOut-in,.vegas-transition-zoomOut2-in{transform:scale(1);opacity:1}.vegas-transition-zoomOut2-out{transform:scale(0);opacity:0}.vegas-animation-kenburns{-webkit-animation:kenburns ease-out;animation:kenburns ease-out}@-webkit-keyframes kenburns{0%{transform:scale(1.5)}100%{transform:scale(1)}}@keyframes kenburns{0%{transform:scale(1.5)}100%{transform:scale(1)}}.vegas-animation-kenburnsDownLeft{-webkit-animation:kenburnsDownLeft ease-out;animation:kenburnsDownLeft ease-out}@-webkit-keyframes kenburnsDownLeft{0%{transform:scale(1.5) translate(10%,-10%)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsDownLeft{0%{transform:scale(1.5) translate(10%,-10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDownRight{-webkit-animation:kenburnsDownRight ease-out;animation:kenburnsDownRight ease-out}@-webkit-keyframes kenburnsDownRight{0%{transform:scale(1.5) translate(-10%,-10%)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsDownRight{0%{transform:scale(1.5) translate(-10%,-10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDown{-webkit-animation:kenburnsDown ease-out;animation:kenburnsDown ease-out}@-webkit-keyframes kenburnsDown{0%{transform:scale(1.5) translate(0,-10%)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsDown{0%{transform:scale(1.5) translate(0,-10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsLeft{-webkit-animation:kenburnsLeft ease-out;animation:kenburnsLeft ease-out}@-webkit-keyframes kenburnsLeft{0%{transform:scale(1.5) translate(10%,0)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsLeft{0%{transform:scale(1.5) translate(10%,0)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsRight{-webkit-animation:kenburnsRight ease-out;animation:kenburnsRight ease-out}@-webkit-keyframes kenburnsRight{0%{transform:scale(1.5) translate(-10%,0)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsRight{0%{transform:scale(1.5) translate(-10%,0)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpLeft{-webkit-animation:kenburnsUpLeft ease-out;animation:kenburnsUpLeft ease-out}@-webkit-keyframes kenburnsUpLeft{0%{transform:scale(1.5) translate(10%,10%)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsUpLeft{0%{transform:scale(1.5) translate(10%,10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpRight{-webkit-animation:kenburnsUpRight ease-out;animation:kenburnsUpRight ease-out}@-webkit-keyframes kenburnsUpRight{0%{transform:scale(1.5) translate(-10%,10%)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsUpRight{0%{transform:scale(1.5) translate(-10%,10%)}100%{transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUp{-webkit-animation:kenburnsUp ease-out;animation:kenburnsUp ease-out}@-webkit-keyframes kenburnsUp{0%{transform:scale(1.5) translate(0,10%)}100%{transform:scale(1) translate(0,0)}}@keyframes kenburnsUp{0%{transform:scale(1.5) translate(0,10%)}100%{transform:scale(1) translate(0,0)}}




@font-face {
    font-display: swap;
    font-family: 'Oswald Medium';
    src: url('/lib/fonts/Oswald-Medium.woff2');
    font-weight: 500;
}

@font-face {
    font-display: swap;
    font-family: 'Oswald Light';
    src: url('/lib/fonts/Oswald-Light.woff2');
    font-weight: 300;
}

:root {
    --base-text-color: #000;
    --base-color-selected: #FFF;
    --base-bg-selected: #333;
    --scroller-thumb-color: rgb(255,255,255);
    --scroller-color: rgb(63, 70, 79);
    --shadow-2: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086);
    --shadow-3: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    --shadow-4: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
    --shadow-up-2: 0 -8px 20px -5px rgba(0,0,0,0.5);
}


::-webkit-scrollbar {
    width: 8px;
    height: 6px;
    background-color: rgba(0,0,0,0);
}

::-webkit-scrollbar-button {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroller-thumb-color);
    border: 0;
    border-radius: 6px;
}

html, body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}


body {
    background-color: #000;
    background-image: url('/lib/images/events/wooferland-stage-3.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

    body.page {
        background-image: url('/lib/images/events/wooferland-stage-2.jpg');
    }

    body.has-slider {
        background-image: none;
    }

main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    padding: 0;
}

article, header, section, nav {
    display: flex;
}


header {
    flex: 0 0 auto;
}

.navbar-brand {
    padding: 0;
    margin: 1em;
}

.page .navbar-brand {
    margin: 0.25em 1em;
}

header .navbar-brand img {
    height: 50px;
    width: 100%;
    max-width: 150px;
    transition: all 0.3s ease-in-out;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
    filter: drop-shadow(5px 5px 8px rgba(0,0,0,0.8));
}


article {
    flex-direction: column;
    flex: 1 1 auto;
    scroll-behavior: smooth;
}


    article > section {
        flex: 1 1 auto;
        min-height: 0;
    }



footer {
    flex: 0 0 auto;
}

footer {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: rgba(0,0,0,.4);
    padding: 1em 2em;
    border-radius: 2em 2em 0 0;
}

    footer p {
        color: #fff;
        margin: 0.25em 0;
    }

    footer a {
        display: inline-block;
        padding: 0 0.25em;
        color: #fff;
        transition: all 0.3s ease-in-out;
    }

        footer a:hover {
            color: #000;
            background: #fff;
        }



.nav-container {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
}

    .nav-container nav {
        flex: 0 0 auto;
        align-items: flex-start;
        justify-content: flex-end;
        margin-left: auto;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-radius: 0 0 1em 1em;
        padding: 0 1em;
        background-color: rgba(0,0,0,0);
    }

.page .nav-container nav {
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.nav-container .navbar-nav {
    display: flex;
    flex-direction: row;
}

    .nav-container .navbar-nav .nav-link {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        display: block;
        padding: 1em 1.5em;
        margin: 0;
        letter-spacing: 0.2em;
        transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
        border-radius: 0 0 0.2em 0.2em;
        text-shadow: 1px 1px 2px rgba(0,0,0,.7);
    }

        .nav-container .navbar-nav .nav-link:hover {
            color: rgba(0, 0, 0, 0.8);
            background-color: rgba(255,255,255,.9);
            box-shadow: inset 0 0 0 rgb(255 255 255 / 30%), 0 0 1.2em rgb(255 255 255 / 50%);
        }

        .nav-container .navbar-nav .nav-link.active {
            color: rgba(0, 0, 0,1);
            background-color: rgba(255,255,255,.8);
            box-shadow: inset 0 0 0 rgb(255 255 255 / 30%), 0 0 1.2em rgb(255 255 255 / 50%);
        }

    .nav-container .navbar-nav .dropdown-menu {
        box-shadow: var(--shadow-4);
        min-width: 100%;
    }

    .nav-container .navbar-nav .dropdown-item {
        font-size: 1.2rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
        transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
        padding: 0.5em 1em;
    }

.nav-container .dropdown-item[data-selected="True"] {
    background-color: var(--base-bg-selected);
    color: var(--base-color-selected);
    cursor: default;
}

.nav-container .nav-toggle-sidebar {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 0.25em;
    padding: 1em;
    margin: 0;
    background-color: rgba(0,0,0,.2);
}


#bg-slider {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
}



#offcanvasMenu {
    backdrop-filter: blur(20px);
    background-color: rgba(0,0,0,.1);
    color: #fff;
    width: 300px;
}

    #offcanvasMenu .offcanvas-header {
        padding: 0.5em;
    }

    #offcanvasMenu .btn-offcanvas-close {
        margin: 0;
        padding: 0.25em;
        background-color: #000;
    }

    #offcanvasMenu nav .nav-link {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        display: block;
        padding: 1em 1.5em;
        margin: 0;
        letter-spacing: 0.2em;
        transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
        border-radius: 0 0 0.2em 0.2em;
        text-shadow: 1px 1px 2px rgb(0 0 0 / 80%);
    }

    #offcanvasMenu .nav-link.active {
        border: 1px solid white;
        border-radius: 0.25em;
    }

    #offcanvasMenu .nav-item .dropdown-item {
        color: var(--base-color-selected);
    }

        #offcanvasMenu .nav-item .dropdown-item:hover,
        #offcanvasMenu .nav-item .dropdown-item:focus {
            background-color: rgb(255,255,256,.6);
            color: black;
        }
/* page settings */
.page main {
    backdrop-filter: blur(18px);
    background-color: rgba(0,0,0,.4);
    box-shadow: var(--shadow-2);
}


.page header {
    border-radius: 0 0 1em 1em;
    box-shadow: none;
    backdrop-filter: none;
    background-color: rgba(0,0,0,.8);
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
}

.page article {
    padding: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 1em;
    min-width: 0;
    min-height: 0;
}

    .page article > .container {
        padding: 0;
    }

.page footer {
    border-radius: 1em 1em 0 0;
    box-shadow: none;
    backdrop-filter: none;
}

.page article.page-white {
    background-color: rgba(255,255,255,.9);
    padding: 1em;
}


.card-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.card {
    flex: 1 0 0%;
    box-shadow: var(--shadow-4);
    border-radius: 0.25em;
    min-width: 340px;
    overflow: hidden;
    border: 0;
}

    .card video {
        overflow: hidden;
        border-radius: 0.25em 0.25em 0 0;
    }

.card-body h3 {
    font-family: 'Oswald light', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

.card-link {
    text-decoration: none;
}

    .card-link .svg-icon {
        margin-right: 0.5em;
    }


.card .img-wrapper {
    overflow: hidden;
    position: relative;
    width:100%;
    height:292px;
}

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

    .card .img-wrapper {
   
        height: 193px;
    }

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

    .card .img-wrapper {
        height: 193px;
    }
}


/* ken burns animation */
.animation-kenburns img {
    display:block;
    width: 100%;
    animation: move 40s ease;
    -webkit-animation: move 40s ease;
    -moz-animation: move 40s ease;
    position: absolute;
}


@-webkit-keyframes move {
    0% {
        -webkit-transform-origin: bottom left;
        -webkit-transform: scale(1.0);
    }

    100% {
        -webkit-transform: scale(1.2);
    }
}

@keyframes move {
    0% {
        transform-origin: bottom left;
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.2);
    }
}


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

    header .navbar-brand img {
        height: auto;
        padding: 1em;
    }

    .nav-toggle-sidebar {
        display: none;
    }

    .page .navbar-brand img {
        width: 50%;
        padding: 0;
    }
}



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

    header .navbar-brand img {
        max-width: 200px;
    }

    .nav-toggle-sidebar {
        display: none;
    }
}