body {
	height: 100%;
	width: 100%;
	margin: 0;
	background: linear-gradient(to right top, #CFD8DC, #B0BEC5); 
	background-attachment: fixed;
	text-align: justify; 
	font-family: 'Source Sans Pro', sans-serif;
	hyphens: auto; 
}



nav { 
  background: linear-gradient(to right, #B0BEC5, #607D8B);
  padding-top: 1.5%;
  padding-bottom: 0.5%;
  position: fixed;
  top: 0;
  width: 100%; 
  opacity: .85; 
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  z-index: 9999; 
  }

nav li {
  display: inline;
  margin: 0;
  float: left; 
  padding-left: 5%; 
}

nav ul {
  list-style: none; 
  display: inline;
  margin: 0px;
}
/*link in navigation: when active change to bold, else normal weight*/

a:link {
	color: #000000;
	text-decoration: none; 
	position: relative;
}

a:visited {
	color: #000000;
}

a:hover {
	color: #E0E0E0;
}

a:active {
	top: 0.25em;
}

.navigation_list {

}

.background {
	padding-left: 5%;
	padding-right: 10%;  
	padding-top: 3%;
}

.first_block {
	display: inline; 
}

.normal_text {
	color: #263238;
	font-size: 1.125em;
	width: 28%;
	display: inline-block;
	text-indent: 2em; 
}

.picture_text {
	color: #263238;
	text-indent: 2em;
	float: left;
	padding-right: 2%; 
	padding-top: 2%; 
	width: 43%;

}

.non_indented {
	color: inherit;
	font-size: inherit;
	width: inherit;
	display: inherit;
	text-indent: 0em; 
}

.heading_style {
	color: inherit;
	font-size: 2em; 
	width: inherit;
	text-indent: 0em;
}

.impressum {
	color: inherit;
	font-size: 0.75em;
	line-height: 0.5em; 
	display: inline-block; 
}

.nav_text {
	color: inherit;
	font-weight: bold;
}

.grey_and_bold {
	color: #455A64;  
	font-weight: bold; 
}

.grey_and_bold_nav {
	color: #455A64;  
	font-weight: bold;
  text-indent: 0em;
}


.pictures {
	float: right; 
	padding-top: 3%; 
	width: 51%; 
	display: flex; 
	align-items: flex-start;
	/*position: relative;*/
}


.outer_picture {
	padding: 30px; 
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;

}

.single_picture {
  object-fit: contain;
	opacity: 0.95; 
	border-radius: 0.2em;
	box-shadow: .35em .35em .3em #455A64;
	width: 88%;
	height: 88%; 
	margin: 0;
}

/*firefox specific*/
/*@supports (-moz-appearance:none) {
  @media screen and (max-width: 1024px) {
    .single_picture {
    box-shadow: none;
    height: 100%; 
    width: 100%;
    }
    .outer_picture {
      padding: none; 
      height: 100%; 
      width: 100%; 
    }

    .picture_text {
      margin-top: -5%;
    }
}
}*/

b img:last-child {
  display: none;  
}
b:hover img:last-child {
  display: block;  
}
b:hover img:first-child {
  display: none;  
}


.align_picture_text {
	float: left; 
}



@media screen and (max-width: 1024px) {
  .pictures { 
    height: 100%; 
   	flex-direction: column-reverse;
  }

  .normal_text {
  	width: 40%; 
  }

  .single_picture {
  	width: 70%; 
  	height: 70%;
  	margin: 0;
  }

  .picture_text {
  	float: left; 
    width: 70%; 
    
  }
}

@supports (-moz-appearance:none) {
  @media screen and (max-width: 1024px) {
    .pictures {
      display: center; 
    }


    .single_picture {
    box-shadow: none;
    padding: none; 
    height: 100%; 
    width: 100%; 
    
    }
    .outer_picture {
      padding: none; 
      height: 25em;  
    width: 15em;
      /*height: 100%; 
      width: 100%;*/ 
    }

    .picture_text {
      width: 70%;
      float: right; 
      margin-top: -5%;
    }
}
}

@media screen and (max-width: 680px) {
  .background { 
    display: table;
  }

  nav {
    padding-top: 3%; 
    padding-bottom: 3%; 
    font-size: 1.2em; 
    color:  #455A64;
  }

  .background {
    padding-top: 10%; 
  }

  .first_block {
  	display: table-header-group;
  }

  .normal_text {
  	width: 100%; 
  }

  .pictures {
    flex-direction: column-reverse; 
    width: 100%; 
  }

  .picture_text {
  	width: 100%; 
  	padding-top: 0; 
  	
  }

  .outer_picture {
  	padding: 30px; 
  }

  .single_picture {
    margin: 0;
  	width: 80%; 
    height: 80%; 

  }


}

@supports (-moz-appearance:none) {
  @media screen and (max-width: 680px) {
    .pictures {
      display: center; 
    }


    .single_picture {
    /*box-shadow: none;*/
    padding: none; 
    height: 100%; 
    width: 100%; 
    
    }
    .outer_picture {
      padding: none; 
      height: 25em;  
      width: 15em;
      /*height: 100%; 
      width: 100%;*/ 
    }

}
}