/***************************************************************************
* Default Settings
****************************************************************************/
.wrapper {
    --topbar-height: 5rem;
    --topbar-box-width: 8rem;
    --topbar-transition: all .5s ease;
}
@media screen and (min-width:64em){
    .wrapper {
        /*--topbar-height: 10rem;
        --topbar-box-width: 14rem;*/
        --topbar-height: 6rem;
        --topbar-box-width: 10rem;
    }
    .wrapper:has( > .scrolled) {
        --topbar-height: 6rem;
        --topbar-box-width: 10rem;
    }
}

@media screen and (min-width:100em){
    .wrapper {
        --topbar-height: 10rem;
        --topbar-box-width: 14rem;
    }
    .wrapper:has( > .scrolled) {
        --topbar-height: 6rem;
        --topbar-box-width: 10rem;
    }
}

@media screen and (min-width:120em){
    .wrapper {
        --topbar-height: 12rem;
        --topbar-box-width: 18rem;
    }
    .wrapper:has( > .scrolled) {
        --topbar-height: 7rem;
        --topbar-box-width: 12rem;
    }
}

/***************************************************************************
* Topbar
****************************************************************************/
.wrapper {
    padding-top: var(--topbar-height);
    transition: var(--topbar-transition);
}
.topbar {
    box-shadow: none;
    background-color: #FFFFFF;
    padding: 0;
    height: var(--topbar-height);
    transition: var(--topbar-transition);
}
.topbar:after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; top: 0;
    pointer-events: none; z-index: 2000;
    border-bottom: var(--typo-border-width) solid #000000;
}
.topbar .row {
    max-width: none;
    width: 100%;
}

@media screen and (min-width:64em){
    .wrapper {
        padding-top: var(--topbar-height);
    }
}



/***************************************************************************
* Logo
****************************************************************************/
.logo_wrapper picture.data_ratio {
    width: var(--topbar-box-width);
    height: var(--topbar-height);
    border-right: var(--typo-border-width) solid #000000;
    transition: var(--topbar-transition);
}
@media screen and (min-width:64em){
    .logo_wrapper picture.data_ratio {
        width: var(--topbar-box-width);
        height: var(--topbar-height);
        transition: var(--topbar-transition);
    }
}

/***************************************************************************
* Navigation wrapper
****************************************************************************/
.navigation_wrapper {overflow: auto;}
.navigation_wrapper .menu_wrapper {
    height: auto;
    padding: 6em 2em 2em;
}
@media screen and (min-width:64em){
    .navigation_wrapper .menu_wrapper .menu {
        /*padding-right: var(--topbar-box-width);*/
        padding-left: calc(15rem - var(--topbar-box-width));
        padding-right: 15rem;
        /*padding-bottom: 2em;*/
        padding-bottom: 1rem;
        transition: all .5s ease;
    }
    .scrolled .navigation_wrapper .menu_wrapper .menu {
        padding-bottom: 1rem;
    }
}

