/*************** GENERAL ***************/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background-color: white;
    min-height: 100vh;
    position: relative;
    color: #2c2e35;
    font-size: 19px;
    box-sizing: border-box;
    font-family: "Amiri", serif;
    font-weight: 400;
    font-style: normal;
}


h1 {
    font-size: clamp(1.813rem, 0.563vw + 1.7rem, 2.375rem);
}

main {
    min-height: calc(100vh - 248px - 880px);
}

li {
    list-style: none;
}

a, a:hover, a:active {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: none;
}

img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.container {
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

.container.wide {
    padding-right: min(3vw, 50px);
    padding-left: min(3vw, 50px);
}

.textCenter {
    text-align: center!important;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-space-between {
    justify-content: space-between;
}

.justify-content-space-around {
    justify-content: space-around;
}

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

.align-items-end {
    align-items: flex-end;
}

.align-items-start {
    align-items: flex-start;
}

.gap-5vw{
    gap:5vw;
}
.gap-2vw{
    gap:2vw;
}
.p-r-5 {
    padding-right: 5px;
}

.p-r-10 {
    padding-right: 10px;
}

.p-r-15 {
    padding-right: 15px;
}

.p-l-5 {
    padding-left: 5px;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-15 {
    padding-left: 15px;
}

.p-t-10 {
    padding-top: 10px;
}

.p-t-15 {
    padding-top: 15px;
}

.p-t-20 {
    padding-top: 20px;
}

.p-t-30 {
    padding-top: 30px;
}

.p-t-50 {
    padding-top: 50px;
}

.p-t-100 {
    padding-top: 100px;
}

.p-b-10 {
    padding-bottom: 10px;
}

.p-b-15 {
    padding-bottom: 15px;
}

.p-b-20 {
    padding-bottom: 20px;
}

.p-b-30 {
    padding-bottom: 30px;
}
.p-b-50 {
    padding-bottom: 50px;
}
.p-b-100 {
    padding-bottom: 100px;
}

.p-y-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.p-y-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.p-y-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.p-x-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.p-x-3vw {
    padding-left: 3vw;
    padding-right: 3vw;
}

.p-x-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.p-y-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.m-auto{
    margin: auto;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-30 {
    margin-top: 50px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-t-100 {
    margin-top: 100px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-b-50 {
    margin-bottom: 50px !important;
}

.m-b-100 {
    margin-bottom: 100px !important;
}

.m-r-0{
    margin-right: 0;
}
.m-l-0{
    margin-left: 0;
}
.m-r-50 {
    margin-right: 50px !important;
}

.w-100 {
    width: 100%;
}
.h-50px {
    height: 50px;
}
.h-100 {
    height: 100%;
}
.maxW500px{
    max-width: min(100%, 500px);
}
.maxW600px{
    max-width: min(100%, 600px);
}
.maxW1000px{
    max-width: min(100%, 1000px);
}
.maxW1200px{
    max-width: min(100%, 1200px);
}
.maxW1400px{
    max-width: min(100%, 1400px);
}
.maxH500px{
    max-height: min(500px, 100vh);
}
.f-button{
    background: white!important;
    border-radius: 50%!important;
}
.btn {
    width: min(100%, 300px);
    max-width: 100%;
    background: transparent;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
    text-transform: uppercase;
    color: #454343;
    border: 1px solid #454343;
    transition: 120ms ease-in-out;
    font-family: inherit;
}
.btn:hover, .btn.black{
    background-color:  #454343;
    color: white;
    border:1px solid #454343;
}

.btn.black.active{
    background-color:  transparent;
    color: #454343;
}

.btn.grey{
    border-color: #D9D9D9;
    background:  #D9D9D9;
    color: #454343;
    text-transform: uppercase;
}

body.noScroll {
    overflow: hidden;
}

.maxContent {
    width: max-content;
}

.filter {
    display: none;
    position: fixed;
    content: "";
    height: 100vh;
    width: 100vw;
    background-color: rgba(44, 46, 53, 0.62);
    z-index: 11;
    top: 0;
}

.noScroll .filter {
    display: block;
}
.hero {
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position:relative;
    /*max-height: min(100vh, 900px);*/
}
/*.hero::before{*/
/*    position:absolute;*/
/*    content:"";*/
/*    height:100%;*/
/*    width:100%;*/
/*    top:0;*/
/*    left:0;*/
/*    background-color: black;*/
/*    opacity:0.3;*/
/*    z-index:0;*/
/*}*/
.hero .mainTitle{
    position: relative;
    padding: 20px;
    width: min(100%, 443px);
    min-width: min(485px, 100%);
    animation: appears 2s 1s forwards;
    opacity: 0;
    transform: translateZ(40px);
}
@keyframes appears {
    0%{
        opacity: 0;
        transform: translateZ(40px);
    }
    20%{
        opacity:0;
    }
    80%{
        transform: translateZ(0);
    }
    100%{
        opacity: 1;
        transform: translateZ(0);
    }
}
.hero .mainTitle::before {
    position: absolute;
    content:"";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.hero .mainTitle .subtitle{
    font-size: clamp(28px, 6vw, 43px);
    font-style: italic;
    margin-bottom: -7px;
    z-index: 1;
}

.hero .mainTitle .title{
    font-size: clamp(39px, 6.5vw, 65px);
    text-transform: uppercase;
    font-weight: lighter;
    text-align: center;
    z-index: 1;
}
.hero .mainTitle .text{
    font-size: clamp(16px, 2rem, 24px);
    text-align: center;
    z-index: 1;
    position: relative;
    max-width: min(100%,95vw);
}

.logo {

    color: #454343;
    position: relative;
}

.logo .subtitle {
    font-style: italic;
    position: relative;

}

.logo .title {
    text-transform: uppercase;
    margin-top: -10px;
    position: relative;
}

.text{
  color:#161616;
    font-size: 19px;
    line-height: 30px;
    text-align: justify;
}
h2{
    margin-bottom: 15px;
    color: #454343;
    font-size: clamp(24px, 2rem, 36px);
    font-weight: lighter;
    font-style: italic;
}
.flex-1{
    flex:1;
}
.flex-2{
    flex:2;
}
.flex-3{
    flex:3;
}

.bg-grey{
    background: #FAFAFA;
}
/*************** HEADER ***************/

.header {
    width: 100%;
    /*padding-top: 0px;*/
    padding-top: 20px;
    padding-bottom: 0;
    /*padding-bottom: 20px;*/
    position: fixed;
    transition: 400ms ease-in;
    top: 0;
    z-index: 10;
}
.header-home {
    background: rgba(255, 255, 255, 0.5);
}


.header .left {
    padding-left: 4vw;
}

.header.fixed {
    background: rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding-top: 0;
    padding-bottom: 0;
}

.header.fixed .left li {
    color: #454343;
}

.smartMenu {
    display: none;
    position: fixed;
    /*height: 100vh;*/
    height: calc(100vh - 127px);
    width: 100vw;
    background: #ffffff;
    padding: 10vh 30px 15px;
    z-index: 100;
    top: 128px;
    left: 0;
    transform: translateX(100vw);
    transition: transform 500ms ease-in-out;
    overflow: scroll;
}

.header .left li {
    text-transform: uppercase;
    /*color: white;*/
    font-size: 18px;
    padding: 0 20px;
}

.header.fixed.scroll-to-bottom {
    top: -320px !important;
}

.header .logo {
    text-align: center;
    padding-right: 35px;
    position: relative;
    display: block;
}

.header .logo::before {
    position: absolute;
    content: "";
    transform: translate(-81px, 76px);
    height: 400px;
    width: 400px;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-color: #D9D9D9;
    transition: all 300ms ease-in-out, opacity 250ms ease-in-out;

}

.header.fixed .logo::before {
    transform: translate(184px, 14px);
    opacity: 0;
}

.header .logo .title {
    font-size: clamp(23px, 3vw, 27px);
    z-index: 10;
}

.header .logo .subtitle {
    font-size: clamp(15px, 2em, 20px);
    font-style: italic;
    z-index: 10;
}

.smartMenu.active {
    transform: translateX(0);
}

nav {
    width: min(320px, 100%);
}

nav > li {
    margin-bottom: 15px;
}

nav > li > a {
    font-size: 20px;
    font-weight: 600;
}

nav > li > span > svg {
    margin-left: 20px;
    transition: 200ms ease-in-out;
    width: 20px;
    cursor: pointer;
    transform: rotate(180deg);
}

nav > li.active > span > svg {
    transform: rotate(0deg);
}

nav > li > .dropdown {
    padding-left: 30px;
    padding-top: 20px;
    height: 0;
    display: none;
}

nav > li.active > .dropdown {
    height: auto;
    display: block;
}

nav > li > .dropdown > li {
    padding-bottom: 23px;
}

nav > li > .dropdown > li > a {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}

/*nav > li > .dropdown > li > ul {*/
/*    padding-right: 60px;*/
/*    padding-top: 15px;*/
/*}*/

/*nav > li > .dropdown > li > ul > li {*/
/*    font-size: 17px;*/
/*    font-weight: 400;*/
/*    padding: 8px 15px;*/
/*}*/

/*************** HAMBURGER ***************/
.hamburger {
    width: 65px;
    height: 62px;
    justify-content: space-between;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 30px;
    z-index: 101;
    /*background: white;*/
    padding: 15px 11px;
    border-radius: 50%;
    transition:300ms ease-in-out ;
}

.hamburger span {
    width: 100%;
    height: 2px;
    background-color: #454343;
    transform-origin: left;
    transition: all 500ms ease;
    display: block;
}

.hamburger.active span:first-child {
    transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:last-child {
    transform: rotate(-45deg);
}

.banner .hamburger {
    position: absolute;
    z-index: 0;
}

.banner .hamburger span {
    background: #ffffff;
}

.banner .hamburger.active span:first-child {
    transform: rotate(0);
}

.banner .hamburger.active span:last-child {
    transform: rotate(0);
}

.banner .hamburger.active span:nth-child(2) {
    opacity: 1;
}

.smartMenu .close {
    top: 27px;
    position: absolute;
    right: 35px;
    height: 35px;
    width: 34px;
    cursor: pointer;
}

.smartMenu .close svg path {
    fill: #959d9c;
}

.smartMenu .close svg {
    height: 30px;
    width: 34px;
}

/*************** WELCOME ***************/
.welcome .hero .mainTitle .title{
    line-height: clamp(61px,12.5vw,77px);
}
.welcome .presentation .line h2,.welcome .presentation .line .text{
    max-width: min(600px, 100%);
}
.welcome .presentation .line div>img{
    max-width: min(600px, 100%);
}
.welcome .presentation h2{
    width: 100%;
    text-align: left;
}
.welcome #appartements .text{
    max-width: min(100%, 900px);
}
.welcome .planControls .btn{
    margin: 10px;
    width: min(100%, 240px);}
.welcome .plan{
    position: relative;
    height: calc(min(76vw, 1250px) * (1358/1920));
    /*height: calc(min(100vw, 1400px) * (1358/1920));*/
    /*height: calc(100vw * (1358/1920));*/
    width: 100%;

}
.welcome .plan .layer{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content:"";
    z-index: 0;
    transition: 120ms;
}
.welcome .plan .layer .wrapper{
    height: 100%;
    width: 100%;
    position: relative;
    margin: auto;
}
.welcome .plan .layer .wrapper  svg{
position: absolute;
    content: "";
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 120ms ease-in-out;
    width:auto!important;
}
.welcome .plan .layer .wrapper svg:hover,
.welcome .plan .layer .wrapper svg:hover{
    opacity: 0.9;

}

.welcome .plan .layer .wrapper #appartement-101{
    height: 58%;
    right: 12%;
    top: 22%;
    /*width: 53%;*/
}
.welcome .plan .layer .wrapper #appartement-201{
    height: 45.5%;
    right: 12.7%;
    top: 22%;
    /*width: 52%;*/
}
.welcome .plan .layer .wrapper #appartement-301{
    height: 45.5%;
    right: 12.9%;
    top: 22%;
    /*width: 53%;*/
}
.welcome .plan .layer .wrapper #appartement-102{
    height: 37%;
    right: 29.2%;
    top: 43%;
    /*width: 54%;*/
}
.welcome .plan .layer .wrapper #appartement-202
{
    height: 24.4%;
    right: 29.2%;
    top: 43%;
    /*width: 54%;*/
}
.welcome .plan .layer .wrapper #appartement-302{
    height: 24.4%;
    right: 29.2%;
    top: 42.8%;
    /*width: 54%;*/
}
.welcome .plan .layer .wrapper #appartement-103{
    height: 41%;
    right: 61.3%;
    top: 38.1%;
    /*width: 54%;*/
}
.welcome .plan .layer .wrapper #appartement-203
{
    height: 29%;
    right: 62.5%;
    top: 38%;
    /*width: 54%;*/
}
.plan .layer .wrapper #appartement-303 {
    height: 29%;
    right: 62.5%;
    top: 38%;
    /*width: 55%;*/
}
.welcome .plan .layer .wrapper #appartement-104,
.welcome .plan .layer .wrapper #appartement-304{
    height: 17%;
    right: 50%;
    top: 21.4%;
    /*width: 40.5%;*/
}

