/* -------------------- UNIVERSAL TEXT STYLING -------------------- */



/* -------- Main styles | Small screen -------- */

body {
	color: #333;
	font-family: adelle-sans, sans-serif;
	font-style: normal;
	font-weight: 400;
	/* 18px/27px */
	font-size: 1.125em;
	line-height: 1.5;
}

p {
	padding-bottom: 18px;
}


/* -------- Heading styles -------- */

.headingLevel1, .headingLevel2, .headingLevel3 {
	font-family: grad, serif;
	padding-bottom: 18px;
	font-weight: 700;
}

.headingLevel1, .headingLevel2, .headingLevel3, .headingLevel4, .headingLevel5 {
	line-height: 1.1;
}

.headingLevel1, .headingLevel2 {
	/* 36px */
	font-size: 2em;
}

.headingLevel3 {
	/* 27px */
	font-size: 1.5em;
	text-align: center;
}

.headingLevel4 {
	/* 21px */
	font-size: 1.167em;
	font-weight: 700;
	padding-bottom: 9px;
}

.headingLevel5 {
	/* 18px */
	font-weight: 700;
	padding-top: 9px;
	padding-bottom: 9px;
}


/* -------- Body text styles -------- */

.xxxlBodyText, .xxlBodyText {
	font-family: grad, serif;
	/* 21px */
	font-size: 1.167em;
}

.xlBodyText {
	/* 21px */
	font-size: 1.167em;
}

.largeBodyText, .mediumBodyText {
	/* 18px */
	font-size: 1em;
}

.smallBodyText, figcaption {
	/* 16px */
	font-size: .889em;
}

figcaption {
	font-style: italic;
	padding-top: 6px;
}


/* -------- Other text styles -------- */

.bold {
	font-weight: 700;
}

.italic {
	font-style: italic;
}

.boldSmall {
	font-weight: 700;
	font-size: .89em;
}

.whiteText {
	color: #fff;
}

.lineBreak {
	display: block;
}

.bulletedText {
	list-style: disc;
}

.numberedText {
	list-style: decimal;
}

.bulletedText, .numberedText {
	margin-left: 18px;
}

.bulletedText li, .numberedText li {
	padding-bottom: 12px;
}

.bulletedText li:last-child, .numberedText li:last-child {
	padding-bottom: 18px;
}

.bulletedText-nested {
	list-style: disc;
	margin-left: 24px;
}

.bulletedText .bulletedText-nested li, .numberedText .bulletedText-nested li {
	padding-bottom: 6px;
}

.bulletedText-nested li:last-child {
	padding-bottom: 0;
}

.bulletedText li, .bulletedText-nested li, .numberedText li {
	padding-left: 6px;
}



/* -------- Custom styles | Small screen -------- */

.categoryName {
	text-transform: uppercase;
	font-weight: 700;
	padding-bottom: 10px;
	text-align: center;
}

/* Client name hidden on default */
.nextBtn p, .previousBtn p {
	color: #fff;
	font-weight: 700;
	padding-bottom: 0;
	visibility: hidden;
	display: none;
}



/* -------- Links styling -------- */

p a, li a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid #ccc;
	transition: 0.3s ease;
}

p a:hover, .siteNav a:hover, li a:hover {
	border-bottom: 2px solid #888;
}

.siteNav a {
	color: #fff;
	text-decoration: none;
	border-bottom: none;
}

.teal .siteNav a:hover, .pink .siteNav a:hover, .yellow .siteNav a:hover {
	border-bottom: 2px solid #fff;
}

figure a, figure a:hover {
	border-bottom: none;
}

.socialIcons a {
	opacity: .85;
	transition: 0.3s ease;
	border-bottom: none;
}

.socialIcons a:hover {
	opacity: 1.0;
	border-bottom: none;
}

a.buttonWhite {
	border: 2px solid #fff;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	transition: 0.5s ease;
}

a.buttonWhite:hover {
	background-color: #fff;
	color: #2DA2B4;
}

.buttonPrimary a, .buttonSecondary a {
	background-color: #2DA2B4;
	padding: 12px 20px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	border-bottom: none;
	transition: 0.5s ease;
}

.buttonSecondary a {
	background-color: #B85269;
}

.buttonPrimary a:hover {
	background-color: #278D9C;
	border-bottom: none;
}

.buttonSecondary a:hover {
	background-color: #C13658;
	border-bottom: none;
}

.buttonPrimary img, .buttonSecondary img {
	padding-left: 10px;
}

.buttonBottomOfSection {
	padding-top: 30px;
	margin-bottom: 12px;
}





/* -------------------- OVERALL LAYOUT -------------------- */

section, .workPreviewSection, .quoteSection {
	padding: 60px 20px;
}

.mixedTextSection .quoteSection {
	margin: 60px -20px;
}

section p:last-child, section .bulletedText:last-child li:last-child, section .numberedText:last-child li:last-child {
	padding-bottom: 0;
}

