/* CSS Document */
:root {
  --white: #ffffff;
  --yellow: #FEF3AA;
  --black: #000000;
  --padding: 30px;
  --paddingBig: 30px 60px;
  --gap: 20px;
	
  --fontsize: 14px;
  --wide-font: headfont;
  --narrow-font: regularfont;
	
  --letter-spacing-reg : -2%;
  --letter-spacing-plus : 0%;
  --letter-spacing-min : 0%;
	
}

@font-face{
	font-family:"headfont";
	src:url("fonts/Lufga-Regular.woff2") format("woff2"),url("fonts/Lufga-Regular.woff") format("woff");
}

body{
	font-family: "sofia-pro", sans-serif;
	font-weight: 200;
	font-style: normal;
}
h1,h2{
	font-family: "headfont"; position: relative; width: 100%;
	font-weight: normal;
	font-style: normal; line-height: 1em;
}
h3{
	font-family: "sofia-pro", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.quote{
}

.smooth-content{
}

.page-block{
}


/* ---------------------------------------
   RESET / BASE
--------------------------------------- */

* {
}

html {
}

body {
	font-size: var(--fontsize);
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

img {
}

sup {
}




/* ---------------------------------------
   SMOOTH WRAPPER
--------------------------------------- */

#smooth-wrapper {
}

#smooth-content {
	display: flex; justify-content: center; flex-wrap: wrap;
}


/* ---------------------------------------
   GLOBAL BLOCKS
--------------------------------------- */

.page-block {
	position: relative; width: 100%; display: flex;
	padding: var(--padding); justify-content: center;
}
@media (min-width:1200px){
.page-block {
	padding: var(--paddingBig);
}
}
.page-block-inner{
	position: relative; width: 100%;
	max-width: 1440px; align-content: center; align-items: center;
}


/* ---------------------------------------
   HEADER
--------------------------------------- */

.header{
	background: var(--yellow);
}
.header .page-block-inner{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.logo {
	grid-column: span 3;
}
.logo img {
	max-width: 300px;
}

.nav {
	grid-column: span 3; display: flex; flex-direction: column;
}

.nav a {
	color: var(--black);
}

.quote {
	grid-column: span 1; 
	font-family: "headfont"; 
	font-size: 1.6em; line-height: 1em;
	font-size: clamp(1.3em, 2vw, 2.6em);
}

.quote sup {
}

@media (min-width:600px){
	
	.header{
	}

	.logo {
		grid-column: span 2;
		grid-row: span 2;
	}
	.logo img {
		max-width: 500px; width: 40vw;
	}
	.nav {
		grid-column: span 1; 
	}
	.quote {
		grid-column: span 1; 
	}

}

/* ---------------------------------------
   HERO
--------------------------------------- */

.hero {
	padding: 0px;
}
.hero::after {
	position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url("../img/hero-anim.svg"); display: block; content: ''; background-repeat: no-repeat; background-position: 76% top; background-size: contain;
}
.hero .page-block-inner{
	max-width: none;
}
.hero img {
	width: 100%; height: auto;
}


/* ---------------------------------------
   INFO / WINKELRONDJE
--------------------------------------- */

.info {
}

#winkelrondje {
	 padding-top: 3vw;
}
#winkelrondje .page-block-inner{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}

.info-content {
	padding: 15px 0px; grid-column: span 2;
}

.info-content h1 {
	padding-bottom: var(--gap);
}

.info-content p {
}

.info-image {
	grid-column: span 2; position: relative;
	display: flex; gap: var(--gap); flex-wrap: wrap;
}
.info-image-images{
	aspect-ratio:1/1; width: 100%; position: relative;
}
.info-image-nav{
	width: 100%; display: flex; gap: var(--gap); flex-wrap: nowrap;	justify-content: flex-end;
}
.info-image img{
	width: 100%; height: 100%; aspect-ratio:1/1; object-fit: contain; position: absolute; left: 0px; top: 0px;
}
.info-image #img1{
	width: 100%;
}
.info-image #img2{
	opacity: 0;
}

.info-image > div {
}

.info-image img {
}

.info-image a {
	color: var(--black);
}
.info-image a.active {
	text-decoration: underline;
}

.info-extra{
	grid-column: span 2;
}


@media (min-width:600px){
	
	#winkelrondje{
		margin: 40px 0px;
	}
	
	#winkelrondje .page-block-inner{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.info-content {
		grid-column: span 1;
	}	
	.info-image {
		grid-column: span 1;
	}


	.info-content h1 {
		font-size: clamp(2em, 4vw, 4em);
	}
	.info-content p {
		font-size: clamp(1em, 2vw, 2em);
	}
	.info-extra h2{
		font-size: 2em;
	}


}

/* ---------------------------------------
   TIJDLIJN
--------------------------------------- */

.tijdlijn{
	background: var(--yellow);
}
.tijdlijn {
}
#tijdlijn .elements {
	display: flex; position: relative;
	gap: 40px; justify-content: space-between; margin: 30px 0px 30px 0px;
}
#tijdlijn .elements::after{
	position: absolute; top: 50%; width: 100%; height: 1px; background: var(--black); content: ''; display: block;
}

