/*-----------------*/
/*--- F O N T S ---*/
/*-----------------*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/*-------------------------------------------*/
/*--- S I T E W I D E   C O N S T A N T S ---*/
/*-------------------------------------------*/

:root {
    /*--- standard colours ---*/
    --black: 0, 0, 0;
    --grey-875: 32, 32, 32;
    --grey-750: 64, 64, 64;
    --grey-625: 96, 96, 96;
    --grey-500: 128, 128, 128;
    --grey-375: 160, 160, 160;
    --grey-250: 192, 192, 192;
    --grey-125: 224, 224, 224;
    --grey-light: 235, 235, 235;
    --white: 255, 255, 255;

    /*--- design specific ---*/
    --mabileau-blue: 183, 207, 221;
    --mabileau-blue-dark: 25, 52, 65;
    --mabileau-blue-light: 237, 243, 246;
    --mabileau-white: 255, 253, 238;
    --mabileau-grey: 80, 80, 80;
    --danger: 221, 80, 60;

    /*--- font sizes ---*/
    --xxl: 50rem;
    --xl: 36rem;
    --l: 28rem;
    --m: 24rem;
    --s: 18rem;
    --xs: 14rem;
    --xxs: 12rem;

}

/*--- used to stop transitions showing on page load ---*/
.preload * { transition: none !important; }

.hidden-onload { display: none; }


/*-------------------*/
/*--- G L O B A L ---*/
/*-------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
}

html {
    min-height: 100%;
    font-size: calc(1rem / 16);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    font-family: "Open Sans", sans-serif;
    font-size: 16rem;
    font-weight: 400;
    background-color: rgb(var(--mabileau-grey), 0.1);
}

html.fixed,
body.fixed {
    overflow: hidden;
}

body > div:not(#cconsent-bar):not(#cconsent-modal):not(.cc-window){
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    background-color: rgb(var(--white));
    box-shadow: 0 0 4rem rgb(var(--black), 0.25);
}

h1, h2, h3, h4 {
    width: 100%;
    color: rgb(var(--mabileau-white));
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.4;
}

#blog-post section:first-of-type h2,
#blog-post section:first-of-type h3,
#blog-post section:first-of-type h4 {
    margin-top:60rem;
    color: rgb(var(--mabileau-grey));
}

h1 {
    font-size: var(--xxl);
}

h2 {
    font-size: var(--xl);
}

h2.lined {
    width: 100%;
    color: rgb(var(--mabileau-grey));
    text-align: center;
}

h2.lined::after {
    content: '';
    display: block;
    width: 215rem;
    height: 5rem;
    margin: 25rem auto;
    background-color: rgb(var(--mabileau-blue));
}

h2.lined span {
    display: block;
    font-size: var(--l);
    font-weight: 400;
    line-height: 1.4;
}


h3 {
    font-size: var(--l)
}

h4 {
    font-size: var(--m)
}

p {
    margin-top: 30rem;
    color: rgb(var(--mabileau-grey));
    font-size: var(--m);
    line-height: 1.5;
}

p:first-of-type {
    margin-top: 0;
}

a {
    color: rgb(var(--mabileau-grey));
}

label {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15rem;
    color: rgb(var(--mabileau-grey));
}

input, select, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    font-family: "Open Sans", sans-serif;
    max-width: 100%;
    width: 100%;
    height: 55rem;
    padding: 20rem;
    font-size: var(--m);
    font-weight: 400;
    color: var(--black);
    border: none;
    background-color: rgb(var(--mabileau-blue-light));
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: rgba(var(--mabileau-blue), 1);
}

input[type="date"] {
    max-width: 250rem;
}

select {
    padding: 0 20rem;
    background: url(/images/down-arrow.svg) center right 20rem / 20rem auto no-repeat rgb(var(--mabileau-blue-light));
    cursor: pointer;
    line-height: 1.2;
}
select:disabled {
    cursor: not-allowed;
}

textarea {
    min-height: 108rem;
    height:auto;
    resize: vertical;
    line-height: 1.4;
}

input.error,
select.error,
textarea.error {
    border: 1rem solid #F00000 !important;
}

input[type="submit"],
button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15rem 30rem;
    font-size: var(--m);
    border: none;
    text-decoration: none;
    background-color: rgb(var(--mabileau-blue-light));
    cursor: pointer;
    transition: all 500ms ease-in-out;
}

input[type="submit"]:hover,
button:hover,
.button:hover {
    background-color: rgba(var(--mabileau-blue-light), 0.7);
}

input[type="submit"].-blue,
button.-blue,
.button.-blue {
    color: rgb(var(--mabileau-white));
    background-color: rgb(var(--mabileau-blue));
}

input[type="submit"].-blue:hover,
button.-blue:hover,
.button.-blue:hover {
    background-color: rgba(var(--mabileau-blue), 0.8);
}

input[type="submit"].-blue-dark,
button.-blue-dark,
.button.-blue-dark {
    font-size: var(--s);
    color: rgb(var(--mabileau-white));
    font-weight:700;
    background-color: rgb(var(--mabileau-blue-dark), 0.75);
    text-transform: uppercase;
}

input[type="submit"].-blue-dark:hover,
button.-blue-dark:hover,
.button.-blue-dark:hover {
    background-color: rgb(var(--mabileau-blue-dark), 1);
}

input[type="submit"].-margin-top,
button.-margin-top,
.button.-margin-top {
    margin-top: 60rem;
}

a.inactive::before {
    content:'';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url("/images/inactive.svg") top 10rem right 10rem / 50rem no-repeat rgba(var(--black), 0.5);
    z-index:50;
}


/*-----------------------------------------------*/
/*--- B A C K G R O U N D   I M A G E   B O X ---*/
/*-----------------------------------------------*/

