.overlap-bg-img-container {
    position: relative;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 45px;
}
.overlap-bg-img-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    margin-top: 45px;
    padding-left: 70px;
    background-position: center center;
    background-size: cover;
}
.overlap-bg-img-back img { width: 100%; }
.overlap-bg-img-front {
    position: relative;
    width: 100%;
    padding-top: 80px;
}
.overlap-bg-img-front .bg-content {
    width: 40%; 
    height: 500px; 
    background-image: url(../img/sevice-bg-content.jpg); 
    position: relative;
}
.overlap-bg-img-front .content {
    width: 100%; 
    background-color: #fff; 
    position: absolute; 
    top: 50px; left: 50px; 
    height: 400px; 
    text-align: center;
    padding: 60px;
}
.overlap-bg-img-front .content .vertical-center { width: 100%; height: 100%; display: table; }
.overlap-bg-img-front .content .ct-vertical-center { display: table-cell; vertical-align: middle; }
.overlap-bg-img-front .content .ct-heading { color: #333; }
.overlap-bg-img-front .content .ct-title {
    margin-bottom: 15px;
}

@media screen and (min-width: 992px) {
    .overlap-bg-img-container {
        max-width: 1200px;
        padding: 0;
    } 
}

@media screen and (max-width: 991px) {
    .overlap-bg-img-back { padding-left: 0; position: static; }
    .overlap-bg-img-front { padding: 0; }
    .overlap-bg-img-front .bg-content { width: 100%; height: auto; position: relative; padding: 15px; }
    .overlap-bg-img-front .content { padding: 40px 15px; position: static; height: auto; }
}