#header{
	position: relative;
	background-color: @header-bg;
	z-index: 9999;

	.panel-header{
		background-color: transparent;
		position: relative;
		z-index: 1000;
		.transition();
	}

	/* Header Transaprent */
	&.header-transparent{
		background-color: fade(@header-bg, @header-alpha);
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;

		.header-wrapper nav.main-nav{
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}
	}

	.header-wrapper{
		height: @header-height;
		position: relative;


		// site branding <<<
		.site-branding{
			position: absolute;
			left: 0px;
			top: 50%;
			line-height: 1em;
			margin-top: 4px;
			.translateY();

			a{
				font-family: @logo-font;
				font-size: 34px;
				font-weight: bold;
				display: inline-block;
				text-decoration: none;
				color: @logo-color;
				text-transform: uppercase;
				line-height: 1em;
			}

			p{
				color: fade(@logo-color, 60%);
				font-family: @font-text;
				font-size: 12px;
				font-weight: normal;
				letter-spacing: 1px;
				text-transform: uppercase;
				margin: 0px;
				line-height: 1em;
				margin-top: 3px;
			}

			img{
				width: @logo-width;
				@media screen and (max-width: 768px) {
					max-width: 380px;
				}
				@media screen and (max-width: 480px) {
					max-width: 220px;
				}
				@media screen and (max-width: 320px) {
					max-width: 180px;
				}
				height: auto;
			}
		}
		// site branding >>>


		.right-content{
			position: absolute;
			right: 0px;
			bottom: 0px;
			line-height: 65px;
			height: 65px;

			.user-profile{
				line-height: 0px;

				.entry-notify{
					display: inline-block;
					position: relative;
					line-height: 65px;
					float: left;
					margin-right: 20px;

					img{
						width: 21px;
						opacity: 0.3;
					}
					span{
						position: absolute;
					    display: inline-block;
					    width: 14px;
					    height: 14px;
					    line-height: 12px;
					    text-align: center;
					    font-size: 9px;
					    font-family: @font-second;
					    background-color: @logo-color;
					    border-radius: 50%;
					    color: @header-bg;
					    top: 23px;
					    right: -8px;
					    text-indent: 1px;
					}
				}

				.entry-name{
					position: relative;
					line-height: 65px;
					float: left;

					& > a{
						font-size: 10px;
						font-family: @font-title;
						font-weight: normal;
						letter-spacing: 1px;
						text-transform: uppercase;
						color: fade(@logo-color, 80%);
						margin-right: 20px;
						text-decoration: none;

						&::after{
							content: '\f107';
							font-family: Fontawesome;
							font-size: 16px;
							position: relative;
							top: 2px;
							margin-left: 7px;
						}
					}

					.entry-dropdown{
						position: absolute;
						top: 100%;
						right: 0px;
						visibility: hidden;
						opacity: 0;
						background-color: @header-bg;
						padding: 8px 0px;
						margin-top: 11px;
						color: @logo-color;
						transform: translateY(-5px);
						.transition();

						&.open {
							visibility: visible;
							opacity: 1;
							transform: translateY(0px);
						}
						
						a {
							display: block;
							color: fade(@logo-color, 80%);
							margin:0;
							padding-left: 25px;
							line-height: 32px;
							width: 160px;
							font-family: @font-title;
							font-weight: normal;
							font-size: 12px;

							&:hover {
								color: fade(@logo-color, 80%);
							}
						}

						.border-top {
							border-top: 1px solid fade(@logo-color, 15%);
							margin-top: 10px;
							padding-top: 5px;
						}
					}
				}

				.user-avatar{
					display: inline-block;

					img{
						height: 65px;
						width: auto;
					}
				}

				.follow-links{
					white-space: nowrap;
					line-height: 65px;

					font-size: 10px;
					font-family: @font-title;
					font-weight: normal;
					letter-spacing: 1px;
					text-transform: uppercase;
					color: fade(@logo-color, 60%);

					a{
						font-size: 13px;
						color: fade(@logo-color, 60%);
						display: inline-block;
						margin-left: 10px;
					}
				}
			}
		}

	}


	.panel-menu{

	}

	nav.main-nav{
		position: relative;
		font-family: @menu-font;
		font-size: @menu-font-size;
		font-weight: 500;
		padding-top: 20px;
		padding-bottom: 10px;
		z-index: 999;
		-webkit-box-shadow: 0 2px 0px 0 rgba(0,0,0,.03);
		-moz-box-shadow: 0 2px 0px 0 rgba(0,0,0,.03);
		box-shadow: 0 2px 0px 0 rgba(0,0,0,.03);
		background:@menu-bg;

		& > ul{
			list-style-type: none;
			margin: 0px;
			padding: 0px;
			display: block;
			margin-right: 60px;
			.transition();

			& > li{
				display: inline-block;
				margin: 0px;
				padding: 0px;
				position: relative;
				

				& > a{
					color: @menu-color;
					text-decoration: none;
					text-transform: uppercase;
					letter-spacing: 0px;
					display: inline-block;
					padding-left: 10px;
					padding-right: 10px;
					padding-top: @menu-space;
					padding-bottom: @menu-space;
					.transition();
				}
				&:first-child:not(.menu-item-has-children) > a{
					padding-left: 0;
				}

				&.current_page_item > a,
				&.current-menu-item > a {
					font-weight: 700;
				}

				&::after{
					content: '';
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					background-color: @menu-bg-sub;
					z-index: -1;
					height: calc(100% + 60px);
					display: none;
				}

				ul{
					display: none;
					list-style-type: none;
					padding: 0px;
					margin: 0px;
					padding-top: 20px;
					padding-bottom: 20px;
					position: absolute;
					top: 100%;
					left: 0px;
					background-color: @menu-bg-sub;
					width: 186px;
					margin-top: 10px;

					li{
						padding: 10px 40px;
						line-height: 1em;
						position: relative;
						text-align: left;
						
						a{
							color: @menu-color-sub;
							text-decoration: none;
							display: block;
							line-height: 1em;
							position: relative;
							padding-top: 5px;
							padding-bottom: 5px;
							line-height: 1.2em;
						}

						&:hover{
							background-color: fade(@menu-color-sub, 15%);
						}

						// has children
						&.menu-item-has-children{

							& > a{
								&::after{
									content: '\f105';
									font-family: Fontawesome;
									font-size: 15px;
									float: right;
								}
							}

							&:hover{

								& > ul{
									display: block;
									top: -30px;
									left: 180px;
								}
							}
						}
					}
				}

				&.menu-item-has-children:hover{

					& > a{
						color: @menu-color-sub;
					}
					&::after{
						display: block;
					}

					& > ul{
						display: block;
					}
				}


				/* Mega menu */
				&.menu-item-mega{

					& > ul{

						& > li{
							overflow: hidden;
							padding-left: 0px;
							padding-right: 50px;
							padding-top: 20px;
							padding-bottom: 25px;

							&:hover{
								background-color: transparent;
							}
						}
					}

					.mega-menu-lists{
						float: left;
						width: 186px;

						a{
							display: block;
							padding-left: 50px;
							padding-right: 20px;
							padding-top: 15px;
							padding-bottom: 15px;

							&.mm-entry{
								background-color: fade(@menu-color-sub, 15%);
							}

							&:hover{
								background-color: fade(@menu-color-sub, 15%);
							}
						}

					}

					.mega-menu-panel{
						margin-left: 230px;
						padding-top: 15px;
						color: @menu-color-sub;

						a{
							&::after{
								display: none;
							}
						}

						.mega-menu-column{
							padding-left: 30px;
							padding-right: 30px;
							&+.mega-menu-column {
								&::before{
									content: '';
									position: absolute;
									top: 0px;
									width: 2px;
									height: 100%;
									background-color: fade(@menu-color-sub, 10%);
									left: 0;
								}
							}
						}

						.mega-title{
							margin: 0px;
							padding: 0px;
							font-size: 14px;
							font-weight: 500;
							font-family: @font-text;
							color: @menu-color-sub;
							position: relative;
							padding-bottom: 20px;
							margin-bottom: 20px;

							&::after{
								content: '';
								height: 2px;
								width: 100%;
								position: absolute;
								bottom: 0px;
								left: 0px;
								background-color: fade(@menu-color-sub, 10%);
							}
						}

						.post{

							.meta{
								span{
									color: @menu-color-sub;
								}
							}

							p{
								font-family: @font-second;
								font-size: 14px;
								line-height: 1.3em;
								color: fade(@menu-color-sub, 70%);
							}

							/* Medium */
							&.ps-medium{
								margin-bottom: 30px;

								h4{

									a{
										font-size: 16px;
										line-height: 20px;
										padding: 0px;
									}
								}

							}

							/* Large */
							&.ps-large{
								margin-bottom: 25px;

								a.video-player{
									position: absolute;

									&::after{
										content: '';
									    position: absolute;
									    top: 50%;
								    	margin-top: -6px;
									    border-left: solid 9px #fff;
									    border-top: solid 6px transparent;
									    border-bottom: solid 6px transparent;
									    margin-left: -3px;
									    color: #fff;
									    display: inline-block !important;
									}
								}

								h4{
									a{
										font-size: 18px;
										line-height: 20px;
									}
								}

							}


							/* Small */
							&.ps-small{

								p{
									margin-bottom: 15px;

									a{
										font-size: 14px;
										line-height: 18px;
										color: fade(@menu-color-sub, 70%);
									}
								}

							}
						}

					}


					/* Mega Menu Medium*/
					&.mm-medium{
						
						.mega-menu-lists{
							float: none;
							width: auto;
							display: block;
							padding-left: 65px;

							a{
								display: inline-block;
								padding: 0px;
								margin-right: 30px;
								padding-top: 5px;
								padding-bottom: 5px;

								&::after{
									content: '\f107';
									margin-left: 10px;
									font-family: Fontawesome;
									visibility: hidden;
								}

								&.mm-entry{
									background-color: transparent;
									&::after{
										visibility: visible;
									}
								}

								&:hover{
									background: transparent;
								}
							}
						}

						.mega-menu-panel{
							margin-left: 50px;
							margin-top: 25px;

							.post{
								&.ps-large{
									margin-bottom: 0px;
								}
							}

						}

					}
				}


			}
		}
	}

	.right-content, .left-content{
		position: absolute;
		right: 0px;
		top: 50%;
		.translateY();
		margin-top: 4px;

		a{
			display: inline-block;
			text-decoration: none;

			& + a{
				margin-left: 12px;
			}

			img{
				width: 14px;
			}
		}

	}

	.left-content {
		position: relative;
		right: auto;
		left: 0;
	}


	/* News Search and burger menu */
	.news-search-menu{
		height: 28px;
		line-height: 28px;

		a{
			display: inline-block;
			position: relative;
			width: 15px;
			height: 28px;

			svg{
				position: absolute;
				width: 100%;
				top: 50%;
				left: 0px;
				.translateY();
				.transition();

				path, polygon{
					fill: @menu-color;
				}
			}

			&.search-handler{
				width: 15px;
				svg{
					&.icon-close{
						visibility: hidden;
						opacity: 0;
						-webkit-transform: translateY(50%);
					       -moz-transform: translateY(50%);
					    		transform: translateY(50%);
					}
				}
			}

			&.burger-menu{
				width: 16px;
			}
		}
	}


	.search-panel{
		position: relative;
		margin-right: 80px;
		visibility: hidden;
		opacity: 0;
		height: 0px;
		-webkit-transform: translateY(5px);
		   -moz-transform: translateY(5px);
				transform: translateY(5px);
		.transition();

		form{

			input{
				border: none;
				box-shadow: none;
				width: 100%;
				font-family: @font-second;
				font-size: 18px;
				color: fade(@color-title, 80%);
				height: 48px;
				line-height: 48px;
			}

			button{
				display: none;
			}
		}

	}


	&.show-search:not(.header-mini){

		nav.main-nav > ul{
			height: 0px;
			visibility: hidden;
			overflow: 0;
			-webkit-transform: translateY(-10px);
			   -moz-transform: translateY(-10px);
					transform: translateY(-10px);
		}
	}

	/* Show Search field */
	&.show-search{
		.search-panel{
			display: block;
			position: relative;
			visibility: visible;
			opacity: 1;
			height: auto;
			-webkit-transform: translateY(0px);
			   -moz-transform: translateY(0px);
					transform: translateY(0px);
		}

		.news-search-menu{
			.search-handler{
				svg{
					&.icon-search{
						visibility: hidden;
						opacity: 0;
						-webkit-transform: translateY(-100%);
					       -moz-transform: translateY(-100%);
					    		transform: translateY(-100%);
					}

					&.icon-close{
						visibility: visible;
						opacity: 1;
						-webkit-transform: translateY(-50%);
					       -moz-transform: translateY(-50%);
					    		transform: translateY(-50%);
					}
				}
			}
		}

	}

	.panel-ticker{
		position: relative;

		.tt-el-ticker{
			margin-top: 30px;
			margin-bottom: 30px;
			position: relative;

			strong{
				font-size: 16px;
				font-family: @font-title;
				font-weight: bold;
				color: @color-title;
				text-transform: uppercase;
				letter-spacing: 0px;
				margin-right: 5px;
			}

			.entry-arrows{
				margin-right: 5px;
				
				a{
					display: inline-block;
					margin-left: 3px;
					margin-right: 3px;

					img{
						width: 6px;
						position: relative;
						top: -1px;
					}
				}
			}

			.entry-ticker{
				font-size: 16px;
				font-family: @font-second;
				font-weight: normal;
				letter-spacing: 0.1px;
				color: fade(@color-title, 75%);

				a{
					color: fade(@color-title, 75%);
				}

				span{
					visibility: hidden;
					opacity: 0;
				}
			}

			.typed-cursor{
				font-size: 18px;
				margin-left: 3px;
			}
		}
	}


	// Header mini style
	&.header-mini,&.header-food {

		.header-wrapper{
			@media screen and (max-width: 799px){
				padding-left: 10px;
				padding-right: 15px;
			}
			.transition();

			.site-branding {
				position: relative;
				left: auto;
				float: left;
				margin-top: 0px;
				bottom: auto;
				top: 50%;
				.translateY();
			}
		}

		.post-title {
			font-size: 16px;
			line-height: 40px;
			font-family: @font-title;
			color: @color-title;
			text-transform: uppercase;
			margin-left: 40px;
		}
		.left-content {
			z-index: 1220;
		}
		.right-content {
			margin: 0;
			text-align: right;
			z-index: 1010;

			#search_handler{
				svg{
					width: 14px;
				    position: relative;
				    top: 3px;
				}
			}
			#burger_menu{
				width: 15px;
			    position: relative;
			    top: 2px;
			}
			#search_handler,
			#burger_menu{
				svg path{
					fill: @menu-color;
				}
			}
		}

		nav.main-nav {
			border: none;
			padding-top: 0px;
			padding-bottom: 0px;
			height: @header-height;

			@media screen and (max-width: 767px){
				display: none;
			}

			& > ul > li > a{
				padding-top: 0px;
				padding-bottom: 0px;
				line-height: @header-height;
			}

			& > ul > li ul{
				margin-top: 0px;
			}
			& > ul > li ul li.menu-item-has-children:hover > ul{
				top: -20px;
			}
		}

		.tools {
			display: inline-block;
			position: relative;
		}

		.search-panel {
			background: #fff;
			width: 320px;
			position: absolute;
			right: 0;
			top: 75px;
			margin-right: 15px;
			.transition();

			input {
				padding: 0 20px;
				@media screen and (max-width: 799px){
					padding: 0;
				}
			}
			img {
				display: none;
			}
		}
		#search_handler::after {
			margin-top: -30px;
		}
	}



	.scroll-window-indicator {
		position: absolute;
		bottom: 0; 
		width: 100%;
		height: 2px;
		z-index: 1110;
		
		.width {
			background-color: rgba(0,0,0,.7);
			height: 2px;
			width: 0;
		}
	}

}
.header4 {
    width: 50px;
    left: 50px;
    background: transparent;
    a {
        background: none;
        &+a {
            margin-top: 50px;
        }
        &:hover {
            background: none;
        }
    }

}
.admin-bar #header.sticky.unpinned .panel-header{ top:32px }


