@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700');
@font-face { font-family: 'vw_headbold'; src: url('../fonts/vwhead-bold-webfont.woff2') format('woff2'), url('../fonts/vwhead-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

*{ margin:0; padding:0; border:none; box-sizing:border-box; }
body{background-color:#f3f5f6; font-family: 'Montserrat', sans-serif;  }

h1{ font-size:40px; font-family: 'Montserrat', sans-serif;  font-weight:600 }
section .wrapperTitle{ text-align:center; margin-bottom:5% }
section  .wrapperTitle p{ color:#3a3a3a; font-size:14px; font-weight:300  }

section{ height:100vh; padding:5% 7%;  }

.btn{ background-color:#4198d4; color:#fff;  display:inline-block; text-decoration:none; padding:15px 70px; border-radius:5px   }

.wrapperChoices{ text-align:center; margin-bottom: 5%; }
#choiceDetails .wrapperChoices{ text-align:left;}
.wrapperChoices .choice{display:inline-block; margin: 0 2%; width: 28%; cursor:pointer }

.wrapperChoices .choice h2{ margin-bottom:20px; font-weight: 300; }

 .wrapperChoices .choice .pict{ border-radius:5px; overflow:hidden; width:100%;  }
 .wrapperChoices .choice .pict img{  }
 .wrapperChoices .choice:hover .hover,
 .wrapperChoices .choice.selected .hover{ opacity:0.8; }
  
 .wrapperChoices .choice .hover{ position:absolute; top:0; left:0; width:100%; height:100%; background:#4198d4 url(../_img/checked.png) no-repeat center center; opacity:0;  }
 .wrapperChoices .choice .pict{ position:relative; }
 .wrapperChoices .choice .shadow{} 
 .wrapperChoices .choice .shadow img{ display:block; width:100%; margin-top:20px;  }
 
.wrapperChoices h2{font-size:18px; font-weight: 300;}

.wrapperChoices  ul li{ cursor:pointer; display:inline-block; width:30%; text-align:left; margin-bottom: 2%; }
.wrapperChoices  ul li .pict{ display:inline-block; vertical-align:middle; margin-right: 5%; width: 30%; position:relative; border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.2); border:3px solid #fff; overflow: hidden; }
.wrapperChoices  ul li h2{ display:inline-block; vertical-align:middle; width: 63%; }
.wrapperChoices  ul li:hover .hover,
.wrapperChoices  ul li.selected .hover{ opacity:0.8;  }
.wrapperChoices  ul li .hover{ position:absolute; top:0; left:0; width:100%; height:100%; background:#4198d4 url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_checkedSmall.png) no-repeat center center; opacity:0;  }
 .wrapperChoices #inputForOtherJob{ border: 1px solid #929394;

border-radius: 10px 0 0 10px;
font-size: 18px;
font-weight: 300;
display: inline-block;
width: 60%;
float: left;
padding: 15px;
border-right: 0; }
.wrapperChoices #inputForOtherJob.error{ border-color:red; }
.validateOther{
border: 1px solid #4198d4;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(146, 147, 148);
border-radius: 0 10px 10px 0;
font-size: 18px;
font-weight: 300;
display: inline-block;
width: 39%;

padding: 15px;
border-left: 0;

background-color: #4198d4;
color: #fff;
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 21px;



}

.wrapperSubmit{ text-align:center; }

.pict img{ display:block; width:100% }

nav{ position:absolute; bottom: 30px; left:30px; text-align:right; display:none  }
nav ul{ display:inline-block; list-style:none;  }
nav ul li{ display:inline-block; width:20px; opacity:0.8;  height:20px; border-radius:50%; border:1px solid #c8cacb; text-align:center; color:#cbcdce ; margin: 0 2px; font-size:10px; line-height:18px; }
nav ul li.done{ cursor:pointer; opacity:1; }
nav ul li.active{ background-color:#1e1f20; color:#fff; border:1px solid #000000; }

#choiceProfession{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_bgCars.png) no-repeat center center; }

.vehicle1{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/bgCar1.png) no-repeat right top; }
.vehicle2{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_bgCar2.png) no-repeat right top; }
.vehicle3{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_bgCar3.png) no-repeat right top; }
.noBg{ background:none!important}


.choiceLine{ width:41%; display:inline-block;  border-bottom:1px solid #e0e0e0;  padding:20px; text-align: left; margin: 0 4%;}
.vehicle2 .choiceLine{ margin: 0 29%; }
.choiceLine .label{ display: inline-block; width: 30%; text-align: center; padding-top: 40px; }

.choiceLine .label.icoTruck{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_icoTruck2.png) no-repeat center top; }
.choiceLine .label.icoTruck3{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_icoTruck3.png) no-repeat center top; }

.choiceLine .label.icoPeople{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_icoPeople.png) no-repeat center top; }
.choiceLine .label.icoFolder{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_icoFolder.png) no-repeat center top; }
.choiceLine .label.icoWeight{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_icoWeight.png) no-repeat center top; }
.choiceLine .label.icoLink{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_icoLink.png) no-repeat center top; }

