// Rocky Mountain Boat Company Custom Less

// Colors
@black: #080808;
@black-background: #0f0f0f;
@white: #ffffff;
@muted: #f8f8f8;
@primaryDark: #010e1f;
@primary: #1E5396;
@primaryLight: #47a3ff;
@secondary: #ED1C24;
@tertiary: #FFFF00;


// Fonts
// h1, h2, h3, h4, h5, h6: Passion One
// p: Roboto

:root {
  --mm-cta-view-boat-bg: @primary;
  --mm-cta-view-boat-bg-hover: @primary;
  --mm-cta-view-boat-text: @white;
  --mm-cta-check-availability-bg: var(--mm-cta-view-boat-bg);
  --mm-cta-check-availability-bg-hover: var(--mm-cta-view-boat-bg-hover);
  --mm-cta-check-availability-text: var(--mm-cta-view-boat-text);
  --mm-usage-badge-bg: @primary;
  --mm-usage-badge-shadow: transparent;
  --mm-usage-badge-text: @white;
  --mm-title-link-hover: @secondary;
  --mm-monthly-payment-link: darken(@primary, 20%);
  --mm-cta-request-pricing-bg: @primary;
  --mm-cta-request-pricing-shadow: @primary;
  --mm-cta-request-pricing-bg-hover:darken(@primary, 20%);
  --mm-cta-request-pricing-text: #fff;
  --mm-featured-bg:  @secondary;
  --mm-featured-text: @white;
  --mm-featured-card-gradient-to-100: @secondary;
  --mm-featured-card-gradient-via-50: @muted;
  --mm-filter-accent: darken(@primary, 20%);
  --mm-cta-show-more-bg: @primary;
  --mm-cta-show-more-bg-hover: darken(@primary, 20%);
  --mm-cta-show-more-text: @white;
}

// Global Fixes

