@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900|Open+Sans+Condensed:300,700');

/*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%; margin:0; padding:0; }
body   { background-color: #222; font-size: 17px; font-family:'Open Sans Condensed', Helvetica, Arial; font-weight:300; color: #222222; }

.containerPrehome { height: 100%; width:100%; }

.PreloadWebSite { display:block; position:fixed; top:0; left:0; width:100%; height:100vh; background-color:#fff; z-index:9999; }
.PreloadWebSite span { position:absolute; display:block; width:136px; height:178px; left:50%; margin-left:-68px; top:50%; margin-top:-89px; }

/***************************/
/*GENERAL         */
/***************************/
ul, ol                 	{ list-style-position: inside; margin:0 0 1em 0; }

p                      	{ margin:0 0 1em 0; text-align:justify; line-height:25px; color:#3f3f41; }
p.center               	{ margin:0 0 1em 0; text-align:center; line-height:25px; color:#3f3f41; }
p.attention             { margin:0 0 1em 0; text-align:center; line-height:25px; color:#d62525; }

a,a:link               	{ color: #3f3f41; text-decoration: none; border-bottom:1px dotted #3f3f41; }
a:hover                	{ color: #3f3f41; text-decoration: none; border-bottom:0px dotted #3f3f41; }

a img                  	{ border:none; }

img.Right				{ border: 0; display:block; margin-left:10px;  float:right;}
img.Left				{ border: 0; display:block; margin-right:10px; float:left; }
img.VersionPC { display:block; }
img.VersionMobile { display:none; }

.BlockVersionPC { display:block; }
.BlockVersionMobile { display:none; }


h1, h2, h3, h4, h5, h6 	{ font-family:'Source Sans Pro', Helvetica, Arial; font-weight:900; color:#3f3f41; letter-spacing:1px; clear:both;  }
h1                    	{ font-size:28px; margin-bottom:20px; margin-bottom:20px; }
h2                    	{ font-size:25px; margin-bottom:5px; }
h3                     	{ font-size:20px; margin-bottom:5px;}
h4                    	{ font-size:16px; margin-bottom:5px; }
h5                     	{ font-size:15px; margin-bottom:5px; }

hr                     { border:none; border-top:1px solid #c20605; color:#c20605; height: 1px; width:100%; position:relative; float:left;  }
 
span.petit 				{ font-size:11px; color:#c20605; }


.contenu { max-width: 1250px; width:100%; margin: auto; }




.FondAccueil { display:block; float:left; width:100%; height:100%; position:relative; }
.FondAccueil:before {content:''; display:block; float:left; width:100%; height:100%; position:absolute; top:0; left:0; background:transparent url("./images/background.jpg") no-repeat 0 0; background-size:cover; opacity:0.6; }

.LeftAccueil { display:block; float:left; width:50%; height:100%; position:relative; }
.LeftAccueilInside { display:block; position:absolute; top:15%; left:10%; width:400px; height:auto !important; background-color: rgba(34, 34, 34, .5); padding:2%;  }
.LogoAccueil { display:block; position:relative;  background:transparent url("./images/polissage-isere.png") no-repeat 0 0; width:150px; height:127px; }
.TexteAccueil { display:block; position:relative; width:100%; height:auto !important; clear:both; }
.TexteAccueil h1 { color: #3f3f41; }
.TexteAccueil p { color: #3f3f41; }

.RightAccueil { display:block; float:left; width:50%; height:100%; position:relative; color: #3f3f41;  }
.RightAccueilInside { display:block; position:absolute; top:15%; right:10%; width:400px; height:auto !important; background-color: rgba(34, 34, 34, .5); padding:2%;  }






/******************************/
/*  GRID                      */
/******************************/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin: 0 0.5% 0 0.5%; float: left; display: block; }

.grid_1 { width:6.5%; }
.grid_2 { width:15%; }
.grid_3 { width:23.5%; }
.grid_4 { width:32%; }
.grid_5 { width:40.5%; }
.grid_6 { width:49%; }
.grid_7 { width:57.5%; }
.grid_8 { width:66%; }
.grid_9 { width:74.5%; }
.grid_10 { width:83%; }
.grid_11 { width:91.5%; }
.grid_12 { width:99%; }
.grid_full { width:100%; }




/******************************/
/*  MARGIN TOP /BOTTOM        */
/******************************/
.mtb-0 { margin: 0; }
.mtb-10 { margin: 10px 0; }
.mtb-20 { margin: 20px 0; }
.mtb-30 { margin: 30px 0; }
.mtb-40 { margin: 40px 0; }
.mtb-50 { margin: 50px 0; }
.mtb-60 { margin: 60px 0; }
.mtb-70 { margin: 70px 0; }
.mtb-80 { margin: 80px 0; }
.mtb-90 { margin: 90px 0; }
.mtb-100 { margin: 100px 0; }

/******************************/
/*  MARGIN TOP                */
/******************************/
.mt-0 { margin-top: 0px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }

/******************************/
/*  MARGIN BOTTOM                */
/******************************/
.mb-0 { margin-bottom: 0px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }


/******************************/
/*  PADDING TOP /BOTTOM       */
/******************************/
.ptb-0 { padding: 0 0; }
.ptb-10 { padding: 10px 0; }
.ptb-20 { padding: 20px 0; }
.ptb-30 { padding: 30px 0; }
.ptb-40 { padding: 40px 0; }
.ptb-50 { padding: 50px 0; }
.ptb-60 { padding: 60px 0; }
.ptb-70 { padding: 70px 0; }
.ptb-80 { padding: 80px 0; }
.ptb-90 { padding: 90px 0; }
.ptb-100 { padding: 100px 0; }

/******************************/
/*  PADDING TOP               */
/******************************/
.pt-0 { padding-top: 0px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }

/******************************/
/*  PADDING BOTTOM            */
/******************************/
.pb-0 { padding-bottom: 0px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }




/******************************/
/*  FORMULAIRE                */
/******************************/
#formulaire .grid_3 { margin:0 2%; }
#formulaire .grid_6 { width:46%; margin:2% 2%; }
#formulaire .grid_12 { width:96%; margin:2% 2%; }

#formulaire ::-webkit-input-placeholder 	{ font-style: italic; }
#formulaire input:-moz-placeholder,
#formulaire textarea:-moz-placeholder,
#formulaire input, select 				{ outline: none; }
#formulaire #ccab, .ccab 	{ visibility: hidden; display:  none;}


/* all the input except submit and checkbox */
#formulaire input:not([type="checkbox"]) 		{ background-color:transparent; color:#3f3f41; 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; }
#formulaire input:not([type="checkbox"]):active,
#formulaire input:not([type="checkbox"]):focus 	{ border:none; border-bottom: 1px solid #3f3f41; background-color:transparent;  color:#3f3f41; } 

/* all the textarea */
#formulaire textarea 		{ font-family:'Open Sans Condensed', Helvetica, Arial; color:#cccccc; font-weight: 300; font-size:17px; background-color:transparent; color:#3f3f41; 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; }
#formulaire textarea:active,
#formulaire textarea:focus 	{ border: 1px solid #3f3f41; background-color:transparent; color:#3f3f41;  } 

/* all the select */
#formulaire select 		{  background-color:transparent; color:#3f3f41; width: 96%; margin-top: 4px; padding: 10px 2% 8px 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; }
#formulaire select:active,
#formulaire select:focus  {  border:none; border-bottom: 1px solid #3f3f41; background-color:transparent; color:#3f3f41;  } 
#formulaire select option:first-child		{ color:#757575; font-style: italic; } 
#formulaire select  { color: #999999; }
#formulaire select option { color: #3f3f41; }
#formulaire select option:first-child { color: #999999; }
#formulaire select option.color { color: #3f3f41; }
#formulaire select option:selected { color: #3f3f41; }

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

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

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

/* all the label */
#formulaire 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; }
#formulaire ul li:hover label { color: #3f3f41; }

#formulaire 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; }
#formulaire ul li:hover label.small { color: #3f3f41; }

#formulaire ul li .check { display: block; position: absolute; border: 3px solid #3f3f41; border-radius: 100%;  height: 13px;  width: 13px;  top: 0px; left: 0px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; }
#formulaire ul li:hover .check { border: 3px solid #3f3f41; }
#formulaire 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 */
#formulaire input.buttonSubmit 		 { width: auto! !important; height:26px; cursor: pointer; background-color:#3f3f41; padding: 8px 5px; color: #ffffff; font-size: 15px; letter-spacing:1px; border: 1px #3f3f41 solid; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
#formulaire input:hover.buttonSubmit { background-color:#222222; border: 1px solid #222222; color:#ffffff; }
#formulaire input:active.buttonSubmit,
#formulaire input:focus.buttonSubmit { background-color:transparent; border: 1px solid #cccccc; color:#cccccc; }

/*Redimentionnement ReCaptcha */
#rc-imageselect,  .g-recaptcha { transform:scale(0.77); transform-origin:0; transform:scale(0.77); transform-origin:0 0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0 0;  }





.FondAccueil { display:block; float:left; width:100%; height:100%; position:relative; }
.FondAccueil:before {content:''; display:block; float:left; width:100%; height:100%; position:absolute; top:0; left:0; background:transparent url("./images/background.jpg") no-repeat 0 0; background-size:cover; opacity:0.6; }

.LeftAccueil { display:block; float:left; width:50%; height:100%; position:relative; }
.LeftAccueilInside { display:block; position:absolute; top:15%; left:10%; width:400px; height:auto !important; background-color: rgba(255, 255, 255, .9); padding:2%;  }
.LogoAccueil { display:block; position:relative;  background:transparent url("./images/polissage-isere.png") no-repeat 0 0; width:150px; height:127px; }
.TexteAccueil { display:block; position:relative; width:100%; height:auto !important; clear:both; }
.TexteAccueil h1 { color: #3f3f41; }
.TexteAccueil p { color: #3f3f41; }

.RightAccueil { display:block; float:left; width:50%; height:100%; position:relative; color: #3f3f41;  }
.RightAccueilInside { display:block; position:absolute; top:15%; right:10%; width:400px; height:auto !important; background-color: rgba(255, 255, 255, .9); padding:2%;  }



@media only screen and (min-width: 831px) and (max-width: 1100px) {
.LeftAccueil { width:40%; }
.LeftAccueilInside { width:90%; top:5%; left:5%;  }
.RightAccueil { width:60%; }
.RightAccueilInside { width:90%; top:5%; right:5%;  }
}

@media only screen and (min-width: 361px) and (max-width: 830px) {
.FondAccueil:before { background-size:contain; }
.LeftAccueil { width:100%; height: auto !important; }
.LeftAccueilInside { top:0; left:0; position:relative; display:block; margin-top:40px;margin-left:5%; width:86%; }
.RightAccueil { width:100%; height: auto !important; }
.RightAccueilInside  { top:0; left:0; position:relative; display:block; margin-top:40px;margin-left:5%; width:86%; }
}



/* Phone Portrait (320px) */
@media only screen and (max-width: 360px) {
.FondAccueil:before { background-size:contain; }
.LeftAccueil { width:100%; height: auto !important; }
.LeftAccueilInside { top:0; left:0; position:relative; display:block; float:left; margin-top:40px; margin-left:5%; width:86%; }
.RightAccueil { width:100%; height: auto !important; }
.RightAccueilInside  { top:0; left:0; position:relative; display:block; float:left; margin-top:40px;margin-left:5%; width:86%; }
.TexteAccueil h1 { font-size:20px; }
}