ul.menu {
  padding: 0;
  list-style: none;
  width: 100%;

  font-family: 'Century Gothic';
  
  clear: both;
  display: table;
}

a{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
ul.menu .list {
  font-size: 14px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  vertical-align: sub;
  clear: both;
}
ul.menu .list:after {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #999;
}
ul.menu .list:before {
  content: "";
  background:url(../img/watericon.png) 0 0 no-repeat;
  /* font-family: FontAwesome; */
  width: 17px;
  height: 17px;
  position: absolute;
  left: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #047efd;
}
ul.menu .list a {
  text-decoration: none;
  color: #666;
  padding: 17px 0px 17px 45px;
  display: block;
  height: 100%;
  box-sizing: border-box;
}
ul.menu .list a:hover {
  /* background-color: #324252; */
  transition: 300ms all;
  /* color: #09fbd2; */
}
ul.menu .list .items {
  height: 0px;
  overflow: hidden;
}
ul.menu .list .items a {
  padding: 17px;
}
ul.menu .list .items a:hover {
  /* background-color: #3f5d79; */
  /* color: #fff; */
  transition: 300ms all;
}
ul.menu .list:last-child {
  border-bottom: none;
}
ul.menu .active:after {
  content: "\f106";
  font-family: FontAwesome;
  position: absolute;
  right: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #999;
}
/* ul.menu .active:before {
  content: '\f07c';
  font-family: FontAwesome;
  position: absolute;
  left: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #fff;
} */
ul.menu .active > .items {
  display: block;
  padding: 0px;
  height: auto;
  color: #666;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 200ms;
  clear: both;
  float: left;
  width: 100%;
}