header .midnight { visibility: hidden; opacity: 0; transition: all 0.5s; position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; width: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.7); margin-top: 60px; } header .midnight.show { opacity: 1 !important; visibility: visible !important; } header nav { transition: all 0.5s; } header nav.show { transition: all 0.5s; width: 256px !important; overflow: auto !important; } header nav ul { list-style-type: none; padding: 0; margin: 0; flex: 1; } header nav li { display: inline-block; margin-right: 30px; box-sizing: border-box; height: 60px; } header nav li a { display: block; line-height: 57px; color: rgb(107 114 128); text-decoration: none; font-size: 0.875rem; font-weight: 500; } header nav li a:hover { border-bottom: 3px solid #d1d5db; } header nav li a:hover a { color: rgb(17, 24, 39); } header nav li a.active { border-bottom: 3px solid #04abf1; } header nav li a.active a { color: rgb(17, 24, 39); } @media screen and (max-width: 1180px) { header nav { margin-top: 0px; width: 0px; overflow-x: hidden; height: 100%; max-height: 100%; position: fixed; top: 60px; right: 0px; z-index: 1000; } header nav.show { background: #3b3b3b; } header nav ul { width: 100%; list-style: none; display: block; overflow-x: hidden; padding-left: 10px; } header nav ul li { width: 100%; display: list-item; margin: 0px; margin-top: 20px; border-radius: 0; white-space: nowrap; } header nav ul li a { color: #acacac; text-decoration: none; } header nav ul li a.active { color: rgba(255, 255, 255, 0.87); } }