@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

  * {
      box-sizing: border-box;
      font-family: 'Montserrat', sans-serif;
  }

  body {
      text-align: center;
      width: 100%;
      margin: auto;
      height: 100vh;
      background-color: #252835;
  }

  /* Slideshow container */
  .slideshow-container {
      max-width: 100%;
      position: relative;
      display: inline-flex;
  }

  .sliderbox {
      margin-top: calc(100% - 258px);
      background-color: #2E353F;
      background-image: url(/img/background.svg);
      background-repeat: no-repeat;
      background-position: 100% 0%;
      width: 508px;
      height: 258px;
  }

  .imagecustomer {
      text-align: left;
      padding-left: 25px;
      padding-top: 35px;
      position: relative;
  }

  span.namecustomer {
      font-size: 24px;
      color: #fff;
      position: absolute;
      bottom: 15px;
      left: 90px;
  }

  .nuweslide {
      display: none;
  }

  .prev,
  .next {
      cursor: pointer;
      position: absolute;
      top: 72%;
      width: auto;
      border: 1px solid #39424E;
      height: 36px;
      margin: 0px 0px 0px 0px;
      padding: 5px 10px 0px 10px;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      color: #569B51;
      border-radius: 3px 0 0 3px;

  }

  .next {
      right: -70px;
  }

  a.prev {
      left: -70px;

  }

  .prev:hover,
  .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
  }

  .text {
      color: #f2f2f2;
      font-size: 18px;
      padding: 0px 26px 40px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: justify;
      font-weight: 500;
  }


  .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
  }

  .active,
  .dot:hover {
      background-color: #717171;
  }

  .fade {
      animation-name: fade;
      animation-duration: 1.5s;
  }

  /* animation */
  @keyframes fade {
      from {
          opacity: .4
      }

      to {
          opacity: 1
      }
  }
  
/* responsive */
  @media screen and (max-width: 660px) {
      .sliderbox {
          margin-top: 30vh;
          width: 100vw;
          height: 40vh;
      }

      .next {
          right: 10px;
          top: 92%;
      }

      a.prev {
          left: calc(100% - 80px);
          top: 92%;
      }
  }