@font-face {
    font-family: "TitleFont";
    src:
        url('assets/fonts/titleFont/WT_Skrappa_Roman.woff2') format('woff2'),
        url('assets/fonts/titleFont/WT_Skrappa_Roman.woff') format('woff');
}

:root {
    --x: 15px;
    --y: 30px;
    --z: 60px;
    --pointer: pointer;
    --default: default;
    --caption: 12pt;
    --body: 14pt;
    --h3: 22pt;
    --menu: 35pt;
    --h4h5h6: 18pt;
    --titles: 57pt;
    --display: 12vw;

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

    /* colors */
    --white: #ffffff;
    --black: #000000;
    --access_yellow: #FFF862;
    --access_blue: #01FFFF;
    --green: #61733E;
    --tangerine: #FF9375;
    --quartz: #DCD1FF;
    --pale_blue: #DBE9E9;
    --yellow: #FFF8B7;
    --bloodorange: #EF5227;
    --orange: #FFBE73;
    --rosewhite: #FFF4F0;

    /* 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_display: 1;
    --access_container_size: calc(100% / 2 - var(--y));
    --img_filter: none;

}


html {
    scroll-behavior: smooth;
}

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

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

h2 {
    font-size: var(--titles);
    font-family: var(--bodyFont);
    font-weight: bold;

}

h3 {
    font-size: var(--h3);
    font-family: var(--bodyFont);
    font-weight: 700;
}

h4,
h5,
h6 {
    font-size: var(--h4h5h6);
    font-family: var(--bodyFont);
    font-weight: 700;
}

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

a:hover {
    font-weight: bold;
}

p {
    line-height: var(--body_lh);
    letter-spacing: var(--body_ls);
    font-size: var(--body);
    margin-top: 0;
    margin-bottom: var(--x);
    font-family: var(--bodyFont);

}

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

}

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


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

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

.wp-block-button__link {

    background: var(--green);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: var(--x);
    padding-right: var(--x);
}

/* text colours */

.green_txt {
    color: var(--green);
}

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

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

.yellow_txt {
    color: var(--yellow);
}

.tangerine_txt {
    color: var(--tangerine);
}

.quartz_txt {
    color: var(--quartz);
}

.paleblue_txt {
    color: var(--pale_blue);
}

.bloodorange_txt {
    color: var(--bloodorange);
}

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

.rosewhite_txt {
    color: var(--rosewhite);
}

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

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

.orange_bkgrnd {
    background: var(--orange);
    color: var(--black);
}

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

.tangerine_bkgrnd {
    background: var(--tangerine);
    color: var(--black);
}

.quartz_bkgrnd {
    background: var(--quartz);
    color: var(--black);
}

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

.paleblue_bkgrnd {
    background: var(--pale_blue);
}

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

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

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

.white_stroke {
    stroke: var(--rosewhite);
}

.yellow_fill {
    fill: var(--yellow);
}

.bloodorange_fill {
    fill: var(--bloodorange);
}

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

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

/* header */
.site_header {
    z-index: 5;
    position: fixed;
    width: calc(100% - var(--z));
    display: flex;
    padding-left: var(--y);
    padding-right: var(--y);
    padding-top: var(--x);
    padding-bottom: var(--x);
}

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

.right_menu {
    margin-left: auto;
    border: none;
    background: none;
    font-size: var(--menu);
    font-family: var(--titleFont);
    cursor: var(--pointer);
}

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


/* accessibility layover / menu */

.access_layover {
    display: block;
    position: fixed;
    z-index: 10;
    right: 0;
    /* padding: var(--x); */
    height: 100vh;
    margin: 0;
    width: 350px;
    border-left: 1px solid var(--rosewhite);
    overflow-y: scroll;
    background: var(--green);
}

.access_container {
    border: 1.5px solid var(--rosewhite);
    /* padding: var(--x); */
    align-items: top;
    width: var(--access_container_size);
    height: 110px;
    margin-left: var(--x);
    margin-bottom: var(--x);
    position: relative;
    display: block;
}

.access_container h5 {
    color: var(--rosewhite);
    font-size: var(--caption);
    font-weight: normal;
    padding-top: var(--x);
    padding-bottom: 0;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    position: absolute;
    bottom: 10px;


}


.access_container svg {
    width: 80px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: var(--x);
    padding-left: var(--x);
    padding-right: var(--x);
}

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

.access_container:hover h5 {
    font-weight: bold;
}

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

.site_navigation {
    display: block;
    position: fixed;
    z-index: 10;
    right: 0;
    /* padding: var(--x); */
    height: 100vh;
    margin: 0;
    width: 350px;
    border-left: 1px solid var(--yellow);
    overflow-y: scroll;
}

/* width */
.site_navigation::-webkit-scrollbar {
    display: none;

}

.access_layover::-webkit-scrollbar {
    display: none;

}


.site_navigation ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    border-top: 1px solid var(--yellow);

}

