#loadingContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: 0;
  /* background: radial-gradient(circle, #dff0ff 5%, #7b8faf 100%); */
  background: radial-gradient(circle, rgba(31, 61, 77,1) 0%, rgba(22, 35, 43,1) 100%);;
  z-index: 1000;
}

#loadingCenter {
  position: relative;
  top: 50%;
  left: 50%;
  width: min-content;
  fill: white;
}

.new-logo-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
}

.new-brand-cube-center {
  position: relative;
  top: 50%;
  left: 50%;
  width: min-content;
}

.new-brand-cube-s-mask {
  clip-path: polygon(85.6% 29.7%, 14.6% -11.2%, 14.5% 37.7%, 71.3% 70.4%, 71.2% 86.7%, 14.5% 54%, 14.4% 70.3%, 85.4% 111.2%, 85.5% 62.3%, 28.7% 29.6%, 28.8% 13.3%, 85.5% 46%, 85.6% 29.7%);
  position: absolute;
  width: 200px;
  height: 200px;
  top: -100px;
  left: -100px;
  animation: sExpansion 3s ease-in-out infinite;
}

@keyframes sExpansion {

  80%,
  20% {
    clip-path: polygon(85.6% 29.7%, 14.6% -11.2%, 14.5% 37.7%, 71.3% 70.4%, 71.2% 86.7%, 14.5% 54%, 14.4% 70.3%, 85.4% 111.2%, 85.5% 62.3%, 28.7% 29.6%, 28.8% 13.3%, 85.5% 46%, 85.6% 29.7%);
  }

  40%,
  60% {
    clip-path: polygon(92.7% 25.6%, 7.6% -23.4%, 7.5% 41.8%, 64.2% 74.5%, 64.2% 74.5%, 7.5% 41.8%, 7.3% 74.4%, 92.4% 123.4%, 92.6% 58.2%, 35.8% 25.5%, 35.8% 25.5%, 92.5% 58.2%, 92.7% 25.6%);
  }
}

#new-brand-rotatable {
  position: absolute;
  top: 25%;
  left: 25%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

#new-brand-cube {
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(45deg);
  transition: transform 0.5s;
  animation: cubeRotation 3s ease-in-out infinite;
}

@keyframes cubeRotation {
  from {
    transform: rotateX(-35deg) rotateY(45deg);
  }

  to {
    transform: rotateX(-35deg) rotateY(135deg);
  }
}

#new-brand-cube>div {
  animation: cubeBorders 3s ease-in-out infinite;
  border: solid 1px #041F2D00;
}

@keyframes cubeBorders {

  70%,
  30% {
    border: solid 0px #041F2D00;
  }

  45%,
  55% {
    border: solid 1px #041F2DFF;
  }
}

#new-brand-cube,
#new-brand-cube>div {
  width: 100px;
  height: 100px;
}

#new-brand-cube>div {
  position: absolute;
  background: #C0F3D1;
}

.new-brand-cube-front {
  transform: translateZ(50px);
}

.new-brand-cube-back {
  transform: rotateY(180deg) translateZ(50px);
}

.new-brand-cube-right {
  transform: rotateY(90deg) translateZ(50px);
}

.new-brand-cube-left {
  transform: rotateY(-90deg) translateZ(50px);
}

.new-brand-cube-top {
  transform: rotateX(90deg) translateZ(50px);
}

.new-brand-cube-bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

.loadingContainerExit {
  animation: 0.5s linear 0.0s 1 reverse forwards running fadeTransition
}

.loadingText {
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: calc(50% + 110px);
  color: rgb(92 132 165);
  font: bold 14px Arial;
  text-align: center;
  padding: 5px;
}

/* 
#loadingWait {
  opacity: 1;
  pointer-events: none;
  animation: 1s ease-in-out 24s 1 reverse both running fadeTransition
}

#loadingText {
  opacity: 0;
  animation: 1s ease-in-out 25s 1 both running fadeTransition;
  pointer-events: auto;
}

#loadingText>a {
  color: rgb(92 132 165);
}

#loadingText>a:hover {
  color: rgb(18, 36, 51);
}

#loadingWait>span {
  animation: loading 1.2s infinite 0s alternate
}

#loadingWait>span:nth-child(1) {
  animation-delay: 0.0s
}

#loadingWait>span:nth-child(2) {
  animation-delay: 0.2s
}

#loadingWait>span:nth-child(3) {
  animation-delay: 0.4s
}

@keyframes loading {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes fadeTransition {
  from {
    opacity: 0;
    pointer-events: none;
  }

  to {
    opacity: 1;
  }
}

#loadingScene {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -100px;
  left: -100px;
  perspective: 600px;
}

#turnable,
#turnable>div,
.loadCube {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

#turnable {
  animation: sceneCircle 10s cubic-bezier(0.85, 0, 0.15, 1) 0s infinite running;
}

.floor {
  animation: floorScroll 4s linear var(--delay) infinite normal both;
}

.floor>div>div {
  background-position-y: var(--facade);
  background-image: url("Images/facadesLinear.webp");
} */

/* @supports (-webkit-touch-callout: none) {

  .floor>div>div {
    background-position-y: 0px;
    background-image: none;
  }
} */

