/* Icons */


.container { position: relative; overflow: hidden; width: 100vw; height: 100vh; perspective: 2000px; }
.scroller { height: 100%; transform-style: preserve-3d; }
.room { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; margin: -50vh 0 0 -50vw; pointer-events: none; opacity: 0; transform-style: preserve-3d; }
.room--current { pointer-events: auto; opacity: 1; }
.room__side { position: absolute; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; }
.room__side--left, .room__side--right { width: 4000px; /* depth */ height: 100vh; background: #fff; }
.room__side--back { width: 100vw; height: 100vh; background: #fff; box-shadow: 0 0 0 2px #fff; transform: translate3d(0, 0, -4000px) rotate3d(1, 0, 0, 0.1deg) rotate3d(1, 0, 0, 0deg);/* Rotation due to rendering bug in Chrome when loader slides up (images seem cut off) */
}
.room__side--right { right: 0; justify-content: flex-end; transform: rotate3d(0, 1, 0, -90.03deg); transform-origin: 100% 50%; }
.room__side--left { justify-content: flex-start; transform: rotate3d(0, 1, 0, 90deg); transform-origin: 0 50%; }
.room__side--bottom { width: 100vw; /* depth */ height: 4000px; background: #fafafa; transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -4000px, 0); transform-origin: 50% 0%; }
.room__side--bottom { top: 100%; }
/* Inner elements */
.room__img { flex: none; max-width: 40%; max-height: 60%; margin: 0 5%; transform: translate3d(0, 0, 10px); backface-visibility: hidden; opacity: .5;}