/*!
 * Squires Lab additional css (as needed)
 */

/*-- Font-Awesome --*/
:root, :host {
    --fa-style-family-classic: 'Font Awesome 6 Free';
    --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
  
  @font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.ttf") format("truetype"); }
  
  .fas,
  .fa-solid {
    font-weight: 900; }
  


/*-- Body Reset --*/
body {
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    color: #4b5055;
    height: 100%;
}

div {overflow: hidden;
    text-overflow: ellipsis;
}

/*-- change some other properties - AHS-specific --*/
a {
    text-decoration: none
}
/*-- a:hover {
    text-decoration: underline
} */

/*-- UCHICAGO COLORS --*/
.white-back {
    background-color: #fff
}
.black-back {
    background-color: #000
}
.maroon-back {
    background-color: maroon
}
.dark-gray-back {
    background-color: #767676
}
.light-gray-back {
    background-color: #d6d6ce
}
.yellow-back {
    background-color: #ffa319
}
.light-yellow-back {
    background-color: #ffb547
}
.dark-yellow-back {
    background-color: #cc8214
}
.orange-back {
    background-color: #c16622
}
.light-orange-back {
    background-color: #d49464
}
.dark-orange-back {
    background-color: #9a5324
}
.red-back {
    background-color: #8f3931
}
.light-red-back {
    background-color: #b1746f
}
.dark-red-back {
    background-color: #642822
}
.lightgreen-back {
    background-color: #8a9045
}
.light-lightgreen-back {
    background-color: #adb17d
}
.dark-lightgreen-back {
    background-color: #616530
}
.darkgreen-back {
    background-color: #58593f
}
.light-darkgreen-back {
    background-color: #8a8b79
}
.dark-darkgreen-back {
    background-color: #3e3e23
}
.blue-back {
    background-color: #155f83
}
.light-blue-back {
    background-color: #5b8fa8
}
.dark-blue-back {
    background-color: #0f425c
}
.violet-back {
    background-color: #350e20
}
.light-violet-back {
    background-color: #725663
}
.white-border {
    border-color: #fff
}
.black-border {
    border-color: #000
}
.maroon-border {
    border-color: maroon
}
.dark-gray-border {
    border-color: #767676
}
.light-gray-border {
    border-color: #d6d6ce
}
.yellow-border {
    border-color: #ffa319
}
.light-yellow-border {
    border-color: #ffb547
}
.dark-yellow-border {
    border-color: #cc8214
}
.orange-border {
    border-color: #c16622
}
.light-orange-border {
    border-color: #d49464
}
.dark-orange-border {
    border-color: #9a5324
}
.red-border {
    border-color: #8f3931
}
.light-red-border {
    border-color: #b1746f
}
.dark-red-border {
    border-color: #642822
}
.lightgreen-border {
    border-color: #8a9045
}
.light-lightgreen-border {
    border-color: #adb17d
}
.dark-lightgreen-border {
    border-color: #616530
}
.darkgreen-border {
    border-color: #58593f
}
.light-darkgreen-border {
    border-color: #8a8b79
}
.dark-darkgreen-border {
    border-color: #3e3e23
}
.blue-border {
    border-color: #155f83
}
.light-blue-border {
    border-color: #5b8fa8
}
.dark-blue-border {
    border-color: #0f425c
}
.violet-border {
    border-color: #350e20
}
.light-violet-border {
    border-color: #725663
}
.white-text {
    color: #fff
}
.black-text {
    color: #000
}
.maroon-text {
    color: maroon
}
.dark-gray-text {
    color: #767676
}
.light-gray-text {
    color: #d6d6ce
}
.yellow-text {
    color: #ffa319
}
.light-yellow-text {
    color: #ffb547
}
.dark-yellow-text {
    color: #cc8214
}
.orange-text {
    color: #c16622
}
.light-orange-text {
    color: #d49464
}
.dark-orange-text {
    color: #9a5324
}
.red-text {
    color: #8f3931
}
.light-red-text {
    color: #b1746f
}
.dark-red-text {
    color: #642822
}
.lightgreen-text {
    color: #8a9045
}
.light-lightgreen-text {
    color: #adb17d
}
.dark-lightgreen-text {
    color: #616530
}
.darkgreen-text {
    color: #58593f
}
.light-darkgreen-text {
    color: #8a8b79
}
.dark-darkgreen-text {
    color: #3e3e23
}
.blue-text {
    color: #155f83
}
.light-blue-text {
    color: #5b8fa8
}
.dark-blue-text {
    color: #0f425c
}
.violet-text {
    color: #350e20
}
.light-violet-text {
    color: #725663
}



/*============= Custom Buttons =============*/
.btn-maroon {
    color: #fff;
    background-color: maroon;
    border-color: maroon
}

.btn-maroon:hover {
    color: #fff;
    background-color: rgb(206, 91, 91);
    border-color: rgb(206, 91, 91);
}

.btn-check:focus+.btn-maroon,
.btn-maroon:focus {
    color: #fff;
    background-color: rgb(206, 91, 91);
    border-color: rgb(206, 91, 91);
    box-shadow: 0 0 0 .25rem rgba(206, 91, 91, .5)
}

.btn-check:active+.btn-maroon,
.btn-check:checked+.btn-maroon,
.btn-maroon.active,
.btn-maroon:active,
.show>.btn-maroon.dropdown-toggle {
    color: #fff;
    background-color: rgb(206, 91, 91);
    border-color: rgb(206, 91, 91);
}

.btn-check:active+.btn-maroon:focus,
.btn-check:checked+.btn-maroon:focus,
.btn-maroon.active:focus,
.btn-maroon:active:focus,
.show>.btn-maroon.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(206, 91, 91, .5)
}

.btn-maroon.disabled,
.btn-maroon:disabled {
    color: #fff;
    background-color: rgb(206, 91, 91);
    border-color: rgb(206, 91, 91)
}



/*============= TOP BAR HEADER =============*/

/* .top-bar {
    background: maroon;
    height: 2.8rem;
    padding: 0.5rem 0;
}
.top-bar a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
} */

/*============= NAVIGATION =============*/

.navbar-dark {
    background: maroon;
}


.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8)
} 

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.55)
} 

.navbar-dark .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.35)
} 

/*.navbar-brand img {
    height: 1.6rem;
} */

.navbar {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.07rem;
    box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,.2);
    z-index: 1;
}

.dropdown-menu {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.07rem;
}

/*.nav-link.active,
.nav-link:hover {
    color: #ffb547!important;
}*/

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #cda19d;
    color: maroon !important;
}


/*============= CAROUSEL =============*/

#homecarousel,
#peoplecarousel,
#researchcarousel, 
#contactcarousel,
#newscarousel,
#publicationscarousel {
    box-shadow: 0 1rem 1rem rgba(0,0,0,.2);
    background-color: #000
}




/*header.carousel-inner {
    height: 100%;
    max-height: 1rem!important;
}*/
    

.carousel-indicators [data-bs-target]{
    border-radius: 100%;
    width: 10px;
    height: 10px;
    z-index: 3;
}

.carousel-control-prev-inside {
    align-items: right;
    justify-content: right;
    text-align: right;
    width: 25%;
}
.carousel-control-next-inside {
    align-items: left;
    justify-content: left;
    text-align: left;
    width: 25%;
}


#homecarousel .carousel-item img  {
    object-fit: cover;
    object-position: center;
    height: calc(80vh - 2.8rem - 0.5rem);
    max-height: 40rem!important;
    overflow: hidden;
    opacity: 0.7;
}

/* change carousel height here */
#peoplecarousel .carousel-item img,
#researchcarousel .carousel-item img,
#contactcarousel .carousel-item img,
#newscarousel .carousel-item img,
#publicationscarousel .carousel-item img    {
    object-fit: cover;
    object-position: center;
    height: calc(55vh - 2.8rem - 0.5rem);
    min-height: 15rem!important;
    max-height: 40rem!important;
    overflow: hidden;
    opacity: 0.7;
}


