@charset "UTF-8";
@import url("normalize.0b052ad3.css");
/*
    SETTINGS.FOUNDATIONS
    ----
* ==================================================== */
/*
    FUNCTIONS
    ----
* ==================================================== */
/*
    MIXINS
    ----
* ==================================================== */
/*
    REM font-sizing, converts pixels to rems
*/
/*
    FADE TRANSITION 
*/
/*
    BASE.RESET
    ----
    
    Based on inuit.css
    A very simple reset that sits on top of Normalize.css.
==================================================== */
body, _
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
fieldset, legend,
figure,
hr {
  margin: 0;
  padding: 0; }

/**
 * Remove trailing margins from nested lists.
 */
li > ul,
li > ol {
  margin-bottom: 0; }

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

/* Links */
a,
a:hover {
  color: inherit;
  text-decoration: none;
  cursor: pointer; }

/*
  IMAGES
  ----
*/
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */
  vertical-align: middle;
  /* [3] */ }

img[width],
img[height] {
  /* [1] */
  max-width: none; }

/*
    BASE.BOX-SIZING
    ----
   
    More sensible default box-sizing:
	css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 
==================================================== */
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

/*
    BASE.PAGE
    ----
    
    High-level, page-level styling.
    Based on inuit.css framework

     1. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
       navigating between pages that do/do not have enough content to produce
       scrollbars naturally.
    2. Ensure the page always fills at least the entire height of the viewport.
    3. Prevent certain mobile browsers from automatically zooming fonts.
    4. Fonts on OSX will look more consistent with other systems that do not
       render text using sub-pixel anti-aliasing.
       
==================================================== */
html {
  font-size: 100%;
  height: 100%;
  /* [2] */
  -webkit-text-size-adjust: 100%;
  /* [3] */
  -ms-text-size-adjust: 100%;
  /* [3] */
  background: url("jr-wall.9a7747fd.jpg");
  background-position: center;
  background-size: auto 100%; }

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; }

body.modal-is-open {
  overflow: hidden; }

/*
    BASE.FONTS
    ----

* ==================================================== */
/* Use mixin to include desired font, one mixin per weight/style pair */
body {
  font: normal 1rem/1.5 "Open Sans", sans-serif;
  letter-spacing: -0.01px;
  color: #2B2B2B;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-weight: normal; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans Condensed", sans-serif; }

.o-layer {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  min-height: 100vh;
  padding-top: 2rem;
  overflow: hidden; }

.o-layer__background {
  position: absolute;
  top: 0px;
  left: 50%;
  height: 100%;
  max-width: none;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

.o-section {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  min-height: 100vh;
  padding-top: 2rem; }

.o-section--intro {
  overflow: hidden; }

.o-section--question {
  background: url("table-back.405d735b.png");
  background-position: center;
  background-size: auto 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden; }
  .o-section--question.finished {
    display: none; }
  @media all and (max-width: 37.4375em) {
    .o-section--question {
      background-position: bottom center;
      background-size: auto 230vh; } }

.o-section--results {
  z-index: 10;
  overflow: hidden; }

.o-container {
  position: relative;
  display: block;
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin: 0 auto; }
  @media all and (min-width: 30em) {
    .o-container {
      max-width: 480px; } }
  @media all and (min-width: 37.5em) {
    .o-container {
      max-width: 600px; } }
  @media all and (min-width: 48em) {
    .o-container {
      max-width: 720px; } }
  @media all and (min-width: 51.5em) {
    .o-container {
      max-width: 800px; } }
  @media all and (min-width: 62em) {
    .o-container {
      max-width: 880px; } }
  @media all and (min-width: 64em) {
    .o-container {
      max-width: 960px; } }
  @media all and (min-width: 75em) {
    .o-container {
      max-width: 1080px; } }
  @media all and (min-width: 90em) {
    .o-container {
      max-width: 1280px; } }
  @media all and (min-width: 103.125em) {
    .o-container {
      max-width: 1440px; } }

.container--full-h {
  height: 100vh; }

/*
    OBJECTS.GRID
    ----


    an float free, inline-block grid,
    with an optional flexbox flavour.

    usage:
    <div class="o-grid">
		<div class="o-grid__row">
			<div class="o-grid__item"></div>
		</div>
	</div>

	requires:
      - unless on flexbox mode o.layout items must be complemented
      width a size utility class ortherwise they will be stacked
      and 100% of the parent

* ==================================================== */
/* Uncomment and set these variables to customize the grid. */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem; }
  @media all and (min-width: 37.5em) {
    .container-fluid {
      padding-right: 2rem;
      padding-left: 2rem; } }

.o-flex-row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem; }
  @media all and (min-width: 37.5em) {
    .o-flex-row {
      margin-right: -1rem;
      margin-left: -1rem; } }

.o-flex-row.reverse {
  flex-direction: row-reverse; }

.o-col-row.reverse {
  flex-direction: column-reverse; }

.o-flex-col {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem; }
  @media all and (min-width: 37.5em) {
    .o-flex-col {
      padding-right: 1rem;
      padding-left: 1rem; } }

.o-intro__text {
  color: #D3BD7B; }

.o-intro__logos {
  width: 283px; }
  .o-intro__logos img {
    padding-left: 0.5rem;
    height: 30px; }

.o-intro__main {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: none; }

.o-score__share {
  opacity: 0; }
  .o-score__share.appear {
    opacity: 1; }

.o-intro__start {
  cursor: pointer;
  transition: all 0.3s ease-in-out; }
  .o-intro__start:hover {
    fill: #CAB168; }

.black-board {
  -webkit-transform: translate(13px, 280.69538px);
          transform: translate(13px, 280.69538px);
  transition: all 0.8s ease-in-out; }
  .black-board.black-board--visible {
    -webkit-transform: translate(13px, 150.69538px);
            transform: translate(13px, 150.69538px); }

.c-title {
  margin-top: 0.5rem;
  -webkit-transform: translate(35px, -400px);
          transform: translate(35px, -400px);
  transition: all 1s ease-in-out;
  transition-delay: 0s;
  display: none; }
  .c-title.fade-in {
    -webkit-transform: translate(35px, 96px);
            transform: translate(35px, 96px); }
  @media all and (min-width: 62em) {
    .c-title {
      display: block; } }

.o-intro__title {
  margin-top: 0.5rem;
  max-height: 60px; }
  @media all and (min-width: 62em) {
    .o-intro__title {
      display: none; } }

#show-time {
  display: none; }
  @media all and (min-width: 62em) {
    #show-time {
      display: block; } }

/* sharing styles*/
.o-share {
  width: 300px;
  position: absolute;
  bottom: 12%;
  left: 70%;
  padding-right: 1.5rem; }

