@charset "UTF-8";
/* CSS Document */

.box.lassobox {
}

/*** Button Code ****/
.lasso {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  width: 140px;
  height: 52px;
}

.lasso-text {
  position: absolute;
  left: 0;
  bottom: 10px;
  font-size: 28px;
  letter-spacing: 3px;
  line-height: 1.1;
  text-align: left;
  color: #4f575c; color: var(--nav-title-color);
}

.lasso-border {
  height: 2px;
  background: #4f575c; background: var(--nav-title-color);
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  -webkit-transition: left 0.5s;
  -webkit-transition: left 0.5s, background .1s;
  transition: left 0.5s, background .1s;
}

.lasso-wrap {
  float: right;
  width: 58px;
  position: relative;
  height: 58px;
  margin-right: -29px;
  transform: translateY(-1px);
}

.lasso-triangle {
  position: absolute;
  left: 0;
  right: -2px;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #4f575c; border-color: transparent transparent transparent var(--nav-title-color);
  z-index: 999;
}

.lasso-wrap svg {
  z-index: 10;
}

.lasso-wrap svg circle {
  fill: none;
  stroke: #4f575c; stroke: var(--nav-title-color);
  stroke-width: .5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: -39;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.lasso:hover .lasso-border {
  left: 100%;
  right: 0px;
  background: #4f575c; background: var(--nav-title-color);
}

.lasso:hover .lasso-wrap svg circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
  stroke: #4f575c; stroke: var(--nav-title-color);
}