﻿
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background: #1b1b1b;
	color:#CCC;
	font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-weight: 300;
}
#wrapper {
	padding-top: 0%;
	padding-left:0%
}

div[class^="cube-viewport"] {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	-webkit-perspective-origin: 50% 200px;
	-moz-perspective-origin: 50% 200px;
	-ms-perspective-origin: 50% 200px;
	-o-perspective-origin: 50% 200px;
	perspective-origin: 50% 200px;
	-webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1)));
}
.cube-viewport-small {
	-webkit-transform: scale(0.3, 0.3);
	-moz-transform: scale(0.3, 0.3);
	-ms-transform: scale(0.3, 0.3);
	-o-transform: scale(0.3, 0.3);
	transform: scale(0.3, 0.3);
}
.cube-viewport-medium {
	-webkit-transform: scale(0.5, 0.5);
	-moz-transform: scale(0.5, 0.5);
	-ms-transform: scale(0.5, 0.5);
	-o-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
}
.cube {
	position: relative;
	margin: 0 auto;
	height: 400px;
	width: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(136deg) rotateY(1122deg);
	-moz-transform: rotateX(136deg) rotateY(1122deg);
	-ms-transform: rotateX(136deg) rotateY(1122deg);
	-o-transform: rotateX(136deg) rotateY(1122deg);
	transform: rotateX(136deg) rotateY(1122deg);
}
.cube > div {
	overflow: hidden;
	position: absolute;
	opacity: 0.9;
	height: 400px;
	width: 400px;
	-webkit-touch-callout: none;
	-moz-touch-callout: none;
	-ms-touch-callout: none;
	-o-touch-callout: none;
	touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.cube #img1 {
	background-image: url("/_assets/images/industry/edu-bg0.jpg");
}
.cube #img2 {
	background-image: url("/_assets/images/industry/edu-bg1.jpg");
}
.cube #img3 {
	background-image: url("/_assets/images/industry/edu-bg2.jpg");
}
.cube #img4 {
	background-image: url("/_assets/images/industry/edu-bg3.jpg");
}
.cube #img5 {
	background-image: url("/_assets/images/industry/edu-bg4.jpg");
}
.cube #img6 {
	background-image: url("/_assets/images/industry/edu-bg5.jpg");
}
.cube > div > div.cube-image {
	width: 400px;
	height: 400px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	line-height: 200px;
	font-size: 80px;
	text-align: center;
	color: #1b9bd8;
	-webkit-transition: color 600ms;
	-moz-transition: color 600ms;
	-ms-transition: color 600ms;
	-o-transition: color 600ms;
	transition: color 600ms;
}
.cube > div > div.cube-image.active {color: red;}
	
.cube > div:hover {cursor: pointer;}
	
.cube > div:active {cursor: pointer;}
	
.cube > div:first-child {
	-webkit-transform: rotateX(90deg) translateZ(200px);
	-moz-transform: rotateX(90deg) translateZ(200px);
	-ms-transform: rotateX(90deg) translateZ(200px);
	-o-transform: rotateX(90deg) translateZ(200px);
	transform: rotateX(90deg) translateZ(200px);
	outline: 1px solid transparent;
}
.cube > div:nth-child(2) {
	-webkit-transform: translateZ(200px);
	-moz-transform: translateZ(200px);
	-ms-transform: translateZ(200px);
	-o-transform: translateZ(200px);
	transform: translateZ(200px);
	outline: 1px solid transparent;
}
.cube > div:nth-child(3) {
	-webkit-transform: rotateY(90deg) translateZ(200px);
	-moz-transform: rotateY(90deg) translateZ(200px);
	-ms-transform: rotateY(90deg) translateZ(200px);
	-o-transform: rotateY(90deg) translateZ(200px);
	transform: rotateY(90deg) translateZ(200px);
	outline: 1px solid transparent;
}
.cube > div:nth-child(4) {
	-webkit-transform: rotateY(180deg) translateZ(200px);
	-moz-transform: rotateY(180deg) translateZ(200px);
	-ms-transform: rotateY(180deg) translateZ(200px);
	-o-transform: rotateY(180deg) translateZ(200px);
	transform: rotateY(180deg) translateZ(200px);
	outline: 1px solid transparent;
}
.cube > div:nth-child(5) {
	-webkit-transform: rotateY(-90deg) translateZ(200px);
	-moz-transform: rotateY(-90deg) translateZ(200px);
	-ms-transform: rotateY(-90deg) translateZ(200px);
	-o-transform: rotateY(-90deg) translateZ(200px);
	transform: rotateY(-90deg) translateZ(200px);
	outline: 1px solid transparent;
}
.cube > div:nth-child(6) {
	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
	transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
	outline: 1px solid transparent;
}
object {opacity: 0.5; }
	
object:hover {opacity: 1;}

@media (max-width: 640px) {
	.cube-viewport {
		-webkit-transform: scale(0.3, 0.3);
		-moz-transform: scale(0.3, 0.3);
		-ms-transform: scale(0.3, 0.3);
		-o-transform: scale(0.3, 0.3);
		transform: scale(0.3, 0.3);
	}
}
