/* Variables */
:root {

	--col-bg: rgba(247, 202, 228, 1);
	--col-text: rgba(30, 30, 30, 1);


	--col-booking: 229, 236, 249;
	--col-booking-white: 255, 255, 255;
	--col-booking-accent-navy: 20, 51, 124;
	--col-booking-accent-gold: 242, 203, 91;

	--col-ableton: 182, 255, 192;
	--col-ableton-accent-blue: 0, 0, 255;

	--col-pulse: 255, 255, 255;
	--col-pulse-accent-navy: 7, 26, 64;
	--col-pulse-accent-royal: 69, 154, 217;

	--col-villas: 245, 245, 245;
	--col-villas-accent-green: 67, 175, 191;
	--col-villas-accent-dark: 46, 45, 42;
	--col-villas-accent-mint: 0, 178, 155;

	--col-typeengine: 237, 233, 232;
	--col-typeengine-accent-orange: 223, 82, 38;
	--col-typeengine-accent-black: 12. 12, 12;

	--col-drift: 20, 20, 20;
	--col-drift-accent-white: 255, 255, 255;
	--col-drift-accent-pink: 255, 192, 203;

	--col-trupanion: 245, 243, 241;
	--col-trupanion-accent-dark: 143, 138, 132;
	--col-trupanion-accent-blue: 52, 94, 158;

	--col-kokeco: 235, 210, 188;
	--col-kokeco-accent-dark: 51, 50, 51;
	--col-kokeco-accent-green: 236, 241, 234;

	--col-redfin: 160, 31, 34;

	--col-trutv: 149, 57, 108;
	--col-trutv-accent-gray: 220, 220, 221;
	--col-trutv-accent-black: 5, 5, 5;

	--col-linguisticanalysis: 176, 167, 123;
	--col-target: 205, 0, 9;
	--col-showtime: 177, 0, 0;
}
@font-face {
    font-family: 'Apercu';
    src: local('Apercu'), local('Apercu'),
        url('ApercuPro.woff2') format('woff2'),
        url('ApercuPro.woff') format('woff'),
        url('ApercuPro.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

/* Layout */

html	{
	min-height: 100%;
}
html, body	{
	min-height: 100%;	
	padding: 0;
	margin: 0;
	font-size: 24px;
	line-height: 1.5;
	font-weight: 400;
	font-family: Apercu, helvetica, arial, sans-serif;
	box-sizing: border-box;
}

/* Background animation on home page */
body {
	color: var(--col-text);
    background: linear-gradient(140deg, #e6c1d7, #76d5d2, #aa78f0);
    background-size: 600% 600%;
    -webkit-animation: site-bg 200s ease infinite;
    -moz-animation: site-bg 200s ease infinite;
    animation: site-bg 200s ease infinite;		
}


@-webkit-keyframes site-bg {
    0%{background-position:0 0%}
    50%{background-position:90% 100%}
    100%{background-position:0% 0%}
}
@-moz-keyframes site-bg {
    0%{background-position:0% 0%}
    50%{background-position:90% 100%}
    100%{background-position:0% 0%}
}
@keyframes site-bg { 
    0%{background-position:0% 0%}
    50%{background-position:90% 100%}
    100%{background-position:0% 0%}
}


.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /*gap: 2rem;*/
  grid-auto-rows: minmax(16rem, auto);
  margin: 0;
  padding: 0rem;
}
@media only screen and (max-width: 1080px) {
	.grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}

}
@media only screen and (max-width: 480px) {
	.grid-wrapper {
		grid-template-columns: repeat(1, 1fr);
	}	
}
.grid-wrapper > div {
	padding: 1rem;
	/*margin-bottom: 4rem;*/
}

.grid-wrapper.portfolio {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
}
@media only screen and (max-width: 1080px) {
	.grid-wrapper.portfolio {
		grid-template-columns: 1fr 2fr 1fr;
	}
}
@media only screen and (max-width: 480px) {
	.grid-wrapper.portfolio {
		grid-template-columns: repeat(1, 1fr);
	}	
}

/*.nav	{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	width: 100%;
	padding: 0 1rem;
	border-top: 1px solid var(--col-text);
	z-index: 888;
	background-color: transparent;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);	
}
.nav a {
	line-height: 44px;
}*/


/* Text defaults */

h1 {
	font-size: 1.1rem;
	font-weight: 400;
	padding: 0;
	margin: 0 0 3rem 0;
}
ul {
	padding: 0;
	margin: 0;
}
li {
	padding: 0;
	margin: 0 0 .2rem 0;
	list-style: none;
}
a {
	display: inline-block;
	/*text-decoration-color: var(--col-text);*/
	color: var(--col-text);
}
a:hover, .current-page {
	text-decoration: underline;
	text-decoration-color: var(--col-text);
}


.small {
	font-size: .8rem;
}

/* Portfolio template */

a.tunes:hover,
a.tunes:active,
a.tunes:focus {
	cursor: url("music-cursor.svg"), default;
}
a.resume:hover,
a.resume:active,
a.resume:focus {
	cursor: url("pdf-cursor.svg"), default;
}
a.radio:hover,
a.radio:active,
a.radio:focus {
	cursor: url("mic-cursor.svg"), default;
}
a.walk:hover,
a.walk:active,
a.walk:focus {
	cursor: url("walk-cursor.svg"), default;
}
a.linkedin:hover,
a.linkedin:active,
a.linkedin:focus {
	cursor: url("linkedin-cursor.svg"), default;
}
a.email:hover,
a.email:active,
a.email:focus {
	cursor: url("email-cursor.svg"), default;
}
.work a {
/*	padding-left: 0;*/
/*	transition: 100ms transform ease-out;*/
}
.work a:hover,
.work a:focus,
.work a:active {
/*	transform: scale(1.2);*/
	text-decoration: underline;
}
.work-nav-ableton:hover,
.work-nav-ableton:focus,
.work-nav-ableton:active {
	color: rgba(var(--col-ableton-accent-blue), 1);
	text-decoration-color: rgba(var(--col-ableton-accent-blue), 1);
}
.work-nav-booking:hover,
.work-nav-booking:focus,
.work-nav-booking:active {
	color: rgba(var(--col-booking-accent-navy), 1);
	text-decoration-color: rgba(var(--col-booking-accent-navy), 1);	
}
.work-nav-pulse:hover,
.work-nav-pulse:focus,
.work-nav-pulse:active {
	color: rgba(var(--col-pulse-accent-royal), 1);
	text-decoration-color: rgba(var(--col-pulse-accent-royal), 1);	
}
.work-nav-villas:hover,
.work-nav-villas:focus,
.work-nav-villas:active {
	color: rgba(var(--col-villas-accent-mint), 1);
	text-decoration-color: rgba(var(--col-villas-accent-mint), 1);	
}
.work-nav-drift:hover,
.work-nav-drift:focus,
.work-nav-drift:active {
	color: rgba(var(--col-drift-accent-pink), 1);
	text-decoration-color: rgba(var(--col-drift-accent-pink), 1);	
}
.work-nav-typeengine:hover,
.work-nav-typeengine:focus,
.work-nav-typeengine:active {
	color: rgba(var(--col-typeengine-accent-orange), 1);
	text-decoration-color: rgba(var(--col-typeengine-accent-orange), 1);	
}
.work-nav-kokeco:hover,
.work-nav-kokeco:focus,
.work-nav-kokeco:active {
	color: rgba(var(--col-kokeco), 1);
	text-decoration-color: rgba(var(--col-kokeco), 1);	
}
.current-page {
	text-decoration: none;
}
.portfolio .work,
.portfolio .case-study {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	align-self: start;	
}
.portfolio-gallery {
	margin: 0 !important;
/*	margin: 0;
	padding: 0 !important;*/
/*	overflow-y: scroll;
	position: fixed;
	width: calc(50% - 1rem);
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;*/
}
.portfolio-nav {
	display: none;
}

.home .back-to-home-block {
	display: none;
}
.portfolio .back-to-home-block {	
	position: fixed;	
	bottom: 1rem;
	left: 1rem;
}
.back-to-home {
	text-decoration: none;
}
.back-to-home:hover::after {
	content: 'Home';
	padding-left: .25rem;
}
@media only screen and (max-width: 1080px) {	
	.portfolio-gallery {
		position: initial;
		width: auto;
		height: auto;
		top: auto;
		right: auto;
		bottom: auto;
		grid-column: 1 / 4;
	}
	.portfolio .case-study {
		position: static;
		grid-column: 1 / 3;
	}	
	.portfolio .work {
		display: none;
	}
	.portfolio-nav {
		display: block;
		text-align: center;
		margin: 2rem auto 4rem;
	}
	.grid-wrapper.home > div {
		margin-bottom: 4rem;	
	}
	.grid-wrapper.portfolio > div {
		margin-bottom: 0;
	}	
}
@media only screen and (max-width: 480px) {
	.portfolio-gallery {
		position: initial;
		width: auto;
		height: auto;
		top: auto;
		right: auto;
		bottom: auto;	
	}
	.portfolio .case-study {
		position: static;		
		grid-column: 1 / 1;
	}
	.portfolio .work {
		display: none;
	}
	.portfolio-nav {
		display: block;
		text-align: center;
		margin: 2rem auto 4rem;
	}	
	.grid-wrapper.portfolio > div {
		margin-bottom: 0;
	}		
}
.portfolio-gallery figure {
	margin: 0 auto .5rem;
	text-align: center;
	padding: 0;	
}
.portfolio-gallery figure.inset {
	padding: 2rem;	
}
@media only screen and (max-width: 480px) {
	.portfolio-gallery figure.inset	{
		padding: 0rem;
	}
}
.portfolio-gallery figure:last-of-type {
	margin-bottom: 0;
}
.portfolio-gallery figure img {
	display: block;
	max-width: 100%;	
}

.booking .work-nav-booking,
.pulse .work-nav-pulse,
.villas .work-nav-villas,
.drift .work-nav-drift,
.typeengine .work-nav-typeengine,
.trupanion .work-nav-trupanion,
.kokeco .work-nav-kokeco,
.redfin .work-nav-redfin,
.trutv .work-nav-trutv,
.linguisticanalysis .work-nav-linguisticanalysis,
.target .work-nav-target,
.showtime .work-nav-showtime {
	text-decoration: underline;
}


/* Individual portfolio pages */

.ableton {
	color: rgba(0, 0, 0, 1);
	background-color: rgba(var(--col-ableton), 1);
	background-image: none;
	animation: none;	
}
.ableton .nav {
	background-color: rgba(var(--col-ableton), 1);
	color: rgba(0, 0, 0, 1);
}
.ableton a {
	color: rgba(var(--col-ableton-accent-blue), 1);
	text-decoration-color: rgba(var(--col-ableton-accent-blue), 1);	
}
.ableton a:hover, .ableton .current-page {
	background-color: rgba(var(--col-ableton), 1);	
}

.booking {
	color: rgba(var(--col-booking-accent-navy), 1);
	background-color: rgba(var(--col-booking-accent-gold), .5);   
    background-image: none;
	animation: none;
}
.booking .nav {
	background-color: rgba(var(--col-booking-accent-gold), .75);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.booking a {
	color: rgba(var(--col-booking-accent-navy), 1);
	text-decoration-color: rgba(var(--col-booking-accent-navy), 1);	
}
.booking a:hover, .booking .current-page {
/*	text-decoration-color: rgba(var(--col-booking-accent-navy), 1);*/
}
.booking .portfolio-gallery figure {
	background-color: rgba(var(--col-booking-accent-navy), 1);
}


.pulse {
	color: rgba(var(--col-pulse-accent-navy), 1);
	background-color: rgba(var(--col-pulse-accent-royal), .25);
	background-image: none;
	animation: none;
}
.pulse .portfolio-gallery .mockup {
	background-color: rgba(var(--col-pulse-accent-navy), 1);
}
.pulse a {
	color: rgba(var(--col-pulse-accent-navy), 1);
}
.pulse a:hover, .pulse .current-page {
/*	text-decoration-color: rgba(var(--col-pulse-accent-navy), 1);*/
}



.villas {	
	color: rgba(var(--col-villas-accent-dark), 1);
	background-color: rgba(var(--col-villas), 1);
	background-image: none;
	animation: none;
}
.villas .portfolio-gallery .mockup {
	background-color: rgba(var(--col-villas-accent-green), 1);
}
.villas a {
	color: rgba(var(--col-villas-accent-dark), 1);
}
.villas a:hover, .villas .current-page {
/*	text-decoration-color: rgba(var(--col-villas-accent-dark), 1);*/
}




.drift {
	color: rgba(var(--col-drift), 1);	
	background-color: rgba(var(--col-drift-accent-pink), .5);
	background-image: none;
	animation: none;
}
.drift .portfolio-gallery .mockup {
	background-color: rgba(var(--col-drift), 1);
}
.drift a {
	color: rgba(var(--col-drift), 1);
}
.drift a:hover, .drift .current-page {
/*	text-decoration-color: rgba(var(--col-drift), 1);*/
}




.typeengine {
	color: rgba(var(--col-typeengine-accent-black), 1);
	background-color: rgba(var(--col-typeengine), 1);
	background-image: none;
	animation: none;
}
.typeengine .portfolio-gallery .mockup {
	background-color: rgba(var(--col-typeengine-accent-orange), .9);
}
.typeengine a {
	color: rgba(var(--col-typeengine-accent-black), 1);
}
.typeengine a:hover, .typeengine .current-page {
/*	text-decoration-color: rgba(var(--col-typeengine-accent-black), 1);*/
}


.trupanion {
	color: rgba(var(--col-trupanion), 1);
	background-color: rgba(var(--col-trupanion-accent-dark), 1);
	background-image: none;
	animation: none;
}
.trupanion .portfolio-gallery .mockup {
	background-color: rgba(var(--col-trupanion), 1);
}
.trupanion a {
	color: rgba(var(--col-trupanion), 1);
}
.trupanion a:hover, .trupanion .current-page {
/*	text-decoration-color: rgba(var(--col-trupanion), 1);*/
}



.kokeco {
	color: rgba(var(--col-kokeco-accent-dark), 1);
	background-color: rgba(var(--col-kokeco-accent-green), 1);
	background-image: none;
	animation: none;
}
.kokeco .portfolio-gallery .mockup {
	background-color: rgba(var(--col-kokeco), 1);
}
.kokeco a {
	color: rgba(var(--col-kokeco-dark), 1);
}
.kokeco a:hover, .kokeco .current-page {
/*	text-decoration-color: rgba(var(--col-kokeco-dark), 1);*/
}




.trutv {
	color: rgba(var(--col-trutv), 1);
	background-color: rgba(var(--col-trutv), .2);
	background-image: none;
	animation: none;
}
.trutv .portfolio-gallery .mockup	{
	background-color: rgba(var(--col-trutv), 1);
}
.trutv a {
	color: rgba(var(--col-trutv), 1);
}
.trutv a:hover, .trutv .current-page {
/*	text-decoration-color: rgba(var(--col-trutv), 1);*/
}


.linguisticanalysis {
	background-color: rgba(var(--col-linguisticanalysis), .9);
	background-image: none;
	animation: none;
}
/*.linguisticanalysis .nav {
	background-color: rgba(var(--col-linguisticanalysis), .25);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}*/
.linguisticanalysis .portfolio-gallery {
	background-color: var(--col-linguisticanalysis);
}



.target {
	background-color: rgba(var(--col-target), .9);
	background-image: none;
	animation: none;
}
/*.target .nav {
	background-color: rgba(var(--col-target), .25);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}*/
.target .portfolio-gallery {
	background-color: var(--col-target);
}


.showtime {
	background-color: rgba(var(--col-showtime), .9);
	background-image: none;
	animation: none;
}
/*.showtime .nav {
	background-color: rgba(var(--col-showtime), .25);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}*/
.showtime .portfolio-gallery {
	background-color: var(--col-showtime);
}
.case-study .small a {
	text-decoration: underline;
}
.case-study .small a::after {
	content: ' / ';
	display: inline-block;
	margin-left: 6px;
}
.case-study .small a:last-of-type::after {
	content: '';
}
.portfolio .current-page {
	text-decoration: none !important;
}
.portfolio .current-page:hover {
	cursor: not-allowed;
}
svg {
	position: absolute; 
	z-index: 999;
	top: 0; 
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0 auto;	

}

path {

  stroke-dasharray: 2730.772705078125;
  stroke-dashoffset: 2730.772705078125;

  /* Draw once and done. */
   /*animation: dash 1s ease-in-out forwards; */

  /* Keep drawing */
  animation: dash 3s ease-in-out 2 alternate;
  animation: fill 1s ease-in-out 2 alternate;
  animation-delay: fill 6s;


}

@keyframes dash {
  from {
    stroke-dashoffset: 2730.772705078125;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fill {
  from {
    stroke-dashoffset: 2730.772705078125;
    fill: transparent;
  }
  to {
    stroke-dashoffset: 0;
    fill: red;
  }
}