/*  --------------------------------------------------------------------------------------------------*/
/*  ------------------------------------ IMAGES AND FIGURES ------------------------------------------*/
/*  --------------------------------------------------------------------------------------------------*/
.image-float-left {
  float: left;
  margin-right: 30px;
}

.image-float-right {
  float: right;
  margin-left: 30px;
}

.image,
.image-float-left,
.image-float-right {
  &.top-legend-sm {
    img {
      margin-top: 5px;
    }
  }

  &.bottom-legend-sm {
    img {
      margin-bottom: 5px;
    }
  }

  &.top-legend-md,
  &.top-legend {
    img {
      margin-top: 10px;
    }
  }

  &.bottom-legend-md,
  &.bottom-legend {
    img {
      margin-bottom: 10px;
    }
  }

  &.top-legend-lg {
    img {
      margin-top: 15px;
    }
  }

  &.bottom-legend-lg {
    img {
      margin-bottom: 15px;
    }
  }

  &.top-legend-xl {
    img {
      margin-top: 20px;
    }
  }

  &.bottom-legend-xl {
    img {
      margin-bottom: 20px;
    }
  }

  &.top-legend-xxl {
    img {
      margin-top: 25px;
    }
  }

  &.bottom-legend-xxl {
    img {
      margin-bottom: 25px;
    }
  }
}

figure {
  margin-bottom: 10px;

  figcaption {
    width: 100%;
    line-height: 1.1;

    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      width: 100%;
      margin: 0 !important;
    }
  }
}

/*  --------------------------------------------------------------------------------------------------*/
/*  ------------------------------------ TEXT AND PARAGRAPHES ----------------------------------------*/
/*  --------------------------------------------------------------------------------------------------*/

.p-11 {
  font-size: 11px;
}

.p-12 {
  font-size: 12px;
}

.p-13 {
  font-size: 13px;
}

.p-14 {
  font-size: 14px;
}

.p-15 {
  font-size: 15px;
}

.p-16 {
  font-size: 16px;
}

.p-17 {
  font-size: 17px;
}

.p-18 {
  font-size: 18px;
}

.p-19 {
  font-size: 19px;
}

.p-20 {
  font-size: 20px;
}


.qsn-rscmt {
  .sub-section {
    text-align: justify;

    p {
      margin: 30px auto;

      &:first-of-type {
        margin-top: 0;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  .p-image {
    &::after {
      content: "";
      display: table;
      clear: both;
    }

    figcaption,
    img {
      width: 400px;
      max-height: 450px;

      @media screen and (max-width: 450px) {
        width: 300px;
      }

      @media screen and (max-width: 350px) {
        width: 200px;
      }
    }

    @media (max-width: 740px) {
      .image-float-left,
      .image-float-right,
      .image {
        float: none;
        margin: auto;
        margin-bottom: 30px;

        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.qsn-guide-quote {
  margin: 0 0 15px 0;
}