.contentContainer {
	max-width: 1170px;
	margin: 0 auto;
}

#homePage .contentContainer, .separateHeader {
	max-width: 1440px;
	margin: 0 auto;
}

#errorPage .contentContainer {
	max-width: 800px;
}

#aboutMeSection, #talkingSection, #lagniappeSection {
	padding-bottom: 0;
}

.add18pxAbove {
	margin-top: 18px;
}

.add36pxAbove {
	margin-top: 36px;
}



/*-------- Dark borders --------*/
#homePage header, #portfolio header, #errorPage header, footer, .workPreviewSection, .siteGoalSection, .quoteSection, .bottomColorBar {
	border-top: 4px solid #333;
	border-bottom: 4px solid #333;
}

.nextPreviousSection, #contactSection {
	border-top: 4px solid #333;
}

.bottomDarkBorder {
	border-bottom: 4px solid #333;
}



/* -------- Drop shadows -------- */

/*-- on color background --*/
.dropShadowDark img {
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/*-- on white or #eee background --*/
.dropShadowLight img {
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}



/* -------- Background colors -------- */

.greyBg {
	background-color: #eee;
}

.tealBg {
	background-color: #2DA2B4;
}

.lightYellowBg {
	background-color: #f7ece1;
}

.lightTealBg {
	background-color: #d9ebef;
}

.lightPinkBg {
	background-color: #F1E5E9;
}

.darkGreyBg, .siteGoalSection, .nextPreviousSection {
	background-color: #575757;
}



/* -------- Color coding -------- */

.pink .quoteSection p, .teal .quoteSection p {
	color: #fff;
}

/* Pink */
.pink .categoryName {
	color: #C13658;
}

.pink .workPreviewSection, .pink .quoteSection, .pink caption {
	background-color: #b85269;
}

.pink .smallQuote, .pink .smallQuote-fullWidth {
	border-left-color: #b85269;
}

.pink .heroSection .gradientOverlay {
	box-shadow: inset 0 -10px 0 0 rgba(193,54,88,0.9);
}


/* Teal */
.teal .categoryName {
	color: #2DA2B4;
}

.teal .workPreviewSection, .teal .quoteSection, .teal caption {
	background-color: #2DA2B4;
}

.teal .smallQuote, .teal .smallQuote-fullWidth {
	border-left-color: #2DA2B4;
}

.teal .heroSection .gradientOverlay {	
	box-shadow: inset 0 -10px 0 0 rgba(46,165,182,0.9);
}


/* Yellow */
.yellow .categoryName{
	color: #D5802A;
}

.yellow .workPreviewSection {
	background-color: #DF9E5F;
}

.yellow .quoteSection, .yellow caption {
	background-color: #EABF95;
}

.yellow .smallQuote, .yellow .smallQuote-fullWidth {
	border-left-color: #DF9E5F;
}

.yellow .heroSection .gradientOverlay {
	box-shadow: inset 0 -10px 0 0 rgba(220,148,78,0.9);
}



/* -------- Tables -------- */
table, th, td, caption {
	border: solid 1px #575757;
	padding: 18px;
	text-align: left;
}

th {
	font-weight: 700;
	background-color: #ccc;
}

td {
	background-color: #fff;
}

caption {
	font-weight: 700;
	border-bottom: none;
	color: #fff;
}

.yellow caption {
	color: #333;
}

table .bulletedText li, table .numberedText li {
	padding-bottom: 4px;
}





/* -------------------- SECTION STYLING -------------------- */



/* -------- Header & footer -------- */

header, footer {
	display: flex;
	flex-direction: column;
	align-items: center;
}

header {
	padding: 12px 0;
}

.teal header, .pink header, .yellow header {
	padding-top: 16px;
	padding-bottom: 16px;
}

.JO-logo {
	height:56px;
}

header img {
	margin-bottom: -6px;
}

header li {
	display: inline-block;
	padding: 12px 40px 0 40px;
}

.siteNav {
	border-top: 2px solid #333;
	margin-top: 12px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.teal .siteNav, .pink .siteNav, .yellow .siteNav {
	border-top: 2px solid #fff;
}

footer {
	background-color: #b85269;
	padding: 40px 20px;
}

footer li {
	width: 24px;
	display: inline-block;
	padding: 30px 20px 0 20px;
}

footer p {
	color: #eee;
	padding-bottom: 0px;
}



/* -------- Homepage -------- */

/* ---- Hello section ---- */

#helloSection .contentContainer {
	display: flex;
	flex-direction: column-reverse;
	margin-top: -20px;
	margin-bottom: -20px;
}

#helloSection .flexIllustration {
	width: 96%;
	align-self: center;
	margin-bottom: 20px;
}

#helloSection img {
	width: 100%;	
}

#helloSection .flexText {
	margin-top: 0;
}


