/****************************************************************************
 * Topbar Container
 ****************************************************************************/
.topbar{
    position: fixed; left: 0; right: 0; top: 0; bottom: auto;
    height: 5rem; width: 100%; margin: 0 auto;
    padding: 0 1rem; z-index: 1000;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    background-color: #FFFFFF;
}

.topbar > .row{ height: 100%; position: relative; }
.topbar .columns.row{ position: relative; }
.topbar .column,
.topbar .columns{ padding-top: 0; padding-bottom: 0;}

@media screen and (min-width:40em){
    .topbar{ padding: 0 2rem; }
}

@media screen and (min-width:64em){
    .topbar{ 
        padding: 0 4rem; 
        height: 6rem;
    }
}


/****************************************************************************
 * Logo
 *
 * PNG => .logo_wrapper > img.logo
 * SVG => .logo_wrapper figure.logo.figure .svg_wrapper.data_ratio svg
 ****************************************************************************/
.logo_wrapper{ 
    position: relative;
    padding: 0;
}
.topbar .logo_wrapper {
    z-index: 1010;
}
a.logo_wrapper:hover {
    color: inherit;
}
.logo {
    width: 8rem;
}

.logo_wrapper .svg_wrapper {
    position: relative;
    width: auto;
}
.logo_wrapper  > .logo .svg_wrapper.data_ratio svg {
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    left: 0;
}
[data-name="fest"] path,
.wrapper .st0_3 {
    fill: #ffcc00;
}
[data-name="winter"] path,
.wrapper .st1_3 {
    fill: currentColor;
}

