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

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

:root {
    --x: 15px;
    --y: 30px;
    --z: 60px;
    --pointer: pointer;
    --default: default;
    --caption: 12pt;
    --body: 16pt;
    --menu: 18pt;
    --titles: 48pt;
    --caption: 14pt;
    --display: 12vw;

    /* fonts */
    --bodyFont: 'Poppins', sans-serif;
    ;
    --titleFont: "TitleFont";

    /* colors */
    --white: #ffffff;
    --offwhite: #F4F6CC;
    --black: #000000;
    --access_yellow: #FFF862;
    --access_blue: #01FFFF;
    --purple: #6503C3;
    --green: #D9E255;
    --bright_purple: #734D61;


    /* accessibility variables */
    --title_lh: 1.2;
    --body_lh: 1.2;
    --title_ls: normal;
    --body_ls: normal;
    --title_hl: none;
    --link_hl: none;
    --link_hl_underline: underline;
    --img_opacity: 1;
    --access_container_size: calc(100vw / 6 - var(--y));
    --img_filter: none;

}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    cursor: var(--default);
    font-family: var(--bodyFont);
}

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

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 p {
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);

}

img {
    filter: var(--img_filter);
    opacity: var(--img_opacity);
}


figcaption {
    opacity: var(--img_opacity);
    font-size: var(--caption);
    font-family: var(--bodyFont);
}

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

.purple_bkgrnd {
    background-color: var(--purple);
    color: var(--offwhite);
}

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

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

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

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

.purple_fill {
    fill: var(--purple);
}

.purple_stroke_nofill {
    fill: var(--offwhite);
    stroke: var(--purple);
    stroke-width: 4.5;
}

.purple_txt {
    color: var(--purple);
}


.purple_bkgrnd a {
    color: var(--offwhite);
}

.green_bkgrnd {
    background-color: var(--green);
}

.green_fill {
    fill: var(--green);
}

.offwhite_fill {
    fill: var(--offwhite);
}

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

.offwhite_bkgrnd {
    background-color: var(--offwhite);
}

.offwhite_txt {
    color: var(--offwhite);
}

#section1 {
    background-color: var(--offwhite);
}

#section2 {
    background-color: var(--green);
    color: var(--black);
}

#section2 h2,
h3 {
    font-size: var(--titles);
}


#section3 {
    background-color: var(--purple);
    color: var(--offwhite);
}

#section3 p {
    color: var(--offwhite);
}

.top_section {
    width: calc(100% - var(--z));
    margin-left: var(--y);
    padding-top: var(--z);
    border-bottom: 1.5px solid var(--purple);

}

.border_bottom_absolute {
    width: calc(100% - var(--y));
    /* margin-left: var(--x); */
    border-bottom: 1.5px solid var(--purple);
    position: absolute;
    top: 250px;
}

.top_section h3 {
    color: var(--purple);
    font-size: var(--titles);
    padding-bottom: var(--y);
    padding-top: 0;
}

.filter_section {
    width: calc(100% - var(--z));
    margin-left: var(--y);
    padding-top: var(--x);
    color: var(--purple);
}

.filter_section h4 {
    color: var(--purple);
    padding-top: var(--x);
    padding-bottom: var(--x);
    font-size: var(--menu);
}

.title_container_frontpage {
    width: 100%;
    height: 100vh;
}

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

.title_section h3 {
    font-size: var(--titles);
    color: var(--purple);
}

.title_container_frontpage h1 {
    margin: 0;
    /* white-space: nowrap; */
    font-size: 125pt;
    /* padding-left: var(--y); */
    position: relative;
    padding-top: var(--z);
}

.roots_font {
    font-family: "TitleFont";
    /* white-space: nowrap; */
    font-size: 125pt;
    top: 128.5px;
    position: absolute;

}


.site_header {
    top: 0;
    left: 0;
    position: fixed;
    z-index: 2;
    width: 100%;
}

