﻿/* ========== MAIN DIV THAT HOLDS THE ENTIRE MENU ========== */
.menu{}
.menu ul, .menu ol{
	margin:0;
	padding:0;
	list-style:none;
	}

/* ========== FLOAT ========== */
.menu .left{
	float:left;
	}
.menu .right{
	float:right;
	}	
/* ========== DIV THAT HOLDS MAIN LINKS ========== */
.menu ul{
	/*position:relative;*/
	}
/* ========== MAIN LINKS ========== */
.menu ul li{
	float:left;
	position:relative;
	}
.menu ul > li i{}
.menu ul li.menu_right{
	position:relative;
	}
.menu > ul > li:first-child a{
	}
.menu > ul > li:first-child a span{display:none}
.menu ul > li > a{
	position:relative;
	display:block;
	padding:0 25px;
	font:400 14px/38px 'Segoe UI Bold', sans-serif;
	color:#121212;
	text-decoration:none;
	text-transform:uppercase;
	border:#e5e5e5 1px solid;
	}
.menu ul > li > a:before {
	position: absolute; content: ''; bottom: 0; left: 0;
	width: 100%; opacity: 0; -webkit-transform: scale(0, 1);
	transform: scale(0, 1); -webkit-transform-origin: left center;
	transform-origin: left center; border-bottom: 4px solid #e8252c;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	}
.menu ul > li > a:hover:before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }

.menu > ul > li a.mem{}
.menu > ul > li a.mem i{padding-right:5px;}
.menu ul > li > a div{
	padding-top:5px;
	font:400 13px/13px 'Segoe UI', sans-serif;
	color:#fff;
	text-decoration:none;
	text-transform:none;
	}
