body {
  background: #83ffd1;
  color: #2e1147;
  font-family: "CentraNo1-Book";
  transition: background-color .2s ease-in-out;
}

.background {
  position: relative;
  left: 0;
  top: 0;
}

.bghead-l, .bghead-m {
  position: fixed;
  line-height: 0.8em;
  padding: 0;
  margin: 0;
  font-family: "TTRuns-ExtraBold";
  font-weight: 800;
  pointer-events: none;
  transition: color .2s ease-in-out;
}

.bghead-l {
  top: -0.12em;
  left: -0.12em;
  font-size: 17em;
  color: #ffffff;
}

.bghead-m {
  top: -0.09em;
  left: -0.09em;
  font-size: 11em;
}

.bgh-logo { color: #435C6A; }
.bgh-sera { color: #9EDBFF; }
.bgh-thui { color: #FFC9A1; }
.bgh-tran { color: #A3F796; }
.bgh-fnvy { color: #80FF9C; }
.bgh-klm { color: #A6D9FF; }
.bgh-evl { color: #ffffff; }




.hide {
  opacity: 0;
}





.content {  
	display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: 100vh 150vh repeat(5, auto) 100vh;
  grid-gap: 0em 0em;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . int int int int int int . ."
    ". . kla kla kla kla kla kla kla kla kla kla . ."
    ". ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ."
    ". ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ."
    ". ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ."
    ". ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ."
    ". ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ."
    ". . . . . . out out out out out out . .";
}






.intro {
  position: relative;
  align-self: end;
  grid-area: int;
}

.tags {
  width: 100%;
  overflow: hidden;
  clear: both;
  margin: 1.5em 0 0 0;
}

.tag {
  float: left;
  font-size: 0.95em;
  padding: 0.5em 1em;
  border-radius: 2em;
  border: 1px solid #2e1147;
  margin: 0.4em;
}

.intro p {
  font-size: 1.25em;
  margin: 1em 0.4em;
  line-height: 1.5em;
}

.copy {
  margin: 2em 0 3em 0;
}

a {
    color: #169582;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus {
    color: #0e564b;
}




.klanten {
  position: relative;
  justify-self: center;
  align-self: center;
  grid-area: kla;
}

.klantlogos {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.klantlogos img {
	width: 10%;
	margin: 1.4em;
}






.case1, .case2, .case3, .case4, .case5, .case6 {
  position: relative;
  padding: 1em 0;
  margin: 0 0 2.5em 0;
}

.case1 { grid-area: ca1; }
.case2 { grid-area: ca2; }
.case3 { grid-area: ca3; }
.case4 { grid-area: ca4; }
.case5 { grid-area: ca5; }


.case {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}

.caseinfo {
  position: sticky;
  bottom: 1em;
  align-self: flex-end;
  flex-basis: 30%;
  padding: 0 6em 0 0;
}

.caseinfo .tag {
  font-size: 0.8em;
  padding: 0.4em 0.9em;
  border-radius: 2em;
  border: 1px solid #2e1147;
  background: #ffffff;
  margin: 0.3em;
}

.caseinfo .copy {
  margin: 1em 0;
}

.caseinfo p {
  font-size: 0.9em;
  margin: 1em 0.4em;
  line-height: 1.4em;
}

.caseinfo .smallcopy {
	font-size: 0.75em;
	margin: 0.2em 0.4em;
	line-height: 1.2em;
	opacity: 0.55;
}

.images {
	display: flex;
	flex-direction: column;
  flex-basis: 70%;
  align-items: center;
  justify-content: center;
}

.fourscreens, .twoimages, .mobilescreens {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 3em 0;
}

.images img { width: 95%; margin: 3em 0; }
.fourscreens img { width: 44%; margin: 1em 0; }
.twoimages img { width: 48%; margin: 1.5em 0; }
.mobilescreens img { width: 28%; margin: 1em 0; }
.mobilescreens .image { width:31%; }

.screen {
	border: 1.25em solid #2e1147;
	border-radius: 1.5em;
	box-shadow:
	  0px 2.4px 2.7px rgba(0, 0, 0, 0.026),
	  0px 6.1px 11.3px rgba(0, 0, 0, 0.035),
	  0px 12.4px 26.7px rgba(0, 0, 0, 0.041),
	  0px 25.6px 49.8px rgba(0, 0, 0, 0.048),
	  0px 70px 80px rgba(0, 0, 0, 0.07)
	;
}

.fourscreens .screen { 
	border: 1em solid #2e1147; 
	border-radius: 1.1em;
}
.mobilescreens .screen { 
	border: 1em solid #2e1147; 
	border-radius: 1.6em;
}





.outro {
  position: relative;
  grid-area: out;
  display: flex;
}

.outro .copy {
	display: flex;
	align-self: flex-end;
	justify-content: flex-start;
	flex-direction: row;
}

.outro p {
  font-size: 1.25em;
  margin: 1em 0.4em;
  line-height: 1.5em;
}

.outro span {
	margin: 0 0.5em;
}






.hidden-pixel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
}








@media only screen and (max-width: 1199px) {
	.bghead-l { font-size: 15em; }
	.bghead-m { font-size: 10em; }

	.content {  
	  grid-template-areas:
			". . . . . int int int int int int int . ."
			". . kla kla kla kla kla kla kla kla kla kla . ."
			". ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ."
			". ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ."
			". ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ."
			". ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ."
			". ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ."
			". . . . . out out out out out out out . .";
	}
	
	.tag {
	  font-size: 0.9em;
	  padding: 0.45em 0.95em;
	  margin: 0.35em;
	}
	
	.images img { width: 95%; margin: 3em 0; }
	.fourscreens img { width: 42%; margin: 1em 0; }
	.twoimages img { width: 48%; margin: 1.5em 0; }
	.mobilescreens img { width: 27%; margin: 1em 0; }
	.mobilescreens .image { width:30%; }
	
	.screen { 
		border: 1.1em solid #2e1147; 
		border-radius: 1.3em; }
	.fourscreens .screen { 
		border: 1.1em solid #2e1147; 
		border-radius: 1.3em; }
	.mobilescreens .screen { 
		border: 0.9em solid #2e1147; 
		border-radius: 1.3em; }
}






@media only screen and (max-width: 999px) {
	.bghead-l { font-size: 11em; }
	.bghead-m { font-size: 8em; }
	
	.content {  
	  grid-template-areas:
			". . . int int int int int int int int int . ."
			". kla kla kla kla kla kla kla kla kla kla kla kla ."
			"ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1"
			"ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2"
			"ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3"
			"ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4"
			"ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5"
			". . . out out out out out out out out out . .";
	}
		
	.intro p { font-size: 1.1em; }
	
	.tag {
	  font-size: 0.9em;
	  padding: 0.45em 0.95em;
	  margin: 0.35em;
	}
	
	.klantlogos img {
		width: 12%;
		margin: 0.65em;
	}
	
	.case1, .case2, .case3, .case4, .case5, .case6 {
	  margin: 0 2em 2.5em 2em;
	}
	
	.images img { width: 95%; margin: 3em 0; }
	.fourscreens img { width: 42%; margin: 1em 0; }
	.twoimages img { width: 48%; margin: 1.5em 0; }
	.mobilescreens img { width: 40%; margin: 1em 0; }
	.mobilescreens .image { width: 45%; }
	
	.screen { 
		border: 1em solid #2e1147; 
		border-radius: 1.2em; }
	.fourscreens .screen { 
		border: 1em solid #2e1147; 
		border-radius: 1.2em; }
	.mobilescreens .screen { 
		border: 0.8em solid #2e1147; 
		border-radius: 1.2em; }
}





@media only screen and (max-width: 799px) {
	.bghead-l { font-size: 8.5em; }
	.bghead-m { font-size: 6em; }
	
	.content {  
	  grid-template-areas:
			". . int int int int int int int int int int int ."
			"kla kla kla kla kla kla kla kla kla kla kla kla kla kla"
			". ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ."
			". ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ."
			". ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ."
			". ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ."
			". ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ."
			". . out out out out out out out out out out out .";
	}
	
	.case { flex-direction: column; }
	
	.images img { width: 95%; margin: 3em 0; }
	.fourscreens img { width: 43%; margin: 1em 0; }
	.twoimages img { width: 48%; margin: 1.5em 0; }
	.mobilescreens img { width: 28%; margin: 1em 0; }
	.mobilescreens .image { width: 31%; }
	
	.screen { 
		border: 0.9em solid #2e1147; 
		border-radius: 1.1em; }
	.fourscreens .screen { 
		border: 0.9em solid #2e1147; 
		border-radius: 1.1em; }
	.mobilescreens .screen { 
		border: 0.8em solid #2e1147; 
		border-radius: 1.2em; }
}




@media only screen and (max-width: 649px) {
	.outro .copy { flex-direction: column; }
	.outro .copy div { margin: 0 0 0.5em 0; }
	.outro .copy span { display: none; }
}





@media only screen and (max-width: 599px) {
	.bghead-l { font-size: 6.5em; }
	.bghead-m { font-size: 4.5em; }
	
	.content {  
	  grid-template-areas:
			". . int int int int int int int int int int int ."
			"kla kla kla kla kla kla kla kla kla kla kla kla kla kla"
			"ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1"
			"ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2"
			"ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3"
			"ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4"
			"ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5"
			". . out out out out out out out out out out out .";
	}
		
	.intro p { font-size: 0.95em; }
	
	.tag {
	  font-size: 0.8em;
	  padding: 0.4em 0.9em;
	  margin: 0.3em;
	}
	
	.klantlogos img {
		width: 15%;
		margin: 1em;
	}
	
	.case1, .case2, .case3, .case4, .case5, .case6 {
	  margin: 0 1em 2.5em 1em;
	}
	
	.case { flex-direction: column; }
	.caseinfo {
	  position: none;
	  bottom: 0;
	  align-self: none;
	  justify-content: flex-start;
	  padding: 0 2em 0 0;
	}
	.caseinfo .tag { font-size: 0.75em; }
	.caseinfo .copy { margin: 1.5em 0; }
	.caseinfo p { font-size: 0.9em; margin: 0.8em 0.2em; }
	
	.images img { width: 95%; margin: 3em 0; }
	.fourscreens img { width: 43%; margin: 1em 0; }
	.twoimages img { width: 95%; margin: 1.5em 0; }
	.mobilescreens img { width: 42%; margin: 1em 0; }
	.mobilescreens .image { width: 46%; }
	
	.screen { 
		border: 0.7em solid #2e1147; 
		border-radius: 0.9em; }
	.fourscreens .screen { 
		border: 0.7em solid #2e1147; 
		border-radius: 0.9em; }
	.mobilescreens .screen { 
		border: 0.65em solid #2e1147; 
		border-radius: 1em; }
}


@media only screen and (max-width: 424px) {
	.fourscreens, .twoimages { justify-content: center; }
	.fourscreens img { width: 90%; margin: 1em 0; }
}


@media only screen and (max-width: 349px) {
	.bghead-l { font-size: 5.5em; }
	.bghead-m { font-size: 4em; }
	
	.content {  
	  grid-template-areas:
			". int int int int int int int int int int int int ."
			"kla kla kla kla kla kla kla kla kla kla kla kla kla kla"
			"ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1 ca1"
			"ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2 ca2"
			"ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3 ca3"
			"ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4 ca4"
			"ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5 ca5"
			". out out out out out out out out out out out out .";
	}
	
	.intro p {
	  font-size: 0.85em;
	  line-height: 1.4em;
	}
	
	.tag {
	  font-size: 0.75em;
	  padding: 0.4em 0.9em;
	  margin: 0.3em;
	}
	
	.klantlogos img {
		width: 26%;
		margin: 0.4em;
	}
	
	
	.case1, .case2, .case3, .case4, .case5, .case6 {
	  margin: 0 1em 2.5em 1em;
	}
	
	.case { flex-direction: column; }
	.caseinfo {
	  position: none;
	  bottom: 0;
	  align-self: none;
	  justify-content: flex-start;
	  padding: 0 2em 0 0;
	}
	
	.caseinfo .tag { font-size: 0.75em; }
	.caseinfo .copy { margin: 1.5em 0; }
	.caseinfo p { font-size: 0.9em; margin: 0.8em 0.2em; }
	
	.images img { width: 95%; margin: 1em 0; }
	.fourscreens img { width: 90%; margin: 0.5em 0; }
	.twoimages img { width: 90%; margin: 1em 0; }
	.mobilescreens img { width: 42%; margin: 0.5em 0; }
	.mobilescreens .image { width: 46%; }
	
	.screen { 
		border: 0.65em solid #2e1147; 
		border-radius: 0.85em; }
	.fourscreens .screen { 
		border: 0.65em solid #2e1147; 
		border-radius: 0.85em; }
	.mobilescreens .screen { 
		border: 0.5em solid #2e1147; 
		border-radius: 0.9em; }
}