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

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

  .content-block {

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

      @media @landscape {
        min-height: 8vh;
        font-size: 6vh;
        -webkit-text-stroke-width: 0.15vh;
        text-shadow: 0vh 0.8vh 0.3vh black;
      }

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

      &.buyfeature {
        margin-bottom: 50px;
      }
    }

    .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 !important;
      flex-flow: row wrap;
      min-width: 80%;
      width: 200px;
      &.wild .paytable-symbol-block {
        height: 140px;
        margin-bottom: 20px;
      }
    }

    .paytable-symbol-block {
      width: 30%;
      .flex-wrapper;
      flex-direction: column;
      margin: 0.3em;
      height: 200px;
      @media @mobile {
        &.mob-asset {
          height: 200px;
        }
      }
    }

    .desc-text {
      z-index: 100;
      color: @color-blue;
      font-size: 1.25vw;
      text-align: center;
      font-family: 'bangopro';
      font-weight: 100;
      margin-bottom: 25px;
      @media @landscape {
        font-size: 2.8vh;
      }
      @media @portrait {
        font-size: 3.5vw;
      }
      &.short {
        max-width: 68%;
      }
      &.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%;
      margin: 50px 0 30px 0;
      width: 75%;
      @media @portrait {
        margin: 20px 0 30px 0;
      }
      &.bonus {
        margin: 10px 0 30px 0;
      }
    }

    .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%;
      @media @portrait {
        flex-direction: column;
      }
      .buy-feature-bg {
        margin-right: 10%;
        position: relative;
        width: 40%;
        float: left;
        display: flex;
        justify-content: center;
        @media @portrait {
          width: 100%;
        }
        p {
          position: absolute;
          font-size: 180%;
          bottom: 23%;
          left: 5px;
          text-shadow: none;
          -webkit-text-stroke-color: #000;
          -webkit-text-stroke-width: 0.05vh;
          @media @portrait {
            bottom: 16%;
          }
          &.buy-feature-long {
            font-size: 100%;
            bottom: 22%;
            @media screen and (max-width: 768px) and (orientation: landscape){
              font-size: 80%;
              bottom: 15%;
            }
            @media @portrait {
              font-size: 120%;
              bottom: 20%;

            }
          }
          &.buy-feature-med {
            font-size: 130%;
            bottom: 25%;
            @media @portrait {
              font-size: 120%;
              bottom: 20%;

            }
          }
       }
        .buy-feature-image{
          width: 250px;
          object-position: bottom;
          object-fit: contain;
          height: 100%;
          max-height: 200px;
          @media @landscape {
            max-width: 20vw;
          }
        }
      }
    }
  }
}