body {
	font-family: 'IBM Plex Mono', monospace;
}

.section{
	text-align:center;
}


.intro p{
	padding-top:0;
	margin: 0 auto;
	font-size: 1.5em;
}

/*Section1, homepage*/
#directions {
	padding-top: 20px;
	margin: auto;
}

.headerHomepage{
	left:3%;
	position:relative;
	top:20%;
}

.rightCircle{
	position:absolute;
	left:70%;
	top:30%;
	width:30%;
}

.leftCircle{
	position:absolute;
	left:-3%;
	top:-70%;
	width:25%;
}


/* Section2, Panel1*/
	/*panel 1 BACKGROUND */
#section2 {
	margin-bottom: 10%;
}

#section2 .intro{
	font-family: 'IBM Plex Mono', monospace;
	left:120%;
	position: relative;
	color:white;
}

.panel1{
	position:relative;
	margin-left: 12.5%;
	margin-right: 12.5%;
	margin-bottom: 10%;
	width:75%;

}
	/* panel 1 PEOPLE*/
.panel1people{
      position:relative;
      width:100%;
      
      margin: 50px;
}

/*JIM*/
.j1layered {
	position: absolute;
    left:40%;
    top:15%;
}
.j1resize {
    height:30%;
}

#jim1speech {
	position: absolute;
	left: 45%;
	top: 10%;
	height: 10%;
}

/*PAM*/
.p1layered {
	position: absolute;
    left:51%;
    top:30%;
}
.p1resize {
    height:30%;
}
#pam1speech {
	position: absolute;
	left: 62%;
	top: 22%;
	height: 10%;
}



/* Section3, Panel2*/
	/*panel 2 BACKGROUND*/
#section3 {/*
	margin-bottom: 10%;*/
}

#section3 .intro{
	font-family: 'IBM Plex Mono', monospace;
	left:120%;
	position: relative;
	color:white;
}

.panel2 {
	position:relative;
	margin-left: 12.5%;
	margin-right: 12.5%;
	margin-bottom: 10%;
	width:75%;

}

	/*panel 2 PEOPLE*/
.panel2people{
      position:relative;
      width:100%;
      margin: 50px;
}

#michael2speech {
	position: absolute;
	left: 27%;
	top: 45%;
	height: 10%;
}

/*MICHAEL*/
.m2layered {
	position: absolute;
    left:42%;
    top:35%;
}
.m2resize {
    height:25%;
}


/* Section4, Panel3*/
	/*panel 3 BACKGROUND*/
#section4 {
	margin-bottom: 10%;
}

#section4 .intro{
	font-family: 'IBM Plex Mono', monospace;
	left:120%;
	position: relative;
	color:white;
}

.panel3{
	position:relative;
	margin-left: 12.5%;
	margin-right: 12.5%;
	margin-bottom: 10%;
	width:75%;

}

	/*panel 3 PEOPLE*/
.panel3people{
      position:relative;
      width:100%;
      margin: 50px;
}

/*JIM*/
.j3layered {
	position: absolute;
    left:40%;
    top:10%;
}
.j3resize {
    height:40%;
}

#jim3speech {
	position: absolute;
	left: 35%;
	top: 10%;
	height: 10%;
}

/*MICHAEL*/
.m3layered {
	position: absolute;
    left:42%;
    top:10%;
}
.m3resize {
    height:40%;
}
#michael3speech {
	position: absolute;
	left: 45%;
	top: 1%;
	height: 10%;
}


/*PAM*/
.p3layered {
	position: absolute;
    left:51%;
    top:10%;
}
.p3resize {
    height:40%;
}
#pam3speech {
	position: absolute;
	left: 58%;
	top: 10%;
	height: 10%;
}

/*CAMERA*/
.cameralayered {
	position: absolute;
    left:30%;
    top:60%;
}
.cameraresize {
    height:70%;
}

