:root {
  --bgc: #060613;
  --arrowborder: 30px;
  --arrowborder2: 10px;
  height: 100%;
}

.mainwrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2vh;
}
.mainwrapper div {
  display: flex;
  height: 100%;
}
.mainpadding {
  min-width: 60px;
  height: 100%;
}

@media (orientation:landscape) {
  #nextbutton {
    width: 0;
    height: 0;
    border-top: var(--arrowborder) solid transparent;
    border-bottom: var(--arrowborder) solid transparent;
    border-left: var(--arrowborder) solid #540e0e;
    position: absolute;
    left: auto;
    right: -72px;
  }
  #previousbutton {
    width: 0;
    height: 0;
    border-top: var(--arrowborder) solid transparent;
    border-bottom: var(--arrowborder) solid transparent;
    border-right: var(--arrowborder) solid #540e0e;
    position: absolute;
    right: auto;
    left: -72px;
  }
  #passage-content {
    height: 100%;
    width: auto;
  }
  @media (max-height: 299px) {
    .passage {
      min-width: 140px;
      font-size: 2.0vh;
    }
  }
  @media (min-height: 300px) and (max-height: 400px) {
    .passage {
      min-width: 169px;
      font-size: 2.2vh;
    }
  }
  @media (min-height: 401px) and (max-height: 600px) {
    .passage {
      min-width: 225px;
      font-size: 2.4vh;
    }
  }
  @media (min-height: 601px) {
    .passage {
	  min-width: 338px;
      font-size: 2.5vh;
    }
  }
  @media (min-height: 800px) {
    .passage {
      min-width: 450px;
      font-size: 2.5vh;
    }
  }
    @media (min-height: 1000px) {
    .passage {
	  min-width: 562;
      font-size: 2.5vh;
    }
  }
}

@media (orientation:portrait){
  @media (max-width: 539px) {
	  #passage {
      max-width: 100%;
	  }
	  #areena-container {
    height: 100% !important;
    max-width: 100%;
		object-fit: fill;
	  }
    .passage img, video{

    }
  }
  @media (min-height: 1021px) {
	  #passage {
      max-width: 100%;
	  }
	  #areena-container {
		height: 100% !important;
    max-width: 100%;
		object-fit: fill;
	  }
    .passage img, video{

    }
  }

  @media (max-width: 300px) {
    .passage {
      font-size: calc(1.8vw + 1.2vh);
    }
  }
  @media (min-width: 301px) and (max-width: 600px) {
    .passage {
      font-size: calc(2.0vw + 1.3vh);
    }
  }
  @media (min-width: 601px) and (max-width: 699px) {
    .passage {
      font-size: calc(2.2vw + 1.4vh);
    }
  }
  @media (min-width: 540px)  {
  	@media (max-height: 1020px) {
  	  #passage {
          height: 100%;
          width: auto;
  		    font-size: 2.2vh;
        }
      @media(min-width: 740px) {
        #nextbutton {
          width: 0;
          height: 0;
          border-top: var(--arrowborder) solid transparent;
          border-bottom: var(--arrowborder) solid transparent;
          border-left: var(--arrowborder) solid #540e0e;
          position: absolute;
          left: auto;
          right: -72px;
          }
          #previousbutton {
          width: 0;
          height: 0;
          border-top: var(--arrowborder) solid transparent;
          border-bottom: var(--arrowborder) solid transparent;
          border-right: var(--arrowborder) solid #540e0e;
          position: absolute;
          right: auto;
          left: -72px;
          }
      }
  	}
  	@media (min-height: 1021px) {
  	  .passage {
          font-size: calc(2.3vw + 1.5vh);
        }
  	}
  }
}


.controls button {
  width: 0px;
  height: 0px;
  background-color: var(--bgc);
  border: 0px;
  padding: 0px;
}
button:disabled {
  border-right: 0px solid transparent !important;
  border-left: 0px solid transparent !important;
  background-color: var(--bgc);
}

.passages {
  max-width:100%;
  max-height:100%;
  height: 100%;
  margin: 0 auto;
}
.passage {
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative;
}

