/*Interprétation HTML5 pour IE8*/
header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog { display: block; float: left; position: relative;}

*      { margin: 0; padding: 0; }
html, body { width:100%; height:100%; }
body   { background-color: #ffffff; font-size: 15px; font-family:Calibri, Helvetica, Arial; font-weight:normal; color: #333333; }

hr		{ position:relative; float:left; border:none; height:1px; width:100%; margin-bottom:1%;  border-bottom:1px dotted #00a79f; }


.fa-xs { font-size: 23px; }

.Preheader { background-color:#000000; display:block; float:left; width:100%;  position:relative; }
.Preheader .Inside { display:block; position:relative; width:100%; max-width:1200px;  margin:0 0 0 50%;   transform: translate(-50%, 0%); }
.Preheader .Inside ul li { display:block; float:right; margin-left:20px; padding:10px 0; color:#ffffff; }
.Preheader .Inside ul li a,
.Preheader .Inside ul li a:link  { color: #ffffff; text-decoration: none; }
.Preheader .Inside ul li a:hover { color: #00a79f; text-decoration: none; }

header { background-color:#170f27; display:block; float:left; width:100%;  position:relative; }
header .Inside { display:block; position:relative; width:100%; max-width:1200px;  margin:0 0 0 50%;   transform: translate(-50%, 0%); }
header .Inside .logo  { display:block; float:left; width:15%; margin:1% 0; }
header .Inside .pub img  { display:block; float:right; height:85px; }

@media only screen and (max-width: 900px) {
header .Inside .logo  { width:42%; margin:1% 1%; }
}
  
  
footer { background-color:#00a79f; display:block; float:left; width:100%;  position:relative; height:150px; z-index:9; }
footer.small { height:50px; }
footer .Inside { display:block; position:relative; width:100%; max-width:1200px;  margin:20px 0 0 50%;   transform: translate(-50%, 0%); color:#ffffff; text-align:center; }
footer .Inside a,
footer .Inside a:link  { color: #ffffff; text-decoration: none; }
footer .Inside a:hover { color: #ffffff; text-decoration: underline; }


.DivConfigurateur { clear:both; display:block; float:left; position:relative; width:100%; max-width:1200px;  margin:4% 0 0 50%;   transform: translate(-50%, 0%); }
#DivConfigurateurSuite { display:block; position:relative; width:100%; max-width:1200px;  margin:0 0 0 50%;   transform: translate(-50%, 0%); opacity:0.2; }
.DivInside { display:block; float:left; width:100%; position:relative }

@media only screen and (max-width: 900px) {
.DivConfigurateur  { width: 96%; max-width: inherit; transform:inherit; margin:2%; }
}

.row { margin-bottom:2%;  display:block; float:left; width:100%;}
.row h2 { display:block; margin-bottom:20px; text-align: left; color: #00a79f; text-transform:uppercase;  font-size: 30px; line-height:1.1; margin-top:50px; }
.row h2 span {  width: 45px; height: 45px; line-height: 45px; font-size: 37px; color: #fff; text-align: center; background: #00a79f; display:block; float:left; font-weight:bold; margin-right: 15px; margin-bottom: 25px; margin-top:-5px; }
.row p { margin-top:20px; margin-bottom:20px; clear:both; }

.PrixToiture { opacity:0;  transition: 500ms all; display:block; padding:5px; position:absolute; top:0; right:0; background-color:#00a79f; color:#fff; font-weight:bold; font-size:18px; z-index:2; }
.PrixBardage { opacity:0;  transition: 500ms all; display:block; padding:5px; position:absolute; top:0; right:0; background-color:#00a79f; color:#fff; font-weight:bold; font-size:18px; z-index:2; }
.PrixFinitions { opacity:0;  transition: 500ms all; display:block; padding:5px; position:absolute; top:0; right:0; background-color:#00a79f; color:#fff; font-weight:bold; font-size:18px; z-index:2; }
.PrixAnnexe { transition: 500ms all; display:block; padding:5px; position:absolute; top:0; right:0; background-color:#00a79f; color:#fff; font-weight:bold; font-size:18px; z-index:2; }

#DivConfigurateurSuite.opacity,
.opacity { opacity:1; }


.AffichagePrix { display:block; position:fixed; bottom:0; left:0; width:100%; height:80px; background-color:#000000; z-index:10; }
.AffichagePrixInside { display:block; position:relative;  width:100%; max-width:1200px; margin:0 0 0 50%;   transform: translate(-50%, 0%); }
#Total_TTC { display:block; float:left; width:50%; font-size:30px; font-weight:900; color:#ffffff; margin:23px 0; }
#SubmitForm { display:block; float:left; width:50%; margin:19px 0; }
@media only screen and (max-width: 900px) {
.AffichagePrix {  height:150px; }
	#Total_TTC {font-size:20px; width:96%;  margin:23px 2%;  }
	#SubmitForm { width:96%;  margin:0 2%; }
}

.form-group { position:relative; display:block; float:left; width:100%; }
.input-hidden { position: absolute; left: -9999px; display: none; }
input[type=radio] + label {  color:#000000; cursor:pointer; border: 4px solid #dcdcdc; transition: 500ms all; background-color:#dcdcdc; width: -moz-calc(100% - 8px); width: -webkit-calc(100% - 8px); width: calc(100% - 8px);}
input[type=radio] + label p { clear:both; text-align:center; font-size:20px; font-weight:bold; padding-top:10px; margin-bottom:10px; text-transform:uppercase; }
input[type=radio]:checked + label,
input[type=radio]:hover + label { border: 4px solid #00a79f;  background-color:#00a79f; color:#ffffff; }

p.titre { text-align:center; font-size:20px; font-weight:bold; padding-top:10px; margin-bottom:10px; text-transform:uppercase; }

label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
 width:100%;
}

.PaddingSelectDim { padding-top:93px; } 

.info { padding: 15px; margin-bottom: 20px; border-radius: 4px; text-align:left; font-size:17px; width:100%; }
.infosup { color: #170f27; background-color: #ff9c5a; }
.txtup { display:block; top:-10px; float:left; }

input[type=number],
select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.quantity {
  position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]
{
  -moz-appearance: textfield;
}

.quantity input {
  /*width: 80px;*/
  height: 46px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
}

@media only screen and (max-width: 900px) {
.quantity input { width:95%; }
}


.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 46px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 25px;
  text-align: center;
  color: #333;
  font-size: 18px;
  font-family: Helvetica, sans-serif !important;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-weight:600;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
  line-height: 1.4;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
  line-height: 1.2;
}

#formulaire .buttonSubmit 		 {  float:right; border:none; text-transform:uppercase; width: auto !important; height:45px; cursor: pointer; background-color:#00a79f;  padding: 8px 10px; color: #ffffff; font-size: 15px; letter-spacing:1px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
#formulaire :hover.buttonSubmit { border:none; background-color:#ff9c5a;  color:#000000; }
#formulaire :active.buttonSubmit,
#formulaire :focus.buttonSubmit { border:none;  background-color:#ffffff; color:#000000; }











.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


 /* Modal Header */
.modal-header {
  padding: 20px 20px;
  background-color: #00a79f;
  color: white;
  font-size:25px;
  font-weight:900px;
}

/* Modal Body */
.modal-body { padding: 20px 20px; }

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fff;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
  top:100px;
}

/* The Close Button */
.close {
  color: #ffffff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
} 






.ResumeCommande { display:block; float:left; width:100%; background-color:#eeeeee; border:1px solid #cccccc; }
.ResumeCommandeLeft { display:block; float:left;  width: -moz-calc(70% - 20px); width: -webkit-calc(70% - 20px); width: calc(70% - 20px);  color:#000000; font-size:18px;  padding:5px 10px;  }
.ResumeCommandeRight { display:block; float:left; width: -moz-calc(30% - 20px); width: -webkit-calc(30% - 20px); width: calc(30% - 20px);  color:#000000; font-size:18px; padding:5px 10px; font-weight:bold; text-align:right; }
.ResumeCommandeFull { display:block; float:left;  width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px);  color:#000000; font-size:18px;  padding:5px 10px;  }

h2.TotalCommande { float:left; display:block; margin-top:20px; text-align: left; color: #000000; text-transform:uppercase;  font-size: 30px; line-height:1.1; }
h2.TotalCommande span {  float:left; display:block; font-size: 15px; color: #000000; font-weight:bold;  margin-top:10px; font-style:italic; }



.BlockImg { display:block; float:left; position:relative; width:100%;  }
img.absolute { display:block; position:absolute; top:0; left:0; width:100%; }



/******************************/
/*  FORMULAIRE                */
/******************************/
.validationcontact { font-weight:normal; }

#formulaireB ::-webkit-input-placeholder 	{ font-style: italic; opacity: 1; }
#formulaireB input:-moz-placeholder,
#formulaireB textarea:-moz-placeholder,
#formulaireB input, select 				{ outline: none; }


/* all the input except submit and checkbox */
#formulaireB input:not([type="checkbox"]) 		{ font-size:14px; background-color:transparent; color:#333333; width: 96%; margin-top: 4px; padding: 10px 2% 10px 2%; border:none; border-bottom: 1px solid #cccccc; -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box;   -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
#formulaireB input:not([type="checkbox"]):active,
#formulaireB input:not([type="checkbox"]):focus 	{ border:none; border-bottom: 1px solid #333333; background-color:transparent;  color:#00a79f; } 

#formulaireB input:not([type="checkbox"]) 		{ font-size:14px; background-color:transparent; color:#333333; width: 96%; margin-top: 4px; padding: 10px 2% 10px 2%; border:none; border-bottom: 1px solid #cccccc; -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box;   -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
#formulaireB input:not([type="checkbox"]):active,
#formulaireB input:not([type="checkbox"]):focus 	{ border:none; border-bottom: 1px solid #333333; background-color:transparent;  color:#00a79f; } 

#formulaireB .col_full>input:not([type="checkbox"]) 		{ width: 98%; padding: 10px 1% 10px 1%; }
/* all the textarea */
#formulaireB textarea 		{ font-family:'Open Sans Condensed', Helvetica, Arial; color:#cccccc; font-weight: 300; font-size:14px; background-color:transparent; color:#333333; width: 96%; height:155px; margin-top: 4px; padding: 10px 2% 10px 10px; border:none; border: 1px solid #cccccc; -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box;   -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
#formulaireB textarea:active,
#formulaireB textarea:focus 	{ border: 1px solid #00a79f; background-color:transparent; color:#00a79f;  } 

/* all the select */
#formulaireB select 		{  font-size:14px; background-color:transparent; color:#333333; width: 96%; margin-top: 4px; padding: 10px 2% 8px 2%;  border: 1px solid #cccccc; -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box;   -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
#formulaireB select:active,
#formulaireB select:focus  {  border:none; border-bottom: 1px solid #00a79f; background-color:transparent; color:#00a79f;  } 
#formulaireB select option:first-child		{ color:#757575; font-style: italic; } 
#formulaireB select  { color: #999999; }
#formulaireB select option:first  { color: #999999; }
#formulaireB select option { color: #333333; }
#formulaireB select:not(:checked) { color: #333333; }
#formulaireB select option:first-child,  #formulaireB select option.first { color: #999999; }
#formulaireB select option[selected=selected] { color: #333333; }

/* all the input type radio */
#formulaireB ul li input[type=radio] { position: absolute; visibility: hidden; }
#formulaireB input[type=radio]:checked ~ .check { border: 3px solid #333333; }
#formulaireB input[type=radio]:checked ~ .check::before {  background: #333333; }
#formulaireB input[type=radio]:checked ~ label { color: #333333; }

/* all the input type checkbox */
#formulaireB [type="checkbox"]:not(:checked),
#formulaireB [type="checkbox"]:checked {  position: absolute; left: -9999px; opacity: 0; }
#formulaireB [type="checkbox"]:not(:checked) + label { position: relative; padding-left: 23px; cursor: pointer; color: #333333; padding-top:3px; font-size:14px; }
#formulaireB [type="checkbox"]:checked + label { position: relative; padding-left: 23px; cursor: pointer; color: #333333; padding-top:3px; font-size:14px; }

/* checkbox aspect */
#formulaireB [type="checkbox"]:not(:checked) + label:before,
#formulaireB [type="checkbox"]:checked + label:before  { content: '';  position: absolute; left:0; top: 4px; width: 13px; height: 13px; border: 1px solid #333;  background: transparent; box-shadow: inset 0 0px 0px rgba(0,0,0,.3) }
/* checked mark aspect */
#formulaireB [type="checkbox"]:not(:checked) + label:after,
#formulaireB [type="checkbox"]:checked + label:after  {  content: '✔';  position: absolute;  top: 7px; left: 3px; font-size: 12px; line-height: 0.8;  color: #333333; transition: all .2s; }
#formulaireB [type="checkbox"]:not(:checked) + label:before { border: 1px solid #333333; }
#formulaireB [type="checkbox"]:checked + label:before { border: 1px solid #333333; }
/* checked mark aspect changes */
#formulaireB [type="checkbox"]:not(:checked) + label:after { opacity: 0;  transform: scale(0); }
#formulaireB [type="checkbox"]:checked + label:after {  opacity: 1;  transform: scale(1); }
/* accessibility */
#formulaireB [type="checkbox"]:checked:focus + label:before,
#formulaireB [type="checkbox"]:not(:checked):focus + label:before { border: 1px solid #333333; }

/* all the label */
#formulaireB ul li label { display: block; position: relative; font-weight: 300; font-size: 15px;  padding: 0px 18px 25px 37px; margin: 0px auto; /*height: 30px;*/ z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; }
#formulaireB ul li:hover label { color: #333333; }

#formulaireB ul li label.small { display: block; position: relative; font-weight: 300; font-size: 15px;  padding: 0px 18px 0px 37px; margin: 0px auto; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; }
#formulaireB ul li:hover label.small { color: #333333; }

#formulaireB ul li .check { display: block; position: absolute; border: 3px solid #333333; border-radius: 100%;  height: 13px;  width: 13px;  top: 0px; left: 0px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; }
#formulaireB ul li:hover .check { border: 3px solid #333333; }
#formulaireB ul li .check::before {  display: block; position: absolute; content: ''; border-radius: 100%; height: 5px; width: 5px; top: 4px; left: 4px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; }

/*Submit buttons */
#formulaireB .buttonSubmit 		 {  float:left; border:none; text-transform:uppercase; width: auto !important; cursor: pointer; background-color:#00a79f;  padding: 18px 18px 18px 18px; color: #ffffff; font-size: 18px; font-weight:900; letter-spacing:1px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
#formulaireB :hover.buttonSubmit { border:none; background-color:#ff9c5a;  color:#000000; }
#formulaireB :active.buttonSubmit,
#formulaireB :focus.buttonSubmit { border:none;  background-color:#000000; color:#ffffff; }