.projects {
  font: sans-serif;
  font-size: 0;
  margin: 60px auto;
}
@media only screen and (min-width: 1024px) {

  .projects > li {
    display: inline-block;
    font-size: 18px;
    margin: 0 25px 25px 0;
  }

  .projects {
    max-width: 960px;
  }

  .projects > li:nth-child(7n+5) {
    margin-left: 120px;
  }

  .projects > li:nth-child(7n+4) {
    margin-right: 0;
  }

  .projects > li:nth-child(n+4) {
    margin-top: -70px;
  }
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {

  .projects {
    max-width: 690px;
  }

  .projects > li {
    display: inline-block;
    font-size: 18px;
    margin: 0 15px 15px 0;
  }

  .projects > li:nth-child(5n+4) {
    margin-left: 120px;
  }

  .projects > li:nth-child(5n+3) {
    margin-right: 0;
  }

  .projects > li:nth-child(n+3) {
    margin-top: -70px;
  }
}
@media only screen and (max-width: 767px) and (min-width: 538px) {
  
  .projects > li {
    display: inline-block;
    font-size: 18px;
    margin: 0 20px 20px 0;
  }

  .projects {
    max-width: 480px;
  }

  .projects > li:nth-child(3n+3) {
    margin-left: 120px;
  }

  .projects > li:nth-child(3n+2) {
    margin-right: 0;
  }

  .projects > li:nth-child(n+2) {
    margin-top: -70px;
  }
}

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

  .projects > li {
    display: inline-block;
    font-size: 18px;
    margin: 0 15px 15px 0;
  }

  .projects {
    padding: 0;
    text-align: center;
  }
}

.no-csstransforms .projects {
  max-width: 1060px;
}

@media only screen and (max-width: 537px) {
  .projects > li {
    margin-right: 15px;
    margin-left: 15px;
    width: 220px;
  }
}

.no-csstransforms .projects > li {
  margin: 0 15px 15px 0;
}

.projects .project {
  display: block;
  height: 256px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  width: 220px;
}
.projects .project .trigger{
  content: "";
  width: 220px;
  height: 127px;
  position: absolute;
  display: block;
  margin-top: 65px;
  z-index: 4;
}

.projects .txt-wrapper {
  display: table-cell;
  height: 256px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 220px;
  position:absolute;
  z-index:3;
}
.projects .txt-content {
  display: table-cell;
  height: 256px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 220px;
  position:relative;
  z-index:6;
  -webkit-animation-duration: 0.3s;
     -moz-animation-duration: 0.3s;
      -ms-animation-duration: 0.3s;
       -o-animation-duration: 0.3s;
          animation-duration: 0.3s;
}
.txt-wrapper, .txt-content {
  -webkit-transition: opacity 0.5s ease;
     -moz-transition: opacity 0.5s ease;
      -ms-transition: opacity 0.5s ease;
       -o-transition: opacity 0.5s ease;
          transition: opacity 0.5s ease;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
              filter: alpha(opacity=0);
             opacity: 0;
}
.print {background:url(../img/hexagon-category-overlay.png) 0 0 no-repeat; background-size: 660px 256px;}
.film {background:url(../img/hexagon-category-overlay.png) -220px 0 no-repeat; background-size: 660px 256px;}
.web {background:url(../img/hexagon-category-overlay.png) -440px 0 no-repeat; background-size: 660px 256px;}
.project-headline{
  color: white; font-size: 1em; padding: 0 25px; margin-top: 25px;
  word-wrap: break-word; 
  white-space: pre; 
  white-space: -moz-pre-wrap; 
  white-space: pre-wrap;
  width: 220px;
}
.view-project{width: 220px;}
.view-project a{
    background: white;
    border-radius: 3px 3px 3px 3px;
    display: block;
    margin-left: 65px;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
    width: 90px;
    font-size: 0.7em;
}
.film .view-project a{color: #FF4859;}
.print .view-project a{color: #46BAC6;}
.web .view-project a{color: #4AD385;}
.touch .project-headline {line-height: 1em;}
.project-headline a, .project-headline a:active{text-decoration: none;color: white;}
.project-headline:before, .project-headline:after{background:url(../img/hexagon-zigzag.png) 42%50% no-repeat;background-size: 74px 14px;content:""; display:block; width: 185px; height: 14px; padding: 10px 0px;}
.project-cat{width: 220px;color: white; font-size: 1em; font-family: 'SuhmoWebPro', serif; font-weight: normal;}
.touch .project-cat-touch{margin-bottom:-0.9em;display: block;height: 20px;width: 220px;color: white; font-size: 1em; font-family: 'SuhmoWebPro', serif; font-weight: normal; }
.project-cat-touch{display: none;}
.projects .img-wrapper {
  display: table-cell;
  height: 256px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 220px;
}