/* website stylesheet */

body, html{
    margin:0;
    padding:0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
}
  
li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
}
  
  /* Change the link color to #111 (black) on hover */
li a:hover, .dropdown:hover {
  background-color: #111;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
  
.active {
  background-color: #04AA6D;
}

.spacer {
  padding-top: 10px;
}

.homegrid {
  display: grid;
  grid-template-columns: 10% 40% 40% 10%;
}

#tent-photo {
  width: 100%;
  border-radius: 10px;
  grid-column-start: 2;
}

.peegrid {
  grid-column-start: 3;
  grid-template-columns: 1;
}

.peegrid p {
  margin-top: 0;
  margin-left: 16px;
}

footer {
  text-align: center;
  padding-top: 3px;
  padding-bottom: 15px;
  background-color: grey;
  color: white;
  margin-top: auto;
  width: 100%;
}

footer a{
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

p {
  font-family: Helvetica, Arial, sans-serif;
}

#main-text {
  color: black;
}

form {
  margin:10px auto;
  max-width:308px;
  text-align:center;
}
input, textarea {
float:none;
margin:5px auto;
padding:4px;
width:100%;
max-width:300px;
border:none;
border-radius:2px;
font-size:18px;
color:black;
background-color:white;
}
input:focus {
outline:none;
}
#userName, #userEmail, #userMessage {
-webkit-box-shadow:inset 0px 0px 4px #0A0A0A;
-moz-box-shadow:inset 0px 0px 4px #0A0A0A;
-o-box-shadow:inset 0px 0px 4px #0A0A0A;
box-shadow:inset 0px 0px 4px #0A0A0A;
}
#formSubmit {
max-width:308px;
font-family:HelveticaNeue-CondensedBold, HelveticaNeue-Thin, Helvetica, Arial;
-webkit-box-shadow:0px 5px 10px #0A0A0A;
-moz-box-shadow:0px 5px 10px #0A0A0A;
-o-box-shadow:0px 5px 10px #0A0A0A;
box-shadow:0px 5px 10px #0A0A0A;
}
#formSubmit:hover {
-webkit-box-shadow:inset 0px 0px 5px #0A0A0A;
-moz-box-shadow:inset 0px 0px 5px #0A0A0A;
-o-box-shadow:inset 0px 0px 5px #0A0A0A;
box-shadow:inset 0px 0px 5px #0A0A0A;
}

.projectsFlex {
  column-count: 4;
  column-gap: 10px;
  margin: 0;
}

.projectsFlex > p {
  text-align: center;
  border: 1px solid black;
  break-inside: avoid;
}

figcaption {
  caption-side: bottom;
  text-align: center;
}

h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 30px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
}

.projectPic:hover {
  opacity: 0.5;
}

div.columns {
  overflow: hidden;
  columns: 2;
  column-gap: 10px;
  margin-bottom: 50px;
}

div.columns figure {
  width: 100%;
  break-inside: avoid;
}

.overlay {
  
  position: absolute;
  top: 50%;
  left: 50%;
}

section.projects {
  column-count: 3;
  column-gap: 15px;
  margin-top: 10px;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
}

div.element {
  break-inside: avoid;
  text-align: center;
  position: relative;
}

div.element img {
  width: 100%;
}

.hiddenp {
  position: absolute;
  top: 50%;
  left: 50%;
  color: red;
  transform: translate(-50%,-50%);
}

.projectCoverImage:hover {
  opacity: 0.5;
}

.projectCoverImage {
  border-radius: 10px;
}

div.pageGrid {
  display: grid;
  grid-template-columns: 10% 20% 20% 20% 20% 10%;
}

h2.title {
  grid-column-start: 2;
  text-align: left;
  margin-bottom: 10px;
}

p.descL {
  grid-column-start: 2;
  grid-column-end: 4;
  margin-top: 0;
  margin-right: 10px;
}

p.descR {
  grid-column-start: 4;
  grid-column-end: 6;
  margin-left: 10px;
  margin-top: 20px;
}

.pageImageR {
  border-radius: 10px;
  grid-column-start: 4;
  grid-column-end: 6;
  width: 75%;
  justify-self: center;
  align-self: center;
}
br {
  display: block;
  margin: 10px;
  content: "  ";
}

img.pageImageL1 {
  margin-top: 10px;
  border-radius: 10px;
  grid-column-start: 2;
  width: 75%;
}

img.pageImageL2 {
  border-radius: 10px;
  grid-column-start: 3;
  width: 100%;
}

video {
  grid-column-start: 2;
  grid-column-end: 4;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
}

#wide {
  grid-column-start: 3;
  grid-column-end: 5;
}

figcaption {
  font-family: Helvetica, Arial, sans-serif;
}

.viedoFigR1 {
  grid-column-start: 4;
}

.viedoFigR2 {
  grid-column-start: 5;
}

.centerText {
  grid-column-start: 3;
  grid-column-end: 5;
  width: 75%;
  justify-self: center;
}

.teamphoto {
  grid-column-start: 2;
  grid-column-end: 4;
  justify-self: center;
}

.demophoto {
  grid-column-start: 4;
  grid-column-end: 6;
  justify-self: center;
}

.teamphoto img, .demophoto img {
  width: 100%;
  border-radius: 10px;
}

embed.pdf {
  display: flex;
  grid-column-start: 3;
  grid-column-end: 6;
  width: 100%;
  height: 36em;
  padding-bottom: 15px;
}