/*
Theme name: Cassie Thornton Theme
Author: Studio Hyte
Version: 1.0
*/

@font-face {
    font-family: "TitleFont";
    src: url('assets/fonts/titlefont/Newyorkertype.eot') format('embedded-opentype'),
        url('assets/fonts/titlefont/Newyorkertype.woff2') format('woff2'),
        url('assets/fonts/titlefont/Newyorkertype.woff') format('woff');
}

:root {
    --black: black;
    --white: white;
    --accessblue: #00F0FF;
    --accessyellow: #FFF500;
    --titlefont: "Titlefont";
    --bodyfont: 'Libre Caslon Text', serif;
    --red: #FF0000;
    --x: 15px;
    --y: 30px;
    --z: 60px;
    --pointer: pointer;
    --default: default;
    --caption: 12pt;
    --body: 14pt;
    --menu: 22pt;
    --titles: 35pt;
    --display: 12vw;

    --title_lh: 1.3;
    --body_lh: 1.3;
    --title_ls: normal;
    --body_ls: normal;
    --title_hl: none;
    --link_hl: none;
    --img_display: block;

    --highlight_padding: 0px;
    --img_filter_hover: grayscale(100%) brightness(70%) sepia(100%) hue-rotate(-40deg) saturate(500%) contrast(0.9);
    --img_filter_none: none;
    --dropshadow-filter: drop-shadow(0px 0px 16px var(--red));

    --access_container_width: 200px;
}


body {
    margin: 0;
    cursor: var(--default);
    color: var(--black);
    font-family: var(--bodyfont);
    background: var(--white);

}

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);
}

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

p {
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);
    font-size: var(--body);
}

blockquote p {
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);

}

img {
    display: var(--img_display);
    filter: var(--img_filter_none);
}


iframe {
    filter: var(--img_filter_none);

}


figcaption {
    display: var(--img_display);
}

.site_header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    z-index: 200;
    background: var(--white);

}
.mobile_header {
    display: none;
}
.no_fill {
    fill: none;
}

.top_row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--x);
    padding-bottom: var(--x);
    width: calc(100% - var(--z));
    border-bottom: 1px solid var(--black);
    margin-left: var(--y);
    margin-right: var(--y);
    font-family: var(--titlefont);
    background: var(--white);
    font-size: var(--caption);
}

.top_row_pages {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding-top: var(--x);
    padding-bottom: var(--x);
    width: 100%;
    box-shadow: 0px 0px 15px var(--red);
    font-family: var(--titlefont);
    background: var(--white);
    font-size: var(--caption);

}

.centered_flex {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.header_col_left {
    color: var(--red);
    padding-left: var(--x);
    position: absolute;
}

.header_col_left a {
    color: var(--red);
}

.header_col:hover {
    cursor: var(--pointer);

}


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

}

.header_col a {

    color: var(--black);
}

.header_col a:hover {
    text-decoration: underline;
}

.header_col_access {
    color: var(--black);
    padding-left: var(--x);
    padding-right: var(--x);
}

.header_col_access:hover {
    text-decoration: underline;
    cursor: var(--pointer);


}

.title_section {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    margin-top: 120px;
}

.title_section h2 {
    text-align: center;
    margin: 0;
    font-size: var(--menu);
    font-family: var(--titlefont);
}

.title_section h1 {
    text-align: center;
    margin: 0;
    color: var(--red);
    font-size: var(--titles);
    font-family: var(--titlefont);
    padding-top: 5px;
    padding-left: var(--x);
    padding-right: var(--x);

}

.title_section p {
    margin-left: 25vw;
    margin-right: 25vw;
}

.themes_section {
    padding-top: var(--y);
    padding-bottom: var(--y);
    padding-left: var(--y);
    padding-right: var(--y);
}

.flex_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: top;
    margin-left: var(--z);
    margin-right: var(--z);
    color: var(--black);
}

.flex_row:hover {
    color: var(--red);
    fill: var(--red);
}

.flex_row a {
    color: var(--black);
}

.flex_row h5 {
    color: var(--black);
}

.flex_row:hover h5 {
    color: var(--red);
}

.float_x {
    margin-left: auto;
    font-size: 16pt;
    margin-right: 5px;
    padding-left: var(--x);

}


.total_row {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
}

.faq_post_title {
    display: flex;
    padding-top: var(--x);
    padding-bottom: var(--x);
    padding-left: var(--y);
    border-top: 1px solid var(--black);
}

.faq_post_title p {
    margin: 0;
    font-size: var(--caption);

}

.faq_post_title:hover {
    cursor: var(--pointer);
}

.faq_post_content {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
}

.faq_post_content p {
    margin-top: 0;
    padding-left: var(--y);
    padding-right: var(--x);
    font-size: var(--caption);

}

.flex_row_collaps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: top;
    margin-left: var(--x);
    margin-right: var(--x);
    margin-bottom: var(--x);
    width: calc(100% - var(--y));
    text-decoration: none;
    color: var(--black);

}

.flex_row_collaps h5 {
    color: var(--black);
}

.flex_row_collaps:hover h5 {
    color: var(--red);
}

.flex_row_collaps:hover {
    color: var(--red);
    fill: var(--red);
}



.collaborator_col {
    width: 44%;
    text-align: right;
    /* padding-bottom: var(--x); */
}