.uk-position-center {
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.uk-position-bottom-center {
    left: 50%;
    transform: translateX(-50%);
}

.uk-switcher.switcher-target {
    height: fit-content;
}

.uk-section-black {
  background-color: @black;
}

.uk-section-blue {
  background-color: #021B3B;
}

.uk-card-primaryDark {
  background-color: @primaryDark;
}

.uk-background-primaryDark {
  background-color: @primaryDark;
}

.uk-section-primaryDark {
  background-color: @primaryDark;
}

.uk-background-blue {
  background-color: #021B3B;
}

.uk-background-primaryLight {
    background-color: @primaryLight;
}

.uk-width-fit-content {
  width: fit-content;

  @media(max-width:960px) {
    width: 100%;
  }
}

.uk-button-secondary {
  color: black !important;
}

.padding-remove {
  &-left {
    padding-left: 0px;
  }

  &-top {
    padding-top: 0px;
  }

  &-right {
    padding-right: 0px;
  }
  
  &-bottom {
    padding-bottom: 0px;
  }
}

@media(max-width:960px) {
    .card-cut.uk-card{
        padding-bottom: 30px;
    }
}

.card-cut {
  clip-path: ~"polygon(30px 0%, calc(100% - 30px) 0%, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0% calc(100% - 30px), 0% 30px);"
}

.image-cut {
  height: ~"calc(100% - 40px)";
  width: ~"calc(100% - 40px)";
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  clip-path: ~"polygon(30px 0%, calc(100% - 30px) 0%, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0% calc(100% - 30px), 0% 30px);"
}

.make-square {
  aspect-ratio: 1.05;
  height: auto;
}

.custom-switcher {
  .uk-subnav.uk-subnav-pill {
    li>a {
      border: 2px solid white;
      color: white;
    }

    li.uk-active>a {
      background-color: white;
      color: #021B3B;
    }

    li:hover>a {
      background-color: white;
      color: #021B3B;
    }
  }
}

.custom-slider {
  .uk-slidenav {
    margin: 0px;
    padding: 6px 20px;
    transition: all .2s ease-in-out;
    bottom: -50px;
    clip-path: ~"polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%)";
    color: white !important;
    background-color: transparent;
    border: 2px solid white;

    &:hover {
      background-color: white;
      color: @primaryDark !important;
      clip-path: ~"polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px)";
    }
  }

  .uk-dotnav {
    margin-top: 25px !important;
    margin-bottom: 25px;
    min-height: 9px;

    .uk-grid-margin {
        margin-top: 15px;
    }

    &>*>* {
      width: 18px !important;
      border-radius: 3px;
      border: 2px solid @white;
      background-color: transparent;
    }

    .uk-active>* {
      background-color: @white;
    }

    a:hover {
      background-color: @white;
    }
  }
}

// Empty State Fix
.hits-empty-state {
  text-align: center;

  svg {
    display: inline-block;
    margin: 0 auto;
  }

  .hits-empty-state-title {
    color: white;
  }

  .hits-empty-state-description {
    color: white;
  }
}

// Overlays
.black_overlay {
  &-xlight {
      background: rgba(0, 0, 0, .3);
  }

  &-light {
      background: rgba(0, 0, 0, .5);
  }

  &-medium {
      background: rgba(0, 0, 0, .65);
  }

  &-dark {
      background: rgba(0, 0, 0, .8);
  }
}

.white_overlay {
  &-xlight {
      background: rgba(255, 255, 255, .3);
  }

  &-light {
      background: rgba(255, 255, 255, .5);
  }

  &-medium {
      background: rgba(255, 255, 255, .65);
  }

  &-dark {
      background: rgba(255, 255, 255, .8);
  }
}

.primaryDark_overlay {
  &-xlight {
    background: rgba(1, 14, 31, .3);
}

&-light {
    background: rgba(1, 14, 31, .5);
}

&-medium {
    background: rgba(1, 14, 31, .65);
}

&-dark {
    background: rgba(1, 14, 31, .8);
}
}

// Nav Menu Base Styles

.tm-toolbar {
  z-index: 9999;
  background: @primaryDark;
  padding: 5px 0px;
  font-size: 16px;

  .uk-container {
      max-width: 1400px;
  }

  .uk-flex-inline {
    div {
      padding-left: 20px;
    }
  }

  a:hover {
    .uk-icon {
      transform: scale(125%);
      color: white;
    }

    p {
      color: white;
    }
  }
}

.tm-top {
  z-index: 9997;
  position: relative;
}

.tm-header {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.uk-navbar-left {
  top: -0px;
  position: absolute;
  left: 0px;

  @media(max-width:960px) {
      top: unset;
      position: unset;
      left: unset;
  }
}

// Horizontal Nav Bar Styles

.uk-navbar-dropdown {
  width: 100% !important;
  max-width: 1000px !important;
  left: unset !important;
  right: 0 !important;
  padding: 15px;
  top: 60px !important;
    display: none;
    background-color: #021B3B;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

  a {
    font-family: 'Roboto';
    color: white !important;
    font-weight: 500;
  }

  p {
    font-family: 'Roboto';
    color: white;
    font-size: 18px;
    font-weight: 500;
  }

  h2 {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 1px;
    color: white;
    border-bottom: 2px solid @secondary;

    a {
      display: block;
      width: 100%;
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 1px;
      color: white;
      font-family: 'Passion One';
    }

    a:hover {
      background-color: @secondary;
      color: @black !important;
    }
  }
}

.Hnav-dropdown-container {
  .Hnav-heading-top {
    margin-bottom: 10px;
  }

  .Hnav-heading {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .uk-list {
    margin: 0px;
    padding-left: 15px;
  }

  a:hover {
    color: @secondary !important;
  }
}

#brand-Hnav-dropdown {
  .Hnav-dropdown-container {
    padding: 0px;
  }
}

.Hnav-brand-switcher-control-container {

  p {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .logo-div {

    padding: 2px;
    background-color: white;
    min-height: 30px;

    img {
      width: 30px;
      height: auto;
    }

    svg {
      width: 30px;
      height: auto;
    }
  }
}

.Hnav-brand-switcher-container {
  a:hover {
    p {
      color: @secondary !important;
    }
  }

  img {
    background-color: white;
  }

  .nav-divider {
    border-top: 2px solid @secondary;
  }
}

// Mobile Nav Styles

#tm-dialog-mobile {

    background-color: @primaryDark;

    .uk-offcanvas-bar {
      background-color: @primaryDark;
    
      h2 {
        border-bottom: 2px solid @secondary;
      }
    
      img {
        padding: 10px;
        background-color: @white;
      }
    }
    
    .uk-offcanvas {
      z-index: 9999 !important;
    }
}

#custom_html-3 {
    .uk-nav-accordion>li>a {
        font-size: 20px;
        color: white;

        &:hover {
            color: white;
        }
    }

    .mobile-sub-accordion>ul>li>a {
        font-size: 20px;
        color: white;

        &:hover {
            color: white;
        }
    }

    .mobile-sub-accordion .uk-nav-sub {
        padding-left: 0px;
    }

    .mobile-sub-accordion .uk-nav-sub>li>a {
        font-size: 20px;
        color: white;

        &:hover {
            color: white;
        }
    }

    .socials {
        .uk-icon {
            color: white;

            &:hover {
                color: white;
            }
        }
    }
}

// Mobile Cta

@media(max-width: 960px) {
  .mobile-cta {
    position: fixed;
    top: 59px;
    left: 0;
    border-radius: 0;
    width: 102%;
    z-index: 900;
  }

  .mobile-cta a {
    padding: 0;
    border-radius: 0;

  }

  .mobile-cta a:nth-child(1) {
    padding: 0;
    border-radius: 0;
    border-right: 1px solid @primaryDark;
  }

  .tm-main {
    margin-top: 39px;
  }

}

// Header Styles

.home-header {

    .primaryDark_overlay-medium {
        clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 30px);
    }

    .h1-target {
    font-size: 2.5rem;

    span {
      display: block;
    }

    span:nth-child(2n) {
      font-size: 1.5rem;
    }
  }
}