/* 
.loadCube {
  top: calc(var(--sZ)/-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, top 0.3s;
}

.loadCube>div {
  position: absolute;
  transition: all 0.3s;
  animation: floorFade 4s linear var(--delay) infinite normal both;
  background-blend-mode: overlay;
}

.loadCube>div:nth-child(1) {
  background-color: hsla(var(--hue), var(--sat), 70%, 1);
  transform: rotateY(0deg) translateZ(calc(var(--sY)/2));
  width: var(--sX);
  height: var(--sZ);
}

.loadCube>div:nth-child(2) {
  background-color: hsla(var(--hue), var(--sat), 45%, 1);
  transform: rotateY(180deg) translateZ(calc(var(--sY)/2));
  width: var(--sX);
  height: var(--sZ);
}

.loadCube>div:nth-child(3) {
  background-color: hsla(var(--hue), var(--sat), 55%, 1);
  transform: rotateY(90deg) translateZ(calc(var(--sX)/2));
  width: var(--sY);
  height: var(--sZ);
}

.loadCube>div:nth-child(4) {
  background-color: hsla(var(--hue), var(--sat), 55%, 1);
  transform: rotateY(-90deg) translateZ(calc(var(--sX)/2));
  width: var(--sY);
  height: var(--sZ);
}

.loadCube>div:nth-child(5) {
  background-color: hsla(var(--hue), var(--sat), 80%, 1);
  transform: rotateX(90deg) translateZ(calc(var(--sZ)/1.95));
  width: var(--sX);
  height: var(--sY);
}

.loadCube>div:nth-child(6) {
  background-color: hsla(var(--hue), var(--sat), 35%, 1);
  transform: rotateX(-90deg) translateZ(calc(var(--sZ)/1.95));
  width: var(--sX);
  height: var(--sY);
}

.loadCube>div:nth-child(5),
.loadCube>div:nth-child(6) {
  background-image: none;
}

@keyframes sceneCircle {
  0% {
    transform: rotateX(-25deg) rotateY(0deg);
  }

  25% {
    transform: rotateX(-15deg) rotateY(90deg);
  }

  50% {
    transform: rotateX(-25deg) rotateY(180deg);
  }

  75% {
    transform: rotateX(-35deg) rotateY(270deg);
  }

  100% {
    transform: rotateX(-25deg) rotateY(360deg);
  }
}

@keyframes floorScroll {
  0% {
    transform: translateY(-30px) scaleY(0)
  }

  10% {
    transform: translateY(-30px)
  }

  60% {
    transform: translateY(30px)
  }

  100% {
    transform: translateY(45px) scaleY(0)
  }
}

@keyframes floorFade {
  0% {
    opacity: 0
  }

  10% {
    opacity: 1
  }

  60% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

#planeDiv {
  animation: planeCircle 12s linear 0s infinite running !important;
  width: 100%;
  height: 100%;
}

#planeDiv>svg {
  position: absolute;
  width: 33px;
  height: 33px;
  left: -16.5px;
  fill: #477aad;
  animation: planeFlip 1.666s linear 0s infinite normal;
}

#planeDiv::before {
  position: absolute;
  width: 3px;
  height: 32px;
  left: -1px;
  content: '';
  background-color: #477aad;
  animation: planeFlipSide 1.666s linear 0s infinite normal;
}

@keyframes planeCircle {
  0% {
    transform: rotateX(20deg) rotateY(0deg)
  }

  50% {
    transform: rotateX(-20deg) rotateY(180deg)
  }

  100% {
    transform: rotateX(20deg) rotateY(360deg)
  }
}

@keyframes planeFlip {
  0% {
    transform: rotateX(-90deg) rotateY(240deg)
  }

  15% {
    transform: rotateX(-90deg) rotateY(150deg)
  }

  30% {
    transform: rotateX(-90deg) rotateY(60deg)
  }

  100% {
    transform: rotateX(-90deg) rotateY(60deg)
  }
}

@keyframes planeFlipSide {
  0% {
    transform: translateZ(5px) rotateZ(-150deg)
  }

  15% {
    transform: translateZ(5px) rotateZ(-60deg)
  }

  30% {
    transform: translateZ(5px) rotateZ(30deg)
  }

  100% {
    transform: translateZ(5px) rotateZ(30deg)
  }
}

#frustum {
  position: absolute;
  width: 0;
  height: 0;
  top: 14.75px;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  animation: planeFrustum 10s linear 0s infinite normal;
}

#frustum>div {
  position: absolute;
  width: 2px;
  height: 80px;
  left: 100%;
  transform-origin: 0 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 20px, #477aad 30px), linear-gradient(0deg, transparent, #477aad55);
  animation: frustumLine 2s linear 0s infinite normal;
}

#frustum>div:nth-child(1) {
  transform: rotateY(0deg) rotateX(25.5deg);
}

#frustum>div:nth-child(2) {
  transform: rotateY(0deg) rotateX(-25.5deg);
}

#frustum>div:nth-child(3) {
  transform: rotateY(90deg) rotateX(25.5deg);
}

#frustum>div:nth-child(4) {
  transform: rotateY(90deg) rotateX(-25.5deg);
}

@keyframes planeFrustum {
  from {
    transform: translateZ(5px) rotateZ(-45deg) rotateY(0deg);
  }

  to {
    transform: translateZ(5px) rotateZ(-45deg) rotateY(360deg);
  }
}

@keyframes frustumLine {
  from {
    background-position-y: 80px;
  }

  to {
    background-position-y: 0px;
  }
} */