@import url('https://fonts.googleapis.com/css?family=Roboto:300,700|Ubuntu:300i,700&display=swap');

html {
    min-height: 100vh;
}

/* Selection Color */
::selection {
  background: #f70909; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #f70909; /* Gecko Browsers */
}

/* Links */
.link {
    color: rgb(59, 232, 255);
    word-wrap: break-word;
}

.link:hover {
    color: rgb(59, 232, 255);
    text-decoration: underline;
}

/* Dropdown Button */
.dropbtn {
    color: white;
    background-color: inherit;
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    border: none;
    transition: 0.3s;
}

a.dropbtn:hover {
    color: white;
}

.reservebtn {
    background-color: #f70909e1;
}

.reservebtn-index {
    background-image: linear-gradient(to bottom, #f70909, rgba(255, 255, 255, 0));
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(35, 35, 35);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content-right {
    right: 0;
}

/* Links inside the dropdown */
.dropdown-content a {
    font-size: 0.5em;
    color: white;
    padding: 12px 16px;
    text-decoration: none !important;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: rgb(46, 46, 46);
}

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

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    text-decoration: underline;
}

/* Hide the link that should open and close the topnav on small screens */
.hamburger-menu {
    display: none;
}

.topnav-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: inherit;
}

#responsive {color:rgb(0, 0, 0);}

/* When the screen is less than 810 pixels wide, hide all links. 
Show the link that should open and close the topnav (.icon) */

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 900px) {
  #responsive {color:rgb(255, 255, 255);}
  .topnav div.topnav-wrapper {display: none;}
  .hamburger-menu {
    float: right;
    display: block;
    color: rgba(255, 255, 255, 0.8);
  }
  .hamburger-menu:hover{
      color: white;
  }

   /* When menu is open, display is block and background is black */
  .topnav.responsive div.topnav-wrapper {
      position: absolute;
      top: 100%;
      left: 0%;
      width: 100%;
      display: block;
      background-color: black;
    }
  .topnav.responsive div.topnav-wrapper div.dropdown {
    display: block;
    text-align: left;
  }
  .topnav.responsive div.topnav-background {
      background-color: black;
  }
  /* General style changes after media-query change */
  .dropbtn {
    width: 100%;
    text-align: left;
    padding-left: 10%;
  }
  .reservebtn {
      width: 100%;
      text-align: left;
      padding-left: 10%;
  }

  .reservebtn-index {
    background-color: #f70909e1;
  }
  .dropdown-content {
    position: relative;
    /*
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    */
  }
 .dropdown-content a {
      padding-left: 20%;
  }
  /* Disable dropdown from showing with hover */
  .dropdown:hover .dropdown-content {
    display: none;
  }
}


/* Index */

.bg-with-opacity {
    background-image: linear-gradient(to bottom, rgb(35, 35, 35) , rgba(255, 255, 255, 0));
}

.media-body {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

@media (min-aspect-ratio: 16/9) {
  .media-body video {
    height: auto;
    width: 100vw;
    /* Center the video */
    position: absolute;
    top: 50vh;
    transform: translate(0, -50%);
  }
}

@media (max-aspect-ratio: 16/9) {
  .media-body video {
    height: 100vh; 
    width: auto;
    /* Center the video */
    position: absolute;
    left: 50vw;
    transform: translate(-50%, 0);
  }
}

.media-body::after {
    content: '';
    position: absolute;
    background-image: linear-gradient(to bottom, rgb(35, 35, 35) , rgba(255, 255, 255, 0));
    top: 0;
    right: 0;
    bottom: 60vh;
    left: 0;
}

h1, h2, h3 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
}

h4, h5, h6, p, ul, li {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

h4, h5, h6, p b {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.main-title {
    position: absolute;
    text-align: right;
    right: 5%;
    bottom: 20%;
    z-index: 10;
    color: white;
}

.main-title h1{
    font-size: 4.5rem;
    text-shadow: 2px 2px 8px black;
}

.main-title h3 {
    text-align: right;
    text-shadow: 2px 2px 8px black;
}

.main-title a:link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.main-title a:visited {
    color: rgba(255, 255, 255, 0.85);
}

.main-title a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.main-title a:active {
    color: #4e555b;
}

.see-more-btn {
    position: absolute;
    bottom: 0;
    left: 50vw;
    transform: translate(-50%, 0);
    margin-bottom: 2%;
    padding: 0;
}

.see-more-btn i {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 3px 3px 16px #272634;
}

.see-more-btn i:hover {
    color: white;
}


#quadrants {
    box-sizing: border-box;
    margin-top: 100vh;
}

.quad {
    height: 500px;
    background-color: rgba(15, 15, 15, 0.7);
    overflow: hidden;
}

.quad h1 {
    margin-top: 30%;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
}

.quad h3 {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
}

.quad:hover {
    background-color: rgba(15, 15, 15, 0.4);
}

.quad:hover h1{
    color: white;
}

.quad:hover h3{
    color: white;
}

#quadrants a:link {
    color: white;
    text-decoration: none;
}

#quadrants a:visited {
    color: white;
}

#quadrants a:hover {
    color: grey;
}

