/*

STYLES FOR LITTERFALL GALLERY

Font weights:
200 = JAF Domus Extralight	body text, headings
300 = JAF Domus Light		bolded text
*/

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

/* Basic styling */
* {
  padding: 0;
  margin: 0;
}

:focus {outline: 0;}

:root {
	--green-lt: #b1c2a5;
	--green: #74806c; 
	--green-dk: #5d6657;
	--theborder: 25px;
	--grey-lt: #d8d4cd;
	--background: #e8e4df;
	--background-light: #F2F2ED;
}

.hide { display: none !important; }

html { font-size: 18px; }

body {
	text-align: inherit;
	background-color: #e8e4df;
	/* NOW: #dbd7d0  LIGHTER: #e8e5df LIGHTEST: #F2F2ED */
}

#wrapperresponsive {
	max-width: 960px; /* 960 if box-sizing: content-box; 1000 if box-sizing: border-box; */
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	text-align: left;
	position: relative;
}

h1, h2, p, ul, li, .tooltip, dd, dt, fieldset {
	font-family: jaf-domus, open-sans, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 200;
	text-transform: none;
}

h1 {
	font-size: 1.6rem; /* 1.5em at 19px = 27px, 1.5rem = 29px */
	line-height: 1.2;
	margin: 0 0 0.5em 0;
}

h2 {
	font-size: 1.3rem; /* 1.3em @ 19px = 23px */
	line-height: 1.2;
	margin: 1.25em 0 0.5em 0;
}

h2:first-child {
	margin: 0 0 0.5em 0;
}

h3 {
	font-family: jaf-domus-titling-web, sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #444;
	font-size: 15px;
	line-height: 1.1;
	margin: 1.75em 0 0.5em 0;
}

h3:first-child {
	margin: 0 0 0.5em 0;
}

p {
	font-size: 1rem; /* 19px */
	line-height: 1.5em;
	margin: 0 0 1em 0;	
}

p strong {
	font-weight: 300;
	font-style: normal;
}

p.caption {
	margin-top: 10px;
	color: #58534b;
	font-size: 0.85em;
	line-height: 1.2em;
	text-align: center;
}

p.caption .fas, p.caption .far, h3 .fas {
	opacity: 0.6;
	margin-right: 11px;
}

.topheading {
	margin-top: 0;
}

#breadcrumbs .fa-caret-right {
	padding: 0 16px;
	font-size: 0.8em;
	opacity: 0.3; filter:alpha(opacity=30); -moz-opacity:0.3;
}
#breadcrumbs .fa-minus-square {
	padding: 0 16px 0 8px;
	font-size: 0.55em;
	opacity: 0.3; filter:alpha(opacity=30); -moz-opacity:0.3;
}
#breadcrumbs .fa-sync-alt {
	margin-left: 16px;
	font-size: 0.55em;
	opacity: 0.3; filter:alpha(opacity=30); -moz-opacity:0.3;
}



