@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-ThinItalic.eot');
    src: url('../fonts/RobotoCondensed-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-ThinItalic.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-ThinItalic.woff') format('woff'),
        url('../fonts/RobotoCondensed-ThinItalic.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-ThinItalic.svg#RobotoCondensed-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: auto;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Thin.eot');
    src: url('../fonts/RobotoCondensed-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-Thin.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Thin.woff') format('woff'),
        url('../fonts/RobotoCondensed-Thin.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-Thin.svg#RobotoCondensed-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-ExtraLightItalic.eot');
    src: url('../fonts/RobotoCondensed-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-ExtraLightItalic.woff') format('woff'),
        url('../fonts/RobotoCondensed-ExtraLightItalic.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-ExtraLightItalic.svg#RobotoCondensed-ExtraLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: auto;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-ExtraLight.eot');
    src: url('../fonts/RobotoCondensed-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-ExtraLight.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-ExtraLight.woff') format('woff'),
        url('../fonts/RobotoCondensed-ExtraLight.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-ExtraLight.svg#RobotoCondensed-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Light.eot');
    src: url('../fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-Light.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Light.woff') format('woff'),
        url('../fonts/RobotoCondensed-Light.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-Light.svg#RobotoCondensed-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-LightItalic.eot');
    src: url('../fonts/RobotoCondensed-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-LightItalic.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-LightItalic.woff') format('woff'),
        url('../fonts/RobotoCondensed-LightItalic.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-LightItalic.svg#RobotoCondensed-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: auto;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Regular.eot');
    src: url('../fonts/RobotoCondensed-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Regular.woff') format('woff'),
        url('../fonts/RobotoCondensed-Regular.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-Regular.svg#RobotoCondensed-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Italic.eot');
    src: url('../fonts/RobotoCondensed-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-Italic.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Italic.woff') format('woff'),
        url('../fonts/RobotoCondensed-Italic.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-Italic.svg#RobotoCondensed-Italic') format('svg');
    font-weight: 400;
    font-style: italic;
    font-display: auto;
}

#blind{
display: none; 
}

#usereinstellung{
position: absolute; 
min-width: 60px; 
max-width: 61px; 
height: 50px;
overflow: hidden;
top: 0px;
left: 5%;
border-top: 0px solid #DFDFDF; 
border-right: 0px solid #FFFFFF; 
border-left: 1px solid #DFDFDF; 
border-bottom: 0px solid #FFFFFF; 
padding: 10px 20px 0px 0px; 
margin: 0px; 
z-index: 5200; 
background-color: #FFFFFF; 
-webkit-transition: 0.5s ease-in-out;-moz-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;-ms-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
}
#usereinstellung.anzeigen{
min-width: 500px; 
border-top: 0px solid #DFDFDF; 
border-right: 1px solid #DFDFDF; 
border-left: 1px solid #DFDFDF; 
border-bottom: 0px solid #DFDFDF; 
}
#usereinstellung span.einstelltext{
padding: 0px 0px 0px 0px; 
margin: 0px; 
color: #999999; 
border: 1px solid #DFDFDF; 
}

#usereinstellung a#einstellung{
border-left: 0px solid #DFDFDF; 
margin: 0px 10px 0px 0px; 
padding: 0px 10px 0px 14px; 
height: 60px;
width: 40px;
display: inline-block; 
}
#usereinstellung #contrast, #usereinstellung #schrift{
-webkit-transition: 0.5s ease-in-out;-moz-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;-ms-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
display: inline-block; 
height: 50px;
opacity: 0.0; 
}

#usereinstellung.anzeigen #einstellung, #usereinstellung.anzeigen #contrast, #usereinstellung.anzeigen #schrift{
opacity: 1.0; 
} 
#usereinstellung img{
width: 40px; 
height: auto; 
}
#usereinstellung #contrast{
border-left: 1px solid #CCCCCC; 
margin: 0px 0px 0px 0px; 
padding: 0px 20px 0px 20px; 
}
#usereinstellung #schrift{
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC; 
margin: 0px 0px 0px 0px; 
padding: 0px 20px 0px 20px; 
}
#keksloeschen{
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 20px; 
}

body #usereinstellung #contrast a.increasecont{
display: inline-block;
}
body #usereinstellung #contrast a.decreasecont{
display: none;
}
body.aktiv #usereinstellung #contrast a.increasecont{
display: none;
}
body.aktiv #usereinstellung #contrast a.decreasecont{
display: inline-block;
}

sup, sub{
line-height:0px;
}

#einstell_popup{
position: absolute; 
font-size: 0.9em; 
top: 60px; 
left: calc(3% + 15px); 
width: 30%; 
height: auto; 
z-index: 5300; 
background-color: #FFFFFF; 
border: 1px solid #DFDFDF; 
border-radius: 20px 20px 20px 20px; 
padding: 20px; 
}


#texte .bunt{
background-color: #991E2A;
color: #FFFFFF; 
text-decoration: none; 
padding: 10px 30px 10px 30px; 
margin: 0px 0px 15px 0px; 
border-radius: 10px; 
font-weight: 500; 
font-size: 1.2em; 
display: inline-block; 
}

#texte a.bunt{
color: #FFFFFF; 
font-weight: 500; 
}


#einstell_popup a#closecookie{
float: right; 
background-color: #999999; 
color: #FFFFFF; 
text-decoration: none; 
padding: 5px 20px 5px 20px; 
margin: 0px 0px 10px 10px; 
border-radius: 10px; 
}
#einstell_popup a.ds_link{
font-weight: 300;
color: #666666;
text-decoration: none;
}

#einstell_popup.inaktiv{
display: none; 
}

.pop_caret{
width: 20px; height: 20px; 
transform: rotate(45deg); 
border-left: 1px solid #DFDFDF;
border-right: 0px solid #DFDFDF; 
border-top: 1px solid #DFDFDF; 
border-bottom: 0px solid #DFDFDF; 
display: inline-block; 
position: absolute; 
top: -10px; 
left: calc(5% + 15px); 
background-color: #FFFFFF; 
}


html, body{
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
width: 100%; 
height: auto; 
font-family: 'Roboto Condensed'; 
font-size: 1.1em; 
font-weight: 100;
font-style: normal; 
line-height: 1.5em; 
}

body.aktiv img, body.aktiv .slideshow-container{
filter: contrast(200%) grayscale(300%);
}
body #usereinstellung #contrast a.decreasecont img{filter: contrast(100%) grayscale(0%);}

