#container {
  width: 100%;
  height: 700px;
  overflow-x: hidden;
}

#slides {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

#slides .slide {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

#slides .slide img {
  opacity: 90%;
  overflow-x: hidden;
}

#slides .slide .title {
  position: absolute;
  top: calc(70% - 0.5em);
  left: 15px;
  z-index: 2;
  padding-top: 5px;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 3em;
  color: white;
  overflow: hidden;
  overflow-x: hidden;
}

#slides .slide .title .title-text {
  display: block;
  transform: translatey(5em);
  transition: transform 1s ease-in-out;
  overflow-x: hidden;
}

#slides .slide .slide-partial {
      position: absolute;
      width: 50%;
      height: 100%;
      overflow: hidden;
      transition: transform 1s ease-in-out;
overflow-x: hidden;}
      #slides .slide .slide-partial img {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1s ease-in-out; }
    #slides .slide .slide-left {
      top: 0;
      left: 0;
      transform: translateX(-100%); }
      #slides .slide .slide-left img {
        top: 0;
        right: 0;
        object-position: 100% 50%;
        transform: translateX(50%); }
    #slides .slide .slide-right {
      top: 0;
      right: 0;
      transform: translateX(100%);
      transition-delay: 0.2s; }
      #slides .slide .slide-right img {
        top: 0;
        left: 0;
        object-position: 0 50%;
        transition-delay: 0.2s;
        transform: translateX(-50%); }
    #slides .slide.active .title .title-text {
      transform: translate(0);
      transition-delay: 0.3s; }
    #slides .slide.active .slide-partial, #slides .slide.active .slide-partial img {
      transform: translateX(0); }

#slide-select {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 1.5em;
  font-weight: lighter;
  color: white;
overflow-x: hidden;}
  #slide-select li {
    position: relative;
    cursor: pointer;
    margin: 0 5px; }
    #slide-select li.prev:hover {
      transform: translateX(-2px); }
    #slide-select li.next:hover {
      transform: translateX(2px); }
  #slide-select .selector {
    height: 14px;
    width: 14px;
    border: 2px solid white;
    background-color: transparent;
    transition: background-color 0.5s ease-in-out; }
    #slide-select .selector.current {
      background-color: white; }

  @media screen and (min-width: 1536px){
    #slides .slide .title {
      left: 60px;
      font-size: 7em;
    }
  }

@media screen and (min-width: 1280px){
    #slides .slide .title {
      left: 60px;
      font-size: 7em;
    }
  }

  @media screen and (min-width: 1024px){
    #slides .slide .title {
      left: 50px;
      font-size: 4em;
    }
  }

  @media screen and (min-width: 768px){
    #slides .slide .title {
      left: 40px;
      font-size: 3em;
    }
  }