/* CSS Reset */
* { margin: 0; padding: 0; }

body {
overflow-x: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  margin-top: 1px;
}

.progress-container {
  width: 100%;
  height: 2px;
  background: transparent;
  top:0px;
  position: fixed;
  z-index:1001;
}

.progress-bar {
  height: 2px;
  background: #fff;
  width: 0%;

}

html, body {
margin: 0;
padding: 0;
height: 100%; /* WICHTIG!!! UM DEN ANZEIGENBEREICH AUF 100% ZU STRECKEN */
      padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  background-color:#000;
}

img {
  border: 0px;
}


.width_over_all {
width: 768px;
width: 660px;
width: 980px;
width: 1240px;

}
#rechtsnavigation {
min-width:200px;
margin-left:10px;
padding: 2px 10px 0 2px;
background-image: url(‚../img/weissglass.png‘);
position:absolute;

left:1000px;
left:1260px;
top:130px;
  z-index:100000:
}

#wrapper {
/*margin: auto;  Div soll zentriert werden */
margin-left:20px;
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* 100% Höhe im FF auch mit Scroll-leiste */
/* background-image: url(‚../img/weissglass.png‘); */
background-color: rgba(255, 255, 255, 0.05);
}




#navigation {
background-image: url(‚../img/weissglass.png‘);
}
#content {
/* background-image: url(‚../img/rauchglass.png‘); */

}





#hauptnavigation {
height:20px;
padding: 0 10px 0 10px;
background-color:rgba(0,0,0,0.3);

-webkit-box-shadow: 0px 15px 25px -15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 15px 25px -15px rgba(0, 0, 0, 0.5);
box-shadow: 0px 15px 25px -15px rgba(0, 0, 0, 0.5);
border-bottom: 1px solid #aaa;

}

#logo {
padding-left: 0px;
padding-top: 0px;
display:block;
width:auto;
height:110px;
}
.logo {
width:682px;
height:auto;
margin-left:10px;
margin-top:10px;
}
#content {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}


#content ul {list-style-type: none;}
#content li {
padding-left: 1.3em;
}
#content li:before {
  content: „\f00c“; /* FontAwesome Unicode  */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
  line-height:11px!important;

}
#permalink {
width:100%;
  padding:2px 2px 2px 2px ;
  background-color:#ccc;
  opacity:0.8;


}

#sub_menu {
position:fixed;
bottom:5px;
right:5px;
  left:5px;
text-align:right;
padding-right: 0px;
margin-right: 0px;
padding-top: 0px;
width:100%!important;
background-color:rgba(255,255,255,0.3);
background-color:rgba(0,0,0,0.4);
display:block;
  z-index:+1;



}

.no-show {display:none!important;}

a.xxlightbox .image-embed-item {
  padding-left:18px;
  max-width: 980px;
  height:auto;
  position: relative;
  display: block;

}
a.xxxlightbox {max-width: 980px;}

.img-fluid {
  max-width:100%;
  width:100%;
  height:auto;

}





/* ########  MEDIA QUERIES ### */

@media (max-width: 1300px) { /* KLEINER ALS   */



    #wrapper {
    width: 100%;
    margin-left:0px;
    }

    #rechtsnavigation {display:none;}
    #hauptnavigation {display:none;}
    #sub_menu {display:none;}
    .iframe {display:none;}
    .logo {width:360px; height:auto;}
    #logo {height:60px;}

    #logo {
    position:absolute;
    float:left;
    top:0px;
    }

    .ce-media img,.breakpoint{
    width:100%;
    height:auto;
    }


    .csc-textpic .breakpoint{
    width:33.33333%;
    height:auto;
    }



    h1 {
    font-size: 2.2em!important;
    }
    h2 {
    font-size: 2.0em!important;
    }
    h3 {
    font-size: 1.8em!important;
    }
    h4 {
    font-size: 1.6em!important;
    }
    h5 {
    font-size: 1.4em!important;
    }

    /* IMG GALLERIEN BILDEIGENSCHAFTEN AUSWÄHLBAR*/

    .responsive_galery_25 {
    width:25%!important;
    height:auto!important;
    }

    .responsive_galery_33 {
    width:33.33333%!important;
    height:auto!important;
    }

    .responsive_galery_50 {
    width:50%!important;
    height:auto!important;
    }
    .responsive_galery_100 {
    width:100%!important;
    height:auto!important;
    }






}



@media (min-width: 1040px) { /* größer als 1024 - 4 spaltig */
    /* .breakpoint {  max-width: 24%;   }  */

  #mobile_logo{display:none;}
  .slicknav_menu {display:none;}

}

@media screen and (max-width: 1300px) {
  .js #menu {
    display:none;
  }

  .js .slicknav_menu {
    display:block;

  }

    .logo {width:260px; height:auto;}
    #logo {height:60px;}

}

@media  (max-width: 318px) {
    .logo {
    width:150px;
    height:21px;
    margin-left:10px;
    margin-top:10px;
    }
    h1 {
    font-size: 2.2em!important;
    }
    h2 {
    font-size: 1.6em!important;
    }
    h3 {
    font-size: 1em!important;
    }

    .csc-textpic .breakpoint{
    width:50%;
    height:auto;
    }





}


    .responsive_galery_25 {
    width:25%!important;
    height:auto!important;
    }

    .responsive_galery_33 {
    width:33.33333%!important;
    height:auto!important;
    }

    .responsive_galery_50 {
    width:50%!important;
    height:auto!important;
    }
    .responsive_galery_100 {
    width:100%!important;
    height:auto!important;
    }


.layout_bild_halbe_breite  {
  max-width: 50%;
  width: 50%;
  float: left;
  margin-bottom:0px;

}

.layout_bild_viertel_breite  {
  max-width: 25%;
  width: 25%;
  float: left;
  margin-bottom:0px;

}

@media (max-width: 768px) { /* größer als 1024 - 4 spaltig */
  .layout_bild_viertel_breite  {
    max-width: 50%;
    width: 50%;
  }
}

@media (max-width: 320px) { /* größer als 1024 - 4 spaltig */
  .layout_bild_halbe_breite  {
    max-width: 100%;
    width: 100%;

  }
  .layout_bild_viertel_breite  {
    max-width: 100%;
    width: 100%;


  }
}



.layout_bild_halbe_breite img {

}

.videodescription .img-hover-zoom {
  max-width:200px;
  height:auto;
  display: block;
  float: left;
}