/* ========== MAIN LINKS ON MOUSEOVER ========== */
.menu ul:hover li.active a{}
.menu ul li:hover > a{border-color:#b2b2b2;}
.menu ul li.active:hover > a{}
.menu ul li:first-child:hover > a{}
/* ========== MAIN LINKS ON MOUSE CLICK ========== */	
.menu ul li a:active, .menu ul li.active a:active{}
/* ========== CLASSIC/MEGA MENU ========== */	
.menu ul ul, .menu .mega_menu{
	position:absolute;
	visibility:hidden;
	opacity:0;
	z-index:997;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	}
.menu ul ul{
	position:absolute;
	top:60px;
	visibility:hidden;
	opacity:0;
	z-index:997;
	-webkit-box-shadow: 0 0 2px rgba(50, 50, 50, 0.35);
	-moz-box-shadow:    0 0 2px rgba(50, 50, 50, 0.35);
	box-shadow:         0 0 2px rgba(50, 50, 50, 0.35);
	}
/* ========== MEGA MENU ========== */		
.menu .mega_menu{
	padding:9px 0 9px;
	border:none;
	border-top:solid 0 #004b09;
	border-bottom:solid 0 #004b09;
	}
/* ========== CLASSIC/MEGA MENU ON MOUSEOVER ========== */
.menu ul li:hover > ul{top:40px;visibility:visible;opacity:1;}
.menu ul li:hover .mega_menu{visibility:visible;opacity:1;}
/* ========== LINKS IN CLASSIC MENU ========== */	
.menu ul ul li{
	float:none;
	position:relative;
	}
.menu ul ul li a{
	position:relative;
	background:#fff;
	min-width:185px;
	height:auto;
	padding:8px 15px;
	font:400 12px/20px 'Segoe UI Bold', sans-serif !important;
	text-transform:uppercase;
	color:#222;
	white-space:nowrap;
	border:none;
	border-bottom:solid 1px #e0e0e0;
	-webkit-transition:all 150ms linear 10ms;
	-moz-transition:all 150ms linear 10ms;
	-ms-transition:all 150ms linear 10ms;
	-o-transition:all 150ms linear 10ms;
	transition:all 150ms linear 10ms;
	}
.menu ul ul li:last-child a{border-bottom:solid 0px #e0e0e0;}	
.menu ul ul li a i{
	position:absolute;
	right:12px;
	}
/* ========== LINKS ON MOUSEOVER IN CLASSIC MENU ========== */
.menu ul ul li:hover > a{color:#222}
.menu ul ul li:first-child:hover a{}
/* ========== LINKS ON MOUSE CLICK IN CLASSIC MENU ========== */
.menu ul ul li a:active{}
/* ========== CLASSIC MENU LVL 2,3,4,... ========== */	
.menu ul ul ul li:first-child a{}
.menu ul ul ul{left:100%;top:20px;
	-webkit-box-shadow: 1px 0px 1px rgba(50, 50, 50, 0);
	-moz-box-shadow:    1px 0px 1px rgba(50, 50, 50, 0);
	box-shadow:         1px 0px 1px rgba(50, 50, 50, 0);
	border:solid 1px #e0e0e0;
	border-left:solid 0px #e0e0e0;
	}
.menu ul ul li:hover ul{left:100%;top:0px;}
.menu ul ul ul li a{border-bottom:solid 1px #e0e0e0 !important;}
.menu ul ul ul li:last-child a{border-bottom:solid 0px #e0e0e0 !important;}
/* ========== MEGA MENU ALIGNED TO THE RIGHT SIDE ========== */	
.menu ul li.menu_right .mega_menu{
	right:0;
	}	
/* ========== DIFFERENT SIZE OF MEGA MENU ========== */
.menu .size1{
	width:150px; /* + 10px from left and right side, width=170px */
	}
.menu .size2{
	width:250px; /* + 10px from left and right side, width=270px */
	}	
.menu .size3{
	width:350px; /* + 10px from left and right side, width=370px */
	}
.menu .size4{
	width:450px; /* + 10px from left and right side, width=470px */
	}
.menu .size5{
	width:550px; /* + 10px from left and right side, width=570px */
	}
.menu .size6{
	width:650px; /* + 10px from left and right side, width=670px */
	}
.menu .size7{
	width:750px; /* + 10px from left and right side, width=770px */
	}
.menu .size8{
	width:850px; /* + 10px from left and right side, width=870px */
	}
.menu .full_width{
	width:100%; /* + 10px from left and right side, width=980px. 980px is the width of the Menu */
	background-color: rgba(56,56,56,1);
	left:0;
	top:65px;
	padding:25px 15px 0px;
	text-align:center;
	}	
/* ========== HEADINGS IN MEGA MENU ========== */
.menu h1, .menu h2, .menu h3, .menu h4, .menu h5, .menu h6{
	margin:0;
	font-family:'Segoe UI', sans-serif;
	font-weight:normal;
	color:#ffff00;
	}
.menu h1{
	font-size:18px;
	}
.menu h2{
	font-size:16px;
	}
.menu h3{
	font-size:14px;
	}
.menu h4{
	font-size:13px;
	}
.menu h5{
	font-size:12px;
	}
.menu h6{
	font-size:12px;
	}
/* ========== CLASSIC LINKS IN MEGA MENU ========== */
.menu .mega_menu a{

	}
.menu .mega_menu a:hover{

	}
/* ========== IMAGES INSIDE LINK IN MEGA MENU ========== */		
.menu .mega_menu a img{
	margin:0;
	}
.menu .mega_menu a img:hover{
	}
.menu .mega_menu a img:active{
	}	
/* ========== TYPOGRAPHY IN MEGA MENU ========== */	
.menu .mega_menu p{
	margin:3px 0 6px 0;
	font-size:12px;
	color:#888;
	font-family:Roboto, Geneva, sans-serif;
	}
.menu .mega_menu .one, .menu .mega_menu .one_half, .menu .mega_menu .one_thirds, .menu .mega_menu .two_thirds, .menu .mega_menu .one_fourth,.menu .mega_menu .three_fourths{
	margin:0 1%;
	padding:0 0 12px;
	float:left;
	}	
.menu .mega_menu .one{
	width:98%;
	}	
.menu .mega_menu .one_half{
	width:48%;
	}
.menu .mega_menu .one_thirds{
	width:31.33%;
	}	
.menu .mega_menu .two_thirds{
	width:64.67%;
	}
.menu .mega_menu .one_fourth{
	width:23%;
	}	
.menu .mega_menu .three_fourths{
	width:73%;
	}		
/* ========== IMAGES IN MEGA MENU ========== */		
.menu .mega_menu img{

	}
.menu .mega_menu img.left{

	}
.menu .mega_menu img.right{

	}
/* ========== PORTFOLIO IN MEGA MENU ========== */	
.menu .mega_menu .portfolio li{
	display:inline-block;
	vertical-align:top;
	width:31.33333%;
	margin:2px 1% 10px;
	float:none;
	*float:left;
	}
.item3{width:auto !important;margin:2px 2% 10px !important;}
.item4{width:auto !important;margin:2px 2% 10px !important;}
.item5{width:18% !important;}
.item6{width:14.66666% !important;}

.menu .mega_menu .portfolio li a{
	display:block;
	height:auto;
	font:400 italic 15px/22px 'Segoe UI', sans-serif;
	color:#b6b6b6;
	text-align:center;
	}
.menu .mega_menu .portfolio li a img{
	width:auto;
	max-width:100%;
	height:88px;
	margin:0;
	display:inline-block;
	opacity:1;
	border:none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	-webkit-transition:opacity 140ms ease-in 10ms;
	-moz-transition:opacity 140ms ease-in 10ms;
	-ms-transition:opacity 140ms ease-in 10ms;
	-o-transition:opacity 140ms ease-in 10ms;
	transition:opacity 140ms ease-in 10ms;
	}	
.menu .mega_menu .portfolio li p{margin:0;padding:5px 0 10px;text-align:center;}
.menu .mega_menu .portfolio li:hover a{
	color:#fff;
	}	
/* ========== LISTS IN MEGA MENU ========== */
.menu .mega_menu .list{
	display:inline-block;
	/*vertical-align:top;*/
	width:46%;
	margin:0 2%;
	padding:0;
	*float:left;
	}	
.menu .mega_menu .list li{
	width:100%;
	float:left;
	}	
.menu .mega_menu .list li.headline{
	border-bottom:solid 1px #353535;
	}
.menu .mega_menu .list li.headline h3, .menu .mega_menu .list li.headline h3 a{
	margin-left:7px;
	font:20px 'Segoe UI', sans-serif;
	color:#5B5B5B;
	text-transform:uppercase;
	}
.menu .mega_menu .list li.headline h3 a{
	margin-left:0;
	}
.menu .mega_menu .list li a{
	margin-left:7px;
	padding:0;
	font:13px/24px 'Segoe UI', sans-serif;
	color:#616161;
	text-transform:none;
	text-decoration:none;
	border:none;
	}
.menu .mega_menu .list li:hover a{
	background:none;
	}
.menu .mega_menu .list li a:hover, .menu .mega_menu .list li.headline h3 a:hover{
	color:#ffff00;
	}
.menu .mega_menu .list li a:active, .menu .mega_menu .list li.headline h3 a:active{
	color:#888;
	}
/* ========== BLOG IN MEGA MENU ========== */
.menu .mega_menu .blog_post{
	margin-bottom:10px;
	padding:5px;
	overflow:hidden;
	background:#029013;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	} 	
.menu .mega_menu .blog_post h2{
	margin-bottom:3px;
	padding-bottom:3px;
	color:#555;
	border-bottom:solid 1px #2E2E2E;
	}	
.menu .mega_menu .blog_post p{
	font-size:11px;
	color:#888;
	}
.menu .mega_menu .blog_post .read_more{
	margin-top:-5px;
	height:auto;
	float:right;
	font:11px 'Segoe UI', sans-serif;
	color:#555;
	text-decoration:none;
	}	
.menu .mega_menu .blog_post .read_more:hover{
	color:#ffff00;
	}
	
/* Animated CSS3 Mega Menu - Responsive */
	.menu input#dropdown, .menu label{
		display:none;
		position:absolute;
		top:10px;
		right:125px;
		width:46px;
		height:40px;
		}
	.menu input#dropdown{
		opacity:0;
		}
	.menu label{
		background: url('/images/icon_list.png') no-repeat center;
		}
	.menu label:hover{
		cursor:pointer;
		}
	.menu input#dropdown:checked ~ label{
		background: url('/images/icon_listac.png') no-repeat center;
		}
	.menu input#dropdown:checked ~ ul{
		display:block;
		}	
	.menu div.dropdown{
		display:none;
		position:absolute;
		top:3px;
		left:66px;
		margin:0;
		font: 400 16px 'Segoe UI', sans-serif;
		text-transform:uppercase;
		color:#fff;
		}
	.menu div.dropdown span{
		text-transform:none;
		font:400 26px "OswaldVNF";
		color:#fff;
		}
	.menu div.dropdown span a{
		color:#fff;
		}
	.menu div.flag{
		float:right;
		display:none;
		margin:9px 5px 0 0;
		}
	.menu div.flag img{
		margin:0 5px 0 0;
		}
@media only screen and (max-width: 1024px){
	.menu{
		width:100%;
		}
	.menu ul > li > a{}
	.menu ul ul{
		margin:0;
		}
	.menu .mega_menu{

		}
	}
@media only screen and (max-width: 900px){
	.menu input, .menu label, .menu div.dropdown{display:block;}
	.menu div.flag{display:block;}
	.menu{
		width:100%;
		min-height:40px;
		height:100%;
		/*overflow:hidden;*/
		position:relative;
		}
	.menu ul{
		display:none;
		position: absolute;
		width:100%;
		top:60px;
		margin:0;
		padding:0;
		float:none;
		background:#fff;
	    border-top: #fff 5px solid;
		z-index:997;
		}
	.menu ul > li{
		float:none;
		}
	.menu > ul > li:first-child a{
		background: none;
		width:100%;
		height:auto;
		padding:6px 2%;
		font:400 14px/28px 'Segoe UI', sans-serif;
		color:#222;
		text-transform:uppercase;
		border-right:solid 0px #f1f1f1;
		border-bottom:solid 1px #f1f1f1;
		}
	.menu > ul > li:first-child a span{display:block}
	.menu ul li a{
		width:100%;
		height:auto !important;
		padding:6px 2% !important;
		font:400 14px/28px Roboto !important;
		color:#222;
		text-transform:uppercase;
		border-right:solid 0px #f1f1f1;
		border-bottom:solid 1px #f1f1f1;
		}
	.menu ul > li i{display:block;position:absolute;right:0;top:0;color:#fff;width:40px;height:40px;cursor:pointer;text-align:center;}
	.menu ul > li i:before{width:40px;height:40px;line-height:40px;}
	.menu .mega_menu .portfolio li p {padding-bottom:0}
	.menu .mega_menu p,.menu .mega_menu .portfolio li p a {color: #fff;border-bottom:none}
	.menu .mega_menu .portfolio li a {display:none;border-bottom:none}
	.menu .mega_menu .portfolio li p a {display:block;border-bottom:solid 1px #181818}
	.menu ul > li > a div {display:inline-block;padding:0 0 0 5px;font:400 14px/14px 'Segoe UI', sans-serif;text-transform:uppercase;color:#fff;}
	.menu ul li:hover > a, .menu ul li.active:hover > a{
		padding:6px 2% !important;
		color:#222;
		background:none;
		}
	.menu ul li:first-child:hover > a{
		color:#222;
		background:none;
		}
	.menu ul ul, .menu .mega_menu{
		position:static;
	    visibility:visible;
		display:block;
		opacity:1;
		margin:0;
		font-size:0;
		overflow:hidden;
		border:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
		background:#373737;
		}
	.menu ul ul li{
		width:100%;
		float:left;
		}
	.menu ul ul li a{
		width:100%;
		padding: 6px 2% !important;
		text-align:left;
		background:#fff;
		color:#222;
		border:none;
		font: 400 14px/28px Roboto !important;
		text-transform:none;
		border-bottom:solid 1px #f1f1f1;
		}
	.menu ul ul li:last-child a {
		border-bottom: dotted 1px #f1f1f1;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		border-radius:0;
	}
	.menu ul ul li:hover a{
		background:#fff;
		color:#222;
		}
	.menu ul ul li:first-child:hover a{
		background:#fff;
		color:#222;
		}
	.menu ul ul ul, .menu ul ul li a i{
		display:none;
		}
	.menu .mega_menu .one, .menu .mega_menu .one_half, .menu .mega_menu .one_thirds, .menu .mega_menu .two_thirds, .menu .mega_menu .one_fourth,.menu .mega_menu .three_fourths{
		display:inline-block;
		vertical-align:top;
		padding:0 0 12px;
		float:none;
		}	
	.menu .mega_menu{
		width:auto !important;}	
	.menu .mega_menu .portfolio li, .menu .mega_menu .list{
		margin:0;
		width:48%;
		margin:0 1% 2%;
		}
	}
@media only screen and (max-width: 750px) {
	.menu{width:100%}
	}