@media all AND (max-width: 768px) {

	.mobileonly {
		display: block !important;
	}

	.desktoponly {
		display: none !important;
	}
	
	body {
		background-color: #fff !important;
	}
	
	header {
		width: 100%;
		background-color: transparent;
		top: 83px;
		z-index: 90;
	}
	
	.home header {
		width: 100%;
		height: 25%;
		background-color: #fff;
		top: 0px;
		z-index: 903;
	}
	
	.menuOn header {
		z-index: 903;
	}
	
		header .inner {
			position: relative;
			width: 100%;
			height: 100%;
		}
		
		header .menuButton {
			top: 50%;
		}
		
	header nav {
		z-index: 60;
		margin-top: -83px;
	}
	
	.home header nav {
		margin-top: 0px;
	}
		
	header nav ul {
		text-align: center;
	}
	
		header nav ul li {
			font-size: 9vw;
			padding: 10px 0px;
		}
		
	header nav .aligner {
		margin-left: 0px !important;
		width: 100% !important;
	}
	
	header #menuoverlay {
		width: 100%;
		height: 100%;
		background-color: rgba(92,146,221,.9);
		
		opacity: 0;
		
		transition: opacity .5s;
	}
	
	.menuButton.mobileonly {
		top: 83px;
		position: fixed;
	}
	
	.menuOn header #menuoverlay {
		opacity: 1;
	}
	
	a.headerwrap {
		display: none;
		position: absolute;
		top: 50%;
		left: 30px;
		text-align: left;
	}
	
	header a.headerwrap {
		display: block;
	}
	
	a.headerwrap svg {
		width: 33%;
		height: auto;
	}
	
	.home .image {
		width: 100% !important;
		height: auto;
		position: absolute;
		left: 0px;
		top: 25%;
	}
	
	.home .image img {
		width: 100%;
		height: auto;
	}
	
	.home .logo {
		display: none;
	}
	
	#grid > li.large {
		width: 100%;
	}
	
	.grid-sizer, #grid > li {
		width: 100%;	
	}
	
	.gutter-sizer {
		width: 8%;
	}
	
	h1.intro {
		margin-top: 150px;
	}
	
	.work ul.subs {
		position: relative;
		z-index: 1000;
		margin-top: 150px;
	}
	
	.stories #grid li {
		margin-bottom: 25px !important;
	}
	
	.stories #grid li .info {
		width: 100%;
		margin-right: 0px;
		text-align: center;
	}
	
	.stories #grid li .imgWrap {
		width: 100%;
		margin-bottom: 20px;
		margin-right: 0px;
	}
	
	.stories #grid li .info .inner {
		padding: 0px 10px;
		max-width: 100%;
	}
	
	.stories #grid, .storygrid #grid {
		margin-top: 40px;
	}
	
	.slideclose {
		right: 30px;
		top: 37px;
		position: fixed;
		display: block;
		height: 18px;
		width: 25px;
		cursor: pointer;
		z-index: 901;
	}
	
	.slideclose span {
		width: 100%;
		height: 1px;
		display: block;
		position: absolute;
		right: 0px;
		background-color: rgba(0,0,0,1);
		opacity: 1;

		transform: rotate(0deg) translate(0px,0px);
		-webkit-transform: rotate(0deg) translate(0px,0px);
		-ms-transform: rotate(0deg) translate(0px,0px);
				
		transform-origin: right center;
		-webkit-transform-origin: right center;
		-ms-transform-origin: right center;

		/* transitions */
		transition-property: transform, opacity;
		transition-duration: .3s, .2s;
		transition-delay: 0s, 0s;

		-webkit-transition-property: -webkit-transform, opacity;
		-webkit-transition-duration: .3s, .2s;
		-webkit-transition-delay: 0s, 0s;

		-ms-transition-property: -ms-transform, opacity;
		-ms-transition-duration: .3s, .2s;
		-ms-transition-delay: 0s, 0s;
	}

	.slideclose span:nth-child(1) {
				transform: rotate(45deg) translate(10px,18px);
		-webkit-transform: rotate(45deg) translate(10px,18px);
			-ms-transform: rotate(45deg) translate(10px,18px);
	}

	.slideclose span:nth-child(2) {
		opacity: 0;
	}

	.slideclose span:nth-child(3) {
		top: 23px;
		
				transform: rotate(-45deg) translate(11px,-19px);
		-webkit-transform: rotate(-45deg) translate(11px,-19px);
			-ms-transform: rotate(-45deg) translate(11px,-19px);
	}
	
	.slideshow .theslideshow .caption {
		margin-top: 0px;
	}
	
	.info .textHolder {
		width: 82%;
		margin-top: 60px;
	}
	
	.info.col2 .textHolder .col:first-child {
		width: 100%;
		padding-right: 0%;
		margin-left: 0px;
		border: 0px;
	}
	
	.info.col2 .textHolder .col:last-child {
		width: 100%;
		margin-left: 0%;
		margin-right: 0px;
	}
	
	.info .textHolder h3 {
		font-size: 50%;
	}
	
	.info .textHolder h1 {
		font-size: 200%;
	}
	
	.info .textHolder h1 br {
		display: none;
	}
	
	.info .textHolder p {
		font-size: 90%;
	}
	
	.info .textHolder ul {
		width: 45%;
	}
	
	.info .textHolder h3 {
		font-size: 50%;
	}
	
	.storygrid #pager li span {
		font-size: 60%;
	}
	
	.storygrid #pager li a {
		font-size: 100%;
	}

}

@media all AND (max-width: 768px) AND (orientation: landscape) {
	header nav ul li {
		font-size: 5vw;
	}
}