#DSXArticle_5087727{
    float:left;
    width:100%;    
}


#dem26{
    position:relative;
    height:1000px;
    font-family: 'Roboto Mono Medium', Arial, sans-serif;
    font-size: 95%;    
}

#dem26 #map {
position: absolute;
    height: 100%;
    height:1000px;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}




#dem26 #DetailLayer{
    position: absolute;
        right:0;
    background:rgba(255,255,255,0.8)!important;
    width:33.333%;
    height: 100%;
    z-index: 9999999;
       display:none;

    /*min-width: 360px;*/
}

#dem26 .detailLayerInner {
  height: 95%;
  padding: 1rem 1.75rem;
}

#dem26 .dlContent .Beschreibung{
  max-height:350px;
  overflow: scroll;
}

#dem26 .dlContent .KartePic img{
  width:100%;
margin:0 0 1em 0;
}

#dem26 .dlClose {
	position: absolute;
	right: 1rem;
	top: -0.3em;
	font-size: 1rem;   
}

@media (min-width: 1281px) and (max-width: 1600px) {
    #dem26{
    max-width:1600px;
    height:1000px;
    font-size: 90%;        
    } 
    
    #dem26 #map {
    height:1000px;
    }    
}


@media (min-width: 1024px) and (max-width: 1280px) {
    #dem26{
    max-width:1280px;
    height:950px;
    font-size: 85%;        
    }
    #dem26 #map {
    height:950px;
    }
    #dem26 .dlClose { 
    right: 1rem;
    top: -0.9em;
    font-size: 0.9rem;
    }
}



@media (min-width: 768px) and (max-width: 1023px) {
     #dem26{
    max-width:1023px;
    height:900px;
    font-size: 72.5%;        
    }
    #dem26 #map {
    height:900px;
    }
    #dem26 #DetailLayer{
    width:35%;
    } 
    #dem26 .detailLayerInner {
    padding: 0.75rem 1.25rem;   
    }
    #dem26 .dlContent .Beschreibung{
    max-height:330px;
    overflow: scroll;
    }
    #dem26 .dlClose { 
    right: 1rem;
    top: -1em;
    font-size: 0.9rem;
    }
}

@media (min-width: 641px) and (max-width: 767px) {
    #dem26{
    max-width:767px;
    width:100%;
    height:850px;
    font-size: 65%;        
    }
    #dem26 #map {
    height:850px;
    }
    #dem26 #DetailLayer{
    width:40%;
    }
    #dem26 .detailLayerInner {
    padding: 0.75rem 1.25rem;   
    }
    #dem26 .dlClose { 
    right: 1rem;
    top: -1em;
    font-size: 0.9rem;
    }
    .map-scroll-zone {
      position: absolute;
      left: 12px;
      bottom: 12px;
      width: 84px;
      height: 84px;
      z-index: 1000;
      border-radius: 999px;
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      touch-action: pan-y;
      pointer-events: auto;
    }
    .map-scroll-zone:after{
     content:"Hallo";
     content:"\f338";
     font-family:'Font Awesome 5 Pro';
     font-size:6em;
     color:#B6B2AA;
     position:absolute;
        left:30%;
        top:10%;
    }
    
    
}

@media (min-width: 481px) and (max-width: 640px) {
    #dem26{
    max-width:640px;
    width:100%;
    height:700px;
    font-size: 60%;        
    }
    #dem26 #map {
    height:700px;
    }
    #dem26 .dlContent .Beschreibung{
    max-height:250px;
    overflow: scroll;
    }
    #dem26 #DetailLayer{
    width:45%;
    }
    #dem26 .detailLayerInner {
    padding: 1rem 1.25rem 0.75rem 1.25rem;   
    }
    #dem26 .dlClose { 
    right: 1rem;
    top: -1em;
    font-size: 0.8rem;
    }
    .map-scroll-zone {
      position: absolute;
      left: 12px;
      bottom: 12px;
      width: 84px;
      height: 84px;
      z-index: 1000;
      border-radius: 999px;
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      touch-action: pan-y;
      pointer-events: auto;
    }
    .map-scroll-zone:after{
     content:"Hallo";
     content:"\f338";
     font-family:'Font Awesome 5 Pro';
     font-size:6em;
     color:#B6B2AA;
     position:absolute;
     left:35%;
     top:10%;
    }
}