/* ---- Sections with illustrations/photo ---- */

#aboutMeSection .contentContainer, #talkingSection .contentContainer, #lagniappeSection .contentContainer, #contactSection .contentContainer {
	display: flex;
	flex-direction: column;
}

/* Text paired with illustrations */
.flexText {
	width: 100%;
	z-index: 1;
}

/* Illustrations */
.flexIllustration {
	width: 100%;
	/* Needs negative margin to be flush with bottom */
	margin-bottom: -7px;
	align-self: flex-end;
	max-width: 450px;
}

.leftColumn {
	padding-bottom: 18px;
}

#aboutMeSection .flexIllustration, #talkingSection .flexIllustration, #lagniappeSection .flexIllustration {
	margin-top: 18px;
}


/* ---- How I work section ---- */

.skillsList {
	display: flex;
	flex-direction: column;
}

.skillsList li {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-top: 36px;
}

.skillIcon {
	min-width: 80px;
	padding-right: 27px;
}

#howIWorkSection .headingLevel4 {
	padding-top: 0;
}


/* ---- Folks I've worked with section ---- */

#whoWorkWithList {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#whoWorkWithSection li {
	border: solid 3px #333;
	padding: 18px;
	background-color: #fff;
	display: flex;
	width: 100%;
	margin-bottom: 18px;
	flex-direction: column;
}

#whoWorkWithSection li:last-child {
	margin-bottom: 0;
}

#whoWorkWithSection .headingLevel4 {
	padding-top: 0;
	padding-bottom: 18px;
}

#whoWorkWithSection .headingLevel4::after {
	content: '';
	display: block;
	height: 6px;
	width: 60px;
	background-color: #B85269;
	margin-top: 18px;
	border-radius: 4px;
}

#whoWorkWithSection p {
	padding-bottom: 2px;
}

#whoWorkWithButton {
	padding-top: 40px;
	margin-bottom: 12px;
}


/* ---- Contact section ---- */
#contactSection p {
	padding-bottom: 40px;
}


/* ---- Color bars ---- */
.bottomColorBar {
	height: 40px;
	padding: 0;
}



/* -------- Portfolio landing page -------- */

/* ---- Intro text ---- */

#portfolio .introSection .contentContainer {
	max-width: 550px;
}

#portfolio .headingLevel1, #portfolio p {
	text-align: center;
}


/* ---- Grid ---- */
.portfolio-grid {
	padding: 0;
}

.portfolio-grid, .portfolio-grid-inner, #gridBox4-5 {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#gridBox4, #gridBox5 {
	width: 100%;
}

#gridBox1, #gridBox2, #gridBox3, #gridBox4, #gridBox5 {
	height: 300px;
	border-top: 4px solid #333;	
	overflow: hidden;
}


/* ---- Background images ---- */
#gridBox1 {
	background: url("../images/DF/DF1-heroPhoto.jpg") no-repeat right/cover;
}

#gridBox2 {
	background: url("../images/DF/DF2-heroPhoto.jpg") no-repeat center/cover;
}

#gridBox3 {
	background: url("../images/NCARB/NCARB-heroPhoto.jpg") no-repeat center/cover;
}

#gridBox4 {
	background: url("../images/PFF/PFF-heroPhoto.jpg") no-repeat center/cover;
}

#gridBox5 {
	background: url("../images/TT/TT-heroPhoto.jpg") no-repeat center/cover;
}


/* ---- Hover ---- */

.hoverEffect {
	width: 110%;
	height: 100%;
	color: #fff;
	background-color: rgba(0,0,0,0);
	display: flex;
	transition: 0.3s ease;
	margin-left: -20px;
	background-image:linear-gradient(to top, rgba(0,0,0, 0.3), rgba(0,0,0, 0) 40%);
}

.hoverEffect h2 {
	font-weight: 400;
	align-self: flex-end;
	margin: 0 20px 20px 40px;
	padding-right: 40px;
	text-align: left;
	padding-bottom: 0;
}

.portfolio-grid a {
	text-decoration: none;
}

.hoverEffect:hover {
	transform: translateX(8px);
}

/* -- Pink -- */
#gridBox2 .hoverEffect, #gridBox5 .hoverEffect {
	background-color: rgba(193,54,88,0);
}

#gridBox2 .hoverEffect:hover, #gridBox5 .hoverEffect:hover {
	background-color: rgba(193,54,88, 0.65);
}

/* -- Yellow -- */
#gridBox3 .hoverEffect {
	background-color: rgba(220,148,78,0);
}

#gridBox3 .hoverEffect:hover {
	background-color: rgba(220,148,78,0.8);
}

/* -- Teal -- */
#gridBox1 .hoverEffect, #gridBox4 .hoverEffect {
	background-color: rgba(46,165,182,0);
}

#gridBox1 .hoverEffect:hover, #gridBox4 .hoverEffect:hover {
	background-color: rgba(46,165,182,0.7);
}



