/* -------------------- Hero ---------------------- */

/* this is built specifically for the Red Tag template, so it includes css from that. Try to avoid doubling up on the declarations and just replace the existing code with this one's if updating.  */
.cw-slide-wrap {
  position: relative;
  height: 550px;
  z-index: 10;
  background-color: black;
  padding: 3rem 0;
}

.cw-slide-wrap .cw-hero {
  /* position: relative; */
  z-index: 5;
  width: 100%;
  /* padding: 30px 0; */
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: var(--color-theme-text);
  overflow: hidden;
}

/* .cw-slide-wrap .cw-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(255, 255, 255, 0.7);
    transform: unset;
  } */

.cw-slide-wrap .container {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
}

.cw-slide-wrap .cw-hero-overlay2 {
  display: none;
}

.cw-slide-wrap .cw-hero-title {
  color: var(--color-theme-header);
}

.cw-slide-wrap .cw-hero-title .cw-bigtext {
  font-size: 1.5rem;
  color: inherit;
  font-weight: 700;
  font-family: var(--headerfont);
  text-transform: uppercase;
  display: block;
  line-height: 0.9;
  margin-bottom: 15px;
}

.cw-slide-wrap .cw-hero-title .cw-smalltext {
  font-size: 1.2rem;
  color: var(--color-theme-primary);
  font-weight: 400;
  font-family: var(--bodyfont);
  display: block;
  line-height: 1.1;
}

@media (min-width: 576px) {
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 2.5rem;
  }

  /* .cw-slide-wrap .cw-hero {
      padding: 70px 0;
    } */

  .cw-slide-wrap #cw-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .cw-slide-wrap #cw-carousel .carousel-inner,
  .cw-slide-wrap #cw-carousel .carousel-item {
    height: 100%;
  }

  .cw-slide-wrap #cw-carousel img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 768px) {
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 3rem;
  }

  .cw-slide-wrap .cw-hero-title .cw-smalltext {
    font-size: 1.3rem;
  }
  .cw-slide-wrap .cw-hero-overlay2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
    /* transform: skewX(-20deg); */
    transform-origin: top left;
  }
  /* 
    .cw-slide-wrap .cw-hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      z-index: 0;
      width: 1000%;
      transform: skewX(-20deg);
      transform-origin: top left;
    } */

  .cw-slide-wrap .cw-hero-overlay2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
    /* transform: skewX(-20deg); */
    transform-origin: top left;
  }
}

@media (min-width: 992px) {
  .cw-slide-wrap .cw-hero {
    /* this is built specifically for the Red Tag template and that header/navbar so if you aren't using that, you can probably get rid of these variables and negative margins. */
    margin-top: calc(-1 * var(--cw-headerHeight));
    padding: 200px 0 150px;
    padding-top: calc(var(--cw-headerHeight) + 100px);
  }

  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 3.5rem;
  }

  .cw-slide-wrap .cw-hero-title .cw-smalltext {
    font-size: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 3.5rem;
  }
}

