/*

TABLE OF CONTENTS

00 PAGE STYLING (REMOVABLE)
01 MENU BUTTON
   1. Mega Menu Container
   2. Mega Menu Button
02 DROP DOWNS
   1. Drop Downs Default Behavior
   2. Fade Transition
   3. Slide Transition
   4. Toggle Transition
03 DROP DOWN ELEMENTS
   1. Arrows
   2. List Elements
   3. Typography
   4. Icons
   5. Large Icons

*/



/*  _______________________________________

	00 PAGE STYLING (REMOVABLE)
    _______________________________________  */






/*  _______________________________________

    01 MENU BUTTON
    _______________________________________  */



/* 1. Mega Menu Container */


.megamenu_container {
	height:44px;
	margin:0;
	position:relative;
	float:left;
	z-index:9;
}
	.megamenu_container:hover {
		cursor:pointer;
	}
	.megamenu_container a {
		text-decoration: none;
	}
		.megamenu_container a:focus {
			outline:none;
		}


/* 2. Mega Menu Button */


.megamenu {
	font-size:13px;
	list-style:none;
	padding:0;
	margin:0;
}
	.megamenu .top_level {
		display:inline;
		border:none;
		margin:0;
		position: relative;
		font-size: 14px;
    color: #fff;
    font-weight: 700;
    line-height: 44px;
    outline: 0;
    text-decoration: none;
    padding: 14px 12px 15px 0;
	}
		.megamenu .top_level > span {
			font-size:14px;
			color:#fff;
			font-weight: 700;
			line-height:44px;
			outline:0;
			text-decoration:none;
    background: url(../img/arrow_down.png) no-repeat center right;
    padding: 14px 25px 15px 0;
		}
		
		.megamenu .top_level.last > span {
			color: #f3cb33 !important;
		}


/*  _______________________________________

    02 DROP DOWNS
    _______________________________________  */



/* 1. Drop Downs Default Behavior */

.megamenu .megamenu_main,
.megamenu .megamenu_main ul {
	position:absolute;
	top:-9999em; /* Used to avoid scrollbars */
	left:0 !important;
	width: 220px;
	margin:0 0 40px -1px;
	padding:0;
	-webkit-border-radius:0 0 3px 3px;
	-moz-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;	
	-webkit-box-shadow: 0 2px 5px #505050;
	-moz-box-shadow: 0 2px 5px #505050;
	-o-box-shadow: 0 2px 5px #505050;
	box-shadow: 0 2px 5px #505050;
	border:solid 1px #dddddd;
	border-top:solid 3px #010d4a;
	background:#FCFCFC;
	opacity:0;
}

.megamenu .megamenu_main ul{
	left:220px !important;
}

.megamenu .megamenu_main li .megamenu_2col {
	width: 400px;
}
.megamenu .megamenu_main li .megamenu_3col {
	width: 600px;
}
.megamenu > li:hover .megamenu_main {
	top:42px;
	left:0;
	opacity:1;
}
.megamenu .megamenu_main li:hover > ul {
	top:-3px;
	left:100%;
	opacity:1;
	height: 100%;
}
.megamenu .megamenu_main li:hover > .left_dropdown {
	left:-100%;
}

.megamenu > li .main_opened {
	top:42px;
	left:0;
	opacity:1;
}

/* 2. Fade Transition */

.megamenu_fade .megamenu_main,
.megamenu_fade .megamenu_main ul {
	-webkit-transition: opacity 0.4s 0.2s;
	-moz-transition: opacity 0.4s 0.2s;
	-o-transition: opacity 0.4s 0.2s;
	-ms-transition: opacity 0.4s 0.2s;
	transition: opacity 0.4s 0.2s;
}

/* 3. Slide Transition */

.megamenu_slide .megamenu_main {
	top:30px;
	-webkit-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-moz-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-o-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-ms-transition: top 0.3s 0.2s, opacity 0 0.2s;
	transition: top 0.3s 0.2s, opacity 0 0.2s;
}
.megamenu_slide .megamenu_main ul {
	left:80%;
	-webkit-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-moz-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-o-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-ms-transition: left 0.2s 0.2s, opacity 0 0.2s;
	transition: left 0.2s 0.2s, opacity 0 0.2s;
}
.megamenu_slide .megamenu_main li > .left_dropdown {
	left:-80%;
}

/* 4. Toggle Transition */

.megamenu_toggle .megamenu_main {
	top:30px;
	-webkit-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-moz-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-o-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-ms-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	transition: opacity 0.4s 0.2s, top 0.3s 0.2s;

}
.megamenu_toggle .megamenu_main ul {
	left:90%;
	-webkit-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-moz-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-o-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-ms-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
}
.megamenu_toggle .megamenu_main li > .left_dropdown {
	left:-90%;
}



