/* STAADTSMEDIEN BASICS */ 
.sm-width {
    margin-left: auto;
    margin-right: auto;
    width: 1260px;
    box-sizing: border-box;
}
.sm-width-2 {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.sm-width-3 {
    width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* STAADTSMEDIEN ABSTÄNDE */ 
.sm-margin-top-xl{margin-top: 100px;}
.sm-margin-bottom-xl{margin-bottom: 100px;}
.sm-margin-top-bottom-xl{margin-top: 100px; margin-bottom: 100px;}
.sm-margin-top-l{margin-top: 50px;}
.sm-margin-bottom-l{margin-bottom: 50px;}
.sm-margin-top-bottom-l{margin-top: 50px; margin-bottom: 50px;}
.sm-margin-top-m{margin-top: 25px;}
.sm-margin-bottom-m{margin-bottom: 25px;}
.sm-margin-top-bottom-m{margin-top: 25px; margin-bottom: 25px;}

.sm-padding-top-xl{padding-top: 100px;}
.sm-padding-bottom-xl{padding-bottom: 100px;}
.sm-padding-top-bottom-xl{padding-top: 100px; padding-bottom: 100px;}
.sm-padding-top-l{padding-top: 50px;}
.sm-padding-bottom-l{padding-bottom: 50px;}
.sm-padding-top-bottom-l{padding-top: 50px; padding-bottom: 50px;}
.sm-padding-top-m{padding-top: 25px;}
.sm-padding-bottom-m{padding-bottom: 25px;}
.sm-padding-top-bottom-m{padding-top: 25px; padding-bottom: 25px;}

/* STAADTSMEDIEN GRID START */
.sm-grid-12-6:after,
.sm-grid-12-4:after,
.sm-grid-12-3:after,
.sm-grid-12-2:after{
  content: "";
  display: table;
  clear: both;
}
/* GRID 1/6 */
.sm-grid-12-2 > div,
.sm-grid-12-2 > li {
    width: 15%;
    margin-left: 2%;
    float:left;
    box-sizing: border-box;
}
.sm-grid-12-2 > div:nth-child(5n+1),
.sm-grid-12-2 > li:nth-child(5n+1) {   
    margin-left: 0;
}
/* Grid 1/4 */
.sm-grid-12-3 > div,
.sm-grid-12-3 > li {
    width: 23.5%;
    margin-left: 2%;
    float:left;
    box-sizing: border-box;
}
.sm-grid-12-3 > div:nth-child(4n+1),
.sm-grid-12-3 > li:nth-child(4n+1) {   
    margin-left: 0;
}
/* Grid 1/3 */
.sm-grid-12-4 > div,
.sm-grid-12-4 > li {
    width: 32.333333%;
    margin-left: 1.5%;
    float:left;
    box-sizing: border-box;
}
.sm-grid-12-4 > div:nth-child(3n+1),
.sm-grid-12-4 > li:nth-child(3n+1) {   
    margin-left: 0;
}
/* Raster 1/2 */
.sm-grid-12-6 > div,
.sm-grid-12-6 > li {
    width: 49%;
    margin-left: 2%;
    float:left;
    box-sizing: border-box;
}
.sm-grid-12-6 > div:nth-child(2n+1),
.sm-grid-12-6 > li:nth-child(2n+1) {   
    margin-left: 0;
}

.clear:after, .clearfix:after {
  content: "";
  display: table;
  clear: both;
}
/* STAADTSMEDIEN GRID ENDE */
.staadtsmedien {
  margin-top: 50px;
}
.staadtsmedien img {
  width: 150px;
}
@media (max-width: 1279px) {
  .sm-width {width: 960px;}
    .sm-margin-top-xl{margin-top: 75px;}
    .sm-margin-bottom-xl{margin-bottom: 75px;}
    .sm-margin-top-bottom-xl{margin-top: 75px; margin-bottom: 75px;}
    .sm-margin-top-l{margin-top: 75px;}
    .sm-margin-bottom-l{margin-bottom: 35px;}
    .sm-margin-top-bottom-l{margin-top: 35px; margin-bottom: 50px;}

    .sm-padding-top-xl{padding-top: 75px;}
    .sm-padding-bottom-xl{padding-bottom: 75px;}
    .sm-padding-top-bottom-xl{padding-top: 75px; padding-bottom: 75px;}
    .sm-padding-top-l{padding-top: 75px;}
    .sm-padding-bottom-l{padding-bottom: 35px;}
    .sm-padding-top-bottom-l{padding-top: 35px; padding-bottom: 35px;}
}
@media (max-width: 1023px) {
  .sm-width {width: 724px;}
  .sm-width-2 {width: 600px;}
  .sm-width-3 {width: 600px;}
  
    .sm-margin-top-xl{margin-top: 50px;}
    .sm-margin-bottom-xl{margin-bottom: 50px;}
    .sm-margin-top-bottom-xl{margin-top: 50px; margin-bottom: 50px;}
    .sm-margin-top-l{margin-top: 50px;}
    .sm-margin-bottom-l{margin-bottom: 30px;}
    .sm-margin-top-bottom-l{margin-top: 30px; margin-bottom: 30px;}

    .sm-padding-top-xl{padding-top: 50px;}
    .sm-padding-bottom-xl{padding-bottom: 50px;}
    .sm-padding-top-bottom-xl{padding-top: 50px; padding-bottom: 50px;}
    .sm-padding-top-l{padding-top: 50px;}
    .sm-padding-bottom-l{padding-bottom: 30px;}
    .sm-padding-top-bottom-l{padding-top: 30px; padding-bottom: 30px;}
}
@media (max-width: 768px) {
    .sm-grid-12-3 > div,
    .sm-grid-12-3 > li {
        width: 49%;
    }   
    .sm-grid-12-3 > div:nth-child(2n+1),
    .sm-grid-12-3 > li:nth-child(2n+1) {   
        margin-left: 0; 
    }   
    .sm-grid-12-4 > div,
    .sm-grid-12-4 > li,
    .sm-grid-12-4 > div:nth-child(3n+1),
    .sm-grid-12-4 > li:nth-child(3n+1) {
        width: 100%;
        margin: 25px 0;
        float:none;
    } 
    .sm-width, .sm-width-2 {width: 100%;padding-left: 25px;padding-right: 25px;box-sizing: border-box;} 
  .sm-width-3 {width: 480px;}
}
@media (max-width: 640px) {
    .sm-grid-12-6 > div,
    .sm-grid-12-6 > li,
    .sm-grid-12-6 > div:nth-child(2n+1),
    .sm-grid-12-6 > li:nth-child(2n+1){
        width: 100%;
        margin: 15px 0;
        float:none;
    }
    .sm-width-3 {width: 100%; padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
}
@media (max-width: 480px) {
    .sm-grid-12-3 > div,
    .sm-grid-12-3 > li ,
    .sm-grid-12-3 > div:nth-child(2n+1),
    .sm-grid-12-3 > li:nth-child(2n+1),
    .sm-grid-12-3 > div:nth-child(4n+1),
    .sm-grid-12-3 > li:nth-child(4n+1){
        width: 100%;
        margin: 0;
        float:none;
    }   
}