a, a:link, a:visited {
	text-decoration: none;
	color: var(--green);
}
a:hover {
	color: #333;
}
.emphasis, a.emphasis, a.emphasis:link, a.emphasis:visited {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
a.emphasis, a.emphasis:link, a.emphasis:visited {
	color: var(--green);
}
a.emphasis:hover {
	color: #000;
	background: var(--grey-lt);
}



.pullquote {
	padding-left: 70px;
	padding-right: 90px;
	position: relative;
}
.pullquote p {
	font-style: italic;
	font-size: 1.2em !important;
}

.textLeft {
	padding-right: 25%;
	position: relative;
}

.textRight {
	padding-left: 25%;
	position: relative;
}

ul:not(#mainmenu *) {
	margin: 0 0 1em 0;
	padding: 0 1.1em;
	list-style-type: square;
	list-style-position: outside;
}

ul li:not(#mainmenu *) {
	font-size: 1em;
	line-height: 1.4em;
	margin-bottom: 0.25em;
}


select {
	font-family: jaf-domus, open-sans, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-size: 0.9em;
	color: #333;
	margin: 0;
	border-radius: 5px;
	border: solid 1px #b8b5a5;
	padding: 5px 20px 5px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #dedad3;
	background: url("ui/nav-down.png") 96% / 12px no-repeat #dedad3;
}

.select-hightlight {
	background-color: #f2eeea;
	font-weight: 500;
	color: #000;
}

.inset-image {
	float: right;
	margin: 10px 0 50px 50px;
	max-width: 315px;
}
.insert-image img {
	max-width: 100%;
}
.insert-image .caption {
	margin: 0 0 25px 0;
}


/* */
/* GALLERY EXHIBITION STYLES */
/* */

.viewingroom > div, div.onecolumn, div.twocolumns, div.pullquote, div.textLeft, div.textRight, div.slideshow, .theArtwork {
	margin-bottom: 3rem;
}
.viewingroom {
	margin-bottom: 3rem;
}
/* For fade in on scroll     */
.viewingroom .artwork.not-visible, .viewingroom .slideshow.not-visible { 
	/* opacity: 0.1; */
	transform: translateY(3vh);
	transition: opacity 1.5s ease-out, transform 1s ease-out;
	will-change: transform, opacity;
}
.viewingroom .artwork.is-visible, .viewingroom .slideshow.is-visible {
	opacity: 1;
	transform: none;
	visibility: visible;
}
.viewingroom .artwork, .viewingroom .slideshow {
	opacity: 0.1;
	transition: opacity 1s ease-out
}
/* END for fade in on scroll */	

.artwork img, .videostill, video, .vimeoWrap {
	background-color: #FFF;
	box-shadow: 2px 2px 5px #b3afa6;
	-moz-box-shadow: 2px 2px 5px #b3afa6;
	-webkit-box-shadow: 2px 2px 5px #b3afa6;
	padding: var(--theborder);
}
.viewingroom h1 {
	margin-bottom: 1rem;
}
.viewingroom h3 {
	margin: 0 0 1.5rem 0;
}
.viewingroom p {
	font-size: 19px;
	line-height: 1.6;
	margin: 0 0 1em 0;
}
.viewingroom p.caption {
	margin: 15px 0 0 0;
	color: #58534b;
	font-size: 0.85em;
	line-height: 1em;
	text-align: center;
}
.viewingroom p.caption .fas, p.caption .far, h3 .fas {
	opacity: 0.6;
	margin-right: 11px;
}
.viewingroom p.caption a:last-of-type { margin-left: 35px; white-space: nowrap; }

.onecolumn {
	max-width: 100%;
	position: relative;
}
.onecolumn p {
	padding: 0 5% 0 0;
}	
.onecolumn img {
	box-sizing: border-box;
	display: block;
	max-width:  100%;
	position: relative;
	/* padding: var(--theborder); */
}

.twocolumns {
	max-width: 100%;
	position: relative;
	--gutter: 20px; /* 40 */
	--widthredux: 14px; /* 24 */ /* half of gutter (+5  for borders during tests) */
	
}
.twocolumns.biggutter {
	--gutter: 50px;
	--widthredux: 29px; /* half of gutter (+4  for borders during tests) */
}
.twocolumns > div {
	max-width: calc(50% - var(--widthredux));
	position: relative;
	float: left;
	/* border: #00F solid 1px; */
}
.twocolumns > div:first-child {
	margin-right: var(--gutter);
}
.twocolumns img {
	box-sizing: border-box;
	max-width:  100%;
	/* padding: var(--theborder); */
	display: block;
}

.mixedheight > div {
	max-width: none;
	position: relative;
	float: left;
}
.mixedheight img {
	box-sizing: border-box;
	max-width: 100%;
	max-height: 410px;
}


.currentexhibit {
	max-width: 100%;
	position: relative;
	display: flex;
	align-items: center; /* stretch | flex-start | flex-end | center | baseline */
	--gutter: 50px;
}
.currentexhibit > div {
	position: relative;
	float: left;
}
.currentexhibit > div:first-child {
	max-width: 66%;
	width: 66%;
	margin-right: 50px;
}
.currentexhibit > div:nth-child(2) {
	max-width: 33%;
	width: 33%;
}

.currentexhibit img {
	box-sizing: border-box;
	max-width:  100%;
	padding: 20px;
	display: block;
}
.currentexhibit h2 {
	margin: 0 0 1rem 0;
}

.currentexhibit h3 {
	margin: 0 0 1.5em 0;
}

.currentexhibit p {
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 0;
}

.threecolumns {
	max-width: 100%;
	position: relative;
	--gutter: 20px;
	--widthredux: 12px; /* half of gutter (+4  for borders during tests) */
}
.threecolumns > div {
	max-width: calc(33% - var(--widthredux));
	position: relative;
	float: left;
	margin-bottom: 25px;

}
.threecolumns > :not(:nth-child(3n)) {
	margin-right: var(--gutter);
}
.threecolumns img {
	max-width: calc(100% - var(--gutter) );
	padding: 5px;
	display: block;
}
.threecolumns p {
	margin-top: 0;
	line-height: 1.2em;
}
.threecolumns h3 {
	margin: 1em 0 0.5em 0;
}

nav, #mainmenu {
	border-bottom: 1px var(--grey-lt) solid;
	padding-top: 7px;
}
.footer {
	border-top: 1px var(--grey-lt) solid;
	margin-top: 75px;
	margin-bottom: 25px;
	padding: 7px 0;
}
.footer h3 {
	/* text-align: center; */
	font-size: 12px;
}
.footer h3:first-of-type {
	float: left;
}
.footer h3:last-of-type {
	float: right;
}
.footer a {
	color: #999490;
}
.footer a:not(:first-of-type) {
	margin-left: 35px;
}



