:root {
    --black: #000;
    --blue: #3D5F6D;
    --beige: #BD8C5E;
    --grey: #85888C;
    --white: #f9f9f9;
    --color-logo : var(--black);
}

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

.color-white, section > div > h2.color-white {
    color: var(--white);
}

.bg-color-beige {
    background-color: var(--beige);
}

/** Menu **/
body {
    margin: 0;
}

header {
    display: flex;
    width: 100%;
    background-color: var(--beige);
    position: sticky;
    top: 0;
    z-index: 4;
}

header > * {
    /*   flex-grow: 1; */
}

header h1 {
    margin-left: 1rem;
}

header a {
    text-decoration: none;
    color: var(--white);
    margin: 0 10px;
}

header a:hover, header a:active {
    text-decoration: underline;
    color: var(--black) !important;
}

#menu-btn {
    position: absolute;
    top: -100%;
    left: -100%;
}

.menu-icon {
    visibility: hidden;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 2rem;
}


/* Set width for mobile/smaller screen size. */
/* I set it big here so I don't have to shrink the screen so much */
/* for testing purposes */
@media screen and (max-width: 1100px) {
    header {
        display: grid;
        grid-template-areas:
       "title   title   hamburger"
       "nav     nav     nav";
    }

    h1 {
        grid-area: title;
    }

    .menu a {
        text-decoration: none;
        color: var(--black);
    }

    .menu-btn {
        display: none;
    }

    .menu-icon {
        grid-area: hamburger;
        cursor: pointer;
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        padding: 40px 20px 30px 0;
        position: relative;
        user-select: none;
        visibility: visible;
    }

    .navicon {
        background: var(--white);
        display: block;
        height: 2px;
        width: 25px;
        position: relative;
    }

    .navicon:before {
        top: 5px;
    }

    .navicon:after {
        top: -5px;
    }

    .navicon:before, .navicon:after {
        background: var(--white);
        display: block;
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        transition: all .2s ease-out;
    }

    .menu {
        grid-area: nav;
        max-width: unset;
        max-height: 0;
        transition: max-height .2s ease-out;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .menu a {
        padding: 20px 20px;
        border-right: 1px solid var(--white);
        background-color: var(--white);
        width: 100%;
        text-align: center;
    }

    .menu-btn:checked ~ .menu {
        max-height: 400px;
    }

    .menu-btn:checked ~ .menu-icon .navicon {
        background: transparent;
    }

    .menu-btn:checked ~ .menu-icon .navicon:before {
        transform: rotate(-45deg);
    }

    .menu-btn:checked ~ .menu-icon .navicon:after {
        transform: rotate(45deg);
    }

    .menu-btn:checked ~ .menu-icon .navicon:before,
    .menu-btn:checked ~ .menu-icon .navicon:after {
        top: 0;
    }
}

/** End Menu**/

hgroup {
    padding: 5% 0 0 5%;
}

#legalButton {
    width: 25px;
}

#legalLabel {
    width: calc(100% - 50px);
    padding: 0 10px;
}

footer li {
    padding: 10px 0;
}

.inlineBlock {
    display: inline-block;
}

.review-header {
    text-align: start;
    padding: 25px 35px;
}

.header {
    background-color: var(--black);
    display: block;
    height: 76px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 4;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
}

.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
}

section a {
    color: #000;
    text-decoration: underline;
}

.section-font-first {
    line-height: normal;
    letter-spacing: 11.6px;
    color: var(--white);
}

.section-font-second {
    line-height: normal;
    font-weight: 300;
    letter-spacing: 7.6px;
    font-size: 38px;
    color: var(--white);
    padding-left: 10px;
}

.section-font-abs-first {
    color: #D4D4D4;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 3.6px;
}

.section-font-abs-second {
    color: #D4D4D4;
    font-size: 18px;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 1.98px;
}

.margAuto {
    margin: auto;
}

.bottom-center-align {
    text-align: center;
    padding-bottom: 25px;
    width: 100%;
    bottom: 0;
    z-index: 0;
}

.pres-container {
    color: var(--white);
    width: 555px;
    height: 700px;
    transition: transform 0.3s ease;
    margin: 33px;
}

.pres-text-container {
    position: absolute;
    padding: 20px;
    width: 515px;
    text-align: center;
    z-index: 3;
    background: rgba(0, 0, 0, 0.3);
    height: 658px;
    border-radius: 5px;
}

.pres-container > img {
    position: absolute;
    border-radius: 5px;
    width: 555px;
    height: 700px;
    transition: transform 0.3s ease;
    z-index: 3;
}

.pres-container > *:nth-child(2) {
    margin-left: 10px;
    opacity: 0.2;
    width: 535px;
    z-index: 1;
}

