.carousel {position: relative;}
.carousel > ul {overflow: auto; display: flex; gap: 1px; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; background: gray; -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0;}
.carousel > ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
.carousel > ul li {position: relative; min-width: 100%; list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start; opacity: 1!important;}
.carousel > ul li > *, .carousel > ul li > a > * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.carousel > ul li > img, .carousel > ul li > a > img {object-fit: cover;}
.carousel > ul li > div, .carousel > ul li > a > div {display: flex; justify-content: center; align-items: center; color: white; font-weight: bold;}
.carousel ol {position: absolute; bottom: 15px; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); z-index: 9; display: none;}
.carousel ol li {list-style: none; padding: 0 5px; line-height: 1.47;}
.carousel ol li a {display: block; height: 10px; width: 10px; border: 2px solid white; background: transparent; border-radius: 100%;}
.carousel ol li.selected a {background: white;}
.carousel .prev, .carousel .next {
    display: none; 
    user-select:none; 
    cursor: pointer; 
    color: transparent; 
    position: absolute; 
    left: 0; 
    margin: 1rem 1rem 2rem;
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 9; 
    background: url(/img/left-arrow-circle.svg) center center / contain no-repeat;
    height: 4rem;
    width: 4rem;
    transition: opacity 0.15s ease-in-out;
}
.carousel .next {
    left: auto; 
    right: 0;
    background: url(/img/right-arrow-circle.svg) center center / contain no-repeat;
}
.carousel .prev:hover, .carousel .next:hover {opacity: 0.7!important;}

#people.carousel {margin: 0 -4.5rem; overflow-y: hidden;}
@media (max-width: 90vh) {
    #people.carousel {margin: 0 -4.5vw;}
}
#people.carousel > ul {background: #023e5e; height: 30rem;}
#people.carousel > ul > li {
    width: 100%; 
    min-width: 100%;
    margin-right: calc(-100% + 13rem);
    padding-top: 2rem;
}
#people.carousel > ul > li > a {
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
    max-width: 14rem;
    position: relative;
    text-decoration: none;
    transform: scale(0.65);
    transition: transform 0.15s linear, opacity 0.15s linear, margin 0.15s linear;
    opacity: 0.2;
    margin-top: -2rem;
}
#people.carousel > ul > li > a > div {
    opacity: 0; 
    transition: opacity 0.15s linear; 
    display: flex; 
    flex-direction: column; 
    text-align: left; 
    font-weight: normal; 
    font-size: 0.7rem;
    justify-content: flex-start;
    line-height: 1.4;
}
#people.carousel > ul > li > a > div > div {width: 100%;}
#people.carousel > ul > li.selected {z-index: 9;}
#people.carousel > ul > li.selected > a {transform: scale(1); opacity: 1; margin-top: 0;}
#people.carousel > ul > li.selected > a > img {box-shadow: 0px 0px 1rem rgba(0,0,0,0.5);}
#people.carousel > ul > li.selected > a > div {opacity: 1;}
#people.carousel > ul > li > a h3 {margin: 0 0 0.45rem;}
#people.carousel > ul > li > a > * {position: relative;}
#people.carousel > ul > li > a > img {height: 25rem; background: white; border: 0.5rem solid white; margin-bottom: 1.35rem;}
#people.carousel > ul > li > a > div > div:nth-child(2) {display: flex; width: 100%; padding-top: 1.25rem; justify-content: space-between; align-items: center;}
#people.carousel > ul > li > a > div > div:nth-child(2) img {width: 0.7rem; position: relative; bottom: 0.05rem;}
#people.carousel > ul > li > a > div > div:nth-child(2) span {white-space: nowrap; display: inline-block;}

