@charset "UTF-8";
html {
	-webkit-text-size-adjust: 100%;
	background-color: #FAFAFA; /* necessary for Webkit overscroll (rubberband scrolling on Safari) */
	margin-top: -1px !important; /* somehow necessary to remove 1px white line at top of window, when using background-color */
}
body {
	padding: 0;
	margin: 0;
	background-color: #FAFAFA;
}
body.no-scroll {
	overflow: hidden;
}
p {
	-webkit-font-smoothing: antialiased;
}
.intro-small-text, .intro-medium-text, .intro-large-text, .intro-xlarge-text {
    font-family: 'Palanquin Dark', Helvetica, sans-serif;
    font-weight: 600;
    color: #414141;
}
.intro-red-text {
    color: #bd134f;
}
.intro-outline-text {
    color: transparent;
/*	-webkit-text-stroke: .8px #414141;*/
    -webkit-text-stroke: 1.5px #414141;
}
.navIcon span {
	display: block;
	position: absolute;
	height: 2.5px;
	width: 100%;
	background: linear-gradient(to right, #bd134f 33.333%, transparent 33.333%, transparent 66.666%, #bd134f 66.666%, #bd134f 100%);
	background-size: 300% 100%;
	background-position: right;
	border-radius: 2.5px;
	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;
}
.navIcon span:nth-child(1) {
	top: 0px;
}
.navIcon span:nth-child(2), .navIcon span:nth-child(3) {
	top: 8.75px;
}
.navIcon span:nth-child(4) {
	top: 17.5px;
}
.open .navIcon span:nth-child(1) {
	top: 8.75px;
	width: 0%;
	left: 50%;
	opacity: 0;
}
.open .navIcon span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.open .navIcon span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.open .navIcon span:nth-child(4) {
	top: 8.75px;
	width: 0%;
	left: 50%;
	opacity: 0;
}
#controls {
    position: relative;
    text-align: left;
    letter-spacing: normal;
}
a.filter {
    display: inline-block;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Palanquin', Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.05em;
    padding-right: 50px; /* not margin-right; padding-right increases hover area for revealing add. filters*/
    color: #8b8b8b;
    pointer-events: all;
    transition: 0.25s;
}
.FeaturedActive .featuredFilter, .DigitalActive .digitalFilter, .PrintActive .printFilter, .PhotographyActive .photographyFilter, .CommercialActive .commercialFilter, .VideoActive .videoFilter, .ProfessionalActive .professionalFilter, .WorkActive .workFilter {
    color: #bd134f;
}
.PhotosetFilter {
	width: 100%;
	height: 100%;
}
.PhotosetFilter div {
	display: none;
}
.PhotosetFilter div:first-child {
	display: block;
}
.postLink {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
}
div.postImage + div.postImage {
	background-image: none !important;
}
.post-video .permalinkImage iframe {
    width: 100%;
 }
.permalinkCaption a, .aboutCaption a {
	text-decoration: none;
	color: #a91146;
	position: relative;
}
.permalinkCaption a:after, .aboutCaption a:after {
	content: '';
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	position: absolute;
	background-color: #a91146;
}
.aboutCaption a.minorLink {
	color: #555555;
	transition: 0.3s ease;
}
.aboutCaption a.minorLink:hover {
	color: #bd134f;
}
.aboutCaption a.minorLink:after {
	bottom: 2px;
	background-color: #555555;
	transition: 0.3s ease;
}
.aboutCaption a.minorLink:hover:after {
	background-color: #bd134f;
}
.aboutResumeLink i {
	margin-left: 7px;
	color: #bd134f;	
}
.permalinkShare a, .share-module a {
	text-decoration: none;
}
.like_button, .reblog_button {
	position: absolute;
	background-color: red;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
}
.like_button iframe, a.reblog_button {
	width: 100% !important;
	height: 100% !important;
}
.my_likeButton, .my_reblogButton {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-size: 100% 200%;
	background-position: top;
	transition: 0.3s ease;
}
.like_button.liked + .my_likeButton, .reblog_button.reblogged + .my_reblogButton {
	cursor: pointer;
}
p.notFound {
	position: fixed;
	left: 45%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Palanquin Dark', Helvetica, sans-serif;
	font-weight: 500;
	font-size: 1.05em;
	line-height: 1.5em;
	color: #bd134f;
}
p.notFound:before {
	content: '404 Party!';
	position: absolute;
	bottom: 170%;
	font-weight: 600;
	font-size: 60px;
	line-height: 100%;
}
p.notFound::selection, .permalinkJump::selection, .permalinkDate::selection, .navToTop-label::selection, .intro-red-text::selection {
	background-color: rgba(189,19,79,0.99); /* #bd134f, need to force opacity with a=0.99 */
	color: white;
}
.heading-large::selection, .bodyText > p::selection, .bodyText > p i::selection, .permalinkShareHeading::selection, .filter::selection, .postDate::selection, .postTitle-container p::selection, .paginationLabel::selection, .navCopyright::selection, .navCopyright-year::selection, .intro-large-text::selection, .intro-small-text::selection, .intro-work-link span::selection, .dynamic-dynamicContent-wrapper::selection, .dynamic-dynamicContent-wrapper span::selection {
	background-color: rgba(65, 65, 65, 0.99); /* #414141 with a=0.99 */
	color: white;
}
.intro-company-icon img::selection, #dynamicShape::selection {
	background-color: rgba(0, 0, 0, 0) !important;
	color: rgba(0, 0, 0, 0) !important;
}
.intro-large-text.intro-outline-text::selection {
	-webkit-text-stroke: .8px white;
	color: transparent;
}
.intro-animated-text use::selection {
	background-color: rgba(0, 0, 0, 0) !important;
}
.navLogo-container, .navOpenLogo, .navList, .bcLocation {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
  /* make sure to override to 'auto' for .navList > a links */
}