/* -------- Case studies -------- */


/* ---- Hero section ---- */

.heroSection {
	padding: 0;
	height: 350px;
}

.heroSection .categoryName, .heroSection .headingLevel2 {
	color: #fff;
	text-align: center;
}

.gradientOverlay {
	display: flex;
	flex-direction:	column;
	justify-content: space-between;
	height: 100%;
	background-image:linear-gradient(to top, rgba(0,0,0, 0.3), rgba(0,0,0, 0) 40%);
}

.topGradientOverlay {
	background-image:linear-gradient(to bottom, rgba(0,0,0, 0.4), rgba(0,0,0, 0) 100%);
}

.heroSection .contentContainer {
	padding: 0 20px 18px 20px;
}


/* ---- Intro section ---- */

.introSection .contentContainer {
	max-width: 820px;
}


/* ---- Work preview section ---- */

.workPreviewSection .contentContainer {
	max-width: 820px;
}
	
.workPreviewSection .contentContainer img {
	width: 100%;
}


/* ---- 2 column sections ---- */

.leftTextSection .contentContainer, .rightTextSection .contentContainer, .mixedTextSection .contentContainer {
	display: flex;
	flex-direction: column;
}

.leftText, .rightText {
	max-width: 820px;
	width: 100%;
	align-self: center;
}

.leftImage, .rightImage {
	max-width: 560px;
	width: 100%;
	align-self: center;
	margin-top: 30px;
}

.leftImage img, .rightImage img {
	width: 100%;
}

/* ---- Mixed sections with subsections ---- */
.mixedTextSection .contentContainer.leftTextSubsection, .mixedTextSection .contentContainer.rightTextSubsection {
	margin-top: 54px;
}

.lineAbove {
	padding-top: 54px;
	border-top: solid 1px #ccc;
}




/* ---- Center text sections ---- */

.centerText {
	max-width: 820px;
	margin: 0 auto;
}

.centerText-notFirst {
	padding-top: 30px;
}

.centerTextSection img {
	width: 100%;
}

.centerTextSection .firstImageRow {
	margin-top: 30px
}


/* ---- Site Goal ---- */

.siteGoalSection {
	color: #fff;
}


/* ---- Quote Section ---- */

.teal .quoteSection .contentContainer, .pink .quoteSection .contentContainer {
	background: url("../images/universal/quoteMark.svg") center top/50px no-repeat;
	padding-top: 80px;
}

.yellow .quoteSection .contentContainer {
	background: url("../images/universal/quoteMark-dark.svg") center top/50px no-repeat;
	padding-top: 80px;
}


/* ---- Small quotes ---- */
.smallQuote, .smallQuote-fullWidth {
	padding-left: 27px;
	margin: 9px 0 27px 0;
	border-left: solid 6px;
}

/* ---- Small quotes grid ---- */
.smallQuotesGrid {
	margin-bottom: 54px;
}

.smallQuotesGrid-2across {
	display: flex;
	flex-direction: column;
}

.smallQuotesGrid-2across, .smallQuotesGrid-1across {
	border-top: solid 1px #ccc;
	padding: 18px 0;
}

.smallQuotesGrid-2across p:last-child {
	border-top: solid 1px #ccc;
	padding-top: 18px;
}

.smallQuotesGrid div:last-child {
	border-bottom: solid 1px #ccc;
}

/* ---- Stats ---- */
.statsList {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin: 9px 0 54px 0;
}

.statsList li {
	border-top: solid 1px #ccc;
	padding: 18px 0;
}

.statsList li:last-child {
	border-bottom: solid 1px #ccc;
}

.largeStatNumber {
	font-size: 3em;
	font-weight: 700;
	line-height: 1em;
	padding-bottom: 9px;
}


/* ---- Next Previous Section ---- */

.nextPreviousSection {
	display: flex;
	justify-content: space-between;
}

.leftArrow, .rightArrow {
	border-top: solid 4px #ccc;
	border-left: solid 4px #ccc;
	width: 20px;
	height: 20px;
}

.leftArrow {
	transform: rotate(-45deg);
	margin-left: 15px;
}

.rightArrow {
	transform: rotate(135deg);
	margin-right: 15px;
}

.nextBtn, .previousBtn {
	display: flex;
}

.nextBtn h2, .previousBtn h2 {
	font-weight: 700;
	color: #ccc;
	text-transform: uppercase;
	padding-bottom: 6px;
}

.previousBtn h2 {
	text-align: left;
}

.nextBtn p, .nextBtn h2 {
	text-align: right;
}


/* -- Animation on Hover -- */
.previousBtn, .nextBtn {
	text-decoration: none;
	transition: 0.3s ease;
}

.previousBtn:hover {
	transform: translateX(-8px);
}

.nextBtn:hover {
	transform: translateX(8px);
}



/* -------- Error Page -------- */

