body, table		   {
/* background-color:rgb(167,167,167); /*#585858; */ */

    background-color: silver ; 
    color: white ;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 250;   
}
:root, table {
  width: 100%;
  
  background-color : LightSteelBlue ; 
    color: white ;
  
  display: grid;
  text-align: center;
  color: ;
  font-size:16px;
  line-height: 28px;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	font-size: calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320)));    
 	
 	color: white ; 
  background-color : LightSteelBlue ; 
    
  text-rendering: optimizeLegibility;
  -webkit-font-kerning: normal;
font-kerning: normal;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%; }

.grid-container {
    display: grid;
    text-align: center;
    padding: 0px;
    min-width: 300px;
    max-width: 800px;
    line-height: 28px;
    
    color: ;
    background-color:   background-color : LightSteelBlue ; ;
}
.mySlides {display: none}
img {vertical-align: bottom;}

:root, table {
  width: 100%;
  background-color : LightSteelBlue ; 
  display: grid;
  text-align: center;
  color: ;
  font-size:14px;
  line-height: 16px;
}

@media only screen and (max-width: 1200px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
}
}
img {
/*  width: auto; 		/* war: 100%; */
/*  max-width: 100%; 	/* 100vw; */
/*  height: auto; 	/* 100vh; */
/*  max-height: 100vh; /* war: 80vh */
  vertical-align: middle;
  /*display: block;*/
  -o-object-fit: cover;
     object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border:;
  box-shadow: 8px 4px 12px rgba(0, 0, 0, 0.5); 
  }

p {
   color: ;
}    
 
/*                                                    links */

a:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}


a:visited {
  color: hotpink;
  background-color: transparent;
  text-decoration: none;
}


a:hover {
  color: yellow ;
  background-color: transparent;
  text-decoration: none;
  font-style: italic;


a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}




/* seitenaufbau */
.jahr {
    font-size: 20px;
	 color: lightsalmon;
	 font-weight: normal;
	 font-style: italic;
}
.jahrklein {
    font-size: 18px;
	 color: lightsalmon;
	 font-weight: normal;
	 font-style: italic; 
}
.pubjahr {
    font-size:12px;
    color: lightgray;
}

.autor {
	 font-size: 14px;
	 font-weight: normal;
}

.titel {
	 font-size: 24px;
	 font-weight: bold;
	 color: Cyan;
}

.untertitel {
	 font-size: 20px;
	 font-weight: 500;
}

.titel2 {
	 font-size: 20px;
	 font-weight: normal;
	 color: ;
	 font-style: italic;
}

.abteilung {
	 font-size: 28px;
	 font-weight: normal;
	 font-style: italic; 
	 color: PaleTurquoise;
}

.medium {
	 font-size: 14px;
	 font-weight: normal;
}


.nummer {
	 font-size: 18;
	 font-weight: normal;
	 color: ;
	 font-style: italic;
}

.was {
	 font-size: 14;
	 font-weight: normal;
	 font-style: normal;
	 color: ;
}


/* Slideshow container */
.slideshow-container {
  max-width: 600px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */
.prev, .next {
	  width: 60px;
  cursor: pointer;
  position: absolute;
  top: 70%;
  padding: 8px;
  margin-top: -28px;
  color: white;
  font-weight: bold;
  font-size: 36px;
  transition: 0.4s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 30px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev, .next {
 background-color: rgba(0,0,0,0.1);
 }
 
 .prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.3);
  }

a:hover {
    color: darkred; 
	 /* background-color:  rgba(155,155,155,0.0); */
    text-decoration: none; 
    font-style: italic;
}

/* Caption text */
.text {
/*  color: #f2f2f2; */
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  font-size:12px;
  line-height: 18px;
  padding: 2px 2px;
  position: absolute;
  bottom: 15px;
  width: 95%;
  text-align: left;
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .0} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .0} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 375px) {
/*  .prev, .next, */
   .text {font-size: 16px}
}