.welcome .plan .layer .wrapper #appartement-204{
    height: 16.4%;
    right: 50.4%;
    top: 21.4%;
    /*width: 40.5%;*/
}
.welcome .plan .layer .wrapper #appartement-304{
    height: 17%;
    right: 50.4%;
    top: 21.3%;
}
.welcome .plan .layer img[id^=product]{
    object-fit: contain;
}
.welcome .plan .layer.active{
    z-index: 1;
}
.welcome #appartements .line a{
    position: relative;
}
.welcome #appartements .line a::after{
    position: absolute;
    content:"";
    bottom: 7px;
    left: 0;
    width: 85%;
    height: 1px;
    background-color: #454343;
}
.welcome #appartements .cards{
    max-width: min(1400px, 100vw);
}
.welcome #appartements .card{
    width: 330px;
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    margin: 10px;
}
.welcome #appartements .card .top{
    height: 230px;
    max-height: 70vw;
    width: 100%;
}
.welcome #appartements .card .top img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.welcome #appartements .card .bottom{
    background: #454343;
    padding: 25px clamp(15px, 3vw, 40px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    color: white;
}
.welcome #appartements .card h4{
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: lighter;
    margin-top: 10px;
}
.welcome #appartements .card h3{
    font-size: 22px;
    font-weight:lighter;
    margin-bottom: 20px;
}
.welcome #appartements .card .btn{
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    width: min(100%,180px);
}
#appartements .owl-carousel .owl-dots.disabled{
    display:block;
}
#appartements  .owl-dot.active span{
    background: #454343!important;
}
#appartements .owl-carousel .owl-nav, #appartements .owl-carousel .owl-nav.disabled{

