img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --main-bg: #fff; --light: #fafafa; --light-comp: #4d4d4d; --dark: #333; --dark-comp: #fff; --primary: #17406d; --primary-comp: #fff; --secondary: #475a7d; --secondary-comp: #fff; --secondary-accent: #708fc6 }html { --14px: 0.875rem; --15px: 0.9375rem; --16px: 1rem; --17px: 1.0625rem; --18px: 1.125rem; --19px: 1.1875rem; --20px: 1.25rem; --21px: 1.3125rem; --22px:1.375rem; --24px: 1.5rem; --30px: 1.875rem; --36px:2.25rem; --48px:3rem } .jump { text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; position: absolute; background: #fff; left: 150px; top: -6px; padding: 10px; border-width: 2px; border-color: var(--light-30); border-style: none solid solid; transform: translateY(-100%) }.jump:focus { transform: translateY(0%); outline-offset: 0 } a[target="_blank"] { position: relative }a[target="_blank"] i { padding: 4px; border: 1px solid black; color: #000; background-color: #fff; text-decoration: none; position: absolute; left: 0; top: -35px; z-index: 999; width: 140px; display: none; font-size: 12px; font-style: normal; font-weight: 400; font-family: sans-serif; text-align: center !important; text-transform: none; letter-spacing: 0; }a[target="_blank"]:is(:hover, :focus) i { display: block } *:focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; outline-offset: 4px; border-radius: 3px; transition: all .3s linear .01s; }:is(nav a, .hero h1):focus-visible { outline-color: #fff } * { scroll-behavior: smooth; box-sizing: border-box }button { border: none; background: none; padding: 0 }button:hover { cursor: pointer }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 }body, button, form :is(input,textarea) { font-family: Arial, Helvetica, sans-serif; font-size: var(--16px) }body { line-height: 1.6; text-align: center; min-width: 320px; }body, .row2 h3, footer a, .row2 .grid p, .row3 .grid p { color: var(--light-comp, #4d4d4d); }body, header ul, .row1 h2, .row1 h3 { padding: 0; margin: 0; }h1, h2, h3, h4, h5, h6, legend { color: var(--primary, #448ccb); line-height: 1.4; }h1 { color: var(--dark, #333); }img, iframe { max-width: 100%; height: auto; display: block; margin: 0 auto }iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; }a img, iframe { border: none; }a, button { text-underline-offset: 4px; }a, .row2 h3 { transition: ease-in-out 0.3s; }a, :is(#logo, .row2 a):hover { text-decoration: none; }a, .row2 a:hover h3, footer a:hover { color: var(--primary); }:is(nav,main,footer) a:is(:hover,:focus-visible) { text-decoration-line: underline; text-decoration-color: var(--secondary-accent); }hr { border-width: 1px; border-color: var(--secondary-accent, #e7e7e7); border-style: none none solid; margin: 40px 0; }.nowrap, a[href^='tel'] { white-space: nowrap; }sup { line-height: 0; }.row1 h2, .row1 p, .row2 h2, .row2 p, .row3 h2, .row3 h3, .row3 p, .row4 h2, .row4 p { text-align: center; }.wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; }.bg-dark, .bg-primary { color: var(--dark-comp, #fff); }.bg-dark { background-color: var(--dark, #333); }.bg-primary { background-color: var(--primary, #448ccb); }.bg-light { background-color: var(--light, #fafafa); color: var(--dark, #333); }.mid { align-items: center; align-self: center; }.grid { display: grid; grid-gap: 10px 40px; }.grid.half { grid-template-columns: repeat(2, 1fr); }.grid.third { grid-template-columns: repeat(3, 1fr); }.grid.fourth { grid-template-columns: repeat(4, 1fr); } header, .hero { position: relative; }header > .wrap { padding: 10px; text-align: center; }nav { padding: 1px 0; border-color: var(--primary); border-style: solid none; border-width: 1px }nav li { display: inline-block; margin: 0 20px; }nav a { color: var(--dark-comp, #fff); }nav a { text-align: center; display: block; margin: 5px; padding: 5px } .row0 { position: relative; border-bottom: 20px solid var(--primary, #448ccb);border-top: 20px solid var(--primary, #448ccb); overflow: hidden; padding: 20px 0 50px 0; margin: 0 0 40px 0; } .row1 .wrap, .row2 .wrap, .row3 .wrap { padding: 20px 10px; }:is(.row2, .row3) .grid { grid-gap: 20px clamp(20px, 3vw, 40px); margin: 40px 0; }.row2.bg-light { border-color: var(--light); border-style: solid none; border-width: 1px }.row4.bg-light { border-color: var(--light); border-style: solid none none; border-width: 1px }.row2 .grid > a { background-color: var(--dark-comp, #fff); }.row2 .grid p, .row3 .grid p { text-align: left; padding-bottom: 20px; }.row3 .grid > div { background-color: #eee; }.row3 .grid > div { padding: 20px 20px 5px; }.row3 svg { display: block; width: 100px; height: 100px; margin: 5px auto; stroke-width: 1; }.row3 h3 { margin: 0; color: var(--light-comp); font-weight: bold; }.row3 p { margin-top: 0 }.row4 { padding: 20px clamp(10px, 2vw, 20px); } legend { font-size: var(--30px); font-weight: bold }fieldset { border: none; margin: 0; padding: 0 }form label { text-align: left; margin-bottom: 20px }form :is(label,input,textarea) { box-sizing: border-box; width: 100%; display: block }form :is(input,textarea) { padding: 10px; border: 1px solid var(--primary) }form textarea { height: 100px }form button { min-width: 250px; display: inline-block; border-width: 1px; border-style: solid; border-color: var(--primary); background-color: var(--primary); color: var(--primary-comp); padding: 8px; font-weight: bold }form button:is(:hover,:focus) { text-decoration: underline var(--secondary-accent); }form :is(input,button) { border-radius: 3px } footer .wrap { padding: 20px 10px; }footer button { color: var(--secondary); margin: 5px; padding: 5px }footer button:is(:hover,:focus) { text-decoration: underline; }footer { border-top: 10px solid var(--primary, #448ccb); }footer .grid { grid-template-columns: 1fr 150px }footer p { text-align: left; margin: 10px 0 }.ccpaNotice { text-align: center !important; }footer ul { padding: 0; text-align: center }footer li { display: inline-block; }footer li a { display: block; margin: 5px; padding: 5px } main { padding: 40px 10px 50px; }main h1, main h2, .row2 h3 { font-size: var(--30px); }h1, h2, .row1 p { text-wrap: balance }main h3 { font-size: var(--20px); }main h4, p, li, footer button { font-size: var(--18px); }main ul, main ol { padding-left: 25px; text-align: left }main li { margin: 5px 0; }footer ul { list-style: none; padding-left: 0; } header .wrap { padding: 30px 0; }header #logo { display: grid; align-items: center; color: var(--primary); padding: 5px; text-align: center; justify-content: center; }nav a { color: var(--light); }.companyname { font-family: 'Lora', serif; font-size: 40px; display: block; letter-spacing: 5px; margin-bottom: 0; padding-bottom: 0; font-weight: bold; line-height: 1.2; } .companyname span { border-bottom: 2px solid #eee; }.tagline {display: block;font-size: 18px;color: #4d4d4d;font-style: italic;text-align: center;}.row2 .grid > div {display: flex;flex-direction: column;gap: 15px;padding: 20px;background-color: #fafafa;border-radius: 8px;transition: transform 0.3s ease, box-shadow 0.3s ease;}.row2 .grid > div:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}.row2 .grid img {height: 180px;width: 180px;border-radius: 50%;margin: 0 auto;border: 2px solid var(--primary);object-fit: cover;flex-shrink: 0;}.row2 h3 {font-weight: bold;margin: 0;padding: 0;font-size: var(--18px);text-align: center;line-height: 1.3;}.row2 h3 span {display: block;font-weight: 600;color: var(--primary);margin-bottom: 5px;}.row2 .grid p {margin: 0;line-height: 1.6;font-size: 0.95rem;}.osa img { max-width: 500px; width: 100% }.hero {display: none;} .publications {display: grid;grid-gap: 20px;grid-template-columns: 1fr 1fr 1fr;}.publication {border: 1px solid #ddd;border-radius: 10px;padding: 20px;background-color: #fff;}.publication h3 {text-align: left;min-height:120px;text-align: center;}.publication img {width: 80%;display: inline;border: 1px solid #ccc;margin: 5px;border-radius: 5px; } .row0 h1 {color: var(--primary);text-align: left;font-size: 60px; } .row0 p {color: #4d4d4d;text-align: left;display: flex;align-items: center;text-wrap: balance;font-size: 22px;} .upperHero {display: grid;grid-template-columns: 40% 1fr;gap: 10px;margin: 0 auto;} .row0 p .bullet {content: " ";background-color: var(--primary);display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;min-width: 24px;min-height: 24px;border-radius: 50%;margin-right: 20px;flex-shrink: 0;} .row0 ul {list-style-type: none;margin: 0;padding: 0;text-align: left;} .row0 li {border-bottom: 1px dotted #4d4d4d;padding: 5px 0 10px 0;padding-left: 48px;position: relative;} .row0 ul li strong {font-size: 22px;} .hero:before {content: "";width: 100%;height: 100%;background-color: rgba(0, 0, 0, .6);position: absolute;inset: 0;z-index: 7;} .hero {height: 500px;max-height: unset;overflow: hidden;} .hero img {animation: continuousZoom 30s ease-out infinite} .hero.bgimg img {position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;z-index: 1;transition: opacity 3s;object-fit: cover;object-position: center} .hero.bgimg .showing {opacity: 1;z-index: 2} @keyframes continuousZoom {0% {transform: scale(1.0);} 50% {transform: scale(1.2);} 100% {transform: scale(1.0);}} .hero .wrap {padding: 10px 20px;top: 50%;transform: translateY(-50%);z-index: 8;} .hero h1 {font-size: 60px;line-height: 1.2;} .hero p,.hero h1 {color: #fff;font-weight: bold;} @keyframes pulse-border {0%, 100% { box-shadow: 0 0 0 0 rgba(44, 38, 236, 0.7); }50% { box-shadow: 0 0 0 8px rgba(44, 38, 236, 0); }} .row0 li::before {content: "✓";position: absolute;left: 0;top: 30%;display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;background-color: var(--primary);color: white;border-radius: 50%;font-weight: bold;font-size: 14px;animation: pulse-border 2s infinite;}@media(prefers-reduced-motion:reduce) { * { transition: all 0s !important; scroll-behavior: unset; animation: none !important; } .hero.bgimg > img:first-of-type { animation: none !important; transform: scale(1) !important; }} @media(max-width:47.99rem) { header #logo, .grid.half:not(.stay) { grid-template-columns: 1fr } .row1 .wrap { padding: 10px; } .row2 .grid img { margin: 0 auto; width: 160px; height: 160px } .row2 h3, .row2 .grid p { text-align: center } .row2 .wrap, .row3 .wrap { padding: 10px; } .row2 .grid p { max-width: 600px; margin: 0 auto; padding-bottom: 0; } .row2 h2 { margin: 5px auto; } :is(.row2) .grid { margin: 10px 0; } .row3 h2, .row4 h2 { margin: 10px auto 20px; } .companyname { text-align: center; }.grid.third, .upperHero { grid-template-columns: 1fr }.grid.fourth { grid-template-columns: 1fr }.upperHero h1 {text-align: center;}.hero {padding: 10px;}.row2 .grid > div {padding: 15px;}.hero p {font-size: 18px;}.hero h1 {font-size: 36px;}} @media(max-width:31.25rem) { header .wrap { padding: 10px; } header ul, footer ul { display: grid; text-align: center; } header nav li, footer li { margin: 5px auto; } nav li { width: 100%; } .grid.half.stay, footer .grid { grid-template-columns: 1fr } footer p { text-align: center }} @media(max-width:25rem) { nav li { margin: 0 10px }}