body {
	margin: 0;
	font-family: "Avenir", Helvetica, sans-serif;
  
} 
/* Nav Bar */
.topnav {
	overflow: hidden;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	padding:0.5vw;
  padding-top: 1rem;
}
#topMenu{
  display: flex;
  align-items: flex-end;
}
.menuItem {
	color: black;
	padding: 0.625rem 0.625rem;
	text-decoration: none;
	font-size: 1.2rem;
	padding: 0.625rem;
}
.menuItem:hover {
  	color: #E3B16D;
}
#menuBlank{
  	flex: 0.5;
}
#title{
	font-family: "Avenir", Helvetica, sans-serif;
	font-size: 2rem;
	letter-spacing: 0.5rem;
	margin: 0.2rem;
}
#websiteTitle{
	flex: 2;
	display:flex;
	justify-content: center;
	width: auto;
	height: auto;
	max-width: 30vw;
	padding:0.5%;
}
#topMenu{
	flex: 0.5;
	display: flex;
	justify-content: flex-end;
}
#titleImg{
	width:auto;
	height:auto;
	max-width: 30vw;
}
.topnav .icon{
	display: none;
	width: 5vw;
	height: auto;
	padding-top: 0.5vw;
	padding-right: 1vw;
}
.fa{
	color:black;
	padding:2px;
}

#backButton{
	width:auto;
	height: auto;
	max-height: 1.5vw;
	padding-left: 3vw;
}
/* Highlights Page */
#highlights_main_section_wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}
#highlights_main_section_grid{
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  justify-content: space-around;
  align-content: center;
  margin-bottom: 1rem;
}
.project_tile{
  flex: 1;
  max-width: 30vw;
  margin: 0.5rem;
  margin-top: 3rem;
  text-align:center;  
}
.project_link{
  text-decoration: none;
}
.project_thumbnail_imgs{
  flex: 1;
  display: block; 
  max-width: 30vw;
  max-height: 40vh;
  border: 0.1px solid #bbb;
}
.project_thumbnail_imgs:hover{
  opacity:0.7;
}
.project_tile_title{
  font-family: 'avenir', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  font-weight: 450;
  color:black;
  margin-top:0.5vw;
  margin-bottom: 0.5vw;
}
.project_tile_title:hover{
  color:#E69321;
}
/** About Page*/
#aboutPage{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
  margin-left: 100px;
}
#aboutPhoto{
  flex: 0.5;
  display: flex;
  padding: 20px;
  justify-content: center;
  margin:25px;
}
#mePhoto{
  max-width:25rem;
  max-height: 25rem;
  width: auto;
  height:auto;
  border: 30rem;
  border-radius: 100%;
  padding:10px;
}
.descriptionSec{
  flex:1;
  padding: 20px;
  max-width:40vw;
  justify-content: center;
  margin: 25px;
}
.boldDescription{
  font-size: 1.3rem;
  margin: 0.5rem;
}
.description{
  font-family: 'avenir', sans-serif;
  font-size: 16px;
  color: black;
  margin: 0.5rem;
}
.processDescription{
  width: 60vw;
}
.hi{
  font-family: "avenir";
  font-weight:600;
  color:black;
  margin: 0.5rem;
} 