/*  _______________________________________

    03 DROP DOWN ELEMENTS
    _______________________________________  */



/* 1. Arrows */


.megamenu .dropdown_arrow {
	background-image:url("../img/arrow_left.png");
	background-repeat: no-repeat;
	background-position: 95% 48%;
}
.megamenu .dropdown_arrow:hover {
	background-image:url("../img/arrow_left_hover.png");
}

.megamenu > li .megamenu_main a {
	text-decoration: none;
	color:#333333 !important;
	    font-weight: 200;
}

.megamenu > li .megamenu_main a:hover {
	text-decoration: none;
	color:#fff !important;
}

.megamenu > li:hover .megamenu_main a {
	text-decoration: none;
	color:#fff;
}

.megamenu > li .megamenu_main a:hover {
	text-decoration: none;
	color:#fff;
}


/* 2. List Elements */


.megamenu > li ul {
	list-style: none;
	padding:0 0 0 18px;
	margin:0 0 18px 0;
}
.megamenu > li ul li {
	font-size:14px;
	position:static;
	color:#333333;
padding: 5px 15px;
	-webkit-transition: background-color 0.3S;
	-moz-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.megamenu > li ul li:hover {
	background-color: #010d4a;
	color: #fff !important;
}

.megamenu > li ul li:hover a {
	color: #fff !important;
}

.megamenu .megamenu_main li:hover > ul li a {
	color: #333333 !important;
}

.megamenu .megamenu_main li:hover > ul li:hover a {
	color: #fff !important;
}

.megamenu .megamenu_main li > ul li {
	padding: 5px 15px;
}

.megamenu > li ul .relative_dropdown {
	position:relative;
}


/* 3. Typography */


.megamenu p {
	padding:0;
	margin:0 0 12px 0;
}
.megamenu h3 {
	font-size: 14px;
	font-weight:bold;
	padding:0;
	margin:6px 0 12px 0;
}
.megamenu .new {
	font-size:xx-small; 
	vertical-align:text-top;
	color:#e10000;
}
.megamenu .small {
	font-size: 11px;
	color: #888888;
	display: block;
	padding: 0;
	margin-top: 4px;
}
.megamenu .title {
	display: block;
	font-size: 14px;
	line-height: 21px;
}


/* 4. Icons */


.megamenu .icon_bookmark,
.megamenu .icon_bubble,
.megamenu .icon_charts,
.megamenu .icon_check,
.megamenu .icon_cross,
.megamenu .icon_favorite,
.megamenu .icon_help,
.megamenu .icon_info,
.megamenu .icon_magnifier,
.megamenu .icon_mail,
.megamenu .icon_marker,
.megamenu .icon_pencil,
.megamenu .icon_settings {
	padding-left:38px;
	background-repeat: no-repeat;
	background-position: 12px 50%;
}
.megamenu .icon_bookmark {
	background-image:url("../img/icons/icon_bookmark.png");
}
.megamenu .icon_bubble {
	background-image:url("../img/icons/icon_bubble.png");
}
.megamenu .icon_charts {
	background-image:url("../img/icons/icon_charts.png");
}
.megamenu .icon_check {
	background-image:url("../img/icons/icon_check.png");
}
.megamenu .icon_cross {
	background-image:url("../img/icons/icon_cross.png");
}
.megamenu .icon_favorite {
	background-image:url("../img/icons/icon_favorite.png");
}
.megamenu .icon_help {
	background-image:url("../img/icons/icon_help.png");
}
.megamenu .icon_info {
	background-image:url("../img/icons/icon_info.png");
}
.megamenu .icon_magnifier {
	background-image:url("../img/icons/icon_magnifier.png");
}
.megamenu .icon_mail {
	background-image:url("../img/icons/icon_mail.png");
}
.megamenu .icon_marker {
	background-image:url("../img/icons/icon_marker.png");
}
.megamenu .icon_pencil {
	background-image:url("../img/icons/icon_pencil.png");
}
.megamenu .icon_settings {
	background-image:url("../img/icons/icon_settings.png");
}


/* 5. Large Icons */


.megamenu .megamenu_main .large_icons {
	width: 534px;
}
.megamenu .large_icons li {
	width: 128px;
	float: left;
	text-align:center;
	position:relative;
	padding: 25px;
}
.megamenu .large_icons li span {
	font-weight: bold;
	font-size: 14px;
	padding-top:10px;
	display: block;
}
.megamenu img {
	border:none;
}