.background-image-box {
    display: block;
    position: relative;
    width: 100%;
    background-size: 0;
    border: none;
    overflow: hidden;
}

.background-image-box::after {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-image: inherit;
    background-position: center;
    background-size: cover;
    transition: 0.25s transform ease-in-out,
    0.25s opacity ease-in-out;
}

.background-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.25s transform ease-in-out,
    0.25s opacity ease-in-out;
}

a.background-image-box:hover img,
a.background-image-box:hover::after,
button.background-image-box:hover::after {
    transform: scale(1.2);
}

a.background-image-box:hover,
button.background-image-box:hover {
    cursor: pointer;
}

/*--- RATIOS ---*/
.background-image-box.-aspect-ratio-169 { aspect-ratio: 16/9; }

.background-image-box.-aspect-ratio-21 { aspect-ratio: 2/1; }

.background-image-box.-aspect-ratio-32 { aspect-ratio: 3/2; }

.background-image-box.-aspect-ratio-43 { aspect-ratio: 4/3; }

.background-image-box.-aspect-ratio-109 { aspect-ratio: 10/9; }

.background-image-box.-aspect-ratio-square { aspect-ratio: 1; }

/*--- BORDER RADII ---*/
.background-image-box.-border-radius-60 { border-radius: 60rem; }

.background-image-box.-border-radius-40 { border-radius: 40rem; }

.background-image-box.-border-radius-30 { border-radius: 30rem; }

.background-image-box.-border-radius-10 { border-radius: 10rem; }

.background-image-box.-three-corners-only { border-bottom-right-radius: unset; }

.background-image-box.-left-corners-only {
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
}

.background-image-box.-right-corners-only {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}

/*--- PLAY BUTTON ---*/
.background-image-box .play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/icons/play.svg') center / 15% no-repeat;
    z-index: 1;
}


/*-----------------------*/
/*--- F L I C K I T Y ---*/
/*-----------------------*/

.main-carousel,
.carousel {
    list-style: none;
}
.carousel:has(.dot:nth-child(1):not(:only-child)) {
    padding-bottom:90rem;
}

.main-carousel,
.carousel ul {
    display:block !important;
}

.main-carousel li:not(.dot) {
    min-width: 100%;
    text-align: center;
    margin-right:1rem;
}

.flickity-viewport {
    transition: height 0.2s;
}

