/* horizontal menu with panel dropdowns */

.mainmenu-wrapper {width: 100%; margin: 0; padding: 0}

/* make #mainmenu>ul position relative for full ul width menus */
/* make #mainmenu>ul>li position relative for li width menus and multiples of li widths */

#mainmenu {
    margin: 0; padding: 0; list-style-type: none; color: #222222; background: rgba(255,255,255,1); font-size: 1.2em;
}
#mainmenu>ul {
    display: table; width: 100%; padding: 0; margin: 5px 0; border: 0 none; border-left: 0 solid #222222; list-style-type: none; cursor: pointer; position: relative;
}
#mainmenu>ul>li {
    display: table-cell; float: left; text-align: center; padding: 5px 1%; margin: 0; border: 0 none; border-right: 1px solid #222222; list-style-type: none; cursor: pointer;
}

/* width: 50%; */

#mainmenu>ul>li a {color: #222222; text-decoration: none;}
#mainmenu>ul>li:hover a {color: #000000; text-decoration: none;}

li.drop {color: #222222; rgba(255,255,255,0.8)}
li.drop:hover {color: #000000; background: #D9D9D9;}

li.drop:hover .dropdown_fullwidth {left: -999em;}
li.drop-this:hover .dropdown_fullwidth {left: -999em;}

li.drop-this
{
	background: #c0c0c0;
}

li.drop-this:hover
{
	background: #D9D9D9;
}

a.adrop {font-weight: normal;}

.dropdown_fullwidth {

/*	min-width: 100%; */
	width: 70%;
	margin: 5px 1px;
	position: absolute;
	left: -999em; /* Hides the drop down */
	text-align:left;
	padding: 0 0 15px 0;
	border: 0 none;
	z-index: 995;
	
	background: rgba(217,217,217,1);

	/* Gradient background */
/* 	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); */
/* 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); */

	/* Rounded Corners */

/* 	-moz-border-radius: 5px; */
/* 	-webkit-border-radius: 5px; */
/* 	border-radius: 5px; */

	/* Shadows */

/* 	-webkit-box-shadow: 3px 3px 3px 0px rgba(164,164,164,0.75); */
/* 	-moz-box-shadow: 3px 3px 3px 0px rgba(164,164,164,0.75); */
/* 	box-shadow: 3px 3px 3px 0px rgba(164,164,164,0.75); */

}

.menu-fullwidth ul {margin: 5px 0.5%; padding: 0; list-style-type: none;}
.menu-fullwidth ul li {position: relative; font-weight: normal; width: 100%; float: left; margin: 0; padding: 8px 0; border: 0 none; border-bottom: 1px solid #000000;} /* display: inline;  */
.menu-fullwidth ul li:hover {background: #E5E5E5;}

.menu-fullwidth ul li ul {position: absolute; top: 80%; left: 15%; width: 100%; white-space: nowrap; z-index: 999; text-align: left; background: #F0F0F0; margin: 0; padding: 2.5%;
/* 	-webkit-box-shadow: 3px 3px 3px 0px rgba(164,164,164,0.75); */
/* 	-moz-box-shadow: 3px 3px 3px 0px rgba(164,164,164,0.75); */
/* 	box-shadow: 3px 3px 3px 0px rgba(164,164,164,0.75); */
}
.menu-fullwidth ul li ul li {font-weight: 200; margin: 0; padding: 0;}
.menu-fullwidth ul li ul li:hover {background: #E5E5E5;}

.menu-fullwidth a {color: #000000; text-decoration: none; padding: 3px; display: block;}
.menu-fullwidth a:hover {text-decoration: none;}

#productmenu .ul-sub-group {display: none;}
#featuredmenu .ul-sub-group {display: none;}
#aboutmenu .ul-sub-group {display: none;}
#contactmenu .ul-sub-group {display: none;}

	.mainmenu-button-show {width: 100%; height: 26px; margin: 9px 0; padding: 0; border: 0 none; color: #ffffff; font-weight: normal; background: #8A8A8A url('images/show_menu_button.png') 5px top no-repeat; cursor: pointer;}
	.mainmenu-button-show:hover {background-position: 5px -26px;}

	.mainmenu-button-close {width: 100%; height: 26px; margin: 9px 0; padding: 0; border: 0 none; color: #ffffff; font-weight: normal; background: #8A8A8A url('images/show_menu_button.png') 5px -26px no-repeat; cursor: pointer;}
	.mainmenu-button-close:hover {background-position: 5px top;}
	
/* Responsive Web Design Styles */

/* mobile styles */

.mobile {display:inline;}
.em24 {display:none;}
.em36 {display:none;}
.em50 {display:none;}
.em60 {display:none;}

	#mainmenu-button {margin: 0; padding: 0; display: block;}

	#mainmenu {display: none; margin: 0; padding: 0;}
	#mainmenu>ul>li {width: 80%;}

	#mainmenu {font-size: 0.9em;}

	.menu-fullwidth {min-height: 235px;}

/*  comment out the next three lines to hide dropdown menus by default (i.e. for mobiles) */
	#mainmenu ul li ul {display: block;} /* dropdown menus visible */
	li.drop:hover .dropdown_fullwidth {left: -1px;} /* dropdown menus are shown if viewport is wide enough by default */
	li.drop-this:hover .dropdown_fullwidth {left: -1px;} /* dropdown menus are shown if viewport is wide enough by default */

/*  uncomment next line to hide dropdown menus by default (i.e. for mobiles) */
/*	#mainmenu ul li ul {display: none;} */

/* breakpoint > 401px 26em (was 400px 24em, changed for iPhone 6 which is 401px resolution in portrait mode */ 
/* inherits mobile styles, these styles are for small-sized viewports... */

@media all and (min-width: 26em){

.em24 {display:inline;}

	#mainmenu-button {display: none;}

	#mainmenu {display: block;}
	#mainmenu>ul>li {width: auto;}

/*  uncomment next three lines to make menus visible if dropdown menus hidden by default above (i.e. for mobiles) */
	#mainmenu ul li ul {display: block;}
	li.drop:hover .dropdown_fullwidth {left: -1px;}
	li.drop-this:hover .dropdown_fullwidth {left: -1px;}

}

/* /breakpoint at 401px */

/* second breakpoint at 576px 36em */
/* inherits first breakpoint styles, these styles are for mid-sized viewports and above... */

@media all and (min-width: 36em){

.em36 {display:inline;}

	#mainmenu {background: rgba(255,255,255,0.8);} 				/* translucency added */
	.dropdown_fullwidth {background: rgba(217,217,217,0.9);} 	/* translucency added */

	.menu-fullwidth .li-group {width: 45%; float: left; margin-right: 1%;}

	#productmenu .li-group:hover .ul-sub-group {display: block;}
	#featuredmenu .li-group:hover .ul-sub-group {display: block;}
	#aboutmenu .li-group:hover .ul-sub-group {display: block;}
	#contactmenu .li-group:hover .ul-sub-group {display: block;}

}

/* third breakpoint at 800px 50em */
/* inherits first breakpoint styles, these styles are for mid-sized viewports and above... */

@media all and (min-width: 50em){

.em50 {display:inline;}


	#mainmenu {margin-left: 0;}

	.menu-fullwidth .li-group {width: 30%; float: left; margin-right: 1%;}

	#productmenu .li-group:hover .ul-sub-group {display: block;}
	#featuredmenu .li-group:hover .ul-sub-group {display: block;}
	#aboutmenu .li-group:hover .ul-sub-group {display: block;}
	#contactmenu .li-group:hover .ul-sub-group {display: block;}

}

/* fourth breakpoint at 960px */
/* Inherits above styles, these styles are for largest viewports... */

@media all and (min-width: 60em){

.em60 {display:inline;}

	#mainmenu {margin-left: 0;}

/* add more styles for largest viewports here... */

}