/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

/*@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Roboto&display=swap');
*/
* {
  box-sizing: border-box;
}

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

body, html {
  font-family: 'Lato', sans-serif; 
}

h1, h2, h3, .pullquote {
  font-family: 'Open Sans', sans-serif;
}

.nav {
  position:  fixed;
  top:  0; /*remove this if you want different*/
  background-color: rgba(255,255,255,0.5);
  border:  2px solid black;
  padding:  5px 20px;
}

.nav a {
  text-decoration:  none;
  color:  black;
}

.home {
  left: 0;
  /*top: 0;*/
}

.continue {
  right: 0;
  /*bottom:  0;*/
}



/*INDEX*/

.overlay::before {
  content: " ";
  z-index: 0;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
}

.overlay {
  position:  fixed;
  width:  100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 3;
}

.overlay video {
  width:  100%;
  /*height: 100vh;*/
  display: block;
}

.start {
  position:  absolute;
  top: 40%;
  left: 38%;
  width: 20%;
  padding: 5px;
  color: white;
  border: 2px solid white;
  text-align: center;
  cursor: pointer;
  margin: 0 auto;
  text-transform: uppercase;
}

.start p {
  font-size:  20px;
}

.start:hover {
  background: rgba(255,255,255,0.2);
}

.hidden {
  display: none;
}

.package {
  width:  100%;
}

.package video {
  width:  100%;
  /*height:  100vh;*/
}

/*video {display: inline-block;
}


button, 
html[type="button"], 
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


button, select {
  text-transform: none;
}

button, input {
  overflow: visible;
}

button, input, select, textarea {
  font: inherit;
}

* {
  box-sizing: border-box;
}*/


/*.video-header {
background color: black;
filter: brightness(.75);
position: relative;
text-align: center;
z-index: -1
}

.subhead {
  position: absolute;
  width: 1000px;
  height: auto;
  left: 50%;
  margin-left: -500px;
  top: 57.5%;
  z-index: 1;
  overflow: visible;
  animation: invisible 15s;
}

.subhead h2{
  color: aquamarine;
   font-size:2vw;
   font-style: italic;
}

.scrolldown {
  position: absolute;
  width: 200px;
  height: auto;
  left: 50%;
  margin-left: -100px;
  top: 80%;
  z-index: 1;
  overflow: visible;
  animation: invisible 14s;
}

.scrolldown h5{
   font-size:1em;
}

.scrolldown h3{
   font-size:1.5em;
   margin-top: -30px;
   animation: pulse 2.5s ease infinite alternate;
   animation-delay: 13s;
}*/
/*
.overlay {
  position:  relative;
  width:  100%;
}

.overlay video {
  width:  100%;
}

.start {
  position:  absolute;
  top:  30%;
  margin:  auto;
  width:  30%;
  color:  white;
  border:  2px solid white;
  text-align:  center;
  cursor:  pointer;
}*/



/*.overlay {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-height:100vh;
  background color: pink;
  z-index: 10;
}*/

/*.overlay video {
  width: 100%
  top: 0;
  left: 0;
  /* object-fit: cover */
/*  position: absolute;
}*/

/*.start {
  width: 30%;
  height: 50%;
  margin:auto;*/
/*  margin-left: 35%;
  margin-top: 18%;*/
/*  background-color: transparent;
  border: 0px;
  position: absolute;
  cursor: pointer;
  border: 2px solid white;
color: white;*/
/*padding: 12px;
}*/



/*.start img {
  width: 100%;
  margin: auto;
  margin-bottom: 5%;
  cursor: pointer;
}*/

/*.guidepeeps {
border: 2px solid white;
color: white;
padding: 12px
z-index: 200;
font-weight: 700;
text-align: center;
display: inline;
text-transform: uppercase;
cursor: pointer;
}*/

/*.continue {
  background-color: white;
  color: black;
  padding: 12px;
  z-index: 200;
  position: absolute;
  top: 30px;
  right: 50px;
  cursor: pointer;
  display: none;
  font-weight: 700;
  text-align: center;
}

.letswatch video {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  object-fit: cover;
}*/


/*MAINTEXT*/


header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
  background-color: black;
  /*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: 0.6;
}*/

.headline-container {
border-bottom: 1px solid black;
position: relative;
scroll-behavior: smooth;
}

.title1 h1 {
  font-size: 5.1em;
  margin-bottom: -4px;
}

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

.title1 h3 {
  margin-top: 10%;
  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;
}

.arrow {
  cursor: pointer;
  width: 8%;
  position: absolute;
  top: 65%;
  left: 66.5%;
  animation: bounce .8s infinite; /*change the s value for speed*/
}

/*.arrow a {
  border:  2px solid red;
  width: 500px;
}*/

.arrow img {
  width:  100%;
}

@keyframes bounce {
  0% {transform:  translateY(0);}
  50% {transform:  translateY(-25px);} /*the distance of the bounce*/
  1-0% {transform:  translateY(0);}
}

.content {
  width: 100%;
  background-color: white;
  overflow-x: hidden;
}


.maintext {
  /*max-width: 640px;*/
  margin: auto;
  color: darkslategray;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
  /*padding: 1%;*/
  background-color:  azure;
}

.maintext p {
  margin:  0 33%;
  padding:  1%;
  border-left:  2px solid pink;
  border-right:  2px solid pink;
  background-color:  white;
}

.gallery h2 {
  text-align:  center;
  width:  100%;
}


.glossary p {
  border:  none;
  margin:  0;
}

.cup {
  color: black;
  text-align: center;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0pt;
}

.pullquote {
  width: 50%;
  font-size: 1.4em;
  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;
}

.sectionhead {
  text-align: center;
  color: darkslategray;
}

.bigphoto {
  position: relative;
  height: 530px;
}

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

.photocaption {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding-left: 1%;
  color: white;
  background-color: rgba(0,0,0,0.4);
}

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

.gridpic {
  position: relative;
}

.gridpic .photocaption {
  display: none;
}

.maintext {
  border-left:  2px solid pink;
  border-right:  2px solid pink;
}

.glossary {
  float:  right;
  width: 25%;
  margin-right:  4%;
}

.teresa {
  float:  left;
  width: 28%;
  margin-left:  2%;
}


.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
  padding: 1% 12.75%;
  background-color: hotpink;
}


.flip-card-front img {
  height: 300px;
  width: 300px;
}

/* flipcard */

.flip-card {
    width: 300px;
    height: 300px;
    margin: 10px;
    perspective: 1000px;
}


.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition:  transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width:  100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black; /*if you want text on the front*/
}

.flip-card-back {
  color: white;
  transform: rotateY(180deg);
}


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

.cycle-slideshow img {
  width: 100%;
  height: auto;
}

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

.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: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 5px;
}

.person {
  border-radius: 5px;
  box-shadow: 2px 3px 3px lightslategrey;
  overflow: hidden;
}

.person audio {
  width: 100%;
}

.headshot {
  position: relative;
  text-align: center;

}

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


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



/*media query for responsive design */


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

  .pullquote {
    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;
  }

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

  .voxgrid {
    grid-template-columns: 50% 50%;
  }

  .person audio {
    background-color: black;  
  }

}