/* GENERAL =========================== */
/* ================================= */
.touchevents .text-style p a:link,
.touchevents .text-style li a:link {
    border-bottom: 1px solid rgba(0, 0, 0, 0.21);
}



/* MENU =========================== */
/* ================================= */
@media all and (max-width: 1200px) {
	header .logo .logo-light svg path {
		fill: #fff;
	}
	header .logo .logo-dark svg path {
		fill: #000;
	}

	.menuOn header .logo .logo-light {
		clip: rect(0px 53px 53px 0px);
	}
	.menuOn header .logo .logo-dark {
		clip: rect(53px 53px 53px 0px);
	}

	.menu-overlay {
		left: 0;
	}
		header nav ul > li {
			font-size: 4rem;
		}
}

@media all and (max-width: 414px) {
	header nav ul > li {
		font-size: 3rem;
	}
}

@media all and (max-width: 750px) and (orientation: landscape) {
	header nav ul > li {
	    font-size: 1.6rem;
	}
}


/* HEADER =========================== */
/* ================================= */

@media all and (max-width: 950px) {

	body.galleryStart .hold-bread {
		opacity: 0;
		z-index: -1;
		-webkit-transition: opacity .3s 0s, z-index 0s .3s, -webkit-transform .2s .3s;
		transition: opacity .3s 0s, z-index 0s .3s, -webkit-transform .2s .3s;
		-o-transition: transform .2s .3s, opacity .3s 0s, z-index 0s .3s;
		transition: transform .2s .3s, opacity .3s 0s, z-index 0s .3s;
		transition: transform .2s .3s, opacity .3s 0s, z-index 0s .3s, -webkit-transform .2s .3s;
	}
	body.tweakBread .hold-bread {
		opacity: 1;
		z-index: 10;
		-webkit-transition: opacity .3s 0s, z-index 0s 0s, -webkit-transform .2s .3s;
		transition: opacity .3s 0s, z-index 0s 0s, -webkit-transform .2s .3s;
		-o-transition: transform .2s .3s, opacity .3s 0s, z-index 0s 0s;
		transition: transform .2s .3s, opacity .3s 0s, z-index 0s 0s;
		transition: transform .2s .3s, opacity .3s 0s, z-index 0s 0s, -webkit-transform .2s .3s;
	}

	body.galleryStart header {
		opacity: 0;
		z-index: -99;
		-webkit-transition: opacity .3s 0s, z-index 0s .3s;
		-o-transition: opacity .3s 0s, z-index 0s .3s;
		transition: opacity .3s 0s, z-index 0s .3s;
	}

	body.tweakBread header {
		opacity: 1;
		z-index: 10;
		-webkit-transition: opacity .3s 0s, z-index 0s 0s;
		-o-transition: opacity .3s 0s, z-index 0s 0s;
		transition: opacity .3s 0s, z-index 0s 0s;
	}

}

@media all and (max-width: 640px) {
	
	header {
		position: fixed;
	    top: 0;
	    left: 0;
	}

	.logo-crumb {
		left: 6%;
	}

	.hold-bread {
		left: calc(6% + 60px);
		padding-left: 0px;
	}

	.menuBtn,
	.fixHeader .home .menuBtn {
		right: 6%;
	}

	.menuTarget,
	.fixHeader .home .menuTarget {
	    right: 0;
	}

}

@media all and (max-width: 580px) {

	.hold-bread {
		width: calc(100% - 152px);
	}

}

/* SLIDESHOW =========================== */
/* ================================= */
@media all and (max-width: 640px) {

	.slideshowON .ui.next,
	.slideshowON .ui.prev {
		opacity: .5;
	}

		.slideshowON .ui.slick-arrow line {
			stroke: #ffffff;
		}

}

/* INFO =========================== */
/* ================================= */
@media all and (max-width: 768px) {

	form input {
		font-size: 16px;
		display: block;
		margin: 0 0px 11px 0;
		max-width: none;
		text-align: center;
		height: 52px;
	}

	form input[type="email"],
	form input[placeholder="Company"] {
		max-width: none;
	}
	
	form input[type="submit"] {
		margin: auto;
	}

}