display: block;
/*    position: absolute;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    top: 50%;*/
/*    left:0vw;*/
/*    right:0vw;*/
/*    !*background: red;*!*/
/*    width: 85vw;*/
/*    margin: auto;*/
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    font-size: 34px !important;
/*    height: 30px;*/
/*    width: 30px;*/
/*    background-color: #fafafa !important;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    border-radius: 50%;*/
}
/*.owl-stage-outer{*/
/*    max-width: min(95vw, 1400px);*/
/*    margin: auto;*/
/*}*/
.owl-carousel.owl-drag .owl-item{
    display: flex;
    justify-content: center;
}
.situation iframe{
    width: 100vw;
    height: min(100vh , 500px)
}
/*************** END WELCOME ***************/

/*************** APPARTEMENT ***************/
.appartment .line img{
    height: min(41vh, 222px);
    object-fit: contain;
}
.appartment .features .item{
    margin:30px;
}
.appartment .projections .line img{
    height: min(86vh, 550px);
}
.appartment .full-view{
    height: 70vh;
    position: relative;
}
.appartment .full-view .logo{
    position: absolute;
    top: 5vh;
    left: 5vw;
    color:white;
}
.appartment .full-view .logo .title {
    font-size: clamp(23px, 8rem, 45px);
    margin-top: -19px;
}
.appartment .full-view .logo.subtitle {
    font-size: clamp(19px, 2.7em, 22px);
}
.appartment .full-view .box{
    padding: 20px;
}
.appartment .full-view .box::after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: white;
}
.appartment .communication .logo .title {
    font-size: clamp(43px, 5vw, 58px);
    margin-top: -10px;
}
.appartment .communication .logo .subtitle {
    font-size: clamp(28px, 3.5vw, 34px);
}
.appartment .communication .address{
    font-size: 23px;
}
.appartment .environnement{
    background-image: url("/storage/app/public/residence-dumas-nyons-environnement-digue.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 23%;
    height: min(100vh, 430px);
    position: relative;
    cursor: pointer;
    transition: 320ms ease-in-out;
    overflow: hidden;
}

.appartment .environnement .filter{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
       90deg,
       #ffffff0a,
        #ffffff0a calc(33% - 10px),
        #FFFFFF calc(33% - 10px),
        #FFFFFF calc(33% + 10px)
    );
    content:"";

    z-index: 0;
}
.appartment .environnement .filter::after{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    position: absolute;
    content:"";
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.37);
    transform:translateY(-100vh);
}
.appartment .environnement:hover .filter:hover::after{
    transform:translateY(0);
}
.appartment .environnement .text{
    color: white;
    font-size: 27px;
    z-index: 10;
}
.appartment .environnement .text div{
    text-transform: uppercase;
}
.appartment .mezzanine img{
    max-height: min(500px, 100vh);
}
/*************** END APPARTEMENT ***************/

/*************** ENVIRONNEMENT ***************/
.environnement .carousel {
    max-height: min(70vh, 800px);
    width: 100%;
}
.environnement #myCarousel2 .f-carousel__slide{
    position: relative;
}
.environnement #myCarousel2 .f-carousel__slide img{
 z-index: 4;
    position: relative;
}
.environnement #myCarousel2 .f-progress{
    background-color: #FFFFFF;
}
.environnement #myCarousel2 .f-carousel__slide .textContainer{
    background-color:#454343;
    min-height: 50px;
    padding: 10px;
    z-index: 5;
}
.environnement #myCarousel2, .environnement #myCarousel2 img {
    height: min(70vh, 800px);
}
.environnement #myCarousel2 .text{
    transition:all ease-in 500ms;
    opacity: 0.2;
    font-size: 20px;
    width: 100%;
    text-align: center;
    color: #fafafa;
transform: translateY(90px);
}
.environnement #myCarousel2 .f-carousel__slide.is-selected .text{
    opacity: 1;
    transform: translateY(0);
}
.environnement #myCarousel2 .f-carousel__slide .text.noTransition{
    transform: translateY(0);
    opacity: 1;
}
.environnement .carousel img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    max-height: min(70vh, 900px);
}
.environnement #myCarousel{
    max-height: 100%;
}
.environnement .pictures .grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 14px;
}
.environnement .pictures .grid img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-position: center;
}
.div1 {
    grid-row: span 2 / span 2;
}


