@charset "utf-8";
/* //////////////////////////////////////// */
/* // STYLE SHEET TEXTILES WEBSITE v1.25 // */
/* /////// CODING BY JRN FOR NB @25 /////// */
/* //////////////////////////////////////// */

/* 
- Chalk Stripe		#f3ebdf
- Red lips			#d6312c
- Tailored Blue		#2f508d
- Grizo Cotton		#fbd896
*/

:root {
	--main-font-family: 'Roboto', sans-serif;
	--main-font-size: 1.65rem;
	--main-txt-color: #333;
	--main-bg-color: #EEE;
	--main-max-width: 1920px;
	--main-cont-width: 1190px;
	--main-small-width: 820px;
	--main-line-height: 1.65;
	
	--extra-font-family: 'Playfair Display', serif;
	
	--color-lgrey:	#F5F5F5;
	--color-mgrey:	#DDD;
	--color-chalk: 	#f3ebdf;
	--color-lchalk: #fbf6ee;
	--color-red:	#d6312c;
	--color-blue:	#2f508d;
	--color-blue-hover: #4570c1;
	--color-cotton:	#fbd896;
	--color-dbrown: #703e28;
	--color-mbrown:	#9b4819;
	--color-lbrown: #bc9346;
		
	--elem-margin: 2rem 0;
	--heading-line-height: 1.1;
		
	--padding-mobile-row-hor: 1rem;
	--padding-mobile-row-vert: 3rem;
	--padding-mobile-col-hor: 3rem;
	--padding-mobile-col-vert: 1rem;
		
	--padding-desktop-row-hor: 2rem;
		
	/*--footer-bg-color: #2f508d;
	--footer-bg-color: #3d260f;
	--footer-bg-color: #2f508d;
	*/
	
	--footer-bg-color: #f3ebdf;
	--footer-txt-color: #333;
}

.swatches{
	position: absolute;
	bottom: 0;
	display: flex;
	right: 0;
}
.swatch{
	width: 25px;
	height: 25px;
}
.swatch.swatch1{
	background-color: var(--color-chalk);
}
.swatch.swatch2{
	background-color: var(--color-red);
}
.swatch.swatch3{
	background-color: var(--color-blue);
}
.swatch.swatch4{
	background-color: var(--color-cotton);
}

body{
	margin: 0;
	min-width: 350px;
	line-height: var(--main-line-height);
	font-family: var(--main-font-family);
	font-size: var(--main-font-size);
	letter-spacing: 0.3px;
	color: var(--main-txt-color);
	background-color: #FFF;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: scroll;
	cursor: default;
}

html{
	box-sizing: border-box;
	font-size: 62.5%;
    height: 100%;	
	background-color: var(--main-bg-color);
}
body, html{
	max-width: var(--main-max-width);
    margin: 0 auto;
}


/* ONLINE SOON */
body.online-soon{
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
}

body.online-soon .page-container{
	background-color: #FFF;
	text-align: center;
	flex: 1;
	align-content: center;
}

