@-webkit-keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes ripple {
  0% {
    transform: translate(-100%, -100%);
  }
  80% {
    transform: translate(-100%, -100%) scale(50);
  }
  100% {
    transform: translate(-100%, -100%) scale(50);
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    transform: translate(-100%, -100%);
  }
  80% {
    transform: translate(-100%, -100%) scale(50);
  }
  100% {
    transform: translate(-100%, -100%) scale(50);
    opacity: 0;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes bounceEffect {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bounceEffect {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/******************************************************************
Site Name:
Author:

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/*********************
RESPONSIVE HELPER FUNCTION
If you're creating a responsive site, then
you've probably already read
Responsive Web Design: http://www.abookapart.com/products/responsive-web-design

Here's a nice little helper function for calculating
target / context
as mentioned in that book.

Example:
width: cp(650px, 1000px);
or
width: calc-percent(650px, 1000px);
both compile to:
width: 65%;
*********************/
.mini-cart-backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.45s ease, z-index 0s linear 0.5s;
  width: 100%;
  z-index: -1;
}
.mini-cart-backdrop.active {
  opacity: 1;
  transition: opacity 0.45s ease, z-index 0s linear;
  z-index: 10;
}
.mini-cart-backdrop.active .mini-cart {
  transform: none;
}
.mini-cart-backdrop .mini-cart {
  background: #f4f4f4;
  height: 100%;
  max-width: 400px;
  padding: 60px 15px 45px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 100%;
}
.mini-cart-backdrop .mini-cart__loader {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.35s;
  visibility: hidden;
  width: 100%;
  z-index: 4;
}
.mini-cart-backdrop .mini-cart__loader.active {
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s linear;
  visibility: visible;
}
.mini-cart-backdrop .mini-cart__loader .spinner {
  align-items: center;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  border-color: var(--primary);
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-top: 2px solid transparent;
  color: var(--primary);
  content: "\f1ce";
  display: flex;
  font: var(--fa-font-solid);
  font-size: 1.5em;
  font-weight: 900;
  height: 50px;
  justify-content: center;
  opacity: 1;
  transform-origin: center;
  transition: all 0.25s ease;
  visibility: visible;
  width: 50px;
  will-change: transform;
  z-index: 1;
}
.mini-cart-backdrop .mini-cart__loader p {
  font-weight: bold;
}
.mini-cart-backdrop .mini-cart__content {
  height: 100%;
}
.mini-cart-backdrop .mini-cart__item {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  padding: 10px 5px;
  position: relative;
}
.mini-cart-backdrop .mini-cart__item img {
  height: auto;
  max-width: 75px;
}
.mini-cart-backdrop .mini-cart__item h4 {
  font-weight: bold;
  margin-left: 10px;
}
.mini-cart-backdrop .mini-cart__item .remove_from_cart_button {
  align-items: center;
  background: #999;
  border-radius: 100%;
  color: #fff;
  display: flex;
  font-size: 1.25em;
  height: 25px;
  justify-content: center;
  left: -5px;
  line-height: 20px;
  position: absolute;
  top: 0px;
  width: 25px;
}
.mini-cart-backdrop .mini-cart__item-quantity {
  font-size: 0.75em;
  margin-left: auto;
}
.mini-cart-backdrop .mini-cart__item-quantity .amount {
  color: var(--primary);
  font-weight: bold;
}
.mini-cart-backdrop .mini-cart__total {
  align-items: center;
  background: white;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  margin: 15px -15px 0;
  padding: 15px;
  width: calc(100% + 30px);
}
.mini-cart-backdrop .mini-cart__buttons {
  margin: 30px;
  text-align: center;
}
.mini-cart-backdrop .mini-cart__buttons .button:not(.button--alt) {
  margin-bottom: 15px;
  width: 100%;
}
.mini-cart-backdrop .mini-cart__empty-cart {
  align-items: center;
  display: flex;
  color: #171717;
  flex-direction: column;
  font-weight: bold;
  height: 100%;
  justify-content: center;
}
.mini-cart-backdrop .mini-cart__empty-cart img {
  max-width: 75px;
}
.mini-cart-backdrop .mini-cart__empty-message {
  margin-top: 10px;
}
.mini-cart-backdrop #mini-cart-close {
  background-color: white;
  border-top: 1px solid #ccc;
  bottom: 0;
  cursor: pointer;
  font-family: var(--font-default);
  font-weight: bold;
  font-size: 1.4rem;
  left: 0;
  letter-spacing: 0.0095em;
  padding: 8px;
  position: absolute;
  text-align: center;
  transition: 0.3s ease;
  width: 100%;
}
.mini-cart-backdrop #mini-cart-close:hover {
  color: var(--primary);
}
.mini-cart-backdrop .widget_shopping_cart_content {
  height: 100%;
}

@media only screen and (min-width: 768px) {
  .mini-cart-backdrop #mini-cart-close {
    background-color: transparent;
    border: none;
    bottom: auto;
    font-size: 1rem;
    left: 15px;
    top: 15px;
    width: auto;
  }
}

/*# sourceMappingURL=cart.css.map*/