/* CSS Reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
/*:focus {
	outline: 0;
}*/
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* End CSS Reset */

body, html {
	font-family:"Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#707070;
	height:100%;
	font-size:14px;
	line-height:1.6em;
	font-weight:300;
	text-rendering: optimizeLegibility;
	/*text-shadow:rgba(255,255,255,0.75) 0 1px 0.05em;*/
}

a.skip {
	display: block;
	width: 100%;
	text-align: center;
	background: #FF5200;
	color: #ffffff !important;
	font-weight: bold;
	height: 0;
	overflow: hidden;
}

.skip:focus {
	height: auto;
	overflow: visible;
}

#logo a {
	display:block;
	height: 100%;
	background:#959595 url(../images/logo.png) center center no-repeat;
	background-size: 100% auto;
	text-indent:-999em;
}

a, a:link, a:visited {
	color:#707070;
	text-decoration:none;
}

a:hover {text-decoration:underline;}

a:focus, button:focus {
	outline: 2px dotted black;
	outline-offset: -2px;
}

strong {font-weight:bold;}

em {font-style:italic;}

p {margin-bottom:1.4em;}

p a:link {text-decoration:underline;}

p a:hover {text-decoration:none;}

img {border:0px;}

::-moz-selection { background: #dcf5fc; text-shadow:none; }
::selection      { background: #dcf5fc; text-shadow:none; }

#header {
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	display: grid;
	grid-template-columns: 65% 35%;
	grid-template-rows: 3rem 20vw auto;
	grid-template-areas:
		". newsLink"
		"logo menuToggle"
		"menu menu"
		"slideshow slideshow";
}

#logo {
	grid-area: logo;
}

#menuToggle {
	grid-area: menuToggle;
	border: none;
	font-size: 1em;
	background: white;
	border-top: 1px solid #cccccc;
	position: relative;
	margin: 0;
}

#menuToggle strong {
	display: inline-block;
	text-indent: -999rem;
}

#menuToggle strong:after {
	content: "";
	display: block;
	background: #959595;
	height: 3px;
	width: 2rem;
	border-radius: 5px;
	
	position: absolute;
	top: 50%;
	left: calc(50% - 1rem);
	transition: all .5s ease-in-out;
}

#menuToggle span:after, #menuToggle span:before {
	content: "";
	display: block;
	background: #959595;
	height: 3px;
	width: 2rem;
	border-radius: 5px;
	position: absolute;
	left: calc(50% - 1rem);
	transition: all .5s ease-in-out;
}

#menuToggle span:after {
	top: calc(50% - .7rem);
}

#menuToggle span:before {
	top: calc(50% + .7rem);
}

#menuToggle.is-open strong:after {
	transform: rotate(45deg);
	opacity: 0;
}

#menuToggle.is-open span:after {
	top: 50%;
	transform: rotate(45deg);
}

#menuToggle.is-open span:before {
	top: 50%;
	transform: rotate(-45deg);
}

#menu {
	display: none;
	grid-area: menu;
	position: relative;
	transition: height 1s ease-in;
	font-size: 1.5rem;
	border: 1px solid #cccccc;
	border-width: 0 0 1px 0;
	background: #ffffff;
}

#menu > ul {
	max-height: 0;
	transition: max-height .5s linear;
	overflow: hidden;
}

#menu.is-shown {
	display: block;
	border-width: 1px 0;
}

#menu.is-shown > ul {
	max-height: 100rem;
}

#menu li {
	text-transform: uppercase;
	letter-spacing: 1px;
}

#menu a {
	display: block;
	line-height: 2rem;
	padding: .5rem 2rem;
}

#menu a:hover, #menu a.active {
	text-decoration: none;
	color: #ffffff;
	background: #959595;
}

#menu a.menupaintings:hover, #menu a.menupaintings.active {
	background: #e0761d;
}

#menu a.menustatement:hover, #menu a.menustatement.active {
	background: #bbb746;
}

#menu a.menubiography:hover, #menu a.menubiography.active {
	background: #5d7db0;
}

#menu a.menuresume:hover, #menu a.menuresume.active {
	background: #9d5667;
}

#menu a.menucontact:hover, #menu a.menucontact.active {
	background: #e0bd18;
}

.paintings h1, .work h1, .work h1, .work h1 a {
	color: #e0761d;
}

.statement h1 {
	color: #bbb746;
}

.biography h1 {
	color: #5d7db0;
}

.resume h1, .resume h2, .resume dt {
	color: #9d5667;
}

.contact h1 {
	color: #e0bd18;
}

#menu ul ul li {
	font-size: 1rem;
	margin: .2rem 0 0 2rem;
}

