.two-column-wrapper{
  margin-top: 82px;
  overflow: hidden;
}
.featured-box{
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 50%;
  float: left;
}
.featured-box > .box{
  height: inherit;
  text-align: left;
}
.featured-box > .box a{
  display: contents;
  color: #fff;
}
.featured-box > .box a.modal-wrap{
  display: contents;
  color: #fff;
}
.featured-box > .box a .transparent-bg{
  width: 76.3%;
  border: 20px solid black;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 28px 39px 21px 36px;
  height: 70%;
  position: relative;
  cursor: pointer;
}
.featured-box > .box a .transparent-bg:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.featured-box > .box a .transparent-bg .content-title h4{
  font-size: 26px;
  line-height: 27px;
  font-weight: 600;
}
.featured-box > .box a .transparent-bg .limit-content p{
  font-size: 14px;
  line-height: 19px;
}
.featured-box > .box a .transparent-bg .read-more-wrap{
  font-size: 16px;
  font-weight: 600;
  position: absolute;
  display: inline-block;
  line-height: 17px;
  bottom: 15px;
}
}

@media (max-width:767px){
  .transparent-bg {
    height: auto;
  }
  .featured-box > .box a .transparent-bg .content-title h4{
    font-size: 22px;
    line-height: 26px;
  }
}

@media (max-width: 991px){
  .featured-box{
    height: 400px;
  }
  .transparent-bg {
    border: 12px solid #000;
  }
}

@media (max-width: 800px){
  .two-column-wrapper{
    margin-top: 0;
  }
  .featured-box{
    width: 100%;
    margin-top: 35px;
  }
}

@media (max-width: 1200px){
  .featured-box > .box a .transparent-bg{
    padding: 15px 17px 14px 18px;
    width: 85%;
    height: auto;
  }
}