.mainmenu {
  position: relative;
  z-index: 201;
}
.mainmenu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;    
}

.mainmenu .ul-lev0 {
   font-size: 0; 
}
.mainmenu .ul-lev0 > li {
  display: inline-block;
  vertical-align: top;
  position: relative;
  letter-spacing: normal;    
}

.mainmenu li a,
.mainmenu li span {
    color: #333333;
    /* var text-color */
    font-size: 14px;
    text-decoration: none;
    display: block;
    padding: 0 8px;
    position: relative;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
     -o-transition: color .2s;
    transition: color .2s; 
    line-height: 120%;
}

.mainmenu .ul-lev0 > li.submenu a.a-lev0,
.mainmenu .ul-lev0 > li.submenu .s-lev0 {
    padding-right: 25px;
}
.mainmenu .ul-lev0 > li.submenu a.a-lev0:after,
.mainmenu .ul-lev0 > li.submenu .s-lev0:after {
    content: '\f078';
    font-family: FontAwesome;
    color:#000;
    font-size: 10px;
    position: absolute;
    top: -1px;
    right: 8px;
}
.mainmenu .ul-lev0 > li.submenu:hover a.a-lev0:after,
.mainmenu .ul-lev0 > li.submenu:hover .s-lev0:after {
    content: '\f077';
}
.mainmenu li.li-lev0:hover > .info-lev0 > a,
.mainmenu li a.a-lev0:hover {
    text-decoration: none;
    color: #4c81d9;
    /* var base */
}


.mainmenu .ul-lev {
    text-align: left;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 120;
    -webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
    padding-top: 15px;
}
.mainmenu .ul-lev1 {
    background: #fff;
    padding: 0;
    -webkit-box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2);  
}
.mainmenu .ul-lev0 li.submenu:hover > .ul-lev {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
.mainmenu .ul-lev a,
.mainmenu .ul-lev span {
    padding: 8px 12px;
    border-bottom:1px solid #f4f4f4;
    /* var gray-light */
    -webkit-transition: color .2s, background-color .2s;
    -moz-transition: color .2s, background-color .2s;
     -o-transition: color .2s, background-color .2s;
    transition: color .2s, background-color .2s; 
}
.mainmenu .ul-lev a:hover {
    background: #f4f4f4;
    /* var gray-light */
    text-decoration: none;
    color: #4c81d9;
    /* var base */
}



/****************************************** 
  dark-style
******************************************/
.dark-style .mainmenu li a,
.dark-style .mainmenu li.li-lev0 > div > span {
  color: #ffffff;
  /* var text-color-light */
}
.dark-style .mainmenu .ul-lev0 > li.submenu a.a-lev0:after,
.dark-style .mainmenu .ul-lev0 > li.submenu .s-lev0:after {
  color: #ffffff;
  /* var text-color-light */    
}
.dark-style .mainmenu li:hover > a {
  color: #8bade6;
  /* var base-light */
}
.dark-style .mainmenu .ul-lev0 > li.submenu:hover a.a-lev0:after,
.dark-style .mainmenu .ul-lev0 > li.submenu:hover .s-lev0:after {
  color: #8bade6;
  /* var base-light */    
}
.dark-style .mainmenu .ul-lev a {
    color: #333333;
    /* var text-color */
}
.dark-style .mainmenu .ul-lev a:hover {
    color: #4c81d9;
    /* var base */
}
.dark-style .mainmenu .ul-lev {
    -webkit-box-shadow:0px 2px 8px 0px rgba(255, 255, 255, 0.2);
    -moz-box-shadow:0px 2px 8px 0px rgba(255, 255, 255, 0.2);
    box-shadow:0px 2px 8px 0px rgba(255, 255, 255, 0.2);
}