.collaborator_col p {
    padding: 0;
    margin: 0;

}



.dollar_col {
    width: calc(12% - var(--y));
    text-align: center;
    /* padding-bottom: var(--x); */
    padding-right: var(--x);
    padding-left: var(--x);

}

.dollar_col svg {
    width: 20px;
    height: 20px;

}

.info_col {
    width: 44%;
    margin-bottom: var(--x);
}

.info_col h5 {
    font-size: var(--body);
    margin: 0;
    font-weight: 400;
}

.info_col p {
    font-size: var(--body);
    font-style: italic;
    margin: 0;
    padding: 0;
}

.collapse_button {
    color: var(--red);
    font-size: var(--body);
    font-family: var(--titlefont);
    border: none;
    background: none;
    text-align: left;
    padding: 0;
}

.collapse_button:hover {
    cursor: var(--pointer);
    text-decoration: underline;
}

.theme_title {
    color: var(--red);
    font-size: var(--body);
}

.theme_title h3 {
    margin: 0;
    font-weight: 400;
}

.collaborator_col:hover {
    color: var(--red);
}

.featureimg_overlay {
    width: auto;
    position: absolute;
    display: none;
    opacity: 0.7;
    left: 50%;
    transform: translate(-50%);
    z-index: 200;
    margin-top: -120px;


}

.featureimg_overlay img {
    width: 400px;
    height: 400px;
    object-fit: contain;
    margin-right: auto;
    margin-left: auto;

    filter: var(--dropshadow-filter);


}

.flex_row:hover .featureimg_overlay {
    display: block;
}

.flex_row_collaps:hover .featureimg_overlay {
    display: block;
}

.newsletter_about {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}

.button_flex_container {
    display: flex;
    justify-content: center;
    margin-top: var(--x);
    margin-bottom: var(--x);
}

.about_button {
    border: 2px solid var(--red);
    background: none;
    font-size: var(--menu);
    font-family: var(--titlefont);
    width: calc(100% - 120px);
    margin-left: var(--z);
    padding: var(--x);
    color: var(--red);

}

.about_button a {

    color: var(--red);
}

.newsletter_button {
    border: 2px solid var(--red);
    background: var(--red);
    font-size: var(--menu);
    font-family: var(--titlefont);
    width: calc(100% - 120px);
    margin-right: var(--z);
    padding: var(--x);
    color: var(--white);
}

.newsletter_button:hover {
    text-decoration: underline;
    cursor: var(--pointer);
}

.about_button:hover {
    text-decoration: underline;

    background: var(--red);
    color: var(--white);
    cursor: var(--pointer);
}

.dollarsigns {
    margin-left: var(--z);
    margin-right: var(--z);
    padding-top: var(--y);
    padding-bottom: var(--y);
}

.dollarsigns strong {
    color: var(--red);
    font-family: var(--titlefont);
    font-size: var(--body);

}

.dollarsigns img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
}

.footer {
    bottom: 0;
}

.flex_footer {
    display: flex;
    /* align-items: center; */
    margin-left: var(--y);
    margin-right: var(--y);
    padding-top: var(--x);
    padding-bottom: var(--x);
    border-top: 1px solid var(--black);
    width: calc(100% - var(--z));
    font-family: var(--titlefont);
    font-size: var(--caption);
}

.footer_col_center {
    flex: 1;
    text-align: center;
    color: var(--red);
    font-size: var(--body);
    padding-left: var(--z);
    padding-right: var(--z);
}

.footer_col a {
    color: var(--black);
    font-size: var(--caption);

}

.footer_col a:hover {
    text-decoration: underline;
}

.footer_col h3 {
    font-weight: 400;
    margin: 0;
    font-size: var(--body);
    color: var(--black);
}

.footer_col h3:hover {
    cursor: var(--pointer);
    text-decoration: underline;
}

.fade-in-text{
    animation: fadeIn 2s;

    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}




.fa-linkedin {
    background: var(--black);
    color: var(--white) !important;
    padding: 2px;
    border-radius: 5px;
    font-size: var(--body);
    margin-left: 5px;
    cursor: var(--pointer);

}

.fa-instagram {
    color: var(--black);
    font-size: 23pt !important;
    margin-right: 5px;
    cursor: var(--pointer);

}


.fa {
    /* font-size: var(--body); */
    width: 20px;
    text-align: center;
    text-decoration: none !important;
}

.flex_links {
    display: flex;
    align-items: center;
    padding-top: 5px;
}

.flex_links a {
    margin-left: 5px;
    font-size: var(--body);
    color: var(--black);
    cursor: var(--pointer);
}

.page_title {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    margin-top: 15vw;
    margin-bottom: 15vw;
}

.page_title h1 {
    text-align: center;
    color: var(--red);
    font-size: var(--titles);
    font-family: var(--titlefont);
    font-weight: 400;
}

.feat_img {
    width: 100%;
    height: 50vw;
    /* padding-top: var(--x); */
}

.feat_img img {
    width: 100%;
    height: 50vw;
    object-fit: cover;
}

.halfhalf_flex {
    display: flex;
    width: 100%;
    height: 50vw;
    margin-top: 0;
}

.halfhalf_col {
    width: calc(100% / 2);
    height: 50vw;
    position: relative;
    /* padding-top: var(--x); */
}

