@charset 'UTF-8';

html,
html * {
  box-sizing: 25%;
  margin: 0;
  padding: 2px;
  text-align: center;
  z-index: 1;
   
}

body {
  font-family: arial, sans-serif;
  font-size: 1vw;
  background-color: #D9D0B1;
    height: 100%;
}
img {
  width: 15%;
  max-width: 100%;
  height: auto;
  vertical-align: center;
  horizontal-align: center;
    z-index: 0;
    
}
.hover-link {
    position: relative;
    padding: 10px 20px;
    font-size: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hover-link::after {
    font-size: 60%;
    content: var(--after-content);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: pre-wrap;
           /* background-image: var(--after-image);
            background-size: cover; */
    background-color: #333;
    color: #fff;
    padding: 11px 11px;
    border-radius: 6px;
    margin-top: 10px;
    pointer-events: none;
     
}

.hover-link:hover {
   
    color: white;
}

.hover-link:hover::after {
    opacity: 1;
}

a, a:visited {
    color: inherit;
}
header {
  position: inherit;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
    font-size: 2em;
    
  
}

h2 {
	font-weight: 950;
	font-size: 2em;
    line-height: 1.2;
	margin-bottom: -.15em;
	padding-top: 01%;
	color:#218AE7;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(12, 12, 0,.2);
}
h1 {
  margin-bottom: 1.5%;
 margin-top: 2.5%;
  text-transform: uppercase;
  text-shadow: 12px 0px 10px rgba(0, 0, 0,.25);
  letter-spacing: .125em;
  margin-left: 0;
  font-size: 2.5em;
}
h3 {
    font-size: 3.5em;
    font-weight: 2100;
    line-height: 01;
    letter-spacing: .35em;
    text-transform: uppercase;
    text-shadow: 012px 0px 8px rgba(0, 0, 0,.2);
    color: #0D0E0D;
    text-align: center;
}
h4 {
  background-color: none;
  font-size: 1.5em;
  font-weight: 1300;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #218AE7;
}
h13 {
     background-color: none;
  font-size: 3.5em;
  font-weight:950;
  line-height: 1em;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #0D0E0D;
    padding-bottom: 220px;
    
}

footer {
 z-index: 0;
margin-top: 0;
  padding-top: 5em;
    position: bottom;
  background-image:-moz-linear-gradient( -45deg, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
  background-image: -webkit-linear-gradient( -45deg, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
  background-image: -ms-linear-gradient( -45deg, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
}
.site-logo {
  
  z-index: 2;
  float: left;
  width: 55px;
    height:55px;
  color: #663C3D;
}



.Gradient_Fill_1 {
  background-image: url("Gradient Fill 1.png");
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1366px;
  height: 1768px;
  z-index: 2;
}

.logo {
  opacity: 1;
    align-content: center;
    resize: both;
    
    
}
.site-nav {
  
  float: center;
  display:block;
  width:100;
  height: 60%;
  z-index: 1;
  padding: 0 0 0 0;
  opacity: .95;
  background:#D9D0B1;
  font-size: 450%;
  text-align:center;

}
.site-nav ul {
  list-style-type: none;
  margin: 0;
  text-align: right;
}
.site-nav ul li a:hover {
    outline: none;
    color:#218AE7;
}
.site-nav ul li {
  display:block;
  margin-bottom: 0;
  margin-left: 1.5em;
    padding: .5em
}
.site-nav ul li a {
  font-size: 1.3em;
  padding-bottom: .15em;
  text-decoration: none;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #8B0808;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.woodstock-site-nav ul li {
        float: right;
    padding: 0px 25px 0px 0px;
    display: block;
    font-size: 250%; 
    color:#BD4507}


.site-nav3 ul li {
	
  z-index: -1;
  top: 0;
  left: 0;
  display:block!important;
  width: 80%;
  padding: 1em 24 22 500;
  opacity: 110;
  margin-bottom: 0px;
  background:#FDFDFD;
text-align: center;

}

.hero {
  position: top;
  height:29em;
  font-size: 295%;
  background-color: #D9D0B1;
  padding: 0px 0px 0px 0px;
  z-index: 0;
        

}


.hero_woodproducts { 
	padding: 20em, 10em, 10em, 10em;
    background-color: #D9D0B1;
	z-index: 2; 
    text-align:center;
    font-size: 300%; 
    color: #BD4507;
    float: center;
}
.hero-content {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  color: #BD4507;
  position: top;
  z-index: 0;
  padding-top:5px ;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: inherit;
    background-color: #D9D0B1;
}

.intro {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  color: #BD4507;
  width: 100%;

    
}
	
.intro-text {
  position: right;
	padding-left: 25%;
	padding-right: 5%;
    float: right;
    color: #BD4507
		
}
.intro p {
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'sans-serif;
  font-size: 5.5em;
  line-height: 1.8;
  position: relative;
  z-index: 200;
  text-align: center;
  letter-spacing: .325em;
  text-transform: uppercase;
}

.artworks {
    position: relative;
    width: 100%;
    overflow: hidden;
	
}
.artwork {
  	padding: 10px;
    width:55%;
    height:80%;
	float:center;
    z-index:0;
}

.artwork2 {
  	padding: 50px;
    width:35%;
    height:50%;
	float: center;
    z-index:0;
}
.artworks .artwork-piece {
  
    width: 1400%;
    height: 1010%;
  
}
.artwork-piece figure {
  position: static;
}
.artwork-piece figure img {
  position: sticky;
  
}
.artworks .artwork-description {
  background: #523;
  color: #D9D0B1;
  width: 50%;
  padding: 121px 10px;
}
.artwork-title {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-size: 3em;
  font-weight: 100;
  padding: 2em 0 0 0;
  letter-spacing: .36em;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 9em;
  margin-bottom: .5em;
}
.artwork-text {
  font-size: 1.1em;
  line-height: 1.9;
  opacity: 1.8;
  max-width: 20em;
	color:#218AE7;
}

.see-more {
  font-size: 1em;
  display: inline-block;
  margin-top: 4.1em;
  padding: 0 0 .4em 0;
  transition: all .3s;
  text-decoration: none;
}
.see-more:hover {
  border-bottom: 1px solid white;
}

.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: #fff;
  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: .8em;
  color:#fff;
  line-height: 1.55;
  max-width: 36em;
  margin-bottom: 1.7em;
}
.footer-disclaimer {
  width: 60%;
  position: relative;
}
.footer-credit {
  float: right;
  width: 100%;
  text-align: right;
  position: relative;
  background-color: #E9C81A
}

	
.footer-legal {
  opacity: .8;
}
.footer-credit a:hover {
  text-decoration: none;
}

.row {
	height: 2in;
	
}

.table {
    text-align: right;
    position:middle;
	background-color: #D9D0B1;
	z-index: 0; 
    font-size: 300%;
    font-display: block;
    color: #BD4507;
    float: center;
    padding: 17px;
    border-width: 3px;
    border-color: #090808;
    table-layout: auto;
     table-width: 100%;
      border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #0B0B0BC5;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
    
        

 .table img
{   width: 100%;
    height: 100%;
    max-width: 500%;
    max-height: 100%;
    padding: 0;
    
}
/* Tablet view */

    
 	/*Desktop View*/

@media (min-width: 850px){
   
    footer {
        height: 50%;
        font:12%;
        
    
    }
    body {
    height: 25%;    
  font-family: arial, sans-serif;
  font-size: 1vw;
  background-color: #D9D0B1;
    ;    
    }
    
    .hero_woodproducts {
        font-size: 150%;
    }
        
    .site-logo {
        float: left;
        z-index: 100;
    }
    
    .site-nav ul li {
       float:middle;
        display:block;
        font-size: 65%;
    }
    header {
  position: inherit;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  
}.hero {
  position: top;
  height: 25em;
    font-size: 295%;
  background-color: #D9D0B1;
    
     
    }
.woodstock-site-nav {
        font-size: 145%; 
}
    
    .artwork{
      height:   150px;
        width: 250px;
        
        
    }
table {border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.4rem;
  letter-spacing: 1px;}

caption {
  caption-side: bottom;
  padding: 5px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}
}


@media (min-width: 992px) {
  .hero {
    height: 2.5vw;
  }
  .hero-leadin {
    margin-bottom: -1.5%;
    padding-top: 5.5%;
    letter-spacing: .36em;
  }
  .hero-leadin span {
    display: inline;
  }
  .hero-title {
    margin-bottom: 0;
    letter-spacing: .65em;
    margin-left: .61em;
    font-size: 20.4vw;
  }
  .hero-date span {
    display: inline;
  }
  .hero-arrow {
    bottom: 2%;
    width: .6em;
    margin-left: -.3em;
  }
    
    .hero {
  position: top;
  height: 17em;
    font-size: 295%;
  background-color: #D9D0B1;
    
     
    }
    
    .site-nav {
  
  float: center;
  display:block;
  width:100;
  height: 60%;
  z-index: 1;
  padding: 0 0 0 0;
  opacity: .95;
  background:#D9D0B1;
  font-size: 250%;
  text-align:center;

}
.hover-link {
    position: relative;
    padding: 10px 20px;
    font-size: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
  .intro {
    padding: 0em 0em em;
  }
  .intro-date {
    left: 4.8em;
  }
  .intro-text {
    width: 20%;
    max-width: 20em;
  }
  .intro-text:before {
    top: -2em;
    right: 12.25%;
    height: 1.5em;
  }
  #stamp {
    bottom: 74px;
    right: 4em;
    width: 7em;
  }

  .artwork {
    display: flex;
      width: 5%;
      height: 5%;
  }
    .artwork2 {
  	padding: 50px;
    width:15%;
    height:30%;
	float: center;
    z-index:0;
}
  .artwork-piece {
    width: 10%;
  }
  .artwork-piece figure figcaption {
    width: 21%;
    padding: 1.2em 2em;
  }
  .artwork-description {
    width: 50%;
    padding: 11.25em 10em 11.5em;
    text-align: left;
  }
  .artwork-description p {
    max-width: 20em;
  }
  .artwork-artistImage {
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 1.9em;
  }
  .artwork-title {
    line-height: 1.5;
    max-width: 9em;
    margin-bottom: .5em;
  }
  .seeMore {
    margin-top: 3.86em;
  }
  .artwork-3 .artwork-piece {
    padding: 8% 0 8% 23.5%;
  }
  .artwork-3 .artwork-description {
    background: #26223e;
  }
  footer {
    margin-top: -3.5em;
    padding-top: 10em;
  }
  .footer-content {
    width: 64%;
  }

  .footer-subscribe {
    width: 33%;
  }
  .footer-info p {
    max-width: 36em;
  }
}