.testimonial_slider-group {
  .testimonial_slider-row {
    padding-top: calculateRem(100);
    padding-bottom: calculateRem(100);
    display: flex;

    @include breakpoint(mobileonly) {
      padding-bottom: calculateRem(100);
    }

    .testimonial_slider {
      width: 100%;
      height: 45vh;

      @include breakpoint(mobileonly) {
        height: auto;
      }

      &:not(.animated) {
        visibility: hidden;
      }

      .testimonials-container {
        height: 100%;
        width: 100%;

        .testimonial-container {
          display: flex;

          height: 100%;
          width: 100%;

          @include breakpoint(mobile) {
            flex-direction: column;
          }

          @include breakpoint(tablet) {
            flex-direction: row;
          }

          .image-container {
            display: flex;
            justify-content: center;
            padding-right: calculateRem(25);
            width: 50%;

            .image {
              display: flex;
              align-items: center;
              img {
                width: 100%;
              }
            }

            @include breakpoint(mobileonly) {
              width: 100%;
              padding-bottom: calculateRem(75);
              padding-right: 0;
            }
          }

          .quote-container {
            width: 50%;
            display: flex;
            padding-left: calculateRem(25);

            .quote {
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 90%;

              .container {
                display: flex;
                flex-direction: column;
                padding-left: calculateRem(25);
                border-left: calculateRem(2) solid;

                @include breakpoint(mobileonly) {
                  border-left: none;
                }

                .q {
                  font-size: calculateRem(30);
                  line-height: 36px;
                  @include breakpoint(mobileonly) {
                    font-size: calculateRem(20);
                  }
                }
                .bottom {
                  .name {
                    font-size: calculateRem(20);
                    font-weight: 600;
                    @include breakpoint(mobileonly) {
                      font-size: calculateRem(18);
                    }
                  }
                  .reference {
                    font-size: calculateRem(20);
                    @include breakpoint(mobileonly) {
                      font-size: calculateRem(18);
                    }
                  }
                }
              }
              &.long-quote {
                .container {
                  .q {
                    font-size: calculateRem(30);
                    line-height: 36px;
                    @include breakpoint(mobileonly) {
                      font-size: calculateRem(20);
                    }
                  }
                }
              }
            }

            @include breakpoint(mobileonly) {
              width: 100%;
              padding-left: 0;
            }
          }
        }
      }

      .slider-bullets {
        text-align: center;
        position: absolute;
        left: 50%;
        bottom: calculateRem(100);
        width: calculateRem(150);
        margin-left: calculateRem(-75);
        span.bullet {
          font-size: calculateRem(32);
          padding: 0 calculateRem(2);
          &.selected {
            transition: all .2s;
          }
        }

        @include breakpoint(mobileonly) {
          display: none;
        }
      }

      .icon-container {
        visibility: hidden;
        position: absolute;
        top: 30vh;
        display: flex;
        justify-content: center;
        align-items: center;
        height: calculateRem(35);
        width: calculateRem(35);
        z-index: 99;
        border-radius: 50%;
        color: #000000;
        cursor: pointer;

        &.forward {
          right: calculateRem(20);
        }
        &.backward {
          left: calculateRem(20);
        }

        @include breakpoint(mobileonly) {
          top: calculateRem(300);
          &.forward {
            right: calculateRem(10);
          }
          &.backward {
            left: calculateRem(10);
          }
        }

        i {
          font-size: calculateRem(14);
          line-height: calculateRem(35);
        }

        @include breakpoint(mobileonly) {
          visibility: visible;
        }
      }
    }

    &:hover {
      .icon-container {
        transition: all .2s;
        visibility: visible;
      }
    }
  }
}