/*Theme Name: Sneugeld
Author: B.
Author URI: http://www.beardsofberlin.com
Description: A custom made template for beardsofberlin.com
Version: 1.0
Tags: beards*/

/* BEARDSOFBERLIN.COM */
/* DEVELOPMENT BY B. VAN HAREN-SUAREZ  &  MARK IN MEDIA */

/* FONTS */
@font-face {
	font-family: 'Tiempos Text';
	src: url('fonts/TiemposText-Regular.eot');
	src: url('fonts/TiemposText-Regular.eot?#iefix') format('embedded-opentype'),url('fonts/TiemposText-Regular.woff2') format('woff2'),url('fonts/TiemposText-Regular.woff') format('woff'),url('fonts/TiemposText-Regular.ttf') format('truetype'),url('fonts/TiemposText-Regular.svg#TiemposText-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FuturaBoB';
	src: url('fonts/Futura-Heavy.eot');
	src: url('fonts/Futura-Heavy.eot?#iefix') format('embedded-opentype'),url('fonts/Futura-Heavy.woff2') format('woff2'),url('fonts/Futura-Heavy.woff') format('woff'),url('fonts/Futura-Heavy.ttf') format('truetype'),url('fonts/Futura-Heavy.svg#Futura-Heavy') format('svg');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FuturaBoB';
	src: url('fonts/Futura.eot');
	src: url('fonts/Futura.eot?#iefix') format('embedded-opentype'),url('fonts/Futura.woff2') format('woff2'),url('fonts/Futura.woff') format('woff'),url('fonts/Futura.ttf') format('truetype'),url('fonts/Futura.svg#Futura') format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* GENERAL CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html {
	box-sizing: border-box;
	overflow-x: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
body {
	--default-text-color: #080706; /*  #272829;  #231f20  */
	--default-background-color:#ffffff;
	
	min-height: 100vh;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	color: var(--default-text-color);
	background:var(--default-background-color);
	font-family: 'Tiempos Text', serif;
	font-size: 16px;
	line-height: 1.25rem;
	text-align: left;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	
	/* from inline styles interview page */
/*  background:var(--default-background-color);
    color: var(--default-text-color);  */
}
*, *:after, *:before {
	box-sizing: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.share-container-text a {
    color: var(--default-text-color) !important;
}
.share-container svg {
    fill: var(--default-text-color);
}
.morebeards-container {
    color: var(--default-text-color);
}
header {
	background-color: var(--default-background-color);
    border-bottom-color: var(--default-text-color);
}
hr {
	margin-top: 36px;
	border-top: 12px solid var(--default-text-color);
	border-bottom: none;
}
em {
    font-style: italic;
}
blockquote:before {
    color: var(--default-text-color);
}
.footer-container {
    background-color: var(--default-text-color);
    color: var(--default-background-color);
}
.footer-container-text a {
    color: var(--default-background-color);
}
.footer-container-text svg {
    fill: var(--default-background-color);
}
.reference {
    display: block;
    position: absolute;
    height: auto;
}
.social-icons .facebook svg,
.social-icons .instagram svg {
    fill: var(--default-text-color);
}
nav {
	background-color: var(--default-background-color);
}
nav .menu-links li a {
	color: var(--default-text-color);
}
nav .menu-links li a {
	color: var(--default-text-color);
}
#stories {
	scroll-margin-top: 134px;
}
@media all and (max-width:1200px) {

	.menu-links {
	  background-color:var(--default-background-color);
	}
	nav .menu-links li a {
		color: var(--default-text-color);
	}
	.mob-menu hr {
		border: 1px solid var(--default-text-color);
	}
	.mob-menu svg {
		fill: var(--default-text-color);
	}
	.bar {
		background-color: var(--default-text-color);
	}
	input[type="submit" i] {
		background-color: var(--default-background-color);
		color: var(--default-text-color);
	}
	input[type="text" i] {
		color: var(--default-text-color);
		background-color: var(--default-background-color);
		border-color: var(--default-text-color);
	}
	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: var(--default-text-color);
		opacity: 0.5; /* Firefox */
	}
	:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: var(--default-text-color);
	}
	::-ms-input-placeholder { /* Microsoft Edge */
		color: var(--default-text-color);
	}

}
/* END from inline styles interview page */

.mobile {
	display:none !important;
}
reference {}
.about-text a,
.article-container a,
.contact-container a,
.shop-wrapper a {
	color:  var(--default-text-color);
	text-decoration: underline;
	text-decoration-thickness: 1px;
    text-underline-offset: 3px;
		-webkit-transition: all .125s ease-in-out;
		-moz-transition: all .125s ease-in-out;
		-o-transition: all .125s ease-in-out;
		-ms-transition: all .125s ease-in-out;
		transition: all .125s ease-in-out;
}
.intro a,
.product-container a.orderlink {
	text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.menu-container a,
.footer-container a,
#stories .box-content a {
	text-decoration: unset;
}
a:hover {
	cursor: pointer !important;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
		-webkit-transition: all .125s ease-in-out;
		-moz-transition: all .125s ease-in-out;
		-o-transition: all .125s ease-in-out;
		-ms-transition: all .125s ease-in-out;
		transition: all .125s ease-in-out;
}
.intro a:hover ,
.product-container a:hover.orderlink  {
	text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
img, video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
h1, h2, h3, h4 {
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	margin-bottom: 1rem;
}

/*** CLEAR FLOATS* Reference: http://w3bits.com/clearfix*/
.cf:after, .lab-grid:after {
	content: "";
	display: table;
	clear: both;
}
/* SECTION: FEATURED (HOMEPAGE) */
.featured-container {
	position: relative;
	overflow: hidden;
}
.featured-bg {
	width: 100vw;
	height: 100vh;
	background-color: #272829;
	background-size: cover;
	background-position: center center;
		animation: breath 30s ease 3.5s 1 forwards;
		-webkit-animation: breath 30s ease 3.5s 1 forwards;
		-moz-animation: breath 30s ease 3.5s 1 forwards;
		-o-animation: breath 30s ease 3.5s 1 forwards;
		-ms-animation: breath 30s ease 3.5s 1 forwards;
		/* ADD10 */
}
@keyframes breath {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	/* ADD10 */
	100% {
		transform: scale(1.4);
		-webkit-transform: scale(1.4);
		-moz-transform: scale(1.4);
		-o-transform: scale(1.4);
		-ms-transform: scale(1.4);
	}
	/* ADD10 */
}
.featured-text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	padding: 20vw;
	color: #f7f7f7;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}
.featured-text .coverstory {
	font-family: 'Tiempos Text', serif;
	font-weight: 500;
	font-size: 21px;
	opacity: 0;
		animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-webkit-animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-moz-animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-o-animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-ms-animation: fadeIn 1.5s ease 2.35s 1 forwards;
}
.featured-text .subject {
	display: block;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 500;
	font-size: 4.5em;
	line-height: 1.2em;
	text-decoration: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0;
		animation: fadeIn 1.5s ease 2.5s 1 forwards;
		-webkit-animation: fadeIn 1.5s ease 2.5s 1 forwards;
		-moz-animation: fadeIn 1.5s ease 2.5s 1 forwards;
		-o-animation: fadeIn 1.5s ease 2.5s 1 forwards;
		-ms-animation: fadeIn 1.5s ease 2.5s 1 forwards;
}
.featured-text .title {
	display: block;
	padding-top: 1em;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 4.5em;
	line-height: 4.5rem;
	letter-spacing: 0.015em;
	word-spacing: -0.3rem;
	opacity: 0;
		animation: fadeIn 1.5s ease 2.6s 1 forwards;
		-webkit-animation: fadeIn 1.5s ease 2.6s 1 forwards;
		-moz-animation: fadeIn 1.5s ease 2.6s 1 forwards;
		-o-animation: fadeIn 1.5s ease 2.6s 1 forwards;
		-ms-animation: fadeIn 1.5s ease 2.6s 1 forwards;
}
.featured-text .title:hover{
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}
.featured-text p a {
	color: #f7f7f7;
	text-decoration: none;
		-webkit-transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		-ms-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
}
.featured-text p a:hover {
	cursor: pointer !important;
	padding-bottom: 0.75vw;
	border-bottom: 0.15vw solid #f7f7f7;
}
.branding-small {
	display: block;
	width: 100%;
	position: absolute;
	top: 5.5em;
	left: 50%;
	color: #f7f7f7;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 100;
}
.branding-small img {
	width: 20vw;
	opacity: 0;
		animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-webkit-animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-moz-animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-o-animation: fadeIn 1.5s ease 2.35s 1 forwards;
		-ms-animation: fadeIn 1.5s ease 2.35s 1 forwards;
}
.branding-button {
	display: block;
	width: 3em;
	height: 5em;
	position: absolute;
	bottom: 0em;
	left: 50%;
	background-image: url(images/out-3.svg);
	background-size: 2.65em;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	-webkit-transform: translate(-50%, -15%);
	-ms-transform: translate(-50%, -15%);
	transform: translate(-50%, -15%);
	/* ADD10 */
	opacity: 0;
	animation: fadeIn 1.5s ease 5s 1 forwards, bounce 3s 7s infinite both;
	-webkit-animation: fadeIn 1.5s ease 5s 1 forwards, bounce 3s 7s infinite both;
	-moz-animation: fadeIn 1.5s ease 5s 1 forwards, bounce 3s 7s infinite both;
	-o-animation: fadeIn 1.5s ease 5s 1 forwards, bounce 3s 7s infinite both;
	-ms-animation: fadeIn 1.5s ease 5s 1 forwards, bounce 3s 7s infinite both;
	/* ADD10 */
	z-index:888;
}
@keyframes bounce {
	/* ADD10 */
	0%, 20%, 50%, 80%, 100% {
		background-position: center top;
	}
	/* ADD10 */
	40% {
		background-position: center 2vh;
	}
	/* ADD10 */
	60% {
		background-position: center 2vh;
	}
	/* ADD10 */
}
.branding-button:hover {
	background-image: url(images/over-3.svg);

		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
}
.featured-intro {
	position: absolute;
	top: -100vh;
	display: block;
	width: 100%;
	height: 100vh;
	background-image: url(images/blackground.png);
	animation: slideUp ease 3s;
	-webkit-animation: slideUp ease 3s;
	-moz-animation: slideUp ease 3s;
	-o-animation: slideUp ease 3s;
	-ms-animation: slideUp ease 3s;
	z-index: 5000;
}
.featured-intro-text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	padding: 30vw;
	color: #f7f7f7;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 4.85em;
	line-height: 4.8rem;
	letter-spacing: 0.015em;
	word-spacing: -0.3rem;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.featured-intro .branding-large {
	display: block;
	position: absolute;
	top: 5.95em;  /* 4.5em; */
	left: 50%;
	width: 150%;
	color: #f7f7f7;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.featured-intro .branding-large img {
	width: 20vw;
}
/* SECTION: STORIES (HOMEPAGE) and CONTACT and SHOP */
.contact-container,
.shop-container,
.stories-container {
	color: var(--default-text-color);
	text-align: center;
	width: 100%;
	padding: 6vw 4vw;
}
.contact-container,
.shop-container {
	padding: 4vw 0;
}
.contact-container:after,
.contact-container .contact-title:after,
.contact-container .contact-intro:after,
.shop-container:after,
.shop-container .shop-title:after,
.shop-container .shop-intro:after,
.stories-container:after,
.stories-container .stories-title:after,
.stories-container .stories-text:after {
	content:"";
	display:table;
	clear:both;
}
.contact h1,
.shop h1,
.shop h3,
.stories-container h1 {
	margin-bottom: 0.35em;
    font-family: 'FuturaBoB', sans-serif;
	font-weight: 500;
    font-size: 4.5em;
    line-height: 4.7rem;
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: -5px;
}
.contact h2,
.shop h2,
.stories-container h2,
.contact div.wpforms-container-full .wpforms-form button[type=submit],
.shop div.wpforms-container-full .wpforms-form button[type=submit]  {
	font-family: 'FuturaBoB', sans-serif;
    font-weight: 600;
	font-size: 2em;
    line-height: 2.2rem;
	letter-spacing: 0.02em;
    word-spacing: -0.15rem;
}
.contact div.wpforms-container-full .wpforms-form button[type=submit],
.shop div.wpforms-container-full .wpforms-form button[type=submit] {
	font-size: 1.25em;
	line-height: 2rem;
	background-color: #fff0;
    border: 2px solid #000;
}
.contact div.wpforms-container-full .wpforms-form button[type=submit]:hover, 
.contact div.wpforms-container-full .wpforms-form button[type=submit]:focus,
.shop div.wpforms-container-full .wpforms-form button[type=submit]:hover, 
.shop div.wpforms-container-full .wpforms-form button[type=submit]:focus {
	background-color: #ccc;
	border: 2px solid #000;
}
.wrapper {
	padding-right: 1.5em;
	padding-left: 1.5em;
}
.form-container h2,
#shop .shop-container *,
#shop .products-container * {
	text-align: center;
}
.product-container {
	margin: 1em 0 5em;
    padding-top: 3em;
    border-top: 1px solid #666;
}
.product-container:first-child {
/*	margin-top: 0;
    padding-top: 0;
    border-top: 0px solid #666;  */
}
.products-container p {
	margin-bottom: 1.5em;
    font-size: 1.35em;
    line-height: 2.2rem;
}
.photo-container {
	position: relative;
	margin-bottom: 2em; 
}
.product-person-photo img {
	display: block;
    margin-right: auto;
	margin-left: auto;
	width: 80%;
}
.product-photo {
	width: 21%;
    position: absolute;
    bottom: -0.5em;
    left: 0;
}
.product-container .price,
.product-container a.orderlink {
    font-family: 'FuturaBoB', sans-serif;
    font-weight: 600;
}
.product-container a.orderlink {
	text-transform: uppercase;
	letter-spacing: 2px;
	word-spacing: -3px;
}

.product-container .price:before {
	content:"Price: €";
	display: inline-block;
	margin-right: 0.35em;
	
}
 /* Order Form bij SHOP */
#order {
	display: block;
    position: relative;
    top: -9em;
	visibility: hidden;
}
#shop .form-container {
	margin-top: 3em;
    padding-top: 2em;
}
#shop .form-container div.wpforms-container-full * {
	text-align: center;
}
.form-container,
.shop form .divider:before {
	content:"";
	display: block;
	margin: 0.2em 0 1em;
    border-top: 1px solid #666;
}

