header {
    position: fixed;
    z-index: 4;
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
    background-color: #00504A;
}

header #header-nav #nav-menu-btt {
    display: none;
}

header #header-nav #nav-menu .no-link {
    cursor: pointer;
}

header #header-nav .nav-item-dropdown {
    display: none;
}

header #header-nav #nav-menu .ln-r {
    display: none;
}

header #header-nav .mh-back-btt {
    display: none;
}

header #header-nav .nav-item-dropdown .ni-arrow {
    display: none;
}

@media all and (min-width: 1330px) {
    header {
        height: 119px;
        transition: 200ms;
    }

    header #header-logo {
        margin-top: 5px;
        margin-left: 57px;
    }

    header #header-logo img {
        width: auto;
        max-width: 100%;
        max-height: 40px;
        transition: 200ms;
    }

    header #header-nav #nav-menu {
        margin-right: 57px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        align-content: stretch;
    }

    header #header-nav #nav-menu .header-nav-item {
        padding: 18px 0;
        transition: opacity 150ms linear;
    }

    header #nav-menu:hover:has(> .header-nav-item:not(.button-nav):hover) > .header-nav-item:not(:hover):not(.button-nav) {
        opacity: 0.5;
    }

    header #header-nav #nav-menu:hover > div.header-nav-item:hover {
        opacity: 1;
    }

    header #header-nav #nav-menu .header-nav-item:not(:last-child):not(:first-child) {
        padding-right: 14px;
        padding-left: 14px;
        /*margin-right: 38px;*/
    }

    header #header-nav #nav-menu .header-nav-item:first-child {
        padding-right: 14px;
    }

    header #header-nav #nav-menu .header-nav-item:last-child {
        padding-left: 15px;
    }

    header #header-nav .nav-item-dropdown .ni-arrow {
        display: flex;
        flex-direction: row;
        width: 20px;
        height: 20px;
        margin-bottom: -20px;
        transform: translateY(-20px);
    }

    header #header-nav #hsub0.nav-item-dropdown .ni-arrow {
        transform: translateY(-20px) translateX(34px);
    }

    header #header-nav #hsub1 .ni-arrow {
        transform: translateY(-20px) translateX(45px);
    }

    header #header-nav #hsub2 .ni-arrow {
        transform: translateY(-20px) translateX(16px);
    }

    header #header-nav #hsub3 .ni-arrow {
        transform: translateY(-20px) translateX(13px);
    }

    header #header-nav .nav-item-dropdown .ni-arrow .ni-arrow-left {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #00433e;
    }

    header #header-nav .nav-item-dropdown .ni-arrow .ni-arrow-right {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #00433e;
    }

    header #header-nav #nav-menu .header-nav-item .nav-item-dropdown {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        transform: translateY(10px);
        padding: 10px 8px;
        text-align: left;
        display: flex;
        flex-direction: column;
        /*flex-wrap: wrap-reverse;*/
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
        background-color: #00433e;
        border-radius: 8px;
        box-shadow: 9px 8px 22px -13px rgba(0,0,0,0.75); /*, inset 0 0 0 2px #004540;*/
        -webkit-box-shadow: 9px 8px 22px -13px rgba(0,0,0,0.75); /*, inset 0 0 0 2px #004540;*/
        -moz-box-shadow: 9px 8px 22px -13px rgba(0,0,0,0.75); /*, inset 0 0 0 2px #004540;*/
        transition-property: opacity, visibility;
        transition-duration: 340ms, 0ms;
        transition-delay: 0ms, 340ms;
    }

    header #header-nav #nav-menu .header-nav-item:hover .nav-item-dropdown {
        visibility: visible;
        opacity: 1;
        transition-delay: 0ms, 0ms;
    }

    header #header-nav .nav-item-dropdown a {
        padding: 8px 10px;
        border-radius: 5px;
    }

    header #header-nav .nav-item-dropdown a:hover {
        background-color: #E86138;
    }

    header #header-nav #nav-menu .nav-opt a {
        color: white;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        text-decoration: none;
    }

    header #header-nav #nav-menu .nav-butt {
        cursor: pointer;
        padding: 18px 21.8px;
        font-size: 14px;
        letter-spacing: 0.03em;
        background-color: #E86138;
        border-radius: 16Q;
        transition: 300ms;
    }

    header #header-nav #nav-menu .nav-butt:hover {
        color: #fff;
        background-color: rgb(170, 67, 43);
    }
}

