.arrowbtns .btn {
  background: none;
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 0.75rem;
  outline: none;
  position: relative;
  transition: all 0.3s;
  border: 0.5px solid #8c7676;
  color: #8C4B38;
  overflow: hidden;
  border-radius: 25px;
  background: -moz-linear-gradient(top, #ffffff 0%, #ffc107 100%) url("../img/arrow-rt.svg") right no-repeat; /* firefox */
  background: url("../img/arrow-rt.svg") right no-repeat, -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #ffc107)); /* webkit */
  background-position-x: 95%;
}
.arrowbtns .btn:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s;
}
.arrowbtns .btn:before {
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  height: 100%;
  font-size: 125%;
  line-height: 3.5;
  color: #8C4B38;
  transition: all 0.3s;
}
.arrowbtns .btn:active {
  border-color: #662E19;
  color: #662E19;
}
.arrowbtns .btn:active:before {
  color: #17954c;
}
.arrowbtns .btn:hover {
  background: #662E19;
  color: #fff;
}
.arrowbtns .arrow-left:before {
  left: 70%;
  opacity: 0;
  top: 0;
}
.arrowbtns .arrow-left:hover:before {
  left: 80%;
  opacity: 1;
}
.arrowbtns .arrow-right:before {
  left: 30%;
  opacity: 0;
  top: 0;
}
.arrowbtns .arrow-right:hover:before {
  left: 10%;
  opacity: 1;
}/*# sourceMappingURL=effect.css.map */