.engineer {padding:0px;background:url(/img/circle-with-shadow-transparent.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .engineer:hover {background:url(/img/engineer-shadow.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .communicator {padding:0px;background:url(/img/circle-with-shadow-transparent.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .communicator:hover {background:url(/img/communicator-shadow.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .researcher {padding:0px;background:url(/img/circle-with-shadow-transparent.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .researcher:hover {background:url(/img/researcher-shadow.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .educator {padding:0;background:url(/img/circle-with-shadow-transparent.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .educator:hover {background:url(/img/educator-shadow.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .leader {padding:0px;background:url(/img/circle-with-shadow-transparent.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .leader:hover {background:url(/img/leader-shadow.png);background-size: contain;background-position: center;background-repeat: no-repeat;} .thumb-info-wrapper .thumb-info-title .thumb-info-inner span {position:relative;top:45%;} .cycles-row-top, .cycles-row-bottom {justify-content: space-evenly;} /*.cycles-row-bottom {margin-top: -10%;}*/ .homepage .col, .homepage .col-md-4 {max-height: 100%;height:400px;} .title {letter-spacing: 0px;font-size: 1.6em;} @media only screen and (min-width: 1281px) and (max-width: 1920px) { .homepage .col, .homepage .col-md-4 {max-height: 100%;height:300px;} .title {letter-spacing: 0px;font-size: 1.1rem;} #header .header-nav.header-nav-spaced nav > ul > li > a {font-size:1rem;padding-right:1.3rem!important;padding-left:1.3rem!important;} } @media only screen and (min-width: 992px) and (max-width: 1280px) { .homepage .col, .homepage .col-md-4 {max-height: 100%;height:300px;} .title {letter-spacing: 0px;font-size: 1.1rem;} #header .header-nav.header-nav-spaced nav > ul > li > a {font-size:0.9rem;padding-right:0.8rem!important;padding-left:0.8rem!important;} } @media only screen and (min-width: 769px) and (max-width: 991px) { .homepage .col, .homepage .col-md-4 {max-height: 100%;height:220px;} .title {letter-spacing: 0px;font-size: 0.85rem;} } @media only screen and (max-width: 768px) { .homepage .col, .homepage .col-md-4 {max-height: 100%;height:180px;} .title {letter-spacing: 0px;font-size: 0.8rem;} } @media only screen and (max-width: 470px) { .homepage .col {max-width:100%;width:100%;max-height: 100%;height:170px;} .title {letter-spacing: 0px;font-size: 16px;} } #header .header-btn-collapse-nav {background: #383838;} .h5-large { font-size: 1.3em; } .h5-medium { font-size: 1.15em; } /* ===================================================== MOBILE RESPONSIVE STYLES Applies only to screens ≤ 767px (phones / small devices). Does NOT change any layout on tablets (768px+) or desktops. ===================================================== */ @media only screen and (max-width: 767px) { /* --- Header: scale down logo so it doesn't crowd the hamburger button --- */ .header-logo img { max-width: 140px; height: auto; } /* --- General: Bootstrap ms-5/me-5 (3rem each) cause horizontal overflow --- Reduce to 0.5rem on mobile for any row inside .main content areas */ .main .row.ms-5 { margin-left: 0.5rem !important; } .main .row.me-5 { margin-right: 0.5rem !important; } /* --- Homepage: Stack the circles column (col-md-8) and notebook image column (col.notebook) vertically instead of side by side --- */ .main .row.text-center.ms-5 > .col-md-8 { flex: 0 0 100%; max-width: 100%; } .col.notebook { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Remove the large top padding on the notebook image */ .col.notebook img { padding-top: 1rem !important; } /* --- Homepage circles: keep 3-per-row layout within the full-width container --- Bootstrap col-md-4 only applies at ≥768px; below that we set widths explicitly */ .cycles-row-top > div, .cycles-row-bottom > div { flex: 0 0 50%; max-width: 50%; width: 50%; } /* --- Homepage: tooltip max-width — prevent fixed 400px tooltip from overflowing --- */ .tooltip-inner { min-width: 200px !important; max-width: 88vw !important; } /* --- Technical portrait page: reduce top margin so text isn't pushed too high on narrow screens where the background image is shorter --- */ .main .row[style*="margin-top: 22vh"] { margin-top: 8vh !important; } /* --- Photos index (albums/index): show 2 photos per row in the band strip --- Bootstrap plain .col distributes all items in one row; 5 items on a phone produces columns too narrow to see clearly */ .photos-band .col { flex: 0 0 33.333%; max-width: 33.333%; width: 33.333%; } /* --- Albums show (photos grid): reduce thumbnail height on small screens --- */ .thumbnail-wrapper { height: 160px; } /* --- Prevent embedded iframes / videos from overflowing the viewport --- */ iframe, embed, object { max-width: 100%; } /* --- Technical portrait: vline font size on narrow screens --- */ .vline { font-size: x-large !important; } /* ------------------------------------------------------- IMAGES: make every responsive max-width: 100% prevents overflow; height: auto keeps the aspect ratio when width is constrained. Higher-specificity rules (e.g. .thumbnail-wrapper img) still win, so object-fit containers are unaffected. ------------------------------------------------------- */ img { max-width: 100% !important; height: auto; } /* Post page: fixed 600px thumbnail becomes fluid */ #thumbnail { width: 100% !important; max-width: 100% !important; } /* Card-body images (content pages): never wider than container */ .card-body img { max-width: 100% !important; height: auto !important; } /* ------------------------------------------------------- HEADINGS: scale down all heading levels on mobile. Bootstrap 5 defaults (h1 2.5rem … h5 1.25rem) are designed for large screens; reduce them proportionally. ------------------------------------------------------- */ h1 { font-size: 1.6rem !important; } h2 { font-size: 1.3rem !important; } h3 { font-size: 1.15rem !important; } h4 { font-size: 1rem !important; } h5 { font-size: 0.9rem !important; } h6 { font-size: 0.8rem !important; } /* Blue page-banner h1 (container-fluid header used on most content pages) */ .container-fluid h1 { font-size: 1.4rem !important; } /* 404 error page h1 is set to 200px – reduce to something sensible */ .error-page h1 { font-size: 5rem !important; line-height: 1.1 !important; } /* --- Modal pages (technical-portrait sub-pages): the first wrapper div inside .modal-body has width:90% inline — stretch it to full width on mobile --- */ .modal-body > div:first-child { width: 100% !important; } /* --- Educator page: image+text table — stack cells vertically on mobile. td:nth-child(2) and (3) are   spacers used only for desktop layout. --- */ .img-text-table, .img-text-table tbody, .img-text-table tr { display: block; width: 100%; } .img-text-table td { display: block; width: 100% !important; } /* Hide the two blank spacer cells */ .img-text-table td:nth-child(2), .img-text-table td:nth-child(3) { display: none !important; } /* Give the image some breathing room above the text */ .img-text-table td:first-child { margin-bottom: 1rem; } }