body.aktiv div#kopf{background-color: #000000;}
body.aktiv #texte i{color: #000; }

#seite{
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 80%); 
display: inline-block; 
padding: 0px; 
margin: 0px; 
min-height: calc(100% - 800px); 
width: 100%; 
}

ul.navtop{
list-style-type: none; 
position: absolute; 
height: 110px; 
top: 40px; 
left: 5%; 
border-left: 1px solid #DFDFDF;
display: inline-block; 
padding: 50px 0px 0px 0px; 
margin: 0px 0px 0px 0px; 
z-index: 1000; 
}
ul.navtop li{

font-size: 0.9em; 
}
ul.navtop li a{
text-align: right;
padding: 0px 20px 0px 20px; 
margin: 0px 0px 0px 0px; 
text-decoration: none; 
color: #000000; 
border-left: 0px solid #DFDFDF;
border-right: 0px solid #DFDFDF; 
border-top: 0px solid #DFDFDF; 
border-bottom: 0px solid #DFDFDF; 
text-transform: uppercase; 
-webkit-transition: 0.5s ease-in-out;-moz-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;-ms-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
}
/*ul.navtop li:nth-child(1) a{
border-left: 0px solid #DFDFDF;
}*/

ul.navtop li a:hover, ul.navtop li a:focus{
color: #991E2A; 
}

/*CONTAINER FUER DEN SLIDER*/
div#kopfbereich{
width: 100%; 
height: 400px; 
padding: 0px; 
margin: 0px 0px 30px 0px; 
border: 0px solid #FFFFFF; 
display: inline-block; 
float: left; 
}

/* Slideshow container */
.slideshow-container {  
z-index: 1; 
position: relative; 
top: 0px; 
height: 400px; 
width: calc(90% - 2px); 
padding: 0px; 
margin: 0px 5% 0px 5%; 
border-radius: 0px; 
background-repeat: no-repeat; 
background-size:100% auto;
background-position: left bottom;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF; 
border-top: 0px solid #FFFFFF; 
border-bottom: 0px solid #FFFFFF; 
overflow: hidden; }
/* Hide the images by default */.mySlides {width: 100%; height: 100%; display: none; -webkit-transition: 0.8s ease-in-out;-moz-transition: 0.8s ease-in-out;-o-transition: 0.8s ease-in-out;-ms-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;}
.mySlides.fade img{min-width: 100%; min-height: 300px; padding: 0px; margin: 0px; }
/* Caption text */.text {  color: #FFFFFF;  font-size: 1.0em;  padding: 8px 12px;  position: absolute;  bottom: 8px;  width: auto; margin: 0px 9% 0px 9% !important; float: left;  text-align: center; background-color: #000000; opacity: 0.7; }
@keyframes fade {
  0% {opacity: 0.2}
  50% {opacity: 0.5}
  50% {opacity: 0.5}
  100% {opacity: 1.0}
}

/* Fading animation */.fade {  animation-name: fade;  animation-duration: 1.5s;}@keyframes fade {  from {opacity: 0.2}  to {opacity: 1.0}}



div#kopf{
border: 0px solid #FF0000; 
width: 100%; 
height: 400px; 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
display: inline-block; 
z-index: 1000; 
position: relative; 
background-color: #991E2A; 
}

span#logo{
width: 40%; 
height: 300px; 
padding: 0px; 
margin: 10px 30% 0px 30%; 
border: 0px solid #FF0000;
display: block;  
float: left; 
position: relative; 
text-align: center; 
z-index: 100; 
}
span#logo #logoimg{
height: 60%; 
width: auto; 
padding: 0px; 
margin: 40px 0px 0px 0px; 
border: 0px solid #FF0000; 
position: relative; 
top: 0%; 
-webkit-transition: 0.5s ease-in-out;-moz-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;-ms-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
}
span#logo #logoimg:hover, span#logo #logoimg:focus{
height: 62%; 
top: -1%; 
}

span#logotext{
width: 100%; 
text-align: center; 
padding: 0px 0px 0px 0px; 
margin: 0px 0px 0px 0px; 
border: 0px solid #FF0000; 
float: left; 
font-weight: 300; 
color: #CCCCCC; 
font-size: 1.1em; 
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out; 
}

.start span#logotext{
color: #FFFFFF; 
font-size: 0.3em; 
}
.start span#logotext.load{
color: #CCCCCC; 
font-size: 1.1em; 
}



.infobox{
width: 20%; 
float: right; 
padding: 20px 20px 20px 20px; 
margin: 5px 0px 0px 40px; 
background-color: #E6E6E6; 
color: #000000; 
min-height: 500px; 
display: block; 
font-size: 0.8em; 
line-height: 1.2em; 
position: relative; 
}
div.ma_card{
width: calc(36% - 50px);
float: left; 
padding: 20px 20px 20px 20px; 
margin: 0px 20px 20px 0px; 
background-color: #FFFFFF; 
border: 0px solid #999999; 
color: #000000; 
display: block; 
font-size: 1.0em; 
line-height: 1.5em; 
position: relative; 
}
div.ma_card h5{
font-weight: 300; 
font-size: 1.2em; 
line-height: 1.5em; 
padding: 0px; 
margin: 0px; 
color: #991E2A; 
}
.ma_small{
font-size: 0.8em; 
}



/*.impressum .infobox, 
.impressum .preise, 
.impressum .infomaterial, 
.impressum .netzwerk, 
.impressum .datenschutz, 
.impressum .medizinproduktebeauftragter, 
.impressum .kontakt{
top: -50px;
}*/

#texte img.rechts{
float: right; 
display: block; 
padding: 0px 0px 0px 0px; 
margin: 0px 0px 20px 60px; 
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 
border: 2px solid #FFFFFF;
}
#texte img.rechts.drehen.eins{
transform: rotate(-2deg); 
position: relative; 
right: -15px; 
top: 0px; 
}
#texte img.rechts.drehen.zwei{
transform: rotate(3deg); 
position: relative; 
right: -25px; 
top: 12px; 
}
#texte img.rechts.drehen.drei{
transform: rotate(-3deg); 
position: relative; 
right: 0px; 
top: 20px; 
}

