@charset "UTF-8";

.page__wrapper {
	overflow-x: hidden;
}

/* ---------- Typography */
/* Font styling */
body {
	color: #000000;
	position: relative;
	font-smooth: always;
	letter-spacing: 0.05em;
	background-color: #000000;
	-webkit-font-smoothing: subpixel-antialiased;
	font-family: Helvetica, Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";
}

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

body p,
body .p {
	color: #000000;
	font-size: 16px;
	line-height: 170%;
	letter-spacing: 0.05em;
	font-family: Helvetica, Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";
}

body p:last-of-type,
body .p:last-of-type {
	margin-bottom: 0;
}

body ul {
	list-style: square;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
	font-style: normal;
	font-smooth: always;
	letter-spacing: 0.05em;
	font-family: dystopian, sans-serif;
	-webkit-font-smoothing: subpixel-antialiased;
}

h1, .h1 {
	font-size: 76px;
	line-height: 1.0;
	font-weight: 900;
}

h1 span, .h1 span {
	color: #82bacb;
}

h2, .h2 {
	font-size: 30px;
	line-height: 1.0;
	font-weight: 600;
}


/*  ----------------- Buttons */
/* Default button */
:focus {
	outline: 0 !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

.btn {
	border: 0;
	font-size: 16px;
	text-align: left;
	font-weight: 600;
	border-radius: 0;
	position: relative;
	font-style: normal;
	display: inline-block;
	padding: 1rem 1.225rem;
	text-decoration: none !important;
}

.btn i {
	top: 1px;
	position: relative;
}

.btn:last-of-type {
	margin-bottom: 0;
}

.btn.btn-primary {
	color: #ffffff;
	background: #d82419;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
	background-color: #c6241b;
}


/*  ----------------- Landingspage */
/* Header */
header {
	z-index: 9;
	width: 100%;
	position: absolute;
}


/* Blik op de toekomst */
#toekomst {
	position: relative;
}

#toekomst .container .row {
	height: 950px;
	min-height: 950px;
	position: relative;
}

#toekomst .container .row .col-12 {
	z-index: 9;
	padding-top: 5rem;
	position: relative;
}

#toekomst .container .row .col-12 p {
	max-width: 425px;
}

/* Contact */
#contact {
	position: relative;
	background-color: #c3d1d6;
}

#contact .container .row {
	height: 380px;
	min-height: 380px;
	position: relative;
}

#contact .container .row .col-12 {
	z-index: 9;
	position: relative;
}

/* Mailchimp signup form */
#mc_embed_signup form {
	padding: 0;
	display: block;
}

#mc_embed_signup .form-control {
	float: left;
	border: none !important;
	border-radius: 0 !important;
	padding: 1.5625rem 1.225rem !important;
}

.mailchimp__subscribe .btn {
	float: left;
	height: 50px;
	border: none;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	border-radius: 0;
	text-align: center;
	background-color: #000000;
}

/* Socials */
.socials i {
	width: 50px;
	height: 50px;
	color: #ffffff;
	line-height: 50px;
	text-align: center;
	background: #000000;
}

/* Grid elements */
.grid {
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	background-size: 190px;
	background-repeat: repeat;
	background-position: center top;
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid.svg");
}

.grid__mobile {
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
}

#toekomst .grid__mobile {
	max-height: 75%;
}

.grid__mobile .col-3 {
	border-right: 1px solid #000000;
}

.grid__mobile .col-3:last-of-type {
	border-right: none;
}