.site_navigation li {
    padding: 10px;
    font-size: var(--body);
    border-bottom: 1px solid var(--yellow);
    cursor: var(--pointer);

}

.site_navigation li:hover {
    font-weight: bold;
}

.site_navigation_black li:hover {
    font-weight: bold;
}

.site_navigation a {
    overflow-wrap: break-word;
    word-break: break-word;
    color: var(--yellow);
}

.site_navigation_black {
    display: block;
    position: fixed;
    z-index: 10;
    right: 0;
    /* padding: var(--x); */
    height: 100vh;
    margin: 0;
    width: 350px;
    border-left: 1px solid var(--black);

}

.site_navigation_black ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    border-top: 1px solid var(--black);

}

.site_navigation_black li {
    padding: 10px;
    font-size: var(--body);
    border-bottom: 1px solid var(--black);
    cursor: var(--pointer);


}

.site_navigation_black a {
    overflow-wrap: break-word;
    word-break: break-word;
    color: var(--black);
}

.menu_close {
    margin-left: auto;
    display: block;
    border: none;
    background: none;
    font-size: var(--menu);
    font-family: var(--titleFont);
    cursor: var(--pointer);
    margin-bottom: var(--x);
    padding-top: var(--x);
    padding-right: var(--x);

}

#menu {
    right: -352px;
    transition: 1s;
}

#accessMenu {
    right: -352px;
    transition: 1s;
}


/* hero image */

.hero_image {
    z-index: -1;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

.hero_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* position: absolute; */
    z-index: -1;
}

.total_wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
}

.panel {
    position: relative;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 1000;
}

#panelA {
    position: fixed;
    height: 150vh;
    top: 0;
    z-index: -99;
    padding-left: var(--y);
    padding-right: var(--y);
    padding-top: 80px;
    width: calc(100% - var(--z));
}


#panelB {
    margin-top: 100%;
    background: yellow;
}


.frontpage_title h1 {
    font-size: 100pt;
    font-family: var(--titleFont);
}

.feature_posttitle {
    width: calc(100% - var(--z));
    min-height: 90vh;
    position: relative;
    display: block;
    padding-left: var(--y);
    padding-right: var(--y);
    padding-top: 80px;
    padding-bottom: var(--y);

}

.feature_title {
    width: calc(100% - var(--z));
    height: auto;
    position: relative;
    display: block;
    padding-left: var(--y);
    padding-right: var(--y);
    padding-top: 80px;
    padding-bottom: var(--y);

}

.feature_title h1 {
    font-size: 180pt;
    font-family: var(--titleFont);
}

.feature_img_container {
    width: 100%;
    min-height: 90vh;
    position: relative;
    display: block;

}

.feature_img_container h2 {
    padding-top: 80px;
    padding-left: var(--y);
    padding-right: var(--y);
    padding-bottom: var(--y);

}

.feature_img img {
    width: 100%;
    height: 45vw;
    object-fit: cover;
}

.feature_img figcaption {
    width: calc(100% - var(--y));
    padding: var(--x);
    /* background: var(--bloodorange); */
    font-size: var(--body);
    /* color: var(--yellow); */

}


.grid_title {
    padding: var(--x);
    text-align: center;
    background: var(--pale_blue);
}

.grid_title h2 {
    font-weight: normal;
}