/** Project Pages */
.projectSection{
  width:100%;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  padding-bottom:4rem;
}
.projectTypeBanner{
  background-color:#666666;
  width: fit-content;
  height: 2rem;
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: right;
}
.projectTypeText{
  font-weight: 600;
  font-size: 1.2rem;
  margin-right: 1rem;
  margin-left: 2rem;
  color: white;
  text-align: center;
}
.projectPicsSection{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.projectVid{
  width: 70vw;
  height: 30rem;
  max-width: 70vw;
}
.projectDescriptionSection{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-right: 5rem;
  padding-left: 5rem;
  padding-bottom: 2vw;
  max-width: 60vw;
  
}
.projectPics{
  display: flex;
  flex-direction: center;
  /* flex-direction: column; */
  justify-content:center;
  align-items: center;
  width: auto;
  height: auto;
  max-width: 70vw;
  max-height:90vh;
  margin: 1rem;
  text-align: center;
}
.picDescription{
  font-family: 'avenir', sans-serif;
  font-weight:lighter;
  font-style:italic;
  font-size: 1rem;
  color:black;
  text-align: center;
  width:50vw;
  margin: auto;
  margin-bottom: 1rem;
}
.projectTitle{
  font-family: 'avenir', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.1rem;
  color:black;
  text-align: center;
  margin: 1rem;
}
.projectTags{
  font-family: 'avenir', sans-serif;
  font-weight:lighter;
  font-size: 1.25rem;
  letter-spacing: 0.05rem;
  color:black;
  text-align:center;
  margin: 0.5rem;
  margin-bottom: 2rem;
}
.descriptionLink{
  text-decoration: none;
}
.descriptionLink:hover{
  color: #E3B16D;
}
.descriptionLink:visited{
  color:#E69321;
}
.listHeading{
  font-weight:bold;
}
#viewParkiveButton{
  width: 20rem;
  height: 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  background-color: #666666;
  border-style: none;
  margin: 2rem;
}
#viewParkiveLink{
  color: white;
  text-decoration: none;
}
#viewParkiveButton:hover{
  background-color: black;
}
.tabsDescription{
  width: 100%;
}
.outcomesPic{
  max-width:100%;
  
}
.tabsPicDescription{
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}
.tabsContent{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60vw;
}
.processPic{
  max-width: 65vw;
  max-height: 95vh;
}
.processSectionHeaders{
  font-size: 1.4rem;
}
.processSectionSubHeaders{
  font-size: 1.2rem;
}
.processSectionSubSubHeaders{
  	font-size: 1rem;
}
.projectPicsGallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.projectPicsSmall{
  max-width: 28vw;
  margin: 0.5rem;
}
.projectPageUl{
  width: 100%;
}
/*Photography Page */
body{
  max-width: 100vw;
}
.photoProjectSection{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}
.photographyProjectSection{
  display: flex;
  flex-direction: column;
  align-items: center;

}
.photoProjectPicsSection{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 90vw;
  height: auto;
}
.photoProjectDescriptionSection{
  width: 60vw;
  padding-bottom: 20px;
  margin: 1rem;
}
.photographyProjectTitle{
  font-family: 'avenir', sans-serif;
  font-size: 20px;
  color:black;
}
.photographyPics{
  width: auto;
  height: auto;
  max-width: 40rem;
  max-height: 30rem;
  margin: 0.5rem;
  
}
.plantPicSec{
  display: flex;
  width: 90vw;
  justify-content: center;
  align-items: center;
}
.plantPics{
  margin: 0.6rem;
  width: 20vw;
 
}
.PhotoprojectVidSection{
	display: flex;
	width: auto;
	height: auto;
	justify-content: center;
	align-items: center;
}
.picVid{
	width: auto;
	height: auto;
	max-height: 25rem;
	max-width:fit-content;
	align-self: center;
}
#wildThings{
  padding-bottom: 2rem;
}
/* Illustration Page*/
.illustrationProjectSection{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  flex-wrap: wrap;
  margin-bottom:1rem;
}
.indvIllustrations{
  flex: 1;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-content: center;
  padding-left: 50px;
  padding-right:50px;
  text-align: center;

}
.illustrationProjectPicsSection{
  padding: 2px;

}
.illustrationProjectTitle{
  font-family: 'avenir', sans-serif;
  font-size: 20px;
  color:black;
}
.illustrationProjectDescriptionSection{
  flex: 1;
  padding: 2px;
  max-width:50vw;
  text-align: center;
}
.illustrationPics{
  width: auto;
  height: auto;
  max-width: 45vw;
  max-height: 80vh;
} 
.illustrationPics:hover{
	opacity:0.7;
}
/** footer */
.footer{
  width:100%;
  height: 2rem;
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content:center;
  bottom:0;
  position:fixed;
  background-color: white;
}
.footerdivs{
  height:2.5rem;
  align-items: center;
  justify-content: center;
}
.footerText{
  display: flex;
  align-items: center;
  font-size:18px;
  color:black;
  text-align: center;
}
.footerLink{
  color:black;
  text-decoration: none;
}
.footerLink:hover{
  color:#E3B16D;
}


