body {
  
    font-family: "Montserrat", sans-serif;
    margin:0;
    padding:0;
    background-color: #f2f1ef;
    /*overflow-x: hidden; I have removed this line for some reason*/
    
}

/*navbar information below*//*navbar information below*//*navbar information below*//*navbar information below*/
/*navbar information below*//*navbar information below*//*navbar information below*//*navbar information below*/
/*navbar information below*//*navbar information below*//*navbar information below*//*navbar information below*/

.navbar {
  display: flex;
  flex-direction:row;
  align-items: center;

  position: sticky;
  top:0; /*top:0; is neccesary for position:sticky to work. If we don't have top:0 over here then sticky simply does nothing.*/
  
  justify-content: space-between;
  box-shadow: 1px 1px 10px;
  border-bottom: 5px solid #6aaab8; 
  padding-left:10%;
  padding-right:16%;
  padding-top:0px;
  padding-bottom:0px;
  background-color: #413F3D;
}


.logo {
  flex: 1;
}

.logo img { /* This is needed to adjust the size of the logo in the navbar. 30px seems to be the best */
  max-height: 30px; /* Adjust the height as needed */
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu li {
  padding:18px;
  border-top:5px solid transparent;  
}
.WitsLogoMenu{  
  display: none;
}
.WitsLogoMenu1{  
  display: none;
}

.menu li:hover{ /*Ensures that the navbar buttons are highlighted at the top upon mouse hover*/
  border-top:solid 5px;
  border-color: #6aaab8;
}

.menu a {
  text-decoration:none;/* This ensures that when a navbar link is pressed, it does not turn purple perhaps*/
  color: #F2F1EF;  
}

.active {/*Ensures that the presently viewed html page has its button in the navbar highlighted in blue*/
  background-color: #6aaab8;

}


/*dropdown menu css is below*/
/*dropdown menu css is below*/
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  text-align:center;
  background-color: #413F3D;
  border-left:5px solid;
  border-right:5px solid;
  border-color: #6aaab8;
  border-bottom:5px solid #6aaab8;
  margin-left:-5px;
  margin-right:0px;
  top:calc(100%);
  max-width: calc(100%);
  box-shadow: 0px 5px 5px #303030; 
}

.dropdown:hover .dropdown-content {
  display: block;
}

.icon-to-hide{/*This is ensures that the font awesome navbar button icons in the drop down for MPRI and Publications do not display unless in
  mobile mode. If they display, they take up an additional line in the button and look shit*/
  display:none;
}

/*dropdown menu css is above*/
/*dropdown menu css is above*/

.checkbtn{/* This is the 3 line symbol of the hamburger menu. Its display is only changed from none when the viewport size is decreased enough*/
  display:none;
  font-size:30px;
 
  cursor:pointer;
}

#check{/* I am not sure what this is or does because when i change display to contents nothing seems to happen*/
  display: none;
}


/*navbar information above*//*navbar information above*//*navbar information above*//*navbar information above*/
/*navbar information above*//*navbar information above*//*navbar information above*//*navbar information above*/
/*navbar information above*//*navbar information above*//*navbar information above*//*navbar information above*/

.logoImage{/*This is the styling for the main panel images. These are the Logo panel, the methods panel, the team photo panel and the facilities lab photo*/
  padding:0px;
  display:block;
  padding:20px;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  max-width: 80%;
  /*fix multiple padding here later*/
}

.CrystalsImage{/*This is the styling for the main panel images. These are the Logo panel, the methods panel, the team photo panel and the facilities lab photo*/
  padding:0px;
  display:block;
  padding:20px;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  max-width: 65%;
  /*fix multiple padding here later*/
}

/*page headings information below*//*page headings information below*//*page headings information below*//*page headings information below*/
/*page headings information below*//*page headings information below*//*page headings information below*//*page headings information below*/
/*page headings information below*//*page headings information below*//*page headings information below*//*page headings information below*/


h1{
  margin:0;
  padding:10px;
  font-size: 1.8em;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  max-width: 61%;
  margin-bottom:10px;
  display:block;
  
}

h1:after{/* h1:after and h2:after are here in order to render the blue partial underline on each heading.*/
  background-color: #6aaab8;
  bottom: -5px;
  height: 5px;
  width: 40px;
  position: relative;
  content: "";
  display: block;
  z-index: -1;
}
h2:after{/* I think h1:after and h2:after are here in order to render the blue partial underline on each heading.*/
  background-color: #6aaab8;
  bottom: -5px;
  height: 5px;
  width: 40px;
  position: relative;
  content: "";
  display: block;
  z-index: -1;

}
.topHeading{/*The h1 heading for Our Publications and MPRI seminars need this class in order to have padding between the heading and the navbar. If
  they are defined as simply unclassed h1's then they sit right under navbar and look shit.*/
  margin-top:4%;
  padding:10px;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  max-width: 61%;
  margin-bottom:10px;
  display:block;
}

/*page headings information above*//*page headings information above*//*page headings information above*//*page headings information above*/
/*page headings information above*//*page headings information above*//*page headings information above*//*page headings information above*/
/*page headings information above*//*page headings information above*//*page headings information above*//*page headings information above*/

/*paragraph text styling below*//*paragraph text styling below*//*paragraph text styling below*//*paragraph text styling below*/
/*paragraph text styling below*//*paragraph text styling below*//*paragraph text styling below*//*paragraph text styling below*/
/*paragraph text styling below*//*paragraph text styling below*//*paragraph text styling below*//*paragraph text styling below*/

.MainParagraph {/*All main text paragraph's are styled by this */
  padding:0px;
  
  display:block;
  line-height:170%;
  border-top: 3px solid;
  border-bottom: none;
  font-size: 1.2em;
  border-color:#697184;
  border-left: none;
  border-right:none;
  font-weight: 520;
  color: black;
  
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  overflow:hidden;
  max-width: 61%;
}
/*For now I have not looked at these indented */

.indentedParagraph{
  margin-left: 5%;
  margin-right: 5%;
}
.doubleIndentedParagraph{
  margin-left:10%;
  margin-right:10%;
}

/*paragraph text styling above*//*paragraph text styling above*//*paragraph text styling above*//*paragraph text styling above*/
/*paragraph text styling above*//*paragraph text styling above*//*paragraph text styling above*//*paragraph text styling above*/
/*paragraph text styling above*//*paragraph text styling above*//*paragraph text styling above*//*paragraph text styling above*/

/*Footer information below*//*Footer information below*//*Footer information below*//*Footer information below*/
/*Footer information below*//*Footer information below*//*Footer information below*//*Footer information below*/
/*Footer information below*//*Footer information below*//*Footer information below*//*Footer information below*/


footer{
  display: flex;
  flex-direction:row;  
  justify-content: space-between;  
  color:#f2f1ef;
  background-color: #413f3d;
  border-style: solid;
  border-left: none;
  border-right: none;
  margin-top:20px;
  border-width: thick;
  border-color: #6aaab8;
  box-shadow: 2px 2px 10px;
  padding:1.5%;
  padding-top: 0%;
  padding-left: 15%;
  padding-right: 3%;
  height:auto;
}

.footerContainer{
  flex:1 1 33%;
  text-align: left;
}

.footer_p1{  /*This containes the address and the contact us information but not the "Contact us" and "Find us" headings*/
  text-align: left; 
  font-size:large;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  margin-left:none;  
}

.footer_p2{  /* This encloses the wits Logo*/
  flex:1 1 33%; 
  text-align: center;  
}

.WitsLogo{  /*This is obviously the wits logo in the footer*/
  max-width: 20%;
  min-width:100px;
  margin-top:3%;
  margin-bottom:auto;
  margin-left:auto;
  margin-right:none;
}

/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/
/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/
/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/





/* Cant find any references so can probably delete this
.PortraitLine{
  display:inline;
}
.portraitPic{
  display:inline;
  max-width: 20%;
  width:auto;
  height:auto;
  margin:none;
  padding:none;
 

}

.testPara{
  display:inline-flex;
  max-width:30%;
}*/


.portraitParagraph{  
  margin-top:auto;
  margin-bottom:auto;
  margin-left:0%;
  margin-right:2%;
  margin-top:auto;
  padding-bottom:2%;
  padding-top:2%;
  line-height:170%;
  border-top: 3px solid;
  border-bottom: none;
  border-color:#697184;
  border-left: none;
  border-right:none;
  font-weight: 520;
  color: black;
}

.publicationParagraph{
  margin-top:auto;
  margin-bottom:auto;
  margin-left:0%;
  margin-right:2%;
  margin-top:auto;
  padding-bottom:2%;
  padding-top:2%;
  line-height:170%;
  border-top: 3px solid;
  border-bottom: none;
  border-color:#697184;
  border-left: none;
  border-right:none;
  font-weight: 520;
  color: black;
}


.team-member {
  display: flex;
  align-items: flex-start; /* Align items to the top of the flex container */
  margin-bottom: 20px;
  margin-top:5%;
  margin-left:15%;
  margin-right:15%;
}

.publicationContainerImageLeft {
  display: flex;
  align-items: center; /* Align items to the top of the flex container */
  margin-bottom: 3.5%;
  margin-top:1.5%;
  margin-left:10%;
  margin-right:18%;
}
.publicationContainerImageRight {
  display: flex;
  align-items: center; /* Align items to the top of the flex container */
  margin-bottom: 3.5%;
  margin-top:1.5%;
  margin-left:19%;
  margin-right:15%;
}

.publicationPicture {
  flex: 1 1 10%;
  margin-right: 20px;
}
.publicationPicture img{

  max-width: 100%;
  min-width:60%;
  
}


.portrait {
  flex: 1 1 10%;
  margin-right: 20px;
}
.portrait img{

  max-width: 100%;
  min-width:60%;
  
}

.info {
  flex: 5 10;
}

/* Style the heading (team member name) */
.info h2 {
  margin: 0; /* Remove default margin to avoid extra spacing */
  margin-bottom:20px;
}

/* Style the paragraph (team member description) */
.info p {
  margin-top: 5px; /* Add some spacing between the heading and paragraph */
}

/* Pretty sure I can delete as there are no other occurences of this
.ReasearchHeading{
  margin-top:50px;
  margin-bottom:0px;
}*/

@media screen and (max-width: 990px) {
  .navbar{
    flex-direction:column; 
    width: 100%;
    padding:0px;

  }

  .icon-to-hide{/*Shows the font awesome icons in the navbar for MPRI and publications*/
    display:contents;
  }

  /*I seriously think that I can delete this topLine? It does not appear to be necessary at all?*/
  .topLine{
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: space-between;
    background-color: #464039;
    margin:0px;
    min-width:90%;
    padding-left:5%;
    padding-right:5%;
    padding-top:10px;
    padding-bottom:10px;
}
.checkbtn{ /* This is the 3 line symbol of the hamburger menu. Its display is brought to life by the media query*/
  display: inline;
  color: #F2F1EF;
}

.menu{
  padding:0px;
  margin:0px;
  min-width: 100%;
  position:absolute;
  
  height:100vh;

  top:57px;/*This has to have its top at 54px. 34px for the hamburger menu button height(30px for logo img height)
  10px each for top and bottom padding of topLine for a total of 54px. Well this value is good for some phones but not for others. For some
  the menu scrolls out slightly below the navbar and others slightly above.*/
  left:-110%;
  background-color: #a8a29c;
  background-color: #5e564d;
  /*background-color: #464039;*/
  box-shadow: 0px 5px 5px #303030;
  /*border-top: 5px solid #697184;*/ 
  
  
  transition: .6s;
}

.menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items:center;
}

.menu li {
  text-align: center;
  margin:0px;
  border:none;
  padding-left:0px;
  padding-right:0px;
  padding-top:13px;
  padding-bottom:13px;
  min-width: 100%;
}