@media (min-width: 240px) and (max-width: 480px) {
    #dem26{
    max-width:480px;
    width:100%;
    height:550px;
    font-size: 60%;        
    }
    #dem26 #map {
    height:550px;
    }
    #dem26 .dlContent .Beschreibung{
    max-height:200px;
    overflow: scroll;
    }
    #dem26 #DetailLayer{
    top:550px;    
    background:rgba(255,255,255,1)!important;
    width:100%;
    height:700px;
    }
    #dem26 .detailLayerInner {
    padding: 1rem 1.25rem 0.75rem 1.25rem;   
    }
    #dem26 .dlClose { 
    right: 1rem;
    top: -1.5em;
    font-size: 0.8rem;
    }
    .map-scroll-zone {
      position: absolute;
      left: 12px;
      bottom: 12px;
      width: 84px;
      height: 84px;
      z-index: 1000;
      border-radius: 999px;
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      touch-action: pan-y;
      pointer-events: auto;
    }
    .map-scroll-zone:after{
     content:"Hallo";
     content:"\f338";
     font-family:'Font Awesome 5 Pro';
     font-size:6em;
     color:#B6B2AA;
     position:absolute;
     left:33%;
     top:12%;
    }
    #dem26 #DetailLayer:before{
    position:Absolute;
    background:#fff;
    font-family:'Font Awesome 5 Pro';
    content:"\f05a";
    font-size:4em;
    width:70px;
    height:100px;
    right:-1px;
    top:-98px;
    padding:0.4em 0 0 0.4em;
    border-radius:0.5em 0.5em 0 0;
}
}


#dem26 .alert{
    background:#2d6ca2;
    padding:20px;
    clear:both;
    border:solid 1px silver;
    color:#fff;
}
#dem26 .alert a{
    color:#fff;
}



#dem26 #Mapstuff{
    width:100%;
    margin-top:50px
}
#dem26 #MapOuter{
    width:100%;
    height:800px;
    position: relative;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    display:block;
    margin-bottom:20px;

    }
.outer{

}


#dem26 .fa-map-marker-alt{
    font-size: 24px;
}
#dem26 #Quelle{
	z-index:99;
	bottom:0px;
position:absolute;
font-size: 11px;
color: #0078a8;
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
padding: 0 5px;
width:auto;
}





#dem26 .dlClose {
	margin-top: 2rem;
}

#dem26 #kontakt{
    font-size:14px;
    clear:both;
       margin-top:30px;
    width:800px;
    float:left;
    margin-bottom:20px
}
#dem26 #mylogo{
    float:right
}

#dem26 .failX{
    border: 2px red solid;
}
#dem26 legend{
color: #384759;
  font-family: "Avenir Next";
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 30px;
}
#dem26 .a_container{
    width:100%;
    clear:both;
    margin: 0.5rem 0;
}
#dem26 label{
    display: inline-block;
    font-weight: bold;
    margin-bottom: 5px;
	 width: 100%;
	 margin-top:15px
}
#dem26 input {

    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    padding: 6px 12px;
    vertical-align: middle;
    width: 470px;
-webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
border: 1px solid #DDDDDD;
}
#dem26 input:focus,textarea:focus,select:focus {
  box-shadow: 0 0 5px rgb(113, 197, 94);
  border: 1px solid rgb(113, 197, 94);
}
#dem26 input[type="button"] {
    /*! background-image: linear-gradient(to bottom, #428bca 0px, #2d6ca2 100%); */
    /*! background-repeat: repeat-x; */
    border: 2px solid #82bc66;
