* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
}

figure {
  margin: 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.6);
}

figcaption p {
  color: #fff;
  padding: 4.5%;
  font-size: italic;
}

.pic {
  width: 50%;
  height: 196px;
  float: left;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  background-position: center;
  bottom: 0 solid rgba(255, 255, 255, 0);
  -webkit-transition: all .1s ease-in;
     -moz-transition: all .1s ease-in;
      -ms-transition: all .1s ease-in;
       -o-transition: all .1s ease-in;
          transition: all .1s ease-in;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
          box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}

.pic:hover {
  cursor: pointer;
  border: 10px solid rgba(255, 255, 255, 1);
  -webkit-transition: all .1s ease-in;
     -moz-transition: all .1s ease-in;
      -ms-transition: all .1s ease-in;
       -o-transition: all .1s ease-in;
          transition: all .1s ease-in;
  opacity: 0.5;
}

.pic-1 {
  width: 100%;
  background-image: url('../imgs/photo-7.jpg');
}

.pic-2 {
  background-image: url('../imgs/photo-2.jpg');
}

.pic-3 {
  background-image: url('../imgs/photo-3.jpg');
}

.pic-4 {
  background-image: url('../imgs/photo-4.jpg');
}

.pic-5 {
  background-image: url('../imgs/photo-17.jpg');
}

.pic-6 {
  background-image: url('../imgs/photo-6.jpg');
}

.pic-7 {
  background-image: url('../imgs/photo-1.jpg');
}

.pic-8 {
  background-image: url('../imgs/photo-14.jpg');
}

.pic-9 {
  background-image: url('../imgs/photo-9.jpg');
}

.pic-10 {
  background-image: url('../imgs/photo-8.jpg');
}

.pic-11 {
  background-image: url('../imgs/photo-11.jpg');
}

.pic-12 {
  background-image: url('../imgs/photo-12.jpg');
}

.pic-13 {
  background-image: url('../imgs/photo-13.jpg');
}


@media screen and (min-width: 768px) {
  .pic {
    width: 33.3333333333%;
    height: 320px;
    /*float: left;*/
  }
  .pic-13 {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  div, .pic {
    float: left;
  }

  /* from mockup, row1 height of 340 and width 1440 */
  .a-f-wrap {
    width: 100%;
    height: 342px;
    height: 36%;
  }

  .ab-wrap {
    width: 360px;
    width: 25%;
    height: 100%;
  }

    .pic-1 {
      width: 100%;
      height: 86px;
      height: 25%;
    }

    .pic-2 {
      width: 100%;
      height: 254px;
      height: 75%;
    }

  .c-wrap {
    width: 504px;
    width: 35%;
    height: 342px;
    height: 100%;
  }
    .pic-3 {
      width: 100%;
      height: 100%;
    }

  .d-e-wrap {
      width: 288px;
      width: 20%;
      height: 100%;
  }

    .pic-4, .pic-5 {
      width: 100%;
      height: 50%;
    }

  .f-wrap {
    width: 288px;
    width: 20%;
    height: 100%;
  }

    .pic-6 {
      width: 100%;
      height: 100%;
    }

  .ghi-wrap {
    width: 576px;
    width: 40%;
    height: 64%;
  }

    .pic-7 {
      width: 100%;
      height: 50%;
    }

    .pic-8 {
      height: 50%;
      width: 62.5%;
    }

    .pic-9 {
      height: 50%;
      width: 37.5%;
    }

  .j-m-wrap {
    width: 864px;
    width: 60%;
    height: 64%;
  }

    .pic-10 {
      width: 395px;
      width: 46%;
      height: 100%;
    }

    .pic-11, .pic-12 {
      width: 27%;
      height: 50%;
    }

    .pic-13 {
      display: inline;
      width: 54%;
      height: 50%;
    }
}