@charset "UTF-8";
/* CSS Document */

	@import url("https://use.typekit.net/rja6ibq.css");

html {scroll-behavior: smooth;}
#main-container {max-width: 1500px; margin: 0 auto;}

	#header {width:100%; height: 40px; border-bottom: 1px solid #319049; position: fixed; background-color: #ffffff; box-shadow: 1px 15px 15px #ffffff; text-align: right; line-height: 40px; margin-right: 20px; z-index: 2;}
	.nav-links {padding-right: 20px; margin: 0;}
	.nav-links li {list-style: none; display: inline-block; }

	#skiptomain {position: absolute; left: 120px; background: #2e8642; color: #ffffff; padding: 1rem 2rem; z-index: 2; text-decoration: underline; top: -5rem;}
	#skiptomain:focus {top: 0; transition: top .1s ease; -webkit-transition: top .1s ease; color:#ffffff;}

	#header-container {max-width: 1500px; position: relative; margin: 0 auto;}

	#mail-link::before, .info-list::before {content: '◦'; margin: 0 0.5rem; font-size: 0.5rem;}
	li.indent-arrow::before {content: '»'; color: #949494; margin-right: 0.75rem; margin-left: .5rem;}
	#logo-link {position: absolute; left: 0; top: 0;}
	#contact-info {padding: 0;}
	.info-extra {padding-left: 3rem;}
	#mail-link svg {vertical-align: middle;}
	
	#Clogo {width: 70px; height: 70px; margin-top: 5px; margin-left: 20px; border: solid 5px #ffffff; border-radius: 50%; float: left; background-color: #ffffff;}
	
	#menu-icon, #section-list-button {display: none; height: 50px;}
	#hamburger {height: 1.75rem; width: 1.5rem; padding-top: 1rem;}

	.page-nav {position: fixed; top: 120px; list-style: none; padding: 0; margin: 1rem 1rem 1rem 0; line-height: 1.25rem; max-width: 250px; padding-left: 30px;}
	.page-nav li {padding: 0 0 .75rem 0;}
	.page-nav ul {list-style: none; margin: 0; padding: 0;}	
	.pn-container {max-width: 1500px; position: relative; margin: 0 auto;}


body.darkmode {background-color: #1a1a1a;}
.darkmode .projectdescription {background-color: #ffffff; height: auto; margin-left: 2rem; width: 35%;}
.darkmode #header {box-shadow: 1px 15px 15px rgb(26, 26, 26, .5);}
.darkmode .footer {box-shadow: 1px -15px 15px rgb(26, 26, 26, .25);}
.darkmode .shadow-img {box-shadow: 5px -10px 10px #000000;}

.darkmode .siteimgcontainer img, .darkmode .previmgcontainer img {border: none;}
.darkmode .previmgcontainer {color: #ffffff;}
	.darkmode .previmgcontainer.smallsq {color: #595959;}
	.darkmode .previmgcontainer.smallsq a {color: #2e8642;}

.darkmode .greyout, .darkmode.casestudy .pn-container h2, .darkmode .img-intro, .darkmode.category-page h1, .darkmode.category-page h2 {color: #949494;}
.darkmode .previmgcontainer a, .darkmode.casestudy .page-nav a {color: #ffffff;}
.darkmode.casestudy .projectdescription {padding: 120px 2rem; width: 660px;}
.darkmode .see-also a {color: #ffffff;}


	body {font-family: "crimson", "Crimson Text", "Hoefler Text", serif; color: #595959; margin: 0; padding:0; font-size: 0.96875rem; line-height: 22px; }
	
	a {color: #2e8642; text-decoration: none; font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem;}

	a.ext::after {content: url("https://christinacahalane.com/img/new-tab.svg"); fill: #2e8642; max-width:.75rem; padding-left: .35rem; width: 12px; height: 12px;}
	a.zoomlink:hover {transition: .1s ease; transform: scale(1.2); transform-origin: left top;}

	
	h1, h2, .headline-style {font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1rem; line-height: 22px; letter-spacing: .1em; }

	h1 a {font-size: 1rem; line-height: 22px; letter-spacing: .1em;}

	.fa {font-size:1rem;}

	.add-btm-margin {margin-bottom: 40px;}
	.add-top-margin {margin-top: 40px;}

	.borderless, .borderless img {border: none !important;}
	.shadow-img {box-shadow: 5px -10px 10px #e6e6e6; border: none !important;}


	.projectdescription {width: 40%; margin-top: 120px; float: left; clear: none; padding: 2.5rem; position: fixed; overflow-y:scroll; z-index: 1; max-height: 100%;}
	.type-description {font-style: italic;}
	
	.siteimgcontainer {height: 100%; width: 50%; clear: none; float: right; padding:20px 20px 80px 20px; margin-top: 80px; z-index: 1; text-align: center;}
	.siteimgcontainer.darkmatte {background: #1a1a1a; margin-bottom: 80px;}
	.siteimgcontainer img {max-width: 80%; border: 1px solid #E6E6E6; margin-bottom: 40px;}
	.sqimg {width:200px; padding: 40px 20px 20px 20px; display: inline-block; transition: .1s ease; margin-top: 10px;}

.previmgcontainer.smallsq {padding: 0 10px;}
.previmgcontainer.smallsq  img, .smallsq .sqimg {height: 150px; width: 150px;}
.previmgcontainer.smallsq a:hover .sqimg {width: 170px; height: 170px;}
.previmgcontainer.smallsq a:hover img {width: 160px; height: 160px;}
.smallsq .sqimg  {padding: 10px 20px 20px 20px;}

.previmgcontainer.smallsq a {padding-bottom: 20px; margin-top: 20px; }
.previmgcontainer .confcat {background: #efefef; padding-bottom: 20px;}

		

	.previmgcontainer img {width:200px; height: 200px; margin-bottom:10px; border: 1px solid #E6E6E6; transition: .1s ease;}
	.previmgcontainer {padding: 120px 10px 0 10px; text-align: center; z-index: 1; padding-bottom: 80px;}

	.img-intro {font-size: .75rem; text-transform: uppercase; font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; letter-spacing: .1em; width: 100%; min-width: 100%;}

	.previmgcontainer a {display: inline-block; transition: .1s ease;}
	.previmgcontainer a:hover {font-size: .9rem; transition: .3s ease;}
	.previmgcontainer a:hover .sqimg {width: 220px; height: 220px; transition: .3s ease; padding: 0 10px;}
	.previmgcontainer a:hover img {width: 220px; height: 220px; transition: .3s ease;}
	

	.two-img img {max-width: 40%; margin: 0 2.5%;}
	.two-col div {max-width: 45%; display: inline-block; vertical-align: top;}
	.two-col-divs .project-card {max-width: 40%; margin: 0 2%; display: inline-block; vertical-align: top;}
	.two-col-divs .checklist ul {column-count: 1;}
	.two-img video {width: 40%; margin: 0 2.5%;}
	.four-img img {max-width: 24%; margin: 0; border: none;}
	.five-img img {width:19%; margin: 0; border: none;}
	.three-img img, .three-img video, .three-img p {width:32%; margin: 0; border: none;}


	.col-container {margin-bottom: 40px;}
	.col-container img {max-width: 100%; margin: 0;}
	.col-container div {display: inline-block;}
	.two-col-asymmetrical-wide {max-width: 60%; margin: 0 2.25%;}
	.two-col-asymmetrical-thin {max-width: 30%; margin: 0 2.25%;}


	.see-also .img-intro {padding-top: 3rem; padding-bottom: 2rem;}
	.see-also img {margin-bottom: 0;}
	.see-also .subcaption {margin-top: 1rem; margin-bottom: 2.5rem;}


	.block-list {background: #EFEFEF; padding: 0 1.5rem;}
	.block-list h2, .casestudy .block-list h2 {padding: 0; display: inline-block; padding-right: 1rem;}
	.block-list ul {padding: 0; margin: 0; display: inline-block;}
	.block-list li {display: inline-block; padding-right: 1rem;}
	.block-list a {color: #2A7A3C;}

	.related-links {margin: 0 1rem; padding-bottom: 1rem;}
	.related-links .block-list {margin-top: 1rem; padding: .5rem 1rem;}
	.related-links p {margin: .25rem 0; display: inline; font-size: .85rem; text-transform: uppercase; font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; letter-spacing: .1em;}


	.vp-center {height: auto;} 
	.storyboard-container {background: #000000; padding: 30px 0; margin-bottom: 40px;}

	.vidcontain {max-width: 100%; margin-bottom: 40px;}
	.vidcontain video {max-width: 100%;}
	.vidcontain.narrower-vid video {max-width: 400px; margin: 0 auto;}
	video {max-height: 100vh; max-width: 100%;}


	input {height: 1.2rem; padding: .5rem 0; display: block; width: 95%; border: 1px solid #595959;}
	#send-button {height: 2.3rem; margin: 1rem 0; border: none; background: #2e8642; color: #ffffff; font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem;}
	textarea {width: 90%; padding: 1rem;}
	.required {color: #943333;}


	.greyout {color: #595959; font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem;}


	.footer {text-align: center; position: fixed; bottom: 0; height: 40px; width: 100%; background-color: #ffffff; border-top: thin solid #E6E6E6; line-height: 40px; font-size: .75rem; font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; box-shadow: 1px -15px 15px #ffffff; font-style: italic; z-index: 2;}


	#home-intro {background-color:#ffffff; width:500px; /*height:340px;*/ padding: 20px; margin: 0 auto; max-width: 80%; text-align: left;}
	#home-intro p {margin: 1rem auto;}
	#home-intro h2 {max-width: 420px; margin: 1rem auto;}

	.index-landing {background-color: #cccccc; background-attachment: fixed; color: #666666; background-image: url("bg.jpg"); background-size: cover; height: 100vh; background-position: center right;}
	.index-landing #header, .index-landing .footer {box-shadow: none !important;}
	.index-landing .previmgcontainer {color: #666666;}
	.index-landing .previmgcontainer a {color: #2e8642;}


	.casestudy .pn-container h2 {font-size: .75rem; padding-top: 0; margin-top: 0;}
		.resume .projectdescription h2 {text-decoration: underline;}
	.casestudy h3, .casestudy h4 {font-family: "azo-sans-web", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; text-transform: uppercase; color: #757575; font-size: .85rem; line-height: 22px; letter-spacing: .1em; padding-top: 1.5rem;}
	.casestudy img {width: 100%; text-align: center;}
	.casestudy .img-intro {width: 100%; text-align: center; padding-top: 2rem;}
	.category-page h1, .category-page h2 {text-align: center;}
	.casestudy .projectdescription ul li {padding-bottom: 1rem;}
	.casestudy .projectdescription {position: relative; float: none; margin: 0 auto; padding: 120px 0; width: 600px; font-size: 1rem; line-height: 1.5rem; margin-left: 300px;}
	.casestudy h2 {font-size: .85rem; padding-top: 3.5rem; scroll-margin-top:3rem;}

	.intro-landing .previmgcontainer h2, .intro-landing .previmgcontainer p {text-align: left;}


	.hello-name {font-size:2rem; padding: 1rem 0;}

	.project-card {display: inline-block; padding: 1rem; border: 1px solid #E6E6E6; border-radius: 5px; margin-bottom: 1rem; background: #ffffff; vertical-align: top;}
	.project-card img {max-width: 125px; display: inline-block; vertical-align: top;}
	.project-card h3, .project-card h4 {padding-top: 0; display: inline-block; margin: 0; padding-bottom: .5rem;}
	.project-card p {margin: 0;}
	.project-card a {display: block; padding: .5rem 0;}
	.project-card-content {display: inline-block; max-width: 400px; padding: 0 1rem; height: 100%;}

	.wide-card.project-card {margin-bottom: 3rem;}
	.wide-card .project-card-content {max-width: none;}
	.wide-link {min-height: 100px; background-size: cover; background-position: center; margin: 0 -1rem -1rem -1rem;}
	.wide-link a {background: #ffffff; padding: 1rem 2rem; margin: 20px 0; display: inline-block; border-width: 1px 1px 1px 0; border-style: solid; border-color:  #319049;}
	.wide-link a::after {content: "»"; color:#2e8642; }

	.checklist ul {list-style: none; padding: 0; column-count: 2; vertical-align: top; display: inline-block;}
	.checklist li::before {content: "✓"; padding-right: 1rem; color: #2e8642;}


	


@media only screen and (max-width: 900px) {
	
		body {font-size: 1.3rem; line-height: 1.35;}
		
		a {font-size: 1rem;}
	
		p, .projectdescription li {max-width: 100%; font-size: 1.3rem; text-align: left;}
	
		h1 {max-width: 100%;}
		h1, h2 {font-size: 1.25rem; text-align: left; line-height: 1.75rem;}
		
	
		#skiptomain {left: auto;}
	
		#Clogo {width: 70px; height: 70px;}
		
		#header {top:0; height: 50px; box-shadow: 1px 30px 15px #ffffff;}
	
		#header-container a {display: block; }
	
		#main-container {padding-top: 1rem;}
	
	
		#list-expander {height: 1rem; width: 1rem; fill: #2e8642;}
		.svg-container {transform: rotate(90deg);}
		.svg-container.expanded {transform: rotate(-90deg);}
		#section-list-button {padding-left: .5rem;}

	
		.nav-links ul, .nav-links li, 
		.sectionslist ul, .sectionslist li {display: none;}

		.nav-links.expanded ul {display: inline-flex;}
		.nav-links.expanded li {display: block; height: 80px;}
		.sectionslist.expanded ul, .sectionslist.expanded li {display: block;}
		.sectionslist.expanded {padding-bottom: 2rem;}
		.sectionslist.expanded li {padding-bottom: 1.5rem; line-height: 1.5rem;}
	
		.nav-links {margin: 1px auto auto auto; padding: 1.5rem 10%; text-align: left;}
		.nav-links.expanded {border-bottom: 1px solid #319049; background: #ffffff; box-shadow: 0px 50px 50px 50px #ffffff; padding: 1.5rem 10% 2rem 10%;}
		.nav-links a {font-size: 1.5rem; padding-top: 1.5rem;}
		.nav-links i {font-size: 2rem;}
		.info-extra {padding-left: 0;}
		
			.indent-arrow {background-image: url(img/nested-arrow.svg); background-repeat: no-repeat;background-position: bottom left; background-size: contain; padding-left: 2rem; margin-left: 2rem;}
			.indent-arrow.third-level {margin-left: 4rem;}
	
			#contact-info {display: inline-flex; justify-content: space-between; width: 100%; border-top: 1px solid #e6e6e6; margin-top: 1.5rem; padding: 0;}
			#mail-link::before, .info-list::before, li.indent-arrow::before {content:none;}
			#mail-link svg {height: 1.75rem;}

			#menu-icon {display: block; padding-right: 10%; text-align: right;}
			#section-list-button {display: inline-block; height: 50px;}

			#menu-icon:focus > svg {outline: 5px auto -webkit-focus-ring-color;}
	
	
		.page-nav {position: relative; top: 0; left: 0; padding-top: 0; margin: 0;}
		.pn-container {padding-top: 100px; border-bottom: 1px solid #319049; max-width: 90%;}
	
		
		.siteimgcontainer {height: auto; width: 100%; max-width: 100%; clear: none; padding:0; margin: 40px auto 100px auto; float: none;}
	
		.projectdescription, .darkmode .projectdescription {height: auto; width: 80%; margin-top: 80px; padding: 1rem 10%; position: static; z-index: 1; float: none; margin: 80px 0; max-height: none;}
		.img-intro {font-size: 1rem;}
	
		.category-page p {text-align: center;}
		.img-intro {text-align: center; margin-left: 5%; margin-right: 5%; min-width: unset; max-width: 90%;}
		
	
		.two-col-asymmetrical-thin {max-width: 60%;}
	
		.two-col-divs .project-card {max-width: none;}
		
	
		.vidcontain {min-width: 100%; width: 100%;}	
	
		.block-list li {display: block; padding: 0; width: 100%; margin: 1rem 0;}
		.related-links p {display: block ; margin-top: .5rem; margin-bottom: 0;}
		.block-list h2 {margin-top: 1rem;}
		.related-links .block-list {padding: .5rem 1.5rem 1.5rem 1.5rem;}
		.block-list ul {width: 100%;}
		.block-list a, .related-links a {display: block;}
	
		.see-also .subcaption {font-size: 1rem; text-align: center;}
	
		.project-card-content {padding: 1rem 0; display: inline;}
		.project-card-content h3 {padding: 1rem;}
		.project-card img {padding-bottom: 1.5rem;}
		.project-card.wide-card h3 {padding-left: 0;}
		.checklist ul {column-count: 1;}
	
	
		.darkmode .nav-links.expanded {box-shadow: 0px 50px 50px 0px rgb(26, 26, 26, .75);}
		.darkmode #list-expander {fill: #319049;}
		.darkmode .projectdescription {margin-top: 0; padding-top: 100px;}
		.darkmode.casestudy .projectdescription {padding: 100px 5%; width: 80%;}
		.darkmode #header {box-shadow: 1px 15px 15px rgb(26, 26, 26, .25);}
	
	
		#home-intro {max-width: 80%; width: auto !important;}
		#home-intro p {text-align: left;}

	
		.casestudy .projectdescription {max-width: 90%; margin: 0 5%; line-height: 1.5; padding-top: 5rem; }
		.casestudy.sectioned .projectdescription {padding-top: 3rem;}
		.casestudy h2 {font-size: 1rem; scroll-margin-top: 60px;}
		.casestudy .page-nav h2 {font-size: 1rem; display: inline-block;}

		
}