/* ==========================================================================
   EXTENSIONS / FASTEN HEADER / FASTEN HEADER
   ========================================================================== */

.x-fasten-header {
	display: none;
}

@media screen and (min-width: 60em) {
	.x-fasten-header {
		display: flex;
		width: 100vw;
		max-width: none;
		padding: 0.5rem 1rem;
		position: fixed;
		top: 0;
		background-color: #222;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		color: #fff;
		opacity: 0;
		-webkit-transform: scaleY(0);
		transform: scaleY(0);
		transform-origin: top;
		transition: all ease-in-out 0.15s;
		z-index: 300;
	}

	.x-fasten-header--is-active .x-fasten-header {
		opacity: 1;
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}

		.x-fasten-header__logo-image {
			max-height: 4rem;
		}
}
