.site-header {
	padding: 27px 0 28px 0;
	background-color: @light;
}

.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: @primary-color;
	position: relative;
	z-index: 200;

	.topbar-widgets {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.widget{
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 0;
		display: inline-block;
		color: #d8d8d8;
	}

	.topbar-left {
		line-height: 27px;

		.widget {
			padding: 0 20px;
			border-right: 1px solid #2f2f2f;
			font-size: 14px;
			font-weight: 400;

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

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

		.fa {
			padding-right: 10px;
		}
	}

	.topbar-right {
		.widget {
			padding: 0 15px;

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

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

		.search-form {
			border: 0;
			padding: 0;

			::-webkit-input-placeholder {
				color: #9e9e9e;
			}

			:-moz-placeholder {
				color: #9e9e9e;
			}

			::-moz-placeholder {
				color: #9e9e9e;
			}

			:-ms-input-placeholder {
				color: #9e9e9e;
			}

			&:after {
				display: none;
			}

			&:before {
				font-size: 12px;
				color: #9e9e9e;
				right: 10px;
			}

			.search-field {
				height: 28px;
				line-height: 28px;
				padding-right: 28px;
				background-color: #2f2f2f;
				color: #d8d8d8;
				width: initial;
			}

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

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

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

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

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

	.topbar-extra {
		.widget {
			padding: 0 15px;

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

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

		.search-form {
			border: 0;
			padding: 0;

			&:after {
				display: none;
			}

			.search-field {
				width: initial;
			}
		}
	}

	.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: #f7f7f7;
			    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);
				}
			}
		}
	}

	.intro-text {
		color: #d8d8d8;
	}
}

.topbar-v2 {
	.topbar {
		background-color: #f7f7f7;
		border-bottom: 1px solid #e9e9e9;

		.topbar-widgets .widget {
			color: #9f9f9f;
		}

		.topbar-left .widget {
			border-right-color: #e9e9e9;

			.fa {
				color: #d8d8d8;
			}
		}

		.topbar-right {
			.search-form {
				border: 1px solid #e9e9e9;

				.search-field {
					background-color: #f7f7f7;
				}
			}
		}

		.topbar-extra {
			.search-form {
				border-left: 1px solid #e9e9e9;
				border-right: 1px solid #e9e9e9;

				&:before {
					color: #9f9f9f;
				}
			}
		}

		.topbar-extra-right {
			padding-top: 0;
			padding-bottom: 0;
		}

		.widget_icl_lang_sel_widget {
			ul.lang_sel {
				a,&:after {
					color: #9f9f9f;
				}
			}
		}

		.intro-text {
			color: #222;
		}
	}
}

.page-header {
	margin: 0;
	padding-bottom: 0;
	border: none;

	h1,
	h2 {
		text-transform: uppercase;
		font-weight: 700;
		margin: 0;
	}

	.header-title {
		padding: 111px 0;
		text-align: center;
	    background-size: cover;

		h1 {
			color: @light;
			font-size: 40px;
		}

		&.blog-title {
			h1 {
				font-size: 36px;
				font-weight: 400;
				text-transform: capitalize;
			}
		}
	}

	.breadcrumb-area {
		background-color: #f7f7f7;
		padding: 15px 0;

		nav {
			background-color: transparent;
			text-align: left;
			padding: 0 0 5px 0;
			margin: 0;
			color: @primary-color;
			line-height: 20px;

			a,span {
				color: @primary-color;
			}

			.fa {
				padding: 0 5px;
			}
		}
	}
}