/* clear floats */
.text2col::after, .twocolumns::after, .viewingroom::after {
	content: ""; display: table; clear: both;
}


/* */
/*! BUTTONS */
/* */

.newbuttons {
	margin: 25px 0 35px 0;
}
.newbuttons.centered {
	text-align: center;
}
a.newbutton {
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
	display: inline-block;
	/* margin: 0 5px; */
	padding:  7px 20px;

	background-color: rgba(179, 176, 171, 0.25); /* #d6d3ce */
	color: #000 !important;
	border: solid 1px rgba(179, 176, 171, 0.4);

	font-family: 'jaf-domus', 'open-sans', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', Arial, sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 1rem; line-height: 1rem;

	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	white-space: nowrap;
	
	box-sizing: border-box;
}
a.newbutton:hover {
	background-color: rgba(179, 176, 171, 0.4);
	text-decoration: none;
	border: solid 1px #b8b5a5;
}
a.newbutton:visited {
	color: #000 !important;
}

a.newbutton.bigbutton {
	font-size: 1em;
	padding:  7px 35px;
	/* margin: 1em 5px 1em 0; */
}
a.newbutton.greenbutton {
	background-color: rgba(57, 147, 74, 0.4);
	border: solid 1px rgba(57, 147, 74, 0.4);
}
a.newbutton.greenbutton:hover {
	background-color: rgba(57, 147, 74, 0.6);
	color: #FFF !important;	
}
a.newbutton.rightbutton {
	float: right;

	margin: 0 0 0 10px;
	position: relative;
}
a.disabled {
	opacity:0.5; pointer-events: none; cursor: default;
}

.savedArtButtons {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin: 15px 0;
}
.savedArtButtons a {
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
	display: inline-block;
	margin: 2px; 5px;
	padding:  5px 15px;

	background-color: rgba(179, 176, 171, 0.25); /* #d6d3ce */
	color: #333 !important;
	border: solid 1px rgba(179, 176, 171, 0.4);

	font-family: 'jaf-domus', 'open-sans', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', Arial, sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 16px; line-height: 17px;

	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	white-space: nowrap;
	
	box-sizing: border-box;
}
.savedArtButtons a.greenbutton {
	background-color: rgba(57, 147, 74, 0.4);
	border: solid 1px rgba(57, 147, 74, 0.4);
}
.savedArtButtons a.greenbutton:hover {
	background-color: rgba(57, 147, 74, 0.6);
	color: #FFF !important;	
}



/* */
/*! VIDEO STYLES */
/* */

video.video-tall, iframe.video-tall {
	width: 420px;
	height: 524px;
	background-color: #FFF;
	padding: var(--theborder);
	box-shadow: 2px 2px 5px #b3afa6;
	-moz-box-shadow: 2px 2px 5px #b3afa6;
	-webkit-box-shadow: 2px 2px 5px #b3afa6;
	margin-right: 100px;
}

.onecolumn video, .onecolumn .vimeoWrap {
	box-sizing: border-box;
	max-width: calc(100% - 10px ); /* -10px needed for some reason */
	width: 100%;
	height: auto;
	position: relative;
	padding: var(--theborder);
}