.feat_info {
    display: flex;
    position: relative;
    padding-top: 50vh;
    /* width: calc(100% - var(--z)); */
}

.feat_info_img {
    display: flex;
    position: relative;
    padding-top: 50vh;
    width: calc(100% - var(--z));
    padding-left: var(--y);
}

.feat_info_img .column:nth-child(1) {
    padding-right: var(--x);
}




.feat_info .column:nth-child(1) {
    padding-right: var(--x);
}




.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 100vh 0;
}

.parallax__layer--base {
    transform: translateZ(0);
}

.parallax__layer--back {
    /* transform: translateZ(-1px); */
    transform: translateZ(-1px) scale(2);

}

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

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

.flex_container a:hover {
    font-weight: normal;
}

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

.flex_container_front a:hover {
    font-weight: normal;
}

.column {
    width: 50%;
    overflow-y: hidden;

}

.column img {
    width: 100%;
    height: 35vw;
    object-fit: cover;
}

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

.container1 {
    height: auto;

}

.container2 {
    height: auto;
}


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

.container1 img {
    width: 100%;
    height: 45vw;
    object-fit: cover;

}

.thumbnail_content {
    padding: var(--x);
    font-size: var(--body);

}

.thumbnail_content h5 {
    font-size: var(--body);
    font-family: var(--bodyFont);
    font-weight: 700;
    padding-bottom: var(--x);
}

.redfilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.redfilter {
    background-color: var(--bloodorange);
    color: var(--black);

}

.redfilter:hover {
    background-color: none;
}

.redfilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.orangefilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.orangefilter {
    background-color: var(--orange);
    color: var(--black);

}

.orangefilter:hover {
    background-color: none;
}

.orangefilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.greenfilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

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

.greenfilter:hover {
    background-color: none;
}

.greenfilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.greenfilter_whitetxt img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

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

.greenfilter_whitetxt:hover {
    background-color: none;
}

.greenfilter_whitetxt img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.tangerinefilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.tangerinefilter {
    background-color: var(--tangerine);
    color: var(--black);

}

.tangerinefilter:hover {
    background-color: none;
}

.tangerinefilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.quartzfilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.quartzfilter {
    background-color: var(--quartz);
    color: var(--black);

}

.quartzfilter:hover {
    background-color: none;
}

.quartzfilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.palebluefilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.palebluefilter {
    background-color: var(--pale_blue);
    color: var(--black);

}

.palebluefilter:hover {
    background-color: none;
}

.palebluefilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.yellowfilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.yellowfilter {
    background-color: var(--yellow);
    color: var(--black);

}

.yellowfilter:hover {
    background-color: none;
}

.yellowfilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}

.quartzfilter img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.quartzfilter {
    background-color: var(--quartz);
    color: var(--black);

}

.quartzfilter:hover {
    background-color: none;
}

.quartzfilter img:hover {
    mix-blend-mode: normal;
    filter: none;
}


.thumbnail_link:hover {
    font-weight: normal;
}

.flex_seemore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: var(--x);
    font-size: var(--titles);
}

.flex_seemore svg {
    padding-left: var(--x);
    padding-top: var(--x);
}

.flex_seemore h2 {
    font-weight: normal;
    text-align: center;
}

/* .flex_seemore a {
    color: var(--black);
    text-align: center;
    flex: 1;
} */

.flex_pagination {
    display: flex;
    flex-wrap: wrap;
    padding: var(--x);
    font-size: var(--titles);
}

.flex_pagination a {
    color: var(--black);
    text-align: center;
    flex: 1;
}

.load_more_link {
    margin-left: auto;
}

footer {
    display: flex;
}

.footer_col {
    width: 50%;
    display: block;
    padding: var(--y);
    position: relative;

}


