// Colors
$button-height: 27px;
$button-width: 30px;
$black: #070707;
$color255: rgba(255, 255, 255, 0.8);
$darkest-grey: #555;
$dark-grey: #1b1b1b;
$light-grey: #777777;
$grey: #707070;
$white: #f2f2f2;
$almostWhite: #cbcbcb;
$whiteRGBA: rgba(242,242,242,0.3);
$blue: #00b7c7;
$blueRGBA: rgba(0, 183, 199, 0.7);
$purple: #4d0ce8;
$purpleRGBA: rgba(77, 12, 232, 0.7);
$midpointBlue: #2762D8;
$overlayOpacity: 0.61;
// Fonts
$Chronicle: 'Chronicle Display Bold';
$serif-stack: Georgia, serif;
$Gotham: 'Gotham';
$Whitney: 'Whitney';
$sans-serif-stack: Helvetica, Arial, sans-serif;
// Breakpoints
$S: 330px;
$S400: 400px;
$S440: 440px;
$SM: 480px;
$S600: 600px;
$S660: 660px;
$M: 768px;
$MM: 900px;
$ML: 1000px;
$L: 1170px;
// Media queries
@mixin MQ($canvas) {
  @if $canvas==S {
    @media only screen and (max-width: $S) { @content; }
  }
  @else if $canvas==S400 {
    @media only screen and (max-width: $S400) { @content; }
  }
  @else if $canvas==S440 {
    @media only screen and (max-width: $S440) { @content; }
  }
  @else if $canvas==SM {
    @media only screen and (max-width: $SM) { @content; }
  }
  @else if $canvas==S600 {
    @media only screen and (max-width: $S600) { @content; }
  }
  @else if $canvas==S660 {
    @media only screen and (max-width: $S660) { @content; }
  }
  @else if $canvas==M {
    @media only screen and (max-width: $M) { @content; }
  }
  @else if $canvas==MM {
    @media only screen and (max-width: $MM) { @content; }
  }
  @else if $canvas==ML {
    @media only screen and (max-width: $ML) { @content; }
  }
  @else if $canvas==L {
    @media only screen and (max-width: $L) { @content; }
  }
}