html,
body
{
  width: 100%;
  height: 100%;
  margin: 0;
}

.preloadContainer
{
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  position: fixed;
}

.preloadContainer .splash
{
  width: 35vw;
  height: 35vw;
  max-height: 80vh;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.preloadContainer .splash .icon
{
  width: 100%;
  height: 68%;
  background-image: url("../resources/magicbook-machine/bitmaps/icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.preloadContainer .splash .indicator
{
  width: 100%;
  height: 4%;
  background-color: #141519;
  border-radius: 5vw;
  margin-top: 5%;
  margin-bottom: 15%;
  overflow: hidden;
  text-align: center;
  font-size: 2vw;
  font-family: "Montserrat-Medium", sans-serif;
  color: white;
}

.preloadContainer .splash .indicator .progressBar
{
  width: 0;
  height: 100%;
  background-color: white;
  background-color: #ff8401;
  border-radius: 5vw;
  -webkit-transition: width 0.3s linear;
  transition: width 0.3s linear;
}

.preloadContainer .splash .logo
{
  width: 100%;
  height: 12%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  opacity: 0;
}

.preloadContainer.hidden
{
  opacity: 0;
}

.preloadContainer.click .splash .indicator
{
  background-color: initial;
  overflow: initial;
  -webkit-animation: blink 1s alternate infinite;
  animation: blink 1s alternate infinite;
}

.preloadContainer.auto .splash .indicator
{
  overflow: initial;
}

.preloadContainer.auto .splash .indicator .progressBar
{
  -webkit-animation: glow 1.8s forwards;
  animation: glow 1.8s forwards;
}

.preloadContainer .splash .logo
{
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 411.94 201.89'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fdc300; %7D .cls-1, .cls-2 %7B stroke-width: 0px; %7D .cls-2 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-2' d='m148.09,125.2c-2.1-5.32-4.93-9.98-8.5-13.98-3.56-3.98-7.75-7.26-12.59-9.82-4.84-2.58-9.99-4.34-15.49-5.3v-.55c6.33-2.15,14.56-7.93,19.28-11.91L82.79.12c-1.39-.05-4.13-.09-5.52-.09H0v201.85h77.27c9.3,0,18.39-.98,27.26-2.99,8.86-1.99,16.73-5.26,23.69-9.83,6.94-4.57,12.52-10.58,16.72-18.1,4.2-7.5,6.3-16.77,6.3-27.8,0-6.65-1.05-12.64-3.15-17.96ZM45.21,38.8h23.01c9.87,0,17.3,1.56,22.34,4.71,5.02,3.13,7.52,8.13,7.52,14.97,0,7.22-2.42,12.68-7.26,16.38-4.84,3.72-11.63,5.57-20.42,5.57h-25.2v-41.63Zm56.18,111.9c-2.03,3.15-4.62,5.57-7.81,7.29-3.2,1.71-6.78,2.9-10.69,3.56-3.93.68-7.74,1-11.38,1h-26.3v-46.18h26.04c10.03,0,18.07,1.62,24.1,4.85,6.05,3.22,9.05,9.02,9.05,17.39,0,4.94-1.01,8.98-3.01,12.09Z'/%3E%3Cpath class='cls-2' d='m283.03,99.14l17.6,21.72s4.57-8.64,6.75-12.86c3.79-7.36,7.53-14.75,11.32-22.11,3.7-7.19,7.44-14.37,11.18-21.54,4.29-8.23,8.61-16.44,12.88-24.69,4.11-7.96,8.14-15.96,12.25-23.92,2.55-4.94,5.15-9.84,7.79-14.72.26-.48.94-.97,1.42-.98,15.64-.04,31.28-.03,46.93-.01.12,0,.25.12.8.41-34.64,67.1-105.37,201.45-105.37,201.45l-40.08-68.45,16.55-34.3Z'/%3E%3Cpath class='cls-2' d='m190.54,100.96l16.13,19.89s4.57-8.64,6.75-12.86c3.79-7.36,7.53-14.75,11.32-22.11,3.7-7.19,7.44-14.37,11.18-21.54,4.29-8.23,8.61-16.44,12.88-24.69,4.11-7.96,8.14-15.96,12.25-23.92,2.55-4.94,5.15-9.84,7.79-14.72.26-.48.94-.97,1.42-.98,15.64-.04,31.28-.03,46.93-.01.12,0,.25.12.8.41-34.64,67.1-105.37,201.45-105.37,201.45l-40.08-68.45,18.03-32.48Z'/%3E%3Cpolygon class='cls-1' points='97.92 0 232.35 0 165.16 118.53 97.92 0'/%3E%3C/svg%3E");
  opacity: 1;
}

/**
  @description: old definition for only de-regulation (logo was only visible there)
 */
.preloadContainer.de .splash .logo
{

}

@media screen and (orientation: portrait)
{
  .preloadContainer .splash
  {
    width: 70vw;
    height: 70vw;
  }

  .preloadContainer .splash .indicator
  {
    font-size: 5vw;
    line-height: 5vw;
  }
}

@-webkit-keyframes blink
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 1;
  }
}

@keyframes blink
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 1;
  }
}

@-webkit-keyframes glow
{
  from
  {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  to
  {
    -webkit-box-shadow: 0 0 0.5vw 0.5vw #ffffff80;
    box-shadow: 0 0 0.5vw 0.5vw #ffffff80;
  }
}

@keyframes glow
{
  from
  {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  to
  {
    -webkit-box-shadow: 0 0 0.5vw 0.5vw #ffffff80;
    box-shadow: 0 0 0.5vw 0.5vw #ffffff80;
  }
}