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

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/
/*div {
   border: 1px solid hotpink;
}*/

* {
   box-sizing: border-box;
}

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

body {
   background-color: black;
   color: black;
   font-family: 'georgia', sans-serif;
}

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

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

.topper {
   position: absolute;
   top: 0px;
   left: 0px;
}

.title {
   width: 100%;
   z-index: 1;
}

.subhead {
   width: 80%;
   z-index: 1;
}

.byline {
   width: 25%;
   z-index: 1;
   position: absolute;
   right: 10px;
}

.floatinggraf {
   width: 100%;
   margin: auto;
   text-align: left;
   margin-top: 60vh;
   color: black;
   background-color: white;
}

.disclaimer {
   color: darkslategrey;
   font-family: 'georgia', sans-serif;
   text-align: center;
   font-size: 0.8em;
   width: 100%;
   position: relative;
   padding-top: 20px;
}

.jason1 {
   position: relative;
   width: 25%;
   height: auto;
   float: left;
   margin-top: 115px;
   border-radius: 2%;
   margin-left: 25px;
}

.jason1 img {
   border-radius: 2%;
}

.jason1 .caption1 {
   position: absolute;
   top: 0px;
   left: 20px;
   font-size: 1em;
   color: darkslategray;
}

.text1{
   max-width: 640px;
   margin: 10vh auto;
   text-align: justify;
   line-height: 170%;
   color: darkslategrey;
   padding-bottom: 50px;
}

.whitebox {
   width: 100%;
   background-color: white;
   position: -webkit-sticky;    
   top: 0px;
   z-index: -1;
   padding: 10vh 0vw;
}

.leilapic {
   position: relative;
   width: 25%;
   height: auto;
   float: right;
   margin-top: 30vh;
   margin-right: 25px;
   border-radius: 2%;
}

.leilapic img {
   border-radius: 2%;
}

.leilapic .caption2 {
   position: absolute;
   top: 0px;
   left: 20px;
   font-size: 1em;
   color: black;
}

.blankspace {
   height: 300px;
}

.text2 {
   max-width: 640px;
   margin: auto;
   color: black;
   text-align: justify;
   line-height: 170%;
   color: darkslategrey;
}

.whitebox2 {
   width: 100%;
   background-color: white;
   position: -webkit-sticky;    
   top: 0px;
   z-index: -1;
   padding: 10vh 0vw;
}

.michelle {
   position: absolute;
   width: 25%;
   height: auto;
   right: 25px;
}

.michelle img {
   border-radius: 2%;
}

.michelle .caption3 {
   position: absolute;
   top: -5px;
   left: 15px;
   color: white;
}

.text3 {
   max-width: 640px;
   margin: auto;
   color: black;
   text-align: justify;
   line-height: 170%;
   color: darkslategrey;
}

.text3 {
     max-width: 640px;
   margin: auto;
   color: black;
   text-align: justify;
   line-height: 170%;
   color: darkslategrey;
}

.jason3 {
   position: absolute;
   width: 25%;
   height: auto;
   left: 25px;
}

.jason3 img {
   border-radius: 2%;
}

.jason3 .caption4 {
   position: absolute;
   line-height: 1em;
   top: -5px;
   left: 5px;
   color: white;
   width: 95%;
}

.text4 {
     max-width: 640px;
   margin: auto;
   color: black;
   text-align: justify;
   line-height: 170%;
   color: darkslategrey;
}

.text5 {
     max-width: 640px;
   margin: auto;
   color: black;
   text-align: justify;
   line-height: 170%;
   color: darkslategrey;
}

.maphead {
   text-align: center;
}

.maphead h1 {
   font-size: 2em;
   color: black;
   margin-bottom: 0px;
}

.maphead p {
   text-align: center;
   padding: 0px 50px;
}

.maphead span {
   background-color: white;
   padding: 0px 20px;
}

.map {
   position: relative;
}

.info {
   width: 1vw;
   height: 1vw;
   border: 2px solid black;
   position: absolute;
   cursor: pointer;
   border-radius: 50%;
   background-color: red;
}

