/* Universal Styles */
html,
body,
#body {
  width: auto !important;
  overflow-x: hidden !important;
}

p { text-wrap: pretty; }


body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #000;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #003049;
  font-weight: bolder;
}

small {
  font-family: 'Yaldevi', sans-serif;
  margin: 5px auto;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.hideMainMenu {
  display: none !important;
}

#returnTop .material-symbols-sharp {
  color: #000;
  font-size: 30px;
}

.newsMainBody #returnTop {
  margin-top: 1em;
  font-weight: 900;
}

#returnTop .material-symbols-sharp:hover {
  color: rgb(138, 129, 124);
}

.showDT {
  display: block;
}

.readMoreDetails,
.mobileDetailsMenu {
  display: none;
}

.readMoreDetails {
  border: none !important;
}

scrollbar-color {
  background-color: transparent !important;
}


/* border on left and right side + text in the middle */
.strike {
  color: #eee;
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  z-index: 0;
}

.strike>span {
  position: relative;
  display: inline-block;
}

.strike>span:before,
.strike>span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: .5px;
  background: #eee;
}

.strike>span:before {
  right: 100%;
  margin-right: 15px;
}

.strike>span:after {
  left: 100%;
  margin-left: 15px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

/* Universal Styles End */


/* Assigning Grid Area */

#gridPI {
  padding: 6.5em !important;
}

#gridOne {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 1em;
  padding-top: 1em;
}

#gridTwo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 1em;
  row-gap: 1em;
  padding-top: 2em;
}

#gridThree {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 10px;
  margin-top: auto;
}

.iframe {
  background-color: #000;
  border: .5px solid;
  border-color: #000;
  ;
  border-radius: 3px;
  border-radius: 3px;
  padding: 5px;
}

#gridFour {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  padding-top: 2em;
}

#gridFour a {
  display: grid;
  grid-template-columns: 10% 1fr 10%;
  border-radius: 3px;
  margin: 0;
  padding: 0;
  background-color: rgba(237, 224, 212, .15);
  border: .5px solid;
  border-color: #eee;
  height: 30px;
  width: 100%;
}

#gridFour a span:first-child {
  margin: 3px auto;
  font-size: 22px;
}

#gridFour a span:nth-child(2) {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 100;
  font-size: 16px;
  padding-top: 5px;
  padding-left: 3px;
}

#gridFour a span:nth-child(3) {
  font-size: 20px;
  padding-top: 5px;
}

#gridFour a span:hover,
#gridFour a:hover {
  border-color: #eee;
  font-weight: 400;
}

/* Assigning Grid Area End */

/* Header Starts */
header {
  display: grid;
 grid-template-columns: 1fr auto 1fr;
  padding: 5px 10px;
  margin-top: -10px;
  color: #fff;
  height: 75px;
  background-color: #003049;
}

header a h2 {
  color: #fff;
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  font-size: 32px;
}


header h2:nth-child(2) {
  font-family: 'Bodoni Moda', serif;
  text-align: left;
  letter-spacing: 1px;
  text-align: center;
  padding: 0;
}

header h2:nth-child(3) {
  text-align: right;
  color: #fff;
  margin-top: 35px;
}


#upennTextBreak {
  display: none;
}

#upennText {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 100;
  font-size: 20px;
}

#upenn-img {
  width: 90px;
}

/* Header Ends */

