/*
Item Name : CSS3 Mega Drop Down Menu
Author URI : http://codecanyon.net/user/Pixelworkshop/
Item URI : http://codecanyon.net/item/css3-mega-drop-down-menu/126387
Version : 6.11
*/

/*

TABLE OF CONTENTS

01 MENU BAR
02 DROP DOWN MENU
03 CONTENT STYLING
04 CONTACT FORM
05 VERTICAL MEGA MENU
06 LIGHT THEME
07 DARK THEME
08 COLORS
09 MOBILE DEVICES

*/


.pagecontent{width:960px;margin:30px auto;}
.pagecontent p,.pagecontent li{color:#666;font-size:12px;line-height:18px;}
.pagecontent ul,.pagecontent li{padding-left: 16px}
.pagecontent .pusher{width:100%;height:50px}
.pagecontent a{color:#999;text-decoration:none}
.pagecontent h1,.pagecontent h3{color:#222}
.pagecontentclear {clear: both;}
/* Vertical Menu Demos */
.pagewrapper {width: 960px;margin: 0 auto;}
.pagewrapper .pagecontent {width:690px;float: left;margin: 10px 0 0 0;}
.pagewrapper .megamenu_vertical_left {margin-right: 30px;}
.pagewrapper .megamenu_vertical_right {margin-left: 30px;}
@media only screen and (max-width: 1024px) {
	.pagecontent, .pagewrapper{width:95%;}
	.pagewrapper .pagecontent {width:100%;}
	.pagewrapper .megamenu_vertical_left {margin-right: auto;}
	.pagewrapper .megamenu_vertical_right {margin-left: auto;}
}
@media only screen and (max-width:767px) {
	.pagecontent, .pagewrapper{width:420px;}
	.pagewrapper .pagecontent {width:420px;}
}
@media only screen and (max-width:479px) {
	.pagecontent, .pagewrapper{width:300px;}
	.pagewrapper .pagecontent {width:300px;}
}


/*  _______________________________________

	01 MENU BAR
    _______________________________________  */

/* 
	IMPORTANT NOTICE
	If you're using the whole width menu, you should use at least a reset like :
	body {margin:0; padding:0;}
	Otherwise, some browsers may add margins and won't place the menu properly.
	It generally helps to include a CSS reset like : 
	http://meyerweb.com/eric/tools/css/reset/
	Keep in mind that a reset must be placed first, before any other CSS markup.
*/
.megamenu_wrapper,
.megamenu_wrapper_full {
	margin:0 auto;
	display:block;
	position: relative;
	z-index:9999;
	font-size:12px;
	line-height:21px;
}
.megamenu_wrapper {
	width: 1200px;
}
.megamenu_wrapper_full {
	width: 100%;
}
.megamenu_container {
	width:100%;
	margin:0 auto;
}
.megamenu_wrapper .megamenu_container {
	width:100%;
}

.megamenu_wrapper_full .megamenu_container {
	width: 96%;
	padding: 0 2% 0 2%;
}
.megamenu_container .megamenu {
	list-style:none;
	width:1200px;
	margin:0 auto;
	padding: 0;
}
.megamenu > li {
	float:left;
	position:relative;
	margin-right:5px;
}
.megamenu li.menuitem_fullwidth {
	position: static !important;
}
.megamenu > li > a {
	outline:0;
	padding: 10px 12px;
	text-decoration: none;
	display: block;
	height: 20px;
}
.megamenu > li .menuitem_drop {
	padding-right:16px;
}
.megamenu > li.menuitem_nodrop > a {
	padding-bottom:10px;
}

/* Right aligned menu item */

.megamenu > li.menuitem_right {
	float:right;
	right:0;
	margin-right:0;
}

/* Menu Button (Mobiles) */

.megamenu li.megamenu_button {
	display: none;
}
.megamenu li.megamenu_button_active {
	background:#000000 !important;
}




/*  _______________________________________

	02 DROP DOWN MENU
    _______________________________________  */




/* Drop Downs Containers */

.megamenu .dropdown_1column, 
.megamenu .dropdown_2columns, 
.megamenu .dropdown_3columns, 
.megamenu .dropdown_4columns,
.megamenu .dropdown_5columns,
.megamenu .dropdown_fullwidth {
	opacity:0;
	margin:0;
	display:block;
	position:absolute;
	top:42px;
	left:0;
	-webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.38);
	-moz-box-shadow:    0px 10px 5px rgba(50, 50, 50, 0.38);
	box-shadow:         0px 10px 5px rgba(50, 50, 50, 0.38);
}

/* Drop Downs Sizes */

.megamenu .dropdown_1column {width: 135px;padding:15px;}
.megamenu .dropdown_2columns {width: 445px;padding:15px;}
.megamenu .dropdown_3columns {width: 445px;padding:15px;}
.megamenu .dropdown_4columns {width: 600px;padding:15px;}
.megamenu .dropdown_5columns {width: 755px;padding:15px;}
.megamenu .dropdown_fullwidth {
	width: 100%;
	padding:15px;
	top:47px;
	left:0;
}
.megamenu_wrapper_full .megamenu .dropdown_fullwidth {
	left:50%;
	margin-left:-481px;
}
.megamenu_wrapper .dropdown_right,
.megamenu_wrapper_full .dropdown_right {
	left:auto;
	right:0;
}
.megamenu_wrapper .megamenu li.menuitem_right .dropdown_fullwidth {
	left:auto;
	right:8px;
}
.megamenu_wrapper_full .megamenu li.menuitem_right > .dropdown_fullwidth {
	top:40px;
}

/* Showing Drop Down on Mouse Hover */

.megamenu li:hover > div {
	display: block;
}

/* Columns Sizes */

.megamenu .col_one_sixth,
.megamenu .col_one_fifth,
.megamenu .col_one_quarter,
.megamenu .col_one_third,
.megamenu .col_two_fifths,
.megamenu .col_half,
.megamenu .col_three_fifths,
.megamenu .col_two_thirds,
.megamenu .col_three_quarters,
.megamenu .col_four_fifths,
.megamenu .col_five_sixths,
.megamenu .col_full {
	float: left;
	margin-left: 4%;
}
.megamenu .col_one_sixth {width:14.66667%;}
.megamenu .col_one_fifth {width:18%;}
.megamenu .col_one_quarter {width:23%;}
.megamenu .col_one_third {width:31.33333%;}
.megamenu .col_two_fifths {width:38%;}
.megamenu .col_half {width:48%;}
.megamenu .col_three_fifths {width:58%;}
.megamenu .col_two_thirds {width:64.66667%;}
.megamenu .col_three_quarters {width:73%;}
.megamenu .col_four_fifths {width:78%;}
.megamenu .col_five_sixths {width:81.33333%;}
.megamenu .col_full {width:100%;}

/* IMPORTANT */

/* Use the firstcolumn class for the first element of a new row of content */
.megamenu .firstcolumn {
	margin-left: 0;
	clear: left;
}




/*  _______________________________________

	03 CONTENT STYLING
    _______________________________________  */




.megamenu p,
.megamenu ul,
.megamenu li,
.megamenu h2,
.megamenu h3 {
	font-size:14px; 
	line-height:21px;
	text-align:left;
	color:#737373;
}
.megamenu p {
	margin:0;
	padding:10px;
}
.megamenu .strong {
	font-weight:bold;
}
.megamenu .italic {
	font-style:italic;
}
.megamenu h2, 
.megamenu h3 {
	margin-top:7px;
}
.megamenu h2 {
	font-weight:400;
	font-size:21px;
	padding-bottom:11px;
}
.megamenu h3 {
	font-weight:600;
	font-size:14px;
	margin-bottom:14px;
	padding-bottom:7px;
}
.megamenu li a {
	text-decoration:none;
	font-size:14px;
}
.megamenu .pusher { /* Use this pucher if you want to give more vertical spacing between your rows of content */
	margin-top:18px;
}

/* Icon paragraphs */

.megamenu .help,
.megamenu .favorite,
.megamenu .mail,
.megamenu .print {
	padding-left:36px;
	margin-bottom:18px;
}
.megamenu .help {background:url("../dimages/help.png") no-repeat 0 2px;}
.megamenu .favorite {background:url("../dimages/favorite.png") no-repeat 0 2px;}
.megamenu .mail {background:url("../dimages/mail.png") no-repeat 0 2px;}
.megamenu .print {background:url("../dimages/print.png") no-repeat 0 2px;}

/* Images styles */

.megamenu .imgshadow_dark,
.megamenu .imgshadow_light {
	padding:4px;
	margin-top:5px;
}
.megamenu .img_left { /* Image sticks to the left */
	float:left;
	margin:5px 15px 5px 0;
}
.megamenu .img_right { /* Image sticks to the right */
	float:right;
	margin:5px 0 5px 15px;
}

/* Box styles */

.megamenu li .black_box,
.megamenu li .dark_grey_box {
	margin: 15px 0;
	color: #eeeeee;
	padding:10px;
}

.megamenu li .black_box:last-child{
	margin-bottom: 0px;
}

/* Standard lists styles */

.megamenu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
.megamenu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	padding:0;
	margin:0;
	float:left;
	text-align:left;
	width:100%;
}
.megamenu li ul li a {
	padding:0;
}

/* Greybox lists styles */

.megamenu li .greybox li {
	margin:0 0 4px 0;
	padding:4px 6% 4px 6%;
	width:88%;
}

/* Other lists styles */

.megamenu li .plus li {
	margin:0 0 4px 0;
	padding:0 0 0 20px;
	float: left;
}

/* Social Icons */

.megamenu li ul.social {
	list-style:none;
	margin:0;
	padding:0;
}
.megamenu li ul.social li {
	padding-top:5px;
	margin:0 12px 12px 0;
	float:left;
	position:relative;
	display:inline;
	width:32px;
}
.megamenu li ul.social li img {
	border:none;
}
.megamenu li ul.social li:hover {
	padding-top:5px;
	margin:-1px 12px 12px 0;
}
.megamenu li ul.social li span {
	display:none;
}

/* 2-Levels Drop Down */

.megamenu .dropdown_flyout {
	min-width: 120px;
}
.megamenu .levels, 
.megamenu .levels ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.megamenu .levels a {
	display: block;
	width: 10em;
}
.megamenu .levels li {
	float: left;
}
.megamenu .levels li ul {
	position: absolute;
	top:-23px;
	margin:15px 0 0 4px;
	padding:10px;
	left: -999em;
	z-index: 101;
}

.megamenu .levels li:hover > ul {
	left: 96%;
}


.megamenu_light_theme .megamenu_container > ul > li > a,
.megamenu_light_theme .megamenu_container .megamenu > li.noactive a {
	font-size:14px;
	font-weight:bold;
	color:#fff !important;
}
.megamenu_light_theme .megamenu_container > ul > li:hover > a {
	color:#da4c49;
}
.megamenu_light_theme ul li .menuitem_drop,
.megamenu_light_theme .megamenu li.noactive .menuitem_drop {

}
.megamenu_vertical_left .megamenu_light_theme ul li .menuitem_drop,
.megamenu_vertical_left .megamenu_light_theme .megamenu li.noactive .menuitem_drop {

}
.megamenu_vertical_right .megamenu_light_theme ul li .menuitem_drop,
.megamenu_vertical_right .megamenu_light_theme .megamenu li.noactive .menuitem_drop {

}
.megamenu_light_theme .megamenu > li > div,
.megamenu_light_theme ul .levels li ul {
	background:#FFF;
	}
.megamenu_wrapper_vertical .megamenu_light_theme .megamenu > li > div,
.megamenu_light_theme ul .levels li ul {
	border:1px solid #444444;
}

.megamenu_light_theme ul h2, 
.megamenu_light_theme ul h3 {
	
}
.megamenu_light_theme ul .imgshadow_dark { /* Better style on dark background */
	background:#FFFFFF;
}
.megamenu_light_theme ul .imgshadow_light { /* Better style on light background */
	background:#FFFFFF;
	border:1px solid #777777;
}
.megamenu_light_theme ul li .black_box {
	font-size:14px;
	color:#535353;
	background-color:#F7F7F7;
}

.megamenu_light_theme ul li .dark_grey_box {
	color:#535353;
	background-color:#555555;
}
.megamenu_light_theme ul li .greybox li {
	background:#F4F4F4;
	border:1px solid #bbbbbb;
}
.megamenu_light_theme ul li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
}
.megamenu_light_theme ul li .plus li {
	background: url("../dimages/plus.png") left 6px no-repeat;
}
.megamenu_light_theme ul .levels a.parent, 
.megamenu_light_theme ul .levels a.parent:hover {

}
.megamenu_vertical_right .megamenu_light_theme ul .levels a.parent, 
.megamenu_vertical_right .megamenu_light_theme ul .levels a.parent:hover {

}
.megamenu_light_theme ul .contact_form input:focus, 
.megamenu_light_theme ul .contact_form textarea:focus, 
.megamenu_light_theme ul .contact_form select:focus,
.megamenu_light_theme ul .contact_form input:hover, 
.megamenu_light_theme ul .contact_form textarea:hover, 
.megamenu_light_theme ul .contact_form select:hover {
	box-shadow: rgba(0,0,0, 0.7) 0 0 3px;
	-moz-box-shadow: rgba(0,0,0, 0.7) 0 0 3px;
	-webkit-box-shadow: rgba(0,0,0, 0.7) 0 0 3px;  
}
.megamenu_light_theme ul .contact_form input, 
.megamenu_light_theme ul textarea, 
.megamenu_light_theme ul select {
	color: #535353; 
	background-color:#222222;
	border:1px solid #0A0A0A;
}
.megamenu_light_theme ul .contact_form input.button {
	background-color:#1E1E1E;
	border:1px solid #0A0A0A;
	color:#cccccc;	
}
.megamenu_light_theme ul .contact_form input.button:hover {
	color:#eeeeee;	
	background-color:#222222;
	border:1px solid #000000;
}




/*  _______________________________________

	07 DARK THEME
    _______________________________________  */




.megamenu_dark_theme .megamenu_container > ul > li:hover,
.megamenu_dark_theme .megamenu_container .megamenu > li.active,
.megamenu_dark_theme .megamenu_container > ul > li.menuitem_nodrop:hover {
	background-color:#161616;
}
.megamenu_dark_theme .megamenu_container > ul > li > a {
	color:#eee;
}
.megamenu_dark_theme ul p,
.megamenu_dark_theme ul ul,
.megamenu_dark_theme ul li,
.megamenu_dark_theme ul h2,
.megamenu_dark_theme ul h3,
.megamenu_dark_theme .megamenu_container > ul > li:hover > a {
	color:#ffffff;
}
.megamenu_dark_theme ul li .menuitem_drop,
.megamenu_dark_theme .megamenu li.noactive .menuitem_drop {

}
.megamenu_vertical_left .megamenu_dark_theme ul li .menuitem_drop,
.megamenu_vertical_left .megamenu_dark_theme .megamenu li.noactive .menuitem_drop {

}
.megamenu_vertical_right .megamenu_dark_theme ul li .menuitem_drop,
.megamenu_vertical_right .megamenu_dark_theme .megamenu li.noactive .menuitem_drop {

}
.megamenu_dark_theme .megamenu > li > div,
.megamenu_dark_theme ul .levels li ul {
	background:#161616;
	border:1px solid #000000;
	border-top: none;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#161616), to(#0A0A0A));
	background: -webkit-linear-gradient(top, #161616, #0A0A0A);
	background: -moz-linear-gradient(top, #161616, #0A0A0A);
	background: -o-linear-gradient(top, #161616, #0A0A0A);
	background: -ms-linear-gradient(top, #161616, #0A0A0A);
	background: linear-gradient(top, #161616, #0A0A0A);
}
.megamenu_wrapper_vertical .megamenu_dark_theme .megamenu > li > div,
.megamenu_dark_theme ul .levels li ul {
	border:1px solid #000000;
}
.megamenu_dark_theme ul h2, 
.megamenu_dark_theme ul h3 {
	border-bottom:1px solid #333333;
}
.megamenu_dark_theme ul .imgshadow_dark,
.megamenu_dark_theme ul .imgshadow_light {
	background:#FFFFFF;
	border:1px solid #333333;
	-webkit-box-shadow:0 0 5px #000000;
	-moz-box-shadow:0 0 5px #000000;
	box-shadow:0 0 5px #000000;
}
.megamenu_dark_theme ul .imgshadow_light {
	border:1px solid #777777;
}
.megamenu_dark_theme ul li .black_box,
.megamenu_dark_theme ul li .dark_grey_box {
	background-color:#0A0A0A;
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}
.megamenu_dark_theme ul li .greybox li {
	background:#0A0A0A;
	border:1px solid #000000;
}
.megamenu_dark_theme ul li .greybox li:hover {
	background:#141414;
	border:1px solid #111111;
}
.megamenu_dark_theme ul li .plus li {

}
.megamenu_dark_theme ul .levels a.parent, 
.megamenu_dark_theme ul .levels a.parent:hover {

}
.megamenu_vertical_right .megamenu_dark_theme ul .levels a.parent, 
.megamenu_vertical_right .megamenu_dark_theme ul .levels a.parent:hover {

}
.megamenu_dark_theme ul .contact_form input:focus, 
.megamenu_dark_theme ul .contact_form textarea:focus, 
.megamenu_dark_theme ul .contact_form select:focus {
	box-shadow: rgba(0,0,0, 0.7) 0 0 8px;
	-moz-box-shadow: rgba(0,0,0, 0.7) 0 0 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.7) 0 0 8px;  
	border:1px solid #333333;
}
.megamenu_dark_theme ul .contact_form input:hover, 
.megamenu_dark_theme ul .contact_form textarea:hover, 
.megamenu_dark_theme ul .contact_form select:hover {
	-webkit-box-shadow: rgba(0,0,0, 0.3) 0 0 8px;
	-moz-box-shadow: rgba(0,0,0, 0.3) 0 0 8px;
	box-shadow: rgba(0,0,0, 0.3) 0 0 8px;
}
.megamenu_dark_theme ul .contact_form input, 
.megamenu_dark_theme ul .contact_form textarea, 
.megamenu_dark_theme ul .contact_form select {
	color: #FFFFFF; 
	background-color:#222222;
	border:1px solid #0A0A0A;
}
.megamenu_dark_theme ul .contact_form input.button {
	background-color:#1E1E1E;
	border:1px solid #0A0A0A;
	color:#cccccc;	
}
.megamenu_dark_theme ul .contact_form input.button:hover {
	color:#eeeeee;	
	background-color:#222222;
	border:1px solid #000000;
}




/*  _______________________________________

	08 COLORS
    _______________________________________  */


.megamenu_white {
	border:2px solid #0095cc;
	background:#00aeef;
	border-radius:7px;
}

.megamenu_dark_theme .megamenu_white li div a {color:#505050;}
.megamenu_dark_theme .megamenu_white li div a:hover {color:#da4c49;}
.megamenu_dark_theme .megamenu_white li ul li a:hover {color:#da4c49;}
.megamenu_light_theme .megamenu_white li div a {color: #505050;}
.megamenu_light_theme .megamenu_white li div a:hover {color:#da4c49}
.megamenu_light_theme .megamenu_white li ul li a:hover {color:#da4c49}


/* No left & right borders if full width menu bar */

.megamenu_wrapper_full .megamenu_container {
	border-left:none;
	border-right:none;
}




/*  _______________________________________

	09 MOBILE DEVICES
    _______________________________________  */




.megamenu_dark_theme .megamenu_container .megamenu > li.noactive,
.megamenu_light_theme .megamenu_container .megamenu > li.noactive {
	background-color:transparent;
}

.megamenu:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}