.qm-header-nav {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1250;

    background-color: #000000BB;
    color: #fff;

    -webkit-transition: margin-top 0.8s ease-in-out, color 0.8s ease-in-out, background-color 0.8s ease-in-out;
    -moz-transition: margin-top 0.8s ease-in-out, color 0.8s ease-in-out, background-color 0.8s ease-in-out;
    -o-transition: margin-top 0.8s ease-in-out, color 0.8s ease-in-out, background-color 0.8s ease-in-out;
    transition: margin-top 0.8s ease-in-out, color 0.8s ease-in-out, background-color 0.8s ease-in-out;
}

.qm-header-nav a {
    color: #FFF;
}

.qm-header-nav .lab-open-btn::before, .qm-header-nav .lab-open-btn::after {
    background-color: #FFF;
}

.qm-header-nav.qm-header-nav-hidden {
    margin-top: -130px;
}

.qm-header-nav-menu {
    display: flex;
    position: relative;
    height: 130px;
}

.qm-header-nav-logo {
    position: absolute;
    height: 130px;

    left: 50%;
    transform: translate(-50%, 0%);
}

.qm-header-nav-logo:hover {
    cursor: pointer;
}

.qm-header-nav-btn-menu {
    position: absolute;

    top: 30px;
    left: 15px;
}

.qm-header-nav-contact {
    position: absolute;

    top: 30px;
    right: 15px;
}

.qm-header-nav-items {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    height: 50px;

    padding-left: 10vw;
    padding-right: 10vw;

    border-top: 1px solid #FFF;
}

.qm-header-nav-item {
    position: relative;
    width: 200px;
}

.qm-header-nav-items-container {
    display: flex;
    width: 100%;
    align-self: flex-end;
}

