/*
 * @author 			Steven Walters
 * @website			http://elephanteardesign.com
 * @description		custom CSS for EED
 * @version			1.0
 * Theme Name:		EED Theme
 * Author:			Elephant Ear Design
 * Author URI:		http://elephanteardesign.com
 * Version:			1.0
 */

body, html {
	min-width: 320px;
}
body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-rendering: optimizeLegibility;
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	font-weight: 300;
	letter-spacing: 0.05em;
	overflow-x: hidden;
	overflow-y: hidden;
	background: linear-gradient(45deg, #0f172a,#1e3a5f,#312e81,#1e3a5f,#0f172a);
	min-width: 400px;
}
*, *::before, *::after {
  box-sizing: border-box;
}
div, article {
	position: relative;
}
p {
	padding: 0;
    line-height: 1.8em;
    font-size: 1.3em;
}
h2 {
  font-size: 4.5em;
  line-height: 1em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #333;
  padding: 0;
  margin: 0 0 30px 0;
}

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark p, .section-dark a.learn-more {
	color: #fff;
}
.do-fade-in-bottom,.do-fade-in {
	opacity: 0;
}



.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
			opacity:   0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
			opacity:   1;
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
			opacity:   0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
			opacity:   1;
  }
}





header {
	z-index: 99;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 20px;
}
header.fixed {
	position: fixed;
}
header.admin {
	padding-top: 50px;
}
header .container {
	transition-property: all;
	--tw-ease: var(cubic-bezier(0, 0, .2, 1));
    transition-timing-function: var(cubic-bezier(0, 0, .2, 1));
	--tw-duration: .5s;
    transition-duration: .5s;	
	border: 2px solid transparent;
	border-radius: 40px;
	justify-content: space-between;
	align-items: center;  
	gap: 16px; 
	padding-inline: calc(.25rem * 5);
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	width: 1280px;
	margin: 0 auto;
	/*will-change: background, backdrop-filter, width, border-color, box-shadow;*/
}
header .container > div {
	transition: all .2s linear;
}
header.fixed .container {
	background: rgba(255, 255, 255, 0.8); 
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	width: 960px;
	border-color: #ED1C24;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
header a.logo {
	text-decoration: none;
	display: block;
	width: 60px;
	height: 60px;
	margin-top: 10px;
	transition: all .2s linear;
}
header a.logo svg {
	width: 100%;
	height: auto;
	fill: #fff;
}
header.fixed a.logo svg {
	fill: #ED1C24;
}
a.header-button {
	padding: 5px 40px 5px 25px;
	border-radius: 30px;
	background: rgba(0,0,0,0.9);
	color: #fff;
	text-decoration: none;
	display: inline-block;
	justify-content: center;
	line-height: 40px;
	box-shadow: 0px 4px 24px 0px rgba(255,255,255, 0.20), 0px 1px 6px 0px rgba(238,238,238, 0.30);
	white-space: nowrap;
	position: relative;
	transition: all .2s linear;
	font-weight: 400;
}

a.header-button svg {
	position: absolute;
	top: 14px;
	/*right: 35px*/
}
a:hover.header-button {
	background: rgba(200,14,23,1);
}
footer a.header-button {
	box-shadow: 0px 4px 24px 0px rgba(255,255,255, 0.10), 0px 1px 6px 0px rgba(238,238,238, 0.20);
}
footer a:hover.header-button {
	box-shadow: 0px 4px 24px 0px rgba(51,51,51, 0.10), 0px 1px 6px 0px rgba(0,0,0, 0.20);
}
.h-col-1, .h-col-3 {
	flex: 0 0 190px;
}
.h-col-2 {
	flex: 1;
	justify-content: center;
}
.h-col-3 {
	display: flex;
	justify-content: flex-end;
}
.h-col-4 {
	display: none;
	flex: 0 0 80px;
	justify-content: flex-end;
}
nav {
	display: flex;
	justify-content: center;
}
nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	justify-content: center;
	transition: all .2s linear;
}
nav li {
	display: flex;
	align-items: center;
}
nav a {
	text-decoration: none;
	padding: 10px 20px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 400;
}
nav a::after {
/*    content: '';
    display: block;
    width: 0;
    height: 5px;
    background: #fff;
    transition: width .3s;
	margin-top: 6px;*/
}
nav a:hover::after {
/*    width: 100%;
    transition: width .3s;*/
}
header.fixed nav a {
	color: #444;
}
header.fixed nav a::after {
    background: #ED1C24;
}

