// Converted Variables


// Custom Media Query Variables


/*

   TYPE SCALE
   Docs: http://tachyons.io/docs/typography/scale/

   Base:
    f = font-size

   Modifiers
     1 = 1st step in size scale
     2 = 2nd step in size scale
     3 = 3rd step in size scale
     4 = 4th step in size scale
     5 = 5th step in size scale
     6 = 6th step in size scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large
*/

/*
 * For Hero/Marketing Titles
 *
 * These generally are too large for mobile
 * so be careful using them on smaller screens.
 * */

.f-6,
.f-headline {
  font-size: $font-size-headline;
}
.f-5,
.f-subheadline {
  font-size: $font-size-subheadline;
}


/* Type Scale */


.f1 { font-size: $font-size-1; }
.f2 { font-size: $font-size-2; }
.f3 { font-size: $font-size-3; }
.f4 { font-size: $font-size-4; }
.f5 { font-size: $font-size-5; }
.f6 { font-size: $font-size-6; }
.f7 { font-size: $font-size-7; }

@media #{$breakpoint-not-small}{
  .f-6-ns,
  .f-headline-ns { font-size: $font-size-headline; }
  .f-5-ns,
  .f-subheadline-ns { font-size: $font-size-subheadline; }
  .f1-ns { font-size: $font-size-1; }
  .f2-ns { font-size: $font-size-2; }
  .f3-ns { font-size: $font-size-3; }
  .f4-ns { font-size: $font-size-4; }
  .f5-ns { font-size: $font-size-5; }
  .f6-ns { font-size: $font-size-6; }
  .f7-ns { font-size: $font-size-7; }
}

@media #{$breakpoint-medium} {
  .f-6-m,
  .f-headline-m { font-size: $font-size-headline; }
  .f-5-m,
  .f-subheadline-m { font-size: $font-size-subheadline; }
  .f1-m { font-size: $font-size-1; }
  .f2-m { font-size: $font-size-2; }
  .f3-m { font-size: $font-size-3; }
  .f4-m { font-size: $font-size-4; }
  .f5-m { font-size: $font-size-5; }
  .f6-m { font-size: $font-size-6; }
  .f7-m { font-size: $font-size-7; }
}

@media #{$breakpoint-large} {
  .f-6-l,
  .f-headline-l {
    font-size: $font-size-headline;
  }
  .f-5-l,
  .f-subheadline-l {
    font-size: $font-size-subheadline;
  }
  .f1-l { font-size: $font-size-1; }
  .f2-l { font-size: $font-size-2; }
  .f3-l { font-size: $font-size-3; }
  .f4-l { font-size: $font-size-4; }
  .f5-l { font-size: $font-size-5; }
  .f6-l { font-size: $font-size-6; }
  .f7-l { font-size: $font-size-7; }
}