/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

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

body {
	font-family: 'Tahoma', 'Verdana';
	color: #fff;
	background: #dddddd;
	height: 100vh;
	overflow: hidden;
	font-size: 16px;
}

a {
	text-decoration: none;
    color: #E30613;
    font-weight: bold;
	outline: none;
}

a:hover,
a:focus {
	color: #E30613;
	text-decoration: underline;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

.btn {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.btn:focus {
	outline: none;
}

.btn:hover {
	color: #c2292e;
}

.btn--nav {
	font-size: 2em;
	pointer-events: auto;
}

.nav-icon--right {
	-webkit-transform: scale3d(-1,-1,1);
	        transform: scale3d(-1,-1,1);
}

.nav__triangle,
.nav__line {
	-webkit-transition: -webkit-transform 0.3s;
	transition: -webkit-transform 0.3s;
	-o-transition: transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	fill: currentColor;
}

.btn--nav:hover .nav__triangle {
	-webkit-transform: translate3d(-54px,0,0);
	        transform: translate3d(-54px,0,0);
}

.btn--nav:hover .nav__line {
	-webkit-transform: translate3d(17px,0,0);
	        transform: translate3d(17px,0,0);
}

.btn--info {
	margin: 0 2em 0 auto;
}

.btn--toggle.btn--active {
	z-index: 100;
	color: #fff;
}

.btn--toggle.btn--active:hover {
	color: #1f1f21;
}

.btn--toggle .icon:nth-child(2),
.btn--toggle.btn--active .icon:first-child {
	display: none;
}

.btn--toggle.btn--active .icon:nth-child(2) {
	display: block;
}

/* two seats on each side for free space */

.container {
	position: relative;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	-webkit-perspective: 6000px;
	        perspective: 6000px;
	background-image: url("img/per/zbynek-burival-8iZG31eXkks-unsplash.jpg");
}

.scroller {
	height: 100%;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;

	visibility: hidden;
}

.room {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100vh;
	margin: -50vh 0 0 -50vw;
	pointer-events: none;
	opacity: 0;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
}

.room--current {
	pointer-events: auto;
	opacity: 1;
	visibility: hidden;
}

.room__side {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
}

.room__side--left,
.room__side--right {
	width: 3000px; /* depth */
	height: 100vh;
	background: #dbdbdb;
}

.room__side--back {
	-webkit-box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	        box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	width: 100vw;
	height: 100vh;
	/* box-shadow: 0 0 0 2px #e9e9e9; */
	-webkit-transform: translate3d(0, 0, -2750px) rotate3d(1,0,0,0.1deg) rotate3d(1,0,0,0deg);
	        transform: translate3d(0, 0, -2750px) 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) */
	visibility: visible;
}

.room__side--right {
	-webkit-box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	        box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	right: 0;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-transform: rotate3d(0, 1, 0, -90deg) translate3d(250px, 0, 0);
	        transform: rotate3d(0, 1, 0, -90deg) translate3d(250px, 0, 0);
	-webkit-transform-origin: 100% 50%;
	    -ms-transform-origin: 100% 50%;
	        transform-origin: 100% 50%;
	visibility: visible;
}

.room__side--left {
	-webkit-box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	        box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(-250px, 0, 0);
	        transform: rotate3d(0, 1, 0, 90deg) translate3d(-250px, 0, 0);
	-webkit-transform-origin: 0 50%;
	    -ms-transform-origin: 0 50%;
	        transform-origin: 0 50%;
	visibility: visible;
}

.room__side--bottom {
	-webkit-box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	        box-shadow: inset 0 0 200px 0 rgba(0, 0, 0, 0.4);
	width: 100vw; /* depth */
	height: 3000px;
	background: #d0d0d0;
	-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -2750px, 0);
	        transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -2750px, 0);
	-webkit-transform-origin: 50% 0%;
	    -ms-transform-origin: 50% 0%;
	        transform-origin: 50% 0%;
	visibility: visible;
}

.room__side--bottom {
	top: 100%;
}

/* Inner elements */

.show-more-info {
	margin: auto 2%;
	-webkit-transform: translate3d(0,0,10px);
	        transform: translate3d(0,0,10px);
	width: 100%;
	max-width: 28%;
}

.show-more-info img {
	display: block;
}

.show-more-info img.room__img {
	-webkit-box-shadow: 0px 0px 6px 1px #636363;
	box-shadow: 0px 0px 6px 1px #636363;
}

.show-more-info:hover img.room__img {
	-webkit-box-shadow: 0px 0px 10px 1px #595959;
	box-shadow: 0px 0px 10px 1px #595959;
}

