:root {
  --navbar-heigh: 105px;
}

#username {
  font-size: 0.875rem;
}

#mail-link {
  margin-left: -8px;
}

#search-form {
  top: 70px;
  position: absolute;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

#search-form.collapse.show,
#search-form.collapsing {
  display: flex;
}

#navbar {
  position: relative;
  z-index: 1000;
}

nav.navbar .navbar-brand img {
  height: 95px;
}

@media (min-width: 992px){

  .nav-item.dropdown:hover .dropdown-menu {
    display: initial;
  }

}

/* This width is Bootstraps lg breakpoint */
/* Could be good to load bootstraps breakpoint using scss */
@media (max-width: 992px){
  #search-form{
    position: initial;
    display: flex;
    box-shadow: none;
  }

  #search-form-toggler{
    display: none;
  }

  #navbar {
    position: absolute;
    top: calc(var(--navbar-heigh) - 10px);
    left: 50%;
    transform: translate(-50%, 0%);
    width: 95vw;
  }

}

#social-networks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  min-width: 75px;
}

nav.navbar#main-menu{
  height: var(--navbar-heigh);
}

nav.navbar#main-menu *:not(input, a, button) {
  background-color: inherit;
}

#navbar-offset {
  margin-top: var(--navbar-heigh);
}

nav.navbar>div.container {
  flex-wrap: wrap;
}

nav.navbar>div.container>div.row {
  width: 100%;
}