/* 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;
}

body {
  background-color: #131424;
  color: #000;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

h1 {
  text-align: center;
  font-weight: bold;
  color: grey;
}

@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-Thin.woff) format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-ThinItalic.woff) format("woff");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-LightItalic.woff) format("woff");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-RegularItalic.woff) format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-MediumItalic.woff) format("woff");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-BoldItalic.woff) format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: SMGSans;
  src: url(//smgco-images.s3.amazonaws.com/fonts/SMGSans-Fat.woff) format("woff");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "special_eliteregular";
  src: url("../fonts/SpecialElite-webfont.eot");
  src: url("../fonts/SpecialElite-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/SpecialElite-webfont.woff2") format("woff2"), url("../fonts/SpecialElite-webfont.woff") format("woff"), url("../fonts/SpecialElite-webfont.ttf") format("truetype"), url("../fonts/SpecialElite-webfont.svg#special_eliteregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*
@font-face {
    font-family: 'latin_modern_mono_light10Rg';
    src: url('fonts/lmmonolt10-regular-webfont.eot');
    src: url('fonts/lmmonolt10-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lmmonolt10-regular-webfont.woff2') format('woff2'),
         url('fonts/lmmonolt10-regular-webfont.woff') format('woff'),
         url('fonts/lmmonolt10-regular-webfont.ttf') format('truetype'),
         url('fonts/lmmonolt10-regular-webfont.svg#latin_modern_mono_light10Rg') format('svg');
    font-weight: normal;
    font-style: normal;

}
*/
body,
button {
  font-family: "SMGSans", sans-serif;
}

#dialogue ._character {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
}
@media screen and (min-width: 950px) {
  #dialogue ._character {
    font-size: 16px;
    line-height: 1.3;
  }
}
@media screen and (min-width: 1200px) {
  #dialogue ._character {
    font-size: 18px;
    line-height: 1.3;
  }
}
@media (min-width: 950px) {
  #dialogue ._character {
    padding-top: 16px !important;
  }
}
@media (min-width: 1200px) {
  #dialogue ._character {
    padding-top: 18px !important;
  }
}

#dialogue ._narrator {
  font-size: 19px;
  line-height: 1.4;
  font-family: "special_eliteregular";
  font-weight: 400;
}
@media screen and (min-width: 950px) {
  #dialogue ._narrator {
    font-size: 21px;
    line-height: 1.4;
  }
}
@media screen and (min-width: 1200px) {
  #dialogue ._narrator {
    font-size: 24px;
    line-height: 1.4;
  }
}

.font__bigheader {
  font-size: 28px;
  line-height: 1.1;
}
@media screen and (min-width: 400px) {
  .font__bigheader {
    font-size: 32px;
    line-height: 1.1;
  }
}
@media screen and (min-width: 500px) {
  .font__bigheader {
    font-size: 40px;
    line-height: 1.1;
  }
}
@media screen and (min-width: 1000px) {
  .font__bigheader {
    font-size: 54px;
    line-height: 1.1;
  }
}

.font__title {
  color: #50b4d1;
  font-size: 18px;
  line-height: 1.1;
}
@media screen and (min-width: 600px) {
  .font__title {
    font-size: 21px;
    line-height: 1.1;
  }
}
@media screen and (min-width: 1000px) {
  .font__title {
    font-size: 24px;
    line-height: 1.1;
  }
}

.font__header {
  color: #fff;
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 500;
}
@media screen and (min-width: 1000px) {
  .font__header {
    font-size: 40px;
    line-height: 1.1;
  }
}

.font__copy {
  font-size: 14px;
  line-height: 1.4;
}
@media screen and (min-width: 400px) {
  .font__copy {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media screen and (min-width: 650px) {
  .font__copy {
    font-size: 18px;
    line-height: 1.5;
  }
}

.font__button {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}
@media screen and (min-width: 900px) {
  .font__button {
    font-size: 24px;
    line-height: 1.4;
  }
}
@media screen and (min-width: 1200px) {
  .font__button {
    font-size: 28px;
    line-height: 1.4;
  }
}

.font__supportbutton {
  font-size: 14px;
  line-height: 1;
  display: block;
}
@media screen and (min-width: 900px) {
  .font__supportbutton {
    font-size: 16px;
    line-height: 1;
  }
}
@media screen and (min-width: 1200px) {
  .font__supportbutton {
    font-size: 18px;
    line-height: 1;
  }
}
@media screen and (min-width: 1250px) {
  .font__supportbutton {
    font-size: 22px;
    line-height: 1;
  }
}

body {
  background-color: #02000A;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

a:focus {
  box-shadow: 0 0 5px #51cbee;
}

.fixed-width-wrapper {
  max-width: 1260px;
  margin: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

.fixed-width-wrapper-help {
  max-width: 1060px;
  margin: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

.container {
  display: block;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

p, a {
  line-height: 1.7em;
  font-size: 13pt;
  color: #fff;
}

p.choice {
  text-align: center;
}

a {
  text-decoration: none;
}

a:hover {
  color: #fff;
}

#wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: auto;
  overflow: hidden;
  opacity: 0;
  background-color: #02000A;
}

#intro ._character,
#outro ._character {
  top: 140px;
  left: 80px;
  width: 25%;
  height: auto;
  z-index: 3;
  transform: scale(0);
  position: absolute;
}

#intro ._character,
#outro ._character {
  top: 250px;
}

#outro ._character {
  transform: scale(1);
  top: 150px;
}

#choices,
#intro,
#dialogue {
  display: block;
}

#intro,
#dialogue,
#intro,
#choices {
  /*display:none;*/
}

#narrator,
#player,
#character {
  display: none;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 32px;
  max-width: 1000px;
  margin: auto;
}

#map,
#story {
  display: none;
}

#choices,
#dialogue {
  /*z-index:2000 !important;
  display:block !important;*/
}

@keyframes pulse_animation {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.8);
  }
  60% {
    transform: scale(1);
  }
  70% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
._pulse {
  animation-name: pulse_animation;
  animation-duration: 4000ms;
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@media (max-width: 700px) {
  #wrapper {
    height: auto;
    overflow-y: auto;
  }
  #wrapper.-intro {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  body {
    height: auto;
    max-height: 100%;
    overflow-y: auto;
  }
}
.clearfix:after, #stats ._skills .skill__globes:after, #stats ._skills:after, #stats ._powerrestored:after, #help .help__slide:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix, #stats ._skills .skill__globes, #stats ._skills, #stats ._powerrestored, #help .help__slide {
  display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix, * html #stats ._skills .skill__globes, #stats ._skills * html .skill__globes, * html #stats ._skills, #stats * html ._skills, * html #stats ._powerrestored, #stats * html ._powerrestored, * html #help .help__slide, #help * html .help__slide {
  height: 1%;
}

.clearfix, #stats ._skills .skill__globes, #stats ._skills, #stats ._powerrestored, #help .help__slide {
  display: block;
}

/* close commented backslash hack */
.preloader {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.preloader__container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: perspective(1px) translateX(-50%) translateY(-50%);
  text-align: center;
}

.preloader__bar {
  color: #fff;
}

.preloader__title {
  margin-bottom: 10px;
  color: #2eb4d8;
  font-weight: 400;
}

.hidden_preload {
  width: 1px;
  height: 1px;
  opacity: 0;
  left: 0;
  top: 0;
  position: fixed;
  pointer-events: none;
  -webkit-user-select: none;
  -open-khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#captial {
  position: absolute;
  bottom: 30px;
  left: 30px;
  height: 100%;
  width: 100%;
  z-index: 1000;
  color: #fff;
  width: 160px;
  height: 160px;
  border-radius: 100px;
  text-align: center;
  font-weight: bold;
  transform: scale(0);
}
#captial._communication {
  color: #34d180;
}
#captial._curious {
  color: #b53cf5;
}
#captial._creative {
  color: #e81d6d;
}
#captial ._symbol {
  font-size: 50px;
  margin-top: 35px;
}
#captial ._value {
  font-size: 24px;
  position: relative;
  top: -10px;
}

.captialfeedback {
  /*text-decoration:underline;*/
  /*font-weight:900;*/
  font-weight: bold;
}
.captialfeedback._communication {
  color: #34d180;
}
.captialfeedback._curious {
  color: #b53cf5;
}
.captialfeedback._creative {
  color: #e81d6d;
}

