:root {
	--bs-primary: #88e168;
	--bs-secondary: #fff;
	--bs-body-bg: #14170a;
}

html, body {
    height: 100%;
	background-color: var(--bs-body-bg);
}

html {
	font-size: 16px;
}

body {
	font-family: "articulat-cf", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5rem;
    line-height: 1.64em;
    color: var(--bs-secondary);
    -webkit-font-smoothing: antialiased;
}

::selection {
	background: rgba(136, 225, 104, 0.3);
}

::-moz-selection {
	background: rgba(136, 225, 104, 0.3);
}

a, a:visited, a:hover, a:active {
	color: var(--bs-primary);
	text-decoration: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.transition-sm {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.transition-md {
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

.transition-lg {
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
}

.ta-center {
	text-align: center;
}

.ta-right {
	text-align: right;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.1em;
	color: var(--bs-primary);
	margin-bottom: 2rem;
}

h1 {
	font-size: 5rem;
}

h1.hero-title {
	position: relative;
	margin-bottom: 5rem;
	top: 1.8rem;
}

.logo-mark {
	font-family: "instrument-serif", sans-serif;
	font-weight: 400;
	font-size: 3rem;
	line-height: 0.7em;
	letter-spacing: normal;
	margin-bottom: 0;
}

h2 {
	font-size: 4rem;
}

h3 {
	font-size: 2.5rem;
}

h4,
.logo-mark.small {
	font-size: 2rem;
}

h4.subtitle {
	margin-bottom: 2.5rem;
}

h5, h6 {
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1em;
}

h5 {
	font-size: 1.5rem;
}

h6 {
	font-size: 1rem;
}

h6.alt {
	margin-bottom: 3.5rem;
	line-height: 1.5em;
}

.explanatory-heading {
	margin-bottom: 3.5rem;
}

.normal-weight {
	font-weight: 400;
}

.white {
	color: var(--bs-secondary);
}

.dark {
	color: #14170a;
}

p {
	line-height: 1.64em;
	margin-bottom: 2rem;
}

p:last-child {
	margin-bottom: 0;
}

img {
	width: 100%;
	height: auto;
}

.icon {
	width: 1.5rem;
	height: auto;
}

.caption {
	font-size: 1rem;
	font-style: italic;
	line-height: 1em;
}

.container-fluid {
	padding: 0;
}

.row {
	--bs-gutter-x: 0;
}

.content-wrapper {
	padding: 3.5rem 5rem;
}

.column-left,
.img-column-left {
	padding-right: 1.75rem;
}

.column-right,
.img-column-right {
	padding-left: 1.75rem;
}

.img-column-equal {
	padding-left: 1.165rem;
	padding-right: 1.165rem;
}

.equal-left,
.equal-right {
	position: relative;
}

.equal-left {
	left: -1.165rem;
}

.equal-right {
	left: 1.165rem;
}

.content-middle {
	padding-top: 0;
}

.content-middle img,
.img-two-column {
	margin-bottom: 3.5rem;
}

.img-column-left img,
.img-column-right img,
.img-two-column-last,
img.img-last {
	margin-bottom: 0;
}

.img-flex {
	display: flex;
	align-items: stretch;
}

.img-two-column img {
	display: block;
	max-width: 100%;
	height: auto; 
}

.img-padding-right {
	padding-right: 1.3rem;
}

.img-padding-right.alt {
	padding-right: 3.5rem;
}

.img-padding-left {
	padding-left: 2.2rem;
}

.img-padding-left.alt {
	padding-left: 3.5rem;
}


.img-wrapper,
.img-flex {
	flex: 1;
}

img.img-caption {
	margin-bottom: 1.5rem;
}

.registration-signage {
	background: url("/images/work-grow-forward-registration-signage@2x.jpg") no-repeat center / cover;
}

.photo-props {
	background: url("/images/work-grow-forward-props@2x.jpg") no-repeat center / cover;
}

.branded-coffee {
	background: url("/images/work-grow-forward-coffee@2x.jpg") no-repeat center / cover;
}

.digital-subscriptions-supercharged-square {
	background: url("/images/work-recurly-ad-supercharged-square@2x.jpg") no-repeat center / cover;
}

.ad-growth-engine-landscape-square {
	background: url("/images/work-recurly-ad-growth-engine-square@2x.jpg") no-repeat top / 102.5%;
}

.ad-growth-engine-landscape-square-alt {
	background: url("/images/work-recurly-ad-growth-engine-alt-square@2x.jpg") no-repeat top / cover;
}

.work-video {
	width: 100%;
	height: auto;
}

.img-padding-right img,
.img-padding-left img {
	margin-bottom: 0;
}

.white-border {
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-sizing: border-box;
}

.white-border-hero {
	border-left: none;
	border-right: none;
}

.navbar-wrapper {
	padding-bottom: 0;
}

.footer-wrapper {
	padding-top: 1.5rem;
}

.footer-wrapper h6 {
	margin-bottom: 0;
}

.footer-wrapper span {
	text-transform: none;
}

.navbar {
	background-color: transparent;
	border-bottom: 1px solid var(--bs-primary);
	padding: 0 0 1.5rem 0;
}

.navbar-work-detail .navbar {
	border-bottom: 0;
}

.navbar-brand {
	padding: 0;
	margin: 0;
}

.nav-item {
	margin-right: 2rem;
}

.nav-item:nth-child(2) {
	margin-right: 0;
}

.navbar-expand .navbar-nav .nav-link {
	color: var(--bs-primary);
	font-size: 1.5rem;
	line-height: 1.5em;
	padding: 0;
}

.work-item {
	margin-bottom: 5rem;
}

.work-item:last-child {
	margin-bottom: 0;
}

.work-item,
.image-wrapper {
	position: relative;
}

.work-item a,
.see-work-wrapper {
	position: absolute;
}

.work-item a {
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.see-work-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(136, 225, 104, 0.9);
	opacity: 0;
	z-index: 1;
}

.icon-arrow-right {
	position: relative;
	margin-top: -0.25rem;
}

.see-work-wrapper h5 {
	margin-bottom: 0;
	width: 100%;
}

.work-item .row {
	margin-top: 1.5rem;
}

.work-item h3 {
	margin-bottom: 0;
	line-height: 1em;
}

.work-title {
	margin-bottom: 0.5rem;
}

.divider-wrapper {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

hr {
	margin: 0;
	border-color: var(--bs-primary);
	opacity: 1;
	border-width: 1px;
}

h1.xxxl-heading {
	font-size: 20rem;
	margin-top: 5rem;
	margin-bottom: 2.5rem;
}

.footer-nav {
	padding-top: 3.5rem;
}

.footer-nav .work-item .row {
	margin-top: 1rem;
}

.footer-nav .col:first-child .work-item,
.footer-nav .col:nth-child(3) .work-item {
	padding-right: 1.75rem;
}

.footer-nav .col:last-child .work-item,
.footer-nav .col:nth-child(2) .work-item {
	padding-left: 1.75rem;
}

.footer-nav .col:nth-child(3) .work-item,
.footer-nav .col:last-child .work-item {
	margin-bottom: 0;
}

.footer-nav .work-item {
	margin-bottom: 3.5rem;
}

.footer-nav .see-work-wrapper h5 {
	font-size: 1rem;
}


.footer-nav .see-work-wrapper img {
	width: 1rem;
	height: auto;
}

.footer-nav .work-item h3 {
	font-size: 1.5rem;
}

.footer {
	border-top: 1px solid var(--bs-primary);
	padding: 1.5rem 0 0 0;
}

.footer h5 {
	margin-bottom: 0;
	font-weight: 400;
}

.footer .ta-center {
	max-width: 2rem;
	width: 100%;
}

.footer-wrapper-about {
	padding-top: 0;
}

.zero-opacity {
	opacity: 0;
}

img.zero-opacity,
.img-wrapper,
.zero-opacity img,
h1.hero-title {
	filter: blur(1rem);
}

.fade-in {
	opacity: 1;
}

img.fade-in,
.img-wrapper.fade-in,
.fade-in img,
h1.hero-title.fade-in {
	filter: blur(0);
}

h1.hero-title.fade-in {
	top: 0;
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		opacity: 0.5;
		cursor: pointer;
	}

	.work-item:hover h3 {
		opacity: 0.5;
	}

	.work-item:hover .see-work-wrapper {
		opacity: 1;
	}

	.work-item:hover .icon-arrow-right {
		transform: translateX(0.6rem);
	}

	.footer-nav .work-item:hover .icon-arrow-right {
		transform: translateX(0.4rem);
	}
}

@media (max-width: 1300px) {
	html {
		font-size: 14px;	
	}
}

@media (max-width: 992px) {
	html {
		font-size: 12px;	
	}
	.content-wrapper {
		padding: 3.5rem;
	}
	.divider-wrapper {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	.navbar-wrapper {
		padding-bottom: 0;
	}
	.footer-wrapper {
		padding-top: 1.5rem;
	}
	.column-left,
	.column-right {
		padding: 0;
	}
	.column-left.alt {
		padding-right: 1.75rem;
	}
	.column-right.alt {
		padding-left: 1.75rem;
	}
	.project-info {
		padding-bottom: 0;
	}
}

@media (max-width: 820px) {

}

@media (max-width: 767px) {
	html {
		font-size: 8px;	
	}
	h1, h2 {
		font-size: 6rem;
	}
	h2.explanatory-heading,
	.project-info h4 {
		font-size: 4rem;
	}
	.see-work-wrapper h5 {
		font-size: 2.5rem;
	}
	.see-work-wrapper .icon {
		width: 2.5rem;
	}
	.project-info h6 {
		font-size: 1.75rem;
		margin-bottom: 5rem;
	}
	p, .navbar-expand .navbar-nav .nav-link,
	.work-item h3, .footer-nav .work-item h3 {
		font-size: 3rem;
	}
	.work-title {
		margin-bottom: 1rem;
	}
	.caption {
		font-size: 2.25rem;
	}
	.logo-mark {
		font-size: 4rem;
	}
	.nav-item {
		margin-right: 3rem;
	}
	.nav-item:nth-child(2) {
		margin-right: 0;
	}
	.column-left.alt,
	.column-right.alt {
		padding: 0;
	}
	.photo-about-me {
		margin-bottom: 3.5rem;
	}
	.footer-nav .col:first-child .work-item,
	.footer-nav .col:nth-child(3) .work-item,
	.footer-nav .col:last-child .work-item,
	.footer-nav .col:nth-child(2) .work-item {
		padding: 0;
	}
	.footer-nav .col:nth-child(3) .work-item {
		margin-bottom: 3.5rem;
	}
	.footer-nav .work-item .row {
		margin-top: 2rem;
	}
	.footer-nav .work-item {
		margin-bottom: 5rem;
	}
	.footer-wrapper-about {
		padding-top: 1.5rem;
	}
}

@media (max-width: 540px) {
	html {
		font-size: 6px;	
	}
}