.halfhalf_col_overlay {
    width: calc(100% / 2);
    height: 50vw;
    position: absolute;
    background: var(--white);
    z-index: 1;
    left: -100%;
    transition: 0.5s;
    padding-top: var(--x);
}

.halfhalf_col_overlay p {
    color: var(--black);
    line-height: 1.6;
    padding-left: var(--x);
    padding-right: var(--x);
}

.halfhalf_col_overlay strong {
    color: var(--red);
    font-family: var(--titlefont);
    font-size: var(--body);
}

.halfhalf_col_overlay img {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.post_title {
    background: var(--red);
    width: 100%;
    height: 90vh;
    /* margin-top: var(--y); */
    position: relative;
}

.post_title_padding {
    background: var(--red);
    width: 100%;
    height: 85vh;
    /* margin-top: var(--y); */
    position: relative;
    padding-top: var(--y);
}

.post_title:hover {
    background: var(--black);
}


.red_bkground {
    background: var(--red);
}

.black_bkground {
    background: var(--black);
}

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

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

.center_content h3 {
    font-size: var(--titles);
    text-align: center;
    margin: 0;
    font-family: var(--titlefont);
    font-weight: 400;
    color: var(--white);
}






.ear_img {
    width: 25vw;
    height: 25vw;
    margin-left: auto;
    margin-right: auto;
}

.ear_img .ear_fill {
    fill: var(--white);
}

.ear_img svg {
    width: 25vw;
    height: 25vw;
    object-fit: contain;
    fill: var(--white);


}

.no_fill {
    fill: none;
}

.audioplayer {
    text-align: center;
    padding-top: var(--x);
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.bottom h4 {
    margin: 0;
    text-align: center;
    font-family: var(--titlefont);
    color: var(--white);
    font-size: var(--body);
}

.bottom p {
    text-align: center;
    font-style: italic;
    margin-top: 5px;
    /* color: var(--white); */
}

.project_dollars {
    padding-top: var(--x);
    padding-right: var(--x);
    width: calc(100% - var(--x));
    display: flex;
    position: absolute;
    justify-content: right;
    fill: var(--white);



}

.project_dollars svg {
    width: 30px;
    height: 30px;
    display: block;
    padding-right: 5px;
    cursor: var(--pointer);

}


.post_content .wp-block-column {
    padding: var(--x);
}

.post_content .wp-block-column:hover p {
    color: var(--black);
}

.post_content .wp-block-column:hover h2 {
    color: var(--black);
}

.post_content .wp-block-column:hover h3 {
    color: var(--black);
}

.post_content .wp-block-column:hover h4 {
    color: var(--black);
}

.post_content .wp-block-column:hover h5 {
    color: var(--black);
}

.post_content .wp-block-column:hover h6 {
    color: var(--black);
}

.post_content .wp-block-column h2,
h3,
h4,
h5,
h6 {
    color: var(--red);
}


.post_content .wp-block-image img {
    padding-left: var(--x);
    padding-right: var(--x);
    margin-top: var(--z);
    margin-bottom: var(--z);
    width: 100%;
    height: 45vw;
    object-fit: cover;
    filter: var(--img_filter_hover);

}

.post_content .wp-block-column img {
    margin-top: var(--z);
    margin-bottom: var(--z);
    width: 100%;
    height: 30vw;
    object-fit: cover;
    filter: var(--img_filter_hover);

}

.post_content .wp-block-column:hover figcaption {
    color: var(--black);
}


.post_content .wp-block-column:hover img {
    color: var(--red);
    filter: var(--img_filter_none);
}

.post_content .wp-block-image:hover img {
    color: var(--red);
    filter: var(--img_filter_none);
}


.post_content .wp-block-image .aligncenter img {
    width: 45vw;
    height: 45vw;
    object-fit: contain;
    margin-top: 0;
    margin-bottom: var(--z);

}



.post_content .wp-block-image .aligncenter>figcaption,
.wp-block-image .alignleft>figcaption,
.wp-block-image .alignright>figcaption,
.wp-block-image.aligncenter>figcaption,
.wp-block-image.alignleft>figcaption,
.wp-block-image.alignright>figcaption {
    display: var(--img_display);
}

.post_content .wp-block-image .alignleft img {
    margin-top: var(--z);
    margin-bottom: var(--z);

}


.post_content h2 {
    margin-left: var(--z);
    margin-right: var(--z);
    margin-bottom: 120px;
    font-size: var(--menu);
    text-align: center;
    font-family: var(--bodyfont);
}

.post_content h3 {
    margin-top: 0px;
    margin-bottom: 120px;
    font-size: var(--menu);
    text-align: center;

}

.post_content p {
    font-family: var(--bodyfont);
    font-size: var(--body);
    color: var(--red);
}


.post_content .has-text-align-right {
    padding-top: 120px;
    text-align: left;
}

.post_content blockquote p {
    font-size: var(--menu);
    text-transform: uppercase;
   color: var(--red);
    font-weight: 700;

}


.post_content .wp-block-quote:hover {
    color: var(--black);
}

.post_content .wp-block-quote {
    margin: var(--x);
    color: var(--red);
}

.post_content .wp-block-image figcaption {
    font-size: var(--caption);
    color: var(--red);

}


.post_content figcaption:hover {
    color: var(--black);

}

.post_content .wp-block-image .alignright {
    margin: 0;
    float: none;
}

.manifestation_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--black);
    width: calc(100% - var(--z));
    margin-left: var(--y);
}

