/*-----	Style -----*/

/* Config */
.mobile {
	display:none !important;
}
.desktop {
	display:inline !important;
}
#no-js {
	display:none;
}

/* Header('s'), Nav, Footer */
.header-contact {
	width:100vw !important;
	height:36px;
	background:var(--col-bg);
	display:inline;
	top:0; 
	left:0;
	position:relative;
	z-index:;
	content:"";
}

header {
	min-width:320px;
	width:100vw;
	height:auto;
	z-index:99999;
}

nav {
	width:auto;
	height:inherit;
	font-size:1em;
	font-family:var(--font-regular);	
	top:92px;
	right:4vw;	
	position:absolute;
	z-index:9001;
	/*display:none;*/ /* REMOVE LATER */
}

nav li {
	width:100px;
	padding:0 20px;
	display:inline-grid;
	text-align:center !important;
}

nav a:hover {
	width:100px;
	display:inline-grid;
	font-family:var(--font-medium);	
	text-shadow: 0 0 .9px var(--col-primary), 0 0 .9px var(--col-primary);
}

main {
	min-width:320px;
	height:100%;
	display:inline !important;
	position:fixed !important;
}

content {
	min-width:320px;
	width:100vw;
	margin:100vh 0 0 0;
	color:var(--col-grey);
	background:var(--col-bg);
	display:;
	position:;
	z-index:10;
}

section {
	min-width:320px;
	width:64vw;
	height:auto;
	min-height:100vh;
	margin:0 auto;
	padding:50px 0 100px 0;
}

#force {
	flex:1 0 auto;
	content:;
}

footer{
	width:100vw;
	min-height:240px;
	height: auto;
	margin:0 auto;
	overflow:hidden;
	font-size:0.72em;
	color:var(--col-white);
	background:var(--col-primary);
	z-index:10;
}

footer #container {
	max-width:64vw; 
	margin:25px auto 25px auto; 
	display:grid; 
	grid-template-columns:auto auto auto;
}

footer > #container ul {
	display:block;
}

footer > #container a:hover {
	color:var(--col-tertiary) !important;
}

footer > #container .connect{
	margin:6px 0 16px 0;
	display:flex;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  	filter: grayscale(100%);
}

footer > #container .connect:hover {
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  	filter: grayscale(0%);
}

footer > #container .connect img {
	width:32px;
}

footer > #container .connect p{
	margin:2px 0 0 16px;
}

#sub-footer {
	background:var(--col-dark-blue-gray);
}

#sub-footer > div {
	width:84vw; 
	margin:0 auto; 
	padding:20px 0;	
}

/* Design */
.highlight-sub-heading {
	color:var(--col-gray); 
	font-family:var(--font-bold); 
	font-weight:bold; 
	font-size:1.48em;
	border-radius:none;
}

.highlight-paragraph {
	margin:50px 0 0 0;
}

.call-to-action {
	color:var(--col-white); 
	font-size:inherit; 
	font-family:var(--font-regular); 
	font-weight:initial; 
	margin:92px auto 0 auto; 
	padding:15px; 
	/*font-size: 0.72em;*/
	border-radius:10px;
	background:var(--col-primary);
	display:table;

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

.call-to-action:hover {
	color:var(--col-white); 
	font-family:var(--font-regular); 
	font-weight:bold; 
	background:var(--col-tertiary);

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}


/* Menu "Hamburger" Icon Animations
* @author Jesse Couch
* @page https://codepen.io/designcouch/ 
* url https://codepen.io/designcouch/pen/Atyop
*/
#navBtn span:nth-child(1) {
  top: 0px;
}

#navBtn span:nth-child(2),#navBtn span:nth-child(3) {
  top: 14px;
}

#navBtn span:nth-child(4) {
	width:75%;
  	top: 90%;
}

#navBtn.open span:nth-child(1) {
	top: 32px;
	width: 0%;
	left: 50%;
}

#navBtn.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#navBtn.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#navBtn.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#navBtn span {	
	display: block;
	position: absolute;
	height: 5px;
	width: 100%;
	background: var(--col-white);
	border-radius: 2px;
	opacity:1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
 }



/* Layout */
.section-60-40 {
	display:grid; 
	grid-template-columns:60% 40%;
}

.section-33-3-x3 {
	display:grid; 
	grid-template-columns:33.3vw 33.4vw 33.3vw;
}

.heading {
	margin:80px 0 50px 0;
	color:var(--col-primary);
	font-family:var(--font-bold);
	text-transform: uppercase;
	text-align:center;	
}



/* Home */
#cascade-media {
	width:520px; 
	height:auto;
	overflow:hidden;
	/*background:url('../../images/assets/logo/cascade-media.svg');  */
	top:100px; 
	left:4vw;
	position:absolute;
	z-index:9998;

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

#landing-bg {
	width:100vw; 
	height:100vh; 
	overflow:hidden !important;
	position:relative;
}

#landing-img {
	width:100vw; 
	padding:var(--aspect-16-9); 
	background:url('../../images/assets/background/cascade-bg.jpg') var(--col-secondary);  
  	top: 0; 
  	bottom: 0; 
  	left: 0; 
  	right: 0;
  	position: absolute;
	
}

