.image-position { 
   position: relative; 
}

.image-text { 
   position: absolute; 
   top: 8%;
   left: 28px; /* set to 28px to put a gap between edge of image and start of background - need to set as zero in reponsive code */
   /* right: 0; if set to zero will extend background to end of image other put a value to leave a gap or leave off to end at end of text */
   color: #ffffff;
   font-weight: bold;
   font-size: 40px;
   background: rgba(23, 40, 73, .5);
   padding: 16px 48px 16px 28px; /* padding around the text  */
   text-align: left;
   line-height: 100%;
}

.image-sub-text { 
   color: #ffffff;
   font-weight: normal;
   font-size: 20px;
}


.image-text-gallery { 
   position: absolute; 
   top: 8%;
   left: 28px; /* set to 28px to put a gap between edge of image and start of background - need to set as zero in reponsive code */
   /* right: 0; if set to zero will extend background to end of image other put a value to leave a gap or leave off to end at end of text */
   color: #ffffff;
   font-weight: bold;
   font-size: 30px;
   background: rgba(23, 40, 73, .5);
   padding: 16px 48px 16px 28px; /* padding around the text  */
   text-align: left;
   line-height: 100%;
}

.image-sub-text-gallery { 
   color: #ffffff;
   font-weight: normal;
   font-size: 20px;
}


@media screen and (max-width: 740px) 	{
.image-text { 
   top: 8%;
   left: 0; /* need to set as zero so buts up to side of image + display = can haver gap on desktop */
   right: 0; /* need to set as zero so buts up to side of image + display = can have gap on desktop */
   padding: 8px 8px 8px 8px;
   font-size: 20px;
}

.image-sub-text { 
   font-size: 15px;
}

.image-text-gallery { 
   top: 8%;
   left: 0; /* need to set as zero so buts up to side of image + display = can have gap on desktop */
   right: 0; /* need to set as zero so buts up to side of image + display = can have gap on desktop */
   padding: 8px 8px 8px 8px;
   font-size: 16px;
}

.image-sub-text-gallery { 
   font-size: 10px;
}

}