/* Fonts */

@font-face {
    font-family: 'Avenir Book Oblique';
    font-display: swap;
    src: url('fonts/Avenir-BookOblique.eot');
    src: url('fonts/Avenir-BookOblique.eot?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-BookOblique.woff2') format('woff2'),
        url('fonts/Avenir-BookOblique.woff') format('woff'),
        url('fonts/Avenir-BookOblique.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Black';
    font-display: swap;
    src: url('fonts/Avenir-Black.eot');
    src: url('fonts/Avenir-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-Black.woff2') format('woff2'),
        url('fonts/Avenir-Black.woff') format('woff'),
        url('fonts/Avenir-Black.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Black Oblique';
    font-display: swap;
    src: url('fonts/Avenir-BlackOblique.eot');
    src: url('fonts/Avenir-BlackOblique?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-BlackOblique.woff2') format('woff2'),
        url('fonts/Avenir-BlackOblique.woff') format('woff'),
        url('fonts/Avenir-BlackOblique.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Roman';
    font-display: swap;
    src: url('fonts/Avenir-Roman.eot');
    src: url('fonts/Avenir-Roman.eot?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-Roman.woff2') format('woff2'),
        url('fonts/Avenir-Roman.woff') format('woff'),
        url('fonts/Avenir-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Light';
    font-display: swap;
    src: url('fonts/Avenir-Light.eot');
    src: url('fonts/Avenir-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-Light.woff2') format('woff2'),
        url('fonts/Avenir-Light.woff') format('woff'),
        url('fonts/Avenir-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Medium';
    font-display: swap;
    src: url('fonts/Avenir-Medium.eot');
    src: url('fonts/Avenir-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-Medium.woff2') format('woff2'),
        url('fonts/Avenir-Medium.woff') format('woff'),
        url('fonts/Avenir-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next Condensed Demi Bold';
    font-display: swap;
    src: url('fonts/AvenirNextCondensed-DemiBold.eot');
    src: url('fonts/AvenirNextCondensed-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/AvenirNextCondensed-DemiBold.woff2') format('woff2'),
        url('fonts/AvenirNextCondensed-DemiBold.woff') format('woff'),
        url('fonts/AvenirNextCondensed-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Variables */

:root {
    --color-main-blue: #135589;
    --color-main-green: #1A7783;
    --color-title-blue: #0D395B;
    --color-bg-dark-blue: linear-gradient(to bottom, #2F838E, #3595A2);
    --color-bg-dark-red: linear-gradient(to bottom, #8A3236, #9D393E);
    --color-bg-dark-brown: linear-gradient(to bottom, #70653D, #807345);
    --color-bg-dark-grey: linear-gradient(to bottom, #474747, #515151);
    --color-bg-light-blue: #D0DDE7;
    --color-bg-light-altblue: #A1BBD0;
    --color-bg-form: #dadada;
    --color-bg-footer-green: #54AFB5;
    --color-text-slider: #CCFBFF;
    --color-text-green: #015C62;
    --color-text-blue: #11568B;
    --color-input-border: #14578B;
    --color-input-placeholder: rgba(26, 119, 131, 0.7);
    --color-input-placeholder-monocolor: rgba(19, 85, 137, 0.7);
    --color-input-background: #DADADA;
    --color-input-disabled: #A2A2A2;
    --color-bg-testimony-blue: #3894A5;
    --color-bg-testimony-brown: #8F6954;
    --color-bg-testimony-red: #993D35;
    --color-bg-monocolor: #5C96C4;
    --color-bg-monocolor-light: #D0DDE7;
    --color-bg-monocolor-dark: #A1BBD0;
    --color-bg-light-grey: linear-gradient(to bottom, #FFF, #EAEAEA);
    --background-testimony: linear-gradient(to bottom, #FFF, #E5E5E5);
    --background-how-to: linear-gradient(to bottom, #1B6193, #0F4A7C);
    --background-how-to-monocolor: linear-gradient(to bottom, #48929C, #155F69);
    --box-shadow-main: 0px 0px 10px 0px rgba(6, 6, 6, 0.5);
    --box-shadow-isolation: inset 0px 8px 8px 0px rgba(0, 0, 0, 0.3);
    --text-shadow-slider: 0px 0px 10px rgba(0, 0, 0, 0.75);
}

@media (min-width: 1480px) {
    .container {
        max-width: 1440px;
    }
}

a, label {
    transition: all 0.5s;
}

.hidden {
    display: none;
}

body.multicolor input::placeholder,
body.multicolor input:placeholder-shown {
    color: var(--color-input-placeholder);
}
body.monocolor input::placeholder,
body.monocolor input:placeholder-shown {
    color: var(--color-input-placeholder-monocolor);
}

/* Dev */
#menudev {
    position: fixed;
    z-index: 10;
    top: 10px;
    left: 10px;
    padding: 10px;
    background: #CCC;
    border: 1px solid #F3F3F3;
}
#menudev ol,
#menudev li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#menudev a {
    display: block;
    padding: 2px 10px;
    margin-bottom: 10px;
    cursor: pointer;
    background: var(--color-main-blue);
    color: var(--white);
    text-decoration: none;
}
#menudev li:last-child a {
    margin-bottom: 0px;
}

/* Header */

header {
    position: relative;
}
body.withoutmenu header {
    border-bottom: 26px solid var(--color-main-blue);
}
body.withoutmenu header #menuheader {
    display: none;
}
header div.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 130px;
}
header #logo {
    position: relative;
    top: 4px;
    left: 4px;
}
header #home {
    position: relative;
    z-index: 2;
    top: 13px;
    left: 5px;
}
header #eligibility {
    font-family: 'Avenir Black';
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-align: center;
    line-height: 29px;
    padding: 10px 0px;
    color: var(--white);
    box-shadow: var(--box-shadow-main);
    border: 1px solid var(--white);
    background: var(--color-main-green);
    display: inline-block;
    width: 317px;
    height: 77px;
    position: relative;
    left: 6px;
    top: 1px;
}
header #eligibility:hover,
header #eligibility:active {
    background: var(--color-main-blue);
    color: var(--white);
    text-decoration: none;
}
body.withmenu #menuheader {
    height: 70px;
    line-height: 70px;
    font-family: 'Avenir Light';
    font-size: 30px;
    background: var(--color-main-blue);
}
body.withmenu #menuheader ul {
    margin: auto;
    display: flex;
    justify-content: space-around;
}
body.withmenu #menuheader li {
    list-style: none;
    padding: 0px;
    display: inline-block;
}
body.withmenu #menuheader a {
    color: var(--white);
    text-decoration: none;
}
body.withmenu #menuheader a:hover,
body.withmenu #menuheader a:focus {
    color: var(--color-text-slider);
}

/* Main */

main {
    border-top: 1px solid var(--white);
}
main .main_title {
    font-family: 'Avenir Light';
    font-size: 51px;
    color: var(--color-title-blue);
    margin-top: 27px;
    text-indent: 4px;
    text-transform: uppercase;
}
#main_container {
    position: relative;
    padding: 0px 8px;
}

/* Main > Slider */

#slider {
    background: url(../img/slider.jpg) 48% 0px no-repeat;
    background-size: cover;
    height: 635px;
    text-shadow: var(--text-shadow-slider);
    line-height: 54px;
}
body.multicolor #slider {
    background-image: url(../img/slider.jpg);
}
body.monocolor #slider {
    background-image: url(../img/slider2.jpg);
}
#slider_text_1 {
    font-family: 'Avenir Black Oblique';
    font-size: 50px;
    font-weight: bold;
    font-style: italic;
    color: var(--color-text-slider);
    padding-top: 45px;
    text-indent: 17px;
    letter-spacing: -1.5px;
}
#slider_text_1 .percent,
#slider_text_2,
#slider_text_3 {
    font-family: 'Avenir Black';
    font-weight: bold;
    font-style: normal;
    color: var(--white);
}
#slider_text_1 .percent {
    font-size: 83px;
    position: relative;
    top: 5px;
    margin-right: -4px;
}
#slider_text_2 {
    font-size: 59px;
    text-indent: 97px;
    letter-spacing: 0.4px;
}
#slider_text_3 {
    font-size: 83px;
    text-indent: 157px;
    letter-spacing: -5px;
}

/* Main > Testimony */

#testimony .container {
    padding: 0px 8px;
}
#testimony .main_title {
    text-indent: 0px;
}
.testimony {
    display: flex;
    align-items: stretch;
    max-width: 835px;
    height: 201px;
    margin-top: 30px;
    background: var(--background-testimony);
    font-family: 'Avenir Medium';
}
.testimony.first {
    margin-top: 24px;
}
.testimony .category {
    position: relative;
    width: 60px;
    text-align: center;
    color: var(--white);
    font-size: 30px;
    letter-spacing: 0.5px;
}
.testimony .category span {
    position: relative;
    top: 116px;
    transform: rotate(-90deg);
    display: block;
    white-space: nowrap;
    letter-spacing: -2.5px;
}
.testimony.color2 .category span {
    top: 85px;
}
.testimony.color2 .category span.special {
    top: 112px;
}
.testimony.color3 .category span {
    top: 108px;
}
.testimony .comment {
    padding: 0px 25px;
}
.testimony .comment_header {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    color: var(--color-main-blue);
    font-size: 30px;
    margin: 17px 0px 8px 0px;
}
.testimony .user {
    margin-left: 20px;
}
.testimony .region {
    font-size: 24px;
    margin-left: auto;
}
.testimony .comment_text {
    color: var(--black);
    font-size: 20px;
    line-height: 24px;
    text-align: justify;
    letter-spacing: 0.25px;
    word-wrap: break-word;
}
body.multicolor .testimony.color1 .category {
    background: var(--color-bg-testimony-blue);
}
body.multicolor .testimony.color2 .category {
    background: var(--color-bg-testimony-brown);
}
body.multicolor .testimony.color3 .category {
    background: var(--color-bg-testimony-red);
}
body.monocolor .testimony .category {
    background: var(--color-bg-monocolor);
}

/* Main Form left */
#form_left {
    position: absolute;
    top: -598px;
    right: -24px;
    width: 546px;
}
#form_left form:before {
    background: url(../img/shadow_form_top.png) no-repeat;
    width: 79px;
    height: 337px;
    content: ' ';
    position: absolute;
    top: 571px;
    left: -64px;
}
#form_left form:after {
    background: url(../img/shadow_form_bottom.png) no-repeat;
    width: 81px;
    height: 291px;
    content: ' ';
    position: absolute;
    bottom: 80px;
    left: -66px;
}
#form_left_top {
    text-align: center;
    padding: 113px 50px;
    font-family: 'Avenir Medium';
    font-size: 48px;
    line-height: 48px;
    color: var(--white);
    height: 260px;
    background: url(../img/roof.png) 50% 50% no-repeat;
}
#form_left form {
    margin: -8px 15px 0px 15px;
    padding: 15px 35px 19px 35px;
    background: var(--white);
}
#form_left label {
    display: block;
    border: 1px solid var(--white);
    box-shadow: var(--box-shadow-main);
    text-align: center;
    color: var(--white);
    font-family: 'Avenir Black';
    font-size: 21px;
    line-height: 51px;
    text-transform: uppercase;
    padding: 0px;
    cursor: pointer;
    flex: 1 1 auto;
}
#form_left label.disabled {
    background: var(--color-input-disabled) !important;
    cursor: not-allowed;
}
#form_left .revenu_fiscal label {
    text-transform: none;
}
body.multicolor #form_left label {
    background: var(--color-main-green);
}
body.monocolor #form_left label {
    background: var(--color-main-blue);
}
body.multicolor #form_left label:hover,
body.multicolor #form_left label.checked {
    background: var(--color-main-blue);
}
body.monocolor #form_left label:hover,
body.monocolor #form_left label.checked {
    background: var(--color-bg-monocolor);
}
#form_left .revenu_fiscal label {
    font-size: 20px;
}
#form_left label.hidden {
    display: none;
}
#form_left .form_title {
    font-family: 'Avenir Book Oblique';
    font-size: 36px;
    line-height: 36px;
    text-align: center;
    padding-top: 23px;
    padding-bottom: 21px;
    color: var(--color-title-blue);
}
#form_left .form_title.spacing {
    letter-spacing: 0.85px;
}
#form_left .form_title.special {
    padding-bottom: 4px;
}
#form_left .form_radio {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
}
#form_left .form_radio.space-between label {
    margin: 0px 5px;
}
#form_left .form_radio.space-between label:first-child {
    margin-left: 0px;
}
#form_left .form_radio.space-between label:last-child {
    margin-right: 0px;
}
#form_left input[type="checkbox"],
#form_left input[type="radio"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
#form_left .form_line {
    margin-top: 20px;
    display: flex;
}
#form_left input[type="text"],
#form_left input[type="date"],
#form_left input[type="tel"],
#form_left input[type="email"] {
    flex: 1 1 auto;
    font-family: 'Avenir Medium';
    font-size: 21px;
    border: 1px solid var(--color-input-border);
    background: var(--color-input-background);
    box-shadow: var(--box-shadow-main);
    padding: 10px 15px 9px 15px;
    outline: 0;
}
#form_left input[type="text"][disabled],
#form_left input[type="date"][disabled],
#form_left input[type="tel"][disabled],
#form_left input[type="email"][disabled] {
    background: var(--color-input-disabled);
    cursor: not-allowed;
}
#form_left input[type="text"]:focus,
#form_left input[type="date"]:focus,
#form_left input[type="tel"]:focus,
#form_left input[type="email"]:focus {
    background: var(--white);
}
body.multicolor #form_left input[type="text"],
body.multicolor #form_left input[type="date"],
body.multicolor #form_left input[type="tel"],
body.multicolor #form_left input[type="email"] {
    color: var(--color-main-green);
}
body.monocolor #form_left input[type="text"],
body.monocolor #form_left input[type="date"],
body.monocolor #form_left input[type="tel"],
body.monocolor #form_left input[type="email"] {
    color: var(--color-main-blue);
}
#form_left .form_line.special input[type="tel"] {
    width: calc(50% - 20px);
}
#form_left #date_naissance {
    width: 50%;
    margin-right: 20px;
}
#form_left #required_fields {
    margin-top: 5px;
    font-family: 'Avenir Light';
    font-size: 18px;
    color: var(--black);
}
#form_left .center {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 37px;
}
#form_left input[type="submit"] {
    background: var(--color-main-green);
    border: 1px solid var(--white);
    box-shadow: var(--box-shadow-main);
    text-align: center;
    color: var(--white);
    font-family: 'Avenir Black';
    font-size: 21px;
    text-transform: uppercase;
    padding: 8px 36px;
    cursor: pointer;
    outline: 0;
}
#form_left input[type="submit"][disabled] {
    background: var(--color-input-disabled);
    cursor: not-allowed;
}
#form_left input[type="submit"]:hover {
    background: var(--color-main-blue);
}
#form_left input[type="submit"]:active {
    background: var(--color-bg-dark-red);
}

#form_left #form_success {
    text-align: center;
    font-family: 'Avenir Medium';
    font-size: 30px;
    color: var(--black);
    padding-top: 77px;
    padding-bottom: 82px;
    line-height: 40px;
}

/* Main > Bottom */

#main_bottom {
    margin-top: 65px;
}
#main_bottom .container {
    padding: 0px 2px;
}
#main_bottom_bg {
    height: 384px;
}
body.multicolor #main_bottom_bg {
    background: var(--background-how-to);
}
body.monocolor #main_bottom_bg {
    background: var(--background-how-to-monocolor);
}
#main_bottom_container {
    position: relative;
    background: var(--white);
    margin-top: -157px;
}
#main_bottom_container:before {
    background: url(../img/shadow_how.png) no-repeat;
    width: 80px;
    height: 396px;
    content: ' ';
    position: absolute;
    top: 157px;
    left: -79px;
}
#main_bottom .main_title.special {
    color: var(--white);
    padding-top: 118px;
}

#main_bottom_content {
    display: flex;
    justify-content: flex-end;
    position: relative;
}
#main_bottom_right {
    position: relative;
    z-index: 2;
    left: 10px;
    width: 703px;
    color: var(--color-text-blue);
    font-family: 'Avenir Roman';
    font-size: 24px;
}
#main_bottom_right .main_title {
    letter-spacing: -1px;
    margin-bottom: 15px;
}
#main_bottom_right p {
    padding: 0px 0px 0px 6px;
    line-height: 30px;
    margin-bottom: 25px;
    letter-spacing: 0.3px;
    text-align: justify;
}
#main_bottom_right p.second {
    letter-spacing: -0.75px;
    line-height: 29px;
}
#main_bottom_left img {
    position: absolute;
    left: -2px;
    top: 31px;
    z-index: 1;
}

/* Main > Step */

#step_container {
    position: relative;
    overflow: hidden;
    padding: 84px 0px 121px 0px;
}
#step_list {
    display: flex;
    padding: 0px;
    margin: 0px;
    position: relative;
    z-index: 2;
}
#step_list li {
    position: relative;
    z-index: 3;
    list-style: none;
    width: 25%;
    text-align: center;
}
#step_list li span {
    display: block;
}
#step_list .logo {
    height: 90px;
    margin-bottom: 30px;
}
#step_list .number {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 40px;
    background: var(--color-main-blue);
    color: var(--white);
    font-size: 58px;
    font-family: Avenir Black;
}
#step_list .text {
    text-align: center;
    font-family: 'Avenir Next Condensed Demi Bold';
    font-weight: 600;
    font-size: 18px;
    color: var(--color-main-blue);
    margin-top: 18px;
}
#step_list:after {
    position: absolute;
    top: 154px;
    left: 12.5%;
    content: '';
    z-index: 1;
    background: var(--color-main-blue);
    width: 75%;
    height: 14px;
}

/* Footer */

/* Footer > isolation */

#travaux_isolation_title {
    font-family: 'Avenir Light';
    font-size: 51px;
}
#travaux_isolation_title .container {
    margin-top: 87px;
    padding: 36px 0px;
    text-indent: 4px;
}
body.multicolor #travaux_isolation_title {
    background: var(--color-bg-light-grey);
    color: var(--color-main-blue);
}
body.monocolor #travaux_isolation_title {
    background: var(--color-main-blue);
    color: var(--white);
}
#travaux_isolation .travaux_isolation .container {
    height: 502px;
    padding: 65px 0px;
    display: flex;
    align-items: center;
}
#travaux_isolation .travaux_img {
    display: inline-block;
    width: 372px;
}
#travaux_isolation .travaux_title {
    font-size: 40px;
    text-transform: uppercase;
    padding-bottom: 17px;
    letter-spacing: -1.8px;
}
body.monocolor #travaux_isolation .travaux_title {
    color: var(--color-main-blue);
}
body.monocolor #travaux_isolation_1 {
    box-shadow: var(--box-shadow-isolation);
}
#travaux_isolation #travaux_isolation_1 .travaux_title {
    padding-top: 35px;
}
#travaux_isolation #travaux_isolation_4 .travaux_title {
    padding-top: 27px;
}
#travaux_isolation .travaux_text {
    display: inline-block;
    width: calc(100% - 372px);
    font-family: 'Avenir Medium';
    font-size: 30px;
    color: var(--white);
}
#travaux_isolation .travaux_text p {
    line-height: 30px;
    margin-bottom: 31px;
    text-align: justify;
    letter-spacing: -0.3px;
}
#travaux_isolation #travaux_isolation_2 .travaux_text p {
    letter-spacing: 0px;
}
#travaux_isolation #travaux_isolation_4 .travaux_text p {
    letter-spacing: -0.5px;
}
#travaux_isolation #travaux_isolation_1 .travaux_text,
#travaux_isolation #travaux_isolation_3 .travaux_text {
    padding-left: 59px;
}
#travaux_isolation #travaux_isolation_2 .travaux_text,
#travaux_isolation #travaux_isolation_4 .travaux_text {
    padding-right: 59px;
    padding-left: 4px;
}
#travaux_isolation a {
    position: relative;
    left: 7px;
    font-family: 'Avenir Black';
    font-size: 21px;
    color: var(--white);
    background: var(--color-main-green);
    text-decoration: none;
    padding: 9px 15px;
    float: right;
    border: 1px solid var(--white);
}
#travaux_isolation a:hover,
#travaux_isolation a:active {
    background: var(--color-main-blue);
}
#travaux_isolation #travaux_isolation_1 a {
    top: -32px;
}
body.multicolor #travaux_isolation_1 {
    background: var(--color-bg-dark-blue);
}
body.multicolor #travaux_isolation_2 {
    background: var(--color-bg-dark-red);
}
body.multicolor #travaux_isolation_3 {
    background: var(--color-bg-dark-brown);
}
body.multicolor #travaux_isolation_4 {
    background: var(--color-bg-dark-grey);
}
body.monocolor #travaux_isolation_1,
body.monocolor #travaux_isolation_3 {
    background: var(--color-bg-monocolor-light);
}
body.monocolor #travaux_isolation_2,
body.monocolor #travaux_isolation_4 {
    background: var(--color-bg-monocolor-dark);
}

/* Footer > logos */

#footer_logos {
    padding: 88px 0px;
}
#footer_logos ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#footer_logos li {
    list-style: none;
    height: 120px;
}
#footer_logos li img {
    height: 100%;
    width: auto;
}

/* Footer > legals */

#footer_legals {
    font-family: 'Avenir Light';
    font-size: 24px;
    line-height: 28px;
    color: var(--white);
    background: var(--color-bg-footer-green);
    padding: 48px 0px 51px 0px;
    text-align: center;
}
#footer_legals .container {
    padding: 0px;
}

/* Footer > copyright */

#footer_copyright {
    height: 125px;
    line-height: 125px;
    background: var(--color-main-blue);
    color: var(--white);
    text-align: center;
    font-family: 'Avenir Medium';
    font-size: 24px;
    letter-spacing: 0.6px;
}
#footer_copyright a {
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid var(--white);
}
#footer_copyright a:hover,
#footer_copyright a:active {
    color: var(--color-bg-footer-green);
    border-color: var(--color-bg-footer-green);
}