#container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slides {
  position: relative;
  width: 100%;
  height: 1000px;
}
#slides .slide {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
#slides .slide .title {
  position: absolute;
  top: calc(50% - 25%);
  left: 0px;
  z-index: 2;
  padding-top: 5px;
  overflow: hidden;
}
#slides .slide .title .title-text {
  display: block;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .title .title-text img { max-width:100%;}
#slides .slide .slide-partial {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-partial img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-left {
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
#slides .slide .slide-left img {
  top: 0;
  right: 0;
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
#slides .slide .slide-right {
  top: 0;
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
#slides .slide .slide-right img {
  top: 0;
  left: 0;
  -o-object-position: 0% 50%;
     object-position: 0% 50%;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#slides .slide.active .title .title-text {
  -webkit-transform: translate(0);
          transform: translate(0);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
#slides .slide.active .slide-partial, #slides .slide.active .slide-partial img {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
#slides .slide .title.area1 {}
#slides .slide .title.area2 { top:120px;}
#slides .slide .title.area3 { top:auto; right:0px; bottom:0px; left:auto; }

@media only screen and (max-width: 1400px) {
#slides {height:768px;}
}
@media only screen and (max-width: 1200px) {
#slides .slide .title .title-text img { max-width:75%;}
#slides .slide .title.area1 {}
#slides .slide .title.area2 { top:100px;}
#slides .slide .title.area3 { right:-150px;}
}
@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 768px) {
#slides {height:600px;}
#slides .slide .title .title-text img { max-width:60%;}
#slides .slide .title.area1 {}
#slides .slide .title.area2 { top:0px;}
#slides .slide .title.area3 { right:-250px;}
}
@media only screen and (max-width: 640px) {
#slides {height:500px;}
}
@media only screen and (max-width: 480px) {
#slides .slide .title .title-text img { max-width:90%;}
#slides .slide .title.area1 { }
#slides .slide .title.area2 { top:25%;}
#slides .slide .title.area3 { top:30%; left:20%; right:auto;}
}
@media only screen and (max-width: 400px) {
#slides {height:360px;}
}