.show-more-info span {
	display: block;
	width: 100%;
	margin-top: 9px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.show-more-info.front-img {
	max-width: 30%;
}

.comming-soon {
	color: #ccc;
	max-height: 60vh;
	max-width: 100%;
	margin: auto;
	display: block;
	font-size: 1.3vw;
	width: 100%;
	text-align: center;
	padding: 1vw;
	position: absolute;
	top: calc(50% - 1.3vw);
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.return-to-gallery-extra,
.return-to-gallery {
	padding: 10px 20px 11px 20px;
	border: 2px solid white;
	border-radius: 5px;
}


.return-to-gallery:hover {
	border: 2px solid #fff;
	background: #fff;
}

.return-to-gallery-btn {
	margin-top: 60px;
}

.return-to-gallery-btn a {
	color: #fff;
}

.return-to-gallery-btn a:hover {
	color: #ff0000;
	text-decoration: none;
}

.room__side--left {
		padding-left: 10vw;
}

.room__side--right {
	padding-right: 10vw;
}

.comming-soon:hover {
	font-size: 1.34vw;
	color: #bbb;
}

.room__side--left .comming-soon {
	font-size: 2vw;
}

.room__side--left .comming-soon:hover {
	font-size: 2.1vw;
}

.room__side--right .comming-soon {
	font-size: 2vw;
}

.room__side--right .comming-soon:hover {
	font-size: 2.1vw;
}

.comming-soon {font-weight: bold}
.comming-soon:hover {font-size: 1.35vw}

.placeholder {
	cursor: default;
}

.placeholder_img {

}

.bottom-container {
	position: absolute;
  bottom: 0;
	right: 0;
  padding: 20px;
  text-align: right;
	width: auto;
	visibility: hidden;
}

.bottom-container a {
	visibility: visible;
}

.bottom-container img {
	display: inline-block;
	max-width: 47vh;
}


.return-to-gallery-extra {
	border: none;
    color: #FFF;
}

.return-to-gallery-extra:hover {
	background-color: #E30613;
	text-decoration: none;
	color: #FFF;
}

.top-container {
	z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    padding: 21px;
    text-align: right;
    width: auto;
    visibility: hidden;
    padding-left: 12px;
}

.top-container a {
	visibility: visible;
}


@media only screen
and (min-width: 1px)
and (max-width: 900px) {
	.bottom-container img {
		max-width: 36vh;
	}

	.top-container {
		display: none;
	}
}

/* Content */
.content {
	position: absolute;
	top: 0;
	left: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	width: 100%;
	height: 100vh;
	padding: 2vw;
}

/* Header */
.codrops-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.codrops-header__title {
	font-size: 1.165em;
	font-weight: normal;
	margin: 0.5em 0 0 0;
}

/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 2.75em;
	margin: 0 2em 0 0;
	text-align: center;
	white-space: nowrap;
	border: 2px solid;
	background: #fff;
}

.codrops-links::after {
	content: '';
	position: absolute;
	top: -5%;
	left: calc(50% - 1px);
	width: 2px;
	height: 110%;
	background: currentColor;
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	        transform: rotate3d(0,0,1,22.5deg);
}

.codrops-icon {
	display: inline-block;
	padding: 0 0.65em;
}

.subject {
	font-size: 1.5em;
	margin: 0 auto;
	color: #c2292e;
}

/* Location */
.location {
	font-size: 1.165em;
	font-weight: normal;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	margin: 0 1.5em;
	padding: 6em 0;
	text-align: center;
	pointer-events: none;
	color: #c2292e;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
}

/* Slides */
.slides {
	position: relative;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.slide {
	position: absolute;
	left: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 70vw;
	height: 100%;
	margin: 7vh 0 0 10vw;
	pointer-events: none;
	opacity: 0;
}

.slide--current {
	pointer-events: auto;
	opacity: 1;
}

.slide__name {
	font-size: 15vw;
	line-height: 0.8;
	margin: 0;
	padding: 0 0 0 5vw;
	text-indent: -5vw;
	letter-spacing: -0.05em;
	text-transform: lowercase;
	color: #fff;
}

.slide__title,
.slide__date {
	text-align: right;
}

.slide__title {
	font-size: 3vw;
	font-weight: normal;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	margin: 0.75em 0 0 0;
	color: #fff;
}

.slide__date {
	font-size: 1.5vw;
	font-weight: bold;
	margin: 1.15em 0 0 0;
	text-transform: uppercase;
	color: #c2292e;
}

.slide__number {
	font-size: 0.4em;
	display: inline-block;
	margin: 0.5em 0 0 0;
	padding: 0.4em 0.5em 0.25em 0.5em;
	color: #fff;
	background: #c2292e;
}

/* Nav */
.nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	width: 100%;
	margin: auto 0 0 0;
	pointer-events: none;
}

/* Overlay with menu */
.overlay {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}

.overlay--loader {
	z-index: 1000;
	background: #fff;
}

.overlay--info {
	background: rgba(23,94,236,0.4);
}

.overlay--menu {
	background: rgba(255,25,25,0.66);
}

.js .overlay--active {
	pointer-events: auto;
	opacity: 1;
}

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__item {
	font-size: 7vh;
	margin: 0.25em 0;
	padding: 0;
	text-transform: lowercase;
}

.menu__item--current {
	font-weight: bold;
}

.menu__link {
	color: #fff;
}

.menu__link:focus,
.menu__link:hover {
	color: #1f1f21;
}

.info {
	color: white;
	font-size: 1.5em;
	line-height: 1.4;
	width: 60vw;
	min-width: calc(320px - 2em);
	max-width: 900px;
	margin: 0;
	padding: 1em;
}

.loader {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.loader div {
	width: 30px;
	height: 30px;
	margin: -30px 0.2em 0;
	border: 4px solid;
	background: #e9e9e9;
	-webkit-animation: anim-loader 0.8s alternate infinite forwards;
	        animation: anim-loader 0.8s alternate infinite forwards;
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loader div:nth-child(2) {
	background: #1db37b;
	-webkit-animation-delay: 0.15s;
	        animation-delay: 0.15s;
}

.loader div:nth-child(3) {
	-webkit-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}

@-webkit-keyframes anim-loader {
	100% {
		-webkit-transform: translate3d(0,30px,0) scale3d(0.9,0.9,1);
		        transform: translate3d(0,30px,0) scale3d(0.9,0.9,1);
	}
}

@keyframes anim-loader {
	100% {
		-webkit-transform: translate3d(0,30px,0) scale3d(0.9,0.9,1);
		        transform: translate3d(0,30px,0) scale3d(0.9,0.9,1);
	}
}

@media screen and (max-width: 50em) {
	.subject {
		display: none;
	}
	.codrops-links {
		margin: 0 0.5em 0 0;
	}
	.btn--info {
		margin-right: 1.25em;
	}
	.location {
		font-size: 0.85em;
		position: relative;
		height: auto;
		margin: 1em 0 0 0;
		padding: 0;
		text-align: left;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		    writing-mode: horizontal-tb;
	}
	.slide {
		width: 100%;
		margin: 7vh 0 0 0;
	}
	.slide__name {
		padding: 0 0 0 12vw;
	}
	.slide__title {
		font-size: 1.5em;
	}
	.slide__date {
		font-size: 0.65em;
	}
	.nav {
		position: absolute;
		top: 7em;
		left: 0;
		width: 100%;
		padding: 1em;
	}
	.nav__triangle {
		-webkit-transform: translate3d(-54px,0,0);
		        transform: translate3d(-54px,0,0);
	}
	.nav__line {
		-webkit-transform: translate3d(17px,0,0);
		        transform: translate3d(17px,0,0);
	}
	.btn--nav:hover {
		color: currentColor;
	}
	.info {
		font-size: 0.95em;
		width: 100vw;
	}
}

#canvas-info-wrapper {
	position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9;
  top: 0px;
	background-color: #bbb;
  -webkit-box-shadow: inset 0 0 200px 0 rgb(0 0 0 / 40%);
          box-shadow: inset 0 0 200px 0 rgb(0 0 0 / 40%);
	background-size: cover;
	display: none;
}

#canvas-info-wrapper.is-open {
	display: block;
}

#canvas-info-box {
	width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.close-info-window {
  position: relative;
  right: -18px;
  top: 2px;
  overflow: hidden;
  display: inline-block;
  background: url(../img/new/close.png) no-repeat left top transparent;
  background-size: 18px 18px;
  width: 18px;
  height: 18px;
}

#canvas-info-box .text {
  float: left;
  width: 344px;

}

