@charset "utf-8";

@font-face {
	font-family: 'sofiaprolight';
	src: url('../fonts/sofiaprolight.eot');
	src: url('../fonts/sofiaprolight.eot?#iefix') format('embedded-opentype'),
		url('../fonts/sofiaprolight.woff') format('woff'),
		url('../fonts/sofiaprolight.ttf') format('truetype'),
		url('../fonts/sofiaprolight.svg') format('svg');
	
}
@font-face {
	font-family: 'open_sansbold';
	src: url('../fonts/OpenSans-Bold.eot');
	src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/OpenSans-Bold.woff2') format('woff2'),  url('../fonts/OpenSans-Bold.woff') format('woff'),  url('../fonts/OpenSans-Bold.ttf') format('truetype'),  url('../fonts/OpenSans-Bold.svg#open_sansbold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'open_sansregular';
	src: url('../fonts/OpenSans-Regular.eot');
	src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),  url('../fonts/OpenSans-Regular.woff2') format('woff2'),  url('../fonts/OpenSans-Regular.woff') format('woff'),  url('../fonts/OpenSans-Regular.ttf') format('truetype'),  url('../fonts/OpenSans-Regular.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*universal reset*/
* {
	margin: 0;
	padding: 0;
}
/*removes old blue outline when clicked on*/
*:focus {
	outline: none;
}
/*new box style */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
/*float styles*/
.clearall {
	clear: both;
}
.right {
	float:right;	
}
.left {
	float:left;
}

/*common styles*/
body, html {
	height:100%;
	width:100%;
	min-height:400px;
	min-width: 320px;
}

body {
	font-family: open_sansregular;
	font-size: 100%;	
	background-color:#393939;
	-webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}
strong {
	font-family:open_sansbold;	
	font-weight:normal;
}
h1 {
	font-family: sofiaprolight;
	font-size:2.5em;
	font-weight: normal;	
	color:#fff;
}
h2 {
	font-family: sofiaprolight;
	font-family: sofiaprolight;
	display:inline-block;
	font-size:2em;
	font-weight: normal;	
	color:#fff;	
}
h3 {
	font-family: sofiaprolight;
	font-size:1.5em;
	font-weight: normal;	
	color:#fff;	
}
h4 {
	font-family: sofiaprolight;
	font-size:1.25em;
	font-weight: normal;	
	color:#fff;	
	margin-bottom:1em;
}
#wrapper {
	max-width:1600px;
	min-width:340px;
	height:100%;
	min-height:20px;
	margin:0 auto;	
	position:relative;
}

header {
	background-color:#393939;
	display:table;
	width:100%;
	height:12%;
	color:#fff;
	text-align:center;
}

header h2 {
	display:inline-block;	
	margin: .75em 1em;
	font-size:1.2em;
}
a {
	color:#fff;
	text-decoration:none;
}
a:hover, a h2:hover {
	color:#FF3F00;
}
a:active, a h2:active {
	color:#FF3F00;
}
/*page styles*/
.white {
	background:#393939;	
	height:88%;
	overflow:visible;
}
.project {
    display: table;
	height:25%;
	width:100%;
	text-align:center;
	position:relative;
	border-bottom:1px solid #fff;
}
.escape {
	background: url(../images/probe.jpg) no-repeat center;
	background-size:cover;
}
.escape:hover, .music:hover, .ok:hover, .threedee:hover, .survive:hover, .watch:hover, .junction:hover, .explore:hover, .organics:hover, .hso:hover, .ccc:hover, .marc:hover, .loris:hover, .ludmer:hover, .mcin:hover, .conp:hover, .cbrain:hover, .bigbrain:hover {
/*  opacity:.8;*/
	-webkit-filter: brightness(130%);	
	-webkit-filter: contrast(130%);
	-moz-filter: brightness(130%);	
	-moz-filter: contrast(130%);
	filter: brightness(130%);	
	filter: contrast(130%);
}
.hso {
	background:url(../images/bg-abstract.jpg) repeat;
    display: table;
}
.music {
	background:url(../images/bgt.png) repeat;
    display: table;
}
.ok {
	background:url(../images/okbg.svg) center no-repeat;
	background-size:cover;
}
.survive {
	background: url(../images/survive.jpg) no-repeat center;
	background-size:cover;
}
.mono {
	font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;	
	color:#fff;
}
.watch {
	background: url(../images/watch.jpg) no-repeat center;
	background-size:cover;
}
.junction {
	background: url(../images/junction.jpg) no-repeat center;
	background-size:cover;
}
.junction img {
	padding:8px;
	background:#fff;
}
.explore {
	background: url(../images/intergalactic.jpg) no-repeat center;
	background-size:cover;
}
.organics {
	background: url(../images/organics.jpg) no-repeat center;
	background-size:cover;
}
.threedee {
	background:url(../images/render.jpg) no-repeat center;
	background-size:cover;	
}
.mcin {
	background: url(../images/mcin2.jpg) no-repeat center;
	background-size:cover;
}
.ludmer {
	background: url(../images/ludmer.jpg) no-repeat center;
	background-size:cover;
}
.ludmer {
	background: url(../images/ludmer.jpg) no-repeat center;
	background-size:cover;
}
.loris {
	background: url(../images/lorisbg.jpg) no-repeat center;
	background-size:cover;
}
.marc {
	background: url(../images/marc.jpg) no-repeat center;
	background-size:cover;	
}
.ccc {
	background: url(../images/ccc.jpg) no-repeat center;
	background-size:cover;	
}
.conp {
	background: url(../images/conpBG.png) no-repeat center;
	background-size:cover;	
}
.cbrain {
	background: url(../images/cbrainbg.png) no-repeat center;
	background-size:cover;	
}
.bigbrain {
	background: url(../images/bbbg.png) no-repeat center;
	background-size:cover;	
}
.middle {
	display: table-cell;
    vertical-align: middle;
	width:100%;
	text-align:center;
}
.project img {
	width:45%;
	height:auto;
}
.escape img {
	width:45%;
	height:auto;
}
.hso img {
	width:45%;
	height:auto;
}
.music img {
	width:50%;
	height:auto;
}
.ok img, .threedee img  {
	width:25%;
}
 .junction img, .organics img {
		width:45%; 
 }
