/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15
}

body {
    margin: 0
}

main {
    position: relative;
    display: block;
    min-height: calc(100vh - 500px);
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

.a {
    background-color: transparent
}

a span, a i, a svg, a strong {
    pointer-events: none;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button i,
button svg {
    pointer-events: none;
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

p.note {
    font-size: 1.4rem;
}

[hidden],template {
    display: none
}

* {
    box-sizing: border-box
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0
}

audio,canvas,iframe,img,svg,video {
    /* vertical-align: middle; */
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

iframe,img {
    display: block;
    max-width: 100%;
}

:first-child {
    margin-top: 0!important;
}

:last-child {
    /* margin-bottom: 0!important; */
}

.featured-events,.services,.wrapper,main#content {
    margin: 0 auto;
    max-width: 1280px;
    width: calc(100% - 10vw)
}

.detailsblock .container,.fullwrap {
    margin: 0 auto;
    width: calc(100% - 10vw)
}

.button:before,.cart .row .input-wrap .btn,.cart .row .input-wrap label,.featured-events .featured-head .navi .featured-next,.featured-events .featured-head .navi .featured-prev,.hero .content .blurb-container .icoscroll,.hero .content .event-container .event-list .heropost .imgbox img,.maininfo .slider .eventslider-next,.maininfo .slider .eventslider-prev,.post .imgbox img,.post.text .txtbox,a,button,form.default label,header,header .navbar .cart .badge,header .navbar .cart .icocart,input[type=datetime-local],input[type=date],input[type=time],input[type=email],input[type=search],input[type=file],input[type=password],input[type=text],nav.main .title,select,textarea {
    transition: all .25s
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

html {
    color: var(--body-color);
    font-family: var(--body-font);
    font-size: var(--body-font-size);
    font-weight: 300;
    line-height: var(--body-line-height);
    scroll-behavior: smooth;
    scroll-padding-top: 10rem
}

body,html {
    background: var(--body-bg)
}

body {
    font-size: clamp(1.6rem,2.5vw,1.8rem);
    overflow-x: hidden;
    overscroll-behavior: none
}

blockquote,ol,p,ul {
    margin: 2rem 0
}

a {
    color: var(--link-color);
    font-weight: 700;
    text-decoration-thickness: .2rem;
    text-underline-offset: 10%
}

a:focus,a:hover {
    color: var(--link-color-hover);
    text-decoration-thickness: .3rem;
    text-underline-offset: 15%
}

strong {
    font-weight: 700
}

address {
    font-style: normal
}

blockquote {
    border-left: 5px solid var(--primary-light);
    margin: 4rem 0;
    padding-left: 20px
}

blockquote cite {
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    margin: 1rem 0 0;
    text-transform: uppercase
}

hr {
    border-top: 5px solid hsla(0,0%,100%,.2);
    margin: 3rem 0
}

hr.big {
    margin: 5rem 0
}

::-moz-selection {
    background: var(--link-color);
    color: #fff
}

::selection {
    background: var(--link-color);
    color: #fff
}

.link {
    color: var(--white);
    font-family: var(--title-font);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase
}

.link:focus,.link:hover {
    color: var(--primary)
}

.sub {
    font-weight: 700;
    margin-top: -2rem
}

.primary {
    color: var(--primary)
}

.primary-darker {
    color: var( --primary-darker)
}

.dark {
    color: var(--dark)
}

.light {
    color: var(--light)
}

ul.basic {
    list-style: none;
    margin: 3rem 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--title-font);
    font-weight: 700;
    line-height: 1.1;
    margin: 4rem 0 3rem;
    text-transform: uppercase
}

.h1,h1 {
    font-size: clamp(3.6rem,5vw,4.8rem)
}

.h2,h2 {
    font-size: clamp(3rem,5vw,4rem)
}

.h3,h3 {
    font-size: clamp(2.8rem,5vw,3.2rem)
}

.h4,h4 {
    font-size: clamp(2.4rem,5vw,2.8rem)
}

.h5,h5 {
    font-size: clamp(2rem,5vw,2.4rem)
}

.h6,h6 {
    font-size: clamp(1.8rem,5vw,2rem)
}

.nav-trigger {
    border: 2px solid var(--primary);
    height: 5rem;
    position: relative;
    width: 5rem;
    z-index: 11
}

.nav-trigger rect {
    fill: var(--primary);
    transform-origin: center;
    transition: all .25s
}

.nav-trigger rect:first-child {
    transform: translateY(-20px)
}

.nav-trigger rect:nth-child(4) {
    transform: translateY(20px)
}

.nav-trigger.active {
    border-color: var(--white)
}

.nav-trigger.active rect {
    fill: var(--white)
}

.nav-trigger.active rect:where(:first-child,:nth-child(4)) {
    transform: translateY(0) scale(0)
}

.nav-trigger.active rect:nth-child(2) {
    transform: rotate(45deg)
}

.nav-trigger.active rect:nth-child(3) {
    transform: rotate(-45deg)
}

.off {
    display: none;
}

header {
    align-items: center;
    display: flex;
    gap: 4rem;
    height: 15rem;
    width: 100%;
    justify-content: space-between;
    padding: 0 5vw;
    position: fixed;
    top: -1px;
    z-index: 10;
}

header.scroll {
    background: rgba(0,0,0,.9);
    height: 8rem
}

header.scroll nav.main {
    padding: 1.5rem 5vw
}

@media (min-width: 768px) {
    header.scroll nav.main {
        padding:1.5rem 5vw 1.5rem 5rem
    }
}

header.scroll nav.main .title {
    padding-bottom: 1.5rem
}

header .navbar {
    align-items: center;
    display: flex;
    font-size: 2rem;
    gap: 2rem;
}

@media (min-width: 640px) {
    header .navbar {
        font-size:2.4rem
    }
}

@media (min-width: 1024px) {
    header .navbar {
        gap:3rem
    }
}

@media (min-width: 1280px) {
    header .navbar {
        gap:4rem
    }
}

header .navbar a {
    position: relative;
    color: var(--white)
}

header .navbar a:focus,header .navbar a:hover {
    color: var(--primary)
}

header .navbar .social {
    display: none
}

@media (min-width: 1024px) {
    header .navbar .social {
        display:flex;
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0
    }
}

header .navbar .currency {
    display: none
}

@media (min-width: 1024px) {
    header .navbar .currency {
        display:block;
        width: 8rem
    }

    header .navbar .currency select {
        background-color: transparent;
        font-family: var(--title-font);
        font-size: 1.6rem;
        font-weight: 700;
        height: auto;
        padding: 0
    }
}

header .navbar .search {
    display: none
}

@media (min-width: 1024px) {
    header .navbar .search {
        display:block
    }

    header .navbar .search button {
        color: var(--white)
    }

    header .navbar .search button:hover {
        color: var(--primary)
    }
}

@media (min-width: 640px) {
    header .navbar .account {
        position:relative
    }
}

header .navbar .account button {
    color: var(--white);
    position: relative;
    z-index: 11
}

@media (min-width: 1024px) {
    header .navbar .account button {
        z-index:0
    }
}

header .navbar .account:hover button {
    color: var(--primary)
}

@media (min-width: 640px) {
    header .navbar .cart {
        position:relative
    }
}

header .navbar .cart button {
    position: relative;
    z-index: 11
}

@media (min-width: 1024px) {
    header .navbar .cart button {
        z-index:0
    }
}

header .navbar .cart .icocart {
    color: var(--white)
}

header .navbar .cart .badge {
    background: var(--primary);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 700;
    height: 2rem;
    min-width: 2rem;
    padding: 0 .5rem;
    position: absolute;
    right: -1rem;
    top: -.5rem;
    width: auto
}

header .navbar .cart:hover .icocart {
    color: var(--primary)
}

header .navbar .cart:hover .badge {
    background: var(--white);
    color: var(--primary)
}

header.internal {
    background: rgba(0,0,0,.9);
    height: 8rem
}

header.internal nav.main {
    padding: 1.5rem 5vw
}

@media (min-width: 768px) {
    header.internal nav.main {
        padding:1.5rem 5vw 1.5rem 5rem
    }
}

header.internal nav.main .title {
    padding-bottom: 1.5rem
}

footer .top {
    background: var(--dark-dark);
    border-top: 1rem solid var(--primary);
    display: grid;
    font-size: 1.6rem;
    font-weight: 400;
    gap: 3rem;
    grid-template-columns: 1fr;
    justify-content: space-between;
    padding: 5vw
}

@media (min-width: 640px) {
    footer .top {
        gap:3rem 1rem;
        grid-template-columns: 1fr 1fr
    }
}

@media (min-width: 1024px) {
    footer .top {
        grid-template-columns:auto auto auto 50%
    }
}

footer .top .title {
    font-family: var(--title-font);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2
}

footer .top ul {
    list-style: none;
    margin: 0;
    padding: 0
}

footer .top ul li {
    margin-top: .5rem
}

footer .top ul li a {
    color: var(--white);
    font-weight: 400;
    text-decoration: none
}

footer .top ul li a:focus,footer .top ul li a:hover {
    color: var(--primary);
    text-decoration: underline
}

footer .top form {
    position: relative
}

footer .top form .button {
    border-radius: 0;
    font-size: 2.4rem;
    height: 6rem;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 6rem
}

footer .top .adv {
    display: flex;
    grid-column: 1/-1;
    justify-content: center;
    margin-top: 3rem;
    text-align: center
}

footer .btm {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.6rem;
    font-weight: 400;
    gap: 2rem;
    justify-content: space-between;
    padding: 5rem 5vw
}

footer .btm p {
    margin: 0
}

footer .btm .social {
    display: flex;
    font-size: 2rem;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0
}

footer .btm .social a {
    color: var(--white)
}

footer .btm .social a:focus,footer .btm .social a:hover {
    color: var(--primary)
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

nav li {
    position: relative
}

nav a {
    display: block;
    text-decoration: none
}

nav.main {
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
    background-color: rgba(var(--nav-bg),.8);
    box-shadow: 0 4rem 4rem rgba(0,0,0,.5);
    display: none;
    height: 100vh;
    max-width: 60rem;
    overflow: auto;
    padding: 5rem 5vw;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

@media (min-width: 768px) {
    nav.main {
        padding:5rem 5vw 5rem 5rem
    }
}

nav.main .title {
    border-bottom: 1px solid var(--white);
    font-family: var(--title-font);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    padding-bottom: 5rem;
    text-transform: uppercase
}

nav.main .title p {
    height: 5rem
}

nav.main .extras {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between
}

@media (min-width: 1024px) {
    nav.main .extras {
        display:none
    }
}

nav.main .social {
    display: flex;
    gap: 2rem
}

nav.main .social a {
    color: var(--white)
}

nav.main .currency {
    width: 8rem
}

nav.main .currency select {
    background-color: transparent;
    font-family: var(--title-font);
    font-size: 1.6rem;
    font-weight: 700;
    height: auto;
    padding: 0
}

nav.main .search {
    position: relative;
    width: 100%
}

nav.main .search input {
    background: transparent;
    border: 1px solid var(--white);
    border-radius: 4rem;
    height: 4rem
}

nav.main .search .button {
    background: transparent;
    border: none;
    min-height: 4rem;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 4rem
}

nav.main .search .button:before {
    background: var(--white)
}

nav.main .search .button:focus,nav.main .search .button:hover {
    color: var(--primary)
}

nav.main>ul {
    margin: 2rem 0
}

@media (min-width: 1024px) {
    nav.main>ul {
        margin:4rem 0
    }
}

nav.main>ul>li {
    font-family: var(--title-font);
    margin: 2rem 0
}

nav.main>ul>li.sep {
    background: var(--white);
    height: 1px;
    opacity: .2
}

nav.main>ul>li:focus>a,nav.main>ul>li:hover>a {
    padding-left: 1rem
}

nav.main>ul>li>a {
    color: var(--white)
}

nav.main .featured .section {
    font-family: var(--title-font);
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase
}

nav.main .featured .row {
    display: flex;
    gap: 2rem;
    margin: 4rem 0
}

nav.main .featured .row .imgbox {
    width: 6rem
}

nav.main .featured .row .imgbox img {
    border-radius: 1rem
}

nav.main .featured .row .txtbox p {
    margin: .5rem 0
}

nav.main .featured .row .txtbox a {
    color: var(--white)
}

nav.main .featured .row .txtbox a:focus,nav.main .featured .row .txtbox a:hover {
    text-decoration: underline
}

nav.main .featured .row .txtbox span:after {
    content: "/";
    font-weight: 300;
    margin: 0 .5rem 0 1rem
}

nav.main .featured .row .txtbox span:last-child:after {
    content: "";
    margin: 0
}

nav.main .featured .row .txtbox .info {
    font-size: 1.4rem;
    text-transform: uppercase
}

nav.main .featured .row .txtbox .event,nav.main .featured .row .txtbox .info {
    font-family: var(--title-font);
    font-weight: 700
}

nav.main .featured .row .txtbox .location {
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase
}

nav ul li[aria-expanded=true]>ul,nav ul ul li[aria-expanded=true]>ul {
    display: flex
}

nav ul[aria-expanded=true],nav[aria-expanded=true]>ul {
    display: block!important
}

@media (min-width: 1024px) {
    nav ul[aria-expanded=true],nav[aria-expanded=true]>ul {
        display:flex!important
    }
}

button {
    background: 0;
    border: 0;
    cursor: pointer;
    padding: 0
}

.button {
    --btn-bg: var(
    --link-color);
    --btn-border: var(
    --link-color);
    --btn-color: var(
    --white);
    --btn-bg-hover: var(
    --link-color-hover);
    --btn-border-hover: var(
    --link-color-hover);
    --btn-color-hover: var(
    --white);
    align-items: center;
    background: var(--btn-bg);
    border: 2px solid var(--btn-border);
    border-radius: 5rem;
    color: var(--btn-color);
    display: inline-flex;
    font-family: var(--title-font);
    font-size: 1.6rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 5rem;
    overflow: hidden;
    padding: 0 3rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateZ(0)
}

.button:before {
    background: var(--btn-bg-hover);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
    z-index: -1
}

html.device-no-touch .button:focus:enabled,
html.device-no-touch .button:hover:enabled {
    color: var(--btn-color-hover)
}

html.device-no-touch .button:focus:enabled:before,
html.device-no-touch .button:hover:enabled:before {
    opacity: 1;
    transform: scale(1)
}

.button.ghost {
    background: transparent;
    color: var(--primary)
}

html.device-no-touch .button.ghost:focus:enabled,
html.device-no-touch .button.ghost:hover:enabled {
    border-color: var(--btn-bg-hover);
    color: var(--white)
}

.button.secondary {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.button.secondary:before {
    background: var(--secondary-dark)
}

html.device-no-touch .button.secondary:focus:enabled,
html.device-no-touch .button.secondary:hover:enabled {
    border-color: var(--secondary-dark);
    color: var(--dark)
}

.button.secondary.ghost {
    background: transparent;
    color: var(--secondary)
}

.button.secondary.ghost:before {
    background: var(--secondary)
}

html.device-no-touch .button.secondary.ghost:focus:enabled, 
html.device-no-touch .button.secondary.ghost:hover:enabled {
    border-color: var(--secondary);
    color: var(--dark)
}

.button.processing:not(.icon) {
    pointer-events: none;
    padding-left: calc(2rem + 1em) !important;
    border-color: #00000000 !important;
}

.button.processing {
    pointer-events: none;
}

.button.processing:not(.icon) .ico {
    position: absolute;
    left: 1rem;
}

.button.icon.processing > *:first-child {
    visibility: hidden;
}

.button.processing.icon .ico:last-child {
    position: absolute;
}

.button.white, .button.processing {
    background: var(--white);
    border-color: var(--white);
    color: var(--black)
}

.button.white:before {
    background: var(--black)
}

html.device-no-touch .button.white:focus:enabled, 
html.device-no-touch .button.white:hover:enabled {
    border-color: var(--black);
    color: var(--white)
}

.button.white.ghost {
    background: transparent;
    color: var(--white)
}

.button.white.ghost:before {
    background: var(--white)
}

html.device-no-touch .button.white.ghost:focus:enabled, 
html.device-no-touch .button.white.ghost:hover:enabled {
    border-color: var(--white);
    color: var(--black)
}

.button.black {
    background: var(--black);
    border-color: var(--black);
    color: var(--white)
}

.button.black:before {
    background: #222
}

html.device-no-touch .button.black:focus:enabled, 
html.device-no-touch .button.black:hover:enabled {
    border-color: #222;
    color: var(--white)
}

.button.black.ghost {
    background: transparent;
    color: var(--black)
}

.button.black.ghost:before {
    background: var(--black)
}

html.device-no-touch .button.black.ghost:focus:enabled, 
html.device-no-touch .button.black.ghost:hover:enabled {
    border-color: var(--black);
    color: var(--white)
}

.button.big {
    font-size: 1.8rem;
    min-height: 6rem;
    padding: 0 4rem
}

.button.small {
    font-size: 1.4rem;
    min-height: 4rem;
    padding: 0 1.5rem
}

.button.tiny {
    font-size: 1.2rem;
    min-height: 3rem;
    padding: 0 1.5rem
}

.button.full {
    width: 100%;
}

.button.right {
    float: right;
    margin: 0 .5rem;
}

@media (min-width: 567px) {
    .mobile-only {
        display: none !important;
    }
}

.button.mobile-icon i,
.button.mobile-icon svg {
    display: none;
}


@media (max-width: 568px) {

    .desktop-only {
        display: none !important;
    }

    .button.mobile-icon span {
        display: none;
    }

    .button.mobile-icon i,
    .button.mobile-icon svg {
        display: inherit;
    }
        
    .button.mobile-full {
        width: 100%
    }

    .mobile-reverse-column {
        display: flex;
        gap: 2rem;
        flex-direction: column-reverse;
    }
    
}

.button.facebook {
    background: #4267b2;
    border-color: #4267b2;
    color: var(--white)
}

.button.facebook:before {
    background: #34518d
}

.button.facebook:focus,.button.facebook:hover {
    border-color: #34518d;
    color: var(--white)
}

.button .ico {
    margin-right: 1rem
}

form {
    color-scheme: dark
}

label,legend {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0
}

.nolabel label {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

input[type=date], input[type=time], input[type=datetime-local], input[type=email], input[type=search], input[type=file], input[type=password], input[type=text], input[type=url], input[type=tel], input[type=number], select, textarea {
    align-items: center;
    background-color: var(--dark);
    border: none;
    border-radius: 0;
    color: var(--body-color);
    display: flex;
    font-family: var(--body-font);
    font-size: 1.6rem;
    font-weight: 400;
    height: 6rem;
    margin: 0;
    outline: 0;
    padding: 0 1rem;
    width: 100%
}


input[type=date],input[type=time],input[type=file],input[type=email],input[type=search][type=file],input[type=file][type=file],input[type=password][type=file],input[type=text][type=file],select[type=file],textarea[type=file] {
    padding: .7rem 1rem
}

input[type=date]:focus,input[type=time]:focus,input[type=datetime-local]:focus,input[type=email],input[type=search]:focus,input[type=file]:focus,input[type=password]:focus,input[type=text]:focus,select:focus,textarea:focus {
    background-color: var(--dark)
}

input[type=date]::-moz-placeholder,input[type=time]::-moz-placeholder,input[type=datetime-local]::-moz-placeholder,input[type=email],input[type=search]::-moz-placeholder,input[type=file]::-moz-placeholder,input[type=password]::-moz-placeholder,input[type=text]::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder {
    color: var(--body-color)
}

input[type=date]::placeholder,input[type=time]::placeholder,input[type=datetime-local]::placeholder,input[type=email],input[type=search]::placeholder,input[type=file]::placeholder,input[type=password]::placeholder,input[type=text]::placeholder,select::placeholder,textarea::placeholder {
    color: var(--body-color);
}

input[type=date],
input[type=time],
input[type=datetime-local] {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #222c3a inset !important;
    -webkit-text-fill-color: var(--white);    
}

form.light input:-webkit-autofill, 
form.light input:-webkit-autofill:hover, 
form.light input:-webkit-autofill:focus, 
form.light input:-webkit-autofill:active,
form.light select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: var(--dark);    
}

form.small input[type=date], 
form.small input[type=time], 
form.small input[type=datetime-local], 
form.small input[type=email], 
form.small input[type=file], 
form.small input[type=password], 
form.small input[type=text], 
form.small input[type=url], 
form.small input[type=tel], 
form.small input[type=number], 
form.small select, 
form.small textarea {
     font-size: 1.5rem;
     height: 5rem;
}

form.default.small label {
    font-size: 1.4rem;
    top: 1.4rem;
}

form.default.small input:focus~label,
form.default.small input:not(:placeholder-shown)~label,
form.default.small input:read-only~label,
form.default.small select:valid~label,
form.default.small select:read-only~label,
form.default.small textarea:focus~label,
form.default.small textarea:not(:placeholder-shown)~label, 
form.default.small textarea:read-only {
    transform: translateY(-2.8rem);  
}


textarea {
    align-items: flex-start;
    min-height: 20rem;
    padding: 2rem 1rem
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg height="50" width="100" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="white" points="100,0 0,0 50,50"/></svg>') right 1rem top 50%/1rem no-repeat var(--input-bg);
    padding: 0 1rem
}

/* disabled */
select:invalid {
    1color: rgba(0,0,0,.5) }

select option {
    opacity: 1
}

fieldset {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -.5rem
}

fieldset legend {
    margin-bottom: 1rem
}

fieldset.stack {
    flex-direction: column
}

fieldset.stack label {
    margin: 0 0 .5rem
}

fieldset label {
    font-weight: 400;
    height: auto!important;
    margin: 0 2rem .5rem 0!important;
    overflow: visible!important;
    position: inherit!important;
    width: auto!important
}

fieldset label input {
    margin: 0 .5rem 0 0
}

fieldset+.error-flag {
    margin-top: 1rem
}

.error-flag,.success-flag {
    pointer-events: none;
    position: absolute;
    left: 1rem;
    color: var(--error);  
    background: var(--dark);
    border-radius: 2px;
    display: none;
    font-size: 1.2rem;
    font-weight: 700;
    padding: .5rem;
    text-transform: uppercase;
    transform: translateY(-50%);
}

form.light .error-flag,
form.light .success-flag {    
    background: var(--white);  
}

.success-flag {
    background: var(--success)
}

.errormsg,.successmsg {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase
}

.successmsg {
    color: var(--success)
}

.errormsg {
    color: var(--error)
}

.successbox {
    background: var(--success)
}

.errorbox,.successbox {
    border-radius: 1rem;
    font-size: 2rem;
    font-weight: 400;
    margin: 5rem 0;
    padding: 2rem
}

.errorbox {
    background: var(--error)
}

.errorbox p:last-child {
    margin-bottom: 0;
}

.errorbox ul {
    font-size: 1.6rem;
    padding: 0 0 0 2rem
}

.errorbox ul li {
    margin: .5rem 0
}

.errorbox a {
    color: var(--white)
}

.flexform {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem
}

.flexform p {
    margin: 0
}

.imgfile {
    width: 10rem
}


.imgfile[draggable] {
    cursor: move;
}

.imgfile .imgbox {
    height: 10rem;
    overflow: hidden;
    width: 10rem
}

.imgfile .imgbox.pending {
    display:flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 1rem;
}

.imgfile .imgbox.pending i,
.imgfile .imgbox.pending svg {
    color: var(--primary);
}


.imgfile .imgbox img {
    border-radius: 1rem;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.imgfile .actions {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    width: 100%
}

.imgfile .actions a {
    color: var(--white)
}

.imgfile .actions a:hover {
    color: var(--primary)
}

.input-wrap.files:not(.list) .imgfile:first-of-type .actions li:first-child,
.input-wrap.files:not(.list) .imgfile:last-of-type .actions li:last-child  {
    opacity: 0.1;
    pointer-events: none;
}

/* imgfile list */
.input-wrap.files.list {
    gap: 1rem;
}

.input-wrap.files.list .imgfile {
    width: auto;
    background: #FFF;
    background-color: rgba(var(--primary-rgb),.4);
    display: flex;    
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
    padding: .2rem 1rem;
    font-weight: bold;
    border-radius: 5px;
    margin: 0;
}

.input-wrap.files.list .imgfile.error {
    width: 100%;
    background: var(--error);
}

.input-wrap.files.list .imgfile .actions {
    width: auto;
    margin: 0;
}

.input-wrap.files.list .imgfile .actions a {
    color: var(--dark);
}

.input-wrap {
    width: 100%
}
.input-wrap.off {
    display: none;
}

.input-wrap.error * {
    border-color: var(--error)
}

.input-wrap.error label, .input-wrap.error legend {
    color: var(--error)
}

.input-wrap.error .error-flag {
    display: block
}

.input-wrap.success * {
    border-color: var(--success)
}

.input-wrap.success label,.input-wrap.success legend {
    color: var(--success)
}

.input-wrap.success .success-flag {
    display: block;
    color: var(--white);
}

@media (min-width: 768px) {
    .input-wrap.four,.input-wrap.two {
        width:calc(50% - 1rem)
    }

    .input-wrap.three {
        width: calc(33.33333% - 1.34rem)
    }
}

@media (min-width: 1024px) {
    .input-wrap.four {
        width:calc(25% - 1.5rem)
    }
}

.input-wrap.flexwrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem
}

.input-wrap.files {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    width: 100%
}

.input-wrap.split {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between
}

.input-wrap.upload {
    position: relative
}

.input-wrap.upload .button {
    border-radius: 0;
    min-height: 6rem;
    padding: 0 1rem;
    position: absolute;
    right: 0;
    top: 0
}

form.default, .form-section {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 2rem;
}

.form-section.off {
    display: none;
}

form.default .input-wrap {
    position: relative
}

form.default .input-wrap.error label,form.default .input-wrap.success label {
    opacity: 1
}

form.default input,form.default select,form.default textarea {
    background-color: transparent;
    border: 1px solid var(--white)
}


form.default input:focus,form.default select:focus,form.default textarea:focus {
    background-color: var(--dark);
    border-bottom: 1px solid var(--primary)
}

form.default label {
    font-size: 1.6rem;
    font-weight: 400;
    left: 1rem;
    opacity: .5;
    position: absolute;
    top: 1.7rem;
    transform-origin: 0 50%;
}

form.default input + label, form.default select + label {
    pointer-events: none;
}

form.default input:not(:-moz-placeholder-shown)~label, form.default textarea:not(:-moz-placeholder-shown)~label {
    background: var(--dark);
    font-size: 1.2rem;
    opacity: 1;
    padding: .5rem;
    transform: translateY(-3rem);
    font-weight: bold;
}

form.default input:focus~label,
form.default input:not(:placeholder-shown)~label,
form.default input:read-only~label,
form.default select:valid~label,
form.default select:read-only~label,
form.default textarea:focus~label,
form.default textarea:not(:placeholder-shown)~label, 
form.default textarea:read-only {
    background: var(--dark);
    font-size: 1.2rem;
    opacity: 1;
    padding: .5rem;
    transform: translateY(-3rem);    
    font-weight: bold;
}

form.default input[type=file] {
    padding: 1.6rem 1rem 1.6rem 7rem
}

form.default .note {
    font-size: 1.2rem;
    font-weight: 700;
    margin: .5rem 0 0
}

form.default .pass {
    color: var(--white);
    display: block;
    font-size: 1.4rem;
    margin: 0;
    text-transform: uppercase
}

form.default fieldset label {
    opacity: 1
}

form.default fieldset.single-input label {
    display: flex;
    align-items: flex-start;
    line-height: 1.2em;
}

form.default fieldset.single-input label input {
    position: relative;
    top: 5px;
    margin-right: 1.5rem;
}

form.default.light {
    background: var(--white);
    /* border-radius: 1rem; */
    color: var(--black);
    color-scheme: light;
    padding: 2rem;
}

form.default.light label,form.default.light legend {
    color: var(--black);
}

form.default.light input[type=time], form.default.light input[type=date], form.default.light input[type=datetime-local], form.default.light input[type=email], form.default.light input[type=file], form.default.light input[type=password], form.default.light input[type=text], form.default.light input[type=url], form.default.light input[type=tel], form.default.light input[type=number], form.default.light select, form.default.light textarea {
    border: 1px solid var(--dark);
    color: var(--black);
}

form.default.light input[type=time]:focus, form.default.light input[type=date]:focus, form.default.light input[type=datetime-local]:focus, form.default.light input[type=email]:focus,form.default.light input[type=url]:focus, form.default.light input[type=tel]:focus, form.default.light input[type=number]:focus ,form.default.light input[type=file]:focus,form.default.light input[type=password]:focus,form.default.light input[type=text]:focus,form.default.light select:focus,form.default.light textarea:focus {
    background-color: transparent;
    border-bottom: 1px solid var(--primary)
}

form.default.light input:not(:-moz-placeholder-shown)~label,form.default.light textarea:not(:-moz-placeholder-shown)~label {
    background: var(--white)
}

form.default.light input:focus~label,
form.default.light input:not(:placeholder-shown)~label,
form.default.light input:read-only~label,
form.default.light select:valid~label,
form.default.light select:read-only~label,
form.default.light textarea:focus~label,
form.default.light textarea:not(:placeholder-shown)~label, 
form.default.light textarea:read-only~label
{
    background: var(--white)
}

form.default.light select {
    background: url('data:image/svg+xml;utf8,<svg height="50" width="100" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="black" points="100,0 0,0 50,50"/></svg>') right 1rem top 50%/1rem no-repeat var(--input-bg)
}

form.default.light input[type=date],
form.default.light input[type=time],
form.default.light input[type=datetime-local] {
    color: var(--dark)
}

form.default.light .input-wrap.error * {
    border-color: var(--error)
}

form.default.light .input-wrap.error label,form.default.light .input-wrap.error legend {
    color: var(--error);
    font-weight: bold;
}

form.default.light .input-wrap.error .error-flag {
    display: block
}

form.default.light .input-wrap.success * {
    border-color: var(--success)
}

form.default.light .input-wrap.success label,form.default.light .input-wrap.success legend {
    color: var(--success)
}

form.default.light .input-wrap.success .success-flag {
    display: block
}

form.default.light .imgfile .actions a,form.default.light .note,form.default.light .pass {
    color: var(--black)
}

form.default.light .imgfile .actions a:hover {
    color: var(--primary)
}


/* read only */

form.default input:read-only + label,
form.default textarea:read-only + label {
    color: #bcbcbc !important; 
    pointer-events: none;
}

form.default input:read-only,
form.default textarea:read-only {
    border: 1px solid #bcbcbc !important;
    color: #000000 !important; 
    pointer-events: none;
}



.skip-to-content {
    left: 5px;
    position: absolute;
    top: 0;
    transform: translateY(-500%);
    z-index: 99999
}

.skip-to-content:focus {
    transform: translateY(0)
}

.wrapcontainer {
    margin: 0 auto;
    max-width: 128rem;
    width: 100%
}

.pad {
    margin: 3rem 0;
}

.padtop {
    margin-top: 3rem
}

.iframe-wrap {
    height: 0;
    padding-bottom: 56.25%;
    position: relative
}

.iframe-wrap iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.map-wrap {
    height: 100%;
    padding-bottom: 56.25%;
    position: relative
}

.map-wrap iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.aligncenter,.alignleft,.alignright {
    border-radius: 1rem;
    float: none;
    margin: 3rem auto
}

@media (min-width: 768px) {
    .alignleft {
        float:left;
        margin: 1rem 3rem 3rem 0
    }

    .alignright {
        float: right;
        margin: 1rem 0 3rem 3rem
    }
}

figure.aligncenter {
    width: 100%
}

@media (min-width: 1024px) {
    figure.aligncenter {
        width:90%
    }
}

figure figcaption {
    border-bottom: 1px solid #ccc;
    font-size: clamp(1.4rem,2vw,1.6rem);
    padding: 1rem 0
}

@media (min-width: 1024px) {
    .mobi {
        display:none
    }
}

.desk {
    display: none
}

@media (min-width: 1024px) {
    .desk {
        display:block
    }
}

.cover {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.accordion .accordion-content {
    display: none
}

.tablist .trigger:focus,.tablist .trigger:hover,.tablist .trigger[aria-selected=true] {
    color: var(--primary)
}

main#content {
    padding: clamp(5rem,10vw,10rem) 0;
    margin-top: 6rem;
}

main#content.full {
    max-width: 100%
}

main#content.eventpage {
    max-width: none;
    padding: 0rem 0 clamp(5rem,10vw,10rem);
    width: 100%
}

.event-maininfo-wrapper {
    padding: 5rem 0;
    position: relative;
}

main#content.eventpage .detailsblock {
    margin-top: 0px;
}

.event-maininfo-wrapper.blur-bg {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.event-maininfo-wrapper.blur-bg .blur-cover {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgb(34 44 58 / 90%);
  backdrop-filter: blur(8px);    
} 

.alert {
    background: var(--primary);
    font-size: clamp(1.2rem,2.5vw,1.4rem);
    font-weight: 400;
    padding: 1rem 0;
    position: relative;
    text-align: center;
    z-index: 2
}

.alert a {
    color: var(--white);
    font-weight: 400
}

.alert.upgrade p {
    margin-bottom: 0;
}

.alert.upgrade {
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;    
}

header.internal:has(.alert.upgrade) {
    margin-top: 38px;
}

header .search {
    position: relative;
}

#searchbar {
    display: none;
    transition: none;
}

#searchbar.active {
    position: absolute;
    top: -12px;
    right: -20px;
    display: block;
    width: 500px;
    background-color: var(--dark);
    border-radius: 5rem;
}

#searchbar form {
    display: flex
}

#searchbar form input {
    padding: 0
}