#landing-logo { 
	width:40%;
	height:auto;
	top:800px; 
	/*left:-2.0%; */
	left:-120.0%;
	transform: rotate(-25deg);
	position:absolute;
	z-index:7;

	transition: all 1.25s;
}

#landing-info {
	width:54%; 
	height:auto;
	color:var(--col-white);
	font-family:var(--quicksand);
	top:572px; 
	left:35%;
	position:relative;
	z-index:10;

	opacity:0;
	transition: all 0.5s;		
}

#landing-info p {
	font-weight:500;
	margin:25px 0 45px 0;
	position:relative !important;
}

#landing-info a {
	color:var(--col-primary); 
	font-size:84%; 
	font-family:var(--font-regular);
	padding:15px; 
	border-radius:10px;
	background:var(--col-white);

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);

}

#landing-info a:hover {
	font-weight:bold; 
	color:var(--col-white); 
	background:var(--col-primary);
	font-size:inherit; 
	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}



/* About */
#about-container {
	grid-template-columns:60% 40%;
	display:grid;
}

#about img {
	width:480px;
}

/* Projects */
#projects {
	width:100vw;
}

.project {
	width:100%;
	height:38vh;
	overflow:hidden !important;
	position:relative;
}

#projects-container {
	display:grid; 
	grid-template-columns:33.3vw 33.4vw 33.3vw;
}

.project-title {
	width:100%; 
	height:100%; 
	padding:32vh 0 0 0;
	text-align:center;
	background:var(--col-gray-opacity); 
	color:rgba(255,255,255,1.0); content:"";
	position:absolute; 
	z-index:10;
	overflow:hidden;
	opacity:0;
	
	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

.project-title:hover {
	width:100%; 
	margin:0;
	padding:18.5% 4% 0 4%;
	color:var(--col-white-opacity); 
	background:var(--col-gray-opacity);
	/*line-height:38vh;*/
	opacity:100;
}

.project img {
	width: 100%;
	min-width: 640px;
	height:auto;
	min-height: 100%;
	overflow: hidden;
}


/* Services */
#services {
	width:100vw; 
	padding:50px 0 0 0; 	
	text-align:center;
}

#services p {
	margin:0 auto;
	max-width:64vw;
}

#services-container {
	margin:50px 0 0 0; 
	padding:0 2.5vw; 
	display:grid; 
	grid-column-gap:2%; 
	grid-row-gap:25px; 
	/*grid-template-columns:30vw 30vw 30vw;*/
	grid-template-columns:46vw 46vw;
}


/* Service */
.service {
	width: 100%;
    height: 38vh;
    overflow: hidden !important;
    position: relative;
	overflow:hidden;
	border:7px solid var(--col-primary);*/ 

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

.service:hover {
	border:7px solid var(--col-tertiary);
	cursor:pointer;
	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

.serviceIncludes li::before {
	content:"-" !important;
	list-style:none;
}

.service div {
	width: 93%;
    height: 100%;
    padding:18% 4% 0 4%;
    
    text-align: center;
    background: var(--col-gray-opacity);
    color: var(--col-white);
    content: "";
    position: absolute;
    z-index: 10;
    overflow: hidden;
    opacity: 100;

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
  
}

.service div:hover {
	width: 93%;
    height: 100%;
 	padding:100% 4% 0 4%;
    text-align: center;
    background: none;
    color: var(--col-white);
    content: "";
    position: absolute;
    z-index: 10;
    overflow: hidden;
    opacity: 0;

    -webkit-transition:var(--ease-in);
	-moz-transition:var(--ease-in);
	-o-transition:var(--ease-in);
	transition:var(--ease-in);
}

.service img {
	width: 101%;
    min-width: 640px;
    height: auto;
    min-height: 100%;
    overflow: hidden;
    opacity: 0.42;
}

.service:hover img {
	opacity:1;
}


#policyOverview {
	min-height:auto !important;
	margin:320px auto 0 auto;
	z-index:10;
	font-size:0.72em;
}

#policyOverview header {
	width:100vw; 
	height:320px; 
	top:0; 
	left:0; 
	overflow:hidden;
	position:absolute; 
	z-index:0 !important;
	background:var(--col-secondary);
}

#policyOverview h1 {
	width:100vw;
	height:320px;
	background:var(--col-gray-opacity);
	color:var(--col-white);
	top:0; 
	left:0; 
	position:absolute; 
	z-index:1 !important;
}

#policyOverview header > img {
	width:100%;
	min-width:600px; 	
	min-height:320px !important; 
	top:0; 
	left:0; 
	position:absolute; 
	z-index:0 !important;
}
#policyOverview header h1 {
	width:100vw; 
	padding:192px 0 0 0; 
	color:var(--col-white);
	text-align:center;
}

#policyOverview h2 {
	margin:24px 0 0 0;
}

#policyOverview h3 {
	margin:16px 0 0 0;
}

#policyOverview h4, h5, h6 {
	margin:8px 0 0 0;
}

#policyOverview p > a {
	color:var(--col-dark-blue-gray);
	text-decoration:underline;
	-webkit-transition:var(--ease-in);
	-moz-transition:var(--ease-in);
	-o-transition:var(--ease-in);
	transition:var(--ease-in);
}