.qm-header-nav-submenu {
    position: fixed;
    visibility: collapse;
    opacity: 0;
    z-index: 1255;

    width: 100%;
    min-height: 500px;

    margin-top: 50px;
    padding: 0;

    color: #fff;
    background-color: #000000BB;


    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.qm-header-nav:not(.qm-header-nav-hidden) .qm-header-nav-items-container.qm-header-nav-submenu-show .qm-header-nav-submenu {
    visibility: visible;
    opacity: 1;
}

.qm-header-nav-submenu-list-container {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: stretch;

    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 30px;
}

.qm-header-nav-submenu-list {
    position: relative;
    width: 200px;

    opacity: 0.2;
    padding-top: 30px;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.qm-header-nav-submenu-list.qm-header-nav-submenu-list-active {
    opacity: 1;
}

.qm-header-nav-submenu-list-item-text {
    display: inline-block;
    border: none;
    background: none;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none !important;
    position: relative;
    padding: 15px 0px;
}

.qm-header-nav-submenu-list-item-text::after {
    content: '';
    position: absolute;
    width: 0%;
    left: 0px;
    height: 1px;
    bottom: 10px;
    background-color: #FFF;
    transition: width 500ms ease-in-out;
}

.qm-header-nav-submenu-list-item:hover .qm-header-nav-submenu-list-item-text::after {
    width: 100%;
}

.qm-header-nav-item-text {
    font-size: 1.1em;
}

.qm-header-nav-item-text,
.qm-underline-left-right {
    display: inline-block;
    border: none;
    background: none;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none !important;
    position: relative;
}

.qm-header-nav-item-text::after,
.qm-underline-left-right::after {
    content: '';
    position: absolute;
    width: 0%;
    left: 0px;
    height: 1px;
    bottom: -2px;
    background-color: #FFF;
    transition: width 500ms ease-in-out;
}

.qm-header-nav-item-text:hover::after,
.qm-underline-left-right:hover::after {
    width: 100%;
}

.qm-header-nav-contact .qm-header-nav-language {
    padding-left: 5px;
    padding-right: 5px;
}

.qm-header-nav-contact .qm-header-nav-language.active {
    font-weight: 600;
}

.qm-header-nav-contact .qm-header-nav-language:not(:last-child) {
    border-right: 1px solid #FFF;
}


.qm-side-nav {
    visibility: collapse;

    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;

    z-index: 1500;

    background-color: rgba(0, 0, 0, .0);

    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}

.btn-side-nav:hover {
    cursor: pointer;
}

body.show-side-nav {
    overflow: hidden;
}

body.show-side-nav .qm-side-nav {
    visibility: visible;
    background-color: rgba(0, 0, 0, .0);
}

body.show-side-nav-panel .qm-side-nav {
    background-color: #000000BB;
}

.qm-header-sidebar-background {
    position: absolute;

    width: 600px;

    top: 0px;
    left: -600px;

    height: 100%;

    backdrop-filter: blur(10px);
    background-color: rgb(0,0,0,0.6);


    -webkit-transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
    -moz-transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
    -o-transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
    transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

.qm-header-sidebar-background.qm-header-sidebar-background-show {
    left: 0px;
}

.qm-header-sidebar {
    position: relative;
    width: 600px;
    opacity: 0;

    left: -600px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;

    gap: 0px 0px;
    grid-template-areas:
        "top"
        "middle"
        "bottom";

    z-index: 1200;

    color: #fff;

    -webkit-transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
    -moz-transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
    -o-transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
    transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

.qm-header-sidebar.qm-header-sidebar-active {
    opacity: 1;
    left: 0px;
}

.qm-header-sidebar-top {
    padding: 30px;
    padding-top: 130px;
    padding-bottom: 0px;
    grid-area: top;
}

.qm-header-sidebar-middle {
    padding: 0px 30px;
    padding-top: 30px;
    grid-area: middle;
    overflow: auto;
}

.qm-header-sidebar-bottom {
    padding: 30px;
    padding-top: 0px;
    padding-bottom: 130px;
    grid-area: bottom;
}


.qm-header-sidebar-column-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    overflow-y: auto;
    max-height: 800px;
    margin-left: -100%;
    margin-right: 100%;

    -webkit-transition: margin-left 1.3s ease-in-out, margin-right 1.3s ease-in-out;
    -moz-transition: margin-left 1.3s ease-in-out, margin-right 1.3s ease-in-out;
    -o-transition: margin-left 1.3s ease-in-out, margin-right 1.3s ease-in-out;
    transition: margin-left 1.3s ease-in-out, margin-right 1.3s ease-in-out;
    transition-timing-function: cubic-bezier(.58,-0.19,.51,.88);
}

.qm-header-sidebar.qm-header-sidebar-active .qm-header-sidebar-column-wrapper {
    margin-left: 0px;
    margin-right: 0px;
}

.qm-header-sidebar-line-wrapper {
    margin-left: -100%;
    margin-right: 100%;

    -webkit-transition: margin-left 1.0s ease-in-out, margin-right 1.0s ease-in-out;
    -moz-transition: margin-left 1.0s ease-in-out, margin-right 1.0s ease-in-out;
    -o-transition: margin-left 1.0s ease-in-out, margin-right 1.0s ease-in-out;
    transition: margin-left 1.0s ease-in-out, margin-right 1.0s ease-in-out;
    transition-timing-function: cubic-bezier(.2,.62,.49,.97);
}

.qm-header-sidebar.qm-header-sidebar-active .qm-header-sidebar-line-wrapper {
    margin-left: 0px;
    margin-right: 0px;
}

.qm-header-sidebar-column {
    width: 250px;
}

.qm-header-sidebar-item-text {
    font-size: 1.2em;
    padding-bottom: 20px;
}

.qm-header-sidebar-item-text {
    color: #FFF;
}

.qm-header-sidebar-item {
    display: block;
    padding: 2.5px 0px;
}

.qm-header-sidebar-item-underline {
    display: inline-block;
    border: none;
    background: none;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none !important;
    position: relative;
}

a.qm-header-sidebar-item-underline {
    color: #FFF !important;
}

.qm-header-sidebar-item-underline:after {
    content: '';
    position: absolute;
    width: 0%;
    left: 0px;
    height: 1px;
    bottom: 0px;
    background-color: #FFF;
    transition: width 500ms ease-in-out;
}

.qm-header-sidebar-item:hover .qm-header-sidebar-item-underline:after {
    width: 100%;
}

.qm-mobile-nav-subitem-underline {
    display: inline-block;
    border: none;
    background: none;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none !important;
    position: relative;
}

a.qm-mobile-nav-subitem-underline {
    color: #FFF !important;
}

.qm-mobile-nav-subitem-underline:after {
    content: '';
    position: absolute;
    width: 0%;
    left: 0px;
    height: 1px;
    bottom: 0px;
    background-color: #FFF;
    transition: width 500ms ease-in-out;
}

.qm-mobile-nav-subitem:hover .qm-mobile-nav-subitem-underline:after {
    width: 100%;
}

.qm-mobile-nav {
    position: fixed;
    z-index: 1100;

    top: -100%;
    bottom: 0px;
    left: 0px;
    right: 0px;

    width: 100%;
    height: 100%;

    margin: 0px;

    color: #FFF;
    background-color: rgba(0, 0, 0, .0);

    -webkit-transition: background-color 0.4s ease-in-out;
    -moz-transition: background-color 0.4s ease-in-out;
    -o-transition: background-color 0.4s ease-in-out;
    transition: background-color 0.4s ease-in-out;
}


.qm-mobile-nav {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0px 0px;
    grid-template-areas:
        "top"
        "middle"
        "bottom";
}

.qm-mobile-nav-top {
    grid-area: top;
}

.qm-mobile-nav-middle {
    grid-area: middle;
    overflow: auto;
}

.qm-mobile-nav-bottom {
    grid-area: bottom;
}

.qm-mobile-nav-item {
    font-size: larger;
    font-weight: 600;
    padding: 15px;
}

.qm-mobile-nav-subitem {
    padding: 10px;
}

.qm-mobile-nav-items {
    margin-top: -100%;

    -webkit-transition: margin-top 0.4s ease-in-out;
    -moz-transition: margin-top 0.4s ease-in-out;
    -o-transition: margin-top 0.4s ease-in-out;
    transition: margin-top 0.4s ease-in-out;
}

.qm-mobile-nav-subitem-underline {
    display: inline-block;
    border: none;
    background: none;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none !important;
    position: relative;
}

.qm-mobile-nav-subitem-underline:after {
    content: '';
    position: absolute;
    width: 0%;
    left: 0px;
    height: 1px;
    bottom: 0px;
    background-color: #FFF;
    transition: width 500ms ease-in-out;
}

.qm-mobile-nav-subitem:hover .qm-mobile-nav-subitem-underline:after {
    width: 100%;
}

body.show-mobile-nav {
    overflow: hidden;
}

body.show-mobile-nav .qm-mobile-nav {
    top: 0px;
    background-color: #000000BB;
}
body.show-mobile-nav .qm-mobile-nav-items {
    margin-top: 0px;
}
.btn-mobile-nav:hover {
    cursor: pointer;
}