.main-carousel li:not(:first-child):not(.dot),
.carousel ul li:not(:first-child):not(.dot) {
    display: none;
}

.flickity-button {
    background: transparent;
}

.flickity-prev-next-button {
    top:50%;
    width: 90rem;
    height: 90rem;
    padding:0;
    transform: translateY(-50%);
}
.flickity-prev-next-button.next {
    right: -65px;
}
.flickity-prev-next-button.previous {
    left: -65px;
}
#gallery-item-page .flickity-prev-next-button.next {
    right: -80px;
}
#gallery-item-page .flickity-prev-next-button.previous {
    left: -80px;
}
.flickity-button {
    background-color:rgb(var(--mabileau-blue));
}
.flickity-button-icon {
    fill: rgb(var(--white));
}
.flickity-button:hover {
    background:rgb(var(--mabileau-blue));
}
.flickity-button:disabled {
    display: none;
}
.flickity-button:focus {
    outline: none;
    box-shadow: none;
}
.flickity-page-dots {
    bottom:-60rem;
}
.main-carousel .flickity-page-dots {
    bottom:-160rem;
}

.flickity-page-dots .dot {
    width: 20rem;
    height: 20rem;
    opacity: 1;
    background: rgb(var(--white));
    border: 2rem solid rgb(var(--mabileau-blue));
}
.flickity-page-dots .dot.is-selected {
    background: rgb(var(--mabileau-blue));
}
.flickity-page-dots .dot:only-child {
    display:none;
}


/*-------------------------------*/
/*--- C O O K I E   M O D A L ---*/
/*-------------------------------*/

#cconsent-bar,
#cconsent-bar button {
    font-size:var(--m) !important;
}
#cconsent-bar a.ccb__edit {
    margin-right:30rem !important;
}
#cconsent-modal h2,
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content h3 {
    text-transform: initial;
}
#cconsent-modal p {
    margin-top:30rem;
    font-size:var(--s);
}
#cconsent-modal .ccm__content {
    min-height:auto !important;
}
#cconsent-modal .ccm__footer button {
    font-size:var(--s) !important;
}

/*-------------------------*/
/*--- C O N T A I N E R ---*/
/*-------------------------*/

.container {
    display: flex;
    max-width: 1440rem;
    width: 100%;
    margin: 0 auto;
}


/*-----------------------------*/
/*--- P A G E   H E A D E R ---*/
/*-----------------------------*/

#header div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto 30rem;
    padding: 45rem 60rem 0 60rem;
}

#header div nav ul li a,
#header div nav ol li a {
    color: rgb(var(--mabileau-grey));
    font-size: var(--s);
    font-weight: 700;
    text-decoration: none;
}

#header div nav ul li a:hover,
#header div nav ol li a:hover {
    text-decoration: underline;
}

#header div img {
    width: calc(50% - 30rem);
}

#header div nav {
    width: calc(50% - 90rem);
}

#header div nav > ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 30rem;
    border-bottom: 2rem solid rgb(var(--mabileau-blue));
}

#header div nav ul li {
    position: relative;
    cursor: pointer;
}

#header div nav ul li a {
    text-transform: uppercase;
}

#header div nav .sub-nav {
    list-style: none;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 20rem;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10rem 0;
    transition: all 0.4s ease;
    z-index: 99;
}

#header div nav .has-sub-nav:hover > .sub-nav {
    display: flex;
}

#header div nav .sub-nav > li {
    min-width: 260rem;
    padding-top: 20rem;
    text-align: center;
    background-color: rgba(var(--mabileau-blue), 0.8);
}

#header div nav .sub-nav > li:last-of-type {
    padding-bottom: 20rem;
}

#header div nav .sub-nav > li a {
    font-size: var(--xs);
}

/* --- breadcrumbs ---*/
#breadcrumbs {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40rem;
    padding: 20rem 105rem;
    background-color: rgb(var(--mabileau-blue), 0.4);
}

#breadcrumbs ol {
    list-style: none;
    display: flex;
    gap: 2rem;
    width: 100%;
}

