.btn-check:focus+.btn-primary, .btn-primary:focus {
    color: #000;
    background-color: #fff;
    border-color: #999;
    box-shadow: 0 0 0 0.25rem rgb(102, 102, 102);
}
.btn-primary {
    color: #000;
    background-color: #fff;
    border-color: #999;
    font-size: 1.5rem;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.btn-primary:hover {
    color: #fff;
    background-color: #999;
    border-color: #000;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: transparent;
}
.dropdown-item a, .dropdown-item a {
    display: block;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: lighter;
    font-size: 18px;
}
.dropdown-item.active a, .dropdown-item:active a {
    display: block;
    text-decoration: none;
    color: #15513d;
    font-weight: lighter;
    font-size: 18px;
}
a.social i.icon {
    color: rgb(68, 68, 68);
    font-size: 120%;
}
body {
    font-family: Quicksand !important;
	font-weight:300;
	font-size: 18px;
	color: #626a6e;
	background-color: #FFFFFF;
}
a {
    color: rgb(68, 68, 68);
    text-decoration: none;
	font-weight: 300;
	color: #000000;
}

a:hover, a:focus {
	text-decoration: none;
	font-weight:300;
	color: #9a9a9a;
}

h1 {
    color: #5A5859;
	font-weight:300;
	font-size: 35px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
h2 {
    color: #5A5859;
	font-weight: 300;
	font-size: 24px;
}
h3 {
    color: #5A5859;
	font-weight: 300;
	font-size: 22px;
}
h4 {
    color: #15513d;
	font-weight: 300;
	font-size: 20px;
}
p {
	color: #2c353a;
	font-size: 18px;
	padding-top: 5px;
	padding-bottom: 0px;
}
p1 {
	color: #15513d;
	font-weight: 600;
	font-size: 20px;	
}
hr{
	border: 0;
	height: 5px;
	background-image: linear-gradient(to right,
	rgba(0,0,0,0),
	rgba(0,0,0,0,75),
	rgba(0,0,0,0));

}
.weiss h2 {
	color: #5A5859;
	font-weight:600;
	font-size: 30px;
}

.weiss h2>span {
   padding-left: 0px;
   padding-right: 0px;

}
.grau {
	margin-top: 0px;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 5px;
	margin-bottom: 15px;
	background-color: #dde1e3;
}
.grau h1 {
	color: #15513d;
    margin-top: 18px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.grau h1>span {
   padding-left: 0px;
   padding-right: 0px;

}
.grau h2 {
	color: #15513d;
    margin-top: 1px;
	margin-bottom: 15px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.grau h2>span {
	color: #15513d;
	text-align: center;
   padding-left: 0px;
   padding-right: 0px;

}
.grau h3 {
	color: #15513d;
    margin-top: 0px;
    font-weight: 400;
	font-style:normal;
	font-size: 22px;
	text-align: left;
}

.grau h3>span {
   padding-left: 0px;
   padding-right: 0px;
}
.grau h4 {
	color: #000000;
    margin-top: 18px;
	font-weight: 300;
    font-weight: 400;
	font-style: italic;
	font-size: 18px;
	text-align: center;
}

.grau h4>span {
   background-color: #d1d7da;
   padding-left: 20px;
   padding-right: 20px;
}
.gelb {
	margin-top: 0px;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 5px;
	margin-bottom: 15px;
	background-color: #eff1f2;
}
.gelb h1 {
	color: #15513d;
    margin-top: 1px;
	margin-bottom: 15px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.gelb h1>span {
   padding-left: 0px;
   padding-right: 0px;

}
.gelb h2 {
	color: #15513d;
    margin-top: 1px;
	margin-bottom: 15px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.gelb h2>span {
	color: #15513d;
	text-align: center;
   padding-left: 0px;
   padding-right: 0px;

}
.gelb h3 {
	color: #15513d;
    margin-top: 0px;
    font-weight: 400;
	font-style:normal;
	font-size: 22px;
	text-align: left;
}

.gelb h3>span {
   padding-left: 0px;
   padding-right: 0px;
}
.gelb h4 {
	color: #000000;
    margin-top: 18px;
	font-weight: 300;
    font-weight: 400;
	font-style: italic;
	font-size: 18px;
	text-align: center;
}

.gelb h4>span {
   background-color: #d1d7da;
   padding-left: 20px;
   padding-right: 20px;
}
.mgrau {
	margin-top: 0px;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 5px;
	margin-bottom: 15px;
	background-color: #bcc1c4;
}
.mgrau h1 {
	color: #15513d;
    margin-top: 1px;
	margin-bottom: 10px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.mgrau h1>span {
   padding-left: 0px;
   padding-right: 0px;

}
.mgrau h2 {
	color: #15513d;
    margin-top: 1px;
	margin-bottom: 10px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.mgrau h2>span {
	color: #15513d;
	text-align: center;
   padding-left: 0px;
   padding-right: 0px;

}
.mgrau h3 {
	color: #15513d;
    margin-top: 0px;
    font-weight: 400;
	font-style:normal;
	font-size: 22px;
	text-align: left;
}

.mgrau h3>span {
   padding-left: 0px;
   padding-right: 0px;
}
.mgrau h4 {
	color: #000000;
    margin-top: 18px;
	font-weight: 300;
    font-weight: 400;
	font-style: italic;
	font-size: 18px;
	text-align: center;
}

.mgrau h4>span {
   background-color: #d1d7da;
   padding-left: 20px;
   padding-right: 20px;
}
.dunkel {
	margin-top: 0px;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 5px;
	margin-bottom: 15px;
	background-color: #ccd1d4;
}
.dunkel h1 {
	color: #15513d;
    margin-top: 1px;
	margin-bottom: 10px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.dunkel h1>span {
   padding-left: 0px;
   padding-right: 0px;

}
.dunkel h2 {
	color: #15513d;
    margin-top: 1px;
	margin-bottom: 10px;
    font-weight: 300;
	font-size: 26px;
	text-align: left;
}

.dunkel h2>span {
	color: #15513d;
	text-align: center;
   padding-left: 0px;
   padding-right: 0px;

}
.dunkel h3 {
	color: #15513d;
    margin-top: 0px;
    font-weight: 400;
	font-style:normal;
	font-size: 22px;
	text-align: left;
}

.dunkel h3>span {
   padding-left: 0px;
   padding-right: 0px;
}
.dunkel h4 {
	color: #000000;
    margin-top: 18px;
	font-weight: 300;
    font-weight: 400;
	font-style: italic;
	font-size: 18px;
	text-align: center;
}

.dunkel h4>span {
   background-color: #d1d7da;
   padding-left: 20px;
   padding-right: 20px;
}

/* START - FLIP-Personenbilder */
/* Im gesamten Container die Perspektive setzen */
.flip-container {
perspective: 1000px;
float: left;
margin: 5px;
}

/* Bereich drehen */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}

/* Container Groesse und Style */
.flip-container, .front, .back {
width: 376px;
max-width: 100%;
height: 237px;
}

/* Geschwindigkeit des Drehens anpassen - hier 2 Sekunden*/
.flipper {
transition: 2.0s;
transform-style: preserve-3d;
position: relative;
/* Hier die halbe Hoehe des Bildes eintragen */
transform-origin: 50% 100%;
}

/* Rueckseite des Fensters ausblenden */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

/* Vorderseite */
.front {
z-index: 2;
transform: rotateX(0deg);
background-size: 376px 237px !important;
background-repeat: no-repeat;
}

/* Rueckseite */
.back {
transform: rotateY(180deg);
opacity: 1;
background-size: 376px 237px !important;
background-repeat: no-repeat;
}

/* Inhalt Textbox vorne */
div.content1 {
  position: fixed;
  bottom: 0px;
width: 92%;
height: 40px;
margin: 8px;
padding: 8px;
color: Black;
border-radius: 10px;
background: rgba(255, 255, 255, 0.75);
border: Solid 1px  rgba(255, 255, 255, 0.75);
}

/* Inhalt Textbox hinten */
div.content2 {
  position: fixed;
  bottom: 0px;
width: 93%;
height: 237px;
margin: 8px;
padding: 8px;
color: Black;
border-radius: 10px;
background: rgba(255, 255, 255, 0.75);
border: Solid 1px  rgba(255, 255, 255, 0.75);
cursor: auto;
opacity: 1;
}

/* Style Link in Textbox hinten */
div.content2 a {
color: #bf857d;
text-decoration: Underline;
}
div.content2 a:hover {
color: #bf857d;
text-decoration: None;
}
/* ENDE - FLIP-Personenbilder */

.spalten4 {
    clear: left;
    float: left;
}
.content2, .content1 {
    font-size: 12px;
}
.content1 strong {
    font-size: 14px;
}

.inhalt img {
    max-width: 100%;
    height: auto;
}

/* Slide in Overlay from the Bottom */
.overlay-container {
    position: relative;
    float: left;
    padding: 3px;
    width: 50%;
}

.overlayimage {
    display: block;
	border-radius: 75px;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    bottom: 11px;
    left: 12px;
    right: 0;
    background-color: #b5bcc6;
	border-radius: 75px;
    overflow: hidden;
    width: 93%;
    height: 0;
    transition: .5s ease;
}

.overlay-container:hover .overlay {
    height: 90%;
}

.overlaytext {
    color: black;
    font-size: 18px;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.overlaytext p {
    margin-block-start: 0em !important;
    margin-block-end: 0em !important;

}
.overlaytext a {
    display: block;
    color: black;
}
.overlaytext a:hover {
    color: black;
}

@media only screen and (max-width: 978px) {
    .overlay-container {
        width: 100%;
    }
}
@media only screen and (max-width: 1385px) {
    .overlaytext {
        font-size: 16px;
    }
}

/* ENDE Slide in Overlay from the Bottom */





/*------------------------------------*\
    NAV
\*------------------------------------*/

@media screen and (min-width: 1200px) {
    nav.navbar {
    }

    .cssnav {
        list-style: none;
        font-weight: 500;
        margin-bottom: 0px;
        margin-left: -5px;
        float: left; /* Clear floats */
        width: 100%;
        /* Bring the nav above everything else--uncomment if needed.
        position: relative;
        z-index: 5;
        */
    }
    .cssnav li {
        float: left;
        margin-right: 5px;
        position: relative;
    }
    .cssnav a {
        display: block;
        font-size: 20px;
		font-weight: 500;
        padding-right: 5px;
        color: #000000;
		padding-left: 5px;
		padding-right: 5px;
        text-decoration: none;
    }
    .cssnav a:hover {
        color: #cfd3da;
		font-weight: 500;
		font-size: 20px;
        background-color: transparent;
        text-decoration: none;
    }
	.active a {
        color: #ffffff;
}
	.active{
		font-weight: 500;
		font-size: 20px;
        background-color: #b5bcc6;
		border-radius: 30px;
        text-decoration: none;
    }

    /*--- DROPDOWN ---*/
    .cssnav ul {
        list-style: none;
        position: absolute;
        left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
    }
    .cssnav ul li {
        padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
        float: none;
    }
    .cssnav ul a {
        white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }
    .cssnav li:hover ul { /* Display the dropdown on hover */
        left: 0; /* Bring back on-screen when needed */
        z-index: 999;
    }
    .cssnav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
        background-color: transparent;
        text-decoration: none;
    }
    .cssnav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
        text-decoration: none;
    }
    .cssnav li:hover ul li a:hover {
        color: rgba(21, 92, 143, 0.8);

    }
    .cssnav li ul {
        background-color: #FFFFFF;
        border: 1px solid #F0F0F0;
    }
    .cssnav li ul li {
        margin-left: -35px;
    }
    .cssnav li ul li a {
        color: #000;
        font-size: 18px;
    }
}

@media screen and (max-width: 1200px) {
  /*Formatierung Mobiles Menue*/
    .cssnav li, .cssnav > ul, .cssnav > ul > li  {
      float: none;
      list-style: none;
      font-size: 18px;
      line-height: 36px;
      border-bottom: #000 1px dotted;
    }
    .cssnav a {
        display: block;
        color: #000;
        font-weight: 500;
    }
    .cssnav li ul li {
      border-top: none;
    }
    .cssnav li ul li:last-child {
        border-bottom: none;
    }

    .cssnav > ul > li > ul, nav > ul > li:hover > ul {
      position: relative;
    }
    p, li {
        font-weight: 400;
    }
    .navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
    background-color: #48565d;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    }
}