@charset "UTF-8";
/* CSS Document */
.box.perspective2-box {
  position: relative;
}

.perspective2-wrapper {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 60px;
  width: 190px;
}

.perspective2-button {
  background: #4f575c; background: var(--nav-title-color);
  color: #fff;
  border-radius: 6px; 
  height: 100%;
  width: 100%;
  -webkit-transition: box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transition: -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -o-transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), box-shadow .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  height: 60px;
  width: 190px;
}

.perspective2-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #dbdbdb; color: var(--bg-color);
  text-align: center;
  z-index: 100;
  font-size: 14px;
  letter-spacing: 1px;
}

.perspective2-arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(74px);
      -ms-transform: translateY(-50%) translateX(74px);
          transform: translateY(-50%) translateX(74px);
  left: 0;
  right: 0;
  margin: 0 auto;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent #dbdbdb; border-color: transparent transparent transparent var(--bg-color);
  -webkit-transition: border-color .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: border-color .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -o-transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), border-color .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), border-color .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition: transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), border-color .4s cubic-bezier(0.215, 0.610, 0.355, 1.000), -webkit-transform .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  z-index: 200;
}

.perspective2-box:hover .perspective2-button {
  -webkit-transform: perspective( 180px) rotateY( 12deg);
          transform: perspective( 180px) rotateY( 12deg);
}

.perspective2-box:hover .perspective2-arrow {
  -webkit-  transform: translateY(-50%) translateX(100px);
            -webkit-transform: translateY(-50%) translateX(100px);
                -ms-transform: translateY(-50%) translateX(100px);
                    transform: translateY(-50%) translateX(100px);
            border-color: transparent transparent transparent #4f575c; border-color: transparent transparent transparent var(--nav-title-color);
}