ul {
  list-style-type:none;
  padding:0;
}

.menu {
  position:fixed;
  top:0;
  bottom:0;
  overflow:hidden;
  transition:0.2s ease-in-out width;
}

.menu:hover {
    width:15%;
    min-width: 200px;
    z-index: 10000;
}

a:hover {
    color: white;
}

.icon {
  display:inline-block;
  vertical-align:top;
  width:3rem;
  height:2rem;
  margin-right:1rem;
  text-align:center;
}

.menu--left {
  background: #62bcbe;
  left:0;
  width: 5rem;
  z-index:2;
  font-size: 20px;
}

.menu--left  .menu__link {
    width:100%;
    min-width:50rem;
  }

.menu--left .menu__link:hover {
    background-color: #4d9596;
    text-decoration: none;
}

.menu--left  .menu__top {
    display:block;
    vertical-align:top;
    padding: 1rem;
    width:100%;
    min-width: 50rem;
    color: #4d9596;
    background-color: #4d9596;
    text-decoration:none;

}

.menu--left  .menu__nav {
  margin-left:-0.75rem;
}

.menu:hover .menu__top {
  color:white;

}

.menu__link {
  display:block;
  color:white;
  padding:1rem;
  text-decoration:none;
}



.menu__heading {
  display:inline-block;
  padding:0.8675rem;
  font-size:1.25rem;
  color:white;
}