header { background-size: cover; text-align: center; width: 100%; overflow: hidden; background-repeat: no-repeat; background-position: center; } header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; } #header-img { max-width: 550px; padding-bottom: 15px; margin-top: -120px; } #nav { position: fixed; width: 100%; height: 110px; z-index: 3; transition: height 0.3s, background 0.5s ease; } #nav.active { height: 80px; background-color: var(--color-primary); box-shadow: 0 2px 3px -1px rgba(30, 30, 30, 0.1); } .nav_link.active { color: var(--navlink-color); } .nav_link.active:hover { color: var(--navlink-color); } nav img { width: 90px; height: 52.2px; } .nav_li { display: inline; font-family: 'minecraft-title', sans-serif; color: #333333; position: relative; } .nav_link { text-decoration: none; padding: 15px; color: #FFF; font-size: 0.9em; transition: 0.5s ease; } .nav_link:hover { text-decoration: none; color: #DBDBDB; } .nav_link:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: -14px; left: 0; background-color: var(--link-color); visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; } .nav_link:hover:before { visibility: visible; transform: scaleX(1); } .nav_link2 { color: var(--navlink-color); padding: 16px 16px; text-decoration: none; display: block; transition: background-color 0.3s, 0.5s ease; } .nav_link2:hover { background-color: var(--dropdown-color); color: var(--navlink-color); } .nav_li:hover .dropdown { visibility: visible; opacity: 1; transition: visibility 0.3s, opacity 0.3s; transition-delay: 0s; } #menu_toggle { display: block; position: relative; top: 50px; left: 50px; z-index: 1; } #menu_toggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; } #menu_toggle span:first-child { transform-origin: 0 0; } #menu_toggle span:nth-last-child(2) { transform-origin: 0 100%; } #menu_toggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: var(--hamburger); } #menu_toggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #menu_toggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu_toggle input:checked ~ ul { transform: none; } .hamburger { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; } #mobile_nav_list { position: fixed; top: -70px; left: 45px; width: 200px; height: 100%; margin: -100px 0 0 -50px; padding: 125px 50px 50px; background: var(--color-primary); list-style-type: none; transform-origin: 0 0; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); } #mobile_nav_list li { padding: 10px 0; font-size: 1.2em; font-family: 'opensans-bold', sans-serif; text-align: left; } #mobile_nav_list li a { color: var(--navlink-color); } #mobile_nav_list li a:hover, #mobile_nav_list li span:hover { color: var(--navlink-color); border-bottom: 2px solid var(--navlink-color); } #mobile_nav_list .mobile_dd { display: none; margin: 8px 0 -5px 20px; } #mobile_nav_list .mobile_dd2 { display: none; margin: 8px 0 -5px 20px; } #mobile_nav_list .mobile_dd li { font-size: 1em; list-style: none; } #mobile_nav_list li:hover .mobile_dd { display: block; } #mobile_nav_list .mobile_dd li:hover .mobile_dd2 { display: block; } .nav_li { display: inline; font-family: 'minecraft-title', sans-serif; color: #333333; position: relative; } #current_page { text-decoration: none; color: var(--white); background: var(--link-color); border-radius: 5px; } .fake_link { cursor: pointer; } .dropdown { position: absolute; left: 0; top: 28px; background-color: var(--color-primary); visibility: hidden; opacity: 0; border-radius: 5px; transition: visibility 0.3s, opacity 0.3s; transition-delay: 0.1s; font-size: 0.9em; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); z-index: 1; text-align: left; width: 200px; } #sub_drop { display: none; } @-moz-document url-prefix() { .dropdown2 { top: 12px; } } @supports (-ms-ime-align:auto) { .dropdown2 { top: 0; } } @media (max-width: 1000px) { #scroll-button { padding-top: 5px; } } @media (max-width: 1150px) { .dropdown { top: -10px; font-size: 0.9em; } #nav { height: 150px; position: relative; } #nav.active { height: 150px; } #nav_list { font-size: 0.8em; } #nav img, #nav ul { margin-top: 30px; } header .container { justify-content: center; display: block; width: 100%; } .switch-div { top: 65px; } } @media (max-width: 690px) { #nav_list { display: none; } #nav { height: 90px; position: fixed; } #nav.active { height: 90px; } #nav img { margin-top: 18px; } #mobile_nav { display: block; position: fixed; left: 0; top: -15px; } #current_page { background: none; border-bottom: 3px solid var(--pureblack); } .switch-div { top: 33px; } } @media (min-width: 690px) { #mobile_nav { display: none; } }