.inventory-archive-header {
  .h1-target {
    
    font-size: 2.5rem;

    span {
      display: block;
    }

    span:nth-child(2n) {
      font-size: 1.5rem;
    }
  }
}

.company-header {

  .h1-target {

    span {
      display: block;
    }

    span:nth-child(2n) {
      font-size: 1.5rem;
    }
  }

  .primaryDark_overlay-medium {
    clip-path: ~"polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 0% 100%, 0% 50px)";
  }
}

.sub-header {
  .h1-target {

    span {
      display: block;
    }

    span:nth-child(2n) {
      font-size: 1.5rem;
    }
  }
}


// Page Template Styles



// Section Styles

// Core Services

.core-services {
  .text-div {
    background-color: rgba(1, 14, 31, .65);
    clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0% 100%);
    position: absolute;
    bottom: -60px;
    width: ~"calc(101% - 80px)";
    transition: all .2s ease-in-out;
    will-change: transform;
    backface-visibility: hidden;
    
    h2 {
      font-size: 2.5rem;
      color: @primaryLight;
      width: fit-content;
      padding-bottom: 60px;
      transition: all .2s ease-in-out;
  
      span {
        display: block;
        color: @white;
      }
    }
  }

  @media(max-width: 1200px) {
    .text-div {
      width: ~"calc(101% - 40px)";
    }
  }

  a:hover {
    .text-div {
      bottom: 0%;
      background-color: rgba(1, 14, 31, .8);

      h2 {
        color: @white;
      }
    }
  }
}

// Home First Section

.home-first-section {
  .fit-content {
    width: fit-content;
  }
}

// Featured Inventory

.featured-inventory {
  h3 {
    padding: 15px 20px;
    display: inline-block;
    padding-bottom: 4px;
  }

  .cut-top {
    clip-path: ~"polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);"
  }

  .slider-container {
    clip-path: ~"polygon(0% 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%,20px 100%, 0% calc(100% - 20px))";
    position: relative;
    top: -1px;
    padding: 20px;
  }

  .uk-slider-container {
    height: fit-content;
  }

  .uk-slider-items {
    height: fit-content;
  }

  .uk-slidenav {
    margin: 0px;
    padding: 6px 20px;
    transition: all .2s ease-in-out;
    bottom: -50px;
    clip-path: ~"polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%)";
    color: white;
    background-color: transparent;
    border: 2px solid white;

    &:hover {
      background-color: white;
      color: @primaryDark !important;
      clip-path: ~"polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px)";
    }
  }

  .uk-dotnav {
    margin-top: 25px !important;
    margin-bottom: 25px;
    min-height: 9px;

    &>*>* {
      width: 18px !important;
      border-radius: 3px;
      border: 2px solid @white;
      background-color: transparent;
    }

    .uk-active>* {
      background-color: @white;
    }

    a:hover {
      background-color: @white;
    }
  }
}

