/* =============================================================================
   Spring I/O 2026 : springio.net                    /  www.jorgerigabert.com  /
   ========================================================================== */

/*              

         000111100110001001000111010000101111011011111100010010101001010        
      001000011111111001111110100101110011111001101011001110101000011111110     
   011111000110010000110010001010000000001101010001101111011111001101110000000  
  00110100100110110101001110101111111001100011100110110011110111010101010001110 
 0011110001010100111100110010011111100011000110000001111101110000100010110101100
 0011011110010111100011111011100010101111011011110100011011111010001000000110000
 0111111101011101011110000011101010000111011001100110101011000000100011010111010
 0001000010100111100101100100000001010111111100010111000111011110110111100010100
 01110101111000001010001100110101101111100               01110010100011011000110
 001110111001111011010111011010110010110                011001001110111001101110
 01110100111101001111001011111110101010               01101011101000111100001110
 0101101001100001010111011011011101000               000100111000011110110000000
 00000110011110001111010101101100010               01010111010011001100011111000
 0110010001100100000010010110110100               010010001111101111000101001000
 011100010110000000000101000110110              01111100000101001011000101010100
 0010111010111101011001101001010               011000110010101001101000100100010
 010011010110101010010111110100                      010101011101010000111110110
 00101010110000101011110111100                     00100010101010001101000100010
 01011100011001011111110010000111000              010110100000101111011000011100
 0000000001100000010001000110110000             01001000011100100011111111011100
 00011101011001000110011100001110             0011100101010010001010011001111100
 0101101110001110000010110001110             01000010110101000100001000000010100
 010010101011101000100110001010            0000111000010100010010001110110100000
 01001001110111100110010110010            00000110100011101101000000110110100000
 000110100101101101010110000             011101110110011010101000000010000001110
 00000101001101010100111000                   0101111001110101100100100101101000
 01010010110011110100111111101010           010100010000101011000100111011000110
 0100100010000100100011111110000          01110000000011100111010000011001111110
 010010000100011111101001011110        01101110010011011110110110111010110101110
 01010010110101100101000101100       0101111011110101110000110111000110110001010
 000011011110011011001011010       011011110010011000101110000011010000100101110
 00110110000100111101001100     011001010010010100110101111110110101110010011100
 0010001101100111000110000    01101101111111101101101000001100110000011001101110
 001101100101100001100010   0100111001000110111101010111100101101101000100101010
 01011100010000001111100  011101001010011000011101010101111010111111110000111110
 0100001001001111100000 00001001100101000111100101010000001010001110110010101110
 0000111011101010110110101101011000001000100100101011110000111000001011010110000
 0111110011011010100101101010101100101101101111110010110000110000010101000011010
  01011101111110100011111000001010010010000000100101010101001000101111011010110 
   000110000110000100101101111000110000101110100001101010100110011010011110000  
      001000100111011000110110001111101000001101010010011011000101001000110     
         000011111110011111101001011100111111001101011001110101000011110         

*/

/* =============================================================================
   GENERAL
   ========================================================================== */

@import url('./variables.css');
@import url('./base.css');

body{
    color: hsla(var(--theme-text-primary),1);
    background: hsla(var(--theme-green-video-background),1);
    }
	body.enter-active{ background: hsla(var(--theme-background),1);}
html.menu-overlay-open,
body.menu-overlay-open{
    overflow: hidden;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    }/*
header, .header-logo, .pls1, .menu-button, .hamburger, .hamburger span, .hamburger span::after, .switch-color, .toggle-color, .toggle-color .switch-icons-day, .toggle-color .switch-icons-night, 
.chevron, .hero-info h5 span,
.section-title, .section-title::before, .ticket-title h4, .ticket-detail-top, .ticket-detail-top::after, .ticket-detail-top::before, .tick-tock span, .section-content::after,
.logo .pls0, .button-icon-color,
.video-container-mask,
.become, .alert, .workshops-price,
#tabs, thead, #tabs div, #tabs div::before, table thead.sticky tr{
        transition: var(--transition-surface);
        will-change: background-color, transform, color, opacity;
        }
body, p, strong, h1, h2, h3, h4, h5, h6, .hero-marquee-content, .theme, #tabs div a, table td p a{
        transition: font-size 0.3s var(--ease-soft), line-height 0.3s var(--ease-soft), color 0.45s var(--ease-soft);
        }
.wrapper, .grid-lines, .gallery, .tickets, .info, .cfp, .past-sponsors, .venue, .video-container-img, .workshops, .video-container{
        transition: width 0.45s var(--ease-fluid), padding 0.45s var(--ease-fluid), background 0.55s var(--ease-fluid);
        will-change: width, padding, background-color;
        }
.info .grid-lines__line, .info .grid-lines__line::after, .info-stats .pixel-window,
.cfp .grid-lines__line, .cfp .grid-lines__line::after,
.past-sponsors::after,
.venue .grid-lines__line, .venue .grid-lines__line::after, .info-venue .pixel-window,
.theme, .theme .hero, .theme .hero::before, .theme .grid-lines__line, .theme .grid-lines__line::after{
        transition: background 0.55s var(--ease-fluid);
        }
header, .header-logo, .pls1, .menu-button, .hamburger, .hamburger span, .hamburger span::after, .switch-color, .toggle-color, .toggle-color .switch-icons-day, .toggle-color .switch-icons-night, 
.hero, .hero::after, .chevron, .hero-info h5 span,
.section-title, .section-title::before, .ticket-title h4, .ticket-detail-top, .ticket-detail-top::after, .ticket-detail-top::before, .tick-tock span, .section-content::after,
.logo .pls0, .button-icon-color,
.video-container-mask,
.become, .alert, .workshops-price,
#tabs, thead, #tabs div, #tabs div::before, table thead.sticky tr{
        transition: background 0.24s 0.24s linear, box-shadow 0.24s 0.24s linear, color 0.24s 0.24s var(--ease-soft), transform 0.24s 0.24s linear, opacity 0.24s 0.24s linear;
        will-change: background, box-shadow, transform, color, opacity;
        }*/
.title, .w100{ width: 100%;}
.w90{ width: 90%;}
.w80{ width: 80%;}
.align-center{ text-align: center;}
.align-right{
    text-align: right;
    justify-items: right;
    }
.align-left{
    text-align: left!important;
    justify-items: left;
    }
.auto{ margin: auto!important;}
.npt{ padding-top: 0!important;}
.npr{ padding-right: 0!important;}
.npb{ padding-bottom: 0!important;}
.npl{ padding-left: 0!important;}
.min-full-height{
    min-height: var(--app-viewport-height, 100vh);
    }
.nmt{ margin-top: 0!important;}
.nmb{ margin-bottom: 0!important;}
.nmw{ max-width: none!important;}
.pb2{ padding-bottom: calc(var(--wrapper-ptb) / 2)}
.anti-gap{ margin-top: calc(0px - var(--grid-item-gap))!important;}
.pro-gap{ margin-top: var(--grid-item-gap)!important;}
.border-radius{ border-radius: var(--border-radius);}
.border-radius-header{ border-radius: var(--header-border-radius);}
.regular-link{
        color: hsla(var(--theme-text-primary),1);
        text-decoration: none;
        font-weight: 700;
        opacity: 0.78;
        transition: opacity 0.35s var(--ease-snappy), color 0.35s var(--ease-snappy);
        }
        .regular-link:hover{
			opacity: 1;
			color: hsla(var(--theme-text-primary),1);
			}
.regular-list,
#workshop.workshop ul{
    position: relative;
    }
    .regular-list li,
    #workshop.workshop ul li{
        position: relative;
        padding: var(--regular-list-pad);
        }
        .regular-list li::after,
        #workshop.workshop ul li::after{
            position: absolute;
            content: "";
            width: var(--regular-list-is);
            height: var(--regular-list-is);
            border-radius: 100px;
            top: var(--regular-list-it);
            left: 0;
            background: hsla(var(--theme-text-primary),1);
            }
.regular-list.small{    
    padding: 9px;
    }
    .regular-list.small li{
        font-size: var(--fs-body-s);
        line-height: var(--lh-body-s);        
        margin-top: -6px;
        }
    .regular-list li.sublist{
        padding: 0 12px;
        }
        .regular-list.small li.sublist li{
            font-size: var(--fs-body-s);
            line-height: var(--lh-body-s);
            }
        .regular-list li.sublist::after, .regular-list li.sublist li::after{
            visibility: hidden;
            }
            .regular-list li.sublist li{
                display: flex;
                align-items: center;
                padding: 9px 0;
                gap: 6px;
                }
                .regular-list li.sublist li span{
                    display: none;
                    }
                .regular-list li.sublist li .card-icon{
                    margin-bottom: 0;
                    }
.ordered-list{
    list-style-type: none;
    counter-reset: ordered;
    }
    .ordered-list li{
        padding: var(--ordered-list-pad);
        }
        .ordered-list li::after{
            content: counter(ordered);
            counter-increment: ordered;
            position: absolute;
            display: flex;
            justify-content: flex-end;
            width: var(--ordered-list-iw);
            top: var(--ordered-list-it);
            left: 4px;
            font-weight: 700;
            color: hsla(var(--theme-text-primary),1);            
            }
.alert{
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    text-align: center;
    align-items: center;
    gap: calc(var(--padding-content) / 2);
    padding: var(--padding-content-small);
    margin-bottom: var(--grid-item-gap);
    box-sizing: border-box;
    border-radius: var(--header-border-radius);
    background: hsla(var(--theme-yellow-card),1);
    z-index: 100;
    box-shadow: var(--box-shadow-big);
    }
#map{
    position: relative;
    width: 100%;
    height: var(--map-height);
    filter: grayscale(36%);
    opacity: 0.84;
    }
    #map a{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
    #map iframe{ pointer-events: none;}
    .dark #map{
        opacity: 0.64;
        filter: invert(90%) hue-rotate(180deg) grayscale(36%);
        }

/* =============================================================================
   COOKIES
   ========================================================================== */

#cc-main .cm{
    max-width: 22rem;
    box-shadow: var(--box-shadow-big);
    }
#cc-main .cm__title + .cm__desc{
    margin-top: 0.66em;
    }
#cc-main .cm__btns, #cc-main .cm__links{
    padding: 18px;
    }
#cc-main .cm__desc, #cc-main .cm__title{
    padding-right: 18px;
    padding-left: 18px;
    }
#cc-main .cm__btn, #cc-main .cm__btn:hover, #cc-main .cm__btn--secondary, #cc-main .cm__btn--secondary:hover, #cc-main .pm__btn, #cc-main .pm__btn:hover, #cc-main .pm__btn--secondary, #cc-main .pm__btn--secondary:hover, #cc-main .pm__close-btn, #cc-main .pm__close-btn:hover{
    border: none;
    }
#cc-main .pm__badge{
    background: var(--cc-btn-secondary-bg);
    color: var(--cc-primary-color);
    padding: 0 1em 1px;
    }
#cc-main .cc--anim .cm{
    transition-duration: 0.84s;    
    }
#cc-main .cm__btn+.cm__btn{
    margin-top: 0;
}
#cc-main .cm__btns .cm__btn-group:first-child{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    }
#cc-main .cm__btn-group .cm__btn.cm__btn--secondary{
    background: none;
    padding-bottom: 0;
    }

/* =============================================================================
   MARQUEE
   ========================================================================== */

.marquee-container{
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    }
.image-marquee-container{
    display: flex;
    gap: 2px;
    }
    .wrapper .image-marquee-container{ width: calc(100% + calc(var(--wrapper-plr) * 2)); margin-right: calc(0px - var(--wrapper-plr)); margin-left: calc(0px - var(--wrapper-plr));}    
        .wrapper.superbig .image-marquee-container{ width: calc(100% + calc(var(--wrapper-plr-superbig) * 2)); margin-right: calc(0px - var(--wrapper-plr-superbig)); margin-left: calc(0px - var(--wrapper-plr-superbig));}
        .wrapper.big .image-marquee-container{ width: calc(100% + calc(var(--wrapper-plr-big) * 2)); margin-right: calc(0px - var(--wrapper-plr-big)); margin-left: calc(0px - var(--wrapper-plr-big));}
        .wrapper.medium .image-marquee-container{ width: calc(100% + calc(var(--wrapper-plr-medium) * 2)); margin-right: calc(0px - var(--wrapper-plr-medium)); margin-left: calc(0px - var(--wrapper-plr-medium));}
        .wrapper.small .image-marquee-container{ width: calc(100% + calc(var(--wrapper-plr-small) * 2)); margin-right: calc(0px - var(--wrapper-plr-small)); margin-left: calc(0px - var(--wrapper-plr-small));}
    .image-marquee-container img{
        max-width: var(--marquee-container-img);
        }
    .image-marquee-container.imcxl img{
        max-width: var(--marquee-container-img-xl);
        }
    .image-marquee-container.imcxs img{
        max-width: var(--marquee-container-img-xs);
        }
    .image-marquee-container.grayscale{    
        mix-blend-mode: overlay;
        filter: grayscale(72%) contrast(110%) brightness(110%);
        }
        .image-marquee-container.grayscale img{
            opacity: 0.72;
            }
        .red-marquee{ background: hsla(var(--theme-red-background-tint),0.6)}
        .magenta-marquee{ background: hsla(var(--theme-magenta-background-tint),0.6)}
        .orange-marquee{ background: hsla(var(--theme-orange-background-tint),0.6)}
        .yellow-marquee{ background: hsla(var(--theme-yellow-background-tint),0.6)}
        .green-marquee{ background: hsla(var(--theme-green-background-tint),0.6)}
        .blue-marquee{ background: hsla(var(--theme-blue-background-tint),0.6)}
        .violet-marquee{ background: hsla(var(--theme-violet-background-tint),0.6)}
        .turquoise-marquee{ background: hsla(var(--theme-turquoise-background-tint),0.6)}
.hero-marquee{
    position: absolute;
    display: flex;
    z-index: 1;
    top: auto;
    right: 0;
    bottom: var(--pb-hero-marquee);
    left: 0;
    margin: auto;
    white-space: nowrap;
    font-size: var(--fs-hero-marquee);
    line-height: var(--fs-hero-marquee);
    letter-spacing: var(--ls-hero-marquee);
    align-items: center;
    opacity: 0;
    transition: opacity 2.72s 1.8s ease-in;
    }
    .enter-active .hero-marquee{
        opacity: 0.12;
        }
        .dark.enter-active .hero-marquee{
            opacity: 0.09;
            }
    .hero-marquee-content{
        display: inline-flex;
        }
        .hero-marquee b{
            display: inline-flex;
            position: relative;
            background: linear-gradient(hsla(var(--theme-text-primary),1),hsla(var(--theme-text-primary),1)) no-repeat 0 0;
            background-size: 0 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: hsla(var(--theme-text-primary),0.12);
            }            
            .hero-marquee b::before{
                position: absolute;
                top: 0;
                left: 0;
                content: attr(data-descr);
                background-size: 100% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: hsla(var(--theme-text-primary),0);
                -webkit-text-stroke: 1px hsla(var(--theme-text-primary),1);
                }
        .error .hero-marquee b{
            background: linear-gradient(hsla(var(--theme-red-title),1),hsla(var(--theme-red-title),1)) no-repeat 0 0;
            background-size: 0 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: hsla(var(--theme-red-title),0.09);
            }            
            .error .hero-marquee b::before{
                background-size: 100% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: hsla(var(--theme-red-title),0);
                -webkit-text-stroke: 1px hsla(var(--theme-red-title),0.48);
                }
.hero-marquee-iso{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    padding: var(--wrapper-ptb) 0 calc(var(--wrapper-ptb) * 0.36);
    overflow: hidden;
    }
    .hero-marquee-iso .w100{ visibility: hidden;}
    .hero-marquee-iso .hero-animation{ display: flex;}
    .hero-marquee-iso .hero-marquee{
        top: auto;
        bottom: var(--iso-marquee-bottom);
        margin: 0 auto;
        }        
        .hero-section .hero-marquee-iso{
            padding: var(--wrapper-ptb) 0;
            }
            .hero-section .hero-marquee-iso .hero-marquee{
                bottom: var(--iso-marquee-bottom-hs);
                }
.tickets .image-marquee-container{
    filter: grayscale(100%) contrast(100%) brightness(90%);
    mix-blend-mode: overlay;
    opacity: 1;
    padding-bottom: 2px;
    }
    .dark .tickets .image-marquee-container{
        filter: grayscale(100%) contrast(100%) brightness(60%);
        mix-blend-mode: exclusion;
        opacity: 0.3;
        padding-bottom: 2px;
        }
.past-sponsors .marquee-container{
    gap: calc(var(--padding-content) / 2);
    padding-top: calc(var(--padding-content) * 1.5);
    }
    .past-sponsors .marquee-container.reverse{
        gap: calc(var(--padding-content) / 2);
        padding-top: calc(var(--padding-content) / 2);
        padding-bottom: calc(var(--padding-content) * 1.5);
        }
    .logo.logo-marquee{
        width: var(--logos-marquee);
        height: var(--logos-marquee);
        padding: 0;
        margin: 0;
        }
    .logo.icon-marquee{
        width: var(--icon-marquee);
        height: var(--icon-marquee);
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: none;
        }

/* =============================================================================
   HEADER
   ========================================================================== */

header{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - calc(var(--header-margin) * 2));
    height: var(--header-height);
    background: hsla(var(--theme-background),0.84);
    border: var(--button-border) solid hsla(var(--theme-border-navigation),1);
    padding: var(--header-padding);
    top: var(--header-margin);
    right: var(--header-margin);
    left: var(--header-margin);
    opacity: 0;
    margin: 0 auto;
    z-index: 100;
    border-radius: var(--border-radius);
    /*transition: opacity 0.3s 0.84s ease, background 0.6s ease;*/
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    }
    header[data-active-theme="red"] { background: hsla(var(--theme-red-background-tint),0.84); border-color: hsla(var(--theme-red-border),1);}
    header[data-active-theme="magenta"] { background: hsla(var(--theme-magenta-background-tint),0.84); border-color: hsla(var(--theme-magenta-border),1);}
    header[data-active-theme="orange"] { background: hsla(var(--theme-orange-background-tint),0.84); border-color: hsla(var(--theme-orange-border),1);}
    header[data-active-theme="yellow"] { background: hsla(var(--theme-yellow-background-tint),0.84); border-color: hsla(var(--theme-yellow-border),1);}
    header[data-active-theme="green"] { background: hsla(var(--theme-green-background-tint),0.84); border-color: hsla(var(--theme-green-border),1);}
    header[data-active-theme="blue"] { background: hsla(var(--theme-blue-background-tint),0.84); border-color: hsla(var(--theme-blue-border),1);}
    header[data-active-theme="violet"] { background: hsla(var(--theme-violet-background-tint),0.84); border-color: hsla(var(--theme-violet-border),1);}
    header[data-active-theme="turquoise"] { background: hsla(var(--theme-turquoise-background-tint),0.84); border-color: hsla(var(--theme-turquoise-border),1);}
    header[data-active-theme="default"] { background: hsla(var(--theme-background-tint),0.84); border-color: hsla(var(--theme-border-navigation),1);}    
    .enter-active header{
        opacity: 1;
        transform: opacity;        
        }
    .header-actions{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--header-actions-gap);
        }
    .header-logo,
    .header-logo svg{
        display: flex;
        width: auto;
        height: var(--header-logo-height);
        position: relative;
        }
        .header-logo:focus,
        .header-logo:focus-visible{
            outline: none;
            }
        .pls1{ 
            fill: hsla(var(--theme-text-primary),1);
            }
        .pls2{
            fill: hsla(var(--theme-black),0.14);
            }
        .pls3{ 
            fill: hsla(var(--theme-white),1);
            }
header .button{
    width: auto;
    padding-right: 7.5px;
    padding-left: 7.5px;
    }
    header .button:hover{
        padding-right: 7.5px;
        padding-left: 7.5px;
        }    
    header .button span{
        width: 0;
        overflow: hidden;
        padding-right: 0;
        padding-left: 0;
        }
.menu-open .header-logo,
.menu-open .button,
.menu-open .switch-color{
    opacity: 0.06;
    pointer-events: none;
    }