@media all and (max-width: 950px) {

	.about .hold-bread {
		display: none;
	}

	.solid-header header .inner {
	    position: relative;
	    z-index: 2;
	    background-color: #ffffff;
	    height: 82px;
	    -webkit-box-sizing: border-box;
	            box-sizing: border-box;
	    border-bottom: 1px solid #666;

	    -webkit-transition: background-color .3s 0s, border-bottom .3s 0s;

	    -o-transition: background-color .3s 0s, border-bottom .3s 0s;

	    transition: background-color .3s 0s, border-bottom .3s 0s;
	}

	.solid-header.menuOn header .inner {
		background-color: transparent;
		border-bottom: 1px solid transparent;
	}

	.solid-header .about {
	    /*padding-top: 82px;*/
	}

	.solid-header header .logo .logo-light,
	.solid-header.menuOn header .logo .logo-dark {
	    clip: rect(0px 53px 0px 0px) !important;
	}

	.solid-header header .logo .logo-dark,
	.solid-header.menuOn header .logo .logo-light {
	    clip: rect(0px 53px 53px 0px) !important;
	}

	.solid-header .menuBtn .menu-light,
	.solid-header.menuOn .menuBtn .menu-dark {
	    clip: rect(0px 40px 0px 0px) !important;
	}

	.solid-header .menuBtn .menu-dark,
	.solid-header.menuOn .menuBtn .menu-light {
	    clip: rect(0px 40px 27px 0px) !important;
	}


	.about #hero {
		position: relative;
		width: 100%;
		height: auto !important;
	}

	.about .layer2 {
		position: relative;
		top: 0 !important;
		height: auto;
	}

		.text-style, .mod-centered {
			padding: 68px 0px;
		}

}


/* MOTION ========================== */
/* ================================= */

@media all and (max-width: 414px) {

	#thumbs.grid-3 .cell {
		width: 100% !important;
	}

}


/* CASE STUDIES ==================== */
/* ================================= */
@media all and (max-width: 450px) {

	.overview .case-studies .grid-1 .row .cell {
		width: 100%;
		display: none;
		float: none;
	}

	.overview .case-studies .grid-1 .row .cell:nth-child(2) {
		display: block;
		width: 100% !important;
	}

		.overview .case-studies .grid-1.full-width-hovers figcaption {
		    top: auto;
		    right: auto;
		    bottom: 0;
		    left: 0;
		    width: 88%;
		    padding: 20px 6%;
		    z-index: 2;
		    background-color: transparent;
		    opacity: 1;
		    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+100 */ /* FF3.6-15 */
		    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
		    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),to(rgba(0,0,0,0.5)));
		    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
		    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
		}

		.overview .case-studies .grid-1.full-width-hovers figcaption h2 {
		    font-weight: 400;
		    letter-spacing: 0.4em;
		    font-size: 0.8rem;
		    width: 100%;
		}

}


/* CASE STUDY (DETAIL) ============= */
/* ================================= */

@media all and (max-width: 670px) {

	.mod-text.fullwidth .beef {
		width: 88%;
	}

	.module + .module {
	    padding-top: 68px;
	    padding-bottom: 68px;
	}

	.detail .case-studies .grid-1 .row .cell {
		width: 100% !important;
		display: block;
		float: none;
	}

	#project-nav .back2top {
	    position: relative;
	    top: 0;
	    left: 50%;
	    -webkit-transform: translate(-50%, 0%);
	        -ms-transform: translate(-50%, 0%);
	            transform: translate(-50%, 0%);
	    text-align: center;
	    padding-bottom: 50px;
	}

	#project-nav a {
		position: relative;
		display: block;
		width: 100%;
		top: 0;
		-webkit-transform: none;
		    -ms-transform: none;
		        transform: none;
		text-align: center;
		padding-bottom: 50px;
	}

		#project-nav .mobileOnly {
			display: block;
		    letter-spacing: 0.4em;
		    font-size: 0.7rem;
		    padding-bottom: 1em;
		    opacity: .5;
		}

		#project-nav a svg {
			display: none;
		}

		#project-nav a span {

		}

	#project-nav a.prev {
		left: 0;
	}

	#project-nav a.next {
		right: 0;
	}

}