// Brands Section

.brands {

  a {
    
    .logo-container {
      clip-path: ~"polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%)";
      width: ~"calc(100% + 2px)";
      height: ~"calc(100% + 2px)";
      left: -1px;
      top: -1px;
      transition: all .3s ease-in-out;
      background-color: #021B3B;

      div {
        max-width: 200px;
        width: 90%;

        img {
          width: 100%;
          height: auto;
        }
      }
    }

    .Supra {
      background-color: #BA0C2F;
      height: ~"calc(100% - 1px)";
    }

    .Moomba {
      background-color: #2273BA;
      height: ~"calc(100% - 1px)";
    }

    .Heyday {
      background-color: #467075;
      height: ~"calc(100% - 1px)";
    }

    .Landau {
      background-color: #9DA5CF;
      height: ~"calc(100% - 1px)";
    }

    .Paradigm {
      background-color: #6cc3cd;
      height: ~"calc(100% - 1px)";
    }

    .Viaggio {
      background-color: #e7c985;
      height: ~"calc(100% - 1px)";
    }
  }

  a:hover {
    .logo-container {
      // clip-path: ~"polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0% calc(100% - 50px), 0% 50px)";
      clip-path: ~"polygon(40% 0%, 60% 0%, 100% 40%, 100% 60%, 60% 100%, 40% 100%, 0% 60%, 0% 40%)";
    }
  }
}

// Service Section

.service {
  border-bottom: 10px solid #021B3B;
  border-top: 10px solid #021B3B;
  overflow: hidden;

  .uk-switcher {
    height: auto !important;
  }

  .uk-flex-inline.uk-flex-middle {
    gap: 20px;
  }

  .image-container {
    width: 100%;

    img {
      width: 100%;
      height: auto;
    }
  }

  h3 {
    font-size: 1.5rem;
  }

  .custom-slider {

    .uk-slider-items {

      a {
        .uk-cover-container {
          clip-path: ~"polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%)";
          transition: all .2s ease-in-out;

          .black_overlay-light {
            transition: all .2s ease-in-out;
          }
        }
      }

      a:hover {

        .uk-cover-container {
          clip-path: ~"polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0% calc(100% - 50px), 0% 50px)";

          .black_overlay-light {
            background: rgba(1, 14, 31, .3);
          }
        }
      }
    }
  }

  .custom-grid {
    margin-bottom: 59px;

    a {
      .uk-cover-container {
        clip-path: ~"polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%)";
        transition: all .2s ease-in-out;

        .black_overlay-light {
          transition: all .2s ease-in-out;
        }
      }
    }

    a:hover {

      .uk-cover-container {
        clip-path: ~"polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0% calc(100% - 50px), 0% 50px)";

        .black_overlay-light {
          background: rgba(1, 14, 31, .3);
        }
      }
    }
  }
}

// Pro Shop Section

.pro-shop {
  .inventory-grid {
    a {
      .uk-cover-container {
        clip-path: ~"polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%)";
        transition: all .2s ease-in-out;

        .black_overlay-light {
          transition: all .2s ease-in-out;
        }
      }
    }

    a:hover {

      .uk-cover-container {
        clip-path: ~"polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0% calc(100% - 50px), 0% 50px)";

        .black_overlay-light {
          background: rgba(1, 14, 31, .3);
        }
      }
    }
  }
}

#footer {
  .uk-accordion>:nth-child(n+2) {
    margin-top: 5px;
    padding-top: 5px;
  }

  h4 {
    font-family: 'Roboto';
    font-size: 1.25rem;
  }
}

// Inventory Archive

#inventory-archive {
  
  #root {
    h3 {
      font-weight: 500;
    }

    .ais-ScrollTo>.bg-white {
      background-color: transparent;

      section .flex.flex-col.overflow-y-scroll.py-2.pt-0.pr-1.pl-3 {
        padding-left: 30px;
      }
    }
  }

  .content-loop-new, .last-section {

  h2 {
    font-family: 'Passion One' !important;
    letter-spacing: 1px !important;
    font-size: 1.7rem !important;
    margin: 0 0 20px 0 !important;
  }

  @media(max-width:960px) {
    font-size: 2rem;
  }

  p {
    font-family: 'Roboto';
    font-size: 18px;
  }

  } 

  #infinite_list {
    &>div.ais-Stats {
        span {
            color: white !important;
        }
    }

    &>div>div>a {
        color: white !important;

        &:hover {
            color: @secondary !important;
        }
    }
  }

  .clear-filters {

    button>div {
            color: white !important;

        &:hover {
            color: @secondary !important;
        }
    }
  }
}

