/* 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*/
/* helper classes for legacy templates */
.bg-white {
  background: #fff;
}

/* ======================================================
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;
}

.cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .down.triple-chevrons span.three, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .down.triple-chevrons span.three, .cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.one, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .triple-chevrons span.one {
  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 .down.triple-chevrons span.one, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .down.triple-chevrons span.one, .cssanimations .modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons span.three, .modalDialogPortalCarousel .carousel .nextSlide button .cssanimations .triple-chevrons span.three {
  animation: triple-chevron-opacity-cycle-three 1s linear infinite;
}
.modalDialogPortalCarousel .carousel .nextSlide button .triple-chevrons {
  display: block;
  width: 14px;
  margin: 40px auto 10px;
}
.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: 0.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);
  }
}