#searchbar form button {
    color: var(--white);
    width: 6rem
}

#searchbar form button:focus,#searchbar form button:hover {
    color: var(--primary)
}

.body-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 90dvh;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.body-bg .fade {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 40%, var(--body-bg) 80%);
}

@media (orientation : portrait) {
    .body-bg {
        background-image: var(--hero-bg-image-mobile,var(--hero-bg-image));
    }
}

.hero,.hero .bg {
    position: relative
}

.hero .bg {
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--hero-bg-image);
}

@media (orientation : portrait) {
    .hero .bg {
        background-image: var(--hero-bg-image-mobile,var(--hero-bg-image));
        min-height: 100dvh;
    }
}

.hero .bg:before {
    background: rgba(0,0,0,.6);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%
}

.hero .content {
    display: grid;
    gap: 5vw;
    grid-template-columns: 1fr;
    height: 100%;
    padding: 15rem 5vw 5rem;
    position: relative;
    width: 100%;
    z-index: 2;
    padding-bottom: 0px;
}

@media (min-width: 1024px) {
    .hero .content {
        grid-template-columns:1fr 1fr
    }
}

.hero .content .blurb-container {
    align-items: center;
    display: flex
}

@media (orientation : portrait) {
    .hero .content .blurb-container {
        min-height: auto;
    }
}

.hero .content .blurb-container .icoscroll {
    display: none
}

@media (min-width: 1024px) {
    .hero .content .blurb-container .icoscroll {
        align-items:center;
        border: 2px solid var(--white);
        border-radius: 5rem;
        bottom: 5rem;
        color: var(--white);
        display: inline-flex;
        font-size: 2.4rem;
        height: 5rem;
        justify-content: center;
        left: 5vw;
        /* position: absolute; */
        width: 5rem
    }

    .hero .content .blurb-container .icoscroll:focus,.hero .content .blurb-container .icoscroll:hover {
        background: var(--white);
        color: var(--primary)
    }
}

.hero .content .blurb-container .blurb h1 {
    font-size: clamp(3.6rem,3vw,6rem)
}

.hero .content .blurb-container .blurb .lead {
    font-family: var(--title-font);
    font-size: clamp(2rem,3vw,2.4rem)
}

.hero .content .event-container {
    align-items: center;
    display: flex
}

.hero .content .event-container .event-list {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    width: 100%;
}

.hero .content .event-container .event-list .heropost {
    display: grid;
    grid-template-columns: 30% 1fr;
    height: fit-content;
}

.hero .content .event-container .event-list .heropost .imgbox {
    border-radius: 1rem 0 0 1rem;
    display: block;
    overflow: hidden;
    position: relative
}

