html, body {
	font-family: Monospace;
	background-color: #333333;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

video {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	width: 100%;
	height: 100%;
	z-index: 100;
}
iframe {
	cursor: pointer;
	visibility: hidden;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#start {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	background: url(model/stripe3.png);
	opacity: 1;
	z-index: 10;
}

#start > #welcome {
	width: 80%;
	height: 70%;
	position: absolute;
	left: 10%;
	top: 15%;
}
#welcome > h3 {
	color: #fd9a1f;
	font-size: 25pt;
	position: fixed;
	top: 70%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
	font-weight: lighter;
	letter-spacing: 8px;
}
#welcome > p {
	color: #9C9C9C;
	font-size: 25pt;
	position: fixed;
	top: 40%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
	letter-spacing: 2px;
}
span {
	font-family: Helvetica;
	font-weight: lighter;
	color: #aCaCaC;
	font-size: 20pt;
	letter-spacing: 2px;
}
#WCanimation {
  position: fixed;
  top: 80%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
.square, .squaretwo {
	position: absolute;
	border: 6px solid #fd9a1f; 
	width: 50px;
	height: 50px;
	top: 14px;
	left: 34px;

	-moz-transform: rotate(45deg);  
	-o-transform: rotate(45deg);  
	-webkit-transform: rotate(45deg);  
	-ms-transform: rotate(45deg);  
	transform: rotate(45deg); 
}
.squaretwo {
	left: 54px;
}
.connectors {
}
.connectors * {
	position: absolute;
	width: 20px;
	height: 6px;
	background-color: #fd9a1f;
}
div.connector:nth-child(1) {
	position: absolute;
	top: 1px;
	left: 65px;
}
div.connector:nth-child(2) {
	position: absolute;
	top: 42px;
	left: 29px;
}
div.connector:nth-child(3) {
	position: absolute;
	top: 42px;
	left: 102px
}
div.connector:nth-child(4) {
	position: absolute;
	top: 83px;
	left: 65px;
}
.square, .squaretwo {
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.square:hover, .squaretwo:hover {
  background: #fd9a1f;
}

canvas, div#CSS3DRenderer { 
    position: absolute;
    top: 0;
    left: 0;
}

#info {
	color: #fff;
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
	z-index: 10;
}

.camanimation {
	position: absolute;
	height: 5%;
	width: 8%;
	top: 98%;
	left: 46%;
	text-align: center;
	z-index: 10;
}

a { color: skyblue }

@-webkit-keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.fade-out {
    -webkit-animation: fadeOut .1s ease-in 1 forwards;
  animation: fadeOut .1s ease-in 1 forwards;
  opacity: 1;
}

.is-paused {
    -webkit-animation-play-state: paused;
  animation-play-state: paused;
}