body.online-soon .page-container img{
	width: 600px;
	max-width: 80%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* GENERAL */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul, p{
	margin: var(--elem-margin);
}
ul{
	padding: 0 0 0 1.8rem;	
}
h1, h2, h3, h4, h5{
	line-height: var(--heading-line-height);	
	margin: var(--elem-margin);
	position: relative;
}
h1{
	font-size: 2.7rem;
    font-weight: 600;
	color: var(--color-blue);
	/*color: var(--color-dbrown);*/
	font-family: var(--extra-font-family);
}
h1.xl{
    margin-bottom: 5rem;
    font-size: 3.2rem;
	color: var(--color-lbrown);
}
h2{
	font-size: 2.5rem;
    font-family: var(--extra-font-family);
    color: var(--color-blue);
}
h2 a,
h2 em{
	font-style: normal;
	text-decoration: none;
	color: var(--color-lbrown);
	font-weight: 500;
}
h3{
	font-size: 2.3rem;
	color: var(--color-lbrown);
	font-family: var(--extra-font-family);
}
h5{
	font-size: 2.3rem;
    font-weight: 500;
	/*font-style: italic;*/
	color: var(--color-lbrown);
	font-family: var(--extra-font-family);
}
h1 + h2{
	margin-top: -1.4rem;	
}
h1 + h5{
	margin-top: -1.7rem;
	margin-bottom: 3rem;	
}
h3 + p{
	margin-top: -1.2rem;	
}
h5 + h1{
	margin-top: -1.7rem;
	margin-bottom: 3rem;	
}
hr{
	margin: 4rem 0 4rem 0;
	border-width: 1px 0 0 0;
    border-style: solid;
	border-color: var(--color-mbrown);
}
hr.dash{
	border-width: 0;
	background-image: repeating-linear-gradient(to left, transparent, transparent 9px, var(--color-lbrown) 9px, var(--color-lbrown) 18px);
    height: 1px;
	position: relative;
	margin-right: -0.7rem;
}
.scissors-box{
	position: relative;
	clear: both;
}
.scissors-box .material-symbols-outlined{
	position: absolute;
	left: -9px;
	top: 0;
    transform: translateY(-50%);
	color: var(--color-blue);
	font-size: 24px;
	font-weight: 300;
}
a{
	outline: none;
	color: inherit;	
	transition: all .2s ease-in-out;
}

ul.iconlist{
	display: flex;
    list-style: none;
    justify-content: space-around;
    margin-top: 4rem;
	gap: 2rem 0;
}
ul.iconlist li{
	text-align: center;
    line-height: 1.1;
    font-weight: 500;
    color: #a6803a;
    font-family: 'Playfair Display';
    font-size: 1.8rem;
}
.text-align-right{
	text-align: right;	
}
.text-align-center{
	text-align: center;	
}
.smaller{
	max-width: var(--main-small-width);
	margin-left: auto;
	margin-right: auto;	
}

ul.iconlist .icon{
    margin-bottom: 0.2rem;
}
ul.iconlist .icon .material-symbols-outlined{
	color: var(--color-dbrown);
    font-size: 3.2rem;
	font-weight: 300;
}


/* CONTAINERS */
.page-container{
	width: 100%;
	background-color: var(--color-lchalk);	
}
section{
	width: 100%;
	position: relative;	
}
.row{
	width: 100%;
    max-width: var(--main-cont-width);
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.row.wide{
	max-width: unset;
}
.column{
	flex-basis: 100%;
	max-width: 100%;
}
.row-extra{
	flex-basis: 100%;
    display: flex;
    margin-top: -4rem;
	flex-wrap: wrap;	
}

.column.col-fullimg{
	display: flex;
}
	.column.col-fullimg .column-content{
		flex: 1;
		display: flex;
		padding: 3.6rem 3rem 2rem 3rem;
	}
		.column.col-fullimg .column-content .fullimg-container{
			background-color: var(--color-mgrey);
			flex: 1;
		}

.column-content img{
	width: 100%;
	display: block;
	height: auto;	
}

/* PADDINGS AND MARGINS */
	/* horizontal  */
.row {
    padding-left: var(--padding-mobile-row-hor);
    padding-right: var(--padding-mobile-row-hor);
}
.column-content {
    padding-left: var(--padding-mobile-col-hor);
    padding-right: var(--padding-mobile-col-hor);
}
	/* vertical */
.row {
    padding-top: var(--padding-mobile-row-vert);
    padding-bottom: var(--padding-mobile-row-vert);
}
.column-content {
    padding-top: var(--padding-mobile-col-vert);
    padding-bottom: var(--padding-mobile-col-vert);
}

/* COLORING */
.general-col{
	background-color: #FFF;
}
.general-col .row{
	background-color: var(--color-lgrey);
	/*background-color: var(--color-chalk);*/
}
.pattern-media-col{
	background-color: var(--color-chalk);
}

section.pattern-media-col .column.col-1 .column-content{
	background-color: var(--color-mgrey);
	padding: 0;
}
	
/* HEADER */
.main-header{
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: var(--color-mgrey);	
	background-color: #FFF;
	position: sticky;
	top: 0;
	z-index: 100;
}
	.main-header .row{
		padding-top: 0;
		padding-bottom: 0;	
		align-items: center;
		column-gap: 2rem;
	}
	.main-header a{
		text-decoration: none;	
	}
/* header columns */
.main-header .column{
	flex-basis: unset;
	max-width: unset;
	display: flex;
	flex: 0;
	white-space: nowrap;
}
.main-header .column.main-header--logo{
	padding-top: 0.8rem;
    padding-bottom: 0.1rem;
}
	/* logo */
	.main-header .column.main-header--logo a{
		display: block;	
	}
		.main-header .column.main-header--logo img{
			width: 160px;
			height: auto;
			display: block;
			margin-bottom: -0.9rem;
			filter: drop-shadow(0px 0px 3px white);
		}
.main-header .column.main-header--nav{
	flex: 1;
}
.main-header .column.main-header--lang{
	flex-basis: 40px;
	max-width: 40px;
	position: relative;
	z-index: 100;
}
.main-header .column.main-header--noot{
	align-self: flex-start;
	display: none;
}
.main-header .column.main-header--social{
	padding-top: 0.3rem;
   	padding-bottom: 0.3rem;
	display: none;
}

	/* lang select */
	.lang-select{
		list-style: none;
		padding: 4px 6px;
		margin: 0;
		position: absolute;
		top: -16px;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
	}
		.lang-select::after{
			width: 12px;
			height: 100%;
			content: '';
			position: absolute;
			top: 0;
			right: -10px;
			background-image: url(/images/icons/angle-down.svg);
			background-repeat: no-repeat;
			background-position: 0px 11px;
			background-size: 10px;	
		}
		.lang-select li{
			display: none;
			margin-top: 2px;
		}
	.lang-select li.active{
		display: block;	
		margin-top: 0;
		order: -1;
		display: block;
	}
	.lang-select li.active a{
		
	}
	.lang-select li a{
		padding: 2px 0;
		display: block;
	}
	.lang-select li a img{
		width: 30px;
		height: auto;
		display: block;	
		-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,.25);
		-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,.25);
		box-shadow: 1px 1px 2px #00000040;
	}
	.lang-select:hover li{
		display: block;	
	}
	
	/* menu toggle */
	.menu-toggle{
		cursor: pointer;	
	}
	.menu-toggle--bars{
		width: 50px;
		height: 50px;
		position: relative;
		margin-right: -1rem;
		z-index: 250;
	}
		.menu-toggle--bars span{
			width: 50%;
			height: 3px;
			background-color: var(--color-blue);
			position: absolute;
			left: 25%;
			top: 50%;
		}
			.menu-toggle--bars span:nth-child(1), 
			.menu-toggle--bars span:nth-child(2) {
				margin-top: -2px;
				-webkit-transition: 0.5s cubic-bezier(.77, 0, .175, 1);
				-o-transition: 0.5s cubic-bezier(.77, 0, .175, 1);
				transition: 0.5s cubic-bezier(.77, 0, .175, 1);
				-webkit-transition-delay: 0s;
				-o-transition-delay: 0s;
				transition-delay: 0s;
			}
			.menu-toggle--bars span:nth-child(3) {
				margin-top: -9px;
				opacity: 1;
				-webkit-transition: 0.3s ease-in;
				-o-transition: 0.3s ease-in;
				transition: 0.3s ease-in;
				-webkit-transition-delay: 0.3s;
				-o-transition-delay: 0.3s;
				transition-delay: 0.3s;
			}
			.menu-toggle--bars span:nth-child(4) {
				margin-top: 5px;
				opacity: 1;
				-webkit-transition: 0.3s ease-in;
				-o-transition: 0.3s ease-in;
				transition: 0.3s ease-in;
				-webkit-transition-delay: 0.3s;
				-o-transition-delay: 0.3s;
				transition-delay: 0.3s;
			}
				.menu-open .menu-toggle--bars span:nth-child(1) {
					-webkit-transform: rotate(225deg);
					-ms-transform: rotate(225deg);
					transform: rotate(225deg);
					-webkit-transition-delay: 0.3s;
					-o-transition-delay: 0.3s;
					transition-delay: 0.3s;
				}
				.menu-open .menu-toggle--bars span:nth-child(2) {
					-webkit-transform: rotate(135deg);
					-ms-transform: rotate(135deg);
					transform: rotate(135deg);
					-webkit-transition-delay: 0.3s;
					-o-transition-delay: 0.3s;
					transition-delay: 0.3s;
				}
				.menu-open .menu-toggle--bars span:nth-child(3) {
					margin-top: -2px;
					opacity: 0;
					-webkit-transition-delay: 0s;
					-o-transition-delay: 0s;
					transition-delay: 0s;
				}
				.menu-open .menu-toggle--bars span:nth-child(4) {
					margin-top: -2px;
					opacity: 0;
					-webkit-transition-delay: 0s;
					-o-transition-delay: 0s;
					transition-delay: 0s;
				}
	
	/* part of nooteboom */
	.part-of-nooteboom{
		color: #003e22;
		text-transform: uppercase;
		display: flex;
		font-weight: 700;
		line-height: 1.05;
		font-size: 1.1rem;
		letter-spacing: 0.15rem;
		align-items: center;
		margin-left: 12px;
		margin-bottom: 7px;
	}
	.main-header--noot .part-of-nooteboom{
		filter: grayscale(1);
		opacity: 0.3;
	}
		.part-of-nooteboom-left{
			text-align: right;
			padding: 0.3rem 0.6rem 0 0;
		}
			.part-of-nooteboom-right img{
				width: 125px;
				height: auto;
				display: block;
			}
	
