.breadcrumb {
  margin-bottom: 20px;
	margin-top: 30px;
}
.breadcrumb ul, .breadcrumb ol {
  display: flex;
}

.breadcrumb li.home {
  padding: 0px 5px 0px 5px;
  border-left: solid 1px #9a9a9a;
  border-radius: 3px 0px 0px 3px;
}
.breadcrumb li.home .fa {
  font-size: 20px;
  color: #9a9a9a;
}
.breadcrumb li.home:hover {
  border-left: solid 1px #9a9a9a;
}
.breadcrumb li.home:before {
  display: none;
}
.breadcrumb li.home:after {
  content: "";
}
.breadcrumb li.home a:before {
  background: none !important;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  font-size: 12px;
  margin-right: 10px;
  padding: 0 10px 0px 25px;
  border-top: solid 1px #9a9a9a;
  border-bottom: solid 1px #9a9a9a;
  position: relative;
  cursor: pointer;
}

.breadcrumb li:before {
  content: "";
  background: url(../../img/breadcrumb-arrow.png) no-repeat left top;
  height: 25px;
  width: 13px;
  position: absolute;
  left: 0;
  top: -1.5px;
}
.breadcrumb li:after {
  content: "...";
  color: rgba(149, 149, 149, 0.6);
  display: flex;
  align-items: center;
  text-align: left;
  background: url(../../img/breadcrumb-arrow.png) no-repeat right top;
  height: 25px;
  width: 40px;
  position: absolute;
  right: -13px;
  top: -1.5px;
  z-index: 0;
}
.breadcrumb li:not(.home) a {
  color: #9a9a9a;
}
.breadcrumb li.active, .breadcrumb li:hover, .breadcrumb li:hover a, .breadcrumb li.ativando a {
  color: #199e8f;
	font-weight: bold;
}
.breadcrumb li.active, .breadcrumb li:hover, .breadcrumb li.ativando {
  color: #9a9a9a;
  border-top: solid 1px #9a9a9a;
  border-bottom: solid 1px #9a9a9a;
}
.breadcrumb li.active:before, .breadcrumb li:hover:before, .breadcrumb li.ativando:before {
  content: '';
  background: url(../../img/breadcrumb-arrow.png) no-repeat left bottom;
  height: 25px;
  width: 13px;
  position: absolute;
  left: 0;
  top: -1.5px;
}
.breadcrumb li.active:after, .breadcrumb li:hover:after, .breadcrumb li.ativando:after {
  content: '...';
  color: rgba(255, 160, 0, 0.4);
  display: flex;
  align-items: center;
  text-align: left;
  background: url(../../img/breadcrumb-arrow.png) no-repeat right bottom;
  height: 25px;
  width: 40px;
  position: absolute;
  right: -13px;
  top: -1.5px;
}
.breadcrumb li p, .breadcrumb li:not(.home) a {
  position: relative;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width ease-out 0.2s;
	text-decoration: none;
}
.breadcrumb li:hover p, .breadcrumb li:hover a, .breadcrumb li.ativando p, .breadcrumb li.ativando a {
  max-width: 600px;
  transition: max-width ease-out 2s;
}
.breadcrumb li:hover p:before, .breadcrumb li:hover a:before, .breadcrumb li.ativando p:before, .breadcrumb li.ativando a:before {
  max-width: 0px;
  transition: max-width 0.2s linear;
}
.breadcrumb li p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: -10px;
  z-index: 25;
  display: block;
}
.breadcrumb li p:before, .breadcrumb li:not(.home) a:not:before {
  content: '';
  position: absolute;
  display: block;
  height: 100%;
  width: 90%;
  max-width: 30px;
  z-index: 2;
  top: 1px;
  right: 0;
  transition: max-width 0.2s linear;
}
.breadcrumb li:hover:after, .breadcrumb li.active:hover:after, .breadcrumb li.ativando:after, .breadcrumb li.active.ativando:after {
  content: "";
}

/*  Responsivo */
@media (max-width: 768px) {
  .breadcrumb ul, .breadcrumb ol {
    flex-wrap: wrap;
    max-height: 30px;
    overflow: hidden;
    transition: all linear .7s;
  }

  .breadcrumb li {
    border-radius: 3px;
    border-right: solid 1px #9a9a9a;
    border-left: solid 1px #9a9a9a;
    margin: 5px 0;
    padding: 0 10px;
    width: 100%;
  }

  .breadcrumb li:before {
    display: none;
  }

  .breadcrumb li:after {
    display: none;
  }

  .breadcrumb li.active:after, .breadcrumb li:hover:after, .breadcrumb li.ativando:after {
    display: none;
  }

  .breadcrumb.ativo ul, .breadcrumb.ativo ol {
    max-height: 500px;
    overflow: auto;
    transition: all linear .7s;
  }
}