/* ---- Sticky Footer -- Thanks to Chris Coyier and Philip Walton for the solution ---- */
#errorPage {
	display: flex;
	flex-direction: column;
	/* To avoid an IE 10-11 'min-height' bug */
	min-height: 100vh;
}

#errorPage header, #errorPage footer {
	flex-shrink: 0; 
}

#errorSection {
	/* flex-grow 1, flex-shrink 0, flex-basis auto */
	flex: 1 0 auto;
}


/* ---- Main Content ---- */
#errorPage .contentContainer {
	display: flex;
	flex-direction: column;
}

#errorIllustration {
	width: 100%;
	max-width: 200px;
	align-self: center;
	margin-top: 20px;
}





/* -------------------- ANIMATION -------------------- */

/* ---- Bobbleheard Animation ---- */
#terminatorSkull:hover, #terminatorSkull2:hover {
	animation: bobble 1.0s ease;
}

@keyframes bobble {
	0% {transform: translateY(0%);}
	25% {transform: translateY(3%);}
	38% {transform: translateY(3%);}
	45% {transform: translateY(-1%);}
	65% {transform: translateY(2%);}
	75% {transform: translateY(0%);}
	90% {transform: translateY(1%);}	
	100% {transform: translateY(0%);}
}





/* -------------------- CUSTOM LAYOUT CLASSES -------------------- */

/* -------- Images flush w/bottom of their container -------- */
.imgFlushBottom, .workPreviewSection.imgFlushBottom {
	padding-bottom: 0;
}

.imgFlushBottom .rightImage, .imgFlushBottom .leftImage, .imgFlushBottom ul, .workPreviewSection.imgFlushBottom img {
	margin-bottom: -6px;
}

.workPreviewSection.imgFlushBottom .multipleComps img {
	margin-bottom: 0px;
}



/* -------- Phone images that are <560px wide -------- */
.skinnyImage .rightImage {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	width: auto;
}

.skinnyImage img {
	max-width: 430px;
	height: auto;
	align-self: center;
}



/* -------- Photos that can stretch wider on small screen -------- */

.widePhoto {
	height: 300px;
}

.rightTextSection .widePhoto, .leftTextSection .widePhoto {
	max-width: 820px;
}



/* -------- Multiple Comps Together -------- */

.multipleComps {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.multipleComps li:first-child {
	margin-right: 30px;
}

/* ---- For UL with 3 or 4 comps across (too many for small screen) ---- */
.multipleComps li:nth-child(3), .multipleComps li:nth-child(4) {
	visibility: hidden;
	display: none;
}



/* -------- Max-width of 820px -------- */
.maxWidth-820 {
	max-width: 820px;
	margin: 0 auto;
}

/*-------- Max-width of 1170px --------*/
.workPreviewSection .maxWidth-1170, .centerTextSection .maxWidth-1170 {
	max-width: 1170px;
	margin: 0 auto;
}

/*-------- Max-width of 1440px --------*/
.workPreviewSection .maxWidth-1440 {
	max-width: 1440px;
	margin: 0 auto;
}



/* -------- Images 2-across, inside 820px space -------- */
.media-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.media-grid img {
	max-width: 400px;
}

.media-grid li:first-child {
	margin-bottom: 36px;
}



/* -------------------- PROJECT-SPECIFIC IMAGES, CASE STUDIES -------------------- */

/* -------- Hero Images -------- */
.DF1-heroSection {
	background: url("../images/DF/DF1-heroPhoto.jpg") no-repeat right/cover;
}

.DF2-heroSection {
	background: url("../images/DF/DF2-heroPhoto.jpg") no-repeat center/cover;
}

.NCARB-heroSection {
	background: url("../images/NCARB/NCARB-heroPhoto.jpg") no-repeat center/cover;
}

.PFF-heroSection {
	background: url("../images/PFF/PFF-heroPhoto.jpg") no-repeat center/cover;
}

.TT-heroSection {
	background: url("../images/TT/TT-heroPhoto.jpg") no-repeat center/cover;
}



/* -------- PFF Wide Photo -------- */
.PFF-widePhoto {
	background: url("../images/PFF/PFF-targetAudience.jpg") no-repeat center/cover;
}



/* -------- TT Specs -------- */
.TT-specsPhotos {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 1440px;
	margin: 0 auto;
}

.TT-grid-inner {
	display: flex;
	flex-direction: column;
}

.TT-specsPhotos ul:first-child, .TT-specsPhotos ul li:first-child {
	margin-bottom: 20px;
}



/* -------- DF year 2, next steps -------- */
.workPreviewSection .multipleComps li:first-child {
	margin-right: 0;
}

.workPreviewSection .multipleComps li:nth-child(2) {
	visibility: hidden;
	display: none;
}



/* -------- DF year 2, table -------- */
#DF-table-FS25-small, #DF-table-FS25-large {
	width: 100%;
}

