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

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

	.desktopOnly {
		display: none;
	}

	.mobileOnly {
		display: block;
	}


	.textStyles h2 {
	    font-size: 18px;
	    letter-spacing: .1em;
	    margin-bottom: 20px;
	}



	/*---------------*/
	/*===STRUCTURE===*/
	/*---------------*/

	#wrapper {
		margin-bottom: -52px !important;
	}

		#wrapper:before {
			content: '';
			display: block;
		}

		.home.grid #wrapper:before {
			display: none;
		}

		.clients #wrapper:before,
		.info #wrapper:before {
			height: 112px;
		}

		.grid #wrapper:before {
			height: 53px;
		}

		.post #wrapper:before {
			height: 150px;
		}

		@media all and (min-width: 421px) {

			.grid #wrapper:before {
				height: 112px;
			}

		}

	.spacer {
		display: none;
	}

	.home .spacer {
		display: block;
	}


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

	header {
		height: 54px;
		z-index: 310;
	}

	.home header {
		position: fixed;
		top: 0px;
		left: 0px;
	}

	.menuOpen header {
		position: absolute;
	}

		header .logo {
			left: 6%;
			z-index: 3;
		}

		header .inner {
		    display: block;
		    width: 100%;
		    height: 54px;
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    background-color: #252525;
		    z-index: 2;
		}

		.menuButton {
		    position: absolute;
		    right: 0px;
		    top: 0px;
		    height: 100%;
		    padding: 0% 6%;
		    z-index: 3;
		}

			.menuButton .line {
				position: relative;
				top: 50%;
				right: 0px;
				display: block;
				height: 1px;
				width: 23px;
				background-color: #fff;
				transition: background-color .15s;
			}

			.menuButton .line:before {
				content: '';
				position: absolute;
				top: -6px;
				left: 0px;
				display: block;
				height: 1px;
				width: 23px;
				background-color: #fff;
				transform-origin: 100% 100%;
				-webkit-transform: rotate(0deg);
					-ms-transform: rotate(0deg);
						transform: rotate(0deg);

				-webkit-transition: -webkit-transform .2s, top .2s;
					-ms-transition: -ms-transform .2s, top .2s;
						transition: transform .2s, top .2s;
			}

			.menuButton .line:after {
				content: '';
				position: absolute;
				bottom: -6px;
				left: 0px;
				display: block;
				height: 1px;
				width: 23px;
				background-color: #fff;
				transform-origin: 100% 100%;
				-webkit-transform: rotate(0deg);
					-ms-transform: rotate(0deg);
						transform: rotate(0deg);

				-webkit-transition: -webkit-transform .2s, bottom .2s;
					-ms-transition: -ms-transform .2s, bottom .2s;
						transition: transform .2s, bottom .2s;
			}

			body.menuOpen .menuButton .line {
				background-color: #252525;
			}

			body.menuOpen .menuButton .line:before {
				top: -8px;
				-webkit-transform: rotate(-45deg);
					-ms-transform: rotate(-45deg);
						transform: rotate(-45deg);
			}

			body.menuOpen .menuButton .line:after {
				bottom: -8px;
				-webkit-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
						transform: rotate(45deg);
			}

		header ul.nav {
			z-index: 1;
			background-color: #252525;
		    width: 100%;
		    text-align: left;
		    top: 0px;
		    right: 0px;
		    box-shadow: 0px 4px 9px rgba(0,0,0,.2);
		    -webkit-transform: translateY(-100%);
		    	-ms-transform: translateY(-100%);
		    		transform: translateY(-100%);

    		-webkit-transition: -webkit-transform .3s cubic-bezier(.24,.09,.69,0);
    			-ms-transition: -ms-transform .3s cubic-bezier(.24,.09,.69,0);
    				transition: transform .3s cubic-bezier(.24,.09,.69,0);
		}

		body.menuOpen header ul.nav {
		    -webkit-transform: translateY(54px);
		    	-ms-transform: translateY(54px);
		    		transform: translateY(54px);
		}

			header ul.nav > li {
				margin-left: 0px;
				display: block;
				border-top: 1px solid #464646;
			}

			header ul.nav li.lbox {
				display: none;
			}

				header ul.nav > li > a {
				    padding: 19px 6%;
    				display: block;
    				font-size: 20px;
    				position: relative;
				}

					header ul.nav > li > a.hasSub:before {
					    content: '';
					    position: absolute;
					    right: 6%;
					    top: 50%;
					    display: block;
					    margin-right: 3px;
					    margin-top: -6px;
					    border-left: 9px solid #fff;
					    border-top: 6px solid transparent;
					    border-bottom: 6px solid transparent;
					}

					header ul.nav > li.subOpen > a.hasSub:before {
						-webkit-transform: rotate(90deg);
							-ms-transform: rotate(90deg);
								transform: rotate(90deg);

						transition: transform .15s;
						-webkit-transition: -webkit-transform .15s;
						-ms-transition: -ms-transform .15s;
					}

				header ul.nav > li .subMaster {
					display: none;
					background-color: #fff;
					position: relative;
					border-top: 1px solid #464646;
				}

					header ul.nav > li .subMaster:before {
	                    content: '';
	                    display: block;
	                    width: 100%;
	                    height: 7px;
	                    position: absolute;
	                    top: 0px;
	                    left: 0px;
	                    background-image: linear-gradient( rgba(0,0,0,.2), rgba(0,0,0,0) );
					}

					header ul.nav > li .subMaster:after {
	                    content: '';
	                    display: block;
	                    width: 100%;
	                    height: 7px;
	                    position: absolute;
	                    bottom: 0px;
	                    left: 0px;
	                    background-image: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,.2) );	                   
					}

					header ul.nav li ul.sub {
						list-style-type: none;
					}

						header ul.nav li ul.sub li {
							margin-left: 0px;
						}

							header ul.nav li ul.sub li a {
							    padding: 20px 6%;
							    line-height: 1;
							    display: block;
							    font-size: 16px;
							    font-family: "Knockout 52 A", "Knockout 52 B";
							    font-style: normal;
							    font-weight: 400;
							    letter-spacing: 0.08em;
							    position: relative;
							    border-bottom: 1px solid #ebebeb;
							}


	                            header ul.nav li ul.sub li a:after {
	                                content: '';
	                                display: block;
	                                position: absolute;
	                                top: 50%;
	                                right: 6%;
									margin-right: 2px;
									border-left: 7px solid #e1e1e1;
	                                border-top: 5px solid transparent;
	                                border-bottom: 5px solid transparent;

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

                    header ul.nav li ul.tags {
						list-style-type: none;
						width: 88%;
					    margin: 40px auto 0px;
					    padding-bottom: 33px;
                    }

                    	header ul.nav li ul.tags li {
                    		display: inline-block; *display: inline; zoom: 1;
                    		vertical-align: baseline;
						    margin-left: 0px;
						    margin-right: 22px;
						    line-height: 1.2;
						    padding-bottom: 17px;
						    font-size: 13px;
                    	}

	                    	header ul.nav li ul.tags li a {
	                    		color: #757575;
	                    	}





		.frosty {
			width: 100%;
			height: 200%;
			position: fixed;
		    top: 0px;
		    left: 0px;
			z-index: -99;
			background-color: rgba(255,255,255,.9);
			opacity: 0;

			transition: opacity .5s .2s, z-index 0s .7s;
		}

		body.menuOpen .frosty {
			opacity: 1;
			z-index: 309;

			transition: opacity .5s 0s, z-index 0s 0s;
		}


		.subHolder {
			display: none;
		}


	/*------------*/
	/*===FOOTER===*/
	/*------------*/

	footer {
		background-color: #252525;
		color: #fff;
	}

	footer, #wrapper:after {
	    height: 52px !important;
	}

		footer .inner {
			width: 88%;
		}

			footer .credit {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    text-align: center;
			    color: #fff !important;
			    letter-spacing: .08em !important;
			    line-height: 1 !important;
			    padding-bottom: 0px !important;
			    width: 100%;
			    -webkit-transform: translate(-50%, -50%);
			    	-ms-transform: translate(-50%, -50%);
			    		transform: translate(-50%, -50%);
			}

			footer .links {
				display: none;
			}









	/* -------------- */
	/*-===HOMEPAGE=== */
	/* -------------- */

	#splash {
		top: 54px;
		margin-bottom: 54px;
	}

	.introLogo img,
	.ready .introLogo img {
	    -webkit-transform: none;
	    	-ms-transform: none;
	    		transform: none;
	    -webkit-animation: none;
	    		animation: none;
		opacity: 1;
	}

	.introLogo .downArrow,
	.ready .introLogo .downArrow {
		width: 30px;
	    height: 30px;
	    border-radius: 50%;
	    -moz-border-radius: 50%;
	    -webkit-border-radius: 50%;
	    border: 3px solid #ffffff;
	    position: relative;
	    display: block;
	    margin: 20px auto 0px;
	    cursor: pointer;
	    -webkit-transform: none;
	    	-ms-transform: none;
	    		transform: none;
	    -webkit-animation: none;
	    		animation: none;
		opacity: 1;
	}

		.introLogo .downArrow:after {
			content: '';
			display: block;
		    width: 12px;
		    height: 12px;
		    position: absolute;
		    top: 7px;
		    left: 9px;
		    box-sizing: border-box;
		    border-bottom: 3px solid #fff;
		    border-left: 3px solid #fff;
			-webkit-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			-webkit-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			transform-origin: 50% 50;
		} 

	#splash .shape {	

	}

		#splash .shape .shapeInner,
		.ready #splash .shape .shapeInner {
		    width: 60%;
		    height: 60%;
		    top: 16%;
		    left: 20%;
		    -webkit-animation: none;
		    		animation: none;
			-webkit-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
					transform: rotate(-45deg);
		}

			#splash .shapeInner span:first-child,
			.ready #splash .shapeInner span:first-child {
			    -webkit-animation: none;
			    		animation: none;
    			width: 100%;
			}

			#splash .shapeInner span:last-child,
			.ready #splash .shapeInner span:last-child {
			    -webkit-animation: none;
			    		animation: none;
	    		width: 100%;
			}

		@media all and (orientation: landscape) {
			#splash .shape .shapeInner {
				display: none;
			}
		}


	/*----------------*/
	/*===GRID RULES===*/
	/*----------------*/

	#grid {
		width: 88%;
	}

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

		.gutter-sizer {
			width: 6.81%;
		}

		.grid-sizer, #grid > li {
			width: 46.595%;
		}

	}

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

		#grid {
			width: 100%;
		}

		.gutter-sizer, #instafeed .gutter-sizer {
			width: 0%;
		}

		.grid-sizer, #grid > li, #instafeed > li {
			width: 100%;
		}

	}

	#grid .cell {
		margin-bottom: 35px !important;
	}

		#grid .cell .lb-notify,
		#grid .cell .lb-icon {
			display: none;
		}

		#grid .cell a.bigLink {
		    position: relative;
		    z-index: 1;
		    box-shadow: none;
		}

			.grid .cell .caption {
			    position: relative;
			    float: left;
			    bottom: 0px !important;
			    right: 0px !important;
			    margin-left: 6%;
		        margin-top: 12px;
			    z-index: 3;
			    right: 0px;
			    max-width: 70%;
			    display: block;
			    text-align: left;
			    color: #6a6969;
			    opacity: 1;
			}

			@media all and (min-width: 421px) {
				.grid .cell .caption {
					margin-left: 0%;
				}
			}

				.grid .caption > p {
					font-size: 13px;
				}

					.grid .caption > p a {
						color: #6a6969;
					}

				#grid li .caption .tags {
					display: none;
				}

			#grid .cell .share {
				float: right;
				position: relative;
			    margin-top: 16px;
		        margin-right: 6%;
			    width: 4px;
			    height: 4px;
			    background-color: #c2c2c2;
			    border-radius: 100%;
			}

			@media all and (min-width: 421px) {
				#grid .cell .share {
					margin-right: 0%;
				}
			}

				#grid .cell .share:before {
				    content: '';
				    display: block;
				    position: absolute;
				    top: 0px;
				    right: 6px;
				    width: 4px;
				    height: 4px;
				    border-radius: 100%;
				    background-color: #c2c2c2;
				}

				#grid .cell .share:after {
				    content: '';
				    display: block;
				    position: absolute;
				    top: 0px;
				    right: 12px;
				    width: 4px;
				    height: 4px;
				    border-radius: 100%;
				    background-color: #c2c2c2;

				    transition: background-color .2s;
				}

			#grid .cell.shareON .share,
			#grid .cell.shareON .share:before,
			#grid .cell.shareON .share:after {
				background-color: #252525;
			}

			#grid .cell .shareOverlay {
				clear: both;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				background-color: rgba(37,37,37,.9);
				opacity: 0;
				z-index: -10;

				transition: opacity .2s 0s, z-index 0s .2s;
			}

			#grid .cell.shareON .shareOverlay {
				opacity: 1;
				z-index: 2;

				transition: opacity .2s 0s, z-index 0s 0s;
			}

				.grid .cell .shareOverlay ul {
				    text-align: center;
				    position: relative;
				    top: 50%;
					width: 100px;
					margin: -48px auto;
				}

					.grid .cell .shareOverlay ul li {
					    margin: 4px 5px !important;
					}

						.grid .cell .shareOverlay ul li path {
							fill: #fff;	
						}
	