@media (min-width: 1400px) {
  .cw-slide-wrap .cw-hero-title .cw-bigtext {
    font-size: 3.5rem;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
  .cw-slide-wrap .container {
    position: relative !important;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
  }

  .cw-slide-wrap .cw-hero-overlay {
    background: transparent !important;
  }

  .cw-slide-wrap {
    position: relative;
    height: 100% !important;
    z-index: 10;
    padding-bottom: 2rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and ) */
@media (min-width: 1400px) {
}
/*----------- Slideshow Background Images -----------*/

/*----------- Animation Delays -----------*/

.animated {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}

/**Second Section**/
.cw-mainBtns {
  background-image: url("https://cdn.powersports.com/cdn-cgi/image/h=1440,w=1920/E482BBDA97196D7AE712DB12F83AF41A.jpg");
  background-size: cover;
  background-position: center;
  padding: 3em;
}

.cw-mainBtns .cw-shop {
  border: 2px solid #fff;
  padding: 1em;
  margin: 1em 0;
  min-height: 190px;
}

.cw-mainBtns .cw-shop:hover {
  background-color: #fff;
  color: #000;
}

.cw-mainBtns .cw-shop {
  color: #fff;
}

.cw-mainBtns .cw-shop h5 {
  font-size: 1.5em;
  text-transform: uppercase;
}

/**Third Section**/
.cw-about {
  margin: 1.5em;
}

.cw-welcome h5 {
  font-size: 1.5em;
  color: #2675fd;
}

/* XS: 440px & Up */
@media (min-width: 440px) {
}

/* SM: 768px & Up */
@media (min-width: 768px) {
  .cw-slideshow-caption {
    top: 50%;
  }
  .cw-slideshow-content .btn {
    width: 200px;
  }
  .cw-about {
    margin: 3em;
  }
}

/* MD: 992px & Up */
@media (min-width: 992px) {
  .cw-mainBtns .cw-shop {
    min-height: 150px;
  }
  .cw-mainBtns .cw-shop h5 {
    font-size: 2em;
    font-weight: 700;
  }
  .cw-mainBtns .cw-shop p,
  .cw-welcome p {
    font-size: 1.3em;
  }
  .cw-welcome h5 {
    font-size: 2em;
  }
  .cw-about img {
    margin-top: 50%;
  }
}

/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*------ Primary Btns ----------------------------------------------------------------------------*/
.btn-primary,
.btn-submit,
.businessinfo .btn-primary,
.vdp__info__addt__mod .btn-secondary,
.form .btn-primary,
.vdp-module-canvas-razor-wrapper .btn-secondary,
.vdp-module-canvas-razor-wrapper
  .vdp__sticky-navigation__mod
  .sn_item
  button.button_sn_item,
.vdp-module-canvas-razor-wrapper .btn-check:active + .btn-outline-secondary,
.vdp-module-canvas-razor-wrapper .btn-check:checked + .btn-outline-secondary,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary.active,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary.dropdown-toggle.show,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary:active,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary {
  color: #fff !important;
  background: linear-gradient(
    to bottom,
    #0c44a6,
    #2675fd,
    #0c44a6,
    #0c44a6
  ) !important;
  border-color: #fff !important;
  transition: 0.3s ease !important;
}
.btn-primary:hover,
.btn-submit:hover,
.businessinfo .btn-primary:hover,
.vdp__info__addt__mod .btn-secondary:hover,
.page-home section.inventory-search-module .btn-primary:hover,
.form .btn-primary:hover,
.vdp-module-canvas-razor-wrapper .btn-secondary:hover,
.vdp-module-canvas-razor-wrapper
  .vdp__sticky-navigation__mod
  .sn_item
  button.button_sn_item:hover,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary:hover,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary:hover:focus,
.vdp-module-canvas-razor-wrapper
  .btn-outline-secondary:not([disabled]):not(.disabled).active,
.vdp-module-canvas-razor-wrapper
  .btn-outline-secondary:not([disabled]):not(.disabled):active,
.vdp-module-canvas-razor-wrapper .show > .btn-outline-secondary.dropdown-toggle,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary:hover {
  color: #fff !important;
  background: linear-gradient(to bottom, #111, #333, #222, #111) !important;
  border-color: #fff !important;
}
/*------ Secondary Btns ----------------------------------------------------------------------------*/
.btn-secondary,
.vdp-module-canvas-razor-wrapper .btn-primary,
section.page-inventory-details .btn.btn-primary,
.inventory .inventory-cta .btn:not(.btn-pre-qualified),
.inventoryslideshow .inventoryslideshow-arrow.btn-secondary,
.inventoryslideshow .inventoryslideshow-arrow.btn-secondary:focus {
  color: #000 !important;
  background: linear-gradient(to bottom, #ccc, #fff, #aaa, #aaa) !important;
  border-color: #000 !important;
  transition: 0.3s ease !important;
}
.btn-secondary:hover,
.vdp-module-canvas-razor-wrapper .btn-primary:hover,
section.page-inventory-details .btn.btn-primary:hover,
.inventory .inventory-cta .btn:not(.btn-pre-qualified):hover,
.inventoryslideshow .inventoryslideshow-arrow.btn-secondary:hover {
  color: #fff !important;
  background: linear-gradient(to bottom, #111, #333, #222, #111) !important;
  border-color: #fff !important;
}
.btn-primary::before,
.btn-secondary::before,
.vdp-module-canvas-razor-wrapper .btn-outline-secondary:before,
.btn-outline-secondary:before,
.inventoryslideshow .inventoryslideshow-arrow.btn-secondary::before {
  background: transparent !important;
}

/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.header .navbar .active > .nav-link,
.navbar .nav-link:hover {
  color: #fff !important;
}
/*-----------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.cw-title {
  background: linear-gradient(to bottom, #000, #222);
  color: #fff;
  text-align: center;
}
@media (min-width: 992px) {
  .cw-title {
    text-align: right;
  }
}
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
.inventory .card-header {
  background-color: #333 !important;
  color: #fff !important;
}
/* ---------------------------------------- */
.inventory .vehicle-card.layout-1 .financing {
  color: #fff !important;
  background: linear-gradient(
    to bottom,
    #0c44a6,
    #2675fd,
    #0c44a6,
    #0c44a6
  ) !important;
  border-color: #fff !important;
  transition: 0.3s ease !important;
  width: fit-content;
  margin: 0.1em auto 1.5em auto;
  padding: 8px 30px;
  border: 1px solid #fff;
  border-radius: 3px;
  transition: 0.3s ease !important;
}

.inventory .vehicle-card.layout-1 .financing:hover {
  color: #fff !important;
  background: linear-gradient(to bottom, #111, #333, #222, #111) !important;
  border-color: #fff !important;
}
/* ---------------------------------------- */
.vdp__veh__info__mod
  .veh__info__item:nth-child(even)[VehicleInfoWidgetCssScope] {
  background-color: #222 !important;
}
/* -------------------------------------------------------------------------------------------------- */
.inventorydetails,
.sitemap,
.termsandconditions {
  margin-top: 8em;
}
section:not(.page-home) .title {
  padding-top: 5em;
}