.pres-container > *:nth-child(3) {
    margin-left: 20px;
    opacity: 0.2;
    width: 515px;
    z-index: 1;
}

.pres-text-container > div > p {
    text-align: center;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

.pres-text-container > div > p.designation {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 4.8px;
}

.pres-text-container > div > p.description {
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    letter-spacing: 4.8px;
}

.pres-text-container > div > p.location {
    font-size: 24px;
    font-style: normal;
    line-height: normal;
    letter-spacing: 4.8px;
}

.pres-text-container > *:nth-child(1) {
    margin-top: 214px;
}

.pres-text-container > *:nth-child(2) {
    margin-top: 84px;
    min-height: 84px;
}

.pres-text-container > *:nth-child(3) {
    margin-top: 80px;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 4.8px;
    cursor: pointer;
}

.pres-text-container > *:nth-child(3):hover {
    text-decoration: underline;
}

.pres-container:hover, .prestation-card:hover {
    transform: scale(0.95);
}

.pres-container:hover > *:nth-child(2) {
    transform: translateY(10px);
}

.pres-container:hover > *:nth-child(3) {
    transform: translateY(20px);
}

footer {
    padding: 20px;
}

footer > div {
    margin: 20px 0;
}

figcaption {
    text-align: center;
}

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

section {
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 25px;
}

.container {
    min-height: 40px;
    max-width: 1300px;
    margin: 15px auto auto;
    padding: 5px;
}

h1 {
    margin: 0;
}

.full-height {
    height: 100vh;
}

.min-h500 {
    min-height: 500px;
}

.top-section {
    background-size: cover;
    font-size: 1.7rem;
}

.opac-min-78 {
    position: absolute;
    min-height: calc(78vw / 1.2 - 1px);
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    top: 76px;
    z-index: 1;
}

.calc-min60 {
    min-height: calc(60vw / 1.2 - 1px);
}

.opac-min-50 {
    position: absolute;
    min-height: calc(50vw / 1.2 - 1px);
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    top: 20px;
    z-index: 1;
}

.calc-min50 {
    min-height: calc(50vw / 1.2 - 1px);
}

.padding-top {
    padding-top: 10vh;
}

.img-back {
    min-width: 80%;
    height: 100vh;
}

.img-front-right {
    clip-path: inset(0 40vh 0 0);
    height: 75vh;
    margin-top: -110vh;
}

.img-front-left {
    clip-path: inset(0 0 0 0);
    height: 75vh;
    margin-top: -110vh;
    margin-left: 25vh;
}

.mid-size {
    width: 50%;
}

.split-size-600px {
    width: 600px;
}

.split-size-700px {
    width: 700px;
}

.max-width-600 {
    max-width: 600px;
}

.mw-548 {
    margin: auto;
    max-width: 548px;
}


.gridContainer8 {
    display: grid;
    grid-template-columns: 80px 480px 80px;
    gap: 10px;
}

.gridContainer3 {
    display: grid;
    grid-template-columns: repeat(3, 33%);
}

.gridContainer4 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

.gridElement1 {
    grid-column: 1 / 2;
    text-align: center;
}

.gridElement2 {
    grid-column: 2 / 3;
}

.gridElement3 {
    grid-column: 3 / 4;
    text-align: center;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

#clientContainer img {
    margin: auto;
    max-width: 100%;
    padding: 10px 15px;
    height: 90px;
}

button, .button {
    border: 0;
    padding: 7px 15px;
    color: var(--white);
    background: var(--blue);
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
}

button:hover, .button:hover {
    text-decoration: underline;
}

.max-height-350 {
    max-height: 350px;
    width: auto;
}

.max-width-350 {
    max-width: 350px;
}

.max-width-100 {
    max-width: 100%;
}

.width-100 {
    width: 100%;
}

.width-485p {
    width: 485px;
}

.width-100-min485p {
    width: calc(100% - 505px);
    padding: 10px;
}

.margin-m6 {
    margin-top: -6px;
}

.pos-abs {
    position: absolute;
}

.pos-rel {
    position: relative;
}

.rectangleOrange {
    width: 100%;
    height: 200px;
    background: #BD8C5E;
}

.flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.grid-img-1, .grid-img-2, .grid-img-1-right, .grid-img-2-right {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.grid-container-img {
    display: grid;
    grid-template-rows: repeat(8, 80px);
}

.grid-container-txt {
    display: grid;
    grid-template-rows: repeat(0, 80px);
}

.grid-container-img {
    position: relative;
    min-width: 620px;
    margin: 10px;
}

.grid-img-1 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 9;
}

.grid-img-1-right {
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 9;
}

.grid-img-2 {
    grid-column-start: 3;
    grid-column-end: 6;
}

.grid-img-2-right {
    grid-column-start: 1;
    grid-column-end: 4;
}

.grid-img-2, .grid-img-2-right {
    grid-row-start: 2;
    grid-row-end: 8;
    z-index: 1;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.48);
}