.footer_newsletter {
    width: calc(100% - var(--z));
    font-size: var(--menu);
    color: var(--black);
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.footer_newsletter a {
    padding: none;
}

.footer_newsletter:hover {
    font-weight: 700;
}

.footer_pages a {
    display: block;
    font-size: var(--body);
    color: var(--rosewhite);
}

.footer_pages a:hover {
    font-weight: 700;
}

.footer_socials {
    margin-left: auto;
}

.footer_socials svg {
    width: 22px;
    height: 22px;
}

.facebook svg {
    width: 22px;
    height: 22px;
}

.flex_footer {
    display: flex;
}


.footer_logos {
    margin-left: auto;
    display: flex;
    padding-top: var(--y);
}

.footer_logos img {
    width: 130px;
    height: 40px;
    object-fit: cover;
    margin-left: var(--x);
}

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

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

.noticeboard_filter {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding-left: var(--y);
    padding-right: var(--y);
    margin: 0;
}

.noticeboard_filter li {
    margin-right: var(--x);
    background: var(--green);
    border-radius: var(--y);
    padding-left: var(--x);
    padding-right: var(--x);
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: var(--x);
}

.noticeboard_filter a {
    color: var(--rosewhite);
    font-size: var(--body);
}

.feature_info {
    padding: var(--x);
    font-size: var(--body);

}

.feature_info h5 {
    font-size: var(--body);
    padding-bottom: var(--x);
}

.feature_img:hover a {
    font-weight: normal;
}

/* .thumbnail_container {
    width: calc(100% / 3);
    height: auto;
} */

.thumbnail_container {
  
    width: calc(100% / 3);
    height: auto;
}

.thumbnail_container:hover{
    background-color: none;

}

.thumbnail_container img {
    mix-blend-mode: multiply;
    filter: saturate(0%) brightness(1.5);
}

.thumbnail_container img:hover {
    mix-blend-mode: normal;
    filter: none;
}



.thumbnail_container:nth-of-type(6n+1) {
    background-color: var(--tangerine);
    color: var(--black);

}

.thumbnail_container:nth-of-type(6n+2) {
    background-color: var(--pale_blue);
    color: var(--black);

}

.thumbnail_container:nth-of-type(6n+3) {
    background-color: var(--orange);
    color: var(--black);
}

.thumbnail_container:nth-of-type(6n+4) {
    background-color: var(--green);
    color: var(--yellow);
}

.thumbnail_container:nth-of-type(6n+5) {
    background-color: var(--yellow);
    color: var(--black);
}

.thumbnail_container:nth-of-type(6n+6) {
    background-color: var(--quartz);
    color: var(--black);
}


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

.thumbnail_container h4 {
    padding: var(--x);
    font-size: var(--body);
    font-weight: normal;
}

.content_toppad {
    padding-top: 90px;

}

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

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

.page_content .wp-block-column p {
    padding-right: var(--x);
}


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

.page_content h2 {
    padding-bottom: var(--z);
}

.page_content a {
    color: var(--bloodorange);
    overflow-wrap: break-word;
    word-break: break-word;
}

.page_content .wp-block-image img {
    width: 100% !important;
    filter: var(--img_filter);
}

.page_content .wp-block-image img:hover {
    transition: 1s;
    filter: none;
}



.page_content .wp-block-button__link {
    background-color: var(--green);
    color: var(--rosewhite);
}

.page_content .wp-block-button {
    padding-bottom: var(--x);
}

.page_content h3,
h4,
h5,
h6 {
    padding-bottom: var(--x);
}

.page_content iframe {
    width: 100%;
    height: 50vw;
}

.content_leftpadding {
    padding-left: 33%;
    padding-bottom: var(--x);
}

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

.people_thumbnails {
    width: calc(100% / 4);
    margin-right: var(--x);
    margin-top: var(--x);
    height: auto;
    background: var(--green);
    color: var(--rosewhite);
}

.people_thumbnails img {
    width: 100%;
    object-fit: cover;
    height: 20vw;
}

.people_thumbnails_page {
    width: calc(100% - var(--y));
    margin-right: var(--x);
    margin-top: var(--x);
    height: auto;
    background: var(--green);
    color: var(--rosewhite);
}

.people_thumbnails_page img {
    width: 100%;
    object-fit: cover;
    height: 20vw;
}

.people_text {
    padding: var(--x);
    color: var(--rosewhite);
}

.page_content .people_thumbnails a:hover .people_text {
    font-weight: normal;
}

.people_text h4 {
    font-size: var(--body);
    padding-bottom: 0;
}

.page_content .people_thumbnails .people_text a {
    color: var(--rosewhite);
}

.page_content .people_thumbnails .people_text a:hover {
    font-weight: normal;
}

.people_col {
    width: 33%;
}

.people_col_right {
    width: 66%;
}

.flex_peoplepage {
    display: flex;
}

.speaker_flex {
    display: flex;
    align-items: center;
}

.open_btn {
    margin-left: auto;
}

.close_btn {
    margin-left: auto;
    display: none;
}

.closebtn_speaker {
    display: none;
    cursor: var(--pointer);

}

.plusbtn {
    cursor: var(--pointer);

}

.speaker_flex h4 {
    padding-bottom: 0;
    font-size: var(--body);
}

.speaker_head {
    font-size: var(--body);
    font-family: var(--bodyFont);
    padding-bottom: var(--x);
    cursor: var(--pointer);
}

.speaker_content {
    /* padding-top: var(--x);  */
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
}



.speaker_container {
    padding-top: var(--x);
    padding-left: var(--x);
    padding-right: var(--x);
    border-bottom: 1px solid var(--black);
}

.load_more {
    cursor: var(--pointer);
    background: none;
    border: none;
    font-family: var(--bodyFont);
    font-size: var(--titles);
    margin-left: auto;
    margin-right: auto;
}

#no-posts {
    display: none;
}

