@font-face {
  font-family: "Habitat";
  src: url('../assets/fonts/DINHabRg.ttf');
}
body {
  margin: 0;
  padding: 0;
  font-family: Habitat;
}
main {
  width: 1280px;
  max-width: 90%;
  margin: 50px 0;
}
main section {
  margin: 0;
  padding: 0;
}
header img,
footer img {
  display: block;
  margin: auto !important;
  max-width: 100%;
}
footer {
  background-color: #1D191A;
  min-height: 572px;
}
/* ===== */
#applicationContainer {
  max-height: 100vh;
  overflow: hidden;
  background: none;
  border-color: black;
  /* ===== LOADING OVERLAY ===== */
  /* ===== CONFIGURATOR ===== */
}
#applicationContainer #loadingOverlay {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  background-color: white;
  transition: opacity ease-in-out 0.5s;
}
#applicationContainer #loadingOverlay progress {
  width: 30%;
  height: 3px;
  margin: 0 auto 30px auto;
}
#applicationContainer #loadingOverlay progress.showPercentage:before {
  top: 5px;
}
#applicationContainer #loadingOverlay progress::-webkit-progress-bar {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #eeeeee;
}
#applicationContainer #loadingOverlay progress::-webkit-progress-value {
  background: #464646;
}
#applicationContainer #loadingOverlay progress::-moz-progress-bar {
  background: #464646;
}
#applicationContainer #loadingOverlay #orientationAlert {
  display: block;
  width: 90%;
  margin: 0 auto ;
  color: transparent ;
  transition: color ease-in-out 0.25s;
  text-align: center;
}
#applicationContainer.started.landscape #loadingOverlay {
  opacity: 0;
}
#applicationContainer.started.portrait #loadingOverlay #orientationAlert {
  color: black ;
}
#applicationContainer #visualiserOverlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
#applicationContainer #visualiserOverlay > * {
  pointer-events: auto;
}
#applicationContainer #visualiserOverlay .overlayButton {
  position: absolute;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  display: inline-block;
  box-sizing: border-box;
}
#applicationContainer #visualiserOverlay .overlayButton#fullscreen {
  left: 0;
  top: 0;
  background-image: url('../assets/images/fullscreen.png');
  background-position: top left;
  border-radius: 0 0 5px 0;
}
#applicationContainer #visualiserOverlay .overlayButton#fullscreen:hover {
  background-position: top right;
  background-color: #3b3234;
}
#applicationContainer #configurator {
  position: absolute;
  width: 100%;
  height: 64px;
  background-color: transparent;
  left: 0;
  bottom: 0;
}
#applicationContainer #configurator:hover ul li:last-child {
  animation-play-state: running;
}
#applicationContainer #configurator ul {
  list-style: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
}
#applicationContainer #configurator ul li {
  position: relative;
  bottom: -30px;
  margin: 0 2px 5px 2px;
  border: 2px solid transparent;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 2px;
  transition: bottom ease-in-out 0.2s;
}
#applicationContainer #configurator ul li:last-child {
  animation: hide 0.5s ease-in-out forwards;
  animation-play-state: paused;
}
#applicationContainer #configurator ul li:first-child,
#applicationContainer #configurator ul li:last-child {
  bottom: 0;
}
#applicationContainer #configurator ul li:hover {
  bottom: 0;
}
#applicationContainer #configurator ul li.selected,
#applicationContainer #configurator ul li:hover {
  border-color: #CECECE;
}
#applicationContainer #configurator ul li.selected:first-child,
#applicationContainer #configurator ul li:hover:first-child,
#applicationContainer #configurator ul li.selected:last-child,
#applicationContainer #configurator ul li:hover:last-child {
  border-color: transparent;
}
#applicationContainer #configurator ul li img {
  display: block;
  width: 50px;
  height: 50px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#applicationContainer.fullscreen {
  border: none;
}
#applicationContainer.fullscreen #visualiserOverlay .overlayButton#fullscreen {
  background-position: bottom left;
}
#applicationContainer.fullscreen #visualiserOverlay .overlayButton#fullscreen:hover {
  background-position: bottom right;
}
@keyframes hide {
  to {
    opacity: 0;
  }
}
@-moz-keyframes hide {
  to {
    opacity: 0;
  }
}
@-webkit-keyframes hide {
  to {
    opacity: 0;
  }
}