@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --colour-one: red;
    --colour-two: blue;
    --colour-three: yellow;
    --colour-four: green;
    --colour-five: darkviolet; 
}

html,
body {
    /* overflow-x: hidden; */
}
html {
    font-family: "Hepta Slab", serif;
}
body {
    margin: 0;    
}

/* ---------------------------------------------------------------
Positioning
--------------------------------------------------------------- */
.p-absolute {
    position: absolute;
}
.p-relative {
    position: relative;
}
.align-left {
    align-items: flex-start;
}
.align-right {
    align-items: flex-end;
}

/* ---------------------------------------------------------------
Containers
--------------------------------------------------------------- */
section {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
}
.outer-wrapper {
    height: 100%;
}
.container {
    height: auto;
    width: min(100% - 3rem, 1200px);
    margin-inline: auto;
    padding: 0;
}
.two-col {
    column-count: 2;
    column-gap: 1rem;
}
.three-col {
    column-count: 3;
}
.four-col {
    column-count: 4;
}
.width-25 {
    width: 25%;
}
.width-33 {
    width: 33%;
}
.width-50 {
    width: 50%;
}
.width-66 {
    width: 66%;
}
.width-75 {
    width: 75%;
}
.width-100 {
    width: 100%;
}

.width-25 img,
.width-33 img,
.width-50 img,
.width-66 img,
.width-75 img,
.width-100 img {
    width: 100%;
}

.gap-1 {
    gap: 1rem;
}
.gap-2 {
    gap: 2rem;
}
.gap-3 {
    gap: 3rem;
}
.flex {
    display: flex;
}
.flex.left {
    flex-direction: row;
}
.flex.right {
    flex-direction: row-reverse;
}
.f-column {
    flex-direction: column;
}
.f-row {
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-column {
    flex-direction: column;
    flex-basis: 100%;
}  
.flex-double-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}
.flex-start {
    justify-content: flex-start;
}
.flex-centre {
    justify-content: center;
}
.flex-end {
    justify-content: flex-end;
}

/* ---------------------------------------------------------------
Panel height
--------------------------------------------------------------- */
.panel-height-small {
    height: 60vh;
}
.panel-height-medium {
    height: 80vh;
}
.panel-height-large {
    height: 100vh;
}

/* ---------------------------------------------------------------
Media wrap
--------------------------------------------------------------- */
.media-wrap {
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    background-color: transparent;
}
.media-wrap img {
    top: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transform: none;
    object-position: 50% 25%;
}

/* ---------------------------------------------------------------
Headers, Paragraphs, Lists, and Links
--------------------------------------------------------------- */
h1 {
    margin: 0 0 1.75rem 0;
    padding: 0;
    font-size: 4rem;
    line-height: 4rem;
    font-weight: 100;
}
h2 {
    margin: 0 0 1.5rem 0;
    padding: 0;
    font-size: 3.25rem;
    line-height: 3.25rem;
    font-weight: 100;
}
h3 {
    margin: 0 0 1.25rem 0;
    padding: 0;
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 100;
}
h4 {
    margin: 0 0 1rem 0;
    padding: 0;
    font-size: 2.75rem;
    line-height: 2.75rem;
    font-weight: 100;
}
h5 {
    margin: 0 0 1rem 0;
    padding: 0;
    font-size: 2.5rem;
    line-height: 2.5rem;
    font-weight: 100;
}
h6 {
    margin: 0 0 1rem 0;
    padding: 0;
    font-size: 2.25rem;
    line-height: 2.25rem;
    font-weight: 100;
}
p {
    margin-top: 0;
    margin-bottom: 2rem;
    /*color: #363636;*/
    color: #000;
}
p,
li {
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 300;
}
p strong {
    font-weight: 500;
}
p a {
    display: inline-block;
    position: relative;
    padding: 0.2em 0;
    color: var(--colour-five);
    text-decoration: none;
}
p a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--colour-five);
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
}
p a:hover::after,
p a:focus::after {
    opacity: 1;
    transform: translate3d(0, 0.2em, 0);
}
h1.centre, h2.centre, h3.centre, h4.centre, h5.centre, h6.centre, p.centre {
    text-align: center;
}
hr {
    width: 50%;
    margin: 6rem auto;
}