#randomRectangle {
    position: absolute;
    height: auto; /* adjust the height as needed */
    rotate: 20deg;
    display: none;
  }

#randomRectangle img {
    position: absolute;
    object-fit: contain;
    width: 350px; /* adjust the width as needed */
    height: auto;
}

.splash {
    position: fixed;
    display: block;
    width: 100%; 
    height: 100%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20; 
}

.splash img {
    width: 250px;
    height: auto;
}

.splash h1 {
    color: var(--yellow);
    font-family: var(--titleFont);
    /* font-size: 680px;
    margin: 0; */
    line-height: 1.0;
    padding-left: var(--y);
    padding-top: var(--x);
}


.animated-text {
    font-size: 650px;
    position: absolute;
    
    animation: shrinkAndMove 2s linear 1s forwards;
  }

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

  .fade_out_quick {
    animation: fadeOut 1s ease-in-out 2.5s forwards;
  }

  .fade_out_slow {
    animation: fadeOut 1s ease-in-out 6s forwards;
  }

  @keyframes shrinkAndMove {
    0% {
      font-size: 650px;
    }
    100% {
      font-size: 180pt;
      line-height: 1.2;
      padding-top: 80px;
    }
  }

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

  @keyframes fadeInSequence {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }

  .exclamation-mark {
    opacity: 0;
    animation: fadeInSequence 2s ease-in-out forwards;
    animation-delay: 0s;
  }

  .exclamation-mark:nth-child(2) {
    animation-delay: 0.3s;
  }

  .exclamation-mark:nth-child(3) {
    animation-delay: 0.6s;
  }

  .exclamation-mark:nth-child(4) {
    animation-delay: 0.9s;
  }

  .exclamation-mark:nth-child(5) {
    animation-delay: 1.2s;
  }

  .exclamation-mark:nth-child(6) {
    animation-delay: 1.5s;
  }



  .exclamation-mark svg {
    width: 200px;
    height: 90vh;
    /* padding: var(--x); */
}

.exclamations {
    display:flex;
    justify-content: center;
    padding: var(--x);
}

.random_image {
    position: absolute;
    display: none;
}

/* mobile */

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

    .exclamation-mark svg {
        width: 120px;
      }

}

