.project {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 440px;
  width: 100%;
  display: block;
  margin-bottom: 30px; }
  .project .desc {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
    .project .desc .con {
      padding: 20px;
      display: block;
      position: relative;
      height: 300px; }
      .project .desc .con .icon {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px; }
        .project .desc .con .icon span {
          display: inline;
          padding-right: 5px; }
          .project .desc .con .icon span a {
            color: #cccccc;
            padding: 5px;
            background: #333333;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px; }
        .project .desc .con .icon i {
          font-size: 16px;
          color: #cccccc; }
    .project .desc h3 {
      font-size: 16px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      transition: opacity 0.3s, -webkit-transform 0.3s;
      -o-transition: transform 0.3s, opacity 0.3s;
      transition: transform 0.3s, opacity 0.3s;
      transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);
      margin-bottom: 15px; }
      .project .desc h3 a {
        color: #fff; }
    .project .desc span {
      display: block;
      color: #999999;
      font-size: 13px;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      transition: opacity 0.3s, -webkit-transform 0.3s;
      -o-transition: transform 0.3s, opacity 0.3s;
      transition: transform 0.3s, opacity 0.3s;
      transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
      -webkit-transform: translate3d(0, 15px, 0);
      transform: translate3d(0, 15px, 0); }
      .project .desc span a {
        color: #000; }
    @media screen and (max-width: 768px) {
      .project .desc {
        opacity: 1;
        background: rgba(0, 0, 0, 0.4); }
        .project .desc h3 {
          font-style: 28px;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          color: #000; }
        .project .desc span {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); } }
  .project:hover .desc {
    opacity: 1; }
    .project:hover .desc h3 {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
    .project:hover .desc span {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }

.project-desc h2 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px; }

.project-desc span {
  display: block;
  color: #666666;
  font-size: 13px;
  margin-bottom: 15px; }
  .project-desc span a {
    color: #666666; }

.project-desc .icon span {
  display: inline;
  padding-right: 5px; }

.project-desc .btn-download {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: underline; }

.pagination {
  padding: 0; }
  .pagination li {
    margin: 2px; }
    .pagination li a {
      color: #000;
      background: transparent;
      color: #000;
      margin: 2px;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      border-radius: 0; }
      .pagination li a:first-child {
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px; }
      .pagination li a:hover, .pagination li a:focus {
        background: #FFC300;
        color: #fff;
        border: 1px solid #FFC300; }
      @media screen and (max-width: 768px) {
        .pagination li a {
          padding: 7px 15px; } }
    .pagination li.active a {
      background: #FFC300;
      border: 1px solid #FFC300 !important; }
      .pagination li.active a:hover, .pagination li.active a:focus {
        background: #FFC300;
        color: #fff;
        border: 1px solid #FFC300 !important; }