/**
 * Foundation for Sites by ZURB
 * Version 6.2.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
/* fonts */
/* letter spacing */
/* colors */
/* foundation overrides */
body {
  font-family: franklin-gothic-atf, Arial, sans-serif;
  font-weight: 500; }

h1 {
  font-family: franklin-gothic-atf, Georgia, serif;
  font-weight: 800; }

h2, h3, h4, h5, h6 {
  font-family: franklin-gothic-atf, Georgia, serif; }

sup {
  font-size: 0.75em;
  top: 0.1em;
  vertical-align: super; }

.copy sup {
  font-size: clamp(8px, 0.5em, 12px);
  top: 0; }

#hero-image {
  position: relative; }
  @media screen and (min-width: 620px) {
    #hero-image .hide-for-desktop {
      display: none; } }
  #hero-image img {
    width: 100%;
    height: auto; }
  @media screen and (min-width: 530px) {
    #hero-image {
      background-size: cover; } }
  @media screen and (min-width: 620px) {
    #hero-image {
      height: 450px;
      padding: 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
      background-image: url(/Images/Affordability/2022/Desktop/hero.png); } }
  #hero-image .mobile-line {
    display: block; }
    @media (min-width: 620px) {
      #hero-image .mobile-line {
        display: inline; } }
  #hero-image .hero-text {
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    z-index: 1; }
    @media screen and (min-width: 620px) {
      #hero-image .hero-text {
        top: 120px;
        left: 2.25vw;
        right: unset; } }
    @media screen and (min-width: 1400px) {
      #hero-image .hero-text {
        left: 3.5vw;
        right: unset; } }
    #hero-image .hero-text h2 {
      font-family: franklin-gothic-atf, Georgia, serif;
      font-weight: 900;
      font-size: 36px;
      line-height: 36px;
      font-size: 10vw;
      line-height: 10vw;
      color: #000;
      padding: 0 45px; }
      @media screen and (max-width: 470px) {
        #hero-image .hero-text h2 {
          font-size: 30px;
          line-height: 30px;
          font-size: 8vw;
          line-height: 8vw; } }
      @media screen and (max-width: 360px) {
        #hero-image .hero-text h2 {
          font-size: 24px;
          line-height: 24px;
          font-size: 7vw;
          line-height: 7vw; } }
      @media screen and (max-width: 310px) {
        #hero-image .hero-text h2 {
          font-size: 18px;
          line-height: 18px;
          font-size: 5vw;
          line-height: 5vw; } }
      @media screen and (min-width: 620px) {
        #hero-image .hero-text h2 {
          font-size: 28px;
          line-height: 46px; } }
      @media screen and (min-width: 820px) {
        #hero-image .hero-text h2 {
          font-size: 32px; } }
      @media screen and (min-width: 1220px) {
        #hero-image .hero-text h2 {
          font-size: 48px; } }
      #hero-image .hero-text h2:last-of-type {
        padding-left: 75px; }
        @media screen and (min-width: 620px) {
          #hero-image .hero-text h2:last-of-type {
            text-align: right;
            padding-left: 0;
            padding-right: 80px;
            margin-top: -2px; } }
      #hero-image .hero-text h2 > span {
        display: inline-block; }
        @media screen and (min-width: 620px) {
          #hero-image .hero-text h2 > span {
            background-color: #fff;
            padding: 5px 10px; } }
      @media screen and (min-width: 620px) {
        #hero-image .hero-text h2:first-child > span:first-child {
          position: relative; }
          #hero-image .hero-text h2:first-child > span:first-child::after {
            content: ' ';
            position: absolute;
            z-index: -1;
            top: 0;
            left: -3px;
            height: 100%;
            width: 20px;
            background: #fff;
            transform: skew(-5deg); } }

#hero-text {
  position: relative;
  padding: 20px 18px 0; }
  @media screen and (min-width: 40em) {
    #hero-text {
      padding: 50px 50px 123px;
      background-image: url(/Images/Affordability/2020/Desktop/texture.png);
      background-repeat: no-repeat;
      min-height: 396px; } }
  #hero-text.row {
    max-width: 1116px; }
  #hero-text .column {
    padding: 0; }
  #hero-text .hero-header h2 {
    font-size: 32px; }
    #hero-text .hero-header h2 .dollar-sign {
      font-size: 18px;
      vertical-align: top; }
    #hero-text .hero-header h2 .dollar-amount {
      letter-spacing: -0.59px; }
    #hero-text .hero-header h2 .month {
      font-size: 14.2px;
      vertical-align: super; }

@media screen and (min-width: 40em) and (max-width: 975px) {
  #hero-text .hero-header {
    min-width: 286px; } }

@media screen and (min-width: 40em) and (min-width: 976px) and (max-width: 1116px) {
  #hero-text .hero-header {
    min-width: 368px; } }
  #hero-text .hero-description {
    font-family: franklin-gothic-atf, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.33;
    margin-top: 11px; }

