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


.box.bass {
  position: relative;
  }

.bass-button {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-22px);
      -ms-transform: translateY(-50%) translateX(-22px);
          transform: translateY(-50%) translateX(-22px);
  border: 2px solid #fff; border: 2px solid var(--nav-title-color);
  -webkit-transition: .52s cubic-bezier(.7, .3, 0, 1);
  -o-transition: .52s cubic-bezier(.7, .3, 0, 1);
  transition: .52s cubic-bezier(.7, .3, 0, 1);
  height: 60px;
  width: 140px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 19px 30px;
  display: inline-block;
  text-decoration: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.bass-button-text {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff; color: var(--nav-title-color);
}

.bass-button-box {
  position: absolute;
  height: 56px;
  width: 56px;
  top: -2px;
  left: 100%;
  border-right: 2px solid #fff; border-right: 2px solid var(--nav-title-color);
  border-top: 2px solid #fff; border-top: 2px solid var(--nav-title-color);
  border-bottom: 2px solid #fff; border-bottom: 2px solid var(--nav-title-color);
  overflow: hidden;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.bass-button-box:after {
  position: absolute;
  content: '';
  height: 0;
  background: #fff; background: var(--nav-title-color);
  width: 100%;
  left: 0;
  bottom: 0;
  -webkit-transition: .42s cubic-bezier(.7, .3, 0, 1);
  -o-transition: .42s cubic-bezier(.7, .3, 0, 1);
  transition: .42s cubic-bezier(.7, .3, 0, 1);
}
.bass-button:hover .bass-button-box:after {
  height: 56px;
}

.bass-arrow {
  position: relative;
  height: 58px;
}

.arrow-top {
  position: absolute;
    top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 16px;
  height: 16px;
   -webkit-transition: .42s cubic-bezier(.7, .3, 0, 1);
  -o-transition: .42s cubic-bezier(.7, .3, 0, 1);
  transition: .42s cubic-bezier(.7, .3, 0, 1);
}
.arrow-top svg .bass-arrow-top-fill {
  fill: #fff; fill: var(--nav-title-color);
}


.arrow-bottom {
  position: absolute;
    top: 50%;
  -webkit-transform: translateY(-250%);
      -ms-transform: translateY(-250%);
          transform: translateY(-250%);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 16px;
  height: 16px;
   -webkit-transition: .42s cubic-bezier(.7, .3, 0, 1);
  -o-transition: .42s cubic-bezier(.7, .3, 0, 1);
  transition: .42s cubic-bezier(.7, .3, 0, 1);
  z-index: 100;
}

.arrow-bottom svg .bass-arrow-bottom-fill {
  fill: #000; fill: var(--bg-color);
}


.bass-button:hover .bass-arrow .arrow-top {
    -webkit-transform: translateY(250%);
        -ms-transform: translateY(250%);
            transform: translateY(250%);
}

.bass-button:hover .bass-arrow  .arrow-bottom{
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}