.top_row {
    display: flex;
    padding-top: var(--x);
    padding-bottom: 5px;
    padding-left: var(--y);
    padding-right: var(--y);
    align-items: center;
    transition: background-color 0.3s ease;

}

.top_row .right_container a:hover {
    text-decoration: underline;
    -webkit-text-stroke: 1px var(--purple);

}

.black_textstroke:hover {
    text-decoration: underline;
    -webkit-text-stroke: 1px var(--black) !important;
}

.white_textstroke:hover {
    text-decoration: underline;
    -webkit-text-stroke: 1px var(--offwhite) !important;
}

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

.top_row .right_container a {

    padding-right: 60px;
    /* padding-right: var(--z); */
    font-size: var(--menu);
}

.site_title {
    font-family: var(--titleFont);
    font-size: var(--menu);
}

.openaccess_btn {
    border: none;
    background: none;
    font-family: var(--bodyFont);
    font-size: var(--menu);
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);

}

.openaccess_btn:hover {
    text-decoration: underline;
    -webkit-text-stroke: 1px var(--purple);
    cursor: var(--pointer);
}

.openmobile_btn {
    border: none;
    background: none;
    font-family: var(--bodyFont);
    font-size: var(--menu);
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);
    font-weight: bold;
    padding: 0;
    cursor: var(--pointer);

}

.closemobile_btn {
    border: none;
    background: none;
    font-family: var(--bodyFont);
    font-size: var(--menu);
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);
    font-weight: bold;
    padding: 0;
    margin-left: auto;
    display: block;
    cursor: var(--pointer);
    /* padding: var(--x); */

}

.scrolldown_button {
    position: fixed;
    top: 97vh;
    left: calc(100% - 75px);
    z-index: 2;
    cursor: var(--pointer);

}

.scrolldown_button svg {
    position: absolute;
    bottom: 0;
}

.scrolldown_button_fixed {
    position: fixed;
    z-index: 3;
    cursor: var(--pointer);

}

.scrolldown_button_fixed svg {
    position: fixed;
    bottom: var(--x);
    right: var(--x);
}





.top_purpleblob {
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
    top: 0;
}

.top_purpleblob svg {
    width: 70%;
    height: auto;
    position: absolute;
}

.bottom_purpleblob {
    right: 12%;
    position: fixed;
    z-index: 1;
    /* top: 40vh; */
    
}

.bottom_purpleblob svg {
    width: 12%;
    height: auto;
    position: fixed;
    bottom: 0;
    right: 0;
}


.leftbottom_blob {
    /* right: 100%; */
    position: fixed;
    z-index: 1;
    /* top: 40vh; */
    left: 0;
}

.leftbottom_blob svg {
    width: 25%;
    height: auto;
    position: fixed;
    bottom: 0;
}

.single_resourcetitle h3 {
    padding-top: 0;
    padding-bottom: var(--y);
    margin-right: 80px;
}

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

.main_content h2 {
    font-size: var(--titles) !important;
    padding-bottom: var(--x) !important;
    color: var(--black);
}

.main_content h3,h4,h5 {
    font-size: var(--menu);
    padding-bottom: var(--x);
    color: var(--black);
}

.main_content a {
    font-family: var(--titleFont);
}

/* .scrolldown_button:hover::after {
    content: "Scroll down!";
} */

.frontpage_content {
    margin-right: 25%;
    padding-bottom: 80px;
    color: var(--black);
    /* margin-left: var(--y); */
}

.frontpage_content p {
    margin: 0;
    padding-top: var(--x);
}

.text_container {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    z-index: 1;
}

.text_container svg {
    width: 95vw;
    height: auto;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: block;
    bottom: -15px;
    z-index: -1;
}

.text_container h5 {
    color: var(--purple);
}

.page_content {
    width: calc(100% - var(--z));
    padding-bottom: var(--x);
    padding-left: var(--y);
    /* padding-right: var(--y); */
    padding-top: var(--z);
    /* padding-right: 40%; */
    padding-right: var(--y);

}