.passage img, video{
  margin: 0 auto;
  height: 100%;
  object-fit: fill;
}


.playkit-engine {
	object-fit: fill; !important
}

.playkit-container video {
	object-fit: fill; !important
}
.passage a {
  color: red;
  margin-right: 5px;
  margin-left: 5px;

}
.passage a:hover {
  color: crimson;
  text-decoration: underline;
}

.content {
  align-items: center;
  justify-content: center;
  bottom: 10px;
}
.test-container {
  width: 100%;
}
.choice-buttons {
  position: absolute;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  z-index: 1;
}

.text-container {
  position: absolute;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
}

.text-container p {
  color: white;
  font-family: "Yle next";
  font-size: 20px;
  z-index: 1;
  position: absolute;
}

#transition-control {
  align-items: center;
  justify-content: center;
}

.choice-buttons button {
  background-color: Transparent;
  position: absolute;
  border: 0px;
}

.choice-button {
  font-family: "Yle next";
  color: white;
  z-index: 2;
  padding: 3%;
}


#choice-button-yblock {
	height: 75%;
	width: 100%;
}

#button-wrapper {
  position: absolute;
  top: 30px;
  right: 2px;
  justify-content: flex-end;
  height: auto;
}
.control-btn-container {
  width: 32px;
  z-index: 2;
}

.control-btn-container button {
  width: 32px;
  height: 32px;
  background: 0 0;
}
.ios-button-container {
  position: absolute;
  top: calc(50% - 64px);
  left: calc(50% - 64px);
  justify-content: flex-end;
  height: auto;
}
#ios-play-button {
    width: 128px;
    height: 128px;
    background-color: #060613;
    border-radius: 50%;
}
#ios-play-button-play {
  width: inherit;
  height: inherit;
}

@media (max-width: 700px) {
  .icon {
    width: 24px;
    height: 24px;
  }
  #pause-button-pause {
    width: 18px;
    height: 18px;
  }
}
@media (min-width: 701px) {
  .icon {
    width: 30px;
    height: 30px;
  }
  #pause-button-pause {
    width: 24px;
    height: 24px;
  }
}

.hidden {
  display: none;
}
#ribbon {
  background: linear-gradient(180deg,rgba(0,0,0,.35),transparent);
  position: absolute;
  flex-direction: column;

  top: 0px;
  left: 0px;
  right: 0px;
  height: 58px;
}

#point-container {
  position: absolute;
  flex-direction: column;
  top: 1%;
  left: 0%;
  height: 9%;
  min-width: 10%;
  max-width: 30%;

}
#point-container p {
  position: absolute;
  top: 40%;
  left: 57%;
  margin-block-start: 0px;
  margin-block-end: 0px;
  white-space: pre;
}
#progress-container {
  align-items: flex-end;
  top: 0px;
  height:20px;
  width: 100%;
}
#ribbon h1 {
  height: 10px;
  width: 100%;
}
.progress-bar-alt {
  position: relative;
  height: 2px;
  margin: 0 2px;
  background-color: rgba(255,255,255,.4);
  cursor: pointer;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  -webkit-box-flex: 1;
  flex: 1;
  display: flex;
  flex-direction: row;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.progress-bar {
  border-radius: : 10px;
  height: 8px !important;
  flex-grow: 1;
  border-radius: 4px;
  margin: 0 5px;
  display: flex;

  background-image: -webkit-linear-gradient(left,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.9) 50%,
    rgba(255, 255, 255,.4) 50.001%,
    rgba(255, 255, 255,.4) 100%
  );
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: 100% 50%;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: .2s;
}

.progress-current {
  animation-name: Progress;
}
.delayed-button {
  animation-name: Delayed;
  opacity: 0;
  width: 0%;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}
@-webkit-keyframes
Progress {
  0% {background-position: 100% 0;}
  100% {background-position: 0 0;}
}

@-webkit-keyframes
Delayed {
  0% {opacity: 0; }
  100% {opacity: 1; }
}

.progress-visited {
  background-color: rgba(255,255,255,.9);
}