/* ================================================================================================================== FoldedLogic Layout Architecture (Ma) An Origami-Inspired Layout Architecture Copyright © 2026 Peter Johnson Independent website architecture designed for performance, intentional layout composition, and edge deployment. ================================================================================================================== 01. Foundation 02. Typography 03. Architecture (Kumi System) 04. Layout 05. Media 06. Components 07. Forms 08. Utilities 09. Theme / Variants ================================================================================================================== */ /* ========================================================= 01. FOUNDATION Reset, normalize, base HTML elements ========================================================= */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/case-studies/rodriguez-demo/assets/fonts/SlGUmQSNjdsmc35JDF1K5GR7SDktYw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/case-studies/rodriguez-demo/assets/fonts/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/case-studies/rodriguez-demo/assets/fonts/0QIvMX1D_JOuMwT7I-NP.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/case-studies/rodriguez-demo/assets/fonts/0QIvMX1D_JOuMwr7Iw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /****** TOKENS Folded Logic variable system ******/ :root { /*** Color ***/ --color-page: #ffffff; --color-page-soft: #FAF8F5; --color-panel-dim: #8B6914; --color-panel-dark: #0A1F44; --color-ink: #1b1b1b; --color-ink-strong: #0A1F44; --color-ink-soft: #121212; --color-ink-muted: #282828; --color-ink-faint: #444444; --color-ink-light: #636363; --color-ink-lighter: #707070; --color-h1: #0a1f44; --color-h1-hover: #162A4E; --color-h2: #0a1f44; --color-h2-hover: #162A4E; --color-h3: #162A4E; --color-h3-hover: #0a1f44; --color-h4: #0a1f44; --color-h4-hover: #162A4E; --color-h5: #0a1f44; --color-h5-hover: #162A4E; --color-h6: #162A4E; --color-h6-hover: #0a1f44; --color-blockquote: #282828; --color-blockquote-edge: #232323; --color-blockquote-panel: #efefef; --color-breadcrumb: #000000; --color-breadcrumb-hover: #232323; --color-breadcrumb-current: #757575; --color-caption-title: #0a1f44; --color-caption-all: #8B6914; --color-line: #282828; --color-line-soft: #cccccc; --color-line-faint: #E6E8EC; --color-line-strong: #000000; --color-inverse: #ffffff; --color-danger: #ea0000; --color-button: #fff; --color-button-hover: #fff; --color-button-panel: #8B6914; --color-button-panel-hover: #6F5410; --color-button-border: #8B6914; --color-button-border-hover: #6F5410; --color-button-alt: #0A1F44; --color-button-alt-hover: #fff; --color-button-alt-panel: #fff; --color-button-alt-panel-hover: #8B6914; --color-button-alt-border: #0A1F44; --color-button-alt-border-hover: #8B6914; --color-shadow-soft: rgba(0,0,0,.04); --color-shadow-mid: rgba(0,0,0,.10); --color-shadow-focus: rgba(0,0,0,.25); --color-focus: #999; --color-focus-light: #cdcdcd; /*** Typography ***/ --font-body: "Lora", "Times New Roman", Times, serif; --font-display: "EB Garamond", "Times New Roman", Times, serif; --font-serif: "Times New Roman", Times, serif; --font-sans: Arial, Helvetica, sans-serif; --weight-body: 400; --weight-medium: 500; --weight-strong: 700; --weight-heavy: 800; --size-body: 21px; --line-body: 32px; --size-spotlight: 24px; --line-spotlight: 34px; --size-h1: 56px; --line-h1: 60px; --size-h2: 44px; --line-h2: 48px; --size-h3: 28px; --line-h3: 30px; --size-h4: 26px; --line-h4: 28px; --size-h5: 24px; --line-h5: 26px; --size-h6: 22px; --line-h6: 24px; --h-pad-top: 0px; --size-blockquote: 18px; --line-blockquote: 24px; --size-breadcrumb: 14px; --line-breadcrumb: 18px; --size-caption: 16px; --line-caption: 22px; --size-caption-title: 20px; --line-caption-title: 24px; --size-caption-detail: 14px; --line-caption-detail: 14px; --size-button: 16px; --line-button: 22px; --padding-button-top: 7px; --padding-button-bottom: 8px; --padding-button-side: 40px; /*** Spacing / Ma ***/ --ken: 10px; --ma-moto: 0; --ma-sho: calc(var(--ken) * 1); --ma-chu: calc(var(--ken) * 2); --ma-dai: calc(var(--ken) * 4); --ma-cho: calc(var(--ken) * 8); --site-gutter: 20px; --grid-gap: 40px; /*** Width / Layout ***/ --width-moto: 500px; --width-sho: 700px; --width-chu: 900px; --width-dai: 1100px; --width-cho: 1300px; --width-mobile-menu: 240px; --width-mobile-menu-inner: 220px; /*** Components / Forms ***/ --border-thin: 1px; --border-base: 2px; --border-strong: 4px; --color-form: #121212; --color-line-form: #ccc; --color-panel-form: #fff; --border-form: 2px; --radius-panel-form: 6px; --size-form: 16px; --weight-form: 400; --field-h: 30px; --field-pad-x: 10px; --field-pad-y: 10px; --field-textarea-h: 100px; /*** Layer ***/ --z-moto: 0; --z-sho: 10; --z-chu: 20; --z-dai: 30; --z-cho: 100; --z-banner: 200; --z-overlay: 300; --z-menu: 500; --z-dropdown: 1000; --z-plugin: 900000; --z-max: 999999; /*** Motion ***/ --nagare-fast: .18s; --nagare: .28s; --nagare-slow: .45s; --ease-soft: cubic-bezier(.25,.46,.45,.94); --ease-smooth: cubic-bezier(.4,0,.2,1); --ease-snap: cubic-bezier(.2,.8,.2,1); --reveal-distance: 20px; --hover-lift: -3px; --press-down: 2px; --press-scale: .97; /*** Accessibility ***/ --focus-ring-width: 2px; --focus-ring-offset: 3px; --scroll-offset: 120px; } @media only screen and (min-width : 960px) and (max-width : 1919px) { :root {--grid-gap: 2.08vw;} } @media only screen and (min-width : 960px) and (max-width : 1259px) { :root { --size-body: 18px; --line-body: 26px; --size-button: 14px; --line-button: 18px; --padding-button-top: 6px; --padding-button-bottom: 7px; --padding-button-side: 30px; } } @media only screen and (max-width: 959px) { :root { --size-body: 16px; --line-body: 22px; --size-h1: 34px; --line-h1: 38px; --size-h2: 32px; --line-h2: 36px; --size-h3: 24px; --line-h3: 26px; --size-h4: 23px; --line-h4: 24px; --size-h5: 22px; --line-h5: 23px; --size-h6: 21px; --line-h6: 22px; --size-blockquote: 16px; --line-blockquote: 20px; --size-caption: 14px; --line-caption: 20px; --size-caption-title: 18px; --line-caption-title: 22px; --size-caption-detail: 13px; --line-caption-detail: 13px; --size-button: 14px; --line-button: 18px; --padding-button-top: 6px; --padding-button-bottom: 7px; --padding-button-side: 30px; --size-spotlight: 20px; --line-spotlight: 28px; --grid-gap: 20px; --ken: 8px; } } @media only screen and (max-width: 639px) { :root { --size-body: 16px; --line-body: 22px; --size-h1: 30px; --line-h1: 34px; --size-h2: 28px; --line-h2: 30px; --size-h3: 22px; --line-h3: 24px; --size-h4: 21px; --line-h4: 23px; --size-h5: 20px; --line-h5: 22px; --size-h6: 18px; --line-h6: 20px; --size-blockquote: 14px; --line-blockquote: 18px; --size-button: 13px; --line-button: 16px; --padding-button-top: 5px; --padding-button-bottom: 6px; --padding-button-side: 20px; --size-spotlight: 18px; --line-spotlight: 24px; --ken: 6px; } } body, div, dl, dt, dd, ul, ol, li, pre, p, form, fieldset, input, table, th, tr, td, embed, object, img, figure, figcaption, h1, h2, h3, h4, h5, h6 {padding: 0;margin: 0; border: 0;} article, aside, hr, details, summary, header, footer, menu, nav, section, main, video, search {padding: 0;margin: 0;border: 0;display: block;} button {background: none;border: none;padding: 0;font: inherit;} body {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;background: var(--color-page);min-height: 100%;min-width: 320px;font-size: var(--size-body);line-height: var(--line-body);color: var(--color-ink);font-family: var(--font-body);} html { height: 100%; -webkit-text-size-adjust: 100%;} *, *::before, *::after {box-sizing: border-box;} table {border-collapse: collapse;border-spacing: 0;} td {padding: 5px;vertical-align: top;} a {color: var(--color-ink-strong);font-weight:var(--weight-strong);text-decoration: none;} a:hover {color: var(--color-ink-strong);text-decoration: underline;} p {padding: var(--ken) 0px var(--ken) 0px;} ul {padding: calc(var(--ken) * 2) 0px calc(var(--ken) * 2) calc(var(--ken) * 4);} ul li {padding: calc(var(--ken) / 2) 0px calc(var(--ken) / 2) 0px;} ol {padding: calc(var(--ken) * 2) 0px calc(var(--ken) * 2) calc(var(--ken) * 4);} ol li {padding: calc(var(--ken) / 2) 0px calc(var(--ken) / 2) 0px;} sup, sub {position: relative;top: -0.4em;vertical-align: baseline;} sub { top: 0.4em; } /* ========================================================= 02. TYPOGRAPHY ========================================================= */ /****** Heading Tags ******/ h1, h2.title {padding: 0px 0px calc(var(--ken) / 2) 0px;line-height:var(--line-h1);font-size: var(--size-h1);color: var(--color-h1);} h1 a, h2.title a {color: var(--color-h1);} h1 a:hover, h2.title a:hover {color: var(--color-h1-hover);} h2 {padding: var(--h-pad-top) 0px calc(var(--ken) / 2) 0px;line-height:var(--line-h2);font-size: var(--size-h2);color: var(--color-h2);} h2 a {color: var(--color-h2);} h2 a:hover {color: var(--color-h2-hover);} h3 {padding: var(--h-pad-top) 0px calc(var(--ken) / 2) 0px;line-height:var(--line-h3);font-size: var(--size-h3);color: var(--color-h3);} h3 a {color: var(--color-h3);} h3 a:hover {color: var(--color-h3-hover);} h4 {padding: var(--h-pad-top) 0px calc(var(--ken) / 2) 0px;line-height:var(--line-h4);font-size: var(--size-h4);color: var(--color-h4);} h4 a {color: var(--color-h4);} h4 a:hover {color: var(--color-h4-hover);} h5 {padding: var(--h-pad-top) 0px calc(var(--ken) / 2) 0px;line-height:var(--line-h5);font-size: var(--size-h5);color: var(--color-h5);} h5 a {color: var(--color-h5);} h5 a:hover {color: var(--color-h5-hover);} h6 {padding: var(--h-pad-top) 0px calc(var(--ken) / 2) 0px;line-height:var(--line-h6);font-size: var(--size-h6);color: var(--color-h6);} h6 a {color: var(--color-h6);} h6 a:hover {color: var(--color-h6-hover);} h1,h2,h3,h4,h5,h6 {margin: 0;font-weight:var(--weight-strong);font-family: var(--font-display);} h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {font-weight:var(--weight-heavy);} h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {text-decoration: underline;} .hara h1,.hara h2,.hara h3,.hara h4,.hara h5,.hara h6 { clear: both; } /****** Blockquotes ******/ blockquote {margin: calc(var(--ken) * 4) 0;padding: calc(var(--ken) * 1.5) calc(var(--ken) * 2);border-left: var(--border-strong) solid var(--color-blockquote-edge);font-size: var(--size-blockquote);line-height: var(--line-blockquote);color: var(--color-blockquote);background: var(--color-blockquote-panel);} blockquote p {padding: 0;} blockquote p + p {margin-top: calc(var(--ken) * 1.5);} /****** Lead-In Paragraph ******/ .spotlight {font-size: var(--size-spotlight);line-height: var(--line-spotlight);} .initial-cap::first-letter {float: left;font-size: 50px;line-height: 1px;padding-right: 5px;font-weight: var(--weight-strong);} .initial-cap.drop::first-letter {margin-top: 8px;} .spotlight.initial-cap.drop::first-letter {margin-top:10px;} .initial-cap.raise {margin-top: 20px;} .initial-cap.raise::first-letter {margin-top: -13px;} .spotlight.initial-cap.raise::first-letter {margin-top: -11px;} /****** eyebrow ******/ :root { --size-eyebrow: 13px; --line-eyebrow: 16px; --color-eyebrow: #8B6914; --color-panel-eyebrow: #8B6914; --letter-spacing-eyebrow: .8px; } .eyebrow { text-transform: uppercase;padding: 0 0 var(--ken) 0;line-height:var(--line-eyebrow);font-size: var(--size-eyebrow);color:var(--color-eyebrow);letter-spacing:var(--letter-spacing-eyebrow);display:block; } /* ========================================================= 03. MAIN ARCHITECTURE (KATA/KUMI) ========================================================= */ /* ================================ 03.1 Kata (structural primitives) ================================ */ /********* Main Kata *********/ .face {position:relative; --width-spine: 1600px; } .spine {max-width:var(--width-spine);margin:0 auto;padding:0 var(--site-gutter);position:relative;z-index:var(--z-cho);} .pocket {padding:calc(var(--ken) * 8) 0;} .core {} /*** Core Structures ***/ .core.setsu-naka {margin: 0 auto;} .core.setsu-migi {margin: 0 0 0 auto;} .core.setsu-hidari {margin: 0 auto 0 0;} .core.setsu-moto {max-width: var(--width-moto);} .core.setsu-sho {max-width: var(--width-sho);} .core.setsu-chu {max-width: var(--width-chu);} .core.setsu-dai {max-width: var(--width-dai);} .core.setsu-cho {max-width: var(--width-cho);} /* ================================ 03.2 Kumi (layout assemblies) ================================ */ /********************* Main Kumi *********************/ .main { --size-h1: 36px; --line-h1: 40px; --size-h2: 32px; --line-h2: 36px; --h-pad-top: calc(var(--ken) * 2); --width-do: 1600px; --width-do-hasami: 1200px; --width-hara: 65%; --width-tsubasa: 30%; --gap-tsubasa: 5%; } .do {max-width: var(--width-do);margin: 0 auto;padding: 0 var(--site-gutter);display: flex;flex-wrap: wrap;position: relative; z-index:var(--z-dai);} .hara {width: var(--width-hara);padding: 0px 0px calc(var(--ken) * 4) 0px;} .tsubasa {width: var(--width-tsubasa);padding: 0px 0px calc(var(--ken) * 4) 0px;margin: 0px 0px 0px var(--gap-tsubasa);} .do.saku .hara {width:100%;} .do.saku.hasami { max-width: var(--width-do-hasami); } .do.saku .tsubasa {display: none;} /* dark color variations */ .dark { color:var(--color-ink); --color-ink: #e5e5e5; --color-ink-strong: #fff; --color-ink-soft: #ededed; --color-ink-muted: #dadada; --color-ink-faint: #cccccc; --color-ink-light: #a9a9a9; --color-ink-lighter: #757575; --color-h1: #ffffff; --color-h1-hover: #ededed; --color-h2: #ffffff; --color-h2-hover: #ededed; --color-h3: #ffffff; --color-h3-hover: #ededed; --color-h4: #ffffff; --color-h4-hover: #ededed; --color-h5: #ffffff; --color-h5-hover: #ededed; --color-h6: #ffffff; --color-h6-hover: #ededed; --color-blockquote: #282828; --color-blockquote-edge: #232323; --color-blockquote-panel: #efefef; --color-breadcrumb: #ffffff; --color-breadcrumb-hover: #ededed; --color-breadcrumb-current: #757575; --color-line: #dadada; --color-line-soft: #495975; --color-line-strong: #ffffff; --color-inverse: #ffffff; --color-danger: #ea0000; --color-shadow-soft: rgba(255,255,255,.04); --color-shadow-mid: rgba(255,255,255,.10); --color-shadow-focus: rgba(255,255,255,.25); --color-focus: #666666; --color-focus-light: #323232; --color-eyebrow: #C9981D; --color-panel-eyebrow: #C9981D; } /********************* Hero Kumi (Tokonoma) *********************/ /********* Tokonoma Cho *********/ #tokonoma { --tokonoma-panel: #000; --tokonoma-width-spine: 1240px; --banner-h: 80px; --size-p: 18px; --line-p: 22px; --color-tagline: #fff; --panel-tagline: rgba(139, 105, 20, 0.2); --border-tagline: #8B6914; --size-tagline: 14px; --line-tagline: 18px; --letter-spacing-tagline: .8px; --size-detail: 14px; --line-detail: 22px; --size-detail-strong: 22px; --size-attorney: 13px; --line-attorney: 18px; --size-attorney-title: 24px; --line-attorney-title: 28px; } #tokonoma.face {padding-top: var(--banner-h);background: var(--tokonoma-panel);} #tokonoma .spine {max-width: var(--tokonoma-width-spine);} /********* Tokonoma Moto *********/ #tokonoma.moto.face {} #tokonoma.moto .spine {} #tokonoma.moto .pocket {padding: 20px 0px calc(var(--ken) * 4) 0px;} /********* Hero Kumi Shared *********/ #tokonoma .core {} .tokonoma-kasane {background: linear-gradient(90deg,rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.6) 100%);} #tokonoma h1 {padding: 0 0px calc(var(--ken) * 2) 0px;min-height:calc(var(--line-h1) * 3);display: flex;flex-direction: column;justify-content: flex-end; } #tokonoma p {padding: var(--ken) 0px var(--ken) 0px;line-height:var(--line-p);font-size: var(--size-p);max-width: var(--width-sho);} #tokonoma p.tagline {padding: 0 0 calc(var(--ken) * 4) 0;font-size: var(--size-tagline);line-height:var(--line-tagline);color: var(--color-tagline);max-width:none;min-height:0;font-weight:var(--weight-body);letter-spacing:var(--letter-spacing-tagline);font-family: var(--font-display);} #tokonoma p.tagline span {padding: calc(var(--ken) / 2) calc(var(--ken) * 1.5) calc(var(--ken) / 2) calc(var(--ken) * 1.5);background: var(--panel-tagline);border: var(--border-thin) solid var(--border-tagline);display:inline-block;} #tokonoma p a, #tokonoma p a:hover{color: var(--color-ink);font-weight:var(--weight-body);} .punctuate {padding:calc(var(--ken) * 2) 0px calc(var(--ken) * 3) 0px;} .firm-detail {padding:var(--ken) calc(var(--ken) * 2);margin-right: var(--ken);max-width: calc(33.33% - 4px - calc(var(--ken) * 2));color:#dedede;font-size: var(--size-detail);line-height: var(--line-detail);border: var(--border-thin) solid #4E4B4A;background: rgba(255,255,255,.07);display:inline-block;backdrop-filter: blur(5px);} .firm-detail strong {color:#8B6914;font-size: var(--size-detail-strong);font-weight: var(--weight-heavy);font-family:var(--font-display);} .featured-attorney {padding: 12px;max-width:424px;margin:0 0 0 auto;position:relative;} .featured-attorney::before {content: "";position: absolute;top: 0;left: 0;width: 76px;aspect-ratio:1/1;border-top: 4px solid #8B6914;border-left: 4px solid #8B6914;} .attorney-panel {padding: 12px;background:#ffffff;} .attorney-bio {padding: 12px;background:#0A1F44;border-left: 4px solid #8B6914;} #tokonoma p.attorney-name {padding: 12px 0px 2px 0px;line-height:var(--line-attorney-title);font-size: var(--size-attorney-title);font-weight:var(--weight-strong);max-width: none;font-family: var(--font-display);} #tokonoma p.attorney-detail {padding: 2px 0px 12px 0px;color: #BB8E1B;line-height:var(--line-attorney);font-size: var(--size-attorney);max-width: none;} @media only screen and (min-width : 960px) and (max-width : 1279px) { #tokonoma { --size-h1: 4.37vw; --line-h1: 4.69vw; --banner-h: 6.25vw; --size-p: 1.40vw; --line-p: 1.71vw; --size-tagline: 1.09vw; --line-tagline: 1.40vw; --ken: .78vw; --letter-spacing-tagline: .062vw; --size-detail: 1.09vw; --line-detail: 1.71vw; --size-detail-strong: 1.71vw; } } /********************* Navigation Kumi *********************/ /****** Top Banner *******/ #top-banner { --banner-panel: #0A1F44; --menu-icon-width: 30px; --menu-icon-height: 25px; --nav-gap: 20px; --nav-link-line: 68px; --color-nav: #ffffff; --color-nav-hover: #BB8E1B; --size-nav: 18px; --size-nav-drop: 15px; --dropdown-panel: #ffffff; --dropdown-mid-panel: #fcfcfc; --dropdown-border: #0A1F44; --color-dropdown: #3c3c3b; --color-dropdown-hover: #969696; --dropdown-w: 240px; --dropdown-thin-w: 180px; --dropdown-xwide-w: 300px; --dropdown-dwide-w: 460px; --dropdown-dwide-item-w: 200px; --dropdown-xwide-dwide-w: 580px; --dropdown-xwide-dwide-item-w: 260px; --dropdown-row-h: 44px; } @media only screen and (min-width : 960px) and (max-width : 1559px) { #top-banner{--banner-h: 5.12vw;} } #top-banner {width: 100%;position: absolute;top: 0;left: 0;z-index: var(--z-banner);min-width: 320px;background:var(--banner-panel);font-family: var(--font-display);border-bottom:1px solid #242D3A;} #top-banner-panel {max-width: 1920px;margin: 0 auto;padding: 0 var(--site-gutter);display: flex;align-items: center;gap: var(--nav-gap);min-height: var(--banner-h);} a.home {height: 40px;font-size: 12px;line-height:20px;color:#dedede;font-weight:var(--weight-strong);display: flex;align-items: center;gap: 10px;text-decoration: none;} a.home .simple-icon {flex: 0 0 40px;width: 40px;font-size:24px;line-height:40px;color:#fff;text-align:center;font-weight:var(--weight-heavy);background:#8B6914;font-family:var(--font-display);} a.home .legal-firm {padding-top:2px;display: block;} a.home strong {color:#181818;font-size: 22px;font-weight:var(--weight-heavy);font-family:var(--font-display);color:#fff;display: inline-block;} a.home .firm-type {letter-spacing:.8px;display: inline-block;} a.call {display: inline-block;color: #fff;font-size: 22px;line-height: 24px;font-weight: var(--weight-medium);text-decoration: none;margin-left: auto;white-space: nowrap;text-align:center;} a.call .text {font-size: 14px;color: #BB8E1B;font-weight: var(--weight-medium);letter-spacing:.8px;} a.call:hover {color: #fff;text-decoration: none;} a.call:hover .text {color: #fff;} a#menu-icon {width: var(--menu-icon-width);color: #fff;height: var(--menu-icon-height);display: block;white-space: nowrap;text-decoration: none;overflow:hidden;} a#menu-icon .bar {background:#fff;height:5px;margin-bottom:5px;border-radius: 2px;} /****** Navigation Menu *******/ ul#main-nav {margin: 0;padding: 0;list-style: none;display: flex;justify-content: center;align-items: center;flex: 1 1 auto;} ul#main-nav li {position: relative;display: inline-block;margin: 0;padding: 0;font-size: var(--size-nav);color: var(--color-nav);} ul#main-nav li > a {display: inline-block;padding: 0 calc(var(--ken) * 2);line-height: var(--nav-link-line);color: var(--color-nav);text-decoration: none;font-weight: var(--weight-medium);} ul#main-nav li:hover > a {color: var(--color-nav-hover);} ul#main-nav a:focus-visible {color: var(--color-nav-hover);outline: var(--focus-ring-width) solid var(--color-focus);outline-offset: var(--focus-ring-offset);text-decoration: underline;} /*** Second-Level Dropdown ***/ ul#main-nav li ul {position: absolute;top: 100%;left: 0;display: none;width: var(--dropdown-w);padding: 10px 10px 10px 10px;margin: 0;list-style: none;background: var(--dropdown-panel);z-index: var(--z-dropdown);border-bottom: 5px solid var(--dropdown-border);box-shadow:0px 0px 2px 1px var(--color-shadow-soft);} /*** Dropdown items ***/ ul#main-nav li ul li {display: flex;align-items: center;height: var(--dropdown-row-h);box-sizing: border-box;padding: 0;margin: 0px 10px 0px 10px;border-bottom: var(--border-thin) solid var(--color-line-soft);text-transform: none;} ul#main-nav li ul li:last-child { border-bottom: none; } ul#main-nav li ul li a {display: block;width: 100%;padding: 0;line-height: 18px;font-size: var(--size-nav-drop);font-weight: var(--weight-body);color: var(--color-dropdown);text-decoration: none;} ul#main-nav li ul li:hover > a {color: var(--color-dropdown-hover)} /*** Third-Level Dropdown ***/ ul#main-nav li ul li ul {position: absolute;top: 0;left: 100%;display: none;margin: 0;margin-top:-10px;padding: 10px;width: var(--dropdown-w);background: var(--dropdown-mid-panel);} /*** Fourth-Level Dropdown ***/ ul#main-nav li ul li ul li ul {position: absolute;top: 0;left: 100%;display: none;padding: 10px;width: var(--dropdown-w);background: var(--dropdown-panel);} /*** Display Dropdown ***/ ul#main-nav li:hover > ul,ul#main-nav li:focus-within > ul {display: block;} ul#main-nav li ul li:hover > ul,ul#main-nav li ul li:focus-within > ul {display: block;} ul#main-nav li ul li ul li:hover > ul,ul#main-nav li ul li ul li:focus-within > ul {display: block;} /*** Custom Widths ***/ ul#main-nav li ul.thin {width: var(--dropdown-thin-w);} ul#main-nav li ul.xwide {width: var(--dropdown-xwide-w);} ul#main-nav li ul.dwide {width: var(--dropdown-dwide-w);} ul#main-nav li ul.dwide li {width: var(--dropdown-dwide-item-w);float: left;} ul#main-nav li ul.xwide.dwide {width: var(--dropdown-xwide-dwide-w);} ul#main-nav li ul.xwide.dwide li {width: var(--dropdown-xwide-dwide-item-w);} /*** Sticky Navigation ***/ #top-banner.fixed {position: fixed;top: -200px;} #top-banner.fixed-show {top: 0;transition:.25s;} @media only screen and (min-width : 960px) and (max-width : 1559px) { a.home {height: 2.56vw;font-size: 0.76vw;line-height:1.28vw;gap: 0.64vw;} a.home .simple-icon {flex: 0 0 2.56vw;width: 2.56vw;font-size:1.53vw;line-height:2.56vw;} a.home strong {font-size: 1.41vw;} a.home .firm-type {letter-spacing:.051vw;} a.call {font-size: 1.41vw;line-height: 1.53vw;} a.call .text {font-size: 0.89vw;letter-spacing:.0051vw;} } @media only screen and (min-width : 960px) and (max-width : 1299px) { ul#main-nav li {--size-nav: 16px;} ul#main-nav li > a {padding: 0 var(--ken);} } /********************* Awards Memberships Kumi *********************/ #awards-memberships {border-top: 1px solid var(--color-line-soft);border-bottom: 1px solid var(--color-line-soft);} #awards-memberships .pocket {padding:calc(var(--ken) * 4) 0;} .badges {} .badge {height:100px;margin:0 auto;background: url("../images/awards-sprite-100.png") no-repeat left top;background-size: 1088px auto;max-width:100%;} .badge#premier-trial {width: 87px;background-position: 0px top;} .badge#legal-excellence {width: 87px;background-position: -377px top;} .badge#litigation-leadership {width: 118px;background-position: -846px top;} .badge#client-choice {width: 87px;background-position: -280px top;} .badge#national-legal-forum {width: 86px;background-position: -93px top;} .badge#professional-counsel {width: 117px;background-position: -720px top;} @media only screen and (min-width : 640px) and (max-width : 1139px) { #awards-memberships {--ken: .87vw;} .badge {height:8.77vw;background-size: 95.43vw auto;} .badge#premier-trial {width: 7.63vw;} .badge#legal-excellence {width: 7.63vw;background-position: -33.07vw top;} .badge#litigation-leadership {width: 10.35vw;background-position: -74.21vw top;} .badge#client-choice {width: 7.63vw;background-position: -24.56vw top;} .badge#national-legal-forum {width: 7.54vw;background-position: -8.15vw top;} .badge#professional-counsel {width: 10.26vw;background-position: -63.15vw top;} } /********************* Practice Areas Kumi *********************/ #practice-areas { background:var(--color-page-soft); --practice-areas-width-spine: 1240px; --color-text: #585756; --size-title: 26px; --line-title: 32px; --color-title: #fff; --color-highlight: #BB8E1B; --size-panel: 16px; --line-panel: 25px; --height-panel: 300px; } #practice-areas .spine {max-width: var(--practice-areas-width-spine);} .practice-area-text {text-align:center;padding-bottom:calc(var(--ken) * 4);color:var(--color-text);} a.practice-area {height:var(--height-panel);line-height:var(--line-panel);font-size: var(--size-panel);font-weight:var(--weight-body);position:relative;overflow: hidden;display:flex;flex-direction: column;justify-content: flex-end;background:var(--color-panel-dark);} a.practice-area:hover {text-decoration:none;} .practice-area-art {transform: scale(1);transform-origin: center center;transition: transform .35s ease;} a.practice-area:hover .practice-area-art {transform: scale(1.06);} .practice-area-kasane {background: linear-gradient(180deg,rgba(10, 31, 68, 0.3) 0%, rgba(10, 31, 68, 0.8) 50%, rgba(10, 31, 68, 1) 100%);opacity:.8;transition: opacity .35s ease;} a.practice-area:hover .practice-area-kasane {opacity:.9;} .practice-area-panel-text {padding: var(--ken) 0 calc(var(--ken) * 3) 0;margin: 0 calc(var(--ken) * 2);position:relative;} .practice-area-panel-text::before {content: "";position: absolute;top: 0;left: 0;width: calc(var(--ken) * 4);height: 1px;border-top: 1px solid var(--color-highlight);transition: width .25s ease;} a.practice-area:hover .practice-area-panel-text::before {width: calc(var(--ken) * 8);} a.practice-area span {display:block;} a.practice-area span.title {line-height:var(--line-title);font-size: var(--size-title);font-weight:var(--weight-heavy);color:var(--color-title);font-family: var(--font-display);transition: color .25s ease;} a.practice-area:hover span.title {color:var(--color-highlight);} a.practice-area span.text {padding: var(--ken) 0;} .wide a.practice-area span.text {max-width: var(--width-sho);} a.practice-area span.read-more {font-weight:var(--weight-medium);opacity:.85;position:relative;} a.practice-area span.read-more span {display: inline-flex;align-items: center;gap: 10px;} a.practice-area span.read-more span::after {content: "→";color:var(--color-highlight);line-height: 1;transform: translate(-5px, -2px);transition: transform .25s ease;display: inline-block;} a.practice-area:hover span.read-more span::after {transform: translate(0px, -2px);} @media only screen and (min-width : 960px) and (max-width : 1179px) { #practice-areas { --size-title: 22px; --line-title: 36px; --size-panel: 14px; --line-panel: 22px; --height-panel: 250px; } } /********************* Mobile Tsubasa Kumi *********************/ #viewport {position: relative;width: 100%;overflow-x: hidden;} body.menu-open #viewport {position: fixed;width: 100%;} #side-menu {position: fixed;top: 0;left: 0px;width: var(--width-mobile-menu);height: 100%;font-size: var(--size-nav-drop);background: var(--color-panel-dark);z-index: var(--z-menu);overflow: hidden;box-shadow: inset -10px 0 5px -5px var(--color-shadow-mid);padding-top: 5px;transform:translateX(-100%);transition:transform .25s ease;} body.menu-open #side-menu {transform:translateX(0);} #side-menu-viewport {width: auto;height: 100vh;max-height: 100vh;overflow-y: auto;overflow-x:hidden;padding-right: 20px;} #side-menu-overlay {position: fixed;inset: 0;z-index: var(--z-overlay);background-color: rgba(0,0,0,.42);opacity: 0;pointer-events: none;transition: opacity .25s ease;} body.menu-open #side-menu-overlay {opacity: 1;pointer-events: auto;} img.logo-mobile {display: block;max-width: var(--width-mobile-menu-inner);margin: 10px 0 0 var(--site-gutter);} #side-menu ul {list-style: none;padding: 10px 0 20px var(--site-gutter);width: var(--width-mobile-menu-inner);} #side-menu li {border-bottom: var(--border-thin) solid #fff;} #side-menu li.no-border {border: none;} #side-menu a {display: block;padding: 10px 0;line-height: 18px;color: #fff;text-decoration: none;} #side-menu a:hover,#side-menu a:focus {color: #fff;} #side-menu ul ul {display: none;padding: 0px 20px 10px 10px;font-size: 14px;} #side-menu li.open > ul {display:block;} #side-menu ul ul li {border: none;} #side-menu ul ul a {padding: 5px 0;line-height: 18px;} #side-menu li > a span {padding-right: 15px;background: url("../images/arrow-menu-drop.png") no-repeat right center;} #side-menu #close-menu {position: absolute;top: 6px;right: 8px;width: 20px;height: 20px;display: block;border-radius: 10px;color:#000000;background: #dedede url("../images/close.png") no-repeat center center;} #side-menu .search {margin: 15px 0 10px 0;width: 100%;} #side-menu .home {margin:20px 0 0 20px;height: 30px;font-size: 10px;line-height:15px;color:#dedede;font-weight:var(--weight-strong);display: flex;align-items: center;gap: 10px;text-decoration: none;} #side-menu .home .simple-icon {flex: 0 0 27px;width: 27px;font-size:16px;line-height:27px;color:#fff;text-align:center;font-weight:var(--weight-heavy);background:#8B6914;font-family:var(--font-display);} #side-menu .home .legal-firm {padding-top:2px;display: block;} #side-menu .home strong {color:#181818;font-size: 16px;font-weight:var(--weight-heavy);font-family:var(--font-display);color:#fff;display: inline-block;} #side-menu .home .firm-type {letter-spacing:.8px;display: inline-block;} /* ========================================================= 04. LAYOUT ========================================================= */ /****** Base Columns ******/ .col-wrap {--col-gap: 4.16%;display: flex;flex-wrap: wrap;gap: var(--col-gap);align-items: stretch;} .col-wrap.none { --col-gap: 0; } .col-wrap.tight { --col-gap: 2.08%; } .col-wrap.loose { --col-gap: 6.24%; } .col-wrap.slack { --col-gap: 8.32%; } .col-wrap.vatop {align-items: flex-start;} .col-wrap.vamid {align-items:center;} .col-wrap.vabot {align-items:flex-end;} .col-wrap > * {min-width:0;} .col-auto {flex:1 1 0;} .col-1-2 {flex:0 0 calc((100% - var(--col-gap)) * 1/2);} .col-1-3 {flex:0 0 calc((100% - var(--col-gap)*2) * 1/3);} .col-2-3 {flex:0 0 calc(((100% - var(--col-gap)*2) / 3) * 2 + var(--col-gap));} .col-1-4 {flex:0 0 calc((100% - var(--col-gap)*3) * 1/4);} .col-3-4 {flex:0 0 calc(((100% - var(--col-gap)*3) / 4) * 3 + var(--col-gap)*2);} .col-1-5 {flex:0 0 calc((100% - var(--col-gap)*4) * 1/5);} .col-2-5 {flex:0 0 calc(((100% - var(--col-gap)*4) / 5) * 2 + var(--col-gap));} .col-3-5 {flex:0 0 calc(((100% - var(--col-gap)*4) / 5) * 3 + var(--col-gap)*2);} .col-1-6 {flex:0 0 calc((100% - var(--col-gap)*5) * 1/6);} /****** Grid ******/ .gallery-grid {display:grid;gap: var(--grid-gap);grid-auto-rows: max-content;align-items: stretch;} .gallery-grid.none { gap: 0; } .gallery-grid.tight { gap: calc(var(--grid-gap) / 2); } .gallery-grid.loose { gap: calc(var(--grid-gap) * 1.5); } .gallery-grid.slack { gap: calc(var(--grid-gap) * 2); } .gallery-grid.dense { grid-auto-flow:dense; } .cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); } .cols-5{ grid-template-columns:repeat(5,1fr); } .gallery-grid-element {align-self: stretch;height: 100%;} .gallery-grid-element.vamid {align-self: center;} .gallery-grid-element.vabot {align-self:end;} .gallery-grid.auto {grid-template-columns:repeat(auto-fit,minmax(220px,1fr));} .gallery-grid.auto.grand {grid-template-columns:repeat(auto-fit,minmax(320px,1fr));} .gallery-grid .wide {grid-column:span 2;} .gallery-grid .tall {grid-row:span 2;} .gallery-grid .feature {grid-column:span 2;grid-row:span 2;} /****** Freeform Flex ******/ .flex {display: flex;gap: 0px;align-items: flex-start;} .flex.vamid { align-items: center;} .flex.vabot { align-items: flex-end;} .flex.gap {gap: 10px;} .wrapped {flex-wrap: wrap;} .centered {justify-content: center;} .reversed {flex-direction: row-reverse;} /* ========================================================= 05. MEDIA ========================================================= */ /****** Image ******/ picture {width: fit-content;display:block;} picture.left img, picture.right img {width:100%;} img {display: block; max-width: 100%;border: none;height: auto;vertical-align: top;min-width:0;} img.left, picture.left {float: left;margin: calc(var(--ken) * 3) calc(var(--ken) * 4) calc(var(--ken) * 4) 0px;max-width: 50%;} img.right, picture.right {float: right;margin: calc(var(--ken) * 3) 0px calc(var(--ken) * 4) calc(var(--ken) * 4);max-width: 50%;} img.center, picture.center {margin: calc(var(--ken) * 4) auto;} img.block, picture.block {margin: calc(var(--ken) * 4) 0px;} img.inline, picture.inline {margin: 0px calc(var(--ken) * 2) calc(var(--ken) * 2) calc(var(--ken) * 2);width:auto;display: inline-block;vertical-align:top;} img.inline.vamid, picture.inline.vamid { vertical-align: middle; } img.inline.vabot, picture.inline.vabot { vertical-align: bottom; } img.max, picture.max img {width:100%;} /****** Image,Video,Iframe with Captions/Cutlines ******/ /*** shared ***/ figure {padding:0;} a.figure {display:block; text-decoration:none;color:var(--color-ink-lighter);font-weight:var(--weight-body);} a.figure:hover {text-decoration:none;color:var(--color-ink-muted);} figure .img {width:100%;overflow:hidden;position:relative;border-radius:10px;} figure .img.square {aspect-ratio:1/1;} figure .img.squat {aspect-ratio:3/1;} figure .img.tall {aspect-ratio:2/3;} figure .img.aspect {aspect-ratio:16/9;} figure img {width:100%;position:relative;z-index:50;} figure .img img {width:100%;height:100%;object-fit:cover;} figcaption {padding:var(--ken) 0 0 0;font-size:var(--size-caption);line-height:var(--line-caption);color:var(--color-ink-muted);} figcaption strong.title {display:inline-block;padding:0 0 var(--ken) 0;font-size:var(--size-caption-title);line-height:var(--line-caption-title);color:var(--color-caption-title);font-weight:var(--weight-strong);font-family: var(--font-display);} figcaption span.detail {display:inline-block;padding:0;font-size:var(--size-caption-detail);line-height:var(--line-caption-detail);color:var(--color-ink-lighter);font-weight:var(--weight-body);} figcaption span.all {display:inline-block;padding-top:var(--ken);font-size:var(--size-caption-detail);line-height:var(--line-caption-detail);color:var(--color-caption-all);font-weight:var(--weight-medium);} figcaption span.all span {display: inline-flex;align-items: center;gap: 10px;} figcaption span.all span::after {content: "→";color:var(--color-caption-all);line-height: 1;transform: translateX(-5px);transition: transform .25s ease;display: inline-block;} a.figure:hover figcaption span.all span::after {transform: translateX(0px);} figure .img span.show-video {position: absolute;inset: 0;z-index: 100;background: url("../images/video-play.png") no-repeat center center;background-size: auto 100px;opacity: 0.5;pointer-events: none;transition: opacity 0.2s ease-in-out;} figure .img:hover span.show-video {opacity: 0.7;} /*** left/right ***/ figure.left {float: left;margin: calc(var(--ken) * 3) calc(var(--ken) * 4) calc(var(--ken) * 4) 0;max-width: 50%;} figure.right {float: right;margin: calc(var(--ken) * 3) 0 calc(var(--ken) * 4) calc(var(--ken) * 4);max-width: 50%;} figure.right.edge-adjust {width:45.88%;margin: calc(var(--ken) * 4) -53.84% 0px 0px;max-width: none;} /*** content width ***/ figure.full {width:100%;margin:calc(var(--ken) * 4) 0;} figure.full.edge-adjust {float:right;margin:calc(var(--ken) * 4) -53.84% calc(var(--ken) * 4) calc(var(--ken) * 4);} figure.full.max {width: 153.84%;} /*** side by side ***/ figure.sbs {padding:calc(var(--ken) * 2) 0;margin:calc(var(--ken) * 4) auto;font-weight:var(--weight-strong);display:flex;flex-direction:row-reverse;align-items:center;gap:10%;} figure.sbs.image-left {flex-direction:row;} .sbs-img {flex:0 0 45%;} .sbs-img img {display:block;width:100%;height:auto;} figcaption.sbs-text {flex:1;text-align:right;font-size:var(--size-caption-title);line-height:var(--line-caption-title);padding: 0px;} figure.sbs.image-left figcaption.sbs-text {text-align:left;} /*** media ***/ figure.frame {margin:calc(var(--ken) * 4) 0;} .media{width:100%;position:relative;overflow:hidden;} .media.square {aspect-ratio:1/1;} .media.squat {aspect-ratio:3/1;} .media.tall {aspect-ratio:2/3;} .media.aspect {aspect-ratio:16/9;} .media.map {aspect-ratio:7/3;} .media iframe,.media video{width:100%;height:100%;border:0;} /****** Image/Play ******/ a.video {position: relative;display: block;margin: calc(var(--ken) * 4) auto;} a.video img {display: block;width: 100%;height: auto;margin: 0 auto;position: relative;z-index: 1;} a.video span {position: absolute;inset: 0;z-index: 2;background: url("../images/video-play.png") no-repeat center center;background-size: auto 100px;opacity: 0.5;pointer-events: none;transition: opacity 0.2s ease-in-out;} a.video:hover span {opacity: 0.7;} /* ========================================================= 06. COMPONENTS ========================================================= */ /********* Search *********/ .search {width: 100%;background: var(--color-page);border-radius: 19px;} .search form {display: flex;flex-wrap: wrap;height: 40px;padding: 0 8px;box-sizing: border-box;} .search input {width: calc(100% - 50px);height: 100%;border: none;background: none;font-size: 16px;padding-left: 10px;outline: none;} .search input[type=submit] {width: 40px;height: 40px;border: none;background: url("../images/magnify-glass.png") no-repeat center center;color:#000000;background-size: 20px 20px;padding:0;margin:0;cursor: pointer;text-indent:-999999px;} .search input[type=submit]:hover {opacity: .85;background: url("../images/magnify-glass.png") no-repeat center center;background-size: 20px 20px;} /****** Breadcrumbs ******/ .breadcrumbs {margin: calc(var(--ken) * 2) 0 calc(var(--ken) * 4) 0;font-size: var(--size-breadcrumb);line-height: var(--line-breadcrumb);color: var(--color-breadcrumb);} .breadcrumbs ol {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0px;margin: 0;padding: 0;list-style: none;} .breadcrumbs li {display: inline-flex;align-items: center;padding: 0;} .breadcrumbs a {color: var(--color-breadcrumb);text-decoration: none;font-weight: var(--weight-body);} .breadcrumbs li:not(:last-child)::after {content: "›";margin: 0 var(--ken) 0px var(--ken);} .breadcrumbs a:hover,.breadcrumbs a:focus-visible {color: var(--color-breadcrumb-hover);text-decoration: underline;} .breadcrumbs [aria-current="page"] {color: var(--color-breadcrumb-current);text-decoration: none;cursor: default;} /****** Jump ******/ .jump {margin: calc(var(--ken) * 2) 0;text-align: right;font-size: 14px;line-height: 26px;} .jump a {display: inline-flex;align-items: center;gap: calc(var(--ken) / 2);padding-left:calc(var(--ken) * 2);color: var(--color-ink-strong);text-decoration: none;font-weight: var(--weight-medium);border-top: var(--border-base) solid var(--color-line);} .jump a::after {content: "▴";font-size: 24px;width:15px;line-height: 1;transform: translateY(-1px);transition: transform .25s ease;} .jump a:hover::after {transform: translateY(-4px);} /****** Styled Lists ******/ /*** Unordered bullet ***/ ul.bullet {padding: 0;margin: 0;list-style: none;} ul.bullet li {position: relative;padding: var(--ken) 0px var(--ken) calc(var(--ken) * 2);} ul.bullet li::before {content: "";position: absolute;width: var(--ken);height: var(--ken);background: var(--color-panel-dark);left: 0;top: calc(var(--ken) * 2.3);} /*** Unordered checkmark ***/ ul.checkmark {padding: 0;margin: 0;list-style: none;} ul.checkmark li {position: relative;padding: var(--ken) 0px var(--ken) calc(var(--ken) * 2);} ul.checkmark li::before {content: "✓";position: absolute;color:#8B6914;font-size:14px;left: 0;top: var(--ken);} /*** Ordered ***/ ol.bold {padding: 0;margin: 0;list-style: none;counter-reset: item;} ol.bold li {position: relative;padding: var(--ken) 0px var(--ken) calc(var(--ken) * 4);counter-increment: item;} ol.bold li::before {content: counter(item);position: absolute;left: 0;top: calc(var(--ken) * 1.5);width: calc((var(--ken) * 2) + 5px);height: calc((var(--ken) * 2) + 5px);background: var(--color-panel-dark);color: var(--color-inverse);text-align: center;line-height:calc((var(--ken) * 2) + 5px);font-size:var(--size-caption-detail);} /****** Button ******/ .button {color:var(--color-button);font-size:var(--size-button);line-height:var(--line-button);padding:var(--padding-button-top) var(--padding-button-side) var(--padding-button-bottom) var(--padding-button-side);background:var(--color-button-panel);text-decoration:none;font-weight:600;display:inline-block;border:var(--border-base) solid var(--color-button-border);cursor:pointer;transition:background .2s, color .2s, border-color .2s;position:relative;} .button.thin { padding-left: calc(var(--padding-button-side) / 2);padding-right: calc(var(--padding-button-side) / 2); } .button.wide { padding-left: calc(var(--padding-button-side) * 1.5);padding-right: calc(var(--padding-button-side) * 1.5); } .button:hover,.button:focus {color:var(--color-button-hover);background:var(--color-button-panel-hover);border:var(--border-base) solid var(--color-button-border-hover);text-decoration:none;} .button:focus-visible {outline:var(--focus-ring-width) solid var(--color-focus);outline-offset:var(--focus-ring-offset);} .button span {display: inline-flex;align-items: center;gap: 10px;} .button span::after {content: "→";margin-bottom: 2px;font-size: 16px;line-height: 1;transform: translateX(-5px);transition: transform .25s ease;display: inline-block;} .button:hover span::after {transform: translateX(0px);} .button.alt {color:var(--color-button-alt);background:var(--color-button-alt-panel);border:var(--border-base) solid var(--color-button-alt-border);} .button.alt:hover,.button.alt:focus {color:var(--color-button-alt-hover);background:var(--color-button-alt-panel-hover);border:var(--border-base) solid var(--color-button-alt-border-hover);} /* ========================================================= 07. FORMS ========================================================= */ /****** Core Inputs ******/ legend {display: block;width:100%;} label {display: block;font-size: var(--size-form);font-weight: var(--weight-strong);padding-top: var(--ken);margin: 0;} input,textarea,select {width: 100%;color: var(--color-form);font-size: var(--size-form);font-weight: var(--weight-form);padding-left: var(--field-pad-x);border: var(--border-form) solid var(--color-line-form);background: var(--color-panel-form);border-radius: var(--radius-panel-form);font-family: var(--font-body);appearance: none;outline: none;box-sizing: border-box;} input { height: var(--field-h); } textarea {padding-top: var(--field-pad-y);height: var(--field-textarea-h);} select {height: calc(var(--field-h) - 4px);appearance: menulist;} input:focus,textarea:focus,select:focus {outline: var(--focus-ring-width) solid var(--color-focus-light);outline-offset: var(--focus-ring-offset);} ::placeholder { color: var(--color-form); opacity: 1; } input:focus::placeholder, textarea:focus::placeholder { opacity: .1; } /****** Form Components ******/ @media screen and (device-aspect-ratio: 2/3),screen and (device-aspect-ratio: 40/71),screen and (device-aspect-ratio: 375/667),screen and (device-aspect-ratio: 9/16) {input, textarea, select { font-size: 16px; }} select.sm, input.sm {width: 50px;} select.med, input.med {width: 150px;} select.lrg, input.lrg {width: 250px;} input[type="checkbox"],input[type="radio"] {appearance: none;-webkit-appearance: none;width: 1rem;height: 1rem;margin: 0 0.4rem 0 0;border: var(--border-form) solid var(--color-line-form);background: var(--color-panel-form);display: inline-grid;place-content: center;vertical-align: middle;cursor: pointer;transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;box-sizing: border-box;flex: 0 0 auto;} input[type="checkbox"] {border-radius: 0.2rem;background-repeat: no-repeat;background-position: center;background-size: 0.72rem 0.72rem;} input[type="radio"] {border-radius: 50%;} input[type="checkbox"]:checked {border-color: var(--color-form);background-color: var(--color-panel-form);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} input[type="radio"]:checked {border-color: var(--color-form);background-color: var(--color-panel-form);box-shadow: inset 0 0 0 0.24rem #fff, inset 0 0 0 0.5rem var(--color-form);} input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible {outline: none;box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-form) 25%, transparent);} input[type="checkbox"]:hover,input[type="radio"]:hover {border-color: var(--color-form);} input[type="checkbox"]:disabled,input[type="radio"]:disabled {opacity: 0.6;cursor: not-allowed;} .form-element {position: relative;} .anti-spam {padding: 0px 0px var(--ken) 0px;} .anti-spam label {padding-right: calc(var(--ken) / 2);} .form-privacy-text {padding:0 0 calc(var(--ken) * 2) 0;line-height: 22px;display: flex;align-items: flex-start;gap: .5em;margin: 0;} .form-privacy-text input[type="checkbox"] {flex: 0 0 auto;margin-top: calc(var(--ken) * 1.3);} .form-privacy-text label {flex: 1 1 auto;min-width: 0;} .alert {color:var(--color-danger);} .form-error {position: absolute;top: var(--ken);right: calc(var(--ken) / 2);z-index: 20;display: none;line-height: 12px;font-size: 12px;font-weight: var(--weight-strong);color: var(--color-danger);background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);pointer-events: none;} .form-error.active {display: block;} input.invalid,textarea.invalid,select.invalid,input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"] {border-color: var(--color-danger) !important;} fieldset.form-element input[aria-invalid="true"] + label,fieldset.form-element input.invalid + label {color: var(--color-danger);} .anti-spam .form-error {top: 2px;left:0;margin:0 auto;} .form-privacy .form-error {top: calc(var(--ken) * -1);left:0;right:0;margin:0 auto;} /****** Form Custom Elements ******/ #contact-form_a {position:relative;} input.forma {height: 40px;margin-bottom: var(--ken);background: #F5F0ED;border: var(--border-base) solid #2C2B29;border-radius: 5px;} textarea.forma {height: 200px;margin-bottom: var(--ken);background: #F5F0ED;border: var(--border-base) solid #2C2B29;border-radius: 5px;} select.forma {height: 36px;margin-bottom: var(--ken);background: #F5F0ED;border: var(--border-base) solid #2C2B29;border-radius: 5px;} label.labela {font-size: 16px;line-height:20px;} legend.legenda {padding-top: calc(var(--ken) * 2);font-size: 16px;line-height:20px;text-align:center;font-weight: var(--weight-strong);} /****** Form Ajax ******/ .form_process {display:none;position: absolute;inset: -20px;z-index: var(--z-overlay);background: rgba(0,0,0,.7) url("../images/processing.gif") no-repeat center center;background-size: 70px auto;border-radius: 8px;} .form_process#overlay_foot,.form_process#overlay_side,.form_process#overlay_page {display: none;} /* ========================================================= 08. UTILITIES ========================================================= */ /****** Text ******/ .italic {font-style: italic;} .underline {text-decoration: underline;} .uppercase {text-transform: uppercase;} .capitalize {text-transform: capitalize;} .text-indent {text-indent: calc(var(--ken) * 3);} /****** Display ******/ .display-block {display:block;} .display-inline {display:inline;} .display-inline-block {display:inline-block;} .display-none {display:none !important;} /****** Alignment******/ .awase {text-align: center;} .awase-left {text-align: left;} .awase-right {text-align: right;} /****** Spacing ******/ /* single element vertical spacing */ .ma-moto {padding-top: var(--ma-moto);padding-bottom: var(--ma-moto);} .ma-sho {padding-top: var(--ma-sho);padding-bottom: var(--ma-sho);} .ma-chu {padding-top: var(--ma-chu);padding-bottom: var(--ma-chu);} .ma-dai {padding-top: var(--ma-dai);padding-bottom: var(--ma-dai);} .ma-cho {padding-top: var(--ma-cho);padding-bottom: var(--ma-cho);} .ma-moto-sink {margin-top: var(--ma-moto);margin-bottom: var(--ma-moto);} .ma-sho-sink {margin-top: var(--ma-sho);margin-bottom: var(--ma-sho);} .ma-chu-sink {margin-top: var(--ma-chu);margin-bottom: var(--ma-chu);} .ma-dai-sink {margin-top: var(--ma-dai);margin-bottom: var(--ma-dai);} .ma-cho-sink {margin-top: var(--ma-cho);margin-bottom: var(--ma-cho);} /* grouped element rhythm */ .choshi-moto,.choshi-sho,.choshi-chu,.choshi-dai,.choshi-cho { display: flow-root; } .choshi-moto > * { padding-top: var(--ma-moto);padding-bottom: var(--ma-moto); } .choshi-sho > * { padding-top: var(--ma-sho);padding-bottom: var(--ma-sho); } .choshi-chu > * { padding-top: var(--ma-chu);padding-bottom: var(--ma-chu); } .choshi-dai > * { padding-top: var(--ma-dai);padding-bottom: var(--ma-dai); } .choshi-cho > * { padding-top: var(--ma-cho);padding-bottom: var(--ma-cho); } /* single-element horizontal spacing */ .hashi, p.hashi {padding-left: calc(var(--ken) * 4);padding-right: calc(var(--ken) * 4);} .hashi-wide, p.hashi-wide {padding-left: calc(var(--ken) * 8);padding-right: calc(var(--ken) * 8);} /****** Containment ******/ .kabe {contain:layout paint;} .kabe-size {contain:size;} .kabe-content {content-visibility:auto;} .nobasu {width: auto;overflow-x: auto;} /****** Container ******/ .kakoi-naka {margin: 0 auto;} .kakoi-migi {margin: 0 0 0 auto;} .kakoi-hidari {margin: 0 auto 0 0;} .kakoi-moto {max-width: var(--width-moto);} .kakoi-sho {max-width: var(--width-sho);} .kakoi-chu {max-width: var(--width-chu);} .kakoi-dai {max-width: var(--width-dai);} .kakoi-cho {max-width: var(--width-cho);} .kakoi-sink-migi {float: left;margin: calc(var(--ken) * 2) calc(var(--ken) * 4) calc(var(--ken) * 2) 0;max-width: 45%;} .kakoi-sink-hidari {float: right;margin: calc(var(--ken) * 2) 0 calc(var(--ken) * 2) calc(var(--ken) * 4);max-width: 45%;} /*** Content Bleed Container ***/ .kakoi-bleed {width: 100vw;max-width: none;margin-left: min(calc((100vw - var(--kakoi-bleed-width, var(--width-do))) / -2 - var(--site-gutter)), calc(-1 * var(--site-gutter)));} .do {--kakoi-bleed-width: var(--width-do);} .kakoi-naka.kakoi-moto {--kakoi-bleed-width: var(--width-moto);} .kakoi-naka.kakoi-sho {--kakoi-bleed-width: var(--width-sho);} .kakoi-naka.kakoi-chu {--kakoi-bleed-width: var(--width-chu);} .kakoi-naka.kakoi-dai {--kakoi-bleed-width: var(--width-dai);} .kakoi-naka.kakoi-cho {--kakoi-bleed-width: var(--width-cho);} .hasami {--kakoi-bleed-width: var(--width-do-hasami);} /****** Clearing ******/ .yaiba {clear: both;} .yaiba-left{clear: left;} .yaiba-right {clear: right;} /****** Accessibility ******/ .accessible {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;clip-path: inset(50%);border: 0;padding: 0;margin: -1px;} .break-word {overflow-wrap: break-word;} .no-wrap {white-space: nowrap;} .overflow-wrap {overflow-wrap:anywhere} .no-break {word-break: keep-all;} .skip-link {position: absolute;top: 0;left: 0;transform: translateY(-120%);padding: var(--ken) calc(var(--ken) * 2);background: #000;color: #fff;text-decoration: none;font-weight: var(--weight-strong);z-index: var(--z-max);transition: transform .2s ease;} .skip-link:hover {color: #eee;} .skip-link:focus,.skip-link:focus-visible {transform: translateY(0);outline: var(--focus-ring-width) solid var(--color-focus);outline-offset: var(--focus-ring-offset);} /****** Layer ******/ .kasane {position:relative;isolation: isolate;} .kasane-moto {z-index:var(--z-moto);} .kasane-sho {z-index:var(--z-sho);} .kasane-chu {z-index:var(--z-chu);} .kasane-dai {z-index:var(--z-dai);} .kasane-cho {z-index:var(--z-cho);} .kasane-base {position:absolute;z-index:0;width:100%;height:100%;top:0;left:0;pointer-events:none;} .kasane-veil {position:absolute;z-index:10;width:100%;height:100%;top:0;left:0;pointer-events:none;} .kasane-modal {position:absolute;z-index:100;} .kasane-background {box-decoration-break: clone;-webkit-box-decoration-break: clone;} /****** Image Background Layer ******/ .ji {width: 100%;height: 100%;position: absolute;inset: 0;pointer-events: none;z-index:var(--z-moto);} .ji.ji-sho {z-index:var(--z-sho);} .ji img {width: 100%;height: 100%;object-fit: cover;object-position: center center;} .ji.top-center img {object-position: top center;} .ji.center-right img {object-position: center right;} .ji.contain img {object-fit:contain;} /*** Motion / Nagare ***/ .nagare {transition-duration:var(--nagare);} .nagare.fast {transition-duration:var(--nagare-fast);} .nagare.slow {transition-duration:var(--nagare-slow);} .nagare.soft {transition-timing-function:var(--ease-soft);} .nagare.smooth {transition-timing-function:var(--ease-smooth);} .nagare.snap {transition-timing-function:var(--ease-snap);} .nagare.opacity {transition-property:opacity;} .nagare.transform {transition-property:transform;} .nagare.color {transition-property:color, background-color, border-color;} .nagare.shadow {transition-property:box-shadow;} @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /****** Motion / Reveal ******/ .reveal {opacity:0;} .reveal.up {transform:translateY(var(--reveal-distance));} .reveal.down {transform:translateY(calc(var(--reveal-distance) * -1));} .reveal.left {transform:translateX(var(--reveal-distance));} .reveal.right {transform:translateX(calc(var(--reveal-distance) * -1));} .reveal.opacity {transition:opacity .18s ease;} .reveal.opacity:hover {opacity:1;} .reveal.opacity:focus-within {opacity:1;} /****** Motion / Interaction Utilities ******/ .is-visible {opacity:1;transform:none;} /* Pointer */ .click-area {cursor:pointer;user-select:none;} .click-through-area {pointer-events: none;} /* Hover Motion */ .hover.lift {transition:transform .18s ease, box-shadow .18s ease;} .hover.lift:hover {transform:translateY(var(--hover-lift));} .hover.grow {transition:transform .18s ease;} .hover.grow:hover {transform:scale(1.03);} .hover.dim {transition:opacity .18s ease;} .hover.dim:hover {opacity:.85;} /* Press / Active */ .press.down {transition:transform .08s ease;} .press.down:active {transform:translateY(var(--press-down));} .press.scale {transition:transform .08s ease;} .press.scale:active {transform:scale(var(--press-scale));} /* Focus */ .focus.ring:focus-visible {outline:var(--focus-ring-width) solid var(--color-focus);outline-offset:var(--focus-ring-offset);} .focus.soft:focus-visible {outline:none;box-shadow:0 0 0 3px var(--color-shadow-focus);} /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .hover.lift,.hover.grow,.hover.dim,.press.down,.press.scale,.reveal {transition:none;} .hover.lift:hover,.hover.grow:hover,.press.down:active,.press.scale:active {transform:none;} } /* ========================================================= 09. THEME/VARIANTS ========================================================= */ /****** Hr ******/ hr {margin: calc(var(--ken) * 4) auto calc(var(--ken) * 4) auto;border-bottom: var(--border-thin) solid var(--color-line-strong);clear: both;} hr.v2 {border-bottom: var(--border-thin) solid var(--color-line);} hr.v3 {border-bottom: var(--border-thin) solid var(--color-line-soft);} /****** Web-Safe Font Overides ******/ .serif {font-family: var(--font-serif) !important;} .sans-serif {font-family: var(--font-sans) !important;} /* ================================================================================================================== RESPONSIVE (Tablet and Mobile) ================================================================================================================== */ @media only screen and (max-width : 959px) { /* === 01. FOUNDATION ================== */ /* === 02. TYPOGRAPHY ================== */ .initial-cap::first-letter {font-size: 40px;} .initial-cap.drop::first-letter {margin-top: 8px;} .spotlight.initial-cap.drop::first-letter {margin-top: 10px;} .initial-cap.raise::first-letter {margin-top: -10px;} .spotlight.initial-cap.raise::first-letter {margin-top: -8px;} /* === 03. MAIN ARCHITECTURE (KUMI/KATA) === */ /*** Main Kumi ***/ .main { --size-h1: 32px; --line-h1: 36px; --size-h2: 30px; --line-h2: 32px; } .do {flex-direction: column;gap: 20px;} .hara,.tsubasa {width: 100%;margin: 0;} /*** Hero Kumi ***/ #tokonoma { --size-h1: 4.37vw; --line-h1: 4.69vw; --banner-h: 51px; --size-p: 14px; --line-p: 16px; --size-tagline: 12px; --line-tagline: 15px; --ken: 7px; --letter-spacing-tagline: .59px; --size-detail: 12px; --line-detail: 16px; --size-detail-strong: 16px; --size-attorney: 12px; --line-attorney: 16px; --size-attorney-title: 20px; --line-attorney-title: 24px; } #tokonoma p.tagline {padding: 0 0 calc(var(--ken) * 3) 0;} .firm-detail {padding:calc(var(--ken) / 2) var(--ken);margin-right: calc(var(--ken) / 4);} /*** Navigation Kumi ***/ a.home {height:33px;font-size:12px;line-height:16px;gap:8px;} a.home .simple-icon {flex:0 0 33px;width:33px;font-size:19px;line-height:33px;} a.home strong {font-size:18px;} a.home .firm-type {letter-spacing:0px;} a.call {font-size:18px;line-height:19px;} a.call .text {font-size:14px;letter-spacing:0px;} /*** Practice Areas Kumi ***/ #practice-areas { --size-title: 20px; --line-title: 32px; --size-panel: 13px; --line-panel: 18px; --height-panel: 225px; } /* === 04. LAYOUT ===================== */ /* === 05. MEDIA ====================== */ figure.right.edge-adjust {width:auto;margin: calc(var(--ken) * 2) 0 calc(var(--ken) * 4) calc(var(--ken) * 4);max-width: 50%;} figure.full.edge-adjust {float:none;margin: calc(var(--ken) * 2) 0 calc(var(--ken) * 4) 0;} figure.full.max {width: 100%;} /* === 06. COMPONENTS ================= */ /* === 07. FORMS ====================== */ /* === 08. UTILITIES ================== */ /* === 09. THEME/VARIANTS ============= */ } /* ================================================================================================================== RESPONSIVE (Desktop Only) ================================================================================================================== */ @media only screen and (min-width : 960px) { /* default reactive CSS for PC */ .no-desktop { display: none !important; } } /* ================================================================================================================== RESPONSIVE (Thin Desktop) ================================================================================================================== */ @media only screen and (min-width : 960px) and (max-width : 1059px) { .no-thin-desktop { display: none !important; } } /* ================================================================================================================== RESPONSIVE (Tablet Only) ================================================================================================================== */ @media only screen and (min-width : 640px) and (max-width : 959px) { /* default reactive CSS for Tablet */ .no-tablet { display: none !important; } .flex.no-tablet-flex {display: block;} } /* ================================================================================================================== RESPONSIVE (Thin Tablet) ================================================================================================================== */ @media only screen and (min-width : 640px) and (max-width : 739px) { .no-thin-tablet { display: none !important; } } /* ================================================================================================================== RESPONSIVE (Mobile) ================================================================================================================== */ @media only screen and (max-width : 639px) { /* === 01. FOUNDATION ================== */ .no-mobile { display: none !important; } /* === 02. TYPOGRAPHY ================== */ .initial-cap::first-letter {font-size: 30px;} .initial-cap.drop::first-letter {margin-top: 8px;} .spotlight.initial-cap.drop::first-letter {margin-top: 10px;} .initial-cap.raise::first-letter {margin-top: -7px;} .spotlight.initial-cap.raise::first-letter {margin-top: -5px;} /* === 03. MAIN ARCHITECTURE (KUMI/KATA) === */ /*** Hero Kumi ***/ /*** Main Kumi ***/ .main { --size-h1: 28px; --line-h1: 32px; --size-h2: 26px; --line-h2: 28px; } /*** Hero Kumi ***/ #tokonoma {text-align:center; --size-h1: 28px; --line-h1: 32px; } #tokonoma .pocket {padding: 20px 0px calc(var(--ken) * 4) 0px;} #tokonoma p.tagline {padding: 0 0 calc(var(--ken) * 2) 0;} .firm-detail {margin: 0 calc(var(--ken) / 8);} .featured-attorney {margin:calc(var(--ken) * 4) auto 0 auto;} /*** Navigation Kumi ***/ a.home {font-size:10px;margin-left: -15px;} a.home strong {font-size:16px;} a.call {display: block;width: 30px;height: 35px;padding:0;background: url("../images/phone-mobile-white.png") no-repeat center center;background-size: contain;} a.call span.text, a.call span.number {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;clip-path: inset(50%);} /*** Practice Areas Kumi ***/ #practice-areas { --height-panel: auto; } a.practice-area {padding-top: calc(var(--ken) * 4);} /* === 04. LAYOUT ===================== */ .flex.no-mobile-flex {display: block;} .col-wrap:not(.persistent) > :is(.col-1-2,.col-1-3,.col-2-3,.col-3-4,.col-2-5,.col-3-5) {flex:0 0 100%;} .col-wrap:not(.persistent) > :is(.col-1-4,.col-1-5) {flex:0 0 calc((100% - var(--col-gap)) * 1/2);} .col-wrap:not(.persistent) > :is(.col-min-2) {flex:0 0 calc((100% - var(--col-gap)) * 1/2);} /* optional class to force 2 columns in mobile view */ .col-1-6 {flex:0 0 calc((100% - var(--col-gap)*2) * 1/3);} .cols-2,.cols-3{ grid-template-columns: 1fr; } .cols-4{ grid-template-columns:repeat(2,1fr); } .cols-5{ grid-template-columns:repeat(3,1fr); } .gallery-grid:not(.persistent) > .wide, .gallery-grid:not(.persistent) > .feature { grid-column: auto; grid-row: auto; } /* === 05. MEDIA ====================== */ img.left, picture.left { max-width: 40%; } img.right, picture.right { max-width: 40%;} img.left.center-mobile, img.right.center-mobile, picture.left.center-mobile, picture.right.center-mobile {float: none; margin: calc(var(--ken) * 4) auto calc(var(--ken) * 4) auto;max-width: 100%;} img.center.full-mobile, picture.center.full-mobile {width:calc(100% + 40px); max-width: calc(100% + 40px); margin-left:-20px;} figure.left {max-width: 40%;} figure.right {max-width: 40%;} figure.right.edge-adjust {float:none;margin: calc(var(--ken) * 4) auto calc(var(--ken) * 4) auto;max-width: 470px;} figure.left.center-mobile, figure.right.center-mobile {float:none;margin: calc(var(--ken) * 4) auto calc(var(--ken) * 4) auto;max-width: 100%;} figcaption {padding:calc(var(--ken) * 2) 0 0 0;} figure.sbs {flex-direction: column;text-align: center;} .sbs-img {max-width: 100%;} figure.sbs {max-width:470px;display:block;} figure.sbs.image-left figcaption.sbs-text {text-align: center;} figcaption.sbs-text {padding:calc(var(--ken) * 2) 0 0 0;text-align: center;} /* === 06. COMPONENTS ================= */ /* === 07. FORMS ====================== */ /* === 08. UTILITIES ================== */ .awase-left.mobile-awase, .awase-right.mobile-awase {text-align: center;} .kakoi-sink-migi.mobile-unfold {float: none;margin: calc(var(--ken) * 2) 0 calc(var(--ken) * 2) 0;max-width: none;} .kakoi-sink-hidari.mobile-unfold {float: none;margin: calc(var(--ken) * 2) 0 calc(var(--ken) * 2) 0;max-width: none;} /* === 09. THEME/VARIANTS ============= */ } /* ================================================================================================================== RESPONSIVE (Thin Mobile) ================================================================================================================== */ /*************** Thin Mobile ***************/ @media only screen and (max-width : 459px) { .no-thin-mobile { display: none !important; } .flex.no-thin-mobile-flex {display: block;} .col-wrap:not(.persistent) > .col-1-4:not(.persistent), .col-wrap:not(.persistent) > .col-1-5:not(.persistent) {flex: 0 0 100%;} .cols-4,.cols-5{ grid-template-columns: 1fr; } .col-1-6 {flex:0 0 calc((100% - var(--col-gap)) * 1/2);} a.home .simple-icon {flex:0 0 27px;width:27px;font-size:16px;line-height:27px;} } /* ================================================================================================================== PLUGINS ================================================================================================================== */ /*********** GLightbox (Open Source MIT License) ***********/ .glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:var(--z-plugin);overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}} .glightbox-mobile .gprev {top: 45%;left:5px;width:20px;background-color: rgba(0,0,0,.32);} .glightbox-mobile .gnext {top: 45%;right: 5px;width:20px;background-color: rgba(0,0,0,.32);} .glightbox-mobile .gprev:hover {top: 45%;left:5px;background-color: rgba(0,0,0,.75);} .glightbox-mobile .gnext:hover {top: 45%;right: 5px;background-color: rgba(0,0,0,.75);} /*********** CSE ***********/ /* ================================================================================================================== PRINT ================================================================================================================== */ @media only print { .noprint{display:none !important;} a[href]:after {content:" (" attr(href) ")";font-size:90%;} #top-banner {display: none;} }