.ok h1 {
	font-size:1em;	
}
.musiclogo {
	background:url(../images/MMlogos.svg) no-repeat center;
	width:100%;
	min-height:75px;
	max-width:200px;
	margin:0 auto;
}
.overlay {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:.25em 1em;
	overflow:hidden;
	background:rgba(0,0,0,0.50);	
	max-height:2.25em;
	color:#fff;
	border-top-left-radius:15px;
	border-top-right-radius:15px;	
	-webkit-transition: all ease-out .75s;
	transition: all ease-out .75s;
	display:none;
}
.overlay p {
	text-align:left;
	margin-bottom:1em;	
}
.overlay:hover {
	max-height:100%;
	border-radius:0px;	
	background:rgba(0,0,0,0.8);
}
.overlay:active {
	max-height:100%;
	border-radius:0px;
	background:rgba(0,0,0,0.8);
}
.content {
	background-color:#393939;
	position:relative;
	height:100%;
	overflow:hidden;
}
.fixedleft {
	display:table;
	background:url(../images/probe.jpg) center center;
	background-size:cover;
	width:100%;
}
.fixedleft2 {
	display:table;
	background:url(../images/bgt.png);
	width:100%;
}
.fixedleft4 {
	display:table;
	background:url(../images/survive.jpg) center center;
	background-size:cover;
	width:100%;
}
.fixedleft5 {
	display:table;
	background:url(../images/watch.jpg) center center;
	background-size:cover;
	width:100%;
}
.fixedleft6 {
	display:table;
	background:url(../images/junction.jpg) center center;
	background-size:cover;
	width:100%;
}
.fixedleft7 {
	display:table;
	background:url(../images/intergalactic.jpg) center center;
	background-size:cover;
	width:100%;
}
.fixedleft8 {
	display:table;
	background:url(../images/organics.jpg) center center;
	background-size:cover;
	width:100%;
}
.fixedleft9 {
	display:table;
	background:url(../images/render.jpg) center center;
	background-size:cover;
	width:100%;
}
.fixedleft10 {
	display:table;
	background:url(../images/bg-abstract.jpg);
	width:100%;
}
.fixedleft .middle, .fixedleft2 .middle, .fixedleft3 .middle , .fixedleft4 .middle, .fixedleft5 .middle, .fixedleft6 .middle, .fixedleft7 .middle, .fixedleft8 .middle, .fixedleft9 .middle, .fixedleft10 .middle  {
	padding:20%;
}
.fixedleft2 .middle img{	
	max-width:200px;
	margin:0 auto;
}
.fixedleft6 .middle img, .fixedleft8 .middle img{
	background:#fff;
	padding:5px;	
	width:100%
}
a.button {
/*	position:absolute;
	bottom:15%;
	right:15%;	*/
	margin-top:2em;
	display:block;
	text-align:center;
	z-index:300;
	border:1px solid white;
	padding:1em;
}
a.button:hover {
	background:rgba(255,255,255,0.2);
	color:#fff;
}
a.dark {
	border: 0px;
	background:rgba(0,0,0,0.25);	
}
a.dark:hover {
	background:rgba(0,0,0,0.5);
	color:#fff;
}
.contentright, .headinfo {
	overflow:auto;
	background:#fff;
}
.headinfo {
	padding: 12.1621621622%;	
}
.screen {
	overflow:auto;
	padding:8%;
}
.screen h3{
	margin:.5em 0;
}
.screen ul {	
	list-style:inside;
	list-style-image:url(../images/circle.png);	
}
.screen li {
	margin: .5em 0;	
}
.screen1 {
	background:url(../images/computer1.jpg) bottom right no-repeat;	
	background-size:cover;
}
.screen2 {
	background:url(../images/computer2.jpg) bottom right no-repeat;	
	background-size:cover;
}
.screen3 {
	background:url(../images/computer3.jpg) bottom right no-repeat;	
	background-size:cover;
}
.screen4 {
	background:url(../images/computer4.jpg) bottom right no-repeat;	
	background-size:cover;
}
.screen5 {
	background:url(../images/computer5.jpg) bottom right no-repeat;	
	background-size:cover;
}
.screen6 {
	background:url(../images/computer6.jpg) bottom right no-repeat;	
	background-size:cover;
}
.screen7 {
	background:url(../images/computer7.jpg) bottom right no-repeat;	
	background-size:cover;
}
.bluecontent {
	background:#45a399;
	overflow:auto;
}	
.special {
	padding:0 !important;	
}
.whitecontent {
	background:#fff;
	overflow:auto;
}
.whitecontent, .bluecontent {
	padding:8%;	
}
.bluecontent, .bluecontent p, .bluecontent h1, .bluecontent h2, .bluecontent h3, .bluecontent h4, .bluecontent h5 {
	display:block;
	color:#fff;	
}
.bluecontent h1, .bluecontent h2, .bluecontent h3, .bluecontent h4, .bluecontent h5 {
	color:#fff;	
	font-family:open_sansbold;
	text-transform:uppercase;
}
.whitecontent, .whitecontent p, .whitecontent h1, .whitecontent h2, .whitecontent h3, .whitecontent h4, .whitecontent h5 {
	color:#000;	
}
.whitecontent h1, .whitecontent h2, .whitecontent h3, .whitecontent h4, .whitecontent h5 {
	font-family:open_sansbold;
	text-transform:uppercase;
}
.whitecontent h3, .bluecontent h3 {
	margin-bottom:.5em;	
}
.icon {
	margin:20px;
	width:50px !important;
	vertical-align:middle;	
}
table {
	width:100%;	
	text-align:center;
	margin-top:2em;
	border-collapse: collapse;
}
.whitecontent table img {
	width:100%;
	max-width:120px;
	height:auto;
}
.bluecontent table img {
	width:100%;
	max-width:120px;
	height:auto;
}
tr, td {
	padding:.25em;		
}
td {
	width:33.33%;
}	
th {
	font-family:open_sansbold;
	font-weight:normal;
	font-size:1.5em;	
	text-align:left;
	padding-bottom:1em;
	
	}
