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

	.mobileOnly {
		display: block;
	}

	.desktopOnly {
		display: none;
	}


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

	header {
	    position: fixed !important;
	    top: 0px;
	    left: 0px;
        border-bottom: none;
	}

	.abso header {
		position: absolute !important; 
	}

/*	@media all and (orientation: landscape) {
		.menuOpen header {
			position: absolute !important;
		}
	}*/

		header .inner {
		    background-color: #fff;
		    position: relative;
		    z-index: 5;
	        border-bottom: 1px solid #e1e1e1;
		}

			header .logo {
				left: 6%;
			}

			.menuButton {
				width: 26px;
				height: auto;
				position: absolute;
				top: 50%;
				right: 6%;
				-webkit-transform: translateY(-50%);
					-ms-transform: translateY(-50%);
						transform: translateY(-50%);
			}

				.menuButton span {
					display: block;
					width: 100%;
					height: 2px;
					background-color: #000;
					margin-bottom: 5px;
					opacity: 1;
					-webkit-transform: rotate(0deg) translate(0px,0px);
						-ms-transform: rotate(0deg) translate(0px,0px);
							transform: rotate(0deg) translate(0px,0px);

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

				.menuButton span:last-child {
					margin-bottom: 0px;
				}

				.menuOpen .menuButton span:nth-child(1) {
					-webkit-transform: rotate(45deg) translate(5px,5px);
						-ms-transform: rotate(45deg) translate(5px,5px);
							transform: rotate(45deg) translate(5px,5px);
				}

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

				.menuOpen .menuButton span:nth-child(3) {
					-webkit-transform: rotate(-45deg) translate(4px,-5px);
						-ms-transform: rotate(-45deg) translate(4px,-5px);
							transform: rotate(-45deg) translate(4px,-5px);
				}


		header .nav {
		    position: absolute;
		    top: 71px;
		    left: 0px;
		    z-index: 4;
		    width: 100%;
		    text-align: center;
		    background-color: #fff;
		    padding: 45px 0px 40px;
		    box-shadow: 0px -2px 20px 0px rgba(0, 0, 0, 0.3);
		    -webkit-transform: translateY(-100%);
		    	-ms-transform: translateY(-100%);
		    		transform: translateY(-100%);

		    -webkit-transition: -webkit-transform .4s ease-in-out 0s;
		    	-ms-transition: -ms-transform .4s ease-in-out 0s;
		    		transition: transform .4s ease-in-out 0s;
		}

		.menuOpen header .nav {
		    -webkit-transform: translateY(0%);
		    	-ms-transform: translateY(0%);
		    		transform: translateY(0%);
		}

			.nav li {
			    float: none;
			    margin-left: 0px;
			    margin-bottom: 32px;
			    line-height: 1;
			}

				.nav li a {
					font-size: 6vw;
					line-height: 1;
				}

				@media all and (orientation:landscape) {
					.nav li a {
					    font-size: 3.7vw;
					}
				}

			.nav p {
			    color: #000;
			    font-size: 3.9vw;
			    padding-top: 25px;
			}

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

		transition-property: transform, opacity;
		transition-duration: 0s, .4s;
		transition-delay: .4s, 0s;
		-webkit-transition-property: -webkit-transform, opacity;
		-webkit-transition-duration: 0s, .4s;
		-webkit-transition-delay: .4s, 0s;
		-ms-transition-property: -ms-transform, opacity;
		-ms-transition-duration: 0s, .4s;
		-ms-transition-delay: .4s, 0s;
	}

	.menuOpen .frosty {
		-webkit-transform: translateX(0%);
			-ms-transform: translateX(0%);
				transform: translateX(0%);
		opacity: 1;

		transition-property: transform, opacity;
		transition-duration: 0s, .4s;
		transition-delay: 0s, 0s;
		-webkit-transition-property: -webkit-transform, opacity;
		-webkit-transition-duration: 0s, .4s;
		-webkit-transition-delay: 0s, 0s;
		-ms-transition-property: -ms-transform, opacity;
		-ms-transition-duration: 0s, .4s;
		-ms-transition-delay: 0s, 0s;
	}



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

	#splash {
		margin-top: 71px;
	}

		#splash .logo {
			width: 50%;
			max-width: none;
			height: auto;
		}

		#splash svg {
    		bottom: 24px;
		}

		@media all and (max-width: 667px) and (orientation:landscape) {

			#splash .logo {
				max-width: 120px;
			    margin-top: 0px;
			}

				#splash svg {
		    		display: none;
				}

		}

	.home section#content {
	    margin: 90px auto 0px !important;
	    width: 88%;
	}

		.home .featured {
		    margin: 0px auto 160px;
		}

		.home .writeup {
		    width: 100%;
		    min-width: 0px;
		}

		.home .products .grid .cell {
		    display: block;
		    width: 100%;
		    margin-right: 0%;
		    margin-bottom: 23px;
		    float: none;
		}

		.home .tri-box {
			margin: 0px auto 100px;
		}

			.home .tri-box .box .inner {
			    width: 80%;
			    position: relative;
			    padding: 45px 10%;
			}

				.box form input[type="email"] {
				    width: 94%;
				    display: block;
				    padding: 0% 3%;
				}

				.box form input[type="submit"] {
				    display: block;
				    width: 100%;
				    max-width: 300px;
				    height: auto;
				    margin: 17px 0px 0px;
				    padding: 0.6em 0px;
				    font-size: 20px;
				    letter-spacing: .08em;
				}

		#map {
		    padding-bottom: 100%;
		    height: auto !important;
		}

		@media all and (orientation: landscape) {

			#map {
				padding-bottom: 50%;
			}

		}




