@import url('https://fonts.googleapis.com/css?family=Nunito%20Sans:300,400,700,900'); /* Nunito Sans */
@import url('https://fonts.googleapis.com/css?family=Roboto%20Condensed:300,400,700'); /* Roboto Condensed */

/* GLOBAL */

body {
    overflow-x: hidden;
}

.hover-opacity {
    opacity: 1;

    -o-transition:opacity 0.3s ease-in;
    -ms-transition:opacity 0.3s ease-in;
    -moz-transition:opacity 0.3s ease-in;
    -webkit-transition:opacity 0.3s ease-in;
    transition:opacity 0.3s ease-in;
}

.hover-opacity:hover {
    opacity: 0.5;
}

.btn-dark-small {
    background-color: #ffffff;
    border: 1px solid;
    color: #000000;
    font-weight: bold;
    padding: 0 5%;
}

.btn-dark-small:hover {
    background-color: #000000;
    color: #ffffff;
}

.btn-medium {
    background: #ffff!important;
    width: 16rem;
    height: 4rem;
    border: 1px solid!important;
    font-family: monospace;
    color: #000000!important;
    text-transform: initial!important;

    -o-transition:color 0.1s ease-out, background 0.1s ease-in;
    -ms-transition:color 0.1s ease-out, background 0.1s ease-in;
    -moz-transition:color 0.1s ease-out, background 0.1s ease-in;
    -webkit-transition:color 0.1s ease-out, background 0.1s ease-in;
    /* ...and now for the proper property */
    transition:color 0.1s ease-out, background 0.1s ease-in;
}

.btn-medium:hover {
    color: #ffff!important;
    background-color: #646773!important;
}

#checkmark_sell {
    display: block;
    position: absolute;
    margin: 1%;
}
#checkmark_louer {
    display: none;
    position: absolute;
    margin: 1%;
}
@media screen and (max-width: 450px) {
    #checkmark_sell {
        margin: 4%;
    }
    #checkmark_louer {
        margin: 4%;
    }
}

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width: 3px;
    height: 15px;
    background-color: #000;
    left: 13px;
    top: 0;
    border-radius: 3px 3px 3px 0;
}

.checkmark_kick {
    position: absolute;
    width: 8px;
    height: 3px;
    background-color: #000;
    left: 7px;
    top: 12px;
    border-radius: 3px;
}

.div-checkmark {
    width: 35px;
    height: 35px;
    box-shadow: 0 1px 5px #d5d5d5;
    margin: 0 16px 0 0;
}
@media screen and (max-width: 450px) {
    .div-checkmark {
        margin: 0 8px 0 0;
    }
}

@media screen and (min-width: 700px) {
    .pad-mar-0 {
        margin: 0 auto 0 0;
        padding: 0;
    }
}


/* Listing */
.title-banner-listing {
    color: #fff;
    font-size: 41px;
    margin: auto;
    font-weight: bold;
    font-family: 'Nunito Sans';
    letter-spacing: 2px;
}
@media screen and (max-width: 450px) {
    .title-banner-listing {
        font-size: 24px;
    }
}

/* Portal */

.btn-choose {
    height: 50px;
    width: 400px;
    color: #000000;
    background-color: #ffffff;
    text-align: initial;
    border: 1px solid #ffffff;
    border-radius: 0;
}

@media screen and (max-width: 1000px) {
    .btn-choose {
        height: 90px;
        width: 417px;
        font-size: 25px;
    }
}

.img-dropdown {
    width: 33px;
    margin: 0 4% 1% 0;
}
@media screen and (max-width: 1000px) {
    .img-dropdown {
        width: 50px;
    }
}

.btn-dropdown {
    height: 50px;
}
@media screen and (max-width: 1000px) {
    .btn-dropdown {
        height: 90px;
        font-size: 25px;
    }
}

.btn-portal {
    background-color: #627098;
    color: #ffffff;
    border: 0;
    height: 50px;
    width: 150px;
}
@media screen and (max-width: 1000px) {
    .btn-portal {
        height: 70px;
        width: 225px;
        font-size: 25px;
    }
}

.btn-portal:hover {
    background: rgba(255, 255, 255, 0.65);
    color: #627098;
    border: 1px solid;
}

.background-portal {
    background-image: url(../images/template/background_portal.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: absolute;
    background-position: 0 -21.5vw;
    z-index: 999;
}

#lang_portal {
    font-size: 20px;
}

/* Page Texte */
.size-row-etapes {
    height: 60px;
    border-bottom: 4px dashed;
}

.img-mains-etapes {
    position: absolute;
    bottom: 10px;
}

.pos-arrow-etapes {
    position: absolute;
    right: 0;
    left: 279px;
    bottom: 51px;
}

.p-number-etapes {
    font-size: 2rem;
    color: #008cff;
    font-weight: bold;
}

.p-etapes {
    font-size: 14px;
}

.p-etapes-long {
    font-size: 13px;
}

@media screen and (max-width: 450px) {
    .col-etapes {
        padding: 0;
    }
    .p-etapes {
        font-size: 9px;
    }
    .p-etapes-long {
        font-size: 8px;
    }
    .p-number-etapes {
        font-size: 1.2rem;
        margin: 0;
    }
    .pos-arrow-etapes {
        position: absolute;
        right: 0;
        left: 87px;
        bottom: 42px;
        width: 20%;
    }
    .img-mains-etapes {
        width: 70%;
    }
    .size-row-etapes {
        height: 32px;
    }
    .h1-etapes {
        font-size: 1.5rem;
    }
    .key-etapes {
        width: 25px;
    }
}

.parrainage-exemple {
    margin: 8rem 12rem;
    letter-spacing: 0.5px;
    line-height: 3rem;
}
@media screen and (max-width: 450px) {
    .parrainage-exemple {
        margin: 4rem 2rem;
        line-height: 2rem;
    }
    .parrainage-exemple p {
        font-size: 19px!important;
    }
}