.menu-button,
.hamburger{
    width: calc(var(--header-height) - var(--header-margin));
    height: calc(var(--header-height) - var(--header-margin));
    cursor: pointer;
    border-radius: calc(var(--header-border-radius) - 3px);
    /*background: hsla(var(--theme-red-title),1);*/
    }
    .menu-button{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        background: none;
        color: inherit;
        font: inherit;
        margin: 0 var(--button-border) 0 calc(var(--button-border) * 2);
        -webkit-appearance: none;
        appearance: none;
        transition: background-color 0.45s var(--ease-soft), transform 0.45s var(--ease-fluid);
        }
        .menu-button.menu-button--disabled{
            display: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .menu-button:hover{
            background: none;
            }
        .menu-button:focus-visible{
            outline: 0;
            outline-offset: 4px;
            }
        .hamburger{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            transition: transform 0.6s var(--ease-fluid), background 0.45s var(--ease-soft);
            }
            .hamburger span{
                position: absolute;
                width: calc(100% - var(--dist-ham));
                height: 2px;
                right: calc(var(--dist-ham) / 2);
                background: hsla(var(--theme-text-primary),1);
                border-radius: 25px;
                transition: transform 0.5s var(--ease-snappy), background 0.45s var(--ease-soft), width 0.32s var(--ease-snappy);
                }
                .hamburger span:nth-child(1){
                    width: calc(94% - var(--dist-ham));
                    top: calc(var(--dist-ham) / 1.66);
                    }
                .hamburger span:nth-child(2){ 
                    width: calc(72% - var(--dist-ham));
                    top: 0; 
                    bottom: 0; 
                    margin: auto; 
                    }
                    .hamburger span:nth-child(2)::after{
                        position: absolute;
                        content: "";
                        width: 4px;
                        height: 2px;
                        top: 0; 
                        bottom: 0; 
                        left: -6px;
                        margin: 0; 
                        border-radius: 25px;
                        background: hsla(var(--theme-text-primary),1);
                        }
            .hamburger span:nth-child(3){ 
                bottom: calc(var(--dist-ham) / 1.66);
                }
                .hamburger span.cross:nth-child(4),
                .hamburger span.cross:nth-child(5){
                        width: calc(94% - var(--dist-ham));
                        transition: var(--transition-translate);
                        background: hsla(var(--theme-white),0);
                        }
                .hamburger span.cross:nth-child(4){
                    top: calc(var(--dist-ham) / 1.66);
                    }
                .hamburger span.cross:nth-child(5){
                    bottom: calc(var(--dist-ham) / 1.66);
                    }
        .menu-button.open .hamburger{
            background: hsla(var(--theme-red-title),0.84);
            }
            .menu-button.open .hamburger span:nth-child(1),
            .menu-button.open .hamburger span:nth-child(2),
            .menu-button.open .hamburger span:nth-child(2)::after,
            .menu-button.open .hamburger span:nth-child(3){
                width: 0;
                }
            .menu-button.open .hamburger span.cross{
                width: calc(100% - var(--dist-ham));
                background: hsla(var(--theme-white),1);
                transform: rotate(0deg);                
                }
                .menu-button.open .hamburger span.cross:nth-child(4){
                     transform: rotate(45deg) translate(4.5px, 4.5px); 
                    }
                .menu-button.open .hamburger span.cross:nth-child(5){
                    transform: rotate(-45deg) translate(4.5px, -4.5px);
                    }
                    .menu-button:hover .hamburger span:nth-child(1){
                        transform: translateX(-24%);
                        }
                    .menu-button:hover .hamburger span:nth-child(2){
                        transform: translateX(-36%);
                        }
                    .menu-button:hover .hamburger span:nth-child(3){
                        transform: translateX(12%);
                        }
                    .menu-button.open:hover .hamburger{
                        transform: scale(1.08);
                        }

.menu{
    position: fixed;
    width: calc(100% - 12px);
    max-width: 456px;
    max-height: 0;
    top: 24px;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    transition: max-height 0.65s var(--ease-fluid), box-shadow 0.55s var(--ease-fluid);
    z-index: 800;
        box-shadow: var(--box-shadow-big);
    border-radius: var(--border-radius-header);
    }
    .menu.menu--disabled{
        display: none;
    }
    .menu::before{
        position: absolute;
        content: "";
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: var(--border-radius-header);
        background: hsla(var(--theme-navigation),0.84);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        }
    .menu.visible{
        max-height: auto;
        }
    .menu-content{
        padding: 48px 0 24px;
        opacity: 0;
        transform: translate3d(0,-32px,0) scale(0.96);
        transition: transform 0.6s var(--ease-fluid), opacity 0.45s var(--ease-soft);
        will-change: transform, opacity;
        }
        .menu.visible .menu-content{
            opacity: 1;
            transform: translate3d(0,0,0) scale(1);
            }
            .menu-list li{
                opacity: 0;
                transform: translate3d(0,16px,0) scale(0.98);
                filter: blur(6px);
                transition: transform 0.6s var(--ease-fluid), opacity 0.45s var(--ease-soft), filter 0.45s var(--ease-soft);
                will-change: transform, opacity, filter;
                }
                .menu.visible .menu-list li{
                    opacity: 1;
                    transform: translate3d(0,0,0) scale(1);
                    filter: blur(0);
                    }
                    .menu-list li:nth-child(1){ transition-delay: 0.05s; }
                    .menu-list li:nth-child(2){ transition-delay: 0.1s; }
                    .menu-list li:nth-child(3){ transition-delay: 0.15s; }
                    .menu-list li:nth-child(4){ transition-delay: 0.2s; }
                    .menu-list li:nth-child(5){ transition-delay: 0.25s; }
                    .menu-list li:nth-child(6){ transition-delay: 0.3s; }
                    .menu-list li:nth-child(7){ transition-delay: 0.35s; }
                    .menu-list li:nth-child(8){ transition-delay: 0.4s; }
                    .menu-list li:nth-child(9){ transition-delay: 0.45s; }
                    .menu-list li:nth-child(10){ transition-delay: 0.5s; }
                    .menu-list li a{
                        display: flex;
                        color: hsla(var(--theme-text-primary),0.9);
                        text-decoration: none;
                        font-size: 22px;
                        line-height: 22px;
                        padding: 20px 24px 16px 45px;
                        border-bottom: 1px dashed hsla(var(--theme-text-primary),0.24);
                        transition: color 0.45s var(--ease-soft), background-color 0.45s var(--ease-soft), transform 0.55s var(--ease-fluid);
                        }
                        .menu-list li:last-child a{ border:none;}
                        .menu-list li a:hover{
                            background: hsla(var(--theme-text-primary),0.12);
                            transform: translateX(6px);
                            }
        .menu-list li a.active{
            color: hsla(var(--theme-white),1);
            background: hsla(var(--theme-green-title),0.84);
            }
            .menu-list li a.active{
                color: hsla(var(--theme-white),1);
                background: hsla(var(--theme-green-title),0.84);
                }
                .menu-list li.red a.active{    background: hsla(var(--theme-red-title),0.84);}
                .menu-list li.magenta a.active{    background: hsla(var(--theme-magenta-title),0.84);}
                .menu-list li.orange a.active{ background: hsla(var(--theme-orange-title),0.84);}
                .menu-list li.yellow a.active{ background: hsla(var(--theme-yellow-title),0.84);}
                .menu-list li.green a.active{ background: hsla(var(--theme-green-title),0.84);}
                .menu-list li.blue a.active{ background: hsla(var(--theme-blue-title),0.84);}
                .menu-list li.violet a.active{ background: hsla(var(--theme-violet-title),0.84);}
                .menu-list li.turquoise a.active{ background: hsla(var(--theme-turquoise-title),0.84);}
            .menu-list.one-page li a.active{
                background: none;
                }
                .menu-list.one-page li a.active:hover{
                    background: hsla(var(--theme-text-primary),0.12);
                    }
                    .menu-number{
                        position: absolute;
                        top: 21px;
                        left: 12px;
                        font-size: 18px;
                        line-height: 18px;
                        color: hsla(var(--theme-text-primary),0.24);
                        transition: color 0.45s var(--ease-soft), transform 0.55s var(--ease-fluid);
                        will-change: color, transform;
                        }
            .menu-number.active-number{
                color: hsla(var(--theme-white),0.6);
                }
.switch-color{
    position: relative;
    width: 36px;
    height: 36px;    
    border-radius: 36px;
    background: hsla(var(--theme-yellow-title),0.12);
    border: 1.5px solid hsla(var(--theme-text-primary),1);
    }
    .dark .switch-color{ background: hsla(var(--theme-turquoise-title),0.24);}
.toggle-color{
    position: absolute;
    cursor: pointer;
    display: inline-flex;
    width: 36px;
    height: 36px;
    top: 18px;
    right: -18px;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    transition: ease-in-out 0.48s;
    }
    .toggle-color::before{
        border-radius: 100px;
        }
.toggle-color .gooey_bg{
    display: inline-block;
    position: absolute;
    width: 36px;
    height: 36px;
    left: 0;
    top: 0;
    padding: 0;    
    border-radius: 100%;
    }
.toggle-color svg{
    width: 0;
    height: 0;
    }
    .toggle-color .switch-icons svg{
        width: 18px;
        height: 18px;
        vertical-align: top;
        }
.toggle-color .switch{
    width: 100%;
    height: 100%; 
    }
    .toggle-color .switch-icons-day,
    .toggle-color .switch-icons-night{
        position: absolute;
        display: block;
        width: 18px;
        height: 18px;
        padding: 0;
        top: 7.5px;
        left: 10.5px;
        opacity: 1;
        transition: ease-in-out 0.48s;
        }
        .toggle-color .sw1, 
        .toggle-color .sw2{
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10;
            }
            .toggle-color .sw1, .toggle-color .sw2{ stroke-width: 2;}
                .toggle-color.dark-off .switch-icons-day .sw1, .toggle-color.dark-on .switch-icons-night .sw1{ stroke: hsla(var(--theme-text-primary), 1);}
                .toggle-color.dark-off .switch-icons-night .sw1, .toggle-color.dark-on .switch-icons-day .sw1{ stroke: hsla(var(--theme-text-primary), 0);}
                .toggle-color.dark-off .switch-icons-day .sw2, .toggle-color.dark-on .switch-icons-night .sw2{ fill: hsla(var(--theme-yellow-title), 0.78);}
                .toggle-color.dark-off .switch-icons-night .sw2, .toggle-color.dark-on .switch-icons-day .sw2{ fill: hsla(var(--theme-yellow-title), 0);}                
                    .dark .toggle-color.dark-off .switch-icons-day .sw1, .dark .toggle-color.dark-on .switch-icons-night .sw1{ stroke: hsla(var(--theme-text-primary), 1);}
                    .dark .toggle-color.dark-off .switch-icons-night .sw1, .dark .toggle-color.dark-on .switch-icons-day .sw1{ stroke:hsla(var(--theme-text-primary), 0);}
                    .dark .toggle-color.dark-off .switch-icons-day .sw2, .dark .toggle-color.dark-on .switch-icons-night .sw2{ fill: hsla(var(--theme-turquoise-title), 0.84);}
                    .dark .toggle-color.dark-off .switch-icons-night .sw2, .dark .toggle-color.dark-on .switch-icons-day .sw2{ fill: hsla(var(--theme-turquoise-title), 0);}
.toggle-color.dark-on .switch .gooey_bg_1{ animation: fadeIn 300ms linear forwards;}
.toggle-color.dark-on .switch .gooey_bg_2{ animation: fadeIn 300ms linear forwards;}
.toggle-color.dark-off .switch .gooey_bg_1{ animation: fadeOut 300ms linear forwards;}
.toggle-color.dark-off .switch .gooey_bg_2{ animation: fadeOut 300ms linear forwards;}

/* =============================================================================
   HERO
   ========================================================================== */
   
.hero{
    position: relative;
    overflow: hidden;
    min-width: 100vw;
    min-height: var(--app-viewport-height, 100vh);
    text-align: center;
    gap: var(--hero-gap);
    z-index: 1;
    background: radial-gradient(farthest-corner at 50% 50%, hsla(var(--theme-background),0) 36%, hsla(var(--theme-background),0.36) 66%, hsla(var(--theme-background),0.48) 80%, hsla(var(--theme-background),1) 100%), 
    radial-gradient(farthest-corner at 50% 50%, hsla(var(--theme-background),0) 36%, hsla(var(--theme-background),0.18) 80%, hsla(var(--theme-background),0.48) 90%, hsla(var(--theme-background),1) 100%), 
    linear-gradient(to top, hsla(var(--theme-background),0.48) 0%, hsla(var(--theme-background),0) 24%, hsla(var(--theme-background),0) 80%, hsla(var(--theme-background),0.48) 100%),
    0 0 / auto var(--grid-size) repeat-y linear-gradient(to top, transparent 0, transparent calc(50% - var(--line-width) / 2), hsla(var(--theme-border-light),1) calc(50% - var(--line-width) / 2), hsla(var(--theme-border-light),1) calc(50% + var(--line-width) / 2), transparent calc(50% + var(--line-width) / 2)), 0 0 / var(--grid-size) auto repeat-x linear-gradient(to right, transparent 0, transparent calc(50% - var(--line-width) / 2), hsla(var(--theme-border-light),1) calc(50% - var(--line-width) / 2), hsla(var(--theme-border-light),1) calc(50% + var(--line-width) / 2), transparent calc(50% + var(--line-width) / 2)), hsla(var(--theme-background),1);
    }
    .hero-pixel-trail{
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
       /* mix-blend-mode: screen;*/
        }
    .hero-trail-color{
        --hero-pixel-color-1: var(--hero-pixel-color-green-1);
        --hero-pixel-color-2: var(--hero-pixel-color-green-2);
        --hero-pixel-color-3: var(--hero-pixel-color-green-3);
        }
    .hero-icons-color{
        --theme-gray-icon-cursor: var(--theme-orange-icon-bg);
        --theme-gray-icon-smiley: var(--theme-yellow-icon-bg);
        --theme-gray-icon-eyes: var(--theme-turquoise-icon-bg);
        --theme-gray-icon-heart: var(--theme-magenta-icon-bg);
        --theme-gray-icon-hand: var(--theme-violet-icon-bg);
        --theme-gray-icon-leaf: var(--theme-green-icon-bg);
        --theme-gray-icon-cloud: var(--theme-blue-icon-bg);
        }

/* Theme Remapping */
.theme-remap-red{
    --theme-green-title: var(--theme-red-title);
    --theme-green-background: var(--theme-red-background);
    --theme-green-background-tint: var(--theme-red-background-tint);
    --theme-green-video-background: var(--theme-red-video-background);
    --theme-green-detail: var(--theme-red-detail);
    --theme-green-card: var(--theme-red-card);
    --theme-green-icon-bg: var(--theme-red-icon-bg);
    --theme-green-icon-border: var(--theme-red-icon-border);
    }
.theme-remap-magenta{
    --theme-green-title: var(--theme-magenta-title);
    --theme-green-background: var(--theme-magenta-background);
    --theme-green-background-tint: var(--theme-magenta-background-tint);
    --theme-green-video-background: var(--theme-magenta-video-background);
    --theme-green-detail: var(--theme-magenta-detail);
    --theme-green-card: var(--theme-magenta-card);
    --theme-green-icon-bg: var(--theme-magenta-icon-bg);
    --theme-green-icon-border: var(--theme-magenta-icon-border);
    }
.theme-remap-orange{
    --theme-green-title: var(--theme-orange-title);
    --theme-green-background: var(--theme-orange-background);
    --theme-green-background-tint: var(--theme-orange-background-tint);
    --theme-green-video-background: var(--theme-orange-video-background);
    --theme-green-detail: var(--theme-orange-detail);
    --theme-green-card: var(--theme-orange-card);
    --theme-green-icon-bg: var(--theme-orange-icon-bg);
    --theme-green-icon-border: var(--theme-orange-icon-border);
    }
.theme-remap-yellow{
    --theme-green-title: var(--theme-yellow-title);
    --theme-green-background: var(--theme-yellow-background);
    --theme-green-background-tint: var(--theme-yellow-background-tint);
    --theme-green-video-background: var(--theme-yellow-video-background);
    --theme-green-detail: var(--theme-yellow-detail);
    --theme-green-card: var(--theme-yellow-card);
    --theme-green-icon-bg: var(--theme-yellow-icon-bg);
    --theme-green-icon-border: var(--theme-yellow-icon-border);
    }
.theme-remap-blue{
    --theme-green-title: var(--theme-blue-title);
    --theme-green-background: var(--theme-blue-background);
    --theme-green-background-tint: var(--theme-blue-background-tint);
    --theme-green-video-background: var(--theme-blue-video-background);
    --theme-green-detail: var(--theme-blue-detail);
    --theme-green-card: var(--theme-blue-card);
    --theme-green-icon-bg: var(--theme-blue-icon-bg);
    --theme-green-icon-border: var(--theme-blue-icon-border);
    }
.theme-remap-violet{
    --theme-green-title: var(--theme-violet-title);
    --theme-green-background: var(--theme-violet-background);
    --theme-green-background-tint: var(--theme-violet-background-tint);
    --theme-green-video-background: var(--theme-violet-video-background);
    --theme-green-detail: var(--theme-violet-detail);
    --theme-green-card: var(--theme-violet-card);
    --theme-green-icon-bg: var(--theme-violet-icon-bg);
    --theme-green-icon-border: var(--theme-violet-icon-border);
    }
.theme-remap-turquoise{
    --theme-green-title: var(--theme-turquoise-title);
    --theme-green-background: var(--theme-turquoise-background);
    --theme-green-background-tint: var(--theme-turquoise-background-tint);
    --theme-green-video-background: var(--theme-turquoise-video-background);
    --theme-green-detail: var(--theme-turquoise-detail);
    --theme-green-card: var(--theme-turquoise-card);
    --theme-green-icon-bg: var(--theme-turquoise-icon-bg);
    --theme-green-icon-border: var(--theme-turquoise-icon-border);
    }

    .hero-pixel-trail__canvas{
        width: 100%;
        height: 100%;
        display: block;
        image-rendering: pixelated;
        /*filter: saturate(110%);*/
        }
        .wrapper.hero{
            padding-top: calc(var(--header-height) * 2);
            padding-bottom: var(--hero-info-height);
            }
    .hero.hero-section{
        min-width: auto;
        min-height: auto;
        padding: var(--hs-hero-pt) 0 var(--hs-hero-pb);
        }
        .hero.hero-section h1, .hero.hero-section .h1{
            font-size: var(--fs-hero-h1);
            line-height: var(--lh-hero-h1);
            }
        .hero.hero-section h4, .hero.hero-section .h4{
            font-size: var(--fs-index-h4);
            line-height: var(--lh-index-h4);
            }
    .hero.error{
        background: linear-gradient(0deg, hsla(0,0%,100%,0.56) 0%, hsla(0,0%,100%,0.56) 100%), linear-gradient(135deg, hsla(352,60%,78%,1) 0%, hsla(202,60%,66%,1) 72%, hsla(208,60%,56%,1) 100%);
        }
        .hero.error::before{
            background: linear-gradient(0deg, hsla(0,0%,0%,0.24) 0%, hsla(0,0%,0%,0.24) 100%), linear-gradient(135deg, hsla(352,48%,38%,1) 0%, hsla(240,48%,27%,1) 72%, hsla(240,56%,24%,1) 100%);
            }
.hero-text, .hero-info, .hero-links{
    z-index: 1;
    }
    .hero-text{
        position: relative;
        display: flex;
        flex-direction: column;
        padding: var(--hero-text-pt) 0 var(--hero-text-pb);
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
        z-index: 1;
        }
        .hero-text-title{
            position: relative;
               width: 100%;
            --orbit-parallax-x: 0px;
            --orbit-parallax-y: 0px;
            }
            .hero-text-title::before{
                position:absolute;
                content: "";
                width: var(--hero-orbit-w);
                height: var(--hero-orbit-h);
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                transform: rotate(var(--hero-icons-rotation)) translate3d(var(--orbit-parallax-x), var(--orbit-parallax-y), 0);
                transform-origin: center;
                border-radius: 50%;
                opacity: 0.84;
                background-position: 0 0;
                background-size: 120% 120%;
                background-image: radial-gradient(22% 32% at 24% 50%, hsla(var(--theme-green-background-tint),0.42) 7%, transparent 100%), radial-gradient(26% 34% at 18% 71%, hsla(var(--theme-background),0.16) 6%, transparent 100%), radial-gradient(68% 52% at 36% 76%, hsla(var(--theme-turquoise-background-tint),0.36) 0%, transparent 100%), radial-gradient(40% 52% at 15% 94%, hsla(var(--theme-background),0.20) 12%, transparent 100%), radial-gradient(28% 40% at 7% 98%, hsla(var(--theme-green-background-tint),0.22) 24%, transparent 100%), radial-gradient(34% 48% at 91% 74%, hsla(var(--theme-green-background-tint),0.28) 8%, transparent 100%), radial-gradient(74% 86% at 67% 38%, hsla(var(--theme-turquoise-background-tint),0.30) 20%, transparent 100%), linear-gradient(125deg, hsla(var(--theme-background),0.92) 0%, hsla(var(--theme-green-background-tint),0.40) 12%, hsla(var(--theme-green-background-tint),0.34) 88%, hsla(var(--theme-background),0.92) 100%);
                filter: blur(18px);
                animation: hero-orbit-glow 20s ease-in-out infinite;
                }
            .hero-text-title [data-pointer-depth]{
                will-change: transform;
                transform: translate3d(0,0,0);
                --hero-shadow-scale: 1;
                --hero-shadow-layer-1-base-x: 0px;
                --hero-shadow-layer-1-base-y: 0px;
                --hero-shadow-layer-2-base-x: 0px;
                --hero-shadow-layer-2-base-y: 0px;
                --hero-shadow-layer-1-dx: 0px;
                --hero-shadow-layer-1-dy: 0px;
                --hero-shadow-layer-2-dx: 0px;
                --hero-shadow-layer-2-dy: 0px;
                --hero-shadow-layer-1-axis-x: 0.08em;
                --hero-shadow-layer-1-axis-y: 0.08em;
                --hero-shadow-layer-2-axis-x: 0.16em;
                --hero-shadow-layer-2-axis-y: 0.16em;
                --hero-shadow-layer-1-blur: 0;
                --hero-shadow-layer-2-blur: 0;
                --hero-shadow-border-offset-x: 0px;
                --hero-shadow-border-offset-y: 0px;
                }
                .hero-text h1, .hero-text p, .hero-text .hero-cta{
                    position: relative;
                    z-index: 3;
                    }
                    .hero-text-title h1,
                    .hero-text-title h2{
                        position: relative;
                        }
                    .hero-text-title h2{
                        --hero-shadow-scale: 0.82;
                        }
                    .hero-text-title h1::after,
                    .hero-text-title h2::after,
                    .hero-text-title h1::before,
                    .hero-text-title h2::before{
                        content: attr(data-text);
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        color: hsla(var(--theme-green-text-shadow-1),1);
                        z-index: -1;
                        transform: translate(calc(var(--hero-shadow-layer-1-base-x) * var(--hero-shadow-scale) + var(--hero-shadow-layer-1-dx)),calc(var(--hero-shadow-layer-1-base-y) * var(--hero-shadow-scale) + var(--hero-shadow-layer-1-dy)));
                        text-shadow: calc(var(--hero-shadow-layer-1-axis-x) * var(--hero-shadow-scale) + var(--hero-shadow-layer-1-dx)) 0 calc(var(--hero-shadow-layer-1-blur)) hsla(var(--theme-green-text-shadow-1),0.68), calc(var(--hero-shadow-layer-1-axis-x) * -1 * var(--hero-shadow-scale) + var(--hero-shadow-layer-1-dx)) 0 calc(var(--hero-shadow-layer-1-blur)) hsla(var(--theme-green-text-shadow-1),0.48), 0 calc(var(--hero-shadow-layer-1-axis-y) * var(--hero-shadow-scale) + var(--hero-shadow-layer-1-dy)) calc(var(--hero-shadow-layer-1-blur)) hsla(var(--theme-green-text-shadow-1),0.56), 0 calc(var(--hero-shadow-layer-1-axis-y) * -1 * var(--hero-shadow-scale) + var(--hero-shadow-layer-1-dy)) calc(var(--hero-shadow-layer-1-blur)) hsla(var(--theme-green-text-shadow-1),0.42);
                        filter: none;
                        opacity: 0;
                        }
                        .hero-text-title h1::before,
                        .hero-text-title h2::before{
                            content: attr(data-text);
                            position: absolute;
                            left: 0;
                            top: 0;
                            color: hsla(var(--theme-green-text-shadow-1),1);
                            transform: translate(calc(var(--hero-shadow-border-offset-x) * var(--hero-shadow-scale)),calc(var(--hero-shadow-border-offset-y) * var(--hero-shadow-scale)));
                            text-shadow: calc(var(--hero-shadow-border-offset-x) * var(--hero-shadow-scale)) calc(var(--hero-shadow-border-offset-y) * var(--hero-shadow-scale)) 0  hsla(var(--theme-green-text-shadow-2),0.72);
                            filter: none;
                            }
    .hero-text h2{ z-index: 1;}
    .hero-text p{    
        font-size: var(--fs-hero-text-p);
        line-height: var(--lh-hero-text-p);    
        opacity: 0.72;
        padding: var(--pad-hero); 
        }
.hero-cta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
    .hero-cta strong{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-body);
        line-height: var(--lh-body);    
        color: hsla(var(--theme-text-primary),1);
        padding: 0 0 6px;
        }
        .error .hero-cta strong{
            color: hsla(var(--theme-text-primary),1);
            }
