:root {
	--foreground: #303334;
	--background: #FFFFFF;
	--background-secondary: #FAFCFC;
	--foreground-secondary: #343738;
  --foreground-tertiary: #5E6466;
	--background-tertiary: #D4D8D9;
	--foreground-quaternary: #5E646650;
	--background-quaternary: #D4D8D950;
	--menu-dimension: 0;
	--content: calc(100vw - 160px);
	--item-padding: 2vw;
	--action: #00616E;
	--action-hover:#008294;
}

body {
  margin: 0;
  padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--foreground);
	background-color: var(--background-secondary);
}

.body-fixed {
	position: fixed;
}

a, a:visited {
	color: var(--action);
}

a:hover {
	color: var(--action-hover);
}

.page {
  display: flex;
  flex-direction: row;
}

.icon {
	fill: var(--foreground);
	-webkit-transition: fill .35s ease-out;
	transition: fill .35s ease-out;
	stroke: rgba(0,0,0,0);
  stroke-width: 8px;
}

.connect li a:hover .icon, .night:hover {
	fill: var(--foreground-tertiary);
	cursor: pointer;
}

.header {
	display: flex;
	flex-direction: row;
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 2;
}

.night {
	margin-right: 8px;
}

.profile, .night {
	padding: 8px;
  border-radius: 16px;
	display: block;
	background-color: var(--background-quaternary);
}

.night-triggered, .profile-active {
  background-color: var(--background-tertiary);
}

.utility {
	margin-top: -25vh;
	width: 64px;
	height: 150vh;
	position: fixed;
	background-color: var(--background);
}

.logo {
	position: fixed;
	z-index: 5;
	top: 20px;
	left: 20px;
}

.menu-trigger {
	position: fixed;
	top: calc((100vh - 134px) / 2);
	left: 20px;
  z-index: 3;
}

.trigger-icon {
  font-size: 1px;
	display: block;
	border: none;
	padding: 0;
	background: none;
}

:focus {
	outline: 2px double rgba(0, 196, 244, .3);
	outline-offset: 4px;
}

.trigger-icon:focus {

}

.trigger-icon:hover .trigger-1, .trigger-icon:hover .trigger-2, .trigger-icon:hover .trigger-3  {
	background-color: var(--background-tertiary);
	cursor: pointer;
}

.trigger-triggered>.trigger-1, .trigger-triggered>.trigger-3 {
	background-color: var(--background);
	position: relative;
	-webkit-transition: transform .35s ease-out, background-color .35s ease-out;
	transition: transform .35s ease-out, background-color .35s ease-out;
}

.trigger-triggered:hover .trigger-1, .trigger-triggered:hover .trigger-3 {
	background-color: var(--foreground-tertiary);
	cursor: pointer;
}

.trigger-triggered .trigger-2 {
	opacity: 0;
}

.trigger-triggered>.trigger-1 {
	transform: rotate(20deg);
	transform-origin: 0% 0%;
}

.trigger-triggered>.trigger-3 {
	transform: rotate(-20deg);
	width: 24px;
	transform-origin: 0% 0%;
}

.trigger-1, .trigger-2, .trigger-3 {
  height: 2px;
  background-color: var(--foreground);
	opacity: 1;
}

.trigger-1 {
  width: 24px;
}

.trigger-2 {
  width: 18px;
  margin: 2px 0;
}

.trigger-3 {
  width: 21px;
}

.trigger-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--foreground);
	margin-top: 2px;
}

