@font-face {
    font-family: "Bayard Regular";
    src: url('assets/fonts/titleFont/BAYARD-Regular.eot') format('embedded-opentype'),
        url('assets/fonts/titleFont/BAYARD-Regular.woff2') format('woff2'),
        url('assets/fonts/titleFont/BAYARD-Regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    /* normal */
}

:root {
    --x: 15px;
    --y: 30px;
    --z: 60px;
    --pointer: pointer;
    --default: default;
    --caption: 16px;
    --body: 20px;
    --menu: 18px;
    --quotes: 50px;
    --filter: 24px;
    --feat_blog: 90px;
    --footer_title: 73px;
    --logo: 60px;
    --h1: 120px;
    --h2: 32px;
    --display: 12vw;

    /* fonts */
    --bodyFont: "Poppins", sans-serif;
    --titleFont: "Bayard Regular";

    /* colors */
    
    
    
    /* --staywhite: #FFFCF8; */

    /* font colors */
    --black: #000000;
    --darkgrey: #3C3C3C;
    --white: #FFFCF8;
    --orange-f: #F27422;
    --lightyellow-f: #EBBD69;
    --grey-f: #6F6B6A;

    /* background colors */
    --darkgreen: #014542;
    --darkyellow: #D6A548;
    --orange: #F27422;
    --grey: #6F6B6A;
    --darkmint: #82CBAD; 
    --darkgrey-bg: #3C3C3C;

    --lightyellow: #EBBD69;
    --white_bg: #FFFCF8;
    --offwhite: #F6F4F1;
    --pink: #F39397;
    --mintgreen: #6BC2A0; 
    --lightgrey: #DFDFDD;

    --access_yellow: #FFF862;
    --access_blue: #01FFFF;


    /* accessibility variables */
    --title_lh: 0.9;
    --body_lh: 1.7;
    --title_ls: normal;
    --body_ls: normal;
    --title_hl: none;
    --link_hl: none;
    --link_hl_underline: underline;
    --img_display: visible;
    --img_filter: none;
    --access_container_size: calc(100% / 4 - var(--y));

}

html {
    scroll-behavior: smooth;
    /* max-width: 1100px; */
    margin: 0 auto;
    background: var(--darkyellow);
}

body {
    margin: 0;
    cursor: var(--default);
    font-family: var(--bodyFont);
    overflow-x: hidden;
    color: var(--darkgrey);
    background: var(--white_bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--title_lh);
    letter-spacing: var(--title_ls);
    border: var(--title_hl);
    font-weight: 400;
    padding: var(--highlight_padding);
    margin: 0;
    font-family: var(--titleFont);
    border: var(--title_hl);
}

h1 {
    font-size: var(--h1);
    padding-bottom: var(--z);
}

h2,
h3 {
    font-size: var(--h2);
    padding-bottom: var(--x);
}

a {
    text-decoration: var(--link_hl);
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);
    cursor: var(--pointer);
    text-decoration: var(--link_hl);
    overflow-wrap: break-word;
    word-break: break-word;
}

p {

    font-size: var(--body);
    margin-top: 0;
    margin-bottom: var(--x);
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);
}

button {
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);
    text-decoration: var(--link_hl);

}

figcaption {
    font-size: var(--caption);
}

blockquote {
    margin: 0;
}

blockquote p {
    line-height: var(--title_lh);
    letter-spacing: var(--body_ls);
    font-size: var(--quotes);
    font-family: var(--titleFont);
    text-transform: uppercase;
    margin: 0;
}

.has-darkyellow-background-color {
    background-color: var(--darkyellow) !important;
}

.has-lightyellow-background-color {
    background-color: var(--lightyellow) !important;
}

.has-orange-background-color {
    background-color: var(--orange) !important;
}

.has-darkmint-background-color {
    background-color: var(--darkmint) !important;
}

.has-mintgreen-background-color {
    background-color: var(--mintgreen) !important;
}

.has-pink-background-color {
    background-color: var(--pink) !important;
}

.has-darkgreen-background-color {
    background-color: var(--darkgreen) !important;
}

.has-grey-background-color {
    background-color: var(--grey) !important;
}

.has-darkgrey-background-color {
    background-color: var(--darkgrey) !important;
}

.has-darkyellow-color {
    color: var(--darkyellow) !important;
}

.has-lightyellow-color {
    color: var(--lightyellow-f) !important;
}

.has-orange-color {
    color: var(--orange) !important;
}

.has-darkmint-color {
    color: var(--darkmint) !important;
}

.has-mintgreen-color {
    color: var(--mintgreen) !important;
}

.has-pink-color {
    color: var(--pink) !important;
}

.has-darkgreen-color {
    color: var(--darkgreen) !important;
}

.has-grey-color {
    color: var(--grey) !important;
}

.has-darkgrey-color {
    color: var(--darkgrey) !important;
}

.wp-block-quote>cite {
    font-size: var(--caption);
    font-family: var(--bodyFont);
}

