/*MAIN*/
/* Needed for Dependencies */
@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  src: url("../../assets/fonts/font-awesome/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/font-awesome/fontawesome-webfont.woff") format("woff"), url("../../assets/fonts/font-awesome/fontawesome-webfont.ttf") format("truetype"), url("../../assets/fonts/font-awesome/fontawesome-webfont.svg#FontAwesome") format("svg"); }

@font-face {
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  src: url("../../assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../../assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../../assets/fonts/bootstrap/glyphicons-halflings-regular.svg#Glyphicons Halflings") format("svg"); }

/* Add fonts here */
@font-face {
  font-family: 'Dax-Bold';
  src: url("../../assets/fonts/Dax/DaxBold.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/Dax/DaxBold.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Dax/DaxBold.woff") format("woff"), url("../../assets/fonts/Dax/DaxBold.ttf") format("truetype"), url("../../assets/fonts/Dax/DaxBold.svg#1703265a7bf400058044fde1f9dc8e08") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: 'Dax-Light';
  src: url("../../assets/fonts/Dax/DaxLight.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/Dax/DaxLight.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Dax/DaxLight.woff") format("woff"), url("../../assets/fonts/Dax/DaxLight.ttf") format("truetype"), url("../../assets/fonts/Dax/DaxLight.svg#f7357bcd9496938a4e4ec6b6521ba369") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 200; }

@font-face {
  font-family: 'Dax-Medium';
  src: url("../../assets/fonts/Dax/DaxMedium.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/Dax/DaxMedium.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Dax/DaxMedium.woff") format("woff"), url("../../assets/fonts/Dax/DaxMedium.ttf") format("truetype"), url("../../assets/fonts/Dax/DaxMedium.svg#1c9b2ae3b15b7f470e682518e3856134") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'Dax-Regular';
  src: url("../../assets/fonts/Dax/DaxRegular.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/Dax/DaxRegular.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Dax/DaxRegular.woff") format("woff"), url("../../assets/fonts/Dax/DaxRegular.ttf") format("truetype"), url("../../assets/fonts/Dax/DaxRegular.svg#4d4507f5a5faa52210eb0f4fdcd588e7") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'DaxlinePro-Bold';
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Bold_13127.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Bold_13127.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Bold_13127.woff") format("woff"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Bold_13127.ttf") format("truetype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Bold_13127.svg#6ba468549a91135f9c6aa8bb99c57017") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: 'DaxlinePro-Light';
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Light_13129.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Light_13129.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Light_13129.woff") format("woff"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Light_13129.ttf") format("truetype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Light_13129.svg#11cf26ce93676f905ef37eb704ba9ff9") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 200; }

@font-face {
  font-family: 'DaxlinePro-Medium';
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Medium_13130.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Medium_13130.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Medium_13130.woff") format("woff"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Medium_13130.ttf") format("truetype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Medium_13130.svg#c9ce0bbe362f1966225834fd42034be1") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'DaxlinePro-Regular';
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Regular_13131.eot");
  /* IE9 Compat Modes */
  src: url("../../assets/fonts/DaxlinePro/DaxlinePro-Regular_13131.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Regular_13131.woff") format("woff"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Regular_13131.ttf") format("truetype"), url("../../assets/fonts/DaxlinePro/DaxlinePro-Regular_13131.svg#ca220c78d00c846dd14b6d4e9f673a20") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400; }

/*VARIABLES HERE*/
/*MIXINS HERE*/
/*BASE LEVEL STYLING HERE*/
body {
  overflow: hidden;
  font-family: Dax-Regular; }

html, body {
  height: 100%;
  background-image: url("../../assets/images/backgrounds/dark-triangles.png"); }

.unselectable {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none; }

.noTouch {
  pointer-events: none; }

.appView {
  position: absolute;
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  transform-origin: top; }
  .appView.ng-animate .scenario {
    pointer-events: none; }

.loading-indicator {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.33); }
  .loading-indicator .loading-indicator-wrapper {
    width: 1920px;
    height: 1080px;
    position: absolute;
    left: 50%;
    top: 0;
    transform-origin: top; }
    .loading-indicator .loading-indicator-wrapper .loading-indicator-body {
      position: fixed;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0; }
      .loading-indicator .loading-indicator-wrapper .loading-indicator-body .spinner {
        margin: 0 auto;
        transform: scale(5); }

.preloadBlock .imgPreload {
  position: absolute;
  opacity: 0;
  left: 9999px; }

.hide-element {
  opacity: 0 !important;
  pointer-events: none !important; }

.disable-button {
  opacity: 0.2;
  pointer-events: none; }

button {
  outline: none; }

@keyframes anim_feedbackFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8); }
  100% {
    opacity: 1;
    transform: none; } }

.anim_feedbackFadeIn {
  animation: anim_feedbackFadeIn 0.25s;
  animation-fill-mode: none; }

@keyframes anim_feedbackFadeOut {
  0% {
    opacity: 1;
    transform: none; }
  100% {
    opacity: 0;
    transform: scale(0.8); } }

.anim_feedbackFadeOut {
  animation: anim_feedbackFadeOut 0.25s;
  animation-fill-mode: forwards; }

@keyframes anim_eventFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8); }
  100% {
    opacity: 1;
    transform: none; } }

.anim_eventFadeIn {
  animation: anim_eventFadeIn 0.25s;
  animation-fill-mode: none; }
  .anim_eventFadeIn.anim_delay {
    animation-fill-mode: backwards;
    animation-delay: 0.25s; }

@keyframes anim_eventFadeOut {
  0% {
    opacity: 1;
    transform: none; }
  100% {
    opacity: 0;
    transform: scale(0.8); } }

.anim_eventFadeOut {
  animation: anim_eventFadeOut 0.25s;
  animation-fill-mode: forwards; }

@keyframes anim_feedbackFadeIn_IE11 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%); } }

@keyframes anim_feedbackFadeOut_IE11 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%); }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8); } }

@keyframes anim_eventFadeIn_IE11 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%); } }

@keyframes anim_eventFadeOut_IE11 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%); }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8); } }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .anim_feedbackFadeIn {
    animation: anim_feedbackFadeIn_IE11 0.25s;
    animation-fill-mode: none; }
  .anim_feedbackFadeOut {
    animation: anim_feedbackFadeOut_IE11 0.25s;
    animation-fill-mode: forwards; }
  .anim_eventFadeIn {
    animation: anim_eventFadeIn_IE11 0.25s;
    animation-fill-mode: none; }
    .anim_eventFadeIn.anim_delay {
      animation-fill-mode: backwards;
      animation-delay: 0.25s; }
  .anim_eventFadeOut {
    animation: anim_eventFadeOut_IE11 0.25s;
    animation-fill-mode: forwards; } }

.gameContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url("../../assets/images/backgrounds/green-bg.jpg");
  background-size: 100% 100%;
  color: white; }
  .gameContainer .game-menu-bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 60px;
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(top, #f6f6f6 0%, #f6f6f6 50%, #ebebeb 50%, #ebebeb 100%);
    background-image: linear-gradient(to bottom, #f6f6f6 0%, #f6f6f6 50%, #ebebeb 50%, #ebebeb 100%); }
    .gameContainer .game-menu-bar i, .gameContainer .game-menu-bar p, .gameContainer .game-menu-bar div {
      display: inline-block;
      color: #0c4028; }
    .gameContainer .game-menu-bar .home-button {
      font-size: 42px;
      padding: 8px 24px;
      transition: color 0.2s; }
      .gameContainer .game-menu-bar .home-button:hover {
        cursor: pointer;
        color: #082b1b; }
      .gameContainer .game-menu-bar .home-button:active {
        color: #04150d; }
    .gameContainer .game-menu-bar .user-name {
      font: 24px DaxlinePro-Light;
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
      width: 100%;
      text-align: center;
      margin: 12px auto; }
    .gameContainer .game-menu-bar .game-funds {
      font: 24px DaxlinePro-Light;
      position: absolute;
      right: 10px;
      margin: 12px auto; }
    .gameContainer .game-menu-bar .display-points {
      position: absolute;
      top: 60px;
      right: 20px;
      z-index: 10;
      pointer-events: none;
      font: 24px DaxlinePro-Regular;
      font-size: 60px;
      color: #ffffff;
      text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); }
      .gameContainer .game-menu-bar .display-points.incorrect {
        color: #ff4d4d !important; }
  .gameContainer .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1020px;
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent; }
    .gameContainer .card .card-container {
      position: absolute;
      z-index: 0;
      min-width: 25%;
      max-width: 90%;
      min-height: 25%;
      max-height: 90%;
      width: auto;
      background-color: #d8d8d8;
      background-image: -webkit-linear-gradient(top, #dedede 0%, #c6c6c6 100%);
      background-image: linear-gradient(to bottom, #dedede 0%, #c6c6c6 100%);
      color: #0c4028;
      border: 4px solid #7c7c7c;
      border-radius: 16px;
      -webkit-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
      padding: 40px 80px;
      text-align: left;
      transition: opacity 0.25s;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      .gameContainer .card .card-container ul, .gameContainer .card .card-container p, .gameContainer .card .card-container h1, .gameContainer .card .card-container h2, .gameContainer .card .card-container button, .gameContainer .card .card-container div {
        transition: opacity 0.25s; }
    .gameContainer .card h1 {
      font: 42px DaxlinePro-Bold;
      margin: 12px auto 20px;
      text-align: center;
      line-height: 133%; }
    .gameContainer .card p {
      font: 24px DaxlinePro-Regular;
      line-height: 150%;
      margin: 12px auto;
      width: 100%; }
    .gameContainer .card button {
      display: block;
      margin: 40px auto 12px;
      background-color: #ffffff;
      font: 28px DaxlinePro-Regular;
      color: #0c4028;
      border: none;
      min-width: 300px;
      min-height: 60px;
      border-radius: 6px;
      transition: opacity 0.25s, background-color 0.2s, color 0.2s, transform 0.2s !important; }
      .gameContainer .card button:hover {
        background-color: #f2f2f2;
        color: #082b1b; }
      .gameContainer .card button:active {
        background-color: #e6e6e6;
        color: #04150d; }
    .gameContainer .card .image {
      width: 640px;
      height: 360px;
      background-size: 100% 100%;
      margin: 12px auto;
      border-radius: 6px; }
  .gameContainer .desicion-card form label {
    display: block;
    font: 24px DaxlinePro-Regular;
    margin: 0px auto 40px; }
    .gameContainer .desicion-card form label input {
      border-radius: 6px;
      padding: 16px;
      font: 24px DaxlinePro-Regular;
      color: #0c4028; }
  .gameContainer .desicion-card .card {
    width: 100%; }
  .gameContainer .desicion-card.feedback-showing .card-container, .gameContainer .desicion-card.event-showing .card-container, .gameContainer .desicion-card.pre-event-showing .card-container {
    opacity: 0.5; }
    .gameContainer .desicion-card.feedback-showing .card-container ul, .gameContainer .desicion-card.feedback-showing .card-container p, .gameContainer .desicion-card.feedback-showing .card-container h1, .gameContainer .desicion-card.feedback-showing .card-container h2, .gameContainer .desicion-card.feedback-showing .card-container button, .gameContainer .desicion-card.feedback-showing .card-container div, .gameContainer .desicion-card.event-showing .card-container ul, .gameContainer .desicion-card.event-showing .card-container p, .gameContainer .desicion-card.event-showing .card-container h1, .gameContainer .desicion-card.event-showing .card-container h2, .gameContainer .desicion-card.event-showing .card-container button, .gameContainer .desicion-card.event-showing .card-container div, .gameContainer .desicion-card.pre-event-showing .card-container ul, .gameContainer .desicion-card.pre-event-showing .card-container p, .gameContainer .desicion-card.pre-event-showing .card-container h1, .gameContainer .desicion-card.pre-event-showing .card-container h2, .gameContainer .desicion-card.pre-event-showing .card-container button, .gameContainer .desicion-card.pre-event-showing .card-container div {
      opacity: 0.5; }
  .gameContainer .desicion-card .feedback, .gameContainer .desicion-card .event, .gameContainer .desicion-card .pre-event {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    min-width: 25%;
    min-height: 25%;
    max-width: 90%;
    max-height: 90%;
    padding: 40px;
    background-image: -webkit-linear-gradient(top, #dedede 0%, #c6c6c6 100%);
    background-image: linear-gradient(to bottom, #dedede 0%, #c6c6c6 100%);
    color: #0c4028;
    border: 4px solid #7c7c7c;
    border-radius: 16px;
    -webkit-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2); }
    .gameContainer .desicion-card .feedback.feedback, .gameContainer .desicion-card .event.feedback, .gameContainer .desicion-card .pre-event.feedback {
      z-index: 4;
      padding-top: 160px; }
      .gameContainer .desicion-card .feedback.feedback:after, .gameContainer .desicion-card .event.feedback:after, .gameContainer .desicion-card .pre-event.feedback:after {
        position: absolute;
        background-size: 100% 100%;
        background: url("../../assets/images/images/thumbs-down.png");
        content: "";
        width: 137px;
        height: 130px;
        top: 20px; }
      .gameContainer .desicion-card .feedback.feedback.correct:after, .gameContainer .desicion-card .event.feedback.correct:after, .gameContainer .desicion-card .pre-event.feedback.correct:after {
        background: url("../../assets/images/images/thumbs-up.png"); }
    .gameContainer .desicion-card .feedback.event, .gameContainer .desicion-card .feedback.pre-event, .gameContainer .desicion-card .event.event, .gameContainer .desicion-card .event.pre-event, .gameContainer .desicion-card .pre-event.event, .gameContainer .desicion-card .pre-event.pre-event {
      background-color: blue;
      z-index: 5; }
  .gameContainer .info-card p {
    text-align: left; }
  .gameContainer .complete-card {
    background: url("../../assets/images/images/results.png");
    background-size: 99% 99.5%;
    background-repeat: no-repeat;
    background-position: -80px -2px;
    display: block; }
    .gameContainer .complete-card .card-container {
      width: 562px;
      height: 668px;
      padding: 0 30px;
      border: none !important;
      border-radius: 0;
      box-shadow: none;
      background: transparent !important;
      overflow: auto;
      left: 679px;
      top: 233px;
      color: #ffffff !important;
      display: block;
      text-align: center; }
      .gameContainer .complete-card .card-container .condition {
        text-align: left;
        padding: 0 20px; }
    .gameContainer .complete-card .header {
      margin: 20px 0px;
      font: 26px DaxlinePro-Bold; }
    .gameContainer .complete-card .text {
      text-align: left;
      margin: 0;
      line-height: 175%;
      font: 18px DaxlinePro-Regular; }
    .gameContainer .complete-card .condition-header {
      margin: 0;
      font: 26px DaxlinePro-Bold; }
    .gameContainer .complete-card .light-bulb {
      font-size: 64px; }
    .gameContainer .complete-card .conditions {
      margin: 0 auto;
      display: block; }
      .gameContainer .complete-card .conditions .condition {
        font: 18px DaxlinePro-Regular;
        margin: 10px 0 10px; }
    .gameContainer .complete-card .progress-text {
      margin: 15px 0 10px;
      font: 26px DaxlinePro-Bold;
      display: block;
      clear: both; }
      .gameContainer .complete-card .progress-text.possible {
        margin-bottom: 0; }
    .gameContainer .complete-card .progress {
      background: transparent;
      border: 4px solid #ffffff;
      border-radius: 0px;
      box-shadow: none;
      height: 40px;
      width: 75%;
      margin: 0 auto 10px; }
      .gameContainer .complete-card .progress .progress-bar {
        border-radius: 0px;
        box-shadow: none;
        background: #ffffff;
        border: 1px solid #ffffff; }
    .gameContainer .complete-card .progress-min, .gameContainer .complete-card .progress-max {
      display: inline-block;
      margin-top: 10px;
      width: 25%;
      float: left;
      font: 24px DaxlinePro-Bold;
      font-size: 20px; }
      .gameContainer .complete-card .progress-min.progress-min, .gameContainer .complete-card .progress-max.progress-min {
        text-align: left; }
      .gameContainer .complete-card .progress-min.progress-max, .gameContainer .complete-card .progress-max.progress-max {
        float: right;
        text-align: right;
        width: 25%;
        margin-right: 10%; }
    .gameContainer .complete-card button {
      display: inline-block;
      margin: 20px;
      min-width: 200px; }
      .gameContainer .complete-card button.next {
        color: #ffffff;
        background-color: #31ad64; }
  .gameContainer .input-box .feedback.answered .answer input {
    opacity: 0.5;
    pointer-events: none; }
  .gameContainer .input-box .feedback.incorrect {
    background-color: red; }
  .gameContainer .multiple-choice ul, .gameContainer .multi-select ul {
    list-style: none;
    padding: 0; }
    .gameContainer .multiple-choice ul li, .gameContainer .multi-select ul li {
      display: flex;
      align-items: center;
      justify-content: center;
      font: 24px DaxlinePro-Regular;
      margin: 20px auto;
      padding: 12px;
      background-color: #ffffff;
      color: #0c4028;
      text-align: center;
      border-radius: 6px;
      transition: opacity 0.25s, background-color 0.2s, color 0.2s, transform 0.2s !important; }
      .gameContainer .multiple-choice ul li:hover, .gameContainer .multi-select ul li:hover {
        cursor: pointer;
        color: #082b1b; }
      .gameContainer .multiple-choice ul li:active, .gameContainer .multi-select ul li:active {
        background-color: #e6e6e6;
        color: #04150d; }
  .gameContainer .multiple-choice.answered ul li, .gameContainer .multi-select.answered ul li {
    opacity: 0.5;
    pointer-events: none; }
  .gameContainer .multiple-choice .feedback.incorrect {
    background-color: red; }
  .gameContainer .multiple-choice .feedback.correct {
    background-color: green; }
  .gameContainer .multi-select ul li.selected {
    background-color: #31ad64; }
  .gameContainer .multi-select .feedback.correct {
    background-color: green; }
  .gameContainer .multi-select .feedback.incorrect {
    background-color: red; }
  .gameContainer .slider .slider-container {
    width: 100%;
    margin: 0 auto 140px; }
    .gameContainer .slider .slider-container :focus {
      outline: none; }
    .gameContainer .slider .slider-container .rzslider:focus {
      outline: none; }
    .gameContainer .slider .slider-container .rz-limit, .gameContainer .slider .slider-container .rz-bubble {
      display: none; }
    .gameContainer .slider .slider-container .rz-ticks {
      top: 37px;
      left: -4px; }
      .gameContainer .slider .slider-container .rz-ticks .rz-tick {
        background-color: #8a8a8a;
        height: 18px;
        width: 18px;
        -webkit-box-shadow: inset 0px 2px 5px 1px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: inset 0px 2px 5px 1px rgba(0, 0, 0, 0.25);
        box-shadow: inset 0px 2px 5px 1px rgba(0, 0, 0, 0.25); }
        .gameContainer .slider .slider-container .rz-ticks .rz-tick.user-selected .rz-tick-legend {
          font: 42px DaxlinePro-Bold;
          font-size: 30px; }
      .gameContainer .slider .slider-container .rz-ticks .rz-tick-value {
        display: none; }
      .gameContainer .slider .slider-container .rz-ticks .rz-tick-legend {
        max-width: 1000px;
        font: 24px DaxlinePro-Regular;
        font-size: 30px; }
    .gameContainer .slider .slider-container .rz-pointer {
      background: transparent; }
      .gameContainer .slider .slider-container .rz-pointer:after {
        background: url(../../assets/images/images/slider_point.png);
        background-size: 100% 100%;
        width: 130px;
        height: 130px;
        top: auto;
        bottom: -60px;
        left: -48px; }
    .gameContainer .slider .slider-container .rz-bar {
      background-color: #8a8a8a;
      width: 105%;
      height: 18px;
      top: 10px;
      left: -2.5%;
      border-radius: 12px;
      -webkit-box-shadow: inset 0px 2px 5px 1px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: inset 0px 2px 5px 1px rgba(0, 0, 0, 0.25);
      box-shadow: inset 0px 2px 5px 1px rgba(0, 0, 0, 0.25); }
  .gameContainer .slider .answer {
    font: 24px DaxlinePro-Regular;
    margin: 10px; }
  .gameContainer .slider .feedback.correct {
    background-color: green; }
  .gameContainer .slider .feedback.incorrect {
    background-color: red; }
  .gameContainer.in-transit .slider .slider-container .rzslider .rz-tick {
    opacity: 0; }
  .gameContainer .swiper-slide {
    background: transparent; }
    .gameContainer .swiper-slide .swiper-slide-shadow-left, .gameContainer .swiper-slide .swiper-slide-shadow-right {
      background-image: none; }
  .gameContainer .swiper-pagination-progress {
    height: 5px;
    background-color: rgba(0, 0, 0, 0.25);
    bottom: -5px; }
    .gameContainer .swiper-pagination-progress .swiper-pagination-progressbar {
      background-color: white;
      position: absolute;
      height: 5px;
      width: 100%;
      left: 0;
      transform-origin: left; }
  .gameContainer.white-theme {
    background-image: url("../../assets/images/backgrounds/white-bg.jpg");
    color: #0c4028; }
    .gameContainer.white-theme .game-menu-bar {
      background-color: #f6f6f6;
      background-image: -webkit-linear-gradient(top, #3b8c5b 0%, #3b8c5b 50%, #217c44 50%, #217c44 100%);
      background-image: linear-gradient(to bottom, #3b8c5b 0%, #3b8c5b 50%, #217c44 50%, #217c44 100%); }
      .gameContainer.white-theme .game-menu-bar i, .gameContainer.white-theme .game-menu-bar p, .gameContainer.white-theme .game-menu-bar div {
        color: #ffffff; }
      .gameContainer.white-theme .game-menu-bar .home-button:hover {
        color: #f2f2f2; }
      .gameContainer.white-theme .game-menu-bar .home-button:active {
        color: #e6e6e6; }
      .gameContainer.white-theme .game-menu-bar .display-points {
        color: #31ad64; }
    .gameContainer.white-theme .card .card-container, .gameContainer.white-theme .card .descision {
      background-image: -webkit-linear-gradient(top, #31a35d 0%, #185a32 100%);
      background-image: linear-gradient(to bottom, #31a35d 0%, #185a32 100%);
      border: 4px solid #4ab874;
      color: #ffffff; }
  .gameContainer .card.m1 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 643px;
    height: 870px;
    background-image: url("../../assets/images/images/m1.png");
    background-size: 100% 100%; }
  .gameContainer .card.m2 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 408px;
    height: 285px;
    background-image: url("../../assets/images/images/m2.png");
    background-size: 100% 100%; }
  .gameContainer .card.m3 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 578px;
    height: 687px;
    background-image: url("../../assets/images/images/m3.png");
    background-size: 100% 100%; }
  .gameContainer .card.m4 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 218px;
    height: 533px;
    background-image: url("../../assets/images/images/m4.png");
    background-size: 100% 100%; }
  .gameContainer .card.m5 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 389px;
    height: 827px;
    background-image: url("../../assets/images/images/m5.png");
    background-size: 100% 100%; }
  .gameContainer .card.m6 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 415px;
    height: 799px;
    background-image: url("../../assets/images/images/m6.png");
    background-size: 100% 100%; }
  .gameContainer .card.m7 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 458px;
    height: 933px;
    background-image: url("../../assets/images/images/m7.png");
    background-size: 100% 100%; }
  .gameContainer .card.m8 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 421px;
    height: 881px;
    background-image: url("../../assets/images/images/m8.png");
    background-size: 100% 100%; }
  .gameContainer .card.f3 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 515px;
    height: 1023px;
    background-image: url("../../assets/images/images/f3.png");
    background-size: 100% 100%; }
  .gameContainer .card.f4 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 603px;
    height: 804px;
    background-image: url("../../assets/images/images/f4.png");
    background-size: 100% 100%; }
  .gameContainer .card.f5 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 515px;
    height: 991px;
    background-image: url("../../assets/images/images/f5.png");
    background-size: 100% 100%; }
  .gameContainer .card.f6 .card-container::after {
    pointer-events: none;
    position: absolute;
    content: '';
    width: 633px;
    height: 1584px;
    background-image: url("../../assets/images/images/f6.png");
    background-size: 100% 100%; }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .gameContainer .card .card-container, .gameContainer .card .feedback, .gameContainer .card .event, .gameContainer .card .pre-event {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); } }

.gameContainer.collocation .card-1 .card-container {
  width: 55%; }

.gameContainer.collocation .card-2 .feedback.correct {
  text-align: center; }

.gameContainer.collocation .card-2 .card-container p {
  text-align: center;
  width: 60%; }

.gameContainer.collocation .card-2 .feedback.incorrect {
  width: 65%; }

.gameContainer.collocation .card-3 .card-container {
  width: 74%; }
  .gameContainer.collocation .card-3 .card-container p {
    text-align: center; }
  .gameContainer.collocation .card-3 .card-container li {
    width: 74%;
    min-height: 150px; }

.gameContainer.collocation .card-4 .card-container {
  width: 70%; }
  .gameContainer.collocation .card-4 .card-container p {
    text-align: center; }
  .gameContainer.collocation .card-4 .card-container li {
    padding: 16px; }

.gameContainer.collocation .card-5 .card-container {
  width: 65%; }
  .gameContainer.collocation .card-5 .card-container p {
    text-align: center; }

.gameContainer.collocation .card-6 .card-container p {
  text-align: center; }

.gameContainer.collocation .card-6 .feedback.correct {
  width: 65%; }

.gameContainer.collocation .card-7 .card-container {
  width: 77%; }

.gameContainer.collocation .card-8 .card-container {
  width: 60%; }

.gameContainer.collocation .card-9 .card-container {
  width: 50%; }

.gameContainer.collocation .card-10 .card-container {
  width: 70%; }
  .gameContainer.collocation .card-10 .card-container li {
    min-height: 140px; }

.gameContainer.collocation .card-11 .feedback.correct {
  text-align: center; }

.gameContainer.collocation .card-11 .feedback.incorrect {
  width: 60%; }

.gameContainer.collocation .card-0 .card-container:after {
  top: 241px; }

.gameContainer.collocation .card-1 .card-container:after {
  top: -90px;
  left: 940px; }

.gameContainer.collocation .card-2 .card-container:after {
  left: -450px;
  top: 65px; }

.gameContainer.collocation .card-3 .card-container:after {
  left: 1350px;
  top: 375px; }

.gameContainer.collocation .card-4 .card-container:after {
  top: -215px; }

.gameContainer.collocation .card-5 .card-container:after {
  top: 386px; }

.gameContainer.collocation .card-6 .card-container:after {
  left: 1240px;
  top: -195px; }

.gameContainer.collocation .card-7 .card-container:after {
  left: 600px;
  top: 392px;
  width: 300px;
  height: 340px; }

.gameContainer.collocation .card-8 .card-container:after {
  top: -215px; }

.gameContainer.collocation .card-9 .card-container:after {
  left: 740px;
  top: 278px;
  width: 300px;
  height: 400px; }

.gameContainer.collocation .card-10 .card-container:after {
  left: 1200px;
  top: 200px; }

.gameContainer.collocation .card-11 .card-container:after {
  left: 250px;
  top: 510px;
  width: 300px;
  height: 340px; }

.gameContainer.consolidation .card-1 .card-container {
  width: 66%; }

.gameContainer.consolidation .card-2 .card-container {
  width: 64%; }
  .gameContainer.consolidation .card-2 .card-container li {
    padding: 16px 32px; }

.gameContainer.consolidation .card-2 .feedback {
  max-width: 57%; }

.gameContainer.consolidation .card-3 .card-container {
  width: 52%; }
  .gameContainer.consolidation .card-3 .card-container h1 {
    font-size: 40px; }
  .gameContainer.consolidation .card-3 .card-container li {
    min-height: 100px; }

.gameContainer.consolidation .card-3 .feedback {
  max-width: 45%; }
  .gameContainer.consolidation .card-3 .feedback.incorrect {
    max-width: 68%; }

.gameContainer.consolidation .card-4 .card-container {
  width: 75%; }

.gameContainer.consolidation .card-5 .card-container {
  width: 60%; }
  .gameContainer.consolidation .card-5 .card-container li {
    padding: 16px 100px; }

.gameContainer.consolidation .card-5 .feedback.correct {
  width: 50%; }

.gameContainer.consolidation .card-6 .card-container {
  width: 65%; }
  .gameContainer.consolidation .card-6 .card-container p {
    width: 90%; }
  .gameContainer.consolidation .card-6 .card-container li {
    padding: 16px 100px; }

.gameContainer.consolidation .card-7 .card-container {
  width: 66%; }
  .gameContainer.consolidation .card-7 .card-container p {
    width: 97%; }
  .gameContainer.consolidation .card-7 .card-container li {
    padding: 16px 40px; }

.gameContainer.consolidation .card-7 .feedback {
  width: 55%; }

.gameContainer.consolidation .card-8 .card-container {
  width: 66%; }
  .gameContainer.consolidation .card-8 .card-container p {
    width: 69%; }
  .gameContainer.consolidation .card-8 .card-container li {
    padding: 16px 40px; }

.gameContainer.consolidation .card-8 .feedback {
  max-width: 60%; }

.gameContainer.consolidation .card-9 .card-container {
  width: 70%; }

.gameContainer.consolidation .card-10 .card-container {
  width: 72%; }
  .gameContainer.consolidation .card-10 .card-container p {
    width: 97%; }
  .gameContainer.consolidation .card-10 .card-container li {
    padding: 16px 40px; }

.gameContainer.consolidation .card-10 .feedback.incorrect {
  max-width: 50%; }

.gameContainer.consolidation .card-0 .card-container:after {
  top: -20px;
  left: -200px;
  width: 300px;
  height: 720px; }

.gameContainer.consolidation .card-1 .card-container:after {
  top: 310px;
  left: 1050px; }

.gameContainer.consolidation .card-2 .card-container:after {
  top: 564px;
  left: 1130px;
  width: 300px;
  height: 401px; }

.gameContainer.consolidation .card-3 .card-container:after {
  top: -40px;
  left: 840px; }

.gameContainer.consolidation .card-4 .card-container:after {
  top: 313px; }

.gameContainer.consolidation .card-5 .card-container:after {
  top: 330px;
  left: 790px;
  width: 350px;
  height: 660px; }

.gameContainer.consolidation .card-6 .card-container:after {
  top: 70px;
  left: 1240px;
  width: 270px;
  height: 540px; }

.gameContainer.consolidation .card-7 .card-container:after {
  top: 162px;
  left: 1255px;
  width: 300px;
  height: 600px; }

.gameContainer.consolidation .card-8 .card-container:after {
  top: 320px;
  left: 900px; }

.gameContainer.consolidation .card-9 .card-container:after {
  top: 392px;
  left: 100px;
  width: 320px;
  height: 370px; }

.gameContainer.consolidation .card-10 .card-container:after {
  top: -215px; }

.gameContainer.demo .card-0.guy::after {
  right: 450px; }

.gameContainer.finance .card-1 .card-container {
  width: 52%; }

.gameContainer.finance .card-2 .answer {
  width: 110%; }

.gameContainer.finance .card-2 .feedback.incorrect {
  width: 56%; }

.gameContainer.finance .card-3 .feedback.incorrect {
  width: 50%; }
  .gameContainer.finance .card-3 .feedback.incorrect.alt {
    width: 60%; }

.gameContainer.finance .card-4 .card-container {
  width: 45%; }

.gameContainer.finance .card-5 .card-container {
  width: 85%;
  text-align: center; }

.gameContainer.finance .card-5 .feedback.incorrect {
  text-align: center; }

.gameContainer.finance .card-6 .feedback.incorrect {
  width: 45%; }

.gameContainer.finance .card-6 .card-container ul {
  width: 60%; }

.gameContainer.finance .card-0 .card-container:after {
  top: 240px; }

.gameContainer.finance .card-1 .card-container:after {
  top: 160px;
  left: -150px; }

.gameContainer.finance .card-2 .card-container:after {
  top: 3px;
  left: 846px; }

.gameContainer.finance .card-3 .card-container:after {
  top: 100px;
  left: -344px; }

.gameContainer.finance .card-4 .card-container:after {
  top: -180px;
  left: 856px; }

.gameContainer.finance .card-5 .card-container:after {
  top: -210px;
  left: 620px; }

.gameContainer.finance .card-6 .card-container:after {
  top: -110px;
  left: -550px; }

.gameContainer.powercut .start .card-container {
  width: 55%; }

.gameContainer.powercut .card-1 .card-container {
  width: 65%; }

.gameContainer.powercut .card-2 .card-container {
  width: 45%; }
  .gameContainer.powercut .card-2 .card-container strong {
    font: 42px DaxlinePro-Bold;
    font-size: 26px; }

.gameContainer.powercut .card-3 .feedback {
  max-width: 70%; }

.gameContainer.powercut .card-3 .card-container {
  width: 73%; }
  .gameContainer.powercut .card-3 .card-container ul {
    margin-top: 20px;
    columns: 2;
    width: 85%; }
    .gameContainer.powercut .card-3 .card-container ul li {
      margin-top: 0; }
      .gameContainer.powercut .card-3 .card-container ul li:first-child {
        columns: 2; }

.gameContainer.powercut .card-4 .card-container {
  width: 65%; }

.gameContainer.powercut .card-5 .card-container {
  width: 60%; }
  .gameContainer.powercut .card-5 .card-container ul {
    width: 50%; }

.gameContainer.powercut .card-5 .feedback {
  width: 45%;
  text-align: left; }

.gameContainer.powercut .card-6 .card-container {
  width: 65%; }

.gameContainer.powercut .card-7 .card-container {
  width: 77%; }

.gameContainer.powercut .card-7 ul {
  width: 85%; }
  .gameContainer.powercut .card-7 ul li {
    height: 150px; }

.gameContainer.powercut .card-7 .feedback {
  max-width: 70%; }

.gameContainer.powercut .card-8 .card-container {
  width: 65%; }

.gameContainer.powercut .card-8 ul {
  width: 88%; }
  .gameContainer.powercut .card-8 ul li {
    height: 150px; }

.gameContainer.powercut .card-8 .feedback {
  max-width: 70%; }

.gameContainer.powercut .card-9 .card-container {
  width: 65%; }

.gameContainer.powercut .card-9 ul {
  width: 85%; }
  .gameContainer.powercut .card-9 ul li {
    height: 150px; }

.gameContainer.powercut .card-9 .feedback {
  max-width: 70%;
  text-align: left; }

.gameContainer.powercut .card-10 .feedback {
  max-width: 60%; }
  .gameContainer.powercut .card-10 .feedback.correct {
    max-width: 65%; }

.gameContainer.powercut .card-11 .card-container {
  width: 79%; }

.gameContainer.powercut .card-11 .feedback {
  max-width: 50%; }

.gameContainer.powercut .card-12 .card-container {
  width: 76%; }

.gameContainer.powercut .card-12 .feedback {
  max-width: 50%; }

.gameContainer.powercut .card-12 ul {
  width: 68%; }
  .gameContainer.powercut .card-12 ul li {
    height: 150px; }

.gameContainer.powercut .card-0 .card-container:after {
  top: 315px;
  left: 0px;
  width: 301px;
  height: 402px; }

.gameContainer.powercut .card-1 .card-container:after {
  top: 240px;
  left: -270px;
  width: 300px;
  height: 695px; }

.gameContainer.powercut .card-2 .card-container:after {
  top: 180px;
  left: 770px; }

.gameContainer.powercut .card-3 .card-container:after {
  top: 430px;
  left: 1390px;
  width: 250px;
  height: 500px; }

.gameContainer.powercut .card-4 .card-container:after {
  top: -215px; }

.gameContainer.powercut .card-5 .card-container:after {
  top: 120px;
  left: 1050px;
  width: 450px;
  height: 900px; }

.gameContainer.powercut .card-6 .card-container:after {
  top: 349px; }

.gameContainer.powercut .card-7 .card-container:after {
  top: 328px;
  left: -90px; }

.gameContainer.powercut .card-8 .card-container:after {
  top: 10px;
  left: 1080px; }

.gameContainer.powercut .card-9 .card-container:after {
  top: 295px;
  left: -320px;
  width: 460px;
  height: 640px; }

.gameContainer.powercut .card-10 .card-container:after {
  top: 520px;
  left: -40px;
  width: 260px;
  height: 320px; }

.gameContainer.powercut .card-11 .card-container:after {
  top: 520px;
  left: 1350px;
  width: 250px;
  height: 320px; }

.gameContainer.powercut .card-12 .card-container:after {
  top: 30px;
  left: 1300px; }

.gameContainer.retrofit .start .card-container {
  width: 50%; }

.gameContainer.retrofit .card-1 .card-container {
  width: 60%; }

.gameContainer.retrofit .card-2 .card-container {
  width: 50%; }

.gameContainer.retrofit .card-3 .feedback {
  max-width: 60%; }

.gameContainer.retrofit .card-3 .card-container {
  width: 74%; }

.gameContainer.retrofit .card-4 .card-container {
  width: 55%; }

.gameContainer.retrofit .card-4 .feedback {
  max-width: 60%; }

.gameContainer.retrofit .card-5 .card-container {
  width: 68%; }

.gameContainer.retrofit .card-6 .card-container {
  width: 65%; }
  .gameContainer.retrofit .card-6 .card-container ul li {
    min-height: 90px; }

.gameContainer.retrofit .card-7 .card-container {
  width: 60%; }

.gameContainer.retrofit .card-7 .feedback {
  max-width: 55%; }

.gameContainer.retrofit .card-8 .card-container {
  width: 55%; }

.gameContainer.retrofit .card-8 .feedback {
  max-width: 65%; }

.gameContainer.retrofit .card-9 .card-container {
  width: 54%; }

.gameContainer.retrofit .card-0 .card-container:after {
  top: -74px;
  left: 890px; }

.gameContainer.retrofit .card-1 .card-container:after {
  top: -45px;
  left: 1140px;
  height: 510px;
  width: 265px; }

.gameContainer.retrofit .card-2 .card-container:after {
  top: 239px;
  left: -270px;
  height: 510px;
  width: 395px; }

.gameContainer.retrofit .card-3 .card-container:after {
  top: 403px;
  left: -220px;
  height: 510px;
  width: 280px; }

.gameContainer.retrofit .card-4 .card-container:after {
  top: 171px;
  left: 980px;
  height: 650px;
  width: 475px; }

.gameContainer.retrofit .card-5 .card-container:after {
  top: 350px;
  left: 1290px;
  height: 510px;
  width: 262px; }

.gameContainer.retrofit .card-6 .card-container:after {
  top: 150px;
  left: 1120px;
  height: 730px;
  width: 375px; }

.gameContainer.retrofit .card-7 .card-container:after {
  top: -215px; }

.gameContainer.retrofit .card-8 .card-container:after {
  top: 73px;
  left: -340px;
  height: 730px;
  width: 375px; }

.gameContainer.retrofit .card-9 .card-container:after {
  top: 311px; }

.selectContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding-top: 60px;
  z-index: 1;
  background: url("../../assets/images/backgrounds/white-bg.jpg");
  color: #ffffff;
  text-align: center; }
  .selectContainer .select-contents {
    position: absolute;
    width: 100%;
    height: 1020px;
    left: 0;
    top: 30px;
    color: #0c4028; }
    .selectContainer .select-contents p {
      width: 100%;
      font: 26px DaxlinePro-Regular; }
    .selectContainer .select-contents h1 {
      font: 42px DaxlinePro-Bold; }
    .selectContainer .select-contents .description {
      font-size: 36px;
      position: absolute;
      top: 80px;
      z-index: 5;
      position: absolute;
      left: 50%;
      -webkit-transform: translate(-50%, 0%);
      -moz-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      -o-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%); }
      .selectContainer .select-contents .description.completed {
        top: 40px; }
      .selectContainer .select-contents .description.instructions {
        font-size: 24px;
        width: 88%;
        top: 40px;
        text-align: left;
        text-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); }
  .selectContainer .select-menu-bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 60px;
    color: #ffffff;
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(top, #3b8c5b 0%, #3b8c5b 50%, #217c44 50%, #217c44 100%);
    background-image: linear-gradient(to bottom, #3b8c5b 0%, #3b8c5b 50%, #217c44 50%, #217c44 100%); }
    .selectContainer .select-menu-bar i, .selectContainer .select-menu-bar p, .selectContainer .select-menu-bar div {
      display: inline-block;
      color: #ffffff; }
    .selectContainer .select-menu-bar .select-button {
      font-size: 42px;
      padding: 8px 24px;
      transition: color 0.2s; }
      .selectContainer .select-menu-bar .select-button:hover {
        cursor: pointer;
        color: #f2f2f2; }
      .selectContainer .select-menu-bar .select-button:active {
        color: #e6e6e6; }
      .selectContainer .select-menu-bar .select-button.select-sign-out {
        float: left; }
      .selectContainer .select-menu-bar .select-button.select-progress {
        float: right; }
    .selectContainer .select-menu-bar .user-name {
      font: 24px DaxlinePro-Light;
      padding: 12px 24px 0; }
  .selectContainer .scenario-container {
    width: 75%;
    height: 900px;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    bottom: 0;
    z-index: 2; }
    .selectContainer .scenario-container .next-btn, .selectContainer .scenario-container .prev-btn {
      transition: opacity 0.25s, color 0.25s, background-color 0.25s, transform 0.15s, box-shadow 0.15s;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      background-image: none;
      font-size: 64px;
      color: #ffffff;
      width: 85px;
      height: 115px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
      top: 40%;
      cursor: pointer; }
      .selectContainer .scenario-container .next-btn.next-btn, .selectContainer .scenario-container .prev-btn.next-btn {
        right: -140px; }
        .selectContainer .scenario-container .next-btn.next-btn i, .selectContainer .scenario-container .prev-btn.next-btn i {
          margin-left: 10px; }
      .selectContainer .scenario-container .next-btn.prev-btn, .selectContainer .scenario-container .prev-btn.prev-btn {
        left: -140px; }
        .selectContainer .scenario-container .next-btn.prev-btn i, .selectContainer .scenario-container .prev-btn.prev-btn i {
          margin-right: 10px; }
      .selectContainer .scenario-container .next-btn.disable-button, .selectContainer .scenario-container .prev-btn.disable-button {
        opacity: 0.0;
        pointer-events: none; }
      .selectContainer .scenario-container .next-btn:hover, .selectContainer .scenario-container .prev-btn:hover {
        background-color: rgba(0, 0, 0, 0.5);
        color: #e6e6e6; }
      .selectContainer .scenario-container .next-btn:active, .selectContainer .scenario-container .prev-btn:active {
        transform: scale(0.95);
        -webkit-box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2); }
  .selectContainer .scenario {
    display: block;
    height: 850px;
    border-radius: 16px;
    -webkit-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    background-color: grey;
    background-size: 107% 104%;
    transform: scale(0.8);
    transition: transform 0.5s, box-shadow 0.5s; }
    .selectContainer .scenario .contents {
      z-index: 1;
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100.3%;
      height: 138px;
      background-color: #ffffff;
      color: #0c4028;
      border-radius: 0 0 10px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      .selectContainer .scenario .contents h1, .selectContainer .scenario .contents p {
        margin: 0; }
    .selectContainer .scenario .fa {
      position: absolute;
      z-index: 6;
      font-size: 100px;
      bottom: 15px;
      right: 20px;
      text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); }
    .selectContainer .scenario h1, .selectContainer .scenario h2, .selectContainer .scenario p {
      text-align: center; }
    .selectContainer .scenario.locked {
      pointer-events: none;
      color: #ffffff; }
      .selectContainer .scenario.locked .underlay {
        z-index: 5;
        border-radius: 16px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25);
        pointer-events: none; }
      .selectContainer .scenario.locked.completed .fa {
        font-size: 85px;
        bottom: 30px; }
      .selectContainer .scenario.locked.completed .contents .header {
        filter: blur(0px); }
      .selectContainer .scenario.locked:hover {
        transform: scale(0.8);
        -webkit-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2); }
      .selectContainer .scenario.locked .contents {
        background-color: #2d3d32;
        color: #f2f7f7; }
        .selectContainer .scenario.locked .contents .header {
          filter: blur(10px); }
    .selectContainer .scenario:hover {
      position: static;
      cursor: pointer;
      transform: scale(0.9);
      -webkit-box-shadow: 0px 10px 35px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0px 10px 35px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 10px 35px 2px rgba(0, 0, 0, 0.2); }
  .selectContainer button.logout-button {
    position: absolute;
    top: 10px;
    left: 10px; }
  .selectContainer button.progress-button {
    position: absolute;
    top: 10px;
    right: 10px; }
  .selectContainer button.reset {
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    z-index: 10;
    top: 120px;
    background-color: #0a402c;
    font: 28px DaxlinePro-Regular;
    color: #ffffff;
    border: none;
    min-width: 250px;
    min-height: 60px;
    border-radius: 6px;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s, transform 0.2s; }
    .selectContainer button.reset:hover {
      background-color: #072a1d;
      color: #f2f2f2; }
    .selectContainer button.reset:active {
      background-color: #03140e;
      color: #e6e6e6; }
  .selectContainer .scenario.finance {
    background-image: url("../../assets/images/images/menu_tile1.png"); }
    .selectContainer .scenario.finance.locked:not(.completed) {
      background-image: url("../../assets/images/images/menu_tile1_blur.png"); }
  .selectContainer .scenario.consolidation {
    background-image: url("../../assets/images/images/menu_tile2.png"); }
    .selectContainer .scenario.consolidation.locked:not(.completed) {
      background-image: url("../../assets/images/images/menu_tile2_blur.png"); }
  .selectContainer .scenario.collocation {
    background-image: url("../../assets/images/images/menu_tile3.png"); }
    .selectContainer .scenario.collocation.locked:not(.completed) {
      background-image: url("../../assets/images/images/menu_tile3_blur.png"); }
  .selectContainer .scenario.powercut {
    background-image: url("../../assets/images/images/menu_tile4.png"); }
    .selectContainer .scenario.powercut.locked:not(.completed) {
      background-image: url("../../assets/images/images/menu_tile4_blur.png"); }
  .selectContainer .scenario.retrofit {
    background-image: url("../../assets/images/images/menu_tile5.png"); }
    .selectContainer .scenario.retrofit.locked:not(.completed) {
      background-image: url("../../assets/images/images/menu_tile5_blur.png"); }

.loginContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/backgrounds/start.jpg"); }
  .loginContainer h1, .loginContainer p, .loginContainer h2 {
    color: white;
    text-align: center; }
  .loginContainer h1 {
    font-size: 60px; }
  .loginContainer h2 {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    bottom: 220px;
    font: 24px DaxlinePro-Regular;
    color: #ffffff;
    width: 90%;
    font-size: 32px;
    line-height: 200%;
    text-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2); }
  .loginContainer p {
    font-size: 36px; }
  .loginContainer button {
    display: block;
    margin: 12px auto;
    background-color: #0a402c;
    font: 28px DaxlinePro-Regular;
    color: #ffffff;
    border: none;
    min-width: 350px;
    min-height: 75px;
    border-radius: 6px;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s, transform 0.2s; }
    .loginContainer button:hover {
      background-color: #072a1d;
      color: #f2f2f2; }
    .loginContainer button:active {
      background-color: #03140e;
      color: #e6e6e6; }
  .loginContainer button {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    top: 900px; }

.progressContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/backgrounds/white-bg.jpg"); }
  .progressContainer .progress-menu-bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 60px;
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(top, #3b8c5b 0%, #3b8c5b 50%, #217c44 50%, #217c44 100%);
    background-image: linear-gradient(to bottom, #3b8c5b 0%, #3b8c5b 50%, #217c44 50%, #217c44 100%); }
    .progressContainer .progress-menu-bar i, .progressContainer .progress-menu-bar p, .progressContainer .progress-menu-bar div {
      color: #ffffff; }
    .progressContainer .progress-menu-bar .home-button {
      font-size: 42px;
      padding: 8px 24px;
      transition: color 0.2s; }
      .progressContainer .progress-menu-bar .home-button:hover {
        cursor: pointer;
        color: #f2f2f2; }
      .progressContainer .progress-menu-bar .home-button:active {
        color: #e6e6e6; }
    .progressContainer .progress-menu-bar .user-name {
      font: 24px DaxlinePro-Light;
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
      width: 100%;
      text-align: center;
      margin: 12px auto; }
  .progressContainer .card-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 50%;
    min-height: 25%;
    background-color: #d8d8d8;
    margin-top: 25px;
    background-image: -webkit-linear-gradient(top, #31a35d 0%, #185a32 100%);
    background-image: linear-gradient(to bottom, #31a35d 0%, #185a32 100%);
    border: 4px solid #4ab874;
    color: #ffffff;
    border-radius: 16px;
    -webkit-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
    padding: 20px 80px 40px;
    text-align: center; }
    .progressContainer .card-container ul, .progressContainer .card-container p, .progressContainer .card-container h1, .progressContainer .card-container h2, .progressContainer .card-container button, .progressContainer .card-container div {
      transition: opacity 0.25s; }
    .progressContainer .card-container .header, .progressContainer .card-container .progress-header {
      font: 32px DaxlinePro-Bold; }
      .progressContainer .card-container .header.header, .progressContainer .card-container .progress-header.header {
        margin-top: 0; }
      .progressContainer .card-container .header.progress-header, .progressContainer .card-container .progress-header.progress-header {
        margin-top: 10px; }
    .progressContainer .card-container .text {
      font: 20px DaxlinePro-Regular; }
    .progressContainer .card-container .progress-description, .progressContainer .card-container .progress-container .title {
      font: 24px DaxlinePro-Bold; }
    .progressContainer .card-container button {
      display: block;
      margin: 12px auto;
      background-color: #ffffff;
      font: 28px DaxlinePro-Regular;
      color: #0c4028;
      border: none;
      min-width: 250px;
      min-height: 60px;
      border-radius: 6px;
      transition: opacity 0.2s, background-color 0.2s, color 0.2s, transform 0.2s; }
      .progressContainer .card-container button:hover {
        background-color: #f2f2f2;
        color: #082b1b; }
      .progressContainer .card-container button:active {
        background-color: #e6e6e6;
        color: #04150d; }
    .progressContainer .card-container .home-button {
      margin-top: 80px;
      margin-bottom: 0; }
    .progressContainer .card-container .progress-result {
      clear: left;
      clear: right;
      margin-top: 40px; }
      .progressContainer .card-container .progress-result.result-0 {
        margin-top: 0; }
      .progressContainer .card-container .progress-result .progress-container .title {
        margin: 6px 0;
        width: 25%;
        text-align: left;
        float: left; }
      .progressContainer .card-container .progress-result .progress-container .progress {
        margin: 0;
        width: 65%;
        background: transparent;
        border: 4px solid #ffffff;
        border-radius: 0px;
        box-shadow: none;
        height: 40px; }
        .progressContainer .card-container .progress-result .progress-container .progress .progress-bar {
          border-radius: 0px;
          box-shadow: none;
          background: #ffffff;
          border: 1px solid #ffffff;
          outline: 1px solid #ffffff; }
      .progressContainer .card-container .progress-result .progress-container .progress-min, .progressContainer .card-container .progress-result .progress-container .progress-max {
        display: inline-block;
        margin-top: 10px;
        width: 25%;
        float: left;
        font: 24px DaxlinePro-Bold;
        font-size: 20px; }
        .progressContainer .card-container .progress-result .progress-container .progress-min.progress-min, .progressContainer .card-container .progress-result .progress-container .progress-max.progress-min {
          text-align: left; }
        .progressContainer .card-container .progress-result .progress-container .progress-min.progress-max, .progressContainer .card-container .progress-result .progress-container .progress-max.progress-max {
          float: right;
          text-align: right;
          width: 25%;
          margin-right: 10%; }