@charset "UTF-8";
/* -----  0 Reset & Normalization  ---------------------------------------- */

@font-face {
    font-family: 'open_sansbold';
    src: url('../font/opensans-bold-webfont.woff2') format('woff2'),
         url('../font/opensans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../font/opensans-semibold-webfont.woff2') format('woff2'),
         url('../font/opensans-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    list-style: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    /* Add correct display for IE 9- and some newer browsers */
    display: block;
}

img {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'open_sanssemibold', sans-serif;
    font-weight: 600;
    color: #37474f;
    font-size: 24px;
    overflow: hidden;
}

.hidden {
    opacity: 0;
}
.disabled {
    pointer-events: none;
}

/* -----  GAME  ---------------------------------------- */
body {
    background-color: #253036;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#canvas {
    position: absolute;
    left: 580px;
    bottom: -920px;
}

#game-container {
    position: absolute;
    transform-origin: center center;
    overflow: hidden;
    width: 1920px;
    height: 1080px;
    top: 50%;
    left: 50%;
    margin-left: -960px;
    margin-top: -540px;
    background: url(../gfx/quizBackground.jpg) center center;
}

#game-hud {
    position: relative;
    width: 310px;
    margin: 0 auto;
}

.num-container {
    position: absolute;
    height: 83px;
    top: 50%;
    transform: translateY(-60%);
}
.num-container p {
    position: absolute;
    left: 0;
}
.num-wrapper {
    width: 83px;
    height: 83px;
    text-align: center;
    position: absolute;
    top: 0;
    display: table;
}

.num-wrapper span {
    color: #fff;
    font-size: 2.4em;
    font-family: 'open_sansbold', sans-serif;
    display: table-cell;
    vertical-align: middle;
}
#game-numQuestion {    
    left: -280px;
}
#game-numQuestion .num-wrapper {
    right: 0;
}

#game-numPoints {
    right: -320px;
    width: 343px;
}
#game-numPoints .num-wrapper {
    left: 0;
}

#game-logo {
    max-width: 307px;
    position: relative;
    z-index: 999;
}

#question-container {
    position: absolute;
    z-index: 888;
    width: 1210px;
    right: 24px;
    top: 180px;
}

#question-container div {
    position: relative;
}

#question {
    background: url(../gfx/questionBackground.svg) no-repeat left center;
    background-size: contain;
    height: 318px;
    margin-bottom: 16px;
}
#question p {
    color: #fff;
    font-size: 2.2em;
    text-align: center;
    font-family: 'open_sansbold', sans-serif;
    line-height: 130%;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    padding: 0 40px;
}
#question p.long-question {
    font-size: 2.0em;
}

.answer-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
}
.answer {
    height: 140px;
    margin-bottom: 8px;
    cursor: pointer;
    pointer-events: all;
}
.answer.inactive {
    cursor: default;
    pointer-events: none;
}
.answer-bg {
    position: absolute;
    left: 0;
    top: 0;
}
.answer-bg path {
    fill: #fff !important;
    transition: fill 0.4s;
}
.answer:hover:not(.inactive) .answer-bg path,
.answer:active:not(.inactive) .answer-bg path,
.answer:focus:not(.inactive) .answer-bg path {
    fill: #cceff7 !important;
}

.answer p {
    margin: 0 24px 0 160px;
    font-size: 1.6em;
    line-height: 130%;
    top: 50%;
    transform: translateY(-60%);
    position: relative;
}
.answer p.double-line {
    padding-top: 16px;
}

.answer.correct p,
.answer.wrong p{
    color: #fff;
}
.answer.correct .answer-bg path {
    fill: #2bc97d !important;
}
.answer.wrong .answer-bg path {
    fill: #cc1f1f !important;
}

.shadow {
    -webkit-filter: drop-shadow( 2px 2px 5px rgba(0,0,0,0.4) );
            filter: drop-shadow( 2px 2px 5px rgba(0,0,0,0.4) );
}
.button {
    cursor: pointer;
    position: absolute;
}

#button-next {
    width: 360px;
    right: 24px;
    bottom: 8px;
}
#button-start {
    width: 710px;
    left: 50%;
    bottom: 170px;
    transform: translateX(-50%);
}

#game-results {
    position: absolute;
    z-index: 999;
    width: 710px;
    height: 347px;
    right: 340px;
    top: 300px;
}

#game-results div {
    position: relative;
}

#result-text {
    background: url(../gfx/resultBackground.svg) no-repeat left center;
    background-size: contain;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 48px;
    width: 100%;
    height: 100%;
}

#result-text span {
    color: #00b1d9;
    font-family: 'open_sansbold', sans-serif;
    font-size: 2.2em;
}
#result-text p {
    color: #253036;
    font-family: 'open_sanssemibold';
    font-size: 1.8em;
    margin: 16px 64px;
}
#button-restart {
    width: 490px;
    left: 50%;
    bottom: 72px;
    transform: translateX(-50%);
}


/*--------------- LOADER ---------------*/
.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader.disabled,
.loader.disabled:before,
.loader.disabled:after {
    animation: 0;
}

.loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 0;
  position: absolute;
    top: 50%;
    left: 50%;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}