.intro-icon-l {
    position: absolute;
    padding-bottom: 26px;
    padding-left: 20px;
    bottom: 0;
    left: 0;
    max-width: 30%;
    z-index: 2;
}

.intro-icon-r {
    position: absolute;
    padding-bottom: 26px;
    padding-right: 20px;
    bottom: 0;
    right: 0;
    max-width: 30%;
    z-index: 2;
}

.intro-logo {
    position: absolute;
    z-index: 1;
    top: calc(30vh - 2.8rem - 0.5rem);
    /*padding-top: 20rem;*/
    object-position: center;
    padding-left: 15%;
    padding-right: 15%;
   /* padding-bottom: 50%;*/
    text-align: center;
    width: 100%;
}

.intro-text {
    position: absolute;
    z-index: 1;
    top: calc(25vh - 2.8rem - 0.5rem);
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 3rem;
    font-weight:bold;
}
@media all and (max-width:450px) and (min-width:371px) {

    .intro-text {
        font-size: 2.5rem;
    }
}
@media all and (max-width:370px) and (min-width:100px) {

    .intro-text {
        font-size: 2rem;
    }
}

.container-sl{
    width: 100%;
    margin-inline: auto;
}
@media screen and (min-width:1300px) {

    .container-sl {
        width: 1300px;
        margin-inline: auto;
    }  
}
    

#homecarousel .carousel-caption {
    /* top: 50%!important; */
    top: calc(30vh - 2.8rem - 0.5rem + 5rem)!important;
    text-shadow: 0px 0px 6px #000000;
} 

/* #peoplecarousel .carousel-caption {
    top: calc(23vh - 2.8rem - 0.5rem + 5rem)!important;
    text-shadow: 0px 0px 6px #000000;
} */

#homecarousel header.carousel>.intro-logo>.btn {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.07rem;
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
    text-shadow: 0 0 6px rgba(0,0,0,0.9);
    border-width: 2px;
}

header.carousel>.intro-logo>.btn:hover {
    text-shadow:none;
} 

#homecarousel .carousel-control-prev-icon
{
    width: 40px;
    height: 40px;
    z-index: 3;
}
    
#homecarousel .carousel-control-next-icon
{
    width: 40px;
    height: 40px;
    z-index: 3;
} 

/*-- .carousel-drkimg::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.4;
    z-index: 1;
} --*/


/*---Change Carousel Transition Speed --*/
.carousel-item {
    transition: transform 1.2s ease-in-out;
}

.carousel-footer {
    box-shadow: 0 1rem 1rem rgba(0,0,0,.2);
    margin: 0px!important;
    padding: 0px!important;
    max-width: none;
}

/*-- Carousel Content --*/



/*=====Intro ====*/
.main-banner-quote.h5 {
    border: 0; 
    text-align: center;
    font-size: 18px;
    font-weight: lighter;
}

hr {
    opacity: 1;
    background-repeat: no-repeat;
    color: maroon;
    height: 2px !important;
    width: 40%;
    margin: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/*===== TEASER ROWS - RESEARCH =====*/
/*.teaser-row {
    overflow: hidden;
    min-height: 300px;
    padding-bottom: 6px;
    padding-top: 6px
}*/

.card {
    border-radius: 0;
    box-shadow: 0 0 1rem rgba(0,0,0,.4);
    border: none;
}

.card-teaser-right {
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    background-size:cover;
    height:auto;
    max-height:600px;
    background-color:white;
    background-size: cover;
    border: none;
}

.card-teaser-left {
    text-align:right;
    background-repeat: no-repeat;
    background-position: left;
    position: relative;
    background-size:cover;
    height:auto;
    max-height:600px;
    background-color:white;
    background-size: cover;
    border: none;
}

.text-reduced-height {
    line-height: 1.3em!important; 
} 

.text-smallest-height {
    line-height: 0.5em!important; 
}


.card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#teaserResearch.card-teaser-right {
    background-image: linear-gradient(to right, rgba(255, 255, 255,1) 30%, rgba(255,255,255,0) 90%), url("../graphics/teasers/2021_JiachongPipetting_2.jpg");
}

