Dropping in new images

 - adjust placement, text color and scale

Homepage image – image updated, same file name - background color
changed to #000 - change scale and position at normal, “small” and
“smallest size in SCSS file

Features page – image updated, same file name - background color
changed to #000 - position and scale should be changed to “large” and
“medium” and “small” and “smallest”

Overview page – image updated, same file name - background color
changed to #44433e - “small” position changed -  “smallest” no
background image

Download page – new SCSS class added for this and new image

FAQ page – image updated, same file name - background color changed to
#decdb9 - “small” position changed -  “smallest” no background image

Claims page – image added - background color changed to #ccc - text
color changed - media sizes, positions changed

Contact page – image added - background color changed to #000 - text
color changed - media sizes, positions changed

updated SCSS:

// Subhead with larger spacing for centered content

.sub-head-content {
  padding: 130px 0;
  height: 492px;
  text-align: left;
  @include breakpoint(small) {
    padding: 70px 0;
    height: 415px;
  }
  @include breakpoint(smallest) {
    padding: 50px 0;
    height: 400px;
  }
  p {
    font-size: 18px;
    padding: 20px 0;
  }
  .video-link {
    line-height: 100%;
  }
}

.sub-head-2 {
  @extend .sub-head;
  background-image: url('../images/sub-head-faq.jpg');
  background-position: top center;
  background-color: #decdb9;
  @include breakpoint(medium) {
    background-position: 48% 0;
  }
  @include breakpoint(small) {
    background-size: auto 100%;
    background-position: 56% 0;
  }
  @include breakpoint(smallest) {
    background-size: auto 100%;
    background-position: 56% 0;
  }
}

.sub-head-3 {
  @extend .sub-head;
  background-image: url('../images/sub-head-claims.jpg');
  background-position: top center;
  background-color: #222;
  @include breakpoint(large) {
    background-size: auto 100%;
    background-position: 50% 0;
  }
  @include breakpoint(medium) {
    background-position: 56% 0;
  }
  @include breakpoint(small) {
  }
}

.sub-head-4 {
  @extend .sub-head;
  background-image: url('../images/sub-head-overview2.jpg');
  background-position: top center;
  background-color: #44433e;
  @include breakpoint(small) {
    background-size: auto 100%;
    background-position: 34% 0;
  }
  @include breakpoint(smallest) {
    background-image: none;
  }
}

.sub-head-5 {
  @extend .sub-head;
  background-image: url('../images/sub-head-features.jpg');
  background-color: #000;
  background-position: 45% 0;
  @include breakpoint(large) {
     background-position: 45% 0px;
  }
  @include breakpoint(medium) {
     background-position: 0 20px;
  }
  @include breakpoint(small) {
     background-position: 18% -20px;
  }
  @include breakpoint(smallest) {
    background-position: 24% -40px;
  }
}

.sub-head-6 {
  @extend .sub-head;
  background-image: url('../images/sub-head-contact.jpg');
  background-position: top center;
  background-color: #000;
  @include breakpoint(large) {
    background-size: auto 100%;
    background-position: 50% 0;
  }
  @include breakpoint(medium) {
    background-position: 58% 0;
  }
  @include breakpoint(smallest) {
    background-position: 94% 0;
  }
}

.sub-head-7 {
  @extend .sub-head;
  background-image: url('../images/sub-head-download.jpg');
  background-color: #8c8c85;
  background-position: 45% 0;
  @include breakpoint(large) {
     background-position: 45% 0px;
  }
  @include breakpoint(medium) {
     background-position: 10% 20px;
  }
  @include breakpoint(small) {
     background-position: 20% -20px;
  }
  @include breakpoint(smallest) {
    background-position: 28% -90px;
  }
}