/*
====================================================

* 	[Master Stylesheet]
	
	Template Name 	:  Buildwall
	Version    		:  1.0
	Author     		:  W3Engineers Ltd.
	Author URI 		:  https://themeforest.net/user/w3engineers 

====================================================
	
	TOC
	
	6. MENU STYLING
		LOGO 
		MENU RIGHT AREA 
		MAIN MENU 
		DROPDOWN 
		DROPDOWN MULTI LEVEL 
		DROPDOWN HOVER EFFECT 
		NAV ICON 
		RESPONSIVE 

===================================================


/* ---------------------------------
6. MENU STYLING
--------------------------------- */

header{ position: absolute; top: 10px; left: 0; right: 0; z-index: 1000; text-align: center; font-weight: 500; font-size: 1.05em; color: #fff; }

header.fixed{ position: fixed; top: 0; left: 0; right: 0;
	box-shadow: 0 10px 20px rgba(0,0,0,.05); background: #121212; 
	-webkit-animation: slide-top-anim .3s forwards ease-out; animation: slide-top-anim .3s forwards ease-out; }

@-webkit-keyframes slide-top-anim {
    0% { opacity: 0;  }
    100% { opacity: 1; }
}

@keyframes slide-top-anim {
    0% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: translateY(0%); }
}


/* LOGO */

header .menu-left-area{ float: left; padding-right: 40px; }

header .logo img{ height: 50px; margin: 20px 0; width: auto; }


/* MENU RIGHT AREA */

header .menu-right-area{ float: right; height: 90px; line-height: 36px; margin-left: 15px; }

header .menu-right-area li > a{ margin: 25px 0; padding: 0px 20px; position: relative; border-radius: 50px; border: 2px solid #fff; }

header .menu-right-area li > a:hover{ background: #fff; color: #111; }


/* MAIN MENU */

header .main-menu{ float: right; }

header .main-menu > li{ height: 90px; }

header .main-menu li.active{ font-weight: 700; }

header .main-menu li{ position: relative; float: left; }

header .main-menu > li > a { margin: 0 10px; padding: 0 5px; height: 90px; line-height: 90px; position: relative; 
	-webkit-transition: all .3s; transition: all .3s; }
	
header .main-menu > li > a:after { content: ''; position: absolute; bottom: 15px; left: 0; width: 100%; height: 1px; 
	background: #fff;
    -webkit-transform-origin: left; transform-origin: left; 
	-webkit-transition: all .2s; transition: all .2s;
	-webkit-transform: scale(0); transform: scale(0); }
	
header .main-menu li > a > i { font-size: 1.2em; margin-left: 7px; line-height: 1; }

header .visible.main-menu { display: block; }


/* DROPDOWN */

header .main-menu li > ul { display: none; top: 75px; position: absolute; width: 180px; text-align: left;
    box-shadow: 2px 4px 20px rgba(0, 0, 0, .2); background: #fff; color: #111; }
	
header .main-menu ul.drop-down li { display: block; margin: 0; width: 100%;  line-height: 1; }

header .main-menu ul.drop-down li > a { display: block; padding: 17.5px 20px; position: relative; width: 100%; 
	border-top: 1px solid #ddd; }
	
header .main-menu ul.drop-down li:first-child > a { border-top: 0; }
	

/* DROPDOWN MULTI LEVEL */

header .main-menu .drop-down-lower { left: 180px; top: 0; }

header .main-menu ul.drop-down li > ul.drop-down-lower li.d-hover-effect > a { padding-left: 25px; }


/* DROPDOWN HOVER EFFECT */

header .main-menu li.d-hover-effect > ul { display: block; 
	-webkit-animation: full-opacity-anim .3s forwards; animation: full-opacity-anim .3s forwards; }

header .main-menu ul.drop-down li.d-hover-effect > a { padding-left: 25px; }


@-webkit-keyframes full-opacity-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes full-opacity-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* NAV ICON */

.menu-nav-icon{ display: none; height: 40px; line-height: 40px; width: 50px; text-align: center; cursor: pointer; 
	position: absolute; left: 50%; margin: 10px 0; margin-left: -25px; font-size: 2em; }

.menu-nav-icon [class^="icon-"]:before, [class*=" icon-"]:before{ line-height: 40px; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	header{ font-size: .95em; text-align: center; }
	
	header .menu-left-area{ padding-right: 15px; }

	header .logo img{ height: 40px; margin: 25px 0; }
	
	header .menu-right-area li > a{ padding: 0 15px; }
	
	header .main-menu{ float: none; }
	
	header .main-menu > li > a { padding: 0px 5px; margin: 0 5px; }
	
}

@media only screen and (max-width: 767px) {
	
	header .menu-left-area{ float: none; padding: 0 0 0 20px; display: inline-block; }
	
	header .logo img{ height: 40px; margin: 10px 0; }

	header .menu-right-area{ height: 60px; }

	header .menu-right-area li > a{ margin: 10px 0; }

    header .main-menu{ display: none; float: none; clear: both; max-height: 400px; overflow: auto; margin-left: -15px; text-align: left;
		margin-right: -15px; box-shadow: 0px 2px 10px rgba(0,0,0,.3); border-top: 1px solid #ccc; background: #fff; color: #111; }
		
	header .main-menu li { float: none; }
	
    header .main-menu > li { display: block; height: auto; border-bottom: 1px solid #ddd; }
	
    header .main-menu > li:last-child { border-bottom: 0; }
	
	header .menu-wrapper{ height: 60px; }
	
	header .main-menu li > a{ height: 60px; line-height: 60px; }
	
    header .main-menu li > a,
    header .main-menu ul.drop-down li > a { display: block; line-height: 1; height: auto; padding: 15px;  background: none; }
	
	header .main-menu > li > a:hover{ color: #desc; }
	
    header .main-menu li ul { top: 60px; overflow: hidden;  position: static; width: auto; box-shadow: none; background: none; }
	
    header .main-menu li:hover ul > li { margin-left: 10px; }
	
    header .main-menu ul.drop-down li:first-child > a { border-top: 1px solid #aaa; }
	
    header .main-menu li > a:after{ display: none; }
	
    header .main-menu ul.drop-down li > a:after { display: none; }

	header .menu-nav-icon { left: 0; margin: 0; top: 10px; display: inline-block; }

}

@media only screen and (max-width: 479px) {
	
	header .logo img{ height: 30px; margin: 15px 0; }
	
	header .menu-right-area{ line-height: 33px; margin-left: 0px; }

	header .menu-right-area li > a{ margin: 12.5px 0; padding: 0px 10px; border: 1px solid #fff; }
	
}