/** Illustration Image Modals
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 80px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  max-width: 80vw;
  max-height: 87vh;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover, .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Tabs */
.tab {
  /*overflow: hidden; */
  display: flex;
  justify-content: center;
  align-items:center;
  width:70vw;

}
.tab button{
  background-color:#fafafa;
  border-top-left-radius:1rem;
  border-top-right-radius: 1rem;
  font-size: 1rem;
  letter-spacing: 0.2rem;
  border:none;
  outline:none;
  cursor: pointer;
  padding: 0.75rem 14.12vw;
  box-shadow:rgba(50, 50, 93, 0.15) inset 0px -1px 2.5px 0.5px, rgba(0, 0, 0, 0) 0px 0px 0px;
}
.tab button:hover{
  background-color:#E3B16D;
}
.tab button.active{
  background-color: white;
  box-shadow:rgba(50, 50, 93, 0.25) 0px -1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px;
}
.tabcontent{
  display: none;
  padding-top:4rem;
}

/*Slideshows*/
.active-slide {
  display:block !important;
}

.slideshow-container{
  max-width: 100%;
  position: relative;
  margin: auto;
}
.slideshowImg{
  display: none;
}
#lbog_prev_button{
  left: -1rem;
}
#lbog_next_button{
  right: -1rem;
}
.prev, .next{
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 0.2rem;
  width: auto;
  color: black;
  font-weight: bold;
  font-size: 1.5rem;
  transition:0.4s ease;
  border-radius: 3px 3px 3px 3px;
  user-select: none;
}
.next{
  right: 0;
  border-radius: 3px 3px 3px 3px;
}
.prev:hover, .next:hover{
  background-color:#E3B16D;
}

.slideshowCaption{
  color: black;
  font-size: 0.9rem;
  font-style: italic;
  width: 90%;
  text-align: center;
}
.numbertext{
  color: black;
  font-size: 1rem;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

@keyframes fade{
  from {opacity:.4}
  to {opacity:1}
}

/* For tiled images on project pages*/
.projectPicsSectionTiled{
  max-width: 70vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}
.tiledProjectPic{
  max-width: 48%;
  padding: 0.5rem;
}
.tiledProjectPic:hover{opacity:0.7}

.mobile_ui_vid{
  width: 17rem;
  height: auto;
  margin: 1rem;
}
.mobile_ui_vid_section{
  display: flex;
}
.callout{
  width: 100%;
  height: 3rem;
  background-color:#eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  font-weight:800;
}

@media screen and (max-width: 1000px) {
	.topnav{
			padding-top: 2rem;
			padding-bottom: 1rem;
	}
	#websiteTitle{
		max-height: 30vw;
	}
	i.fa-bars{
		padding: 0.5rem;
	}
	.topnav .menuItem {display: none;}
	.topnav a.icon {
		position: absolute;
		right: 0;
		top:0;
		display: block;
		padding: 1rem;
	}
	.topnav.responsive {
		position:relative;
		display: flex;
		flex-direction:column;
	}
	.topnav.responsive .icon {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		text-decoration:none;
	}
	.topnav.responsive .menuItem {
		float: none;
		display: block;
		text-align: left;
	}
	#menuBlank{
		flex: 0.5;
	}
	#websiteTitle{
		flex: 2;
	}
	#topMenu{
		flex: 0.5;
	}
	#backButton{
		max-height: 4vw;
	}
	#title{
		flex:2;
		font-size: 1.5rem;
		text-align: center;
	}

  /*Photography Page Media Queries 1000px*/

	  .photographyPics{
		max-width: 90vw;
	  }
	  .photoProjectDescriptionSection{
	   width: 70vw;
		padding: 0.1rem;
	  }
    .photographyProjectTitle{
      text-align: center;
    }
	  .plantPicSec{
		flex-direction: column;
		justify-content: center;
    width: 100%;
	  }
	  .plantPics{
	  width: 90%;
    max-width: 90vw;
	  }
	  .picVid{
		max-width: 90vw;
	  }
}

