.w.active-animate {
  width: 0;
}
.h.active-animate {
  height: 0;
}
.letter-space:not(.active) .ani1 {
  letter-spacing: 0.5em;
}
.active .w.active-animate {
  width: 100%;
}
.active .h.active-animate {
  height: 100%;
}
.active [class*=pad].active-animate {
  padding: 0 !important;
}
.active [class*=marg].active-animate {
  margin: 0 !important;
}
.active [class*=opacity].active-animate {
  -webkit-opacity: 1;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}
.active.letter-space .ani1 {
  letter-spacing: initial;
}
.arrow-wrapper {
  padding-left: 40px;
  position: relative;
}
.arrow-wrapper:before,
.arrow-wrapper:after,
.arrow-wrapper .arrow-line {
  position: absolute;
  left: 0;
  top: 0;
}
.arrow-wrapper:before,
.arrow-wrapper:after {
  content: "";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  top: calc(50% - 20px);
}
.arrow-wrapper:after {
  border-left: 20px solid #fff;
  left: -1px;
  z-index: 1;
}
.arrow-wrapper:before {
  border-left: 20px solid rgba(42, 43, 44, 0.1);
}
.arrow-wrapper .arrow-line {
  bottom: 0;
  border-left: 1px solid rgba(42, 43, 44, 0.1);
}
@media (max-width: 899px) {
  .arrow-wrapper.arrow-wrapper-bottom-sm .arrow-line {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    border-top: 1px solid rgba(42, 43, 44, 0.1);
  }
  .arrow-wrapper.arrow-wrapper-bottom-sm:before,
  .arrow-wrapper.arrow-wrapper-bottom-sm:after {
    content: "";
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: 0;
    left: calc(50% - 20px);
  }
  .arrow-wrapper.arrow-wrapper-bottom-sm:after {
    border-top: 20px solid #fff;
    top: -1px;
  }
  .arrow-wrapper.arrow-wrapper-bottom-sm:before {
    border-top: 20px solid rgba(42, 43, 44, 0.1);
  }
}