#texte table.newstable{
background-color: #FFFFFF; 
padding: 20px; 
margin: 0px; 
width: 100%; 
}
#texte table.newstable tr{
border: 1px solid #FF0000;  
width: 100%; 
padding: 10px 0px 10px 0px; 
}
#texte table.newstable tr td{
padding: 10px 10px 10px 10px; 
vertical-align: top; 
border: 1px solid #DFDFDF;  
float: none; 
}
.veranstaltungsbox.even{
width: calc(100% - 40px); 
margin: 0px 0px 40px 0px; 
padding: 20px; 
background-color: #FFF4CB; 
display: inline-block; 
}




#texte .infobox img{
width: 100%; 
padding: 0px 0px 0px 0px; 
margin: 0px 0px 0px 0px; 
}
#texte .infobox a{
display: inline-block; 
width: 100%; 
padding: 5px 0px 0px 0px; 
margin: 0px 0px 0px 0px; 
border: 0px solid #FFFFFF; 
color: #000000; 
}
.infobox hr{
border-top: 1px solid #FFFFFF; 
border-left: 0px solid #FFFFFF; 
border-right: 0px solid #FFFFFF; 
border-bottom: 0px solid #FFFFFF; 
}
table.bildtable{
float: right; 
padding: 0px; 
margin: 0px 0px 0px 30px; 
}
table.bildtable img{
border: 2px solid #FFFFFF; 
position: relative; 
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

table.bildtable tr td img.eins{
transform: rotate(-2deg); 
right: -15px; 
top: 0px; 
}
table.bildtable tr td img.zwei{
transform: rotate(3deg); 
left: -25px; 
top: -12px; 
}
table.bildtable tr td img.drei{
transform: rotate(-3deg); 
left: 0px; 
top: -20px; 
}

#soz_berufe, #fsj_chris, #fsj_chris img, #wirstellenein img{
-webkit-transition: 0.4s ease-in-out;-moz-transition: 0.4s ease-in-out;-o-transition: 0.4s ease-in-out;-ms-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
}
#soz_berufe{
width: 20%; 
max-width: 300px; 
height: auto; 
position: absolute; 
right: 5%; 
top: 180px; 
transform: rotate(-1.5deg);  
border: 0px solid #FF0000; 
padding: 0px 0px 0px 0px; 
margin: 0px 0px 0px 0px; 
z-index: 500;
}
#soz_berufe img{
width: 90%; 
height: auto; 
position: absolute; 
right: 0px; 
padding: 0px 0px 0px 0px; 
margin: 0px 0px 0px 0px; 
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out; 
}

.start #soz_berufe img{
right: -800px; 
}
.start #soz_berufe.load img{
right: 0px; 
}



#fsj_chris{
width: 300px; 
max-width: 400px; 
height: 190px; 
position: absolute; 
right: 0px; 
top: 0px; 
border: 0px solid #FF0000; 
overflow: hidden; 
padding: 0px 0px 0px 10px; 
margin: 0px 0px 0px 0px; 
z-index: 5; 
}
#fsj_chris img{
position: relative; 
top: 10px; 
right: -40px;
width: 100%; 
height: auto; 
transform: rotate(-2deg);  
border: 2px solid #FFFFFF; 
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out; 
}

.start #fsj_chris img{
right: -800px;
}
.start #fsj_chris.load img{
right: -40px;
}



#fsj_chris img:hover, #fsj_chris img:focus, #soz_berufe:hover, #soz_berufe:focus{
transform: rotate(0deg);  
}


#wirstellenein{
width:30%; 
max-width: 600px;
min-width: 400px; 
height: auto; 
position: absolute; 
right: 0px; 
top: 20px; 
border: 0px solid #FF0000; 
overflow: hidden; 
padding: 50px 0px 0px 10px; 
margin: 0px 0px 0px 0px; 
z-index: 500; 
}


#wirstellenein img{
position: relative; 
right: -50px;
top: 0px; 
width: 100%; 
height: auto; 
transform: rotate(-1.5deg); 
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out; 
}
#wirstellenein img:hover, #wirstellenein img:focus{
transform: rotate(0deg); 
}

.start #wirstellenein img{
right: -800px;
}
.start #wirstellenein.load img{
right: -50px; 
}





#news_container{
background-color: #FFFFFF; 
color: #000000; 
padding: 0px 20px 20px 20px; 
margin: 0px 0px 0px 0px; 
width: calc(72% - 30px); 
display: inline-block; 
}

.newsbox{
display: block; 
border-left: 0px solid #999999; 
border-right: 1px solid #999999; 
border-top: 0px solid #999999; 
border-bottom: 0px solid #999999; 
border-radius: 0px; 
float: left; 
padding: 0px 1% 0px 1%; 
width: 30%; 
margin: 0px 1% 0px 0px; 
}
.newsbox:nth-child(4){
border-right: 0px solid #999999; 
}

/*span#logo.fixiert{
position: fixed; 
left: 5%; 
top: 0px; 
width: 30%; 
}*/

#responsive, #responsive_top{display: none; }
#desktop{display: block; width: 100%; float: right; }

ul#nav{
width: 90%; 
height: 70px; 
padding: 10px 5% 0px 5%; 
margin: 0px 0px 0px 0px; 
border-top: 0px solid #DDDDDD; 
display: inline-block; 
list-style-type: none; 
position: relative; 
top: 10px; 
background-color: #FFFFFF; 
opacity: 0.9; 
z-index: 5000; 
box-shadow: rgba(0, 0, 0, 0.50) 0px 10px 10px 0px;
}
ul#nav.fixiert{
position: fixed;
padding: 10px 5% 0px 5%; 
width: 90%; 
height: 70px; 
top: 0px;  
left: 0px; 
opacity: 0.9; 
font-size: 0.9em; 
display: block; 
}
ul#nav li a{
display: block;  
text-decoration: none; 
color: #000000; 
text-transform: uppercase; 
font-weight: 200; 
padding: 0px 10px 0px 10px; 
margin: 0px 0px 0px 6px; 
text-align: center; 
border: 0px solid #FF0000; 
height: 69px;
background-color: #FFFFFF; 
white-space: nowrap;
}
ul#nav li a:hover, ul#nav li a:focus{
background-color: #DFDFDF; 
}
ul#nav li{
float: left; 
display: table; 
padding: 0px 2% 0px 2%; 
margin: 0px; 
width: 12%; 
border: 0px solid #FF0000; 
line-height: 70px; 
}

ul#nav li.haschild ul{
display: none; 
}