/* MAIN BANNER */
.main-banner{
	background-color: var(--color-mgrey);
}
	.banner-list{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.banner-list .banner-list-item{
		padding: 0;
		margin: 0;
	}
	.banner-list-item .list-item-content{
		position: relative;
	}	
	.banner-list-item .list-item-image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.banner-list-item .list-item-image img{
		width: 100%;
		height: 100%;
		display: block;	
		object-fit: cover;
	}
	.list-item-image.img-top img{
		object-position: top;	
	}
	.list-item-overlay{
		display: none;	
	}

/* banner sizes */	
.main-banner .list-item-content{
	aspect-ratio: 3;
}
.main-banner.banner-size-2 .list-item-content{
	aspect-ratio: 1.3;
}
.main-banner.banner-size-3 .list-item-content{
	aspect-ratio: 1.7;
}

/* FABRIC CIRCLES */
ul.fabric-circles{
	list-style: none;
	padding: 0;
	margin: 2rem -1.5rem;	
	display: flex;
    flex-wrap: wrap;
}

ul.fabric-circles li{
	width: 50%;
	padding: 1.5rem;
}
ul.fabric-circles li:last-child{
	display: none;
}

ul.fabric-circles li .fabric-circle{
	display: block;	
	aspect-ratio: 1;
	position: relative;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-dbrown);
	border-radius: 50%;
    overflow: hidden;
	cursor: default;
}
	ul.fabric-circles li img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		transition: all .2s;
	}
	ul.fabric-circles li .fabric-circle:hover img{
		transform: scale(1.07);
		-ms-transform: scale(1.07);
		-webkit-transform: scale(1.07);
	}

