//----------- MAIN BOX ----------------

.main_box
  height: calc(100vh - 14.5em)
  background-color: white
  overflow: auto
  .main_text
    color: $secondarycolor
    //font-size: calc(5.5vh + 2em)
    //padding: .7em 6em 1em 1em
    font-weight: bold
    font-size: calc(4.5vw + 1.5em)
    line-height: calc(.4vw + .9em)
    font-weight: bold
    padding: .7em .7em 0 .7em
    margin: 0
  .nav_box
    position: fixed
    width: 95%
    &.with_feedback
      margin-top: 3.9em
    .nav_position
      position: relative
      .nav_image
        width: 100%
        display: block
      .nav_url
        color: black
        font-size: .75vw
        position: absolute
        top: 65%
        max-width: 89.3%
        white-space: nowrap
        text-overflow: ellipsis
        overflow: hidden
  .image_box
    text-align: center
    width: 100%
    .iframeparent
      width: 100%
    .eduiframe
      width: 100%
      height: 300vh
      pointer-events: none
      display: block
      border: none
      margin: 0
      padding: 0
      overflow: hidden
      overflow-x: hidden
  .quiz_image
    width: 100%
    display: block
    margin: 0 auto
    &.with_margins
      width: 70%
  &.main_box_finished
    height: calc(100vh - 7.7em)
    .main_text
      font-size: calc(5vh + 1.3em)
      padding: .7em 3em .8em 1em
      .survey
        padding-bottom: .5em



@media (max-width: $media1) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(4vw + 2em)
      padding: 1em
    .nav_box
      .nav_position
        .nav_url
          top: 65%
    &.main_box_finished
      .main_text
        font-size: calc(4vh + 1.4em)
        padding: .7em 2.3em 1em 1em


@media (max-width: $media2)

  .main_box
    .main_text
      font-size: calc(5vh + 2.3em)
      padding: .8em
    .nav_box
      .nav_position
        .nav_url
          top: 65%


@media (max-width: $media4) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(5vh + 1.9em)
      padding: 1em 2em 1em 1em
    .nav_box
      &.with_feedback
        margin-top: 3.1em
      .nav_position
        .nav_url
          top: 65%


@media (max-width: $media4) 
  
  .main_box
    .nav_box
      &.with_feedback
        margin-top: 3.1em
    &.main_box_finished
      .main_text
        font-size: calc(3vh + 1.6em)
        padding: .7em 1em 1em 1em


@media (max-width: $media5)

  .main_box
    .main_text
      font-size: calc(4vh + 1.9em)
      padding: 1em 2em 0 1em
    .nav_box
      &.with_feedback
        margin-top: 3.1em


@media (max-width: $media6)

  .main_box
    .main_text
      font-size: calc(4.5vh + 2.2em)
      padding: .8em 1em .8em .8em


@media (max-width: $media6) and (orientation: landscape)

  .main_box
    height: calc(100vh - 8.3em)
    .main_text
      font-size: calc(2vh + 2em)
      padding: .8em 3em .8em 1em
    .nav_box
      &.with_feedback
        margin-top: 1.7em
      .nav_position
        .nav_url
          top: 63%
    .quiz_image
      &.with_margins
        width: 80%
    &.main_box_finished
      height: calc(100vh - 4.7em)



@media (max-width: $media6)
  @media (max-height: $media13)

    .main_box
      .main_text
        font-size: calc(1.7vw + 2em)
        padding: .7em 3em 0 1em



@media (max-width: 818px)
  @media (max-height: 613px)

    .main_box
      .main_text
        font-size: calc(3.2vw + 2.2em)
        padding: .8em 1.5em 0 .8em



@media (max-width: $media7) and (orientation: landscape) //iPhoneX

  .main_box
    .main_text
      font-size: calc(1.5vw + 2em)
      padding: .7em 1.5em 0 1em
    &.main_box_finished
      height: calc(100vh - 4.7em)



@media (max-width: $media8)

  .main_box
    .main_text
      font-size: calc(4vh + 2em)
      padding: .9em
    .nav_box
      &.with_feedback
        margin-top: 3.1em
      .nav_position
        .nav_url
          top: 66%
    .image_box
      .quiz_image
        &.with_margins
          width: 80%
    &.main_box_finished
      .main_text
        font-size: calc(2.35vh + 1.6em)


@media (max-width: $media9)

  .main_box
    height: calc(100vh - 9em)
    .nav_box
      &.with_feedback
        margin-top: 1.7em
      .nav_position
        .nav_url
          top: 67%
    .quiz_image
      &.with_margins
        width: 95%
    &.main_box_finished
      height: calc(100vh - 4.1em)



@media (max-width: $media9) and (orientation: landscape)

  .main_box
    height: calc(100vh - 8em)
    .main_text
      font-size: calc(2.5vw + 1.7em)
      padding: .7em 2.5em .7em 1em
    .nav_box
      .nav_position
        .nav_url
          top: 66%
    .image_box
      .quiz_image
        &.with_margins
          width: 80%
    &.main_box_finished
      height: calc(100vh - 4.7em)


@media (max-width: 670px) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(2vw + 1.7em)
      padding: .7em 2em 0 1em
    .nav_box
      .nav_position
        .nav_url
          top: 64%


@media (max-width: $media10) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(3vh + 1.5em)
      padding: .8em 3em .8em 1em



@media (max-width: $media10)
  @media (max-height: $media14)

    .main_box
      .main_text
        font-size: calc(2vw + 1.5em)
        padding: .8em 3em 0 1em


@media (max-width: 568px)
  @media (max-height: $media14)

    .main_box
      .main_text
        font-size: calc(2vh + 1.5em)
        padding: .8em 3em 0 1em



@media (max-width: $media12)

  .main_box
    .main_text
      font-size: calc(4vh + 1.2em)
      padding: .8em 1.2em 0 .8em
    &.main_box_finished
      .main_text
        font-size: calc(2vh + .9em)


@media (max-width: $media13)

  .main_box
    .main_text
      font-size: calc(4.2vh + 1.2em)
      padding: .8em 1.2em .8em .8em



@media (max-width: $media13) and (orientation: portrait)

  .main_box
    .main_text
      font-size: calc(3.5vh + 1.2em)



@media (max-width: $media14)

  .main_box
    .main_text
      font-size: calc(4vh + 1em)
      padding: .7em 1.5em 0 .7em
    .nav_box
      .nav_position
        .nav_url
          top: 68%


@media (max-width: $media15)

  .main_box
    .main_text
      font-size: calc(3.5vh + 1em)


