.barba-leave-active,
.barba-enter-active {
  -webkit-transition: all 650ms ease;
  transition: all 650ms ease;
}

.barba-leave {
  opacity: 1;
  -webkit-filter: blur(0px);
          filter: blur(0px);
}

.barba-enter {
  opacity: 1;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

.barba-leave-to {
  opacity: 1;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

.barba-enter-to {
  opacity: 1;
  -webkit-filter: blur(0px);
          filter: blur(0px);
}

.curtain {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1000;
  background-size: cover;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 10000;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.curtain.ready {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
}
.curtain.loading {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.curtain.pattern1 {
  background: url("../../img/upper_bar_yellow.png") repeat;
}
.curtain.pattern1.ready {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translate(0px, -120%);
          transform: translate(0px, -120%);
}
.curtain.pattern1.loading {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}
.curtain.pattern1.loaded {
  -webkit-transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, opacity 1s;
  transition: transform 0.5s ease-in-out, opacity 1s, -webkit-transform 0.5s ease-in-out;
  opacity: 0;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}
.curtain.pattern2 {
  background: url("../../img/lower_bar_yellow.png") repeat;
}
.curtain.pattern2.ready {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translate(0px, 120%);
          transform: translate(0px, 120%);
}
.curtain.pattern2.loading {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}
.curtain.pattern2.loaded {
  -webkit-transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, opacity 1s;
  transition: transform 0.5s ease-in-out, opacity 1s, -webkit-transform 0.5s ease-in-out;
  opacity: 0;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}
.curtain.pattern-normal1 {
  background: url("../../img/upper_bar.png") repeat;
}
.curtain.pattern-normal1.ready {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translate(0px, -120%);
          transform: translate(0px, -120%);
}
.curtain.pattern-normal1.loading {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}
.curtain.pattern-normal1.loaded {
  -webkit-transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, opacity 1s;
  transition: transform 0.5s ease-in-out, opacity 1s, -webkit-transform 0.5s ease-in-out;
  opacity: 0;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}
.curtain.pattern-normal2 {
  background: url("../../img/lower_bar.png") repeat;
}
.curtain.pattern-normal2.ready {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translate(0px, 120%);
          transform: translate(0px, 120%);
}
.curtain.pattern-normal2.loading {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}
.curtain.pattern-normal2.loaded {
  -webkit-transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: opacity 1s, -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, opacity 1s;
  transition: transform 0.5s ease-in-out, opacity 1s, -webkit-transform 0.5s ease-in-out;
  opacity: 0;
  -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0);
}

@media only screen and (max-width: 960px) {
  .curtain.pattern1.ready {
    -webkit-transform: translate(0px, -120%);
            transform: translate(0px, -120%);
  }
  .curtain.pattern1.loading {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
  .curtain.pattern1.loaded {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
  .curtain.pattern2.ready {
    -webkit-transform: translate(0px, 120%);
            transform: translate(0px, 120%);
  }
  .curtain.pattern2.loading {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
  .curtain.pattern2.loaded {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
}