@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Basic:wght@400;700&display=swap');
:root {
	--grayscale-white: #FFFFFF;
	--grayscale-light: #F7F8F9;
	--grayscale-medium: #CCCCCC;
	--grayscale-black: #222222;
	--essent-pink: #E60167;
	--ambassify-green: #00BD8D;
	--mercedes-black: #262626;
	--fluvius-blue: #004C69;
	--makro-blue: #002D72;
	--recor-red: #C8102E;
	--borealis-blue: #002677;
	--sd-orange: #e94e0f;
}

/***** GENERAL STYLES *****/

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

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #ccc;
	padding: 0 0px 128px 0px;
	background-color: var(--grayscale-light);
}

a, a:visited, a:hover, a:active {
	text-decoration: none;
	color: var(--grayscale-black);
}

.intro a, .intro a:visited, .intro a:hover,.intro a:active {
	text-decoration: none;
	color: #222;
	border-bottom: 2px solid var(--grayscale-black);
}

.content-container {
	padding: 0 24px;
}

.logo-container {
	margin: 128px 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 32px;
}

.logo {
	width: 128px;
	height: auto;
	display: inline-block;
	margin: 0 16px;
	position: relative;
	top: 12px;
}

.intro {
	font-size: 20px;
	font-weight: 800;
	line-height: 32px;
	padding-bottom: 100px;
}

em {
	font-style: normal;
	color: var(--grayscale-black);
}

.project-body em {
	font-weight: 700;
}

/***** HOME CONTENT *****/

.project {
	display: block;
	border-radius: 8px;
	transition: 0.3s;
	background-color: var(--grayscale-white);
	cursor: pointer;
	margin-bottom: 40px;
	color: #222222;
}

.project:hover {box-shadow: 0px 0px 24px rgba(34, 34, 34, 0.20);}

