/* TREVENQUE MENU 
 *  *********************************************************/
ul.main{
  list-style: none;
  position: relative;
  text-align: left;
  -webkit-transition-timing-function: ease;
         -o-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-duration: .35s;
         -o-transition-duration: .35s;
            transition-duration: .35s;
    -webkit-transition-property: width, opacity, visibility;
         -o-transition-property: width, opacity, visibility;
            transition-property: width, opacity, visibility;
}
ul.main > li {
  float:left;
  box-sizing: border-box;
  display: block;
  min-height: 1px;
  padding:0 15px;
}
ul.sub{
  position:absolute;
  z-index:1000;
  left:0px;
  text-align: left;
  display:none;
  height:100%;
}
div.drop-container {
  clear:left;
  /*background: white;*/
  width: 1170px;
  padding:10px 15px;
    -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.55);
    -moz-box-shadow:3px 3px 3px 3px rgba(0, 0, 0, 0.55);
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.55);
}
div.drop-container:before,
div.drop-container:after{

    display: table;
    content: " ";
}
div.drop-container:after{
    clear: both;
}
div.drop-container .a2{
  width:16.6666%;
}
div.drop-container .a3{
  width:25%;
}
div.drop-container .a4{
  width:33.3333%;
}
div.drop-container .a5{
  width:41.6666%;
}
div.drop-container .a6{
  width:50%;
}
div.drop-container .a7{
  width:58.3333%;
}
div.drop-container .a8{
  width:66%;
}
div.drop-container .a9{
  width:75%;
}
div.drop-container .a10{
  width:83.3333%;
}
div.drop-container .a10{
  width:91.6666%;
}
div.drop-container .a12{
  width:100%;
}
div.drop-container .a2,
div.drop-container .a3, 
div.drop-container .a4, 
div.drop-container .a5, 
div.drop-container .a6, 
div.drop-container .a7, 
div.drop-container .a8, 
div.drop-container .a9, 
div.drop-container .a10, 
div.drop-container .a11, 
div.drop-container .a12{
    position: relative;
    min-height: 1px;
    padding:5px 10px;
    float:left;

}
div.drop-container .a2:before,  div.drop-container .a2:after,  div.drop-container .a3:before,  div.drop-container .a3:after,  div.drop-container .a4:before,  div.drop-container .a4:after,  div.drop-container .a5:before,  div.drop-container .a5:after,  div.drop-container .a6:before,  div.drop-container .a6:after,  div.drop-container .a7:before,  div.drop-container .a7:after,  div.drop-container .a8:before,  div.drop-container .a8:after,  div.drop-container .a9:before,  div.drop-container .a9:after,  div.drop-container .a10:before,  div.drop-container .a10:after,  div.drop-container .a11:before,  div.drop-container .a11:after,  div.drop-container .a12:before,  div.drop-container .a12:after{      
    display: table;
    content: " ";

}
div.drop-container .a2:after, div.drop-container .a3:after, div.drop-container .a4:after, div.drop-container .a5:after, div.drop-container .a6:after, div.drop-container .a7:after, div.drop-container .a8:after, div.drop-container .a9:after, div.drop-container .a10:after, div.drop-container .a11:after, div.drop-container .a12:after{
  clear:both;
}
.dropdown-open{
  display:none;
}
ul.main .toggle{
  display:none;
}

ul.sub .category-title{
    font-weight: bold;
    text-transform:uppercase;
}
.offcanvas{
    position:fixed;
    z-index:1001;
    left:0;
    top:0;
    bottom:0;
    right:0;
    background: rgba(0,0,0, 0.4);
    display: none;
}
 body.menu-collapsed .offcanvas{
    display:none;
  }


/*969px*
 *  *********************************************************/

@media (max-width: 768px) {
    .navbar-toggle {
         display: block;
         float:left;
    }   
    ul.main .toggle{
        display:block; 
    } 

    ul.main{
        /*background-color:#DADADA  !important;*/
        -webkit-box-shadow: 9px 1px 11px -8px rgba(0,0,0,0.75);
        -moz-box-shadow: 9px 1px 11px -8px rgba(0,0,0,0.75);
        box-shadow: 9px 1px 11px -8px rgba(0,0,0,0.75);
      }
  ul.main li.toggle{
    /*background-color:#333333 !important;*/
    /*border-bottom:1px solid #FFFFFF*/
  }
  div.drop-container {
      width: 300px;
      overflow-y:auto;
      height:100%; 
    -webkit-box-shadow: -7px 0px 10px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: -7px 0px 10px -7px rgba(0,0,0,0.75);
    box-shadow: -7px 0px 10px -7px rgba(0,0,0,0.75);
  }
  div.drop-container .a2,
  div.drop-container .a3, 
  div.drop-container .a4, 
  div.drop-container .a5, 
  div.drop-container .a6, 
  div.drop-container .a7, 
  div.drop-container .a8, 
  div.drop-container .a9, 
  div.drop-container .a10, 
  div.drop-container .a11, 
  div.drop-container .a12{
      padding:5px 5px;
      float:none;
      width:100%;
  }

  ul.main{
    position: fixed;
    left:0px;
    top:0px;
    bottom:0px;
    max-width:300px;
    z-index:1002;
   /* background:gray;*/
    
  }
  ul.main.collapsed{
    width:0px;
    overflow:hidden;
  }
  ul.main > li{
    float:none;
    display: block;
    min-height: 1px;
    padding: 10px 15px;

  }
  ul.sub{
    z-index:1001;
    left:50px;
    top:0
   
  }
  .offcanvas{
    display:block;
    
  }
 
  .dropdown-open{
      display:block;
  }
  div.drop-container .a2,
  div.drop-container .a3, 
  div.drop-container .a4, 
  div.drop-container .a5, 
  div.drop-container .a6, 
  div.drop-container .a7, 
  div.drop-container .a8, 
  div.drop-container .a9, 
  div.drop-container .a10, 
  div.drop-container .a11, 
  div.drop-container .a12{
      padding:5px 0;
  }
}