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

#settings-info,
#settings-rules {
  .flex-wrapper;

  .content-block {

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

    .section-title {
      .flex-wrapper;
      width: 100%;
      // min-height: 8vw;
      margin-top: 0;
      margin-bottom: 0px;
      color: #fe9404;
      font-family: @font-family;
      text-transform: uppercase;
      text-align: center;
      font-size: 3.5vw;
      word-break: break-word;
      -webkit-text-stroke-width: 0.11vw;
      -webkit-text-stroke-color: #000e6e;
      text-shadow: 0vw 0.4vw 0.2vw black;

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

      @media @portrait {
        margin: 20px 0;
        font-size: 8vw;
        -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 -3vw;

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

    .symbol-values {
      font-family: @font-family;
      font-size: 25px;

      @media @mobile {
        font-size: 20px;
      }

      .value {
        color: @color-blue;
      }

      .dash {
        color: @color-yelow;
      }
    }

    .paytable-symbols {
      .flex-wrapper;
      flex-direction: row;
      justify-content: space-around;
      align-content: space-around;
      align-items: end;
      flex-wrap: wrap;
      flex-flow: row wrap;
      min-width: 80%;

      &.wild .paytable-symbol-block {
        height: 140px;
        margin-bottom: 20px;
      }
    }

    .paytable-symbol-block {
      .flex-wrapper;
      flex-direction: column;
      margin: 0.7em;
      height: 260px;

      @media @mobile {
        &.mob-asset {
          height: 190px;
        }
      }
    }

    .desc-text {
      z-index: 100;
      color: @color-blue;
      font-size: 1.2vw;
      text-align: center;

      @media @landscape and (max-aspect-ratio: 4/3) {
        font-size: 1.8vw;
      }

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

      &.power-up-desc1,
      &.fs-desc1 {
        margin-top: 1vw;
      }

      &.power-up-desc2,
      &.fs-desc2,
      &.ways-desc1,
      &.win-desc1 {
        margin-top: 1.4vw;
      }

      &.fs-desc1,
      &.fs-desc2 {
        margin-bottom: 1.4vw;
      }
    }

    .power-up-section {
      .flex-wrapper;
      flex-direction: column;
      width: 100%;

      .power-up-row {
        .flex-wrapper;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;

        @media @portrait {
          flex-direction: column;
        }
      }

      .power-up-column {
        .flex-wrapper;
        flex-direction: column;
        justify-content: space-between;
        width: 50%;

        @media @portrait {
          width: 80%;
        }

        .power-up-image {
          width: 70%;
          height: 70%;
        }

        .power-up-title {
          .desc-text;
          font-family: @font-family;
          color: @color-yelow;
          text-transform: uppercase;
          width: 80%;
          word-break: break-word;
        }

        .power-up-desc {
          .desc-text;
          width: 80%;

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

    .fs-image {
      width: 100%;
      height: 100%;

      &.bonus {
        width: 50%;
      }

      &.fs {
        width: 50%;
      }
    }

    .ways-row {
      .flex-wrapper;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      flex-flow: row wrap;
      width: 66%;

      .ways-block {
        .flex-wrapper;
        width: 40%;
        height: 100%;

        .image1,
        .image3 {
          width: 65%;
          height: 65%;
        }

        .image2 {
          width: 25%;
          height: 25%;
        }

        .image4 {
          width: 20%;
          height: 20%;
        }
      }
    }

    .win-row {
      .flex-wrapper;
      flex-direction: row;
      align-items: start;
      width: 80%;

      @media @portrait {
        width: 80%;
        flex-direction: column;
        align-items: center;
      }

      .win-image {
        width: 60%;
        height: 60%;

        @media @portrait {
          width: 100%;
          height: 100%;
        }

        &.win1 {
          margin-right: -7vw;

          @media @portrait {
            margin: 0;
          }
        }

        &.win2 {
          padding-top: 3.5vw;

          @media @portrait {
            margin: 0;
          }
        }
      }
    }

    .buy-feature-row {
      .flex-wrapper;
      flex-direction: row;
      width: 80%;

      .buy-feature-image {
        width: 30%;
        margin-right: 15%;
      }
    }
  }
}