.header-bg {
	z-index: 89;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 160px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
}
@media only screen and (max-width: 1700px) {
	p {
		/*line-height: 1.5em;*/
		font-size: 1.2em;
	}
}
@media only screen and (max-width: 1280px) {
	header .container {
		width: 100%;
	}
	/*p {
		line-height: 1.8em;
		font-size: 1em;
	}*/
}
@media only screen and (max-width: 980px) {
	header.fixed .container {
		width: 92%;
	}

}
@media only screen and (max-width: 820px) {
	.h-col-1, .h-col-3 {
		flex: 0 0 0;
	}	
}
@media only screen and (max-width: 700px) {
	.h-col-1, .h-col-4 {
		flex: 0 0 64px;
	}
	.h-col-2 {
		display: none;
	}
	.h-col-3 {
		flex: 1;
		justify-content: center;
	}	
	.h-col-4 {
		display: flex;
	}	
	header {
		min-width: 400px;
	}
}
@media only screen and (max-width: 450px) {

}
/* PROJECTS ****************************************/
	.section {
		z-index: 5;
		width: 100vw;
		min-height: 100vh; 
		display: flex;
		flex-direction:row;
		align-items: center;	
	}

	.section .container {
		margin: 0 auto;
		min-width: 400px;
	}

		/* PROJECT HERO / MAC */

				#port-hero.section {

				}
				
				
				
				
				#port-hero .container {
					width: 90%;
					display: flex;
					flex-direction:row;
					align-items: center;
					justify-content: center;
					z-index: 5;
					margin-top: 120px;
				}
				
				#port-hero .container > .col {
					transition: flex-basis 0.4s ease-in-out; 
				}
				#port-hero .container > .col:first-child {
					flex-basis: 60%;
				
				}
				#port-hero .container > .col:last-child {
					flex-basis: 40%;
				}
				#port-hero h1 small {
					display: block;
					text-transform: uppercase;
					font-size: 0.3em;
					line-height: 0.8em;
					letter-spacing: 0.02em;
					font-weight: 500;
					opacity: 0.7;
				}
				#port-hero h1 {
					font-size: 3.8em;
					line-height: 1em;
					font-style: normal;
					font-weight: 700;
					letter-spacing: -0.02em;
					color: #fff;
					padding: 0;
					margin: 0 0 30px 0;
					opacity: 0;
				}
				#port-hero .project-intro {
					opacity: 0;
				}
				.project-info-wrapper {
					padding-left: 30px;
				}
				a.visit-website {
					display: inline-block;
					font-size: 1.2em;
					line-height: 30px;
					text-decoration: none;
					color: #9f9fa9;
					font-weight: 700;
					letter-spacing: -0.02em;
					transition: all .3s linear;
					opacity: 0;
					margin-top: 20px;
				}				
				a.visit-website svg {
					height: 32px;
					vertical-align: middle;
					transition: all .3s linear;
					margin: -5px 0 0 5px;
				}
				a.visit-website svg * {
					fill: #9f9fa9;
				}
				a:hover.visit-website {
					color: #fff;
				}				
				a:hover.visit-website svg * {
					fill: #fff;
				}
				
					
				#mac {
					width: 98%;
					max-width: 1750px;
					z-index: 1;
				}
				.test-mac .mac-shadow-wrapper {
					width: 100%;
					height: 100px;
					z-index: 1;
					position: absolute;
					bottom: -95px;
					left: 50%;
					transform: translateX(-50%);
					overflow: hidden;
					
				}
				.test-mac .mac-shadow {
					/*box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;*/
					background: rgba(0,0,0,0.7);
					 filter: blur(25px);
					width: 80%;
					height: 100px;
					position: absolute;
					top: -150px;
					left: 50%;
					transform: translateX(-50%);	
					border-radius: 50%;
					scale: 0.99;
					opacity: 0;
				}
				.test-mac svg {
					position: relative;
					z-index: 3;
					width: 100%;
					height: auto;
				}
				.test-mac svg * {
					/*fill: #000;*/
					fill-opacity: 0.1;
				}
				.test-mac svg * {
					stroke: #fff;
					stroke-opacity: 0.7;
				}
				.test-mac .mac-screen {
					left: 13.85%;
					top: 10.45%;
					position: absolute;
					width: 72.15%;
					height: 75.95%;
					/*background: rgba(0,0,0,0.5);*/
					z-index: 2;
					overflow: hidden;
					opacity: 0;
				}
				.test-mac .mac-screen-mask {
					background: #fff;
					-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 90% 100%);
					clip-path: polygon(60% 0, 100% 0, 100% 100%, 90% 100%);
					height: 100%;
					width: 100%;
					top: 0;
					left: 0;
					position: absolute;
					z-index: 6;
					/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.2+1,0+100 */
					background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 1%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
					background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 1%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
					background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 1%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */	
				}
				.test-mac .mac-screen img {
					width: 100%;
					height: auto;
				}
				svg#svg-mac .svg-elem-1{stroke-dashoffset:1588.166015625px;stroke-dasharray:1588.166015625px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s}svg#svg-mac.active .svg-elem-1{stroke-dashoffset:0;fill:rgb(255,255,255)}svg#svg-mac .svg-elem-2{stroke-dashoffset:3430.22216796875px;stroke-dasharray:3430.22216796875px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s}svg#svg-mac.active .svg-elem-2{stroke-dashoffset:0;fill:rgb(0,0,0)}svg#svg-mac .svg-elem-3{stroke-dashoffset:1774.58349609375px;stroke-dasharray:1774.58349609375px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2s}svg#svg-mac.active .svg-elem-3{stroke-dashoffset:0;fill:rgb(254,254,254)}svg#svg-mac .svg-elem-4{stroke-dashoffset:27.132741228718345px;stroke-dasharray:27.132741228718345px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s}svg#svg-mac.active .svg-elem-4{stroke-dashoffset:0}svg#svg-mac .svg-elem-5{stroke-dashoffset:1424.0860595703125px;stroke-dasharray:1424.0860595703125px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4s}svg#svg-mac.active .svg-elem-5{stroke-dashoffset:0;fill:rgb(253,253,253)}svg#svg-mac .svg-elem-6{stroke-dashoffset:691.7429809570312px;stroke-dasharray:691.7429809570312px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s}svg#svg-mac.active .svg-elem-6{stroke-dashoffset:0}svg#svg-mac .svg-elem-7{stroke-dashoffset:160.46690368652344px;stroke-dasharray:160.46690368652344px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s}svg#svg-mac.active .svg-elem-7{stroke-dashoffset:0}svg#svg-mac .svg-elem-8{stroke-dashoffset:1588.166015625px;stroke-dasharray:1588.166015625px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.7000000000000002s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.7000000000000002s}svg#svg-mac.active .svg-elem-8{stroke-dashoffset:0}				

	/* PROJECT DESCRIPTION / OUR CHALLENGE / IPHONE */
			#port-descrip {
			
				/*background: linear-gradient(180deg, #312e81,#1e3a5f,#0f172a);*/
			
			}
			#port-descrip .container {
				width: 90%;
				display: flex;
				flex-direction:row;
				align-items: center;
				height: 100%;
				z-index: 2;
				flex-direction: row-reverse;
			}
			#port-descrip .container > .col:first-child {
				flex-basis: 40%;
			}
			#port-descrip .container > .col:last-child {
				flex-basis: 60%;
			}
			
			#port-descrip h2 {
				font-size: 4.5em;
				line-height: 1em;
				font-weight: 700;
				letter-spacing: -0.02em;
				padding: 0;
				margin: 0 0 30px 0;
				color: #fff;
			}			
			
			/*****************/
			.test-iphone {
				height: 70vh;
				max-height: 980px;
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 2;
				transform: translate(-50%,-50%);
				/*max-width: 1750px;*/
			}
			.test-iphone .iphone-shadow-wrapper {
				width: 100%;
				height: 70px;
				z-index: 1;
				position: absolute;
				bottom: -70px;
				left: 50%;
				transform: translateX(-50%);
				overflow: hidden;
				
			}
			.test-iphone .iphone-shadow {
				background: rgba(0,0,0,0.7);
				 filter: blur(25px);
				width: 50%;
				height: 70px;
				position: absolute;
				top: -100px;
				left: 50%;
				transform: translateX(-50%);	
				border-radius: 50%;
				scale: 0.99;
				opacity: 0;
			}
			.test-iphone svg {
				position: relative;
				z-index: 3;
				height: 100%;
				width: auto;
			}
			/*.test-iphone svg g {
				stroke: #ccc;
			}*/
			
			.test-iphone svg * {
				/*fill: #000;*/
				fill-opacity: 0.1;
			}
			.test-iphone svg * {
				stroke: #fff;
				stroke-opacity: 0.7;
			}
			
			.test-iphone .iphone-screen {
				left: 7.85%;
				top: 13.5%;
				position: absolute;
				width: 84.33%;
				height: 71.98%;
				/*background: rgba(0,0,0,0.5);*/
				z-index: 2;
				overflow: hidden;
				opacity: 0;
			}
			.test-iphone .iphone-screen img {
				height: 100%;
				width: auto;
			}
			svg#iphone-svg .svg-elem-1{stroke-dashoffset:624.0280151367188px;stroke-dasharray:624.0280151367188px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s}svg#iphone-svg.active .svg-elem-1{stroke-dashoffset:0;fill:rgb(255,255,255)}svg#iphone-svg .svg-elem-2{stroke-dashoffset:1479.776123046875px;stroke-dasharray:1479.776123046875px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s}svg#iphone-svg.active .svg-elem-2{stroke-dashoffset:0;fill:rgb(0,0,0)}svg#iphone-svg .svg-elem-3{stroke-dashoffset:782.2478637695312px;stroke-dasharray:782.2478637695312px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2s}svg#iphone-svg.active .svg-elem-3{stroke-dashoffset:0;fill:rgb(253,253,253)}svg#iphone-svg .svg-elem-4{stroke-dashoffset:624.0280151367188px;stroke-dasharray:624.0280151367188px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s}svg#iphone-svg.active .svg-elem-4{stroke-dashoffset:0;fill:rgb(253,253,253)}svg#iphone-svg .svg-elem-5{stroke-dashoffset:54.05827331542969px;stroke-dasharray:54.05827331542969px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4s}svg#iphone-svg.active .svg-elem-5{stroke-dashoffset:0;fill:rgb(253,253,253)}svg#iphone-svg .svg-elem-6{stroke-dashoffset:20.84955592153876px;stroke-dasharray:20.84955592153876px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s}svg#iphone-svg.active .svg-elem-6{stroke-dashoffset:0;fill:rgb(253,253,253)}svg#iphone-svg .svg-elem-7{stroke-dashoffset:64.96077758515075px;stroke-dasharray:64.96077758515075px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s}svg#iphone-svg.active .svg-elem-7{stroke-dashoffset:0;fill:rgb(253,253,253)}
			
			
			.test-sausage {
				position: absolute;
				min-height: 70vh;
				width: 100vw;
				border-radius: 50vh;
				top: 50%;
				transform: translateY(-50%);
				left: -100%;
				z-index: 1;
				background: rgba(255,255,255, 0.05);
				/*backdrop-filter: blur(28px) saturate(120%);
				-webkit-backdrop-filter: blur(28px) saturate(120%);*/
				/*border: 1px solid rgba(255,255,255, 0.01);*/
				/*box-shadow: 0 4px 50px rgba(0, 0, 0, 0.1), inset 0 10px 40px rgba(255,255,255, 0.1);*/	
			}
			.port-descrip-text {
				padding: 10% 10% 10% 40px;
			}
			.port-descrip-text * {
				opacity: 0;
			}

			
				
	/* PROJECT SLIDES / IPAD */
			#ipad {
				width: 98%;
				max-width: 1000px;
				z-index: 1;
			}
			.test-ipad .ipad-shadow-wrapper {
				width: 100%;
				height: 100px;
				z-index: 1;
				position: absolute;
				bottom: -95px;
				left: 50%;
				transform: translateX(-50%);
				overflow: hidden;
				
			}
			.test-ipad .ipad-shadow {
				/*box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;*/
				background: rgba(0,0,0,0.7);
				 filter: blur(25px);
				width: 80%;
				height: 100px;
				position: absolute;
				top: -150px;
				left: 50%;
				transform: translateX(-50%);	
				border-radius: 50%;
				scale: 0.99;
				opacity: 0;
			}
			.test-ipad svg {
				position: relative;
				z-index: 3;
				width: 100%;
				height: auto;
			}
			.test-ipad svg * {
				/*fill: #000;*/
				fill-opacity: 0.1;
			}
			.test-ipad svg * {
				stroke: #fff;
				stroke-opacity: 0.7;
			}
			.test-ipad .ipad-screen {
				left: 10.23%;
				top: 7.83%;
				position: absolute;
				width: 79.31%;
				height: 83.87%;
				z-index: 2;
				overflow: hidden;
				opacity: 0;
			}
			.test-ipad .ipad-screen-mask {
				background: #fff;
				-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 90% 100%);
				clip-path: polygon(60% 0, 100% 0, 100% 100%, 90% 100%);
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
				position: absolute;
				z-index: 6;
				opacity: 0.5;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.2+1,0+100 */
				background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 1%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 1%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 1%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */	
			}
			.test-ipad .ipad-screen img {
				width: 100%;
			
				height: auto;
			}
			
			#svg-ipad .svg-elem-1{stroke-dashoffset:871.8319702148438px;stroke-dasharray:871.8319702148438px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s}#svg-ipad.active .svg-elem-1{stroke-dashoffset:0}#svg-ipad .svg-elem-2{stroke-dashoffset:1983.5px;stroke-dasharray:1983.5px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s}#svg-ipad.active .svg-elem-2{stroke-dashoffset:0}#svg-ipad .svg-elem-3{stroke-dashoffset:1045.0570068359375px;stroke-dasharray:1045.0570068359375px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2s}#svg-ipad.active .svg-elem-3{stroke-dashoffset:0;fill:rgb(253,253,253)}#svg-ipad .svg-elem-4{stroke-dashoffset:1045.0570068359375px;stroke-dasharray:1045.0570068359375px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s}#svg-ipad.active .svg-elem-4{stroke-dashoffset:0;fill:rgb(253,253,253)}#svg-ipad .svg-elem-5{stroke-dashoffset:871.8319702148438px;stroke-dasharray:871.8319702148438px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.4s}#svg-ipad.active .svg-elem-5{stroke-dashoffset:0}#svg-ipad .svg-elem-6{stroke-dashoffset:52.397429348887464px;stroke-dasharray:52.397429348887464px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.5s}#svg-ipad.active .svg-elem-6{stroke-dashoffset:0}#svg-ipad .svg-elem-7{stroke-dashoffset:20.786724068466963px;stroke-dasharray:20.786724068466963px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s,fill 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.6s}#svg-ipad.active .svg-elem-7{stroke-dashoffset:0}


			#port-gallery {
				/*background: linear-gradient(180deg, #312e81,#1e3a5f,#0f172a);*/
				transition: background .2s linear;
			}
			#port-gallery .container {
				width: 90%;
				display: flex;
				flex-direction: row-reverse;
				z-index: 2;
				align-items: flex-start;
			}
			
			#port-gallery .container > .col:last-child {
				flex-basis: 40%;
				align-self: flex-start;
			}
			#port-gallery .container > .col:first-child {
				flex-basis: 60%;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.sticky {
				position: -webkit-sticky; /* for Safari */
				position: sticky !important;
				top: 0;
				align-self: flex-start; /* <-- this is the fix */
			}
			ul.gallery-cards {
				list-style: none;
				margin: 0;
				padding: 0 60px 0 40px;
				
			}
			ul.gallery-cards li {
				/*background: rgba(255,255,255, 0.05);
				border-radius: 10px;
				border: 1px solid rgba(255,255,255, 0.09);
				box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255, 0.60), inset 0 -1px 0 rgba(0, 0, 0, 0.04);*/
				/*padding: 2rem;*/
				height: 100vh;
				display: flex;
				align-items: center;
			}
			ul.gallery-cards li > div {
				display: none;
				/*padding: 1.75rem;*/
			
			}
			ul.gallery-cards li.active > div {
				display: block;
			}
			
			h3.gallery-card_title {
				font-size: 2em;
				font-weight: 500;
				letter-spacing: -0.01em;
				line-height: 1.4;
				margin: 0;
			}
			.ipad-screen .gallery-cards_slide {
				display: none;
			}
			.ipad-screen .gallery-cards_slide.active {
				display: block;
			}
			.general-use_icon {
				width: 64px;
				height: 64px;
				display: block;
				position: relative;
				border-radius: 5px;
				padding: 10px;
				margin-bottom: 30px;
				border: 1px solid rgba(255,255,255, 0.09);
				box-shadow: inset 0 1px 0 rgba(255,255,255, 0.60), inset 0 -1px 0 rgba(0, 0, 0, 0.04);	
				background: linear-gradient(to bottom, rgba(255,255,255,0.10) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			}
			.general-use_icon img {
				width: 100%;
			}	
			
					
				@media only screen and (max-width: 1700px) {
					#port-hero h1, #port-descrip h2 {
						font-size: 3.2em;
					}
					#port-hero h1 small {
						font-size: 0.4em;
						line-height: 0.8em;
					}					
					#port-hero .container {
						width: 94%;
					}					
					
				}
				@media only screen and (max-width: 1280px) {
					#port-hero h1, #port-descrip h2 {
						font-size: 2.2em;
						line-height: 1em;
					}
					#port-hero h1 small {
						font-size: 0.5em;
						line-height: 1em;
					}					
					.test-iphone {
						height: 60vh;
					}		
					
				}	
				@media only screen and (max-width: 1000px) {
					.container {
						height: auto;
					}
					.section {
						min-height: auto;
					}
					#port-hero.section {
						margin-bottom: 200px;
					}
					#port-descrip.section {
						margin-bottom: 50px;
					}					
					#port-hero .container {
						display: block;
						width: 60%;
						height: auto;
						margin-top: 150px;
					}
					.project-info-wrapper {
						padding-left: 0;
						padding-top: 70px;
					}
					.test-iphone {
						height: 50vh;
					}
					#port-descrip .test-sausage {
						height: 100%;
						padding: 50px 0;
					}
					ul.gallery-cards {
						padding: 0 40px 0 0;
					}
					.port-descrip-text {
						padding: 0 100px 0 0;
					}					

				}
				@media only screen and (max-width: 850px) {
					#port-descrip .test-sausage {
						margin-left: 50px;
						height: calc(100% + 50px);
					}
					.port-descrip-text {
						padding: 0 50px 0 0;
					}									
				
				}
				@media only screen and (max-width: 750px) {
					#port-hero .container {
						width: 90%;
					}
					/*.section {
						margin-bottom: 200px;
					}*/
					p.gallery-card_text {
						font-size: 1.05em;
					}
					#port-hero.section {
						margin-bottom: 100px;
					}
					#port-descrip.section {
						margin-bottom: 0;
					}					
				}
				/*.mob-bg {
					position: absolute;
					top: 0;
					right: -2%;
					bottom: -40px;
					left: -2%;

				}*/
				
			
				#slideNum {
					position: fixed;
					width: 100vw;
					height: 150px;
					display: none;
					align-items: flex-end;
					bottom: 0px;
					z-index: 80;
					
				}
				@media only screen and (max-width: 700px) {
					#port-hero .container, #port-descrip .container, #port-gallery .container {
						padding: 0 20px;
					}
					.section {
						margin-bottom: 100px;
					}
					#port-gallery.section {
						margin-bottom: 0;
						padding-bottom: 100px;
					}
					#port-descrip .container {
						display: block;
					}
					#port-descrip .container > .col:first-child {
						height: 500px;
					}
					.test-iphone {
						height: 100%;
					}
					.port-descrip-text {
						padding-top: 50px;
						padding-right: 0;
					}
					.test-sausage {
						display: none;
					}
					#port-gallery .container {
						flex-wrap: wrap;
					}
					#port-gallery .container > .col {
						flex-basis: 100% !important;
					}
					#port-gallery .container > .col:first-child {
						height: auto;
						z-index: 5;
					}
					#port-gallery .container > .col:last-child {
						z-index: 1;
					}					
					ul.gallery-cards {
						padding: 0;
					}
					ul.gallery-cards li {
						/*height: 400px;*/
						align-items: flex-end;
					}
					ul.gallery-cards li > div {
						padding-top: 50px;
					}
					#ipad {
						width: 98%;
						margin: 0 auto;
						margin-top: 125px;
					}									
					.sticky {
					}					
					
																							
				}
				/* HEIGHT **********************/
