@charset "UTF-8";
@import url("../../../../fast.fonts.com/t/1-apiType=css&projectid=0048fab4-c359-42ad-82e8-09a1dc9f67f8.css");

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Lusitana:400,700|Prata);


header,
hgroup,
main,
nav {
  display: block; }


/**
 * Address styling not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0;
  word-wrap: break-word;}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  color: #ccc; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  
  color: #ccc; }

ul 
{
list-style:none;}
/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap; }

/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }


img {
  border: 0;
  }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }


@font-face {
  font-family: "UniversLight";
  src: url("../fonts/2b61512c-069e-4111-bb23-9a918f94a74d-.eot#iefix");
  src: url("../fonts/2b61512c-069e-4111-bb23-9a918f94a74d-.eot#iefix") format("eot"), url("../fonts/ecf89914-1896-43f6-a0a0-fe733d1db6e7.woff") format("woff"), url("../fonts/7628f343-8c36-4707-9559-8feb86c0462f.ttf") format("truetype"), url("../fonts/11b816e7-d678-48dd-bc75-560de9c19049.svg#11b816e7-d678-48dd-bc75-560de9c19049") format("svg"); }

@font-face {
  font-family: "UniversLightItalic";
  src: url("../fonts/63bd7ad7-ab01-47e6-8cba-e2298391f89b-.eot#iefix");
  src: url("../fonts/63bd7ad7-ab01-47e6-8cba-e2298391f89b-.eot#iefix") format("eot"), url("../fonts/e77f713a-7f78-4d74-b299-5ca4242176b9.woff") format("woff"), url("../fonts/90e56276-5fa2-4640-be25-8f42f40e4e8b.ttf") format("truetype"), url("../fonts/ffbd82f1-3d16-4dfc-8a55-df71c332b658.svg#ffbd82f1-3d16-4dfc-8a55-df71c332b658") format("svg"); }

@font-face {
  font-family: "UniversItalic";
  src: url("../fonts/783e01cd-5eb8-41d7-a380-a18673f2983b-.eot#iefix");
  src: url("../fonts/783e01cd-5eb8-41d7-a380-a18673f2983b-.eot#iefix") format("eot"), url("../fonts/90c17e08-290d-4eba-ab33-77c81c1f559d.woff") format("woff"), url("../fonts/d93b9eab-632d-4aaf-b7fa-5c17060d62fc.ttf") format("truetype"), url("../fonts/caa7a31a-310f-4020-8311-89816a31472f.svg#caa7a31a-310f-4020-8311-89816a31472f") format("svg"); }

@font-face {
  font-family: "UniversRoman";
  src: url("../fonts/b5c30ea8-0700-4fd2-aa12-cc45074693a9-.eot#iefix");
  src: url("../fonts/b5c30ea8-0700-4fd2-aa12-cc45074693a9-.eot#iefix") format("eot"), url("../fonts/7b95cb9a-a288-4405-97a0-13095f56a903.woff") format("woff"), url("../fonts/c7481806-4ea4-40db-a623-7bc352bbbe43.ttf") format("truetype"), url("../fonts/ac8280da-3de5-456d-bd77-8f01665452a9.svg#ac8280da-3de5-456d-bd77-8f01665452a9") format("svg"); }

@font-face {
  font-family: "UniversBold";
  src: url("../fonts/db1c462f-8890-4a11-9de5-36872279e20a-.eot#iefix");
  src: url("../fonts/db1c462f-8890-4a11-9de5-36872279e20a-.eot#iefix") format("eot"), url("../fonts/b993da84-c1f6-474a-8f00-8aa797b3de8f.woff") format("woff"), url("../fonts/58403ef6-4c15-4280-b4b6-9acf50804f4f.ttf") format("truetype"), url("../fonts/9178e351-95c5-4913-9eeb-fd0645a18c2d.svg#9178e351-95c5-4913-9eeb-fd0645a18c2d") format("svg"); }

@font-face {
  font-family: "UniversBoldItalic";
  src: url("../fonts/1e70cef5-4838-4826-a99f-e182b86fe21d-.eot#iefix");
  src: url("../fonts/1e70cef5-4838-4826-a99f-e182b86fe21d-.eot#iefix") format("eot"), url("../fonts/322d336b-2d02-42f6-a24f-200c98b82a7c.woff") format("woff"), url("../fonts/32ed3859-e789-4a3f-96fd-b67231f1929f.ttf") format("truetype"), url("../fonts/6d63e0ba-5ef0-4803-9fbe-686603f3771d.svg#6d63e0ba-5ef0-4803-9fbe-686603f3771d") format("svg"); }


/* IMPORT VARIABLES */
/* IMPORT HELPERS */
/* BOLD & ITALIC FONT */
b, strong {
  font-family: UniversBold;
  font-weight: normal; }

i {
  font-family: UniversLightItalic;
  font-style: normal; }


/* CLEAR A TAGS */
a {
  text-decoration: none;
  color: inherit; }


/* LAST ELEMENT IN ROW */
.last {
  margin-right: 0 !important;
  }

/* IFRAME */
iframe {
  border: 0; }



/* CLEAR FLOATS */
/* CLEAR EXTRA MARGIN FOR INLINE-BLOCK ELEMENTS */
header, .gallery .thumbnails, .exhibitions, .contact .boxes, #overlay, footer {
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0; }

/* IMPORT MIXINS */
/*
 *
 * MAIN STYLES
 *
 */
HTML, BODY {
  font-family: 'Lusitana', sans-serif;
  min-height: 100%;
  height: 100%;
  min-width: 1040px;
  color: black;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
   }
  

/* MAIN CONTAINER */
.container {
  position: relative;
  width: 1040px;
  margin: 0 auto;
  padding-bottom: 40px;}


@media all and (max-width: 768px) {
    .container { width: 768px; }
	HTML, BODY { max-width: 768px;}
	.statement { max-width: 768px;}
	
}

@media all and (max-width: 480px) {
    .container { width: 480px; }
	HTML, BODY { max-width: 480px;}
	.statement { max-width: 480px;}


}

  
  
  
#artist_content IMG { opacity:0;}

#artistContentImageThumb IMG { opacity:0; }

.container2 {
	position: relative;
	width: 940px;
	margin: 0 auto;
	height: 20px;
}

/* MAIN HEADER */
header {
  z-index: 3; 
  padding-bottom: 80px; }
  header .logo {
	float:left;
    font-size: 18px;
    letter-spacing: .125em;
    color: #000;
    margin-top: 28px;
    display: inline-block; }
  header nav {
    float: right;
    font-size: 16px;
    text-align: right;
    margin-top: 28px;
	display: inline-block;
	}
    header nav a {
      padding-bottom: 5px;
	  vertical-align: bottom;
      margin-right: 21px; }
      header nav a:hover {
		color: #ccc;
		}
		
/* CONTACT */
.boxes {
  margin-top: 40px; }
  .boxes .box {
    width: 660px;
    vertical-align: top;
    margin-right: 200px;
    display: inline-block; 
	flaot: left;
	}
    .boxes .box .title {
      font-size: 14px;
      text-transform: uppercase;
      margin-bottom: 7px; }
     .boxes .box .text {
      font-size: 13px;
      line-height: 20px;
      color: #000;
      margin: 0;
	  padding: 0;
	  }
	  .statement {
	  font-size: 13px;
      color: #666666;
	  height: auto;	  
	}
	  

	.contact a:hover {
		color: #ccc; }
	  
	 .narrowbox {
		width:200px;
		font-size: 13px;
     	line-height: 20px;
		vertical-align: top;
    	margin-right: 10px;
    	display: inline-block; 
		margin-right: 50px;
		float:left;
	}
		.contact .narrowbox .title {
		  font-size: 14px;
		  text-transform: uppercase;
		  margin-bottom: 7px;
		  }

.date {
	font-weight:bold;
	display:inline-block;
	text-align: right;
	
	}
	
.event {
	display:inline;
	text-align:left;
	padding-left: 10px;
	width: 400px;
	}



/* FOOTER */
footer {
  background-color: white;
  border-top: 1px solid black;
  min-width: 1100px;
  margin: 0 auto;	
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  footer.home {
    margin-top: -6px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;}
  footer .copy {
    font-size: 12px;
	color: #000;
    width: 100%;
    vertical-align: middle;
	text-align:left;
    display: inline-block; }

  .clear{
      clear: both;
  }
  .homepage_cont{
      z-index: 3;
  }
  
  .back a {
        font-size: 14px;
        color: #666666;
        position: absolute;
        right: 0;
        top: 140px;
        z-index: 9999;
  }
 
   
#statement {
	 margin-top: 12px;
	 }

#workCaption{
    float: left;
    width: 100%;
}


#prevWork {
	width: 30px;
	height: 30px;
	background:url('../img/prev.gif')  0px 4px no-repeat;
	cursor: pointer;
	float: left;
	margin-right: 3px; 
	margin-bottom: .6em;
}

#prevWork:hover {
	background:url('../img/prev_over.gif')  0px 4px no-repeat;
	cursor: pointer;
}

#nextWork {
	width: 30px;
	height: 30px;
	background:url('../img/next.gif')  0px 4px no-repeat;
	cursor: pointer;
	float: left;
	margin-left: 3px; 
	margin-bottom: .6em;
}

#nextWork:hover {
	background:url('../img/next_over.gif')  0px 4px no-repeat;
	cursor: pointer;
}

#artistPagination {
	color: #000;
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: .6em;
}

#artistViewAsThumbnails {
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#artistViewAsSlideshow {
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#viewThumbs, #viewList {
	float: left;
	font-size: .68em;
	line-height: 1.2em;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-right: 1.5em;
	cursor: pointer;
}

#thumbs {
	margin-top: 40px;
	margin-bottom: 40px;
}

.artistsThumbnails {
	font-size: .8em;
	margin-bottom: 1.5em;
	margin-right: 2.6%;
	float: left;
	min-width: 125px;
	width: 17.9%;
}

.artistsThumbnails IMG {
	width: 100%;
}

.artistsThumbnails:nth-child(5n+5) {  
  margin-right: 0;
}

.artistsThumbnails IMG {display: block; margin-bottom: .5em;}


#artist_content {
	margin-top: 35px;
	margin-right:0px;
	
}


#artist_content IMG { opacity: 0; }

#artistContentImageThumbs IMG { opacity: 0; }


#artistSubNav {
	float: left;
	width: 30%;
}

#pairingSubNav {
	width: 100%;
}

.imageCaption {
	float: left;
	width: 100%;
}
#artistContentImage {
	width: 70%;
	height: 800px;
	float: left;
	padding: 0px 0px 20px 0px;
	text-align: center;
}

#artistWideImage {
	width: 100%;
	height: 500px;
	margin: auto;
	padding: 0px 0px 20px 0px;
	text-align: left;
}


.artistWorkImageDetail { 
	height: 100%; 
	float:left; 
}



.artistWorkImageDetail IMG.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.artistWorkImageDetail IMG.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

#subNavBorder { }

ul#subNav {
	padding: 0; 
	margin-top: .5em;
	width: 100%;
	margin-bottom: 2em;
}

ul#subNav li {
	list-style:none;
	color: #666;
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 1.4em;
}

ul#subNav li a { color: #000;}
ul#subNav li a:hover { color: #ccc;}
ul#subNav li a.selected { color: #000000; }


#slider { width: 100%; height: 474px; overflow: hidden; float:left; }
/* This CSS is needed for the fading transition */
ul#slider { margin: 0; padding: 0; } 
ul#slider li { list-style:none; }

ul#slider .panel { opacity: 0; margin: 0; }
ul#slider .panel.activePage { opacity: 1; } /* make sure active panel is visible */
.walkImage {cursor: pointer;}
.caption { display: none; }
.caption P { margin: 0px; }
.pageNum { display: none; }
iframe { background-color: #ffffff; }



#content IMG { opacity: 0; }

#content H1 {
	color: #000;
	font-size: 1.2em;
	line-height: 2em;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 35px;
}


#slider { width: 100%; height: 800px; overflow: hidden; float:left; }
/* This CSS is needed for the fading transition */
ul#slider { margin: 0; padding: 0;float:left;  } 
ul#slider li { list-style:none; float:left; }

ul#slider .panel { opacity: 0; margin: 0; }
ul#slider .panel.activePage { opacity: 1; } /* make sure active panel is visible */
.walkImage {cursor: pointer;}
.caption { display: none; }
.caption P { margin: 0px; }
.pageNum { display: none; }
iframe { background-color: #ffffff; }


#artistContentImageThumbs {
	width: 70%;
	float: right;
	text-align: right;
}

.artistContentImageThumbnail {
	display:inline-block;
	margin: 0px;
	width: 200px;
	height: 200px;
}

.artistContentImageThumbWrap {
	width: 200px;
	height: 200px;
	display:table-cell; 
	text-align: center;
	vertical-align: middle;
}

.artistContentImageThumbnail:nth-child(3n+3) {  
  	margin-right: 0;
}

#prevNextWork {
	height: 80%;
	width: auto;
	cursor: pointer;
	position: absolute;
	top: -4px;
	right: 0;
}


/* COLORS =============================================================================  */
.000Black {color: #000;}
.666Gray {color: #666;}


/* LINKS =============================================================================  */

a { 
	color: #ccc2;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-decoration: none;
}

a:focus { 
	outline : thin dotted; 
	color : rgb(0,0,0); 
}

a:hover, a:active { 
	outline : 0;
	color : #ccc;
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}



@media only screen and (max-device-width: 994px) {
	.artistContentImageThumbnail:nth-child(3n+3) { margin-right: 30px; }
	.artistContentImageThumbnail:nth-child(2n+2) { margin-right: 0px; }
	
	
}

@media only screen and (max-device-width: 774px) {

	.artistsThumbnails:nth-child(5n+5) { margin-right: 2.6%; }
	.artistsThumbnails:nth-child(4n+4) { margin-right: 0; }
	
	
	HTML, BODY{
		  width: 774px;
	}
	
	
	.container {
		  width: 774px;
		  margin: 0;
		  padding: 10px;
		  height: 100%;
		  }
		  
	 .container2 {
		width: 774px;
		margin: 0 auto;
		padding: 10px;
		float: left;
		display: block;
		height: 100%;
		}
		
		header {
		  display: block;
		  padding: 0px;
		  margin: 0px;
		  width: 100%;
		  }
		  header .logo {
			display: block; 
			width: 100%;
			margin: 0px;
			padding: 0px;
			}
		  header nav {
			display: block;
			float: left;
			padding: 0px;
			margin-top: 0px;
			width: 100%;
			}
			header nav a {
			  display: block; 
			  float: left;
			  padding: 0px;
			  margin: 10px 20px 20px 0px;
			  }
		 
	
	#artist_content {
		margin: 0px;
		display: block;
	
	}
	
	#artistContentImage {
		width: 400px;
		height: 400px;
		display: block;
	}
	
	#artistSubNav {
		display: block;
		margin-top: 12px;
		margin-left: 12px;
		}	
		
		
	
	#artistViewAsThumbnails {
		visibility:hidden;
	}
	  
	 footer {
	  padding:0px;
	 }

	

.contact .boxes {
  margin-top: 40px;
  display: block; 
  padding: 10px 0px 10px 0px; 
  width: 100%;
	}
  .contact .boxes .box {
    width: 100%;
    vertical-align: top;
    margin-right: 200px;
    display: inline-block; 
	flaot: left;
	}
    .contact .boxes .box .title {
      margin-bottom: 7px; 
	  }
    .contact .boxes .box .text {
      color: #666666;
      margin: 0px;
	  padding: 0px; }
	  
	.contact .narrowbox {
		width: 100%;
		font-size: 13px;
    	display: inline-block; 
		margin-right: 110px;
	}
	
	.contact .narrowbox .title {
		font-size: 14px;
		text-transform: uppercase;
		margin-bottom: 7px;
	}
		  
	.contact .narrowbox .text {
		margin-bottom: 14px;
		width: 100%;
		color: #666666;
		
	}
	
	
	  
	
}


@media only screen and (max-width: 768px) {
	.container, .container2 { width: 768px; }
		
	HTML, BODY{
		  width: 100%;
	}
}


@media only screen and (max-width: 648px) {	
	.container, .container2 { width: 648px; }
	
	HTML, BODY{
		   width: 100%;
	}
}



@media only screen and (max-width: 480px) {
  .container, .container2 { width: 480px; }
  
  #artistContentImage {
		width: 400px;
		height: 400px;
	}
	
	HTML, BODY{
		 width: 100%;
	}
	
	.active {
		border-bottom: none;
		color:#555555;
	}
  	
}


@media only screen and (max-width: 320px) {
   .container, .container2 { width: 320px; }
   
   #artistContentImage {
		width: 300px;
		height: 300px;
	}
	

	HTML, BODY{
		   width: 100%;
	}	
		header {
		  display: block;
		  padding: 0px;
		  margin: 0px;
		  width: 100%;
		  }
		  header .logo {
			display: block; 
			width: 100%;
			margin: 0px;
			padding: 0px;
			}
		  header nav {
			display: block;
			float: left;
			padding: 0px;
			margin: 0px;
			width: 100%;
			}
			header nav a {
			  display: block; 
			  width: 100%;
			  float: left;
			  text-align:left;
			  padding: 0px;
			  margin: 10px 20px 20px 0px;
			 
			  }
}