/* mark for deprecation starts - Deprecate when all instances replaced by corresponding $gray-@ variable */
/* mark for deprecation ends */
/* helper classes for legacy templates */
.bg-white {
  background: #fff; }

/* small screen fonts*/
/* ======================================================
BREAK POINTS
====================================================== */
.modalDialogPortalCarousel .carousel .nextSlide button {
  width: auto;
  padding: 0;
  margin: auto;
  border: none;
  border-radius: 0;
  background-color: transparent; }
  .modalDialogPortalCarousel .carousel .nextSlide button::-moz-focus-inner {
    padding: 0;
    border: 0; }

.modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons {
  display: block;
  width: 14px;
  margin: 40px auto 10px; }
  .cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.one, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .triple-chevrons span.one, .cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span.three, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .down.triple-chevrons span.three {
    animation: triple-chevron-opacity-cycle-one 1s linear infinite; }
  .cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.two, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .triple-chevrons span.two {
    animation: triple-chevron-opacity-cycle-two 1s linear infinite; }
  .cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.three, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .triple-chevrons span.three, .cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span.one, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .down.triple-chevrons span.one {
    animation: triple-chevron-opacity-cycle-three 1s linear infinite; }
  .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span {
    display: block;
    width: 14px;
    height: 9px;
    overflow: hidden;
    margin-top: -2px;
    background-repeat: no-repeat;
    background-size: 100%; }
    .svg .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span, .modalDialogPortalCarousel .carousel .nextSlide button .svg .triple-chevrons span {
      background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/chevron_up_white.svg"); }
    .no-svg .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span, .modalDialogPortalCarousel .carousel .nextSlide button .no-svg .triple-chevrons span {
      background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/chevron_up_white.png"); }
    .no-cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.one, .modalDialogPortalCarousel .carousel .nextSlide button .no-cssanimations .triple-chevrons span.one {
      opacity: 1; }
    .no-cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.two, .modalDialogPortalCarousel .carousel .nextSlide button .no-cssanimations .triple-chevrons span.two {
      opacity: 0.6; }
    .no-cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.three, .modalDialogPortalCarousel .carousel .nextSlide button .no-cssanimations .triple-chevrons span.three {
      opacity: 0.3; }
  .svg .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span, .modalDialogPortalCarousel .carousel .nextSlide button .svg .down.triple-chevrons span {
    background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/chevron_down_white.svg"); }
  .no-svg .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span, .modalDialogPortalCarousel .carousel .nextSlide button .no-svg .down.triple-chevrons span {
    background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/chevron_down_white.png"); }
  .no-cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span.one, .modalDialogPortalCarousel .carousel .nextSlide button .no-cssanimations .down.triple-chevrons span.one {
    opacity: 0.3; }
  .no-cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span.two, .modalDialogPortalCarousel .carousel .nextSlide button .no-cssanimations .down.triple-chevrons span.two {
    opacity: 0.6; }
  .no-cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span.three, .modalDialogPortalCarousel .carousel .nextSlide button .no-cssanimations .down.triple-chevrons span.three {
    opacity: 1; }

@keyframes triple-chevron-opacity-cycle-one {
  0%,
  40% {
    opacity: 0; }
  60% {
    opacity: 1; }
  80%,
  100% {
    opacity: 0; } }

@keyframes triple-chevron-opacity-cycle-two {
  0%,
  20% {
    opacity: 0; }
  40% {
    opacity: 1; }
  60%,
  100% {
    opacity: 0; } }

@keyframes triple-chevron-opacity-cycle-three {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  40%,
  100% {
    opacity: 0; } }

.cssanimations .modalOpen[data-attention-seeker="spin"] {
  animation: attention-seeker-spin 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }

.modalClose {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  color: #00803E;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 5px #969696 solid;
  transition: all 300ms; }
  .modalClose:before {
    color: inherit;
    font-size: 32px;
    line-height: 36px; }
  .modalClose:hover {
    color: #017D75; }
  .modalClose.videoClose {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none; }
    .modalClose.videoClose:hover span {
      opacity: .8;
      top: 50%;
      position: absolute;
      width: 102px;
      height: 66px;
      background: url("/etc/designs/honda/theme_inclusive/img/portal/sprite_youtube_button.png") no-repeat 0px -66px;
      margin: -33px 0 0 -51px; }

.modalDialogPortalCarousel {
  position: relative;
  background-color: #ED1B2F; }
  .js .modalDialogPortalCarousel {
    height: 100%;
    margin: 0 15px; }
    .js .modalDialogPortalCarousel:before, .js .modalDialogPortalCarousel:after {
      opacity: 0.3;
      position: absolute;
      top: 0;
      width: 1px;
      height: 100%;
      content: "";
      border: 0 dashed #fff; }
    .js .modalDialogPortalCarousel:before {
      left: -6px;
      border-left-width: 1px; }
    .js .modalDialogPortalCarousel:after {
      right: -6px;
      border-right-width: 1px; }
  .modalDialogPortalCarousel .carousel {
    box-sizing: border-box;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; }
    .js .modalDialogPortalCarousel .carousel .carouselWrapper,
    .js .modalDialogPortalCarousel .carousel .carouselItem {
      height: 100%;
      margin: 0; }
    .js .modalDialogPortalCarousel .carousel .carouselWrapper {
      box-sizing: border-box;
      padding: 36px 0 0; }
      .js .modalDialogPortalCarousel .carousel .carouselWrapper > ul {
        height: 100%;
        margin: 0; }
    .modalDialogPortalCarousel .carousel .carouselItem {
      overflow: auto; }
      .touch .modalDialogPortalCarousel .carousel .carouselItem {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch; }
      .modalDialogPortalCarousel .carousel .carouselItem .itemInner {
        box-sizing: border-box;
        position: relative;
        min-height: 100%; }
        .js .modalDialogPortalCarousel .carousel .carouselItem .itemInner {
          padding-bottom: 9em; }
      .modalDialogPortalCarousel .carousel .carouselItem .copyArea {
        box-sizing: border-box;
        margin: 0;
        padding: 22px 30px 0;
        text-align: center; }
        .modalDialogPortalCarousel .carousel .carouselItem .copyArea .contentBody {
          padding: 0 20px; }
          .modalDialogPortalCarousel .carousel .carouselItem .copyArea .contentBody p,
          .modalDialogPortalCarousel .carousel .carouselItem .copyArea .contentBody a {
            color: #fff; }
          .modalDialogPortalCarousel .carousel .carouselItem .copyArea .contentBody p {
            font-family: "ProximaNovaExCnSReg";
            font-size: 1.8em !important;
            line-height: 1.3; }
            .modalDialogPortalCarousel .carousel .carouselItem .copyArea .contentBody p b,
            .modalDialogPortalCarousel .carousel .carouselItem .copyArea .contentBody p strong {
              font-family: "ProximaNovaExCnSbold";
              font-weight: normal; }
      .modalDialogPortalCarousel .carousel .carouselItem:first-child .copyArea .contentBody p {
        font-size: 2.2em !important; }
      .modalDialogPortalCarousel .carousel .carouselItem .disclaimer {
        padding-top: 0;
        border-top: none; }
        .modalDialogPortalCarousel .carousel .carouselItem .disclaimer p {
          color: #fff; }
    .modalDialogPortalCarousel .carousel .iconCta {
      overflow: visible; }
      .modalDialogPortalCarousel .carousel .iconCta li {
        margin: 0 0 2em; }
        .modalDialogPortalCarousel .carousel .iconCta li a {
          position: relative;
          margin: 0 25.5px 0 0;
          padding: 0.8em 30px 0.8em 20px;
          color: #ED1B2F;
          font-family: "ProximaNovaExCnSReg";
          font-size: 1.8em;
          letter-spacing: 0;
          background-color: #fff; }
          .modalDialogPortalCarousel .carousel .iconCta li a:before {
            position: absolute;
            top: -4px;
            right: -25.5px;
            width: 51px;
            height: 51px;
            content: "";
            line-height: 51px;
            text-align: center;
            z-index: 1; }
            .svg .modalDialogPortalCarousel .carousel .iconCta li a:before {
              background-image: url("/etc/designs/honda/theme_inclusive/img/icons/icon_cta_diamond_chevrons_right_mobile.svg"); }
            .no-svg .modalDialogPortalCarousel .carousel .iconCta li a:before {
              background-image: url("/etc/designs/honda/theme_inclusive/img/icons/icon_cta_diamond_chevrons_right_mobile.png"); }
          .no-js .modalDialogPortalCarousel .carousel .iconCta li a {
            margin-right: 0; }
    .modalDialogPortalCarousel .carousel .controlsArea {
      min-height: 36px;
      margin: -1em 0 3em;
      padding: 15px 12px; }
    .modalDialogPortalCarousel .carousel .controls {
      opacity: 1;
      transition: all 300ms ease-in-out;
      position: relative;
      top: auto;
      width: 36px;
      height: 36px;
      margin: 0 auto;
      line-height: 36px;
      background-color: #D61A2C; }
      .modalDialogPortalCarousel .carousel .controls:hover, .modalDialogPortalCarousel .carousel .controls:focus {
        background-color: #AA1524; }
      .modalDialogPortalCarousel .carousel .controls:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 9px;
        height: 16px;
        margin: auto;
        content: "";
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 100%; }
      .modalDialogPortalCarousel .carousel .controls.prev {
        left: auto;
        float: left; }
        .svg .modalDialogPortalCarousel .carousel .controls.prev:before {
          background-image: url("/etc/designs/honda/theme_inclusive/img/icons/modal_carousel_control_prev.svg"); }
        .no-svg .modalDialogPortalCarousel .carousel .controls.prev:before {
          background-image: url("/etc/designs/honda/theme_inclusive/img/icons/modal_carousel_control_prev.png"); }
      .modalDialogPortalCarousel .carousel .controls.next {
        right: auto;
        float: right; }
        .svg .modalDialogPortalCarousel .carousel .controls.next:before {
          background-image: url("/etc/designs/honda/theme_inclusive/img/icons/modal_carousel_control_next.svg"); }
        .no-svg .modalDialogPortalCarousel .carousel .controls.next:before {
          background-image: url("/etc/designs/honda/theme_inclusive/img/icons/modal_carousel_control_next.png"); }
    .modalDialogPortalCarousel .carousel .contentBody,
    .modalDialogPortalCarousel .carousel .controlsArea {
      position: relative; }
      .modalDialogPortalCarousel .carousel .contentBody:before, .modalDialogPortalCarousel .carousel .contentBody:after,
      .modalDialogPortalCarousel .carousel .controlsArea:before,
      .modalDialogPortalCarousel .carousel .controlsArea:after {
        position: absolute;
        content: "";
        background-color: #fff; }
      .modalDialogPortalCarousel .carousel .contentBody:before,
      .modalDialogPortalCarousel .carousel .controlsArea:before {
        width: 100%;
        height: 1px; }
      .modalDialogPortalCarousel .carousel .contentBody:after,
      .modalDialogPortalCarousel .carousel .controlsArea:after {
        width: 1px;
        height: 77px; }
    .modalDialogPortalCarousel .carousel .contentBody:before, .modalDialogPortalCarousel .carousel .contentBody:after {
      top: -60px;
      left: 0; }
    .modalDialogPortalCarousel .carousel .controlsArea:before, .modalDialogPortalCarousel .carousel .controlsArea:after {
      bottom: 0;
      right: 0; }
    .modalDialogPortalCarousel .carousel .indicatorSteps {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      box-sizing: border-box;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1;
      width: auto;
      height: 36px;
      margin: 0;
      padding: 0 30px;
      text-align: left;
      background-color: #fff; }
      .modalDialogPortalCarousel .carousel .indicatorSteps span {
        width: 22px;
        height: 36px;
        overflow: visible;
        margin: 0;
        padding: 0;
        text-align: center;
        background-color: transparent; }
        .modalDialogPortalCarousel .carousel .indicatorSteps span:before {
          transition: all 300ms ease-in-out 500ms;
          color: #D0D0D0;
          font-size: 18px;
          line-height: 36px; }
        .modalDialogPortalCarousel .carousel .indicatorSteps span:after {
          transition: all 300ms ease-in-out 500ms;
          position: absolute;
          left: 5px;
          bottom: 0;
          width: 0;
          height: 0;
          content: "";
          border-style: solid;
          border-width: 6px 6px 0 6px;
          border-color: #fff transparent transparent transparent; }
        .modalDialogPortalCarousel .carousel .indicatorSteps span.selected {
          background-color: transparent; }
          .modalDialogPortalCarousel .carousel .indicatorSteps span.selected:before {
            color: #ED1B2F; }
          .modalDialogPortalCarousel .carousel .indicatorSteps span.selected:after {
            bottom: -6px; }
    .modalDialogPortalCarousel .carousel .nextSlide {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      position: absolute;
      bottom: 0;
      width: 100%;
      display: none;
      padding: 0 0 4em;
      text-align: center; }
      .js .modalDialogPortalCarousel .carousel .nextSlide {
        display: block; }
      .modalDialogPortalCarousel .carousel .nextSlide button {
        position: relative;
        overflow: visible;
        margin: 0;
        padding: 0;
        color: #fff;
        font-family: "ProximaNovaExCnSReg";
        font-size: 1.8em;
        letter-spacing: 0;
        text-decoration: none;
        text-transform: uppercase; }
        .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons {
          position: absolute;
          left: 0;
          right: 0;
          margin: 6px auto; }
    .modalDialogPortalCarousel .carousel .selected .nextSlide {
      opacity: 1; }
  .modalDialogPortalCarousel .modalClose {
    border: none; }

.modalDialogPortalSocial {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
  height: 260px;
  max-width: 350px;
  max-height: 560px;
  overflow: auto;
  margin: auto;
  padding: 0 8px;
  text-align: center;
  background-color: #fff; }
  .modalDialogPortalSocial h2 {
    margin: 1em 0;
    padding: 0;
    color: #666;
    font-family: "ProximaNovaExCnSbold";
    font-size: 3.6em;
    line-height: 0.9;
    text-transform: uppercase; }
  .modalDialogPortalSocial p {
    margin-bottom: 0.5em;
    color: #666;
    font-family: "ProximaNovaExCnLight";
    font-size: 1.6em; }
  .modalDialogPortalSocial .shareLinks li {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    min-width: 64px;
    min-height: 64px;
    margin: 0 2px 1.6em;
    font-size: 1em;
    text-align: center; }
    .modalDialogPortalSocial .shareLinks li:before, .modalDialogPortalSocial .shareLinks li:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 64px;
      height: 64px;
      margin: 0;
      padding: 0; }
    .modalDialogPortalSocial .shareLinks li:before {
      z-index: 2;
      color: #fff;
      font-size: 34px;
      text-align: center;
      line-height: 64px; }
    .modalDialogPortalSocial .shareLinks li:after {
      z-index: 1;
      content: "";
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%; }
      .svg .modalDialogPortalSocial .shareLinks li:after {
        background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/diamond_with_outline_red.svg"); }
      .no-svg .modalDialogPortalSocial .shareLinks li:after {
        background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/diamond_with_outline_red.png"); }
    .modalDialogPortalSocial .shareLinks li:hover:after {
      background-position: center; }
      .svg .modalDialogPortalSocial .shareLinks li:hover:after {
        background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/diamond_with_outline_green_highlight.svg"); }
      .no-svg .modalDialogPortalSocial .shareLinks li:hover:after {
        background-image: url("/etc/designs/honda/theme_inclusive/img/portal/icons/diamond_with_outline_green_highlight.png"); }
    .modalDialogPortalSocial .shareLinks li a {
      box-sizing: border-box;
      position: relative;
      top: 0;
      left: 0;
      z-index: 2;
      display: block;
      width: 100%;
      color: #666;
      padding: 64px 0 0;
      font-family: "ProximaNovaExCnLight";
      font-size: 1.6em;
      letter-spacing: normal;
      border-bottom: none; }
      .modalDialogPortalSocial .shareLinks li a:before {
        position: absolute;
        top: 20px;
        right: 0;
        left: 0;
        width: 22px;
        height: 22px;
        margin: auto;
        padding: 0;
        background-size: 100%; }
      .modalDialogPortalSocial .shareLinks li a:after {
        display: none; }
      .modalDialogPortalSocial .shareLinks li a .title {
        display: inline-block;
        padding: 0.5em 0; }
  .modalDialogPortalSocial .modalClose {
    border: none; }

@keyframes attention-seeker-spin {
  0%,
  90% {
    transform: rotateY(0deg); }
  100% {
    transform: rotateY(360deg); } }