.credits_gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: var(--y);
    padding-bottom: var(--y);
}

.img_container {
    /*width: calc(100% / 2);*/
    width: calc(100% / 3);
}

.img_container img {
    width: 20vw;
    height: 15vw;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

.img_caption {
    padding-top: var(--x);
    padding-bottom: var(--x);
    display: block;
    width: 100%;
    font-size: var(--menu);
    text-align: center;
}

.no_top {
    padding-top: 0;
}

.page_content h3 {
    font-size: var(--titles);
    padding-bottom: var(--z);
    padding-top: 0;
}

.page_content h2 {
    font-size: var(--titles);
    padding-bottom: var(--x);
    padding-top: 0;
}


.start_button {
    margin-top: 150px;
    margin-bottom: 30px;
    border: none;
    background: var(--purple);
    border-radius: var(--y);
    font-size: var(--menu);
    padding-left: var(--y);
    padding-right: var(--y);
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: var(--pointer);

}

.start_button:hover {
    text-decoration: underline;
}
.total_container {
    padding-bottom: var(--x);
    width: calc(100% - var(--z));
    padding-top: var(--z);
    padding-left: var(--y);
    padding-right: var(--y);
    overflow-x: hidden;
    overflow-y: hidden;

}

.total_container h2 {
    font-size: var(--titles);
    padding-bottom: var(--z);
}

.content_container {
    padding-right: 25%;
}

.content_container h2,
h3 {
    padding-top: var(--x);
    padding-bottom: var(--z);
}

.content_container h4,
h5 {
    font-size: var(--menu);
}

.purple_links a {
    color: var(--purple);
    text-decoration: underline;
    font-weight: bold;
}

.purple_headings h2,
h3 {
    color: var(--purple);
}

.flex_title {
    display: flex;
}

.flex_title h3 {
    padding: var(--x);
}

.back_button {
    position: fixed;
    right: var(--y);
    top: var(--z);
    /* left: 90vw; */
    z-index: 2;
    cursor: var(--pointer);
    border: none;
    background: none;
    width: 75px;
    padding: 0px;


}

.back_button svg {
    width: 100%;
    height: auto;
}

.back_button_nosticky {
    position: relative;
    margin-left: auto;
    margin-right: var(--x);
    z-index: 2;
    cursor: var(--pointer);
    border: none;
    background: none;

}

.back_button_nosticky svg {
    width: 75px;
    height: auto;
    position: relative;
}



.flex_container {
    display: flex;

}

.dropdown_container {
    height: var(--z);
    position: relative;
}

.flex_container_absolute {
    /* display: flex; */
    position: absolute;
    width: 100%;

}

.left_col {
    width: 35%;
    padding-left: 0;
    padding-top: var(--x);
    padding-right: var(--x);
    padding-bottom: var(--x);
}

.right_col {
    width: 65%;
    padding-top: var(--x);
    padding-right: var(--x);
    padding-left: var(--x);
    padding-bottom: 0;
}

.right_col a {
    color: var(--purple);
    text-decoration: underline;
}

.return_buttons {
    margin-left: 35%;
    display: flex;
    justify-content: center;
    padding-bottom: var(--x);
    list-style: none;
    padding: 0;
}

.return_buttons a {
    margin-top: var(--x);
    background: none;
    border: 1.5px solid var(--purple);
    border-radius: var(--y);
    padding-left: var(--z);
    padding-right: var(--z);
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: var(--x);
    cursor: var(--pointer);
    font-family: var(--bodyFont);
    font-size: var(--body);
    white-space: nowrap;
    color: var(--purple);
    display: block;
    text-align: center;
}

.return_buttons a:hover {
    transition: 0.5s;
    background: var(--purple);
    color: var(--offwhite);
}


.left_col_wide {
    width: 65%;
    /* padding: var(--x); */
}

.left_col_wide h4 {
    padding-bottom: 0px;
}

.left_col_wide .subtitle_list{
    padding-top: var(--x);
    display: none;
}

.left_col_wide:hover .subtitle_list {
    display: block;
}


.right_col_wide {
    width: 35%;
}


.right_col_wide h4 {
    padding-bottom: 0px;
}

.right_col_wide h4 a {
    text-transform: capitalize;
    color: var(--purple);
}

.right_col_wide h4 a:hover {
    text-decoration: underline;
}

iframe {
    width: 100%;
    height: 35vw;
}

.resource_thumb_flex {
    display: flex;
    flex-wrap: wrap;
    margin-left: var(--x);
    margin-right: var(--x);
    padding-top: var(--y);
}

.resource_thumb_container {
    width: calc(100% / 3);
    position: relative;
}



.resource_thumb_container .purple_stroke_nofill:hover {
    transition: 1s;
    fill: var(--purple);
}

.resource_thumb_container .center_textthumb {

    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--body);
    color: var(--purple);
    font-family: var(--bodyFont);
    pointer-events: none;

}

