/*! * Navbar.js v2.1.0 (http://thednp.github.io/navbar.js) * Copyright 2016-2020 © thednp * Licensed under MIT (https://github.com/thednp/navbar.js/blob/master/LICENSE) */ .navbar { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; line-height: 1.5rem; font-size: 14px; padding: 0; } .navbar > div { display: none; flex-direction: column; flex-basis: 100%; flex-grow: 1; } .navbar.open-mobile > div { display: flex; } .navbar .nav { flex-direction: column; } .navbar .brand { display: flex; text-decoration: none; white-space: nowrap; align-items: center; padding: 0.5rem 1rem; font-size: 18px; } .navbar-toggle { border-radius: 0.25rem; color: currentColor; border: 1px solid transparent; background: transparent; margin: auto 1rem; align-self: center; display: flex; align-items: center; padding: 0.125rem 0.5rem; } .navbar-toggle:focus { outline: none; } .open-mobile .navbar-toggle { border-color: currentColor; } @media (min-width: 768px) { .navbar { align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .navbar > div { justify-content: space-between; display: flex; flex-direction: row; align-items: center; flex-basis: auto; } .navbar .nav { flex-direction: row; } .navbar-toggle { display: none; } } .navbar-content a:not([class]), .navbar-content b, .subnav-content a:not([class]), .subnav-content b { color: rgba(255, 255, 255, 0.75); } @media (min-width: 768px) { .navbar-content a:not([class]):hover { color: rgba(255, 255, 255, 0.95); } } .navbar { background: #687c86; color: rgba(255, 255, 255, 0.55); } .navbar .brand { color: rgba(255, 255, 255, 0.85); } @media (min-width: 768px) { .navbar .brand { background: #2c3c44; color: rgba(255, 255, 255, 0.85); } .navbar .brand:hover { color: rgba(255, 255, 255, 0.95); } } .nav li > a, .nav li > span, .navbar-content, .subnav-content { padding: 0.5rem 1rem; } .nav { display: flex; } .nav, .nav ul { margin: 0; padding: 0; list-style: none; } .nav li { position: relative; transition: margin 0.3s ease 0s; } .nav li > span, .nav li > a { display: flex; flex-direction: row; justify-content: space-between; align-items: center; overflow: hidden; font-size: 14px; line-height: 1.5rem; } .nav li > a { text-decoration: none; } .nav li > span > span, .nav li > a > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.subnav > ul > li.open-mobile > span + ul, div.subnav > ul > li.open-mobile > span + div, li.open-mobile > .subnav { display: block; } .open-mobile > span > .parent-toggle, .open-mobile > a > .parent-toggle, .open-mobile .parent-toggle:focus { border-color: currentColor; } .open-mobile + .open-mobile { margin-top: 0.5rem; } .subnav, div.subnav > ul > li > span + ul, div.subnav > ul > li > span + div, .parent-icon { display: none; } .subnav-content p, .subnav-content ul { margin-bottom: 0.5rem; } ul.subnav, div.subnav ul { padding: 0 0 0 1rem; } .menu-icon, .parent-icon, .parent-toggle { width: 1.5rem; height: 1.5rem; fill: currentColor; text-align: center; line-height: 1.5rem; } .menu-icon { font-size: 1.4rem; } .parent-toggle { border-radius: 0.25rem; border: 1px solid transparent; } .menu-icon + span { flex: auto; margin-left: 0.5rem; } span > .parent-toggle { cursor: pointer; } @media (min-width: 768px) { .parent-toggle { display: none; } .parent-icon, div.subnav > ul > li > span + div, div.subnav > ul > li > span + ul { display: block; } .subnav { opacity: 0; position: absolute; display: block; line-height: 1.5rem; font-size: 14px; } ul.subnav, div.subnav ul { padding: 0; } li.open-mobile { background: none; transition: none; } li.open-mobile + .open-mobile { margin: 0; } .column-title, div.subnav > ul > li > span { font-size: 120%; } .subnav li > a, .subnav li > span, .subnav-content { padding: 0.5rem 1rem; } .nav > li > .subnav { margin: 0 0 0; } ul.subnav { width: 200px; } div.subnav { min-width: 600px; } div.subnav > ul { margin: 0; } div.subnav.m1 { min-width: 200px; } div.subnav.m2 { min-width: 400px; } div.subnav.m3 { min-width: 600px; } div.subnav.m4 { min-width: 800px; } } .nav li > a, .nav li > span { color: rgba(255, 255, 255, 0.55); } .nav li.open-mobile { background: rgba(0, 0, 0, 0.075); } @media (min-width: 768px) { .nav > li.open > span, .nav > li.open > a, .nav > li:hover > span, .nav > li:hover > a { background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.75); } .nav > li.active > span, .nav > li.active > a, .nav > li.active.open > span, .nav > li.active.open > a, .nav > li.active:hover > span, .nav > li.active:hover > a { background: #006699; color: #fff; } } @media (min-width: 768px) { .subnav { background: #dadee0; box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0px rgba(0, 0, 0, 0.15) inset; } .subnav .subnav { background: #ccd2d4; } .subnav .subnav .subnav { background: #c5cbcf; } .subnav li > span, .subnav li > a { color: rgba(0, 0, 0, 0.55); } .subnav li.open > a, .subnav li:hover > a { background: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.75); } .subnav li.active > span, .subnav li.active > a, .subnav li.active:hover > span, .subnav li.active:hover > a { background: #006699; color: #fff; } .column-title, div.subnav > ul > li > span { color: rgba(0, 0, 0, 0.95); } div.subnav > ul > li > ul > li.open > span, div.subnav > ul > li > ul > li:hover > span, ul.subnav > li.open > span, ul.subnav > li:hover > span { background: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.8); } div.subnav { color: rgba(0, 0, 0, 0.55); } .subnav-content a:not([class]), .subnav-content b { color: rgba(0, 0, 0, 0.75); } .subnav-content a:not([class]):hover { color: rgba(0, 0, 0, 0.95); } } @media (min-width: 768px) { .nav li > .subnav { top: -99999em; left: -99999em; transform: translate(0, -10px); transition: transform 0.5s ease, opacity 0.4s linear; } .nav li li > .subnav { transform: translate(-10px); } .nav li li.open-position > .subnav { top: 0; left: 100%; } .nav li.open-position > .subnav { top: 100%; left: 0; z-index: 1; } .nav li.open > .subnav { transform: translate(0); opacity: 1; } }