.t-text, .f-text {
  fill: #FFFEF5; }

.t-button {
  fill: #00ACED; }

.f-button {
  fill: #3B5998; }

.o-share__btn {
  transition: all 0.3s ease-in-out;
  cursor: pointer; }

.o-share__trigger:hover .t-button, .o-share__trigger:hover .f-button {
  fill: #FFFEF5; }

.o-share__trigger:hover .t-text {
  fill: #00ACED; }

.o-share__trigger:hover .f-text {
  fill: #3B5998; }

/* CARDS */
.o-question {
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(150%);
          transform: translateY(150%);
  position: absolute; }
  .o-question.pick-in {
    position: relative;
    transition: all 0.8s;
    -webkit-transform: translateY(calc(55%));
            transform: translateY(calc(55%)); }
    @media all and (min-width: 51.5em) {
      .o-question.pick-in {
        -webkit-transform: translateY(calc(100% - 7.5rem));
                transform: translateY(calc(100% - 7.5rem)); } }
  .o-question.slide-in {
    position: relative;
    transition: all 0.8s;
    -webkit-transform: translateY(5%);
            transform: translateY(5%); }
    @media all and (min-width: 51.5em) {
      .o-question.slide-in {
        -webkit-transform: translateY(20%);
                transform: translateY(20%); }
        .o-question.slide-in .o-question__capsule {
          padding-top: 2rem; } }
  .o-question.slide-out {
    position: relative;
    transition: all 0.8s;
    -webkit-transform: translateY(0%) translateX(100%);
            transform: translateY(0%) translateX(100%); }
  .o-question.finished {
    display: none; }

.q-element-file {
  max-width: none;
  max-height: 100%; }
  @media all and (min-width: 51.5em) {
    .q-element-file {
      width: 54rem;
      max-height: none;
      position: absolute;
      right: -4rem;
      top: -6rem; } }

.q-element-lhand {
  position: absolute;
  top: 30%;
  right: calc(54rem - 8rem);
  -webkit-transform: rotate(14deg);
          transform: rotate(14deg);
  transition: all 0.8s; }
  .q-element-lhand.slide-out {
    -webkit-transform: rotate(14deg) translate(-100%);
            transform: rotate(14deg) translate(-100%); }
  .q-element-lhand.disappear {
    display: none; }

.o-question__background {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 130%;
  z-index: -1; }
  @media all and (min-width: 51.5em) {
    .o-question__background {
      right: 0px;
      left: auto;
      width: 100%;
      height: auto;
      -webkit-transform: translate(0, -50%);
              transform: translate(0, -50%);
      margin-bottom: 2rem; } }

.o-question__capsule {
  position: relative;
  z-index: 0;
  font-family: "Cousine", monospace;
  transition: all 0.2s ease-in-out; }
  @media all and (min-width: 51.5em) {
    .o-question__capsule {
      max-width: 39rem; } }

.o-question__header {
  position: relative;
  padding-left: 4.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.71429;
  font-weight: 500;
  font-family: "Cousine", monospace; }
  @media all and (min-width: 51.5em) {
    .o-question__header {
      margin-top: 0px;
      font-size: 1rem;
      line-height: 1.5; } }

.o-question__item {
  padding: 1rem 0.5rem;
  padding-left: 4.5rem;
  margin: 0.5rem 0px;
  max-width: 30rem;
  background: white;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.71429;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  -webkit-transform: translateY(0%);
          transform: translateY(0%); }
  @media all and (min-width: 37.5em) {
    .o-question__item {
      padding: 1rem;
      padding-left: 4.5rem; } }
  .o-question__item:hover {
    -webkit-transform: translateY(0%) scale(1) translateX(1.5rem);
            transform: translateY(0%) scale(1) translateX(1.5rem);
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.6); }

.o-question__label,
[class*="o-question__label"] {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 3rem;
  height: 100%;
  padding: 0px 0.5rem;
  color: #000000;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 1.44; }
  .o-question__label[class*="--light"],
  [class*="o-question__label"][class*="--light"] {
    color: #af913a;
    background: #D3BD7B; }
    *:nth-child(1) > * > .o-question__label[class*="--light"]:after, *:nth-child(1) > * >
    [class*="o-question__label"][class*="--light"]:after {
      content: 'A'; }
    *:nth-child(2) > * > .o-question__label[class*="--light"]:after, *:nth-child(2) > * >
    [class*="o-question__label"][class*="--light"]:after {
      content: 'B'; }
    *:nth-child(3) > * > .o-question__label[class*="--light"]:after, *:nth-child(3) > * >
    [class*="o-question__label"][class*="--light"]:after {
      content: 'C'; }

.label-ghost {
  position: absolute;
  z-index: -1;
  margin-left: 0.25rem;
  margin-top: 0.125rem;
  color: #D3BD7B; }

.q-element-base {
  display: none; }
  @media all and (min-width: 51.5em) {
    .q-element-base {
      display: block;
      width: 20%; } }

.q-element-hammer {
  position: absolute;
  top: 135%;
  left: 7%;
  -webkit-transform: rotate(40deg) translateX(100%) scale(1.1);
          transform: rotate(40deg) translateX(100%) scale(1.1);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  z-index: 1;
  display: none; }
  @media all and (min-width: 51.5em) {
    .q-element-hammer {
      display: block; } }
  .q-element-hammer.hit-hammer {
    -webkit-animation: anime-hammer-hit 1.1s 1 linear;
            animation: anime-hammer-hit 1.1s 1 linear; }

/* Animations */
@-webkit-keyframes anime-hammer-hit {
  0% {
    -webkit-transform: rotate(40deg) translate(100%, 0%) scale(1.1);
            transform: rotate(40deg) translate(100%, 0%) scale(1.1); }
  20% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  30% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  50% {
    -webkit-transform: rotate(26deg) translate(0%, 10%) scale(1.1);
            transform: rotate(26deg) translate(0%, 10%) scale(1.1); }
  60% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  80% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  100% {
    -webkit-transform: rotate(40deg) translate(100%, 0%) scale(1.1);
            transform: rotate(40deg) translate(100%, 0%) scale(1.1); } }
@keyframes anime-hammer-hit {
  0% {
    -webkit-transform: rotate(40deg) translate(100%, 0%) scale(1.1);
            transform: rotate(40deg) translate(100%, 0%) scale(1.1); }
  20% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  30% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  50% {
    -webkit-transform: rotate(26deg) translate(0%, 10%) scale(1.1);
            transform: rotate(26deg) translate(0%, 10%) scale(1.1); }
  60% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  80% {
    -webkit-transform: rotate(40deg) translate(0%, 0%) scale(1.1);
            transform: rotate(40deg) translate(0%, 0%) scale(1.1); }
  100% {
    -webkit-transform: rotate(40deg) translate(100%, 0%) scale(1.1);
            transform: rotate(40deg) translate(100%, 0%) scale(1.1); } }

.o-question__hammer-stand {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px 0px;
  overflow: hidden; }

.o-score {
  margin-top: 0px;
  z-index: 1;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  height: calc(100vh - 2rem); }
  .o-score.slide-in {
    transition: all 0.3s cubic-bezier(0.1, 0.82, 0.25, 1);
    -webkit-transform: translateX(0%);
            transform: translateX(0%); }
  @media all and (min-width: 51.5em) {
    .o-score {
      margin-top: 9rem;
      height: auto; } }

.c-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  background-color: #000000;
  color: #FBFBFB;
  font-size: 12px;
  z-index: 1000; }

.c-bar__logo {
  height: 100%;
  width: auto; }

.c-banner {
  display: inline-block;
  padding: 0px 1.5rem;
  background: #000000;
  color: #D3BD7B;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.4); }
  @media all and (min-width: 51.5em) {
    .c-banner {
      padding: 0.5rem 1.5rem; } }

.c-banner--wide {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 4.375rem;
  line-height: 1.02857; }

.c-banner--big {
  font-size: 6.25rem;
  line-height: 1.2;
  padding: 0px 1.5rem 0px 2rem; }

.c-banner--small {
  font-size: 1.625rem;
  line-height: 1.84615; }
  @media all and (min-width: 51.5em) {
    .c-banner--small {
      font-size: 2.5rem;
      line-height: 1.2; } }

.c-banner--smaller {
  font-size: 1.375rem;
  line-height: 1.09091;
  padding: 0.25rem 1.5rem; }
  @media all and (min-width: 51.5em) {
    .c-banner--smaller {
      font-size: 2.375rem;
      line-height: 1.26316; } }

.c-banner--text {
  position: absolute;
  bottom: -110px;
  padding: 2rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.71429;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-style: italic;
  text-align: left;
  color: white;
  max-width: 400px;
  min-height: 300px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("black-board.cd3eea54.png"); }
  @media all and (min-width: 48em) {
    .c-banner--text {
      position: relative;
      bottom: auto;
      min-height: 300px;
      margin-left: 2.5rem;
      padding: 3rem 2.5rem 2.5rem;
      font-size: 1.125rem;
      line-height: 1.33333; } }

.c-banner--inverse {
  color: #000000;
  background: #D3BD7B; }

.c-banner-group {
  display: inline-block;
  text-align: center; }

.c-banner-strip {
  margin: 0.5rem 0px; }

.c-banner--constrain {
  max-width: 600px; }

.c-video-container {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 100%;
  width: 100%;
  overflow: hidden; }

.c-video {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
  @media all and (max-width: 37.4375em) {
    .o-section--question .c-video {
      height: 50%; } }

.c-video-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.8s ease-in-out; }
  .c-video-bg.shy-container {
    opacity: 0; }

.c-button {
  display: inline-block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  color: #af913a;
  background: #D3BD7B;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.3s ease-in-out; }

/* deprecated - check */
.c-button--start {
  position: absolute;
  bottom: 12%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 400px;
  text-align: center;
  box-shadow: 1px 5px 2px rgba(0, 0, 0, 0.4); }

.c-button__shine {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 1%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.95) 70%, rgba(255, 255, 255, 0.95) 71%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
  /* IE6-9 */
  width: 15%;
  height: 100%;
  -webkit-transform: skew(-10deg, 0deg);
          transform: skew(-10deg, 0deg);
  -webkit-animation: move 2s;
          animation: move 2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1; }

/*  */
@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0; }
  5% {
    opacity: 0.0; }
  48% {
    opacity: 0.4; }
  80% {
    opacity: 0.0; }
  100% {
    left: 82%; } }
@keyframes move {
  0% {
    left: 0;
    opacity: 0; }
  5% {
    opacity: 0.0; }
  48% {
    opacity: 0.4; }
  80% {
    opacity: 0.0; }
  100% {
    left: 82%; } }

.c-button--play {
  position: absolute;
  left: 50%;
  top: 30%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #D3BD7B;
  border-radius: 50%; }
  .c-button--play:after {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-40%, -50%);
            transform: translate(-40%, -50%);
    content: '';
    width: 40px;
    height: 40px;
    border-style: solid;
    border-width: 20px 0px 20px 40px;
    border-color: transparent transparent transparent #2B2B2B; }

.c-button--file {
  position: absolute;
  top: 8%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border: 1px solid #CAB168;
  border-bottom: none;
  padding: 0.25rem 1rem 0.5rem;
  background: #ebe0be;
  box-shadow: 3px -1px 2px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease-in-out;
  cursor: pointer;
  background: #000000;
  color: #D3BD7B;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5; }
  .c-button--file:hover {
    opacity: 0.8;
    color: #CAB168; }
  @media all and (min-width: 51.5em) {
    .c-button--file {
      left: auto;
      right: 35rem;
      top: -2.75rem;
      font-size: 1.25rem;
      line-height: 1.2;
      padding: 0.5rem 2rem 0.75rem;
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
      -webkit-transform-origin: bottom right;
              transform-origin: bottom right; } }
  .c-button--file.toggled {
    background: #CAB168;
    color: #ebe0be; }

/*
SOCPES.RATIO
----

[HIGHLY EXPERIEMENTAL]
Put any parent/childrend divs on flexbox steroids;

Why the scope and not modifier classes?
Sincerly I don't know.

Still haven't find a better way to give the flexibility and order independence
of the data attributes. Also some styles are scoped so that the [data-flex-item]
isn't required. But this could be changed

By default, reponsive breakpoints are based on the selected grid breakpoints


* ========================================================================== */
/* Flex container */
[data-flout] {
  display: flex;
  flex-wrap: wrap; }

/* Flow
========================================================================== */
[data-flout*="nowrap--"] {
  flex-wrap: nowrap; }

[data-flout*="wrap-reverse--"] {
  flex-wrap: wrap-reverse; }

[data-flout*="row--"] {
  flex-direction: row; }

[data-flout*="row-reverse--"] {
  flex-direction: row-reverse; }

[data-flout*="col--"] {
  flex-direction: column; }

[data-flout*="col-reverse--"] {
  flex-direction: column-reverse; }

@media all and (min-width: 37.5em) {
  [data-flout*="nowrap@xs--"] {
    flex-wrap: nowrap; }
  [data-flout*="wrap-reverse@xs--"] {
    flex-wrap: wrap-reverse; }
  [data-flout*="row@xs--"] {
    flex-direction: row; }
  [data-flout*="row-reverse@xs--"] {
    flex-direction: row-reverse; }
  [data-flout*="col@xs--"] {
    flex-direction: column; }
  [data-flout*="col-reverse@xs--"] {
    flex-direction: column-reverse; } }

@media all and (min-width: 48em) {
  [data-flout*="nowrap@sm--"] {
    flex-wrap: nowrap; }
  [data-flout*="wrap-reverse@sm--"] {
    flex-wrap: wrap-reverse; }
  [data-flout*="row@sm--"] {
    flex-direction: row; }
  [data-flout*="row-reverse@sm--"] {
    flex-direction: row-reverse; }
  [data-flout*="col@sm--"] {
    flex-direction: column; }
  [data-flout*="col-reverse@sm--"] {
    flex-direction: column-reverse; } }

@media all and (min-width: 51.5em) {
  [data-flout*="nowrap@sml--"] {
    flex-wrap: nowrap; }
  [data-flout*="wrap-reverse@sml--"] {
    flex-wrap: wrap-reverse; }
  [data-flout*="row@sml--"] {
    flex-direction: row; }
  [data-flout*="row-reverse@sml--"] {
    flex-direction: row-reverse; }
  [data-flout*="col@sml--"] {
    flex-direction: column; }
  [data-flout*="col-reverse@sml--"] {
    flex-direction: column-reverse; } }

@media all and (min-width: 62em) {
  [data-flout*="nowrap@md--"] {
    flex-wrap: nowrap; }
  [data-flout*="wrap-reverse@md--"] {
    flex-wrap: wrap-reverse; }
  [data-flout*="row@md--"] {
    flex-direction: row; }
  [data-flout*="row-reverse@md--"] {
    flex-direction: row-reverse; }
  [data-flout*="col@md--"] {
    flex-direction: column; }
  [data-flout*="col-reverse@md--"] {
    flex-direction: column-reverse; } }

@media all and (min-width: 64em) {
  [data-flout*="nowrap@mdl--"] {
    flex-wrap: nowrap; }
  [data-flout*="wrap-reverse@mdl--"] {
    flex-wrap: wrap-reverse; }
  [data-flout*="row@mdl--"] {
    flex-direction: row; }
  [data-flout*="row-reverse@mdl--"] {
    flex-direction: row-reverse; }
  [data-flout*="col@mdl--"] {
    flex-direction: column; }
  [data-flout*="col-reverse@mdl--"] {
    flex-direction: column-reverse; } }

@media all and (min-width: 75em) {
  [data-flout*="nowrap@lg--"] {
    flex-wrap: nowrap; }
  [data-flout*="wrap-reverse@lg--"] {
    flex-wrap: wrap-reverse; }
  [data-flout*="row@lg--"] {
    flex-direction: row; }
  [data-flout*="row-reverse@lg--"] {
    flex-direction: row-reverse; }
  [data-flout*="col@lg--"] {
    flex-direction: column; }
  [data-flout*="col-reverse@lg--"] {
    flex-direction: column-reverse; } }

@media all and (min-width: 90em) {
  [data-flout*="nowrap@xl--"] {
    flex-wrap: nowrap; }
  [data-flout*="wrap-reverse@xl--"] {
    flex-wrap: wrap-reverse; }
  [data-flout*="row@xl--"] {
    flex-direction: row; }
  [data-flout*="row-reverse@xl--"] {
    flex-direction: row-reverse; }
  [data-flout*="col@xl--"] {
    flex-direction: column; }
  [data-flout*="col-reverse@xl--"] {
    flex-direction: column-reverse; } }

/* Vertical alignment
========================================================================== */
[data-flout*="top--"] {
  align-items: flex-start; }

[data-flout*="middle--"] {
  align-items: center; }

[data-flout*="bottom--"] {
  align-items: flex-end; }

[data-flout*="baseline--"] {
  align-items: baseline; }

@media all and (min-width: 37.5em) {
  [data-flout*="top@xs--"] {
    align-items: flex-start; }
  [data-flout*="middle@xs--"] {
    align-items: center; }
  [data-flout*="bottom@xs--"] {
    align-items: flex-end; }
  [data-flout*="baseline@xs--"] {
    align-items: baseline; } }

@media all and (min-width: 48em) {
  [data-flout*="top@sm--"] {
    align-items: flex-start; }
  [data-flout*="middle@sm--"] {
    align-items: center; }
  [data-flout*="bottom@sm--"] {
    align-items: flex-end; }
  [data-flout*="baseline@sm--"] {
    align-items: baseline; } }

@media all and (min-width: 51.5em) {
  [data-flout*="top@sml--"] {
    align-items: flex-start; }
  [data-flout*="middle@sml--"] {
    align-items: center; }
  [data-flout*="bottom@sml--"] {
    align-items: flex-end; }
  [data-flout*="baseline@sml--"] {
    align-items: baseline; } }

@media all and (min-width: 62em) {
  [data-flout*="top@md--"] {
    align-items: flex-start; }
  [data-flout*="middle@md--"] {
    align-items: center; }
  [data-flout*="bottom@md--"] {
    align-items: flex-end; }
  [data-flout*="baseline@md--"] {
    align-items: baseline; } }

@media all and (min-width: 64em) {
  [data-flout*="top@mdl--"] {
    align-items: flex-start; }
  [data-flout*="middle@mdl--"] {
    align-items: center; }
  [data-flout*="bottom@mdl--"] {
    align-items: flex-end; }
  [data-flout*="baseline@mdl--"] {
    align-items: baseline; } }

@media all and (min-width: 75em) {
  [data-flout*="top@lg--"] {
    align-items: flex-start; }
  [data-flout*="middle@lg--"] {
    align-items: center; }
  [data-flout*="bottom@lg--"] {
    align-items: flex-end; }
  [data-flout*="baseline@lg--"] {
    align-items: baseline; } }

@media all and (min-width: 90em) {
  [data-flout*="top@xl--"] {
    align-items: flex-start; }
  [data-flout*="middle@xl--"] {
    align-items: center; }
  [data-flout*="bottom@xl--"] {
    align-items: flex-end; }
  [data-flout*="baseline@xl--"] {
    align-items: baseline; } }

/* Multi-row alignment
========================================================================== */
[data-flout*="content-start--"] {
  align-content: flex-start; }

[data-flout*="content-center--"] {
  align-content: center; }

[data-flout*="content-end--"] {
  align-content: flex-end; }

[data-flout*="content-around--"] {
  align-content: space-around; }

[data-flout*="content-between--"] {
  align-content: space-between; }

@media all and (min-width: 37.5em) {
  [data-flout*="content-start@xs--"] {
    align-content: flex-start; }
  [data-flout*="content-center@xs--"] {
    align-content: center; }
  [data-flout*="content-end@xs--"] {
    align-content: flex-end; }
  [data-flout*="content-around@xs--"] {
    align-content: space-around; }
  [data-flout*="content-between@xs--"] {
    align-content: space-between; } }

@media all and (min-width: 48em) {
  [data-flout*="content-start@sm--"] {
    align-content: flex-start; }
  [data-flout*="content-center@sm--"] {
    align-content: center; }
  [data-flout*="content-end@sm--"] {
    align-content: flex-end; }
  [data-flout*="content-around@sm--"] {
    align-content: space-around; }
  [data-flout*="content-between@sm--"] {
    align-content: space-between; } }

@media all and (min-width: 51.5em) {
  [data-flout*="content-start@sml--"] {
    align-content: flex-start; }
  [data-flout*="content-center@sml--"] {
    align-content: center; }
  [data-flout*="content-end@sml--"] {
    align-content: flex-end; }
  [data-flout*="content-around@sml--"] {
    align-content: space-around; }
  [data-flout*="content-between@sml--"] {
    align-content: space-between; } }

@media all and (min-width: 62em) {
  [data-flout*="content-start@md--"] {
    align-content: flex-start; }
  [data-flout*="content-center@md--"] {
    align-content: center; }
  [data-flout*="content-end@md--"] {
    align-content: flex-end; }
  [data-flout*="content-around@md--"] {
    align-content: space-around; }
  [data-flout*="content-between@md--"] {
    align-content: space-between; } }

@media all and (min-width: 64em) {
  [data-flout*="content-start@mdl--"] {
    align-content: flex-start; }
  [data-flout*="content-center@mdl--"] {
    align-content: center; }
  [data-flout*="content-end@mdl--"] {
    align-content: flex-end; }
  [data-flout*="content-around@mdl--"] {
    align-content: space-around; }
  [data-flout*="content-between@mdl--"] {
    align-content: space-between; } }

@media all and (min-width: 75em) {
  [data-flout*="content-start@lg--"] {
    align-content: flex-start; }
  [data-flout*="content-center@lg--"] {
    align-content: center; }
  [data-flout*="content-end@lg--"] {
    align-content: flex-end; }
  [data-flout*="content-around@lg--"] {
    align-content: space-around; }
  [data-flout*="content-between@lg--"] {
    align-content: space-between; } }

@media all and (min-width: 90em) {
  [data-flout*="content-start@xl--"] {
    align-content: flex-start; }
  [data-flout*="content-center@xl--"] {
    align-content: center; }
  [data-flout*="content-end@xl--"] {
    align-content: flex-end; }
  [data-flout*="content-around@xl--"] {
    align-content: space-around; }
  [data-flout*="content-between@xl--"] {
    align-content: space-between; } }

/* Horizontal alignment
========================================================================== */
[data-flout*="start--"] {
  justify-content: flex-start; }

[data-flout*="center--"] {
  justify-content: center; }

[data-flout*="end--"] {
  justify-content: flex-end; }

[data-flout*="around--"] {
  justify-content: space-around; }

[data-flout*="between--"] {
  justify-content: space-between; }

@media all and (min-width: 37.5em) {
  [data-flout*="start@xs--"] {
    justify-content: flex-start; }
  [data-flout*="center@xs--"] {
    justify-content: center; }
  [data-flout*="end@xs--"] {
    justify-content: flex-end; }
  [data-flout*="around@xs--"] {
    justify-content: space-around; }
  [data-flout*="between@xs--"] {
    justify-content: space-between; } }

@media all and (min-width: 48em) {
  [data-flout*="start@sm--"] {
    justify-content: flex-start; }
  [data-flout*="center@sm--"] {
    justify-content: center; }
  [data-flout*="end@sm--"] {
    justify-content: flex-end; }
  [data-flout*="around@sm--"] {
    justify-content: space-around; }
  [data-flout*="between@sm--"] {
    justify-content: space-between; } }

@media all and (min-width: 51.5em) {
  [data-flout*="start@sml--"] {
    justify-content: flex-start; }
  [data-flout*="center@sml--"] {
    justify-content: center; }
  [data-flout*="end@sml--"] {
    justify-content: flex-end; }
  [data-flout*="around@sml--"] {
    justify-content: space-around; }
  [data-flout*="between@sml--"] {
    justify-content: space-between; } }

@media all and (min-width: 62em) {
  [data-flout*="start@md--"] {
    justify-content: flex-start; }
  [data-flout*="center@md--"] {
    justify-content: center; }
  [data-flout*="end@md--"] {
    justify-content: flex-end; }
  [data-flout*="around@md--"] {
    justify-content: space-around; }
  [data-flout*="between@md--"] {
    justify-content: space-between; } }

@media all and (min-width: 64em) {
  [data-flout*="start@mdl--"] {
    justify-content: flex-start; }
  [data-flout*="center@mdl--"] {
    justify-content: center; }
  [data-flout*="end@mdl--"] {
    justify-content: flex-end; }
  [data-flout*="around@mdl--"] {
    justify-content: space-around; }
  [data-flout*="between@mdl--"] {
    justify-content: space-between; } }

@media all and (min-width: 75em) {
  [data-flout*="start@lg--"] {
    justify-content: flex-start; }
  [data-flout*="center@lg--"] {
    justify-content: center; }
  [data-flout*="end@lg--"] {
    justify-content: flex-end; }
  [data-flout*="around@lg--"] {
    justify-content: space-around; }
  [data-flout*="between@lg--"] {
    justify-content: space-between; } }

@media all and (min-width: 90em) {
  [data-flout*="start@xl--"] {
    justify-content: flex-start; }
  [data-flout*="center@xl--"] {
    justify-content: center; }
  [data-flout*="end@xl--"] {
    justify-content: flex-end; }
  [data-flout*="around@xl--"] {
    justify-content: space-around; }
  [data-flout*="between@xl--"] {
    justify-content: space-between; } }

/* Layout items
========================================================================== */
[data-flout__el*="first--"] {
  order: -1; }

[data-flout__el*="last--"] {
  order: 9999; }

@media all and (min-width: 37.5em) {
  [data-flout__el*="first@xs--"] {
    order: -1; }
  [data-flout__el*="last@xs--"] {
    order: 9999; } }

@media all and (min-width: 48em) {
  [data-flout__el*="first@sm--"] {
    order: -1; }
  [data-flout__el*="last@sm--"] {
    order: 9999; } }

@media all and (min-width: 51.5em) {
  [data-flout__el*="first@sml--"] {
    order: -1; }
  [data-flout__el*="last@sml--"] {
    order: 9999; } }

@media all and (min-width: 62em) {
  [data-flout__el*="first@md--"] {
    order: -1; }
  [data-flout__el*="last@md--"] {
    order: 9999; } }

@media all and (min-width: 64em) {
  [data-flout__el*="first@mdl--"] {
    order: -1; }
  [data-flout__el*="last@mdl--"] {
    order: 9999; } }

@media all and (min-width: 75em) {
  [data-flout__el*="first@lg--"] {
    order: -1; }
  [data-flout__el*="last@lg--"] {
    order: 9999; } }

@media all and (min-width: 90em) {
  [data-flout__el*="first@xl--"] {
    order: -1; }
  [data-flout__el*="last@xl--"] {
    order: 9999; } }

[data-flout__el*="top--"] {
  align-self: flex-start; }

[data-flout__el*="middle--"] {
  -ms-grid-row-align: center;
      align-self: center; }

[data-flout__el*="bottom--"] {
  align-self: flex-end; }

[data-flout__el*="baseline--"] {
  align-self: baseline; }

@media all and (min-width: 37.5em) {
  [data-flout__el*="top@xs--"] {
    align-self: flex-start; }
  [data-flout__el*="middle@xs--"] {
    -ms-grid-row-align: center;
        align-self: center; }
  [data-flout__el*="bottom@xs--"] {
    align-self: flex-end; }
  [data-flout__el*="baseline@xs--"] {
    align-self: baseline; } }

@media all and (min-width: 48em) {
  [data-flout__el*="top@sm--"] {
    align-self: flex-start; }
  [data-flout__el*="middle@sm--"] {
    -ms-grid-row-align: center;
        align-self: center; }
  [data-flout__el*="bottom@sm--"] {
    align-self: flex-end; }
  [data-flout__el*="baseline@sm--"] {
    align-self: baseline; } }

@media all and (min-width: 51.5em) {
  [data-flout__el*="top@sml--"] {
    align-self: flex-start; }
  [data-flout__el*="middle@sml--"] {
    -ms-grid-row-align: center;
        align-self: center; }
  [data-flout__el*="bottom@sml--"] {
    align-self: flex-end; }
  [data-flout__el*="baseline@sml--"] {
    align-self: baseline; } }

@media all and (min-width: 62em) {
  [data-flout__el*="top@md--"] {
    align-self: flex-start; }
  [data-flout__el*="middle@md--"] {
    -ms-grid-row-align: center;
        align-self: center; }
  [data-flout__el*="bottom@md--"] {
    align-self: flex-end; }
  [data-flout__el*="baseline@md--"] {
    align-self: baseline; } }

@media all and (min-width: 64em) {
  [data-flout__el*="top@mdl--"] {
    align-self: flex-start; }
  [data-flout__el*="middle@mdl--"] {
    -ms-grid-row-align: center;
        align-self: center; }
  [data-flout__el*="bottom@mdl--"] {
    align-self: flex-end; }
  [data-flout__el*="baseline@mdl--"] {
    align-self: baseline; } }

@media all and (min-width: 75em) {
  [data-flout__el*="top@lg--"] {
    align-self: flex-start; }
  [data-flout__el*="middle@lg--"] {
    -ms-grid-row-align: center;
        align-self: center; }
  [data-flout__el*="bottom@lg--"] {
    align-self: flex-end; }
  [data-flout__el*="baseline@lg--"] {
    align-self: baseline; } }

@media all and (min-width: 90em) {
  [data-flout__el*="top@xl--"] {
    align-self: flex-start; }
  [data-flout__el*="middle@xl--"] {
    -ms-grid-row-align: center;
        align-self: center; }
  [data-flout__el*="bottom@xl--"] {
    align-self: flex-end; }
  [data-flout__el*="baseline@xl--"] {
    align-self: baseline; } }

[data-flout__el*="shy-left--"] {
  margin-left: auto; }

[data-flout__el*="shy-right--"] {
  margin-right: auto; }

@media all and (min-width: 37.5em) {
  [data-flout__el*="shy-left@xs--"] {
    margin-left: auto; }
  [data-flout__el*="shy-right@xs--"] {
    margin-right: auto; } }

@media all and (min-width: 48em) {
  [data-flout__el*="shy-left@sm--"] {
    margin-left: auto; }
  [data-flout__el*="shy-right@sm--"] {
    margin-right: auto; } }

@media all and (min-width: 51.5em) {
  [data-flout__el*="shy-left@sml--"] {
    margin-left: auto; }
  [data-flout__el*="shy-right@sml--"] {
    margin-right: auto; } }

@media all and (min-width: 62em) {
  [data-flout__el*="shy-left@md--"] {
    margin-left: auto; }
  [data-flout__el*="shy-right@md--"] {
    margin-right: auto; } }

@media all and (min-width: 64em) {
  [data-flout__el*="shy-left@mdl--"] {
    margin-left: auto; }
  [data-flout__el*="shy-right@mdl--"] {
    margin-right: auto; } }

@media all and (min-width: 75em) {
  [data-flout__el*="shy-left@lg--"] {
    margin-left: auto; }
  [data-flout__el*="shy-right@lg--"] {
    margin-right: auto; } }

@media all and (min-width: 90em) {
  [data-flout__el*="shy-left@xl--"] {
    margin-left: auto; }
  [data-flout__el*="shy-right@xl--"] {
    margin-right: auto; } }

[data-flout__el*="grow--"] {
  flex-grow: 1; }

[data-flout__el*="shrink--"] {
  flex-shrink: 1; }

[data-flout__el*="expand--"] {
  flex: 1 0 0px; }

@media all and (min-width: 37.5em) {
  [data-flout__el*="grow@xs--"] {
    flex-grow: 1; }
  [data-flout__el*="shrink@xs--"] {
    flex-shrink: 1; } }

@media all and (min-width: 48em) {
  [data-flout__el*="grow@sm--"] {
    flex-grow: 1; }
  [data-flout__el*="shrink@sm--"] {
    flex-shrink: 1; } }

@media all and (min-width: 51.5em) {
  [data-flout__el*="grow@sml--"] {
    flex-grow: 1; }
  [data-flout__el*="shrink@sml--"] {
    flex-shrink: 1; } }

@media all and (min-width: 62em) {
  [data-flout__el*="grow@md--"] {
    flex-grow: 1; }
  [data-flout__el*="shrink@md--"] {
    flex-shrink: 1; } }

@media all and (min-width: 64em) {
  [data-flout__el*="grow@mdl--"] {
    flex-grow: 1; }
  [data-flout__el*="shrink@mdl--"] {
    flex-shrink: 1; } }

@media all and (min-width: 75em) {
  [data-flout__el*="grow@lg--"] {
    flex-grow: 1; }
  [data-flout__el*="shrink@lg--"] {
    flex-shrink: 1; } }

@media all and (min-width: 90em) {
  [data-flout__el*="grow@xl--"] {
    flex-grow: 1; }
  [data-flout__el*="shrink@xl--"] {
    flex-shrink: 1; } }

[data-flout__el*="hide--"] {
  display: none; }

[data-flout__el*="show--"] {
  display: flex; }

@media all and (min-width: 37.5em) {
  [data-flout__el*="hide@xs--"] {
    display: none; }
  [data-flout__el*="show@xs--"] {
    display: flex; } }

@media all and (min-width: 48em) {
  [data-flout__el*="hide@sm--"] {
    display: none; }
  [data-flout__el*="show@sm--"] {
    display: flex; } }

@media all and (min-width: 51.5em) {
  [data-flout__el*="hide@sml--"] {
    display: none; }
  [data-flout__el*="show@sml--"] {
    display: flex; } }

@media all and (min-width: 62em) {
  [data-flout__el*="hide@md--"] {
    display: none; }
  [data-flout__el*="show@md--"] {
    display: flex; } }

@media all and (min-width: 64em) {
  [data-flout__el*="hide@mdl--"] {
    display: none; }
  [data-flout__el*="show@mdl--"] {
    display: flex; } }

@media all and (min-width: 75em) {
  [data-flout__el*="hide@lg--"] {
    display: none; }
  [data-flout__el*="show@lg--"] {
    display: flex; } }

@media all and (min-width: 90em) {
  [data-flout__el*="hide@xl--"] {
    display: none; }
  [data-flout__el*="show@xl--"] {
    display: flex; } }

[data-flout*="match-height--"] {
  align-items: inherit; }
  [data-flout*="match-height--"] > * {
    display: flex;
    flex-direction: column; }

.u-hidden {
  display: none; }

@media all and (min-width: 37.5em) {
  .u-hidden-\@xs {
    display: none; } }

@media all and (min-width: 48em) {
  .u-hidden-\@sm {
    display: none; } }

@media all and (min-width: 51.5em) {
  .u-hidden-\@sml {
    display: none; } }

@media all and (min-width: 62em) {
  .u-hidden-\@md {
    display: none; } }

@media all and (min-width: 64em) {
  .u-hidden-\@mdl {
    display: none; } }

@media all and (min-width: 75em) {
  .u-hidden-\@lg {
    display: none; } }

@media all and (min-width: 90em) {
  .u-hidden-\@xl {
    display: none; } }

[hidden] {
  display: none; }

@media all and (min-width: 37.5em) {
  .u-visible-\@xs {
    display: initial; } }
  @media all and (min-width: 37.5em) and (-ms-high-contrast: none) {
    .u-visible-\@xs {
      display: inherit; } }

@media all and (min-width: 48em) {
  .u-visible-\@sm {
    display: initial; } }
  @media all and (min-width: 48em) and (-ms-high-contrast: none) {
    .u-visible-\@sm {
      display: inherit; } }

@media all and (min-width: 51.5em) {
  .u-visible-\@sml {
    display: initial; } }
  @media all and (min-width: 51.5em) and (-ms-high-contrast: none) {
    .u-visible-\@sml {
      display: inherit; } }

@media all and (min-width: 62em) {
  .u-visible-\@md {
    display: initial; } }
  @media all and (min-width: 62em) and (-ms-high-contrast: none) {
    .u-visible-\@md {
      display: inherit; } }

@media all and (min-width: 64em) {
  .u-visible-\@mdl {
    display: initial; } }
  @media all and (min-width: 64em) and (-ms-high-contrast: none) {
    .u-visible-\@mdl {
      display: inherit; } }

@media all and (min-width: 75em) {
  .u-visible-\@lg {
    display: initial; } }
  @media all and (min-width: 75em) and (-ms-high-contrast: none) {
    .u-visible-\@lg {
      display: inherit; } }

@media all and (min-width: 90em) {
  .u-visible-\@xl {
    display: initial; } }
  @media all and (min-width: 90em) and (-ms-high-contrast: none) {
    .u-visible-\@xl {
      display: inherit; } }

.u-z-positive {
  z-index: 1; }

.u-z-negative {
  z-index: -1; }

.u-bg-dark {
  background: #000000; }

.u-bg-slide, .u-intro-slide, .u-question-slide, .u-result-slide, .o-score__share {
  transition: opacity 0.8s ease-in-out,  -webkit-transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out,  opacity 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out,  opacity 0.8s ease-in-out,  -webkit-transform 0.8s ease-in-out; }
  .u-bg-slide.slide-in, .u-intro-slide.slide-in, .u-question-slide.slide-in, .u-result-slide.slide-in, .o-score__share.slide-in {
    -webkit-transform: translateX(0%);
            transform: translateX(0%); }
  .u-bg-slide.slide-center, .u-intro-slide.slide-center, .u-question-slide.slide-center, .u-result-slide.slide-center, .o-score__share.slide-center {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  @media all and (min-width: 37.5em) {
    .u-bg-slide.slide-right, .u-intro-slide.slide-right, .u-question-slide.slide-right, .u-result-slide.slide-right, .o-score__share.slide-right {
      -webkit-transform: translateX(-25%);
              transform: translateX(-25%); } }
  .u-bg-slide.slide-out-r, .u-intro-slide.slide-out-r, .u-question-slide.slide-out-r, .u-result-slide.slide-out-r, .o-score__share.slide-out-r {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); }
  .u-bg-slide.slide-out-l, .u-intro-slide.slide-out-l, .u-question-slide.slide-out-l, .u-result-slide.slide-out-l, .o-score__share.slide-out-l {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  .u-bg-slide.fade-out, .u-intro-slide.fade-out, .u-question-slide.fade-out, .u-result-slide.fade-out, .o-score__share.fade-out {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0; }

.temp-logic {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 20%;
  font-size: 20px !important;
  z-index: 2000; }

/*
    UTILITES.SIZING
    ----

   By default responsive breakpoints are based on the grid/layout breakpoints
* ========================================================================== */
/*
   Grid based utility classes
   ---

   Sizing usage:
      <div class="u-6/12@lg u-8/12@sm u-7/12@lg"></div>

   Offeset usage:
      <div class="u-6/12 u-push-2/12@sm"></div>
 * ========================================================================== */
.u-size-1\/12 {
  width: 8.33333%; }

[data-flout] > .u-size-1\/12,
[data-flout__el].u-size-1\/12,
.u-size-1\/12-flexi {
  flex-basis: 8.33333%;
  max-width: 8.33333%; }

.u-offset-1\/12,
.u-push-1\/12 {
  margin-left: 8.33333%; }

.u-size-2\/12 {
  width: 16.66667%; }

[data-flout] > .u-size-2\/12,
[data-flout__el].u-size-2\/12,
.u-size-2\/12-flexi {
  flex-basis: 16.66667%;
  max-width: 16.66667%; }

.u-offset-2\/12,
.u-push-2\/12 {
  margin-left: 16.66667%; }

.u-size-3\/12 {
  width: 25%; }

[data-flout] > .u-size-3\/12,
[data-flout__el].u-size-3\/12,
.u-size-3\/12-flexi {
  flex-basis: 25%;
  max-width: 25%; }

.u-offset-3\/12,
.u-push-3\/12 {
  margin-left: 25%; }

.u-size-4\/12 {
  width: 33.33333%; }

[data-flout] > .u-size-4\/12,
[data-flout__el].u-size-4\/12,
.u-size-4\/12-flexi {
  flex-basis: 33.33333%;
  max-width: 33.33333%; }

.u-offset-4\/12,
.u-push-4\/12 {
  margin-left: 33.33333%; }

.u-size-5\/12 {
  width: 41.66667%; }

[data-flout] > .u-size-5\/12,
[data-flout__el].u-size-5\/12,
.u-size-5\/12-flexi {
  flex-basis: 41.66667%;
  max-width: 41.66667%; }

.u-offset-5\/12,
.u-push-5\/12 {
  margin-left: 41.66667%; }

.u-size-6\/12 {
  width: 50%; }

[data-flout] > .u-size-6\/12,
[data-flout__el].u-size-6\/12,
.u-size-6\/12-flexi {
  flex-basis: 50%;
  max-width: 50%; }

.u-offset-6\/12,
.u-push-6\/12 {
  margin-left: 50%; }

.u-size-7\/12 {
  width: 58.33333%; }

[data-flout] > .u-size-7\/12,
[data-flout__el].u-size-7\/12,
.u-size-7\/12-flexi {
  flex-basis: 58.33333%;
  max-width: 58.33333%; }

.u-offset-7\/12,
.u-push-7\/12 {
  margin-left: 58.33333%; }

.u-size-8\/12 {
  width: 66.66667%; }

[data-flout] > .u-size-8\/12,
[data-flout__el].u-size-8\/12,
.u-size-8\/12-flexi {
  flex-basis: 66.66667%;
  max-width: 66.66667%; }

.u-offset-8\/12,
.u-push-8\/12 {
  margin-left: 66.66667%; }

.u-size-9\/12 {
  width: 75%; }

[data-flout] > .u-size-9\/12,
[data-flout__el].u-size-9\/12,
.u-size-9\/12-flexi {
  flex-basis: 75%;
  max-width: 75%; }

.u-offset-9\/12,
.u-push-9\/12 {
  margin-left: 75%; }

.u-size-10\/12 {
  width: 83.33333%; }

[data-flout] > .u-size-10\/12,
[data-flout__el].u-size-10\/12,
.u-size-10\/12-flexi {
  flex-basis: 83.33333%;
  max-width: 83.33333%; }

.u-offset-10\/12,
.u-push-10\/12 {
  margin-left: 83.33333%; }

.u-size-11\/12 {
  width: 91.66667%; }

[data-flout] > .u-size-11\/12,
[data-flout__el].u-size-11\/12,
.u-size-11\/12-flexi {
  flex-basis: 91.66667%;
  max-width: 91.66667%; }

.u-offset-11\/12,
.u-push-11\/12 {
  margin-left: 91.66667%; }

.u-size-12\/12 {
  width: 100%; }

[data-flout] > .u-size-12\/12,
[data-flout__el].u-size-12\/12,
.u-size-12\/12-flexi {
  flex-basis: 100%;
  max-width: 100%; }

.u-offset-12\/12,
.u-push-12\/12 {
  margin-left: 100%; }

@media all and (min-width: 37.5em) {
  .u-size-1\/12\@xs {
    width: 8.33333%; }
  [data-flout] > .u-size-1\/12\@xs,
  [data-flout__el].u-size-1\/12\@xs,
  .u-size-1\/12\@xs-flexi {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .u-offset-1\/12\@xs,
  .u-push-1\/12\@xs {
    margin-left: 8.33333%; }
  .u-size-2\/12\@xs {
    width: 16.66667%; }
  [data-flout] > .u-size-2\/12\@xs,
  [data-flout__el].u-size-2\/12\@xs,
  .u-size-2\/12\@xs-flexi {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .u-offset-2\/12\@xs,
  .u-push-2\/12\@xs {
    margin-left: 16.66667%; }
  .u-size-3\/12\@xs {
    width: 25%; }
  [data-flout] > .u-size-3\/12\@xs,
  [data-flout__el].u-size-3\/12\@xs,
  .u-size-3\/12\@xs-flexi {
    flex-basis: 25%;
    max-width: 25%; }
  .u-offset-3\/12\@xs,
  .u-push-3\/12\@xs {
    margin-left: 25%; }
  .u-size-4\/12\@xs {
    width: 33.33333%; }
  [data-flout] > .u-size-4\/12\@xs,
  [data-flout__el].u-size-4\/12\@xs,
  .u-size-4\/12\@xs-flexi {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .u-offset-4\/12\@xs,
  .u-push-4\/12\@xs {
    margin-left: 33.33333%; }
  .u-size-5\/12\@xs {
    width: 41.66667%; }
  [data-flout] > .u-size-5\/12\@xs,
  [data-flout__el].u-size-5\/12\@xs,
  .u-size-5\/12\@xs-flexi {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .u-offset-5\/12\@xs,
  .u-push-5\/12\@xs {
    margin-left: 41.66667%; }
  .u-size-6\/12\@xs {
    width: 50%; }
  [data-flout] > .u-size-6\/12\@xs,
  [data-flout__el].u-size-6\/12\@xs,
  .u-size-6\/12\@xs-flexi {
    flex-basis: 50%;
    max-width: 50%; }
  .u-offset-6\/12\@xs,
  .u-push-6\/12\@xs {
    margin-left: 50%; }
  .u-size-7\/12\@xs {
    width: 58.33333%; }
  [data-flout] > .u-size-7\/12\@xs,
  [data-flout__el].u-size-7\/12\@xs,
  .u-size-7\/12\@xs-flexi {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .u-offset-7\/12\@xs,
  .u-push-7\/12\@xs {
    margin-left: 58.33333%; }
  .u-size-8\/12\@xs {
    width: 66.66667%; }
  [data-flout] > .u-size-8\/12\@xs,
  [data-flout__el].u-size-8\/12\@xs,
  .u-size-8\/12\@xs-flexi {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .u-offset-8\/12\@xs,
  .u-push-8\/12\@xs {
    margin-left: 66.66667%; }
  .u-size-9\/12\@xs {
    width: 75%; }
  [data-flout] > .u-size-9\/12\@xs,
  [data-flout__el].u-size-9\/12\@xs,
  .u-size-9\/12\@xs-flexi {
    flex-basis: 75%;
    max-width: 75%; }
  .u-offset-9\/12\@xs,
  .u-push-9\/12\@xs {
    margin-left: 75%; }
  .u-size-10\/12\@xs {
    width: 83.33333%; }
  [data-flout] > .u-size-10\/12\@xs,
  [data-flout__el].u-size-10\/12\@xs,
  .u-size-10\/12\@xs-flexi {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .u-offset-10\/12\@xs,
  .u-push-10\/12\@xs {
    margin-left: 83.33333%; }
  .u-size-11\/12\@xs {
    width: 91.66667%; }
  [data-flout] > .u-size-11\/12\@xs,
  [data-flout__el].u-size-11\/12\@xs,
  .u-size-11\/12\@xs-flexi {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .u-offset-11\/12\@xs,
  .u-push-11\/12\@xs {
    margin-left: 91.66667%; }
  .u-size-12\/12\@xs {
    width: 100%; }
  [data-flout] > .u-size-12\/12\@xs,
  [data-flout__el].u-size-12\/12\@xs,
  .u-size-12\/12\@xs-flexi {
    flex-basis: 100%;
    max-width: 100%; }
  .u-offset-12\/12\@xs,
  .u-push-12\/12\@xs {
    margin-left: 100%; } }

@media all and (min-width: 48em) {
  .u-size-1\/12\@sm {
    width: 8.33333%; }
  [data-flout] > .u-size-1\/12\@sm,
  [data-flout__el].u-size-1\/12\@sm,
  .u-size-1\/12\@sm-flexi {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .u-offset-1\/12\@sm,
  .u-push-1\/12\@sm {
    margin-left: 8.33333%; }
  .u-size-2\/12\@sm {
    width: 16.66667%; }
  [data-flout] > .u-size-2\/12\@sm,
  [data-flout__el].u-size-2\/12\@sm,
  .u-size-2\/12\@sm-flexi {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .u-offset-2\/12\@sm,
  .u-push-2\/12\@sm {
    margin-left: 16.66667%; }
  .u-size-3\/12\@sm {
    width: 25%; }
  [data-flout] > .u-size-3\/12\@sm,
  [data-flout__el].u-size-3\/12\@sm,
  .u-size-3\/12\@sm-flexi {
    flex-basis: 25%;
    max-width: 25%; }
  .u-offset-3\/12\@sm,
  .u-push-3\/12\@sm {
    margin-left: 25%; }
  .u-size-4\/12\@sm {
    width: 33.33333%; }
  [data-flout] > .u-size-4\/12\@sm,
  [data-flout__el].u-size-4\/12\@sm,
  .u-size-4\/12\@sm-flexi {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .u-offset-4\/12\@sm,
  .u-push-4\/12\@sm {
    margin-left: 33.33333%; }
  .u-size-5\/12\@sm {
    width: 41.66667%; }
  [data-flout] > .u-size-5\/12\@sm,
  [data-flout__el].u-size-5\/12\@sm,
  .u-size-5\/12\@sm-flexi {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .u-offset-5\/12\@sm,
  .u-push-5\/12\@sm {
    margin-left: 41.66667%; }
  .u-size-6\/12\@sm {
    width: 50%; }
  [data-flout] > .u-size-6\/12\@sm,
  [data-flout__el].u-size-6\/12\@sm,
  .u-size-6\/12\@sm-flexi {
    flex-basis: 50%;
    max-width: 50%; }
  .u-offset-6\/12\@sm,
  .u-push-6\/12\@sm {
    margin-left: 50%; }
  .u-size-7\/12\@sm {
    width: 58.33333%; }
  [data-flout] > .u-size-7\/12\@sm,
  [data-flout__el].u-size-7\/12\@sm,
  .u-size-7\/12\@sm-flexi {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .u-offset-7\/12\@sm,
  .u-push-7\/12\@sm {
    margin-left: 58.33333%; }
  .u-size-8\/12\@sm {
    width: 66.66667%; }
  [data-flout] > .u-size-8\/12\@sm,
  [data-flout__el].u-size-8\/12\@sm,
  .u-size-8\/12\@sm-flexi {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .u-offset-8\/12\@sm,
  .u-push-8\/12\@sm {
    margin-left: 66.66667%; }
  .u-size-9\/12\@sm {
    width: 75%; }
  [data-flout] > .u-size-9\/12\@sm,
  [data-flout__el].u-size-9\/12\@sm,
  .u-size-9\/12\@sm-flexi {
    flex-basis: 75%;
    max-width: 75%; }
  .u-offset-9\/12\@sm,
  .u-push-9\/12\@sm {
    margin-left: 75%; }
  .u-size-10\/12\@sm {
    width: 83.33333%; }
  [data-flout] > .u-size-10\/12\@sm,
  [data-flout__el].u-size-10\/12\@sm,
  .u-size-10\/12\@sm-flexi {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .u-offset-10\/12\@sm,
  .u-push-10\/12\@sm {
    margin-left: 83.33333%; }
  .u-size-11\/12\@sm {
    width: 91.66667%; }
  [data-flout] > .u-size-11\/12\@sm,
  [data-flout__el].u-size-11\/12\@sm,
  .u-size-11\/12\@sm-flexi {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .u-offset-11\/12\@sm,
  .u-push-11\/12\@sm {
    margin-left: 91.66667%; }
  .u-size-12\/12\@sm {
    width: 100%; }
  [data-flout] > .u-size-12\/12\@sm,
  [data-flout__el].u-size-12\/12\@sm,
  .u-size-12\/12\@sm-flexi {
    flex-basis: 100%;
    max-width: 100%; }
  .u-offset-12\/12\@sm,
  .u-push-12\/12\@sm {
    margin-left: 100%; } }

@media all and (min-width: 51.5em) {
  .u-size-1\/12\@sml {
    width: 8.33333%; }
  [data-flout] > .u-size-1\/12\@sml,
  [data-flout__el].u-size-1\/12\@sml,
  .u-size-1\/12\@sml-flexi {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .u-offset-1\/12\@sml,
  .u-push-1\/12\@sml {
    margin-left: 8.33333%; }
  .u-size-2\/12\@sml {
    width: 16.66667%; }
  [data-flout] > .u-size-2\/12\@sml,
  [data-flout__el].u-size-2\/12\@sml,
  .u-size-2\/12\@sml-flexi {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .u-offset-2\/12\@sml,
  .u-push-2\/12\@sml {
    margin-left: 16.66667%; }
  .u-size-3\/12\@sml {
    width: 25%; }
  [data-flout] > .u-size-3\/12\@sml,
  [data-flout__el].u-size-3\/12\@sml,
  .u-size-3\/12\@sml-flexi {
    flex-basis: 25%;
    max-width: 25%; }
  .u-offset-3\/12\@sml,
  .u-push-3\/12\@sml {
    margin-left: 25%; }
  .u-size-4\/12\@sml {
    width: 33.33333%; }
  [data-flout] > .u-size-4\/12\@sml,
  [data-flout__el].u-size-4\/12\@sml,
  .u-size-4\/12\@sml-flexi {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .u-offset-4\/12\@sml,
  .u-push-4\/12\@sml {
    margin-left: 33.33333%; }
  .u-size-5\/12\@sml {
    width: 41.66667%; }
  [data-flout] > .u-size-5\/12\@sml,
  [data-flout__el].u-size-5\/12\@sml,
  .u-size-5\/12\@sml-flexi {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .u-offset-5\/12\@sml,
  .u-push-5\/12\@sml {
    margin-left: 41.66667%; }
  .u-size-6\/12\@sml {
    width: 50%; }
  [data-flout] > .u-size-6\/12\@sml,
  [data-flout__el].u-size-6\/12\@sml,
  .u-size-6\/12\@sml-flexi {
    flex-basis: 50%;
    max-width: 50%; }
  .u-offset-6\/12\@sml,
  .u-push-6\/12\@sml {
    margin-left: 50%; }
  .u-size-7\/12\@sml {
    width: 58.33333%; }
  [data-flout] > .u-size-7\/12\@sml,
  [data-flout__el].u-size-7\/12\@sml,
  .u-size-7\/12\@sml-flexi {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .u-offset-7\/12\@sml,
  .u-push-7\/12\@sml {
    margin-left: 58.33333%; }
  .u-size-8\/12\@sml {
    width: 66.66667%; }
  [data-flout] > .u-size-8\/12\@sml,
  [data-flout__el].u-size-8\/12\@sml,
  .u-size-8\/12\@sml-flexi {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .u-offset-8\/12\@sml,
  .u-push-8\/12\@sml {
    margin-left: 66.66667%; }
  .u-size-9\/12\@sml {
    width: 75%; }
  [data-flout] > .u-size-9\/12\@sml,
  [data-flout__el].u-size-9\/12\@sml,
  .u-size-9\/12\@sml-flexi {
    flex-basis: 75%;
    max-width: 75%; }
  .u-offset-9\/12\@sml,
  .u-push-9\/12\@sml {
    margin-left: 75%; }
  .u-size-10\/12\@sml {
    width: 83.33333%; }
  [data-flout] > .u-size-10\/12\@sml,
  [data-flout__el].u-size-10\/12\@sml,
  .u-size-10\/12\@sml-flexi {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .u-offset-10\/12\@sml,
  .u-push-10\/12\@sml {
    margin-left: 83.33333%; }
  .u-size-11\/12\@sml {
    width: 91.66667%; }
  [data-flout] > .u-size-11\/12\@sml,
  [data-flout__el].u-size-11\/12\@sml,
  .u-size-11\/12\@sml-flexi {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .u-offset-11\/12\@sml,
  .u-push-11\/12\@sml {
    margin-left: 91.66667%; }
  .u-size-12\/12\@sml {
    width: 100%; }
  [data-flout] > .u-size-12\/12\@sml,
  [data-flout__el].u-size-12\/12\@sml,
  .u-size-12\/12\@sml-flexi {
    flex-basis: 100%;
    max-width: 100%; }
  .u-offset-12\/12\@sml,
  .u-push-12\/12\@sml {
    margin-left: 100%; } }

@media all and (min-width: 62em) {
  .u-size-1\/12\@md {
    width: 8.33333%; }
  [data-flout] > .u-size-1\/12\@md,
  [data-flout__el].u-size-1\/12\@md,
  .u-size-1\/12\@md-flexi {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .u-offset-1\/12\@md,
  .u-push-1\/12\@md {
    margin-left: 8.33333%; }
  .u-size-2\/12\@md {
    width: 16.66667%; }
  [data-flout] > .u-size-2\/12\@md,
  [data-flout__el].u-size-2\/12\@md,
  .u-size-2\/12\@md-flexi {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .u-offset-2\/12\@md,
  .u-push-2\/12\@md {
    margin-left: 16.66667%; }
  .u-size-3\/12\@md {
    width: 25%; }
  [data-flout] > .u-size-3\/12\@md,
  [data-flout__el].u-size-3\/12\@md,
  .u-size-3\/12\@md-flexi {
    flex-basis: 25%;
    max-width: 25%; }
  .u-offset-3\/12\@md,
  .u-push-3\/12\@md {
    margin-left: 25%; }
  .u-size-4\/12\@md {
    width: 33.33333%; }
  [data-flout] > .u-size-4\/12\@md,
  [data-flout__el].u-size-4\/12\@md,
  .u-size-4\/12\@md-flexi {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .u-offset-4\/12\@md,
  .u-push-4\/12\@md {
    margin-left: 33.33333%; }
  .u-size-5\/12\@md {
    width: 41.66667%; }
  [data-flout] > .u-size-5\/12\@md,
  [data-flout__el].u-size-5\/12\@md,
  .u-size-5\/12\@md-flexi {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .u-offset-5\/12\@md,
  .u-push-5\/12\@md {
    margin-left: 41.66667%; }
  .u-size-6\/12\@md {
    width: 50%; }
  [data-flout] > .u-size-6\/12\@md,
  [data-flout__el].u-size-6\/12\@md,
  .u-size-6\/12\@md-flexi {
    flex-basis: 50%;
    max-width: 50%; }
  .u-offset-6\/12\@md,
  .u-push-6\/12\@md {
    margin-left: 50%; }
  .u-size-7\/12\@md {
    width: 58.33333%; }
  [data-flout] > .u-size-7\/12\@md,
  [data-flout__el].u-size-7\/12\@md,
  .u-size-7\/12\@md-flexi {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .u-offset-7\/12\@md,
  .u-push-7\/12\@md {
    margin-left: 58.33333%; }
  .u-size-8\/12\@md {
    width: 66.66667%; }
  [data-flout] > .u-size-8\/12\@md,
  [data-flout__el].u-size-8\/12\@md,
  .u-size-8\/12\@md-flexi {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .u-offset-8\/12\@md,
  .u-push-8\/12\@md {
    margin-left: 66.66667%; }
  .u-size-9\/12\@md {
    width: 75%; }
  [data-flout] > .u-size-9\/12\@md,
  [data-flout__el].u-size-9\/12\@md,
  .u-size-9\/12\@md-flexi {
    flex-basis: 75%;
    max-width: 75%; }
  .u-offset-9\/12\@md,
  .u-push-9\/12\@md {
    margin-left: 75%; }
  .u-size-10\/12\@md {
    width: 83.33333%; }
  [data-flout] > .u-size-10\/12\@md,
  [data-flout__el].u-size-10\/12\@md,
  .u-size-10\/12\@md-flexi {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .u-offset-10\/12\@md,
  .u-push-10\/12\@md {
    margin-left: 83.33333%; }
  .u-size-11\/12\@md {
    width: 91.66667%; }
  [data-flout] > .u-size-11\/12\@md,
  [data-flout__el].u-size-11\/12\@md,
  .u-size-11\/12\@md-flexi {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .u-offset-11\/12\@md,
  .u-push-11\/12\@md {
    margin-left: 91.66667%; }
  .u-size-12\/12\@md {
    width: 100%; }
  [data-flout] > .u-size-12\/12\@md,
  [data-flout__el].u-size-12\/12\@md,
  .u-size-12\/12\@md-flexi {
    flex-basis: 100%;
    max-width: 100%; }
  .u-offset-12\/12\@md,
  .u-push-12\/12\@md {
    margin-left: 100%; } }

@media all and (min-width: 64em) {
  .u-size-1\/12\@mdl {
    width: 8.33333%; }
  [data-flout] > .u-size-1\/12\@mdl,
  [data-flout__el].u-size-1\/12\@mdl,
  .u-size-1\/12\@mdl-flexi {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .u-offset-1\/12\@mdl,
  .u-push-1\/12\@mdl {
    margin-left: 8.33333%; }
  .u-size-2\/12\@mdl {
    width: 16.66667%; }
  [data-flout] > .u-size-2\/12\@mdl,
  [data-flout__el].u-size-2\/12\@mdl,
  .u-size-2\/12\@mdl-flexi {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .u-offset-2\/12\@mdl,
  .u-push-2\/12\@mdl {
    margin-left: 16.66667%; }
  .u-size-3\/12\@mdl {
    width: 25%; }
  [data-flout] > .u-size-3\/12\@mdl,
  [data-flout__el].u-size-3\/12\@mdl,
  .u-size-3\/12\@mdl-flexi {
    flex-basis: 25%;
    max-width: 25%; }
  .u-offset-3\/12\@mdl,
  .u-push-3\/12\@mdl {
    margin-left: 25%; }
  .u-size-4\/12\@mdl {
    width: 33.33333%; }
  [data-flout] > .u-size-4\/12\@mdl,
  [data-flout__el].u-size-4\/12\@mdl,
  .u-size-4\/12\@mdl-flexi {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .u-offset-4\/12\@mdl,
  .u-push-4\/12\@mdl {
    margin-left: 33.33333%; }
  .u-size-5\/12\@mdl {
    width: 41.66667%; }
  [data-flout] > .u-size-5\/12\@mdl,
  [data-flout__el].u-size-5\/12\@mdl,
  .u-size-5\/12\@mdl-flexi {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .u-offset-5\/12\@mdl,
  .u-push-5\/12\@mdl {
    margin-left: 41.66667%; }
  .u-size-6\/12\@mdl {
    width: 50%; }
  [data-flout] > .u-size-6\/12\@mdl,
  [data-flout__el].u-size-6\/12\@mdl,
  .u-size-6\/12\@mdl-flexi {
    flex-basis: 50%;
    max-width: 50%; }
  .u-offset-6\/12\@mdl,
  .u-push-6\/12\@mdl {
    margin-left: 50%; }
  .u-size-7\/12\@mdl {
    width: 58.33333%; }
  [data-flout] > .u-size-7\/12\@mdl,
  [data-flout__el].u-size-7\/12\@mdl,
  .u-size-7\/12\@mdl-flexi {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .u-offset-7\/12\@mdl,
  .u-push-7\/12\@mdl {
    margin-left: 58.33333%; }
  .u-size-8\/12\@mdl {
    width: 66.66667%; }
  [data-flout] > .u-size-8\/12\@mdl,
  [data-flout__el].u-size-8\/12\@mdl,
  .u-size-8\/12\@mdl-flexi {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .u-offset-8\/12\@mdl,
  .u-push-8\/12\@mdl {
    margin-left: 66.66667%; }
  .u-size-9\/12\@mdl {
    width: 75%; }
  [data-flout] > .u-size-9\/12\@mdl,
  [data-flout__el].u-size-9\/12\@mdl,
  .u-size-9\/12\@mdl-flexi {
    flex-basis: 75%;
    max-width: 75%; }
  .u-offset-9\/12\@mdl,
  .u-push-9\/12\@mdl {
    margin-left: 75%; }
  .u-size-10\/12\@mdl {
    width: 83.33333%; }
  [data-flout] > .u-size-10\/12\@mdl,
  [data-flout__el].u-size-10\/12\@mdl,
  .u-size-10\/12\@mdl-flexi {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .u-offset-10\/12\@mdl,
  .u-push-10\/12\@mdl {
    margin-left: 83.33333%; }
  .u-size-11\/12\@mdl {
    width: 91.66667%; }
  [data-flout] > .u-size-11\/12\@mdl,
  [data-flout__el].u-size-11\/12\@mdl,
  .u-size-11\/12\@mdl-flexi {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .u-offset-11\/12\@mdl,
  .u-push-11\/12\@mdl {
    margin-left: 91.66667%; }
  .u-size-12\/12\@mdl {
    width: 100%; }
  [data-flout] > .u-size-12\/12\@mdl,
  [data-flout__el].u-size-12\/12\@mdl,
  .u-size-12\/12\@mdl-flexi {
    flex-basis: 100%;
    max-width: 100%; }
  .u-offset-12\/12\@mdl,
  .u-push-12\/12\@mdl {
    margin-left: 100%; } }

@media all and (min-width: 75em) {
  .u-size-1\/12\@lg {
    width: 8.33333%; }
  [data-flout] > .u-size-1\/12\@lg,
  [data-flout__el].u-size-1\/12\@lg,
  .u-size-1\/12\@lg-flexi {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .u-offset-1\/12\@lg,
  .u-push-1\/12\@lg {
    margin-left: 8.33333%; }
  .u-size-2\/12\@lg {
    width: 16.66667%; }
  [data-flout] > .u-size-2\/12\@lg,
  [data-flout__el].u-size-2\/12\@lg,
  .u-size-2\/12\@lg-flexi {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .u-offset-2\/12\@lg,
  .u-push-2\/12\@lg {
    margin-left: 16.66667%; }
  .u-size-3\/12\@lg {
    width: 25%; }
  [data-flout] > .u-size-3\/12\@lg,
  [data-flout__el].u-size-3\/12\@lg,
  .u-size-3\/12\@lg-flexi {
    flex-basis: 25%;
    max-width: 25%; }
  .u-offset-3\/12\@lg,
  .u-push-3\/12\@lg {
    margin-left: 25%; }
  .u-size-4\/12\@lg {
    width: 33.33333%; }
  [data-flout] > .u-size-4\/12\@lg,
  [data-flout__el].u-size-4\/12\@lg,
  .u-size-4\/12\@lg-flexi {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .u-offset-4\/12\@lg,
  .u-push-4\/12\@lg {
    margin-left: 33.33333%; }
  .u-size-5\/12\@lg {
    width: 41.66667%; }
  [data-flout] > .u-size-5\/12\@lg,
  [data-flout__el].u-size-5\/12\@lg,
  .u-size-5\/12\@lg-flexi {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .u-offset-5\/12\@lg,
  .u-push-5\/12\@lg {
    margin-left: 41.66667%; }
  .u-size-6\/12\@lg {
    width: 50%; }
  [data-flout] > .u-size-6\/12\@lg,
  [data-flout__el].u-size-6\/12\@lg,
  .u-size-6\/12\@lg-flexi {
    flex-basis: 50%;
    max-width: 50%; }
  .u-offset-6\/12\@lg,
  .u-push-6\/12\@lg {
    margin-left: 50%; }
  .u-size-7\/12\@lg {
    width: 58.33333%; }
  [data-flout] > .u-size-7\/12\@lg,
  [data-flout__el].u-size-7\/12\@lg,
  .u-size-7\/12\@lg-flexi {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .u-offset-7\/12\@lg,
  .u-push-7\/12\@lg {
    margin-left: 58.33333%; }
  .u-size-8\/12\@lg {
    width: 66.66667%; }
  [data-flout] > .u-size-8\/12\@lg,
  [data-flout__el].u-size-8\/12\@lg,
  .u-size-8\/12\@lg-flexi {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .u-offset-8\/12\@lg,
  .u-push-8\/12\@lg {
    margin-left: 66.66667%; }
  .u-size-9\/12\@lg {
    width: 75%; }
  [data-flout] > .u-size-9\/12\@lg,
  [data-flout__el].u-size-9\/12\@lg,
  .u-size-9\/12\@lg-flexi {
    flex-basis: 75%;
    max-width: 75%; }
  .u-offset-9\/12\@lg,
  .u-push-9\/12\@lg {
    margin-left: 75%; }
  .u-size-10\/12\@lg {
    width: 83.33333%; }
  [data-flout] > .u-size-10\/12\@lg,
  [data-flout__el].u-size-10\/12\@lg,
  .u-size-10\/12\@lg-flexi {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .u-offset-10\/12\@lg,
  .u-push-10\/12\@lg {
    margin-left: 83.33333%; }
  .u-size-11\/12\@lg {
    width: 91.66667%; }
  [data-flout] > .u-size-11\/12\@lg,
  [data-flout__el].u-size-11\/12\@lg,
  .u-size-11\/12\@lg-flexi {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .u-offset-11\/12\@lg,
  .u-push-11\/12\@lg {
    margin-left: 91.66667%; }
  .u-size-12\/12\@lg {
    width: 100%; }
  [data-flout] > .u-size-12\/12\@lg,
  [data-flout__el].u-size-12\/12\@lg,
  .u-size-12\/12\@lg-flexi {
    flex-basis: 100%;
    max-width: 100%; }
  .u-offset-12\/12\@lg,
  .u-push-12\/12\@lg {
    margin-left: 100%; } }

@media all and (min-width: 90em) {
  .u-size-1\/12\@xl {
    width: 8.33333%; }
  [data-flout] > .u-size-1\/12\@xl,
  [data-flout__el].u-size-1\/12\@xl,
  .u-size-1\/12\@xl-flexi {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .u-offset-1\/12\@xl,
  .u-push-1\/12\@xl {
    margin-left: 8.33333%; }
  .u-size-2\/12\@xl {
    width: 16.66667%; }
  [data-flout] > .u-size-2\/12\@xl,
  [data-flout__el].u-size-2\/12\@xl,
  .u-size-2\/12\@xl-flexi {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .u-offset-2\/12\@xl,
  .u-push-2\/12\@xl {
    margin-left: 16.66667%; }
  .u-size-3\/12\@xl {
    width: 25%; }
  [data-flout] > .u-size-3\/12\@xl,
  [data-flout__el].u-size-3\/12\@xl,
  .u-size-3\/12\@xl-flexi {
    flex-basis: 25%;
    max-width: 25%; }
  .u-offset-3\/12\@xl,
  .u-push-3\/12\@xl {
    margin-left: 25%; }
  .u-size-4\/12\@xl {
    width: 33.33333%; }
  [data-flout] > .u-size-4\/12\@xl,
  [data-flout__el].u-size-4\/12\@xl,
  .u-size-4\/12\@xl-flexi {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .u-offset-4\/12\@xl,
  .u-push-4\/12\@xl {
    margin-left: 33.33333%; }
  .u-size-5\/12\@xl {
    width: 41.66667%; }
  [data-flout] > .u-size-5\/12\@xl,
  [data-flout__el].u-size-5\/12\@xl,
  .u-size-5\/12\@xl-flexi {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .u-offset-5\/12\@xl,
  .u-push-5\/12\@xl {
    margin-left: 41.66667%; }
  .u-size-6\/12\@xl {
    width: 50%; }
  [data-flout] > .u-size-6\/12\@xl,
  [data-flout__el].u-size-6\/12\@xl,
  .u-size-6\/12\@xl-flexi {
    flex-basis: 50%;
    max-width: 50%; }
  .u-offset-6\/12\@xl,
  .u-push-6\/12\@xl {
    margin-left: 50%; }
  .u-size-7\/12\@xl {
    width: 58.33333%; }
  [data-flout] > .u-size-7\/12\@xl,
  [data-flout__el].u-size-7\/12\@xl,
  .u-size-7\/12\@xl-flexi {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .u-offset-7\/12\@xl,
  .u-push-7\/12\@xl {
    margin-left: 58.33333%; }
  .u-size-8\/12\@xl {
    width: 66.66667%; }
  [data-flout] > .u-size-8\/12\@xl,
  [data-flout__el].u-size-8\/12\@xl,
  .u-size-8\/12\@xl-flexi {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .u-offset-8\/12\@xl,
  .u-push-8\/12\@xl {
    margin-left: 66.66667%; }
  .u-size-9\/12\@xl {
    width: 75%; }
  [data-flout] > .u-size-9\/12\@xl,
  [data-flout__el].u-size-9\/12\@xl,
  .u-size-9\/12\@xl-flexi {
    flex-basis: 75%;
    max-width: 75%; }
  .u-offset-9\/12\@xl,
  .u-push-9\/12\@xl {
    margin-left: 75%; }
  .u-size-10\/12\@xl {
    width: 83.33333%; }
  [data-flout] > .u-size-10\/12\@xl,
  [data-flout__el].u-size-10\/12\@xl,
  .u-size-10\/12\@xl-flexi {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .u-offset-10\/12\@xl,
  .u-push-10\/12\@xl {
    margin-left: 83.33333%; }
  .u-size-11\/12\@xl {
    width: 91.66667%; }
  [data-flout] > .u-size-11\/12\@xl,
  [data-flout__el].u-size-11\/12\@xl,
  .u-size-11\/12\@xl-flexi {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .u-offset-11\/12\@xl,
  .u-push-11\/12\@xl {
    margin-left: 91.66667%; }
  .u-size-12\/12\@xl {
    width: 100%; }
  [data-flout] > .u-size-12\/12\@xl,
  [data-flout__el].u-size-12\/12\@xl,
  .u-size-12\/12\@xl-flexi {
    flex-basis: 100%;
    max-width: 100%; }
  .u-offset-12\/12\@xl,
  .u-push-12\/12\@xl {
    margin-left: 100%; } }

/*
   Percentage utility classes
   ---

 * ========================================================================== */
.u-size-10\% {
  width: 10%; }

.u-size-20\% {
  width: 20%; }

.u-size-30\% {
  width: 30%; }

.u-size-40\% {
  width: 40%; }

.u-size-50\% {
  width: 50%; }

.u-size-60\% {
  width: 60%; }

.u-size-70\% {
  width: 70%; }

.u-size-80\% {
  width: 80%; }

.u-size-90\% {
  width: 90%; }

.u-size-100\% {
  width: 100%; }

@media all and (min-width: 37.5em) {
  .u—size-10\%\@xs {
    width: 10%; }
  .u—size-20\%\@xs {
    width: 20%; }
  .u—size-30\%\@xs {
    width: 30%; }
  .u—size-40\%\@xs {
    width: 40%; }
  .u—size-50\%\@xs {
    width: 50%; }
  .u—size-60\%\@xs {
    width: 60%; }
  .u—size-70\%\@xs {
    width: 70%; }
  .u—size-80\%\@xs {
    width: 80%; }
  .u—size-90\%\@xs {
    width: 90%; }
  .u—size-100\%\@xs {
    width: 100%; } }

@media all and (min-width: 48em) {
  .u—size-10\%\@sm {
    width: 10%; }
  .u—size-20\%\@sm {
    width: 20%; }
  .u—size-30\%\@sm {
    width: 30%; }
  .u—size-40\%\@sm {
    width: 40%; }
  .u—size-50\%\@sm {
    width: 50%; }
  .u—size-60\%\@sm {
    width: 60%; }
  .u—size-70\%\@sm {
    width: 70%; }
  .u—size-80\%\@sm {
    width: 80%; }
  .u—size-90\%\@sm {
    width: 90%; }
  .u—size-100\%\@sm {
    width: 100%; } }

@media all and (min-width: 51.5em) {
  .u—size-10\%\@sml {
    width: 10%; }
  .u—size-20\%\@sml {
    width: 20%; }
  .u—size-30\%\@sml {
    width: 30%; }
  .u—size-40\%\@sml {
    width: 40%; }
  .u—size-50\%\@sml {
    width: 50%; }
  .u—size-60\%\@sml {
    width: 60%; }
  .u—size-70\%\@sml {
    width: 70%; }
  .u—size-80\%\@sml {
    width: 80%; }
  .u—size-90\%\@sml {
    width: 90%; }
  .u—size-100\%\@sml {
    width: 100%; } }

@media all and (min-width: 62em) {
  .u—size-10\%\@md {
    width: 10%; }
  .u—size-20\%\@md {
    width: 20%; }
  .u—size-30\%\@md {
    width: 30%; }
  .u—size-40\%\@md {
    width: 40%; }
  .u—size-50\%\@md {
    width: 50%; }
  .u—size-60\%\@md {
    width: 60%; }
  .u—size-70\%\@md {
    width: 70%; }
  .u—size-80\%\@md {
    width: 80%; }
  .u—size-90\%\@md {
    width: 90%; }
  .u—size-100\%\@md {
    width: 100%; } }

@media all and (min-width: 64em) {
  .u—size-10\%\@mdl {
    width: 10%; }
  .u—size-20\%\@mdl {
    width: 20%; }
  .u—size-30\%\@mdl {
    width: 30%; }
  .u—size-40\%\@mdl {
    width: 40%; }
  .u—size-50\%\@mdl {
    width: 50%; }
  .u—size-60\%\@mdl {
    width: 60%; }
  .u—size-70\%\@mdl {
    width: 70%; }
  .u—size-80\%\@mdl {
    width: 80%; }
  .u—size-90\%\@mdl {
    width: 90%; }
  .u—size-100\%\@mdl {
    width: 100%; } }

@media all and (min-width: 75em) {
  .u—size-10\%\@lg {
    width: 10%; }
  .u—size-20\%\@lg {
    width: 20%; }
  .u—size-30\%\@lg {
    width: 30%; }
  .u—size-40\%\@lg {
    width: 40%; }
  .u—size-50\%\@lg {
    width: 50%; }
  .u—size-60\%\@lg {
    width: 60%; }
  .u—size-70\%\@lg {
    width: 70%; }
  .u—size-80\%\@lg {
    width: 80%; }
  .u—size-90\%\@lg {
    width: 90%; }
  .u—size-100\%\@lg {
    width: 100%; } }

@media all and (min-width: 90em) {
  .u—size-10\%\@xl {
    width: 10%; }
  .u—size-20\%\@xl {
    width: 20%; }
  .u—size-30\%\@xl {
    width: 30%; }
  .u—size-40\%\@xl {
    width: 40%; }
  .u—size-50\%\@xl {
    width: 50%; }
  .u—size-60\%\@xl {
    width: 60%; }
  .u—size-70\%\@xl {
    width: 70%; }
  .u—size-80\%\@xl {
    width: 80%; }
  .u—size-90\%\@xl {
    width: 90%; }
  .u—size-100\%\@xl {
    width: 100%; } }

@media all and (min-width: 37.5em) {
  [class*="u-size-auto@xs"] {
    width: auto; } }

@media all and (min-width: 48em) {
  [class*="u-size-auto@sm"] {
    width: auto; } }

@media all and (min-width: 51.5em) {
  [class*="u-size-auto@sml"] {
    width: auto; } }

@media all and (min-width: 62em) {
  [class*="u-size-auto@md"] {
    width: auto; } }

@media all and (min-width: 64em) {
  [class*="u-size-auto@mdl"] {
    width: auto; } }

@media all and (min-width: 75em) {
  [class*="u-size-auto@lg"] {
    width: auto; } }

@media all and (min-width: 90em) {
  [class*="u-size-auto@xl"] {
    width: auto; } }