/* override default breakpoints */
/* function to convert the calc function in to rem based
$first- should be in % */
/** Slick Carousel Starts **/
/** Slick Carousel Ends **/
.step-up-container {
  border-top: 0.0625rem solid #b3b4b4;
  padding-top: 0.9375rem;
  padding-bottom: 1.1875rem;
  margin-top: 0.9375rem; }
  .step-up-container .slick-carousel .slick-slide {
    margin-right: 0.5rem; }
    .step-up-container .slick-carousel .slick-slide:focus {
      outline: none;
      outline-offset: 0; }
    .step-up-container .slick-carousel .slick-slide .product-tile {
      min-height: auto; }
      .step-up-container .slick-carousel .slick-slide .product-tile:focus {
        outline: none;
        outline-offset: 0; }
      .step-up-container .slick-carousel .slick-slide .product-tile a {
        display: block;
        border: 0.125rem solid transparent; }
        .step-up-container .slick-carousel .slick-slide .product-tile a:focus {
          outline: none;
          outline-offset: 0; }
          .step-up-container .slick-carousel .slick-slide .product-tile a:focus .tile-body img {
            outline: none; }
            @media (min-width: 576px) {
              .step-up-container .slick-carousel .slick-slide .product-tile a:focus .tile-body img {
                border: 0.125rem solid #2d2926;
                -webkit-box-shadow: 0 0 0.3125rem 0.0625rem #2d2926;
                        box-shadow: 0 0 0.3125rem 0.0625rem #2d2926; } }
        .step-up-container .slick-carousel .slick-slide .product-tile a:hover {
          text-decoration: none; }
          @media (min-width: 576px) {
            .step-up-container .slick-carousel .slick-slide .product-tile a:hover .tile-body img {
              -webkit-box-shadow: 0 0 0.3125rem 0rem #2d2926;
                      box-shadow: 0 0 0.3125rem 0rem #2d2926; } }
        .step-up-container .slick-carousel .slick-slide .product-tile a .tile-body {
          padding: 0.0625rem; }
          .step-up-container .slick-carousel .slick-slide .product-tile a .tile-body img {
            max-width: 3.875rem;
            max-height: 3.875rem;
            margin-bottom: 1rem;
            border-radius: 0.25rem;
            border: 0.0625rem solid #696158; }
          .step-up-container .slick-carousel .slick-slide .product-tile a .tile-body p {
            color: #000;
            margin-bottom: 0.25rem; }
  .step-up-container .slick-carousel .slick-dots {
    position: relative;
    top: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-image: none; }
    .step-up-container .slick-carousel .slick-dots li {
      outline: 0.0625rem solid #2d2926;
      border-radius: 50%; }
      .step-up-container .slick-carousel .slick-dots li.slick-active button {
        background-color: #2d2926; }
  .step-up-container .step-up-tile {
    background-color: rgba(72, 71, 69, 0.1); }
    .step-up-container .step-up-tile .tile-image {
      height: 4.375rem;
      width: 4.375rem; }
    .step-up-container .step-up-tile .step-up-atc {
      min-height: 2rem;
      font-size: 0.75rem; }
  .step-up-container button.custom-arrow.arrow-sr-only-xs {
    width: 2.5rem;
    height: 2.5rem;
    -webkit-box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.15);
            box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background-color: #fff; }
    .step-up-container button.custom-arrow.arrow-sr-only-xs:hover {
      -webkit-box-shadow: 0 0 0.3125rem 0.0625rem #2d2926;
              box-shadow: 0 0 0.3125rem 0.0625rem #2d2926; }
      .step-up-container button.custom-arrow.arrow-sr-only-xs:hover .svg-icon {
        fill: #2d2926; }
    .step-up-container button.custom-arrow.arrow-sr-only-xs:active, .step-up-container button.custom-arrow.arrow-sr-only-xs:focus {
      border-radius: 50%;
      -webkit-box-shadow: 0 0 0.3125rem 0.0625rem #2d2926;
              box-shadow: 0 0 0.3125rem 0.0625rem #2d2926;
      border: 0.125rem solid #2d2926;
      outline: 0; }
      .step-up-container button.custom-arrow.arrow-sr-only-xs:active .svg-icon, .step-up-container button.custom-arrow.arrow-sr-only-xs:focus .svg-icon {
        fill: #2d2926; }
    .step-up-container button.custom-arrow.arrow-sr-only-xs .svg-arrow-right,
    .step-up-container button.custom-arrow.arrow-sr-only-xs .svg-arrow-left {
      fill: #696158;
      width: 0.5625rem;
      height: 1rem;
      -webkit-filter: none;
              filter: none; }