.tijdlijn h2 {
	font-size: 2em;
}
#tijdlijn .elements .element {
	height: 190px;
}
#tijdlijn .elements .element::before {
	position: absolute; top: 50%; width: 9px; height: 20px; border-radius: 50%; background: var(--black); content: ''; display: block;
	transform: translateY(-50%);
}
#tijdlijn .elements .element h2{
	height: 100px;
	font-family: "headfont"; margin: 0px; padding: 0px; font-size: 14px;
}
#tijdlijn .elements .element h3{
	height: 50px;
	font-family: "headfont"; margin: 0px; padding: 0px; font-size: 20px; display: flex; align-content: flex-end; align-items: flex-end;
}


@media (min-width:991px){
#tijdlijn .elements .element h2{
    font-size: 20px;
}
}

@media (min-width:960px){

#tl3.element{
	widows: 3px;0%
}
#tl4.element{
	width:47%
}
}

@media (max-width:767px){

#tijdlijn .elements {
	flex-wrap: wrap; justify-content: flex-start; margin-left: 7px;
}
#tijdlijn .elements::after{
	position: absolute; top: 0px; height: 100%; width: 1px; left: 0px;
}
#tijdlijn .elements .element {
	padding-left: 30px; width: 100%; position: relative; height: auto; margin: 10px 0px;
}
#tijdlijn .elements .element::before {
	left: -4px;
}
#tijdlijn .elements .element h2,
#tijdlijn .elements .element h3{
	height: auto;
}
}

/* ---------------------------------------
   STRIP 1
--------------------------------------- */
.strip1 {
	flex-wrap: wrap; padding: 0px;
}
.strip1 img {
	width: 100%;
}
.strip1 .wide {
	display: none;
}
.strip1 .small {
}

@media (min-width:550px){
.strip1 .wide {
	display: flex;
}
.strip1 .small {
	display: none;
}
}

/* ---------------------------------------
   VIDEO
--------------------------------------- */

.video {
	justify-content: center; padding-top: 5vw; padding-bottom: 5vw;
}

#video .page-block-inner{
	justify-content: center; gap: 40px; display: flex; flex-wrap: wrap;
}

.video h2 {
	text-align: center; width: 100%; font-size: 2em;
}

.video img {
	width: 100%; max-width: 800px;
}


/* ---------------------------------------
   MAP / LOCATIE
--------------------------------------- */

.map {
	flex-wrap: wrap; padding: 0px;
}

#locatie {
    margin-top: 45px;
}

.map h2 {
	max-width: 1440px; height: 40px; font-size: 2em; line-height: 40px;
}

.map img {
	width: 100%;
}

.map .icon {
	position: absolute; left: 50.3%; top: calc(40px + 53.2%); width: 15.2vw;
}
#icon_1 {
	animation: pulseIcon 1.2s ease-in-out infinite;
}

@keyframes pulseIcon {
	0% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
	}
}
	


/* ---------------------------------------
   STRIP 2
--------------------------------------- */
.strip2 {
	flex-wrap: wrap; padding: 0px;
}
.strip2 img {
	width: 100%;
}
.strip2 .wide {
	display: none;
}
.strip2 .small {
}

@media (min-width:550px){
.strip2 .wide {
	display: flex;
}
.strip2 .small {
	display: none;
}
}


@media (min-width:900px){
    #thevideo{
        width: 800px!important; padding: 450px 0 0 0 !important;
    }
}
/* ---------------------------------------
   SHARED IMAGE TYPES
--------------------------------------- */

.wide {
}

.small {
}

.icon {
}


.footer{
	background: #EBEADE; padding-top: 70px;
}
.footer .page-block-inner{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}
.footer-txt{
	text-align: center;
	font-family: "sofia-pro", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: clamp(1.3em, 2vw, 2.0em);
	grid-column: span 2;
}
.footer-txt a{
	font-family: "sofia-pro", sans-serif;
	font-weight: 200; color: var(--black);
	text-decoration: none;
}
.footer-txt a:hover{
	opacity: 0.7;
}

.ontwikkelaar{
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	grid-column: span 1;
}
.ontwikkelaar img{
	width: 70px;
}
.ontwikkelaar h4{
	width: 100%;
}
.onderdeelvan{
	display: flex; flex-wrap: wrap; justify-content: flex-end;
	grid-column: span 1;
}
.onderdeelvan	 h4{
	width: 100%; text-align: right;
}
.onderdeelvan img{
	width: 200px;
}

/* ---------------------------------------
   RESPONSIVE
--------------------------------------- */

@media (max-width: 1024px) {

	.header {
	}

	.info {
	}

	.strip1,
	.strip2 {
	}

}


@media (max-width: 768px) {

	.nav {
	}

	.nav a {
	}

	.quote {
	}

	.info {
	}

	.info-content {
	}

	.info-image {
	}

	.wide {
	}

	.small {
	}

}


@media (max-width: 480px) {

	body {
	}

	h1 {
	}

	h2 {
	}

	.header {
	}

	.logo {
	}

	.hero {
	}

}