.wp-block-button__link {

    padding-top: 5px !important;
    padding-bottom: 5px !important;

}

img {
    visibility: var(--img_display);
    filter: var(--img_filter);
}


figcaption {
    visibility: var(--img_display);
    font-size: var(--caption);
    font-family: var(--bodyFont);
}

blockquote {
    font-family: var(--titleFont);
    font-size: var(--body);
}

.darkyellow_bg {
    background: var(--darkyellow);
}

.lightyellow_bg {
    background: var(--lightyellow);
}

.lightyellow_fill {
    fill: var(--lightyellow);
}

.orange_bg {
    background: var(--orange);
}

.orange_fill {
    fill: var(--orange);
}

.mintgreen_bg {
    background: var(--mintgreen);
}

.mintgreen_fill {
    fill: var(--mintgreen);
}

.pink_bg {
    background: var(--pink);
}

.accessblue_fill {
    fill: var(--access_blue);
}

.accessyellow_fill {
    fill: var(--access_yellow);
}

.darkgreen_bg {
    background: var(--darkgreen);
}

.grey_bg {
    background: var(--grey);
}

.white_fill {
    fill: var(--white);
}

.white_bg {
    background: var(--white_bg);
}

.offwhite_bg {
    background: var(--offwhite);
}

.white_txt {
    color: var(--white);
}

.white_txt a {
    color: var(--white);
}

.white_txt .sub-menu a {
    color: var(--grey);
}

.orange_txt {
    color: var(--orange-f);
}

.orange_txt h1 {
    color: var(--orange-f);
}

.orange_txt strong {
    color: var(--orange-f);
}

.orange_bold {
    color: var(--darkgrey);
}

.orange_bold strong {
    color: var(--orange-f);
}

.darkgreen_txt {
    color: var(--darkgreen);
}

.black_txt {
    color: var(--darkgrey);
}

.black_txt_h1 h1 {
    color: var(--darkgrey) !important;

}

.black_txt p {
    color: var(--darkgrey);

}

.black_txt a {
    color: var(--darkgrey);
}

.black_txt ul {
    color: var(--darkgrey);
}

.center_txt {
    text-align: center;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.black_fill {
    fill: var(--darkgrey);
}

.black_stroke {
    stroke: var(--darkgrey);
}

.site_header {
    width: calc(100% - var(--z) * 2);
    display: flex;
    padding-left: var(--z);
    padding-right: var(--z);
    padding-top: var(--x);
    padding-bottom: var(--x);
    align-items: center;
    position: fixed;
    z-index: 100;

}

.site_header h3 {
    /* padding-top: var(--x); */
    padding-bottom: 0;
    font-size: 60px;
}

.logo {
    font-family: var(--titleFont);
    font-size: var(--logo);
    line-height: 0.7;
}

.here_flex {
    display: flex;


}


.here_wrap {
    /* max-width: 1280px; */
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
}

.here_flex .left_col {
    width: 30%;
    margin-right: var(--z);
}

.here_flex .left_col h1 {
    padding-bottom: var(--x);
    text-align: right;
    line-height: 0.7;

}

.here_flex .right_col {
    width: 60%;
}

.here_flex .right_col p {
    padding-top: 10px;
}

.main_menu {
    list-style: none;
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px 0px 0px 0px;
}

.main_menu ul {
    padding: 0;
}

.main_menu a {
    margin-bottom: var(--x);
    margin-right: var(--x);
    font-size: var(--menu);
}

.footer_menu {
    list-style: none;
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px 0px 0px 0px;
}

.footer_menu ul {
    padding: 0;
}

.footer_menu a {
    margin-bottom: var(--x);
    margin-right: var(--x);
    font-size: var(--menu);
}

.main_menu_page {
    list-style: none;
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px 0px 0px 0px;
}

.main_menu_page ul {
    padding: 0;
}

.sub-menu li a {
    margin-right: 0px;
}

.main_menu_page a {
    margin-bottom: var(--x);
    margin-right: var(--x);
    font-size: var(--menu);
}

ul {
    font-size: var(--body);
}

.h1_pad h1 {
    padding-bottom: 120px;
}

.h1_white {
    color: var(--white);
}

#headerMenu {
    margin-left: auto;
    z-index: 10;
    position: relative;
    display: flex;
    align-items: baseline;
}

.access {
    font-size: var(--menu);
    margin-right: var(--x);
    cursor: var(--pointer);
    line-height: var(--title_lh);
    letter-spacing: var(--title_ls);

}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

.sub-menu {
    list-style: none;
    display: none;
    position: absolute;
    padding-top: 5px !important;
}

.sub-menu:hover {
    display: block;
}

.sub-menu li {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    background: var(--white_bg);
}

.sub-menu a:hover {
    color: var(--orange);
    -webkit-text-stroke: 1px var(--orange);

}

.sub-menu li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.sub-menu li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-bottom: 5px;
}

