.mobileOnly {
	display: inline-block !important;
	*display: inline;
	zoom: 1;
}

.desktopOnly {
	display: none !important;
}

#header .inner {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

#header .inner .logo {
	padding-left: 4%;
	padding-top: 26px;
}

#header .trigger {
	height: auto;
	width: 30px;
	position: absolute;
	top: 24px;
	right: 6%;
	z-index: 50;
	cursor: pointer;
}

	.trigger .menuButton {
		display: inline-block;
		*display: inline;
		zoom: 1;
		vertical-align: middle;
		width: 30px;
	}

		.trigger .menuButton .line {
			position: relative;
			top: 0px;
			right: 0px;
			display: block;
			width: 100%;
			height: 2px;
			margin-bottom: 6px;
			background-color: rgba(0,0,0,1);
			transition: all .3s;
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
		}

		.trigger .menuButton .line:last-child {
			margin-bottom: 0px;
		}

		/*3 lines --> X animation*/
		.menuOpen .menuButton .line:first-child {
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			top: 7px;
		}

		.menuOpen .menuButton .line:nth-child(2) {
			opacity: 0;
		}

		.menuOpen .menuButton .line:last-child {
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			top: -9px;
		}
		
#header .nav {
	display: none;
	width: 100%;
	position: absolute;
	background-color: #faf8f9;
}

	.menuOpen #header {
		background-color: #faf8f9;
	}

	.menuOpen #header .nav {
		display: block;
		padding-top: 25px;
		padding-bottom: 25px;		
	}
	
#header .inner ul.nav li {
    margin-right: 0px;
    letter-spacing: 0.04em;
    font-size: 20px;
    display: block;
	width: 100%;
	text-align: center;
	font-weight: 300;
	color: #666;
}

	#header .inner ul.nav li a {
		padding: 10px 0px;
		display: block;
	}
		
		
#footer .inner {
	padding: 50px 0px;
}
		
#footer img {
	margin-bottom: 10px;
}
		
#grid {
	width: 100%;
	top: 0px;
}

	#grid li .hover h1 {
		font-size: 5vw;
	}
	
#magic {
	width: 92%;
	padding-top: 15px;
}

	#magic a {
		display: block;
		width: 100%;
		margin-bottom: 15px;
		position: relative;
	}
	
	#magic a img {
		width: 100%;
		height: auto;
	}
	
	#magic > a > .caption,
	#magic > div > .caption {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  bottom: 0;
	  padding: 0px;
	  left: 0;
	  margin: 0;
	  color: white;
	  font-weight: 300;
	}

	#magic > a > .caption h1 {
		color: #fff;
		width: 90%;
		margin-left: 5%;
		font-size: 125%;
		font-weight: 300;
	}

		#magic > a > .caption h1 a {
			text-align: left;
			color: #fff;
		}
	
.portfolio .breadcrumb {
	position: relative;
	z-index: 100;
	margin: 70px 0px 0px 4%;
	color: #666;
	
	font-size: 100%;
	font-weight: 400;
}
	
.portfolio .submenu {
	display: none;
}

.stories #magic .caption {
	opacity: 1 !important;
	position: relative;
	height: auto;
	color: #000;
}

	.stories #magic .caption:before {
		display: none;
	}

	.stories #magic .caption h1 {
		font-size: 14px;
		color: #666;
		margin-left: 0%;
		width: 100%;
	}

.videos #grid {
	top: 70px;
	margin-bottom: 70px;
}

.videos .grid-sizer, .videos .cell {
	width: 100% !important;
	margin-bottom: 2px !important;
}

.videos .gutter-sizer {
	width: 0px;
}

.videos #grid li .hover h1 {
	font-size: 9vw;
}

.info #content .textHolder {
	width: 92%;
	margin: 70px auto 0px auto;
	font-size: 75%;
	line-height: 1.7;
}