/*				@media only screen and (max-width: 1000px), only screen and (max-height: 650px) {
					p.gallery-card_text {
						font-size: 1em;
					}
					h3.gallery-card_title {
						font-size: 1.6em;
						line-height: 1.4;
					}					
					.gallery-cards .general-use_icon {
						width: 42px;
						height: 42px;
						margin-bottom: 15px;
						padding: 5px;
					}					
					
				}					
				@media only screen and (max-height: 650px) {
					.sticky {
						padding-top: 150px;
						min-height: 600px;
					}
					#port-gallery .container > .col:first-child {
						display: block;
					}
					#ipad {
						width: 65%;
						z-index: 1;
						margin: 0 auto;
					}
					
				}*/	
			
			
/* PROJECT BACKDROP / BLOBS */

			#backdrop {
				position: fixed;
				width: 100vw;
				height: 100vh;
				z-index: 1;
				top: 0;
				left: 0;
				display: none;
				/*mix-blend-mode: luminosity;*/
			}
			#backdrop .blob {
				position: absolute;
				opacity: 0.25;
				/*filter: blur(60px);*/
				transform-origin: center;
				transition: transform 0.8s ease-in-out;
				will-change: transform;
			}
			.blob-a {
				top: -20%;
				left: -10%;
				transform: scale(2);
			}
			.blob-a .start-color {
				stop-color: #0083BB;
			}
			.blob-a .end-color {
				stop-color: #00C1D0;
			}
			.blob-a.ba2 {
				transform: translateY(40%) scale(1.2);
			}
			.blob-a.ba3 {
				transform: translateY(100%) scale(1.5);
			}
			/*.blob-a.ba2 .start-color {
				stop-color: #a7aabc;
			}
			.blob-a.ba2 .end-color {
				stop-color: #858fbb;
			}*/
			.blob-b {
				bottom: -30%;
				right: -10%;
				top: auto;
				width: 80%;
			}
			.blob-b .start-color {
				stop-color: #188580;
			}
			.blob-b .end-color {
				stop-color: #7cb6b2;
			}
			.blob-b.bb2 {
				transform: translate(-5%,-50%) scale(1.2);
			}
			.blob-b.bb3 {
				transform: translate(-5%,-100%) scale(1.5);
			}			
			
