@font-face { font-family: Kolbano; src: url(KolbanoRegular/font.woff); } 

html{
  overflow-y:scroll;
}
body {
    max-width: 90%;
    font-family: "Lato", sans-serif;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    background-image:url("Background\ Tester.png");
    z-index: -1;
    text-align: center;
    margin-bottom:0px;
     }
/* Text styles */
h1 {
  font-size: 50px;
  
  margin-top: 35px;
  } /* h1 is only to be used for the banner text */

h2 {
  font-family: Kolbano;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 2px;
  font-size: 40px; 
}

h3 {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: justify;
  }

p {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: justify;
}

.HomeDiv{
  /* border-bottom: inset black 1px; */
  line-height:125%;
  height:auto;
  float:left;
  padding: 12px;
}

.HomeImg{
  height:350px; 
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right:15px;
  outline:solid black 1px; 
  border-radius:25px; 
  float:right;
  transition: 0.05s;
}

.HomeImg:hover{
  outline:solid black 3px;
}

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

.main {
  height: auto;
  min-width: 700px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  background-color: rgba(255, 243, 227, 0.795);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 1;
  overflow: auto;
  margin-top:-3px;
  margin-bottom: 0px;
}

.main ul {
  list-style-type: none;
  margin-left: 0px;
}

.header{
      min-width: 700px;
      max-width: 1100px;
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
      border: 1px  solid black;
      padding: 0px;
      padding-left: 0px;
      height: 245px;
      color: white;
      background-image:url("Images/BannerBackground.png");
      background-position:center 0;
      background-size: 100%;
      text-align: center;
      position: relative;
   
      }

.dropdownmenu{
  position: relative bottom;
  margin-top: -63px;
  margin-left: 0px;
 }
  .dropdownmenu ul, .dropdownmenu li {
  background:#4d2900;
  margin-left: 0;
  padding: 0;
  }
.dropdownmenu ul {
  list-style: none;
  min-width: 100px;
  max-width: 1100px;
  margin-top:2px;
  }
.dropdownmenu li {
  float: left;
  position: relative;
  width: 20%;
  
      }
.dropdownmenu a{
  color: white;
  display: block;
  
  font-size: 16px;
  font-family: "Kolbano";
  padding: 15px; /* This is the padding of the edge of the box from its text, controlling the size of the box*/
  text-align: center; 
  text-decoration: none;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transition:0.15s;
/* this is where the border style goes for the navbar, not the submenu */
}

.dropdownmenu li a:first-child{
  border-left: 2px solid black;
}
.dropdownmenu li:hover a{
  background: #975100;
    }
#submenu {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0px;
  visibility: hidden;
  z-index: 1;
  }
li:hover ul#submenu{
  opacity: 1;
  top: 47px; /* I need this to stop the dropdown from overruling the menu bar BELOW IS THE KEY BUTTON TO TURN ON THE SUBMENU AGAIN*/
  visibility:hidden;
}
.submenu ul a {
list-style-position: outside;
}
#submenu li{
   /* should be float left */
  width: 100%;
  margin-left: 0px;
  margin-right: 50%
  }
#submenu a:hover{
  background: #975100;
  }
#submenu a{
  background-color: #331b00;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  text-align: left;
  }

/*
homei
These are from the old submenu, in the proof of concept for the Photovoice Submenu, splitting up the photovoice pictures by who took them, we can return to 
these themes when we do photovoice 
.thumbnailgallery {
  transition: all 0.25s ease;
  float: left;
  width: auto;
  margin-left: 80px;
  margin-bottom: 22px;
  border-radius: 8px;
  background-color: rgb(173, 173, 173);
  padding: 16px;
  }

 
.thumbnailgallery:hover{
  background: #646464;
  }
  
.thumbnail {
  border-radius: 8px;
  width:9%;
  height:width;
  padding: 8px;
  object-fit: cover;
  } */ 

  .thumbnailcontainer{
    text-align:center;
    padding-right: 15px;
  }
  .thumbnailcontainer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content:space-evenly;
    gap:6px;
  
  }
  
  .thumbnailcontainer ul li img{
    width: 108px;
    height: 108px;
    border-radius: 8px;
    object-fit: cover;
    outline:solid black 1px;
    transition:0.05s
    }
  .thumbnailcontainer ul li img:hover{
    outline: solid black 3px;
  }
  
  .bigImageContainer{
    text-align: center;
    padding-bottom: 20px;
    padding-top:30px;
    }
  .bigImageContainer img{
    height:500px;
    max-width:1010px;
    border-radius: 8px;
    position: center;
     }
  .PublicationContainer{
    border-bottom:inset black 1px;
    padding: 25px;
    display: grid;
    grid-template-columns:auto;
    column-gap: 0px;
    transition:0.15s;
  }
  .PublicationContainer:hover{
    background-color: rgb(255, 223, 180);
  }
  .PublicationTitle{
    grid-row:1;
    grid-column:1/span 2;
  }
  .PublicationAuthor  {
    grid-column:1;
    text-align:left;
    font-weight: bold;
    grid-row:2;
    white-space:nowrap;
  }
  .PublicationDate{
    grid-column:2;
    text-align:left;
    font-weight:bold;
    grid-row:2;
    text-align:right;
  }
  .PublicationAbstract{
    grid-column: 1/span 2;
    grid-row:3;
    text-align:left;
  }

  .TeamPortrait{
    float:right;
    width: 250px;
    height: 250px;
    border-radius: 40px;
    object-fit: cover;
    padding: 20px;
    margin-top: -20px;
  }

  .TeamProfileContainer{
    height:auto;
    float:left;
    padding-left: 15px;
    padding-right: 19px;
    padding-top: 19px;
    padding-bottom: 0px;
    text-align: left;
    border-bottom:1px inset black;
    transition:0.15s;
  }
