@media screen
and (max-width: 900px) {

	.mobileOnly {
		display: block !important;
	}

	.desktopOnly {
		display: none !important;
	}



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

	header {
	    height: 51px !important;
	}

		header:before {
			display: none !important;
		}

	header .logo {
		left: 6%;
		top: 50%;
		z-index: 50;
		width: 194px;
		height: auto;
		line-height: 1;
		position: absolute;
		-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
				transform: translateY(-50%);
	}

		header .logo svg {
			
		}

	header .inner.mobileOnly {
	    display: block !important;
	    width: 100%;
	    height: 51px;
	    background-color: #fff;
	    position: relative;
	    z-index: 5;
	    border-bottom: 1px solid #d7d7d7;
	}

	.menuOpen header .inner.mobileOnly {

	}

	header ul.nav {
		position: absolute;
		height: auto;
		width: 100%;
		display: block;
	    top: 51px;
	    left: 0px;
	    z-index: 4;
	    padding-top: 3%;
        padding-bottom: 8%;
		background-color: #fff;
		border-bottom: 1px solid transparent;
		text-align: center;
		-webkit-transform: translateY(-100%);
			-ms-transform: translateY(-100%);
				transform: translateY(-100%);

		transition-property: transform, border-bottom;
		transition-duration: .3s, .3s;
		transition-delay: 0s, 0s;
	}

	.menuOpen header .nav {
		border-bottom: 1px solid #d7d7d7;

		-webkit-transform: translateY(0%);
			-ms-transform: translateY(0%);
				transform: translateY(0%);


		transition-property: transform, border-bottom;
		transition-duration: .3s, .3s;
		transition-delay: 0s, 0s;
	}

		header ul.nav:before {
			display: none;
		}

			header .nav li {
			    display: block;
		        margin: 33px 6% !important;
			    font-size: 16px;
			    height: auto;
			}

				header .nav li a {
					display: block;
					border: 0px;
					margin-right: 0px;
					height: auto;
					padding-bottom: 0px !important;
					border-bottom: none !important;
				}

	header ul.nav p.credit {
		color: #909090;
		font-size: 10px;
		letter-spacing: .03em;
		padding-top: 14px;
	}

		header .trigger {
			height: auto;
			width: 24px;
			position: absolute;
			top: 50%;
			right: 6%;
			z-index: 50;
			cursor: pointer;
			-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
					transform: translateY(-50%);
		}

			.trigger .menuButton {
				width: 24px;
			}

				.trigger .menuButton .line {
					position: relative;
					top: 0px;
					right: 0px;
					display: block;
					width: 100%;
					height: 1px;
					margin-bottom: 5px;
					background-color: #636363;
					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: 6px;
				}

				.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: -6px;
				}


	.menuOverlay {
		display: block;
		width: 100%;
		height: 150%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: -10;
		opacity: 0;
		background-color: rgba(255,255,255,.8);

		transition-property: opacity, z-index;
		transition-duration: .3s, 0s;
		transition-delay: 0s, .3s;
	}

	.menuOpen .menuOverlay {
		opacity: 1;
		z-index: 200;
		
		transition-property: opacity, z-index;
		transition-duration: .3s, 0s;
		transition-delay: 0s, 0s;
	}




	/* ================ */
	/* ==== GENERAL === */
	/* ================ */

	#wrapper {
		margin-bottom: 0px;
		padding-top: 74px;
	}

		#wrapper:after, footer {
			display: none;
		}





	/* ============= */
	/* ==== GRID === */
	/* ============= */

	#grid {
		width: 88%;
	}

		#grid .grid-sizer {
			width: 46.59%;
		}

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

		#grid li, #grid li.large {
			width: 46.6%;
		}



	/* ======================= */
	/* ==== PORTFOLIO GRID === */
	/* ======================= */

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

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

	.storyOverview #grid li {
		width: 100%;
		margin-bottom: 8% !important;
	}

		.storyOverview .cell .title {
		    font-size: 12px;
		    padding: 10px 15%;
		    width: 70%;
		    letter-spacing: .1em;
		}




	/* ================= */
	/* ==== LIGHTBOX === */
	/* ================= */

	/*NOT SHOWING THIS ON MOBILE*/
	.lbTools {
	    position: fixed;
	    z-index: 40;
	    top: 52px !important;
	    left: 0px;
	    background-color: #fff;
	    text-align: center;
	    height: 40px;
	    width: 100%;
	    margin: 0%;
	    border-bottom: 1px solid #ebebeb;
	    -webkit-transition: none !important;
	    	-ms-transition: none !important;
	    		transition: none !important;
	}




	/* ================== */
	/* ==== SLIDESHOW === */
	/* ================== */

	.slideshow header {
	    height: 51px !important;
	}

	.slideshow #wrapper {
		top: 52px;
	}

		.breadcrumb {
			position: absolute;
			top: 22px;
			left: 6%;
			z-index: 200;
		}

			.breadcrumb .shape {
				width: 18px;
				margin-right: 8px;
			}

				.breadcrumb .shape span {
					float: left;
					width: 4px;
					height: 4px;
					background-color: #cccccc;
					margin: 0px 2px 2px 0px;
				}
				
		.breadcrumb .itemtext {
			display: inline-block !important;
			*display: inline;
			zoom: 1;
			border-left: 1px solid #ccc;
			border-right: 0px;
			color: #444;
			margin-left: 12px;
			padding-left: 13px;
		}
		
		.breadcrumb .itemtext a {
			text-decoration: none;
		}

		.swipe {
			overflow: hidden;
			visibility: hidden;
			position: relative;
			height: 100%;
		}

		.swipe-wrap {
		    overflow: hidden;
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    width: 100%;
		    height: 100%;
		}

		.swipe-wrap > div {
			float:left;
			width:100%;
			height: 100%;
			position: relative;
		}

		#slider .cell.cycle-sentinel {
			z-index: -100;
		}

		#slider .cell .inner {
			position: relative;
			width: 100%;
		}

			#slider .cell .holder {
				padding-top: 0px;
				opacity: 0;
				position: absolute;
			    top: 22px;
				left: 6%;
				max-width: 100%;
				text-align: left;
			}

			.slideshow.info-tearsheets #slider .cell .holder {
				top: 42px;
			}

				#slider .cell .holder .breadcrumb {
					border-right: none;
				}

				#slider .cell .holder p.lbox {
					display: none;
				}

				.slideshow.info-tearsheets #slider .cell .holder .breadcrumb {
					padding-bottom: 6px;
					border-right: none;
				}

				#slider .cell .holder p.caption {
					display: inline;
				}

				.slideshow.info-tearsheets #slider .cell .holder p.caption {
					display: block;
				}

			#slider .cell .photo {
				max-width: 88%;
				max-height: 84%;
			    margin-top: 67px;
			}

			#slider .cell video {
				max-width: 88%;
				max-height: 84%;
			}

		.swipeCallout {
		    position: absolute;
		    width: 88%;
		    text-align: center;
		    color: #b7b7b7;
		    bottom: -43px;
		    left: 6%;
		}

			.swipeCallout p {
			    display: inline-block; *display: inline; zoom: 1;
			    position: relative;
			    line-height: 1;
			}

				.swipeCallout p:before {
					content: '';
					width: 6px;
					height: 6px;
					display: block;
					border-top: 1px solid #b7b7b7;
					border-left: 1px solid #b7b7b7;
					position: absolute;
					left: -20px;
					top: 50%;

					-webkit-transform: translateY(-50%) rotate(-45deg);
						-ms-transform: translateY(-50%) rotate(-45deg);
							transform: translateY(-50%) rotate(-45deg);
				}

				.swipeCallout p:after {
					content: '';
					width: 6px;
					height: 6px;
					display: block;
					border-top: 1px solid #b7b7b7;
					border-right: 1px solid #b7b7b7;
					position: absolute;
					right: -20px;
					top: 50%;

					-webkit-transform: translateY(-50%) rotate(45deg);
						-ms-transform: translateY(-50%) rotate(45deg);
							transform: translateY(-50%) rotate(45deg);
				}








	/* ================== */
	/* ==== INFO PAGE === */
	/* ================== */


	.blog #wrapper {
	    width: 88%;
	    max-width: 1263px;
	    margin: 0px auto 50px;
	    padding-top: 70px;
	}

	.blog h2 {
		clear: both;
	}

	.blog article.info {
		margin-bottom: 10% !important;
		height: auto !important;
		opacity: 1;
		float: none;
	}

		.blog article.info:before {
			display: none;
		}

		.blog article.info .inner {
			position: relative;
			top: 0px;
			left: 0px;
			-webkit-transform: none;
				-ms-transform: none;
					transform: none;
		}

			.blog article.info .inner .col {
				display: block;
				width: 80% !important;
			    margin: 15% 10% !important;
			}

				.blog ul.social {
				    font-size: 23px;
				}

					.blog ul.social li {
						float: none;
						display: inline-block; *display: inline; zoom: 1;
						vertical-align: middle;
					}

						.blog ul.social li a:link,
						.blog ul.social li a:visited {
							color: #343434;
						}

	.blog article.tearsheets {
	    padding: 0%;
	    border: none;
	    box-sizing: border-box;
	}

			.blog #grid .grid-sizer {
				width: 46.6%;
			}

			.blog #grid .gutter-sizer {
			    width: 6.8%;
			}

			.blog #grid li {
				width: 46.6%;
			}

}