#choices {
  z-index: 16;
  position: absolute;
  top: auto;
  bottom: 50px;
  right: 0%;
  width: 100%;
  text-align: center;
  display: none;
}
@media (max-width: 1300px) {
  #choices {
    bottom: 40px;
  }
}
@media (max-width: 1100px) {
  #choices {
    bottom: 30px;
  }
}
#choices._intro {
  bottom: 100px;
  left: 0%;
  right: auto;
  width: 100%;
}
#choices._sceneintro._characteractive {
  top: 480px;
}
#choices._hypothesischoiceactive {
  top: 350px;
  left: 390px;
}
#choices._hypothesischoiceactive ._choice {
  display: block;
}
#choices ._choice {
  color: #fff;
  padding: 0px 22px;
  font-weight: 400;
  border: 0px;
  margin-right: 15px;
  background: transparent;
  font-size: 16px;
  line-height: 18px;
  display: inline-block;
  transform: scale(0);
  vertical-align: top;
  -webkit-user-select: none;
  -open-khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  /*transition:transform 0.3s;*/
}
#choices ._choice._active {
  transition: transform 0.3s;
}
@media (min-width: 800px) {
  #choices ._choice {
    font-size: 18px;
    line-height: 19px;
  }
}
@media (min-width: 1100px) {
  #choices ._choice {
    font-size: 19px;
    line-height: 23px;
  }
}
@media (min-width: 1350px) {
  #choices ._choice {
    font-size: 20px;
    line-height: 26px;
  }
}
#choices ._choice._nonactive {
  pointer-events: none;
}
#choices ._choice img,
#choices ._choice span {
  pointer-events: none;
}
#choices ._choice img {
  width: 140px;
  height: 140px;
}
@media (max-width: 950px) {
  #choices ._choice img {
    width: 110px;
    height: 110px;
  }
}
#choices ._label {
  display: block;
  max-width: 200px;
  text-align: center;
  margin-top: 7px;
}
@media (max-width: 950px) {
  #choices ._label {
    max-width: 160px;
  }
}
#choices ._choice:hover {
  cursor: pointer;
  color: #2eb4d8;
  /*transform:scale(1.1);*/
}
#choices ._choice._active:hover {
  transform: scale(1.1) !important;
}
#choices ._choice._clicked:focus {
  box-shadow: 0 0 0px #51cbee;
}
@media (max-width: 700px) {
  #choices {
    text-align: left;
    width: 100%;
    right: auto;
    top: auto;
    bottom: auto;
    position: relative;
    padding-bottom: 20px;
  }
  #choices ._choice {
    margin-bottom: 0px;
  }
  #choices ._choice img {
    width: 90px;
    height: 90px;
    float: left;
    margin-bottom: 0px;
  }
  #choices ._choice ._label {
    overflow: auto;
    text-align: left;
    max-width: 100%;
    padding-top: 35px;
    padding-left: 20px;
    position: relative;
  }
}

@media (max-width: 700px) {
  #wrapper.-intro #choices {
    text-align: center;
  }
  #wrapper.-intro ._choice {
    margin-right: 0px;
    text-align: center;
    padding-left: 7px;
    padding-right: 7px;
  }
  #wrapper.-intro ._choice ._label {
    text-align: center;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 18px;
    padding-left: 0px;
  }
  #wrapper.-intro ._choice img {
    float: none;
    margin-bottom: 0px;
  }
}
@media (max-width: 400px) {
  #wrapper.-intro ._choice {
    width: 33.3333333333%;
    padding-left: 0px;
    padding-right: 0px;
  }
  #wrapper.-intro ._choice img {
    width: 80px;
    height: 80px;
  }
  #wrapper.-intro ._choice ._label {
    font-size: 12px;
    line-height: 14px;
  }
}

@media (max-width: 400px) {
  #choices.-c4 ._choice {
    width: 50%;
    margin-bottom: 20px;
  }
}
#dialogue {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 15;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
#dialogue._sceneintro #group {
  right: auto;
  left: 50%;
  margin-left: -180px;
}
#dialogue._sceneintro #character {
  top: 310px;
}
#dialogue._sceneoutro {
  /*top:310px;*/
}
#dialogue #group {
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: #000;
  width: 40%;
  max-width: 530px;
  top: 35%;
  left: 51%;
  min-width: 300px;
  padding: 20px;
  position: absolute;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  #dialogue #group {
    left: 55%;
    font-size: 20px;
  }
}
#dialogue #group ._item {
  margin-bottom: 30px;
  position: relative;
  transform: scale(0);
}
#dialogue #group ._character {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 15px;
  color: #000;
  background-color: #fff;
  display: inline-block;
}
#dialogue #group ._character:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 22px 25px;
  border-color: transparent transparent #ffffff transparent;
  bottom: 20px;
  left: -25px;
}
@media (max-width: 700px) {
  #dialogue #group ._character:before {
    top: -10px;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 15px 10px;
    border-color: transparent transparent #ffffff transparent;
  }
}
#dialogue #group ._character._myr {
  font-weight: bold;
  background-color: #1397c8;
  color: #fff;
  font-style: italic;
  border: none;
  font-size: 21px;
}
@media (max-width: 1200px) {
  #dialogue #group ._character._myr {
    font-size: 20px;
  }
}
@media (max-width: 950px) {
  #dialogue #group ._character._myr {
    font-size: 19px;
  }
}
#dialogue #group ._character._myr:before {
  display: none !important;
}
@media (max-width: 400px) {
  #dialogue #group ._narrator {
    margin-bottom: 18px;
    font-size: 18px;
  }
}
#dialogue.-intro #group {
  width: 100%;
  right: auto;
  text-align: center;
  top: 45%;
  left: 0%;
  max-width: 100%;
}
@media (max-width: 700px) {
  #dialogue.-intro {
    padding-top: 10%;
  }
  #dialogue.-intro #group {
    top: 0%;
    width: 100%;
    max-width: 90%;
    margin-left: 0px;
    left: 0%;
    margin: auto;
  }
}
@media (max-width: 1000px) {
  #dialogue #group {
    max-width: 300px;
  }
}
@media (max-width: 700px) {
  #dialogue {
    position: relative;
    height: auto;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding-top: 60%;
    pointer-events: auto;
    left: 0%;
    width: 100%;
  }
  #dialogue #group {
    position: relative;
    height: auto;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    transform: translateY(0px) !important;
    text-align: center;
    padding-bottom: 0px;
    max-width: 100%;
    width: 100%;
    max-width: 500px;
    margin: auto;
  }
  #dialogue #group ._character {
    margin-left: 0;
    max-width: 100%;
    margin-right: 0px;
    padding-top: 9px;
    padding-bottom: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  #dialogue #group ._character:after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-size: 100% 100%;
    position: absolute;
    left: -80px;
    bottom: 0px;
  }
  #dialogue #group ._character._mrpick:after {
    background-image: url("../img/characters/heads/mrpick.png");
  }
  #dialogue #group ._narrator {
    border-radius: 4px;
  }
}
@media (max-width: 500px) {
  #dialogue #group {
    min-width: 100%;
  }
}

#theories {
  position: absolute;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1003;
  display: none;
  text-align: center;
}
#theories ._popup ._evidencefound,
#theories ._list ._title {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
  text-align: center;
  margin-bottom: 0px;
  z-index: 2;
  position: relative;
}
@media (max-width: 600px) {
  #theories ._popup ._evidencefound,
#theories ._list ._title {
    font-size: 30px;
  }
}
@media (max-width: 400px) {
  #theories ._popup ._evidencefound,
#theories ._list ._title {
    font-size: 26px;
  }
}
#theories ._popup.-disproved ._evidencefound,
#theories ._popup.-disproved ._list ._title {
  color: #e6004c;
}
#theories ._bg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1;
}
#theories ._popup {
  display: none;
  position: relative;
}
#theories ._popup ._graphic {
  position: relative;
  z-index: 2;
  display: inline-block;
  border-radius: 150px;
  width: 450px;
  height: auto;
  margin-top: 5px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  box-sizing: border-box;
  line-height: 0px;
  -webkit-user-select: none;
  -open-khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
@media (max-width: 700px) {
  #theories ._popup ._graphic {
    width: 70%;
  }
}
@media (max-width: 400px) {
  #theories ._popup ._graphic {
    width: 75%;
  }
}
#theories ._popup ._graphic ._img {
  width: 100%;
  height: 100%;
}
#theories ._list {
  color: #fff;
  width: 80%;
  margin: auto;
}
#theories ._list ._title {
  margin-top: 60px;
}
#theories ._list ._item {
  margin-top: 15px;
  font-size: 24px;
}

#intro {
  display: none;
  background-color: #02000A;
  z-index: 14;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
}
#intro .intro__bg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-image: url(../img/splash/intro-background.jpg);
  background-position: 50% 0%;
  background-size: cover;
}
#intro .intro__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

#intro-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

#intro-video video {
  opacity: 0;
  width: 100%;
  height: 100%;
}

.video__skip {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  display: none;
  z-index: 2;
  font-size: 20px;
}
.video__skip:hover {
  color: #2eb4d8;
}
@media (max-width: 1100px) {
  .video__skip {
    font-size: 18px;
  }
}

#location {
  z-index: 10;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
#location ._location,
#location ._characters {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  background-size: cover;
  background-position: 0% 50%;
}
#location ._museum.-open {
  background-image: url("../img/locations/museum-open.jpg") !important;
}
#location ._characters {
  z-index: 2;
}
#location ._bg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
}
#location ._title {
  color: grey;
  z-index: 2;
  position: relative;
  text-align: center;
  font-size: 16px;
  display: none;
}
#location ._character {
  bottom: 0px;
  left: 50%;
  margin-left: -25%;
  height: 85%;
  min-width: 210px;
  width: auto;
  z-index: 3;
  transform: scale(0);
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
  -open-khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
@media (max-width: 1100px) {
  #location ._character {
    left: 45%;
  }
}
@media (max-width: 850px) {
  #location ._character {
    left: 36%;
  }
}
#location ._effectimage {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-size: cover;
  background-position: 0% 50%;
  opacity: 0;
}
#location .location__gradient {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
  line-height: 0px;
}
#location .location__gradient__image {
  width: 100%;
  height: auto;
}
#location .location__gradient__blackout {
  background-color: #02000a;
  width: 100%;
  height: 100px;
}
#location ._characters {
  z-index: 2;
}
@media (max-width: 700px) {
  #location ._location {
    position: relative;
    height: auto;
  }
  #location ._location:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 81.8181818182%;
  }
  #location ._location > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #location ._character {
    right: auto;
    left: auto;
    width: 30%;
    min-width: 30%;
    /* top: 8%; */
    left: 50%;
    margin-left: -15%;
    height: auto;
    top: 10%;
  }
}