.hero-info{
    display: flex;
    gap: 9px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    }
    .hero-info h5{
        display: flex;
        flex-direction: column;
        width: 100%;
        letter-spacing: calc(var(--ls-xs) * var(--ls-mul));
        font-size: var(--fs-hero-h5);
        line-height: var(--lh-hero-h5);
        justify-content: space-between;
        }
        .hero-info h5 strong{
            font-size: calc(var(--fs-hero-h5) * 0.9);
            line-height: calc(var(--lh-hero-h5) * 0.9);
            letter-spacing: calc(var(--ls-md) * var(--ls-mul));
            }
        .hero-info h5 span{
            color: hsla(var(--theme-green-title),1);
            }
            .hero-info h5:nth-child(1){ text-align: left;}
            .hero-info h5:nth-child(2){ width: fit-content;}
                .hero-info h5:nth-child(2) b{ display: none;}
            .hero-info h5:nth-child(3){ text-align: right;}
.hero-links-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--hero-links-padding);
    gap: var(--hero-links-gap);
    }
    .hero-links{
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: var(--hero-links-space);
        align-items: center;
        /*margin-top: 18px;*/
        gap: var(--hero-links-space);
        border-radius: var(--border-radius);
        background: hsla(var(--theme-blue-background-tint),0.6);
        background: linear-gradient(hsla(var(--theme-blue-title),0.1) 0%, hsla(var(--theme-blue-title),0.1) 100%), linear-gradient(hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 100%);
        border: 1.5px solid hsla(var(--theme-blue-title),1);            
        }        
        .hero-links p{
            font-size: var(--fs-hero-links);
            line-height: var(--lh-hero-links);
            }    
        .hero-buttons{            
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 12px;
            }    
            .error .hero-buttons{        
                border-bottom: none;
                padding-bottom: 0;
                margin-bottom: 0;
                }
        .chevron{
            position: relative;
            width: 24px;
            height: 24px;
            opacity: 0.6;
            margin-bottom: 24px;
            animation: bounceDown 4.2s 0.48S cubic-bezier(0.12, 0.96, 0.36, 1.84) infinite;
            }
            .chevron::before,
            .chevron::after{
                content: '';
                position: absolute;
                width: 18px;
                height: 2px; 
                top: 8px;
                background: hsla(var(--theme-blue-title),1);
                border-radius: 10px;
                }
                .chevron::before{
                    transform: rotate(45deg);
                    left: -2.5px;
                    }
                .chevron::after{
                    transform: rotate(-45deg);
                    right: -2.5px;
                    }
            .chevron:hover{
                opacity: 1;    
                }
                .hero .chevron:first-child{display: none;}
                .enter-active .hero-text-title h1::after,
                .enter-active .hero-text-title h2::after,
                .enter-active .hero-text-title h1::before,
                .enter-active .hero-text-title h2::before,
                .enter-active .hero-orbit-icons{                        
                    animation: fadeIn 0.3s 0.96s linear forwards;
                    }
.hero-orbit-icons{
    position: absolute;
    container-type: size;
    width: var(--hero-orbit-w);
    height: var(--hero-orbit-h);
    top: calc(0px - calc(var(--hero-heading-line-1) * 0.1));
    right: 0;
    bottom: auto;
    left: 0;
    margin: 0 auto;
    transform: rotate(var(--hero-icons-rotation));
    transform-origin: center;
    z-index: 2;
    isolation: isolate;
    opacity: 0;
    }
    .hero-orbit-icons::before{
        content: "";
        position: absolute;
        inset: -10%;
        border-radius: 50%;
        background: radial-gradient(ellipse at center,transparent 58%,hsla(var(--theme-green-background-tint),0.6) 63%,hsla(var(--theme-green-background-tint),0) 78%),radial-gradient(ellipse at center,hsla(var(--theme-green-background-tint),0.25) 0%,hsla(var(--theme-green-background-tint),0.18) 45%,hsla(var(--theme-green-background-tint),0.08) 58%,hsla(var(--theme-green-background-tint),0) 70%);
        transform: rotate(-8deg) scaleY(0.48) translateX(-2%);
        filter: drop-shadow(0 16px 22px hsla(var(--theme-green-background-tint),0.24));
        opacity: 0.9;
        z-index: -1;
        }
    .hero-orbit-icon{
        width: var(--hero-icon-size);
        height: var(--hero-icon-size);
        display: grid;
        place-items: center;
        position: absolute;
        offset-path: ellipse(var(--hero-rx) var(--hero-ry) at 50% 50%);
        offset-rotate: 0deg;
        transform: rotate(calc(var(--hero-icons-rotation)*-1));
        animation: orbit-animation var(--hero-icons-animation) linear infinite;
        z-index: 1;
        }
        .hero-orbit-icon svg{
            width: 100%;
            height: 100%;
            }
.hero-icon-main{ fill: hsla(var(--theme-green-icon-bg),1);}
.hero-icon-border{ fill: hsla(var(--theme-green-icon-border),1);}
.hero-icon-shadow{ fill: hsla(var(--theme-black),1); mix-blend-mode: darken; opacity: 0.24}
.hero-icon-light{ fill: hsla(var(--theme-white),1); mix-blend-mode: overlay; opacity: 0.48}
    .dark .hero-icon-shadow{ opacity: 0.48}
    .dark .hero-icon-light{ mix-blend-mode: soft-light; opacity: 0.6}
        .red.hero-icon-main{ fill: hsla(var(--theme-red-icon-bg),1);}
        .red.hero-icon-border{ fill: hsla(var(--theme-red-icon-border),1);}    
        .magenta.hero-icon-main{ fill: hsla(var(--theme-magenta-icon-bg),1);}
        .magenta.hero-icon-border{ fill: hsla(var(--theme-magenta-icon-border),1);}    
        .orange.hero-icon-main{ fill: hsla(var(--theme-orange-icon-bg),1);}
        .orange.hero-icon-border{ fill: hsla(var(--theme-orange-icon-border),1);}    
        .yellow.hero-icon-main{ fill: hsla(var(--theme-yellow-icon-bg),1);}
        .yellow.hero-icon-border{ fill: hsla(var(--theme-yellow-icon-border),1);}    
        .green.hero-icon-main{ fill: hsla(var(--theme-green-icon-bg),1);}
        .green.hero-icon-border{ fill: hsla(var(--theme-green-icon-border),1);}    
        .blue.hero-icon-main{ fill: hsla(var(--theme-blue-icon-bg),1);}
        .blue.hero-icon-border{ fill: hsla(var(--theme-blue-icon-border),1);}    
        .violet.hero-icon-main{ fill: hsla(var(--theme-violet-icon-bg),1);}
        .violet.hero-icon-border{ fill: hsla(var(--theme-violet-icon-border),1);}    
        .turquoise.hero-icon-main{ fill: hsla(var(--theme-turquoise-icon-bg),1);}
        .turquoise.hero-icon-border{ fill: hsla(var(--theme-turquoise-icon-border),1);}

.show-static{
    opacity: 0;
    transform: translateY(var(--show-static));
    transition: opacity 0.3s 0.84s ease, transform 0.36s 0.84s linear;
    }
    .show-static + .show-static{
        transition: opacity 0.3s 1.08s ease, transform 0.36s 1.08s linear;
        }
    .enter-active .show-static{
        opacity: 1;
        transform: translateY(0);        
        }


/* =============================================================================
   INFO
   ========================================================================== */

.info{
    color: hsla(var(--theme-text-primary),1);
    background: hsla(var(--theme-green-background),1);
    gap: calc(var(--grid-gap) * 1.5);
    min-height: var(--app-viewport-height, 100vh);
    justify-content: space-around;
    }
.info-content{
    display: flex;
    flex-direction: column;
    gap: var(--grid-item-gap);
    }
    .info-title{
        width: 100%;
        max-width: var(--info-width);
        margin: 0 auto;
        }
        .info-text h3{
            font-size: calc(var(--fs-index-h4) * 2);
            line-height: calc(var(--lh-index-h4) * 1.5);
            }
.info p{
    max-width: var(--info-text);
    font-size: var(--fs-info-p);
    line-height: var(--lh-info-p);
    margin: 0;
    }
    .info.xs1 p{
        max-width: var(--info-text-xs1);
        margin: 0 calc(calc(100% - var(--info-text-xs1)) / 2);
        }
    .info.small-size p{
        font-size: var(--fs-info-p-s);
        line-height: var(--lh-info-p-s);
        }    
.info p .br{
    display: block;
    height: calc(var(--grid-item-gap) * 1.25);
    }
video{
    pointer-events: none;
    }
.video-container-mask{
    position: relative;
    pointer-events: none;
    width: var(--info-video-container-mask);
    height: auto;
    /*margin-left: calc(100% - var(--info-video-container-mask) - 2px);*/
    margin: auto;
    overflow: hidden;
    background: hsla(var(--theme-green-video-background),1);
    object-fit: cover;
    mask-image: url("../images/video-mask.svg");
    mask-size: contain; 
    mask-repeat: no-repeat;
    mask-position: center;    
    -webkit-mask-image: url("../images/video-mask.svg"); 
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    }
    .video-container-mask.bcn{
        mask-image: url("../images/video-mask-flower.svg");
        -webkit-mask-image: url("../images/video-mask-flower.svg"); 
        }
    .video-container-mask img{
        display: block;
        width: 100%;
        height: auto;
        }
        .background-video-info{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            pointer-events: none;
            filter: grayscale(100%) contrast(100%) brightness(80%);
            mix-blend-mode: multiply;
            opacity: 0.6;
            }
            .venue .background-video-info{
                opacity: 0.48;
                }
            .video-container-mask.bcn .background-video-info{
                filter: grayscale(100%) contrast(144%) brightness(120%);
                }
.video-container-mask img:nth-of-type(1),
.video-container-mask video{
    display: none;
    }
    .video-container-mask img:nth-of-type(2){
        filter: grayscale(100%) contrast(100%) brightness(120%);
        mix-blend-mode: multiply;
        opacity: 0.3;
        }
.info .info-numbers{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    gap: var(--grid-item-gap);
    }
    .info .info-numbers p{
        padding: 0;        
        }
.info .info-stats,
.info .info-venue{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--grid-item-gap);
    box-sizing: border-box;
    }
    .info .info-stats .pixel-window,
    .info .info-venue .pixel-window{
        --pixel-max-width: none;
        --pixel-align: center;
        width: 100%;
        box-sizing: border-box;
        }
        .info .info-stats .pixel-window{
            flex: 50%;
            max-width: calc(50% - calc(var(--grid-item-gap) / 2));
            }
        .info .info-venue .pixel-window{
            flex: 100%;/
            }
            .info .info-stats .pixel-window__content,
            .info .info-venue .pixel-window__content{
                text-align: center;
                }
            .info .info-venue .pixel-window{
                --pixel-content-padding: var(--padding-content-small);
                }
            .info .info-stats p:first-child{    
                font-size: var(--fs-card-number)!important;
                line-height: var(--fs-card-number)!important;
                letter-spacing: calc(var(--ls-xs) * var(--ls-mul));
                color: hsla(var(--theme-green-title),1);
                margin: 0;
                }
            .info .info-stats p:last-child, .info .info-venue p{
                font-size: var(--fs-card-title)!important;
                line-height: var(--lh-card-title)!important;
                letter-spacing: calc(var(--ls-md) * var(--ls-mul));
                margin: 0;
                }

/* =============================================================================
   PIXEL WINDOW
   ========================================================================== */

.pixel-window{
    --pixel-max-width: var(--info-text);
    --pixel-border-color: hsla(var(--theme-text-secondary),1);
    --pixel-surface-color: hsla(var(--theme-green-background-tint),1);
    --pixel-chrome-color: hsla(var(--theme-green-title),1);
    /*--pixel-shadow-strong: hsla(var(--theme-red-title),0.32);
    --pixel-shadow-soft: hsla(var(--theme-red-title),0.22);*/
    --pixel-border-padding: var(--window-border-padding);
    --pixel-frame-padding: var(--window-frame-padding);
    --pixel-frame-padding-top: var(--pixel-frame-padding);
    --pixel-frame-padding-bottom: 0;
    --pixel-controls-gap: var(--window-controls-gap);
    --pixel-controls-display: flex;
    --pixel-btn-size: var(--window-btn-size);
    --pixel-btn-border: var(--window-btn-border);
    --pixel-content-padding: var(--window-content-padding);
    --pixel-align: center;
    --pixel-border-size-sm: var(--window-pixel-size-sm);
    --pixel-border-size-md: var(--window-pixel-size-md);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    }    
    .pixel-max-width{
        max-width: var(--window-max-width);
        margin: auto;
        }
    .pixel-window-pr{ padding-right: var(--pixel-window-pr);}
    .pixel-window__outer,
    .pixel-window__frame,
    .pixel-window__content,
    .window-content,
    .window-content-text{
        display: flex;
        flex-direction: column;
        }
        .pixel-window__outer{
            width: 100%;
            margin: auto;
            background: var(--pixel-border-color);
            padding: var(--pixel-border-padding);
            clip-path: polygon(0 var(--pixel-border-size-sm), var(--pixel-border-size-sm) var(--pixel-border-size-sm), var(--pixel-border-size-sm) 0, calc(100% - var(--pixel-border-size-sm)) 0, calc(100% - var(--pixel-border-size-sm)) var(--pixel-border-size-sm), 100% var(--pixel-border-size-sm), 100% calc(100% - var(--pixel-border-size-sm)), calc(100% - var(--pixel-border-size-sm)) calc(100% - var(--pixel-border-size-sm)), calc(100% - var(--pixel-border-size-sm)) 100%, var(--pixel-border-size-sm) 100%, var(--pixel-border-size-sm) calc(100% - var(--pixel-border-size-sm)), 0 calc(100% - var(--pixel-border-size-sm)));
            box-shadow: 0 15px 30px hsla(var(--theme-black),0.2), 0 20px 40px hsla(var(--theme-black),0.1);
            flex: 1;
            }
			.dark .pixel-window__outer{ background: hsla(var(--theme-text-secondary),0.48);}
        .pixel-window__frame{
            flex: 1;
            margin: auto;
            width: 100%;
            background: var(--pixel-chrome-color);
            /*box-shadow: 0 0 0 1px var(--pixel-border-color), 0 0 0 3px var(--pixel-chrome-color), 0 0 0 12px var(--pixel-border-color), 0 0 0 14px var(--pixel-shadow-strong), 6px 6px 0 3px var(--pixel-shadow-strong), 6px 6px 0 4px var(--pixel-border-color);*/
            clip-path: polygon(0 var(--pixel-border-size-md), var(--pixel-border-size-md) var(--pixel-border-size-md), var(--pixel-border-size-md) 0, calc(100% - var(--pixel-border-size-md)) 0, calc(100% - var(--pixel-border-size-md)) var(--pixel-border-size-md), 100% var(--pixel-border-size-md), 100% calc(100% - var(--pixel-border-size-md)), calc(100% - var(--pixel-border-size-md)) calc(100% - var(--pixel-border-size-md)), calc(100% - var(--pixel-border-size-md)) 100%, var(--pixel-border-size-md) 100%, var(--pixel-border-size-md) calc(100% - var(--pixel-border-size-md)), 0 calc(100% - var(--pixel-border-size-md)));
            }
        .pixel-window__controls{
            display: var(--pixel-controls-display);
            gap: var(--pixel-controls-gap);
            margin: var(--pixel-controls-gap) 0;
            padding: 0 var(--pixel-frame-padding);
            pointer-events: none;
            }
            .pixel-window__btn{
                width: var(--pixel-btn-size);
                height: var(--pixel-btn-size);
                background: var(--pixel-chrome-color);
                border: var(--pixel-btn-border) solid var(--pixel-border-color);
                clip-path: polygon(0 var(--pixel-border-size-sm), var(--pixel-border-size-sm) var(--pixel-border-size-sm), var(--pixel-border-size-sm) 0, calc(100% - var(--pixel-border-size-sm)) 0, calc(100% - var(--pixel-border-size-sm)) var(--pixel-border-size-sm), 100% var(--pixel-border-size-sm), 100% calc(100% - var(--pixel-border-size-sm)), calc(100% - var(--pixel-border-size-sm)) calc(100% - var(--pixel-border-size-sm)), calc(100% - var(--pixel-border-size-sm)) 100%, var(--pixel-border-size-sm) 100%, var(--pixel-border-size-sm) calc(100% - var(--pixel-border-size-sm)), 0 calc(100% - var(--pixel-border-size-sm)));
                pointer-events: none;
                }
    .pixel-window__content{
        flex: 1;
        background: var(--pixel-surface-color);
        padding: var(--pixel-content-padding);
        justify-content: center;
        align-items: var(--pixel-align);
        /*box-shadow: 0 0 0 1px var(--pixel-border-color), 0 0 0 3px var(--pixel-surface-color), 0 0 0 12px var(--pixel-border-color), 0 0 0 14px var(--pixel-shadow-soft), 6px 6px 0 4px var(--pixel-shadow-soft), 6px 6px 0 6px var(--pixel-border-color), inset 0 1px 4px hsla(var(--theme-black),0.06);*/
        clip-path: polygon(0 var(--pixel-border-size-sm), var(--pixel-border-size-sm) var(--pixel-border-size-sm), var(--pixel-border-size-sm) 0, calc(100% - var(--pixel-border-size-sm)) 0, calc(100% - var(--pixel-border-size-sm)) var(--pixel-border-size-sm), 100% var(--pixel-border-size-sm), 100% calc(100% - var(--pixel-border-size-sm)), calc(100% - var(--pixel-border-size-sm)) calc(100% - var(--pixel-border-size-sm)), calc(100% - var(--pixel-border-size-sm)) 100%, var(--pixel-border-size-sm) 100%, var(--pixel-border-size-sm) calc(100% - var(--pixel-border-size-sm)), 0 calc(100% - var(--pixel-border-size-sm)));
        }
        .pixel-window__content p{ max-width: none;}
        .pixel-window--align-left{ --pixel-align: flex-start;}
        .pixel-window--gap{ gap: var(--pixel-content-padding);}
        .pixel-window--compact{
            --window-pixel-unit: var(--window-pixel-unit-compact);
            --pixel-max-width: none;
            --pixel-frame-padding: var(--window-frame-padding-compact);
            --pixel-frame-padding-top: var(--pixel-frame-padding);
            --pixel-frame-padding-bottom: 0;
            --pixel-controls-gap: var(--window-controls-gap-compact);
            --pixel-btn-size: var(--window-btn-size-compact);
            --pixel-btn-border: var(--window-btn-border-compact);
            --pixel-content-padding: var(--window-content-padding-compact);
            /*--pixel-shadow-strong: hsla(var(--theme-black),0.2);
            --pixel-shadow-soft: hsla(var(--theme-black),0.16);*/
            }
    .pixel-window--no-header{
        --pixel-controls-display: none;
        --pixel-frame-padding-bottom: var(--pixel-frame-padding);
        }
        .pixel-window--no-header .pixel-window__frame{ padding-top: calc(var(--window-pixel-size-md) * 2);}
    .window-content, .window-content-text{ text-align: left;}
    .window-cta{
        display: flex;
        position: relative;
        width: 100%;
        padding: var(--hero-links-space);
        justify-content: center;
        text-align: center;
        align-items: center;
        border-radius: var(--border-radius);
        background: linear-gradient(hsla(var(--theme-green-title),0.1) 0%, hsla(var(--theme-green-title),0.1) 100%), linear-gradient(hsla(var(--theme-green-background),1) 0%, hsla(var(--theme-green-background),1) 100%);
        border: 1.5px solid hsla(var(--theme-green-title),1);      
        }
    .pixel-window .color-title{
        color: hsla(var(--theme-green-title),1);
        }

/* =============================================================================
   CFP
   ========================================================================== */

.info.cfp{
    color: hsla(var(--theme-text-primary),1);
    background: hsla(var(--theme-violet-background),1);
    }
    .info.cfp h2{
        color: hsla(var(--theme-violet-title),1);
        }
    .cfp .grid-lines__line{
        background-image: repeating-linear-gradient(180deg, hsla(var(--theme-violet-detail),0.48), hsla(var(--theme-violet-detail),0.48) 6px, transparent 6px, transparent 12px);
        }
        .cfp .grid-lines__line::after{
            background: linear-gradient(to bottom, hsla(var(--theme-violet-detail),0) 0%, hsla(var(--theme-violet-detail),1) 75%, hsla(var(--theme-violet-detail),1) 100%);
            }        
.cfp .video-container-mask{
    background: hsla(var(--theme-violet-background-tint),1);
    }
.video-container-img{
    position: relative;
    width: 50%;
    height: auto;
    margin-left: 50%;
    overflow: hidden;    
    }    
    .video-container-img div{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        }
        .video-container-img div::after,
        .video-container-img div::before{
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url('../images/cfp-flower-dark.webp') no-repeat center / 100%;        
            z-index: 2;
            opacity: 0;
            transition: opacity 0.48s ease;
            }
            .video-container-img div::before{
                background: url('../images/cfp-flower-light.webp') no-repeat center / 100%;        
                z-index: 1;
                opacity: 1;
                }
                .dark .video-container-img div::after{ opacity: 1;}
                .dark .video-container-img div::before{    opacity: 0;}
                .video-container-img img{
                    display: block;
                    width: 100%;
                    height: auto;    
                    }
        .video-container-img.jersey div::after,
        .video-container-img.jersey div::before{
            background: url('../images/cycling-jersey-dark.webp') no-repeat center / 100%;
            }
            .video-container-img.jersey div::before{
                background: url('../images/cycling-jersey-light.webp') no-repeat center / 100%;    
                }        
        .video-container-img.gear::before{
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url('../images/workshops-gear-light.webp') no-repeat center / 100%;        
            z-index: 0;
            opacity: 1;
            transition: all 0.3s ease;
            animation: spinTBC 36s cubic-bezier(0.12, 0.72, 0.12, 1.18) infinite;
            transform-origin: center;
            transform-box: border-box;
            }
            .dark .video-container-img.gear::before{
                background: url('../images/workshops-gear-dark.webp') no-repeat center / 100%;    
                }        
                .video-container-img.gear div::after,
                .video-container-img.gear div::before{
                    background: url('../images/workshops-gear-dark.webp') no-repeat center / 100%;
                    }
                    .video-container-img.gear div::before{
                        background: url('../images/workshops-gear-light.webp') no-repeat center / 100%;    
                        }
                    .video-container-img.gear div{
                        position: relative;
                        mask-image: url("../images/workshops-gear-mask.svg");
                        mask-size: contain; 
                        mask-repeat: no-repeat;
                        mask-position: top;    
                        -webkit-mask-image: url("../images/workshops-gear-mask.svg");
                        -webkit-mask-size: contain;
                        -webkit-mask-repeat: no-repeat;
                        -webkit-mask-position: top;
                        }