#breadcrumbs ol li {
    position: relative;
    display: inline-block;
    color: rgb(var(--mabileau-grey));
    font-size: var(--s);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    text-transform: uppercase;
}

#breadcrumbs ol li:last-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#breadcrumbs ol li:not(:last-of-type)::after {
    content: "\00a0>";
    margin-top: -5rem;
    padding: 0 5rem;
    color: var(--black);
    font-weight: 400;
}

#breadcrumbs ol li a {
    text-decoration: none;
    cursor: default;
}

#breadcrumbs ol li a[href] {
    text-decoration: underline;
    cursor: pointer;
}


/*------------------------------*/
/*--- M A I N    H E A D E R ---*/
/*------------------------------*/

main header {
    display: flex;
    align-items: center;
}

main header.-no-breadcrumb {
    margin-top: 40rem;
}

main header div {
    display: flex;
    flex-wrap: wrap;
    padding: 45rem 105rem;
    background-color: rgb(var(--mabileau-blue));
}

#gallery-item-page main header div h1 {
    order: 2;
}

main header div h2,
#gallery-item-page main header div h1 {
    color: rgb(var(--mabileau-blue-dark));
    font-size: var(--m);
    font-weight: 400;
    text-transform: initial;
}
#gallery-item-page main header div h1 {
    margin: 0;
}

main header div h1,
#gallery-item-page main header div h2 {
    margin: 0;
    color: rgb(var(--mabileau-white));
    font-size: var(--xxl);
    font-weight: 800;
    text-transform: uppercase;
}

main header h2 {
    margin-top: 10rem;
}

main header > div > div {
    flex: 1 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

main header > div {
    flex: 1;
    padding: 50rem 105rem;
    background-color: rgb(var(--mabileau-blue));
}

main header.-v2 div {
    padding: 45rem 60rem;
}


main header p:first-of-type {
    margin-top: 30rem;
}

main header div p + p:last-of-type {
    color: rgb(var(--mabileau-white));
    font-weight: 700;
}

main header img {
    width: calc(50% - 30rem);
}

#services {
    margin: 90rem 0 90rem 0;
}

#services ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 60rem;
}

#services ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
}
#services ul li a:hover {
    opacity:0.8;
}
#services ul li a h3 {
    width: 100%;
    padding: 20rem;
    color: rgb(var(--mabileau-white));
    text-align: center;
    background-color: rgb(var(--mabileau-blue));
}
#services ul li a img {
    width: 100%;
    height: 280rem;
}

.two-column {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    column-gap: 60rem;
    margin: 60rem;
}

.two-column:nth-of-type(odd),
.two-column.-reverse {
    flex-direction: row-reverse;
}

.two-column.-no-gap {
    gap: 0;
}

.two-column.-no-padding,
.two-column.-no-padding div {
    margin-right: 0;
}

.two-column.-reverse.-no-padding{
    margin-right: 60rem;
    margin-left: 0;
}

.two-column.-no-padding .button,
.two-column.-no-padding p {
    margin: 30rem 60rem 0 60rem;
}

.two-column:nth-of-type(odd).-no-padding,
.two-column:nth-of-type(odd).-no-padding div {
    padding-left: 0;
}

.two-column > div {
    flex: 0 0 calc(50% - 30rem);
}

.two-column.-no-padding > div {
    flex: 0 0 calc(50% - -60rem);
}

.two-column > div p:first-child {
    margin-top: -10rem;
}

.two-column > img {
    flex: auto;
    min-width: 0;
}

.two-column h2 {
    margin-bottom: 30rem;
    padding: 45rem 60rem;
    font-size: var(--xl);
    background-color: rgb(var(--mabileau-blue));
}

#blog-list:has(ul) {
    padding: 75rem 105rem 0 105rem;
}
#gallery-item #blog-list h2.lined {
    margin-top:90rem;
}
#blog-list div > a {
    display: block;
    width: fit-content;
    margin: 30rem auto 0 auto;
    color: rgb(var(--mabileau-blue-dark));
    font-size: var(--l);
    font-weight: 800;
    text-transform: uppercase;
}