#canvas-info-box .image {
	float: right;
  width: 300px;
  text-align: right;
}

#canvas-info-box .image img{
  height: auto;
  max-height: 100%;
  width: auto;
  display: inline-block;
	max-width:100%;
	-webkit-box-shadow: 0px 0px 6px 1px #636363;
  box-shadow: 0px 0px 6px 1px #636363;
	margin-top: auto;
}

.cube {
	width: 200px;
	height: 200px;
	position: relative;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-transform: translateZ(-100px);
	        transform: translateZ(-100px);
	-webkit-transition: -webkit-transform 1s;
	transition: -webkit-transform 1s;
	-o-transition: transform 1s;
	transition: transform 1s;
	transition: transform 1s, -webkit-transform 1s;

  }

  .scene {
		position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
		-webkit-transform: translate3d(0px, 0, -1200px) rotate3d(1,0,0,0.1deg) rotate3d(1,0,0,0deg);
		        transform: translate3d(0px, 0, -1200px) rotate3d(1,0,0,0.1deg) rotate3d(1,0,0,0deg)
  }

  .cube.show-front  { -webkit-transform: translateZ(-100px) rotateY(   0deg); transform: translateZ(-100px) rotateY(   0deg); }
  .cube.show-right  { -webkit-transform: translateZ(-100px) rotateY( -90deg); transform: translateZ(-100px) rotateY( -90deg); }
  .cube.show-back   { -webkit-transform: translateZ(-100px) rotateY(-180deg); transform: translateZ(-100px) rotateY(-180deg); }
  .cube.show-left   { -webkit-transform: translateZ(-100px) rotateY(  90deg); transform: translateZ(-100px) rotateY(  90deg); }
  .cube.show-top    { -webkit-transform: translateZ(-100px) rotateX( -90deg); transform: translateZ(-100px) rotateX( -90deg); }
  .cube.show-bottom { -webkit-transform: translateZ(-100px) rotateX(  90deg); transform: translateZ(-100px) rotateX(  90deg); }

  .cube__face {
		position: absolute;
		width: 200px;
		height: 200px;
		border: 2px solid black;
		line-height: 200px;
		font-size: 40px;
		font-weight: bold;
		color: white;
		text-align: center;
  }

  .cube__face--front  { background: hsla(  0, 100%, 50%, 0.7); }
  .cube__face--right  { background: hsla( 60, 100%, 50%, 0.7); }
  .cube__face--back   { background: hsla(120, 100%, 50%, 0.7); }
  .cube__face--left   { background: hsla(180, 100%, 50%, 0.7); }
  .cube__face--top    { background: hsla(240, 100%, 50%, 0.7); }
  .cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

  .cube__face--front  { -webkit-transform: rotateY(  0deg) translateZ(100px); transform: rotateY(  0deg) translateZ(100px); }
  .cube__face--right  { -webkit-transform: rotateY( 90deg) translateZ(100px); transform: rotateY( 90deg) translateZ(100px); }
  .cube__face--back   { -webkit-transform: rotateY(180deg) translateZ(100px); transform: rotateY(180deg) translateZ(100px); }
  .cube__face--left   { -webkit-transform: rotateY(-90deg) translateZ(100px); transform: rotateY(-90deg) translateZ(100px); }
  .cube__face--top    { -webkit-transform: rotateX( 90deg) translateZ(100px); transform: rotateX( 90deg) translateZ(100px); }
  .cube__face--bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); }

  label { margin-right: 10px; }

  .room-title {
	  position: absolute;
	  left: 0px;
	  top: 51px;
	  width:100%;
	  text-align: center;
  }

  .room-title img {
	  display: inline-block;
  }

  .room_boxes {
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

	.room_boxes .box.box1 {
		-webkit-transform: rotateX(
		303deg
		) translateZ(100px);
		        transform: rotateX(
		303deg
		) translateZ(100px);
	}

	.room_boxes .box.box2 {
		-webkit-transform: rotateX(
		303deg
		) translateZ(120px);
		        transform: rotateX(
		303deg
		) translateZ(120px);
	}

	.room_boxes .box.box3 {
		-webkit-transform: rotateX(
		307deg
		) translateZ(120px);
		        transform: rotateX(
		307deg
		) translateZ(120px);
	}

	.room_boxes .box.box4 {
		-webkit-transform: rotateX(
		285deg
		) translateZ(400px);
		        transform: rotateX(
		285deg
		) translateZ(400px);
		width: 400px;
		height: 400px;
		overflow: hidden;
	}

/* Per CSS */

.box1, .box2, .box3, .box4 {
}

.box.box5 {
	-webkit-transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	        transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	display: none;
}
.box.box6 {
	-webkit-transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	        transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	display: none;
}
.box.box7 {
	-webkit-transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	        transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	display: none;
}
.box.box8 {
	-webkit-transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	        transform: rotateX(267deg) translateZ(500px) translatey(-140px);
	display: none;
}

.room__side__img {
	width: 100%;
	height: 60vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
}

.room__side--back {
	padding: 0 2%;
	background: #bbb;
}

.room__side--left {}

.room__side--bottom {
	background: #eee;
}

.room__img {
	width: auto;
	max-height: 60vh;
	max-width: 100%;
	margin: auto;
}

.room-title img {
	margin: 10vh auto auto auto;
	height: 10vh;
	max-width: 80vw;
}

.room-title {
	top: 0;
}

.img__title {
	height: 2vw;
	margin: auto;
	display: inline-block !important;
	vertical-align: top;
}

#canvas-info-box .text {
	width: 30vw;
	padding: 0vw 3vw 2vw 5vw;
}