.div3 {
    grid-row: span 2 / span 2;
}

.div4 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
}

.div5 {
    grid-row: span 2 / span 2;
    grid-row-start: 3;
}

.div6 {
    grid-column-start: 1;
    grid-row-start: 5;
}

.div7 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 4;
}

.div8 {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
}

.div9 {
    grid-column-start: 3;
    grid-row-start: 5;
}

.environnement .skyView img{
    object-fit: contain;
    max-height: 95vh;
}
/*************** END ENVIRONNEMENT ***************/

/*************** CONTACT ***************/
.contact .form .form-line{
    width: 100%;
    margin-bottom: 25px;
}
.contact .form .label{
    line-height: 15px;
    padding-bottom: 10px;
}
.contact .form input, .contact .form textarea{
    width: 100%;
    min-height:45px ;
    padding: 10px;
    border: none;
    background:#FAFAFA;
    font-family: 'Amiri', serif;
}
.contact .form input::placeholder,.contact .form textarea::placeholder{
    font-family: 'Amiri', serif;
    font-size: 17px;
    color: #656565;
}
.contact .form .btn{
    font-size: 19px;
}
.alert{
    position: absolute;
    content: "";
    /*height: 50px;*/
    width: 300px;
    background: #f4fcf5;
    color: #313131;
    border-left: 4px solid #2ec946;
    z-index: 10;
    padding: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    top: 20px;
    margin: auto;
    left: calc(50% - 114px);
    font-size: 17px;
    line-height: 23px;
    text-align: center;
    transform: translateY(-20vh);
    animation: appears-and-disappears 5s linear forwards;
}
@keyframes appears-and-disappears {
    0%    { opacity: 0;  }
    7%   { opacity: 1;transform: translateY(0vh); }
    95%   { opacity: 1; transform: translateY(-0vh);}
    100%  { opacity: 0;transform: translateY(-20vh) }
}
/*************** END CONTACT ***************/
/*************** notfound ***************/
.not-found .hero a{
    z-index:5;
}
.not-found .hero::before {
    opacity: 0.6;
}
    /*************** END not found ***************/