.choiceLine  .selection{ display: inline-block; width: 60%; margin-left: 3%; }
.choiceLine  .selection .val{ font-size:13px; }

.choiceLine .selection .ui-slider {
    width: 75%;
    margin-right: 5%;
 display:inline-block
}

#resultPage{ background-color:#003c65; overflow: hidden; }
#resultPage aside{  background-color:#003c65; color:#fff; width:30%; float:left; height:100vh; overflow-y:scroll   }
#resultPage aside .inside{ padding: 10% ;  }
#resultPage aside .wrapperTitle{ margin-bottom:30px; text-align:center; }
#resultPage aside .wrapperTitle h1{ font-size:35px; margin-bottom:10px;  }
#resultPage aside .wrapperTitle h3{ font-size:12px; font-weight:400 }
#resultPage aside select{  width: 100%;
border: 1px solid #1f5377;
background: transparent;
margin: 0;
padding: 17px;
border-radius: 5px;
color: #fff;
font-size: 12px; }

.tab{ border-bottom:1px solid #144b71; }
.tab .content{ background-color:#002f4f; padding: 50px 11% 30px 11%; display:none; text-align: center; }
.tab.open .content{ display:block; }
.tab  .openClose{ padding:15px 60px; cursor:pointer;  }
.tab  .openClose h4{ font-size:12px; font-weight:normal; font-weight:400; background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_plus.png) no-repeat right center;  }
.tab.open  .openClose h4{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_moins.png) no-repeat right center; }
.undersel{ background :  url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_select.png) no-repeat right 20px center; margin-bottom:10px;  border-radius: 5px; position:relative  }
select{  -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight:400  }

