#xfader {
  display: block;
  position: relative;
  width: 100%;
  height: 60vw;
  overflow: hidden;
}
@media not screen and (max-width: 1600px) {
  #xfader {
    height: 960px;
  }
}
@media screen and (max-width: 540px) {
  #xfader {
    height: 320px;
  }
}

.xfade-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: 60vw;
}
@media not screen and (max-width: 1600px) {
  .xfade-wrapper {
    height: 960px;
  }
}
@media screen and (max-width: 540px) {
  .xfade-wrapper {
    width: 532px;
    height: 320px;
    left: 50%;
    margin-left: -266px;
  }
}

#crossfade {
  display: block;
  position: relative;
  width: 100%;
  height: 60vw;
  overflow: hidden;
  margin: 0 auto;
}
@media not screen and (max-width: 1600px) {
  #crossfade {
    height: 960px;
  }
}
@media screen and (max-width: 540px) {
  #crossfade {
    width: 532px;
    height: 320px;
  }
}
#crossfade img {
  display: block;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  position: absolute;
}

.slide1, .slide2, .slide3, .slide4 {
  animation-duration: 32s;
  -moz-animation-duration: 32s;
  -webkit-animation-duration: 32s;
  animation-iteration-count: infinite;
}

.slide1 {
  animation-name: slide1;
  -moz-animation-name: slide1;
  -webkit-animation-name: slide1;
  animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

.slide2 {
  animation-name: slide2;
  -moz-animation-name: slide2;
  -webkit-animation-name: slide2;
  animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

.slide3 {
  animation-name: slide3;
  -moz-animation-name: slide3;
  -webkit-animation-name: slide3;
  animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

.slide4 {
  animation-name: slide4;
  -moz-animation-name: slide4;
  -webkit-animation-name: slide4;
  animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

@keyframes slide1 {
  0% {
    opacity: 1;
    transform: scale(1.1894);
  }
  25% {
    transform: scale(1);
  }
  75% {
    transform: scale(1);
  }
  92% {
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: scale(1.1894);
  }
}
@keyframes slide2 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  17% {
    opacity: 0;
    transform: scale(1.25);
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes slide3 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  42% {
    opacity: 0;
    transform: scale(1.25);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
    transform: scale(1);
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes slide4 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  67% {
    opacity: 0;
    transform: scale(1.25);
  }
  75% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.slider_wrapper {
  display: block;
  position: absolute;
  top: 28%;
  left: auto;
  right: auto;
  width: 100%;
  height: 30%;
  margin: 0;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 1020px) {
  .slider_wrapper {
    top: 32%;
  }
}
@media screen and (max-width: 812px) {
  .slider_wrapper {
    top: 35%;
  }
}
@media screen and (max-width: 540px) {
  .slider_wrapper {
    top: 125px;
  }
}

.slider_logo {
  display: block;
  margin: 0 auto;
  width: 30%;
  padding: 0;
}
@media screen and (max-width: 812px) {
  .slider_logo {
    width: 27.5%;
  }
}
@media screen and (max-width: 540px) {
  .slider_logo {
    width: 160px;
  }
}

.slider {
  position: relative;
  max-width: 1600px;
  max-height: 960px;
  min-height: 320px;
  margin: 0 auto;
  padding: 0;
}

.slider_layer {
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  max-width: 1600px;
  max-height: 960px;
  min-height: 320px;
  margin: 0 auto;
  padding: 0;
}

/* .link_layer-1 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow :hidden;
  cursor: pointer;
  @include mq-(px812) {
    display: none;
  }
}

.link_layer-1 {
  @include setvp(animation-duration, 32s );
  animation-iteration-count:infinite;
  @include setvp(animation-name, link_layer-1);
  @include setvp(animation-timing-function, linear);
}
@keyframes link_layer-1 {
  0%   { width: 100%; height: 100%; }
  20%  { width: 100%; height: 100%; }
  21%  { width: 0%; height: 0%; }
  94%  { width: 0%; height: 0%; }
  95% { width: 100%; height: 100%; }
  100% { width: 100%; height: 100%; }
}
*/