.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
} //.site-header

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

.header-t {
	background: rgba(0,0,0,0.6);
		
		.container {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-end;

			.header-left, .header-right {
				display: flex;
				flex: 1;
			}//.header-left, .header-right

			.header-left {

				.header-block {
					margin-right: 30px;

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

					svg {
						margin-right: 10px;
					}//svg

				}//.header-block

			}

			.header-right {
				height: 55px;
				align-items: center;
				flex-wrap: wrap;
				justify-content: flex-end;
				font-size: 0.875em;

				ul {
					margin: 0;
					padding: 0;
					list-style: none;

					li {
						display: inline-block;
						vertical-align: middle;

						a {
							height: 55px;
							padding: 0 7px;
							line-height: 55px;
						}

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

					}//li

				}//ul

			}//.header-right

		}//.container

		a {
			color: #fff;

			&:hover {
				color: rgba(255,255,255,0.7);
			}//&:hover

		}//a

}//.header-t

.header-main {

	.container {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			align-items: center;
		}//.container

		.site-branding {
			display: flex;
			flex: 1;
			align-items: center;
			padding: 15px 0;
			max-width: 300px;

			.site-logo + .site-title-wrap {
			    padding-left: 15px;
			}//.site-title-wrap
			.site-title {
			    margin-top: 0;
			    margin-bottom: 0;
			    font-size: 1.875em;
			    line-height: 1.2em;

			    a {
			    	color: #fff;

			    	&:hover {
			    		color: #fff;
			    		text-decoration: none;
			    	}
			    }
			}

			.site-description {
			    margin: 0;
			    color: rgba(255,255,255,0.75);
			}
		}//.site-branding

		.header-search {
		display: flex;
		flex: 0;
	}

	.search-btn {
		color: #fff;
		font-size: 20px;
		cursor: pointer;

		&:hover {
			color: $primary_color;
		}
	}

	.search-form-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		@include transition(all ease 0.35s);

		&.active {
			opacity: 1;
			visibility: visible;
		}

		.search-form {
			max-width: 768px;
			border-bottom: 3px solid #fff;

			label {
				width: calc(100% - 140px);
			}

			.close {
				width: 70px;
				height: 70px;
				position: relative;
				cursor: pointer;
				order: 3;

				&:before, &:after {
					content: "";
					background: #fff;
					width: 35px;
					height: 6px;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					@include transform(rotate(45deg));
				}

				&:after {
					@include transform(rotate(-45deg));
				}

				&:hover:before, &:hover:after {
					background: $primary_color;
				}
			}

			.search-field {
				background: none;
				border: none;
				border-radius: 0;
				font-size: 40px;
				color: #fff;
				padding-left: 0;
				font-weight: 600;
				height: 70px;
			}

			.search-submit {
				height: 70px;
				padding: 0;
				width: 70px;
				background-color: transparent;
				border: none;
				background-size: 40px;
			}
		}//.search-form
	}//.search-form-wrap

}//.header-main

@media screen and (max-width: 1024px) {
	.header-main {

		.header-search {
			margin-left: 20px;
		}//.header-search

		.search-form-wrap {
			padding: 0 15px;
		}//.search-form-wrap
	}//.header-main
}//max-width: 1024px

@media screen and (max-width: 767px) {
	.site-header {
	    background: #222;
	    position: static;
	}
	.header-t {
		.container {
		    flex-direction: column;
		    text-align: center;
		    
		    .header-left {
		    	flex-direction: column;

		    	.header-block {
		    		margin-right: 0;
					margin-top: 10px;
		    	}//.header-block
		    }//.header-left

		    .header-right {
		    	height: auto;
		    }//.header-right
		}//.container
	}//.header-t

	.header-main {
		padding: 20px 0;

		.site-branding {
			padding: 0; 
		}//.site-branding

		.search-btn {
			color: #000;

			&:hover {
				color: $primary_color;
			}
		}//.search-btn

		.search-form-wrap {

			.search-form {
				max-width: 480px;

				.close {
					width: 40px;
					height: 40px;

					&:before, &:after {
						width: 25px;
						height: 4px;
					}
				}//.close

				label {
					width: calc(100% - 80px);
				}

				.search-field {
					font-size: 20px;
					height: 50px;
				}

				.search-submit {
					height: 40px;
					background-size: 25px;
					width: 40px;
				}
			}//.search-form
		}//.search-form-wrap
	}//.header-main
}//max-width: 767px