/* 
    Created on : 09/03/21
    Author     : Piermat
*/

body{
    line-height: 1;
    font-family: 'Nobel', sans-serif;
    font-size:1em;
}
h1 {font-size:60px;border-top: 4px solid #000;padding-top: 10px}
h2 {border-bottom: 4px solid #000;padding-bottom: 10px}
p{
    font-size: 18px !important;
    text-align: left !important;
        line-height: initial;
}
.desktop {display:block;}
.responsive {display:none;}
.aright {text-align:right;}
.aleft {text-align:left;}
.acenter {text-align:center;}

#recap {text-align:left;}
#recap .merci {background-color:rgba(255,255,255,0.75);padding:20px;font-size: 1.0em;margin-top: 0px;color:#000000;letter-spacing: 0;}
#recap .merci span {font-weight:300;}
#recap .main {min-height:700px!important;}

/****** HEADER *******/
.logo {padding:15px 0px;}
.logo img{width:200px;}
.baseline {padding:25px 20px;text-align: right;color:#fff;font-size:1.1em;text-transform: uppercase;}


/****** MAIN *******/
.main {
    background-image: url('/assets/lexus/2023-06-uxlexus250hmc/img/bgd.jpg');
    background-repeat:no-repeat;
    background-position: top center;
    background-size: cover;
    margin-bottom: 25px;
    min-height:640px;
}
.main .accroche {margin-top:0px; padding-right: 100px;}
.main .accroche img{width:65%;}



/****** FORMULAIRE *******/
.form-content{margin:0px 0 25px 0;padding:20px 10px 25px 10px;background-color:#fff;}
.bloc-formulaire .form-title {font-size:1.2em;margin-bottom:15px;padding:0 20px;text-align: center;font-weight:400;color:#000;}

/** style input **/
.bloc-formulaire button.btn-default, .bloc-formulaire .form-control, .bloc-formulaire .custom-select {background-color: #ffffff;border:1px solid #dee0e6;border-radius:0;}
.bloc-formulaire button {background-color: #20365c;font-size:1.1em;font-weight:800;text-transform:uppercase;border-radius:8px;width:100%;color:#fff;padding:12px 0;}
.bloc-formulaire button#submit {font-family: 'Nobel', helvetica, sans-serif;width:100%;background-color: #002c5f;border-radius:0px;border:none;padding:15px;color:#fff;font-size:1.4em;font-weight:bold;}
.bloc-formulaire  button img{padding-bottom: 7px;width:40px;}
.btn:hover {
    color: #fff;
    text-decoration: none;
}
.form-control::placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder {color:#072c3e;font-weight:400;}
.input-group-addon {background-color:#eaeef2;border: none;}
.auto_adresse .form-group {margin-bottom:0;}


/****** CONTENT *******/
.left-content {margin-top:10px;font-size:2.5em;letter-spacing: 0.05em;color:#000000;}
.content {padding:15px 0;}
.reassurance { color: #000; margin-top: 100px;}
.reassurance h4{margin-top:0;text-transform: uppercase;font-size: 22px;}
.reassurance.content img {width:100%;margin-bottom:40px;}
.txt {padding:0 20px 20px 20px;font-weight:300;font-size:1.0em;line-height:1.4;margin-bottom:25px;text-align: left;}
.txt h2 {display: inline-block;padding:20px 50px;font-size:1.2em;font-weight:400;text-transform: uppercase;}
.txt span {text-transform: lowercase;}
.filet {margin-top:12px;position:relative;left:0;border-top:1px solid #bcbfc5; width:50px;text-align: center;}
p {
    margin-top: 0.4rem;
    margin-bottom: 1rem;
    text-align: justify;
    font-weight: 300;
    font-size:1em;
}
.intro {font-size:1.4em;font-weight:normal;line-height: 1.4;}
.btn-bottom {margin-top:10px;}
.btn-bottom button{background-color: #20365c;padding:15px 30px;color:#fff;font-size:1rem;border:none;text-transform:uppercase;border-radius:8px;width:300px;}
.btn-bottom img{width:40px!important;padding-bottom:4px;margin-bottom:0!important;}



/****** FOOTER *******/
footer {padding:40px 0;background-color: #ebeff5;margin-top: 60px;}
footer .ml {margin:20px 0 20px 0;font-size:0.85em;line-height:1.2;font-weight:300;text-align: justify;}
footer .ml span {color:#787878;}
.img-footer {padding: 25px 0;}
.txt-footer {text-align: center;display: flex; align-items: center;justify-content: center;}

/****** REMERCIEMENT *******/
.left-content .remerciement {margin-top:25px;padding:20px;background-color:rgba(0,44,95,0.7);font-size:1.5em;color:#fff;line-height:1.2;}
.left-content .remerciement span{font-size:1.4em;font-weight:bold;}

@media (min-width: 1750px) {
    .main {
        min-height:780px;
    }
}

@media (min-width: 1548px) {
    #recap .main {background-position: bottom center;}
}
@media (max-width: 1200px) {
    .bloc1, .bloc2 {padding-top:150px;}
    .lexus-vid {width: 100% !important; height: auto !important}
    h1 {font-size: 48px !important}
}
@media (max-width: 991px) {
    .reassurance .img_res{
        margin-top: 30px;
    }
    .desktop {display:none;}
    .responsive {display:block;}
    .left-content {margin-top: 0;}
    .bloc1, .bloc2 {
        padding: 0 30px;
        padding-top: 100px;
    }
    .btn-bottom button {width: 100%;}
    .btn-bottom img {width: 35px;padding-bottom: 4px;}
    .txt {padding: 0 10px 25px 10px;}
    .txt h2 {display: inline-block;padding:20px 20px;font-size:1.2em;font-weight:400;text-transform: uppercase;}
    .bloc-formulaire {margin-top: 0;}
    .main {background-image: none;background-color:#282420;}
    #recap .main {background-image : url('/assets/lexus/2023-06-uxlexus250hmc/img/bgd.jpg')!important; background-repeat:no-repeat;background-position: 33%;background-size: cover;}
    .main .accroche {margin-top: 0;}
    .accroche.responsive img {width: 100%;}
    .lexus-vid {width: 100% !important; height: auto !important;}
    .main .accroche {padding-right: 0 !important;}
    
    .reassurance .content img{
        margin-top: 30px;
    }
    
    footer img{
        width: 100%;
        max-width: 204px;
    }
}

@media (max-width: 768px) {
    .logo {text-align: center;}
    .logo img {
        width: 200px;
    }
    .baseline {
        padding: 0 5px 15px 0;
        text-align: center;
    }
    .connect .container {
        padding:35px 0 55px 0;
        background-image: url('/assets/lexus/2023-06-uxlexus250hmc/img/bgd-3.jpg'); background-repeat:no-repeat;background-position: center center;background-size: cover;
    }
    .bloc1, .bloc2 {
        padding: 0 30px;
        padding-top: 160px;
    }
    .reassurance {text-align: center !important}
    .img-responsive {width: 100% !important}
    .main {margin-bottom: 20px !important}
    h5 {margin-top: 25px !important}
    .video {width: 100% !important; height: auto !important;margin-top:25px;}
    .main .accroche {padding-right: 0 !important;}
    .txt-footer {text-align: center !important}
    footer {text-align: center !important}
    p {
        margin-bottom: 4rem;
    }
    .ml {padding:0 20px;}
}
@media (max-width: 600px) {
    .left-content, .bloc-formulaire {padding-right:0;padding-left:0;}
}


.erreur{font-size:11px}

.mentions {
    font-size: 12px;
    line-height: 1em;
    text-align: justify;
    font-weight: 300;
    color:#2e2e2e;
    padding:10px 20px 10px 20px;
}