.parrainage-p {
    font-size: 32px;
    margin: 0;
    font-weight: 600;
}
@media screen and (max-width: 450px) {
    .parrainage-p {
        font-size: 21px;
    }
}

.parrainage-bloc-shape {
    display: flex;
    align-items: center;
    margin: 1% 10% 7% 10%;
    flex-direction: row;
    flex-wrap: wrap;
}

@media screen and (max-width: 450px) {
    .parrainage-bloc-shape:nth-child(even) {
        flex-direction: column-reverse;
    }
}

.parrainage-shape {
    background-image: url("/images/template/shape01.jpg");
    background-repeat: no-repeat;
    height: 9.5rem;
    width: 9.5rem;
    font-size: 80px;
    color: #323644;
    padding: 1% 4%;
    text-align: center;
    font-weight: bold;
}
@media screen and (max-width: 450px) {
    .parrainage-shape {
        height: 16rem;
        width: 100%;
        font-size: 9rem;
        padding: 5% 4%;
        text-align: center;
        background-size: 16rem;
        background-position: center;
    }
}

.bloc-pv-banner {
    padding: 3rem 8rem;
    background: hsla(50, 100%, 100%, 0.7);
    line-height: 45px;
    margin: auto;
    text-align: center;
}

.p-pv-banner {
    color: #000;
    font-size: 41px;
    margin: auto;
    font-weight: bold;
}
@media screen and (max-width: 450px) {
    .bloc-pv-banner {
        padding: 2rem 3rem;
    }
    .p-pv-banner {
        font-size: 27px;
    }
}

.fs-32 {
    font-size: 32px;
}
@media screen and (max-width: 450px) {
    .fs-32 {
        font-size: 23px;
    }
}

.fs-28 {
    font-size: 28px;
}
@media screen and (max-width: 450px) {
    .fs-28 {
        font-size: 16px;
    }
}

.fs-27 {
    font-size: 27px;
}
@media screen and (max-width: 450px) {
    .fs-27 {
        font-size: 15px;
    }
}

.fs-26 {
    font-size: 26px;
}
@media screen and (max-width: 450px) {
    .fs-26 {
        font-size: 17px;
    }
}

.fs-25 {
    font-size: 25px;
}
@media screen and (max-width: 450px) {
    .fs-25 {
        font-size: 15px;
    }
}

.fs-16 {
    font-size: 16px;
}
@media screen and (max-width: 450px) {
    .fs-16 {
        font-size: 10px;
    }
    .w-312-m {
        width: 312px!important;
    }
}

@media screen and (max-width: 450px) {
    .row-column-mobile {
        flex-direction: column;
    }

    .col-max-mobile {
        max-width: 100%;
        width: 96vw!important;
    }
}

