.site-header{
	position: relative;
	background-color: black;
	background-color: var(--header-background-color);
	fill: black;
	fill: var(--header-background-color);
	padding: 1em;
	min-height: 100px;
	z-index: 2;
	.m1-sm({
		padding: 20px 50px;
	});
	.m1-md({
		padding: 85px 50px;
	});
	.post-template-default.has-featured-image &,
	.page-template-default.has-featured-image &{
		padding-bottom: 200px;
	}
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	&.header-single{
		//padding-bottom: 150px;
		.layout-headercover &{
			height: 100vh;
		}
		.elm-divider{
			z-index: 2;
		}
		.home &{
			display: none;
		}
	}
}
.site-header--inner{
	position: relative;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	z-index: 3;
	.clearfix();
	.xlayout-headercover &{
		position: absolute;
		left: 50%;
		bottom: 85px;
		.translateX(-50%);
		padding: 1em;
		.m1-sm({
			padding: 20px 50px;
			//max-width: 980px + 100;
			padding-bottom: 0;
		});
		.m1-md({
			padding: 85px 50px;
			padding-bottom: 0;
			max-width: 980px + 100;
		});
	}
}

.site-header--image{
	display: block;
	//.m1-sm({
	//	display: block;
	//});
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
	opacity: 0.4;
	.transition(all 0.25s cubic-bezier(1, .3, .3, 1));
	&.fadein{
		opacity: 0.15;
	}
	img {
		position: absolute;
		max-width: none;
		min-width: 1000%;
		min-height: 1000%;
		height: auto;
		width: auto;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%) scale(0.1);
		z-index: -1;
	}
}

.site-info{
	margin-top: 80px;
	.flex-display();
	.site-info--left{
		.flex(1);
	}
	.site-info--right{

	}
}

.site-branding{
	.m1-md({
		//width: 100% / 3 * 2;
	});
	position: relative;
	overflow: hidden;
}

.site-logo{
	display: inline-block;
	width: auto;
	height: 45px;
	margin-right: 25px;
	overflow: hidden;
	img{
		vertical-align: middle;
		max-height: 45px;
		max-width: 200px;
		height: auto;
		width: auto;
	}
}

.custom-logo-link{
	.st0{
		fill: white;
		fill: var(--global-brand-color);
		.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
	}
	.st1{
		fill: white;
		fill: var(--global-brand-color);
		.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
	}
	.st2{
		fill: white;
		fill: var(--global-brand-color);
		.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
	}
	&:hover,
	&:focus,
	&:active{
		.st0{
			fill: var(--global-secondary-color);
		}
		.st1{
			fill: var(--global-secondary-color);
			fill: white;
		}
		.st2{
			fill: var(--global-secondary-color);
			fill: white;
		}
	}
}

.site-title{
	color: white;
	color: var(--global-brand-color);
    //display: inline-block;
    font-weight: bold;
    font-size: 45px;
    line-height: 45px;
	margin: 0;
	margin-bottom: 0;
	overflow: hidden;
	a{
		text-decoration: inherit;
		color: inherit;
		&:hover,
		&:focus,
		&:active{
			color: var(--global-secondary-color);
		}
	}
}

.site-description,
h1.site-description,
.page-title,
h1.page-title{
	color: white;
	color: var(--header-text-color);
	font-size: 30px;
    line-height: 1.4;
	.m1-sm({
		font-size: 40px;
	    line-height: 60px;
	});
	.m1-md({
		font-size: 50px;
		width: 100% / 3 * 2;
	});
	font-weight: bold;
	margin: 0;
	margin-bottom: 0;
	.clearfix();
}
.page-category-date{
	.m1-md({
		width: 100% / 3 * 1;
	});
	font-weight: normal;
	text-align: right;
	a{
		color: inherit;
		text-decoration: none;
	}
}
.page-kicker{
	margin-bottom: 80px;
}
.page-kicker,
.page-subtitle{
	.m1-md({
		width: 100% / 3 * 2;
	});
	font-weight: normal;
	a{
		color: inherit;
		text-decoration: none;
	}
	line-height: 1.6;
}
.page-category-date,
.page-kicker{
	color: white;
	color: var(--header-text-color);
	font-size: 14px;
	text-transform: uppercase;
	margin-top: 0;
	clear: none;
	font-weight: bold;
	width: auto;
}
.page-subtitle{
	color: white;
	color: var(--header-text-color);
	font-size: 24px;
	.m1-sm({
		font-size: 30px;
	});
	line-height: 1.4;
	letter-spacing: -1px;
	margin-bottom: 0;
	margin-top: 20px;
}

.primary-navigation{
	//width: 100% / 3 * 1;
	width: 70%;
	float: right;
	height: 45px;
	//background-color: darkviolet;
	text-align: right;
	display: none;
	.m1-md({
		display: block;
	});
	.primary-menu{
        list-style: none;
        margin: 0;
        padding-left: 0;
        font-size: 0;
        display: inline-block;
        text-align: left;
		font-size: 0;
	}
	.sub-menu{
		display: none;
	}
    .menu-item{
		position: relative;
        display: inline-block;
        //margin: 0 5px;
		margin: 0;
        &:first-child{
            //margin-left: 0;
        }
        &:last-child{
            //margin-right: 0;
        }
        a{
			position: relative;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            color: white;
			color: var(--global-brand-color);
            text-decoration: none;
    		padding: 0 10px;
			height: 45px;
			line-height: 45px;
			will-change: color;
			transition: color 0.2s cubic-bezier(1, .3, .3, 1);
			z-index: 1;
			&::before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 0;
				background-color: blue;
				background-color: var(--header-menu-color);
				transition: all 0.2s cubic-bezier(1, .3, .3, 1);
				z-index: -1;
			}
			&::after{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 50%;
				background-color: white;
				background-color: var(--header-text-color);
				opacity: 0;
				z-index: -2;
			}
            &:hover,
            &:focus,
            &:active{
                //color: crimson;
				color: var(--header-text-color);
				&::before{
					height: 50%;
				}
            }
        }
        &.current-menu-item,
        &.current-menu-ancestor,
        &.current_page_parent{
			/*
			&::after{
				display: block;
				content: "";
				width: 6px;
				height: 6px;
				position: absolute;
				top: 50%;
				left: -12px;
				margin-top: -3px;
				background-color: #fff;
				border-radius: 50%;
				opacity: 0.5;
			}
			*/
			a::after{
				opacity: 0.2;
			}
        }
    }
}
