body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
}

input {
	width: auto;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

a, a:visited {
	color: #009DE6;
}

a:hover {
	color: #3F74B0;
}

a:active {
	color: #2D527D;
}

.clear {
	clear: both;
}

.bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
}

/*.container {
	max-width: 720px;
	margin: 0 auto;
	padding-left: 240px;
}*/

.spacer {
	margin: 0 auto;
	padding: 32px 64px 88px 64px;
}

.blur {
	-webkit-filter: blur(20px);
	filter: blur(20px);
}

.no-scroll {
	overflow: hidden;
}

.line {
	width: 100%;
}

/* Type */
.h1 {
	font-size: 48px;
	line-height: 64px;
	font-weight: bold;
	letter-spacing: 0.0037em;
}

.h2 {
	font-size: 36px;
	line-height: 48px;
	font-weight: bold;
	letter-spacing: 0.0039em;
}

.h3 {
	font-size: 28px;
	line-height: 36px;
	font-weight: bold;
	letter-spacing: 0.0038em;
}

.h4 {
	font-size: 26px;
  line-height: 32px;
  letter-spacing: 0.0022em;
}

/* Type Colors */
.colorDefault {color: #212121;}
.colorSecondary {color: #424242;}
.colorCaption {color: #616161;}

.colorDefaultDark {color: #fff;}
.colorSecondaryDark {color: #E0E0E0;}
.colorCaptionDark {color: #C4C4C4;}

/* Weights */
.weightRegular {font-weight: 400;}
.weightMedium {font-weight: 500;}
.weightSemibold {font-weight: 600;}
.weightBold {font-weight: 700;}

/* Margins */
.marginBottom0 {margin-bottom: 0;}
.marginBottom8 {margin-bottom: 8px;}
.marginBottom16 {margin-bottom: 16px;}
.marginBottom24 {margin-bottom: 24px;}
.marginBottom32 {margin-bottom: 32px;}

/* Shadows */
.shadowDeafult {
	text-shadow:
    0 1px #808d93,
    -1px 0 #cdd2d5,
    -1px 2px #808d93,
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5;
}

/* Navigational Menu */
#menu {
	height: 100vh;
	width: 224px;
	padding: 0 8px;
	display: flex;
    flex-direction: column;
	justify-content: center;
	position: fixed;
	left: 0;
    top: 0;
	z-index: 3;
}

#menu ul {
	/*margin: 0 auto;*/
	padding: 12px 0;
}

#menu ul li {
}

#menu ul li a {
	display: block;
	border-radius: 32px;
	transition: background-color 0.25s, color 0.25s;
	text-decoration: none;

	font-size: 20px;
	line-height: 56px;
	color: #32333E;
	text-align: left;
	font-weight: 600;
	margin: 0 auto;
	width: 100%;
	height: 56px;
}

#menu ul li a:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.05);
}

#menu ul li a:active {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.1);
	transform: matrix(0.96, 0, 0, 0.96, 0, 0);
}

#menu ul li a svg {
	width: 24px;
	height: 24px;
	margin: 16px;
	float: left;
	transition: margin 0.25s;
}

#menu ul li a:hover svg {
	margin-left: 24px;
}