.project__borealis {background-color: #002677;}
.project__borealis p {color: white;}
.project__borealis:hover {box-shadow: 0px 0px 24px rgba(0, 38, 119, 0.75);}

.project__ambassify {background-color: #00BD8D;}
.project__ambassify p {color: white;}
.project__ambassify:hover {box-shadow: 0px 0px 24px rgba(0, 189, 141, 0.75);}

.project__mercedes {background-color: #262626;}
.project__mercedes p {color: white;}
.project__mercedes:hover {box-shadow: 0px 0px 24px rgba(38, 38, 38, 0.75);}

.project__fluvius {background-color: #004C69;}
.project__fluvius p {color: white;}
.project__fluvius:hover {box-shadow: 0px 0px 24px rgba(0, 76, 105, 0.75);}

.project__leuk-steuntje {background-color: #002D72;}
.project__leuk-steuntje p {color: white;}
.project__leuk-steuntje:hover {box-shadow: 0px 0px 24px rgba(0, 45, 114, 0.75);}

.project__recor {background-color: #C8102E;}
.project__recor p {color: white;}
.project__recor:hover {box-shadow: 0px 0px 24px rgba(200, 16, 46, 0.75);}


.project img {
	width: 100%;
	height: auto;
	border-radius: 8px 8px 0px 0px;
	display: block;
}

.project p {
	font-family: 'Gentium Book Basic', serif;
	font-size: 20px;
	line-height: 32px;
	padding: 32px;
	margin: 0px;
	border-radius: 0px 0px 8px 8px;
}

.quote {
	background-color: black;
	background: url(../img/quote-mobile.jpg);
	background-size: cover;
	background-position: center center;
	border-radius: 8px;
	margin-bottom: 40px;
}

.quote p {
	font-family: "Open Sans", serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 32px;
	color: white;
	margin: 0;
	padding: 100px 50px;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
	border-radius: 8px;
}

/***** CASES *****/

.project-intro {
	border-radius: 0px;
	padding: 48px 24px;
	background-color: white;
	color: var(--grayscale-black);
}

.project-intro img {
	width: 100%;
	height: auto;
	margin-bottom: 128px;
}

.project-intro__white {
	color: white;
}

.project-intro__essent {
	background-color: var(--essent-pink);
}

.project-intro__borealis {
	background-color: var(--borealis-blue);
}

.project-intro__mercedes {
	background-color: var(--mercedes-black);
}

.project-intro__sd {
	background-color: var(--sd-orange);
}

.project-intro__fluvius {
	background-color: var(--fluvius-blue);
}

.project-intro h1 {
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;
	margin-top: 0px;
	margin-bottom: 64px;
}

.project-intro__sandcastles h1 {
	margin-bottom: 0px;
}

.project-intro h2, .project-outro h2 {
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;
	margin-top: 0px;
	margin-bottom: 16px;
	opacity: 90%;
}

.project-outro h2 {
	color: var(--grayscale-black);
}

.project-intro h2::before, .project-outro h2::before {
	content:"";
	display: block;
	width: 72px;
	height: 2px;
	background-color: var(--grayscale-white);
	margin-bottom: 8px;
}

.project-outro h2::before {
	background-color: var(--grayscale-black);
}

.project-intro p, .project-outro p {
	font-family: 'Gentium Book Basic', serif;
	font-size: 20px;
	line-height: 32px;
	margin: 0px;
	opacity: 90%;
}

.project-intro-scope {
	margin-bottom: 64px;
}

.project-body {
	margin-top: 72px;
	margin-bottom: 96px;
}

.project-body p {
	font-family: 'Gentium Book Basic', serif;
	font-size: 20px;
	line-height: 32px;
	margin-bottom: 32px;
	color: var(--grayscale-black);
}

.project-body h2 {
	margin-top: 0;
	color: var(--grayscale-black);
}

.project-body h3 {
	text-transform: uppercase;
}

.project-body p + h2, .project-body ol + h2 {
	margin-top: 128px;
}

figure {
	margin: 72px 0px 128px 0px;
	width: 100%;
}

.figure-container {
	background: white;
	border-radius: 8px;
	margin-bottom: 24px;
	overflow: hidden;
}

.figure-container-double {
	padding: 24px 24px 0 24px;
}

figure img {
	margin: 24px 24px 0px 24px;
	box-shadow: 0px 0px 24px rgba(34, 34, 34, 0.20);
	width: calc(100% - 48px);
	height: auto;
	display: block;
}

figure img.full-image {
	margin: 24px;
	box-shadow: none;
	width: calc(100% - 48px);
}

figure img.default-img {
	margin: 0px;
	box-shadow: none;
	width: 100%;
	}

.figure-container-double img {
	margin: 0px;
}

.figure-container-double .img1 {
	width: 38.5%;
	float: left;
}

.figure-container-double .img2 {
	width: 61.5%;
	float: left;
}

div.project-quote {
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;
	color: var(--grayscale-black);
	padding: 48px;
	position: relative;
}

div.project-quote:before, div.project-quote:after {
	content: "\0022";
	color: var(--grayscale-medium);
	position: absolute;
	font-size: 48px;
}

div.project-quote:before {
	left: 0;
}

div.project-quote:after {
	right: 0;
}


/***** ANIMATE BETWEEN 2 IMAGES inside .figure-container-animated *****/

@keyframes img-1 {
	0% {opacity: 1;}
	44% {opacity: 1;}
	50% {opacity: 0;}
	94% {opacity: 0;}
	100% {opacity: 1;
	}
}

@keyframes img-2 {
	0% {opacity: 0;}
	44% {opacity: 0;}
	50% {opacity: 1;}
	94% {opacity: 1;}
	100% {opacity: 0;}
}

.figure-container-animated {
	position: relative;
	width: 100%;
	height: auto;
	/*padding: 24px 24px 0 24px;*/
}

.figure-container-animated img:first-child {
	position: relative;
	opacity: 1;
	animation: img-1 6s infinite;
}

.figure-container-animated img:last-child {
	position: absolute;
	opacity: 0;
	animation: img-2 6s infinite;
	top: 0px;
}

figure video {
	margin: 24px auto 0px;
	width: 80%;
	height: auto;
	display: block;
}

figcaption {
	font-family: Gentium Book Basic;
	font-size: 20px;
	line-height: 32px;
	color: var(--grayscale-black);
	border-bottom: 2px solid var(--grayscale-black);
	padding-bottom: 16px;
}

dl, ol, ul {
	font-family: Gentium Book Basic;
	font-size: 20px;
	line-height: 32px;
	color: var(--grayscale-black);
	margin-bottom: 96px;
}

dd {
	margin-left: 0px;
	margin-bottom: 24px;
	color: var(--grayscale-medium);
}

ol {
	margin-bottom: 0px;
}

li {
	padding-left: 16px;
	margin-bottom: 16px;
}


/***** FOR SCREENS ABOVE 500PX *****/

@media screen and (min-width: 500px) {

	/***** GENERAL STYLES *****/

	body {
		width: 90%;
		margin: 0 auto;
		padding: 0 0 128px 0;
	}

	.logo-container {
		font-size: 32px;
		line-height: 40px;
	}

	.intro {
		font-size: 32px;
		line-height: 40px;
		padding-bottom: 128px;
	}

	.projects {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.project {
		flex: 0 48%;
	}

	/***** HOME CONTENT *****/


	/***** CASES *****/

	.project-intro {
		border-radius: 8px;
		padding: 48px 24px;
	}

	.project-intro h1 {
		font-size: 32px;
		line-height: 40px;
		margin-top: 0px;
		margin-bottom: 128px;
	}

	.project-intro__sandcastles h1 {
		margin-bottom: 0px;
	}

	.project-intro h2, .project-outro h2 {
		font-size: 32px;
		line-height: 28px;
		margin-top: 0px;
		margin-bottom: 24px;
	}

	.project-intro h2::before, .project-outro h2::before {
		height: 2px;
		margin-bottom: 16px;
	}

	.project-intro p, .project-outro p {
		font-size: 20px;
		line-height: 32px;
		margin: 0px;
	}

	.project-intro-scope {
		margin-bottom: 64px;
	}

	figure img.full-image {
		margin: 48px;
		width: calc(100% - 96px);
	}

	figure video {
		margin: 48px auto 0px;
		width: 50%;
		height: auto;
	}
}

/***** FOR SCREENS ABOVE 960px *****/

@media screen and (min-width: 960px) {

	/***** GENERAL STYLES AND INTRO *****/

	body {
		width: 95%;
		padding: 0px;
	}

	.content-container {
		padding: 0 48px;
	}

	/***** HOME CONTENT *****/

	.quote{
		background-image: url(../img/quote-desktop.jpg);
	}

	.quote p {
		font-size: 32px;
		line-height: 42px;
		padding: 100px;
	}

	/***** CASES *****/

	.project-intro {
		padding: 96px 48px;
	}

	.project-intro-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.project-intro-scope, .project-intro-role {
		flex: 0 48%;
		margin-bottom: 0px;
	}

	.project-body p {
		max-width: calc(75% - 24px);
	}

	figure img {
		margin: 48px 48px 0px 48px;
		box-shadow: 0px 0px 24px rgba(34, 34, 34, 0.20);
		width: calc(100% - 96px);
		height: auto;
	}

	figure img.full-image {
		margin: 72px;
		box-shadow: none;
		width: calc(100% - 144px);
	}

	figure video {
		margin: 48px auto 0px;
		width: 50%;
	}

	.figure-container {
		width: calc(75% - 24px);
		float: left;
		margin-bottom: 0px;
	}

	.figure-container-double {
		padding: 48px 48px 0 48px;
	}

	figcaption {
		width: calc(25% - 24px);
		margin-left: 48px;
		float: left;
		position: sticky;
		top: 64px;
	}

	div.project-quote {
		font-size: 32px;
		line-height: 42px;
		padding: 96px 137px;
		margin: 0 auto;
	}

	div.project-quote:before, div.project-quote:after {

		font-size: 128px;
	}

	.project-outro dl {
		margin-bottom: 128px;
	}

	.project-outro dl, ol, ul {
		max-width: calc(75% - 24px);
	}

/***** FOR SCREENS ABOVE 1200PX *****/

@media screen and (min-width: 1200px) {

	/***** GENERAL STYLES AND INTRO *****/

	body {
		width: 1096px;
		padding: 0px;
	}

	/***** HOME CONTENT *****/



	/***** CASES *****/


	

	
}