@charset "utf-8";
/* CSS Document */

html,
html * {
	box-sizing: border-box; 
	margin: 0;
	padding: 0; 
}

body {
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: 1vw;
	background: white;
}

header {
	position: fixed;
	padding: 2em; 
	z-index: 1000; 
	top: 0; 
	left: 0;
	width: 100%;
	background: rgba(156,191,161,1);
}
.site-logo {
	position: relative;
	display: block;
	float: left;
	width: 8em;
}
.site-logo img {
	width: 8em;
}
.logo {
	opacity: 1;
}
.site-nav {
	position: relative;
	float: right;
	z-index: 400;
	top: 0;
	left: 0;
	display: block !important;
	width: 80%;
	padding: .75em 1em 0 0;
	opacity: .95;
	background: none;
}
.site-nav ul {
	list-style-type: none;
	margin: 0;
	text-align: right;
}
.site-nav ul li {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 1.5em;
}
.site-nav ul li a {
	font-size: .85em;
	padding-bottom: .5em;
	text-decoration: none;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #fff;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.site-nav ul li a:hover {
	outline: none;
	border-bottom: 1px solid white;
}
h1 {
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 2em;
	letter-spacing: .5em;
	padding-left: 5em;
}

nav {
	z-index: 400;
	top: 0;
	left: 0;
	opacity: .95;
	background: #ffff;
	position: relative;
	display: block !important;
	float: right;
	width: 30%;
	padding: .75em 1em 0 0;
	height: 1.5em; 
}

.hero{
	position: relative;
	height: 30vw; 
	background-color: rgba(156,191,161,1);
}
.hero-content {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	color: #C45656;
	position: absolute;
	z-index: 20000;
	padding-top: 4em;
	top: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}
.hero-content h2 {
	font-weight: 100;
	font-size: 2em;
	line-height: 2.2;
	margin-bottom: -.5em;
	padding-top: 5em;
	letter-spacing: .3em;
	text-transform: uppercase;
	
}
.hero-content h1 {
	color: #9CBABF;
	margin-bottom: 1.5%;
	padding-top: 3%;
	text-shadow: 0px 0px 10px rgba(0, 0, 0,.05);
	margin-left: .7em;
}
.hero-content h3 {
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: 1.5em;
	color: #2D471B;
	font-weight: 200;
	line-height: 2.75;
	letter-spacing: .25em;
	text-transform: lowercase;
	
}

.intro {
  position: relative;
  color: #343144;
  background: #fff;
  height: 18vw;
  padding: 2em 6em 2em 6em;
}
.intro h2 {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	color: #26223e; 
	text-align: justify;
}
.intro p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 1.25em;
	color: ##26223e;
}

.artworks {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.artwork {
  display: flex;
}

.artwork .artwork-piece {
  padding: 5% 0% 5% 16.5%;
  background-image:-moz-linear-gradient( 135deg, rgb(156,186,191) 0%, rgb(191,156,168) 100%);
  background-image: -webkit-linear-gradient( 135deg, rgb(156,186,191) 0%, rgb(191,156,168) 100%);
  background-image: -ms-linear-gradient( 135deg, rgb(156,186,191) 0%, rgb(191,156,168) 100%);
  width: 100%;
}

.artwork-piece figure {
	position: relative;
	float: middle;
	
}
.artwork-piece figure img {
	position: relative;
	float: middle;
	z-index: 100;
}

.artwork .artwork-description {
	background: #26223e;
	color: #ffffff;
	width: 75%;
	padding: 10em 5em 10em 5em;
}
.artwork-description p{
	text-align: left;
	text-indent: hanging; 
}
footer {
  margin-top: -3em;
  padding: 8.75em 0 2em;
  height: 10vw;
  background-image:-moz-linear-gradient( -45deg, rgb(156,191,161) 0%, rgb(156,168,191) 100%);
  background-image: -webkit-linear-gradient( -45deg, rgb(156,191,161) 0%, rgb(156,168,191) 100%);
  background-image: -ms-linear-gradient( -45deg, rgb(156,191,161) 0%, rgb(156,168,191) 100%);
}
.footer-content {
	width: 64%;
	margin: 0 auto;
	padding-bottom:1.7em;
}
.footer-social {
	display: block;
	width: 100%;
	list-style-type: none;
	text-align: center;
}
.footer-social li {
	display: inline-block;
	margin: 0 1.2em;
}
.footer-social li a {
	line-height: 3.5em;
	display: inline-block;
	width: 4em;
	height: 4em;
	text-align: center;
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 50%;
}
.footer-social li a:hover {
	border-color: #150936;
	background: #150936;
}
.footer-social li a img {
	width: auto;
	height: 1em;
}
.footer-social li a .social-hover {
	display: none;
}
.footer-social li a:hover .social-default {
	display: none;
}
.footer-social li a:hover .social-hover {
	display: inline;
}
.footer-info {
	padding-top: 5em;
}
.footer-info p {
	font-size: .8em;
	color:#150936;
	line-height: 1.55;
	max-width: 36em;
	margin-bottom: 1.7em;
}
.footer-info {
	clear: both;
}
.footer-legal {
	opacity: .8;
}
.footer-credit a:hover {
	text-decoration: none;
}
.footer-credit {
	float: right;
	width: 40%;
	position: relative;
}
