/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: 'latobold';
  src: url("../fonts/lato-bold-webfont.eot");
  src: url("../fonts/lato-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-bold-webfont.woff2") format("woff2"), url("../fonts/lato-bold-webfont.woff") format("woff"), url("../fonts/lato-bold-webfont.ttf") format("truetype"), url("../fonts/lato-bold-webfont.svg#latobold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'latoregular';
  src: url("../fonts/lato-regular-webfont.eot");
  src: url("../fonts/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-regular-webfont.woff2") format("woff2"), url("../fonts/lato-regular-webfont.woff") format("woff"), url("../fonts/lato-regular-webfont.ttf") format("truetype"), url("../fonts/lato-regular-webfont.svg#latoregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'latolight';
  src: url("../fonts/lato-light-webfont.eot");
  src: url("../fonts/lato-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-light-webfont.woff2") format("woff2"), url("../fonts/lato-light-webfont.woff") format("woff"), url("../fonts/lato-light-webfont.ttf") format("truetype"), url("../fonts/lato-light-webfont.svg#latolight") format("svg");
  font-weight: normal;
  font-style: normal; }
.hide {
  display: none; }

.block {
  display: block; }

.inline-block {
  display: inline-block; }

.left {
  float: left; }

.right {
  float: right; }

.clear {
  clear: both; }

.clearfix:after {
  content: "";
  display: table;
  clear: both; }

.center {
  margin-left: auto;
  margin-right: auto; }

.absolute-center, .full-wrapper .content, .full-wrapper .timeline li .period-content .illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.full, .full-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

* {
  box-sizing: border-box; }

body {
  font-family: "latolight";
  font-size: 16px;
  min-width: 1024px;
  min-height: 720px;
  background-color: #262A47;
  color: #fff; }

a {
  color: inherit;
  text-decoration: none; }

em {
  font-style: italic; }

.full-wrapper {
  overflow: hidden;
  min-width: 1024px;
  min-height: 720px; }
  .full-wrapper:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 10px;
    background-color: #FF5621;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%); }
  .full-wrapper .content {
    width: 1024px;
    height: 720px;
    background-color: #262A47; }
  .full-wrapper .timeline {
    position: absolute;
    top: 50%;
    left: 55px;
    width: 120%;
    height: 10px;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%); }
    .full-wrapper .timeline li {
      position: relative;
      float: left;
      height: 10px; }
      .full-wrapper .timeline li .period-trigger {
        width: 40px;
        height: 40px;
        background-image: url("../img/trigger-s.png");
        position: absolute;
        top: -15px;
        left: -20px;
        z-index: 1; }
        .full-wrapper .timeline li .period-trigger.active {
          background-image: url("../img/trigger-s-a.png"); }
        .full-wrapper .timeline li .period-trigger.double-trigger {
          height: 93px;
          background-image: url("../img/trigger-d.png"); }
          .full-wrapper .timeline li .period-trigger.double-trigger.active {
            background-image: url("../img/trigger-d-a.png"); }
        .full-wrapper .timeline li .period-trigger:after {
          content: attr(data-label);
          position: absolute;
          bottom: 100%;
          left: 50%;
          width: 250px;
          opacity: 1;
          -webkit-transition: opacity 350ms;
          -moz-transition: opacity 350ms;
          -ms-transition: opacity 350ms;
          -o-transition: opacity 350ms;
          transition: opacity 350ms;
          -webkit-transform-origin: 0% 100%;
          -moz-transform-origin: 0% 100%;
          -ms-transform-origin: 0% 100%;
          -o-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
          -webkit-transform: translate(3px, 0px) rotate(-45deg);
          -moz-transform: translate(3px, 0px) rotate(-45deg);
          -o-transform: translate(3px, 0px) rotate(-45deg);
          transform: translate(3px, 0px) rotate(-45deg); }
      .full-wrapper .timeline li .period-content {
        display: none;
        position: absolute;
        top: -285px;
        width: 250px;
        min-height: 80px;
        padding: 20px;
        font-size: 14px;
        background-color: #3F4675;
        z-index: 2; }
        .full-wrapper .timeline li .period-content:after {
          content: "";
          position: absolute;
          top: 100%;
          left: 0;
          width: 0px;
          height: 0px;
          border-top: 185px solid #3F4675;
          border-right: 25px solid transparent; }
        .full-wrapper .timeline li .period-content h2 {
          font-family: "latobold";
          font-size: 16px;
          line-height: 1.2;
          margin-bottom: 0.4em; }
        .full-wrapper .timeline li .period-content .reference {
          font-style: italic; }
        .full-wrapper .timeline li .period-content ol {
          counter-reset: events;
          margin-top: 15px; }
          .full-wrapper .timeline li .period-content ol li {
            position: relative;
            padding: 0px 0 4px 27px;
            line-height: 1.25;
            min-height: 1em;
            margin-bottom: 0.85em; }
            .full-wrapper .timeline li .period-content ol li:before {
              counter-increment: events;
              content: counter(events);
              position: absolute;
              top: 0;
              left: 0;
              width: 20px;
              height: 20px;
              border-radius: 100%;
              font-family: "latobold";
              line-height: 20px;
              text-align: center;
              background-color: #AFBDC4;
              color: #3F4675; }
        .full-wrapper .timeline li .period-content .illustration {
          left: 100%; }
        .full-wrapper .timeline li .period-content .external-link {
          display: block;
          position: absolute;
          top: 50%;
          left: 100%;
          width: 135px;
          height: 40px;
          margin-left: 75px;
          padding: 0 20px;
          border: 1px solid #FF9800;
          border-radius: 20px;
          line-height: 38px;
          text-align: center;
          white-space: nowrap;
          color: #FF9800;
          -webkit-transform: translate(0, -50%);
          -moz-transform: translate(0, -50%);
          -o-transform: translate(0, -50%);
          transform: translate(0, -50%); }
          .full-wrapper .timeline li .period-content .external-link.left-side {
            left: auto;
            right: 100%;
            margin-left: 0 !important;
            margin-right: 75px; }
      .full-wrapper .timeline li.open .period-trigger:after {
        opacity: 0; }
      .full-wrapper .timeline li.mirrored .period-content {
        right: 100%;
        padding-left: 95px; }
        .full-wrapper .timeline li.mirrored .period-content:after {
          border-left: 25px solid transparent;
          border-right: none;
          left: auto;
          right: 0; }
        .full-wrapper .timeline li.mirrored .period-content .illustration {
          left: 0; }
        .full-wrapper .timeline li.mirrored .period-content .external-link {
          margin-left: 25px; }
    .full-wrapper .timeline #period-01 {
      width: 32px;
      background-color: #2095F2; }
      .full-wrapper .timeline #period-01 .period-content {
        width: 225px; }
    .full-wrapper .timeline #period-02 {
      width: 281px;
      background-color: #2095F2; }
      .full-wrapper .timeline #period-02 .period-content {
        width: 225px; }
        .full-wrapper .timeline #period-02 .period-content .illustration {
          margin-left: 10px; }
    .full-wrapper .timeline #period-03 {
      width: 123px;
      background-color: #2095F2; }
      .full-wrapper .timeline #period-03 .period-content {
        width: 235px; }
        .full-wrapper .timeline #period-03 .period-content .illustration {
          margin-top: -10px; }
    .full-wrapper .timeline #period-04 {
      width: 54px;
      background-color: #2095F2; }
      .full-wrapper .timeline #period-04 .period-content {
        width: 250px;
        height: 145px; }
        .full-wrapper .timeline #period-04 .period-content .illustration {
          margin-left: 53px; }
        .full-wrapper .timeline #period-04 .period-content .external-link {
          margin-left: 145px; }
        .full-wrapper .timeline #period-04 .period-content:after {
          border-top-width: 120px; }
    .full-wrapper .timeline #period-05 {
      width: 202px;
      background-color: #FFC006; }
      .full-wrapper .timeline #period-05 .period-content {
        width: 295px; }
        .full-wrapper .timeline #period-05 .period-content .illustration {
          margin-left: 7px;
          margin-top: -5px; }
        .full-wrapper .timeline #period-05 .period-content:after {
          border-top-width: 66px; }
    .full-wrapper .timeline #period-06 {
      width: 38px;
      background-color: #FFC006; }
      .full-wrapper .timeline #period-06 .period-content {
        width: 350px;
        padding-bottom: 15px; }
        .full-wrapper .timeline #period-06 .period-content:after {
          border-top-width: 98px; }
    .full-wrapper .timeline #period-07 {
      position: relative;
      top: -30px;
      width: 119px;
      height: 70px;
      margin-right: -5px; }
      .full-wrapper .timeline #period-07 .double-path {
        position: relative;
        display: block;
        height: 50%;
        overflow: hidden; }
        .full-wrapper .timeline #period-07 .double-path:before {
          content: "";
          box-sizing: border-box;
          display: block;
          position: absolute;
          left: 0;
          width: 100%;
          height: 140px;
          border: 10px solid white;
          border-radius: 49px; }
        .full-wrapper .timeline #period-07 .double-path.double-path--top:before {
          border-color: #009587;
          top: 0; }
        .full-wrapper .timeline #period-07 .double-path.double-path--bottom:before {
          border-color: #C41061;
          bottom: 0; }
      .full-wrapper .timeline #period-07 .period-trigger {
        top: 15px;
        left: -15px; }
      .full-wrapper .timeline #period-07 .period-content {
        top: -255px;
        width: 380px;
        margin-right: -5px; }
        .full-wrapper .timeline #period-07 .period-content:after {
          border-top-width: 140px; }
    .full-wrapper .timeline #period-08 {
      width: 136px;
      background-color: #FF5621; }
      .full-wrapper .timeline #period-08 .period-content {
        width: 480px; }
        .full-wrapper .timeline #period-08 .period-content .illustration {
          top: auto;
          bottom: -3px;
          -webkit-transform: translate(-50%, 0);
          -moz-transform: translate(-50%, 0);
          -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
        .full-wrapper .timeline #period-08 .period-content .external-link {
          margin-right: 100px; }
        .full-wrapper .timeline #period-08 .period-content:after {
          border-top-width: 87px; }
    .full-wrapper .timeline .period-dummy {
      position: absolute;
      top: 53px; }
    .full-wrapper .timeline #period-dummy--01 {
      width: 256px;
      left: 436px;
      background-color: #9B26AF; }
    .full-wrapper .timeline #period-dummy--02 {
      width: 152px;
      left: 692px;
      background-color: #FF7B7B; }
  .full-wrapper .captions {
    position: absolute;
    left: 45px;
    bottom: 30px; }
    .full-wrapper .captions li {
      line-height: 30px;
      margin-bottom: 10px; }
      .full-wrapper .captions li .caption-reference {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        border-radius: 5px;
        font-family: "latobold";
        text-align: center;
        color: #262A47; }
      .full-wrapper .captions li #caption-01 {
        background-color: #2095F2; }
      .full-wrapper .captions li #caption-02 {
        background-color: #9B26AF; }
      .full-wrapper .captions li #caption-03 {
        background-color: #FFC006; }
      .full-wrapper .captions li #caption-04 {
        background-color: #FF7B7B; }
      .full-wrapper .captions li #caption-05a {
        background-color: #009587; }
      .full-wrapper .captions li #caption-05b {
        background-color: #C41061; }
      .full-wrapper .captions li #caption-06 {
        background-color: #FF5621; }