.resource_thumb_container .center_textthumb .title_thumb{
    display: inline;
}

.resource_thumb_container .center_textthumb .subtitle_thumb{
    display: none;
}

.resource_thumb_container:hover .center_textthumb .title_thumb{
    display: none;
}

.resource_thumb_container:hover .center_textthumb .subtitle_thumb{
    display: inline;
}

.resource_thumb_container:hover .center_textthumb {
    transition: 0.5s;
    color: var(--offwhite);
}

.dropdown {
    display: inline-block;
    position: relative;
    border: 1.5px solid var(--purple);
    width: calc(50% - var(--x));
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 20px;
    background: var(--offwhite);
    z-index: 1;
}

.dropdown_content:last-child {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom: none;

}

.dropdown_title {

    font-size: var(--body);
    color: var(--purple);
    display: flex;
    align-items: center;
    padding-left: var(--x);
    /* padding-right: var(--x); */
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.dropdown_title h6 {
    font-family: var(--bodyFont);
    font-size: var(--body);
    width: 80%;

}

.dropdown_content h6 {
    font-family: var(--bodyFont);
    font-size: var(--body);

}

.dropdown_title:hover {
    background: var(--purple);
    color: var(--offwhite);
    cursor: var(--pointer);

}

.dropdown_title:hover .purple_fill {
    fill: var(--offwhite);
}

.dropdown_title svg {
    width: 20px;
    height: 20px;
    display: block;
    margin-left: auto;
    padding-right: var(--x);
}

.dropdown_content {
    border-bottom: 1.5px solid var(--purple);
    display: block;
    padding-left: var(--x);
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: var(--x);
    font-size: var(--body);
}

.dropdown_content a {
    color: var(--purple);

}

.purple_bkgrnd a {
    color: var(--offwhite);
}

.dropdown_content:hover {
    background: var(--purple);
    color: var(--offwhite);
    cursor: var(--pointer);
}

.dropdown_content:hover a {
    color: var(--offwhite);
}

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

.dropdown_toggle {
    display: none;
}

/* accessibility overlay */

.access_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--offwhite);
    z-index: 5;
    overflow-y: scroll;
}

.access_overlay::-webkit-scrollbar {
    width: 10px;
    display: none;
}


.access_flex_content {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--z);
    width: 100%;
    margin-bottom: var(--z);
    /* justify-content: center; */
}

.access_thumb {
    margin-top: var(--x);
    margin-left: var(--x);
    width: var(--access_container_size);
    height: var(--access_container_size);
    outline: 2px solid var(--purple);
    position: relative;
    cursor: var(--pointer);
    color: var(--black);
}

.access_thumb:hover {
    background: var(--purple);
}

.access_thumb:hover h6 {
    color: var(--offwhite);
}

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

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

.access_thumb:hover .black_fill_stroke {
    fill: var(--offwhite);
    stroke: var(--offwhite);
}

.access_thumb:hover .white_fill {
    fill: var(--offwhite);
}

