.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.col {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 23.33333%;
      -ms-flex: 0 0 23.33333%;
          flex: 0 0 23.33333%;
  padding: 1em;
}

.image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 77%;
  cursor: pointer;
opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}



.image:hover {


	 opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

@media(max-width: 870px) {
  .col {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
}
@media(max-width: 580px) {
  .col {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}