/* 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: 'latoitalic';
  src: url("../fonts/lato-italic-webfont.eot");
  src: url("../fonts/lato-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-italic-webfont.woff2") format("woff2"), url("../fonts/lato-italic-webfont.woff") format("woff"), url("../fonts/lato-italic-webfont.ttf") format("truetype"), url("../fonts/lato-italic-webfont.svg#latoitalic") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'roboto_slabbold';
  src: url("../fonts/robotoslab-bold-webfont.eot");
  src: url("../fonts/robotoslab-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotoslab-bold-webfont.woff2") format("woff2"), url("../fonts/robotoslab-bold-webfont.woff") format("woff"), url("../fonts/robotoslab-bold-webfont.ttf") format("truetype"), url("../fonts/robotoslab-bold-webfont.svg#roboto_slabbold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'roboto_slablight';
  src: url("../fonts/robotoslab-light-webfont.eot");
  src: url("../fonts/robotoslab-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotoslab-light-webfont.woff2") format("woff2"), url("../fonts/robotoslab-light-webfont.woff") format("woff"), url("../fonts/robotoslab-light-webfont.ttf") format("truetype"), url("../fonts/robotoslab-light-webfont.svg#roboto_slablight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?vklogi");
  src: url("../fonts/icomoon.eot?vklogi#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?vklogi") format("truetype"), url("../fonts/icomoon.woff?vklogi") format("woff"), url("../fonts/icomoon.svg?vklogi#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="icon-"], [class*=" icon-"], .icon-general {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-reference:before {
  content: "\e900"; }

.icon-angle-up:before {
  content: "\f106"; }

.icon-angle-down:before {
  content: "\f107"; }

.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 {
  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, .main-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

* {
  box-sizing: border-box; }

body {
  font-family: "latoitalic";
  font-size: 12px;
  min-width: 1024px;
  min-height: 720px;
  color: #231F20;
  line-height: 1.3;
  background-color: #000; }

h2 {
  font-family: "roboto_slablight";
  font-size: 60px;
  line-height: 1;
  text-transform: uppercase; }

strong {
  font-family: "latobold"; }

.main-wrapper {
  overflow: hidden;
  opacity: 0;
  background-color: #FCF0CE;
  min-width: 1024px;
  min-height: 720px;
  -webkit-transition: color 300ms 700ms, opacity 1000ms 300ms;
  -moz-transition: color 300ms 700ms, opacity 1000ms 300ms;
  -o-transition: color 300ms 700ms, opacity 1000ms 300ms;
  transition: color 300ms 700ms, opacity 1000ms 300ms; }
  .main-wrapper.ready {
    opacity: 1; }

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }
  header:after {
    content: "";
    display: table;
    clear: both; }
  header em {
    display: block;
    float: left;
    width: 50%;
    height: 58px;
    font-family: "roboto_slabbold";
    font-size: 20px;
    line-height: 58px;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase; }

.slides {
  position: absolute;
  top: 58px;
  left: 0;
  height: calc(100% - 58px);
  width: 100%;
  overflow: hidden; }
  .slides > li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    -webkit-transition: visibility 0ms 1000ms;
    -moz-transition: visibility 0ms 1000ms;
    -o-transition: visibility 0ms 1000ms;
    transition: visibility 0ms 1000ms; }
    .slides > li h2 {
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
      position: absolute;
      top: 24%;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 1; }
      .slides > li h2 strong {
        -webkit-transform: translate(-100%, 0);
        -moz-transform: translate(-100%, 0);
        -o-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
        display: block;
        font-family: "roboto_slabbold";
        font-size: 98px; }
      .slides > li h2 em {
        -webkit-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        -o-transform: translate(100%, 0);
        transform: translate(100%, 0);
        display: block; }
      .slides > li h2 strong, .slides > li h2 em {
        opacity: 0;
        -webkit-transition: -webkit-transform 300ms 0ms, opacity 300ms 0ms;
        -moz-transition: -moz-transform 300ms 0ms, opacity 300ms 0ms;
        -o-transition: -o-transform 300ms 0ms, opacity 300ms 0ms;
        transition: transform 300ms 0ms, opacity 300ms 0ms; }
    .slides > li.current {
      visibility: visible;
      -webkit-transition: visibility 0ms 0ms;
      -moz-transition: visibility 0ms 0ms;
      -o-transition: visibility 0ms 0ms;
      transition: visibility 0ms 0ms; }
      .slides > li.current h2 strong, .slides > li.current h2 em {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
        -webkit-transition: -webkit-transform 300ms 700ms, opacity 300ms 700ms;
        -moz-transition: -moz-transform 300ms 700ms, opacity 300ms 700ms;
        -o-transition: -o-transform 300ms 700ms, opacity 300ms 700ms;
        transition: transform 300ms 700ms, opacity 300ms 700ms; }
      .slides > li.current .panel {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transition: -webkit-transform 700ms 300ms, opacity 700ms 300ms;
        -moz-transition: -moz-transform 700ms 300ms, opacity 700ms 300ms;
        -o-transition: -o-transform 700ms 300ms, opacity 700ms 300ms;
        transition: transform 700ms 300ms, opacity 700ms 300ms; }
        .slides > li.current .panel .content {
          -webkit-transform: translate(-50%, 0);
          -moz-transform: translate(-50%, 0);
          -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
          opacity: 1; }
    .slides > li.previous .panel.panel--moral {
      -webkit-transform: translate(0, 100%);
      -moz-transform: translate(0, 100%);
      -o-transform: translate(0, 100%);
      transform: translate(0, 100%); }
    .slides > li.previous .panel.panel--ceremonial {
      -webkit-transform: translate(0, -100%);
      -moz-transform: translate(0, -100%);
      -o-transform: translate(0, -100%);
      transform: translate(0, -100%); }

.panel {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-transition: -webkit-transform 700ms 300ms, opacity 700ms 300ms;
  -moz-transition: -moz-transform 700ms 300ms, opacity 700ms 300ms;
  -o-transition: -o-transform 700ms 300ms, opacity 700ms 300ms;
  transition: transform 700ms 300ms, opacity 700ms 300ms; }
  .panel.panel--moral {
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
    left: 0; }
  .panel.panel--ceremonial {
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    right: 0; }
  .panel .panel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .panel .content {
    -webkit-transform: translate(-50%, 260px);
    -moz-transform: translate(-50%, 260px);
    -o-transform: translate(-50%, 260px);
    transform: translate(-50%, 260px);
    position: absolute;
    top: 68%;
    left: 50%;
    width: 380px;
    font-size: 28px;
    text-align: center;
    opacity: 0.01;
    -webkit-transition: -webkit-transform 300ms 1100ms, opacity 300ms 1100ms;
    -moz-transition: -moz-transform 300ms 1100ms, opacity 300ms 1100ms;
    -o-transition: -o-transform 300ms 1100ms, opacity 300ms 1100ms;
    transition: transform 300ms 1100ms, opacity 300ms 1100ms; }
    .panel .content img {
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: absolute;
      bottom: calc(100% + 25px);
      left: 50%; }
    .panel .content .icon-reference {
      display: inline-block;
      position: relative;
      top: 0.08em;
      color: inherit;
      text-decoration: none; }

.reference {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  z-index: 2;
  font-size: 18px;
  background-color: white;
  line-height: 1.4;
  color: #000;
  opacity: 0.05;
  -webkit-transition: -webkit-transform 400ms 0ms, opacity 0ms 400ms;
  -moz-transition: -moz-transform 400ms 0ms, opacity 0ms 400ms;
  -o-transition: -o-transform 400ms 0ms, opacity 0ms 400ms;
  transition: transform 400ms 0ms, opacity 0ms 400ms; }
  .reference.reference--moral {
    -webkit-transform: translate(-99.5%, 0);
    -moz-transform: translate(-99.5%, 0);
    -o-transform: translate(-99.5%, 0);
    transform: translate(-99.5%, 0);
    left: 0; }
  .reference.reference--ceremonial {
    -webkit-transform: translate(99.5%, 0);
    -moz-transform: translate(99.5%, 0);
    -o-transform: translate(99.5%, 0);
    transform: translate(99.5%, 0);
    right: 0; }
  .reference.open {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
    -webkit-transition: -webkit-transform 400ms 0ms, opacity 0ms 0ms;
    -moz-transition: -moz-transform 400ms 0ms, opacity 0ms 0ms;
    -o-transition: -o-transform 400ms 0ms, opacity 0ms 0ms;
    transition: transform 400ms 0ms, opacity 0ms 0ms; }
  .reference .close-reference {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    background-image: url("../img/icon-close.svg"); }
  .reference .reference-content {
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    padding: 0 80px; }
    .reference .reference-content p {
      margin-bottom: 2.0em; }
    .reference .reference-content ul {
      list-style: disc inside; }
    .reference .reference-content ol {
      list-style: decimal inside; }

.main_nav .control-arrow {
  position: absolute;
  left: 50%;
  width: 60px;
  margin-left: -30px;
  font-size: 50px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 350ms 0ms, visibility 0ms 350ms;
  -moz-transition: opacity 350ms 0ms, visibility 0ms 350ms;
  -o-transition: opacity 350ms 0ms, visibility 0ms 350ms;
  transition: opacity 350ms 0ms, visibility 0ms 350ms; }
  .main_nav .control-arrow.control-prev {
    top: 2px; }
  .main_nav .control-arrow.control-next {
    bottom: 20px; }
  .main_nav .control-arrow.visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 350ms 0ms, visibility 0ms 0ms;
    -moz-transition: opacity 350ms 0ms, visibility 0ms 0ms;
    -o-transition: opacity 350ms 0ms, visibility 0ms 0ms;
    transition: opacity 350ms 0ms, visibility 0ms 0ms; }