.sc-general {
  display: none;

}

.sc-general.show {
  display: block;

}

.input-validation-failed {
  border-color: #eb001c !important;
}

.input-validation-failed-label {
  color: #eb001c;
}

#screen-1 {
  overflow: hidden;
}

.modal .btn {
  background: #02325c;
  color: #fff;
  box-shadow: none;
}
.modal .btn:hover {
  background: #074780;
}
.cheer {
  display: none;
}
.cheer.animate-flicker {
  display: block;
}

@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; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}


*:not(input)  {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.progress-bar {
  height: 50%;
}

/*
.modal {
  display: none;
}

.modal .editor-text a {
  font-weight: bold;
  text-decoration: underline;
}

.modal .editor-text a:hover {

  text-decoration: none;
}

.unselectable {
  pointer-events: none;
}

.content-area__participate-link {
  display: none;
}

.input-validation-failed {
  border-color: #eb001c !important;
}

.checkbox__label.input-validation-failed:before {
  border-color: #eb001c !important;
}

.content-area__body.physical {
  display: none;
}

.intro-screen__content {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
}

.intro-screen__list {
  margin-bottom: 20px;
}

.intro-screen__button {
  position: relative;
  top: 0;
  transform: translate(0, 0);
  left: 0;
  margin-top: auto;
}

.content-area {
  min-height: 1px;
  opacity: 0;
  transition: none !important;
}


.modal__close {
  width: 45px;
  height: 45px;
  font-weight: 700;
  border-radius: 100%;
  color: #004990;
  position: absolute;
  right: 10px;
  line-height: 1;
  font-size: 23px;
  top: 10px;
  padding-top: 1px;
  z-index: 9;
  transition: transform 0.6s ease;
  transform: rotate(
-45deg);
  padding: 10px;
  cursor: pointer;
}

.editor-text strong.code {
  color: #004990;
  font-size: 29px;
  font-weight: bold;
  font-weight: 800;
}


@media (max-width: 1439px) {
  .game-screen::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 30vh;
    width: 100%;
    pointer-events: none;
    z-index: 1;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 100%);
  }

  .content-area {
    margin-top: 160px;
  }
}

@media (max-width: 1022.8px) {
  .content-area {
    margin-top: 40px; 
  }
}

@media (min-width: 1440px){
  .content-area.modal.esej,.content-area.modal.content-area--with-form {
    margin-top: 120px;
  }
}

@media (max-height: 950px) {
  .intro-screen__illustration img {
    max-height: 40vh;
  }
}

@media (max-height: 600px) {
  .intro-screen__illustration {
    bottom: 10px;
  }

  .intro-screen__illustration img {
    max-height: 32vh;
  }
}

@media (max-width: 767px) {
  .intro-screen__content {
    padding-bottom: 34vh;
  }
}
*/

.sc-game {
  background: radial-gradient(#071d56, black);
}

.game-screen {
  z-index: 10;
}
.image-aspect {
  position: fixed;
}

@media only screen and (max-width: 828px) and (orientation: landscape) {
  /*
	.game-main .play-game {
		height: calc(var(--vh, 1vh) * 100);
		margin-top: 0;
	}
*/


	.sc-game {
		min-height: calc(var(--vh, 1vh) * 100);
	}

	.image-aspect__bg {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
		width: 100vw !important;
		height: calc(var(--vh, 1vh) * 100) !important;
	}

	canvas {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
	}

}

@media only screen and (max-width: 766px) {
	
  .image-aspect {
    position: initial;
  }
	.sc-game {
		min-height: calc(var(--vh, 1vh) * 100);
	}

	.image-aspect__bg {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
		width: 100vw !important;
		height: calc(var(--vh, 1vh) * 100) !important;
	}

	canvas {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
	}

}


.game-screen {
  pointer-events: none;
}