@charset "UTF-8";
/* CSS Document */

h2 {
margin-top: 0;
}
.viewport {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px; 
-webkit-transform: scale(0.75,0.75);
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-moz-transform: scale(0.75,0.75);
perspective: 800px;
perspective-origin: 50% 100px;
transform: scale(0.75,0.75);
}

@media (max-width: 768px) {
.viewport {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px; 
-webkit-transform: scale(0.6,0.6);
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-moz-transform: scale(0.6,0.6);
perspective: 800px;
perspective-origin: 50% 100px;
transform: scale(0.6,0.6);
}
}
.cube {
position: relative;
margin: 0 auto 100px;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-10deg) rotateY(20deg);
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
-moz-transform: rotateX(-10deg) rotateY(20deg);
transition: transform 50ms linear;
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(20deg);
}
.cube2 {
position: relative;
margin: 0 auto 100px;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-10deg) rotateY(20deg);
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
-moz-transform: rotateX(-10deg) rotateY(20deg);
transition: transform 50ms linear;
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(20deg);
}
.cube h2 {
color: #fff;
padding-top: 0;
margin-top: 0;
}
.cube a {
color: #fff;
}
.cube > div {
	position: absolute;
	height: 400px;
	width: 400px;
	padding: 20px;
	font-size: 1em;
	line-height: 1em;
	color: #fff;
	border-radius: 3px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: rgba(255,255,255,0.7);
	border-right-color: rgba(255,255,255,0.5);
	border-bottom-color: rgba(255,255,255,0.5);
	border-left-color: rgba(255,255,255,0.4);
}
.cube > div:first-child {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
background-color: rgba(250,250,250,1);
}
.cube > div:nth-child(2) {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
transform: translateZ(200px);
background-color: rgba(50, 50, 50, 0.97);
}
.cube > div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
text-align: center;
background-color: rgba(0, 0, 0, 0.97);
}
.cube > div:nth-child(4) {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
background-color: rgba(100, 100, 100, 0.97);
}
.cube > div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
background-color: rgba(150, 150, 150, 0.97);
}
.cube > div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
background-color: rgba(10, 10, 10, 0.97);
}

/* Building 1 */
/* Face 1 - Zup */
.cube > div:nth-child(7) {
-webkit-transform: rotateX(90deg) translateY(150px) translateZ(160px);
-moz-transform: rotateX(90deg) translateY(150px) translateZ(160px);
transform: rotateX(90deg) translateY(150px) translateZ(160px);
background-color: rgba(255,102,0,0.9);
height: 100px;
width: 100px;
}
/* Face 2 - Yup */
.cube > div:nth-child(8) {
-webkit-transform: translateY(-110px) translateZ(200px);
-moz-transform: translateY(-110px) translateZ(200px);
transform: translateY(-110px) translateZ(200px);
background-color: rgba(153,0,0,0.9);
height: 100px;
width: 100px;
}
/* Face 3 - Yup */
.cube > div:nth-child(9) {
-webkit-transform: rotateY(90deg) translateX(-150px) translateY(-110px) translateZ(50px);
-moz-transform: rotateY(90deg) translateX(-150px) translateY(-110px) translateZ(50px);
transform: rotateY(90deg) translateX(-150px) translateY(-110px) translateZ(50px);
background-color: rgba(204,102,0,0.9);
height: 100px;
width: 100px;
}
/* Face 4: Yup */
.cube > div:nth-child(10) {
-webkit-transform: rotateY(180deg) translateY(-110px) translateZ(-100px);
-moz-transform: rotateY(180deg) translateY(-110px) translateZ(-100px);
transform: rotateY(180deg) translateY(-110px) translateZ(-100px);
background-color: rgba(204,51,0,0.9);
height: 100px;
width: 100px;
}
/* Face 5 */
.cube > div:nth-child(11) {
-webkit-transform: rotateY(-90deg) translateX(150px) translateY(-110px) translateZ(50px);
-moz-transform: rotateY(-90deg) translateX(150px) translateY(-110px) translateZ(50px);
transform: rotateY(-90deg) translateX(150px) translateY(-110px) translateZ(50px);
background-color: rgba(204,0,0,0.9);
height: 100px;
width: 100px;
}
/* Face 6 - Zup */
.cube > div:nth-child(12) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateY(150px) translateZ(-60px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateY(150px) translateZ(-60px);
transform: rotateX(-90deg) rotate(180deg) translateY(150px) translateZ(-60px);
background-color: rgba(102,0,0,0.9);
height: 100px;
width: 100px;
}