/* =============================================================================
   PYE
   ========================================================================== */

.info.pye{
    color: hsla(var(--theme-text-primary),1);
    background: hsla(var(--theme-violet-background),0.84);
    }
    .info.pye h2{
        color: hsla(var(--theme-turquoise-title),1);
        }
    .pye .grid-lines__line{
        background-image: repeating-linear-gradient(180deg, hsla(var(--theme-turquoise-detail),0.48), hsla(var(--theme-turquoise-detail),0.48) 6px, transparent 6px, transparent 12px);
        }
        .pye .grid-lines__line::after{
            background: linear-gradient(to bottom, hsla(var(--theme-turquoise-detail),0) 0%, hsla(var(--theme-turquoise-detail),1) 75%, hsla(var(--theme-turquoise-detail),1) 100%);
            }
.pye .video-container-img::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/cfp-flower-light.webp') no-repeat center / 100%;        
    z-index: 0;
    opacity: 1;
    transition: all 0.3s ease;
    animation: spinTBC 36s cubic-bezier(0.12, 0.72, 0.12, 1.18) infinite;
    transform-origin: center;
    transform-box: border-box;
    }
    .dark .pye .video-container-img::before{
        background: url('../images/cfp-flower-dark.webp') no-repeat center / 100%;
        }
        .pye .video-container-img div{
            position: relative;
            mask-image: url("../images/cfp-flower-mask.svg");
            mask-size: contain; 
            mask-repeat: no-repeat;
            mask-position: top;    
            -webkit-mask-image: url("../images/cfp-flower-mask.svg");
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: top;
            z-index: 0;
            }
.pye .video-container-mask{
    background: hsla(var(--theme-violet-background-tint),1);
    }
.pye .video-container{
    background: hsla(var(--theme-violet-background),1);
    }
    .pye .video-container .background-video{
        opacity: 0.6;
        }
    .dark .pye .video-container{
        background: hsla(var(--theme-violet-card),1);
        }
        .dark .pye .video-container .background-video{
            opacity: 0.3;
            }
.side-events .grid-content{
    gap: calc(var(--grid-gap) * 2);
    }
.vinyl, .arm{
    animation: vinylSpin 32s ease-in-out infinite;
    transform-origin: center;
    transform-box: border-box;
    }
.arm{
    animation: armMove 32s ease-in-out infinite;
    }    
    .mac0{ 
        fill: none;
        stroke: hsla(var(--theme-text-primary),1);
        stroke-width: 0.25px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
        }
    .dta0{ 
        fill: hsla(var(--theme-turquoise-background),1);
        transition: var(--transition-old-school);
        }
    .dtaOn{ 
        opacity: 0;
        animation: dtaOn 32s ease-in-out infinite;
        }
.side-events .grid-col-2-reg-1-2 .grid-item:first-child{
    padding-right: 5%;
    padding-left: 5%;
    }
.pye .video-container img:nth-of-type(2){
    mix-blend-mode: color-burn;
    opacity: 0.24;
    }

/* =============================================================================
   VENUE
   ========================================================================== */

/*
.info.venue{
    color: hsla(var(--theme-text-primary),1);
    background: hsla(var(--theme-magenta-background),1);
    }
    .info.venue h2{
        color: hsla(var(--theme-yellow-title),1);
        }
    .venue .grid-lines__line{
        background-image: repeating-linear-gradient(180deg, hsla(var(--theme-yellow-detail),0.48), hsla(var(--theme-yellow-detail),0.48) 6px, transparent 6px, transparent 12px);
        }
        .venue .grid-lines__line::after{
            background: linear-gradient(to bottom, hsla(var(--theme-yellow-detail),0) 0%, hsla(var(--theme-yellow-detail),1) 75%, hsla(var(--theme-yellow-detail),1) 100%);
            }        
.venue .video-container-mask{
    background: hsla(var(--theme-yellow-background-tint),1);
    }*/
.video-container{
    position: relative;
    width: var(--info-video-container);
    height: auto;
    margin-left: var(--info-video-container-left);
    background: hsla(var(--theme-yellow-background-tint),1);
    border-radius: var(--border-radius);
    overflow: hidden;
    }
    .video-container img{
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--border-radius);
        }
        .background-video{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            pointer-events: none;
            filter: grayscale(100%) contrast(144%) brightness(120%);
            mix-blend-mode: overlay;
            opacity: 0.3;
            }            
            .venue .background-video{
                opacity: 0.48;
                }
                .dark .venue .background-video{
                    opacity: 0.36;
                    }
.video-container img:nth-of-type(1),
.video-container video{
    display: none;    
    }
    .video-container img:nth-of-type(2){
        filter: grayscale(100%) contrast(100%) brightness(100%) brightness(120%);
        mix-blend-mode: overlay;
        opacity: 0.24;
        }
.virtual-tour{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-gap) * 2);
    padding-bottom: calc(var(--grid-gap) * 2);
    }
    .virtual-tour .anim-svg-wf{
        position: relative;
        max-width: var(--info-width);
        margin: auto;
        }
        .pfap1{ stroke-width:.1px;}
        .pfap2,.pfap3{ stroke-width: .2px}
        .pfap1,.pfap2,.pfap3{ fill: none; stroke-linecap: round; stroke-linejoin: round; }
        .pfap1,.pfap2{ stroke: hsla(var(--theme-text-primary),0.48);}
        .pfap3{ stroke: hsla(var(--theme-green-title),1);} /* Arrow */
        .pfap9{ fill: hsla(var(--theme-green-title),0.36);} /* Arrow */
        .pfap12{ fill: hsla(var(--theme-green-title),1);} /* Fira */
        .pfap0{ fill: hsla(var(--theme-text-primary),0.12);} /* Roof right */
        .pfap4{ fill: hsla(var(--theme-text-primary),0.24);} /* Roof left */
        .pfap5{ fill: hsla(var(--theme-text-primary),0.24);} /* Text */
        .pfap6{ fill: hsla(var(--theme-orange-title),0.24);} /* Tower left */
        .pfap8{ fill: hsla(var(--theme-orange-title),0.12);} /* Tower right */
        .pfap11{ fill: hsla(var(--theme-text-primary),0.06);} /* Solid */
        .pfap14{ fill: hsla(var(--theme-white),0.24);} /* Logo */
    .circle-text{
        position: absolute;
        display: flex;
        top: var(--circle-radius-pt);
        right: var(--circle-radius-pr);
        width: calc(var(--circle-radius) * 2);
        height: calc(var(--circle-radius) * 2);
        border-radius: 50%;
        text-align: center;
        font-size: var(--fs-circle-radius);
        line-height: var(--fs-circle-radius);
        text-transform: uppercase;
        color: hsla(var(--theme-text-primary),1);
        text-decoration: none;
        overflow: visible;
        cursor: pointer;
        transform-origin: center;
        z-index: 1;
        }
        .circle-text .char{
            position: absolute;
            top: 0;
            left: 0;   
            transform-style: preserve-3d;
            white-space: nowrap;
            font-size: inherit;
            }
        .circle-text svg{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: var(--circle-radius-icon);
            height: var(--circle-radius-icon);
            margin: auto;
            }
            .circle-text .button-icon-color{
                stroke-width: 1.25;
                stroke: hsla(var(--theme-text-primary),1);
                transition: var(--transition-old-school);
                }
                .circle-text:hover .button-icon-color{
                    stroke: hsla(var(--theme-green-title),1);        
                    }
                .circle-text.bold .button-icon-color{
                    stroke-width: 2;
                    }
        .circle-text.center{            
            top: var(--circle-radius-pt-center);
            right: 0;            
            left: 0;
            margin: auto;
            }
        .circle-text b{
            opacity: 0;
            }
            .circle-text.cycling{            
                top: var(--circle-radius-pt-cycling);
                right: 0;            
                left: 0;
                margin: auto;
                }

/* =============================================================================
   STACK VIEW
   ========================================================================== */

.stack-gallery{
    width: 100vw;
    background: hsla(var(--theme-blue-background),1);
    }
    .stack-view{
        position: relative;
        min-height: auto;
        padding: var(--wrapper-ptb) var(--wrapper-plr);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        color: hsla(var(--theme-text-primary),1);
        background: hsla(var(--theme-blue-background),1);
        background-position: center;
        isolation: isolate;
        overflow: hidden;
        gap: calc(var(--grid-gap) * 1.5);
        }
        .stack-view__viewport{
                position: relative;
                width: 100%;
                max-width: 80rem;
                margin: 0 auto;
                }

        .stack-view__stage {
                position: relative;
                width: max-content;
                min-width: 100%;
                height: auto;
                display: flex;
                gap: clamp(1.25rem, 4vw, 3rem);
                align-items: center;
                overflow-x: auto;
                padding: 0 1rem 0.5rem;
                scroll-snap-type: x mandatory;
                scrollbar-width: thin;
                overscroll-behavior-x: contain;
                touch-action: pan-x pan-y pinch-zoom;
                -webkit-overflow-scrolling: touch;
                will-change: transform;
                }
        .stack-view__stage--draggable {
                cursor: grab;
                user-select: none;
                -webkit-user-select: none;
                }
        .stack-view__stage--dragging {
            cursor: grabbing;
            }
        .stack-card {
                position: relative;
                flex: 0 0 auto;
                width: min(85vw, 28rem, calc(70vh * 16 / 9));
                aspect-ratio: 16 / 9;
                border-radius: var(--border-radius);
                overflow: hidden;
                scroll-snap-align: center;
                }

        .stack-view__stage::-webkit-scrollbar {
                height: 6px;
                }

        .stack-view__stage::-webkit-scrollbar-thumb {
                background: hsla(var(--theme-white), 0.2);
                border-radius: 999px;
                }

        .stack-card__inner {
            position: absolute;
            inset: 0;
            display: block;
            border-radius: inherit;
            overflow: hidden;
            border: var(--button-border) solid hsla(var(--theme-text-primary), 1);
            backdrop-filter: blur(6px);
            }

        .stack-card__media {
          position: absolute;
          inset: 0;
          overflow: hidden;
        }

        .stack-card__media img,
        .stack-card__media video {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
        }

        .stack-view.stack-view--enhanced .stack-card {
          will-change: transform, opacity;
        }

          .stack-view__mobile-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            margin-top: 2.5rem;
            font-size: 0.9rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            opacity: 0.7;
            color: hsla(var(--theme-white), 0.75);
            animation: pulse 2.4s ease-in-out infinite;
          }

        .stack-view__mobile-hint::before,
        .stack-view__mobile-hint::after {
          content: "";
          width: 1.5rem;
          height: 1px;
          background: currentColor;
          opacity: 0.45;
        }

        @keyframes pulse {
          0%,
          100% {
            opacity: 0.45;
          }
          50% {
            opacity: 0.9;
          }
        }

        /* Desktop enhancements */
        @media (min-width: 768px) {
          .stack-view {
            min-height: var(--app-viewport-height, 100vh);
            padding-block: clamp(6rem, 10vw, 10rem);
            padding-inline: 0;
          }

          .stack-view__viewport {
            width: min(100vw, 80rem);
          }

          .stack-card {
            width: min(clamp(400px, 40vw, 700px), calc(80vh * 16 / 9));
            scroll-snap-align: unset;
          }

          .stack-view__mobile-hint {
            display: none;
          }
        }

        @media (min-width: 1281px) {
          .stack-view__stage {
            overflow: visible;
            padding: 0;
            scroll-snap-type: none;
          }

          .stack-view__stage::-webkit-scrollbar {
            height: 0;
          }

          .stack-view__stage::-webkit-scrollbar-thumb {
            background: transparent;
          }
        }

        @media (min-width: 1024px) {
          .stack-card {
            width: min(clamp(500px, 42vw, 800px), calc(85vh * 16 / 9));
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .stack-view,
          .stack-view * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
          }
        }



/* =============================================================================
   GALLERY
   ========================================================================== */

.gallery{
    position: relative;
    overflow: hidden;
    background: linear-gradient(0deg, hsla(0,0%,100%,0.6) 0%, hsla(0,0%,100%,0.6) 100%), linear-gradient(135deg, hsla(196,60%,78%,1) 0%, hsla(202,60%,66%,1) 72%, hsla(208,60%,56%,1) 100%);
    gap: 18px;
    }
    .gallery::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0;         
        background: linear-gradient(0deg, hsla(244,48%,12%,0.78) 0%, hsla(244,48%,12%,0.78) 100%), linear-gradient(135deg, hsla(240,48%,38%,1) 0%, hsla(240,48%,27%,1) 72%, hsla(240,56%,24%,1) 100%);
        transition: all 0.36s ease-in-out;
        }
        .dark .gallery::before{
            opacity: 1;
            }
    .gallery h2{
        color: hsla(var(--theme-blue-title),1);
        }
.gallery-content{
    display: grid;
    gap: 0;
    transition: all ease 1s;
    border-radius: calc(var(--border-radius) / 1.5);    
    overflow: hidden;
    }
    .gallery-content figure{
        padding: 0;
        margin: 0;
        }
    .gallery-content .item{
        position: relative;
        transition: var(--transition-old-school);
        overflow: hidden;
        }
        .gallery-content .item figcaption{
            display: flex;
            position: absolute;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: var(--fs-gallery-title);
            line-height: var(--lh-gallery-title);
            color: hsla(var(--theme-white),1);
            width: 100%;
            height: 100%;
            padding: 0 5%;
            margin: 0;
            top: 0;
            left: 0;
            transition: var(--transition-old-school);
            background: hsla(var(--theme-green-title),1);
            }
            .gallery-content .item figcaption:hover{
                opacity: 0.72;
                }
            .al0{
                position: absolute;
                width: var(--gallery-arrow);
                height: auto;
                top: var(--gallery-arrow-tr);
                right: var(--gallery-arrow-tr);
                fill: hsla(var(--theme-white),0.12);
                stroke: hsla(var(--theme-white),1);
                stroke-width: 4;
                stroke-miterlimit: 10;                
                stroke-linecap: round;
                stroke-linejoin: round;
                transition: var(--transition-old-school);
                }    
                .gallery-content .item:hover .al0{
                    width: calc(var(--gallery-arrow) * 1.18);
                    fill: hsla(var(--theme-white),1);
                    }    
    .gallery-content .item:nth-child(3), .gallery-content .item:nth-child(4), .gallery-content .item:nth-child(5), .gallery-content .item:nth-child(6), .gallery-content .item:nth-child(8), .gallery-content .item:nth-child(12), .gallery-content .item:nth-child(13){
        display: none;
        }
.video-container-gallery{
    position: relative;
    width: 100%;
    height: auto;
    }
    .video-container-gallery img{
        display: block;
        width: 100%;
        height: auto;
        }
        .background-video-gallery{
            width: auto;
            height: 100%;
            position: absolute;
            left: -9%;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            pointer-events: none;
            }
        .video-container-gallery img:nth-of-type(1),
        .video-container-gallery video{
            display: none;    
            }

/* =============================================================================
   TICKET
   ========================================================================== */

.ticket{
    position: relative;
    overflow: hidden;
    background: linear-gradient(0deg, hsla(0,0%,100%,0.84) 0%, hsla(0,0%,100%,0.84) 100%), linear-gradient(135deg, hsla(196,60%,78%,1) 0%, hsla(202,60%,66%,1) 72%, hsla(208,60%,56%,1) 100%);
    gap: 18px;
    }
    .ticket::before{
            position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0;         
        background: linear-gradient(0deg, hsla(244,48%,8%,0.36) 0%, hsla(244,48%,8%,0.36) 100%), linear-gradient(135deg, hsla(240,48%,28%,1) 0%, hsla(240,48%,17%,1) 72%, hsla(240,56%,14%,1) 100%);
        transition: all 0.36s ease-in-out;
        }
        .dark .ticket::before{
            opacity: 1;
            }
    .ticket h2{
        color: hsla(var(--theme-green-title),1);
        }
.timer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ticket-gap);
    padding-top: var(--padding-content);
    }
    .tick-tock{
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: var(--ticket-width);
        }
        .tick-tock::after{
            position: absolute;
            content: ":";
            top: 0;
            right: calc(var(--ticket-gap-detail) - var(--ticket-gap));
            flex-direction: column;
            justify-content: center;
            text-align: center;
            color: hsla(var(--theme-green-title),1);
            opacity: 0.48;
            font-size: calc(var(--fs-ticket-number) / 1.25);
            line-height: calc(var(--lh-ticket-number) / 1.25);
            }
            .tick-tock:last-of-type::after{
                display: none;
                }
        .tick-tock span:first-of-type{
            font-size: var(--fs-ticket-number);
            line-height: var(--lh-ticket-number);
            }
        .tick-tock span:last-of-type{
            opacity: 0.6;
            font-size: var(--fs-ticket-data);
            line-height: var(--lh-ticket-data);
            }
.highlight{
    position: relative;
    display: inline-block;
    }
    .highlight::after{
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        width: 100%;
        height: var(--ticket-underline);
        background: hsla(var(--theme-green-title),1);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.96s cubic-bezier(0.12, 0.32, 0.12, 1.24);
        }
        .highlight.underline::after{
            transform: scaleX(1);
            }

/* =============================================================================
   TICKETS
   ========================================================================== */

.tickets{
    color: hsla(var(--theme-text-primary),1);
    background: hsla(var(--theme-yellow-background),1);
    gap: calc(var(--grid-gap) * 2);
    justify-content: space-around;
    }
.tickets .hero-marquee b{ opacity: 0.72}    
    .dark .tickets .hero-marquee b{ opacity: 0.3}            
.ticket-io{
    position: relative;
    margin: calc(var(--ticket-io-margin) * 1.42) 0 var(--ticket-io-margin);
    padding: 0;
    overflow: hidden;
    list-style-type: none;
    border-radius: var(--header-border-radius);
    background: hsla(var(--theme-card-dark),1);
    }
    .ticket-io::after{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        border-radius: var(--header-border-radius);
        box-shadow: inset 0 0 0 1.5px hsla(var(--theme-border-dark),1);
        }
    .ticket-io h3{
        font-size: var(--fs-tickets-h3);
        line-height: var(--lh-tickets-h3);
        color: hsla(var(--theme-text-primary),1);
        }
    .ticket-io li{
        text-align: center;
        overflow: hidden;
        transition: all 0.6s ease;
        }    
        .section-title{    
            display: flex;
            position: relative;
            cursor: pointer;
            text-align: left;
            justify-content: space-between;
            align-items: center;
            font-size: var(--fs-tickets-st);
            line-height: var(--lh-tickets-st);
            padding: var(--tickets-st-padding);
            color: hsla(var(--theme-text-primary),1);
            }
            .ticket-io li.active .section-title{    
                color: hsla(var(--theme-white),1);
                padding: var(--tickets-st-padding-active);
                }
                .ticket-io li:nth-child(1).active .section-title p span, .ticket-io li:nth-child(1).active .section-title .price, 
                .ticket-io li:nth-child(2).active .section-title p span, .ticket-io li:nth-child(2).active .section-title .price, 
                .ticket-io li:nth-child(3).active .section-title p span, .ticket-io li:nth-child(3).active .section-title .price{
                    color: hsla(var(--theme-white),1);
                    }
            .section-title::after{    
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                pointer-events: none;
                opacity: 0.72;
                background: linear-gradient(180deg, hsla(var(--theme-ticket-shadow),0.24) -4%, hsla(var(--theme-ticket-shadow),0.12) 6%, hsla(var(--theme-ticket-shadow),0.06) 18%, hsla(var(--theme-ticket-shadow),0) 100%);
                mix-blend-mode: multiply;
                }
                .dark .section-title::after{
                    background: linear-gradient(180deg, hsla(var(--theme-ticket-shadow),0.48) -4%, hsla(var(--theme-ticket-shadow),0.30) 6%, hsla(var(--theme-ticket-shadow),0.18) 18%, hsla(var(--theme-ticket-shadow),0) 100%);
                    }
                .section-title::before,
                .ticket-io li.active .section-title:hover::before{    
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    pointer-events: none;
                    opacity: 0;    
                    }
                    .section-title:hover::before{
                        opacity: 0.18;        
                        }
                    .ticket-io li:nth-child(1) .section-title::after{
                        background: none;
                        }
            .section-title span{    
                font-size: var(--fs-tickets-st-span);
                line-height: var(--fs-tickets-st-span);
                }
            .section-title .price{    
                font-size: var(--fs-tickets-st-price);
                line-height: var(--fs-tickets-st-price);
                }
                .sold-out .section-title .price,
                .sold-out .ticket-title h4{
                    text-decoration: line-through;
                    opacity: 0.36;
                    }
        .ticket-title{    
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: var(--tickets-tt-gap);
            padding: var(--tickets-tt-padding);
            align-items: center;
            }
            .ticket-title h4{    
                font-size: var(--fs-tickets-tt-h4);
                line-height: var(--fs-tickets-tt-h4);
                color: hsla(var(--theme-text-primary),1);
                }                
            .ticket-title p{    
                font-size: var(--fs-tickets-tt-p);
                line-height: calc(var(--fs-tickets-tt-p) * 1.3);
                }
            .ticket-title .vat{    
                display: block;
                font-size: var(--fs-tickets-data);
                line-height: var(--lh-tickets-data);
                margin: 0 auto 3px;                
                opacity: 0.6;    
                }
        .section-content{
            position: relative;
            width: 100%;
            height: 0;
            flex-wrap: nowrap;
            overflow: hidden;
            }
            .section-content::after{
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;        
                pointer-events: none;                
                background: hsla(var(--theme-card-dark),1);
                opacity: 1;
                transition: all 0.15s linear;
                }                
                .ticket-io li.active .section-content::after{
                    opacity: 0;
                    }
            .ticket-io li.active .section-content{
                width: 100%;
                height: 100%;
                overflow: visible;
                }
                .section-content .ticket-title,
                .section-content .ticket-cta,
                .section-content .ticket-logo{
                    opacity: 0;
                    transition: opacity 0.3s linear;
                    }
                    .ticket-io li.active .section-content .ticket-title,
                    .ticket-io li.active .section-content .ticket-cta,
                    .ticket-io li.active .section-content .ticket-logo{
                        opacity: 1;
                        }
        .ticket-cta{
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: var(--tickets-tt-gap);
            padding: var(--tickets-tc-padding);
            align-items: center;
            }
            .ticket-cta h3{                    
                padding: 0 5%;
                }
            .ticket-cta p{    
                font-size: var(--fs-tickets-tt-p);
                line-height: calc(var(--fs-tickets-tt-p) * 1.48);
                }
            .ticket-cta .arrow{
                visibility: hidden;
                position: absolute;
                width: calc(var(--btn-cta-xl-height) * 0.85);
                height: calc(var(--btn-cta-xl-height) * 0.85);
                top: 5.75%;
                bottom: 0;
                left: 18%;
                margin: auto 0;
                }
                .pctd0{
                    opacity: 0;
                    stroke-width: 2px;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-miterlimit: 10;
                    stroke-dasharray: 500;
                    stroke-dashoffset: 500;
                    animation: dash-arrow-ticket 20s 0.5s cubic-bezier(0.42, 0.72, 0.12, 1.18) infinite;
                    }
                .ticket-cta .arrow:nth-child(2){
                    transform: rotate(180deg);
                    right: 18%;
                    left: auto;
                    }
                    .ticket-cta .arrow:nth-child(2)    .pctd0{
                        animation: dash-arrow-ticket 20s 1.25s cubic-bezier(0.42, 0.72, 0.12, 1.18) infinite;
                        }
                        .ticket-cta .arrow .pctd0{
                            animation: dash-arrow-ticket 20s 0.5s cubic-bezier(0.42, 0.72, 0.12, 1.18) infinite!important;
                            }
                            .ticket-cta .arrow:nth-child(2)    .pctd0{
                                animation: dash-arrow-ticket 20s 1.25s cubic-bezier(0.42, 0.72, 0.12, 1.18) infinite!important;
                                }
            .ticket-venue-date{        
                color: hsla(var(--theme-text-primary),0.6);
                padding-top:  calc(var(--tickets-gap) / 1.5);
                }
        .ticket-logo{
            display: none;
            margin: auto;
            filter: grayscale(100%);
            }
            .ticket-logo svg{ 
                opacity: 0.36;
                }
            .ticket-logo .pls1{ 
                fill: hsla(var(--theme-green-title),1);
                }
.ticket-detail-top,
.ticket-detail-bottom{
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 2px;
    top: -1px;
    left: 0;
    border-bottom: 1.5px dashed hsla(var(--theme-border-dark),1);
    }
    .ticket-detail-bottom{
        top: auto;
        bottom: -1px;
        }
    .ticket-detail-top::after,
    .ticket-detail-top::before,
    .ticket-detail-bottom::after,
    .ticket-detail-bottom::before{
        position: absolute;
        content: "";
        width: var(--tickets-detail-size);
        height: var(--tickets-detail-size);
        bottom: calc(0px - calc(var(--tickets-detail-size) / 2));
        left:  calc(0px - calc(var(--tickets-detail-size) / 2));
        border-radius: 100px;
        background: hsla(var(--theme-background),1);
        z-index: 10;
        pointer-events: none;
        box-shadow: inset 0 0 0 1.5px hsla(var(--theme-border-dark),1);
        }
        .ticket-detail-top::before,
        .ticket-detail-bottom::before{
            right: calc(0px - calc(var(--tickets-detail-size) / 2));
            left: auto;
            background: hsla(var(--theme-background),1);
            z-index: 10;
            }
    .ticket-io li.active .ticket-detail-top{
        visibility: visible;        
        }
.ticket-io .timer{
    gap: var(--tickets-gap);
    padding-top: calc(var(--tickets-gap) / 1.5);
    }
    .ticket-io .tick-tock{
        width: var(--tickets-width);
        }
        .ticket-io .tick-tock::after{
            right: calc(var(--tickets-gap-detail) - var(--tickets-gap));            
            opacity: 0.48;
            font-size: calc(var(--fs-tickets-number) / 1.25);
            line-height: calc(var(--lh-tickets-number) / 1.25);
            pointer-events: none;
            }
            .ticket-io .tick-tock:last-of-type::after{
                display: none;
                }
        .ticket-io .tick-tock span:first-of-type{
            font-size: var(--fs-tickets-number);
            line-height: var(--lh-tickets-number);
            color: hsla(var(--theme-text-primary),1);
            }
        .ticket-io .tick-tock span:last-of-type{
            opacity: 0.6;
            font-size: var(--fs-tickets-data);
            line-height: var(--lh-tickets-data);
            color: hsla(var(--theme-text-primary),1);
            }
.ticket-io li:nth-child(1) .section-title, .ticket-io li:nth-child(1).active .section-title, .ticket-io li:nth-child(1).active .section-title:hover, .ticket-io li:nth-child(1) .section-title::before, .ticket-1-active .highlight::after{ background: hsla(var(--theme-ticket-1-color),1);}
.ticket-io li:nth-child(1) .section-title{ background: var(--theme-ticket-1-background);}
.ticket-io li:nth-child(1) .ticket-title h3, .ticket-io li:nth-child(1) .ticket-title p, .ticket-io li:nth-child(1) .tick-tock::after, .ticket-io li:nth-child(1) .section-title p span, .ticket-io li:nth-child(1) .section-title .price{ color: hsla(var(--theme-ticket-1-color),1);}
.ticket-io li:nth-child(1) .pctd0{ fill: hsla(var(--theme-ticket-1-color),0.18); stroke: hsla(var(--theme-ticket-1-color),1);}
.ticket-1-active .hero-marquee b{ -webkit-text-fill-color: hsla(var(--theme-ticket-1-color),0.18);}            
.ticket-1-active .hero-marquee b::before{ -webkit-text-fill-color: hsla(var(--theme-ticket-1-color),0);    -webkit-text-stroke: 1px hsla(var(--theme-ticket-1-color),1);}
.ticket-1-active,
.ticket-1-active .ticket-detail-top::after,
.ticket-1-active .ticket-detail-top::before,
.ticket-1-active .ticket-detail-bottom::after,
.ticket-1-active .ticket-detail-bottom::before,
.ticket-1-active .ticket-detail-top::before,
.ticket-1-active .ticket-detail-bottom::before{
    background: hsla(var(--theme-ticket-1-underground),1);
    }
.ticket-io li:nth-child(2) .section-title, .ticket-io li:nth-child(2).active .section-title, .ticket-io li:nth-child(2).active .section-title:hover, .ticket-io li:nth-child(2) .section-title::before, .ticket-2-active .highlight::after{ background: hsla(var(--theme-ticket-2-color),1);}
.ticket-io li:nth-child(2) .section-title{ background: var(--theme-ticket-2-background);}
.ticket-io li:nth-child(2) .ticket-title h3, .ticket-io li:nth-child(2) .ticket-title p, .ticket-io li:nth-child(2) .tick-tock::after, .ticket-io li:nth-child(2) .section-title p span, .ticket-io li:nth-child(2) .section-title .price{ color: hsla(var(--theme-ticket-2-color),1);}
.ticket-io li:nth-child(2) .pctd0{ fill: hsla(var(--theme-ticket-2-color),0.18); stroke: hsla(var(--theme-ticket-2-color),1);}
.ticket-2-active .hero-marquee b{ -webkit-text-fill-color: hsla(var(--theme-ticket-2-color),0.18);}            
.ticket-2-active .hero-marquee b::before{ -webkit-text-fill-color: hsla(var(--theme-ticket-2-color),0);    -webkit-text-stroke: 1px hsla(var(--theme-ticket-2-color),1);}
.ticket-2-active,
.ticket-2-active .ticket-detail-top::after,
.ticket-2-active .ticket-detail-top::before,
.ticket-2-active .ticket-detail-bottom::after,
.ticket-2-active .ticket-detail-bottom::before,
.ticket-2-active .ticket-detail-top::before,
.ticket-2-active .ticket-detail-bottom::before{
    background: hsla(var(--theme-ticket-2-underground),1);
    }
.ticket-io li:nth-child(3) .section-title, .ticket-io li:nth-child(3).active .section-title, .ticket-io li:nth-child(3).active .section-title:hover, .ticket-io li:nth-child(3) .section-title::before, .ticket-3-active .highlight::after{ background: hsla(var(--theme-ticket-3-color),1);}
.ticket-io li:nth-child(3) .section-title{ background: var(--theme-ticket-3-background);}
.ticket-io li:nth-child(3) .ticket-title h3, .ticket-io li:nth-child(3) .ticket-title p, .ticket-io li:nth-child(3) .tick-tock::after, .ticket-io li:nth-child(3) .section-title p span, .ticket-io li:nth-child(3) .section-title .price{ color: hsla(var(--theme-ticket-3-color),1);}
.ticket-io li:nth-child(3) .pctd0{ fill: hsla(var(--theme-ticket-3-color),0.18); stroke: hsla(var(--theme-ticket-3-color),1);}
.ticket-3-active .hero-marquee b{ -webkit-text-fill-color: hsla(var(--theme-ticket-3-color),0.18);}            
.ticket-3-active .hero-marquee b::before{ -webkit-text-fill-color: hsla(var(--theme-ticket-3-color),0);    -webkit-text-stroke: 1px hsla(var(--theme-ticket-3-color),1);}
.ticket-3-active,
.ticket-3-active .ticket-detail-top::after,
.ticket-3-active .ticket-detail-top::before,
.ticket-3-active .ticket-detail-bottom::after,
.ticket-3-active .ticket-detail-bottom::before,
.ticket-3-active .ticket-detail-top::before,
.ticket-3-active .ticket-detail-bottom::before{
    background: hsla(var(--theme-ticket-3-underground),1);
    }

/* =============================================================================
   FLIP COUNTDOWN
   ========================================================================== */

.flip-countdown{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--flip-gap);
    justify-items: center;
    align-items: stretch;
    max-width: 100%;
    width: fit-content;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    }
    .flip-countdown .unit{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--unit-gap);
        overflow: visible;
        }
    .flip-countdown .unit-label{
        font-size: var(--fs-card-title) !important;
        line-height: var(--lh-card-title) !important;
        letter-spacing: calc(var(--ls-md) * var(--ls-mul));
        color: hsla(var(--theme-text-primary), 1);
        }
    .flip-countdown .digits{
        display: flex;
        gap: clamp(6px, calc(var(--card-w) * 0.16), 18px);
        overflow: visible;
        }
    .flip-countdown .flip{
        position: absolute;
        inset: 0;
        padding: var(--countdown-pixel-border);
        background: hsla(var(--theme-text-primary), 1);
        clip-path: polygon(0 var(--countdown-pixel-border),var(--countdown-pixel-border) var(--countdown-pixel-border),var(--countdown-pixel-border) 0,calc(100% - var(--countdown-pixel-border)) 0,calc(100% - var(--countdown-pixel-border)) var(--countdown-pixel-border),100% var(--countdown-pixel-border),100% calc(100% - var(--countdown-pixel-border)),calc(100% - var(--countdown-pixel-border)) calc(100% - var(--countdown-pixel-border)),calc(100% - var(--countdown-pixel-border)) 100%,var(--countdown-pixel-border) 100%,var(--countdown-pixel-border) calc(100% - var(--countdown-pixel-border)),0 calc(100% - var(--countdown-pixel-border)));
        perspective: 1200px;
        perspective-origin: 50% 50%;
        }
    .flip-countdown .flip-wrapper::before,
    .flip-countdown .flip-wrapper::after{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: calc(var(--countdown-pixel-unit) * 1.5);
        height: calc(var(--card-h) * 0.12);
        background: hsla(var(--color-yellow-600), 1);
        z-index: 25;
        }
        .flip-countdown .flip-wrapper::before{
            left: calc(var(--countdown-pixel-unit) * -1.5);
            clip-path: polygon(0 0,calc(100% - var(--countdown-pixel-unit)) 0,calc(100% - var(--countdown-pixel-unit)) var(--countdown-pixel-unit),100% var(--countdown-pixel-unit),100% calc(100% - var(--countdown-pixel-unit)),calc(100% - var(--countdown-pixel-unit)) calc(100% - var(--countdown-pixel-unit)),calc(100% - var(--countdown-pixel-unit)) 100%,0 100%);
            }
    .flip-countdown .flip-wrapper::after{
        right: calc(var(--countdown-pixel-unit) * -1.5);
        clip-path: polygon(
        0 var(--countdown-pixel-unit),
        var(--countdown-pixel-unit) var(--countdown-pixel-unit),
        var(--countdown-pixel-unit) 0,
        100% 0,
        100% 100%,
        var(--countdown-pixel-unit) 100%,
        var(--countdown-pixel-unit) calc(100% - var(--countdown-pixel-unit)),
        0 calc(100% - var(--countdown-pixel-unit))
        );
        }
    .flip-countdown .panel,
    .flip-countdown .fold,
    .flip-countdown .unfold{
        position: absolute;
        left: var(--countdown-pixel-border);
        right: var(--countdown-pixel-border);
        height: calc(50% - var(--countdown-pixel-inner));
        overflow: hidden;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        will-change: transform;
        }
        .flip-countdown .top{
            top: var(--countdown-pixel-border);
            background: linear-gradient(180deg,hsla(var(--color-yellow-500), 1) 0%,hsla(var(--color-yellow-600), 1) 100%);
            border-bottom: var(--countdown-pixel-inner) solid hsla(var(--theme-black), 0.3);
            z-index: 5;
            }
        .flip-countdown .bottom{
            bottom: var(--countdown-pixel-border);
            background: linear-gradient(180deg,hsla(var(--color-yellow-600), 1) 0%,hsla(var(--color-yellow-500), 1) 100%);
            border-top: var(--countdown-pixel-inner) solid hsla(var(--theme-black), 0.5);
            z-index: 5;
            }
        .flip-countdown .fold{
            top: var(--countdown-pixel-border);
            transform-origin: center bottom;
            background: linear-gradient(180deg,hsla(var(--color-yellow-500), 1) 0%,hsla(var(--color-yellow-600), 1) 100%);
            z-index: 15;
            }
        .flip-countdown .unfold{
            bottom: var(--countdown-pixel-border);
            transform-origin: center top;
            background: linear-gradient(180deg,hsla(var(--color-yellow-600), 1) 0%,hsla(var(--color-yellow-500), 1) 100%);
            z-index: 14;
            }
        .flip-countdown .face{
            position: absolute;
            left: 0;
            width: 100%;
            height: var(--card-h);
            display: flex;
            align-items: center;
            justify-content: center;
            }
        .flip-countdown .top .face,
        .flip-countdown .fold .face{
            top: 0;
            }
        .flip-countdown .bottom .face,
        .flip-countdown .unfold .face {
            bottom: calc(0px - calc(var(--countdown-pixel-border) * 2));
            }
        .flip-countdown .digit{
            font-size: var(--font-size-digit);
            line-height: 1;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1;
            color: hsla(var(--color-black-dark), 1);  
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
            }
            .flip-countdown .lighting-overlay{
                position: absolute;
                inset: 0;
                pointer-events: none;
                opacity: 0;
                background: radial-gradient(ellipse at center,hsla(var(--theme-white), 0.15) 0%,hsla(var(--theme-white), 0.05) 40%,hsla(var(--theme-black), 0.2) 100%);
                }
            .flip-countdown .divider {
                position: absolute;
                left: var(--countdown-pixel-border);
                right: var(--countdown-pixel-border);
                top: 50%;
                height: calc(var(--countdown-pixel-border) / 1.5);
                background: hsla(var(--theme-background), 0.48);
                z-index: 21;
                transform: translateY(calc(var(--countdown-pixel-inner) * -1));
                pointer-events: none;
                backface-visibility: hidden;
                transform-style: flat;
                isolation: isolate;
                }
            .flip-countdown .flip-wrapper{
                position: relative;
                width: var(--card-w);
                height: var(--card-h);
                overflow: visible;
                }

/* =============================================================================
   SESSIONS
   ========================================================================== */

#sessions.wrapper{
    width: 100%;
    padding: 0;
    }
    #sessions #content > div{ display: none;}
    #sessions #content > div.visible{ display: block;}
#tabs{
    display: flex;
    position: relative;
    width: 100%;
    margin: 0 auto!important;
    list-style: none;
    padding: calc(var(--header-margin) * 1.5);
    left: 0;
    right: 0;
    z-index: 102;
    }
    #tabs::before{
        position: absolute;
        content: "";
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, hsla(var(--theme-violet-title),0.06) 0%, hsla(var(--theme-violet-title),0.06) 0%), linear-gradient(0deg, hsla(var(--theme-white),0.6) 0%, hsla(var(--theme-white),0.6) 0%);
        box-shadow: var(--box-shadow-medium);    
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        }
        .dark #tabs::before{
            background: linear-gradient(0deg, hsla(var(--theme-violet-title),0.22) 0%, hsla(var(--theme-violet-title),0.22) 0%), linear-gradient(0deg, hsla(var(--theme-black-dark),0.72) 0%, hsla(var(--theme-black-dark),0.72) 0%);
            }
    #tabs.sticky{
        position: fixed;
        top: 0; 
        padding-top: calc(var(--header-height) + calc(var(--header-margin) * 2.5));
        }
    #tabs div{
        position: relative;
        display: flex;
        width: 100%;
        max-width: 372px;
        height: calc(var(--header-height) - var(--header-margin));
        border-radius: var(--header-border-radius);    
        background: linear-gradient(0deg, hsla(var(--theme-violet-title),0.16) 0%, hsla(var(--theme-violet-title),0.16) 0%), linear-gradient(0deg, hsla(var(--theme-white),0.6) 0%, hsla(var(--theme-white),0.6) 0%);
        border: 4px solid hsla(var(--theme-white),0);
        margin: auto;
        }
        .dark #tabs div{
            background: linear-gradient(0deg, hsla(var(--theme-violet-title),0.3) 0%, hsla(var(--theme-violet-title),0.3) 0%), linear-gradient(0deg, hsla(var(--theme-black-dark),0.6) 0%, hsla(var(--theme-black-dark),0.6) 0%);
            }
        #tabs li{
            display: inline-flex;
            width: 50%;
            }
            #tabs a{
                display: flex;
                position: relative;
                width: 100%;
                font-size: var(--fs-button-medium);                
                line-height: calc(var(--fs-button-medium) * 1.36);
                align-items: center;
                justify-content: center;
                color: hsla(var(--theme-text-primary),0.6);
                text-decoration: none;
                padding-top: 2px;
                /*transition: color 0.3s ease;*/
                }
                #tabs .button{
                    display: none;
                    }
        #tabs div::before{
            position: absolute;
            content: "";
            width: 50%; 
            height: calc(var(--header-height) - calc(var(--header-margin) * 2.5));
            top: 0;
            left: 0;
            border-radius: calc(var(--header-border-radius) - 4px);
            background: hsla(var(--theme-card-dark),1);
            box-shadow: var(--box-shadow-medium);
            }

                        #tabs div:has(> li > a[data-target="tab1"].active-tab)::before{ transform: translateX(0%);}
                        #tabs div:has(> li > a[data-target="tab2"].active-tab)::before{ transform: translateX(100%);}

        #tabs a:hover,
        #tabs a:focus{
            color: hsla(var(--theme-text-primary),1);
            }
            #tabs a.active-tab{
                color: hsla(var(--theme-violet-title), 1);
                font-weight: 700; 
                }
table{    
      width: 100%;
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      table-layout: fixed;
    }
table tr{
    display: block;
      border-bottom: 1.5px solid hsla(var(--theme-icon),0.12);
    background: hsla(var(--theme-violet-background),1);
    padding: var(--sessions-padding);
    }
table thead{
    display: none!important;
    }
table th,
table td{
    display: block;
    position: relative;
    width: 100%;
    padding-left: var(--sessions-td-pl);
    margin: var(--sessions-td-ptb) 0;
    box-sizing: border-box;    
    }
    table th p{
        color: hsla(var(--theme-violet-title),1);
        }
        table th:nth-child(2) p{ color: hsla(var(--theme-violet-title),1);}
        table th:nth-child(3) p{ color: hsla(var(--theme-blue-title),1);}
        table th:nth-child(4) p{ color: hsla(var(--theme-red-title),1);}
        table th:nth-child(5) p{ color: hsla(var(--theme-orange-title),1);}
        table th:nth-child(6) p{ color: hsla(var(--theme-yellow-title),1);}
        table th:nth-child(7) p{ color: hsla(var(--theme-green-title),1);}
            table.day-1 th:nth-child(6) p{ color: hsla(var(--theme-green-icon-bg),1);}
            table.day-1 th:nth-child(7) p{ color: hsla(var(--theme-green-title),1);}
    table th::after,
    table td::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: calc(100% + 4px);
        border-radius: 100px;
        background: hsla(var(--theme-violet-title),0.84);
        }
        table th:nth-child(2)::after, table td:nth-child(2)::after{ background: hsla(var(--theme-violet-title),0.84);}
        table th:nth-child(3)::after,table td:nth-child(3)::after{ background: hsla(var(--theme-blue-title),0.84);}
        table th:nth-child(4)::after, table td:nth-child(4)::after{ background: hsla(var(--theme-red-title),0.84);}
        table th:nth-child(5)::after, table td:nth-child(5)::after{ background: hsla(var(--theme-orange-title),0.84);}
        table th:nth-child(6)::after, table td:nth-child(6)::after{ background: hsla(var(--theme-yellow-title),0.84);}
        table th:nth-child(7)::after, table td:nth-child(7)::after{    background: hsla(var(--theme-green-title),0.84);}
            table.day-1 th:nth-child(6)::after,    table.day-1 td:nth-child(6)::after{ background: hsla(var(--theme-green-icon-bg),0.84);}
            table.day-1 th:nth-child(7)::after,    table.day-1 td:nth-child(7)::after{    background: hsla(var(--theme-green-title),0.84);}
    table td::before{
        position: absolute;
        content: attr(data-label);
        left: 18px;
        top: 10px;
        font-size: var(--fs-button-medium);
        line-height: var(--fs-button-medium);
        color: hsla(var(--theme-violet-title),1);
        }
        table td:nth-child(2)::before, table td:nth-child(2) strong{ color: hsla(var(--theme-violet-title),1);}
        table td:nth-child(3)::before, table td:nth-child(3) strong{ color: hsla(var(--theme-blue-title),1);}
        table td:nth-child(4)::before, table td:nth-child(4) strong{ color: hsla(var(--theme-red-title),1);}
        table td:nth-child(5)::before, table td:nth-child(5) strong{ color: hsla(var(--theme-orange-title),1);}
        table td:nth-child(6)::before, table td:nth-child(6) strong{ color: hsla(var(--theme-yellow-title),1);}
        table td:nth-child(7)::before, table td:nth-child(7) strong{ color: hsla(var(--theme-green-title),1);}
            table.day-1 td:nth-child(6)::before, table.day-1 td:nth-child(6) strong{ color: hsla(var(--theme-green-icon-bg),1);}
            table.day-1 td:nth-child(7)::before, table.day-1 td:nth-child(7) strong{ color: hsla(var(--theme-green-title),1);}
    table td:first-child{
        font-size: calc(var(--fs-button-xlarge) * 1.125);
        line-height: calc(var(--fs-button-xlarge) * 1.25);
        color: hsla(var(--theme-text-primary),0.48);
        padding-left: 0;
        }
        table td:first-child::after{
            display: none;
            }
