* {
    padding: 0;
    margin: 0;
}
html, body {
    background: #fff;
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.b1 {
  background-color: aqua;
}

.b2 {
  background-color: brown;
}

.hideit {
  display: none;
}

.score{
  position: fixed;
  top: 0px; 
  left: 0px; 
  width: 40%; 
  height: auto;
  font-family: 'Chela One', cursive;
  color: white;}
  @media screen and (max-aspect-ratio: 9/10) {
    .score {
      width: 40%; 
      height: auto; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .score {
      width: 30%; 
      height: auto; } }
  @media screen and (min-aspect-ratio: 11/10) {
    .score {
      height: 10%; 
      width: auto; } }

.responsive_img {
    width: 100%;
    height: auto; }
  @media screen and (max-aspect-ratio: 9/10) {
    .responsive_img {
      width: 100%;
      height: auto; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .responsive_img {
      width: 100%;
      height: auto; } }
  @media screen and (min-aspect-ratio: 11/10) {
    .responsive_img {
      height: 100%;
      width: auto; } }

.responsive_img2 {
    height: 100%;
    width: auto; }
  @media screen and (max-aspect-ratio: 6/10) {
    .responsive_img2 {
      width: 100%;
      height: auto; } }
  @media screen and (min-aspect-ratio: 6/10) and (max-aspect-ratio: 11/10) {
    .responsive_img2 {
      height: 100%;
      width: auto; } }
  @media screen and (min-aspect-ratio: 11/10) {
    .responsive_img2 {
      height: 100%;
      width: auto; } }

.loadingcontainer {
  width: 10vh;
  height: 10vh;
}
.responsive_img_simpl {
  position: absolute;
  left:50%;
  top:50%;
  width: 100%;
  height: auto;
  transform: translate(-50%,-50%); }

.margintop {
  margin-top: 12vh;
  color: white;
}


.img_landscape {
    display: block;
}

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

.font_big{
    font-size: 2.7vw; }
  @media screen and (max-aspect-ratio: 9/10) {
    .font_big {
      font-size: 3.5vh; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .font_big {
      font-size: 2.7vw; } }
  @media screen and (min-aspect-ratio: 11/10) {
    .font_big {
      font-size: 3.5vw; } }

.color_white {
  color: #fafafa;
}

.stars{
  position: fixed;
  top: 0px; 
  right: 0px; 
  width: 40%; 
  height: auto;}
  @media screen and (max-aspect-ratio: 9/10) {
    .stars {
      height: 6%; 
      width: auto; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .stars {
      height: 10%; 
      width: auto; } }
  @media screen and (min-aspect-ratio: 11/10) {
    .stars {
      height: 10%; 
      width: auto; } }

.stars .img_landscape {
  display: inline-block;
}

.stars .responsive_star {
    height: 100%;
    width: auto;
}

.info_text {
    position: absolute; 
    opacity: 0;
    top: 25%; 
    left: 0px; 
    width: 100%; 
    font-size: 5vw;
    font-weight: 400;
    letter-spacing: 0.3vw;
    text-shadow: 0px 0px 7px white;
    padding: 1vw;
    text-align: center;
    transform: translate(0%, -40%);}
  @media screen and (max-aspect-ratio: 9/10) {
    .info_text {
    font-size: 5vh; } }
  @media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .info_text {
    font-size: 6vw;} }
  @media screen and (min-aspect-ratio: 11/10) {
    .info_text {
    font-size: 5vw; } }

.gradient_white {
    background: -moz-linear-gradient(left, rgba(255,255,255,0.01) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 65%, rgba(255,255,255,0.01) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0.01) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(255,255,255,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to left, rgba(255,255,255,0.01) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(255,255,255,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#03ffffff',GradientType=0 ); /* IE6-9 */
}

.backgr1 {
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
}

.gameside {
	position: absolute;
	top:0;
	bottom: 0;
	right: 0;
	left:35%;
	background-color: rgba(0,0,0,0.77) }
  @media screen and (max-aspect-ratio: 1/1) {
    .gameside {
      top:20%;
      bottom: 0;
      right: 0;
      left:0; } }
  @media screen and (min-aspect-ratio: 1/1) {
    .gameside {
      top:0;
      bottom: 0;
      right: 0;
      left:35%; } }

.logofirstpage {
    position: absolute;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: top left;
	top:0%;
	left:5%;
	width: 60%;
    height:25%;
    margin: 2% auto; }
  @media screen and (max-aspect-ratio: 1/1) {
    .logofirstpage {
    height:12%; } }
  @media screen and (min-aspect-ratio: 1/1) {
    .logofirstpage {
    height:25%; } }

.posbtnset {
    font-weight: 700;
    position: absolute;
	bottom:5%;
	left:50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    padding: 3vh 12vh;
    font-size: 3vh; }
  @media screen and (max-aspect-ratio: 1/1) {
	.posbtnset {
    padding: 2vh 8vh;
	 bottom:5%; }}
  @media screen and (min-aspect-ratio: 1/1) {
    .posbtnset {
    padding: 3vh 12vh;
	bottom:5%; } }

.bntnext {
	border: none;
	color: #fff;
	background-color: #00cc2c;
	cursor: pointer; }

.bntnext:hover {
	border: solid 1px #00cc2c;
	color: #fff;
	background-color: #014510;
}

.question {
	font-weight: 700;
    color: white;
    position: absolute;
    top: 28%;
    left:5%;
    right:5%;
/*  width: 90%;*/
    height: 15%;
    font-size: 3vh;
    text-align: left; }
  @media screen and (max-aspect-ratio: 1/1) {
    .question {
      top: 15%;
    height: 15%;
    font-size: 2vh; } }
  @media screen and (min-aspect-ratio: 1/1) {
    .question {
      top: 28%;
    height: 15%;
    font-size: 3vh; } }

.question div {
  position: absolute;
  top:50%;
  transform: translate(0,-50%);
}

.posanswers {
    font-weight: 700;
    position: absolute;
    top: 43%;
    bottom: 18%;
    left: 5%;
    right: 5%;
    font-size: 3vh; }
  @media screen and (max-aspect-ratio: 1/1) {
	.posanswers {
    top: 30%;
    bottom: 18%;
    font-size: 2vh; }}
  @media screen and (min-aspect-ratio: 1/1) {
    .posanswers {
    top: 43%;
    bottom: 18%;
    font-size: 3vh;  } }

.answer {
	border-top: solid 0.5vh #00cc2c;
	color: black;
	background-color: #fff;
	padding: 3vh;
	cursor: pointer; 
	text-align: left;}

.answer:hover {
	background-color: #c6c6c6;
}

.answer_four {
	display: inline-block;
	position: relative;
	width: 49%;
	margin: 0 1% 0 0;
	padding: 0;
	height: 50%; }
  @media screen and (max-aspect-ratio: 1/1) {
	.answer_four {
	width: 100%; 
	height: 25%;
	margin: 0;}}
  @media screen and (min-aspect-ratio: 1/1) {
    .answer_four {
	width: 49%;
	height: 50%;
	margin: 0 1% 0 0; } }

.answer_four .answer {
  position: absolute;
  top:50%;
  left:0;
  right:0;
  transform: translate(0,-50%);
}

.answer_three {
	position: relative;
	width: 100%;
	height: 33%;
	margin: 0;
	padding: 0;
}

.answer_three .answer {
  position: absolute;
  top:50%;
  left:0;
  right:0;
  transform: translate(0,-50%);
}

.answer_two {
	position: relative;
	width: 100%;
	height: 49%;
	margin: 0;
	padding: 0;
}

.answer_two .answer {
  position: absolute;
  top:50%;
  left:0;
  right:0;
  transform: translate(0,-50%);
}

.selectedAnswer {
  position: absolute;
  right:4%;
  width: 15%;
  top:2%;
  bottom:2%;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: right center; }
  @media screen and (max-aspect-ratio: 1/1) {
	.selectedAnswer {
  width: 10%;}}
  @media screen and (min-aspect-ratio: 1/1) {
    .selectedAnswer {
      width: 15%; } 
    .answer_two .selectedAnswer {
      width: 8%;
    } 
    .answer_three .selectedAnswer {
      width: 8%;
    }}

.timerpos {
    position: absolute;
    left: 15%;
    top:50%;
    width: 70%;
    text-align: center;
    height: 10%; }
  @media screen and (max-aspect-ratio: 1/1) {
	.timerpos {
    left: 5%;
    top:40%;
    width: 90%;}}
  @media screen and (min-aspect-ratio: 1/1) {
    .timerpos {
    left: 15%;
    top:50%;
    width: 70%; } }

.timerclass .timesection {
  color: white;
  font-size: 3vh;
  position: relative;
  width: 20%;
  height: 100%;
  display: inline-block;
  margin: 0;
  background-image: url(../images/counterback.png);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
  padding: 7% 0px;
}

.timesection .sub {
    font-size: 50%;
    position: absolute;
    text-align: center;
    top: 5%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
}

.timesection .sup {
    font-size: 200%;
    position: absolute;
    text-align: center;
    top: 48%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); }