@charset "UTF-8";

@font-face {	font-family: Akkreg;
				src: url("../fonts/Akkreg.woff") format("woff");
}

@font-face {	font-family: Akkreg;
				src: url("../fonts/Akkbol.woff") format("woff");
				font-weight: bold;
}

@font-face {	font-family: Akkreg;
				src: url("../fonts/Akkita.woff") format("woff");
				font-style: italic;
}

*, *:before, *:after {
  	box-sizing: border-box;
}

html {
	height: 100%;
	overflow-y: scroll;
}

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: Akkreg, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 1.5;
}

img {
	max-width: 100%;
    height: auto;
	display: block;
}

.iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
	width: 100%;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border: 0px;
}

::-moz-selection {
	/*color: white;*/
	background: #d9f7fc;
}

::selection {
  	/*color: white;*/
	background: #d9f7fc;
}

a, a:visited, a:active {
	color: inherit;
	text-decoration: none;
}

a:focus { 
    outline: none; 
}

a:hover {
	text-decoration: underline;
}

p {
	margin-top: -3px;
}


h1 {
	margin-top: -8px;
	margin-left: -4px;
	margin-bottom: 0;
	display: inline-block;
	font-size: 2.8em;
	font-weight: normal;
	letter-spacing: -1.3px;
	line-height: normal;
}

h2 {
	margin-top: 1.15em;
	word-wrap: break-word;
	line-height: normal;
}

h3 {
	width: 90%;
	margin: auto;
	text-align: center;
	font-size: 2.8em;
	font-weight: normal;
	letter-spacing: -1.3px;
	line-height: normal;
	word-wrap: break-word;
}

#content {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
	flex: 1 0 auto;
}

.grid {
	width: 95%;
	margin: 0 auto;
	overflow: auto;
	display: flex;
  	justify-content: center;
	flex-wrap: wrap;
}

.italic {
	font-style: italic;
}

.line-height {
	line-height: 1.5em;
}

.space05-bottom {
	padding-bottom: 45px;
}

.space1-top {
	padding-top: 90px;
}

.space1 {
	padding: 90px 0 90px 0;
}

.space1-bottom {
	padding-bottom: 90px;
}

.space2-top {
	padding-top: 180px;
}

.menu, .footer {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu {
	height: 145px;
	padding-bottom: 50px;
}

#breen-full img {
	min-width: 100px;
	height: 25px;
}

#about, #shop {
	line-height: 0.5em;
	margin-bottom: 0;
}

.language {
	width: 1050px;
	height: auto;
	margin: 5px 15px 0px 0px;
	font-size: 70%;
	text-align: right;
}

.intro-container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	container-type: inline-size;
}

.case-title h1 {
	display: block;
	margin-top: -3px;
	margin-left: -4px;
	margin-bottom: 0;
	margin-right: 0;
	max-width: 100%;
	font-size: 8.14cqi;
	font-weight: bold;
	line-height: 0.95;
	letter-spacing: -2px;
}

.page-index .index-nav h1 {
	display: block;
	margin: 0;
	max-width: 100%;
	font-weight: bold;
	line-height: 0.95;
	letter-spacing: -2px;
	white-space: nowrap;
}

.case-title.block3 h1 {
	white-space: nowrap;
}

.detail {
	min-height: 330px;
	padding: 0 20px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #fafcd9;
}