//creative
.header-creative {
	// background-image: linear-gradient(135deg, @color-ancient2, @color-ancient1) !important;
	.site-branding {
		left: 0px !important;
	}
	.tools {
		left: auto !important;
		right: 0px;
		#burger_menu {
			color: #000;
			svg {
				width: 27px !important;
				top: 55% !important;
				path {
					fill: rgba(0, 0, 0, 0.66) !important;
				}
			}
			&:after {
				content: '';
				position: absolute;
				background-color: #fff;
				height: 49px;
				border-radius: 50%;
				width: 49px;
				z-index: -1;
				left: -14px;
				box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.09);
				top: 6px;
			}
		}
	}
	.user-profile {
		padding-right: 100px;
	}
}
.header-relative-top {
	position: relative;
	width: 100%;
}





// VERTICAL MENU
.vertical-menu {
	background-color: @header-bg;
	top: 0;
    left: 0;
    box-shadow: 0 2px 20px 3px rgba(0,0,0,0.08);
    height: 100%;
    padding-bottom: 60px;
	padding-top: 60px;
    width: 50px;
    z-index: 9998;
    .transition-easeOutQuint();

    .vertical-menu-close {
    	display: none;
    }

    #hamburger-closed {
    	font-size: 20px;
    	text-decoration: none;
    }
    #primary-nav2 {
    	display: none;
    }
    .vertical-menu-wrapper-top {
		.transition-easeOutQuint();
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
    }
    .uk-logo {
		display: none;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
		      -moz-animation: fadein 2s; /* Firefox < 16 */
		       -ms-animation: fadein 2s; /* Internet Explorer */
		        -o-animation: fadein 2s; /* Opera < 12.1 */
		           animation: fadein 2s;
		.transition-easeOutQuint();
    }
    	
    	
    .vertical-menu-wrapper-middle {
	    .transition-easeOutQuint();
	    -ms-flex-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
    }
    .rotate {
		position: fixed;
	    top: 50%;
	    transform: translateY(-50%);
	    width: auto;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		margin-bottom: 0px;
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		.transition-easeOutQuint();
	}
    .vertical-menu-wrapper-bottom {

    }
    .menu-social {
    	.widget_social {
    		.social-links {
    			a {
    				margin-left:15px !important;
    			}
    		}
    	}
    }
}
// Vertical menu open
.vertical-menu-open {
	width: 260px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 50px;
	padding-top: 50px;
	z-index: 9999;
	.transition-easeOutQuint();
	.vertical-menu-wrapper-top {
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}
	.vertical-menu-bar {
    	display: none;
    }
    .vertical-menu-close {
    	display: initial;
    	-webkit-animation: fadein 2.5s; /* Safari, Chrome and Opera > 12.1 */
    	      -moz-animation: fadein 2.5s; /* Firefox < 16 */
    	       -ms-animation: fadein 2.5s; /* Internet Explorer */
    	        -o-animation: fadein 2.5s; /* Opera < 12.1 */
    	           animation: fadein 2.5s;
    }
	#primary-nav2 {
		display: block;
		width: 200px;
		animation-duration: 0.6s !important;
		& > li {
			padding-left: 0px !important;
			padding-top: 15px;
			justify-content: center;
			ul {
				width: 200px;
				li {
					border-top: none;
					ul {
						top: 49px;
						left: -144px;
					}
				}
			}
		}
	}
	.close-button {
	    width: 20px;
	    position: absolute;
	    left: auto;
	    right: 0;
	    .transition-easeOutQuint();    	
	}
	.uk-logo{
		display: block;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
		       -moz-animation: fadein 2s; /* Firefox < 16 */
		        -ms-animation: fadein 2s; /* Internet Explorer */
		         -o-animation: fadein 2s; /* Opera < 12.1 */
		            animation: fadein 2s;
		a {
			display: flex;
			text-decoration: none;
			color: @color-brand;
			text-transform: uppercase;
			// .typo('font-logo');
			img {
				height: auto;
				max-height: 550px;
			}
			h1 {
				margin-bottom: 0px;
			}
		}
		.site-description {
			display: none;
		}	
	}
	.vertical-menu-wrapper-middle {
		width: auto;
	    margin-left: 0px;
	    -ms-flex-pack: start;
	    -webkit-justify-content: flex-start;
	    justify-content: flex-start;
		.rotate {
			display: none;
		}
		.primary-nav-vertical {
			-webkit-animation-duration: .8s;
			animation-duration: .8s;
		}
	}
	.vertical-menu-wrapper-bottom {
	}
}

.pushbody {
	// margin-left: 0px;
	.transition-easeOutQuint();
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



.uk-button-menu-style2 {
	padding-right: 34px;
	padding-left: 34px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid #95989A;
	text-transform: capitalize;
	// .typo('font-menu');
	border-radius: 3px;
	// color: @color-menu;
	text-decoration: none;
		&:hover {
			color: @color-ancient1;
			text-decoration: none;
		}
}