#canvas-info-box .image {
		width: 70vw;
		height: 90vh;
		text-align: left;
		padding-right: 5vw;
		padding-top: 5vh;
		padding-bottom: 10vh;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}

#canvas-info-box .image img {

}

h2 {
	font-size: 2.3em;
}

p {
	font-size: 1.2em;
	line-height: 1.5em;
}

.close-info-window {
    position: absolute;
    right: 30px;
    top: 30px;
    overflow: hidden;
    display: inline-block;
    background: url(../img/per/close_btn.svg) no-repeat left top transparent;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.img__title__lightbox {
	bottom: 0;
	left: 0;
	position: absolute;
	height: 4vh !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	padding-left: 30vw;
	margin-bottom: 9vh;
}

.path .img__title__lightbox {
	height: 2.5em !important;
	margin-bottom: calc(13vh - 2.5em)
}

.adv .img__title__lightbox {
	height: 2.7em !important;
	margin-bottom: calc(13vh - 2.7em)
}

.electricity_gets_you_here .img__title__lightbox {
	height: 1.7em !important;
	margin-bottom: calc(13vh - 1.7em)
}

.silence .img__title__lightbox {
	height: 1.4em !important;
	margin-bottom: calc(13vh - 1.4em)
}

#img-title-1 {
	height: 1.05vw;
}

#img-title-2 {
	height: 2vw;
}

#img-title-3 {
	height: 3.3vh;
}

#img-title-4 {
	height: 1.1vw;
}

#img-title-5 {
	height: 1.1vw;
}

#img-title-6 {
	height: 1.1vw;
}

#img-title-7 {
	height: 1.1vw;
}

#img-title-8 {
	height: 2.4vw;
}

#img-title-9 {
	height: 1.1vw;
}

.relative.door-whole {
	background-image: url("../img/per/bilderna/kc_silent_library_full_RGB_web.jpg");
	background-position: center;
	background-size: cover;
	float: left;
	transform-style: preserve-3d;
}

.door {
	width: 80vh;
	margin-left: -40vh;
	max-height: 80vh;
	height: 80vh;
	-webkit-transform: rotate3d(0, 1, 0, -1deg) rotateY(0deg) translate3d(0vh, 0vw, 0vw) !important;
	        transform: rotate3d(0, 1, 0, -1deg) rotateY(0deg) translate3d(0vh, 0vw, 0vw) !important;
	background: #888;
	background-image: url("../img/door.png");
	background-size: contain;
	background-position: right;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	position: absolute;
	display: unset;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	-webkit-transition-timing-function: ease-in-out;
	     -o-transition-timing-function: ease-in-out;
	        transition-timing-function: ease-in-out;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-box-shadow: 20vh -8vh 17vh -6vh #666 inset;
	        box-shadow: 20vh -8vh 17vh -6vh #666 inset;
}

.door-txt {
	float: left;
	position: relative;
	font-size: 2vw;
	padding-left: 3vw;
	opacity: 0;
	left: 39vh;
	padding-top: 10vh;
	-webkit-transition: .8s;
	-o-transition: .8s;
	transition: .8s;
	-webkit-transition-timing-function: ease-in;
	     -o-transition-timing-function: ease-in;
	        transition-timing-function: ease-in;
	font-weight: bold;
}

.door-whole:hover > .door {
	-webkit-transform: rotate3d(0, 1, 0, -17deg) rotateY(0deg) translate3d(0vh, 0vw, 0vw) !important;
	        transform: rotate3d(0, 1, 0, -17deg) rotateY(0deg) translate3d(0vh, 0vw, 0vw) !important;
}

.door-whole:hover > .door-edge {
	-webkit-transform: rotate3d(0, 1, 0, -17deg) rotateY(90deg) translate3d(0.5vh, 0vw, 0vw) !important;
	        transform: rotate3d(0, 1, 0, -17deg) rotateY(90deg) translate3d(0.5vh, 0vw, 0vw) !important;
}

.door-whole:hover > .door-txt {
	opacity: 1;
}