.tab .content .selection  .ui-slider { width: 75%; margin-right: 5%; display: inline-block; }
.tab .content .selection .val{ color:#4198d4; font-size:12px;  }


#resultPage .results{ float:left; width:70%; text-align:center; padding-top:2% ;height: 100vh;
overflow-y: scroll; background-color: #f3f5f6 }
article{ background-color:#fff; border-radius:5px;  border:1px solid #eeeeee; width:30%; display:inline-block; margin:0 1% 2% 1%; vertical-align:top }
article .pict{ width:100%; }
article .pict img{ width:100%; display:block;  }
article ul{ list-style:none; margin-bottom:30px; min-height: 60px; }
article ul li{ font-size:10px; text-align:left; margin-bottom:5px;  list-style: inside; }
article .btn{ margin-bottom:20px; }

article .wrapperTitle{ border-bottom:1px solid #f5f5f5; padding:10px 0 20px 0; margin-bottom:20px;  }
article .wrapperTitle h2{ font-size: 18px;
margin-bottom: 15px;
font-weight: bold;
min-height: 30px;
line-height: 18px; }
article .wrapperTitle h3{ font-size:16px; font-weight:300; }
article .wrapperTitle h4{ font-size:12px; font-weight:300; }
article .wrapperTitle h4 .info{  z-index:10; cursor:pointer;  }
article .wrapperTitle h4 .info .aboutRenting{ }
.overlay{
 z-index: 20;
 position: fixed;
 background-color: #fff;
top: 10%;
left: 50%;
padding: 30px;
border: 1px solid #ccc;
border-radius: 20px;
text-align: left;
display: none;
width: 30%;
margin-left: -15%;
}
.openFin .overlay{ width:60%; margin-left: -30%; }
article .active .overlay{ display:block;  }

.close{ display:block; position:absolute; top:10px; right:10px; cursor:pointer; z-index:3000; background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_close.png) no-repeat center center; font-size:0; line-height:0; width:15px; height:15px;    }
.active + b.overlayBg{ position : fixed; background:rgba(0,0,0,0.53); width:100%; height:100vh; top:0; left:0; z-index:1 }

.active  b.overlayBg{ position : fixed; background:rgba(0,0,0,0.53); width:100%; height:100vh; top:0; left:0; z-index:1 }

article .wrapperTitle h4 .info img{ }

.finMonth{ font-size:16px; font-weight:600; margin-bottom:15px}
.finDisclaimer{ font-size:28px; font-weight:100; margin-bottom:15px; line-height:28px;  }
.finCond1{ font-size:11px; font-weight:400; margin-bottom:15px; line-height: 17px;}
.finCond2{ font-size:9px; color:#414141; font-weight:400; line-height: 18px;}

article .wrapperTitle h4 strong, 
article .wrapperTitle h3 strong{ font-weight:600; }
article .wrapperTitle h5{ font-size:12px; font-weight:400; display:none; }
article .wrapperTitle h5 a{ color:#4198d4}

span.perso{ display:none; }
span.pro{ display:block; }

.private span.perso{ display:block; }
.private span.pro{ display:none; }

.private article .wrapperTitle h5{ display:block; }
.private article .wrapperTitle h4{ display:none; }

article .content{ padding:0 10% 10% 10%; text-align:center;  }
article .btn{ padding:15px; width:100%;  }
article .link{ margin-bottom:5px;  }
article .link a{ color:#000; font-size:12px;  }

.disclaimer{ text-align:center; font-weight:100; padding:20px; background-color:#fff; overflow: hidden;  }
.disclaimer p{font-size:41px; font-weight:100 ; opacity:0.3; color:#434343; }
.private .disclaimer{ display:block; }

#resultPage,
#choiceProfession, 
#choiceType,
#choiceDetails{  }

/* pour tests */
#hiddenForm{ position:fixed; top:0; left: 0; background: rgba(218,108,110,0.30); }
#hiddenForm input[type="text"]{ padding:10px; margin:10px; }

.min, .max{
 background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/vwms_nbr_bg.png) no-repeat center center;
    width: 60px;
    height: 30px;
    display: block;
    position: absolute;
    bottom: 18px;
    text-align: center;
    font-size: 13px;
    line-height: 23px;
    margin-left: -26px;
 }
.min.bigP, .max.bigP{ background: url(http://image.mail.dieteren.be/lib/fe97137375640d7c71/m/1/bignbr_bg.png) no-repeat center center;  width: 78px; margin-left: -34px;}

.proView{ display:block; }
.privateView{ display:none; }
.private .proView{ display:none; }
.private .privateView{ display:block; }
@media only screen and (max-width : 900px) {
 section{ height:auto; }
 #hiddenForm{ display:none; }
 .wrapperChoices .choice{ width:70%; max-width: 400px; margin-bottom: 20px;}
 .wrapperChoices ul li{ width:40%; }
 #choiceDetails{ background:none; }
 .choiceLine{ width:100%; }
 #resultPage aside, #resultPage .results{ height: auto!important; overflow: visible; width:100%}
 #resultPage .results{ width:100%; }
 article{ width:80%; margin-bottom:10px;  }
 .disclaimer p{ line-height:29px; font-size:31px; }
 .choiceLine .selection {
    width: 100%;
    margin-left: 0;
    margin-top: 45px;
}
.choiceLine .label{width: 70%; }
nav{
position: relative;
margin: 20px;
text-align: center;

clear: both;
overflow: hidden;
bottom: 0;
left: 0;
}
.vehicle2 .choiceLine{ margin:0}}
@media only screen and (max-width : 700px) {
.wrapperChoices ul li{ width:100%; }
}

.noRes{ padding: 20px 50px;}
.selectPropulsion option{color:#000;}
.selectGearbox option{color:#000;}

.logoVW{ position:absolute; top:10px; left:10px;display: block;
    width: 70px; }
.logoVW img{ display:block; width:100%; }