.buttonlayered {
	position: absolute;
    left:49%;
    top:80%;
}
.buttonresize {
    height:4%;
    background-color: black;
    color: white;
}


#shutter{
opacity: 0;
  transition: all 30ms ease-in;/* Shutter speed */
  position: fixed;
  height: 0%;
  width: 0%;
  pointer-events: none;

  background-color: white;/* Shutter Color */
  
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

#shutter.on {
  opacity: 1;/* Shutter Transparency */
  height: 100%;
  width: 100%;
}




/* Section5, Panel4*/
	/*panel 4 BACKGROUND*/
#section5 .intro{
	font-family: 'IBM Plex Mono', monospace;
	left:120%;
	position: relative;
	color:white;
}
#section5 p{
	display: none;
}

.panel4{
	position:relative;
	margin-bottom:50px;
	width:80%;

}
	/*panel 4 PEOPLE*/
.panel4people{
      position:relative;
      width:100%;
      margin: 50px;
}


/*JIM*/
.j4layered {
	position: absolute;
    left:30%;
    top:35%;
}
.j4resize {
    height:45%;
}

#jim4speech {
	position: absolute;
	left: 35%;
	top: 30%;
	height: 30%;
}

/*MICHAEL*/
.m4layered {
	position: absolute;
    left:70%;
    top:30%;
}
.m4resize {
    height:45%;
}

#michael4speech {
	position: absolute;
	left: 75%;
	top: 25%;
	height: 10%;
}

/*PAM*/
.p4layered {
	position: absolute;
    left:55%;
    top:30%;
}
.p4resize {
    height:45%;
}
#pam4speech {
	position: absolute;
	left: 47%;
	top: 30%;
	height: 10%;
}

/*grad pic*/
.g4layered {
	position: absolute;
    left:40%;
    top:10%;
}
.g4resize {
	height: 10%;
	border-style: solid;
	border-width: 2px;
}
    


/* Section6, Panel5*/
	/*panel 5 BACKGROUND*/
#section6 .intro{
	font-family: 'IBM Plex Mono', monospace;
	left:120%;
	position: relative;
	color:white;
}

.panel5{
	position:relative;
	margin-bottom:50px;
	width:80%;

}

/*panel 5 PEOPLE*/
.panel5people{
      position:relative;
      width:100%;
      margin: 50px;
}

/*JIM*/
.j5layered {
	position: absolute;
    left:35%;
    top:30%;
}
.j5resize {
    height:50%;
}

/*#jim5speech {
	position: absolute;
	left: 35%;
	top: 18%;
}*/

/*MICHAEL*/
.m5layered {
	position: absolute;
    left:45%;
    top:30%;
}
.m5resize {
    height:50%;
}

/*PAM*/
.p5layered {
	position: absolute;
    left:57%;
    top:30%;
}
.p5resize {
    height:50%;
}

/* Section7, Panel6*/
	/*panel 6 BACKGROUND*/
#section7 .intro{
	font-family: 'IBM Plex Mono', monospace;
	left:120%;
	position: relative;
	color:white;
}

.panel6{
	position:relative;
	margin-bottom:50px;
	width:80%;

}

/*panel 5 PEOPLE*/
.panel6people{
      position:relative;
      width:100%;
      margin: 50px;
}

/*JIM*/
.j6layered {
	position: absolute;
    left:40%;
    top:10%;
}
.j6resize {
    height:40%;
}

/*#jim6speech {
	position: absolute;
	left: 35%;
	top: 18%;
}*/

/*MICHAEL*/
.m6layered {
	position: absolute;
    left:42%;
    top:10%;
}
.m6resize {
    height:40%;
}

/*PAM*/
.p6layered {
	position: absolute;
    left:51%;
    top:10%;
}
.p6resize {
    height:40%;
}

/* Section8*/

#section8 .intro{
	text-align:center;
	width:60%;
	left:120%;
	position: relative;
	color:black;
	top:20%;
}