.collage-container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.collage-links {
	width: 50%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.collage-rechts {
	width: 50%;
	margin-left: auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-end;
}

.block1 {
	width: 330px;
    height: auto;
    margin: 15px;
}

.block2 {
	width: 690px;
	height: auto;
	margin: 15px;
}

.block3 {
	width: 1050px;
	height: auto;
	margin: 15px;
}

.c-block1 {
	width: 41.6%;
	height: auto;
	margin-top: -10vw;
}

.c-block-klein {
	width: 21.6%;
	height: auto;
	margin-top: -23vw;
}

.c-block2 {
	width: 43.5%;
	height: auto;
	margin-top: -10vw;
}

.links1 {
	margin-left: 15%;
}

.links2 {
	margin-left: 33.5%;
}

.links3 {
	margin-left: 39.6%;
}

.rechts {
	justify-content: flex-end;
}

.rechts1 {
	margin-right: 15%;
}

.rechts2 {
	margin-right: 33.5%;
}

.rechts3 {
	margin-right: 39.6%;
}

.zindex {
	z-index: -100;
}

.bg1 {
	width: 41.6%;
	height: auto;
	z-index: -50;
}

.bg2 {
	width: 87%;
	height: auto;
	z-index: -50;
}

.bg3 {
	max-width: 66.2%;
	height: auto;
	z-index: -50;
}

.bg-color-grey {
	background-color: #F4F4F4;
}

.bg-color-lightgrey {
	background-color: #f7f7f7;
}

.bg-color-green {
	background-color: #e2fcd9;
}

.bg-color-buoy {
	background-color: #ff603b;
}

.bg-color-fullian {
	background-color: #83c7dc;
}

.bg-color-nl {
	background-color: #26377f;
}

.bg-color-soleda {
	background-color: #70b27f;
}

.bg-color-kris {
	background-color: #f8f8e8;
}

.bg-color-kris-red {
	background-color: #db4320;
}

.bg-color-kris-green {
	background-color: #2da28a;
}

.bg-color-brouwhuys-blue {
	background-color: #4686BC;
}

.bg-color-brouwhuys-red {
	background-color: #d55562;
}

.bg-color-brouwhuys-yellow {
	background-color: #f5cf3f;
}

.bg-color-nest {
	background-color: #a3ead6;
}

.bg-color-parkschool {
	background-color: #00ffb3;
}

.bg2-interactive {
	width: 87%;
	height: auto;
}

.full-block {
	width: 100%;
	height: auto;
}

.full-img {
	width: 100%;
    max-height: auto;
}

.titel-space {
	padding-top: 65px;
	padding-bottom: 15px;
}

/* ---- I N T R O  H E A D E R ----*/

.intro-header {
	display: flex;
	align-items: flex-start;
}

.intro-photo {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-right: 30px;
}

.intro-tagline {
	max-width: 500px;
	margin: 5px 0 0;
	font-size: 0.9em;
}

.intro-links {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 15px;
}

.intro-links .socmed {
	display: flex;
	align-items: center;
}

.about-link {
	display: inline-block;
	margin-top: 15px;
	font-size: 75%;
}

/* Social links — matches about-now-title */
.social-link {
	font-size: 70%;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- S I T E  T O P  B A R (index + about) ---- */

.site-top-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 30px;
	align-items: start;
	width: 100%;
	margin-top: 15px;
	box-sizing: border-box;
	position: relative;
}

.site-top-photo {
	min-width: 0;
}

.site-top-photo a {
	display: block;
}

.site-photo {
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	margin: 0;
}

.page-about .site-top-photo a,
.page-case .site-top-photo a {
	display: inline-block;
	vertical-align: top;
	line-height: 0;
	position: relative;
	z-index: 1;
}

.page-about .site-photo,
.page-case .site-photo {
	width: 1em;
	height: 1em;
	transform-origin: top left;
	transition: transform 0.25s ease;
}

.page-about .site-top-photo a:hover,
.page-case .site-top-photo a:hover,
.page-about .site-top-photo a:focus-visible,
.page-case .site-top-photo a:focus-visible {
	z-index: 1001;
}

.page-about .site-top-photo a:hover .site-photo,
.page-case .site-top-photo a:hover .site-photo,
.page-about .site-top-photo a:focus-visible .site-photo,
.page-case .site-top-photo a:focus-visible .site-photo {
	transform: scale(calc(72px / 1em));
}

.site-top-social {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	min-width: 0;
	grid-column: 2;
}

.site-top-social .social-link,
.site-top-nav .site-nav-link {
	line-height: 1;
}

.site-top-social .social-link {
	flex-shrink: 0;
	white-space: nowrap;
}

.site-top-nav {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	min-width: 0;
	grid-column: 3;
}

.site-nav-link {
	font-size: 75%;
	font-weight: normal;
	text-decoration: underline;
	text-underline-offset: 3px;
	flex-shrink: 0;
}

.site-nav-link:hover {
	text-decoration: underline;
}

@media screen and (min-width: 1137px) {
	.site-top-row .site-social-nostr {
		position: absolute;
		left: calc((100% - 60px) / 3);
		top: 0;
		transform: translateX(-100%);
		z-index: 2;
	}
}

/* ---- I N D E X  H E R O ---- */

.page-index #content {
	padding-top: 0;
}

