/* 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 */
/*
Colour

Styleguide 1.1
*/
/*
Base colours

$color-black - #000
$color-green - #67ab43
$color-dark-green - #1d673b

markup:
<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>

Styleguide 1.1.1
*/
/*
Spot colours

$color-blue - #56c0dd
$color-lime - #c1d435
$color-yellow - #facf21
$color-gold - #eb942c
$color-orange - #e26435
$color-salmon - #eb735d
$color-red - #ec2d10
$color-burgundy - #ba222a
$color-purple - #9b3381

markup:
<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>

Styleguide 1.1.2
*/
/* Brand */
/* Spore */
/* Theme */
/*
Social media colours

$color-rss - RSS Orange
$color-twitter - Official Twitter blue
$color-facebook - Official Facebook blue
$color-linkedin - Official LinkedIn blue
$color-youtube - Official YouTube red
$color-youtube--dark - Official YouTube red (darker shade)

markup:
<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>

Styleguide 1.1.3
*/
/*
Applied colours

$color-background - Background colour
$color-body - Body colour
$color-theme - Theme colour
$color-primary - Primary colour
$color-secondary - Secondary colour
$color-button - Primary button colour

markup:
<div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>

Styleguide 1.1.4
*/
/* Mixing colours */
/* Button colours */
/* Links colours */
/* Collections */
/* 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 */
/* 1. */
/*
 * 1. Extends .layout
 */