.menu {
	width: var(--menu-dimension);
	height: var(--menu-dimension);
	background-color: var(--foreground);
	border-radius: calc(var(--menu-dimension) / 2);
	position: fixed;
	left: 26px;
	top: calc((100vh - 136px) / 2);
	margin-top: calc(var(--menu-dimension) * -.5);
	margin-left: calc(var(--menu-dimension) * -.5);
	z-index: 2;
	opacity: 0.0;
	-webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.menu-content {
	position: fixed;
	top: 4vh;
	left: 112px;
	width: var(--content);
	height: 92vh;
	display: none;
}

.menu-items {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	height: 70vh;
	display: grid;
}

.menu-icon {
	fill: var(--background);
}

.bot-nav-icon {
	fill: var(--foreground);
}

.menu-item {
	padding: 20px;
	background-color: var(--foreground-secondary);
	text-align: center;
	vertical-align: middle;
	display: grid;
	align-items: center;
	opacity: 0;
	text-decoration: none;
	border-radius: 8px;
}

.menu-item:hover {
	background-color: var(--foreground-tertiary);
}

.menu-show {
  opacity: 1;
}

.menu-show .menu-content {
	display: initial;
}

.menu-show .menu-items .menu-item {
	opacity: 1;
	-webkit-transition: opacity 2s ease-out;
  transition: opacity 2s ease-out;
}

.menu-items:nth-child(1) { transition-delay: .5s }
.menu-items:nth-child(2) { transition-delay: 1s }
.menu-items:nth-child(3) { transition-delay: 1.5s }
.menu-items:nth-child(4) { transition-delay: 2s }
.menu-items:nth-child(5) { transition-delay: 2.5s }
.menu-items:nth-child(6) { transition-delay: 3s }

.connect {
	position: fixed;
	left: 23px;
	bottom: 20px;
	z-index:0;
}

.connect ul {
  list-style-type: none;
  padding: 0 3px;
  margin: 0;
}

.connect ul li:nth-child(n+2) {
    margin-top: 12px;
}

.content {
  width: var(--content);
  min-height: 100vh;
	margin: 44px 44px 44px 108px;
	position: relative;
	z-index: 1;
}

.overline::before {
  content: "";
	display: block;
	background-color: var(--foreground);
	width: 40px;
	height: 4px;
}

.portfolio-items {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	width: 100%;
	grid-template-rows: auto;
	grid-column-gap: var(--item-padding);
	grid-row-gap: var(--item-padding);
}

.prev, .next {
	background-color: var(--background);
	padding: 24px;
}

a:visited.prev, a:visited.next, a.prev, a.next {
	color: var(--action);
	text-decoration: none;
}

a:hover.prev, a:hover.next {
	background-color: var(--action);
	color: var(--background);
}

a:hover.prev:before {
	border-right: 20px solid var(--action);
}

a:hover.next:before {
	border-left: 20px solid var(--action);
}

.prev {
	grid-column: 1 / span 6;
	text-align: left;
	border-radius: 0 8px 8px 0;
}

.next {
  grid-column: 7 / span 6;
	text-align: right;
  border-radius: 8px 0 0 8px;
}

.prev:before {
	content: "";
	position: absolute;
	left: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-right: 20px solid var(--background);
	border-top: 33px solid transparent;
	border-bottom: 33px solid transparent;
}

.next:before {
	content: "";
	position: absolute;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid var(--background);
	border-top: 33px solid transparent;
	border-bottom: 33px solid transparent;
}

.portfolio-items div {
	border-radius: 8px;
	background-size: cover;
	background-position: center;
}

.index .portfolio-items>div:nth-child(1) {
	grid-column: 1 / span 11;
}

.index .portfolio-items>div:nth-child(2) {
	background-image: url(images/desktop.png);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .9);
}

.watch .portfolio-items>div:nth-child(1) {
	background-image: url(images/watch-hero.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .54);
}

.watch .portfolio-items>div:nth-child(2) {
	grid-column: 1 / span 12;
}

.watch .portfolio-items div:nth-child(3) {
	background-image: url(images/watch-screen-watchface-bg.png);
	grid-column: 1 / span 6;
	height: calc(var(--content) * .412);
}

.watch .portfolio-items div:nth-child(4) {
	background-image: url(images/watch-screen-calendar-bg.png);
	grid-column: 7 / span 6;
	height: calc(var(--content) * .412);
}

.watch .portfolio-items div:nth-child(5) {
	background-image: url(images/watch-screen-worldclock-bg.png);
	grid-column: 1 / span 6;
	height: calc(var(--content) * .412);
}

.watch .portfolio-items div:nth-child(6) {
	background-image: url(images/watch-screen-weather-bg.png);
	grid-column: 7 / span 6;
	height: calc(var(--content) * .412);
}

.watch .portfolio-items div:nth-child(7) {
	background-image: url(images/watch-collections.png);
	grid-column: 1 / span 9;
	height: calc(var(--content) * .63);
}