.page-index .grid {
	overflow: visible;
}

.page-index .index-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	overflow: visible;
}

.page-about .about-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	overflow: visible;
}

.page-case .site-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	overflow: visible;
}

.page-index .index-hero-body {
	width: 100%;
}

.page-index .index-nav {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	margin-bottom: 55px;
	position: relative;
	container-type: inline-size;
}

@media screen and (min-width: 773px) {
	.page-index .index-hero-body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 55px;
	}

	.page-index .index-intro {
		width: 330px;
		max-width: 100%;
		text-align: left;
	}

	.page-index .index-nav {
		width: 690px;
		max-width: 100%;
		margin-top: 40px;
		margin-bottom: 55px;
		justify-content: flex-start;
	}

	.page-index .index-nav h1 {
		font-size: 12.39cqi;
		text-align: left;
		width: 100%;
	}

	.page-index .index-section-label {
		margin-top: 0;
	}
}

@media screen and (min-width: 1137px) {
	.page-index .index-hero-body {
		flex-direction: row;
		align-items: flex-start;
		column-gap: 30px;
		margin-top: 55px;
		margin-bottom: 55px;
	}

	.page-index .index-intro {
		flex: 0 0 330px;
		margin-top: 0;
	}

	.page-index .index-nav {
		flex: 0 0 690px;
		margin-top: 0;
		margin-bottom: 0;
		justify-content: flex-end;
	}

	.page-index .index-nav h1 {
		text-align: right;
	}

}

.page-index .index-nav h1 {
	flex: none;
	min-width: 0;
}

.page-index .index-hamburger {
	display: none;
	background: none;
	border: none;
	padding: 10px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
}

.page-index .index-hamburger-line {
	display: block;
	width: 24px;
	height: 2px;
	background-color: #000;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.page-index .index-nav-menu {
	display: none;
}

.page-index .index-intro {
	padding-top: 12px;
}

.page-index .index-intro p {
	margin: 0;
	text-align: left;
}

.page-index .index-section-label {
	margin-bottom: 0;
}

.page-index .index-section-label ~ .index-section-label {
	margin-top: 45px;
}

.page-index .index-section-label h2 {
	margin: 0;
	font-size: 1em;
	font-weight: bold;
	line-height: 1;
}

/* Width matches one tile row per breakpoint so the label
   aligns with the left edge of the centered grid tiles */
.section-label {
	width: 330px;
	max-width: 100%;
	margin: 15px 15px 0;
	font-size: 75%;
}

.info {
	font-size: 75%;
	line-height: 150%;
}

.textbold {
	font-weight: bold;
	/*font-size: 70%;			VOOR KLEIN KAPITALEN
	letter-spacing: 1.5px;*/
}

.c-text {
	width: 330px;
    height: auto;
	margin: auto;
}

.cta-block3 {
	width: 1050px;
	min-height: 330px;
	display: flex;
	align-items: center;
	text-align: center;
}

.line-through {
	text-decoration: line-through;
}

.case {
	font-size: 1.5em;
	word-wrap: break-word;
}

.category {
	font-size: 75%;
	line-height: normal;
}

.cutoff img {
	margin-top: -15px;
}

.tel-no {
	display: flex;
	align-items: flex-end;
}

.whatsapp-logo {
	margin-left: 15px;
}

.socmed-container {
	height: 30px;
	margin-top: 30px;
	display: flex;
	gap: 20px;
}

.trust-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 45px;
}

.trust-row img {
	height: 40px;
	width: auto;
}

.timeline p {
	margin-bottom: 12px;
}

