html {
  width: 100%;
  height: 100vh;
}

body {
  background: black;
}

html, body {
  margin: 0;
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Roboto";
  font-weight: 300;
  src: url("fonts/Roboto-Light.ttf");
}

@font-face {
  font-family: "Roboto";
  font-weight: bold;
  src: url("fonts/Roboto-Black.ttf");
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf");
}

@font-face {
  font-family: "Lato";
  font-weight: 300;
  src: url("fonts/Lato-Light.ttf");
}

@font-face {
  font-family: "Lato";
  font-weight: bold;
  src: url("fonts/Lato-Black.ttf");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 300;
  src: url("fonts/Lato-LightItalic.ttf");
}

#loading {
  /*margin-top: calc(50vh - 225px);*/
  margin-top: calc(50vh - 125px);
  width: 100%;

  color: white;
  text-align: center;

  /*font-style: italic;
  font-weight: 300;
  font-family: "Lato", "Noto Sans", Arial, serif;
  font-size: 96px;*/

  opacity: 1;
}

.fade {
  transition: opacity 250ms ease-in-out;
}

#loading.hidden, splash.hidden, login.hidden, users.hidden, desktops.hidden, body.hidden, app.hidden, #app-container.hidden {
  opacity: 0;
}

#logo {
  height: 250px;
}

/*#logo, #welcome {
  vertical-align: middle;
  display: inline-block;
}*/

app, users, desktops {
  display: none;
}