#quadrants a:active {
    color: #4e555b;
}

.quad-wrap {
    margin: 10%;
}


/* Typing effect*/

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: cornflowerblue; }
}


/* DEMO-SPECIFIC STYLES */
.typewriter h3 {
    font-size: 1.3rem;
    font-family: monospace;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .3em solid cornflowerblue; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .06em; /* Adjust as needed */
    animation:
            typing 3.5s steps(30, end),
            blink-caret .5s step-end infinite;
}

.typedtext {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.3rem;
    font-family: monospace;
}


.typedtext span {
    color: rgba(255, 255, 255, 0.8);
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    color: rgba(255, 255, 255, 0);
  }
}

/* Footer */

footer {
    background-color: rgb(35, 35, 35);
    padding: 1rem 10%;
    z-index: 10;
}

footer h5 {
    color: white;
}

footer p {
    color: white;
}

.footer-copyright {
    color: white;
    font-size: 1rem;
}

.footer-text {
    margin-top:5%;
    font-size: 0.9rem;
    line-height: 120%;
    color: rgba(255, 255, 255, 0.6);
}

.footer-text p {
    font-size: 0.9rem;
    line-height: 120%;
    color: rgba(255, 255, 255, 0.6);
}

.title{
    font-size: 2em;
    color: white;
    text-shadow: 2px 2px 8px black;
}


.content-box {
    position: absolute;
    top: 60%;
    z-index: 2;
    margin-left: 15%;
    margin-right: 15%;
}

.content-box h2,p,div {
    font-size: 1.1em;
    color: white;
}

/*

.top-image {
    width: 100%;
    height: auto;
    z-index: -1;
}

.top-image::after {
    display: block;
    position: relative;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, black 100%);
    margin-top: -150px;
    height: 150px;
    width: 100%;
    content: '';
}

.top-image-vidi {
    width: 100%;
    height: auto;
}

.top-image-vidi::after {
    display: block;
    position: relative;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #262316 100%);
    margin-top: -500px;
    height: 500px;
    width: 100%;
    content: '';
}

.placeholder-vidi {
    display: block;
    width: 100%;
    height: 1500px;
    background-color: #262316;
}

.placeholder-dmd {
    display: block;
    width: 100%;
    height: 1300px;
    background-color: black;
}

.placeholder-box {
    display: block;
    width: 100%;
    height: 700px;
    background-color: black;
}

*/

.black-bg {
    background-color: black;
}

.course-grid {
    background-color: inherit;
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
    margin-bottom: 0.3em;
}

.course-pic p{
    font-size: 0.5em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

.content-box.course-description h4{
    font-size: 1em;
}

.course-wrapper {
    padding-bottom: 1.5em;
}

.course-description {
}

.course-description p {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.85);
}

.course-placeholder-box {
    display: block;
    width: 100%;
    height: 3300px;
    background-color: black;
}

/* Background image & overlay */

#overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.65);
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.overlay-light {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.bg-image {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.bg-image::after {
    display: block;
    position: relative;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
    margin-top: -400px;
    height: 400px;
    width: 100%;
    content: '';
}

.navbar-color {
    background-color:rgba(35, 35, 35, 0.8);
}

/* Facilities & Affiliates Title */
.spacer-lg {
    padding-top: 25%;
    height: 0;
}

.spacer-md {
    padding-top: 20%;
    height: 0;
}

.spacer-sm {
    padding-top: 6%;
    height: 0;
}

.title-center{
    font-size: 2em;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 8px black;
}

/* Facilities */
.stats {
    width: 100%;
}

.img-grid {
    background-color: inherit;
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 75%;
}

.grid-img {
    position: absolute;
    height: 100%;
    top: 0;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* Affiliates */
.logo-wide {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.vidi-wrapper img {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.vidi-wrapper p {
    font-size: 0.8em;
    text-align: center;
}


.logo-tall {
    position: absolute;
    height:70%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Newsletter */

.newsletter-grid {
    background-color: inherit;
    position: relative;
    width: 99%;
    padding: 2%;
}

.newsletter-grid p {
    text-align: center;
    font-size: .8em;
    padding-top: 2%;
}

.grid-newsletter {
    width: 100%;
    height: auto;
}

.paragraph-text div{
    font-size: 1em;
}

/* Publications */

.year-publication {
    font-size: 1.7rem;
}

.publication-wrapper {
    padding: 1rem;
}

.publication-wrapper p{
    font-size: 1rem;
}

.publications-grid {
    background-color:  rgba(59, 232, 255, 0.466);
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 65%;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: rgba(25, 25, 25, 0.8);
  color: white;
  cursor: pointer;
  padding: 18px;
  margin-top: 3px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion .active, .accordion:hover {
  background-color: rgba(45, 45, 45, 0.8);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: rgba(0, 0, 0, 0.5);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
} 

/* Faculty and Staff */


.faculty-wrapper{
    padding: 1.5rem;
}

.faculty-wrapper p{
    font-size: 0.8em;
}

@media screen and (max-width: 650px) {
    .faculty-wrapper{
        text-align: center;
    }
}

.faculty-grid {
    background-color: white;
    position: relative;
    overflow: hidden;
    width: 51%;
    padding-top: 68%;
    margin-bottom: 6%;
    margin-left: auto;
    margin-right: auto;
}

/* Students */
.student-grid {
    background-color: white;
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 125%;
    margin-top: 6%;
    margin-bottom: 6%;
}

.pic-tall {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pic-wide {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.subtitle-sm {
    font-family: 'Ubuntu', serif;
    font-weight: 300; 
    font-style: italic;
}

.student {
    margin-bottom: 1%;
}

.student a:link {
    color: white;
    text-decoration: none;
}

.student a:visited {
    color: white;
}

/* figure out overlay */
.student a:hover {
    color: grey;
    text-decoration: none;
}

.student a:active {
    color: #4e555b;
}

/* Vidi */
.vidi-grid {
    background-color: white;
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 65%;
}

/* Events*/


/* .timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}


.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

.event-wrapper {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

.event-wrapper::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -12px;
    background-color: white;
    border: 4px solid cornflowerblue;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

.left {
    left: 0;
}

.right {
    left: 50%;
}

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

.right::after {
    left: -16px;
}

.content {
    padding: 20px 30px;
    background-color: rgba(255, 255, 255, 0.3);
    position: relative;
    border-radius: 6px;
} */
/* Media queries - Responsive timeline on screens less than 600px wide */
/* @media screen and (max-width: 1000px) {
    .timeline::after {
        left: 31px;
    }

    .event-wrapper {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .event-wrapper::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    .left::after, .right::after {
        left: 15px;
    }

    .right {
        left: 0%;
    }
} */

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 20vh;
} 

.event-date {
    font-size: 1em;
}

.event-title {
    font-size: 1.5em;
}

.event-description {
    font-size: 0.85em;
}

/* HMS */
.list li {
    margin: 20px;
}

/* Media Archives */
.media-grid {
    background-color: white;
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
}

.media-description p {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.85);
    padding-bottom: 1em;
}

.media-description h4 {
    color: rgba(255, 255, 255, 0.85);
}

.media-pic {
    padding-bottom: 1em;
}

.media-grid a.youtube:hover:after{
    background: rgba(255, 255, 255, 0.5) url(../images/mediaarchives/youtube-icon-overlay.png) center/cover;
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.media-grid a.vimeo:hover:after{
    background: rgba(255, 255, 255, 0.5) url(../images/mediaarchives/vimeo-icon-overlay.png) center/cover;
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* DMD */
.img-credit {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.75);
    padding-bottom: 1em;
}

.bg-credit {
    font-size:0.9em;
    color: rgba(255, 255, 255, 0.75);
    text-align: right;
}

/* Video Credits*/
.vidcred_grid {
    background-color: white;
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 1em;
}

.vidcred {
    text-align: center;
    font-size: .8em;
    padding-top: 0.8em;
}

/* Visitors */
.visitors-subtitle {
    margin-bottom: 1em;
}

@media screen and (max-width: 650px) {
    .visitors-subtitle {
        text-align: center;
    }
}

.visitors-text{
    text-align: center;
    margin-bottom: 0;
}

.visitors-text div {
    margin-bottom: 1em;
}

/* Press */
.hr-short {
    border: 0;
    height: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    width: 8%;
}

.hr-long {
    border: 0;
    height: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* Summer Research */

.research-description p {
    margin-bottom: 0.5em;
}

.research-button-container {
    height: 80px;
    position: relative;
}

.research-button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    background-color: #f70909; 
    color: white;
    padding: 14px 25%;
    border: none;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.5rem;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
  
.research-button:hover {
    background-color: #ac0707;
    color: white;
}

/* Alumni */
/* Remove default bullets */
  .tree, .tree ul {
    list-style-type: none;
  }
  
  /* Remove margins and padding from the parent ul */
  .tree {
    margin: 0;
    padding: 0;
    line-height: 1.1;
  }

  .tree ul {
    padding-inline-start: 30px;
  }

  .tree li {
      margin-top: 12px;
      margin-bottom: 12px;
  }
  
  /* Style the caret/arrow/item */
  .caret {
    cursor: pointer;
    /* Prevent text selection */
    /*user-select: none;*/ 
  }
  
  /* Create the caret/arrow with a unicode, and style it */
  .caret::before {
    content: "\25BA";
    color: white;
    display: inline-block;
    margin-right: 6px;
  }
  
  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
  .caret-down::before {
    transform: rotate(90deg);
  }
  
  /* Style if no caret */
  .no-caret {
    cursor: default;
  }

  .no-caret::before {
    content: "\25CF";
    color: white;
    display: inline-block;
    margin-right: 10px;
  }

  /* Hide the nested list */
  .nested {
    display: none;
  }
  
  /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
  .tree .active {
    display: block;
    background-color: inherit;
  }

  .alumni-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
  }

  /* Shrink bullet indentation when screen gets smaller */
  @media screen and (max-width: 810px) {
    .tree ul {
        padding-inline-start: 20px;
    }
  }

  @media screen and (max-width: 650px) {
    .tree ul {
        padding-inline-start: 15px;
    }
  }

  
/* Style.html */

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}