.info.cols2 #content .textHolder .col.col1 {
	width: 94%;
	text-align: left;
	border-right: 0px;
	padding-right: 0%;
}

.info.cols2 #content .textHolder .col.col2 {
	width: 94%;
	margin-left: 0%;
}

.info.cols3 #content .textHolder .col.col1 {
	width: 94%;
	padding-right: 0%;
}

.info.cols3 #content .textHolder .col.col2 {
	width: 94%;
	border: 0px;
	padding: 0%;
}

.info.cols3 #content .textHolder .col.col3 {
	width: 94%;
	padding-left: 0%;
}

.video #content {
	width: 92%;
	margin: 70px auto 0px auto;
}

	.video #content .breadcrumb {
		color: #666;		
		font-size: 100%;
		font-weight: 400;
	}
	
.video #content .details .col {
	width: 100%;
	margin-right: 0px;
}

.video #content .details .col:last-child {
	text-align: left;
}



/* BLOG ================ */
/* ===================== */

.post figure img {
    width: 100% !important;
}

.mod-text {
    margin: 0 auto 50px;
}

.mod-grid .grid-sizer {
	width: 100%;
}

.mod-grid .gutter-sizer {
	width: 0%;
}

.mod-grid li {
	width: 100%;
	opacity: 0;
}

@media screen and (max-width: 413px) {
	/* anything less than an iPhone 6+ */
	.post {
		text-align: left;
	}
		.post:before {
			margin: 0 0 23px 0;
		}
}



/* FINE ART ================ */
/* ========================= */

/*overview grid*/
.grid.fineart #grid {
    width: 92%;
}

.grid.fineart #grid .grid-sizer {
	width: 100%;
}

.grid.fineart #grid .cell {
	width: 100% !important;
	margin-bottom: 32px !important;
}

.grid.fineart #grid .gutter-sizer {
	width: 0%;
}

.grid.fineart #grid .cell .caption {
    position: relative;
    opacity: 1;
    bottom: 0;
    top: 0;
    left: 0;
    color: black;
    background-color: transparent;
}

	.grid.fineart #grid .cell .caption:before {
		display: none;
	}

.grid.fineart #grid .cell .caption .holder {
    width: 100%;
}

.grid.fineart #grid .cell .caption .holder * {
    color: #000000;
}

.grid.fineart #grid .cell .caption .holder h1 {
	width: 100%;
	margin-left: 0%;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: .05em;
	padding-top: 0.6em;
}


/*project grid*/
@media screen and (max-width: 413px) {
	/* anything less than an iPhone 6+ */
	.fineart .gridintro {
		text-align: left;
	}
		.fineart .gridintro:after {
			margin: 23px 0 0;
		}

}

.fineart.slideshow .trigger.mobileOnly,
.fineart.magic .trigger.mobileOnly {
	display: none !important;
}

#crumb {
	position: absolute;
    right: auto;
    top: 66px;
    left: 4%;
    width: 64%;
    height: auto;
    padding: 16px 0px;
    z-index: 390;
    line-height: 1.4;
}

/*slideshow*/
.fineart.slideshow .slideHolder .cycle-slideshow {
	top: 140px;
}

#showInfo {
	position: absolute;
	left: auto;
	right: 4%;
	top: 66px;
	bottom: auto;
	padding: 16px 0px;
	text-align: right;
	-webkit-transform: none;
		-ms-transform: none;
			transform: none;
}

	#showInfo > span:last-child span:first-child {
		left: auto;
		right: 0;
	}

	#showInfo > span:first-child {
		position: relative;
		-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
				transform: rotate(0deg);
		left: 20px;
	}

	.infoOn #showInfo > span:first-child {
		-webkit-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
		left: 0px;
	}


.slideshow .projectInfo {
    top: 140px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

	.slideshow .projectInfo:before {
		display: none;
	}

	.slideshow .projectInfo > div {
	    padding-bottom: 190px;
	}