.menu {
   background-color: #f9f9f9;
   height: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
   padding: 0 40px;
}
.menu li {
   padding: 0;
   margin: 0;

   padding: 20px 0;
   width: 100%;
   text-align: right;
   font-size: 14px;
   color: #666;

   border-bottom: 1px solid #DEDCDC;
}

.menu li:last-child {
   border-bottom: 0;
}

.menu li a {
   color: #666;
   opacity: 0.8;
}

.menu li a:hover {
   opacity: 1;   
}

.menu li.active a,
.menu li.active a:hover {
   color: #EE4459459;
}


.menu .icon {
   font-size: 18px;
   display: inline-block;
   padding: 2px 5px;
   position: relative;
   top: 3px;
}

.menuFix {
   display: flex;
   height: 100%;
   position: absolute;
   background-color: #f9f9f9;
   z-index: -1;
   left: -1000%;
   right: 14px;
}

.flexHeight {
   display: flex;
   flex-wrap: wrap;
}

.menuHamburger {
   display: none;
}

@media (max-width: 715px) {

   .menuHamburger {
      position: absolute;
      display: block;
      z-index: 99;
      right: 0;
      font-size: 14px;
      padding: 8px 12px;
      background-color: #f9f9f9;
      margin-right: -16px;
      color: #666;
      cursor: pointer;
      box-shadow: 6px 0px 20px -3px rgba(0,0,0,0.3);

   }

   .responsiveMenu {
      position: absolute;
      z-index: 9;
      height: 100%;
      width: 260px;
      margin-left: -240px;
      transition-duration: 200ms;
      transition-property: margin-left;
   }

   .responsiveMenu.active {
      margin-left: -10px;
   }



   .responsiveMenu .menu {
      box-shadow: 6px 0px 20px -3px rgba(0,0,0,0.3);
   }
}