@media all and (max-width: 1330px) {
    header {
        height: 119px;
        transition: 120ms ease-in-out;
    }

    #doc-header.white-nav {
        background-color: #fff;
    }

    header #header-logo {
        margin-top: 5px;
        margin-left: 30px;
    }

    header #header-logo img {
        width: auto;
        max-width: 100%;
        max-height: 40px;
    }

    header #header-nav #nav-menu {
        position: fixed;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 100%;
        left: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: stretch;
        background-color: #fff;
        transition: top 220ms ease-in-out ;
    }

    header #header-nav #nav-menu.show-nav {
        top: 0;
    }

    header #header-nav #nav-menu.menu-push-left {
        left: -100%;
    }

    header #header-nav #nav-menu div:not(:first-child) {
        margin-top: 23px;
    }

    header #header-nav #nav-menu .no-link div {
        cursor: default;
    }

    header #header-nav #nav-menu .no-link a {
        cursor: pointer;
    }

    header #header-nav #nav-menu .header-nav-item .m-nav-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        align-content: stretch;
    }

    header #header-nav #nav-menu .nav-opt a {
        color: #00504A;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 50px;
        font-weight: 400;
        text-decoration: none;
    }

    header #header-nav #nav-menu .nav-opt.no-link a {
        /*margin-right: 15px;*/
    }

    header #header-nav #nav-menu .header-nav-item .ln-r {
        width: 20px;
        height: 24px;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
        transform: translateY(-14px);
    }

    header #header-nav #nav-menu .header-nav-item .ln-r div {
        width: 100%;
        height: 2px;
        background-color: #00504A;
    }

    header #header-nav #nav-menu .header-nav-item .ln-r div:first-child {
        transform: translateY(5px) rotate(45deg);
    }

    header #header-nav #nav-menu .header-nav-item .ln-r div:last-child {
        transform: translateY(-5px) rotate(-45deg);
    }

    header #header-nav #nav-menu .header-nav-item .nav-butt {
        position: absolute;
        left: calc(50% - 98.8px);
        bottom: 6%;
        padding: 16px 28px;
        color: #fff;
        font-size: 18px;
        letter-spacing: 0.03em;
        background-color: #E86138;
        border-radius: 16Q;
    }

    header #header-nav #nav-menu-btt {
        width: 35px;
        height: 20px;
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
    }

    header #header-nav #nav-menu-btt div {
        width: 100%;
        height: 1px;
        background-color: #fff;
        transition: transform 110ms;
    }

    header #header-nav #nav-menu-btt.show-nav-menu div:first-child {
        transform: translateY(5px) rotate(-45deg);
        background-color: #00504A;
    }

    header #header-nav #nav-menu-btt.show-nav-menu div:last-child {
        transform: translateY(-5px) rotate(45deg);
        background-color: #00504A;
    }

    header #header-nav #nav-menu .nav-item-dropdown {
        position: fixed;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: stretch;
        transition: left 220ms ease-in-out ;
        background-color: #fff;
    }

    header #header-nav #nav-menu .nav-item-dropdown a:not(:first-child) {
        margin-top: 23px;
    }

    header #header-nav #nav-menu .nav-item-dropdown.sub-menu-show {
        left: 0;
    }

    header #header-nav #nav-menu .mh-back-btt {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        align-content: stretch;
        opacity: 50%;
    }

    header #header-nav #nav-menu .header-nav-item .ln-l {
        width: 20px;
        height: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
        transform: translateY(8px) translateX(-4px);
    }

    header #header-nav #nav-menu .header-nav-item .ln-l div {
        width: 100%;
        height: 2px;
        background-color: #00504A;
    }

    header #header-nav #nav-menu .header-nav-item .ln-l div:first-child {
        transform: translateY(5px) rotate(-45deg);
    }

    header #header-nav #nav-menu .header-nav-item .ln-l div:last-child {
        transform: translateY(-5px) rotate(45deg);
    }
}

@media all and (max-width: 500px) {
    header #header-nav #nav-menu .nav-opt a {
        color: #00504A;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 40px;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
    }
}

@media all and (max-width: 375px) {
    header #header-nav #nav-menu .nav-opt a {
        color: #00504A;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 36px;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
    }
}