#policyOverview p > a:hover {
	color:var(--col-secondary);
}


#serviceOverview {
	min-height:auto !important;
	margin:320px auto 0 auto;
	z-index:10;
	font-size:0.72em;
}

#serviceOverview header {
	width:100vw; 
	height:320px; 
	top:0; 
	left:0; 
	overflow:hidden;
	position:absolute; 
	z-index:0 !important;
	background:var(--col-secondary);
}

#serviceOverview p > a {
	color:var(--col-dark-blue-gray);
	text-decoration:underline;
	-webkit-transition:var(--ease-in);
	-moz-transition:var(--ease-in);
	-o-transition:var(--ease-in);
	transition:var(--ease-in);
}

#serviceOverview p > a:hover {
	color:var(--col-secondary);
}

#serviceOverview h1 {
	width:100vw;
	height:320px;
	background:var(--col-gray-opacity);
	color:var(--col-white);
	top:0; 
	left:0; 
	position:absolute; 
	z-index:1 !important;
}

#serviceOverview h4, .serviceContent img {
	margin:40px 0 0 0;
}



#availableServices img  {
	margin:0 100px 0 0 !important;
	display:inline;
	width:84%;
}

.serviceContent {
	display:grid;
	grid-template-columns:auto auto;
	grid-gap: 5%; 
}

.serviceItem {
	display:initial;
}

/*#serviceOverview h4:first-of-type {
	margin:0 !important;
}*/


#serviceOverview header > img {
	width:100%;
	min-width:600px; 	
	min-height:320px !important; 
	bottom:-100%; 
	left:0; 
	position:absolute; 
	z-index:0 !important;
}

#serviceOverview header h1 {
	width:100vw; 
	padding:192px 0 0 0; 
	color:var(--col-white);
	text-align:center;
}

.serviceContainer {
	display:grid;
	grid-template-columns:70% 30%;
	grid-gap:5%;
}	

.serviceContainer div ul {
	display:block;

}

.serviceContainer div li::before {
	font-weight:bold;
  	content: ">>"; /* Insert content that looks like bullets */
  	padding-right: 8px;
  	color: var(--col-dark-blue-gray);

  	-webkit-transition: var(--ease-in);
	-moz-transition: var(--ease-in);
	-o-transition: var(--ease-in);
	transition: var(--ease-in);
}

.serviceContainer div li:hover::before  {
	font-weight:bold;
  	content: ">>"; /* Insert content that looks like bullets */
  	padding-right: 8px;
  	color:var(--col-secondary); /* Or a color you prefer */

}

.serviceContainer ul li > a {
	color: var(--col-dark-blue-gray);
	text-decoration: underline;

	-webkit-transition: var(--ease-in);
	-moz-transition: var(--ease-in);
	-o-transition: var(--ease-in);
	transition: var(--ease-in);
}

.serviceContainer ul li > a:hover {
	color: var(--col-secondary);
	text-decoration: underline;
}

.activeService::before, .activeService > a  {
	color:var(--col-secondary) !important;
	font-weight:bold;
}

#availableServices {
	margin:25px 0 0 0;
	padding:0 0 0 25px;
}

#availableServices div {
	margin:0 0 25px 0;
}


/* Contact */
#contact form {
	max-width:64vw;
	font-size:0.72em;
	/*overflow:hidden;*/
}

.contact-input-container {
	display:inline-grid; 
}

.contact-input-container.right {
	float:right;
}

.contact-input-container > a {
	color:var(--col-dark-blue-gray);
}

.contact-input-container > a:hover {
	color:var(--col-tertiary);
	font-weight:bold;
}

.contact-connect {
	max-width:320px;
	margin:6px 0 16px 0;
    display: flex;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.contact-connect:hover {
	margin:6px 0 16px 0;
    display: flex;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.contact-connect img {
	max-width:48px;
	display:inline-grid;
}

.contact-connect p {
	margin:8px 0 0 16px;
}

.contact-container {
	display:grid; 
	grid-template-columns:64vw;
}

#contact label, input, textarea, select, option {
	color:var(--col-gray);
	font-family:var(--font-light);
	font-size:1em;	
}

#contact input, textarea, select, option {
	padding:0px 5px;
}

.checkbox {
	width: 100px !important;
    height: 16px;
    display: inline-grid;
    margin: 25px 0;
    cursor: pointer !important;
    grid-template-columns:126px 16px;
}

#contact input:focus {
	border:solid 0.25vw var(--col-tertiary);
	outline:0;
}

#contact textarea:focus {
	border:solid 0.25vw var(--col-tertiary);
	outline:0;
}

#contact select:focus {
	border:solid 0.25vw var(--col-tertiary);
	outline:0;
}

#contact option:focus {
	border:solid 0.25vw var(--col-tertiary);
	outline:0;
}

#contact p {
	min-width:240px;
	width:28.5vw;			
}

#contact input {
	min-width:240px;
	width:28.5vw;
	min-height:42px;			
	border:solid 0.25vw var(--col-gray-opacity);
}