#DF-table-FS25-large th {
	width: 50%;
}

#DF-table-FS25-large {
	display: none;
}



/* -------- DF year 2, next steps -------- */
#nextVersionSticker {
	width: 130px;
	float: right;
	margin-left: 18px;
}





/* -------------------- FOR LARGER SCREENS -------------------- */



/* -------- > 360px | Header & footer go to rows -------- */

@media screen and (min-width: 360px) {

	/* Logo goes to left, site nav to right */
	header {
		flex-direction: row;
		justify-content: space-between;
		padding: 20px;
	}

	/* Adding extra 4 px, since header has no border */
	.teal header, .pink header, .yellow header {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* Removing the border above site nav on very small screen */
	.siteNav, .teal .siteNav, .pink .siteNav, .yellow .siteNav {
		border: none;
		margin-top: 0;
		width: auto;
	}

	header li {
		padding: 0 0 0 20px;
	}

	footer {
		flex-direction: row;
		justify-content: space-between;
	}

	footer li {
		padding: 0 0 0 20px;
	}

	#helloSection .flexIllustration {
		width: 330px;
	}

}



/* -------- > 550px | Small adjustments -------- */

@media screen and (min-width: 550px) {
	
	/* ---- Header ---- */
	.JO-logo {
		height:70px;
	}

	header li {
		padding: 0 0 0 40px;
	}


	/* ---- Text Styles ---- */
	.lineBreak550 {
		display: block;
	}


	/* ---- Case Studies: Project-Specific Images ---- */

	/* -- TT Specs -- */
	.TT-grid-inner {
		flex-direction: row;
	}

	.TT-specsPhotos ul li:first-child {
		margin-bottom: 0px;
	}

	.TT-grid-inner li:first-child {
		margin-right: 20px;
	}


	/* -- DF year 2, work preview -- */
	.workPreviewSection .multipleComps li:nth-child(2) {
		visibility: visible;
		display: block;
		margin-left: 30px;
	}

	/* -- DF year 2, next steps -- */
	#nextVersionSticker {
		width: 210px;
		margin-left: 27px;
	}

}




/* -------- >768px | More small adjustments, including some sections going to 2 columns -------- */

