/* 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');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
/*main css*/

* {
  box-sizing: border-box;
}

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

/*video {
  aspect-ratio: auto 600 / 300;
  height: 300px;
}

video {
  object-fit: contain;
  overflow-clip-margin: content-box;
  overflow: clip;
}*/

audio {
  display: block;
}



/*link style*/

a {
  text-decoration: none;
  color: brown;
}

a:visited {
  color: brown;
}

a:hover, a:active {
  color: grey;
}

.linkleft {
  text-align: left;
}

.linkright {
  text-align: right;
}

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

h1 {
  font-family: 'Cursive';
  text-align: center;
  font-size: 2em;

}

h2 {
  font-family: 'Open Sans', sans-serif; 
    text-align: center;
} 

h3 {
  font-family: 'Lato', sans-serif;
  text-align: center;
  font-size: 1em;
  color: black;
  }

.lastsentence {
  font-size: 1.5em;
  font-family: Brush Script MT, Brush Script Std, cursive;
  color: black;
}


.box {
   background-color: #F2E6DE;
   width: 50%;
   padding: 35px 55px;
   margin-left: 25%;
   margin-top: 200px;
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   font-size: 1em;
   font-family: 'Open Sans', sans-serif;
}

.background {
   position: sticky;
   top: 0px;
   width: 100%;
   height: 100vh;
   z-index: -3;
}

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

.all {
   width: 100%;
   background-color: pink;
   overflow-x: hidden;
}

.title5 {
  width: 100%;
  color:  #008080;
  text-align: center;
  padding: 3% 10%;
}

.title5 h1 {
  font-size: 6.5em;
  margin-bottom: -4px;
}

.title5 h2 {
  font-size: 4em;
}

.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.*/
}

.title1 {
  position: absolute;
  width: 100%;
  top: 20%;
  color: white;
  text-align: center;
  padding: 3%;
}

.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: grey;
  text-align: center;
  padding: 3% 10%;
  margin-bottom: 3%;
}

.bigletter::first-letter {
  font-size: 200%;
  color: #50be50;
}

.title2 h1 {
  font-size: 4em;
  margin-bottom: -4px;
  font-family: 'Cursive';
/*  color: #476930;*/
}

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

.title2 h3 {
 /* margin-top: 10%;*/
  margin-bottom: 0;
  font-size: 1.1em;
  font-style: italic;
  color: #233a40;
}

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

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

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

.pullquote {
  width: 50%;
  font-size: 1.2em;
  line-height: 1.6em;
  font-style: italic;
  text-align: left;
  color: #50be50;


}

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

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


}

.pullquote.left {
    color: #50be50;
}

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

.pullquote.right {
    color: #50be50;
}

.sidepic {
  width: 60%;
}


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

.sidecap {
  margin-top: 0px;
  font-size:  0.9em;
  text-align: center;
  color: green;
  line-height: 1.3em;

}

.sectionhead {
  text-align: center;
  color: grey;
  font-size: 2.5em;
  font-family: 'Cursive';
}

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

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

.photocaption {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding-left: 1%;
  color: tan;
  font-family: cursive: 'Cursive';
  background-color: rgba(0,0,0,0.4);
}

element.style {
  display: none;
}

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

.gridpic {
  position: relative;
}

.gridpic .photocaption {
/*  display: none;*/
  font-color: white;

}

.cycle-slideshow {
  max-width: 700px;
  margin: 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: 800px;
  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;
}

/*.voxpop h1 {
color: #933c08;
font-weight: bolder;
}
*/

.voxgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

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

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

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

}

.popup {
  cursor: pointer;
}