.door-edge {
	width: 2vh;
	margin-left: 79vh;
	max-height: 80vh;
	height: 80vh;
	-webkit-transform: rotate3d(0, 1, 0, 1deg) rotateY(90deg) translate3d(0.9vh, 0vw, 0vw) !important;
	        transform: rotate3d(0, 1, 0, 1deg) rotateY(90deg) translate3d(0.9vh, 0vw, 0vw) !important;
	background: #666;
	position: absolute;
	display: unset;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	background-image: url(../img/door-edge.jpg);
	background-size: cover;
}

.door_bg {
	width: 50vh;
	max-height: 77vh;
	height: 80vh;
	margin-top: -77vh;
	-webkit-box-shadow: 0 0 0 10px #000 inset;
	        box-shadow: 0 0 0 10px #000 inset;
}

.door_rotate {
	width: 33%;
	transform-style: preserve-3d;
	transform: translate3d(0, 0, 0.1px);
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
	width: 40vh;
	height: 80vh;
	margin-top: 23vh;
	background: #222;
}

.perbox1 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(50vw, 79.5vw, 10.5vw);
	        transform: translate3d(50vw, 79.5vw, 10.5vw);
}
.perbox2 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(60.5vw, 79.5vw, 10.5vw);
	        transform: translate3d(60.5vw, 79.5vw, 10.5vw);
}
.perbox3 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(60.5vw, 79.5vw, 0vw);
	        transform: translate3d(60.5vw, 79.5vw, 0vw);
}
.perbox4 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(50vw, 79.5vw, 0vw);
	        transform: translate3d(50vw, 79.5vw, 0vw);
}
.perbox5 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(50vw, 90vw, 10.5vw);
	        transform: translate3d(50vw, 90vw, 10.5vw);
}
.perbox6 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(60.5vw, 90vw, 10.5vw);
	        transform: translate3d(60.5vw, 90vw, 10.5vw);
}
.perbox7 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(60.5vw, 90vw, 0vw);
	        transform: translate3d(60.5vw, 90vw, 0vw);
}
.perbox8 {
	width: 100%;
  height: 100%;
  position: absolute;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: translate3d(50vw, 90vw, 0vw);
	        transform: translate3d(50vw, 90vw, 0vw);
}


#perbox2-1 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(0vw, 0vw, 0vw);
	        transform: scale3d(.5, .5, .5) translate3d(0vw, 0vw, 0vw);
}
#perbox2-2 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(0vw, 0vw, 10.7vw);
	        transform: scale3d(.5, .5, .5) translate3d(0vw, 0vw, 10.7vw);
}
#perbox2-3 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(0vw, 10.7vw, 0vw);
	        transform: scale3d(.5, .5, .5) translate3d(0vw, 10.7vw, 0vw);
}
#perbox2-4 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(0vw, 10.7vw, 10.7vw);
	        transform: scale3d(.5, .5, .5) translate3d(0vw, 10.7vw, 10.7vw);
}
#perbox2-5 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(10.7vw, 0vw, 0vw);
	        transform: scale3d(.5, .5, .5) translate3d(10.7vw, 0vw, 0vw);
}
#perbox2-6 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(10.7vw, 0vw, 10.7vw);
	        transform: scale3d(.5, .5, .5) translate3d(10.7vw, 0vw, 10.7vw);
}
#perbox2-7 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(10.7vw, 10.7vw, 0vw);
	        transform: scale3d(.5, .5, .5) translate3d(10.7vw, 10.7vw, 0vw);
}
#perbox2-8 {
	-webkit-transform: scale3d(.5, .5, .5) translate3d(10.7vw, 10.7vw, 10.7vw);
	        transform: scale3d(.5, .5, .5) translate3d(10.7vw, 10.7vw, 10.7vw);
}

.box-side1 {
	width: 10vw;
	height: 10vw;
	background: #21b076;
	-webkit-box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	        box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(-5vw, 15vw, 0);
	        transform: rotate3d(0, 1, 0, 90deg) translate3d(-5vw, 15vw, 0);
}
.box-side2 {
	width: 10vw;
	height: 10vw;
	background: #21b076;
	-webkit-box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	        box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	-webkit-transform: rotateX(90deg) translate3d(-5vw, 5vw, 0);
	        transform: rotateX(90deg) translate3d(-5vw, 5vw, 0);
}
.box-side3 {
	width: 10vw;
	height: 10vw;
	background: #21b076;
	-webkit-box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	        box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	-webkit-transform: rotateX(90deg) translate3d(-5vw, 5vw, 0);
	        transform: rotateX(90deg) translate3d(-5vw, 5vw, 0);
}
.box-side4 {
	width: 10vw;
	height: 10vw;
	background: #21b076;
	-webkit-box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	        box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	-webkit-transform: rotateY(90deg) translate3d(-5vw, -15vw, -10vw);
	        transform: rotateY(90deg) translate3d(-5vw, -15vw, -10vw);
}
.box-side5 {
	width: 10vw;
	height: 10vw;
	background: #21b076;
	-webkit-box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	        box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	-webkit-transform: rotateY(0deg) translate3d(-5vw, -25vw, 10vw);
	        transform: rotateY(0deg) translate3d(-5vw, -25vw, 10vw);
}
.shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	        box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,0.08);
	top: 0;
	left: 0;
}
.box-side3 img {
	-webkit-transform: rotate(180deg) scaleX(-1);
	    -ms-transform: rotate(180deg) scaleX(-1);
	        transform: rotate(180deg) scaleX(-1);
}
.box-side4 img {
	-webkit-transform: rotate(270deg) scaleX(-1);
	    -ms-transform: rotate(270deg) scaleX(-1);
	        transform: rotate(270deg) scaleX(-1);
}

@media (orientation: portrait) {
	.room {

	}
}

body.is-touch .overlay,
body.is-touch .bottom-container,
body.is-touch .container {
	display: none !important;
}

