@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");
.menucontainer {
  top: 15px;
  position: relative;
  min-height: 850px;
}

.othercontanent {
  position: absolute;
  min-height: 775px;
  width: calc(100% - 201px);
  left: 200px;
  background-color: #ddddff;

  padding: 5px;

}

.menuleft {
  height: 625px;
  float: left;
}

.menu {
 position: absolute;
  /* top: calc(312.5px - 10em);*/
  left: 0em;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  overflow: hidden;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
  padding-top: 5px;
  height: 98%;
  z-index: 99;
}

.menu li a {
  display: block;
  text-indent: 52px;
  font-size: 16px;
  height: 5em;
  width: 200px;
  line-height: 70px;
  text-align: center;
  color: #72739f;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
  text-align: left;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
}

.menu li a i {
  speak: none;
  text-indent: 0em;
  position: absolute;
  top: 24px;
  left: 0;
  font-size: 20px;
  text-align: left;
  padding-left: 1em;
}

.menu li a.active {
  background-image: linear-gradient(to right, #fff 97%, #267fdd 3%);
  color: #267fdd;
}

.menu li a:hover {
  /*
  background: #267fdd;
  color: #fff;
  border-left: 5px solid #267fdd;  
  */
  background-image: linear-gradient(to right, #fff 97%, #267fdd 3%);
  color: #267fdd;
}

@media all and (max-width: 500px) {
  .menu {
    top: 0px;
    height: 5em;
    width: 100%;
  }
  .menu li {
    display: inline-block;
    float: left;
  }
  .open {
    width: 100%;
    height: auto;
  }
  .para {
    padding-left: 5px;
  }
  .menu li a {
    width: 5em;
    text-indent: -500em;
  }
  .menu li a:hover {
    background-image: linear-gradient(to bottom, #fff 95%, #267fdd 5%);
  }
  .menu li a.active {
    background-image: linear-gradient(to bottom, #fff 95%, #267fdd 5%);
  }
  .othercontanent {
    position: absolute;
    height: 800px;
    width: 100%;
    left: 0;
    top: 5em;
    padding: 0;
    background-image: linear-gradient(to right, #fff, rgba(41, 86, 130, 0.5));
  }
  .menucontainer {
    min-height: 1000px;
  }
}

@media screen and (max-height: 34em) {
  .menu li, .menu-bar {
    font-size: 70%;
  }
}

@media screen and (max-height: 34em) and (max-width: 500px) {
  .menu {
    height: 3.5em;
  }
}