.slidebox-link {
    color: #00a0d5;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  }

  .slide > img {
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  }

  .slidebox {
    position: relative;
    margin-left: auto;
    padding: 20px;
    border-radius: 10px;
  }

  .slidebox.right {
    margin-left: 0;
    right: auto;
    left: 40px;
  }

  .slidebox.white {
    color: #333;
    background-color: rgba(255, 255, 255, .6);
  }

  .slidebox.white h2 {
    color: #000;
  }

  .slidebox h2 {
    color: #fff;
    margin-top: 0px;
  }

  @media (max-width: 991px) {
    .slidebox {
      padding-top: 5px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 5px;
    }
  }

  @media (min-width: 768px) {
    .slidebox {
      top: -60px;
      right: 0;
      width: 350px;
      color: white;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .slidebox h2 {
      font-size: 23px;
    }
  }

  @media (min-width: 992px) {
    .slidebox {
      top: -20px;
      right: 0;
      width: 430px;
      color: #fff;
      background-color: #000;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .slidebox h2 {
      font-size: 23px;
      color: #fff;
    }
  }

  @media (min-width: 1200px) {
    .slidebox {
      top: -100px;
      right: 40px;
      width: 550px;
      color: #fff;
      background-color: #000;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .slidebox h2 {
      font-size: 30px;
      color: #fff;
    }
  }