/***** Created by : KHAI-WAY / PMB *********************/



body {font-family:'Roboto', sans-serif;}

/***********************************************************HEADER LOGO *******************************************/
header {padding:10px 0; }
header img {width:80%;}

.responsive {display:none;}
.desktop {display:block;}

.devenir {color:#001830; font-weight: bold;font-size:3.1em;line-height: 1;}
.devenir span {color:#f88808;font-size:0.53em;font-weight:300;}

/*********************************************************** OFFRE *******************************************/
section.offre {
    padding:0px 0 20px 0; 
    background-image: url(/assets/sowink/img/bgd.jpg); background-size: cover;background-position: center top; background-repeat: no-repeat;
    min-height: 700px;
    position:relative;}
section.offre .accroche {margin-top:50px;}
section.offre .accroche h1 {font-size:32px;color:#353740;font-weight: 300;margin-bottom: 0px; font-family: 'montserrat', sans-serif;line-height: 1.2; margin-top: 5px;padding: 0 10px}
section.offre .accroche p { font-size:30px;color:#f88808;line-height: 1.2;padding: 10px;}
section.offre .accroche span{font-weight: bold;color:#f88808;}
section.offre .accroche .gras{font-size: 45px;}


/******************************************* FORMULAIRE *************************************************************/
.right-form{background-color:#fff;margin-top: 50px;}
.form {padding:20px;}
.title-form {padding:10px;text-align: center;font-size:15px;line-height:1.2;background-color: #3e3d40; color: #ffffff}
.title-form span {font-size:1.2em;}
.title-form .filet {width:80px;margin-top:10px;border-top:3px solid #a28829;text-align: center;}
.btn-default, .form-control {background:#fff;border-radius:0px;border:none;border-bottom:1px solid #3e3d40;-webkit-box-shadow: none;box-shadow: none;}
.form-control::placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder {color:#000;}
#optin1{display: inline-block;width: 5%}
#ui-datepicker-div{ background-color: #fff; border: 1px solid #000; width: 260px;text-align: center;padding: 15px;}
.ui-datepicker-title{padding: 8px}
.ui-icon{padding: 15px}
.ui-datepicker-month, .ui-datepicker-year{width: 60px; height: 30px}
th, td{padding: 8px}
.label {color:#000; font-size: 0.9em;font-weight:300; white-space: normal;vertical-align: super;line-height:1;}

.btn-participer {
    width:100%;padding:20px 0;
    background: rgb(245,193,53);background: linear-gradient(0deg, rgba(245,193,53,1) 0%, rgba(248,136,8,1) 100%);
    color:#fff;font-size:1.1em;font-weight:700;line-height:1;
    border:none;border-radius: 0; text-transform: uppercase}

.name, .cp{padding-right: 5px}
.lastname, .town{padding-left: 5px}
.adresseH{margin-bottom: 0}
input[type="radio"], input[type="checkbox"]{
    width: 5%;margin: 0;position: absolute
}
.custom-control-label{font-weight: 100;font-size: 11px; float: right; width: 90%}

/************************************************************* SECTION **********************************/
.line {padding:50px 0; margin-bottom: 50px}
.line .intro{padding: 0 0 60px 0;font-size:18px; color: #3e3d40; line-height:1.4;}
h2 {margin-top:0;font-size:1.80em;font-weight:400;text-transform: uppercase;}
h2 span {color:#f88808;font-weight:900;}
.line .bloc {margin-bottom:60px;min-height:260px;}
.line .bloc img {width:100%;}
.line .btn-bottom {text-align: left;margin-top: 30px;margin-bottom: 10px}
.line .btn-bottom .btn-participer2 {width:60%;padding:20px;text-transform:uppercase;background-color: #4ec5f6;color:#fff;font-size:1.25em;font-weight:700;line-height:1;border:none;border-radius:0;}

/********************************************************* FOOTER ****************************************/
footer {padding:20px 0;background-color: #f7f7f7;color:#000;}
footer .ml {font-size:0.85em;font-weight:300;text-align: justify;}

/********************************************************* RESPONSIVE ****************************************/

@media (max-width: 1199px){
    section.offre .accroche h1{ font-size: 32px}
    section.offre .accroche p{ font-size: 25px}
    .btn-participer{font-size: 1em}
    section.offre .accroche .gras{font-size: 40px;}
}

@media (max-width: 990px) {
    .responsive {display:block;}
    .responsive img {width:100%;}

    .desktop, .picture {display:none;}
    .line {
        padding: 30px 20px;
        margin-bottom: 50px;
    }
    .line .bloc {margin-bottom:45px;min-height: fit-content;text-align: center;}
    .line .bloc img {width:80%;}
    section.offre {padding:0; background-image: none; background-color: #e0e7ed}
    .logo{text-align: center;}
    header .devenir{display: none}
    .right-form{margin-top: 0;}
    .formulaire, .responsive{padding: 0;}
    header img{width: 30%}
    #optin1{width: 3%}
    .btn-participer{font-size: 1.4em}
    .line .btn-bottom .btn-participer2 {
        width: 100%;
        padding: 15px;
    }
    .name, .cp{padding-right: 15px}
    .lastname, .town{padding-left: 15px}
    input[type="radio"], input[type="checkbox"]{width: 2%;top:-10px}
    .custom-control-label{width: 95%; padding-bottom: 10px}
    section.offre{min-height: 0}
}



@media (max-width: 973px){




}

@media (max-width: 600px) {
    .line .btn-bottom .btn-participer2 {width:100%;}
    input[type="radio"], input[type="checkbox"]{width: 3%;}
}