@media screen and (min-width: 40em) and (max-width: 975px) {
  #hero-text .hero-description {
    max-width: calc(100% - 316px); } }

@media screen and (min-width: 40em) and (min-width: 976px) and (max-width: 1115px) {
  #hero-text .hero-description {
    max-width: calc(100% - 398px); } }

@media screen and (min-width: 40em) and (min-width: 1116px) {
  #hero-text .hero-description {
    padding-left: 50px; } }
  #hero-text .hero-button {
    margin-top: 42px;
    padding: 0 30px; }
    @media screen and (min-width: 40em) {
      #hero-text .hero-button {
        margin-top: 21px;
        padding: 0; } }
    #hero-text .hero-button > a {
      display: inline-block;
      width: 100%;
      height: 48px;
      padding: 16px 0 0;
      background-image: url(/Images/Mobile/fill@2x.png);
      background-size: 100% 100%;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 1px;
      line-height: 1;
      margin: 0; }
      @media screen and (min-width: 40em) {
        #hero-text .hero-button > a {
          padding-left: 33px;
          padding-right: 33px;
          width: auto; } }
  #hero-text .hero-disclaimer {
    margin-top: 19px;
    font-size: 18px;
    line-height: 1;
    text-align: center; }
    @media screen and (min-width: 40em) {
      #hero-text .hero-disclaimer {
        display: inline-block;
        margin-left: 18px;
        text-align: left; } }
    #hero-text .hero-disclaimer span {
      font-size: 9px;
      vertical-align: super; }
    #hero-text .hero-disclaimer a {
      color: #000;
      text-decoration: underline; }

