/* -----------------------------------------
 FONTS & GLOBAL ELEMENTS
----------------------------------------- */
@font-face {
	font-family: 'California Coast';
	src: url('/assets/fonts/CaliforniaCoast-Regular.woff2') format('woff2'),
	 	url('/assets/fonts/CaliforniaCoast-Regular.ttf') format('truetype');
	font-weight: normal; font-style: normal }
@font-face {
	font-family: 'Essential Sans';
	src: url('/assets/fonts/EssentialSans-Regular.woff2') format('woff2'),
	 	url('/assets/fonts/EssentialSans-Regular.ttf') format('truetype');
	font-weight: normal; font-style: normal }
@font-face {
	font-family: 'Essential Sans Medium';
	src: url('/assets/fonts/EssentialSans-Medium.woff2') format('woff2'),
		 url('/assets/fonts/EssentialSans-Medium.ttf') format('truetype');
	font-weight: normal; font-style: normal }
@font-face {
	font-family: 'Essential Sans Semi';
	src: url('/assets/fonts/EssentialSans-SemiBold.woff2') format('woff2'),
		url('/assets/fonts/EssentialSans-SemiBold.ttf') format('truetype');
	font-weight: normal; font-style: normal }
@font-face {
	font-family: 'Essential Sans Bold';
	src: url('/assets/fonts/EssentialSans-Bold.woff2') format('woff2'),
		url('/assets/fonts/EssentialSans-Bold.ttf') format('truetype');
	font-weight: normal; font-style: normal }

:root {
  --headerfont: "California Coast", serif;
  --bodyfont: "Essential Sans", sans-serif;
  --bodyfontMedium: "Essential Sans Medium", sans-serif;
  --bodyfontSemi: "Essential Sans Semi", sans-serif;
  --bodyfontBold: "Essential Sans Bold", sans-serif;
  --navWidth: 180px;
  --bodyTextColor: #14283a;
  --highlightColor: #f64f59;
}	

/* -----------------------------
	TYPOGRAPHY
-------------------------------- */
h1, h2, h3 { font-family: var(--headerfont); line-height: 1.2; margin-bottom: 20px; font-weight: 300; color: var(--bodyTextColor) }
body.home h1 { font-size: 2.6rem; line-height: 1; margin-bottom: 40px; font-weight: 500; color: var(--highlightColor);}
h1 { line-height: 1; margin-bottom: 40px; font-weight: 500 }
h2 { font-size: 2.8rem; color: var(--highlightColor) }
body.work h2 { font-size: 1.2rem; text-transform: uppercase; font-family: var(--bodyfontBold); letter-spacing: .06rem }
h3 { line-height: 1.05; font-size: 1.8rem }