@media only screen and (max-width: 780px) {
    .feature_title h1 {
        font-size: 100pt;
        padding-bottom: var(--z);
    }

    footer {
        display: block;
    }

    .footer_col {
        width: calc(100% - var(--z));
    }

    .footer_logos {
        margin-left: 0;
    }
    .footer_logos img {
        width: 80px;
        object-fit: contain;
        margin-left: 0;
        margin-right: var(--x);
    }
    .footer_newsletter {
        position: relative;
        transform: none;
        -ms-transform: none;
        left: 0;
        top: 0;
        font-size: var(--h3);
      }

      .container2 img {
        height: 35vw;
 }

 .exclamation-mark svg {
    width: 100px;
  }

  @keyframes shrinkAndMove {
    0% {
      font-size: 450px;
    }
    100% {
      font-size: 100pt;
      line-height: 1.2;
      padding-top: 80px;
    }
  }

  .animated-text {
    font-size: 450px;
   
  }

}

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

    :root {
        --titles: 45pt;
        --menu: 30pt;
    }

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

    @keyframes shrinkAndMove {
        0% {
          font-size: 350px;
        }
        100% {
          font-size: 70pt;
          line-height: 1.2;
          padding-top: 80px;
        }
      }

      .animated-text {
        font-size: 350px;
       
      }

    #randomRectangle img {
        width: 300px;

    }

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

    .thumbnail_container img {
        height: 35vw
    }

    .content_leftpadding {
        padding-left: 0;
      }

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

      .people_thumbnails img {
        height: 35vw;
      }
      .flex_container_front {
        display: block;
      }

      .column {
        width: 100%;
      }

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

      .exclamation-mark svg {
        width: 80px;
      }
}

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

    :root {
        --titles: 40pt;
        --menu: 30pt;
    }


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

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

    }

    .feature_posttitle {
        min-height: 60vh;

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

    .noticeboard_filter {
        padding-left: var(--x);
        padding-right: var(--x);
    }
    .feature_title h1 {
        font-size: 60pt;
        padding-bottom: var(--z);
    }

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

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

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

    #randomRectangle img {
        width: 150px;
    }

    @keyframes shrinkAndMove {
        0% {
          font-size: 300px;
        }
        100% {
          font-size: 60pt;
          line-height: 1.2;
          padding-top: 120px;
        }
      }

      .animated-text {
        font-size: 300px;
       
      }

      .feature_img img {
        height: 65vw;
      }

      /* .flex_container_front {
        display: block;
      } */

      /* .column {
        width: 100%;
      } */

      .container2 img {
        height: 55vw;
      }

      .container1 img {
        height: 55vw;
      }

      .grid_title h2 {
        font-size: var(--menu);
      }

      .flex_seemore {
        font-size: var(--menu);
      }
      .flex_seemore svg {
        width: 40px;
        padding-top: 0;
      }



      .access_layover {
        height: 100%;
        width: 100%;
      }

      #accessMenu {
        right: -100%;
      }
      .thumbnail_container {
        width: 100%;
      }

      .thumbnail_container img {
        height: 55vw;
      }

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

      .feature_title {
        padding-top: 120px;
      }

      #menu {
        right: -100%;
      }

      .site_navigation {
        width: 100%;
      }



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

      .flex_seemore h2 {
        font-size: var(--menu);
      }

      .column img {
        height: 55vw;
      }

      .feat_info_img {
        display: block;
        padding-left: var(--x);
        padding-top: 20vh;
        /* width: calc(100% - var(--y)); */

      }

      .feat_info {
        display: block;
        width: calc(100% - var(--y));
        padding-top: 20vh;

      }

      
      .feat_info .column {
        padding: 0;
      }

      .feature_img_container .feat_info .column {
        padding: var(--x);
      }

      .site_navigation_black {
        width: 100%;
      }

      .feature_posttitle {
        padding-top: 120px;
      }

      :where(.wp-block-columns.is-layout-flex) {
        gap: 0.5em

      }

      .splash img {
        width: 200px;
      }

      .exclamation-mark svg {
        width: 60px;
      }

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

      .people_thumbnails img {
        height: 55vw;
      }

      #randomRectangle {
        width: auto;
      }
}

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

    :root {
        --titles: 25pt;
        --menu: 20pt;
    }

    @keyframes shrinkAndMove {
        0% {
          font-size: 250px;
        }
        100% {
          font-size: 50pt;
          line-height: 1.2;
          padding-top: 120px;
        }
      }

      .animated-text {
        font-size: 250px;
       
      }

      .animated-text {
        font-size: 250px;
       
      }

      .feature_title h1 {
        font-size: 50pt;
        padding-bottom: var(--z);
    }


}

/* sava git test */