.grid-txt-1 {
    grid-column-start: 1;
    grid-column-end: 6;
}

.grid-txt-1-right {
    grid-column-start: 4;
    grid-column-end: 6;
}

.grid-txt-1, .grid-txt-1-right {
    grid-row-start: 2;
    grid-row-end: 3;
}

.grid-txt-2 {
    grid-column-start: 2;
    grid-column-end: 5;
    margin-bottom: 15px;
}

.grid-txt-2-right {
    grid-column-start: 1;
    grid-column-end: 5;
}

.grid-txt-2, .grid-txt-2-right {
    padding: 0 25px;
    grid-row-start: 3;
    grid-row-end: 8;
}

ul {
    list-style: none;
}

body {
    border: 0;
    font-family: Segoe UI, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    max-width: 1920px;
    margin: auto;
}

p {
    font-size: 1.1em;
    line-height: 32px;
}

h2 {
    font-family: Segoe UI, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.2em;
}

.opaque-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.boldLink {
    font-weight: bold;
    text-decoration: underline;
}

.title-right-from-image, .title-left-from-image {
    width: 100%;
    letter-spacing: 0.11em;
    color: #bd8c5e;
    font-weight: 300;
    font-size: 18px;
    line-height: 33px;
}

.title-left-from-image {
    text-align: left;
}

.title-right-from-image {
    text-align: right;
}

.title-right-from-image:after {
    content: "";
    display: block;
    width: 25%;
    padding-top: 8px;
    border-bottom: 1px solid #bd8c5e;
}

.title-left-from-image:after {
    content: "";
    display: block;
    width: 25%;
    padding-top: 8px;
    border-bottom: 1px solid #bd8c5e;
}

.h2-title-content {
    font-weight: 350;
    font-size: 40px;
    line-height: 53px;
    color: #3d5f6d;
    clear: both;
    text-transform: uppercase;
}

.h2-title-content::after {
    content: "";
    display: block;
    width: 30%;
    padding-top: 15px;
    border-bottom: 1px solid #3d5f6d;
}

.btn-dark-blue {
    color: #3d5f6d;
    background-color: #fff;
    border-color: #3d5f6d;
    border-radius: 0;
}

.btn-dark-blue:hover {
    color: #fff;
    background-color: #3d5f6d;
    border-color: #3d5f6d;
    border-radius: 0;
}

.btn-white {
    color: #000000;
    background-color: #fff;
    border-color: #fff;
    border-radius: 0;
    padding: 12px;
}

.btn-white:hover {
    text-decoration: underline;
}

.btn-centered {
    display: block;
    margin: auto;
    min-width: 157px;
    max-width: 250px;
}

.bg-gold {
    background-color: #bd8c5e;
}

.swiper-container {
    padding: 50px 10px;
}

.review-card {
    display: block;
    background: #fafafa;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.review-card__header {
    margin-top: 10px;
    padding-left: 0;
}

.review-card__header p {
    text-align: left;
    font-size: 12px;
    padding-bottom: 5px;
    font-weight: 600;
    margin: 0;
    line-height: 15px;
    text-transform: uppercase;
}

.review-card__text {
    font-family: Source Sans Pro, Helvetica, sans-serif;
    font-style: italic;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    line-height: normal;
    letter-spacing: 0.04em;
    padding: 0 20px;
    overflow: auto;
}

.swiper-button-next-unique, .swiper-button-prev-unique {
    margin-top: 100%;
}

.fRight {
    float: right;
}

.swiper-pagination-bullet {
    background-color: #244b57;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
}

h3 {
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #244b57;
}

.flexContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.contentSpaceEvenly {
    justify-content: space-evenly;
}

.left-swipe-btn, .right-swipe-btn {
    width: 20px;
    cursor: pointer;
}

.left-swipe-btn {
    margin-right: 5px;
}

.right-swipe-btn {
    margin-left: 5px;
}

.width-calc-minus50 {
    width: calc(100% - 50px) !important;
}

.prestation-card {
    position: relative;
    width: 480px;
    height: 360px;
    background-blend-mode: color;
    background-size: cover;
    margin: 30px;
    transition: transform 0.3s ease;
    align-items: flex-end;
}

.prestation-card__headtitle {
    position: absolute;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 21px;
}

.hght-90px {
    height: 90px;
}

.hght-100px {
    height: 100px;
}

.prestation-card__title {
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
}