/* ----------------------------- Reading Mask ----------------------------- */

.dpkCursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300vh;
    pointer-events: none;
    z-index: 2000;
    display: none;
}

.readingmaskTop {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(50% - 75px);
    background-color: black;
    opacity: 0.5;
}

.readingmaskBottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: calc(50% - 75px);
    background-color: black;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------------- */

.yellow_bkgrnd {
    background-color: var(--yellow);
}

.splash {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white);
    z-index: 2;/
}

.homepage_container {
    min-height: 80vh;
    position: relative;
    text-align: center;
}

.homepage_container h2 {
    padding-bottom: var(--y);
}

.center_content {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.fade_out {
    animation: fadeOut 1s ease-in-out 4s forwards;
}

.fade_out_opacity {
    animation: fadeOutOpacity 1s ease-in-out 6.5s forwards;
}

@keyframes fadeOutOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.feat_img {
    position: relative;
}

.feat_img img {
    width: 100%;
    /* object-fit: contain;
    object-position: bottom;
    vertical-align: bottom; */
    vertical-align: bottom;
    object-position: bottom;
    object-fit: cover;
    height: 100%;
}

.feat_img svg {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    max-height: 40px;
}

.yellow_circle {
    position: absolute;
    right: 0px;
    top: 0px;
}

.yellow_circle_blog {
    position: absolute;
    left: -50px;
    top: -100px;
}

.white_edge_svg svg {
    width: 100%;
    background: var(--lightyellow);
    max-height: 40px;

}

.orange_edge svg {
    width: 100%;
    background: var(--white);
    max-height: 40px;
    margin-bottom: -10px;

}

.mintgreen_edge {
    background: var(--lightyellow);
}

.mintgreen_edge svg{
    background: var(--lightyellow);
    max-height: 40px;
    margin-bottom: -10px;
    width: 100%;
}

.edge_svg svg {
    width: 100%;
    max-height: 30px;
}

.oval_top svg {
    width: 100%;
    background: var(--white_bg);
    vertical-align: bottom;
}

.y_pad {
    padding: var(--y);
}

.super_pad {
    padding-left: 15%;
    padding-right: 15%;
}

.medium_pad {
    padding-left: 10%;
    padding-right: 10%;
}

.z_pad {
    padding: var(--z);
}

.z_pad_custom {
   padding: var(--z) var(--z) var(--x) var(--z); 
}

.large_pad {
    padding: 10%;
}

.large_pad_homepage {
   padding: 10% 10% 1% 10%; 
}

.large_pad_small_btm {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: var(--x);
}

.large_pad_top_btm {
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: var(--x);
}

.z_pad_top {
    padding-top: var(--z);
}

.y_pad_top {
    padding-top: var(--y);
}

.homepage_top_pad {
    padding-top: 220px;
}

.page_top_pad {
    padding-top: 140px;
}

.page_container .wp-block-image img {
    width: 100%;
}

.min_height_page {
    min-height: 60vh;
}

.page_container h1 {
    z-index: 5;
    position: relative;
}

.about_padding h1 {
    padding-bottom: var(--y);
}

.donations_padding {
    padding-bottom: 80px;
}

.donations_padding h1 {
    padding-bottom: 0;
}



.page_container blockquote {
    padding-bottom: var(--y);
    padding-top: 0;
}

.page_container .wp-block-image figcaption {
    margin-bottom: var(--x);
}

.page_container .wp-block-columns {
    margin-bottom: var(--x);

}


.no_gap :where(.wp-block-columns.is-layout-flex) {
    gap: 0px !important;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 45px !important;
}

#solidaritySection h1 {
    color: var(--white);
    padding-bottom: 120px;
}

#solidaritySection .wp-block-columns {
    padding-bottom: 120px;
}


#imageGridSection .wp-block-columns {
    padding-bottom: 120px;
}


#fundingSection h1 {
    color: var(--white);
    padding-bottom: 120px;

}



.here_flex .left_col {
    color: var(--white);

}

#homePage h1 {
    padding-bottom: 120px;
}

.large_column_pad .wp-block-columns {
    padding-bottom: 120px;
}

.feat_container {
    display: flex;
}

.feat_container img {
    width: 55%;
    height: 60vw;
    object-fit: cover;
}

.info_col {
    width: 45%;
    padding-left: var(--y);
    /* padding-top: var(--y); */
}

.info_col p {
    padding-left: 0;
}

.info_col h2 {
    font-size: var(--feat_blog);
}

.filter_flex {
    align-items: center;
    display: flex;
    position: relative;
    padding-left: var(--z);
    padding-right: var(--z);
    /* padding-top: var(--y); */

}



.filter_btn {
    margin-left: auto;
    background: none;
    border: none;
    font-size: var(--filter);
    font-family: var(--bodyFont);
    display: flex;
    align-items: center;
    cursor: var(--pointer);
    color: var(--darkgrey);
    text-decoration: underline;
}