.square{fill:#f23b55;}
.circle{fill:#009de6;}
.triangle{fill:#ffd200;}
.half-circle{fill:#00A839;}

/* Chat app */
.message {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	border-radius: 32px;
	padding: 14px 28px;
	display: inline-block;
	margin: 0 0 14px 0;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
}

.message-left {
	color: #393939;
	background-color: #fff;
}

.message-right {
	color: #fff;
	background-color: #00B0FF;
	border: none;
	outline: 0;
	float: right;
}

::-webkit-input-placeholder {
	color: #80D8FF;
}

/* Content */
.content-container {
	position: relative;
}

.content-container img {
	width: 100%;
	max-width: 720px;
	height: auto;
	border-radius: 9px;
	margin-bottom: 32px;
}

.content-container img.full-width,
.content-container iframe {
	left: 50%;
	margin-left: -30vw;
	margin-right: -30vw;
	max-width: 60vw;
	position: relative;
	right: 50%;
	width: 60vw;
	margin-bottom: 24px;
}

.content-container iframe {
	height: 34vw;
}

.content-container p,
.content-container li {
	font-size: 24px;
	line-height: 32px;
	color: #616161;
	margin-bottom: 32px;
}

.content-container p a, , .content-container li a {
	text-decoration: none;
}
	.content-container p a:hover, , .content-container li a:hover {
		text-decoration: underline;
	}

.content-container i {
	font-style: italic;
}

.content-container strong {
	font-weight: bold;
	color: #424242;
}

.content-container li {
	list-style: square outside none;
	margin: 0 0 16px 24px;
}

.content-container section {
	margin-bottom: 64px;
}

/* Links */
a.big-link,
a.card-link,
a.work-card {
	font-size: 24px;
	line-height: 32px;
	border-radius: 16px;
	text-decoration: none;
	font-weight: 600;
	background-color: #fff;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
	transition: box-shadow 0.15s, transform 0.05s;
}
a.big-link:hover,
a.card-link:hover,
a.work-card:hover {
	box-shadow: 0 2px 20px 0 rgba(0,0,0,0.2);
}
.big-link:active,
a.card-link:active,
a.work-card:active {
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
	transform: matrix(0.96, 0, 0, 0.96, 0, 0);
}

a.big-link.disabled,
a.card-link.disabled,
a.work-card.disabled {
	box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
a.big-link.disabled:hover,
a.card-link.disabled:hover,
a.work-card.disabled:hover {
	box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
a.big-link.disabled:active,
a.card-link.disabled:active,
a.work-card.disabled:active {
	box-shadow: 0 0 0 1px rgba(0,0,0,.1);
	transform: none;
}

a.big-link {
	display: block;
	padding: 24px;
	margin-bottom: 16px;
}

a.breadcrumb {
	display: inline-block;
	border-radius: 32px;
	transition: background-color 0.25s, color 0.25s;
	text-decoration: none;

	font-size: 20px;
	line-height: 56px;
	text-align: left;
	font-weight: 600;
	height: 56px;
	margin: 0 0 24px 0;
	padding-right: 24px;
}
a.breadcrumb:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.05);
}
a.breadcrumb:active {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.1);
	transform: matrix(0.96, 0, 0, 0.96, 0, 0);
}

a.breadcrumb svg {
	width: 24px;
	height: 24px;
	fill: #009DE6;
	margin: 16px 8px 16px 0;
	float: left;
	transition: margin 0.25s;
}
a.breadcrumb:hover svg {
	margin-left: 16px;
	fill: #3F74B0;
}
a.breadcrumb:active svg {
	margin-left: 16px;
	fill: #2D527D;
}

/* About Page */
#about-container h1 {
	padding-top: 690px;
}

#about-container img.hero {
	width: 90%;
	margin: 0 auto;
	position: absolute;
	left: 140px;
	z-index: -1;
	max-height: 900px;
	width: auto;
}

.card-link-container {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	margin-bottom: 24px;
}

a.card-link {
	justify-self: stretch;
	display: inline-block;
	margin: 0;
	color: #32333E;
	min-height: 268px;
	}
	a.card-link img {
		width: 100%;
		height: 200px;
  	object-fit: cover;
		margin-bottom: 8px;
		border-radius: 9px 9px 0 0;
	}
	a.card-link span {
		padding: 0 24px 24px 24px;
    display: block;
	}

/* Work page */
.app-icon {
	width: 72px;
	height: 72px;
	border-radius: 16px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
	margin-bottom: 12px;
	transition: transform 0.25s, box-shadow 0.25s;
}

.work-card:hover .app-icon {
	transform: rotate(-7deg);
	box-shadow: 0 2px 20px 0 rgba(0,0,0,0.2);
}

.app-icon-abstract {
	background: url(../images/app-icon-abstract.png) center center no-repeat;
	background-size: 72px 72px;
}
.app-icon-instacart {
	background: url(../images/app-icon-instacart.png) center center no-repeat;
	background-size: 72px 72px;
}
.app-icon-stripe {
	background: url(../images/app-icon-stripe.png) center center no-repeat;
	background-size: 72px 72px;
}
.app-icon-storify {
	background: url(../images/app-icon-storify.png) center center no-repeat;
	background-size: 72px 72px;
}

.work-card-container li {
	list-style: none outside none;
	margin: 0;
}

.work-card {
	display: block;
	margin: 0 0 24px 0;
	position: relative;
}

.work-card img {
	display: block;
	margin: 0;
	border-radius: 16px 16px 0 0;
}

.work-card-inner {
	padding: 24px;
}

img + .work-card-inner {
	padding: 0 24px 24px 24px;
	margin-top: -36px;
	position: relative;
	z-index: 10;
}

.work-card small {
	font-size: 14px;
	line-height: 18px;
}

.work-card .coming-soon {
	display: flex;
  align-items: center;
  justify-content: center;
	background-color: rgba(0,0,0,0.1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #424242;
	font-size: 24px;
	font-weight: bold;
	margin: -24px -24px -24px -24px;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 100;
	border-radius: 16px;
}

.credits p, .credits h3 {
	font-size: 18px;
  line-height: 24px;
}

/* Media Queries */
@media screen and (max-width: 1440px){
	#about-container img.hero {
		max-height: 600px;
	}

	#about-container h1 {
		padding-top: 466px;
	}
}

