/* Generally, we want the print css media queries to take place in the component's relevant file. That way, there's one place to look for styles, whether that's print, screen or otherwise. That said, sometimes we need to override. Print is finicky, so we can put additional rules here. */ /* * CSS Reset * Based on Fix by Jayden Seric * https://github.com/jaydenseric/Fix */ @import url("//hello.myfonts.net/count/38e451"); * { -webkit-box-sizing: border-box; box-sizing: border-box; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: 1; font-family: sans-serif; } iframe { border: 0; } ul, ol { margin-top: 0; margin-bottom: 0; padding-left: 0; } li { display: block; list-style-type: none; } dl { margin-top: 0; margin-bottom: 0; } dd { margin-left: 0; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; font-size: inherit; } blockquote { margin: 0; padding: 0; } p { margin-top: 0; margin-bottom: 0; } strong { font-weight: 600; } img { border: 0; max-width: 100%; height: auto; vertical-align: middle; } figure { margin: 0; } a { text-decoration: none; color: inherit; } button { border: 0; margin: 0; padding: 0; border-radius: 0; text-align: inherit; text-transform: inherit; font: inherit; -webkit-font-smoothing: inherit; letter-spacing: inherit; background: none; cursor: pointer; overflow: visible; } ::-moz-focus-inner { border: 0; padding: 0; } input { border: none; } input[type="text"], input[type="tel"], input[type="email"], input[type="button"], input[type="search"], textarea { -webkit-appearance: none; border-radius: 0; } input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; padding: 0; margin: 0; } fieldset { border: none; padding: 0; margin: 0; } cite, address { font-style: normal; } table { border-collapse: collapse; } svg { pointer-events: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } input[type="search"]::-ms-clear { display: none; width: 0; height: 0; } input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; } :root { /* Primary Colors */ --tokens__colors__blue: #3687e8; --tokens__colors__red: #e33c46; /* Secondary Colors */ --tokens__colors__blue-light: #4c77aa; --tokens__colors__blue-dark: #1e5395; --tokens__colors__navy: #3b5f8a; --tokens__colors__sky-blue: #b5dade; --tokens__colors__red-dark: #ba2b34; --tokens__colors__wine: #5e233a; --tokens__colors__yellow: #f6fbc2; /* Utility Colors */ --tokens__colors__grey: #474747; --tokens__colors__grey-lighter: #fbfbfb; --tokens__colors__grey-light: #e6e6e6; --tokens__colors__grey-alt: #646665; --tokens__colors__grey-alt--faded-25: rgba(100, 102, 101, 0.25); --tokens__colors__grey-alt--faded-40: rgba(100, 102, 101, 0.4); --tokens__colors__grey-alt--faded-50: rgba(100, 102, 101, 0.5); --tokens__colors__black: #1c1c1c; /* Font Families */ --tokens__font-family-faustina: "Faustina", "Georgia", serif; --tokens__font-family-gascogne: "Gascogne", "Georgia", serif; --tokens__font-family-styrene: "Styrene", sans-serif; --tokens__font-family-icons: "icomoon", sans-serif; /* Transition */ --tokens__transition: all 0.2s; /* Sizing Utilities */ --tokens__subnav__height: 2.75rem; } /* LESS variables for things for which that makes sense */ @font-face { font-family: "Gascogne"; src: url("/assets/fonts/Gascogne/GascogneTS-Medium.woff2") format("woff2"), url("/assets/fonts/Gascogne/GascogneTS-Medium.woff") format("woff"), url("/assets/fonts/Gascogne/GascogneTS-Medium.eot"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Gascogne"; src: url("/assets/fonts/Gascogne/GascogneTS-XBold.woff2") format("woff2"), url("/assets/fonts/Gascogne/GascogneTS-XBold.woff") format("woff"), url("/assets/fonts/Gascogne/GascogneTS-XBold.eot"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Styrene"; src: url("/assets/fonts/Styrene/StyreneA-Regular-Web.woff2") format("woff2"), url("/assets/fonts/Styrene/StyreneA-Regular-Web.woff") format("woff"); font-weight: 400; font-style: normal; font-stretch: normal; font-display: swap; } @font-face { font-family: "Styrene"; src: url("/assets/fonts/Styrene/StyreneA-Medium-Web.woff2") format("woff2"), url("/assets/fonts/Styrene/StyreneA-Medium-Web.woff") format("woff"); font-weight: 500; font-style: normal; font-stretch: normal; font-display: swap; } @font-face { font-family: "Styrene"; src: url("/assets/fonts/Styrene/StyreneA-Black-Web.woff2") format("woff2"), url("/assets/fonts/Styrene/StyreneA-Black-Web.woff") format("woff"); font-weight: 900; font-style: normal; font-stretch: normal; font-display: swap; } @font-face { font-family: "icomoon"; src: url("/assets/fonts/IcoMoon/icomoon.eot?fiz1ks"); src: url("/assets/fonts/IcoMoon/icomoon.eot?fiz1ks#iefix") format("embedded-opentype"), url("/assets/fonts/IcoMoon/icomoon.ttf?fiz1ks") format("truetype"), url("/assets/fonts/IcoMoon/icomoon.woff?fiz1ks") format("woff"), url("/assets/fonts/IcoMoon/icomoon.svg?fiz1ks#icomoon") format("svg"); font-weight: 400; font-style: normal; font-stretch: normal; font-display: swap; } :root { --hero__tuck: 0rem; --content-gutter: 0.5rem; } @media (min-width: 900px) { :root { --content-gutter: 2.5rem; } } html { font-size: 16px; min-height: 100%; height: 100%; } body { position: relative; background: white; font-family: var(--tokens__font-family-faustina); color: #414141; } body > main { outline: none; } body::before { content: ""; position: absolute; top: 0; left: 0; background: black; height: var(--body__shade-size, 0); width: var(--body__shade-size, 0); opacity: var(--body__shade-opacity, 0); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; z-index: 100; } body[data-site-mobile-nav-active="true"]::before { --body__shade-size: 100%; --body__shade-opacity: 0.8; } :root { --a__hover-opacity: 0.6; } a { -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; cursor: pointer; } html.no-touchevents a:hover { opacity: var(--a__hover-opacity); } a:active { opacity: 0.4; } article[aria-expanded="false"] { position: relative; overflow: hidden; } :root { --blockquote__font-size: 1.125rem; --blockquote__color: var(--tokens__colors__black); } @media (min-width: 900px) { :root { --blockquote__font-size: 1.625rem; } } blockquote { color: var(--blockquote__color); } blockquote .blockquote__main { font-size: var(--blockquote__font-size); font-weight: 900; line-height: 1.35; font-family: var(--tokens__font-family-styrene); } blockquote .blockquote__main::before { content: "“"; } blockquote .blockquote__main::after { content: "”"; } blockquote > footer { margin-top: 1.25rem; } blockquote > footer > cite > a { color: var(--tokens__colors__blue); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } blockquote > footer > cite > a > svg { margin-right: 0.5rem; fill: currentColor; } blockquote.blockquote--hide-quotemarks .blockquote__main::before, blockquote.blockquote--hide-quotemarks .blockquote__main::after { display: none; } :root { --button__hover-opacity: 0.6; --button__active-opacity: 0.4; } button { -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } buttonhtml.no-touchevents button:not(.button--hover-custom):hover { opacity: var(--button__hover-opacity); } button:active { opacity: var(--button__active-opacity); } hr { max-width: 100%; border: none; border-top: 1px solid var(--tokens__colors__grey-light); } img { display: block; max-width: 100%; } input { --input__color: var(--tokens__colors__black); --input--checkbox__border-color: #dbdbdb; font-family: var(--tokens__font-family-styrene); font-size: 0.875rem; color: var(--input__color); background: transparent; border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 0.625rem 0; } input:not([type="checkbox"]) { width: 100%; } input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--input__color); opacity: 0.5; } input::-moz-placeholder { /* Firefox 19+ */ color: var(--input__color); opacity: 0.5; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 99999s; } input[type="checkbox"] { border: 1px solid var(--input--checkbox__border-color); background: white; width: 1.25rem; height: 1.25rem; } input[type="checkbox"]:hover { --input--checkbox__border-color: #bbb; } input[type="checkbox"]:checked { background: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/flourishes/check.png") center center no-repeat; background-size: 90% 90%; } [data-env="production"] input[type="checkbox"]:checked { background: url("https://bipartisan-policy-center.imgix.net/assets/images/flourishes/check.png") center center no-repeat; } label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } label:hover { opacity: 0.8; } :root { --p__line-height: 1.5; } p { line-height: var(--p__line-height); } strong { font-weight: 600; } :root { --table__cell-padding: 0.875rem 1rem; } table { width: 100%; font-family: var(--tokens__font-family-styrene); color: #333; font-size: 13px; } td, th { padding: var(--table__cell-padding); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } td.column-1, th.column-1 { border-right: 1px solid #e8e8e8; } th { border-bottom: 4px solid #3687e8; background: white; text-align: left; min-width: 120px; } td[rowspan]:first-child { text-align: center; font-weight: 800; text-transform: uppercase; font-size: 0.875rem; border-right: 1px solid #e8e8e8; } tbody { background: #fbfbfb; } tbody tr { border-top: 1px solid #e8e8e8; } .pretty-tables figcaption + table { margin-top: 1.5rem; } .pretty-tables table .odd { background: #f3f3f3; } @media print { .pretty-tables .tablesaw-bar { display: none !important; } } :root { --accordion__item__spacing: 1.5rem; --accordion__item__border-color: #f2f2f2; --accordion__item__icon-color: var(--tokens__colors__grey-alt); --accordion__item__icon-rotation: 0; --accordion__item__icon-opacity: 0.75; --accordion__content-padding-h: 1.5rem; } .accordion__item { /* Closed state */ /* Open state */ /* iOS Zoom Fix */ } .accordion__item > button { font-family: var(--tokens__font-family-styrene); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--dropdown-trigger__padding-v) 0; color: var(--dropdown-trigger__color); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); z-index: 0; --dropdown-trigger__padding-v: 0.875rem; position: relative; width: 100%; border-top: 2px solid var(--accordion__item__border-color); border-bottom-color: transparent; } .accordion__item > button::after { content: ""; background: url('data:image/svg+xml;utf8,'); position: absolute; width: 13px; height: 8px; right: 0.75rem; opacity: var(--dropdown-trigger__icon-opacity); background-size: cover; -webkit-transition: 0.2s -webkit-transform; transition: 0.2s -webkit-transform; transition: 0.2s transform; transition: 0.2s transform, 0.2s -webkit-transform; z-index: -1; } .accordion__item > button:hover { --dropdown-trigger__icon-opacity: 0.5; --dropdown-trigger__color: black; } .accordion__item > button .accordion__title { --title__font-weight: 500; --title__line-height: 1.2; margin-right: 0.625rem; } .accordion__item > button .accordion__count { background: var(--tokens__colors__red); width: 20px; height: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 0.75rem; border-radius: 50%; color: white; display: none; } @media (min-width: 900px) { .accordion__item > button { --dropdown-trigger__padding-v: 1.5rem; } } .accordion__item:last-child { border-bottom: 2px solid var(--accordion__item__border-color); } .accordion__item > .accordion__content { padding: 0 var(--accordion__content-padding-h); } .accordion__item > .accordion__content::after, .accordion__item > .accordion__content::before { content: ""; display: block; height: 1.5rem; } .accordion__item[aria-expanded="false"] > .accordion__content { display: none; } @media print { .accordion__item[aria-expanded="false"] > .accordion__content { display: block; padding: 0; } .accordion__item[aria-expanded="false"] > .accordion__content ul { margin: 0; } .accordion__item[aria-expanded="false"] > .accordion__content ul > li { padding: 0; } } .accordion__item[aria-expanded="true"] > button { --accordion__item__border-color: #a8cbf5; border-bottom: 1px solid #eee; color: var(--tokens__colors__blue); } .accordion__item[aria-expanded="true"] > button::after { --accordion__item__icon-opacity: 0.5; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } @media (max-width: 399px ) { .accordion__item input[type="text"] { font-size: 16px; } } .accordion--flush { --accordion__content-padding-h: 0; } #alert { background: var(--tokens__colors__red); color: white; text-align: center; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; padding: 1rem; -webkit-transform: matrix(1, 0, 0, 1, 0, 100); transform: matrix(1, 0, 0, 1, 0, 100); } #alert.alert--static { -webkit-transform: none; transform: none; position: static; } .brief { display: grid; grid-gap: 1rem; } :root { --card-grid__gutter: 2rem; } @media (min-width: 400px) { :root { --card-grid__columns: repeat(auto-fill, minmax(20rem, 1fr)); } } .card-grid { display: grid; grid-template-columns: var(--card-grid__columns); grid-gap: var(--card-grid__gutter); grid-auto-flow: dense; } @media print { .card-grid { display: block; padding: 1rem 0; grid: none; max-width: 715px; margin: 0 auto; } .card-grid .card + .card { margin-top: 2rem; padding-top: 2rem !important; border-top: solid 1px #ccc; } } @media (min-width: 900px) { .card-grid__columns4 { --card-grid__columns: repeat(4, 1fr); } } :root { --card__title-size: 1rem; --card__title-offset: calc(var(--card__gutter) / 2); --card__gutter: 1.5rem; --card__padding: 1.125rem; --card__title-margin: auto 0; --card__event__padding__v: 1rem; --card__event__padding__h: 1rem; --card__event__grid-gap: 0.5rem; --card__min-height: 12.5rem; } @media (min-width: 900px) { :root { --card__title-size: 1.125rem; --card__event__grid-gap: 1rem; --card__gutter: 2rem; --card__padding: 1.875rem; } } .card { min-height: var(--card__min-height); background: white; position: relative; padding: var(--card__padding); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-row: var(--card__rows, span 1); grid-column: var(--card__cols, span 1); font-family: var(--tokens__font-family-styrene); /** * Specific roles for specific card types */ /** * Shared styles for multiple card types */ /** * Special size modifiers */ } .card__title, .card__metadata { position: relative; z-index: 2; } .card__metadata { margin-bottom: var(--card__gutter); } .card__metadata span::after { content: "/"; display: inline-block; margin: 0 0.25rem; } .card__metadata time { opacity: 0.65; } .card__title { margin: var(--card__title-margin); font-size: var(--card__title-size); line-height: 1.4; font-weight: 500; padding-bottom: var(--card__title-offset); word-wrap: break-word; } .card__type { text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__type svg { margin-bottom: 0.3125rem; position: relative; } .card__image { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .card__tags { margin-bottom: 0.5rem; } .card__play-button { position: absolute; z-index: 5; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .card--image .card__image, .card--news-item--image .card__image, .card--resource--image .card__image, .card--podcast-episode--image:not(.card--featured) .card__image, .card--news-item--image .card__image { position: absolute; } .card--image .card__image > img, .card--news-item--image .card__image > img, .card--resource--image .card__image > img, .card--podcast-episode--image:not(.card--featured) .card__image > img, .card--news-item--image .card__image > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .card--image.card--featured > svg, .card--news-item--image.card--featured > svg, .card--resource--image.card--featured > svg, .card--podcast-episode--image:not(.card--featured).card--featured > svg, .card--news-item--image.card--featured > svg { left: auto !important; bottom: auto !important; top: var(--card__padding) !important; right: var(--card__padding) !important; stroke: white !important; opacity: 1 !important; } .card--image:not(.card--tall):not(.card--wide):not(.card--featured), .card--news-item--image:not(.card--tall):not(.card--wide):not(.card--featured), .card--resource--image:not(.card--tall):not(.card--wide):not(.card--featured), .card--podcast-episode--image:not(.card--featured):not(.card--tall):not(.card--wide):not(.card--featured), .card--news-item--image:not(.card--tall):not(.card--wide):not(.card--featured) { --card__title-size: 0.875rem; padding-right: 8.5rem; } .card--image:not(.card--tall):not(.card--wide):not(.card--featured) .card__image, .card--news-item--image:not(.card--tall):not(.card--wide):not(.card--featured) .card__image, .card--resource--image:not(.card--tall):not(.card--wide):not(.card--featured) .card__image, .card--podcast-episode--image:not(.card--featured):not(.card--tall):not(.card--wide):not(.card--featured) .card__image, .card--news-item--image:not(.card--tall):not(.card--wide):not(.card--featured) .card__image { width: 8.5rem; height: 8.5rem; right: -0.75rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .card--image.card--tall, .card--news-item--image.card--tall, .card--resource--image.card--tall, .card--podcast-episode--image:not(.card--featured).card--tall, .card--news-item--image.card--tall { padding-top: calc(56.25% + var(--card__gutter)); } .card--image.card--tall .card__image, .card--news-item--image.card--tall .card__image, .card--resource--image.card--tall .card__image, .card--podcast-episode--image:not(.card--featured).card--tall .card__image, .card--news-item--image.card--tall .card__image { top: 0; left: calc(var(--layer__gutters__h) * -0.5 + 1px); right: calc(var(--layer__gutters__h) * -0.5 + 1px); padding-top: 56.25%; } @media (max-width: 41.99999rem) { .card--image.card--wide, .card--news-item--image.card--wide, .card--resource--image.card--wide, .card--podcast-episode--image:not(.card--featured).card--wide, .card--news-item--image.card--wide { padding-top: calc(56.25% + var(--card__gutter)); } .card--image.card--wide .card__image, .card--news-item--image.card--wide .card__image, .card--resource--image.card--wide .card__image, .card--podcast-episode--image:not(.card--featured).card--wide .card__image, .card--news-item--image.card--wide .card__image { top: 0; left: calc(var(--layer__gutters__h) * -0.5 + 1px); right: calc(var(--layer__gutters__h) * -0.5 + 1px); padding-top: 56.25%; } } @media (min-width: 42rem) { .card--image.card--wide, .card--news-item--image.card--wide, .card--resource--image.card--wide, .card--podcast-episode--image:not(.card--featured).card--wide, .card--news-item--image.card--wide { padding-right: calc(50% + var(--card-grid__gutter) / 2); } .card--image.card--wide .card__image, .card--news-item--image.card--wide .card__image, .card--resource--image.card--wide .card__image, .card--podcast-episode--image:not(.card--featured).card--wide .card__image, .card--news-item--image.card--wide .card__image { width: calc(50% - var(--card-grid__gutter) / 2); height: calc(100% + 1rem); right: 0; top: -0.5rem; } } .card--image.card--featured, .card--news-item--image.card--featured, .card--resource--image.card--featured, .card--podcast-episode--image:not(.card--featured).card--featured, .card--news-item--image.card--featured { --card__gutter: 0.5rem; --card__title-margin: 0; --card__title-offset: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .card--image.card--featured .card__image, .card--news-item--image.card--featured .card__image, .card--resource--image.card--featured .card__image, .card--podcast-episode--image:not(.card--featured).card--featured .card__image, .card--news-item--image.card--featured .card__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .card--image.card--featured .card__image::after, .card--news-item--image.card--featured .card__image::after, .card--resource--image.card--featured .card__image::after, .card--podcast-episode--image:not(.card--featured).card--featured .card__image::after, .card--news-item--image.card--featured .card__image::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(14%, rgba(7, 34, 113, 0)), to(#000c2e)); background-image: linear-gradient(-180deg, rgba(7, 34, 113, 0) 14%, #000c2e 100%); } .card--video { position: relative; } .card--video .card__metadata { top: var(--card__padding); left: var(--card__padding); } .card--video .card__video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .card--news-item .card__title, .card--news-item--image .card__title, .card--resource .card__title, .card--resource--image .card__title { padding-bottom: calc(var(--card__title-offset) * 2); } .card--news-item > svg, .card--news-item--image > svg, .card--resource > svg, .card--resource--image > svg { position: absolute; left: var(--card__padding); bottom: var(--card__padding); width: 18px; height: 18px; opacity: 0.5; } .card--news-item, .card--news-item--image { background: var(--tokens__colors__red); } .card--news-item > svg, .card--news-item--image > svg { stroke: white; } .card--resource, .card--resource--image { --card__title-size: 0.9rem; border-left: 8px solid #e6c05b; } .card--resource .card__tags, .card--resource--image .card__tags { z-index: 2; } .card--resource .card__image, .card--resource--image .card__image { background-color: white; } .card--resource > svg, .card--resource--image > svg { stroke: #474747; } .card--podcast-episode.card--featured, .card--podcast-episode--image.card--featured { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-image: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/misc/featured-podcast-bg.jpg"); background-size: cover; color: white; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } [data-env="production"] .card--podcast-episode.card--featured, [data-env="production"] .card--podcast-episode--image.card--featured { background-image: url("https://bipartisan-policy-center.imgix.net/assets/images/misc/featured-podcast-bg.jpg"); } .card--podcast-episode.card--featured::after, .card--podcast-episode--image.card--featured::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(14%, rgba(7, 34, 113, 0)), to(#000c2e)); background-image: linear-gradient(-180deg, rgba(7, 34, 113, 0) 14%, #000c2e 100%); } .card--podcast-episode.card--featured .card__metadata, .card--podcast-episode--image.card--featured .card__metadata { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: 1rem; margin-bottom: 0.2rem; color: white; } .card--podcast-episode.card--featured .card__title, .card--podcast-episode--image.card--featured .card__title { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-bottom: 0; margin-top: 0; padding-bottom: 0; } .card--podcast-episode.card--featured .card__image, .card--podcast-episode--image.card--featured .card__image { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 200px; z-index: 2; } .card--stat { background: var(--tokens__colors__wine); } .card--stat .card__title { padding-left: 6.5rem; } .card--stat .card__figure { background-color: var(--tokens__colors__red); color: white; position: absolute; top: 50%; -webkit-transform: translateY(-40%); transform: translateY(-40%); left: -1rem; width: 7.5rem; height: 7.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 2.25rem; } .card--twitter { font-size: 0.875rem; } .card--twitter__metadata { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0.625rem; } .card--twitter__metadata img { width: 2rem; height: 2rem; -o-object-fit: cover; object-fit: cover; border-radius: 100%; } .card--twitter__metadata svg { margin-left: auto; fill: var(--tokens__colors__grey); opacity: 0.4; -webkit-transform: scale(1.2); transform: scale(1.2); } .card--twitter__user { margin-left: 0.625rem; font-weight: 500; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .card--twitter__handle { color: var(--tokens__colors__blue); font-size: 0.75rem; margin-top: 0.25rem; } .card--twitter__content { font-weight: 300; line-height: 1.3; margin: auto 0; } .card--image-bg { overflow: hidden; background-color: var(--tokens__colors__blue-dark); } .card--image-bg .card__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .card--image-bg .card__image > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .card--image-bg .card__title { text-align: center; } .card__event { --title__color: #f6fbc2; display: grid; grid-gap: var(--card__event__grid-gap); background: #3687e8; -ms-flex-line-pack: center; align-content: center; justify-items: center; text-align: center; color: white; min-height: var(--card__min-height); padding: calc(var(--card__event__padding__v) + 0.5rem) var(--card__event__padding__h) var(--card__event__padding__v); } @media (max-width: 1279px ) { .card__event > h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* number of lines to show */ -ms-flex-item-align: start; align-self: flex-start; } } @media (min-width: 1280px) { .card__event > h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* number of lines to show */ -ms-flex-item-align: start; align-self: flex-start; } } .card--event .card__metadata, .card--events .card__metadata { top: var(--card__gutter); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .card--event { --card__event__padding__v: 2rem; padding: 56.25% 0 0; } .card--event:not(.card--style--terwilliger) { --card__padding: 0; } .card--event .card__metadata { display: none; } .card--event .card__event { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .card--event .card__event > ul { --title__color: white; } .card--events { background: #3687e8; position: relative; padding: 56.25% 0 0; } .card--events .slider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; height: 100% !important; } .card--events .card__event { background: none; } .card--events .card__event .card__event__meta { display: none; } .card--events__dots { position: absolute; bottom: calc(var(--card__padding) / 2); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: grid; grid-gap: 0.375rem; grid-auto-flow: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .card--events__dots > button { width: 0.375rem; height: 0.375rem; background-color: #215a9d; border-radius: 999px; } .card--events__dots > button[aria-selected="true"] { background-color: white; } .card--video, .card--events, .card--event { --card__min-height: 0; padding: 56.25% 0 0; height: 0; } .card--video .card__metadata, .card--events .card__metadata, .card--event .card__metadata { position: absolute; z-index: 1; } .card--report { --card__padding: 1.25rem; --card__title-offset: 0; --card__title-margin: 0; -webkit-box-shadow: var(--tokens__shadow__small); box-shadow: var(--tokens__shadow__small); position: relative; min-height: 23.375rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .card--report .card__title { text-align: left; } .card--report .card__image::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(14%, rgba(0, 37, 81, 0)), to(#002551)); background-image: linear-gradient(-180deg, rgba(0, 37, 81, 0) 14%, #002551 100%); } .card--media { --card__padding: 0; text-align: center; border: 1px solid var(--tokens__colors__grey-light); height: 100%; } .card--media .card__image { position: relative; padding-top: 48%; } .card--media .card__image > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .card--media .card__title { padding: 1.875rem; } .card--stat, .card--image-bg, .card--events, .card--news-item, .card--news-item--image, .card--event, .card--video, .card--featured.card--image, .card--featured.card--news-item--image, .card--featured.card--resource--image { color: white; } .card--stat .card__metadata, .card--image-bg .card__metadata, .card--events .card__metadata, .card--news-item .card__metadata, .card--news-item--image .card__metadata, .card--event .card__metadata, .card--video .card__metadata, .card--featured.card--image .card__metadata, .card--featured.card--news-item--image .card__metadata, .card--featured.card--resource--image .card__metadata { color: white; opacity: 0.8; } .card.card--style--terwilliger { background-color: #414141; color: white; } .card.card--style--terwilliger .card__metadata { color: white; } .card.card--style--terwilliger .card__time { font-size: 0.75rem; line-height: 1.125rem; color: #fff; } .card.card--style--terwilliger .card__category { font-size: 0.9375rem; line-height: 1.125rem; text-transform: uppercase; font-weight: 500; letter-spacing: 1.5px; } .card.card--style--terwilliger .card__event { background-color: #414141; text-align: left; justify-items: start; padding: var(--card__padding); } .card.card--style--terwilliger .card__event .title { color: #fff; font-size: 1.125rem; text-transform: none; } .card.card--style--terwilliger .card__event .slashed-list { font-size: 0.75rem; line-height: 1.125rem; text-transform: none; } .card--tall { --card__title-size: 1.25rem; --card__rows: span 2; } .card--wide { --card__title-size: 1.25rem; } @media (min-width: 42rem) { .card--wide { --card__rows: auto; --card__cols: span 2; } } .card--featured { --card__rows: 1 / 3; --card__title-size: 1.5rem; --card__min-height: 20rem; } @media (min-width: 42rem) { .card--featured { --card__cols: 1 / 3; --card__title-size: 2rem; } } @media print { .card { display: block !important; min-height: 0 !important; background: none !important; position: static !important; padding: 0 !important; } .card__image { display: none; } .card__metadata { margin-bottom: 0.5rem; } .card__metadata li + li { margin-left: 1rem; } .card__title { padding: 0 !important; } .card__figure { position: static !important; background: none !important; top: auto !important; left: auto !important; height: auto !important; width: auto !important; display: inline !important; } .card::after { content: attr(href); display: block; font-style: normal; margin-top: 0.5rem; } } .cdctc-calc { --color__deep-blue: #072271; --color__gray: #757575; } .cdctc-calc__layer { background: white; padding: 40px 25px 12px; position: relative; } .cdctc-calc__layer .title { font-size: 1.3rem; line-height: 1.3em; } @media (min-width: 900px) { .cdctc-calc__layer { padding: 60px 40px 12px; } .cdctc-calc__layer .title { font-size: 1.6rem; } } .cdctc-calc__control { margin-bottom: 50px; } .cdctc-calc__control .title { margin-bottom: 24px; } @media (min-width: 900px) { .cdctc-calc__control { margin-bottom: 60px; } } .cdctc-calc__control .asterisk { margin-bottom: 0; text-align: right; } .cdctc-calc__radio { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; height: 56px; } @media (min-width: 900px) { .cdctc-calc__radio { height: 80px; } } .cdctc-calc__radio__checker { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .cdctc-calc__radio__checker:hover { opacity: unset; } .cdctc-calc__radio__checker > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; background: white; border-top: 1px solid var(--tokens__colors__grey-light); border-bottom: 3px solid var(--tokens__colors__grey-light); font-family: var(--tokens__font-family-styrene); font-size: 1rem; font-weight: 500; -webkit-transition: 0.1s ease-out; transition: 0.1s ease-out; } @media (min-width: 900px) { .cdctc-calc__radio__checker > span { font-size: 1.2rem; } } .cdctc-calc__radio__checker > input { position: absolute; margin: 0; opacity: 0; } .cdctc-calc__radio__checker > input:focus-visible + span { outline: 2px solid black; } .cdctc-calc__radio__checker > input:checked + span { background: var(--tokens__colors__blue); border-bottom-color: var(--color__deep-blue); color: white; } .cdctc-calc__range__value { font-family: var(--tokens__font-family-styrene); font-size: 2rem; font-weight: 900; color: var(--tokens__colors__blue); text-align: center; padding: 10px 0 40px; } @media (min-width: 900px) { .cdctc-calc__range__value { font-size: 2.2rem; } } .cdctc-calc__range__pips { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: var(--color__gray); font-family: var(--tokens__font-family-styrene); font-size: 0.9rem; } @media (min-width: 900px) { .cdctc-calc__range__pips { font-size: 1rem; } } .cdctc-calc__range .noUi-horizontal { height: 16px; } .cdctc-calc__range .noUi-horizontal .noUi-handle { width: 56px; height: 28px; border-radius: 14px; right: -28px; } @media (min-width: 900px) { .cdctc-calc__range .noUi-horizontal .noUi-handle { width: 64px; right: -32px; } } .cdctc-calc__range .noUi-target { background: var(--tokens__colors__grey-light); border-radius: 0; border: none; -webkit-box-shadow: none; box-shadow: none; margin-bottom: 24px; } .cdctc-calc__range .noUi-connect { background: var(--color__deep-blue); } .cdctc-calc__range .noUi-connects { border-radius: 0; } .cdctc-calc__range .noUi-handle { border: none; cursor: pointer; -webkit-box-shadow: none; box-shadow: none; background-color: var(--tokens__colors__blue); background-image: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/range-handler-icon.svg"); background-position: center; background-repeat: no-repeat; background-size: auto; } [data-env="production"] .cdctc-calc__range .noUi-handle { background-image: url("https://bipartisan-policy-center.imgix.net/assets/images/range-handler-icon.svg"); } .cdctc-calc__range .noUi-handle::after, .cdctc-calc__range .noUi-handle::before { display: none; } .cdctc-calc__range .noUi-marker { background: var(--tokens__colors__grey-light); } .cdctc-calc__range .noUi-marker-horizontal.noUi-marker { width: 1px; height: 10px; } .cdctc-calc__range .noUi-marker-horizontal.noUi-marker-large { height: 14px; } .cdctc-calc__range .noUi-pips-horizontal { padding: 4px 0; height: 24px; } .cdctc-calc__range .noUi-value { display: none; } .cdctc-calc__result { font-family: var(--tokens__font-family-styrene); font-size: 1.1rem; font-weight: 400; line-height: 1.4em; border-top: 2px solid var(--tokens__colors__grey-light); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 24px 0 40px; margin: 15px 0 12px; } .cdctc-calc__result div > span { font-weight: 900; font-size: 1.5rem; line-height: 1.8rem; display: block; padding: 12px; border: 2px solid var(--tokens__colors__grey-light); border-bottom-width: 4px; margin-top: 12px; margin-bottom: 24px; color: var(--color__deep-blue); position: relative; } .cdctc-calc__result div > span::after { content: ""; position: absolute; bottom: -4px; left: -2px; width: calc(100% + 4px); height: 4px; background: var(--color__deep-blue); } .cdctc-calc__result > hr { margin: 24px 0; } @media (min-width: 900px) { .cdctc-calc__result { font-size: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; } .cdctc-calc__result div > span { font-size: 2rem; line-height: 2.2rem; padding: 16px; margin-bottom: 0; } } .cdctc-calc__share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cdctc-calc__share__links a { margin-left: 12px; } .cdctc-calc__share__links a > svg { fill: var(--tokens__colors__blue); width: 24px; height: 24px; } .cdctc-calc__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); z-index: 5; display: none; } .cdctc-calc__overlay .bounce-preloader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .cdctc-calc__overlay .bounce-preloader::before, .cdctc-calc__overlay .bounce-preloader::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .cdctc-calc__overlay .bounce-preloader::before { width: 50px; height: 50px; border-radius: 100%; background-color: var(--tokens__colors__blue); -webkit-animation: bounce 0.48s ease-out infinite alternate; animation: bounce 0.48s ease-out infinite alternate; } .cdctc-calc__overlay .bounce-preloader::after { width: 60px; height: 60px; border-radius: 100%; border: 1px solid var(--tokens__colors__blue); -webkit-animation: wave 0.96s ease-out 0.24s infinite; animation: wave 0.96s ease-out 0.24s infinite; opacity: 0; } @-webkit-keyframes bounce { 0% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0.8; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes bounce { 0% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0.8; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes wave { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; border-width: 1px; } 100% { -webkit-transform: scale(3.6); transform: scale(3.6); opacity: 0; border-width: 0; } } @keyframes wave { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; border-width: 1px; } 100% { -webkit-transform: scale(3.6); transform: scale(3.6); opacity: 0; border-width: 0; } } .charts__selector { text-align: center; margin-bottom: 50px; } .charts__selector label { text-align: left; } .charts__selector h6 { margin-bottom: 20px; } .charts .legend-container ol { padding: 1rem 0; } .charts .legend-container ol li { font-size: 0.8rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; vertical-align: top; padding: 0 1rem; color: #6a6a6a; font-family: "Styrene", sans-serif; line-height: 1.2; } .charts .legend-container ol li .label-color { width: 0.8em; height: 0.8em; margin-right: 0.5em; margin-top: 2px; display: inline-block; } .charts .charts__content { padding: 60px 0 40px; max-width: 715px; margin: 0 auto; } .charts .charts__content h3 { --title__font-weight: 900; --title__font-size: 1.875rem; } @media (max-width: 899px ) { .charts .charts__content h3 { --title__font-size: 1.563rem; } } .charts__tables { display: grid; grid-gap: 2rem; grid-template-columns: minmax(0, 1fr); } .charts__table { max-width: 100%; } .charts__table h6 { margin-bottom: 30px; padding-top: 30px; } .charts__table h6:first-child { padding-top: 0; } .charts__table table { margin: 0 auto; max-width: 100%; margin-bottom: 50px; } .charts__table table td, .charts__table table th { min-width: 20px; } .charts__table table:last-child { margin-bottom: 0; } .charts__table footer { margin-top: 1.5rem; } .charts__chart + .charts__table { padding-top: 50px; } .charts__chart .canvas-container { height: 375px; position: relative; } .charts__chart__column h6 { margin: 0 0 1rem 2rem; } @media (min-width: 900px) { .charts__chart[data-chart-count="2"] { font-size: 0; } .charts__chart[data-chart-count="2"] .charts__chart__column { display: inline-block; width: 46%; margin: 0 1%; } .charts__chart[data-chart-count="2"] .charts__chart__column .canvas-container { height: 275px; } } @media print { .charts > * { display: none; } .charts::after { content: "[Chart]"; display: block; text-align: center; padding: 2rem; } } ul.checkbox-list { display: grid; grid-gap: 0.5rem; font-family: var(--tokens__font-family-styrene); font-size: 0.75rem; } ul.checkbox-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 0.5rem; } .college .title + .text-block { margin-top: 1rem; } .college__select-wrapper { margin-top: 1rem; } .college__select-wrapper .choices.is-open .choices__inner, .college__select-wrapper .choices__inner { border-radius: 0; } .college__select-wrapper .choices__inner { border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; padding-left: 7.5px; background: var(--tokens__colors__grey-lighter); } .college__select-wrapper .choices__list--dropdown { -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); border-radius: 0; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } .college__select-wrapper .choices__list--dropdown .choices__item--disabled { text-indent: -9999px; height: 0; width: 0; padding: 0; } .college__result { border-top: 2px solid var(--tokens__colors__grey-light); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1.5rem 0; margin: 3rem 0 0.75rem; } .college__result .text-block .tag { margin-top: 3rem; } .college__result .text-block .tag a { color: var(--tokens__colors__blue); } .college__result__models { margin: 2rem 0; grid-template-columns: 1fr; } @media (min-width: 400px) { .college__result__models { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } @media (min-width: 900px) { .college__result__models { margin: 3rem calc(-1 * 0.5 * var(--layer--cardify__padding-h)); grid-template-columns: repeat(3, 1fr); } } .college__result__models__model { display: grid; grid-template-rows: -webkit-min-content; grid-template-rows: min-content; padding: 1rem; border-bottom: 4px solid transparent; width: 100%; } .college__result__models__model > .title:not(.title--quinary) { padding-bottom: 0.5rem; border-bottom: 2px solid var(--tokens__colors__grey-light); margin-bottom: 0.5rem; } .college__result__models__model[aria-selected="true"] { background: #f0f4f8; border-color: var(--tokens__colors__blue); } .college__result__models__model:not([aria-selected="true"]):hover { background: rgba(240, 244, 248, 0.5); } .college__result__models__model--high .title:not(.title--quinary) { --title__color: green; } .college__result__models__model--low .title:not(.title--quinary) { --title__color: var(--tokens__colors__red); } .college__result__initial-content .text-block { padding: 1rem; background: var(--tokens__colors__grey-light); text-align: center; } .college__result__initial-content .text-block .tag { max-width: 28rem; margin: 0 auto; } .college__result__panel[aria-hidden="true"] { display: none; } .college__result--initial { border-top: none; padding-top: 0; } .college__result--initial > :not(.college__result__initial-content) { display: none; } .college__result--blurred { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } :not(.college__result--initial) > .college__result__initial-content { display: none; } @media (max-width: 899px ) { .college .accordion { margin-top: 3rem; } .college .college__result__models__model { padding-left: var(--accordion__content-padding-h); padding-right: var(--accordion__content-padding-h); border-bottom: 2px solid transparent; } .college .college__result__models__model:not(.college .college__result__models__model--low) .title:not(.title--quinary) { --title__color: black; } .college .college__result__models__model:active { opacity: 1; } .college .accordion__item[aria-expanded="true"] > .college__result__models__model { border-top: 2px solid #eee; border-bottom: 2px solid var(--tokens__colors__blue); background: #f0f4f8; } } @media (max-width: 499px) { .college .college__result__models__model .title:not(.title--quinary) { display: block; } } @media (max-width: 399px ) { .college .accordion__content.text-block { --text-block__font-size: 1rem; --p__line-height: 1.625; } } .college__share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .college__share__links a { margin-left: 12px; } .college__share__links a > svg { fill: var(--tokens__colors__blue); width: 24px; height: 24px; } .college__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); z-index: 5; display: none; } .college__overlay .bounce-preloader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .college__overlay .bounce-preloader::before, .college__overlay .bounce-preloader::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .college__overlay .bounce-preloader::before { width: 50px; height: 50px; border-radius: 100%; background-color: var(--tokens__colors__blue); -webkit-animation: bounce 0.48s ease-out infinite alternate; animation: bounce 0.48s ease-out infinite alternate; } .college__overlay .bounce-preloader::after { width: 60px; height: 60px; border-radius: 100%; border: 1px solid var(--tokens__colors__blue); -webkit-animation: wave 0.96s ease-out 0.24s infinite; animation: wave 0.96s ease-out 0.24s infinite; opacity: 0; } @keyframes bounce { 0% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0.8; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes wave { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; border-width: 1px; } 100% { -webkit-transform: scale(3.6); transform: scale(3.6); opacity: 0; border-width: 0; } } :root { --controls__button__size: 4rem; --controls__button__icon__opacity: 0.6; --controls__previous__color: var(--tokens__colors__red); --controls__next__color: var(--tokens__colors__red-dark); } .controls { display: -webkit-box; display: -ms-flexbox; display: flex; } .controls > aside, .controls__prev, .controls__next { height: var(--controls__button__size); width: var(--controls__button__size); } .controls > aside { font-family: var(--tokens__font-family-styrene); font-weight: 500; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; color: var(--tokens__colors__grey); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .controls > aside::after { content: ""; position: absolute; background: var(--tokens__colors__grey); height: 2px; width: 2rem; -ms-flex-item-align: center; align-self: center; justify-self: center; } .controls__prev, .controls__next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; } .controls__prev svg, .controls__next svg { opacity: var(--controls__button__icon__opacity); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } .controls__prev:hover, .controls__next:hover { opacity: 1; } .controls__prev:hover:not([aria-disabled="true"]) svg, .controls__next:hover:not([aria-disabled="true"]) svg { --controls__button__icon__opacity: 1; } .controls__prev { background: var(--controls__previous__color); } .controls__prev svg { -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .controls__next { background: var(--controls__next__color); } .controls [aria-disabled="true"].controls__prev, .controls [aria-disabled="true"].controls__next { --controls__button__icon__opacity: 0.4; opacity: 0.6; } .controls [aria-disabled="true"].controls__prev:hover, .controls [aria-disabled="true"].controls__next:hover { cursor: not-allowed; } @media print { .controls { display: none !important; } } :root { --cta-block__flex-direction: column; --cta-block__title-margin: 0 0 1.25rem 0; --cta-block__title-font-size: 1.5rem; } @media (min-width: 900px) { :root { --cta-block__flex-direction: row; --cta-block__title-margin: 0 1.25rem 0 0; --cta-block__title-font-size: 1.75rem; } } .cta-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: var(--cta-block__flex-direction); flex-direction: var(--cta-block__flex-direction); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 12rem; padding: 3rem 2rem; position: relative; } .cta-block > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; } .cta-block__title { font-family: var(--tokens__font-family-gascogne); font-size: var(--cta-block__title-font-size); font-weight: 500; color: var(--theme__meta-color, white); margin: var(--cta-block__title-margin); line-height: 1.25; } @media (max-width: 899px ) { .cta-block__title { text-align: center; } } .cta-block:hover { opacity: 1; } .cta-block:hover .primary-cta { opacity: 0.8; } @media print { .cta-block { display: none; } } .cta-list li { max-width: 600px; margin: 0 auto; } .cta-list li + li { margin-top: 1rem; border-top: 1px solid var(--tokens__colors__grey-light); padding-top: 1rem; } .cta-list .cta-list__item__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cta-list .cta-list__item__title .title.title--secondary { width: 100%; } @media (max-width: 399px ) { .cta-list .cta-list__item__title .title.title--secondary { --title__font-size: 1.2rem; } } @media (max-width: 399px ) { .cta-list .cta-list__item__title { text-align: center; } } .cta-list .cta-list__item__cta { --primary-cta__background-color: #3687e8; --primary-cta__color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 900px) { .cta-list .cta-list__item__cta { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .cta-list__item__inner { display: grid; grid-gap: 1rem; } @media (min-width: 900px) { .cta-list__item__inner { grid-template-columns: auto 1fr; grid-gap: 2rem; width: 100%; } } .data-by-state__module { background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1rem; } .data-by-state__text-content { font-family: var(--tokens__font-family-styrene); font-size: 14px; color: #787878; line-height: 1.4; } .data-by-state__module--padded { background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1rem; padding: 2rem; } .data-by-state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .data-by-state > * + * { margin-top: 1rem; } .data-by-state__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 399px ) { .data-by-state__header > * + * { margin-top: 0.5rem; } } @media (min-width: 900px) { .data-by-state__header { display: grid; grid-gap: 0.5rem; grid-template-columns: 1fr 4fr 3fr; } } @media print { .data-by-state__header { display: none; } } .data-by-state__instructions { font-family: var(--tokens__font-family-styrene); font-size: 14px; color: #787878; line-height: 1.4; } .data-by-state__instructions svg { width: 28px; height: 28px; } @media (min-width: 900px) { .data-by-state__instructions { grid-column: 1 / 3; } } .data-by-state__current { background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .data-by-state__current > * + * { margin-top: 0.5rem; } .data-by-state__current__icon { width: 28px; height: 28px; visibility: hidden; } .data-by-state__current h3 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: grid; -ms-flex-line-pack: center; align-content: center; } .data-by-state__current figure svg { width: 64px; max-height: 40px; } .data-by-state__current figure svg * { fill: #bebebe; } .data-by-state__current[aria-selected="true"] .data-by-state__current__icon { visibility: visible; } .data-by-state__current[aria-selected="true"] figure svg path { fill: #3668a7 !important; } @media (min-width: 900px) { .data-by-state__current { grid-column: 1; display: grid; grid-template-columns: 1fr 3fr; } .data-by-state__current figure { grid-column: 1 / 3; padding: 1rem; } .data-by-state__current figure svg { width: 100%; height: auto; } } .data-by-state__search__inner { background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1rem; padding: 0 0 0 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' width='21px' height='21px' role='img' aria-label='Search'%3E%3Cpath d='M21 19.6l-5.2-5.2c1.2-1.5 2-3.5 2-5.6 0-4.9-4-8.9-8.9-8.9C4 0 0 4 0 8.9s4 8.9 8.9 8.9c2.1 0 4-.7 5.6-2l5.2 5.2 1.3-1.4zM8.9 16.2c-4 0-7.3-3.3-7.3-7.3s3.3-7.3 7.3-7.3 7.3 3.3 7.3 7.3-3.3 7.3-7.3 7.3z' fill='%23bebebe' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E%0A"); background-position: 10px center; background-repeat: no-repeat; } .data-by-state__search h6 { display: none; } .data-by-state__search input { border-bottom: none; } @media (min-width: 900px) { .data-by-state__search { display: block; grid-row: 1; grid-column: 3; } .data-by-state__search h6 { display: block; margin-bottom: 0.5rem; } } .data-by-state__nav { --state-by-state__button-height: 24px; --state-by-state__button-width: 24px; background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); display: grid; grid-template-columns: -webkit-max-content auto -webkit-max-content; grid-template-columns: max-content auto max-content; position: relative; } .data-by-state__nav .data-by-state__tooltip { display: none; } html.no-touchevents .data-by-state__nav:focus-within .data-by-state__tooltip { font-family: var(--tokens__font-family-styrene); display: block; color: #ccc; text-transform: uppercase; font-size: 11px; position: absolute; top: 0; right: 0; padding: 0.5rem; background: rgba(255, 255, 255, 0.75); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); z-index: 10; } .data-by-state__nav.focus-within .data-by-state__tooltip { font-family: var(--tokens__font-family-styrene); display: block; color: #ccc; text-transform: uppercase; font-size: 11px; position: absolute; bottom: 100%; right: 0; padding: 0.5rem; background: white; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); z-index: 10; } .data-by-state__nav [role="tablist"] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; overflow-x: scroll; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .data-by-state__nav [role="tab"] { text-align: center; display: grid; grid-gap: 0.5rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; scroll-snap-align: start; padding-top: 2rem; padding-bottom: 2rem; position: relative; grid-template-columns: 1fr; } .data-by-state__nav [role="tab"] svg { max-width: 100%; -ms-flex-item-align: center; align-self: center; height: 50px; margin: 0 auto; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); } .data-by-state__nav [role="tab"] svg * { fill: #bebebe; } .no-touchevents .data-by-state__nav [role="tab"]:hover { cursor: pointer; } .no-touchevents .data-by-state__nav [role="tab"]:hover svg { -webkit-transform: scale(1.1); transform: scale(1.1); } .data-by-state__nav [role="tab"][aria-selected="true"] svg path { fill: #3668a7 !important; } .no-touchevents .data-by-state__nav [role="tab"][aria-selected="true"]:hover { cursor: default; } .no-touchevents .data-by-state__nav [role="tab"][aria-selected="true"]:hover svg { -webkit-transform: none; transform: none; } .data-by-state__nav [role="tab"][aria-selected="true"]::after { content: ""; display: block; width: 16px; height: 16px; position: absolute; bottom: 10px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.0427' cy='14.7086' r='14.4694' fill='white'/%3E%3Crect x='8.64648' y='15.687' width='3.00236' height='6.57197' transform='rotate(-46.0362 8.64648 15.687)' fill='%233668a7'/%3E%3Crect x='19.2749' y='9.80505' width='3.00236' height='11.6113' transform='rotate(43.9638 19.2749 9.80505)' fill='%233668a7'/%3E%3C/svg%3E%0A"); background-size: cover; } .data-by-state__nav [role="tab"] + [role="tab"] { margin-left: 0.5rem; } .data-by-state__nav .data-by-state__nav__controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 0.5rem; } .data-by-state__nav .data-by-state__nav__controls button { width: var(--state-by-state__button-width); height: var(--state-by-state__button-height); } .data-by-state__nav .data-by-state__nav__controls svg { width: var(--state-by-state__button-width); height: var(--state-by-state__button-height); } .data-by-state__nav .data-by-state__nav__controls.controls--next svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media (min-width: 900px) { .data-by-state__nav { grid-column: 2 / 4; } } .data-by-state__data-panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .data-by-state__data-panel > * + * { margin-top: 0.5rem; } .data-by-state__data-panel[aria-hidden="true"] { display: none; } @media print { .data-by-state__data-panel[aria-hidden="true"] { display: block; margin-top: 1rem; } } .data-by-state__data-panel header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.5rem; } .data-by-state__data-panel header > * + * { margin-left: 1rem; } .data-by-state__data-panel header h6 { display: none; } .data-by-state__data-panel header > svg { height: 50px; } .data-by-state__data-panel header > svg path { fill: #3668a7 !important; } .data-by-state__data-panel header .primary-cta { display: none; } @media (min-width: 900px) { .data-by-state__data-panel header { background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1rem; display: grid; grid-template-columns: auto 1fr auto; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; padding: 1.5rem 2rem 2rem; row-gap: 1.5rem; } .data-by-state__data-panel header h6 { display: block; grid-column: 1 / 4; } .data-by-state__data-panel header h3 { --title__font-size: 2.6875rem; } .data-by-state__data-panel header .primary-cta { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } @media print { .data-by-state__data-panel header h6 { display: none; } .data-by-state__data-panel header .primary-cta { display: none; } } .data-by-state__data-panel__sources { background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1rem; padding: 2rem; font-family: var(--tokens__font-family-styrene); font-size: 14px; color: #787878; line-height: 1.4; display: grid; grid-gap: 0.5rem; width: 100%; } .data-by-state__data-panel__sources ul { display: grid; grid-gap: 0.5rem; } @media (min-width: 900px) { .data-by-state__data-panel__sources { row-gap: 2rem; } .data-by-state__data-panel__sources ul { grid-template-columns: 1fr 1fr; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; row-gap: 1.5rem; } } .data-by-state__data-panel__sources a { text-decoration: underline; } .data-by-state__data-panel__downloads { background: var(--tokens__colors__grey-lighter); border-bottom: 2px solid var(--tokens__colors__grey-light); padding: 1rem; padding: 2rem; display: grid; grid-gap: 0.5rem; } .data-by-state__data-panel__downloads ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .data-by-state__data-panel__downloads ul > * + * { margin-top: 0.5rem; } @media (min-width: 900px) { .data-by-state__data-panel__downloads { row-gap: 2rem; } .data-by-state__data-panel__downloads ul { display: grid; grid-template-columns: 1fr 1fr; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; row-gap: 1.5rem; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } } .data-by-state__layers { display: grid; row-gap: 2rem; width: 100%; } .data-by-state__layer { display: grid; row-gap: 1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .data-by-state__layer figure iframe { max-width: 100% !important; width: 100%; } .data-by-state__layer .title { margin-bottom: 1rem; } @media (min-width: 900px) { .data-by-state__layer.data-by-state__layer--flipped .layer__text { grid-column: 2; } .data-by-state__layer.data-by-state__layer--flipped figure { grid-column: 1; } } @media (min-width: 900px) { .data-by-state__layer.data-by-state__layer--double figure { grid-column: auto; } } .data-by-state__layer.data-by-state__layer--text, .data-by-state__layer.data-by-state__layer--graph, .data-by-state__layer.data-by-state__layer--image, .data-by-state__layer.data-by-state__layer--table { max-width: 715px; grid-template-columns: 1fr; justify-self: center; } .data-by-state__layer.data-by-state__layer--graph figure { grid-column: auto; grid-row: auto; } @media (min-width: 900px) { .data-by-state__layer { grid-template-columns: 1fr 1fr; row-gap: 0; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; } .data-by-state__layer .layer__text { grid-column: 1; } .data-by-state__layer figure { grid-column: 2; grid-row: 1 / 3; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } :root { --dropcap__size: 3.5rem; --dropcap__font-size: 2.25rem; --dropcap__margin-top: 0.5rem; --dropcap__margin-right: 0.625rem; --dropcap__margin-top: -0.5rem; --dropcap__margin-left: calc(var(--content-gutter) * -1); } @media (min-width: 900px) { :root { --dropcap__size: 4.5rem; --dropcap__font-size: 3.125rem; --dropcap__margin-top: -1.125rem; --dropcap__margin-right: 0.75rem; --dropcap__margin-left: calc(var(--content-gutter) * -1); } } .dropcap { display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: var(--dropcap__size); width: var(--dropcap__size); position: relative; background: var(--theme__background-color, #00142c); z-index: 0; float: left; margin-top: var(--dropcap__margin-top); margin-left: var(--dropcap__margin-left); margin-right: var(--dropcap__margin-right); font-family: var(--tokens__font-family-styrene); font-size: var(--dropcap__font-size); font-weight: 900; color: var(--theme__title-color, white); line-height: 0; padding-bottom: 0.3rem; } .dropcap > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; } @media print { .dropcap { background: black !important; color: white !important; } } :root { --dropdown-trigger__icon-opacity: 0.25; --dropdown-trigger__padding-v: 1rem; --dropdown-trigger__color: #222; } .dropdown-trigger { font-family: var(--tokens__font-family-styrene); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--dropdown-trigger__padding-v) 0; color: var(--dropdown-trigger__color); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); position: relative; z-index: 0; } .dropdown-trigger::after { content: ""; background: url('data:image/svg+xml;utf8,'); position: absolute; width: 13px; height: 8px; right: 0.75rem; opacity: var(--dropdown-trigger__icon-opacity); background-size: cover; -webkit-transition: 0.2s -webkit-transform; transition: 0.2s -webkit-transform; transition: 0.2s transform; transition: 0.2s transform, 0.2s -webkit-transform; z-index: -1; } .dropdown-trigger:hover { --dropdown-trigger__icon-opacity: 0.5; --dropdown-trigger__color: black; } .external-link > svg { stroke: currentColor; width: 0.625rem; height: 0.625rem; margin-left: 0.25rem; } .faded-bg { -o-object-fit: cover; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.15; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .feature-tag { font-family: var(--tokens__font-family-styrene); font-style: normal; font-weight: 900; font-size: 13px; line-height: 16px; text-transform: uppercase; display: inline-block; padding: 0.5rem 0; } .feature-tag.feature-tag--new { color: #e33c46; } .feature-tag.feature-tag--updated { color: #3687e8; } .filter__item { display: none; } :root { --flex-table-container__outdent: calc(var(--layer__gutters__h)); } .flex-table-container { position: relative; } .flex-table-container__main { overflow-x: scroll; -webkit-overflow-scrolling: touch; width: 100%; } .flex-table-container__main::-webkit-scrollbar { display: none; } @media (max-width: 899px ) { .layer .flex-table-container__main { margin-right: calc(-1 * var(--flex-table-container__outdent)); padding-right: var(--flex-table-container__outdent); } .layer--cardify .flex-table-container__main { --flex-table-container__outdent: calc(var(--layer__gutters__h) + var(--layer__cardify__padding-h)); } } .flex-table-container__clone { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; } :root { --form__input-border-color: #b8b8b8; --form__input-label-color: #686868; --form__input-bg: rgba(255, 255, 255, 0.75); --form__input-bottom-margin: 45px; --form__cell-width: 100%; --form__button-float: right; --form__button-width: 275px; --form__button-max-width: 45%; --form__padding: 2rem; --form__gutter: 1rem; --form__background: #f2f2f2; --form__success__border-color: rgba(0, 0, 0, 0.1); --form__button-height: 2.5rem; --form__empty-cell-display: none; } @media (min-width: 900px) { :root { --form__padding: 4rem; --form__gutter: 2rem; --form__button-height: 3.5rem; } } .form { --loader__radius: 24px; padding: var(--form__padding); background: var(--form__background); } .form:not(.form--error) .form__fallback { display: none; } .form__footer { margin: 1rem 0 3rem; } .form[aria-busy] .mainDiv { display: none; } .form:not([aria-busy]) .loader { display: none; } .form .mainDiv { -webkit-box-shadow: none; box-shadow: none; } .form #clickdimensionsForm { height: auto !important; } .form .clickdform { padding: 0 !important; } .form .clickdform.mainDiv { height: auto; float: none; overflow: visible; border: none; border-radius: 0; background: transparent; } .form .clickdform .floatLeft { float: none; } .form__success { padding: 0.5rem; border-top: 2px solid var(--form__success__border-color); border-bottom: 1px solid var(--form__success__border-color); margin-bottom: 1rem; } .form form { position: relative; } .form form * { font-family: var(--tokens__font-family-styrene) !important; } .form form .clear { height: 0; } .form form .responsiveCell div.alignTop { display: inherit; } @media (max-width: 899px ) { .form form .responsiveRow .responsiveCell { margin-top: 1rem; } } @media (min-width: 900px) { .form form .responsiveRow { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } } .form form .responsiveRow + .responsiveRow { margin-top: var(--form__gutter); } .form form .emptyCell { display: var(--form__empty-cell-display) !important; } .form form span[class*="maxSize"], .form form span[class*="minSize"] { display: block; margin: 5px 0; } .form form [class*="maxSize"], .form form [class*="minSize"], .form form .responsiveCell { display: block; width: auto !important; min-width: 0 !important; } .form form [class*="maxSize"].width100per, .form form [class*="minSize"].width100per, .form form .responsiveCell.width100per { width: 100% !important; max-width: none !important; } .form form [class*="maxSize"].line, .form form [class*="minSize"].line, .form form .responsiveCell.line { padding-bottom: 0 !important; } .form form [class*="maxSize"].line *, .form form [class*="minSize"].line *, .form form .responsiveCell.line * { display: none !important; } .form form [class*="maxSize"] b, .form form [class*="minSize"] b, .form form .responsiveCell b { font-size: 0.95rem !important; display: block; display: inline-block; margin-bottom: 5px; font-weight: 300 !important; color: #414141; line-height: 1.25em; width: 100%; max-width: 100%; } .form form span.maxSize1, .form form label:not(.title) { font-size: 0.75rem !important; color: var(--form__input-label-color) !important; } .form form .requiredInfo { margin-top: 0.25rem; color: var(--title__color); } .form form select { width: 100%; max-width: 100% !important; display: block; margin: 10px 0; } .form form textarea, .form form input[type="text"], .form form input[type="email"], .form form input[type="password"], .form form input[type="tel"] { display: block; width: 100% !important; background: var(--form__input-bg); border: none; -webkit-appearance: none; outline: none; border-bottom: solid 2px var(--form__input-border-color); margin-top: 0.25rem; padding: 0.5rem; font-family: var(--tokens__font-family-styrene) !important; font-size: 0.875rem !important; -webkit-transition: all 250ms; transition: all 250ms; } .form form textarea:focus, .form form input[type="text"]:focus, .form form input[type="email"]:focus, .form form input[type="password"]:focus, .form form input[type="tel"]:focus { border-bottom-color: #3687e8; } .form form textarea { height: 250px !important; resize: none; max-width: 100% !important; } .form form input[type="text"] { max-width: 100% !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form form input[type="checkbox"].floatLeft { margin: -0.125rem 0.25rem 0 0; float: left; } .form form input[type="text"].hasDatepicker { width: calc(100% - 20px) !important; min-width: calc(100% - 20px) !important; } .form form .ui-datepicker-trigger { margin-top: 0.75rem; } .form form .QuestionContainer { margin-bottom: 20px; } .form form .QuestionContainer table { margin: 10px 0; table-layout: auto; width: 100%; } .form form .QuestionContainer table tbody { background: transparent; } .form form .QuestionContainer table tr, .form form .QuestionContainer table td { height: 30px; vertical-align: middle; padding: 0; border: none; text-align: left; } .form form .QuestionContainer table tr input[type="checkbox"], .form form .QuestionContainer table td input[type="checkbox"], .form form .QuestionContainer table tr input[type="radio"], .form form .QuestionContainer table td input[type="radio"] { display: inline-block; margin: 0 8px 0 5px; } .form form .QuestionContainer table td:first-child { width: 30px; } .form form .ui-stars-star { margin: 0 5px; } .form form .ui-stars-cancel { margin-right: 5px; } .form form [style*="font-size:16px"] { display: block; margin-bottom: 25px; } .form form input[style="display:none;"] { display: none !important; } .form form .buttonContainer { margin: 0 !important; max-width: 100%; text-align: right; } .form form input[type="button"], .form form input[type="submit"], .form form .buttonContainer input[type="button"] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #3687e8 !important; color: #fff !important; height: var(--form__button-height); width: var(--form__button-width); max-width: var(--form__button-max-width); padding: calc(0.5rem + 1px) 0.5rem 0.5rem; font: 1.125rem var(--tokens__font-family-gascogne) !important; font-weight: 900 !important; cursor: pointer; -webkit-transition: all 250ms; transition: all 250ms; margin: 0 !important; float: var(--form__button-float); border-bottom: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; } .form form input[type="button"][disabled], .form form input[type="submit"][disabled], .form form .buttonContainer input[type="button"][disabled] { opacity: 0.5; pointer-events: none; } .form form input[type="button"].WizardPrevButton, .form form input[type="submit"].WizardPrevButton, .form form .buttonContainer input[type="button"].WizardPrevButton { float: left; } .form form input[type="button"]:hover, .form form input[type="submit"]:hover, .form form .buttonContainer input[type="button"]:hover { background: #64a2ed !important; } @media (max-width: 899px ) { .form form input[type="button"], .form form input[type="submit"], .form form .buttonContainer input[type="button"] { --form__button-max-width: none; --form__button-width: auto; } } .form .form__fields li + li { margin-top: 1rem; } .form.form--native .form__success-message, .form.form--native .form__error-message { font-size: var(--text-block__font-size); /** * Link Styles * Underline styling boosted from Medium: https://medium.design/crafting-link-underlines-on-medium-7c03a9274f9 */ /** * List Styles */ /** * Inline image Styles * Provided to better support legacy text-blocks */ /** * Extensions */ text-align: center; } .form.form--native .form__success-message > *, .form.form--native .form__error-message > * { margin-top: 1.5rem; } .form.form--native .form__success-message a, .form.form--native .form__error-message a { text-decoration: none; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, rgba(0, 0, 0, 0.84)), color-stop(0, rgba(0, 0, 0, 0))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84) 100%, rgba(0, 0, 0, 0) 0); background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, currentColor), color-stop(0, currentColor)); background-image: linear-gradient(to right, currentColor 100%, currentColor 0); background-image: url('data:image/svg+xml;utf8,'); background-size: 1px 1px; background-position: 0 1.05em; background-position: 0 calc(1em + 4px); -webkit-tap-highlight-color: rgba(0, 0, 0, 0.54); } .form.form--native .form__success-message a:hover, .form.form--native .form__error-message a:hover { background-image: url('data:image/svg+xml;utf8,'); } .form.form--native .form__success-message h2, .form.form--native .form__error-message h2, .form.form--native .form__success-message h3, .form.form--native .form__error-message h3, .form.form--native .form__success-message h4, .form.form--native .form__error-message h4, .form.form--native .form__success-message h5, .form.form--native .form__error-message h5, .form.form--native .form__success-message h6, .form.form--native .form__error-message h6 { margin-top: var(--text-block__header__margin-top); margin-bottom: var(--text-block__header__margin-bottom); } .form.form--native .form__success-message h2 a, .form.form--native .form__error-message h2 a, .form.form--native .form__success-message h3 a, .form.form--native .form__error-message h3 a, .form.form--native .form__success-message h4 a, .form.form--native .form__error-message h4 a, .form.form--native .form__success-message h5 a, .form.form--native .form__error-message h5 a, .form.form--native .form__success-message h6 a, .form.form--native .form__error-message h6 a { text-decoration: none; color: var(--tokens__colors__blue-dark); } .form.form--native .form__success-message h2 + h6, .form.form--native .form__error-message h2 + h6, .form.form--native .form__success-message h3 + h6, .form.form--native .form__error-message h3 + h6, .form.form--native .form__success-message h4 + h6, .form.form--native .form__error-message h4 + h6, .form.form--native .form__success-message h5 + h6, .form.form--native .form__error-message h5 + h6, .form.form--native .form__success-message h6 + h6, .form.form--native .form__error-message h6 + h6 { --text-block__header__margin-top: 1rem; } .form.form--native .form__success-message h2, .form.form--native .form__error-message h2 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-size: 1.625rem; --title__line-height: 1.2; } @media (min-width: 900px) { .form.form--native .form__success-message h2, .form.form--native .form__error-message h2 { --title__font-size: 1.875rem; } } .form.form--native .form__success-message h3, .form.form--native .form__error-message h3 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-size: 1rem; --title__font-family: var(--tokens__font-family-styrene); --title__font-weight: 900; --title__line-height: 1.4; } @media (min-width: 900px) { .form.form--native .form__success-message h3, .form.form--native .form__error-message h3 { --title__font-size: 1.25rem; } } .form.form--native .form__success-message h4, .form.form--native .form__error-message h4 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-family: var(--tokens__font-family-faustina); --title__font-size: 1.25rem; --title__font-weight: 600; --title__color: black; } @media (min-width: 900px) { .form.form--native .form__success-message h4, .form.form--native .form__error-message h4 { --title__font-size: 1.5rem; } } .form.form--native .form__success-message h5, .form.form--native .form__error-message h5 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-family: var(--tokens__font-family-styrene); --title__font-size: 0.75rem; --title__font-weight: 900; --title__letter-spacing: 0.2em; --title__line-height: 1.2; text-transform: uppercase; } .form.form--native .form__success-message h6, .form.form--native .form__error-message h6 { font-family: var(--tokens__font-family-styrene); font-size: 0.625rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.5; color: var(--tag__color); } .form.form--native .form__success-message h6.tag--block, .form.form--native .form__error-message h6.tag--block { --tag__color: white; padding: 4px 8px; background-color: #e6c05b; } .form.form--native .form__success-message h6 + h2, .form.form--native .form__error-message h6 + h2, .form.form--native .form__success-message h6 + h3, .form.form--native .form__error-message h6 + h3, .form.form--native .form__success-message h6 + h4, .form.form--native .form__error-message h6 + h4, .form.form--native .form__success-message h6 + h5, .form.form--native .form__error-message h6 + h5, .form.form--native .form__success-message h6 + h6, .form.form--native .form__error-message h6 + h6 { --text-block__header__margin-top: calc(var(--text-block__header__margin-bottom) * -1); } .form.form--native .form__success-message ul, .form.form--native .form__error-message ul, .form.form--native .form__success-message ol, .form.form--native .form__error-message ol { font-size: 1rem; line-height: 1.5; margin-left: var(--text-block__list__margin-left); display: grid; grid-gap: var(--text-block__list-gutter); } .form.form--native .form__success-message ul li, .form.form--native .form__error-message ul li, .form.form--native .form__success-message ol li, .form.form--native .form__error-message ol li { display: list-item; padding-left: var(--text-block__list-spacing); position: relative; } .form.form--native .form__success-message ul li > ul, .form.form--native .form__error-message ul li > ul, .form.form--native .form__success-message ol li > ul, .form.form--native .form__error-message ol li > ul, .form.form--native .form__success-message ul li > ol, .form.form--native .form__error-message ul li > ol, .form.form--native .form__success-message ol li > ol, .form.form--native .form__error-message ol li > ol { --text-block__list-gutter: 0.5rem; --text-block__list__margin-left: 0; --text-block__list-spacing: 1.5rem; margin-top: 1rem; } @media (min-width: 900px) { .form.form--native .form__success-message ul li > ul, .form.form--native .form__error-message ul li > ul, .form.form--native .form__success-message ol li > ul, .form.form--native .form__error-message ol li > ul, .form.form--native .form__success-message ul li > ol, .form.form--native .form__error-message ul li > ol, .form.form--native .form__success-message ol li > ol, .form.form--native .form__error-message ol li > ol { --text-block__list-spacing: 2rem; } } .form.form--native .form__success-message ul li > ul > li::before, .form.form--native .form__error-message ul li > ul > li::before, .form.form--native .form__success-message ol li > ul > li::before, .form.form--native .form__error-message ol li > ul > li::before { --text-block__bullet-size: 7px; --text-block__bullet-tuck: 10px; background-color: white; background-blend-mode: luminosity; } @media (max-width: 899px ) { .form.form--native .form__success-message ul li > ul > li::before, .form.form--native .form__error-message ul li > ul > li::before, .form.form--native .form__success-message ol li > ul > li::before, .form.form--native .form__error-message ol li > ul > li::before { left: 0; } } @media (min-width: 900px) { .form.form--native .form__success-message ul li > ul > li::before, .form.form--native .form__error-message ul li > ul > li::before, .form.form--native .form__success-message ol li > ul > li::before, .form.form--native .form__error-message ol li > ul > li::before { --text-block__bullet-size: 10px; --text-block__bullet-tuck: 9px; } } .form.form--native .form__success-message ul li > ol > li::before, .form.form--native .form__error-message ul li > ol > li::before, .form.form--native .form__success-message ol li > ol > li::before, .form.form--native .form__error-message ol li > ol > li::before { --text-block__counter-color: currentColor; --text-block__counter-font-size: 1rem; --text-block__counter-top: -1px; opacity: 0.8; } @media (min-width: 900px) { .form.form--native .form__success-message ul li > ol > li::before, .form.form--native .form__error-message ul li > ol > li::before, .form.form--native .form__success-message ol li > ol > li::before, .form.form--native .form__error-message ol li > ol > li::before { --text-block__counter-font-size: 1.5rem; --text-block__counter-top: -5px; } } .form.form--native .form__success-message ul li::before, .form.form--native .form__error-message ul li::before, .form.form--native .form__success-message ol li::before, .form.form--native .form__error-message ol li::before { position: absolute; left: 0; } .form.form--native .form__success-message ul li a, .form.form--native .form__error-message ul li a, .form.form--native .form__success-message ol li a, .form.form--native .form__error-message ol li a { background-position: 0 calc(1em + 3px); } .form.form--native .form__success-message ul > li::before, .form.form--native .form__error-message ul > li::before { content: ""; height: var(--text-block__bullet-size); width: var(--text-block__bullet-size); top: var(--text-block__bullet-tuck); background: var(--text-block__bullet-graphic) center center no-repeat; background-size: contain; } @media (max-width: 899px ) { .form.form--native .form__success-message ul > li::before, .form.form--native .form__error-message ul > li::before { left: 5px; } } .form.form--native .form__success-message ol, .form.form--native .form__error-message ol { counter-reset: custom-counter; } .form.form--native .form__success-message ol > li, .form.form--native .form__error-message ol > li { counter-increment: custom-counter; } .form.form--native .form__success-message ol > li::before, .form.form--native .form__error-message ol > li::before { content: counter(custom-counter); color: var(--text-block__counter-color); font-family: var(--tokens__font-family-styrene); font-size: var(--text-block__counter-font-size); font-weight: 900; top: var(--text-block__counter-top); } .form.form--native .form__success-message ul.text-block__checkmark-list, .form.form--native .form__error-message ul.text-block__checkmark-list { --text-block__bullet-size: 24px; --text-block__bullet-graphic: url("/assets/images/flourishes/check.png"); --text-block__list-spacing: 3.125rem; --text-block__bullet-tuck: 0; --text-block__list-gutter: 2rem; } .form.form--native .form__success-message ul.text-block__checkmark-list ul, .form.form--native .form__error-message ul.text-block__checkmark-list ul { --text-block__bullet-graphic: url("/assets/images/flourishes/bullet.png"); } .form.form--native .form__success-message blockquote, .form.form--native .form__error-message blockquote { margin-left: 2rem; opacity: 0.8; border-left: 2px solid #eee; padding-left: 1.5rem; font-size: 0.95em; } .form.form--native .form__success-message blockquote > *, .form.form--native .form__error-message blockquote > * { margin-top: 0; } .form.form--native .form__success-message .wp-caption-text, .form.form--native .form__error-message .wp-caption-text { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-family: var(--tokens__font-family-styrene); --title__font-size: 0.75rem; --title__font-weight: 900; --title__letter-spacing: 0.2em; --title__line-height: 1.2; text-transform: uppercase; --title__font-weight: 500; --title__font-size: 0.6875rem; --title__color: #888; margin-top: 0.5em; text-align: center; } .form.form--native .form__success-message div.wp-caption, .form.form--native .form__error-message div.wp-caption, .form.form--native .form__success-message figure, .form.form--native .form__error-message figure, .form.form--native .form__success-message img.alignnone, .form.form--native .form__error-message img.alignnone { width: 100% !important; height: auto; } .form.form--native .form__success-message .wp-caption, .form.form--native .form__error-message .wp-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .form.form--native .form__success-message .wp-caption.aligncenter img, .form.form--native .form__error-message .wp-caption.aligncenter img, .form.form--native .form__success-message .wp-caption.alignleft img, .form.form--native .form__error-message .wp-caption.alignleft img, .form.form--native .form__success-message .wp-caption.alignright img, .form.form--native .form__error-message .wp-caption.alignright img, .form.form--native .form__success-message img.aligncenter, .form.form--native .form__error-message img.aligncenter, .form.form--native .form__success-message img.alignleft, .form.form--native .form__error-message img.alignleft, .form.form--native .form__success-message img.alignright, .form.form--native .form__error-message img.alignright { width: auto; height: auto; max-width: 100%; justify-self: center; } @media (min-width: 900px) { .form.form--native .form__success-message .wp-caption.aligncenter img.alignleft, .form.form--native .form__error-message .wp-caption.aligncenter img.alignleft, .form.form--native .form__success-message .wp-caption.alignleft img.alignleft, .form.form--native .form__error-message .wp-caption.alignleft img.alignleft, .form.form--native .form__success-message .wp-caption.alignright img.alignleft, .form.form--native .form__error-message .wp-caption.alignright img.alignleft, .form.form--native .form__success-message img.aligncenter.alignleft, .form.form--native .form__error-message img.aligncenter.alignleft, .form.form--native .form__success-message img.alignleft.alignleft, .form.form--native .form__error-message img.alignleft.alignleft, .form.form--native .form__success-message img.alignright.alignleft, .form.form--native .form__error-message img.alignright.alignleft, .form.form--native .form__success-message .wp-caption.aligncenter img.alignright, .form.form--native .form__error-message .wp-caption.aligncenter img.alignright, .form.form--native .form__success-message .wp-caption.alignleft img.alignright, .form.form--native .form__error-message .wp-caption.alignleft img.alignright, .form.form--native .form__success-message .wp-caption.alignright img.alignright, .form.form--native .form__error-message .wp-caption.alignright img.alignright, .form.form--native .form__success-message img.aligncenter.alignright, .form.form--native .form__error-message img.aligncenter.alignright, .form.form--native .form__success-message img.alignleft.alignright, .form.form--native .form__error-message img.alignleft.alignright, .form.form--native .form__success-message img.alignright.alignright, .form.form--native .form__error-message img.alignright.alignright { width: 18.75rem; margin: 0.75em auto; } .form.form--native .form__success-message .wp-caption.aligncenter img.alignleft, .form.form--native .form__error-message .wp-caption.aligncenter img.alignleft, .form.form--native .form__success-message .wp-caption.alignleft img.alignleft, .form.form--native .form__error-message .wp-caption.alignleft img.alignleft, .form.form--native .form__success-message .wp-caption.alignright img.alignleft, .form.form--native .form__error-message .wp-caption.alignright img.alignleft, .form.form--native .form__success-message img.aligncenter.alignleft, .form.form--native .form__error-message img.aligncenter.alignleft, .form.form--native .form__success-message img.alignleft.alignleft, .form.form--native .form__error-message img.alignleft.alignleft, .form.form--native .form__success-message img.alignright.alignleft, .form.form--native .form__error-message img.alignright.alignleft { float: left; margin-right: 2.5em; } .form.form--native .form__success-message .wp-caption.aligncenter img.alignright, .form.form--native .form__error-message .wp-caption.aligncenter img.alignright, .form.form--native .form__success-message .wp-caption.alignleft img.alignright, .form.form--native .form__error-message .wp-caption.alignleft img.alignright, .form.form--native .form__success-message .wp-caption.alignright img.alignright, .form.form--native .form__error-message .wp-caption.alignright img.alignright, .form.form--native .form__success-message img.aligncenter.alignright, .form.form--native .form__error-message img.aligncenter.alignright, .form.form--native .form__success-message img.alignleft.alignright, .form.form--native .form__error-message img.alignleft.alignright, .form.form--native .form__success-message img.alignright.alignright, .form.form--native .form__error-message img.alignright.alignright { float: right; margin-left: 2.5em; } } .form.form--native .form__success-message iframe, .form.form--native .form__error-message iframe { justify-self: center; max-width: 100%; } .form.form--native .form__success-message > *:first-child, .form.form--native .form__error-message > *:first-child { margin-top: 0; } .form.form--native .form__success-message > *:last-child, .form.form--native .form__error-message > *:last-child { margin-bottom: 0; } .form.form--native .form__success-message--font-sans-serif, .form.form--native .form__error-message--font-sans-serif { font-family: var(--tokens__font-family-styrene); } .form.form--native .form__success-message--font-size-small, .form.form--native .form__error-message--font-size-small { --text-block__font-size: 1rem; --p__line-height: 1.625; } .form.form--native .form__success-message--font-size-smallest, .form.form--native .form__error-message--font-size-smallest { --text-block__font-size: 0.74em; --p__line-height: 1.625; } .form.form--native .form__success-message--line-height-large, .form.form--native .form__error-message--line-height-large { --p__line-height: 1.875; } .form.form--native .form__success-message--tighter, .form.form--native .form__error-message--tighter { --text-block__gutters: 0.5rem; } .form.form--native .form__success-message--colors-light, .form.form--native .form__error-message--colors-light { --tag__color: white; color: white; } .form.form--native .form__success-message--colors-light h2, .form.form--native .form__error-message--colors-light h2, .form.form--native .form__success-message--colors-light h3, .form.form--native .form__error-message--colors-light h3, .form.form--native .form__success-message--colors-light h4, .form.form--native .form__error-message--colors-light h4, .form.form--native .form__success-message--colors-light h5, .form.form--native .form__error-message--colors-light h5 { color: inherit; } .form.form--native .form__success-message--colors-grey, .form.form--native .form__error-message--colors-grey { color: var(--tokens__colors__grey); } .form.form--native .form__success-message--centered, .form.form--native .form__error-message--centered { text-align: center; } @media print { .form.form--native .form__success-message a[href], .form.form--native .form__error-message a[href] { font-style: italic !important; text-decoration: none !important; font-weight: 400 !important; word-break: break-all; } .form.form--native .form__success-message a[href]::after, .form.form--native .form__error-message a[href]::after { content: " [" attr(href) "]"; display: inline; font-style: normal; } } @media (max-width: 899px ) { .form main { padding: 0; margin-bottom: 60px; } .form main form { padding: 30px 33px 0; margin-bottom: 23px; } .form main form .buttonContainer input[type="button"], .form main form .buttonContainer input[type="submit"] { top: 23px; height: 46px; font-size: 1rem !important; line-height: 46px !important; letter-spacing: 0.2px; max-width: 181px; } } .form--outdent { margin-bottom: calc(var(--form__gutter) * 2); } .form--outdent .buttonContainer { position: absolute; top: 100%; right: 0; } .form--outdent:not([aria-busy]):not(.form--error) { padding-bottom: var(--form__gutter); } .form--transparent { --form__background: transparent; --form__input-border-color: rgba(255, 255, 255, 0.5); --form__input-label-color: rgba(255, 255, 255, 0.75); --form__input-bg: rgba(255, 255, 255, 0.25); --form__padding: 0; --title__color: white; --form__success__border-color: rgba(255, 255, 255, 0.1); color: white; } .form--transparent .clickdform input[type="text"], .form--transparent .clickdform textarea, .form--transparent .clickdform input[type="checkbox"] + span { color: white !important; } .form.form--centered { --form__button-float: none; } .form.form--centered input[type="button"], .form.form--centered input[type="submit"], .form.form--centered .buttonContainer input[type="button"] { margin-left: auto !important; margin-right: auto !important; } .form--horizontal { --form__cell-width: none; --form__button-float: none; --form__button-width: 100%; --form__button-height: 2.75rem; --form__button-max-width: none; --form__input-bottom-margin: 1rem; --form__empty-cell-display: block; } .form--horizontal form { padding: 0; margin-bottom: 0; } .form--horizontal .buttonContainer { width: 100%; } @media print { .form { display: none; } } :root { --gallery-list__item-width: 80vw; --gallery-list__grid-gap: 1.5rem; } .gallery-list { display: grid; grid-gap: var(--gallery-list__grid-gap); grid-auto-flow: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding-right: 1.5rem; } .gallery-list > * { width: var(--gallery-list__item-width); } .scrolling-container .gallery-list { white-space: initial; } :root { --hero__padding-v: 2rem; --hero__padding-h: 0.5rem; --hero__justify-content: center; --hero__min-height: 20rem; --hero__title__font-size: 1.75rem; --hero__subtitle__font-size: 0.875rem; --hero__subtitle__opacity: 0.7; --hero__meta__grid-auto-flow: row; --hero__meta__grid-gap: 1.5rem; --hero__working-group__margin-top: 1rem; --hero__working-group__image-size: 2.25rem; --hero__badge-top: 0.5rem; --hero__badge-right: 0.5rem; --hero__badge-font-size: 0.875rem; --hero__badge-size: 4.5rem; --hero__image: null; } @media (min-width: 400px) { :root { --hero__title__font-size: 2.25rem; } } @media (min-width: 900px) { :root { --hero__title__font-size: 4rem; --hero__subtitle__font-size: 1.25rem; --hero__meta__grid-auto-flow: column; --hero__meta__grid-gap: 2rem; --hero__working-group__image-size: 2.75rem; --hero__badge-top: calc(var(--hero__padding-v) - 0.5rem); --hero__badge-right: var(--hero__padding-v); --hero__badge-font-size: 1.25rem; --hero__badge-size: 6.5rem; } } @media (min-width: 1280px) { :root { --hero__badge-left: calc(50% + 31.5rem); } } .hero { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: var(--hero__justify-content); -ms-flex-pack: var(--hero__justify-content); justify-content: var(--hero__justify-content); min-height: var(--hero__min-height); padding: calc(var(--hero__padding-v) + var(--site-header__subnav__height) + 1rem) var(--hero__padding-h) calc(var(--hero__padding-v) + 0.5rem + var(--hero__tuck)); max-width: 1920px; margin: 0 auto; background-color: var(--theme__background-color, #00142c); position: relative; margin-bottom: calc(-1 * var(--hero__tuck)); } body[data-theme] .hero:not([data-has-image="true"]) { background-image: var(--theme__bg); background-size: cover; } .hero > *:not(img) { z-index: 1; } .hero > h1 { --title__font-size: var(--hero__title__font-size); --title__color: var(--theme__title-color, white); max-width: 900px; margin-bottom: -0.2em; z-index: 2; } @media print { .hero > h1 { font-size: 2rem; } } .hero > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero > img:not([src]):not([srcset]) { visibility: hidden; } .hero__categories, .hero__subtitle, .hero__links, .hero__meta, .hero__working-group, .hero__share { color: var(--theme__meta-color, white); } .hero__share { padding-top: 2rem; opacity: 0.6; margin-bottom: -1rem; } .hero__share .title { margin-bottom: 1rem; } .hero__share .social-links > a svg { width: 24px; height: 24px; fill: var(--theme__meta-color, white); } .hero__categories, .hero__links, .hero__meta { opacity: 0.6; white-space: nowrap; } .hero__categories a, .hero__links a, .hero__meta a { padding-bottom: 0.5rem; position: relative; } .hero__categories a svg, .hero__links a svg, .hero__meta a svg { height: 3px; width: calc(100% + 0.5rem); position: absolute; left: 0; bottom: 0; } .hero__subtitle, .hero__meta { font-family: var(--tokens__font-family-styrene); margin-top: 1rem; } .hero__categories, .hero__links { --link-list__gutter: 2rem; } .hero__links, .hero__meta { --link-list__gutter__top: 1rem; } .hero__categories { margin-bottom: 1.75rem; } .hero__categories > ul > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; } @media print { .hero__categories { display: none; } } .hero__subtitle { font-size: var(--hero__subtitle__font-size); font-weight: 500; max-width: var(--layer__max-width); padding: 0 var(--layer__gutters__h); opacity: var(--hero__subtitle__opacity); } .hero__links, .hero__cta { margin-top: 1.75rem; } .hero__meta { --link-list__gutter: 0.5rem; font-size: 0.875rem; display: grid; grid-auto-flow: var(--hero__meta__grid-auto-flow); grid-gap: var(--hero__meta__grid-gap); } @media print { .hero__meta { font-size: 1.4rem; margin-top: 1rem; } } .hero__meta + .hero__working-group { --hero__working-group__margin-top: 2rem; } .hero__working-group { margin-top: var(--hero__working-group__margin-top); } .hero__working-group > h6 { --title__font-size: 0.625rem; opacity: 0.6; margin-bottom: 0.75rem; } .hero__working-group > ul { display: grid; grid-auto-flow: column; grid-gap: 0.375rem; } .hero__badge { position: absolute; top: calc(var(--hero__badge-top) + var(--site-header__subnav__height)); right: var(--hero__badge-right); left: var(--hero__badge-left); height: var(--hero__badge-size); width: var(--hero__badge-size); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--theme__label-color, var(--tokens__colors__red)); border-radius: 50%; padding: 1rem; font-family: var(--tokens__font-family-gascogne); font-size: var(--hero__badge-font-size); font-weight: 900; line-height: 1.1; color: var(--tokens__colors__yellow); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1; } @media print { .hero { min-height: 0; padding: 2rem; background: none !important; margin-bottom: 2rem; } .hero__badge { display: none; } .hero__links { display: none; } } :root { --image-block__font-size: 1rem; --image-block__flourish-size: 1.375rem; --image-block__padding: 1.25rem; --image-block__min-height: 24rem; --image-block__background-color: #023674; --image-block__cta__content__font-size: 1rem; } @media (min-width: 900px) { :root { --image-block__font-size: 1.75rem; --image-block__padding: 4rem; --image-block__cta__content__font-size: 1.25rem; } } .image-block { --title__color: white; --a__hover-opacity: 0.8; position: relative; display: grid; -ms-flex-line-pack: center; align-content: center; justify-items: center; background-color: var(--image-block__background-color); text-align: center; margin-top: var(--image-block__flourish-size); min-height: var(--image-block__min-height); padding: var(--image-block__padding); color: white; } @media print { .image-block { background: none; text-align: left; } } .image-block > *:not(> img) { z-index: 1; } .image-block__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .image-block__fringe { position: absolute; top: calc(var(--image-block__flourish-size) * -1); left: 0; right: 0; width: 100%; height: var(--image-block__flourish-size); } .image-block--quote { --person__title__color: white; } .image-block--quote > *:not(img) { max-width: 50rem; } .image-block--quote .blockquote__main { font-size: var(--image-block__font-size); } @media (max-width: 899px ) { .image-block--quote footer .title--secondary { --title__font-size: 1.25rem; } } .image-block--cta { --image-block__background-color: #00142c; --primary-cta__color: white; --primary-cta__background-color: var(--tokens__colors__blue); color: white; } .image-block--cta section { max-width: 900px; display: grid; grid-gap: 1rem; } .image-block--cta section > p { font-family: var(--tokens__font-family-styrene); font-size: var(--image-block__cta__content__font-size); text-align: center; } @media (min-width: 900px) { .image-block--cta section > header > h2 { --title__font-size: 2.5rem; } } .image-block--cta:hover { opacity: 1; } .image-block--cta:hover .primary-cta { opacity: 0.6; } :root { --image__grid-gap: 0.375rem; --image__font-size: 0.6875rem; --image__cite__font-size: 0.75em; --image__border-bottom: -0.75rem; --image__figcaption__white-space: normal; --image__caption__gutter: 0.75rem; } @media (min-width: 755px) { :root { --image__caption__gutter: 0; } } @media (min-width: 900px) { :root { --image__grid-gap: 1rem; --image__font-size: 0.875rem; --image__border-bottom: -1.5rem; --image__figcaption__white-space: inherit; } } .image { position: relative; display: grid; grid-gap: var(--image__grid-gap); -webkit-box-align: end; -ms-flex-align: end; align-items: end; font-family: var(--tokens__font-family-styrene); font-size: var(--image__font-size); text-align: right; line-height: 1.2; } .image img { width: 100%; } .image figcaption { margin-right: var(--image__caption__gutter); } .image--has-credit { margin-bottom: calc(var(--image__border-bottom) * -1); } .image--has-credit figcaption { white-space: var(--image__figcaption__white-space); } .image--has-credit cite { font-size: var(--image__cite__font-size); opacity: 0.5; margin-right: var(--image__caption__gutter); } .image--has-credit::after { content: ""; position: absolute; bottom: var(--image__border-bottom); right: var(--image__caption__gutter); height: 2px; width: 13rem; background: #eff1f0; } @media (max-width: 899px ) { .image--has-credit figcaption { margin-top: 0.25rem; } } @media (min-width: 900px) { .image--has-credit { grid-template-columns: 1fr auto; } .image--has-credit img { grid-column: 1/3; } .image--has-credit cite { margin-bottom: 0.125rem; } } @media print { .image { padding: 0; text-align: left; height: 1rem; } .image::after { content: "[Image]"; display: block; text-align: center; padding: 2rem; } .image img { display: none; } .image figcaption { text-align: center; } } :root { --infographic__heading-size: 1.5rem; --infographic__line-pct: 100%; --infographic__item-padding: 1.875rem 0; --infographic__min-width: 16rem; } @media (min-width: 900px) { :root { --infographic__heading-size: 1.875rem; --infographic__min-width: 24rem; } } @media (min-width: 40rem) { :root { --infographic__line-pct: 85%; --infographic__item-padding: 1.875rem; } } .infographic-melange { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--infographic__min-width), 1fr)); overflow: hidden; } .infographic-melange__item { padding: var(--infographic__item-padding); position: relative; } .infographic-melange__item > img { margin: 0 auto; } .infographic-melange__item::before, .infographic-melange__item::after { content: ""; display: block; background-color: var(--tokens__colors__grey-light); position: absolute; margin: auto; } .infographic-melange__item::before { top: -1px; left: 0; right: 0; height: 1px; width: var(--infographic__line-pct); } .infographic-melange__item::after { left: -1px; top: 0; bottom: 0; width: 1px; height: var(--infographic__line-pct); } .infographic-melange__larger-items { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); } @media print { .infographic-melange { display: block; } .infographic-melange > * { display: none; } .infographic-melange::after { content: "[Infographics]"; display: block; text-align: center; padding: 2rem; } } :root { --layer__gutters__v: 2.5rem; --layer__gutters__h: 1.25rem; --layer__gutters__inner: 1.25rem; --layer__max-width: 715px; --layer__main-bg: inherit; } @media (min-width: 900px) { :root { --layer__gutters__v: 3rem; --layer__gutters__h: 2rem; --layer__gutters__inner: 2rem; } } @media (min-width: 1280px) { :root { --layer__gutters__v: 4rem; } } @media (min-width: 900px) and (min-height: 1000px) { :root { --layer__gutters__v: 5rem; } } .layer { background: var(--layer__bg); margin: var(--layer__gutters__top, var(--layer__gutters__v)) var(--layer__gutters__h) var(--layer__gutters__bottom, var(--layer__gutters__v)); display: grid; grid-template-columns: minmax(0, var(--layer__max-width)); grid-gap: var(--layer__gutters__inner); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; /** * Extensions */ /* * Backgrounds */ /* * Width Adjustments */ /* * Gutter Adjustments */ /* * Border options */ /* * Special extensions */ } .layer footer { justify-self: center; } @media print { .layer { background: none !important; display: block !important; grid: none; max-width: 715px !important; margin-left: auto !important; margin-right: auto !important; } .layer[id*="table"] { max-width: none; } } .layer--cardify { --layer--cardify__max-width: calc(var(--layer__max-width) + var(--layer--cardify__padding-h) * 2); --layer--cardify__padding-v: 2rem; --layer--cardify__padding-h: 1rem; --layer--cardify__padding: var(--layer--cardify__padding-v) var(--layer--cardify__padding-h); --layer--cardify__border: 3px solid #e6e6e6; margin-top: 0; grid-template-columns: minmax(0, var(--layer--cardify__max-width)); } @media (min-width: 400px) { .layer--cardify { --layer--cardify__padding-h: 2rem; } } @media (min-width: 900px) { .layer--cardify { --layer--cardify__padding-v: 3rem; --layer--cardify__padding-h: 6rem; } } .layer--cardify__inner { margin: 0 auto; background: white; padding: var(--layer--cardify__padding); width: 100%; border-bottom: var(--layer--cardify__border); } .layer--cardify--tight { --layer--cardify__max-width: var(--layer__max-width); --layer--cardify__padding: 0; } .layer--cardify--borderless { --layer--cardify__border: none; } .layer--cardify--borderless .layer--cardify__inner { padding-bottom: 0; } .layer--background { padding: var(--layer__gutters__top, var(--layer__gutters__v)) var(--layer__gutters__h) var(--layer__gutters__bottom, var(--layer__gutters__v)); margin: 0; } .layer--background--grey { --layer__bg: #f0f4f8; } .layer--width-smidge-bigger { --layer__max-width: calc(715px + var(--content-gutter) * 2); } @media print { .layer--width-smidge-bigger { --layer__max-width: 715px; } } .layer--width-smidgier-bigger { --layer__max-width: 900px; } @media print { .layer--width-smidgier-bigger { --layer__max-width: 715px; } } .layer--width-large { --layer__max-width: calc(1280px - var(--layer__gutters__h) * 2); } .layer--width-jumbo { --layer__max-width: calc(1920px - var(--layer__gutters__h) * 2); } .layer--width-full { --layer__max-width: 100%; } .layer--width-full-content { --layer__max-width: calc(1280px - var(--layer__gutters__h) * 2); } .layer--width-full-content > header, .layer--width-full-content > footer { max-width: 715px; width: 100%; margin-left: auto; margin-right: auto; } .layer--gutters-none { --layer__gutters__v: 0; --layer__gutters__h: 0; } .layer--vertical-gutters-none { --layer__gutters__v: 0; } .layer--vertical-gutters-smaller { --layer__gutters__v: 1rem; } .layer--vertical-gutters-small { --layer__gutters__v: 1.25rem; } @media (min-width: 900px) { .layer--vertical-gutters-small { --layer__gutters__v: 2rem; } } .layer--vertical-gutters-large { --layer__gutters__v: 3rem; } @media (min-width: 900px) { .layer--vertical-gutters-large { --layer__gutters__v: 4rem; } } .layer--top-gutters-none { --layer__gutters__top: 0; } @media (min-width: 900px) { .layer--bottom-gutters-none--desktop { --layer__gutters__bottom: 0; } } .layer--gutters-inner-none { --layer__gutters__inner: 0; } .layer--border-top::before { content: ""; border-top: 3px solid #e6e6e6; padding-bottom: calc(var(--layer__gutters__v) - var(--layer__gutters__inner)); } .layer--border-top-full::before { content: ""; border-top: 3px solid #e6e6e6; padding-bottom: calc(var(--layer__gutters__v) - var(--layer__gutters__inner)); left: 0; right: 0; max-width: none; -webkit-transform: none; transform: none; } .layer--theme-border-top { --layer__theme-border-top__height: 1.25rem; padding-top: var(--layer__gutters__v); position: relative; margin-top: calc(var(--layer__gutters__top, var(--layer__gutters__v)) + var(--layer__theme-border-top__height)); } .layer--theme-border-top__border { position: absolute; height: var(--layer__theme-border-top__height); top: calc(var(--layer__theme-border-top__height) * -0.5); left: calc(-1 * var(--content-gutter)); width: calc(100% + (var(--content-gutter) * 2)); max-width: none; -o-object-fit: cover; object-fit: cover; background-image: var(--layer__theme-border-top__background-image); background-size: cover; background-color: var(--theme__background-color, #00142c); } @media (min-width: 900px) { .layer--theme-border-top__border { width: 100%; max-width: calc(var(--layer__max-width) + (var(--content-gutter) * 2)); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .layer--theme-border-top:nth-child(3n + 1) { --layer__theme-border-top__background-image: var(--theme__header-bg-1); } .layer--theme-border-top:nth-child(3n + 2) { --layer__theme-border-top__background-image: var(--theme__header-bg-2); } .layer--theme-border-top:nth-child(3n) { --layer__theme-border-top__background-image: var(--theme__header-bg-3); } .layer--theme-border-top.layer--background .layer--theme-border-top__border { left: 0; right: 0; max-width: 100%; -webkit-transform: none; transform: none; } @media print { .layer--theme-border-top { padding: 0 !important; } } .layer--center-headline-desktop header { text-align: center; } @media (max-width: 899px ) { .layer--center-headline-desktop header { text-align: left; } } .layer--center-header > header { display: grid; grid-gap: 1rem; justify-self: center; width: 100%; max-width: 900px; } .layer--center-content { justify-items: center; } @media (max-width: 899px ) { .layer--mobile-flush { margin-left: 0; margin-right: 0; } .layer--mobile-flush > header { padding: 0 1.25rem; } } @media (max-width: 899px ) { .layer--mobile-flush--right { margin-right: 0; } } .layer--push-inner-margins { overflow: hidden; } .layer--last { --layer__gutters__bottom: 4rem; } :root { --link-grid__description__font-size: 0.875rem; --link-grid__description__color: currentColor; } @media (min-width: 900px) { :root { --link-grid__grid-columns: 2; --link-grid__grid-gap: 1rem; --link-grid__description__font-size: 1rem; } } @media (min-width: 1280px) { :root { --link-grid__grid-columns: 3; } } .link-grid { display: grid; grid-template-columns: repeat(var(--link-grid__grid-columns), 1fr); grid-gap: var(--link-grid__grid-gap); width: 100%; } .link-grid a { display: grid; grid-gap: 0.5rem; position: relative; overflow: hidden; -ms-flex-line-pack: start; align-content: flex-start; height: 100%; padding: 1.75rem 2rem; } .link-grid a > img { position: absolute; height: var(--link-grid__image__height); top: var(--link-grid__image__top); right: var(--link-grid__image__right); bottom: var(--link-grid__image__bottom); left: var(--link-grid__image__left); opacity: var(--link-grid__image__opacity); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } .link-grid a p { font-family: var(--tokens__font-family-styrene); font-size: var(--link-grid__description__font-size); color: var(--link-grid__description__color); } @media (max-width: 899px ) { .link-grid a { --link-grid__image__height: 12rem; --link-grid__image__bottom: -4rem; --link-grid__image__left: -2rem; --link-grid__image__opacity: 0.15; border-bottom: 1px solid var(--tokens__colors__grey-light); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: background-color; transition-property: background-color; } .link-grid a:hover, .link-grid a:focus { background-color: rgba(0, 0, 0, 0.025); } } @media (min-width: 900px) { .link-grid a { --a__hover-opacity: 1; --link-grid__image__height: 16rem; --link-grid__image__top: -2rem; --link-grid__image__right: -4rem; --link-grid__image__opacity: 0; border: 1px solid var(--link-grid__border-color, transparent); -webkit-transition-property: border; transition-property: border; } .link-grid a:hover, .link-grid a:focus { --link-grid__border-color: var(--tokens__colors__grey-light); --link-grid__image__opacity: 0.15; } } :root { --link-list__justify-content: center; --link-list__gutter: 1.25rem; --link-list__gutter__top: calc(0.5 * var(--link-list__gutter)); --link-list__display: flex; } @media (min-width: 900px) { :root { --link-list__gutter: 3rem; } } ul.link-list { display: var(--link-list__display); -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: var(--link-list__justify-content); -ms-flex-pack: var(--link-list__justify-content); justify-content: var(--link-list__justify-content); margin: calc(-1 * var(--link-list__gutter__top)) 0 0 calc(-1 * var(--link-list__gutter)); } ul.link-list li { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 0; padding: var(--link-list__gutter__top) 0 0 var(--link-list__gutter); } ul.list, ol.list { font-size: 1rem; line-height: 1.5; margin-left: 1rem; display: grid; grid-gap: 2rem; } ul.list > li, ol.list > li { display: list-item; padding-left: var(--list__bullet-spacing); position: relative; } ul.list > li::before, ol.list > li::before { position: absolute; left: 0; top: var(--list__bullet-top); } ul.list { --list__bullet-spacing: 2rem; --list__bullet-top: 8px; } ul.list > li::before { content: ""; height: var(--text-block__bullet-size); width: var(--text-block__bullet-size); background: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/flourishes/bullet.png"); background-size: cover; } [data-env="production"] ul.list > li::before { background: url("https://bipartisan-policy-center.imgix.net/assets/images/flourishes/bullet.png"); } @media (max-width: 899px ) { ul.list > li::before { left: 5px; } } ol.list { --list__bullet-spacing: 2rem; counter-reset: custom-counter; } @media (min-width: 900px) { ol.list { --list__bullet-spacing: 3rem; --list__bullet-top: -0.625rem; } } ol.list > li { counter-increment: custom-counter; } ol.list > li::before { content: counter(custom-counter); color: var(--tokens__colors__blue); font-family: var(--tokens__font-family-styrene); font-size: var(--text-block__counter-font-size); font-weight: 900; } .map__interactive { position: relative; } .map header { text-align: center; } .map main { position: relative; } .map__legend { text-align: center; margin-bottom: 30px; } .map__legend--bottom { display: none; padding-top: 28px; margin-bottom: 0; } .map__legend--bottom ul li { margin-bottom: 16px !important; } @media (max-width: 899px ) { .map__legend--top { display: none; } .map__legend--bottom { display: block; } } .map__legend h2 { font: 500 1.875rem/1.23em var(--tokens__font-family-gascogne); margin-bottom: 35px; } .map__legend ul { font-size: 0; } .map__legend ul li { display: inline-block; margin: 0 14px; font: 500 0.75rem/17px var(--tokens__font-family-styrene); vertical-align: middle; } .map__legend ul li span { display: inline-block; width: 17px; height: 17px; vertical-align: middle; background: #a9b2bf; border-radius: 100%; position: relative; top: -1px; margin-right: 4px; } .map__selector { margin-bottom: 27px; display: none; width: 100%; } @media (max-width: 899px ) { .map__selector { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .map__selector select { display: block; width: 100%; height: 26px; } .map__element svg { display: block; width: 100%; max-width: 60rem; margin: 0 auto; height: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .map__element svg g[data-state] { pointer-events: none; cursor: default; outline: none !important; } .map__element svg g[data-state] path { fill: #c6ccd5; stroke: #fff; } .map__element svg g[data-state] text { fill: #3a3a3a; font-family: var(--tokens__font-family-styrene) !important; font-weight: 500; font-size: 0.5rem; } @media (max-width: 899px ) { .map__element svg g[data-state] text { opacity: 0; } } .map__tooltips { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .map__tooltips .map__tooltip { position: absolute; -webkit-transform: translateY(-100%) translateX(8px) scale(0); transform: translateY(-100%) translateX(8px) scale(0); -webkit-transform-origin: left calc(100% + 10px); transform-origin: left calc(100% + 10px); opacity: 0; -webkit-transition: opacity 250ms, -webkit-transform 150ms; transition: opacity 250ms, -webkit-transform 150ms; transition: opacity 250ms, transform 150ms; transition: opacity 250ms, transform 150ms, -webkit-transform 150ms; margin-top: -15px; pointer-events: none; } .map__tooltips .map__tooltip.open { opacity: 1; -webkit-transform: translateY(-100%) translateX(8px) scale(1); transform: translateY(-100%) translateX(8px) scale(1); } .map__tooltips .map__tooltip.right .map__tooltip__element { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: right calc(100% + 10px); transform-origin: right calc(100% + 10px); } .map__tooltips .map__tooltip.right .map__tooltip__element::after { left: auto; right: 0; border-width: 0 12px 15px 0; border-color: transparent #3687e8 transparent transparent; } .map__tooltips .map__tooltip__element { background: #3687e8; color: #fff; width: 222px; padding: 22px 25px 25px; pointer-events: all; } .map__tooltips .map__tooltip__element::after { content: ""; display: block; top: 100%; left: 0; position: absolute; width: 0; height: 0; border-style: solid; border-width: 15px 12px 0 0; border-color: #3687e8 transparent transparent; } .map__tooltips .map__tooltip__content strong { font: 900 12px/1em var(--tokens__font-family-styrene); margin-bottom: 8px; display: block; } .map__tooltips .map__tooltip__content p { font: 500 0.6875rem/1.36em var(--tokens__font-family-styrene); margin-bottom: 8px; } .map__tooltips .map__tooltip__content span { font: 900 0.5625rem/1em var(--tokens__font-family-styrene); display: inline-block; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 1.5px; -webkit-transition: all 250ms; transition: all 250ms; cursor: pointer; position: relative; outline: none; } .map__tooltips .map__tooltip__content span::after { display: block; position: absolute; top: 100%; left: 0; right: 0; -webkit-transition: all 250ms; transition: all 250ms; border-bottom: 1px solid #fff; content: ""; } .map__tooltips .map__tooltip__content span:hover { opacity: 0.75; } .map__tooltips .map__tooltip__content span:hover::after { border-bottom-width: 3px; } .map .map__overlays { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .map .map__overlays .map__overlay { border: 1px solid #b9b9b9; overflow: scroll; opacity: 0; background: #fff; -webkit-transition: opacity 250ms, -webkit-transform 250ms; transition: opacity 250ms, -webkit-transform 250ms; transition: opacity 250ms, transform 250ms; transition: opacity 250ms, transform 250ms, -webkit-transform 250ms; -webkit-transform: scale(0.5); transform: scale(0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .map .map__overlays .map__overlay.open { -webkit-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: all; } .map .map__overlays .map__overlay__close { position: absolute; top: 40px; right: 50px; display: block; cursor: pointer; z-index: 5; } @media (max-width: 899px ) { .map .map__overlays .map__overlay__close { top: 20px; right: 20px; -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transform-origin: top right; transform-origin: top right; } } .map .map__overlays .map__overlay__close svg { display: block; } .map .map__overlays .map__overlay__close svg polygon { -webkit-transition: all 250ms; transition: all 250ms; fill: #c6ccd5; } .map .map__overlays .map__overlay__close:hover svg polygon { fill: #e33c46; } .map .map__overlays .map__overlay__content { max-width: 765px; margin: 0 auto; padding: 50px 25px 100px; font: 1.25rem/2em var(--tokens__font-family-faustina); position: relative; } @media (max-width: 899px ) { .map .map__overlays .map__overlay__content { font-size: 0.75em; padding-top: 25px; padding-bottom: 50px; } } .map .map__overlays .map__overlay__content h2 { display: inline-block; max-width: calc(100% - 50px); font: 700 1.875rem/1em var(--tokens__font-family-gascogne); margin-bottom: 25px; } @media (max-width: 899px ) { .map .map__overlays .map__overlay__content h2 { font-size: 1.6em; margin-bottom: 15px; } } .map .map__overlays .map__overlay__content p { margin-bottom: 30px; } @media (max-width: 899px ) { .map .map__overlays .map__overlay__content p { margin-bottom: 15px; } } .map .map__overlays .map__overlay__content p:last-child { margin-bottom: 0; } @media print { .map > * { display: none; } .map::after { content: "[Map]"; display: block; text-align: center; padding: 2rem; } } @media (min-width: 900px) { .media-block { display: grid; grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; grid-template-rows: auto; grid-column-gap: 1rem; } .media-block img { -ms-flex-item-align: start; align-self: start; width: 100%; } .media-block .media-block__content { vertical-align: top; } } .media-block--force { display: grid; grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; grid-template-rows: auto; grid-column-gap: 1rem; } .media-block--force img { -ms-flex-item-align: start; align-self: start; width: 100%; } .media-block--force .media-block__content { vertical-align: top; } .media-type-icon { display: inline-block; width: 26px; height: 26px; overflow: hidden; background: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/misc/content-layers-sprite.svg"); background-position: 0 0; background-repeat: no-repeat; background-size: 494px 26px; opacity: 0.4; } [data-env="production"] .media-type-icon { background: url("https://bipartisan-policy-center.imgix.net/assets/images/misc/content-layers-sprite.svg"); } .media-type-icon.media-type-icon--accordion { background-position: 0 0; } .media-type-icon.media-type-icon--chart { background-position: -26px 0; } .media-type-icon.media-type-icon--embed { background-position: -52px 0; } .media-type-icon.media-type-icon--form { background-position: -78px 0; } .media-type-icon.media-type-icon--image-gallery { background-position: -104px 0; } .media-type-icon.media-type-icon--image-quote { background-position: -130px 0; } .media-type-icon.media-type-icon--image { background-position: -156px 0; } .media-type-icon.media-type-icon--infographic-melange { background-position: -182px 0; } .media-type-icon.media-type-icon--list { background-position: -208px 0; } .media-type-icon.media-type-icon--primary-cta { background-position: -234px 0; } .media-type-icon.media-type-icon--promo-grid { background-position: -260 0; } .media-type-icon.media-type-icon--shareable-quote { background-position: -286 0; } .media-type-icon.media-type-icon--state-map { background-position: -312 0; } .media-type-icon.media-type-icon--table { background-position: -338px 0; } .media-type-icon.media-type-icon--tabs { background-position: -364px 0; } .media-type-icon.media-type-icon--text-block { background-position: -390px 0; } .media-type-icon.media-type-icon--timeline { background-position: -416px 0; } .media-type-icon.media-type-icon--video-gallery { background-position: -442px 0; } .media-type-icon.media-type-icon--video { background-position: -468px 0; } :root { --monotable__data-size: 1.5rem; } @media (min-width: 900px) { :root { --monotable__data-size: 3rem; } } .monotable tr { border: none; } .monotable td { text-align: center; border: 1px solid #e8e8e8; } @media (max-width: 899px ) { .monotable td { --table__cell-padding: 0.5rem 0.125rem; } } @media (min-width: 900px) { .monotable td { --table__cell-padding: 1.5rem 1.675rem; } } .monotable data { display: inline-block; width: 100%; font-size: var(--monotable__data-size); margin-bottom: 0.25rem; font-weight: 900; } .monotable strong { font-weight: 500; color: var(--tokens__colors__grey); } @media (max-width: 899px ) { .monotable strong { font-size: 0.625rem; } } :root { --overlay__vertical-margin: 1rem; --overlay__horizontal-margin: 1rem; --overlay__max-width: 100%; --overlay__inner__horizontal-padding: 2rem; --overlay__inner__vertical-padding: 2rem; } .overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100; padding: var(--overlay__vertical-margin) var(--overlay__horizontal-margin); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: none; } .overlay[aria-modal="true"] { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 1280px) { .overlay { --overlay__vertical-margin: 5rem; --overlay__horizontal-margin: 5rem; } } .overlay__inner { background: white; overflow-y: auto; line-height: 1.4; -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); position: relative; max-width: var(--overlay__max-width); } .overlay__inner .overlay__close { position: absolute; right: 1rem; top: 1rem; z-index: 10; } .overlay__inner .overlay__close svg { fill: #fff; opacity: 0.5; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); } .no-touchevents .overlay__inner .overlay__close:hover svg { opacity: 1; } .overlay__inner header { position: relative; background: var(--theme__background-color); padding: calc(var(--overlay__inner__vertical-padding) * 1.5) var(--overlay__inner__horizontal-padding) var(--overlay__inner__vertical-padding); } .overlay__inner header .title { --title__color: var(--theme__title-color); position: relative; z-index: 1; text-align: center; } .overlay__inner header > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .overlay__inner .overlay__content { padding: var(--overlay__inner__vertical-padding) var(--overlay__inner__horizontal-padding); } @media (min-width: 1280px) { .overlay__inner { --overlay__max-width: 900px; --overlay__inner__horizontal-padding: 6rem; --overlay__inner__vertical-padding: 3rem; } } .overlay.overlay--flush .overlay__content { padding: 0; } .overlay.overlay--grid .overlay__content { display: grid; grid-gap: 1rem; } :root { --person__title__color: var(--tokens__colors__grey); --person__title__font-size: 0.875rem; --person__title__font-family: var(--tokens__font-family-styrene); --person__image-size: 2.25rem; --person__header__margin: 0 0 0 0.75rem; --person__position__font-size: 0.625rem; --person__position__text-transform: uppercase; --person__position__letter-spacing: 0.05em; } @media (min-width: 900px) { :root { --person__image-size: 2.5rem; } } .person { display: -webkit-box; display: -ms-flexbox; display: flex; } .person > img, .person > a > img { height: var(--person__image-size); width: var(--person__image-size); min-width: var(--person__image-size); border-radius: 50%; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; overflow: hidden; } .person > img + header, .person > a + header { margin: var(--person__header__margin); } .person > header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .person > header > h6, .person > header > a > h6 { font-family: var(--person__title__font-family); color: var(--person__title__color); font-size: var(--person__title__font-size); font-weight: 500; } .person > header > span { font-family: var(--tokens__font-family-styrene); font-size: var(--person__position__font-size); color: #616161; margin-top: 0.5rem; line-height: 1.2; } .person--large { --person__image-size: 5rem; --person__header__margin: 0.75rem 0 0 0; --person__position__font-size: 0.625rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } @media (min-width: 400px) { .person--large { --person__image-size: 7rem; } } @media (min-width: 900px) { .person--large { --person__image-size: 13rem; --person__position__font-size: 0.875rem; } } a.person { --a__hover-opacity: 0.8; cursor: pointer; } a.person > header { -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } a.person:hover { opacity: 1; } a.person:hover > img { -webkit-transform: translateY(-2px); transform: translateY(-2px); } a.person:hover > header { opacity: 0.6; } .podcast { display: grid; grid-gap: 1.5rem; grid-template-columns: auto 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .podcast img { height: 5.5rem; width: 5.5rem; min-width: 5.5rem; } .podcast h4 { font-family: var(--tokens__font-family-styrene); font-size: 1.125rem; font-weight: 500; margin-bottom: 0.5rem; } :root { --policy-area-intro__title-font-size: 1.5rem; --policy-area-intro__subtitle__font-size: 0.875rem; --policy-area-intro__title-flourish-height: 0.5rem; --policy-area-intro__title-flourish-bottom: -1.875rem; } @media (min-width: 400px) { :root { --policy-area-intro__title-font-size: 3.25rem; } } @media (min-width: 900px) { :root { --policy-area-intro__title-font-size: 4rem; --policy-area-intro__subtitle__font-size: 1rem; } } .policy-area-intro { display: grid; grid-gap: 1.5rem; } .policy-area-intro > header > h1 { --title__font-size: var(--policy-area-intro__title-font-size); --title__color: var(--tokens__colors__blue); max-width: 900px; position: relative; margin-bottom: calc(var(--policy-area-intro__title-flourish-bottom) * -1); } .policy-area-intro > header > h1::after { content: ""; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; bottom: var(--policy-area-intro__title-flourish-bottom); height: var(--policy-area-intro__title-flourish-height); width: 4.5rem; background: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/flourishes/chunky-line.svg"); background-size: 100% 100%; } [data-env="production"] .policy-area-intro > header > h1::after { background: url("https://bipartisan-policy-center.imgix.net/assets/images/flourishes/chunky-line.svg"); } .policy-area-intro .text-block { --text-block__font-size: var(--policy-area-intro__subtitle__font-size); max-width: calc(var(--layer__max-width) - (var(--layer__gutters__h) * 2)); } .policy-area-intro > footer { justify-self: flex-start; } .policy-area-intro > footer ul { display: grid; grid-template-columns: minmax(100px, -webkit-max-content) repeat(auto-fill, 200px); grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px); grid-gap: 1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .policy-area-intro > footer a.title { --title__color: var(--tokens__colors__blue); padding-bottom: 0.5rem; position: relative; } .policy-area-intro > footer a.title svg { height: 3px; width: calc(100% + 20px); position: absolute; left: -2px; bottom: 0; } :root { --post-actions__tuck: 1rem; } .post-actions { display: var(--post-actions__display, none); font-family: var(--tokens__font-family-styrene); font-weight: 500; width: 100%; border-top: 1px solid #e6e6e6; background: white; margin-top: var(--post-actions__tuck); z-index: 6; } .post-actions-wrapper { margin-top: -1rem; } .post-actions__read-next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .post-actions__read-next__title { position: absolute; top: calc(var(--post-actions__tuck) * -1); padding: 0.5rem 1.5rem; border-top: 3px solid #e6e6e6; background: white; z-index: 1; } .post-actions__share { background-color: #276ab1; padding-top: 4px; padding-bottom: 4px; --tag__color: white; --social-links__color: white; } .post-actions__share *:focus { outline: none; -webkit-box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.75); box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.75); } .post-actions__share__inner { display: grid; grid-template-columns: 1fr auto; grid-gap: 2rem; height: 2rem; color: white; font-weight: 500; font-size: 0.8125rem; } .post-actions__share__title, .post-actions__share__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .post-actions__share__title .social-links > a svg, .post-actions__share__links .social-links > a svg { width: 24px; height: 24px; } .post-actions__share__title { min-width: 0; line-height: 2; } .post-actions__share__title > aside { white-space: nowrap; } .post-actions__share__title > aside::after { content: "/"; font-size: 0.8125rem; margin: 0 0.25rem; } .post-actions__share__links > aside { margin-right: 1rem; } .post-actions[data-bar-state="hidden"] { display: none; } .post-actions[data-bar-state="small"] { --post-list__padding-v: 0.5rem; --post-list__margin-inset: 0; --post-list__heading-size: 0.75rem; --post-list__grid-template-rows: 1fr; } .post-actions[data-bar-state="small"] .post-actions__read-next__title, .post-actions[data-bar-state="small"] .post-actions__read-next__nav > a img, .post-actions[data-bar-state="small"] .post-actions__read-next__nav > a ul, .post-actions[data-bar-state="small"] .post-actions__share__subscribe { display: none; } .post-actions[data-bar-state="medium"] { --post-list__padding-v: 1rem; --post-list__image-size: 2.5rem; --post-list__heading-size: 0.825rem; --post-list__grid-template-rows: 1fr; --post-actions__read-next__image-grid-row: 1; } .post-actions[data-bar-state="medium"] .post-actions__read-next__title, .post-actions[data-bar-state="medium"] .post-actions__read-next__nav > a ul { display: none; } @media (min-width: 900px) { .post-actions { --post-actions__display: block; } } .post-actions.post-actions--no-tuck { margin-top: 0; border: 0; } .post-actions.post-actions--no-tuck-wrapper { margin-top: 0; } .post-actions .post-actions__share__subscribe { display: block; } article[aria-expanded="false"] .post-actions { display: none; } :root { --post-list-ribbon__height: 2.5rem; --post-list-ribbon__background-color: #276ab1; } .post-list-ribbon { --tag__color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--post-list-ribbon__height); color: white; background: var(--post-list-ribbon__background-color); z-index: 10; width: 100%; } .post-list-ribbon__read-next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 0 var(--layer__gutters__h); width: 100%; font-family: var(--tokens__font-family-styrene); font-weight: 500; background: var(--post-list-ribbon__background-color); } .post-list-ribbon__read-next header h6::after { content: "/"; margin: 0 0.75rem; } .post-list-ribbon__read-next ul { display: grid; grid-auto-flow: column; height: 1.5rem; } .post-list-ribbon__read-next ul li { display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 1rem; font-size: 0.75rem; width: 40vw; white-space: normal; } .post-list-ribbon__read-next ul li + li { border-left: 1px solid rgba(255, 255, 255, 0.3); padding-left: 1rem; } .post-list-ribbon__read-next ul li a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* number of lines to show */ -ms-flex-item-align: start; align-self: flex-start; -ms-flex-item-align: center; align-self: center; } :root { --post-list__padding-v: 1rem; --post-list__margin-inset: 0.25rem; --post-list__grid-template-rows: 1fr auto; --post-list__image-size: 4rem; --post-list__image-grid-row: 1 / 3; --post-list__heading-size: 0.8125rem; --post-list__columns: 4; --post-list__line-limit: 3; --post-list__background: white; --post-list__divider__color: #e6e6e6; } .post-list { display: grid; grid-template-columns: repeat(var(--post-list__columns), 1fr); grid-gap: 2rem; padding: var(--post-list__padding-v) 0; font-size: var(--post-list__heading-size); font-family: var(--tokens__font-family-styrene); background: var(--post-list__background); } .post-list--mobile-scroll { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .post-list--mobile-scroll a { min-width: 290px; } .post-list > a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: var(--post-list__grid-template-rows); grid-auto-flow: column; grid-gap: 0.5rem 0.75rem; position: relative; } .post-list > a + a::before { content: ""; position: absolute; height: 100%; width: 1px; top: 0; left: -1rem; background: var(--post-list__divider__color); } .post-list > a:hover { opacity: 1; } .post-list > a:hover h6 { opacity: 0.6; } .post-list > a img { grid-row: var(--post-list__image-grid-row); height: var(--post-list__image-size); width: var(--post-list__image-size); min-width: var(--post-list__image-size); -o-object-fit: cover; object-fit: cover; margin: 0 5px 0 10px; } .post-list > a:first-child img { margin-left: 0; } .post-list > a h6 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--post-list__line-limit); /* number of lines to show */ -ms-flex-item-align: start; align-self: flex-start; font-weight: 500; line-height: 1.25; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } .post-list > a ul { margin-top: -1px; } .post-list--border-top { border-top: 1px solid var(--post-list__divider__color); } .post-list--light { --tag__color: white; --post-list__divider__color: rgba(30, 83, 149, 0.6); } .post-list--light h6 { color: white; } .post-list.scrolling-container > * { white-space: initial; } @media (max-width: 1279px ) { .post-list > a > ul > li::after, .post-list > a > ul > li:not(:first-child) { display: none; } } :root { --pretty-select__border-color: var(--tokens__colors__grey-light); --pretty-select__chevron-opacity: 0.25; --pretty-select__max-width: 20rem; } .pretty-select { font-family: var(--tokens__font-family-styrene); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--dropdown-trigger__padding-v) 0; color: var(--dropdown-trigger__color); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); z-index: 0; position: relative; border-bottom: 2px solid var(--pretty-select__border-color); width: 100%; max-width: var(--pretty-select__max-width); } .pretty-select::after { content: ""; background: url('data:image/svg+xml;utf8,'); position: absolute; width: 13px; height: 8px; right: 0.75rem; opacity: var(--dropdown-trigger__icon-opacity); background-size: cover; -webkit-transition: 0.2s -webkit-transform; transition: 0.2s -webkit-transform; transition: 0.2s transform; transition: 0.2s transform, 0.2s -webkit-transform; z-index: -1; } .pretty-select:hover { --dropdown-trigger__icon-opacity: 0.5; --dropdown-trigger__color: black; } .pretty-select label { margin-right: 1rem; } .pretty-select select { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1rem; cursor: pointer; -webkit-appearance: none; } .pretty-select:hover { --pretty-select__border-color: #bbb; } :root { --primary-cta__color: currentColor; --primary-cta__background-color: white; --primary-cta__svg-color: white; } .primary-cta { color: var(--primary-cta__color); background-color: var(--primary-cta__background-color); min-height: 3.5rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.25rem 2rem 0; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; font-weight: 900; font-family: var(--tokens__font-family-gascogne); min-width: 0; } .primary-cta > svg { margin: -3px 0 0 7px; width: 12px; fill: var(--primary-cta__svg-color); } .primary-cta:hover { opacity: 0.8; } .primary-cta:active { opacity: 0.6; } .primary-cta.primary-cta--block { display: grid; width: 100%; text-align: center; padding: 0.25rem 2rem; font-weight: inherit; } .primary-cta--color-blue { --primary-cta__color: white; --primary-cta__background-color: var(--tokens__colors__blue); --primary-cta__svg-color: white; } .primary-cta--color-red { --primary-cta__color: white; --primary-cta__background-color: var(--tokens__colors__red); --primary-cta__svg-color: white; } .pullquote { display: grid; grid-gap: 1rem; } .pullquote__share { display: grid; grid-auto-flow: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: var(--social-links__spacing); } @media print { .pullquote header { margin-left: 0 !important; } .pullquote__share { display: none; } } :root { --quicknav__max-width: 280px; --quicknav__border: 1px solid #cacccb; --quicknav__item__active-border-width: 0.3125rem; --quicknav__item__padding-left: var(--quicknav__item__active-border-width); --quicknav__item__gutter: 1rem; --quicknav__item__icon__size: 1.5rem; --quicknav__item__icon__fill: var(--tokens__colors__grey-alt--faded-40); --post-list-ribbon__background-color: #276ab1; --quicknav--mobile__width: 8.5rem; } .quicknav-wrapper { position: relative; } .quicknav { position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 100%; max-width: var(--quicknav__max-width); background: white; border: var(--quicknav__border); border-left: none; z-index: 9999; } .quicknav ul { max-height: 60vh; overflow-y: scroll; } .quicknav__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: center; padding: 0.5rem var(--quicknav__item__gutter) 0.5rem calc(var(--quicknav__item__gutter) + var(--quicknav__item__padding-left)); border-bottom: var(--quicknav__border); } .quicknav__header h4 { --title__color: #b1b2b2; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 var(--quicknav__item__gutter); } .quicknav__header .quicknav__toggle { color: var(--tokens__colors__blue); fill: var(--tokens__colors__blue); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; width: var(--quicknav__item__icon__size); } .quicknav__header .quicknav__toggle svg { width: 0.75rem; height: 0.75rem; } .quicknav__item { padding-left: var(--quicknav__item__padding-left); } .quicknav__item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--quicknav__item__gutter); } .quicknav__item + .quicknav__item { border-top: var(--quicknav__border); } .quicknav__item__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; min-width: 0; margin-right: 0.5rem; font-family: var(--tokens__font-family-styrene); font-size: 0.8rem; color: var(--quicknav__item__color, var(--tokens__colors__grey-alt)); } .quicknav__item__icon svg { width: var(--quicknav__item__icon__size); height: var(--quicknav__item__icon__size); fill: var(--quicknav__item__icon__fill); } .quicknav__item--active { --quicknav__item__color: var(--tokens__colors__blue); --quicknav__item__padding-left: 0; --quicknav__item__icon__fill: var(--tokens__colors__grey-alt); border-left: var(--quicknav__item__active-border-width) solid var(--tokens__colors__blue); } .quicknav--collapsed { --quicknav__max-width: calc(28px + 2rem); } .quicknav--collapsed .quicknav__toggle { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .quicknav--collapsed .quicknav__header h4, .quicknav--collapsed .quicknav__item__label { display: none; } .quicknav--collapsed .quicknav__item__icon svg { margin-left: calc(-0.5 * var(--quicknav__item__active-border-width)); } .quicknav--hidden { visibility: hidden; opacity: 0; } @media print { .quicknav { display: none !important; } } .quicknav--mobile { position: relative; width: var(--quicknav--mobile__width); margin-left: var(--quicknav--mobile__margin-left, 0); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: margin-left; transition-property: margin-left; background: var(--post-list-ribbon__background-color); } .quicknav--mobile__toggle { height: var(--post-list-ribbon__height); padding: 0 var(--layer__gutters__h); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--quicknav--mobile__toggle__background-color); white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, 0.3); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: background-color; transition-property: background-color; position: relative; z-index: 1; } .quicknav--mobile__toggle svg { fill: white; margin-left: 0.5rem; -webkit-transform: var(--quicknav--mobile__toggle__svg__transform); transform: var(--quicknav--mobile__toggle__svg__transform); -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .quicknav--mobile ul { display: none; position: absolute; top: var(--post-list-ribbon__height); left: 0; width: 100vw; max-width: var(--quicknav__max-width); max-height: calc(60vh - var(--post-list-ribbon__height)); overflow-y: scroll; background: white; -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4); box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4); z-index: -1; } .quicknav--mobile__item { padding-left: var(--quicknav__item__padding-left); } .quicknav--mobile__item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--quicknav__item__gutter); } .quicknav--mobile__item + .quicknav--mobile__item { border-top: var(--quicknav__border); } .quicknav--mobile__item__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; min-width: 0; margin-right: 0.5rem; font-family: var(--tokens__font-family-styrene); font-size: 0.8rem; color: var(--quicknav__item__color, var(--tokens__colors__grey-alt)); } .quicknav--mobile__item__icon svg { width: var(--quicknav__item__icon__size); height: var(--quicknav__item__icon__size); fill: var(--quicknav__item__icon__fill); } .quicknav--mobile__item--active { --quicknav__item__color: var(--tokens__colors__blue); --quicknav__item__padding-left: 0; --quicknav__item__icon__fill: var(--tokens__colors__grey-alt); border-left: var(--quicknav__item__active-border-width) solid var(--tokens__colors__blue); } .quicknav--mobile[aria-expanded="true"] { --quicknav--mobile__toggle__background-color: rgba(0, 0, 0, 0.2); --quicknav--mobile__toggle__svg__transform: rotate(-180deg); } article[aria-expanded="false"] .quicknav--mobile { --quicknav--mobile__margin-left: calc(var(--quicknav--mobile__width) * -1); visibility: hidden; } .read-more__curtain { position: absolute; bottom: 0; left: 0; background: #ffffff; background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), color-stop(60%, #ffffff), to(rgba(255, 255, 255, 0))); background: linear-gradient(0deg, #ffffff 0%, #ffffff 60%, rgba(255, 255, 255, 0) 100%); height: 400px; width: 100%; z-index: 10; } .read-more { position: absolute; left: 50%; bottom: 10.8rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); } article[aria-expanded="true"] .read-more__curtain { display: none; } .read-more__share { position: absolute; width: 90%; max-width: 715px; bottom: 2rem; left: 0; right: 0; margin: auto; border-top: 2px solid #e6e6e6; padding-top: 1.8rem; } @media (min-width: 900px) { .read-more__share { width: 100%; } } .read-more__share .title { margin-bottom: 1.6rem; } .read-more__share .social-links > a svg { width: 32px; height: 32px; } .report-donation-container { background: #f6fbc2; background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #730000), color-stop(2%, #f6fbc2)); background: linear-gradient(180deg, #730000 2%, #f6fbc2 2%); margin: 0 auto 2rem; padding: 2rem 1.5rem; text-align: center; width: 90%; } @media (min-width: 900px) { .report-donation-container { background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #730000), color-stop(5%, #f6fbc2)); background: linear-gradient(180deg, #730000 5%, #f6fbc2 5%); margin: 0 auto 4rem; padding: 4rem; width: 50%; } } .report-donation-container .primary-cta { display: inline-block; line-height: 3.5; margin: 0 auto; padding: 0; width: 100%; } @media (min-width: 900px) { .report-donation-container .primary-cta { width: 60%; } } .report-donation-container .primary-cta svg > path { fill: #fff; } :root { --scrolling-container__gutters: var(--layer__gutters__h); } .scrolling-container { -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } html.touchevents .scrolling-container::-webkit-scrollbar { display: none; } .scrolling-container::-webkit-scrollbar { height: 0.5rem; padding: 0.25rem; } .scrolling-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); } .scrolling-container::-webkit-scrollbar-thumb { border-radius: 0.375rem; background: rgba(0, 0, 0, 0.2); } :root { --secondary-cta__color: var(--tokens__colors__blue); } .secondary-cta { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-family: var(--tokens__font-family-styrene); --title__font-size: 0.75rem; --title__font-weight: 900; --title__letter-spacing: 0.2em; --title__line-height: 1.2; text-transform: uppercase; --title__font-size: 0.6875rem; color: var(--secondary-cta__color); padding-bottom: 0.375rem; border-bottom: 0.125rem solid currentColor; min-width: 0; max-width: 100%; display: inline-block; } @media (min-width: 900px) { :root { --section-header__direction: row; --section-header__title__margin: 0; --section-header__align-items: center; } } .section-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: var(--section-header__direction, column); flex-direction: var(--section-header__direction, column); -webkit-box-align: var(--section-header__align-items, flex-start); -ms-flex-align: var(--section-header__align-items, flex-start); align-items: var(--section-header__align-items, flex-start); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 1.25rem; } .section-header__title { margin-bottom: var(--section-header__title__margin, 1.25rem); } .select-tabs__tab { display: none; } .select-tabs__tab.active { display: block; } :root { --simple-button__border-color: #e9e9e9; --simple-button__background-color: white; } .simple-button { border: 1px solid var(--simple-button__border-color); background: var(--simple-button__background-color); display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.625rem; font-family: var(--tokens__font-family-styrene); font-size: 0.75rem; -webkit-transition: all 0.1s; transition: all 0.1s; } .simple-button--has-image { padding: 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .simple-button--has-image img { margin-right: 1rem; } .simple-button:hover { --simple-button__border-color: #ccc; } .simple-button[data-active="true"] { --simple-button__background-color: #3687e8; --simple-button__border-color: none; color: white; } :root { --site-banner__height: 2.375rem; } .site-banner { --layer__bg: var(--tokens__colors__red); display: none; position: relative; margin: 0 auto; z-index: 5; } .site-banner[aria-hidden="false"] { display: grid; } .site-banner__wrapper { display: block; color: white; -webkit-transition-property: opacity, background-color; transition-property: opacity, background-color; overflow: hidden; } .site-banner__wrapper__inner { height: var(--site-banner__height); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: var(--site-banner__height); font-family: var(--tokens__font-family-styrene); font-size: 0.8125rem; font-weight: 500; padding-bottom: 1px; } .site-banner__wrapper__inner > aside { white-space: nowrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: -1px; } .site-banner__wrapper__inner > aside::after { content: "/"; font-size: 0.8125rem; margin: 0 0.25rem; } .site-banner__close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; right: 0; width: var(--site-banner__height); height: var(--site-banner__height); border-left: 1px solid var(--tokens__colors__red-dark); background: var(--tokens__colors__red); } .site-banner__close svg { width: 0.875rem; height: 0.875rem; fill: white; } .site-banner > a:hover, .site-banner > button:hover { opacity: 1; background-color: var(--tokens__colors__red-dark); } .site-banner > a:hover > main, .site-banner > button:hover > main, .site-banner > a:hover > svg, .site-banner > button:hover > svg { opacity: 0.8; } :root { --site-footer__max-width: calc(1280px - var(--layer__gutters__h) * 2); --site-footer__grid-gap-h: 1.5rem; --site-footer__gutters: 2.25rem; --site-footer__slogan__tuck: calc(var(--site-footer__gutters) * -2); } .site-footer { --title__color: #071735; overflow: hidden; margin: 15rem 0 0; } .site-footer *:focus { outline: none; -webkit-box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.75); box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.75); } @media (min-width: 900px) { .site-footer { margin: 0; } } @media (min-width: 1280px) { .site-footer { display: grid; grid-template-columns: 1fr 1fr; } .site-footer__copyright { grid-column: 1/3; align-self: flex-start; } } .site-footer__navs, .site-footer__info { color: white; padding: var(--site-footer__gutters) var(--layer__gutters__h); margin: 0; grid-gap: var(--site-footer__gutters) calc(var(--site-footer__gutters) / 2); } .site-footer__navs section > header, .site-footer__info section > header { margin-bottom: 0.875rem; } .site-footer__navs ul, .site-footer__info ul { line-height: 1.1; } .site-footer__navs ul li + li, .site-footer__info ul li + li { margin-top: 0.5rem; } .site-footer__navs a, .site-footer__info a { font-family: var(--tokens__font-family-styrene); font-size: 0.875rem; } .site-footer__navs { background: #3d5f8b; display: grid; grid-template-columns: var(--site-footer__navs__grid-columns, 1fr 1fr); padding: 5rem var(--layer__gutters__h) var(--site-footer__gutters); } @media (min-width: 900px) { .site-footer__navs { --site-footer__navs__grid-columns: repeat(3, 1fr); padding: var(--site-footer__gutters) var(--layer__gutters__h); } .site-footer__navs__primary { grid-row: 1/4; } } @media (min-width: 1280px) { .site-footer__navs { --site-footer__navs__grid-columns: repeat(3, calc(((var(--site-footer__max-width) / 2) - (var(--site-footer__gutters) * 2)) / 3)); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } } .site-footer__navs__social { --social-links__color: white; } @media (max-width: 899px ) { .site-footer__navs__social { grid-column: 1/3; } } .site-footer__navs__action { --p__line-height: 1.2; } .site-footer__navs__action a { font-family: var(--tokens__font-family-gascogne); font-weight: 900; font-size: 0.875rem; display: inline-block; margin-top: 0.5rem; color: #f6fbc2; white-space: nowrap; width: 0; } .site-footer__navs__action a > svg { stroke: #f6fbc2; } @media print { .site-footer__navs { display: none; } } .site-footer__info { background: #2f527a; display: grid; } .site-footer__info a { line-height: 1.6; } @media (max-width: 899px ) { .site-footer__info { margin-bottom: var(--site-footer__gutters); } } @media (min-width: 900px) and (max-width: 1279px ) { .site-footer__info { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .site-footer__info { grid-template-columns: repeat(2, calc(((var(--site-footer__max-width) / 2) - (var(--site-footer__gutters) * 1.5)) / 2)); } } .site-footer__info__address { margin-bottom: 1.5rem; } .site-footer__info__slogan { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/donation/donation-banner-border.png") #f6fbc2; background-position: left top, left top; background-repeat: repeat-x, repeat; color: #1c1c1c; padding: 2rem 2.75rem; margin-bottom: var(--site-footer__slogan__tuck); text-align: center; } [data-env="production"] .site-footer__info__slogan { background: url("https://bipartisan-policy-center.imgix.net/assets/images/donation/donation-banner-border.png") #f6fbc2; } .site-footer__info__slogan#slogan-mobile { display: -webkit-box; display: -ms-flexbox; display: flex; left: 10%; padding: 2rem 1.5rem; position: absolute; width: 80%; z-index: 2; } @media (min-width: 900px) { .site-footer__info__slogan#slogan-mobile { display: none; } } .site-footer__info__slogan#slogan-desktop { display: none; } @media (min-width: 900px) { .site-footer__info__slogan#slogan-desktop { display: -webkit-box; display: -ms-flexbox; display: flex; } } .site-footer__info__slogan a, .site-footer__info__slogan a:hover { font-family: var(--tokens__font-family-gascogne); margin: 1rem 0 0; } .site-footer__info__slogan .title--tertiary { --title__font-family: var(--tokens__font-family-faustina); margin: 0 0 1rem; } .site-footer__info__slogan svg > path { fill: #fff; } @media print { .site-footer__info__slogan { display: none; } } @media print { .site-footer__info { margin-top: 2rem; grid-template-columns: none; background: none; max-width: 715px !important; margin-left: auto !important; margin-right: auto !important; } .site-footer__info header { margin-bottom: 1rem; } } .site-footer__copyright { --layer__gutters__v: 1rem; --layer__gutters__h: 1.25rem; } .site-footer__copyright__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: var(--tokens__font-family-styrene); font-size: 0.5625rem; color: var(--tokens__colors__grey); } .site-footer__copyright__inner > svg { width: 2.5rem; margin-right: var(--site-footer__copyright__svg__margin, 1.25rem); } .site-footer__copyright__inner > svg path { fill: #5f6062; } .site-footer__copyright__inner > span { margin-right: var(--site-footer__copyright__span__margin, 1rem); } @media (max-width: 399px ) { .site-footer__copyright { --site-footer__copyright__svg__margin: 0.625rem; --site-footer__copyright__span__margin: 0.5rem; } } @media (max-width: 899px ) { .site-footer__copyright { --layer__gutters__top: calc(var(--layer__gutters__v) + (var(--site-footer__slogan__tuck) / -2)); } } @media print { .site-footer__copyright { display: none; } } @media print { .site-footer { display: block; } } :root { --site-header__logo-width: 230px; --site-header__background: transparent; --site-header__subnav__item__padding: 1rem; --site-header__subnav__height: 2.75rem; } @media (min-width: 900px) { :root { --site-header__logo-width: 260px; --site-header__subnav__fade: none; } } .site-header { --button__hover-opacity: 1; --button__active-opacity: 1; position: relative; z-index: 100; background: var(--site-header__background); /** * Extensions */ } .site-header svg path { -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: fill; transition-property: fill; } .site-header a, .site-header button { -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: color; transition-property: color; } .site-header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 1.25rem var(--layer__gutters__h); } .site-header__logo { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--site-header__logo-width); -webkit-transform: var(--site-header__logo__shift, translate(0, 2px)); transform: var(--site-header__logo__shift, translate(0, 2px)); } .site-header__logo:hover { opacity: 0.5; } @media (min-width: 900px) { .site-header__logo { --site-header__logo__shift: translate(-2px, -2px); } } .site-header__nav a, .site-header__nav .site-header__dropdown-trigger { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: var(--tokens__font-family-styrene); font-weight: 500; font-size: 0.875rem; letter-spacing: -0.01rem; } .site-header__nav > ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .site-header__nav > ul > li > a, .site-header__nav > ul .site-header__dropdown-trigger { padding: 1rem 1.25rem; color: var(--site-header__nav-item__color, #32323c); background: var(--site-header__nav-item__background); } .site-header__nav > ul > li > a > svg, .site-header__nav > ul .site-header__dropdown-trigger > svg { -ms-flex-item-align: center; align-self: center; margin-bottom: var(--site-header__nav-icon__margin-bottom, -0.2rem); } .site-header__nav > ul > li > a:not(.external-link) > svg, .site-header__nav > ul .site-header__dropdown-trigger:not(.external-link) > svg { margin-left: 0.375rem; fill: var(--site-header__nav-icon__fill, #32323c); } .site-header__nav > ul > li > a.external-link > svg, .site-header__nav > ul .site-header__dropdown-trigger.external-link > svg { --site-header__nav-icon__margin-bottom: -0.1rem; } .site-header__nav > ul > li > a:hover, .site-header__nav > ul > li[aria-expanded="true"] .site-header__dropdown-trigger { --site-header__nav-item__color: var(--tokens__colors__yellow); --site-header__nav-item__background: var(--tokens__colors__blue); --site-header__nav-icon__fill: var(--tokens__colors__red); } .site-header__nav > ul > li > a:hover { opacity: 1; } .site-header__nav > ul .site-header__dropdown-trigger { cursor: default; } .site-header__nav > ul > li { position: relative; } .site-header__nav > ul > li > ul { min-width: 100%; } .site-header__nav > ul > li:not([aria-expanded="true"]) .site-header__dropdown { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; position: absolute !important; } .site-header__nav .site-header__dropdown { position: absolute; padding-bottom: 0.5rem; background: var(--tokens__colors__blue); z-index: 10; } .site-header__nav .site-header__dropdown > li > a { width: 100%; padding: 0.5rem 1.25rem; color: white; white-space: nowrap; } .site-header__nav .site-header__dropdown .external-link > svg { margin-top: 3px; } .site-header__social { --social-links__color: var(--tokens__colors__grey-alt); padding: 0.5rem 1.25rem; } .site-header__social a { opacity: var(--site-header__social__opacity, 0.5); } .site-header__social a:hover { --site-header__social__opacity: 1; } .site-header__search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .site-header__search > form { width: 100%; position: relative; } .site-header__search > form input { --input__color: #32323c; height: 46px; background: #f9f9f9; padding-left: 1rem; padding-right: 2.857rem; } .site-header__search > form > button[type="submit"] { position: absolute; top: 0; right: 0; min-height: 46px; padding: 0 1.5rem; } .site-header__search__trigger { right: 0; z-index: 1; padding: 0.75rem; } .site-header__search__trigger svg { fill: #646665; } .site-header__search__trigger:hover { opacity: 0.5; } .site-header__search:not([aria-expanded="true"]) form { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; position: absolute !important; } .site-header__search:not([aria-expanded="true"]) .site-header__search__trigger__icon-close { display: none; } .site-header__search[aria-expanded="true"] { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-left: 2rem; } .site-header__search[aria-expanded="true"] .site-header__search__trigger__icon-open { display: none; } @media (min-width: 1280px) { .site-header__search[aria-expanded="true"] { padding: 5px 0; } } .site-header__site-mobile-nav-trigger { height: 1.125rem; width: 1.125rem; } .site-header__site-mobile-nav-trigger:hover { opacity: 0.6; } .site-header__site-mobile-nav-trigger__icon { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--site-header__site-mobile-nav-trigger__icon-color, #5f6163); background: currentColor; height: 2px; width: 100%; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .site-header__site-mobile-nav-trigger__icon::before, .site-header__site-mobile-nav-trigger__icon::after { content: ""; position: absolute; background: currentColor; height: 100%; width: 100%; } .site-header__site-mobile-nav-trigger__icon::before { bottom: var(--site-header__site-mobile-nav-trigger__icon-spacing, 0.3125rem); } .site-header__site-mobile-nav-trigger__icon::after { top: var(--site-header__site-mobile-nav-trigger__icon-spacing, 0.3125rem); } .site-header__site-mobile-nav-trigger[aria-expanded="true"] { --site-header__site-mobile-nav-trigger__icon-color: var(--tokens__colors__red); --site-header__site-mobile-nav-trigger__icon-spacing: 0; } .site-header__site-mobile-nav-trigger[aria-expanded="true"] .site-header__site-mobile-nav-trigger__icon { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .site-header__site-mobile-nav-trigger[aria-expanded="true"] .site-header__site-mobile-nav-trigger__icon::before { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .site-header__site-mobile-nav-trigger[aria-expanded="true"] .site-header__site-mobile-nav-trigger__icon::after { display: none; } .site-header__donate-btn { color: #fff; display: none; } @media (min-width: 900px) { .site-header__donate-btn { display: inherit; } } .site-header__donate-btn svg > path { fill: #fff !important; } .site-header[data-search-active="true"] .site-header__nav, .site-header[data-search-active="true"] .site-header__social, .site-header[data-search-active="true"] .site-header__donate-btn { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; position: absolute !important; } @media (max-width: 895px) { .site-header__nav, .site-header__search { display: none; } } @media (min-width: 896px) { .site-header__site-mobile-nav-trigger { display: none; } } @media (max-width: 1279px ) { .site-header__donate-btn { display: none; } } @media (max-width: 1218px) { .site-header__social { display: none; } } .site-header--white { --site-header__site-mobile-nav-trigger__icon-color: white; --site-header__nav-item__color: white; } body:not([data-site-mobile-nav-active="true"]) .site-header--white .site-header__logo svg path, body:not([data-site-mobile-nav-active="true"]) .site-header--white .site-header__dropdown-trigger svg path, body:not([data-site-mobile-nav-active="true"]) .site-header--white .site-header__social svg path, body:not([data-site-mobile-nav-active="true"]) .site-header--white .site-header__search:not([aria-expanded="true"]) svg path { fill: #fff; } body[data-site-mobile-nav-active="true"] .site-header { --site-header__background: white; } .site-header__subnav { display: none; position: absolute; top: 100%; width: 100%; background: rgba(255, 255, 255, 0.2); } .site-header__subnav__inner { max-width: 1280px; margin: 0 auto; -webkit-mask-image: var(--site-header__subnav__fade, linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 10%, #000000 90%, rgba(0, 0, 0, 0) 100%)); mask-image: var(--site-header__subnav__fade, linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 10%, #000000 90%, rgba(0, 0, 0, 0) 100%)); } .site-header__subnav nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: var(--tokens__font-family-styrene); font-size: 0.8rem; font-weight: 500; color: var(--theme__meta-color, white); padding: 0 calc(var(--layer__gutters__h) - var(--site-header__subnav__item__padding)); } .site-header__subnav nav ul li { padding: var(--site-header__subnav__item__padding); white-space: nowrap; height: var(--site-header__subnav__height); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .site-header__subnav nav ul li a { -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } .site-header__subnav nav ul li.active { border-bottom: 2px solid var(--theme__meta-color, white); } .site-mobile-nav { --title__color: #071735; --site-mobile-nav__padding__v: 1.125rem; --site-mobile-nav__padding__h: 1.5rem; --site-mobilve-nav__font-size: 0.875rem; display: var(--site-mobile-nav__display, grid); grid-template-columns: 1fr 1fr; background: #3d5f8b; width: 100%; position: absolute; z-index: 100; top: 100%; left: 0; } .site-mobile-nav > section { padding: var(--site-mobile-nav__padding__v) var(--site-mobile-nav__padding__h); color: white; } .site-mobile-nav > section header { margin-bottom: 1rem; } .site-mobile-nav > section ul { line-height: 1.25; margin-bottom: 0.5rem; } .site-mobile-nav > section ul li + li { margin-top: 1rem; } .site-mobile-nav > section a { font-family: var(--tokens__font-family-styrene); font-size: var(--site-mobilve-nav__font-size); } .site-mobile-nav > section + section { border-top: 1px solid #244a75; } .site-mobile-nav > section:not(.site-mobile-nav__secondary) { grid-column: 1/3; } .site-mobile-nav > section.site-mobile-nav__donate { padding: 0; } .site-mobile-nav__link { background: #e33c46; text-align: center; } .site-mobile-nav__primary > ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: calc(var(--site-mobile-nav__padding__h) * 2); -moz-column-gap: calc(var(--site-mobile-nav__padding__h) * 2); column-gap: calc(var(--site-mobile-nav__padding__h) * 2); } .site-mobile-nav__search { padding: 0 !important; } .site-mobile-nav__search > form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .site-mobile-nav__search input, .site-mobile-nav__search button { padding: var(--site-mobile-nav__padding__v) var(--site-mobile-nav__padding__h); } .site-mobile-nav__search input { --input__color: white; background: none; border: none; } .site-mobile-nav__search button { opacity: var(--site-mobile-nav__search__opacity, 0.5); } .site-mobile-nav__search button svg { fill: white; height: 1rem; width: 1rem; } .site-mobile-nav__search button:hover { --site-mobile-nav__search__opacity: 1; } .site-mobile-nav__social { --social-links__color: white; } .site-mobile-nav[aria-hidden="true"] { --site-mobile-nav__display: none; } @media (min-width: 896px) { .site-mobile-nav { --site-mobile-nav__display: none; } } :root { --skip-main__transform: translateX(-1000px); } .skip-main { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.25rem; font-weight: 600; -webkit-transform: var(--skip-main__transform); transform: var(--skip-main__transform); z-index: 1000; color: var(--primary-cta__color); background-color: var(--primary-cta__background-color); min-height: 3.5rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.25rem 2rem 0; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; font-weight: 900; font-family: var(--tokens__font-family-gascogne); min-width: 0; --primary-cta__color: white; --primary-cta__background-color: var(--tokens__colors__blue); --primary-cta__svg-color: white; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .skip-main > svg { margin: -3px 0 0 7px; width: 12px; fill: var(--primary-cta__svg-color); } .skip-main:hover { opacity: 0.8; } .skip-main:active { opacity: 0.6; } .skip-main.primary-cta--block { display: grid; width: 100%; text-align: center; padding: 0.25rem 2rem; font-weight: inherit; } @media print { .skip-main { display: none; } } .skip-main:focus, .skip-main:active { --skip-main__transform: none; } ul.slashed-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } ul.slashed-list li { display: block; } ul.slashed-list li:not(:last-child)::after { content: "/"; margin: 0 0.5em; } ul.slashed-list--centered { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .slider { display: grid; -ms-flex-line-pack: center; align-content: center; } .slider__slide { width: 100%; grid-row: 1; grid-column: 1; align-self: center; } .slider__slide[aria-hidden="true"] { visibility: hidden; } :root { --social-links__spacing: 2rem; --social-links__color: var(--tokens__colors__blue); } @media (min-width: 900px) { :root { --social-links__spacing: 1rem; } } .social-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-links > a { display: -webkit-box; display: -ms-flexbox; display: flex; } .social-links > a + a { margin-left: var(--social-links__spacing); } .social-links > a svg { fill: var(--social-links__color, currentColor); } .social-links--centered { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } :root { --standard-slider__controls__left: 50%; --standard-slider__controls__top: 100%; --standard-slider__transform: translate(calc(var(--controls__button__size) * -1), calc(var(--controls__button__size) / -2)); } .standard-slider { --controls__previous__color: #072271; --controls__next__color: #00144e; position: relative; /** * Special rules for certain kinds of content */ } .standard-slider__controls { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: var(--standard-slider__controls__top); left: var(--standard-slider__controls__left); -webkit-transform: var(--standard-slider__transform); transform: var(--standard-slider__transform); } .standard-slider--testimonials { margin-bottom: calc(var(--controls__button__size) / 2); } .standard-slider--testimonials > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; } .standard-slider--testimonials .testimonial > img { display: none; } .standard-slider--images { --standard-slider__controls__left: 0%; --standard-slider__controls__top: 48%; --controls__previous__color: #1c5699; --controls__next__color: #3787e8; } .standard-slider--images .standard-slider__controls { width: calc(100% + (var(--controls__button__size) * 2)); } .standard-slider--images .standard-slider__controls > aside { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; margin-right: auto; opacity: 0.5; } @media (max-width: 899px ) { .standard-slider--images .standard-slider__controls { --standard-slider__controls__top: 100%; --standard-slider__controls__left: 0%; --standard-slider__transform: translateY(calc(var(--controls__button__size) * -0.5)); max-width: 100%; } .standard-slider--images .standard-slider__controls > aside { display: none; } } :root { --subscribe__title__font-size: 1.625rem; --subscribe__subtitle__font-size: 1rem; } @media (min-width: 900px) { :root { --subscribe__title__font-size: 2.5rem; --subscribe__subtitle__font-size: 1.375rem; } } .subscribe { display: grid; position: relative; } .subscribe__content, .subscribe > img { grid-row: 1; grid-column: 1; -o-object-fit: cover; object-fit: cover; } .subscribe__content { position: relative; z-index: 1; padding: var(--layer__gutters__v) var(--layer__gutters__h); max-width: 900px; margin: 0 auto; } .subscribe__content > header { text-align: center; } .subscribe__content > header > h2 { --title__font-size: var(--subscribe__title__font-size); --title__color: white; } .subscribe__content > header > p { font-family: var(--tokens__font-family-styrene); font-size: var(--subscribe__subtitle__font-size); font-weight: 400; color: white; margin-top: 1rem; } .subscribe__content > form { margin-top: 2rem; } .subscribe > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; } @media print { .subscribe { display: none; } } .subscribe.subscribe--style-blue { background: #00152d; } .subscribe.subscribe--style-blue img { mix-blend-mode: soft-light; } .subscribe.subscribe--style-blue__content { width: 100%; } :root { --tabs__base-color: #d0d1d0; --tabs__theme-color: var(--tokens__colors__blue); --tabs__font-size: 0.875rem; --tabs__panel__padding: 0.75rem; --tabs__tab__padding__v: 1.25rem; --tabs__tab__selected-indicator__height: 6px; --tabs__panel__border__size: 2px; } @media (min-width: 900px) { :root { --tabs__font-size: 0.875rem; --tabs__panel__padding: 3.25rem; } } .tabs { width: 100%; font-family: var(--tokens__font-family-styrene); margin-top: calc(-1 * var(--tabs__tab__padding__v)); } .tabs.tabs--no-tuck { margin-top: 0; } .tabs__wrapper { margin-bottom: -2px; position: relative; } @media (min-width: 900px) { .tabs__wrapper--overflown > .scrolling-container { padding-bottom: 0.5rem; } } .tabs__wrapper .tabs__tooltip { display: none; } html.no-touchevents .tabs__wrapper:focus-within .tabs__tooltip { display: block; color: #ccc; text-transform: uppercase; font-size: 11px; position: absolute; bottom: 100%; right: 0; padding: 0.5rem; background: rgba(255, 255, 255, 0.75); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); z-index: 10; } .tabs__wrapper.focus-within .tabs__tooltip { display: block; color: #ccc; text-transform: uppercase; font-size: 11px; position: absolute; bottom: 100%; right: 0; padding: 0.5rem; background: white; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); z-index: 10; } .tabs__panel-wrapper { border-top: var(--tabs__panel__border__size) solid var(--tabs__base-color); background: #fbfbfb; display: grid; } .tabs__panel-wrapper.tabs__panel-wrapper--background-none { background: none; } @media print { .tabs__panel-wrapper { display: block; } } .tabs__list { display: block; text-align: center; white-space: nowrap; } .tabs__list__tab { padding: var(--tabs__tab__padding__v) var(--layer__gutters__h); overflow: visible; font-size: var(--tabs__font-size); color: var(--tabs__base-color); text-transform: uppercase; font-weight: 600; position: relative; max-width: 80vw; } .tabs__list__tab[aria-selected="true"]::after { content: ""; position: absolute; z-index: 3; bottom: 0; right: 0; left: 0; height: var(--tabs__tab__selected-indicator__height); background-color: var(--tabs__theme-color); } .tabs__list__tab:hover, .tabs__list__tab:focus, .tabs__list__tab:active, .tabs__list__tab[aria-selected="true"] { color: var(--tabs__theme-color); } .tabs__panel { grid-column: 1; grid-row: 1; padding: var(--layer__gutters__v) var(--layer__gutters__h); display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-items: center; grid-gap: 2rem; } .tabs__panel.tabs__panel--padding-top-only { --layer__gutters__h: 0; grid-template-columns: 1fr; padding-bottom: 0; } @media print { .tabs__panel { display: block; } } .tabs__panel > .text-block { margin: 0 auto; } .tabs__panel > .text-block p, .tabs__panel > .text-block li { letter-spacing: -0.02em; } .tabs__panel > .underlined-cta a, .tabs__panel > .underlined-cta button { display: grid; } .tabs__panel[aria-hidden="true"] { display: none; } @media print { .tabs__panel[aria-hidden="true"] { display: block; } } .tabs [role="tabpanel"] { outline: none; } .tabs__printable li + li { margin-top: 2rem; } .tabs__printable header { margin-bottom: 0.5rem; } :root { --tag__color: var(--tokens__colors__grey); } .tag { font-family: var(--tokens__font-family-styrene); font-size: 0.625rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.5; color: var(--tag__color); } .tag.tag--block { --tag__color: white; padding: 4px 8px; background-color: #e6c05b; } .tag--color-white { --tag__color: white; } .tag--color-dark { --tag__color: var(--tokens__colors__black); } .tag--faded { opacity: 0.75; } :root { --testimonial__padding: 2rem; } @media (min-width: 900px) { :root { --testimonial__padding: 4rem; } } .testimonial { --title__color: #242424; --person__title__color: #242424; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; padding: var(--testimonial__padding); position: relative; height: 100%; } .testimonial > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; } .testimonial blockquote { max-width: 900px; margin-bottom: 1rem; } .testimonial blockquote::before { content: "“"; } .testimonial blockquote::after { content: "”"; } :root { --text-block__font-size: 1.125rem; --text-block__header__margin-top: 3rem; --text-block__header__margin-bottom: -0.75rem; --text-block__list-gutter: 1rem; --text-block__list__margin-left: 0.5rem; --text-block__list-spacing: 2rem; --text-block__bullet-size: 8px; --text-block__bullet-tuck: 8px; --text-block__bullet-graphic: url("/assets/images/flourishes/bullet.png"); --text-block__counter-color: var(--tokens__colors__blue); --text-block__counter-font-size: 1.25rem; --text-block__counter-top: -2px; --text-block__gutters: 1.5rem; } @media (min-width: 900px) { :root { --text-block__font-size: 1.25rem; --text-block__list-spacing: 3rem; --text-block__bullet-size: 13px; --text-block__counter-font-size: 2rem; --text-block__counter-top: -10px; } } .text-block { font-size: var(--text-block__font-size); /** * Link Styles * Underline styling boosted from Medium: https://medium.design/crafting-link-underlines-on-medium-7c03a9274f9 */ /** * List Styles */ /** * Inline image Styles * Provided to better support legacy text-blocks */ /** * Extensions */ } .text-block > * { margin-top: 1.5rem; } .text-block a { text-decoration: none; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, rgba(0, 0, 0, 0.84)), color-stop(0, rgba(0, 0, 0, 0))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84) 100%, rgba(0, 0, 0, 0) 0); background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, currentColor), color-stop(0, currentColor)); background-image: linear-gradient(to right, currentColor 100%, currentColor 0); background-image: url('data:image/svg+xml;utf8,'); background-size: 1px 1px; background-position: 0 1.05em; background-position: 0 calc(1em + 4px); -webkit-tap-highlight-color: rgba(0, 0, 0, 0.54); } .text-block a:hover { background-image: url('data:image/svg+xml;utf8,'); } .text-block h2, .text-block h3, .text-block h4, .text-block h5, .text-block h6 { margin-top: var(--text-block__header__margin-top); margin-bottom: var(--text-block__header__margin-bottom); } .text-block h2 a, .text-block h3 a, .text-block h4 a, .text-block h5 a, .text-block h6 a { text-decoration: none; color: var(--tokens__colors__blue-dark); } .text-block h2 + h6, .text-block h3 + h6, .text-block h4 + h6, .text-block h5 + h6, .text-block h6 + h6 { --text-block__header__margin-top: 1rem; } .text-block h2 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-size: 1.625rem; --title__line-height: 1.2; } @media (min-width: 900px) { .text-block h2 { --title__font-size: 1.875rem; } } .text-block h3 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-size: 1rem; --title__font-family: var(--tokens__font-family-styrene); --title__font-weight: 900; --title__line-height: 1.4; } @media (min-width: 900px) { .text-block h3 { --title__font-size: 1.25rem; } } .text-block h4 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-family: var(--tokens__font-family-faustina); --title__font-size: 1.25rem; --title__font-weight: 600; --title__color: black; } @media (min-width: 900px) { .text-block h4 { --title__font-size: 1.5rem; } } .text-block h5 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-family: var(--tokens__font-family-styrene); --title__font-size: 0.75rem; --title__font-weight: 900; --title__letter-spacing: 0.2em; --title__line-height: 1.2; text-transform: uppercase; } .text-block h6 { font-family: var(--tokens__font-family-styrene); font-size: 0.625rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.5; color: var(--tag__color); } .text-block h6.tag--block { --tag__color: white; padding: 4px 8px; background-color: #e6c05b; } .text-block h6 + h2, .text-block h6 + h3, .text-block h6 + h4, .text-block h6 + h5, .text-block h6 + h6 { --text-block__header__margin-top: calc(var(--text-block__header__margin-bottom) * -1); } .text-block ul, .text-block ol { font-size: 1rem; line-height: 1.5; margin-left: var(--text-block__list__margin-left); display: grid; grid-gap: var(--text-block__list-gutter); } .text-block ul li, .text-block ol li { display: list-item; padding-left: var(--text-block__list-spacing); position: relative; } .text-block ul li > ul, .text-block ol li > ul, .text-block ul li > ol, .text-block ol li > ol { --text-block__list-gutter: 0.5rem; --text-block__list__margin-left: 0; --text-block__list-spacing: 1.5rem; margin-top: 1rem; } @media (min-width: 900px) { .text-block ul li > ul, .text-block ol li > ul, .text-block ul li > ol, .text-block ol li > ol { --text-block__list-spacing: 2rem; } } .text-block ul li > ul > li::before, .text-block ol li > ul > li::before { --text-block__bullet-size: 7px; --text-block__bullet-tuck: 10px; background-color: white; background-blend-mode: luminosity; } @media (max-width: 899px ) { .text-block ul li > ul > li::before, .text-block ol li > ul > li::before { left: 0; } } @media (min-width: 900px) { .text-block ul li > ul > li::before, .text-block ol li > ul > li::before { --text-block__bullet-size: 10px; --text-block__bullet-tuck: 9px; } } .text-block ul li > ol > li::before, .text-block ol li > ol > li::before { --text-block__counter-color: currentColor; --text-block__counter-font-size: 1rem; --text-block__counter-top: -1px; opacity: 0.8; } @media (min-width: 900px) { .text-block ul li > ol > li::before, .text-block ol li > ol > li::before { --text-block__counter-font-size: 1.5rem; --text-block__counter-top: -5px; } } .text-block ul li::before, .text-block ol li::before { position: absolute; left: 0; } .text-block ul li a, .text-block ol li a { background-position: 0 calc(1em + 3px); } .text-block ul > li::before { content: ""; height: var(--text-block__bullet-size); width: var(--text-block__bullet-size); top: var(--text-block__bullet-tuck); background: var(--text-block__bullet-graphic) center center no-repeat; background-size: contain; } @media (max-width: 899px ) { .text-block ul > li::before { left: 5px; } } .text-block ol { counter-reset: custom-counter; } .text-block ol > li { counter-increment: custom-counter; } .text-block ol > li::before { content: counter(custom-counter); color: var(--text-block__counter-color); font-family: var(--tokens__font-family-styrene); font-size: var(--text-block__counter-font-size); font-weight: 900; top: var(--text-block__counter-top); } .text-block ul.text-block__checkmark-list { --text-block__bullet-size: 24px; --text-block__bullet-graphic: url("/assets/images/flourishes/check.png"); --text-block__list-spacing: 3.125rem; --text-block__bullet-tuck: 0; --text-block__list-gutter: 2rem; } .text-block ul.text-block__checkmark-list ul { --text-block__bullet-graphic: url("/assets/images/flourishes/bullet.png"); } .text-block blockquote { margin-left: 2rem; opacity: 0.8; border-left: 2px solid #eee; padding-left: 1.5rem; font-size: 0.95em; } .text-block blockquote > * { margin-top: 0; } .text-block .wp-caption-text { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-family: var(--tokens__font-family-styrene); --title__font-size: 0.75rem; --title__font-weight: 900; --title__letter-spacing: 0.2em; --title__line-height: 1.2; text-transform: uppercase; --title__font-weight: 500; --title__font-size: 0.6875rem; --title__color: #888; margin-top: 0.5em; text-align: center; } .text-block div.wp-caption, .text-block figure, .text-block img.alignnone { width: 100% !important; height: auto; } .text-block .wp-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .text-block .wp-caption.aligncenter img, .text-block .wp-caption.alignleft img, .text-block .wp-caption.alignright img, .text-block img.aligncenter, .text-block img.alignleft, .text-block img.alignright { width: auto; height: auto; max-width: 100%; justify-self: center; } @media (min-width: 900px) { .text-block .wp-caption.aligncenter img.alignleft, .text-block .wp-caption.alignleft img.alignleft, .text-block .wp-caption.alignright img.alignleft, .text-block img.aligncenter.alignleft, .text-block img.alignleft.alignleft, .text-block img.alignright.alignleft, .text-block .wp-caption.aligncenter img.alignright, .text-block .wp-caption.alignleft img.alignright, .text-block .wp-caption.alignright img.alignright, .text-block img.aligncenter.alignright, .text-block img.alignleft.alignright, .text-block img.alignright.alignright { width: 18.75rem; margin: 0.75em auto; } .text-block .wp-caption.aligncenter img.alignleft, .text-block .wp-caption.alignleft img.alignleft, .text-block .wp-caption.alignright img.alignleft, .text-block img.aligncenter.alignleft, .text-block img.alignleft.alignleft, .text-block img.alignright.alignleft { float: left; margin-right: 2.5em; } .text-block .wp-caption.aligncenter img.alignright, .text-block .wp-caption.alignleft img.alignright, .text-block .wp-caption.alignright img.alignright, .text-block img.aligncenter.alignright, .text-block img.alignleft.alignright, .text-block img.alignright.alignright { float: right; margin-left: 2.5em; } } .text-block iframe { justify-self: center; max-width: 100%; } .text-block > *:first-child { margin-top: 0; } .text-block > *:last-child { margin-bottom: 0; } .text-block--font-sans-serif { font-family: var(--tokens__font-family-styrene); } .text-block--font-size-small { --text-block__font-size: 1rem; --p__line-height: 1.625; } .text-block--font-size-smallest { --text-block__font-size: 0.74em; --p__line-height: 1.625; } .text-block--line-height-large { --p__line-height: 1.875; } .text-block--tighter { --text-block__gutters: 0.5rem; } .text-block--colors-light { --tag__color: white; color: white; } .text-block--colors-light h2, .text-block--colors-light h3, .text-block--colors-light h4, .text-block--colors-light h5 { color: inherit; } .text-block--colors-grey { color: var(--tokens__colors__grey); } .text-block--centered { text-align: center; } @media print { .text-block a[href] { font-style: italic !important; text-decoration: none !important; font-weight: 400 !important; word-break: break-all; } .text-block a[href]::after { content: " [" attr(href) "]"; display: inline; font-style: normal; } } @media (min-width: 900px) { :root { --text-with-image__columns: 7fr 5fr; --text-with-image__gap: 3.75rem; } } .text-with-image { display: grid; grid-template-columns: var(--text-with-image__columns, 1fr); grid-gap: var(--text-with-image__gap, 1.875rem); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .text-with-image__images { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); position: relative; } .text-with-image__images__primary { grid-column: 1 / 10; grid-row: 1 / 10; } .text-with-image__images__secondary { grid-column: 7 / 11; grid-row: 5 / 11; } .text-with-image__images img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; display: block; } .text-with-image__text { max-width: 28rem; margin: auto; } .text-with-image__text .title { margin-bottom: 0.625rem; } .text-with-image__text .primary-cta { margin-top: 1.25rem; } @media (min-width: 900px) { .text-with-image--right { --text-with-image__columns: 7fr 5fr; } } .text-with-image--right .text-with-image__text { grid-row: 1; } .text-with-image--right .text-with-image__images__primary { grid-column: 3 / 11; grid-row: 1 / 11; } .text-with-image--right .text-with-image__images__secondary { grid-column: 1 / 6; grid-row: 4 / 8; } :root { --timeline__header__font-size: 1.75rem; --timeline__intro__font-size: 1rem; --timeline__items__grid-auto-columns: 80%; --timeline__items__padding__v: 2.5rem; --timeline__items__padding__h: 1.25rem; --timeline__dot__size: 1rem; --timeline__dot__border-size: 4px; --timeline__line__height: 2px; --timeline__header__padding: 2rem; --timeline__tooltip__opacity: 0.6; } @media (min-width: 900px) { :root { --timeline__header__font-size: 3rem; --timeline__intro__font-size: 1.25rem; --timeline__items__grid-auto-columns: 25rem; --timeline__items__padding__v: 3.125rem; --timeline__items__padding__h: 2.25rem; --timeline__header__padding: 4rem; } } .timeline { color: white; background-color: var(--timeline__background-color); position: relative; } .timeline__header { text-align: center; max-width: 900px; margin: 0 auto; padding: var(--timeline__header__padding) 1.25rem 0; display: block; } .timeline__header h3 { font-family: var(--tokens__font-family-gascogne); font-size: var(--timeline__header__font-size); font-weight: var(--timeline__header__font-weight, 800); color: var(--timeline__header__color); margin-bottom: 0.9375rem; } .timeline__header p { font-family: var(--tokens__font-family-styrene); font-size: var(--timeline__intro__font-size); } .timeline__items { width: 100%; padding: var(--timeline__items__padding__v) var(--timeline__items__padding__h); display: grid; grid-auto-flow: column; grid-auto-columns: var(--timeline__items__grid-auto-columns); grid-gap: 1.25rem; white-space: normal; } .timeline__item { --text-block__font-size: 1.125rem; } .timeline__item header { position: relative; } .timeline__item header > h4 { --title__line-height: 1.1; } .timeline__item header::before { content: ""; width: var(--timeline__dot__size); height: var(--timeline__dot__size); background: var(--timeline__ui__color); display: inline-block; position: absolute; left: calc(var(--timeline__dot__border-size) * -1); bottom: calc((var(--timeline__dot__border-size) + var(--timeline__dot__size) + var(--timeline__line__height)) / -2); border-radius: 100%; border: var(--timeline__dot__border-size) solid var(--timeline__background-color); } .timeline__item header::after { content: ""; display: block; width: 100%; height: var(--timeline__line__height); background-color: rgba(194, 194, 194, 0.2); margin: 1.25rem 0 1.875rem; } .timeline__tooltip { --tag__color: white; font-family: var(--tokens__font-family-styrene); font-size: 0.625rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.5; color: var(--tag__color); position: absolute; left: var(--timeline__items__padding__h); bottom: calc(var(--timeline__items__padding__v) / 2); opacity: var(--timeline__tooltip__opacity); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } .timeline__tooltip.tag--block { --tag__color: white; padding: 4px 8px; background-color: #e6c05b; } .timeline__tooltip svg { margin-left: 0.5rem; } .timeline__tooltip svg path { fill: white; } .timeline__items.scrolling-container.is-scrolled + .timeline__tooltip { --timeline__tooltip__opacity: 0; } .timeline--theme-color-navy { --timeline__background-color: var(--tokens__colors__navy); --timeline__ui__color: var(--tokens__colors__sky-blue); --timeline__header__color: var(--tokens__colors__sky-blue); } .timeline--theme-color-red { --timeline__background-color: var(--tokens__colors__red); --timeline__ui__color: #072271; } @media print { .timeline { background: none !important; max-width: 715px; margin: 0 auto; } .timeline__items { display: block !important; grid: none !important; padding: 0 !important; } .timeline__items header::before, .timeline__items header::after { display: none; } .timeline__item + .timeline__item { margin-top: 1rem; } } :root { --title__font-family: var(--tokens__font-family-gascogne); --title__font-size: 1rem; --title__font-weight: 500; } .title { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; } .title--primary { --title__font-size: 1.5rem; --title__font-weight: 900; --title__line-height: 1.1; } @media (min-width: 900px) { .title--primary { --title__font-size: 3.125rem; } } @media (min-width: 900px) { .title--primary--font-size-small { --title__font-size: 2rem; } } .title--secondary { --title__font-size: 1.625rem; --title__line-height: 1.2; } @media (min-width: 900px) { .title--secondary { --title__font-size: 1.875rem; } } .title--secondary--font-size-small { --title__font-size: 1.375rem; } @media (min-width: 900px) { .title--secondary--font-size-small { --title__font-size: 1.5rem; } } .title--tertiary { --title__font-size: 1rem; --title__font-family: var(--tokens__font-family-styrene); --title__font-weight: 900; --title__line-height: 1.4; } @media (min-width: 900px) { .title--tertiary { --title__font-size: 1.25rem; } } .title--tertiary--font-size-small { --title__font-size: 0.625rem; } @media (min-width: 900px) { .title--tertiary--font-size-small { --title__font-size: 0.825rem; } } .title--tertiary--font-size-large { --title__font-size: 1.25rem; } @media (min-width: 900px) { .title--tertiary--font-size-large { --title__font-size: 1.625rem; } } .title--tertiary--font-weight-light { --title__font-weight: 500; } .title--quaternary { --title__font-family: var(--tokens__font-family-faustina); --title__font-size: 1.25rem; --title__font-weight: 600; --title__color: black; } @media (min-width: 900px) { .title--quaternary { --title__font-size: 1.5rem; } } .title--quinary { --title__font-family: var(--tokens__font-family-styrene); --title__font-weight: 500; --title__font-size: 0.875rem; --title__line-height: 1.25; } @media (min-width: 900px) { .title--quinary { --title__font-size: 0.9375rem; } } .title--quinary--font-size-small { --title__font-size: 0.625rem; } @media (min-width: 900px) { .title--quinary--font-size-small { --title__font-size: 0.75rem; } } .title--meta { --title__font-family: var(--tokens__font-family-styrene); --title__font-size: 0.75rem; --title__font-weight: 900; --title__letter-spacing: 0.2em; --title__line-height: 1.2; text-transform: uppercase; } .title--meta--font-size-small { --title__font-size: 0.6875rem; } .title--meta--font-size-smaller { --title__font-size: 0.625rem; } .title--meta--font-weight-light { --title__font-weight: 500; } .title--meta--font-weight-lighter { --title__font-weight: 400; --title__letter-spacing: 0.1em; } .title--color-black { --title__color: black; } .title--color-white { --title__color: white; } .title--color-grey { --title__color: #888; } .title--color-red { --title__color: var(--tokens__colors__red); } .title--color-blue { --title__color: var(--tokens__colors__blue); } .title--color-blue-dark { --title__color: var(--tokens__colors__blue-dark); } .title--color-light-grey { --title__color: #bebebe; } .title--centered { margin: 0 auto; text-align: center; } .title--gradient { --title__color: transparent; background: var(--title__gradient-color, var(--tokens__colors__black)) -webkit-gradient(linear, left top, left bottom, color-stop(42%, transparent), color-stop(0, rgba(255, 255, 255, 0.4)), color-stop(62%, rgba(255, 255, 255, 0.15)), color-stop(0, rgba(255, 255, 255, 0.4))); background: var(--title__gradient-color, var(--tokens__colors__black)) linear-gradient(to bottom, transparent 42%, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.15) 62%, rgba(255, 255, 255, 0.4) 0); -webkit-background-clip: text; background-clip: text; } .title--print { display: none; } @media print { .title--print { display: block; } } :root { --underlined-cta__font-size: 0.875rem; --underlined-cta__color: var(--tokens__colors__blue); --underlined-cta__icon-order: -99; --underlined-cta__icon-margin: 2px 2px -2px 0; --underlined-cta__icon-width: 1rem; --underlined-cta__asset: url("/assets/images/flourishes/thick-line.svg"); } @media (min-width: 900px) { :root { --underlined-cta__font-size: 1.125rem; --underlined-cta__icon-width: 1.125rem; } } .underlined-cta { display: var(--underlined-cta__display, inline-flex); text-align: center; min-width: 0; } .underlined-cta a, .underlined-cta button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; max-width: 100%; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 0.5rem; padding-bottom: 0.5rem; font-family: var(--tokens__font-family-gascogne); font-weight: 900; font-size: var(--underlined-cta__font-size); color: var(--underlined-cta__color); } .underlined-cta a > svg, .underlined-cta button > svg { fill: currentColor; margin: var(--underlined-cta__icon-margin); -webkit-box-ordinal-group: var(--underlined-cta__icon-order); -ms-flex-order: var(--underlined-cta__icon-order); order: var(--underlined-cta__icon-order); height: var(--underlined-cta__icon-width); width: var(--underlined-cta__icon-width); } @media screen { .underlined-cta a::after, .underlined-cta button::after { content: ""; position: absolute; height: 6px; width: 100%; left: 0; bottom: 0; background: var(--underlined-cta__asset) no-repeat; background-size: 100% 100%; } } @media print { .underlined-cta a, .underlined-cta button { font-style: italic !important; text-decoration: none !important; font-weight: 400 !important; word-break: break-all; white-space: normal; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .underlined-cta a > svg, .underlined-cta button > svg { display: none; } .underlined-cta a::after, .underlined-cta button::after { content: " at " attr(href) ""; display: block; font-style: normal; } } .underlined-cta--large { --underlined-cta__font-size: 1.125rem; } @media (min-width: 900px) { .underlined-cta--large { --underlined-cta__font-size: 1.375rem; } } .underlined-cta--color-grey { --underlined-cta__color: var(--tokens__colors__grey); } .underlined-cta--color-red { --underlined-cta__color: var(--tokens__colors__red); --underlined-cta__asset: url("/assets/images/flourishes/thick-line-red.svg"); } .underlined-cta--icon-reverse { --underlined-cta__icon-order: 99; --underlined-cta__icon-margin: 2px 0 -2px 2px; } @media print { .underlined-cta { word-break: break-all; } } :root { --video-slider__flourish-size: 1.375rem; --video-slider__thumbnail-controls__gutter__top: 1.5rem; --video-slider__thumbnail-controls__gutter__right: var(--layer__gutters__h); --video-slider__thumbnail-controls__background__gradient-stop: 4.658rem; --video-slider__thumbnail-controls__indicator__display: none; --video-slider__thumbnail-controls__indicator__top: 0.5rem; --video-slider__thumbnail-controls__button__padding: 1rem; --video-slider__thumbnail-controls__play-button__diameter: 1.5rem; } @media (min-width: 900px) { :root { --video-slider__thumbnail-controls__gutter__top: 3rem; --video-slider__thumbnail-controls__gutter__right: var(--video-slider__thumbnail-controls__button__padding); --video-slider__thumbnail-controls__indicator__top: calc(var(--video-slider__thumbnail-controls__gutter__top) / -2); --video-slider__thumbnail-controls__play-button__diameter: 2rem; } } .video-slider { position: relative; margin-top: var(--video-slider__flourish-size); } .video-slider__fringe { position: absolute; top: calc(var(--video-slider__flourish-size) * -1); left: 0; right: 0; width: 100%; height: var(--video-slider__flourish-size); } .video-slider__controls { --gallery-list__item-width: calc(var(--layer__max-width) / 3); --gallery-list__grid-gap: 0; display: grid; grid-template-columns: 1fr auto; position: relative; } .video-slider__controls__mobile-slide-counter { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0.125rem; left: var(--layer__gutters__h); font-family: var(--tokens__font-family-styrene); font-size: 0.625rem; font-weight: 500; color: var(--tokens__colors__grey); opacity: 0.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .video-slider__controls__thumbnail-controls { padding-top: var(--video-slider__thumbnail-controls__gutter__top); } .video-slider__controls__thumbnail-controls__button { padding: 0 var(--video-slider__thumbnail-controls__button__padding) var(--video-slider__thumbnail-controls__button__padding); position: relative; height: 100%; } .video-slider__controls__thumbnail-controls__button > svg { position: absolute; top: var(--video-slider__thumbnail-controls__indicator__top); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); fill: var(--tokens__colors__red); height: 0.5rem; display: var(--video-slider__thumbnail-controls__indicator__display); z-index: 1; } .video-slider__controls__thumbnail-controls__button > figure { position: relative; padding-top: 56.25%; background-color: var(--tokens__colors__grey-light); margin-bottom: 1rem; } .video-slider__controls__thumbnail-controls__button > figure > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .video-slider__controls__thumbnail-controls__button > figure > svg { position: absolute; bottom: 0.5rem; right: 0.5rem; width: var(--video-slider__thumbnail-controls__play-button__diameter); height: var(--video-slider__thumbnail-controls__play-button__diameter); z-index: 1; } .video-slider__controls__thumbnail-controls__button > h4 { --title__color: var(--tokens__colors__black); height: 100%; } .video-slider__controls__thumbnail-controls__button[aria-selected="true"] { --video-slider__thumbnail-controls__indicator__display: block; background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0, var(--tokens__colors__red))); background: linear-gradient(to bottom, transparent var(--video-slider__thumbnail-controls__background__gradient-stop), var(--tokens__colors__red) 0); } .video-slider__controls__thumbnail-controls__button[aria-selected="true"] h4 { --title__color: white; } .video-slider__controls .gallery-list::after { content: ""; display: block; width: var(--video-slider__thumbnail-controls__gutter__right); height: 100%; } @media (max-width: 899px ) { .video-slider__controls { margin-left: calc(var(--layer__gutters__h) * -1); margin-right: calc(var(--layer__gutters__h) * -1); } .video-slider__controls .gallery-list { padding-left: var(--layer__gutters__h); } } .video-slider__controls .controls { --controls__previous__color: var(--tokens__colors__red-dark); --controls__next__color: var(--tokens__colors__red); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid var(--tokens__colors__grey-alt--faded-50); padding: var(--video-slider__thumbnail-controls__gutter__top) 0 0 2rem; } .video-slider__controls .controls__prev { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .video-slider__controls .controls > aside { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; opacity: 0.5; } .video-slider .video__overlay__container { --video__container-grid-template-columns: 1fr auto; justify-items: end; } .video-slider .video__overlay__container header { grid-column: 1; } .video-slider .video__overlay__container > svg { grid-column: 2; grid-row: 1; } :root { --video__play-button__diameter: 2.5rem; --video__title__font-size: 0.875rem; --video__container-gutter: 0.5rem; --video__container-padding: 1.125rem; --video__container-grid-template-columns: auto 1fr; } @media (min-width: 400px) { :root { --video__play-button__diameter: 3.5rem; } } @media (min-width: 900px) { :root { --video__play-button__diameter: 6rem; --video__title__font-size: 1.125rem; --video__container-gutter: 1.25rem; --video__container-padding: 1.25rem; } } .video { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background-color: black; } .video iframe, .video video, .video__overlay, .video__poster { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .video__poster { z-index: 1; -o-object-fit: cover; object-fit: cover; } .video__overlay { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(14%, rgba(7, 34, 113, 0)), to(#000c2e)); background-image: linear-gradient(-180deg, rgba(7, 34, 113, 0) 14%, #000c2e 100%); z-index: 2; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); -webkit-transition-property: opacity; transition-property: opacity; } .video__overlay:hover { cursor: pointer; opacity: 0.8; } .video__overlay__metadata { color: white; margin-bottom: 0.25rem; opacity: 0.6; } .video__overlay__container { position: absolute; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: var(--video__container-grid-template-columns); -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: var(--video__container-gutter); font-family: var(--tokens__font-family-styrene); font-weight: 500; font-size: var(--video__title__font-size); padding: var(--video__container-padding); } .video__overlay__container header h3 { font-family: var(--title__font-family); font-size: var(--title__font-size); font-weight: var(--title__font-weight); color: var(--title__color); letter-spacing: var(--title__letter-spacing); line-height: var(--title__line-height); word-wrap: break-word; --title__font-size: 1rem; --title__font-family: var(--tokens__font-family-styrene); --title__font-weight: 900; --title__line-height: 1.4; --title__font-weight: 500; color: white; line-height: 1.2; max-height: var(--video__play-button__diameter); } @media (min-width: 900px) { .video__overlay__container header h3 { --title__font-size: 1.25rem; } } @media (max-width: 899px ) { .video__overlay__container header h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* number of lines to show */ -ms-flex-item-align: start; align-self: flex-start; } } @media (min-width: 900px) { .video__overlay__container header h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* number of lines to show */ -ms-flex-item-align: start; align-self: flex-start; } } .video__overlay__container header svg, .video__overlay__container header a { opacity: 0.8; } .video__overlay__container header a { color: white; } .video__overlay__container > svg { width: var(--video__play-button__diameter); height: var(--video__play-button__diameter); } .video[data-playing="true"] .video__overlay, .video[data-playing="true"] .video__poster { display: none; } @media print { .video { padding: 0; height: 1rem; } .video::after { content: "[Video]"; display: block; text-align: center; padding: 2rem; } .video__overlay { background: none; } .video__overlay svg { display: none; } .video__media { display: none; } .video__poster { display: none; } } body[data-template="404"] { --hero__min-height: 30rem; } body[data-template="about"] { --hero__tuck: calc((100vw - (var(--layer__gutters__h)) * 2) * 0.5625 * 0.5); --timeline__header__font-weight: 500; } @media (min-width: 771px) { body[data-template="about"] { --hero__tuck: calc((715px + var(--content-gutter) * 2) * 0.5625 * 0.5); } } @media (min-width: 900px) { body[data-template="about"] { --hero__min-height: 48rem; } } body[data-template="about"] .about__policy-areas { --title__gradient-color: #f24149; --link-grid__description__color: var(--tokens__colors__grey); } body[data-template="about"] .about__policy-areas .link-grid a > p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* number of lines to show */ -ms-flex-item-align: start; align-self: flex-start; } body[data-template="about"] .about__approach { --title__gradient-color: var(--tokens__colors__blue); } body[data-template="archive"] { --hero__min-height: 5rem; --hero__padding-v: var(--site-header__subnav__height); --hero__title__font-size: 1.625rem; --archive__search__padding: 1.25rem; --archive__result-gutter: 1rem; --archive__item__thumbnail-width: 5rem; --archive__item__icon-height: 0.75rem; --archive__item__thumbnail__play-icon__diameter: var(--video-slider__thumbnail-controls__play-button__diameter); } @media (min-width: 900px) { body[data-template="archive"] { --hero__min-height: 6rem; --hero__title__font-size: 2.5rem; --archive__search__padding: 2rem; --archive__result-gutter: 2rem; --archive__item__thumbnail-width: 10rem; --archive__item__icon-height: 1.25rem; } } @media (min-width: 1280px) { body[data-template="archive"] { --archive__filters-width: 26rem; --archive__filters-padding: 3.25rem; } } body[data-template="archive"] > main { --layer__gutters__top: 1.5rem; } body[data-template="archive"] #archive { visibility: hidden; } body[data-template="archive"] #archive[data-active="true"] { visibility: visible; } @media (min-width: 900px) { body[data-template="archive"] #archive { display: grid; grid-template-columns: var(--archive__filters-width, 20rem) auto; grid-gap: 3rem; } } @media print { body[data-template="archive"] #archive { display: block; grid: none; } } body[data-template="archive"] .archive__search { margin-bottom: var(--archive__search__padding); position: relative; } body[data-template="archive"] .archive__search > header { margin-bottom: 2rem; } body[data-template="archive"] .archive__search input[type="search"] { padding-left: 1.5rem; background: url('data:image/svg+xml;utf8,') no-repeat left center; padding-right: 24px; /* iOS Zoom Fix */ } @media (max-width: 399px ) { body[data-template="archive"] .archive__search input[type="search"] { font-size: 16px; } } body[data-template="archive"] .archive__filter__reset { color: var(--tokens__colors__blue); font-family: var(--tokens__font-family-styrene); font-size: 0.75rem; margin-top: 1rem; } body[data-template="archive"] .archive__filter--date-range input { margin-bottom: 1.5rem; } body[data-template="archive"] .archive__filter--date-range input[name="recent"] { display: none; } body[data-template="archive"] .archive__filter--date-range h6 { margin-bottom: 0.5rem; } body[data-template="archive"] .archive__filter--date-range__jump-options { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.375rem 1.5rem; } body[data-template="archive"] .archive__filter--date-range__special-options { margin-top: 0.75rem; display: grid; grid-gap: 0.375rem; } body[data-template="archive"] #archive__sorts .pretty-select { --dropdown-trigger__padding-v: 0.625rem; --pretty-select__min-width: 0; } body[data-template="archive"] #archive__sorts .pretty-select .title--quinary { --title__font-size: 0.75rem; --title__color: #585858; } body[data-template="archive"] #archive__sorts .pretty-select::after { width: 10px; height: 6px; right: 0; } @media print { body[data-template="archive"] #archive__sorts { display: none; } } body[data-template="archive"] #archive__status svg { margin-left: 0.25rem; } body[data-template="archive"] #archive__load-more { margin-top: 2.5rem; } body[data-template="archive"] .archive__main > header, body[data-template="archive"] .archive__main__item { border-bottom: 1px solid #f6f6f6; } body[data-template="archive"] .archive__main > header { padding-bottom: 1.5rem; } body[data-template="archive"] .archive__main a { display: block; } body[data-template="archive"] .archive__main__item { padding: var(--archive__result-gutter) 0; } body[data-template="archive"] .archive__main__item h2 { margin-bottom: 0.5rem; } @media (max-width: 899px ) { body[data-template="archive"] .archive__main__item h2 { --title__font-size: 1rem; } } body[data-template="archive"] .archive__main__item > p { margin-bottom: 1rem; } body[data-template="archive"] .archive__main__item--media { display: -webkit-box; display: -ms-flexbox; display: flex; } body[data-template="archive"] .archive__main__item--media .archive__main__item__content-wrapper { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } body[data-template="archive"] .archive__main__item--media .archive__main__item__content-wrapper h2 svg { opacity: 0.4; height: var(--archive__item__icon-height); } body[data-template="archive"] .archive__main__item--media .archive__main__item__thumbnail-wrapper > figure { position: relative; padding-top: 56.25%; background-color: var(--tokens__colors__grey-light); margin-left: 1rem; width: var(--archive__item__thumbnail-width); } body[data-template="archive"] .archive__main__item--media .archive__main__item__thumbnail-wrapper > figure > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } body[data-template="archive"] .archive__main__item--media .archive__main__item__thumbnail-wrapper > figure > svg { position: absolute; bottom: 0.5rem; right: 0.5rem; width: var(--archive__item__thumbnail__play-icon__diameter); height: var(--archive__item__thumbnail__play-icon__diameter); z-index: 1; } body[data-template="archive"] .archive__main__item--media .archive__main__item__source { display: grid; grid-template-columns: auto 1fr; grid-gap: 0.5rem; } body[data-template="archive"] .archive__main__item--media .archive__main__item__source > h3 { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: var(--archive__item__source__header__margin-top, 0.25rem); } body[data-template="archive"] .archive__main__item--media .archive__main__item__source > h3 svg { margin-top: 0.0625rem; margin-left: 0.25rem; } body[data-template="archive"] .archive__main__item--media .archive__main__item__source > h3 svg path { fill: var(--tokens__colors__blue); } @media (max-width: 899px ) { body[data-template="archive"] .archive__main__item--media .archive__main__item__source { --archive__item__source__header__margin-top: 0.0625rem; } body[data-template="archive"] .archive__main__item--media .archive__main__item__source ul { display: none; } } body[data-template="archive"] .flatpickr-calendar { font-family: var(--tokens__font-family-styrene); font-size: 12px; } body[data-template="archive"] .flatpickr-calendar .flatpickr-current-month { font-size: 120%; } body[data-template="archive"] .flatpickr-calendar .flatpickr-weekday { font-weight: 500; } body[data-template="archive"] .flatpickr-calendar span.cur-month { font-weight: 600; margin-left: 2ch; } body[data-template="archive"] #archive__filters .archive__search__clear { display: none; position: absolute; right: -10px; bottom: 0; padding: 10px; -webkit-box-sizing: content-box; box-sizing: content-box; } body[data-template="archive"] #archive__filters .archive__search__clear svg { fill: #e6e6e6; -webkit-transition: var(--tokens__transition); transition: var(--tokens__transition); } html.no-touchevents body[data-template="archive"] #archive__filters .archive__search__clear:hover { opacity: 1; } html.no-touchevents body[data-template="archive"] #archive__filters .archive__search__clear:hover svg { fill: #bdbdbd; } body[data-template="archive"] #archive__filters input:focus { outline: none; border-bottom-color: #3687e8; } body[data-template="archive"] #archive__filters[data-has-value="true"] .archive__search__clear { display: block; } @media (max-width: 899px ) { body[data-template="archive"] #archive__filters { margin-bottom: 1.5rem; } } @media (min-width: 900px) { body[data-template="archive"] #archive__filters { background: #fbfbfb; padding: var(--archive__filters-padding, 3.5rem 2rem 2rem); margin-top: var(--archive__filter-tuck, calc((var(--layer__gutters__top) * -1) - 1rem)); } } @media (min-width: 1280px) { body[data-template="archive"] #archive__filters { --archive__filter-tuck: calc((var(--layer__gutters__top) * -1) - (var(--hero__min-height) / 2)); } } @media print { body[data-template="archive"] #archive__filters { display: none; } } @media (min-width: 900px) { body[data-template="archive"] #archive__header { display: grid; grid-template-columns: auto 7rem; grid-gap: 1.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } body[data-template="careers"] .careers__jobs-grid { margin-top: -1rem; } @media (min-width: 1280px) { body[data-template="careers"] .careers__jobs-grid { --link-grid__grid-columns: 2; } } body[data-template="careers"] .careers__jobs-grid .link-grid { --link-grid__description__font-size: 0.875rem; } body[data-template="careers"] .careers__jobs-grid .link-grid a > h3 { --title__font-size: 1.375rem; } body[data-template="congress"] { --hero__tuck: 3rem; } body[data-template="congress"] .congress__ctas { margin-top: 1rem; } body[data-template="contact"] { --hero__tuck: 3rem; --hero__subtitle__font-size: 0.875rem; } @media (min-width: 900px) { body[data-template="contact"] { --hero__subtitle__font-size: 1.125rem; } } :root { --donation-banner__message__font-size: 0.875rem; --donation-banner__message__line-height: 1.375; --donation-banner__title__font-size: 1.25rem; --donation-banner__title__font-weight: 700; } .donation-banner { background: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/donation/donation-banner-border.png") #f6fbc2; background-position: left top, left top; background-repeat: repeat-x, repeat; padding: 2rem 0 1.25rem; } [data-env="production"] .donation-banner { background: url("https://bipartisan-policy-center.imgix.net/assets/images/donation/donation-banner-border.png") #f6fbc2; } .donation-banner > a:hover, .donation-banner > button:hover { background: none; } .donation-banner .donation-banner__inner { text-align: center; padding: 0; } @media (min-width: 900px) { .donation-banner .donation-banner__inner { display: grid; grid-auto-rows: auto; grid-gap: 2rem; grid-template-columns: 1fr 2fr 1fr; padding: 0.75rem 0; } } .donation-banner .donation-banner__inner .title { font-family: var(--tokens__font-family-styrene); font-size: var(--donation-banner__title__font-size); font-weight: var(--donation-banner__title__font-weight); } .donation-banner .donation-banner__inner .text-block { font-size: var(--donation-banner__message__font-size); } @media (min-width: 900px) { .donation-banner .donation-banner__inner__title-area { display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: right; } } .donation-banner .donation-banner__inner__message-area { padding: 1rem 1.5rem; } @media (min-width: 900px) { .donation-banner .donation-banner__inner__message-area { padding: 0 2rem 0 0; text-align: left; } } .donation-banner .donation-banner__inner__cta-area svg > path { fill: #fff; } @media (min-width: 900px) { .donation-banner .donation-banner__inner__cta-area { text-align: left; } } .donation-banner.site-banner[aria-hidden="true"] { display: none; } .donation-banner.site-banner .site-banner__close { background: none; border: none; top: 1rem; } .donation-banner.site-banner .site-banner__close svg > path { fill: #474747; } body[data-template="woocommerce/checkout/donation"], body[data-template="woocommerce/checkout/checkout"] { --hero__tuck: 3rem; --hero__subtitle__font-size: 0.875rem; --hero__min-height: 12rem; --form__button-float: none; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"], body[data-template="woocommerce/checkout/checkout"] { --hero__subtitle__font-size: 1.125rem; --hero__min-height: 24rem; } } body[data-template="woocommerce/checkout/donation"] .place-order, body[data-template="woocommerce/checkout/checkout"] .place-order, body[data-template="woocommerce/checkout/donation"] .woocommerce-pagination, body[data-template="woocommerce/checkout/checkout"] .woocommerce-pagination { display: none; } body[data-template="woocommerce/checkout/donation"] .site-header__inner, body[data-template="woocommerce/checkout/checkout"] .site-header__inner { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body[data-template="woocommerce/checkout/donation"] .hero, body[data-template="woocommerce/checkout/checkout"] .hero { background: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/donation/hero-bg-mobile.jpg"); background-size: cover; } [data-env="production"] body[data-template="woocommerce/checkout/donation"] .hero, [data-env="production"] body[data-template="woocommerce/checkout/checkout"] .hero { background: url("https://bipartisan-policy-center.imgix.net/assets/images/donation/hero-bg-mobile.jpg"); } body[data-template="woocommerce/checkout/donation"] .hero h1, body[data-template="woocommerce/checkout/checkout"] .hero h1 { --hero__title__font-size: 1.5rem; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] .hero h1, body[data-template="woocommerce/checkout/checkout"] .hero h1 { --hero__title__font-size: 3rem; } } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] .hero, body[data-template="woocommerce/checkout/checkout"] .hero { background-image: url("https://staging-bipartisan-policy-center.imgix.net/assets/images/donation/hero-bg-main.jpg"); } [data-env="production"] body[data-template="woocommerce/checkout/donation"] .hero, [data-env="production"] body[data-template="woocommerce/checkout/checkout"] .hero { background-image: url("https://bipartisan-policy-center.imgix.net/assets/images/donation/hero-bg-main.jpg"); } } body[data-template="woocommerce/checkout/donation"] .woocommerce-account-fields, body[data-template="woocommerce/checkout/checkout"] .woocommerce-account-fields, body[data-template="woocommerce/checkout/donation"] .woocommerce-paytrace-SavedPaymentMethods-wrapper, body[data-template="woocommerce/checkout/checkout"] .woocommerce-paytrace-SavedPaymentMethods-wrapper, body[data-template="woocommerce/checkout/donation"] #payment_method_paytrace, body[data-template="woocommerce/checkout/checkout"] #payment_method_paytrace, body[data-template="woocommerce/checkout/donation"] .custom-donation-area label, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area label, body[data-template="woocommerce/checkout/donation"] input[type="radio"], body[data-template="woocommerce/checkout/checkout"] input[type="radio"], body[data-template="woocommerce/checkout/donation"] label[for="payment_method_paytrace"], body[data-template="woocommerce/checkout/checkout"] label[for="payment_method_paytrace"] { position: absolute; opacity: 0; z-index: -1; width: 10px; } body[data-template="woocommerce/checkout/donation"] .woocommerce-paytrace-SavedPaymentMethods-wrapper input[type="radio"], body[data-template="woocommerce/checkout/checkout"] .woocommerce-paytrace-SavedPaymentMethods-wrapper input[type="radio"] { position: relative; opacity: 1; z-index: 1; outline: none; } body[data-template="woocommerce/checkout/donation"] .select2-container--default .select2-selection--single .select2-selection__arrow, body[data-template="woocommerce/checkout/checkout"] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; } body[data-template="woocommerce/checkout/donation"] .select2-container .select2-selection--single, body[data-template="woocommerce/checkout/checkout"] .select2-container .select2-selection--single { height: 38px !important; } body[data-template="woocommerce/checkout/donation"] .select2-selection__rendered, body[data-template="woocommerce/checkout/checkout"] .select2-selection__rendered { padding-top: 4px !important; } body[data-template="woocommerce/checkout/donation"] .wc-stripe-elements-field.StripeElement, body[data-template="woocommerce/checkout/checkout"] .wc-stripe-elements-field.StripeElement { padding: 8px 5px; } body[data-template="woocommerce/checkout/donation"] label > img, body[data-template="woocommerce/checkout/checkout"] label > img { display: none !important; } body[data-template="woocommerce/checkout/donation"] .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"], body[data-template="woocommerce/checkout/checkout"] .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"], body[data-template="woocommerce/checkout/donation"] .woocommerce-SavedPaymentMethods-new input[type="checkbox"], body[data-template="woocommerce/checkout/checkout"] .woocommerce-SavedPaymentMethods-new input[type="checkbox"], body[data-template="woocommerce/checkout/donation"] .woocommerce-SavedPaymentMethods-token input[type="checkbox"], body[data-template="woocommerce/checkout/checkout"] .woocommerce-SavedPaymentMethods-token input[type="checkbox"] { min-width: 1.3rem !important; height: 1.3rem !important; margin-right: 0.4rem !important; } body[data-template="woocommerce/checkout/donation"] h3, body[data-template="woocommerce/checkout/checkout"] h3 { --title__font-size: 1.65rem; --title__font-weight: 700; text-align: center; } body[data-template="woocommerce/checkout/donation"] .donation-options, body[data-template="woocommerce/checkout/checkout"] .donation-options { display: grid; grid-gap: 1rem; grid-auto-rows: minmax(200px, auto); padding-top: 1rem; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] .donation-options, body[data-template="woocommerce/checkout/checkout"] .donation-options { grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; } } body[data-template="woocommerce/checkout/donation"] .donation-options > li, body[data-template="woocommerce/checkout/checkout"] .donation-options > li { background: #fff; border: 1px solid #ddd; display: grid; padding: 20px; position: relative; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; } body[data-template="woocommerce/checkout/donation"] .donation-options > li.selected, body[data-template="woocommerce/checkout/checkout"] .donation-options > li.selected { background: url("/assets/images/donation/selected-option-bg.jpg") no-repeat #3687e8; background-size: cover; color: #fff; } body[data-template="woocommerce/checkout/donation"] .donation-options > li .title--secondary, body[data-template="woocommerce/checkout/checkout"] .donation-options > li .title--secondary { --title__font-weight: 900; } body[data-template="woocommerce/checkout/donation"] .donation-options > li .donation-description, body[data-template="woocommerce/checkout/checkout"] .donation-options > li .donation-description { font-size: 12px; margin: 10px 0 0; } body[data-template="woocommerce/checkout/donation"] .donation-options > li .most-impact-badge, body[data-template="woocommerce/checkout/checkout"] .donation-options > li .most-impact-badge { background: #e33c46; border-radius: 50%; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.65rem; font-weight: 500; height: 4rem; position: absolute; right: -5px; top: -5px; width: 4rem; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] .donation-options > li .most-impact-badge, body[data-template="woocommerce/checkout/checkout"] .donation-options > li .most-impact-badge { right: 10px; top: 10px; } } body[data-template="woocommerce/checkout/donation"] .custom-donation-area, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area { background: #fff; border: 1px solid #ddd; margin: 2rem 0; padding: 20px; text-align: center; } body[data-template="woocommerce/checkout/donation"] .custom-donation-area .title, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area .title { display: inline-block; font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; } body[data-template="woocommerce/checkout/donation"] .custom-donation-area #donation-amount-single-input, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area #donation-amount-single-input, body[data-template="woocommerce/checkout/donation"] .custom-donation-area #donation-amount-recurring-input, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area #donation-amount-recurring-input { font-size: 1.25rem; font-weight: 500; text-align: center; width: 40%; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] .custom-donation-area #donation-amount-single-input, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area #donation-amount-single-input, body[data-template="woocommerce/checkout/donation"] .custom-donation-area #donation-amount-recurring-input, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area #donation-amount-recurring-input { width: auto; } } body[data-template="woocommerce/checkout/donation"] .custom-donation-area .message, body[data-template="woocommerce/checkout/checkout"] .custom-donation-area .message { font-size: 0.75rem; margin: 1.75em 0 0; } body[data-template="woocommerce/checkout/donation"] .donation-types, body[data-template="woocommerce/checkout/checkout"] .donation-types { --Form__Field__Radios__Height: 1.9375rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 1rem 0 2rem; width: 100%; } body[data-template="woocommerce/checkout/donation"] .donation-types li, body[data-template="woocommerce/checkout/checkout"] .donation-types li { background: var(--tokens__colors__grey-alt--faded-25); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; margin-left: -1px; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] .donation-types li, body[data-template="woocommerce/checkout/checkout"] .donation-types li { --Form__Field__Radios__Height: 3.5rem; } } body[data-template="woocommerce/checkout/donation"] .donation-types li label, body[data-template="woocommerce/checkout/checkout"] .donation-types li label { color: #474747; height: var(--Form__Field__Radios__Height); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1rem !important; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: 0; } body[data-template="woocommerce/checkout/donation"] .donation-types li label:hover, body[data-template="woocommerce/checkout/checkout"] .donation-types li label:hover { border-color: var(--tokens__colors__blue-dark); /* define */ } body[data-template="woocommerce/checkout/donation"] .donation-types li input[type="radio"]:checked + label, body[data-template="woocommerce/checkout/checkout"] .donation-types li input[type="radio"]:checked + label { background: #fff; border: 2px solid var(--tokens__colors__blue); color: var(--tokens__colors__blue); z-index: 1; cursor: default; } body[data-template="woocommerce/checkout/donation"] .donation-types li input[type="radio"]:focus + label, body[data-template="woocommerce/checkout/checkout"] .donation-types li input[type="radio"]:focus + label { -webkit-box-shadow: 0 0 5px 1px #3687e8; box-shadow: 0 0 5px 1px #3687e8; } body[data-template="woocommerce/checkout/donation"] .donation-types li:first-child, body[data-template="woocommerce/checkout/checkout"] .donation-types li:first-child { margin-left: 0; } body[data-template="woocommerce/checkout/donation"] #billing-fields, body[data-template="woocommerce/checkout/checkout"] #billing-fields, body[data-template="woocommerce/checkout/donation"] #payment-fields, body[data-template="woocommerce/checkout/checkout"] #payment-fields { background: none; } body[data-template="woocommerce/checkout/donation"] #billing-fields label, body[data-template="woocommerce/checkout/checkout"] #billing-fields label, body[data-template="woocommerce/checkout/donation"] #payment-fields label, body[data-template="woocommerce/checkout/checkout"] #payment-fields label { color: var(--form__input-label-color); font-size: 0.75rem; } body[data-template="woocommerce/checkout/donation"] #billing-fields label .required, body[data-template="woocommerce/checkout/checkout"] #billing-fields label .required, body[data-template="woocommerce/checkout/donation"] #payment-fields label .required, body[data-template="woocommerce/checkout/checkout"] #payment-fields label .required { color: #f00; padding: 0 5px; } body[data-template="woocommerce/checkout/donation"] #billing-fields .woocommerce-billing-fields__field-wrapper, body[data-template="woocommerce/checkout/checkout"] #billing-fields .woocommerce-billing-fields__field-wrapper, body[data-template="woocommerce/checkout/donation"] #payment-fields .woocommerce-billing-fields__field-wrapper, body[data-template="woocommerce/checkout/checkout"] #payment-fields .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #billing-fields .woocommerce-billing-fields__field-wrapper, body[data-template="woocommerce/checkout/checkout"] #billing-fields .woocommerce-billing-fields__field-wrapper, body[data-template="woocommerce/checkout/donation"] #payment-fields .woocommerce-billing-fields__field-wrapper, body[data-template="woocommerce/checkout/checkout"] #payment-fields .woocommerce-billing-fields__field-wrapper { grid-gap: 2rem; } } body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_first_name_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_first_name_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_first_name_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_first_name_field, body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_last_name_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_last_name_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_last_name_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_last_name_field, body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_email_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_email_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_email_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_email_field, body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_address_1_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_address_1_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_address_1_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_address_1_field { grid-column: 1 / 5; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_first_name_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_first_name_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_first_name_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_first_name_field { grid-column: 1 / 3; } } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_last_name_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_last_name_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_last_name_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_last_name_field { grid-column: 3 / 5; } } body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_postcode_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_postcode_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_postcode_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_postcode_field { grid-column: 1 / 3; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_postcode_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_postcode_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_postcode_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_postcode_field { grid-column-end: 2; } } body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_state_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_state_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_state_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_state_field { grid-column: 3 / 5; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_state_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_state_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_state_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_state_field { grid-column: 2 / 3; } } body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_city_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_city_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_city_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_city_field { grid-column: 1 / 5; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #billing-fields #billing_city_field, body[data-template="woocommerce/checkout/checkout"] #billing-fields #billing_city_field, body[data-template="woocommerce/checkout/donation"] #payment-fields #billing_city_field, body[data-template="woocommerce/checkout/checkout"] #payment-fields #billing_city_field { grid-column: 3 / 5; } } body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; margin: 1rem 0 0; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form { grid-gap: 2rem; margin: 2rem 0 0; } } body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form .paytrace-number-wrapper, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form .paytrace-number-wrapper { grid-column: 1 / 5; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form .paytrace-number-wrapper, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form .paytrace-number-wrapper { grid-column-end: 3; } } body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form .paytrace-expiry-wrapper, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form .paytrace-expiry-wrapper { grid-column: 1 / 3; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form .paytrace-expiry-wrapper, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form .paytrace-expiry-wrapper { grid-column: 3 / 4; } } body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form .paytrace-cvc-wrapper, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form .paytrace-cvc-wrapper { grid-column: 3 / 5; } @media (min-width: 900px) { body[data-template="woocommerce/checkout/donation"] #paytrace-cards-form .paytrace-cvc-wrapper, body[data-template="woocommerce/checkout/checkout"] #paytrace-cards-form .paytrace-cvc-wrapper { grid-column: 4 / 5; } } body[data-template="woocommerce/checkout/donation"] #confirmation-area, body[data-template="woocommerce/checkout/checkout"] #confirmation-area { margin: 1rem 0 3rem; font-size: 0.75rem; text-align: center; } body[data-template="woocommerce/checkout/donation"] .buttonContainer, body[data-template="woocommerce/checkout/checkout"] .buttonContainer { display: grid; justify-items: center; } body[data-template="woocommerce/checkout/donation"] .woocommerce-checkout #payment, body[data-template="woocommerce/checkout/checkout"] .woocommerce-checkout #payment { background-color: transparent; /* The following items only apply to the ajax-called payment info, * because it magically gets an extra