.active_thumb {
    background: var(--purple);
}

.active_thumb h6 {
    color: var(--offwhite) !important;

}

.active_thumb .black_stroke {
    stroke: var(--offwhite);
}

.active_thumb .black_fill {
    fill: var(--offwhite);
}

.active_thumb .black_fill_stroke {
    fill: var(--offwhite);
    stroke: var(--offwhite);
}


.access_close_btn {
    float: right;
    cursor: var(--pointer);
    background: none;
    border: none;
    color: var(--purple);
    font-family: var(--bodyFont);
    font-size: var(--menu);
    margin: var(--x);
    font-weight: bold;
    text-decoration: underline;
}

.title_flex {
    display: flex;
    padding-bottom: var(--x);
    padding-top: var(--x);
}

.title_flex h4 {
    font-family: var(--bodyFont);
    font-size: var(--body);
    color: var(--purple);
}

.border_bottom_purple {
    border-bottom: 1.5px solid var(--purple);
}

.resource_list {
    width: calc(100% - var(--z));
    margin-left: var(--y);
    padding-bottom: var(--x);
    padding-top: var(--x);
    display: block;
}

.rounded_button {
    display: block;
    width: fit-content;
    background: none;
    border: 1.5px solid var(--purple);
    border-radius: var(--y);
    padding-left: var(--x);
    padding-right: var(--x);
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: var(--x);
    cursor: var(--pointer);
    font-family: var(--bodyFont);
    font-size: var(--body);
    color: var(--purple);
}

.rounded_button:hover {
    transition: 0.5s;
    background: var(--purple);
    color: var(--offwhite);
}

.active_button {
    background: var(--purple);
    color: var(--offwhite);
}


#alphabeticalButton {
    margin-right: 0;
}
.pagination {
    padding: var(--x);
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-numbers {
    border: 1.5px solid var(--purple);
    border-radius: 50%;
    color: var(--purple);
    padding: var(--x);
    margin-left: var(--x);
    width: 20px;
    height: 20px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--caption);
}

.page-numbers:hover {
    background: var(--purple);
    color: var(--offwhite);
    transition: 0.5s;

}

.prev {
    width: auto;
    border-radius: var(--y);
    padding-left: var(--x);
    padding-right: var(--x);
    padding-top: 10px;
    padding-bottom: 10px;
}

.next {
    width: auto;
    border-radius: var(--y);
    padding-left: var(--x);
    padding-right: var(--x);
    padding-top: 10px;
    padding-bottom: 10px;
}

.current {
    background: var(--purple);
    color: var(--offwhite);
}
.long_button {
    margin-top: var(--x);
    background: none;
    border: 1.5px solid var(--purple);
    border-radius: var(--y);
    padding-left: var(--z);
    padding-right: var(--z);
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: var(--x);
    cursor: var(--pointer);
    font-family: var(--bodyFont);
    font-size: var(--body);
    white-space: nowrap;
}

.long_button:hover {
    transition: 0.5s;
    background: var(--purple);
    color: var(--offwhite);
}

/* footer */

.footer_content {
    display: flex;
    position: relative;
    width: calc(100% - var(--z));
    padding-left: var(--y);
    padding-right: var(--y);
    padding-top: var(--y);
    padding-bottom: var(--x);
    z-index: 4;
}

.footer_col_container {
    padding-right: var(--x);
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
}

.footer_col_container a {
    display: block;
    padding-bottom: 5px;

}

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

.footer_col {
    display: flex;
}

.footer_col_right {
    display: block;
    flex-wrap: wrap;
    width: 50%;
    margin-left: auto;

}

.footer_col_right img {
    width: 150px;
    float: right;
    display: inline-block;
    margin-left: auto;

    padding-left: 5px;
    height: 5vw;
    object-fit: contain;
}

/* ANIMATIONS */

