// === Menu === .menu { top: 0; left: 0; width: 100%; height: 0; position: fixed; display: none; &__content { top: 0; left: -100%; width: 100%; height: 100vh; min-height: 100%; padding: 60px 0; background-color: #fff; overflow-x: hidden; overflow-y: auto; position: absolute; opacity: 0.5; transform: translate3d(0, -100%, 0); transition: left 0s 0.3s linear, transform 0.3s 0s cubic-bezier(0, 0, 0.35, 0.85), opacity 0.3s 0s cubic-bezier(0, 0, 0.35, 0.85); -webkit-overflow-scrolling: touch; } &__list { margin-bottom: 30px; } &__item { width: 100%; padding: 12px 0; border-bottom: solid 1px #bcbfc1; line-height: 1.4; font-size: 18px; text-decoration: none; transition: background ease-out 0.15s; vertical-align: top; display: inline-block; &:hover { color: #1f5869; } } &__toggle { &:checked { & ~ .menu .menu__content { left: 0; opacity: 1; transform: translate3d(0, 0, 0); transition: left 0s 0s linear, transform 0.3s 0s cubic-bezier(0.75, 0.2, 0.05, 1), opacity 0.3s 0s cubic-bezier(0, 0, 0.35, 0.85); } & ~ .header .header__menuBurger { background: 0 0; } & ~ .header .header__menuBurger::before { top: -9px; bottom: 9px; width: 25px; background: #a96868; transform-origin: 0 50%; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } & ~ .header .header__menuBurger::after { top: 9px; width: 25px; background: #a96868; transform-origin: 0 50%; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } } } } @media (max-width: 1024px) { .menu { z-index: 776; display: block; } }