.mani_col {
    padding-top: var(--x);
}

.mani_col img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.mani_col h2 {
    font-size: 35pt;
    font-family: var(--titlefont);
    padding-left: var(--z);
    padding-right: var(--z);
}

.mani_col_flip img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transform: rotate(180deg);
}

.manifestation_grid {
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.manifestation_grid>div {
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
}



.mani_post_col {
    height: 350px;
    background: var(--white);
    position: relative;
    color: var(--red);
}

.mani_post_col:nth-child(2) {
    background: var(--black);
    color: var(--white);
}

.mani_post_col:nth-child(2) h3 {
    color: var(--white);
}

.mani_post_col:nth-child(3) {
    background: var(--red);
    color: var(--white);
}

.mani_post_col:nth-child(3) h3 {
    color: var(--white);
}

.mani_post_col:nth-child(4) {
    color: var(--black);
}

.mani_post_col:nth-child(4) h3 {
    color: var(--black);
}

.mani_post_col h3 {
    padding-left: var(--x);
    padding-top: var(--x);
    font-weight: 400;
    font-family: var(--titlefont);
    font-size: var(--menu);
    margin: 0;
}

.mani_post_col p {
    padding-left: var(--x);
    padding-right: var(--x);
    font-size: var(--caption);
}

.bottom_mani {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
}

.bottom_mani a {
    color: inherit;
    text-align: right;
    display: block;
    padding-right: var(--x);
    padding-bottom: var(--x);
    font-style: italic;
}

.bottom_mani a:hover {
    text-decoration: underline;
}

.mani_description {
    text-align: center;
    margin-bottom: var(--y);
    font-style: italic;
}

.bottom_line {
    width: calc(100% - var(--y));
    border-top: 1px solid var(--black);
    margin-left: var(--x);
    margin-top: var(--y);
}

.related_projects {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    margin-top: var(--x);
    margin-bottom: var(--x);
}

.related_project_col:nth-child(2) {
    background: var(--red);
}

.related_project_col:nth-child(2) a {
    color: var(--white);
}


.related_project_col {
    width: 50%;
    text-align: center;
    font-size: var(--menu);
    font-family: var(--titlefont);
    padding: var(--y);
}

.related_project_col a {
    color: var(--black);
}

.related_project_col a:hover {
text-decoration: underline;
}

.post_content .aligncenter iframe {
    width: 100%;
    height: 45vw;
}

.post_content .alignright iframe {
    width: 100%;
    display: block;
    float: none;
    height: 35vw;
    padding-top: var(--z);
    padding-bottom: var(--x);

}

.post_content .wp-block-embed.alignright {
    max-width: 100%;
}

.post_content .wp-block-column:nth-child(even):hover {
    color: var(--red);
}



.title_overlay_black {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    ;
    opacity: 1;
    transition: opacity 2s ease-out;
    z-index: 8999;
}

.title_overlay_black.fade-out {
    opacity: 0;

}


.title_overlay_black .overlay_title_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    font-size: var(--titles);
    font-family: var(--titlefont);
}

.title_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--red);
    ;
    opacity: 1;
    transition: opacity 2s ease-out;
    z-index: 8999;
}

.title_overlay.fade-out {
    opacity: 0;

}


.title_overlay .overlay_title_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    font-size: var(--titles);
    font-family: var(--titlefont);
}

.page_content {
    padding-top: var(--z);
    padding-left: var(--x);
    padding-right: var(--x);
}

.page_content h2 {
    font-size: var(--menu);
    color: var(--black);
    font-family: var(--titlefont);
    /* padding-top: var(--z); */
    text-transform: uppercase;
}

.page_content h3 {
    font-size: var(--menu);
    color: var(--black);
    font-family: var(--bodyfont);
    text-transform: uppercase;
    font-weight: 400;
}

.contact_container {
    display: flex;
}

.contact_col {
    width: 50%;

}

.contact_button {
    background-color: var(--red);
    border: none;
    font-family: var(--titlefont);
    font-size: var(--menu);
    padding: var(--x);
    width: calc(100% - var(--y));
    margin-left: var(--x);
    margin-right: var(--x);
    margin-bottom: var(--y);
    color: var(--white);
    font-weight: 400;
    text-decoration: underline;
    cursor: var(--pointer);
}

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

#datetime {
    font-size: var(--titles);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.social_media {
    padding-left: var(--x);
    padding-bottom: var(--x);
    font-family: var(--titlefont);
    font-size: var(--caption);

}

.social_media h3 {
    margin: 0;
    font-weight: 400;
    color: var(--black);

}

.social_media h3:hover {
    text-decoration: underline;
    cursor: var(--pointer);
}

.socials_flex {
    display: flex;
    align-items: center;
    padding-bottom: 5px;

}

.socials_col {
    padding-right: 5px;
}

.socials_col_instagram {
    padding-right: 5px;
}

.socials_col svg {
    width: 25px;
    height: 25px;
}

.socials_col a {
    font-family: var(--titlefont);
    font-size: var(--body);
    color: var(--black);
}

.faq_container {
    display: flex;
}

.faq_col {
    width: 50%;
}

.faq_col_right {
    width: 50%;
    border-top: 1px solid var(--black);
    /* border-bottom: 1px solid var(--black); */

}