.viewingroom video, .viewingroom .vimeoWrap {
	display: none;
}

.videostill {
	/* opacity: 1;
	display: block;
	box-sizing: border-box;
	max-width: 100%;

	height: auto;
	transition: .5s ease;
	backface-visibility: hidden;
	z-index: 2; */
	}

.playbutton {
	box-sizing: border-box;
	background-color: #4CAF50;
	color: white;
	/* font-size: 18px; */
	padding: 16px 32px;
	border-radius: 25px;
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	z-index: 3;
	}
.playbutton:hover, .videostill:hover + .playbutton  {
	  opacity: 1;
	  color: #FFF;
	}
.playbutton i {
	font-size: 2em;
	padding: 10px 10px 10px 18px;
}
.playbuttonvisible {
	opacity: 1;
}



.caption .fa-play {
	color: #429945; /* green */
}

a { cursor: pointer; }

#mainmenu .print, nav .print, #header .print {
	display: none;
}

/* FORMS */

input[type="text"], input[type="email"], textarea, input[type="submit"], input[type="button"], button {
	font-family: jaf-domus, open-sans, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 1rem;
	border-radius: 6px;
	box-sizing: content-box;
}
p.contact-error {
	margin-top: 20px; margin-bottom: 5px;
}

input[type="text"], input[type="email"], textarea {
	margin: 0;
	padding: 4px 4px 4px 8px;
	background: rgba(232, 229, 223, 1);
	border: solid 1px #b8b5a5;
	max-width: 100%;
	box-sizing: content-box;
}
input[type="text"]:hover, input[type="email"]:hover, textarea:hover {
	background: rgba(255, 255, 255, 0.3);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	color: #000;
	background: #e1e0da;
}

textarea { width: 85%; position: relative; }

input[type="text"], input[type="email"] { width: 250px; }

input[type="submit"], input[type="button"], button {
	box-sizing: content-box;
	background: rgba(179, 176, 171, 0.25);
	color: #000;
	border: solid 1px rgba(179, 176, 171, 0.4);
	cursor: pointer;
	padding: 4px 25px;
	margin: 0;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
	background-color: rgba(179, 176, 171, 0.4);
	border: solid 1px #b8b5a5;
}



/* */
/*! RESPONSIVE STYLES FOR SMALL SCREENS */
/* */


/*! RESPONSIVE: MOBILE WIDE */
@media screen and (min-width: 501px) and (max-width: 800px) {

	.savedArtButtons {
		grid-template-columns: repeat(3, 1fr);
	}

	.textLeft {
		padding-right: 20%;
	}
	.textRight {
		padding-left: 20%;
	}

	.inset-image {
		float: right;
		margin: 10px 0 30px 30px;
		max-width: 200px;
	}

	
	.viewingroom > div, div.onecolumn, div.twocolumns, div.pullquote, div.textLeft, div.textRight, div.slideshow, .theArtwork {
	margin-bottom: 2rem;
	}
	
	.currentexhibit {
		display: block;
		--gutter: 25px;
	}
	
	.currentexhibit img {
		padding: 20px;
	}
	.currentexhibit > div:first-child {
		margin-bottom: 2rem;
	}
	.currentexhibit > div:first-child, .currentexhibit > div:nth-child(2) {
		max-width: 100%;
		width: 100%;
		float: none;
		margin-right: 0px;
	}
	
	.currentexhibit h2 {
		margin: 0 0 0.5rem 0;
	}
	
	.currentexhibit h3 {
		margin: 0 0 1rem 0;
	}
	
	.onecolumn img, .onecolumn video, .onecolumn .vimeoWrap {
		/* max-width: calc(100% - 50px); */
		/* padding: 25px; */
	}
	
	.twocolumns {
		--widthredux: 22px;
		--gutter: 40px;
	}

	.threecolumns {
		--gutter: 15px;
	}

	.threecolumns > div {
		max-width: calc(50% - 15px);
	}
	.threecolumns > :not(:nth-child(2n)) {
		margin-right: var(--gutter);
	}
	.tight {
		--widthredux: 16px;
		--gutter: 30px;
	}
	
	.mixedheight > div {
		max-width: none;
		position: relative;
		float: left;
	}
	.mixedheight img {
		max-width: 100%;
		max-height: 230px;
	}
		
	.pullquote {
		padding-left: 10%;
		padding-right: 10%;
	}
	
	.playbutton {
		top: 46%;
	}
}