/* Navigation Starts */
.navigation {
  height: 60px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  padding: 0;
  margin: 0px;
  column-gap: 5px;
  border-bottom: .5px solid;
  border-bottom-color: #eee;
  background-color: rgb(253, 252, 251);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.navigation li {
  list-style-type: none;
  text-align: center;
  font-size: 16px;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 600;
}

.navigation li .bi {
  font-size: 20px;
  color: #8a817c;
}

.tooltip {
  padding-bottom: 25px;
  margin-top: 10px;
  position: relative;
  display: block;
}


.tooltip .navText {
  color: #000;
  width: auto;
  font-family: 'Yaldevi', sans-serif;
  font-size: 11px;
  font-weight: 400;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  top: 25px;
  bottom: 0;
  right: 0;
  left: 5px;
  z-index: 1;
}

.tooltiptext {
  background-color: #fff;
  border: 1px solid;
  color: #000;
  width: auto;
  height: max-content;
  font-family: 'Yaldevi', sans-serif;
  font-size: 11px;
  font-weight: 400;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  top: 5px;
  bottom: 0;
  right: 0;
  left: 5px;
  z-index: 4;
  visibility: hidden;
}

.tooltiptextMobile {
  margin: 0 3px;
}

.dissLink:hover {
  color: #000;
  font-weight: bolder;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


.tooltip:hover .navText {
  visibility: visible;
}

/* Navigation Ends */

/* Intro Starts */
.bg-img {
  background-color: #a1c5ce;
}

.innerGrid {
  display: grid;
  grid-template-columns: 50% 50%;
  text-align: center;
  padding: 1.5rem;
  column-gap: 1rem;
}

.bannerImages img:hover {
  box-shadow: rgba(255, 255, 255, .4) 0px 2px 8px 0px;
}

.slider {
  color: #fff;
  width: max-content;
  height: max-content;
  margin: auto;
}

#sliderGrid {
  display: grid;
  grid-template-columns: max-content max-content;
  margin-left: 50%;
  width: 100%;
  column-gap: 10px;
}

#left-arrow, #right-arrow {
  padding: 0 75px;
  margin-top: 50px;
  font-size: 20px;
}

#left-arrow:hover,
#right-arrow:hover {
  color: #fff;
  border: 1px solid #fff;
}


.bg-img-row {
  font-family: 'Yaldevi', sans-serif;
  font-size: 14px;
  color: #fff;
  text-align: center;
  display: grid;
  grid-template-rows: auto;
}

.titleFont, .bodyFont {
  text-wrap: pretty;
  color: #000;
  padding: 5px;
  background-color: #fff;
}

.titleFont {
  font-family: 'Yaldevi', sans-serif;
  font-weight: bolder;
}

.bodyFont {
  font-family: 'Yaldevi', sans-serif;
}

.bgImage {
  height: 300px;
  padding: 1em;
  text-align: center;
}

.bgImage img {
  width: auto;
  border-radius: 3px;
}

#introSection {
  margin-top: 20px
}

#introSection h1 {
  animation: fadeIn 7.5s;
  font-family: 'Bodoni Moda', serif;
  font-size: 40px;
  font-weight: 500;
  border-radius: 3px;
  letter-spacing: 1px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0;
  margin: 0;
}

#introSection p {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
  font-size: 16px;
  padding: 0;
  text-align: center;
  width: 75%;
  margin: 0 auto;
  padding: 10px;
}

#buttonGroup {
  display: grid;
  width: 150px;
  margin: 0 auto;
  padding: .5em;
  text-align: center;
}

#buttonGroup a {
  background-color: #fff;
  color: #000;
  font-family: 'Yaldevi', sans-serif;
  margin: 0;
  height: 25px;
  border-radius: 3px;
  border: .5px solid #000;
  padding: 10px;
  text-align: center;
}

#buttonGroup a:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  font-weight: bold;
}


/* Modal Slideshow Start */
.row>.column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  background-color: #000;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 75%;
  margin: 0 auto;
}

/* Set width of thumbnail images */
.column .bgImage,
.column .bgImage img {
  width: 90px;
  height: auto;
  animation: none;
}


