#topbar{
	background-color: @topbar-bg;
	height: @topbar-height;
	border-bottom: 1px solid #cccccc;

	.topbar-container-left{
		font-family: @topbar-font;
		font-size: @topbar-font-size;
		font-weight: 500;
		color: @topbar-color;
		height: @topbar-height;
		line-height: @topbar-height;

		a{
			color: @topbar-color;
			text-transform: uppercase;

			&:hover{
				color: @brand-color;
			}
		}
		nav.topbar-nav{
			@media screen and (max-width: 799px){
				display: none;
			}
			ul{
				list-style-type:none;
				padding: 0;
				margin: 0;
				li{
					float: left;
					margin-right:20px;
				}
			}
		}
	}
	.topbar-container-right{
		@media screen and (max-width: 799px){
			clear: left;
			padding-right: 15px;
		}
		.user-profile{
			.follow-links{
				span{
					display: none;
				}
			}
		}
		a{
			line-height: @topbar-height;
			margin-left: 20px;
			&:hover{
				color: @brand-color;
			}

		}
	}
}
.fslider{
	position: relative;
	width: 84%;
	margin:0 auto;
	padding-bottom: 30px;
	@media screen and (max-width: 799px){
			width: 100% !important;
		}
	.swiper-slide{
		width:100%;

		@media screen and (max-width: 991px){
			width: 100%;
		}

		@media screen and (max-width: 799px){
			width: 100%;
			height:200px;
		}

		.fd-item{
			img{
				width: 100%;
				max-width: 100%;
				max-height: 670px;
				@media screen and (max-width: 799px){
					height:200px;
				}
			}
			.title-box{
			    position: absolute;
			    text-align: center;
		        top: 50%;
			    right: 0;
			    left: 0;
		        width: 540px;
    			margin: 0 auto;
    			padding: 60px 70px 83px 60px;
    			-webkit-transform: translateY(-50%);
		           -moz-transform: translateY(-50%);
			            transform: translateY(-50%);
			    background: rgba(240, 248, 255, 0.8);

			    @media screen and (max-width: 799px){
					width:60%;
					padding: 5px;
				}
			    span{
			    	padding: 5px 10px;
			    	color: #fff;
			    	font-size: 11px;
			    	background:#000;
			    	text-transform: uppercase;
			    }
			    i{
		    	    font-style: normal;
    				border-bottom: 2px solid;
			    }
			    h2{
			    	font-size: 36px;
			    	letter-spacing: 2px;
			    	line-height: 42px;
			    	color: @color-title;
			    	font-weight: 800;
			    	@media screen and (max-width: 799px){
						font-size: 15px;
					}
			    }
			    .read-more{
			    	font-family: @font-title;
				    font-size: 13px;
				    font-weight: normal;
				    text-decoration: none;
				    border: 2px solid @color-title;
				    color: @color-title;
				    padding: 10px 18px 11px 20px;
				    cursor: pointer;
				    border-radius: 40px;
				    overflow: hidden;
				    position: relative;
				    text-transform: lowercase;
				    top: 22px;
				    z-index: 10;
				    .transition();
					@media screen and (max-width: 799px){
						font-size: 11px;
						padding: 2px 7px;
						top: 0;
					}
					&:hover{
						border: 2px solid @brand-color;
						color: #fff;
						background-color:@brand-color;
					}
					&:after{
						content: "\f178";
					    font-family: FontAwesome;
					    padding-left: 10px;
					};
			    }

			}
			
		}

		&.swiper-slide-active{
			.fd-item{
				h3{
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}

	.fd-arrows{
		position: absolute;
		top: 51%;
		left: 50%;
		width: 100%;
		z-index: 10;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
				transform: translateX(-50%);

		a{
			position: absolute;
			top: -50px;
			font-size: 50px;
			color:#fff;

			&.fd-arrow-prev{
				left: 50px;
				@media screen and (max-width: 799px){
					left: 20px;
				}
			}
			&.fd-arrow-next{
				right: 50px;
				@media screen and (max-width: 799px){
					right: 20px;
				}
			}
		}
	}

	&.text-light{
		.swiper-slide .fd-item h3 a,
		.fd-arrows a{
			color: #fff;
		}
	}
}
.single{
	.header-wrapper{
		border-bottom: 1px solid #cccccc;
	}
}


#header{

	&.header-food {
		background-color: fade(@header-bg, @header-alpha);
		.site-branding{
			.logo-text-link{
				font-size: 50px;
				color: #000;
				font-weight: 900;
				line-height: 1em;
				text-transform: capitalize;
				@media screen and (max-width: 799px){
					width: 100% !important;
				}
			}
			p{color:@menu-color}
		}
		
		nav.main-nav{
			box-shadow:none;
			& > ul{
					& > li{
						&:first-child{
					        padding-left: 10px;
					    }
						& > a{
							&::before{
								content: '';
								width: 0px;
								height: 2px;
								background-color: @brand-color;
								position: absolute;
								top: 50%;
								left: -1px;
								.translateY();
								.transition();
							}
						}
						&.current-menu-item,
						&:hover{
							& > a{
								color: @menu-color;
								&::before{
									width: 19px;
								}
							}
						}
						&.menu-item-has-children:hover{
							&::before{
								color: @menu-color;
							}
							& > a{
								color: @menu-color;
							}
						}
					}
				}
		}
		.right-content{
			position: absolute;
			right: 0px;
			top: 50%;
			.translateY();
			margin-top: 4px;

			a{
				display: inline-block;
				text-decoration: none;
				right: 25px;	
				& + a{
					margin-left: 12px;
				}

				img{
					width: 14px;
				}
			}
			#search_handler{
				.icon-close{
					top: -60px !important;
				}
				svg{
					width: 20px;
				    position: relative;
				    top: 12px;
				    
				    @media screen and (max-width: 799px){
						left: -20px;
					}
				}
			
			}
		}
		.search-panel {
			width: 40%;
			top: 60px;
			@media screen and (max-width: 799px){
				width: 50%;
				top: 70px;
			}
		}
		&.sticky {
			.search-panel {
				top: 0 !important;
				background: none;
				input {
					background: none;
				}
			}

		}
		
	}
}
#header.sticky, #header.sticky .panel-header, #header.sticky .panel-header .header-wrapper, #header.sticky .panel-header .header-wrapper nav, #header.sticky .panel-header .header-wrapper nav.main-nav > ul > li > a{
	height: 90px !important;
	line-height: 90px;
}
#header.header-food.sticky .site-branding .logo-text-link{
	font-size: 32px;
}
.msidebar{
	.sidebar {
		padding-left: 0 !important;
	}
}
#header {

		// responsive for medium and small devices
		@media screen and (max-width: 1199px){

			nav.main-nav{
				
				& > ul{
					position: relative;
					white-space: nowrap;
					overflow-x: auto;
					overflow-y: hidden;

					&::-webkit-scrollbar{ display: none; }

					& > li{

						ul{
							display: none;
						}
					}
				}
			}
		}
}