.slider {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;

  }
  
  .slide {
    width:90%;
    position: absolute;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  @media(max-width:768px){
  .slide{width:100%;}
  .home .hero .law .bannerPhoto img{margin-right: 6rem;margin-top: 7rem;}
  }
  
  .slide.active {
    opacity: 1;
  }
  
  .slide.pasive  {
      opacity: 0;
      display: none
  }
  
  .slide.previous {
   /* position: absolute;*/
    opacity: 0;
  }
  
  .slide.next {
    /*position: absolute;*/
    opacity: 0;
  }
  
  .slide.previous.slideOutLeft {
   /* position: absolute;*/
    opacity: 0;
  }
  
  .slide.next.slideOutRight {
    /*position: absolute;*/
    opacity: 0;
  }
  
  .slide.previous.slideInRight {
    /*position: absolute;*/
    opacity: 1;
  }
  
  .slide.next.slideInLeft {
   /* position: absolute;*/
    opacity: 1;
  }
  
  .text {
    width: 75%;
    padding: 20px;
  }
  
  .image {
    width: 25%;
    text-align: center;
  }
  
  .prev-slide,
  .next-slide {
    color: #000;
    cursor: pointer;
  }
  
  .prev-slide:hover,
  .next-slide:hover {
    color: #555;
  }
  
  i.fa-chevron-left,
  i.fa-chevron-right {
    font-size: 24px;
  }

  .box-slider {
    display: flex;
    justify-content: space-between;
    width: 100px;
    margin-bottom: 0.3rem;
    z-index: 99999;
}

.box-slider .box {
    width: 18px;
    height: 7px;
    background-color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 5px;
    z-index: 99999;
}

.box-slider .box.active {
    background-color: blue;
}