#teaserGroup.card-teaser-left {
    background-image: linear-gradient(to left, rgba(255, 255, 255,1) 30%, rgba(255,255,255,0) 90%), url("../graphics/teasers/2021_ABELKyleAyeshaAHS_2.jpg");
}



/*===== News Carousel =====*/
.img-news {
    object-fit: cover;
    object-position: center;
    height: calc(55vh - 2.8rem - 0.5rem);
    min-height: 15rem!important;
    max-height: 40rem!important;
    overflow: hidden;
    opacity: 0.7;
}


/*#carouselteasernews .carousel-control-prev {
    left: calc(8vw);
}

#carouselteasernews .carousel-control-next {
    right: calc(8vw);
}*/

div#carouselteasernews button {
    bottom: auto;
}



/*===== FIXED BACKGROUND IMG =====*/

.fixed-background {
    overflow: hidden; /*-- Correction for iOS --*/
  }
  
  
  /*-- Emoji Navbar --*/
  

  /*============= FUNDING =============*/
  .funding-bar {
    box-shadow: 0 0 1rem rgba(0,0,0,.2);
    background: lightgray;
    padding: 0.5rem 0;
}
.funding-bar p {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
} 
  
  /*============= FOOTER =============*/
 .footer-bar {
    box-shadow: 0 0 1rem rgba(0,0,0,.2);
    background: maroon;
    padding: 0.5rem 0;
    text-align: center;
    color: white;
    text-decoration: none;
    font-size: 1rem;
}
.footer-bar a {
    color: white;
    text-decoration: underline;
} 
  
  
  /*============= RESEARCH =============*/
  
.img-research {
    max-block-size: 400px;
}

.figure-caption-sl {
    line-height: 1.3em!important; 
    font-size: .75em;
    color: #6c757d;
    max-width: 375px;
    min-width: 250px;
} 
  
 /*============= PEOPLE =============*/
  .headshot {
    max-width: 500px;
    max-height: 500px;
    /* object-fit: cover;
    object-position: center;
    align-self: center;*/
  }

  .headshot-alumni {
    position: left;
    max-width: 100px;
    max-height: 100px;
    padding: 0;
    margin:0;
}

  /*============= PUBLICATIONS =============*/
  
::marker {
    font-variant-numeric: tabular-nums;
}

.bibliography::marker {
    text-align: left;
    padding: 5px 20px 5px 40px;
    position: relative;
    width: 90%;
    margin: auto;
    font-size: 0.3rem;
}

.bibliography li {
    padding-bottom: 0.5rem;
    font-size: 0.9em;
}


#map {
    height: 400px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }




  /*============= MEDIA QUERIES =============*/
  
  /* Devices under 1199px (xl) */
  @media (max-width: 1199.98px) {
  
  }
  /* Devices under 768px (md) */
  @media (max-width: 767.98px) {
  
  }




  
  
  /*============ BOOTSTRAP BREAK POINTS:
  
  Extra small (xs) devices (portrait phones, less than 576px)
  No media query since this is the default in Bootstrap
  
  Small (sm) devices (landscape phones, 576px and up)
  @media (min-width: 576px) { ... }
  
  Medium (md) devices (tablets, 768px and up)
  @media (min-width: 768px) { ... }
  
  Large (lg) devices (desktops, 992px and up)
  @media (min-width: 992px) { ... }
  
  Extra (xl) large devices (large desktops, 1200px and up)
  @media (min-width: 1200px) { ... }
  
  =============*/
  
  /*-- Bootstrap Mobile Gutter Fix --*/
  .row, .container-fluid {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  
  /*-- Fixed Background Image --*/
  .fixed-background {
    position: relative;
    width: 100%;
    z-index: 1000!important;
  }
  .fixed-wrap {
    clip: rect(0, auto, auto, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999 !important;
  }
  .fixed {
    z-index: -999!important;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }