/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 10 version
*/

main {
    /* Scroll Timeline */
    scroll-timeline-name: --scroll;
    scroll-timeline-axis: block;
}


.highlights {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2.5rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr 2.5rem 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
    max-height: 62.5rem;
    overflow: hidden;

}


.highlights .highlight1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;

}


.highlights .highlight2 {
    -ms-grid-row: 1;
    -ms-grid-column: 3;

}


.highlights highlight3 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;

}

.highlight1 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1 / 1 / 3 / 2;
}

.highlight2 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 1 / 2 / 2 / 3;
}

.highlight3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 2 / 2 / 3 / 3;
}

.highlight {
    display: -ms-grid;
    display: grid;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    overflow: hidden;
    text-decoration: none !important;
    color: black;
    position: relative;
    min-height: 25rem
}


.highlightImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.highlightImg img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50%;
    object-position: 50%;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    margin: 0;
    width: 100%;
    height: 100%;
}

.highlight:hover img {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}

.highlightImg .tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.2)));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
    opacity: .9;
    /*background: linear-gradient(0deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.13) 100%)*/
    ;
}

.highlight:hover .tint {
    opacity: 1;
}

.highlightText {
    position: relative;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    gap: 1.25rem;
    margin: 2.5rem;
    color: #f5f2ef
}

.highlightText * {
    margin: 0;
}

.highlightText h2 {
    font-size: 2.5rem;
}

.highlightText p {
    font-size: max(1.563rem, 16px);
    color: #bebebe
}

.columns {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2.5rem 1fr 2.5rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    /*grid-template-rows: repeat(5, 1fr);*/
    overflow-y: hidden;
    margin: 0 auto;
    gap: 2.5rem;
    grid-row-gap: 12.5rem;
    position: relative
}

.card {
    overflow: hidden;
    display: block;
    border-bottom: 0.063rem solid #bebebe;
    text-decoration: none !important;
    color: black;
    background: #f5f2ef;
    padding-bottom: 5rem;
}

.card * {
    margin: 0;
    margin-bottom: 0.938rem;
    text-decoration: none !important;
}

.imgContainer {
    width: 100%;
    max-height: 50rem;
    /*25rem*/
    overflow: hidden;
}

.card img {
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    width: 100%;
    height: 100%;
    /* height: max(25rem, 200px); */
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    margin: 0;
    aspect-ratio: 1.7;
}

.card:hover img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.card:hover p.more {
    color: inherit !important
}

.card .textContainer {
    display: -ms-grid;
    display: grid;

}

.card h1,
.card h2,
.card p {
    margin: 0.625rem 1.25rem
}

.card h2 {
    color: #97886f
}

.card p {
    color: #303030
}


.contactCard {
    border: 0.125rem solid #bebebe !important;
    height: 18.75rem;
}


.heroHeader {
    width: 100vw;
    height: min(37.5rem, 550px);
    position: relative;
    z-index: 4
}

.heroHeader .banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.heroHeader .tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.05)));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .75)), to(rgba(0, 0, 0, .60)));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .60) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .60) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .45)), to(rgba(0, 0, 0, .20)));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .20) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .20) 100%);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;

}

.heroHeader .topo {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/Topographie.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Topographie.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Topographie.jpg);

    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top -50px right 65%;
}

.heroHeader .gps {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/Georeferencement.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Georeferencement.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Georeferencement.jpg);

    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top -50px right 65%;
}

.heroHeader .dji {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/Acquisition_aerienne.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Acquisition_aerienne.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Acquisition_aerienne.jpg);

    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top -250px center;
}

.heroHeader .interieurs {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/interieur.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/interieur.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/interieur.jpg);

    background-size: cover;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat
}

.heroHeader .facade {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/Facade.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Facade.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Facade.jpg);


    background-size: cover;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat
}

.heroHeader .toiture {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/toiture.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/toiture.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/toiture.jpg);


    background-size: cover;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat
}


.heroHeader .permis {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/Permis.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Permis.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/Permis.jpg);

    background-size: cover;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat
}

.heroHeader .terrassement {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/terrassement.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/terrassement.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/terrassement.jpg);

    background-size: cover;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat
}


.heroHeader .mentions {
    /*Fallback Background*/
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Fallback/mentions.jpg);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/mentions.jpg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Fallback/mentions.jpg);

    background-size: cover;
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat
}

/*Gestion webp*/

@supports (background-image: url("image.webp")) {
    .heroHeader .topo {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Topographie.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Topographie.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Topographie.webp);

        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: top -50px right 65%;
    }

    .heroHeader .gps {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Georeferencement.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Georeferencement.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Georeferencement.webp);

        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: top -50px right 65%;
    }

    .heroHeader .dji {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Acquisition_aerienne.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Acquisition_aerienne.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Acquisition_aerienne.webp);

        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: top -250px center;

    }

    .heroHeader .interieurs {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/interieur.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/interieur.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/interieur.webp);

        background-size: cover;
        background-attachment: fixed;
        background-position: 50%;
        background-repeat: no-repeat
    }

    .heroHeader .facade {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Facade.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Facade.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Facade.webp);

        background-size: cover;
        background-attachment: fixed;
        background-position: 50%;
        background-repeat: no-repeat
    }

    .heroHeader .toiture {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/toiture.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/toiture.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/toiture.webp);

        background-size: cover;
        background-attachment: fixed;
        background-position: 50%;
        background-repeat: no-repeat
    }

    .heroHeader .permis {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/Permis.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Permis.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/Permis.webp);

        background-size: cover;
        background-attachment: fixed;
        background-position: 50%;
        background-repeat: no-repeat
    }

    .heroHeader .terrassement {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/terrassement.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/terrassement.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/terrassement.webp);

        background-size: cover;
        background-attachment: fixed;
        background-position: 50%;
        background-repeat: no-repeat
    }

    .heroHeader .mentions {
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), to(rgba(0, 0, 0, 0.25))), url(/Assets/Images/banners/mentions.webp);
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/mentions.webp);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%), url(/Assets/Images/banners/mentions.webp);
    }
}


.heroHeader .textContainer {
    position: relative;
    z-index: 2;
    max-width: 150rem;
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: center;
    align-content: center;
    margin: 0 auto;
    padding: 0 13%;

}

.heroHeader .textContainer * {
    margin: 0
}

.heroHeader h1 {
    color: #f5f2ef;
}

.heroHeader h2 {
    color: #bebebe
        /*#99876d*/
    ;
}

.heroHeader p {
    color: #dfdfdf;
    font-size: max(1.875rem, 16px);
}

.flexContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6.25rem;
}

.flexContainer .imgContainer {
    position: relative;
    max-height: unset;
    width: inherit;
    min-width: 31.25rem !important;
    overflow: hidden;
    margin-bottom: 80px;
    border: 2px solid #bebebe;
}

.flexContainer h2 {
    margin-top: 0;
}

.flexContainer p {
    margin-bottom: 80px;
}

.flexContainer img {
    height: 100%;
    width: 31.25rem;
    -o-object-fit: cover;
    object-fit: cover;
}

.contactCTAContainer {}

.contactCTAContainer .btnContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
}

.contactCTAContainer .btnContainer a {
    background: #303030;
    color: #f5f2ef;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.625rem 1.563rem;
    border-radius: 1rem;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    font-size: max(2.5rem, 14px);
}

.contactCTAContainer .btnContainer a.mocha {
    background: transparent;
    border: 0.175rem solid #303030;
    color: #303030;
}

.contactCTAContainer .btnContainer a.mocha:hover {
    background: #303030;
    color: #f5f2ef;
}

.contactCTAContainer .btnContainer a:hover {
    color: #fff;
    background: #505050
}

.contactContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 2.5rem;
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem
}


.textContainer.t404 {
    display: -ms-grid;
    display: grid;
    justify-items: end;
}

.P404 {
    text-align: right;
}

.homeButton {
    text-align: center;
    font-size: 2.5rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: #303030;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

.homeButton:hover {
    color: #fff;
    background: #3f3f3f
}

.homeButton:active {
    background: #767676
}


/*

Media querries

*/

@media only screen and (max-width: 2250px) {
    .columns {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr)
    }

    .textContainer {}

}

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

    .highlights {
        overflow-x: scroll;
        height: auto;
        width: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        min-height: 80rem !important;
    }

    .highlight {
        min-height: 75rem;
        min-width: 75rem;
        grid-area: unset !important
    }

    .highlight img {
        -o-object-fit: cover;
        object-fit: cover
    }

    .f404 {
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse
    }


    .imgContainer img {
        width: 100%
    }

    .heroHeader .textContainer {
        padding: 0 13%
    }
}

@media only screen and (max-width: 1200px) {
    .contactContainer {
        display: block;
    }

    .P404 {
        padding-left: 0;
    }
    
    
}

@media only screen and (max-width: 1100px) {
    .flexContainer {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    
    .columns {
        -ms-grid-columns: unset;
        grid-template-columns: unset
    }
}


@media only screen and (max-width: 800px) {
    .heroHeader .textContainer {
        padding: 0 5rem;
    }

}