#content {
  position: relative;
  width: 100%;
  padding: 0 0 79px; }
  @media screen and (min-width: 40em) {
    #content {
      padding-bottom: 142px;
      margin-top: -46px;
      padding: 0 18px 79px; } }
  @media screen and (min-width: 40em) and (min-width: 1440px) {
    #content {
      padding-bottom: 102px; } }
  #content .component-bikes {
    padding-top: 12px; }
    @media screen and (max-width: 39.9375em) {
      #content .component-bikes {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 45px; } }
    @media screen and (min-width: 880px) {
      #content .component-bikes .static {
        display: none; } }
    #content .component-bikes .static .bike {
      padding-top: 50px;
      text-align: center; }
      #content .component-bikes .static .bike.bike1 img {
        padding-bottom: 16px; }
      #content .component-bikes .static .bike.bike2 img {
        padding-bottom: 25px; }
      #content .component-bikes .static .bike.bike3 img {
        padding-bottom: 20px; }
      #content .component-bikes .static .bike h2 {
        font-family: franklin-gothic-compressed, Arial, sans-serif;
        font-stretch: condensed;
        font-size: 41.6px;
        font-weight: 700;
        text-transform: uppercase; }
        #content .component-bikes .static .bike h2 .hd {
          font-size: 20px;
          letter-spacing: 0.63px; }
      #content .component-bikes .static .bike .copy {
        padding-top: 8px;
        font-size: 23.4px;
        line-height: 31.2px; }
    #content .component-bikes .carousel {
      overflow: hidden;
      position: relative;
      height: 497px;
      margin: 0 -18px; }
      @media screen and (max-width: 879px) {
        #content .component-bikes .carousel {
          display: none; } }
      #content .component-bikes .carousel .button, #content .component-bikes .carousel .button:focus, #content .component-bikes .carousel .button:active, #content .component-bikes .carousel .button:visited {
        display: inline-block;
        position: absolute;
        top: 96px;
        border: none;
        user-select: none;
        background-color: #fff;
        color: #000;
        width: 64px;
        height: 96px;
        padding: 37px 0 0;
        font-size: 18px;
        line-height: 18px;
        vertical-align: middle;
        font-weight: bold; }
        #content .component-bikes .carousel .button.prev-button, #content .component-bikes .carousel .button:focus.prev-button, #content .component-bikes .carousel .button:active.prev-button, #content .component-bikes .carousel .button:visited.prev-button {
          left: calc(50% - 328px); }
        #content .component-bikes .carousel .button.next-button, #content .component-bikes .carousel .button:focus.next-button, #content .component-bikes .carousel .button:active.next-button, #content .component-bikes .carousel .button:visited.next-button {
          right: calc(50% - 328px); }
        #content .component-bikes .carousel .button:hover, #content .component-bikes .carousel .button:focus:hover, #content .component-bikes .carousel .button:active:hover, #content .component-bikes .carousel .button:visited:hover {
          text-decoration: none;
          color: #fa6600; }
      #content .component-bikes .carousel .bike {
        width: 656px;
        position: absolute;
        top: 0;
        text-align: center; }
        #content .component-bikes .carousel .bike img {
          width: 498px; }
        #content .component-bikes .carousel .bike.next-bike {
          right: calc(((100% - 656px) / 2) - 656px); }
        #content .component-bikes .carousel .bike.prev-bike {
          left: calc(((100% - 656px) / 2) - 656px); }
        #content .component-bikes .carousel .bike.current {
          left: calc(50% - 328px); }
        #content .component-bikes .carousel .bike h2 {
          font-family: franklin-gothic-compressed, Arial, sans-serif;
          font-stretch: condensed;
          font-size: 41.6px;
          font-weight: 700;
          text-transform: uppercase;
          text-align: center;
          padding-top: 28px; }
          #content .component-bikes .carousel .bike h2 .hd {
            font-size: 20px;
            letter-spacing: 0.63px; }
        #content .component-bikes .carousel .bike .copy {
          padding-top: 8px;
          font-size: 23.4px;
          line-height: 31.2px; }
        #content .component-bikes .carousel .bike.blurred h2 {
          font-size: 32px; }
        #content .component-bikes .carousel .bike.blurred .copy {
          font-size: 18px;
          line-height: 24px; }
          #content .component-bikes .carousel .bike.blurred .copy sup {
            font-size: 7px; }
  #content .component-harley-group {
    position: relative;
    padding: 45px 18px;
    background: #fff; }
    @media screen and (min-width: 40em) {
      #content .component-harley-group {
        max-width: 700px;
        padding: 40px 40px 40px 188px;
        margin: 83px auto 0;
        z-index: -1; } }
    #content .component-harley-group img {
      display: inline-block;
      width: 82px;
      height: 68px; }
      @media screen and (min-width: 40em) {
        #content .component-harley-group img {
          position: absolute;
          top: 106px;
          left: 54px; } }
    #content .component-harley-group h2 {
      padding-top: 18px;
      font-family: franklin-gothic-atf, Georgia, serif;
      font-weight: 600;
      font-size: 48px; }
    #content .component-harley-group .copy {
      padding-top: 27px;
      font-size: 18px;
      line-height: 1.33; }
      #content .component-harley-group .copy sup {
        font-size: 14px; }
  #content .component-promos {
    padding-top: 59px; }
    @media screen and (max-width: 39.9375em) {
      #content .component-promos {
        padding-left: 18px;
        padding-right: 18px; } }
    @media screen and (min-width: 1188px) {
      #content .component-promos {
        padding: 0;
        margin: -70px auto 0;
        max-width: 1360px;
        display: flex;
        align-items: flex-start;
        justify-content: space-around; } }
    @media screen and (min-width: 1188px) {
      #content .component-promos .promo-content-1 {
        /* width of images + spacer column */
        width: 566px; } }
  @media screen and (min-width: 1188px) and (min-width: 1361px) {
    #content .component-promos .promo-content-1 {
      width: 662px; } }
    @media screen and (min-width: 1188px) {
      #content .component-promos .promo-content-2 {
        /* width of image */
        width: 405px; }
        #content .component-promos .promo-content-2 .promo-content {
          width: 322px; } }
  @media screen and (min-width: 1188px) and (min-width: 1361px) {
    #content .component-promos .promo-content-2 {
      width: 434px; } }
    #content .component-promos .promo-image {
      display: flex;
      align-items: flex-end; }
      @media screen and (min-width: 1188px) {
        #content .component-promos .promo-image .promo-image-1 img {
          width: 351px;
          height: 496px; } }
  @media screen and (min-width: 1188px) and (min-width: 1361px) {
    #content .component-promos .promo-image .promo-image-1 img {
      width: 410px;
      height: 613px; } }
      @media screen and (min-width: 1188px) {
        #content .component-promos .promo-image .promo-image-2 img {
          width: 193px;
          height: 242px; } }
  @media screen and (min-width: 1188px) and (min-width: 1361px) {
    #content .component-promos .promo-image .promo-image-2 img {
      width: 226px;
      height: 300px; } }
      @media screen and (min-width: 1188px) {
        #content .component-promos .promo-image.promo-image-3 img {
          width: 405px;
          height: 393px; } }
  @media screen and (min-width: 1188px) and (min-width: 1361px) {
    #content .component-promos .promo-image.promo-image-3 img {
      width: 434px;
      height: 446px; } }
      @media screen and (min-width: 1188px) {
        #content .component-promos .promo-image.promos-height {
          height: 496px; } }
  @media screen and (min-width: 1188px) and (min-width: 1361px) {
    #content .component-promos .promo-image.promos-height {
      height: 613px; } }
      @media screen and (min-width: 1361px) {
        #content .component-promos .promo-image .d1360 {
          display: none; } }
      @media screen and (max-width: 1360px) {
        #content .component-promos .promo-image .d1440 {
          display: none; } }
      #content .component-promos .promo-image.spacer-row {
        padding-top: 59px; }
      #content .component-promos .promo-image .spacer-column {
        width: 18px;
        flex-shrink: 0; }
        @media screen and (min-width: 1188px) {
          #content .component-promos .promo-image .spacer-column {
            width: 22px; } }
  @media screen and (min-width: 1188px) and (min-width: 1361px) {
    #content .component-promos .promo-image .spacer-column {
      width: 26px; } }
    #content .component-promos .promo-content {
      padding-top: 22px; }
      #content .component-promos .promo-content h3 {
        font-family: franklin-gothic-compressed, Arial, sans-serif;
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase; }
      #content .component-promos .promo-content .content {
        font-size: 16px;
        line-height: 22px; }