.shop div.wpforms-container-full .wpforms-form label:not(.wpforms-field-label-inline) {
	margin-bottom: 0.75em;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 500;
    font-family: 'FuturaBoB', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

 /* bij STORIES titel op HOMEPAGE  / SHOP */
.shop-intro span,
div.stories-text .voetnoot {
	display: block;
	margin-top: 1.2em;
    font-size: 1.35em;
    line-height: 1.25rem;
    font-family: 'FuturaBoB', sans-serif;
    font-weight: 600;
	text-align: center;
    letter-spacing: 0;
    word-spacing: 1px;
}

/* Masonry item */
.masonry .brick {
	margin-bottom: 30px;
	display: inline-block;
	/* Fix the misalignment of items */
	vertical-align: top;
	/* Keep the item on the very top */
	overflow: hidden;
	position: relative;
}
/* Masonry image effects */
.masonry .brick img {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden; 
	/* Remove Image flickering on hover */
}
.masonry .brick:hover img {
	/* -webkit-transform: scale(1.1); 	*/
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	/* transform: scale(1.1); 	*/
}

/* Nieuw Masonry grid - HOMEPAGE */
.grid-parent-gosign .gallery-image .box-content .title {
	color: #f7f7f7 !important;
	font-weight: normal !important;
	padding: 20px !important;
}
.interview-name {
	margin-bottom: 0.5em;
	display: block;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 500;
    font-size: 2rem;
	line-height: 2rem;
    text-decoration: underline;
    text-transform: uppercase;
    text-decoration-thickness: 2.5px;
    text-underline-offset: 2.5px;
    letter-spacing: 1px;
}
.interview-title {
    margin-top: 0.5em;
	font-family: 'FuturaBoB', sans-serif;
    font-weight: 600;
	font-size: 1.65rem;
	line-height: 1.75rem;
    letter-spacing: 2px;
    word-spacing: -3px;
}
.interview-title:hover,
.interview-title:focus {
	text-decoration: underline;
	text-decoration-color: #fff;
	text-decoration-thickness: 2.2px;
	text-underline-offset: 3px;
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
	.interview-name,
	.interview-title	{
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
}

/* get rid of masonry animation when screen changes size */
.grid-parent-gosign .grid-item {
	transition-duration:500ms !important;
}
.animate {
    transition: none !important;
}

@media only screen and (max-width: 767px) {
	.grid-parent-gosign .gallery-image .box-content .title {
		font-size: 6vw !important;
	}
}
@media only screen and (max-width: 990px) {
	.grid-parent-gosign .gallery-image.box4 {
		margin-bottom: 0px !important;
	}
}

/* SECTION: ARTICLE */
nav {
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	height: 135px;
	text-align: center;
/*	background-color: #000;  */
	z-index:999;
}
.menu-links {
	position: fixed;
	top: 87px;
	left: 50%;
	margin-left: -398px;
	display: flex;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 16px;
    letter-spacing: 1px;
    word-spacing: 1px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.menu-links li {
	display: inline-block;
	margin: 20px 7px;
	list-style:none;
}
.social-icons {
	display: block;
	margin-left: 473px;
	position: absolute;
	top: 87px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.social-icons li {
	display: inline-block;
	margin: 20px 7px;
	list-style:none;
}
.sticky-branding-small-article {
	display: block;
	width: 100%;
	position: absolute;
	top: 72px;
	left: 50%;
	color: #f7f7f7;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
.hide {
	opacity:0;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.show {
	opacity:1;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.sticky-branding-small-article .logo {
	width: auto;
	height: 50px;
	-webkit-mask: url(images/logo-dark.svg) no-repeat center;
	mask: url(images/logo-dark.svg) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
#about,
#article,
#contact,
#shop {
	margin-top: 135px;
}
.about-wrapper,
.article-wrapper,
.contact-wrapper,
.shop-wrapper {
	margin: 3em 0;
	position: relative;
	width:100%;
	max-width: 725px;
    margin-left: auto;
    margin-right: auto;
}
.contact-wrapper,
.shop-wrapper {
	margin-top: 0;
}
/* SECTION: ABOUT US / CONTACT */
.about-wrapper {     
	/* * *  zie .article-wrapper * * */
}
.about .navbar,
.contact .navbar,
.shop .navbar {
    background-color: var(--default-background-color);
}
.about .logo,
.about .hamburger .bar,
.contact .logo,
.contact .hamburger .bar,
.shop .logo,
.shop .hamburger .bar {
	background-color:#231f20;  /* equal to SVG */
} 
.branding-small-article {
	display: block;
	width: 100%;
	position: absolute;
	top: 72px;
	left: 50%;
	color: var(--default-text-color);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
.branding-small-article img {
	width: 20vw;
}
.branding-small-article .logo {
	-webkit-mask: url(images/Beards-of-Berlin-logo_TAG-ZWART.svg) no-repeat center;
	mask: url(images/Beards-of-Berlin-logo_TAG-ZWART.svg) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	height: 76px;
	width: auto;
	background-color:#231f20;  /* equal to SVG */
}
.contact div.wpforms-container-full .wpforms-form input[type=email], 
.contact div.wpforms-container-full .wpforms-form input[type=tel], 
.contact div.wpforms-container-full .wpforms-form input[type=text], 
.contact div.wpforms-container-full .wpforms-form select, 
.contact div.wpforms-container-full .wpforms-form textarea {
    font-size: 1.2rem;
	line-height: 1.5rem;
    color: var(--default-text-color);
    background-color: var(--default-background-color);
    border: 1px solid var(--default-text-color);
}
.article-photo {
	position: relative;
}
.wp-caption {
	max-width: 100%;
}
.wp-caption img,
.wp-caption p {
	margin-bottom: 0.125em;
}
.product-container a.storylink,
p.wp-caption-text {
	text-align: right;
	font-size: 0.8125rem;
	line-height:1.25rem;
	font-weight: 500;
	font-family: 'FuturaBoB', sans-serif;
	text-transform: uppercase;
}
.product-container a.storylink {
	margin-top: 0.5em;
    display: block;
	font-size: 1.1rem;
	text-align: center;
}
.photographer{
	width: 20em;
	position: absolute;
    right: 0;
	bottom: 18.45em;
	font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'FuturaBoB', sans-serif;
    text-transform: uppercase;
    transform: rotate(-90deg);
    transform-origin: top right 0;
}
#shop .photographer{
    right: 10%;
	bottom: 15.45em;
}

@media only screen and (min-width: 1024px) {
	.photographer{
	/*	right: -130px;  */
	}
}
.article-title {
	margin-top: 4em;
    text-align: left;
}
.article-title .article-subject {
	display: block;
    width: 100%;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 500;
	font-size: 4.25em;
	line-height: 5.5rem;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-decoration: underline;
	text-decoration-thickness: 0.35rem;
	text-underline-offset: 0.35rem;
}
.article-title .article-quote {
	margin-top: 0.6em;
	display: block;
    width: 100%;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 4.5em;
    line-height: 4.3rem;
    letter-spacing: 0.07rem;
    word-spacing: -0.3rem;
}
.share-container {
	font-family: 'FuturaBoB', sans-serif;
}
.share-container-text {
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 20px;
	text-align: left;
    letter-spacing: 1px;
    word-spacing: -1px;
}
.share-container-text span {
	font-weight: 700;
	text-transform: uppercase;
}
.share-container-text ul {
	list-style: none;
}
.share-container-text ul li {
	display: inline-block;
	list-style: none;
}
.share-container-text a {
	padding: 0 10px;
	text-decoration: none;
}
.share-container-text span {
	padding: 0;
	text-decoration: none;
}
.share-container-text a:hover {
	text-decoration: none;
}
.icon-correction {
	position: relative;
	top: 6px;
}
.author,
.place-time,
.reading-time  {
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 1.05em;
	line-height: 1.6rem;
	text-transform: uppercase;
	letter-spacing: 1.3px;
	word-spacing: -1px;
}
.place-time {
	margin-left: 6px;
	font-weight: 400;
}
.reading-time {
	font-weight: 400;
}
.copy-link {
	content: "Bla bla bla";
}
.intro {
	margin-top: 49px;
	padding-bottom: 24px;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 1.56em;
    line-height: 2.3rem;
    letter-spacing: 0.04rem;
    word-spacing: -0.15rem;
}
.article-container {
	margin-top: 2em;
    margin-bottom: 4em;
    font-size: 1.35em;
    line-height: 2.2rem;
}
/*  FIRST LETTER OF INTERVIEW */
.article-text > p:first-of-type::first-letter {
	float: left;
	margin-top: 0.575rem;
    padding-right: 8px;
    font-size: 5.225em;
	line-height: 5.8rem;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	vertical-align: -webkit-baseline-middle;
}
@media only screen and (max-width: 650px) {
	.article-text > p:first-of-type::first-letter {
		line-height: 4.8rem;
	}
}
@media not all and (min-resolution:.001dpcm) { 
    @media {
        .article-text > p:first-of-type::first-letter {
			padding-top: 0px; 
        }
    }
}
@-moz-document url-prefix() {
	.article-text > p:first-of-type::first-letter {
		margin-top: 0.85rem;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.article-text > p:first-of-type::first-letter {
		margin-top: 1.55rem;
		font-size: 5.225em;
		line-height: 4.85rem;
	}
}

.article-container p {
	margin-bottom: 1.5em;
}
blockquote {
	margin-top: -10px;
    padding-bottom: 30px;
	padding-left: 50px;
	font-family: 'FuturaBoB', sans-serif;
    font-weight: 600;
	font-size: 2em;
    line-height: 2.8rem;
    text-align: left;
    letter-spacing: 1px;
    word-spacing: -1px;
	 /*   text-indent: -13px; */
}
.article-container blockquote p {
	margin-bottom: 0.5em;
	text-indent: -0.9rem;
}
blockquote:before {
	margin-left: -50px;
	content: "\2501";
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 92px;
}
blockquote:first-line {
	text-indent: 0;
}
blockquote.centerquote {
	text-align: center;
}
.article-text p img {
	margin-bottom: 0.5em;
}
.soundcloud {
	margin-top: 50px;
}
.quote span {
	background-color: #F9F075;
	font-weight: 700;
}
#about .voetnoot {
	text-align: right; 
	font-size:80%;
	font-style: italic;
}
.team-text:before {
	content:"";
	display:block;
	width: 100%;
	height: 0.0525rem;
	background-color:#333;
	margin-bottom:3.5em;
}
.team-text {
	padding-top: 1.5em;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: normal;
	font-size: 16px;
	line-height: 1.2rem;
	letter-spacing: 0.0375rem;
    word-spacing: 0px;
}
/*  More Beards - title */
.morebeards-container {
	margin-bottom: 0.8em;
	width: 100%;
/*	color: #272829; */
	text-align: center;
}
.morebeards-container .morebeards-title {
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 2em;
    line-height: 4rem;
}

/*  More Beards - Masonry-Article */
.morebeards {
	width: 226px;
	height: 301px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
/* Masonry grid */
.masonry-article {
	column-gap: 24px;
	column-fill: initial;
	-webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
}
/* Masonry item */
.masonry-article .brick {
	position: relative;
	margin-bottom: 1.5em;
	display: inline-block;
	/* Fix the misalignment of items */
	vertical-align: top;
	/* Keep the item on the very top */
	overflow: hidden;
}
/* Masonry image effects */
.masonry-article .brick img {
/*		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	backface-visibility: hidden;   */
/*	Remove Image flickering on hover */
}
.masonry-article .brick:hover img {
/*	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	*/
}
.masonry-article .brick .overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	background: rgba(0, 0, 0, 0.5);
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-o-transition: all .5s ease;
		-ms-transition: all .5s ease;
		transition: all .5s ease;
}
.masonry-article .brick:hover .overlay {
	opacity: 1;
}
.masonry-article .overlay p {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	padding: 20px;
	color: #f7f7f7;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.masonry-article .overlay .subject {
	font-family: 'FuturaBoB', sans-serif;
    font-weight: 400;
    font-size: 2em;
	line-height: 3rem;
    text-decoration: underline;
    display: block;
    text-transform: uppercase;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    letter-spacing: 1px;
}
.masonry-article .overlay .title {
	display: block;
	padding-top: 0.5em;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 1.5em;
	line-height: 1.7rem;
}
.masonry-article .overlay .title:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}

/* SECTION: FOOTER */
footer {
	position: relative;
}
footer svg {
	fill:#f7f7f7;
}
.footnote {
	width: 59vw;
}
.footer-container {
	width: 100vw;
	background-color: #272829;
	color: #f7f7f7;
}
.footer-container-text {
	padding-top: 5vh;
	padding-right: 20vw;
	padding-bottom: 5vh;
	padding-left: 20vw;
	text-align: center;
	font-family: 'FuturaBoB', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2rem;
	letter-spacing: 1px;
    word-spacing: 1px;
}
.footer-container-text ul {
	list-style: none;
}
.footer-container-text ul li {
	display: inline-block;
}
.footer-container-text a {
	padding: 0 2vw;
	color: #f7f7f7;
}
.footer-container-text a:hover {
	text-decoration: underline;
}
.footnote {
	padding-top: 2em;
    font-size: 0.75em;
    line-height: 1.25rem;
}

@media all and (max-width:1200px) {

	.about .menu-links,
	.contact .menu-links,
	.shop .menu-links {
		top: 50%;
		margin-top: 134px;
		height: 100%;
		background-color:var(--default-background-color);
	}
	.about .menu-link a,
	.contact .menu-link a,
	.shop .menu-link a {
		color: #272829;
	}
	.about nav .menu-links li a,
	.contact nav .menu-links li a,
	.shop nav .menu-links li a {
		color: #272829;
	}
	.about.mob-menu hr,
	.contact.mob-menu hr,
	.shop.mob-menu hr {
		border: 1px solid #272829;
	}
	.about.mob-menu svg,
	.contact.mob-menu svg,
	.shop.mob-menu svg {
		fill: #272829;
	}
	.about .bar,
	.contact .bar,
	.shop .bar {
		background-color: var(--default-background-color);
	}
	.about input[type="submit" i],
	.contact input[type="submit" i],
	.shop input[type="submit" i] {
		background-color: var(--default-background-color);
		color: #272829;
	}
	.about input[type="text" i],
	.contact input[type="text" i],
	.shop input[type="text" i] {
		color: #272829;
		background-color: var(--default-background-color);
		border-color: #272829;
	}
	.about::placeholder,
	.contact::placeholder,
	.shop::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: #272829;
		opacity: 0.5; /* Firefox */
	}
	.about:-ms-input-placeholder,
	.contact:-ms-input-placeholder,
	.shop:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: #272829;
	}
	.about::-ms-input-placeholder,
	.contact::-ms-input-placeholder,
	.shop::-ms-input-placeholder { /* Microsoft Edge */
		color: #272829;
	}
}

/* SECTION: SEARCH RESULTS */
.search h1 {
    font-family: 'FuturaBoB', sans-serif;
    font-weight: 600;
    padding-bottom:40px;
}
.search-result {
	display:block;
	margin-bottom: 30px;
}
.search-result-title,
.search-result-excerpt,
.search-result-link {
      text-align: left;
}
.search-result-link {
     font-size: 15px;
}
.search a {
      text-decoration: none;
}
.search a:hover .search-result-title {
      text-decoration: underline;
}
.search-results a:hover {
      text-decoration: underline;
}
.search-result-link {
      text-decoration: underline;
}
.search h2 {
    font-family: 'FuturaBoB', sans-serif;
    font-weight: 600;
    margin-bottom: 0px;
}
.search footer {
 /*   
	position: absolute;
    margin-top: 175px;
    bottom: unset; 
	*/
}
.search .about-text,
.contact .about-text,
.shop .about-text {
	margin-top: 50px;
}

/* ANIMATIES */
/* Huidige animaties zijn als volgt ingesteld:

*** FEATURED-INTRO ***
De <div> "featured-intro" staat 4 seconden in beeld. Animatie (naar boven schuiven) vindt in de laatste seconde plaats.
Animatie keyframes zitten op 0, (4/5*100=) 80% en 100% Zie ook comment "#ANIMATIE1".

****** FEATURED-TEXT // BRANDING-SMALL ***
De <div> "featured-intro" staat 5 seconden in beeld. Animatie (naar boven schuiven) vindt in de laatste seconde plaats.
Animatie keyframes zitten op 0, (5/6*100=) 84% en 100% 
Het betreft de classes: .featured-text .coverstory.featured-text .subject.featured-text .title.branding-small;
De naam van de animatie is: "fadeIn";

****/
@keyframes slideUp {
	0% {
		top: 0;
	}
	80% {
		top: 0;
	}
	100% {
		top: -100vh;
	}
}
/* Firefox < 16 */
@-moz-keyframes slideUp {
	0% {
		top: 0;
	}
	80% {
		top: 0;
	}
	100% {
		top: -100vh;
	}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slideUp {
	0% {
		top: 0;
	}
	80% {
		top: 0;
	}
	100% {
		top: -100vh;
	}
}
/* Internet Explorer */
@-ms-keyframes slideUp {
	0% {
		top: 0;
	}
	80% {
		top: 0;
	}
	100% {
		top: -100vh;
	}
}
/* Opera < 12.1 */
@-o-keyframes slideUp {
	0% {
		top: 0;
	}
	80% {
		top: 0;
	}
	100% {
		top: -100vh;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* Firefox < 16 */
@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* Internet Explorer */
@-ms-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* Opera < 12.1 */
@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Mobile menu */
.navbar {
	display:flex;
}
.hamburger{
	display:none;
	cursor:pointer;
}
.bar {
	display:block;
	width: 50px;
	height: 5px;
	margin: 10px auto;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
}
.menu-links .mob-menu {
	display:none;
}
.navbarhide {
	opacity:0;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.navbarshow {
	opacity:1;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* MEDIA QUERIES */
@media only screen and (max-width:1200px) {

	.hamburger{
		display: block;
		position: absolute;
		top: 43px;
		left: 24px;
		z-index: 9999;
	}
	.hamburger.active .bar:nth-child(2) {
		opacity:0;
	}
	.hamburger.active .bar:nth-child(1) {
		transform: translateY(12px) rotate(45deg);
	}
	.hamburger.active .bar:nth-child(3) {
		transform: translateY(-18px) rotate(-45deg);
	}
	nav {
		width: 100vw;
	}
	.menu-links {
		position:fixed;
		left:-100%;
		top:50%;
		margin-top:134px;
		margin-left: 0px;
		width:100%;
		height: 100%;
		text-align: center;
		flex-direction:column;
		gap:0;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.menu-links li {
		margin: 15px 0px;
		display: inline-block;
		list-style: none;
	}
	.menu-links .mob-menu {
		display:inline-block;
	}
	.mob-menu svg {
		width: 50px;
		height: 50px;
	}
	.mob-menu hr {
		width: 50vw;
	}
	.social-icons {
		display:none;
	}
	.menu-link {
		margin:100px 0;
	}
	.menu-links.active {
		left: 50vw;
		width: 100vw;
	}
	.branding-small-article .logo {
		height: 76px;
	}
	nav .menu-links li a {
		font-size: 30px;
	}
	.searchform {
		margin-top: 20px
	}
	input[type="submit" i] {
		margin-right: -4px;
		display: block;
		position: absolute;
		top: 125px;
		right: 8vw;
		font-size: 20px;
		font-family: 'FuturaBoB', sans-serif;
		font-weight: 500;
		letter-spacing: 1px;
		border: none;
		cursor: pointer;
	}
	input[type="text" i] {
		width: 80vw;
		padding: 20px;
		font-family: 'FuturaBoB', sans-serif;
		font-weight: 600;
		font-size: 30px;
		letter-spacing: 2px;
		text-align: center;
		border-width: 0px 0px 2px 0px;
	}
	input:focus, textarea:focus, select:focus{
		outline: none;
	}

}

/* Mobile menu home */
.homepage .navbar {
    background-color: var(--default-background-color);
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
}
.homepage .logo {
	background-color: #272829;
}
.homepage .menu-link a {
	color: #272829;
}
.homepage .social-icons svg {
	fill: #272829;
}
.homepage .hamburger .bar {
	background-color: #272829;
}

@media all and (max-width:1200px) {

	.homepage .menu-links {
		margin-top: 134px;
		top: 50%;
		height: 100%;
		background-color:var(--default-background-color);
	}
	.homepage .menu-link a {
		color: #272829;
	}
	.homepage nav .menu-links li a {
		color: #272829;
	}
	.homepage .mob-menu hr {
		border: 1px solid #272829;
	}
	.homepage .mob-menu svg {
		fill: #272829;
	}
	.homepage .bar {
		background-color: #272829;
	}
	.homepage input[type="submit" i] {
		color: #272829;
		background-color: var(--default-background-color);
	}
	.homepage input[type="text" i] {
		color: #272829;
		background-color: #f0f0f0;
		border-color: #272829;
	}
	.homepage ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: #272829;
		opacity: 0.5; /* Firefox */
	}
	.homepage :-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: #272829;
	}
	.homepage ::-ms-input-placeholder { /* Microsoft Edge */
		color: #272829;
	}
}

/* Masonry on smol screens */
@media only screen and (max-width: 650px) {

	.article-wrapper {
		width: 90vw;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
	.about-wrapper,
	.contact-wrapper,
	.shop-wrapper {
		width: 100%;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
	.featured-bg {
		/* No animation of the featured part on mobile */
		transform: none;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
	.featured-text {
		padding: 0 1em;
	}
	.featured-text p a:hover {
		padding-bottom: 1vw;
	}
	.featured-text .subject {
		font-size: 3.35em;
		line-height: 4rem;
		text-decoration-thickness: 4px;
		text-underline-offset: 4.5px;
	}
	.featured-text .title {
		font-size: 3em;
		line-height: 3rem;
	}
	.featured-intro-text {
		padding: 1em;
		font-size: 2.5rem;
		line-height: 3rem;
	}
	.branding-small-article img {
		width: 60vw;
	}
	.featured-intro .branding-large img {
		width: 60vw;
	}
	.branding-small img {
		width: 60vw;
	}
	.branding-small-article .logo {
		height: 46px;
	}
	.branding-small img {
		width: unset;
		height: 50px;
	}
	.branding-button {
		/* ADD10 */
		bottom: 2em;
		width: 12vw;
		height: 15vw;
		background-size: 10vw;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.masonry,
	.masonry-article {
		-webkit-column-count: 1;
		/* Chrome, Safari, Opera */
		-moz-column-count: 1;
		/* Firefox */
		column-count: 1;
	}
	.masonry-article .brick {
		display: block;
	}
	.morebeards-container {
		margin-bottom: 30px;
		padding-top: 5px;
	}
	.masonry-article .morebeards {
		width: 100%;
		height: calc(90vw - 3em);
	}
	.masonry .brick .overlay {
		line-height: 8vw;
	}
	.masonry .overlay .subject {
		font-size: 6vw;
	}
	.masonry .overlay .title {
		font-size: 6vw;
	}
	.contact h1, .shop h1, .shop h3,
	.stories-container .stories-title h1 {
		margin-top: 0.625rem;
		margin-bottom: 1rem;
		font-size: 3em;
		line-height: 4rem;
		letter-spacing: 0.5px;
		text-decoration-thickness: 3px;
		text-underline-offset: 4px;
	}
	.stories-container .stories-text h2 {
		padding: 0 1em;
	}
	.product-container a.storylink {
		font-size: 1rem;
	}
	div.stories-text .voetnoot {
		font-size: 1.1em;
		line-height: 1.25rem;
	}
	.article-title {
		margin-top: 3em;
	}
	.article-title .article-subject {
		font-size: 3.5em;
		line-height: 3.65rem;
		text-decoration-thickness: 0.3rem;
		text-underline-offset: 0.3rem;
	}
	.article-title .article-quote {
		font-size: 2.65em;
		line-height: 2.5rem;
	}
	.intro {
		margin-top: 1em;
		font-size: 1.45em;
		line-height: 1.9rem;
		letter-spacing: -0.01em;
	}
	.author, .place-time, .reading-time {
		font-size: 1em;
		line-height: 1.35rem;
	}
	.quote {
		font-size: 2em;
		line-height: 1.50em;
	}
	.masonry-article .brick .overlay {
		line-height: 3em;
	}
	.masonry-article .overlay .subject {
		font-size: 28px;
		letter-spacing: 0.01em;
	}
	.masonry-article .overlay .title {
		font-size: 20px;
		line-height: 30px;
	}
	.article-container {
		margin-top: 2.2em;
		font-size: 1.2em;
		line-height: 1.9rem;
    }
	blockquote:before {
		margin-left: -20px;
		font-size: 70px;
	}
	blockquote {
		padding-left: 20px;
	}
	blockquote p {
		font-size: 0.8em;
		line-height: 1.85rem;
	}
	.stories-container .stories-text {
	   margin-top: 0px; 
	}
	.bar {
		width: 30px;
		height: 4px;
		margin: 6px auto;
	}
	.hamburger {
		top: 52px;
	}
	.hamburger.active .bar:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}
	.hamburger.active .bar:nth-child(3) {
		transform: translateY(-11px) rotate(-45deg);
	}
	input[type="submit" i] {
		font-size: 17px;
		margin-right: 0px;
	}
	.interview-title {
		margin-top: 0.5em;
	}
	.search h1 {
		font-size: 16px;
	}
	.search h2 {
		font-size: 16px;
		margin-bottom: 5px;
	}
	.about-text p,
	.contact-text p,
	.shop-text p {
		font-size: 18px;
		line-height: 27px;
	}
	.search-result p {
		font-size: 12px;
		line-height: 18px;
	}

	footer {
		position: unset;
	}
	.footer-container {
		font-size: 0.8em;
	}
	.footer-container-text {
		padding-right: 5vw;
		padding-left: 5vw;
	}
	.footer-container-text ul li a {
	/*	font-size: 1.8em; */
		line-height: 2rem;
	}
	.footnote {
		width: unset;
	}
}

/* Masonry on tablets */
@media only screen and (min-width: 651px) and (max-width: 1023px) {
	.featured-text .title {
		padding-left: 0px;
		padding-right: 0px;
		font-size: 3.5em;
		line-height: 3.5rem;
	}
	.featured-intro-text {
		padding: 20vw;
		font-size: 4em;
		line-height: 4.3rem;
	}
	.featured-intro .branding-large {
		top: 6em;
	}
	.featured-intro .branding-large img {
		width: 33vw;
	}
	.branding-small img {
		width: unset;
		height: 76px;
	}
	.branding-button {
		/* ADD10 */
		bottom: 2em;
		width: 3.5em;
		height: 5em;
		background-size: 3em;
		
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.article-wrapper {
		width: 100%;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
	.stories-container .stories-text h2 {
		font-size: 2.65em;
		line-height: 2.9rem;
	}
	div.stories-text .voetnoot {
		font-size: 1.35em;
		line-height: 1.25rem;
	}
	.masonry,
	.masonry-article {
		-webkit-column-count: 2;
		/* Chrome, Safari, Opera */
		-moz-column-count: 2;
		/* Firefox */
		column-count: 2;
	}
	.masonry-article .brick {
		display: block;
		width: 100%;
	}
	.masonry .brick .overlay {
		line-height: 4vw;
	}
	.interview-title {
		font-size: 1.65rem;
		line-height: 1.75rem;
	}
	.masonry-article .morebeards {
		width: 100%;
		height: 32.8em;
	}
	.overlay .subject {
		font-size: 3vw;
	}
	.overlay .title {
		font-size: 3vw;
	}
}

@media only screen and (min-width: 1024px) {
	
	.contact-container,
	.shop-container,
	.stories-container {
		padding: 4vw;
	}
	.contact-container,
	.shop-container {
		padding: 4vw 0;
	}
	.featured-text {
		padding: 20vw 10vw;
	}
	/* Masonry on big screens */
	.masonry {
		-webkit-column-count: 4;
		/* Chrome, Safari, Opera */
		-moz-column-count: 4;
		/* Firefox */
		column-count: 4;
	}
	.masonry-article {
		-webkit-column-count: 3;
		/* Chrome, Safari, Opera */
		-moz-column-count: 3;
		/* Firefox */
		column-count: 3;
	}
	.contact h2,
	.shop h2,
	.stories-container h2 {
		font-size: 2.65em;
		line-height: 2.9rem;
	}
	.article-photo {
		width: 90vw;
		margin-left: calc(calc(-90vw + 100%) / 2 );
	}
	.article-photo img {
		width: 100%;
	}
	.shop div.wpforms-container-full .wpforms-form label:not(.wpforms-field-label-inline) {
		font-size: 1.125rem;
	}
}
@media only screen and (min-width: 1440px) {
	.featured-text {
		padding: 20vw 15vw;
	}
}
@media only screen and (min-width: 1440px) {
	.featured-text {
		padding: 13vw 26vw;
	}
	.interview-title {
		font-size: 2rem;
		line-height: 2.15rem;
	}
	.article-photo {
		width: 1380px;
		margin-left: calc(calc(-1380px + 100%) / 2 );
	}
}