color:#82bc66;
width:100%;
margin:2rem auto;
/*! position:absolute; */
    bottom:10px;
    /*! right:0; */
    border-radius: 22px;
    left: 3rem;
    cursor: pointer;

}
#dem26 input[type="button"]:hover {
    /*! background-image: linear-gradient(to bottom, #428bca 0px, #2d6ca2 100%); */
    /*! background-repeat: repeat-x; */
    border: 2px solid #82bc66;
background-color:#82bc66;
    color: #fff;

}
#dem26 #newProjekt{
      top:auto;
      bottom: -3rem;
      max-width: 280px;
}
#dem26 #Suchen {
	max-width: 280px;
	cursor: pointer;
}
#dem26 #Ergebnis{
    clear:both;
    position: absolute;
/*! top: 0; */
right: 0;
    bottom: 0;
    width: 50%;
    text-align: center;
    font-size: 24px;
    left: 0;
    margin: auto;
}
#dem26 #aktiv{

}


#dem26 #KeinErgebnis{
position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;

	left: 0;
background:#333;
-webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
filter: alpha(opacity=80);
	-khtml-opacity: 0.8;
	-moz-opacity: 0.8;
	opacity: 0.8;

}
#dem26 #KeinErgebnis h1{
	  margin-top: 10%;
color:#eee;
}
#dem26 #loader{
position: fixed;
	z-index: 999;
text-align: center;
width: 100%;
height: 100%;
background:#000;
}
#dem26 #loader img{
 margin-top: 10%;
}


#dem26 .leaflet-popup-content{
/*! color:#444; */
}


#dem26 #flexbox{
position:absolute;
margin-top:2%;
right:10px;
z-index:300000;
}
#dem26 #formweg{
background:#fff;
width:10px;
padding:8px 1px 6px 5px;
position:absolute;
left:-16px;
top:33px
}
#dem26 #formweg a{
color:#666;
font-size:120%
}

#dem26 #formwegbottom{
background:#fff;
width:12px;
padding:8px 1px 6px 2px;
position:absolute;
left:-16px;
top:0px
}
#dem26 #formwegbottom a{
color:#666;
font-size:120%
}
#dem26 #info{
font-size:80%;
width:175px;
}
#dem26 fieldset{
margin:0;
padding:10px;
padding-right:8px;
border: 1px #2b669a solid;
background-image: linear-gradient(to bottom, #428bca 0px, #2d6ca2 100%);
border-radius: 4px;
}
#dem26 .Legende{
background:#eee;
padding:10px;
margin-top:3px;
width:160px;
border-radius: 4px;
font-size:90%
}
#dem26 .Legende h5{
margin:0;
font-size:110%;
margin-bottom:5px
}
#dem26 .Legende i{
width:12px;
height:12px;
display:block;
float:left;
margin-right:10px
}
#dem26 .Legendeblue{
background:#428bca;
}
#dem26 .Legendered{
background:#CA4449
}
#dem26 .Legendeorange{
background:#FF6633
}
#dem26 .Legendeyellow{
background:#FFCC66
}
#dem26 .Legendebrown{
background:#994D00
}
#dem26 .Legendepatrol{
background:#65A42A
}
#dem26 .Legendepurple{
background:#841C87
}
#dem26 .Legendegreen{
background:#247B2B
}
#dem26 .hold{
width:100%;
float:left;
}
#dem26 label{
    display: inline-block;
    font-weight: bold;
    margin-bottom: 5px;
   width: 100%;
   margin-top:10px;
color:#fff;

}
#dem26 input {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 90%;
    padding: 3px 3px;
    vertical-align: middle;
-webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
border: 1px solid #DDDDDD;
height:15px;
 width: 150px;
}
#dem26 input:focus,#dem26 textarea:focus,#dem26 select:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}


#dem26 select{
    background:#fff;
    border-color: #2b669a;
color:#428bca;
width:100px;
font-weight:bold;
float:left;
height:24px;
margin-top:20px;
cursor: pointer;
    cursor: hand;
}
#dem26 #PLZ{
width:70px;
float:left;
margin-right:15px;
height:15px;
}
#dem26 #distance{
width:60px;
height:23px;
}