@media (max-width:899px) {
	.globalNav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 5;
		pointer-events: none;
	}
	.rightNav {
		display: none; /* disable 'to top' button on mobile */
	}
	.navLogo-container {
		position: absolute;
		top: 55px;
		left: 35px; /* see @supports for notch-iPhone styles */
		transform: translateY(-50%);
		width: 50px;
		z-index: 10;
		pointer-events: auto;
	}
	.navLogo {
		width: 100%;
	}
	.navIcon {
		position: absolute;
		top: 55px;
		right: 35px; /* see @supports for notch-iPhone styles */
		transform: translateY(-50%);
		width: 25px;
		height: 20px;
		z-index: 10;
		cursor: pointer;
		pointer-events: auto;
	}
	.navOpenLogo {
		display: none;
	}
	.navList {
		position: absolute;
		top: 25%;
		left: 30%;
		margin: 0;
		padding: 0;
		z-index: 10;
		list-style: none;
		pointer-events: none;
	}
	.open .navList {
		pointer-events: auto;
	}
	.navList li.menuItem {
		display: block;
		margin-bottom: 9vh;
		transform: translateY(-0.3em);
		text-decoration: none;
		opacity: 0;
		transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0s;
	}
	.navList li.menuItem:nth-child(3) {
		margin-bottom: 0;
	}
	.open .navList li.menuItem {
		transform: translateY(0);
		opacity: 1;
		-webkit-user-select: auto;  /* Chrome all / Safari all */
  		-moz-user-select: auto;     /* Firefox all */
  		-ms-user-select: auto;      /* IE 10+ */
  		user-select: auto;
	}
	.open .navList li.menuItem:nth-child(1) {
		transition: 0.3s ease 0.3s;
	}
	.open .navList li.menuItem:nth-child(2) {
		transition: 0.3s ease 0.35s;
	}
	.open .navList li.menuItem:nth-child(3) {
		transition: 0.3s ease 0.4s;
	}
	.navList li.menuItem a {
		line-height: 0;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 500;
		font-size: 30px;
		text-align: left;
		text-decoration: none;
		color: #bd134f !important;
	}
	.navList li.menuItem a:visited {
		color: #bd134f !important;
	}
	.navCopyright {
		display: block;
		position: absolute;
		bottom: 30%;
		left: 30%;
		width: 400px;
		margin: 0;
		z-index: 10;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 10px;
		line-height: 1.5em;
		color: #b7b7b7;
		opacity: 0;
		transition: 0.3s ease 0s;
		pointer-events: none;
	}
	.navCopyright:before {
		content: '';
		position: absolute;
		top: -2em;
		left: 0;
		width: 150px;
		height: 0.5px;
		background-color: #b7b7b7;
	}
	.open .navCopyright {
		opacity: 1;
		transition: 0.3s ease 0.5s;
	}
	.navBG {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 80vh;
		background: linear-gradient(to bottom, white 50%, transparent 50%);
		background-size: 100% 200%;
		background-position: bottom;
		pointer-events: none;
		z-index: 6;
		transition: 0.3s ease 0.3s;
	}
	.open .navBG {
		background-position: top;
		pointer-events: auto;
		transition: 0.3s ease 0s;
	}
	.navCloseZone {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 5;
		background-color: black;
		opacity: 0;
		pointer-events: none;
		transition: 0.3s ease 0.3s;
	}
	.open .navCloseZone {
		opacity: 0.5;
		pointer-events: auto;
		transition: 0.3s ease 0s;
	}
	.navBreadcrumb {
		display: none;
	}
	.intro-animated-text {
		overflow: visible;
		fill: currentColor;
	}
	#svgText1.intro-animated-text, #svgText2.intro-animated-text {
		height: 30px;
	}
	.intro-animated-text symbol {
		overflow: visible;
	}
	#intro-container {
		width: 100%;
		position: relative;
		margin: calc(50vh - 150px) 0 170px;
	}
	.intro-section {
		margin: 0 max(35px, calc(35px + env(safe-area-inset-left))) 60px;
	}
	.intro-section:last-child {
		margin-bottom: 0;
	}
	.intro-section-flag {
		margin-bottom: 25px;
	}
	.intro-flag-text {
		display: inline-block; /* essential for :after underline */
		position: relative;
		margin: 0;
	}
	.intro-flag-text:after {
		content: '';
		position: absolute;
		top: calc(1em + 10px);
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #414141;
		background-size: 100% 100%;
	}
	.intro-content-text {
		margin: 0;
	}
	.intro-xlarge-text {
        font-size: 60px;
        line-height: 1.1em;
    }
	.intro-large-text {
        font-size: 30px;
        line-height: 1.2em;
    }
    .intro-medium-text {
        font-size: 20px;
        line-height: 1em;
    }
    .intro-small-text {
        font-size: 20px;
        line-height: 1em;
    }
	#intro-hero-text-section,  #intro-hero-video-section {
		display: none;
	}
	.intro-mobile-video-container {
		width: 100%;
		position: relative;
		margin-top: 45px;
	}
	.intro-mobile-video {
		width: 100%;
		height: auto;
	}
	.intro-company-icon {
		height: 30px;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		border: none;
		background: none;
	}
	.intro-company-icon img {
		height: 100%;
	}
	#intro-wmg-icon {
		margin: 0 4px 0 6px;
	}
	#intro-wmg-icon.intro-company-icon img {
		height: 80%;
	}
	#intro-disney-icon {
		margin: 0 3px;
	}
	#intro-disneyplus-icon {
		margin: 0 3px;
	}
	#intro-disneyplus-icon.intro-company-icon img {
		transform: translateY(-0.15em);
	}
	#intro-fox-icon {
		margin: 0 6px;
	}
	#intro-webby-icon {
		margin: 0 6px;
	}
	.intro-list {
		list-style: none;
		margin: 15px 0 30px;
		padding: 0;
	}
	.intro-list-item {
		position: relative;
		margin-bottom: 10px;
	}
	.intro-list-item:last-child {
		margin-bottom: 0;
	}
	.intro-list-item h2 {
		position: relative;
		margin: 0;
		font-size: 40px;
		line-height: 1em;
		letter-spacing: 1px;
	}
	.intro-list-category-video-container {
		display: none;
	}
	.intro-work-link {
		display: inline-block;
		position: relative;
		padding: 10px 15px 13px;
		border-radius: 5px;
		box-shadow: inset 0 0 0 3px #414141;
		text-decoration: none;
	}
	#intro-personal-section {
		height: 194px; /* height = three lines of text @ 49px each +  section flag @ 47px */
	}
	#intro-personal-pickIntro-button {
		display: none;
	}
	.intro-personal-dynamic-container {
		position: relative;
	}
	.dynamic-intro {
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		margin-top: -0.35em;
		padding: 3px 12px 3px 0;
		line-height: 1.65em;
	}
	.dynamic-dynamicContent-wrapper {
		position: absolute;
		width: calc(100% - 16px - 12px); /* to account for margin-left 27px and padding-right 12px */
	}
	#dynamicContent {
		position: relative;
		box-shadow: inset 0 -3px 0 0px #414141; /* underline closer to text than border-bottom */
		transition: 0s;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 33.333%, #414141 33.333%, #414141 66.666%, rgba(0, 0, 0, 0) 66.666%);
		background-repeat: no-repeat;
		background-size: 300% 88%; /* background-size 88% & background-position-y 100% precisely calibrated */
		background-position: right 100%;
	}
	#dynamicContent.transition {
		transition: 0.3s;
		background-position: center 100%;
	}
	#dynamicContent.transition.postTransition {
		background-position: left 100%;
	}
	#dynamicContent.transition.postTransition.hideShadow {
		transition: 0s;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	}
	#dynamicContent > a {
		color: inherit;
		text-decoration: none;
	}
	.dynamic-dynamicShape-wrapper {
		position: absolute;
		width: calc(100% - 16px - 12px); /* to account for margin-left 27px and padding-right 12px */
		top: calc(-1em + 3px);
	}
	#dynamicShape {
		color: rgba(0, 0, 0, 0);
		position: relative;
		margin-left: 16px; /* IMPORTANT!!! Recalibrate this every time layout is changed. Turn off JS -> Make it a different color -> Align it with #dynamicContent. */
		padding-bottom: 5px;
		transition: 0s;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 33.333%, #414141 33.333%, #414141 66.666%, rgba(0, 0, 0, 0) 66.666%);
		background-repeat: no-repeat;
		background-size: 300% 80%; /* background-size 80% & background-position-y 55% precisely calibrated */
		background-position: right 55%;
	}
	#dynamicShape.transition {
		transition: 0.3s;
		background-position: center 55%;
	}
	#dynamicShape.transition.postTransition {
		transition: 0.3s;
		background-position: left 55%;
	}
	#dynamicShape > a {
		color: inherit;
		text-decoration: none;
	}
	.intro-social-icons {
		position: relative;
		width: 100%;
		padding-top: 15px;
	}
	.share-module .permalinkShareIcon {
		width: 20px;
		height: 20px;
		margin: 0 25px 0 0;
	}
	#entries-container {
		width: 100vw;
		height: auto;
		position: relative;
		top: 110px;
		pointer-events: none;
	}
	#controls {
    	overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch; /* bouncy scrolling on iOS */
		-ms-overflow-style: none; /* hide scrollbar on IE and Edge */
		white-space: nowrap;
		pointer-events: all;
		background-color: #f7f7f7;
		padding: 10px 35px; /* see @supports for notch-iPhone styles */
	}
	#controls::-webkit-scrollbar {
		display: none;
	}
	.workPageTitle {
		display: none;
	}
	a.filter:last-child {
		padding-right: 0;
	}
	#entries {
		width: 100%;
		height: auto;
		position: relative;
		top: 0;
		pointer-events: all;
		z-index: 1;
	}
	.post {
		width: 100%;
		height: auto;
		transition: 0.75s;
		pointer-events: all;
		position: relative;
	}
	.postLink {
		-webkit-touch-callout: default;
		-webkit-user-select: none;
		user-select: none;
	}
	.postOverlay {
		display: none;
	}
	.postBG {
		display: none;
	}
	.postImage {
		height: 300px;
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		background-position: center;
		background-size: cover;
	}
	.video .postImage {
/*		background-size: auto 150%;*/
	}
	.postImage:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%);
	}
	.title {
		width: calc(100vw - 70px);
		position: absolute;
		bottom: 1.3em;
		padding: 0 35px; /* see @supports for notch-iPhone styles */
		color: white;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-size: 1.05em;
		font-weight: 500;
		text-align: left;
		overflow-wrap: break-word;
	}
	.postDate {
		position: relative;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 400;
	}
	.postArrow {
		display: none;
	}
	.postTitle-container p {
		margin: 0;
		line-height: 1.3em;
		text-shadow: 0px 0px 35px rgba(0, 0, 0, 0.5);
	}
	.permalink-container {
		width: 100vw;
		height: auto;
		position: relative;
		top: 130px;
		padding-bottom: 60px; /* extra breathing room at bottom of article */
	}
	.permalinkTitle-container {
		width: 100%;
		position: relative;
		margin-top: -0.5em;
		z-index: 1;
		overflow: hidden;
	}
	.permalinkTitle {
		position: relative;
		margin: 0 35px 10px; /* see @supports for notch-iPhone styles */
	}
	.heading-large {
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 600;
		font-size: 1.5em;
		line-height: 1em;
		color: #414141;
	}
	.permalinkDate {
		position: relative;
		margin: 0 35px; /* see @supports for notch-iPhone styles */
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 500;
		font-size: 1.5em;
		line-height: 1em;
		color: #bd134f;
	}
	.permalinkJump {
		display: none;
	}
	.permalinkImage-container {
		display: block;
		position: relative;
		margin: 35px auto;
	}
	.permalinkImage {
		display: block;
		width: 100%;
		position: relative;
	}
	.permalinkPhotoset-container {
		display: block;
		position: relative;
		margin: 35px auto;
	}
	.featherlight {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	.featherlight-content {
		overflow: visible !important;
		min-width: 0 !important;
	}
	.featherlight .featherlight-image {
		max-height: 80vh !important;
		height: auto !important;
	}
	.featherlight-close-icon {
		display: block;
		position: absolute !important;
		left: 50%;
		transform: translate(-50%, -150%) !important;
		width: 30px !important;
		height: 30px !important;
		color: #828282 !important;
		font-size: 15px !important;
		line-height: 30px !important;
		border-radius: 20px;
		border: 1px solid #828282;
	}
	.permalinkCaptionShare-container {
		position: relative;
	}
	.permalinkCaption {
		position: relative;
		margin: 40px 35px; /* see @supports for notch-iPhone styles */
	}
	.bodyText > p {
		max-height: 99999px; /* to prevent font boosting on mobile */
		margin: 0 0 1em 0;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1em;
		line-height: 1.4;
		color: #555555;
	}
	.bodyText > p:last-child {
		margin: 0;
	}
	.permalinkShare-container {
		position: relative;
	}
	.permalinkShare {
		position: relative;
		margin: 35px 35px; /* see @supports for notch-iPhone styles */
	}
	.permalinkShareHeading {
		margin: 0 0 10px 0;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1em;
		color: #cacaca;
	}
	.shareSlash {
		margin: 0 0 0 5px;
	}
	.shareDestination {
		display: none;
	}
	.permalinkShareIcon {
		display: inline-block;
		width: 30px;
		height: 30px;
		position: relative;
		margin-right: 15px;
		font-size: 1.5em;
		color: #cacaca;
		transition: 0.3s ease;
	}
	.permalinkShareIcon i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.permalinkTumblr {
		display: inline-block;
		position: relative;
		cursor: pointer;
	}
	.like_button + .permalinkShareIcon .fas { /* heart with fill */
		display: none;
	}
	.like_button.liked + .permalinkShareIcon .far { /* heart with no fill */
		display: none;
	}
	.like_button.liked + .permalinkShareIcon .fas { /* heart with fill */
		display: inline;
	}
	#pagination {
		width: 100%;
		position: relative;
		top: 0;
		padding-top: 40px;
		padding-bottom: 40px;
		text-align: center;
		pointer-events: auto;
	}
	#pagination a {
		color: #bd134f;
		text-decoration: none;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1.05em;
		margin-left: 35px;
		margin-right: 35px;
	}
	#pagination a i {
		display: none;
	}
	.about-container {
		width: 100vw;
		height: auto;
		position: relative;
		top: 110px;
	}
	.aboutImage-container {
		width: 100%;
		position: relative;
		background-color: white;
	}
	.aboutImage-container:before {
		content: '';
		position: absolute;
		top: -50%;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
	}
	.aboutImage {
		display: block;
		width: 95%;
		height: auto;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
	.aboutContent-container {
		position: relative;
	}
	.aboutTitle-container {
		margin: 40px 35px; /* see @supports for notch-iPhone styles */
	}
	.aboutTitle {
		margin: 0;
	}
	.aboutTitle-outline {
		display: none;
	}
	.aboutCaption {
		position: relative;
		margin: 40px 35px 60px; /* see @supports for notch-iPhone styles */
	}
	.aboutSignature {
		width: 55%;
		position: relative;
		margin-left: 25px; /* see @supports for notch-iPhone styles */
	}
	.aboutShare {
		position: relative;
		margin: 15px 35px 0;
		padding-bottom: 120px;
	}
	.aboutShareHeading {
		font-family: source-sans-pro;
		font-style: normal;
		font-weight: 200;
		font-size: 15px;
		color: #bd134f;
		margin-bottom: 5px;
	}
	p.notFound {
		top: 50%;
		left: 50%;
		line-height: 1.5em;
	}
	p.notFound:before {
		bottom: 130%;
		line-height: 100%;
		font-size: 1.5em;
	}
	
    /* iPhone notch compensation - MUST come after other styles */
    /* max() ensures safe-area-inset doesn't affect portrait layout */
    /* use calc to add margin on top of safe-area-inset */
    @supports (margin: max(0px)) {
        .navLogo-container {
            left: max(35px, calc(35px + env(safe-area-inset-left)));
        }
        .navIcon {
            right: max(35px, calc(35px + env(safe-area-inset-right)));
        }
		#controls {
			padding: 10px max(35px, calc(35px + env(safe-area-inset-left)));
		}
		.title {
			padding: 0 max(35px, calc(35px + env(safe-area-inset-left)));
		}
        .permalinkTitle {
            margin: 0 max(35px, calc(35px + env(safe-area-inset-left))) 10px;
        }
        .permalinkDate {
            margin: 0 max(35px, calc(35px + env(safe-area-inset-left)));
        }
        .permalinkCaption {
            margin: 40px max(35px, calc(35px + env(safe-area-inset-left)));
        }
        .permalinkShare {
            margin: 35px max(35px, calc(35px + env(safe-area-inset-left)));
        }
		.aboutTitle-container {
			margin: 40px max(35px, calc(35px + env(safe-area-inset-left)));
		}
		.aboutCaption {
			margin: 40px max(35px, calc(35px + env(safe-area-inset-left))) 60px;
		}
		.aboutSignature {
			margin-left: max(25px, calc(25px + env(safe-area-inset-left)));
		}
		.aboutShare {
			margin: 15px max(35px, calc(35px + env(safe-area-inset-left))) 0;
		}
    }
}