.TeamProfileContainer:hover{
  background-color: rgb(255, 223, 180);
}
  .PageHeading{
    width: 100%;
    height: 65px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom:8px inset black;
    border-bottom-style: double;
  }

  footer {
    position:static;
    padding:10px;
    bottom:0;
    left:0;
    width:100%;
    height: auto;
    background-color: white;
    min-width: 700px;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
  }

  .footerImg{
    height:30px;
    margin-right: clamp(10px, 5%, 300px);
    margin-left: clamp(10px, 5%, 300px);
  }

.PublicationTitleText{
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  text-align:left;
  text-decoration:underline;
  font-weight:bold;
  font-size: 18px;
}

.FieldworkRootContainer{
    height:50px;
    border-bottom:1px inset black;
    transition:0.15s;
  }

.FieldworkRootContainer:hover{
  background-color: rgb(255, 223, 180);
}

.FieldworkRootTextContainer{
  float: left;
  text-align: left;
  padding-left: 15px;
  padding-right: 19px;
  padding-top: 19px;
  padding-bottom: 0px;
}

.FieldworkRootThumbnail{
  float:right;
  width: 350px;
  height: 50px;
  max-height: 50px;
  object-fit: cover;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  outline: solid black 1px;
}



#FieldworkBlurbContainer{
  overflow:auto;
  border-bottom: solid 2px black;
  height:200px;
  display:grid;
  grid-template-columns: auto 350px;
  height:auto;

  }

  #FieldworkBlurb{
    padding: 10px;
    text-align: left;
    float: left;
    align-self: flex-start;
    width:auto;
  }

  #WrapperFieldworkHomeImage{
    float:right;
    clear:right;
  }

  #FieldworkHomeImg {
  float:right;
  height: auto;
  max-width:350px;
  outline:solid black 1px; 
  border-top-left-radius:5px; 
  border-bottom-left-radius:5px; 
  align-self: flex-end;
  transition: 0.05s;
}
  #FieldworkHomeImg:hover{
  outline:solid black 3px;
}

/* .bigwrap{
  display:flex;
  justify-content: center;
    align-items: center;
  height: 350px;
}



.ArticleGalleryWrapper
{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0px;
  height: 300px;
  align-content: center;
  float:center;
  text-align: center;
  margin: auto;
  
} */

.ArticleText {
  text-align: left;
  padding: 10px;
  padding-left:50px;
  padding-right:50px;
  
}

.bigwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

/* Responsive grid container */
.ArticleGalleryWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  width: 100%;
  max-width: 1100px;
}

.ArticleGalleryImage1,
.ArticleGalleryImage2,
.ArticleGalleryImage3 {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: 0.05s;
}

.ArticleGalleryImage1{
  grid-column:1;
  grid-row:1;

}
.ArticleGalleryImage2{
  grid-column: 2;
  grid-row:1/span 2;
  margin-top:8%;
}

.ArticleGalleryImage3{
  grid-column:1;
  grid-row:2;
}

/* Optional hover outline */
.ArticleGalleryImage1:hover,
.ArticleGalleryImage2:hover,
.ArticleGalleryImage3:hover {
  outline: solid black 3px;
  z-index: 10;
  cursor: pointer;
}
/* 
.ArticleGalleryImage1{
  max-height: 300px;
  grid-column: 2;
  grid-row: 1;
  border-top-right-radius:5px;
  transition:0.05s;
  width:auto;
  height: auto;
  resize:both;
}

.ArticleGalleryImage1:hover{
  outline:solid black 3px;
  z-index:10;
}

.ArticleGalleryImage2{
  grid-column: 1;
  grid-row: 1/span 2;
  width:auto;
  height: auto;
  max-height: 600px;
  align-self: flex-end;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  transition:0.05s;
  resize:both;
}

.ArticleGalleryImage2:hover{
  outline:solid black 3px;
  z-index:10;
}


.ArticleGalleryImage3{
  grid-column: 2;
  grid-row: 2;
  max-height: 300px;
  border-bottom-right-radius:5px;
  transition:0.05s;
  width:auto;
  height: auto;
  resize:both;
}
.ArticleGalleryImage3:hover{
  outline:solid black 3px;
  z-index:10;
} */