#contact select {
	min-width:240px;
	max-width:64vw;
	min-height:42px;
	border:solid 0.25vw var(--col-gray-opacity);
}

/*#contact select option:checked {
	background:var(--col-secondary);
}

#contact select option:not(:checked) { 

}*/

#contact textarea {
	min-width:240px;
	max-width:64vw !important;
	min-height:256px;
	padding:5px 5px;
	border:solid 0.25vw var(--col-gray-opacity);
}

#contact label {
	margin:8px 0 4px 0;
}

#contact h3 {
	margin:50px 0 0 0;
}

#contact h3:nth-child(1) {
	margin:0;
}

#contact button {
	margin:50px 0 0 0;
}

#submitOverlay {
	width:100vw; 
	height:100vh; 
	/*line-height:100vh;*/
	padding: 24vw 0;
	text-align:center; 
	color:var(--col-white); 
	background:var(--col-dark-gray-opacity); 
	top:0; 
	left:0; 
	position:fixed; 
	display:none; 
	z-index:99999999 !important; 	

	-webkit-transition:var(--ease-in) !important;
	-moz-transition:var(--ease-in) !important;
	-o-transition:var(--ease-in) !important;
	transition:var(--ease-in) !important;
}

#contactErrors, #contactSuccess {
	max-width:64vw;
	height:0 auto;		
	font-weight:bold;	
}

#contactErrors > div, #contactSuccess > div {
	margin:12px 0 0 0;
	padding:8px 6%;
}

#contactErrors > div {
	color:var(--col-white-opacity);
	background:var(--col-error-light);
}

#contactErrors > div::before {
	content:" \2718";
	padding:0 12px 0 0;
}

#contactSuccess > div {
	color:var(--col-white-opacity);
	background:var(--col-pass-light);
}

#contactSuccess > div::before {
	content:" \2714";
	padding:0 12px 0 0;
}

/* Content on Scroll */
header.scroll-nav {
	width:100% !important;
	height:80px !important;
	background:var(--col-primary);
	position:fixed;
	top:0;
	left:0;

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

#cascade-media.scroll-nav {
	width:192px; 
	height:auto;
	overflow:hidden;
	top:14px; 
	left:4vw;
	position:absolute;
	z-index:9998;
}

#map {
	min-width:320px;
	min-height:320px;
}


nav.scroll-nav {
	margin:-70px 0 0 0;
}

nav.scroll-nav a:hover {
	width:100px;
	display:inline-grid;
	font-family:var(--font-medium);
	color:var(--col-tertiary);
	/*text-shadow: 0 0 .9px var(--col-tertiary), 0 0 .9px var(--col-tertiary);*/
}

/* Notification */
#cookies-notification {
	width:100%;
	height:auto;
	padding:32px 12px;
	background:var(--col-dark-gray-opacity);
	z-index:99999999999;
	top:0;
	position:fixed;
	display:none;

	-webkit-transition:var(--ease-in);
	-moz-transition:var(--ease-in);
	-o-transition:var(--ease-in);
	transition:var(--ease-in);
}

#cookies-info {
	width:64vw;
	height:auto;
	margin:0 auto;
    color:var(--col-white);
	font-size: 0.72em;
}

#cookies-info > p {
	margin:0 0 25px 0;
}

#cookies-info > span {
	width:0 auto; 
	height:auto;
	font-size:0.92em; 
	padding:12px; 
	border:solid 1px var(--col-gray); 
	border-radius:12px; 
	cursor:pointer;
	background:var(--col-dark-blue-gray);

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

#cookies-info > span:hover {
	background:var(--col-tertiary);

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}

#cookies-info > a, a:hover {
	color:var(--col-white);
}

#cookies-accept {
	margin:0 25px 0 0;
}

#cookies-accept:hover {
	background:var(--col-pass-light) !important;

	-webkit-transition:var(--ease-out);
	-moz-transition:var(--ease-out);
	-o-transition:var(--ease-out);
	transition:var(--ease-out);
}


/*-----	Desktop Medium -----*/
@media all and (max-width:1600px) and (min-width:1201px){
	.mobile {
	display:none !important;
	}
	.desktop {
		display:inline !important;
	}

	/* Footer */
	footer{
		width:100vw;
		min-height:240px;
		height: auto;
		margin:0 auto;
		overflow:hidden;
		font-size:0.72em;
		color:var(--col-white);
		background:var(--col-primary);
		z-index:10;
	}

	footer #container {
		max-width:64vw; 
		margin:25px auto 25px auto; 
		display:grid; 
		grid-template-columns:auto auto auto
	}

	footer > #container ul {
		display:block;
	}

	footer > #container a:hover {
		color:var(--col-tertiary) !important;
	}

	footer > #container .connect{
		margin:6px 0 16px 0;
		display:flex;
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	  	filter: grayscale(100%);
	}

	footer > #container .connect:hover {
		-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	  	filter: grayscale(0%);
	}

	footer > #container .connect img {
		width:32px;
	}

	footer > #container .connect p{
		margin:2px 0 0 16px;
	}

	/* Home */
	#landing-logo { 
		width:40%;
		height:auto;
		top:800px; 
		/*left:-2.0%; */
		left:-120.0%;
		transform: rotate(-25deg);
		position:absolute;
		z-index:7;

		transition: all 1.25s;
	}

	#landing-info {
		width:54%; 
		height:auto;
		color:var(--col-white);
		font-family:var(--quicksand);
		top:380px; 
		left:38%;
		position:relative;
		z-index:10;

		opacity:0;
		transition: all 0.5s;		
	}

	#landing-info p {
		font-weight:500;
		margin:25px 0 45px 0;
		position:relative !important;
	}

	#landing-info a {
		color:var(--col-primary); 
		font-size:inherit; 
		font-family:var(--font-regular);
		padding:15px; 
		border-radius:10px;
		background:var(--col-bg);

	}

	#landing-info a:hover {
		font-weight:bold; 
	}

	/* About */
	#about-container {
		grid-template-columns:60% 40%;
		grid-column-gap:50px;
		display:grid;
	}

	#about img {
		width:360px;
	}

	#about {
		font-size:0.96em;
	}

	#about .call-to-action {
		margin:25px auto 0 auto;
	}

}




