@charset 'UTF-8';

html,
html * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
background-image:-webkit-linear-gradient(bottom left, rgba(7,156,175,1.00) 0%, rgba(57,57,57,1.00) 100%);
background-image:-o-linear-gradient(bottom left, rgba(7,156,175,1.00) 0%, rgba(57,57,57,1.00) 100%);
background-image:linear-gradient(to top right, rgba(7,156,175,1.00) 0%, rgba(57,57,57,1.00) 100%);
  
}
.site-nav {
  position: relative;
  float: right;
  z-index: 500;
  top: 0;
  left: 0;
  display: block !important;
  width: 100%;
  padding: 0.5em;
  opacity: .95;
}
.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;
}

body {
  font-family: arial, sans-serif;
  font-size: 1vw; 
  background: #393939;
  color: #FFF;
}

img {
  width: 100%;
  max-width: 100%;
  /*height: auto;*/
  vertical-align: middle;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}
a, a:visited {
    color: inherit;
}

.site-logo img {
  position: relative;
  display: block;
  float: left;
  width: 5.5em;
  z-index: 100;
  top: -1.5em;
  left: 1em;
}

.hero {
  position: relative;
  height:5vw;
}
.hero-content {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  position: absolute;
  padding-top: 3.5em;
  width: 100%;
  text-align: center;
}
h1 {
	text-transform: uppercase;
  	text-align: center;
  	text-shadow: 0px 0px 10px rgba(0, 0, 0,.05);
  	letter-spacing: .2em;
  	margin-left: .7em;  
  	margin-right: .7em;
  	font-size: 3.5vw;
}
h2 {
	font-weight: 100;
	font-size: 0.9em;
    line-height: 2.0;
  	margin-left: 1.8em;  
	margin-right: 1.8em;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}
h3 {
  margin-top: 1.5em;
  color: goldenrod;
  font-size: 1.0em;
  font-weight: 100;
  line-height: 2.0;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}

/* SPACER SECTION */

.space figure {
	position: relative;
	height: auto;
}

/* INTRO SECTION */

.intro {
  position: relative;
  text-align: center;
}

.intro-title {
  font-family: sans-serif;
  font-size: 2.0em;
  font-weight: 100;
  letter-spacing: .36em;
  text-transform: uppercase;
  line-height: 1.5;
  padding-top: 1em;
}

.intro-image {
	padding: 1em 20em 3em 20em;
}
.intro-download {
	padding: 1em 40em 1em 40em;
}

/* ARTWORK SECTION */

.artwork {
  position: relative;
  text-align: center;
}

.artwork-title {
  font-family: sans-serif;
  font-size:2.0em;
  font-weight: 100;
  letter-spacing: .36em;
  text-transform: uppercase;
  line-height: 1.5;
	padding-top: 1em;
}

.artwork-image {
  padding: 2% 25% 2% 25%;
}

	/* Hide the images by default */
	.mySlides1 {
	  display: none;
	  text-align: center;
	}
	.mySlides2 {
	  display: none;
	  text-align: center;
	}
	.mySlides3 {
	  display: none;
	  text-align: center;
	}
	.mySlides4 {
	  display: none;
	  text-align: center;
	}

	/* Next & previous buttons */
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 25%;
	  padding: 16px;
	  font-weight: bold;
	  font-size: 25px;
	  transition: 1s ease;
	  border-radius: 0 3px 3px 0;
	  user-select: none;
	}

	/* Position the "next button" to the right */
	.next {
	  right: 0;
	}

	.prev {
	  left: 0;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  background-color: rgba(0,0,0,0.8);
	}

	/* The dots/bullets/indicators */
	.dot {
	  cursor: pointer;
	  height: 3px;
	  width: 3px;
	  margin: 0 2px;
	  background-color: #FFF;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #717171;
	}

.artwork-description {
	display: grid;
	margin-right: 5em;
	margin-left: 5em;
  	grid-template-columns: auto auto;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.artwork-button {
  width: 100%;
  border: solid;
  border-color: #545454;
  border-width: 1px;
  background-color: Transparent;
  color: #FFF;
  font-family: sans-serif;
  font-size: 1.2em;
  font-weight: 100;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.5;
}

.artwork-button:hover {
  background-color: goldenrod;
  color: #FFF;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

footer {
  margin-top: 0em;
  padding-top: 1em;
  background-image:-moz-linear-gradient( -45deg, rgba(7,156,175,1.00) 0%, rgba(57,57,57,1.00) 100%);
  background-image: -webkit-linear-gradient( -45deg, rgba(7,156,175,1.00) 0%, rgba(57,57,57,1.00) 100%);
  background-image: -ms-linear-gradient( -45deg, rgba(7,156,175,1.00) 0%, rgba(57,57,57,1.00) 100%);
}
.footer-content {
  width: 70%;
  margin: 0 auto;
  padding-bottom:1.7em;
  text-align: center;
}
.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 {
  background: #FFF;
}
.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 {
  clear: both;
  padding-top: 5em;
}
.footer-info p {
  font-size: 1em;
  line-height: 1.55;
  max-width: 36em;
  margin-bottom: 1.7em;
}
.footer-disclaimer {
  width: 60%;
  position: relative;
}
.footer-credit {
  float: right;
  width: 40%;
  text-align: right;
  position: relative;
}
.footer-legal {
  padding-top: 1em;
  opacity: .8;
}
.footer-credit a:hover {
  text-decoration: none;
}