body {
  font-family: "Myriad Pro", "PT Sans", sans-serif; font-size: 1.4em;
  font-stretch: 83%;
  margin: 0px; padding: 0px; background-color: #f9e7dd; color: #371d2a; 
  background-image: url(images/background-gate.png); background-size: auto; background-position: center top;
}
h2 { color: #b96c12; font-family: "Cossette Texte", sans-serif;
font-weight: 700;
font-style: normal;  }
h2.past {text-align: center; padding-top: 50px; }
h3 { color: #a179a1; font-family: "baileywick-jf-gothic", sans-serif;
font-weight: 100;
font-style: normal; text-align: center; font-size: 1.8em; }

*, *:before, *:after { box-sizing: border-box; }
a { text-decoration: none; }

.contentWidth { width: 100%; position: relative; }

#main { padding: 25px 10% 200px 11%; }
.home-body { display: flex;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0+19,1+22 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 500px,rgba(255,255,255,1) 501px,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.home-slant {
	background-position: 20% top; 
	background-size: auto 1200px; background-image: url(images/home-slant.png?v=2); background-repeat: no-repeat; width: 260px;
	}
.home-text { background-color: #FFF; text-align: right; width: calc(100% - 250px); }
.home-padd { padding: 3px 50px 50px 50px; }
.home-padd h2 { font-size: 28px; }
.home-padd p, .inside-padd p { letter-spacing: 1.0px; }
.fancy { font-family: "baileywick-jf-gothic", sans-serif; font-weight: 100; font-style: normal; font-size: 85%;} 
.tagline, h5 {
	text-transform: uppercase; letter-spacing: 3px; font-size: 22px; font-weight: 700; 
	padding: 30px 0 0px; 
	}
header {
	background-color: #412542; background-repeat: no-repeat; background-position: center top; background-size: cover; 
}
.header-inside {padding: 60px 10% 10px; }
.header-text { display: flex; align-items: baseline;  }
.gg-logo { width: 40%; text-align: left; }
.gg-tagline { width: 60%; text-align: right; position: relative; top: -3px; }
.gg-logo img, .gg-tagline img { width: 97%; height: auto; display: block; }
.social { position: absolute; right: 12.5%; top: 40px; }
.social img { width: 55px; height: auto; opacity: .6;}
.social img:hover { opacity: 1.0; }

.glass-brdr {clip-path: polygon(0% 387px, 100% 0%, 100% 100%, 0% 100%); background-color: #000; padding: 12px 3px 2px 3px;
  margin: 22px;  height: calc(100% - 42px); }
.stained-glass { background-position: center top; height: 100%; clip-path: polygon(0% 376px, 100% 0%, 100% 100%, 0% 100%);
}
	
/* Nav */
nav { background-color: #ab7b52; text-align: left; height: 65px; position: relative; margin-top: 20px; }
.nav-inside { padding: 0px 5% 0 8%; position: relative; }
nav a.aboutNav {
	color: #FFF; background-size: auto 65px; 
	background-repeat: no-repeat; background-position: left top; padding: 0 50px; margin-right: 0px; 
	}
nav a.aboutNav.inside {	background-image: url(images/about-bg-trans.png); 	}

nav a.aboutNav span { color: #FFF; }
nav a.aboutNav.inside span { color: #000; }
.logo-floater { position: absolute; left: 8%; top: 65px; padding: 0 0 0 37px; z-index: 99;  }
.logo-floater img { width: auto; height: 189px; }

nav a { position: relative; display: inline-block; }
nav a .trapezoid { background: transparent; clip-path: polygon(0% 0%, 100% 0%, 83% 100%, 17% 100%); position: absolute; width: 100%; height: 65px; top: 0px;  }
nav a span { padding: 21px 40px; text-transform: uppercase; color: #000; line-height: 65px; letter-spacing: 1px;
	font-size: 20px; font-weight: 700; font-family: "baileywick-jf-gothic", sans-serif;
	z-index: 999; position: relative; }
nav a:hover span, nav a.aboutNav.inside:hover span { color: #efe0bd; }
nav a.aboutNav:hover span, nav a.selected span { color: #FFF; }

/* Inside pages */
.inside #main { padding: 25px 11% 200px; }
.inside-body { background-color: #FFF; border: 4px solid #b48e71; }
.inside-padd { padding: 20px 5% 20px 1.5%; }
.inside-padd.wide { padding: 20px 5% 20px 5%; }

/* Contact */
html div.wpforms-container-full:not(:empty) {  margin: 0px auto; }
html div.wpforms-container-full button[type="submit"]  { width: 100%; }
.contact-form-container, .inside-text { display: inline-block; vertical-align: top; text-align: left;}
.inside-text { width: 48%;  }
.contact-form-container {
  width: 45%;
  margin: 20px auto 20px 5%;
  padding: 30px;
  background-color: #fFF;
}

.contact-form-container h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #000;
}

/* Artists */
article { margin-top: 30px; padding-top: 30px; margin-bottom: 30px; padding-bottom: 0px; border-top: 1px solid #d1b87d; }
.aboutBar { display: flex; gap: 30px; text-align: left; }
.aboutBar img { width: 200px; height: auto; }
.aboutBar h4 { margin: 0px; padding: 0px; }
.aboutBar p { padding: 0; margin-top: 10px;}
small { text-align: center; display: block; margin: -30px 0 30px; color: #777; font-size: 65%;  }


/* Footer */
footer { background-position: center top; background-repeat: repeat-x;  }
.green footer { background-color: #24382d; }
.grad-adjust { background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; padding-bottom: 200px; }

.gold-brdr { background-image: url(images/gold-trim.jpg); background-repeat: repeat-x; height: 4px; background-size: auto 4px; }
.logo-box {
	text-align: center; background-repeat: no-repeat;
	background-position: center top; position: relative; top: -69px; background-size: auto 92px; padding-top: 30px;
}
.logo-box.green { background-image: url(images/footer-logo-bg-green.png); }
.logo-box img { width: 230px; height: auto; }
.copyright { color: #b5a17b; text-align: center; font-size: .8em; font-stretch: 90%;}

#mobile-button { display: none; }

/* Mobile Styles */
@media screen and (min-width: 1601px) {
	.contentWidth { width: 1600px; margin: 0 auto; }
	.home-padd h2 { font-size: 34px; }
}
@media screen and (max-width: 1225px) {
  .social img { width: 45px; }
  .home-padd h2 { font-size: 30px; }
  .tagline { font-size: 28px; }
  .grad-adjust { background-size: 1400px auto;}
}
@media screen and (max-width: 925px) {
	 .social img { width: 36px; }
	 header { background-size: cover; }
}
@media screen and (max-width: 888px) {
	.header-inside { padding: 30px 10% 30px; }
	.header-text { display: block; }
	.gg-logo { width: 65%; }
	.gg-tagline { width: 100%; top: 0; padding-top: 20px; text-align: center; }
	.gg-tagline img { margin: 0 auto; }
	.social img { width: 56px; }
	nav a span {}
	.logo-floater, .home-slant { display: none; }
	.home-text { width: auto; text-align: center; }
	.pink .home-text { width: 100%; }
	.home-padd { padding: 3px 4% 50px; }
	.home-text p { text-align: left; }
	#main {padding: 25px 5% 200px;}
	.inside-padd { padding: 20px 5%; }
	nav a.aboutNav.inside:hover { background-image: none; }
	.nav-inside { text-align: center; }
	nav a span { padding: 10px 20px; }
	nav a.aboutNav, nav a.aboutNav.inside { background-image: none; padding: 0; }
	nav .trapezoid { display: none; }
	.contact-form-container, .inside-text { display: block;  width: auto; margin: 0 auto 20px; }
	.grad-adjust {   background-size: 100% auto;  }
}
@media screen and (max-width: 749px) {
	.aboutBar { display: block; text-align: center;}
	.aboutBar p { text-align: left; }
}
@media screen and (max-width: 625px) {
	.nav-inside { padding: 0px 3% ;
}
	nav a span { padding: 5px 12px; font-size: 4.0vw; letter-spacing: 0px;  }
	 .social img { width: 36px; }
	 
}
@media screen and (max-width: 500px) {
	 #mobile-button { display: block; cursor: pointer; padding: 15px;}
	 #mobile-button img { height: 36px; width: auto; }
	 #the-nav { display: none; }
	 #the-nav.show-hide { display:block; }
	 
	 #the-nav { position: absolute; top: 60px; left: 0; width: 100%; z-index: 99; background-color: rgba(0,0,0,.9); }
	 #the-nav a { display: block; }
	 nav a span, nav a.aboutNav.inside span { font-size: 16px; color: #efe0bd; }
	 .social { top: 30px; }
}
@media screen and (max-width: 800px) {
  .aos-item {
    width: 50%;
  }
}