/* The Modal (background) */
.modal {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: none;
  position: fixed;
  z-index: 3;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #000;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

.mySlides picture {
  background-color: rgba(0, 0, 0, .6);
}

/* Make SlideShow Img Fit */
.mySlides {
  height: auto;
  width: auto;
}

.mySlides img {
  height: 100%;
  width: 100%;
  animation: none;
  padding: 0px;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

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

.prev {
  margin-left: -5%;
}

.next {
  margin-right: -5%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  color: #003049;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  z-index: 5;
}

/* Caption text */
.caption-container {
  text-align: center;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* Modal Slideshow End */
/* Intro Ends */


/* Section Three Outer Grid */
.outerGrid {
  display: grid;
  grid-template-columns: .2fr 1fr .2fr;
  ;
}

#outerGridFirstDiv {
  padding: 2em;
}

#leftArrow,
#rightArrow {
  margin: 6em auto;
  color: #5F544E;
}

#leftArrow .material-symbols-sharp:hover,
#rightArrow .material-symbols-sharp:hover {
  font-weight: bolder;
}

#div0,
#div1,
#div2,
#div3,
#div4 {
  margin-top: -17px;
  padding-bottom: 3em;
}

/* Section Three Outer Grid End */

/* News Starts */
.news {
  margin: 0;
  padding: 0;
}

.sectionTitle {
  font-family: 'Bodoni Moda', serif;
  font-size: 14px;
  font-weight: 400;
  margin: -10px auto;
  text-align: center;
  color: #fff;
  background-color: #003049;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 0;
  padding: 1em;
}

#div1 .sectionTitle,
#div2 .sectionTitle,
#div3 .sectionTitle {
  background-color: #003049;
  color: #fff;
}

#returnTop {
  background-color: rgba(0, 0, 0, .1);
  font-family: 'Bodoni Moda', serif;
  font-size: 14px;
  margin: 0;
  padding: .5em;
  text-align: center;
}

.newsCard {
  border: 1px solid #eee;
  color: #000;
  padding: 1em;
  margin-top: 1em;
  border-radius: 3px;
  text-align: center !important;
}

.newsCard:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.newsCard small,
.newsCard p {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 200;
  padding: 1em;
  font-size: 14px !important;
}

.newsCard h5 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  color: #000;
  letter-spacing: 1px;
  font-size: 16px;
}

.newsCard h5:hover {
  text-decoration: underline;
}

.newsCard a {
  font-weight: 400;
}

.newsCard a:hover {
  border: none;
}

.newsButtonGrid {
  border: .5px solid #eee;
  border-radius: 3px;
  font-family: 'Yaldevi', sans-serif;
  padding: 5px 5px;
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 60%;
  font-weight: 300;
  background-color: #fff !important;
  color: #000 !important;
  margin-top: 60px;
  margin: 0 auto;
}

.newsButtonGrid:hover {
  font-weight: bolder;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.newsCard a span:nth-child(2) {
  font-size: 18px;
  text-align: right;
}

/* News Ends */

/* Research Section Homepage Start*/
#gridRS {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: #fff;
  color: #000;
  column-gap: 1em;
  row-gap: 1em;
  padding: 2em 12em;
}

.researchCard a {
  border: .5px solid #eee;
  border-radius: 3px;
  color: #000;
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  padding: .5em;
  margin: 0;
  display: grid;
  height: 60px;
  text-align: center;
}

.researchCard span {
  margin-top: 15px;
  font-size: 14px;
}

.researchCard a:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  letter-spacing: .5px;
}

.bi,
.bi::before {
  vertical-align: 0px;
}

#moveDissIcon {
  vertical-align: -15px !important;
}

#moveDissText {
  top: -10px !important;
}

/* Research Section Homepage End */

/* PI Section Start */
#gridPI {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1em;
  margin: 0 auto;
  width: 75%;
  padding: 1em;
}

.centerText {
  display: flex;
  justify-content: center;
  align-items: center;
}

#gridPI #heading {
  font-size: 2em;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 100;
  margin: 0 auto;
  color: #000;
  letter-spacing: 1.2px;
}

#c-fw {
  font-weight: 700;
}

#innerPiGrid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1em;
  margin-top: 2em;
}

#innerPiGrid a {
  color: #000;
  font-weight: 500;
}

#innerPiGrid img {
  width: auto;
  height: 175px;
  box-shadow: rgb(50 50 93 / 25%) 0px 13px 27px -5px, rgb(0 0 0 / 30%) 0px 8px 16px;
}

#innerPiGrid div:nth-child(2) {
  font-size: 1em;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 1.2px;
  margin-top: -15px;
}

#innerPiGrid a:hover {
  font-weight: 700;
}

.piVidGrid {
  display: grid;
  text-align: center;
  margin: 0;
  padding: 0;
}

.videoCarousel {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.piVideos {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.piVideos iframe,
#sliderForPodcastImage {
  height: inherit;
  width: 100%;
  border-radius: 3px;
}

#sliderForPodcastImage {
  background-image: url('img/IMG_0295.webp');
  background-size: cover;
  background-position: center;
  font-family: 'Bodoni Moda', serif;
}

_:default:not(:root:root),
#sliderForPodcastImage {
  background-image: url('img/IMG_0295.jpg');
}


#sliderForPodcastImage h1,
#sliderForPodcastImage p {
  width: max-content;
  background-color: rgba(0, 0, 0, .7);
  border-radius: 3px;
  color: #fff;
  padding: 5px;
}

#sliderForPodcastImage p {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
}

#sliderForPodcastImage a {
  color: #fff;
}

#sliderForPodcastImage a:hover {
  color: #000;
}

input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 5px;
  /* background-color only for content */
  border: .5px solid #000;
  background-color: transparent;
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-color: #003049;
}

/* PI Section End */

/* Team Outings Section Start */
#gridTO {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 1em;
  width: 100%;
  margin: 6em auto;
  text-align: center;
}

#gridTO img {
  width: auto;
  height: 250px;
  border-radius: 3px;
}

.photoOuterGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 3em;
}

#gridTONew {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1em;
  width: 100%;
  padding-top: 3em;
  padding-bottom: 3em;
  text-align: center;
}


#gridTONew img {
  width: auto;
  height: 250px;
  border-radius: 3px;
}

#gridTONew img:hover {
  opacity: .9;
}

.imageTitles,
.mobileImageTitles {
  color: #fff;
  background-color: rgba(0, 0, 0, .5);
  font-family: 'Yaldi';
  font-weight: Yaldevi;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  visibility: hidden;
  z-index: 1;
  padding: 5px;
}

/* Team Outings Section End */

/* Team Members Start */
#teamSectionGrid {
  display: grid;
  grid-template-columns: 8em auto;
}

#teamNavigationGrid {
  display: grid;
  height: auto;
}

#teamNavigation div {
  font-family: 'Yaldevi', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#teamNavigation a:hover {
  text-decoration: underline;
}

#teamNavigation div:nth-child(9) {
  border-bottom: none;
}

#teamNavigation {
  border-right: .5px solid #eee;
}

.labMembersTitle {
  text-align: center !important;
  margin-top: 1.5em !important;
}

#teamMembersSection {
  padding: 0;
  text-align: center !important;
  margin-top: 1em;
}

#teamMembersSection .firstTitle {
  text-align: center !important;
  font-family: 'Bodoni Moda', serif;
  font-size: 1.5em;
  font-weight: 400;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0;
  padding-bottom: 1em;
  background-color: #fff;
  color: #000;
  border: none;
}

#currentTeamMembersSection {
  text-align: center;
  padding: 0;
  padding-bottom: 5em;
}

#currentTeamMembersSection h3 {
  background-color: rgb(253, 252, 251);
  font-size: 14px;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
  padding: 10px;
  letter-spacing: 2px;
  width: max-content;
  margin: 10px auto;
  text-transform: uppercase;
}

.bioContactGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  padding: 5px;
  text-align: center !important;
}

.bioContactGrid a {
  height: auto;
  margin: 0;
  padding: 0;
  width: 100%;
}

.bioContactGrid .material-symbols-sharp {
  font-size: 20px;
}

.rowOne {
  display: grid;
}

.rowTwo {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  width: 75%;
  margin: 2em auto;
}

.rowThree {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 10px;
  row-gap: 2em;
  margin-top: 4em;
}


