Regular Paragraph.
Regular Paragraph.
Small Paragraph.
Small Paragraph.
Extra Small Paragraph.
Extra Small Paragraph.
#### Lead Paragraph
Lead paragraphs are used to draw the reader in, they should only be used at the beginning of content. Lead paragraphs should always be set in regular font weight.
Lead paragraphs are used to draw the reader in, they should only be used at the beginning of content. Lead paragraphs should always be set in regular font weight.
Lead paragraphs are used to draw the reader in, they should only be used at the beginning of content. Lead paragraphs should always be set in regular font weight.
Lead paragraphs are used to draw the reader in, they should only be used at the beginning of content. Lead paragraphs should always be set in regular font weight.
#### Links
{% include '@atoms/button/cta-button.html.twig' with { 'data': data.link } %}
*/
.bio-cards {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: start;
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
width: 100%; }
.bio-cards__name {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 12px;
text-align: center;
color: #6f777b;
font-size: 24px; }
.bio-cards__title {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
text-align: center;
color: #2c2c2c;
font-size: 16px; }
.bio-cards__office {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-top: 12px;
text-align: center;
color: #6f777b;
font-size: 14px; }
.bio-cards__middle {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
-ms-flex: 1;
flex: 1;
margin: auto;
padding: 0 24px 32px;
text-align: left;
line-height: 1.86;
font-size: 14px;
-ms-flex: 0 0 auto; }
.bio-cards__summary {
padding-top: 24px; }
.bio-cards__summary p {
margin: 0;
color: #6f777b; }
.bio-cards__img-wrapper {
position: relative;
margin: auto;
border: solid 1px #dee0e2;
border-radius: 50%;
width: 190px;
height: 190px;
overflow: hidden; }
.bio-cards__top {
position: relative;
padding: 32px 24px 24px;
width: 100%;
min-height: 0%;
box-sizing: border-box; }
.bio-cards__label {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
position: absolute;
top: 0;
left: 0;
background-color: #dee0e2;
padding: 3px 22px;
text-align: center;
text-transform: uppercase;
color: #6f777b;
font-size: 16px; }
.bio-cards__bottom {
width: 100%; }
.bio-cards__bottom .cta-button {
background-color: #005ea5; }
.bio-cards__bottom .cta-button:hover {
background-color: #2b8cc4; }
.bio-cards__bottom:hover svg {
padding-right: 12px; }
.bio-cards__bottom a svg {
padding-right: 24px; }
/*
@styleguide
@title Breadcrumbs
The breadcrumb component is a type of secondary navigation that reveals the user’s location in the website. It’s a fast way for the user to orientate themselves on where there are within a given page.
{% if data.image %}
{% else %}
{% endif %}
{% if data.type == "news" %}
{% include ( '@svg-icons/ita_news.svg' ) %}
{% elseif data.type == "blog" %}
{% include ( '@svg-icons/ita_blog.svg' ) %}
{% elseif data.type == "articles" %}
{% include ( '@svg-icons/ita_article.svg' ) %}
{% elseif data.type == "press-release" %}
{% include ( '@svg-icons/ita_press_release.svg' ) %}
{% elseif data.type == "success-story" %}
{% include ( '@svg-icons/ita_success_story.svg' ) %}
{% endif %}
{{ data.category }}
{{ data.title }}
{% if data.summary %}
{{ data.source.date }} {{ data.source.author }}
{% endif %}
{% include '@atoms/tags/tags.html.twig' with { 'data': data.tags } %}
{% include '@atoms/button/cta-button.html.twig' with { 'data': data.link } %}
*/
.content-cards {
display: -ms-flexbox;
display: flex;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: start;
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
width: 100%; }
.content-cards.news .content-cards__spacer,
.content-cards.news .content-cards__category {
background-color: #18605a; }
.content-cards.news .content-cards__bottom .cta-button {
background-color: #18605a; }
.content-cards.news .content-cards__bottom .cta-button:hover {
background-color: #228980; }
.content-cards.blog .content-cards__spacer,
.content-cards.blog .content-cards__category {
background-color: #b10e1e; }
.content-cards.blog .content-cards__bottom .cta-button {
background-color: #b10e1e; }
.content-cards.blog .content-cards__bottom .cta-button:hover {
background-color: #e01226; }
.content-cards.feature-article {
padding: 0; }
.content-cards.feature-article .content-cards__spacer,
.content-cards.feature-article .content-cards__category {
background-color: #664c1c; }
.content-cards.feature-article .content-cards__bottom .cta-button {
background-color: #664c1c; }
.content-cards.feature-article .content-cards__bottom .cta-button:hover {
background-color: #8e6a27; }
.content-cards.press-release .content-cards__spacer,
.content-cards.press-release .content-cards__category {
background-color: #22709c; }
.content-cards.press-release .content-cards__bottom .cta-button {
background-color: #22709c; }
.content-cards.press-release .content-cards__bottom .cta-button:hover {
background-color: #2b8ec6; }
.content-cards.success-story .content-cards__spacer,
.content-cards.success-story .content-cards__category {
background-color: #6a1f63; }
.content-cards.success-story .content-cards__bottom .cta-button {
background-color: #6a1f63; }
.content-cards.success-story .content-cards__bottom .cta-button:hover {
background-color: #912b88; }
.content-cards__top {
display: inline-block;
position: relative; }
.content-cards__top img {
width: 100%;
height: auto; }
.content-cards__category {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: start;
justify-content: start;
padding: 12px; }
.content-cards__icon {
width: 14px;
height: auto; }
.content-cards__icon svg {
display: block;
height: auto;
max-height: 14px;
fill: #ffffff; }
.content-cards__type {
padding-left: 12px;
color: #ffffff;
font-size: 14px;
font-weight: 500; }
.content-cards__category--image {
position: absolute;
top: 0;
left: 0; }
.content-cards__middle {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 32px 24px;
width: 100%;
box-sizing: border-box; }
.content-cards__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #000000;
font-size: 20px;
margin: 0;
color: #2c2c2c; }
.content-cards__spacer {
background-color: #28a197; }
.content-cards__source {
color: #929292;
font-size: 14px; }
.content-cards__source .author {
color: #2c2c2c;
font-weight: 700; }
.content-cards__bottom {
margin-top: auto;
width: 100%; }
.content-cards__bottom .cta-button {
background-color: #28a197; }
.content-cards__bottom .cta-button svg {
padding-right: 24px; }
.content-cards__bottom .cta-button:hover {
background-color: #32cabd; }
.content-cards__bottom .cta-button:hover svg {
padding-right: 12px; }
/*
@styleguide
@title Call to Action
@file `/themes/custom/ita/components/02-molecules/cta`
Ready to Begin Exporting?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
*/
.cta {
display: -ms-flexbox;
display: flex;
margin: 24px 0;
padding: 24px 36px; }
.cta .cta-button {
max-width: 360px; }
.cta--right {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.cta--right .cta__image {
margin-right: 0;
margin-left: 32px; }
.cta__image {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
margin-right: 32px; }
.cta__image img {
width: 100%;
height: auto; }
.cta__content {
-ms-flex: 1 50%;
flex: 1 50%; }
.cta__content--center {
text-align: center; }
.cta__content--center .cta__line {
margin-right: auto;
margin-left: auto; }
.cta__content--center .cta__button .cta-button {
margin-right: auto;
margin-left: auto; }
.cta__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
color: #6f777b; }
.cta__line {
background-color: #6f777b; }
.cta__body {
color: #6f777b; }
/*
@styleguide
@title Download Promo
#### All Fields
#### No Summary/body
*/
.download-promo {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
padding: 48px 36px;
width: 290px; }
@media screen and (min-width: 768px) {
.download-promo {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
width: unset; } }
.download-promo > * {
-ms-flex: 1 0 100%;
flex: 1 0 100%; }
@media screen and (min-width: 768px) {
.download-promo > * {
-ms-flex: unset;
flex: unset; } }
.download-promo-color {
background-color: #004b84; }
.download-promo__image {
width: 290px;
height: auto; }
.download-promo__image img {
width: 100%;
height: 100%; }
@media screen and (min-width: 768px) {
.download-promo__image {
width: 186px;
height: auto; } }
.download-promo__content {
padding-top: 32px; }
@media screen and (min-width: 768px) {
.download-promo__content {
padding: 0 32px; } }
.download-promo__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
text-align: left;
line-height: 1.5;
color: #000000;
font-size: 20px; }
@media screen and (min-width: 768px) {
.download-promo__title {
-ms-flex-preferred-size: 60%;
flex-basis: 60%; } }
.download-promo__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-top: 24px;
font-size: 18px; }
@media screen and (min-width: 768px) {
.download-promo__body {
-ms-flex-preferred-size: 60%;
flex-basis: 60%; } }
.download-promo__button {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
transition: all 0.3s ease-in-out;
margin-top: 32px;
max-width: 360px;
color: #ffffff; }
.download-promo__button:hover {
background-color: #0068b7; }
.download-promo__button:hover svg {
padding-top: 6px; }
.download-promo__button path {
fill: #ffffff; }
.download-promo__button p {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
text-transform: unset;
color: #ffffff;
font-size: 18px; }
.download-promo__button a {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
text-decoration: none; }
.download-promo__button a p {
margin: 0;
padding: 12px; }
.download-promo__button a svg {
transition: all 0.3s ease-in-out;
padding-right: 18px; }
@media screen and (min-width: 768px) {
.download-promo__button {
-ms-flex-preferred-size: 60%;
flex-basis: 60%; } }
/*
@styleguide
@title Email Call to Action
@file `/themes/custom/ita/components/02-molecules/email-cta`
Learn about the various email lists that are maintained to keep the U.S. exporter informed.
{{ data.image }}
{{ data.title }}
{% include '@atoms/button/cta-button.html.twig' with { 'data': data.link } %}
*/
.email-cta {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
background-color: #2b8cc4;
padding: 2rem 4rem; }
@media screen and (min-width: 768px) {
.email-cta {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center; } }
.email-cta__wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-right: 18px; }
.email-cta__content {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center; }
@media screen and (min-width: 992px) {
.email-cta__content {
margin: 0 2rem; } }
.email-cta__image {
margin-right: 1rem;
max-width: 62px;
max-height: 50px; }
.email-cta__image img {
width: 100%;
height: auto; }
.email-cta__image svg {
width: 62.5px;
height: 50px; }
.email-cta__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
line-height: 1.25;
color: #ffffff;
font-size: 25px; }
.email-cta__body {
margin: 1rem 0;
color: #ffffff; }
@media screen and (min-width: 992px) {
.email-cta__body {
margin: 0 auto; } }
.email-cta__link:hover svg {
padding: 0 6px 0 18px; }
.email-cta__link a svg {
padding: 0 12px; }
.gallery-item__metadata {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
line-height: 3.43;
color: #6f777b;
font-size: 14px; }
.gallery-item__media-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.gallery-item__media-runtime {
-ms-flex-negative: 0;
flex-shrink: 0;
padding-left: 18px; }
.gallery-item__media-dimensions {
-ms-flex-negative: 0;
flex-shrink: 0;
padding-left: 18px; }
/*
@styleguide
@title Hero Banner
#### Hero with Card
President’s Advisory Counsel visits Ethiopia
U.S. Under Secretary of Commerce Gilbert Kaplan led a large delegation of U.S. businesses and officials from across the U.S. government on a visit to Ethiopian Airlines.
#### Wave Hero
Used for a secondary or tertiary page
Lorem ipsum dolar sit amet, consetetur sadipscing elit, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At Vero eos et accusam duo...
#### Regular Hero
Used for a secondary or tertiary page
Lorem ipsum dolar sit amet, consetetur sadipscing elit, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At Vero eos et accusam duo...
{% if data.wave %}
{% endif %}
{% if data.image %}
{% endif %}
{{ data.title }}
{% if data.body %}
{{ data.body }}
{% endif %}
{% if data.link %}
{% endif %}
*/
.hero-banner--card {
position: relative; }
.hero-banner__link--card {
display: inline-block; }
.hero-banner__background--card {
background-repeat: no-repeat, no-repeat;
background-position: 0 -100%, 0 50%;
background-size: 101%, cover;
min-height: 200px; }
@media screen and (min-width: 768px) {
.hero-banner__background--card {
min-height: 350px; } }
@media screen and (min-width: 992px) {
.hero-banner__background--card {
background-position: -3px 101%, 0 50%;
min-height: 500px; } }
.hero-banner__image--card {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
.hero-banner__content--card {
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
padding: 24px; }
@media screen and (min-width: 768px) {
.hero-banner__content--card {
bottom: -5%;
padding: 24px 32px; } }
@media screen and (min-width: 992px) {
.hero-banner__content--card {
position: absolute;
bottom: 0;
left: 5%;
width: 50%; } }
@media screen and (min-width: 1200px) {
.hero-banner__content--card {
width: 40%; } }
.hero-banner__title--card {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.17;
color: #000000;
font-size: 48px;
margin-bottom: 20px;
color: #005ea5; }
.hero-banner__body--card {
margin-bottom: 20px;
color: #005ea5; }
.hero-banner {
display: -ms-flexbox;
display: flex;
position: relative;
-ms-flex-direction: column;
flex-direction: column; }
@media screen and (min-width: 992px) {
.hero-banner {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; } }
.hero-banner__wave {
position: absolute;
bottom: 0;
left: -2px;
width: 102%;
height: 105px; }
@media screen and (min-width: 992px) {
.hero-banner__wave {
background: url("../images/svg/banner--swirl.svg") no-repeat;
background-size: cover; } }
.hero-banner__summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-top: 24px;
color: #ffffff;
font-size: 20px; }
.hero-banner__button {
margin-top: 24px;
margin-bottom: 24px; }
.hero-banner__button .cta-button {
background-color: #ffffff; }
.hero-banner__button .cta-button:hover {
background-color: #004a81; }
.hero-banner__button .cta-button svg {
margin-left: 35px;
padding-right: 1px;
width: 14px;
height: 6px; }
.hero-banner__button p {
padding: 0;
color: #005ea5; }
.hero-banner__button path {
fill: #005ea5; }
.hero-banner__canvas {
display: -ms-flexbox;
display: flex;
background-color: #005ea5; }
@media screen and (min-width: 992px) {
.hero-banner__canvas {
-ms-flex: 1 0 50%;
flex: 1 0 50%; } }
.hero-banner__content {
background-color: #005ea5;
padding: 32px 24px 48px; }
@media screen and (min-width: 768px) {
.hero-banner__content {
padding: 32px 36px 48px; } }
@media screen and (min-width: 992px) {
.hero-banner__content {
padding: 32px 36px 60px 48px; } }
@media screen and (min-width: 1200px) {
.hero-banner__content {
padding: 32px 48px 60px 80px; } }
.hero-banner__image {
background-color: #005ea5;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
min-height: 250px; }
@media screen and (min-width: 992px) {
.hero-banner__image {
-ms-flex: 1 0 50%;
flex: 1 0 50%; } }
.hero-banner__image img {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
.hero-banner__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
color: #ffffff; }
/*
@styleguide
@title Highlight Item
Highlight items are individual items placed within a highlight section organism component.
Highlight Title
Graphic headings can be used a few different ways, depending on what your landing page is for. Highlightiyour values, specific program areas, or results.
{% if data.icon %}
{{ data.icon }}
{% endif %}
{{ data.title }}
{{ data.text }}
{% if data.link is iterable %}
// Include CTA Button Atomic Component Here
{% endif %}
*/
.highlightitem {
display: -ms-flexbox;
display: flex; }
.highlightitem .line-spacer {
background-color: #ffffff; }
.highlightitem__image {
margin-right: 24px; }
.highlightitem__image img {
border-radius: 100%;
background-color: #195475;
padding: 14px;
width: 100px;
height: 100px; }
.highlightitem__heading {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 24px;
color: #ffffff; }
.highlightitem__textblock {
width: 100%; }
.highlightitem__body {
color: #ffffff; }
.highlightitem__body p {
color: #ffffff; }
.highlightitem__button {
display: inline-block;
margin-top: 32px;
max-width: 100%; }
/*
@styleguide
@title Small Highlight Item
Small highlight items are individual items placed within a highlight section organism component.
Highlight Title
Graphic headings can be used a few different ways, depending on what your landing page is for. Highlightiyour values, specific program areas, or results.
{% if data.icon %}
{{ data.icon }}
{% endif %}
{{ data.title }}
{{ data.text }}
{% if data.link is iterable %}
// Include CTA Button Atomic Component Here
{% endif %}
*/
.highlightitem--small {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center; }
.highlightitem__image--small {
max-width: 60px;
max-height: 60px; }
.highlightitem__image--small img {
border-radius: 0;
background-color: transparent;
padding: 0;
width: 100%;
height: auto; }
.highlightitem__heading--small {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #000000;
font-size: 20px;
margin-top: 24px;
margin-bottom: 24px;
text-align: center;
color: #003863; }
.highlightitem__body--small {
color: #000000; }
.highlightitem__body--small p {
color: #000000; }
/*
@styleguide
@title Content Cards (Horizontal)
Cards are multi-purpose. They can be used for articles, news, press releases, general information, events.
#### Small Card
How 4 innovatie firms are soaring in Alabama's aerospace industry
#### Large Card Without Image
Aerospace & Defense Ducting Market to Reach US$ 3.5 Billion in 2024, Says Stratview Research
July 16, 2019 Author Name
This strategic assessment report, from Stratview Research,
provides a comprehensive analysis that reflects today's aerospace
& defense ducting market realities and future market possibilities
for the forecast period of 2019 to 2024.
#### Large Card With Image
Aerospace & Defense Ducting Market to Reach US$ 3.5 Billion in 2024, Says Stratview Research
July 16, 2019 Author Name
This strategic assessment report, from Stratview Research,
provides a comprehensive analysis that reflects today's aerospace
& defense ducting market realities and future market possibilities
for the forecast period of 2019 to 2024.
{% if data.image %}
{% else %}
{% endif %}
{% if data.type == "news" %}
{% include ( '@svg-icons/ita_news.svg' ) %}
{% elseif data.type == "blog" %}
{% include ( '@svg-icons/ita_blog.svg' ) %}
{% elseif data.type == "articles" %}
{% include ( '@svg-icons/ita_article.svg' ) %}
{% elseif data.type == "press-release" %}
{% include ( '@svg-icons/ita_press_release.svg' ) %}
{% elseif data.type == "success-story" %}
{% include ( '@svg-icons/ita_success_story.svg' ) %}
{% endif %}
{{ data.category }}
{{ data.title }}
{% if data.summary %}
{{ data.source.date }} {{ data.source.author }}
{% endif %}
{% include '@atoms/tags/tags.html.twig' with { 'data': data.tags } %}
{% include '@atoms/button/cta-button.html.twig' with { 'data': data.link } %}
*/
.horizontal-content-cards {
display: block;
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff; }
.horizontal-content-cards .tags {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: start;
justify-content: start;
font-size: 12px; }
.horizontal-content-cards .tags > a {
margin-right: 1em;
border-radius: 4px;
background-color: #dee0e2;
padding: 10px;
color: #2c2c2c; }
.horizontal-content-cards .tags > a:hover {
background-color: #c3c7ca;
text-decoration: none; }
.horizontal-content-cards .news {
background-color: #18605a; }
.horizontal-content-cards .blogs {
background-color: #b10e1e; }
.horizontal-content-cards .articles {
background-color: #664c1c; }
.horizontal-content-cards .press-releases {
background-color: #22709c; }
.horizontal-content-cards .success-storys {
background-color: #6a1f63; }
.horizontal-content-cards__type {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-left: 12px;
text-transform: capitalize;
color: #ffffff;
font-size: 18px;
font-weight: 500; }
.horizontal-content-cards__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #000000;
font-size: 20px;
margin: unset;
color: #2c2c2c; }
.horizontal-content-cards__middle {
padding: 32px 24px; }
.horizontal-content-cards__source {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
color: #929292;
font-size: 14px; }
.horizontal-content-cards__source p {
margin: 0; }
.horizontal-content-cards__source .author {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
color: #2c2c2c; }
.horizontal-content-cards__summary {
padding: 24px 0; }
.horizontal-content-cards__summary p {
margin: 0; }
.horizontal-content-cards__spacer {
margin: 12px 0 24px;
width: 65px;
height: 3px; }
.horizontal-content-cards__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
margin: 0 2em;
padding-bottom: 4em; }
.horizontal-content-cards__top {
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
width: 100%;
min-height: 0%; }
.horizontal-content-cards__top img {
max-width: 30%;
height: auto; }
.horizontal-content-cards__content {
padding: 32px 24px; }
.horizontal-content-cards__category {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: start;
justify-content: start;
padding: 18px;
max-height: 30px; }
.horizontal-content-cards__category h5 {
color: #ffffff; }
.horizontal-content-cards__category svg path {
fill: #ffffff; }
.horizontal-content-cards__category--img {
position: absolute;
top: 0;
left: 0; }
.horizontal-content-cards__bottom .cta-button {
background-color: unset; }
.horizontal-content-cards__bottom .cta-button svg {
padding-right: 24px; }
.horizontal-content-cards__bottom:hover svg {
padding-right: 12px; }
.horizontal-content-cards__bottom.news:hover {
background-color: #228980; }
.horizontal-content-cards__bottom.blogs:hover {
background-color: #e01226; }
.horizontal-content-cards__bottom.articles:hover {
background-color: #8e6a27; }
.horizontal-content-cards__bottom.press-releases:hover {
background-color: #2b8ec6; }
.horizontal-content-cards__bottom.success-storys:hover {
background-color: #912b88; }
/*
@styleguide
@title Icon Cards
Icon Cards are static card assets that link to something.
#### Icon
#### No Icon
*/
.icon-cards {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); }
.icon-cards:hover {
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.16);
background-color: #fafafa; }
.icon-cards a {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
padding: 32px 24px;
text-decoration: none; }
.icon-cards .icon-cards__icon {
padding-bottom: 24px; }
.icon-cards .icon-cards__icon svg {
width: 83px;
height: 83px; }
.icon-cards .icon-cards__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 24px;
margin: 0;
color: #2c2c2c; }
.icon-cards .icon-cards__summary {
padding-top: 24px; }
.icon-cards .icon-cards__summary p {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
margin: 0;
text-align: center;
color: #2c2c2c;
font-size: 18px; }
/*
@styleguide
@title Icon List
Whether you’re looking to export for the first time or to increase your sales overseas, gain confidence
with our networks of experts across the country and around the world in 77 countries. Explore our
office locations and services .
International Buyer Program
International Company Profile
International Partner Search
*/
.icon-list__header {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: normal;
align-items: normal;
-ms-flex-pack: justify;
justify-content: space-between; }
@media screen and (min-width: 768px) {
.icon-list__header {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: end;
align-items: flex-end; } }
.icon-list__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
padding-right: 24px;
color: #6f777b; }
.icon-list__cta-link {
padding-bottom: 3px; }
.icon-list__cta-link .link--secondary {
color: #000000; }
.icon-list__spacer {
background-color: #6f777b; }
.icon-list__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 36px;
color: #5b616b; }
.icon-list__card {
padding: 1rem; }
.icon-list__card a {
text-decoration: none;
color: #000000;
font-weight: normal; }
.icon-list__card:hover {
border-radius: 4px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16); }
.icon-list__card:hover .icon-list__card-title {
font-weight: bold; }
.icon-list__card-image {
margin: 0 auto 10px;
max-width: 60px; }
.icon-list__card-image img {
max-width: 100%; }
.icon-list__card-title {
text-align: center;
line-height: 1.5;
font-size: 24px; }
.left .icon-list__card-image {
margin-left: 0; }
.left .icon-list__card-title {
text-align: left; }
.media-download span {
vertical-align: middle;
color: #000000;
font-size: 14px; }
.media-download .ic-download {
width: 11px;
vertical-align: middle; }
/*
@styleguide
@title Notifications
Notifications are banner-like elements used to communicate actionable events or supplemental information.
This is a single line error notification
This is a single line alert notification
This is a single line success notification
General Information Notification
Uh Oh! Something Went Wrong...
This is a multi-line error notification with a heading.
Woohoo! Something Went Right...
This is a multi-line success notification with a heading.
{% if data.type == "error" %}
{% elseif data.type == "success" %}
{% elseif data.type == "alert" %}
{% elseif data.type == "info" %}
{% endif %}
{% if header %}
{{ data.header }}
{% endif %}
{{ data.message }}
*/
.notification {
margin-bottom: 20px; }
.notification svg {
padding: 5px 10px; }
.notification--error {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
border-left: 4px solid #b10e1e;
background-color: #fac4c9;
padding: 15px 0; }
.notification--error path {
fill: #b10e1e; }
.notification--success {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
border-left: 4px solid #28a197;
background-color: #d4f4f2;
padding: 15px 0; }
.notification--success path {
fill: #28a197; }
.notification--alert {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
border-left: 4px solid #cc9838;
background-color: #f6ecda;
padding: 15px 0; }
.notification--alert path {
fill: #cc9838; }
.notification--info, .notification--status {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
border-left: 4px solid #5b616b;
background-color: #e0e2e5;
padding: 15px 0; }
.notification--info path, .notification--status path {
fill: #5b616b; }
.notification__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.44;
color: #000000;
font-size: 18px;
margin: 0; }
/*
@styleguide
@title Office Cards
Cards are multi-purpose. They can be used for articles, news, press releases, general information, events.
#### Office Card
Alaska
222 West 7th Avenue, Suite 524 Stop 38
Anchorage, AK 99516
Located in the Ted Stevens Federal Building
For immediate export assistance or for answers to your technical questions on exporting.
1-800-USA-TRADE (1-800-872-8723).
Monday - Friday
8:30am - 6:00pm ET
the trade Information Center Works in conjunction with your local office.
{% if data.image %}
{% endif %}
*/
.office-cards {
display: block;
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff; }
.office-cards__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #000000;
font-size: 20px;
margin: unset;
color: #005ea5; }
.office-cards__middle {
padding: 32px 24px 24px; }
.office-cards__middle p {
margin: 0; }
.office-cards__address {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #2c2c2c;
font-size: 16px; }
.office-cards__summary {
padding-top: 24px; }
.office-cards__summary p {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.86;
color: #6f777b;
font-size: 14px; }
.office-cards__spacer {
margin: 12px 0 24px;
background-color: #005ea5;
width: 65px;
height: 3px; }
.office-cards__top {
position: relative;
width: 100%;
min-height: 0%; }
.office-cards__top img {
width: 100%; }
.office-cards__bottom {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding: 0 24px 32px; }
.office-cards__bottom p {
margin: 0;
text-transform: capitalize;
color: #5b616b;
font-size: 18px;
font-weight: 600; }
.office-cards__bottom path {
fill: #ffffff; }
/*
@styleguide
@title Promo
#### Text Promo
Give us 5 minutes and we'll give you a world of advice.
5 min
#### Image Promo
#### Shaped Promo
#### No Image
*/
.promo {
display: -ms-flexbox;
display: flex;
position: relative;
-ms-flex-pack: center;
justify-content: center;
background-color: #dee0e2; }
.promo--shape {
padding: 36px 18px; }
.promo--shape .promo__title {
line-height: 1.33;
font-size: 24px; }
@media screen and (min-width: 768px) {
.promo--shape .promo__title {
line-height: 1.25;
font-size: 32px; } }
@media screen and (min-width: 768px) {
.promo--shape {
-ms-flex: 0 1 50%;
flex: 0 1 50%;
padding: 48px;
box-sizing: border-box; } }
@media screen and (min-width: 992px) {
.promo--shape {
padding: 48px 36px; } }
.promo__shape {
display: hidden; }
@media screen and (min-width: 992px) {
.promo__shape {
display: block;
position: absolute;
bottom: -5px;
z-index: 10;
background: url("../images/svg/inverted-tri.svg") no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 50%;
overflow: hidden;
pointer-events: none; } }
.promo__content--no-image {
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: 95%;
flex-basis: 95%;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center; }
@media screen and (min-width: 768px) {
.promo__content--no-image {
-ms-flex-preferred-size: 85%;
flex-basis: 85%; } }
@media screen and (min-width: 992px) {
.promo__content--no-image {
-ms-flex-preferred-size: 50%;
flex-basis: 50%; } }
.promo--medium {
padding: 36px 18px; }
.promo--medium .promo__title {
line-height: 1.33;
font-size: 24px; }
@media screen and (min-width: 768px) {
.promo--medium .promo__title {
line-height: 1.33;
font-size: 24px; } }
@media screen and (min-width: 768px) {
.promo--medium {
-ms-flex: 0 1 50%;
flex: 0 1 50%;
padding: 24px 32px 48px;
box-sizing: border-box; } }
@media screen and (min-width: 992px) {
.promo--medium {
padding: 48px 36px; } }
.promo__image {
position: relative;
text-align: center;
color: #ffffff; }
.promo__image img {
width: 100%;
min-height: 266px;
object-fit: cover; }
@media screen and (min-width: 768px) {
.promo__image img {
height: 100%; } }
.promo__image-content {
position: absolute;
top: 18px;
left: 50%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 100%; }
@media screen and (min-width: 992px) {
.promo__image-content {
display: -ms-flexbox;
display: flex; } }
@media screen and (min-width: 1200px) {
.promo__image-content {
-ms-flex-align: center;
align-items: center; } }
.promo__image-title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
padding-bottom: 12px;
font-size: 92px; }
@media screen and (min-width: 992px) {
.promo__image-title {
padding: 30px 18px 48px 48px; } }
.promo__image-summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding: 0 24px 36px;
text-align: left;
line-height: 1.5;
font-size: 20px; }
@media screen and (min-width: 992px) {
.promo__image-summary {
padding: 30px 48px 48pxpx; } }
@media screen and (min-width: 768px) {
.promo__image {
-ms-flex: 0 1 50%;
flex: 0 1 50%; } }
.promo--text {
background-color: #dee0e2;
padding: 24px 18px; }
@media screen and (min-width: 768px) {
.promo--text {
padding: 48px 36px; } }
.promo__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.6;
color: #2c2c2c;
font-size: 20px; }
@media screen and (min-width: 768px) {
.promo__title {
line-height: 1.33;
font-size: 24px; } }
.promo__cta {
margin: 24px 0 12px;
max-width: 333px; }
.promo__cta .cta-button {
background-color: unset; }
.promo__cta:hover {
background-color: #1a467b; }
.promo__cta:hover a {
text-decoration: none; }
.promo__cta p {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.86;
color: #ffffff;
font-size: 14px; }
@media screen and (min-width: 768px) {
.promo__cta p {
line-height: 1.44;
font-size: 18px; } }
.promo__cta path {
fill: #ffffff; }
@media screen and (min-width: 768px) {
.promo__cta {
margin: 32px 0 12px; } }
.promo__contextual-text {
display: -ms-inline-flexbox;
display: inline-flex;
text-transform: uppercase;
color: #797878; }
.promo__cta--color {
background-color: #112e51; }
/*
@styleguide
@title Static Cards
Cards are multi-purpose. They can be used for articles, news, press releases, general information, events.
#### Static Card
Sharpen Your Skills
Now that you've gone through the basics,
get to know Adobe XD a little bit better
by exploring many of the features that
make XD great.
#### Static Card No Image
Sharpen Your Skills
Now that you've gone through the basics,
get to know Adobe XD a little bit better
by exploring many of the features that
make XD great.
{% if data.image %}
{% endif %}
{% include '@atoms/button/cta-button.html.twig' with { 'data': data.link } %}
*/
.static-cards {
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: start;
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
width: 100%; }
.static-cards__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #000000;
font-size: 20px;
margin: unset;
color: #2c2c2c; }
.static-cards__middle {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 32px 24px;
width: 100%;
box-sizing: border-box; }
.static-cards__top {
position: relative;
width: 100%;
min-height: 0%; }
.static-cards__top img {
width: 100%;
height: auto; }
.static-cards__bottom {
margin-top: auto;
width: 100%; }
.static-cards__bottom .cta-button svg {
padding-right: 24px; }
.static-cards__bottom .cta-button:hover svg, .static-cards__bottom .cta-button:focus svg {
padding-right: 12px; }
.static-cards--green .static-cards__spacer {
background-color: #28a197; }
.static-cards--green .static-cards__bottom .cta-button {
background-color: #28a197; }
.static-cards--green .static-cards__bottom .cta-button:hover, .static-cards--green .static-cards__bottom .cta-button:focus {
background-color: #2db5aa; }
.static-cards--red .static-cards__spacer {
background-color: #b10e1e; }
.static-cards--red .cta-button {
background-color: #b10e1e; }
.static-cards--red .cta-button:hover, .static-cards--red .cta-button:focus {
background-color: #c91022; }
.static-cards--blue .static-cards__spacer {
background-color: #004b84; }
.static-cards--blue .static-cards__bottom .cta-button {
background-color: #004b84; }
.static-cards--blue .static-cards__bottom .cta-button:hover, .static-cards--blue .static-cards__bottom .cta-button:focus {
background-color: #00599e; }
.static-cards--light-blue .static-cards__spacer {
background-color: #2b8cc4; }
.static-cards--light-blue .static-cards__bottom .cta-button {
background-color: #2b8cc4; }
.static-cards--light-blue .static-cards__bottom .cta-button:hover, .static-cards--light-blue .static-cards__bottom .cta-button:focus {
background-color: #3699d3; }
.static-cards--horizontal {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media screen and (min-width: 768px) {
.static-cards--horizontal {
-ms-flex-direction: row;
flex-direction: row; } }
.static-cards--horizontal__top {
-ms-flex: 30%;
flex: 30%;
width: 100%;
min-height: 0%; }
.static-cards--horizontal__top img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; }
.static-cards--horizontal__middle {
-ms-flex: 1 70%;
flex: 1 70%;
padding: 32px 24px;
box-sizing: border-box; }
.static-cards--horizontal__summary p {
margin: 0; }
.static-cards--horizontal__bottom {
-ms-flex: 1 1 100%;
flex: 1 1 100%; }
/*
@styleguide
@title Subscription Block
*/
.subscription {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #a9d9d5;
padding: 48px 24px; }
.subscription--color {
background-color: #208078; }
.subscription__content {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%; }
.subscription__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
text-transform: capitalize;
line-height: 1.25;
color: #18605a;
font-size: 32px; }
.subscription__social-icons {
padding-top: 36px; }
.subscription__social-icons svg {
padding-right: 24px; }
.subscription__social-icons path {
fill: #208078; }
.subscription__form {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; }
@media screen and (min-width: 576px) {
.subscription__form {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: center;
justify-content: center; } }
.subscription__label {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
@media screen and (min-width: 576px) {
.subscription__input {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 605px; } }
.subscription__input input {
border: solid 2px #6f777b;
padding: 12px;
width: 100%;
max-width: unset;
box-sizing: border-box; }
@media screen and (min-width: 576px) {
.subscription__input input {
height: 100%; } }
.subscription__button {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
border: unset;
background-color: #208078;
padding: 12px 18px;
line-height: 1.5;
color: #ffffff;
font-size: 20px; }
.subscription__button svg {
padding-right: 12px; }
/*
@styleguide
@title Success Story Cards
### With Video/Image
Success Story Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa porta, accumsan metus in, finibus
sapien. Duis lectus diam, scelerisque posuere odio eu, malesuada blandit metus. Aenean ac urna ligula. Morbi
hendrerit dapibus congue. Suspendisse eget velit aliquet, viverra enim eu, pretium quam. Aenean id maximus
eros, non facilisis tortor. Nullam molestie bibendum arcu viverra consequat. Donec ut blandit leo. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
### No Image
Success Story Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa porta, accumsan metus in, finibus
sapien. Duis lectus diam, scelerisque posuere odio eu, malesuada blandit metus. Aenean ac urna ligula. Morbi
hendrerit dapibus congue. Suspendisse eget velit aliquet, viverra enim eu, pretium quam. Aenean id maximus
eros, non facilisis tortor. Nullam molestie bibendum arcu viverra consequat. Donec ut blandit leo. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
{% if data.media %}
{{ data.media }}
{% endif %}
{{ data.title }}
{% include '@atoms/cta-button/cta-button.html.twig' with { 'data': data.link } %}
*/
.success-story-cards {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
background-color: #ffffff; }
@media screen and (min-width: 768px) {
.success-story-cards {
-ms-flex-direction: row;
flex-direction: row; } }
.success-story-cards__left {
-ms-flex: 1 1 50%;
flex: 1 1 50%; }
.success-story-cards__video .success-story-card__container > div > div {
position: relative;
padding-top: 30px;
padding-bottom: 49%;
height: 0;
overflow: hidden; }
@media screen and (min-width: 768px) {
.success-story-cards__video .success-story-card__container > div > div {
padding-bottom: 75%; } }
@media screen and (min-width: 1200px) {
.success-story-cards__video .success-story-card__container > div > div {
padding-bottom: 65%; } }
.success-story-cards__video .success-story-card__container .contextual-region .contextual {
padding: 0; }
.success-story-cards__video .success-story-card__container .contextual-region > div + div {
position: relative;
padding-top: 30px;
padding-bottom: 49%;
height: 0;
overflow: hidden; }
@media screen and (min-width: 768px) {
.success-story-cards__video .success-story-card__container .contextual-region > div + div {
padding-bottom: 75%; } }
@media screen and (min-width: 1200px) {
.success-story-cards__video .success-story-card__container .contextual-region > div + div {
padding-bottom: 50%; } }
.success-story-cards__video iframe,
.success-story-cards__video object,
.success-story-cards__video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.success-story-cards__image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100%;
min-height: 200px; }
.success-story-cards__right {
display: -ms-flexbox;
display: flex;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: flex-start;
padding: 48px 48px 48px 36px;
box-sizing: border-box; }
.success-story-cards__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #000000;
font-size: 20px;
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
margin: 0;
color: #2c2c2c; }
.success-story-cards__spacer {
background-color: #2c2c2c; }
.success-story-cards__link .cta-button {
background-color: #005ea5; }
.success-story-cards__link .cta-button:hover {
background-color: #2b8cc4; }
.success-story-cards__link .cta-button svg {
margin-left: 24px; }
.success-story-cards__top {
display: inline-block;
position: relative; }
.success-story-cards__top img {
width: 100%;
height: auto; }
.text-block__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
color: #6f777b; }
.text-block--center {
text-align: center; }
.text-block--left {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left; }
.text-block--left .text-block__body {
-ms-flex: 0 1 100%;
flex: 0 1 100%; }
.text-block__line .line-spacer {
background-color: #6f777b; }
.text-block__line--center {
margin: 12px auto 24px; }
.text-block__line--left {
margin: 12px 0 24px; }
.block-content {
margin: 24px 0;
padding: 24px 0; }
.block-content.block-content--no-padding {
padding-right: 0;
padding-left: 0; }
.block-content__top-content {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between; }
.block-content__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
padding-right: 24px;
color: #6f777b; }
.block-content__link {
margin-bottom: 24px; }
@media screen and (min-width: 768px) {
.block-content__link {
margin-bottom: 0; } }
.block-content__line {
background-color: #6f777b; }
.block-content__summary {
margin-bottom: 24px;
color: #6f777b; }
.local-offices-block .block-content {
margin-bottom: 24px; }
.ccg-map-block {
position: relative;
margin-top: 36px;
background-image: url("/themes/custom/ita/images/sample/office-map.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 600px; }
.ccg-map-block .ccg-map-select {
display: none;
border: solid 2px #bbbbbb;
background-color: #ffffff;
background-position: 95% center;
background-size: 15px 30px;
padding: 8px 18px;
font-size: 0.9em; }
@media screen and (min-width: 768px) {
.ccg-map-block .ccg-map-select {
position: absolute;
width: 24%;
height: 7%;
font-size: 0.9em; } }
.ccg-map-block .western-hemisphere-and-canada {
display: inline-block; }
@media screen and (min-width: 768px) {
.ccg-map-block .western-hemisphere-and-canada {
top: 54%;
left: 7%; } }
.ccg-map-block .europe {
display: inline-block; }
@media screen and (min-width: 768px) {
.ccg-map-block .europe {
top: 28%;
left: 38%; } }
.ccg-map-block .asia {
display: inline-block; }
@media screen and (min-width: 768px) {
.ccg-map-block .asia {
top: 54%;
left: 68%; } }
.ccg-map-block .middle-east-and-africa {
display: inline-block; }
@media screen and (min-width: 768px) {
.ccg-map-block .middle-east-and-africa {
top: 54%;
left: 38%; } }
.ccg-map-block .china {
display: inline-block; }
@media screen and (min-width: 768px) {
.ccg-map-block .china {
top: 28%;
left: 68%; } }
.ccg-map__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
color: #6f777b; }
.ccg-map__title-line {
background-color: #6f777b; }
.content-curator {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.content-curator__image {
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden; }
@media screen and (min-width: 992px) {
.content-curator__image {
max-width: 400px; } }
.content-curator__image img {
width: auto;
height: 100%;
object-fit: cover; }
.content-curator__content {
-ms-flex-direction: column;
flex-direction: column;
padding: 32px; }
.content-curator__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 24px;
margin: 0; }
.content-curator__title-line {
margin-bottom: 0;
background-color: #b10e1e; }
.content-curator__summary {
margin-top: 16px;
margin-bottom: 16px;
color: #6f777b; }
.content-curator__progress {
color: #6f777b; }
.content-curator__form .webform-actions {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 16px; }
.content-curator__form div[role='alert'] {
margin-bottom: 24px;
border-left: 4px solid #b10e1e;
background-color: #fac4c9;
padding: 16px; }
.footer {
background-color: #112e51;
padding: 48px; }
.footer__menu,
.footer__submenu,
.footer__submenu--secondary {
margin: 0;
padding: 0;
list-style: none; }
.footer__submenu {
margin-top: 18px; }
.footer__submenu--secondary .footer__menu-link {
line-height: 1.71;
font-size: 14px;
font-weight: 300; }
.footer__menu-link {
padding: 8px;
color: #ffffff; }
.footer__menu-link:hover {
background-color: #2b8cc4;
text-decoration: none; }
.footer__menu-link:active {
background-color: #005ea5;
text-decoration: none; }
.footer__menu-link:focus {
outline: 0;
border: 2px solid #005ea5;
background-color: #005ea5;
text-decoration: none; }
.footer__menu-link--header {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.28; }
.footer__menu-link--subheader {
text-transform: uppercase;
line-height: 1.71;
letter-spacing: 0.45;
font-size: 14px;
font-weight: 600; }
.footer__bottom {
margin-top: 68px;
border-top: 1px solid #ffffff;
padding-top: 24px; }
.footer__description,
.footer__address {
line-height: 1.21;
color: #ccdeed;
font-size: 14px; }
.footer__description a,
.footer__address a {
color: #ccdeed; }
.footer__social-text {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
.footer__menu--secondary {
margin-top: 18px; }
.footer__menu-items--secondary {
margin: 0;
padding: 0;
list-style: none; }
@media screen and (min-width: 576px) {
.footer__menu-items--secondary {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
.footer__menu-item--secondary {
margin-bottom: 12px;
font-size: 14px; }
@media screen and (min-width: 576px) {
.footer__menu-item--secondary {
margin-bottom: 12px; }
.footer__menu-item--secondary:last-child:after {
content: none; }
.footer__menu-item--secondary:after {
margin-right: 5px;
margin-left: 5px;
color: #ccdeed;
content: '|'; } }
.footer__menu-link--secondary {
color: #ccdeed; }
.footer__social {
margin-bottom: 18px; }
.footer__social-items {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0;
list-style: none; }
.footer__social-item {
margin-right: 8px; }
.footer__social-link {
padding: 8px; }
.footer__social-link:hover {
background-color: #2b8cc4; }
.footer__social-link:active {
background-color: #005ea5; }
.footer__social-link:focus {
outline: 0;
border: 2px solid #005ea5;
background-color: #005ea5; }
.header {
display: -ms-flexbox;
display: flex;
position: relative;
top: 0;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #ffffff; }
@media screen and (min-width: 992px) {
.header {
padding: 16px 40px; } }
.header--sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 50;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); }
.toolbar-fixed .header--sticky {
top: 39px; }
.toolbar-fixed .header--sticky .header__menu--mobile {
top: 82px; }
.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .header--sticky {
top: 79px; }
.header__content {
display: none; }
@media screen and (min-width: 992px) {
.header__content {
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: 80%;
flex-basis: 80%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end; } }
.header__content--mobile {
text-align: right; }
@media screen and (min-width: 992px) {
.header__content--mobile {
display: none; } }
.header__branding {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
padding: 5px 40px; }
@media screen and (min-width: 768px) {
.header__branding {
padding-top: 16px;
padding-bottom: 16px; } }
@media screen and (min-width: 992px) {
.header__branding {
padding: 0; } }
.header__search-form {
position: relative;
text-align: right; }
.header__search-form .header__search-input {
background-color: #f8f8f8;
width: auto;
max-width: 250px;
font-size: 14px; }
.header__search-label {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
.header__search-button {
position: absolute;
top: 0;
right: 0;
border: 2px solid #28a197;
background-color: #28a197;
padding: 15px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
@media screen and (-ms-high-contrast: none) {
.header__search-button {
border: 0; } }
.header__search-icon {
width: 16px;
height: 18px; }
.header__search-icon .icon {
fill: #ffffff; }
.header__dropdown-item--active-trail {
background-color: #f1f1f1;
text-decoration: none; }
.header__dropdown-item--active-trail > .header__dropdown-link--toggle-second {
border-color: #28a197; }
.header__dropdown-item--active-trail > .header__dropdown-link--toggle-first {
border-color: #b10e1e; }
.header__dropdown-item--active-trail > .header__dropdown-link {
border-color: #6f777b; }
.header__dropdown {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: flex-end;
margin: 8px 0 0;
padding: 0;
list-style: none;
text-align: left; }
@media screen and (min-width: 768px) {
.header__dropdown {
-ms-flex-direction: row;
flex-direction: row; } }
.header__dropdown-link,
.header__dropdown-menu-link {
line-height: 1.21;
color: #000000;
font-size: 14px;
font-weight: 300; }
.header__dropdown-icon {
margin-right: 4px;
width: 15px;
height: 0; }
.header__dropdown-icon--toggle {
margin-left: 8px;
width: 8px;
height: 0; }
.header__dropdown-link {
border-top: 2px solid transparent;
padding: 12px; }
.header__dropdown-link:hover, .header__dropdown-link:focus, .header__dropdown-link.header__dropdown-link--active {
border-color: #6f777b;
background-color: #f1f1f1;
text-decoration: none; }
.header__dropdown-link--toggle {
display: -ms-flexbox;
display: flex;
cursor: pointer; }
.header__dropdown-link--toggle-first:hover, .header__dropdown-link--toggle-first:focus, .header__dropdown-link--toggle-first.header__dropdown-link--active {
border-color: #b10e1e; }
.header__dropdown-link--toggle-second:hover, .header__dropdown-link--toggle-second:focus, .header__dropdown-link--toggle-second.header__dropdown-link--active {
border-color: #28a197; }
.header__dropdown-menu {
display: none;
position: absolute;
right: 4%;
z-index: 55;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
background-color: #f1f1f1;
padding: 32px 40px;
list-style: none; }
@media screen and (min-width: 992px) {
.header__dropdown-menu {
width: 100%;
max-width: 700px; } }
@media screen and (min-width: 1200px) {
.header__dropdown-menu {
max-width: 980px; } }
@media screen and (min-width: 992px) {
.header__dropdown-menu.grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 1em 0;
max-height: calc(100vh - 260px);
overflow-y: auto;
box-sizing: border-box;
grid-gap: 0; } }
.header__dropdown-menu > .header__dropdown-menu-item--expanded {
margin-right: 1%;
margin-bottom: 36px;
box-sizing: border-box; }
@media screen and (min-width: 992px) {
.header__dropdown-menu > .header__dropdown-menu-item--expanded {
-ms-flex: 0 1 48.5%;
flex: 0 1 48.5%; } }
@media screen and (min-width: 1200px) {
.header__dropdown-menu > .header__dropdown-menu-item--expanded {
-ms-flex: 0 1 22%;
flex: 0 1 22%; } }
.header__dropdown-menu-item--expanded > .header__dropdown-menu-link {
text-transform: uppercase; }
@media (max-width: 768px) {
.header__dropdown-menu.grid {
display: block;
max-height: 50vh;
overflow-y: scroll; }
.header__dropdown-menu > .header__dropdown-menu-item--expanded {
margin-bottom: 36px; }
.header__dropdown-menu > .header__dropdown-menu-item--expanded:last-child {
margin-bottom: 0; } }
.header__dropdown-menu-bar {
margin: 8px 0 18px;
border: 1px solid #000000;
width: 40px; }
.header__dropdown-submenu {
padding: 0;
list-style: none; }
.header__menu-btn-text--mobile {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
.header__menu--mobile {
display: none;
position: absolute;
top: 82px;
right: 0;
z-index: 100;
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);
background-color: #f1f1f1;
width: 100%; }
@media screen and (min-width: 768px) {
.header__menu--mobile {
top: 103px; } }
.header__menu--mobile.header__menu--show {
display: block; }
button.header__menu-btn--mobile {
margin-right: 20px;
border: 0;
background-color: #ffffff;
padding: 24px 16px;
-webkit-appearance: none; }
@media screen and (min-width: 768px) {
button.header__menu-btn--mobile {
padding: 34px 24px; } }
button.header__menu-btn--mobile:focus, button.header__menu-btn--mobile.header__menu-btn--active {
outline: 0;
background-color: #f1f1f1; }
.header__menu-btn-icon--mobile {
max-width: 45px;
max-height: 45px; }
.header__menu-btn-icon--mobile .icon {
width: 45px;
height: auto;
fill: #000000; }
.header__accordion {
margin: 0;
padding-bottom: 16px;
padding-left: 0;
height: 100vh;
list-style: none;
overflow-y: scroll; }
.header__search--mobile {
padding: 32px; }
.header__search--mobile .header__search-form {
text-align: left; }
.header__search--mobile .header__search-input {
width: 90%;
max-width: none; }
.header__accordion-link {
display: -ms-flexbox;
display: flex;
padding: 16px 32px;
color: #000000;
font-weight: normal; }
.header__accordion-link:hover, .header__accordion-link:focus {
background-color: #dee0e2;
text-decoration: none; }
.header__accordion-link--toggle:hover, .header__accordion-link--toggle:focus, .header__accordion-link--toggle.header__accordion-link--active {
cursor: pointer;
color: #ffffff; }
.header__accordion-link--toggle:hover .icon, .header__accordion-link--toggle:focus .icon, .header__accordion-link--toggle.header__accordion-link--active .icon {
fill: #ffffff; }
.header__accordion-link--toggle-first:hover, .header__accordion-link--toggle-first:focus, .header__accordion-link--toggle-first.header__accordion-link--active {
background-color: #b10e1e; }
.header__accordion-link--toggle-second:hover, .header__accordion-link--toggle-second:focus, .header__accordion-link--toggle-second.header__accordion-link--active {
background-color: #28a197; }
.header__accordion-icon {
margin-right: 8px;
max-width: 15px;
max-height: 15px; }
.header__accordion-icon .icon {
width: 100%;
height: auto; }
.header__accordion-icon--toggle {
margin-left: 8px;
max-width: 10px;
max-height: 10px; }
.header__accordion-icon--toggle .icon {
width: 100%;
height: auto; }
.header__accordion-menu {
display: none;
background-color: #dee0e2;
padding-left: 0; }
.header__accordion-menu.header__accordion-menu--show {
display: block; }
.header__accordion-menu > .header__accordion-link {
text-transform: uppercase;
line-height: 1.71;
font-size: 14px; }
.header__accordion-menu > .header__accordion-link:hover, .header__accordion-menu > .header__accordion-link:focus, .header__accordion-menu > .header__accordion-link.header__accordion-link--active {
background-color: #bfc1c3;
color: #000000; }
.header__accordion-menu > .header__accordion-link:hover .icon, .header__accordion-menu > .header__accordion-link:focus .icon, .header__accordion-menu > .header__accordion-link.header__accordion-link--active .icon {
fill: #000000; }
.header__accordion-menu .header__accordion-icon--toggle .icon {
vertical-align: 1px; }
.header__accordion-menu--secondary {
background-color: #6f777b; }
.header__accordion-menu--secondary .header__accordion-link {
line-height: 1.71;
color: #ffffff;
font-size: 14px; }
.header__accordion-menu--secondary .header__accordion-link:hover, .header__accordion-menu--secondary .header__accordion-link:focus {
background: none;
text-decoration: underline; }
@media screen and (min-width: 992px) {
.horizontal-list__item {
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: stretch;
align-self: stretch; } }
/*
@styleguide
@title Modals
Modal is used to overlay content on top of the interface. They are intended to capture the user’s attention in order to inform or shift focus to a pertinent task.
This is a modal box heading!
The modals may have text, buttons with call to actions, relative images to better illustrate the purpose of the modal, like a sand panda image or illustration when something isn’t working. The modal would be similar to the notification component except that this would overlay on the screen requiring the user to take an action.
I’ve read the modal message
*/
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
visibility: hidden;
z-index: 100;
margin: 25% auto auto;
width: 88%;
height: 0; }
@media screen and (min-width: 768px) {
.modal {
width: 90%;
max-width: 910px; } }
.modal--show {
visibility: visible;
opacity: 1; }
.modal__content {
border: solid 1px #dee0e2;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
padding: 2rem; }
.modal__header {
position: relative; }
.modal__button--close {
position: absolute;
top: 0;
right: 0;
background-color: #5b616b;
padding: 2px 8px; }
.modal__button--close:hover {
background-color: #a9a9a9; }
.modal__heading {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 24px; }
.modal__bar {
margin: 10px 0 15px;
background-color: #000000;
max-width: 75px;
height: 2px; }
.modal__message {
line-height: 1.5;
font-size: 20px; }
.modal__button--text {
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #28a197;
padding: 15px 30px;
text-transform: uppercase;
color: #ffffff; }
.office-map-block {
position: relative;
background-image: url("/themes/custom/ita/images/sample/office-map.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 600px; }
.office-map-block .office-map-select {
display: none;
border: solid 2px #bbbbbb;
background-position: right center;
background-size: 15px 30px;
padding: 8px 18px;
font-size: 0.9em; }
@media screen and (min-width: 768px) {
.office-map-block .office-map-select {
position: absolute;
width: 24%;
height: 7%;
font-size: 0.9em; } }
.office-map-block .united-states {
display: inline-block; }
@media screen and (min-width: 768px) {
.office-map-block .united-states {
top: 28%;
left: 7%; } }
.office-map-block .western-hemisphere {
display: inline-block; }
@media screen and (min-width: 768px) {
.office-map-block .western-hemisphere {
top: 54%;
left: 7%; } }
.office-map-block .europe {
display: inline-block; }
@media screen and (min-width: 768px) {
.office-map-block .europe {
top: 28%;
left: 38%; } }
.office-map-block .asia {
display: inline-block; }
@media screen and (min-width: 768px) {
.office-map-block .asia {
top: 54%;
left: 68%; } }
.office-map-block .middle-east-and-africa {
display: inline-block; }
@media screen and (min-width: 768px) {
.office-map-block .middle-east-and-africa {
top: 54%;
left: 38%; } }
.office-map-block .china {
display: inline-block; }
@media screen and (min-width: 768px) {
.office-map-block .china {
top: 28%;
left: 68%; } }
.office-map__subtitle {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
color: #6f777b; }
.office-map__subtitle-line {
background-color: #6f777b; }
.pager__items {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
margin-top: 48px;
margin-bottom: 0;
padding: 0;
list-style: none; }
.pager__item {
margin-right: 16px; }
.pager__link {
border-radius: 3px;
padding: 4px 16px;
color: #222f3a; }
.pager__link:hover, .pager__link:focus, .pager__link.pager__link--active {
background-color: #112e51;
text-decoration: none;
color: #ffffff; }
.pager__item-text {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
/*
@styleguide
@title Section Highlights
This component is a full-width block on a colored background with images, icons and text. It can be a 2-up, 3-up or 4-up display.
Highlight Title
Graphic headings can be used a few different ways, depending on what your landing page is for. Highlightiyour values, specific program areas, or results.
Highlight Title
Graphic headings can be used a few different ways, depending on what your landing page is for. Highlightiyour values, specific program areas, or results.
{% for item in data.items %}
{{ item.content }}
{% endfor %}
*/
.highlightsection {
margin: 36px 0;
background-color: #2b8cc4;
padding: 58px 80px; }
@media screen and (min-width: 1200px) {
.highlightsection.highlightsection--default .grid {
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
@media screen and (min-width: 1200px) and (-ms-high-contrast: none) and (min-width: 576px) {
.highlightsection.highlightsection--default .grid .col-3.highlightsection__item,
.highlightsection.highlightsection--default .grid .col-4.highlightsection__item {
-ms-flex-preferred-size: 46%;
flex-basis: 46%; } }
@media screen and (min-width: 1200px) and (-ms-high-contrast: none) and (min-width: 768px) {
.highlightsection.highlightsection--default .grid .col-3.highlightsection__item,
.highlightsection.highlightsection--default .grid .col-4.highlightsection__item {
-ms-flex-preferred-size: 46%;
flex-basis: 46%; } }
@media screen and (min-width: 1200px) and (-ms-high-contrast: none) and (min-width: 992px) {
.highlightsection.highlightsection--default .grid .col-3.highlightsection__item,
.highlightsection.highlightsection--default .grid .col-4.highlightsection__item {
-ms-flex-preferred-size: 46%;
flex-basis: 46%; } }
.highlightsection--small {
background-color: #ccdeed;
padding: 48px 64px; }
.highlightsection--small .highlightsection__title {
color: #2b8cc4; }
.highlightsection--small .highlightsection__line {
background-color: #2b8cc4;
text-align: left; }
.highlightsection--small .highlightitem__image {
margin-right: 0; }
.highlightsection--small .highlightsection__link--secondary {
color: #000000; }
.highlightsection__top-content {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between; }
.highlightsection__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
color: #ffffff; }
.highlightsection__link {
margin-bottom: 12px; }
@media screen and (min-width: 768px) {
.highlightsection__link {
margin-bottom: 0; } }
.highlightsection__link--secondary {
position: relative;
color: #ffffff; }
.highlightsection__link--secondary:hover, .highlightsection__link--secondary:focus {
text-decoration: none; }
.highlightsection__link--secondary:hover:after, .highlightsection__link--secondary:focus:after {
right: -8px; }
.highlightsection__link--secondary:after {
position: relative;
right: 0;
transition: all 0.3s ease-in-out;
margin-right: 8px;
margin-left: 24px;
content: '\279E'; }
.highlightsection__line {
margin: 6px 0 18px;
border: 0;
background-color: #ffffff;
width: 65px;
height: 3px;
text-align: left; }
.sidenav__menu-item {
position: relative;
padding: 0;
list-style: none; }
.sidenav__menu-link {
display: block;
border-left: 2px solid transparent;
padding: 12px 30px 12px 12px;
text-decoration: none;
font-weight: 300; }
.sidenav__menu-link:hover, .sidenav__menu-link:focus, .sidenav__menu-link.is-active {
text-decoration: none; }
.sidenav__toggle {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
padding: 9px;
width: 12px;
min-width: 12px;
height: 24px; }
.sidenav__toggle--open {
display: none; }
.sidenav__menu-item--expanded .sidenav__menu {
display: block; }
.sidenav__menu-item--expanded .sidenav__toggle--open {
display: block; }
.sidenav__menu-item--expanded .sidenav__toggle--closed {
display: none; }
.sidenav__menu-item--collapsed .sidenav__menu {
display: none; }
.sidenav__menu {
padding: 0;
list-style: none; }
.sidenav__menu > .sidenav__menu-item {
border-bottom: 1px solid #5b616b;
background-color: #ccdeed; }
.sidenav__menu > .sidenav__menu-item.sidenav__menu-item--active-trail .sidenav__menu-link--below {
border-color: transparent;
background-color: #ccdeed;
color: #005ea5; }
.sidenav__menu > .sidenav__menu-item.sidenav__menu-item--active-trail .sidenav__toggle--open {
display: block; }
.sidenav__menu > .sidenav__menu-item.sidenav__menu-item--active-trail .sidenav__toggle--closed {
display: none; }
.sidenav__menu > .sidenav__menu-item .sidenav__menu-link {
border-color: transparent;
color: #005ea5; }
.sidenav__menu > .sidenav__menu-item .sidenav__menu-link:hover, .sidenav__menu > .sidenav__menu-item .sidenav__menu-link:focus {
border-color: #005ea5;
background-color: #ccdeed; }
.sidenav__menu > .sidenav__menu-item .sidenav__menu-link.is-active {
border-color: #005ea5; }
.sidenav__menu .sidenav__menu {
background-color: #ffffff;
padding: 9px 12px; }
.sidenav__menu .sidenav__menu .sidenav__menu-item {
border-bottom: 0;
background-color: #ffffff; }
.sidenav__menu .sidenav__menu .sidenav__menu-item.sidenav__menu-item--active-trail .sidenav__menu-link--below {
border-color: #005ea5;
background-color: #ffffff;
color: #005ea5; }
.sidenav__menu .sidenav__menu .sidenav__menu-item .sidenav__toggle {
display: none; }
.sidenav__menu .sidenav__menu .sidenav__menu-item .sidenav__menu-link {
margin: 9px 0;
border-color: transparent;
background-color: #ffffff;
padding: 0 6px;
color: #005ea5;
font-size: 0.8em; }
.sidenav__menu .sidenav__menu .sidenav__menu-item .sidenav__menu-link:hover, .sidenav__menu .sidenav__menu .sidenav__menu-item .sidenav__menu-link:focus, .sidenav__menu .sidenav__menu .sidenav__menu-item .sidenav__menu-link.is-active {
border-color: #005ea5;
background-color: #ffffff;
font-weight: bold; }
.ccg-sidenav .sidenav__menu {
padding: 0;
list-style: none; }
.ccg-sidenav .sidenav__menu > .sidenav__menu-item {
border-bottom: 0; }
.ccg-sidenav .sidenav__menu > .sidenav__menu-item.sidenav__menu-item--active-trail > .sidenav__menu-link {
border-color: #005ea5;
background-color: #005ea5;
color: #ffffff; }
.ccg-sidenav .sidenav__menu .sidenav__toggle {
display: none; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__toggle {
display: block; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item {
border-bottom: 1px solid #5b616b; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item.sidenav__menu-item--active-trail .sidenav__menu-link--below {
border-color: transparent;
background-color: #ccdeed;
color: #005ea5; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item.sidenav__menu-item--active-trail .sidenav__toggle--open {
display: block; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item.sidenav__menu-item--active-trail .sidenav__toggle--closed {
display: none; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-link {
margin: 0;
border-color: transparent;
background-color: #ccdeed;
padding: 12px 30px 12px 12px;
color: #005ea5;
font-size: 18px; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-link:hover, .ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-link:focus {
border-color: #005ea5;
background-color: #ccdeed;
font-weight: 300; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-link.is-active {
border-color: transparent; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed .sidenav__toggle--open {
display: none; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed .sidenav__toggle--closed {
display: block; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed.is-active .sidenav__menu-link {
border-color: #005ea5;
background-color: #ccdeed;
color: #005ea5; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed.is-active .sidenav__menu-link .sidenav__toggle--open {
display: block; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed.is-active .sidenav__menu-link .sidenav__toggle--closed {
display: none; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed.is-active .sidenav__menu {
display: block; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed.is-active .sidenav__menu .sidenav__menu-link {
border-color: transparent;
background-color: #ffffff; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed.is-active .sidenav__menu .sidenav__menu-link:hover, .ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed.is-active .sidenav__menu .sidenav__menu-link:focus {
border-color: #005ea5;
font-weight: bold; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu-item--collapsed .sidenav__menu {
display: none; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu {
padding: 9px 12px; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu .sidenav__menu-item {
border-bottom: 0; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu .sidenav__menu-link {
margin: 9px 0;
border-color: transparent;
background-color: #ffffff;
padding: 0 6px;
color: #005ea5;
font-size: 0.8em; }
.ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu .sidenav__menu-link:hover, .ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu .sidenav__menu-link:focus, .ccg-sidenav .sidenav__menu .sidenav__menu .sidenav__menu .sidenav__menu-link.is-active {
border-color: #005ea5;
font-weight: bold; }
/*
@styleguide
@title Slider
Slider is used to create a carousel of molecular components such as hero banner components.
Slide 1
U.S. Under Secretary of Commerce Gilbert Kaplan led a large delegation of U.S. businesses and officials from across the U.S. government on a visit to Ethiopian Airlines.
Slide 2
U.S. Under Secretary of Commerce Gilbert Kaplan led a large delegation of U.S. businesses and officials from across the U.S. government on a visit to Ethiopian Airlines.
Slide 3
U.S. Under Secretary of Commerce Gilbert Kaplan led a large delegation of U.S. businesses and officials from across the U.S. government on a visit to Ethiopian Airlines.
*/
.slider__item {
display: none; }
.slick-dots {
margin-top: 1rem;
padding: 0;
text-align: center; }
.slick-dots li {
display: inline-block;
margin-right: 8px;
list-style: none; }
.slick-dots li:last-child {
margin-right: 0; }
.slick-dots li:only-child {
display: none; }
.slick-dots li button {
border: 0;
border-radius: 100%;
background-color: #d3d3d3;
padding: 0;
width: 12px;
height: 12px;
overflow: hidden;
text-indent: -9999px; }
.slick-dots li button:hover, .slick-dots li button:focus {
background-color: #005ea5; }
.slick-dots li.slick-active button {
background-color: #005ea5; }
.slider {
position: relative; }
.slick-arrow {
border: 0;
background-color: #6f777b;
width: 36px;
height: 40px; }
.slick-prev,
.slick-next {
position: absolute;
top: 0;
right: 0;
z-index: 1;
background-image: url("/themes/custom/ita/images/svg/white_arrow_next.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
overflow: hidden;
text-indent: -9999px; }
.slick-prev {
right: 38px;
background-image: url("/themes/custom/ita/images/svg/white_arrow_prev.svg"); }
.success-story-block__slider .slick-list {
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); }
.success-story-block__header {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: normal;
align-items: normal;
-ms-flex-pack: justify;
justify-content: space-between; }
@media screen and (min-width: 768px) {
.success-story-block__header {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: end;
align-items: flex-end; } }
.success-story-block__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
color: #6f777b; }
.success-story-block__cta-link {
padding-bottom: 3px; }
.success-story-block__cta-link .link--secondary {
color: #000000; }
.success-story-block__spacer {
background-color: #6f777b; }
/*
@styleguide
@title Tabs
The tab component can be used to display information based on a user interaction. The component should have between 2 and 6 itmes a user can cycle through. Each tab will have an icon and text.
#### Tabs
This is a test body
This is a test body
This is a test body
This is a test body active
#### Vertical Tab Version
This is a test body
This is a test body
This is a test body
This is a test body active
{% for tab in data.tabs %}
{% endfor %}
{% for tab in data.tabs %}
{{ tab.body }}
{% endfor %}
*/
.tab {
display: -ms-flexbox;
display: flex; }
.tab--vertical {
-ms-flex: 1 0 100%;
flex: 1 0 100%;
-ms-flex-direction: column;
flex-direction: column; }
@media screen and (min-width: 768px) {
.tab--vertical {
-ms-flex: 1 0 30%;
flex: 1 0 30%; } }
.tab__card {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
border: solid 1px #dee0e2;
background-color: #f1f1f1;
padding: 24px; }
.tab__card-title {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
text-transform: uppercase;
font-size: 14px; }
.tab__card--active {
border-left: solid 3px #0071bc;
background-color: #dee0e2; }
.tab__card--active .tab__card-title {
color: #0071bc; }
.tab__card:hover {
background-color: #dee0e2;
cursor: pointer; }
.tab__content--hidden {
display: none; }
.tab__content--active {
display: block; }
.tab__content img {
max-width: 100%;
height: auto; }
.tabs--simple {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: 1px solid #dee0e2;
padding: 0;
list-style: none; }
.tabs--simple li {
margin-right: 28px; }
.tabs--simple li a {
border-bottom: 3px solid transparent;
padding-bottom: 8px; }
.tabs--simple li a:hover, .tabs--simple li a:focus, .tabs--simple li a.is-active {
border-color: #0071bc;
text-decoration: none; }
.tabs--vertical {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media screen and (min-width: 768px) {
.tabs--vertical {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; } }
.tabs--vertical .tab__content {
-ms-flex: 1 0 100%;
flex: 1 0 100%;
padding: 0 32px;
overflow-y: scroll; }
@media screen and (min-width: 768px) {
.tabs--vertical .tab__content {
-ms-flex: 1 0 70%;
flex: 1 0 70%; } }
.tabs--horizontal .tab__content {
padding: 32px; }
/*
@styleguide
@title Grids
1 Column
2 Columns
.col-2 (50%)
.col-2 (50%)
3 Columns
.col-3 (33.3%)
.col-3 (33.3%)
.col-3 (33.3%)
4 Columns
.col-4 (25%)
.col-4 (25%)
.col-4 (25%)
.col-4 (25%)
6 Columns
.col-6 (16.66%)
.col-6 (16.66%)
.col-6 (16.66%)
.col-6 (16.66%)
.col-6 (16.66%)
.col-6 (16.66%)
*/
.layout-page {
position: relative; }
.layout-container,
.explorer__search__message-container,
.explorer__search__page-container,
.explorer__search__result-container,
.explorer__form {
margin-right: auto;
margin-left: auto;
padding: 48px 48px 80px;
max-width: 540px; }
@media screen and (min-width: 768px) {
.layout-container,
.explorer__search__message-container,
.explorer__search__page-container,
.explorer__search__result-container,
.explorer__form {
max-width: 720px; } }
@media screen and (min-width: 992px) {
.layout-container,
.explorer__search__message-container,
.explorer__search__page-container,
.explorer__search__result-container,
.explorer__form {
max-width: 1046px; } }
@media screen and (min-width: 1200px) {
.layout-container,
.explorer__search__message-container,
.explorer__search__page-container,
.explorer__search__result-container,
.explorer__form {
max-width: 1366px; } }
.layout-container.layout-container--no-padding,
.layout-container--no-padding.explorer__search__message-container,
.layout-container--no-padding.explorer__search__page-container,
.layout-container--no-padding.explorer__search__result-container,
.layout-container--no-padding.explorer__form {
padding: 0; }
.grid,
.explorer__search__message-container,
.explorer__search__page-container,
.explorer__search__result-container,
.explorer__form,
.explorer__result {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-align: center;
align-items: center;
margin-right: -2%;
margin-left: -2%;
width: 100%; }
@media screen and (min-width: 576px) {
.grid,
.explorer__search__message-container,
.explorer__search__page-container,
.explorer__search__result-container,
.explorer__form,
.explorer__result {
-ms-flex-align: stretch;
align-items: stretch; } }
.col-0 {
margin: 2%;
width: 96%; }
.col-1 {
margin: 2%;
width: 96%; }
.col-2 {
-ms-flex: 0 auto;
flex: 0 auto;
margin: 2%;
width: 100%; }
@media screen and (min-width: 576px) {
.col-2 {
width: 46%; } }
.col-2--full-mobile {
width: 100%; }
@media screen and (min-width: 992px) {
.col-2--full-mobile {
width: 46%; } }
.col-2of3 {
-ms-flex: 0 auto;
flex: 0 auto;
margin: 2%;
width: 100%; }
@media screen and (min-width: 992px) {
.col-2of3 {
width: 62.66%; } }
.col-3of4 {
-ms-flex: 0 auto;
flex: 0 auto;
-ms-flex-preferred-size: 96%;
flex-basis: 96%;
margin: 2%;
width: 96%; }
@media screen and (min-width: 992px) {
.col-3of4 {
-ms-flex-preferred-size: 71%;
flex-basis: 71%;
width: 71%; } }
.col-1of4 {
-ms-flex-preferred-size: 96%;
flex-basis: 96%;
margin: 2%;
width: 96%; }
@media screen and (min-width: 992px) {
.col-1of4 {
-ms-flex-preferred-size: 21%;
flex-basis: 21%;
width: 21%; } }
.col-3,
.content-finder__feed-item--featured > .views-element-container {
position: relative;
-ms-flex: 0 auto;
flex: 0 auto;
-ms-flex-preferred-size: 96%;
flex-basis: 96%;
margin: 2%; }
@media screen and (min-width: 992px) {
.col-3,
.content-finder__feed-item--featured > .views-element-container {
-ms-flex-preferred-size: 29.33%;
flex-basis: 29.33%; } }
.col-3--full-mobile {
width: 100%; }
@media screen and (min-width: 992px) {
.col-3--full-mobile {
width: 29.33%; } }
.col-3--half-mobile {
width: 100%; }
@media screen and (min-width: 768px) {
.col-3--half-mobile {
width: 46%; } }
@media screen and (min-width: 992px) {
.col-3--half-mobile {
width: 29.33%; } }
.col-4 {
margin: 2%;
width: 100%; }
@media screen and (min-width: 576px) {
.col-4 {
width: 46%; } }
@media screen and (min-width: 768px) {
.col-4 {
width: 21%; } }
.col-6 {
margin: 2%;
width: 100%; }
@media screen and (min-width: 576px) {
.col-6 {
width: 29.33%; } }
@media screen and (min-width: 768px) {
.col-6 {
width: 12.66%; } }
@media screen and (min-width: 40em) {
.layout--twocol-section,
.layout--twocol-padded {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.layout--twocol-section .layout__region--first,
.layout--twocol-section .layout__region--second,
.layout--twocol-padded .layout__region--first,
.layout--twocol-padded .layout__region--second {
box-sizing: border-box; }
.layout--twocol-section .layout__region--first,
.layout--twocol-padded .layout__region--first {
padding-right: 24px; }
.layout--twocol-section .layout__region--second,
.layout--twocol-padded .layout__region--second {
padding-left: 24px; } }
.about-us {
margin: 0 auto;
padding: 0 20px; }
@media screen and (min-width: 768px) {
.about-us {
padding: 0 36px; } }
@media screen and (min-width: 992px) {
.about-us {
padding: 0 48px;
max-width: 1024px; } }
.about-us__header-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px; }
.about-us__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px; }
.about-us__spacer {
background-color: #000000; }
.about-us__media {
padding-bottom: 48px; }
.about-us__media img {
width: 100%;
height: auto; }
.about-us__media .embedded-video {
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
/* 16:9 */
height: 0; }
.about-us__media .embedded-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.about-us__summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 32px;
line-height: 1.33;
color: #2c2c2c;
font-size: 24px; }
.about-us__summary p {
margin: 0; }
.about-us__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.44;
color: #2c2c2c;
font-size: 18px; }
.about-us__body p {
margin: 0; }
.biography__header {
margin-bottom: 32px; }
@media screen and (min-width: 576px) {
.biography__header {
display: -ms-flexbox;
display: flex; } }
.biography__image {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 250px;
height: auto;
max-height: 250px;
overflow: hidden; }
@media screen and (min-width: 576px) {
.biography__image {
margin-right: 48px;
margin-left: 0; } }
.biography__image img {
border-radius: 100%;
width: 250px;
height: 250px; }
.biography__name {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
text-transform: uppercase; }
.biography__meta-item {
line-height: 1.43;
color: #6f777b;
font-size: 14px; }
.content-finder__title {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
.content-finder__feed-item {
margin-top: 32px;
margin-bottom: 32px; }
.content-finder__feed-item--featured {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-align: center;
align-items: center;
margin-right: -2%;
margin-left: -2%;
width: 100%;
margin-top: 0;
margin-bottom: 0; }
@media screen and (min-width: 576px) {
.content-finder__feed-item--featured {
-ms-flex-align: stretch;
align-items: stretch; } }
.content-finder__subtitle {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
color: #6f777b; }
.content-finder__subtitle-line {
background-color: #6f777b; }
.content-finder__text {
color: #6f777b; }
.content-finder-confirmation {
margin-right: auto;
margin-left: auto;
border: solid 1px #dee0e2;
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);
padding: 64px;
max-width: 450px; }
.content-finder-confirmation .cta-button {
margin-right: 16px; }
.content-finder-confirmation__message {
margin-bottom: 8px; }
.content-finder-confirmation__message--warning {
margin-bottom: 16px;
line-height: 1.86;
color: #b10e1e;
font-size: 14px; }
.content-finder__sidebar .office {
background-color: #f8f8f8;
padding: 32px; }
.content-finder__sidebar .office__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 24px;
margin-bottom: 24px;
color: #6f777b; }
.content-finder__sidebar .office__icon {
float: left;
margin-right: 8px; }
.content-finder__sidebar .office__icon img {
width: 20px;
height: auto; }
.content-finder__sidebar .office__subtitle {
line-height: 1.43;
font-size: 14px;
font-weight: 700; }
.content-finder__sidebar .office__info {
clear: left;
margin-top: 16px;
color: #6f777b;
font-size: 14px; }
.content-finder__sidebar .office__phone,
.content-finder__sidebar .office__email {
margin-top: 8px; }
.content-finder__sidebar a {
font-weight: 300; }
.explorer-container {
background-color: #f8f8f8;
padding-top: 3em;
font-family: inherit !important; }
.explorer {
font-family: inherit !important; }
.explorer__home,
.explorer__search__header-container {
margin-bottom: 0;
background-color: #f8f8f8;
padding-bottom: 12px; }
.explorer__subheader {
opacity: 1;
margin-bottom: 2em; }
.explorer__form-container {
background-color: #f8f8f8;
padding-bottom: 2em; }
.explorer__form input[type='submit'], .explorer__form input[type='reset'] {
border-radius: 0;
width: 8em; }
.explorer__form fieldset {
width: 100%; }
.explorer__message {
padding: 10px !important; }
.explorer__search__body-container {
background-color: #ffffff;
padding: 4em 0; }
.explorer__search__message-container,
.explorer__search__page-container,
.explorer__search__result-container,
.explorer__form {
margin: 0 auto;
padding: 0 48px;
width: auto; }
.explorer__card {
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-direction: column;
flex-direction: column;
margin: 2%;
height: auto;
overflow: inherit; }
.explorer__card--simple * {
box-sizing: border-box; }
.explorer__card--simple .explorer__card__main {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: start;
border: solid 1px #bfc1c3;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
padding: 0;
height: 100%;
line-height: 1.44; }
.explorer__card--simple .explorer__card__date {
-ms-flex-order: 4;
order: 4;
margin-bottom: 1em;
padding: 0 12px;
width: 100%;
color: #929292;
font-size: 14px;
font-weight: normal; }
.explorer__card--simple .explorer__card__name {
position: relative;
-ms-flex-order: 2;
order: 2;
margin-bottom: 32px;
padding: 0 12px;
width: 100%;
color: #2c2c2c;
font-size: 14px;
font-weight: bold; }
.explorer__card--simple .explorer__card__name:after {
position: absolute;
bottom: -12px;
left: 12px;
background-color: #c91022;
width: 65px;
height: 3px;
content: ''; }
.explorer__card--simple .explorer__card__type {
-ms-flex-order: 1;
order: 1;
margin-bottom: 1em;
padding: 0 12px;
width: 100%;
color: #929292;
font-size: 14px; }
.explorer__card--simple .explorer__card__location {
-ms-flex-order: 5;
order: 5;
margin-top: 0;
margin-bottom: 1em;
padding: 0 12px;
width: 100%;
color: #2c2c2c;
font-size: 14px;
font-weight: normal; }
.explorer__card--simple .explorer__card__location li {
margin: 0; }
.explorer__card--simple .explorer__card__bottom {
-ms-flex-order: 6;
order: 6;
margin-top: auto;
width: 100%; }
.explorer__card--simple .explorer__card__bottom .cta-button {
background-color: #b10e1e; }
.explorer__card--simple .explorer__card__bottom .cta-button p {
padding-left: 0;
text-transform: none;
letter-spacing: 0;
font-weight: normal; }
.explorer__card--simple .explorer__card__bottom .cta-button .cta-svg {
display: block;
transition: all 0.3s ease-in-out;
margin-right: 12px;
background: url("../images/cta-right-arrow.svg") no-repeat;
background-size: contain;
padding-right: 24px;
width: 24px;
height: 12px; }
.explorer__card--simple .explorer__card__bottom .cta-button:hover {
transition: all 0.3s ease-in-out;
background-color: #c91022; }
.explorer__card--simple .explorer__card__bottom .cta-button:hover .cta-svg {
margin-right: 6px; }
.explorer__page {
margin-top: 2em; }
.explorer__page__item {
border-radius: 3px;
background-color: transparent;
padding: 0 1em;
color: #112e51; }
.explorer__page__item.disabled {
opacity: 1;
background-color: #112e51;
color: #ffffff;
font-weight: bold; }
.feature-article {
margin: 0 auto;
padding: 0 20px; }
@media screen and (min-width: 768px) {
.feature-article {
padding: 0 36px; } }
@media screen and (min-width: 992px) {
.feature-article {
padding: 0 48px;
max-width: 1024px; } }
.feature-article__header-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px; }
.feature-article__header-type {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #005ea5;
font-size: 20px; }
.feature-article__header-tags {
padding-left: 12px; }
.feature-article__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
text-transform: uppercase; }
.feature-article__spacer {
background-color: #000000; }
.feature-article__media {
padding-bottom: 48px; }
.feature-article__media img {
width: 100%;
height: auto; }
.feature-article__summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 32px;
line-height: 1.33;
color: #2c2c2c;
font-size: 24px; }
.feature-article__summary p {
margin: 0; }
.feature-article__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.44;
color: #2c2c2c;
font-size: 18px; }
.feature-article__body p {
margin: 0; }
.how-to .block-content {
padding: 0; }
.internship__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
margin: 0;
color: #2c2c2c; }
.internship__spacer {
background-color: #2c2c2c; }
.internship__dates {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 32px; }
@media screen and (min-width: 768px) {
.internship__dates {
-ms-flex-direction: row;
flex-direction: row; } }
.internship__dates--heading,
.internship__location--heading {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
padding: 8px 0;
line-height: 1.86;
color: #2c2c2c;
font-size: 14px; }
.internship__dates--date {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.22;
color: #6f777b;
font-size: 18px; }
.internship__location--address .address {
margin: 0; }
.internship__media {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center; }
.internship__media img {
max-width: 100%;
height: auto; }
@media screen and (min-width: 992px) {
.internship__media iframe {
width: 853px;
height: 480px; } }
.internship__content {
padding: 18px 0; }
.knowledge-product__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
margin-top: 18px;
padding-top: 36px;
color: #6f777b; }
.ccg-sidenav {
padding-top: 36px; }
.knowledge-product__spacer {
background-color: #6f777b; }
.knowledge-product__summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 32px;
line-height: 1.33;
color: #2c2c2c;
font-size: 24px; }
.knowledge-product__summary p {
margin: 0; }
.knowledge-product__published {
padding-bottom: 16px; }
.knowledge-product__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.44;
color: #2c2c2c;
font-size: 18px; }
@media screen and (min-width: 1200px) {
.landing-page__content .grid {
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
.landing-page__title--hidden {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); }
.media-library__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
color: #2c2c2c; }
.media-library__spacer {
margin: 12px 0 48px;
background-color: #2c2c2c; }
.news-blog {
margin: 0 auto;
padding: 0 20px; }
@media screen and (min-width: 768px) {
.news-blog {
padding: 0 36px; } }
@media screen and (min-width: 992px) {
.news-blog {
padding: 0 48px;
max-width: 1024px; } }
.news-blog__header-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px; }
.news-blog__header-type {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #b10e1e;
font-size: 20px; }
.news-blog__header-tags {
padding-left: 12px; }
.news-blog__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
text-transform: uppercase; }
.news-blog__spacer {
background-color: #000000; }
.news-blog__publication {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 18px;
line-height: 1.44;
color: #6f777b;
font-size: 18px; }
.news-blog__disclaimer {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 48px;
line-height: 1.43;
color: #2c2c2c;
font-size: 14px; }
.news-blog__media {
padding-bottom: 48px; }
.news-blog__media img {
width: 100%;
height: auto; }
.news-blog__summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 32px;
line-height: 1.33;
color: #2c2c2c;
font-size: 24px; }
.news-blog__summary p {
margin: 0; }
.news-blog__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.44;
color: #2c2c2c;
font-size: 18px; }
.news-blog__body p {
margin: 0; }
.press-release-page {
margin: 0 auto;
padding: 0 20px; }
@media screen and (min-width: 768px) {
.press-release-page {
padding: 0 36px; } }
@media screen and (min-width: 992px) {
.press-release-page {
padding: 0 48px;
max-width: 1024px; } }
.press-release__header-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px; }
.press-release__header-type {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #22709c;
font-size: 20px; }
.press-release__header-tags {
padding-left: 12px; }
.press-release__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
text-transform: uppercase; }
.press-release__spacer {
background-color: #000000; }
.press-release__publication {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 18px;
line-height: 1.44;
color: #6f777b;
font-size: 18px; }
.press-release__disclaimer {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 48px;
line-height: 1.43;
color: #2c2c2c;
font-size: 14px; }
.press-release__media {
padding-bottom: 48px; }
.press-release__media img {
width: 100%;
height: auto; }
.press-release__summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 32px;
line-height: 1.33;
color: #2c2c2c;
font-size: 24px; }
.press-release__summary p {
margin: 0; }
.press-release__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.44;
color: #2c2c2c;
font-size: 18px; }
.press-release__body p {
margin: 0; }
.press-release__related-news-container {
padding-bottom: 80px; }
.press-release__related-news-title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
color: #6f777b; }
.press-release__related-news-spacer {
background-color: #6f777b; }
#searchContainer .searchMessage {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
font-weight: normal; }
#searchContainer .searchMessage .searchMessageKeyword {
color: #208078; }
#searchContainer .ResultsContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#searchContainer .FiltersContainer {
margin: 0;
background-color: #dee0e2;
width: 100%; }
@media screen and (min-width: 992px) {
#searchContainer .FiltersContainer {
width: 29.33%; } }
#searchContainer .FiltersContainer div:first-of-type {
margin-left: 2rem; }
#searchContainer .FiltersContainer button {
color: #ffffff; }
#searchContainer .FiltersContainer .FilterCategory {
margin: 1rem 0 1rem 2rem; }
#searchContainer .FiltersContainer .FilterCategory label {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
display: -ms-flexbox;
display: flex;
color: #2c2c2c;
font-size: 14px; }
#searchContainer button {
position: relative;
top: 1px;
right: 1px;
border: 2px solid #28a197;
background-color: #28a197;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
#searchContainer input {
background-color: #ffffff; }
#searchContainer input[type='checkbox'] {
margin-right: 4px;
width: 18px;
height: 18px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
#searchContainer input[type='checkbox']:checked:after {
display: block;
position: relative;
top: 0;
left: 4px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border: solid #2c2c2c;
border-width: 0 3px 3px 0;
width: 7px;
height: 12px;
content: ''; }
#searchContainer input[type='text'] {
color: #2c2c2c; }
#searchContainer form {
background-color: #dee0e2;
padding: 50px 0;
text-align: center; }
@media screen and (min-width: 992px) {
#searchContainer form {
padding: 50px 0 50px 29.33%;
text-align: left; } }
#searchContainer form input {
background-color: #f8f8f8;
font-size: 14px; }
#searchContainer form button {
position: relative;
right: 0;
width: 99%; }
@media screen and (min-width: 768px) {
#searchContainer form button {
width: 67%; } }
@media screen and (min-width: 992px) {
#searchContainer form button {
width: unset; } }
#searchContainer form button svg {
width: 15px;
height: 15px; }
#searchContainer form button svg path {
fill: #ffffff; }
#searchContainer .totalMessage {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
margin: 0;
line-height: 1.21;
font-size: 24px; }
#searchContainer .anItem {
padding: 12px 0; }
#searchContainer .anItem a {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 2.39;
font-size: 18px; }
#searchContainer .anItem p {
margin: 0;
line-height: 1.69;
color: #6f777b;
font-size: 13px; }
#searchContainer .pagination {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
padding-left: 3%;
width: 80%;
list-style: none; }
#searchContainer .pagination li a {
text-decoration: none;
color: #112e51; }
#searchContainer .pagination li.active a {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 3px;
background-color: #112e51;
width: 48px;
height: 27px;
color: #ffffff; }
#searchContainer .pagination li.disabled a {
cursor: default;
color: #6f777b; }
@media screen and (min-width: 992px) {
#searchContainer .pagination {
-ms-flex-pack: distribute;
justify-content: space-around;
padding-right: 5%;
padding-left: 29.33%; } }
.series-aggregator__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
color: #6f777b; }
.series-aggregator__title-line {
background-color: #6f777b; }
.series-aggregator__feed {
margin-top: 48px; }
.service-offering__header-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px; }
.service-offering__header-type {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #22709c;
font-size: 20px; }
.service-offering__header-tags {
padding-left: 12px; }
.service-offering__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
color: #000000; }
.service-offering__main .service-offering__subheading,
.service-offering__main .accordion__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 24px;
margin-top: 48px;
color: #000000; }
.service-offering__main .service-offering__subheading .accordion__body,
.service-offering__main .accordion__title .accordion__body {
color: #2c2c2c; }
.service-offering__main .accordion__spacer {
background-color: #000000; }
.service-offering__spacer {
background-color: #000000; }
.service-offering__media {
padding-bottom: 48px;
width: 100%;
height: auto;
object-fit: cover; }
.service-offering__media img {
display: block;
width: 100%;
max-width: 100%;
height: auto; }
.service-offering__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.33;
color: #2c2c2c;
font-size: 24px; }
.success-story-page {
margin: 0 auto;
padding: 0 20px; }
@media screen and (min-width: 768px) {
.success-story-page {
padding: 0 36px; } }
@media screen and (min-width: 992px) {
.success-story-page {
padding: 0 48px;
max-width: 1024px; } }
.success-story__header-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px; }
.success-story__header-type {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #6a1f63;
font-size: 20px; }
.success-story__header-tags {
padding-left: 12px; }
.success-story__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
text-transform: uppercase; }
.success-story__spacer {
background-color: #000000; }
.success-story__publication {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 18px;
line-height: 1.44;
color: #6f777b;
font-size: 18px; }
.success-story__disclaimer {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 48px;
line-height: 1.43;
color: #2c2c2c;
font-size: 14px; }
.success-story__media {
padding-bottom: 48px; }
.success-story__media img {
width: 100%;
height: auto; }
.success-story__summary {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 32px;
line-height: 1.33;
color: #2c2c2c;
font-size: 24px; }
.success-story__summary p {
margin: 0; }
.success-story__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.44;
color: #2c2c2c;
font-size: 18px; }
.success-story__body p {
margin: 0; }
.success-story__related-news-container {
padding-bottom: 80px; }
.success-story__related-news-title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.25;
color: #000000;
font-size: 32px;
color: #6f777b; }
.success-story__related-news-spacer {
background-color: #6f777b; }
.trade-lead__header-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px; }
.trade-lead__header-type {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
color: #22709c;
font-size: 20px; }
.trade-lead__header-tags {
padding-left: 12px; }
.trade-lead__title {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
color: #6f777b; }
.trade-lead__spacer {
background-color: #6f777b; }
.trade-lead__publication {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 18px;
line-height: 1.44;
color: #6f777b;
font-size: 18px; }
.trade-lead__media {
padding-bottom: 48px;
width: 100%;
height: auto;
object-fit: cover; }
.trade-lead__body {
font-family: "PublicSans", Arial, Verdana, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.44;
color: #2c2c2c;
font-size: 18px; }
.trade-lead__search-form {
margin-bottom: 24px;
background-color: #f8f8f8;
padding: 12px 24px; }
.trade-lead__search-form header {
font-family: "Merriweather", Arial, Verdana, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.33;
color: #000000;
font-size: 36px;
margin-top: 36px; }
.trade-lead__search-form .views-exposed-form {
margin: 12px 0; }
.trade-lead__search-form .views-exposed-form .form-text {
float: left; }
.trade-lead__search-form .views-exposed-form .image-button {
margin-left: -1px;
border: 2px solid #28a197;
background-color: #28a197;
padding: 18px;
width: 17px;
height: 17px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.trade-lead__search-form footer {
margin-bottom: 24px;
font-size: 18px; }
.trade-lead__search-result {
margin: 12px;
border-bottom: 1px solid #5b616b;
padding: 12px; }
.trade-lead__search-result a {
text-decoration: none;
color: #000000;
font-weight: normal; }
.trade-lead__search-result a:hover, .trade-lead__search-result a:focus, .trade-lead__search-result a:active {
text-decoration: underline; }
.trade-lead__search-body {
margin-top: 12px;
color: #5b616b;
font-size: 14px; }
