.out-stock {
    color: #d22f25;
}

.in-stock {
    color: #37b048;
}

.product-sku {
    font-size: 1rem;
    color: #243062;
}



#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 768px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

}


.shop-filters .filter-title {
background: #ff7a00;
padding: 18px 15px;
border-radius: 8px 8px 0 0;
font-size: 1.2rem;
color: white;
letter-spacing: 0;
font-weight: 900;
text-align: center;
position: relative;
bottom: 8px;
}

.shop-filters .filter-title {
    background-color: #ff7a00;
}

.toolbar .cart-btn>.btn {
    background: #ff7a00;
}

.header-full .logo img {
/* Change this for desktop */
    max-width: 200px !important;
    height: auto !important;
    max-height: none !important;
}

.toolbar .cart-btn .btn i,
.toolbar .cart-btn:hover > .btn i {
color: white;
}

/* CSS For Homepage Hexagon Image Rollover Image Effect */

@media screen and (max-device-width: 787px) {
  .rollover_container {
    display: none;
  }
}

.rollover_container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ffffff;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
/* End of CSS For Rollover Image Effects */

/* Reduce Banner Image Size and Centre on Mobile devices */

.mobilehexagon {
  display: block;
}
@media screen and (max-device-width: 787px) {
  .mobilehexagon {
    width: 60%;
  margin-left: auto;
  margin-right: auto;
  }
}
/* End of code to Reduce Banner Image Size and Centre on Mobile devices */

/* Snowflakes */

.snow-flake {
  position: absolute; // [1] Break the layout flow
  color: white; // [2] Set the color for the snowflake
  &:after {
    content: "\2744"; // [3] Give it some shape
  }
}

.snowflake:nth-child(1) {
  top: -20%;
}

.snowflake:nth-child(2) {
  top: -40%;
}

.snowflake:nth-child(3) {
  top: -33%;
}

// Total number of snowflakes
$snowflake: 250;

// Randomize the animation and positioning for each snowflake
@for $i from 1 through $snow-flake {
  // Position of the snowflake on the y-axis
  $top: (random(50) + 50) * 1%;

  // Position of the snowflake on the x-axis
  $left: random(100) * 1%;

  // Animation delay for the flake
  $delay: random(20) - 1s;

  // Floating span for the flake
  $duration: random(6) + 4s;

  // Size of the flake
  $size: random(24);

   /* Snowflake ##{$i} */
  .snowflake:nth-of-type(#{$i}) {
    animation-name: snowflake-#{$i};
    animation-delay: $delay;

    // Play the animation for anything between 5-10 seconds
    animation-duration: $duration;
    animation-iteration-count: infinite;
    left: $left;
    top: -$top;
    &:after {
      font-size: $size * 1px;
    }
  }
  
  // Animation for snowflake ##{$i}
  @keyframes snowflake-#{$i} {
    0% {
      transform: rotate(0deg);
      left: $left;
      top: -$top;
    }
    25% {
      left: $left + 1%;
    }

    50% {
      left: $left;
    }

    75% {
      left: $left + 2%;
      opacity: 1;
    }
    100% {
      transform: rotate(360deg);
      top: $top + 40%;
      opacity: 0;
    }
  }
}


/* Reduce space under Office Essentials row on homepage */
.merchandisingcontent_container .catalog-single {
    padding: 0 0 0px;
    margin-top: 7px;
}





#toast-container-approval {
    display: none !important;
}