/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
	/*
		88        88                                   88                          
		88        88                                   88                          
		88        88                                   88                          
		88aaaaaaaa88   ,adPPYba,  ,adPPYYba,   ,adPPYb,88   ,adPPYba,  8b,dPPYba,  
		88""""""""88  a8P_____88  ""     `Y8  a8"    `Y88  a8P_____88  88P'   "Y8  
		88        88  8PP"""""""  ,adPPPPP88  8b       88  8PP"""""""  88          
		88        88  "8b,   ,aa  88,    ,88  "8a,   ,d88  "8b,   ,aa  88          
		88        88   `"Ybbd8"'  `"8bbdP"Y8   `"8bbdP"Y8   `"Ybbd8"'  88        
	*/
	html,
	body {
		margin:0;
		padding:0;
		height:100%;
		/*background-color: #1a1a1a;*/
	}
	#wrapper {
		min-height:100%;
		position:relative;
	}
	#content-control{
		padding-bottom:70px; /* Height of the footer element */
	}
	header {
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		width: 100%;
		height: 70px;
		display: inline-block;
		overflow: hidden;
		background-color: #2a2a2a;
		color: #fff;
		z-index: 25;
	}
	footer {
		background-color: ;	
		color: #ddd;
		width:100%;
		height:40px;
		position:absolute;
		bottom:0;
		left:0;
	}
	.footerbox {
		margin: 8px 8px 8px 16px;
	}
	.cushion {
		position: top;
		margin: 0 0 10px 0;
		height: 80px;
		width: 100%;
		display: block;
	}
	.headercushion{
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		position: relative;
		display: inline-block;
		width: 20px;
		height: 100%;
		float: right;
		background-color: none;
	}
	.logo {
		float: left;
		margin: 10px 0px;
		padding: 15px 10px;
		width: auto;
		height: auto;
		display: block;
		position: relative;
		background-color:;
		font-family: BoneBlackletter;
		font-size: 52px;
		/*background-image: url(../images/MA-logo.jpg);*/
		background-repeat: no-repeat;
		cursor: pointer;
	}
	
	.menubutton {
		float: center;
		text-align: center;
		padding: 0px 0px 10px 1px;
		margin: 0 auto 0px auto;
		height: ;
		width: ;
		color: #2a2a2a;
		display: inline-block;
		background-color: ;
		overflow: hidden;
		z-index: ;
		font-weight: ;
		border-bottom: 1px solid #2a2a2a;
		border-top: 0px solid #2a2a2a;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
		font-family: ;
		font-size: 14px;
		font-weight: ;
		letter-spacing: ;
	}
	.menubutton:hover {
		background-color: ;
	}
	.pagetitle {
		width: ;
		margin: 0 20px;
		height: 100%;
		text-align: center;
		line-height: ;
		color: #fff;
		float: right;
		display: inline-block;
		border-left: 0px solid #ddd;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
	}
	.websitetitle {
		width: ;
		margin: 0 0px;
		height: 100%;
		text-align: center;
		line-height: ;
		color: #fff;
		float: left;
		display: inline-block;
		border-left: 0px solid #ddd;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
	}
	/*.mainmenubuttontitle {
		float: left;
		text-align: center;
		padding: 10px 0px 0px 1px;
		margin: 17px auto 0px auto;
		position: relative;
		height: ;
		width: ;
		color: #fff;
		display: inline-block;
		background-color: ;
		overflow: hidden;
		z-index: 25;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
		font-family: "BoneBlackletter";
		font-size: 48px;
		font-weight: ;
		letter-spacing: ;
	}*/
	.mainmenu {
		width: ;
		margin: 0 20px;
		height: 100%;
		text-align: center;
		line-height: ;
		color: #fff;
		float: right;
		display: inline-block;
		border-left: 0px solid #ddd;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
	}
	.mainmenubuttonnull {
		float: center;
		text-align: center;
		padding: 10px 0px 0px 0px;
		margin: 17px auto 0px auto;
		position: relative;
		height: ;
		width: ;
		color: #fff;
		letter-spacing: 1px;
		font-weight: ;
		display: inline-block;
		background-color: ;
		overflow: hidden;
		z-index: 25;
		border-bottom: 0px solid #ddd;
		border-top: 1px solid #ddd;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
		font-family: ;
		font-size: 14px;
		font-weight: ;
		letter-spacing: ;
	}
	.mainmenubutton {
		float: center;
		text-align: center;
		padding: 0px 0px 10px 0px;
		margin: 17px auto 0px auto;
		position: relative;
		height: ;
		width: ;
		color: #fff;
		letter-spacing: 1px;
		font-weight: ;
		display: inline-block;
		background-color: ;
		overflow: hidden;
		z-index: 25;
		border-bottom: 1px solid #ddd;
		border-top: 0px solid #ddd;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
		font-family: ;
		font-size: 14px;
		font-weight: ;
		letter-spacing: ;
	}
	.menuswitch {
		float: right;
		margin: 0;
		width: 70px;
		height: 70px;
		display: none;
		background-color: #2a2a2a;
		border-left: 1px solid #ddd;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box;
	}
	.menuswitch:hover {
		background-color: #ddd !important;
		border-left: 1px solid #2a2a2a ;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		
	}
	.isDown {
		border-left: 1px solid #2a2a2a ;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.menuicon {
		margin: 20px auto;
		position: relative;
		border-bottom: 17px double #ddd; 
	    border-top: 6px solid #ddd; 
	    content:"";
	    height: 5px; 
	    width:30px;
	}
	.menuiconactive {
		margin: 20px auto;
		position: relative;
		border-bottom: 17px double #2a2a2a; 
	    border-top: 6px solid #2a2a2a; 
	    content:"";
	    height: 5px; 
	    width:30px;
	}
	.menuiconhover{
		margin: 20px auto;
		position: relative;
		border-bottom: 17px double #2a2a2a; 
	    border-top: 6px solid #2a2a2a; 
	    content:"";
	    height: 5px; 
	    width:30px;
	}

	.menuiconwrapper {
		float: left;
		margin: 20px;
		width: 30px;
		height: 30px;
		display: block;
		background-image: url('');
	}
	.menu {
		width: 100%;
		height: 70px;
		margin: 0px 0 0 0;
		padding: ;
		display: none;
		background-color: #ddd;
		color: #2a2a2a;
		text-align: center;
		z-index: 20;
		overflow: hidden;
	}
	.menuitem {
		width: 33.33%;
		height: 100%;
		float: left;
		position: relative;
		padding-top: 17px;
		background-color: ;
		display: inline-block;
		z-index: 20;
		font-weight: ;
	}
	.menuitem:hover{
		color: ;
		background-color: ;
		font-weight: ;
		text-decoration: ;
	}
	#workbutton {
	}
	#aboutbutton {
	}
	#contactbutton {
	}
	#blogbutton {
	}
	.selector:first-child {
		
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	.selector:last-child {
		border-right: 0 !important;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}
	.selected:first-child {
		border-right: 0 !important;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	.selected:last-child {
		border-right: 0 !important;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}
	.director:last-child {
		border-right: 0 !important;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}
	.director:first-child {
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	.controler {
		width: 100%;
		margin: 0 auto 20px auto;
		position: relative;
		float: left;
		height: 50px;
		padding: ;
		border: 1px solid #ddd;
		color: #ddd;
		background-color: ;
		display: block;		
		text-decoration: none;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
		-webkit-border-radius: 5px ;
        -moz-border-radius: 5px ;
        border-radius: 5px ;
        overflow: hidden ;
	}
	.controler:hover {
		border: 1px solid #2a2a2a;
		color: #2a2a2a;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	.right-arrow-icon{
		margin: 0 auto;
		padding: ;
		width: 20px;
		height: 20px;
		position: relative;
		display: inline-block;
		background-color: inherit !important;
		-webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    transform: rotate(45deg);
	    border-top: 1px solid #ddd;
	    border-right: 1px solid #ddd;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;    
		box-sizing: border-box;
	}
	.left-arrow-icon{
		margin: 0 auto;
		padding: ;
		width: 20px;
		height: 20px;
		position: relative;
		display: inline-block;
		background-color: inherit !important;
		-webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    border-top: 1px solid #ddd;
	    border-left: 1px solid #ddd;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;    
		box-sizing: border-box;
	}
	.gridbox {
		margin: 0 auto;
		padding: ;
		width: 27px;
		height: 27px;
		position: relative;
		display: inline-block;
		top: -3px;
		background: none;
	}
	.grid-1 {
		margin: ;
		padding: ;
		width: 12px;
		height: 12px;
		position: absolute;
		display: inline-block;
		background: none;
		top: 0;
		left: 0;
		border: 1px solid #ddd;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	.grid-2 {
		margin: ;
		padding: ;
		width: 12px;
		height: 12px;
		position: absolute;
		display: inline-block;
		background: none;
		top: 0;
		right: 0;
		border: 1px solid #ddd;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	.grid-3 {
		margin: ;
		padding: ;
		width: 12px;
		height: 12px;
		position: absolute;
		display: inline-block;
		background: none;
		bottom: 0;
		left: 0;
		border: 1px solid #ddd;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	.grid-4 {
		margin: ;
		padding: ;
		width: 12px;
		height: 12px;
		position: absolute;
		display: inline;
		background-color: inherit !important;
		bottom: 0;
		right: 0;
		border: 1px solid #ddd;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	.arrowbox {
		margin: 30% 50%;
		padding: ;
		width: ;
		height: ;
		position: relative;
		display: inline-block;
		right: ;

	}
	.arrowbox-r {
		margin: 0 auto;
		padding: ;
		width: ;
		height: ;
		position: relative;
		display: inline-block;
		left: 5px;
		top: -5px;

	}
	.arrowbox-l {
		margin: 0 auto;
		padding: ;
		width: ;
		height: ;
		position: relative;
		display: inline-block;
		right: 0px;
		top: -5px;

	}
	#arrow-select{
	  position: absolute;
	  padding: 15px;
	  display: ;
	  margin: 0 auto;
	}
	#arrow-select:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 2px;
	  background: #ddd;
	  -webkit-transform: skew(45deg, 0deg);
	  -moz-transform: skew(45deg, 0deg);
	  -ms-transform: skew(45deg, 0deg);
	  -o-transform: skew(45deg, 0deg);
	  transform: skew(45deg, 0deg);
	}
	#arrow-select:after {
	  content: '';
	  position: absolute;
	  top: 100%;
	  left: 0;
	  height: 100%;
	  width: 2px;
	  background: #ddd;
	  -webkit-transform: skew(-45deg, 0deg);
	  -moz-transform: skew(-45deg, 0deg);
	  -ms-transform: skew(-45deg, 0deg);
	  -o-transform: skew(-45deg, 0deg);
	  transform: skew(-45deg, 0deg);
	}​

	#arrow-right{
	  position: absolute;
	  padding: 0px;
	  display: ;
	  margin: 0 auto;
	}
	#arrow-right:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 75%;
	  width: 2px;
	  background: #ddd;
	  -webkit-transform: skew(45deg, 0deg);
	  -moz-transform: skew(45deg, 0deg);
	  -ms-transform: skew(45deg, 0deg);
	  -o-transform: skew(45deg, 0deg);
	  transform: skew(45deg, 0deg);
	}
	#arrow-right:after {
	  content: '';
	  position: absolute;
	  top: 75%;
	  left: 0;
	  height: 75%;
	  width: 2px;
	  background: #ddd;
	  -webkit-transform: skew(-45deg, 0deg);
	  -moz-transform: skew(-45deg, 0deg);
	  -ms-transform: skew(-45deg, 0deg);
	  -o-transform: skew(-45deg, 0deg);
	  transform: skew(-45deg, 0deg);
	}​

	#arrow-left{
	  position: absolute;
	  padding: 0px;
	  content: '';
	  margin: 0 auto;

	}
	 
	#arrow-left:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 75%;
	  width: 2px;
	  background: #ddd;
	  -webkit-transform: skew(-45deg, 0deg);
	  -moz-transform: skew(-45deg, 0deg);
	  -ms-transform: skew(-45deg, 0deg);
	  -o-transform: skew(-45deg, 0deg);
	  transform: skew(-45deg, 0deg);
	}
	#arrow-left:after {
	  content: '';
	  position: absolute;
	  top: 75%;
	  right: 60%;
	  height: 75%;
	  width: 2px;
	  background: #ddd;
	  -webkit-transform: skew(45deg, 0deg);
	  -moz-transform: skew(45deg, 0deg);
	  -ms-transform: skew(45deg, 0deg);
	  -o-transform: skew(45deg, 0deg);
	  transform: skew(45deg, 0deg);
	}



	


