.mainnav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2400;
  width: 80px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: hsl(0, 0%, 20%);
  color: hsl(0, 0%, 100%);
  transition: width 0.3s ease-in-out 0s;
}
.mainnav.is--extended,
.mainnav.is--pinned {
  width: 260px;
}



.mainnav_head {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: hsl(0, 0%, 0%);
}



.mainnav .logo {
  display: block;
  overflow: hidden;
  width: 0;
  padding: 0;
  transition: width 0.3s ease-in-out 0s,
              padding-left 0.3s ease-in-out 0s,
              padding-right 0.3s ease-in-out 0s;
}
.mainnav.is--extended .logo,
.mainnav.is--pinned .logo {
  width: calc(100% - 80px);
  padding: 0 1rem;
}



.mainnav_toggle {
  width: 80px;
  height: 104px;
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
  font-size: 2rem;
}
.mainnav_toggle:hover,
.mainnav_toggle:focus {
  color: hsl(0, 0%, 100%);
}

.mainnav_toggle .mainnav_icon {
  width: 50px;
}



.mainnav_list {
  background-color: transparent;
}

.mainnav_list_item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  border-width: 0;
  background-color: transparent;
  color: hsl(0, 0%, 100%);
  transition: background-color 0.3s ease-in-out 0s;
  padding-left: 24px; /* design says, icons have to be centered... */
}
.mainnav_list_item:hover,
.mainnav_list_item:focus,
.mainnav_list_item.active {
  border-radius: 0;
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}
.mainnav.is--extended .mainnav_list_item,
.mainnav.is--pinned .mainnav_list_item  {
  justify-content: flex-start;
}

.mainnav_link,
.mainnav_link:hover,
.mainnav_link:focus {
  color: hsl(0, 0%, 100%);
  text-decoration: none;
  font-size: 1.5rem;
}

.mainnav_icon {
  width: 30px;
  height: 50px;
  margin: 0 auto;
  font-size: 1.3rem;
}
.mainnav.is--extended .mainnav_icon
.mainnav.is--pinned .mainnav_icon {
  margin: 0;
}



.mainnav_collapse,
.mainnav_list_item_label {
  display: none;
  width: calc(100% - 50px);
  margin: 0 0 0 1.2rem;
}
.mainnav.is--extended .mainnav_collapse,
.mainnav.is--extended .mainnav_list_item_label,
.mainnav.is--pinned .mainnav_collapse,
.mainnav.is--pinned .mainnav_list_item_label {
  display: block;
}

.mainnav_collapse_label,
.mainnav_list_item_label {
  padding: 0;
  border: 0 none;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  text-align: left;
  line-height: 1.3;
  text-transform: uppercase;
}

.mainnav_collapse_label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.mainnav_collapse_label:hover,
.mainnav_collapse_label:focus {
  color: inherit;
}


.mainnav_collapse_icon {
  transform: rotate(90deg);
  color: inherit;
  transition: transform 0.3s ease-in-out 0s;
}
.mainnav_collapse_label.collapsed .mainnav_collapse_icon {
  transform: rotate(0deg);
}

.mainnav_collapse .list-group,
.mainnav_collapse .list-group-item,
.mainnav_collapse .list-group-item-action {
  border: 0 none;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  color: hsl(0, 0%, 76%);
}

.mainnav_collapse .list-group-item.active {
  color: hsl(0, 0%, 100%);
}




.mainnav_clickarea {
  display: none;
  position: fixed;
  top: 0;
  left: 80px;
  z-index: 2399;
  width: calc(100vw - 80px);
  height: 100vh;
}
.mainnav_clickarea.is--extended {
  display: block;
  left: 260px;
  width: calc(100vw - 260px);
}