html, body {
	height: 100%;
}

body {
	font-family: 'europa', sans-serif;
	font-style: normal;
	color: #ffffff;
}

hr {
	color:#ffffff;
	background-color:#ffffff;
}

A {text-decoration: none  }
A:link { 	color: 	#ffffff;}
A:visited { 	color: #ffffff;}
A:hover {	color: #ffffff}

/* map items are foor google maps */
.map_canvas {
	width: 100%; 
	height: 100%;
	float: left;
	position: relative;
	color:#000000;
}

.map_text {
		background: url('images/transparant_green.png');
		border-style:none;
		color:#ffffff;
		position: absolute; bottom: 0;
		width: 15%;
		padding: 0.5%;
		font-family: Tahoma, Verdana, Arial, Sans-Serif;
		text-align:left;
		font-size: 16px;
}

.map_icon {
		width: 2em;
		height: 2em;
		align: middle;
}

/* settings foor project list */
ul {
	list-style-type:none;
  padding-left:0;
}

/* settings voor header (logo mba + youtube) */

.header {
	padding: 10px;
  max-width: 1790px;
  margin: 0 auto;
	margin-top: 1em;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-style: normal;
	font-size: 25px;
	color: #000000;
	position: relative;
}

.tube {
	text-align: right;
	position: absolute;
	top: 0.6em;
  right: 0.4em;
}

.language {
	text-align: right;
	position: absolute;
	top: 0.6em;
  right: 2.8em;
}

.header img {
	height: 80px;
	vertical-align: middle;
	cursor:pointer;
}

.menuR {
	text-align: right;
	position: absolute;
	top: 1.25em;
  right: 10px;
}


.menuR A {color:#000000;}
.menuR A:hover {	color: #ddd;}

.menuL A {color:#000000;}
.menuL A:hover {	color: #ddd;}


.menuL {
	text-align: right;
	position: absolute;
	top: 1.25em;
  right: 5.0em;
}

.item {
  font-size: 30px;
}

/* settings for overlay text */
.overlay {
  position: absolute; 
	bottom: 1em;
  left: 1em;
	padding-right: 1em;
	text-shadow: 2px 2px #777777;
}

.overlay_text {
	position: absolute; 
	top: 1em;
  left: 1em;
	padding-right: 1em;
}

.overlay_refs_empty {
	position: absolute; 
	bottom: 1em;
  left: 1em;
	padding-right: 1em;
}

.overlay_refs {
  background:rgba(80,80,80,0.4);
	position: absolute; 
	bottom: 1em;
  left: 1em;
	padding: 0.25em;
	color: #ffffff;
	text-shadow: 1px 1px #000000;
}

.overlay_text_mainpage {
	position: absolute; 
	bottom: 1em;
  left: 1em;
	padding-right: 1em;
}

.h-stretch, .v-stretch, .big-stretch, .no-stretch {
	position: relative;
}


/* settings for grid logic */

.gallery {
  padding: 10px;
  max-width: 1790px;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  grid-auto-rows: 440px;
  grid-auto-flow: dense; /* Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. */
}

/* Stretch image vertically */
.v-stretch {
  grid-row: span 2;
}

/* Stretch image horizontally */
.h-stretch {
  grid-column: span 2;
}

/* Stretch image vertically and horizontally */
.big-stretch {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer {
	padding: 10px;
  max-width: 1790px;
  margin: 0 auto;
	margin-bottom: 1em;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-style: normal;
	color: #ddd;
	position: relative;
}

/* settings for text-overlay */

.mosaic_wrapper {
	position: relative;
	overflow: hidden;
}

#swap_image img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#swap_image img.top:hover {
  opacity:0;
}


 /* desktop view */
@media screen and (min-width:1391px) and (max-width:1826px) {
	.gallery, .header {
		max-width: 1340px;
	}
  .v-stretch {
    grid-row: span 2;
  }

  .h-stretch {
    grid-column: span 2;
  }

  .big-stretch {
    grid-column: span 2;
    grid-row: span 2;
  }
}

 /* tablet view */
@media screen and (min-width:931px) and (max-width:1390px) {
	.gallery, .header {
		max-width: 890px;
	}
  .v-stretch {
    grid-row: span 2;
  }

  .h-stretch {
    grid-column: span 2;
  }

  .big-stretch {
    grid-column: span 2;
    grid-row: span 2;
  }
}

 /* Mobile View */
@media screen and (max-width:930px) {	
	.gallery, .header {
		padding-top: 2px;
		padding-left: 0px; 
		padding-right: 0px;
		min-width: 420px;
		max-width: 930px;
	}
	
	.v-stretch {
    grid-row: span 1;
  }

  .h-stretch {
    grid-column: span 1;
  }

  .big-stretch {
    grid-column: span 1;
    grid-row: span 1;
  }
}


/* original css code here
.gallery {
  padding: 10px;
  max-width: 1100px;

  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense; // Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
}

// Stretch image vertically
.v-stretch {
  grid-row: span 2;
}

// Stretch image horizontally
.h-stretch {
  grid-column: span 2;
}

// Stretch image vertically and horizontally
.big-stretch {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// Make the gallery items all matchy matchy on smaller screen sizes
@media screen and (max-width: 515px) {
  .v-stretch {
    grid-row: span 1;
  }

  .h-stretch {
    grid-column: span 1;
  }

  .big-stretch {
    grid-column: span 1;
    grid-row: span 1;
  }
}

*/