.img-slider{
  position: absolute;
  width: 100%;
  height: auto;
  background: rgba(0,0,0,0.5);
}
.img-slider .slide{
  position: absolute;
  width: 100%;
  clip-path: circle(0% at 0 50%);
}

.img-slider .slide.active{
  clip-path: circle(150% at 0 50%);
  transition: 2s;
  transition-property: clip-path;
}

@media (max-width: 820px){
  .img-slider{
    width: 100%;
    height: 500px!important;
  }
  .slide-container{
    height: 500px;
  }
}

@media (max-width: 750px){
  .img-slider{
    width: 100%;
    height: 620px;
  }
  .slide-container{
    height: 620px;
  }
}

@media (max-width: 620px){
  .img-slider{
    width: 100%;
    height: 530px;
  }
  .slide-container{
    height: 530px;
  }
}

@media (max-width: 550px){
  .img-slider{
    width: 100%;
    height: 400px;
  }
  .img-slider div{
    width: 100%;
    height: 400px;
  }
  .slide-container{
    height: 400px;
  }
  .slider-text{
    height: 400px !important;
  }
  .slider-text h1{
    font-size: 20px!important;
  }
  .slider-text p a{
    padding: 18px!important;
    font-size: 12px!important;
  }

}

@media (max-width: 420px){
  .img-slider{
    width: 100%;
    height: auto;
  }
  .slide-container{
    height: 200px;
  }
  .slider-text{
    height: 200px !important;
  }
  .slider-text h1{
    font-size: 14px!important;
  }
  .slider-text p a{
    padding: 10px!important;
    font-size: 8px!important;
  }
}

@media (max-width: 200px){
  .img-slider{
    width: 100%;
    height: auto;
  }
  .slide-container{
    height: 100px;
  }
}