@media (max-width:899px) and (orientation:landscape), (min-width:450px) and (orientation:portrait) {
	#intro-container {
		margin: 110px 0 170px;
	}
	.featherlight .featherlight-image {
		max-width: 80vw !important;
	}
	.featherlight-close-icon {
		left: 103%;
		top: 50% !important;
		transform: translateY(-50%) !important;
	}
	.aboutSignature {
		width: 35%;
	}
	p.notFound {
		top: 57%;
	}
}

@media (min-width:900px) {
	/* custom scrollbar */
	/* Width */
	::-webkit-scrollbar {
		width: 5px;
	}
	/* Track */
	::-webkit-scrollbar-track {
		background: transparent;
	}
	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #414141;
	}
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #a91146;
	}
	#pageTop {
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
	}
	.globalNav {
		position: fixed;
		top: 0;
		width: 50px;
		height: 100vh;
	}
	.leftNav {
		left: 50px;
		z-index: 5;
	}
	.rightNav {
		right: 50px;
		z-index: 1; /* so that .navToTop doesn't appear on top of .navCloseZone background */
	}
	.navLogo-container {
		position: absolute;
		top: 50px;
		width: 100%;
		z-index: 5;
	}
	.navLogo {
		width: 100%;
	}
	.navIcon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 25px;
		height: 20px;
		z-index: 10;
		cursor: pointer;
	}
	.navIcon:hover span {
		animation: navIcon-toLeft-anim 0.5s ease;
	}
	.navIcon:hover span:nth-child(2), .navIcon span:nth-child(3) {
		animation-delay: 0.15s;
	}
	.navIcon:hover span:nth-child(4) {
		animation-delay: 0.3s;
	}
	.open .navIcon:hover span:nth-child(2) {
		animation: navIcon-toLeft-anim 0.5s ease;
		animation-delay: 0s;
	}
	.open .navIcon:hover span:nth-child(3) {
		animation: navIcon-toRight-anim 0.5s ease;
		animation-delay: 0.15s;
	}
	@keyframes navIcon-toLeft-anim {
		0% {
			background-position: right;
		}
		100% {
			background-position: left;
		}
	}
	@keyframes navIcon-toRight-anim {
		0% {
			background-position: left;
		}
		100% {
			background-position: right;
		}
	}
	.navOpenLogo {
		position: absolute;
		top: 130px;
		left: 90px;
		height: 85px;
		z-index: 10;
		opacity: 0;
		transform: translateX(-0.5em);
		transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0s;
		pointer-events: none;
	}
	.open .navOpenLogo {
		opacity: 1;
		transform: translateX(0);
		transition: 0.3s ease 0.3s;
		pointer-events: auto;
	}
	.navList {
		position: absolute;
		top: 50%;
		left: 90px;
		transform: translateY(calc(-50% - 0.1em)); /* -0.1em to compensate for space above characters in font */
		margin: 0;
		padding: 0;
		z-index: 10;
		list-style: none;
		pointer-events: none;
	}
	.open .navList {
		pointer-events: auto;
	}
	.navList li.menuItem {
		display: inline-block;
		text-decoration: none;
		margin-bottom: 40px;
		transform: translateX(-0.5em);
		opacity: 0;
		transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0s;
	}
	.navList li.menuItem:nth-child(3) {
		margin-bottom: 0;
	}
	.open .navList li.menuItem {
		transform: translateX(0);
		opacity: 1;
		-webkit-user-select: auto;  /* Chrome all / Safari all */
  		-moz-user-select: auto;     /* Firefox all */
  		-ms-user-select: auto;      /* IE 10+ */
  		user-select: auto;
	}
	.open .navList li.menuItem:nth-child(1) {
		transition: 0.3s ease 0.4s;
	}
	.open .navList li.menuItem:nth-child(2) {
		transition: 0.3s ease 0.45s;
	}
	.open .navList li.menuItem:nth-child(3) {
		transition: 0.3s ease 0.5s;
	}
	.navList li.menuItem a {
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 500;
		font-size: 23px;
		text-align: left;
		text-decoration: none;
		color: #bd134f !important;
		background-image: linear-gradient(to right, #bd134f 50%, transparent 50%);
		background-size: 200% 0.15em;
		background-position: 100% 1.6em;
		background-repeat: no-repeat;
		transition: 0.2s ease;
	}
	.navList li.menuItem a:hover {
		background-position: 0 1.6em;
	}
	.navList li.menuItem a:visited {
		color: #bd134f !important;
	}
	.navCopyright {
		display: block;
		position: absolute;
		bottom: 130px;
		left: 90px;
		width: 200px;
		margin: 0;
		z-index: 10;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 10px;
		line-height: 1.5em;
		color: #b7b7b7;
		opacity: 0;
		transition: 0.3s ease 0s;
		pointer-events: none;
	}
	.navCopyright:before {
		content: '';
		position: absolute;
		top: -2em;
		left: 0;
		width: 150px;
		height: 0.5px;
		background: linear-gradient(to right, #b7b7b7 50%, transparent 50%);
		background-size: 200% 100%;
		background-position: right;
		transition: 0.3s ease 0.3s;
	}
	.open .navCopyright {
		opacity: 1;
		transition: 0.3s ease 0.3s;
		pointer-events: auto;
	}
	.open .navCopyright:before {
		background-position: left;
		transition: 0.3s ease 0.8s;
	}
	.navBG {
		position: absolute;
		top: 0;
		left: -50px;
		width: 425px;
		height: 100vh;
		background: linear-gradient(to right, white 50%, transparent 50%);
		background-size: 200% 100%;
		background-position: right;
		pointer-events: none;
		z-index: 6;
		transition: 0.3s ease 0.3s;
	}
	.open .navBG {
		background-position: left;
		pointer-events: auto;
		transition: 0.3s ease 0s;
	}
	.navBG:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		box-shadow: 0px 0px 350px rgba(0, 0, 0, 0.07);
		opacity: 0;
		transition: 0.3s ease 0s;
	}
	.open .navBG:before {
		opacity: 1;
		transition: 0.3s ease 0.3s;
	}
	.navCloseZone {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 5;
		background-color: black;
		opacity: 0;
		transition: 0.3s ease 0.3s;
		pointer-events: none;
	}
	.open .navCloseZone {
		opacity: 0.5;
		transition: 0.3s ease 0s;
		pointer-events: auto;
	}
	.navBreadcrumb {
		width: 80px; /* to make sure "not found" doesn't break into two lines */
		position: absolute;
		left: 50%;
		bottom: calc(50px - 14px); /* -14px bc of slight position differences after rotation */
		transform: rotateZ(-90deg);
		transform-origin: left;
		z-index: 5;
	}
	.navBreadcrumb a {
		color: inherit;
		text-decoration: none;
	}
	.open .navBreadcrumb {
		pointer-events: none;
	}
	.bcLocation {
		display: inline-block;
		position: relative;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 500;
		font-size: 15px;
		color: #bd134f;
	}
	.bcLocation a {
		background-image: linear-gradient(to right, #bd134f 50%, transparent 50%);
		background-size: 200% 0.15em;
		background-position: 100% 1.6em;
		background-repeat: no-repeat;
		transition: 0.2s ease;
	}
	.bcLocation:hover a {
		background-position: 0 1.6em;
	}
	.bcLocation i {
		margin-left: 10px;
	}
	.bcLocation:hover i {
		animation: bcArrow-anim 0.5s ease 0.2s;
	}
	@keyframes bcArrow-anim {
		0% {
			opacity: 1;
			transform: translateY(0);
		}
		50% {
			opacity: 0;
			transform: translateY(-5px);
		}
		51% {
			opacity: 0;
			transform: translateY(5px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.navArrow {
		z-index: 5;
		font-size: 15px;
		color: #bd134f;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
	}
	.navToTop {
		position: absolute;
		left: 50%;
		bottom: 65px;
		transform: translate(-50%, 15px);
		opacity: 0;
		transition: 0.5s ease;
		pointer-events: none;
	}
	.navToTop.enabled {
		opacity: 1;
		transform: translate(-50%, 0);
		pointer-events: all;
	}
	.navToTop i {
		margin-bottom: 5px;
	}
	.navToTop:hover i {
		animation: navToTopArrow-anim 0.5s ease 0.4s;
	}
	@keyframes navToTopArrow-anim {
		0% {
			opacity: 1;
			transform: translateY(0);
		}
		50% {
			opacity: 0;
			transform: translateY(-5px);
		}
		51% {
			opacity: 0;
			transform: translateY(5px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.navToTop-label {
		display: inline-block;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 400;
		line-height: 0;
		opacity: 0;
		transition: 0.5s ease;
		transform: translateY(5px);
	}
	.navToTop:hover .navToTop-label {
		opacity: 1;
		transform: translateY(0);
	}
	.navToIntroBody {
		display: inline-block;
		padding-left: 109px;
		margin-top: 50px;
	}
	.navToIntroBody:hover i {
		animation: navToIntroBodyArrow-anim 0.5s ease;
	}
	@keyframes navToIntroBodyArrow-anim {
		0% {
			opacity: 1;
			transform: translateY(0);
		}
		50% {
			opacity: 0;
			transform: translateY(5px);
		}
		51% {
			opacity: 0;
			transform: translateY(-5px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	#intro-container {
		position: relative;
		margin: 0 150px 150px; /* margin-top=35vh so that video is vertically centered */
		width: calc(100vw - (150px * 2));
		max-width: 1920px;
		z-index: 1;
	}
	.intro-section {
		display: flex;
		flex-direction: row;
		margin-bottom: 100px;
	}
	.intro-section:last-child {
		margin-bottom: 0;
	}
	.intro-section-flag {
		flex-basis: 33.333%;
		flex-shrink: 0; /* prevents column from shrinking due to content in the other column */
		text-align: right;
	}
	.intro-section-content {
		flex-basis: 66.667%;
	}
	.intro-flag-text {
		display: inline-block; /* essential for :after underline */
		position: relative;
		margin: 0.75em 0 0;
		text-align: right;
	}
	.intro-flag-text:after {
		content: '';
		position: absolute;
		top: calc(1em + 10px);
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #414141;
		background-size: 100% 100%;
	}
	.intro-content-text {
		position: relative;
		margin: 0;
		padding-left: 100px;
		padding-right: 50px;
	}
	.intro-xlarge-text {
        z-index: 5;
        font-size: 100px;
        line-height: 1.0em;
    }
	.intro-large-text {
        z-index: 5;
        font-size: 50px;
        line-height: 1.1em;
    }
    .intro-medium-text {
        font-size: 30px;
        line-height: 1em;
    }
    .intro-small-text {
        font-size: 20px;
        line-height: 1em;
    }
	.intro-mobile-text {
		display: none;
	}
	#intro-hero-text-section.intro-section {
		height: 67vh;
		margin-bottom: 0;
	}
	#intro-desktop-hero-hello {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	#intro-hero-video-section.intro-section {
		margin-bottom: 125px;
	}
	.intro-hero-video-container {
		width: 100%;
		height: 35vh;
		position: relative;
		overflow: hidden;
	}
	.intro-hero-video-container::before {
		content: '';
		width: 100%;
		height: 5px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: #fafafa;
		transform: scaleY(0);
		transform-origin: top;
		transition: 0.2s ease;
	}
	.intro-hero-video-container:hover::before {
		transform: scaleY(1);
	}
	.intro-hero-video-container::after {
		content: '';
		width: 100%;
		height: 5px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: #fafafa;
		transform: scaleY(0);
		transform-origin: bottom;
		transition: 0.2s ease;
	}
	.intro-hero-video-container:hover::after {
		transform: scaleY(1);
	}
	.intro-hero-video-link {
		text-decoration: none;
		overflow: hidden; /* part of fix for inexplicable 0.5px black border around video */
	}
	.intro-hero-video {
		width: calc(100% + 2px); /* part of fix for inexplicable 0.5px black border around video */
		height: auto;
		position: absolute;
		left: -1px; /* part of fix for inexplicable 0.5px black border around video */
		top: 50%;
		transform: translateY(-50%);
		background: none;
	}
	.intro-mobile-video-container {
		display: none;
	}
/*
	.intro-hero-initials {
		width: auto;
		height: 8vh;
		min-height: 50px;
		position: relative;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		z-index: 1;
	}
*/
	.intro-animated-text {
		overflow: visible;
		fill: currentColor;
	}
	#svgText1.intro-animated-text, #svgText2.intro-animated-text {
		height: 50px;
	}
	.intro-animated-text symbol {
		overflow: visible;
	}
	.intro-animated-text symbol text {
		fill: rgba(0,0,0,0);
		stroke: #414141;
		stroke-width: 1px;
		stroke-linejoin: round;
	}
	#svgText1-use {
		stroke-dasharray: 220;
		stroke-dashoffset: 220;
	}
	.reveal-complete #svgText1-use {
		-webkit-animation: svgText1-anim 0.5s linear forwards;
		animation: svgText1-anim 0.5s linear forwards;
	}
	#svgText2-use {
		stroke-dasharray: 270;
		stroke-dashoffset: 270;
	}
	.reveal-complete #svgText2-use {
		-webkit-animation: svgText2-anim 0.8s linear forwards;
		animation: svgText2-anim 0.8s linear forwards;
	}
	@-webkit-keyframes svgText1-anim {
		0% {
			stroke-dashoffset: 220;
		}
		100% {
			stroke-dashoffset: 0;
		}
	}
	@keyframes svgText1-anim {
		0% {
			stroke-dashoffset: 220;
		}
		100% {
			stroke-dashoffset: 0;
		}
	}
	@-webkit-keyframes svgText2-anim {
		0% {
			stroke-dashoffset: 270;
		}
		100% {
			stroke-dashoffset: 0;
		}
	}
	@keyframes svgText2-anim {
		0% {
			stroke-dashoffset: 270;
		}
		100% {
			stroke-dashoffset: 0;
		}
	}
	.intro-company-icon {
		height: 45px;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		border: none;
		background: none;
		cursor: pointer;
	}
	#intro-wmg-icon.intro-company-icon, #intro-disneyplus-icon.intro-company-icon {
		cursor: default;
	}
	.intro-company-icon img {
		height: 100%;
	}
	#intro-wmg-icon {
		margin: 0 4px 0 10px;
	}
	#intro-wmg-icon.intro-company-icon img {
		height: 80%;
	}
	#intro-disney-icon {
		margin: 0 5px;
	}
	#intro-disneyplus-icon {
		margin: 0 5px;
	}
	#intro-disneyplus-icon.intro-company-icon img{
		transform: translateY(-0.3em);
	}
	#intro-fox-icon {
		margin: 0 10px;
	}
	#intro-webby-icon {
		margin: 0 10px;
	}
	.intro-list {
		margin: 10px 0 60px;
		list-style: none;
	}
	.intro-list-item {
		position: relative;
	}
	.intro-list-item h2 {
		position: relative;
		margin: 0;
		font-size: 60px;
		letter-spacing: 1px;
		transition: 0.3s ease;
	}
	.intro-list-item:hover h2 {
		cursor: crosshair;
		letter-spacing: 3px;
/*		-webkit-text-stroke: 1.8px #414141;*/
/*		color: #414141;*/
	}
	.intro-list-category-video-container {
		width: 20vw;
		height: 15vw;
		max-width: 480px;
		max-height: 360px;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 0;
		background-color: blue;
		opacity: 0;
		transition: 0.3s ease;
		pointer-events: none;
	}
	.intro-list-item:hover .intro-list-category-video-container {
		opacity: 1;
	}
	#graphic-design-kv.intro-list-category-video-container {
		left: 90%;
	}
	#web-design-kv.intro-list-category-video-container {
		left: -10%;
	}
	#photography-kv.intro-list-category-video-container {
		left: 80%;
	}
	#copywriting-kv.intro-list-category-video-container {
		left: 0%;
	}
	.intro-list-category-video {
		width: 100%;
		height: auto;
	}
	.intro-work-link {
		display: inline-block;
		position: relative;
		margin-left: 100px;
		padding: 15px 20px 18px;
		border-radius: 5px;
		box-shadow: inset 0 0 0 3px #414141;
		text-decoration: none;
	}
	.no-touchevents .intro-work-link::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		border-radius: 5px;
		background: -webkit-linear-gradient(left, #414141 50%, rgba(0, 0, 0, 0) 50%);
		background: -o-linear-gradient(left, #414141 50%, rgba(0, 0, 0, 0) 50%);
		background: linear-gradient(to right, #414141 50%, rgba(0, 0, 0, 0) 50%);
		background-size: 200% 100%;
		background-position: right;
		transition: 0;
	}
	.no-touchevents .intro-work-link:hover::before {
		background-position: left;
		transition: 0.3s;
	}
	.no-touchevents .intro-work-link::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		border-radius: 5px;
		background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 50%, #414141 50%);
		background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 50%, #414141 50%);
		background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #414141 50%);
		background-size: 200% 100%;
		background-position: left;
		transition: background-position 0.3s, opacity 0;
		opacity: 1;
	}
	.no-touchevents .intro-work-link:hover::after {
		background-position: right;
		transition: 0;
		opacity: 0;
	}
	.intro-work-link span {
		position: relative;
		z-index: 5;
		transition: 0.2s ease;
	}
	.intro-work-link:hover span {
		color: white;
	}
	#intro-personal-section {
		height: 255px; /* height = three lines of text @ 85px each */
	}
	#intro-personal-pickIntro-button {
		display: block;
		position: relative;
		margin: 35px 49px 0 auto;
		padding: 0;
		border: none;
		background: none;
	}
	.button-icon {
		position: relative;
		z-index: 5;
		font-size: 20px;
		color: #414141;
		cursor: pointer;
		transition: 0.2s ease;
	}
	#intro-personal-pickIntro-button:hover .button-icon {
		color: #fafafa;
	}
	.button-bg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	.button-bg-circle {
		stroke: #414141;
		stroke-width: 3;
		fill: transparent;
		transition: 0.2s ease;
		cursor: pointer;
	}
	#intro-personal-pickIntro-button:hover .button-bg-circle {
		fill: #414141;
	}
	.intro-personal-dynamic-container {
		width: calc(100% - 100px);
		height: 30vh;
		position: relative;
		margin-left: 100px;
	}
	.dynamic-intro {
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		margin-top: -0.35em;
		padding: 3px 12px 3px 0;
		line-height: 1.7em;
	}
	.dynamic-dynamicContent-wrapper {
		position: absolute;
		width: calc(100% - 27px - 12px); /* to account for margin-left 27px and padding-right 12px */
	}
	#dynamicContent {
		position: relative;
		box-shadow: inset 0 -5px 0 0px #414141; /* underline closer to text than border-bottom */
		transition: 0s;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 33.333%, #414141 33.333%, #414141 66.666%, rgba(0, 0, 0, 0) 66.666%);
		background-repeat: no-repeat;
		background-size: 300% 80%; /* background-size 80% & background-position-y 73% precisely calibrated */
		background-position: right 73%;
	}
	#dynamicContent.transition {
		transition: 0.3s;
		background-position: center 73%;
	}
	#dynamicContent.transition.postTransition {
		background-position: left 73%;
	}
	#dynamicContent.transition.postTransition.hideShadow {
		transition: 0s;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	}
	#dynamicContent > a {
		color: inherit;
		text-decoration: none;
	}
	.dynamic-dynamicShape-wrapper {
		position: absolute;
		width: calc(100% - 27px - 12px); /* to account for margin-left 27px and padding-right 12px */
		top: calc(-1em + 3px);
	}
	#dynamicShape {
		color: rgba(0, 0, 0, 0);
		position: relative;
		margin-left: 27px; /* IMPORTANT!!! Recalibrate this every time layout is changed. Turn off JS -> Make it a different color -> Align it with #dynamicContent. */
		padding-bottom: 5px;
		transition: 0s;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 33.333%, #414141 33.333%, #414141 66.666%, rgba(0, 0, 0, 0) 66.666%);
		background-repeat: no-repeat;
		background-size: 300% 81%; /* background-size 80% & background-position-y 73% precisely calibrated */
		background-position: right 73%;
	}
	#dynamicShape.transition {
		transition: 0.3s;
		background-position: center 73%;
	}
	#dynamicShape.transition.postTransition {
		transition: 0.3s;
		background-position: left 73%;
	}
	#dynamicShape > a {
		color: inherit;
		text-decoration: none;
	}
	.intro-social-icons {
		position: relative;
		width: calc(100% - 100px);
		margin-left: 82px; /* 100px, adjusted for empty space around IG icons */
	}
	.share-module .permalinkShareIcon {
		margin: 0 5px;
	}
	#entries-container {
		position: relative;
		top: 0;
		margin: 0 150px; /* can't use left: 50% and translateX b/c scrollReveal doesn't recognize translate and thinks some posts are off screen */
		width: calc(100vw - (150px * 2));
	}
	#controls {
		margin: 150px 50px 60px;
	}
	.workPageTitle {
		display: block;
		margin: 0 0 20px 0;
		padding-right: 55px;
		vertical-align: middle;
	}
	a.filter {
		transform: translateY(5px);
		vertical-align: middle;
	}
	a.filter:hover {
		color: #bd134f;
	}
	#entries {
		width: calc(100% + 10px); /* 10px is enough space for margin-right of rightmost element in any row */
		position: relative;
		height: auto;
		letter-spacing: -0.25em; /* to fix inline-block white space issue */
		pointer-events: none;
	}
	.post {
		display: inline-block;
		position: relative;
		width: calc(((100vw - (150px * 2)) - 10px)/2);
		height: calc(0.75 * (((100vw - (150px * 2)) - 10px)/2) + 110px); /* 75% of width + space for .title; originally fixed at 375px */;
		margin-top: 0;
		margin-right: 10px;
		margin-bottom: 10px;
		margin-left: 0;
		letter-spacing: normal; /* to reset letter-spacing set by #entries parent */
		pointer-events: all;
		overflow: visible;
	}
	.postLink {
		text-decoration: none;
		pointer-events: all;
	}
	.postImage {
		width: 100%;
		height: 70%;
		position: relative;
		background-size: cover;
		background-position: center;
		transition: 0.3s ease;
	}
	.video .postImage {
/*		background-size: auto;*/
	}
