body {
    background-color: rgba(245,245,245,1.0);
    overflow:hidden;
    padding: 0;
    margin: 0;
    inset: 0px;
    
    -webkit-tap-highlight-color: transparent;
}

#splash_screen {
  margin: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(245,245,245,1.0);
  z-index: 10;
  animation-fill-mode: forwards;  
}

.splash_logo {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#logo_portrait {
    /* width: 30%; */
    width: 104px;
}

#logo_landscape {
    /* height: 12%; */
    height: 104px;
}

@media screen and (orientation:portrait) {
    #logo_portrait {
        display: block;
    }

    #logo_landscape {
        display: none;
    }
}

@media screen and (orientation:landscape) {
    #logo_portrait {
        display: none;
    }

    #logo_landscape {
        display: block;
    }
}

/* Loading --------------------------------------------*/

#loading {
  margin: 0;
    position: absolute;
    top: 74%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    animation-duration: 2s;
    animation-name: fadeIn;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#loading_text {
  text-align: center;
  color: rgba(48,54,51,1.0);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  margin-top: -24px;
  margin-left: 48px;
  margin-right: 48px;
  /* margin: -24px,32px,0,32px; */
  animation-duration: 2s;
  animation-name: moveIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes moveIn {
  0% {
    margin-top: 128px;
  }
  100% {
    margin-top: -24px;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* Spinner --------------------------------------------*/

#spinner {
  width: 160px;
  height: 160px;
}

#spinner svg {
  animation: rotate 1.5s linear infinite;
  height: 100%;
  width: 100%;
}
  
#spinner circle {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation: 
    dash 1.5s ease-in-out infinite 0s;
  /* stroke: rgba(122,199,79,1.0); */
  stroke-linecap: round;
  fill: none;
  stroke-width:3;
}
  
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}