.hero_with_info_box-group {
  overflow: visible;
  z-index: 4;

  .info-box-container {
    position: relative;

    .info-box {
      position: absolute;
      margin: 0 auto;
      margin-top: calculateRem(-225);
      margin-right: calculateRem(-150);
      width: fit-content;
      border-radius: calculateRem(8);
      right: 50%;
      cursor: pointer;

      @include breakpoint(phablet) {
        bottom: calculateRem(-35);
        left: unset;
        right: calculateRem(50);
        margin-left: 0; margin-right: 0;
      }

      img {
        margin-bottom: calculateRem(-7.5);
        max-width: calculateRem(300);
        @include breakpoint(desktop) {
          max-width: calculateRem(400);
        }
      }
      .arrows {
        width: 20%;
        height: calculateRem(50);
        border-radius: calculateRem(5);
        background-color: $dark;
        position: absolute;
        top: calculateRem(15);
        right: calculateRem(15);

        .icon-container {
          width:100%; cursor: pointer; position: absolute;
        }

        @include breakpoint(desktop) {
          width: 25%;
          height: calculateRem(50);
          .icon-container {
            margin-top: 0;
          }
        }

        .icon-container .arrow {
          left: 37%;
          @include breakpoint(desktop) {
            left: 42%;
          }
        }
        .arrow {position: absolute; margin-left: 0; width: calculateRem(12); height: calculateRem(12); background-size: contain; top: calculateRem(16);}
        .second{margin-left: calculateRem(8);}
      }

      @keyframes bounceAlpha {
        0% {opacity: 1; transform: translateX(0px) scale(1);}
        25%{opacity: 0; transform:translateX(10px) scale(0.9);}
        26%{opacity: 0; transform:translateX(-10px) scale(0.9);}
        55% {opacity: 1; transform: translateX(0px) scale(1);}
      }

      .bounceAlpha {
        animation-name: bounceAlpha;
        animation-duration:1.4s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
      }

      .arrow.first.bounceAlpha {
        animation-name: bounceAlpha;
        animation-duration:1.4s;
        animation-delay:0.2s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
      }

      .title-paragraph {
        padding: calculateRem(15); padding-bottom: calculateRem(5);

        h6 {
          font-weight: bold;
          margin-bottom: 0;
        }
        p {
          margin: 0;
        }
      }

      &:hover {
        .title-paragraph {
          .arrows .arrow{
            animation-name: bounceAlpha;
            animation-duration:1.4s;
            animation-iteration-count:infinite;
            animation-timing-function:linear;
          }
          .arrows .arrow.first{
            animation-name: bounceAlpha;
            animation-duration:1.4s;
            animation-delay:0.2s;
            animation-iteration-count:infinite;
            animation-timing-function:linear;
          }
        }
      }
    }

    .hero_with_info_box-row {
      position: relative;

      padding-top: calculateRem(95);
      padding-right: calculateRem(50);
      padding-bottom: calculateRem(95);
      padding-left: calculateRem(50);

      box-sizing: border-box;

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

      .hero_with_info_box {
        @include breakpoint(mobile) {
          padding-top: calculateRem(50);
          padding-bottom: calculateRem(200);
        }

        @include breakpoint(phablet) {
          padding-top: calculateRem(100);
        }

      }

      &.bg-full {
        .hero_with_info_box {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          justify-content: center;
          margin: auto;
          text-align: center;
          h1.title {
            @include breakpoint(mobile) {
              font-size: $mobile-h1-font-size;
            }
            @include breakpoint(tablet) {
              font-size: $h1-font-size;
            }
          }
          h3.subtitle {
            @include breakpoint(mobile) {
              font-size: $mobile-h3-font-size;
            }
            @include breakpoint(tablet) {
              font-size: $h3-font-size;
            }
          }
          p.paragraph {
            @include breakpoint(mobile) {
              font-size: $mobile-base-font-size;
            }
            @include breakpoint(tablet) {
              font-size: $base-font-size;
            }
          }
          .button {
            align-self: center;
          }
        }
      }
    }
  }
}