.filter_btn:hover {
    -webkit-text-stroke: 1px var(--darkgrey);
}

.filter_btn_left {
    /* margin-left: auto; */
    background: none;
    border: none;
    font-size: var(--filter);
    font-family: var(--bodyFont);
    display: flex;
    align-items: center;
    cursor: var(--pointer);
    color: var(--darkgrey);
    text-decoration: underline;
}

.filter_btn_left:hover {
    -webkit-text-stroke: 1px var(--darkgrey);
}


.filter_btn svg {
    padding-left: 5px;
    height: 20px;
}

.donation_btn {
    background: var(--lightgrey);
    border-radius: var(--x);
    padding-left: var(--x);
}


.sub_filter {
    display: none;
    position: absolute;
    width: 200px;
    background: var(--white_bg);
    padding: var(--x);
    font-size: var(--caption);
}

.right {
    right: var(--z);
    top: var(--z);
    margin-top: var(--x);
}

 .left {
    left: var(--z);
    top: var(--z);
    margin-top: var(--x);
}

.left_tag {
    left: var(--z);
    top: 175px;
    margin-top: var(--x);
}

.right_tag {
    right: var(--z);
    top:175px;
    margin-top: var(--x);
}

.sub_filter a {
    display: block;
    color: var(--darkgrey);
}

.sub_filter a:hover {
    -webkit-text-stroke: 1px var(--darkgrey);

}

.active_tag {
    font-weight: bold;
    text-decoration: underline;
}

.next {
    display: none;
}

.prev {
    display: none;
}

.first_page .current::before {
    content: "Page ";
}

.morethan_one .page-numbers:nth-child(2)::before {
    content: "Page ";
    opacity: 1;
}

.final_page .page-numbers:nth-child(2)::before {
    content: "Page ";
    opacity: 1;
}


.page-numbers::after {
    content: ",";
}

.page-numbers:nth-last-child(2)::after {
    content: " ";
}

.final_page .page-numbers:nth-last-child(2)::after {
    content: ",";
}

.final_page .page-numbers:last-child::after {
    content: " ";
}

.page-numbers {
    /* margin-right: 5px; */
    opacity: 0.7;
    padding: 2px;
    font-family: var(--titleFont);
    color: var(--darkgrey);

}

.page-numbers a {
    color: var(--darkgrey);
}

.current {
    opacity: 1;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--z);
    font-size: var(--filter);
    text-transform: uppercase;

}

.thumbnail p {
    font-size: var(--caption);
}

.thumb_tag {
    color: var(--grey-f);
    padding-right: 5px;
}

.thumb_tag::after {
    content: ", ";
}

.thumbnail .thumb_tag:last-child::after {
    content: " ";
}

.tag_container {
    /* padding-left: 10px; */
}

.thumb_info_flex {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.blog_container {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-evenly; */
}

.thumb_info_flex p {
    margin-bottom: 10px;
}

.thumbnail:nth-child(3n) {
    margin-right: 0;
}

.thumbnail {
    width: calc(100% / 3 - var(--y) * 2 / 3);
    margin-bottom: var(--y);
    margin-right: var(--y);
}

.thumbnail img {
    width: 100%;
    object-fit: cover;
    height: 45vh;
}

.thumbnail h5 {
    font-size: var(--h2);
    text-transform: lowercase;
}

.blog_tag {
    font-size: var(--caption);
    padding-bottom: var(--x);
    /* display: block; */
}

.blog_tag::after {
    content: ", ";
}

.blog_tag:last-child::after {
    content: " ";
}

.x_pad_btm {
    padding-bottom: var(--x);
}

.blog_post_info p {
    margin-bottom: 0;
    font-size: var(--caption);
}

.faq_flex {
    display: flex;
    padding-top: var(--y);
    /* flex-wrap: wrap; */
}

.faq_container {
    border-bottom: 1px solid var(--black);

}

.faq_flex h1 {
    width: 45%;
    font-size: 240px;
    line-height: 0.6;
}

.faq_col {
    width: 55%;
    /* margin-top: var(--z); */
    margin-left: var(--x);
}

.faq_answer {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
    display: flex;
    /* align-items: center; */
    /* margin-bottom: var(--x); */

}

.faq_question {
    display: flex;
    cursor: var(--pointer);
    padding-bottom: var(--x);
    padding-top: var(--x);
}

.open_faq {
    margin-left: auto;
    font-size: var(--body);

}

.close_faq {
    display: none;
    font-size: var(--body);
    margin-left: auto;


}

.faq_question h4 {
    font-size: var(--body);
    font-family: var(--bodyFont);
    font-weight: 500;
}

.access_overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 50;
    top: -100%;
    transition: 1s;
    background: var(--white_bg);
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
}

.access_overlay::-webkit-scrollbar {
    display: none;
}

.access_flex {
    display: flex;
    padding-top: 120px;
    padding-left: var(--z);
    padding-right: var(--z);

    width: calc(100% - 120px);
    flex-wrap: wrap;
    justify-content: space-between;
}

