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


body {

--colorlogo: #007680;
--colorbg: whitesmoke;
--colorband1: #aaffff;
--colorband2: #ffff7a;
/*--colorjuke1: #a87e24;*/
--colorjuke1: #00b8b2;
--colorjuke2: #ca236b;

--color1: #ff9bea;
--color2: darkviolet;
--color3: red;
--color4: #aacf62;
--color5: #008b22;
--color6: blue;
--color7: #55d5ff;
--color8: #ffdc00;
--color9: #fb7900;
--color10: #ff2092;

--colortext1: #fe4ad8;
--colortext2: darkviolet;
--colortext3: red;
--colortext4: #63871c;
--colortext5: #008b22;
--colortext6: blue;
--colortext7: #00a0d5;
--colortext8: #a08a01;
--colortext9: #f06200;
--colortext10: #c80066;


--fontcolorhov1: black;
--fontcolorhov2: white;
--fontcolorhov3: white;
--fontcolorhov4: black;
--fontcolorhov5: white;
--fontcolorhov6: white;
--fontcolorhov7: black;
--fontcolorhov8: black;
--fontcolorhov9: white;
--fontcolorhov10: white;

}

* {
  box-sizing: border-box;
}

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

audio {
  display: block;
}

/*link style*/

a {
  display: inline-block;
  text-decoration: none;
  color: darkred;
}

a:visited {
  color: gray;
}

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

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

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

i {
  padding: 10%, 10%;
  margin-right: -5%%;
}

.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  z-index:  10;
}
.overlay.start {
  display: block;
}
.stuff {
  color: black;
  width: 90%;
  margin: 10vh auto;
  background-color: white;
  padding: 3%;
  text-align: center;
}

.stuff h2{
  font-size: 3vw;
}

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

.mute1, .mute2 {
  position: absolute;
  right: 0px;
  width: 15%;
}

.unmute1, .unmute2 {
  position: absolute;
  right: 0px;
  width: 15%;
  display: none;
}

.mute1 {
  /*top: 740px;*/
  top: 40vw;
}

.unmute1 {
  top: 40vw;
}

.mute2 {
  top: 265vw;
}

.unmute2 {
  top: 265vw;
}


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

.title1 {
  position: absolute;
  width: 40%;
  top: 23vw;
  color: white;
  text-align: center;
  padding: 3%;
}

.title1 h1 {
  font-size: 5vw;
  margin-bottom: -4px;
}

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

.title1 h3 {
  margin-top: 10%;
  font-size: 1.0vw;
  font-style: italic;
}

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

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

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

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

.title3 {
  width: 100%;
  color: black;
  text-align: center;
  padding: 3% 3%;
}

.title3 h1 {
  font-size: 4vw;
  margin-top: -3%;
  margin-bottom: 3%;
}

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


.groupgallery {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: white;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 2%;
  margin-left: auto;
  margin-right: auto;
}

.titlegroup {
  width: 100%;
  color: black;
  text-align: center;
  padding: 0% 0%;
}

.titlegroup h1 {
  font-size: 4vw;
  margin-bottom: 5%;
}

.biggroupphoto {
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1%;
  position: relative;
}

.groupbox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid black;
  background-color: paleturquoise;
  justify-content: center;
  width: 64vw;
  margin-left: auto;
  margin-right: auto;
  padding: 0.2%;
  padding-top: -3%;
}

.biggroupphoto img {
  width: 100%;
  border: 1px solid black;
}

.biggroupphoto h1 {
  width: 100%;
  position: absolute;
  margin-top: 0%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 3vw;
  background-color: rgba(0,0,0,0.4);
}


.biggroupcaption {
  position: absolute;
  margin-top: 0%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 3vw;
}

.biggroupcaption2 p {
  position: absolute;
  margin-top: -3.8%;
  padding-left: 2%;
  padding-bottom: 0%;
  color: white;
}

.biggroupcaption p, .biggroupcaption2 p {
  background-color: rgba(0,0,0,0.4);
}