#map {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 11;
  display: block;
  background-color: #000000;
  opacity: 0.15;
  overflow: hidden;
}
@media (max-width: 500px) {
  #map {
    transform: scale(0.85) !important;
    transform-origin: 50% 50%;
    overflow: initial;
  }
}
@media (max-width: 450px) {
  #map #mask {
    transform: scale(0.9) !important;
    transform-origin: 50% 50%;
  }
}
@media (max-width: 400px) {
  #map #mask {
    transform: scale(0.8) !important;
    transform-origin: 50% 50%;
  }
}
@media (max-width: 360px) {
  #map #mask {
    transform: scale(0.7) !important;
    transform-origin: 50% 50%;
  }
}
#map ._bg {
  width: 100%;
  height: auto;
}
#map #mask {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 12;
  width: 3000px;
  height: 3000px;
  left: -750px;
  top: -1100px;
  pointer-events: none;
}
#map #mask.-shown {
  transition: transform 0.3s;
}
#map .mask__fix {
  width: 20%;
  height: 100%;
  top: 0px;
  right: 0px;
  background-color: black;
  z-index: 12;
  position: absolute;
}
#map #location-ui {
  position: absolute;
  top: 9%;
  z-index: 13;
  text-align: center;
  width: 100%;
}
@media (max-width: 600px) {
  #map #location-ui {
    top: 10%;
    width: 120%;
    transform: translateX(-5%);
  }
}
#map #location-ui ._title {
  color: #fff;
  display: inline-block;
  font-weight: 600;
  font-size: 28px;
}
#map #location-ui ._title img {
  display: none;
  height: 157px;
  width: auto;
}
@media (max-width: 600px) {
  #map #location-ui ._title img {
    height: 120px;
  }
}
@media (max-width: 480px) {
  #map #location-ui ._title img {
    height: 90px;
  }
}
#map #location-ui ._title.-sportsfield ._sportsfield {
  display: inline-block;
}
#map #location-ui ._title.-towerblock ._towerblock {
  display: inline-block;
}
#map #location-ui ._title.-highstreet ._highstreet {
  display: inline-block;
}
#map #location-ui ._title.-powerstation ._powerstation {
  display: inline-block;
}
#map #location-ui ._title.-museum ._museum {
  display: inline-block;
}
#map #location-ui ._title.-fairground ._fairground {
  display: inline-block;
}
#map #location-ui ._explore {
  width: 120px;
  display: inline-block;
  text-decoration: none;
  transform: scale(0);
  position: relative;
  left: -20px;
  top: -20px;
}
@media (max-width: 600px) {
  #map #location-ui ._explore {
    width: 100px;
  }
}
#map #location-ui ._explore:hover {
  color: #fff;
}
#map #location-ui ._explore:hover ._icon {
  transform: scale(1.1);
}
#map #location-ui ._explore:hover span {
  transform: scale(1.1) translateY(10px);
  color: #2eb4d8 !important;
}
#map #location-ui ._explore ._icon {
  width: 124px;
  height: 115px;
  background-image: url(../img/ui/icons/investigate.png);
  background-size: 100% 100%;
  display: inline-block;
  transition: transform 0.3s;
}
@media (max-width: 600px) {
  #map #location-ui ._explore ._icon {
    width: 93px;
    height: 86.25px;
  }
}
@media (max-width: 480px) {
  #map #location-ui ._explore ._icon {
    width: 62px;
    height: 57.5px;
  }
}
#map #location-ui ._explore span {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 5px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.3s;
  font-weight: 700;
  position: relative;
  top: -7px;
  left: -5px;
  display: inline-block;
}
#map #mapcontainer,
#map #pointscontainer,
#map #locationscontainer,
#map #locationmarkers {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
#map ._mapoverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  z-index: 11;
  pointer-events: none;
  left: 50%;
  top: 50%;
  display: none;
}
#map #mapcontainer,
#map ._mapoverlay {
  width: 3126px;
  height: 1800px;
}
#map #pointscontainer {
  z-index: 2;
}
#map #locationscontainer {
  background-image: url(../img/map/map.jpg);
  background-size: 100% 100%;
}
#map ._point {
  position: absolute;
  background-color: #fff;
  width: 220px;
  height: 220px;
  margin-left: -110px;
  margin-top: -110px;
  border-radius: 50%;
  opacity: 0;
}
#map ._mapitem {
  width: 249px;
  height: 172px;
  background-size: 100% 100%;
  position: absolute;
  margin-left: -125px;
  margin-top: -136px;
  background-image: url(../img/map/item.png) !important;
  /*font-size:0px;*/
  font-size: 10px;
  opacity: 0.13;
  display: none;
}
#map ._mapitem span {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  color: #000;
  padding: 3px;
  background-color: #fff !important;
  display: none;
}
#map ._mapitem._sportsfield:after, #map ._mapitem._supermarket:after, #map ._mapitem._cinema:after {
  content: "Unavailable" !important;
  background-color: grey !important;
  opacity: 0.6;
}
#map ._mapitem._notactive {
  background-image: url(../img/map/unknown.png) !important;
  font-size: 0px !important;
}
#map ._mapitem._reachable {
  opacity: 1;
}
#map ._mapitem._reachable:hover {
  cursor: pointer;
}
#map ._mapitem._selected:after {
  transform: scale(1);
}
#map ._mapitem._home {
  background-image: url(../img/map/home.png);
  left: 50%;
  top: 55%;
}
#map ._mapitem._home:after {
  display: none !important;
}
#map ._mapitem._windyhill:after {
  top: 60%;
  right: -80px;
}
#map ._mapitem._friends {
  background-image: url(../img/map/khalid.png);
  left: 70%;
  top: 70%;
}
#map ._mapitem._fastfood {
  background-image: url(../img/map/fastfood.png);
  left: 49%;
  top: 32%;
}
#map ._mapitem._sportsfield {
  background-image: url(../img/map/sportsfield.png);
  left: 22%;
  top: 41%;
}
#map ._mapitem._library {
  background-image: url(../img/map/library.png);
  left: 50%;
  top: 82%;
}
#map ._mapitem._supermarket {
  background-image: url(../img/map/supermarket.png);
  left: 30%;
  top: 67%;
}
#map ._mapitem._petstore {
  background-image: url(../img/map/petstore.png);
  left: 21%;
  top: 90%;
}
#map ._mapitem._cinema {
  background-image: url(../img/map/cinema.png);
  left: 90%;
  top: 18%;
}
#map ._mapitem._fairground {
  background-image: url(../img/map/fairground.png);
  left: 73%;
  top: 40%;
}
#map ._mapitem._windyhill {
  background-image: url(../img/map/windyhill.png);
  left: 12%;
  top: 20%;
}
#map ._mapitem:after {
  position: absolute;
  display: inline-block;
  content: "Investigate >";
  top: 85%;
  right: -60px;
  color: #fff;
  padding: 5px;
  background-color: #d50d18 !important;
  font-weight: bold;
  transform: scale(0);
  transition: transform 0.3s;
  font-size: 20px;
}
#map ._mapmarker {
  background-size: 100% 100%;
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
#map ._mapmarker ._torch {
  display: block;
  position: absolute;
  background-size: 100% 100%;
  z-index: 2;
}
#map ._mapmarker ._shadow {
  display: block;
  position: absolute;
  background-image: url("../img/ui/torch/shadow-horizontal.png");
  width: 97px;
  height: 54px;
  z-index: 1;
  background-size: 100% 100%;
  top: 70px;
  left: -10px;
}
#map ._mapmarker.-up ._shadow, #map ._mapmarker.-down ._shadow {
  background-image: url("../img/ui/torch/shadow-vertical.png");
  width: 74px;
  height: 72px;
}
#map ._mapmarker.-right {
  margin-left: -40px;
  margin-top: -75px;
}
#map ._mapmarker.-right ._torch {
  background-image: url(../img/ui/torch/right.png);
  width: 148px;
  height: 128px;
}
#map ._mapmarker.-left {
  margin-left: -90px;
  margin-top: -75px;
}
#map ._mapmarker.-left ._torch {
  background-image: url(../img/ui/torch/left.png);
  width: 143px;
  height: 129px;
}
#map ._mapmarker.-left ._shadow {
  left: 50px;
}
#map ._mapmarker.-up {
  margin-left: -80px;
  margin-top: -80px;
}
#map ._mapmarker.-up ._torch {
  background-image: url(../img/ui/torch/up.png);
  width: 131px;
  height: 138px;
}
#map ._mapmarker.-up ._shadow {
  left: 21px;
  top: 85px;
}
#map ._mapmarker.-down {
  margin-left: -110px;
  margin-top: -40px;
}
#map ._mapmarker.-down ._torch {
  background-image: url(../img/ui/torch/down.png);
  width: 130px;
  height: 143px;
}
#map ._mapmarker.-down ._shadow {
  left: 60px;
  top: 25px;
}
#map ._mapmarker.-down-right {
  margin-left: -70px;
  margin-top: -75px;
}
#map ._mapmarker.-down-right ._torch {
  background-image: url(../img/ui/torch/down-right.png);
  width: 130px;
  height: 143px;
}
#map ._mapmarker.-down-right ._shadow {
  left: 0px;
  top: 27px;
}
#map ._locationmarker {
  width: 116.2px;
  height: 84.7px;
  background-image: url(../img/map/location_marker.png);
  background-size: 100% 100%;
  position: absolute;
  margin-left: -58.1px;
  margin-top: -28px;
  display: block;
  transform: scale(0);
  display: none;
}
#map #mapcontainer,
#map ._mapmarker {
  left: 50%;
  top: 50%;
}
#map #lightarea {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}
#map #lightarea img {
  width: 100%;
  height: 100%;
}
#map .map__hand {
  width: 51.7px;
  height: 77.55px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -40px;
  margin-top: -20px;
}
#map .map__hand__frame {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  z-index: 2;
}
#map .map__hand__frame.-frame1 {
  background-image: url(../img/ui/handtap/hand2.png);
}
#map .map__hand__frame.-frame2 {
  background-image: url(../img/ui/handtap/hand1.png);
  opacity: 0;
}
#map .map__hand__ring {
  position: absolute;
  top: 7px;
  left: 8px;
  border-radius: 100%;
  background-color: rgba(36, 155, 188, 0);
  width: 16.5px;
  height: 16.5px;
  z-index: 1;
}
#map .map__hand__ring.-animate {
  animation: pulse 1.3s;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(36, 155, 188, 0.7);
    background-color: #249bbc;
  }
  65% {
    background-color: #249bbc;
  }
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(36, 155, 188, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(36, 155, 188, 0);
    background-color: rgba(36, 155, 188, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(36, 155, 188, 0.7);
    box-shadow: 0 0 0 0 rgba(36, 155, 188, 0.7);
    background-color: #249bbc;
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(36, 155, 188, 0);
    box-shadow: 0 0 0 30px rgba(36, 155, 188, 0);
  }
  65% {
    background-color: #249bbc;
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(36, 155, 188, 0);
    box-shadow: 0 0 0 0 rgba(36, 155, 188, 0);
    background-color: rgba(36, 155, 188, 0);
  }
}