.faq_col_right_posts {
    width: 50%;
    /* border-top: 1px solid var(--black); */
    border-bottom: 1px solid var(--black);
    /* paddi?ng-top: var(--x); */
    /* padding-bottom: var(--x); */
    margin-bottom: var(--x);

}

.faq_col_right h3 {
    padding-left: var(--y);
    font-size: var(--menu);
    font-style: italic;
    font-weight: 400;
    margin: 0;
    padding-top: var(--x);
    padding-bottom: var(--x);
}

.video_content .wp-block-image img {
    width: calc(100% - var(--z));
    height: 50vw;
    object-fit: cover;
    margin: var(--y);
    box-shadow: 0px 0px 25px var(--red);
}

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

.video_content .wp-block-image figcaption {
    margin-left: var(--y);
    margin-top: 0;
}

.video_content .wp-block-image img:hover figcaption {
    color: var(--black);
}

.video_content p {
    margin-left: var(--y);
    margin-right: var(--y);
}

.video_content .wp-block-embed figcaption {
    margin-left: var(--y);
    margin-top: 0;
}

.video_content iframe {
    width: calc(100% - var(--z));
    margin: var(--y);
    height: 45vw;
    box-shadow: 0px 0px 25px var(--red);


}

.posts_grid {
    display: block;
    width: 100%;
    position: relative;
    margin-top: var(--x);
    margin-bottom: var(--x);
}

.grid_flex {
    display: flex;
    flex-wrap: wrap;
    margin-left: var(--y);
    margin-right: var(--y);
    justify-content: space-evenly;
}

.grid_container {
    width: calc(100% /3 - var(--y));
    height: auto;
    vertical-align: top;
    border: 1px solid var(--black);
    margin-right: var(--x);
    margin-top: var(--y);
    color: var(--black);
    text-decoration: none;
}

.grid_container:hover {
    box-shadow: 0px 0px 15px var(--red);
}


.grid_image img {
    width: 100%;
    height: 25vw;
    object-fit: cover;
}

.grid_info {
    padding: var(--x);
    display: flex;
    position: relative;
}

.grid_info svg {
    width: 30px;
    height: 30px;
    display: block;
    margin-left: auto;
}

.grid_info p {
    font-size: var(--caption);
    width: calc(100% - var(--x));

}

.grid_info a {
    word-break: break-all;
}



.accessibility_overlay {
    position: fixed;
    width: 100%;
    height: 95vh;
    top: -150%;
    background: var(--white);
    box-shadow: 0px 0px 15px var(--red);
    z-index: 999;
    display: block;
    /* margin-top: -15px; */
    transition: 0.5s;
    margin-bottom: var(--x);
    overflow-y: scroll;
}

.accessibility_overlay h4 {
    margin: 0;
    padding-top: var(--x);
    /* padding-bottom: var(--x); */
    font-family: var(--titlefont);
    padding-left: var(--x);
    font-size: var(--body);
    font-weight: 400;
}

/* width */
.accessibility_overlay::-webkit-scrollbar {
    width: var(--x);
}

/* Track */
.accessibility_overlay::-webkit-scrollbar-track {
    background: var(--white)
}

/* Handle */
.accessibility_overlay::-webkit-scrollbar-thumb {
    background: var(--black);
}

/* Handle on hover */
.accessibility_overlay::-webkit-scrollbar-thumb:hover {
    background: var(--red);
    cursor: var(--pointer);
}

.access_flex {
    display: flex;
    padding-left: var(--x);
    padding-right: var(--x);
    padding-bottom: var(--y);
    flex-wrap: wrap;
}

.access_col_left {
    width: 45%;
    display: flex;
    flex-wrap: wrap;

}

.access_col_right {
    width: 55%;
    display: flex;
    flex-wrap: wrap;
}

.access_container {
    width: var(--access_container_width);
    height: 200px;
    display: block;
    position: relative;
    border: 2px solid var(--red);
    margin-right: var(--x);
    margin-top: var(--x);
}

.access_container:hover {
    background-color: var(--red);
    cursor: var(--pointer);
}

.access_container:hover h5 {
    color: var(--white);
}

.access_container:hover h6 {
    color: var(--white);

}

.access_container:hover svg {
    stroke: var(--white);
    fill: var(--white);
}

.access_container h4 {
    font-family: var(--titlefont);
    font-size: var(--menu);
    font-weight: 400;
    text-align: center;
    padding-top: 0;
}

.black_strokenfill {
    fill: var(--black);
    stroke: var(--black);
}

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

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

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

.red_fill {
    fill: var(--red);
}


.access_container h6 {
    font-family: var(--titlefont);
    font-size: var(--body);
    font-weight: 400;
    text-align: center;
    margin: 0;
    padding: 0;
    padding-bottom: var(--x);
    padding-top: var(--x);
    position: absolute;
    bottom: 0;
    width: calc(100% - 2px);
    color: var(--black);
    white-space: nowrap;
}

.access_container svg {
    /* padding-top: var(--x); */
    width: 90px;
    height: 90px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.small_svg svg {
    /* padding-top: var(--y); */
    width: 60px;
    height: 60px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.color_options h4 {
    padding-left: var(--x);
}


.newsletter_overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--white);
    z-index: 150;
    top: 48px;
    left: 0;
    display: none;
}

.first_col {
    width: 50%;
    background: var(--red);
}

.second_col {
    width: 50%;
    position: relative;
}

