@media all AND (max-width: 900px) {
	
	header .topMenu {
		display: none;
		position: fixed !important;
		top: 0px !important;
		left: 0px !important;
		width: 100% !important;
		height: 100vh !important;
		transform: unset !important;
		background: #f5f5f5;
	}
	
	header .topMenu ul {
		width: 90%;
		margin: 0px auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	header .topMenu ul li {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		text-align: center;
		font-size: 5vw !important;
		margin-right: 0px !important;
		padding-bottom: 20px;	
	}
	
	header .topMenu ul li:last-child {
		padding-bottom: 0px;
	}
	
	.menuOn header .topMenu {
		display: block;
	}
	
	header .menuBtn {	
		display: block;
		position: absolute;
		top: 25px;
		right: 80px;
		cursor: pointer;
	}

		.menuBtn div {
			width: 30px;
			height: 20px;
			position: relative;
			display: inline-block;
			*display: inline;
			zoom: 1;
			vertical-align: middle;
		}
		
			.menuBtn .line {
				height: 2px;
				width: 100%;
				display: block;
				position: absolute;
				right: 0;
				background-color: #000;
				opacity: 1;

				transform: rotate(0deg);

				transition-property: background-color, opacity, transform, top;
				transition-duration: .2s, .1s, .3s, .3s;
				transition-delay: 0s, 0s, 0s, 0s;
			}

			.menuOn .menuBtn .line {
			    transition-property: background-color, opacity, transform, top;
			    transition-duration: .2s, .1s, .3s, .3s;
			    transition-delay: 0s, 0s, 0s, 0s;
			}

			.menuBtn .line:nth-child(1) {
				top: 0px;
			}

			.menuBtn .line:nth-child(2) {
				top: 8px;
			}

			.menuBtn .line:nth-child(3) {
				top: 16px;
			}

			.menuOn .menuBtn .line:nth-child(1) {
				top: 5px;
			    transform: rotate(45deg);
			}

			.menuOn .menuBtn .line:nth-child(2) {
				opacity: 0;
				transition: opacity .1s 0s;
			}

			.menuOn .menuBtn .line:nth-child(3) {
				top: 5px;
				transform: rotate(135deg);
			}
}

@media all AND (max-width: 768px) {
	
	.inner.detailpage .mods .mod.textblock {
		width: 80%;
	}
	
}

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

	.mobileOnly {
		display: block !important;
	}
	
	.desktopOnly {
		display: none !important;
	}

	
	.inner.detailpage .hero .arrows svg, .arrows svg {
		display: none !important;
	}
	
	.grid-sizer, .masongrid .cell {
		width: 100%;
		/* height: 33vh !important; */
	}
	
	.gridpage .masongrid .cell {
		height: 33vh !important;
	}
	
	.masongrid .cell.large {
		width: 100%;
	}
	
	h1 {
		font-size: 36px;
		line-height: 1;
	}
	
	h2 {
		font-size: 24px;
		line-height: 1.3;
	}
	
	header {
		height: 100px;
	}
	
	header .inner {
		height: 70%;
	}
	
	header .thetext {
		background-color: #ececec;
		font-size: 12px;
		position: relative;
		z-index: 20;
	}
	
		header .thetext span {
			padding: 9px 0px 7px 10px;
			display: block;
		}
		
		header .thetext span p {
			line-height: 1;
			padding-bottom: 0em;
		}
		
	header .inner .topMenu {
		width: 100%;
		right: 0%;
		top: 50px;
		text-transform: uppercase;
	}
	
		header .inner .topMenu ul li {
			font-size: 12px;
			letter-spacing: .3em;
		}
	
		header .inner .topMenu ul li:first-child {
			width: 40%;
			left: 0%;
			text-align: center;
			position: absolute;
			margin-right: 0px;
		}
		
		header .inner .topMenu ul li:last-child {
			right: 0%;
			width: 40%;
			text-align: center;
			position: absolute;
			margin-right: 0px;
		}
		
	header #filter .searchTrigger {
		left: 3%;
		top: 54%;
	}
	
		header #filter .searchTrigger svg {
			width: 12px;
		}
		
	header #filter .closeSearch {
		right: 3%;
	}
	
		header #filter .closeSearch svg {
			width: 12px;
		}
	
	header #filter ul li {
		margin-right: 5vw;
		font-size: 12px;
	}
	
	header #filter form[name="searchform"] {
		left: 7%;
	}
	
		header #filter form[name="searchform"] input {
			font-size: 18px;
		}
		
	footer {
		padding-top: 25px;
	}
	
	footer p {
		font-size: 9px;
	}
	
	footer .inner .social {
		margin: 10px auto;
	}
	
	footer .inner .social li {
		margin-right: 8px;
	}
	
	footer .inner .social li:last-child {
		margin-right: 0px;
	}
	
	footer .inner .social li svg {
		width: 30px;
	}
	
	.inner.home, .inner.detailpage {
		top: 100px;
	}
	
	.workgrid .cell .info .thetext {
		top: 50%;
		left: 5%;
		width: 90%;
		bottom: auto;
		transform: translateY(-50%);
	}
	
		.workgrid .cell .info .thetext h1, .workgrid .cell .info .thetext h2 {
			font-size: 21px;
		}
		
	ul.threecol li, ul.fourcol li, ul.twocol li {
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.inner.aboutpage .textwrap {
		padding-top: 30px;
	}

	.slidewrap {
		width: 100%;
		height: 60vh;
		overflow-x: hidden;
	}
	
	.slickslideshow {
		height: 50vh;
	}
	
	.inner.aboutpage .sub {
		margin-bottom: 60px;
	}
	
	.inner.aboutpage .textwrap h3 {
		font-size: 18px;
	}
	
	.inner.aboutpage .textwrap p, .inner.aboutpage li {
		font-size: 20px;
	}
	
	.inner.aboutpage li {
		margin-bottom: 25px;
	}
	
	.inner.aboutpage .sub.textblock.centered {
		margin: 0px auto 40px auto;
	}
	
	.inner.aboutpage .sub.textblock.full {
		margin: 0px auto 40px auto;
	}
	
	.inner.aboutpage .sub.textblock.full p {
		max-width: 100%;
	}
	
	.inner.detailpage .hero .centerme {
		top: 50%;
	}
	
	.inner.detailpage .hero svg {
		width: 50px;
		height: 50px;
	}
	
	.hero .slick-dots {
		bottom: 2px !important;
	}
	
	.inner.detailpage .hero .titles {
		margin-top: 15px;
	}
	
	.inner.detailpage .hero .centerme h1 {
		font-size: 20px;
	}
	
	.inner.detailpage .hero .centerme h2 {
		font-size: 18px;
	}
	
	.inner.detailpage .hero .titles .svgmask {
		padding: 8px 0px 0px 0px;
		height: 9px;
	}
	
	.inner.detailpage .hero .titles .svgmask svg {
		width: 650%;
	}
	
	.inner.detailpage .intro {
		width: 100%;
		margin: 25px auto;
	}
	
		.inner.detailpage .intro div {
			line-height: 1.3;
		}
	
		.inner.detailpage .intro h1.introTitle {
			font-size: 24px;
		}
	
	.inner.detailpage .related h2.title {
		margin: 10px auto;
	}
	
	.inner.detailpage .grid-sizer, .inner.detailpage .masongrid .cell {
		width: 100% !important;
	}
	
	.inner.detailpage .pager ul li a {
		font-size: 14px;
	}
	
	.inner.detailpage .mods .mod.textblock {
		width: 100%;
	}
	
}