:root { --nav-h:42px; --nav-h-mobile:35px; --header-h:80px; --header-h-mobile:auto; --color-dark-gray:#494949; --color-mid-gray:#616161; --color-muted-grey:#919191; --color-light-gray:#b7b7b7; --color-light-gray-section-background:#E4E4E4; --color-light-gray-section-background-alt:#0052a10f; --color-lighter-gray:#f3f3f3; --color-lightest-gray:#f9f9f9; --color-cta-blue-bg:#f0f6fb; --color-cta-blue-border:#e5e7eb; --color-white:#fff; --color-black:#000; --color-primary:#0052a1; --color-primary-dark:#004282; --color-primary-hover:#1888f3; --color-primary-light:#4a9fdc; --color-primary-lighter:#8cc3f8; --color-border:#b1b1b1; --color-border-light:#e5e5e5; --color-disabled:#afafaf; --color-success:#249038; --color-info:#00529B; --color-warning:#d97000; --color-error:#c20909; --color-confirm:#fc3bf5; --color-icon-light:#faf8f8; --color-info-bg:#BDE5F8; --color-warning-bg:#ffe5c8; --color-error-bg:#f5a8a8; --color-confirm-bg:#ffb4fc; --font-color:var(--color-dark-gray); --font-inactive-color:var(--color-mid-gray); --header-title-color:var(--color-dark-gray); --link-color:var(--color-dark-gray); --link-inactive-color:var(--color-mid-gray); --link-active-color:var(--color-dark-gray); --ui-border-color:var(--color-light-gray); --section-fade-in-speed:750ms; --section-fade-in-opacity-start:0.5; --section-fade-in-opacity-end:1; --section-fade-out-speed:600ms; --section-fade-out-opacity-start:1; --section-fade-out-opacity-end:0; --form-input-disabled:var(--color-disabled); --form-input-placeholder:var(--color-disabled); --form-loading-primary:#dddddd; --form-loading-secondary:var(--color-primary); --form-focus-border-color:#719ECE; --icon-switch-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); --switch-shadow-fill-color:var(--color-icon-light); --switch-unchecked-background-color:#cacaca; --switch-checked-background-color:var(--color-primary); --switch-normal-border-color:var(--color-border); --switch-focus-border-color:#797979; --switch-unchecked-font-color:#797979; --switch-checked-font-color:var(--color-white); --switch-disabled-font-color:var(--color-disabled); --message-success-font-color:var(--color-success); --message-success-link-color:var(--color-success); --message-success-border-color:var(--color-success); --message-success-background-color:#c4ffc1; --message-info-font-color:var(--color-info); --message-info-link-color:var(--color-info); --message-info-border-color:var(--color-info); --message-info-background-color:var(--color-info-bg); --message-warning-font-color:var(--color-warning); --message-warning-link-color:var(--color-warning); --message-warning-border-color:var(--color-warning); --message-warning-background-color:#ffe5c8; --message-error-font-color:var(--color-error); --message-error-link-color:var(--color-error); --message-error-border-color:var(--color-error); --message-error-background-color:var(--color-error-bg); --message-confirm-font-color:var(--color-confirm); --message-confirm-link-color:var(--color-confirm); --message-confirm-border-color:var(--color-confirm); --message-confirm-background-color:var(--color-confirm-bg); --btn-blue:var(--color-primary); --btn-blue-hover:var(--color-primary-hover); --btn-grey:#555; --btn-grey-hover:#6b6b6b; --btn-green:var(--color-success); --btn-green-hover:#2aa845; --btn-red:#c0392b; --btn-red-hover:#e04433; --btn-black:#000; --btn-black-hover:#333; --btn-magenta:var(--color-confirm); --btn-magenta-hover:#fd66f7; --btn-orange:var(--color-warning); --btn-orange-hover:#ee8410; --form-input-background-color:#fafafa; --form-input-border-color:#e9e9e9; --form-bold-input-background-color:var(--color-white); --form-bold-input-font-color:#2c2c2c; --form-bold-input-border-color:var(--color-border); --form-bold-input-readonly-font-color:#696969; --form-bold-input-readonly-background-color:var(--color-lighter-gray); --form-bold-input-disabled-font-color:#696969; --form-bold-input-disabled-background-color:var(--color-lighter-gray); --form-bold-input-placeholder-color:var(--color-border); } * { margin:0; padding:0; outline:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } *:after, *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html, body { margin:0; padding:0; } html { scroll-padding-top:calc(var(--nav-h) + var(--header-h)); @media (max-width:1140px) { scroll-padding-top:var(--nav-h-mobile); } } body { background-color:var(--color-white); color:var(--color-dark-gray); text-decoration:none; font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif; font-weight:500; min-height:100vh; min-height:100dvh; line-height:1.5; } body.transition-preload * { -webkit-transition:none!important; -moz-transition:none!important; -ms-transition:none!important; -o-transition:none!important; transition:none!important } a { text-decoration:none; color:var(--color-primary-dark); } h1, h2, h3, h4, h5, h6 { margin:0; color:var(--color-primary-dark); &.heading-link {font-size:1.1rem;} } hr { border:0; &.border-1 { border-top:1px solid var(--color-primary-dark); } &.border-2 { border-top:2px solid var(--color-primary-dark); } &.border-3 { border-top:3px solid var(--color-primary-dark); } &.border-4 { border-top:4px solid var(--color-primary-dark); } &.border-5 { border-top:5px solid var(--color-primary-dark); } &.border-6 { border-top:6px solid var(--color-primary-dark); } &.border-7 { border-top:7px solid var(--color-primary-dark); } &.border-8 { border-top:8px solid var(--color-primary-dark); } &.border-9 { border-top:9px solid var(--color-primary-dark); } &.border-10 { border-top:10px solid var(--color-primary-dark); } } dl { display:grid; grid-template-columns:auto 1fr; column-gap:25px; row-gap:0px; margin:0; dt, dd { margin:0; } } address { font-style:normal; } img { max-width:100%; height:auto; &.img-page-hero { user-select:none; height:165px; object-fit:cover; width:100%; } &.img-frame { padding:20px; box-shadow:0px 0px 10px #aaa; } } div.img-with-caption { text-align:center; font-weight:600; font-size:0.75rem; span, small, strong { display:block; margin-top:5px; } } div.img-cover-fill { display:flex; flex-direction:column; img { flex:1; min-height:0; width:100%; object-fit:cover; } } .text-thin { font-weight:300; } .text-light { font-weight:400; } .text-regular { font-weight:500; } .text-medium { font-weight:600; } .text-bold { font-weight:700; } .text-strong { font-weight:800; } .text-black { font-weight:900; } .text-italic { font-style:italic; } .text-underline { text-decoration:underline; } .text-uppercase { text-transform:uppercase; } .text-lowercase { text-transform:lowercase; } .text-capitalize { text-transform:capitalize; } .text-nowrap { white-space:nowrap; } .text-left   { text-align:left; } .text-right  { text-align:right; } .text-center { text-align:center; } .text-error { color:var(--message-error-font-color); } .text-notice-small { font-size:0.65rem; color:var(--font-inactive-color); } .no-wrap, .nowrap, .text-no-wrap, .text-nowrap { white-space:nowrap; } .visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important; } .gutters { margin-left:13%; margin-right:13%; } .gutters-padding {padding-left:13%; padding-right:13%; } .overflow-hidden { overflow:hidden; } .overflow-auto { overflow:auto; } .overflow-x { overflow-x:auto; } .overflow-y { overflow-y:auto; } .data-table { display:table; border-spacing:0; border-collapse:collapse; width:98%; th.data-cell, th:not(:empty) { padding:9px 24px; background-color:#3d83b5; color:#ffffff; text-align:center; border:1px solid #ccc; } td.data-cell, td:not(:empty) { background-color:#e0e0e0; text-align:center; border:1px solid #ccc; padding:6px 24px; } } .width-5 { width:5%; } .width-10 { width:10%; } .width-15 { width:15%; } .width-20 { width:20%; } .width-25 { width:25%; } .width-30 { width:30%; } .width-35 { width:35%; } .width-40 { width:40%; } .width-45 { width:45%; } .width-50 { width:50%; } .width-55 { width:55%; } .width-60 { width:60%; } .width-65 { width:65%; } .width-70 { width:70%; } .width-75 { width:75%; } .width-80 { width:80%; } .width-85 { width:85%; } .width-90 { width:90%; } .width-95 { width:95%; } .width-100 { width:100%; } .display-flex { display:flex; } .display-block { display:block; } .display-inline { display:inline; } .display-inline-block { display:inline-block; } .margin-0   { margin-top:0; margin-bottom:0; } .margin-5   { margin-top:5px; margin-bottom:5px; } .margin-10  { margin-top:10px; margin-bottom:10px; } .margin-15  { margin-top:15px; margin-bottom:15px; } .margin-20  { margin-top:20px; margin-bottom:20px; } .margin-25  { margin-top:25px; margin-bottom:25px; } .margin-30  { margin-top:30px; margin-bottom:30px; } .margin-35  { margin-top:35px; margin-bottom:35px; } .margin-40  { margin-top:40px; margin-bottom:40px; } .margin-45  { margin-top:45px; margin-bottom:45px; } .margin-50  { margin-top:50px; margin-bottom:50px; } .margin-55  { margin-top:55px; margin-bottom:55px; } .margin-60  { margin-top:60px; margin-bottom:60px; } .margin-65  { margin-top:65px; margin-bottom:65px; } .margin-70  { margin-top:70px; margin-bottom:70px; } .margin-75  { margin-top:75px; margin-bottom:75px; } .margin-80  { margin-top:80px; margin-bottom:80px; } .margin-85  { margin-top:85px; margin-bottom:85px; } .margin-90  { margin-top:90px; margin-bottom:90px; } .margin-95  { margin-top:95px; margin-bottom:95px; } .margin-100 { margin-top:100px; margin-bottom:100px; } .margin-110 { margin-top:110px; margin-bottom:110px; } .margin-120 { margin-top:120px; margin-bottom:120px; } .margin-130 { margin-top:130px; margin-bottom:130px; } .margin-140 { margin-top:140px; margin-bottom:140px; } .margin-150 { margin-top:150px; margin-bottom:150px; } .margin-top-0   { margin-top:0; } .margin-top-5   { margin-top:5px; } .margin-top-10  { margin-top:10px; } .margin-top-15  { margin-top:15px; } .margin-top-20  { margin-top:20px; } .margin-top-25  { margin-top:25px; } .margin-top-30  { margin-top:30px; } .margin-top-35  { margin-top:35px; } .margin-top-40  { margin-top:40px; } .margin-top-45  { margin-top:45px; } .margin-top-50  { margin-top:50px; } .margin-top-55  { margin-top:55px; } .margin-top-60  { margin-top:60px; } .margin-top-65  { margin-top:65px; } .margin-top-70  { margin-top:70px; } .margin-top-75  { margin-top:75px; } .margin-top-80  { margin-top:80px; } .margin-top-85  { margin-top:85px; } .margin-top-90  { margin-top:90px; } .margin-top-95  { margin-top:95px; } .margin-top-100 { margin-top:100px; } .margin-top-110 { margin-top:110px; } .margin-top-120 { margin-top:120px; } .margin-top-130 { margin-top:130px; } .margin-top-140 { margin-top:140px; } .margin-top-150 { margin-top:150px; } .margin-bottom-0   { margin-bottom:0; } .margin-bottom-5   { margin-bottom:5px; } .margin-bottom-10  { margin-bottom:10px; } .margin-bottom-15  { margin-bottom:15px; } .margin-bottom-20  { margin-bottom:20px; } .margin-bottom-25  { margin-bottom:25px; } .margin-bottom-30  { margin-bottom:30px; } .margin-bottom-35  { margin-bottom:35px; } .margin-bottom-40  { margin-bottom:40px; } .margin-bottom-45  { margin-bottom:45px; } .margin-bottom-50  { margin-bottom:50px; } .margin-bottom-55  { margin-bottom:55px; } .margin-bottom-60  { margin-bottom:60px; } .margin-bottom-65  { margin-bottom:65px; } .margin-bottom-70  { margin-bottom:70px; } .margin-bottom-75  { margin-bottom:75px; } .margin-bottom-80  { margin-bottom:80px; } .margin-bottom-85  { margin-bottom:85px; } .margin-bottom-90  { margin-bottom:90px; } .margin-bottom-95  { margin-bottom:95px; } .margin-bottom-100 { margin-bottom:100px; } .margin-bottom-110 { margin-bottom:110px; } .margin-bottom-120 { margin-bottom:120px; } .margin-bottom-130 { margin-bottom:130px; } .margin-bottom-140 { margin-bottom:140px; } .margin-bottom-150 { margin-bottom:150px; } div.href-fill-stacked { display:flex; flex-direction:column; gap:10px; } div.href-fill-flex { display:flex; flex-wrap:wrap; gap:10px; & > a { flex:0 0 auto; } &.href-center-mobile { @media (max-width:1140px) { justify-content:center; } } } a.href-fill { color:var(--color-white); font-size:14px; font-weight:700; padding:10px 12px; text-align:center; transition:background-color 300ms linear; background-color:var(--color-primary); &:hover { background-color:var(--color-primary-hover); } &:disabled { background-color:var(--color-disabled); cursor:not-allowed; } &.href-thin { font-size:12px; padding:6px 12px; } &.href-bold { font-size:15px; font-weight:700; } &.href-rounded, &.href-round { border-radius:6px; } } a.href-fill-alt { transition:background-color 300ms linear, color 150ms linear; &:hover { color:var(--color-white); background-color:var(--color-primary-hover); } } ul.list-cols-2 { column-count:2; column-gap:15px; } ul.list-cols-3 { column-count:3; column-gap:15px; } ul.list-cols-4 { column-count:4; column-gap:15px; } @media (max-width:1140px) { ul.list-cols-2, ul.list-cols-3, ul.list-cols-4 { column-count:1; } } span.blue-dot { display:inline-block; width:8px; height:8px; background-color:var(--color-primary-light); border-radius:50%; margin-right:6px; vertical-align:middle; } ul.href-nav-blocks { list-style:none; white-space:nowrap; column-gap:2px; margin:0; padding:0; a.href-fill { display:block; } @media (max-width:1140px) { display:block; list-style:disc; line-height:1; padding-left:30px; margin-top:20px; margin-bottom:20px; a.href-fill { display:inline; width:auto; background:none; color:var(--color-primary); font-weight:700; padding:5px 3px; text-align:left; transition:background-color 300ms linear, color 300ms linear; &:hover { color:var(--color-white); background-color:var(--color-primary-hover); } } } } @media (max-width:1450px) { .gutters { margin-left:8%; margin-right:8%; } .gutters-padding {padding-left:8%; padding-right:8%; } } @media (min-width:1141px) { .hide-desktop { display:none !important; } } @media (max-width:1140px) { .hide-mobile { display:none !important; } .text-center-mobile, .img-center-mobile { text-align:center; } .justify-items-center-mobile { justify-items:center !important; } .blue-hero-link-under-img-page-hero { margin-top:20px!important; } .blue-hero-link-under-img-page-hero-with-extra-margin, .blue-hero-links-no-img-page-hero-with-extra-margin { margin-top:40px!important; } } @media (max-width:768px) { .gutters { margin-left:5%; margin-right:5%; } .gutters-padding {padding-left:5%; padding-right:5%; } } @media (max-width:425px) { } .btn-icon, .btn-text, .btn-icon-text { position:relative; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:6px; color:var(--color-white); font:inherit; font-weight:600; line-height:1; cursor:pointer; transition:background-color 0.2s ease-in-out; } .btn-icon { width:2.75rem; height:2.75rem; padding:0; font-size:1.1rem; } .btn-text, .btn-icon-text { min-height:2.5rem; padding:0.5rem 1.2rem; } .btn-icon-text { gap:0.5em; } a.btn-icon:any-link, a.btn-text:any-link, a.btn-icon-text:any-link { color:var(--color-white); text-decoration:none; } .btn-fab { border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.35); } .btn-xs.btn-icon { width:1.5rem; height:1.5rem; font-size:0.75rem; } .btn-small.btn-icon { width:1.9rem; height:1.9rem; font-size:0.85rem; } .btn-small.btn-text, .btn-small.btn-icon-text { min-height:2rem; padding:0.35rem 0.8rem; font-size:0.85rem; } .btn-expanded { width:100%; } .btn-square { border-radius:0; } .btn-icon[hidden], .btn-text[hidden], .btn-icon-text[hidden] { display:none; } .btn-blue    { background:var(--btn-blue); } .btn-blue:hover    { background:var(--btn-blue-hover); } .btn-grey    { background:var(--btn-grey); } .btn-grey:hover    { background:var(--btn-grey-hover); } .btn-green   { background:var(--btn-green); } .btn-green:hover   { background:var(--btn-green-hover); } .btn-red     { background:var(--btn-red); } .btn-red:hover     { background:var(--btn-red-hover); } .btn-black   { background:var(--btn-black); } .btn-black:hover   { background:var(--btn-black-hover); } .btn-magenta { background:var(--btn-magenta); } .btn-magenta:hover { background:var(--btn-magenta-hover); } .btn-orange  { background:var(--btn-orange); } .btn-orange:hover  { background:var(--btn-orange-hover); } .btn-browse { min-height:2.1rem; padding:0.35rem 0.8rem; background:var(--color-lighter-gray); border:1px solid var(--color-border); color:var(--color-dark-gray); .btn-label { font-weight:600; font-size:0.9rem; } } .btn-browse:hover { background:#e8e8e8; } .btn-outline, .btn-off { background:var(--color-white); border:1px solid var(--color-border); color:var(--btn-grey); } .btn-outline:hover, .btn-off:hover { background:var(--color-lighter-gray); } .btn-on { background:var(--btn-blue); border:1px solid var(--btn-blue); color:var(--color-white); } .btn-disabled, .btn-icon:disabled, .btn-text:disabled, .btn-icon-text:disabled { pointer-events:none; color:var(--color-disabled); background:var(--color-lighter-gray); } .btn-success { pointer-events:none; color:var(--color-white); background:var(--btn-green); border-color:var(--btn-green); } .btn-error { pointer-events:none; color:var(--color-white); background:var(--btn-red); border-color:var(--btn-red); } .btn-bars { display:none; } .btn-loading { pointer-events:none; } body:has(.btn-loading) .btn-icon, body:has(.btn-loading) .btn-text, body:has(.btn-loading) .btn-icon-text { pointer-events:none; } .btn-icon.btn-loading, .btn-text.btn-loading, .btn-icon-text.btn-loading { background-color:var(--color-white); color:var(--color-primary); font-size:0; } .btn-loading .btn-label { font-size:0; } .btn-loading .btn-bars, .btn-loading .btn-bars::before, .btn-loading .btn-bars::after { width:3px; height:0.7rem; background:currentColor; border-radius:2px; animation:loading-bars-bounce 0.9s ease-in-out infinite; } .btn-loading .btn-bars::before, .btn-loading .btn-bars::after { content:""; position:absolute; top:0; } .btn-loading .btn-bars::before { left:-7px; animation-delay:-0.3s; } .btn-loading .btn-bars { display:block; position:relative; animation-delay:-0.15s; } .btn-loading .btn-bars::after { left:7px; animation-delay:0s; } @keyframes fade-in { from { opacity:var(--section-fade-in-opacity-start); } to   { opacity:var(--section-fade-in-opacity-end); } } @keyframes loading-bars-bounce { 0%, 100% { transform:scaleY(0.4); } 50%      { transform:scaleY(1); } } .align-items-start    { align-items:flex-start; } .align-items-center   { align-items:center; } .align-items-end      { align-items:flex-end; } .align-items-stretch  { align-items:stretch; } .align-items-baseline { align-items:baseline; } .align-content-start   { align-content:flex-start; } .align-content-center  { align-content:center; } .align-content-end     { align-content:flex-end; } .align-content-stretch { align-content:stretch; } .justify-items-center  { justify-items:center; } .justify-items-start   { justify-items:start; } .justify-items-end     { justify-items:end; } .justify-items-stretch { justify-items:stretch; } .justify-content-center  { justify-content:center; } .justify-content-start   { justify-content:flex-start; } .justify-content-end     { justify-content:flex-end; } .justify-content-stretch { justify-content:stretch; } .justify-content-around  { justify-content:space-around; } .justify-content-between { justify-content:space-between; } .flex-grid { --cols:5; display:flex; flex-wrap:wrap; justify-content:center; gap:15px; > * { flex:0 1 calc((100% - (var(--cols) - 1) * 15px) / var(--cols)); min-width:0; } img { width:80%; height:auto; display:block; margin-inline:auto; } &.img-100{ width:100%; } &.img-90 { width:90%; } &.img-80 { width:80%; } &.img-70 { width:70%; } &.img-60 { width:60%; } &.img-50 { width:50%; } &.img-40 { width:40%; } &.img-30 { width:30%; } &.img-20 { width:20%; } &.img-10 { width:10%; } } .cols-1, .cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-50-25-25, .cols-25-50-25, .cols-25-25-50, .cols-25-75, .cols-75-25, .cols-33-67, .cols-67-33, .cols-40-60, .cols-60-40 { display:grid; row-gap:20px; column-gap:15px; grid-template-columns:var(--cols); &.row-gap-0  { row-gap:0; } &.row-gap-5  { row-gap:5px; } &.row-gap-10 { row-gap:10px; } &.row-gap-15 { row-gap:15px; } &.row-gap-20 { row-gap:20px; } &.row-gap-25 { row-gap:25px; } &.row-gap-30 { row-gap:30px; } &.row-gap-35 { row-gap:35px; } &.row-gap-40 { row-gap:40px; } &.row-gap-45 { row-gap:45px; } &.row-gap-50 { row-gap:50px; } &.row-gap-55 { row-gap:55px; } &.row-gap-60 { row-gap:60px; } &.row-gap-65 { row-gap:65px; } &.row-gap-70 { row-gap:70px; } &.row-gap-75 { row-gap:75px; } &.row-gap-80 { row-gap:80px; } &.row-gap-85 { row-gap:85px; } &.row-gap-90 { row-gap:90px; } &.row-gap-95 { row-gap:95px; } &.row-gap-100{ row-gap:100px; } &.row-gap-105{ row-gap:105px; } &.row-gap-110{ row-gap:110px; } &.row-gap-115{ row-gap:115px; } &.row-gap-120{ row-gap:120px; } &.row-gap-125{ row-gap:125px; } &.row-gap-130{ row-gap:130px; } &.row-gap-135{ row-gap:135px; } &.row-gap-140{ row-gap:140px; } &.row-gap-145{ row-gap:145px; } &.row-gap-150{ row-gap:150px; } &.col-gap-0  { column-gap:0; } &.col-gap-5  { column-gap:5px; } &.col-gap-10 { column-gap:10px; } &.col-gap-15 { column-gap:15px; } &.col-gap-20 { column-gap:20px; } &.col-gap-25 { column-gap:25px; } &.col-gap-30 { column-gap:30px; } &.col-gap-35 { column-gap:35px; } &.col-gap-40 { column-gap:40px; } &.col-gap-45 { column-gap:45px; } &.col-gap-50 { column-gap:50px; } &.col-gap-55 { column-gap:55px; } &.col-gap-60 { column-gap:60px; } &.col-gap-65 { column-gap:65px; } &.col-gap-70 { column-gap:70px; } &.col-gap-75 { column-gap:75px; } &.col-gap-80 { column-gap:80px; } &.col-gap-85 { column-gap:85px; } &.col-gap-90 { column-gap:90px; } &.col-gap-95 { column-gap:95px; } &.col-gap-100{ column-gap:100px; } &.col-gap-105{ column-gap:105px; } &.col-gap-110{ column-gap:110px; } &.col-gap-115{ column-gap:115px; } &.col-gap-120{ column-gap:120px; } &.col-gap-125{ column-gap:125px; } &.col-gap-130{ column-gap:130px; } &.col-gap-135{ column-gap:135px; } &.col-gap-140{ column-gap:140px; } &.col-gap-145{ column-gap:145px; } &.col-gap-150{ column-gap:150px; } } .cols-1 { --cols-base:1fr;            --cols:var(--cols-base); } .cols-2 { --cols-base:repeat(2, 1fr); --cols:var(--cols-base); } .cols-3 { --cols-base:repeat(3, 1fr); --cols:var(--cols-base); } .cols-4 { --cols-base:repeat(4, 1fr); --cols:var(--cols-base); } .cols-5 { --cols-base:repeat(5, 1fr); --cols:var(--cols-base); } .cols-6 { --cols-base:repeat(6, 1fr); --cols:var(--cols-base); } .cols-25-75    { --cols-base:1fr 3fr;     --cols:var(--cols-base); } .cols-75-25    { --cols-base:3fr 1fr;     --cols:var(--cols-base); } .cols-33-67    { --cols-base:1fr 2fr;     --cols:var(--cols-base); } .cols-67-33    { --cols-base:2fr 1fr;     --cols:var(--cols-base); } .cols-40-60    { --cols-base:2fr 3fr;     --cols:var(--cols-base); } .cols-60-40    { --cols-base:3fr 2fr;     --cols:var(--cols-base); } .cols-50-25-25 { --cols-base:2fr 1fr 1fr; --cols:var(--cols-base); } .cols-25-50-25 { --cols-base:1fr 2fr 1fr; --cols:var(--cols-base); } .cols-25-25-50 { --cols-base:1fr 1fr 2fr; --cols:var(--cols-base); } @media (max-width:1450px) { } @media (max-width:1140px) { .cols-1, .cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-50-25-25, .cols-25-50-25, .cols-25-25-50, .cols-25-75, .cols-75-25, .cols-33-67, .cols-67-33, .cols-40-60, .cols-60-40 { --cols:1fr; } .cols-3, .cols-4 { --cols:repeat(2, 1fr); } .cols-5, .cols-6 { --cols:repeat(3, 1fr); } .flex-grid { --cols:3; } } @media (max-width:768px) { .cols-2, .cols-3 { --cols:1fr; } .cols-4, .cols-5, .cols-6 { --cols:repeat(2, 1fr); } .flex-grid { --cols:2; } } @media (max-width:425px) { .cols-1, .cols-2, .cols-3, .cols-4, .cols-5, .cols-6 { --cols:1fr; } .flex-grid { --cols:1; } } .no-collapse { --cols:var(--cols-base); } div.form-success { margin:15px 0; max-width:600px; padding:14px 16px; color:var(--message-success-font-color); background-color: var(--message-success-background-color); border:1px solid var(--message-success-border-color); font-weight:600; } form.contact-form, form.search-form { input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow:0 0 0 30px var(--color-lighter-gray) inset !important; } ::placeholder { color:var(--color-black); opacity:1; font-family:inherit; } textarea { font-family:inherit; font-size:inherit; } button, input[type=button], input[type=submit], input[type=reset] { -webkit-appearance:none; -moz-appearance:none; appearance:none; } input[type=file] { width:0.1px; height:0.1px; opacity:0; overflow:hidden; position:absolute; z-index:-1; } input[type=text], input[type=password], input[type=date], input[type=email], input[type=number], input[type=tel], input[type=search], select, textarea { width:100%; padding:1em; background-color:var(--form-input-background-color); border:2px solid var(--form-input-border-color); border-radius:6px; box-sizing:border-box; resize:both; font-size:14px; font-family:inherit; &.half-width { width:50%; @media (max-width:1140px) { width:100%;  } } &.auto-width { width:auto; } } .file-list { margin-left:15px; } .form-msg { margin:15px 0; padding:12px 15px; color:var(--message-error-font-color); background-color:var(--message-error-background-color); border:1px solid var(--message-error-border-color); border-radius:4px; font-weight:600; display:none; align-items:center; gap:.6em; } .form-msg::before { content:"\f071"; font-family:"Font Awesome 7 Pro"; font-weight:900; font-size:2em; flex-shrink:0; } .form-msg.active { display:flex; } .form-field .field-msg { display:none; margin-top:6px; padding-left:4px; color:var(--color-error); font-size:12px; font-weight:400; } .form-field .field-msg.active { display:block; } .form-inline { label { display:inline-block; margin-right:1.5em; cursor:pointer; @media (max-width:1140px) { display:block; &:not(:last-of-type) { margin-bottom:0.5em; } } } input[type=radio], input[type=checkbox] { accent-color:var(--color-primary); margin-right:0.4em; } } .form-indent { padding-left:15px; } #file-input-selected { padding:10px 0; } .file-row { display:flex; align-items:center; justify-content:space-between; gap:.0em; padding:8px 12px; margin-bottom:6px; background-color:var(--form-input-background-color); border:1px solid var(--form-input-border-color); border-radius:4px; font-size:14px; } .file-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .file-remove { flex-shrink:0; padding:0 4px; background:none; border:none; color:var(--color-primary); font-size:20px; line-height:1; cursor:pointer; } .form-upload-progress { position:relative; display:none; align-items:center; justify-content:center; height:22px; margin-bottom:10px; border-radius:4px; overflow:hidden; background-color:var(--color-light-gray); color:var(--color-white); font-size:12px; font-weight:700; } .form-upload-progress.active { display:flex; } .form-upload-progress::before { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--progress, 0%); background-color:var(--color-primary); transition:width .15s ease; } .form-upload-progress span { position:relative; z-index:1; text-shadow:0 1px 2px rgba(0, 0, 0, 0.45); } .file-types { display:block; margin-top:6px; color:var(--font-inactive-color); font-size:12px; } .file-types:empty { display:none; } } body:has(.btn-loading) .file-remove { pointer-events:none; } main section.login { margin: 50px auto; width: 100%; max-width: 360px; min-height: 425px; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; box-sizing: border-box; padding: 50px 0; form.login { margin: 0 auto; width: 85%; .form-item { position: relative; margin-top: 30px; label { position: absolute; pointer-events: none; font-weight: 100; left: 10px; top: 13px; transition: 0.2s ease all; color: var(--form-input-placeholder); } input { font-size: 1em; width: calc(100%); padding: 0.75em; color: var(--form-bold-input-font-color); border: 1px solid var(--form-bold-input-border-color); background-color: var(--form-bold-input-background-color); } input:focus ~ label, input:not(:placeholder-shown) ~ label { top: -20px; left: 1px; color: inherit; font-weight: bold; } button { height: 50px; border-radius: 0; } } .form-img-row { text-align: center; margin-bottom: 45px; img { width: 100%; max-width: 300px; } } .form-msg { display: none; text-align: left; background-repeat: no-repeat; background-position: left 8px center; background-size: 1.5em; margin-top: 30px; padding: 15px 8px 15px 40px; &.active { display: block; } &.error { margin-bottom:0px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23c20909" viewBox="0 0 512 512"><path d="M256 32L0 480H512L256 32zm24 160v24V328v24H232V328 216 192h48zM232 384h48v48H232V384z"/></svg>'); background-color: var(--message-error-background-color); border: 1px solid var(--message-error-border-color); color: var(--message-error-font-color); font-weight: normal; } } } } nav#primary { --t-color:300ms linear; --t-menu:300ms ease-in-out; --t-submenu:200ms ease; --shadow-search:0 4px 6px 4px rgba(0, 0, 0, 0.05); -webkit-tap-highlight-color:rgba(0,0,0,0); font-size:14px; font-weight:600; z-index:10000; top:0; width:100%; position:fixed; input { font-family:inherit; } button.nav-link { background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; transition:color var(--t-color); @media (max-width:1140px) { &:hover { color:var(--color-muted-grey); } margin-left:5px; span { display:inline; } } } a { color:inherit; text-decoration:none; white-space:nowrap; } li.inactive { display:none; } > ul li ul.search { li { display:flex; justify-content:flex-start; background:transparent; cursor:default; box-shadow:none; i.fas { color:var(--color-primary)!important; font-size:1.8em; margin-right:15px; &:hover { transition:color var(--t-color); color:var(--color-primary-hover)!important; } } form { flex:1; align-content:center; } input { width:100%; font-size:inherit; border:0; outline:none; &::placeholder { color:var(--color-black); } &:focus { outline:none; } } } } @media (max-width:1140px) { & { color:var(--color-mid-gray); background-color:var(--color-white); } a { margin-left:5px; padding:10px 0; } &.closing > ul li { position:revert; left:revert; } &.active { position:absolute; > ul { max-height:2000px; opacity:1; &:first-of-type { padding-top:50px; } &:last-of-type { transition-delay:50ms; margin-bottom:40px; } li { position:revert; left:revert; padding:10px 0; } li.active > ul { max-height:2000px; opacity:1; } } } button.mnav-parent, button.mnav-child { cursor:pointer; &:has(.fas) { color:inherit; border:none; background-color:transparent; i.fas { pointer-events:none; } } } div#mnav-strip { position:sticky; display:flex; justify-content:space-between; align-items:center; width:100%; height:35px; padding:0 15px; background-color:var(--color-primary); color:var(--color-white); font-weight:500; font-size:16px; z-index:1; border-bottom:2px solid var(--color-primary-dark); i.fa-bars { font-size:16px; } i.fa-phone, i.fa-phone-flip { font-size:14px; margin-right:4px; } } > ul { display:flex; flex-direction:column; margin:0 auto; padding:0; width:90%; list-style:none; max-height:0; opacity:0; will-change:padding-top, opacity, max-height; transition: padding-top var(--t-menu), opacity var(--t-menu), max-height var(--t-menu); &:last-of-type { border-top:1px solid var(--color-primary); border-bottom:1px solid var(--color-primary); } li { position:absolute; left:-10000px; padding:10px 0; list-style:none; &:not(:first-child) { border-top:1px solid var(--color-primary); } &:has(> ul):not(:has(.search)) > a { font-weight:700; } &:hover { cursor:pointer; &:not(.active, :has(> ul)) { background-color:var(--color-lighter-gray); } } &.active > a { color:var(--color-muted-grey); } a { &:hover { color:var(--color-muted-grey); transition:color var(--t-color); } &:has(i.fa-search):after { cursor:pointer; content:"Search"; } i.fas { margin-right:5px; } } > button.mnav-child { float:right; margin-right:25px; font-weight:800; font-size:15px; &:hover { color:var(--color-muted-grey); transition:color var(--t-color); } } > ul { display:flex; flex-direction:column; margin:11px 0 14px -30px; width:calc(100% + 30px); max-height:0; border-top:1px solid var(--color-primary-dark); opacity:0; overflow:hidden; transition: margin-top var(--t-menu), opacity var(--t-menu), max-height var(--t-menu); &:last-of-type { margin-bottom:-12px; } > li { margin-left:35px; padding-left:5px; &:not(:has(ul)):hover { cursor:pointer; background-color:var(--color-lighter-gray); } } } } } &.active > ul > li:has(> ul.search) { position:relative; } > ul li > ul.search { position:absolute; z-index:1; background:var(--color-white); box-shadow:var(--shadow-search); border-top:0; margin-left:0; width:100%; transition:none; } ul.search li { transition:opacity 1000ms ease; opacity:0; align-items:center; height:38px; margin-left:5px!important; padding:5px 0!important; &:hover { background-color:inherit; } a:has(i.fa-search):after { cursor:pointer; content:""; } } &.active > ul > li.active > ul.search { > li { opacity:1; height:42px; } i.fas { margin-left:5px; font-size:1.7em; } } } @media (min-width:1141px) { & { display:flex; justify-content:space-between; background:var(--color-primary); height:var(--nav-h); color:var(--color-white); } a { display:block; } button.mnav-parent, button.mnav-child { display:none; } div#mnav-strip { display:none; } > ul { display:flex; list-style:none; margin:0; padding:0; &:first-of-type { border-right:2px solid var(--color-white); } &:last-of-type { border-left:2px solid var(--color-white); } li { position:relative; padding:8px 12px; display:flex; align-items:center; &.current { background-color:var(--color-primary-hover); } &:hover, &.active { cursor:pointer; background:var(--color-primary-hover); transition:background-color var(--t-color); &:has(.search) { li { background:var(--color-white); } &:after { content:''; position:absolute; right:0; bottom:-60px; left:-340px; width:410px; height:calc(45px + 20px); } } > ul { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } i.fas:not(.fa-search) { color:var(--color-white); transition:color var(--t-color); } } &:has(> button.nav-link):hover:not(.active) > ul { opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; } :not(:first-child) { min-height:calc(var(--nav-h) + 1px); } &:not(:first-child):not(li li) { border-left:2px solid var(--color-white); } &.highlight { background-color:var(--color-primary-dark); } i.fas { vertical-align:middle; margin-right:5px; font-size:1.3em; color:var(--color-primary-light); will-change:color; &.fa-search { color:var(--color-white); font-size:1.8em; margin-right:0px; } } > ul { display:flex; position:absolute; top:100%; left:0; flex-direction:column; background:var(--color-primary); z-index:1; opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; transition:opacity var(--t-submenu), transform var(--t-submenu); > li { &:has(> ul) { & > a { width:100%; background-repeat:no-repeat; background-size:12px; background-position:right top -3px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23fff"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"/></svg>'); } } min-width:200px; display:flex; align-items:center; justify-content:space-between; &:first-child:not(.search > *) { padding-top:13px; padding-bottom:10px; box-shadow:inset 0 4px 0 -1px var(--color-primary-dark); } &:not(:last-child) { border-bottom:1px solid var(--color-primary-lighter); } } ul { left:100%; top:0; transform:translateX(-10px); } > li:not(:first-child) { > ul { top:-5px; > li:first-child { padding-top:8px; box-shadow:none; border-top:4px solid var(--color-primary-dark); } } } } } } > ul li ul.search { position:absolute; left:-318px; width:370px; margin-top:0px; height:45px; background:var(--color-white); border:2px solid #eee; box-shadow:var(--shadow-search); li { height:100%; } } @media (min-width:1551px) { > ul { border-right:2px solid var(--color-white); border-left:2px solid var(--color-white); &:first-of-type { margin-left:13%; } &:last-of-type { margin-right:13%; } } } } } header { position:fixed; top:var(--nav-h, 42px); padding:10px 7px 0 7px; width:100%; height:var(--header-h, 80px); background-color:var(--color-white); transition:box-shadow 0.15s linear; z-index:1000; &.active { box-shadow:0 0 10px rgba(0,0,0,0.1); } div#header { img.logo { user-select:none; padding-top:2px; width:280px; } .header-title { text-align:right; } h1 { font-size:25px; font-weight:700; white-space:nowrap; } } @media (max-width:1450px) { } @media (max-width:1140px) { &.active { box-shadow:none; } margin-top:calc(var(--nav-h-mobile) + 5px); height:var(--header-h-mobile); box-shadow:none; position:static; div#header { text-align:center; .header-title { text-align:center; } img { width:366px; } h1 { font-size:20px; margin-top:10px; } } } @media (max-width:768px) { } @media (max-width:425px) { div#header { img { width:80%; } h1 { white-space:normal; margin-top:20px; padding:0px 10px; } } } } @media (max-width:1450px) { } @media (max-width:1140px) { } @media (max-width:768px) { } @media (max-width:425px) { } main { width:100%; padding-top:calc(var(--nav-h) + var(--header-h)); @media (max-width:1140px) { padding-top:0px; } } main section { margin-top:40px; background:var(--color-white); h2, h3, h4, h5, h6, p { margin:15px 0px; } h2, h3, h4, h5, h6 { &:has(+ hr) { margin-bottom:0px; } } ul, ol { margin:15px 0px 15px 30px; li:not(:last-child) { margin-bottom:4px; } } ul { list-style:disc; li::marker { color:var(--color-primary); font-size:20px; } } &.paragraphs p, ul.paragraphs li, ol.paragraphs li { line-height:1.7; } } section.landing-hero { position:relative; img { display:block; width:100%; height:405px; object-fit:cover; } h2 { position:absolute; left:0; right:0; bottom:0; margin:0; padding:25px 30px; color:var(--color-primary-dark); font-size:25px; font-weight:700; text-align:center; text-shadow: 0 0 10px var(--color-white), 0 0 20px var(--color-white), 0 0 30px var(--color-white); @media (max-width:768px) { font-size:20px; } } } main section.cards { column-gap:35px; .card { margin-top:10px; box-shadow:0 -4px 0 var(--color-primary), 0 3px 8px var(--color-border-light); border-radius:6px; padding:0px 12px; text-align:center; transition:box-shadow 0.3s ease-in-out; &:hover { box-shadow:0 0 0 4px var(--color-primary); } a { color:var(--color-primary-dark); text-decoration:none; } h2 { min-height:65px; text-decoration:none; font-weight:700; font-size:18px; color:#707375; text-align:center; margin-bottom:15px; } p { font-size:14px; margin-top:0px; } } @media (max-width:1140px) { &.cols-5 { grid-template-columns:repeat(2, 1fr); column-gap:15px; row-gap:30px; .card { max-width:95%; justify-self:center; h2 { font-size:18px; min-height:35px; } } } } @media (max-width:425px) { &.cols-5 { grid-template-columns:repeat(1, 1fr); .card { max-width:100%; justify-self:center; h2 { font-size:16px; min-height:35px; } } } } } main section.cta { padding:5px 0px; border:1px solid var(--color-cta-blue-border); border-radius:6px; text-align:center; background-color:var(--color-cta-blue-bg); .cta-bold { display:block; margin:8px 0px; color:var(--color-primary-dark); font-size:inherit; font-weight:bold; } .cta-text { display:block; margin:8px 0px; color:inherit; font-size:inherit; font-weight:inherit; } .cta-btn { display:inline-block; margin:0px 0px; padding:14px 20px; color:var(--color-white); border-radius:25px; font-weight:600; background-color:var(--color-primary); transition:background-color 0.3s ease-in-out; &:hover { background-color:var(--color-primary-hover); } } } section.slider { --visible-count:1; --slide-gap:0px; --slide-height:auto; --slide-fit:cover; --slide-pad:0; position:relative; width:auto; overflow:hidden; user-select:none; touch-action:pan-y; &:hover {cursor:grab;} &:not([data-slider-ready]) .slides { visibility:hidden; } .slides { display:flex; gap:var(--slide-gap); transition:transform 450ms ease; will-change:transform; &.slider-no-transition { transition:none; } > * { flex:0 0 calc((100% - (var(--visible-count) - 1) * var(--slide-gap)) / var(--visible-count)); min-width:0; } } .slide { display:flex; flex-direction:column; img { display:block; width:100%; height:var(--slide-height); object-fit:var(--slide-fit); padding:var(--slide-pad); box-sizing:border-box; pointer-events:none; -webkit-user-drag:none; } } / .slide-caption { padding-top:10px; font-size:0.8rem; color:var(--font-inactive-color); text-align:center; } &.slide-caption-over { .slide { position:relative; } .slide-caption { position:absolute; left:0; right:0; bottom:0; padding-top:0; } } .slider-dots { display:flex; justify-content:center; gap:10px; margin:10px 0; &:hover {cursor:default;} button { width:12px; height:12px; padding:0; border:0; border-radius:50%; background:var(--color-light-gray); cursor:pointer; transition:background-color 650ms ease; &:hover { background:var(--color-primary-hover); cursor:pointer; } &.active { background:var(--color-primary); } } } .slider-arrows { position:absolute; top:45%; transform:translateY(-50%); z-index:2; padding:10px 14px; border:0; background:none; color:var(--color-mid-gray); font-size:2.4rem; line-height:1; cursor:pointer; transition:color 250ms ease; &:hover { color:var(--color-primary-dark); } } .slider-prev { left:0; } .slider-next { right:0; } &.home-hero { --slide-height:405px; } &.logos-bw, &.logos-color { --slide-gap:20px; --slide-height:110px; --slide-fit:contain; --slide-pad:11px 30px; @media (max-width:1140px) { --slide-height:95px; } @media (max-width:768px) { --slide-height:65px; --slide-pad:0; } } &.logos-bw { --visible-count:5; @media (max-width:1140px) { --visible-count:4; } @media (max-width:768px) { --visible-count:3; } @media (max-width:425px) { --visible-count:3; } } &.logos-color { --visible-count:6; @media (max-width:1140px) { --visible-count:5; } @media (max-width:768px) { --visible-count:4; } @media (max-width:425px) { --visible-count:3; } } &.ext-cables { --visible-count:3; --slide-gap:20px; --slide-height:300px; --slide-fit:contain; --slide-pad:0 30px; .slider-dots { margin:30px 0 0 0; } @media (max-width:1140px) { --visible-count:2; } @media (max-width:768px) { --visible-count:1; } } } .lightbox { cursor:pointer; } .lightbox-body { display:none; } .lightbox-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:2.5vmin; background:rgba(0, 0, 0, 0.8); opacity:0; visibility:hidden; transition:opacity 0.15s ease, visibility 0s linear 0.15s; } .lightbox-overlay.visible { opacity:1; visibility:visible; transition:opacity 0.15s ease; } .lightbox-card { position:relative; display:flex; flex-direction:column; max-width:95vw; max-height:95vh; background:var(--color-white); box-shadow:0 6px 30px rgba(0, 0, 0, 0.4); overflow:hidden; transform:scale(0.96); transition:transform 0.15s ease; } .lightbox-overlay.visible .lightbox-card { transform:scale(1); } .lightbox-content { display:flex; flex-direction:column; align-items:center; gap:0.75rem; min-height:0; padding:2.5rem 2.5rem 1.0rem 2.5rem; overflow:auto; } .lightbox-content img { max-width:100%; max-height:65vh; object-fit:contain; } .lightbox-content .lightbox-title { font-size:1.2rem; font-weight:800; text-align:center; } .lightbox-content .lightbox-caption { font-size:0.8rem; color:var(--font-inactive-color); text-align:center; } .lightbox-card.fixed .lightbox-content img { max-height:100%; } .lightbox-close { position:absolute; top:0.5rem; right:0.5rem; z-index:1; padding:0; border:0; background:none; color:var(--color-primary); font-size:1.6rem; line-height:1; cursor:pointer; transition:color 0.15s ease; } .lightbox-close:hover { color:var(--color-primary-hover); } body.lightbox-open { overflow:hidden; } body.pa-editing .lightbox-body { display:block; margin-top:0.5rem; outline:2px dashed var(--color-primary); outline-offset:4px; } body.pa-editing .lightbox-body::before { content:"Lightbox"; display:block; margin-bottom:0.25rem; color:var(--color-primary); font-size:0.7rem; font-weight:600; } body.pa-editing .lightbox-body img { max-width:240px; height:auto; } footer { width:100%; div#footer { color:var(--color-black); font-size:13px; a { text-decoration:inherit; &:not(:hover) { color:var(--color-mid-gray); } } img.logo { user-select:none; pointer-events:none; width:100%; max-width:240px; padding-bottom:5px; } .contact { address { font-style:normal; } .footer-res { margin-top:10px; } } h2 { font-size:16px; font-weight:600; padding-bottom:10px; text-transform:uppercase; } ul { list-style:none; li:not(:last-child) { margin-bottom:6px; } } @media (max-width:1450px) { } @media (max-width:1140px) { & > * { width:240px; padding:0px; margin-left:auto; margin-right:auto; } } @media (max-width:768px) { } @media (max-width:425px) { } } div#copyright { margin-top:40px; padding:10px 0px; color:#e0e0e0; background-color:var(--color-primary); font-size:14px; text-align:center; a { color:var(--color-white); text-decoration:inherit; } br.break-sm { display:none; } span.hide-sm { display:inline; } @media (max-width:1140px) { padding:7px 0px; } @media (max-width:768px) {  } @media (max-width:425px) { br.break-sm { display:inline; } span.hide-sm { display:none; } } } } .cookie-notice { position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:9000; width:calc(100% - 2rem); max-width:56rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem 1.25rem; padding:0.6rem 1.1rem; border:1px solid var(--color-border-light); border-radius:8px; background:var(--color-white); color:var(--font-color); font-size:0.85rem; box-shadow:0 2px 14px rgba(0, 0, 0, 0.18); } .cookie-notice p { margin:0; } .cookie-notice a { color:var(--color-primary); text-decoration:underline; } .cookie-notice[hidden] { display:none; }