ul#nav li ul.subnav{
text-align: left; 
max-height: 0px; 
overflow: hidden; 
opacity: 0.0; 
display: inline-block; 
list-style-type: none; 
max-width: 50%; 
width: 30%; 
padding: 0px 0px 0px 0px; 
margin: 0px; 
position: absolute; 
z-index: 1200; 
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; 
border-bottom: 1px solid #DFDFDF; 
border-left: 1px solid #DFDFDF; 
border-right: 1px solid #DFDFDF; 
border-top: 0px solid #DFDFDF; 
background-color: #FFFFFF; 
}
ul#nav li ul.subnav li{
float: left; 
display: block; 
width: 96%; 
position: relative; 
padding: 0px 0px 0px 0px; 
margin: 0px 2% 0px 2%;  
}
ul#nav li ul.subnav li.rightfloat{
float: left; 
}

ul#nav li ul.subnav li a{
display: block; 
font-weight: 100; 
font-size: 1.0em; 
line-height: 1.0em; 
padding-top: 10px; 
padding-right: 5px; 
padding-bottom: 10px; 
padding-left: 5px; 
margin: 0px; 
text-align: left; 
height: 20px;
}

ul#nav li ul.subnav.ausgeklappt{
opacity: 1.0; 
max-height: 1000px; 
overflow: hidden; 
padding: 10px 0px 10px 0px; 
margin: 0px; 
}



#nav a:focus-visible{
border: 0px solid #FF000 !important; 
 box-shadow: 0 0px 16px #0005;
}

/* **** Dieses klappt aktive Menu aus *******
#start ul#nav.aktiv li.start ul.subnav, #verein ul#nav.aktiv li.verein ul.subnav, #unserehaeuser ul#nav.aktiv li.haeuser ul.subnav, #leistungen ul#nav.aktiv li.leistungen ul.subnav, #aktuelles ul#nav.aktiv li.aktuelles ul.subnav, #kontakt ul#nav.aktiv li.kontakt ul.subnav{
opacity: 1.0; 
max-height: 1000px; 
overflow: hidden; 
padding: 10px 0px 10px 0px; 
margin: 0px; 
}*/




ul#nav li span.caret{
border-left: 1px solid #000000; 
border-right: 0px solid #CCCCCC; 
border-top: 1px solid #000000; 
border-bottom: 0px solid #CCCCCC; 
transform: rotate(225deg);
width: 5px; 
height: 5px; 
padding: 0px; 
margin: 0px; 
position: relative; 
top: -53px; 
left: calc(50% + 5px); 
z-index: 100;
display: inline-block; 
}


/*ANFANG_Links_einfaerben_Desktop*/
#start ul#nav li.start a, #verein ul#nav li.verein a, #unserehaeuser ul#nav li.haeuser a, #leistungen ul#nav li.leistungen a, #aktuelles ul#nav li.aktuelles a, #kontakt ul#nav li.kontakt a, #wohnstift ul#nav.aktiv li.haeuser a, #wohnstift ul#nav.aktiv li.haeuser li.wohnstift a, #wohnungen_hammersteinstr ul#nav.aktiv li.haeuser a, #wohnungen_hammersteinstr ul#nav.aktiv li.haeuser li.wohnungen_hammersteinstr a, #haus_christophorus ul#nav.aktiv li.haeuser a, #haus_christophorus ul#nav.aktiv li.haeuser li.haus_christophorus a, #haus_st_georg ul#nav.aktiv li.haeuser a, #haus_st_georg ul#nav.aktiv li.haeuser li.haus_st_georg a, #leitbild ul#nav.aktiv li.verein a, #leitbild ul#nav.aktiv li.verein li.leitbild a, #baugeschichte ul#nav.aktiv li.verein a, #baugeschichte ul#nav.aktiv li.verein li.baugeschichte a, #stiftung ul#nav.aktiv li.start a, #stiftung ul#nav.aktiv li.start li.stiftung a, #ehrenamt ul#nav.aktiv li.start a, #ehrenamt ul#nav.aktiv li.start li.ehrenamt a, #preise ul#nav.aktiv li.start a, #preise ul#nav.aktiv li.start li.preise a, #download ul#nav.aktiv li.start a, #download ul#nav.aktiv li.start li.infomaterial a, #netzwerk ul#nav.aktiv li.start a, #netzwerk ul#nav.aktiv li.start li.netzwerk a, #impressum ul#nav.aktiv li.start a, #impressum ul#nav.aktiv li.start li.impressum a, #datenschutz ul#nav.aktiv li.start a, #datenschutz ul#nav.aktiv li.start li.datenschutz a, #medizinproduktebeauftragter ul#nav.aktiv li.start a, #medizinproduktebeauftragter ul#nav.aktiv li.start li.medizinproduktebeauftragter a, #wohnstiftleistungen ul#nav.aktiv li.leistungen a, #wohnstiftleistungen ul#nav.aktiv li.leistungen li.wohnstiftleistungen a, #betreutes_wohnen ul#nav.aktiv li.leistungen a, #betreutes_wohnen ul#nav.aktiv li.leistungen li.betreutes_wohnen a, #ambulant_betr_wohngemeinschaften ul#nav.aktiv li.leistungen a, #ambulant_betr_wohngemeinschaften ul#nav.aktiv li.leistungen li.amb_betr_wohngemeinschaften a, #tagespflege ul#nav.aktiv li.leistungen a, #tagespflege ul#nav.aktiv li.leistungen li.tagespflege a, #stat_pflege_kurzzeitpflege ul#nav.aktiv li.leistungen a, #stat_pflege_kurzzeitpflege ul#nav.aktiv li.leistungen li.stat_pflege_kurzzeitpflege a, #ambulanter_dienst ul#nav.aktiv li.leistungen a, #ambulanter_dienst ul#nav.aktiv li.leistungen li.ambulanter_dienst a, #menue_bringdienst ul#nav.aktiv li.leistungen a, #menue_bringdienst ul#nav.aktiv li.leistungen li.menue_bringdienst a {font-weight: 300; color: #991E2A; }