@media screen and (min-width: 768px) {
	
	/* ---- Heading styles ---- */

	.headingLevel1, .headingLevel2 {
		/* 54px */
		font-size: 3em;
	}

	.headingLevel2 {
		padding-bottom: 27px;
	}

	.headingLevel3 {
		/* 36px */
		font-size: 2em;
	}

	
	/* ---- Body text styles ---- */
	.xxxlBodyText, .xxlBodyText {
		/* 27px */
		font-size: 1.5em;
	}



	/* ---- Homepage ---- */

	#aboutMeSection .flexIllustration, #talkingSection .flexIllustration, #lagniappeSection .flexIllustration {
		margin-top: 0;
	}

	/* -- Hello section -- */

	#helloSection .contentContainer, #contactSection .contentContainer {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	#helloSection .flexText {
		width: 50%;
		padding-right: 25px;
	}

	#helloSection .flexIllustration {
		width: 45%;
		max-width: 500px;
		margin-right: 20px;
		margin-bottom: 0;
		padding-left: 25px;
	}

	/* -- Left Illustration, Right Text -- */
	
	#aboutMeSection .contentContainer, #lagniappeSection .contentContainer {
		flex-direction: row-reverse;
	}

	#aboutMeSection .flexText, #lagniappeSection .flexText {
		padding-left: 25px;
		margin-bottom: 60px;
	}

	#aboutMeSection .flexIllustration, #lagniappeSection .flexIllustration {
		padding-right: 25px;
		max-width: 600px;
	}

	/* -- Right Illustration, Left Text -- */
	
	#talkingSection .contentContainer {
		flex-direction: row;
	}

	#talkingSection .flexText {
		padding-right: 25px;
		margin-bottom: 60px;
	}

	#talkingSection .flexIllustration {
		padding-left: 25px;
		max-width: 600px;
	}

	/* -- How I work section -- */
	.skillsList {
		flex-direction: row;
	}

	.skillsList ul:first-child {
		padding-right: 54px;
	}

	#howIWorkIntro {
		text-align: center;
		width: 700px;
		margin: 0 auto;
	}

	#whoWorkWithSection .headingLevel2 {
		text-align: center;
	}

	#whoWorkWithButton {
		text-align: center;
	}

	/* -- Folks I've worked with section -- */

	#whoWorkWithSection li, #skillsList li {
		width: 43%;
	}

	/* -- Contact -- */
	
	#contactSection .contentContainer {
		max-width: 1170px;
	}

	.contactHeader {
		width: 40%;
	}

	.contactText {
		width: 55%;
		padding-bottom: 0;
	}

	#contactSection h2 {
		padding-bottom: 0;
	}


	/* ---- Error page ---- */
	#errorPage .contentContainer {
		flex-direction: row-reverse;
	}

	#errorPage .flexText {
		padding-left: 50px;
		margin-top: 100px;
	}


	/* ---- Case studies ---- */

	/* -- Hero Section -- */
	.heroSection {
		height: 600px;
	}

	.heroSection .contentContainer {
		padding: 0 36px 36px 36px;
	}

	/* -- Site goal--Into 2 columns -- */
	.siteGoalSection .contentContainer {
		display: flex;
		align-items: center;
	}

	.siteGoalSection .contentContainer h2 {
		padding-bottom: 0;
		min-width: 250px;
		text-align: left;
	}

	/* -- Quote--Into 2 columns -- */
	.yellow .quoteSection .contentContainer, .teal .quoteSection .contentContainer, .pink .quoteSection .contentContainer {
		padding-top: 0;
		background-position: 0 0;
		background-size: 65px;
	}

	.quoteSection .contentContainer p {
		margin-left: 120px;
	}

	/* -- Small quote -- */
	.smallQuote {
		float: right;
		width: 440px;
		margin: 0px 0px 18px 27px;
		/*background-color: red;*/
	}

	/* -- Small quote grid -- */
	.smallQuotesGrid-2across {
		flex-direction: row;
		justify-content: space-between;
	}

	.smallQuotesGrid-2across p {
		width: 50%;
	}

	.smallQuotesGrid-2across p:first-child {
		border-right: solid 1px #ccc;
		padding-right: 27px;
		padding-bottom: 0;
	}

	.smallQuotesGrid-2across p:last-child {
		padding-left: 27px;
		border-top: none;
		padding-top: 0;
	}

	/* ---- Stats ---- */
	.statsList {
		flex-direction: row;
		justify-content: space-between;
	}

	.statsList li {
		border-top: none;
		border-right: solid 1px #ccc;
		padding: 0 18px;
	}

	.statsList li:first-child {
		padding-left: 0;
	}

	.statsList li:last-child {
		border-bottom: none;
		border-right: none;
		padding-right: 0;
	}

	.threeStats li{
		width: 33%;
	}

	.twoStats li {
		width: 50%;
	}

	/* -- Work preview & center text sections | UL w/3–4 comps across—-add 3rd -- */
	.multipleComps li:nth-child(3) {
		visibility: visible;
		display: block;
		margin-left: 30px;
	}

	/* -- Images 2-across, inside 820px space -- */
	.media-grid {
		flex-direction: row;
		justify-content: space-between;
	}

	.media-grid li:first-child {
		margin-bottom: 0;
		margin-right: 27px;
	}

	/* -- DF year 2, table -- */
	#DF-table-FS25-small {
		display: none;
	}

	#DF-table-FS25-large {
		display: table;
	}

	/* -- Next/Previous Buttons—-Client name appears -- */
	.nextBtn p, .previousBtn p {
		visibility: visible;
		display: block;
	}

	.leftArrow, .rightArrow {
		width: 40px;
		height: 40px;
		margin-top: 6px;
	}
}



/* -------- > 1100px  |  Elements get bigger, more elements go to multiple columns -------- */

