h1{
font-family: 'Sacramento', cursive;
font-size: 6rem;
text-align: center;
}

body{
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 120%;
	font-family: sans-serif;
}


a{color: black;}

.photos{
	display: grid;
	grid-gap: 0.2rem;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.photos a{
	line-height: 0;
}


.photos img{
	object-fit: contain;
	max-width: 100%; 
	height: auto;
	margin: none;
}
/*  
petrol #164864  light:  #cfe7f4
bordeauxrood #B02313  light:  #fad8d4;
okerroest #D7812C  light:  #f9ecdf;
donkergroen #274634 light: #d8e9e0;
*/

.left_image {
	width: 100%;
	object-fit: cover;
	box-shadow: 0 12px 0 0 #164864, 12px 12px #164864, 12px 0 0 0 white
}

.container_left_image{
	display: grid; 
	grid-template-columns: 6fr 5fr;
	grid-gap:12px;
	background-color:#cfe7f4;
}

.container_text_for_image{
	display:grid;
	grid-template-rows:24px auto;
}

.container_text_for_right_image{
	display:grid;
	grid-template-rows:24px auto;
}


.right_image {
	width: 100%;
	object-fit: cover;
	box-shadow: 0 12px 0 0 #B02313, -12px 12px #B02313, -12px 0 0 0 white;
}


.container_right_image{
	display: grid; 
	grid-template-columns: 5fr 6fr;
	grid-gap:12px;
	background-color:#fad8d4;	
}


.text_container{
	padding: 12px;
}

.photo_container{
	padding: 12px;
}

.container_left_spacer{
	background-color: white;
}

.container_right_spacer{
	background-color: white;
}

.container_right_image, .container_left_image{
	margin-bottom: 6rem;
}



@media screen and (max-width:560px) {
	.photos{
		grid-template-columns: 1fr 1fr;
	}

	.container_left_image{
		display: grid; 
		grid-template-columns: 1fr;
		grid-gap:12px;
		background-color:#cfe7f4
	}

	.container_left_spacer{
		background-color: #cfe7f4;
	}

	.left_image {
		width: 80%;
		object-fit: cover;
		box-shadow: 0 12px 0 0 #164864, 12px 12px #164864, 12px 0 0 0 white;
		margin-top: -24px;
	}

	.container_right_image{
		display: grid; 
		grid-template-columns: none;
		grid-template-areas: 'picture' 'tinfo';
		grid-gap:12px;
		background-color:#fad8d4
	}

	.container_text_for_right_image{
		grid-area: tinfo; 
	}

	.container_right_spacer{
		background-color: #fad8d4;
	}

	.right_image {
		grid-area: picture; 
		width: 80%;
		margin-left: auto;
		object-fit: cover;
		box-shadow: 0 12px 0 0 #B02313, -12px 12px #B02313, -12px 0 0 0 white;
		margin-top: -24px;
	}

	.container_text_for_image{
		display:grid;
		grid-template-rows:0px auto;
	}

	.container_text_for_right_image{
		display:grid;
		grid-template-rows:0px auto;
	}

	.container_right_image, .container_left_image{
		margin-bottom: 4rem;
	}
}

.field_with_errors input{
	border: 4px solid #B02313;
}

.green_image{
	box-shadow: 0 12px 0 0 #274634, 12px 12px #274634, 12px 0 0 0 white;
}

.red{
	background-color: #fad8d4;
}

.green{
	background-color: #d8e9e0;
}

.oker_image{
	box-shadow: 0 12px 0 0 #D7812C, -12px 12px #D7812C, -12px 0 0 0 white;
}

.oker_image_l{
	box-shadow: 0 12px 0 0 #D7812C, 12px 12px #D7812C, 12px 0 0 0 white;
}


.oker{
	background-color: #f9ecdf;
}

.plain_text_container{
	padding: 12px;
	margin-bottom: 36px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}



#spinner {
  position: fixed;
  top: 0; left: 0; z-index: 9999;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s;
  visibility: hidden;
  opacity: 0;
}


#spinner img {
  width: 30vw;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%);
}

#spinner.show {
  visibility: visible;
  opacity: 1;
}