#timeline1.carousel .prev, #timeline1.carousel .next {
    margin: -2rem 0 0 0; 
    background: url(/img/singlearrowright.svg) center center / contain no-repeat;
    opacity: 0.9;
    height: 1.5rem;
    width: 1.5rem;
}
#timeline1.carousel .prev {
    left: auto;
    right: 2.25rem;
    background: url(/img/singlearrowleft.svg) center center / contain no-repeat;
}
#timeline2.carousel .prev, #timeline2.carousel .next {
    margin: -2rem 0 0 0; 
    background: url(/img/singlearrowright.svg) center center / contain no-repeat;
    opacity: 0.9;
    height: 1.5rem;
    width: 1.5rem;
    filter: invert(1);
}
#timeline2.carousel .prev {
    left: auto;
    right: 2.25rem;
    background: url(/img/singlearrowleft.svg) center center / contain no-repeat;
}

.timeline.carousel {display: flex; gap: 2rem; align-items: flex-start;}
.timeline.carousel > ul {background: transparent; width: calc(100% - 7rem); gap: 1px;}
.timeline.carousel > ul li > * {width: 100%; height: auto; position: relative; line-height: 1.6; margin: 0;}
.timeline.carousel > ul li > div {text-align: left; display: block; font-weight: normal;}
.timeline.carousel > ul li > div.pretitle {position: relative; top: 0.35rem; margin-top: 1rem; margin-bottom: 0.35rem;}
.timeline.carousel ol {display: block; position: relative; left: 0; transform: none; bottom: 0.3rem; width: 7rem;}
.timeline.carousel ol::before {position: absolute; content: ""; width: 1px; background: #222222; height: calc(100% - 1.6rem); top: 0.8rem; left: 4px; transform: translateZ(0);}
.blue .timeline.carousel ol::before {background: #269991; height: calc(100% - 2.48rem);}
.blue .timeline.carousel a {text-decoration: none;}
.timeline.carousel .prev, .timeline.carousel .next {display: none!important;}
.timeline.carousel ol li a::before {
    content: "";
    position: absolute;
    display: block;
    height: 10px;
    width: 10px;
    border: 1px solid #222222;
    background: #fcf9f9;
    border-radius: 100%;
    margin-top: 0.6rem;
    left: 0;
}
.blue .timeline.carousel ol li a::before {border-color: #269991;}
.timeline.carousel ol li.selected a::before {
    border-color: #269991;
    background: #269991;
}
.timeline.carousel ol li a {
    width: auto; 
    height: auto;
    border: 0;
    border-radius: 0;
    padding-left: calc(10px + 0.5rem);
    text-decoration: none;
    color: #222222;
    background: transparent;
    margin-bottom: 0.88rem;
}
#timeline2.timeline.carousel ol li a {margin-bottom: 0;}
.blue .timeline.carousel ol li a {color: white;}
.timeline.carousel ol li.selected a {font-weight: bold;}

#projectscarousel {gap: 0; padding-top: 1.5rem;}
#projectscarousel ol {display: none;}
#projectscarousel ul {width: 100%}
#projectscarousel ul li img + h3 {margin-top: 1rem;}
#projectscarousel .prev, #projectscarousel .next {
    display: block!important; 
    top: 0; 
    right: 0; 
    background: url(/img/singlearrowright.svg) center center / contain no-repeat;
    opacity: 0.9;
    height: 1.5rem;
    width: 1.5rem;
    filter: invert(1);
    margin: 0;
}
#projectscarousel .prev {
left: auto;
right: 2.25rem;
background: url(/img/singlearrowleft.svg) center center / contain no-repeat;
}

#carousel10 li a {position: relative; text-decoration: none;}
#carousel10 > ul li > *, 
#carousel10 > ul li > a > * {height: auto;}
#carousel10 > ul li > div, #carousel10 > ul li > a > div {display: block;}
#carousel10 li a > .img {aspect-ratio: 1.8; width: 100%; position: relative; margin-bottom: 0.5rem; overflow: hidden;}
#carousel10 li a > .img img {width: 100%; height: 100%; opacity: 0.9; object-fit: cover; transition: all 0.3s ease-in-out;}
#carousel10 li a > div {position: relative; line-height: 1.2;}
#carousel10 li a:hover > .img img {opacity: 0.4; transform: scale(1.15);}
#carousel10 a .img::after {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: url(/img/play2.svg) 1.75rem calc(100% - 1.5rem) / 4rem auto no-repeat;}