@media screen and (min-width: 1100px) {

	/* ---- Heading styles ---- */

	.headingLevel1 {
		/* 72px */
		font-size: 4em;
	}

	.headingLevel3 {
		/* 45px */
		font-size: 2.5em;
		padding-bottom: 27px;
	}


	/* ---- Universal layout | Extra padding ---- */

	section, .workPreviewSection, .quoteSection {
		padding: 100px 36px;
	}

	.mixedTextSection .quoteSection {
		margin: 100px -36px;
	}

	header, footer, #portfolio header, #errorPage header {
		padding-right: 36px;
		padding-left: 36px;
	}


	/* ---- Homepage ---- */
	
	/* -- Color bar height -- */
	.bottomColorBar {
		height: 80px;
	}

	#aboutMeSection .flexText, #talkingSection .flexText, #lagniappeSection .flexText {
		margin-bottom: 100px;
	}

	/* -- Folks I've worked with section -- */
	#whoWorkWithSection li {
		width: 26%;
		margin-bottom: 30px;
		padding: 27px;
	}

	#whoWorkWithSection li:last-child, #whoWorkWithSection li:nth-last-child(2), #whoWorkWithSection li:nth-last-child(3) {
		margin-bottom: 0;
	}

	#talkingSection .flexIllustration {
		/* To counteract the weird spacing from h2 being outside .flexText */
		margin-top: -100px;
	}


	/* ---- Error page ---- */
	#errorSection {
		padding-bottom: 100px;
	}

	#errorIllustration {
		max-width: 250px;
	}

	#errorPage .flexText {
		margin-top: 200px;
	}


	/* ---- Case studies ---- */

	.leftTextSection .headingLevel3, .leftTextSection .categoryName, .rightTextSection .headingLevel3, .rightTextSection .categoryName {
		text-align: left;
	}

	/* -- Flush bottom images -- */
	.imgFlushBottom .leftText, .imgFlushBottom .rightText {
		margin-bottom: 100px;
	}

	.imgFlushBottom .rightImage, .imgFlushBottom .leftImage, .imgFlushBottom ul {
		align-self: flex-end;
	}

	.skinnyImage img {
		align-self: flex-end;
	}

	/* -- Hero section -- */
	.heroSection {
		height: 800px;
	}

	/* -- Left text, Right image sections -- */
	.leftTextSection .contentContainer, .mixedTextSection .contentContainer.leftTextSubsection {
		flex-direction: row;
		justify-content: space-between;
	}

	.leftText {
		margin-right: 25px;
		max-width: 560px;
	}

	.rightImage {
		margin-left: 25px;
		/*align-self: flex-start;*/
		margin-top: 0;
	}

	/* -- Left image, Right text sections -- */
	.rightTextSection .contentContainer, .mixedTextSection .contentContainer.rightTextSubsection {
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	.rightText {
		margin-left: 25px;
		max-width: 560px;
	}

	.leftImage {
		margin-right: 25px;
		/*align-self: flex-start;*/
		margin-top: 0;
	}

	/* -- Photos that are wide w/1 column & narrower w/2 columns -- */
	.PFF-widePhoto {
		height: 400px;
	}

	.rightTextSection .widePhoto, .leftTextSection .widePhoto {
		max-width: 560px;
	}

	/* -- Center text sections -- */
	.centerTextSection .firstImageRow {
		margin-top: 60px;
	}

	.centerText-notFirst {
		padding-top: 60px;
	}

	/* -- Work preview & center text sections | UL w/3–4 comps across—-add 4th -- */
	.multipleComps li:nth-child(4) {
		visibility: visible;
		display: block;
		margin-left: 30px;
	}

	/* -- Site goal -- */
	.siteGoalSection .contentContainer h2 {
		min-width: 300px;
	}

	/* -- Quote section -- */
	.quoteSection .contentContainer {
		padding-top: 0;
		background-position: 0 0;
		background-size: 80px;
	}

	.quoteSection .contentContainer p {
		margin-left: 150px;
	}

	.leftArrow, .rightArrow {
		width: 60px;
		height: 60px;
		margin-top: 5px;
	}



	/* -- Project-Specific Images -- */

	/* Portfolio */
	#portfolio .introSection .contentContainer {
		margin-top: 60px;
	}

	.portfolio-grid, #gridBox4-5 {
		flex-direction: row;
	}

	.firstGridBox, #gridBox4 {
		border-right: 4px solid #333;	
	}

	#gridBox1, #gridBox4, #gridBox5  {
		height: 600px;
	}

	#gridBox2, #gridBox3 {
		height: 300px;
	}

}



/* -------- > 1400px  |  Homepage elements & Illustration on Error page get bigger -------- */

@media screen and (min-width: 1400px) {
	
	/* -- Heading styles -- */

	.headingLevel1 {
		/* 90px */
		font-size: 5em;
		padding-bottom: 54px;
	}

	.headingLevel2 {
		/* 72px */
		font-size: 4em;
		padding-bottom: 36px;
	}

	.headingLevel4 {
		/* 27px */
		font-size: 1.5em;
		padding-bottom: 18px;
	}

	.headingLevel5 {
		/* 21px */
		font-size: 1.167em;
	}


	/* -- Body text styles -- */

	.xxxlBodyText {
		/* 36px */
		font-size: 2em;
	}

	.xlBodyText {
		/* 27px */
		font-size: 1.5em;
	}

	.largeBodyText {
		/* 21px */
		font-size: 1.167em;
		padding-bottom: 27px;
	}


	/*-- Homepage --*/
	
	#aboutMeSection .flexIllustration, #talkingSection .flexIllustration, #lagniappeSection .flexIllustration {
		max-width: 800px;
	}

	#homePage .headingLevel4 {
		padding-bottom: 9px;
	}

	#helloSection .flexText {
		min-width: 690px;
		margin-bottom: 0;
	}

	#helloSection .flexIllustration {
		max-width: 600px;
		margin-right: 40px;
	}

	/* How I work section */

	#howIWorkIntro {
		width: 800px;
		padding-bottom: 18px;
	}

	.skillIcon {
		min-width: 100px;
	}

	.skillsList ul:first-child {
		padding-right: 90px;
	}


	/* Folks I've Worked With Section */
	#whoWorkWithSection li {
		width: 27%;
		margin-bottom: 36px;
	}

	#whoWorkWithButton {
		padding-top: 54px;
	}


	/* Error Page */
	#errorIllustration {
		max-width: 300px;
	}

	/* -- Small quote -- */
	.smallQuote {
		margin-right: -170px;
	}



}