body {
 text-color:#000000;
 /* background-color:#D7D7D7; */
}

l, l2, l3, l5, l6, lo, h1, h2, mesf, mes {
 font-family: Garamond;
}

h1 {
 font-size: 40px;
 font-weight: bold;
 text-align: center;
 font-color: #000000;
}

h2 {
 font-size: 20px;
 font-weight: bold;
 text-align: left;
 font-color: #000000;
}

h3 {
 font-family: Garamond;
 font-size: 28px;
 text-align: center;
 color: #551a8b;
 text-shadow: 0 0 4px black,
				 4px 3px 4px #656671;
}

h4 {
 font-family: Garamond;
 font-size: 26px;
 text-align: center;
}

l {
 font-size: 17px;
}

l2 {
 font-size:18px;
 font-weight: bold;
}

l3 {
 font-size:15px;
}

l4 {
 font-size:12px;
}

l5 {
 font-size:16px;
 font-weight: bold;
}

l6 {
 font-size: 20px;
 font-weight: bold;
 color: #818181;
}

lo {
 font-size: 18px;
 font-weight: bold;
 text-decoration: underline;
 color: #000000;
}

mesf {
 font-size: 18px;
 font-weight: bold;
 color: #cd2626;
}

mes {
 font-size: 18px;
 font-weight: bold;
 color: #006400;
}

a:link {
 color: #0000A0;
 font-weight: bold;
 text-decoration: none;
}

a:hover {
 /*color: #A33A3D;*/
 text-decoration: underline;
}

a:visited {
 text-decoration: none;
}

ul_menu {
  list-style-image: url("../pics/Menuicon.png");
  list-style-position: inside;
  line-height: 260%;
}

ul_sfs {
  list-style-image: url("../pics/Listicon.png");
  list-style-position: inside;
  line-height: 200%;
}

/* Table mit runden Ecken */
table.rCorners {
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 10px;
  border: 1px solid white;
}

/* Item box */
 .item_box  {
  border-style: solid;
  border-width: 1px;
  border-color: #c0c0c0;
  background-color: rgb(235, 235, 235);
  margin: 4px 0px 8px 0px;
  padding: 5px;
  width: 120px;
  height: 200px; 
  font-size: 0.95em;
}

.item_box h4 {
  margin: -3px -3px 4px -3px;
  padding: 2px 2px 2px 3px;
  background-color: #6180A0;
  color: white;
  text-decoration: none;
  text-align: center;
}

.caption {
  font-size: 10pt;
  margin: 1em auto 1.2em auto;
}


/* PICTURE GALERIE */
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {align-items: center; }

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

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

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

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

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

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

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


/* VERLEIHUNGEN MENU */
/* Style the tab */
.tab {
  width: 100%;
  overflow: hidden;
  border: 0px solid #ccc;
  <!-- background-color: #CCA884; --> 
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #CCA884; <!-- inherit --> 
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 14px;
  transition: 0.3s;
  font-size: 16px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  width: 100%;
  display: none;
  padding: 6px 12px;
  border: 2px solid #ccc;
  border-top: none;
}

/* Popup Fenster */
.popup .overlay {
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.7);
	z-index:1;	 
	display:none;
  }

.popup .content {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%) scale(0);
	background:#fff;
	width:550px;
	height:220px;
	z-index:2;
	text-align:left;	
	padding:20px;
	box-sizing:border-box;
}

.popup .close-btn {
	cursor:pointer;
	position:absolute;
	right:20px;
	top:20px;
	width:30px;
	height:30px;
	background:#222;
	color:#fff;
	font-size:24px;
	font-weight:600;
	line-height:30px;
	text-align:center;
	border-radius:50%;
}

.popup.active .overlay {
	display:block;
}

.popup.active .content {
	transition:all 300ms ease-in-out;
	transform:translate(-50%,-50%) scale(1);
}