.second_col h4 {
    text-align: right;
    font-family: var(--titlefont);
    font-size: var(--body);
    padding-right: var(--x);
    margin: 0;
    padding-top: var(--x);
}

.second_col h4:hover {
    text-decoration: underline;
    cursor: var(--pointer);
}


.second_col_info {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: var(--caption);

}

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

/* AUDIO PLAYER */

.scrubb_audio {
    display: none;
}

#time_hide {
    display: none;
}

#total_hide {
    display: none;
}


.progress_container {
    background: var(--white);
    cursor: var(--pointer);
    border-radius: 5px;
    height: 10px;
    width: 20vw;
    margin: var(--x);
    /* position: absolute; */
}

.progress {
    background-color: var(--red);
    border-radius: 5px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    z-index: 10;
}

.audio_info {
    opacity: 1;
}

.audio_scrubb_convo {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.audio_scrubb_col {
    flex: 1;
    position: relative;
    white-space: nowrap;
}


.audio_scrubb_col .play_button {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.audio_scrubb_col .play_button svg {
    width: 30px;
    height: 30px;
}

.audio_scrubb_col .pause_button {
    position: absolute;
    text-align: center;
    z-index: 1;
}

.audio_scrubb_col .pause_button svg {
    width: 25px;
    height: 25px;
}

.music_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.music_col {
    font-family: var(--titlefont);
    font-size: var(--caption);
}

.music_col h3 {
    margin: 0;
    font-style: italic;
    font-family: var(--bodyfont);
    font-size: var(--caption);
    padding-left: var(--x);
    color: var(--white);
}

#pause {
    display: none;
}

.play_btn svg {
    width: 15px;
    height: 15px;
    display: block;
    padding-left: var(--x);

}

.play_btn svg:hover {
    cursor: var(--pointer);
}

.pause_btn svg {
    width: 15px;
    height: 15px;
    display: block;
    padding-left: var(--x);
}

.pause_btn svg:hover {
    cursor: var(--pointer);
}

.load_more {
    width: calc(100% - 120px);
    margin-left: var(--z);
    margin-right: var(--z);
    margin-top: var(--y);
    border-top: 1px solid var(--black);
    border-bottom: none;
    border-left: none;
    border-right: none;
    background: none;
    font-family: var(--titlefont);
    font-size: var(--body);
    padding-top: var(--x);
    padding-bottom: var(--y);
    cursor: var(--pointer);
}

#no_posts {
    display: none;
    font-size: var(--body);

}

.spinning_dollar svg {
    width: 80px;
    height: 80px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: var(--y);
    margin-bottom: var(--y);
    fill: var(--white);

    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.first_col input {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--z));
    display: block;
    margin-top: var(--x);
    margin-bottom: var(--x);
    padding: var(--x);
    font-family: var(--titlefont);
    text-align: center;
    font-size: var(--body);
    border: none;
}

.first_col input[type=submit] {
    width: calc(100% - var(--y));
}

.first_col input[type=submit]:hover {
    background: var(--red);
    border: 1px solid var(--white);
    color: var(--white);
    cursor: var(--pointer);
}

.first_col label {
    display: block;
    text-align: center;
    font-family: var(--titlefont);
    font-size: var(--body);
    padding-left: var(--x);
    padding-right: var(--x);
    color: var(--white);
}

.indicates-required {
    padding: var(--x);
    font-family: var(--titlefont);
    font-size: var(--body);
    color: var(--white);

}

.reading_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 600vh;
    pointer-events: none;
    /* background-color: rgba(0, 0, 0, 0.2);  */
    transform: translate(0, -300vh);
    z-index: 9999;
    display: block;
}

.top_layer {
    width: 100%;
    height: calc(300vh - 50px);
    margin-bottom: 200px;
    background-color: rgba(0, 0, 0, 0.5);
}

.bottom_layer {
    width: 100%;
    height: calc(300vh - 50px);
    background-color: rgba(0, 0, 0, 0.5);
}

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

.footer_mobile {
    display: none;
}


.close_btn_coinoverlay {
    display: none;
}

.close_btn_accessibilitymobile {
    display: none;
}

.grid_image svg {
    display: none;
}

.mobile_menu_overlay {
    display: none;
}

.mobile_svg {
    display: none;
}

.desktop_svg {
    margin-left: auto;
    position: absolute;
    right: var(--x);
}

.video_info {
    position: relative;
}

.video_info h5 {
    margin: 0;
    color: var(--black);
    font-weight: bold;
    font-size: var(--caption);
    padding-bottom: var(--x);
    width: 80%;
}