.access_thumb {
    width: var(--access_container_size);
    /* margin-right: var(--x); */
    height: 180px;
    border: 1.5px solid var(--darkgrey);
    border-radius: 5px;
    margin-bottom: var(--y);
    position: relative;
    cursor: var(--pointer);
    color: var(--darkgrey);
    padding: 0;

}

.big_access svg {
    display: block;
    width: 90px;
    height: 90px;
    left: 50%;
    top: 40%;
    position: absolute;
    transform: translate(-50%, -40%);
}

.small_access svg {
    display: block;
    width: 70px;
    height: 70px;
    left: 50%;
    top: 40%;
    position: absolute;
    transform: translate(-50%, -40%);
}

.access_thumb h5 {
    font-size: var(--caption);
    font-family: var(--bodyFont);
    text-align: center;
    width: calc(100% - 10px);
    position: absolute;
    bottom: 10px;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
}

.access_thumb:hover {
    background: var(--darkgrey-bg);
    color: var(--white);
    transition: 0.5s;
}

.access_thumb:hover .black_fill {
    fill: var(--white);
}

.access_thumb:hover .black_stroke {
    stroke: var(--white);
}

.access_thumb:hover .black_stroke_blacknwhite {
    stroke: var(--white);
}

.black_stroke_blacknwhite {
    stroke: var(--darkgrey);
}

.white_fill_blacknwhite {
    fill: var(--white);
}

.black_fill_blacknwhite {
    fill: var(--darkgrey);
}

.active_access {
    background: var(--darkgrey-bg);
    color: var(--white);
}

.active_access .black_fill {
    fill: var(--white);
}

.active_access .black_stroke {
    stroke: var(--white);
}

.active_access .black_stroke_blacknwhite {
    stroke: var(--darkgrey);
}

.active_access .white_fill_blacknwhite {
    fill: white;
}

.active_access .black_fill_blacknwhite {
    fill: var(--darkgrey);
}

.footer h3 {
    font-size: var(--footer_title);
}

.footer_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

}

.footer_flex a {
    margin-right: var(--y);
}

/* .footer_flex a {
    color: var(--darkgrey);
} */

.socials_container {
    display: flex;

}

.socials_container a {
    font-size: var(--body);
    margin-right: 5px;
}

/* ------- Arjun Splash Begin ------- */

.noclick{
    pointer-events: none;
}

.splash_container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: var(--darkyellow);
    animation: background-flick 7s 1, fadeOut 1s 1 8s forwards;
    z-index: 999;
}

.splash_container .splash_subcontainer{
    position: absolute;
    top: 50%;
    left: 50%;
    width:  50vw;
    text-align: right;
    transform: translate(-50%, -50%);
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
}

.splash_container .splash_subcontainer .logoSplash{
    font-size: var(--display);
    font-family: var(--titleFont);
    line-height: 0.7;
    transition: font-size 4s ease-in-out;
    -webkit-transition: font-size 4s ease-in-out;
    -moz-transition: font-size 4s ease-in-out;
    -o-transition: font-size 4s ease-in-out;
}

.logo_static:before{
    content: "Resourcing";
    animation: flick 7s 1;
}

.logoSizeChange{
   animation: fontSize 2s 1; 
   animation-fill-mode: forwards;
}

@keyframes fontSize {
    0% {
        font-size: var(--display);
    }

    100% {
        font-size: var(--logo);
    }
}


@keyframes flick {
    0% {
        content: "Climate";
        /*color: blue;*/
    }

    14.2857% {
        content: "Climate";
    }

    14.2858% {
        content: "Racial";
    }

    28.5714% {
        content: "Racial";
    }

    28.5715% {
        content: "Historical";
    }

    42.8571% {
        content: "Historical";
    }

    42.8572% {
        content: "Gender";
    }

    57.1428% {
        content: "Gender";
    }

    57.1429% {
        content: "Economic";
    }

    71.4285% {
        content: "Economic";
    }

    71.4286% {
        content: "Resource";
    }

    85.7142% {
        content: "Resource";
    }

    85.7143% {
        content: "Resourcing";
    }

    100% {
        content: "Resourcing";
    }
}

@keyframes fadeOut {
    0% {
        background-color: rgba(215, 164, 70, 1);
    }

    100% {
        background-color: rgba(215, 164, 70, 0);
    }
}

@keyframes background-flick {
    0% {
        background: var(--darkyellow);
    }

    14.2857% {
        background: var(--darkyellow);
    }

    14.2858% {
        background: var(--lightgrey);
    }

    28.5714% {
        background: var(--lightgrey);
    }

    28.5715% {
        background: var(--mintgreen);
    }

    42.8571% {
        background: var(--mintgreen);
    }

    42.8572% {
        background: var(--orange);

    }

    57.1428% {
        background: var(--orange);
    }

    57.1429% {
        background: var(--pink);

    }

    71.4285% {
        background: var(--pink);
    }

    71.4286% {
        background: var(--darkmint);

    }

    85.7142% {
        background: var(--darkmint);

    }

    85.7143% {
        background: var(--darkyellow);


    }

    100% {
        background: var(--darkyellow);

    }
}