// Form Styles

.uk-card-primary, .uk-tile-primary {
  .gform_wrapper .top_label .gfield_label {
    color: white !important;
    font-weight: 500 !important;
  }

  .ui-datepicker-trigger {
    background-color: white;
    padding: 5px;
  }

  .gf_step_pending .gf_step_number {
    color: white !important;
  }
  .gform_wrapper.gravity-theme .gfield_error label {
    color: white !important;
  }

  .gform_wrapper.gravity-theme .gfield_error legend {
    color: white !important;
  }

  .gform_wrapper.gravity-theme .gfield_required {
    color: white !important;
  }
}

// Financing Calculator

.financing-calculator {

  .number-input {
    position: relative;
    width: ~"calc(100% - 40px)";
    padding: 6px 16px 4px 16px;
    border: 4px solid transparent;
    font-size: 16px;
    -moz-appearance: textfield;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }

    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    &:focus {
      border: @secondary 4px solid;
      outline: 0 !important;
    }
  }

  .input-container {
    position: relative;
    margin-bottom: 10px;

    .up-down-container {
      position: absolute;
      right: 0;
      top: 22px;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */

      a {
        display: block;
        height: 18px;
        width: 24px;
        position: relative;

        &.up {
          .uk-icon {
            position: relative;
            top: -5px;
            left: 4px;
            color: black;
          }
        }

        &.down {
          .uk-icon {
            position: relative;
            top: -5px;
            left: 4px;
            color: black;
          }
        }
      }
    }

    .form-label {
      font-size: 14px;
    }

    .form-sub-label {
      font-size: 14px;
      margin-top: 3px;
      margin-bottom: 0px;
    }
  }

  .summary-list {
    p {
      font-size: 16px;
      margin: 0px;
    }
  }
}

#subpage {

    aside {
        z-index: 1;
    }

  .widget-menu {

    li:hover {
      background-color: @primaryDark;
    }

    li {
      margin: 0px;

      &.uk-active {
        background-color: @primaryDark;
      }

      a {
        display: block;
        padding: 5px 10px;
      }
    }

    a {
      color: white !important;
    }
  }
}

// Boat Single

.description-panel {
  ul {
    margin: 0px;
  }
}


.boat-single-form{
        .gform_wrapper {
    margin-top: -20px!important;
}
    }
.get-more-info-form {
      .gform_footer {
        margin-top: 10px !important;
        padding: 0 !important;
      }

      .gform_footer input {
        border-radius: 5px !important;
        background-color: #000 !important;
        font-weight: bold !important;
         border: 1px solid @secondary !important;
      }

      .gform_wrapper select {
        height: 45px !important;

      }

      .gform_wrapper .ginput_container_select {
        margin-bottom: 16px;
      }

      .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
      .gform_wrapper input[type=text] {
        height: 45px;
        margin-bottom: 16px;
      }

      .gform_wrapper.gravity-theme .gfield textarea.small {
        height: 65px !important;
      }

      .gform_wrapper.gravity-theme .gform_fields {
        row-gap: 0 !important;
      }



      .gform_wrapper.gravity-theme .gform_footer {
        justify-content: center;
      }

      .gfield_checkbox {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        @media(max-width:1450px){
            display: block!important;
        }
         @media(max-width:1200px){
            display: flex!important;
            justify-content: space-between;
        }
          @media(max-width:500px){
            display: block!important;
        }
      }

      .gfield_checkbox label {
        max-width: calc(100% - 0px) !important;
        font-size: 12px!important;
      
      }
      .gfield-choice-input{
        margin: 0px -2px 0px 7px!important;
      }
   

      @media(max-width: 1550px) {
        .gfield_checkbox {
          display: flex;
          justify-content: flex-start;

           .gchoice{
          @media(max-width:1450px){
float: left;
margin: 0;
width: 40%;
        }
         @media(max-width:1200px){
           float: unset;
margin: unset;
width: unset;
        }
         @media(max-width:500px){
float: left;
margin: 0;
width: 40%;
        }
      }
        }

      }
      
    }
    #gform_confirmation_wrapper_15{
            height: 300px!important;
      position: relative!important;
      }

    

