/* 
  * 
  *##### Responsive Menu CSS #####
  ################################
 * 
 */
/*-- Main settings -- */

.responsive-menu {
  width: 100%;
  clear: both;
  float: left;
}

.responsive-menu .menu-block-wrapper ul {
  padding: 0;
  margin: 0;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 100%;
}

.responsive-menu .menu-block-wrapper  ul li {
  padding:0;
  margin: 0;
  float: left;
  list-style-type: none;
  list-style-image: none;
  font-size: 16px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.responsive-menu .menu-block-wrapper ul li a {
  padding: 10px;
  text-decoration: none;
  display: block;
  height: auto; 
  color: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*-- First -- */

.responsive-menu ul.toplevel > li{
  background: #444;
}
.responsive-menu ul.toplevel > li > a{
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.responsive-menu.hover-effect ul.toplevel > li a:hover {
  text-decoration: none;
  color: #444;
  background: #fff;
}      
.responsive-menu.hover-effect ul.toplevel > li.resp-dropdown:hover > a {
  text-decoration: none;
  color: #444;
  background: #fff;
}
     
.responsive-menu ul.middlelevel {
  left: 0;
  position: absolute;
  width: 100%;
}  

.responsive-menu ul.middlelevel > li {
  background: #444;
} 

.responsive-menu ul.bottomlevel {
  position: relative;
  width: 100%; 
}    

.responsive-menu ul.bottomlevel > li {
  width: 100%;  
  background: #555;
} 

.responsive-menu ul.bottomlevel > li a {
  font-size: 1em;
  padding-left: 20px;
}

.responsive-menu.hover-effect ul.middlelevel {
  z-index: -99;
   opacity:0;
   overflow: hidden;
   visibility: hidden;
  -webkit-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.3s ease, z-index 1s ease;
}

.responsive-menu.hover-effect li.resp-dropdown:hover > ul.middlelevel,
.responsive-menu.hover-effect li.resp-dropdown.hover ul.middlelevel {
  z-index:99;
   opacity:1;
   overflow: visible;
   visibility: visible;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}
.responsive-menu .section0 {
  left: 0;
}

.responsive-menu .section1 {
  left: 20%;
}

.responsive-menu .section2 {
  left: 40%;
}