@media screen and (max-width: 700px){
	/*Nav Bar 700px Media Queries*/
	#titleImg{
		max-width: 50vw;
	}
	.menuItem{
		font-size: 1.12rem;
	}

	/* Landing Page (Highlights) 700 px Media Queries */
	.project_tile{
		display: flex;
		max-width: 90vw;
		justify-content: center;
		align-items: center;
    margin-top: 0rem;
	}
	.project_thumbnail_imgs{
		display: flex;
		flex-direction:column;
		justify-content: center;
		max-width: 95vw;
    max-height: 40vh;
		margin:0.1rem;
	}
	.project_tile_title{
		font-size: 1.12rem;
	}
	/* Footer 700px Media Queries */
	.footer{
		flex-direction: column;
		padding: 0.1rem;
	}
	.webCred{
		display:none;
	}

	/* Project Pages 700px Media Queries */
	.projectSection{
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		padding-top:4vw;
		margin: auto;
		width: 90vw;
		margin-bottom: 2rem;
	  }
	  .projectPicsSection{
		padding:auto;
		margin: auto;
	  }
	  .projectPics{
		max-width: 90vw;
		padding-left: 1%;
		padding-right: 1%;
		margin: auto;
	  }
    .projectPicsSmall{
      max-width: 90vw;
    }
    .projectVid{
      width: 90vw;
      height: 27vh;
      max-width: 90vw;
      max-height: 90vh;
      padding: none;
    }
	  .projectDescriptionSection{
		max-width: 90vw;
		padding-left:0.1rem;
		padding-right:0.1rem;
	  }
	  .projectTitle{
		font-size: 1.5rem;
	  }
	  .projectTags{
		font-size: 1.2rem;
	  }
	  .picDescription{
		max-width: 100vw;
		width:80vw;
		margin:0.1rem;
	  }
	  .picDescription{
		font-size: 0.8rem;
	  }
    .tab{
      width: 90vw;
    }
    .tab button{
      padding: 0.75rem 10vw;
    }
    .outcomesPic{
      max-width:90vw;
      max-height: 90vh;
    }
    .tabsPicDescription{
      width: 100%;
      font-size: 0.9rem;
      font-style: italic;
      text-align: center;
    }
    .tabsContent{
      width: 90vw;
    }
    .tabsDescription{
      width: 100%;
    }
    .processDescription{
      width: 90vw;
    }
    .processPic{
      max-width: 90vw;
    }
    .slideshow-container{
      max-width: 90vw;
    }
    #londonParkiveV2Section{
      width: 90vw;
    }
	/* Illustration Page 700px Media Queries*/
	.illustrationProjectSection{
		padding-bottom:2vh;
	}
	.indvIllustrations{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-left:0.1rem;
		padding-right:0.1rem;
	}
	.illustrationProjectPicsSection{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.illustrationPics{
		width: auto;
		height: auto;
		max-width: 90vw;
		max-height: 90vh;
	}
	.illustrationProjectDescriptionSection{
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		max-width: 90vw;
	}
  /*Photography Page 700px Media Queries*/
  .photoProjectDescriptionSection{
    width: 94vw;
  }
	/* About Page 700px Media Queries */
	#aboutPage{
		display: flex;
		flex-direction: column;
		max-width: 100vw;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	  }
	  #aboutPhoto{
		margin: 0.5rem;
	  }
	  #mePhoto{
		max-width: 90vw;
		margin-left: 1rem;
		margin-right: 1rem;
	  }
	  .descriptionSec{
		max-width: 90vw;
		text-align: center;
		margin: 0.5rem;
	  }
	  .hi{
		width: 100vw;
		text-align: center;
	  }
    .mobile_ui_vid{
      width: 90%;
      height: auto;
      margin: 1rem;
    }
    .mobile_ui_vid_section{
      display: flex;
      flex-direction: column;
    }
	/* Modal 700px Media Queries */
	.modal-content {
		width: 100%;
	}
}