#outro {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: #000;
  z-index: 5;
  color: #fff;
  display: none;
}

#splash {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 20;
  background-color: #02000A;
}
#splash .splash__bg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-image: url(../img/splash/background.jpg);
  background-position: 50% 0%;
  background-size: cover;
  opacity: 0;
}
#splash .splash__content {
  position: relative;
  z-index: 2;
}
#splash ._splash-image {
  max-width: 100%;
  width: 68%;
  height: auto;
  position: relative;
  text-align: center;
  display: inline-block;
}
@media (max-width: 1100px) {
  #splash ._splash-image {
    width: 80%;
  }
}
@media (max-width: 900px) {
  #splash ._splash-image {
    width: 100%;
  }
}
@media (max-width: 650px) {
  #splash ._splash-image {
    margin-top: 20%;
  }
}
@media (max-width: 500px) {
  #splash ._splash-image {
    margin-top: 25%;
  }
}
#splash ._splash-image img {
  width: 100%;
  height: auto;
}
#splash ._splash-image ._light {
  position: absolute;
  top: 0px;
  left: 0px;
}
#splash ._splash-button {
  font-weight: 600;
  transform: scale(0);
  transition: transform 0.3s;
}
#splash ._splash-button:hover {
  color: #2eb4d8;
  cursor: pointer;
  transform: scale(1.1) !important;
}
#splash ._play-button {
  position: relative;
  display: block;
  width: 124px;
  margin: auto;
}
@media (min-width: 1300px) {
  #splash ._play-button {
    position: fixed;
    left: 50%;
    margin-left: -64px;
    bottom: 60px;
  }
}
#splash ._about-button {
  position: relative;
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: inline-block;
}
#splash ._button-wrapper {
  width: 100%;
  position: absolute;
  bottom: 30px;
}
#splash ._button-wrapper ._help-button {
  position: absolute;
  right: 150px;
  top: 50px;
  max-width: 20%;
  background: #000000;
  background-image: -webkit-linear-gradient(top, #000000, #5eb0e0);
  background-image: -moz-linear-gradient(top, #000000, #5eb0e0);
  background-image: -ms-linear-gradient(top, #000000, #5eb0e0);
  background-image: -o-linear-gradient(top, #000000, #5eb0e0);
  background-image: linear-gradient(to bottom, #000000, #5eb0e0);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  text-shadow: 0px 1px 3px #000000;
  font-family: Georgia;
  color: #ffffff;
  font-size: 30px;
  padding: 8px 15px 8px 15px;
  text-decoration: none;
}
@media (max-width: 1024px) {
  #splash ._splash-image {
    height: auto;
    position: relative;
  }
  #splash ._button-wrapper ._play-button {
    margin-left: 0%;
  }
  #splash ._button-wrapper ._about-button {
    margin-right: 0%;
    margin-top: 0%;
  }
  #splash ._button-wrapper ._help-button {
    right: 30px;
    max-width: 10%;
  }
}
@media (max-width: 700px) {
  #splash ._button-wrapper ._play-button {
    max-width: 30%;
    margin-left: 20%;
  }
  #splash ._button-wrapper ._about-button {
    max-width: 30%;
    margin-right: 30%;
    margin-top: 5%;
  }
  #splash ._button-wrapper ._help-button {
    right: 30px;
    max-width: 10%;
    top: 50px;
  }
}
@media (max-width: 590px) {
  #splash ._button-wrapper {
    width: 80%;
    postion: absolute;
    height: 0px;
    margin-top: 5%;
  }
}
@media (max-width: 480px) {
  #splash ._button-wrapper {
    width: 60%;
  }
}

#about {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1001;
  background-image: url(../img/splash/intro-background.jpg);
  background-position: 50% 0%;
  background-size: cover;
  display: none;
}
@media (max-width: 700px) {
  #about {
    position: relative;
    height: auto;
  }
}
#about .about__close {
  margin-top: 15px;
  margin-left: 15px;
}
#about ._back-arrow {
  width: 60%;
  max-width: 80px;
  height: 50px;
}
#about ._wrapper {
  position: relative;
}
#about .about-wrapper {
  padding-left: 30px;
  padding-right: 30px;
}
#about ._logo {
  text-align: center;
}
#about ._text-block {
  width: 100%;
}
#about ._TD-title {
  color: #fff;
  text-align: center;
  position: relative;
  margin-bottom: 3%;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 5%;
}
@media (max-width: 900px) {
  #about ._TD-title {
    margin-top: 50px;
  }
}
#about ._logoImage {
  max-width: 270px;
  height: auto;
}
@media (max-width: 900px) {
  #about ._logoImage {
    max-width: 200px;
  }
}
#about ._logolink.-tdlink {
  position: relative;
  left: 30px;
}
@media (max-width: 700px) {
  #about ._logolink.-tdlink {
    left: 0px;
  }
}
#about ._TD-sub-title {
  font-weight: 500;
  text-align: center;
  margin-bottom: 2%;
}
@media (max-width: 700px) {
  #about ._TD-sub-title {
    margin-top: 20px;
  }
}
#about ._about-para {
  color: #fff;
  text-align: center;
  margin: auto;
  max-width: 850px;
  margin-bottom: 2%;
}
@media (max-width: 700px) {
  #about ._about-para {
    margin-top: 20px;
  }
}
#about ._logos-and-buttons {
  margin-top: 3%;
  max-width: 100%;
  text-align: center;
}
@media (max-width: 700px) {
  #about ._logos-and-buttons {
    margin-top: 30px;
  }
}
#about ._button-list {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  background-color: #fff;
  color: #000;
}
#about ._break {
  width: 1px;
  height: 100px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.25);
  margin-left: 30px;
  margin-right: 30px;
}
@media (max-width: 700px) {
  #about ._break {
    display: none;
  }
}
@media (max-width: 800px) {
  #about .ui__button {
    max-width: 180px;
  }
}
@media (max-width: 800px) {
  #about .nav__bottom {
    position: relative;
    margin-top: 80px;
  }
  #about .ui__button {
    display: block;
    margin: auto;
    max-width: 200px;
    margin-bottom: 16px;
  }
}

.-about-showing #dialogue,
.-about-showing #choices,
.-about-showing #map,
.-about-showing #location,
.-about-showing #splash,
.-about-showing #intro,
.-about-showing #ui .theories__display,
.-about-showing #stats,
.-help-showing #dialogue,
.-help-showing #choices,
.-help-showing #map,
.-help-showing #location,
.-help-showing #splash,
.-help-showing #intro,
.-help-showing #ui .theories__display,
.-help-showing #stats {
  display: none !important;
}

.-help-showing #wrapper {
  position: relative;
  height: auto;
}
.-help-showing body {
  max-height: initial;
  overflow-y: initial;
}

.-about-showing #wrapper {
  overflow-y: initial;
}
@media (max-width: 700px) {
  .-about-showing #wrapper {
    position: relative;
    height: auto;
  }
  .-about-showing body {
    max-height: initial;
    overflow-y: initial;
  }
}