table p{
    padding: 6px 0 0;
    }
    table p a{
        color: hsla(var(--theme-text-primary),1);
        text-decoration: none;
        }
    table p:first-child{
        font-size: var(--fs-button-large);
        line-height: calc(var(--fs-button-large) * 1.36);
        font-weight: 700;
        padding: 32px 0 0;
        }
        table td.no-room p:first-child{
            padding: 6px 0 0;
            }
            table td.no-room p:first-child span b{
                display: inline-flex;
                transform: scale(1.3)
                }
        table p:first-child i{
            font-size: var(--fs-button-large);                
            line-height: calc(var(--fs-button-large) * 1.36);
            font-weight: 400;
            font-style: normal;
            color: hsla(var(--theme-violet-title),1);
            }
            table td:nth-child(2) p:first-child i{ color: hsla(var(--theme-violet-title),1);}
            table td:nth-child(3) p:first-child i{ color: hsla(var(--theme-blue-title),1);}
            table td:nth-child(4) p:first-child i{ color: hsla(var(--theme-red-title),1);}
            table td:nth-child(5) p:first-child i{ color: hsla(var(--theme-orange-title),1);}
            table td:nth-child(6) p:first-child i{ color: hsla(var(--theme-yellow-title),1);}
            table td:nth-child(7) p:first-child i{ color: hsla(var(--theme-green-title),1);}
                table.day-1 td:nth-child(6) p:first-child i{ color: hsla(var(--theme-green-icon-bg),1);}
                table.day-1 td:nth-child(7) p:first-child i{ color: hsla(var(--theme-green-title),1);}
    table p:nth-child(2),
    table p:nth-child(2) a{        
        font-size: var(--fs-button-medium);                
        line-height: calc(var(--fs-button-medium) * 1.36);
        color: hsla(var(--theme-text-primary),0.72);
        }
        table p a:hover{ color: hsla(var(--theme-violet-title),1);}
            table td:nth-child(2) a:hover{ color: hsla(var(--theme-violet-title),1);}
            table td:nth-child(3) a:hover{ color: hsla(var(--theme-blue-title),1);}
            table td:nth-child(4) a:hover{ color: hsla(var(--theme-red-title),1);}
            table td:nth-child(5) a:hover{ color: hsla(var(--theme-orange-title),1);}
            table td:nth-child(6) a:hover{ color: hsla(var(--theme-yellow-title),1);}
            table td:nth-child(7) a:hover{ color: hsla(var(--theme-green-title),1);}
                table.day-1 td:nth-child(6) a:hover{ color: hsla(var(--theme-green-icon-bg),1);}
                table.day-1 td:nth-child(7) a:hover{ color: hsla(var(--theme-green-title),1);}
    table td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-black-light),0.24) 0%, hsla(var(--theme-black-light),0.24) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    table td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-icon),0.06), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-icon),0.06), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-icon),0.06), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    table td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-icon),0.06), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-icon),0.06), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail{    
    background-color: hsla(var(--theme-violet-background),1);
    background-image: radial-gradient(hsla(var(--theme-icon),0.18) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-icon),0.18) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-icon),0.06), hsla(var(--theme-icon),0.06)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    box-shadow: inset 0 0 0 3px hsla(var(--theme-icon),0.06), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-icon),0.12), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-icon),0.12)
    }
    .row-detail td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-black-light),0.24) 0%, hsla(var(--theme-black-light),0.24) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-icon),0.06), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }    
    .row-detail td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-icon),0.06), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-icon),0.06), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-icon),0.06), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-icon),0.06), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-icon),0.06), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.orange{
    background-image: radial-gradient(hsla(var(--theme-orange-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-orange-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-orange-title),0.06), hsla(var(--theme-orange-title),0.06)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-orange-title),0.06), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-orange-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-orange-title),0.24)
    }
    .row-detail.orange td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-orange-title),0.48) 0%, hsla(var(--theme-orange-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-orange-title),0.06), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.orange td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-orange-title),0.06), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-orange-title),0.06), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-orange-title),0.06), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.orange td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-orange-title),0.06), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-orange-title),0.06), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.red{
    background-image: radial-gradient(hsla(var(--theme-red-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-red-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-red-title),0.06), hsla(var(--theme-red-title),0.06)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-red-title),0.06), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-red-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-red-title),0.18)
    }
    .row-detail.red td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-red-title),0.48) 0%, hsla(var(--theme-red-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-red-title),0.06), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.red td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-red-title),0.06), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-red-title),0.06), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-red-title),0.06), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.red td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-red-title),0.06), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-red-title),0.06), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.magenta{
    background-image: radial-gradient(hsla(var(--theme-magenta-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-magenta-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-magenta-title),0.06), hsla(var(--theme-magenta-title),0.06)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-magenta-title),0.06), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-magenta-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-magenta-title),0.18)
    }
    .row-detail.magenta td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-magenta-title),0.48) 0%, hsla(var(--theme-magenta-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-magenta-title),0.06), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.magenta td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-magenta-title),0.06), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-magenta-title),0.06), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-magenta-title),0.06), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.magenta td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-magenta-title),0.06), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-magenta-title),0.06), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.orange{
    background-image: radial-gradient(hsla(var(--theme-orange-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-orange-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-orange-title),0.06), hsla(var(--theme-orange-title),0.06)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-orange-title),0.06), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-orange-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-orange-title),0.18)
    }
    .row-detail.orange td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-orange-title),0.48) 0%, hsla(var(--theme-orange-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-orange-title),0.06), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.orange td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-orange-title),0.06), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-orange-title),0.06), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-orange-title),0.06), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.orange td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-orange-title),0.06), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-orange-title),0.06), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.yellow{
    background-image: radial-gradient(hsla(var(--theme-yellow-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-yellow-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-yellow-title),0.09), hsla(var(--theme-yellow-title),0.09)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-yellow-title),0.09), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-yellow-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-yellow-title),0.18)
    }
    .row-detail.yellow td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-yellow-title),0.48) 0%, hsla(var(--theme-yellow-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-yellow-title),0.09), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.yellow td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-yellow-title),0.09), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-yellow-title),0.09), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-yellow-title),0.09), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.yellow td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-yellow-title),0.09), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-yellow-title),0.09), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.green{
    background-image: radial-gradient(hsla(var(--theme-green-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-green-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-green-title),0.09), hsla(var(--theme-green-title),0.09)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-green-title),0.09), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-green-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-green-title),0.18)
    }
    .row-detail.green td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-green-title),0.48) 0%, hsla(var(--theme-green-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-green-title),0.09), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.green td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-green-title),0.09), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-green-title),0.09), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-green-title),0.09), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.green td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-green-title),0.09), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-green-title),0.09), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.blue{
    background-image: radial-gradient(hsla(var(--theme-blue-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-blue-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-blue-title),0.09), hsla(var(--theme-blue-title),0.09)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-blue-title),0.09), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-blue-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-blue-title),0.18)
    }
    .row-detail.blue td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-blue-title),0.48) 0%, hsla(var(--theme-blue-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-blue-title),0.09), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.blue td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-blue-title),0.09), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-blue-title),0.09), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-blue-title),0.09), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.blue td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-blue-title),0.09), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-blue-title),0.09), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }
.row-detail.violet{
    background-image: radial-gradient(hsla(var(--theme-violet-title),0.36) 0.84px, transparent 0.84px), radial-gradient(hsla(var(--theme-violet-title),0.36) 0.84px, transparent 0.84px),   
                      linear-gradient(0deg, hsla(var(--theme-violet-title),0.09), hsla(var(--theme-violet-title),0.09)), linear-gradient(0deg, hsla(var(--theme-violet-background),1), hsla(var(--theme-violet-background),1));
    box-shadow: inset 0 0 0 3px hsla(var(--theme-violet-title),0.09), inset 0 0 0 3px hsla(var(--theme-violet-background),1), 0 -1.5px 0 0 hsla(var(--theme-violet-title),0.24), 0 -1.5px 0 0 hsla(var(--theme-violet-background),1);
    border-color: hsla(var(--theme-violet-title),0.18)
    }
    .row-detail.violet td.no-room::after{            
        background: linear-gradient(0deg, hsla(var(--theme-violet-title),0.48) 0%, hsla(var(--theme-violet-title),0.48) 0%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 0%);
        box-shadow: 0 0 2px 2px hsla(var(--theme-violet-title),0.09), 0 0 2px 2px hsla(var(--theme-violet-background),1);
        }
    .row-detail.violet td:first-child span{
        box-shadow: 0 -2px 12px 2px hsla(var(--theme-violet-title),0.09), 0 -2px 12px 2px hsla(var(--theme-violet-background),1), 0 -3px 0 2px hsla(var(--theme-violet-title),0.09), 0 -3px 0 2px hsla(var(--theme-violet-background),1),  
                    inset 0 0 0 16px hsla(var(--theme-violet-title),0.09), inset 0 0 0 16px hsla(var(--theme-violet-background),1);
        }    
    .row-detail.violet td.no-room p:first-child span{
        box-shadow: 0 0 12px hsla(var(--theme-violet-title),0.09), 0 0 12px hsla(var(--theme-violet-background),1), inset 0 0 0 12px hsla(var(--theme-violet-title),0.09), inset 0 0 0 12px hsla(var(--theme-violet-background),1);
        }

/* =============================================================================
   SPEAKERS
   ========================================================================== */

.speakers h4{
    margin-top: var(--grid-item-gap);
    }
.speakers h5{
    margin-bottom: var(--grid-item-gap);
    }
.speaker{
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    background: hsla(var(--theme-background),1);
    }
    .speaker img{
        width: 100%; 
        aspect-ratio: 1 / 1; 
        object-fit: cover;
        object-position: center; 
        display: block;
        filter: grayscale(100%) contrast(100%) brightness(100%);
        mix-blend-mode: multiply;
        overflow: hidden;
        border-radius: var(--border-radius);
        }
        .dark .speaker img{
            mix-blend-mode: luminosity;
            }
    .speaker p{
        position: absolute;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: var(--fs-speakers-padding);
        overflow: hidden;
        border-radius: var(--border-radius);
        background: linear-gradient(0deg, hsla(var(--theme-deep-blue-title),0.84) 0%, hsla(var(--theme-deep-blue-title),0.6) 24%, hsla(var(--theme-deep-blue-title),0.24) 60%, hsla(var(--theme-deep-blue-background),0) 100%);        
        }        
        .speaker p span:first-child{
            font-size: var(--fs-speakers-name);
            line-height: calc(var(--fs-speakers-name) * 1.12);
            color: hsla(var(--theme-white),1);
            }
        .speaker p span:last-child{
            font-size: var(--fs-speakers-company);
            line-height: calc(var(--fs-speakers-company) * 1.48);
            color: hsla(var(--theme-white),0.6);
            }
    .speakers-art{
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        position: absolute;
        overflow: hidden;
        display: grid;
        place-items: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        }
        .speakers-art::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, hsla(var(--theme-green-background-tint),0) 36%, hsla(var(--theme-green-background-tint),1) 100%), radial-gradient(circle, hsla(var(--theme-green-title),0.24) 36%, hsla(var(--theme-green-title),0) 100%);            
            transition: all 0.36s ease-in-out;
            opacity: 0;
            }
            .speakers-deco{ 
                display: none; 
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                font-family: "input-mono", monospace;
                font-size: 0.85rem;
                font-weight: 700;
                word-wrap: break-word;
                line-height: 1.15;
                color: hsla(var(--theme-green-icon-bg),1);
                opacity: 0;    
                webkit-mask-image: radial-gradient(360px circle at var(--x, 50%) var(--y, 50%), black 20%, hsla(0, 0, 0, 0.25), transparent);
                mask-image: radial-gradient(360px circle at var(--x, 50%) var(--y, 50%), black 20%, hsla(0, 0, 0, 0.25), transparent);
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                transition: opacity 0.3s ease;
                }    
        .speaker:hover .speakers-art::after{
            opacity: 1;
            }
.speaker-info p,
.speaker-info li{
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    }
.speaker-social{
    display: table;
    position: relative;
    width: 100%;
    vertical-align: top;
    text-align: left;
    margin-top: 24px;
    }
    .speaker-social li{
        display: block;
        width: 100%;
        height: auto;
        font-size: var(--fs-body-xs);
        line-height: var(--lh-body-xs);
        padding: 12px 6px;
        box-sizing: border-box;
        vertical-align: top;
        border-top: 1px solid hsla(var(--theme-border),0.48);
        }
        .speaker-social li:first-child{
            border-top: 1.5px solid hsla(var(--theme-border),1);
            }
        .speaker-social li:last-child{
            border-bottom: 1.5px solid hsla(var(--theme-border),1);
            }
        .speaker-social a{
            display: block;
            width: 100%;
            height: auto;
            text-decoration: none;
            word-break: break-word;
            transition: var(--transition-old-school);
            }
            .speaker-social a:hover{
                color: hsla(var(--theme-green-title),1);
                transition: var(--transition-old-school);
                }
            .speaker-social a strong{
                color: hsla(var(--theme-green-title),1);
                }

/* =============================================================================
   WORKSHOPS
   ========================================================================== */

.workshops{
    color: hsla(var(--theme-text-primary),1);
    background: hsla(var(--theme-magenta-background),1);
    }
    .workshops h2{
        color: hsla(var(--theme-magenta-title),1);
        }
    .workshops .button-icon-color{
        stroke: hsla(var(--theme-magenta-title),1);
        }
.workshops.list{
    background: hsla(var(--theme-magenta-background-tint),0.12);
    }
.workshops-features{
    display: flex;
    flex-direction: column;
    flex: 100%;
    gap: var(--grid-item-gap);
    box-sizing: border-box;        
    padding: var(--grid-gap) 0;
    }
    .workshops-features li{
        display: flex;
        text-align: left;
        gap: calc(var(--grid-item-gap) / 2);
        }
        .workshops-features li svg{
            width: 24px;
            height: auto;
            margin-top: -3px;
            }
.workshops-list{
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-gap) / 1.5);
    box-sizing: border-box;
    margin-bottom: calc(var(--grid-gap) / 1.5);
    place-content: center;
    }    
    .workshops-list div{
        display: flex;
        flex-direction: column;
        flex: 100%;
        text-align: left;
        align-content: center;
        border-radius: var(--border-radius);
        gap: var(--grid-item-gap);
        box-sizing: border-box;        
        padding: var(--padding-content-small);
        place-content: space-between;
        background: linear-gradient(0deg, hsla(var(--theme-magenta-title),0.09) 0%, hsla(var(--theme-magenta-title),0.09) 100%), linear-gradient(0deg, hsla(var(--theme-magenta-background),1) 0%, hsla(var(--theme-magenta-background),1) 100%);        
        }    
        .workshops.list .workshops-list div{
            background: hsla(var(--theme-magenta-card),1);
            }
        .workshops-list div p{
            font-size: var(--fs-body-xs);
            line-height: var(--lh-body-xs);
            color: hsla(var(--theme-magenta-title),1);
            }
    .workshops-list h5{
        position: relative;
        font-size: var(--fs-h5);
        line-height: var(--lh-h5);
        margin-top: 6px;
        padding-left: 18px;
        }
        .workshops-list h5::after{
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 3px;
            height: 95%;
            border-radius: var(--border-radius);
            background: hsla(var(--theme-magenta-title),1);
            }
    .workshops-list .date,
    .workshops-list .price{
        color: hsla(var(--theme-text-primary),1);
        }
        .workshops-list .price{    
            position: relative;
            font-size: var(--fs-h4);
            line-height: var(--lh-h4);
            padding: calc(var(--grid-item-gap) / 2) 0 calc(var(--grid-item-gap) / 1.5);
            }
        .workshops-list .vat{    
            position: absolute;
            height: fit-content;
            font-size: var(--fs-tickets-data);
            line-height: var(--lh-tickets-data);
            vertical-align: middle;
            opacity: 0.6;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto 0;
            }
    .workshops-list .button{
        width: 100%;
        }
.workshop-place,
.workshop-place .top,
.workshop-place .bottom{    
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    }
    .workshop-place{    
        background: hsla(var(--theme-magenta-background-tint),0.12);
        }
    .workshop-place .bottom{    
        gap: var(--grid-item-gap);
        }
        .img-wp{
            position: relative;
            height: fit-content;
            margin-top: var(--info-img-venue-mt);
            z-index: -1;
            opacity: 0.12;
            border-radius: var(--border-radius);
            background: hsla(var(--theme-magenta-title),0.12);
            }
            .img-wp img{
                mix-blend-mode: overlay;
                filter: grayscale(100%) contrast(144%) brightness(140%);    
                border-radius: var(--border-radius);
                opacity: 0.24;
                }
.workshops-price{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--padding-content) / 2);
    padding: var(--grid-item-gap);
    margin: var(--grid-item-gap) 0;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    background: hsla(var(--theme-magenta-card),1);
    box-shadow: var(--box-shadow-card);    
    z-index: 100;
    }
    .workshops-price .price{    
        position: relative;
        width: 100%;
        font-size: var(--fs-h4);
        line-height: var(--lh-h4);
        padding: 0 6px;
        }
        .workshops-price .vat{    
            position: absolute;
            height: fit-content;
            font-size: var(--fs-tickets-data);
            line-height: var(--lh-tickets-data);
            vertical-align: middle;
            opacity: 0.6;
            top: 0;
            right: 6px;
            bottom: 0;
            margin: auto 0;
            }
.hero-marquee-price{
    position: relative;
    display: flex;
    width: 0%;
    height: 0%;
    visibility: hidden;
    overflow: hidden;
    transform: rotate(180deg);
    margin-bottom: -6px;
    }
    .hero-marquee-price::after{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, hsla(var(--theme-magenta-card),1) 0%, hsla(var(--theme-magenta-card),0) 8%, hsla(var(--theme-magenta-card),0) 92%, hsla(var(--theme-magenta-card),1) 100%);
        }
    .hero-marquee-price .hero-marquee{
        font-size: var(--fs-hero-marquee-price);
        line-height: var(--fs-hero-marquee-price);
        letter-spacing: var(--ls-hero-marquee-price);
        top: var(--tp-hero-marquee-price);
        }
        .hero-marquee-price .hero-marquee b{
            background: linear-gradient(hsla(var(--theme-magenta-title),1),hsla(var(--theme-magenta-title),1)) no-repeat 0 0;
            background-size: 0 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: hsla(var(--theme-magenta-title),0.12);
            }            
            .hero-marquee-price .hero-marquee b::before{
                background-size: 100% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: hsla(var(--theme-magenta-title),0);
                -webkit-text-stroke: 1px hsla(var(--theme-magenta-title),0.84);
                }
.workshop h4,
.session h4{
    margin-top: var(--grid-item-gap);
    }

/* =============================================================================
   SPONSORS
   ========================================================================== */

.sponsors{
    text-align: center;
    }
    .sponsors-content{
        display: flex;
        width: 100%;
        min-width: 100%;
        flex-direction: column;
        overflow: hidden;
        justify-content: center;
        gap: 12px;
        box-sizing: border-box;
        }
        .sponsors-content h3{
            margin-top: calc(var(--grid-gap) * 1.5);
            }
        .platinum h3{ color: hsla(var(--theme-platinum),1);}
        .gold h3{ color: hsla(var(--theme-gold),1);}
        .silver h3{ color: hsla(var(--theme-silver),1);}
        .bronze h3{ color: hsla(var(--theme-bronze),1);}
        .logos{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--logos-gap);
            box-sizing: border-box;            
            }
            .logo{
                position: relative;
                width: calc(var(--logos-width) - var(--logos-gap-img));
                padding-top: calc(var(--logos-width) - var(--logos-gap-img));
                background: hsla(var(--theme-card),1);
                border-radius: var(--border-radius);
                }
                .past-sponsors .logo{ border: var(--button-border) solid hsla(var(--theme-text-primary),1);    }
                .platinum .logo{
                    width: calc(var(--logos-width-platinum) - var(--logos-gap-img));
                    padding-top: calc(var(--logos-width-platinum) - var(--logos-gap-img));
                    }
                .gold .logo{
                    width: calc(var(--logos-width-gold) - var(--logos-gap-img));
                    padding-top: calc(var(--logos-width-gold) - var(--logos-gap-img));
                    }
                    .gold.odd .logo{
                        width: calc(var(--logos-width-gold-odd) - var(--logos-gap-img));
                        }
                    .silver.odd .logo{
                        width: calc(var(--logos-width-silver-odd) - var(--logos-gap-img));
                        }
                .logo svg{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    }
                    .pls0{
                        fill: hsla(var(--theme-icon),1);
                        }
.past-sponsors, .sponsors-info{
    position: relative;
    color: hsla(var(--themetext-primary),1);
    background: hsla(var(--theme-orange-background),1);
    }
    .past-sponsors::after{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;        
         pointer-events: none;
        background: linear-gradient(270deg, hsla(var(--theme-orange-background),1) 0%, hsla(var(--theme-orange-background),0.84) 12%, hsla(var(--theme-orange-background),0) 18%, hsla(var(--theme-orange-background),0) 82%, hsla(var(--theme-orange-background),0.84) 88%, hsla(var(--theme-orange-background),1) 100%);
        }
    .past-sponsors h2{
        color: hsla(var(--theme-orange-title),1);
        }    
    .past-sponsors .logo{        
        background: linear-gradient(0deg, hsla(var(--theme-orange-background-tint),0.36) 0%, hsla(var(--theme-orange-background-tint),0.36) 100%), linear-gradient(0deg, hsla(var(--theme-orange-background),1) 0%, hsla(var(--theme-orange-background),1) 100%);
        }
        .past-sponsors .pls0{
            fill: hsla(var(--theme-text-primary),1);
            }
.become{
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    text-align: center;
    align-items: center;
    gap: calc(var(--padding-content) / 2);
    padding: calc(var(--padding-content) / 1.25) var(--padding-content) var(--padding-content);
    box-sizing: border-box;
    border-radius: var(--border-radius);
    background: hsla(var(--theme-orange-card),1);
    box-shadow: var(--box-shadow-card);    
    z-index: 100;
    }
    .become.section p,
    .alert.section p{
        font-size: var(--fs-body-s);
        line-height: var(--lh-body-s);
        }
    .become br{
        display: none;
        }
    .index-font .become{
        width: var(--become-width);
        margin-left: var(--become-margin);
        }
.theme.orange .logo{ background: linear-gradient(0deg, hsla(var(--theme-orange-background-tint),0.36) 0%, hsla(var(--theme-orange-background-tint),0.36) 100%), linear-gradient(0deg, hsla(var(--theme-orange-background),1) 0%, hsla(var(--theme-orange-background),1) 100%);}
.theme.orange .pls0{ fill: hsla(var(--theme-text-primary),0.9);}

/* =============================================================================
   MORE INFO
   ========================================================================== */