/*-----	Desktop Small -----*/
@media all and (max-width:1200px) and (min-width:921px){
	.mobile {
		display:inline !important;
	}
	.desktop {
		display:none !important;
	}

	/* Header('s'), Nav, Footer */
	header {
		width:100vw;
		height:auto;
		z-index:99999;
	}

	nav {
		width:100%;
		height:100vh;
		font-size:1em;
		font-family:var(--font-regular);
		background:var(--col-dark-gray-opacity);
		top:0;
		left:0;
		margin:0 auto;	
		position:absolute;
		z-index:9001;
		
		-webkit-transition:var(--ease-out);
		-moz-transition:var(--ease-out);
		-o-transition:var(--ease-out);
		transition:var(--ease-out);
	}

	nav:before {
		
  		box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
		filter: blur(10px);
	}

	nav ul {	
		margin:100px 0 0 0;	
		text-align:center !important;
		display:block !important;
	}

	nav li {
		width:100vw;
	}


	nav a {
		padding:24px 0;
	}

	nav a:hover {
		width:100vw;
		padding:24px auto;
		margin:0 auto;

		font-family:var(--font-medium);	
		color:var(--col-tertiary);
		text-align:center !important;
		text-shadow: 0 0 .9px var(--col-tertiary), 0 0 .9px var(--col-tertiary);
		
		
	}

	#navDisplay {  
	    display:none;  
	}  

	#navBtn {
		width:42px;
		height:32px;
		color:var(--col-white);
		text-align:center;
		line-height:54px;
		cursor:pointer;
		z-index:9999;
		top:16px;
		right:4vw;
		position:absolute;
	}

	/* Home */
	#m-cascade-media {
		width:380px; 
		height:auto;
		overflow:hidden;
		top:75px; 
		left:4vw;
		position:absolute;
		z-index:;

		-webkit-transition:var(--ease-out);
		-moz-transition:var(--ease-out);
		-o-transition:var(--ease-out);
		transition:var(--ease-out);
	}

	#landing-logo { 
		width:45%;
		height:auto;
		top:800px; 
		/*left:-2.0%; */
		left:-120.0%;
		transform: rotate(-25deg);
		position:absolute;
		z-index:7;

		transition: all 1.25s;
	}

	#landing-info {
		width:54%; 
		height:auto;
		color:var(--col-white);
		font-family:var(--quicksand);
		top:460px; 
		left:35%;
		position:relative;
		z-index:10;

		opacity:0;
		transition: all 0.5s;		
	}

	#landing-info p {
		font-weight:500;
		margin:25px 0 45px 0;
		position:relative !important;
	}

	#landing-info a {
		color:var(--col-primary); 
		font-size:inherit; 
		font-family:var(--font-regular);
		padding:15px; 
		border-radius:10px;
		background:var(--col-bg);

	}

	#landing-info a:hover {
		font-weight:bold; 
	}

	/* About */
	#about-container {
		grid-template-columns:60% 40%;
		grid-column-gap:50px;
		display:grid;
	}

	#about img {
		max-width:360px;
	}

	#about {
		font-size:0.86em;
	}

	#about a {
		font-size:1em;
	}

	#about .call-to-action {
		margin:25px auto 0 auto;
	}

	/* Projects */
	#projects-container {
		display:grid; 
		grid-template-columns:50vw 50vw;
	}

	/* Services */
	#services-container {
		margin:50px 0 0 0; 
		padding:0 2vw; 
		display:grid; 
		grid-column-gap:4vw; 
		grid-row-gap:25px; 
		grid-template-columns:44.8vw 44.8vw;
	}

	.service img {
	width: inherit;
    min-width: 640px;
    height: auto;
    min-height: 100%;
    overflow: hidden;
    opacity: 0.42;
	}

	.service:hover img {
		opacity:1;
	}

	/* Service */
	.serviceContainer {
		display:grid;
		grid-template-columns:100%;
		grid-gap:0;
	}

	#availableServices {
		display:grid;
		grid-template-columns:50% 50%;
		margin:25px 0 0 0;
		padding:0 !important;
	}

	/* Footer */
	footer{
		width:100vw;
		min-height:240px;
		height: auto;
		margin:0 auto;
		overflow:hidden;
		font-size:0.72em;
		color:var(--col-white);
		background:var(--col-primary);
		z-index:10;
	}

	footer #container {
		max-width:64vw; 
		margin:25px auto 25px auto; 
		display:grid; 
		grid-template-columns:40vw 24vw;
	}

	#sub-footer > div {
	width:64vw; 
	margin:0 auto; 
	padding:20px 0;	
}



}