#blog-list h2,
#blog-list > .carousel > h3 {
    color: rgb(var(--mabileau-grey));
    text-align: center;
}
#blog-list > .carousel > h2.lined:has(+ h3)::after {
    margin-top:60rem;
}
#blog-list > .carousel > h3 {
    margin-top:-90rem;
    font-size:var(--m);
    font-weight:500;
}

#blog-list ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 45rem;
    width: 100%;
}
#blog-list h3 + ul {
    margin-top:60rem;
}

#blog-list ul li {
    flex-basis: calc((100% / 3) - 30rem);
}


#blog-list ul li a {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 45rem;
    text-decoration: none;
    transition: all 250ms ease-in-out;
}

#blog-list ul li a:hover {
    background-color: rgba(var(--mabileau-grey), 0.05);
}

#blog-list ul li img {
    max-width: 100%;
    width: 100%;
    max-height: 250rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#blog-list ul li h3 {
    margin-bottom: 30rem;
    color: rgb(var(--mabileau-grey));
}

#blog-list ul li .introduction {
    max-width: 450rem;
    margin-top: 15rem;
    font-size: var(--s);
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    line-height: 1.5;
}

#blog-list ul li p {
    margin-top: 30rem;
}

#blog-list ul li p:last-of-type {
    font-size: var(--m);
    color: rgb(var(--mabileau-blue));
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

#blog-post section:first-of-type {
    position: relative;
    padding: 60rem 105rem 60rem 105rem;
}

#blog-post section img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 1000rem;
    margin-top: 30rem;
}

#get-in-touch {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 105rem;
    margin-top: 75rem;
    padding: 105rem;
    background-color: rgb(var(--mabileau-blue));
}

#get-in-touch h2 {
    margin-top: -4rem;
    color:rgb(var(--mabileau-white));
    line-height: 1;
}

#get-in-touch p:first-of-type {
    margin-top: 20rem;
}

#get-in-touch p.success,
#get-in-touch p.failure {
    width: 100%;
    padding: 40rem;
    font-size: var(--m);
    border-left: 10rem solid rgba(var(--mabileau-grey), 1);
    background-color: rgba(var(--mabileau-blue-light))
}

#get-in-touch p.success strong,
#get-in-touch p.failure strong {
    display: block;
    margin-bottom: 20rem;
    font-size: var(--l);
    text-transform: uppercase;
}

#get-in-touch img {
    max-width: 506rem;
    width: 100%;
}

#get-in-touch div {
    width: 100%;
}

#get-in-touch div ul {
    list-style: none;
    width: 100%;
    margin-top: 50rem;
}

#get-in-touch div ul li:not(:first-of-type) {
    margin-top: 35rem;
}

#filter-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rem;
    padding: 40rem 105rem;
    background-color: rgba(var(--mabileau-grey), 0.05);
}

#filter-controls fieldset {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20rem;
    border: none;
    border-radius: 9999px;
}

#filter-controls select {
    width: 100%;
    font-size: var(--s);
    border: 1rem solid rgb(var(--mabileau-grey));
    border-radius: 50rem;
    background: url(/images/down-arrow.svg) center right 20rem / 20rem auto no-repeat rgb(var(--white));
    cursor: pointer;
    line-height: 1.2;
}

#filter-controls input[type="text"],
#filter-controls select {
    padding: 0 50rem 0 30rem;
    background-color: rgb(var(--white));
}

#filter-controls input[type="text"]:focus,
#filter-controls select:focus {
    outline: none;
}

#filter-controls > div > form p {
    margin: 0;
    font-size: var(--s);
    font-weight: 700;
    text-transform: uppercase;
}

#filter-controls #search {
    flex: 0 35%;
    position: relative;
    margin: 0 auto;
}

#filter-controls #search #search-text {
    max-width: 100%;
    width: 100%;
    font-size: var(--s);
    border: 1rem solid rgb(var(--mabileau-grey));
    border-radius: 50rem;
}

#filter-controls #search input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 55rem;
    height: 55rem;
    padding: 0;
    background: url("/images/icon-search.svg") 50% 50% / 100% no-repeat;
    border-radius: 9999px;
}