.hero .content .event-container .event-list .heropost .imgbox .badge {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 2
}

.hero .content .event-container .event-list .heropost .imgbox img {
    position: absolute;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: top;
    width: 100%;    
}

.hero .content .event-container .event-list .heropost .imgbox:focus img,.hero .content .event-container .event-list .heropost .imgbox:hover img {
    transform: scale(1.1)
}

.hero .content .event-container .event-list .heropost .txtbox {
    background: rgba(0,0,0,.6);
    border-radius: 0 1rem 1rem 0;
    padding: 1rem 2rem;
    
}

.hero .content .event-container .event-list .heropost .txtbox a {
    color: var(--white);
    text-decoration: none
}

.hero .content .event-container .event-list .heropost .txtbox a:focus,.hero .content .event-container .event-list .heropost .txtbox a:hover {
    text-decoration: underline
}

.hero .content .event-container .event-list .heropost .txtbox .labels {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.hero .content .event-container .event-list .heropost .txtbox .title {
  
    font-family: var(--title-font);
    font-size: clamp(1.5rem,1.5vw,2.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 50vw;
}

@media (min-width: 1025px) {
    .hero .content .event-container .event-list .heropost .txtbox .title {
        width: 25vw;
    }
}

.hero .content .event-container .event-list .heropost .txtbox .location {
    font-size: 1.6rem;
    margin: 0;
    text-transform: uppercase
}

.hero .content .event-container .event-list .heropost .txtbox .location span:after {
    content: "/";
    font-weight: 300;
    margin: 0 .5rem 0 1rem
}

.hero .content .event-container .event-list .heropost .txtbox .location span:last-child:after {
    content: "";
    margin: 0
}

.hero-internal {
    height: 70vh;
    margin-top: -8rem;
    position: relative
}

.hero-internal .bg {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.hero-internal .blurb-container {
    align-items: center;
    background: rgba(0,0,0,.6);
    display: flex;
    height: 100%;
    padding: 0 5vw;
    position: absolute;
    width: 100%
}

.hero-internal .blurb-container .blurb {
    max-width: 90rem;
    padding-top: 8rem;
    width: 100%
}

.hero-internal .blurb-container .blurb h1 {
    font-size: clamp(3.6rem,3vw,6rem)
}

.hero-internal .blurb-container .blurb .lead {
    font-family: var(--title-font);
    font-size: clamp(2rem,3vw,2.4rem)
}

.filters {
    align-items: center;
    background: var(--primary);
    border-radius: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
    position: sticky;
    top: 9rem;
    width: 100%;
    z-index: 9
}

@media (min-width: 768px) {
    .filters {
        border-radius:3rem;
        flex-wrap: nowrap
    }
}

.filters .main-trigger {
    color: var(--white)
}

@media (min-width: 768px) {
    .filters .main-trigger {
        display:none
    }
}

.filters .main-content {
    width: 100%
}

@media (min-width: 768px) {
    .filters .main-content {
        display:flex!important;
        gap: 1rem
    }
}

.filters .main-content form {
    flex-wrap: wrap
}

@media (min-width: 768px) {
    .filters .main-content form {
        flex-wrap:nowrap
    }
}

.filters .sub-form {
    margin: 2rem 0
}

@media (min-width: 768px) {
    .filters .sub-form {
        margin:0
    }
}

.filters .sub-trigger {
    color: var(--white);
    display: flex;
    font-size: 1.4rem;
    font-weight: 700;
    justify-content: space-between;
    text-transform: uppercase;
    width: 100%
}

@media (min-width: 768px) {
    .filters .sub-trigger {
        display:inline;
        font-size: 1.8rem
    }

    .filters .sub-trigger span {
        display: none
    }
}

.filters .sub-content {
    padding-top: 1rem
}

@media (min-width: 768px) {
    .filters .sub-content {
        background:var(--primary);
        border-radius: 2rem;
        left: 0;
        padding: 1rem;
        position: absolute;
        top: 5.5rem;
        width: 100%
    }

    .filters .sub-content form {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill,minmax(20%,1fr))
    }
}

.filters p {
    font-family: var(--title-font);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase
}

@media (min-width: 768px) {
    .filters p {
        margin:0 0 0 1rem
    }
}

.filters form {
    display: flex;
    gap: 1rem;
    width: 100%
}

.filters form .input-wrap {
    width: 100%
}

.filters form input,.filters form select {
    background-color: var(--primary-dark);
    border-radius: 3rem;
    font-size: 1.4rem;
    font-weight: 400;
    height: 3rem
}

.filters form input:focus,.filters form select:focus {
    background-color: var(--primary-dark)
}

.filters form .multiselect {
    position: relative;
    width: 100%
}

.filters form .multiselect .selectbox {
    font-size: 400;
    position: relative;
    z-index: 2
}

.filters form .multiselect .selectbox select {
    width: 100%
}

.filters form .multiselect .selectcontainer {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.filters form .multiselect #checkboxselect {
    background-color: var(--primary-dark);
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    display: none;
    padding: 2rem 1rem 1rem;
    position: absolute;
    top: 1.5rem;
    width: 100%;
    z-index: 1
}

.filters form .multiselect #checkboxselect label {
    align-items: center;
    display: flex;
    font-size: 1.4rem;
    font-weight: 400;
    gap: 1rem
}

.filters .btns {
    display: flex;
    gap: 1rem
}

.filters .button {
    font-size: 1.2rem;
    min-height: 3rem;
    padding: 0 1rem;
    width: 8rem
}

.badge {
    align-items: center;
    background: var(--white);
    border-radius: 3rem;
    color: var(--primary);
    display: inline-flex;
    font-size: 1.6rem;
    height: 3rem;
    justify-content: center;
    width: 3rem
}

.soldout {
    background: var(--error);
    color: var(--white)
}

.pill,.soldout {
    align-items: center;
    border-radius: 3rem;
    display: inline-flex;
    font-size: 1.2rem;
    height: 3rem;
    justify-content: center;
    padding: 0 1rem;
    text-transform: uppercase
}

.pill {
    background: var(--white);
    color: var(--primary);
    font-family: var(--title-font);
    font-weight: 700;
    pointer-events: none;
}

.pill.primary {
    background: var(--primary);
    color: var(--white)
}

.pill.secondary {
    background: var(--secondary);
    color: var(--white)
}

.pill.white {
    background: var(--white);
    color: var(--dark)
}

.pill.link {
    background: var(--primary);
    color: var(--white);
    height: 3rem;
    width: 3rem;
    pointer-events: visible;
    min-width: 40px;
    min-height: 40px;
}

.pill.link:focus,.pill.link:hover {
    background: var(--white);
    color: var(--primary)
}


main#content.listing {
    padding-top: 5vw;
    margin-top: 0
}

