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

html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
	cursor: crosshair;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
}


body.fullscreen {
  overflow: hidden; }
  z-index: -2;
  body.fullscreen article {
	position: absolute;
	overflow: hidden;
	width: auto;
	padding: 0;
	left: -24px;
	top: 3px;
	right: 0;
	bottom: 0;
	margin-bottom: 0;
}
    body.fullscreen article .paperscript {
      height: 100%;
      margin-bottom: 0; }
    body.fullscreen article .canvas,
    body.fullscreen article canvas[resize] {
      width: 100%;
      height: 100%;
	  }

body.scroll {
  overflow: scroll; }
  z-index: -2;
  body.fullscreen article {
	position: absolute;
	overflow: hidden;
	width: auto;
	padding: 0;
	left: -24px;
	top: 3px;
	right: 0;
	bottom: 0;
	margin-bottom: 0;
}

a:link {
	text-decoration: none;
	color: #000;
}

a:visited {
    color: #000;
}

a:hover {
    text-decoration: blink;
	color: #7E7E7E;
}

/** ---- HEADER ---- **/
.headerbg {
	background-color: #362f2d;
}

.header {
	background-color: #362f2d;
	color: white;
	height: 180px;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 70px;
}

.menubar {
	position: fixed;
	float: left;
	left: 15px;
	top: 96px;
	font-size: 20px;
	font-family: 'Inconsolata';
	font-weight: bold;
	color: #cdcdcd;
}
/**
.sidebar {
	position: fixed;
	left: 0px;
	width: 200px;
	z-index: -2;
	background-color: #fff;
	height: 100vh;
}
**/
/** ARCHITECTURE **/

.gif {
    margin: auto;
    width: 60%;
	padding: 50px 0;
}

.movie {
    margin: auto;
    width: 60%;
	padding: 120px 0;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.arch14 {
	position: fixed;
	left: 180px;
	top: 96px;
	font-size: 16px;
	font-family: 'Inconsolata';
	background-color: #fff;
	opacity: 0.9;
	display: block;
	padding: 0;
	width: 160px;
}

.arch15 {
	position: fixed;
	left: 347px;
	top: 96px;
	font-size: 16px;
	font-family: 'Inconsolata';
	background-color: #fff;
	opacity: 0.9;
	display: block;
	padding: 0;
	width: 160px;
}

.arch16 {
	position: fixed;
	left: 515px;
	top: 96px;
	font-size: 16px;
	font-family: 'Inconsolata';
	background-color: #fff;
	opacity: 0.9;
	display: block;
	padding: 0;
	width: 160px;
}
.textb {
	position: fixed;
	left: 15px;
	top: 152px;
	font-size: 16px;
	font-family: 'Inconsolata';
	background-color: #fff;
	opacity: 0.9;
	display: block;
	width: 128px;
	z-index: -1;
	padding: 15px;
}

.archilist {
    list-style:none;
    padding-left: 10px;
	line-height: 30px;
}​

.sidebar {
	position: left;
	left: 0px;
	width: 300px;
	z-index: -1;
	background-color: #fff;
	height: 100vh;
}


/** ---- FOOTER ---- **/

.footer {
	color: #a4a4a4;
	font-family: 'Inconsolata';
	position: fixed;
	right: 50px;
	bottom: 10px;
	text-align: right;
	padding-bottom: 10px;
}


.copyright {
	position: fixed;
	left: 20px;
	bottom: 10px;
	font-family: "Inconsolata";
	color:#a4a4a4;
	padding-bottom: 10px;
}

 BUTTONS 

.socialmbutton {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    cursor: pointer;
}

.socialmbutton:hover {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

.socialm {
	position: fixed;
	top: 55px;
	left: 21px;
	opacity: 0.8;
}

.pgbutton {
	position: fixed;
	top: 54px;
	left: 20px;
	opacity: 0.9;
}

.button {
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	font-family: "Inconsolata";
    font-size: 18px;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    cursor: pointer;
}

.button1 {
    background-color: #000;
	opacity: 0.8;
    color: #fff!important;
}

.button1:hover {
    opacity: 0.5;
}