Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

// Breakpoints
$bp-big: 68.75em;
$bp-medium: 62em;
$bp-small: 40em;

// Breakpoint
@mixin bp($point) {
  @if $point == bp-medium {
    @media (max-width: $bp-medium) { @content; }
  }
  @else if $point == bp-small {
    @media (max-width: $bp-small)  { @content; }
  }
}

// Font Size
@mixin font-size($size) {
  font-size: $size * 1px;
  font-size: $size * 0.1rem;
}

/* Font Size Helpers */
@for $i from 10 through 60 {
  .fs#{$i} {
    @include font-size($i);
    @include bp(bp-medium) {
      @include font-size($i * .875)
    }
    @include bp(bp-small) {
      @include font-size($i * .75)
    }
  }
}

SassMeister-output.css

/* Font Size Helpers */
.fs10 {
  font-size: 10px;
  font-size: 1rem;
}
@media (max-width: 62em) {
  .fs10 {
    font-size: 8.75px;
    font-size: 0.875rem;
  }
}
@media (max-width: 40em) {
  .fs10 {
    font-size: 7.5px;
    font-size: 0.75rem;
  }
}

.fs11 {
  font-size: 11px;
  font-size: 1.1rem;
}
@media (max-width: 62em) {
  .fs11 {
    font-size: 9.625px;
    font-size: 0.9625rem;
  }
}
@media (max-width: 40em) {
  .fs11 {
    font-size: 8.25px;
    font-size: 0.825rem;
  }
}

.fs12 {
  font-size: 12px;
  font-size: 1.2rem;
}
@media (max-width: 62em) {
  .fs12 {
    font-size: 10.5px;
    font-size: 1.05rem;
  }
}
@media (max-width: 40em) {
  .fs12 {
    font-size: 9px;
    font-size: 0.9rem;
  }
}

.fs13 {
  font-size: 13px;
  font-size: 1.3rem;
}
@media (max-width: 62em) {
  .fs13 {
    font-size: 11.375px;
    font-size: 1.1375rem;
  }
}
@media (max-width: 40em) {
  .fs13 {
    font-size: 9.75px;
    font-size: 0.975rem;
  }
}

.fs14 {
  font-size: 14px;
  font-size: 1.4rem;
}
@media (max-width: 62em) {
  .fs14 {
    font-size: 12.25px;
    font-size: 1.225rem;
  }
}
@media (max-width: 40em) {
  .fs14 {
    font-size: 10.5px;
    font-size: 1.05rem;
  }
}

.fs15 {
  font-size: 15px;
  font-size: 1.5rem;
}
@media (max-width: 62em) {
  .fs15 {
    font-size: 13.125px;
    font-size: 1.3125rem;
  }
}
@media (max-width: 40em) {
  .fs15 {
    font-size: 11.25px;
    font-size: 1.125rem;
  }
}