/* ------- Arjun Splash End ------- */

/*.background-flick {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--darkyellow);
    animation: background-flick 7s 1, fadeOut 2s 1 7s forwards;
}*/



/*.fixed_justice {
    position: absolute;
    display: flex;
    animation: fadeOutOpacity 2s 1 7s forwards;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--titleFont);
    text-transform: lowercase;
    font-size: 109px;
    justify-content: center;
}
*/
/*.fixed_justice h1 {
    padding-bottom: 0;
    width: 50%;
    padding-left: var(--x);
}*/

/*.wordchange {
    width: 50%;
}*/

/*.wordchange h1 {
    text-align: right;
    width: 100%;
    padding-left: 0;

}
*/

/*.word-flick:before {
    content: "Resourcing";
    animation: flick 7s 1;

}*/


/* @keyframes unsetWidth {
    from {
        width: 50%;
    }

    to {
        width: 5%;
    }
} */



/*@keyframes shrinkAndMoveJustice {
    0% {
        font-size: 109px;
        position: relative;
    }

    100% {
        font-size: 60px;
        top: 0%;
        left: 0%;
        transform: unset;
        padding-top: 5px;
        width: auto;
        position: relative;

    }
}*/

/*.fade_in_title {
    opacity: 0;
    animation: fadeIn 0.5s 1 10s forwards;
}*/

/*@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}*/

/*@keyframes shrinkAndMove {
    0% {
        font-size: 109px;
    }

    100% {
        font-size: 60px;
        top: 0%;
        left: 0%;
        transform: unset;
        padding-left: var(--z);
        padding-top: 5px;
    }
}*/


.mobile_menu_btn {
    display: none;
}

.mobile_menu_access {
    display: none;
}

.mobile_overlay {
    display: none;
}

#homepageHeader {
    transition: background-color 0.3s ease;

}

#homepageHeader.scrolled {
    background-color: var(--darkyellow);
}

#mobileHereTo {
    display: none;
}

button.cky-show-desc-btn:not(:hover):not(:active) {
	color: var(--darkgrey) !important;
}

button.cky-show-desc-btn:hover {
	color: var(--darkgrey) !important;
	text-decoration: underline !important;
}

.cky-accordion-header .cky-always-active {
	color: var(--darkgrey) !important;
}

.cky-consent-container {
	z-index: 888 !important;
	 opacity: 0;
    animation: fadeIn 0.5s 1 10s forwards;
}

.cky-modal {
	z-index: 888 !important;
}

.cky-overlay {
		z-index: 888 !important;

}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
	

@media screen and (min-width: 1350px) {
    :root {
        --caption: 22px;
        --body: 26px;
        --menu: 24px;
        --quotes: 70px;
        --filter: 30px;
        --feat_blog: 100px;
        --footer_title: 78px;
        --logo: 78px;
        --h1: 170px;
        --h2: 45px;
    }

    .logo {
        font-size: var(--logo);
    }

    .main_menu{
        padding: 10px 0px 0px 0px;
    }

    


    .thumbnail img {
        width: 100%;
        object-fit: cover;
        height: 35vh;
    }

    .faq_flex h1 {
        font-size: 260px;
    }

    .access_thumb {
        height: 220px;
    }


}

@media screen and (max-width: 1050px) {

    :root {
        --feat_blog: 50px;
    }

    .center_splash {
        font-size: 90px;
    }

    .main_menu{
        padding: 47px 0px 0px 0px;
    }



    /* @keyframes shrinkAndMoveJustice {
        0% {
            font-size: 90px;
        }

        100% {
            font-size: 60px;
            top: 0%;
            left: 16.9%;
            transform: unset;
            /* padding-left: 220px; */

        /* }
    } */ 

    .site_header {
        display: block;
    }

    .faq_flex {
        display: block;
    }

    .faq_col {
        margin-top: 0;
        margin-left: 0;
    }

    /* .fixed_justice {
        position: absolute;
        top: 50%;
        right: 64%;
        opacity: 1;
        transform: translate(-64%, -50%);
        animation:  shrinkAndMoveJustice 3s 7s forwards, fadeOutOpacity 1s ease-in-out 9s forwards;
    
    }

    .word-flick:before {
        content: "Resourcing";
        position: absolute;
        animation: flick 7s 1, shrinkAndMove 3s 1 7s forwards, fadeOutOpacity 1s ease-in-out 9s forwards;
        top: 50%;
        left: 40%;
        transform: translate(-50%, -50%);
    }
     */

    .fade_in_title {
        opacity: 0;
        animation: fadeIn 0.5s 1 9s forwards;
    }


    /* .word-flick:before {
        content: "Resourcing";
        position: absolute;
        animation: flick 7s 1, shrinkAndMove 3s 1 7s forwards;
        top: 50%;
        left: 40%;
        transform: translate(-50%, -50%);
    } */

    /* @keyframes shrinkAndMoveJustice {
        0% {
            font-size: 109px;

        }

        100% {
            font-size: 60px;
            top: 0%;
            left: 21.5%;
            transform: unset;
            padding-top: 5px;

        }
    } */

}