.watch .portfolio-items div:nth-child(8) {
	padding-top: 64px;
	grid-column: 10 / span 3;
}

.watch .portfolio-items div:nth-child(9) {
	background-image: url(images/watch-detail.png);
	grid-column: 1 / span 6;
	height: calc(var(--content) * .412);
}

.watch .portfolio-items div:nth-child(10) {
	background-image: url(images/watch-band.png);
	grid-column: 7 / span 6;
	height: calc(var(--content) * .412);
}

.watch-vid {
	width:50.75%;
	height:auto;
	position:relative;
	margin-top:8.15%;
	left:8.63%;
	display:block;
}

.smartsign .portfolio-items>div:nth-child(1) {
	background-image: url(images/smartsign-hero.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .54);
}

.smartsign .portfolio-items div:nth-child(n+2) {
	background-image: url(images/ss-bg.png);
	grid-column: 2 / span 10;
	height: calc(var(--content) * .65);
}

.ss-vid {
	width:78.33%;
	height:auto;
	position:relative;
	margin-top:9.96%;
	left:10.75%;
	display:block;
}

.vid { width:100%; border-radius: 4px; }

.retail .portfolio-items div:nth-child(1) {
	background-image: url(images/retail-hero.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .54);
}

.retail .portfolio-items div:nth-child(2) {
	background-image: url(images/store-detail.png);
	grid-column: 2 / span 10;
	margin-top: 2vw;
	height: calc(var(--content) * .7);
}

.retail .portfolio-items div:nth-child(3) {
	background-image: url(images/store-home.png);
	grid-column: 5 / span 4;
	margin-top: 2vw;
	height: calc(var(--content) * .65);
}

.retail .portfolio-items div:nth-child(4) {
	background-image: url(images/store-list.png);
	grid-column: 2 / span 10;
	margin-top: 2vw;
	height: calc(var(--content) * .637);
}

.iphone-ipad {
	flex: 0 1 23.98%;
	background-image: url('interactive/images/iphone-ipad.png');
	background-size: contain;
	background-repeat:no-repeat;
	height:43.98vw;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-align-items: center; /* Safari */
	align-items:  center;
	-webkit-justify-content: space-around; /* Safari */
	justify-content:         space-around;
}

.puppet .portfolio-items div:nth-child(1) {
	background-image: url(images/puppet-hero.png);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .5);
}

.puppet .portfolio-items div:nth-child(2) {
	background-image: url(images/puppet-styleguide.png);
	grid-column: 1 / span 12;
	margin-top: 2vw;
	height: calc(var(--content) * .59);
}

.puppet .portfolio-items div:nth-child(3) {
	background-image: url(images/puppet-icons.png);
	grid-column: 1 / span 12;
	margin-top: 2vw;
	height: calc(var(--content) * .28);
}

.illustration .portfolio-items div:nth-child(1) {
	background-image: url(images/illustration/mst3k.png);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .41);
}

.illustration .portfolio-items div:nth-child(2) {
	background-image: url(images/illustration/macbook-illustration.jpg);
	grid-column: 1 / span 6;
	height: calc(((var(--content) / 2) * .6) - (var(--item-padding) / 2));
}

.illustration .portfolio-items div:nth-child(3) {
	background-image: url(images/illustration/carry.png);
	grid-column: 7 / span 6;
	height: calc(((var(--content) / 2) * .6) - (var(--item-padding) / 2));
}

.illustration .portfolio-items div:nth-child(4) {
	background-image: url(images/illustration/x-wing.jpg);
	grid-column: 1 / span 8;
	grid-row: 3 / span 2;
	height: 28vw;
}

.illustration .portfolio-items div:nth-child(5) {
	background-image: url(images/illustration/thisguy.png);
	grid-column: 9 / span 2;
	height: calc(((var(--content) - (var(--item-padding) * 11)) / 6) + var(--item-padding));
}

.illustration .portfolio-items div:nth-child(6) {
	background-image: url(images/illustration/eames.png);
	grid-column: 11 / span 2;
	height: calc(((var(--content) - (var(--item-padding) * 11)) / 6) + var(--item-padding));
}

