@font-face {font-family: SourceCode; src: url('SourceCodeVariable-Roman.otf'); } 

html {
     font-family: 'Nunito Sans', sans-serif;
    color: #2b1e00;
    background-color: #fafafa;
    overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
 /* height: 100%;*/
   transition: opacity .5s;
  
   
}

#home-hover:hover {
    opacity: 0.5;
}

h1 {
   font-size: 16px; 
   font-weight: normal;
   text-transform: uppercase;
   text-align: center;
   padding-bottom: 10px;
}

h2 {
  font-size: 14px; 
  font-weight: normal;
}

.bio {
  width: 60%;
 
}

h3 {
  font-size: 13.5px;
  color:#2b1e00;
  font-weight: normal;
  
}



p {
    font-size: 12px;  
    }  

.content {
    width: 100vw;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #2b1e00;
    font-size: 20px;
    z-index: 0;
    height: auto;
    padding-bottom: 0vh;
   display: flex;
   flex-direction: column;
    
}
    

.content-overlay {
    /*padding-top: 18vh;*/
    margin: 0 12vw 0 12vw;
    z-index: 1;
    padding-bottom:3vh;
    padding-top:2vh;
}


.imagecontent {
    width: 100%;
}


/*home page image on hover */
.hover-text {
  display: inline;
  pointer-events: auto;
  cursor: pointer;
}

.hover-text-2 {
  display: inline;
  pointer-events: auto;
  cursor: pointer;
}

.index-links {
    text-decoration: underline;
}

.hover-image {
  visibility: hidden;
}

.hover-image-2 {
  visibility: hidden;
}


.home-link {
    text-decoration: none;
}

body:not(.mobile) .hover-text:hover +.hover-image {
  visibility: visible;
  pointer-events: none;
  
}

.hover-image {
  display: flex;
  position: fixed;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*Change width and height to scale images*/

  width:100%;
  height: 50vh;
}

.hover-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 0;
}

body:not(.mobile) .hover-text-2:hover +.hover-image-2 {
  visibility: visible;
  pointer-events: none;
  
}

.hover-image-2 {
  display: flex;
  position: fixed;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*Change width and height to scale images*/

  width:100%;
  height: 50vh;
}

.hover-image-2 img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 0;
}

.inner-body {
    padding: 10vh;
    font-size: 12px;
}

#space {
    padding-top: 5vh;
}

#borderwrapper {
    display: flex;
    margin-top: 35vh;
    position: absolute;
    color: black;
}

#borderleft {
    flex: 0;
    writing-mode: vertical-rl;
    position: fixed;
    transform: rotate(-180deg);
    left: 15px;
    font-size: 1.5vh
}

#borderright {
    flex: 1;
    writing-mode: vertical-rl;
    position: fixed;
    right: 15px;
    font-size: 1.5vh
}


.about-item {
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;

}

/* For mobile phones: */
/* The Overlay (background) */



.nav {
    display: none;
}

header {
    width: 100vw;
    position: absolute;  
    z-index: -1;
    padding-top: 2%;
    padding-bottom: 2%;
}

.phone-logo {
    display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:80px;
 
}



.mobilenav {
    display: block;
}

.mobile-open {
    display: inline-block;
  cursor: pointer;
    margin-left: 8%;
    margin-top: 2vh;
}

.bar1, .bar2, .bar3 {
  width: 30px;
  height: 4px;
  background-color: #2b1e00;
  margin: 5px 0;
  transition: 0.4s;

}

.mobile-footer {
    padding: 50px;
    font-size: 10px;
}

.mobile-open:hover {

    background-color: transparent
}

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(224, 224, 224); /* Black fallback color */
    background-color: rgb(224, 224, 224, 0.9); 
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }
  
  /* The navigation links inside the overlay */
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #2b1e00;
    display: block; /* Display block instead of inline */
    transition: 0.2s; /* Transition effects on hover (color) */
  }
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: #2b1e00;
    text-decoration: underline;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }

.mobile-drop {
    width: 100%;
    height: auto;
    /*padding: 8px;*/
    text-decoration: none;
    font-size: 36px;
    color: #2b1e00;
    display: block; /* Display block instead of inline */
    transition: 0.2s; /* Transition effects on hover (color) */
    cursor: pointer;
}

.mobile-drop:hover {
    color: #2b1e00;
    text-decoration: underline;
}

#myLinks {
  display: none;
}

#myLinks a {
    font-size: 30px;
}



  
  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
    
  
  }

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #2b1e00;
  padding: 0;
  background-color: transparent;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.dropbtn:hover {
    color: black;
    cursor: pointer;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
 /* box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0);*/
  z-index: 1; 
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  padding: 12px 0px;
  text-decoration: none;
  display: block;
  line-height: 1.5px;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

    
#active {
  text-decoration: underline;
}


a {
    color:#2b1e00;
    text-decoration: none;
}
a:hover {
    color: black;
}

.flex-container {
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 10vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.item {
  width: 60vw;
  height: auto;
  padding: 2vw;
    position: relative;
}


.overlay-text { 
    width: 57vw;
    height: 67vw;
    color: #2b1e00;
  position: absolute;
  top: 70px;
  left: 60px;
}
  
    
#maintext {
    font-size: 20px;
     line-height: 5vw;   
    }
#subtext {
    padding-top: 2vw;
    font-size: 12px;
    position: absolute;
  bottom: 0;
    }

.thesis-container {
margin-left: 0vw;
    margin-right: 0vw;
    margin-top: 8vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
    color: #5f3f19; 
}

#thesis {
    padding: 0;
}

#thesis-intro {
    padding-bottom: 0;
}

#thesis-title {
    font-size: 15px;
}
    
#thesis-subtext { 
    font-size: 12px;
    padding-bottom: 8vh;
    
}

#events-container {
    margin-top: 0vh;
}

.button {
    margin-top: 2vh;
}

.error-text {
    font-size: 12px;
    text-align: center;
    padding-top: 20vh;
   
    }

.happening-intro {
    font-size: 12px;
    text-align: center;
}

.happening-container {
margin-left: 0;
margin-right: 0;
margin-top: 7vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}

.happening-text { 
    text-align: left;
    color: #2b1e00; 
    width: 60vw;
  height: auto;
  padding-left: 0vh;
position: relative;
/*border-bottom: 0.5px solid #5f3f19;*/

}

.about-text /*-- is this in use?--*/ {
      margin: 3vh 10vh 0vh 10vh;
      width: auto;
      float: left;
    }

.secondary {
      margin: 6vh 10vh 0vh 8vh;
      width: 80%;
      float: left;
      }

#first {
    padding-top: 5vh;
}

.event-headers {
    margin: 8vh 6vh 0vh 5vh;
}

#subscribe {
    padding-top: 5vh;
    padding-bottom: 1vh;
    display: inline-block;
    text-align: left;
}

::placeholder {
    color: #5f3f19;
}

#mc_embed_signup_scroll {
    vertical-align: top;
}


#mc_embed_signup {
    display: inline-block;
    }

#mce-EMAIL {
    background-color: transparent;
    color: #5f3f19;
    border-color: transparent;
    border-bottom-color: #5f3f19;
   border-width: 0.1px;
    outline: none;
    font-size: 12px;
    width: 150px;
    
}

.button {
    background: #5f3f19;
    color: #2b1e00;
    min-width: 150px;
    text-align-last: center;
    border: none;
    padding: 2px;
    font-size: 12px;
    border-radius: 7px;
    margin: 1vh;
    
}

.button:hover {
    cursor: pointer;
    background: #c2c2c2;
    color:#5f3f19; 
}


#footer {
  display: none;
  text-align: center;
 
}


.mySlides {display: none}

/* Slideshow container */
.slider {
  max-width: 70vh;
  position: relative;
}

.slidenav {
    cursor: pointer;
    transition: 0.6s ease;   
    opacity: 0;
    }
    
/* Next & previous buttons */
.prev, .next {
    top: 40%;
    position: absolute;
  color: #2b1e00;
  font-weight: bold;
  font-size: 6vh;
    padding: 1vh;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.slidenav:hover {
  opacity: 1;
    color: #fafafa;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: 0.6} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.6} 
  to {opacity: 1}
}

    .secondary {
      width: 35%;

      }


    

@media only screen and (min-width: 800px) {
  /* For desktop: */

  

  
header {
    display: none;  
}
    
.home-page-img {
    width: 80vw;
    align-content: center;    
}

#footer {
    flex-shrink: 0;
    bottom: 0;
    font-size: 10px;
    max-width: 100vw;
    padding: 4vh 4vh 2vh 4vh;
    height: auto;
    display: block;
  }


/* navigation bar*/
.nav { 
  display: flex;
   /*width: 100%;*/
   justify-content: space-around;
    position: sticky;
    z-index: 2;
    background-color: transparent;
    padding: 15px 0px 25px 35px;
    align-items: center;
    font-size: 16px;  
}

.mobilenav {
    display: none; /* hide mobile nav when on desktop*/
}

.flex-container {
margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 4vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
}
    
.item {
  width: 40vw;
  height: auto;
  padding: 2vh;
position: relative;
}

img {
    max-width: 40vw;
}

.event-item {
    width: 43vw; 
    margin-top: 0;
    }
    
.overlay-text { 
    width: 35vw;
    height: 40vw;
  top: 50px;
  left: 60px;
}
    

#maintext {
    font-size: 18px;
     line-height: 4vw;
    }
    
#subtext {
    padding-top: 2vw;
    font-size: 12px;
    }
    
.overlay-text:hover {
    cursor: pointer;
      color: lightblue;  
    }
    

.thesis-container {
margin-top:  8vh;
    margin-left: 6vw;
    margin-right: 4vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
    

#thesis-maintext { 
    font-size: 18px;
    width: 42vw;
   padding-bottom: 7vh;
    
}
      
#thesis-subtext { 
    width: 35vw;
    font-size: 12px;
}



.happening-text { 
    text-align: left;
    font-size: 15px;
    width: 35vw;
  padding-left: 0vh;
position: relative;
    display: inline-block;
    padding: 2vh;
}
    
    .inner-body {
    padding: 7vh 10vh;
    font-size: 12px;
}


  
}

@media only screen and (max-width: 800px) {
  /* For mobile: */

.imagecontent {
  padding-top: 30% !important;
  height: auto;
 }

 .container {
  display: flex;
  flex-wrap: wrap;
}
.item img {
  max-width: 100%;
  height: auto;
}

}