.site-header {
	background-color: @light;
	position: relative;
	padding: 26px 0;
}

.site-logo {
	h1,h2,p {
		margin: 0;
		line-height: 0;
		text-indent: -9999px;
	}

	.hide-logo {
		display: none;
	}

	.show-logo {
		display: inline-block;
	}
}

.topbar {
	background-color: @secondary-color;
	position: relative;
	z-index: 1000;
	line-height: 60px;

	.topbar-left {
		float: left;

		.topbar-search .search-form {
			left: 0;
			right: auto;
		}
	}

	.topbar-right {
		float: right;
	}

	.widget{
		font-size: 15px;
		margin-bottom: 0;
		display: inline-block;
		color: #dde2fc;
		padding: 0 20px;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {
			padding-right: 0;
		}

		p {
			margin-bottom: 0;
		}

		.topbar-contact {
			i {
				color: @primary-color;
				padding-right: 6px;
				font-size: 18px;

				&:before {
					font-size: 18px;
				}
			}
		}
	}

	.cargo-search-widget {
		padding-left: 15px;
	}

	.topbar-search {
		position: relative;

		.toggle-search {
			font-size: 15px;
			color: #dde2fc;
			position: relative;

			&:before {
				content: '\f00d';
				font-family: FontAweSome;
				position: absolute;
				top: 50%;
				left: 0;
				font-size: 15px;
				transform: translateY(-50%);
				opacity: 0;
			}
		}

		.search-form {
			padding: 0;
			font-family: @font-family-secondary;
			font-size: 14px;
			font-weight: 400;
			border: none;

			i {
				color: #999999;
			}

			::-webkit-input-placeholder {
				color: #999999;
			}

			:-moz-placeholder {
				color: #999999;
			}

			::-moz-placeholder {
				color: #999999;
			}

			:-ms-input-placeholder {
				color: #999999;
			}

			&:after,
			&:before {
				display: none;
			}

			.search-field {
				height: 40px;
				line-height: 40px;
				padding-right: 40px;
				background-color: rgba( 255, 255, 255, 0.1 );
				color: #9e9e9e;
			}

			.search-submit {
				right: 0;
				width: 45px;
				height: 45px;
			}
		}

		&.topbar-search-1 {
			.search-form {
				position: absolute;
				top: 120%;
				right: 0;
				width: 250px;
				line-height: 45px;
				background-color: #fff;
				transition: top 0.3s ease 0s;
				transform: scaleX(0);

				i {
					color: @heading-color;
				}

				::-webkit-input-placeholder {
					color: #757575;
				}

				:-moz-placeholder {
					color: #757575;
				}

				::-moz-placeholder {
					color: #757575;
				}

				:-ms-input-placeholder {
					color: #757575;
				}

				.search-field {
					background-color: transparent;
				}
			}
		}

		&.display-search {
			.toggle-search {
				i {
					opacity: 0;
				}

				&:before {
					opacity: 1;
				}
			}

			.search-form {
				top: 102%;
				transform: scaleX(1);
			}
		}
	}

	.topbar-socials {
		display: inline-block;
		padding: 0;
		margin: 0;

		li {
			display: inline-block;
			padding: 0 10px;

			a {
				color: #dde2fc;
				transition: 0.5s;
			}

			&:hover a {
				color: @primary-color;
			}
		}
	}

	.cargohub-social-links-widget {
		a {
			color: #dde2fc;
			font-size: 15px;

			&:hover {
				color: @primary-color;
			}
		}
	}

	.widget_icl_lang_sel_widget {
		ul.lang_sel {
			padding: 15px 20px 15px 0;
			position: relative;

			&:after {
				content: '\f107';
				font-family: FontAwesome;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				color: #fff;
			}

			a {
				color: #fff;
				font-size: 14px;
				font-weight: 400;

				img {
					margin-right: 10px;
				}

				&:hover {
					color: #fff;
				}
			}

			ul {
				position: absolute;
				background-color: #f4f4f4;
			    width: 100%;
			    text-align: left;
			    padding-left: 20px;
			    opacity: 0;
			    top: 53px;
			    transition: 0.5s;
			    z-index: -9999;
			    transform: scaleX(0);

				a {
					color: #272727;

					&:hover {
						color: #272727;
					}
				}

				&:before {
					content: '';
					width: 100%;
					height: 5px;
					background-color: transparent;
					top: -4px;
					left: 0;
				}

				li {
				    padding: 10px 10px 10px 0;
				}
			}

			&:hover {
				ul {
					opacity: 1;
					z-index: 9999;
					transform: scaleX(1);
				}
			}
		}
	}

	.widget_nav_menu {
		ul {
			li {
				display: inline-block;
				padding: 0 15px;

				&:last-child {
					padding-right: 0;
				}

				&:first-child {
					padding-left: 0;
				}

				a {
					padding-left: 0;

					&:before {
						display: none;
					}
				}
			}
		}
	}
}

