/* Mobile View */ .navbar-background { position: fixed; width: 100%; display: flex; flex-direction: row; justify-content: end; align-items: center; align-items: stretch; background-color: #252631; min-height: 74px; } .navbar-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; flex-grow: 1; padding: 15px; } .navbar-hamburger { font-size: 20pt; color: white; display: flex; justify-content: center; align-items: center; margin-top: 5px; max-height: 35px; min-width: 30px; padding: 15px; } .navbar-hamburger:hover { background-color: #ffffff14; font-size: 22pt; font-weight: bold; border-radius: 3px; transition-duration: 0.3s; cursor: pointer; } .navbar-closed{ display: flex; flex-direction: column; justify-content: flex-start; margin-top: 10px; display: none; } .navbar-open { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 10px; } .navbar-item { color: white; font-size: 12pt; padding-top: 10px; padding-left: 5px; padding-bottom: 10px; font-family: Source Sans Pro; } .navbar-item:hover { background-color: #ffffff14; font-size: 13pt; font-weight: bold; border-radius: 3px; transition-duration: 0.3s; cursor: pointer; } .navbar-brand-container{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .navbar-title { color: white; font-size: 23pt; font-family: Sacramento; } .navbar-image { max-width: 50px; max-height: 50px; } /* Desktop view */ @media only screen and (min-width: 850px) { .navbar-container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; } .navbar { display: flex; flex-direction: row; justify-content: flex-end; flex-grow: 1; } .navbar-closed { display: flex; flex-direction: row; justify-content: flex-end; flex-grow: 1; margin-top: 0px; } .navbar-open { display: flex; flex-direction: row; justify-content: flex-end; flex-grow: 1; margin-top: 0px; } .navbar-item { color: white; font-size: 12pt; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; font-family: Source Sans Pro; } .navbar-item:hover { background-color: #ffffff14; font-size: 13pt; font-weight: bold; border-radius: 3px; transition-duration: 0.3s; cursor: pointer; } .navbar-title { color: white; font-size: 23pt; font-family: Sacramento; } .navbar-hamburger { display: none; } }