/*This is the master section...these settings will apply to mobile screens and all others where overrides are not specified*/

html {
  height: 100%;
  width: 100%;
}

body {
  /* background-image: url('images/vault_bw1.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-size: 100%; */
  background-color: black;  
}

h1 {
  color: #E2D0AC;
  font-family: helvetica, sans-serif;
  position: relative;
  font-size: 3.0vh;
  left: 2vw;
  top: 3.5vh;
  width: 90vw;
  display: inline-block;
  
 }
 
 main {
  position: relative;	
  height: auto;
  background-color: #303030;
  opacity: 0.9;
  top: 2vh;
  color: white;
  font-family: tahoma, sans-serif;
  margin: auto;
  width: 90vw; 
  /*z-index: -1;*/
}
 
 h2{
  position: relative;
  font-size: 5vw;
  text-align: left;
  padding-left: 6vw;
 }

.header-intro{
  font-family: verdana, arial, sans-serif;
  color: white;
  position: relative;
  left: 2vw;
  top: 5vh;
  font-size: 3vw;
}

.header-social-links {
  position: relative;
  display: inline;
  width: 55vw;
  left: 250px;
  top: 0px;
  
}

.header-social-links img{ width: 36px; height: 36px; }

.header-social-links a{
  margin-right: 8px;
}

.nav-container{
  width: 100%;
  height: 10vh;
  background-color: white;
  opacity: 0.5;
 }

.nav-container.responsive{ /*must set opacity to full so menu will display clearly when hamburger is clicked*/
	opacity: 1.0;	
}

nav {
  height: 100%;
  border-style: solid;
}

.topnav { /*the div tag*/
  overflow: hidden;
 }

.topnav a{
  display: none;
  position: relative;
  color: black;
  font-family: tahoma, sans-serif;
  text-decoration: none;
  text-align: center;
  font-size: 2.5vh;
  width: 21vw;
  
}

.topnav .icon {
  display: block;
  font-size: 4vh;
  padding: 2vh 0vw;
}

.topnav.responsive { /*this is the div tag*/
  position: relative;
  height: 28vh;
  
}

.topnav.responsive .icon {
  position: absolute;
  left: 0.0vw;
  top: 1.3vh;
}
.topnav.responsive a {
  display: block;
  background-color: white;
  opacity: 1.0;
  padding: 0.75vh 0vw;
  top: 2vh;
  left: 17vw;
  z-index: 1;
}

#img-logo{
  position: relative;
  width: 220px;
  height: 220px;
  top: -132px;
  left: 200px;
  margin-left: 0px;  
}

section {
  position: relative;
  padding-bottom: 9vh;
}

#img-index-1 {
  width: 80vw;
  height: auto;
  margin-left: 1vw;
  margin-right: 2vw;
  /* float: left; */
}

#img-index-1-credit {
	  font-size: 1.5vh;
	  padding-left: 50vw;
  }

/* #index-video-1{
	width: 70vw;
	height: 20vh;
	margin-left: 1vw;
	margin-right: 2vw;
} */

#img-index-2{
	position: relative;
	width: 70vw;
	height: auto;
	margin: 2vw;
}

#img-index-3{
	position: relative;
	width: 33vw;
	height: auto;
	margin: 2vw;
}

#img-index-4{
	position: relative;
	width: 33vw;
	height: auto;
	margin: 2vw;
}

#img-index-5{
	position: relative;
	width: 30vw;
	height: auto;
	margin: 2vw;
	float: right;
}

#img-about-1 {
  width: 80vw;
  height: auto;
  margin-left: 1vw;
  margin-right: 2vw;
  /* float: left; */
}

#img-about-2 {
  position: relative;
  /*width: 300px;*/
  width: auto;
  height: 50vh;
  margin: 6px;	
}

#img-about-3 {
  position: relative;
  /*width: 300px;*/
  width: auto;
  height: 50vh;
  margin: 6px;
}

#video-index-1{
  width: 80vw;
  height: auto;
  margin-left: 1vw;
  margin-right: 2vw;

}

#unmute-btn-index{
  position: relative;
  top: -16vh;
  
}

#index-hero-overlay{
  position: relative;
  top: -12vh;
  text-align: center;
  font-size: clamp(10px, 4vw, 40px);
  color: #E2D0AC;
}

#index-main-text{
	position: relative;
	top: -17vh;
}

article{
  position: relative;
  width: 83vw;
  font-family: helvetica, sans-serif;
  font-size: 2vh;
  margin-left: 5vw;
}


article a{
  text-decoration: none;
  
}

article a:link{
  color: #E2D0AC;
}

article a:visited{
  color: #E2D0AC;
}

#section-schedule-synopsis a:visited, #section-schedule-synopsis a:link{
	color: #E2D0AC;
}

.home-video{
  position: relative;
  overflow: hidden;
  border-style: none;
  padding: 1vh 8vw;
  margin: 0vh 10vw;
  width: 55vw;
  
}

.performances li{
  font-family: arial, sans-serif;
  position: relative;
  list-style-type: none;
  font-size: 3vh;	
  padding: 0.5vh 0vw;
}