.header-sticky {
	.site-header {
		transition: top 0.5s;

		&.opa-0 {
			opacity: 0;
		}

		&.minimized {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    z-index: 11111;
		    background-color: #fff;
		    border-bottom: 1px solid #ccc;
		    transition: top 0.5s;

		    &.minimizing {
		    	top: 0;
		    	transition: top 0.5s;
		    }
		}
	}

	&.admin-bar {
		.site-header.minimizing {
			top: 32px;
		}
	}

	&.boxed {
		.site-header {
			&.minimized {
				max-width: 1270px;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}

		&.header-v3 {
			.site-header.minimized,
			.site-header.minimizing {
				transform: translate(-50%, 0);
			}
		}
	}

	&.header-transparent,
	&.header-v9 {
		.site-header {
			&.minimized {
				.site-logo {
					img {
						transition: 0.5s;

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

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

			    &.minimizing {
			    	.site-logo {
						img {
							display: none;
							transition: 0.5s;

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

	&.header-v3 {
		.site-header.minimized,
		.site-header.minimizing {
			transform: translateY(0);
		}
	}

	&.header-v4,
	&.header-v5,
	&.header-v6,
	&.header-v7,
	&.header-v8,
	&.header-v9 {
		.site-header {
			&.minimized {

			    .header-logo {
					display: none;
				}
			}
		}
	}

	&.header-v4 {
		.site-header {
			&.minimized {
				padding-top: 0;

			    .header-main {
					transform: translateY(0);
					background-color: @light;
				}

			    &.minimizing {
			    	padding-top: 0;

			    	.header-main {
						transform: translateY(0);
						background-color: @light;
					}
			    }
			}
		}
	}

	&.header-v6,
	&.header-v7 {
		.site-header.minimized {
			border-bottom: none;
		}
	}

	&.header-v7 {
		.site-header {
			&.minimized {
				padding-top: 0;

			    .header-main {
					transform: translateY(0);
				}

			    &.minimizing {
			    	padding-top: 0;

			    	.header-main {
						transform: translateY(0);
					}
			    }
			}
		}
	}

	&.header-v8 {
		.site-header.minimized,
		.site-header.minimizing {
			.header-main {
				background-color: #fff;
				border-bottom-color: #ccc;
			}
		}
	}
}

.header-transparent {
	.topbar,
	.site-header {
		position: absolute;
		width: 100%;
		z-index: 9999;
		background-color: transparent;
	}

	.topbar {
		top: 0;

		.topbar-border {
			height: 1px;
			background-color: rgba( 255, 255, 255, 0.24 );
		}

		.topbar-left .widget {
			border-color: rgba( 255, 255, 255, 0.24 );
		}

		.topbar-right .search-form .search-field {
			background-color: rgba( 47, 47, 47, 0.45 );
		}
	}

	.site-header {
		top: 50px;
	}

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

		.site-header {
			top: 82px;
		}
	}

	&.header-v9 {
		.site-header {
		    top: 20px;
		}

		&.admin-bar .site-header {
		    top: 52px;
		}
	}
}

.header-v3 {
	.topbar {
		padding-bottom: 44px;
		border-bottom: 3px solid @secondary-color;
	}

	.site-header {
		padding: 0;
		position: absolute;
		width: 100%;
		transform: translateY(-47px);
		z-index: 999;
		background-color: transparent;
	}

	.header-main {
		padding: 22px 30px 23px 30px;
		background-color: @light;
	}

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

.header-v4 {
	.site-header {
		padding-top: 35px;
		padding-bottom: 0;
	}

	.header-logo {
		padding-bottom: 0;
		margin-bottom: -7px;
	}

	.header-main {
		padding: 18px 30px 19px 30px;
		background-color: @secondary-color;
		position: relative;
		transform: translateY(50%);
		z-index: 999
	}

	.extra-text-left,
	.extra-text-right {
		font-size: 14px;
		font-weight: 400;
		color: @primary-color;
		margin-top: -5px;

		span {
			font-size: 26px;
			font-weight: 700;
			color: @secondary-color;
			display: block;
			line-height: 26px;
			padding-top: 5px;
		}
	}

	.site-logo {
		text-align: center;
	}

	.extra-text-right {
		text-align: right;
	}

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

	.topbar {
		.topbar-right,
		.topbar-extra-right {
			padding-bottom: 0;
			padding-top: 0;
		}

		.search-form {
			::-webkit-input-placeholder {
				color: @light;
			}

			:-moz-placeholder {
				color: @light;
			}

			::-moz-placeholder {
				color: @light;
			}

			:-ms-input-placeholder {
				color: @light;
			}

			.search-field {
				height: 50px;
				line-height: 50px;
				background-color: #202020;
				color: @light;
				padding-left: 30px;
				padding-right: 30px;
			}

			.search-submit {
				width: 50px;
				height: 50px;
				right: 13px;
			}

			&:before {
				font-size: 14px;
				right: 30px;
				color: @light;
			}
		}

		.topbar-right,
		.topbar-left {
			display: none;
		}

		.topbar-extra {
			display: block;
		}
	}

	&.topbar-v2 {
		.topbar {
			.topbar-widgets {
				.widget {
					color: #9f9f9f;
				}
			}
			.search-form {
				border-left: 1px solid #e9e9e9;
				border-right: 1px solid #e9e9e9;

				.search-field {
					background-color: #f7f7f7;
					color: #9f9f9f;
				}

				&:before {
					color: #9f9f9f;
				}

				::-webkit-input-placeholder {
					color: #9f9f9f;
				}

				:-moz-placeholder {
					color: #9f9f9f;
				}

				::-moz-placeholder {
					color: #9f9f9f;
				}

				:-ms-input-placeholder {
					color: #9f9f9f;
				}

			}
		}
	}
}

.header-v5 {
	.site-header {
		padding: 0;
	}

	.header-logo {
		padding: 44px 0 41px 0;
		border-bottom: 1px solid #f7f7f7;
	}

	.header-main {
		padding: 11px 0;
	}
}

.header-v6 {
	.site-header {
		padding: 0;
	}

	.header-logo {
		padding: 39px 0 36px 0;
		border-bottom: 1px solid #f7f7f7;
	}

	.header-main {
		padding: 14px 0;
		background-color: #0c2e3b;
	}
}

.header-v7 {
	.extra-text-1,
	.extra-text-2 {
		font-size: 14px;
		font-weight: 400;
		color: @primary-color;
		margin-top: -5px;
		display: inline-block;

		span {
			font-size: 26px;
			font-weight: 700;
			color: @secondary-color;
			display: block;
			line-height: 26px;
			padding-top: 5px;
		}
	}

	.extra-text-1 {
		padding-right: 70px;
	}

	.site-header {
		padding-top: 38px;
		padding-bottom: 0;
	}

	.header-main {
		background-color: #002a52;
		position: relative;
		transform: translateY(50%);
		z-index: 999
	}

	.site {
		overflow: hidden;
	}
}

.header-v8 {
	.site-header {
		padding: 0;
	}

	.header-logo {
		padding: 39px 0 36px 0;
	}

	.header-main {
		background-color: transparent;
		position: absolute;
		width: 100%;
		z-index: 9999;
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}
}

.header-v9 {
	.main-nav .menu-item-button-link {
		a {
			display: inline-block;
			min-width: 70px;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.6;
			color: @light;
			margin-top: -5px;
			font-family: @font-family-secondary;
			background-color: @secondary-color;
			text-align: center;
			text-transform: uppercase;
			position: relative;
			z-index: 99;

			&:before {
				content: '';
				position: absolute;
				top: -45px;
				left: 0;
				width: 70px;
				height: 50px;
				background-color: @secondary-color;
				z-index: 1;
			}

			&:after {
				content: '';
				position: absolute;
				bottom: -20px;
				left: 0;
				border-top: 10px solid @secondary-color;
				border-bottom: 10px solid transparent;
				border-left: 35px solid transparent;
				border-right: 35px solid transparent;
				z-index: 1;
			}
		}
	}
}

.header-extra-text {
	.item {
		display: inline-block;
		padding-right: 30px;

		i {
			float: left;
			color: @primary-color;
			margin-top: 11px;
		}

		div {
			margin-left: 30px;
			font-size: 16px;
			font-weight: 400;
			padding-left: 10px;
			border-left: 1px solid #f7f7f7;
		}

		span {
			display: block;
			color: @primary-color;
			line-height: 16px;
		}
	}

	.extra-item {
		float: right;
		margin: 0;
		padding: 0;
		list-style: none;

		.button-vertical {
			a {
				display: inline-block;
				min-width: 70px;
				font-size: 14px;
				font-weight: 700;
				line-height: 1.6;
				color: @light;
				margin-top: -5px;
				font-family: @font-family-secondary;
				background-color: @secondary-color;
				text-align: center;
				text-transform: uppercase;
				position: relative;
				z-index: 99;

				&:before {
					content: '';
					position: absolute;
					top: -45px;
					left: 0;
					width: 70px;
					height: 50px;
					background-color: @secondary-color;
					z-index: 1;
				}

				&:after {
					content: '';
					position: absolute;
					bottom: -20px;
					left: 0;
					border-top: 10px solid @secondary-color;
					border-bottom: 10px solid transparent;
					border-left: 35px solid transparent;
					border-right: 35px solid transparent;
					z-index: 1;
				}
			}
		}
	}

	.item-search {
		.search-form {
			position: relative;
			min-width: 170px;

			.fa {
				font-size: 14px;
				font-weight: 400;
				position: absolute;
			    bottom: 14px;
				right: 10px;
			}

			.search-field {
				border: 1px solid #f7f7f7;
				padding: 10px;

				&:focus {
					outline: none;
				}
			}

			.search-submit {
				opacity: 0;
				width: 40px;
				height: 40px;
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 999;
			}
		}
	}

	.item-text {
		padding-top: 10px;

		a {
			display: inline-block;
			padding: 0 10px;
			color: #9f9f9f;
			transition: 0.5s;

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

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

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

.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;
	}
}