/* menu button */
body > header {z-index: 100;}
.menu-button {width: 50px; height: 50px; top: 5.2vh; left: calc(5.2vh + 472px); position: fixed; cursor: pointer; z-index: 100;}
.menu-button > * {width: 40px; height: 8px; top: 20px; left: 5px; position: absolute; background-color: rgba(255, 191, 179, 1); transition: all 500ms ease-out;}
.menu-button > *::after, .menu-button > *::before {content: ""; width: 40px; height: 8px; left: 50%; transform: translateX(-50%); position: absolute; background-color: #FFBFB3; transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);}
.menu-button > *::after {top: -15px;}
.menu-button > *::before {top: 15px;}
.menu-button.active > * {background-color: rgba(255, 191, 179, 0);}
.menu-button.active > *::after {transform: rotate(45deg); transform-origin: 0 0; left: 8px; top: -13px;}
.menu-button.active > *::before {transform: rotate(-45deg);  transform-origin: 0 0; left: 3px; top: 15px;}

/* menu kontener */
nav {z-index: 98;}
body:not(.disable) nav .menu {transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-delay: 500ms;}
body nav .menu {position: fixed; top: 0; left: -582px; height: 100%; width: 482px; background-color: white; box-sizing: border-box;}
body nav .menu.active {left: 0; transition-delay: 0ms;}

/* menu linki */
nav .menu ul {position: absolute; top: 60%; transform: translateY(-50%); padding: 0 ; margin: 0; left: 5.2vh; padding: 0 15% 0 107px; box-sizing: border-box; width: calc(100% - 5.2vh);}
nav .menu ul li {list-style: none; transform: translateX(-380px); display: block; transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); margin: 1.5vh 0;}
nav .menu ul li.pod {padding-left: 30px;}
nav .menu.active ul li {transform: translateX(0px);}
nav .menu.active ul li:nth-child(1) {transition-delay: 200ms;}
nav .menu.active ul li:nth-child(2) {transition-delay: 300ms;}
nav .menu.active ul li:nth-child(3) {transition-delay: 400ms;}
nav .menu.active ul li:nth-child(4) {transition-delay: 500ms;}
nav .menu.active ul li:nth-child(5) {transition-delay: 600ms;}
nav .menu.active ul li:nth-child(6) {transition-delay: 700ms;}
nav .menu:not(.active) ul li:nth-child(1) {transition-delay: 0ms;}
nav .menu:not(.active) ul li:nth-child(2) {transition-delay: 100ms;}
nav .menu:not(.active) ul li:nth-child(3) {transition-delay: 200ms;}
nav .menu:not(.active) ul li:nth-child(4) {transition-delay: 300ms;}
nav .menu:not(.active) ul li:nth-child(5) {transition-delay: 400ms;}
nav .menu:not(.active) ul li:nth-child(6) {transition-delay: 500ms;}
nav .menu ul li a {font-family: 'mob', sans-serif; display: block; text-transform: uppercase; transition: color 200ms ease-in-out; letter-spacing: 2px; color: black; text-decoration: none; font-size: 1.8vh; padding: 2vh 0; margin: 0;}
nav .menu ul li a:hover {color: silver;}
nav .menu ul li.odstep {margin-top: 4vh; padding-top: 4vh;}

@media screen and (min-height: 770px) {
    nav .menu ul li.odstep {margin-top: 40px; padding-top: 40px;}
    nav .menu ul li a {font-size: 16px; padding: 15px 0;}
}

/* menu ozdobniki */
nav .menu ul li::after, nav .menu ul li.odstep::after {content: ""; display: block; position: absolute; left: 0; width: 20px; height: 2px; transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-delay: 0ms;}
nav .menu ul li.odstep::after {transition-delay: 500ms;}
nav .menu.active ul li.odstep::after {transition-delay: 900ms;}
nav .menu.active ul li.active::after {transition-delay: 500ms;}
nav .menu.active ul li.odstep::after, nav .menu.active ul li.active::after {width: 100%;}
nav .menu ul li.active::after {bottom: 0.6vh; background-color: #ffbfb3;}
nav .menu ul li.odstep::after {top: 0; background-color: black;}
nav .menu ul li.active a {color: #ffbfb3;}

@media screen and (max-width: 1600px) and (min-width: 1400px) {
    .menu-button {left: calc(5.2vh + 392px);}
    nav .menu ul {padding: 0 15% 0 27px;}
    body nav .menu {width: 402px;}
}
@media screen and (max-width: 1400px) and (min-width: 980px) {
    .menu-button {left: calc(5.2vh + 263px); width: 45px; height: 45px;}
    nav .menu ul {padding: 0 15% 0 0;}
    body nav .menu {width: calc(230px + 5.2vh);}
    .menu-button > *, .menu-button > ::after, .menu-button > ::before {width: 34px; height: 7px;}
    .menu-button > ::after {top: -13px;}
    .menu-button > ::before {top: 13px;}
    .menu-button.active > ::after {top: -12px; left: 7px;}
    .menu-button.active > ::before {top: 13px; left: 2px;}
    .menu-button > * {top: 18px;}
}
/* mobile */
@media screen and (max-width: 980px) {
    .menu-button {left: unset; right: 8%; position: absolute; margin-right: -5px;}
    .menu-button.active {position: fixed;}
    body nav .menu {width: calc(92% - 90px); left: -92%;}
    nav .menu ul {left: 8vw; padding: 0; width: calc(100% - 16vw);}
}
@media screen and (max-width: 400px) {
    .menu-button {width: 45px; height: 45px;}
    .menu-button > *, .menu-button > ::after, .menu-button > ::before {width: 34px; height: 7px;}
    .menu-button > ::after {top: -13px;}
    .menu-button > ::before {top: 13px;}
    .menu-button.active > ::after {top: -12px; left: 7px;}
    .menu-button.active > ::before {top: 13px; left: 2px;}
    .menu-button > * {top: 18px;}
    nav .menu ul li a {font-size: 10px; letter-spacing: 0.5px; padding: 1vh 0;}
    nav .menu ul li.odstep {
        margin-top: 2.5vh;
        padding-top: 2.5vh;
    }

}