/* Overlay Container Large */
.overlay-container {
    position: relative;
    /*min-height: 331px;*/
    width: 327px;
    padding: 5px !important;
    box-shadow: -7px -7px 30px rgba(0, 0, 0, 0.5);
    margin-top: 32px;
    margin-bottom: 32px;
    margin-left: auto;
    margin-right: auto;
    background-color: #3c3c3c;
    overflow:hidden;
}
.overlay-container::after {
  background: #56C476;
  z-index: 10;
  top: auto;
  bottom: 0;
  width: 100%;
  transition: height 0.3s linear;
  content: '';
  height: 0; 
  position: absolute;
    
}
.overlay-container:hover::after {
      height: 20%; 
    
}
.overlay-container figure {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	width: 318px;
    height: 268px;
}

.overlay-container .overlay-image {
    position: relative;
}

.overlay-container .overlay-image:after {
    content: "";
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    height:0;
    auto: 0;
    left: 0;
    bottom: 0;
    z-index: 11;
    /*background: rgba(0, 0, 0, 0.6);*/
    background: -webkit-linear-gradient(transparent, #56C476 100%);
    opacity: 0;
    /*transition: all 0.5s;*/
    transition: height 0.3s linear 0.2s, opacity 0.2s linear;
    /*-webkit-transition: all 0.5s;*/
    
}



.overlay-container .overlay-image img {
    width: 318px;
    height: 268px;
    margin-bottom:0;
}

.overlay-container .overlay {
    position: absolute;
    /*bottom: 0;*/
    top: 50%;
    background: rgb(0, 0, 0);
    background: rgb(0, 0, 0,.3); /* Black see-through */
    width: 100%;
    transition: all 0.7s;
    -webkit-transition: all 0.7s;
    opacity: 1;
    color: white;
    font-size: 18px;
    text-align: center;
	height:52px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}




.overlay-container:hover .overlay-image::after {
      height: 100%;
      opacity: 1; }
    .overlay-container:hover .overlay-image img {
      filter: sepia(100%) grayscale(60%); }
    .service-box:hover p, .service-box:hover .blog-details, .service-box:hover .job-details,
    .service-box:hover h4 {
      color: #fff; }

.overlay-container .overlay-container .overlay-image:hover::after {
    opacity: 0.8;
}
.overlay-container:hover .overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7); /* Black see-through */
    z-index: 1000;
}

/* On screens that are 400px or less */
@media screen and (max-width: 400px) {
	.overlay-container {
		width: 300px;
		height: 250px;
		padding: 16px !important;
	}
	.overlay-container figure {
		width: 268px;
		height: 218px;
	}

	.overlay-container .overlay-image img {
		width: 268px;
		height: 218px;
	}

}

/* Overlay Container Small */

.overlay-container-sm {
    position: relative;
	width: 250px;
	height: 200px;
    padding: 16px !important;
    box-shadow: -7px -7px 30px rgba(0, 0, 0, 0.5);
    margin-top: 32px;
	margin-bottom: 32px;
	margin-left: auto;
    margin-right: auto;
    background-color: #3c3c3c;
}
.overlay-container-sm figure {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	width: 218px;
    height: 168px;
}

.overlay-container-sm .overlay-image {
    position: relative;
}

.overlay-container-sm .overlay-image:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.overlay-container-sm .overlay-container .overlay-image:hover::after {
    opacity: 0.8;
}

.overlay-container-sm .overlay-image img {
    width: 218px;
    height: 168px;
}

.overlay-container-sm .overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.3); /* Black see-through */
    width: 100%;
    transition: all 0.7s;
    -webkit-transition: all 0.7s;
    opacity: 1;
    color: white;
	font-size: 15px;
	line-height: 1.5;
    text-align: center;
	bottom: 0;
	height:52px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}


.overlay-container-sm:hover .overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7); /* Black see-through */
    z-index: 99;
}

/* On screens that are 400px or less */
@media screen and (max-width: 400px) {
	/*  */

}

 .service-box {
     background: #fff;
     letter-spacing: 0.35px;
     -webkit-box-shadow: 10px 24px 24px rgb(0 0 0 / 2%);
     -ms-box-shadow: 10px 24px 24px rgba(0, 0, 0, 0.02);
     box-shadow: 10px 24px 24px rgb(0 0 0 / 2%);
     position: relative;
     z-index: 1;
     overflow: hidden;
     height:340px;
}
 .service-box::after {
     background: #56C476;
     z-index: 10;
     top: auto;
     bottom: 0;
     width:100%;
     transition: height 0.3s linear;
     height: 0;
     content: "";
     position: absolute;
}
 .service-box p, .service-box .blog-details, .service-box .job-details {
     height: 150px;
     overflow: hidden;
}
 .service-box-img {
    /*margin: -30px -30px 30px;
    */
     position: relative;
     z-index: 1;
}
 .service-box-img::after {
     background: -webkit-linear-gradient(transparent, #56C476 100%);
     z-index: 20;
     width:100%;
     top: auto;
     left:0;
     bottom: 0;
     transition: height 0.3s linear 0.2s, opacity 0.2s linear;
     height: 0;
     opacity: 0;
     content: '';
    position: absolute;
}
 .service-box-img img {
     width: 100%;
     height: 290px;
     object-fit: cover;
     -webkit-transition: all 0.3s linear 0.15s;
     -ms-transition: all 0.3s linear 0.15s;
     transition: all 0.3s linear 0.15s;
     filter: sepia(0%) grayscale(0%);
}
 .service-box a {
    /*padding: 30px;
    */
     display: block;
}
 .service-box h4 {
     font-size: 15px;
     color: #1B1E1A;
     margin-top:0;
     display: block;
     text-align:center;
     vertical-align: middle;
     position: relative;
}
 .service-box h4::before {
     background: #fff;
}
 .service-box:hover::after {
     height: 20%;
}
 .service-box:hover .service-box-img::after {
     height: 100%;
     opacity: 1;
}
 .service-box:hover .service-box-img img {
     filter: sepia(100%) grayscale(60%);
}
 .service-box:hover h4 {
     color: #fff;
     z-index: 50;
}