.more-info{
    position: relative;
    padding: 0;
    background: linear-gradient(0deg, hsla(var(--color-black-dark),0.84) 0%, hsla(var(--color-black-dark),0.84) 100%), linear-gradient(0deg, hsla(var(--theme-card-dark),1) 0%, hsla(var(--theme-card-dark),1) 100%);
    z-index: 1;
    }
    .more-info .logo{
        transition: all 0.42s ease-in;
        }
        .more-info.is-active{
            background: hsla(var(--color-black),0.96);
            }
            .more-info.is-active .logo.rotate{
                transform: rotate(180deg);
                }        
        .more-info .chevron{
            opacity: 1;
            }
            .more-info .chevron::after,
            .more-info .chevron::before{
                width: 24px;
                height: 5px; 
                top: 12px;
                border-radius: 10px;
                background: hsla(var(--theme-orange-title),1);
                transition: all 0.42s ease-in;
                }
                .more-info .chevron::before{
                    left: -7px;
                    }
                .more-info .chevron::after{
                    right: -7px;
                    }
                    .more-info.is-active .chevron::after{
                        transform: rotate(45deg);
                        }
                    .more-info.is-active .chevron::before{
                        transform: rotate(-45deg);
                        }
.toggle-content{
    height: 0;
    overflow: hidden;
	flex-direction: column;
    }
.is-active.toggle-content{
    display: flex;
	flex-direction: column;
    min-height: fit-content;
    max-height: fit-content;
    }
.more-info-content{
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-gap) * 1.5);
    }
.toggle-btn{
    position: absolute;
    display: flex;
    cursor: pointer;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-top: 6px solid hsla(var(--theme-orange-title),1);
    gap: calc(var(--grid-item-gap) * 1.5);
    transition: var(--transition-old-school);
    }
    .toggle-btn:hover{
        background: hsla(var(--color-black),0.48);
        }
    .toggle-btn p{
        font-size: calc(var(--fs-icon-marquee) * 2);
        line-height: calc(var(--fs-icon-marquee) * 1.25);
        color: hsla(var(--theme-orange-title),1);
        }
.logo.icon-marquee .button-icon-color{
    stroke-width: 0.25;
    stroke: hsla(var(--theme-orange-title),0.18);
    transition: var(--transition-old-school);
    }
.cycling .regular-list.small{
    padding-bottom: 0;
    }
.cycling h4{
    padding-top: calc(var(--grid-item-gap) * 1.5);
    }
.winners.cards{
    gap: calc(var(--grid-item-gap) * 2);
    padding-top: var(--wrapper-ptb);
    }
.winners .card div{
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    }
.winners .card div.title{
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--cycling-gap);    
    padding-bottom: calc(var(--cycling-pad) * 1.5);
    margin-bottom: calc(var(--cycling-pad) * 0.75);
    border-bottom: 1px solid hsla(var(--theme-text-primary),0.12);
    }
    .winners .card div.title h3, .winners .card-number{
        font-size: var(--fs-cycling-title);
        line-height: var(--lh-cycling-title);
        }
        .winners .card-number{ 
            line-height: var(--fs-cycling-title);
            }
    .winners .card div.title p, .winners .card div.winner-details p{
        font-size: var(--fs-cycling-subtitle);
        line-height: var(--lh-cycling-subtitle);
        opacity: 0.72;
        }
.winners .card-icon{
    width: var(--cycling-icon);
    min-width: var(--cycling-icon);
    margin-bottom: 0;
    }
.winners .card div.winner-row, .winners .card div.winner-info{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-grow: 1;
    min-width: 0;
    gap: var(--cycling-gap);
    }
.winners .card div.winner-row{
    display: flex;
    align-items: flex-end;
    max-width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
    padding-top: var(--cycling-pad);
    }
.winner-photo{
    width: var(--cycling-icon);
    height: var(--cycling-icon);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    }
    .winner-photo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        }
.winners .card div.winner-numbers{
    flex-direction: row;
    flex-shrink: 0;
    margin-left: 8px;
    gap: 3px;
    }
    .winners .card div.winner-details{
        position: relative;
        display: flex;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        flex-direction: column;
        }
    .winners .card div.winner-details p{
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        flex-shrink: 1;
        }
        .winners .card div.winner-details p:first-child{
            font-size: calc(var(--fs-cycling-subtitle) * 1.08);
            line-height: calc(var(--lh-cycling-subtitle) * 1.08);
            opacity: 1;
            font-weight: 700;
            }
        .winners .card div.winner-details p:last-child{
            text-overflow: ellipsis;
            flex-grow: 1;
            min-width: 0;                
            max-width: 100%;
            }
.winners .card div.date-range{
    font-size: calc(var(--fs-cycling-subtitle) * 1.08);
    line-height: calc(var(--lh-cycling-subtitle) * 1.08);
    opacity: 0.84;
    font-weight: 700;
    padding-top: calc(var(--cycling-pad) * 2);
    }

/* =============================================================================
   CARDS
   ========================================================================== */

.cards{
    display: flex;
    flex-direction: row;    
    flex-wrap: wrap;
    justify-content: space-between;    
    gap: var(--cards-gap);
    /*padding: var(--cards-padding);*/
    box-sizing: border-box;
    }
    .card,
    .cards > .pixel-window{
        display: flex;
        flex: 100%;
        flex-direction: column;
        /*min-height: var(--info-stat-height);*/
        text-align: left;
        align-content: left;
        background: hsla(var(--theme-card),1);
        border-radius: var(--border-radius);
        box-sizing: border-box;
        padding: var(--padding-content-small);
        flex-wrap: wrap;
        box-shadow: inset 0 0 0 1px hsla(var(--theme-text-primary), 1);
        /*gap: 6px;*/
        }
    .cards > .pixel-window{
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        }
        .cards .pixel-window__content{
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            }
            .cards .pixel-window .card-icon{
                width: calc(var(--fs-card-title) * 1.25);
                min-width: var(--fs-card-title);
                }
            .cards .pixel-window__content > div{
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 6px;
                }
                .cards .pixel-window__content > div > div{
                    display: flex;
                    align-items: center;
                    gap: 2px;
                    }
        .card.center{
            text-align: center;
            justify-content: center;
            /*gap: 6px;*/
            }
        .card div{
            display: flex;
            justify-content: center;
            gap: 6px;
            }
            .card div div{
                gap: 2px;
                }
                .card .card-title-icon{
                    justify-content: flex-start;
                    align-items: flex-start;
                    margin-bottom: var(--cards-icon-mb);
                    gap: 9px;
                    }
                    .card .card-title-icon .card-icon{
                        margin-bottom: 6px;
                        }                    
                .card-number{
                    font-size: var(--fs-card-number);
                    line-height: var(--fs-card-number);
                    place-self: center;
                    }
                .card-title{
                    font-size: var(--fs-card-title)!important;
                    line-height: var(--lh-card-title)!important;
                    letter-spacing: calc(var(--ls-md) * var(--ls-mul));
                    }
                .card-icon{
                    display: inline-flex;
                    width: var(--cards-icon);
                    min-width: var(--cards-icon);
                    height: auto;
                    margin-bottom: var(--cards-icon-mb);
                    }
                    .card-icon .button-icon-color{ stroke: hsla(var(--theme-text-primary),1);}
                    .card-icon .button-icon-color.alt{ stroke: hsla(var(--theme-text-primary),1)!important;}
                    .card-icon.small{
                        width: var(--cards-icon-small);
                        min-width: var(--cards-icon-small);
                        }
                .card-text{
                    font-size: var(--fs-body-s);
                    line-height: var(--lh-body-s);
                    }
        .cards.col-2 .card, .cards.col-3 .card, .cards.col-6 .card,
        .cards.col-2 .pixel-window, .cards.col-3 .pixel-window, .cards.col-6 .pixel-window{
            flex: 50%;
            max-width: calc(50% - calc(var(--cards-gap) / 2));
            }
            .cards.col-3 .card:nth-child(3n+3), .cards.col-6 .card:nth-child(3n+3),
            .cards.col-3 .pixel-window:nth-child(3n+3), .cards.col-6 .pixel-window:nth-child(3n+3){
                flex: 100%;
                max-width: 100%;
                }
        .cards-links{
            max-width: var(--info-width);
            margin: var(--grid-item-gap) var(--cards-margin-links) 0;
            padding: 0;
            }
            .cards-links .card{
                color: hsla(var(--theme-text-primary),1);
                text-decoration: none;
                }
                .cards-links .card::before{
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    opacity: 0;
                    border-radius: var(--border-radius);
                    transition: var(--transition-old-school);
                    }
                    .cards-links .card:hover::before{ opacity: 1;}
.cards.red .card, .card.red{ 
    background: linear-gradient(0deg, hsla(var(--theme-red-background-tint),0.24) 0%, hsla(var(--theme-red-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-red-background),1) 0%, hsla(var(--theme-red-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-red-title),0.24);
    }
    .cards.cards-links.red .card::before, .cards.cards-links .card.red::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-red-background-tint),0.48) 0%, hsla(var(--theme-red-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-red-background),1) 0%, hsla(var(--theme-red-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-red-title),0.36);
        }
.cards.red .card-color, .card.red .card-color{ color: hsla(var(--theme-red-title),1);}
.cards.red .card-icon.card-color .button-icon-color, .card.red .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-red-title),1);}
.cards.red .regular-list li::after, .card.red .regular-list li::after{ background: hsla(var(--theme-red-title), 1);}
.cards.magenta .card, .card.magenta{ 
    background: linear-gradient(0deg, hsla(var(--theme-magenta-background-tint),0.24) 0%, hsla(var(--theme-magenta-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-magenta-background),1) 0%, hsla(var(--theme-magenta-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-magenta-title),0.24);
    }
    .cards.cards-links.magenta .card::before, .cards.cards-links .card.magenta::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-magenta-background-tint),0.48) 0%, hsla(var(--theme-magenta-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-magenta-background),1) 0%, hsla(var(--theme-magenta-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-magenta-title),0.36);
        }
.cards.magenta .card-color, .card.magenta .card-color{ color: hsla(var(--theme-magenta-title),1);}
.cards.magenta .card-icon.card-color .button-icon-color, .card.magenta .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-magenta-title),1);}
.cards.magenta .regular-list li::after, .card.magenta .regular-list li::after{ background: hsla(var(--theme-magenta-title), 1);}
.cards.orange .card, .card.orange{ 
    background: linear-gradient(0deg, hsla(var(--theme-orange-background-tint),0.24) 0%, hsla(var(--theme-orange-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-orange-background),1) 0%, hsla(var(--theme-orange-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-orange-title),0.24);
    }
    .cards.cards-links.orange .card::before, .cards.cards-links .card.orange::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-orange-background-tint),0.48) 0%, hsla(var(--theme-orange-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-orange-background),1) 0%, hsla(var(--theme-orange-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-orange-title),0.36);
        }
.cards.orange .card-color, .card.orange .card-color{ color: hsla(var(--theme-orange-title),1);}
.cards.orange .card-icon.card-color .button-icon-color, .card.orange .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-orange-title),1);}
.cards.orange .regular-list li::after, .card.orange .regular-list li::after{ background: hsla(var(--theme-orange-title), 1);}
.cards.yellow .card, .card.yellow{ 
    background: linear-gradient(0deg, hsla(var(--theme-yellow-background-tint),0.24) 0%, hsla(var(--theme-yellow-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-yellow-background),1) 0%, hsla(var(--theme-yellow-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-yellow-title),0.24);
    }
    .cards.cards-links.yellow .card::before, .cards.cards-links .card.yellow::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-yellow-background-tint),0.48) 0%, hsla(var(--theme-yellow-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-yellow-background),1) 0%, hsla(var(--theme-yellow-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-yellow-title),0.36);
        }
.cards.yellow .card-color, .card.yellow .card-color{ color: hsla(var(--theme-yellow-title),1);}
.cards.yellow .card-icon.card-color .button-icon-color, .card.yellow .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-yellow-title),1);}
.cards.yellow .regular-list li::after, .card.yellow .regular-list li::after{ background: hsla(var(--theme-yellow-title), 1);}
.cards.green .card, .card.green{ 
    background: linear-gradient(0deg, hsla(var(--theme-green-background-tint),0.24) 0%, hsla(var(--theme-green-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-green-background),1) 0%, hsla(var(--theme-green-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-green-title),0.24);
    }
    .cards.cards-links.green .card::before, .cards.cards-links .card.green::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-green-background-tint),0.48) 0%, hsla(var(--theme-green-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-green-background),1) 0%, hsla(var(--theme-green-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-green-title),0.36);
        }
.cards.green .card-color, .card.green .card-color{ color: hsla(var(--theme-green-title),1);}
.cards.green .card-icon.card-color .button-icon-color, .card.green .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-green-title),1);}
.cards.green .regular-list li::after, .card.green .regular-list li::after{ background: hsla(var(--theme-green-title), 1);}
.cards.blue .card, .card.blue{ 
    background: linear-gradient(0deg, hsla(var(--theme-blue-background-tint),0.24) 0%, hsla(var(--theme-blue-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-blue-background),1) 0%, hsla(var(--theme-blue-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-blue-title),0.24);
    }
    .cards.cards-links.blue .card::before, .cards.cards-links .card.blue::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-blue-background-tint),0.48) 0%, hsla(var(--theme-blue-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-blue-background),1) 0%, hsla(var(--theme-blue-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-blue-title),0.36);
        }
.cards.blue .card-color, .card.blue .card-color{ color: hsla(var(--theme-blue-title),1);}
.cards.blue .card-icon.card-color .button-icon-color, .card.blue .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-blue-title),1);}
.cards.blue .regular-list li::after, .card.blue .regular-list li::after{ background: hsla(var(--theme-blue-title), 1);}
.cards.violet .card, .card.violet{ 
    background: linear-gradient(0deg, hsla(var(--theme-violet-background-tint),0.24) 0%, hsla(var(--theme-violet-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-violet-title),0.24);
    }
    .cards.cards-links.violet .card::before, .cards.cards-links .card.violet::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-violet-background-tint),0.48) 0%, hsla(var(--theme-violet-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-violet-background),1) 0%, hsla(var(--theme-violet-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-violet-title),0.36);
        }
.cards.violet .card-color, .card.violet .card-color{ color: hsla(var(--theme-violet-title),1);}
.cards.violet .card-icon.card-color .button-icon-color, .card.violet .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-violet-title),1);}
.cards.violet .regular-list li::after, .card.violet .regular-list li::after{ background: hsla(var(--theme-violet-title), 1);}
.cards.turquoise .card, .card.turquoise{ 
    background: linear-gradient(0deg, hsla(var(--theme-turquoise-background-tint),0.24) 0%, hsla(var(--theme-turquoise-background-tint),0.24) 100%), linear-gradient(0deg, hsla(var(--theme-turquoise-background),1) 0%, hsla(var(--theme-turquoise-background),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-turquoise-title),0.24);
    }
    .cards.cards-links.turquoise .card::before, .cards.cards-links .card.turquoise::before{ 
        background: linear-gradient(0deg, hsla(var(--theme-turquoise-background-tint),0.48) 0%, hsla(var(--theme-turquoise-background-tint),0.48) 100%), linear-gradient(0deg, hsla(var(--theme-turquoise-background),1) 0%, hsla(var(--theme-turquoise-background),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-turquoise-title),0.36);
        }
.cards.turquoise .card-color, .card.turquoise .card-color{ color: hsla(var(--theme-turquoise-title),1);}
.cards.turquoise .card-icon.card-color .button-icon-color, .card.turquoise .card-icon.card-color .button-icon-color{ stroke: hsla(var(--theme-turquoise-title),1);}
.cards.turquoise .regular-list li::after, .card.turquoise .regular-list li::after{ background: hsla(var(--theme-turquoise-title), 1);}
.cards.img .card, .card.img{ 
    background: linear-gradient(0deg, hsla(var(--theme-violet-background-tint),0.12) 0%, hsla(var(--theme-violet-background-tint),0.12) 100%), linear-gradient(0deg, hsla(var(--theme-card-dark),1) 0%, hsla(var(--theme-card-dark),1) 100%);
    box-shadow: inset 0 0 0 1px hsla(var(--theme-green-title),0.6);
    }
    .dark .cards.img .card, .dark .card.img{ 
        background: linear-gradient(0deg, hsla(var(--theme-violet-background-tint),0.09) 0%, hsla(var(--theme-violet-background-tint),0.09) 100%), linear-gradient(0deg, hsla(var(--theme-black-darkest),1) 0%, hsla(var(--theme-black-darkest),1) 100%);
        box-shadow: inset 0 0 0 1px hsla(var(--theme-green-title),0.36);
        }

/* =============================================================================
   FOOTER
   ========================================================================== */

footer{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    color: hsla(var(--theme-text-primary),1);
    font-size: var(--fs-footer);
    line-height: var(--lh-footer);
    padding: var(--footer-padding);
    gap: 6px;
    margin: 0 auto;
    z-index: 500;
    box-sizing: border-box;
    background: hsla(var(--theme-blue-background),1);
    }
    footer::before{
        position: absolute;
        content: "";
        z-index: -1;
        width: calc(100% - calc(var(--header-margin) * 2));
        height: calc(100% - calc(var(--header-margin) * 2));
        top: var(--header-margin);
        right: var(--header-margin);
        bottom: var(--header-margin);
        left: var(--header-margin);
        background: hsla(var(--theme-background),0.84);
        border: var(--button-border) solid hsla(var(--theme-text-primary),1);
        border-radius: var(--border-radius);
        background: hsla(var(--theme-navigation),0.66);
        box-shadow: var(--box-shadow-big);    
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        }
    footer a{
        color: hsla(var(--theme-text-primary),1);
        text-decoration: none;
        transition: var(--transition-old-school);
        }
        footer a:hover{
            color: hsla(var(--theme-green-title),1);
            }

/* =============================================================================
   HACKS
   ========================================================================== */

#sponsors.past-sponsors .anim-block.w100{    
    z-index: 10;
    }
.hero-cta strong {
    color: hsla(var(--theme-green-title), 1);
    }
.workshop-place{    
    background: none;
    }
#workshop.workshop h2:not(.anim-block), #workshop.workshop h3, #workshop.workshop h4{
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    margin-top: var(--grid-item-gap);
    color: hsla(var(--theme-magenta-title),1);
    }
.workshops-list .price{
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    color: hsla(var(--theme-magenta-title),1);
    }
.workshops-list .vat{    
    display: none;
    }
#venue.venue .button{
    margin-top: var(--grid-item-gap);
    }

/* =============================================================================
   MEDIA QUERIES 
   ========================================================================== */

/* ========================= 480 ========================= */

@media only screen and (min-width: 480px){
    
/* ============================
   HEADER 480
   ============================ */

header .button,
header .button:hover{
    padding-left: 9px;
    }    
    header .button span{
        width: auto;
        padding-right: 9px;
        padding-left: 6px;
        }
        header .button:hover span{
            padding-right: 9px;
            padding-left: 6px;
            }    
    
/* ============================
   GALLERY 480
   ============================ */
    
.gallery-content .item:nth-child(3), .gallery-content .item:nth-child(4), .gallery-content .item:nth-child(5), .gallery-content .item:nth-child(6), .gallery-content .item:nth-child(8), .gallery-content .item:nth-child(8){
    display: flex;
    }
.gallery-content .item:nth-child(12), .gallery-content .item:nth-child(13){
    display: none;
    }    
    
}/* ============================== End media 480 */

/* ========================= 768 ========================= */