#dem26 #DetailLayer a{
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 padding:0 1em calc(.35em - 2px);
 background-color:#fff;
 border-color:#f4f4f4;
 border-width:2px;
 color:#000;
 cursor:pointer;
 font-weight:600;
 text-align:center;
 white-space:nowrap;
  font-size: 100%;
line-height: 1.5556rem;
  background-color: transparent;
border: 2px solid #0051a6;
color: #0051a6;
 height: auto;
  border-radius:0;
  text-decoration: none;
}
#dem26 #DetailLayer a:hover{
    background-color: #0051a6;
  color: #fff;
}



#dem26 #DetailLayer{
  color:#163971;
  padding: 0;
  display:block;
    
}



#dem26 #DetailLayer h1{
  margin:0.25em 0 0.75em 0;
  font-family: 'Archivo Black Regular', Arial, sans-serif;
  font-size: 150%;
  letter-spacing: -0.05em;
  width:90%; 
}

#dem26 .slick-slider{
  margin:0 0 1.5em -2.5%;
  width:105%;
  height:300px;
  background:grey;  
}

#dem26 .slick-slider img{
  width:125%!important;
  background:grey;  
}


#dem26 .dlContent h3{
  line-height: 1.75rem;
  /*margin: 2rem 0 0.05rem 0;*/
  text-transform:uppercase;
}





#dem26 .dlContent p{
  
}

#dem26 .Ansprechpartner {
    width: 105%;
    height: auto;
    float: left;
    margin: 1.5em 0 0 -2.5%;
    padding:0;
    position: relative;
    color:#fff;;
    font-family: 'Roboto Mono Regular', Arial, sans-serif;
    font-size: 80%;
    line-height:125%;
    background-image: url(https://www.deinehrenamt.de/Preview/img/bretterhintergrund.jpg) !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: top left;
        border-radius:0.75em;

}

#dem26 .Ansprechpartner .black {
    width:100%;
    height:100%;
    float:left;
    background:rgba(0,0,0,0.5);
    padding:1em 2.5% 1em 2.5%;
    border-radius:0.75em;
    position:relative;
}


#dem26 .Ansprechpartner .black:After {
position:Absolute;
    font-family:'Font Awesome 5 Pro';
    content:"\f05a";    
    color:rgba(255,255,255,0.35);
    font-size:5em;
    right:0.25em;
    top:0.55em
}

#dem26 .Ansprechpartner h3 {
  line-height: 1.25rem;
  margin: 0 0 0.25em 0;
  text-transform: initial;
  font-weight:800
}

#dem26 .slick-prev::before, .slick-next::before {
	font-family: 'Arial';
	font-size: 20px;
	line-height: 1.15rem;
	opacity: .75;
	color: #0051a6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  border: 2px solid #0051a6;
  border-radius:22px;
  padding:2px;
  height:20px;
  width:20px;
  display: block;
}

#dem26 .slick-next:before{
  content: '›';
  margin-right: 5px;
  margin-left: -5px;
}
#dem26 .slick-prev:before{
  content: '‹';
  margin-left: 5px;
}
.slick-slide{
  margin: 0 2rem;
}
#dem26 .slick-slide img {
	display: block;
	width: 100%;
}



#dem26 .slick-prev::before, .slick-next::before {
	font-family: 'Arial';
	font-size: 20px;
	line-height: 1.15rem;
	opacity: .75;
	color: #0051a6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  border: 2px solid #0051a6;
  border-radius:22px;
  padding:2px;
  height:20px;
  width:20px;
  display: block;
}

#dem26 .slick-next:before{
  content: '›';
  margin-right: 5px;
  margin-left: -5px;
}
#dem26 .slick-prev:before{
  content: '‹';
  margin-left: 5px;
}
#dem26 .slick-slide{
  margin: 0 2rem;
}
#dem26 .slick-slide img {
	display: block;
	width: 100%;
    background:red;
}