.smallgroupphoto {
  float: left;
  width: 95%;
  position: relative;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.smallgroupphoto p {
  width: 100%;
  font-size: 1.5vw;
  text-align: center;
  margin-bottom: 2.5%;
  padding: 0;
}

.smallgroupphoto img {
  width: 100%;
  border: 1px solid black;
}

.smallgroupcaption {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 3%;
  color: linen;
  font-size: 0.8vw;
}


.jukebox {
  width: 62%;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20%;
  margin-bottom: 4%;
  justify-content: center;
  position: relative;
  top: 0%;
  left: 0;
  background-color: white;
}

.jukebox img {
   width: 100%;
   top: 10%;
}


.caption4 {
  position: absolute;
  display: block;
  border: 5px solid var(--colorjuke2);
  color: white;
  background-color: var(--colorjuke1);
  width: 100%;
  border-radius: 2%;
  margin-top: -26%;
  padding-top: 0%;
  margin-bottom: 0%;
  left: 0%;
  top: 0%;
}

.caption4 h1 {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2%;
  font-size: 3vw; 
  font-weight: normal;
  text-align: center;
  margin-top: -2%;
  margin-bottom: 2%;
  padding: 2% 2% 0% 2%;
}

.caption4 p {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2%;
  font-size: 1.5vw; 
  font-weight: normal;
  text-align: left;
  margin-top: -2%;
  margin-bottom: 2%;
  padding: 2% 2% 0% 2%;
}

.groupphoto1, .groupphoto2, .groupphoto3, .groupphoto4, .groupphoto5, .groupphoto6, .groupphoto7, .groupphoto8, .groupphoto9, .groupphoto10 {
   margin: 0%;
   position: absolute;
   height: 12%;
   margin-top: -5%;
   border-radius: 50%;
   background: none;
}

.groupphoto1 img, .groupphoto2 img, .groupphoto3 img, .groupphoto4 img, .groupphoto5 img, .groupphoto6 img, .groupphoto7 img, .groupphoto8 img, .groupphoto9 img, .groupphoto10 img {
   height: 100%;
   background: none;
   display: none;
}

.groupphoto5 {
  left: -20%;
  top: 8%;
}

.band1, .band2, .band3, .band4, .band5, .band6, .band7, .band8, .band9, .band10 {
  position: absolute;
  display: block;
  border: 1px solid transparent;
  width: 25%;
  border-radius: 2%;
  margin-top: -5%;
  padding-top: -5%;
  margin-bottom: -2%;
}

/*
.band1 img, .band2 img, .band3 img, .band4 img, .band5 img, .band6 img, .band7 img, .band8 img, .band9 img, .band10 img {
  position: relative;
  display: none;
  height: 100%;
  width: 100%;
  border: 1px solid black;
  border-radius: 2%;
  margin-top: 0%;
  margin-bottom: -0%;
  margin-left: 0%;
  padding: 0% 0% 0% 0%;
}*/

.band1 h1, .band2 h1, .band3 h1, .band4 h1, .band5 h1, .band6 h1, .band7 h1, .band8 h1, .band9 h1, .band10 h1 {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2%;
  font-size: 1.5vw; 
  font-weight: bold;
  text-align: center;
  margin-top: 1%;
  margin-bottom: -2%;
  padding: 0% 2% 2% 2%;
}


.band1 p, .band2 p, .band3 p, .band4 p, .band5 p, .band6 p, .band7 p, .band8 p, .band9 p, .band10 p {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2%;
  font-size: 1vw; 
  font-style: oblique;
  font-weight: normal;
  text-align: center;
  margin-top: -2%;
  margin-bottom: 2%;
  padding: 2% 2% 0% 2%;
}



.band1 {
  left: -10%;
  top: 48%;
}

.band2 {
  left: -10%;
  top: 37%;
}

.band3 {
  left: -10%;
  top: 28%;
}

.band4 {
  left: -6%;
  top: 19%;
}

.band5 {
  left: 0%;
  top: 8%;
}

.band6 {
  left: 71%;
  top: 8%;
}
.band7 {
  left: 79%;
  top: 17%;
}

.band8 {
  left: 85%;
  top: 26%;
}

.band9 {
  left: 85%;
  top: 39%;
}

.band10 {
  left: 85%;
  top: 52%;
}


.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10 {
   margin: 1%;
   position: absolute;
   height: 8%;
   width: 8%;
   border-radius: 50%;
   background: none;
}

.logo1 img, .logo2 img, .logo3 img, .logo4 img, .logo5 img, .logo6 img, .logo7 img, .logo8 img, .logo9 img, .logo10 img {
   width: 140%;
   margin-top: -100.3%;
   margin-left: -19.6%;
   clip-path: inset(32% 10% 32% 10% round 40%);
   background: none;
}

/*.logo1:hover {
   background: purple;
}*/

.logo1 {
   top: 26.5%;
   left: 25.5%;
}

.logo2 {
   top: 25%;
   left: 36%;
}

.logo3 {
   top: 18.5%;
   left: 29.5%;
}

.logo4 {
   top: 12.5%;
   left: 36.5%;
}

.logo5 {
   top: 10%;
   left: 45.4%;
}

.logo6 {
   top: 20%;
   left: 45.4%;
}

.logo7 {
   top: 12.5%;
   left: 54.5%;
}

.logo8 {
   top: 18.5%;
   left: 61.5%;
}

.logo9 {
   top: 25%;
   left: 55%;
}

.logo10 {
   top: 26.5%;
   left: 65.5%;
}



/*.logo2:hover {
   background: blue;
}*/


.genre1, .genre2, .genre3, .genre4, .genre5, .genre6, .genre7, .genre8, .genre9, .genre10 {
   background-color: var(--colorbg);
   border-radius: 0%;
   position: absolute;
   width: 19.4%;
   height: 3.4%;
}

.genre1 p, .genre2 p, .genre3 p, .genre4 p, .genre5 p, .genre6 p, .genre7 p, .genre8 p, .genre9 p, .genre10 p {
   background-color: transparent;
   /*font-size: 1.7em;*/
   font-size: 2.0vw;
   text-align: center;
   margin: 0;
   padding: 0% 0.8%;
}

.genre1 p:hover, .genre2 p:hover, .genre3 p:hover, .genre4 p:hover, .genre5 p:hover, .genre6 p:hover, .genre7 p:hover, .genre8 p:hover, .genre9 p:hover, .genre10 p:hover {
   /*font-size: 2em;*/
   font-size: 2.2vw;
   margin-top: -2%;
   padding: 0% 2%;
   border: 1px solid black;
}

.genre1 {
   top: 39.5%;
   left: 29%;
}

.genre1 p{
   color: var(--colortext1);
}

.genre1 p:hover {
   background-color: var(--color1);
   color: var(--fontcolorhov1);
}

.genre2 {
   top: 39.5%;
   left: 52.65%;
}

.genre2 p{
   color: var(--colortext2);
}

.genre2 p:hover {
   background-color: var(--color2);
   color: var(--fontcolorhov2);
}

.genre3 {
   top: 43.7%;
   left: 29%;
}

.genre3 p{
   color: var(--colortext3);
}

.genre3 p:hover {
   background-color: var(--color3);
   color: var(--fontcolorhov3);
}

.genre4 {
   top: 43.7%;
   left: 52.65%;
}

.genre4 p{
   color: var(--colortext4);
   font-size: 1.4vw;
   margin-top: 2.8%;
}

.genre4 p:hover {
   background-color: var(--color4);
   color: var(--fontcolorhov4);
   font-size: 1.5vw;
   margin-top: -1.8%;
   padding: 2.8% 0%;
}

.genre5 {
   top: 48.1%;
   left: 29%;
}

.genre5 p{
   color: var(--colortext5);
}

.genre5 p:hover {
   background-color: var(--color5);
   color: var(--fontcolorhov5);
}

.genre6 {
   top: 48.1%;
   left: 52.65%;
}

.genre6 p{
   color: var(--colortext6);
}

.genre6 p:hover {
   background-color: var(--color6);
   color: var(--fontcolorhov6);
}

.genre7 {
   top: 52.4%;
   left: 29%;
}

.genre7 p{
   color: var(--colortext7);
}

.genre7 p:hover {
   background-color: var(--color7);
   color: var(--fontcolorhov7);
}

.genre8 {
   top: 52.4%;
   left: 52.65%;
}

.genre8 p{
   color: var(--colortext8);
}

.genre8 p:hover {
   background-color: var(--color8);
   color: var(--fontcolorhov8);
}

.genre9 {
   top: 56.7%;
   left: 29%;
}

.genre9 p{
   color: var(--colortext9);
   font-size: 1.2vw;
   margin-top: 2.8%;
}

.genre9 p:hover {
   background-color: var(--color9);
   color: var(--fontcolorhov9);
   font-size: 1.3vw;
   margin-top: -1.8%;
   padding: 2.8% 0%;
}

.genre10 {
   top: 56.7%;
   left: 52.65%;
}

.genre10 p{
   color: var(--colortext10);
}

.genre10 p:hover {
   background-color: var(--color10);
   color: var(--fontcolorhov10);
}


.caption3 {
  position: absolute;
  display: block;
  border: 5px solid var(--colorjuke2);
  color: white;
  background-color: var(--colorjuke1);
  width: 64.5%;
  border-radius: 2%;
  margin-top: -5%;
  padding-top: 1%;
  margin-bottom: -2%;
  left: 18%;
  top: 95%;
}

.caption3 p {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2%;
  font-size: 1vw; 
  font-style: oblique;
  font-weight: normal;
  text-align: left;
  margin-top: -2%;
  margin-bottom: 2%;
  padding: 2% 2% 0% 2%;
}




.largephoto {
   margin: 2%;
   width: 75%;
   display: block;
   justify-content: center;
   position: relative;
   top: 0;
   left: 0;
}

.largephoto img {
   width: 100%;
}

.largephoto:hover {
}


.gallery {
   display: flex;
   flex-wrap: wrap;
   padding: 2%;
   overflow: hidden;
   width: 98%;
   margin: auto;
   margin-bottom: 0%; 
}

.gallery h2{
   padding-right: 0%;
   overflow: hidden;
   width: 97%;
   margin: auto;
   margin-bottom: 0;
   margin-right: 2%;
   color: black;  
   background-color: white;
   border: 2px solid transparent;
   font-size: 3vw;
   text-align: center;
}

.gallery2 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}