#credit-approval {
  background-color: #fff; }
  #credit-approval .row {
    max-width: 100%; }
  #credit-approval .column {
    padding: 0; }
  #credit-approval .content {
    position: relative;
    padding: 48px 18px; }
    @media screen and (max-width: 1199px) {
      #credit-approval .content img {
        padding-bottom: 48px; } }
    @media screen and (min-width: 1200px) {
      #credit-approval .content {
        height: 490px;
        padding: 49px 0 0 calc((50% + 123px) + 64px); }
        #credit-approval .content img {
          width: 660px;
          position: absolute;
          right: calc(50% - 153px);
          top: 49px; } }
    @media screen and (min-width: 1200px) and (min-width: 1440px) {
      #credit-approval .content img {
        top: 91px;
        width: 768px; } }
    @media screen and (min-width: 1200px) {
        #credit-approval .content > div {
          width: 390px; } }
  @media screen and (min-width: 1200px) and (min-width: 1440px) {
    #credit-approval .content {
      height: 600px;
      padding: 91px 0 0 calc((50% + 123px) + 94px); }
      #credit-approval .content > div {
        width: 413px; } }
    #credit-approval .content h2 {
      font-family: franklin-gothic-compressed, Arial, sans-serif;
      font-stretch: condensed;
      font-size: 32px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 1px;
      padding: 0; }
      @media screen and (min-width: 1200px) {
        #credit-approval .content h2 {
          font-size: 48px;
          letter-spacing: 0.5px; } }
    #credit-approval .content h4 {
      font-family: franklin-gothic-compressed, Arial, sans-serif;
      font-stretch: condensed;
      font-size: 24px;
      font-weight: 600;
      color: #fa6600;
      text-transform: uppercase;
      line-height: 21px;
      padding: 0 0 16px; }
    #credit-approval .content .ready-content {
      padding-top: 18px;
      font-size: 18px;
      line-height: 1.33; }
    #credit-approval .content .ready-button {
      padding: 27px 30px 0; }
      @media screen and (min-width: 640px) {
        #credit-approval .content .ready-button {
          padding: 36px 0 0; } }
  @media screen and (min-width: 640px) and (min-width: 1440px) {
    #credit-approval .content .ready-button {
      padding: 45px 0 0; } }
      #credit-approval .content .ready-button a {
        display: inline-block;
        width: 100%;
        height: 48px;
        padding: 16px 0 0;
        background-image: url(/Images/Mobile/fill@2x.png);
        background-size: 100% 100%;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 1;
        margin: 0; }
        @media screen and (min-width: 40em) {
          #credit-approval .content .ready-button a {
            width: 216px; } }
    #credit-approval .content img {
      display: none; }
      @media screen and (max-width: 1360px) {
        #credit-approval .content img.d1360 {
          display: block; } }
      @media screen and (min-width: 1361px) and (max-width: 1440px) {
        #credit-approval .content img.d1440 {
          display: block; } }
      @media screen and (min-width: 1441px) {
        #credit-approval .content img.d2000 {
          display: block; } }

#disclaimer {
  background-color: #f8f6f5;
  background-image: url(/Images/Affordability/2021/Mobile/skull-stamp.png);
  background-position: left 0 top 80px;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 48px 18px; }
  #disclaimer div {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0; }
    #disclaimer div h4 {
      margin: 16px 0 0;
      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0;
      font-weight: bold;
      text-transform: uppercase; }
      #disclaimer div h4 sup {
        font-weight: bold; }
    #disclaimer div sup.asterisk {
      font-size: 16px;
      vertical-align: initial; }
    #disclaimer div sup.number {
      font-size: 7px; }
  @media screen and (min-width: 40em) {
    #disclaimer {
      background-image: url(/Images/Affordability/2021/Desktop/skull-stamp.png);
      background-position: right top;
      background-repeat: no-repeat;
      background-size: 30vw;
      padding: 166px 18px 114px; }
      #disclaimer div {
        max-width: 90rem;
        margin: 0 auto;
        padding-right: 27.5vw; } }