.postgrid {
    display: grid;
    gap: 5vw;
    grid-template-columns: repeat(1,1fr);
    margin: 5vw 0;
}

@media (min-width: 640px) {
    .postgrid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    main#content.listing {
        padding-top: 5rem;
    }
    .postgrid {
        margin: 5rem 0;
        gap:5rem;
        grid-template-columns: repeat(3,1fr)
    }
}

@media (min-width: 1280px) {
    .postgrid {
        grid-template-columns:repeat(4,1fr)
    }
}

@media (min-width: 640px) {
    .postgrid .post:nth-child(5n+1) {
        grid-column:span 2
    }
}

.standardgrid {
    display: grid;
    gap: 5rem;
    grid-template-columns: repeat(1,1fr);
    margin: 5rem 0
}

@media (min-width: 640px) {
    .standardgrid {
        gap:5rem 2rem;
        grid-template-columns: repeat(2,1fr)
    }
}

@media (min-width: 768px) {
    .standardgrid {
        gap:5rem
    }
}

@media (min-width: 1024px) {
    .standardgrid {
        gap:5rem 2rem;
        grid-template-columns: repeat(3,1fr)
    }
}

@media (min-width: 1280px) {
    .standardgrid {
        gap:5rem
    }
}

.standardgrid .box .btns {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem
}

.standardgrid .box .btns p {
    margin: 0
}

.loadmore {
    grid-column: 1/-1;
    text-align: center;
    width: 100%
}

