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


* {
   box-sizing: border-box;
}

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

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

body, html {
   font-family: 'Courier', monospace;
   background-color: whitesmoke;
   max-height: 50px;
}

 h1 {
   text-align: center;
   color: hotpink;
}

p {
   color: black;
}


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

a:visited {
   text-decoration: none;
   color: hotpink;

}

.image {
   width: 25%;
/*   border: 3px solid gold;*/
   position: relative;
}

.image img {
   width: 100%;
}
.a:hover, a:active {
   color: orange;
}

.outer-wrapper {
   height: 100vh;
   overflow-y: hidden;
/*   now we can never scroll down -- keith*/
}

.slide {
   width: 100vw;
   height: 100vh;
   padding: 10px 5vw;   
}

.slide.one {
   padding: 0px;
   position: relative;
}

.mobilelink {
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: lightpink;
   padding: 20px;
}

.wrapper {
/*   display: flex;
   flex-direction: row;
   width: 400vw;*/
   display: grid;
   grid-auto-flow: column;
/*   now we do not have to count slides. i think this should take care of it automatically. -- keith*/
}


/*SLIDE ONE*/
.one {
   display: grid;
   align-content: center;
}

.one img {
/*  position: sticky;
  top: 0;
  background-color: black;*/
/*  opacity: 0.6;*/
  /*max-height: 600px;*/
/*  max-height: 100vh;*/
  max-width: 100vw;
}


.one {
   background: whitesmoke;
   
}

.zero {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.zero img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

.zero h1 {
   position: absolute;
   top: 0;
   left: 20%;
   border: 2px solid red;
   width: 30%;
   z-index: 1;
   color: red;
   margin-left: 15%;
   text-align: center;
}

.ztext {
   position: absolute;
   top: 10%;
   z-index: 1;
/*   border: 3px solid yellow;*/
   margin-top: 50px;
   margin-left: 5%;
   background-color: rgba(212, 110, 163);
   padding: 4%;
   max-height: 600px;
   padding-bottom: 1%;

}

.ztext p {
   color: whitesmoke;
}



/*SLIDE 2*/
.two {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}
.two img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}



.backdrop {
      width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;

  
}

.town {
   width: 40%;
}

.town img {
   width: 100%;
}


.babyboom {
   border: 3px solid hotpink;
  position: absolute;
   top: 10%;
   z-index: 1;
   background-color: white;
   height: 600px;
   padding: 0 4% 4% 4%;
  margin-bottom: 2.5%;
/*  max-height: 500px;*/
  margin-left: 5%;
/*   margin: auto;*/
}

.little {
   padding: 0%;
}
/*SLIDE 3*/

.three {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.three img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

.babyboom2{
/*   border: 3px solid blue;*/
  position: absolute;
   top: 10%;
   z-index: 1;
   background-color: rgba(212, 110, 163);
   padding: 0 4% 4% 4%;
  margin-top: 50px;
/*  max-height: 485px;*/
}

/*SLIDE 4*/

.four{
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.four img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}



/*SLIDE 5*/
.five {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.five img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 6*/

.six {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.six img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 7*/
.seven {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.seven img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 8*/

.eight {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.eight img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}


/*SLIDE 9*/

.nine {
/*   border: 6px solid green;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.nine img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 10*/

.ten {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.ten img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}


/*SLIDE 11*/
.eleven {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.eleven img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 12*/
.twelve {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.twelve img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 13*/
.thirteen{
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.thirteen img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
/*   border: 6px solid yellow;*/
}


/*SLIDE 14*/
.fourteen{
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.fourteen img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 15*/
.fifteen {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.fifteen img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 16*/
.sixteen {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.sixteen img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 17*/
.seventeen {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.seventeen img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

/*SLIDE 18*/
.eighteen {
/*   border: 6px solid orange;*/
   padding: 0;
   margin-top: 0;
   position: relative;
/*   z-index: -1;*/
}

.eighteen img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}

.infographic {
   background: lightpink;
   position: sticky;
/*   border: 6px solid gold;*/
   display: flex;

}

.conclusion {
/*    border: 6px solid red;*/
   padding: 0;
   margin-top: 0;
   position: relative;
}

.conclusion img{
   width: 100%;
   height: 100%;
/*   position: sticky;*/
   top: 0;
   opacity: 0.8;
}




/*TEXT EDITS*/

.maintext {
   width: 90%;
/*   max-height: 500px;*/
/*   margin: auto;*/
   text-align: justify;

}

.left {
   width: 25%;
   float: left;
   margin-right:20px;
/*   padding-right: 20px;*/
/*   margin-left: -40px;*/
}

.right {
   float: right;
   width: 30%;
/*   padding-left: 20px;*/
   margin-left: 20px;
}

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

}

.person {
/*   border: 2px solid black;*/
   width: 250px;
   position: relative;
}

.headshot {
/*   position: relative;*/
   text-align: center;
   width: 250px;
/*   border: 3px solid blueviolet;*/
}
/*
.sara p{
   background-color: rgba(255, 105, 180, .7);

}
*/


.saraaudio {
   width: 50%;
   position: sticky;
   margin-left: 1000px;
   padding-bottom: 20px;
}




.photocaption {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   color: white;
   font-size: 0.7em;
   text-align: center;
   background-color: rgba(255, 105, 180, .7);
}


.minibox {
   position: relative;
   width:100%;

}

.popup {
  cursor: pointer;
/*  height: 90vh;*/
width: 200px;
height: 500px;
margin-top: 3%;
position: relative;
/*border: 3px solid rebeccapurple;*/

}


.popup img {
   width: 100%;
   height: 100%;
/*   height: 98%;*/
}

.info {
   margin: auto;
}
/*.popup img {
   height: 100%;
   width: auto;
}*/



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

.content {
  width: 90%;
  margin: 10vh auto;
  background-color: white;
  padding: 5%;
  text-align: center;
}

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

.modal img {
   width: 50%;
   margin: auto;
}

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


.mobiletext {
   max-width: 640px;
   margin: auto;
   padding: 1%;
}

.mobilecaption {
   position: relative;
   bottom: 0px;
   left: 0px;
   width: 100%;
   color: white;
   font-size: 0.7em;
   text-align: center;
   background-color: rgba(255, 105, 180, .7);
  
}


/*media query for responsive design */

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


}