/* ADDRESS LIST */
ul.addrlist{
	list-style: none;
    padding: 0;
    display: inline-block;
    margin: 1rem 0;
	color: var(--color-blue);
}
ul.addrlist li{
	border-bottom: 1px solid var(--color-mgrey);
	padding: 2px 12px 2px 2px;
}
ul.addrlist li:last-child{
	border-bottom: 0;
}
/* SQUARES */
ul.collection-squares, 
ul.insta-squares {
    list-style: none;
    padding: 0;
    margin: 4rem -0.5rem;
    display: flex;
    flex-wrap: wrap;
}
ul.collection-squares li, 
ul.insta-squares li {
    width: 100%;
    padding: 0.5rem;
}
ul.collection-squares li .collection-square, 
ul.insta-squares li .insta-square {
    display: block;
    aspect-ratio: 1;
    position: relative;
	background-color: var(--color-mgrey);
}
ul.collection-squares li .collection-square img, 
ul.insta-squares li .insta-square img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* FAQ */
ul.faq-list{
	list-style: none;
	padding: 0;
}
li.faq-item{
	padding: 2rem 0;
	break-inside: avoid;
}
.faq-question h3{
	margin: 0;	
	color: var(--color-lbrown);
    font-weight: 500;
	font-size: 1.8rem;
}
.faq-answer p{
	margin: 0.3rem 0 0 0;
    line-height: 1.4;
}