/* ************* leaflet ******************/
#map{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#map path[class^='polygon']{
    transition: 120ms ease-in-out;
}
#map path[class^='polygon']:hover{
    fill-opacity: 1!important;
}

/* *********** end leaflet ****************/
/*************** FOOTER ***************/
.footer {
    color: #161616;
}

.footer .top {
    gap: 10vw;
}

.footer .top .left {
    flex: 1;
}

.footer .logo {
    color: #656565;
}

.footer .logo {
    color: #656565;
    text-align: left;
}

.footer .logo .subtitle {
    font-size: clamp(19px, 2.7em, 22px);
}

.footer .logo .title {
    font-size: clamp(23px, 8rem, 45px);
    margin-top: -19px;
}

.footer .menu a {
    margin-top: 12px;
}

.footer .top .right {
    flex: 1;
}

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

.footer .map img {
    object-fit: contain;
    /*height: 100%;*/
    width: 100%;
    object-position: center;
    box-shadow: 6px 3px 7px 0 rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 6px 3px 7px 0 rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 6px 3px 7px 0 rgba(0, 0, 0, 0.06);
}

.footer .bottom {
    background: #D9D9D9;
}

.footer .credits {
    padding: 5px 10px;
    color: #000000;
    font-weight: 300;
    font-size: 16px;
}

.footer .credits a {
    padding: 0 2px;
    font-style: italic;
}
.footer .credits span{
    text-align: center;
}
.footer .address {
    font-size: 20px;
}

/*************** END FOOTER ***************/

/*************** MEDIA QUERIES ***************/
/*grid-breakpoints: (*/
/*xs: 0,*/
/*sm: 576px,*/
/*md: 768px,*/
/*lg: 992px,*/
/*xl: 1200px,*/
/*xxl: 1400px*/
/*);*/