.grid .tagcontent {
	margin-bottom: 60px;
}
	
.grid .tagcontent h1 {
	width: 90%;
	font-size: 150%;
}

.grid .tagcontent p {
	font-size: 110%;
	margin-bottom: 20px;
}


	/*-----------------*/
	/*=== INSTAGRAM ===*/
	/*-----------------*/

		



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

	.slideshow {}

		@media all and (max-width: 850px) {
			/*remove arrows and FORCE 'em to swipe*/

			.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 .cell {
				float:left;
				width:100%;
				height: 100%;
				position: relative;
			}

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

			#slider .cell .inner {
				position: relative;
			}

				#slider figure .photo {
					max-height: 88%;
				}

				.slideshow .cell .holder {
				    position: absolute;
				    bottom: 0px;
				    left: 6%;
				}

					.slideshow figure .holder .caption {
					    margin: 0px 0px 0px 0px;
					    display: inline-block; *display: inline; zoom: 1;
					    vertical-align: bottom;
					    padding-right: 10px;
					    border-right: 1px solid #ccc;
					    margin-right: 8px;
					}

					.slideshow .holder div {
					    display: inline-block; *display: inline; zoom: 1;
					    vertical-align: bottom;
					}

						.slideshow .holder .lbox {
						    display: none;
						}

						.slideshow .holder .share {
						    padding-left: 0px;
						    line-height: 1;
						    vertical-align: bottom;
						}

				#slider .share-overlay {}

					#slider .share-overlay ul {
						width: 90%;
						left: 5%;
					}

			.slideshow #prev,
			.slideshow #next {
				display: none;
			}

			.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);
					}


		}

		@media all and (min-width: 851px) {
			.swipeCallout {
				display: none !important;
			}
		}






	/*---------------*/
	/*=== CLIENTS ===*/
	/*---------------*/

	.clients #wrapper {
		width: 88%;
		/*margin: 0px auto -52px;*/
	}

		.clients #wrapper section {
			min-height: 0px !important;
		}

			.clients #wrapper article {
				top: 0px !important;
				width: 100%;
				-webkit-transform: none;
					-ms-transform: none;
						transform: none;
			}

			.clients .photo-count {
				display: none;
			}




	/*-----------------*/
	/*=== BLOG GRID ===*/
	/*-----------------*/

	main#wrapper p.archive {
	    right: auto;
	    width: 88%;
	    top: 0px;
	    position: relative;
	    color: #252525;
	    margin: 20px auto 20px;
	}

		main#wrapper p.archive a {
		    display: block;
		    text-align: center;
		}


	/*-----------------*/
	/*=== BLOG POST ===*/
	/*-----------------*/

	.blogNav .prevPost {
		left: 6%;
	}

	.blogNav .nextPost {
		right: 6%;
	}

		.blogNav span.hideMobile {
			display: none;
		}

	.post #wrapper:before {
		height:;
	}

		.post #wrapper article {
			padding-top: 0px;
		}

			.post #wrapper article div.title {
			    width: 88%;
			    margin: 0px auto 10px;
			}

			.post .module.text {
				width: 88%;
			}

			.post .module.images-grid {
				width: 88%;
			}

			.post .module.images-medium {
				width: 88%;
			}

			/* module: images-large */
			/* ==================== */
			.post .module.images-large {
				margin: 0px auto 50px;
			}

				/* rules based on surrounding elements */
				.post div.title + .module.images-large {
					margin: 50px auto 50px;
				}

				.post .module.images-grid + .module.images-large,
				.post .module.images-medium + .module.images-large {
					margin: 45px auto 50px;
				}

				.post .module.text + .module.images-large {
					margin: 13px auto 50px;
				}


	/*---------------*/
	/*=== CONTACT ===*/
	/*---------------*/

	.info #wrapper {
		width: 88%;
	}

		.info #wrapper section {
			padding-top: 0px;
		}

			.info #wrapper .col {
			    width: 100%;
			    min-width: 0px;
		        margin-bottom: 55px;
			    margin-right: 0px;
			    display: block;
			}

			.info #wrapper .col:last-child {
				margin-bottom: 100px;
			}

				.info #wrapper section ul.social {
					margin-left: 9px;
				}

					.info #wrapper .social li {
						margin-right: 13px;
					}

				@media all and (max-width: 350px) {
					.info #wrapper section ul.social {
						margin-left: 0px;
						display: block;
						margin-top: 10px;
					}
				}


}