/* Generated by less 2.5.1 */
html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: 'Gotham A', 'Gotham B', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  background: url('../img/bg-black.jpg');
  color: #fff;
  font-size: 14pt;
}
@media (max-width: 1199px) {
  html,
  body {
    font-size: 14pt;
  }
}
@media (max-width: 991px) {
  html,
  body {
    font-size: 13pt;
  }
}
@media (max-width: 767px) {
  html,
  body {
    font-size: 12pt;
  }
}
@media (max-width: 767px) {
  .left {
    padding-bottom: 15px;
  }
}
loader {
  overflow: auto;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  text-align: center;
  color: #fff;
  position: absolute;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.4s;
}
loader.disabled {
  opacity: 0;
  pointer-events: none;
}
loader p {
  text-align: left;
  line-height: 1.3;
  font-weight: 300;
  font-family: 'Helvetica', 'Arial', 'sans-serif';
  padding-bottom: 40px;
}
loader .container {
  height: 100%;
}
.btn {
  border-radius: 0;
  background-color: #fff;
  opacity: 1 !important;
  color: #000;
}
.btn:hover {
  background-color: red;
  color: #fff;
}
.btn:hover span {
  color: #fff;
}
.btn:hover.disabled {
  background-color: #fff;
  color: #000;
}
center-outer {
  display: table;
  width: 100%;
  height: 100%;
}
center-inner {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
game {
  position: relative;
  top: 100vh;
  display: block;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  transition: top 1.3s;
  z-index: 900;
  background: url('../img/bg.jpg');
  background-size: cover;
  background-position: top center;
}
game.active {
  top: 0;
}
game wrap {
  background: url('../img/table.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}
button {
  padding: 15px 30px;
  background-color: #fff;
  color: #000;
}
p {
  margin: 0 0 10px;
}
h1,
h2,
h3,
h4,
h5,
h6,
wrap question,
wrap question tiny {
  font-family: 'Gotham A', 'Gotham B', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
}
h1,
wrap question {
  font-size: 36pt;
  line-height: 1.2;
}
@media (max-width: 1199px) {
  h1,
  wrap question {
    font-size: 26pt;
  }
}
@media (max-width: 991px) {
  h1,
  wrap question {
    font-size: 24pt;
  }
}
@media (max-width: 767px) {
  h1,
  wrap question {
    font-size: 20pt;
  }
}
h2 {
  font-size: 28pt;
}
@media (max-width: 1199px) {
  h2 {
    font-size: 26pt;
  }
}
@media (max-width: 991px) {
  h2 {
    font-size: 24pt;
  }
}
@media (max-width: 767px) {
  h2 {
    font-size: 18pt;
  }
}
h3 {
  font-size: 18pt;
}
@media (max-width: 1199px) {
  h3 {
    font-size: 16pt;
  }
}
@media (max-width: 991px) {
  h3 {
    font-size: 15pt;
  }
}
@media (max-width: 767px) {
  h3 {
    font-size: 13pt;
  }
}
h4 {
  font-size: 14pt;
}
@media (max-width: 1199px) {
  h4 {
    font-size: 13pt;
  }
}
@media (max-width: 991px) {
  h4 {
    font-size: 12pt;
  }
}
@media (max-width: 767px) {
  h4 {
    font-size: 10pt;
  }
}
h5,
wrap question tiny {
  font-size: 16pt;
}
@media (max-width: 1199px) {
  h5,
  wrap question tiny {
    font-size: 14pt;
  }
}
@media (max-width: 991px) {
  h5,
  wrap question tiny {
    font-size: 13pt;
  }
}
@media (max-width: 767px) {
  h5,
  wrap question tiny {
    font-size: 11pt;
  }
}
@media (max-width: 767px) {
  input[type="text"] {
    font-size: 16px;
  }
}
input[type="text"],
input,
textarea,
select,
a:focus,
button,
button:focus,
a,
.btn:focus,
.bootstrap-select .btn:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 0px;
  border-radius: 0px;
}
button,
button:focus {
  border: none !important;
}
.finished wrap {
  pointer-events: none;
}
counterwrap {
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  color: #000;
  text-align: center;
}
counterwrap span {
  display: inline-block;
  background-color: #fff;
  padding: 15px 10px;
}
counterwrap span counter {
  display: inline-block;
}
.retry {
  margin-top: 30px;
}
awnser {
  display: none;
  position: absolute;
  top: 100vh;
  z-index: 500;
  width: 100vw;
  height: 100vh;
  text-align: center;
  transition: top 1.3s;
}
@media (max-width: 767px) {
  awnser {
    overflow: scroll;
  }
}
awnser span.M {
  color: #6cbfdf;
}
awnser span.KD {
  color: #073193;
}
awnser span.S {
  color: #ed1b34;
}
awnser span.L {
  color: #014b92;
}
awnser span.C {
  color: #006a3a;
}
awnser span.V {
  color: #e41b13;
}
awnser span.MP {
  color: #54a046;
}
awnser span.SD {
  color: #fcc900;
}
person {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
person:hover {
  display: block;
  cursor: pointer;
}
person personwrap {
  display: block;
  position: absolute;
  width: 84%;
  left: 8%;
  top: 8%;
  height: 84%;
  overflow: hidden;
  z-index: 100;
}
person personwrap::before {
  background: url('../img/loading.gif') center center;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  transition: opacity 0.2s;
  opacity: 0;
}
person::after {
  content: " ";
  display: block;
  background: #fff;
  position: absolute;
  width: 84%;
  left: 8%;
  top: 8%;
  height: 84%;
}
person > div {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('../img/ram.png');
  background-size: contain;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 1000;
  pointer-events: none;
}
person .img-person {
  position: absolute;
  width: 100%;
  left: 0;
  top: -10%;
  z-index: 900;
}
person .img-responsive {
  width: 100%;
}
awnser person {
  pointer-events: none;
  cursor: default;
}
wrap {
  display: block;
  width: 100%;
  height: 100%;
}
wrap question {
  display: block;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  text-transform: uppercase;
  color: #000;
  z-index: 1000;
}
wrap question tiny {
  text-transform: initial;
  display: block;
}
wrap bild {
  display: inline-block;
}
wrap bild img {
  width: 409px;
}
wrap partier {
  display: block;
}
wrap partier parti {
  padding: 10px 15px;
  display: inline-block;
  color: #fff;
  background: #9a9a9a;
  transition: 0.2s;
  cursor: pointer;
}
wrap partier parti.M {
  background: #6cbfdf;
}
wrap partier parti.KD {
  background: #073193;
}
wrap partier parti.S {
  background: #ed1b34;
}
wrap partier parti.L {
  background: #014b92;
}
wrap partier parti.C {
  background: #006a3a;
}
wrap partier parti.V {
  background: #e41b13;
}
wrap partier parti.MP {
  background: #54a046;
}
wrap partier parti.SD {
  background: #fcc900;
}
wrap partier parti:hover {
  background: #000;
}
wrap partier.clicked {
  pointer-events: none;
}
wrap partier.clicked parti {
  background: #000;
}
wrap partier parti.success {
  color: #fff;
}
wrap partier parti.success.M {
  background: #6cbfdf;
}
wrap partier parti.success.KD {
  background: #073193;
}
wrap partier parti.success.S {
  background: #ed1b34;
}
wrap partier parti.success.L {
  background: #014b92;
}
wrap partier parti.success.C {
  background: #006a3a;
}
wrap partier parti.success.V {
  background: #e41b13;
}
wrap partier parti.success.MP {
  background: #54a046;
}
wrap partier parti.success.SD {
  background: #fcc900;
}
wrap partier parti.failbutno {
  color: #fff;
}
wrap partier parti.failbutno.M {
  background: #6cbfdf;
}
wrap partier parti.failbutno.KD {
  background: #073193;
}
wrap partier parti.failbutno.S {
  background: #ed1b34;
}
wrap partier parti.failbutno.L {
  background: #014b92;
}
wrap partier parti.failbutno.C {
  background: #006a3a;
}
wrap partier parti.failbutno.V {
  background: #e41b13;
}
wrap partier parti.failbutno.MP {
  background: #54a046;
}
wrap partier parti.failbutno.SD {
  background: #fcc900;
}
body.clicked game person {
  pointer-events: none;
  cursor: default;
}
body.clicked game person personwrap:before {
  opacity: 1;
}
body.finished game {
  top: -100%;
}
body.finished awnser {
  top: 0;
  display: block;
}
.statistics {
  position: relative;
  width: 100%;
  height: 200px;
}
.statistics .inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.statistics .inner > div {
  position: absolute;
  bottom: 0;
  width: 6%;
  height: 0%;
  transition: height 1.2s;
}
.statistics .inner > div:after {
  position: absolute;
  bottom: -30px;
  left: 0;
  font-weight: 600;
  width: 100%;
}
.statistics .inner .st-m {
  background: #6cbfdf;
  left: 0%;
}
.statistics .inner .st-m:after {
  content: "M";
}
.statistics .inner .st-l {
  background: #014b92;
  left: 14%;
}
.statistics .inner .st-l:after {
  content: "L";
}
.statistics .inner .st-c {
  background: #006a3a;
  left: 28%;
}
.statistics .inner .st-c:after {
  content: "C";
}
.statistics .inner .st-kd {
  background: #073193;
  left: 42%;
}
.statistics .inner .st-kd:after {
  content: "KD";
}
.statistics .inner .st-sd {
  background: #fcc900;
  left: 56%;
}
.statistics .inner .st-sd:after {
  content: "SD";
}
.statistics .inner .st-s {
  background: #ed1b34;
  left: 70%;
}
.statistics .inner .st-s:after {
  content: "S";
}
.statistics .inner .st-mp {
  background: #54a046;
  left: 84%;
}
.statistics .inner .st-mp:after {
  content: "MP";
}
.statistics .inner .st-v {
  background: #e41b13;
  left: 94%;
}
.statistics .inner .st-v:after {
  content: "V";
}