.gallery3 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-left: 15.5%; 
   width: 68%;
}

.nav-links {
   flex: 1;
   text-align: left;
}

.nav-links ul li {
   list-style: none;
   display: inline-block;
   padding: 8px 12px;
}

.nav-links ul li a {
   display: inline-block;
   color: black;
   text-decoration: none;
   font-size: 1.5em;
}

.nav-links a:hover {
   color: tan;
}

.nav .fa {
   display: none;
}

.caption1 {
   color: black;
   width: 100%;
   text-align: center;
   font-size: 2.5vw;
   margin-bottom: -7%;
}

.caption2 {
   color: black;
   width: 100%;
   text-align: center;
   font-size: 1.8vw;
   margin-top: -3%;
}

.smallphoto, .smallphoto1 {
   position: relative;
   margin: 2%;
   border: 4px solid var(--colorlogo);
   /*   float: left;*/
   /*   width: 31%; */
}

.smallphoto img, .smallphoto1 img {
   width: 100%;
}

.smallphoto1 h1 {
   position: absolute;
   left: 0;
   bottom: -3.5%;
   width: 100%;
   height: 101.5%;
   color: whitesmoke;
   background-color: rgba(55, 63, 39, 0.7);
   text-align: left;
   font-size: 0.6vw;
   padding: 1%;
}