#formerMembersGrid,
#currentRotationStudentsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, auto));
  column-gap: 10px;
  row-gap: 2em;
  margin: 5em auto;
  width: 85%;
}

#teamMembersSection img {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  width: 200px;
  height: auto;
}

.formerMembersIcon {
  width: 88px !important;
  height: 88px !important;
  box-shadow: none !important;
  margin: 0 auto !important;
}

.ctmImage,
.rsImage {
  opacity: 0;
  -webkit-transition: all 3s;
}

.newsCard .collabIcon {
  height: auto;
  width: 50px;
  margin: 0 auto;
  box-shadow: none;
  padding: 0;
  opacity: 0;
  -webkit-transition: all 1s;
}

.emoji {
  font-size: 22px;
  background-color: #fff;
  border-radius: 25px;
  padding: .5em;
}

.teamMemberBody {
  display: grid;
  row-gap: 10px;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
}

.teamMemberBody p {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

.teamMemberBody a {
  color: #000 !important;
  font-size: 14px;
}

.teamMemberBody a:nth-child(3) {
  font-style: italic;
  font-weight: 500;
}

.rowOne .bioLink {
  display: grid;
  grid-template-columns: 95% 5%;
  width: 10%;
  margin: 0 auto;
}

.rowTwo .bioLink {
  display: grid;
  grid-template-columns: 95% 5%;
  width: 30%;
  margin: 0 auto;
}

.rowThree .bioLink {
  display: grid;
  grid-template-columns: 95% 5%;
  width: 35%;
  margin: 0 auto;
}

.rowFour .bioLink {
  display: grid;
  grid-template-columns: 95% 5%;
  width: 50%;
  margin: 0 auto;
}

.bioLink span:nth-child(2) {
  text-align: left;
}

.bioLink .material-symbols-sharp {
  font-size: 18px;
}

.introPara {
  width: 75%;
  margin: 4em auto;
}

.introPara h3 {
  font-size: 16px;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1px;
}

.scholarDivInfo {
  width: auto;
  margin: 0 auto;
}

#formerMembersGrid div,
#currentRotationStudentsGrid div {
  background-position: center;
  display: grid;
  margin: 0 auto;
  padding: 1em;
  height: auto;
  width: 75%;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-align: center;
}

#formerMembersGrid div svg,
#currentRotationStudentsGrid div svg,
#collaboratorsGrid div svg {
  height: 88px;
  width: 88px;
  margin: 0 auto;
  box-shadow: none;
  padding: 1em;
}

#currentTeamMembersSection .memberName {
  font-size: 1em !important;
  letter-spacing: .5px;
}

.memberName {
  scale: 100%;
  font-size: 18px !important;
  font-weight: 500 !important;
  font-family: 'Bodoni Moda', serif !important;
  margin: 0;
}



.learnMore,
.contact {
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
  font-size: 14px;
}

.learnMore {
  font-weight: 500;
}

.learnMore:hover,
.contact:hover {
  color: rgb(138, 129, 124);
  text-decoration: none;
  font-weight: 500;
}

.memberRole {
  width: 75%;
  margin: 0 auto;
}

.learnMoreLink {
  display: grid;
  grid-template-columns: auto 10%;
  width: 40%;
  margin: 0 auto;
  text-align: left;
}

.learnMoreLink span {
  font-size: 12px !important;
}

.learnMoreLink:hover {
  font-weight: bolder;
}

.learnMoreLink .material-symbols-sharp {
  font-size: 15px !important;
  margin-left: -3px;
  margin-top: 3px;
}

/* Modal Styles for Team Member Bios Start */
.overLay {
  width: 300px;
  height: 80px;
  font-size: 25px;
  cursor: pointer
}

.modalbox {
  width: 100%;
  font-family: 'Yaldevi', sans-serif;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(81, 51, 51, 0.5);
  z-index: 99999;
  pointer-events: auto;
  display: none;
  overflow-y: auto;
}

