.mainMenu { background-color: #fff; background-image: none; box-shadow: 0 0 7px rgba(0, 0, 0, .75); max-height: 100%; overflow: visible; position: fixed; top: 0; width: 100%; z-index: 99999; } .container { box-sizing: content-box; display: grid; /** Third column is Book button */ grid-template-columns: repeat(3, 1fr); height: 100%; margin: 0 auto; max-width: 1200px; padding: 0; } .expanderBtn { background-color: transparent; border: none; cursor: pointer; justify-self: flex-start; left: 0; padding: 0.75rem 0.5rem 1rem; transition: .3s; user-select: none; } .iconBars, .iconBars::after, .iconBars::before { background: #757575; border-radius: 0.1428571429rem; display: inline-block; height: 0.2857142857rem; position: relative; transition: .3s; width: 2rem; } .iconBars::after, .iconBars::before { content: ""; left: 0; position: absolute; transform-origin: 0.1428571429rem center; } .iconBars::after { top: -0.5rem; } .iconBars::before { top: 0.5rem; } .expanded .iconBars { background: transparent; } .expanded .iconBars::after, .expanded .iconBars::before { top: 0; transform-origin: 50% 50%; width: 2rem; } .expanded .iconBars::after { transform: rotate(-45deg); } .expanded .iconBars::before { transform: rotate(45deg); } .hiddenAccessible { display: block; height: 1px; left: -100000em; overflow: hidden; position: absolute; top: auto; width: 1px; } .logoLink { align-items: center; display: flex; justify-self: center; } .list { background-color: #fff; border-top: 1px solid #e3e0db; display: none; list-style: none; overflow-y: visible; padding-bottom: 20px; } .list.isOpen { display: block; left: 0; position: absolute; right: 0; top: 100%; } .li { border-bottom: none; display: block; line-height: 17px; position: relative; text-align: center; } .link { color: #000; display: block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: .875rem; font-weight: 700; padding-bottom: 20px; padding-top: 20px; text-transform: uppercase; } .link:hover { color: #7f7369; text-decoration: none; } .mobileList { padding-top: 6px; } .mobileLi { display: block; position: relative; text-align: center; } .mobileLink { color: #000; display: block; font-family: Helvetica; font-size: .875rem; padding: 5px 0; } @media screen and (max-width: 950px) { .logoLink { width: 5rem; } .li { background-color: #f3f2f1; } } @media screen and (min-width: 950px) { .mainMenu { background-color: hsla(0, 0%, 100%, .95); position: relative; z-index: unset; } .container { gap: 30px; grid-template-columns: minmax(100px, auto) 1fr; padding: 0px 30px; } .expanderBtn { display: none; } .logo { max-width: none; min-width: 98px; width: auto; } .list { border-top: none; display: block; padding-bottom: 0; padding-top: 0; position: static; width: 100%; } .list.isOpen { position: static; } .li { display: table-cell; float: none; vertical-align: middle; } .link { background-image: none; font-family: Helvetica, Arial, sans-serif; font-weight: 700; line-height: 1.15; padding: 30px 15px; } .mobileList { display: none; padding-top: 0px; } .mobileLi { display: none; } }