/* Building 2 */
/* Face 1 - Zup */
.cube > div:nth-child(13) {
-webkit-transform: rotateX(90deg) translateX(300px) translateY(150px) translateZ(160px);
-moz-transform: rotateX(90deg) translateX(300px) translateY(150px) translateZ(160px);
transform: rotateX(90deg) translateX(300px) translateY(150px) translateZ(160px);
background-color: rgba(255,255,255,0.9);
height: 100px;
width: 100px;
}
/* Face 2 - Yup */
.cube > div:nth-child(14) {
-webkit-transform: translateX(300px) translateY(-110px) translateZ(200px);
-moz-transform: translateX(300px) translateY(-110px) translateZ(200px);
transform: translateX(300px) translateY(-110px) translateZ(200px);
background-color: rgba(255,255,255,0.9);
height: 100px;
width: 100px;
}
/* Face 3 - Yup */
.cube > div:nth-child(15) {
-webkit-transform: rotateY(90deg) translateX(-150px) translateY(-110px) translateZ(350px);
-moz-transform: rotateY(90deg) translateX(-150px) translateY(-110px) translateZ(350px);
transform: rotateY(90deg) translateX(-150px) translateY(-110px) translateZ(350px);
background-color: rgba(255,255,255,0.9);
height: 100px;
width: 100px;
}
/* Face 4: Yup */
.cube > div:nth-child(16) {
-webkit-transform: rotateY(180deg) translateX(-300px) translateY(-110px) translateZ(-100px);
-moz-transform: rotateY(180deg) translateX(-300px) translateY(-110px) translateZ(-100px);
transform: rotateY(180deg) translateX(-300px) translateY(-110px) translateZ(-100px);
background-color: rgba(255,255,255,0.9);
height: 100px;
width: 100px;
}
/* Face 5 */
.cube > div:nth-child(17) {
-webkit-transform: rotateY(-90deg) translateX(150px) translateY(-110px) translateZ(-250px);
-moz-transform: rotateY(-90deg) translateX(150px) translateY(-110px) translateZ(-250px);
transform: rotateY(-90deg) translateX(150px) translateY(-110px) translateZ(-250px);
background-color: rgba(255,255,255,0.9);
height: 100px;
width: 100px;
}
/* Face 6 - Zup */
.cube > div:nth-child(18) {
-webkit-transform: rotateX(-90deg) translateX(300px) translateY(-150px) translateZ(-60px);
-moz-transform: rotateX(-90deg) translateX(300px) translateY(-150px) translateZ(-60px);
transform: rotateX(-90deg) translateX(300px) translateY(-150px) translateZ(-60px);
background-color: rgba(255,255,255,0.9);
height: 100px;
width: 100px;
}

/* Building 3 */
/* Face 1 - Zup */
.cube > div:nth-child(19) {
-webkit-transform: rotateX(90deg) translateY(-150px) translateZ(160px);
-moz-transform: rotateX(90deg) translateY(-150px) translateZ(160px);
transform: rotateX(90deg) translateY(-150px) translateZ(160px);
background-color: rgba(250,250,250,1);
height: 100px;
width: 100px;
}
/* Face 2 - Yup */
.cube > div:nth-child(20) {
-webkit-transform: translateY(-110px) translateZ(-100px);
-moz-transform: translateY(-110px) translateZ(-100px);
transform: translateY(-110px) translateZ(-100px);
background-color: rgba(153,153,153,1);
height: 100px;
width: 100px;
}
/* Face 3 - Yup */
.cube > div:nth-child(21) {
-webkit-transform: rotateY(90deg) translateX(150px) translateY(-110px) translateZ(50px);
-moz-transform: rotateY(90deg) translateX(150px) translateY(-110px) translateZ(50px);
transform: rotateY(90deg) translateX(150px) translateY(-110px) translateZ(50px);
background-color: rgba(204,204,204,1);
height: 100px;
width: 100px;
}
/* Face 4: Yup */
.cube > div:nth-child(22) {
-webkit-transform: rotateY(180deg) translateY(-110px) translateZ(200px);
-moz-transform: rotateY(180deg) translateY(-110px) translateZ(200px);
transform: rotateY(180deg) translateY(-110px) translateZ(200px);
background-color: rgba(100,100,100,1);
height: 100px;
width: 100px;
}
/* Face 5 */
.cube > div:nth-child(23) {
-webkit-transform: rotateY(-90deg) translateX(-150px) translateY(-110px) translateZ(50px);
-moz-transform: rotateY(-90deg) translateX(-150px) translateY(-110px) translateZ(50px);
transform: rotateY(-90deg) translateX(-	150px) translateY(-110px) translateZ(50px);
background-color: rgba(120,120,120,1);
height: 100px;
width: 100px;
}
/* Face 6 - Zup */
.cube > div:nth-child(24) {
-webkit-transform: rotateX(-90deg) translateY(150px) translateZ(-60px);
-moz-transform: rotateX(-90deg) translateY(150px) translateZ(-60px);
transform: rotateX(-90deg) translateY(150px) translateZ(-60px);
background-color: rgba(0,0,0,1);
height: 100px;
width: 100px;
}

object {
opacity: 1;
}
object:hover {
opacity: 1;
}