/* BUTTONS */
.label-button{
	min-width: 160px;
	display: inline-block;
    text-decoration: none;
    padding: 1rem 3rem 1.1rem 3rem;
    line-height: 1.1;
    font-weight: 400;
    font-size: 1.7rem;
	position: relative;
}
.label-button.button-blue{
	background-color: var(--color-blue);
    color: #FFF;
}
.label-button.button-blue:hover{
	background-color: var(--color-blue-hover);
}
.label-button.button-red{
	background-color: var(--color-red);
    color: #FFF;
}
.label-button.label-left{
	margin-left: 6px;	
}
.label-button.label-right{
	margin-right: 6px;	
}
.label-button.label-left::before,
.label-button.label-right::after{
	content: '';
    width: 6px;
    height: 100%;
    background-color: inherit;
    position: absolute;
    top: 0; 
}
	.label-button.label-left::before{
		left: -6px;
		-webkit-mask: url('/images/triangle-l.svg') repeat-y right top;
		mask: url('/images/triangle-l.svg') repeat-y right top;
	}
	.label-button.label-right::after{
		right: -6px;
		-webkit-mask: url('/images/triangle-r.svg') repeat-y left top;
		mask: url('/images/triangle-r.svg') repeat-y left top;
	}

/* SOCIALS */
footer a.social{
	display: inline-flex;
    width: 42px;
    aspect-ratio: 1;
    border: 2px solid var(--color-blue);
    border-radius: 50%;
    padding: 7px;
    margin: 0 2px 4px 2px;
	opacity: 0.8;
}
footer a.social:hover{
	opacity: 1;
}


/* FOOTER */
footer{
	position: relative;
	background-color: var(--footer-bg-color);	
	color: var(--footer-txt-color);
	border-top: 8px solid #FFF;
}
.footer-main .row{
    padding-top: 6rem;
}
.footer-main .column.col-2,
.footer-main .column.col-3{
	padding-top: 69px;
}
.footer-main .column.col-3{
	text-align: center;	
}

.footer-main .column.col-3 h2{
	margin: -2rem 0 -0.7rem 0;
    color: var(--color-blue);
    opacity: 0.8;
    font-size: 20px;
    font-weight: 500;	
}

.footer-main .column ul.menu{
    column-count: 2;
    line-height: 32px;
    margin-top: -4px;
}

.footer-main .column ul.menu li a{
	display: inline-block;
	position: relative;	
	text-decoration: none;
}
	
	.footer-main .column ul.menu li a:hover{
		color: var(--color-red);
	}
.footer-main .column ul.menu li.active a::after {
    content: '';
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    position: absolute;
	background-color: var(--color-red);
}
.footer-main .part-of-nooteboom{
    color: #FFF;
    position: absolute;
    left: 0;
    bottom: -1rem;
	opacity: 0.85;
}
.footer-main .footer-logo{
	width: 180px;
    height: auto;
    display: block;
    position: absolute;
    left: -3rem;
    bottom: -0.5rem;
}
footer a{
	text-decoration: none;
}
footer a:hover{
	text-decoration: underline;
}

.footer-end .column-content{
	opacity: 0.6;
	font-size: 1.3rem;
}
.footer-end .row::before{
    content: '';
    height: 1px;
    background-color: #FFF;
    position: absolute;
    left: 4rem;
    right: 4rem;
    top: 0;
}


