.feedback-box
  opacity: 0
  position: absolute
  z-index: 1
  width: 95%
  margin: 0 auto
  height: calc(100vh - 14.5em)
  background-color: rgba(255, 255, 255,.8)
  pointer-events: none
  @include column-flex
  justify-content: center
  .user_answer
    font-size: 8em
    font-weight: bold
    @include transform(rotate(-10deg))
    &.user_right_answer
      color: $green
    &.user_wrong_answer
      color: $red
  .question
    font-size: 5em
    font-weight: bold
    @include transform(rotate(-10deg))
    &.right_question
      color: $green
    &.wrong_question
      color: $red
  &.fade-enter
    opacity: 0.01
    &.fade-enter-active
      opacity: 1
      transition: opacity 500ms ease-in
  &.fade-exit
    opacity: 1
    &.fade-exit-active
      opacity: 0.01
      transition: opacity 500ms ease-in

.feedback_header
  z-index: 1
  text-align: right
  padding: .2em .7em
  font-size: 2.5em
  font-weight: bold
  position: fixed
  width: 95%
  &.user_answer
    color: white
    &.user_right_answer
      background-color: $green
    &.user_wrong_answer
      background-color: $red
    &.user_not_answer
      background-color: $maincolor
      color: $background

.feedback_iframe
  position: absolute
  top: 9.3em
  z-index: 1
  width: 95%
  //margin: 0 auto
  height: calc(100vh - 18.35em)
  background-color: rgba(255, 255, 255,.85)
  color: black
  @include flex
  justify-content: center
  @include transition_default
  .feedback_i_content
    width: 65%
    opacity: 1
    font-size: calc(1vh + 1vw + .5em)
    margin-top: -1em
    background-color: rgba(255, 255, 255,.7)
    @include box-shadow (0px 0px 60px 15px rgba(255,255,255,1))
    @include transition (opacity 1100ms ease)
    a
      font-weight: 700
      @include hand_cursor
    p
      margin: .5em 0 0 0
    .content01
      margin-top: 0
      font-weight: 600
      font-size: calc(1.1vh + 1.1vw + .5em)
    .content02
    .content03
      //font-size: calc(1.1vh + 1vw + .5em)
  .toggleFeedback
    position: absolute
    @include flex
    justify-content: flex-end
    font-size: calc(.8vw + .8vh + .5em)
    font-weight: 700
    right: 1em
    bottom: 1em
    .control
      fill: black
      font-size: .8em
      margin-left: .5em
      @include hand_cursor
      @include transform(rotate(180deg))
      @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))
      &:hover
        @include hover_scale_in
  &.redux
    height: 3.5em
    font-size: 1em
    padding: .2em .7em
    font-weight: bold
    background-color: $lightgray
    @include transition_default
    .feedback_i_content
      opacity: 0
      @include transition (opacity 250ms ease)
    .toggleFeedback
      right: 1em
      top: 1em
      .control
        @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))
        @include transform(rotate(0deg))
        &:hover
          @include hover_scale_out


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

  .feedback-box
    .user_answer
      font-size: 6em
    .question
      font-size: 3.5em

  .feedback_header
    font-size: 2em

  .feedback_iframe
    top: 8.55em
    height: calc(100vh - 17.6em)
    &.redux
      height: 3.5em


@media (max-width: $media4)

  .feedback-box
    .user_answer
      font-size: 6em
    .question
      font-size: 3.5em

  .feedback_header
    font-size: 2em

  .feedback_iframe
    top: 8.55em
    height: calc(100vh - 17.6em)
    &.redux
      height: 3.5em


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

  .feedback-box
    height: calc(100vh - 8.3em)
    .user_answer
      font-size: 3.2em
    .question
      font-size: 1.7em

  .feedback_header
    text-align: right
    font-size: 1.1em

  .feedback_iframe
    &.redux
      height: 2em !important



@media (max-width: 880px)

  .feedback_iframe
    top: 8.55em
    height: calc(100vh - 17.6em)
    &.redux
      height: 3.5em


@media (max-width: 880px) and (orientation: landscape) 
  .feedback_iframe
    top: 5.1em
    height: calc(100vh - 10em)
    .feedback_i_content
      font-size: calc(.7vh + .7vw + .5em)



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

    .feedback-box
      .user_answer
        font-size: 4.5em
      .question
        font-size: 3em



@media (max-width: $media8)

  .feedback-box
    .user_answer
      font-size: 6em
    .question
      font-size: 3.5em

  .feedback_header
    font-size: 2em

  .feedback_iframe
    &.redux
      height: 2.7em


@media (max-width: $media9)

  .feedback-box
    height: calc(100vh - 9em)
    .user_answer
      font-size: 3.2em
    .question
      font-size: 1.7em

  .feedback_header
    font-size: 1.1em

  .feedback_iframe
    top: 5em
    height: calc(100vh - 10.75em)


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

  .feedback-box
    height: calc(100vh - 8em)

  .feedback_header
    text-align: right

  .feedback_iframe
    top: 5em
    height: calc(100vh - 9.75em)
    .feedback_i_content
      font-size: calc(.6vh + .6vw + .4em)


@media (max-width: $media12)

  .feedback_header
    text-align: center
  
  .feedback_iframe
    &.redux
      height: 2.3em


@media (max-width: $media15)

  .feedback_iframe
    .feedback_i_content
      font-size: calc(1vh + 1vw + .4em)