.socmed .whatsapp, .socmed .linkedin, .socmed .behance, .socmed .twitter, .socmed .nostr, .socmed .github {
	transition: all .2s;
}
	
	.socmed svg:hover .whatsapp {
		fill: #25D366;
	}

	.socmed svg:hover .instagram {
		fill: #E1306C;
	}
	
	.socmed svg:hover .behance {
		fill: #1769ff;
	}
	
	.socmed svg:hover .twitter {
		fill: #1da1f2;
	}
	
	.socmed svg:hover .nostr {
		fill: #8e30eb;
	}
	
	.socmed svg:hover .github {
		fill: #6e40c9;
	}
	
	.socmed svg:hover .linkedin {
		fill: #0a66c2;
	}

/* ---- S L I D E S H O W ----*/

.slider-container {
	width: 1050px;
	min-height: 390px;
	margin: 75px 15px 15px 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image {
  	width: 100%;
  	height: auto;
	text-align: center;
	display: flex;
	flex: 1;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.radio, #play1 {
  display: none;
}

.images {
  	overflow: hidden;
  	top: 0;
 	bottom: 0;
  	left: 0;
  	right: 0;
  	width: 100%;
}

.images-inner {
  	width: 500%;
  	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.image-slide {
  	width: 20%;
  	float: left;
}

.image-slide, .fake-radio, .radio-btn {
  transition: all 0.5s ease-out;
}

.hero-video {
  width: 100%;
  max-width: 2100px;
  height: auto;
  display: block;
  margin: 0 auto;
  background-color: #ff603b;
}

.block1 video {
  width: 100%;
  height: auto;
  display: block;
}

/* Breen lifestyle slideshow — hard-cut switch, 1s per image */
.breen-lifestyle-anim {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.breen-lifestyle-anim img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: breen-lifestyle 6s step-end infinite;
}

.breen-lifestyle-anim img:nth-child(1) { animation-delay: 0s; }
.breen-lifestyle-anim img:nth-child(2) { animation-delay: -1s; }
.breen-lifestyle-anim img:nth-child(3) { animation-delay: -2s; }
.breen-lifestyle-anim img:nth-child(4) { animation-delay: -3s; }
.breen-lifestyle-anim img:nth-child(5) { animation-delay: -4s; }
.breen-lifestyle-anim img:nth-child(6) { animation-delay: -5s; }

.breen-lifestyle-anim img[src*="arsenal-wall-art"] { object-position: center center; }
.breen-lifestyle-anim img[src*="black-metal-poster_lifestyle"] { object-position: center 30%; }
.breen-lifestyle-anim img[src*="batman-logo-evolution-poster-room"] { object-position: center 30%; }
.breen-lifestyle-anim img[src*="star-wars-symbols-poster-breen-fan"] { object-position: center 30%; }
.breen-lifestyle-anim img[src*="world-cup-poster-breen-main"] { object-position: center 25%; }
.breen-lifestyle-anim img[src*="bitcoin-currency-poster-breen-office"] { object-position: center center; }

@keyframes breen-lifestyle {
	0%, 16.66% { opacity: 1; }
	16.67%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.breen-lifestyle-anim img { animation: none; opacity: 0; }
	.breen-lifestyle-anim img:first-child { opacity: 1; }
}


.testimonial-photo {
	width: 165px;
}

.review-photo {
	width: 50%;
}

/* Move slides overflowed container */
#slide1:checked ~ .images .images-inner {
  margin-left: 0;
}
#slide2:checked ~ .images .images-inner {
  margin-left: -100%;
}
#slide3:checked ~ .images .images-inner {
  margin-left: -200%;
}

/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {
  0%, 25.2%	{ margin-left: 0; }
  33.3%, 58.5%	{ margin-left: -100%; }
  66.6%, 91.8%	{ margin-left: -200%; }
}


.st-slider > #play1:checked ~ .images .images-inner {
  animation: slide 25300ms infinite;	
}
/* Calculate AUTOPLAY for SLIDES - END */

.quote {
	font-size: 1.5em;
	font-weight: normal;
	font-style: italic;
	line-height: normal;
	margin: 2rem 0 2rem;
}

/* ---- C O N T A C T F O R M ----*
See old CSS dec 2023
/


/* ---- F O O T E R ----*/