/*-----	Tablet -----*/
@media all and (max-width:920px) and (min-width:641px){
	.mobile {
		display:inline !important;
	}
	.desktop {
		display:none !important;
	}


	/* Header('s'), Nav, Footer */
	header {
		width:100vw;
		height:auto;
		z-index:99999;
	}

	nav {
		width:100%;
		height:100vh;
		font-size:1em;
		font-family:var(--font-regular);
		background:var(--col-dark-gray-opacity);
		top:0;
		left:0;
		margin:0 auto;	
		position:absolute;
		z-index:9001;
		
		-webkit-transition:var(--ease-out);
		-moz-transition:var(--ease-out);
		-o-transition:var(--ease-out);
		transition:var(--ease-out);
	}

	nav:before {
		
  		box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
		filter: blur(10px);
	}

	nav ul {	
		margin:100px 0 0 0;	
		text-align:center !important;
		display:block !important;
	}

	nav li {
		width:100vw;
	}


	nav a {
		padding:24px 0;
	}

	nav a:hover {
		width:100vw;
		padding:24px auto;
		margin:0 auto;

		font-family:var(--font-medium);	
		color:var(--col-tertiary);
		text-align:center !important;
		text-shadow: 0 0 .9px var(--col-tertiary), 0 0 .9px var(--col-tertiary);
		
		
	}

	#navDisplay {  
	    display:none;  
	}  

	#navBtn {
		width:42px;
		height:32px;
		color:var(--col-white);
		text-align:center;
		line-height:54px;
		cursor:pointer;
		z-index:9999;
		top:16px;
		right:4vw;
		position:absolute;
	}

	/* Home */
	#m-cascade-media {
		width:380px; 
		height:auto;
		overflow:hidden;
		top:75px; 
		left:4vw;
		position:absolute;
		z-index:;

		-webkit-transition:var(--ease-out);
		-moz-transition:var(--ease-out);
		-o-transition:var(--ease-out);
		transition:var(--ease-out);
	}

	#landing-logo { 
		width:420px;
		height:auto;
		top:800px; 
		/*left:-2.0%; */
		left:-120.0%;
		transform: rotate(-25deg);
		position:absolute;
		z-index:7;

		transition: all 1.25s;
	}

	#landing-info {
		width:60%; 
		height:auto;
		color:var(--col-white);
		font-family:var(--quicksand);
		top:310px; 
		left:35%;
		position:relative;
		z-index:10;

		opacity:0;
		transition: all 0.5s;		
	}

	#landing-info p {
		font-weight:500;
		margin:25px 0 45px 0;
		position:relative !important;
	}

	#landing-info a {
		color:var(--col-primary); 
		font-size:inherit; 
		font-family:var(--font-regular);
		padding:15px; 
		border-radius:10px;
		background:var(--col-bg);

	}

	#landing-info a:hover {
		font-weight:bold; 
	}

	/* About */
	#about-container {
		grid-template-columns:100%;
		display:grid;
	}

	#about img {
		max-width:92%;
		margin:32px auto 32px auto;
	}

	#about {
		margin:0 auto;
		font-size:1em;
		text-align:center;
	}

	#about p {
		width:100%;
	}

	#about .call-to-action {
		margin:25px auto 0 auto;
	}

	/* Projects */
	#projects-container {
		display:grid; 
		grid-template-columns:50vw 50vw;
	}

	/* Services */
	#services p {
		margin:0 auto;
		max-width:72vw;
		font-size:0.92em;
	}

	#services-container {
		margin:50px 0 0 0; 
		padding:0 1vw; 
		display:grid; 
		grid-column-gap:4vw; 
		grid-row-gap:25px; 
		grid-template-columns:44.8vw 44.8vw;
	}
	.service img {
		width: inherit;
	    min-width: 640px;
	    height: auto;
	    min-height: 100%;
	    overflow: hidden;
	    opacity: 0.42;
	}

	.service:hover img {
		opacity:1;
	}

	#serviceOverview {
	min-height:auto !important;
	margin:320px auto 0 auto;
	z-index:10;
	}

	#serviceOverview header {
		width:100vw; 
		height:320px; 
		top:0; 
		left:0; 
		overflow:hidden;
		position:absolute; 
		z-index:0 !important;
		background:var(--col-secondary);
	}

	#serviceOverview  h1 {
		width:100vw;
		height:320px;
		background:var(--col-gray-opacity);
		color:var(--col-white);
		top:0; 
		left:0; 
		position:absolute; 
		z-index:1 !important;
	}

	#serviceOverview header > img {
		width:100%;
		min-width:600px; 	
		min-height:320px !important; 
		bottom:-20%; 
		left:0; 
		opacity:0.72;
		position:absolute; 
		z-index:0 !important;
	}

	#serviceOverview header h1 {
		width:100vw; 
		padding:160px 0 0 0; 
		color:var(--col-white);
		text-align:center;
	}


	/* Contact */
	#contact form {
		max-width:64vw;
		font-size:0.72em;
		/*overflow:hidden;*/
	}

	.contact-input-container {
		grid-template-columns:64vw;
		display:inline-grid; 
	}

	.contact-input-container.right {
		float:right;
	}

	.contact-container {
		display:grid; 
		grid-template-columns:64vw;
	}

	#contact label, input, textarea, select, option {
		color:var(--col-gray);
		font-family:var(--font-light);
		font-size:1em;	
	}

	#contact input {
		min-width:240px;
		width:inherit !important;
		min-height:42px;			
		border:solid 0.25vw var(--col-gray-opacity);
	}

	#contact select {
		min-width:240px;
		max-width:64vw;
		min-height:42px;
		border:solid 0.25vw var(--col-gray-opacity);
	}

	#contact textarea {
		min-width:240px;
		max-width:64vw !important;
		min-height:256px;
		border:solid 0.25vw var(--col-gray-opacity);
	}

	#contact label {
		margin:8px 0 4px 0;
	}

	#contact h3 {
		margin:120px 0 0 0;
	}

	#contact h3:nth-child(1) {
		margin:0;
	}

	#contact button {
		margin:50px 0 0 0;
	}

	/* Footer */
	footer{
		width:100vw;
		min-height:240px;
		height: auto;
		margin:0 auto;
		overflow:hidden;
		font-size:0.72em;
		color:var(--col-white);
		background:var(--col-primary);
		z-index:10;
	}

	footer #container {
		max-width:46vw; 
		margin:25px auto 25px auto; 
		display:grid; 
		grid-template-columns:100%;
	}

	footer #container > div {
		margin:25px 0; 		
	}

	footer #container > a {
		width:auto;
	}

	#sub-footer > div {
	width:46vw; 
	margin:0 auto; 
	padding:20px 0;	
}




}


