/* imgS1 */
.containerS1 {
  margin: auto;
  position: relative;
  width: 302px;
  height: 540 px;
  border: 2px solid white;
  bottom: 50px;
  }

  .imgS1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto;
    background-repeat: no-repeat;
  }
  .background-imgS1 {
    background-image: url('../images/projectA1.jpg')
  }
  .foreground-imgS1 {
    background-image: url('../images/projectB1.jpg');
    width: 50%;
  }
 
  .sliderS1 {
      margin: auto;
      position: relative;
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 100%;
      background:rgba(242,242,242,0.001);
      outline: none;
      margin: 0;
      transition: all .2s;
      display: flex;
      justify-content: center;
      align-items: center;
    
      }

      .sliderS1::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 6px;
        height: 520px;
        background: #20c997;
        cursor: pointer;
    
    }
    .slider-buttonS1 {
      pointer-events: none;
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #20c997;
      left: calc(50% - 18px);
      top: calc(50% - 18px);
      display: flex;
      justify-content: center;
      align-items: center;}
      
      .slider-buttonS1:after {
        content: '';
        padding: 3px;
        display: inline-block;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(-45deg);
      }
      .slider-buttonS1:before {
        content: '';
        padding: 3px;
        display: inline-block;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(135deg);
      }




      /* imgS2 */
.containerS2 {
  margin: auto;
  position: relative;
  width: 302px;
  height: 445 px;
  border: 2px solid white;
  bottom: 50px;
  }

  .imgS2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto;
    background-repeat: no-repeat;
  }
  .background-imgS2 {
    background-image: url('../images/projectA2.jpg')
  }
  .foreground-imgS2 {
    background-image: url('../images/projectB2.jpg');
    width: 50%;
  }
 
  .sliderS2 {
      margin: auto;
      position: relative;
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 100%;
      background:rgba(242,242,242,0.001);
      outline: none;
      margin: 0;
      transition: all .2s;
      display: flex;
      justify-content: center;
      align-items: center;
    
      }

      .sliderS2::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 6px;
        height: 445px ;
        background: #20c997;
        cursor: pointer;
    
    }
    .slider-buttonS2 {
      pointer-events: none;
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #20c997;
      left: calc(50% - 18px);
      top: calc(50% - 18px);
      display: flex;
      justify-content: center;
      align-items: center;}
      
      .slider-buttonS2:after {
        content: '';
        padding: 3px;
        display: inline-block;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(-45deg);
      }
      .slider-buttonS2:before {
        content: '';
        padding: 3px;
        display: inline-block;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(135deg);
      }


      /* imgS3 */
.containerS3 {
  margin: auto;
  position: relative;
  width: 512px;
  height: 384px;
  border: 2px solid white;
  bottom: 50px;
  }

  .imgS3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto;
    background-repeat: no-repeat;
  }
  .background-imgS3 {
    background-image: url('../images/projectA3.jpg')
  }
  .foreground-imgS3 {
    background-image: url('../images/projectB3.jpg');
    width: 50%;
  }
 
  .sliderS3 {
      margin: auto;
      position: relative;
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 100%;
      background:rgba(242,242,242,0.001);
      outline: none;
      margin: 0;
      transition: all .2s;
      display: flex;
      justify-content: center;
      align-items: center;
    
      }

      .sliderS3::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 6px;
        height: 384px;
        background: #20c997;
        cursor: pointer;
    
    }
    .slider-buttonS3 {
      pointer-events: none;
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #20c997;
      left: calc(50% - 18px);
      top: calc(50% - 18px);
      display: flex;
      justify-content: center;
      align-items: center;}
      
      .slider-buttonS3:after {
        content: '';
        padding: 3px;
        display: inline-block;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(-45deg);
      }
      .slider-buttonS3:before {
        content: '';
        padding: 3px;
        display: inline-block;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(135deg);
      }