// MM Styles

.mm-inventory-item {
    
  height: fit-content;
    
  a {
    height: fit-content;
  }

  p {
    transition: all .3s ease-in-out;
    margin: 0px;
  }

  &:hover {
    p:not(.price-text) p:not(.title-text) {
      color: @primary !important;
    }

    .price {
      background-color: @primary;

      p {
        color: white !important;
      }
    }
  }

  .location {
    position: absolute;
    top: 0;
    left: 0;
    height: fit-content;

    p {
      padding: 5px 6px 2px 6px;
      margin: 0px;
      color: white;
    }
  }

  .price {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-99%);
    background-color: @secondary;
    padding: 5px 6px 2px 6px;
    color: @black !important;
    transition: all .3s ease-in-out;

    p {
      width: fit-content;
    }
  }

  .title {
    padding: 18px 15px 15px 15px;
  }

  .title-text {
    color: white;
  }
}

// Sprites

// Supra

.supra-sa, .supra-se, .supra-sl, .supra-sv
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/04/supra-sprites.png'); }
 
.supra-sa { background-position: 0 0%; background-size: 100%; }
.supra-se { background-position: 0 33.333333%; background-size: 100%; }
.supra-sl { background-position: 0 66.666667%; background-size: 100%; }
.supra-sv { background-position: 0 100%; background-size: 100%; }

// Moomba

.moomba-craz, .moomba-kaiyen, .moomba-makai, .moomba-max, .moomba-mojo, 
  .moomba-mondo, .moomba-tykon
  { max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/04/moomba-sprites.png'); }
  
  .moomba-craz { background-position: 0 0%; background-size: 100%; }
  .moomba-kaiyen { background-position: 0 16.666667%; background-size: 100%; }
  .moomba-makai { background-position: 0 33.333333%; background-size: 100%; }
  .moomba-max { background-position: 0 50%; background-size: 100%; }
  .moomba-mojo { background-position: 0 66.666667%; background-size: 100%; }
  .moomba-mondo { background-position: 0 83.333333%; background-size: 100%; }
  .moomba-tykon { background-position: 0 100%; background-size: 100%; }

// Heyday

.heyday-h20, .heyday-h22, .heyday-wt-2dc, .heyday-wt-surf
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/04/heyday-sprites.png'); }
 
.heyday-h20 { background-position: 0 0%; background-size: 100%; }
.heyday-h22 { background-position: 0 33.333333%; background-size: 100%; }
.heyday-wt-2dc { background-position: 0 66.666667%; background-size: 100%; }
.heyday-wt-surf { background-position: 0 100%; background-size: 100%; }

// Landau

.landau-atlantis, .landau-azure, .landau-island-breeze, .landau-signature
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/04/landau-sprites-1.png'); }
 
.landau-atlantis { background-position: 0 0%; background-size: 100%; }
.landau-azure { background-position: 0 35.532995%; background-size: 100%; }
.landau-island-breeze { background-position: 0 68.624161%; background-size: 100%; }
.landau-signature { background-position: 0 100%; background-size: 100%; }

// Paradigm

.paradigm-23-series, .paradigm-24-series, .paradigm-296-surf
  { max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/04/paradigm-sprites.png'); }
  
  .paradigm-23-series { background-position: 0 0%; background-size: 100%; }
  .paradigm-24-series { background-position: 0 50%; background-size: 100%; }
  .paradigm-296-surf { background-position: 0 100%; background-size: 100%; }

// Viaggio

.viaggio-diamante-2024-black, .viaggio-lagov-white, .viaggio-lagox-green, .viaggio-lagoz-2024-red
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/04/viaggio-sprites.png'); }
 
.viaggio-diamante-2024-black { background-position: 0 0%; background-size: 100%; }
.viaggio-lagov-white { background-position: 0 33.333333%; background-size: 100%; }
.viaggio-lagox-green { background-position: 0 66.666667%; background-size: 100%; }
.viaggio-lagoz-2024-red { background-position: 0 100%; background-size: 100%; }