/* 1.2 Fonts */
/*
Placeholders

Styleguide 1.6
*/
/* 1.6.1 Title */
/*
Title

Mixins for title font-size and line-height. Do not use these for anything but
title sizes, as the line-heights are too dense for long-lenght body texts.

title-12px - 12px/15px
title-14px - 14px/15px
title-16px - 16px/18px
title-18px - 18px/18px
title-20px - 20px/21px
title-24px - 24px/24px
title-24px - 26px/27px
title-30px - 30px/30px
title-48px - 48px/48px

Styleguide 1.6.1
*/
/* 1.6.2 Text */
/*
Text

Styleguide 1.6.2
*/
/* 1.6.3 Meta */
/*
Meta

Styleguide 1.6.3
*/
/* 1.6.4 Date */
/*
Date

Styleguide 1.6.4
*/
/* 1.6.5 Location */
/*
Location

Styleguide 1.6.5
*/
/* 1.6.6 Theme */
/*
theme

@mixin theme-color
@mixin theme-border
@mixin theme-opaque-background
@mixin theme-transparent-background

Styleguide 1.6.6
*/
/* 1.6.99 Miscellaneous */
/*
Miscellaneous

Styleguide 1.6.99
*/
/* it's an official colour these days! */
/* alternate spelling */
/* alternate spelling */
/* alternate spelling */
/* alternate spelling */
/* alternate spelling */
/* alternate spelling */
/* alternate spelling */
/* 1.3.1 Rhythm */
/*
Settings

Styleguide 1.3
*/
/* 1.3.4 Base */
/* 1.3.1 Rhythm */
/*
Rhythm

This measure is used to calculate vertical measurements like line-height and top and bottom paddings and margins. All vertical measurements need to be a whole multiple of this value to maintain consistent vertical rhythm.

$rhythm - 3px

markup:
{$modifiers}

Styleguide 1.3.1
*/
/* 1.3.2 Typography */
/*
Typography

If `$use-brand-type: true` type is set in Merriwheather and Futura.
If `$use-brand-type: false` type is set in Times and Open Sans.

Styleguide 1.3.2
*/
/* 21px */
/* 1.3.5 Breakpoint */
/*
Breakpoint settings

$lt-small-handheld - Breakpoint for (**smaller than**) smaller handheld devices (<=319px).
$lt-medium-handheld - Breakpoint for (**smaller than**) medium sized handheld devices (<=519px).
$lt-large-handheld - Breakpoint for (**smaller than**) larger handheld devices and smaller desktop devices (<=767px).
$lt-small-desktop - Breakpoint for (**smaller than**) medium sized handheld and small desktop devices (<=1023px).
$lt-medium-desktop - Breakpoint for (**smaller than**) Breakpoint for large (desktop) devices (<=1259px).
$lt-large-desktop - Breakpoint for (**smaller than**) Breakpoint for large (desktop) devices (<=1439px).
<hr>
$gt-small-handheld - Breakpoint for (**larger than**) smaller handheld devices (>=320px).
$gt-medium-handheld - Breakpoint for (**larger than**) medium sized handheld devices (>=520px).
$gt-large-handheld - Breakpoint for (**larger than**) larger handheld devices and smaller desktop devices (>=768px).
$gt-small-desktop - Breakpoint for (**larger than**) medium sized handheld and small desktop devices (>=1024px).
$gt-medium-desktop - Breakpoint for (**larger than**) Breakpoint for large (desktop) devices (>=1260px).
$gt-large-desktop - Breakpoint for (**larger than**) Breakpoint for large (desktop) devices (>=1440px).
<hr>
$portrait - Breakpoint for portrait oriented viewports.
$landscape - Breakpoint for landscape oriented viewports.

markup:
{$modifiers}

Styleguide 1.3.3
*/
/* 1.3.7 Grid */
/* 1.3.8 Layout */
/*
Layout

$grids - Layouts accross breakpoints.

markup:
<pre>{$modifiers}</pre>

Styleguide 1.3.8
*/
/* 1.3.9 Miscellaneaous */
.tile {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%; }
  .tile, .tile__head, .tile__footer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex; }
  .tile__head, .tile__footer {
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .tile__body {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
    .tile__body .icon {
      font-size: 1.25em; }
  .tile__label {
    padding: 9px 15px;
    font-size: 0.6875em;
    line-height: 12px; }