.smallphoto p, .smallphoto1 p {
   position: absolute;
   left: 0;
   bottom: -3.5%;
   color: whitesmoke;
   background-color: rgba(55, 63, 39, 0.7);
   text-align: left;
   font-size: 0.6vw;
   padding: 1%;
}

.smallphoto:hover {
   box-shadow: 4px 10px 10px 5px rgba(0, 0, 0, 0.2);
}

.overlay1 {
  z-index: -5;
  width: 100%;
  height: 100%;
  background-color: rgba(55, 63, 39, 0.7);
}


.maintext {
  max-width: 65vw;
  margin: auto;
  color: black;
  font-size: 1.3vw;
  line-height: 1.8vw;
  text-align: justify;
  padding: 1%;
}

.maintext1 {
  max-width: 65vw;
  margin: auto;
  color: black;
  font-size: 1.3vw;
  line-height: 1.8vw;
  text-align: justify;
  padding: 1%;
}

.video1 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 5%;
}


.video1 video{
  width: 70vw;
  border: 1px solid black;
  display: flex;
  justify-content: center;
}

.containerleft1, .containerright2 {
   float:  right;
   padding-left: 3%;
   overflow: hidden;
   width: 50%;
   margin: 1%%;
}

.containerleft1 {
   float:  left;
   padding-right: 3%;
}