/***************************************************************************
* Sub Menu Wrapper || Sidebar
****************************************************************************/
.navigation_wrapper .sub_menu_wrapper {
    padding: 0 2em 2em;
    width: 100%;
}
.navigation_wrapper .sub_menu_wrapper > .menu {
    width: 100%;
}
.sub_menu_wrapper .menu li {
    text-align: center;
}
.sub_menu_wrapper .menu li a {
    display: inline-block;
}
.sub_menu_wrapper .menu li:not([class*="_bg"]) a {
    background-color: #000000;
    color: #FFFFFF;
}
@media screen and (min-width:64em){
    .navigation_wrapper .sub_menu_wrapper {
        position: fixed;
        top: var(--topbar-height);
        transition: var(--topbar-transition);
        left: 0; right: 0;
        padding: 2em 0;
        background-color: transparent;
        pointer-events: none;
    }
    .scrolled .navigation_wrapper .sub_menu_wrapper {
        left: 0;
    }
    .navigation_wrapper .sub_menu_wrapper .menu {
        justify-content: end;
        align-items: end;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .navigation_wrapper .sub_menu_wrapper .menu li {
        padding-left: 0; padding-right: 0;
    }
    .navigation_wrapper .sub_menu_wrapper .menu li a {
        padding-left: 4rem;
        padding-right: 2rem;
        transform: translate(100%,0);
        left: -3rem; display: block;
        height: 3rem; line-height: 3rem;
        padding-top: 0; padding-bottom: 0;
        transition: all .25s ease;
        pointer-events: all;
        position: relative;
    }
    .navigation_wrapper .sub_menu_wrapper .menu li:not(.inner_green_bg) a:hover {
        left: 0;
        transform: translate(0,0);
    }
    .navigation_wrapper .sub_menu_wrapper .menu li a:before {
        content: 'a'; left: 0; width: 3rem;
        height: 3rem; text-align: center;
        line-height: 3rem; position: absolute;
        top: 0;
    }
    .navigation_wrapper .sub_menu_wrapper .menu li.inner_violett_bg a:before {content: 'C'}
    .navigation_wrapper .sub_menu_wrapper .menu li.inner_turquoise_bg a:before {content: 'T'}
    .navigation_wrapper .sub_menu_wrapper .menu li.inner_orange_bg a:before {content: 'L'}
    .navigation_wrapper .sub_menu_wrapper .menu li.inner_red_bg a:before {content: 'S'}
	.navigation_wrapper .sub_menu_wrapper .menu li.inner_green_bg a:before {content: '-E'}
}

/***************************************************************************
* User Info
****************************************************************************/
.navigation_wrapper .user_info {
    padding: 0 2em 1em;
    text-align: center;
}

.navigation_wrapper .user_info .user_name,
.navigation_wrapper .user_info .logout {
    font-size: 1.25rem;
}

.navigation_wrapper .user_info > * {
    padding: 0.5rem;
}
.navigation_wrapper .user_info > * > * {
    margin: 0;
}

.navigation_wrapper .user_info .toogle_register {
    padding: 0.625rem 0;
    display: inline-block;
}

.navigation_wrapper .user_info .icon_item a {
    padding: 0.5em;
    font-size: 1.375em;
}

@media screen and (min-width:64em){
    .navigation_wrapper .user_info {
        position: fixed;
        top: 0; right: 0;
        padding: 0 1rem 2rem;
        padding-bottom: 1rem;
        width: var(--topbar-box-width);
        min-width: 15rem;
        height: var(--topbar-height);
        transition: var(--topbar-transition);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: end;
        justify-content: center;
        border-left: var(--typo-border-width) solid currentColor;
    }
    .scrolled .navigation_wrapper .user_info {
        padding-bottom: 1rem;
    }
    .navigation_wrapper .user_info > * {
        flex: 0 0 auto;
    }
    .navigation_wrapper .user_info > .small-12 {
        flex: 0 0 100%;
    }
}

/***************************************************************************
* Languages
****************************************************************************/
.topbar .typo_languages > .current {
    display: none;
    text-transform: uppercase;
}
.topbar .typo_languages_inner {
    text-align: center;
}
.topbar .typo_languages_inner > * {
    display: inline-block;
    width: auto; padding: 0.5em;
    vertical-align: middle;
    font-size: 1.5rem;
}

@media screen and (min-width:64em){
    .topbar .typo_languages {
        position: fixed;
        top: 0; width: 5em;
        left: var(--topbar-box-width);
        height: var(--topbar-height);
        border-right: var(--typo-border-width) solid #000000;
        transition: var(--topbar-transition);
    }
    .topbar .typo_languages > .current {
        display: inline-block;
        position: absolute;
        bottom: 0; left: 50%;
        transform: translate(-50%,0);
        padding-bottom: 1rem;
        font-size: var(--typo-font-size-h3);
    }
    .topbar .typo_languages_inner {
        position: absolute;
        top: 100%; width: calc(5em + var(--typo-border-width));
        left: calc(var(--typo-border-width) * -1); 
        background-color: #FFFFFF;
        border: var(--typo-border-width) solid #000000;
        margin-top: calc(var(--typo-border-width) * -1);
        opacity: 0; visibility: hidden;
        pointer-events: none;
    }
    .topbar .typo_languages:hover .current + .typo_languages_inner,
    .topbar .typo_languages .current:hover + .typo_languages_inner,
    .topbar .typo_languages .current + .typo_languages_inner:hover {
        opacity: 1; visibility: visible;
        pointer-events: all;
    }
    .topbar .typo_languages_inner  > * {
        padding: 0.125em 0.5em;
        width: 3em;
    }
}

/***************************************************************************
* Menu
****************************************************************************/
.sub_menu_section .menu li,
.topbar .menu li {
    padding: 0.25em 0.5em;
}
.sub_menu_section .menu li a,
.topbar .menu li a {
    font-size: var(--typo-font-size-h2);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    padding: 0.25em 0.5em;
}


@media screen and (min-width:64em){
    .sub_menu_section .menu li a,
    .topbar .menu li a {
        font-size: var(--typo-font-size-h3);
    }
}


.menu_wrapper .menu li a {
    position: relative;
}
.menu_wrapper .menu li a:after {
    content: ''; position: absolute;
    bottom: 0; height: var(--typo-border-width);
    width: 0; background-color: currentColor;
    transition: all .25s ease;
    left: 0.75rem;
}
.menu_wrapper .menu li.current-menu-item a:after,
.menu_wrapper .menu li a:hover:after {
    width: calc(100% - 1.5rem);
}

@media screen and (min-width:64em){
    .topbar .menu li {
        padding: 0;
    }
}

/***************************************************************************
* Menu Topbar Mobile
****************************************************************************/
.topbar .menu li {
    text-align: center;
}
.topbar .menu li a {
    display: inline-block;
}

/***************************************************************************
* Sub Menu Section
****************************************************************************/
.sub_menu_section {
    display: none;
}

.sub_menu_section .menu li a {
    position: relative;
}
.sub_menu_section .menu li a:after {
    content: ''; position: absolute;
    bottom: calc(var(--typo-border-width) * -2); height: var(--typo-border-width);
    width: 0; background-color: #000;
    transition: all .25s ease;
    left: 0;
}
.sub_menu_section .menu li.current-menu-item a:after,
.sub_menu_section .menu li a:hover:after {
    width: 100%;
}

.sub_menu_section .menu li.inner_violett_bg a:after {background-color: var(--typo-color-violett);}
.sub_menu_section .menu li.inner_turquoise_bg a:after {background-color: var(--typo-color-turquoise);}
.sub_menu_section .menu li.inner_orange_bg a:after {background-color: var(--typo-color-orange);}
.sub_menu_section .menu li.inner_red_bg a:after {background-color: var(--typo-color-red);}
.sub_menu_section .menu li.inner_green_bg a:after {background-color: var(--typo-color-green);}

    

@media screen and (min-width:40em){
    .sub_menu_section {
        display: block;
    }
}