@charset "UTF-8";

/* GRID FORM */

.allGroup{position:relative}
.Fgroup{width:48%;float:left;margin:0 4% 15px 0;}.Fgroup:after{clear:both}
.Fgroup{margin:0 4% 25px 0}
.Fgroup:nth-child(2n+0){margin-right:0}

.quart, .half, .troisquart, .third{float:left;margin:0 4% 0 0}
.quart{width:22%}
.half{width:48%}
.third{width:30.66%;}
.troisquart{width:74%}
.last{margin-right:0}


/* INPUT LABEL */

label, input, select, button, textarea{font-size:14px;display:block;font-family: 'Open Sans', sans-serif;margin-bottom:10px}
input, select, textarea{border:none;background:#f1f1f1;padding:5px 20px;width:100%;border-radius: 0px}

textarea{border:0;border:none;padding:10px;width:100%;margin-bottom:25px;min-height:100px;}
input[type=submit]{background:none;border:0;padding:15px 30px;background:#FDD000;border-radius:0;color:#000;display:block;margin:40px auto -20px auto;width:auto;font-family: 'Open Sans', serif;font-weight:700}
input[type=submit]:hover{background:#fff}

select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f1f1f1 url(../img/form/down-form.svg) no-repeat right 10px center / 15px;}
select option{margin:5px 0;}
select option:disabled {color:#aaa}


label.checkbox{background-image:url(../img/form/checkbox.svg);}
label.radio {background-image:url(../img/form/radio-button.svg);}
label.checkbox, label.radio {margin:0px 0px 10px 0;position:relative;pointer-events:all;left:auto;top:auto;transition:none; -moz-transition:none; -webkit-transition:none;}

input[type=checkbox], input[type=radio]{position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=checkbox] + label.checkbox, input[type=radio] + label.radio{padding-left:35px;height:25px; display:block;line-height:1;background-repeat:no-repeat;background-position: 0 0;background-size:25px;vertical-align:middle;cursor:pointer;font-size:16px;color:#555;}
input[type=checkbox]:checked + label.checkbox, input[type=radio]:checked + label.radio {background-position: 0 -25px;}

form .section{background:#000;padding:30px}

/* VALIDATION */

input.valid, textarea.valid{background:#f1f1f1  url(../img/form/input-valid.png) no-repeat center right ;}
input.error, textarea.error{background: #f1f1f1  url(../img/form/input-invalid.png) no-repeat center right ;}

input[type=number].valid{background: #f1f1f1  url(../img/form/input-valid.png) no-repeat center right 20px ;}
input[type=number].error{background: #f1f1f1  url(../img/form/input-invalid.png) no-repeat center right 20px ;}

#name input{background:#fff url(../img/form/nom.svg) no-repeat left 10px center / 20px ;padding-left:40px}
#phone input{background:#fff url(../img/form/phone.svg) no-repeat left 10px center / 20px ;padding-left:40px}
#email input{background:#fff url(../img/form/courriel.svg) no-repeat left 10px center / 20px ;padding-left:40px}
#ville input{background:#fff url(../img/form/ville.svg) no-repeat left 10px center / 20px ;padding-left:40px}

#messages textarea{background:#fff url(../img/form/message.svg) no-repeat left 10px top 10px / 20px ;padding-left:40px;height:160px;margin-top:20px}

#submit input{display:block;position:absolute;bottom:20px;color:#fff;font-weight:700;width:120px;margin:0 auto;text-align:center;-webkit-transition: all 0.35s; -webkit-transform : all 0.35s ;}
#submit input:hover{background:#fff}


#name input.valid{background:#fff url(../img/form/nom-valid.svg) no-repeat left 10px center / 20px ;}
#email input.valid{background:#fff url(../img/form/courriel-valid.svg) no-repeat left 10px center / 20px ;}
#phone input.valid{background:#fff url(../img/form/phone-valid.svg) no-repeat left 10px center / 20px ;}
#ville input.valid{background:#fff url(../img/form/ville-valid.svg) no-repeat left 10px center / 20px ;}

#facade input.valid{background:#fff url(../img/form/facade-valid.svg) no-repeat left 10px center / 20px ;padding-left:40px}
#profon input.valid{background:#fff url(../img/form/profondeur-valid.svg) no-repeat left 10px center / 20px ;padding-left:40px}
#superficie input.valid{background:#fff url(../img/form/superficie-valid.svg) no-repeat left 10px center / 20px ;padding-left:40px}



#messages textarea.valid{background:#fff url(../img/form/message-valid.svg) no-repeat left 10px top 10px / 20px;}


#name input.error{background:#fff url(../img/form/nom-error.svg) no-repeat left 10px center / 20px ;}
#email input.error{background:#fff url(../img/form/courriel-error.svg) no-repeat left 10px center / 20px ;}
#phone input.error{background:#fff url(../img/form/phone-error.svg) no-repeat left 10px center / 20px ;}
#ville input.error{background:#fff url(../img/form/ville-error.svg) no-repeat left 10px center / 20px ;}

#facade input.error{background:#fff url(../img/form/facade-error.svg) no-repeat left 10px center / 20px ;padding-left:40px}
#profon input.error{background:#fff url(../img/form/profondeur-error.svg) no-repeat left 10px center / 20px ;padding-left:40px}
#superficie input.error{background:#fff url(../img/form/superficie-error.svg) no-repeat left 10px center / 20px ;padding-left:40px}

#messages textarea.error{background:#fff url(../img/form/message-error.svg) no-repeat left 10px top 10px / 20px;}

.alert-success p{color:#fff;}


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

.Fgroup{width:100%;display:block;margin:0 0 35px 0;}

form .col.span_6_of_12{margin-bottom:0}

}


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

label, input, select, button, textarea, input[type=checkbox] + label.checkbox, input[type=radio] + label.radio{font-size:13px;}

}