.fade-in {
    animation: fadeIn 3s;

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

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

.fade-out {
    animation: fadeOut 1.5s forwards 1s;

    -webkit-animation: fadeOut 1.5s forwards 1s;
    -moz-animation: fadeOut 1.5s forwards 1s;
    -o-animation: fadeOut 1.5s forwards 1s;
    -ms-animation: fadeOut 1.5s forwards 1s;
}

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

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.root_container {
    display: block;
    position: relative;
    width: 600px;
    min-height: 150px;
    background: var(--offwhite);
    color: var(--purple);
    margin-left: var(--y);
    margin-top: 120px;

}

.left_auto {
    margin-left: auto;
    margin-right: var(--y);
}

.center_text_full {
    display: flex;
    align-items: center;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 90%;
    margin-left: var(--x);
    margin-right: var(--x);
    color: var(--purple);
}

.feat_img_want img {

    width: 10vw;
    height: auto;
}

.center_text_full h5 {
    font-family: var(--bodyFont);
    font-size: var(--body);
    font-weight: bold;
}

.center_text_full h6 {
    font-family: var(--bodyFont);
    font-size: var(--body);
    font-weight: normal;
}

.center_text {
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 60%;
    margin-left: var(--x);
    margin-right: var(--x);
    color: var(--purple);
}

.center_text h5 {
    font-family: var(--bodyFont);
    font-size: var(--body);
    font-weight: bold;
    color: var(--purple);
}

.center_text h6 {
    font-family: var(--bodyFont);
    font-size: var(--body);
    font-weight: normal;
}


.iam_text h5 {
    color: var(--purple);
    font-family: var(--bodyFont);
    font-size: var(--body);
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100%;
    margin-left: var(--x);
    margin-right: var(--x);
    text-align: center;
}

.top svg {
    position: absolute;
    height: auto;
    width: 100%;
    top: 0;
    transform: translateY(-98%);

}

.bottom2 svg {
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0;
    transform: translateY(90%);

}

.bottom svg {
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0;
    transform: translateY(98%);

}

.left svg {
    position: absolute;
    height: 100%;
    width: auto;
    transform: translateX(-95%);
}

.right svg {
    position: absolute;
    height: 100%;
    width: auto;
    right: 0;
    transform: translateX(98%);
}

.iam_roots .green_fill {
    fill: var(--offwhite);
}

.iam_roots svg {
    width: 100%;
    height: auto;
    opacity: 0.3;
    position: fixed;
}

.post_container {
    padding-top: 100px;
    padding-bottom: 150px;
}

.root_container:hover .root_hover {
    opacity: 1;
    transition: 1s;
}

.root_hover {
    opacity: 0;
    width: 100%;

}


.top_hover svg {
    transform: translateY(-100%);
    width: 100%;
    height: auto;
    position: absolute;
}

.bottom_hover svg {
    width: 100%;
    height: auto;
    position: absolute;
    transform: translateY(100%);
    bottom: 0;
    z-index: 2;

}

.root_hover .green_fill {
    fill: var(--offwhite);
}

#no-thumbnails {
    display: none;
}

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

.auto_margin {
    margin-left: auto;
    margin-right: auto;
}


.access_thumb svg {
    /* position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--y);
    display: block;
    width: 60%;
    height: auto;
}

.access_thumb h6 {
    font-size: var(--body);
    font-family: var(--bodyFont);
    text-align: center;
    padding-top: var(--x);
    position: absolute;
    bottom: var(--x);
    width: 100%;
    color: var(--black);
}

.small_svg svg {
    width: 50%;
}

.small_svg_height svg {
    width: 50%;
    height: 50%;
}

.svg_padding_top svg {
    padding-top: 50px;
}


/* ----------------------------- 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;
}


/* BBC test CSS, to be removed!! */

/* video {
    position: fixed !important;
    height: 300px;
} */

p {
    /* background: white; */
    position: relative;
}

.parallax_container {
    position: relative;
    background: var(--offwhite);
}

.feat_img_thumb {
    width: 350px;
    height: 350px;
    position: relative;
}

.feat_img_thumb img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.feat_img_thumb:hover #lottieContainer {
    display: block;
}

#lottieContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
}

.feat_video {
    min-height: 400px;
}


.feat_video iframe {
    position: fixed;
    height: 400px;

}

#mobileOverlay {
    display: none;
}

/* mobile overlay */

.mobile_overlay {
    position: fixed;
    display: block;
    width: calc(100% - var(--y));
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--offwhite);
    z-index: 5;
    overflow-y: scroll;
    padding: var(--x);
}

.about_btn {
    background: none;
    color: var(--purple);
    font-size: var(--menu);
    font-family: var(--bodyFont);
    border: 1.5px solid var(--purple);
    border-radius: var(--y);
    padding-right: var(--x);
    padding-left: var(--x);
    font-weight: 500;
    display: block;
    margin-top: var(--x);
    text-transform: uppercase;
    cursor: var(--pointer);
}

.about_btn:hover {
    background: var(--purple);
    color: var(--offwhite);
}

.about_submenu {
    margin-left: var(--x);
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
}

#desktopMenu {
    display: block;
}

#mobileMenu {
    display: none;
}

.roots_overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--purple);
    z-index: 5;
    overflow-y: hidden;
    /* padding: var(--x); */
}

@media only screen and (max-width: 1050px) {
 :root {
    --access_container_size: calc(100vw / 4 - var(--y));
 }
}

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

    .root_container {
        margin-top: 100px;
    }


}

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

    :root {
        --access_container_size: calc(100vw / 3 - var(--y));
     }

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

    .content_container {
        padding-right: unset;
    }

    .footer_content {
        display: block;
        padding-top: var(--x);
        padding-left: var(--x);
        padding-right: var(--x);
        width: calc(100% - var(--y));
        z-index: 3;
    }

    /* .page_content {
        padding-right: var(--y);
    } */

    .root_container {
        width: 80vw;
        /* margin-left: 0; */
    }

    .resource_thumb_container {
        width: calc(100% / 2);
    }

    .flex_container {
        display: block;
    }

    .left_col {
        width: 100%;
    }

    .right_col {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .return_buttons {
        margin-left: 0;
        display: block;
    }

    .return_buttons a {
        width: 60vw;
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
    }

    .long_button {
        width: 60vw;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .scrolldown_button_fixed svg {
        width: 45px;
        bottom: 5px;
    }

    .top_purpleblob svg {
        width: 50%;
    }

    .bottom_purpleblob svg {
        width: 15%;
    }

    .dropdown {
        display: block;
        width: 100%;
        margin-bottom: var(--x);
    }

    .dropdown_container {
        height: auto;
    }

    .dropdown_title {
        align-items: center;
    }

    .dropdown_title svg {
        /* padding-top: 5px; */
        position: absolute;
        right: var(--x);
        padding-right: 0;

    }

    .right_container {
        display: flex;
        flex-wrap: wrap;
    }

    .rounded_button {
        display: block;
        margin-bottom: var(--x);
    }

    .purple_stroke_nofill {
        stroke-width: 3;
    }

    .footer_col_right {
        display: inline-block;
        width: 100%;
        padding-top: var(--x);
        margin-left: unset;
    }

    .footer_col_right img {
        width: auto;
        float: left;
        display: inline-block;
        margin-left: unset;
        padding-left: 0;
        padding-right: var(--x);
    }


}

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

    :root {
        --titles: 35pt;
        --access_container_size: calc(100vw / 2 - var(--y));

    }

    .scrolldown_button_fixed svg {
        width: 35px;
        bottom: 0;
    }


    .long_button {
        width: 80vw;

    }

    .title_container_frontpage h1 {
        font-size: 100pt;
    }

    .roots_font {
        font-size: 100pt;
        /* top: 125px; */
    }

    #desktopMenu {
        display: none;
    }

    #mobileMenu {
        display: block;
    }

    .top_row {
        padding: 0;
    }

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

    .openmobile_btn {
        padding: var(--x);
    }
    .credits_gallery {
        display: block;
    }

    .img_container {
        width: 100%;
    }

    .img_container img {
        display: block;
        width: 40vw;
        /*height: 35vw;*/
        height: auto;
        margin-left: 0px;
        margin-right: 0px;
    }



    .right_container {
        display: flex;
        flex-wrap: wrap;
    }

    .rounded_button {
        display: block;
        margin-bottom: var(--x);
    } 


    .resource_thumb_container {
        width: 100% ;
    }

    .resource_thumb_container h4 {
        width: calc(100% - var(--z));
        /* margin-left: var(--y); */
        margin-right: var(--y);

    }

    .back_button {
        width: 30px;
        right: var(--x);
    }

    .iam_roots svg {
        width: 200vw;
        transform: translateX(-25%);
    }

    
    .top_section h3 {
        margin-right: var(--y);
    }
}

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

    :root {
        --titles: 25pt;
        --access_container_size: calc(100%/2 - var(--y));
    }

    .title_container_frontpage {
        height: 90vh;
    }

    .scrolldown_button_fixed svg {
        display: none;
    }

    .scrolldown_button svg {
        width: 45px;
    }

    .top_purpleblob svg {
        display: none;
    }

    .bottom_purpleblob {
        display: none;
    }


    .long_button {
        margin-left: auto;
        margin-right: auto;
        width: 90vw;
        display: block;

    }

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

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

    /* .page_content {
        padding-right: var(--x);
        padding-left: var(--x);
    } */



    .title_container_frontpage h1 {
        font-size: 70pt;
    }

    .roots_font {
        font-size: 70pt;
        top: 125px;
    }


    .text_container svg {
        width: 200vw;
        transform: translateX(-25%);
    }

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



    .scrolldown_button {
        position: fixed;
    }

    .footer_col_right {
        /* padding-top: var(--x); */
    }

    .footer_col_right img {
        height: 10vw;
        padding-bottom: var(--x);
        padding-top: var(--x);
        padding-left: 0;
    }

    .post_container {
        padding-top: 0;
        padding-bottom: var(--x);
    }

    

    .top_hover {
        display: none;
    }

    .bottom_hover {
        display: none;
    }

    .iam_text h5 {
        margin-left: 0;
        width: calc(100% - var(--y));
    }

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

    .center_text_full {
        display: block;
        width: calc(100% - var(--y));
        margin-left: 0;

    }

    .root_container {
        min-height: 170px;
    }

    .feat_img_want img {
        width: 15vw;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }



    .left_col {
        width: 100%;
    }



    .right_col {
        width: 100%;
        padding: 0;
        margin-top: var(--x);
    }

    iframe {
        height: 55vw;
    }

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

    .page_content h3 {
        margin-right: var(--z);
        padding-bottom: var(--x);
    }

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


    .img_container img {
        width: 30vw;
        height: 25vw;
    }

    .access_thumb h6 {
        position: relative;
        bottom: unset;
        padding-bottom: var(--x);
    }

    .access_thumb svg {
        width: 50%;
    }

    .small_svg svg {
        width: 40%;
    }

    .small_svg_height svg {
        height: 70px;
    }

    .access_thumb {
        height: auto;
    }

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

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

    .left_col_wide .subtitle_list{
        display: block;
    }

    .title_flex {
        flex-direction: column;
    }

    .left_col_wide {
        width: 100%;
    }

    .right_col_wide {
        width: 100%;
    }

    .right_col_wide h4 {
        padding-top: var(--x);
        font-size: var(--caption);
    }

}


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

    :root {
        --titles: 25pt;
        --menu: 16pt;
        --body: 14pt;
        --caption: 12pt;
    }

    .title_container_frontpage h1 {
        font-size: 50pt;
    }

    .roots_font {
        font-size: 50pt;
        top: 123px;
    }

    .footer_col {
        display: block;
    }



}