@charset "UTF-8"; @import url("https://use.typekit.net/azv6vgb.css"); @keyframes fadeInUp { from { transform: translateY(1rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ---------------------------------------- Image path ---------------------------------------- Relative image file path ---------------------------------------- */ /* ---------------------------------------- Show compile warnings ---------------------------------------- Show Sass warnings when functions and mixins use non-standard tokens. AND Show updates and notifications. ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Prefix separator ---------------------------------------- Set the character the separates responsive and state prefixes from the main class name. The default (":") needs to be preceded by two backslashes to be properly escaped. ---------------------------------------- */ /* ---------------------------------------- Layout grid ---------------------------------------- Should the layout grid classes output with !important ---------------------------------------- */ /* ---------------------------------------- Border box sizing ---------------------------------------- When set to true, sets the box-sizing property of all site elements to `border-box`. ---------------------------------------- */ /* ---------------------------------------- Focus styles ---------------------------------------- */ /* ---------------------------------------- Icons ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://designsystem.digital.gov/design-tokens/typesetting/overview/ ---------------------------------------- */ /* ---------------------------------------- Root font size ---------------------------------------- Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries ---------------------------------------- $theme-root-font-size only applies when $theme-respect-user-font-size is set to false. This will set the root font size as a specific px value and use px values for media queries. Accepts true or false ---------------------------------------- */ /* ---------------------------------------- Global styles ---------------------------------------- Adds basic styling for the following unclassed elements: - paragraph: paragraph text - link: links - content: paragraph text, links, headings, lists, and tables ---------------------------------------- */ /* ---------------------------------------- Font path ---------------------------------------- Relative font file path ---------------------------------------- */ /* ---------------------------------------- Custom typeface tokens ---------------------------------------- Add a new custom typeface token if your project uses a typeface not already defined by USWDS. ---------------------------------------- USWDS defines the following tokens by default: ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token. For example: $theme-font-type-cond: 'example-font-token'; display-name: The display name of your font cap-height: The height of a 500px `N` in Sketch ---------------------------------------- You should change `example-[style]-token` names to something more descriptive. ---------------------------------------- */ /* ---------------------------------------- Type-based font settings ---------------------------------------- Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens. ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- */ /* ---------------------------------------- Custom font stacks ---------------------------------------- Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack. Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack. ---------------------------------------- Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; Output: font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; ---------------------------------------- */ /* ---------------------------------------- Add any custom font source files ---------------------------------------- If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows. ---------------------------------------- USWDS automatically generates @font-face decalarations for the following 'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro' These typefaces not require custom source files. ---------------------------------------- EXAMPLE - dir: Directory relative to $theme-font-path - This directory should include fonts saved as .ttf, .woff, and .woff2 ExampleSerif-Normal.ttf ExampleSerif-Normal.woff ExampleSerif-Normal.woff2 $theme-font-serif-custom-src: ( dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ), ); ---------------------------------------- */ /* ---------------------------------------- Role-based font settings ---------------------------------------- Set the role-based tokens for your project from the following font-type tokens. ---------------------------------------- 'cond' 'icon' 'lang' 'mono' 'sans' 'serif' ---------------------------------------- */ /* ---------------------------------------- Type scale ---------------------------------------- Define your project's type scale using values from the USWDS system type scale 1-20 ---------------------------------------- */ /* ---------------------------------------- Font weights ---------------------------------------- Assign weights 100-900 Or use `false` for unneeded weights. ---------------------------------------- */ /* ---------------------------------------- General typography settings ---------------------------------------- Type scale tokens ---------------------------------------- micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px ---------------------------------------- Line height tokens ---------------------------------------- 1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75 ---------------------------------------- Font role tokens ---------------------------------------- 'ui' 'heading' 'body' 'code' 'alt' ---------------------------------------- Measure (max-width) tokens ---------------------------------------- 1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ /* ---------------------------------------- Theme palette colors ---------------------------------------- */ /* ---------------------------------------- State palette colors ---------------------------------------- */ /* ---------------------------------------- General colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- SPACING SETTINGS ---------------------------------------- Read more about settings and USWDS spacing units tokens in the documentation: https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ /* ---------------------------------------- Border radius ---------------------------------------- 2px 2px 0.5 4px 1 8px 1.5 12px 2 16px 2.5 20px 3 24px 4 32px 5 40px 6 48px 7 56px 8 64px 9 72px ---------------------------------------- */ /* ---------------------------------------- Column gap ---------------------------------------- 2px 2px 0.5 4px 1 8px 2 16px 3 24px 4 32px 5 40px 6 48px ---------------------------------------- */ /* ---------------------------------------- Grid container max-width ---------------------------------------- mobile mobile-lg tablet tablet-lg desktop desktop-lg widescreen ---------------------------------------- */ /* ---------------------------------------- Site ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: https://designsystem.digital.gov/utilities ---------------------------------------- */ /* ---------------------------------------- Utility breakpoints ---------------------------------------- Which breakpoints does your project need? Select as `true` any breakpoint used by utilities or layout grid ---------------------------------------- */ /* ---------------------------------------- Global colors ---------------------------------------- The following palettes will be added to - background-color - border-color - color - text-decoration-color ---------------------------------------- */ /* ---------------------------------------- Settings ---------------------------------------- */ /* ---------------------------------------- Values ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ======================================== Functions ---------------------------------------- */ /* ======================================== General-purpose functions ---------------------------------------- */ /* ---------------------------------------- divide() ---------------------------------------- Divides one number by another, to a specified precision. ---------------------------------------- */ /* ---------------------------------------- uswds-error() ---------------------------------------- Allow the system to pass an error as text to test error states in unit testing ---------------------------------------- */ /* ---------------------------------------- error-not-token() ---------------------------------------- Returns a common not-a-token error. ---------------------------------------- */ /* ---------------------------------------- map-deep-get() ---------------------------------------- @author Hugo Giraudel @access public @param {Map} $map - Map @param {Arglist} $keys - Key chain @return {*} - Desired value ---------------------------------------- */ /* ---------------------------------------- strip-unit() ---------------------------------------- Remove the unit of a length @author Hugo Giraudel @param {Number} $number - Number to remove unit from @return {Number} - Unitless number ---------------------------------------- */ /* ---------------------------------------- multi-cat() ---------------------------------------- Concatenate two lists ---------------------------------------- */ /* ---------------------------------------- map-collect() ---------------------------------------- Collect multiple maps into a single large map source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe ---------------------------------------- */ /* ---------------------------------------- smart-quote() ---------------------------------------- Quotes strings Inspects `px`, `xs`, and `xl` numbers Leaves bools as is ---------------------------------------- */ /* ---------------------------------------- remove() ---------------------------------------- Remove a value from a list ---------------------------------------- */ /* ---------------------------------------- to-map() ---------------------------------------- Convert a single value to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- base-to-map() ---------------------------------------- Convert a single base to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- ns() ---------------------------------------- Add a namesspace of $type if that namespace is set to output ---------------------------------------- */ /* ---------------------------------------- de-list() ---------------------------------------- Transform a one-element list or arglist into that single element. ---------------------------------------- (1) => 1 ((1)) => (1) ---------------------------------------- */ /* ---------------------------------------- unpack() ---------------------------------------- Create lists of single items from lists of lists. ---------------------------------------- (1, (2.1, 2.2), 3) --> (1, 2.1, 2.2, 3) ---------------------------------------- */ /* ---------------------------------------- get-last() ---------------------------------------- Return the last item of a list, Return null if the value is null ---------------------------------------- */ /* ---------------------------------------- has-important() ---------------------------------------- Check to see if `!important` is being passed in a mixin's props ---------------------------------------- */ /* ---------------------------------------- append-important() ---------------------------------------- Append `!important` to a list ---------------------------------------- */ /* ---------------------------------------- spacing-multiple() ---------------------------------------- Converts a spacing unit multiple into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- rem-to-px() ---------------------------------------- Converts a value in rem to a value in px ---------------------------------------- */ /* ---------------------------------------- rem-to-user-em() ---------------------------------------- Converts a value in rem to a value in [user-settings] em for use in media queries ---------------------------------------- */ /* ---------------------------------------- validate-typeface-token() ---------------------------------------- Check to see if a typeface-token exists. Throw an error if a passed token does not exist in the typeface-token map. ---------------------------------------- */ /* ---------------------------------------- cap-height() ---------------------------------------- Get the cap height of a valid typeface ---------------------------------------- */ /* ---------------------------------------- px-to-rem() ---------------------------------------- Converts a value in px to a value in rem ---------------------------------------- */ /* ---------------------------------------- normalize-type-scale() ---------------------------------------- Normalizes a specific face's optical size to a set target ---------------------------------------- */ /* ---------------------------------------- utility-font() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- Not the public-facing function. Used for building the utilities and withholds certain errors. ---------------------------------------- */ /* ---------------------------------------- line-height() lh() ---------------------------------------- Get a normalized line-height from a family and a line-height scale unit ---------------------------------------- */ /* ---------------------------------------- convert-to-font-type() ---------------------------------------- Converts a font-role token into a font-type token. Leaves font-type tokens unchanged. ---------------------------------------- */ /* ---------------------------------------- get-font-stack() ---------------------------------------- Get a font stack from a style- or role-based font token. ---------------------------------------- */ /* ---------------------------------------- get-typeface-token() ---------------------------------------- Get a typeface token from a font-type or font-role token. ---------------------------------------- */ /* ---------------------------------------- get-system-color() ---------------------------------------- Derive a system color from its family, value, and vivid or a passed variable that is, itself, a list ---------------------------------------- */ /* ---------------------------------------- system-type-scale() ---------------------------------------- Get a value from the system type scale ---------------------------------------- */ /* ---------------------------------------- calc-gap-offset() ---------------------------------------- Calculate a valid uswds unit that is half the width of a given unit, for calculating gap offset in the layout grid. ---------------------------------------- */ /* ---------------------------------------- get-standard-values() ---------------------------------------- Gets a map of USWDS standard values for a property ---------------------------------------- */ /* ---------------------------------------- number-to-token() ---------------------------------------- Converts an integer or numeric value into a system value Ex: 0.5 --> '05' -1px --> 'neg-1px' ---------------------------------------- */ /* ---------------------------------------- columns() ---------------------------------------- outputs a grid-col number based on the number of desired columns in the 12-column grid Ex: columns(2) --> 6 grid-col(columns(2)) ---------------------------------------- */ /* ---------------------------------------- get-uswds-value() ---------------------------------------- Finds and outputs a value from the USWDS standard values. Used to build other standard utility functions and mixins. ---------------------------------------- */ /* ---------------------------------------- decompose-color-token() ---------------------------------------- Convert a color token into into a list of form [family], [grade], [variant] Vivid variants return "vivid" as the variant. If neither grade nor variant exists, returns 'false' ---------------------------------------- */ /* ---------------------------------------- test-colors() ---------------------------------------- Check to see if all system colors fall between the proper relative luminance range for their grade. Has a couple quirks, as the luminance() function returns slightly different results than expected. ---------------------------------------- */ /* ---------------------------------------- str-split() ---------------------------------------- Split a string at a given separator and convert into a lisrt of substrings ---------------------------------------- */ /* ---------------------------------------- str-replace() ---------------------------------------- Replace any substring with another string ---------------------------------------- */ /* ---------------------------------------- is-system-color-token() ---------------------------------------- Return whether a token is a system color token ---------------------------------------- */ /* ---------------------------------------- is-theme-color-token() ---------------------------------------- Return whether a token is a theme color token ---------------------------------------- */ /* ---------------------------------------- color-token-assignment() ---------------------------------------- Get the system token equivalent of any theme color token ---------------------------------------- */ /* ---------------------------------------- is-color-token() ---------------------------------------- Returns whether a given string is a USWDS color token. ---------------------------------------- */ /* ---------------------------------------- calculate-grade() ---------------------------------------- Derive the grade equivalent any color, even non-token colors ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- advanced-color() ---------------------------------------- Derive a color from a color triplet: [family], [grade], [variant] ---------------------------------------- */ /* ---------------------------------------- units() ---------------------------------------- Converts a spacing unit into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- get-palettes() ---------------------------------------- Build a single map of plugin values from a list of plugin keys. ---------------------------------------- */ /* ---------------------------------------- border-radius() ---------------------------------------- Get a border-radius from the system border-radii ---------------------------------------- */ /* ---------------------------------------- font-weight() fw() ---------------------------------------- Get a font-weight value from the system font-weight ---------------------------------------- */ /* ---------------------------------------- feature() ---------------------------------------- Gets a valid USWDS font feature setting ---------------------------------------- */ /* ---------------------------------------- flex() ---------------------------------------- Gets a valid USWDS flex value ---------------------------------------- */ /* ---------------------------------------- font-family() family() ---------------------------------------- Get a font-family stack from a role-based or type-based font family ---------------------------------------- */ /* ---------------------------------------- letter-spacing() ls() ---------------------------------------- Get a letter-spacing value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- measure() ---------------------------------------- Gets a valid USWDS reading line length ---------------------------------------- */ /* ---------------------------------------- opacity() ---------------------------------------- Get an opacity from the system opacities ---------------------------------------- */ /* ---------------------------------------- order() ---------------------------------------- Get an order value from the system orders ---------------------------------------- */ /* ---------------------------------------- radius() ---------------------------------------- Get a border-radius value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- font-size() ---------------------------------------- Get type scale value from a [family] and [scale] ---------------------------------------- */ /* ---------------------------------------- z-index() z() ---------------------------------------- Get a z-index value from the system z-index ---------------------------------------- */ /* ---------------------------------------- magic-number() ---------------------------------------- Returns the magic number of two color grades. Takes numbers or color tokens. magic-number(50, 10) return: 40 magic-number("red-50", "red-10") return: 40 ---------------------------------------- */ /* ---------------------------------------- get-default() ---------------------------------------- Returns the default value from a map of project defaults get-default("bg-color") > $theme-body-background-color ---------------------------------------- */ /* ---------------------------------------- get-color-token-from-bg() ---------------------------------------- Returns an accessible foreground color token, given a background, preferred color, fallback color, and WCAG target returns: color-token get-color-token-from-bg( "black", "red-60", "red-10", "AA") > "red-10" ---------------------------------------- */ /* ---------------------------------------- get-link-tokens-from-bg() ---------------------------------------- Get accessible link colors for a given background color returns: link-token, hover-token get-link-tokens-from-bg( "black", "red-60", "red-10", "AA") > "red-10", "red-5" get-link-tokens-from-bg( "black", "red-60v", "red-10v", "AA-large") > "red-60v", "red-50v" get-link-tokens-from-bg( "black", "red-5v", "red-60v", "AA") > "red-5v", "white" get-link-tokens-from-bg( "black", "white", "red-60v", "AA") > "white", "white" ---------------------------------------- */ /* ---------------------------------------- color-token-type() ---------------------------------------- Returns the type of a color token. Returns: "system" | "theme" ---------------------------------------- */ /* ---------------------------------------- color-token-family() ---------------------------------------- Returns the family of a color token. Returns: color-family color-token-family("accent-warm-vivid") > "accent-warm" color-token-family("red-50v") > "red" color-token-variant(("red", 50, "vivid")) > "red" ---------------------------------------- */ /* ---------------------------------------- color-token-grade() ---------------------------------------- Returns the grade of a USWDS color token. Returns: color-grade color-token-grade("accent-warm") > "root" color-token-grade("accent-warm-vivid") > "root" color-token-grade("accent-warm-darker") > "darker" color-token-grade("red-50v") > 50 color-token-variant(("red", 50, "vivid")) > 50 ---------------------------------------- */ /* ---------------------------------------- color-token-variant() ---------------------------------------- Returns the variant of color token. Returns: "vivid" | false color-token-variant("accent-warm") > false color-token-variant("accent-warm-vivid") > "vivid" color-token-variant("red-50v") > "vivid" color-token-variant(("red", 50, "vivid")) > "vivid" ---------------------------------------- */ /* ---------------------------------------- next-token() ---------------------------------------- Returns next "darker" or "lighter" color token of the same token type and variant. Returns: color-token | false next-token("accent-warm", "lighter") > "accent-warm-light" next-token("gray-10", "lighter") > "gray-5" next-token("gray-5", "lighter") > "white" next-token("white", "lighter") > false next-token("red-50v", "darker") > "red-60v" next-token("red-50", "darker") > "red-60" next-token("red-80v", "darker") > "red-90" next-token("red-90", "darker") > "black" next-token("white", "darker") > "gray-5" next-token("black", "lighter") > "gray-90" ---------------------------------------- */ /* ---------------------------------------- wcag-magic-number() ---------------------------------------- Returns the magic number of a specific wcag grade: "AA" "AA-Large" "AAA" wcag-magic-number("AA") > 50 ---------------------------------------- */ /* ---------------------------------------- is-accessible-magic-number() ---------------------------------------- Returns whether two grades achieve specified target color contrast Returns: true | false is-accessible-magic-number(10, 50, "AA") > false is-accessible-magic-number(10, 60, "AA") > true ---------------------------------------- */ /* ======================================== core/units ---------------------------------------- The master palettes of - colors - whitespace - typescale ---------------------------------------- This file is not meant to be modified by USWDS project teams. Change your project values in project/uswds-project-settings ---------------------------------------- */ /* ---------------------------------------- Spacing grid multiplier ---------------------------------------- */ /* ---------------------------------------- Spacing grid ---------------------------------------- */ /* ---------------------------------------- Breakpoints ---------------------------------------- */ /* ---------------------------------------- Units ---------------------------------------- */ /* ---------------------------------------- Layout grid widths ---------------------------------------- */ /* ---------------------------------------- Font stacks ---------------------------------------- */ /* ---------------------------------------- Typeface ---------------------------------------- */ /* ---------------------------------------- Typescale ---------------------------------------- */ /* ---------------------------------------- Measure ---------------------------------------- */ /* ---------------------------------------- Line height ---------------------------------------- */ /* ---------------------------------------- Base cap height ---------------------------------------- 500px 'N' height measured in Sketch. Used for normalizing font sizes. Current normalized to Apple system fonts. ---------------------------------------- */ /* ---------------------------------------- Luminance ranges ---------------------------------------- */ /* ---------------------------------------- Colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0 Variables Use for computed variables or any not meant to be set by system users directly. ---------------------------------------- */ /* ---------------------------------------- Touch target size ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Separator ---------------------------------------- */ /* ---------------------------------------- Spacing ---------------------------------------- All spacing values that can be called by units() ---------------------------------------- */ /* ---------------------------------------- Project fonts ---------------------------------------- Collects font settings in a map for looping. ---------------------------------------- */ /* ---------------------------------------- Font stack ---------------------------------------- Compute the project font stack based on the project fonts and the font definition values set in core/_font-definitions ---------------------------------------- */ /* ---------------------------------------- Cap heights ---------------------------------------- Collect project cap heights ---------------------------------------- */ /* ---------------------------------------- Theme color families and grades ---------------------------------------- */ /* ---------------------------------------- Theme color map ---------------------------------------- */ /* ---------------------------------------- Theme color shortcodes ---------------------------------------- */ /* ---------------------------------------- System magic numbers for color contrast ---------------------------------------- */ /* ---------------------------------------- Luminance color component values ---------------------------------------- */ /* ---------------------------------------- Build the project type scale map ---------------------------------------- */ /* ---------------------------------------- Border-radius ---------------------------------------- */ /* ---------------------------------------- Column gaps ---------------------------------------- */ /* ---------------------------------------- Grid ---------------------------------------- */ /* ---------------------------------------- Aspect Ratios ---------------------------------------- */ /* ---------------------------------------- Easing ---------------------------------------- */ /* ---------------------------------------- Project defaults ---------------------------------------- */ /* ---------------------------------------- USWDS Properties ---------------------------------------- */ /* ---------------------------------------- family() ---------------------------------------- Get a font-family stack ---------------------------------------- */ /* ---------------------------------------- size() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- font() ---------------------------------------- Get a font-family stack AND Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- typeset() ---------------------------------------- Sets: - family - size - line-height ---------------------------------------- */ /* stylelint-disable max-nesting-depth */ /* ---------------------------------------- @render-pseudoclass ---------------------------------------- Build a pseucoclass utiliy from values calculated in the @render-utilities-in loop ---------------------------------------- */ /* ---------------------------------------- @render-utility ---------------------------------------- Build a utility from values calculated in the @render-utilities-in loop ---------------------------------------- TODO: Determine the proper use of unquote() in the following. Changed to account for a 'interpolation near operators will be simplified in a future version of Sass' warning. ---------------------------------------- */ /* ---------------------------------------- @render-utilities-in ---------------------------------------- The master loop that sets the building blocks of utilities from the values in individual rule settings and loops through all possible variants ---------------------------------------- */ /* stylelint-enable */ /* deprecated.scss --- Occasionally the design system will deprecate old variables or functionality. If we replace the old functionality with something new, this is a place to connect the old functionality to the new functionality, in the service of better continuity and backwards compatibility within a major release cycle. Note the USWDS version where we deprecated the old functionality in a comment. Be sure to update notifications.scss. This file should started fresh at each major version. */ /* notifications.scss --- Adds a notification at the top of each USWDS compile. Use this file for important notifications and updates to the design system. This file should started fresh at each major version. */ /* prettier-ignore */ /* prettier-ignore */ .dropup, .dropright, .dropdown, .dropleft { position: relative; } .dropdown-toggle { white-space: nowrap; } .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .dropdown-toggle:empty::after { margin-left: 0; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } .dropdown-menu-left { right: auto; left: 0; } .dropdown-menu-right { right: 0; left: auto; } @media (min-width: 576px) { .dropdown-menu-sm-left { right: auto; left: 0; } .dropdown-menu-sm-right { right: 0; left: auto; } } @media (min-width: 768px) { .dropdown-menu-md-left { right: auto; left: 0; } .dropdown-menu-md-right { right: 0; left: auto; } } @media (min-width: 992px) { .dropdown-menu-lg-left { right: auto; left: 0; } .dropdown-menu-lg-right { right: 0; left: auto; } } @media (min-width: 1200px) { .dropdown-menu-xl-left { right: auto; left: 0; } .dropdown-menu-xl-right { right: 0; left: auto; } } .dropup .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem; } .dropup .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0; border-right: 0.3em solid transparent; border-bottom: 0.3em solid; border-left: 0.3em solid transparent; } .dropup .dropdown-toggle:empty::after { margin-left: 0; } .dropright .dropdown-menu { top: 0; right: auto; left: 100%; margin-top: 0; margin-left: 0.125rem; } .dropright .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0; border-bottom: 0.3em solid transparent; border-left: 0.3em solid; } .dropright .dropdown-toggle:empty::after { margin-left: 0; } .dropright .dropdown-toggle::after { vertical-align: 0; } .dropleft .dropdown-menu { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: 0.125rem; } .dropleft .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; } .dropleft .dropdown-toggle::after { display: none; } .dropleft .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; } .dropleft .dropdown-toggle:empty::after { margin-left: 0; } .dropleft .dropdown-toggle::before { vertical-align: 0; } .dropdown-menu[x-placement^=top], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left] { right: auto; bottom: auto; } .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; } .dropdown-item { display: block; width: 100%; padding: 0.25rem 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; } .dropdown-item:hover, .dropdown-item:focus { color: rgb(21.6283783784, 24.25, 26.8716216216); text-decoration: none; background-color: #f8f9fa; } .dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; background-color: #007bff; } .dropdown-item.disabled, .dropdown-item:disabled { color: #6c757d; pointer-events: none; background-color: transparent; } .dropdown-menu.show { display: block; } .dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0; font-size: 0.875rem; color: #6c757d; white-space: nowrap; } .dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: #212529; } .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: 0.3rem; } @media (min-width: 576px) { .jumbotron { padding: 4rem 2rem; } } .jumbotron-fluid { padding-right: 0; padding-left: 0; border-radius: 0; } .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0; } .col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .order-first { order: -1; } .order-last { order: 13; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-10 { order: 10; } .order-11 { order: 11; } .order-12 { order: 12; } .offset-1 { margin-left: 8.3333333333%; } .offset-2 { margin-left: 16.6666666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.3333333333%; } .offset-5 { margin-left: 41.6666666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.3333333333%; } .offset-8 { margin-left: 66.6666666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.3333333333%; } .offset-11 { margin-left: 91.6666666667%; } @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-sm-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-sm-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-sm-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-sm-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-sm-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-sm-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-sm-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-sm-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .order-sm-first { order: -1; } .order-sm-last { order: 13; } .order-sm-0 { order: 0; } .order-sm-1 { order: 1; } .order-sm-2 { order: 2; } .order-sm-3 { order: 3; } .order-sm-4 { order: 4; } .order-sm-5 { order: 5; } .order-sm-6 { order: 6; } .order-sm-7 { order: 7; } .order-sm-8 { order: 8; } .order-sm-9 { order: 9; } .order-sm-10 { order: 10; } .order-sm-11 { order: 11; } .order-sm-12 { order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.3333333333%; } .offset-sm-2 { margin-left: 16.6666666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.3333333333%; } .offset-sm-5 { margin-left: 41.6666666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.3333333333%; } .offset-sm-8 { margin-left: 66.6666666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.3333333333%; } .offset-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-md-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-md-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-md-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-md-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-md-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-md-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-md-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .order-md-first { order: -1; } .order-md-last { order: 13; } .order-md-0 { order: 0; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; } .order-md-4 { order: 4; } .order-md-5 { order: 5; } .order-md-6 { order: 6; } .order-md-7 { order: 7; } .order-md-8 { order: 8; } .order-md-9 { order: 9; } .order-md-10 { order: 10; } .order-md-11 { order: 11; } .order-md-12 { order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.3333333333%; } .offset-md-2 { margin-left: 16.6666666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.3333333333%; } .offset-md-5 { margin-left: 41.6666666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.3333333333%; } .offset-md-8 { margin-left: 66.6666666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.3333333333%; } .offset-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-lg-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-lg-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-lg-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-lg-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-lg-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-lg-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-lg-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-lg-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .order-lg-first { order: -1; } .order-lg-last { order: 13; } .order-lg-0 { order: 0; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } .order-lg-6 { order: 6; } .order-lg-7 { order: 7; } .order-lg-8 { order: 8; } .order-lg-9 { order: 9; } .order-lg-10 { order: 10; } .order-lg-11 { order: 11; } .order-lg-12 { order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.3333333333%; } .offset-lg-2 { margin-left: 16.6666666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.3333333333%; } .offset-lg-5 { margin-left: 41.6666666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.3333333333%; } .offset-lg-8 { margin-left: 66.6666666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.3333333333%; } .offset-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-xl-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-xl-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-xl-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-xl-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-xl-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-xl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-xl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-xl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-xl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-xl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } .order-xl-first { order: -1; } .order-xl-last { order: 13; } .order-xl-0 { order: 0; } .order-xl-1 { order: 1; } .order-xl-2 { order: 2; } .order-xl-3 { order: 3; } .order-xl-4 { order: 4; } .order-xl-5 { order: 5; } .order-xl-6 { order: 6; } .order-xl-7 { order: 7; } .order-xl-8 { order: 8; } .order-xl-9 { order: 9; } .order-xl-10 { order: 10; } .order-xl-11 { order: 11; } .order-xl-12 { order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.3333333333%; } .offset-xl-2 { margin-left: 16.6666666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.3333333333%; } .offset-xl-5 { margin-left: 41.6666666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.3333333333%; } .offset-xl-8 { margin-left: 66.6666666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.3333333333%; } .offset-xl-11 { margin-left: 91.6666666667%; } } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: 0.5rem 1rem; } .nav-link:hover, .nav-link:focus { text-decoration: none; } .nav-link.disabled { color: #6c757d; pointer-events: none; cursor: default; } .nav-tabs { border-bottom: 1px solid #dee2e6; } .nav-tabs .nav-item { margin-bottom: -1px; } .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: #e9ecef #e9ecef #dee2e6; } .nav-tabs .nav-link.disabled { color: #6c757d; background-color: transparent; border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .nav-pills .nav-link { border-radius: 0.25rem; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #007bff; } .nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } .nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .fade { transition: opacity 0.15s linear; } @media (prefers-reduced-motion: reduce) { .fade { transition: none; } } .fade:not(.show) { opacity: 0; } .collapse:not(.show) { display: none; } .collapsing { position: relative; height: 0; overflow: hidden; transition: height 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } } h3, .h3, h2, .h2, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .title, h1, .h1 { color: #0083BE; font-family: "myriad-pro", Arial, sans-serif; } h3 small, .h3 small, h2 small, .h2 small, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .title small, h1 small, .h1 small { display: inline-block; } h3.no-border:after, .no-border.h3:after, h2.no-border:after, .no-border.h2:after, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .no-border.title:after, h1.no-border:after, .no-border.h1:after { display: none; } .block-views-blockwhats-new-block-latest-posts .views-field-field-publisher:after, h3:after, .h3:after, h2:after, .h2:after, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .title:after, h1:after, .h1:after { display: block; width: 150px; height: 2px; margin: 12px 0 0; background-color: #C64E06; content: ""; } .text-center .block-views-blockwhats-new-block-latest-posts .views-field-field-publisher:after, .block-views-blockwhats-new-block-latest-posts .text-center .views-field-field-publisher:after, .text-center h3:after, .text-center .h3:after, .text-center h2:after, .text-center .h2:after, .text-center .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .title:after, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .text-center .title:after, .text-center h1:after, .text-center .h1:after, .text-align-center .block-views-blockwhats-new-block-latest-posts .views-field-field-publisher:after, .block-views-blockwhats-new-block-latest-posts .text-align-center .views-field-field-publisher:after, .text-align-center h3:after, .text-align-center .h3:after, .text-align-center h2:after, .text-align-center .h2:after, .text-align-center .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .title:after, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .text-align-center .title:after, .text-align-center h1:after, .text-align-center .h1:after { margin-right: auto; margin-left: auto; } .block-views-blockwhats-new-block-latest-posts .text-center.views-field-field-publisher:after, h3.text-center:after, .text-center.h3:after, h2.text-center:after, .text-center.h2:after, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .text-center.title:after, h1.text-center:after, .text-center.h1:after, .block-views-blockwhats-new-block-latest-posts .text-align-center.views-field-field-publisher:after, h3.text-align-center:after, .text-align-center.h3:after, h2.text-align-center:after, .text-align-center.h2:after, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .text-align-center.title:after, h1.text-align-center:after, .text-align-center.h1:after { margin-right: auto; margin-left: auto; } .path-partners-atlas .paragraph--type--gallery .title { text-align: center; } .path-partners-atlas .paragraph--type--gallery .title:after { margin-right: auto; margin-left: auto; } .grid-container .region-content--4xx .content, .region-content--4xx .grid-container .content, .grid-container .region-help, .grid-container .paragraph--type--image-text-horz, .grid-container .paragraph--type--hero, .grid-container .block-views-blockwhats-new-block-latest-posts, .grid-container .nav-tabs, .grid-container .hero--inverse, .grid-container .region-highlighted { margin-right: -1rem; margin-left: -1rem; } @media all and (min-width: 75em) { .grid-container .region-content--4xx .content, .region-content--4xx .grid-container .content, .grid-container .region-help, .grid-container .paragraph--type--image-text-horz, .grid-container .paragraph--type--hero, .grid-container .block-views-blockwhats-new-block-latest-posts, .grid-container .nav-tabs, .grid-container .hero--inverse, .grid-container .region-highlighted { margin-right: -2rem; margin-left: -2rem; } } .paragraph--type--image-text-horz, .block-views-blockwhats-new-block-latest-posts, .grid-container .nav-tabs, .hero--inverse, .view-display-id-biography_list, .grid-full-width { padding-left: 1rem; padding-right: 1rem; } @media all and (min-width: 75em) { .paragraph--type--image-text-horz, .block-views-blockwhats-new-block-latest-posts, .grid-container .nav-tabs, .hero--inverse, .view-display-id-biography_list, .grid-full-width { padding-left: 2rem; padding-right: 2rem; } } @media all and (min-width: 55em) { .view-display-id-biography_list, .grid-full-width { margin: 1em calc(50% - 50vh); } } @media all and (min-width: 75em) { .view-display-id-biography_list, .grid-full-width { margin: 1em calc(50% - 600px); } } .usa-nav__primary > .usa-nav__primary-item > button, .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button.usa-current), .usa-nav__primary > .usa-nav__primary-item > a, .occ-programs-nav .dropdown-toggle { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; padding: 1.5rem 1rem; color: #fff; font-family: "myriad-pro", Arial, sans-serif; font-size: 0.875rem; font-style: italic; font-weight: 900; line-height: 1rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); text-transform: uppercase; white-space: nowrap; } .usa-nav__primary > .usa-nav__primary-item > button:hover, .usa-nav__primary > .usa-nav__primary-item > a:hover:not(.usa-button.usa-current), .usa-nav__primary > .usa-nav__primary-item > a:hover, .occ-programs-nav .dropdown-toggle:hover, .usa-nav__primary > .usa-nav__primary-item > button:active, .usa-nav__primary > .usa-nav__primary-item > a:active:not(.usa-button.usa-current), .usa-nav__primary > .usa-nav__primary-item > a:active, .occ-programs-nav .dropdown-toggle:active, .usa-nav__primary > .usa-nav__primary-item > button:focus, .usa-nav__primary > .usa-nav__primary-item > a:focus:not(.usa-button.usa-current), .usa-nav__primary > .usa-nav__primary-item > a:focus, .occ-programs-nav .dropdown-toggle:focus { background-color: rgba(0, 0, 0, 0.25); color: #fff; } .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > button:hover::after, .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > a:hover::after, .usa-header--basic .occ-programs-nav .dropdown-toggle:hover::after, .occ-programs-nav .usa-header--basic .dropdown-toggle:hover::after, .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > button:active::after, .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > a:active::after, .usa-header--basic .occ-programs-nav .dropdown-toggle:active::after, .occ-programs-nav .usa-header--basic .dropdown-toggle:active::after, .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > button:focus::after, .usa-header--basic .usa-nav__primary > .usa-nav__primary-item > a:focus::after, .usa-header--basic .occ-programs-nav .dropdown-toggle:focus::after, .occ-programs-nav .usa-header--basic .dropdown-toggle:focus::after { display: none; } .usa-card__video, .embed-responsive { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; } .usa-card__video iframe, .embed-responsive iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-width: 0; } .blog-article__meta li, .view-display-id-block_featured_videos .views-field-created, .view-blog-blocks .views-field-field-publisher, .view-blog-blocks .views-field-created, .usa-card__meta { color: #717171; font-size: 0.75rem; font-weight: 600; } body, button { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body { background-color: #112E51; } .spacer { display: block; clear: both; height: 40px; } .usa-button { font-size: 1rem; text-decoration: none; } .usa-button--outline { transition: all 0.25s; color: #0083BE; box-shadow: inset 0 0 0 2px #0071BB; } .usa-button--outline:hover, .usa-button--outline:focus, .usa-button--outline:active { background-color: #0071BB; color: #fff; box-shadow: inset 0 0 0 2px #0071BB; } .usa-button--round { border-radius: 2rem; } .usa-button--big { font-size: 1.125rem; } .usa-button--link { display: inline-block; padding: 0; background: transparent; color: #005B97; } .usa-button--link:after { position: relative; left: 0.125rem; display: inline-block; width: 0.75em; height: 0.75em; transition: left 0.1s ease-in; background: url("../img/chevron-right-blue.svg") center center; background-repeat: no-repeat; background-size: contain; content: ""; } .usa-button--link:hover, .usa-button--link:focus, .usa-button--link:active { background-color: transparent; color: #005B97; } .usa-button--link:hover:after, .usa-button--link:focus:after, .usa-button--link:active:after { left: 0.3125rem; } .field--name-field-taxonomies .field__item > a { display: inline-block; padding: 0.5rem 0.75rem; border: 0.0625rem solid #D9D9D9; border-radius: 0.25rem; color: #717171; font-size: 0.75rem; font-weight: 600; } .field--name-field-taxonomies .field__item > a:hover, .field--name-field-taxonomies .field__item > a:focus { border-color: #C64E06; color: #C64E06; text-decoration: none; } [class^=btn] { text-decoration: none; } .usa-legend { margin-top: 2.5rem; color: #003F72; font-size: 1.5rem; } .usa-label { margin-bottom: 4px; font-family: "myriad-pro", Arial, sans-serif; font-weight: bold; line-height: 32px; } .usa-search { position: relative; } .usa-search .usa-input { max-width: none; padding: 26px 20px; border-radius: 26px; border-color: #D9D9D9; box-shadow: 0 5px 8px -3px rgba(33, 33, 33, 0.15); } .usa-search .usa-button { position: absolute; top: 3px; right: 3px; width: 48px; height: 48px; border-radius: 48px; } .usa-search .usa-button:before { position: absolute; top: 50%; left: 50%; display: block; width: 20px; height: 20px; transform: translate(-50%, -50%); background-image: url("../img/icon-search.svg"); background-size: cover; content: ""; } img { display: inline-block; height: auto; } .text-formatted img { margin-bottom: 1rem; } @media all and (max-width: 29.99em) { .text-formatted img[class^=align-] { float: none; margin-right: auto; margin-left: auto; } } img.align-left { margin-right: 2rem; } img.align-right { margin-left: 2rem; } body { color: #717171; } p { line-height: 1.5rem; } a { color: #0071BB; } a:hover, a:focus { text-decoration: underline; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .usa-list li { margin-bottom: 12px; } h1, .h1 { font-size: 3.9375rem; } h1 small, .h1 small { font-size: 2.125rem; font-style: italic; } h2, .h2, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .title { font-size: 2.125rem; font-weight: normal; } h3, .h3 { color: #003F72; font-size: 1.5rem; font-weight: normal; } h3:after, .h3:after { width: 100px; height: 1px; } h4, .h4 { margin-top: 1rem; margin-bottom: 1rem; color: #333; font-size: 1.125rem; line-height: 1.5rem; } .lead { max-width: 50rem; margin: 0 auto 2.5rem; color: #333; font-size: 1.125rem; font-weight: lighter; line-height: 1.5rem; text-align: center; } hr { clear: both; height: 0.0625rem; margin-top: 2rem; margin-bottom: 2rem; border: 0; background-color: #D9D9D9; } address { line-height: 1.5; } blockquote { margin: 0 0 20px; padding: 10px 20px; border-left: 5px solid #D9D9D9; font-size: 1.125rem; } blockquote p { margin-top: 0; } blockquote footer { display: block; color: #717171; font-size: 0.875rem; } blockquote footer::before { content: "— "; } .skip-link { background-color: #fff; } .usa-alert { color: #333; } .usa-alert__heading { color: #333; font-size: 1.125rem; font-weight: bold; margin-top: 0.25rem; margin-bottom: 0; } .usa-alert__heading:after { display: none; } .usa-alert__heading + .field--name-field-message { margin-top: 0.25rem; } .usa-alert__body { font-size: 0.875rem; } .usa-alert__body p { margin-top: 0; margin-bottom: 0; } .dropdown-toggle { display: flex; align-items: center; } .dropdown-toggle:after { display: block; width: 10px; height: 10px; margin-left: 8px; border: 0; background: transparent url("../img/angle-arrow-down.svg") no-repeat; background-position: center; background-size: contain; content: ""; } .hero--inverse { background: linear-gradient(135deg, #5161ac 0%, #0083BE 50%, #003F72 100%); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } @media all and (min-width: 40em) { .hero--inverse { padding-top: 80px; padding-bottom: 48px; } } @media all and (min-width: 64em) { .hero--inverse { padding-top: 100px; padding-bottom: 60px; } } .hero--inverse:before { background: url("../img/th-waves-inverse.png") top left no-repeat; } .hero--inverse .hero__title { margin-top: 0; color: #fff; } .hero--inverse .hero__title::after { display: none; } .hero--inverse .hero__lead { max-width: 32.5rem; color: #fff; font-size: 1.125rem; font-weight: normal; } .usa-modal { display: none; } .usa-js-modal--active .usa-modal { display: inline-block; } .usa-modal-close { position: absolute; top: 0; right: 0; width: auto; margin: 1.6rem; padding: 5px; border: 0; border-radius: 50%; background-color: #0071BB; font-size: 0.75rem; line-height: 0; z-index: 9; } @media all and (max-width: 29.99em) { .usa-modal-close { margin: 1rem; } } .usa-modal-close path { stroke: #fff; } .usa-modal-body { padding: 0 9em 2em; } @media all and (max-width: 63.99em) { .usa-modal-body { padding: 0 2rem 2em; } } @media all and (min-width: 64em) { .usa-modal-large { width: 95vw; max-width: 62.5em; } } @media all and (max-width: 29.99em) { .usa-modal-overlay { padding-right: 0; padding-left: 0; } } .usa-modal--multi-language .usa-modal__content { padding: 3.75rem 1.25rem; } .usa-modal--multi-language .usa-modal__main { max-width: 38.4375rem; padding: 0; } .usa-modal--multi-language .usa-modal__heading { margin-bottom: 1rem; font-family: "myriad-pro", Arial, sans-serif; font-size: 2.125rem; text-align: center; } @media all and (max-width: 29.99em) { .usa-modal--multi-language .usa-modal__heading { text-align: left; } } .usa-modal--multi-language .usa-modal__heading:after { display: none; } .usa-modal--multi-language .usa-modal__desc { margin-top: 0; margin-bottom: 2.5rem; text-align: center; } @media all and (max-width: 29.99em) { .usa-modal--multi-language .usa-modal__desc { text-align: left; } } .usa-modal--multi-language .usa-modal__language-list { margin: 0; padding: 0; } .usa-modal--multi-language .usa-modal__language-item { margin-bottom: 1rem; list-style: none; } .usa-modal--multi-language .usa-modal__language-item a { text-decoration: underline; } .usa-modal--multi-language .usa-modal__language-item .external-link { display: inline-block; } .usa-modal--multi-language .usa-modal__language-item .external-link:after { position: relative; top: 2px; display: inline-block; width: 16px; height: 16px; margin-left: 6px; background: url("../img/external-link-2.svg") center center; background-repeat: no-repeat; background-size: contain; content: ""; } .usa-modal--multi-language .usa-modal__close { position: absolute; top: 30px; right: 30px; margin: 0; } .usa-modal--multi-language .usa-modal__close:after { display: block; width: 0.875rem; height: 0.875rem; background: url("../img/close-alt-blue-60v.svg") center center; background-repeat: no-repeat; background-size: cover; content: ""; } .nav-tabs { margin-top: 0; background-color: #003F72; } .nav-tabs .nav-item { margin-right: 2px; } .nav-tabs .nav-link { padding: 10px 15px; background-color: #0071BB; color: #fff; font-size: 0.875rem; text-decoration: none; text-transform: uppercase; } .pager { text-align: center; } @media all and (max-width: 63.99em) { .usa-navbar { border-bottom-width: 0; } } .slick-slider { position: relative; padding-right: 30px; padding-left: 30px; } .slick-slider .slick-arrow { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; margin-top: -12px; border: 0; background: url("../img/angle-left-solid.svg") center no-repeat; background-size: contain; text-indent: -999em; overflow: hidden; z-index: 9; } .slick-slider .slick-next { right: 0; left: auto; background-image: url("../img/angle-right-solid.svg"); } .slick-slider .slick-slide { min-height: 100px; margin: 0 10px; padding: 15px 10px; border: 1px solid #D9D9D9; background-color: #fff; text-align: center; } .block-facilitylocatorbanner { display: flex; flex-direction: column; justify-content: center; min-height: 400px; margin-bottom: 40px; padding: 40px; border-radius: 8px; background: #0083BE url("../img/bg-facility-locator-banner.jpg"); background-size: cover; color: #fff; text-align: center; box-shadow: 0 4px 10px -4px #212121; } @media all and (max-width: 29.99em) { .block-facilitylocatorbanner { width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); border-radius: 0; } } @media all and (max-width: 29.99em) and (min-width: 75em) { .block-facilitylocatorbanner { width: 75rem; margin-right: calc(50% - 37.5rem); margin-left: calc(50% - 37.5rem); } } .block-facilitylocatorbanner h2 { display: flex; flex-direction: column; color: #fff; font-size: 1.5rem; font-weight: bold; } .block-facilitylocatorbanner h2::before { content: url("../img/icon-location.svg"); } .block-facilitylocatorbanner h2::after { display: none; } .block-facilitylocatorbanner .facility-locator-search-form { width: 100%; max-width: 500px; margin: 40px auto 20px; } @media all and (max-width: 54.99em) { .block-facilitylocatorbanner .facility-locator-search-form { margin-top: 32px; } } .block-facilitylocatorbanner .facility-locator-search-form input { padding-right: 60px; } .block-facilitylocatorbanner .facility-locator-search-form input:placeholder-shown { text-overflow: ellipsis; } .field:has(.block-facilitylocatorbanner) { width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding-right: 20px; padding-left: 20px; } @media all and (min-width: 75em) { .field:has(.block-facilitylocatorbanner) { width: 75rem; margin-right: calc(50% - 37.5rem); margin-left: calc(50% - 37.5rem); } } @media all and (min-width: 75em) { .field:has(.block-facilitylocatorbanner) { padding-right: 2rem; padding-left: 2rem; } } .additional-items-wrapper .occ-accordion__button, .additional-items-wrapper .usa-accordion__button { width: auto; padding-right: 3rem; background-color: transparent; background-image: url("../img/chevron-down-blue.svg"); background-size: 1rem; } .additional-items-wrapper .occ-accordion__button:hover, .additional-items-wrapper .usa-accordion__button:hover, .additional-items-wrapper .occ-accordion__button:focus, .additional-items-wrapper .usa-accordion__button:focus { background-color: #0071BB; background-image: url("../img/chevron-down-white.svg"); box-shadow: inset 0 0 0 2px #0071BB; } .additional-items-wrapper [aria-expanded=true].occ-accordion__button, .additional-items-wrapper [aria-expanded=true].usa-accordion__button { background-image: url("../img/chevron-up-blue.svg"); } .additional-items-wrapper [aria-expanded=true].occ-accordion__button:hover, .additional-items-wrapper [aria-expanded=true].usa-accordion__button:hover, .additional-items-wrapper [aria-expanded=true].occ-accordion__button:focus, .additional-items-wrapper [aria-expanded=true].usa-accordion__button:focus { background-image: url("../img/chevron-up-white.svg"); } .additional-items-wrapper { text-align: center; } .additional-items-wrapper .occ-accordion__button { background-repeat: no-repeat; background-position: right 1.25rem center; } .additional-items-wrapper .usa-accordion__content { padding: 0; background-color: transparent; text-align: left; } .additional-items-wrapper .usa-accordion__content[hidden] { display: none; } .occ-programs-nav { position: relative; margin: 0 -32px 0 0; padding: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); list-style: none; z-index: 500; } @media all and (max-width: 63.99em) { .occ-programs-nav { margin-right: 0; border-top: 1px solid #D9D9D9; } } .occ-programs-nav .dropdown-toggle { position: relative; width: 100%; text-decoration: none; z-index: 3; } .occ-programs-nav .dropdown-toggle::after { width: 15px; height: 11px; background-image: url("../img/icons/menu.svg"); } .usa-header--basic .occ-programs-nav .dropdown-toggle:hover::after, .usa-header--basic .occ-programs-nav .dropdown-toggle:active::after, .usa-header--basic .occ-programs-nav .dropdown-toggle:focus::after { display: block; } .occ-programs-nav .dropdown-menu { min-width: 320px; max-width: 500px; padding: 0; border-radius: 0; z-index: 99; } @media all and (max-width: 63.99em) { .occ-programs-nav .dropdown-menu { min-width: 0; transform: translate3d(0, 64px, 0) !important; } } .occ-programs-nav .cc-program-item { display: block; padding: 16px 14px; border-bottom: 1px solid #D9D9D9; line-height: 1.4; text-decoration: none; } .occ-programs-nav .cc-program-item:hover { background-color: #F7F9F4; text-decoration: none; } .occ-programs-nav .cc-program-item img { max-width: 100%; height: 1.75rem; margin-bottom: 0; } .occ-programs-nav .cc-program-item img:hover { transition: none; opacity: 1; } .occ-programs-nav .cc-program-item p { margin-top: 0.3125rem; margin-bottom: 0; color: #333; font-family: "Arial", sans-serif; font-size: 0.75rem; line-height: 1rem; } .occ-programs-nav .cc-program-item--mhv img { height: 2.5rem; } @media all and (min-width: 64em) { .occ-programs-nav > .show:after { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); content: ""; z-index: 2; } } .occ-programs-nav > .show .dropdown-toggle::after { background-image: url("../img/close-white-alt.svg"); color: #E31C3D; } .block-occ-video-about { display: flex; flex-wrap: wrap; } @media all and (min-width: 40em) { .block-occ-video-about { flex-wrap: nowrap; padding: 1.25rem 1rem; border: 0.0625rem solid #D9D9D9; } } .block-occ-video-about .video { order: 1; width: 100%; } @media all and (min-width: 40em) { .block-occ-video-about .video { order: 0; width: 40%; margin-top: 1.25rem; } } @media all and (min-width: 64em) { .block-occ-video-about .video { margin-top: 0; } } .block-occ-video-about .video .embed-responsive { margin-right: 0; margin-bottom: 0; } @media all and (min-width: 40em) { .block-occ-video-about .content { width: 60%; padding: 0 1.75rem; } } .block-views-blockblog-blocks-vhrc-articles { margin-right: -2rem; margin-left: -2rem; padding-top: 24px; padding-right: 2rem; padding-left: 2rem; background-color: #F7F9F4; } @media all and (max-width: 39.99em) { .block-views-blockblog-blocks-vhrc-articles { margin-right: -1rem; margin-left: -1rem; padding-right: 1rem; padding-left: 1rem; } } .block-views-blockblog-blocks-vhrc-articles > h2 { text-align: center; } .block-views-blockblog-blocks-vhrc-articles > h2:after { margin-right: auto; margin-left: auto; } .block-views-blockblog-blocks-vhrc-articles .usa-card { margin-bottom: 0; } .block-views-blockblog-blocks-vhrc-articles .usa-card:last-child { margin-bottom: 0; } .block-views-blockblog-blocks-vhrc-articles .usa-card__header { width: 100%; padding-right: 16px; padding-left: 16px; } .block-views-blockblog-blocks-vhrc-articles .usa-card__meta { color: #D9D9D9; font-weight: normal; } .block-views-blockblog-blocks-vhrc-articles .usa-card--featured .usa-card__container { height: 184px; } .block-views-blockblog-blocks-vhrc-articles .usa-card--featured .usa-card__heading { font-size: 1.125rem; font-weight: 600; } @media all and (min-width: 40em) { .block-views-blockblog-blocks-vhrc-articles .usa-accordion .usa-card-group, .block-views-blockblog-blocks-vhrc-articles .view-content { grid-template-columns: 1fr 1fr; } } @media all and (min-width: 64em) { .block-views-blockblog-blocks-vhrc-articles .usa-accordion .usa-card-group, .block-views-blockblog-blocks-vhrc-articles .view-content { grid-template-columns: 1fr 1fr 1fr; grid-gap: 2rem; } } .block-views-blockblog-blocks-vhrc-articles .view-content { display: grid; padding-bottom: 40px; grid-gap: 1.5rem; } @media all and (min-width: 40em) { .block-views-blockblog-blocks-vhrc-articles .view-content > .views-row:first-child, .block-views-blockblog-blocks-vhrc-articles .view-content > .usa-card:first-child { grid-column: span 2; } } @media all and (min-width: 64em) { .block-views-blockblog-blocks-vhrc-articles .view-content > .views-row:first-child, .block-views-blockblog-blocks-vhrc-articles .view-content > .usa-card:first-child { grid-row: span 2; } } @media all and (min-width: 40em) { .block-views-blockblog-blocks-vhrc-articles .view-content > .views-row:first-child .usa-card__container, .block-views-blockblog-blocks-vhrc-articles .view-content > .usa-card:first-child .usa-card__container { height: auto; padding-top: 40px; padding-bottom: 40px; aspect-ratio: 16/9; } } @media all and (min-width: 64em) { .block-views-blockblog-blocks-vhrc-articles .view-content > .views-row:first-child .usa-card__container, .block-views-blockblog-blocks-vhrc-articles .view-content > .usa-card:first-child .usa-card__container { height: 100%; aspect-ratio: auto; } } .block-views-blockblog-blocks-vhrc-articles .view-content > .views-row:first-child .usa-card__img img, .block-views-blockblog-blocks-vhrc-articles .view-content > .usa-card:first-child .usa-card__img img { aspect-ratio: 16/9; } @media all and (min-width: 40em) { .block-views-blockblog-blocks-vhrc-articles .view-content > .views-row:first-child .usa-card__header, .block-views-blockblog-blocks-vhrc-articles .view-content > .usa-card:first-child .usa-card__header { padding-right: 40px; padding-left: 40px; } } @media all and (min-width: 40em) { .block-views-blockblog-blocks-vhrc-articles .view-content > .views-row:first-child .usa-card__heading, .block-views-blockblog-blocks-vhrc-articles .view-content > .usa-card:first-child .usa-card__heading { font-size: 1.5rem; } } .block-views-blockblog-blocks-vhrc-articles .usa-accordion { grid-column: 1/-1; } .block-views-blockblog-blocks-vhrc-articles .usa-accordion .usa-card-group { display: grid; margin: 0 0 1.5rem; grid-gap: 1.5rem; } .block-views-blockblog-blocks-vhrc-articles .usa-accordion .usa-card-group[hidden] { display: none; } .region-bottom .block-views-blockblog-blocks-vhrc-articles { width: 100%; margin: 0; padding: 0; border: 0; } .region-bottom .block-views-blockblog-blocks-vhrc-articles > h2 { margin-bottom: 10px; font-size: 3.9375rem; font-weight: lighter; } @media all and (max-width: 29.99em) { .region-bottom .block-views-blockblog-blocks-vhrc-articles > h2 { margin-bottom: 1rem; font-size: 2.125rem; } } .paragraph--type--general-content .block-views-blockblog-blocks-vhrc-articles { width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding-right: 20px; padding-left: 20px; } @media all and (min-width: 75em) { .paragraph--type--general-content .block-views-blockblog-blocks-vhrc-articles { width: 75rem; margin-right: calc(50% - 37.5rem); margin-left: calc(50% - 37.5rem); } } @media all and (min-width: 75em) { .paragraph--type--general-content .block-views-blockblog-blocks-vhrc-articles { padding-right: 2rem; padding-left: 2rem; } } .block-views-blockwhats-new-block-latest-posts { height: 241px; margin-bottom: 2.5rem; background: #fff url("../img/bg-news.png"); overflow-y: hidden; } .block-views-blockwhats-new-block-latest-posts h2 { padding-top: 2.5rem; text-align: center; } .block-views-blockwhats-new-block-latest-posts h2:after { display: none; } .block-views-blockwhats-new-block-latest-posts .view-content { opacity: 0; transition: opacity 0.25s ease-in; } .block-views-blockwhats-new-block-latest-posts .view-content.slick-initialized { opacity: 1; } .block-views-blockwhats-new-block-latest-posts .views-row { width: 250px; height: 100px; } .block-views-blockwhats-new-block-latest-posts .views-field-field-publisher { color: #333; font-size: 0.875rem; line-height: 20px; } .block-views-blockwhats-new-block-latest-posts .views-field-field-publisher:after { width: 50px; margin: 4px auto 8px; } .block-views-blockwhats-new-block-latest-posts .views-field-title { font-family: "myriad-pro", Arial, sans-serif; font-size: 0.875rem; font-weight: bold; } .block-views-blockwhats-new-block-latest-posts .views-field-title a { color: #003F72; text-decoration: none; } .block-views-blockwhats-new-block-latest-posts .views-field-title a:hover, .block-views-blockwhats-new-block-latest-posts .views-field-title a:focus, .block-views-blockwhats-new-block-latest-posts .views-field-title a:active { text-decoration: underline; } .va-header { background-color: #112E51; } .va-header .grid-row { align-items: center; padding: 16px 0; } .va-header__logo-wrapper { flex: 1 0 164px; } .va-header__logo { display: block; width: 100%; max-width: 264px; height: auto; } .va-header .usa-search .usa-input { margin-top: 0; } .va-header .usa-search .usa-button { height: 2.5rem; } .va-header .va-header__nav { display: flex; flex-basis: 225px; flex-grow: 1; flex-shrink: 0; align-items: center; justify-content: end; min-height: 50px; } .va-header .va-header__nav .va-dropdown { position: relative; } .va-header .va-header__nav .va-dropdown-trigger, .va-header .va-header__nav .va-nav-link { display: flex; align-items: center; margin-left: 4px; padding: 8px; border: 0; background-color: transparent; color: #fff; font-weight: 700; } .va-header .va-header__nav .va-dropdown-trigger:hover, .va-header .va-header__nav .va-nav-link:hover { background-color: #003F72; } .va-header .va-header__nav .va-dropdown-trigger:after, .va-header .va-header__nav .va-nav-link:after { display: block; width: 10px; height: 10px; margin-left: 8px; background: transparent url("../img/angle-arrow-down-white.svg") no-repeat; background-position: center; background-size: contain; content: ""; } .va-header .va-header__nav .va-dropdown-trigger span, .va-header .va-header__nav .va-nav-link span { display: flex; align-items: center; white-space: nowrap; } .va-header .va-header__nav .va-dropdown-trigger svg, .va-header .va-header__nav .va-nav-link svg { width: 16px; height: 16px; margin-right: 4px; } .va-header .va-header__nav .va-dropdown-panel { position: absolute; right: 0; left: auto; width: 300px; min-width: 100%; margin: 0; padding: 8px; border-radius: 0; background: #fff; color: #212121; box-shadow: 0 4px 10px -4px #212121; z-index: 600; } .va-header .va-header__nav .va-dropdown.show .va-dropdown-trigger, .va-header .va-header__nav .va-dropdown.show .va-nav-link { background: #fff; color: #212121; } .va-header .va-header__nav .va-dropdown.show .va-dropdown-trigger svg path, .va-header .va-header__nav .va-dropdown.show .va-nav-link svg path { fill: #212121; } .va-header .va-header__nav .va-dropdown.show .va-dropdown-trigger:after, .va-header .va-header__nav .va-dropdown.show .va-nav-link:after { background-image: url("../img/angle-arrow-down.svg"); } .va-header .va-header__nav .va-nav-link:after { display: none; } .usa-banner__inner { max-width: 75rem; } .usa-banner__content { max-width: 75rem; } .usa-banner__button::after, .usa-banner__header-action::after { mask-image: url("../img/chevron.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: 1.31282ex 0.8ex; } .sign-in-nav { color: #fff; white-space: nowrap; } .sign-in-links { flex-shrink: 0; } .sign-in-link { margin-right: 0; margin-left: 1rem; background-color: #0071BB; } .new-modal-design h2, .new-modal-design h1 { color: #333; font-family: merriweather, "Times New Roman", serif; font-weight: 900; } .new-modal-design h2:after, .new-modal-design h1:after { display: none; } .new-modal-design h1 { font-size: 2.5rem; } @media all and (max-width: 29.99em) { .new-modal-design h1 { font-size: 1.875rem; } } .new-modal-design h2 { font-size: 1.875rem; } @media all and (max-width: 29.99em) { .new-modal-design h2 { font-size: 1.5rem; } } .new-modal-design .logo { padding: 1em 0; border-bottom: solid 2px #E7E7E7; text-align: center; } .new-modal-design .va-header-logo { display: block; width: 100%; max-width: 264px; height: auto; } .new-modal-design .usa-button { width: 100%; margin-bottom: 0.5rem; } .new-modal-design .usa-button svg { height: 1rem; } .new-modal-design .idme-button { background: #2e8540; } .new-modal-design .dslogon-button { background: #003F72; } .new-modal-design .mvh-button { background: #0071BB; } .new-modal-design .create-account a { display: block; padding: 16px 0; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; font-weight: bold; } .new-modal-design .create-account a:before { display: inline-block; margin-right: 1rem; padding: 1rem; border-radius: 50%; background: #0071BB url("../img/chevron-right-white.svg") center center no-repeat; background-size: 0.5rem; font-size: 0.75rem; content: ""; vertical-align: middle; } .new-modal-design .help-info { padding: 2em 0; } .va-crisis-line-container { max-width: 75rem; position: relative; margin: 0 auto; } .va-crisis-line-button { display: block; width: 100%; margin: 0; padding: 0; transform: translateY(0.5rem); transition-duration: 0.25s; transition-property: background-color; transition-timing-function: ease-in-out; border: 0; border-radius: 0; background-color: #b51d09; color: #fff; font-size: 1rem; font-weight: 400; text-decoration: none; } @media all and (min-width: 64em) { .va-crisis-line-button { position: absolute; right: 0; bottom: -4px; width: auto; border-radius: 0 0 3px 3px; box-shadow: 0 2px 5px #000; } .va-crisis-line-button:hover .va-crisis-line-icon { background-color: #b51d09; } } .va-crisis-line-button:hover { background-color: #8b1303; text-decoration: none; } .va-crisis-line-inner { display: flex; align-items: center; justify-content: center; margin: auto; } @media all and (min-width: 64em) { .va-crisis-line-inner { justify-content: space-between; text-align: left; } } .va-crisis-line-icon { width: 40px; height: 34px; padding: 5px 16px; transition-duration: 0.25s; transition-property: background-color; transition-timing-function: ease-in-out; background: url("../img/icon-vcl-logo-white.svg") no-repeat right 29%; background-position: 8px 8px; background-size: 28px auto; } @media all and (min-width: 64em) { .va-crisis-line-icon { border-bottom-left-radius: 3px; background-color: #8b1303; background-position: 6.4px 8px; } } .va-crisis-line-text { padding: 5px; } .va-crisis-line-arrow { width: 29px; height: 13px; padding-right: 8px; padding-left: 8px; } .usa-nav-container { position: relative; background-color: #0083BE; background-image: linear-gradient(#0083BE, #003F72); box-shadow: 0 5px 8px -3px rgba(0, 0, 0, 0.5); } .usa-header--basic .usa-nav-container { align-items: stretch; } .usa-nav-container .region-header { display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 0.625rem; padding-bottom: 0.625rem; } .usa-nav-container .usa-logo { display: flex; flex-direction: column; justify-content: center; margin-top: 0rem; margin-bottom: 0rem; } .usa-nav-container .usa-logo .logo-img img { max-height: 20px; } @media all and (min-width: 64em) { .usa-nav-container .usa-logo .logo-img img { max-height: 40px; } } .usa-header--basic .usa-nav { justify-content: flex-end; padding-bottom: 0; padding-left: 2.8125rem; } @media all and (max-width: 63.99em) { .usa-header--basic .usa-nav { background-color: #0083BE; background-image: -webkit-gradient(linear, left top, left bottom, from(#0083BE), to(#003F72)); background-image: -webkit-linear-gradient(to bottom, #0083BE, #003F72); background-image: -moz-linear-gradient(to bottom, #0083BE, #003F72); background-image: -ms-linear-gradient(to bottom, #0083BE, #003F72); background-image: -o-linear-gradient(to bottom, #0083BE, #003F72); background-image: linear-gradient(to bottom, #0083BE, #003F72); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#0083BE", endColorStr="#003F72"); justify-content: flex-start; width: 80%; max-width: 400px; padding: 1rem 0; } .user-logged-in .usa-header--basic .usa-nav { margin-top: 37px; } } .usa-header--basic .usa-nav__close { margin: 0 0 0 auto; } .usa-nav__submenu .usa-nav__submenu-item a { display: block; padding-top: 1rem; padding-bottom: 1rem; color: #fff; } @media all and (min-width: 64em) { .usa-nav__submenu .usa-nav__submenu-item a { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 0.5rem; } } .usa-nav__submenu .usa-nav__submenu-item a:not(.usa-button.usa-current) { color: #fff; } @media all and (min-width: 64em) { .usa-nav__submenu .usa-nav__submenu-item a:hover, .usa-nav__submenu .usa-nav__submenu-item a:focus, .usa-nav__submenu .usa-nav__submenu-item a:active { padding-top: 0.5rem; padding-bottom: 0.5rem; } } .usa-overlay.is-visible { opacity: 0.8; } @media all and (max-width: 63.99em) { .usa-nav__primary { margin-top: 1rem; } } .usa-nav__primary > .usa-nav__primary-item { font-size: 0.875rem; } @media all and (max-width: 54.99em) { .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button.usa-current) { color: #fff; } } .usa-nav__primary > .usa-nav__primary-item > button { background-image: url("../img/angle-arrow-down-white.svg"); background-position: right 1rem top 50%; background-size: 0.5rem; } .usa-nav__primary > .usa-nav__primary-item > button:hover, .usa-nav__primary > .usa-nav__primary-item > button:focus, .usa-nav__primary > .usa-nav__primary-item > button:active { background-image: url("../img/angle-arrow-down-white.svg"); } .usa-nav__primary > .usa-nav__primary-item > button[aria-expanded=true] { background-image: url("../img/angle-arrow-up-white.svg"); } .usa-nav__primary > .usa-nav__primary-item > .usa-current:after { display: none; } .usa-menu-btn { min-width: 54px; border-left: 1px solid rgba(255, 255, 255, 0.1); background: url("../img/icons/menu.svg") center no-repeat; background-color: transparent; background-size: 18px; text-indent: -9999rem; overflow: hidden; } .usa-header + .usa-section, .usa-header + main { border-top-width: 0; } .usa-section { padding-top: 0; padding-bottom: 0; } .usa-section > .grid-container { background-color: #fff; } .region.region-content { padding-bottom: 1.875rem; } .usa-footer__secondary-section, .usa-footer__primary-section { background-color: transparent; color: #fff; } .usa-footer__secondary-section a, .usa-footer__primary-section a { color: #fff; font-size: 0.875rem; } .usa-footer__secondary-section a:hover, .usa-footer__primary-section a:hover, .usa-footer__secondary-section a:active, .usa-footer__primary-section a:active, .usa-footer__secondary-section a:focus, .usa-footer__primary-section a:focus { color: #CCC; } .usa-footer__secondary-section a:visited, .usa-footer__primary-section a:visited { color: #fff; } .usa-footer > h2 { display: none; } .usa-list .usa-footer__secondary-link { margin-bottom: 0; } .usa-footer__return-to-top { background-color: #fff; text-align: right; } .usa-footer__primary-content { margin-bottom: 1rem; } .usa-footer__primary-link { color: #fff; } .usa-footer--big .usa-footer__primary-link { margin-bottom: 1rem; } .usa-footer__secondary-section .menu { display: flex; flex-direction: column; flex-wrap: wrap; padding-left: 0; list-style: none; } @media all and (min-width: 64em) { .usa-footer__secondary-section .menu { flex-direction: row; } } .usa-footer__secondary-section .menu > li { display: block; margin-bottom: 0.5rem; } .usa-footer__secondary-section .menu > li:not(:last-child) { margin-right: 0.5rem; padding-right: 0.5rem; } @media all and (min-width: 64em) { .usa-footer__secondary-section .menu > li:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.25); } } .usa-footer__secondary-link > span { display: block; margin-top: 1rem; font-weight: bold; } .usa-footer__logo { margin-top: 0.5rem; margin-bottom: 0.5rem; } .usa-footer__logo-img { max-width: none; max-height: 3.125rem; } .usa-footer__logo-heading a { font-size: inherit; text-decoration: none; } .usa-footer__logo-heading a:active, .usa-footer__logo-heading a:hover, .usa-footer__logo-heading a:focus { color: #CCC; text-decoration: none; } .usa-footer__contact-links { margin: 0; padding: 0; } .usa-footer__social-links .usa-social-link { background-repeat: no-repeat; background-position: center center; background-size: auto 1.5rem; } .usa-footer__social-links .usa-social-link:hover, .usa-footer__social-links .usa-social-link:focus, .usa-footer__social-links .usa-social-link:active { background-color: rgba(255, 255, 255, 0.1); } .usa-footer__social-links .usa-social-link span { position: absolute; left: -999em; } .usa-footer__social-links .usa-social-link--facebook { background-image: url("../img/social-icons/facebook25-white.svg"); } .usa-footer__social-links .usa-social-link--twitter { background-image: url("../img/social-icons/twitter16-white.svg"); } .usa-footer__social-links .usa-social-link--youtube { background-image: url("../img/social-icons/youtube15-white.svg"); } .usa-footer__social-links .usa-social-link--rss { background-image: url("../img/social-icons/rss25-white.svg"); } .field--name-field-cta-link { margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.125rem; } .field--name-field-cta-link a { display: inline-block; font-weight: bold; text-decoration: none; } .field--name-field-cta-link a:after { position: relative; left: 0.125rem; display: inline-block; width: 0.75em; height: 0.75em; transition: left 0.1s ease-in; background: url("../img/chevron-right-blue.svg") center center; background-repeat: no-repeat; background-size: contain; content: ""; } .field--name-field-cta-link a:hover:after, .field--name-field-cta-link a:focus:after, .field--name-field-cta-link a:active:after { left: 0.3125rem; } .usa-card-group .usa-card { margin-bottom: 1rem; } .usa-card-group .usa-card:last-child { margin-bottom: 1rem; } .usa-card__container { border-width: 0; border-radius: 0; background-color: rgba(223, 234, 240, 0.5); color: #333; font-size: 1rem; } .usa-card__container:hover .usa-card__overlay, .usa-card__container:focus .usa-card__overlay, .usa-card__container:active .usa-card__overlay { opacity: 1; z-index: 1; } .usa-card__container:hover .usa-card__overlay .title:before, .usa-card__container:hover .usa-card__overlay .usa-card__language-overlay:before, .usa-card__container:focus .usa-card__overlay .title:before, .usa-card__container:focus .usa-card__overlay .usa-card__language-overlay:before, .usa-card__container:active .usa-card__overlay .title:before, .usa-card__container:active .usa-card__overlay .usa-card__language-overlay:before { transform: translateY(0); opacity: 1; } .usa-card__heading { font-family: "myriad-pro", Arial, sans-serif; } .usa-card__heading:after { display: none; } .usa-card__heading > a { color: inherit; text-decoration: none; } .usa-card__heading > a:hover, .usa-card__heading > a:focus, .usa-card__heading > a:active { color: #0083BE; } .usa-card__media { flex-grow: 1; } .usa-card__media + .usa-card__header { padding: 1rem 1.5rem; } @media all and (max-width: 29.99em) { .usa-card__media + .usa-card__header { padding: 1rem; } } @media all and (max-width: 29.99em) { .usa-card__media--inset { padding: 1rem 1rem 0; } } .usa-card__overlay { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.5rem; transition: 0.1s ease-in; background-color: #003F72; color: #fff; opacity: 0; overflow: hidden; z-index: -1; } .usa-card__overlay .title { margin-top: 0.5rem; margin-bottom: 0.5rem; color: #fff; font-size: 1.5rem; text-align: center; } .usa-card__overlay .title:before { display: block; width: 1.25rem; height: 1.25rem; margin: 0.25rem auto; transform: translateY(0.25rem); transition: 0.25s ease-in; background: url("../img/icons/download-icon.png") center center; background-repeat: no-repeat; background-size: contain; content: ""; opacity: 0; } .usa-card__overlay .description { text-align: center; } .usa-card__overlay .description p, .usa-card__overlay .description ul { margin-top: 0; } .usa-card__overlay .description ul, .usa-card__overlay .description ol { text-align: left; } .usa-card__overlay .filesize { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; } .usa-card__footer .field--name-field-cta-link { margin-bottom: 0; } .usa-card__meta { display: flex; margin-left: -0.5rem; padding-left: 0; list-style: none; } .usa-card__meta > li { padding: 0 0.5rem; } .usa-card__meta > li:not(:last-child) { border-right: 1px solid #CCC; } .usa-card-group { flex-direction: row; } @media all and (max-width: 29.99em) { .paragraph--type--card-download .usa-card__header { padding-top: 1.5rem; padding-right: 1rem; } } .paragraph--type--card-download .usa-card__container { text-decoration: none; } .paragraph--type--card-download .usa-card__header { display: flex; flex-wrap: wrap; } .paragraph--type--card-download .usa-card__header .filetype { display: inline-block; width: 1.75rem; height: 1.75rem; margin-right: 0.5rem; background-image: url("../img/icons/icon-file.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; } .paragraph--type--card-download .usa-card__header .filetype.application-pdf { background-image: url("../img/icons/icon-file-pdf.svg"); } .paragraph--type--card-download .usa-card__header .filetype.application-zip { background-image: url("../img/icons/icon-file-zip.svg"); } .paragraph--type--card-download .usa-card__header .filetype[class*=image-] { background-image: url("../img/icons/icon-file-img.svg"); } .paragraph--type--card-download .usa-card__header .filetype[class$=document] { background-image: url("../img/icons/icon-file-doc.svg"); } .paragraph--type--card-download .usa-card__header .usa-card__file-type-wrap { display: flex; flex-wrap: nowrap; } .paragraph--type--card-download .usa-card__header .usa-card__file-type-wrap .filetype { flex-shrink: 0; } .paragraph--type--card-download .usa-card__heading { max-width: 11.5625rem; min-height: 2.25rem; font-size: 1rem; text-decoration: underline; } @media all and (max-width: 29.99em) { .paragraph--type--card-download .usa-card__heading { max-width: 16.5625rem; font-size: 0.75rem; } } .paragraph--type--card-download .usa-card__language-notation { display: flex; flex-basis: 100%; align-items: center; color: #003F72; font-size: 0.875rem; line-height: 1.1; text-decoration: none; } @media all and (max-width: 29.99em) { .paragraph--type--card-download .usa-card__language-notation { font-size: 0.625rem; } .paragraph--type--card-download .usa-card__language-notation:before { width: 0.75rem; height: 0.75rem; margin-right: 0.25rem; } } .paragraph--type--card-download .usa-card__language-notation:before { display: block; width: 1rem; height: 1rem; margin-right: 0.5rem; background: url("../img/icons/language.svg") center center; background-repeat: no-repeat; background-size: contain; content: ""; } .paragraph--type--card-download .usa-card__language-overlay { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 1.5rem; text-align: center; } .paragraph--type--card-download .usa-card__language-overlay:before { display: block; width: 1.75rem; height: 1.75rem; margin-bottom: 0.75rem; transform: translateY(0.25rem); transition: 0.25s ease-in; background: url("../img/icons/language.svg") center center; background-repeat: no-repeat; background-size: contain; opacity: 0; content: ""; } .usa-card__video { box-shadow: 0 4px 10px -4px #212121; } .usa-card .usa-card__video { box-shadow: none; } .usa-card--blog:last-child { margin-bottom: 1rem; } .usa-card--blog a { text-decoration: none; } .usa-card--blog .usa-card__container { flex-direction: row; margin-right: 0; padding: 0.9375rem 0; border: 0.0625rem solid #D9D9D9; background-color: #fff; } @media all and (min-width: 40em) { .usa-card--blog .usa-card__container { padding: 1.25rem 0; } } .usa-card--blog .usa-card__media { position: relative; left: -0.5rem; flex-grow: 0; border: 1px solid #E7E7E7; box-shadow: 0 5px 8px -3px rgba(33, 33, 33, 0.15); } .usa-card--blog .usa-card__img { width: 5.625rem; height: 4.375rem; border-radius: 0; } @media all and (min-width: 30em) { .usa-card--blog .usa-card__img { width: 12.5rem; height: 7.5rem; } } @media all and (min-width: 64em) { .usa-card--blog .usa-card__img { width: 15.625rem; height: 9.375rem; } } .usa-card--blog .usa-card__img a img { transition: transform 0.1s ease-in; } .usa-card--blog .usa-card__img a:hover img, .usa-card--blog .usa-card__img a:focus img { transform: scale(1.05); } .usa-card--blog .usa-card__header { padding: 0 0.75rem; } @media all and (min-width: 40em) { .usa-card--blog .usa-card__header { padding-right: 1.25rem; padding-left: 1.25rem; } } .usa-card--blog .usa-card__header > :last-child { margin-top: 0.5rem; } .usa-card--blog .usa-card__header .category { margin-bottom: 0.25rem; color: #C64E06; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.0625rem; text-transform: uppercase; } .usa-card--blog .usa-card__header .category a { color: #C64E06; line-height: 1; } .usa-card--blog .usa-card__header .category a:hover, .usa-card--blog .usa-card__header .category a:focus { text-decoration: underline; } @media all and (max-width: 29.99em) { .usa-card--blog .usa-card__heading { font-size: 1rem; } } .usa-card--blog .usa-card__heading > a:hover, .usa-card--blog .usa-card__heading > a:focus, .usa-card--blog .usa-card__heading > a:active { color: inherit; text-decoration: underline; } @media all and (max-width: 29.99em) { .usa-card--blog .usa-card__meta { display: none; } } .usa-card--blog .usa-card__body { padding: 0 0.75rem; } @media all and (min-width: 40em) { .usa-card--blog .usa-card__body { padding-right: 1.25rem; padding-left: 1.25rem; } } .usa-card--featured .usa-card__container { align-items: flex-end; height: 12.5rem; margin-left: 0; background-color: #000; } @media all and (min-width: 30em) { .usa-card--featured .usa-card__container { height: 18.75rem; } } .usa-card--featured .usa-card__media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; box-shadow: none; } .usa-card--featured .usa-card__img { width: 100%; height: 100%; } .usa-card--featured .usa-card__img:after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75)); content: ""; pointer-events: none; } .usa-card--featured .usa-card__content { z-index: 1; } .usa-card--featured .usa-card__header .category { position: absolute; top: 1rem; left: 1.25rem; } .usa-card--featured .usa-card__header .category a { display: block; padding: 0.5rem 1rem; background-color: #C64E06; color: #fff; } .usa-card--featured .usa-card__heading { color: #fff; font-size: 1.125rem; font-weight: bold; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); } @media all and (min-width: 40em) { .usa-card--featured .usa-card__heading { font-size: 1.5rem; } } .usa-card--featured .usa-card__meta { color: #D9D9D9; } @media all and (max-width: 29.99em) { .usa-card--featured .usa-card__meta { display: flex; } } .paragraph--type--gallery { margin-top: 3.75rem; } .paragraph--type--gallery-sub { margin-top: 1.25rem; } .paragraph--type--gallery .paragraph--type--gallery-sub { margin-right: 0.3125rem; margin-left: 0.3125rem; } .paragraph--type--general-content { max-width: 50rem; margin-right: auto; margin-left: auto; } .paragraph--type--hero { margin-bottom: 0; border-bottom: 0.625rem solid #0083BE; border-radius: 0; background-image: url("../img/bg-news.png"); background-repeat: no-repeat; background-position: left bottom; background-size: cover; } @media all and (min-width: 40em) { .paragraph--type--hero { padding-top: 2rem; padding-bottom: 2rem; } } @media all and (min-width: 64em) { .paragraph--type--hero { min-height: 270px; padding-top: 4rem; padding-bottom: 4rem; } .path-frontpage .paragraph--type--hero { min-height: 350px; } } .paragraph--type--hero .title { color: #003F72; font-style: italic; } @media all and (max-width: 29.99em) { .paragraph--type--hero .title { font-size: 2.125rem; } } .paragraph--type--hero .title .small, .paragraph--type--hero .title small { color: #0083BE; } @media all and (min-width: 40em) { .paragraph--type--hero .title { min-height: 3.9375rem; } } .paragraph--type--hero .title:after { display: none; } @media all and (min-width: 40em) { .paragraph--type--hero .field--name-field-cta { display: flex; } } .paragraph--type--hero .field--name-field-cta .field__item { margin-bottom: 0.75rem; } @media all and (max-width: 39.99em) { .paragraph--type--hero .field--name-field-cta .usa-button + .usa-button { margin-top: 0.5rem; } } .paragraph--type--image-text-horz { flex-direction: row-reverse; align-items: stretch; padding-top: 1.875rem; padding-bottom: 1.875rem; } @media all and (min-width: 40em) { .paragraph--type--image-text-horz .content { padding-left: 1.875rem; } } .paragraph--type--image-text-horz .field--name-field-icon { display: inline-block; } .paragraph--type--image-text-horz .field--name-field-icon img { width: auto; height: 1.875rem; } .paragraph--type--image-text-horz .title { margin-top: 0.625rem; margin-bottom: 0.625rem; } .paragraph--type--image-text-horz .field--name-field-description, .paragraph--type--image-text-horz .description { color: #717171; } .paragraph--type--image-text-horz .image-wrapper { align-self: center; } .paragraph--type--image-text-horz .field--name-field-thumbnail > img { width: auto; min-width: 100%; height: auto; min-height: 100%; object-fit: contain; } .paragraph--type--image-text-horz:nth-of-type(even) { flex-direction: row; } @media all and (min-width: 40em) { .paragraph--type--image-text-horz:nth-of-type(even) .content { padding-right: 1.875rem; padding-left: 0; } } .paragraph--type--tab-group { margin-top: -10px; } .view-display-id-biography_list .view-content { display: flex; flex-direction: row; flex-wrap: wrap; } .view-display-id-biography_list .view-content > .views-row { width: 100%; padding-right: 0.5rem; padding-left: 0.5rem; } @media all and (min-width: 40em) { .view-display-id-biography_list .view-content > .views-row { width: 33.3333333333%; } } .card-bio { margin-bottom: 2.5rem; text-align: center; } @media all and (max-width: 63.99em) { .card-bio { font-size: 0.875rem; } } .card-bio__photo img { width: 9.375rem; height: 9.375rem; margin: auto; object-fit: cover; } .block-views-blockblog-blocks-block-blog-latest-thumbnails { margin-top: 2.5rem; padding-top: 2.5rem; } .block-views-blockblog-blocks-block-blog-latest-thumbnails h2 { text-align: center; } .block-views-blockblog-blocks-block-blog-latest-thumbnails h2:after { margin-right: auto; margin-left: auto; } .view-display-id-block_blog_latest_thumbnails { max-width: 50rem; margin-right: auto; margin-left: auto; } .view-blog-blocks .views-row { padding-top: 1rem; padding-bottom: 1rem; border-top: 0.0625rem solid #E7E7E7; } .view-blog-blocks .views-row a { text-decoration: none; } .view-blog-blocks .views-field-field-category { margin-bottom: 0.5rem; color: #C64E06; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.0625rem; text-transform: uppercase; } .view-blog-blocks .views-field-field-category a { color: #C64E06; } .view-blog-blocks .views-field-title .field-content { margin-top: 0; margin-bottom: 0.25rem; color: #003F72; font-size: 0.875rem; font-weight: 600; } .view-blog-blocks .views-field-title .field-content a { color: inherit; } .view-blog-blocks .views-field-title .field-content a:hover, .view-blog-blocks .views-field-title .field-content a:focus { text-decoration: underline; } .view-blog-blocks .views-field-title .field-content:after { display: none; } .view-blog-blocks .views-field-field-publisher, .view-blog-blocks .views-field-created { display: inline-block; } .view-blog-blocks .views-field-field-publisher + *, .view-blog-blocks .views-field-created + * { margin-left: 0.5rem; padding-left: 0.5rem; border-left: 0.0625rem solid #D9D9D9; } .view-display-id-block_featured_article .views-row, .view-display-id-block_featured_veterans_corner .views-row { padding-top: 0; padding-bottom: 0; border-top-width: 0; } .view-display-id-block_blog_latest_partners .views-row { padding: 0; border-top-width: 0; } .path-frontpage .region.region-content { padding-bottom: 0; } .path-frontpage .paragraph--type--image-text-horz { flex-direction: row-reverse; padding-top: 0; padding-bottom: 0; background: linear-gradient(#fff 70%, #F7F9F4); text-align: center; } .path-frontpage .paragraph--type--image-text-horz:nth-of-type(even) { flex-direction: row; } .path-frontpage .paragraph--type--image-text-horz .content-wrapper { align-self: center; padding-top: 1.875rem; padding-bottom: 1.875rem; } @media all and (min-width: 64em) { .path-frontpage .paragraph--type--image-text-horz .content-wrapper { width: 50%; } } @media all and (min-width: 40em) { .path-frontpage .paragraph--type--image-text-horz .content { max-width: 80%; margin-right: auto; margin-left: auto; } } .path-frontpage .paragraph--type--image-text-horz .title:after { margin-right: auto; margin-left: auto; } .path-frontpage .paragraph--type--image-text-horz .image-wrapper { position: relative; align-self: auto; } @media all and (min-width: 64em) { .path-frontpage .paragraph--type--image-text-horz .image-wrapper { width: 50%; } } @media all and (max-width: 63.99em) { .path-frontpage .paragraph--type--image-text-horz .image-wrapper { display: none; } } .path-frontpage .paragraph--type--image-text-horz .field--name-field-icon img[alt^=MyHealthEVet] { height: 3.4375rem; } .path-frontpage .paragraph--type--image-text-horz .field--name-field-thumbnail { position: absolute; top: 0; left: -2rem; width: 100%; height: 100%; overflow: hidden; } .region-content--4xx .content { position: relative; padding: 9.375rem 1rem; background: url("../img/bg-connected--fade.jpg") top left no-repeat; background-size: 100% auto; text-align: center; } .region-content--4xx .content:before { position: absolute; top: 0; left: 0; display: block; content: url("../img/occ-corner--top-left.svg"); } .region-content--4xx .title { margin-top: 0; margin-bottom: 0; } .region-content--4xx .title:after { display: none; } .region-content--4xx .usa-button { margin-top: 1.5rem; } .path-partners-atlas .paragraph--type--gallery .usa-card-group { justify-content: center; } #gallery-atlas-site-location-list { margin-top: 0; } @media all and (min-width: 40em) { #gallery-atlas-site-location-list .paragraph--type--card-standard { width: 50%; } } @media all and (min-width: 64em) { #gallery-atlas-site-location-list .paragraph--type--card-standard { width: 33.3333333333%; } } .blog-page__nav .nav { flex-wrap: nowrap; margin-top: 0; padding: 1.25rem 0; overflow-x: auto; } @media all and (max-width: 63.99em) { .blog-page__nav .nav { margin-right: -1rem; margin-left: -1rem; padding: 0.5rem 0; } } .blog-page__nav .nav__item { color: #CCC; font-family: "myriad-pro", Arial, sans-serif; font-size: 0.75rem; font-weight: 600; line-height: 0.875rem; text-transform: uppercase; } @media all and (min-width: 64em) { .blog-page__nav .nav__item { font-size: 0.875rem; } } .blog-page__nav .nav__item a { display: block; padding: 0.75rem 1rem 0.5rem; color: #333; text-decoration: none; white-space: nowrap; } .blog-page__nav .nav__item a:hover, .blog-page__nav .nav__item a:focus, .blog-page__nav .nav__item a:active { background-color: #E7E7E7; text-decoration: none; } #whats-new-feature-blocks { margin-bottom: 1.25rem; } @media all and (min-width: 30em) { #whats-new-feature-blocks { margin-bottom: 1.75rem; } } .region-sidebar-second { margin-bottom: 1.25rem; } #block-whats-new-block-featured-videos { padding: 1rem; background-color: #F7F9F4; } #block-whats-new-block-featured-videos > h2 { margin-top: 0.25rem; color: #333; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; } #block-whats-new-block-featured-videos > h2:after { display: none; } @media all and (max-width: 63.99em) { .view-display-id-block_featured_videos > .view-content { display: flex; flex-direction: row; flex-grow: 1; overflow-x: auto; } } .view-display-id-block_featured_videos .views-row { padding-top: 1rem; padding-bottom: 1rem; border-top: 0.0625rem solid #E7E7E7; } @media all and (max-width: 63.99em) { .view-display-id-block_featured_videos .views-row { margin-right: 0.5rem; padding-bottom: 0; } } .view-display-id-block_featured_videos .views-row::after { display: block; clear: both; content: ""; } .view-display-id-block_featured_videos .views-row:last-child { padding-bottom: 0; } .view-display-id-block_featured_videos .views-row a { text-decoration: none; } .view-display-id-block_featured_videos .views-field-field-youtube-id { position: relative; float: left; width: 7.5rem; margin-right: 0.75rem; } @media all and (max-width: 63.99em) { .view-display-id-block_featured_videos .views-field-field-youtube-id { float: none; width: 12.5rem; margin-bottom: 0.5rem; } } @media all and (max-width: 39.99em) { .view-display-id-block_featured_videos .views-field-field-youtube-id { width: 10rem; } } .view-display-id-block_featured_videos .views-field-field-youtube-id:after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25) url("../img/icons/icon-play.png") center no-repeat; content: ""; z-index: 2; pointer-events: none; } .view-display-id-block_featured_videos .views-field-field-youtube-id a { display: block; } .view-display-id-block_featured_videos .views-field-title .field-content { margin-top: 0; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 600; } .view-display-id-block_featured_videos .views-field-title .field-content:after { display: none; } .view-display-id-block_featured_videos .views-field-title .field-content a { color: #003F72; } .view-display-id-block_featured_videos .views-field-title .field-content a:hover, .view-display-id-block_featured_videos .views-field-title .field-content a:focus { text-decoration: underline; } .feed-icons { margin-bottom: 2rem; } .region-bottom { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } @media all and (max-width: 63.99em) { .region-bottom { flex-direction: column; } } .region-bottom .block-views { width: calc(33.3333333333% - 20px); margin: 1.25rem 0; padding: 1rem; border: 0.0625rem solid #D9D9D9; border-top: 0.125rem solid #0083BE; } @media all and (max-width: 63.99em) { .region-bottom .block-views { width: 100%; } } .region-bottom .block-views > h2 { color: #003F72; font-size: 1rem; font-weight: bold; } .region-bottom .block-views > h2:after { display: none; } .region-bottom .view-blog-blocks .views-row::after { display: block; clear: both; content: ""; } .region-bottom .view-blog-blocks .views-field-field-thumbnail { float: left; width: 5.625rem; height: 4.375rem; margin-right: 1rem; } .region-bottom .view-blog-blocks .views-field-field-thumbnail img { width: 100%; height: auto; object-fit: cover; } .region-bottom .view-blog-blocks .views-field-field-category { margin-bottom: 0.5rem; color: #C64E06; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.0625rem; text-transform: uppercase; } .region-bottom .view-blog-blocks .views-field-field-category a { color: #C64E06; } .block-views-blockblog-blocks-block-blog-latest { border-top: 0.125rem solid #0083BE; } .block-views-blockblog-blocks-block-blog-latest > h2 { margin-top: 0; margin-bottom: 0; padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 1.5rem; } .block-views-blockblog-blocks-block-blog-latest > h2:after { display: none; } .view-display-id-blog_next_video .views-row { padding-top: 0; padding-bottom: 0; border-top-width: 0; } .view-display-id-blog_next_video .usa-card__media { position: relative; } .view-display-id-blog_next_video .usa-card__media:after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25) url("../img/icons/icon-play.png") center no-repeat; content: ""; z-index: 2; pointer-events: none; } .page-taxonomy-blog-categories .jumbotron { display: flex; flex-direction: row; align-items: flex-end; height: 12.5rem; padding: 1.75rem; border-radius: 0; background-color: #003F72; } @media all and (max-width: 63.99em) { .page-taxonomy-blog-categories .jumbotron { height: auto; margin-right: -1rem; margin-left: -1rem; padding: 1rem; } } .page-taxonomy-blog-categories .jumbotron h1 { color: #fff; font-size: 2.125rem; font-weight: 600; } .page-taxonomy-blog-categories .jumbotron h1 small { display: block; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; text-transform: uppercase; } .page-taxonomy-blog-categories .jumbotron h1:after { display: none; } .page-taxonomy-blog-categories .usa-card--featured { margin-bottom: 2rem; } @media all and (max-width: 63.99em) { .page-taxonomy-blog-categories .usa-card--featured { display: none; } } .page-taxonomy-blog-categories .usa-card--featured .usa-card__container { height: 12.5rem; } .page-taxonomy-blog-categories .usa-card--featured .usa-card__heading { font-size: 1.125rem; } .blog-article { margin-bottom: 2.5rem; box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.25); } .blog-article__header { padding: 1.75rem; } .blog-article__category { color: #C64E06; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.0625rem; text-transform: uppercase; } .blog-article__category a { color: inherit; text-decoration: none; } .blog-article__title { margin-top: 0.75rem; margin-bottom: 1.25rem; color: #003F72; font-size: 2.125rem; } .blog-article__title:after { display: none; } .blog-article__meta { display: flex; margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; } .blog-article__meta li + li { margin-left: 0.5rem; padding-left: 0.5rem; border-left: 0.0625rem solid #E7E7E7; } .blog-article__content { padding: 1.75rem; } .blog-article__hero { margin: -1.75rem -1.75rem 1.75rem; } .blog-article__hero img { width: 100%; max-width: 100%; height: auto; } .blog-article__footer { padding: 0.75rem 1.75rem; border-top: 0.0625rem solid #E7E7E7; } .field--name-field-taxonomies { display: flex; } .field--name-field-taxonomies .field__item:not(:first-child) { margin-left: 0.5rem; } .field--name-field-taxonomies .field__item:not(:last-child) { margin-right: 0.5rem; } .view-display-id-blog_next_read .views-row { border-top-width: 0; } .path-virtual-health-resource-centers .hero { position: relative; padding-top: 80px; padding-bottom: 80px; background: #003F72 url("../img/occ-inverse-bg.png") no-repeat; background-position: bottom center; background-size: cover; } @media all and (max-width: 39.99em) { .path-virtual-health-resource-centers .hero { padding-top: 60px; padding-bottom: 60px; } } .path-virtual-health-resource-centers .hero::before { position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; background: url("../img/vhrc-hero.png") right top no-repeat; background-size: contain; content: ""; } @media all and (max-width: 63.99em) { .path-virtual-health-resource-centers .hero::before { display: none; } } .path-virtual-health-resource-centers .hero__title, .path-virtual-health-resource-centers .hero__lead { max-width: 520px; } .path-virtual-health-resource-centers .hero__title { margin-bottom: 20px; font-weight: normal; } @media all and (max-width: 39.99em) { .path-virtual-health-resource-centers .hero__title { font-size: 40px; } } .path-virtual-health-resource-centers .hero .facility-locator-search-form { margin-top: 32px; } .path-virtual-health-resource-centers .field--name-field-components .paragraph { padding-top: 30px; padding-bottom: 30px; } .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz { flex-direction: row; } @media all and (max-width: 39.99em) { .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz { flex-direction: column; } } @media all and (min-width: 40em) { .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .content-wrapper, .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .image-wrapper { width: 50%; } } @media all and (min-width: 40em) { .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .image-wrapper .field--name-field-thumbnail > img { position: relative; right: -2em; } } .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz .title { margin-top: 60px; margin-bottom: 24px; } .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz:nth-of-type(even) { flex-direction: row-reverse; } @media all and (max-width: 39.99em) { .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz:nth-of-type(even) { flex-direction: column; } } @media all and (min-width: 40em) { .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz:nth-of-type(even) .image-wrapper .field--name-field-thumbnail > img { right: auto; left: -2em; } } .path-virtual-health-resource-centers .field--name-field-components .paragraph--type--image-text-horz + .paragraph--type--image-text-horz { margin-top: -60px; } .path-virtual-health-resource-centers .field--name-field-components .block-facilitylocatorbanner { margin-bottom: 0; } .path-virtual-health-resource-centers .region.region-content { padding-bottom: 0; } /*# sourceMappingURL=occ.css.map */