.containerright2 {
   float:  right;
   padding-left: 3%;

}

.containerleft1 video, .containerright2 video {
   margin:  0%;
   padding:  0%;
   width: 110%;
   border: 1px solid black;
 }

 .containerleft1 video {
   margin-left:  -8%;
   margin-top: 2%;
 }

 .containerleft1 img {
   margin-left:  -8%;
   margin-top: 2%;
   width: 110%;
 }

 .containerright2 video {
   margin-left:  0;
   margin-top: 2%;
 }

 .containerright2 img {
   margin-left:  0;
   margin-top: 0;
   width: 110%;
 }

.containerleft1 img, .containerright2 img {
   border: 1px solid black;
}

.containerleft1 p, .containerright2 p {
  width: 100%;
  font-size: 1.3vw;
  line-height: 1.6vw;
  font-style: italic;
  text-align: center;
}


.pullquote {
  width: 50%;
  font-size: 1.5vw;
  line-height: 1.7vw;
  font-style: italic;
  text-align: left;
  margin-top: 2%;
}

.name {
  font-size: 1.3vw;
  text-align: center;
  line-height: 1.5vw;
  padding-bottom: 30px;
}

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

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

.floatingpic {
  width: 50%;
}

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

.floatingcap {
  margin-top: 0px;
  font-size:  0.8em;
  text-align: center;
}

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

.bigphoto {
  position: relative;
}

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

.sidebyside {
  display: flex;
}

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

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

.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: 1fr 1fr 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;
}

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

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  width: 100%;
  position: relative;
  margin: auto;
  padding-top: 2%;
}

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

.mySlides img {
    width: 100%;
    border: 1px solid black;
}

/* 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: 1.7vw;
  padding: 2%;
  margin-top: 10%;
  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: 3.1%;
  background-color: rgba(0, 0, 0, 0.4);
}

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

.dot {
  cursor: pointer;
  height: 1.2vw;
  width: 1.2vw;
  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;
}

/*
footer p {
  font-size: 1.0vw;
}
*/

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


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

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

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

  .gallery h2{
    font-size: 2.2em;
  }

  .caption1 {
    font-size: 1.3em;
  }

  .caption2 {
    font-size: .9em;
  }

  .smallphoto p {
    font-size: 0.5em;
  }

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

  .containerleft1, .containerright2, .containerleft3, .containerright4, .containerleft5{
    flex-direction: column;
    flex-direction: column-reverse;
    padding: 1%;
    overflow: hidden;
    width:100%;
    margin: auto;
    margin: 0%;
    margin-bottom: 4%;
  }

}

  /*.gallery {
    flex-direction: column;
  }*/

  .gallery h2{
      margin: auto;
      width: 50%;
  }

/*  .smallphoto{
    width: 30%;
  }*/
  
