/* 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;
	}
}
/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next,
  .owl-carousel button.owl-dot {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item {
  /**
			This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
			calculation of the height of the owl-item that breaks page layouts
		 */ }
  .owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity 400ms ease; }
  .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
    max-height: 0; }
  .owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }


#header {
	background: #ebebeb;
}

#slideshowWrapper {
	grid-area: slideshow;
	height: 66vw;
	border: 1px solid #cccccc;
	border-width: 1px 0 0 1px;
	z-index: 0;
}

#slideshow img {
	width: 100%;
}

#news {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}

.date {
	text-transform: uppercase;
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	font-weight: bold;
	padding: 1em 2rem .5rem 2rem;
	margin: 0;
}

.newsItem {
	height: 100%;
	border-bottom: 1px solid #cccccc;
}

.newsItem:last-child {
	border: none;
}

.newsItem h2 {
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	padding: .5rem 2rem;
}

.newsItem p {
	padding: .5rem 2rem;
}

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

	#header {
		grid-area: header;
		position: relative;
		display: grid;
		grid-template-columns: minmax(25vw, 10rem) minmax(60vw, 60rem);
		grid-template-rows: 3rem 14vw 10rem 1fr;
		height: 42vw;
		overflow: hidden;
		border: 1px solid #cccccc;
		border-width: 0 1px 1px 0;
	}

	#logo {
		grid-column: 1;
		grid-row: 3;
	}

	#menuToggle {
		display: none;
	}

	#menu {
		display: block;
		grid-column: 2;
		grid-row: 3;
		z-index: 1;
		background: rgba(255, 255, 255, .93);
	}

	#menu ul {
		display: flex;
		justify-content: center;
		height: 100%;
		align-items: center;
	}

	#menu li {
		align-items: center;
		text-align: center;
		font-size: 1.7vw;
		line-height: 1.2em;
		padding: 0;
		margin: 0;
		height: 100%;
	}

	#menu a {
		padding: 0 .7vw;
		height: 100%;
		display: inline-flex;
		align-items: center;
	}

	#slideshowWrapper {
		grid-column: 2;
		grid-row: 2 / 4;
		width: 100%;
	}

	#news {
		grid-area: content;
		border-right: 1px solid #cccccc;
	}

	.newsItem {
		display: grid;
		grid-template-columns: minmax(25vw, 10rem) minmax(60vw, 60rem);
		grid-template-rows: minmax(0, 4rem) 1fr;
		grid-template-areas:
			"date heading"
			"date content";
	}

	.newsItem .date {
		grid-area: date;
		text-align: right;
		height: 100%;
		box-sizing: border-box;
	}

	.newsItem h2 {
		grid-area: heading;
		border-left: 1px solid #cccccc;
	}

	.newsContent {
		border-left: 1px solid #cccccc;
	}
}