@media screen and (max-width: 1200px){
	#about-container img.hero {
		top: -32px;
		right: 0;
		left: auto;
		max-width: 400px;
		width: auto;
		border-radius: 0 0 16px 16px;
	}

	.content-container img.full-width,
	.content-container iframe {
		width: 100%;
    		max-width: 720px;
		position: inherit;
		margin: 0 0 24px 0;
	}

	.content-container iframe {
		height: 50vmin;
	}

	#about-container h1 {
		padding-top: 490px;
	}
}

@media screen and (max-width: 960px){

	.spacer {
		padding: 16px 16px 72px 16px;
	}

	#about-container img.hero {
		top: -32px;
		right: 0;
		left: auto;
		max-width: 400px;
		width: auto;
		border-radius: 0 0 16px 16px;
	}

	.h1 {
		font-size: 44px;
    line-height: 48px;
		letter-spacing: 0.0037em;
	}

	.h2 {
		font-size: 31px;
	  line-height: 38px;
	  letter-spacing: 0.0039em;
	}

	.h3 {
        font-size: 21px;
        line-height: 26px;
        letter-spacing: -0.0036em;
    }

    .h4 {
        font-size: 21px;
        line-height: 26px;
        letter-spacing: -0.0036em;
    }

	.content-container p, .content-container li {
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 24px;
	}
	a.big-link {
		font-size: 24px;
		line-height: 28px;
	}
	.message {
		font-size: 17px;
		line-height: 21px;
		border-radius: 26px;
		padding: 16px 20px;
		display: inline-block;
		margin: 0 0 8px 0;
	}

	#menu {
		height: 56px;
		padding: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		display: block;
		position: fixed;
		z-index: 3;
		bottom: 0;
	}

	#menu ul {
		max-width: 720px;
		margin: 0 auto;
		padding: 0;
	}

	#menu ul li {
		float: left;
		width: 25%;
	}

	#menu ul li a {
		font-size: 11px;
		line-height: 12px;
		color: #747474;
		text-align: center;
		font-weight: 500;
		margin: 0 auto 12px auto;
		display: block;
		margin: 0 auto;
		width: 56px;
		height: 56px;
	}

	#menu ul li a svg {
		margin: 8px 16px 4px 16px;
	}
	#menu ul li a:hover svg {
		margin-left: 16px;
	}

	.card-link-container {
			margin-bottom: 16px;
			grid-column-gap: 16px;
			grid-row-gap: 16px;
	}
}

@media screen and (max-width: 640px){
	a.big-link {
		font-size: 18px;
		line-height: 20px;
		padding: 16px;
	}

	.card-link-container {
		grid-template-columns: auto;
	}

	a.card-link {
		min-height: 0;
	}

	a.card-link span {
		padding: 0 16px 16px 16px;
	}
}

@media screen and (max-width: 480px){
	#about-container img.hero {
		max-height: 400px;
		border-radius: 0 0 0 16px;
	}
	#about-container h1 {
		padding-top: 268px;
	}
}