/*-----	Mobile -----*/
@media all and (max-width:640px) and (min-width:0px){
	.mobile {
		display:inline !important;
	}
	.desktop {
		display:none !important;
	}

		/* Header('s'), Nav, Footer */
	header {
		width:100vw;
		height:auto;
		z-index:99999;
	}

	nav {
		width:100vw;
		height:100vh;
		font-size:1em;
		font-family:var(--font-regular);
		background:var(--col-dark-gray-opacity);
		top:0;
		left:0;
		/*margin:0 auto;	*/
		position:absolute;
		z-index:9001;
		
		-webkit-transition:var(--ease-out);
		-moz-transition:var(--ease-out);
		-o-transition:var(--ease-out);
		transition:var(--ease-out);
	}

	nav:before {		
  		box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
		filter: blur(10px);
	}

	nav ul {	
		margin:100px 0 0 0;	
		text-align:center !important;
		display:block !important;
	}

	nav li {
		width:100vw;
	}


	nav a {
		padding:24px 0;
	}

	nav a:hover {
		width:100vw;
		padding:24px auto;
		margin:0 auto;

		font-family:var(--font-medium);	
		color:var(--col-tertiary);
		text-align:center !important;
		text-shadow: 0 0 .9px var(--col-tertiary), 0 0 .9px var(--col-tertiary);
		
		
	}

	#navDisplay {  
	    display:none;  
	}  

	#navBtn {
		width:42px;
		height:32px;
		color:var(--col-white);
		text-align:center;
		line-height:54px;
		cursor:pointer;
		z-index:9999;
		top:16px;
		right:6vw;
		position:absolute;
	}

	content {
		margin:0;
	}

	main {
		min-height:100vh !important;
		/* height:auto !important; */
		position:relative !important;
	}

	#landing-bg {
		min-height:auto !important;
		font-size:0.84em;
	}

	/* Home */
	#m-cascade-media {
		width:90vw;
		height:auto;
		overflow:hidden;
		top:75px; 
		left:4vw;
		position:absolute;
		z-index:;

		-webkit-transition:var(--ease-out);
		-moz-transition:var(--ease-out);
		-o-transition:var(--ease-out);
		transition:var(--ease-out);
	}

	#landing-logo { 
		width:300px;
		height:auto;
		top:320px; 
		/*left:-2.0%; */
		left:-120.0%;
		transform: rotate(-25deg);
		position:relative;
		z-index:7;

		transition: all 1.25s;
	}

	#landing-info {
		width:80%; 
		height:auto;
		color:var(--col-white);
		font-family:var(--quicksand);
		font-size:0.92em;
		top:40px; 
		left:0;
		margin:0 auto 80px auto;
		position:relative;
		z-index:10;

		opacity:0;
		transition: all 0.5s;		
	}

	#landing-info p {
		font-weight:500;
		margin:25px 0 45px 0;
		position:relative !important;
	}

	#landing-info a {
		color:var(--col-primary); 
		font-size:inherit; 
		font-family:var(--font-regular);
		padding:15px; 
		border-radius:10px;
		background:var(--col-bg);
	}

	#landing-info a:hover {
		font-weight:bold; 
	}

	/* About */
	#about-container {
		grid-template-columns:100%;
		display:grid;
	}

	#about img {
		max-width:92%;
		margin:32px auto 32px auto;
	}

	#about {
		margin:0 auto;
		font-size:1em;
		text-align:center;
	}

	#about p {
		width:100%;
	}

	#about .call-to-action {
		margin:25px auto 0 auto;
	}

	/* Projects */
	#projects-container {
		display:grid; 
		grid-template-columns:100vw;
	}

	.project-title > p {
		font-size: 0.64em;
	}

	/* Services */
	#services {
	width:100vw; 
	padding:10px 0 0 0; 
	text-align:center;
	}

	#services p {
		margin:0 auto;
		max-width:72vw;
		font-size:0.92em;
	}

	#services-container {
		min-width:320px !important;
		margin:50px auto 0 auto; 
		padding:0 1.5vw; 
		display:grid; 
		grid-row-gap:25px; 
		grid-template-columns:90vw;
	}

	.service {
		min-width:320px !important;
		margin:0 0 0 1.75vw;
	}

	.service div {
		 padding:4% 4% 0 4%;
	}

	.service div:hover {
	 	padding:100% 4% 0 4%;
	}

	.service img {
		width: inherit;
	    min-width: 640px;
	    height: auto;
	    min-height: 100%;
	    overflow: hidden;
	    opacity: 0.42;
	}

	.service:hover img {
		opacity:1;
	}

	#serviceOverview {
	min-height:auto !important;
	margin:320px auto 0 auto;
	z-index:10;
	}

	#serviceOverview header {
		width:100vw; 
		height:320px; 
		top:0; 
		left:0; 
		overflow:hidden;
		position:absolute; 
		z-index:0 !important;
		background:var(--col-secondary);
	}

	#serviceOverview h1 {
		width:100vw;
		height:320px;
		background:var(--col-gray-opacity);
		color:var(--col-white);
		top:0; 
		left:0; 
		position:absolute; 
		z-index:1 !important;
	}

	#serviceOverview header > img {
		width:100%;
		min-width:600px; 	
		min-height:320px !important; 
		bottom:-20%; 
		left:0; 
		opacity:0.72;
		position:absolute; 
		z-index:0 !important;
	}

	#serviceOverview header h1 {
		width:100vw; 
		padding:160px 0 0 0; 
		color:var(--col-white);
		text-align:center;
	}


	.serviceContent {
		display:grid;
		grid-template-columns:auto;
		grid-gap:0; 
	}

	.serviceItem {
		max-height:240px;
		display:initial;
	}

	.serviceContent:first-of-type > img {
		display:none !important;
	}

	/* Contact */
	#contact form {
		max-width:64vw;
		font-size:0.72em;
		/*overflow:hidden;*/
	}

	.contact-input-container {
		grid-template-columns:64vw;
		display:inline-grid; 
	}

	.contact-input-container.right {
		float:right;
	}

	.contact-container {
		display:grid; 
		grid-template-columns:64vw;
	}

	#contact label, input, textarea, select, option {
		color:var(--col-gray);
		font-family:var(--font-light);
		font-size:1em;	
	}

	#contact input {
		min-width:300px;
		width:inherit;
		min-height:42px;			
		border:solid 0.25vw var(--col-gray-opacity);
	}

	#contact select {
		min-width:300px;
		max-width:64vw;
		min-height:42px;
		border:solid 0.25vw var(--col-gray-opacity);
	}

	#contact textarea {
		min-width:300px;
		max-width:inherit;
		min-height:256px;
		border:solid 0.25vw var(--col-gray-opacity);
	}

	#contact label {
		min-width:300px;
		margin:8px 0 4px 0;
	}

	#contact h3 {
		margin:120px 0 0 0;
	}

	#contact h3:nth-child(1) {
		margin:0;
	}

	#contact button {
		margin:50px 0 0 0;
	}

	#map {
		max-height:320px;
	}

	footer {
		min-width:320px;
	}

	footer #container {
		min-width:280px;
		margin:25px auto 25px auto; 
		display:grid; 
		grid-template-columns:inherit;
	}

	footer #container > div {
		margin:25px 0; 		
	}

	footer #container > a {
		width:auto;
	}



	
}

/* Shared 920 > 0 */
@media (max-width: 920px) and (min-width: 0px){

	/* Service */
	.serviceContainer {
		display:grid;
		grid-template-columns:100%;
		grid-gap:0;
	}

	#availableServices {
		display:grid;
		grid-template-columns:100%;
		margin:25px 0 0 0;
		padding:0 !important;

	}

	#availableServices > img {
		height:92%;
		padding:0 0 150px 0;
	}

	#availableServices > div {
		margin:50px 0 0 0;
	}
}


/*-----	Tablet-Horizontal -----*/
@media all and (max-width:1024px) and (min-width:768px) and (orientation: landscape) {
	
}

/*-----	Mobile-Horizontal -----*/
@media all and (max-width:767px) and (min-width:0px) and (orientation: landscape) {
	
}

/*-----	Print -----*/
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}