/* Hidden on desktop */
@media all and (min-width: 769px) {
	.menu-button {
		display: none;
	}
}

/* Layout */
@media all and (max-width: 768px) {
	.l-header > div {
		flex-direction: row;
		justify-content: space-between;
	}

	.l-menubar {
		position: fixed;
		top: 0;
		right: 0;

		margin: 0;
		padding: 10px;

		background: #fff;
		text-align: left;
	}

	.l-menubar.is-opened {
		box-shadow: 1px 1px 3px rgba(0,0,0,.15);
	}
}

/* Modules */
@media all and (max-width: 768px) {
	.header-logo img {
		margin-left: 20px;
		max-height: 40px;
	}

	.menu-button {
		display: flex;
		align-items: center;
		justify-content: center;

		float: right;
		width: 50px;
		height: 50px;

		font-size: 1.5rem;

		cursor: pointer;
	}

	.is-opened .menu-button i::before {
		content: "\f00d"; /* Switch icon */
	}

	.site-nav {
		display: none; /* Hidden on load */
		padding: 20px;
		clear: both;
	}

	.is-opened .site-nav {
		display: block;
	}

	.site-nav > li,
	.site-nav > li > a,
	.site-search {
		display: block;
	}

	.site-nav > li {
		margin-bottom: 10px;
	}

	.site-nav > li > a {
		line-height: 1.2;
		padding: 10px;
	}

	.site-search {
		padding: 0;
	}

	.site-search input {
		padding: 10px;
	}
}

/* Products */
@media all and (max-width: 960px) {
	.product-item {
		width: 33.3%;
		padding: 10px;
		margin-bottom: 10px;
	}
}

@media all and (max-width: 600px) {
	.product-item {
		width: 50%;
	}
}

/* Startpage */
@media all and (max-width: 768px) {
	.startpage-hero {
		padding: 20px;
		background-position: left center;
		justify-content: flex-end;
	}
	.startpage-hero__caption {
		width: 50%;
		font-size: 1rem;
	}

	.startpage-hero__caption h2 {
		font-size: 2.5rem;
	}
}

@media all and (max-width: 600px) {
	.startpage-hero {
		padding: 30px;
		background-position: left center;
	}
	.startpage-hero__caption {
		width: 100%;
		padding: 15px;
		background: rgba(255,255,255,0.75);
		font-size: 1.2rem;
	}

	.startpage-hero__caption h2 {
		font-size: 2.5rem;
	}
}