.illustration .portfolio-items div:nth-child(7) {
	background-image: url(images/illustration/macintosh.png);
	grid-column: 9 / span 2;
	height: calc(((var(--content) - (var(--item-padding) * 11)) / 6) + var(--item-padding));
}

.illustration .portfolio-items div:nth-child(8) {
	background-image: url(images/illustration/fjallraven.png);
	grid-column: 11 / span 2;
	height: calc(((var(--content) - (var(--item-padding) * 11)) / 6) + var(--item-padding));
}

.illustration .portfolio-items div:nth-child(9) {
	background-image: url(images/illustration/cups.png);
	grid-column: 1 / span 4;
	height: 28vw;
}

.illustration .portfolio-items div:nth-child(10) {
	background-image: url(images/illustration/spirited-away.tiff);
	grid-column: 5 / span 8;
	height: 28vw;
}

.illustration .portfolio-items div:nth-child(11) {
	background-image: url(images/illustration/smore.tiff);
	grid-column: 1 / span 6;
	height: calc(((var(--content) / 2) * .75) - (var(--item-padding) / 2));
}

.illustration .portfolio-items div:nth-child(12) {
	background-image: url(images/illustration/willis.tiff);
	grid-column: 7 / span 6;
	height: calc(((var(--content) / 2) * .75) - (var(--item-padding) / 2));
}

.illustration .portfolio-items div:nth-child(13) {
	background-image: url(images/illustration/awesome-mix.jpg);
	grid-column: 1 / span 4;
	height: 28vw;
}

.illustration .portfolio-items div:nth-child(14) {
	background-image: url(images/illustration/ripampersand.png);
	grid-column: 5 / span 4;
	height: 28vw;
}

.illustration .portfolio-items div:nth-child(15) {
	background-image: url(images/illustration/nintendo.png);
	grid-column: 9 / span 4;
	height: 28vw;
}

.photo .portfolio-items div:nth-child(1) {
	background-image: url(images/photo/tahoe.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .65);
}

.photo .portfolio-items div:nth-child(2) {
	background-image: url(images/photo/sterling.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .65);
}

.photo .portfolio-items div:nth-child(3) {
	background-image: url(images/photo/al.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .65);
}

.photo .portfolio-items div:nth-child(4) {
	background-image: url(images/photo/jason.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .65);
}

.photo .portfolio-items div:nth-child(5) {
	background-image: url(images/photo/mcway-falls.jpg);
	grid-column: 1 / span 6;
	height: calc(var(--content) * .325);
}

.photo .portfolio-items div:nth-child(6) {
	background-image: url(images/photo/goldengate.jpg);
	grid-column: 7 / span 6;
	height: calc(var(--content) * .325);
}

.photo .portfolio-items div:nth-child(7) {
	background-image: url(images/photo/mini.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .65);
}

.photo .portfolio-items div:nth-child(8) {
	background-image: url(images/photo/cathryn.jpg);
	grid-column: 1 / span 6;
	height: calc(var(--content) * .325);
}

.photo .portfolio-items div:nth-child(9) {
	background-image: url(images/photo/garret_natalie.jpg);
	grid-column: 7 / span 6;
	height: calc(var(--content) * .325);
}

.photo .portfolio-items div:nth-child(10) {
	background-image: url(images/photo/sf.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .65);
}

.photo .portfolio-items div:nth-child(11) {
	background-image: url(images/photo/cuesta.jpg);
	grid-column: 1 / span 12;
	height: calc(var(--content) * .65);
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 40px;
	color: var(--foreground);
	text-transform: uppercase;
}

h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--foreground);
	margin-bottom: 0;
}

.menu h1, .menu h3 {
	color: var(--background);
}