@media (max-width: 700px) {
  .-location-showing #splash,
.-location-showing #intro,
.-location-showing .preloader,
.-results-showing #splash,
.-results-showing #intro,
.-results-showing .preloader {
    display: none !important;
  }
  .-location-showing body,
.-results-showing body {
    max-height: initial;
    overflow-y: initial;
  }
  .-location-showing #wrapper,
.-results-showing #wrapper {
    position: relative;
    height: auto;
  }
}
#help {
  position: relative;
  height: auto;
  z-index: 1001;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
}
#help .help__background {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  position: fixed;
  background-image: url(../img/splash/intro-background.jpg);
}
#help .help__content {
  position: relative;
  z-index: 2;
}
#help .help__close {
  margin-top: 15px;
  margin-left: 15px;
}
#help ._back-button {
  position: relative;
  right: 0;
  top: 0px;
  width: 20px;
  height: 20px;
}
#help .help__title {
  margin-top: 3%;
  margin-bottom: 10px;
}
@media (max-width: 520px) {
  #help .help__title {
    margin-top: 0px;
  }
}
#help .help__slides {
  max-width: 800px;
  margin: auto;
  margin-top: 2%;
}
#help .help__slide {
  margin-bottom: 60px;
}
@media (max-width: 520px) {
  #help .help__slide {
    margin-bottom: 40px;
  }
}
#help .help__slideimg {
  float: left;
  margin-right: 40px;
  width: 45%;
  border: 3px #595867 solid;
}
@media (max-width: 520px) {
  #help .help__slideimg {
    width: 100%;
    margin-right: 0px;
    float: none;
  }
}
#help .help__slideinfo {
  overflow: auto;
  padding-top: 6%;
}
@media (max-width: 800px) {
  #help .help__slideinfo {
    padding-top: 3%;
  }
}
@media (max-width: 520px) {
  #help .help__slideinfo {
    overflow: intial;
    margin-top: 20px;
    padding-top: 0px;
  }
}

#stats {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  height: auto;
  background-size: cover;
  z-index: 1000;
  color: #fff;
  display: none;
  text-align: center;
}
#stats .stats__bg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
  line-height: 0px;
  font-size: 0px;
}
#stats .stats__bg img {
  width: 100%;
  height: auto;
}
#stats .stats__bg__towndark {
  width: 100%;
  height: auto;
}
#stats .stats__bg__town {
  position: relative;
  width: 100%;
}
#stats .stats__bg__townlight {
  z-index: 2;
  position: absolute;
  width: 100% !important;
  height: auto;
  top: 0px;
  left: 0px;
  opacity: 0;
}
#stats .stats__content {
  position: relative;
  z-index: 2;
  background-image: url(../img/results/star-tile.png);
  background-size: cover;
  background-size: 100% auto;
  background-repeat: repeat-y;
  line-height: 0px;
}
#stats .star__image {
  z-index: 1;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0px;
}
#stats .star__image.-top {
  top: 0px;
}
@media (min-width: 1000px) {
  #stats .star__image.-top {
    top: -300px;
  }
}
@media (min-width: 1200px) {
  #stats .star__image.-top {
    top: -500px;
  }
}
@media (min-width: 1400px) {
  #stats .star__image.-top {
    top: -700px;
  }
}
@media (min-width: 1550px) {
  #stats .star__image.-top {
    top: -1000px;
  }
}
@media (min-width: 1650px) {
  #stats .star__image.-top {
    top: -1100px;
  }
}
@media (min-width: 1800px) {
  #stats .star__image.-top {
    display: none;
  }
}
#stats .star__image.-bottom {
  bottom: 0px;
}
#stats .content__layer {
  z-index: 2;
  position: relative;
}
#stats ._title {
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 12px #2bf6f8;
  font-weight: 500;
  padding-top: 10%;
  opacity: 0;
  transition: text-shadow 0.9s;
}
@media (max-width: 600px) {
  #stats ._title {
    padding-top: 100px;
  }
}
#stats ._subtitle {
  margin-top: 30px;
  margin-bottom: 20px;
  opacity: 0;
}
#stats ._scrolldown {
  position: fixed;
  bottom: 10%;
  left: 0px;
  width: 100%;
  text-align: center;
  z-index: 4;
  opacity: 0;
}
#stats ._scrolldown ._label {
  color: #fff;
}
#stats ._scrolldown ._icon {
  width: 25px;
  height: 14px;
  background-image: url(../img/ui/icons/down-arrow.png);
  display: block;
  margin: auto;
  margin-top: 5px;
  background-size: 100% 100%;
}
#stats .theories__display {
  text-align: center;
  padding-left: 0px;
  opacity: 0;
}
@media (max-width: 700px) {
  #stats .theories__display {
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
  }
}
#stats .theories__display ._theory {
  transform: scale(1);
  width: 100px;
  height: auto;
  margin-right: 30px;
  border-radius: 0px;
  background-color: transparent;
  background-image: url(../img/theories/popup/base.png);
  background-size: 100% 100%;
  line-height: 0px;
}
#stats .theories__display ._theory._activated {
  background-image: none;
}
#stats .theories__display ._theory ._spacer {
  display: inline;
}
#stats .theories__display ._theory:last-child {
  margin-right: 0px;
}
@media (max-width: 700px) {
  #stats .theories__display ._theory {
    width: 18%;
    height: auto;
    margin-right: 2%;
  }
  #stats .theories__display ._theory img {
    width: 100%;
    height: 100%;
  }
  #stats .theories__display ._theory:last-child {
    margin-right: 0px;
  }
}
#stats .theories__display ._theory.-disproved ._active {
  display: none !important;
}
#stats .theories__display ._theory ._spacer {
  position: relative;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: auto;
}
#stats .theories__display ._theory._hamsters ._active {
  background-image: url(../img/theories/popup/hamsters_active.png);
}
#stats .theories__display ._theory._hamsters ._disproved {
  background-image: url(../img/theories/popup/hamsters_disproved.png);
}
#stats .theories__display ._theory._government ._active {
  background-image: url(../img/theories/popup/government_active.png);
}
#stats .theories__display ._theory._government ._disproved {
  background-image: url(../img/theories/popup/government_disproved.png);
}
#stats .theories__display ._theory._aliens ._active {
  background-image: url(../img/theories/popup/aliens_active.png);
}
#stats .theories__display ._theory._aliens ._disproved {
  background-image: url(../img/theories/popup/aliens_disproved.png);
}
#stats .theories__display ._theory._lightning ._active {
  background-image: url(../img/theories/popup/lightning_active.png);
}
#stats .theories__display ._theory._lightning ._disproved {
  background-image: url(../img/theories/popup/lightning_disproved.png);
}
#stats .theories__display ._theory._fairground ._active {
  background-image: url(../img/theories/popup/fairground_active.png);
}
#stats .theories__display ._theory._fairground ._disproved {
  background-image: url(../img/theories/popup/fairground_disproved.png);
}
#stats .theories__display ._theory._criminals ._active {
  background-image: url(../img/theories/popup/criminals_active.png);
}
#stats .theories__display ._theory._criminals ._disproved {
  background-image: url(../img/theories/popup/criminals_disproved.png);
}
#stats ._powerrestored {
  opacity: 0;
  margin-top: 8%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 730px) {
  #stats ._powerrestored {
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
  }
}
#stats ._powerrestored ._icon {
  width: 300px;
  float: left;
}
@media (max-width: 750px) {
  #stats ._powerrestored ._icon {
    width: 240px;
  }
}
@media (max-width: 550px) {
  #stats ._powerrestored ._icon {
    width: 180px;
  }
}
@media (max-width: 480px) {
  #stats ._powerrestored ._icon {
    float: none;
    margin: auto;
  }
}
#stats ._powerrestored ._text {
  overflow: auto;
  text-align: left;
  padding-left: 50px;
  padding-top: 10%;
}
@media (max-width: 750px) {
  #stats ._powerrestored ._text {
    padding-left: 30px;
  }
}
@media (max-width: 550px) {
  #stats ._powerrestored ._text {
    padding-top: 20px;
  }
}
@media (max-width: 480px) {
  #stats ._powerrestored ._text {
    padding-top: 30px;
    padding-left: 0px;
    text-align: center;
  }
}
#stats ._powerrestored ._text ._header {
  transform-origin: 50% 50%;
  display: inline-block;
  margin-bottom: 14px;
}
#stats ._powerrestored ._text ._copy {
  font-weight: 400;
  margin-top: 0px;
}
#stats ._skills {
  clear: both;
  margin-top: 125px;
  opacity: 0;
}
@media (max-width: 700px) {
  #stats ._skills {
    margin-top: 100px;
  }
}
#stats ._skills .skill__globes {
  clear: both;
}
#stats ._skills .skill,
#stats ._skills .skill__bg,
#stats ._skills .skill__icon,
#stats ._skills .skill__overlay,
#stats ._skills .skill__liquidmask,
#stats ._skills .skill__liquid {
  width: 140px;
  height: 140px;
}
@media (max-width: 700px) {
  #stats ._skills .skill,
#stats ._skills .skill__bg,
#stats ._skills .skill__icon,
#stats ._skills .skill__overlay,
#stats ._skills .skill__liquidmask,
#stats ._skills .skill__liquid {
    width: 110px;
    height: 110px;
  }
  #stats ._skills .skill__label {
    font-size: 14px;
  }
}
@media (max-width: 470px) {
  #stats ._skills .skill,
#stats ._skills .skill__bg,
#stats ._skills .skill__icon,
#stats ._skills .skill__overlay,
#stats ._skills .skill__liquidmask,
#stats ._skills .skill__liquid {
    width: 80px;
    height: 80px;
  }
  #stats ._skills .skill__label {
    font-size: 12px;
  }
}
#stats ._skills .-bigskill {
  margin-right: 0px !important;
  width: 200px;
  height: 200px;
  float: left;
  margin-top: 4% !important;
  display: none;
  transition: left 0.6s, transform 0.6s;
  transform: translateX(0px);
  /*FOR CENTERING
        left:50% !important;
  margin-left:-100px;
        */
}
@media (min-width: 700px) {
  #stats ._skills .-bigskill.-hidden {
    left: 50%;
    transform: translateX(-100px);
  }
}
@media (max-width: 650px) {
  #stats ._skills .-bigskill {
    float: none;
  }
}
#stats ._skills .-bigskill .skill__bg,
#stats ._skills .-bigskill .skill__icon,
#stats ._skills .-bigskill .skill__overlay,
#stats ._skills .-bigskill .skill__liquidmask,
#stats ._skills .-bigskill .skill__liquid {
  width: 200px;
  height: 200px;
}
@media (max-width: 750px) {
  #stats ._skills .-bigskill {
    width: 160px;
    height: 160px;
  }
  #stats ._skills .-bigskill .skill__bg,
