// === Header === .header { top: 0; left: 0; right: 0; width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.96); border-bottom: solid 2px #e5e8ed; position: fixed; will-change: height; transition: height 0.1s linear, transform 0.2s ease-out, box-shadow 0.2s ease-out; transform: translate3d(0, 0, 0); z-index: 777; &__inner { top: 50%; width: 100%; height: 60px; margin-top: -30px; position: relative; z-index: 3; } &__logo { height: 100%; max-width: 100%; padding: 6px 0; transition: opacity 0.25s ease-out; vertical-align: top; display: inline-block; position: relative; z-index: 3; &:hover { opacity: 0.6; } } &__menu { &Btn { top: 0; right: -8px; width: 40px; height: 60px; position: absolute; display: none; } &Burger { top: 50%; left: 50%; width: 20px; height: 2px; margin: 0 0 0 -9px; background: #31333a; display: inline-block; position: absolute; transition: transform 0.2s ease-out; -webkit-transform: translate3d(0, -1px, 0); transform: translate3d(0, -1px, 0); &::after, &::before { content: ''; left: 0; right: 0; width: 20px; height: 2px; margin: 0 auto; background: #43454c; transition: transform 0.2s ease-out, color 0.2s ease-out, width 0.2s ease-out; position: absolute; } &::before { bottom: 8px; } &::after { top: 8px; } } } &__nav { top: 0; right: 0; width: 100%; height: 100%; padding-left: 220px; text-align: right; position: absolute; &Item { height: 100%; margin-left: 5%; color: #090a0b; vertical-align: top; display: inline-block; &:first-child { margin-left: 0; } } &Link { top: 50%; height: 60px; margin-top: -30px; font-size: 18px; text-decoration: none; transform: translate3d(0, 0, 0); will-change: transform; vertical-align: top; display: inline-block; position: relative; z-index: 1; &::after { content: ''; right: 0; bottom: 0; width: 0; height: 2px; background-color: #7fa4d2; transition: width 0.25s ease-out; position: absolute; display: block; } &.active, &:hover { color: #1d569d; &::after { left: 0; width: 100%; } } &Text { top: 50%; vertical-align: top; display: inline-block; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } &Btn { top: 50%; margin-top: -21px; } } } @media (max-width: 1024px) { .header { &__nav { display: none; } &__menu { &Btn { display: block; } } } }