body.is-not-touch .stage {
	display: none;
}

#canvas-info-box .img__title__lightbox {
	max-width: 70vw !important;
}

.storbox-1,
.storbox-2,
.storbox-3,
.storbox-4 {
	position: relative;
}

.storbox-1 {
	left: -30vw;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
  -webkit-transform: rotateZ(-20deg) scale3d(.7, .7, .7) translate3d(1vw, 15vw, 0vw);
          transform: rotateZ(-20deg) scale3d(.7, .7, .7) translate3d(1vw, 15vw, 0vw);
}

.storbox-2 {
	left: -18vw;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
  -webkit-transform: rotateZ(-20deg) scale3d(.8,.8,.8) translate3d(1vw, 11vw, 0vw);
          transform: rotateZ(-20deg) scale3d(.8,.8,.8) translate3d(1vw, 11vw, 0vw);
}

.storbox-3 {
	left: -4vw;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
  -webkit-transform: rotateZ(-20deg) scale3d(.9,.9,.9) translate3d(1vw, 7vw, 0vw);
          transform: rotateZ(-20deg) scale3d(.9,.9,.9) translate3d(1vw, 7vw, 0vw);
}

.storbox-4 {
	left: 12vw;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
  -webkit-transform: rotateZ(-20deg) translate3d(1vw, 4vw, 0vw);
          transform: rotateZ(-20deg) translate3d(1vw, 4vw, 0vw);
}

.sharpie {
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: rotateX(-90deg) translate3d(-33vw, -27vw, -79vw) scale3d(0.4, 0.4, 0.4);
	        transform: rotateX(-90deg) translate3d(-33vw, -27vw, -79vw) scale3d(0.4, 0.4, 0.4);
}

/* Colors

Conventional Diesel:
  normal #414141
  dark #333333

Optimized Diesel:
  normal #216951
  dark #1d5b45

Hybrid Drive:
  normal #189966
  dark #178c59

Pure Electric:
  normal #21b076
  dark #1fa36a

*/

/* Colors cubes */

/* storbox-1 colors */

/* left */

.storbox-1 .perbox1 .box-side4,
.storbox-1 .perbox2 .box-side4,
.storbox-1 .perbox3 .box-side4,
.storbox-1 .perbox4 .box-side4,
.storbox-1 .perbox5 .box-side4,
.storbox-1 .perbox6 .box-side4,
.storbox-1 .perbox7 .box-side4,
.storbox-1 .perbox8 .box-side4 {
	background: #414141;
}

/* front */

.storbox-1 .perbox1 .box-side3,
.storbox-1 .perbox2 .box-side3,
.storbox-1 .perbox3 .box-side3,
.storbox-1 .perbox4 .box-side3,
.storbox-1 .perbox5 .box-side3,
.storbox-1 .perbox6 .box-side3,
.storbox-1 .perbox7 .box-side3,
.storbox-1 .perbox8 .box-side3  {
	background: #333333;
}

/* top */

.storbox-1 .perbox1 .box-side5,
.storbox-1 .perbox2 .box-side5,
.storbox-1 .perbox3 .box-side5,
.storbox-1 .perbox4 .box-side5,
.storbox-1 .perbox5 .box-side5,
.storbox-1 .perbox6 .box-side5,
.storbox-1 .perbox7 .box-side5,
.storbox-1 .perbox8 .box-side5 {
	background: #414141;
}

/* right */

.storbox-1 .perbox1 .box-side1,
.storbox-1 .perbox2 .box-side1,
.storbox-1 .perbox3 .box-side1,
.storbox-1 .perbox4 .box-side1,
.storbox-1 .perbox5 .box-side1,
.storbox-1 .perbox6 .box-side1,
.storbox-1 .perbox7 .box-side1,
.storbox-1 .perbox8 .box-side1 {
	background: #333333;
}

/* back */

.storbox-1 .perbox1 .box-side2,
.storbox-1 .perbox2 .box-side2,
.storbox-1 .perbox3 .box-side2,
.storbox-1 .perbox4 .box-side2,
.storbox-1 .perbox5 .box-side2,
.storbox-1 .perbox6 .box-side2,
.storbox-1 .perbox7 .box-side2,
.storbox-1 .perbox8 .box-side2 {
	background: #333333;
}

/* storbox-2 colors */

/* left */

.storbox-2 .perbox1 .box-side4,
.storbox-2 .perbox2 .box-side4,
.storbox-2 .perbox3 .box-side4,
.storbox-2 .perbox4 .box-side4,
.storbox-2 .perbox5 .box-side4,
.storbox-2 .perbox6 .box-side4,
.storbox-2 .perbox7 .box-side4,
.storbox-2 .perbox8 .box-side4 {
	background: #216951;
}

/* front */

.storbox-2 .perbox1 .box-side3,
.storbox-2 .perbox2 .box-side3,
.storbox-2 .perbox3 .box-side3,
.storbox-2 .perbox4 .box-side3,
.storbox-2 .perbox5 .box-side3,
.storbox-2 .perbox6 .box-side3,
.storbox-2 .perbox7 .box-side3,
.storbox-2 .perbox8 .box-side3  {
	background: #1d5b45;
}

/* top */

.storbox-2 .perbox1 .box-side5,
.storbox-2 .perbox2 .box-side5,
.storbox-2 .perbox3 .box-side5,
.storbox-2 .perbox4 .box-side5,
.storbox-2 .perbox5 .box-side5,
.storbox-2 .perbox6 .box-side5,
.storbox-2 .perbox7 .box-side5,
.storbox-2 .perbox8 .box-side5 {
	background: #216951;
}

/* right */

