.section_overlay {
  position: relative;
}

.section_overlay > div {
  background: rgba(0, 0, 0, 0.5);
  width: 40%;
  padding: 30px 60px;
}

/*overlay H3 color always choose for mobile first, after that apply the class for those breakpoint which needed*/
.section_overlay_h3 .feature-header {
 	position:relative;
}

.product-info-container-light.section_overlay > div {
  background: rgba(255, 255, 255, 0.5);
}

.product-info-container-light.section_overlay p {
  color: #000;
}

@media(max-width:1199px) {
  .section_overlay > div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0px 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .section_overlay.right_0 > div {
    right: 0;
  }
}

@media(max-width:991px) {
  .section_overlay {
    height: auto;
    max-height: none;
    background-position: top;
    background-size: 100% auto;
  }
  .section_overlay .feature-header,
  .section_overlay .feature-subheader,
  .section_overlay p {
    color: #000 !important;
  }
  .section_overlay > div {
    background: none;
    position: relative;
    width: auto;
    padding: 30px 50px;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
  }
}
@media(max-width:767px) {
  .section_overlay > div {
    padding-left:40px;
    padding-right:40px;
  }
	/*overlay + h3 for xs*/
	/*take notice once h3 absoluted, background have to be transparent, otherwise it owns background will cover the nx section*/
	.section_overlay_h3.xs_absolute  {
		position: absolute;
    left: 0;
    width: 100vw;
    z-index: 1;
    background: transparent;
	}
	.section_overlay_h3.xs_dark .feature-header{
		color:#808080;
	}
	.section_overlay_h3.xs_black .feature-header{
		color:#000;
	}
	.section_overlay_h3.xs_white .feature-header{
		color:#fff;
	}
	.section_overlay_h3.xs_light .feature-header{
		color:#808080;
	}
}
@media(min-width:768px) and (max-width:990px) {
	/*overlay + h3 for sm*/
	.section_overlay_h3.sm_absolute  {
		position: absolute;
    left: 0;
    width: 100vw;
    z-index: 1;
    background: transparent;
	}
  .section_overlay_h3.sm_absolute .row {
    margin-top:60px;
  }
	.section_overlay_h3.sm_dark .feature-header{
		color:#808080;
	}
	.section_overlay_h3.sm_black .feature-header{
		color:#000;
	}
	.section_overlay_h3.sm_white .feature-header{
		color:#fff;
	}
	.section_overlay_h3.sm_light .feature-header{
		color:#808080;
	}
}
@media(min-width:991px) and (max-width:1199px) {
	/*overlay + h3 for md*/
  .section_overlay_h3.md_absolute  {
		position: absolute;
    left: 0;
    width: 100vw;
    z-index: 1;
    background: transparent;
	}
  .section_overlay_h3.md_absolute .row {
    margin-top:60px;
  }
	.section_overlay_h3.md_dark .feature-header{
		color:#808080;
	}
	.section_overlay_h3.md_black .feature-header{
		color:#000;
	}
	.section_overlay_h3.md_white .feature-header{
		color:#fff;
	}
	.section_overlay_h3.md_light .feature-header{
		color:#808080;
	}
}
@media(min-width:1200px) and (max-width:1599px){
  .section_overlay_h3.lg_absolute .row {
    margin-top:60px;
  }
}
@media(min-width:1200px) {
  .section_overlay {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
  .section_overlay.right_0 {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  .section_overlay.left_0 {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }

  /*overlay + h3 for lg*/
  .section_overlay_h3.lg_absolute  {
		position: absolute;
    left: 0;
    width: 100vw;
    z-index: 1;
    background: transparent;
	}  
	.section_overlay_h3.lg_dark .feature-header{
		color:#808080;
	}
	.section_overlay_h3.lg_black .feature-header{
		color:#000;
	}
	.section_overlay_h3.lg_white .feature-header{
		color:#fff;
	}
	.section_overlay_h3.lg_light .feature-header{
		color:#808080;
	}
}

@media(min-width:1600px) {
	/*overlay + h3 for xl*/
  .section_overlay_h3.xl_absolute  {
		position: absolute;
    left: 0;
    width: 100vw;
    z-index: 1;
    background: transparent;
	}
	.section_overlay_h3.xl_dark .feature-header{
		color:#808080;
	}
	.section_overlay_h3.xl_black .feature-header{
		color:#000;
	}
	.section_overlay_h3.xl_white .feature-header{
		color:#fff;
	}
	.section_overlay_h3.xl_light .feature-header{
		color:#808080;
	}
}

@media(min-width:1800px) {
  .section_overlay > div {
    width: 30%;
  }
}