/*
	.postImage:before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-box-shadow: 0px 5px 20px -10px rgba(130, 130, 130, 1.00);
		box-shadow: 0px 5px 20px -10px rgba(130, 130, 130, 1.00);
		opacity: 0;
		transition: 0.3s ease;
	}
	.post:hover .postImage:before {
		opacity: 1;
	}
*/
	.title {
		position: absolute;
		top: calc(70% + 15px);
		padding-left: 15px;
		padding-right: 15px;
		color: #555555;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-size: 1.05em;
		font-weight: 400;
		text-align: left;
		overflow-wrap: break-word;
	}
	.postDate {
		position: relative;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
	}
	.postArrow {
		position: absolute;
		top: calc(70% + 15px);
		right: 25px;
		margin-top: 0.6em;
		color: #555555;
		opacity: 0;
		transition: right 0.2s ease 0.2s, opacity 0.2s ease 0s;
	}
	.post:hover .postArrow {
		right: 15px;
		opacity: 1;
		transition: 0.2s ease 0s;
	}
	.postArrow:hover, .title:hover + .postArrow {
		animation: arrowRight-anim 2s infinite;
	}
	@keyframes arrowRight-anim {
		0% {
			transform: translateX(0);
			opacity: 1;
		}
		15% {
			transform: translateX(10px);
			opacity: 0;
		}
		16% {
			transform: translateX(-10px);
			opacity: 0;
		}
		30%, 100% {
			transform: translateX(0);
			opacity: 1;
		}
	}
	@keyframes arrowLeft-anim {
		0% {
			transform: translateX(0);
			opacity: 1;
		}
		15% {
			transform: translateX(-10px);
			opacity: 0;
		}
		16% {
			transform: translateX(10px);
			opacity: 0;
		}
		30%, 100% {
			transform: translateX(0);
			opacity: 1;
		}
	}
	.postTitle-container p {
		margin: 0;
		line-height: 1.3em;
	}
	.permalink-container {
		position: relative;
		top: 0;
		/*top: 143px; /* 150px - 7px to compensate for space above characters in font */
		margin: 0 150px 150px;
		width: calc(100vw - (150px * 2));
		max-width: 1280px;
	}
	.permalinkImage-container {
		display: block;
		position: relative;
		top: 0;
		margin: 105px auto 70px;
	}
	.permalinkImage {
		display: block;
		width: 100%;
		position: relative;
		top: 0;
	}
	.permalinkPhotoset-container {
		display: block;
		width: calc(100% + 10px) !important; /* to compensate for required 5px border around each photoset image */
		position: relative;
		top: 0;
		margin: 100px 0 65px -5px; /* 100px margin-top & 65px margin-bottom to compensate for 5px border (visually it's 105px & 70px margins, same as .permalinkImage-container); -5px margin-left to compensate for extra width - can't change .permalink-container width */
	}
	.photoset-row > :first-child .photoset-content-border { /* FIX PHOTOSET JS ERROR - force border-left for first cell in row */
		border-left: 5px solid rgb(250, 250, 250) !important;
	}
	.permalinkTitle-container {
		width: 100%;
		position: relative;
		top: 0;
		margin: 150px 0 100px;
	}
	.permalinkTitle {
		width: calc(75% - 50px); /* 50px is the left margin */
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 15px 50px;
	}
	.heading-large {
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 600;
		font-size: 60px;
		line-height: 1em;
		color: #414141;
	}
	.permalinkDate {
		width: calc(25% - 50px); /* 50px is the right margin */
		position: absolute;
		top: 0;
		right: 0;
		margin: 10px 50px 0 0; /* 10px margin-top to align to middle of title text */
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 500;
		font-size: 2.5em;
		text-align: right;
		line-height: 1em;
		color: #bd134f;
	}
	.permalinkJump {
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 0 50px;
		text-decoration: none;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 600;
		font-size: 1em;
		color: #bd134f;
		background-image: linear-gradient(to right, #bd134f 50%, transparent 50%);
		background-size: 200% 2px;
		background-repeat: no-repeat;
		background-position: 100% 100%;
		transition: 0.2s ease;
	}
	.permalinkJump:hover {
		background-position: 0 100%;
	}
	.permalinkCaptionShare-container {
		display: flex;
		width: 100%;
		position: relative;
		top: 0;
	}
	.permalinkCaption {
		flex-basis: 66.667%;
		position: relative;
		top: 0;
		left: 0;
		padding: 0 50px;
	}
	.bodyText > p {
		margin: 0 0 1em 0;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1em;
		line-height: 1.4;
		color: #555555;
	}
	.bodyText > p:last-child {
		margin: 0;
	}
	.permalinkShare-container {
		display: inline-flex; /* to align .permalinkShare block to the right */
		flex-basis: 33.333%; /* to work with .permalinkCaptionShare-container */
		position: relative;
		top: 0;
		right: 0;
		pointer-events: all;
	}
	.permalinkShare {
		position: relative;
		margin-left: auto;
		margin-right: 50px;
	}
	.permalinkShareHeading {
		margin: -0.1em 0 0 0; /* just to compensate for extra space in font */
		padding-left: 7px;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 0.8em;
		color: #cacaca;
	}
	.shareSlash {
		margin: 0 10px;
	}
	.shareDestination {
		opacity: 0;
		transition: 0.2s ease;
	}
	.shareDestination.destVisible {
		opacity: 1;
	}
	.permalinkShareIcon {
		display: inline-block;
		width: 50px;
		height: 50px;
		position: relative;
		margin-right: 10px;
		font-size: 1.5em;
		color: #cacaca;
		transition: 0.3s ease;
	}
	.shareFB:hover .permalinkShareIcon {
		color: #3C5A99;
	}
	.shareTwitter:hover .permalinkShareIcon {
		color: #1DA1F2;
	}
	.shareLikeTumblr:hover .permalinkShareIcon {
		color: #bd134f;
	}
	.shareReblogTumblr:hover .permalinkShareIcon {
		color: #13BD21;
	}
	.permalinkShareIcon i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.permalinkTumblr {
		display: inline-block;
		position: relative;
		cursor: pointer;
	}
	.like_button + .permalinkShareIcon .fas { /* heart with fill */
		display: none;
	}
	.like_button.liked + .permalinkShareIcon .far { /* heart with no fill */
		display: none;
	}
	.like_button.liked + .permalinkShareIcon .fas { /* heart with fill */
		display: inline;
	}
	#pagination {
		width: 100%;
		height: 2em;
		position: relative;
		margin-bottom: 78px;
	}
	#pagination a {
		display: inline-block;
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		text-decoration: none;
		font-family: 'Palanquin Dark', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1em;
		color: #555555;
		transition: 0.3s ease;
	}
	#pagination a:hover {
		color: #bd134f;
	}
	#pagination a.previousPage {
		left: 0;
		text-align: left;
	}
	#pagination a.nextPage {
		right: 0;
		text-align: right;
	}
	#pagination a i {
		margin: 0 15px;
	}
	#pagination a.previousPage:hover i {
		animation: arrowLeft-anim 2s;
	}
	#pagination a.nextPage:hover i {
		animation: arrowRight-anim 2s;
	}
	.about-container {
		position: relative;
		width: 100%;
		margin: 0 auto;
	}
	.aboutImage-container {
		width: 100%;
		height: 101vh;
		position: relative;
		top: 0;
		left: 0;
		background-color: white;
	}
	.aboutImage {
		display: block;
		width: auto;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.aboutContent-container {
		display: flex;
		width: calc(100vw - (205px * 2));
		max-width: 1280px;
		position: relative;
		top: 0;
		margin: 80px auto 120px;
	}
	.aboutTitle-container {
		flex-basis: 33.333%;
		position: relative;
		top: 0;
		left: 0;
		padding: 0 50px;
	}
	.aboutTitleArt {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	.aboutTitle-outline {
		display: block;
		text-align: center;
		-webkit-text-stroke: .8px #414141;
		color: transparent;
	}
	.aboutTitle {
		position: relative;
		margin: 0;
		text-align: center;
	}
	.aboutContent-container:hover .highlightLetter {
		-webkit-text-stroke: 0px #414141;
		color: #414141;
	}
	.aboutContent-container:hover .aboutTitle {
		-webkit-text-stroke: .8px #414141;
		color: transparent;
	}
	.aboutCaption {
		flex-basis: 66.667%;
		position: relative;
		top: 0;
		right: 0;
		padding: 0 50px;
	}
	.aboutSignature {
		display: block;
		width: 30%;
		max-width: 350px;
		position: relative;
		margin: 0 auto;
		padding-left: 2em;
	}
	.aboutShare {
		width: 50%;
		position: relative;
		margin: 10px auto 100px;
		text-align: center;
	}
	.aboutShareHeading {
		margin: 0 0 10px;
		font-family: 'Palanquin', Helvetica, sans-serif;
		font-weight: 400;
		font-size: 0.8em;
		color: #555555;
	}
	.shareInstagram:hover .permalinkShareIcon {
		color: #fb3958;
	}
	.shareTwitter:hover .permalinkShareIcon {
		color: #1DA1F2;
	}
	.shareLinkedIn:hover .permalinkShareIcon {
		color: #0077b5;
	}
	.shareBehance:hover .permalinkShareIcon {
		color: #1769ff;
	}
	.shareEmail:hover .permalinkShareIcon {
		color: #bd134f;
	}
	.featherlight-content::-webkit-scrollbar {
		width: 0 !important;
	}
	.featherlight .featherlight-image {
		max-height: 100vh !important;
		max-width: 100vw !important;
	}
	.featherlight-close-icon {
		color: white !important;
		font-size: 25px !important;
		line-height: 60px !important;
		width: 70px !important;
		transition: 0.25s !important;
	}
	.touchevents .featherlight-close-icon {
		color: #BD134F !important;
	}
	.no-touchevents .featherlight-close-icon:hover {
		color: #BD134F !important;
		transform: rotateZ(90deg);
	}
}

@media (min-width:1280px) {
	.post {
		width: calc(((100vw - (150px * 2)) - 20px)/3);
		height: calc(0.75 * (((100vw - (150px * 2)) - 20px)/3) + 110px); /* 75% of post width + space for .title */
	}
}

@media (min-width:1400px) {
	.workPageTitle {
		display: inline-block;
		margin: 0;
	}
}

@media (min-width:1920px) {
	.post {
		width: calc(((100vw - (150px * 2)) - 30px)/4);
		height: calc(0.75 * (((100vw - (150px * 2)) - 30px)/4) + 110px); /* 75% of post width + space for .title */
	}
}