/*Main background           -------     color 1 */
/*background hover item     -------     color 2 */
/*text color                -------     color 3 */
/*text hover color          -------     color 4*/
/*border color              -------     color 5 */
.ets_mm_megamenu .mm_menus_li h4,
.ets_mm_megamenu .mm_menus_li h5,
.ets_mm_megamenu .mm_menus_li h6,
.ets_mm_megamenu .mm_menus_li h1,
.ets_mm_megamenu .mm_menus_li h2,
.ets_mm_megamenu .mm_menus_li h3,
.ets_mm_megamenu .mm_menus_li > a{
    font-family: font1;
}
.ets_mm_megamenu *{
    font-family: font2;
}

/*layout 1*/
.layout_layout1 .mm_menus_li > a{color: color1;}
.layout_layout1 .mm_menus_li > a:before{background-color: color2;}
.layout_layout1 .mm_menus_li:hover > a, .layout_layout1 .mm_menus_li.active > a{color: color2;}
.layout_layout1 li:hover > a,.layout_layout1 li > a:hover{color: color7;}


/*layout 2*/
.layout_layout2 .ets_mm_megamenu_content{background: color3;}
.layout_layout2 .mm_menus_li:hover > a,.layout_layout2 .mm_menus_li.active > a{background-color: color4;}
.layout_layout2 .mm_columns_ul li:hover > a,.layout_layout2 .mm_columns_ul li > a:hover{color: color7;}

/*layout 3*/
.layout_layout3 .ets_mm_megamenu_content{background: color5;}



@media (min-width: 768px){
    .layout_layout3 .mm_menus_li:hover > a,.layout_layout3 .mm_menus_li.active > a{background-color: color6;}
    .layout_layout3 .mm_columns_ul li:hover > a,.layout_layout3 .mm_columns_ul li > a:hover{color: color7;}
    .layout_layout3 .mm_menus_li > .mm_columns_ul{
        background-color: color6;
        border-color: color5;
    }
}
.layout_layout3 .mm_menus_li > .mm_columns_ul h4,
.layout_layout3 .mm_menus_li > .mm_columns_ul h4 a{
    color: color2;
}
.layout_layout3.ets_mm_block_content .has-sub > a:after{
    border-top-color: color5;
}


/*layout 4*/
.layout_layout4 .ets_mm_megamenu_content {
  border-bottom-color: color2;
}
.layout_layout4 .mm_menus_li:hover > a, 
.layout_layout4 .mm_menus_li.active > a,
.layout_layout4 .mm_menus_li:hover > span, 
.layout_layout4 .mm_menus_li.active > span {
  background-color: color2;
  color: #fff;
}
.layout_layout4 .mm_columns_ul li:hover > a,.layout_layout4 .mm_columns_ul li > a:hover{color: color7;}


/*layout 5*/
.layout_layout5 li:hover > a,
.layout_layout5 li > span.arrow:hover
.layout_layout5 li > a:hover,
.layout_layout5 .mm_menus_li.active > a{color: color7;}



@media only screen and (max-width: 767px){
    .ybc-menu-toggle {
        background-color: color8;
        color: color9;
    }
    
    .ybc-menu-toggle .icon-bar {
      background-color: color9;
    }
}