html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;
  height: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  padding: 0;
  margin: 0;
  height: 100%;
}

.light-grey {
  background-color: #f0f0f0;
}

.bleu {
  background-color: #2d4a8a;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d4a8a), color-stop(0%, #1b3775));
  background-image: linear-gradient(#2d4a8a 0%, #1b3775 0%);
}

@-webkit-keyframes spin {
  0% {
    transform: translateZ(-150em) rotateX(45deg) rotateZ(-45deg);
  }
  100% {
    transform: translateZ(-150em) rotateX(45deg) rotateZ(-225deg);
  }
}
@keyframes spin {
  0% {
    transform: translateZ(-150em) rotateX(45deg) rotateZ(-45deg);
  }
  100% {
    transform: translateZ(-150em) rotateX(45deg) rotateZ(-225deg);
  }
}
@-webkit-keyframes specular {
  0% {
    background-color: #3a3a3a;
  }
  100% {
    background-color: #444;
  }
}
@keyframes specular {
  0% {
    background-color: #3a3a3a;
  }
  100% {
    background-color: #444;
  }
}
/* body {
    font-family: sans-serif;
    color: #666;
  }
  
  img {
    vertical-align: middle;
    border: 0.5em solid white;
    margin: 0.5em;
    box-shadow: 0.25em 0.5em 1.5em rgba(0, 0, 0, 0.125);
  } */

.content {
  opacity: 0;
}
.content.content--loaded {
  opacity: 1;
}
#assets.assets--loaded {
  display: none;
}
/* Roof */
.roof {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-animation: spin 2s linear forwards infinite;
  animation: spin 2s linear forwards infinite;
  transform-style: preserve-3d;
  transform: translateZ(-60em) rotateX(45deg) rotateZ(-45deg);
}
.roof .roof__side {
  position: absolute;
  width: 5em;
  height: 5em;
}
.roof .roof__side.roof__roof--left {
  transform: rotateY(-45deg) translateZ(2.5em);
  background-color: #21749e;
  -webkit-animation: specular 1s linear 0.15s infinite alternate-reverse;
  animation: 1s linear 0.15s infinite alternate-reverse;
}
.roof .roof__side.roof__roof--right {
  transform: rotateY(45deg) translateZ(2.5em);
  background-color: #21749e;
  -webkit-animation: specular 1s linear 0.15s infinite alternate-reverse;
  animation: 1s linear 0.15s infinite alternate-reverse;
}
/* Cube */
.cube {
  -webkit-animation: spin 2s linear forwards infinite;
  animation: spin 2s linear forwards infinite;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-150em) rotateX(45deg) rotateZ(-45deg);
}
.cube .cube__face {
  position: absolute;
  width: 5em;
  height: 5em;
}
.cube .cube__face.cube__face--front {
  transform: rotateY(0deg) translateZ(2.5em);
  background-color: #44467f;
}
.cube .cube__face.cube__face--back {
  transform: rotateY(180deg) translateZ(2.5em);
  background-color: #44467f;
}
.cube .cube__face.cube__face--right {
  transform: rotateY(90deg) translateZ(2.5em);
  background-color: #44467f;
  -webkit-animation: 1s linear 0.15s infinite alternate;
  animation: 1s linear 0.15s infinite alternate;
}
.cube .cube__face.cube__face--left {
  transform: rotateY(-90deg) translateZ(2.5em);
  background-color: #44467f;
  -webkit-animation: 1s linear 0.15s infinite alternate;
  animation: 1s linear 0.15s infinite alternate;
}
.cube .cube__face.cube__face--top {
  transform: rotateX(90deg) translateZ(2.5em);
  background-color: #44467f;
  animation: 1s linear 0.15s infinite alternate-reverse;
}
.cube .cube__face.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(2.5em);
  background-color: #44467f;
  animation: 1s linear 0.15s infinite alternate-reverse;
}
#assets {
  display: none;
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.loader {

  font-size: 1rem;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: progress;
  opacity: 1;
  transition: opacity 0.15s ease-in-out;

  display: none;
  opacity: 0;
  pointer-events: none;
}

.loader .loader_roof__animation {
  position: absolute;
  z-index: 3;
  margin-top: -3.25em;
  width: 5em;
  height: 5em;
  perspective: 100em;
}

.loader .loader__animation {
  width: 5em;
  height: 5em;
  perspective: 100em;
}
.loader .loader__message {
  font-size: 0.65em;
  font-weight: 300;
  color: #444;
  letter-spacing: 0.1em;
  margin-bottom: 1.5em;
  text-transform: uppercase;
}
.loader .loader__progress {
  position: relative;
  width: 8em;
  height: 0.5em;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  border-radius: 0.2em;
}
.loader .loader__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  /* background-color: #44467F; */
  background: rgb(33, 116, 158);
  background: linear-gradient(90deg, rgba(33, 116, 158, 1) 0%, rgba(68, 70, 127, 1) 100%);
  transition: width 0.5s ease;
}
.content--loaded ~ .loader {
  opacity: 0;
  pointer-events: none;
}