:root {
  --spacing: 2.5rem;
  --inner-spacing: 1rem;
  --primary-colour: #88d6f8;
  --secondary-colour: #ed1c24;
  --tertiary-colour: #00468c;
  --body-font-family: sans-serif;
  --body-font-size: 18px;
  --body-line-height: 1.65;
  --body-background-colour: #fcfcfc;
  --body-colour: #111111;
  --link-colour: #00468c;
  --header1-font-family: sans-serif;
  --header1-font-size: 4rem;
  --header1-line-height: 1.2;
  --header1-colour: #00468c;
  --header1-transform: none;
  --header1-weight: normal;
  --header2-font-family: sans-serif;
  --header2-font-size: 2rem;
  --header2-line-height: 1.2;
  --header2-colour: #00468c;
  --header2-transform: none;
  --header-weight: normal;
  --header3-font-family: sans-serif;
  --header3-font-size: 1.75rem;
  --header3-line-height: 1.2;
  --header3-colour: #00468c;
  --header3-transform: none;
  --header3-weight: normal;
  --header4-font-family: sans-serif;
  --header4-font-size: 1.5rem;
  --header4-line-height: 1.2;
  --header4-colour: #00468c;
  --header4-transform: none;
  --header4-weight: normal;
}

.grid {
    display: grid;
    grid-gap: var(--spacing);
    min-width: 0;
}

/* Editor styling */
.fr-view .grid {
    grid-gap: 0.5rem;
}

.fr-view .grid > * {
    outline: rgba(0, 0, 0, 0.05) 1px dashed;
    padding: 0.5rem;
}

.grid.no-gap {
    grid-gap: 0;
}

.grid.small-gap {
    grid-gap: var(--inner-spacing);
}

.grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.five-columns {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid.six-columns {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid.columns {
    grid-template-columns: min-content;
}

/* a|bbb */
.grid.two-columns.one-quarter-left {
    grid-template-columns: 1fr 3fr
}

/* aaa|b */
.grid.two-columns.three-quarters-left {
    grid-template-columns: 3fr 1fr;
}

/* a|bb */
.grid.two-columns.one-third-left {
    grid-template-columns: 1fr 2fr;
}

/* aa|b */
.grid.two-columns.two-thirds-left {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* a|bbbbbb */
.grid.two-columns.one-sixth-left {
    grid-template-columns: 1fr 5fr;
}

/* a|bb|c */
.grid.three-columns.big-centre {
    grid-template-columns: 1fr 50% 1fr;
}

.grid.two-rows {
    grid-template-rows: 1fr 1fr;
}

.grid.three-rows {
    grid-template-rows: 1fr 1fr 1fr;
}

.grid.four-rows {
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

.grid.rows {
    grid-template-rows: min-content;
}

.grid.two-rows.one-quarter-top {
    grid-template-rows: 1fr 3fr
}

.grid.two-rows.three-quarters-top {
    grid-template-rows: 3fr 1fr;
}
.grid.two-rows.one-third-top {
    grid-template-rows: 1fr 2fr;
}

.grid.two-rows.two-thirds-top {
    grid-template-rows: 2fr 1fr;
}

.grid.three-rows.big-centre {
    grid-template-rows: 1fr 50% 1fr;
}

@media (max-width: 768px) {
    .grid.two-columns,
    .grid.three-columns,
    .grid.four-columns,
    .grid.five-columns,
    .grid.six-columns,
    .grid.two-columns.one-quarter-left,
    .grid.two-columns.three-quarters-left,
    .grid.two-columns.one-third-left,
    .grid.two-columns.two-thirds-left,
    .grid.two-columns.one-sixth-left,
    .grid.three-columns.big-centre {
        grid-template-columns: minmax(0, 1fr);
    }
    .grid.two-rows,
    .grid.three-rows,
    .grid.four-rows,
    .grid.two-rows.one-quarter-top,
    .grid.two-rows.three-quarters-top,
    .grid.two-rows.one-third-top,
    .grid.two-rows.two-thirds-top,
    .grid.three-rows.big-centre {
        grid-template-rows: minmax(0, 1fr);
    }
}
* {
    box-sizing: border-box;
}

body {
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    background-color: var(--body-background-colour);
    color: var(--body-colour);
}

body.iframe {
    margin: var(--inner-spacing);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px var(--inner-spacing);
    padding: var(--inner-spacing);
    border-radius: calc(var(--inner-spacing) / 2);
}

h1 {
    color: var(--header1-colour);
    font-family: var(--header1-font-family);
    font-size: var(--header1-font-size);
    line-height: var(--header1-line-height);
    text-transform: var(--header1-transform);
    font-weight: var(--header1-weight);
}

h2 {
    color: var(--header2-colour);
    font-family: var(--header2-font-family);
    font-size: var(--header2-font-size);
    line-height: var(--header2-line-height);
    text-transform: var(--header2-transform);
    font-weight: var(--header2-weight);
}

h3 {
    color: var(--header3-colour);
    font-family: var(--header3-font-family);
    font-size: var(--header3-font-size);
    line-height: var(--header3-line-height);
    text-transform: var(--header3-transform);
    font-weight: var(--header3-weight);
}

h4 {
    color: var(--header4-colour);
    font-family: var(--header4-font-family);
    font-size: var(--header4-font-size);
    line-height: var(--header4-line-height);
    text-transform: var(--header4-transform);
    font-weight: var(--header4-weight);
}

a {
    color: var(--link-colour);
}

img {
    width: 100%;
    height: auto;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.responsive-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

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

div > *:first-child, section > *:first-child, main > *:first-child, article > *:first-child {
    margin-top: 0;
}

div > *:last-child, section > *:last-child, main > *:last-child, article > *:last-child {
    margin-bottom: 0;
}

a.button, button {
    text-align: center;
    font-size: 1rem;
    text-decoration: none;
    display: block;
    background-color: var(--primary-colour);
    color: var(--body-colour);
    padding: calc(var(--spacing) / 4) 0;
}

.cc_dialog button {
    display: inline-block;
}

article[itemProp="blogPost"] h2 {
    margin-top: 0;
}

.text-columns {
    columns: 2;
}

.text-columns.three-columns {
    columns: 3;
}

.text-columns > p {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

@media (max-width: 768px) {
    .text-columns, .text-columns-three-columns {
        columns: 1;
    }
}

.slide {
    position: relative;
}

.slideshow.constrained {
    overflow: hidden;
}

.slideshow.constrained .slick-list, .slideshow.constrained .slick-list * {
    height: 100%;
}

.slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slideshow .slick-list .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: auto;
}

.slideshow .text-overlay .title {
    color: var(--header1-colour);
    font-family: var(--header1-font-family);
    font-size: var(--header1-font-size);
    line-height: var(--header1-line-height);
    text-transform: var(--header1-transform);
    font-weight: var(--header1-weight);
    display: block;
}

.slideshow .text-overlay .description {
    font-size: 1.5rem;
    display: block;
}

.slideshow .slick-prev {
    left: var(--inner-spacing);
}

.slideshow .slick-next {
    right: var(--inner-spacing);
}

.slideshow button {
    z-index: 1;
}

.slideshow .slick-dots {
    bottom: var(--inner-spacing);
}
body {
    font-family: 'Raleway', sans-serif;
}

h1 {
    font-family: 'Playfair Display', serif;
}

h2, h3, h4 {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

nav {
    position: absolute;
    padding: 0 var(--spacing);
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    align-items: center;
    z-index: 9;
}

nav img {
    max-width: 250px;
    margin-top: 0.5rem;
}

nav ul, nav ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    display: inline-block;
    padding: var(--inner-spacing);
}

nav a {
    color: var(--body-background-colour);
    text-decoration: none;
}

nav ul li.active a {
    text-decoration: underline;
}

nav button {
    display: none;
    border: var(--body-background-colour) 1px solid;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

@media (max-width: 1000px) {
    nav {
        display: block;
        text-align: center;
    }
    nav ul {
        display: block;
    }
}

@media (max-width: 768px) {
    nav button {
        display: block;
    }
    nav > div.menu {
        display: block;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
        background: linear-gradient(to bottom right, var(--primary-colour), var(--tertiary-colour));
        max-width: 300px;
        width: 100%;
        text-align: center;
        left: 50%;
        transform: translateX(-50%) translateY(-10%);
        opacity: 0;
        transition: all 0.3s ease-out;
    }
    nav > div.menu.active {
        visibility: visible;
        transform: translateX(-50%) translateY(0%);
        opacity: 1;
        pointer-events: all;
    }
    nav ul {
        
    }
    nav ul li {
        display: block;
    }
}

header {
    position: relative;
    padding-bottom: 100px;
    overflow: hidden;
}

header > img, header > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: scale 10s ease-out forwards;
    z-index: -1;
    filter: brightness(75%);
}

header > video {
    
}

header .content {
    margin: calc(var(--spacing) * 5) 0 calc(var(--spacing) * 4) 0;
    max-width: 700px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    padding: var(--spacing);
    color: var(--body-background-colour);
    position: relative;
}

header .content h1 {
    color: var(--body-background-colour);
    margin-bottom: var(--spacing);
}

header .content > i {
     position: absolute;
     right: var(--spacing);
     font-size: 2rem;
     opacity: 0.75;
     bottom: var(--inner-spacing);
     cursor: pointer;
}

header .content p {
    margin: 0 0 1.5rem 0;
}

@media (max-width: 600px) {
    header .content {
        padding: var(--inner-spacing);
    }
    header .content h1 {
        font-size: var(--spacing);
        margin-bottom: var(--inner-spacing);
    }
    header .content p {
        margin-bottom: 1rem;
    }
}

@keyframes scale {
    from {
        transform: scale(1)
    }
    to {
        transform: scale(1.1);
    }
}

#waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
}

.waves {
    position: relative;
    width: 100%;
    height: 100px;
}

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% { 
        transform: translate3d(85px, 0, 0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
    }
}

main, section {
    padding: calc(var(--spacing) * 2);
}

@media (max-width: 768px) {
    main, section {
        padding: var(--spacing);
    }
}

@media (max-width: 500px) {
    main, section {
        padding: var(--inner-spacing);
    }
}

a.button, .button, button {
    background: linear-gradient(to bottom right, var(--primary-colour), var(--tertiary-colour));
    background-size: 100%;
    color: var(--body-background-colour);
    transition: all 0.3s ease-out;
    display: block;
    width: 100%;
    border: none;
    font-size: 1rem;
    color: var(--body-background-colour);
    font-weight: bold;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
}

a.button:hover, .button:hover, button:hover {
    background-size: 150%;
}

.message, #form-message:not(:empty) {
    background: var(--secondary-colour);
    color: var(--body-background-colour);
    padding: var(--inner-spacing);
    margin-bottom: var(--inner-spacing);
}

.panel {
    background: linear-gradient(to bottom, var(--primary-colour), var(--tertiary-colour));
    border: var(--primary-colour) 2px solid;
    color: var(--body-background-colour);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.panel > img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.panel div  {
    padding: var(--inner-spacing);
}

.panel > div:last-child {
    margin-top: auto;
}

.panel h3 {
    margin: 0.5rem 0 1rem 0;
}

.panel h3 a {
    color: var(--body-background-colour);
    text-decoration: none;
}

.interstital {
    background: linear-gradient(to bottom, var(--primary-colour), var(--tertiary-colour));
}

.interstital .panel {
    background: var(--body-background-colour);
    color: var(--body-colour);
    border: none;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px var(--spacing);
}

form {
    background: linear-gradient(to bottom, var(--primary-colour) -20%, var(--tertiary-colour));
    border: none;
    padding: var(--spacing);
    color: var(--body-background-colour);;
    font-weight: bold;
}

form legend {
    color: var(--secondary-colour);
    font-size: var(--spacing);
    font-family: 'Playfair Display', serif;
    position: Relative;
    top: -1rem;
}

form label, form label + small {
    display: block;
}

form label, form div > label:first-child {
    margin-top: 0.5rem;
}

form > label:first-of-type, form > div:first-of-type > div > label:first-of-type {
    margin-top: 0;
}

form input:not(input[type="checkbox"]):not(input[type="radio"]), form textarea {
    width: 100%;
    padding: calc(var(--inner-spacing) / 2);
}

form a {
    color: var(--body-background-colour);
}

form button {
    margin-top: var(--inner-spacing);
}

form.submitting button {
    cursor: not-allowed;
    opacity: 0.5;
}

#card-element {
    background: var(--body-background-colour);
    padding: var(--inner-spacing);
}

footer {
    background-color: var(--tertiary-colour);
    color: var(--body-background-colour);
    border-top: var(--primary-colour) var(--inner-spacing) solid;
    padding: var(--spacing);
}

footer h4 {
    color: var(--body-background-colour);
}

footer ul {
    margin: 0;
    padding: 0 0 0 1rem;
}

footer a {
    color: var(--body-background-colour);
}