@media screen and (orientation: portrait) {
  .textBox {
    margin-left: 10vw;
    margin-right: 10vw;
    top: calc(33vh + calc(400px * var(--sizeFroyy)));
  }

  .startBox {
    top: calc(50vh + calc(400px * var(--sizeFroyy)));
  }
  .froyyComp {
    left: 50vw;
    top: 45vh;
    transform: translateX(-50%) translateY(-50%) scale(var(--sizeFroyy));
  }

  .uicont {
    left: 0px;
    top: 35vh;
    transform: translateY(-50%) translateX(-100%);
    padding-left: 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .drinnen {
    left: 0px;
    top: 35vh;
    transform: translateY(-50%) translateX(0%);
  }
}

@media screen and (orientation: portrait) and (max-width: 480px) {
  #mobVideoBtn {
    display: block;
  }

  .froyyComp {
    left: 50vw;
    top: 45vh;
    transform: translateX(-50%) translateY(-50%) scale(0.52);
    transition: all;
    transition-duration: 1s;
  }
  .textBox {
    margin-left: 5vw;
    margin-right: 5vw;
    top: 100%;
    transform: translateY(-100%);
  }
  .videoWrapper {
    display: none;
  }
}

@media screen and (orientation: portrait) and (max-width: 380px) {
  .froyyComp {
    transform: translateX(-50%) translateY(-50%) scale(0.48);
    transition: all;
    transition-duration: 1s;
  }
}

@media screen and (orientation: landscape) {
  .textBox {
    margin-left: calc(
      30vw + calc(400px * var(--sizeFroyy))
    ); /*calc(65% - 6vw)*/
    margin-right: 3vw;
    text-align: left;
    top: calc(1vh + calc(250px * var(--sizeFroyy)));
  }

  .startBox {
    min-width: 28vw;
    margin-left: 71vw;
    top: 50vh;
  }

  .froyyComp {
    left: 50vw;
    top: 45vh;
    transform: translateX(-50%) translateY(-50%) scale(var(--sizeFroyy));
  }

  .uicont {
    right: 0px;
    top: 35vh;
    transform: translateY(-50%) translateX(100%);
    padding-right: 30px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .drinnen {
    transform: translateY(-50%) translateX(0%);
    padding-right: 30px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

@media screen and (orientation: landscape) and (max-height: 480px) {
  #mobVideoBtn {
    display: block;
  }

  .uicont {
    right: 0px;
    top: 0vh;
    transform: translateX(100%) translateY(-15%) scale(0.7);
    padding-right: 30px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .drinnen {
    transform: translateX(0%) translateY(-15%) scale(0.7);
    padding-right: 30px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .sliderUI {
    width: 50vw;
    padding-bottom: 20px;
  }

  .froyyComp {
    left: 50vw;
    top: 45vh;
    transform: translateX(-50%) translateY(-50%) scale(0.5);
    transition: all;
    transition-duration: 1s;
  }

  .textBox {
    margin-left: calc(55% - 6vw);
    margin-right: 5vw;
    text-align: left;
    top: calc(1vh + calc(100px * var(--sizeFroyy)));
  }

  .videoWrapper {
    display: none;
  }

  .videovisi {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
  }

  .videovisi img {
    display: none;
  }
}

@media screen and (orientation: landscape) and (max-height: 360px) {
  .froyyComp {
    transform: translateX(-50%) translateY(-50%) scale(0.45);
    top: 42vh;
    transition: all;
    transition-duration: 1s;
  }
}

@-moz-document url-prefix() {
  :root {
    --fontAdjust: 1.2;
  }
  .headline {
    padding-top: 4pt;
  }
}

@supports (-webkit-touch-callout: none) {
  :root {
    --isIOS: 1;
  }
}

@supports not (-webkit-touch-callout: none) {
  :root {
    --isIOS: 0;
  }
}