#gallery-item {
    position: relative;
    padding: 60rem 105rem 60rem 105rem;
}

#gallery-item.-sold > div > a::before {
    content: 'SOLD';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 0.2em;
    font-size: 55rem;
    font-weight: 800;
    width: 4.28em;
    height: 2em;
    background: url(/images/sold-tag.svg) top left / 100% no-repeat;
    transform-origin: left center;
    z-index: 98;
    transform: translateY(-50%) rotate(45deg);
}

#gallery-item h2 {
    color: rgb(var(--mabileau-blue));
}

#gallery-item h3 {
    color: rgb(var(--mabileau-blue-dark));
    font-size: var(--m);
    font-weight: 400;
}

#gallery-item > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60rem;
    height: 520rem;
}

#gallery-item > div li:not(.dot) {
    width:100%;
    /*margin:0 15rem;*/
}
#gallery-item > div > a {
    flex: 1 0 100%;
    display: block;
    position: relative;
    max-width: 750rem;
    width: 100%;
    text-decoration: none;
}

#gallery-list #gallery-item > div > a img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#gallery-item-page #gallery-item > div > a img {
    display: block;
    max-width: 100%;
    width:100%;
    max-height: 1000rem;
    height: auto;
    object-fit: contain;
}

#gallery-item > div > a > p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rem;
    width: 100%;
    padding: 10rem 50rem;
    color: rgb(var(--mabileau-white));
    font-size: var(--xxl);
    font-weight: 800;
    text-shadow: 0 0 6rem rgba(var(--black), 0.4);
    background-color: rgba(var(--mabileau-blue), 1);
}

#gallery-item > div > a > p > span {
    margin-left: 10rem;
    font-size: var(--s);
    text-transform: uppercase;
}

#gallery-item > div > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    height: 100%;
}

#gallery-item > div > div > p:first-of-type {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}

#gallery-item.-item-page .see-more {
    margin-top: 80rem;
    padding-left: 30rem;
    font-size: var(--m);
    color: rgb(var(--mabileau-grey));
}

#gallery-item.-item-page .see-more li:not(:first-of-type) {
    margin-top: 20rem;
}

#gallery-item.-item-page > div {
    display: block;
    height: auto;
}

#gallery-item.-item-page > div > a {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#gallery-item.-item-page > div > div {
    margin-top: 120rem;
}
.carousel:not(:first-of-type) {
    margin-top:90rem !important;
}
.carousel h2.lined {
    margin:0 !important;
}
.carousel h2.lined a {
    text-decoration: none;
}
.carousel h2.lined a:hover {
    text-decoration: underline;
}
.carousel ul li:not(.dot) {
    min-width:initial;
    width: 100%;
    max-width: calc((100% / 3) - 30rem);
    margin:0 22.5rem;
}

.-no-results-found {
    flex: 1 100%;
    max-width: 100% !important;
}

.-no-results-found h2 {
    color: rgb(var(--mabileau-grey));
    text-align: center;
}

#gallery-list:has(div) {
    padding: 75rem 105rem 0 105rem;
}

#gallery-list div > ul a:hover {
    background-color: rgba(var(--mabileau-grey), 0.05);
}

#gallery-list div > ul a {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 40rem;
    text-decoration: none;
    transition: all 250ms ease-in-out;
}

#gallery-list div > ul a img {
    max-width: 100%;
    aspect-ratio: 1.5/1;
    object-fit: contain;
    object-position: bottom;
}

#gallery-list div > ul a > p {
    position: relative;
    padding: 10rem 20rem;
    color: rgb(var(--mabileau-white));
    font-size: var(--l);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 6rem rgba(var(--black), 0.4);
    background-color: rgba(var(--mabileau-blue), 1);
}

#gallery-list > div > ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 45rem;
    row-gap: 45rem;
    width: 100%;
}

#gallery-list > div > ul.main-carousel,
#gallery-list > div > ul.multi-carousel {
    display:block;
    margin-top:60rem;
}

