#info {
  overflow-x : hidden;
  padding-top: 10px;

  .infoHeader h1 {
    margin: 10px 0 20px 0;
  }

  .row-flex-container {
    display        : flex;
    width          : 100%;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    align-content  : space-around;
    @media screen and (max-width: 1200px) {
      flex-wrap: wrap;
      
    }
  }

  .content-block {
    max-width: 80%;
    margin   : 0 auto;
    @media @portrait {
      max-width: 100%;
    }
  }

  .feature-bet-amount {
    text-align: center;
    font-size : 18px;
  }

  .logo {
    margin: 0 auto 10px;

    @media @landscape {
      max-width: 30%;
    }

    @media @portrait {
      max-width: 80%;
    }
  }

  .paytable-symbol-block {
    text-align: center;
    padding   : 20px;
    img{
      max-width: 100%;
    }
  }

  .symbol-payout-info {
    display    : grid;
    grid       : ~"1fr / 0.5fr 0.5fr 1fr";
    align-items: center;

    .symbol-n,
    .symbol-pay {
      font-family: Troika;
    }

    .symbol-n {
      text-align : right;
      grid-column: ~"1 / 2";
      color      : #fb1b0f;
      font-size  : 32px;
    }

    .symbol-square {
      text-align : center;
      color      : white;
      padding    : 10px;
      grid-column: ~"2 / 3";
      font-size  : 8px;
    }

    .symbol-pay {
      text-align : left;
      grid-column: ~"3 / 4";
      font-size  : 36px;
      color      : #f9b535;
    }
  }

  .paytable-wild-symbols {
    display        : flex;
    width          : 100%;
    justify-content: center;
    align-items    : center;
    flex-wrap      : wrap;

    .wild-tomatoes,
    .wild-donkey,
    .wild-stallion {
      padding: 10px 0;
    }

    .wild-tomatoes {
      width: 160px;
    }

    .wild-donkey {
      margin-top  : -20px;
      margin-right: 10px;
      height      : 280px;
    }

    .wild-stallion {
      height      : 410px;
      margin-right: 50px;
    }

  }

  .paylines.flex-container {
    margin-top     : 3%;
    margin-bottom  : 10%;
    max-width      : 80%;
    display        : flex;
    flex-flow      : row wrap;
    justify-content: space-around;

    .flex-container {
      display  : flex;
      flex-flow: row wrap;
      margin   : 0.7em;
    }

    .square {
      border      : 1px solid black;
      border-width: 1px 1px 0px 0px;
    }

    p {
      max-width    : 100% !important;
      margin-bottom: 0;
      font-size    : 18px;
    }
  }


  .subtitle {

    &.freespin-tour {
      grid: ~"1fr / auto 1fr auto";

      .instrument-right {
        transform: scaleX(-1);
      }
    }

    &.freespin-title,
    &.random-feature-title {
      display: inline-block;
      margin : 70px 0 30px 0;

      .freespin-rating {
        position: absolute;
        width   : 100%;
        top     : -50px;

        img {
          width: 30px;
        }
      }
    }

    &.random-features {
      display        : grid;
      grid           : ~"1fr / auto 1fr auto";
      align-items    : center;
      justify-content: center;
      margin         : 30px 0 30px 0;

      h1 {
        z-index: 1;
        color  : #7ab6ff;
      }

      img {
        padding: 0 20px;
        height : 40px;
      }

    }

  }

  .freespins-previews-wrapper,
  .random-features-previews-wrapper {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-around;

    p {
      max-width: 90%;
      margin: 10px auto;
    }

    img {
      max-width: 100%;
    }

    .freespin-preview,
    .random-feature-preview {
      margin-top   : 20px;
      margin-bottom: 20px;
      max-width    : 45%;
      text-align   : center;

      &.wide {
        max-width: 90%;
      }

      @media @portrait {
        max-width: 80%;
      }
    }

    .freespin-preview-bus {
      width     : 100%;
      text-align: center;

      img {
        margin-bottom: -30px;
      }
    }

    .random-feature-preview {

      img {
        z-index  : -1;
        position : absolute;
        transform: translate(-50%, -75%) scale(0.7);
      }

    }

  }

  .buy-feature-wrapper {
    max-width  : 80%;
    display    : flex;
    align-items: center;
    @media @portrait{
      max-width: 100%;
      flex-direction: column;
    }

    img {
      float     : left;
      margin-top: -40px;
      max-width : 50%;
    }

    p {
      float     : right;
      text-align: left;
    }

  }

}