.gallery_image{
  position: relative;
  width: 40vw;
  height: 20vh;
  margin-top: 2vw;
  margin-left: 1vw;
  margin-right: 1vw;
  object-fit: cover;
}

.gallery_desc{
  position: relative;
  font-family: tahoma, sans-serif;
  text-align: center;
}

/*#table-gallery td{
	border: solid;
}*/

footer {
  width: 100%;
  height: 15vh;
  background-color: white;
  opacity: 80%;
    
}

footer ul {
  position: relative;
  width: 40%;
 
}

footer ul li{
  position: relative;
  list-style-type: none;
  width: 50vw;
}

.footer-contact-info{
  font-family: helvetica, sans-serif;
  
}

.footer-copyright{
  font-family: tahoma, sans-serif;
  width: 60vw;
 
}




/*END MASTER SETTINGS SECTION*/

/*SETTINGS BASED ON SCREEN SIZE*/

/*Medium screens*/
@media screen and (min-width: 601px){
  h2 {
    font-size: 2.5vh;
	text-align: left;
	padding-left: 4vw;
  }
  
  main {  
    width: 70vw; 
  }

  .header-intro{
    left: 6vw;
	top: 4vh;
	font-size: 2.5vw;
	
  }


  h1 {
    font-size: 3.25vh;
	width: 58vw;
    left: 6vw;
	top: 2vh;
	
  }
  
  
 .header-social-links {
  width: 55vw;
  left: -0vw;
  top: 2vh;
 
}

.header-social-links img{ width: 36px; height: 36px; }
  
.header-social-links a{
  margin-right: 5px;
}  
  
  .topnav {
    height: 100%;
  }

  .topnav a{
    display: inline-block;
    font-size: 2.5vh;
	height: 5.6vh;
	width: 10vw;
	padding: 2vh 1.2vw;
	margin: 0vh 1vw;

  }
 
  .topnav a:hover{
    background-color: #FCD281;
    color: black;
  }

  .topnav .icon {
    display: none;
  }

  .navlink.selected{
	background-color: #FCD281;
    color: black;
  }

  #img-logo{
    width: 35vw;
    margin-left: 60vw;  
  }
  
  #img-index-1 {
    width: 60vw;
	height: auto;
  }
  
  #index-video-1{
	width: 60vw;
	height: 30vh;
}
  
  #img-index-1-credit {
	  padding-left: 35vw;
  }
  
  #img-index-2{
	width: 53vw;  
  }
  
  #img-index-3{
	width: 25vw;  
  }
  
  #img-index-4{
	width: 25vw;
  }
  
  #img-index-5{
	width: 20vw;
  }
  
  #img-about-1 {
	width: 60vw;
	/* float: left; */
  }
  
  #img-about-2 {
  /*width: 60vw;*/
  
  height: 75vh;
}

#img-about-3 {
  /*width: 360px;*/
  height: 75vh;
}
 
 #video-index-1{
 width: 58vw;
} 
 
#index-hero-overlay{
  top: -17vh;
}	
 
  article{
    width: 60vw;
  }

  .home-video{
    width: 35vw;
	
  }
  
  .performances li{
    font-size: 2.5vw;
    padding-left: 4vw;
    padding-bottom: 2vh;	
  }
  
 .gallery_image{
	height: 20vh;
	width: 32vw;
 }	 
  
  footer {
    margin-top: 5vh;
	
  }
  
  footer ul{
	top: 2.5vh;
    left: 37vw;
  }


  .footer-contact-info{
	font-size: 2vh;
    margin-top: .5vh;	
  }
  
  .footer-copyright{
	  font-size: 2vh;
	  margin: 1vh 0vw;
  }
  
}

/*Large screens*/
@media screen and (min-width: 992px){

  
h2 {
    font-size: 4vh;
	text-align: left;
	padding-left: 4vw;
}
  
.header-intro{
    left: 10vw;
	top: 8vh;
	width: 30vw;
	font-size: 1.8vw;
}

h1 {
    font-size: 5.8vh;
	left: 10vw;
	top: 4vh;
	
}

 .header-social-links {
  left: 11vw;
  top: 4vh;
}  
.header-social-links img{ width: 36px; height: 36px; }

.header-social-links a{
  margin-right: 8px;
}

.topnav a{
	width: 7vw;
    margin: 0vh 5px;
	font-size: 3vh;
  }

  #img-logo{
    width: 17vw;
    margin-left: 75vw;
  }
 

 
 #img-index-1-credit {
	  padding-left: 48vw;
  }
 
 #img-index-2{
	width: 40vw;
    	
  }
 
 #index-video-1{
	 width: 60vw;
	 height: 65vh;
 }
 
 #img-about-1 {
	width: 42vw;
	float: left;
  }
  
   #img-about-2 {
  margin: 20px;
}

#img-about-3 {
  margin: 20px;
}

#video-index-1{
 width: 58vw;
} 
 
