/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* clean up var import later
*/
:root {
--global--color-primary: #1D3E75;
--global--color-secondary: #708AA7;
--font-default: apparat, sans-serif;
--font-alt: ivypresto-headline, serif;
--font-size-default: 18px;
--font-weight-default: 300;
--line-height-default: 1.333;
}
/** end vars */
.wp-block-acf-masthead {
margin: 0 auto;
width: 100vw;
}
.wp-block-acf-masthead.style3 {
border: 1px solid white;
}
.wp-block-acf-masthead.style3 .app__block-inner .app__block-content,
.wp-block-acf-masthead.style3 .app__block-inner .app__block-media {
flex-basis: 50%;
max-width: 50%;
}
.wp-block-acf-masthead .shell {
max-width: 1440px;
margin: auto;
}
@media (max-width: 1024px) {
.wp-block-acf-masthead .shell {
padding: 16px;
}
}
@media (max-width: 768px) {
.wp-block-acf-masthead .shell {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
.wp-block-acf-masthead .shell .app__block-inner {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0px;
}
.wp-block-acf-masthead .shell .app__block-inner > * {
flex: 1 1 50%;
max-width: 50%;
box-sizing: border-box;
}
@media (max-width: 1024px) {
.wp-block-acf-masthead .shell .app__block-inner > * {
max-width: 100%;
}
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-media {
position: relative;
height: auto;
width: 100%;
/* 1:1 Aspect Ratio */
/* Just for visibility */
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-media > img {
width: 100% !important;
height: auto !important;
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-content {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
align-items: flex-start;
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-content h1 {
color: var(--global--color-primary);
text-align: left;
margin-bottom: 0;
font-size: 48px;
}
@media (max-width: 1024px) {
.wp-block-acf-masthead .shell .app__block-inner .app__block-content h1 {
font-size: 36px;
}
}
@media (max-width: 768px) {
.wp-block-acf-masthead .shell .app__block-inner .app__block-content h1 {
font-size: 28px;
}
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-content p {
color: var(--global--color-primary);
}
@media (max-width: 1024px) {
.wp-block-acf-masthead .shell .app__block-inner .app__block-content p {
font-size: 18px;
}
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-content .tagwrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 16px;
gap: 32px;
flex-wrap: wrap;
row-gap: 8px;
}
.wp-block-acf-masthead .shell .app__block-inner .app__block-content .tagwrapper .tag {
color: var(--global--color-secondary);
font-size: 0.85rem;
letter-spacing: 0;
text-transform: uppercase;
border-bottom: 2px solid var(--global--color-secondary);
}
.wp-block-acf-masthead.style1 {
padding: 0px !important;
}
.wp-block-acf-masthead.style1 .shell {
padding: 0px;
}
@media (max-width: 1024px) {
.wp-block-acf-masthead.style1 .shell {
padding: 0 16px;
}
}
@media (max-width: 768px) {
.wp-block-acf-masthead.style1 .shell {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
.wp-block-acf-masthead.style1 .app__block-inner {
position: relative;
display: grid;
grid-template-columns: 1fr 2fr;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
@media (max-width: 768px) {
.wp-block-acf-masthead.style1 .app__block-inner {
grid-template-columns: 1fr;
}
}
.wp-block-acf-masthead.style1 .app__block-inner .app__block-content {
max-width: 100%;
padding-top: 64px;
padding-bottom: 32px;
}
.wp-block-acf-masthead.style1 .app__block-inner .app__block-content p {
max-width: 100%;
}
.wp-block-acf-masthead.style1 .app__block-inner .featured {
max-width: 100%;
height: 100%;
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner {
align-items: center;
height: 100%;
grid-template-columns: 1fr 1fr;
gap: 0 !important;
}
@media (max-width: 768px) {
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner {
grid-template-columns: 1fr;
}
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media {
padding-bottom: 0;
transition: all 0.8s;
overflow: hidden;
position: relative;
z-index: 0;
border-radius: 0px;
width: 100%;
height: 100%;
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media > img {
position: relative;
z-index: 1;
height: 86% !important;
width: 100% !important;
-o-object-fit: cover;
object-fit: cover;
transition: all 0.8s;
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media:after {
content: " ";
background-color: #FFFCF2;
width: 50%;
height: 114%;
position: absolute;
z-index: -1;
right: 0;
top: -32px;
}
@media (max-width: 768px) {
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-media:after {
width: 100%;
}
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-content {
background-color: #FFFCF2;
height: 100%;
max-width: 100%;
padding-left: 32px;
padding-right: 16px;
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-content h3 {
font-size: 28px;
}
.wp-block-acf-masthead.style1 .app__block-inner .featured .app__block-inner .app__block-content .tag {
border-color: #57718D !important;
color: #57718D !important;
}
.wp-block-acf-masthead.style4 .shell .app__block-inner {
justify-content: flex-start;
align-items: flex-start;
}
.wp-block-acf-masthead.style4 .shell .app__block-inner .app__block-content.fullwidth {
max-width: 100%;
}
The Accessibility Menu can be enabled by clicking the accessibility menu icon that appears on the top right corner of the page. After selecting the accessibility menu, please wait a moment for it to load.
We’re working on making our website and content accessible to all users, but we know we haven’t fully achieved that goal. If you have questions, suggestions, or would like to request an accessible version of a particular document production or content, please contact us at info@americanoversight.org.