.footer-container {
	flex-shrink: 0;
	width: 95%;
	margin: 90px auto 0;
	overflow: auto;
	display: flex;
}

.footer {
	height: 200px;
	align-items: center;
	margin-top: auto;
}

#breen-kort {
	display: flex;
	justify-content: center;
	flex-shrink: 2;
}

#breen-kort img {
	min-width: 25px;
	height: 25px;
	margin: auto;
}

.footer-links {
	word-break: break-all;
}

#arrow-left {
	display: flex;
	justify-content: flex-start;
}

#arrow-left img {
	width: 25px;
	height: 25px;
}

.footer-rechts {
	text-align: right;
}

#arrow-right {
	display: flex;
	justify-content: flex-end;
}

#arrow-right img {
	width: 25px;
	height: 25px;
}

@media screen and (max-width: 480px) {
	h1, h3 {
		font-size: 2.2em;
	}
	
	h2 {
		font-size: 1.2em;
	}
	
	.menu {
		height: 115px;
	}
	
	.block1, .block2, .block3 {
		max-width: 100%;
    	height: auto;
	}
	
	.titel-space {
		padding-top: 30px;
	}
	
	.intro-photo {
		width: 65px;
		height: 65px;
		margin-right: 20px;
	}

	.case {
		font-size: 1.2em;
	}
	
	.c-text {
		max-width: 85%;
	}
	
	.footer-container {
		margin: 30px auto 0;
	}
}

@media screen and (max-width: 772px) {
	.menu {
		margin-top: -25px;
		padding-bottom: 0px;
	}
	
	.space1-top {
		padding-top: 45px;
	}

	.space1 {
		padding: 45px 0 45px 0;
	}

	.space1-bottom {
		padding-bottom: 45px;
	}
	
	.space-on-resize {
		padding-top: 45px;
	}
	
	.space-on-resize2 {
		padding-top: 90px;
	}
	
	.space2-top {
		padding-top: 90px;
	}
	
	.collage-links, .collage-rechts {
		width: 100%;
	}
	
	.foot-stack {
		flex-direction: column;
	}
	
	.stack {
		text-align: center;
		margin-top: -15px;
	}
	
	.breen-kort-stack {
		order: 1;
		margin: -5px 0;
	}

	.page-index #content {
		padding-top: 0;
	}

	.page-index .index-hero,
	.page-about .about-hero,
	.page-case .site-hero {
		width: 100%;
		max-width: 100%;
		margin: 0 15px;
	}

	.page-index .site-top-row .site-top-social,
	.page-index .site-top-row .site-top-nav,
	.page-about .site-top-row .site-top-social,
	.page-about .site-top-row .site-top-nav,
	.page-about .site-top-row .site-top-photo,
	.page-case .site-top-row .site-top-social,
	.page-case .site-top-row .site-top-nav {
		display: none;
	}

	.page-index .site-top-row,
	.page-about .site-top-row,
	.page-case .site-top-row {
		display: block;
		padding-top: 44px;
	}

	.page-index .site-top-row {
		margin-bottom: 24px;
	}

	.page-index .index-intro {
		order: 2;
		margin-top: 15px;
	}

	.page-index .grid > .block1,
	.page-index .grid > .block2 {
		width: 100%;
		max-width: 100%;
	}

	.page-index .index-hero-body {
		display: flex;
		flex-direction: column;
	}

	.page-index .index-nav {
		order: 1;
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		align-items: stretch;
		padding-top: 0;
		margin-top: 0;
		margin-bottom: 0;
	}

	.page-index .index-hamburger {
		display: flex;
		position: fixed;
		top: 0;
		right: calc(2.5% + 15px);
		box-sizing: content-box;
		width: 24px;
		height: 16px;
		padding: 10px;
		padding-right: 0;
		margin: 0;
		justify-content: center;
		align-items: flex-end;
		z-index: 1002;
	}

	.page-index .index-hamburger-line {
		transform-origin: center;
	}

	.case-title h1 {
		font-size: clamp(1.95rem, 13.2cqi, 2.6em);
	}

	.page-index .index-nav h1 {
		order: 1;
		flex: none;
		width: 100%;
		text-align: left;
		font-size: clamp(1.75rem, 13.2cqi, 2.4rem);
		padding-right: 52px;
		box-sizing: border-box;
	}

	.page-index .index-hamburger.is-active .index-hamburger-line:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.page-index .index-hamburger.is-active .index-hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.page-index .index-hamburger.is-active .index-hamburger-line:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.page-index .index-nav-menu {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		background-color: #fff;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		z-index: 1001;
		padding: 80px 32px 48px;
		overflow-y: auto;
	}

	.page-index .index-nav-menu.is-open {
		display: flex;
	}

	.page-index .index-nav-menu > div {
		width: 100%;
	}

	.page-index .index-nav-menu > div a {
		display: block;
		padding: 20px 0;
		letter-spacing: normal;
	}

	.page-index .index-nav-menu > div:first-child a {
		font-size: 75%;
		font-weight: normal;
		line-height: 1.5;
		text-transform: none;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.page-index .index-nav-menu > div:first-child a:hover {
		text-decoration: underline;
	}

	body.page-index.menu-open {
		overflow: hidden;
	}

	body.page-index.menu-open #content,
	body.page-index.menu-open .grid {
		overflow: visible;
	}

	.page-index .index-section-label {
		margin-top: 45px;
	}
}