@media screen and (max-width: 950px) {
    :root {
        --access_container_size: calc(100% / 3 - var(--y));
        --feat_blog: 40px;
    }

    .center_splash {
        font-size: 80px;
    }

    @keyframes shrinkAndMove {
        0% {
            font-size: 80px;
        }

        100% {
            font-size: 60px;
            top: 0%;
            left: 0%;
            transform: unset;
            padding-left: var(--z);
            padding-top: 5px;
        }
    }

    /* @keyframes shrinkAndMoveJustice {
        0% {
            font-size: 80px;
        }

        100% {
            font-size: 60px;
            top: 0%;
            left: 21.5%;
            transform: unset;
            padding-top: 5px;

        }
    } */

    .thumbnail {
        width: calc(100% / 2 - var(--y));
    }

    .feat_container {
        display: block;
    }

    .feat_container img {
        width: 100%;
    }

    .info_col {
        width: calc(100% - var(--z));
        padding-left: 0;
    }
}


@media screen and (max-width: 850px) {

    :root {
        --access_container_size: calc(100% / 2 - var(--y));
        --caption: 16px;
        --body: 18px;
        --menu: 24px;
        --quotes: 40px;
        --filter: 18px;
        --feat_blog: 60px;
        --footer_title: 50px;
        --h1: 94px;
        --h2: 32px;
    }

    .access_overlay {
        z-index: 200;
    }

    .center_splash {
        font-size: 70px;
    }

    .main_menu {
        padding: 0px 0px 0px 0px;
    }

    .mobile_menu_btn{
        padding: 8px 0px 0px 0px;
    }

    @keyframes shrinkAndMove {
        0% {
            font-size: 70px;
        }

        100% {
            font-size: 60px;
            top: 0%;
            left: 0%;
            transform: unset;
            padding-left: var(--z);
            padding-top: 5px;
        }
    }

    /* @keyframes shrinkAndMoveJustice {
        0% {
            font-size: 70px;
        }

        100% {
            font-size: 60px;
            top: 0%;
            left: 28.5%;
            transform: unset;
            padding-top: 5px;

        }
    } */


    .super_pad {
        padding-left: 10%;
        padding-right: 10%;
    }

    .feat_img img {
        height: 500px;
    }

    #headerMenu {
        display: none;
    }

    .mobile_menu_btn {
        display: block;
        margin-left: auto;
        background: none;
        font-family: var(--bodyFont);
        /* color: var(--darkgrey); */
        font-size: var(--menu);
        border: none;
        cursor: var(--pointer);
    }

    .mobile_menu_access {
        display: block;
        margin-left: auto;
        background: none;
        font-family: var(--bodyFont);
        color: var(--darkgrey);
        font-size: var(--menu);
        border: none;
        cursor: var(--pointer);
        padding: var(--x);
    }

    .donation_btn {
        margin-top: var(--y);
        padding: 10px;
        text-align: center;
    }

    .access_flex {
        padding-top: var(--y);
    }

    .sub-menu {
        display: block;
        position: relative;
        padding-left: var(--x) !important;

    }

    .sub-menu li {
        background: none;
    }

    .mobile_menu {
        padding-top: 120px;
        padding-left: var(--z);
        padding-right: var(--z);
    }

    .mobile_overlay {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 20;
        transition: 1s;
        background: var(--darkyellow);
        overflow-y: scroll;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
    }

    .mobile_overlay::-webkit-scrollbar {
        display: none;
    }

    .main_menu {
        display: block;
    }

    .footer_menu {
        display: block;
    }

    .footer_menu a{ 
        font-size: var(--caption);

    }

    .site_header {
        display: flex;
    }

    .faq_col {
        width: 100%;
    }


    .faq_flex h1 {
        width: 100%;
    }

}

@media screen and (max-width: 781px) {

    .wp-block-image .alignright {
        float: unset !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    
    .wp-block-image .alignleft {
        float: unset !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .column_reverse {
        flex-direction: column-reverse;
    }
}


@media screen and (max-width: 650px) {

    :root {
        --access_container_size: calc(100% - var(--y));
    }

    .here_flex_mobile h1 {
        padding-bottom: var(--y);
        padding-right: var(--x);
    }

    .here_flex_mobile {
        padding-top: var(--y);
        display: flex;
        justify-content: center;
    }

    .center_splash {
        font-size: 80px;
    }

    .here_flex {
        display: block;
    }

    .here_flex .left_col h1 {
        padding-bottom: 0;
        text-align: left;
    }

    .here_flex .right_col {
        width: 100%;
    }

    /* @keyframes shrinkAndMoveJustice {
        0% {
            font-size: 80px;

        }

        100% {
            font-size: 60px;
            top: 0%;
            left: 30%;
            transform: unset;
            padding-top: 5px;

        }
    } */


    .feat_img img {
        height: 350px;
    }

    .footer_flex {
        flex-direction: column-reverse;
        align-items: unset;
    }



    .thumbnail {
        width: 100%;
        margin-right: 0;
    }

    #desktopHereTo {
        display: none;
    }

    #mobileHereTo {
        display: block;
    }

    .large_pad, .large_pad_homepage  {
        padding: var(--y);
    }
}