.popup2 {
  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(63, 117, 60, 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: #F2E6DE;
  color: #4B4545;
  padding: 1%;
  text-align: right;
}

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

.lastline {

/*color: green;*/

}


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

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

.pad {
    width: 25px;
    height: 27px;
    background-color: #baa295;
    -webkit-border-radius: 63px 63px 63px 63px / 108px     108px 72px 72px;
    border-radius: 50%  50%  50%  50%  / 60%   60%         40%  40%;
    display: block;
    position: absolute;
}       
.large {
   width: 70px;
   height: 80px;
   transform: rotate(80deg);
   left: 100px;
   top: 50px;
} 
.small-1 {
   transform: rotate(50deg);
   left: 145px;
   top: 28px;
}
.small-2 {
   transform: rotate(65deg);
   left: 174px;
   top: 50px;
}  
.small-3 {
   transform: rotate(98deg);
   position: absolute;
   left: 178px;
   top: 87px;
}
.small-4 {
   transform: rotate(140deg);
   position: absolute;
   left: 158px;
   top: 117px;
}
    
/* position and animate */
    
.paw-print-1 {
  opacity: 50%;
  position: absolute;
  left: 75px;
  top: 300px;
  transform: rotate(-40deg);
  -webkit-animation: walk 3s linear infinite;
  animation: /*keyframe*/walk /*duration*/3s /*transition*/linear /*repeat*/infinite;
}
.paw-print-2 {
  opacity: 0;
  position: absolute;
  left: 275px;
  top: 280px;
  transform: rotate(-5deg); 
  -webkit-animation: walk 3s linear infinite 0.25s;
  animation: walk 3s linear infinite /*delay*/0.25s;
}
.paw-print-3 {
  opacity: 0;
  position: absolute;
  left: 375px;
  top: 130px;
  transform: rotate(-10deg); 
  -webkit-animation: walk 3s linear infinite 0.5s;
  animation: walk 3s linear infinite 0.5s;
}     
.paw-print-4 {
  opacity: 0;
  position: absolute;
  left: 575px;
  top: 280px;
  transform: rotate(-20deg); 
  -webkit-animation: walk 3s linear infinite 0.75s;
  animation: walk 3s linear infinite 0.75s;
}    
.paw-print-5 {
  opacity: 0;
  position: absolute;
  left: 725px;
  top: 50px;
  transform: rotate(10deg); 
  -webkit-animation: walk 3s linear infinite 1s;
  animation: walk 3s linear infinite 1s;
}   
.paw-print-6 {
  opacity: 0;
  position: absolute;
  left: 875px;
  top: 200px;
  transform: rotate(10deg); 
  -webkit-animation: walk 3s linear infinite 1.25s;
  animation: walk 3s linear infinite 1.25s;
}   
.paw-print-7 {
  opacity: 0;
  position: absolute;
  left: 1075px;
  top: 50px;
  transform: rotate(20deg); 
  -webkit-animation: walk 3s linear infinite 1.5s;
  animation: walk 3s linear infinite 1.5s;
}   
.paw-print-8 {
  opacity: 0;
  position: absolute;
  left: 1150px;
  top: 250px;
  transform: rotate(10deg); 
  -webkit-animation: walk 3s linear infinite 1.75s;
  animation: walk 3s linear infinite 10s;
}

#thumbwrap {
  position:relative;
}
.thumb span { 
  position:absolute;
  visibility:hidden;
}
.thumb:hover, .thumb:hover span { 
  visibility:visible;
  top:0;
  left:100px; 
  z-index:1;
}

.youtube {
  max-width: 800px;
  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%;
}
    
/* walking effect animation keyframes */
    
@-webkit-keyframes walk {
  25%  {opacity: 1;}
  100% {opacity: 0;}
}
    
@keyframes walk {
  /* appear */
  25%  {opacity: 1;}
  /* disappear */
  100% {opacity: 0;}
}

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

}

 /* HOVER STYLES */
 
 div#pop-up {
   display: none;
   position: absolute;
   width: 500px;
   padding: 10px;
   background: #eeeeee;
   color: #000000;
   border: 1px solid #1a1a1a;
   font-size: 100%;
   font-family: 'Cursive';
 }

 div.hover_container
{
    width: 600px; /* set a fixed width */
    height: 600px; /* set a fixed height */
}
div.hover_container .text
{
    display: block; /* shown as a block-type element by default, visible */
    width: 600px; /* same width as container */
    height: 600px; /* same height as container */
}
div.hover_container .image
{
    display: none; /* hidden by default */
    width: 600px; /* same width as container */
    height: 600px; /* same height as container */
}
div.hover_container .img img
{
    width: 600px; /* width of the image */
    height: 600px; /* height of the image */
}

div.hover_container:hover .text
{
    display: none; /* hidden when hovering the container */
}
div.hover_container:hover .image
{
    display: block; /* shown when hovering the container */
}


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

  .pullquote {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
 
  }

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

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

  .popup {
    margin-bottom: 15px;
  }

   .popup2 {
    margin-bottom: 15px;
  }

/*  .popup .sidecap {
    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: 1.5em;
  }

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

  .title2 h3 {
    font-size: 1em;
  }
  .sectionhead {
    font-size: 1.5em;
  }
  .maintext {
    font-size: 5em;
    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;
  }
  .sidecap {
    font-size: .5em;
    display: block;
  }

  .photogrid {
    display: flex;
    flex-direction: column;
  }
}