.person {
  background-color: #67ab43;
  background-color: rgba(103, 171, 67, 0.26);
  padding-top: 36px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .person.theme--dark,
  .theme--dark .person,
  .theme .theme--dark .person {
    background-color: #3d3d3d;
    background-color: rgba(61, 61, 61, 0.26); }
  .person.theme--green,
  .theme--green .person,
  .theme .theme--green .person {
    background-color: #67ab43;
    background-color: rgba(103, 171, 67, 0.26); }
  .person.theme--blue,
  .theme--blue .person,
  .theme .theme--blue .person {
    background-color: #56c0dd;
    background-color: rgba(86, 192, 221, 0.26); }
  .person.theme--lime,
  .theme--lime .person,
  .theme .theme--lime .person {
    background-color: #c1d435;
    background-color: rgba(193, 212, 53, 0.26); }
  .person.theme--yellow,
  .theme--yellow .person,
  .theme .theme--yellow .person {
    background-color: #facf21;
    background-color: rgba(250, 207, 33, 0.26); }
  .person.theme--gold,
  .theme--gold .person,
  .theme .theme--gold .person {
    background-color: #eb942c;
    background-color: rgba(235, 148, 44, 0.26); }
  .person.theme--orange,
  .theme--orange .person,
  .theme .theme--orange .person {
    background-color: #e26435;
    background-color: rgba(226, 100, 53, 0.26); }
  .person.theme--salmon,
  .theme--salmon .person,
  .theme .theme--salmon .person {
    background-color: #eb735d;
    background-color: rgba(235, 115, 93, 0.26); }
  .person.theme--red,
  .theme--red .person,
  .theme .theme--red .person {
    background-color: #ec2d10;
    background-color: rgba(236, 45, 16, 0.26); }
  .person.theme--burgundy,
  .theme--burgundy .person,
  .theme .theme--burgundy .person {
    background-color: #ba222a;
    background-color: rgba(186, 34, 42, 0.26); }
  .person.theme--purple,
  .theme--purple .person,
  .theme .theme--purple .person {
    background-color: #9b3381;
    background-color: rgba(155, 51, 129, 0.26); }
  .person.theme--youth,
  .theme--youth .person,
  .theme .theme--youth .person {
    background-color: #d57800;
    background-color: rgba(213, 120, 0, 0.26); }
  .person.theme--digitalisation,
  .theme--digitalisation .person,
  .theme .theme--digitalisation .person {
    background-color: #9a3324;
    background-color: rgba(154, 51, 36, 0.26); }
  .person.theme--climate,
  .theme--climate .person,
  .theme .theme--climate .person {
    background-color: #693c5e;
    background-color: rgba(105, 60, 94, 0.26); }
  .person.theme--gender,
  .theme--gender .person,
  .theme .theme--gender .person {
    background-color: #046a38;
    background-color: rgba(4, 106, 56, 0.26); }
  .person.theme--nutrition,
  .theme--nutrition .person,
  .theme .theme--nutrition .person {
    background-color: #487a7b;
    background-color: rgba(72, 122, 123, 0.26); }
  .person.theme--blog,
  .theme--blog .person,
  .theme .theme--blog .person {
    background-color: #FFA300;
    background-color: rgba(255, 163, 0, 0.26); }
  .person.theme--spore-blue,
  .theme--spore-blue .person,
  .theme .theme--spore-blue .person {
    background-color: #3f68b1;
    background-color: rgba(63, 104, 177, 0.26); }
  .person.theme--spore-brown,
  .theme--spore-brown .person,
  .theme .theme--spore-brown .person {
    background-color: #774b04;
    background-color: rgba(119, 75, 4, 0.26); }
  .person.theme--spore-dark-blue,
  .theme--spore-dark-blue .person,
  .theme .theme--spore-dark-blue .person {
    background-color: #044e7e;
    background-color: rgba(4, 78, 126, 0.26); }
  .person.theme--spore-forest-green,
  .theme--spore-forest-green .person,
  .theme .theme--spore-forest-green .person {
    background-color: #5f810a;
    background-color: rgba(95, 129, 10, 0.26); }
  .person.theme--spore-grey-blue,
  .theme--spore-grey-blue .person,
  .theme .theme--spore-grey-blue .person {
    background-color: #6d8c9f;
    background-color: rgba(109, 140, 159, 0.26); }
  .person.theme--spore-light-blue,
  .theme--spore-light-blue .person,
  .theme .theme--spore-light-blue .person {
    background-color: #79accf;
    background-color: rgba(121, 172, 207, 0.26); }
  .person.theme--spore-lime,
  .theme--spore-lime .person,
  .theme .theme--spore-lime .person {
    background-color: #bbae03;
    background-color: rgba(187, 174, 3, 0.26); }
  .person.theme--spore-ochre,
  .theme--spore-ochre .person,
  .theme .theme--spore-ochre .person {
    background-color: #db9623;
    background-color: rgba(219, 150, 35, 0.26); }
  .person.theme--spore-olive-green,
  .theme--spore-olive-green .person,
  .theme .theme--spore-olive-green .person {
    background-color: #778d3e;
    background-color: rgba(119, 141, 62, 0.26); }
  .person.theme--spore-red,
  .theme--spore-red .person,
  .theme .theme--spore-red .person {
    background-color: #f54c23;
    background-color: rgba(245, 76, 35, 0.26); }
  .person.theme--spore-taupe,
  .theme--spore-taupe .person,
  .theme .theme--spore-taupe .person {
    background-color: #7b6d65;
    background-color: rgba(123, 109, 101, 0.26); }
  .person.theme--spore-teal,
  .theme--spore-teal .person,
  .theme .theme--spore-teal .person {
    background-color: #077fc1;
    background-color: rgba(7, 127, 193, 0.26); }
  .person .heading {
    margin-bottom: 12px; }
  .person__headline {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-bottom: 12px; }
  .person__headline, .person__summary {
    padding-bottom: 24px; }
  .person__avatar {
    margin-top: 12px; }
    .person__avatar img {
      display: block;
      width: auto;
      height: auto; }
  .person__biography {
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: #67ab43;
    color: #fff; }
    .person__biography.theme--dark,
    .theme--dark .person__biography,
    .theme .theme--dark .person__biography {
      background-color: #3d3d3d; }
    .person__biography.theme--green,
    .theme--green .person__biography,
    .theme .theme--green .person__biography {
      background-color: #67ab43; }
    .person__biography.theme--blue,
    .theme--blue .person__biography,
    .theme .theme--blue .person__biography {
      background-color: #56c0dd; }
    .person__biography.theme--lime,
    .theme--lime .person__biography,
    .theme .theme--lime .person__biography {
      background-color: #c1d435; }
    .person__biography.theme--yellow,
    .theme--yellow .person__biography,
    .theme .theme--yellow .person__biography {
      background-color: #facf21; }
    .person__biography.theme--gold,
    .theme--gold .person__biography,
    .theme .theme--gold .person__biography {
      background-color: #eb942c; }
    .person__biography.theme--orange,
    .theme--orange .person__biography,
    .theme .theme--orange .person__biography {
      background-color: #e26435; }
    .person__biography.theme--salmon,
    .theme--salmon .person__biography,
    .theme .theme--salmon .person__biography {
      background-color: #eb735d; }
    .person__biography.theme--red,
    .theme--red .person__biography,
    .theme .theme--red .person__biography {
      background-color: #ec2d10; }
    .person__biography.theme--burgundy,
    .theme--burgundy .person__biography,
    .theme .theme--burgundy .person__biography {
      background-color: #ba222a; }
    .person__biography.theme--purple,
    .theme--purple .person__biography,
    .theme .theme--purple .person__biography {
      background-color: #9b3381; }
    .person__biography.theme--youth,
    .theme--youth .person__biography,
    .theme .theme--youth .person__biography {
      background-color: #d57800; }
    .person__biography.theme--digitalisation,
    .theme--digitalisation .person__biography,
    .theme .theme--digitalisation .person__biography {
      background-color: #9a3324; }
    .person__biography.theme--climate,
    .theme--climate .person__biography,
    .theme .theme--climate .person__biography {
      background-color: #693c5e; }
    .person__biography.theme--gender,
    .theme--gender .person__biography,
    .theme .theme--gender .person__biography {
      background-color: #046a38; }
    .person__biography.theme--nutrition,
    .theme--nutrition .person__biography,
    .theme .theme--nutrition .person__biography {
      background-color: #487a7b; }
    .person__biography.theme--blog,
    .theme--blog .person__biography,
    .theme .theme--blog .person__biography {
      background-color: #FFA300; }
    .person__biography.theme--spore-blue,
    .theme--spore-blue .person__biography,
    .theme .theme--spore-blue .person__biography {
      background-color: #3f68b1; }
    .person__biography.theme--spore-brown,
    .theme--spore-brown .person__biography,
    .theme .theme--spore-brown .person__biography {
      background-color: #774b04; }
    .person__biography.theme--spore-dark-blue,
    .theme--spore-dark-blue .person__biography,
    .theme .theme--spore-dark-blue .person__biography {
      background-color: #044e7e; }
    .person__biography.theme--spore-forest-green,
    .theme--spore-forest-green .person__biography,
    .theme .theme--spore-forest-green .person__biography {
      background-color: #5f810a; }
    .person__biography.theme--spore-grey-blue,
    .theme--spore-grey-blue .person__biography,
    .theme .theme--spore-grey-blue .person__biography {
      background-color: #6d8c9f; }
    .person__biography.theme--spore-light-blue,
    .theme--spore-light-blue .person__biography,
    .theme .theme--spore-light-blue .person__biography {
      background-color: #79accf; }
    .person__biography.theme--spore-lime,
    .theme--spore-lime .person__biography,
    .theme .theme--spore-lime .person__biography {
      background-color: #bbae03; }
    .person__biography.theme--spore-ochre,
    .theme--spore-ochre .person__biography,
    .theme .theme--spore-ochre .person__biography {
      background-color: #db9623; }
    .person__biography.theme--spore-olive-green,
    .theme--spore-olive-green .person__biography,
    .theme .theme--spore-olive-green .person__biography {
      background-color: #778d3e; }
    .person__biography.theme--spore-red,
    .theme--spore-red .person__biography,
    .theme .theme--spore-red .person__biography {
      background-color: #f54c23; }
    .person__biography.theme--spore-taupe,
    .theme--spore-taupe .person__biography,
    .theme .theme--spore-taupe .person__biography {
      background-color: #7b6d65; }
    .person__biography.theme--spore-teal,
    .theme--spore-teal .person__biography,
    .theme .theme--spore-teal .person__biography {
      background-color: #077fc1; }
  @media only screen and (max-width: 19.9375em) {
    .person .heading {
      font-size: 1.25em; } }
  @media only screen and (min-width: 20em) {
    .person__summary {
      min-height: 66.66667%; }
    .person__standfirst {
      max-width: 66.66667%; }
    .person__avatar {
      margin-top: 0;
      max-width: 33.33333%; } }
  @media only screen and (min-width: 64em) {
    .person {
      position: relative;
      padding-top: 60px;
      padding-bottom: 36px; }
      .person::after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 44.44444%;
        margin-left: -15px;
        background-color: #67ab43;
        z-index: -1; }
        .person::after.theme--dark,
        .theme--dark .person::after,
        .theme .theme--dark .person::after {
          background-color: #3d3d3d; }
        .person::after.theme--green,
        .theme--green .person::after,
        .theme .theme--green .person::after {
          background-color: #67ab43; }
        .person::after.theme--blue,
        .theme--blue .person::after,
        .theme .theme--blue .person::after {
          background-color: #56c0dd; }
        .person::after.theme--lime,
        .theme--lime .person::after,
        .theme .theme--lime .person::after {
          background-color: #c1d435; }
        .person::after.theme--yellow,
        .theme--yellow .person::after,
        .theme .theme--yellow .person::after {
          background-color: #facf21; }
        .person::after.theme--gold,
        .theme--gold .person::after,
        .theme .theme--gold .person::after {
          background-color: #eb942c; }
        .person::after.theme--orange,
        .theme--orange .person::after,
        .theme .theme--orange .person::after {
          background-color: #e26435; }
        .person::after.theme--salmon,
        .theme--salmon .person::after,
        .theme .theme--salmon .person::after {
          background-color: #eb735d; }
        .person::after.theme--red,
        .theme--red .person::after,
        .theme .theme--red .person::after {
          background-color: #ec2d10; }
        .person::after.theme--burgundy,
        .theme--burgundy .person::after,
        .theme .theme--burgundy .person::after {
          background-color: #ba222a; }
        .person::after.theme--purple,
        .theme--purple .person::after,
        .theme .theme--purple .person::after {
          background-color: #9b3381; }
        .person::after.theme--youth,
        .theme--youth .person::after,
        .theme .theme--youth .person::after {
          background-color: #d57800; }
        .person::after.theme--digitalisation,
        .theme--digitalisation .person::after,
        .theme .theme--digitalisation .person::after {
          background-color: #9a3324; }
        .person::after.theme--climate,
        .theme--climate .person::after,
        .theme .theme--climate .person::after {
          background-color: #693c5e; }
        .person::after.theme--gender,
        .theme--gender .person::after,
        .theme .theme--gender .person::after {
          background-color: #046a38; }
        .person::after.theme--nutrition,
        .theme--nutrition .person::after,
        .theme .theme--nutrition .person::after {
          background-color: #487a7b; }
        .person::after.theme--blog,
        .theme--blog .person::after,
        .theme .theme--blog .person::after {
          background-color: #FFA300; }
        .person::after.theme--spore-blue,
        .theme--spore-blue .person::after,
        .theme .theme--spore-blue .person::after {
          background-color: #3f68b1; }
        .person::after.theme--spore-brown,
        .theme--spore-brown .person::after,
        .theme .theme--spore-brown .person::after {
          background-color: #774b04; }
        .person::after.theme--spore-dark-blue,
        .theme--spore-dark-blue .person::after,
        .theme .theme--spore-dark-blue .person::after {
          background-color: #044e7e; }
        .person::after.theme--spore-forest-green,
        .theme--spore-forest-green .person::after,
        .theme .theme--spore-forest-green .person::after {
          background-color: #5f810a; }
        .person::after.theme--spore-grey-blue,
        .theme--spore-grey-blue .person::after,
        .theme .theme--spore-grey-blue .person::after {
          background-color: #6d8c9f; }
        .person::after.theme--spore-light-blue,
        .theme--spore-light-blue .person::after,
        .theme .theme--spore-light-blue .person::after {
          background-color: #79accf; }
        .person::after.theme--spore-lime,
        .theme--spore-lime .person::after,
        .theme .theme--spore-lime .person::after {
          background-color: #bbae03; }
        .person::after.theme--spore-ochre,
        .theme--spore-ochre .person::after,
        .theme .theme--spore-ochre .person::after {
          background-color: #db9623; }
        .person::after.theme--spore-olive-green,
        .theme--spore-olive-green .person::after,
        .theme .theme--spore-olive-green .person::after {
          background-color: #778d3e; }
        .person::after.theme--spore-red,
        .theme--spore-red .person::after,
        .theme .theme--spore-red .person::after {
          background-color: #f54c23; }
        .person::after.theme--spore-taupe,
        .theme--spore-taupe .person::after,
        .theme .theme--spore-taupe .person::after {
          background-color: #7b6d65; }
        .person::after.theme--spore-teal,
        .theme--spore-teal .person::after,
        .theme .theme--spore-teal .person::after {
          background-color: #077fc1; }
      .person__summary, .person__biography {
        max-width: 50%; }
      .person__headline {
        padding-left: 5.55556%;
        padding-right: 61.11111%; }
      .person__biography {
        padding-top: 0;
        padding-left: 5.55556%;
        padding-right: 5.55556%;
        padding-bottom: 0;
        background: transparent; }
      .person__standfirst {
        max-width: 66.66667%;
        padding-left: 11.11111%;
        padding-right: 11.11111%; }
      .person__avatar {
        max-width: 33.33333%; } }