#stats ._skills .-bigskill .skill__icon,
#stats ._skills .-bigskill .skill__overlay,
#stats ._skills .-bigskill .skill__liquidmask,
#stats ._skills .-bigskill .skill__liquid {
    width: 160px;
    height: 160px;
  }
}
#stats ._skills .-bigskill .skill__badge {
  position: absolute;
  width: 320px;
  height: 291px;
  background-size: 100% 100%;
  z-index: 4;
  left: -60px;
  top: -30px;
  display: block;
}
#stats ._skills .-bigskill .skill__badge .skill__badgelayer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
}
@media (max-width: 750px) {
  #stats ._skills .-bigskill .skill__badge {
    width: 256px;
    height: 232.8px;
    left: -48px;
    top: -24px;
  }
}
#stats ._skills .skill {
  display: inline-block;
  left: 0px;
  top: 0px;
  margin-right: 110px;
  margin-top: 1px;
}
#stats ._skills .skill:last-child {
  margin-right: 0px;
}
@media (max-width: 1000px) {
  #stats ._skills .skill {
    margin-right: 8%;
  }
}
#stats ._skills .-bigskill {
  opacity: 0;
}
#stats ._skills ._skillssubtitle {
  margin-bottom: 30px;
}
@media (max-width: 700px) {
  #stats ._skills ._skillssubtitle {
    margin-bottom: 20px;
  }
}
@media (max-width: 800px) {
  #stats ._skills ._badgeskill {
    padding-left: 80px;
    padding-right: 30px;
    box-sizing: border-box;
  }
}
@media (max-width: 650px) {
  #stats ._skills ._badgeskill {
    padding-left: 30px;
    padding-right: 30px;
  }
  #stats ._skills ._badgeskill ._badgecontenttext {
    width: 100%;
    display: block;
    overflow: initial;
    padding-left: 0%;
    padding-top: 30px;
    text-align: center;
  }
}
@media (max-width: 650px) {
  #stats ._skills ._badgeskill ._badgecontenttext {
    padding-top: 40px;
  }
}
#stats ._skills ._badgetitle {
  margin-top: 110px;
  margin-bottom: 40px;
  opacity: 0;
}
@media (max-width: 1000px) {
  #stats ._skills ._badgetitle {
    margin-bottom: 30px;
  }
}
@media (max-width: 650px) {
  #stats ._skills ._badgetitle {
    margin-bottom: 0px;
  }
}
#stats ._skills ._badgecontent {
  max-width: 700px;
  margin: auto;
}
#stats ._skills ._badgecontent.-creative ._badgesubheader {
  color: #e81d6d;
}
#stats ._skills ._badgecontent.-communication ._badgesubheader {
  color: #34d180;
}
#stats ._skills ._badgecontent.-curious ._badgesubheader {
  color: #b53cf5;
}
#stats ._skills ._badgecontent.-balanced ._badgesubheader {
  color: #ff873e;
}
#stats ._skills ._badgecontent.-nothing ._badgesubheader {
  color: #0dabd8;
}
#stats ._skills ._badgecontent.-curious .-b0 {
  background-image: url(../img/ui/badges/badge_explorer_glow.png);
}
#stats ._skills ._badgecontent.-curious .-b1 {
  background-image: url(../img/ui/badges/badge_explorer_icon.png);
}
#stats ._skills ._badgecontent.-curious .-b2 {
  background-image: url(../img/ui/badges/badge_explorer_clouds.png);
}
#stats ._skills ._badgecontent.-curious .-b3 {
  background-image: url(../img/ui/badges/badge_explorer_banner.png);
}
#stats ._skills ._badgecontent.-curious .-b4 {
  background-image: url(../img/ui/badges/badge_explorer_stars.png);
}
#stats ._skills ._badgecontent.-creative .-b0 {
  background-image: url(../img/ui/badges/badge_inventor_glow.png);
}
#stats ._skills ._badgecontent.-creative .-b1 {
  background-image: url(../img/ui/badges/badge_inventor_icon.png);
}
#stats ._skills ._badgecontent.-creative .-b2 {
  background-image: url(../img/ui/badges/badge_inventor_clouds.png);
}
#stats ._skills ._badgecontent.-creative .-b3 {
  background-image: url(../img/ui/badges/badge_inventor_banner.png);
}
#stats ._skills ._badgecontent.-creative .-b4 {
  background-image: url(../img/ui/badges/badge_inventor_stars.png);
}
#stats ._skills ._badgecontent.-communication .-b0 {
  background-image: url(../img/ui/badges/badge_teamplayer_glow.png);
}
#stats ._skills ._badgecontent.-communication .-b1 {
  background-image: url(../img/ui/badges/badge_teamplayer_icon.png);
}
#stats ._skills ._badgecontent.-communication .-b2 {
  background-image: url(../img/ui/badges/badge_explorer_clouds.png);
}
#stats ._skills ._badgecontent.-communication .-b3 {
  background-image: url(../img/ui/badges/badge_teamplayer_banner.png);
}
#stats ._skills ._badgecontent.-communication .-b4 {
  background-image: url(../img/ui/badges/badge_teamplayer_stars.png);
}
#stats ._skills ._badgecontent.-balanced .-b0 {
  background-image: url(../img/ui/badges/badge_investigator_glow.png);
}
#stats ._skills ._badgecontent.-balanced .-b1 {
  background-image: url(../img/ui/badges/badge_investigator_icon.png);
}
#stats ._skills ._badgecontent.-balanced .-b2 {
  background-image: url(../img/ui/badges/badge_investigator_clouds.png);
}
#stats ._skills ._badgecontent.-balanced .-b3 {
  background-image: url(../img/ui/badges/badge_investigator_banner.png);
}
#stats ._skills ._badgecontent.-balanced .-b4 {
  background-image: url(../img/ui/badges/badge_investigator_stars.png);
}
#stats ._skills ._badgecontent.-nothing .-b0 {
  background-image: url(../img/ui/badges/badge_wanderer_glow.png);
}
#stats ._skills ._badgecontent.-nothing .-b1 {
  background-image: url(../img/ui/badges/badge_wanderer_icon.png);
}
#stats ._skills ._badgecontent.-nothing .-b2 {
  background-image: url(../img/ui/badges/badge_wanderer_clouds.png);
}
#stats ._skills ._badgecontent.-nothing .-b3 {
  background-image: url(../img/ui/badges/badge_wanderer_banner.png);
}
#stats ._skills ._badgecontent.-nothing .-b4 {
  background-image: url(../img/ui/badges/badge_wanderer__stars.png);
}
#stats ._skills ._badgesubheader {
  margin-bottom: 14px;
}
#stats ._skills ._badgecontenttext {
  overflow: auto;
  text-align: left;
  /* HIDE AT START: 
        display:none;
        */
  padding-left: 15%;
  padding-top: 6%;
  transition: opacity 0.6s;
}
#stats ._skills ._badgecontenttext.-hidden {
  opacity: 0;
}
#stats ._skills ._badgesubcopy {
  font-weight: bold;
  margin-top: 10px;
  display: inline-block;
}
#stats ._countsarea,
#stats ._feebackarea {
  float: left;
  box-sizing: border-box;
}
#stats ._countsarea {
  width: 35%;
  padding-left: 50px;
}
#stats ._feebackarea {
  width: 65%;
  padding-right: 50px;
  padding-top: 100px;
  display: none;
}
#stats ._feebackarea ._feedbackscore {
  border-bottom: 2px solid #fff;
  padding-bottom: 30px;
  font-size: 24px;
}
#stats ._feebackarea ._ctatitle,
#stats ._feebackarea ._ctacopy {
  display: none;
}
#stats ._feebackarea ._type {
  font-size: 40px;
}
#stats ._feebackarea ._badge {
  width: 140px;
  height: 140px;
  background-color: red;
  border-radius: 80px;
  display: inline-block;
  text-align: center;
  padding-top: 60px;
  box-sizing: border-box;
  float: left;
}
#stats ._feebackarea ._copy {
  display: block;
  overflow: hidden;
  width: 400px;
  float: left;
  margin-left: 50px;
  color: #fff;
  font-size: 20px;
}
#stats ._feebackarea ._cta {
  clear: both;
  border-top: dashed 1px rgba(255, 255, 255, 0.3);
  position: relative;
  top: 20px;
  opacity: 0;
}
@media (max-width: 900px) {
  #stats ._feebackarea ._cta {
    border-top: none;
  }
}
#stats ._feebackarea ._ctatitle {
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 30px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s, transform 0.3s;
}
#stats ._feebackarea ._ctacopy {
  font-size: 14px;
  color: #fff;
  opacity: 0;
}
#stats ._feebackarea ._ctalink {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background-color: transparent;
  margin-right: 20px;
  border: 1px solid #fff;
  text-decoration: none;
  margin-top: 30px;
  opacity: 0;
}
#stats ._counts {
  background-color: #fff;
  padding: 20px;
  width: 150px;
  border-radius: 10px;
}
#stats ._counts dt {
  text-transform: uppercase;
  font-size: 14px;
}
#stats ._counts dd {
  margin-left: 0px;
  font-size: 70px;
  margin-bottom: 10px;
  position: relative;
  top: -9px;
}
#stats ._counts ._communication {
  color: green;
}
#stats ._counts ._curious {
  color: blue;
}
#stats ._counts ._creative {
  color: red;
}
#stats .stats__cta {
  margin: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 150px;
  margin-bottom: 60px;
  padding-top: 150px;
  max-width: 900px;
  opacity: 0;
}
#stats .stats__cta.-showing {
  opacity: 1;
}
#stats .stats__cta.-showing .stats__cta__title,
#stats .stats__cta.-showing .stats__cta__copy,
#stats .stats__cta.-showing .stats__cta__button {
  transform: scale(1) translateY(0px);
  opacity: 1;
}
#stats .stats__cta.-showing .stats__cta__button:hover {
  transform: scale(1.1);
  transition: opacity 0.5s 0s, transform 0.5s 0s;
}
@media (max-width: 1000px) {
  #stats .stats__cta {
    margin-top: 80px;
    padding-top: 80px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 900px) {
  #stats .stats__cta {
    border-top: none;
  }
}
#stats .stats__cta__title {
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
  opacity: 0;
  transform: translateY(-20px);
}
#stats .stats__cta__copy {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
}
#stats .stats__cta__button {
  margin-top: 30px;
  display: inline-block;
  text-decoration: none;
  color: #fff !important;
  transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
  opacity: 0;
  transform: scale(0) translateY(0px);
}
@media (max-width: 650px) {
  #stats .stats__cta__button {
    margin-top: 30px;
    margin-bottom: 50px;
  }
}
#stats .stats__cta__buttonicon {
  transition: transform 0.5s;
  transform-origin: 51% 50%;
}
#stats .stats__cta__buttonlabel {
  display: block;
  text-decoration: none;
  color: #fff !important;
}

