@media screen and (max-width: 991px){*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active { -webkit-transition: 250ms all; transition: 250ms all; } .menu-opener { cursor: pointer; height: 64px; position: absolute; top: 0; left: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 13.1%; } .menu-opener:hover, .menu-opener.active { background: #fff; } .menu-opener-inner { background: #000; height: 1px; margin-left: 20px; margin-top: 30px; width: 30px; } .menu-opener-inner::before, .menu-opener-inner::after { background: #000; content: ''; display: block; height: 1px; width: 30px; z-index: 14; } .menu-opener-inner::before { -webkit-transform: translateY(-0.5rem); -ms-transform: translateY(-0.5rem); transform: translateY(-0.5rem); } .menu-opener-inner::after { -webkit-transform: translateY(0.5rem); -ms-transform: translateY(0.5rem); transform: translateY(0.5rem); } .menu-opener-inner.active { background: transparent; margin-top: 36px; margin-left: 17px; } .menu-opener-inner.active::before { -webkit-transform: translateY(-0.25rem) rotate(-45deg); -ms-transform: translateY(-0.25rem) rotate(-45deg); transform: translateY(-0.25rem) rotate(-45deg); } .menu-opener-inner.active::after { -webkit-transform: translateY(-0.3rem) translateX(0rem) rotate(45deg); -ms-transform: translateY(-0.3rem) translateX(0rem) rotate(45deg); transform: translateY(-0.3rem) translateX(0rem) rotate(45deg); } .menu { background: #fff; height: 64px; position: absolute; top: 2%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 0rem; z-index: 10; } .menu .L1 .menu-link { color: #000; width: 0%; } .menu.active { width: -webkit-calc(80% - 2rem); width: calc(80% - 2rem); margin-top: 50px; } .menu.active .L1 .menu-link { color: #000; width: 100%; } .menu-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 100%; list-style-type: none; margin: 0; margin-left: 20px; padding: 0; } a.menu-link { display: none; width: 0%; height: 0%; } a.menu-link.active { display: block; width: 100%; height: 100%; text-align: left; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 13px; font-weight: 100; height: 0%; text-align: center; text-decoration: none; padding: 15px 0 15px 9px; } .menu-link li { margin: auto; } .menu-inner li a { } #navMobile .menu-inner .menulink { font-size: 1px; } #navMobile .menu-inner.active .menulink.active { font-size: 12px; } .menu { height: auto; padding-bottom: 20px; } .menu-inner { display: block; } .menu-link { padding: 10px 0; font-size: 1.2em; } .menu.active { width:50%; } .menu.active { margin-top: 200px; min-height: 500px; }}@media screen and (max-width:480px){.menu-opener-inner{margin-left:20px;margin-top:30px;width:20px}.menu-opener-inner::before{width:20px}.menu-opener-inner::after{width:20px}.menu.active{margin-top:70px;min-height:432px;width:70%}}