#menu ul ul li a {
	line-height: 1.2em;
	letter-spacing: 1px;
	border-left: .3rem solid transparent;
}

#menu ul ul li a:hover, #menu ul ul li a.active {
	color: #454545;
	background: #ffffff;
	border-color: #e0761d;
}

#newsLink {
	grid-area: newsLink;
	text-align: right;
	padding-right: 1rem;
	background: #ffffff;
	border-left: 1px solid #cccccc;
	color: #454545;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 3rem;
	font-size: 2vw;
	font-weight: bold;
}

#footer {
	grid-area: footer;
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	text-transform:uppercase;
	letter-spacing:.1em;
	font-weight:300;
	font-size:12px;
	line-height:16px;
	clear:left;
	border-top: 1px solid #cccccc;
	box-sizing: border-box;
}

#footer a {text-decoration:none;}

p#copyright {
	padding: 2rem 0;
	height: 100%;
	text-align: center;
	box-sizing: border-box;
}

p#copyright a {	font-weight:600; color: #454545; }

@media only screen and (min-width: 750px){
	#menu {
		display: block;
	}

	#menu > ul {
		max-height: unset;
	}
	#footer {
		border-right: 1px solid #cccccc;
	}

	p#copyright {
		width: calc(25vw + 1px);
		padding: 2rem 0 0 2rem;
		border-right: 1px solid #cccccc;
		text-align: left;
	}
	
	#newsLink {
		font-size: 1rem;
	}
}

#artworknavWrapper {
	width: 100%;
	height: calc(9rem);
	margin-bottom: -1rem;
	overflow: scroll;
	position: relative;
	box-sizing: border-box;
}

#arrows {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 1px);
	height: calc(8rem);
}

#navleft, #navright {
	display: block;
	position: absolute;
	height: 100%;
	width: 60px;
	top: 0px;
	background: url(../images/sprites.png) left 1.5rem no-repeat;
	background-size: 120px 192px;
	text-indent: -999rem;
	z-index: 1;
}

#navleft {
	left: 0;
}

#navright {
	right: 0px;
	background-position: right 1.5rem;
}

#artworknav {
	display: flex;
	flex-wrap: nowrap;
	justify-items: space-between;
	align-items: center;
	height: 100%;
	margin: -.5rem 0 0 3rem;
}

#artworknav li {
	margin-right: 1rem;
	position: relative;
}

#artworknav li a {
	display: block;
	border: 2px solid transparent;
}

#artworknav li a:hover {
	border-color: #cccccc;
}

#artworknav li.active a {
	border-color: #000000;
}

#artworknav li.active:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -2.2rem;
	left: calc(50% - .5rem);
	height: 1rem;
	width: 1rem;
	transform: rotate(45deg);
	background: #ffffff;
	z-index: 1;
	box-shadow: 1px 1px 1px 0px #cccccc;
}

#artworknav li img {
	width: 60px;
	height: 60px;
	object-fit: cover;
}

#content {
	position: relative;
}

#content p {
	padding: 1rem 4rem 0 4rem;
}

#content figure {
	float: right;
	margin: 0 0 1rem 0;
	max-width: 100%;
	box-sizing: border-box;
}

#content figure img {
	max-height: 50vh;
	width: 100%;
	object-fit: contain;
}

#content figure .caption {
	padding: .5rem;
	border-bottom: 1px solid #cccccc;
}

#content h1 {
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 2rem;
	font-weight: bold;
	height: 4rem;
	padding: 0 2rem;
	line-height: 1.2em;
	border: 1px solid #cccccc;
	border-width: 1px 0;
	position: sticky;
	top: 0;
	background: #ffffff;
}

#content.resume h1 {
	position: relative;
}

#content.paintings h1 {
	padding: 0;
}

#content h1 span {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#content h1 span.secondaryTitle {
	position: relative;
	top: unset;
	transform: unset;
	font-size: 1.5rem;
	color: #707070;
	font-weight: normal;
}

#content h1 span.secondaryTitle:before {
	content: " / ";
}

#content h2 {
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.2rem;
	width: 100%;
	box-sizing: border-box;
	padding: .25rem 4rem;
	border: 1px solid #cccccc;
	border-width: 1px 0;
	background: #ffffff
}

.fancybox__caption {
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	color: #707070;
}

.fancybox__caption h2 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.2rem;
	width: 100%;
	box-sizing: border-box;
	border-width: 1px 0;
}

.fancybox__slide {
	padding: 4rem 3rem 2rem 3rem;
}

.fancybox__backdrop {
	background: rgba(255, 255, 255, .95);
}

.carousel__button, .fancybox__content>.carousel__button.is-close {
	color: #707070;
	box-shadow: none;
}

.carousel__button svg {
	filter: none;
}