#ui {
  position: absolute;
  top: 0px;
  z-index: 1001;
  width: 100%;
  display: none;
  /*._evidencecount
  {
      color:#fff;
      font-size:14px;
  }*/
}
#ui a:hover {
  color: #fff;
  text-decoration: underline;
}
#ui ._debug {
  position: absolute;
  top: 10px;
  left: 200px;
}
#ui ._timer {
  color: #fff;
  display: inline-block;
  position: absolute;
  left: 40px;
  top: 10px;
  padding: 0px;
  margin: 0px;
  font-size: 14px;
  background-image: url(../img/tmp/clock.png);
  padding-left: 40px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  line-height: 30px;
}
#ui .ui__battery {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-image: url(../img/ui/battery/border.png);
  width: 153px !important;
  height: 52px !important;
  left: 50%;
  margin-left: -76px;
  position: fixed;
  bottom: 30px;
  top: auto;
  /*.-bar1{background-image:url(../img/ui/battery/bar-1.png); }
  .-bar2{background-image:url(../img/ui/battery/bar-2.png); }
  .-bar3{background-image:url(../img/ui/battery/bar-3.png); }
  .-bar4{background-image:url(../img/ui/battery/bar-4.png); }
  .-bar5{background-image:url(../img/ui/battery/bar-5.png); }
  .-bar6{background-image:url(../img/ui/battery/bar-6.png); }
  .-bar7{background-image:url(../img/ui/battery/bar-7.png); }
  .-bar8{background-image:url(../img/ui/battery/bar-8.png); }
  .-bar9{background-image:url(../img/ui/battery/bar-9.png); }
  .-bar10{background-image:url(../img/ui/battery/bar-10.png); }
  */
}
#ui .ui__battery .ui__battery__bar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  width: 153px !important;
  height: 52px !important;
}
@media (max-width: 600px) {
  #ui .ui__battery {
    width: 114.75px !important;
    height: 39px !important;
    margin-left: -57px;
  }
  #ui .ui__battery .ui__battery__bar {
    width: 114.75px !important;
    height: 39px !important;
  }
}
@media (max-width: 480px) {
  #ui {
    font-size: 1000px;
  }
}
#ui._endstats {
  padding-top: 20px;
}
#ui._endstats ._theories {
  text-align: center;
  display: none;
}

.theories__display__container {
  position: absolute;
  top: 50%;
  margin-top: -260px;
}
.theories__display__container img {
  width: 120px;
  height: 120px;
}
@media (max-width: 1030px) {
  .theories__display__container {
    top: 0px;
    left: 20px;
    margin-top: 0px;
  }
}
@media (max-width: 700px) {
  .theories__display__container {
    top: 0px;
    left: 20px;
    margin-top: 0px;
  }
}
@media (max-width: 500px) {
  .theories__display__container {
    top: -10px;
  }
}

@media (max-width: 1030px) {
  #ui ._theory {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 700px) {
  #ui ._theories,
#ui ._finaltheory {
    width: 100%;
    height: 0px;
  }
  #ui .theories__display__title {
    display: none;
  }
  #ui ._theory {
    width: 60px;
    height: 60px;
    float: left;
  }
}
@media (max-width: 500px) {
  #ui ._theory {
    width: 40px;
    height: 40px;
  }
}
._finaltheory {
  display: none;
}
._finaltheory .theories__display__container {
  margin-top: -100px;
}
@media (max-width: 1030px) {
  ._finaltheory .theories__display__container {
    margin-top: 0px;
  }
}
@media (max-width: 700px) {
  ._finaltheory .theories__display__container img {
    position: absolute;
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 450px) {
  ._finaltheory .theories__display__container {
    margin-top: 0px;
  }
  ._finaltheory .theories__display__container img {
    position: absolute;
    width: 60px;
    height: 60px;
    left: -10px;
  }
}

.theories__display__title {
  text-transform: uppercase;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
  display: none;
}

.theories__display {
  text-align: right;
  margin-top: 20px;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 110px;
  padding-left: 10px;
  transform: translateX(-110px);
  transition: transform 0.4s;
}
@media (max-width: 700px) {
  .theories__display {
    transform: translateX(0px);
    transform: translateY(-100px);
  }
}
.theories__display.-statscreen {
  position: relative;
  width: 100%;
  height: auto;
  transform: translateX(0px);
}
.theories__display.-statscreen ._theory {
  display: inline-block;
}
.theories__display._finaltheory {
  transform: translateX(-140px);
}
@media (max-width: 700px) {
  .theories__display._finaltheory {
    transform: translateX(0px);
    transform: translateY(-130px);
  }
}
.theories__display.-active.-show {
  transform: translateX(0px);
  transform: translateY(0px);
}
.theories__display ._theory {
  width: 90px;
  height: 90px;
  margin-right: 10px;
  display: block;
  background-color: #121526;
  background-image: url("../img/theories/icons/theory_empty_s.png");
  background-size: 100% 100%;
  border-radius: 50%;
  position: relative;
  transform: scale(0);
  margin-bottom: 15px;
}
.theories__display ._theory:last-child {
  margin-right: 0px;
}
.theories__display ._theory._activated {
  background-image: none;
}
.theories__display ._theory ._active,
.theories__display ._theory ._disproved {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  display: inline-block;
  transform: scale(0);
  background-image: none;
}
.theories__display ._theory ._spacer {
  display: none;
}
.theories__display ._theory._hamsters ._active {
  background-image: url(../img/theories/icons/hamsters_active.png);
}
.theories__display ._theory._hamsters ._disproved {
  background-image: url(../img/theories/icons/hamsters_disproved.png);
}
.theories__display ._theory._government ._active {
  background-image: url(../img/theories/icons/government_active.png);
}
.theories__display ._theory._government ._disproved {
  background-image: url(../img/theories/icons/government_disproved.png);
}
.theories__display ._theory._aliens ._active {
  background-image: url(../img/theories/icons/aliens_active.png);
}
.theories__display ._theory._aliens ._disproved {
  background-image: url(../img/theories/icons/aliens_disproved.png);
}
.theories__display ._theory._lightning ._active {
  background-image: url(../img/theories/icons/lightning_active.png);
}
.theories__display ._theory._lightning ._disproved {
  background-image: url(../img/theories/icons/lightning_disproved.png);
}
.theories__display ._theory._fairground ._active {
  background-image: url(../img/theories/icons/fairground_active.png);
}
.theories__display ._theory._fairground ._disproved {
  background-image: url(../img/theories/icons/fairground_disproved.png);
}
.theories__display ._theory._criminals ._active {
  background-image: url(../img/theories/icons/criminals_active.png);
}
.theories__display ._theory._criminals ._disproved {
  background-image: url(../img/theories/icons/criminals_disproved.png);
}

.ui__batteryempty {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 2000;
  background-color: #000;
  display: none;
}
.ui__batteryempty__wrapper {
  position: absolute;
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  text-align: center;
}
.ui__batteryempty__title {
  color: #e4004b;
}
.ui__batteryempty__icon {
  width: 210px;
  height: 71px;
  position: relative;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 30px;
}
.ui__batteryempty__icon > * {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
}
.ui__batteryempty__border {
  background-image: url(../img/ui/battery/border-game-over.png);
}
.ui__batteryempty__cross {
  background-image: url(../img/ui/battery/empty.png);
}

.ui__button {
  background-color: #0086a3;
  border-radius: 12px;
  color: #fff;
  font-weight: 400;
  padding: 14px 26px 8px;
  display: inline-block;
  text-decoration: none;
  min-width: 150px;
  font-size: 20px;
  margin-right: 20px;
}
@media (max-width: 1100px) {
  .ui__button {
    font-size: 18px;
  }
}
.ui__button:last-child {
  margin-right: 0px;
}
.ui__button:hover {
  background-color: #009bbd;
  text-decoration: none !important;
  color: #fff;
}

.ui__icon, .skill__bg, .skill__liquid, .skill__overlay, .skill__icon, #ui .ui__battery, #ui .ui__battery .ui__battery__bar {
  height: 100px;
  width: 100px;
  background-size: 100% 100%;
  display: inline-block;
}
.ui__icon > *, .skill__bg > *, .skill__liquid > *, .skill__overlay > *, .skill__icon > *, #ui .ui__battery > *, #ui .ui__battery .ui__battery__bar > * {
  width: 100%;
  height: 100%;
}
.ui__icon.-replay, .-replay.skill__bg, .-replay.skill__liquid, .-replay.skill__overlay, .-replay.skill__icon, #ui .-replay.ui__battery, #ui .ui__battery .-replay.ui__battery__bar {
  background-image: url("../img/icons/replay.png");
  width: 125px;
  height: 115px;
}
.ui__icon.-close, .-close.skill__bg, .-close.skill__liquid, .-close.skill__overlay, .-close.skill__icon, #ui .-close.ui__battery, #ui .ui__battery .-close.ui__battery__bar {
  background-image: url("../img/ui/icons/close.png");
  width: 60px;
  height: 60px;
}
@media (max-width: 900px) {
  .ui__icon.-close, .-close.skill__bg, .-close.skill__liquid, .-close.skill__overlay, .-close.skill__icon, #ui .-close.ui__battery, #ui .ui__battery .-close.ui__battery__bar {
    width: 40px;
    height: 40px;
  }
}
.ui__icon.-play, .-play.skill__bg, .-play.skill__liquid, .-play.skill__overlay, .-play.skill__icon, #ui .-play.ui__battery, #ui .ui__battery .-play.ui__battery__bar {
  background-image: url("../img/ui/icons/play.png");
  width: 124px;
  height: 114px;
}
@media (max-width: 700px) {
  .ui__icon.-play, .-play.skill__bg, .-play.skill__liquid, .-play.skill__overlay, .-play.skill__icon, #ui .-play.ui__battery, #ui .ui__battery .-play.ui__battery__bar {
    width: 93px;
    height: 85.5px;
  }
}
.ui__icon.-about, .-about.skill__bg, .-about.skill__liquid, .-about.skill__overlay, .-about.skill__icon, #ui .-about.ui__battery, #ui .ui__battery .-about.ui__battery__bar {
  background-image: url("../img/ui/icons/about.png");
  width: 61px;
  height: 61px;
}
@media (max-width: 700px) {
  .ui__icon.-about, .-about.skill__bg, .-about.skill__liquid, .-about.skill__overlay, .-about.skill__icon, #ui .-about.ui__battery, #ui .ui__battery .-about.ui__battery__bar {
    width: 45px;
    height: 45px;
  }
}
@media (max-width: 650px) {
  .ui__icon.-replay, .-replay.skill__bg, .-replay.skill__liquid, .-replay.skill__overlay, .-replay.skill__icon, #ui .-replay.ui__battery, #ui .ui__battery .-replay.ui__battery__bar {
    width: 100px;
    height: 92px;
  }
}