@media (min-width: 1400px) {
    .justify-content-center-xxl {
        justify-content: center;
    }

    .d-none-xxl {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .justify-content-center-xl {
        justify-content: center;
    }

    .d-none-xl {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .justify-content-center-lg {
        justify-content: center;
    }

    .d-none-lg {
        display: none;
    }

    .home .hero {
        padding: 0 calc((100% - (5 * 160px) - 80px) / 2);
    }
}

@media (min-width: 768px) {
    .smartMenu {
        /*max-width: 410px;*/
        right: 0;
        left: auto;
        /*height: 100vh;*/
        /*top: 0;*/
        /*padding-top: 140px;*/
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .justify-content-center-md {
        justify-content: center;
    }

    .d-none-md {
        display: none;
    }

    .flex-column-md {
        flex-direction: column;
    }
    .flex-column-reverse-md{
        flex-direction: column-reverse;
    }
    .home .hero {
        padding: 0 calc((100% - (4 * 160px) - 60px) / 2);
    }

}

@media (min-width: 576px) and (max-width: 768px) {
    .justify-content-center-sm {
        justify-content: center;
    }

    .justify-content-space-between-sm {
        justify-content: space-between;
    }

    .d-none-sm {
        display: none;
    }

    .flex-column-sm {
        flex-direction: column;
    }
    .flex-column-reverse-sm{
        flex-direction: column-reverse;
    }
    .home .hero {
        padding: 0 calc((100% - (3 * 160px) - 40px) / 2);
    }

    .m-t-15-sm {
        margin-top: 15px !important;
    }

}

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

    .header .left li {
        font-size: 17px;
    }
}

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

}

@media screen and (max-width: 992px) {
    h2{
        text-align:center;
        line-height: 40px;
        font-size: 29px;
    }

    footer .title, .footer .subtitle, .footer .address {
        text-align: center;
    }
    .footer .right {
        display: flex;
        flex-direction: column-reverse;
        gap: 15px;
    }

    .footer .menu {
        max-width: max-content;
        margin: 0 auto 30px;
    }

    .footer .map{
        max-width: min(100%,700px);
        margin-right: auto;
        margin-left: auto;
    }
    .footer .top{
        padding-top: 50px;
    }
    .header {
        z-index: 100;
        /*background: rgba(255, 255, 255, 0.65);*/
        backdrop-filter:none;
        position: fixed;
        top: 0;
        left: 0;
    }
    .header.fixed .logo .title{
        font-size: 22px;
    }
    .header.fixed .hamburger{
        top:2px;
    }

    .header.fixed .left li {
        color: #454343;

    }

    .smartMenu .close {
        display: flex;
    }
    .smartMenu{
        display:block;
    }
    .nav {
        justify-content: flex-end;
    }

    .header .right {
        padding-right: 77px;
    }

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

    .header .logo::before, .header.fixed .logo::before {
        transform: translate(-76px, 49px);
        background: rgba(255, 255, 255, 0.65);
        opacity: 1;
    }

    .smartMenu .close {
        display: none;
    }

    .header.fixed {
        background-color: transparent;
        backdrop-filter:none;
    }

    .header.fixed.scroll-to-bottom {
        top: 0 !important;
    }

    .header .logo::after {
        position: absolute;
        content: "";
        transition: transform 500ms ease-in-out;
        background: rgb(255, 255, 255);
        border-radius: 0;
        width: 100vw;
        height: 150px;
        transform: translateX(100vw);
        top: -21px;
        right: 0;
        margin-right: -77px;
    }

    .noScroll .header .logo::after {
        transform: translateX(0);
    }
    .appartment .projections .line img{
        height: unset;
        max-height: min(100vh, 500px);
    }

    .appartment .environnement .filter{
        background: none;
    }
}

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

}

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

    .page h1, .page h2, .page h3, .page h4 {
        text-align: center;
        width: 100%;
    }

    .welcome #appartements .card {
        /*width: min(80vw, 300px);*/
    }

    .environnement .pictures .grid{
        display: flex;
        flex-direction: column;
    }
    /*.hero .mainTitle{*/
    /*    margin-bottom: -105px;*/
    /*}*/
}

@media screen and (max-width: 576px) {
    .p-x-15-xs {
        padding-right: 15px;
        padding-left: 15px;
    }

    .m-t-15-xs {
        margin-top: 15px !important;
    }

    .justify-content-center-sm {
        justify-content: center;
    }

    .d-none-xs {
        display: none;
    }

    .flex-column-xs {
        flex-direction: column;
    }

    .flex-column-reverse-xs{
        flex-direction: column-reverse;
    }

    nav > li > a {
        font-size: 19px;
    }

    nav > li > span > svg {
        margin-left: 10px;
    }

    .hamburger {
        width: 62px;
        height: 60px;
        top: 16px;
        right: 10px;
    }

    .smartMenu {
        padding-left: 19px;
        padding-right: 19px;
    }

    .header .right {
        padding-right: 40px;
    }

    .header .logo::before {
        transform: translate(-78px, 49px);
        background: rgba(255, 255, 255, 0.65);
    }

   .header .logo::after {
        margin-right: -40px;
    }
}


@media screen and (max-width: 450px) {
.appartment .features .container{
    flex-direction: column;
}
}