/* MOBILE RESPONSIVENESS */

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

    :root {
        --menu: 20pt;
    }

    .title_section p {
        margin-left: var(--z);
        margin-right: var(--z);
    }

    .faq_col {
        width: 30%;
    }

    .faq_col_right {
        width: 70%;
        margin-left: var(--x);
    }

    .faq_col_right_posts {
        width: 70%;
        margin-left: var(--x);
    }

        /* project pages */

        .halfhalf_flex {
            display: block;
            height: auto;
        }
    
        .halfhalf_col {
            width: 100%;
            height: 850px;
        }
    
        .feat_img {
            height: 80vw;
        }
    
        .feat_img img {
            height: 80vw;
        }
    
        .ear_img {
            width: 60vw;
            height: 60vw;
        }
    
        .ear_img svg {
            width: 60vw;
            height: 60vw;
        }
    
        .progress_container {
            width: 40vw;
        }
    
        .bottom p {
            margin-left: var(--x);
            margin-right: var(--x);
        }
    
        .halfhalf_col_overlay {
            width: 100vw;
            height: 100%;
            position: fixed;
            background: var(--white);
            z-index: 999;
            transition: 0.5s;
            top: 0;
            left: -100%;
            right: 0;
            bottom: 0;
        }
    
        .close_btn_coinoverlay {
            font-family: var(--bodyfont);
            font-size: var(--body);
            color: var(--black);
            float: right;
            padding-right: var(--x);
            padding-bottom: var(--x);
            text-decoration: underline;
            display: block;
            cursor: var(--pointer);
        }

        .post_content .wp-block-column img {
            height: 70vw;
        }

}

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


.flex_row {
    display: flex;
    flex-direction: column-reverse;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: var(--x);
}

.collaborator_col {
    width: 100%;
    text-align: left;
}

.collaborator_col p {
    padding-bottom: var(--x);
    border-bottom: 1px solid var(--black);
}

.dollar_col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: left;

}

.dollar_col svg {
    width: var(--y);
    height: var(--y);
    padding-top: var(--x);
    padding-bottom: var(--x);
}

.info_col {
    width: 100%;
    margin-bottom: 5px;
}

.info_col h3 {
    color: var(--red);
}

.flex_row_collaps {
    flex-direction: column-reverse;
    margin: 0;
    width: 100%;
    padding-bottom: var(--x);

}

.featureimg_overlay {
    width: auto;
    position: relative;
    display: block;
    opacity: 1.0;
    left: 0;
    transform: none;
    z-index: 200;
    margin-top: var(--y);
    margin-bottom: var(--y);

}

.featureimg_overlay img {
    width: 100%;
    /* width: 400px; */
    height: 50vw;
    object-fit: contain;
    /* margin-right: auto; */
    /* margin-left: auto; */
    filter: var(--dropshadow-filter);

}

.grid_flex {
    margin-right: 0;
    justify-content: unset;
}

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

.grid_image {
    position: relative;
}

.grid_image svg {
    width: 30px;
    height: 30px;
    position: absolute;
    display: block;

    right: var(--x);
    bottom: var(--x);
}

.grid_image img {
    width: 100%;
}

.desktop_svg {
display: none;   
}

.mobile_svg svg {
    display: block;
    width: 30px;
    height: 30px;

}

.mobile_svg {
    margin-left: auto;
    display: block;
}

}

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

    :root {
        --titles: 30pt;
    }

    .button_flex_container {
        display: block;
    }

    .about_button {
        margin-left: var(--y);
        width: calc(100% - var(--z));
        margin-bottom: var(--x);
    }

    .newsletter_button {
        margin-left: var(--y);
        margin-right: var(--y);
        width: calc(100% - var(--z));
        padding: var(--y);
    }

    .dollarsigns {
        margin-left: var(--y);
        margin-right: var(--y);
        padding-top: 0;
        padding-bottom: 0;
    }

     /* footer */

     .flex_footer {
        display: none;
    }

    .footer_mobile {
        width: calc(100% - var(--y));
        margin-left: var(--x);
        margin-right: var(--x);
        font-family: var(--titlefont);
        display: block;
        border-top: 1px solid var(--black);
    }

    .footer_col_center {
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        padding-top: var(--x);
    }

    .flex_links {
        float: right;
    }

    
    .faq_col {
        width: 0;
    }

    .faq_col_right {
        width: calc(100% - var(--y));
        margin-left: var(--x);
    }

    .faq_col_right_posts {
        width: calc(100% - var(--y));
        margin-left: var(--x);
    }

    .faq_col_right h3 {
        padding-left: 0;
    }

    .faq_post_title {
        padding-left: 0;

    }

    /* .grid_flex {
        margin-right: 0;
        justify-content: unset;
    }

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

    .grid_image {
        position: relative;
    }

    .grid_image svg {
        width: 20px;
        height: 20px;
        position: absolute;
        display: block;

        right: var(--x);
        bottom: var(--x);
    }

    .grid_image img {
        width: 100%;
    }

    .desktop_svg {
display: none;   
 }

    .mobile_svg svg {
        display: block;
        width: 20px;
        height: 20px;

    }

    .mobile_svg {
        margin-left: auto;
        display: block;
    } */

        /* project pages */

        .halfhalf_flex {
            display: block;
            height: auto;
        }
    
        .halfhalf_col {
            width: 100%;
            height: 850px;
        }
    
        .feat_img {
            height: 80vw;
        }
    
        .feat_img img {
            height: 80vw;
        }
    
        .ear_img {
            width: 100vw;
            height: 100vw;
        }
    
        .ear_img svg {
            width: 100vw;
            height: 100vw;
        }
    
        .progress_container {
            width: 40vw;
        }
    
        .bottom p {
            margin-left: var(--x);
            margin-right: var(--x);
        }
    
        .halfhalf_col_overlay {
            width: 100vw;
            height: 100%;
            position: fixed;
            background: var(--white);
            z-index: 999;
            transition: 0.5s;
            top: 0;
            left: -100%;
            right: 0;
            bottom: 0;
        }
    
        .close_btn_coinoverlay {
            font-family: var(--bodyfont);
            font-size: var(--body);
            color: var(--black);
            float: right;
            padding-right: var(--x);
            padding-bottom: var(--x);
            text-decoration: underline;
            display: block;
            cursor: var(--pointer);
        }

         .mani_col h2 {
        font-size: var(--menu);
        font-family: var(--titlefont);
        padding-left: var(--x);
        padding-right: var(--x);
    }

    .mani_col img {
        width: 50px;
        height: 50px;
    }

    .mani_col_flip img {
        width: 50px;
        height: 50px;
    }

    .manifestation_grid {
        display: block;
    }

    .mani_post_col {
        height: 450px;
    }

    .related_projects {
        display: block;
        border-top: none;
        border-bottom: none;
    }

    .related_project_col {
        width: calc(100% - 120px);
        margin-left: var(--y);
        margin-right: var(--y);
        border: 1px solid var(--red);
    }

    .related_project_col a {
        font-size: var(--body);
    }




}