/* ============================= */
/* ==== SERVICES / PRODUCTS ==== */
/* ============================= */

		.grid #hero {
			height: 0px !important;
			padding-bottom: 60%;
		    margin-bottom: 70px;
		}

			.grid #hero h1 {
			    font-size: 9vw;
			    padding: 9px 30px;
			}

		.grid .writeup {
		    width: 88%;
		    max-width: none;
		    padding: 0% 6%;
	        margin-bottom: 120px;
		}

			.grid .writeup p {
			    font-size: 6vw;
			}

			@media all and (orientation: landscape) {
				.grid .writeup p {
				    font-size: 4vw;
				}
			}

		.grid ul#grid {
			width: 88%;
		}

			#grid li .descr {
			    top: 0px;
			    padding-top: 19px;
			    padding-bottom: 30px;
			}



/* ============================= */
/* ==== SERVICES / PRODUCTS ==== */
/* ============================= */

	.blog .entry {
	    margin-top: 40px;
	    margin-bottom: 70px;
	}

			.blog .entry a {
			    padding: 0px 36px 47px 0px;
			}

			.blog .entry h2 {
				font-size: 2.1rem;
			    padding-bottom: 0.3em;
			}

			.blog .entry .viewMore {
				right: auto;
				left: 2px;
			}

				.blog .entry .viewMore span {
				    opacity: 1;
				    transition: opacity .2s;
				}

	.lightbox .inner {
	    max-width: 88%;
	    width: 100%;
	}


/* ========================= */
/* ==== ABOUT / CONTACT ==== */
/* ========================= */

		.info .writeup {
			padding-top: 145px;
		}

		@media all and (max-width: 720px) and (min-width: 501px) {
			.info .writeup p img.landscape {
			    width: 70%;
			}
			.info .writeup p img.portrait {
			    width: 52%;
			}
		}

		@media all and (max-width: 500px) {
			.info .writeup p img {
			    width: 100% !important;
			}
		}


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

	footer p {
	    font-size: 0.8rem;
	}


}


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

		#grid li {
			width: 48.775%;
			margin-right: 2.45% !important;
		}

		#grid li:nth-child(2n) {
		    margin-right: 0% !important;
		}

}

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

		#grid li {
			width: 100%;
			margin-right: 0% !important;
			margin-bottom: 24px !important
		}

}