.ges-shape {
    height: 198px;
    margin: 8px 8px;
    padding: 1%;
    background-image: url("/images/template/form_octogone.png");
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (max-width: 450px) {
    .ges-shape {
        background-size: contain;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

.ges-arrow {
    height: 198px;
    margin: 8px 8px;
    padding: 1%;
    background-image: url("/images/template/arrow.png");
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (max-width: 450px) {
    .ges-arrow {
        background-size: contain;
    }
}

.ges-bloc-type {
    font-weight: bold;
    font-size: 24px;
    padding: 14%;
}

.ges-bloc-pourcent {
    font-weight: bold;
    font-size: 24px;
    padding: 21%;
}

.ges-p {
    font-size: 20px;
    padding: 0 5%;
}

@media screen and (max-width: 450px) {
    .ges-bloc-type {
        padding: 46% 0;
        font-size: 19px;
    }
    .ges-bloc-pourcent {
        padding: 64% 0;
    }
    .ges-p {
        font-size: 17px;
        padding: 0!important;
    }
}

.ges-text {
    font-size: 26px;
    text-align: justify;
}

@media screen and (max-width: 450px) {
    .ges-text {
        font-size: 17px;
        margin: 11% 5%;
    }
}

.apropos-text {
    font-size: 21px;
    text-align: justify;
}
@media screen and (max-width: 450px) {
    .apropos-text {
        font-size: 17px;
    }
}

.apropos-img {
    background-repeat: no-repeat;
    height: 299px;
    background-size: contain;
}
@media screen and (max-width: 450px) {
    .apropos-img {
        flex: 0 0 100%;
        max-width: 100%;
        background-size: cover;
        margin: 2% 0;
    }
}

.apropos-p {
    font-size: 2vw;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
}

.apropos-p-l {
    font-size: 1.3vw;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
}

@media screen and (max-width: 450px) {
    .apropos-p {
        font-size: 7vw;
    }
    .apropos-p-l {
        font-size: 6.3vw;
    }
}

.ourteam-bloc-banner {
    padding: 3rem 8rem;
    background: hsla(50, 100%, 100%, 0.7);
    line-height: 45px;
    margin: auto;
    text-align: center;
    width: max-content;
}
@media screen and (max-width: 450px) {
    .ourteam-bloc-banner {
        padding: 3rem 2rem;
    }
}

.ourteam-p-banner {
    color: #000;
    font-size: 41px;
    margin: auto;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
}
@media screen and (max-width: 450px) {
    .ourteam-p-banner {
        font-size: 34px;
    }
}

.ourteam-bloc-img {
    height: 430px;
    background-color: #FFF6E6;
    padding: 2% 0;
}
@media screen and (max-width: 450px) {
    .ourteam-bloc-img {
        margin: 4%;
        height: auto;
    }
}

.contact-bloc-banner {
    padding: 3rem 8rem;
    background: hsl(0deg 0% 0% / 33%);
    line-height: 45px;
    margin: auto;
    text-align: center;
}
@media screen and (max-width: 450px) {
    .contact-bloc-banner {
        padding: 3rem 2rem;
    }
}

.contact-p-banner {
    color: #fff;
    font-size: 41px;
    margin: auto;
    font-weight: bold;
    text-transform: uppercase;
}
@media screen and (max-width: 450px) {
    .contact-p-banner {
        font-size: 34px;
    }
}

.contact-social-bloc {
    width: 33%;
    padding: 0 4%;
    align-items: center;
}
@media screen and (max-width: 450px) {
    .contact-social-bloc {
        align-items: start;
    }
}

.contact-container-f-m {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
@media screen and (max-width: 450px) {
    .contact-container-f-m {
        flex-direction: column;
    }
}

.contact-bloc-f {
    width: 50%;
}
@media screen and (max-width: 450px) {
    .contact-bloc-f {
        width: 100%;
    }
}

.contact-bloc-m {
    width: 40%;
    margin: 0;
}
@media screen and (max-width: 450px) {
    .contact-bloc-m {
        width: 100%;
    }
}

.contact-btn {
    border: 0;
    border-bottom: 1px solid #000000!important;
}

/* Banner */
.parrainage-bloc-title {
    padding: 2rem 42rem;
}
@media screen and (max-width: 450px) {
    .parrainage-bloc-title {
        padding: 0;
    }
}

.parrainage-title {
    width: 27rem;
    color: white;
    font-size: 44px;
    font-weight: 600;
}
@media screen and (max-width: 450px) {
    .parrainage-title {
        width: 100%;
        font-size: 34px;
        text-align: center;
        padding: 3%;
    }
}

.parrainage-bloc-desc {
    margin: 1.5rem 36rem;
    padding: 2rem;
    width: 44.5rem;
    background: hsla(50, 100%, 100%, 0.7);
    line-height: 45px;
}
@media screen and (max-width: 450px) {
    .parrainage-bloc-desc {
        padding: 7% 9%;
        width: 80%;
        line-height: 36px;
        margin: auto;
    }
}

.parrainage-desc {
    color: #333644;
    font-size: 25px;
    margin: auto;
}
@media screen and (max-width: 450px) {
    .parrainage-desc {
        font-size: 15px;
    }
}

.banner-img {
    width: 100%;
    max-height: 550px;
    object-fit: cover;
    object-position: 50% -8vw;
}

.banner-buy {
    background: transparent url(../images/template/banner_buy.png) no-repeat fixed center center/cover;
    width: 100%;
    max-height: 657px;
    height: 657px;
    border-bottom: 9px solid;
    border-color: rgb(255 255 255 / 38%);
}

.banner-rent {
    background: transparent url(../images/template/banner_rent.png) no-repeat fixed center center/cover;
    width: 100%;
    max-height: 657px;
    height: 657px;
    border-bottom: 9px solid;
    border-color: rgb(255 255 255 / 38%);
}

.banner-contact {
    background: url(../images/template/banner_contact.png) no-repeat fixed center center/cover;
    width: 100%;
    max-height: 550px;
    height: 526px;
    margin: 0 0 2%;
}

.banner-parrainage {
    background: url(../images/template/banner_parrainage.png) no-repeat fixed center center/cover;
    width: 100%;
    max-height: 550px;
    height: 526px;
    margin: 0 0 2%;
}

.banner-estimation {
    background: url(../images/template/banner_estimation.png) no-repeat fixed center center/cover;
    width: 100%;
    max-height: 550px;
    height: 526px;
    margin: 0 0 2%;
}

.banner-evaluation {
    background: url(../images/template/banner_evaluation.png) no-repeat fixed center center/cover;
    width: 100%;
    /*max-height: 550px;*/
    /*height: 526px;
    /*margin: 0 0 2%;*/
}

.banner-apropos {
    background: url(../images/template/banner_apropos.png) no-repeat fixed center center/cover;
    width: 100%;
    max-height: 550px;
    height: 526px;
    margin: 0 0 2%;
}

.banner-prix-de-vente {
    background: url(../images/template/banner_prix_de_vente.png) no-repeat fixed center center/cover;
    width: 100%;
    max-height: 550px;
    height: 526px;
    margin: 0 0 2%;
}

.banner-ourteam {
    background-image: url(../images/template/banner_ourteam.png);
    width: 100%;
    max-height: 1308px;
    height: 1308px;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 0 2%;
}
@media screen and (max-width: 450px) {
    .banner-ourteam {
        height: auto;
    }
    .banner-estimation {
        display: none;
    }
    .banner-apropos {
        display: none;
    }
    .banner-contact {
        display: none;
    }
    .banner-parrainage {
        display: none;
    }
    .banner-prix-de-vente {
        display: none;
    }
    .banner-buy {
        display: none;
    }
    .banner-rent {
        display: none;
    }
    .banner-mobile {
        display: block!important;
    }
}

/* SIDEBAR */

.sidebar {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #DED8D3; /* Beige */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

.sidebar a:first-child {
    border: 0;
    color: #ffffff;
    padding: 8px 8px 8px 32px;
}
@media screen and (max-width: 450px) {
    .sidebar a:first-child {
        border: 0;
        color: #ffffff;
        padding: 8px 8px 8px 0;
    }
}

.sidebar a:first-child:hover {
    background-color: rgb(0 0 0 / 0%);
}

.sidebar a:nth-child(even) {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #000000;
}

.sidebar a {
    width: 100%;
    text-align: center;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    /*
    font-size: calc(10px + 1vw);
     */
    font-size: 1.5rem;
    color: #000000;
    transition: 0.3s;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar p {
    width: 100%;
    text-align: center;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    /*
    font-size: calc(10px + 1vw);
     */
    font-size: 1.5rem;
    color: #000000;
    transition: 0.3s;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.sidebar a:hover {
    background-color: #f1f1f1;
}

.sidebar .closebtn {
    position: absolute;
    top: -23px;
    right: -176px;
    font-size: 60px;
    margin-left: 50px;
}

.menu_active_color_nav {
    background-color: #f1f1f1;
}

.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

#main {
    transition: margin-left .5s;
    padding: 20px;
}

@media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
}

/* HEADER */

.bloc-logo {
    width: 33%;
    text-align: center;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 450px) {
    .bloc-logo {
        height: auto;
    }
}

/* ICON NAVBAR */
.icon_navBar {
    background-image: url(../images/template/icone_nav.png)!important;
    background-repeat: no-repeat;
    width: 4.3rem;
}
@media screen and (max-width: 450px) {
    .icon_navBar {
        width: 2rem;
        font-size: 1.1rem;
    }
}

.btn-lang {
    width: 100px;
    height: 47px;
    border-radius: initial;
    justify-content: space-between;
    background: rgb(0 0 0 / 0%);
    border: 1px solid #959595;
}
@media screen and (max-width: 450px) {
    .btn-lang {
        width: 59px;
        height: 32px;
    }
}

.pos-btn-lang {
    padding: 3% 23% 0 0;
}
@media screen and (max-width: 450px) {
    .pos-btn-lang {
        padding: 0;
    }
}

.container-drop-lang {
    position: absolute;
    will-change: transform;
    width: 100px;
    border: 1px solid rgb(149, 149, 149);
    border-radius: initial;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    transform: translate3d(0px, 47px, 0px);
    background: rgb(255 255 255 / 59%);
}
@media screen and (max-width: 450px) {
    .container-drop-lang {
        width: 59px;
    }
}

.drop-lang {
    padding: 0.675rem .75rem;
    height: 46px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #959595;
}
@media screen and (max-width: 450px) {
    .drop-lang {
        padding: 0.175rem .75rem;
        height: 32px;
    }
}

.bloc-recommend {
    background: rgb(191 223 255 / 60%);
    padding: 2% 3%;
    text-align: center;
    width: max-content;
}
.bloc-recommend-mobile {
    background: rgb(191 223 255 / 60%);
    padding: 2% 3%;
    text-align: center;
    width: max-content;
}

.bloc-navbar-mobile {
    margin: 0 0 2%;
}

@media screen and (max-width: 450px) {
    .bloc-recommend-mobile {
        display: block!important;
    }
    .bloc-dropdown-mobile {
        display: block!important;
    }
    .bloc-navbar-mobile {
        display: block!important;
    }
    .bloc-recommend {
        display: none!important;
    }
    .bloc-dropdown {
        display: none!important;
    }
    .bloc-navbar {
        display: none!important;
    }
}
@media screen and (min-width: 451px) {
    .bloc-recommend {
        display: block!important;
    }
    .bloc-dropdown {
        display: block!important;
    }
    .bloc-navbar {
        display: block!important;
    }
    .bloc-recommend-mobile {
        display: none!important;
    }
    .bloc-dropdown-mobile {
        display: none!important;
    }
    .bloc-navbar-mobile {
        display: none!important;
    }
}

.p-recommend-mobile {
    margin: 0;
    font-size: 12px;
    color: #475b93;
    font-weight: 600;
}
/* FIN ICON NAVBAR */

/* VIDEO */

#vidHome {
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
}
@media screen and (max-width: 450px) {
    #vidHome {
        height: 700px;
        object-fit: cover;
    }
}

/* FIN VIDEO */

/* BUTTON ACHETER / LOUER */
.h-bloc-br {
    position: absolute;
    background: rgb(0 0 0 / 19%);
    padding: 2%;
    text-align: center;
    width: 16vw;
    height: 10.1vw;
    border-radius: 25rem;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-bloc-br:hover {
    background: rgb(243 242 242 / 19%);
    cursor: pointer;
}

.h-bloc-br-fr {
    position: absolute;
    background: rgb(0 0 0 / 19%);
    padding: 2%;
    text-align: center;
    width: 21vw;
    height: 10.1vw;
    border-radius: 25rem;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-bloc-br-fr:hover {
    background: rgb(243 242 242 / 19%);
    cursor: pointer;
}

.h-bloc-br-lu {
    position: absolute;
    background: rgb(0 0 0 / 19%);
    padding: 2%;
    text-align: center;
    width: 19vw;
    height: 10.1vw;
    border-radius: 25rem;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-bloc-br-lu:hover {
    background: rgb(243 242 242 / 19%);
    cursor: pointer;
}

.h-bloc-evo {
    position: absolute;
    background: rgb(0 0 0 / 19%);
    padding: 2%;
    text-align: center;
    width: max-content;
    height: 15.1vw;
    border-radius: 25rem;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 450px) {
    .h-bloc-evo {
        width: 75vw;
        height: 23vw;
    }
}

.h-bloc-evo:hover {
    background: rgb(243 242 242 / 19%);
    cursor: pointer;
}

.h-pos-buy {
    /*top: 28%;
    left: 19%;*/
    top: 48%;
    left: 54%;
    animation-name: defilDroite;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 450px) {
    .h-pos-buy {
        top: 35%;
        left: 0;
        right: 0;
        margin: auto;
        width: 10rem;
        height: 5rem;
    }
}

.h-pos-buy-fr {
    /*top: 28%;
    left: 19%;*/
    top: 49%;
    left: 52%;
    animation-name: defilDroite;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 450px) {
    .h-pos-buy-fr {
        top: 35%;
        left: 0;
        right: 0;
        margin: auto;
        width: 15rem;
        height: 5rem;
    }
}

.h-pos-buy-lu {
    /*top: 28%;
    left: 19%;*/
    top: 49%;
    left: 52%;
    animation-name: defilDroite;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 450px) {
    .h-pos-buy-lu {
        top: 35%;
        left: 0;
        right: 0;
        margin: auto;
        width: 14rem;
        height: 5rem;
    }
}

@media screen and (min-width: 450px) {
    @keyframes defilDroite {
        from {
            /*left: 12%;*/
            left: 50%;
        }
        to {
            /*left: 19%;*/
            left: 54%;
        }
    }
    @keyframes defilDroiteFr {
        from {
            /*left: 12%;*/
            left: 50%;
        }
        to {
            /*left: 19%;*/
            left: 52%;
        }
    }
}

.h-pos-rent {
    /*top: 48%;
    left: 51%;*/
    top: 48%;
    left: 29%;
    animation-name: defilGauche;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 450px) {
    .h-pos-rent {
        top: 44%;
        left: 0;
        right: 0;
        margin: auto;
        width: 10rem;
        height: 5rem;
    }
}

.h-pos-rent-fr {
    /*top: 48%;
    left: 51%;*/
    top: 49%;
    left: 26%;
    animation-name: defilGaucheFr;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 450px) {
    .h-pos-rent-fr {
        top: 44%;
        left: 0;
        right: 0;
        margin: auto;
        width: 15rem;
        height: 5rem;
    }
}

.h-pos-rent-lu {
    /*top: 48%;
    left: 51%;*/
    top: 49%;
    left: 26%;
    animation-name: defilGaucheLu;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 450px) {
    .h-pos-rent-lu {
        top: 44%;
        left: 0;
        right: 0;
        margin: auto;
        width: 14rem;
        height: 5rem;
    }
}

@media screen and (min-width: 450px) {
    @keyframes defilGauche {
        from {
            /*left: 57%;*/
            left: 35%;
        }
        to {
            /*left: 51%;*/
            left: 29%;
        }
    }
    @keyframes defilGaucheFr {
        from {
            /*left: 57%;*/
            left: 31%;
        }
        to {
            /*left: 51%;*/
            left: 26%;
        }
    }
    @keyframes defilGaucheLu {
        from {
            /*left: 57%;*/
            left: 31%;
        }
        to {
            /*left: 51%;*/
            left: 26%;
        }
    }
}

.h-pos-evaluation {
    /*top: 28%;
    left: 19%;*/
    top: 24%;
    right: 0;
    left: 0;
    margin: auto;
    animation-name: fadeInOpacity;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 450px) {
    .h-pos-evaluation {
        top: 25%;
    }
}

@-webkit-keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.h-p-br {
    font-size: 3vw;
    color: #fff;
    font-weight: 700;
    letter-spacing: 12px;
    font-family: Arial, sans-serif;
}
@media screen and (max-width: 450px) {
    .h-p-br {
        font-size: 1.5rem;
        margin: 0;
    }
}

.navbar-icon-menu {
    color: rgb(0, 0, 0)!important;
    font-size: 39px;
    border-color: rgba(0, 0, 0, 0)!important;
}

/* FOOTER */

.text-footer {
    font-size: 15px;
}
@media screen and (max-width: 450px) {
    .text-footer {
        font-size: 14px;
    }
}

@media screen and (max-width: 450px) {
    .p-infos-mobile {
        font-size: 12px;
    }
}

.container-socials {
    font-size: 35px;
    padding:0 4%;
}
@media screen and (max-width: 450px) {
    .container-socials {
        font-size: 25px;
    }
}

/* ESTIMATION */

.span-souhait {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 3px;
}
@media screen and (max-width: 450px) {
    .span-souhait {
        font-size: 18px;
    }
}

.input-estimation {
    border: 2px solid #000000!important;
    height: 50px;
}

.input-estimation:hover {
    background-color: #F2F2F2;
}

.input-estimation:focus {
    box-shadow: none;
}

.input-estimation-number {
    border: 2px solid #000000!important;
    height: 50px;
}

.input-estimation-number:hover {
    background-color: #F2F2F2;
    border-top: 0!important;
    border-right: 0!important;
    border-left: 0!important;
}

.input-estimation-number:focus {
    background-color: #F2F2F2;
    border-top: 0!important;
    border-right: 0!important;
    border-left: 0!important;
    box-shadow: none;
}

/* Show red borders when filled, but invalid */
.input-required:not(:placeholder-shown) {
    border-top: 0!important;
    border-right: 0!important;
    border-left: 0!important;
    border-color: #FF4040!important;
    background-color: #FFECEC;
}

/* Show green borders when valid */
.input-required:valid {
    border-color: #000000!important;
    background-color: #F5F5F5;
}

.input-estimation-shadow {
    border: 2px solid #000000!important;
    box-shadow: -4px 6px 2px 4px #a9bcd7;
    height: 50px;
    background-color: #F5F5F5;
}

.input-estimation-shadow:hover {
    border-top: 0!important;
    border-right: 0!important;
    border-left: 0!important;
    border-bottom: 2px solid #000000!important;
    box-shadow: -4px 6px 2px 4px #a9bcd7;
    background-color: #F5F5F5;
}

.input-estimation-shadow:focus {
    border-top: 0!important;
    border-right: 0!important;
    border-left: 0!important;
    box-shadow: -4px 6px 2px 4px #a9bcd7;
    background-color: #F5F5F5;
}

.select-estimation {
    height: 100%;
    width: 100%;
    text-align: initial;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
}

.select-estimation:hover {
    background-color: #F2FAF9;
}

.drop-estimation {
    font-size: 17px;
}

.drop-estimation:hover {
    background-color: #1E90FF;
    color: #ffffff;
}

.btn-estimation {
    background-color: #323232!important;
    width: 500px;
    font-size: 27px;
    font-weight: bold;
    text-transform: initial!important;
    box-shadow: 2px 2px 10px 2px black;

    -o-transition:color 0.3s ease-out, background 0.3s ease-in;
    -ms-transition:color 0.3s ease-out, background 0.3s ease-in;
    -moz-transition:color 0.3s ease-out, background 0.3s ease-in;
    -webkit-transition:color 0.3s ease-out, background 0.3s ease-in;
    /* ...and now for the proper property */
    transition:color 0.3s ease-out, background 0.3s ease-in;
}

.btn-estimation:hover {
    background-color: #ffffff!important;
    color: #000000!important;
}

.btn-estimation-back {
    width: 250px;
    background-color: #ffffff!important;
    color: #000000!important;
    text-transform: initial!important;

    -o-transition:color 0.3s ease-out, background 0.3s ease-in;
    -ms-transition:color 0.3s ease-out, background 0.3s ease-in;
    -moz-transition:color 0.3s ease-out, background 0.3s ease-in;
    -webkit-transition:color 0.3s ease-out, background 0.3s ease-in;
    /* ...and now for the proper property */
    transition:color 0.3s ease-out, background 0.3s ease-in;
}

.btn-estimation-back:hover {
    background-color: #000000!important;
    color: #ffffff!important;
}

@media screen and (max-width: 450px) {
    .btn-estimation {
        width: 250px;
        margin: 0 !important;
    }
}

.bloc-es-banner {
    padding: 3rem 8rem;
    background: hsla(50, 100%, 100%, 0.7);
    line-height: 45px;
}
@media screen and (max-width: 450px) {
    .bloc-es-banner {
        padding: 2rem 3rem;
    }
}

.bloc-ev-banner {
    padding: 3rem 8rem;
    background: #9d89849c;
    line-height: 45px;
}
@media screen and (max-width: 450px) {
    .bloc-ev-banner {
        padding: 2rem 3rem;
    }
}

.p-es-banner {
    color: #000;
    font-size: 41px;
}
@media screen and (max-width: 450px) {
    .p-es-banner {
        font-size: 27px;
    }
}

.p-ev-banner {
    font-size: 41px;
}
@media screen and (max-width: 450px) {
    .p-ev-banner {
        font-size: 27px;
    }
}

.engagements {
    margin: 0 0 8%;
}

.bloc-title-engagements {
    margin: 5% 0 0;
}

.bloc-title-engagements p {
    font-size: 37px;
    text-decoration: underline;
    text-align: center;
    font-weight: 600;
}

.container-engagement {
    justify-content: space-evenly;
    margin: 0 0 5%;
}
.container-engagement > div {
    width: 35rem;
}
@media screen and (max-width: 450px) {
    .container-engagement {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .container-engagement > div {
        width: auto;
    }
}

.p-engagement {
    width: 58%;
    font-size: 20px;
    font-weight: 600;
    margin: auto;
    padding: 4% 2%;
    height: 50%;
}

.span-engagement {
    font-size: 63px;
    text-align: center;
    height: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partners {
    background-color: #FAFAFA;
    padding: 1% 0 2%;
}

.bloc-title-partners {
    padding: 1%;
}

.bloc-title-partners p {
    font-size: 42px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
}

@media screen and (max-width: 450px) {
    .partners-mobile {
        padding: 4% 15%;
        flex-wrap: wrap;
        flex-direction: row;
        width: auto!important;
    }
}


/* FIN ESTIMATION */


/* DETAIL */
.modal-form {
    width: 770px;
    height: 639px;
    background: #FFF5F0;
}

.modal-bloc-input {
    padding: 3% 5%;
}
@media screen and (max-width: 450px) {
    .modal-bloc-input {
        padding: 0;
    }
}

.modal-button {
    width: 200px;
    height: 56px;
    background: #8C84FA!important;
    border: 0;
    color: #ffff;
}
@media screen and (max-width: 450px) {
    .modal-button {
        width: 163px;
        height: 40px;
        margin: 1%;
    }
}

.modal-input-date {
    width: 258px;
    height: 74px;
    padding: 3%;
    border: 1px solid #8C84FA;
}
@media screen and (max-width: 450px) {
    .modal-input-date {
        height: 50px;
        margin: 3% 0 0;
    }
}

.modal-input-field {
    width: 258px;
    height: 74px;
    padding: 4%;
    border: 2px solid #000000;
    background: #FFF5F0;
}
@media screen and (max-width: 450px) {
    .modal-input-field {
        height: 50px;
    }
}

.modal-p {
    font-size: 23px;
}
@media screen and (max-width: 450px) {
    .modal-p {
        font-size: 16px;
        margin: 0;
    }
}

.modal-span {
    font-size: 1rem;
}
@media screen and (max-width: 450px) {
    .modal-span {
        font-size: 10px;
    }
}

.modal-label {
    text-align: initial;
}
@media screen and (max-width: 450px) {
    .modal-label {
        padding: 0;
        margin: 3% 0 0 0;
    }
}

/* VIRTUEL VISIT */
#modalReservation {
    z-index: 99;
    background-image: url("/images/template/reservation.jpg");
    background-position: 0 center;
    background-size: cover;
    padding: 70px 0 0 0;

}
@media screen and (max-width: 450px) {
    #modalReservation {
        padding: 5vh 0;
    }
}

.modal-avan {
    /*display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-avan-vid {
    text-align: center;
    height: 76vh;
    display: none;
}

@media (max-width: 769px) {
    .modal-avan-vid {
        height: 30vh;
        margin: 50% 0;
    }
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #000000;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* FIN VIRTUEL VISIT */

/* RESERVATION */
.btn-reservation {
    height: 100%;
    padding: 4% 11%!important;
    text-decoration: none;
    cursor: pointer;

    -o-transition:background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
    -ms-transition:background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
    -moz-transition:background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
    -webkit-transition:background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
    transition:background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
}

.btn-reservation:hover {
    background-color: #4e535e;
    color: #FFFFFF!important;
    border: 1px solid #FFFFFF!important;
}

/* FIN RESERVATION */

.h-nav-menu {
    background-color: #DED8D3;
    width: 97%;
    margin: 0 1%;
}

.h-nav-item {
    width: 100%!important;
    color: #000000!important;
}

.h-nav-item:hover {
    background-color: #f1f1f1!important;
}

/* NOTRE EQUIPE */
.container-popup-equip {
    width: 810px;
    height: 640px;
    position: fixed;
    background-color: #ffffff;
    z-index: 1;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    overflow: auto;
}

@media screen and (max-width: 450px) {
    .container-popup-equip {
        width: 100vw;
        height: 100%;
    }
}

.title-popup-equip {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
}

.function-popup-equip {
    font-size: 18px;
    font-style: italic;
}

.desc-popup-equip {
    padding-right: 7%;
    text-align: justify;
}

.container-equip {
    position: relative;
    text-align: center;
}

.text-equip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: none;
    color: #FFFFFF;
    text-align: center;
    padding: 37% 0;
    width: 346px;
}

.img-equip {
    -o-transition:display 0.3s ease-in, filter 0.3s ease-in;
    -ms-transition:display 0.3s ease-in, filter 0.3s ease-in;
    -moz-transition:display 0.3s ease-in, filter 0.3s ease-in;
    -webkit-transition:display 0.3s ease-in, filter 0.3s ease-in;
    /* ...and now for the proper property */
    transition:display 0.3s ease-in, filter 0.3s ease-in;
}

.container-equip:hover .img-equip {
    filter: brightness(0.8);
}

.container-equip:hover .text-equip {
    display: block;
}

.back-equip {
    height: 100%;
    background-repeat: no-repeat;
    margin: 0 0;

    -o-transition:display 0.3s ease-in, filter 0.3s ease-in;
    -ms-transition:display 0.3s ease-in, filter 0.3s ease-in;
    -moz-transition:display 0.3s ease-in, filter 0.3s ease-in;
    -webkit-transition:display 0.3s ease-in, filter 0.3s ease-in;
    transition:display 0.3s ease-in, filter 0.3s ease-in;
}

.container-equip:hover .back-equip {
    filter: brightness(0.8);
}

/* RECHERCHE/VENTE */
.bloc-title-recherche {
    padding: 2rem 2rem;
    background: hsl(0deg 0% 0% / 33%);
    line-height: 45px;
    margin: auto;
    text-align: center;
}

@media screen and (min-width: 451px) {
    .pos-banner-move {
        position: absolute;
        right: 0;
        left: 0;
        width: max-content;
    }
}

/* ANIMATION */

/* MOVE RIGHT */
.move-right {
    animation: moveRight 2s;
    -webkit-animation: moveRight 2s;
    -moz-animation: moveRight 2s;
    -o-animation: moveRight 2s;
    -ms-animation: moveRight 2s;
}

@keyframes moveRight {
    0% {right:15%;}
    100% {right:0;}
}

@-moz-keyframes moveRight {
    0% {right:15%;}
    100% {right:0;}
}

@-webkit-keyframes moveRight {
    0% {right:15%;}
    100% {right:0;}
}

@-o-keyframes moveRight {
    0% {right:15%;}
    100% {right:0;}
}

@-ms-keyframes moveRight {
    0% {right:15%;}
    100% {right:0;}
}
/* FIN MOVE RIGHT */

/* MOVE LEFT */
.move-left {
    animation: moveLeft 2s;
    -webkit-animation: moveLeft 2s;
    -moz-animation: moveLeft 2s;
    -o-animation: moveLeft 2s;
    -ms-animation: moveLeft 2s;
}

@keyframes moveLeft {
    0% {left:15%;}
    100% {left:0;}
}

@-moz-keyframes moveLeft {
    0% {left:15%;}
    100% {left:0;}
}

@-webkit-keyframes moveLeft {
    0% {left:15%;}
    100% {left:0;}
}

@-o-keyframes moveLeft {
    0% {left:15%;}
    100% {left:0;}
}

@-ms-keyframes moveLeft {
    0% {left:15%;}
    100% {left:0;}
}
/* FIN MOVE LEFT */

/* ROTATION 720° */
.image-rotation-fade-in {
    -webkit-animation:spin 1s linear;
    -moz-animation:spin 1s linear;
    animation:spin 1s linear;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(720deg); } 0% {opacity:0;} 100% {opacity:1;} }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(720deg); } 0% {opacity:0;} 100% {opacity:1;}}
@keyframes spin { 100% { -webkit-transform: rotate(720deg); transform:rotate(720deg); } 0% {opacity:0;} 100% {opacity:1;}}

/* FIN ROTATION 720° */

/* FADE IN */

.fade-in {
    animation: fadeIn 3s;
    -webkit-animation: fadeIn 3s;
    -moz-animation: fadeIn 3s;
    -o-animation: fadeIn 3s;
    -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

/* FIN FADE IN */

.zoom-in-text {
    animation: zoomInText 2s;
    -webkit-animation: zoomInText 2s;
    -moz-animation: zoomInText 2s;
    -o-animation: zoomInText 2s;
    -ms-animation: zoomInText 2s;
}
@keyframes zoomInText {
    0% {font-size:0;}
    100% {font-size:2.5rem;}
}

@-moz-keyframes zoomInText {
    0% {font-size:0;}
    100% {font-size:2.5rem;}
}

@-webkit-keyframes zoomInText {
    0% {font-size:0;}
    100% {font-size:2.5rem;}
}

@-o-keyframes zoomInText {
    0% {font-size:0;}
    100% {font-size:2.5rem;}
}

@-ms-keyframes zoomInText {
    0% {font-size:0;}
    100% {font-size:2.5rem;}
}

.zoom-in-text-estimation {
    animation: zoomInTextEstimation 1s;
    -webkit-animation: zoomInTextEstimation 1s;
    -moz-animation: zoomInTextEstimation 1s;
    -o-animation: zoomInTextEstimation 1s;
    -ms-animation: zoomInTextEstimation 1s;
}

@keyframes zoomInTextEstimation {
    0% {font-size:0;}
    100% {font-size:63px;}
}

@-moz-keyframes zoomInTextEstimation {
    0% {font-size:0;}
    100% {font-size:63px;}
}

@-webkit-keyframes zoomInTextEstimation {
    0% {font-size:0;}
    100% {font-size:63px;}
}

@-o-keyframes zoomInTextEstimation {
    0% {font-size:0;}
    100% {font-size:63px;}
}

@-ms-keyframes zoomInTextEstimation {
    0% {font-size:0;}
    100% {font-size:63px;}
}


.zoom-in-header {
    animation: zoomInHeader 2s;
    -webkit-animation: zoomInHeader 2s;
    -moz-animation: zoomInHeader 2s;
    -o-animation: zoomInHeader 2s;
    -ms-animation: zoomInHeader 2s;
}
@keyframes zoomInHeader {
    0% {width:0;}
    100% {width:200px;}
}

@-moz-keyframes zoomInHeader {
    0% {width:0;}
    100% {width:200px;}
}

@-webkit-keyframes zoomInHeader {
    0% {width:0;}
    100% {width:200px;}
}

@-o-keyframes zoomInHeader {
    0% {width:0;}
    100% {width:200px;}
}

@-ms-keyframes zoomInHeader {
    0% {width:0;}
    100% {width:200px;}
}

.sous-nav1 {
    visibility: hidden;
}

.navbar-show:hover .sous-nav1 {
    visibility: visible!important;
}

::-webkit-file-upload-button {
    display: none;
}

.opacity {
    opacity: 1!important;
}

/* MARGIN UP */

.margin-up {
    animation: marginUp 2s;
    -webkit-animation: marginUp 2s;
    -moz-animation: marginUp 2s;
    -o-animation: marginUp 2s;
    -ms-animation: marginUp 2s;
}
@keyframes marginUp {
    0% {margin: 30% 0;}
    100% {margin: 0;}
}

@-moz-keyframes marginUp {
    0% {margin: 30% 0;}
    100% {margin: 0;}
}

@-webkit-keyframes marginUp {
    0% {margin: 30% 0;}
    100% {margin: 0;}
}

@-o-keyframes marginUp {
    0% {margin: 30% 0;}
    100% {margin: 0;}
}

@-ms-keyframes marginUp {
    0% {margin: 30% 0;}
    100% {margin: 0;}
}

/* FIN MARGIN UP */




.btn-estimate-next {
    border-radius: 0;
    border: 1px solid #000000;
    display: inline-block;
    transform: perspective(1px) translateZ(0);
    position: relative;
    transition: color 0.3s;
}

/*
.btn-estimate-next:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #000000;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.3s ease-out;
}
*/

.btn-estimate-next:hover {
    background-color: #f5f5f5;
}
.btn-estimate-next:hover:before {
    transform: scaleX(1);
}

.btn-estimate-prev {
    border-radius: 0;
    background-color: #C5C5C5;
    border: 1px solid #C5C5C5;
    display: inline-block;
    transform: perspective(1px) translateZ(0);
    position: relative;
    transition: background-color 0.3s;
}

.btn-estimate-next {
    border-radius: 0;
    border: 1px solid #7fd5d2;
    display: inline-block;
    transform: perspective(1px) translateZ(0);
    position: relative;
    transition: background-color 0.3s;
}

/*
.btn-estimate-prev:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #000000;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.3s ease-out;
}
*/

.btn-estimate-prev:hover {
    background-color: #d5d5d5;
}
.btn-estimate-prev:hover:before {
    transform: scaleX(1);
}


.boxed label {
    display: inline-block;
    /*width: 200px;*/
    padding: 10px 18px;
    border: dashed 1px #ccc;
    transition: all 0.3s;
    border-radius: 30px;
    cursor: pointer;
}

@media screen and (max-width: 450px) {
    .boxed label {
        padding: 8px 16px;
    }
}

.boxed input[type="radio"] {
    display: none;
}

.boxed input[type="radio"]:checked + label {
    border-style: solid;
}

.btn_locality_home {
    padding: 8px 37px;
    border: 0;
    border-bottom: 3px solid #67D6D6;
    /*text-align: center;*/
}

.btn_locality_home::placeholder {
    color: #67D6D6;
    opacity: 1;
}

.btn_locality_submit {
    padding: 5px 21px;
    color: white;
    background-color: #5F5BCD;
    border: 0;
    border-radius: 8px;
    font-weight: bold;
    font-size: 19px;
    transition:background-color 0.3s ease-in;
}

.btn_locality_submit:hover {
    background-color: #4e4aa8;
}

@media screen and (max-width: 450px) {
    .mw-m-100 {
        width: max-content;
    }
}

.horizontal-bar {
    width: 80%;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 30px;
    background: linear-gradient(to right, rgb(231 231 231 / 80%) 0%,rgb(229 229 229 / 80%) 100%);
    position: absolute;
    margin: 0 27px;
}

@media screen and (max-width: 450px) {
    .horizontal-bar {
        width: 67%;
    }
}

@media screen and (max-width: 450px) {
    .fs-25-m {
        font-size: 25px;
    }
}