/* Header: full viewport width (Tilda t228 defaults to max-width:1200px on maincontainer) */ #rec633589913 .t228, #rec737902338 .t228 { width: 100% !important; max-width: 100% !important; left: 0; right: 0; } #rec633589913 .t228__maincontainer.t228__c12collumns, #rec737902338 .t228__maincontainer.t228__c12collumns { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } #rec633589913 .tmenu-mobile, #rec737902338 .tmenu-mobile { width: 100% !important; max-width: 100% !important; } #rec633589913 .tmenu-mobile__container, #rec737902338 .tmenu-mobile__container { max-width: 100% !important; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* Dark background on full bar when scrolled */ #rec633589913 .t228.t228__positionfixed, #rec737902338 .t228.t228__positionfixed { background-color: rgba(10, 16, 39, 0.97) !important; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15); } #rec633589913 .t228.t228__positionfixed .t228__maincontainer, #rec737902338 .t228.t228__positionfixed .t228__maincontainer { background-color: transparent !important; } /* * Mobile menu panel background: Tilda's own scroll-driven background-opacity * script (t_menu__changeBgOpacity) is a no-op for .t228 at mobile widths, so * the panel keeps its exported "top of page" transparent background (data- * bgcolor-rgba) even when opened — making the open menu see-through over the * hero content. Force a solid background whenever the burger is open. */ #rec633589913 .tmenu-mobile:has(.t-menuburger-opened) ~ .t228, #rec737902338 .tmenu-mobile:has(.t-menuburger-opened) ~ .t228 { background-color: rgba(10, 16, 39, 0.97) !important; } @media screen and (max-width: 960px) { #rec633589913 .t228__maincontainer.t228__c12collumns, #rec737902338 .t228__maincontainer.t228__c12collumns { padding-left: 20px; padding-right: 20px; } } /* Menu link color on hero */ #rec633589913 .t228 .t-menu__link-item, #rec633589913 .t228 .t228__right_langs_lang { color: #ffffff !important; } #rec633589913 .t228 .t228__logo { color: #ffffff !important; } /* Prevent horizontal scroll / white gap on mobile */ html, body { overflow-x: clip; max-width: 100%; } .tilda-root { width: 100%; max-width: 100%; overflow-x: clip; } .tilda-root #allrecords, .tilda-root .t-records { width: 100%; max-width: 100%; overflow-x: clip; } .tilda-root .r.t-rec { max-width: 100%; overflow-x: clip; } /* Prevent Tailwind from resetting Tilda blocks */ .tilda-root .t-records { opacity: 1 !important; } /* * Tilda's scroll-reveal animation starts a "r_anim" record at opacity:0 * (class "r_hidden") and removes/fades it in via its own inline-script- * driven IntersectionObserver once scrolled into view. That inline script * is stripped when the page is imported as static HTML, so records that * never got their reveal triggered stay permanently invisible -- on the * cases page this silently hid two whole sections ("APPROACH & SERVICES" * and the services/DISCOVERY PHASE writeup), which still took up their * normal layout height, reading as a large blank gap between case cards. */ .tilda-root .r_hidden { opacity: 1 !important; } /* t396: clip desktop-width artboards until JS scales them */ .tilda-root .t396 { width: 100%; max-width: 100%; overflow: hidden; } .tilda-root .t396__artboard, .tilda-root .t396__carrier, .tilda-root .t396__filter { max-width: 100%; } .tilda-root .t-container, .tilda-root .t-container_100 { box-sizing: border-box; } /* Cases page: show content hidden by animation (do NOT reset transform — breaks t396 scale) */ .tilda-root[data-tilda-slug="cases"] .t396 .t-animate, .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem { opacity: 1 !important; visibility: visible !important; } /* t396 image elements: ensure photos/SVGs render (not collapsed stripes) */ .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[data-elem-type="image"] .tn-atom, .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[data-elem-type="image"] .tn-atom__img, .tilda-root[data-tilda-slug="cases"] .t396 img.tn-atom__img { display: block; width: 100%; height: 100%; object-fit: contain; } .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[data-elem-type="image"] { overflow: visible; } .tilda-root[data-tilda-slug="cases"] .t228 .t-menu__link-item, .tilda-root[data-tilda-slug="cases"] #rec737902338 .t228__burgerlogo__title { color: #ffffff !important; } @media screen and (max-width: 960px) { /* * "CASE STUDY" eyebrow label on the first case card: authored with a fixed * inline line-height (144px, matching its 144px desktop font-size), but * Tilda only shrinks the font-size at each mobile breakpoint (64/80/110px) * -- not the line-height -- so once the font shrinks and the text wraps to * two lines, the gap between "CASE" and "STUDY" stays huge. Use a normal * unitless line-height so it scales with whatever font-size applies. */ #rec1043944196 .tn-elem__10439441961628090465703 .tn-atom { line-height: 1.05 !important; } /* Images must not exceed viewport (was max-width: none globally) */ .tilda-root img.tn-atom__img, .tilda-root img.t-img, .tilda-root .t531__blockimg, .tilda-root .t850__bgimg { max-width: 100% !important; height: auto; } .tilda-root .t-cover__carrier, .tilda-root .t-cover__wrapper, .tilda-root .t826__galaxy-wrapper { max-width: 100%; } /* Desktop header columns hidden on mobile — avoid min-width overflow */ #rec633589913 .t228__centerside, #rec633589913 .t228__rightside, #rec633589913 .t228__leftside, #rec737902338 .t228__centerside, #rec737902338 .t228__rightside, #rec737902338 .t228__leftside { min-width: 0 !important; } .tilda-root .t850__container, .tilda-root .t1061__container { max-width: 100%; overflow-x: hidden; } /* t983 cards carousel: Tilda's own .t983__container_mobile-flex modifier sets overflow-x:scroll for native touch swiping — don't clip it. */ .tilda-root .t983__container { max-width: 100%; } .tilda-root .t-input, .tilda-root .t-select, .tilda-root .t-input-group { max-width: 100%; box-sizing: border-box; } .tilda-root .t1061__wrapper, .tilda-root .t1061__slider { max-width: 100%; overflow: hidden; } /* * Big section headings (t050 "SERVICES WE OFFER" / "TECHNOLOGIES WE USE" / * "TELL US ABOUT YOUR PROJECT" etc.) carry a fixed inline custom font-size * (e.g. 72px) with no responsive variant, so long single words (e.g. * "TECHNOLOGIES") overflow the viewport instead of shrinking. Their * wrapping .t-title already has correct responsive font-size breakpoints — * inherit that instead of the stuck inline value. */ .tilda-root .t050__title > [data-customstyle="yes"], .tilda-root .t-section__title > [data-customstyle="yes"], .tilda-root .t718__contacts > [data-customstyle="yes"] { font-size: inherit !important; } /* Same issue on the "Hey, let's put it simply" intro paragraph: 30px custom size (its .t-text_sm class is meant for 14px body copy), plus bold inline spans stuck at 32px regardless. */ .tilda-root .t531__text > [data-customstyle="yes"], .tilda-root .t531__text > [data-customstyle="yes"] strong[style*="font-size"] { font-size: inherit !important; } /* Same issue on t473 ("worth mentioning" / "Nothing similar?") — its .t-name_xs class is meant for small labels (12-16px), too small to inherit here, so give it an explicit, non-overflowing mobile size. */ .tilda-root .t473__title > [data-customstyle="yes"] { font-size: 32px !important; } /* * "QUICK DEMOS" / "TELL US ABOUT YOUR PROJECT" / "WORTH MENTIONING" are * all authored as a pale gray (#e0e0e0) eyebrow label -- fine as a subtle * accent on the dark case cards, but the same inline color is reused on * these three sections' plain *white* background, where it's nearly * invisible. The section reads as a large block of empty white space * instead of a labeled heading. Darken it enough to actually read. */ #rec1138485611 .t-section__title [data-customstyle="yes"] strong, #rec738070662 .t718__contacts [data-customstyle="yes"] span, #rec738434040 .t473__title [data-customstyle="yes"] span { color: #6b6b6b !important; } } @media screen and (max-width: 480px) { .tilda-root .t473__title > [data-customstyle="yes"] { font-size: 26px !important; } } /* * Case cards: give each card a visible border/frame, space cards apart, * round image corners, and draw a divider line above the Team/Technologies * row (which is moved to the end of the reading order and split into two * columns by the per-record rules below). * * The gap between cards is added as padding-bottom on the record wrapper * (which already has its own dark background-color), not as margin-bottom * on .t396 -- a margin there collapses through the wrapper (it has no * border/padding of its own to contain it) and exposes the page's white * background as a stripe between cards instead of staying dark. */ @media screen and (max-width: 479px) { .tilda-root[data-tilda-slug="cases"] .r.t-rec:has(> .t396) { padding-bottom: 24px !important; } /* * Text blocks (title, description, Team/Technologies, labels) keep * Tilda's desktop "autoheight textfit" layout mode (display:table / * table-cell), which reserves extra row height beyond the actual text -- * visible as dead air below the last line before the next block starts. * A plain block box sizes exactly to its content. */ .tilda-root[data-tilda-slug="cases"] .t396__artboard .tn-elem[data-elem-type="text"], .tilda-root[data-tilda-slug="cases"] .t396__artboard .tn-elem[data-elem-type="text"] .tn-atom { display: block !important; } .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[data-elem-type="image"] .tn-atom { border-radius: 12px !important; } /* * "picture" shape elements (case screenshots/logos) are sized via * aspect-ratio on the outer .tn-elem, but their .tn-atom__sbs-anim-wrapper * uses inline `height: inherit`, which inherits the *specified* height * (our `height: auto`) rather than the aspect-ratio-resolved pixel value * -- so the wrapper and the innermost .tn-atom (which actually paints the * background-image) both collapse to 0px, leaving a tall blank gap where * the picture should be. Percentage heights resolve against the parent's * real used height, so they pick up the aspect-ratio size correctly. */ .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[data-elem-type="shape"].picture .tn-atom__sbs-anim-wrapper, .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[data-elem-type="shape"].picture .tn-atom { width: 100% !important; height: auto !important; aspect-ratio: inherit !important; } .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[data-elem-type="shape"].picture .tn-atom { border-radius: 12px !important; } .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[class*="713696565736"], .tilda-root[data-tilda-slug="cases"] .t396 .tn-elem[class*="713697877905"] { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; padding-top: 20px !important; } } @media screen and (max-width: 479px) { /* * Case-study t396 cards: instead of trying to keep Tilda's absolute- * position layout (which assumed shorter copy per field and overlaps as * a result), convert each card to a normal flex flow at mobile widths. * Text blocks stack full-width in their authored reading order; icon/ * image badges flow inline between them; purely decorative frame lines, * gradient blur circles, and the giant background case-number are * dropped (no content, only ever existed to overlap things). This is * robust to any exact viewport width or font metrics -- nothing here * depends on pixel-matching a specific device. */ #rec738041964 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec738041964 .t396__carrier, #rec738041964 .t396__filter, #rec738041964 .t396 { height: auto !important; position: relative !important; } #rec738041964 .tn-elem__7380419641747834715020 { display: none !important; } #rec738041964 .tn-elem__7380419641747835656603 { display: none !important; } #rec738041964 .tn-elem__7380419641747834725120 { display: none !important; } #rec738041964 .tn-elem__7380419641713700209527 { display: none !important; } #rec738041964 .tn-elem__7380419641650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 307 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738041964 .tn-elem__7380419641650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738041964 .tn-elem__7380419641650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 182 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738041964 .tn-elem__7380419641650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738041964 .tn-elem__7380419641650631154866 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 970 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 200 !important; margin: 0 auto 16px !important; } #rec738041964 .tn-elem__7380419641650631154866 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738041964 .tn-elem__7380419641650631154873 { display: none !important; } #rec738041964 .tn-elem__7380419641713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 8% 16px 0 !important; } #rec738041964 .tn-elem__7380419641713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738041964 .tn-elem__7380419641713697877905 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2010 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 0 16px !important; } #rec738041964 .tn-elem__7380419641713697877905 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738041964 .tn-elem__7380419641713700020165 { display: none !important; } #rec738041964 .tn-elem__7380419641733251139811 { display: none !important; } #rec738041964 .tn-elem__7380419641733251238272 { display: none !important; } #rec738211614 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec738211614 .t396__carrier, #rec738211614 .t396__filter, #rec738211614 .t396 { height: auto !important; position: relative !important; } #rec738211614 .tn-elem__7382116141747835075266 { display: none !important; } #rec738211614 .tn-elem__7382116141747835329348 { display: none !important; } #rec738211614 .tn-elem__7382116141713700209527 { display: none !important; } #rec738211614 .tn-elem__7382116141650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 344 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738211614 .tn-elem__7382116141650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738211614 .tn-elem__7382116141650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 184 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738211614 .tn-elem__7382116141650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738211614 .tn-elem__7382116141650631154873 { display: none !important; } #rec738211614 .tn-elem__7382116141713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 8% 16px 0 !important; } #rec738211614 .tn-elem__7382116141713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738211614 .tn-elem__7382116141713697877905 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2010 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 0 16px !important; } #rec738211614 .tn-elem__7382116141713697877905 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738211614 .tn-elem__7382116141713700020165 { display: none !important; } #rec738211614 .tn-elem__7382116141713729759895 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1191 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 150 !important; margin: 0 auto 16px !important; } #rec738211614 .tn-elem__7382116141713729759895 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738211614 .tn-elem__7382116141733253325653 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1306 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 200 !important; margin: 0 auto 16px !important; } #rec738211614 .tn-elem__7382116141733253325653 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738211614 .tn-elem__7382116141733253352460 { display: none !important; } #rec738211614 .tn-elem__7382116141733253354389 { display: none !important; } #rec738211614 .tn-elem__7382116141733253563003 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1313 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 133 !important; margin: 0 auto 16px !important; } #rec738211614 .tn-elem__7382116141733253563003 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738403934 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec738403934 .t396__carrier, #rec738403934 .t396__filter, #rec738403934 .t396 { height: auto !important; position: relative !important; } #rec738403934 .tn-elem__7384039341713700209527 { display: none !important; } #rec738403934 .tn-elem__7384039341747836656352 { display: none !important; } #rec738403934 .tn-elem__7384039341650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 310 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738403934 .tn-elem__7384039341650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738403934 .tn-elem__7384039341650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 199 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738403934 .tn-elem__7384039341650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738403934 .tn-elem__7384039341747838025285 { display: none !important; } #rec738403934 .tn-elem__7384039341650631154873 { display: none !important; } #rec738403934 .tn-elem__7384039341713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 8% 16px 0 !important; } #rec738403934 .tn-elem__7384039341713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738403934 .tn-elem__7384039341713697877905 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2010 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 0 16px !important; } #rec738403934 .tn-elem__7384039341713697877905 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738403934 .tn-elem__7384039341713700020165 { display: none !important; } #rec738403934 .tn-elem__7384039341713729759895 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1306 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 206 !important; margin: 0 auto 16px !important; } #rec738403934 .tn-elem__7384039341713729759895 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738403934 .tn-elem__7384039341733254934951 { display: none !important; } #rec738403934 .tn-elem__7384039341733255046536 { display: none !important; } #rec738403934 .tn-elem__7384039341733255062388 { display: none !important; } #rec738403934 .tn-elem__7384039341733255072635 { display: none !important; } #rec738403934 .tn-elem__7384039341733255145663 { display: none !important; } #rec738415135 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec738415135 .t396__carrier, #rec738415135 .t396__filter, #rec738415135 .t396 { height: auto !important; position: relative !important; } #rec738415135 .tn-elem__7384151351747837565476 { display: none !important; } #rec738415135 .tn-elem__7384151351747837186287 { display: none !important; } #rec738415135 .tn-elem__7384151351713700209527 { display: none !important; } #rec738415135 .tn-elem__7384151351650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 219 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738415135 .tn-elem__7384151351650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738415135 .tn-elem__7384151351650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 121 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738415135 .tn-elem__7384151351650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738415135 .tn-elem__7384151351650631154873 { display: none !important; } #rec738415135 .tn-elem__7384151351713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738415135 .tn-elem__7384151351713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738415135 .tn-elem__7384151351713700020165 { display: none !important; } #rec738415135 .tn-elem__7384151351713729759895 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1144 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 115 !important; margin: 0 auto 16px !important; } #rec738415135 .tn-elem__7384151351713729759895 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738415135 .tn-elem__7384151351713806579651 { display: none !important; } #rec738415135 .tn-elem__7384151351713808592814 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1181 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 187 !important; margin: 0 auto 16px !important; } #rec738415135 .tn-elem__7384151351713808592814 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738426257 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec738426257 .t396__carrier, #rec738426257 .t396__filter, #rec738426257 .t396 { height: auto !important; position: relative !important; } #rec738426257 .tn-elem__7384262571713700209527 { display: none !important; } #rec738426257 .tn-elem__7384262571650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 286 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738426257 .tn-elem__7384262571650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738426257 .tn-elem__7384262571650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 191 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738426257 .tn-elem__7384262571650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738426257 .tn-elem__7384262571650631154873 { display: none !important; } #rec738426257 .tn-elem__7384262571713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 8% 16px 0 !important; } #rec738426257 .tn-elem__7384262571713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738426257 .tn-elem__7384262571713697877905 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2010 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 0 16px !important; } #rec738426257 .tn-elem__7384262571713697877905 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738426257 .tn-elem__7384262571713700020165 { display: none !important; } #rec738426257 .tn-elem__7384262571713729759895 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 938 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 150 !important; margin: 0 auto 16px !important; } #rec738426257 .tn-elem__7384262571713729759895 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738426257 .tn-elem__7384262571713806780365 { display: none !important; } #rec738426257 .tn-elem__7384262571733257367992 { display: none !important; } #rec738426257 .tn-elem__7384262571733257367997 { display: none !important; } #rec738426257 .tn-elem__7384262571733257373466 { display: none !important; } #rec738426257 .tn-elem__7384262571733257519875 { display: none !important; } #rec738452912 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec738452912 .t396__carrier, #rec738452912 .t396__filter, #rec738452912 .t396 { height: auto !important; position: relative !important; } #rec738452912 .tn-elem__7384529121747836179432 { display: none !important; } #rec738452912 .tn-elem__7384529121747835971867 { display: none !important; } #rec738452912 .tn-elem__7384529121713700209527 { display: none !important; } #rec738452912 .tn-elem__7384529121650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 351 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738452912 .tn-elem__7384529121650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738452912 .tn-elem__7384529121650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 206 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec738452912 .tn-elem__7384529121650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec738452912 .tn-elem__7384529121650631154873 { display: none !important; } #rec738452912 .tn-elem__7384529121713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 8% 16px 0 !important; } #rec738452912 .tn-elem__7384529121713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738452912 .tn-elem__7384529121713697877905 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2010 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 0 16px !important; } #rec738452912 .tn-elem__7384529121713697877905 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738452912 .tn-elem__7384529121713700020165 { display: none !important; } #rec738452912 .tn-elem__7384529121713729759895 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 910 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 150 !important; margin: 0 auto 16px !important; } #rec738452912 .tn-elem__7384529121713729759895 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec738452912 .tn-elem__7384529121713780349527 { display: none !important; } #rec738452912 .tn-elem__7384529121733260753645 { display: none !important; } #rec738452912 .tn-elem__7384529121733260753650 { display: none !important; } #rec1043944196 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec1043944196 .t396__carrier, #rec1043944196 .t396__filter, #rec1043944196 .t396 { height: auto !important; position: relative !important; } #rec1043944196 .tn-elem__10439441961628090465703 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 144 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944196 .tn-elem__10439441961628090465703 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944196 .tn-elem__10439441961713700209527 { display: none !important; } #rec1043944196 .tn-elem__10439441961650630990958 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 84 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944196 .tn-elem__10439441961650630990958 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944196 .tn-elem__10439441961650630990966 { display: none !important; } #rec1043944196 .tn-elem__10439441961650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 594 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944196 .tn-elem__10439441961650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec1043944196 .tn-elem__10439441961650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 475 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944196 .tn-elem__10439441961650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec1043944196 .tn-elem__10439441961747834415083 { display: none !important; } #rec1043944196 .tn-elem__10439441961747822800677 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1292 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 161 !important; margin: 0 auto 16px !important; } #rec1043944196 .tn-elem__10439441961747822800677 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944196 .tn-elem__10439441961650631154873 { display: none !important; } #rec1043944196 .tn-elem__10439441961713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 8% 16px 0 !important; } #rec1043944196 .tn-elem__10439441961713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944196 .tn-elem__10439441961713697877905 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2010 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944196 .tn-elem__10439441961713697877905 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944196 .tn-elem__10439441961713700020165 { display: none !important; } #rec1043944196 .tn-elem__10439441961713704689665 { display: none !important; } #rec1043944196 .tn-elem__10439441961747767889407 { display: none !important; } #rec1043944196 .tn-elem__10439441961747822308014 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 434 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944196 .tn-elem__10439441961747822308014 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944196 .tn-elem__10439441961747767889402 { display: none !important; } #rec1043944196 .tn-elem__10439441961747768103393 { display: none !important; } #rec1043944196 .tn-elem__10439441961747768108013 { display: none !important; } #rec1043944196 .tn-elem__10439441961747768347888 { display: none !important; } #rec1043944196 .tn-elem__10439441961747771807427 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 1519 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 33 !important; margin: 0 auto 16px !important; } #rec1043944196 .tn-elem__10439441961747771807427 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944471 .t396__artboard { position: relative !important; height: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; padding: 28px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; } #rec1043944471 .t396__carrier, #rec1043944471 .t396__filter, #rec1043944471 .t396 { height: auto !important; position: relative !important; } #rec1043944471 .tn-elem__10439444711747834229452 { display: none !important; } #rec1043944471 .tn-elem__10439444711747833943825 { display: none !important; } #rec1043944471 .tn-elem__10439444711713700209527 { display: none !important; } #rec1043944471 .tn-elem__10439444711650631154852 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 265 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944471 .tn-elem__10439444711650631154852 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec1043944471 .tn-elem__10439444711650631154863 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 184 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944471 .tn-elem__10439444711650631154863 .tn-atom { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } #rec1043944471 .tn-elem__10439444711650631154873 { display: none !important; } #rec1043944471 .tn-elem__10439444711713696565736 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2000 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 8% 16px 0 !important; } #rec1043944471 .tn-elem__10439444711713696565736 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944471 .tn-elem__10439444711713697877905 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 2010 !important; flex: 0 1 46% !important; width: 46% !important; max-width: 46% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944471 .tn-elem__10439444711713697877905 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944471 .tn-elem__10439444711713700020165 { display: none !important; } #rec1043944471 .tn-elem__10439444711747821505827 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 135 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 16px !important; } #rec1043944471 .tn-elem__10439444711747821505827 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944471 .tn-elem__10439444711713729759895 { position: static !important; transform: none !important; left: auto !important; top: auto !important; order: 939 !important; flex: 0 1 auto !important; width: 100% !important; max-width: 200px !important; height: auto !important; aspect-ratio: 200 / 357 !important; margin: 0 auto 16px !important; } #rec1043944471 .tn-elem__10439444711713729759895 .tn-atom { position: static !important; width: 100% !important; height: auto !important; } #rec1043944471 .tn-elem__10439444711747820722389 { display: none !important; } #rec1043944471 .tn-elem__10439444711747820722387 { display: none !important; } #rec1043944471 .tn-elem__10439444711747820722381 { display: none !important; } #rec1043944471 .tn-elem__10439444711733253354389 { display: none !important; } } /* * Two cards (GIF_STAR / rec738403934 and rec738415135) are authored with a * light artboard background (background-color:#e0e0e0 on .t396__artboard, * set in Tilda's own per-record