.modalbox>.dialog {
  font-family: 'Yaldevi', sans-serif;
  max-width: 100%;
  max-height: auto;
  position: relative;
  top: 10px;
  margin: 0% 10%;
  padding: 5px 20px 13px 20px;
  background: #ffffff;
  box-shadow: 0 0 10px #000000;
  -moz-box-shadow: 0 0 10px #000000;
  -webkit-box-shadow: 0 0 10px #000000;
  display: block;
  pointer-events: auto;
  text-align: left;
}

.closebutton {
  float: right;
  color: #000;
  cursor: pointer;
  padding: 1em;
}

.dialog div {
  padding: 3em;
  letter-spacing: 1px;
  line-height: 32px;
}

.dialog div h1,
.dialog div strong {
  color: #003049;
  font-family: 'Bodoni Moda', serif;
}

.dialog div strong {
  font-size: 1em;
}

/* Modal Styles for Team Member Bios End */
/* Team Members End */

/* News Section Start */
#newsSectionGrid {
  display: grid;
  grid-template-columns: 4em auto;
}

#newsNavigationGrid {
  display: grid;
  height: auto;
}

#newsNavigation div {
  font-family: 'Yaldevi', sans-serif;
  font-size: 18px;
  font-weight: 300;
  padding: 10px 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#newsNavigation div:nth-child(9) {
  border-bottom: none;
}

#newsNavigation {
  border-right: .5px solid #eee;
}

#newsNavigation a,
#researchNavigation a {
  color: #8a817c;
}

#newsNavigation a:hover,
#researchNavigation a:hover {
  color: #463f3a;
  font-weight: bolder;
  text-decoration: none !important;
}

#newsMain {
  margin: 1em 1.5em;
}

#newsMain #gridOne {
  margin: 0;
}

.subNewsTitle,
.subNewsTitle2,
.subNewsTitle3,
.subNewsTitle2 a {
  color: #003049 !important;
  font-family: 'Yaldevi', sans-serif;
  letter-spacing: 3px;
  font-weight: 500 !important;
  font-size: 1.5em;
  padding: 0;
  margin: 0;
  text-align: left !important;
}

.subNewsTitle3 {
  margin-top: 2em;
  text-align: center !important;
}

#newsMain .newsCard {
  background-color: rgba(237, 224, 212, .15);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  color: #000;
  font-weight: 300;
  padding: 2em .5em;
  border-radius: 3px;
  text-align: center;
}


#newsMain .newsCard a h5 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  color: #000;
  font-size: 16px;
}

#newsMain .newsCard a h5:hover {
  text-decoration: underline;
}

#newsMain .newsCard a,
.newsMainBody a {
  font-weight: 500;
  color: #000;
}

#newsMain .newsCard a,
.newsMainBody a:hover {
  font-weight: 700;
}

.newsMainBody a:hover {
  border: none;
}

#newsMain .newsCard small {
  font-size: 12px;
}

.newsMainBody {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
  font-size: 1em;
}

#year2023,
#year2022,
#year2021,
#year2020,
#year2019,
#year2018,
#year2017 {
  padding: 3.5em 0em;
}

.newsMainBody ul li {
  list-style-type: circle;
}

.breadCrumbMobileGrid {
  display: grid;
  grid-template-columns: auto;
  margin: 0 auto;
  padding: 5px;
  width: auto;
  text-align: center;
  row-gap: 10px;
  column-gap: 10px;
}

.breadCrumbMobileGrid a {
  font-size: 16px;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 600;
  border: 0.5px solid rgba(94, 84, 85, .8);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px;
  padding: 5px;
}

.breadCrumbMobileGrid a:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

details {
  padding: 5px;
  border-radius: 3px;
  width: 95%;
  margin: 5% auto;
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  display: grid;
  grid-template-columns: auto auto;
  font-family: 'Yaldevi', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #003049;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: max-content;
  margin: 0 auto;
}

.sumGrid {
  display: grid;
  grid-template-columns: 90% 10%;
  border: 0.5px solid rgba(94, 84, 85, .8);
  border-radius: 3px;
  padding: 17px;
}