.storbox-2 .perbox1 .box-side1,
.storbox-2 .perbox2 .box-side1,
.storbox-2 .perbox3 .box-side1,
.storbox-2 .perbox4 .box-side1,
.storbox-2 .perbox5 .box-side1,
.storbox-2 .perbox6 .box-side1,
.storbox-2 .perbox7 .box-side1,
.storbox-2 .perbox8 .box-side1 {
	background: #1d5b45;
}

/* back */

.storbox-2 .perbox1 .box-side2,
.storbox-2 .perbox2 .box-side2,
.storbox-2 .perbox3 .box-side2,
.storbox-2 .perbox4 .box-side2,
.storbox-2 .perbox5 .box-side2,
.storbox-2 .perbox6 .box-side2,
.storbox-2 .perbox7 .box-side2,
.storbox-2 .perbox8 .box-side2 {
	background: #1d5b45;
}

/* .storbox-3 colors */

/* left */

.storbox-3 .perbox1 .box-side4,
.storbox-3 .perbox2 .box-side4,
.storbox-3 .perbox3 .box-side4,
.storbox-3 .perbox4 .box-side4,
.storbox-3 .perbox5 .box-side4,
.storbox-3 .perbox6 .box-side4,
.storbox-3 .perbox7 .box-side4,
.storbox-3 .perbox8 .box-side4 {
	background: #178c59;
}

/* front */

.storbox-3 .perbox1 .box-side3,
.storbox-3 .perbox2 .box-side3,
.storbox-3 .perbox3 .box-side3,
.storbox-3 .perbox4 .box-side3,
.storbox-3 .perbox5 .box-side3,
.storbox-3 .perbox6 .box-side3,
.storbox-3 .perbox7 .box-side3,
.storbox-3 .perbox8 .box-side3  {
	background: #189966;
}

/* top */

.storbox-3 .perbox1 .box-side5,
.storbox-3 .perbox2 .box-side5,
.storbox-3 .perbox3 .box-side5,
.storbox-3 .perbox4 .box-side5,
.storbox-3 .perbox5 .box-side5,
.storbox-3 .perbox6 .box-side5,
.storbox-3 .perbox7 .box-side5,
.storbox-3 .perbox8 .box-side5 {
	background: #189966;
}

/* right */

.storbox-3 .perbox1 .box-side1,
.storbox-3 .perbox2 .box-side1,
.storbox-3 .perbox3 .box-side1,
.storbox-3 .perbox4 .box-side1,
.storbox-3 .perbox5 .box-side1,
.storbox-3 .perbox6 .box-side1,
.storbox-3 .perbox7 .box-side1,
.storbox-3 .perbox8 .box-side1 {
	background: #189966;
}

/* back */

.storbox-3 .perbox1 .box-side2,
.storbox-3 .perbox2 .box-side2,
.storbox-3 .perbox3 .box-side2,
.storbox-3 .perbox4 .box-side2,
.storbox-3 .perbox5 .box-side2,
.storbox-3 .perbox6 .box-side2,
.storbox-3 .perbox7 .box-side2,
.storbox-3 .perbox8 .box-side2 {
	background: #178c59;
}

/* .storbox-4 */

/* left */

.storbox-4 .perbox1 .box-side4,
.storbox-4 .perbox2 .box-side4,
.storbox-4 .perbox3 .box-side4,
.storbox-4 .perbox4 .box-side4,
.storbox-4 .perbox5 .box-side4,
.storbox-4 .perbox6 .box-side4,
.storbox-4 .perbox7 .box-side4,
.storbox-4 .perbox8 .box-side4 {
	background: #1fa36a;
}

/* front */

.storbox-4 .perbox1 .box-side3,
.storbox-4 .perbox2 .box-side3,
.storbox-4 .perbox3 .box-side3,
.storbox-4 .perbox4 .box-side3,
.storbox-4 .perbox5 .box-side3,
.storbox-4 .perbox6 .box-side3,
.storbox-4 .perbox7 .box-side3,
.storbox-4 .perbox8 .box-side3  {
	background: #21b076;
}

/* top */

.storbox-4 .perbox1 .box-side5,
.storbox-4 .perbox2 .box-side5,
.storbox-4 .perbox3 .box-side5,
.storbox-4 .perbox4 .box-side5,
.storbox-4 .perbox5 .box-side5,
.storbox-4 .perbox6 .box-side5,
.storbox-4 .perbox7 .box-side5,
.storbox-4 .perbox8 .box-side5 {
	background: #21b076;
}

/* right */

.storbox-4 .perbox1 .box-side1,
.storbox-4 .perbox2 .box-side1,
.storbox-4 .perbox3 .box-side1,
.storbox-4 .perbox4 .box-side1,
.storbox-4 .perbox5 .box-side1,
.storbox-4 .perbox6 .box-side1,
.storbox-4 .perbox7 .box-side1,
.storbox-4 .perbox8 .box-side1 {
	background: #21b076;
}

/* back */

.storbox-4 .perbox1 .box-side2,
.storbox-4 .perbox2 .box-side2,
.storbox-4 .perbox3 .box-side2,
.storbox-4 .perbox4 .box-side2,
.storbox-4 .perbox5 .box-side2,
.storbox-4 .perbox6 .box-side2,
.storbox-4 .perbox7 .box-side2,
.storbox-4 .perbox8 .box-side2 {
	background: #1fa36a;
}

.storbox-1 .perbox3 .box-side3 img,
.storbox-1 .perbox4 .box-side3 img,
.storbox-1 .perbox7 .box-side3 img,
.storbox-1 .perbox8 .box-side3 img {

}

.storbox-1 .perbox1 .box-side4 img,
.storbox-1 .perbox2 .box-side4 img,
.storbox-1 .perbox3 .box-side4 img,
.storbox-1 .perbox4 .box-side4 img {

}

/* Toppsidor på bottenrad */