.post {
    background: var(--dark-dark);
    border-radius: 1rem;
    height: 36rem;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media (max-width: 639px) {
    .post {
        height: auto;
        min-height: 26rem;
     }

    .post img {
        object-fit: contain;
        min-height: 26rem;
    }
 } 

 /* link post */

a.post {
    display: flex;
    flex-direction: column;
    text-decoration: none;    
    align-items: center;
    justify-content: center;
    padding: 3rem;
}


a.post p {
    display: block;
    font-size: 3rem;
    text-transform: uppercase;
    pointer-events: none;
    margin-top: 1rem;
}

a.post i,
a.post svg {
    font-size: 4rem;
    display: block;
    pointer-events: none;
}

@media (max-width: 639px) {

    a.post {
        padding: 2rem;
    }

    
   a.post p {
        font-size: 2rem;
        margin-top: .5rem;
    }
    
    a.post i,
    a.post svg {
        font-size: 3rem;
    }
}

.post .imgbox {
    display: block;
    height: 100%;
    position: relative
}

.post .imgbox .badge {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.post .imgbox .soldout {
    left: 1rem;
    position: absolute;
    top: 1rem;
    z-index: 2
}

.post .imgbox img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    pointer-events: none;
}

.post .imgbox:focus img,.post .imgbox:hover img {
    transform: scale(1.1)
}

.post .infobox {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    pointer-events: none;
}

.post .infobox .labels {
    padding: 1rem
}

.post .infobox .txtbox {
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
    background: rgba(0,0,0,.8);
    padding: 1rem
}

.post .infobox .txtbox .title {
    font-family: var(--title-font);
    font-size: clamp(1.8rem,3vw,2rem);
    line-height: 1.2;
    margin: 0
}

.post .infobox .txtbox .title a {
    color: var(--white);
    text-decoration: none
}

.post .infobox .txtbox .title a:focus,.post .infobox .txtbox .title a:hover {
    color: var(--primary)
}

.post .infobox .txtbox .meta {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    font-weight: 400;
    gap: 1rem;
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    text-transform: uppercase
}

.post .infobox .txtbox .meta li:after {
    content: "/";
    margin-left: 1rem
}

.post .infobox .txtbox .meta li:last-child:after {
    content: "";
    margin: 0
}

.post.text {
    box-sizing: border-box;
    padding: 1rem;
    text-align: center
}

.post.text .txtbox {
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
    margin-top: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal
}

.post.text .imgbox {
    display: flex;
    gap: 1rem;
    height: auto
}

.post.text .imgbox .bar {
    align-items: center;
    background: var(--primary);
    border-radius: 3rem;
    display: flex;
    font-size: 1.4rem;
    font-weight: 400;
    height: 3rem;
    padding: 0 1rem;
    width: 100%
}

.post.text .imgbox .badge {
    flex-shrink: 0;
    position: relative;
    right: auto;
    top: auto
}

.post.text p {
    font-weight: 400;
    margin: 1rem 0
}

.post.text.small {
    font-size: 1.4rem
}

.post.text.small .txtbox {
    -webkit-line-clamp: 12
}

.post.text.big {
    font-size: 2.2rem
}

.post.text.big .txtbox {
    -webkit-line-clamp: 8
}

.post.text.postlink {
    color: var(--white);
    text-decoration: none
}

.post.text.postlink:hover .txtbox {
    color: var(--primary)
}

.altpost {
    border-radius: 1rem;
    position: relative;
    width: 100%
}

.altpost .imgbox {
    display: block;
    height: 40rem;
    overflow: hidden
}

.altpost .imgbox img {
    border-radius: 1rem;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.altpost .infobox {
    margin-top: 2rem
}

.altpost .title {
    font-family: var(--title-font);
    font-size: clamp(2rem,3vw,2.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0
}

.altpost .title a {
    color: var(--white);
    text-decoration: none
}

.altpost .title a:focus,.altpost .title a:hover {
    color: var(--primary)
}

.altpost ul {
    font-weight: 400;
    list-style: none;
    margin: 2rem 0;
    padding: 0
}

.altpost ul li {
    margin: .5rem 0;
    padding-left: 3rem;
    position: relative
}

.altpost ul li .ico {
    left: 0;
    position: absolute;
    text-align: center;
    top: 3px;
    width: 2rem
}

.altpost .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0
}

.featured-post {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr
}

.featured-post .infobox {
    margin-top: 0
}

@media (min-width: 768px) {
    .featured-post {
        gap:5rem;
        grid-template-columns: 1fr 1fr
    }
}

.sidebar {
    display: grid;
    gap: 5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .sidebar {
        grid-template-columns:2fr 1fr
    }
}

@media (max-width: 1023px) {
    .sidebar.mobile-reverse article {
        order: 2;
    }

    .sidebar.mobile-reverse aside {
        order: 1;
    }
}

aside .events {
    display: grid;
    gap: 5rem;
    grid-template-columns: repeat(1,1fr)
}

@media (min-width: 768px) {
    aside .events {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    aside .events {
        grid-template-columns:repeat(1,1fr)
    }
}

.accordionblock {
    margin: 5rem 0
}

.accordionblock .accordion {
    border-top: 2px solid var(--white)
}

.accordionblock .accordion:last-child {
    border-bottom: 2px solid var(--white)
}

.accordionblock .accordion .accordion-trigger {
    color: var(--white);
    display: flex;
    font-family: var(--title-font);
    font-size: clamp(1.8rem,3vw,2rem);
    font-weight: 700;
    gap: 2rem;
    justify-content: space-between;
    padding: 3rem 0;
    text-align: left;
    text-transform: uppercase;
    width: 100%
}

.accordionblock .accordion .accordion-trigger.active,.accordionblock .accordion .accordion-trigger:hover {
    color: var(--primary)
}

.accordionblock .accordion .accordion-content {
    padding-bottom: 3rem
}

.metabox {
    font-family: var(--title-font)
}

.metabox .date {
    font-weight: 700;
    margin: 1rem 0;
    text-transform: uppercase
}

.metabox h1 {
    margin: 1rem 0
}

.metabox .subtitle {
    font-size: clamp(2.4rem,5vw,2.8rem);
    font-weight: 700;
    margin: 1rem 0;
    text-transform: uppercase
}

.featuredimg {
    border-radius: 1rem
}

.featuredimg,.masonry {
    margin: 5rem 0;
    width: 100%
}

.masonry .grid-item,.masonry .grid-sizer {
    width: calc(50% - .5rem)
}

@media (min-width: 768px) {
    .masonry .grid-item,.masonry .grid-sizer {
        width:calc(33.33333% - 1.35rem)
    }
}

@media (min-width: 1280px) {
    .masonry .grid-item,.masonry .grid-sizer {
        width:calc(25% - 2.25rem)
    }
}

@media (min-width: 1600px) {
    .masonry .grid-item,.masonry .grid-sizer {
        width:calc(20% - 2.45rem)
    }
}

.masonry .gutter-sizer {
    width: 1rem
}

@media (min-width: 768px) {
    .masonry .gutter-sizer {
        width:2rem
    }
}

@media (min-width: 1280px) {
    .masonry .gutter-sizer {
        width:3rem
    }
}

.masonry .grid-item {
    margin-bottom: 1rem
}

@media (min-width: 768px) {
    .masonry .grid-item {
        margin-bottom:2rem
    }
}

@media (min-width: 1280px) {
    .masonry .grid-item {
        margin-bottom:3rem
    }
}

.masonry .grid-item img {
    border-radius: 1rem;
    width: 100%;
    height: auto;
}

.actions {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    margin: 0 auto
}

.actions,.maininfo {
    width: calc(100% - 10vw)
}

.maininfo {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    display: grid;
    gap: 5rem;
    grid-template-columns: 1fr;
    margin: 5rem auto 0
}

@media (min-width: 768px) {
    .maininfo {
        gap:3rem;
        grid-template-columns: 1fr 2fr
    }
}

@media (min-width: 1024px) {
    .maininfo {
        gap:5rem;
        grid-template-columns: 2fr 3fr
    }
}

.maininfo .slider {
    overflow: hidden
}

.maininfo .slider .eventslider {
    position: relative
}

.maininfo .slider .swiper-slide img {
    width: 100%
}

.maininfo .slider .eventslider-next,.maininfo .slider .eventslider-prev {
    background: rgba(0,0,0,.7);
    height: 5rem;
    width: 5rem;
    z-index: 2
}

.maininfo .slider .eventslider-next:after,.maininfo .slider .eventslider-prev:after {
    color: var(--white);
    font-size: 3rem
}

.maininfo .slider .eventslider-next:hover,.maininfo .slider .eventslider-prev:hover {
    background: var(--primary)
}

.maininfo .slider .eventslider-prev {
    left: 0
}

.maininfo .slider .eventslider-next {
    right: 0
}

.maininfo .info .maindate {
    color: var(--primary);
    font-family: var(--title-font);
    font-size: clamp(1.8rem,5vw,2.2rem);
    font-weight: 700;
    text-transform: uppercase
}

.maininfo .info h1 {
    margin: 0
}

.maininfo .info .extras {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--title-font);
    font-size: clamp(1.8rem,5vw,2rem);
    font-weight: 300;
    gap: 1rem;
    list-style: none;
    margin: 2rem 0;
    padding: 0
}

.maininfo .info .extras li:after {
    content: "/";
    margin-left: 1rem
}

.maininfo .info .extras li:last-child:after {
    content: "";
    margin: 0
}

.tabs {
    margin: 3rem 0
}

.tabs .trigger {
    color: hsla(0,0%,100%,.3);
    font-family: var(--title-font);
    font-size: clamp(2rem,5vw,2.8rem);
    font-weight: 700;
    text-transform: uppercase
}

.tabs .trigger:hover,.tabs .trigger[aria-selected=true] {
    color: var(--white)
}

.tabs .trigger:after {
    color: hsla(0,0%,100%,.3);
    content: "/";
    font-weight: 300;
    margin: 0 1rem
}

.tabs .trigger:last-child:after {
    content: "";
    margin: 0
}

.table,.tabs .tabcontent {
    margin: 3rem 0
}

.table {
    overflow: auto
}

.table .row {
    display: grid;
    font-size: 1.4rem;
    font-weight: 400;
    width: 100%
}

.table .row.message {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10rem;
    font-weight: 700;
     background-color: rgba(var(--primary-rgb),.1);
    text-transform: uppercase;
}

.table .row:last-child .col:first-child {
    border-bottom-left-radius: 1rem
}

.table .row:last-child .col:last-child {
    border-bottom-right-radius: 1rem
}

.table .row .col {
    background-color: rgba(var(--primary-rgb),.1);
    padding: 1rem
}

.table .row .col.btns {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.table .row .col.btns a,
.table .row .col.btns button {
    color: var(--white)
}

.table .row .col.btns a:hover,
.table .row .col.btns button:hover {
    color: var(--primary)
}

.table .row.head .col.btns a:hover,
.table .row.head .col.btns button:hover {
    color: var(--secondary)
}

.table .row:nth-child(2n) .col {
    background-color: rgba(var(--primary-rgb),.2)
}

.table .row.head {
    border-radius: 1rem 1rem 0 0;
    font-weight: 700;
    text-transform: uppercase
}

.table .row.head .col {
    background: var(--primary)
}

.table .row.head .col:first-child {
    border-top-left-radius: 1rem
}

.table .row.head .col:last-child {
    border-top-right-radius: 1rem
}

.table .row input,.table .row select {
    background-color: rgba(0,0,0,.2);
    border-radius: 3rem;
    font-size: 1.4rem;
    font-weight: 400;
    height: 3rem
}

.table.event .row {
    align-items: center;
    grid-template-columns: auto minmax(8rem,15%) minmax(10rem,15%)
}

.table.event .row .col {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    min-height: 4.4rem
}

.table.event .row .col:first-child {
    font-weight: 700
}

.table.event .row .col:last-child {
    padding: 0 1rem
}

.table.two .row {
    grid-template-columns: repeat(2,minmax(20rem,1fr))
}

.table.three .row {
    grid-template-columns: repeat(3,minmax(20rem,1fr))
}

.table.five.btns .row {
    grid-template-columns: repeat(4,minmax(20rem,1fr)) 60px;
}

.table.formtable .row {
    grid-template-columns: repeat(3,minmax(20rem,1fr)) 60px
}

.table-btns {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 3rem 0
}

.boxgrid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(1,1fr)
}

@media (min-width: 640px) {
    .boxgrid {
        grid-template-columns:repeat(2,1fr)
    }
}

.boxgrid .box {
    background-color: rgba(var(--primary-rgb),.5);
    border-radius: 1rem;
    font-size: 1.6rem;
    font-weight: 400;
    padding: 2rem
}

.boxgrid .box p {
    margin: 0
}

.boxgrid .box p.name {
    font-size: 1.8rem;
    font-weight: 700
}

.boxgrid .box p a {
    text-decoration: none;
    color: var(--white);
}

.boxgrid .box p.status {
    text-transform: uppercase
}

.boxgrid .box p.status .ico {
    margin-right: .5rem;
    color: var(--primary-lighter);
}

.boxgrid .box p.price {
    font-weight: 700;
    margin-bottom: 1rem
}

.boxgrid .box p.info {
    margin-bottom: 2rem
}

.boxgrid .box .link {
    display: inline-block;
    margin: 1.5rem 0;
    text-decoration: underline
}

.readmore .accordion-trigger {
    color: var(--white);
    font-family: var(--title-font);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase
}

.readmore .accordion-content {
    padding-top: 2rem
}

.detailsblock {
    position: relative;
    margin: 5rem 0;
    padding: 5rem 0;
    width: 100%;
    background: var(--dark-dark);
}

.detailsblock .container {
    max-width: 1500px;
    margin: 0 auto;
}

@media (max-width: 1500px) {
    .detailsblock:before {
        left: 0px;
    }
}

.detailsblock .container {
    position: relative;
    display: grid;
    gap: 5rem;
    grid-template-columns: 1fr
}

@media (min-width: 1024px) {
    .detailsblock .container {
        grid-template-columns:2fr 3fr
    }
}

.detailsblock .infolist ul,
ul.headinglist {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0
}

@media (min-width: 640px) {
    .detailsblock .infolist ul,
    ul.headinglist {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 768px) {
    .detailsblock .infolist ul,
    ul.headinglist {
        gap:3rem 2rem;
        grid-template-columns: repeat(3,1fr)
    }
}

@media (min-width: 1024px) {
    .detailsblock .infolist ul,
    ul.headinglist {
        gap:2rem;
        grid-template-columns: repeat(2,1fr)
    }
}

@media (min-width: 1280px) {
    .detailsblock .infolist ul,
    ul.headinglist {
        gap:3rem 2rem;
        grid-template-columns: repeat(3,1fr)
    }
}

.detailsblock .infolist ul li,
ul.headinglist li {
    font-size: 1.6rem;
    font-weight: 400
}

.detailsblock .infolist ul li p,
ul.headinglist li p {
    margin: .5rem 0
}

.detailsblock .infolist ul li p a,
ul.headinglist li p a{
    color: inherit;
    text-decoration: none;
}

.detailsblock .infolist ul li p.spec,
ul.headinglist li p.spec {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase
}

.detailsblock .infolist ul li p.spec .ico,
ul.headinglist li p.spec .ico {
    margin-right: .5rem
}

.featured-events {
    border-top: 5px solid hsla(0,0%,100%,.2);
    margin-top: clamp(5rem,10vw,10rem);
    padding-top: clamp(5rem,10vw,10rem)
}

.featured-events .featured-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between
}

.featured-events .featured-head h4 {
    font-size: clamp(2rem,5vw,2.8rem);
    margin: 0
}

.featured-events .featured-head .navi {
    display: flex;
    gap: 2rem;
    position: relative
}

.featured-events .featured-head .navi .featured-next,.featured-events .featured-head .navi .featured-prev {
    margin: 0;
    position: relative;
    z-index: 2
}

.featured-events .featured-head .navi .featured-next:after,.featured-events .featured-head .navi .featured-prev:after {
    color: var(--white);
    font-size: 3rem
}

.featured-events .featured-head .navi .featured-next:hover:after,.featured-events .featured-head .navi .featured-prev:hover:after {
    color: var(--primary)
}

.featured-events .featured-head .navi .featured-prev {
    left: 0
}

.featured-events .featured-head .navi .featured-next {
    right: 0
}

.featured-events .featureslider {
    margin-top: 5rem;
    overflow: hidden
}

.login-split {
    display: grid;
    gap: 5rem;
    grid-template-columns: 1fr
}

@media (min-width: 768px) {
    .login-split {
        grid-template-columns:1fr 5px 1fr
    }
}

.login-split .sep {
    background: hsla(0,0%,100%,.2);
    min-height: 5px;
    width: 100%
}

.btnlist {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    .btnlist {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 768px) {
    .btnlist {
        grid-template-columns:1fr;
    }
}

@media (min-width: 1280px) {
    .btnlist {
        grid-template-columns:repeat(2,1fr)
    }
}

.pseudotabs {
    margin: 3rem 0
}

.pseudotabs .trigger {
    color: hsla(0,0%,100%,.3);
    font-family: var(--title-font);
    font-size: clamp(2rem,5vw,2.8rem);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase
}

.pseudotabs .trigger.active,.pseudotabs .trigger:hover {
    color: var(--white)
}

.pseudotabs .trigger.disabled {
    opacity: .3;
    pointer-events: none;
}

.pseudotabs .trigger:after {
    color: hsla(0,0%,100%,.3);
    content: "/";
    font-weight: 300;
    margin: 0 1rem
}

.pseudotabs .trigger:last-child:after {
    content: "";
    margin: 0
}

@media (max-width: 768px) {

    .flex-head:has(.pseudotabs.mobile-small) {
        margin: 2rem 0;
    }

    .pseudotabs.mobile-small .trigger {
        font-size: clamp(1rem,4vw,1.8rem);
    }

    .pseudotabs.mobile-small .trigger:after {
        margin: 0 .2rem
    }
        
    .pseudotabs .trigger.disabled {
        font-size: 1.8rem;
    }

    .pseudotabs .trigger.mobile-last:after  {
        display: none;
    }

    .pseudotabs .trigger.disabled {
        display: none;
    }
}

.flex-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    margin: 5rem 0
}

.flex-head .pseudotabs {
    margin: 0
}


/************* cart / row */
.cart .row {
    align-items: center;
    background-color: rgba(var(--primary-rgb),.1);
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    font-weight: 400;
    gap: 1rem;
    padding: 1rem;
    width: 100%
}

@media (min-width: 768px) {
    .cart .row {
        align-items:center;
        background-color: rgba(var(--primary-rgb),.1);
        display: grid;
        font-size: 1.4rem;
        font-weight: 400;
        gap: 2rem;
        grid-template-columns: auto 14% 14% 14% 2rem;
        padding: 1rem;
        width: 100%
    }
}

.cart .row:nth-child(2n) {
    background-color: rgba(var(--primary-rgb),.2)
}

.cart .row:last-child {
    border-radius: 0 0 1rem 1rem
}

.cart .row.head {
    display: none
}

@media (min-width: 768px) {
    .cart .row.head {
        background:var(--primary);
        border-radius: 1rem 1rem 0 0;
        display: grid;
        font-weight: 700;
        text-transform: uppercase
    }
}

.cart .row.mobihead {
    background: var(--primary);
    border-radius: 1rem 1rem 0 0;
    font-weight: 700;
    grid-template-columns: 1fr;
    text-transform: uppercase
}

@media (min-width: 768px) {
    .cart .row.mobihead {
        display:none
    }
}

.cart .row.foot {
    background: var(--dark-dark);
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    padding: 2rem 1rem; 
}

@media (min-width: 768px) {
    .cart .row.foot {
        gap: 2rem;
        grid-template-columns: auto calc(42% + 8rem)
    }
}

.cart .row .event {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: 8rem auto;
    width: 100%
}

.cart .row .event img {
    border-radius: 1rem
}

.cart .row .event p {
    margin: 0
}

.cart .row .event p.title {
    font-size: 1.6rem;
    font-weight: 700
}

.cart .row .event p.spec {
    text-transform: uppercase;
    font-size: 1.2rem;
}

.cart .row .event p.spec strong {
    color: var(--primary-light);
}

.cart .row .price,.cart .row .qty {
    width: 12rem
}

@media (min-width: 768px) {
    .cart .row .price,.cart .row .qty {
        width:100%
    }
}

.cart .row .sub {
    margin: 0;
    width: 100%
}

.cart .row .sub span {
    font-weight: 700;
    margin-right: 1rem
}

@media (min-width: 768px) {
    .cart .row .sub span {
        display:none
    }
}

.cart .row .del {
    display: flex
}

@media (min-width: 768px) {
    .cart .row .del {
        width:2rem
    }
}

.cart .row .del a {
    color: var(--dark-lighter);
    text-decoration: none;
}

.cart .row .del a:hover {
    color: var(--white);
    text-decoration: none;
}

.cart .row .del span {
    font-weight: 700;
    margin-right: 1rem
}

@media (min-width: 768px) {
    .cart .row .del a {
        color: var(--white);
    }

    .cart .row .del span {
        display: none
    }
}

.cart .row select {
    background-color: rgba(0,0,0,.2);
    border-radius: 3rem;
    font-size: 1.4rem;
    font-weight: 400;
    height: 3rem;
    max-width: 10rem;
    width: 100%
}

.cart .row .input-wrap {
    position: relative;
    width: 100%
}

@media (min-width: 768px) {
    .cart .row .input-wrap {
        max-width:48rem
    }
}

.cart .row .input-wrap.error label,.cart .row .input-wrap.success label {
    opacity: 1
}

.cart .row .input-wrap input {
    background-color: transparent;
    border: 1px solid var(--white)
}

.cart .row .input-wrap input:focus {
    border-bottom: 1px solid var(--primary)
}

.cart .row .input-wrap label {
    font-size: 1.6rem;
    font-weight: 400;
    left: 1rem;
    opacity: .5;
    position: absolute;
    top: 1.7rem;
    transform-origin: 0 50%
}

.cart .row .input-wrap input:not(:-moz-placeholder-shown)~label {
    background: var(--secondary-dark);
    font-size: 1.2rem;
    opacity: 1;
    padding: .5rem;
    transform: translateY(-3rem)
}

.cart .row .input-wrap input:focus~label,.cart .row .input-wrap input:not(:placeholder-shown)~label {
    background: var(--dark-dark);
    font-size: 1.2rem;
    opacity: 1;
    padding: .5rem;
    transform: translateY(-3rem)
}

.cart .row .input-wrap .btn {
    align-items: center;
    background: var(--white);
    display: inline-flex;
    font-size: 2.4rem;
    height: 6rem;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 6rem
}

.cart .row .input-wrap .btn:hover {
    background: var(--primary);
    color: var(--white)
}

.cart .row .totals {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr
}

@media (min-width: 768px) {
    .cart .row .totals {
        grid-template-columns:1.9fr 1.1fr
    }
}

.cart .row .totals .totlist {
    font-size: 1.6rem;
    font-weight: 700;
    list-style: none;
    margin: 0;
    padding: 0
}

.cart .row .totals .totlist li:last-child {
    font-size: 2rem;
    margin-top: 1rem
}

.cart .row .totals .totlist:nth-child(2) {
    text-align: right
}

@media (min-width: 768px) {
    .cart .row .totals .totlist:nth-child(2) {
        text-align:left
    }
}

.cart .continue {
    margin-top: 3rem
}

.cartbox {
    border: 2px solid var(--white);
    border-radius: 1rem;
    margin-bottom: 2rem;
    width: 100%;
}

.cartbox.disabled {
    opacity: .2;
    pointer-events: none;
}

.cartbox .cartbox-title {
    color: var(--white);
    font-family: var(--title-font);
    font-size: clamp(1.8rem,3vw,2rem);
    font-weight: 700;
    padding: 2rem;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
}

.cartbox.animate, .cartbox.animate .cartbox-title {
    /* transition: background 0.25s 0.25s ease-in-out; */
}

html.device-no-touch .cartbox:not(.active):hover {
    background: var(--white);
    cursor: pointer;
    transition: background 0.15s;
}

html.device-no-touch .cartbox:not(.active):hover .cartbox-title {
    color: var(--primary);
    transition: color 0.25s;
}

.cartbox .cartbox-content {
    /* transition: max-height 0.15s ease-in-out, padding 0.15s ease-in-out;*/
    max-height: 0px;
    display: block;
    overflow: hidden;
    padding: 0 2rem;
}

.cartbox.active {
    background: var(--white);
}

.cartbox.active .cartbox-title {
    color: var(--primary)
}

.cartbox.active .cartbox-content {
    color: var(--black);
    max-height: 10000px;
    padding: 2rem;
}

.cartbox .cartbox-content form {
    background: transparent;
    border-radius: 0;
    gap: 2rem;
    padding: 0;
}

.minicart .row {
    background-color: rgba(var(--primary-rgb),.1);
    font-size: 1.4rem;
    font-weight: 400;
    padding: 1rem;
    width: 100%
}

.minicart .row:nth-child(2n) {
    background-color: rgba(var(--primary-rgb),.2)
}

.minicart .row:last-child {
    border-radius: 0 0 1rem 1rem
}

.minicart .row.head {
    align-items: center;
    background: var(--primary);
    border-radius: 1rem 1rem 0 0;
    display: flex;
    font-family: var(--title-font);
    font-weight: 700;
    gap: 2rem;
    justify-content: space-between;
    text-transform: uppercase
}

.minicart .row.head p {
    margin: 0
}

.minicart .row.head .button {
    font-size: 1.2rem;
    font-weight: 700;
    min-height: 3rem
}

.minicart .row.foot {
    background: var(--dark-dark);
    display: grid;
    font-family: var(--title-font);
    font-size: 1.6rem;
    font-weight: 400;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    padding: 2rem 1rem
}

.minicart .row.foot ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.minicart .row.foot ul:last-child {
    text-align: right
}

.minicart .row.foot ul li:last-child {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 1rem;
    text-transform: uppercase
}

.minicart .row p {
    margin: .5rem 0
}

.minicart .row .title {
    font-family: var(--title-font);
    font-weight: 1.6rem;
    font-weight: 700
}

.minicart .row .location {
    text-transform: uppercase;
    font-size: 1.3rem;
}

.minicart .row .location strong {
    color: var(--primary-light);
}

.minicart .row input,.minicart .row select {
    background-color: rgba(0,0,0,.2);
    border-radius: 3rem;
    font-size: 1.4rem;
    font-weight: 400;
    height: 3rem
}

.orderlist {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .orderlist:not(.columns,.fullwidth) {
        grid-template-columns:1fr 1fr;
    }
}

.orderlist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.orderlist.columns, .orderlist.fullwidth {
    gap: 1px;
}

.orderlist.columns h4, .orderlist.fullwidth h4 {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .orderlist.columns ul {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        width: 100%;
    }

    .orderlist.columns ul li {
        flex: 1 1 auto;
        display: block;
        width: calc(50% - 4px);
    }
}

.graph {
    margin: 5rem 0;
    position: relative;
    width: 100%
}

.graph .controls {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0
}

.event-meta .maindate {
    color: var(--primary);
    font-family: var(--title-font);
    font-size: clamp(1.8rem,5vw,2.2rem);
    font-weight: 700;
    text-transform: uppercase
}

.event-meta h1 {
    margin: 0
}

.event-meta .btns {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem 0
}

@media (max-width: 560px) {
    .event-meta .btns .return {
        display: block;
        width: 100%;
        margin-bottom: 1rem
    }
}

.splitblock {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
    margin: 5rem 0
}

@media (min-width: 768px) {
    .splitblock {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .splitblock {
        gap:5rem
    }
}

.splitblock .imgbox {
    height: 40rem;
    position: relative
}

.splitblock .imgbox img {
    border-radius: 1rem;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.splitblock .imgbox .content {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%
}

.callout {
    background: var(--dark-dark);
    border-radius: 1rem;
    border-top: 1rem solid var(--primary);
    font-size: clamp(1.8rem,2vw,2.2rem);
    margin: 5rem 0;
    padding: 5vw
}

@media (min-width: 768px) {
    .callout {
        padding:5rem
    }
}

.adv {
    align-items: center;
    background: var(--dark-dark);
    border-radius: 1rem;
    display: inline-flex;
    justify-content: center;
    padding: 2rem
}

.popup {
    border-radius: 1rem!important;
    display: none;
    max-width: 90vw;
    min-width: 50vw;
    padding-bottom: 0;
    width: 90vw;
  
}

@media (min-width: 768px) {
    .popup {
         max-width: 800px;
         min-width: 50vw;
         width: auto
    }
}

.popup form.light {
    padding: 0
}

.popup.primary {
    background: var(--primary);
    color: var(--white)
}

.popup.secondary {
    background: var(--secondary);
    color: var(--dark)
}

.popup.error {
    background: var(--error);
    color: var(--white)
}

.popup.success {
    background: var(--success);
    color: var(--white)
}

#cartpop {
    background: var(--primary);
    border-radius: 1rem;
    box-shadow: 0 2rem 4rem rgba(0,0,0,.5);
    left: 5vw;
    padding: 1rem;
    position: absolute;
    width: calc(100% - 10vw);
    z-index: 12
}

@media (min-width: 640px) {
    #cartpop {
        left:auto;
        right: 0;
        width: auto
    }
}

#cartpop ul {
    list-style: none;
    margin: 0;
    padding: 0
}

#cartpop ul li {
    border-bottom: 1px solid hsla(0,0%,100%,.2);
    display: grid;
    gap: 1rem;
    grid-template-columns: 5rem auto;
    margin-bottom: 1rem;
    padding-bottom: 1rem
}

