/* styles.css 
   Project: 
   Author: 
   Date: 
	
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Raleway&family=Roboto&display=swap');

/*main css*/

* {
  box-sizing: border-box;
}

img, video {
  width: 100%;
  display: block;
}

audio {
  display: block;
}

/*link style*/

a {
  text-decoration: none;
  color: #3A7CA5;
}

a:visited {
  color: #5F7E9C;
}

a:hover, a:active {
  color: #2892D7;
} 

body, html {
  font-family: 'Georgia', serif;
  background-color: #fbfaf8; /* Off-white background */
  overflow-x: hidden;
  margin: 0; 
}
}

h1, h2, h3, .pullquote {
  font-family:'Times New Roman', serif;

}

header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
  background-color: white;
  /*max-height: 600px;*/
}

header img {
  /* this opacity makes the header image dark so you can read the headline text more easily. remove the opacity if you do not have your headline on top of the image.*/
  opacity: 1;
}


.sidebyside {
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch; /* Ensures children have equal height */
}

.sidephoto1 {
  width: 55%;
  flex-shrink: 0;
}

.sidephoto1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidecaption {
  width: 45%;
  flex-shrink: 0;
  display: flex;
  align-items: center; 
  background-color: #fbfaf8 !important;
  color: #000000 !important;
  font-family:'Times New Roman', serif;
  box-sizing: border-box;
  border-left: 1px solid #e0e0e0;
}

.sidephoto1, .sidecaption {
  height: 100vh;
  flex-shrink: 0;
}

.sidephoto1 {
  position: relative; /* Needed for absolute positioning */
  width: 55%;
  flex-shrink: 0;
}

.headcap {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #bfbfbf;
  font-size: 0.8rem;
  padding: 4px 8px;
  font-style: italic;
}

.sidecaption-inner {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidecaption h1 {
  margin-top: 130px; /* Adjust this as needed */
  margin-bottom: 20px; /* Keeps some space before h2 */
  font-size: 1.7em;
  line-height: 1.2;
  font-weight: 700;
  max-width: 100%; /* Ensure it uses all available width */
  width: 100%; /* Stretch to full width */
}

.sidecaption h2 {
  margin: 0px;
  margin-bottom: 15px;
  font-size: 1em;
  line-height: 1.1;
  font-style: italic;
  font-weight: 400;
  max-width: 100%;
}

.sidecaption h3 {
  margin-top: 20px
  margin: 0 0 0;
  font-size: .9em;
  line-height: 1.4;
  font-weight: 400;
}

html {
  scroll-behavior: smooth;
}


.title1 {
  position: absolute;
  width: 75%;
  top: 45%;
  color: white;
  text-align: left;
  padding: 3%;
}

.title1 h1 {
  font-size: 4.1em;
  color: darkslategray;
  margin-bottom: -4px;
}

.title1 h2 {
  font-size: 1.5em;
}

.title1 h3 {
  margin-top: 5%;
  font-size: 1.2em;
  font-style: italic;
}

.title2 {
  width: 100%;
  color: darkslategray;
  text-align: center;
  padding: 3% 10%;
}

.title2 h1 {
  font-size: 4.7em;
  margin-bottom: -4px;
}

.title2 h2 {
  font-size: 2em;
}

.title2 h3 {
  margin-top: 10%;
  margin-bottom: 0;
  font-size: 1.1em;
  font-style: italic;
}

.content {
  width: 100%;
  background-color: #fbfaf8;

}

.maintext {
  max-width: 640px;
  margin: auto;
  color: black;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
  padding: 1%;
}

.pullquote {
  width: 53%;
  font-size: 1em;
  line-height: 1.6em;
  font-style: italic;
  text-align: left;
}

.name {
  font-size: 0.7em;
  text-align: center;
  line-height: 0.1em;
  padding-bottom: 30px;
}

.left {
  float: left;
  padding-right: 20px;
  margin-left: -40px;
}

.right {
  float: right;
  padding-left: 20px;
  margin-right: -40px;
}

.floatingpic {
  width: 50%;
}

.photomiddle {
  max-width: 800px;
  margin: 0 auto;   
  text-align: center; 
}

.photomiddle img {
  width: 100%; 
  height: auto; 
}

.leads {
  border: 2px solid #8c8d8e;
}

.photocaption {
  font-size: 12px; 
  margin-top: 10px; 
}

.floatingpic audio {
  width: 100%;
  margin-top: 5px;
}

.floatingcap {
  margin-top: 0px;
  font-size:  0.7em;
  text-align: center;
  line-height: 1.05;
}

.sectionhead {
  text-align: center;
  color: #000000;
  max-width: 640px;
  margin: auto;
  margin-bottom: -14px;
  margin: 3rem auto 1rem auto;
  padding: 0;
  font-size: 2rem;
  font-weight: bold;
  border: none; 
}


.bigphoto {
  position: relative;
}

  .photocaption {
  flex: 1;
  font-size: 0.8em;
  line-height: 1.5;
}

/*  position: absolute;
  bottom: 0px;
  width: 100%;
  padding-left: 1%;
  color: white;
  background-color: rgba(0,0,0,0);*/
}


