/* ---- grid ---- */
.grid-section {
    padding: 120px 0 150px 0;
}

.grid {
  background: #fff;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.img-load {
    opacity:0;
}

/* ---- grid-item ---- */


.grid-item {
  width: 24%;
  overflow:hidden;
  margin-bottom:10px;
  text-align:center;
  position:absolute;
  min-height: 200px;
  background-color:#eeedeb;
}

    .grid-item img {
        width:100%;
        /*margin:0 10px 0 10px;*/        
    }

.grid-overlay {
    width:100%;
    height:60px;
    bottom:0px;
    /*margin:0 10px 0 10px;*/
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    position:absolute;
    transition:all 500ms;
    
}
.zoom-icon {
    position:absolute;
    background:url(../img/addwhite.png) no-repeat;
    height:32px;
    width:32px;
    display:inline-block;
    top:-1000px;
    left:44%;
    transition:all 500ms;
}

.grid-content {
    width:100%;
    bottom:-25px;
    position:absolute;
    padding: 10px;
    color:white;    
    /*background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));*/
    transition:all 500ms;
}

.grid-content h3 {
    font-size:15px;
    font-family:'GillSans';
    margin-bottom:10px;
    line-height:18px;
    transition:all 500ms;
}
    .grid-content p {
        font-size:12px;
    }

.grid-item:hover .grid-content {
    bottom:0px;
    /*background-color:rgba(0, 0, 0, 0.8);*/
}
.grid-item:hover .grid-overlay {
    /*background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5));*/
    height:100%;
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    /*background-color:rgba(0, 0, 0, 0.7);*/
}
.grid-item:hover .zoom-icon {
    top:40%;
}

/*Light box caption font size*/
#baguetteBox-overlay .full-image figcaption {
    font-family:'Roboto-Regular';
    font-size:30px;
}

/*.grid-item {
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}*/
/*Phone*/
@media only screen and (max-width: 767px) {
    .grid-section {
        padding: 100px 0 150px 0;
    }
    .grid-item {
        width:100%;      
    }
        .grid-item img {
            margin:0;
        }
    .grid-overlay {
        margin:0;
    }
      
    .grid-content {
        bottom:-30px;
    }
    .grid-content h3 {
        font-size:25px;
        line-height:24px;
    }
    .grid-content p {
        font-size:15px;
    }
    .zoom-icon {
        left:46%;
    }
    
}
/*iPad*/
@media only screen and (min-width:768px) and (max-width: 1024px) {
    .grid-item {
        width:49%;
    }
    .grid-content {
        bottom:-30px;
    }
    .grid-content h3 {
        font-size:30px;
    }
    .grid-content p {
        font-size:15px;
    }
    .zoom-icon {
        left:46%;
    }
}