/* #Page Styles
================================================== */

	.director {
		width: 33.33%;
		height: 100%;
		margin: 0 auto 20px auto;
		position: relative;
		float: left;
		text-align: center;
		padding: 15px 0 15px 0;
		color: inherit;
		background-color: #fff;
		display: inline-block;
		overflow: hidden;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: inherit !important;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
		/*-webkit-border-radius: 10px ;
        -moz-border-radius: 10px ;
        border-radius: 10px ;*/
	}
	/*.director:first-child {
		-webkit-top-left-border-radius: 10px ;
        -moz-top-left-border-radius: 10px ;
        top-left-border-radius: 10px ;
        -webkit-bottom-left-border-radius: 10px ;
        -moz-bottom-left-border-radius: 10px ;
        bottom-left-border-radius: 10px ;

	}*/
	.director:hover {
		color: #fff;
		background-color: #2a2a2a;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: inherit;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
		
	}
	
	.selector {
		width: 25%;
		height: 100%;
		margin: 0 auto 20px auto;
		position: relative;
		float: left;
		text-align: center;
		padding: 15px 0 15px 0;
		color: inherit;
		background-color: #fff;
		display: inline-block;
		overflow: hidden;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: inherit !important;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;


	}
	.selector:hover {
		color: #fff;
		background-color: #2a2a2a;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: inherit;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
		
	}
	.null {
		width: 33.33%;
		height: 100%;
		margin: 0 auto 20px auto;
		position: relative;
		float: left;
		text-align: center;
		padding: 15px 0 15px 0;
		color: inherit;
		background-color: #fff;
		display: inline-block;
		overflow: hidden;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: none !important;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	
	.selected {
		width: 25%;
		height: 100%;
		margin: 0 auto 20px auto;
		position: relative;
		float: left;
		text-align: center;
		padding: 15px 0 15px 0;
		color: white;
		background-color: #ddd;
		display: inline-block;
		overflow: hidden;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: inherit !important;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	.selected:hover {
		color: #fff;
		background-color: #2a2a2a;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: inherit;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
		
	}
	.selectedhover {
		width: 25%;
		height: 100%;
		margin: 0 auto 20px auto;
		position: relative;
		float: left;
		text-align: center;
		padding: 15px 0 15px 0;
		color: white;
		background-color: #2a2a2a;
		display: inline-block;
		overflow: hidden;
		border-top:0; 
		border-left:0;
		border-bottom: 0;
		border-right: inherit !important;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	.project {
		background-color: #fff;
		color: #ddd;
		display: block;
		padding: ;
		height: auto;
		width: 100%;
		bottom: 0;
		position: ;
		display: inline-block;
		border-top: 0px solid #ddd;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		/*-webkit-border-radius: 3px ;
        -moz-border-radius: 3px ;
        border-radius: 3px ;*/
		/*border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		top-bottom-left-radius: 5px;
		top-bottom-right-radius: 5px;*/
	}


	.placeholder {
		background-color: #ddd;
		height: 300px;
		width: 100%;
		margin: 10px 0 20px 0;
		display: inline-block;
	}
	.placeholder:hover {
		background-color: #2a2a2a;
	}
	/*.project:hover {
		background-color: #000;
	}*/

	/*.video {
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		max-height: 100%;
	}*/

	


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 979px) {

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 788px) and (max-width: 979px) {
		.project {
			
			
		}

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 787px) {
		.project {
			
		}
		.menuswitch {
			display: block;			
		}
		
		.menu {
			display: inline-block;
		}
		.mainmenu{
			display: none;
		}


	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 787px) {
		.project {
			
			
		}

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.arrowbox {
			margin: 25px 153px;
			padding: ;
			width: ;
			height: ;
			position: relative;
			display: inline-block;
			right: ;
			top: -7px;
		}
		#arrow-select{
		  position: absolute;
		  padding: 0px;
		  display: ;
		  margin: 0 auto;
		}
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }