@font-face {
  font-family: 'wick-mono';
  src: url('fonts/wick-mono.eot');
  src: url('fonts/wick-mono.woff') format('woff'),
       url('fonts/wick-mono.ttf') format('truetype'),
       url('fonts/wick-mono.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'wick-mono';
  src: url('fonts/wick-mono-italic.eot');
  src: url('fonts/wick-mono-italic.woff') format('woff'),
       url('fonts/wick-mono-italic.ttf') format('truetype'),
       url('fonts/wick-mono-italic.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'wick';
  src: url('fonts/wick-italic.eot');
  src: url('fonts/wick-italic.woff') format('woff'),
       url('fonts/wick-italic.ttf') format('truetype'),
       url('fonts/wick-italic.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'wick';
  src: url('fonts/wick-regular.eot');
  src: url('fonts/wick-regular.woff') format('woff'),
       url('fonts/wick-regular.ttf') format('truetype'),
       url('fonts/wick-regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}


/* Resets */
/* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://yuilibrary.com/license/ */
html{}body,img,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}span {text-decoration: none;}
figure {margin: 0; padding: 0;}
html {height: 100%;}

/* Global */
body {font-family: "wick", Arial, sans-serif; height:100%; font-size: 100%; line-height: 1.25em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;color: rgb(0,0,0);}
h1, h2, h3, h4 {text-transform: uppercase;}
a {text-decoration: none; color: rgb(0,0,255);}

.clear, footer:after, footer:before, section#info:after, section.info h4:before {content: "";visibility: hidden;display: block;height: 0;clear: both;}

#container {max-width: 90%;}

em {font-style: italic;}

header { margin-top:2.25em;margin-bottom:2em; text-align: center;}

header a h1 {text-decoration: none; color: rgb(0,0,0);font-size:150%; line-height: 1.25em;}
header a:hover h1 {color: rgb(255,75,75);}

#container {width:1000px; margin: 0 auto;}
img {width:100%; height: auto;}

section {}
section a {color: rgb(0,0,0); margin-bottom:3.5em; display: block;}
section a:hover {color: rgb(75,75,255);}
section a h1 {font-size:110%; line-height: 1.1em; margin-top:0.75rem;}
section a h2, section a h3 {font-size:75%; font-family: "wick-mono"; width:50%;}
section a h2 {float: left;}
section a h3 {float: right; text-align: right; color: rgb(0,0,0);}
section a h3 span.upcoming {color: rgb(225,225,0);}
section a h3 span.current {color: rgb(0,200,0);-webkit-animation: color-change 1s infinite;-moz-animation: color-change 1s infinite;-o-animation: color-change 1s infinite;-ms-animation: color-change 1s infinite;animation: color-change 1s infinite;}
section a h3 span.past {color: rgb(200,0,0);}

@-webkit-keyframes color-change { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
@-moz-keyframes color-change { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
@-ms-keyframes color-change { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
@-o-keyframes color-change { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
@keyframes color-change { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}


/* Landing */

  /*1
  {color: rgb(235,180,40);}*/
  section a#skin-like-a-salamander:hover {color: rgb(235,180,40) !important;}
  
  /*2
  {color: rgb(10,80,20);}*/
  section a#adams-puryear:hover {color: rgb(10,80,20);}

  /* 3
  {color: linear-gradient(to right, rgb(245,0,136), rgb(19,0,223));}*/
  section a#kat-chamberlin:hover {color: rgb(245,0,136);}
  section a#kat-chamberlin:hover h1, section a#kat-chamberlin:hover h2 {background: -webkit-linear-gradient(left,rgb(245,0,136), rgb(19,0,223)); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}

  /* 4 
  {color: rgb(76,60,37);}*/
  section a#tack-and-hide:hover {color: rgb(76,60,37);}

  /* 5
  {color: rgb(201, 192, 187);} light skin
  {color: rgb(181, 172, 168);} dark skin
  {color: rgb(150, 150, 150);} light gray
  {color: rgb(130, 130, 130);} dark gray
  */
  section a#veils-of-myth:hover {color: rgb(181, 172, 168);}

  /* 6
  {color: #909090;}
  */
  section a#of-ash-and-ice:hover {color: #909090;}

body#landing section img {padding:2rem 10%; background: #000;box-sizing: border-box;} 


/* Exhibitions */
#exhibition section.hero {width: 100%; background: #000; padding:2rem 0;}
#exhibition section.hero div {height: 400px; text-align: center;}
#exhibition section.hero img {width:auto; height: 100%;}

#exhibition section.info, #exhibition section.installation, #exhibition section.works {margin:3em 0 0;}

#exhibition section h1 {font-size:110%; line-height: 1.1em; margin-top:0.75rem;}
#exhibition section h2, #exhibition section h3 {font-size:75%; font-family: "wick-mono"; width:50%; line-height: 1.25em;}
#exhibition section h2 {float: left; margin-bottom: 3em;}
#exhibition section h3 {float: right; text-align: right; color: rgb(0,0,0);}
#exhibition section h3 span.upcoming {color: rgb(225,225,0);}
#exhibition section h3 span.current {color: rgb(0,200,0);-webkit-animation: color-change 1s infinite;-moz-animation: color-change 1s infinite;-o-animation: color-change 1s infinite;-ms-animation: color-change 1s infinite;animation: color-change 1s infinite;}
#exhibition section h3 span.past {color: rgb(200,0,0);}
#exhibition section h4 {font-size:75%; font-family: "wick-mono"; line-height: 1.25em; text-transform: uppercase;text-transform: uppercase; margin: 0 0 2em;}

#exhibition section p {font-family: "wick-mono"; font-size:75%; line-height: 1.25em; padding-bottom: 1em;}

#exhibition section.info article.left {float:left; width:48%; }
#exhibition section.info article.right {float:right; width:48%; }
#exhibition section.info a {margin-bottom: none;}

#exhibition section.installation img {padding-bottom: 1em;}
#exhibition section.installation article.left {float: left; width:48%;}
#exhibition section.installation article.right {float: right; width:48%;}

#exhibition section.works article {padding-bottom:2em;}
#exhibition section.works article img {padding-bottom: 0.75em;}
#exhibition section.works article.left {float: left; width:48%;}
#exhibition section.works article.right {float: right; width:48%;}
#exhibition section.works article h4 {margin: 0;}



/* global footer */
footer {padding-top:2rem; padding-bottom: 4rem; text-transform: uppercase; font-size:75%; line-height: 1.45em;}
footer a {color: rgb(0,0,0); font-family: "wick-mono";}
footer a:hover {color: rgb(75,75,255);}

footer div {width: 50%; float:left;}
footer div p {width: 50%; float: left;}

figure img {width: 100%; min-height: 4rem;}
  figure:hover {cursor: crosshair;}
  figure img.rollover {display: block;}
  figure img.hover {position: absolute; display: none; max-width: 90%; width: 1000px; height: auto;}
  figure:hover img.rollover, figure:active img.rollover {display: block;}
  figure:hover img.hover, figure:active img.hover {display: block;}

/* exhibition specific tweaks */
body.tack-and-hide {background: rgb(201, 192, 187);}
  body.tack-and-hide header a h1 {color: rgb(255, 255, 255);}
  body.tack-and-hide header a:hover h1 {color: 0, 0, 0;}
  body.tack-and-hide .info {color: rgb(130, 130, 130);}
  body.tack-and-hide footer {color: rgb(130, 130, 130);}
  body.tack-and-hide footer a {color: rgb(130, 130, 130);}
  body.tack-and-hide footer a:hover {color: rgb(255, 255, 255);}
  body.tack-and-hide #exhibition section h3 {color: rgb(130, 130, 130);}
  body.tack-and-hide #exhibition section h3 span.current {color: rgb(0,200,0);-webkit-animation: color-change-tack 1s infinite;-moz-animation: color-change-tack 1s infinite;-o-animation: color-change-tack 1s infinite;-ms-animation: color-change-tack 1s infinite;animation: color-change-tack 1s infinite;}
    @-webkit-keyframes color-change-tack { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
    @-moz-keyframes color-change-tack { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
    @-ms-keyframes color-change-tack { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
    @-o-keyframes color-change-tack { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}
    @keyframes color-change-tack { 0% { color: rgb(0,200,0); } 50% { color: rgb(201, 192, 187); } 100% { color: rgb(0,200,0); }}

body.of-ash-and-ice {
  background: #909090;
  background-image: url('images/wick-exhibitions-06-background-300x300.jpg');
  background-repeat: repeat;
  background-size: 150px 150px;
  color: rgb(255,255,255);
}
body.of-ash-and-ice section.info, body.of-ash-and-ice section.installation, body.of-ash-and-ice section.works {color: #fff;}
body.of-ash-and-ice section.info a {color: #fff; text-decoration: underline; display: inline; margin-bottom: none; }
body.of-ash-and-ice section.info a:hover {text-decoration: none;}
body.of-ash-and-ice footer {color: #000;}
body.of-ash-and-ice section h3 {color: rgb(255,255,255) !important;}

@media only screen and (max-width: 700px) {
#exhibition section.hero div {height: auto; text-align: center;width: 90%; margin: 0 auto;}
#exhibition section.hero img {width:100%; height: auto;}
}

@media only screen and (max-width: 500px) {
  #exhibition section.info {margin:2em 0 0;}
  footer {padding-bottom: 2rem;}
  footer div p {width: 100%; float: none;}
  header {margin-top:1.15em;margin-bottom:1em; }
  #footer-right {text-align: right;}
  #exhibition section.info article.left, #exhibition section.info article.right, #exhibition section.works article.left, #exhibition section.works article.right, #exhibition section.installation article.left, #exhibition section.installation article.right {float:none; width:100%; }
}