.nav__bottom {
  position: fixed;
  bottom: 50px;
  width: 100%;
  z-index: 2;
  text-align: center;
}

.ui__hamburgericon {
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 1001;
}
.ui__hamburgericon__lines {
  box-sizing: border-box;
  display: inline-block;
}
.ui__hamburgericon__line {
  display: block;
  width: 32px;
  height: 4px;
  background-color: #fff;
  margin-bottom: 5px;
  -ms-transform-origin: 16px 2px;
  /* IE 9 */
  -webkit-transform-origin: 16px 2px;
  /* Chrome, Safari, Opera */
  transform-origin: 16px 2px;
  -webkit-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
  transition: transform 0.3s;
}
.ui__hamburgericon__line.-bottom {
  margin-bottom: 0px;
}
.ui__hamburgericon.-open .ui__hamburgericon__line.-top {
  -webkit-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}
.ui__hamburgericon.-open .ui__hamburgericon__line.-middle {
  opacity: 0;
}
.ui__hamburgericon.-open .ui__hamburgericon__line.-bottom {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}
@media (max-width: 500px) {
  .ui__hamburgericon {
    right: 15px;
    top: 15px;
  }
}

.ui__navmenu {
  position: absolute;
  width: 100%;
  height: 85px;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: right;
  padding-top: 27px;
  padding-right: 70px;
  box-sizing: border-box;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s;
}
.ui__navmenu.-open {
  transform: translateY(0%);
}

.ui__navmenu__item {
  color: #fff;
  font-size: 20px;
  display: inline-block;
  margin-right: 25px;
}
.ui__navmenu__item:hover {
  cursor: pointer;
  color: #2eb4d8 !important;
  text-decoration: none !important;
}
@media (max-width: 1100px) {
  .ui__navmenu__item {
    font-size: 18px;
  }
}

@media (max-width: 500px) {
  .ui__navmenu {
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-right: 0px;
    padding-top: 100px;
  }

  .ui__navmenu__item {
    width: 90%;
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: 15px;
    padding-bottom: 10px;
  }
  .ui__navmenu__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }
}
#rotate-view {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: #000;
}
#rotate-view .rotate__wrapper {
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  width: 100%;
}
#rotate-view .rotate__image {
  width: 60px;
  height: auto;
}
#rotate-view .rotate__copy {
  color: #fff !important;
  margin-top: 10px;
}

@media (max-width: 700px) and (orientation: landscape) {
  #rotate-view {
    display: block;
  }
}
#skillsfeedback {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none;
  width: 0px;
  height: 0px;
  pointer-events: none;
  left: 25%;
  top: 50%;
  margin-left: -75px;
}
@media (max-width: 700px) {
  #skillsfeedback {
    top: 70px;
    left: 50%;
    margin-left: -50px;
  }
  #skillsfeedback .skill {
    height: 90px;
    width: 90px;
    margin-top: 0px;
  }
  #skillsfeedback .skill__bg, #skillsfeedback .skill__liquid, #skillsfeedback .skill__overlay, #skillsfeedback .skill__icon {
    width: 90px;
    height: 90px;
  }
  #skillsfeedback .skill__label {
    font-size: 14px;
  }
}

.skill {
  display: block;
  height: 150px;
  width: 150px;
  position: relative;
  margin-top: -75px;
  z-index: 2000;
  background: url(/img/ui/skills/capital-bg.png);
  background-size: 100% 100%;
}
.skill__bg, .skill__liquid, .skill__overlay, .skill__icon {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  width: 150px;
  height: 150px;
}
.skill__bg {
  background-image: url(../img/ui/skills/background.png);
}
.skill__overlay {
  background-image: url(../img/ui/skills/overlay.png);
}
.skill__liquidmask {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 0%;
  overflow: hidden;
}
.skill__liquid {
  transform: translateY(-100%);
}
.skill__label {
  position: absolute;
  bottom: -30px;
  width: 100%;
  left: 0px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
}
.skill.-balanced .skill__icon {
  background-image: url(../img/ui/skills/icon-balanced.png);
}
.skill.-balanced .skill__liquid {
  background-image: url(../img/ui/skills/liquid-balanced.png);
}
.skill.-curious .skill__icon {
  background-image: url(../img/ui/skills/icon-curious.png);
}
.skill.-curious .skill__liquid {
  background-image: url(../img/ui/skills/liquid-curious.png);
}
.skill.-communication .skill__icon {
  background-image: url(../img/ui/skills/icon-communication.png);
}
.skill.-communication .skill__liquid {
  background-image: url(../img/ui/skills/liquid-communication.png);
}
.skill.-creative .skill__icon {
  background-image: url(../img/ui/skills/icon-creative.png);
}
.skill.-creative .skill__liquid {
  background-image: url(../img/ui/skills/liquid-creative.png);
}
.skill__particle {
  position: absolute;
  z-index: 999;
  top: 0px;
  left: 0px;
  background-size: 100%;
}
.skill__particle.-star {
  width: 53px;
  height: 56px;
}
@media (max-width: 700px) {
  .skill__particle.-star {
    width: 37.1px;
    height: 39.2px;
  }
}
.skill__particle.-star.-communication {
  background-image: url("../img/ui/skills/particle-communication-star.png");
}
.skill__particle.-star.-curious {
  background-image: url("../img/ui/skills/particle-curious-star.png");
}
.skill__particle.-star.-creative {
  background-image: url("../img/ui/skills/particle-creative-star.png");
}
.skill__particle.-circle {
  width: 31px;
  height: 30px;
}
@media (max-width: 700px) {
  .skill__particle.-circle {
    width: 23.25px;
    height: 22.5px;
  }
}
.skill__particle.-circle.-communication {
  background-image: url("../img/ui/skills/particle-communication-circle.png");
}
.skill__particle.-circle.-curious {
  background-image: url("../img/ui/skills/particle-curious-circle.png");
}
.skill__particle.-circle.-creative {
  background-image: url("../img/ui/skills/particle-creative-circle.png");
}
.skill__particle.-star {
  border-radius: 0%;
}

#story {
  display: none !important;
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animation__flicker {
  -webkit-animation: flickerAnimation 0.5s infinite;
  -moz-animation: flickerAnimation 0.5s infinite;
  -o-animation: flickerAnimation 0.5s infinite;
  animation: flickerAnimation 0.5s infinite;
}

#debug {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 6000;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: none;
  padding: 50px;
  box-sizing: border-box;
}
#debug a:hover {
  color: #fff;
  text-decoration: underline;
}

/*# sourceMappingURL=sciencecapital.css.map */