.nav {display: flex; justify-content: space-between; align-items: flex-end; padding: 20px 100px; background-color: var(--primary-color); color: white;}
.logo-main img {width: 125px;}
.nav-items {display: flex;}
.nav-items a {display: block; margin-right: 40px; text-decoration: none; color: white; font-weight: 200; white-space: nowrap;}
.nav-items a:last-child {margin-right: 0;}
.nav-menu {position: relative; display: none; width: 32px; height: 32px; margin-top: 3px; cursor: pointer; user-select: none;}
.nav-menu-line {position: absolute; width: 32px; height: 4px; background-color: var(--schoolsnz-blue); transition-duration: .1s; transform-origin: 50% 50%; transform: rotate(0deg);}
.nav-menu-line:first-child {top: 4px; left: 0;}
.nav-menu-line:nth-child(2) {top: 14px; left: 0;}
.nav-menu-line:nth-child(3) {top: 24px; left: 0;}
.nav-opening .nav-menu-line {top: 14px;}
.nav-open .nav-menu-line:first-child {top: 14px; transform: rotate(45deg);}
.nav-open .nav-menu-line:last-child {top: 14px; transform: rotate(-45deg);}
.nav-open .nav-menu-line:nth-child(2) {display: none;}

@media screen and (max-width: 460px) {
    .nav {position: relative; align-items: center; padding: 15px 20px 10px 20px;}
    .nav-menu {display: block;}
    .logo-main img {width: 59px;}
    .nav-items {display: none;}
    .nav-open .nav-items {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--primary-color);
        padding: 10px 20px 20px;
        z-index: 100;
    }
    .nav-open .nav-items a {
        margin-right: 0;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .nav-open .nav-items a:last-child {
        border-bottom: none;
    }
}