.one {
   left: 18%;
   bottom: 35%;
}

.two {
   left: 17.6%;
   bottom: 36%;
}

.three {
   left: 66.5%;
   bottom: 65.5%;
}

.four {
   left: 83%;
   bottom: 62%;
}

.five {
   left: 81.5%;
   bottom: 60.5%;
}

.six {
   left: 85.3%;
   bottom: 65.6%;
}

.seven {
   left: 12.5%;
   bottom: 48.5%;
}

.eight {
   left: 63.5%;
   bottom: 42.5%;
}

.nine {
   left: 77.2%;
   bottom: 53%;
}

.ten {
   left: 66%;
   bottom: 36%;
}

.eleven {
   left: 61%;
   bottom: 64%;
}

.twelve {
   left: 61%;
   bottom: 65%;
}

.thirteen {
   left: 85%;
   bottom: 66.5%;
}

.fourteen {
   left: 84.8%;
   bottom: 64.8%;
}

.fifteen {
   left: 50.5%;
   bottom: 20.5%;
}

.tooltip {
   position: relative;
   width: 30vw;
   display: none;
   z-index: 5;
   border: 1px solid black;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.tooltip1 {
   position: relative;
   width: 30vw;
   display: none;
   z-index: 5;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
   top: -780px;
   left: 750px;
}

.one .tooltip {
   bottom: 325px;
   left: 10px;
}

.two .tooltip {
   bottom: 325px;
   left: 10px;
}

.three .tooltip {
   bottom: -10px;
   right: -8px;
}

.three .tooltip1 {
   position: aboslute;
   top: -580px;
   left: -900px;
}

.four .tooltip {
   bottom: -10px;
   right: 430px;
}

.four .tooltip1 {
   top: -600px;
   left: -1150px;
}

.five .tooltip {
   bottom: -10px;
   right: 432px;
}

.five .tooltip1 {
   top: -610px;
   left: -1150px;
}

.six .tooltip {
   bottom: -10px;
   right: 433px;
}

.six .tooltip1 {
   top: -570px;
   left: -1180px;
}

.seven .tooltip {
   bottom: 325px;
   left: 8px;
}

.seven .tooltip1 {
   top: -700px;
   right: 20px;
}

.eight .tooltip {
   bottom: 330px;
   right: -5px;
}

.eight .tooltip1 {
   top: -750px;
   left: -850px;
}

.nine .tooltip {
   top: 10px;
   right: 435px;
}

.nine .tooltip1 {
   top: -670px;
   left: -1070px;
}

.ten .tooltip {
   bottom: 330px;
   right: -8px;
}

.ten .tooltip1 {
   bottom: 0px;
   left: -930px;
}

.eleven .tooltip {
   bottom: -10px;
   left: 5px;
}

.eleven .tooltip1 {
   top: -580px;
   left: -850px;
}

.twelve .tooltip {
   bottom: -10px;
   left: 5px;
}

.twelve .tooltip1 {
   top: -570px;
   left: -840px;
}

.thirteen .tooltip {
   bottom: -10px;
   right: 440px;
}

.thirteen .tooltip1 {
   top: -570px;
   left: -1200px;
}

.fourteen .tooltip {
   bottom: -10px;
   right: 435px;
}

.fourteen .tooltip1 {
   top: -570px;
   left: -1200px;
}

.fifteen .tooltip {
   bottom: 325px;
   right: 440px;
}

.fifteen .tooltip1 {
   top: -910px;
   left: 230px;
}


/*media query for responsive design */

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

   .tooltip1 {
      display: none;
   }

   .jason1, .leilapic {
      display: none;
   }

   .text1, .text2, .text3 {
      padding: 5%;
   }

   .tooltip {
      left: 0px;
      bottom: 0px;
      right: 0px;
      top: 0px;
   }

   .four .tooltip, .five .tooltip, .six .tooltip, .nine .tooltip, .thirteen .tooltip, .fourteen .tooltip {
      left: -200px;
   }


}