@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap"); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; overflow-x: hidden; } a { pointer-events: auto; } .burger { pointer-events: auto; cursor: pointer; } header nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 8vh; color: #fff; background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.0%, #fff 100%); font-family: 'Playfair Display', serif; } header nav .brand a { font-size: 3em; color: white; text-decoration: none; } header nav .brand a i { padding-right: 10; } header nav .brand a img { height: 6vh; margin: auto 0; } header nav ul { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 50%; font-family: "Poppins", sans-serif; font-weight: 400; text-transform: uppercase; overflow: hidden; } header nav ul li { padding: 5px 10px; } header nav ul li a { color: #000; text-decoration: none; } header nav ul .login { padding: 4px 5px; border: 2px solid black; } header nav .burger { display: none; } header nav .burger div { width: 25px; height: 3px; background-color: #333; margin: 5px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1100px) { header nav { background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.0%, #fff 100%); } header ul { z-index: 1; -webkit-transform: translatex(100%); transform: translatex(100%); position: absolute; right: 0%; top: 8vh; height: 50vh; width: 100% !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #333; -webkit-transition: -webkit-transform 0.5s ease-in; transition: -webkit-transform 0.5s ease-in; transition: transform 0.5s ease-in; transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; } header ul li a { color: #fff !important; font-size: 1.5em; } header ul .login { border: none !important; } header .burger { display: block !important; } header .burger.toggle .line1 { -webkit-transform: rotate(-45deg) translate(-5px, 6px); transform: rotate(-45deg) translate(-5px, 6px); } header .burger.toggle .line2 { opacity: 0; } header .burger.toggle .line3 { -webkit-transform: rotate(45deg) translate(-5px, -6px); transform: rotate(45deg) translate(-5px, -6px); } } .nav-active { -webkit-transform: translateX(0%) !important; transform: translateX(0%) !important; } /*# sourceMappingURL=base.css.map */