/* This is an individual banner css template */

/* NOTE: Make all your rules, at least, children of your parent element to avoid CSS rules cross-contamination */

banner-ad #hero-image-click {
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

banner-ad #intro-bg {
  width: 364px;
  height: 88px;
  position: absolute;
  left: 364px;
}

banner-ad #logo {
  left: 20px;
  top: 30px;
}

banner-ad section#frame-1,
banner-ad section#frame-2 {
  height: 88px;
  width: 100%;
}

banner-ad .title {
  font-size: 26px;
  line-height: 31px;
  padding-left: 100px;
}

banner-ad .title-2 {
  font-size: 20px;
  line-height: 25px;
  padding-left: 20px;
  padding-right: 250px;
}

banner-ad #fr1-headline-container {
  width: 320px;
}

banner-ad #fr2-headline-container {
  top: 0;
  left: 270px;
  width: 456px;
  height: 88px;
}

banner-ad #frame-2-image-container,
banner-ad #frame-2-image {
  width: 235px;
}

banner-ad #cta-click {
  display: table-cell;
  height: 88px;
  left: 525px;
  position: relative;
  vertical-align: middle;
}

banner-ad #cta {
  vertical-align: middle;
  display: inline-block;
  position: relative;
}

banner-ad #colour-block-1,
banner-ad #frame-2-image-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 88px;
}

banner-ad #colour-block-2,
banner-ad #frame-2-image-2 {
  position: absolute;
  top: 0;
  left: 90px;
  width: 90px;
  height: 88px;
}

banner-ad #colour-block-3,
banner-ad #frame-2-image-3 {
  position: absolute;
  top: 0;
  left: 180px;
  width: 90px;
  height: 88px;
}