.final {
	width:100%;	
}
.lasthead {
	display:block;
	float:left;
	margin:10px 0 ;
	width:100%;
}
.bottombox {
	width:100%;	
	overflow:auto;
	margin-bottom:2em;
}
.bottombox h3 {
	text-transform:lowercase;
}
.bottombox2 {
	width:100%;	
	overflow:auto;
}
.finalpic {
	width:100%;
}	
.full {
	display:none;	
}
.small {
	max-width:180px !important;	

}
@media (min-width:480px){
.project {
	height:40%;
	width:50%;
	border:none;
}
.project img {
	width:65%;
	height:auto;
}
.escape img {
	width:65%;
	height:auto;
}
.hso img {
	width:65%;
	height:auto;
}
.musiclogo {
	background:url(../images/MMlogo.svg) no-repeat center;
	height:80%;
	max-width:125px;
	margin: 0 auto;
	padding:30% 0;
}
.ok img, .threedee img, .junction img, .organics img   {
	width:50%;
}
.ok h1 {	
	font-size:1.25em;	
	
}
header {
	height:10%;	
}
.overlay {
	display:inline-block;
	max-height:2em;
}
.overlay h4 {
	font-size:1em;
}
header h2 {
	margin: .5em 2em;
	font-size:1.5em;
}
.lasthead {
	float:left;
}
.white {
	height:90%;	
}
.bottombox {
	width:45%;	
	margin-bottom:0em;
	float:left;
}
.bottombox2 {
	width:45%;	
	float:right;
}
.big {
	width:100%;
}
.full {
	display:block;	
}
.small {
	display:none;	
}
}

@media (min-width:780px){
.project {
	height:42.5%;
	width:25%;
}
.project img {
	width:65%;
	height:auto;	
}
.escape img {
	width:65%;
	height:auto;
}
.musiclogo {
	width: 50%;
	margin: 0 auto;
	padding:10% 0;
}
.ok img, .threedee img, .junction img, .organics img  {
	width:60%;
}
.ok h1 {
	font-size:1.5em;	
}
.overlay {
	max-height:2.25em;
}
.overlay h4 {
	font-size:1.25em;
}
header h2 {
	margin: .2em 2em;
	font-size:2em;
}
.contentright {
	height:100%;
	margin-left:33%;	
	overflow:auto;
}
.fixed {
	position:fixed;
	top:0;
	left:0;
	height:10.5%;
	z-index:200;	
}
.fixedleft, .fixedleft2, .fixedleft3, .fixedleft4, .fixedleft5, .fixedleft6, .fixedleft7, .fixedleft8, .fixedleft9, .fixedleft10 {
	display:table;
	position:absolute;
	top:10%;
	left:0;	
	width:33%;
	height:90%;
	z-index:100;
	float:left;
	overflow:hidden;
}
.headinfo {
	background:#fff;
	width:100%;
	padding: 12.1621621622%;
	margin-top:50px;	
}
.big {
	height:85%;
}
.full {
	display:block;	
}
.small {
	display:none;	
}
}