@charset "UTF-8";
/*
Theme Name: 350 Baseline
Theme URI: https://baseline.350.org
Description: 350 Baseline parent theme
Author: Matthew Hinders-Anderson + suzi grishpul
Author URI: https://350.org
Version: 1.6.58
Text Domain: baseline
GitHub Theme URI: https://gitlab.com/350/baseline
*/
/*
Variables
SASS variables shared across multiple files.
*/
/*
Basics
styles, resets, and standardization for common HTML elements,
*/
* {
box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
html {
color: #17292e;
font-family: system-ui, -apple-system, BlinkMacSystemFont, arial, sans-serif;
font-size: 16px;
line-height: 1.6;
scroll-behavior: smooth;
}
html, body {
font-size: 16px;
}
body {
margin: 0;
}
/* Headings */
h1,
h2,
h3,
h4,
h5 {
font-weight: bold;
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
margin: 0 0 1.3rem;
margin: 0 0 calc(0.2em + 0.9rem);
text-rendering: geometricPrecision;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child {
margin-bottom: 0;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
color: inherit;
text-decoration: none;
}
/* Links */
a {
color: #0f81e8;
cursor: pointer;
font-weight: bold;
}
a img {
border: none;
}
a.active {
color: inherit !important;
cursor: default;
opacity: 1 !important;
}
/* Paragraphs */
p {
margin: 0 0 1em;
margin: 0 0 calc(0.3em + 0.6rem);
}
p:last-child, ul:last-child, ol:last-child {
margin-bottom: 0;
}
/* Media */
img {
height: auto;
max-width: auto;
}
img, iframe, video {
border: 0 none;
max-width: 100%;
}
figure {
margin: 0;
}
/* Lists */
ul, ol {
margin: 0 0 1em;
margin: 0 0 calc(0.3em + 0.6rem);
padding-left: 1em;
}
ol {
counter-reset: li;
padding-left: calc(0.2rem + 0.9em);
}
li {
margin: 0 0 0.4em;
text-align: start;
}
ol li {
list-style: outside none none;
margin: 0 0.5em 0.5em;
margin: 0 0 calc(0.4rem + 0.2em) calc(0.4rem + 0.2em);
position: relative;
}
ol li:before {
background-color: rgba(21, 36, 43, 0.1);
border-radius: 1.7em;
box-sizing: border-box;
color: inherit;
content: counter(li, decimal);
counter-increment: li;
font-size: 0.6em;
font-size: calc(0.3rem + 0.4em);
font-weight: bold;
height: 1.7em;
left: -2.7em;
line-height: 1.8;
margin-right: 0.5em;
position: absolute;
text-align: center;
top: 0.04em;
top: calc(4px - 0.05em);
width: 1.7em;
}
ul li,
ol ul li {
list-style-type: disc;
list-style-position: outside;
margin: 0 0 0.3em;
}
ul ul li {
list-style-type: circle;
}
ul li:before,
ol ul li:before,
ol ol li:before {
content: "";
display: none;
}
ol ol li {
list-style-type: decimal;
margin: 0;
}
ul ul,
ul ul:last-child,
ol ol,
ol ol:last-child,
ul ol,
ul ol:last-child,
ol ul,
ol ul:last-child {
margin: 0.25em 0 0.5em;
padding-left: 1.5em;
}
ul ul ul, ol ol ol {
margin: 0.3em;
padding-left: 2em;
}
/* Tables */
table {
border-collapse: separate;
border-spacing: 2px;
width: 100%;
}
th {
font-weight: bold;
text-align: left;
}
tr {
background: rgba(255, 255, 255, 0.1);
}
tr:nth-child(2n) {
background: rgba(21, 36, 43, 0.1);
}
thead tr {
background: transparent;
}
td, th {
padding: 0.9em 1em;
}
/* Other text elements */
blockquote {
background: rgba(21, 36, 43, 0.04);
font-size: 1.2em;
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
margin: 1.5em 0;
padding: 1.3em;
}
q {
font-style: italic;
}
sup {
font-size: 0.75em;
vertical-align: top;
}
sub {
font-size: 0.75em;
vertical-align: bottom;
}
caption {
font-size: 0.85em;
color: #888;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
code,
samp,
kbd,
var {
font-family: Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 0.9em;
}
pre {
font-family: Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
margin: 0;
white-space: pre-line;
}
del {
text-decoration: line-through;
}
abbr,
acronym {
font-size: 0.9em;
font-variant: small-caps;
letter-spacing: 0.04em;
border-bottom: 1px dotted #9a9e9f;
cursor: help;
padding-bottom: 1px;
text-decoration: none;
}
dfn {
border-bottom: 1px dotted #9a9e9f;
cursor: help;
font-style: normal;
padding-bottom: 1px;
}
b,
strong {
font-weight: bold;
}
small {
font-size: 0.85em;
}
dd {
margin: 0;
}
/* default 350 colors */
/* FLAGGED: Move these colors to a 350-specific module */
.bg-transparent {
color: #fff;
}
.bg-transparent a {
color: rgba(255, 255, 255, 0.8);
}
.bg-transparent a:hover {
color: rgb(255, 255, 255);
}
.bg-blue,
.button.bg-blue {
background-color: #0f81e8;
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.bg-orange,
.button.bg-orange {
background-color: #ffa902;
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.bg-teal,
.button.bg-teal {
background-color: #35c9c5;
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.bg-red,
.button.bg-red {
background-color: #ff6753;
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.bg-dkgray,
.button.bg-dkgray {
background-color: #17292e;
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.bg-dkgray-trans,
.button.bg-dkgray-trans {
background-color: rgba(23, 41, 46, 0.6);
border-color: rgba(255, 255, 255, 0.6);
color: #fff;
}
.bg-ltgray,
.button.bg-ltgray {
background-color: #e1eaf2;
border-color: rgba(21, 36, 43, 0.2);
color: #17292e;
}
.bg-ltgray.refresh,
.button.bg-ltgray.refresh {
background-color: #F9FAFB;
}
.bg-white,
.button.bg-white {
background-color: #fff;
border-color: rgba(21, 36, 43, 0.2);
color: #17292e;
}
.bg-white-trans,
.button.bg-white-trans {
background-color: rgba(255, 255, 255, 0.85);
border-color: rgba(21, 36, 43, 0.2);
color: #17292e;
}
.bg-ltblue.refresh,
.button.bg-ltblue.refresh {
background-color: #E5F3FF;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #000;
}
.bg-infoblue.refresh,
.button.bg-infoblue.refresh {
background-color: #D1E9FF;
}
.bg-ltyellow.refresh,
.button.bg-ltyellow.refresh {
background-color: #FEF7EB;
color: #000;
}
.bg-dkyellow.refresh,
.button.bg-dkyellow.refresh {
background-color: rgb(255, 169, 2);
}
.expando.bg-ltblue.refresh .expando-inner a {
color: #0f81e8 !important;
}
.text-light {
color: #fff !important;
}
a.text-light,
.text-light a {
color: rgba(255, 255, 255, 0.8) !important;
}
.text-dark {
color: #17292e !important;
}
a.text-dark,
.text-dark a {
color: rgba(21, 36, 43, 0.9) !important;
}
a.text-blue-important,
.text-blue-important {
color: #0f81e8 !important;
}
.text-blue,
.text-blue.text-color-override {
color: #0f81e8;
}
.text-orange,
.text-orange.text-color-override {
color: #ffab03;
}
.text-red,
.text-red.text-color-override {
color: #ff6753;
}
.text-teal,
.text-teal.text-color-override {
color: #35c9c5;
}
.text-ltgray,
.text-ltgray.text-color-override {
color: #e1eaf2;
}
.bg-blue.notch::after {
border-bottom-color: #0f81e8;
}
.bg-orange.notch::after {
border-bottom-color: #ffa902;
}
.bg-teal.notch::after {
border-bottom-color: #35c9c5;
}
.bg-red.notch::after {
border-bottom-color: #ff6753;
}
.bg-dkgray.notch::after {
border-bottom-color: #2b2e2f;
}
.bg-dkgray-trans.notch::after {
border-bottom-color: rgba(23, 41, 46, 0.6);
}
.bg-ltgray.notch::after {
border-bottom-color: #dae6f2;
}
.bg-white.notch::after {
border-bottom-color: #fff;
}
.bg-blue.notch-semicircle::after,
.bg-blue.notch-tab::after {
background-color: #0f81e8;
}
.bg-orange.notch-semicircle::after,
.bg-orange.notch-tab::after {
background-color: #ffa902;
}
.bg-teal.notch-semicircle::after,
.bg-teal.notch-tab::after {
background-color: #35c9c5;
}
.bg-red.notch-semicircle::after,
.bg-red.notch-tab::after {
background-color: #ff6753;
}
.bg-dkgray.notch-semicircle::after,
.bg-dkgray.notch-tab::after {
background-color: #2b2e2f;
}
.bg-dkgray-trans.notch-semicircle::after {
/* semicircle notch will have visible overlap with transparent colors, so just hide it :( */
display: none;
}
.bg-dkgray-trans.notch-tab {
background-color: rgba(23, 41, 46, 0.6);
}
.bg-ltgray.notch-semicircle::after,
.bg-ltgray.notch-tab::after {
background-color: #dae6f2;
}
.bg-white.notch-semicircle::after,
.bg-white.notch-tab::after {
background-color: #fff;
}
.bg-blue a,
.bg-orange a,
.bg-teal a,
.bg-red a,
.bg-dkgray-trans a,
.bg-dkgray a {
color: #fff;
}
.bg-white-trans a {
color: rgb(15, 130, 230);
}
.bg-white-trans a:hover {
color: rgba(15, 130, 230, 0.7);
}
nav.bg-blue li,
nav.bg-blue .sub-menu,
nav.bg-orange li,
nav.bg-orange .sub-menu,
nav.bg-dkgray li,
nav.bg-dkgray .sub-menu,
nav.bg-teal li,
nav.bg-teal .sub-menu,
nav.bg-red li,
nav.bg-red .sub-menu,
nav.bg-transparent li,
nav.bg-transparent .sub-menu {
border-color: rgba(255, 255, 255, 0.15);
}
nav.bg-white li,
nav.bg-white .sub-menu,
nav.bg-ltgray li,
nav.bg-ltgray .sub-menu {
border-color: rgba(21, 36, 43, 0.2);
}
/**
Text styles.
**/
/**
Multilingual – for mixing multiple langauges within a single site
(for single language i18n, see "languages" folder)
NOTE: In general, Baseline is built for a multisite, one-language-per-site
approach, but sometimes you just need a little AR text in your EN site.
*/
.lang-rtl {
direction: rtl !important;
}
.lang-ltr {
direction: ltr !important;
}
.lang-ar {
direction: rtl !important;
letter-spacing: 0 !important;
}
/* Headings */
h1 {
font-size: calc(0.8vw + 1.5rem);
}
h2 {
font-size: calc(0.68vw + 1.4rem);
}
h3 {
font-size: calc(0.35vw + 1.3rem);
}
h4 {
font-size: calc(0.25vw + 1.25rem);
}
h5 {
font-size: calc(0.15vw + 1.1rem);
}
@media screen and (max-width: 680px) {
h1, h2, h3, h4, h5 {
hyphens: auto;
}
}
.text-hyphens-none {
hyphens: none !important;
}
.text-hyphens {
hyphens: auto;
}
/* Text Size
"@include default-letterspace-lineheight-calc" is repeated so
many times because calc functions aren't re-calculated when they're
inherited from a parent element.
*/
.text-size-h1 {
font-size: calc(0.9vw + 1.5rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-size-h2 {
font-size: calc(0.77vw + 1.4rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-size-h3 {
font-size: calc(0.62vw + 1.3rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-size-h4 {
font-size: calc(0.5vw + 1.25rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-size-h5 {
font-size: calc(0.44vw + 1rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-size-normal,
.text-size-default {
font-size: 1rem;
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-large,
.text-large1,
.text-style-lead,
.text-size-large {
font-size: 1.25rem;
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-large2,
.text-style-lead2,
.text-size-large2 {
font-size: calc(0.1vw + 1.3rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-large3,
.text-style-lead3,
.text-size-large3 {
font-size: calc(0.15vw + 1.4rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-large4,
.text-style-lead4,
.text-size-large4 {
font-size: calc(0.2vw + 1.5rem);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-small {
font-size: 0.85em;
letter-spacing: calc(0.025rem - 0.025em);
}
.text-small2 {
font-size: 0.75em;
letter-spacing: calc(0.025rem - 0.025em);
}
/* Titles */
.text-style-title0,
.title0 {
font-size: calc(2.8vw + 55px);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-style-title1,
.title1 {
font-size: calc(2.6vw + 44px);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-style-title2,
.title2 {
font-size: calc(2.4vw + 35px);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-style-title3,
.title3 {
font-size: calc(2.3vw + 28px);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-style-title4,
.title4 {
font-size: calc(2.25vw + 22px);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
.text-style-title5,
.title5 {
font-size: calc(2.2vw + 18px);
letter-spacing: calc(0.025rem - 0.025em);
line-height: calc(0.8em + 0.85rem);
}
/* Text Alignment */
.text-left {
text-align: left;
justify-content: flex-start;
}
.text-center {
text-align: center;
justify-content: center;
}
.text-right {
text-align: right;
justify-content: flex-end;
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
.mobile-text-left {
text-align: left;
justify-content: flex-start;
}
.mobile-text-center {
text-align: center;
justify-content: center;
}
.mobile-text-right {
text-align: right;
justify-content: flex-end;
}
}
/* Tablet Only */
@media only screen and (min-width: 680px) and (max-width: 950px) {
.tablet-text-left {
text-align: left;
justify-content: flex-start;
}
.tablet-text-center {
text-align: center;
justify-content: center;
}
.tablet-text-right {
text-align: right;
justify-content: flex-end;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.desktop-text-left {
text-align: left;
justify-content: flex-start;
}
.desktop-text-center {
text-align: center;
justify-content: center;
}
.desktop-text-right {
text-align: right;
justify-content: flex-end;
}
}
/* Text Styles */
.text-bold,
.text-strong,
.strong {
font-weight: bold;
}
.text-highlight,
.highlight {
display: inline;
/* set min. optical size in px, then add relative size in em */
padding: 0.1em 0.08em;
padding: calc(2px + 0.02em) calc(3px + 0.04em);
}
.text-small-caps {
font-variant: small-caps;
letter-spacing: 0.07em;
letter-spacing: calc(0.07rem - 0.01em);
text-transform: lowercase;
}
.text-caps,
.text-uppercase {
letter-spacing: 0.1em;
letter-spacing: calc(0.07rem - 0.01em);
text-transform: uppercase;
}
.text-shadow,
.text-shadow-blur {
text-shadow: 0 0 2em rgba(21, 36, 43, 0.9);
}
.text-shadow.text-dark {
text-shadow: 0 0 2em rgba(255, 255, 255, 0.8);
}
.text-shadow-drop {
color: #fff;
text-shadow: 1px 1px 0 rgba(20, 30, 40, 0.3), 2px 2px 0 rgba(20, 30, 40, 0.3), 3px 3px 0 rgba(20, 30, 40, 0.3), 4px 4px 0 rgba(20, 30, 40, 0.3), 6px 6px 0 rgba(20, 30, 40, 0.3);
}
.text-shadow-drop.text-dark {
color: inherit;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3), 2px 2px 0 rgba(255, 255, 255, 0.3), 3px 3px 0 rgba(255, 255, 255, 0.3), 4px 4px 0 rgba(255, 255, 255, 0.3), 6px 6px 0 rgba(255, 255, 255, 0.3);
}
/* Meta / Secondary */
.text-font-secondary,
.meta {
font-family: Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
letter-spacing: 0.05em;
letter-spacing: calc(0.03rem + 0.02em);
}
.meta {
font-size: 0.8em;
}
h1.meta,
h2.meta,
h3.meta,
h4.meta,
h5.meta {
font-size: 1.25rem;
letter-spacing: 0.3em;
text-transform: uppercase;
}
h3.meta {
font-size: 1rem;
}
h4.meta,
h5.meta {
font-size: 0.85rem;
letter-spacing: 0.15em;
}
/* Horizontal Rules */
hr {
border-style: dashed;
border-width: 1px 0 0 0;
border-color: #cccdcf;
border-color: rgba(130, 160, 180, 0.8);
clear: both;
margin-bottom: 1em;
}
hr.margin-medium {
margin: 1.3rem 0;
}
hr.margin-large {
margin: 2.5rem 0;
}
/* Text utlities */
.text-wrap-none {
white-space: nowrap;
}
.text-columns {
columns: 16em auto;
column-gap: 4em;
column-rule: 1px solid rgba(21, 36, 43, 0.2);
}
.text-columns-small {
column-width: 12em;
}
.text-columns-large {
column-width: 20em;
}
.nobullet li {
list-style-type: none;
margin-bottom: 0.7em;
text-align: inherit;
}
/* Link utlities */
.area-link {
color: inherit !important;
cursor: pointer;
display: block;
font-weight: inherit;
text-decoration: none;
transition: 0.1s all;
}
a.area-link:hover .area-link-hover {
color: #0f81e8;
}
.no-underline,
.no-underline a,
.text-underline-none,
.text-underline-none a {
text-decoration: none;
}
.text-color-default,
a.text-color-default {
color: inherit !important;
}
.text-unstyled,
a.text-unstyled {
color: inherit !important;
font-weight: 400;
text-decoration: none;
}
a.text-unstyled:hover {
text-decoration: underline;
}
/* Inline shapes */
.inline-dot {
background-position: center;
background-size: 55%;
border-radius: 1em;
display: inline-block;
font-size: 0.8em;
height: 0.8em;
line-height: 1.5;
position: relative;
text-align: center;
vertical-align: middle;
width: 0.8em;
}
.inline-square {
background-position: center;
background-size: 1em;
display: inline-block;
font-size: 0.8em;
height: 0.8em;
line-height: 1.5;
position: relative;
text-align: center;
top: -0.15em;
vertical-align: middle;
width: 0.8em;
}
/* Borders + Notches */
/* Borders */
.border {
border-style: solid;
border-width: 1px;
}
.border-bottom {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.border-left {
border-left-style: solid;
border-left-width: 1px;
}
.border-right {
border-right-style: solid;
border-right-width: 1px;
}
.border-top {
border-top-style: solid;
border-top-width: 1px;
}
/* Notches */
.section.notch-down {
z-index: 6;
}
.notch::after {
border-bottom: 12px solid transparent;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
content: "";
height: 0;
left: 50%;
margin-left: -18px;
position: absolute;
top: -12px;
width: 0;
z-index: 999;
}
.notch-down::after {
top: auto;
bottom: -12px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.notch-semicircle::after {
content: "";
position: absolute;
top: -25px;
border-radius: 100px 100px 0 0;
width: 90px;
height: 45px;
left: 50%;
margin-left: -45px;
-webkit-transform: scale(0.8, 0.7);
-moz-transform: scale(0.8, 0.7);
transform: scale(0.8, 0.7);
}
.notch-semicircle.notch-down::after {
bottom: -25px;
top: auto;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
.notch::after {
border-bottom: 17px solid transparent;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
margin-left: -26px;
top: -17px;
}
.notch-down::after {
bottom: -17px;
top: auto;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.notch-semicircle::after {
-webkit-transform: scale(1, 0.9);
-moz-transform: scale(1, 0.9);
transform: scale(1, 0.9);
}
}
/*
Buttons
- Basics
- Modifiers/Options
- Other button shapes
*/
/* Button basics */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
*overflow: visible;
}
input.submit,
input[type=submit],
button,
.button {
align-items: center;
background-color: #999;
border-radius: 1.8em;
border: 1px solid transparent;
color: #fff;
cursor: pointer;
display: block;
display: inline-flex;
font-weight: bold;
font-size: 0.9em;
height: auto;
justify-content: center;
line-height: 1.1;
padding: 0.8em 1.6em;
padding: calc(0.3rem + 0.5em) calc(0.6rem + 1em);
position: relative;
text-align: center;
text-decoration: none;
transition: all 0.15s ease;
white-space: normal;
}
input.submit:hover,
input[type=submit]:hover,
.button:hover,
button:hover {
border-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
input.submit:active,
input[type=submit]:active,
.button:active,
.button.active,
button:active,
button.active {
transform: scale(0.97);
}
/* FLAGGED: inconsistent names :( */
/* Button modifiers */
.button-small {
font-size: 0.85em;
}
.button-small2 {
font-size: 0.8em;
}
.button-large,
.button-big {
font-size: 1.2em;
}
.button-huge {
font-size: 1.3em;
}
.button-massive {
font-size: 1.5em;
}
.button.button-secondary {
background-color: transparent;
border: 0.1em solid;
border-width: calc(0.06rem + 0.06em);
color: inherit;
}
.button.button-secondary:hover {
box-shadow: 0 0 0 0.1em;
}
.button-icon {
background-size: 1em;
background-position: 0.75em center;
padding-left: 2.3em;
}
.button-arrow::after,
.button-arrow-down::after,
.button-arrow-right::after,
.arrow::after,
.arrow-down::after,
.arrow-right::after {
background-color: rgba(20, 35, 43, 0.2);
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQuNCw1NC4zTDE5LDQwTDM5LDYwLjJWMS43aDE5LjhWNjBMNzksNDBsMTQuNSwxNC40TDQ5LDk5LjJMNC40LDU0LjN6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
background-position: center center;
background-repeat: no-repeat;
background-size: 0.7em;
background-size: calc(0.1rem + 0.6em);
border-radius: 1.2em;
content: "";
display: inline-block;
font-size: 0.8em;
height: 1.2em;
line-height: 1.3em;
margin-left: 0.35em;
text-align: center;
vertical-align: middle;
width: 1.2em;
}
.button-arrow::after,
.button-arrow-right::after,
.arrow-right::after {
transform: rotate(-90deg);
}
/* Other button shapes */
.button-dot {
background-color: rgba(21, 36, 43, 0.15);
background-position: center center;
background-repeat: no-repeat;
background-size: 50%;
border-radius: 2rem;
display: inline-block;
height: 1.75rem;
text-indent: -9999px;
width: 1.75rem;
}
.button-dot:hover {
background-color: rgba(21, 36, 43, 0.3);
}
.bg-dkgray .button-dot {
background-color: rgba(255, 255, 255, 0.1);
}
.bg-dkgray .button-dot:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.button-square {
background-position: center center;
background-size: 21px auto;
border-radius: 0;
display: block;
height: 50px;
margin: 0;
position: relative;
text-indent: -9999px;
transition: 0.3s all;
width: 50px;
}
.button-refresh, .homepage-join-section #action-form .input-wrapper .button-primary, .expando.text-blue-important .expando-link {
border-radius: 8px;
padding: 16px 12px;
}
.button.button-refresh, .homepage-join-section #action-form .input-wrapper .button.button-primary, .expando.text-blue-important .button.expando-link {
text-transform: none !important;
letter-spacing: 0.3px !important;
}
/* Forms + Inputs */
button, input, select, textarea {
font-family: system-ui, -apple-system, BlinkMacSystemFont, arial, sans-serif;
}
input {
line-height: normal;
}
input,
select,
textarea {
background: #fff;
border: 1px solid rgba(21, 36, 43, 0.3);
border-radius: 2px;
font-size: 1em;
font-weight: 500;
margin-bottom: 0.3em;
padding: 0.7em 0.6em;
width: 100%;
max-width: 35em;
}
input:focus,
select:focus,
textarea:focus {
border-color: rgba(21, 36, 43, 0.6);
}
input::placeholder,
select::placeholder,
textarea::placeholder {
color: rgba(21, 36, 43, 0.5);
}
button[disabled],
input[disabled] {
cursor: not-allowed;
}
input[type=checkbox],
input[type=radio] {
background: #fff;
border: 1px solid rgba(21, 36, 43, 0.25);
box-sizing: border-box;
display: inline-block;
height: calc(0.4em + 0.7rem);
margin: 0;
padding: 0;
width: calc(0.4em + 0.7rem);
}
input[type=radio] {
border-radius: 1em;
}
input[type=radio]:focus {
box-shadow: 0 0 0 0.12rem rgba(21, 36, 43, 0.4);
}
input[type=radio]:checked {
box-shadow: 0 0 0 calc(0.1em + 0.15rem) #fff inset;
background-color: #0f81e8;
}
input[type=radio]:checked:focus {
box-shadow: 0 0 0 0.12rem rgba(21, 36, 43, 0.25) 0 0 0 calc(0.1em + 0.25rem) #fff inset;
}
input[type=checkbox]:focus {
box-shadow: 0 0 0 0.12rem rgba(21, 36, 43, 0.4);
}
select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA3MCI+PHBhdGggZD0iTTE1IDBMMCAyNmgzMHpNMTUgNzFsMTUtMjZIMHoiLz48L3N2Zz4K");
background-repeat: no-repeat;
background-position: right 0.6em center 0;
background-position: calc(100% - 0.3em - 0.3rem) center;
background-size: 1rem;
background-size: auto calc(0.6rem + 0.4em);
cursor: pointer;
}
select[multiple] {
background-image: none;
}
option {
font-size: 1rem;
font-size: calc(0.5em + 0.5rem);
font-weight: normal;
}
fieldset {
border: 0 none;
margin: 0;
padding: 0;
}
textarea {
line-height: 1.4;
overflow: auto;
vertical-align: top;
max-width: none;
}
label[for] {
cursor: pointer;
}
/* Input wrappers */
.input-radio label {
cursor: pointer;
}
.input-radio,
.input-checkbox {
align-items: baseline;
display: flex;
flex-wrap: nowrap;
}
.input-radio input,
.input-checkbox input {
flex: 0 0 auto;
margin-top: 0.2em;
margin-right: 0.3em;
position: relative;
top: 0.2rem;
}
.input-radio-group,
.input-checkbox-group {
margin: calc(0.7rem + 0.3em) 0;
}
/* Form styles */
/* Change.org-style form */
.form-style-labelabove input[type=text],
.form-style-labelabove input[type=email],
.form-style-labelabove input[type=number],
.form-style-labelabove textarea,
.form-style-labelabove select {
border: 0 none;
margin: 0;
}
.js .form-style-labelabove input:focus,
.js .form-style-labelabove textarea:focus,
.js .form-style-labelabove select:focus {
border: 0 none;
outline: 0;
}
.js .form-style-labelabove .focus {
z-index: 2;
}
.form-style-labelabove input[type=text],
.form-style-labelabove input[type=email],
.form-style-labelabove input[type=number],
.form-style-labelabove textarea,
.form-style-labelabove select {
background-color: transparent;
padding-top: 2em;
}
.form-style-labelabove label {
color: #0f81e8; /* FLAGGED: remove hardcoded 350 color */
font-size: 0.85em;
font-weight: bold;
}
.form-style-labelabove .input-text,
.form-style-labelabove .input-textarea,
.form-style-labelabove .input-number,
.form-style-labelabove .input-multiple,
.form-style-labelabove .input-select,
.form-style-labelabove .input-group {
border: 1px solid rgba(21, 36, 43, 0.3);
border-radius: 4px;
background: #fff;
margin-bottom: 0.8em;
position: relative;
}
.form-style-labelabove .input-text label,
.form-style-labelabove .input-textarea label,
.form-style-labelabove .input-number label,
.form-style-labelabove .input-multiple label,
.form-style-labelabove .input-select label,
.form-style-labelabove .input-group label {
display: block;
padding: 0.5em 0.6em 0;
text-align: start;
} /* Reset labels alignment, regardless of inherited alignment*/
.form-style-labelabove .input-checkbox label,
.form-style-labelabove .input-radio label {
color: inherit;
margin-left: 0.5em;
padding: 0;
}
.form-style-labelabove .input-group {
border: 1px solid rgba(21, 36, 43, 0.3);
}
.form-style-labelabove .input-group .input-text,
.form-style-labelabove .input-group .input-select,
.form-style-labelabove .input-group .input-number,
.form-style-labelabove .input-group .input-textarea {
background-color: transparent;
border-width: 1px 0 0;
border-style: solid none none;
border-radius: 0;
margin-bottom: 0;
margin-top: 0;
}
.form-style-labelabove .input-group *:first-child {
border-radius: 4px 4px 0 0;
border-top: 0 none;
}
.form-style-labelabove .input-group *:last-child {
border-radius: 0 0 4px 4px;
}
.form-style-labelabove .input-select,
.form-style-labelabove .input-textarea,
.form-style-labelabove .input-checkbox,
.form-style-labelabove .input-radio {
margin: 0.9rem 0;
}
.form-style-labelabove .input-radio-group .input-radio,
.form-style-labelabove .input-checkbox-group .input-checkbox {
margin: 0.3rem 0;
}
.form-style-labelabove .ak-input-type-user.input-select select {
background-position: 97% 70%;
}
.form-style-labelabove .ak-input-type-user.input-text label,
.form-style-labelabove .ak-input-type-user.input-select label,
.form-style-labelabove .ak-input-type-user.input-textarea label {
font-size: 0.75em;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.form-style-labelabove .input-radio > label:first-child,
.form-style-labelabove .input-checkbox > label:first-child {
color: inherit;
cursor: default;
display: block;
font-size: 0.85em;
font-weight: bold;
margin-bottom: 0.5em;
padding: 0;
}
.form-style-labelabove .ak-input-type-user.input-text label,
.form-style-labelabove .ak-input-type-user.input-select label,
.form-style-labelabove .ak-input-type-user.input-textarea label {
position: absolute;
top: 0.2em;
left: 0;
}
/* Horizontal form - stack on small screens, line up on larger*/
.form-layout-horizontal .input-text,
.form-layout-horizontal .input-select,
.form-layout-horizontal .input-group,
.form-layout-horizontal .input-submit {
width: 100%;
}
.form-layout-horizontal input,
.form-layout-horizontal input[type=text],
.form-layout-horizontal input[type=email],
.form-layout-horizontal input[type=number],
.form-layout-horizontal textarea,
.form-layout-horizontal select {
align-self: stretch;
padding-top: 2em;
}
.form-layout-horizontal input[type=submit] {
padding: 0.8em 1.4em !important;
border-radius: 0 4px 4px 0;
max-width: none;
}
.form-layout-horizontal .input-text label,
.form-layout-horizontal .input-select label {
margin: 0;
position: static;
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.form-layout-horizontal {
align-items: stretch;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
margin: 1.3em 0;
}
.form-layout-horizontal::before {
background-color: transparent;
content: "";
height: 1px;
order: 7;
width: 100%;
}
.form-layout-horizontal:first-child {
margin-top: 0;
}
.form-layout-horizontal:last-child {
margin-bottom: 0;
}
.form-layout-horizontal input,
.form-layout-horizontal select,
.form-layout-horizontal .input,
.form-layout-horizontal .select,
.form-layout-horizontal .submit {
max-width: 12em;
}
.form-layout-horizontal .input-text,
.form-layout-horizontal .input-select,
.form-layout-horizontal .input-submit,
.form-layout-horizontal .input-group {
align-items: center;
border-radius: 0;
display: flex;
min-height: 100%;
margin-bottom: 0;
margin-top: 0;
order: 3;
width: auto;
}
.form-layout-horizontal .input-text,
.form-layout-horizontal .input-select {
min-width: 12em;
}
.form-layout-horizontal .input-group {
border-radius: 0;
}
.form-layout-horizontal .input-text label,
.form-layout-horizontal .input-select label {
padding: 0 0 0 0.6em;
}
.form-layout-horizontal > *:first-child {
border-radius: 4px 0 0 4px;
}
.form-layout-horizontal > *:last-child {
border-radius: 0 4px 4px 0;
}
.form-layout-horizontal .input-group .input-text + .input-text {
border-left: 1px solid rgba(21, 36, 43, 0.3);
border-top: 0 none;
}
.form-layout-horizontal .input-submit {
order: 6;
}
.form-layout-horizontal .input-submit button,
.form-layout-horizontal button[type=submit],
.form-layout-horizontal input[type=submit],
.form-layout-horizontal button.submit {
border-radius: 0 4px 4px 0;
height: 100%;
margin-left: 10px;
}
.form-layout-horizontal .input-radio,
.form-layout-horizontal .input-checkbox,
.form-layout-horizontal .input-textarea {
flex: 0 0 auto;
justify-content: inherit;
order: 10;
width: auto;
}
.form-layout-horizontal .ak-postform-text {
margin-top: 1.2rem;
width: 100%;
}
}
/* Icon styles */
.icon-before[data-icon]::before {
font-family: tf-icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
opacity: 0;
margin-right: 0.3em;
margin-right: calc(0.06em + 7px);
speak: none;
}
.icon-after[data-icon]::after {
font-family: tf-icons;
content: attr(data-icon);
opacity: 0;
margin-left: 0.3em;
margin-left: calc(0.06em + 5px);
speak: none;
}
.icon[data-icon]::after {
font-family: tf-icons;
content: attr(data-icon);
opacity: 0;
speak: none;
}
.wf-tficons-n7-active .icon-before::before,
.wf-tficons-n7-active .icon-after::after,
.wf-tficons-n7-active .icon::after {
opacity: 1;
-webkit-transition: 0.2s opacity;
-moz-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.wf-tficons-n7-inactive .icon-before::before,
.wf-tficons-n7-inactive .icon-after::after,
.wf-tficons-n7-inactive .icon::after {
display: none;
}
.wf-tficons-n7-active .icon-faded.icon-before::before,
.wf-tficons-n7-active .icon-faded.icon-after::after,
.wf-tficons-n7-active .icon-faded.icon::after {
opacity: 0.5;
}
.inline-svg {
display: inline-block;
height: 1.5em;
margin: 0 0.4em;
width: 1.5em;
}
/* Images + Media */
/* removes awkward gap beneath an image due to line height */
.image-link-parent {
font-size: 0 !important;
}
.image-bleed {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
/* team members photos */
.team-member-photo img {
width: 300px;
height: 250px;
object-fit: cover;
}
/*
Nav
*/
/* ----- General nav elements ----- */
nav {
margin: 0;
}
nav ul {
margin: 0;
padding-left: 0;
}
nav li,
nav li li {
list-style-type: none;
margin-bottom: 0;
text-align: unset;
}
nav a,
.nav a {
border-bottom: 0;
text-decoration: none;
transition: 0.1s all;
}
/* ----- Nav Sections ----- */
nav.section {
font-size: 1.2rem;
padding: 5px;
z-index: 999;
}
nav.section .nav-inner {
z-index: 1000;
}
nav.section a {
display: block;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
nav.section a:hover {
background: rgba(21, 36, 43, 0.1);
}
.nav-menu-label a,
nav.nav-desktop-dropdown .menu .nav-menu-label a {
cursor: default;
font-size: 0.8rem;
font-weight: 400;
opacity: 0.6;
padding: 0.4em;
}
.nav-menu-label a:hover,
nav.nav-desktop-dropdown .menu .nav-menu-label a:hover {
color: inherit;
background-color: transparent;
opacity: 0.6;
text-decoration: none;
}
/* ----- Submenus ----- */
.sub-menu,
ul ul.sub-menu {
padding-left: 0;
}
.sub-menu a::before {
content: "–";
display: inline-block;
margin-right: 0.8em;
opacity: 0.3;
}
.sub-menu a {
font-size: 1.15rem;
padding-left: 0.1em;
}
.sub-menu .sub-menu {
padding-left: 0;
margin-top: 0;
}
.sub-menu .sub-menu a {
font-size: 0.9rem;
font-weight: 500;
padding-left: 1.3rem;
}
.sub-menu .sub-menu a::before {
content: "• ";
opacity: 0.6;
}
/* ----- Non-functioning nav items (e.g dividers, labels, etc.) ----- */
nav.section .divider a {
border-bottom: 0 none;
font-size: 0;
pointer-events: none;
text-indent: -9999px;
margin-bottom: 1.5rem;
}
nav.section .divider a:hover {
background: transparent !important;
}
nav.section .heading a,
.menu .heading a {
color: inherit;
cursor: initial;
display: block;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.05em;
margin-top: 2rem;
opacity: 0.5;
pointer-events: none;
text-transform: uppercase;
}
nav.section .heading:first-child a,
.menu .heading:first-child a {
margin-top: 0.5rem;
}
.widget .menu .heading a {
font-size: 0.8em;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
nav.section .heading a:hover,
.menu .heading a:hover {
color: inherit;
background: transparent !important;
}
.nav-label {
display: none;
margin: 0 1rem;
}
.main-nav-label {
display: none;
}
/* modal nav styles */
.modal-wrapper .menu li {
font-size: 1.5rem;
padding: 0.3em 0;
}
.modal-wrapper .sub-menu li {
font-size: 1rem;
}
.modal-wrapper .menu a {
display: block;
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
/* Collapsed mobile nav menus */
nav.nav-mobile-collapsed {
padding: 10px;
}
nav.nav-mobile-collapsed .menu a,
nav.nav-mobile-list .menu a {
padding-left: 1rem;
padding-right: 1rem;
}
.js-nav-menu-mobile-toggle {
cursor: pointer;
font-size: 1rem;
font-weight: bold;
transition: all 0.3s;
}
.js-nav-menu-mobile-toggle a::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid;
content: "";
display: inline-block;
height: 0;
margin-left: 0.5em;
position: relative;
top: -0.05em;
transition: border 0.3s;
vertical-align: middle;
width: 0;
}
.js-nav-menu-mobile-expanded .js-nav-menu-mobile-toggle {
opacity: 0.5;
margin-bottom: 5px;
}
.js-nav-menu-mobile-expanded .js-nav-menu-mobile-toggle a::after {
border-top: 0 solid;
border-bottom: 5px solid;
}
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
nav.section.meta {
padding: 5px;
}
nav.section {
padding: 10px;
}
}
/* Tablet Only */
@media only screen and (min-width: 680px) and (max-width: 950px) {
/* Collapsed tablet nav menus */
nav.nav-tablet-collapsed {
padding: 10px;
}
.js-nav-menu-tablet-toggle {
cursor: pointer;
font-size: 1rem;
font-weight: bold;
transition: all 0.3s;
}
.js-nav-menu-tablet-toggle a::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid;
content: "";
display: inline-block;
height: 0;
margin-left: 0.5em;
position: relative;
top: -0.05em;
transition: border 0.3s;
vertical-align: middle;
width: 0;
}
.js-nav-menu-tablet-expanded .js-nav-menu-tablet-toggle {
opacity: 0.5;
margin-bottom: 5px;
}
.js-nav-menu-tablet-expanded .js-nav-menu-tablet-toggle a::after {
border-top: 0 solid;
border-bottom: 5px solid;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
/* Nav - desktop */
.nav-desktop-dropdown .nav-label,
.nav-desktop-list .nav-label {
display: none;
}
nav.section a {
font-size: 1.6rem;
}
nav.section .sub-menu a {
font-size: 1.35rem;
font-weight: 500;
}
nav.section .sub-menu .sub-menu a {
font-size: 1rem;
}
/* Vertical list navs */
nav.nav-desktop-collapsed,
nav.nav-desktop-list,
nav.nav-desktop-collapsed a,
nav.nav-desktop-list a {
font-size: 1.3rem;
}
nav.section {
font-size: 0; /* removes whitespace between menu items */
padding: 0;
}
/* Dropdown Navs */
/* To avoid a collision between the inherited bg color, the sub-menu bg color
tinting, and the link hover styles, divide the CSS functions like this:
- all bg color inheritance is done through
tags
- all non-hover bg color tinting is done on ul.sub-menu ::before pseudo-elements
- all cosmetic hover styling is done on the tags
*/
/* borders look awkward when there's no background color filling 'em in */
nav.nav-desktop-dropdown.bg-transparent {
border: 0 none;
}
/* semi-transparent bg colors don't play nice with our dropdown set up */
nav.nav-desktop-dropdown.bg-dkgray-trans {
background-color: #17292e;
}
nav.nav-desktop-dropdown.text-center .section-inner,
nav.nav-desktop-dropdown.desktop-text-center .section-inner {
display: flex;
}
nav.nav-desktop-dropdown .menu-label {
display: none;
}
nav.nav-desktop-dropdown .menu {
align-items: center;
background-color: inherit;
display: flex;
height: 100%;
}
nav.nav-desktop-dropdown li {
background-color: inherit;
font-size: 1rem;
height: 100%;
margin-bottom: 0;
position: relative;
z-index: 2;
}
nav.nav-desktop-dropdown a {
align-items: center;
border-bottom: 0 none;
display: flex;
font-size: 0.9em;
min-height: 2.8rem;
height: 100%;
line-height: 1.2;
padding: 0.5rem 1rem;
}
nav.nav-desktop-dropdown a:hover,
nav.nav-desktop-dropdown .menu-item-has-children:hover > a {
background-color: rgba(21, 36, 43, 0.2);
}
/* Reverse hover colors for dkgray backgrounds */
nav.nav-desktop-dropdown.bg-dkgray a:hover,
nav.nav-desktop-dropdown.bg-dkgray .menu-item-has-children:hover > a,
.bg-dkgray nav.nav-desktop-dropdown a:hover,
.bg-dkgray nav.nav-desktop-dropdown .menu-item-has-children:hover > a {
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
}
/* Nav items w/ children styles */
/* add down arrow indicating this menu item has children */
nav.nav-desktop-dropdown .menu-item-has-children > a::after {
border-top: 0.4em solid;
border-left: 0.28em solid transparent;
border-right: 0.28em solid transparent;
content: "";
display: block;
margin-left: 0.4em;
opacity: 0.6;
}
nav.nav-desktop-dropdown .menu-item-has-children > a {
padding-right: 0.8em;
}
/* Submenu level 1 */
nav.nav-desktop-dropdown .sub-menu {
background-color: inherit;
display: none;
margin: 0;
position: absolute;
text-align: left;
top: 100%;
min-width: 330px;
z-index: 9999;
}
/* pseudo element used to tint the submenu lighter or darker than the inherited bg color */
nav.nav-desktop-dropdown .sub-menu::after {
background-color: rgba(21, 36, 43, 0.2);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
/* stop bg-color chain of inheritance after the first submenu */
nav.nav-desktop-dropdown .sub-menu li {
background-color: transparent;
}
/* Reverse color tinting for black/dkgray bgs */
nav.nav-desktop-dropdown.bg-dkgray .sub-menu::after,
.bg-dkgray nav.nav-desktop-dropdown .sub-menu::after {
background-color: rgba(255, 255, 255, 0.15);
}
/* show sub-menu on hover */
nav.nav-desktop-dropdown .menu-item-has-children:hover .sub-menu {
display: block;
}
nav.nav-desktop-dropdown .sub-menu a {
font-size: 1rem;
padding-top: 0.75em;
padding-bottom: 0.75em;
}
nav.nav-desktop-dropdown .sub-menu a:hover {
background-color: rgba(21, 36, 43, 0.2);
}
nav.nav-desktop-dropdown .sub-menu a::before {
content: "";
margin: 0;
}
/* Don't keep the parent highlighted when hovering within a submenu */
nav.nav-desktop-dropdown .sub-menu .menu-item-has-children:hover > a {
background-color: transparent;
}
nav.nav-desktop-dropdown .sub-menu .menu-item-has-children:hover > a:hover {
background-color: rgba(21, 36, 43, 0.2);
}
/* reverse colors for contrast on dkgray-trans */
nav.nav-desktop-dropdown.bg-dkgray .sub-menu a:hover,
nav.nav-desktop-dropdown.bg-dkgray .sub-menu .menu-item-has-children:hover > a:hover,
.bg-dkgray nav.nav-desktop-dropdown .sub-menu a:hover,
.bg-dkgray nav.nav-desktop-dropdown .sub-menu .menu-item-has-children:hover > a:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Remove the 'down' arrow on parent items within submenus */
nav.nav-desktop-dropdown .sub-menu .menu-item-has-children a::after {
display: none;
}
/* if a top-level dropdown menu item with a submenu is last or second-to-last
re-align the dropdown so it doesn't go offscreen */
nav.nav-desktop-dropdown .menu-item-has-children:nth-last-child(2) .sub-menu,
nav.nav-desktop-dropdown .menu-item-has-children:last-child .sub-menu {
left: auto;
right: 0;
}
/* Submenu level 2 */
nav.nav-desktop-dropdown .sub-menu .sub-menu {
border: 0 none;
background: transparent;
display: block;
padding-bottom: 1em;
padding-left: 0;
position: static;
}
nav.nav-desktop-dropdown .sub-menu .sub-menu::after {
display: none;
}
nav.nav-desktop-dropdown .sub-menu .sub-menu li {
background-color: transparent;
}
nav.nav-desktop-dropdown .sub-menu .sub-menu a {
font-size: 0.85em;
min-height: 2em;
padding: 0.3em 0.5em 0.3em 2em;
}
nav.nav-desktop-dropdown .sub-menu .sub-menu a:hover {
background-color: rgba(21, 36, 43, 0.2);
}
nav.nav-desktop-dropdown .sub-menu .sub-menu a::before {
content: "– ";
position: absolute;
left: 1em;
}
/* reverse colors for contrast on dkgray-trans */
nav.nav-desktop-dropdown.bg-dkgray .sub-menu .sub-menu a:hover,
nav.nav-desktop-dropdown.bg-dkgray .sub-menu .sub-menu li:hover > a,
.bg-dkgray nav.nav-desktop-dropdown .sub-menu .sub-menu a:hover,
.bg-dkgray nav.nav-desktop-dropdown .sub-menu .sub-menu li:hover > a {
background: rgba(255, 255, 255, 0.2);
}
/* .meta dropdown */
nav.nav-desktop-dropdown.meta .menu a {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.2em;
padding: 0.6em 1.2em;
text-transform: uppercase;
}
nav.nav-desktop-dropdown.meta .menu .current-menu-item a {
font-weight: bold;
}
}
.pagination {
clear: both;
padding: 2em 0;
}
.pagination:empty {
padding: 0;
}
.pagination .search-form {
margin: 0 2%;
max-width: 400px;
}
.pagination a.page-numbers,
.pagination .page-numbers.current {
background-color: #0f81e8;
border-radius: 2px;
color: #fff !important;
display: inline-block;
font-weight: bold;
margin: 0;
padding: 0.2em 0.5em;
text-decoration: none;
}
.page-numbers.current {
cursor: default;
opacity: 0.5;
}
/* Wordpress' built-in search */
.search-form {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 600px;
}
.bg-icon-search {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4yIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNjYuMSwwQzQ3LjQsMCwzMi4zLDE1LjEsMzIuMywzMy44YzAsNy45LDIuNywxNS4yLDcuMywyMWwtOC44LDguOEwyNy4zLDYwTDAuNCw4Ni44TDQsOTAuNGwwLDBsMi44LDIuOA0KCWw2LjQsNi40TDQwLDcyLjdsLTMuNS0zLjVsOC44LTguOGM1LjcsNC41LDEzLDcuMiwyMC44LDcuMmMxOC43LDAsMzMuOC0xNS4xLDMzLjgtMzMuOEM5OS45LDE1LjEsODQuNywwLDY2LjEsMHogTTY2LjEsNTYuNg0KCWMtMTIuNiwwLTIyLjgtMTAuMi0yMi44LTIyLjhDNDMuMywyMS4yLDUzLjUsMTEsNjYuMSwxMXMyMi44LDEwLjIsMjIuOCwyMi44Qzg4LjksNDYuNCw3OC42LDU2LjYsNjYuMSw1Ni42eiIvPg0KPC9zdmc+DQo=);
background-repeat: no-repeat;
}
.bg-icon-search-dark {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzE1MjQyQjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02NSwyLjdDNDcuNCwyLjcsMzMuMSwxNywzMy4xLDM0LjZjMCw4LDIuOSwxNS42LDguMywyMS41TDM2LDYxLjVsLTIuMy0yLjNMMy42LDg5LjRsOC45LDguOWwzMC4xLTMwLjEKCWwtMi4zLTIuM2w1LjctNS43YzUuNSw0LDEyLjEsNi4zLDE4LjksNi4zYzE3LjYsMCwzMS45LTE0LjMsMzEuOS0zMS45Qzk2LjksMTcsODIuNiwyLjcsNjUsMi43eiBNNjUsNTcuMgoJYy0xMi40LDAtMjIuNi0xMC4xLTIyLjYtMjIuNkM0Mi40LDIyLjIsNTIuNSwxMiw2NSwxMmMxMi40LDAsMjIuNiwxMC4xLDIyLjYsMjIuNkM4Ny42LDQ3LDc3LjQsNTcuMiw2NSw1Ny4yeiIvPgo8L3N2Zz4K);
background-repeat: no-repeat;
}
.header-search-form {
max-width: 150px;
width: 120px;
}
.header-search-form .search-form-input {
font-size: 0.8rem;
padding: 0.5rem;
}
.header-search-form .search-form-input-collapsible,
.search-form-input-collapsible {
background-position: 5px center;
background-size: 20px auto;
cursor: pointer;
padding-left: 32px;
padding-right: 0;
transition: all 0.5s ease 0s;
width: 30px;
}
.search-form-input-collapsible:focus {
border: 1px solid;
cursor: text;
width: 100%;
}
input.search-form-submit {
background-color: #0f81e8;
background-position: center;
background-repeat: no-repeat;
background-size: auto 60%;
color: #fff;
text-indent: -9999px;
width: 60px;
}
/*
Site Header
- Site header container
- Logo/site title
- Site Nav controls
- Custom header buttons (from site option)
- Header layouts (compact and left-aligned is default)
*/
/* ----- Site header container + general----- */
#site-header {
order: 0;
overflow: visible;
z-index: 1000;
}
.bg-on #site-header.bg-transparent {
background-image: linear-gradient(to bottom, rgba(23, 41, 46, 0.7) 0, rgba(23, 41, 46, 0) 100%);
}
#site-header-inner {
align-items: stretch;
background-color: inherit;
display: flex;
flex-wrap: nowrap;
padding: 0;
}
.site-header-item {
align-items: center;
display: flex;
flex: 0 1 auto;
font-size: 0.85em;
height: auto;
min-height: 2.5rem;
min-height: calc(2rem + 1vh + 0.55vw);
margin: 0 0.5rem;
order: 10;
}
.site-header-divider {
font-size: 0;
min-height: 0;
height: 0;
margin-left: auto;
order: 20;
width: 0;
}
/* ----- Logo/site title ----- */
#site-title {
flex: 1 1 auto;
font-size: 1.1rem;
order: 1;
margin-bottom: 0;
}
#site-title-link.logo-image {
color: inherit;
display: inline-block;
line-height: 1;
margin: 0;
padding: 0;
}
#site-title-link.logo-image img {
margin: 0.3rem;
}
.bg-white #site-title-link.logo,
.bg-white #site-title-link.logo:hover {
color: inherit;
}
#site-title-link.logo-image img {
display: block;
max-height: 6rem;
max-width: 15rem;
}
/* ----- Site Nav Controls ----- */
/* CSS-only hamburger menu w/ borders */
#site-nav-toggle {
cursor: pointer;
font-size: 1.3em;
line-height: 1.6;
margin-bottom: 0;
margin-top: 0;
order: 5;
position: relative;
min-width: 1.3em;
text-decoration: none;
width: auto;
z-index: 1000;
}
#site-nav-toggle-icon {
height: 1em;
width: 1em;
}
#site-nav-toggle-text {
display: none;
font-size: 0.85em;
line-height: 2.3;
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
#site-nav-toggle-text {
display: inline-block;
}
}
@media only screen and (min-width: 950px) {
#site-nav-toggle.nav-desktop-dropdown,
#site-nav-toggle.nav-desktop-list {
display: none;
}
}
@media only screen and (pointer: fine) {
#site-nav-toggle {
font-size: 1rem;
}
}
/*
Hide site nav on mobile, to be revealed by 'burger menu
Show when menu is set to 'dropdown' on a larger screen
*/
#site-nav {
display: none;
order: 5;
}
@media only screen and (min-width: 950px) {
#site-nav.nav-desktop-dropdown {
display: flex;
}
}
/* ----- Custom header buttons ----- */
#header-buttons-container {
display: none;
flex: 0 0 auto;
padding: 0.5em;
order: 9;
}
@media only screen and (min-width: 680px) {
#header-buttons-container {
display: flex;
}
}
/* ----- Site header layouts ----- */
/* Headless: no logo, just hamburger nav */
.site-header-layout-headless #site-title {
display: none;
}
.site-header-layout-headless #site-nav-toggle {
margin-left: auto;
}
.site-header-layout-headless .site-header-divider {
margin: 0;
}
/* Logo left and dropdown nav right */
.site-header-layout-logo_left-compact #site-header-inner {
padding: 0 0.5vw;
}
.site-header-layout-logo_left-compact .site-header-divider {
display: block;
order: 4;
}
@media only screen and (min-width: 950px) {
.site-header-layout-logo_left-compact #site-title {
white-space: nowrap;
}
.site-header-layout-logo_left-compact #site-nav.nav-desktop-dropdown,
.site-header-layout-logo_left-compact #site-nav.nav-desktop-dropdown .section-inner,
.site-header-layout-logo_left-compact #site-nav.nav-desktop-dropdown .menu,
.site-header-layout-logo_left-compact #site-nav.nav-desktop-dropdown .menu > li {
background-color: inherit;
} /* if dropdown is inside header bar, inherit the header bg + pass it down to children */
.site-header-layout-logo_left-compact #site-nav.nav-desktop-dropdown,
.site-header-layout-logo_left-compact #site-nav.nav-desktop-dropdown a {
color: currentColor;
} /* if dropdown is inside header bar, inherit the header text color + pass it down to children */
/* transparent bg exception */
.bg-transparent.site-header-layout-logo_left-compact #site-header-inner {
background-color: transparent;
} /* break the chain of background color inheritance */
.bg-transparent.site-header-layout-logo_left-compact #site-nav.nav-desktop-dropdown .menu > li:hover {
background-color: rgba(21, 36, 43, 0.75);
}
}
/* Logo center + nav icon left (single row)*/
.site-header-layout-logo_center-compact #site-title {
align-items: flex-start;
flex: 0 0 100%;
min-height: 0;
height: 0;
left: 0;
margin: 0;
padding: 0;
order: 1;
overflow: visible;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
.site-header-layout-logo_center-compact #site-title-link {
align-items: center;
display: flex;
height: calc(2rem + 1vh + 0.55vw);
margin: 0 auto;
max-width: 70vw;
}
.site-header-layout-logo_center-compact #site-nav {
display: none;
}
.site-header-layout-logo_center-compact #site-nav-toggle {
order: 2;
}
.site-header-layout-logo_center-compact .site-header-divider {
order: 5;
}
.site-header-layout-logo_center-compact #header-buttons-container {
order: 8;
}
/* Logo center, stacked dropdown nav (two rows)*/
.site-header-layout-logo_center-stacked #site-title {
align-items: center;
display: flex;
height: auto;
justify-content: center;
margin: 0;
width: 100%;
}
.site-header-layout-logo_center-stacked #site-nav {
display: none;
margin: 0;
padding-left: 1.4vw;
order: 15;
width: 100%;
}
.site-header-layout-logo_center-stacked #site-nav-toggle {
order: 0;
}
.site-header-layout-logo_center-stacked .site-header-divider {
display: block;
order: 7;
}
@media only screen and (min-width: 680px) {
.site-header-layout-logo_center-stacked #header-buttons-container {
display: flex;
position: absolute;
right: 0;
}
}
@media only screen and (min-width: 950px) {
.site-header-layout-logo_center-stacked #site-header-inner {
flex-wrap: wrap;
}
.site-header-layout-logo_center-stacked #site-nav-toggle {
display: none;
}
.site-header-layout-logo_center-stacked #site-nav {
display: flex;
}
.site-header-layout-logo_center-stacked #site-language-nav-toggle {
right: 0;
position: absolute;
}
.site-header-layout-logo_center-stacked #site-nav.nav-desktop-dropdown {
justify-content: center;
}
}
/* Non-US Site Footer Styles */
#site-footer a {
text-decoration: none;
}
#site-footer .sub-menu a {
display: inline-block;
font-size: 0.9em;
font-weight: 500;
}
#site-footer .widgettitle {
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
}
/* US Site Footer Styles */
#site-footer.refresh hr.border-solid {
border-style: solid;
}
#site-footer.refresh .menu-title {
font-size: 18px;
}
#site-footer.refresh li a {
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
line-height: 1.2;
}
#site-footer.refresh a {
font-weight: normal;
text-decoration: none;
}
#site-footer.refresh a:hover {
color: rgba(255, 255, 255, 0.3);
}
#site-footer.refresh .widget {
overflow: visible;
padding: 0;
}
#site-footer.refresh .widgettitle {
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
}
#site-footer.refresh .sub-menu a {
color: #17292e;
display: inline-block;
font-size: 14px;
font-weight: 500;
}
#site-footer.refresh .sub-menu a:hover {
color: rgba(23, 41, 46, 0.6);
}
#site-footer.refresh .button-dot {
background-color: transparent;
}
#site-footer.refresh img.charity-navigator {
margin-top: -0.75rem;
height: 60px;
}
#site-footer.refresh p.text-small {
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
}
#site-footer.refresh .menu {
align-items: center;
background-color: inherit;
display: flex;
}
#site-footer.refresh .menu li a {
padding: 0.5rem 1rem;
}
#site-footer.refresh .menu .menu-item-has-children > a {
align-items: center;
border-bottom: 0 none;
display: flex;
font-size: 14px;
min-height: 2.8rem;
line-height: 1.2;
padding: 0.5rem 1rem;
}
#site-footer.refresh .menu .menu-item-has-children > a::after {
border-top: 0.4em solid;
border-left: 0.28em solid transparent;
border-right: 0.28em solid transparent;
content: "";
display: block;
margin-left: 0.4em;
opacity: 0.6;
}
#site-footer.refresh .menu .sub-menu {
background-color: inherit;
display: none;
margin: 0;
position: absolute;
text-align: left;
z-index: 1;
}
#site-footer.refresh .menu .menu-item-has-children:hover .sub-menu {
background-color: #fff !important;
display: block !important;
}
@media only screen and (min-width: 680px) {
.padding-right-tablet {
padding-right: 1.1rem !important;
}
}
/* Layout utlities */
/* Sections */
#container {
/* flex allows for:
- columned sections to be equal height, regardless of content
- re-ordering of sections with 'order' property */
display: flex;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
min-width: 15rem;
z-index: 5;
}
/* Site Optons */
.header-hide {
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
}
.two-col,
.three-col,
.four-col {
columns: 1;
column-gap: 0;
column-rule: 1px solid rgba(21, 36, 43, 0.2);
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
.two-col,
.three-col,
.four-col {
columns: 2;
column-gap: 4em;
}
.right,
.float-right {
float: right;
}
.float-left {
float: left;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.two-col {
columns: 2;
column-gap: 5em;
}
.three-col {
columns: 3;
column-gap: 4em;
}
.four-col {
columns: 4;
column-gap: 3em;
}
}
/* Styles for for the 'single' view of individual, standard posts/pages */
/* Shared between posts and pages */
.bg-off #page-header {
color: initial;
}
/* Single Blog Posts */
.bg-on #post-subtitle {
text-shadow: 0 0 2em rgba(21, 36, 43, 0.9);
}
/* Pages */
/*
Horizontally overflowing content area
*/
.horizontal-scroll {
background-attachment: local, local, scroll, scroll;
background-image: linear-gradient(to right, rgba(240, 248, 253, 0) 0%, rgb(240, 248, 253) 50%, #f0f8fd 100%), linear-gradient(to left, rgba(240, 248, 253, 0) 0%, rgb(240, 248, 253) 50%, #f0f8fd 100%), radial-gradient(farthest-side at right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 21, 30, 0) 100%), radial-gradient(farthest-side at left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 21, 30, 0) 100%);
background-position: right center, left center, right center, left center;
background-repeat: no-repeat;
background-size: 3vh 80%, 3vh 80%, 1.5vh 80%, 1.5vh 80%;
display: flex;
flex-wrap: wrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
position: relative;
touch-action: pan-x;
}
.horizontal-scroll-inner {
display: flex;
flex-wrap: nowrap;
padding: 2rem;
padding: calc(1.5rem + 3vw);
z-index: 1;
}
/* horizontal cards */
.horizontal-scroll-inner > * {
flex: 1 1 70vw;
margin-right: 2vw;
min-width: 17em;
max-width: 30em;
}
.horizontal-scroll-nav-controls {
display: block;
height: 100%;
left: 0;
pointer-events: none;
position: sticky;
top: 50%;
width: 100%;
z-index: 10;
}
.horizontal-scroll-nav-control {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.2);
cursor: pointer;
color: rgba(21, 36, 43, 0.4);
display: block;
height: 4em;
margin-top: -2em;
pointer-events: all;
position: absolute;
text-indent: -9999px;
transition: all 0.3s;
width: 3em;
}
.horizontal-scroll-nav-control::after {
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid;
content: "";
height: 0;
left: 50%;
margin: -10px 0 0 -7px;
position: absolute;
top: 50%;
width: 0;
}
.horizontal-scroll-nav-control:not(.inactive):hover,
.horizontal-scroll-nav-control:not(.inactive):active {
border-color: rgba(0, 0, 0, 0.3);
color: rgba(21, 36, 43, 0.6);
transform: scale(1.1);
}
.horizontal-scroll-nav-control.inactive {
opacity: 0;
cursor: default;
}
.horizontal-scroll-nav-control-back {
border-radius: 0 3px 3px 0;
left: -1px;
}
.horizontal-scroll-nav-control-back::after {
transform: rotate(180deg);
transform-origin: 5px 10px;
}
.horizontal-scroll-nav-control-forward {
border-radius: 3px 0 0 3px;
right: -1px;
}
@media screen and (min-width: 950px) {
/* horizontal cards */
.horizontal-scroll-inner > * {
flex-basis: 35vw;
min-width: 17em;
}
.horizontal-scroll-nav-control-back {
border-radius: 3px;
left: 2vw;
}
.horizontal-scroll-nav-control-forward {
border-radius: 3px;
right: 2vw;
}
}
/*
Sections
Styles for the full-width page blocks that baseline is built on.
*/
.section {
background-position: center center;
background-size: cover;
order: 5;
position: relative;
width: 100%;
z-index: 2;
}
.section-inner {
justify-content: inherit;
position: relative;
}
.section-inner,
.section.expando .expando-link {
margin: 0 auto;
}
.section-inner::after,
.clearfix::after {
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
/* Specialized section classes */
.section-order-beforeheader {
order: -5;
}
.section.section-position-outer .section-inner {
position: static;
}
.title-section-60,
.title-section {
align-items: center;
display: flex;
min-height: min-content;
height: auto;
height: calc(100vh - 25px);
max-height: 40rem;
justify-content: center;
width: 100%;
}
.title-section-60 {
height: calc(100vh - 60px);
}
.title-section .section-inner,
.title-section-60 .section-inner {
width: 100%;
}
.title-section-60.refresh.homepage {
height: calc(100vh - 260px);
max-height: unset;
}
/* Width */
.width-skinny .section-inner {
max-width: 35rem;
}
.width-narrow .section-inner {
max-width: 38rem;
}
.width-normal .section-inner {
max-width: 42rem;
}
.width-medium .section-inner {
max-width: 48rem;
}
.width-wide .section-inner {
max-width: 56rem;
}
.width-extrawide .section-inner {
max-width: 68rem;
}
/* Site background */
/* .bg-on is a WP variable that's active when a fullscreen background image is present.
Combines a dark bg color with a semi-transparent image to darken the image,
increasing text contrast. */
.bg-on {
background-color: #17292e;
}
#body-mobile-background {
background: center/cover no-repeat scroll transparent;
display: block;
height: 100vh;
left: 0;
opacity: 0.6;
pointer-events: none;
position: fixed;
top: 0;
transition: height 2.2s ease-out;
width: 100vw;
z-index: 1;
}
.bg-position-bottom {
background-position: center bottom;
}
.bg-position-bottomright {
background-position: right bottom;
}
.bg-position-bottomleft {
background-position: left bottom;
}
.bg-position-top {
background-position: center top;
}
.bg-position-topright {
background-position: right top;
}
.bg-position-topleft {
background-position: left top;
}
.bg-position-right {
background-position: right center;
}
.bg-position-left {
background-position: left center;
}
@media screen and (min-width: 950px) {
.bg-attach-fixed {
background-attachment: fixed;
}
}
.bg-repeat-none {
background-repeat: no-repeat;
}
.bg-repeat-x {
background-repeat: repeat-x;
}
.bg-repeat-y {
background-repeat: repeat-y;
}
.bg-repeat-both {
background-repeat: repeat;
}
.bg-size-cover {
background-size: cover;
}
.bg-size-full-width {
background-size: 100% auto;
}
.bg-size-normal {
background-size: auto;
}
.section-img-credit {
display: none;
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.section-img-credit {
border-radius: 2px;
bottom: 10px;
color: #fff !important;
text-align: right !important;
text-shadow: 2px 1px 1px #000;
display: block;
font-size: 0.75rem;
opacity: 0.6;
position: absolute;
right: 10px;
max-width: 70vw;
}
.page-bg-img-credit {
border-radius: 2px;
display: inline-block;
padding: 2px 5px;
position: relative;
}
.section-img-credit:hover,
.page-bg-img-credit:hover {
background: #17292e;
background: rgba(30, 40, 50, 0.8);
opacity: 1;
}
.section-img-credit a,
.page-bg-img-credit a,
a.page-bg-img-credit {
color: #fff !important;
font-weight: normal;
text-decoration: none;
}
}
/* Spacing - padding, margin and other spacing styles */
.margin-none,
.no-margin {
margin: 0 !important;
}
.padding-none {
padding: 0;
padding: 0;
}
.padding-tiny {
padding: 17px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.padding-small {
padding: 20px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.padding-normal {
padding: 47px 27px;
padding: calc(3.78125vh + 1.71875vw + 5px) calc(1.71875vh + 3.78125vw + 5px);
}
.padding-medium {
padding: 60px 30px;
padding: calc(5.15625vh + 2.34375vw + 0px) calc(2.34375vh + 5.15625vw + 0px);
}
.padding-large {
padding: 80px 40px;
padding: calc(8.9375vh + 4.0625vw + -20px) calc(4.0625vh + 8.9375vw + -20px);
}
.padding-huge {
padding: 108px 40px;
padding: calc(11vh + 5vw + -30px) calc(5vh + 11vw + -30px);
}
.padding-gigantic {
padding: 150px 48px;
padding: calc(15.125vh + 6.875vw + -38px) calc(6.875vh + 15.125vw + -38px);
}
@media screen and (min-width: 0px) and (max-width: 680px) {
.mobile-padding-none {
padding: 0;
padding: 0;
}
.mobile-padding-tiny {
padding: 17px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.mobile-padding-small {
padding: 20px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.mobile-padding-normal {
padding: 47px 27px;
padding: calc(3.78125vh + 1.71875vw + 5px) calc(1.71875vh + 3.78125vw + 5px);
}
.mobile-padding-medium {
padding: 60px 30px;
padding: calc(5.15625vh + 2.34375vw + 0px) calc(2.34375vh + 5.15625vw + 0px);
}
.mobile-padding-large {
padding: 80px 40px;
padding: calc(8.9375vh + 4.0625vw + -20px) calc(4.0625vh + 8.9375vw + -20px);
}
.mobile-padding-huge {
padding: 108px 40px;
padding: calc(11vh + 5vw + -30px) calc(5vh + 11vw + -30px);
}
.mobile-padding-gigantic {
padding: 150px 48px;
padding: calc(15.125vh + 6.875vw + -38px) calc(6.875vh + 15.125vw + -38px);
}
}
@media screen and (min-width: 680px) and (max-width: 950px) {
.tablet-padding-none {
padding: 0;
padding: 0;
}
.tablet-padding-tiny {
padding: 17px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.tablet-padding-small {
padding: 20px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.tablet-padding-normal {
padding: 47px 27px;
padding: calc(3.78125vh + 1.71875vw + 5px) calc(1.71875vh + 3.78125vw + 5px);
}
.tablet-padding-medium {
padding: 60px 30px;
padding: calc(5.15625vh + 2.34375vw + 0px) calc(2.34375vh + 5.15625vw + 0px);
}
.tablet-padding-large {
padding: 80px 40px;
padding: calc(8.9375vh + 4.0625vw + -20px) calc(4.0625vh + 8.9375vw + -20px);
}
.tablet-padding-huge {
padding: 108px 40px;
padding: calc(11vh + 5vw + -30px) calc(5vh + 11vw + -30px);
}
.tablet-padding-gigantic {
padding: 150px 48px;
padding: calc(15.125vh + 6.875vw + -38px) calc(6.875vh + 15.125vw + -38px);
}
}
@media screen and (min-width: 950px) and (max-width: 999999999px) {
.desktop-padding-none {
padding: 0;
padding: 0;
}
.desktop-padding-tiny {
padding: 17px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.desktop-padding-small {
padding: 20px;
padding: calc(1.375vh + 0.625vw + 2px) calc(0.625vh + 1.375vw + 2px);
}
.desktop-padding-normal {
padding: 47px 27px;
padding: calc(3.78125vh + 1.71875vw + 5px) calc(1.71875vh + 3.78125vw + 5px);
}
.desktop-padding-medium {
padding: 60px 30px;
padding: calc(5.15625vh + 2.34375vw + 0px) calc(2.34375vh + 5.15625vw + 0px);
}
.desktop-padding-large {
padding: 80px 40px;
padding: calc(8.9375vh + 4.0625vw + -20px) calc(4.0625vh + 8.9375vw + -20px);
}
.desktop-padding-huge {
padding: 108px 40px;
padding: calc(11vh + 5vw + -30px) calc(5vh + 11vw + -30px);
}
.desktop-padding-gigantic {
padding: 150px 48px;
padding: calc(15.125vh + 6.875vw + -38px) calc(6.875vh + 15.125vw + -38px);
}
}
/* Direction-specific margin and padding */
.margin-top-none {
margin-top: 0 !important;
}
.margin-right-none {
margin-right: 0 !important;
}
.margin-bottom-none {
margin-bottom: 0 !important;
}
.margin-left-none {
margin-left: 0 !important;
}
.margin-top-small {
margin-top: 0.4rem;
}
.margin-right-small {
margin-right: 0.4rem;
}
.margin-bottom-small {
margin-bottom: 0.4rem;
}
.margin-left-small {
margin-left: 0.4rem;
}
.margin-top-normal {
margin-top: 0.7rem;
}
.margin-right-normal {
margin-right: 0.7rem;
}
.margin-bottom-normal {
margin-bottom: 0.7rem;
}
.margin-left-normal {
margin-left: 0.7rem;
}
.margin-top-medium {
margin-top: 1.2rem;
}
.margin-right-medium {
margin-right: 1.2rem;
}
.margin-bottom-medium {
margin-bottom: 1.2rem;
}
.margin-left-medium {
margin-left: 1.2rem;
}
.margin-top-large {
margin-top: 3rem;
}
.margin-right-large {
margin-right: 3rem;
}
.margin-bottom-large {
margin-bottom: 3rem;
}
.margin-left-large {
margin-left: 3rem;
}
.margin-top-xlarge {
margin-top: 4rem;
}
.margin-right-xlarge {
margin-right: 4rem;
}
.margin-bottom-xlarge {
margin-bottom: 4rem;
}
.margin-left-xlarge {
margin-left: 4rem;
}
.margin-top-xxlarge {
margin-top: 6rem;
}
.margin-right-xxlarge {
margin-right: 6rem;
}
.margin-bottom-xxlarge {
margin-bottom: 6rem;
}
.margin-left-xxlarge {
margin-left: 6rem;
}
.padding-top-none {
padding-top: 0 !important;
}
.padding-right-none {
padding-right: 0 !important;
}
.padding-bottom-none {
padding-bottom: 0 !important;
}
.padding-left-none {
padding-left: 0 !important;
}
.padding-top-small {
padding-top: 0.4rem;
}
.padding-right-small {
padding-right: 0.4rem;
}
.padding-bottom-small {
padding-bottom: 0.4rem;
}
.padding-left-small {
padding-left: 0.4rem;
}
.padding-top-normal {
padding-top: 0.7rem;
}
.padding-right-normal {
padding-right: 0.7rem;
}
.padding-bottom-normal {
padding-bottom: 0.7rem;
}
.padding-left-normal {
padding-left: 0.7rem;
}
.padding-top-medium {
padding-top: 1.2rem;
}
.padding-right-medium {
padding-right: 1.2rem;
}
.padding-bottom-medium {
padding-bottom: 1.2rem;
}
.padding-left-medium {
padding-left: 1.2rem;
}
.padding-top-large {
padding-top: 3rem;
}
.padding-right-large {
padding-right: 3rem;
}
.padding-bottom-large {
padding-bottom: 3rem;
}
.padding-left-large {
padding-left: 3rem;
}
.padding-top-xlarge {
padding-top: 4rem;
}
.padding-right-xlarge {
padding-right: 4rem;
}
.padding-bottom-xlarge {
padding-bottom: 4rem;
}
.padding-left-xlarge {
padding-left: 4rem;
}
.padding-top-xxlarge {
padding-top: 6rem;
}
.padding-right-xxlarge {
padding-right: 6rem;
}
.padding-bottom-xxlarge {
padding-bottom: 6rem;
}
.padding-left-xxlarge {
padding-left: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 680px) {
.mobile-margin-top-none {
margin-top: 0 !important;
}
.mobile-margin-right-none {
margin-right: 0 !important;
}
.mobile-margin-bottom-none {
margin-bottom: 0 !important;
}
.mobile-margin-left-none {
margin-left: 0 !important;
}
.mobile-margin-top-small {
margin-top: 0.4rem;
}
.mobile-margin-right-small {
margin-right: 0.4rem;
}
.mobile-margin-bottom-small {
margin-bottom: 0.4rem;
}
.mobile-margin-left-small {
margin-left: 0.4rem;
}
.mobile-margin-top-normal {
margin-top: 0.7rem;
}
.mobile-margin-right-normal {
margin-right: 0.7rem;
}
.mobile-margin-bottom-normal {
margin-bottom: 0.7rem;
}
.mobile-margin-left-normal {
margin-left: 0.7rem;
}
.mobile-margin-top-medium {
margin-top: 1.2rem;
}
.mobile-margin-right-medium {
margin-right: 1.2rem;
}
.mobile-margin-bottom-medium {
margin-bottom: 1.2rem;
}
.mobile-margin-left-medium {
margin-left: 1.2rem;
}
.mobile-margin-top-large {
margin-top: 3rem;
}
.mobile-margin-right-large {
margin-right: 3rem;
}
.mobile-margin-bottom-large {
margin-bottom: 3rem;
}
.mobile-margin-left-large {
margin-left: 3rem;
}
.mobile-margin-top-xlarge {
margin-top: 4rem;
}
.mobile-margin-right-xlarge {
margin-right: 4rem;
}
.mobile-margin-bottom-xlarge {
margin-bottom: 4rem;
}
.mobile-margin-left-xlarge {
margin-left: 4rem;
}
.mobile-margin-top-xxlarge {
margin-top: 6rem;
}
.mobile-margin-right-xxlarge {
margin-right: 6rem;
}
.mobile-margin-bottom-xxlarge {
margin-bottom: 6rem;
}
.mobile-margin-left-xxlarge {
margin-left: 6rem;
}
.mobile-padding-top-none {
padding-top: 0 !important;
}
.mobile-padding-right-none {
padding-right: 0 !important;
}
.mobile-padding-bottom-none {
padding-bottom: 0 !important;
}
.mobile-padding-left-none {
padding-left: 0 !important;
}
.mobile-padding-top-small {
padding-top: 0.4rem;
}
.mobile-padding-right-small {
padding-right: 0.4rem;
}
.mobile-padding-bottom-small {
padding-bottom: 0.4rem;
}
.mobile-padding-left-small {
padding-left: 0.4rem;
}
.mobile-padding-top-normal {
padding-top: 0.7rem;
}
.mobile-padding-right-normal {
padding-right: 0.7rem;
}
.mobile-padding-bottom-normal {
padding-bottom: 0.7rem;
}
.mobile-padding-left-normal {
padding-left: 0.7rem;
}
.mobile-padding-top-medium {
padding-top: 1.2rem;
}
.mobile-padding-right-medium {
padding-right: 1.2rem;
}
.mobile-padding-bottom-medium {
padding-bottom: 1.2rem;
}
.mobile-padding-left-medium {
padding-left: 1.2rem;
}
.mobile-padding-top-large {
padding-top: 3rem;
}
.mobile-padding-right-large {
padding-right: 3rem;
}
.mobile-padding-bottom-large {
padding-bottom: 3rem;
}
.mobile-padding-left-large {
padding-left: 3rem;
}
.mobile-padding-top-xlarge {
padding-top: 4rem;
}
.mobile-padding-right-xlarge {
padding-right: 4rem;
}
.mobile-padding-bottom-xlarge {
padding-bottom: 4rem;
}
.mobile-padding-left-xlarge {
padding-left: 4rem;
}
.mobile-padding-top-xxlarge {
padding-top: 6rem;
}
.mobile-padding-right-xxlarge {
padding-right: 6rem;
}
.mobile-padding-bottom-xxlarge {
padding-bottom: 6rem;
}
.mobile-padding-left-xxlarge {
padding-left: 6rem;
}
}
@media screen and (min-width: 680px) and (max-width: 950px) {
.tablet-margin-top-none {
margin-top: 0 !important;
}
.tablet-margin-right-none {
margin-right: 0 !important;
}
.tablet-margin-bottom-none {
margin-bottom: 0 !important;
}
.tablet-margin-left-none {
margin-left: 0 !important;
}
.tablet-margin-top-small {
margin-top: 0.4rem;
}
.tablet-margin-right-small {
margin-right: 0.4rem;
}
.tablet-margin-bottom-small {
margin-bottom: 0.4rem;
}
.tablet-margin-left-small {
margin-left: 0.4rem;
}
.tablet-margin-top-normal {
margin-top: 0.7rem;
}
.tablet-margin-right-normal {
margin-right: 0.7rem;
}
.tablet-margin-bottom-normal {
margin-bottom: 0.7rem;
}
.tablet-margin-left-normal {
margin-left: 0.7rem;
}
.tablet-margin-top-medium {
margin-top: 1.2rem;
}
.tablet-margin-right-medium {
margin-right: 1.2rem;
}
.tablet-margin-bottom-medium {
margin-bottom: 1.2rem;
}
.tablet-margin-left-medium {
margin-left: 1.2rem;
}
.tablet-margin-top-large {
margin-top: 3rem;
}
.tablet-margin-right-large {
margin-right: 3rem;
}
.tablet-margin-bottom-large {
margin-bottom: 3rem;
}
.tablet-margin-left-large {
margin-left: 3rem;
}
.tablet-margin-top-xlarge {
margin-top: 4rem;
}
.tablet-margin-right-xlarge {
margin-right: 4rem;
}
.tablet-margin-bottom-xlarge {
margin-bottom: 4rem;
}
.tablet-margin-left-xlarge {
margin-left: 4rem;
}
.tablet-margin-top-xxlarge {
margin-top: 6rem;
}
.tablet-margin-right-xxlarge {
margin-right: 6rem;
}
.tablet-margin-bottom-xxlarge {
margin-bottom: 6rem;
}
.tablet-margin-left-xxlarge {
margin-left: 6rem;
}
.tablet-padding-top-none {
padding-top: 0 !important;
}
.tablet-padding-right-none {
padding-right: 0 !important;
}
.tablet-padding-bottom-none {
padding-bottom: 0 !important;
}
.tablet-padding-left-none {
padding-left: 0 !important;
}
.tablet-padding-top-small {
padding-top: 0.4rem;
}
.tablet-padding-right-small {
padding-right: 0.4rem;
}
.tablet-padding-bottom-small {
padding-bottom: 0.4rem;
}
.tablet-padding-left-small {
padding-left: 0.4rem;
}
.tablet-padding-top-normal {
padding-top: 0.7rem;
}
.tablet-padding-right-normal {
padding-right: 0.7rem;
}
.tablet-padding-bottom-normal {
padding-bottom: 0.7rem;
}
.tablet-padding-left-normal {
padding-left: 0.7rem;
}
.tablet-padding-top-medium {
padding-top: 1.2rem;
}
.tablet-padding-right-medium {
padding-right: 1.2rem;
}
.tablet-padding-bottom-medium {
padding-bottom: 1.2rem;
}
.tablet-padding-left-medium {
padding-left: 1.2rem;
}
.tablet-padding-top-large {
padding-top: 3rem;
}
.tablet-padding-right-large {
padding-right: 3rem;
}
.tablet-padding-bottom-large {
padding-bottom: 3rem;
}
.tablet-padding-left-large {
padding-left: 3rem;
}
.tablet-padding-top-xlarge {
padding-top: 4rem;
}
.tablet-padding-right-xlarge {
padding-right: 4rem;
}
.tablet-padding-bottom-xlarge {
padding-bottom: 4rem;
}
.tablet-padding-left-xlarge {
padding-left: 4rem;
}
.tablet-padding-top-xxlarge {
padding-top: 6rem;
}
.tablet-padding-right-xxlarge {
padding-right: 6rem;
}
.tablet-padding-bottom-xxlarge {
padding-bottom: 6rem;
}
.tablet-padding-left-xxlarge {
padding-left: 6rem;
}
}
@media screen and (min-width: 950px) and (max-width: 999999999px) {
.desktop-margin-top-none {
margin-top: 0 !important;
}
.desktop-margin-right-none {
margin-right: 0 !important;
}
.desktop-margin-bottom-none {
margin-bottom: 0 !important;
}
.desktop-margin-left-none {
margin-left: 0 !important;
}
.desktop-margin-top-small {
margin-top: 0.4rem;
}
.desktop-margin-right-small {
margin-right: 0.4rem;
}
.desktop-margin-bottom-small {
margin-bottom: 0.4rem;
}
.desktop-margin-left-small {
margin-left: 0.4rem;
}
.desktop-margin-top-normal {
margin-top: 0.7rem;
}
.desktop-margin-right-normal {
margin-right: 0.7rem;
}
.desktop-margin-bottom-normal {
margin-bottom: 0.7rem;
}
.desktop-margin-left-normal {
margin-left: 0.7rem;
}
.desktop-margin-top-medium {
margin-top: 1.2rem;
}
.desktop-margin-right-medium {
margin-right: 1.2rem;
}
.desktop-margin-bottom-medium {
margin-bottom: 1.2rem;
}
.desktop-margin-left-medium {
margin-left: 1.2rem;
}
.desktop-margin-top-large {
margin-top: 3rem;
}
.desktop-margin-right-large {
margin-right: 3rem;
}
.desktop-margin-bottom-large {
margin-bottom: 3rem;
}
.desktop-margin-left-large {
margin-left: 3rem;
}
.desktop-margin-top-xlarge {
margin-top: 4rem;
}
.desktop-margin-right-xlarge {
margin-right: 4rem;
}
.desktop-margin-bottom-xlarge {
margin-bottom: 4rem;
}
.desktop-margin-left-xlarge {
margin-left: 4rem;
}
.desktop-margin-top-xxlarge {
margin-top: 6rem;
}
.desktop-margin-right-xxlarge {
margin-right: 6rem;
}
.desktop-margin-bottom-xxlarge {
margin-bottom: 6rem;
}
.desktop-margin-left-xxlarge {
margin-left: 6rem;
}
.desktop-padding-top-none {
padding-top: 0 !important;
}
.desktop-padding-right-none {
padding-right: 0 !important;
}
.desktop-padding-bottom-none {
padding-bottom: 0 !important;
}
.desktop-padding-left-none {
padding-left: 0 !important;
}
.desktop-padding-top-small {
padding-top: 0.4rem;
}
.desktop-padding-right-small {
padding-right: 0.4rem;
}
.desktop-padding-bottom-small {
padding-bottom: 0.4rem;
}
.desktop-padding-left-small {
padding-left: 0.4rem;
}
.desktop-padding-top-normal {
padding-top: 0.7rem;
}
.desktop-padding-right-normal {
padding-right: 0.7rem;
}
.desktop-padding-bottom-normal {
padding-bottom: 0.7rem;
}
.desktop-padding-left-normal {
padding-left: 0.7rem;
}
.desktop-padding-top-medium {
padding-top: 1.2rem;
}
.desktop-padding-right-medium {
padding-right: 1.2rem;
}
.desktop-padding-bottom-medium {
padding-bottom: 1.2rem;
}
.desktop-padding-left-medium {
padding-left: 1.2rem;
}
.desktop-padding-top-large {
padding-top: 3rem;
}
.desktop-padding-right-large {
padding-right: 3rem;
}
.desktop-padding-bottom-large {
padding-bottom: 3rem;
}
.desktop-padding-left-large {
padding-left: 3rem;
}
.desktop-padding-top-xlarge {
padding-top: 4rem;
}
.desktop-padding-right-xlarge {
padding-right: 4rem;
}
.desktop-padding-bottom-xlarge {
padding-bottom: 4rem;
}
.desktop-padding-left-xlarge {
padding-left: 4rem;
}
.desktop-padding-top-xxlarge {
padding-top: 6rem;
}
.desktop-padding-right-xxlarge {
padding-right: 6rem;
}
.desktop-padding-bottom-xxlarge {
padding-bottom: 6rem;
}
.desktop-padding-left-xxlarge {
padding-left: 6rem;
}
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
.mobile-column-2_5,
.mobile-column-3_3,
.mobile-column-5,
.mobile-column-6_6,
.mobile-column-7_5 {
float: left;
position: relative;
}
.mobile-column-2_5 {
width: 25%;
}
.mobile-column-3_3 {
width: 33.333%;
}
.mobile-column-5 {
width: 50%;
}
.mobile-column-6_6 {
width: 66.666%;
}
.mobile-column-7_5 {
width: 75%;
}
}
/* Tablet Only */
@media only screen and (min-width: 680px) and (max-width: 950px) {
.tablet-column-2_5,
.tablet-column-3,
.tablet-column-3_3,
.tablet-column-4,
.tablet-column-5,
.tablet-column-6,
.tablet-column-6_6,
.tablet-column-7,
.tablet-column-7_5 {
float: left;
position: relative;
z-index: 3;
}
.tablet-column-2_5 {
width: 25%;
}
.tablet-column-3_3 {
width: 33.333%;
}
.tablet-column-4 {
width: 40%;
}
.tablet-column-5 {
width: 50%;
}
.tablet-column-6 {
width: 60%;
}
.tablet-column-6_6 {
width: 66.666%;
}
.tablet-column-7_5 {
width: 75%;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
/* Utility classes - desktop*/
.desktop-column-1,
.desktop-column-2,
.desktop-column-2_5,
.desktop-column-3,
.desktop-column-3_3,
.desktop-column-4,
.desktop-column-5,
.desktop-column-6,
.desktop-column-6_6,
.desktop-column-7,
.desktop-column-7_5,
.desktop-column-8,
.desktop-column-9 {
float: left;
position: relative;
z-index: 3;
}
.desktop-column-1 {
width: 10%;
}
.desktop-column-2 {
width: 20%;
}
.desktop-column-2_5 {
width: 25%;
}
.desktop-column-3 {
width: 30%;
}
.desktop-column-3_3 {
width: 33.333%;
}
.desktop-column-4 {
width: 40%;
}
.desktop-column-5 {
width: 50%;
}
.desktop-column-6 {
width: 60%;
}
.desktop-column-6_6 {
width: 66.666%;
}
.desktop-column-7 {
width: 70%;
}
.desktop-column-7_5 {
width: 75%;
}
.desktop-column-8 {
width: 80%;
}
.desktop-column-9 {
width: 90%;
}
.left1 {
margin-left: 10%;
}
.left2 {
margin-left: 20%;
}
.left3 {
margin-left: 30%;
}
.left4 {
margin-left: 40%;
}
.left5 {
margin-left: 50%;
}
.left-1 {
margin-left: -10%;
}
.left-2 {
margin-left: -20%;
}
.left-3 {
margin-left: -30%;
}
.left-4 {
margin-left: -40%;
}
.left-5 {
margin-left: -50%;
}
.right-1 {
right: -10%;
position: absolute;
}
.right-2 {
right: -20%;
position: absolute;
}
.right-3 {
right: -30%;
position: absolute;
}
.right-4 {
right: -40%;
position: absolute;
}
.right-5 {
right: -50%;
position: absolute;
}
}
.expando {
border-radius: 3px;
border-style: solid;
border-width: 1px;
margin-bottom: 0.4rem;
transition: 0.3s padding;
}
.expando-link {
display: block;
font-size: 1.1em;
line-height: 1.5;
padding: 0.9em 2em 0.9em 2.3em;
padding: 0.9em 2em 0.9em calc(1rem + 1.4em);
position: relative;
text-decoration: none;
}
.mobile-expando-link,
.tablet-expando-link {
display: none;
}
.expando-link::after {
border-left: 0.35em solid transparent;
border-right: 0.35em solid transparent;
border-top: 0.41em solid;
content: "";
height: 0;
opacity: 0.4;
position: absolute;
left: 1em;
top: 1.3em;
top: calc(0.8rem + 0.7em);
transition: 0.5s all;
width: 0em;
}
.expando-inner {
height: 0;
opacity: 0;
overflow: hidden;
padding: 0 1rem;
transition: 0.5s opacity;
}
.expando-expanded {
padding: 0.5em 0 1em;
}
.expando-expanded .expando-title {
display: none;
}
.expando-expanded > .expando-inner {
height: auto;
opacity: 1;
overflow: auto;
padding: 0 2em 1em 2.3em;
padding: 0 2em 1em calc(1rem + 1.5em);
}
.expando-link.expanded::after,
.expando-expanded > .expando-link::after {
transform: rotate(180deg);
}
.text-center > .expando-link::after {
position: relative;
right: 0;
top: -0.2em;
}
.expando.section > .expando-link {
color: inherit;
}
.expando-big > .expando-link {
color: inherit;
font-size: 1.4em;
}
.js .section.expando {
border-bottom-style: solid;
border-bottom-width: 1px;
border-radius: 0;
margin: 0;
padding: 0;
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
/* mobile expandos (first-level child selector needed so expandos can be nested) */
.mobile-expando {
border-radius: 3px;
margin-bottom: 0.4rem;
}
.mobile-expando-link {
display: block;
font-size: 1.2em;
padding: 0.8rem 1rem 0.8rem 2.2em;
padding: 0.8rem 1rem 0.8rem calc(1rem + 1.4em);
position: relative;
text-decoration: none;
}
.mobile-expando-link::after {
border-left: 0.35em solid transparent;
border-right: 0.35em solid transparent;
border-top: 0.41em solid;
content: "";
height: 0;
opacity: 0.4;
position: absolute;
left: 1em;
top: 1.4em;
top: calc(1rem + 0.5em);
transition: 0.5s all;
width: 0em;
}
.mobile-expando-inner {
height: 0;
opacity: 0;
overflow: hidden;
padding: 0 1rem;
transition: 0.5s opacity;
}
.mobile-expando-expanded .mobile-expando-title {
display: none;
}
.mobile-expando-expanded > .mobile-expando-inner {
height: auto;
opacity: 1;
overflow: auto;
padding: 0 1rem 0.8rem;
}
.mobile-expando-link.mobile-expando-expanded::after,
.mobile-expando-expanded > .mobile-expando-link::after {
transform: rotate(180deg);
}
.section.mobile-expando {
border-bottom-style: solid;
border-bottom-width: 1px;
border-radius: 0;
margin: 0;
padding: 0;
}
.section.mobile-expando > .mobile-expando-link {
color: inherit;
font-size: 1.3em;
margin: 0 auto;
padding: 1rem 1rem 1rem 2.2em;
padding: 1rem 1rem 1rem calc(1rem + 1.3em);
max-width: 605px;
}
.section.mobile-expando > .mobile-expando-link::after {
top: 1.5em;
top: calc(1rem + 0.6em);
left: 1rem;
}
}
/* Tablet Only */
@media only screen and (min-width: 680px) and (max-width: 950px) {
.section.expando-mobile > .expando-mobile-link {
font-size: 1.4em;
}
}
/* Tablet Only */
@media only screen and (min-width: 680px) and (max-width: 950px) {
/* mobile expandos */
.expando-mobile {
position: relative;
}
.expando-mobile > .expando-link {
display: block;
}
/* mobile expandos (first-level child selector needed so expandos can be nested) */
.tablet-expando {
border-radius: 3px;
margin-bottom: 0.4rem;
}
.tablet-expando-link {
display: block;
font-size: 1.2em;
padding: 0.8rem 1rem 0.8rem 2.3em;
padding: 0.8rem 1rem 0.8rem calc(1rem + 1.4em);
position: relative;
text-decoration: none;
}
.tablet-expando-link::after {
border-left: 0.35em solid transparent;
border-right: 0.35em solid transparent;
border-top: 0.41em solid;
content: "";
height: 0;
opacity: 0.4;
position: absolute;
left: 1em;
top: 1.4em;
top: calc(1rem + 0.5em);
transition: 0.5s all;
width: 0em;
}
.tablet-expando-inner {
height: 0;
opacity: 0;
overflow: hidden;
padding: 0 1rem;
transition: 0.5s opacity;
}
.tablet-expando-expanded .tablet-expando-title {
display: none;
}
.tablet-expando-expanded > .tablet-expando-inner {
height: auto;
opacity: 1;
overflow: auto;
padding: 0 1rem 0.8rem;
}
.tablet-expando-link.tablet-expando-expanded::after,
.tablet-expando-expanded > .tablet-expando-link::after {
transform: rotate(180deg);
}
.section.tablet-expando {
border-bottom-style: solid;
border-bottom-width: 1px;
border-radius: 0;
margin: 0;
padding: 0;
}
.section.tablet-expando > .tablet-expando-link {
color: inherit;
font-size: 1.3em;
margin: 0 auto;
padding: 1em 1em 1em 2.5em;
max-width: 605px;
}
.section.tablet-expando > .tablet-expando-link::after {
top: 1.6em;
left: 1.2em;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.width-skinny.expando > .expando-link {
max-width: 35rem;
}
.width-narrow.expando > .expando-link {
max-width: 38rem;
}
.width-normal.expando > .expando-link {
max-width: 42rem;
}
.width-medium.expando > .expando-link {
max-width: 48rem;
}
.width-wide.expando > .expando-link {
max-width: 56rem;
}
.width-extrawide.expando > .expando-link {
max-width: 68rem;
}
}
/* general JS support styles */
.js-hide {
display: none;
}
.nojs-hide {
visibility: hidden;
}
.js .nojs-hide {
visibility: visible;
}
.js-bg-rotator-container .section-img-credit {
opacity: 1;
}
/* Lazy loading styles */
img.lazy {
-webkit-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
-o-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
opacity: 0;
}
img.b-loaded {
opacity: 1;
}
.lazy-image-wrapper {
background: rgba(0, 0, 0, 0.1);
}
/* Modal CSS */
.modal-wrapper {
bottom: 0;
cursor: pointer;
height: 0;
min-height: 0;
opacity: 0;
overflow-y: scroll;
overscroll-behavior: contain;
padding: 0;
position: fixed;
top: 0;
-moz-transition: 0.4s opacity;
-webkit-transition: 0.4s opacity;
transition: 0.4s opacity;
width: 100%;
will-change: opacity;
z-index: 9999;
}
.modal-wrapper.open {
height: auto;
min-height: 100vh;
opacity: 1;
padding: 3rem 5%;
}
.modal-wrapper.slide-out {
background: rgba(21, 36, 43, 0.7);
overflow: auto;
padding: 0;
}
.modal-inner {
position: relative;
-webkit-overflow-scrolling: touch;
width: 100%;
}
.modal-wrapper.slide-out .modal-inner {
height: 100%;
left: -100%;
margin: 0;
overflow-y: auto;
position: absolute;
top: 0;
transition: 0.4s all;
min-width: 20rem;
max-width: 35rem;
width: 86%;
will-change: left, right;
}
.modal-wrapper.slide-out.open .modal-inner {
left: 0;
}
.modal-wrapper.slide-out.open .modal-content {
background-color: rgba(0, 0, 0, 0.8);
}
.modal-wrapper.slide-out.slide-out-right .modal-inner {
left: auto;
right: -100%;
}
.modal-wrapper.slide-out.slide-out-right.open .modal-inner {
right: 0;
}
.modal-wrapper .main-nav-label {
display: block;
margin-bottom: 2rem;
padding-right: 2.5rem;
}
.modal-close-x {
background-color: rgba(21, 36, 43, 0.25);
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4yIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9Ijk3LjksMTIgODgsMi4xIDQ5LjksNDAuMiAxMS44LDIuMSAxLjksMTIgNDAsNTAuMSAxLjksODguMiAxMS44LDk4LjEgNDkuOSw2MCA4OCw5OC4xIDk3LjksODguMiANCgk1OS44LDUwLjEgIi8+DQo8L3N2Zz4NCg==);
background-repeat: no-repeat;
background-position: center center;
background-size: 42% auto;
border-radius: 2rem;
cursor: pointer;
height: 2rem;
position: absolute;
right: 1rem;
text-indent: -9999px;
top: 1rem;
width: 2rem;
z-index: 9999;
}
.modal-close-x:hover {
background-color: rgba(21, 36, 43, 0.75);
}
.modal-wrapper nav {
cursor: default;
min-height: 100vh;
overflow: unset;
margin: 0;
padding: 2.5rem;
padding-top: 1.5rem;
text-align: left;
}
.modal-wrapper .site-language-nav {
font-size: 1.25em;
line-height: 1.7;
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
.modal-close-x {
height: 2.5rem;
right: 1rem;
top: 1rem;
width: 2.5rem;
}
}
/*
CSS to support the "shy" sticky behavior via headroom.js
*/
.headroom {
border-bottom: 0 none;
top: 0;
transition: all 400ms;
}
.headroom--pinned {
position: sticky;
}
.headroom--pinned.headroom--not-top {
border-bottom: 1px solid rgba(21, 36, 43, 0.2);
opacity: 1;
transform: translateY(0);
}
.headroom--pinned.headroom--not-top.bg-transparent {
background-color: rgba(21, 36, 43, 0.5);
border-bottom: 0 none;
}
.headroom--unpinned {
opacity: 0;
transform: translateY(-100%);
}
.headroom--pinned .header-button.bg-blue.button {
background-color: rgb(255, 169, 2);
color: #17292E;
}
.headroom--top .header-button.bg-blue.button {
background-color: rgb(15, 129, 233);
color: #fff;
}
.headroom--pinned .header-button.bg-blue.button.mobile-donate-btn {
font-size: 1.125em;
margin-bottom: 0.45em;
margin-top: 0.45em;
}
.mobile-donate-btn {
padding: 1em 1.2em !important;
}
/* Styles for Wordpress' built-in/unchangeable classes */
.sidebar ul, .sidebar ol, .commentlist {
list-style: none;
}
.aligncenter {
text-align: center;
}
.alignright {
text-align: right;
}
img.alignleft,
div.alignleft {
float: left;
margin: 0 1rem 1rem 0;
}
img.aligncenter,
div.aligncenter {
display: block;
margin: 0 auto;
}
img.alignright,
div.alignright {
float: right;
margin: 0 0 1rem 1rem;
}
.wp-caption img,
.wp-caption {
width: auto !important;
max-width: 100% !important;
height: auto !important;
}
.widget {
border-radius: 2px;
overflow: hidden;
}
.widget ul {
padding: 0;
}
.widget ul li {
list-style-type: none;
margin: 0;
}
.tfsf {
max-width: 432px;
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
/* default WP widgets */
.widget_nav_menu {
clear: both;
margin: 0 1%;
padding: 1rem;
}
}
/* Adjusting the styles of default WP blocks */
/* use .baseline class to increase specificity above the default WP css */
.baseline {
/* Quote block */
/* Pullquote block */
/* Media embeds */
/* Facebook embed */
/* Button embed */
/* File download block */
/* Code block */
}
.baseline .wp-block-quote {
border-left: none !important;
padding: calc(2.75vh + 1.25vw + 3px) calc(1.25vh + 2.75vw + 3px);
margin-bottom: 1.5em;
}
.baseline .wp-block-quote.is-style-large {
padding: calc(2.75vh + 1.25vw + 3px) calc(1.25vh + 2.75vw + 3px);
}
.baseline .wp-block-quote:not(.is-large):not(.is-style-large) {
padding-left: calc(1.25vh + 2.75vw + 3px);
}
.baseline .wp-block-quote.is-large p,
.baseline .wp-block-quote.is-style-large p {
font-size: 1.5rem;
font-style: normal;
line-height: initial;
}
.baseline .wp-block-quote cite {
display: block;
font-size: 0.9rem;
line-height: 1.2;
}
.baseline .wp-block-quote.is-large cite,
.baseline .wp-block-quote.is-large footer,
.baseline .wp-block-quote.is-style-large cite,
.baseline .wp-block-quote.is-style-large footer {
font-size: 0.9rem;
text-align: left;
text-align: start;
}
.baseline .wp-block-pullquote {
margin-top: 1em;
margin-bottom: 1em;
padding: calc(4.8125vh + 2.1875vw + 3px) calc(2.1875vh + 4.8125vw + 3px);
}
.baseline .wp-block-pullquote blockquote {
background-color: unset;
margin: 0 auto;
padding: 0;
}
.baseline .wp-block-pullquote.is-style-solid-color blockquote {
max-width: 40rem;
}
.baseline .wp-block-pullquote p,
.baseline .wp-block-pullquote.is-style-solid-color blockquote p {
font-size: 1.6rem;
line-height: initial;
}
.baseline .wp-block-pullquote__citation,
.baseline .wp-block-pullquote cite,
.baseline .wp-block-pullquote footer {
display: block;
font-size: 0.9rem;
margin-top: 1em;
text-transform: none;
}
.baseline .wp-block-embed {
margin: 1em auto;
}
.baseline .wp-block-embed-facebook {
overflow: scroll;
width: 100%;
}
.baseline .wp-block-button {
display: block;
text-align: center;
margin: 1em auto;
}
.baseline .wp-block-button__link {
align-items: center;
background-color: #999;
border-radius: 1.8em;
border: 1px solid transparent;
color: #fff;
cursor: pointer;
display: block;
display: inline-flex;
font-weight: bold;
font-size: 0.9em;
height: auto;
justify-content: center;
line-height: 1.1;
padding: 0.8em 1.6em;
padding: calc(0.3rem + 0.5em) calc(0.6rem + 1em);
position: relative;
text-align: center;
text-decoration: none;
transition: all 0.15s ease;
white-space: normal;
}
.baseline .wp-block-button__link:hover {
border-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.baseline .wp-block-button__link:active {
transform: scale(0.97);
}
.baseline .wp-block-file {
border: 1px solid rgba(21, 36, 43, 0.15);
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
padding: calc(1.375vh + 0.625vw + 3px) calc(0.625vh + 1.375vw + 3px);
}
.baseline .wp-block-code {
color: initial;
font-family: Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
font-size: 0.85em;
margin: 1em 0;
white-space: pre;
}
/* Post styles */
.section.posts h3.section-title {
margin-left: 0;
}
h3.section-title + .post,
.posts-wrapper {
clear: both;
}
.post-thumbnail {
font-size: 0; /* Fixes extra space beneath images */
margin-bottom: 15px;
position: relative;
}
.post-thumbnail img {
/** position:absolute; **/
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
min-height: 100px;
height: 150px;
max-height: 185px;
}
.posts-layout-cards #post-1 .post-thumbnail img {
min-height: 330px;
}
.post-title {
font-size: 1.75rem;
word-break: break-word;
}
/* DE and NL post-title sizes reduction*/
.de .post-title, .nl .post-title {
font-size: 1.75rem;
}
.post-author {
margin-top: -6px;
}
.post-author-img img {
border-radius: 100px;
height: 24px;
margin-right: 3px;
overflow: hidden;
vertical-align: middle;
width: 24px;
}
p.wp-caption-text {
font-size: 0.85rem;
font-style: italic;
margin-bottom: 1rem;
}
.post-meta-item {
display: inline-block;
height: 35px;
line-height: 35px;
margin-bottom: 0.2em;
padding: 0 0.7em;
vertical-align: middle;
}
/**UI improvements to latest updates section**/
.posts-layout-cards .post {
border-radius: 4px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}
.posts-layout-cards .post .post-text {
padding: 1em;
}
.posts-layout-cards .post .post-footer {
padding-top: 1.25em;
position: absolute;
bottom: 10px;
}
.posts-layout-cards #post-1 .post-footer {
position: relative;
bottom: 0px;
}
.posts-layout-cards #post-2, .posts-layout-cards #post-3, .posts-layout-cards #post-4, .posts-layout-cards.refresh #post-1 {
min-height: 640px;
}
/* List-style posts layout */
.posts-layout-list .post {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 2em;
padding-bottom: 2em;
}
.posts-layout-list .post-thumbnail {
float: right;
margin: 0 0 1em 1em;
width: 30%;
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
/* Post layout: cards (mobile) */
.posts-layout-cards .post {
border-bottom: 1px solid rgba(21, 36, 43, 0.2);
font-size: 0.9em;
margin-bottom: 1em;
padding-bottom: 1em;
position: relative;
min-height: 250px !important;
}
.posts-layout-cards .post-thumbnail {
float: right;
margin: 1rem 0 1rem 1rem;
width: 37%;
}
.posts-layout-cards .post-text {
line-height: 1.5;
}
.posts-layout-cards .post-title {
font-size: 1.4rem;
}
.posts-layout-cards #post-1 {
margin-top: 1em;
}
.posts-layout-cards #post-1 .post-thumbnail {
float: none;
margin: 0;
width: 100%;
}
.posts-layout-cards #post-1 .post-text {
padding-top: 1em;
width: 100%;
}
.posts-layout-cards #post-1 .post-meta {
background: rgba(21, 36, 43, 0.8);
color: #fff;
position: absolute;
top: 0px;
padding: 0.1em 0.4em;
}
.posts-layout-cards #post-1 .post-title {
font-size: 2rem;
}
.posts-layout-cards #post-1 .post-excerpt {
font-size: 1rem;
}
}
/* Tablet Only */
@media only screen and (min-width: 680px) and (max-width: 950px) {
/* Post layout: cards (tablet) */
.posts-layout-cards .post {
border-bottom: 1px solid rgba(21, 36, 43, 0.2);
font-size: 0.9em;
margin-bottom: 1em;
padding-bottom: 1em;
position: relative;
min-height: 250px !important;
}
.posts-layout-cards .post-thumbnail {
float: right;
margin: 1rem 0 1rem 1rem;
width: 37%;
}
.posts-layout-cards .post-text {
line-height: 1.5;
}
.posts-layout-cards .post-title {
font-size: 1.4rem;
}
.posts-layout-cards #post-1 {
margin-top: 1em;
}
.posts-layout-cards #post-1 .post-thumbnail {
float: right;
margin: 0;
width: 48%;
}
.posts-layout-cards #post-1 .post-text {
margin-right: 4%;
width: 48%;
}
.posts-layout-cards #post-1 .post-title {
font-size: 2rem;
}
.posts-layout-cards #post-1 .post-excerpt {
font-size: 1rem;
}
/* Post layout: cards - no large callout (desktop) */
.posts-layout-cards.refresh #post-1 .post-thumbnail {
float: right;
margin: 1rem 0 1rem 1rem;
width: 37%;
}
.posts-layout-cards.refresh #post-1 .post-text {
margin-right: unset;
width: unset;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
/* Post layout: list (desktop) */
.posts-layout-list .post {
margin: 1.5em 0;
}
.posts-layout-list .post-text {
margin: 0 1% 0 10%;
width: 58%;
}
.posts-layout-list .post-meta {
position: absolute;
left: 0;
width: 8%;
}
.posts-layout-list .post-thumbnail {
float: right;
margin: 0 1%;
width: 28%;
}
/* Post layout: cards (desktop) */
.posts-layout-cards .post {
float: left;
margin: 1.5em 1%;
position: relative;
width: 31%;
}
.posts-layout-cards .post-text {
padding-top: 0.5em;
}
.posts-layout-cards .post-meta {
background: rgba(21, 36, 43, 0.7);
color: #fff;
display: inline-block;
padding: 0 4px;
position: absolute;
top: 0px;
}
.posts-layout-cards #post-1 {
border-bottom: 1px solid rgba(21, 36, 43, 0.2);
margin-bottom: 3em;
padding-bottom: 0em;
width: 98%;
overflow: hidden;
}
.posts-layout-cards #post-1 .post-thumbnail {
float: right;
margin: 0;
width: 40%;
}
.posts-layout-cards #post-1 .post-text {
padding-top: 2em;
width: 58%;
}
.posts-layout-cards #post-1 .post-title {
font-size: 2.5rem;
}
.posts-layout-cards #post-1 .post-excerpt {
font-size: 1.1em;
}
/* Content after posts */
.posts-layout-cards .content-more {
clear: both;
}
/* Post layout: cards - no large callout (desktop) */
.posts-layout-cards.refresh #post-1 {
float: left;
margin: 1.5em 1%;
position: relative;
width: 31%;
}
.posts-layout-cards.refresh #post-1 .post-text {
padding: 1em;
}
.posts-layout-cards.refresh #post-1 .post-meta {
background: rgba(21, 36, 43, 0.7);
color: #fff;
display: inline-block;
padding: 0 4px;
position: absolute;
top: 0px;
}
.posts-layout-cards.refresh #post-1 .post-thumbnail {
font-size: 0;
margin-bottom: 15px !important;
position: relative;
float: none;
margin: unset;
width: auto;
}
.posts-layout-cards.refresh #post-1 .post-thumbnail img {
min-height: unset;
}
.posts-layout-cards.refresh #post-1 .post-text {
width: 100%;
line-height: 1.5;
}
.posts-layout-cards.refresh #post-1 .post-title {
font-size: 1.75rem;
}
}
.refresh .section-title.meta {
text-transform: inherit;
letter-spacing: inherit;
text-align: center;
font-size: calc(0.5vw + 1.3rem);
font-family: inherit;
margin-bottom: 2rem;
}
/* Action Network - CSS for signup forms, events */
#can_embed_form {
max-width: 33em;
}
#can_embed_form h2,
#donate_auto_modal h2 {
font-weight: bold !important;
}
#can_embed_form #can_thank_you #action_info {
border-top: 1px dotted !important;
}
#can_embed_form #can_thank_you h1 {
font-size: 25px !important;
text-shadow: none !important;
}
#can_embed_form #can_thank_you h4,
#can_embed_form #can_thank_you p {
text-shadow: none !important;
}
.gen_wrapper #can_embed_form #can_thank_you {
background: rgba(255, 255, 255, 0.2);
border: 0 none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
padding: 60px;
margin-bottom: 40px;
}
#can_embed_form h2,
#action_info {
display: none !important;
}
#can_embed_form #action_welcome_message #action_welcome_message_inner {
border: 0 none !important;
background: rgba(21, 36, 43, 0.1) !important;
font-size: 1.2em;
padding: 1em;
}
#can_embed_form li.control-group {
list-style-type: none;
margin-top: 0.3em;
}
#can_embed_form li.control-group label.radio {
font-weight: bold;
}
#can_embed_form .international_link {
font-size: 0.8rem;
font-style: italic;
}
.can_embed label.checkbox,
.can_embed label.radio {
display: block;
}
.can_embed .check_radio_field {
display: block;
margin: 0.5rem 0 0.8rem;
}
li#d_sharing {
margin: 1.5em 0;
}
li#d_sharing,
#d_sharing li,
#d_sharing ul {
list-style-type: none;
padding-left: 0;
}
#d_sharing .check_radio_field {
display: block;
margin: 0.5em 0;
}
#d_sharing .radio {
display: inline-block;
margin-right: 0.75em;
}
.affirmative_note {
line-height: 1.35;
margin: 1em 0;
}
#can_embed_form input[type=submit] {
margin-top: 0.5rem;
}
#can_embed_form #logo_wrap {
display: none;
}
#can_embed_form .ajax-loading {
display: none;
position: relative !important;
top: 4px !important;
float: right !important;
margin-top: -44px !important;
margin-right: 10px !important;
height: 16px !important;
width: 22px !important;
}
#can_embed_form form li {
list-style-type: none;
}
/* Help AN's goofy code show/hide country select */
.baseline #can_embed_form .country_drop_wrap select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
position: static !important;
opacity: 1 !important;
height: auto !important;
width: 100% !important;
}
.baseline #can_embed_form .country_drop_wrap.clear {
display: none;
height: auto;
width: auto !important;
}
.baseline #can_embed_form .can_selectInner {
display: none !important;
}
/* Event search*/
.event_campaign #can_embed_form h2 {
margin-bottom: 0.8em;
}
.event_campaign #can_embed_form {
max-width: 100%;
}
.event_campaign #can_embed_form #event_map_wrap,
.event_campaign #can_embed_form #map_canvas {
height: 300px;
}
.event_campaign #form_co1 {
display: flex;
flex-wrap: wrap;
}
.event_campaign #form_co1 > * {
width: 100%;
}
.event_campaign #form_co1 {
order: 5;
}
.event_campaign #can_zip_search {
background-color: rgba(21, 36, 43, 0.04);
padding: 1.2em;
}
.event_campaign #can_zip_search div.clearfix {
display: flex;
flex-wrap: wrap;
}
.event_campaign #can_zip_search .floatlabel-wrapper {
display: flex;
flex: 1 1 60%;
margin-right: 0.5em;
}
.event_campaign #can_zip_search label {
display: none;
}
.event_campaign #form-zip_code {
margin: 0;
}
.event_campaign #form-zip_code-submit {
flex: 1;
font-size: 0.9rem;
margin: 0 !important;
}
.event_campaign #form_col1 h4 {
font-size: 1.1em;
}
.event_campaign .zip_search_results_col {
background-color: rgba(21, 36, 43, 0.1);
padding: 1.2em;
}
.event_campaign #host_your_own,
.event_campaign .host_custom_html {
background-color: rgba(21, 36, 43, 0.2);
padding: 1.1em;
}
.event_campaign #host_your_own .button {
font-size: 1.1em;
}
.event_campaign #search_location_list span {
display: block;
}
.event_campaign .choose_location_button {
display: inline-block;
font-size: 1.1em;
margin: 0.5em 0;
}
/* AN event campaign — media query */
@media screen and (min-width: 950px) {
.event_campaign #form_col1 h4 {
float: left;
width: 38%;
}
.event_campaign #can_embed_form #can_zip_search {
background-color: rgba(21, 36, 43, 0.04);
clear: left;
float: left;
margin-bottom: 0;
margin-right: 2%;
padding: 1.2em;
width: 38%;
}
.event_campaign #can_embed_form #event_map_wrap {
float: right;
position: relative;
margin-left: 2%;
top: -1.5em;
width: 58%;
}
.event_campaign #can_embed_form #event_map_wrap,
.event_campaign #can_embed_form #map_canvas {
height: 380px;
}
.event_campaign .zip_search_results_col,
.event_campaign #form_col2,
.event_campaign #host_your_own {
clear: left;
float: left;
width: 38%;
}
}
/* Individual Event */
.can_embed.event .first_line .graytext {
display: none;
}
.can_embed.event .first_line .bullet {
display: block;
font-size: 0;
line-height: 0;
}
.can_embed.event form li {
list-style-type: none;
}
.can_embed.event .core_field label,
.can_embed.event .control-group:not(.js-affirmative_optin_control_group) label {
font-size: 0.75rem;
}
.en .can_embed.event .core_field label,
.en .can_embed.event .control-group:not(.js-affirmative_optin_control_group) label {
letter-spacing: 0.05em;
text-transform: uppercase;
}
.can_embed.event .additional_text {
font-size: 0.8rem;
}
.can_embed.event .first_line {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0;
}
.can_embed.event .first_line + .first_line {
margin-bottom: 1em;
}
#can_embed_form .event_map_wrap,
#can_embed_form .event_map_wrap #map_canvas,
#can_embed_form #event_map_wrap,
#can_embed_form #event_map_wrap #map_canvas {
height: 300px;
margin-bottom: 0.6rem;
}
.can_embed.event #can_main_col {
margin-bottom: 1.2rem;
}
.can_embed.event .action_sidebar {
background: rgba(21, 36, 43, 0.08);
padding: 1em;
padding: calc(2vh + 1.2vw) calc(1.2vh + 2vw);
}
.can_embed.event .action_sidebar ul {
padding-left: 0;
}
/* AN individual event — media query */
@media screen and (min-width: 950px) {
.can_embed.event #can_embed_form {
max-width: 100%;
}
.can_embed.event .clearfix {
display: flex;
flex-wrap: nowrap;
}
.can_embed.event #can_main_col {
margin: 0 2%;
max-width: 56%;
}
.can_embed.event #can_sidebar {
margin: 0 2%;
max-width: 36%;
}
}
#can_embed_form .ajax-loading {
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
/* Action Network option classes */
.an-header-hide #can_embed_form h2 {
display: none;
}
.an-subhead-hide #can_embed_form h4 {
display: none;
}
/* Actionkit embedded form styles */
/* AK AJAX styles */
.actionkit {
-webkit-transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
transition: 1s all;
}
.ak-event-map {
border: 0 none;
height: 75vh;
width: 100%;
}
.form-intro {
margin-bottom: 0.8rem;
}
.custom_html {
font-size: 0.85em;
padding: 0.4rem 0 0.7rem;
}
/* #signup-replacement appears after a successful AJAX aubmission */
#signup-replacement {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
/* new PHP CURL embedded AK form */
.section.actionkit #action-lead {
background-color: inherit;
border-color: inherit;
color: inherit;
min-height: max-content;
max-height: max-content;
height: auto;
padding: 0;
}
.ak-userfield-radio-set {
display: block;
width: 100%;
}
.section.actionkit #action-lead .buttons-share-side {
display: none;
}
.actionkit #really-opt-out {
margin-bottom: 1.5em;
}
.actionkit.bg-dkgray #really-opt-out {
background-color: rgba(255, 255, 255, 0.2);
}
/* error messages */
.form-style-labelabove .ak-err,
.form-style-expanded .ak-err {
background-color: #fff0d4;
color: initial;
margin: -1px 0 0;
padding: 0.4rem 0.6rem;
position: relative;
}
.form-style-labelabove .input-radio .ak-err,
.form-style-labelabove .input-checkbox .ak-err,
.form-style-expanded .input-radio .ak-err,
.form-style-expanded .input-checkbox .ak-err {
border-radius: 2px;
margin: 0.8em 0;
}
.form-style-labelabove .ak-err li,
.form-style-expanded .ak-err li {
font-size: 0.85rem;
line-height: 1.4;
list-style-type: none;
}
.form-style-labelabove .ak-err li::before,
.form-style-expanded .ak-err li::before {
background: #ffa902;
border-radius: 1em;
content: "";
display: inline-block;
height: 0.7em;
margin-right: 0.4rem;
width: 0.7em;
}
.ak-err-below label.ak-error::after,
.ak-err-above label.ak-error::after {
background-color: #ffa902;
border-radius: 1em;
content: "";
display: inline-block;
height: 0.5em;
margin: 0 0.2em;
vertical-align: text-top;
width: 0.5em;
}
.ak-err-below > label.ak-error::after {
display: none;
}
.ak-err-below input.ak-error,
.ak-err-above input.ak-error,
.ak-err-below select.ak-error,
.ak-err-above select.ak-error {
background-color: #fff0d4;
}
.form-style-expanded input.ak-error,
.form-style-expanded textarea.ak-error {
background: #fff;
}
/* progress bar styling */
#action-progress-bar-inner {
background: #0f81e8;
border-radius: 0;
height: 10px;
-webkit-transition: width 1.5s;
-moz-transition: width 1.5s;
transition: width 1.5s;
width: 0;
}
#action-progress-bar {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 15px;
height: 10px;
margin: 0.3em 0;
overflow: hidden;
width: 100%;
}
.bg-blue-fade #action-progress-bar-inner,
.bg-blue #action-progress-bar-inner {
background-color: #35c9c5;
}
/* Addthis.com plugin styles */
@media screen and (min-width: 979px) {
body #at4-share,
body #at4-soc,
body .atss {
margin-top: -75px !important;
top: 50% !important;
z-index: 9000 !important;
}
}
/* CSS for Baseline "Side Share buttons" plugin */
/* Side share buttons */
#side-share {
order: 8;
}
.buttons-share-side .button-square {
float: right;
clear: both;
}
.buttons-share-side .button-square:hover {
width: 60px;
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
#side-share {
display: none;
}
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
.buttons-share-side {
margin-top: -75px;
position: fixed;
right: 0;
top: 50%;
transition: all 1s;
z-index: 999;
}
.buttons-share-side-left {
right: auto;
left: 0;
}
}
/* Ditty News Ticker plugin styles */
.mtphr-dnt-tick-container {
font-size: 0.9em;
}
.mtphr-dnt-tick::before {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 1em;
content: "";
display: inline-block !important;
height: 1.1ex;
margin: 0 1ex;
width: 1.1ex;
}
.mtphr-dnt-tick {
will-change: left;
}
.mtphr-dnt-tick a {
font-weight: normal;
text-decoration: none;
}
/* Multilingual Press */
.mlp_quicklinks {
background: rgba(21, 36, 43, 0.1);
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 2rem;
padding: 0.8rem;
max-width: 100% !important;
}
.mlp_inner label {
display: flex;
font-weight: bold;
justify-content: center;
line-height: 2.5rem;
width: 100%;
}
.mlp_inner label select,
.mlp_inner label input {
display: inline-block;
flex: 1 1 auto;
font-size: 0.9rem;
justify-content: space-between;
margin: 0 5px;
}
#mlp_quicklink_select_id {
max-width: 50%;
}
.mlp_inner input[type=submit] {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
font-size: 1.5rem;
max-width: 20%;
}
.widget .mlp_language_box ul li {
display: list-item;
margin: 0;
}
/* Social media service styles */
.bg-twitter-icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4yIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTAwLDE5Yy0zLjcsMS42LTcuNiwyLjctMTEuOCwzLjJjNC4yLTIuNSw3LjUtNi42LDktMTEuNGMtNCwyLjQtOC40LDQuMS0xMyw1Yy0zLjctNC05LjEtNi41LTE1LTYuNQ0KCWMtMTEuMywwLTIwLjUsOS4yLTIwLjUsMjAuNWMwLDEuNiwwLjIsMy4yLDAuNSw0LjdjLTE3LjEtMC45LTMyLjItOS00Mi4zLTIxLjRjLTEuOCwzLTIuOCw2LjYtMi44LDEwLjNjMCw3LjEsMy42LDEzLjQsOS4xLDE3LjENCgljLTMuNC0wLjEtNi41LTEtOS4zLTIuNmMwLDAuMSwwLDAuMiwwLDAuM2MwLDkuOSw3LjEsMTguMiwxNi41LDIwLjFjLTEuNywwLjUtMy41LDAuNy01LjQsMC43Yy0xLjMsMC0yLjYtMC4xLTMuOS0wLjQNCgljMi42LDguMSwxMC4yLDE0LjEsMTkuMiwxNC4yYy03LDUuNS0xNS45LDguOC0yNS41LDguOGMtMS43LDAtMy4zLTAuMS00LjktMC4zYzkuMSw1LjgsMTkuOSw5LjIsMzEuNCw5LjINCgljMzcuNywwLDU4LjQtMzEuMyw1OC40LTU4LjRjMC0wLjksMC0xLjgtMC4xLTIuN0M5My44LDI2LjcsOTcuMiwyMy4xLDEwMCwxOXoiLz4NCjwvc3ZnPg0K);
background-repeat: no-repeat;
}
.bg-twitter-color,
a.bg-twitter-color {
background-color: #28aae1;
color: #fff !important;
}
a.bg-twitter-color:hover {
color: rgba(255, 255, 255, 0.7) !important;
}
.text-twitter,
.text-color-twitter {
color: #28aae1;
}
.bg-facebook-icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA4MCA4MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAgODA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI4LjQsNzcuOVY0MS4xSDIwVjMwLjFsOC40LTIuMnYtOS43QzI4LjQsNiwzNS4xLDAsNTAuMiwwYzIuMiwwLDcsMC41LDkuOCwxLjh2MTMuOWMtMS41LTAuNy0zLjktMS45LTguMS0xLjkKCWMtMy43LDAtNi45LDEuNS02LjksNi41djcuMmgxMy4zdjEzLjhINDVWNzhMMjguNCw3Ny45eiIvPgo8L3N2Zz4K);
background-repeat: no-repeat;
}
.bg-facebook-color,
a.bg-facebook-color {
background-color: #305891;
color: #fff !important;
}
a.bg-facebook-color:hover {
color: rgba(255, 255, 255, 0.7) !important;
}
.text-facebook,
.text-color-facebook {
color: #305891;
}
.bg-instagram-icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxvZ28iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1Niw0OS41YzY3LjMsMCw3NS4yLDAuMywxMDEuOCwxLjVjMjQuNiwxLjEsMzcuOSw1LjIsNDYuOCw4LjdjMTEuOCw0LjYsMjAuMiwxMCwyOSwxOC44CgkJYzguOCw4LjgsMTQuMywxNy4yLDE4LjgsMjljMy40LDguOSw3LjYsMjIuMiw4LjcsNDYuOGMxLjIsMjYuNiwxLjUsMzQuNSwxLjUsMTAxLjhzLTAuMyw3NS4yLTEuNSwxMDEuOAoJCWMtMS4xLDI0LjYtNS4yLDM3LjktOC43LDQ2LjhjLTQuNiwxMS44LTEwLDIwLjItMTguOCwyOWMtOC44LDguOC0xNy4yLDE0LjMtMjksMTguOGMtOC45LDMuNC0yMi4yLDcuNi00Ni44LDguNwoJCWMtMjYuNiwxLjItMzQuNSwxLjUtMTAxLjgsMS41cy03NS4yLTAuMy0xMDEuOC0xLjVjLTI0LjYtMS4xLTM3LjktNS4yLTQ2LjgtOC43Yy0xMS44LTQuNi0yMC4yLTEwLTI5LTE4LjgKCQljLTguOC04LjgtMTQuMy0xNy4yLTE4LjgtMjljLTMuNC04LjktNy42LTIyLjItOC43LTQ2LjhjLTEuMi0yNi42LTEuNS0zNC41LTEuNS0xMDEuOHMwLjMtNzUuMiwxLjUtMTAxLjgKCQljMS4xLTI0LjYsNS4yLTM3LjksOC43LTQ2LjhjNC42LTExLjgsMTAtMjAuMiwxOC44LTI5YzguOC04LjgsMTcuMi0xNC4zLDI5LTE4LjhjOC45LTMuNCwyMi4yLTcuNiw0Ni44LTguNwoJCUMxODAuOCw0OS43LDE4OC43LDQ5LjUsMjU2LDQ5LjUgTTI1Niw0LjFjLTY4LjQsMC03NywwLjMtMTAzLjksMS41QzEyNS4zLDYuOCwxMDcsMTEuMSw5MSwxNy4zYy0xNi42LDYuNC0zMC42LDE1LjEtNDQuNiwyOS4xCgkJYy0xNCwxNC0yMi42LDI4LjEtMjkuMSw0NC42Yy02LjIsMTYtMTAuNSwzNC4zLTExLjcsNjEuMkM0LjQsMTc5LDQuMSwxODcuNiw0LjEsMjU2YzAsNjguNCwwLjMsNzcsMS41LDEwMy45CgkJYzEuMiwyNi44LDUuNSw0NS4xLDExLjcsNjEuMmM2LjQsMTYuNiwxNS4xLDMwLjYsMjkuMSw0NC42YzE0LDE0LDI4LjEsMjIuNiw0NC42LDI5LjFjMTYsNi4yLDM0LjMsMTAuNSw2MS4yLDExLjcKCQljMjYuOSwxLjIsMzUuNCwxLjUsMTAzLjksMS41czc3LTAuMywxMDMuOS0xLjVjMjYuOC0xLjIsNDUuMS01LjUsNjEuMi0xMS43YzE2LjYtNi40LDMwLjYtMTUuMSw0NC42LTI5LjEKCQljMTQtMTQsMjIuNi0yOC4xLDI5LjEtNDQuNmM2LjItMTYsMTAuNS0zNC4zLDExLjctNjEuMmMxLjItMjYuOSwxLjUtMzUuNCwxLjUtMTAzLjlzLTAuMy03Ny0xLjUtMTAzLjkKCQljLTEuMi0yNi44LTUuNS00NS4xLTExLjctNjEuMmMtNi40LTE2LjYtMTUuMS0zMC42LTI5LjEtNDQuNmMtMTQtMTQtMjguMS0yMi42LTQ0LjYtMjkuMWMtMTYtNi4yLTM0LjMtMTAuNS02MS4yLTExLjcKCQlDMzMzLDQuNCwzMjQuNCw0LjEsMjU2LDQuMUwyNTYsNC4xeiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1NiwxMjYuNmMtNzEuNCwwLTEyOS40LDU3LjktMTI5LjQsMTI5LjRTMTg0LjYsMzg1LjQsMjU2LDM4NS40UzM4NS40LDMyNy40LDM4NS40LDI1NgoJCVMzMjcuNCwxMjYuNiwyNTYsMTI2LjZ6IE0yNTYsMzQwYy00Ni40LDAtODQtMzcuNi04NC04NHMzNy42LTg0LDg0LTg0YzQ2LjQsMCw4NCwzNy42LDg0LDg0UzMwMi40LDM0MCwyNTYsMzQweiIvPgoJPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMzkwLjUiIGN5PSIxMjEuNSIgcj0iMzAuMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
background-repeat: no-repeat;
}
.bg-instagram-color,
a.bg-instagram-color {
background-color: #b900b4;
color: #fff !important;
}
a.bg-instagram-color:hover {
color: rgba(255, 255, 255, 0.7) !important;
}
.text-color-instagram {
color: #b900b4;
}
.bg-youtube-icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNTUsNzlDMTUsNzksOCw3MCw4LDI1MmMwLDE4NCwxMiwxNzQsMjQ1LDE3NGMyNDMsMCwyNTEsNywyNTEtMTY4QzUwNCw2NSw0OTUsNzksMjU1LDc5eiBNMTkxLDMzMy44VjE2Mi4yCglsMTYzLDg0LjZMMTkxLDMzMy44eiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
background-repeat: no-repeat;
}
.bg-youtube-color,
a.bg-youtube-color {
background-color: #e32719;
color: #fff !important;
}
.text-color-youtube {
color: #e32719;
}
.bg-whatsapp-icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IldoYXRzQXBwX0xvZ28iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0NDAgNDQwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDAgNDQwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzNGQzM1MDt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qye2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGlkPSJzaGFwZV8zIiBjbGFzcz0ic3QwIiBkPSJNMTkuMiw0MjIuN2wyOC42LTEwNC4zYy0xNy42LTMwLjUtMjYuOS02NS4yLTI2LjktMTAwLjZjMC0xMTEsOTAuNC0yMDEuMywyMDEuMy0yMDEuMwoJYzUzLjksMCwxMDQuNCwyMSwxNDIuNCw1OWMzOCwzOCw1OC45LDg4LjYsNTguOSwxNDIuNGMwLDExMS05MC40LDIwMS4zLTIwMS4zLDIwMS4zYzAsMCwwLDAsMCwwaC0wLjFjLTMzLjcsMC02Ni44LTguNS05Ni4yLTI0LjUKCUwxOS4yLDQyMi43eiIvPgo8ZyBpZD0ic2hhcGVfMiI+Cgk8Zz4KCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTIsNDI5LjlsMjkuNi0xMDhjLTE4LjItMzEuNi0yNy45LTY3LjUtMjcuOC0xMDQuMmMwLTExNSw5My42LTIwOC41LDIwOC42LTIwOC41CgkJCWM1NS44LDAsMTA4LjIsMjEuNywxNDcuNSw2MS4xYzM5LjQsMzkuNCw2MS4xLDkxLjgsNjEsMTQ3LjVjMCwxMTUtOTMuNiwyMDguNS0yMDguNiwyMDguNWMwLDAsMCwwLDAsMGgtMC4xCgkJCWMtMzQuOSwwLTY5LjItOC44LTk5LjctMjUuNEwxMiw0MjkuOXogTTEyNy42LDM2My4ybDYuMywzLjhjMjYuNiwxNS44LDU3LjEsMjQuMSw4OC4yLDI0LjJoMC4xYzk1LjUsMCwxNzMuMy03Ny43LDE3My4zLTE3My4zCgkJCWMwLTQ2LjMtMTgtODkuOC01MC43LTEyMi42Yy0zMi43LTMyLjgtNzYuMy01MC44LTEyMi42LTUwLjhjLTk1LjYsMC0xNzMuNCw3Ny43LTE3My40LDE3My4zYzAsMzIuNyw5LjEsNjQuNiwyNi41LDkyLjJsNC4xLDYuNgoJCQlMNjIsMzgwLjRMMTI3LjYsMzYzLjJ6Ii8+Cgk8L2c+CjwvZz4KPGcgaWQ9InNoYXBlXzEiPgoJPHBhdGggY2xhc3M9InN0MiIgZD0iTTE3MC4xLDEzMC41Yy0zLjktOC43LTgtOC45LTExLjctOWMtMy0wLjEtNi41LTAuMS0xMC0wLjFjLTMuNSwwLTkuMSwxLjMtMTMuOSw2LjUKCQljLTQuOCw1LjItMTguMiwxNy44LTE4LjIsNDMuNWMwLDI1LjYsMTguNyw1MC40LDIxLjMsNTMuOWMyLjYsMy41LDM2LjEsNTcuOCw4OSw3OC43YzQ0LDE3LjQsNTMsMTMuOSw2Mi41LDEzczMwLjgtMTIuNiwzNS4yLTI0LjgKCQljNC4zLTEyLjIsNC4zLTIyLjYsMy0yNC44Yy0xLjMtMi4yLTQuOC0zLjUtMTAtNi4xYy01LjItMi42LTMwLjgtMTUuMi0zNS42LTE3cy04LjMtMi42LTExLjcsMi42Yy0zLjUsNS4yLTEzLjUsMTYuOS0xNi41LDIwLjQKCQljLTMsMy41LTYuMSwzLjktMTEuMywxLjNjLTUuMi0yLjYtMjItOC4xLTQxLjktMjUuOWMtMTUuNS0xMy44LTI2LTMwLjktMjktMzYuMWMtMy01LjItMC4zLTgsMi4zLTEwLjZjMi4zLTIuMyw1LjItNi4xLDcuOC05LjEKCQljMi42LTMsMy41LTUuMiw1LjItOC43YzEuNy0zLjUsMC45LTYuNS0wLjQtOS4xQzE4NC45LDE2Ni42LDE3NC44LDE0MC44LDE3MC4xLDEzMC41eiIvPgo8L2c+Cjwvc3ZnPgo=);
}
.bg-whatsapp-color,
a.bg-whatsapp-color {
background-color: #1ebea5;
}
.text-color-whatsapp {
color: #1ebea5;
}
.bg-email-icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MDAgNTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnPgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI0NjQuOCw4Ni42IDQxLjQsODYuNiAyNDcuMSwyODUgCSIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI2MS42LDMzMi4xYy00LjMsMy45LTkuNiw1LjgtMTUsNS44Yy01LjYsMC0xMS4yLTIuMS0xNS41LTYuM0w2LjQsMTE0Ljl2Mjk5LjFoNDg4VjEyMEwyNjEuNiwzMzIuMXoiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
background-repeat: no-repeat;
}
/* Facebook code */
.fb-like-box.fb_iframe_widget,
.fb-like-box.fb_iframe_widget span,
.fb-like-box.fb_iframe_widget span iframe[style] {
width: 99.5% !important;
}
.bigquote {
background: #ebedef;
border-radius: 3px;
border: 0 none;
font-size: 1.3em;
padding: 1.2em 1.5em;
}
.box-small,
.box.small {
padding: 0.45rem 0.6rem;
}
.box,
.box-normal {
padding: 1rem;
margin-bottom: 1rem;
}
.box-medium {
padding: 1.1rem;
}
.box-big,
.box.big {
padding: 1.25rem 1.1rem;
}
.box-huge,
.box.huge {
padding: 1.4rem 1.1rem;
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
.box-small,
.box.small {
padding: 0.6rem 0.7rem;
}
.box {
padding: 1rem;
}
.box-medium {
padding: 1.25rem;
}
.box-big,
.box.big {
padding: 1.5em;
}
.box-huge,
.box.huge {
padding: 2rem;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.box {
padding: 1rem;
}
.box-small,
.box.small {
padding: 0.6rem 0.7rem;
}
.box-medium {
padding: 1.5rem;
}
.box-big,
.box.big {
padding: 2rem;
}
.box-huge,
.box.huge {
padding: 3rem;
}
}
.tfmp-image a,
.tfmp-title a {
border-bottom: 0 none;
}
.section.bg-- {
background-color: transparent;
color: #fff;
}
.bg-none {
background: transparent;
color: #fff;
padding: 0 !important;
}
.fb-share,
.tw-share,
.button-share-medium,
.button-icon {
background-repeat: no-repeat;
background-size: 1.1em;
background-position: 0.65em center;
border: 1px solid rgba(21, 46, 43, 0.05);
border-radius: 5em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1;
padding: 0.5em 1em 0.5em 2.1em;
position: relative;
margin-bottom: 6px;
text-decoration: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.fb-share:hover,
.tw-share:hover {
color: #fff;
text-decoration: none;
border-color: rgba(0, 0, 0, 0.3);
}
.fb-share:active,
.tw-share:active {
top: 1px;
color: #eee;
}
.fb-share {
margin-right: 5px;
}
/* Image grid section */
.img-grid-square-title {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
color: #fff;
display: inline-block;
font-size: initial;
left: 0;
padding: 1.5em;
padding: calc(2% + 1em);
position: absolute;
opacity: 0;
-webkit-transition: 0.3s opacity;
-moz-transition: 0.3s opacity;
transition: 0.3s opacity;
text-align: initial;
width: 100%;
}
.img-grid-square-link:hover .img-grid-square-title {
opacity: 1;
}
.img-grid-square-link {
background-color: rgba(0, 0, 0, 0.1);
display: block;
text-align: center;
}
.img-grid-square-img {
display: block;
overflow: hidden;
padding-bottom: 100%;
position: relative;
}
.img-grid-square-img img {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* Tablet and up */
@media only screen and (min-width: 680px) {
.featboxes .section-inner {
align-items: flex-start;
display: -webkit-box;
display: flex;
justify-content: center;
padding: 0 1%;
text-align: center;
}
.featboxes .widget {
display: inline-block;
float: none;
text-align: initial;
vertical-align: top;
}
}
/* support for pre-flex, pre-grid columns that use floats and built-in margin */
@media screen and (max-width: 680px) {
.c1,
.c2,
.c2_5,
.c3,
.c3_3,
.c4,
.c5,
.c6,
.c7,
.c8,
.c9,
.c10 {
margin-bottom: 2rem;
}
.cm2_5,
.cm3_3,
.cm5,
.cm6_6,
.cm7_5,
.cm10 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
.cm2_5.right,
.cm3_3.right,
.cm5.right,
.cm6_6.right,
.cm7_5.right,
.cm10.right {
float: right;
}
.cm2_5 {
width: 23%;
}
.cm3_3 {
width: 31.333%;
}
.cm5 {
width: 48%;
}
.cm6_6 {
width: 64.666%;
}
.cm7_5 {
width: 73%;
}
.cm10 {
width: 98%;
}
.c1:last-child,
.c2:last-child,
.c2_5:last-child,
.c3:last-child,
.c3_3:last-child,
.c4:last-child,
.c5:last-child,
.c6:last-child,
.c7:last-child,
.c8:last-child,
.c9:last-child,
.c10:last-child {
margin-bottom: 0;
}
/* for grids of equal columns, automatically clear floats on the new line */
.cm2_5 + .cm2_5 + .cm2_5 + .cm2_5 + .cm2_5:nth-of-type(4n+5),
.cm3_3 + .cm3_3 + .cm3_3 + .cm3_3:nth-of-type(3n+4),
.cm5 + .cm5 + .cm5:nth-of-type(2n+3) {
clear: left;
}
}
@media screen and (min-width: 680px) and (max-width: 950px) {
.ct2_5,
.ct3,
.ct3_3,
.ct4,
.ct5,
.ct6,
.ct6_6,
.ct7,
.ct7_5,
.ct10 {
display: inline;
float: left;
position: relative;
margin-left: 2%;
margin-right: 2%;
}
.ct2_5 {
width: 21%;
}
.ct3 {
width: 26%;
}
.ct3_3 {
width: 29.333%;
}
.ct4 {
width: 36%;
}
.ct5 {
width: 46%;
}
.ct6 {
width: 56%;
}
.ct6_6 {
width: 62.666%;
}
.ct7 {
width: 66%;
}
.ct7_5 {
width: 71%;
}
.ct10 {
width: 96%;
}
.ct2_5.no-margin {
width: 25%;
}
.ct3_3.no-margin {
width: 33.333%;
}
.ct4.no-margin {
width: 40%;
}
.ct5.no-margin {
width: 50%;
}
.ct6.no-margin {
width: 60%;
}
.ct6_6.no-margin {
width: 66.666%;
}
.ct7_5.no-margin {
width: 75%;
}
.ct10.no-margin {
width: 100%;
}
/* for grids of equal columns, automatically clear floats on the new line */
.ct2_5 + .ct2_5 + .ct2_5 + .ct2_5 + .ct2_5:nth-of-type(4n+5),
.ct3_3 + .ct3_3 + .ct3_3 + .ct3_3:nth-of-type(3n+4),
.ct5 + .ct5 + .ct5:nth-of-type(2n+3) {
clear: left;
}
.c-wide {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
/* Utility classes - desktop*/
.c1,
.c2,
.c2_5,
.c3,
.c3_3,
.c4,
.c5,
.c6,
.c6_6,
.c7,
.c7_5,
.c8,
.c9,
.c10 {
display: inline;
float: left;
position: relative;
margin-left: 1%;
margin-right: 1%;
}
.c1 {
width: 7.9%;
}
.c2 {
width: 17.9%;
}
.c2_5 {
width: 23%;
}
.c3 {
width: 27.9%;
}
.c3_3 {
width: 31.3%;
}
.c4 {
width: 37.9%;
}
.c5 {
width: 47.9%;
}
.c6 {
width: 57.9%;
}
.c6_6 {
width: 64.6%;
}
.c7 {
width: 67.9%;
}
.c7_5 {
width: 72.9%;
}
.c8 {
width: 77.9%;
}
.c9 {
width: 87.9%;
}
.c10 {
width: 97.9%;
}
.c1.sm-margin,
.c2.sm-margin,
.c2_5.sm-margin,
.c3.sm-margin,
.c3_3.sm-margin,
.c4.sm-margin,
.c5.sm-margin,
.c6.sm-margin,
.c6_6.sm-margin,
.c7.sm-margin,
.c8.sm-margin,
.c9.sm-margin,
.c10.sm-margin {
margin: 0.5%;
}
.c1.sm-margin {
width: 8.9%;
}
.c2.sm-margin {
width: 18.9%;
}
.c2_5.sm-margin {
width: 24%;
}
.c3.sm-margin {
width: 28.9%;
}
.c3_3.sm-margin {
width: 32.333%;
}
.c4.sm-margin {
width: 38.9%;
}
.c5.sm-margin {
width: 48.9%;
}
.c6.sm-margin {
width: 58.9%;
}
.c6_6.sm-margin {
width: 65.666%;
}
.c7.sm-margin {
width: 68.9%;
}
.c7_5.sm-margin {
width: 73.9%;
}
.c8.sm-margin {
width: 78.9%;
}
.c9.sm-margin {
width: 88.9%;
}
.c10.sm-margin {
width: 98.9%;
}
.c1.no-margin {
width: 10%;
}
.c2.no-margin {
width: 20%;
}
.c2_5.no-margin {
width: 25%;
}
.c3.no-margin {
width: 30%;
}
.c3_3.no-margin {
width: 33.333%;
}
.c4.no-margin {
width: 40%;
}
.c5.no-margin {
width: 50%;
}
.c6.no-margin {
width: 60%;
}
.c6_6.no-margin {
width: 66.666%;
}
.c7.no-margin {
width: 70%;
}
.c7_5.no-margin {
width: 75%;
}
.c8.no-margin {
width: 80%;
}
.c9.no-margin {
width: 90%;
}
.c10.no-margin {
width: 100%;
}
/* for grids of equal columns, automatically clear floats on the new line */
/* start with the second row (5n+6 instead of 5n+1) */
.c2 + .c2 + .c2 + .c2 + .c2 + .c2:nth-of-type(5n+6),
.c2_5 + .c2_5 + .c2_5 + .c2_5 + .c2_5:nth-of-type(4n+5),
.c3_3 + .c3_3 + .c3_3 + .c3_3:nth-of-type(3n+4),
.c5 + .c5 + .c5:nth-of-type(2n+3) {
clear: left;
}
.left1 {
margin-left: 11%;
}
.left2 {
margin-left: 21%;
}
.left3 {
margin-left: 31%;
}
.left4 {
margin-left: 41%;
}
.left5 {
margin-left: 51%;
}
.left-1 {
margin-left: -9%;
}
.left-2 {
margin-left: -19%;
}
.left-3 {
margin-left: -29%;
}
.left-4 {
margin-left: -39%;
}
.left-5 {
margin-left: -49%;
}
.right {
float: right;
}
.right-1 {
right: -9%;
position: absolute;
}
.right-2 {
right: -19%;
position: absolute;
}
.right-3 {
right: -29%;
position: absolute;
}
.right-4 {
right: -39%;
position: absolute;
}
.right-5 {
right: -49%;
position: absolute;
}
}
/* Styles specific to the content audit refresh */
/* Colors */
/* Margin */
@media screen and (max-width: 720px) {
/* Mobile and below */
.margin-top-none-mobile {
margin-top: 0;
}
}
.margin-top-auto {
margin-top: auto;
}
/* Padding */
.left-column {
padding-right: 1%;
}
.right-column {
padding-left: 1%;
}
@media (min-width: 992px) {
.padding-left-none-desktop {
padding-left: 0;
}
.padding-right-none-desktop {
padding-right: 0;
}
}
/* Border */
.border-rounded-large {
border-radius: 20px;
}
.border-rounded {
border-radius: 8px;
}
.border-bottom {
border-bottom: 2px solid #E5E7EB;
}
.display-table {
display: table;
}
/* Flex classes */
.display-flex {
display: flex;
}
.flex-direction-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.justify-content-start {
justify-content: start;
}
.justify-content-end {
justify-content: end;
}
.justify-content-space-evenly {
justify-content: space-evenly;
}
.align-self-center {
align-self: center;
}
.align-self-flex-start {
align-self: flex-start;
}
.background-size-cover {
background-size: cover;
}
.align-items-center {
align-items: center;
}
.align-items-flex-start {
align-items: flex-start;
}
.list-style-none {
list-style: none;
}
.margin-right-small {
margin-right: 10px;
}
/* Visibility */
.visibility-hidden {
visibility: hidden;
}
/* Mobile and below */
@media screen and (max-width: 720px) {
.flex-direction-column-mobile {
flex-direction: column;
}
.display-flex-mobile {
display: flex;
}
.text-center-mobile {
text-align: center;
}
.display-inline-block-mobile {
display: inline-block;
}
}
/* Desktop and above */
@media screen and (min-width: 720px) {
.display-flex-desktop {
display: flex;
}
}
/* Custom component styles */
/* Callout Container */
.callout-container {
border-radius: 20px;
margin-bottom: 2.5%;
margin-top: 2.5%;
}
@media screen and (min-width: 720px) {
.callout-container {
border-radius: 0px 20px 20px 0;
}
}
.callout-img {
background-size: cover;
min-height: 200px;
}
/* BigQuote component */
.bigquote-container {
background-color: #F3F4F6;
display: inline-block;
padding: 36px;
margin: 20px;
}
.bigquote-container.top {
border-radius: 8px 8px 0 0;
margin-bottom: 0;
}
.bigquote-container.bottom {
border-radius: 0 0 8px 8px;
margin-top: 0;
}
.bigquote-container .expando {
border-style: none;
}
.bigquote-container .border-right {
border-right: 2px solid #E5E7EB;
}
.text-blue-important.arrow-right::after,
.text-blue-important.arrow-down::after {
background-color: #0F81E8 !important;
}
/* Donation Component */
.donate-btn-container li {
flex: 30%;
margin-top: 10px;
margin-right: 10px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}
.donate-btn-container a {
flex: 100%;
margin-top: 10px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}
.donate-btn-container li.selected {
background-color: #0F81E8 !important;
color: #fff !important;
}
.toggle-container .one-time-monthly-toggle {
border-radius: 98px;
padding: 4px;
font-size: 12px;
}
.toggle-container .one-time-monthly-toggle a {
flex: 50%;
border: none;
}
.toggle-container .one-time-monthly-toggle a:hover {
box-shadow: none;
}
.toggle-container .one-time-monthly-toggle a.selected {
background-color: #0F81E8;
color: #fff !important;
}
/* Card Component */
.card {
background-color: #F9FAFB;
border-radius: 16px;
margin-top: 10px;
padding: 16px 20px;
height: auto;
}
.card p:not(.text-large), .card li {
font-size: 16px;
}
.card p.text-large {
font-size: 20px;
}
.card .expando-link {
letter-spacing: 0.3px;
font-size: 0.9em;
}
.card .expando-inner {
color: #17292e !important;
}
.card .button.button-refresh, .card .homepage-join-section #action-form .input-wrapper .button.button-primary, .homepage-join-section #action-form .input-wrapper .card .button.button-primary, .card .expando.text-blue-important .button.expando-link, .expando.text-blue-important .card .button.expando-link {
width: 100%;
}
@media screen and (max-width: 949px) {
.card {
width: 100%;
}
}
@media screen and (min-width: 950px) {
.need-more-help {
margin-left: 0.5em;
margin-right: 0.5em;
}
}
.card-container .section-inner.code-inner {
display: flex;
flex-wrap: wrap;
}
/* Expando */
.expando.refresh {
border-radius: 6px;
}
.expando.text-blue-important .expando-link {
color: #0F81E8 !important;
}
.expando.text-blue-important .expando-link::after {
left: unset;
right: 1em;
}
.expando-hide-arrow.expando-expanded > .expando-link::after {
border: none;
}
.homepage-join-section #action-lead .section-inner {
display: flex;
flex-wrap: wrap;
}
.homepage-join-section #action-lead .section-inner #action-header {
margin: auto;
}
.homepage-join-section #action-form #t {
margin-bottom: 10px;
}
.homepage-join-section #action-form .input-wrapper .button-primary {
width: 100%;
}
.circle-img-container {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circle-img-container img {
width: auto;
height: 100%;
}
.hero-heading {
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/* Sections */
@media screen and (min-width: 1900px) {
.width-wide .section-inner {
max-width: 90rem;
}
}
.card-img {
height: 200px;
}
.get-involved-card {
height: 400px;
}
/* Nav */
#site-nav.nav-desktop-dropdown .menu > li:hover {
background-color: #fff;
}
nav.nav-desktop-dropdown a:hover,
nav.nav-desktop-dropdown .menu-item-has-children:hover > a {
background-color: #fff;
color: #1F2937;
}
#site-nav.nav-desktop-dropdown .menu > li:hover > a {
color: #0F81E8;
}
nav.nav-desktop-dropdown .sub-menu li {
background-color: #fff;
padding: 8px 8px 0 8px;
}
nav.nav-desktop-dropdown .sub-menu li:last-child {
padding-bottom: 8px;
}
nav.nav-desktop-dropdown .sub-menu {
border-radius: 0 6px 6px;
overflow: auto;
}
/* if a top-level dropdown menu item with a submenu is last or second-to-last
re-position the rounded borders so they coorectly align with box */
nav.nav-desktop-dropdown .menu-item-has-children:nth-last-child(2) .sub-menu,
nav.nav-desktop-dropdown .menu-item-has-children:last-child .sub-menu {
border-radius: 6px 0 6px 6px;
}
#site-nav.nav-desktop-dropdown .menu > li:hover > .sub-menu a {
color: #1F2937;
}
#site-nav.nav-desktop-dropdown .menu > li:hover > .sub-menu a:hover {
color: #0F81E8;
background-color: #E5F3FF;
border-radius: 6px;
}
.en nav.nav-desktop-dropdown a, .en a.site-header-item {
font-size: 0.875em;
}
#site-header.refresh {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.3) 100%) !important;
}
#intro.refresh, #section_1.refresh {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) !important;
}
#donate-bar .section-inner {
max-width: 56rem;
}
/*
English-only style customizations
*/
.en nav.nav-desktop-dropdown a,
.en a.site-header-item {
font-size: 0.75em;
letter-spacing: calc(0.07rem - 0.01em);
text-transform: uppercase;
}
.en nav.nav-desktop-dropdown .sub-menu a {
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
}
.en nav.nav-desktop-dropdown .sub-menu .sub-menu a {
font-size: 0.85em;
}
.en #site-nav-toggle-text {
letter-spacing: calc(0.07rem - 0.01em);
text-transform: uppercase;
transform: translateZ(1px);
}
.en .form-layout-horizontal .input-text label,
.en .form-layout-horizontal .input-select label {
letter-spacing: calc(0.07rem - 0.01em);
text-transform: uppercase;
}
.en input.submit,
.en input[type=submit],
.en button,
.en .button {
letter-spacing: calc(0.07rem - 0.01em);
text-transform: uppercase;
}
/* ----- Language nav ----- */
#site-language-nav-toggle-icon {
position: relative;
top: 0.02em;
}
#site-language-nav-toggle-text {
display: none;
}
@media screen and (min-width: 680px) {
#site-language-nav-toggle-text {
display: initial;
}
}
/* Arabic */
nav.nav-desktop-dropdown.meta .menu .lang-ar a {
direction: rtl;
letter-spacing: 0;
}
/* General purpose utility classes */
.clear {
clear: both !important;
display: block;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 0 !important;
}
.hide,
.hidden,
[hidden] {
display: none !important;
font-size: 0;
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
}
/* Mobile Only */
@media only screen and (max-width: 680px) {
.mobile-hide {
display: none !important;
}
}
/* Tablet Only */
@media only screen and (min-width: 680px) and (max-width: 950px) {
.tablet-hide {
display: none !important;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.desktop-hide {
display: none !important;
}
}
.opacity-100 {
opacity: 1;
}
.opacity-75 {
opacity: 0.75;
}
.opacity-50 {
opacity: 0.5;
}
.sticky,
.js-sticky {
position: sticky;
top: -1px; /* fixes weird little 1px gap */
width: 100%;
z-index: 100;
}
/* Mobile-only */
@media only screen and (max-width: 680px) {
.mobile-sticky {
position: sticky;
top: -1px; /* fixes weird little 1px gap */
width: 100%;
z-index: 100;
}
}
/* Tablet and larger */
@media only screen and (min-width: 680px) and (max-width: 950px) {
.tablet-sticky {
position: sticky;
top: -1px; /* fixes weird little 1px gap */
width: 100%;
z-index: 100;
}
}
/* Desktop and larger */
@media only screen and (min-width: 950px) {
.desktop-sticky {
position: sticky;
top: -1px; /* fixes weird little 1px gap */
width: 100%;
z-index: 100;
}
}
/*# sourceMappingURL=style.css.map */