body {
    font-family: Arial, Helvetica, sans-serif;
}
.title {
    text-align: center;
    font-weight: bold;
    font-size: 48px;
    color: #333;
}
img {
  /*max-width: auto;
  height: auto;*/
}
.wrapper{
    max-width: 820px;
    margin: 0 auto;
}

.wrapper2{
    max-width: 750px;
    margin: 0 auto;
}

.wrapper3{
    max-width: 900px;
    margin: 0 auto;
}


/* Style für Bild Unterschrift */
.wrapper a, a:link, a:visited, a:active, a:hover{ 
  text-decoration:none;
  font-weight:bold;
  color:#ffffff;
  font-size:14px;
}

.wrapper1{
    max-width: 780px;
    margin: 0 auto;
}

/* Style für Bild Unterschrift */
.wrapper1 a, a:link, a:visited, a:active, a:hover{ 
  text-decoration:none;
  font-weight:bold;
  color:#ffffff;
  font-size:14px;
}

/* Style für Bild Unterschrift */
.wrapper3 a, a:link, a:visited, a:active, a:hover{ 
  text-decoration:none;
  font-weight:bold;
  color:#ffffff;
  font-size:14px;
}


/* Style für Bild Unterschrift */


.masonry {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  -moz-column-fill: initial;
  -webkit-column-fill: initial;
  column-fill: initial;
}
.masonry .brick {
  margin-bottom: 10px; /*abstand Bilder untereinander*/
  overflow: hidden;
}
.masonry .brick1 {
  margin-bottom: 10px; /*abstand Bilder untereinander*/
  overflow: hidden;
}
.masonry .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 750px;
  height: 278px;

}

.masonry .brick2 img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 750px;
  height: 532px;
}

.masonry .brick1 img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 370px;
  height: 279px;

}
.masonry .brick:hover img {
  opacity: .75;
}
.masonry .brick1:hover img {
  opacity: .75;
}
.masonry.bordered {
  -moz-column-rule: 1px solid #eee;
  -webkit-column-rule: 1px solid #eee;
  column-rule: 1px solid #eee;
  -moz-column-gap: 50px;
  -webkit-column-gap: 50px;
  column-gap: 50px;
}
.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}
.masonry.bordered .brick1 {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}

.masonry.gutterless {
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
}
.masonry.gutterless .brick {
  margin-bottom: 0;
}
.masonry.gutterless .brick1 {
  margin-bottom: 0;
}

.masonry1 {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  -moz-column-fill: initial;
  -webkit-column-fill: initial;
  column-fill: initial;
}
.masonry1 .brick {
  margin-bottom: 10px; /*abstand Bilder untereinander*/
  overflow: hidden;
}
.masonry1 .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 750px;
  height: 278px;

}
.masonry1 .brick:hover img {
  opacity: .75;
}
.masonry1.bordered {
  -moz-column-rule: 1px solid #eee;
  -webkit-column-rule: 1px solid #eee;
  column-rule: 1px solid #eee;
  -moz-column-gap: 50px;
  -webkit-column-gap: 50px;
  column-gap: 50px;
}
.masonry1.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}

.masonry1.gutterless {
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
}
.masonry1.gutterless .brick {
  margin-bottom: 0;
}

.span {
  -moz-column-span: all;
  -webkit-column-span: all;
  column-span: all;
  *margin: 30px 0;
}
.w200 {
    width: auto;
    max-width: 380px;
    height: 40px;
    text-align: center;
}
.w100 {
    width: auto;
    max-width: 750px;
    height: 40px;
    text-align: center;
}

.w300 {
    width: auto;
    max-width: 210px;
    height: 40px;
    text-align: center;
}

.w301 {
    width: auto;
    max-width: 900px;
    height: 40px;
    text-align: center;
    
}


.masonry2 .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 750px;
  height: 532px;

}


@media only screen and (min-width: 650px) and (max-width: 1920px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .wrapper {
    width: 100%;
    padding: 2em;
        margin:0 auto;
  }
  
    .wrapper1 {
    width: 100%;
    padding: 2em;
  }


  .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
  .masonry1 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
  .masonry2 {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
  .masonry3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}


@media only screen and (min-width: 250px) and (max-width: 649px) {
.masonry .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 10%;
  height: 10%;

}

.masonry2 .brick2 img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 10%;
  height: 10%;

}


  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .wrapper {
    width: 100%;
    padding: 2em;
    margin:0 auto;
  }
  
    .wrapper1 {
    width: 100%;
    padding: 2em;
  }


  .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
  .masonry1 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
  .masonry2 {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
  .masonry3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}