/* Link Animations */

.link {
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
    /* show by default */
}

.link--metis {
}

.link--metis::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.link--metis:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.link--elara {
    font-size: 1.375rem;
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}

.link--elara::before {
    transform-origin: 50% 100%;
    transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}

li:hover > .link--elara::before,
li.current-menu-parent > .link--elara::before,
.link--elara:hover::before {
    transform: translate3d(0, 0px, 0) scale3d(1, 5, 1);
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}

li:hover > .link--elara,
li.current-menu-parent > .link--elara,
.link--elara:hover {
    transform: translate3d(0, -2px, 0);
}

/* Swiper */
html, body {
  position: relative;
  height: 100%;
}
.swiper{
  margin: 0 auto;
  height: 100%;
  padding: 0 70px;
  overflow: hidden;
}
.slider-wrap {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: red;
}
.swiper-container {
  width: 100%;
  height: 100%;
  padding-bottom:10px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #f00;
}
.swiper-slide {
  opacity: .25;
}
.swiper-container {
  overflow: visible !important;
}
.swiper-slide-visible {
  opacity: 1;
}