.flex-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#settings-info,
#settings-rules {
  .flex-wrapper;
  font-family: @font-family-default;
  color: @color-text;

  .content-block {
    width: 100%;

    @media @landscape and (min-width: 900px) {
      max-width: 90%;
    }

    .section-title {
      .flex-wrapper;
      width: 100%;
      margin: 10px 0 20px;
      color: @color-title;
      font-family: @font-family;
      font-weight: 100;
      text-transform: uppercase;
      text-align: center;
      font-size: 3vw;
      word-break: break-word;
      text-shadow: 0vw 0.4vw 0.2vw black;

      @media @landscape and (max-aspect-ratio: 4/3) {
        min-height: 12vw;
        font-size: 4vw;
        -webkit-text-stroke-width: 0.15vw;
        text-shadow: 0vw 0.8vw 0.3vw black;
      }

      @media @portrait {
        margin: 20px 0;
        font-size: 6vw;
        -webkit-text-stroke-width: 0.2vw;
        text-shadow: 0vw 1vw 0.5vw black;
      }
    }

    .infoHeader {
      width: 100%;
      align-items: center;

      .logo {
        max-width: 20vw;
        margin: 2vw 0 1vw;

        @media @portrait {
          max-width: 50vw;
        }
      }

      .feature-bet-amount {
        margin: 10px 0px 30px;

        .bet-amount {
          color: @color-title;
        }
      }
    }

    .desc-text,
    &.rules li {
      z-index: 100;
      font-size: 1.1vw;
      text-align: center;
      margin: 15px 0;

      @media @smartLandscape {
        font-size: 1.8vw;
      }

      @media @portrait {
        font-size: 3.5vw;
      }

      &.wild {
        margin-top: 40px;
      }
    }

    &.rules {
      li {
        color: @color-text;
        text-align: left;
      }

      h1 {
        text-transform: uppercase;
      }

      .rules-section-title {
        margin-top: 30px;
      }
    }

    .game-divider {
      margin: 20px 0;

      img {
        width: 100%;
      }
    }

    .trasure-feature,
    .freespins-feature,
    .win-feature,
    .dd-feature,
    .paylines-feature,
    .connected-ways-feature {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .five-chests,
    .five-scatters,
    .payline-images {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;

      img {
        width: 15%;
      }
    }

    .freespins-feature {
      .five-scatters img {
        width: 17%;
      }

      img.SC {
        width: 18.5%;
        margin-bottom: 3%;
      }
    }

    .win-4000 {
      img {
        margin-top: -13%;
        margin-left: 1.6%;
      }

      .text-4000-container {
        margin-bottom: 5%;

        .text-4000 {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0%);
          text-align: center;
          font-family: @font-family;
          font-weight: 100;
          letter-spacing: 2px;
          font-size: 10vmin;
          text-align: center;
          color: @color-text;
          margin-top: -10%;

          &.cont-shadow {
            text-shadow: 0.5vmin 0.5vmin #000000;
          }

          &.cont-gradient {
            background: -webkit-linear-gradient(#ffffa7, #d99d2b);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }

    .win_4000-container,
    .dd-frame-container {
      img {
        width: 100%;
      }
    }

    .payline-images img {
      width: 45%;
    }
  }
}