/* MOBILE NAV ********************/

.mobile-button button {
    outline: none;
    vertical-align: middle;
    padding: 0px 5px 0px 0px;
    cursor: pointer;
	background: none;
    border: none;
    width: 60px;
    display: inline-block;

}
.mobile-button button p {
	color: #fff;
	text-transform: uppercase;
	text-align: left;
	font-size: 0.75em;
}
.mobile-button button span {
    height: 4px;
    width: 100%;
    display: block;
    margin: 8px 0px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
	background-color: #fff;
}
.mobile-button button span#line-3 {
    width: 45px;
    transition: all 0.25s;
}
.mobile-button:hover span#line-3 {
    width: 100% !important;
}
.mobile-button button:hover {
	/*color: #ADD7E6;*/
}
.mobile-button:hover span {
    /*background-color: #ADD7E6;*/
}
header.fixed .mobile-button button span {
	background-color: #ED1C24;
}
#mob-menu {
	position: fixed;
	display: none;
	width: 100vw;
	height: 100vh;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 9999;
	top: 0;
}
.menu-bg {
	background: #152331;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #000000, #152331);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #000000, #152331); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.9;
	z-index: -1;
}
a.menu-close {
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	cursor: pointer;
	z-index: 1;
}
a.menu-close svg {
	width: 100%;
	height: auto;
}
a.menu-logo {
	text-decoration: none;
	display: block;
	width: 60px;
	height: 60px;
	margin-top: 10px;
	transition: all .2s linear;
}
a.menu-logo svg {
	width: 100%;
	height: auto;
	fill: #fff;
	transition: all .2s linear;
}
a:hover.menu-logo svg {
	fill: #ED1C24;
}
.menu-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.menu-container {
	margin: 50px;
	color: #fff;
	opacity: 0;
}
ul.menu-nav {
	list-style: none;
	margin: 30px 0 40px 0;
	padding: 0;
}
ul.menu-nav li {
	padding: 10px 0;
}
ul.menu-nav a {
	text-decoration: none;
	color: #fff;
	font-size: 2.5em;
	line-height: 1em;
	font-weight: 700;
	letter-spacing: -0.02em;
	transition: all .2s linear;
	text-shadow: 2px 3px 7px rgba(0,0,0,0.8);
}
ul.menu-nav a:hover {
	color: #ED1C24;
}
/* ANIMATIONS *********************/


		.slide-in-left{-webkit-animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both}
		@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
		.slide-in-right{-webkit-animation:slide-in-right 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-right 1s cubic-bezier(.25,.46,.45,.94) both}
		@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
		.slide-in-bottom{-webkit-animation:slide-in-bottom 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bottom 1s cubic-bezier(.25,.46,.45,.94) both}
		@keyframes slide-in-bottom{
		0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}
		100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
		.slide-in-top{-webkit-animation:slide-in-top 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-top 1s cubic-bezier(.25,.46,.45,.94) both}
		@keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
		.text-focus-in{-webkit-animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both;animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both}
		@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
		.fade-in{-webkit-animation:fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both}
		@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
		.fade-out{-webkit-animation:fade-out .5s ease-out both;animation:fade-out .5s ease-out both}
		@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}
		.rotate-center{-webkit-animation:rotate-center .6s ease-in-out infinite both;animation:rotate-center .6s ease-in-out infinite both}
		@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
		.fade-in-bottom{-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
		@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
		.fade-out-bottom{-webkit-animation:fade-out-bottom .7s cubic-bezier(.25,.46,.45,.94) both;animation:fade-out-bottom .7s cubic-bezier(.25,.46,.45,.94) both}
		@-webkit-keyframes fade-out-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}}@keyframes fade-out-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}}