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


.box.slidebox {
}


.slide-container {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  -webkit-transform: translatex(-50%) translateY(-50%);
      -ms-transform: translatex(-50%) translateY(-50%);
          transform: translatex(-50%) translateY(-50%);

  }


.slide {
  text-align: center;
  color: #dbdbdb; color: var(--nav-title-color);
  display: inline-block;
  position: relative;
  padding: 8px 0;
  text-decoration: none;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 3px;
  margin: auto;


}

.slide:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  -webkit-transition: width 0s ease, border-bottom .5s ease;
  -o-transition: width 0s ease, border-bottom .5s ease;
  transition: width 0s ease, border-bottom .5s ease;
}

.slide:hover:before {
  width: 100%;
  border-bottom: 1px solid #dbdbdb; border-bottom: 1px solid var(--nav-title-color);
  -webkit-transition: width .5s ease;
  -o-transition: width .5s ease;
  transition: width .5s ease;
}

.slide:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    border-bottom: 1px solid #dbdbdb; border-bottom: 1px solid var(--nav-title-color);
    -webkit-transition: width .5s ease;
    -o-transition: width .5s ease;
    transition: width .5s ease;
}
.slide:hover:after {
    width: 100%;
    border-bottom: 1px solid transparent;
    -webkit-transition: all 0s ease;
    -o-transition: all 0s ease;
    transition: all 0s ease;
}