@media screen and (max-width: 576px) {

    :root {
        --caption: 14px;
        --body: 16px;
        --menu: 22px;
        --quotes: 32px;
        --filter: 16px;
        --feat_blog: 40px;
        --footer_title: 40px;
        --h1: 74px;
        --h2: 32px;
        --access_container_size: 100%;
        --logo: 50px;
    }
    .mobile_menu_btn {
        padding: 0;
    }

    .min_height_page {
        min-height: 75vh;
    }
 
    /* .fixed_justice h1 {
        width: 40%;
    }
    */

    .orange_edge svg {
        max-height: 20px;
        margin-bottom: -12px;
    }

    
    .mintgreen_edge svg {
        max-height: 20px;
        margin-bottom: -12px;
    }
    

    .oval_top svg {
        max-height: 50px;
    }

    .center_splash {
        font-size: 60px;
    }

    /* @keyframes shrinkAndMove {
        0% {
            font-size: 60px;
        }

        100% {
            font-size: 40px;
            top: 0%;
            left: 0%;
            transform: unset;
            padding-left: var(--x);
            padding-top: 5px;
        }
    } */
/* 
    @keyframes shrinkAndMoveJustice {
        0% {
            font-size: 60px;
        }

        100% {
            font-size: 40px;
            top: 0%;
            left: 28%;
            transform: unset;
            padding-top: 5px;

        }
    } */


    .site_header h3 {
        font-size: 40px;
    }

    .faq_flex h1 {
        width: 100%;
        font-size: 150px;
    }

    .large_pad_small_btm {
        padding-left: var(--x);
        padding-right: var(--x);
    }

    .h1_pad h1 {
        padding-bottom: var(--z);
    }

    .large_column_pad .wp-block-columns {
        padding-bottom: var(--y);
    }

    .filter_flex {
        padding-left: var(--x);
        padding-right: var(--x);
    }

    .large_pad {
        padding: var(--x);
    }

    .large_pad_homepage {
        padding: var(--x);
    }

    .page_top_pad {
        padding-top: 120px !important;
    }

    #solidaritySection .wp-block-columns {
        padding-bottom: var(--z);
    }


    #solidaritySection h1 {
        padding-bottom: var(--z);
        padding-top: var(--y);
    }

    #imageGridSection .wp-block-columns {
        padding-bottom: var(--z);

    }

    .z_pad {
        padding: var(--x);
    }

    .z_pad_custom {
       padding: var(--x);
    }

    #homePage h1 {
        padding-bottom: var(--z);
    }

    .super_pad {
        padding-left: var(--y);
        padding-right: var(--y);
    }

    .y_pad {
        padding: var(--x);
    }

    .site_header {
        width: calc(100% - var(--y));
        padding-left: var(--x);
        padding-right: var(--x);
    }

    .page_container blockquote {
        padding-bottom: 0;
    }

    .homepage_top_pad {
        padding-top: 120px !important;
    }

    /* .yellow_circle {
        right: unset;
    } */

    .yellow_circle svg {
        width: 60%;
        float: right;
        height: auto;
        /* right: unset; */
    }

    .feat_img img {
        height: 250px;
    }

    .mobile_menu {
        font-size: 24px;
        /* padding-top: 60px; */
        padding-left: var(--x);
        padding-right: var(--x);
    }

    .thumbnail img {
        height: 30vh;
    }

    .right {
        right: var(--x);
    }

    .left {
        left: var(--x);
    }

    .socials_container a {
        font-size: var(--menu);
    }

    .wp-block-button {
        width: 100% !important;
    }

  
}

@media screen and (max-width: 500px) {

    :root {
        --display: 18vw;
    }

    .splash_container .splash_subcontainer {
        width: 74.5vw;
        /*background: red;*/

}

}

@media screen and (max-width: 395px) {

    :root {
        --caption: 12px;
        --body: 14px;
        --menu: 20px;
        --quotes: 30px;
        --filter: 14px;
        --feat_blog: 38px;
        --footer_title: 38px;
        --h1: 62px;
        --h2: 27px;
        --logo: 40px;
    }

    .super_pad {
        padding-left: 0;
        padding-right: 0;
    }

    .feat_img svg {
        max-height: 20px;
    }

    .oval_top svg {
        max-height: 30px;

    }

}