@media only screen and (min-width: 768px){
    
/* ============================
   HEADER 768
   ============================ */
    
.switch-color{
    width: 72px;
    height: 36px;
    margin-right: 2px;
    background: hsla(var(--theme-turquoise-title),0.09);
    }
    .dark .switch-color{ background: hsla(var(--theme-yellow-title),0.12);}    
.toggle-color{
    top: 18px;
    left: 36px;
    width: 72px;
    height: 36px;
    }
.toggle-color .gooey_bg{
    width: 42px;
    height: 42px;
    left: -3px;
    top: -4px;
    border: 1.5px solid hsla(var(--theme-text-primary), 1);
    background: linear-gradient(hsla(var(--theme-yellow-title),0.24) 0%, hsla(var(--theme-yellow-title),0.24) 100%),linear-gradient(hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 100%);
    }    
    .dark .toggle-color .gooey_bg{
        background: linear-gradient(hsla(var(--theme-turquoise-title),0.36) 0%, hsla(var(--theme-turquoise-title),0.36) 100%),linear-gradient(hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 100%);
        }    
        .toggle-color.dark-off .gooey_bg_2,    .toggle-color.dark-on .gooey_bg_1{ border: none;}    
.toggle-color .switch-icons svg,
.toggle-color .switch-icons-day,
.toggle-color .switch-icons-night{
    width: 18px;
    height: 18px;
    }
.toggle-color .switch-icons-day, 
.toggle-color .switch-icons-night{
    opacity: 0.72;
    }        
.toggle-color.dark-off .switch-icons-day,
.toggle-color.dark-on .switch-icons-night,    
.toggle-color:hover .switch-icons-day,    
.toggle-color:hover .switch-icons-night{
    opacity: 1;
    transition: var(--transition-old-school);    
    }        
    .toggle-color:hover .switch-icons-night,
    .dark .toggle-color:hover .switch-icons-day{
        transform: scale(1.125);
        }
    .toggle-color:hover .switch-icons-day,
    .dark .toggle-color:hover .switch-icons-night{
        transform: scale(1);
        }    
    .toggle-color.dark-off .switch-icons-night .sw2,
    .toggle-color.dark-on .switch-icons-day .sw2{
        transition: var(--transition-old-school);
        }    
.toggle-color svg{
    width: 0;
    height: 0;
    }
    .toggle-color .switch-icons-day{
        top: 8px;
        left: 9px;
        }
    .toggle-color .switch-icons-night{
        top: 8px;
        right: 11px;
        left: auto;
        }    
.toggle-color.dark-off .switch-icons-night .sw1, .toggle-color.dark-on .switch-icons-day .sw1, .dark .toggle-color.dark-on .switch-icons-day .sw1{ stroke: hsla(var(--theme-text-primary), 1);}        
.toggle-color.dark-on .switch .gooey_bg_1{ animation: switchOn_1 600ms linear forwards;}
.toggle-color.dark-on .switch .gooey_bg_2{ animation: switchOn_2_small 600ms cubic-bezier(0.16, 0.84, 0.36, 1.27) forwards;}
.toggle-color.dark-off .switch .gooey_bg_1{ animation: switchOff_1 600ms cubic-bezier(0.16, 0.84, 0.36, 1.27) forwards;}
.toggle-color.dark-off .switch .gooey_bg_2{    animation: switchOff_2_small 600ms linear forwards;}        
    
/* ============================
   HERO 768
   ============================ */
    
.hero{
    justify-content: space-between;
    }
    .wrapper.hero{
        padding-top: calc(var(--header-height) * 2);
        padding-bottom: calc(var(--hero-info-height) + var(--header-height));
        }
.hero-info{
    position: absolute!important;
    width: 100%;
    height: var(--hero-info-height);
    padding-bottom: 6px;
    bottom: 0;
    left: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    padding: 0 var(--padding-content);
    }    
    .hero-info h5{
        flex-direction: row;
        gap: 6px;
        width: auto;
        padding: 0;
        }    
    .hero-info h5 strong{
        font-size: var(--fs-hero-h5);
        line-height: var(--lh-hero-h5);
        }
        .hero-info h5:nth-child(2) b{ display: inline-flex;}    
.hero-text{
    flex: 1 0 auto;
    align-items: center;
    }    
.hero-cta{
    flex-direction: row;
    /*margin-right: var(--hero-cta-center);*/
    }    
    .hero-cta strong{
        width: var(--hero-cta-center);
        padding: 12px 78px 12px 12px;
        white-space: nowrap;
        }
        .hero-cta strong span{
            position: absolute;
            top: 0;
            right: 24px;
            bottom: 0;
            display: block;
            margin: auto 0;
            width: 30px;
            height: 2.5px;
            background: hsla(var(--theme-icon),1);
            border-radius: 3px;
            opacity: 0.84;
            animation: bounceRight 4.2s cubic-bezier(0.12, 0.96, 0.36, 2.12) infinite;
            }
            .hero-cta strong span::after,
            .hero-cta strong span::before{
                position: absolute;
                content: "";
                width: 15px;
                height: 2.5px;
                background: hsla(var(--theme-icon),1);
                top: 5px;
                right: -3px;
                border-radius: 3px;
                transform: rotate(-45deg);
                pointer-events: none;
                }
                .hero-cta strong span::before{
                    top: -5px;
                    transform: rotate(45deg);
                    }
.hero-links-content{
    flex-direction: column-reverse;
    }    
.hero-links{
    width: 100%;
    max-width: 600px;
    align-self: center;
    }    
    .hero-buttons{
        flex-direction: row;
        justify-content: space-around;    
        }
        .hero-buttons .button{
            width: 50%;
            }
.chevron{ margin-bottom: 0;}
    
/* ============================
   INFO 768
   ============================ */
    
.video-container-mask img:nth-of-type(1),
.video-container-mask video{
    display: block;
    border-radius: 0;
    }
    .video-container-mask img:nth-of-type(2){
        display: none;
        }    
        .background-video-info{
            width: 100%;
            height: 100%;
            object-fit: cover;
            mask-image: url("../images/video-mask.svg");
            mask-size: contain; 
            mask-repeat: no-repeat;
            mask-position: center;    
            -webkit-mask-image: url("../images/video-mask.svg"); 
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            }    
            .video-container-mask.bcn .background-video-info{
                mask-image: url("../images/video-mask-flower.svg");
                -webkit-mask-image: url("../images/video-mask-flower.svg"); 
                }    
    .info .info-stats .pixel-window{
        flex: 25%;
        max-width: calc(25% - var(--grid-item-gap));
        }
    
/* ============================
   GALLERY 768
   ============================ */
    
.gallery{
    gap: 24px;
    }
.gallery-content .item:nth-child(3), .gallery-content .item:nth-child(14), .gallery-content .item:nth-child(15){
    display: none;
    }
.gallery-content .item:nth-child(4){
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
    }    
    .video-container-gallery{
        height: 100%;
        }
    .video-container-gallery img:nth-of-type(1),
    .video-container-gallery video{
        display: block;
        }
        .video-container-gallery img:nth-of-type(2){
            display: none;
            }
    
/* ============================
   TICKET 768
   ============================ */

.timer{
    padding-top: calc(var(--padding-content) * 2);
    }    
    
/* ============================
   TICKETS 768
   ============================ */        

.ticket-venue-date{        
    display: grid;
    width: 100%;
    padding-top: calc(var(--tickets-gap) * 1.5);
    }
    .ticket-venue-date p{
        padding: var(--tickets-venue-date-padding);
        }
        .ticket-venue-date p:nth-child(1),
        .ticket-venue-date p:nth-child(2){
            border-top: 1px solid hsla(var(--theme-border-dark),1);
            border-bottom: 1px solid hsla(var(--theme-border-dark),1);
            }
        .ticket-venue-date p:nth-child(1),
        .ticket-venue-date p:nth-child(3){
            border-right: 1px solid hsla(var(--theme-border-dark),1);
            }
.ticket-cta .arrow{
    visibility: visible;
    }
    
/* =============================================================================
   FLIP COUNTDOWN 768
   ========================================================================== */

.flip-countdown{ grid-template-columns: repeat(4, 1fr);}    
    
/* ============================
   WORKSHOPS 768
   ============================ */

.workshops-features{
    flex-direction: row;
    flex-wrap: wrap;
    }
    .workshops-features li{
        flex: 50%;
        max-width: calc(50% - calc(var(--grid-item-gap) / 2));        
        }
.workshops-list{
    flex-direction: row;
    flex-wrap: wrap;
    }    
    .workshops-list.items-col-2 div, .workshops-list.items-col-3 div, .workshops-list.items-col-4 div{        
        flex: 1 1 calc(50% - var(--grid-item-gap));
        max-width: calc(50% - var(--grid-item-gap));         
        }    
.workshops-price{
    flex-direction: row;
    text-align: right;
    }
    .workshops-price .price{
        max-width: 96px;    
        padding: 0 0 2px;
        }
        .workshops-price .vat{    
            position: relative;
            display: flex;
            width: 100%;
            justify-content: right;
            right: 0;
            }        
.workshop-place .top{    
    flex-direction: row;
    height: fit-content;
    gap: 0;
    justify-content: flex-end;
    }
    .workshop-place h1{
        position: absolute;
        height: fit-content;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
        }
    .img-wp{
        max-width: calc(50% - var(--grid-item-gap));
        }
.hero-marquee-price{
    width: 100%;
    height: 100%;
    visibility: visible;
    margin-bottom: 0;
    }    
    
/* ============================
   SPONSORS 768
   ============================ */

.become br{
    display: inline;
    }
    
/* ============================
   VENUE 768
   ============================ */

.video-container img:nth-of-type(1),
.video-container video{
    display: block;
    }
    .video-container img:nth-of-type(2){
        display: none;
        }    
.circle-text.cycling{            
    right: 6px;            
    left: auto;
    margin: 0;
    }    
    
/* ============================
   CARDS 768
   ============================ */    
    
.cards.col-2-1 .card, .cards.col-4 .card{
    flex: 50%;
    max-width: calc(50% - calc(var(--cards-gap) / 2));
    }
.card .card-title-icon{
    align-items: center;
    gap: 12px;
    }
.regular-list li.sublist li{ gap: 9px;}
.regular-list li.sublist li span{ display: inline;}
.regular-list.small li.sublist li{
    font-size: calc(var(--fs-body-xs) * 1.08);
    line-height: calc(var(--lh-body-xs) * 1.08);
    }    
    
/* ============================
   FOOTER 768
   ============================ */

footer{
    flex-direction: row;
    }
    footer p{
        width: 50%;
        vertical-align: top;
        max-width: none;
        margin: 0;
        padding: 0;
        }
        footer p:first-child{
            width: 54%;
            text-align: left;
            padding: 0;
            }
            footer p:first-child br:first-child{ display: none;}
        footer p:last-child{
            width: 46%;
            text-align: right;
            padding: 0;
            }    
    
}/* ============================== End media 768 */    

/* ========================= 1024 ========================= */

@media only screen and (min-width: 1024px){
    
/* ============================
   HEADER 1024
   ============================ */
    
header .button, 
.switch-color{
    transform: scale(0.9);
    margin-right: -6px;
    }
    .switch-color{ margin-right: -12px;}    
        
/* ============================
   HERO 1024
   ============================ */
    
.hero-text br{ display: none;}    
.hero-links{
    width: auto;
    max-width: none;
    flex-direction: row;
    justify-content: space-between;
    }
    .hero-links-content{
        flex-direction: row;
        align-self: center;
        }
    .hero-links p{
        text-align: left;
        padding: 0 3px;
        }        
    .hero-buttons{
        width: auto;
        min-width: fit-content;
        }
        .hero-buttons .button{
            width: auto;
            }    
.hero .chevron:first-child{display: flex;}    
    
/* =============================================================================
   PIXEL WINDOW 1024
   ========================================================================== */

.window-content-text{ flex-direction: row;}    
    .window-content-text p{ max-width: var(--window-content-text-width);}
    .window-content-text .video-container-mask{ align-self: flex-start; margin: 0 auto;}
.window-cta{ padding: calc(var(--hero-links-space) * 2) var(--hero-links-space);}        
.window-invert-flex{ flex-direction: row;}
	.window-invert-flex .window-cta{ 
		max-width: 40%;
		align-self: stretch;
		}
    
/* ============================
   TICKETS 1024
   ============================ */        

.tickets h4 br, .tickets .h4 br{
    display: none;
    }    
.ticket-io{
    display: flex;
    height: var(--ticket-io-height);
    gap: 0; 
    justify-content: center;
    align-items: stretch;
    width: 100%;
    }
    .ticket-io li{
        display: flex;
         width: var(--tickets-st-width-col);
        padding: var(--tickets-st-width-col-padding);
        }    
        .ticket-io li.active{
             width: 100%;
            padding-right: var(--tickets-st-width-col);
            }    
        .ticket-io li.active .ticket-detail-bottom{
            visibility: visible;
            }
    .section-title{            
        flex-direction: column-reverse;
        width: var(--tickets-st-width-col);
        padding: var(--tickets-st-padding);
        }        
        .section-title::after{    
            background: linear-gradient(90deg, hsla(var(--theme-ticket-shadow),0.24) -4%, hsla(var(--theme-ticket-shadow),0.12) 6%, hsla(var(--theme-ticket-shadow),0.06) 18%, hsla(var(--theme-ticket-shadow),0) 100%);
            }
            .dark .section-title::after{
                background: linear-gradient(90deg, hsla(var(--theme-ticket-shadow),0.48) -4%, hsla(var(--theme-ticket-shadow),0.30) 6%, hsla(var(--theme-ticket-shadow),0.18) 18%, hsla(var(--theme-ticket-shadow),0) 100%);
                }    
        .ticket-io li.active .section-title{    
            padding: var(--tickets-st-padding-active);
            }
        .section-title p{
            width: var(--tickets-st-width);
            transform: rotate(-90deg) translateY(var(--tickets-st-ty)); 
            }
            .ticket-io li.active .section-title p{    
                transform: rotate(-90deg) translateY(var(--tickets-st-ty-active)); 
                }
        .section-title .price{    
            width: calc(var(--tickets-st-width) / 1.5);
            text-align: right;
            font-size: var(--fs-tickets-st-price);
            line-height: var(--fs-tickets-st-price);
            padding-top: var(--tickets-st-padding-top);
            }    
    .section-content{
        width: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        }
        .ticket-io li.active .section-content{
            width: 100%;
            min-width: 100%;
            height: 100%;                
            }
            .section-content .ticket-title{
                width: 42%;
                }
            .section-content .ticket-cta{
                width: 58%;
                }    
    .ticket-title{
        justify-content: space-between;
        }
         .ticket-title.default{    
            justify-content: center; 
            }    
    .ticket-cta{
        justify-content: space-between;
        }
        .ticket-cta .arrow{
            width: calc(var(--btn-cta-xl-height) * 0.75);
            height: calc(var(--btn-cta-xl-height) * 0.75);
            top: 8%;
            left: 3%;
            }
            .ticket-cta .arrow:nth-child(2){
                right: 3%;
                }
    .ticket-logo{
        display: block;
        width: 240px;
        }
    .ticket-venue-date{        
        display: grid;
        width: 100%;
        padding-top:  calc(var(--tickets-gap) / 1);
        }
.ticket-detail-top,
.ticket-detail-bottom{
    width: 2px;
    height: 100%;
    top: 0;
    left: -1px;
    border-bottom: none;
    border-right: 1.5px dashed hsla(var(--theme-border-dark),1);
    }
    .ticket-detail-bottom{
        left: auto;
        right: -1px;
        }
        .ticket-detail-top::before,
        .ticket-detail-bottom::before{
            top: calc(0px - calc(var(--tickets-detail-size) / 2));
            bottom: auto;
            }
        .ticket-detail-top::after,
        .ticket-detail-bottom::after{
            bottom: calc(0px - calc(var(--tickets-detail-size) / 2));
            top: auto;
            }    
    
/* ============================
   SESSIONS 1024
   ============================ */

#tabs, #tabs.sticky{
    justify-content: space-between;
    padding: calc(var(--header-margin) * 1.5);
    }
    #tabs div{
        max-width: 256px;
        margin: 0;
        }
    #tabs .button{
        display: flex;
        width: auto;
        }
    
/* ============================
   GALLERY 1024
   ============================ */

.gallery-content .item:nth-child(5), .gallery-content .item:nth-child(8){
    display: none;
    }    
.gallery-content .item:nth-child(3), .gallery-content .item:nth-child(14), .gallery-content .item:nth-child(15){
    display: flex;
    }
.gallery-content .item:nth-child(4){
    grid-column-start: 3;
    grid-row-start: 1;
    }    
    
/* ============================
   WORKSHOPS 1024
   ============================ */

.workshops-features li:nth-child(1),
.workshops-features li:nth-child(3){
    padding-left: 20%;
    }
.workshops-list.items-col-3 div{        
    flex: 1 1 calc(33.333% - var(--grid-item-gap));
    max-width: calc(33.333% - calc(var(--grid-item-gap) * 1.185));
    }    
.workshop-place{    
    flex-direction: row;
    }    
    .workshop-place .top{
        max-width: calc(55% - calc(var(--grid-gap) / 2));
        }
    .workshop-place .bottom{
        max-width: calc(45% - calc(var(--grid-gap) / 2));
        }    
    .img-wp{
        max-width: 66%;
        }
    
/* ============================
   SPONSORS 1024
   ============================ */    
    
.become.section,
.alert.section{
    flex-direction: row;
    text-align: right;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--padding-content) / 2);
    padding: calc(var(--padding-content) / 2);
    }
    
}/* ============================== End media 1024 */    

/* ========================= 1280 ========================= */

@media only screen and (min-width: 1280px){
    
/* ============================
   HEADER 1280
   ============================ */    
    
header .button, 
.switch-color{
    transform: scale(1);
    margin-right: 2px;
    }
    .switch-color{ margin-right: 0;}    
    
/* ============================
   MARQUEE 1280
   ============================ */    
    
.hero-marquee{ visibility: visible;}
    
/* ============================
   HERO 1280
   ============================ */    
    
.hero-links p br{ display: none;}        
    
/* ============================
   INFO 1280
   ============================ */
    
.info-content{
    display: grid;  
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    }        
    .info .info-stats{
        flex: 1;
        }    
    .info-content > .info-stats,
    .info-content > .info-venue{
        height: 100%;
        align-items: stretch;    
        align-content: stretch;   
        }
        .info .info-stats .pixel-window,
        .info .info-venue .pixel-window{
        height: auto;
        flex: 1 1 auto;           
        }
        .info .info-stats .pixel-window{
            flex: 50%;
            max-width: calc(50% - calc(var(--grid-item-gap) / 2));
            }
    .info .info-venue{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        }
        .info .info-venue .pixel-window{
            max-width: calc(50% - 9px);
            }    
    
/* ============================
   GALLERY 1280
   ============================ */

.gallery{
    gap: 36px;
    }                                               
.gallery-content .item:nth-child(5), .gallery-content .item:nth-child(8), .gallery-content .item:nth-child(12), .gallery-content .item:nth-child(13){
    display: flex;
    }
.gallery-content .item:nth-child(4){
    grid-column-start: 4;
    grid-row-start: 1;
    }  
    
/* ============================
   STACK VIEW 1280
   ============================ */    
/*    
.stack-view__stage{
    width: max-content;
    overflow-x: auto;
    }
*/    
    
/* ============================
   TICKETS 1280
   ============================ */        

.ticket-io{
    max-width: var(--ticket-io-mw);
    margin-right: auto;
    margin-left: auto;
    }    
.ticket-cta h3 br{ 
    display: none;
    }
.ticket-cta .arrow{
    width: calc(var(--btn-cta-xl-height) * 0.85);
    height: calc(var(--btn-cta-xl-height) * 0.85);
    top: 0;
    bottom: 11%;
    left: 9%;
    }
    .ticket-cta .arrow:nth-child(2){
        right: 9%;
        }    
    
/* ============================
   SESSIONS 1280
   ============================ */    

#tabs, #tabs.sticky{
    padding: calc(var(--header-margin) * 1.25);
    }
    #tabs div{
        max-width: 300px;
        }
    #tabs .button{
        display: flex;
        width: auto;
        }    
    #tabs div{
        height: calc(var(--header-height) - calc(var(--header-margin) * 0.5));
        }
        #tabs div::before{
            height: calc(var(--header-height) - calc(var(--header-margin) * 1.25));
            }    
table thead{
    display: block!important;
    }
table thead tr{
    position: relative;
    border-color: hsla(var(--theme-background),0);   
    margin-bottom: 1.5px;
    padding: var(--sessions-th-ptb);
    display: flex;
    gap: calc(var(--grid-gap) / 2);
    }
table tr{
    display: flex;
    gap: calc(var(--grid-gap) / 2);
    }    
    table thead.sticky{
        position: fixed;
        width: 100%;
        top: 0; 
        padding: 0;
        z-index: 100;
        }
        table thead.sticky tr{
            padding-top: 2px;
            padding-bottom: 0;
            background: none;
            }            
            table thead.sticky tr::before{
                position: absolute;
                content: "";
                z-index: 0;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(0deg, hsla(var(--theme-violet-title),0.05) 0%, hsla(var(--theme-violet-title),0.05) 0%), linear-gradient(0deg, hsla(var(--theme-white),0.78) 0%, hsla(var(--theme-white),0.78) 0%);
                box-shadow: var(--box-shadow-medium);    
                -webkit-backdrop-filter: blur(18px);
                backdrop-filter: blur(18px);
                }
                .dark table thead.sticky tr::before{
                    background: linear-gradient(0deg, hsla(var(--theme-violet-title),0.12) 0%, hsla(var(--theme-violet-title),0.12) 0%), linear-gradient(0deg, hsla(var(--theme-black-darkest),0.84) 0%, hsla(var(--theme-black-darkest),0.84) 0%);
                    }
    table thead th:nth-child(2), 
    table td:nth-child(2){
        margin-left: 0;
        }    
        table thead th:first-child,
        table td:first-child{
            width: 100%; 
            max-width: var(--sessions-th-mw);
            padding-top: 2px;
            }    
        table th::after{
            width: 100%;
            height: var(--sessions-th-h);
            top: auto;
            bottom: var(--sessions-th-pb);
            z-index: 0;
            }
        table th:first-child::after,
        table td::after,
        table td::before{
            display: none;
            }
        table thead th p:first-child{
            position: relative;
            z-index: 1;
            font-size: var(--fs-button-medium);
            line-height: var(--fs-button-medium);
            color: hsla(var(--theme-white),1)!important;
            }
    table td.no-room p:first-child{
        padding: 0;
        }
    table p:first-child{
        padding-top: 0;
        text-align: left;
        }
    
/* ============================
   SPEAKERS 1280
   ============================ */    
    
.speakers-deco{
    display: flex;
    }        
    
/* ============================
   WORKSHOPS 1280
   ============================ */

.workshops-features{
    justify-content: center;
    gap: var(--grid-gap);
    padding: calc(var(--grid-gap) * 1.24) 0 calc(var(--grid-gap) * 1.36);
    }
    .workshops-features li{
        flex: none;
        max-width: none;
        padding: 0;
        }
        .workshops-features li:nth-child(1),
        .workshops-features li:nth-child(3){
            padding-left: 0;
            }    
.workshops-list{
    margin-bottom: var(--grid-gap);
    }    
.img-wp{
    max-width: 56%;
    }    

/* ============================
   MORE INFO 1280
   ============================ */        
    
.winners.cards{
    padding-top: 0;
    }    
.circle-text.cycling{
    display: none;
    }    
    
/* ============================
   CARDS 1280
   ============================ */    
        
.cards.col-3 .card, .cards.col-3 .card:nth-child(3n+3),
.cards.col-3 .pixel-window, .cards.col-3 .pixel-window:nth-child(3n+3){
    flex: 33.333%;
    max-width: calc(33.333% - calc(var(--cards-gap) / 1.5));
    }
.cards.col-4 .card{
    flex: 25%;
    max-width: calc(25% - calc(var(--cards-gap) / 1.333));
    }
.cards.col-6 .card, .cards.col-6 .card:nth-child(3n+3),
.cards.col-6 .pixel-window, .cards.col-6 .pixel-window:nth-child(3n+3){
    flex: 16.666%;
    max-width: calc(16.666% - calc(var(--cards-gap) / 1.2));
    }    
    
}/* ============================== End media 1280 */    

/* ========================= 1400 ========================= */

@media only screen and (min-width: 1400px){
    
/* ============================
   TICKETS 1400
   ============================ */    
    
.section-content .ticket-title{
    width: 40%;
    }
.section-content .ticket-cta{
    width: 60%;
    }    
.ticket-cta .arrow{    
    bottom: 9%;
    }
    
/* ============================
   WORKSHOPS 1400
   ============================ */

.workshops-features li svg{
    width: 30px;
    }    
.workshops-list.items-col-4 div{        
    flex: 1 1 calc(25% - var(--grid-item-gap));
    max-width: calc(25% - calc(var(--grid-item-gap) * 1.335));
    }    
    
/* ============================
   FOOTER 1440
   ============================ */

footer p br{ display: none;    }

}/* ============================== End media 1400 */

/* ========================= 1580 ========================= */

@media only screen and (min-width: 1580px){
    
/* ============================
   FOOTER 1580
   ============================ */

footer p br:first-child{display: none;}

}/* ============================== End media 1400 */

/* ========================= 1580 ========================= */    


/* ========================= 1900 ========================= */

@media only screen and (min-width: 1900px){
    
/* ============================
   TICKETS 1900
   ============================ */
    
.ticket-cta .arrow{
    width: calc(var(--btn-cta-xl-height) * 0.9);
    height: calc(var(--btn-cta-xl-height) * 0.9);    
    bottom: 11%;
    left: 9%;
    }
    .ticket-cta .arrow:nth-child(2){
        right: 9%;
        }
    
/* ============================
   WORKSHOPS 1900
   ============================ */

.workshops-features li svg{
    width: 36px;
    }    
.workshops-price .price{
    max-width: 120px;
    }    
    
}/* ============================== End media 1900 */

/* ========================= 2200 ========================= */

@media only screen and (min-width: 2200px){
    
/* ============================
   TICKETS 2200
   ============================ */
    
.ticket-cta .arrow{
    left: 11%;
    }
    .ticket-cta .arrow:nth-child(2){
        right: 11%;
        }    
    
}/* ============================== End media 2200 */