@media only screen
and (max-width : 960px) {
	.watch .portfolio-items div:nth-child(3) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .84);
	}

	.watch .portfolio-items div:nth-child(4) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .84);
	}

	.watch .portfolio-items div:nth-child(5) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .84);
	}

	.watch .portfolio-items div:nth-child(6) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .84);
	}
	.watch .portfolio-items div:nth-child(7) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .84);
	}

	.watch .portfolio-items div:nth-child(8) {
		grid-row: 7 / span 1;
		grid-column: 2 / span 10;
	}

	.illustration .portfolio-items div:nth-child(4) {
		grid-column: 1 / span 12;
		grid-row: auto / span 1;
		height: calc(var(--content) * .5);
	}

	.illustration .portfolio-items div:nth-child(5) {
		grid-column: 1 / span 6;
		height: calc(var(--content) * .49);
	}

	.illustration .portfolio-items div:nth-child(6) {
		grid-column: 7 / span 6;
		height: calc(var(--content) * .49);
	}

	.illustration .portfolio-items div:nth-child(7) {
		grid-column: 1 / span 6;
		height: calc(var(--content) * .49);
	}

	.illustration .portfolio-items div:nth-child(8) {
		grid-column: 7 / span 6;
		height: calc(var(--content) * .49);
	}
}


@media only screen
and (max-width : 640px) {
	:root {
		--content: calc(100vw - 48px);
	}

	.page {
	  flex-direction: column;
	}

	.content {
		min-height: calc(100vh - 64px);
		margin: 88px 24px 24px;
	}

	.utility {
	  margin-top: 0;
		top: 0;
		height: 64px;
		width: 100vw;
		z-index: 2;
	}

	.header {
		z-index: 3;
	}

	.menu-trigger {
		position: fixed;
		top: 27px;
		left: 50vw;
		margin-left: -12px;
		display: block;
		z-index: 5;
	}

	.menu {
		left: 50vw;
		top: 32px;
		z-index: 4;
	}

	.menu-content {
		position: fixed;
		top: 64px;
		left: 4vw;
		width: 92vw;
		height: 98vh;
	}

	.menu-items {
	  display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		height: 70vh;
	}

	.trigger-label {
		display: none;
	}

	.connect {
		position: relative;
		left: auto;
		right: 20px;
		text-align: center;
		padding-top: 20px;
		right: auto;
	}

	.index .connect, .profilep .connect  {
		padding-top: 40px;
	}

	.connect ul li {
		display: inline-block;
	}

	.connect ul li:nth-child(n+2) {
	    margin-top: 0;
			margin-left: 12px;
	}

	.photo .portfolio-items div:nth-child(5) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .65);
	}

	.photo .portfolio-items div:nth-child(6) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .65);
	}

	.photo .portfolio-items div:nth-child(8) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .65);
	}

	.photo .portfolio-items div:nth-child(9) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .65);
	}

	.watch .portfolio-items div:nth-child(9) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .84);
	}

	.watch .portfolio-items div:nth-child(10) {
		grid-column: 1 / span 12;
		height: calc(var(--content) * .84);
	}

	.illustration .portfolio-items div:nth-child(2) {
		grid-column: 1 / span 12;
		height: calc((var(--content) * .6) - var(--item-padding));
	}

	.illustration .portfolio-items div:nth-child(3) {
		grid-column: 1 / span 12;
		height: calc((var(--content) * .6) - var(--item-padding));
	}

	.illustration .portfolio-items div:nth-child(9) {
		grid-column: 1 / span 12;
		height: 88vw;
	}

	.illustration .portfolio-items div:nth-child(10) {
		grid-column: 1 / span 12;
		height: 54vw;
	}

}

@media only screen
and (max-width : 375px) {
	.illustration .portfolio-items div:nth-child(11) {
		background-image: url(images/illustration/smore.tiff);
		grid-column: 1 / span 12;
		height: calc((var(--content) * .75) - var(--item-padding));
	}

	.illustration .portfolio-items div:nth-child(12) {
		background-image: url(images/illustration/willis.tiff);
		grid-column: 1 / span 12;
		height: calc((var(--content) * .75) - var(--item-padding));
	}

	.illustration .portfolio-items div:nth-child(13) {
		grid-column: 1 / span 12;
		height: 88vw;
	}

	.illustration .portfolio-items div:nth-child(14) {
		grid-column: 1 / span 12;
		height: 88vw;
	}

	.illustration .portfolio-items div:nth-child(15) {
		grid-column: 1 / span 12;
		height: 88vw;
	}

	.menu-items {
		grid-column-gap: 16px;
		grid-row-gap: 16px;
	}
}

@media only screen
and (min-width : 600px) {
  .content>p {
	  width: 75vw;
  }
}