/*
  .band1, .band2, .band3, .band4, .band5, .band6, .band7, .band8, .band9, .band10 {
    width: 40%;
  }

  .band1 h1, .band2 h1, .band3 h1, .band4 h1, .band5 h1, .band6 h1, .band7 h1, .band8 h1, .band9 h1, .band10 h1 {
    font-size: 1.0em; 
  }

  .band1 p, .band2 p, .band3 p, .band4 p, .band5 p, .band6 p, .band7 p, .band8 p, .band9 p, .band10 p {
    font-size: 0.7em; 
    margin-top: -6%;
  }


  .genre1 p, .genre2 p, .genre3 p, .genre4 p, .genre5 p, .genre6 p, .genre7 p, .genre8 p, .genre9 p, .genre10 p {
     font-size: 1em;
}
  .genre1 p:hover, .genre2 p:hover, .genre3 p:hover, .genre4 p:hover, .genre5 p:hover, .genre6 p:hover, .genre7 p:hover, .genre8 p:hover, .genre9 p:hover, .genre10 p:hover {
     font-size: 1.1em;
   }

   */
}


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


/*
  .title1 {
    top: 3%;
  }

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

  .title1 h2 {
    font-size: 1.4em
  }

  .title1 h3 {
    font-size: 1.0em;
  } 
 
  .title2 h1 {
    font-size: 2.5em;
  }

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

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

  .gallery h2{
    font-size: 2.0em;
  }

  .caption1 {
    font-size: 1.2em;
  }

  .caption2 {
    font-size: .8em;
  }

  .smallphoto p {
    font-size: 0.4em;
  }


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

*/

  .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;

/*
  .band1, .band2, .band3, .band4, .band5, .band6, .band7, .band8, .band9, .band10 {
    width: 43%;
  }

  .band1 h1, .band2 h1, .band3 h1, .band4 h1, .band5 h1, .band6 h1, .band7 h1, .band8 h1, .band9 h1, .band10 h1 {
    font-size: 0.9em; 
  }

  .band1 p, .band2 p, .band3 p, .band4 p, .band5 p, .band6 p, .band7 p, .band8 p, .band9 p, .band10 p {
    font-size: 0.6em;
    margin-top: -7%;
  }

  }  
  .genre1 p, .genre2 p, .genre3 p, .genre4 p, .genre5 p, .genre6 p, .genre7 p, .genre8 p, .genre9 p, .genre10 p {
       font-size: 1em;
  }
  */
}


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

/*
  .title1 {
    top: 1%;
  }

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

  .title1 h2 {
    display: none;
  }

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

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

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

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

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

  .caption1 {
    font-size: .9em;
  }

  .caption2 {
    font-size: .6em;
  }

  .smallphoto p {
    font-size: 0.3em;
  }


  .maintext {
    font-size: 1em;
    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;
  }


  .nav-links ul li {
   display: block;
  }

/*  .nav-links{
    position: fixed;
    background-color: lightpink;
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 1s;
  }*/

  nav .fa{
    display: block;
    color: black;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }

  .nav-links ul{
    padding: 30px;
  }

 /* .gallery {
    flex-direction: column;
  }

  .gallery h2{
    margin: auto;
    width: 50%;
  }
*/
/*  .smallphoto{
    width: 30%;
  }*/
 
 /*
  .band1, .band2, .band3, .band4, .band5, .band6, .band7, .band8, .band9, .band10 {
    width: 45%;
  }

  .band1 h1, .band2 h1, .band3 h1, .band4 h1, .band5 h1, .band6 h1, .band7 h1, .band8 h1, .band9 h1, .band10 h1 {
    font-size: 0.7em; 
  }

  .band1 p, .band2 p, .band3 p, .band4 p, .band5 p, .band6 p, .band7 p, .band8 p, .band9 p, .band10 p {
    font-size: 0.4em; 
    margin-top: -7%;
  }

  .genre1 p, .genre2 p, .genre3 p, .genre4 p, .genre5 p, .genre6 p, .genre7 p, .genre8 p, .genre9 p, .genre10 p {
       font-size: .5em;
  }
  */

}