.breadCrumbMobile .material-symbols-sharp {
  margin-top: -5px;
  margin-left: -10px;
  font-weight: 900;
}

details[open] {
  padding: 5px;
  margin-top: 5%;
}

details[open] summary {
  margin-bottom: 0;
}

/* News Section End */

/* Research Section Start */
.researchBcMobile a {
  background-color: #fff;
  border: none;
}

.researchBcMobile a:hover {
  box-shadow: none;
}

.researchBcMobile i {
  font-size: 30px;
}

#researchSectionGrid {
  display: grid;
  grid-template-columns: 8em auto;
}

.apcTeamSectionGrid {
  grid-template-columns: 6em auto !important;
}

.researchInfo {
  display: grid;
  grid-template-columns: auto auto;
}

#researchNavigationGrid {
  display: grid;
  height: auto;
}

#researchNavigation div {
  font-family: 'Yaldevi', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}


#researchNavigation div:nth-child(9) {
  border-bottom: none;
}

#researchNavigation {
  border-right: .5px solid #eee;
}

#researchMain {
  padding-bottom: 3em;
}

.researchMenuItems i {
  font-size: 24px;
  font-weight: 100;
  color: grey;
}

.researchMainBody {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 28px;
  padding: 1em;
}

.subResearchTitle,
.subResearchTitle2 {
  color: #003049;
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.5em;
  padding: 0;
  margin: 0;
  text-align: left;
}

.subResearchTitle2 {
  font-size: 1.8em;
  padding: 0.5em !important;
}

.researchImage {
  text-align: center;
  padding: 0;
  margin-top: 1em;
  border-radius: 3px;
}

.researchImg figcaption {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 500;
  font-size: 12px;
  margin: 0 auto;
  padding: 0;
  text-align: justify;
  width: 80%;
  padding-bottom: 3em;
}

.researchImg figcaption ol li {
  line-height: normal;
  padding: 0;
  margin: 0;
}

#rsImg2 figcaption ol li {
  list-style-type: upper-alpha;
}

#rsImg3 figcaption ol li {
  list-style-type: none;
}

.researchImg img {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  width: 100%;
  height: auto;
  margin-top: 1em;
}

.referencesBody {
  font-family: 'Yaldevi', sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-top: 3em;
}

.referencesBody hr,
#newsMain hr {
  height: .1px;
  border-width: .1px !important;
  color: #d8d3d3 !important;
  border-style: solid !important;
  margin-block-start: 0 !important;
}

.mobileImage img {
  padding: 2em;
  height: auto;
  width: 75%;
}

.mobileImage figcaption {
  width: 75%;
  font-size: 12px;
  line-height: normal;
  margin: 0 auto;
  margin-bottom: 3em;
  font-weight: 500;
}

/* Research Section End */

/* Collaborators Start */
#collaboratorsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, auto));
  column-gap: 1em;
  row-gap: 5em;
  margin: 3em auto;
  width: 85%;
}

#collaboratorsGrid div {
  display: grid;
  text-align: center;
}

.collabName {
  font-size: 16px !important;
  font-weight: 700;
  font-family: 'Bodoni Moda', serif !important;
  padding: 5px;
  margin: 0;
}

.collabLink {
  color: #003049;
  font-family: 'Yaldevi', sans-serif;
  font-weight: 300;
  font-size: 14px;
}

.collabLink:hover {
  font-weight: 400;
  color: #463f3a;
}

.collabIcon {
  margin: 0 auto;
}

/* Collaborators End */

/* APC Start */
.apcSecondSection {
  padding-bottom: 2em;
}

#apcImage {
  background-image: url('img/pattern-7.webp');
  background-size: cover;
  border-radius: 3px;
  height: 400px;
  margin: 1em;
  text-align: center;
  width: 600px;
}

_:default:not(:root:root),
#apcImage {
  background-image: url('img/pattern-7.png');
}

