body {
  min-width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  background: #e0e0e0; }

body, input {
  font-family: "Open Sans", sans-serif; }

h1 {
  text-align: center;
  font-size: 5em;
  margin-top: 0;
  padding: 3% 0 1.5%;
  margin-bottom: 5%;
  font-weight: 800;
  color: #FFF;
  background-color: #4abcce; }

h1 span {
  position: relative;
  display: inline-block; }

.wrapper {
  width: 90%;
  min-width: 800px;
  max-width: 1280px;
  position: relative;
  margin: 2em auto; }

.inside {
  position: relative;
  height: 0;
  padding-bottom: 65%; }

.intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 60.8%;
  z-index: 5;
  background-color: white; }

.setup {
  text-align: center;
  margin-top: 5%; }

.switch {
  display: inline-block;
  position: relative;
  font-weight: 800;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 0 2%;
  color: #d6d6d6;
  cursor: pointer;
  background-color: #d6d6d6;
  padding: .25em 2.25em .25em .25em;
  -webkit-border-radius: 10em;
  border-radius: 10em;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  overflow: hidden; }

.switch .butt:before, .switch .butt:after {
  display: block;
  position: absolute;
  color: white;
  width: 100%;
  text-align: center; }

.switch .butt:before {
  right: 90%; }

.switch .butt:after {
  left: 90%; }

.switch.plus .butt:before, .switch.plus .butt:after {
  content: "+"; }

.switch.minus .butt:before, .switch.minus .butt:after {
  content: "\2212"; }

.switch.mal .butt:before, .switch.mal .butt:after {
  content: "\00D7"; }

.switch.geteilt .butt:before, .switch.geteilt .butt:after {
  content: "\00F7"; }

.switch.on {
  padding: .25em .25em .25em 2.25em;
  background-color: #85cb60; }

.loader {
  margin: 9% auto -2em;
  width: 4.125em;
  position: relative;
  -webkit-transition: opacity 800ms ease-in-out;
  -moz-transition: opacity 800ms ease-in-out;
  -ms-transition: opacity 800ms ease-in-out;
  -o-transition: opacity 800ms ease-in-out;
  transition: opacity 800ms ease-in-out; }
  .loader * {
    display: block;
    position: absolute;
    top: 0;
    width: 46%;
    height: 0;
    padding-top: 46%;
    margin: 0;
    -webkit-border-radius: 50%;
    border-radius: 50%; }
  .loader b {
    background-color: #0d64d2;
    left: 0; }
  .loader p {
    background-color: #ff0080;
    right: 0; }

.loader.off {
  opacity: 0; }

.setup, .play {
  text-align: center; }

.switch, .butt {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.butt {
  display: block;
  position: relative;
  font-weight: 800;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  line-height: 1.4em;
  font-size: 1.5em;
  height: 1.5em;
  width: 1.5em;
  color: #d6d6d6;
  cursor: pointer;
  background-color: #249cd5; }

.butt, .butt span {
  -webkit-transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.butt.menu {
  background-color: #ff0080; }

.butt.play {
  display: inline-block;
  font-size: 4em;
  background-color: #249cd5;
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  z-index: 2;
  opacity: 0; }

.loading .butt.play {
  opacity: 1; }

.butt.play span {
  position: relative;
  left: .05125em;
  color: #FFF; }

.butt.play.off {
  cursor: default;
  background-color: #d6d6d6;
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8); }

.butt.play.off span {
  color: #FFF; }

.butt.menu {
  display: none;
  position: absolute;
  z-index: 13;
  width: 4%;
  height: 0;
  padding-bottom: 4%;
  top: 0;
  right: 0; }

#container {
  position: relative;
  overflow: hidden;
  display: none; }

.loading #container {
  display: block; }

#container {
  -webkit-border-radius: 10%/16.6666%;
  border-radius: 10%/16.6666%; }

#hero-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1; }

#hero-container:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity 3000ms ease-in-out;
  -moz-transition: opacity 3000ms ease-in-out;
  -ms-transition: opacity 3000ms ease-in-out;
  -o-transition: opacity 3000ms ease-in-out;
  transition: opacity 3000ms ease-in-out; }

#hero-container.solved:before {
  opacity: 0; }

#hero-container, #level-container span {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

#level-container {
  position: relative;
  z-index: 2;
  margin: 1%;
  overflow: hidden; }

#level-container a {
  display: block;
  position: relative;
  float: left;
  width: 20%;
  height: 0;
  padding-bottom: 20%;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer; }

#level-container span {
  background-color: #666666;
  display: block;
  position: absolute;
  top: 2%;
  right: 2%;
  bottom: 2%;
  left: 2%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden; }

#level-container span b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin-top: -2em;
  margin-left: -2em;
  background-color: #249cd5;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); }

#level-container .level.second b {
  background-color: #f06d00; }

#level-container .level.last b {
  background-color: #a51600; }

#level-container .level b:before {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -.5em;
  text-align: center;
  font-size: 2em;
  line-height: 1em;
  color: #FFF; }

#level-container .level.plus b:before {
  content: "+"; }

#level-container .level.minus b:before {
  content: "\2212"; }

#level-container .level.mal b:before {
  content: "\00D7"; }

#level-container .level.geteilt b:before {
  content: "\00F7"; }

#level-container .level.made {
  cursor: default; }

#level-container .level.made b {
  background-color: #d6d6d6; }

#level-container .level.solved b:before {
  color: #249cd5; }

#game-container {
  z-index: 10;
  opacity: 0; }

#game-container, .game, .game .hq, .game section {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%; }

#game-container, .game {
  display: none; }

.game .hq {
  opacity: 0; }

.game, .game .hq {
  text-align: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center; }

.game section {
  padding-top: 20%; }

.game p {
  display: inline;
  margin: 0;
  color: #FFF;
  font-size: 5em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }

.game b, .game span {
  font-weight: 900; }

.game b, .game span, .game .butt {
  position: relative;
  display: inline-block; }

.game .butt {
  font-size: 2.5em;
  margin-left: 1em;
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4); }

.game .butt.off {
  background-color: #d6d6d6;
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  cursor: default; }

.game b {
  margin: 0 .25em; }

.game b.x {
  margin: 0 .125;
  width: 2.25em;
  height: 1.25em;
  top: .25em;
  background-color: #249cd5;
  -webkit-border-radius: 10em;
  border-radius: 10em; }

.game input {
  position: absolute;
  top: -0.14em;
  left: 0;
  width: 2.25em;
  height: 1.5em;
  padding: 0;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 900;
  text-align: center;
  background-color: transparent;
  color: #FFF;
  border: none;
  -webkit-appearance: none;
  outline: none; }