/*----------------------------------------------*\
    GLOBAL
	======

	@package password

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package yaybrigade

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Fonts */
/* Breakpoints */
/* line 12, ../src/roman/global.scss */
.wrapper {
  background-color: #fff;
  font-family: "Merriweather", serif;
  color: #222;
  height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 1em; }
  /* line 21, ../src/roman/global.scss */
  .theme--dark .wrapper {
    background-color: #111118;
    color: #111118; }

/* line 27, ../src/roman/global.scss */
.training {
  width: 100%;
  max-width: 60vh;
  margin: .5em auto 0;
  height: 60vh;
  min-height: 14em;
  min-width: 14em;
  position: relative; }
  @media (min-height: 470px) {
    /* line 27, ../src/roman/global.scss */
    .training {
      max-width: 20em;
      height: 20em; } }
  /* line 42, ../src/roman/global.scss */
  .training__cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    border: 1px solid #222;
    padding: 1em;
    background-color: #fff;
    opacity: 1;
    transition: opacity .2s;
    text-align: center;
    background-color: #59A6C9;
    color: #eee;
    font-family: "PT Sans", sans-serif; }
    /* line 59, ../src/roman/global.scss */
    .training--started .training__cover {
      opacity: 0;
      pointer-events: none; }
    /* line 63, ../src/roman/global.scss */
    .training__cover__greeting {
      margin: 1em 0; }
    /* line 66, ../src/roman/global.scss */
    .training__cover__instructions {
      margin-bottom: 3em; }
    /* line 69, ../src/roman/global.scss */
    .training__cover__level {
      position: relative;
      margin-bottom: .75em; }
      /* line 73, ../src/roman/global.scss */
      .training__cover__level--none {
        opacity: 0;
        pointer-events: none; }
      /* line 77, ../src/roman/global.scss */
      .training__cover__level__text {
        font-size: .7em;
        padding: .25em .375em;
        color: #59A6C9;
        background-color: white;
        display: inline-block;
        text-transform: uppercase;
        font-weight: bold; }
      /* line 86, ../src/roman/global.scss */
      .training__cover__level__prev, .training__cover__level__next {
        position: absolute; }
        /* line 90, ../src/roman/global.scss */
        .training__cover__level__prev svg, .training__cover__level__next svg {
          width: 1em; }
      /* line 94, ../src/roman/global.scss */
      .training__cover__level__prev {
        left: 0; }
      /* line 97, ../src/roman/global.scss */
      .training__cover__level__next {
        right: 0; }
    /* line 102, ../src/roman/global.scss */
    .training__cover__button {
      font-size: 1.15em;
      display: inline-block;
      padding: 0.375em 1em;
      border: 1px solid #fff;
      font-weight: bold;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 1em; }
    /* line 112, ../src/roman/global.scss */
    .training__cover__options {
      color: #111118;
      text-transform: uppercase;
      font-size: .9em;
      letter-spacing: .25px; }
      /* line 119, ../src/roman/global.scss */
      .training__cover__options svg {
        margin-right: 0.325em;
        position: relative;
        top: 0.4em;
        width: 1.1em; }
    /* line 126, ../src/roman/global.scss */
    .training__cover__more {
      position: absolute;
      bottom: -6em;
      left: 0;
      right: 0;
      font-size: 0.8em;
      color: #999;
      letter-spacing: 0.25px;
      text-align: center; }
      /* line 136, ../src/roman/global.scss */
      .training__cover__more svg {
        margin-right: 0.325em;
        position: relative;
        top: 0.4em;
        width: 1.2em; }
    @media (min-height: 470px) {
      /* line 145, ../src/roman/global.scss */
      .training__cover__greeting {
        margin-top: 20%; } }
  /* line 153, ../src/roman/global.scss */
  .training__items {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    border: 1px solid transparent;
    padding: 1em;
    text-align: center;
    cursor: pointer; }
    /* line 165, ../src/roman/global.scss */
    .training__items--next {
      z-index: 0; }
    /* line 169, ../src/roman/global.scss */
    .speech-started .training__items {
      background-color: yellow; }
  /* line 173, ../src/roman/global.scss */
  .training__item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    transition: transform .2s, opacity .2s; }
    /* line 183, ../src/roman/global.scss */
    .training__item--active {
      opacity: 1;
      z-index: 10;
      pointer-events: auto;
      transform: translate(0) scale(1); }
    /* line 189, ../src/roman/global.scss */
    .training__item--prev {
      opacity: 0;
      transform: translate(-100%); }
    /* line 193, ../src/roman/global.scss */
    .training__item--next {
      opacity: 0;
      transform: translate(10%) scale(0.9); }
  /* line 198, ../src/roman/global.scss */
  .training__view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    background-color: #fff;
    transition: transform .3s; }
    /* line 211, ../src/roman/global.scss */
    .theme--dark .training__view {
      background-color: #eee; }
  /* line 215, ../src/roman/global.scss */
  .training__number {
    font-size: 10em;
    font-weight: 300; }
  /* line 219, ../src/roman/global.scss */
  .training__word {
    font-size: 2em; }
  /* line 222, ../src/roman/global.scss */
  .training__items img {
    max-width: 80%; }

/* line 227, ../src/roman/global.scss */
.training__view--0 {
  z-index: 2; }

/* line 230, ../src/roman/global.scss */
.training__view--1 {
  z-index: 1; }

/* line 233, ../src/roman/global.scss */
.training__view--2 {
  z-index: 0; }

/* line 236, ../src/roman/global.scss */
.training__item--view-0 .training__view--0,
.training__item--view-1 .training__view--1,
.training__item--view-2 .training__view--2 {
  z-index: 10; }

/* line 244, ../src/roman/global.scss */
.training__items--view-all .training__view--0 {
  transform: scale(0.35);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  z-index: 20; }
/* line 249, ../src/roman/global.scss */
.training__items--view-all .training__view--1 {
  transform: translateY(100px) scale(0.5); }
/* line 252, ../src/roman/global.scss */
.training__items--view-all .training__view--2 {
  transform: translateY(-100px) scale(0.5); }

/* Prev & Next Navigation */
/* line 259, ../src/roman/global.scss */
.training__navigation {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  color: #222;
  position: absolute;
  top: calc(100% + 2em);
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none; }
  /* line 271, ../src/roman/global.scss */
  .theme--dark .training__navigation {
    color: #999; }
  /* line 274, ../src/roman/global.scss */
  .training--started .training__navigation {
    opacity: 1;
    pointer-events: auto; }
/* line 279, ../src/roman/global.scss */
.training__next {
  text-align: right; }
/* line 282, ../src/roman/global.scss */
.training__prev, .training__next {
  -ms-flex-positive: 1;
      flex-grow: 1; }
/* line 286, ../src/roman/global.scss */
.training__progress {
  -ms-flex-positive: 2;
      flex-grow: 2;
  font-size: .9em;
  font-family: "PT Sans", sans-serif;
  text-align: center; }

/* Icons */
/* line 296, ../src/roman/global.scss */
.icon {
  padding: .5em;
  margin: 0 .5em;
  width: 2.5em;
  color: #222; }
  /* line 302, ../src/roman/global.scss */
  .icon--clickable {
    cursor: pointer;
    transition: transform .2s; }
  /* line 306, ../src/roman/global.scss */
  .theme--dark .icon {
    color: #999; }
  /* line 309, ../src/roman/global.scss */
  .icon--clock {
    padding: 0;
    display: inline-block;
    width: 1em; }
  /* line 314, ../src/roman/global.scss */
  .icon--prev, .icon--next {
    width: 3em;
    margin: -1em; }
  /* line 320, ../src/roman/global.scss */
  .icon svg {
    width: 100%;
    height: auto; }

/* line 326, ../src/roman/global.scss */
.settings {
  position: absolute;
  z-index: 100;
  top: 1em;
  right: 1em;
  display: -ms-flexbox;
  display: flex; }
  @media (min-width: 600px) {
    /* line 326, ../src/roman/global.scss */
    .settings {
      top: 2em;
      right: 2em; } }

/* line 340, ../src/roman/global.scss */
.stopwatch {
  position: absolute;
  top: 1.25rem;
  left: 1rem;
  display: none;
  color: #222; }
  @media (min-width: 600px) {
    /* line 340, ../src/roman/global.scss */
    .stopwatch {
      top: 2.25em;
      left: 2em; } }
  /* line 353, ../src/roman/global.scss */
  .stop-watch--show .stopwatch {
    display: block; }
  /* line 357, ../src/roman/global.scss */
  .theme--dark .stopwatch {
    color: #999; }
  /* line 361, ../src/roman/global.scss */
  .stopwatch__time {
    font-size: 0.8em;
    font-family: sans-serif;
    display: inline-block; }
  /* line 367, ../src/roman/global.scss */
  .stopwatch .icon--clock svg {
    animation: clock-rotate 3s infinite linear paused; }
    /* line 370, ../src/roman/global.scss */
    .stop-watch--running .stopwatch .icon--clock svg {
      animation: clock-pulsate 1.5s infinite linear alternate running, clock-rotate 3s infinite linear running; }

@keyframes clock-pulsate {
  0% {
    opacity: .35; }
  100% {
    opacity: 1; } }
@keyframes clock-rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/* Options */
/* line 395, ../src/roman/global.scss */
.options {
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
  position: fixed;
  z-index: 100;
  top: 5em;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  overflow-y: scroll; }
  /* line 410, ../src/roman/global.scss */
  .theme--dark .options {
    background-color: #eee; }
  /* line 414, ../src/roman/global.scss */
  .show--options .options {
    opacity: 1;
    pointer-events: auto;
    height: auto; }

/* line 421, ../src/roman/global.scss */
.option-items {
  margin: 0 auto;
  max-width: 25em;
  font-family: "PT Sans", sans-serif;
  margin-top: 2em; }
  /* line 427, ../src/roman/global.scss */
  .option-items__row {
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 1em; }
  /* line 432, ../src/roman/global.scss */
  .option-items__title {
    text-transform: uppercase;
    font-size: .7em;
    font-weight: bold;
    margin-bottom: .25em; }
  /* line 438, ../src/roman/global.scss */
  .option-items__options {
    display: -ms-flexbox;
    display: flex; }
  /* line 441, ../src/roman/global.scss */
  .option-items__button {
    text-transform: uppercase;
    color: #aaa;
    border: 1px solid #aaa;
    padding: .25em .75em;
    display: inline-block;
    cursor: pointer;
    margin-right: .25em; }
    /* line 450, ../src/roman/global.scss */
    .option-items__button.active {
      background-color: #59A6C9;
      border-color: #59A6C9;
      color: white; }
  /* line 456, ../src/roman/global.scss */
  .option-items__number {
    color: #aaa;
    border: 1px solid #aaa;
    padding: .25em .375em;
    display: inline-block;
    cursor: pointer;
    margin-right: .25em;
    margin-bottom: .25em;
    min-width: 2em;
    text-align: center; }
    /* line 467, ../src/roman/global.scss */
    .option-items__number.active {
      background-color: #59A6C9;
      border-color: #59A6C9;
      color: white; }

/* line 475, ../src/roman/global.scss */
.button.active {
  font-weight: bold; }

/* Intro */
/* line 480, ../src/roman/global.scss */
.intro {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  transition: opacity 2s;
  background-color: #fff; }
  /* line 492, ../src/roman/global.scss */
  .intro--hide {
    opacity: 0;
    pointer-events: none; }
  /* line 496, ../src/roman/global.scss */
  .theme--dark .intro {
    background-color: #111118; }
  /* line 500, ../src/roman/global.scss */
  .intro__numbers {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-item-align: center;
        align-self: center;
    height: 100vh;
    width: 100vh;
    max-height: 100vw;
    max-width: 100%;
    margin: 0 auto; }
    @media (min-width: 400px) {
      /* line 500, ../src/roman/global.scss */
      .intro__numbers {
        height: 90vh;
        width: 90vh;
        max-height: 90vw;
        max-width: 90%; } }
  /* line 518, ../src/roman/global.scss */
  .intro__cell {
    background-color: rgba(17, 17, 24, 0.1);
    margin: 1px;
    color: #fff;
    width: calc(10% - 2px);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    font-family: "Merriweather", serif;
    opacity: 0;
    transition: opacity 1s, transform 1.2s; }
    /* line 530, ../src/roman/global.scss */
    .theme--dark .intro__cell {
      background-color: rgba(255, 255, 255, 0.1); }
    /* line 534, ../src/roman/global.scss */
    .intro__cell > span {
      font-size: 3vmin; }