/*
Item Name : Responsive Mega Menu Complete Set
Item URI : http://codecanyon.net/item/mega-menu-complete-set/152825
Author URI : http://codecanyon.net/user/Pixelworkshop
Version : 4.0
*/

/*

TABLE OF CONTENTS

01 MEGA MENU BAR
02 MEGA MENU CONTAINERS
03 DROP DOWN COLUMNS GRID
04 FLY-OUT MENU
05 MEGA MENU WEB ELEMENTS
   1. General Typography
   2. Lists
   3. Custom Paragraphs
   4. Images
07 DEFAULT THEMES, DARK & LIGHT (REQUIRED)
   1. Light Menu Bar
   2. Dark Drop Down
08 MOBILE DEVICES
   1. Common Media Queries
   2. Horizontal Mega Menu Media Queries
   3. Vertical Mega Menu Media Queries

*/

/*  _______________________________________________

    01 MEGA MENU BAR
    _______________________________________________  */

.megamenu_container {
	width:100%;
	height: 46px;
	*height: 44px;
	margin:0 auto;
	position: relative;
	z-index:9999;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.megamenu {
	list-style:none;
	padding:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1;
}
	.megamenu > li {
		float:left;
		margin:0;
		border:none;
		-webkit-transition: background 0.5s ease;
		-moz-transition: background 0.5s ease;
		-o-transition: background 0.5s ease;
		-ms-transition: background 0.5s ease;
		transition: background 0.5s ease;
	}
		.megamenu > li > a {
			font-size:14px;
			text-transform:uppercase;
			outline:0;
			text-decoration:none;
			display:block;
			padding: 10px 15px;
		}
		.megamenu > li .megamenu_drop {
			padding-right:30px;
		}
		.megamenu li.megamenu_button {
			display: none;
			-webkit-transition: none;
			-moz-transition: none;
			-o-transition: none;
			-ms-transition: none;
			transition: none;
		}

/*  _______________________________________________

    02 MEGA MENU CONTAINERS
    _______________________________________________  */

.megamenu li .dropdown_container,
.megamenu li .dropdown_fullwidth,
.megamenu li .dropdown_multilevel {
	position: absolute;
	margin:0;
	padding-top:24px;
	padding-bottom:10px;
	left:-9999em;
	top:-9999em;
	display: block;
	zoom:1;
	z-index:9998;
}
.megamenu li .dropdown_first {
	margin-left:-1px;
}

/* Showing Drop Down on Mouse Hover */
.megamenu li:hover .dropdown_container {
	position: absolute;
}
.megamenu li:hover .dropdown_fullwidth {
	position: absolute;
}

/*
	Bigger containers need smaller padding values and
	on the opposite, smaller containers will have
	higher paddings. 
	This makes the content within each kind of drop down 
	equally distant from the left edge. 
*/

.megamenu .dropdown_1column {
	width: 8.3334%;
	padding-left: 2%;
	padding-right: 2%;
}
.megamenu .dropdown_2columns {
	width: 16.6667%;
	padding-left: 1.8333%;
	padding-right: 1.8333%;
}
.megamenu .dropdown_3columns {
	width: 25%;
	padding-left: 1.5%;
	padding-right: 1.5%;
}
.megamenu .dropdown_4columns {
	width: 33.3334%;
	padding-left: 1.333%;
	padding-right: 1.333%;
}
.megamenu .dropdown_5columns {
	width: 41.6667%;
	padding-left: 1.166%;
	padding-right: 1.166%;
}
.megamenu .dropdown_6columns {
	width: 50%;
	padding-left: 1%;
	padding-right: 1%;
}
.megamenu .dropdown_7columns {
	width: 58.3334%;
	padding-left: 0.833%;
	padding-right: 0.833%;
}
.megamenu .dropdown_8columns {
	width: 66.6667%;
	padding-left: 0.666%;
	padding-right: 0.666%;
}
.megamenu .dropdown_9columns {
	width: 75%;
	padding-left: 0.5%;
	padding-right: 0.5%;
}
.megamenu .dropdown_10columns {
	width: 83.3334%;
	padding-left: 0.333%;
	padding-right: 0.333%;
}
.megamenu .dropdown_11columns {
	width: 91.6667%;
	padding-left: 0.1666%;
	padding-right: 0.1666%;
}
.megamenu .dropdown_12columns,
.megamenu .dropdown_fullwidth {
	width: 100%;
}

/*  _______________________________________________

    03 DROP DOWN COLUMNS GRID
    _______________________________________________  */

.megamenu .col_1,
.megamenu .col_2,
.megamenu .col_3,
.megamenu .col_4,
.megamenu .col_5,
.megamenu .col_6,
.megamenu .col_7,
.megamenu .col_8,
.megamenu .col_9,
.megamenu .col_10,
.megamenu .col_11,
.megamenu .col_12 {
	float: left;
	display:inline;
	position: relative;
	margin-left: 2%;
	margin-right: 2%;
	/* 
	Rounding error with IE7.
	Lower margin values will absorb the difference.
	*/
	*margin-left: 1.9%;
	*margin-right: 1.9%;
}

.megamenu .col_1 {width:4.33%;}
.megamenu .col_2 {width:12.66%;}
.megamenu .col_3 {width:21%;}
.megamenu .col_4 {width:29.33%;}
.megamenu .col_5 {width:37.66%;}
.megamenu .col_6 {width:46%;}
.megamenu .col_7 {width:54.33%;}
.megamenu .col_8 {width:62.66%;}
.megamenu .col_9 {width:71%;}
.megamenu .col_10 {width:79.33%;}
.megamenu .col_11 {width:87.66%;}
.megamenu .col_12 {width:96%;}

.megamenu .rowcontent {
	clear:left;
	/*
	IE7 clear issue.
	Display inline required.
	*/
	*display:inline;
}

/*  _______________________________________________

    05 MEGA MENU WEB ELEMENTS
    _______________________________________________  */

/* 1. General Typography */
.megamenu p, 
.megamenu h1, 
.megamenu h2, 
.megamenu h3, 
.megamenu h4, 
.megamenu h5, 
.megamenu h6 {
	padding:0;
	margin:0 0 20px;
}
.megamenu > li > div a {
	text-decoration: none;
	outline: none;
}
.megamenu > li > div a:hover {
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}
.megamenu p {
	font-size:12px; 
	line-height:21px; 
}
.megamenu h1, 
.megamenu h2, 
.megamenu h3,
.megamenu h4, 
.megamenu h5, 
.megamenu h6 {
	font-weight: bold;
	margin:0 0 20px 0;
}
.megamenu h1 {
	font-size: 24px;
	line-height: 28px;
}
.megamenu h2 {
	font-size: 20px;
	line-height: 22px;
}
.megamenu h3 {
	font-size: 16px;
	line-height: 20px;
}
.megamenu h4 {
	font-size: 14px;
	line-height: 18px;
	margin-bottom:14px;
}
.megamenu h5 {
	font-size: 12px;
	line-height: 18px;
	margin-bottom:14px;
}
.megamenu h6 {
	font-size: 10px;
	line-height: 16px;
	margin-bottom:14px;
	text-transform:uppercase;
}

/* 2. Lists */
.megamenu li ul,
.megamenu li ol {
	padding:0;
	margin:0;
}
.megamenu li ul {
	list-style:none;
}
.megamenu li ul li {
	font-size:12px;
	line-height:21px; 
	position:relative;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
}
.megamenu li .list_unstyled {
	list-style: none;
	margin-left:0;
}

.megamenu hr {
	width: 100%;
	height: 0;
	*height:2px;
	border:none;
	margin-bottom: 24px;
}

/* 5. Images */
.megamenu img {
	max-width: 100%;
	height: auto;
	border:none;
	margin-bottom: 18px;
}
	.megamenu img.img_left {
		float: left;
		margin-right: 18px;
	}
	.megamenu img.img_right {
		float: right;
		margin-left: 18px;
	}

/* 9. Tables */
.megamenu .table_light, 
.megamenu .table_dark {
	width:100%;
	padding:0;
	margin:6px 0 18px 0;
	font-size:12px;
	border-spacing: 0px;
	border-collapse: collapse;
}
.megamenu .table_light th, 
.megamenu .table_dark th {
	text-align:left; 
	padding:12px 9px 12px 9px; 
	font-weight:bold; 
	font-size:12px;
}
	.megamenu .table_light td,
	.megamenu .table_dark td {
		padding:12px 9px 12px 9px; 
	}

/*  _______________________________________________

    06 DEFAULT THEMES, DARK & LIGHT (REQUIRED)
    _______________________________________________  */

/* Light Menu Bar */
.megamenu_light_bar {
	
}
.megamenu_light_bar .megamenu {
	color:#58595b;
    font-weight: bold;
}
	.megamenu_light_bar .megamenu > li:hover, 
	.megamenu_light_bar .megamenu > li.active {
		background:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
        text-decoration: none;
	}
	.megamenu_light_bar .megamenu li.noactive {
		background:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
        text-decoration: none;
	}
	.megamenu_light_bar .megamenu > li > a {
		color:#58595b;
        border-bottom: 10px solid #FFF;
        text-decoration: none;
	}
	.megamenu_light_bar .megamenu > li:hover > a {
		color:#58595b;
        border-bottom: 10px solid #CC0033;
        text-decoration: none;
	}


/* 3. Dark Drop Down */
.megamenu_dark .megamenu li .dropdown_container,
.megamenu_dark .megamenu li .dropdown_fullwidth,
.megamenu_dark .megamenu li .dropdown_flyout li ul {
	border-top-width: 0;
	width: 1200px;			/* make the width of the mega menu equal to the width of the page */
	height: auto;
	background: #5c5c5c;	/*fallback for older browsers */
    background: rgba(92, 92, 92, 0.95);
	border-top: 5px solid #CC0033;
	z-index: 1000;
    margin: 0 auto;
}
.megamenu_container_vertical .megamenu li .dropdown_container,
.megamenu_container_vertical .megamenu li .dropdown_fullwidth,
.megamenu_container_vertical .megamenu li .dropdown_flyout li ul {
	border-top-width: 1px;
}
.megamenu_dark .megamenu li .dropdown_flyout li ul {
	border:1px solid #000000;
}
.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent {
	background:url("../img/right.png") no-repeat right 9px;
}
.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent:hover,
.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent.active {
	background-color:#000000;
}
.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent.noactive {
	background-color:transparent;
}
.megamenu_dark .megamenu p, 
.megamenu_dark .megamenu h1, 
.megamenu_dark .megamenu h2, 
.megamenu_dark .megamenu h3, 
.megamenu_dark .megamenu h4, 
.megamenu_dark .megamenu h5, 
.megamenu_dark .megamenu h6 {
	color: #f6f6f6;
	text-shadow: 1px 1px 1px #000000;
}
.megamenu_dark .megamenu > li > div a,
.megamenu_dark .megamenu li ul li,
.megamenu_dark .megamenu li ol li {
	color:#CC0033;
    text-decoration: none;
}
.megamenu_dark .megamenu > li > div a:hover {
	color:#CC0033;
    text-decoration: none;
}
.megamenu_dark .megamenu li ul li:hover,
.megamenu_dark .megamenu li ol li:hover,
.megamenu_dark .megamenu .blue, 
.megamenu_dark .megamenu .grey, 
.megamenu_dark .megamenu .orange, 
.megamenu_dark .megamenu .dark, 
.megamenu_dark .megamenu .purple {
	color:#eeeeee;
}
.megamenu_dark .megamenu .black_box {
	background: #000000;
	color:#ffffff;
}
.megamenu_dark .megamenu .grey_bg {
	background: #eeeeee;
	color: #000000;
	text-shadow:1px 1px 1px #ffffff;
}
.megamenu_dark .megamenu > li.megamenu_searchform:hover {
	background: none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.megamenu_dark .megamenu hr {
	border:none;
	border-bottom:1px solid #202020;
	border-top:1px solid #000000;
}

/*  _______________________________________________

    09 MOBILE DEVICES
    _______________________________________________  */

/* 1. Common Media Queries */

@media only screen and (max-width: 984px) {

	.megamenu img {
		max-width: 96%;
		height: auto;
	}
	.megamenu textarea {
		width:96%;
	}

}


@media only screen and (min-width: 480px) and (max-width: 767px) {

	.megamenu_container .megamenu > li > div > .responsive_sixths,
	.megamenu_container_vertical .megamenu > li > .dropvertical_container > div > .responsive_sixths {
		width: 8.66%;
	}
	.megamenu_container .megamenu > li > div > .responsive_fourths,
	.megamenu_container_vertical .megamenu > li > .dropvertical_container > div > .responsive_fourths {
		width: 17%;
	}
	.megamenu_container .megamenu > li > div > .responsive_thirds,
	.megamenu_container_vertical .megamenu > li > .dropvertical_container > div > .responsive_thirds {
		width: 25.33334%;
	}
	.megamenu_container .megamenu > li > div > .responsive_halfs,
	.megamenu_container_vertical .megamenu > li > .dropvertical_container > div > .responsive_halfs {
		width: 42%;
	}

}


/* 2. Horizontal Mega Menu Media Queries */
@media only screen and (min-width: 768px) and (max-width: 984px) {

	.megamenu_container .megamenu > li {
		margin:0 8px 0 0;
	}
		.megamenu_container .megamenu > li.right {
			margin-right:-1px;
		}
		.megamenu_container .megamenu > li > a {
			padding: 16px 10px 17px 10px;
		}
		.megamenu_container .megamenu > li .megamenu_drop {
			padding-right:30px;
		}

}


@media only screen and (max-width:767px) {

	.megamenu_container {
		height: auto;
	}
	.megamenu_container .megamenu > li,
	.megamenu_container .megamenu > li:hover,
	.megamenu_container .megamenu > li.right,
	.megamenu_container .megamenu > li.right:hover {
		float:none;
		width:auto;
		padding-right:0;
		margin-right:0;
	}
		.megamenu_container .megamenu > li > a {
			padding: 16px 10px 16px 10px;
		}
		.megamenu_container .megamenu li.right a {
			margin-right:0;
		}

	 .megamenu_container .megamenu li:hover .dropdown_container,
	 .megamenu_container .megamenu li:hover .dropdown_fullwidth,
	 .megamenu_container .megamenu li:hover .dropdown_right {
		top:auto;
		left:-1px;
	}
  	.megamenu_container .megamenu .dropdown_1column,
  	.megamenu_container .megamenu .dropdown_2columns,
  	.megamenu_container .megamenu .dropdown_3columns,
	.megamenu_container .megamenu .dropdown_4columns,
	.megamenu_container .megamenu .dropdown_5columns,
	.megamenu_container .megamenu .dropdown_6columns,
	.megamenu_container .megamenu .dropdown_7columns,
	.megamenu_container .megamenu .dropdown_8columns,
	.megamenu_container .megamenu .dropdown_9columns,
	.megamenu_container .megamenu .dropdown_10columns,
	.megamenu_container .megamenu .dropdown_11columns,
	.megamenu_container .megamenu .dropdown_12columns {
		width: 100%;
		padding-left:0;
		padding-right:0;
	}
	.megamenu_container .megamenu .col_1,
	.megamenu_container .megamenu .col_2,
	.megamenu_container .megamenu .col_3,
	.megamenu_container .megamenu .col_4,
	.megamenu_container .megamenu .col_5,
	.megamenu_container .megamenu .col_6,
	.megamenu_container .megamenu .col_7,
	.megamenu_container .megamenu .col_8,
	.megamenu_container .megamenu .col_9,
	.megamenu_container .megamenu .col_10,
	.megamenu_container .megamenu .col_11,
	.megamenu_container .megamenu .col_12 {
		width:92%;
		margin-left: 4%;
		margin-right: 4%;
	}
	.megamenu_container .megamenu > li.megamenu_searchform .megamenu_searchfield {
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.megamenu .dropdown_flyout, 
	.megamenu .dropdown_flyout .dropdown_flyout_level {
		position: relative;
		left:auto;
		top:auto;
		padding: 0;
		margin: 0 4% 0 4%;
	}
	.megamenu .dropdown_flyout li,
	.megamenu .dropdown_flyout ul li {
		width: 100%;
		padding: 3px 0 3px 0;
	}
	.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level {
		left:auto;
		top:auto;
	}
	.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level_left {
		left:auto;
		right:auto;
	}
	.megamenu_dark .megamenu li .dropdown_flyout li ul,	
	.megamenu_light .megamenu li .dropdown_flyout li ul {
		border:none;
		background: none;
	}
	.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent {
		background:url("../img/dropdown.png") no-repeat right 9px;
	}
	.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent {
		background:url("../img/dropdown-b.png") no-repeat right 9px;
	}
	.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent:hover,
	.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent.active,
	.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent:hover,
	.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent.active {
		background-color:transparent;
	}

}


@media only screen and (max-width: 479px) {

	.megamenu_container .megamenu > li > div > .responsive_sixths,
	.megamenu_container .megamenu > li > div > .responsive_fourths,
	.megamenu_container .megamenu > li > div > .responsive_thirds,
	.megamenu_container .megamenu > li > div > .responsive_halfs {
		width: 42%;
	}

}

/* Special Styles for Mega Menu Link Lists */

.mega_menu_content {
	width: 960px;
	margin: 0 auto;
	padding: 25px 0;
	display: block;
	overflow: hidden;
}

ul.links_two_column {
	float: left;
    width: 300px;
	margin: 0 10px 0 0;
    padding: 0;
	list-style-type: none;
}

ul.links_two_column li a:link,
ul.links_two_column li a:visited {
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	line-height: 26px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: none;
	-moz-transition: color 0.5s ease-out;
	-webkit-transition: color 0.5s ease-out;
	-o-transition: color 0.5s ease-out;
	transition: color 0.5s ease-out;
}

ul.links_two_column li a:hover,
ul.links_two_column li a:active {
	font-size: 12px;
	font-weight: bold;
	color: #CC0033;
	line-height: 26px;
	text-transform: uppercase;
	text-decoration: underline;
	border-bottom: none;
	-moz-transition: color 0.5s ease-out;
	-webkit-transition: color 0.5s ease-out;
	-o-transition: color 0.5s ease-out;
	transition: color 0.5s ease-out;
}

.mega_menu_link_information {
	float: right;
	width: 260px;
	margin: 0;
	border: 1px solid #fff;
}

.mega_menu_link_image_container {
	margin: 0 0 10px 0;
}

.mega_menu_link_content_container {
	padding: 0 10px 20px 10px;
}