/*******************************************************************************/
/* Isotope Layout */
/******************************************************************************/



/* ---- grid ---- */
.referenz-wrapper .csc-textpic-imagecolumn {
  background: transparent;
  height: 100%;
  top: 0;
  width: 1200px; /*width: 980px;*/
  max-width: 100%;
}

.referenz-wrapper .csc-textpic-imagewrap {
  max-width: 100%;
}


/* clear fix */
.referenz-wrapper .csc-textpic-imagecolumn:after {
  content: '';
  display: block;
  clear: both;
}

.referenz-wrapper .grid-sizer {
  width: 23.5%;
}

.referenz-wrapper .gutter-sizer {
  width: 2%;
}


/* ---- .grid-item ---- */
.referenz-wrapper .csc-textpic-image {
  /*display: inline !important;*/
  float: left;
  width: 23.5%;
  height: auto;
  overflow:hidden;
}










/* Filter Style */

#projectfilter {

}

#projectfilter .filter-button-group {
  
}

#projectfilter button {
  display: inline-block;
  color: #111;
  background: transparent;
  font-size: 22px;
  padding: 0 0px 15px 0;
  border: none;
  font-size: 18px;
  outline: none;
  text-align: left;
  width: calc(23.5% - 4px);
  margin-right: 2%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
  vertical-align: top;
}

#projectfilter button:nth-child(4),
#projectfilter button:nth-child(8) {
  margin-right: 0;
}

#projectfilter button strong {
  
}

#projectfilter button.is-checked {
  font-weight: 700;
  /*color: #E30613;*/
}


#projectfilter button:before {
   content: '';
   display: inline-block;
   width: 20px;
   height: 20px;
   top: 5px;
   margin-right: 10px;
   margin-bottom: -2.5px;
   background-color: transparent;
   border: 1px solid #E30613;
   
}
#projectfilter.bgwhite button:before {
  border: 1px solid #E30613;
}

#projectfilter button.is-checked:before {
   content: '';
   display: inline-block;
   width: 20px;
   height: 20px;
   top: 5px;
   margin-right: 10px;
   margin-bottom: -2.5px;
   background-color: #E30613;
   border: 1px solid #E30613;
}

#projectfilter.bgwhite button.is-checked:before {
   background-color: #E30613;
   border: 1px solid #E30613;
}







/* Responsive */

@media screen and (max-width: 768px) {

  .referenz-wrapper .grid-sizer {
    width: 32%;
  }

  .home .referenz-wrapper .grid-sizer {
    width: 23.5%;
  }

  .referenz-wrapper .gutter-sizer {
    width: 2%;
  }


  /* ---- .grid-item ---- */
  .referenz-wrapper .csc-textpic-image {
    width: 32%;
  }

  .home .referenz-wrapper .csc-textpic-image {
    width: 23.5%;
  }

  #projectfilter button {
    width: calc(32% - 4px);
    margin-right: 2%;
  }

  #projectfilter button:nth-child(4),
  #projectfilter button:nth-child(8) {
    margin-right: 2%;
  }

  #projectfilter button:nth-child(3),
  #projectfilter button:nth-child(6) {
    margin-right: 0;
  }


}


@media screen and (max-width: 576px) {

  .referenz-wrapper .grid-sizer {
    width: 48%;
  }

  .home .referenz-wrapper .grid-sizer {
    width: 48%;
  }

  .referenz-wrapper .gutter-sizer {
    width: 4%;
  }


  /* ---- .grid-item ---- */
  .referenz-wrapper .csc-textpic-image {
    width: 48%;
  }

  .home .referenz-wrapper .csc-textpic-image {
    width: 48%;
  }

  #projectfilter button {
    width: calc(48% - 4px);
    margin-right: 4%;
  }

  #projectfilter button:nth-child(3) {
    margin-right: 4%;
  }

  #projectfilter button:nth-child(2),
  #projectfilter button:nth-child(4),
  #projectfilter button:nth-child(6),
  #projectfilter button:nth-child(8) {
    margin-right: 0;
  }


}





@media screen and (max-width: 480px) {


  #projectfilter button {
    width: 100%;
    margin-right: 0;
  }

  #projectfilter button:nth-child(3) {
    margin-right: 0;
  }


}