#start ul#nav li.start ul li a, #verein ul#nav li.verein ul li a, #unserehaeuser ul#nav li.haeuser ul li a, #leistungen ul#nav li.leistungen ul li a, #aktuelles ul#nav li.aktuelles ul li a, #kontakt ul#nav li.kontakt ul li a, #wohnstift ul#nav.aktiv li.haeuser li a, #wohnungen_hammersteinstr ul#nav.aktiv li.haeuser li a, #haus_christophorus ul#nav.aktiv li.haeuser li a, #haus_st_georg ul#nav.aktiv li.haeuser li a, #leitbild ul#nav.aktiv li.verein li a, #baugeschichte ul#nav.aktiv li.verein li a, #stiftung ul#nav.aktiv li.start li a,#ehrenamt ul#nav.aktiv li.start li a, #preise ul#nav.aktiv li.start li a, #download ul#nav.aktiv li.start li a, #netzwerk ul#nav.aktiv li.start li a, #impressum ul#nav.aktiv li.start li a, #datenschutz ul#nav.aktiv li.start li a, #medizinproduktebeauftragter ul#nav.aktiv li.start li a, #wohnstiftleistungen ul#nav.aktiv li.leistungen li a, #betreutes_wohnen ul#nav.aktiv li.leistungen li a, #ambulant_betr_wohngemeinschaften ul#nav.aktiv li.leistungen li a, #tagespflege ul#nav.aktiv li.leistungen li a, #stat_pflege_kurzzeitpflege ul#nav.aktiv li.leistungen li a, #ambulanter_dienst ul#nav.aktiv li.leistungen li a, #menue_bringdienst ul#nav.aktiv li.leistungen li a {font-weight: 100;  color: #000000; }
/*ENDE_Links_einfaerben_Desktop*/

/*ANFANG_Links_einfaerben_Mobile*/
#start #responsive ul#navresponsive li.start a, #verein #responsive ul#navresponsive li.verein a, #unserehaeuser #responsive ul#navresponsive li.haeuser a, #leistungen #responsive ul#navresponsive li.leistungen a, #aktuelles #responsive ul#navresponsive li.aktuelles a, #kontakt #responsive ul#navresponsive li.kontakt a, #wohnstift #responsive ul#navresponsive.aktiv li.haeuser a, #wohnstift #responsive ul#navresponsive.aktiv li.haeuser li.wohnstift a, #wohnungen_hammersteinstr #responsive ul#navresponsive.aktiv li.haeuser a, #wohnungen_hammersteinstr #responsive ul#navresponsive.aktiv li.haeuser li.wohnungen_hammersteinstr a, #haus_christophorus #responsive ul#navresponsive.aktiv li.haeuser a, #haus_christophorus #responsive ul#navresponsive.aktiv li.haeuser li.haus_christophorus a, #haus_st_georg #responsive ul#navresponsive.aktiv li.haeuser a, #haus_st_georg #responsive ul#navresponsive.aktiv li.haeuser li.haus_st_georg a, #leitbild #responsive ul#navresponsive.aktiv li.verein a, #leitbild #responsive ul#navresponsive.aktiv li.verein li.leitbild a, #baugeschichte #responsive ul#navresponsive.aktiv li.verein a, #baugeschichte #responsive ul#navresponsive.aktiv li.verein li.baugeschichte a, #stiftung #responsive ul#navresponsive.aktiv li.start a, #stiftung #responsive ul#navresponsive.aktiv li.start li.stiftung a, #ehrenamt #responsive ul#navresponsive.aktiv li.start a, #ehrenamt #responsive ul#navresponsive.aktiv li.start li.ehrenamt a, #preise #responsive ul#navresponsive.aktiv li.start a, #preise #responsive ul#navresponsive.aktiv li.start li.preise a, #download #responsive ul#navresponsive.aktiv li.start a, #download #responsive ul#navresponsive.aktiv li.start li.infomaterial a, #netzwerk #responsive ul#navresponsive.aktiv li.start a, #netzwerk #responsive ul#navresponsive.aktiv li.start li.netzwerk a, #impressum #responsive ul#navresponsive.aktiv li.start a, #impressum #responsive ul#navresponsive.aktiv li.start li.impressum a, #datenschutz #responsive ul#navresponsive.aktiv li.start a, #datenschutz #responsive ul#navresponsive.aktiv li.start li.datenschutz a, #medizinproduktebeauftragter #responsive ul#navresponsive.aktiv li.start a, #medizinproduktebeauftragter #responsive ul#navresponsive.aktiv li.start li.medizinproduktebeauftragter a, #wohnstiftleistungen #responsive ul#navresponsive.aktiv li.leistungen a, #wohnstiftleistungen #responsive ul#navresponsive.aktiv li.leistungen li.wohnstiftleistungen a, #betreutes_wohnen #responsive ul#navresponsive.aktiv li.leistungen a, #betreutes_wohnen #responsive ul#navresponsive.aktiv li.leistungen li.betreutes_wohnen a, #ambulant_betr_wohngemeinschaften #responsive ul#navresponsive.aktiv li.leistungen a, #ambulant_betr_wohngemeinschaften #responsive ul#navresponsive.aktiv li.leistungen li.amb_betr_wohngemeinschaften a, #tagespflege #responsive ul#navresponsive.aktiv li.leistungen a, #tagespflege #responsive ul#navresponsive.aktiv li.leistungen li.tagespflege a, #stat_pflege_kurzzeitpflege #responsive ul#navresponsive.aktiv li.leistungen a, #stat_pflege_kurzzeitpflege #responsive ul#navresponsive.aktiv li.leistungen li.stat_pflege_kurzzeitpflege a, #ambulanter_dienst #responsive ul#navresponsive.aktiv li.leistungen a, #ambulanter_dienst #responsive ul#navresponsive.aktiv li.leistungen li.ambulanter_dienst a, #menue_bringdienst #responsive ul#navresponsive.aktiv li.leistungen a, #menue_bringdienst #responsive ul#navresponsive.aktiv li.leistungen li.menue_bringdienst a {font-weight: 300; color: #991E2A; }