#gallery-list > div > ul > li {
    width: 100%;
    max-width: calc((100% / 3) - 30rem);
}
#gallery-list > div > ul li a {
    display: flex;
    flex-wrap: wrap;
}
#gallery-list > div > ul li a h2 {
    display: -webkit-box;
    margin-top: 5rem;
    color: rgb(var(--mabileau-blue-dark));
    font-size: var(--s);
    font-weight: 400;
    text-transform: initial;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    order: 4;
}

#gallery-list > div > ul li a h3 {
    margin-top: 1.2em;
    font-size: var(--l);
    color: rgb(var(--mabileau-blue));
}


#pagination {
    width: 100%;
    margin-top: 60rem;
    padding: 20rem;
    background-color: rgba(var(--mabileau-grey), 0.05);
}

#pagination select {
    background: url(/images/down-arrow.svg) center right 20rem / 20rem auto no-repeat rgb(var(--white));
    border: 1rem solid rgb(var(--mabileau-grey));
    border-radius: 50rem;
}

#pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rem;
    list-style: none;
}

#pagination li {
    max-width: calc(20% - 40rem);
}

#pagination ul li:nth-of-type(3) {
    max-width: 175rem;
    width: 100%;
}

#pagination ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55rem;
    height: 55rem;
    padding: 0;
    background-color: rgb(var(--white));
    border: 1rem solid rgb(var(--mabileau-grey));
    border-radius: 50rem;
    text-decoration: none;
    opacity: 0.4;
    cursor: default;
}

#pagination ul li a[href] {
    opacity: 1;
    cursor: pointer;
}

#link-carousel {
    max-width: 1400rem;
    margin: 0 auto;
    padding: 60rem 105rem 0 105rem;
}

#link-carousel .carousel-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 40rem;
}

#link-carousel .carousel-item a {
    text-decoration: none;
}

#link-carousel .carousel-item a img {
    height: 225rem;
}

#error {
    padding: 60rem 105rem 45rem 105rem;
}

#error h2,
#error ul {
    color: rgb(var(--mabileau-grey));
}

#error p {
    margin-top: 1em;
}

#error ul {
    margin: 1em 0 0 1em;
    font-size: var(--m);
}

#error ul li {
    max-width: 980rem;
    margin-top: 0.5em;
    line-height: 1.5;
}

#footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 60rem;
}

#footer img {
    max-width: 514rem;
    width: 100%;
    margin: 0 auto;
}

#footer > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20rem;
    width: 100%;
}

#footer > div > div {
    display: flex;
    flex-direction: column;
}

#footer > div > div > p {
    font-size: var(--s);
}

#footer > div > div > p:first-of-type {
    flex: 1 100%;
    margin-top: 20rem;
    color: rgb(var(--mabileau-blue));
    text-align: center;
    font-size: var(--s);
    font-weight: 800;
    text-transform: uppercase;
}

#footer > div > p:last-of-type,
#footer > div > div > p:last-of-type {
    align-self: center;
    font-size: var(--xxs);
    font-weight: 800;
    text-align: center;
}

#footer > div > p:last-of-type {
    display: none;
}

#footer > div ul {
    max-width: 250rem;
    width: 100%;
    list-style: none;
}

#footer > div ul:first-of-type {
    margin-right: auto;
}

#footer > div ul:last-of-type {
    margin-left: auto;
}

#footer > div > ul:last-of-type li h2,
#footer > div > ul:last-of-type li a {
    display: block;
    text-align: right;
}

#footer > div ul li:first-of-type {
    margin-top: 0;
}

#footer > div ul:first-of-type li:not(:first-of-type) {
    margin-top: 15rem;
}

#footer > div ul:last-of-type li:not(:first-of-type) {
    margin-top: 8rem;
}

#footer > div ul li h2 {
    font-size: var(--m);
    color: rgb(var(--mabileau-grey));
    text-transform: uppercase;
}

#footer > div ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: rgb(var(--mabileau-grey));
    text-decoration: none;
    line-height: 1.4;
}

#footer > div ul li a:hover {
    text-decoration: underline;
}

#footer > div ul li a img {
    align-self: flex-start;
    width: 25rem;
    height: 25rem;
    margin-right: 15rem;
}