.grid__mobile::before {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	content: " ";
	position: absolute;
	background-size: 1px 25vw;
	background-image: linear-gradient(to right, transparent 0, transparent 0), linear-gradient(#000000 1px, transparent 1px);
}

.grid__element {
	z-index: 1;
	width: 190px;
	height: 190px;
	position: absolute;
	pointer-events: none;
	background-size: cover;
	background-position: center;
}

.grid__element.header.one {
	top: 0;
	left: calc(50% - 285px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-one.jpg");
}

.grid__element.header.two {
	top: 190px;
	width: 380px;
	height: 570px;
	left: calc(50% - 95px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-two.jpg");
}

.grid__element.header.two::before {
	left: 0;
	bottom: 0;
	z-index: 4;
	content: "";
	width: 190px;
	height: 190px;
	position: absolute;
	background: #000000;
}

.grid__element.header.three {
	bottom: 0;
	left: calc(50% - 95px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-three.jpg");
}

.grid__element.header.four {
	top: 0;
	width: 380px;
	left: calc(50% + 95px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-four.jpg");
}

.grid__element.header.five {
	bottom: 0;
	width: 380px;
	background: #3d54a5;
	left: calc(50% + 95px);
}

.grid__element.header.six {
	top: 190px;
	background: #eacecc;
	left: calc(50% + 285px);
}

.grid__element.header.seven {
	top: 380px;
	left: calc(50% + 285px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-seven.jpg");
}

.grid__element.header.eight {
	top: 570px;
	background: #eacecc;
	left: calc(50% + 285px);
}

.grid__element.header.eight::before {
	bottom: 0;
	z-index: 4;
	content: "";
	left: -190px;
	width: 380px;
	height: 190px;
	position: absolute;
	background: #3d54a5;
	clip-path: polygon(0 0, 100% 66%, 100% 100%, 0% 100%);
}

.grid__element.header.nine {
	top: 0;
	background: #eacecc;
	left: calc(50% + 475px);
}

.grid__element.header.ten {
	top: 190px;
	left: calc(50% + 475px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-ten.jpg");
}

.grid__element.header.eleven {
	top: 380px;
	background: #eacecc;
	left: calc(50% + 475px);
}

.grid__element.header.twelve {
	bottom: 190px;
	left: calc(50% + 475px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-twelve.jpg");
}

.grid__element.header.thirteen {
	bottom: 0;
	background: #eacecc;
	left: calc(50% + 475px);
}

.grid__element.header.fourteen {
	top: 190px;
	background: #eacecc;
	left: calc(50% + 665px);
}

.grid__element.header.fifteen {
	bottom: 190px;
	background: #eacecc;
	left: calc(50% + 665px);
}

.grid__element.footer.one {
	bottom: 0;
	left: calc(50% - 95px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-footer-one.jpg");
}

.grid__element.footer.two {
	top: 0;
	left: calc(50% + 95px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-footer-two.jpg");
}

.grid__element.footer.three {
	bottom: 0;
	background: #3d54a5;
	left: calc(50% + 95px);
}

.grid__element.footer.four {
	top: 0;
	background: #3d54a5;
	left: calc(50% + 285px);
}

.grid__element.footer.five {
	bottom: 0;
	left: calc(50% + 285px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-footer-five.jpg");
}

.grid__element.footer.six {
	top: 0;
	left: calc(50% + 475px);
	background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-footer-six.jpg");
}

.grid__element.footer.seven {
	bottom: 0;
	background: #eacecc;
	left: calc(50% + 475px);
}

.grid__element.footer.eight {
	top: 0;
	background: #eacecc;
	left: calc(50% + 665px);
}

@media only screen and (max-width: 1200px) {
	
	/* ---------- Typography */
	/* Font styling */
	body p,
	body .p {
		font-size: 16px;
	}

	h1, .h1 {
		font-size: 62px;
	}
	
	/*  ----------------- Landingspage */
	/* Blik op de toekomst */
	#toekomst .container .row .col-12 {
		padding-top: 6rem;
	}
	
	#toekomst .container .row .col-12 p {
		max-width: 330px;
	}
	
	
}

@media only screen and (max-width: 992px) {
	
	/* ---------- Typography */
	/* Font styling */
	body p,
	body .p {
		font-size: 16px;
	}
	
	h1, .h1 {
		font-size: 62px;
	}
	
	h2, .h2 {
		font-size: 26px;
	}
	
	/*  ----------------- Landingspage */
	/* Header */
	header,
	header .navbar {
		height: 190px;
	}
	
	header .navbar-brand img {
		width: 280px;
	}
	
	/* Blik op de toekomst */
	#toekomst .container .row {
		height: 175vw;
		min-height: 175vw;
		padding-top: 50vw;
	}
	
	#toekomst .container .row .col-12 p {
		max-width: 62.5vw;
	}
	
	/* Contact */
	#contact .container .row {
		height: 50vw;
		min-height: 50vw;
	}
	
	#contact .container .row .col-12 p {
		max-width: 62.5vw;
	}
	
	/* Grid elements */
	.grid__element {
		width: 25vw;
		height: 25vw;
	}
	
	.grid__element.header.one {
		right: 0;
		top: 25vw;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.header.two {
		left: 0;
		right: 0;
		top: 25vw;
		width: 75vw;
		height: 50vw;
		bottom: auto;
		background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-two-mobile.jpg");
	}
	
	.grid__element.header.two::before {
		display: none;
	}
	
	.grid__element.header.six {
		top: 0;
		right: 0;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.header.seven {
		top: 50vw;
		left: auto;
		bottom: auto;
		right: calc(25vw + (720px - 100vw) / 2);
	}
	
	.grid__element.header.nine {
		right: 0;
		top: 50vw;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.header.twelve {
		right: 0;
		top: 75vw;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.footer.one {
		top: 0;
		right: 0;
		left: auto;
		bottom: auto;
	}

	.grid__element.footer.two {
		right: 0;
		top: 50vw;
		left: auto;
		bottom: auto;
	}

	.grid__element.footer.three {
		right: 0;
		top: 25vw;
		left: auto;
		bottom: auto;
	}

	.grid__element.footer.four {
		right: 0;
		top: -25vw;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.header.one,
	.grid__element.header.two,
	.grid__element.header.six,
	.grid__element.header.nine,
	.grid__element.header.twelve {
		right: calc((720px - 100vw) / 2);
	}
	
	.grid__element.header.two {
		left: calc((720px - 100vw) / 2);
	}
	
	.grid__element.footer.one,
	.grid__element.footer.two,
	.grid__element.footer.three,
	.grid__element.footer.four {
		right: calc((720px - 100vw) / 2);
	}
	
}


@media only screen and (max-width: 767px) {
	
	/* ---------- Typography */
	/* Font styling */
	body p,
	body .p {
		font-size: 14px;
	}
	
	h1, .h1 {
		font-size: 40px;
	}
	
	h2, .h2 {
		font-size: 26px;
	}
	
	/*  ----------------- Landingspage */
	/* Header */
	header,
	header .navbar {
		height: 90px;
	}
	
	header .navbar-brand img {
		width: 170px;
	}
	
	/* Blik op de toekomst */
	#toekomst .container .row {
		height: 225vw;
		min-height: 225vw;
		padding-top: 75vw;
	}
	
	#toekomst .container .row .col-12 {
		padding-top: 0;
	}
	
	#toekomst .container .row .col-12 p {
		max-width: 95%;
	}
	
	/* Contact */
	#contact .container .row {
		height: 100vw;
		min-height: 100vw;
	}
	
	#contact .container .row .col-12 p {
		max-width: 70vw;
	}
	
	/* Mailchimp signup form */
	#mc_embed_signup .form-control {
		width: calc(100% - 115px);
	}
	
	.mailchimp__subscribe .btn {
		width: 115px;
	}

	/* Grid elements */
	.grid__element {
		width: 25vw;
		height: 25vw;
	}
	
	.grid__element.header.one {
		right: 0;
		top: 25vw;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.header.two {
		left: 0;
		right: 0;
		top: 25vw;
		width: 75vw;
		height: 50vw;
		bottom: auto;
		background-image: url("https://historischcentrumoverijssel.nl/assets/img/collectie-overijssel-grid-header-two-mobile.jpg");
	}
	
	.grid__element.header.two::before {
		display: none;
	}
	
	.grid__element.header.six {
		top: 0;
		right: 0;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.header.seven {
		top: 50vw;
		left: auto;
		right: 25vw;
		bottom: auto;
	}
	
	.grid__element.header.nine {
		right: 0;
		top: 50vw;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.header.twelve {
		right: 0;
		top: 75vw;
		left: auto;
		bottom: auto;
	}
	
	.grid__element.footer.one {
		top: 0;
		right: 0;
		left: auto;
		bottom: auto;
	}

	.grid__element.footer.two {
		right: 0;
		top: 50vw;
		left: auto;
		bottom: auto;
	}

	.grid__element.footer.three {
		right: 0;
		top: 25vw;
		left: auto;
		bottom: auto;
	}

	.grid__element.footer.four {
		right: 0;
		top: -25vw;
		left: auto;
		bottom: auto;
	}
	
}

@media only screen and (max-width: 360px) {
	
	/* ---------- Typography */
	/* Font styling */
	body p,
	body .p {
		font-size: 12px;
	}
	
	h1, .h1 {
		font-size: 36px;
	}
	
	h2, .h2 {
		font-size: 22px;
	}
	
}