p { font-size: 1.2rem; color: var(--bodyTextColor); font-family: var(--bodyfont); letter-spacing: .03rem; line-height: 1.7rem }
p strong { font-family: 'Essential Sans Bold' }
li { font-family: var(--bodyfont) }
.intro p { font-size: 1.6rem; line-height: 1.3em; color: var(--bodyTextColor) }
body:not(.home):not(.work) .intro p { margin-top: 4px }
a, a:focus { cursor: pointer; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); color: var(--highlightColor); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-style: solid }
a:hover { text-decoration-thickness: 1px; color: var(--highlightColor); text-decoration-style: wavy; text-underline-offset: 5px }
.more, h3.more { color: var(--bodyTextColor); font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-block; position: relative; padding: 8px 0 8px 2px; border-bottom: 1px solid #c3c8d6; transition: all .4s; margin-top: 12px }
.more:after { content:"\f178"; font: 1rem/1 "Font Awesome\ 6 Pro"; display: inline-block; font-weight: 500; position: relative; transition: all .4s; transition-delay: .15s; opacity: 0; margin-left: -8px; margin-top: 1px; color: var(--highlightColor) }
.more:hover, a:hover h3.more, a:hover p.more { text-decoration: none; color: inherit; border-color: var(--highlightColor) }
.more:hover:after, a:hover h3.more:after, a:hover p.more:after { opacity: 1; margin-left: 10px }

h3.more { font-size: 1.4rem }

p::selection, h1::selection, h2::selection, h3::selection, a::selection { color: white; background: var(--bodyTextColor) }
blockquote::selection, cite::selection { background: #fff; color:#f64f59 }

@media only screen and (min-width: 40.063em) {
	body.home h1 { font-size: 4.1rem }
	h3 { font-size: 2.2rem }
}


/* -----------------------------
   LAYOUT
-------------------------------- */
body { -webkit-overflow-scrolling: touch; background: #FFF }
.row { max-width: 90rem }
.panel { padding-top: 30px; margin-bottom: 30px }
.panel.intro { padding-top: 0px; margin-bottom: 0 }
.column.spacer { width: var(--navWidth) }
.column.main { padding-top: 0 }
body.home .panel.intro { margin: 40px 0 40px }
.row.content { padding:0 40px  }
body:not(.home):not(.detail) .section-wrapper.top { background: #F7F8FB }
.section-wrapper { padding: 0 30px }
.section-wrapper.page-content { margin-bottom: 60px }
.page-title { padding: 40px 0px }
.color-header { background: #F7F8FB; margin-bottom: 60px }
.color-header h1 { color: var(--highlightColor); margin-bottom: 20px; font-size: 3.5rem }
@media only screen and (min-width: 40.063em) {
	.color-header h1 { margin-bottom: 0 }
	body.home .panel.intro { margin: 40px 0 120px }
	.page-title { padding: 120px 50px }
	.color-header h1 { font-size: 4.5rem }
	.color-header h1 { margin-right: 40px }
	.section-wrapper { padding: 0 50px }
	.about-text { padding-left: 20px !important }
}


/* -----------------------------
	LOGO
-------------------------------- */
.logo-main { display: block; z-index: 998; position: relative; margin: 20px 0 0 }
.logo-main svg { width: 100px }
.logo-main svg:hover { fill: var(--highlightColor) }

/* AFTER SCROLLING */
body.logo-mini #fMenu.mini { opacity: 1 }
.logo-main.mini { width: calc(var(--navWidth) - 120px); position: fixed; top: 0; z-index: 997; left: 10px }
.logo-main.mini svg { opacity: 0; transition: opacity .5s; width: calc(var(--navWidth) - 120px) }
body.logo-mini .logo-main.mini svg { opacity: 1 }

@media only screen and (min-width: 40.063em) {
	.logo-main svg { width: calc(var(--navWidth) - 60px) }
	.logo-main { margin: 40px 0 35px }
	.logo-main.mini { top: 0; left: 40px }
}


/* -----------------------------
	CONTENT BLOCKS
-------------------------------- */
/* BLOCKQUOTE */
blockquote { margin: 20px auto; border-left: 0; color: #FFF; font-family: var(--headerfont); font-size: 2.7rem; line-height: 1; max-width: 700px; padding-top: 0; padding-bottom: 20px }
cite { margin-top: 30px; color: #FFF; font-family: var(--bodyfont); font-style: normal; letter-spacing: .02rem; font-size: .9rem; font-weight: 600 }

/* LOGO FIELD */
.column.logo { padding: 20px 0 !important }
img.gray { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .65; mix-blend-mode: multiply; max-height: 90px; max-width: 200px }

/* SPLIT BANNER */
.split-banner .text { padding: 30px }
.split-banner a { text-decoration: none !important }
.split-banner a:hover h3 { color: var(--highlightColor) }
.split-banner a p.more { font-family: 'Essential Sans Semi'; padding-bottom: 2px }
.split-banner > .column div.img-wrapper { overflow: hidden; display: block; background: #1E1F2B }
.split-banner img { transform: scale(1); transition-duration: .25s; transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); will-change: transform }
.split-banner > .column:hover img { transform: scale(1.04); opacity: .7 }

/* BIG MESSAGE */
.big-message { padding: 0 0 30px }
.big-message p { font-size: 1.4rem; line-height: 1.4; color: var(--bodyTextColor) }
.big-message .panel { padding-left: 20px }

@media only screen and (min-width: 40.063em) {
	blockquote { margin: 140px auto }
	.big-message { padding: 100px 0 }
	.big-message .panel { padding-left: 0 }
	.big-message p { font-size: 2.2rem; line-height: 1.3 }
	.split-banner .text { padding: 50px }
	.big-message p { font-size: 2.8rem }
}

/* -----------------------------
	WORK
-------------------------------- */
.back { margin-bottom: 20px }
.back a { position: relative; left: -10px; font-size: .9rem; color: var(--bodyTextColor) }
.back a:hover { color: var(--highlightColor) }
.back a i { position: relative; left: 2px; top: 1px; opacity: 0; transition: all .1s }
.back a:hover i { left: -8px; opacity: 1 }

.deliverables ul { list-style: none; margin-left: 0 }
.deliverables ul li { border-bottom: 1px solid var(--highlightColor); padding: 8px 5px }
.panel.project-images .column.image { margin-bottom: 25px }
.panel.project-images .column.image:not(.video) div { margin: 0 auto; height: 100% }
.panel.project-images .column.image.logo div { padding: 25px }
.panel.project-images .column.image.website div { /*padding: 36px 0 0*/padding: 0; background: #c0c5c8; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 3.6px 3.6px 11.7px -36px rgba(0, 0, 0, 0.2), 29px 29px 44px -36px rgba(0, 0, 0, 0.5) }
span.dots { position: absolute; top: 12px; left: 12px }
span.dot { width: 12px; height: 12px; background: white; float: left; margin-left: 8px; display: block; border-radius: 50% }

@media only screen and (min-width: 40.063em) {
	.deliverables ul { margin-top: 85px; margin-left: 60px }
	.deliverables p { margin-left: 65px; font-weight: 600 }
	.deliverables a { text-decoration: none }
	.panel.project-images .column.image { padding: 20px 0; border-right: 15px solid #FFF; margin-bottom: 15px }
	.panel.project-images .column.image.website { padding: 20px; border-right: 0 }
	.panel.project-images.negative .column.image { border-right: 0 }
}


/* -----------------------------
   FOOTER
-------------------------------- */
#footer { background: #FFF; bottom: 0; right: 0; left: 0; padding-top: 15px }
p.tagline { text-align: center; line-height: 1.2; font-size: .9rem; width: var(--navWidth); display: block }
p.tagline i { color: var(--highlightColor) }


/* VIDEO */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100% } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% }


/* DESKTOP ONLY */
@media only screen and (min-device-width: 1025px) { 

}

/* 641px */
@media only screen and (min-width: 40.063em) {
	#footer { position: fixed }
}

/* 1025px */
@media only screen and (min-width: 64.063em) {
	
}