#apcImage h1 {
  border-radius: 3px;
  color: #000;
  font-family: 'Bodoni Moda', serif;
  font-size: 7em;
  font-weight: 100;
  padding: 10px;
}

.apcMainBody p a,
.apcMainBody strong {
  font-weight: 500;
  color: rgb(0, 0, 0);
}

.apcMainBody p a:hover {
  font-weight: 700
}

#apcServicesGrid {
  column-gap: 5px;
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 5em;
  width: 600px;
  margin-top: 20px;
}

.apcInfoGrid {
  grid-template-columns: auto;
}

.apcTitle {
  padding: 1em !important;
}

#apcTeamGrid {
  column-gap: 20px;
  row-gap: 30px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  margin-top: 20px;
  padding-left: 1em;
}

#apcTeamGrid div {
  border-radius: 3px;
  padding: 1em;
  text-align: center;
}

#apcTeamGrid div p {
  padding: 0;
  margin: 0;
  color: #000;
}

#apcTeamGrid div img {
  border-radius: 3px;
  width: 250px;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#apcTeamGrid .div1,
#apcTeamGrid .div2,
#apcTeamGrid .div3,
#apcTeamGrid .div4 {
  background-color: transparent;
}


#apcServicesGrid h2 {
  color: #fff;
  font-family: 'Bodoni Moda', serif;
  letter-spacing: 1px;
  padding: 1em;
}

#apcServicesGrid p {
  color: #fff;
  font-family: 'Bodoni Moda', serif;
  font-size: 1em;
  padding: 0;
}

/* Flipping Apc Services Grid Boxes Start */
.flip-box {
  height: 250px;
  width: 250px;
  perspective: 1000px;
}

.flip-box-inner {
  border-radius: 3px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transition: transform 1s;
  transform-style: preserve-3d;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
}

.flip-box-back {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.div1 {
  background-color: rgb(88, 110, 128);
}

.div2 {
  background-color: rgb(32, 38, 55);
}

.div3 {
  background-color: rgb(94 84 85);
}

.div4 {
  background-color: rgb(253, 252, 251);
}

/* Flipping Apc Services Grid Boxes End */
/* APC End */

/* Dissertations Start */
#dissSectionGrid {
  display: grid;
  grid-template-columns: 6em auto;
}

.dissNavGrid a {
  font-size: 14px;
}

.subDissTitle2 {
  color: #003049;
  font-family: 'Yaldevi', sans-serif;
  font-size: 1.2em;
  font-weight: 100 !important;
  letter-spacing: 3px;
  margin-top: 1.5em;
  text-align: left !important;
}

.dissIframe {
  text-align: center;
  padding-bottom: 5%;
}

.dissIframe iframe {
  width: 450px;
  height: 328px;
}

.dissertation {
  padding-bottom: 10%;
}

.dissIframe p {
  color: #003049;
  font-family: 'Bodoni Moda', serif;
  padding-top: 5%;
}

/* Dissertations End */

/* Contact Start */
.contactGrid {
  height: 100vh;
  position: relative;
  display: flex;
}

.googleMap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  right: 0;
  bottom: 0;
}

/* Contact End */


/* Footer Section Start */
footer {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 1em 1em;
  background-color: #a1c5ce;
  border-top: .5px solid;
  border-color: #eee;
}

footer ul {
  margin-top: -20px;
  padding-left: 0px;
}

footer ul li {
  list-style-type: none;
  font-size: 14px;
}

#footerTextBreak {
  display: none;
}

#leftCol {
  text-align: left;
  font-family: 'Yaldevi', sans-serif;
}

#leftCol h2 {
  font-family: 'Bodoni Moda', serif;
}

#rightCol {
  text-align: right;
  font-family: 'Yaldevi', sans-serif;
  padding-top: 55px;
}

.footerSecondGrid {
  display: grid;
}

.footerSecondGrid div a {
  margin-top: 2em;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footerSecondGrid div a:hover {
  font-weight: bold;
}

/* Footer Section End */