/* NAVIGATION */
.footer-main ul.menu,
.main-header nav ul.menu{
    list-style: none;
    padding: 0;
    margin: 0;
	
}
.main-header nav ul.menu{
	font-size: 1.7rem;
}
@media screen and (max-width: 799px){
	/* NAV MAIN */
	.navigation--main{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		position: fixed;
		z-index: 200;
		top: 0;
		left: 100%;
		margin: 0;
		padding: 0;
		background-color: rgba(173, 124, 87, 0);
		overflow: hidden;
		-webkit-transition: .5s cubic-bezier(.86, 0, .07, 1);
		-o-transition: .5s cubic-bezier(.86, 0, .07, 1);
		transition: .5s cubic-bezier(.86, 0, .07, 1);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	.navigation--main nav{
		width: 90%;
		height: 100%;
		position: relative;
		left: 10%;
		background-color: rgba(255,255,255,0.55);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.navigation--main nav > ul.menu{
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.navigation--main nav > ul.menu li{
	}
	.navigation--main nav > ul.menu li a{
		display: inline-block;
		font-size: 3rem;
		font-weight: 500;
		padding: 0rem;
		position: relative;
		color: var(--color-blue);;
	}
	.navigation--main nav > ul.menu li a::after{
		content: '';
		height: 1px;
		left: 0rem;
		right: 0rem;
		bottom: 0.5rem;
		position: absolute;
		background-color: transparent;
	}
	.navigation--main nav > ul.menu li.menu-item.active a::after{
		background-color: var(--color-red);
	}
	
	.menu-open .navigation--main{
		background-color: var(--color-mgrey);
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition-delay: 0s;
		-o-transition-delay: 0s;
		transition-delay: 0s;
	}
}
@media screen and (min-width: 800px){
		.navigation--main,
		.navigation--main nav,
		.navigation--main nav ul.menu{
			display: flex;
			flex: 1;
			justify-content: center;
		}
		.navigation--main nav{
			max-width: 750px;
		}
			.navigation--main nav ul.menu{
				justify-content: space-evenly;
			}
				.navigation--main nav ul.menu li{
				}
					.navigation--main nav ul.menu li a{
						display: block;
						padding: 1rem 1rem;
						position: relative;
					}
						.navigation--main nav ul.menu li a::after{
							content: '';
							height: 1px;
							left: 1rem;
							right: 1rem;
							bottom: 0.5rem;
							position: absolute;
							background-color: #FFF;
						}
						.navigation--main nav ul.menu li.active a{
							/*font-weight: 500;*/
							color: var(--color-blue);
						}
						.navigation--main nav ul.menu li.active a::after{
							background-color: var(--color-red);
							
						}
						.navigation--main nav ul.menu li a:hover{
							color: var(--color-red);
						}
	
	.main-header .column.main-header--menutoggle{
		display: none;
	}
}
/* RESPONSIVE */
@media screen and (min-width: 800px){
	.row {
		padding-left: var(--padding-desktop-row-hor);
		padding-right: var(--padding-desktop-row-hor);
	}
	.column{
		flex: 1;	
	}
	.main-header .column.main-header--logo img{
		width: 180px;
	}
	ul.faq-list{
		gap: 3rem;
		column-count: 2;
	}
	/* banner sizes */	
	.main-banner .list-item-content{
		aspect-ratio: 3;
	}
	.main-banner.banner-size-2 .list-item-content{
		aspect-ratio: 2.8;
	}
	.main-banner.banner-size-3 .list-item-content{
		aspect-ratio: 4;
	}
	section.pattern-media-col .column.col-1 {
        flex-basis: 33.3%;
        max-width: 33.3%;
        position: relative;
    }
	section.pattern-media-col .column.col-1 .column-content{
        position: absolute;
        top: -3rem;
        bottom: -3rem;
        left: -2rem;
        right: 1rem;
        margin: 0;
    }
	section.pattern-media-col .column.col-1 .column-content img{
		width: 100%;
		height: 100%;
		object-fit: cover;	
	}
	ul.fabric-circles li{
		width: 20%;
	}
	ul.fabric-circles li:last-child{
		display: unset;
	}
	ul.collection-squares li, 
	ul.insta-squares li{
        width: 33.33%;
    }
	.footer-main .column.col-3{
		flex: 0;
        white-space: nowrap;
	}
	p.double{
		column-count: 2;
		column-gap: 6rem;	
	}
	.footer-main .part-of-nooteboom {
        left: unset;
        right: 0;
    }
	.footer-end .row::before {
        left: 5rem;
        right: 5rem;
    }
}

@media screen and (min-width: 940px) {
    .row.wide {
        padding-left: 2.2rem;
        padding-right: 2.2rem;
    }
}
@media screen and (min-width: 1100px) {
    .row.wide {
        padding-left: 3rem;
        padding-right: 3rem;
    }
	.main-header .column.main-header--noot{
		display: flex;
	}
}
@media screen and (min-width: 1300px) {
    .row.wide {
        padding-left: 5%;
        padding-right: 5%;
        column-gap: 3%;
    }
}