/* ---------------------------------------------------------------
Blockquotes
--------------------------------------------------------------- */
blockquote {
    margin: 6rem 0;
    padding: 2rem;
    position: relative;
    /*border: 1px solid #000;*/
}
blockquote:after {
    height: 50px;
    width: 44px;
    position: absolute;
    right: 1rem;
    bottom: -28px;
    content: '';
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z"/></svg>');
    background-repeat: no-repeat;
}
blockquote p {
    font-family: "Hepta Slab", serif;
    font-size: 1.25rem !important;
    line-height: 2.25rem;
    font-weight: 300;
}
blockquote p:first-of-type {
    margin-top: 0;
}
blockquote p:last-of-type {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
Captions
--------------------------------------------------------------- */
p.wp-caption-text,
.caption p,
.wp-caption p,
p.caption {
    margin: 0;
    font-size: 0.8rem !important;
    line-height: 0.8rem;
    /* margin: 0.5rem 0 0 0;
    padding: 0;
    display: inline-block;
    color: black;
    font-size: 1rem; */
}
p.wp-caption-text {
    margin: 0.5rem 0 0 0;
}
.wp-caption p a,
p.caption a {

}
.wp-caption.aligncenter {
	display: flex;
    flex-direction: column;
    align-items: center;
}
.wp-caption.aligncenter img {
    height: auto;
    max-width: 100%;
}
img.aligncenter {
    margin-top: 2rem;
	margin-right: auto;
    margin-bottom: 2rem;
	margin-left: auto;
	clear: both;
}
.wp-caption.alignleft,
.wp-caption.alignright {
    width: calc(50% - 1.5rem) !important;
}
.wp-caption.alignleft,
.wp-caption.alignright {
    position: relative;
}
.wp-caption.alignleft img,
.wp-caption.alignright img {
    width: 100%;
}
.wp-caption.alignleft,
img.alignleft {
	float: left;
	margin-right: 3rem;
	margin-bottom: 2rem;
}
.wp-caption.alignright,
img.alignright {
	float: right;
	margin-top: 0;
	margin-left: 3rem;
	margin-bottom: 2rem;
}

@media (max-width: 991px) {
    
}
@media (max-width: 767px) {
    .wp-caption,
    .wp-caption.alignleft,
    .wp-caption.alignright {
        width: 100%;
        display: block;
        float: none;
        margin: 0;
        padding: 0;
    }
    .wp-caption img {
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* ---------------------------------------------------------------
Cards
--------------------------------------------------------------- */

.cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    font-family: "Hepta Slab", serif;
    /* gap: 16px; */
}
.cards[cols="1"] {
    columns: 1;
    column-gap: 0;
}
.cards[cols="2"] {
    columns: 2;
    column-gap: 2rem;
}
.cards[cols="3"] {
    columns: 3;
    column-gap: 2rem;
}
.cards[cols="4"] {
    columns: 4;
    column-gap: 2rem;
}
.cards[cols="1"] .card {
    width: 100%;
}
.cards[cols="2"] .card {
    width: calc(50% - 1rem);
}
.cards[cols="3"] .card {
    width: calc(33% - 1.5rem);
}
.cards[cols="4"] .card {
    width: calc(25% - 1.5rem);
}
.cards .card {
    margin: 1rem 0;
    background-color: #fafafa;
}
.cards a.card {
    text-decoration-color: transparent;
}
.cards .card .image {
    overflow: hidden;
    position: relative;
}
.cards .card .image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: filter .3s ease-in-out;
    width: 100%;
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.cards .card .content {
    padding: 1rem 2rem;
}
.cards .card .content h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 400;
}
.cards .card .content p {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}
.cards a.card .content h3,
.cards a.card .content p {
    color: black;
    text-decoration: none;
}
.cards.appear-on-hover {

}
.cards.appear-on-hover .card {
    position: relative;
}
.cards.appear-on-hover .card img {
    aspect-ratio: 4 / 5;
}
.cards.appear-on-hover .card .content {
    opacity: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    position: absolute;
    top: 0;
    /* background-color: rgba(1, 1, 1, 0.75); */
    transition: all 400ms ease;
}
.cards.appear-on-hover .card .content h3,
.cards.appear-on-hover .card .content p {
    color: white !important;
}
.cards.appear-on-hover .card .content h3 {
    padding: 2rem 2rem 1rem 2rem;
    font-size: 1.5rem;
    line-height: 1.75rem;
}
.cards.appear-on-hover .card .content p {
    padding: 0 2rem 2rem 2rem;
    font-size: 0.9rem;
    line-height: 1.5rem;
}
.cards.appear-on-hover .card:hover .content {
    opacity: 1;
}

/* ---------------------------------------------------------------
Panels
--------------------------------------------------------------- */

.embed-container {
    position: relative; 
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}

.cards-panel {

}
.gallery-panel {

}
.image-with-text-panel {
    font-family: "Montserrat", sans-serif;
}
.image-panel {
    font-family: "Montserrat", sans-serif;
}
.image-panel.parallax {
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.image-panel .media-wrap {
    height: 100%;
}
.image-panel .content {
    padding: 3rem 0;
}
.image-panel .caption {
    width: calc(100% - 2rem);
    height: 1rem;
    padding: 1rem;
    bottom: -3rem;
    /* background-color: white; */
}
/* .image-panel .caption p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 0.8rem;
} */
.large-title-panel {
    /* font-family: "Hepta Slab", serif; */
    font-family: "Montserrat", sans-serif;
}
.large-title-panel h2 {
    font-size: 5rem;
    line-height: 5.5rem;
}
.large-title-panel h3 {
    font-size: 1rem;
    line-height: 1rem;
}
.text-with-image-panel {
    font-family: "Montserrat", sans-serif;
}
.text-with-image-panel img {
    width: 100%;
}
.text-panel {
    font-family: "Montserrat", sans-serif;
}
.text-panel .content[cols="2"] {
    column-count: 2;
    column-gap: 4rem;
}
.text-panel .content[cols="3"] {
    column-count: 3;
    column-gap: 4rem;
}
.text-panel h2.title {
    margin-bottom: 4rem;
}
.text-panel .content p {
    font-size: 1.1rem;
}
.sticky {
  position: sticky;
  align-self: flex-start;
  top: 0;
  height: min-content;
}

.text-panel p:first-of-type,
.text-with-image-panel p:first-of-type {
    font-size: 1.5rem;
}

footer p {
    font-size: 0.8rem;
    float: right;
}

footer #home{
    float: left;
    height: 20px;
    width: 20px;
    margin-left: 5px;
}

.youtube_wrapper {
    display: flex;
    justify-content: center;
}
.youtube_wrapper iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

@media screen and (min-width: 800px) {
    .column {
        flex: 1;
    }
    .double-column {
        flex: 2;
    }
}
@media (max-width: 1000px) {
    .text-panel .content[cols="3"] {
        column-count: 2;
    }
}
@media (max-width: 850px) {
    .width-25,
    .width-33,
    .width-50,
    .width-66,
    .width-75 {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .three-col, .four-col {
        column-count: 2;
    }
    .card-panel .cards[cols="2"],
    .card-panel .cards[cols="3"],
    .card-panel .cards[cols="4"] {
        columns: 2;
    }
    .cards-panel .cards[cols="2"] .card,
    .cards-panel .cards[cols="3"] .card,
    .cards-panel .cards[cols="4"] .card {
        width: 100%;
    }
    .text-panel .content[cols="2"],
    .text-panel .content[cols="3"] {
        column-count: 1;
    }
    .gallery-panel .cards[cols="2"],
    .gallery-panel .cards[cols="3"],
    .gallery-panel .cards[cols="4"] {
        columns: 1;
    }
    .gallery-panel .cards[cols="2"] .card,
    .gallery-panel .cards[cols="3"] .card,
    .gallery-panel .cards[cols="4"] .card {
        width: 100%;
    }
    .flex,
    .flex.left,
    .flex.right {
        flex-direction: column;
    }
    .sticky {
        position: relative;
        top: auto;
        /* height: min-content; */
    }
}
@media (max-width: 550px) {
    .two-col, .three-col, .four-col {
        column-count: 1;
    }
}