#filament { max-width: 960px; }

#about-filament {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

#about-filament .apps { padding-top: 10px; }

#about-filament .apps > div[data-app] {
  position: relative;
  width: 30.6%;
  padding-top: 22%;
  margin: 0 4% 4% 0;
  overflow: hidden;
  float: left;
  
  border: 1px solid #dedede;
  cursor: pointer;

     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

     -moz-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
      -ms-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
       -o-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
          box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
}
#about-filament .apps > div[data-app]:nth-child(3n) { margin-right: 0; }

#about-filament .apps > div[data-app] > img {
  position: absolute;
  top: 50%;
  left: 50%;

     -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
       -o-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

#about-filament .apps > div[data-app] > a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.8);
  color: white;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  opacity: 0;

     -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
       -o-transform: translateY(100%);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);

     -moz-transition: -moz-transform 0.25s ease-in-out, opacity 0.25s;
      -ms-transition: -ms-transform 0.25s ease-in-out, opacity 0.25s;
       -o-transition: -o-transform 0.25s ease-in-out, opacity 0.25s;
  -webkit-transition: -webkit-transform 0.25s ease-in-out, opacity 0.25s;
          transition: transform 0.25s ease-in-out, opacity 0.25s;
}

#about-filament .apps > div[data-app]:hover > a {
    opacity: 1;

     -moz-transform: translateY(0%);
      -ms-transform: translateY(0%);
       -o-transform: translateY(0%);
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

#about-filament .apps > div[data-app="flare"] { background-color: #ffc800; }
#about-filament .apps > div[data-app="ivy"] { background-color: #f05374; }
#about-filament .apps > div[data-app="passport"] { background-color: #0f5471; }

#about-filament .apps > div[data-app] > a strong,
#about-filament .apps > div[data-app] > a em {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;

  font-style: normal;
}

#about-filament .apps > div[data-app] > a strong {
  margin-top: -45px;

  font-size: 2em;
  line-height: 40px;
}

@media only screen and (max-width:782px) {
  #about-filament .apps > div[data-app] {
    width: 47.5%;
    padding-top: 30%;
    margin-right: 5%;
  }
  #about-filament .apps > div[data-app]:nth-child(even) { margin-right: 0; }
}

@media only screen and (max-width:640px) {
  #about-filament .apps > div[data-app] > a {
    background: none;
    opacity: 1;

    text-shadow: 2px 3px 3px rgba(0,0,0,0.5);

     -moz-transform: translateY(0%);
      -ms-transform: translateY(0%);
       -o-transform: translateY(0%);
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  }
  #about-filament .apps > div[data-app] > a strong { margin-top: -20px; }
  #about-filament .apps > div[data-app] > a em { display: none; }
}

@media only screen and (max-width:320px) {
  #about-filament .apps > div[data-app] {
    width: 100%;
    padding-top: 60%;
    margin-right: 0;
  }
}