.fs16 {
  font-size: 16px;
  font-size: 1.6rem;
}
@media (max-width: 62em) {
  .fs16 {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
@media (max-width: 40em) {
  .fs16 {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

.fs17 {
  font-size: 17px;
  font-size: 1.7rem;
}
@media (max-width: 62em) {
  .fs17 {
    font-size: 14.875px;
    font-size: 1.4875rem;
  }
}
@media (max-width: 40em) {
  .fs17 {
    font-size: 12.75px;
    font-size: 1.275rem;
  }
}

.fs18 {
  font-size: 18px;
  font-size: 1.8rem;
}
@media (max-width: 62em) {
  .fs18 {
    font-size: 15.75px;
    font-size: 1.575rem;
  }
}
@media (max-width: 40em) {
  .fs18 {
    font-size: 13.5px;
    font-size: 1.35rem;
  }
}

.fs19 {
  font-size: 19px;
  font-size: 1.9rem;
}
@media (max-width: 62em) {
  .fs19 {
    font-size: 16.625px;
    font-size: 1.6625rem;
  }
}
@media (max-width: 40em) {
  .fs19 {
    font-size: 14.25px;
    font-size: 1.425rem;
  }
}

.fs20 {
  font-size: 20px;
  font-size: 2rem;
}
@media (max-width: 62em) {
  .fs20 {
    font-size: 17.5px;
    font-size: 1.75rem;
  }
}
@media (max-width: 40em) {
  .fs20 {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

.fs21 {
  font-size: 21px;
  font-size: 2.1rem;
}
@media (max-width: 62em) {
  .fs21 {
    font-size: 18.375px;
    font-size: 1.8375rem;
  }
}
@media (max-width: 40em) {
  .fs21 {
    font-size: 15.75px;
    font-size: 1.575rem;
  }
}

.fs22 {
  font-size: 22px;
  font-size: 2.2rem;
}
@media (max-width: 62em) {
  .fs22 {
    font-size: 19.25px;
    font-size: 1.925rem;
  }
}
@media (max-width: 40em) {
  .fs22 {
    font-size: 16.5px;
    font-size: 1.65rem;
  }
}

.fs23 {
  font-size: 23px;
  font-size: 2.3rem;
}
@media (max-width: 62em) {
  .fs23 {
    font-size: 20.125px;
    font-size: 2.0125rem;
  }
}
@media (max-width: 40em) {
  .fs23 {
    font-size: 17.25px;
    font-size: 1.725rem;
  }
}

.fs24 {
  font-size: 24px;
  font-size: 2.4rem;
}
@media (max-width: 62em) {
  .fs24 {
    font-size: 21px;
    font-size: 2.1rem;
  }
}
@media (max-width: 40em) {
  .fs24 {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

.fs25 {
  font-size: 25px;
  font-size: 2.5rem;
}
@media (max-width: 62em) {
  .fs25 {
    font-size: 21.875px;
    font-size: 2.1875rem;
  }
}
@media (max-width: 40em) {
  .fs25 {
    font-size: 18.75px;
    font-size: 1.875rem;
  }
}

.fs26 {
  font-size: 26px;
  font-size: 2.6rem;
}
@media (max-width: 62em) {
  .fs26 {
    font-size: 22.75px;
    font-size: 2.275rem;
  }
}
@media (max-width: 40em) {
  .fs26 {
    font-size: 19.5px;
    font-size: 1.95rem;
  }
}

.fs27 {
  font-size: 27px;
  font-size: 2.7rem;
}
@media (max-width: 62em) {
  .fs27 {
    font-size: 23.625px;
    font-size: 2.3625rem;
  }
}
@media (max-width: 40em) {
  .fs27 {
    font-size: 20.25px;
    font-size: 2.025rem;
  }
}

.fs28 {
  font-size: 28px;
  font-size: 2.8rem;
}
@media (max-width: 62em) {
  .fs28 {
    font-size: 24.5px;
    font-size: 2.45rem;
  }
}
@media (max-width: 40em) {
  .fs28 {
    font-size: 21px;
    font-size: 2.1rem;
  }
}

.fs29 {
  font-size: 29px;
  font-size: 2.9rem;
}
@media (max-width: 62em) {
  .fs29 {
    font-size: 25.375px;
    font-size: 2.5375rem;
  }
}
@media (max-width: 40em) {
  .fs29 {
    font-size: 21.75px;
    font-size: 2.175rem;
  }
}

.fs30 {
  font-size: 30px;
  font-size: 3rem;
}
@media (max-width: 62em) {
  .fs30 {
    font-size: 26.25px;
    font-size: 2.625rem;
  }
}
@media (max-width: 40em) {
  .fs30 {
    font-size: 22.5px;
    font-size: 2.25rem;
  }
}

.fs31 {
  font-size: 31px;
  font-size: 3.1rem;
}
@media (max-width: 62em) {
  .fs31 {
    font-size: 27.125px;
    font-size: 2.7125rem;
  }
}
@media (max-width: 40em) {
  .fs31 {
    font-size: 23.25px;
    font-size: 2.325rem;
  }
}

.fs32 {
  font-size: 32px;
  font-size: 3.2rem;
}
@media (max-width: 62em) {
  .fs32 {
    font-size: 28px;
    font-size: 2.8rem;
  }
}
@media (max-width: 40em) {
  .fs32 {
    font-size: 24px;
    font-size: 2.4rem;
  }
}

.fs33 {
  font-size: 33px;
  font-size: 3.3rem;
}
@media (max-width: 62em) {
  .fs33 {
    font-size: 28.875px;
    font-size: 2.8875rem;
  }
}
@media (max-width: 40em) {
  .fs33 {
    font-size: 24.75px;
    font-size: 2.475rem;
  }
}

.fs34 {
  font-size: 34px;
  font-size: 3.4rem;
}
@media (max-width: 62em) {
  .fs34 {
    font-size: 29.75px;
    font-size: 2.975rem;
  }
}
@media (max-width: 40em) {
  .fs34 {
    font-size: 25.5px;
    font-size: 2.55rem;
  }
}

.fs35 {
  font-size: 35px;
  font-size: 3.5rem;
}
@media (max-width: 62em) {
  .fs35 {
    font-size: 30.625px;
    font-size: 3.0625rem;
  }
}
@media (max-width: 40em) {
  .fs35 {
    font-size: 26.25px;
    font-size: 2.625rem;
  }
}

.fs36 {
  font-size: 36px;
  font-size: 3.6rem;
}
@media (max-width: 62em) {
  .fs36 {
    font-size: 31.5px;
    font-size: 3.15rem;
  }
}
@media (max-width: 40em) {
  .fs36 {
    font-size: 27px;
    font-size: 2.7rem;
  }
}

.fs37 {
  font-size: 37px;
  font-size: 3.7rem;
}
@media (max-width: 62em) {
  .fs37 {
    font-size: 32.375px;
    font-size: 3.2375rem;
  }
}
@media (max-width: 40em) {
  .fs37 {
    font-size: 27.75px;
    font-size: 2.775rem;
  }
}

.fs38 {
  font-size: 38px;
  font-size: 3.8rem;
}
@media (max-width: 62em) {
  .fs38 {
    font-size: 33.25px;
    font-size: 3.325rem;
  }
}
@media (max-width: 40em) {
  .fs38 {
    font-size: 28.5px;
    font-size: 2.85rem;
  }
}

.fs39 {
  font-size: 39px;
  font-size: 3.9rem;
}
@media (max-width: 62em) {
  .fs39 {
    font-size: 34.125px;
    font-size: 3.4125rem;
  }
}
@media (max-width: 40em) {
  .fs39 {
    font-size: 29.25px;
    font-size: 2.925rem;
  }
}

.fs40 {
  font-size: 40px;
  font-size: 4rem;
}
@media (max-width: 62em) {
  .fs40 {
    font-size: 35px;
    font-size: 3.5rem;
  }
}
@media (max-width: 40em) {
  .fs40 {
    font-size: 30px;
    font-size: 3rem;
  }
}

.fs41 {
  font-size: 41px;
  font-size: 4.1rem;
}
@media (max-width: 62em) {
  .fs41 {
    font-size: 35.875px;
    font-size: 3.5875rem;
  }
}
@media (max-width: 40em) {
  .fs41 {
    font-size: 30.75px;
    font-size: 3.075rem;
  }
}

.fs42 {
  font-size: 42px;
  font-size: 4.2rem;
}
@media (max-width: 62em) {
  .fs42 {
    font-size: 36.75px;
    font-size: 3.675rem;
  }
}
@media (max-width: 40em) {
  .fs42 {
    font-size: 31.5px;
    font-size: 3.15rem;
  }
}

.fs43 {
  font-size: 43px;
  font-size: 4.3rem;
}
@media (max-width: 62em) {
  .fs43 {
    font-size: 37.625px;
    font-size: 3.7625rem;
  }
}
@media (max-width: 40em) {
  .fs43 {
    font-size: 32.25px;
    font-size: 3.225rem;
  }
}

.fs44 {
  font-size: 44px;
  font-size: 4.4rem;
}
@media (max-width: 62em) {
  .fs44 {
    font-size: 38.5px;
    font-size: 3.85rem;
  }
}
@media (max-width: 40em) {
  .fs44 {
    font-size: 33px;
    font-size: 3.3rem;
  }
}

.fs45 {
  font-size: 45px;
  font-size: 4.5rem;
}
@media (max-width: 62em) {
  .fs45 {
    font-size: 39.375px;
    font-size: 3.9375rem;
  }
}
@media (max-width: 40em) {
  .fs45 {
    font-size: 33.75px;
    font-size: 3.375rem;
  }
}

.fs46 {
  font-size: 46px;
  font-size: 4.6rem;
}
@media (max-width: 62em) {
  .fs46 {
    font-size: 40.25px;
    font-size: 4.025rem;
  }
}
@media (max-width: 40em) {
  .fs46 {
    font-size: 34.5px;
    font-size: 3.45rem;
  }
}

.fs47 {
  font-size: 47px;
  font-size: 4.7rem;
}
@media (max-width: 62em) {
  .fs47 {
    font-size: 41.125px;
    font-size: 4.1125rem;
  }
}
@media (max-width: 40em) {
  .fs47 {
    font-size: 35.25px;
    font-size: 3.525rem;
  }
}

.fs48 {
  font-size: 48px;
  font-size: 4.8rem;
}
@media (max-width: 62em) {
  .fs48 {
    font-size: 42px;
    font-size: 4.2rem;
  }
}
@media (max-width: 40em) {
  .fs48 {
    font-size: 36px;
    font-size: 3.6rem;
  }
}

.fs49 {
  font-size: 49px;
  font-size: 4.9rem;
}
@media (max-width: 62em) {
  .fs49 {
    font-size: 42.875px;
    font-size: 4.2875rem;
  }
}
@media (max-width: 40em) {
  .fs49 {
    font-size: 36.75px;
    font-size: 3.675rem;
  }
}

.fs50 {
  font-size: 50px;
  font-size: 5rem;
}
@media (max-width: 62em) {
  .fs50 {
    font-size: 43.75px;
    font-size: 4.375rem;
  }
}
@media (max-width: 40em) {
  .fs50 {
    font-size: 37.5px;
    font-size: 3.75rem;
  }
}

.fs51 {
  font-size: 51px;
  font-size: 5.1rem;
}
@media (max-width: 62em) {
  .fs51 {
    font-size: 44.625px;
    font-size: 4.4625rem;
  }
}
@media (max-width: 40em) {
  .fs51 {
    font-size: 38.25px;
    font-size: 3.825rem;
  }
}

.fs52 {
  font-size: 52px;
  font-size: 5.2rem;
}
@media (max-width: 62em) {
  .fs52 {
    font-size: 45.5px;
    font-size: 4.55rem;
  }
}
@media (max-width: 40em) {
  .fs52 {
    font-size: 39px;
    font-size: 3.9rem;
  }
}

.fs53 {
  font-size: 53px;
  font-size: 5.3rem;
}
@media (max-width: 62em) {
  .fs53 {
    font-size: 46.375px;
    font-size: 4.6375rem;
  }
}
@media (max-width: 40em) {
  .fs53 {
    font-size: 39.75px;
    font-size: 3.975rem;
  }
}

.fs54 {
  font-size: 54px;
  font-size: 5.4rem;
}
@media (max-width: 62em) {
  .fs54 {
    font-size: 47.25px;
    font-size: 4.725rem;
  }
}
@media (max-width: 40em) {
  .fs54 {
    font-size: 40.5px;
    font-size: 4.05rem;
  }
}

.fs55 {
  font-size: 55px;
  font-size: 5.5rem;
}
@media (max-width: 62em) {
  .fs55 {
    font-size: 48.125px;
    font-size: 4.8125rem;
  }
}
@media (max-width: 40em) {
  .fs55 {
    font-size: 41.25px;
    font-size: 4.125rem;
  }
}

.fs56 {
  font-size: 56px;
  font-size: 5.6rem;
}
@media (max-width: 62em) {
  .fs56 {
    font-size: 49px;
    font-size: 4.9rem;
  }
}
@media (max-width: 40em) {
  .fs56 {
    font-size: 42px;
    font-size: 4.2rem;
  }
}

.fs57 {
  font-size: 57px;
  font-size: 5.7rem;
}
@media (max-width: 62em) {
  .fs57 {
    font-size: 49.875px;
    font-size: 4.9875rem;
  }
}
@media (max-width: 40em) {
  .fs57 {
    font-size: 42.75px;
    font-size: 4.275rem;
  }
}

.fs58 {
  font-size: 58px;
  font-size: 5.8rem;
}
@media (max-width: 62em) {
  .fs58 {
    font-size: 50.75px;
    font-size: 5.075rem;
  }
}
@media (max-width: 40em) {
  .fs58 {
    font-size: 43.5px;
    font-size: 4.35rem;
  }
}

.fs59 {
  font-size: 59px;
  font-size: 5.9rem;
}
@media (max-width: 62em) {
  .fs59 {
    font-size: 51.625px;
    font-size: 5.1625rem;
  }
}
@media (max-width: 40em) {
  .fs59 {
    font-size: 44.25px;
    font-size: 4.425rem;
  }
}

.fs60 {
  font-size: 60px;
  font-size: 6rem;
}
@media (max-width: 62em) {
  .fs60 {
    font-size: 52.5px;
    font-size: 5.25rem;
  }
}
@media (max-width: 40em) {
  .fs60 {
    font-size: 45px;
    font-size: 4.5rem;
  }
}