@media (min-width: 640px) {
    #cartpop ul li {
        grid-template-columns:5rem 25rem
    }
}

#cartpop ul li .imgbox {
    border-radius: 1rem;
    height: 5rem;
    overflow: hidden;
    width: 5rem
}

#cartpop ul li .txtbox .title {
    font-family: var(--title-font);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0
}

#cartpop ul li .txtbox .item {
    font-size: 1.4rem;
    font-weight: 400;
    margin: 5px 0 0
}

#cartpop .totals {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0
}

#cartpop .totals p {
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase
}

#cartpop .btns {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr
}

@media (min-width: 640px) {
    #cartpop .btns {
        grid-template-columns:1fr
    }
}

#accountpop {
    background: var(--primary);
    border-radius: 1rem;
    box-shadow: 0 2rem 4rem rgba(0,0,0,.5);
    left: 5vw;
    padding: 1rem;
    position: absolute;
    width: calc(100% - 10vw);
    z-index: 12
}


.account a i,
.account a svg {
    pointer-events: none;
}

#accountpop:hover button {
    color: white !important;
}

#accountpop .icons {
    display: flex;
    gap: .6rem;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

#accountpop .icons a:last-child {
    width: 100%;
    flex: 1 1;
}

#accountpop .icons .label {
    font-weight: 700;
    font-size: 1.8rem;
    display: block;
    color: var(--light-lighter);
    width: 100%;
    margin-left: .5rem;
}

