.hidden-mobile {
  display: none;
}

@media screen and (min-width: 992px) {
  .hidden-mobile {
    display: flex;
  }

  .spi-slide-4 .hidden-mobile {
    display: block;
  }

  .hidden-desktop {
    display: none;
  }
}

.spi {
      background: "#fff";
    }

    .spi .btn {
      min-width: auto;
    }

    .hippo-user-content .spi img {
        width: 100%;
    }

    .spi-container {
      background-color: white;
      border: 1px solid #ccc;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
      position: relative;
      overflow: hidden;
    }

    .spi-cols {
      display: flex;
      flex-direction: column-reverse;
    }

    .spi-left-col {
      background-color: #f7f7f7;
      border-top: 1px solid #ccc;
      padding: 30px;
    }

    .spi-slide {
      display: block;
    }

    .spi-slide.hidden {
      display: none;
    }

    /* Slide 1 */
    .slide-1-image {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      /* background: url(https://www.athene.com/binaries/content/gallery/portal/images/products/pe-strategy-preset/slide-1-image.png) center right no-repeat; */
      /* background-size: cover; */
      margin: 10px;
      width: calc(100% - 20px);
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

      .spi-slide-1 video {
        width: 100%;
        height: auto;
      }

      .spi-slide-1 .spi-right-col { 
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }


    /* Slide 2 */
    .spi-slide-2 .slide-2-image {
      height: auto;
      width: 100%;
      max-height: 100%;
    }

    .spi-pie-chart {
      opacity: 0;
      transform: scale(0.5);
      transform-origin: 50% 50%;
      transition: all 1s ease;
    }

    .spi-pie-hover-target {
      transition: all 1s ease;
      cursor: pointer;
    }

    .spi-pie-hover-target.dimmed {
      opacity: 0.4;
    }

    .spi-pie-hover-target.active {
      opacity: 1;
    }

    .spi-slide-2.active-delay .spi-pie-chart {
      opacity: 1;
      transform: scale(1.2);
    }

    .spi-pie-chart-circle {
      transform: scale(0.5);
      transform-origin: 50% 50%;
      transition: all 1s ease;
    }

    .spi-slide-2.active-delay .spi-pie-chart-circle {
      transform: scale(1);
    }

    .spi-slide-2 .spi-pie-chart-text {
      opacity: 0;
      transition: all 1s ease 0.5s;
    }

    .spi-slide-2 .spi-pie-chart-text-1 {
      transition: all 1s ease 0.5s;
    }

    .spi-slide-2 .spi-pie-chart-text-2 {
      transition: all 1s ease 0.75s;
    }

    .spi-slide-2 .spi-pie-chart-text-3 {
      transition: all 1s ease 1s;
    }

    .spi-slide-2 .spi-pie-chart-text-4 {
      transition: all 1s ease 1.25s;
    }

    .spi-slide-2 .spi-pie-chart-text-5 {
      transition: all 1s ease 1.5s;
    }

    .spi-slide-2 .spi-pie-chart-text-6 {
      transition: all 1s ease 1.75s;
    }

    .spi-slide-2.active-delay .spi-pie-chart-text {
      opacity: 1;
    }

    .spi-slide-2 .spi-cols {
      flex-direction: column;
    }

    .spi-slide-2 .spi-right-col {
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .spi-pie-details {
      display: none;
      padding-top: 20px;
      padding-bottom: 20px;
      min-height: 120px;
    }

    .spi-pie-details.active {
      display: block;
    }

    /* Slide 3 */
    .spi-slide-3 .spi-right-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      padding-top: 15px;
    }

    .spi-slide-3 .spi-cols {
      flex-direction: column;
    }

    .spi-conservative {
      background: #10165e;
    }

    .spi-balanced {
      background: #0167ac;
    }

    .spi-growth {
      background: #00ab85;
    }

    .spi-option-block {
      width: calc(100% - 30px);
      color: #fff;
      margin-bottom: 20px;
      padding: 15px;
      cursor: pointer;
      transform: scale(0.97);
      transition: all 0.5s ease;
    }

    .spi-option-block.selected {
      transform: scale(1);
    }

    .spi-option-block.dimmed:not(:hover) {
      opacity: 0.4;
      transform: scale(0.95);
    }

    .spi-option-block p {
      font-size: 14px;
      line-height: 20px;
    }

    /* Slide 4 */

    .spi-slide-4 .spi-right-col {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .spi-slide-4 .spi-cols {
      flex-direction: column;
    }

    .spi-slide-4-graph {
      max-width: 100%;
      padding: 20px;
    }

    .spi-slide-4 .spi-graph-bar {
      transition: opacity 1s ease, transform 1s ease;
      cursor: pointer;
      /* transform: scaleY(0.9); */
      transform-origin: 100% 93%;
      position: relative;
      z-index: 1;
      opacity: 0;
      transform: scaleY(0);
    }

    .spi-slide-4 .spi-graph-bar-2 {
      transition: opacity 1s ease, transform 1.5s ease 0.1s;
    }

    .spi-slide-4 .spi-graph-bar-3 {
      transition: opacity 1s ease, transform 2s ease 0.2s;
    }

    .spi-slide-4.active-delay .spi-graph-bar {
      opacity: 1;
      transform: scaleY(1);
    }

    .spi-slide-4.active-delay .spi-graph-bar.dimmed:not(:hover) {
      opacity: 0.4;
    }

    .spi-slide-4 .spi-graph-bar:hover {
      /* transform: scaleY(0.95); */
      z-index: 2;
      opacity: 1;
    }

    .spi-slide-4 .spi-graph-bar.selected {
      /* transform: scaleY(1); */
      z-index: 3;
    }

    .spi-slide-4 .spi-preset-details.hidden {
      display: none;
    }

    /* Slide 5 */
    .spi-term {
      width: 100%;
    }

    .spi-term.hidden {
      display: none;
    }

    .spi-slide-5 .spi-cols {
      flex-direction: column;
    }

    /* Slide 6 */
    .spi-slide-6 .slide-6-image {
      height: 100%;
      width: auto;
      opacity: 0;
      transform: translateY(30px);
      transition: all 1.5s ease;
    }

    .spi-slide-6 .spi-right-col {
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .spi-slide-6.active-delay .slide-6-image {
      opacity: 1;
      transform: translateY(0);
    }

    @media screen and (min-width: 992px) {
      .spi-container {
        height: 600px;
      }

      .spi-slide {
        height: 100%;
      }

      .spi-cols {
        flex-direction: row;
        height: 100%;
      }

      .spi-left-col {
        border-top: none;
        border-right: 1px solid #ccc;
        height: 100%;
        width: 400px;
        font-size: 16px;
      }

      .spi-right-col {
        flex: 1;
        height: 100%;
      }

      /* Slide 1 */
      .spi-slide-1 .spi-left-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
      }

      .spi-slide-1 video {
        height: 100%;
        width: auto;
      }

      .spi-slide-1 .spi-right-col {
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }



      .slide-1-image {
        height: calc(100% - 20px);
      }

      /* Slide 2 */
      .spi-slide-2 .spi-left-col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .spi-slide-2 .spi-right-col {
        height: 100%;
      }

      .spi-slide-2 .spi-cols {
        flex-direction: row;
      }

      /* Slide 3 */
      .spi-slide-3 .spi-left-col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .spi-slide-3 .spi-right-col {
        flex-direction: row;
      }

      .spi-option-block {
        width: 180px;
        min-height: 320px;
      }

      .spi-pie-details {
        min-height: 225px;
      }

      /* Slide 4 */
      .spi-slide-4 .spi-left-col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .spi-slide-4 .spi-cols {
        flex-direction: row;
      }

      /* Slide 5 */
      .spi-slide-5 .spi-left-col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .spi-slide-5 .spi-cols {
        flex-direction: row;
      }

      /* Slide 6 */
      .spi-slide-6 .spi-left-col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .spi-slide-6 .spi-right-col {
        height: 100%;
      }
    }

    @media(max-width: 735px){
      .spi-slide-1 video {
        height: 100%;
        width: auto;
      }
    }