.home-video{
    display: inline-block;
	width: 17vw;
	margin-left: 1vw;
	margin-right: 1vw;
	padding: 1vh 2vw;
	
 }
  
 .performances li{
    font-size: 1.7vw;
    	
  }
 
.gallery_image{
	height: 50vh;
 }
 
  footer {
    margin-top: 5vh;
	
  }
  
  footer ul{
	top: 2.5vh;
    left: 37vw;
  }


  .footer-contact-info{
	font-size: 2vh;
    margin-top: .5vh;	
  }
  
  .footer-copyright{
	  font-size: 2vh;
	  margin: 1vh 0vw;
  }
  
}
/******** Weddings Page — CLEAN CONSOLIDATED ********/
body.weddings-page { font-size: 18px; }

/* =============== HERO =============== */
body.weddings-page .wedding-hero{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  overflow: hidden;
  background: #000;
}
body.weddings-page .wedding-hero-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 35%;
}
body.weddings-page .wedding-hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0 4vw;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.5) 100%);
}
body.weddings-page .wedding-hero-overlay h1{
  margin: 0;
  max-width: 1100px;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.15;
  position: relative;
  left: -1.25%;   /* your visual tweak */
  top: -20px;     /* your visual tweak */
}
body.weddings-page .wedding-hero-overlay p{
  margin: 0;
  max-width: 1100px;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.4;
  opacity: .95;
}
body.weddings-page .wedding-hero-overlay .btn,
body.weddings-page .wedding-cta .btn
{
  display: inline-block;
  width: auto;
  max-width: none;
  padding: .9rem 1.4rem;
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
body.weddings-page .wedding-hero-overlay .btn:hover{
  transform: translateY(-1px);
  opacity: .95;
}
@media (max-width: 900px){
  body.weddings-page .wedding-hero{ aspect-ratio: auto; height: 52vh; max-height: none; }
}
@media (max-width: 768px){
  body.weddings-page .wedding-hero{ height: 48vh; }
}

/* Optional: Unmute button */
.unmute-toggle{
  
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 0;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  z-index: 10;
}
.unmute-toggle:hover{ background: rgba(0,0,0,.8); }

#unmute-btn{
	position: absolute;
  bottom: 16px;
  right: 16px;
}

/* =============== SECTION TYPOGRAPHY =============== */
body.weddings-page .section-pad{ padding: 6vh 6vw; }
body.weddings-page .section-title{
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.2;
}
body.weddings-page .section-lead{
  margin-bottom: 2rem;
  color: #d8d8d8;
  font-size: clamp(19px, 2.3vw, 22px);
  line-height: 1.5;
}
body.weddings-page .muted{ color: #bdbdbd; }
body.weddings-page .small{ font-size: .95rem; }

/* =============== WHAT WE PROVIDE (cards) =============== */

body.weddings-page .wedding-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 22px;
  align-items: start;
  /*border: solid;*/
}
body.weddings-page .w-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
  border-radius: 16px;
  color: #eaeaea;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-sizing: border-box;
  width: 18vw;
  left: -24%;
}
body.weddings-page .w-card img{
  display: block;
  width: 100%;
  height: auto;          /* show entire photo by default */
  object-fit: contain;   /* switch to 'cover' if you prefer fill+crops */
  object-position: center;
  background: #111;      /* subtle letterbox when aspect ratios differ */
  border-radius: 12px;
  margin: 0 0 .85rem 0;
}
body.weddings-page .w-card h3{
  margin: .35rem 0 .5rem;
  color: #fff;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.25;
}
body.weddings-page .w-card ul{ margin: 0; padding-left: 1.1rem; }
body.weddings-page .w-card li{
  margin: .3rem 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
}

@media (max-width: 1100px){
  body.weddings-page .wedding-cards{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 700px){
  body.weddings-page .wedding-cards{ 
	grid-template-columns: 2vw; 
	
  }
  
  body.weddings-page .w-card{
	width: 35vw;  
  }
  
}
body.weddings-page .wedding-cards > *{ min-width: 0; min-height: 0; }



/* =============== REPERTOIRE =============== */
body.weddings-page .wedding-repertoire .repertoire-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 2rem;
  color: #eaeaea;
}
@media (max-width: 640px){
  body.weddings-page .wedding-repertoire .repertoire-columns{ grid-template-columns: 1fr; }
}
body.weddings-page .wedding-repertoire ul{
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

/* =============== TESTIMONIALS =============== */
body.weddings-page .wedding-testimonials{ color: #eaeaea; }
body.weddings-page .w-quote{
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
body.weddings-page .w-quote cite{
  display: block;
  margin-top: .25rem;
  color: #cfcfcf;
  font-style: normal;
}

/* =============== FINAL CTA / FOOTER (page-local sizing only) =============== */
body.weddings-page .wedding-cta{ text-align: center; color: #fff; }
body.weddings-page .wedding-cta p{ font-size: clamp(18px, 2.2vw, 22px); }

body.weddings-page .footer-contact-info,
body.weddings-page .footer-copyright{
  font-size: clamp(16px, 1.9vw, 18px);
}