.WitsLogoMenu{  
  display:inline;
  text-align: center;
  justify-content: center;
  padding-left: 30%;
  padding-right: 30%;
  max-height: 150px;/**/
  min-width:100px;/**/
  
  
}
.WitsLogoMenu1{  
  display:inline;
  text-align: center;
  justify-content: center;
  padding-left: 30%;
  padding-right: 30%;
  max-height: 150px;/**/
  min-width:100px;/**/
  
  
}
.logoImage{/*This is the styling for the main panel images. These are the Logo panel, the methods panel, the team photo panel and the facilities lab photo*/
    
  padding-top:20px;
  padding-bottom:20px;
  padding-left: 0px;
  padding-right: 0px;
  display:block;
  
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  max-width: 100%;
  

}
h1{
  margin:0px;
  padding:10px;
  padding-right:0px;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  
  max-width: 90%;
  margin-bottom:10px;
  display:block;
  
}
.topHeading{/*The h1 heading for Our Publications and MPRI seminars need this class in order to have padding between the heading and the navbar. If
  they are defined as simply unclassed h1's then they sit right under navbar and look shit.*/
  margin-top:4%;
  padding:10px;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  max-width: 90%;
  margin-bottom:10px;
  display:block;
}


.MainParagraph {
  padding:0px;
  
  display:block;
  line-height:170%;
  border-top: 3px solid;
  border-bottom: none;
  font-size:1em;
  border-color:#697184;
  border-left: none;
  border-right:none;
  font-weight: 520;
  color: black;
  
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  overflow:hidden;
  max-width: 90%;
}
.MainParagraph ul{
  padding-left: 6%;
}

.publicationPicture{/*Removes the publication data graphs in mobile mode as they look to small to read in mobile*/

  display:none;
}
.info h2 {
  font-size: 1.2em;
  margin: 0; /* Remove default margin to avoid extra spacing */
  margin-bottom:20px;
}

.team-member {
  display: flex;
  align-items: flex-start; /* Align items to the top of the flex container */
  margin-bottom: 20px;
  margin-top:5%;
  margin-left:4%;
  margin-right:4%;
}

.portrait {
  flex: 1 1 10%;
  margin-right: 0px;
}
.portrait img{

  max-width: 100%;
  min-width:100%;
  
}

.publicationContainerImageLeft {
  
  /*This ensures space usage is maximized by the paper abstracts in the publications page*/
  margin-left:10%;
  margin-right:10%;
}
.publicationContainerImageRight {
  /*This ensures space usage is maximized by the paper abstracts in the publications page*/
  margin-left:10%;
  margin-right:10%;
}



/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/
/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/
/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/


footer{
  display: flex;
  flex-direction:column;  /**/
  justify-content: space-between;  
  color:#f2f1ef;
  background-color: #413f3d;
  border-style: solid;
  border-left: none;
  border-right: none;
  margin-top:10px;/**/
  border-width: thick;
  border-color: #6aaab8;
  box-shadow: 2px 2px 10px;
  padding:1.5%;
  padding-left: 3%;/**/
  padding-right: 3%;/**/
  height:auto;
  
  padding-bottom:20px;
}
.footerContainer h2{
  margin-top: 5px;
  margin-bottom: 5px;
  
}

.footerContainer{
  flex:1 1 33%;
  text-align: center;/**/
}

.footer_p1{  
  text-align: center;/**/
  
  font-size:0.9em;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  margin-left:none;  
}

.footer_p2{  
  flex:1 1 33%; 
  text-align: center;  
}

.WitsLogo{  
  max-width: 20%;
  max-height: 150px;/**/
  min-width:100px;/**/
  margin-top:3%;
  margin-bottom:auto;
  margin-left:auto;
  margin-right:none;
}



/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/
/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/
/*Footer information above*//*Footer information above*//*Footer information above*//*Footer information above*/

.dropdown {
  position: static;
  min-width: 100%;
}

.dropdown-content {
  display: contents;
  position: static;
  text-align:center;
  /*background-color: #413F3D;*/
  background-color: #a8a29c;
  border-left:5px solid;
  border-right:5px solid;
  border-color: #6aaab8;
  border-bottom:5px solid #6aaab8;
  max-width: calc(100%);
}

.dropdown:hover .dropdown-content {
  display: contents;
}

.menu li:hover{
  border-top:solid 0px;
  border-color: #6aaab8;
}
  
}