@media only screen and (max-width: 600px) {
    :root {
        --caption: 12pt;
        --body: 14pt;
        --menu: 20pt;
        --titles: 25pt;
        --dropshadow-filter: drop-shadow(0px 0px 10px var(--red));
        --access_container_width: 180px;

    }


    
.grid_image svg {
    width: 20px;
    height: 20px;

}


.mobile_svg svg {
    display: block;
    width: 20px;
    height: 20px;

}

    /* mobile menu */

    .site_header {
        display: none;
    }

    .top_row {
        justify-content: unset;
    }

    .header_col {
        margin-left: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .header_col_left {
        padding-left: 0;
        font-size: var(--body);
    }

    .mobile_menu {
        border: none;
        background: none;
        font-family: var(--titleFont);
        font-size: var(--body);
        cursor: var(--pointer);
    }

    .mobile_header {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        z-index: 200;
        background: var(--white);
        display: block;

    }

    .mobile_menu_overlay {
        display: block;
        width: 100vw;
        height: 100%;
        position: fixed;
        background: var(--white);
        z-index: 999;
        transition: 0.5s;
        top: 0;
        right: -100%;
        bottom: 0;
        /* /* padding-top: var(--x); */

    }

    .center_menuitems {
        top: 50%;
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .access_btn_mobile {
        width: 100%;
        border: none;
        text-align: center;
        color: var(--red);
        font-family: var(--titlefont);
        font-size: var(--titles);
        background: none;
        cursor: var(--pointer);
    }

    .center_menuitems a {
        display: block;
        text-align: center;
        color: var(--red);
        font-family: var(--titlefont);
        font-size: var(--titles);
        white-space: nowrap;
        margin-top: var(--y);
        margin-bottom: var(--y);
    }


    .close_btn_mobilemenu {
        font-family: var(--bodyfont);
        font-size: var(--body);
        color: var(--red);
        float: right;
        padding-top: var(--x);
        padding-right: var(--x);
        padding-bottom: var(--x);
        text-decoration: underline;
        display: block;
        cursor: var(--pointer);
    }

    /* accessibility overlay */

    .accessibility_overlay {
        height: 100vh;
    }

    .access_container {
        height: 180px;
        margin-right: 0;
    }

    .access_flex {
        justify-content: space-evenly;
        padding-bottom: var(--x);
    }

    .access_container svg {
        width: 80px;
        height: 80px;
        padding-bottom: var(--x);
    }

    .small_svg svg {
        width: 60px;
        height: 60px;
    }

    /* front page */

    .title_section h1 {
        font-size: var(--menu);
    }

    .title_section h2 {
        font-size: var(--body);
    }

    .title_section p {
        margin-left: var(--x);
        margin-right: var(--x);
        margin-top: 110vw;
    }

    .close_btn_accessibilitymobile {
        font-family: var(--bodyfont);
        font-size: var(--body);
        color: var(--black);
        float: right;
        padding-top: var(--x);
        padding-right: var(--x);
        padding-bottom: var(--x);
        text-decoration: underline;
        display: block;
        cursor: var(--pointer);
    }

    .halfhalf_col_overlay p {
        margin-top: var(--y);
    }

    .post_content blockquote p {
        -webkit-text-fill-color: var(--black);
    }

    .post_content p {
        color: var(--black);
    }

    .post_content .wp-block-quote {
        color: var(--black);
    }

    .post_content .wp-block-image figcaption {
        color: var(--black);
    }

    .post_content .wp-block-column h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--black);
    }

    .post_content .wp-block-column img {
        filter: var(--img_filter_none);
    }


    .post_title {
        height: 850px;
        padding-top: var(--y);
    }

    .post_content .wp-block-column img {
        height: 60vw;
    }

    /* about page */

    .page_title {
        height: 700px;
    }

    .page_title h1 {

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .page_content h3 {
        font-size: var(--titles);

    }

    .title_overlay .overlay_title_content {
        white-space: nowrap;

    }

}

/* POST RULES SO FAR:

1. NORMAL BLOCK IMG + right align img HAS Z PADDING TOP/BOTTOM
2. LEFT ALIGN IMG HAS X PADDING TOP/BOTTOM
3. HEADING H2,H3 HAS LARGE MARGIN BOTTOM
4. right align text large padding top
5. Align center image ideal for portrait imgs (fits them in a preset sized square
6. iframe center becomes full width*/