.nav { padding: 1rem 5vw; display: flex; justify-content: flex-start; align-items: center; background-color: $color-white; position: fixed; top: 0; left: 0; width: 100%; z-index: 5; @include respond(1130px) { flex-direction: row; justify-content: space-between; } @include respond(970px) { padding: 1rem 3rem; } &--expanded { .nav__background { transform: scaleY(1); pointer-events: initial; } .nav__close { visibility: visible; opacity: 1; pointer-events: initial; } .nav__menu-wrapper { visibility: visible; opacity: 1; pointer-events: initial; } } &__hamburger { cursor: pointer; height: 3rem; width: 5rem; display: flex; flex-direction: column; justify-content: space-between; display: none; @include respond(1130px) { display: flex; } } &__hamburger-line { pointer-events: none; display: block; width: 100%; height: 2px; background-color: $color-primary; } &__background { position: absolute; top: 0; left: 0; background-color: $color-white; height: 100vh; width: 100%; z-index: 4; pointer-events: none; transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s ease-out; } &__close { position: absolute; top: 5rem; right: 5rem; z-index: 10; font-size: 4rem; height: 6rem; width: 6rem; background-color: transparent; border: none; color: $color-primary; pointer-events: none; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s; } &__logo-wrapper { } &__logo { display: block; height: 6rem; @include respond(1130px) { margin: 0 auto; } } &__menu-wrapper { margin-left: auto; display: flex; justify-content: flex-start; align-items: center; position: relative; @include respond(1130px) { margin-left: unset; width: 100%; } @include respond(1130px) { flex-direction: column-reverse; } @include respond(1130px) { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; z-index: 6; justify-content: center; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s 0.3s ease-out; } } &__search-wrapper { flex: 1; width: 100%; min-width: 25rem; margin-right: 5rem; @include respond(1500px) { min-width: unset; } @include respond(1070px) { max-width: 50rem; } @include respond(1130px) { flex: unset; margin-right: unset; margin-top: 3rem; width: 80%; } @include respond(480px) { min-width: auto; } } &__list { display: flex; justify-content: flex-start; align-items: center; list-style: none; @include respond(1130px) { flex-direction: column; width: 100vw; padding: 5rem 0; overflow-y: auto; } } &__list-item { &--logo { display: none; @include respond(1130px) { display: block; margin: 0 auto; } } @include respond(1130px) { &:not(:last-child) { width: 100%; max-width: 25rem; border-bottom: 1px solid $color-gray-light; text-align: center; } } } &__link { text-decoration: none; color: $color-gray; display: block; font-size: 2rem; padding: 3rem 1rem; &--active { font-size: 1.8rem; font-weight: bold; } } }