.page-header {
	margin: 0;
	padding-bottom: 0;
	border: none;
	background-color: #161616;

	h1 {
		color: @light;
		text-transform: capitalize;
		font-weight: 600;
		margin: 0;
		font-size: 44px;
		line-height: 1.2;
		position: relative;
		z-index: 99;
	}

	.header-title {
		padding-top: 120px;
		padding-bottom: 120px;
		text-align: center;
		background-attachment: fixed;
		position: relative;

		//&:before {
		//	content: '';
		//	position: absolute;
		//	top: 0;
		//	left: 0;
		//	width: 100%;
		//	height: 100%;
		//	background-color: rgba( 0, 0, 0, 0.5 );
		//	z-index: 98;
		//}
	}

	.breadcrumb-area {
		background-color: #fff;
		padding: 22px 0;
		border-bottom: 1px solid #ececec;
		font-size: 16px;

		nav {
			background-color: transparent;
			text-align: left;
			padding: 0;
			margin: 0;
			color: #848484;
			line-height: 20px;

			a span[itemprop="title"] {
				color: #848484;
				transition: 0.5s;
			}

			i {
				padding: 0 5px;
				font-size: 14px;
				color: #848484;
			}

			span[itemprop="title"] {
				color: #848484;
			}
		}
	}

	.site-social-share {
		text-align: right;
		position: relative;
		color: @heading-color;

		.socials-share {
			position: absolute;
			width: 100%;
			top: 50%;
			right: 100px;
			transform: translateY(-50%);
			opacity: 0;
			transition: 0.5s;
		}

		&:hover {
			.socials-share {
				opacity: 1;
			}
		}
	}
}

.header-sticky {
	&.header-v1,
	&.header-v2 {
		.site-header {
			&.minimized {
				top: 0;
				left: 50%;
				transform: translate(-50%,0);
				width: 100%;
				position: fixed;
				z-index: 9999;
				background-color: #fff;
			}
		}
	}

	&.header-v1{
		.site-header{
			&.minimized{
				.nav a{
					color: #222;
				}
			}
		}

	}

	&.admin-bar {
		&.header-v1,
		&.header-v2 {
			.site-header {
				&.minimized {
					top: 32px;
				}
			}
		}

		&.header-v3,
		&.header-v4 {
			.site-header.minimized .site-menu {
				top: 32px;
			}
		}
	}

	&.header-transparent {
		.site-header {
			&.minimized {
				top: 0 !important;

				.site-logo {
					img {
						&.logo-dark {
							display: inline-block;
						}

						&.logo-light {
							display: none;
						}
					}
				}
			}
		}

		&.admin-bar {
			.site-header {
				&.minimized {
					top: 32px !important;
				}
			}
		}
	}

	&.header-v3,
	&.header-v4 {
		.site-header {
			&.minimized {
				.site-menu {
					position: fixed;
					top: 0;
					z-index: 9999;
					width: inherit;
				}
			}
		}
	}

	&.header-v3 {
		.site-header {
			&.minimized {
				.site-menu {
					width: 100%;
				}
			}
		}
	}
}

.header-transparent {
	.topbar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba( red(@secondary-color), green(@secondary-color), blue(@secondary-color), 0.9 );
	}

	&.admin-bar {
		.topbar {
			top: 32px;
		}
	}

	.site-header {
		background-color: transparent;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		border-bottom: 1px solid rgba( 35, 41, 81, 0.1 );
	}

	.page-header {
		.header-title {
			padding-top: 275px;
		}
	}
}

.header-v3,
.header-v4 {
	.site-header {
		padding: 0;
	}

	.site-logo {
		float: left;
	}

	.site-header-widget {
		float: right;

		.widget {
			float: right;
			text-align: left;
			padding: 0 15px;
			margin-bottom: 0;

			&:first-child {
				padding-right: 0;
			}

			&:last-child {
				padding-left: 0;
			}

			p {
				margin-bottom: 0;
				font-size: 16px;
				font-style: italic;
			}

			i {
				color: #202020;
			}

			h4 {
				color: @primary-color;
				font-size: 15px;
				font-weight: 500;
				margin-bottom: 0;
				margin-top: 5px;
			}
		}
	}
}

.header-v3 {
	.site-header {
		background-color: transparent;
	}

	.site-contact {
		padding-top: 38px;
		padding-bottom: 28px;
	}

	.site-header-widget {
		span {
			float: left;
			margin-top: -5px;
		}

		i {
			font-size: 33px;

			&:before {
				font-size: 33px;
			}
		}

		h4,p {
			margin-left: 50px;
		}
	}
}

.header-v4 {
	.topbar {
		border-bottom: 1px solid #f1f1f1;
	}

	.ch-empty-space {
		height: 85px;
	}

	.page-header .header-title {
		padding-top: 200px;
	}

	.site-header {
		background-color: transparent;
		position: absolute;
		width: 100%;
		top: 0;
		z-index: 999;
	}

	.site-contact {
		padding: 29px 30px;
		border-left: 1px solid #f1f1f1;
		border-right: 1px solid #f1f1f1;
		background-color: #fff;
	}

	.site-header-widget {
		span {
			float: left;
			width: 50px;
			height: 50px;
			line-height: 46px;
			text-align: center;
			border: 2px solid #f1f1f1;
		}

		i {
			font-size: 22px;

			&:before {
				font-size: 22px;
			}
		}

		h4,p {
			margin-left: 70px;
		}
	}
}

.fh-header-minimized {
	display: none;
}

.header-v2,
.header-v3 {
	.fh-header-minimized.minimized {
		display: block;
	}
}

.off-canvas-layer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 999;
	cursor: pointer;
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
}

.display-mobile-menu {
	.off-canvas-layer {
		display: block;
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}