<!-- From home alt css -->
/*.heroPersonal .heroContent {background: none!important;}*/

.heroWrapper.carousel .hero .heroContent .primaryHeadline {
    color: #000;
    text-shadow: 0 0 6px #fff;
    }
    .heroWrapper.carousel .hero .heroContent {
    color: #000;
    text-shadow: 0 0 6px #fff;
    }
    /*.heroWrapper.carousel .hero .heroContent .btn {display: none;}*/
    .mainHeadline p {color: #fff;}
    /*.btn.tui-orange-tall-btn i.fa {
        margin-top: 4px;
    }*/
    .btn.tui-orange-tall-btn i.fa {margin-top: 0;}
    span.underLine { text-decoration: underline; background-color: #fff!important; text-decoration-color: #FCD800;}


<!-- INLINE custom css for personal -->
.heroContent sup {font-size: 60%; top: -0.4em;}
.heroPersonal .heroContent .heroContentTop.personalHero .primaryHeadline span {background-color:#FCD800; line-height: 1.2em; font-weight: 600;}
.heroPersonal .heroContent .heroContentBottom p.
div {background-color:#FCD800; }
.callToAction div.mainHeadline {color: #fff;}
.wrapper.form-copy {z-index: 100;}
.tui-orange-btn{color: black !important;}
.heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA span {font-size: 16px;}
/* .heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA span {color: black !important;} */
.tui-blue-btn{color: #fff!important;}
.tui-blue-btn {background-color: #005365; border-color:#005365; color: #fff !important;}
.tui-blue-btn:hover {background-color: #008aae; border-color:#008aae; color: #000 !important;}
.tui-blue-btn .shadow .homePageBannerCTA {color: #fff !important;}
.heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA {margin-bottom: 10px;}
.heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA {width: 335px;}
.optimcopy ul {margin-left: 20px; clear: both; }
.optimcopy ul li {list-style: disc!important;}

.heroContent sup {font-size: 60%; top: -0.4em;}
.heroPersonal .heroContent .heroContentTop.personalHero .primaryHeadline span {background-color:#FCD800; line-height: 1.2em; font-weight: 600;}
.heroPersonal .heroContent .heroContentBottom p.smallText div {background-color:#FCD800; }
.callToAction div.mainHeadline {color: #fff;}
.wrapper.form-copy {z-index: 100;}
.optimcopy ul li {text-align:left!important;}
.heroPersonal .heroContent .heroContentBottom p.smallText {text-align: left!important;}
#engagement .callToAction div.mainHeadline {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  padding: 45px 15px 30px 15px; }
#engagement .callToAction.reengage {
  min-height: 150px;
  background-color: #005365;}
.reengagement a {color: #fff;}
.offerWrapper .offerDetails {
    font-size: 14px;
    text-align: center;
    line-height: 17px;
    letter-spacing: -.04em;
    padding: 10px 0px; 
    background-color: #DDDDDD; 
    height: 80%; 
    }
    .offerWrapper .offerDetails p.offer {
      font-size: 24px;
      text-align: center;
      margin-top: 3px;
      font-weight: 600;
    }
    .offerWrapper .offerDetails p.details {
      font-size: 12px;
      text-align: center;
      margin: 0 0 4px;
    }


@media (min-width: 768px){
    .heroPersonal .heroContent {background-color:rgba(255,255,255,0);}
    .heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA {min-width: 375px;}
    .heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA {width: calc(100% - 20px);}
    .heroPersonal .heroContent {background-color:rgba(255,255,255,0);}
    .heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA {min-width: 375px!important;}
    .heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA.optimBtn {min-width: 170px!important;}
    .heroPersonal .heroContent {margin-left: 0px!important;}
    .heroPersonal .heroContent .heroContentTop.personalHero .primaryHeadline {font-size: 36px; font-weight: 600;}
    .heroPersonal .heroContent .heroContentBottom p.smallText {font-size: 16px; line-height: 23px;}
    .heroPersonal .heroContent .heroContentTop .primaryHeadline {line-height: 40px;}
    .heroPersonal .heroContent .heroContentTop.personalHero .primaryHeadline {font-size: 22px;line-height: 25px;}
    .optimcopy ul li {font-size: 14px!important;}
    .optimcopy li {list-style: disc!important}
    .optimcopy li {text-align: left!important;}
    .heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA {min-width: 200px!important;}
    .primaryHeadline.lowerMobile {font-size: 18px;}
      .offerWrapper .offerDetails p.offer {
        font-size: 19px;
        font-weight: 400;
        text-align: right;
      }
      .offerWrapper .offerDetails p.details {
        font-size: 12px;
        text-align: left;
      }
}
@media (min-width: 1024px) {
    .offerWrapper .offerDetails {
      
    }
    .offerWrapper .offerDetails p.offer {
      font-size: 20px
    }
  }

@media (min-width: 1200px) {
    .featureCarouselPersonalWrapper .carouselPersonal .carousel-inner.byThree .item .carouselContent .carouselHeadline {
        padding: 12px 0 16px 0;
        margin-top: 18px;
        text-align: center;
        font-weight: 500;
        }
    .featureCarouselPersonalWrapper .carouselPersonal .carousel-inner.byThree .item .carouselContent p {text-align: center;}
    .heroPersonal .heroContent .heroContentBottom a.homePageBannerCTA {height: 60px; padding-top: 17px;}
    .heroPersonal .heroContent {margin-left: 0px!important;}
    .heroPersonal .heroContent.secondHero {width: 555px!important;}
    .heroPersonal .heroContent .heroContentTop.personalHero .primaryHeadline {font-size: 47px; line-height: 50px; font-weight: 500;}
    
    .optimcopy ul {margin-left: 20px;}
    .optimcopy ul li {font-size: 18px!important;}   
    .hero-secondary .primaryHeadline {font-size: 38px!important;font-weight: 600; line-height: 50px!important}
    .heroPersonal .heroContent .heroContentBottom p.smallText {font-size: 22px!important; line-height: 30px!important;}
    .heroPersonal .heroContent .heroContentTop.personalHero .primaryHeadline.lowerMobile {font-size: 30px; line-height: 35px;}
    .heroPersonal .btn.tui-orange-tall-btn i.fa {margin-top: 4px;}
   .primaryHeadline.lowerMobile {font-size: 36px;}
  #engagement .callToAction.reengage p {font-weight: 600;}
  .offerWrapper .offerDetails p.offer {
    font-size: 24px
  }
  .offerWrapper .offerDetails p.details {
    font-size: 13px;
  }
}