and remove the
![]()
. */
-------------------------------------------------- */
-------------------------------------------------- */
.video-frame {
display: flex;
justify-content: center;
margin: 1rem auto;
}
.video-frame video {
width: 100%;
max-width: 720px; /* nice max width on desktop */
border-radius: 1rem; /* match your card corners */
box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
/* pick the aspect you want (16:9 here) */
.video-frame.ar-16x9 { position:relative; width:100%; max-width:100%; }
.video-frame.ar-16x9::before { content:""; display:block; padding-top:56.25%; } /* 9/16 */
.video-fit{
position:absolute; inset:0;
width:100%; height:100%;
object-fit: contain; /* no cropping; letterboxes if needed */
background:#000; /* nice letterbox color */
}
/* RESPONSIVE PHOTO GRID
https://css-tricks.com/seamless-responsive-photo-grid/
-------------------------------------------------- */
#photos {
/* Prevent vertical gaps -> line-height: 0; */
line-height: 5;
-webkit-column-count: 2;
-webkit-column-gap: 5px;
-moz-column-count: 2;
-moz-column-gap: 5px;
column-count: 2;
column-gap: 5px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
* {
padding: 0; margin: 0;
}
------ /* Images used in NEWS */
* {
padding: 0; margin: 0;
}
@keyframes pulse{
100% {
opacity: 0;
transform:
translate(-50%, -50%)
scale(3.5);
}
}
@media screen and (max-width: 600px) {
.world-map {
font-size: 13px;
}
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 15px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 40%;
}
#content {
min-height: calc(100vh - 20px);
}
.video-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Allow videos to wrap on smaller screens */
gap: 80px;
}
.video-container video {
flex: 1 1 auto; /* Flex grow, flex shrink, and flex basis set to auto */
max-width: 40%; /* Maximum width of each video */
height: auto; /* Maintain aspect ratio */
}
.badge {
display: block; /* Makes the badge a block-level element */
text-align: left; /* Aligns the text to the left */
white-space: normal; /* Ensures text wraps naturally */
width: 100%; /* Adjust width as necessary */
}
/* Optional: Media query for additional responsiveness */
@media (max-width: 600px) {
.badge {
width: 100%; /* Can adjust width on smaller screens if needed */
}
}
.badge_publications {
font-size: 20px;
/*display: block; /* Makes the badge a block-level element */
/*text-align: left; /* Aligns the text to the left */
/*white-space: normal; /* Ensures text wraps naturally */
/*width: 100%; /* Adjust width as necessary */
}
/* Hide the hr line by default */
.custom-hr {
display: none;
}
/* CSS Media Query for screen sizes 412px or less */
@media only screen and (max-width: 411px) {
.custom-hr {
display: block; /* Show the hr line */
/* Additional styling for the hr line if needed */
width: 100%;
border: 0;
border-top: 1px solid #ccc;
margin: 20px 0; /* Adjust the margin as needed */
}
}
/* Ensure the row uses Flexbox */
.row {
display: flex;
flex-wrap: wrap;
}
/* Ensure the card takes the full height */
.card {
height: 100%;
}
/* Flex children (col-lg-6) should stretch to fill the container */
.col-lg-6 {
display: flex;
flex-direction: column;
}
/* Hide the hr line by default */
.custom-hr {
display: none;
}
/* CSS Media Query for screen sizes 412px or less */
@media only screen and (max-width: 992px) {
.custom-hr {
display: block; /* Show the hr line */
/* Additional styling for the hr line if needed */
width: 100%;
border: 0;
border-top: 0.5px solid #eee;
margin: 20px 0; /* Adjust the margin as needed */
}
}
/* Back-to-top — SINGLE rule */
.back-to-top{
-webkit-appearance:none; appearance:none;
-webkit-tap-highlight-color:transparent;
position:fixed;
right:max(16px, env(safe-area-inset-right));
bottom: calc(16px + var(--avoid-footer, px) + max(16px, env(safe-area-inset-bottom))) !important;
z-index:1200;
width:44px; height:44px; border-radius:999px;
border:1px solid rgba(180,180,180,.15);
background:#fff; box-shadow:0 6px 16px rgba(2,6,23,.18);
display:none; opacity:0; /* hidden by default */
align-items:center; justify-content:center;
transition:bottom .25s, box-shadow .12s, transform .12s, opacity .12s;
}
.back-to-top i{ font-size:18px; line-height:1; color:#85898d; }
@media (max-width:600px){
.back-to-top.is-visible{ display:inline-flex !important; opacity:1; }
}
@media (hover:hover){
.back-to-top:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(2,6,23,.26); }
.back-to-top:active{ transform:translateY(0); }
}
.back-to-top:focus,
.back-to-top:active{ outline:none; background:#fff; box-shadow:none; }
.back-to-top:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(77,159,8,.45), 0 6px 16px rgba(2,6,23,.18); }
@media (prefers-reduced-motion: reduce){
.back-to-top{ transition:none; }
}
/* Make each card body a vertical flex container */
.research-card-body{
display:flex;
flex-direction: column;
height: 100%;
}
/* Push the “Aims overview” block to the same vertical start in both cards */
.research-card-body > h5.section-title{
margin-top: auto; /* everything above can grow; h5 (and what follows) drops to same line */
}
/* (optional) ensure the image scales nicely */
.aims-figure img{ max-width:100%; height:auto; display:block; }
/* space after the last list before the Aims overview heading */
.research-card-body .research-points,
.research-card-body .tool-list{
margin-bottom: .8rem; /* tweak to taste */
}
/* keep the alignment trick */
.research-card-body{
display: flex;
flex-direction: column;
}
.research-card-body > h5.section-title{
margin-top: auto; /* aligns both cards */
}
.research-card-body > h5.section-title + .aims-figure{
margin-top: .5rem; /* space between h5 and figure */
}
.aims-figure{
aspect-ratio: 16 / 9; /* choose the ratio that fits your artwork */
margin-top: .6rem;
padding: .5rem;
display: grid;
justify-items: center;
align-items: center; /* or start for top-aligned content */
border-radius: .75rem;
background: #fff;
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 2px 8px rgba(2,6,23,.06);
}
.aims-figure img{
width: 100%;
height: 100%;
object-fit: contain; /* keep entire image visible */
display: block;
}