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

    .fs-form-full { top: 15%; }
    .fs-fields .step-container { max-width: 100%; }
    .fs-fields .first-step .step-container h2 { 
        margin-bottom: 220px;
        font-size: 36px;
    }
    .fs-fields .first-step svg,
    .fs-fields .first-step img {
        right: auto;
        top: 45%;
    }

    .fs-controls { display: none !important; }

}

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

    .fs-form-full { max-width: 600px; }
    .fs-fields .first-step svg,
    .fs-fields .first-step img { top: 45%; }

    .fs-message-error {
        bottom: auto;
        padding: 0 23px;
        top: 12.5vh;
        font-size: 15px;
        line-height: 18px;
    }

    .fs-fields .first-step .step-container h2 { margin-bottom: 260px; }

    .fs-fields > li .fs-radio-custom > span {
        float: left;
        position: relative;
        margin-right: 1%;
        padding: 10px;
        max-width: 300px;
        width: 49%;
        text-align: center;
        font-weight: 700;
        font-size: 50%;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .fs-fields > li .fs-radio-custom > span label { font-size: 16px; }

    .fs-fields > li.has-range label.fs-field-label { margin-bottom: 25vh; }
    .fs-fields > li.has-range > svg,
    .fs-fields > li.has-range > img {
        position: absolute;
        top: 40%;
        right: auto;
        transform: translateY(-50%);
    }

    .range-value {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .surface .step-container div > label,
    .terrain .step-container div > label {
        margin-bottom: 230px;
    }

    .fs-fields > li.surface > svg,
    .fs-fields > li.terrain > svg,
    .fs-fields > li.surface > img,
    .fs-fields > li.terrain > img {
        position: absolute;
        top: 37%;
        right: auto;
        transform: translateY(-50%);
    }

    .fs-fields > li #adresse { margin-top: 20px; margin-bottom: 25px; }
    .installations .step-container label { margin-bottom: 35px; }
    .installations .step-container .column { margin-bottom: 20px; }
    .installations .step-container .column .checkbox-wrapper { margin-bottom: 20px; }

    .etat .fs-field-label { margin-bottom: 20px; }
    .multiples-ranges-selector > .range-selector { 
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: -35px;
        margin-bottom: 30px;
    }
    .fs-fields > li.etat .multiples-ranges-selector label.fs-field-label {
        font-size: 17px;
        text-align: left;
        padding-bottom: 0;
        margin-top: -10px;
    }
    .multiples-ranges-selector > .range-selector input[type="range"] {
        display: flex;
        order: 2;
        font-size: 1.25em;
    }
    .multiples-ranges-selector > .range-selector .range-value {
        display: flex;
        order: 1;
        font-size: 17px;
        text-align: right;
        width: 100%;
        margin-left: 0;
        margin-bottom: 5px;
    }
    .multiples-ranges-selector > .range-selector .range-value span { width: 100%; }

    .multiples-ranges-selector input[type="range"] { width: 100%; }

    .recapitulatif {
        width: 105vw !important;
        margin-left: -10vw !important;
        overflow-y: scroll;
        overflow-x: hidden;
        transform: translateY(0);
    }

    .recapitulatif h2 {
        margin-left: 10vw;
        margin-bottom: 10px;
    }

    .recapitulatif .colonne-gauche {
        width: 100%;
        height: auto;
    }

    .recapitulatif .colonne-gauche .nav-tabs li { 
        width: 100%;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }
    .recapitulatif .colonne-gauche .nav-tabs li a { color: #333 !important; font-weight: bold; }
    .recapitulatif .colonne-gauche .nav-tabs li:not(.active) { display: none; }

    .recapitulatif .colonne-gauche .tab-pane {
        height: auto;
        display: inline-block !important;
        width: 100%;
    }
    .recapitulatif .colonne-gauche #details .prix { margin-top: 0; }

    .recapitulatif .colonne-gauche #details .adresse { 
        margin-top: 20px;
    }
    .recapitulatif .colonne-gauche #details .adresse,
    .recapitulatif .colonne-gauche #details .pieces,
    .recapitulatif .colonne-gauche #details .etages,
    .recapitulatif .colonne-gauche #details .superficie {
        width: 100% !important;
        padding-left: 90px !important;
    }

    .recapitulatif .colonne-gauche #details li:before { left: 60px !important; }

    .recapitulatif .colonne-gauche #atouts ul,
    .recapitulatif .colonne-gauche #points-negatifs ul { 
        padding: 20px 40px;
        list-style-type: circle;
    }

    .recapitulatif .colonne-gauche #atouts:before {
        display: block;
        content: "Atouts du bien";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-gauche #points-negatifs:before {
        display: block;
        content: "Points négatifs";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-droite {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .recapitulatif .colonne-droite:before {
        display: block;
        content: "Conseils";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-droite .recap-subtitle {
        padding-top: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .recapitulatif .colonne-droite .recap-text { margin-bottom: 20px; }

    .recapitulatif .colonne-droite img { display: none; }

}

@media screen and (min-width: 374px) and (max-width: 480px) {

    .fs-form-full { top: 0; }
    .fs-fields { width: 330px; }
    .fs-form-full .fs-fields > li { height: 100vh; }

    .fs-message-error {
        bottom: auto;
        padding: 0 20px;
        top: 12.5vh;
        font-size: 15px;
        line-height: 18px;
    }

    .fs-fields .first-step .step-container { margin-top: 15vh; }
    .fs-fields .step-container { margin-top: 25vh; }

    .fs-fields .first-step .step-container h2 { font-size: 24px; }
    .fs-fields .first-step .step-container h3 { font-size: 16px; }

    .fs-fields .first-step svg,
    .fs-fields .first-step img {
        top: 47%;
        max-height: 180px;
        width: auto;
        right: 50%;
        transform: translate(50%, -50%);
    }

    .fs-continue { 
        width: 100% !important;
        position: absolute !important;
        bottom: 20px !important;
    }

    .fs-fields > li .fs-radio-custom > span { width: 47% !important; }

    .fs-fields > li.has-range .step-container { margin-top: 15vh; }
    .fs-fields > li.has-range label.fs-field-label {
        margin-top: 10vh;
        margin-bottom: 25vh;
    }

    .fs-fields > li.has-range .range-selector {
        display: flex;
        flex-direction: column;
    }

    .fs-fields > li.has-range .range-value {
        display: flex;
        order: 1;
        font-size: 20px;
        justify-content: center;
        margin-left: 0;
        margin-top: 30px;
    }
    .fs-fields > li.has-range .range-value .value { margin-right: 2px; }
    .fs-fields > li.has-range .range-value sup { 
        top: 0em;
        margin-right: 5px;
        line-height: 1;
    }

    .fs-fields > li.has-range input[type=range] {
        display: flex;
        order: 2;
        margin-top: 10px;
        width: 100%;
    }

    .fs-fields > li.has-range svg,
    .fs-fields > li.has-range img {
        position: absolute;
        top: 45% !important;
        max-height: 160px;
        width: auto;
        right: 50%;
        transform: translate(50%,-50%);
    }

    .fs-fields > li.surface svg,
    .fs-fields > li.terrain svg,
    .fs-fields > li.surface img,
    .fs-fields > li.terrain img {
        display: none;
    }

    .fs-fields > li.installations label.fs-field-label { 
        margin-top: 0;
        margin-bottom: 20px;
    }
    .fs-fields > li.installations .column { width: 100%; }
    .fs-fields > li.installations .column .checkbox-wrapper { margin-bottom: 8px; }

    .fs-fields > li.description label.fs-field-label { margin-top: 0; }
    .fs-fields > li.description .subtitle { font-size: 14px; }

    .fs-fields > li.etat .step-container { margin-top: 12vh; }
    .fs-fields > li.etat .step-container > label.fs-field-label { 
        margin-top: 0;
        margin-bottom: 5px;
        padding-bottom: 7px;
    }
    .multiples-ranges-selector > .range-selector { 
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: -35px;
        margin-bottom: 30px;
    }
    .fs-fields > li.etat .multiples-ranges-selector label.fs-field-label {
        font-size: 17px;
        text-align: left;
        padding-bottom: 0;
        margin-top: -10px;
    }
    .multiples-ranges-selector > .range-selector input[type="range"] {
        display: flex;
        order: 2;
        font-size: 1.25em;
    }
    .multiples-ranges-selector > .range-selector .range-value {
        display: flex;
        order: 1;
        font-size: 17px;
        text-align: right;
        width: 100%;
        margin-left: 0;
        margin-bottom: 15px;
    }
    .multiples-ranges-selector > .range-selector .range-value span { width: 100%; }

    input[type="range"] {
        width: 100%;
    }

    .recapitulatif {
        width: 105vw !important;
        margin-left: -10vw !important;
        overflow-y: scroll;
        overflow-x: hidden;
        transform: translateY(0);
    }

    .recapitulatif h2 { 
        margin-top: 12vh;
        margin-left: 10vw;
        margin-bottom: 10px;
    }

    .recapitulatif .colonne-gauche {
        width: 100%;
        height: auto;
    }

    .recapitulatif .colonne-gauche .points li { flex-direction: column; }
    .recapitulatif .colonne-gauche .points li .value-name { text-align: left; }

    .recapitulatif .colonne-gauche .nav-tabs li { 
        width: 100%;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }
    .recapitulatif .colonne-gauche .nav-tabs li a { color: #333 !important; font-weight: bold; }
    .recapitulatif .colonne-gauche .nav-tabs li:not(.active) { display: none; }

    .recapitulatif .colonne-gauche .tab-pane {
        height: auto;
        display: inline-block !important;
        width: 100%;
    }
    .recapitulatif .colonne-gauche #details .prix { margin-top: 0; }

    .recapitulatif .colonne-gauche #details .adresse { 
        margin-top: 20px;
    }
    .recapitulatif .colonne-gauche #details .adresse,
    .recapitulatif .colonne-gauche #details .pieces,
    .recapitulatif .colonne-gauche #details .etages,
    .recapitulatif .colonne-gauche #details .superficie {
        width: 100% !important;
        padding-left: 90px !important;
    }

    .recapitulatif .colonne-gauche #details li:before { left: 60px !important; }

    .recapitulatif .colonne-gauche #atouts ul,
    .recapitulatif .colonne-gauche #points-negatifs ul { padding: 12px; }

    .recapitulatif .colonne-gauche #atouts:before {
        display: block;
        content: "Atouts du bien";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-gauche #points-negatifs:before {
        display: block;
        content: "Points négatifs";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-droite {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .recapitulatif .colonne-droite:before {
        display: block;
        content: "Conseils";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-droite .recap-subtitle {
        padding-top: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .recapitulatif .colonne-droite .recap-text { margin-bottom: 20px; }

    .recapitulatif .colonne-droite img { display: none; }

}

@media screen and (min-width: 410px) and (max-width: 480px) {

    .fs-fields { width: 370px; }
    .fs-fields .first-step svg,
    .fs-fields .first-step img { top: 45%; }

    .fs-fields .first-step .step-container h2 { margin-bottom: 210px; }

    .recapitulatif .colonne-gauche #details .adresse,
    .recapitulatif .colonne-gauche #details .pieces,
    .recapitulatif .colonne-gauche #details .etages,
    .recapitulatif .colonne-gauche #details .superficie {
        padding-left: 120px !important;
    }
    .recapitulatif .colonne-gauche #details li::before {
        left: 80px !important;
    }
    .recapitulatif .colonne-gauche #details .disclaimer { padding: 30px 20px 0; }
    .recapitulatif .colonne-gauche #atouts ul,
    .recapitulatif .colonne-gauche #points-negatifs ul {
        padding: 12px 20px;
    }
    .recapitulatif .colonne-gauche #atouts::before,
    .recapitulatif .colonne-gauche #points-negatifs::before {
        padding: 15px 12vw;
    }
    .recapitulatif .colonne-droite { padding: 20px 20px 20px 35px; }

}

@media screen and (min-width: 320px) and (max-width: 374px) {

    .container { overflow: hidden; }

    .fs-form-full { top: 0; }
    .fs-fields { width: 280px; }

    .fs-title h1 { font-size: 16px; }

    .fs-form-full .fs-fields > li {
        height: 100vh;
        box-sizing: content-box;
    }

    .fs-form-full .fs-fields > li:nth-child(2) {
        max-height: 100vh;
    }

    .fs-form-full .fs-fields > li:nth-child(3) .fs-field-label,
    .fs-form-full .fs-fields > li:nth-child(4) .fs-field-label {
        margin-top: 10vh;
    }

    .fs-form-full .fs-fields > li.surface .step-container { margin-top: 25vh; }

    .fs-fields .step-container {
        margin-top: 20vh;
    }
    .fs-fields .first-step .step-container,
    .fs-fields .installations .step-container,
    .fs-fields .etat .step-container { margin-top: 17vh; }

    .fs-fields .first-step .step-container { margin-bottom:  }

    .fs-fields .first-step .step-container h2 {
        font-size: 23px;
        line-height: 28px;
        margin-bottom: 140px;
    }
    .fs-fields .first-step .step-container h3 { font-size: 15px; }
    .fs-fields li svg,
    .fs-fields li img {
        top: 52vh !important;
        max-height: 120px !important;
        width: auto !important;
        right: 50% !important;
        transform: translate(50%, -50%) !important;
    }

    .fs-message-error {
        bottom: auto;
        padding: 0 20px;
        top: 17vh;
        font-size: 15px;
        line-height: 18px;
    }

    .surface .step-container div > input[type=number],
    .terrain .step-container div > input[type=number] {
        width: 130px;
        height: 50px;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 20px;
        vertical-align: top;
        background: #fff;
        color: #333;
        margin-top: 20px;
        font-size: 24px;
        text-align: center;
    }

    .fs-continue { 
        width: 100% !important;
        position: absolute !important;
        bottom: 20px !important;
    }
    .first-step .fs-continue { bottom: 20px !important; }

    .fs-fields > li label.fs-field-label {
        margin-top: 20vh;
    }

    .fs-fields > li.has-range label.fs-field-label {
        margin-top: 10vh;
        margin-bottom: 25vh;
    }

    .fs-fields > li.has-range .range-selector {
        display: flex;
        flex-direction: column;
    }

    .fs-fields > li.has-range .range-value {
        display: flex;
        order: 1;
        font-size: 20px;
        justify-content: center;
        margin-left: 0;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .fs-fields > li.has-range .range-value .value { margin-right: 2px; }
    .fs-fields > li.has-range .range-value sup { 
        top: 0em;
        margin-right: 5px;
        line-height: 1;
    }

    .fs-fields > li.has-range input[type=range] {
        display: flex;
        order: 2;
        margin-top: 10px;
    }

    .fs-fields svg.fs-anim-lower,
    .fs-fields img.fs-anim-lower { transform: translate(50%, -50%) !important; }

    .fs-fields > li.has-range svg,
    .fs-fields > li.has-range img {
        position: absolute;
        top: 52vh !important;
    }

    .fs-fields > li.surface svg,
    .fs-fields > li.terrain svg,
    .fs-fields > li.surface img,
    .fs-fields > li.terrain img {
        display: none;
    }

    .fs-fields > li.surface input + span,
    .fs-fields > li.terrain input + span {
        vertical-align: middle;
        font-size: 30px;
        margin-top: 30px;
        display: inline-block;
    }

    .fs-fields > li .fs-radio-custom > span {
        width: 47% !important;
    }

    .fs-fields > li.installations label.fs-field-label { margin-top: 0; margin-bottom: 10px; }
    .fs-fields > li.installations .column { width: 100%; }
    .fs-fields > li.installations .column .checkbox-wrapper { margin-bottom: 8px; }

    .fs-fields > li.description label.fs-field-label { margin-top: 0; }
    .fs-fields > li.description .subtitle { font-size: 14px; }
    .description textarea,
    .description textarea:placeholder { font-size: 16px !important; }

    .fs-fields > li.etat {
        height: auto;
        overflow-y: scroll;
    }
    .fs-fields > li.etat .step-container > label.fs-field-label { 
        margin-top: 0;
        margin-bottom: 5px;
        padding-bottom: 7px;
    }

    .fs-fields > li.etat .step-container .fs-continue {
        bottom: -80px !important;
    }

    .multiples-ranges-selector > .range-selector { 
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: -55px;
        margin-bottom: 20px;
    }
    .fs-fields > li.etat .multiples-ranges-selector label.fs-field-label {
        font-size: 17px;
        text-align: left;
        padding-bottom: 0;
        margin-top: -10px;
    }
    .multiples-ranges-selector > .range-selector input[type="range"] {
        display: flex;
        order: 2;
        font-size: 1.25em;
    }
    .multiples-ranges-selector > .range-selector .range-value {
        display: flex;
        order: 1;
        font-size: 17px;
        text-align: right;
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .multiples-ranges-selector > .range-selector .range-value span { width: 100%; }

    input[type="range"] {
        width: 100%;
    }

    .recapitulatif {
        width: 105vw !important;
        margin-left: -10vw !important;
        overflow-y: scroll;
        overflow-x: hidden;
        transform: translateY(0);
    }

    .recapitulatif h2 { 
        margin-top: 16vh;
        margin-left: 10vw;
        margin-bottom: 10px;
    }

    .recapitulatif .colonne-gauche {
        width: 100%;
        height: auto;
    }

    .recapitulatif .colonne-gauche .points li { flex-direction: column; }
    .recapitulatif .colonne-gauche .points li .value-name { text-align: left; }

    .recapitulatif .colonne-gauche .nav-tabs li { 
        width: 100%;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }
    .recapitulatif .colonne-gauche .nav-tabs li a { color: #333 !important; font-weight: bold; }
    .recapitulatif .colonne-gauche .nav-tabs li:not(.active) { display: none; }

    .recapitulatif .colonne-gauche .tab-pane {
        height: auto;
        display: inline-block !important;
        width: 100%;
    }
    .recapitulatif .colonne-gauche #details .prix { margin-top: 0; }

    .recapitulatif .colonne-gauche #details .adresse { 
        margin-top: 20px;
    }
    .recapitulatif .colonne-gauche #details .adresse,
    .recapitulatif .colonne-gauche #details .pieces,
    .recapitulatif .colonne-gauche #details .etages,
    .recapitulatif .colonne-gauche #details .superficie {
        width: 100% !important;
        padding-left: 90px !important;
    }

    .recapitulatif .colonne-gauche #details li:before { left: 60px !important; }

    .recapitulatif .colonne-gauche #atouts ul,
    .recapitulatif .colonne-gauche #points-negatifs ul { padding: 12px; }

    .recapitulatif .colonne-gauche #atouts:before {
        display: block;
        content: "Atouts du bien";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-gauche #points-negatifs:before {
        display: block;
        content: "Points négatifs";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-droite {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .recapitulatif .colonne-droite:before {
        display: block;
        content: "Conseils";
        width: 110vw;
        margin: 0 -7vw;
        text-align: left;
        background: #F3F3F3 !important;
        padding: 15px 11vw;
    }

    .recapitulatif .colonne-droite .recap-subtitle {
        padding-top: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .recapitulatif .colonne-droite .recap-text { margin-bottom: 20px; }

    .recapitulatif .colonne-droite img { display: none; }

}