.sidebyside {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.photoleft {
    flex-direction: row;
}

.photoright {
    flex-direction: row-reverse;
}

.sidephoto {
  flex: 2;
}

.sidecaption {
  flex: 1;
  background-color: black;
  color: white;
  font-size: 1.2em;
  display: grid;
  align-items: center;
  text-align: center;
  padding: 20px 40px;
}

.enlarged-img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
}

.leads{
  background-color: #f9f9f9;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0 auto;
  padding: 1rem 1rem;
  max-width: 400px ;
}

.leads h1 {
  font-size: 1.3rem; /* Reduced font size for heading */
  text-align: center;
  margin-bottom: 1rem; /* Reduced margin */
  letter-spacing: 1px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem; /* Reduced padding */
}

.leads h2 {
  font-size: 1rem; 
  text-align: center;
  line-height: 1.2;
  letter-spacing: .75px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.7rem;
}

details {
  border-top: 1px solid #ccc;
  padding: .6rem 0;
  cursor: pointer;
}

summary {
  font-size: .7rem;
  font-weight: bold;
  outline: none;
  list-style: none;
}

.leads p {
  font-size: .7rem;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.3s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

p {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

@media (max-width: 600px) {
  body {
    padding: 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  summary {
    font-size: 1rem;
  }
}

.photogrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.gridpic {
  position: relative;
}

.gridpic .photocaption {
  display: none;
}

.cycle-slideshow {
  max-width: 700px;
  margin: auto;
}

.knightlab {
  max-width: 700px;
  margin: auto;
}

.slidewrapper {
  position: relative;
}

.slides {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: -1;
}

.bottomcredit {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px;
  color: white;
}

.backgroundimage {
  height: 100vh;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: -1;
}

.backgroundimage img {
  height: 100%;
  object-fit: cover;
}

.textbox {
  max-width: 640px;
  margin: 100vh auto;
  background-color: white;
  color: darkslategray;  
  padding: 20px;
}

.googlemap {
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  max-width: 700px;
  margin: auto;
}

.googlemap iframe {
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

.youtube {
  max-width: 700px;
  margin: auto;
}

.responsivecontainer {
  position: relative; 
  padding-bottom: 56.25%; 
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}

.responsivecontainer iframe, .responsivecontainer object, .responsivecontainer embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

.clickhere {
  font-style: italic;
  font-size: 0.7em;
  text-align: right;
  padding-right: 1%;
}

.voxpop {
  max-width: 700px;
  margin: auto;
}

.voxgrid {
  display: flex;
  flex-direction: column;
  gap: 70px; /* space between people */
  padding-top: 20px;
}

.person {
  border-radius: 5px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.person audio {
  width: 100%;
  display: block;
}

.headshot {
  flex: 0 0 150px; /* fixed width for all photos */
  max-width: 150px;
  position: relative;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.headshot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

.headshot audio {
  width: 100%;
  margin-top: 8px;
}

.voxcap {
  font-size: .5em;
  line-height: 1;
}

.photocaption p:first-of-type {
  font-weight: bold;
}

.popup {
  cursor: pointer;
}

.infographic {
  max-width: 700px;
  margin: auto;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.mySlides img {
    width: 100%;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* 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);
}

/* Caption text */
.slidetext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dots {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  text-align: center;
}

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

 
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

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


/*footer */

footer {
  background-color: black;
  color: white;
  padding: 1%;
  text-align: right;
  width: 100%;
}

/*popup modal*/

.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: scroll;
  display: none;
  z-index:  10;
}

.modal {
  width: 70%;
  margin: 2% auto;
}

.closer {
  position: absolute;
  right: 1vh;
  top:  1vh;
  width: 10%;
  cursor: pointer;
}

/*media query for responsive design */

@media only screen and (max-width: 900px) {

  .title1 {
    top: 5%;
  }

  .title1 h1 {
    font-size: 3.5em;
  }

  .title1 h2 {
    font-size: 1.5em
  }

  .title1 h3 {
    font-size: 1.1em;
  }

}


@media only screen and (max-width: 800px) {

  .pullquote {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    display: none; /* remove this line if you want the pullquotes to display on mobile*/ 
  }

  .left, .right {
    margin: 0px;
    padding: 10px;
  }

  .floatingpic {
    width:  100%;
    margin: 0px;
    padding:  0px;
  }

  .popup {
    margin-bottom: 15px;
  }

  .popup .floatingcap {
    display: none;
  }  

}


@media only screen and (max-width: 640px) {

  .title1 {
    top: 1%;
  }

  .title1 h1 {
    font-size: 3em;
  }

  .title1 h2 {
    display: none;
  }

  .title1 h3 {
    font-size: 0.9em;
  }

  .title2 h1 {
    font-size: 2em;
  }

  .title2 h2 {
    font-size: 1.3em;
  }

  .title2 h3 {
    font-size: 1em;
  }

  .maintext {
    font-size: 1.4em;
    line-height: 1.6em;
    text-align: left;
    margin: 0px 15px;
  }

  .voxgrid {
    grid-template-columns: 1fr 1fr;
  }

/*  .person audio {
    background-color: black;  
  }
*/
  .modal {
    width: 97%;
    margin: 10% auto;
  }

  .sidebyside {
    display: block;
  }

  .sidecaption {
    font-size: 1em;
    padding: 10px 20px;
  }

  .textbox {
    margin: 100vh 20px;
  }
  #popup-trigger {
  cursor: pointer;
  color: #000;
  font-size: 16px;
  max-width: 800px;
}