#start #responsive ul#navresponsive li.start ul li a, #verein #responsive ul#navresponsive li.verein ul li a, #unserehaeuser #responsive ul#navresponsive li.haeuser ul li a, #leistungen #responsive ul#navresponsive li.leistungen ul li a, #aktuelles #responsive ul#navresponsive li.aktuelles ul li a, #kontakt #responsive ul#navresponsive li.kontakt ul li a, #wohnstift #responsive ul#navresponsive.aktiv li.haeuser li a, #wohnungen_hammersteinstr #responsive ul#navresponsive.aktiv li.haeuser li a, #haus_christophorus #responsive ul#navresponsive.aktiv li.haeuser li a, #haus_st_georg #responsive ul#navresponsive.aktiv li.haeuser li a, #leitbild #responsive ul#navresponsive.aktiv li.verein li a, #baugeschichte #responsive ul#navresponsive.aktiv li.verein li a, #stiftung #responsive ul#navresponsive.aktiv li.start li a,#ehrenamt #responsive ul#navresponsive.aktiv li.start li a, #preise #responsive ul#navresponsive.aktiv li.start li a, #download #responsive ul#navresponsive.aktiv li.start li a, #netzwerk #responsive ul#navresponsive.aktiv li.start li a, #impressum #responsive ul#navresponsive.aktiv li.start li a, #datenschutz #responsive ul#navresponsive.aktiv li.start li a, #medizinproduktebeauftragter #responsive ul#navresponsive.aktiv li.start li a, #wohnstiftleistungen #responsive ul#navresponsive.aktiv li.leistungen li a, #betreutes_wohnen #responsive ul#navresponsive.aktiv li.leistungen li a, #ambulant_betr_wohngemeinschaften #responsive ul#navresponsive.aktiv li.leistungen li a, #tagespflege #responsive ul#navresponsive.aktiv li.leistungen li a, #stat_pflege_kurzzeitpflege #responsive ul#navresponsive.aktiv li.leistungen li a, #ambulanter_dienst #responsive ul#navresponsive.aktiv li.leistungen li a, #menue_bringdienst #responsive ul#navresponsive.aktiv li.leistungen li a {font-weight: 100;  color: #000000; }
/*ENDE_Links_einfaerben_Mobile*/

#texte{
width: 82%; 
padding: 0px 5% 0px 0px; 
margin: 50px 0px 100px 10%; 
border-top: 0px solid #E5E5E5;
border-bottom: 0px solid #FFFFFF;
border-left: 0px solid #FFFFFF;
border-right: 0px solid #FFFFFF;
display: block; 
float: left; 
z-index: 1100; 
position: relative; 
font-size: 1.1em; 
line-height: 1.5em; 
}
#texte.fixiert{
padding: 80px 5% 0px 0px; 
}
#texte a img{
height: auto; 
margin: 0px 1% 0px 20px; 
padding: 0px; 
float: left; 
}
#texte span.untertitel{
width: 30%; 
height: auto; 
margin: 0px 1% 0px 20px; 
padding: 0px; 
float: left; 
text-align: center; 
}

div.bilderbox{
display: inline-block; 
width: 100%; 
}
span.bild_border{
width: calc(33.3% - 20px); 
height: auto; 
float: left; 
border: 0px solid #E5E5E5; 
margin: 0px 10px 20px 0px; 

}

span.bild_border .thumbnail{
float: left; 
width: 100%; 
min-height: 400px; 
border: 0px solid #FF0000; 
background-size: contain; 
background-position: center top; 
background-repeat: no-repeat; 
background-color: #FFFFFF; 
}




.textimg{width: 200px; margin: 0px 0px 0px 30px; padding: 0px; }

span.bild_border .ma_text{
text-align: center; 
width: 100%; 
display: block; 
background-color: #FFFFFF; 
font-size: 0.7em; 
}

#texte h2{
font-weight: 300; 
}
#texte h3{
font-size: 1.3em; 
font-weight: 300; 
padding: 0px; 
margin: 30px 0px 10px 0px; 
}



div#fuss{
text-align: center; 
width: 98%; 
margin: 0px; 
padding: 5px 1% 5px 1%; 
background-color: #999999; 
opacity: 0.9;  
color: #FFFFFF; 
font-size: 0.85em; 
border-top: 1px solid #E5E5E5;
border-bottom: 0px solid #FFFFFF;
border-left: 0px solid #FFFFFF;
border-right: 0px solid #FFFFFF;
display: inline-block; 
}
div#fuss a{
color: #FFFFFF; 
text-decoration: none; 
}
div#fuss a:hover, div#fuss a:focus{
text-decoration: underline; 
}

/* SLIDER ACCORDEON Style the buttons that are used to open and close the accordion panel */
.accordion {
  color: #444;
  cursor: pointer;
  padding: 5px 5px 5px 70px;
  border-radius: 5px; 
  border-top: 1px solid #DFDFDF; 
  border-left: 0px solid #DFDFDF; 
  border-right: 0px solid #DFDFDF; 
  border-bottom: 0px solid #DFDFDF; 
  margin: 10px 0px 0px 0px; 
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
    background-image: url("../images/sys/plus_1.png"); 
  background-repeat: no-repeat; 
  background-size: 30px 30px; 
  background-position: 10px 50%; 
  background-color: transparent;
}
.accordion:hover {
}
.accordion h2{
font-size: 2.0em; 
font-weight: 300; 
text-decoration: none; 
}
.accordion h2:hover{text-decoration: underline; }

.accordion h2 .small{
font-size: 0.5em; 
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
}
.active{
  background-image: url("../img/sys/minus.png"); 
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
    margin: 0px 0px 10px 0px; 
  max-height: 0px; 
  overflow: hidden;
  transition: max-height 1.0s ease-out;
  opacity: 0.9; 
}

hr{
border-top: 1px solid #999999; 
border-left: 0px solid #999999;
border-right: 0px solid #999999;
border-bottom: 0px solid #999999;
}
.small{
font-size: 0.7em; 
}
#texte a{
font-weight: 300; 
color: #666666; 
text-decoration: none; 
}
#texte a:hover, #texte a:focus{
text-decoration: underline; 
}
#texte ul{
list-style-type: circle;
padding: 0px 0px 0px 10px; 
margin: 0px; 
}
#texte ul.textul{
list-style-position: outside;
list-style-type: " · ";
padding: 0px 0px 0px 0px; 
margin: 0px; 
max-width: 70%; 
font-weight: 100; 
}
#texte ul.textul li{
overflow-x: visible;
padding: 0px 0px 0px 10px; 
margin: 0px 0px 0px 10px; 
}

#texte ul li{
padding: 0px 0px 0px 20px; 
margin: 0px; 
/*display: block; */
}

#texte i{
font-weight: 300; 
color: #991E2A; 
}

#texte table{
width: auto; 
}
#texte table tr{}
#texte table tr td{
padding: 5px 20px 5px 5px; 
margin: 0px; 
border: 0px solid #DFDFDF; 
line-height: 1.1em; 
}
#texte table.weiss tr td{
line-height: 1.5em; 
padding: 10px 20px 20px 20px; 
}



#texte table img{
max-width: 400px; 
height: auto; 
}

/*FORMULAR*/