@media screen and (min-width: 773px) and (max-width: 1136px) {
	.page-index .grid {
		justify-content: flex-start;
	}

	/* Scale 2-col tiles to fill grid width (30px gutter = block1 margins) */
	.page-index .grid > .block1 {
		width: calc((100% - 60px) / 2);
	}

	.page-index .grid > .block3.index-section-label {
		width: calc(100% - 30px);
	}
}

@media screen and (min-width: 1137px) {
	.page-index .grid {
		justify-content: center;
	}
}

/* Section label follows the tile-row width: 2 columns from 758px, 3 from 1137px */
@media screen and (min-width: 758px) {
	.section-label {
		width: 690px;
	}
}

@media screen and (min-width: 1137px) {
	.section-label {
		width: 1050px;
	}
}

@media screen and (max-width: 1151px) {
	#about {
		text-align: center;
	}
	
	.intro-container {
		justify-content: flex-start;
	}
	
	#shop {
		text-align: right;
	}
}

@media screen and (min-width: 1365px) {
	.grid, .footer-container {
		width: 80%;
	}
}

@media screen and (min-width: 1600px) {
	
	.block1 {
        width: 26%;
    }
	
	.block2 {
		width: 54.4%;
	}
	
	.block3, .cta-block3, .slider-container, .language {
		width: 82.8%;
	}
	
	.block1, .block2, .block3 {
		height: auto;
		margin: 1vw;
	}
	
	.section-label {
		width: 82.8%;
		margin: 1vw 1vw 0;
	}
	
	.language {
		margin: 5px 1vw;
	}
	
	.c-text {
		width: 20.6vw;
	}
	
	.space1-top {
	padding-top: 10vw;
}
	
	.space1 {
	padding: 10vw 0 10vw 0;
}
	
	.space1-bottom {
	padding-bottom: 10vw;
}

	
	/*COLLAGE width = 80% van grid x 2*/
	
	.collage-links, .collage-rechts {
		width: 50%;
	}

	/* Keep site top bar aligned with scaled block1/block2/block3 grid */
	.page-index .site-top-row,
	.page-about .site-top-row,
	.page-case .site-top-row {
		grid-template-columns: repeat(3, calc(100% * 26 / 82.8));
		column-gap: 2vw;
	}

	.page-index .site-social-nostr,
	.page-about .site-social-nostr,
	.page-case .site-social-nostr {
		left: calc(100% * 26 / 82.8);
	}

	.page-index .index-hero-body {
		column-gap: 2vw;
	}

	.page-index .index-intro {
		flex: 0 0 calc(100% * 26 / 82.8);
		width: calc(100% * 26 / 82.8);
	}

	.page-index .index-nav {
		flex: 0 0 calc(100% * 54.4 / 82.8);
		width: calc(100% * 54.4 / 82.8);
	}
	
}