#accountpop form {
    padding: 0rem;
    gap: 2rem;
}

#accountpop p {
    font-size: 1.4rem;
    margin-bottom: -5px;
}

#accountpop input {
     font-size: 1.5rem;
     height: 5rem;
}

#accountpop label {
    font-size: 1.4rem;
    top: 1.4rem;
}

#accountpop input:focus~label,
#accountpop input:not(:placeholder-shown)~label {
    transform: translateY(-2.8rem);  
}
    

@media (min-width: 640px) {
    #accountpop {
        left:auto;
        right: 0;
        width: 32rem
    }
}

#accountpop .btnlist {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
}

body > .dialog {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(24,24,27,.8);
    color: var(--white);
    z-index: 1000;
}

body > .dialog > div {
    display: block;
    align-self: center;
    background: var(--fancybox-content-bg,#fff);
    border-radius: 0;
    color: var(--fancybox-content-color,#374151);
    cursor: default;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 2rem;
    position: relative;
    z-index: 20;
}

body > .dialog > div > a.close {
    position: absolute;
    width: 22px;
    height: 22px;
    top: -36px;
    right: 5px;
}

body > .dialog > div > a.close svg {
    fill: #dbdbdb;
    stroke: #dbdbdb;
}

/* lightbox */

body > .dialog.lightbox > div {
    padding: 0rem;
    color: inherit;
    
}

body > .dialog.lightbox .popup > div.heading {
    background: var(--primary);
    font-family: var(--title-font);
    font-size: clamp(1.8rem,3vw,2rem);
    font-weight: 700;
    padding: 0;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border-radius: 1rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

body > .dialog.lightbox div.content {
    position: relative;
    display: block;
    border-radius: 1rem!important;
    max-height: 85vh;
    overflow: auto;
    background: var(--body-bg);
}

body > .dialog.lightbox div.content,
body > .dialog.lightbox div.content .card,
body > .dialog.lightbox div.content .form {
    border-radius: 0;
}

body > .dialog.lightbox.heading div.content {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
body > .dialog.lightbox div.content .card,
body > .dialog.lightbox div.content .form {
    border-radius: 0 !important;
}

body > .dialog.lightbox .popup {
    max-width: 90%;
}

.tost {
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 1rem 4rem rgba(0,0,0,.7);
    color: var(--black);
    max-width: 60rem;
    padding: 2rem;
    position: fixed;
    right: 2rem;
    top: 10rem;
    width: auto;
    z-index: 1199;
    opacity: 0;
    transition: opacity .5s;
}

@media (max-width: 640px) {
    .tost {
        width: 95% !important;
        left: 2.5% !important;
        right: auto;
    }
     .tost div {
        text-align: center;
     }    
}

.tost.bottom {
    top: auto;
    bottom: 10rem;
}

.tost p a {
    text-decoration: none;
    color: var(--dark);
}

.ticketpop {
    background: transparent!important;
    display: none;
    max-width: 36rem!important;
    padding: 0 0 10rem!important;
    width: calc(100% - 10vw)
}

.ticketpop .infobox {
    background: var(--dark);
    border-radius: 1rem;
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 400;
    padding: 2rem
}

.ticketpop .infobox .infolist {
    list-style: none;
    margin: 2rem 0;
    padding: 0
}

.ticketpop .infobox .infolist li {
    padding-left: 3rem;
    position: relative
}

.ticketpop .infobox .infolist li .ico {
    color: var(--primary);
    left: 0;
    position: absolute;
    text-align: center;
    top: 4px;
    width: 2rem
}

.ticketpop .infobox .infolist li p {
    margin: 0
}

.ticketpop .infobox .infolist li.title {
    font-family: var(--title-font);
    font-size: clamp(1.6rem,3vw,1.8rem);
    font-weight: 700;
    margin-bottom: 1rem
}

.ticketpop .btns {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    margin: 1rem 0
}

.ticketpop .btns .button {
    border-radius: 1rem;
    font-size: 1.4rem;
    padding: 0 .5rem
}

.ticketpop .btns .button .ico {
    margin-right: .5rem
}

.ticketpop .usercode {
    background: var(--dark);
    border-radius: 1rem;
    color: var(--white);
    margin-bottom: 2px;
    padding: 2rem;
    text-align: center;
    background: #FFF;
    color: var(--dark);
    display: flex;
    flex-direction: column;
    align-items: center
}

.ticketpop .usercode small {
      color: var(--dark) !important;
}

.ticketpop .usercode img {
    max-width: 200px;
}


.ticketpop .usercode .name {
    font-family: var(--title-font);
    font-weight: 700
}

.ticketpop .usercode .name .ico {
    color: var(--primary);
    margin-right: .5rem
}

.ticketpop .fullbtn {
    border-radius: 1rem;
    margin-top: 1rem;
    width: 100%
}

.ticketpop .usercode span:has(form) {
    padding-top: 10px;
    display: block;
}

.ticketpop .usercode form {
    display: flex;
    border: 1px solid var(--white);
    position:relative;    
    margin-top: 100px;
    position: relative;
}

.ticketpop .usercode form button {
    align-items: center;
    background: var(--white);
    display: inline-flex;
    font-size: 2.4rem;
    color: var(--primary);
    justify-content: center;
    right: 0;
    top: 0;
    width: 6rem
}

.ticketpop .usercode form button:hover {
    background: var(--primary);
    color: var(--white)
}


/* modals - podcast */
body > .dialog.lightbox .event-maininfo-wrapper {
    padding: 0;
    background: none !important;
}
body > .dialog.lightbox .event-maininfo-wrapper .actions,
body > .dialog.lightbox .event-maininfo-wrapper .blur-cover {
    display: none;    
}
body > .dialog.lightbox .event-maininfo-wrapper .maininfo {
    margin: 0;
    width: 100%;
    padding: 5vw;
    gap: 3rem;
}
body > .dialog.lightbox .event-maininfo-wrapper .info {
    line-height: 1.6em;
}

/* share */
.share {
    display: flex;    
    align-items: center;
    justify-content: center;
     gap: 3rem;
     margin-top: 10px;;
}
.share div { 
    margin: 0;
    padding: 0;
    font-size: 3rem;
    color: var(--primary);
}
.share div a {
    color: var(--primary);
}
.share ul {
    display:flex;
    gap: 3rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 2.2rem;
    align-items:center;
    justify-content: center;
}

.share a {
    position: relative;
    color: var(--white);    
}

.share a:hover {
    color: var(--primary);    
}

html:not(.device-webshare) .webshare-show,
html.device-webshare .webshare-hide {
    display: none;
}

/* buttons */

.buttonlist {
    background-color: var(--dark-light);
    border-radius: 1rem;
    font-size: 2rem;
    padding: 1.5rem 1rem;
    gap: .5rem;
}

.buttonlist a:last-child {
    width: 100%;
    flex: 1 1;
    max-width: 200px;
}


.buttonlist .icons {
    display: flex;
     gap: .5rem;
}
    
.buttonlist .label {
    font-weight: 700;
    display: block;
    margin-bottom: .3rem;
    color: white;
    width: 100%;
    margin-left: .5rem;
}
    

.button.icon,
.button.iconwtext {
    border-radius: 1.2rem;
    line-height: 1.2;
    min-height: 4rem;
    padding: 0 1.7rem;
}

.button.icon.img {
    padding: 0 1.3rem;
}

.button.icon .ico,
.button.iconwtext .ico {
    margin-right: 0rem;
    font-size: 2rem;
    pointer-events: none;
}

html:not(.apple-signinwith) .apple-signinwith {
    display: none;
}    

.button.icon .ico.sizeup,
.button.iconwtext .ico.sizeup {
    margin-right: 0rem;
    font-size: 2.6rem;
    margin-bottom: 4px;
    pointer-events: none;
}

.button.icon img.ico {
    width: 24px;
    height: 24px;
    display: inline;    
}

.button.iconwtext .ico {
    margin-right: 1rem;  
}

.button.iconwtext {
    font-size: 1.5rem;
}

.loginwithemail {
    background: white;
    padding: 1rem;
    border-radius: 1rem;    
    padding: 1.5rem;
    margin-top: 2rem
}

.loginwithemail p {
    margin: 0px;
    font-size: 1.5rem;
    color: black;
}
    

.loginwithemail a {
    font-size: 1.3rem;
    margin-left: .5rem;
    color: #000 !important;
    margin-top: -1.5rem;
    text-decoration: none;
}