#formular{
padding: 0px 0px 100px 0px; 
border: 0px solid #FFFFFF; 
display: inline-block; 
width: 50%; 
margin: 30px 0px 30px 0px; 
}
#formular #persdaten{
margin: 30px 0px 30px 0px; 
width: 100%; 
border: 0px solid #FFFFFF; 
display: inline-block; 
}
#formular #persdaten div{
border: 0px solid #FFFFFF; 
display: inline-block; 
width: 100%; 
}


#formular fieldset {
width: 100%; 
border-radius: 20px; 
margin: 0px 0px 0px 0px; 
}

#formular fieldset span.feld{
width: 100%; 
border-radius: 50px; 
background-color: #666666; 
display: inline-block; 
}
#formular fieldset span.callme, #formular fieldset span.mailme, #formular fieldset span.snailme{
width: 70%; 
min-width: 350px; 
border: 0px solid #FFFFFF; 
float: left; 
color: #FFFFFF; 
}
#formular fieldset input{
float: left; 
margin: 10px 30px 10px 0px; 
width: 50px;
padding: 5px 5px 5px 5px;
}


#formular .block, #formular hr{
width: 100%; 
float: left; 
display: block; 
margin: 10px 0px 0px 0px; 
border-top: 1px solid #999999; 
}
#formular label{
width: 18%; 
float: left; 
margin: 10px 0px 0px 0px; 
}
#formular b.txt{
width: 28%;  
font-size: 0.9em; 
float: left; 
margin: 10px 0px 0px 0px; 
white-space: nowrap; 
}
#formular #f-message{
width: 100%; 
min-height: 150px; 
float: left; 
margin: 10px 0px 30px 0px; 
}
#kommentar label{
width: 100%; 
margin: 30px 0px 0px 0px; 
}


#formular input{
width: 60%; 
float: right; 
padding: 5px 5% 5px 5%;  
margin: 10px 0px 0px 0px; 
border-radius: 20px; 
border: 1px solid #999999; 
font-size: 0.9em; 
}
#formular input.check{
width: auto; 
float: left; 
padding: 5px 10px 5px 0px; 
margin: 5px 10px 0px 0px; 
border-radius: 0px; 
border: 0px solid #999999; 

}
#formular textarea{
width: 100%; 
border: 1px solid #999999; 
float: left; 
display: block; 
padding: 5px 10px 5px 10px; 
border-radius: 20px; 
font-family: 'Roboto Condensed'; 
font-size: 1.0em; 
font-weight: 200;
}

#datenschutzoptin{
border: 1px solid #999999; 
display: inline-block; 
width: 100%; 
margin: 30px 0px 0px 0px; 
padding: 10px 10px 10px 10px; 
}
#datenschutzoptin input#checkbox_ja{
float: left; 
margin: 10px 30px 10px 0px; 
width: 50px;
padding: 5px 5px 5px 5px;
}
#formular input#pruefwert{
font-weight: 500; 
width: 30%;
padding: 5px 5px 5px 15px;
}

#formular input#submitter, #formular input#resetter{
width: 30%; 
display: block; 
float: left; 
border: 1px solid #999999; 
}
#formular input#submitter{
margin: 30px 5% 0px 0px; 
} 
#formular input#resetter{
margin: 30px 30% 0px 0px; 
}


#formular #yodata{
display: inline-block; 
padding: 0px 0px 0px 0px;
margin: 30px 0px 30px 0px; 
}

#formular span.pflichtfeld{
color: #CC0000; 
font-weight: bold; 
}

#formular a{
color: #CC0000; 
font-weight: 500; 
}

#formular img{
width: 20%; 
padding: 10px 60% 30px 0%; 

}

/*FORMULAR_ENDE*/


@media screen and (min-width: 1201px) and (max-width: 1600px) {
div#kopfbereich{
height: 400px;
}
.slideshow-container{
height: 400px;
}
ul#nav li{
font-size: 0.9em; 
padding: 0px 1% 0px 1%;
width: auto; 
min-width: 12%; 
}

}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
ul#nav li{
font-size: 0.9em; 
padding: 0px 1% 0px 1%;
width: auto; 
}
#texte{font-size: 0.9em; }
h2{font-size: 1.2em;}
div#fuss{font-size: 0.7em;}
div#kopfbereich{
height: 400px;
}
.slideshow-container{
height: 400px;
}
#fsj_chris{
width: 250px; 
}

#texte table img{
max-width: 200px; 
}
}

@media screen and (min-width: 300px) and (max-width: 1023px) {
#formular{width: 100%; font-size: 0.9em; }
#formular fieldset{width: 90%; }
#formular .label{width: 30%; white-space: nowrap; display: inline-block; border: 0px solid #FFFFFF;}
#formular .input{width: 65%; padding: 5px 0% 5px 0%; display: inline-block;  border: 0px solid #FFFFFF; }
#formular input{width: 95%;}
#formular fieldset span.callme, #formular fieldset span.mailme, #formular fieldset span.snailme{
white-space: nowrap; 
font-size: 0.7em; 
width: 60%; 
min-width: 150px;
}
#formular #pruefung .input{width: 50%; margin: 0px 25% 0px 25%; float: left; display: block; }
#formular #pruefung .label{width: 50%; float: left; display: block; }
#formular input#submitter, #formular input#resetter {width: 80%;display: inline-block; float: none; }
.mySlides{background-position:center center !important;}
#texte h2{font-size: 1.2em; }
span#logo{border: 0px solid #FFFFFF; }
/*span#logo.fixiert{position: relative; top: 0px; left: 0px;}*/
span#logo span.line_eins{text-align: center; font-size: 5.4vw;}
span#logo span.line_zwo{text-align: center; font-size: 3.2vw;}
#news_container{width: calc(100% - 30px);}
#seite{z-index: 1200; position: relative; }
#responsive{display: inline-block; position: relative; width: 100%; padding:0px; margin: 0px; }
#desktop{display: none; }
#responsive ul{
width: 100%; 
max-height: 0px; 
overflow: hidden; 
margin: 0px; 
padding: 50px 0px 0px 0px; 
list-style-type: none; 
background-color: #DFDFDF; 
-webkit-transition: 0.8s ease-in-out;-moz-transition: 0.8s ease-in-out;-o-transition: 0.8s ease-in-out;-ms-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;
text-transform: uppercase; 
background-image:url("../img/nav_resp.png");
background-size: auto 50px;
background-position: right top;
background-repeat: no-repeat;
}
#responsive ul ul{
padding: 0px 0px 10px 0px; 
background-image: none !important;
}