.topbar .logo_column {
    position: absolute;
    left: 50%; top: 50%; 
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
@media screen and (max-width:39.9375em){
    .topbar .logo_column {
        left: auto; right: 0;
        -webkit-transform: translate(-6rem,-50%);
        -moz-transform: translate(-6rem,-50%);
        -ms-transform: translate(-6rem,-50%);
        -o-transform: translate(-6rem,-50%);
        transform: translate(-6rem,-50%);
    }
}

@media screen and (max-width:25em){
    .logo {
        width: 5rem;
    }
}

.logo_column .date_wrapper {
    position: absolute;
    left: 100%; top: 0; bottom: 0;
    width: 10rem; height: auto;
    border-left: 0.0625rem solid currentColor;
    font-variant-numeric: tabular-nums;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; 
}
.date_wrapper .date_wrapper_inner {
    -webkit-box-flex:0;
    -webkit-flex:0 0 100%;
    -ms-flex:0 0 100%;
    flex:0 0 100%;
    max-width:100%;
    padding: 0 0 0 1rem;
}
.date_wrapper del {
    line-height: 1.2;
    display: block;
}



/****************************************************************************
 * Toggler
 ****************************************************************************/
.navigation_toggle_wrapper {
    position: relative; z-index: 1010;
}
.navigation_toggle_wrapper .navigation_toggle{
    color: currentColor;
    position: relative; width: 2.25rem; height: 1.0625rem;
    text-align: center; display: block; cursor: pointer;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.nav_opened .navigation_toggle_wrapper .navigation_toggle{
    color: #FFFFFF;
}

.navigation_toggle_wrapper .navigation_toggle:before,
.navigation_toggle_wrapper .navigation_toggle:after{
    position: absolute; left: 50%; top: auto; bottom: auto; margin: 0 auto;
    width: 2.25rem; height: 0.0625rem; background-color: currentColor; content: '';
    border-radius: 0.25rem;
    -webkit-transform: translateY(0) translateX(-50%) rotate(0);
    -moz-transform: translateY(0) translateX(-50%) rotate(0);
    -ms-transform: translateY(0) translateX(-50%) rotate(0);
    -o-transform: translateY(0) translateX(-50%) rotate(0);
    transform: translateY(0) translateX(-50%) rotate(0);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navigation_toggle_wrapper .navigation_toggle:before{
    top: 0; box-shadow: 0 .5rem 0 0 currentColor;
}
.navigation_toggle_wrapper .navigation_toggle:after{
    bottom: 0;
}


.nav_opened .navigation_toggle_wrapper .navigation_toggle:before{
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    top: 50%; box-shadow: 0 0 0 0 transparent;
}

.nav_opened .navigation_toggle_wrapper .navigation_toggle:after{
    -webkit-transform: translateY(50%) translateX(-50%) rotate(45deg);
    -moz-transform: translateY(50%) translateX(-50%) rotate(45deg);
    -ms-transform: translateY(50%) translateX(-50%) rotate(45deg);
    -o-transform: translateY(50%) translateX(-50%) rotate(45deg);
    transform: translateY(50%) translateX(-50%) rotate(45deg);
    bottom: 50%;
}

/*
@media screen and (min-width:64em){
    .large_no_hamburger .navigation_toggle_wrapper {
        display: none;
    }
}
*/


/****************************************************************************
 * Navigation-Wrapper
 ****************************************************************************/
.navigation_wrapper{
    position: fixed; right: auto; left: 0; top: 0; 
    height: 100%; height: 100vh; 
    width: 100%; z-index: 1001; color: inherit;
    opacity: 0; pointer-events: none; visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    background-color: transparent;
}
.content_section.navigation_wrapper {
    padding-top: 6rem;
    padding-bottom: 2rem;
}

.navigation_wrapper > .row {
    margin: 0 auto;
    height: 100%;
}
.navigation_wrapper > .row > .columns {
    max-width: 35rem;
}
.navigation_wrapper_inner {
    height: 100%; position: relative;
}
.navigation_wrapper_inner:before {
    content: ''; position: absolute;
    top: -8rem; bottom: -8rem;
    left: -999rem; right: 0;
    width: auto; height: auto;
    background-color: #ffcc00;
}
.navigation_wrapper_inner > * {
    position: relative;
    z-index: 20;
}

.nav_opened .navigation_wrapper {
    opacity: 1; pointer-events: all; visibility: visible;
}
.navigation_toggle_wrapper:focus-within + .navigation_wrapper, 
.navigation_wrapper:focus-within { 
    opacity: 1; pointer-events: all; visibility: visible;
}

/****************************************************************************
 * Nav Item
 ****************************************************************************/
.nav_item_wrapper {
    overflow-x: auto;
    padding-left: 1rem;
    height: calc(100vh - 8rem);
}
.nav_item {
    padding: 0 0 2.5rem;
}
.nav_item_title {
    display: block;
    color: #FFFFFF;
    padding: 0 0 1rem;
}

.main_menu_wrapper .nav_item_title {
    padding: 0 0 0.5rem;
}

.nav_item .button {
    background-color: #FFFFFF;
    text-decoration: none;
}
.nav_item .button:hover,
.nav_item .button:focus {
    background-color: #000000;
    color: #ffcc00;
    text-decoration: none;
}

@media screen and (min-width:64em){
    .nav_item {
        padding: 0 0 3.625rem;
    }
}


/****************************************************************************
 * Menu
 ****************************************************************************/
.navigation_wrapper .menu {
    margin: 0;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.navigation_wrapper .menu li {
    margin: 0;
    /*padding: 0.0625em 0;*/
    padding: 0;
}
.navigation_wrapper .menu a {
    position: relative;
    padding: 0;
    display: inline-block;
	line-height: 2.75rem;
}

.navigation_wrapper a {
    color: inherit;
}
.navigation_wrapper a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
}

.menu li a {
    text-decoration: none;
}


@media screen and (min-width:64em){
    .large_no_hamburger .navigation_wrapper .menu {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}


/****************************************************************************
 * Social Menu
 ****************************************************************************/
.navigation_wrapper .social_menu_wrapper .menu {
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.navigation_wrapper .social_menu_wrapper .menu li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%; 
    padding: 0 2rem 0 0;
}
.navigation_wrapper .social_menu_wrapper .menu li a {
    font-size: 0;
    line-height: 1;
    padding: 0;
}
.navigation_wrapper .social_menu_wrapper .menu li a:hover {
    text-decoration: none;
}
.navigation_wrapper .social_menu_wrapper .menu li a:after {
    content: ''; width: 2.75rem; height: 2.75rem;
    text-align: center; border-radius: 50%; line-height: 2.75rem;
    background-color: #FFFFFF; color: #ffcc00;
    font-family: 'TypoFontAwesomeRegular';
    font-style: normal;font-size: 1.625rem;display: block;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.navigation_wrapper .social_menu_wrapper .menu li.instagram a:after {content: 'i';}
.navigation_wrapper .social_menu_wrapper .menu li.facebook a:after {content: 'f';}
.navigation_wrapper .social_menu_wrapper .menu li.youtube a:after {content: 'y';}
.navigation_wrapper .social_menu_wrapper .menu li.tiktok a:after {content: 't';}

.navigation_wrapper .social_menu_wrapper .menu li a:hover:after {
    background-color: #000000;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}


/****************************************************************************
 * Badge
 ****************************************************************************/
.badge_wrapper {
    position: fixed;
    top: 0; left: 0.5rem; right: 0.5rem;
    width: auto; height: 0;
    pointer-events: none;
}
.badge {
    position: absolute;
    top: 4rem; right: 0;
    pointer-events: all;
}

.badge img {
    width: 4rem;
}

.badge:hover img {
    -webkit-animation: rotate 1s ease;
    -moz-animation: rotate 1s ease;
    -ms-animation: rotate 1s ease;
    -o-animation: rotate 1s ease;
    animation: rotate 1s ease;
}

@keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media screen and (max-width:39.9375em){
    .badge_wrapper {
        display: none;
    }
}

@media screen and (min-width: 40em){
    .badge_wrapper {
        left: 2rem; right: 2rem;
        max-width: 92rem;
        margin: 0 auto;
    }
    .badge {
        top: 1.5rem;
    }
    .badge img{
        width: 5rem;
    }
}

@media screen and (min-width: 64em){
    .badge img{
        width: 6rem;
    }
}


/****************************************************************************
 * Language Switch
 ****************************************************************************/
.typo_language_switch_wrapper {
    position: relative;
    padding-top: 0;
    text-align: center;
    width: 4rem;
    font-family: 'Maga';
    font-weight: 700;
}

.typo_language_switch_wrapper.has_dropdown > .current{
    display: inline-block;
    height: 4rem; line-height: 4rem;
    position: relative;
    text-transform: uppercase;
    font-size: 1rem;
}
.typo_language_switch_wrapper.has_dropdown > .current:before {
    content: ''; position: absolute;
    top: 50%; left: -1.25rem; width: 1rem; height: 1rem;
    background: url(../img/globe-light.svg) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.typo_language_switch_wrapper.has_dropdown .typo_language_switch_nav{
    position: absolute; margin: 0; padding: 0.5rem 0.25rem;
    background-color: #FFFFFF; color: #0A0A0A; border-radius: 0.375rem;
    left:50%; top: 100%; opacity: 0; visibility: hidden; width: 3rem;
    pointer-events: none; box-shadow: 0 0 1rem rgba(0,0,0,0.125);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity .25s ease, visibility .25s ease;
    -moz-transition: opacity .25s ease, visibility .25s ease;
    -ms-transition: opacity .25s ease, visibility .25s ease;
    -o-transition: opacity .25s ease, visibility .25s ease;
    transition: opacity .25s ease, visibility .25s ease;
}
.typo_language_switch_wrapper.has_dropdown:hover .typo_language_switch_nav,
.typo_language_switch_wrapper.has_dropdown:focus .typo_language_switch_nav,
.typo_language_switch_wrapper.has_dropdown:hover .typo_language_switch_nav:hover{
    opacity: 1; visibility: visible;
    pointer-events: all;
}

.typo_language_switch_wrapper.has_dropdown .typo_language_switch_nav li {
    display: block; padding: 0.25rem; text-align: center;
    margin: 0;
}
.typo_language_switch_wrapper.has_dropdown .typo_language_switch_nav li a {
    padding: 0;
    text-decoration: none;
}
.typo_language_switch_wrapper .typo_language_switch_nav li a:after {
    left: 0; right: 0;
}

@media screen and (min-width:40em){
    .typo_language_switch_wrapper {
        width: 8rem;
    }
}

@media screen and (min-width:64em){
    .typo_language_switch_wrapper {
        width: 12rem;
    }
}