/*! RESPONSIVE MOBILE TALL */
@media screen and (max-width: 500px) {
	
	html { font-size: 17px; }
	
	.savedArtButtons {
		grid-template-columns: repeat(2, 1fr);
	}
	
	h1 {
		font-size: 1.4rem; 
	}
	/* h2 {
		font-size: 1.2em;
	} */
	
	h3 {
		font-size: 14px;
		margin: 1.5em 0 0.5em 0;
	}


	.textLeft, .textRight {
		padding-right: 0;
		padding-left: 0;
	}
	
	.inset-image {
		float: none;
		margin: 0 0 0 0;
		max-width: 100%;
		width: 100%;
	}
	
	p.caption {
		line-height: 1.4em;
	}
	p.caption a:last-of-type {
		margin-left: 10px;
	}
	
	.currentexhibit {
		display: block;
		margin-bottom: 2rem;
	}
	
	.currentexhibit h2 {
		margin: 0 0 0.75rem 0;
	}
	
	.currentexhibit h3 {
		margin: 0 0 0.75rem 0;
	}
	
	.currentexhibit > div:first-child, .currentexhibit > div:nth-child(2), .threecolumns > div {
		max-width: 100%; width: 100%;
		float: none;
		margin-right: 0px;
	}
	
	.currentexhibit > :first-child, .threecolumns > :not(:last-child) {
		margin-right: 0;
		margin-bottom: 25px;
	}
	.currentexhibit img {
		max-width: 100%;
		padding: 15px;
	}
	
	.onecolumn img, .onecolumn video, .onecolumn .vimeoWrap {
		max-width: 100%;
		padding: 15px;
	}	
	.onecolumn p {
		padding: 0 0;
	}
	.twocolumns > div {
		max-width: 100%;
		float: none;
	}
	.twocolumns > div:first-child {
		margin-right: 0;
		margin-bottom: 35px;
	}
	.twocolumns .artwork img {
		max-width: 100%;
		padding: 15px;
	}
	.threecolumns h3 {
		margin: 0.75em 0 0.5em 0;
	}
	.mixedheight > div {
		max-width: 100%;
	}
	.mixedheight img {
		max-height: none;
	}
	.pullquote {
		padding-left: 10%;
		padding-right: 10%;
	}
	
	 .playbutton {
		padding: 10px 20px; /* 16px 32px */
		top: 40%;
	}
	.playbutton i {
		font-size: 1.5em;
	}
	
	.footer h3 {
		margin: 5px 0 7px 0;
	}
	.footer h3:first-of-type, .footer h3:last-of-type {
		/* float: none; */
	}
	.footer a:not(:first-of-type) {
		margin-left: 20px;
	}
	
	.newbuttons {
		margin: 20px 0 20px 0;
		}
		
	a.newbutton {
		margin: 0 5px 0.5rem 0px;
	}
	
	
	/* FORMS */
	input[type="text"], input[type="email"], textarea { margin-bottom: 10px; }
	input[type="text"], input[type="email"], textarea { width: calc(100% - 8px); } /*remove the padding to fit */
}

/* STYLES FOR PRINTING */
@media print {
	body {
		background-color: #FFF !important;
		background-image: none !important;
	}
	#wrapper {
		margin-left: 30px;
	}
	#header_menu, #thumb, #breadcrumbs, #lightbox-alert, .inlightbox_marker, .help, .linkbutton, .donotprint {
		display: none;
	}
	#photo_leftcol {
		position: relative;
		float: left;
		width: 640px;
		height: 640px;
		text-align: center;
	}
	#header {
		height: 50px;
		border-bottom: none;
	}
	#header .print {
		display: block;
		float: left;
	}
	#header .screen {
		display: none;
	}
	#header_image p {
		margin-top: 1em;
	}
	#the_photo {
		top: 10px !important;
	}
	.lightbox-fullimage {
		margin: 0 15px 15px 0; float: left; line-height: 22px; background-color: #FFF !important; border: none !important; box-shadow: none !important; padding: 10px;
	}
	.placeholder-highlight, .layout {
		border: none;
	}
}