#responsive ul.oeffnen{
max-height: 5000px; 
}

#responsive ul li{
width: 80%; 
padding: 20px 10% 10px 10%; 
border-top: 1px solid #FFFFFF; 
}
#responsive ul li li{
width: 98%; 
padding: 0px 1% 0px 1%; 
border-top: 0px solid #FFFFFF; 
}
#responsive ul li.kontakt{
padding: 0px 10% 30px 10%; 
}

#responsive ul li a{
text-decoration: none; 
color: #000000; 
display: block; 
}
#responsive ul li{
margin: 0px 0px 0px 10px;
font-weight: 300; 
}
#responsive ul li ul li{
margin: 0px 0px 0px 20px;
font-weight: 100; 
}
#texte h3{border:0px solid #FFFFFF; width: 100%; display: block; float: left; font-size: 1.0em; }

.veranstaltungsbox.even{
width: 80%; 
}
div.ma_card{
width: calc(100% - 50px);
}
.newsarchiv{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: block; 
border: 0px solid #FFFFFF; 
width: 100%; 
overflow-x: auto; 
}

#texte table.newstable{
max-width: 90%;
position: relative; 
float: none; 
border: 1px solid #DFDFDF;  
width: 90%;
font-size: 0.8em; 
padding: 50px 10px 10px 10px; 
margin: 0px; 
background-image: url("../img/next.png"); 
background-repeat: no-repeat; 
background-position: left 10px top 10px; 
background-size: 30px 30px; 
}

#texte table.newstable tr{
border: 1px solid #FF0000;  
width: 100%; 
padding: 10px 0px 10px 0px; 
}
#texte table.newstable tr td{
padding: 10px 10px 10px 10px; 
vertical-align: top; 
border: 1px solid #DFDFDF;  
float: none; 
}

}

@media screen and (min-width: 600px) and (max-width: 1023px) {
#usereinstellung{top: 260px; border: 0px solid #FFFFFF; }
#usereinstellung.anzeigen{border: 0px solid #FFFFFF;}
#einstell_popup{width: 60%; left: calc(5% - 20px); top: 315px;}
#responsive_top{width: auto; height: 50px;border: 0px solid #FF0000; display: block; }
#desktop_top{display: none; }
ul.navtop{
left: auto; right: 1%; 
border: 0px solid #FFFFFF; 
top: 0px; 
font-size: 0.9em; 
padding: 10px 0px 0px 0px;
}
ul.navtop li{
padding: 5px 0px 5px 0px; 
border: 0px solid #FF0000; 
}
ul.navtop li.impressum, ul.navtop li.datenschutz{display: none; }
span#logo{
height: 260px; 
margin: 10px 60% 0px 0%;
top: -40px;
}
div#kopf{height: 300px; top: -10px;}
#texte table img{
max-width: 150px; 
}
#wirstellenein{top: 70px; padding: 20px 0px 0px 10px; }
#soz_berufe{width: 30%; top: 200px;}
#fsj_chris{width: 250px; }

span.bild_border{width: calc(50% - 20px);}
div#kopf{
height: 300px;
}
.slideshow-container{
height: 300px;
}
}

@media screen and (min-width: 600px) and (max-width: 800px) {
#texte table{width: 100%; float: left; }
#texte table img{
max-width: 300px; 
}
#texte img.rechts{float: left; }
#texte table tr td{
max-width: 100% !important;
width: 100%; 
float: left; 
}
#texte table tr td:nth-child(even){
margin: 0px 0px 60px 0px; 
}
}

@media screen and (min-width: 300px) and (max-width: 599px) {
html, body{
overflow-x: hidden;
font-size: 1.2em; 
font-weight: 300;
font-style: normal; 
}
#usereinstellung{top: 260px; border: 0px solid #FFFFFF; }
#usereinstellung.anzeigen{border: 0px solid #FFFFFF;}
#einstell_popup{width: 84%; left: 15px; top: 315px; font-size: 0.8em; }
#einstell_popup a#closecookie{width: 90%; margin: 0px 3% 10px 3%;padding: 5px 2% 5px 2%; text-align: center;}

div#kopf{height: 200px; top: -10px;}
ul.navtop li.impressum, ul.navtop li.datenschutz{display: none; }
#responsive_top{width: auto; height: 50px;border: 0px solid #FF0000; display: block; }
ul.navtop{
left: auto; right: 1%; 
top: 0px; 
font-size: 0.8em; 
padding: 10px 0px 0px 0px;
border: 0px solid #FFFFFF; 
}
ul.navtop li{
padding: 5px 0px 5px 0px; 
}
span#logo{
width: 30%;
height: 260px; 
margin: 10px 66% 0px 4%;
top: -40px;
}
.start span#logotext.load{
font-size: 0.8em; 
}
div.ma_card{
width: calc(100% - 50px);
font-size: 0.8em; 
}

table.bildtable, #texte table{max-width: 60%; margin: 0px 20% 30px 0%; float: left;}
#texte img{max-width: 60%; margin: 0px 20% 0px 20%;  }
#wirstellenein{width: 60%; top: 70px; padding: 20px 0px 0px 10px; min-width: 220px; }
#soz_berufe{width: 50%; top: 150px;}
#fsj_chris{width: 180px; }


span.bild_border{width: calc(100% - 20px);}
div#kopfbereich{
height: 200px;
}
.slideshow-container{
height: 200px;
}
#texte table tr td{
max-width: 80%;
width: 100%; 
float: left; 
}
#texte table tr td:nth-child(even){
margin: 0px 0px 40px 0px; 
}
table.bildtable tr td img.eins{
right: -15px; 
}
table.bildtable tr td img.zwei{
left: 25px; 
}
table.bildtable tr td img.drei{
left: 20px; 
}

#texte img.rechts.drehen.eins{
right: -15px; 
}
#texte img.rechts.drehen.zwei{
right: 25px; 
}
#texte img.rechts.drehen.drei{
transform: rotate(-3deg); 
position: relative; 
right: auto; 
left: 20px; 
}


.infobox{display: none; }

#texte table.newstable{
width: 90%; 
padding: 50px 5px 10px 5px;
font-size: 0.65em; 
}
.newsarchiv{
overflow: auto;

}
.newsbox{width: 100%;
border-left: 0px solid #999999; border-right: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 1px solid #999999; padding: 20px 0px 20px 0px; 
}
div#fuss{
font-size: 0.7em; 
}


}