.fancybox__nav .carousel__button.is-prev {
	left: 0;
}

.fancybox__nav .carousel__button.is-next {
	right: 0;
}

#content.resume h2:first-of-type {
	border-top: 0;
}

#content.work {
	background: #ebebeb;
}

#work-grid {
	display: grid;
	padding: 4rem;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	grid-gap: 2rem;
}

#work-grid a {
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid #ffffff;
}

#work-grid a:hover {
	border-color: #000000;
}

#work-grid a img {
	width: 100%;
	object-fit: scale-down;
}

.resume_section {
	position: relative;
}

.resume_section h2 {
	position: sticky;
	top: 0;
}

.resume_section a {
	text-decoration: underline;
}

.resume_section a:hover {
	text-decoration: none;
}

dl {
	display: grid;
	padding: 4rem;
	grid-template-columns: 20% 80%;
	grid-gap: 2rem;
}

dt {
	text-align: right;
}

form {
	display: grid;
	grid-template-columns: 25% 75%;
}

label {
	grid-column: 1;
	height: 4rem;
	padding: 1rem;
	text-align: right;
	box-sizing: border-box;
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-top: 1px solid #cccccc;
}

input, textarea {
	grid-column: 2;
	border: none;
	border: 1px solid #cccccc;
	border-width: 1px 0 0 1px;
	box-sizing: border-box;
	margin: 0;
	font-size: 1rem;
	padding: .5rem;
}

input:hover, textarea:hover {
	background: #f4f4f4;
}

input[type=submit] {
	grid-column: 2;
	height: 4rem;
	padding: 1rem;
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	border: none;
	background: #959595;
	color: #ffffff;
}

input[type=submit]:hover {
	background: #cccccc;
}

#painting {
	width: 100%;
	padding: 10%;
	box-sizing: border-box;
	background: #ebebeb;
	border: 1px solid #cccccc;
	border-width: 1px 0;
}

#painting img {
	width: 100%;
	max-height: 100vh;
	object-fit: contain;
}

/* magnifying glass icon */
.zoom {
	position: relative;
	display: inline-block;
}

.zoom:after {
	content:'';
	display:block;
	width:33px;
	height:33px;
	position:absolute;
	top:0;
	right:0;
	background:url(/images/icon.png);
}

#title {
	padding: 2rem 10%;
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	display: flex;
}

#title h1 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2rem;
	letter-spacing: 2px;
	margin-right: 2rem;
	line-height: 1em;
	border: none;
	padding: 0;
}

#title p {
	padding: 0;
}

#newsLink {
	background: #ebebeb;
}

#content.news h2 {
	padding: .25rem 2rem;
	font-weight: bold;
}

#content.news h2 span {
	display: block;
	font-weight: normal;
}

#content.news #images img {
	width: 100%;
}

.newsItem {
	height: auto;
	overflow: hidden;
}

#content .newsItem:first-of-type h2 {
	border-top: 0;
}

@media only screen and (min-width: 750px){
	#wrapper {
		display: grid;
		grid-template-areas:
			". . ."
			"header content ."
			"footer footer .";
		grid-template-columns: minmax(25%, 10rem) minmax(60%, 60rem) 1fr;
		grid-template-rows: 3rem auto 10rem;
		height: 100%;
	}

	#header {
		grid-column: 1 / -1;
		position: relative;
		display: grid;
		grid-template-columns: minmax(25%, 10rem) minmax(60%, 60rem) 1fr;
		grid-template-rows: 3rem 8rem 1fr;
		grid-template-areas:
			". newsLink ."
			"logo . ."
			"menu . ."
	}

	#logo {
		grid-area: logo;
	}

	#menuToggle {
		display: none;
	}

	#menu {
		display: block;
		grid-area: menu;
		z-index: 1;
		background: #ffffff;
		font-size: 1.3rem;
	}

	#menu ul li {
		text-align: left;
	}

	#newsLink {
		border-right: 1px solid #cccccc;
	}

	#content {
		grid-area: content;
		border: 1px solid #cccccc;
		border-width: 0 1px;
	}

	#content h1 {
		position: relative;
		height: 8rem;
		padding: 0 4rem;
	}

	#content figure {
		max-width: 50%;
		margin-left: 1rem;
	}

	#content figure .caption {
		padding: .5rem 0;
	}

	#artworknavWrapper {
		border-top: 1px solid #cccccc;
	}

	#content.news h2 {
		padding: .25rem 4rem;
	}

	#content.news #images {
		width: 40%;
		margin: 0 0 1rem 2rem;
		float: right;
	}

	#content.news .images img {
		width: 100%;
	}

	.fancybox__slide {
		padding: 4rem 8rem 2rem 8rem;
	}
}