.perbox3 .box-side5,
.perbox5 .box-side5,
.perbox7 .box-side5,
.perbox1 .box-side5 {
  -webkit-box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.45) !important;
          box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.45) !important;
}

/* Toppsidor på topprad */

.perbox1 .box-side5,
.perbox3 .box-side5,
.perbox5 .box-side5,
.perbox7 .box-side5 {

}

/* Vänstersidor */

.perbox1 .box-side4,
.perbox2 .box-side4,
.perbox3 .box-side4,
.perbox4 .box-side4,
.perbox5 .box-side4,
.perbox6 .box-side4,
.perbox7 .box-side4 {

}

/* Frontsidor */

.perbox1 .box-side3,
.perbox2 .box-side3,
.perbox3 .box-side3,
.perbox4 .box-side3,
.perbox5 .box-side3,
.perbox6 .box-side3,
.perbox7 .box-side3 {

}

/* Utsidor höger */

.perbox7 .box-side1,
.perbox8 .box-side1,
.perbox5 .box-side1,
.perbox6 .box-side1 {
  -webkit-box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.2);
          box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.2);
}

/* Insidor Höger */

.perbox2 .box-side1,
.perbox1 .box-side1,
.perbox3 .box-side1,
.perbox4 .box-side1 {
  -webkit-box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.5);
          box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.5);
}

/* Insidor vänster */

.perbox7 .box-side4,
.perbox8 .box-side4,
.perbox6 .box-side4,
.perbox5 .box-side4 {
  -webkit-box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.5);
          box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.5);
}

/* Insidor front */

.perbox5 .box-side3,
.perbox6 .box-side3,
.perbox1 .box-side3,
.perbox2 .box-side3 {
  -webkit-box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.5);
          box-shadow: inset 0px 0px 50vw 60px rgba(0,0,0,0.5);
}

.pen-box {
	position: absolute;
}
.pen-left, .pen-right, .pen-top, .pen-front {
	position: absolute;
}
.sharpie {
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: rotateY(90deg) translate3d(-15vw, -78vw, 0.1vw) scale3d(0.05, 0.05, 0.05);
	        transform: rotateY(90deg) translate3d(-15vw, -78vw, 0.1vw) scale3d(0.05, 0.05, 0.05);
}
.sharpie2 {
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: rotateY(90deg) rotateX(51deg) scaleX(-1) translate3d(0.4vw, 7vw, -20vw);
	        transform: rotateY(90deg) rotateX(51deg) scaleX(-1) translate3d(0.4vw, 7vw, -20vw);
	position: absolute;
	height: 7vw;
}
.box_shadow {
	position: absolute;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: rotateZ(-20deg) scale3d(0.7, 0.7, 0.7) translate3d(-20vw, -7vw, 0.2px);
	        transform: rotateZ(-20deg) scale3d(0.7, 0.7, 0.7) translate3d(-20vw, -7vw, 0.2px);
}
.shadow_left {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-box-shadow: inset 0px 0px 50vw 5px rgba(0,0,0,0.1);
	        box-shadow: inset 0px 0px 50vw 5px rgba(0,0,0,0.1);
	top: 0;
	left: 0;
	mix-blend-mode: plus-darker;
}
.box_shadow {
	width: 9vw;
	height: 9vw;
	background: #888;
	-webkit-box-shadow: 0px 0px 3vw 5px rgba(0,0,0,1);
	        box-shadow: 0px 0px 3vw 5px rgba(0,0,0,1);
	-webkit-transform: rotateY(0deg) translate3d(-2vw, 8vw, 0.2px);
	        transform: rotateY(0deg) translate3d(-2vw, 8vw, 0.2px);
	opacity: 1;
}
.girl2 {
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-ms-transform-style: preserve-3d;
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
	-webkit-transform: rotateX(-90deg) scale3d(1, 1, 1) translate3d(-3vw, -19vw, 3vw);
	        transform: rotateX(-90deg) scale3d(1, 1, 1) translate3d(-3vw, -19vw, 3vw);
	position: absolute;
	height: 19vw;
}
/* Inforutor */

.hybrid {
	width: 30vw;
	height: 15vw;
	padding: 0 2vw;
	position: absolute;
	background: #ccc;
	-webkit-transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -1000vw, -20vw);
	        transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -1000vw, -20vw);
}
.hybrid h1 {
	font-size: 2vw;
}
.hybrid p {
	font-size: 1vw;
}
.storbox-1:hover .hybrid {
	width: 30vw;
	height: 15vw;
	padding: 0 2vw;
	position: absolute;
	background: rgba(82, 82, 82, 0.9);
	-webkit-transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw) scale3d(1.29, 1.29, 1.29);
	        transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw) scale3d(1.29, 1.29, 1.29);
}
.storbox-2:hover .hybrid {
	width: 30vw;
	height: 15vw;
	padding: 0 2vw;
	position: absolute;
	background: rgba(77, 109, 99, 0.9);
	-webkit-transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw) scale3d(1.13, 1.13, 1.13);
	        transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw) scale3d(1.13, 1.13, 1.13);
}
.storbox-3:hover .hybrid {
	width: 30vw;
	height: 15vw;
	padding: 0 2vw;
	position: absolute;
	background: rgba(24, 153, 102, 0.9);
	-webkit-transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw);
	        transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw);
}
.storbox-4:hover .hybrid {
	width: 30vw;
	height: 15vw;
	padding: 0 2vw;
	position: absolute;
	background: rgba(66, 193, 139, 0.9);
	-webkit-transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw) scale3d(.9, .9, .9);
	        transform: rotateY(180deg) rotateX(90deg) scaleX(-1) translate3d(-12.6vw, -17vw, -20vw) scale3d(.9, .9, .9);
}