/* Logo Colors */
/* Generic */
/* NavBar*/
/* BreadCrumb*/
/* Product List */
/* Section */
/* Title */
/* Product Item */
/* Cart */
/* Payment */
/* Import para fazer com que o VS reconheça as varíaveis.Tem que comentar após alterar */
.breadcrumb {
  /*centering*/
  margin-top: 20px;
  padding: 0;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
  counter-reset: flag;
}
.breadcrumb a {
  text-decoration: none;
  outline: none;
  display: block;
  float: left;
  font-size: 18px;
  font-variant: small-caps;
  letter-spacing: 2px;
  line-height: 36px;
  /*need more margin on the left of links to accomodate the numbers*/
  padding: 0 10px 0 60px;
  position: relative;
  width: 180px;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/*hover/active styles*/
.breadcrumb a.active,
.breadcrumb a:hover {
  background: #d3812c;
  background: linear-gradient(#d3812c, #d3812c);
  color: #ffffff;
}
.breadcrumb a.active:after,
.breadcrumb a:hover:after {
  background: #d3812c;
  background: linear-gradient(135deg, #d3812c, #d3812c);
}
.breadcrumb a.active:before,
.breadcrumb a:hover:before {
  background: #ffffff;
  background: linear-gradient(#ffffff, #ffffff);
  color: #d3812c;
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
  content: '';
  position: absolute;
  top: 0;
  right: -17px;
  /*half of square's length*/
  /*same dimension as the line-height of .breadcrumb a */
  width: 36px;
  height: 36px;
  /*as you see the rotated square takes a larger height. which makes it tough to position it properly.
                So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
                length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
                if diagonal required = 1; length = 1/1.414 = 0.707*/
  -moz-transform: scale(0.656) rotate(45deg);
  -ms-transform: scale(0.656) rotate(45deg);
  -o-transform: scale(0.656) rotate(45deg);
  -webkit-transform: scale(0.656) rotate(45deg);
  transform: scale(0.656) rotate(45deg);
  /*we need to prevent the arrows from getting buried under the next link*/
  z-index: 1;
  /*stylish arrow design using box shadow*/
  box-shadow: 2px -2px 0 2px #ffffff, 3px -3px 0 2px rgba(255, 255, 255, 0.1);
  /*
                5px - for rounded arrows and
                50px - to prevent hover glitches on the border created using shadows*/
  border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
  content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
  color: white;
  content: counter(flag);
  counter-increment: flag;
  /*some styles now*/
  border-radius: 100%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin: 5px 0;
  padding-left: 3px;
  position: absolute;
  top: 0;
  left: 30px;
  background: #d3812c;
  background: linear-gradient(#d3812c, #e5b380);
  font-weight: bold;
  font-size: 17px;
}
@media only screen and (min-width: 621px) {
  .breadcrumb a {
    background: #fbf2ea;
    background: linear-gradient(#fbf2ea, #f6e6d5);
    color: #1d1d1b;
  }
  .breadcrumb a:after {
    /*background same as links but the gradient will be rotated to compensate with the transform applied*/
    background: #fbf2ea;
    background: linear-gradient(135deg, #fbf2ea, #f6e6d5);
  }
  .breadcrumb a:first-child:before {
    left: 14px;
  }
  /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
  .breadcrumb a:first-child {
    padding-left: 46px;
    border-radius: 5px 0 0 5px;
    /*to match with the parent's radius*/
  }
  .breadcrumb a:last-child {
    border-radius: 0 5px 5px 0;
    /*this was to prevent glitches on hover*/
    padding-right: 20px;
  }
}
@media only screen and (max-width: 620px) {
  .breadcrumb {
    float: none;
    width: 100%;
    box-shadow: 0 0 15px 1px rgba(29, 29, 27, 0.45);
  }
  .breadcrumb a {
    border-radius: 0;
    width: 100%;
    color: #1d1d1b;
    background-color: #ffffff;
  }
  .breadcrumb a:first-child {
    border-radius: 5px 5px 0 0;
  }
  .breadcrumb a:last-child {
    border-radius: 0 0 5px 5px;
  }
  .breadcrumb a:after {
    display: none;
    /*background same as links but the gradient will be rotated to compensate with the transform applied*/
    background: white;
    background: linear-gradient(135deg, white, white);
  }
}
/*# sourceMappingURL=customBreadCrumbRedeFC.css.map */