.prestation-card__title.color-black {
    color: var(--black)
}

.prestation-card__button {
    width: 150px;
    margin: auto;
    margin-top: 10px;
}

footer {
    background-color: #191919;
    color: white;
}

footer h5 {
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.2em;
    color: #ffffff;
}

footer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

footer li,
a {
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: #bd8c5e;
    text-decoration: underline;
}

.fSize22 {
    font-size: 22px;
}

footer input {
    background-color: transparent;
    border: solid 1px white;
    width: 90%;
    min-width: 90%;
    padding: 5%;
    color: white;
    margin: 14px 0;
}

footer input::placeholder {
    color: white;
}

footer textarea {
    width: calc(100% - 40px);
    min-width: calc(100% - 40px);
    height: 114px;
    background: transparent;
    color: white;
    border: solid 1px white;
    padding: 17px 20px;
}

footer input[type="checkbox"] {
    width: 24px;
    height: 24px;
}

footer svg {
    fill: white;
}

footer svg:hover {
    fill: #bd8c5e;
}

.footer__logo {
    display: block;
    margin: 0 auto;
}

.project-card {
    position: relative;
    max-width: 375px;
    max-height: 375px;
    filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.48));
}

.project-card-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.404);
    opacity: 0;
    color: #ffffff;
}

.project-card-hover__description {
    overflow: auto;
    height: inherit;
    padding: 50px 15px;
}

.project-card-hover__link {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #626262ad;
}

.project-card-hover__link a {
    font-size: 15px;
    font-weight: 500;
}

.project-card-hover__link a:hover {
    color: white;
}

.project-card-hover__title {
    position: absolute;
    width: 100%;
    color: #fff;
    font-size: 18px;
    background-color: #626262ad;
}

.project-card-hover:hover {
    opacity: 1;
    transition: opacity 0.2s;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, 0.486);
    width: 100%;
    height: 100vh;
    z-index: 100;
}

.swiper-pagination-gallery .swiper-pagination-bullet {
    background-color: white;
}

#gallery {
    display: none;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, 0.63);
    width: 100%;
    height: 100vh;
    z-index: 100;
}

#gallery .swiper-slide {
    background: none;
}

.zindex-2 {
    z-index: 2;
}

#gallery .swiper-button-next,
.swiper-button-prev {
    color: white;
}

#content-gallery {
    margin-top: 60px;
}

textarea::placeholder {
    color: white;
}

.noMarginBottom {
    margin-bottom: 0;
}

.mt-min55 {
    margin-top: -55px;
}

@media (min-width: 1606px) {
    .nav {
        max-height: none;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
    }

    .menu li {
        float: left;
    }

    .menu a:hover {
        background-color: transparent;
        color: var(--grey);
    }

    .hamb {
        display: none;
    }
}

@media (max-width: 1085px) {
    h2 {
        text-align: center;
    }

    .gridContainer3, .gridContainer4 {
        display: block;
    }

    .width-100-min485p, .width-485p {
        width: 100%;
    }

    .split-size-600px, .split-size-700px {
        margin: auto;
    }

    .grid-container-txt {
        width: 100%;
    }

    .gridContainer4 {
        grid-template-columns: repeat(2, 300px);
    }

    .grid-container-img {
        display: flex;
        align-items: center;
        margin: auto;
        padding: 15px;
    }

    .grid-img-1, .grid-img-1.opaque-filter,
    .grid-img-1-right, .grid-img-1-right.opaque-filter {
        display: none;
    }

    .grid-img-2, .grid-img-2-right {
        margin: auto;
        height: auto !important;
        width: auto !important;
        max-width: 480px;
    }
}

@media (max-width: 750px) {
    .section-font-first {
        letter-spacing: initial;
        font-size: 26px;
    }

    .section-font-second {
        padding: initial;
        font-size: 16px;
    }

    .bottom-center-align {
        display: none;
    }

    .grid-container-img, .grid-container-txt {
        height: auto;
        margin: 10px 0;
    }

    .grid-container-txt {
        display: block;
    }

    .grid-txt-2, .grid-txt-2-right, .grid-txt-1, .grid-txt-1-right {
        grid-row-start: none;
        grid-row-end: none;
    }

    .h2-title-content {
        font-size: 28px;
    }

    .pres-container {
        position: relative;
        margin: 25px 0;
        width: 100%;
    }

    .pres-text-container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 700px;
    }

    .pres-container > img {
        width: 100%;
        margin: 0;
    }

    .pres-container > *:nth-child(2) {
        margin-left: 30px;
        width: 90%;
    }

    .pres-container > *:nth-child(3) {
        margin-left: 50px;
        width: 80%;
    }
}