@charset "utf-8";
* { box-sizing:border-box!important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box }

body							{ margin:0; padding:0; font-size:15px; font-family: Raleway,'Century Gothic', Verdana; color: #000; transition: margin-left .5s;	}
header							{ width: 100% }

.bandeau						{ width: 100%; padding:  10px 0 7px 0; text-align:center; background-color:  #9D000C }
.bandeau .band					{ display:block; width:100%; box-sizing:border-box; text-align:right; margin-top: -2px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-family: Raleway-ExtraBold }
.bandeau .band img 				{ vertical-align:middle; margin: 0 10px; width: 24px; height: auto }
.bandeau .band a 				{ margin: 2%; color: #FFF }
.bandeau .band a:hover			{ color: #F0F1F2 }
/*.bandeau						{ width: 100%; padding:  10px 0 7px 0; text-align:center; border-bottom: 1px solid #9D000C }
.bandeau .band					{ display:block; width:100%; box-sizing:border-box; text-align:right; margin-top: -2px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-family: Raleway-ExtraBold }
.bandeau .band img 				{ vertical-align:middle; margin: 0 10px; width: 24px; height: auto }
.bandeau .band a 		manage		{ margin: 2%; color: #333 }
.bandeau .band a:hover			{ color: #9D000C }*/

@media (max-width: 1200px){
}

@media (max-width: 560px){
.bandeau						{ height: auto; padding: 2% 0; text-align:right}
}

nav								{ display: block; width: 1200px; margin: auto } 
nav a							{ color: #EEE  }
nav .band-logo					{ text-align: center  }	
nav .band-logo h1				{ font-size: 30px; letter-spacing: 2px }
nav .band-logo a				{ color: #000 }
nav .band-logo img				{ vertical-align: middle; width: 200px; height: auto; margin: 0 10px }
nav .band-logo-mobi				{ display: none; visibility:hidden  }	

nav .rubriques					{ font-family: Raleway-Bold; padding-bottom: 1% }
nav .rubriques ul 				{ margin: 0; text-align: center; padding: 0	}
nav .rubriques ul li			{ display:inline-block; width: 22%; vertical-align:middle; box-sizing:border-box; font-size: 14px; cursor: pointer; margin: 0	}
nav .rubriques li:hover			{ border-bottom: 2px solid #9D000C }
nav .rubriques li:hover	a		{ color: #333 }
nav .rubriques li a				{ display: block; width: 100%; padding: 10px 0; color: #9D000C; letter-spacing: 1px	}
nav .rubriques li.choix			{ background-color: #9D000C	}
nav .rubriques li.choix	a		{ color: #FFF	}
nav .rubriques li.icone			{ width: 28px!important; height: auto!important; vertical-align: middle; padding: 0 5%!important	}
nav .rubriques li.icone:hover	{ border-bottom: 0 }


nav .steps 						{ text-align: center }
nav .step						{ display: inline-block; vertical-align: middle; background-color: #888; color: #FFF; font-size: 18px; font-weight: bold; margin: 0 1px; padding: 10px 15px; letter-spacing: 1px }
nav .steps3						{ width: 29% }
nav .steps4						{ width: 22% }
nav .step:first-child			{ width: 10% }
nav .step-home					{ background-color: transparent; padding: 0 }
nav .step-choix					{ background: url(/images/step-fleche.png) no-repeat right #9D000C }
nav .step-lien					{ background: url(/images/step-fleche.png) no-repeat right #888 }
nav .step a						{ display: block; width: 100%; color: #FFF }

nav .rubs .rub					{ display: inline-block; width: 89%; vertical-align: middle; background-color: #888; color: #FFF; font-size: 18px; font-weight: bold; margin: 0 1px; padding: 10px 15px; letter-spacing: 1px }
nav .rubs .rub:first-child		{ width: 10% }
nav .rubs .rub-home				{ background-color: transparent; padding: 0 }

/*nav .rubriques					{ height: 80px; font-family: Raleway-Bold }
nav .rubriques ul 				{ margin: 0; text-align: center; padding: 0	}
nav .rubriques ul li			{ display:inline-block; width: 23%; vertical-align:middle; box-sizing:border-box; font-size: 14px; cursor: pointer; margin: 0 2% 0 0; padding: 10px 2%; background-color: #9D000C 	}
nav .rubriques li:hover			{ background-color: #AAA}
nav .rubriques li:hover	a		{ color: #333 }
nav .rubriques li a				{ color: #FFF; letter-spacing: 1px	}
nav .rubriques li.choix			{ background-color: #AAA	}
nav .rubriques li.choix	a		{ color: #333	}*/

nav .menu, nav .sidenav			{ display: none; visibility:hidden }

@media (max-width: 1200px){
nav								{ width: 100% }
nav .band-logo h1				{ margin-left: 5% }
nav .step						{ font-size: 15px; padding: 10px }
}

@media (max-width: 1120px){ 
nav .rubriques					{ padding-right: 0 }
nav .rubriques ul li			{ font-size: 12px; letter-spacing: 1px	}
nav .rubriques li a				{ 	}
}

@media (max-width: 900px){
.mobi-no						{ display: none; visibility: hidden }
nav .band-logo					{ display: none; visibility: hidden }
nav .band-logo-mobi				{ display: block; visibility: visible; width: 100%; text-align: center }
nav .band-logo-mobi img			{ width: 200px; height: auto; margin: 0 10px }
nav .rubriques					{ display: none; visibility: hidden }
nav .menu						{ display: block; visibility: visible; position: absolute; margin-left: 5%; margin-top: 5%; cursor: pointer; color: #9D000C; font-size: 30px; text-align: center }
nav .menu .bouton				{ background-color: #9D000C; color: #FFF; padding: 0 5px; text-shadow: none; box-shadow: none  }
nav .menu .minus				{ font-size: 16px }
nav .sidenav 					{ display: block; visibility:visible; height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #9D000C; overflow-x: hidden; transition: 0.5s }
nav .sidenav .closebtn 			{ display: block; text-align: right; margin: 10px 25px 10px 0; font-size: 50px; color: #FFF  }
nav .sidenav .logo				{ text-align: center; margin-bottom: 10px; background-color: #FFF }
nav .sidenav .logo	img			{ width: 80%; height: auto }
nav .sidenav ul 				{ list-style: none; padding: 0; margin: 0; border-top: 1px solid #FFF }
nav .sidenav li 				{ padding: 0; margin: 0 }
nav .sidenav li a 				{ display: block;  border-bottom: 1px solid #FFF;  padding: 1em; font-size: 16px; letter-spacing: 2px; color: #FFF; transition: 0.3s; text-transform:uppercase }
nav .sidenav li a:hover 		{ background-color: #666}
}

@media (max-width: 460px) {
.sidenav 						{ padding-top: 15px;}
.sidenav a 						{ font-size: 18px;}
}

@media (max-height: 450px) {
.sidenav 						{ padding-top: 15px;}
.sidenav a 						{ font-size: 18px;}
}

#page 							{ width: 100%; min-height: 400px }
.contenu						{ width: 1200px; margin: auto; padding-bottom: 3% }
.contenu h1						{ background-color: #767171; color: #FFF; font-size: 18px; padding: 10px 15px; margin: 0; letter-spacing: 1px }
.contenu h2						{ background-color: #888; color: #FFF; font-size: 18px; padding: 10px 15px; margin: 0; letter-spacing: 1px }
.contenu .back					{ font-size:  10px; letter-spacing:  2px; text-transform: uppercase; margin-bottom: 1% }

section							{ background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; background-size: cover; margin-bottom: 20px }
section.home					{ background-image : url(/photos/home.jpg) }
section.pageabout				{ background-image : url(/photos/about.jpg) }
section.pagefaqs				{ background-image : url(/photos/faqs.jpg) }
section.pagecontact				{ background-image : url(/photos/contact.jpg) }
section .overlay				{ padding-top: 70px; padding-bottom: 70px; background: rgba(0, 5, 8, 0.30) }
section .container .cadreinfo	{ font-size: 20px; letter-spacing: 1px }
.cadreinfo						{ width: auto; min-height: 80px; top: 50%; padding: 1% 3%; background: rgba(0, 0, 0, 0.5); color: #FFF; text-align: center }
.cadreinfo h1					{ font-size: 32px; margin-top: 0 }
.cadreinfo h2					{ font-size: 18px; letter-spacing: 2px; font-weight: normal }

.alert-license					{ text-align: center; margin-top: 2%; font-weight: bold; padding: 10px; background-color:#005DCC; color:#FFF; font-size: 12px; letter-spacing: 4px; text-transform: none }
.alert-license	a				{ color:#FFF }

h4.FreeOnlineDemo 				{ color: #9D000C; font-size: 18px; text-align: center; text-transform: uppercase; letter-spacing: 6px }

input[type="button"].clair		{ display: inline-block; width: 30%; text-align: center; margin-top: 2%; background-color: #767171;	color: #FFF; font-size: 11px; line-height: 20px;	letter-spacing: 2px;	padding: 10px;	resize: none; border: 0; text-transform:uppercase; cursor:pointer }
input[type="button"].clair:hover{ background-color: #9D000C; }

input[type="button"].bouton		{ display: inline-block; width: 30%; min-width: 250px; text-align: center; margin-top: 2%; background-color: #767171;	color: #FFF; font-size: 11px; line-height: 20px;	letter-spacing: 2px;	padding: 10px;	resize: none; border: 0; text-transform:uppercase; cursor:pointer }
input[type="button"].bouton:hover{ background-color: #9D000C; }

input[type="button"].boutonclair{ background-color: #767171 }
input[type="button"].boutonclair:hover{ background-color: #9D000C }

input[type="button"].boutonrouge{ background-color: #9D000C }
input[type="button"].boutonrouge:hover{ background-color: #767171 }

@media (max-width: 1200px){
.contenu						{ width: 95% }
}

@media (max-width: 992px){
.contenu						{ width: 95%; margin: auto }
section .container				{ width: 100% }
}
@media (max-width: 768px){
section .container .cadreinfo	{ font-size: 16px }
}
@media (max-width: 480px){
section .container .cadreinfo	{ margin: 0 5% }
.cadreinfo .tel					{ font-size: 20px }
}


.index .index-g					{ display: inline-block; width: 27%; vertical-align: top; font-size: 14px; line-height: 1.5em }
.index h2						{ background-color: #888; color: #FFF; font-size: 18px; padding: 10px 15px; margin: 0; text-align: center }
.index .g-txt					{ background-color: #DDD; padding: 10px 15px; margin-bottom: 5%; text-align: justify }
.index .g-txt a					{ display: block; width: 100%; }
.index .kreatis					{ text-align: center}
.index .kreatis	img				{ width: 100px; height: auto }
.index .index-d					{ display: inline-block; width: 41%; vertical-align: top; margin: 0 4%; text-align: justify; line-height: 1.5em; font-size: 16px }
.index .index-d	img				{ width: 200px; height: auto }
.index .index-d	.anim			{ animation-duration: 3s; animation-name: slidein }
@keyframes slidein { 			from 	{ margin-left: 100%; width: 300%  }
								to 		{ margin-left: 0%; width: 100%  }
}

.index .login-identify			{ display: inline-block; width: 23%; vertical-align: middle; font-size: 14px; line-height: 1.5em }
.login-identify .lien			{ text-align: center; margin: 5%; cursor: pointer }
.login-identify .lien:hover		{ color: #9D000C; font-weight: bold }
.login-identify	img				{ width: 230px; height: auto; margin-top: 3% }

@media (max-width: 992px){
.login-identify	img				{ width: 180px }
}
@media (max-width: 820px){
.index .index-g, .index .index-d { display: block; width: 95%; margin: auto }
.login-identify	img				{ width: 230px }
.index .login-identify { display: block; width: 80%; margin: auto }
.login-identify	img				{ width: 230px }

}

.login h2						{ text-align: center }
.login .login-register			{ display: inline-block; width: 54%; vertical-align: middle; line-height: 1.5em; font-size: 14px; margin-left: 10% }
.login .login-register .filet	{ border-bottom: 1px solid #CCC; margin: 15px 0 3px }
.login .login-icone				{ display: inline-block; width: 30%; vertical-align: middle; text-align: center; margin-left: 5% }
.login .login-icone img			{ width: 175px; height: auto }

@media (max-width: 900px){
.login .login-register			{ width: 70%; margin-left: 4% }
.login .login-icone				{ width: 20% }
.login .login-icone img			{ width: 100px }
}
@media (max-width: 768px){
	.login .login-icone, .login .login-register	{ display: block; width: 90%; margin: 5% auto }
}

.account-menu					{ display: inline-block; width: 70%; vertical-align: top; padding: 2% }
.account-menu .liens			{ text-align: center; width: 60%; margin: 1% auto }
.account-menu a					{ display: block; background-color: #DDD; padding: 10px; margin: 2px; color: #000 }
.account-menu a:hover			{ background-color: #CCC }
.account-menu a.principal		{ background-color: #9D000C; color: #FFF; margin-bottom: 5% }
.account-menu a:hover.principal	{ background-color: #666 }
.account-menu a.normal			{ display: inline; background-color: #FFF; padding: 0; margin: 0; color: #9D000C }
.account-photo					{ display: inline-block; width: 25%; vertical-align: top; margin-top: 80px }
.account-photo img				{ width: 380px; height: auto }

.account-user					{ }
.account-user .content			{ display: inline-block; width: 70%; vertical-align: middle; padding: 2% 10% }
.account-user .content .legal	{ display: none; visibility: hidden }
.account-user .content-photo	{ display: inline-block; width: 25%; vertical-align: middle; text-align: center }
.account-user .content-photo img{ width: 128px; height: auto }

.account-report .content		{ display: block; width: 100%; padding: 2% }
.account-report .content table	{ display: table; width: 100%; border-collapse: separate; border-spacing: 3px }
.account-report .content td		{ vertical-align: middle }
.account-report .content td img{ width: 22px; height: auto }
.account-report	.report-substance{ text-align: center; background-color: #CCC; padding: 3px; font-size: 11px; text-transform:uppercase; letter-spacing: 2px;font-weight: bold }
.account-report	.report-info	{ font-size: 12px }
.account-report	img				{ width: 28px; height: auto; vertical-align: middle }
.account-report	a img:hover		{ opacity:0.8; filter:alpha(opacity=80); -moz-opacity:8 }
.account-report	input[type="submit"]	{ text-transform: uppercase; font-size: 12px; letter-spacing: 2px }
.account-report	#skillsreportssubstance	{ background:url(/images/icone-search-input-fd.png) no-repeat right #FFF; width: 22%; min-width: 250px; float: right; margin: 0 5% }
.account-report	.proceed		{ width: 22%; min-width: 250px; float: right; text-transform: lowercase; margin: 0 }

.account-invoice .content		{ display: inline-block; width: 70%; vertical-align: middle; padding: 2% 10% }
.account-invoice .content table	{ display: table; width: 100%; border-collapse: separate; border-spacing: 5px; text-align: center }
.account-invoice .content td img{ width: 35px; height: auto }
.account-invoice .content td.total{ text-align: right; padding-right: 20px }
.account-invoice .content-photo	{ display: inline-block; width: 25%; vertical-align: top; text-align: center; padding-top: 5% }
.account-invoice .content-photo img{ width: 128px; height: auto }
.account-invoice .report-info	{ padding: 1% 10% }
.account-invoice img			{ width: 42px; height: auto; vertical-align: middle; margin-left: 2% }
.account-invoice a img:hover	{ opacity:0.8; filter:alpha(opacity=80); -moz-opacity:8 }

.account-activation				{ }
.account-activation .content			{ display: inline-block; width: 70%; vertical-align: middle; padding: 2% }
.account-activation .content form		{ width: 80%; margin: auto }
.account-activation .content form input	{ text-align: center }
.account-activation .content-photo		{ display: inline-block; width: 25%; vertical-align: middle; text-align: center }
.account-activation .content-photo img	{ width: 250px; height: auto }

.account-payment				{ text-align: center }
.account-payment table			{ width: 100%; border-collapse: collapse; table-layout:fixed; border: 1px solid #CCC }
.account-payment table th		{ display: table-cell; width: 20%; padding: 0; vertical-align: middle; font-weight: bold; font-size: 15px; letter-spacing: 2px; line-height: 1.6em; text-align: center }
.account-payment table th img	{ display: block; margin: 2% auto; width: 100%; max-width: 125px; height: auto }
.account-payment table td		{ text-align: center; border-top: 1px solid #CCC; padding: 8px }
.account-payment table td.col	{ text-align: left; text-transform: uppercase; letter-spacing: 1px; font-size: 11px }
.account-payment table tr.fin td { background-color: #CCC; padding: 20px 0 }
.account-payment table tr.fin a	{ font-weight: bold; color: #000 }
.account-payment table tr.fin td:hover { background-color: #9D000C; padding: 20px 0 }
.account-payment table tr.fin td:hover a { color: #FFF }

@media (max-width: 1200px){
.account-photo img				{ width: 100% }
}
@media (max-width: 768px){
.account-menu					{ display: block; width: 100% }
.account-menu .liens			{ width: 80%}
.account-photo					{ display: block; width: 100%; text-align: center; margin-top: 20px }
.account-photo img				{ width: 380px }
.account-user .content			{ display: block; width: 90% }
.account-user .content .legal	{ display: block; visibility: visible }
.account-user .content-photo	{ display: none; visibility: hidden }
	
.account-activation .content	{ display: inline-block; width: 83%; vertical-align: middle; padding: 2% }
.account-activation .content-photo		{ display: inline-block; width: 15% }
.account-activation .content-photo img	{ width: 100%; height: auto }
	
.account-report	#skillsreportssubstance	{ float: none; margin: 5% }
			
.account-invoice .content		{ display: inline-block; width: 83%; vertical-align: middle; padding: 2% }
.account-invoice .content-photo		{ display: inline-block; width: 15% }
.account-invoice .content-photo img	{ width: 100%; height: auto }
	
.account-payment table th		{ font-size: 11px; letter-spacing: 0 }
.account-payment table td		{ font-size: 11px; letter-spacing: 0 }
.account-payment table td.col	{ font-size: 11px; letter-spacing: 0 }
}

@media (max-width: 550px){
.account-activation .content	{ width: 100% }
.account-activation .content-photo		{ display: none; visibility: hidden }
.account-user .content			{ width: 100%; padding: 2% }

	
.account-invoice .content		{ display: block; width: 100% }
.account-invoice .content-photo	{ display: none; visibility: hidden }
}

.substance-list					{ display: block; width: 83%; margin: 0 auto; padding: 0!important }
.substance-list	h4				{ font-size: 20px }
.substance-list	.bordure		{ border: 1px solid #666; padding: 5px 10px; margin: 10px }
.substance-list .structure		{ float: right; width: 25%; height: 100%; text-align: center }
.substance-list .structure img	{ width: 250px; height: auto }
.substance-list .structure img.v{ width: 100%; max-width: 250px; height: auto }
.substance-list .legende		{ color: #9D000C; font-size: 13px; margin: 1% 2% }

.substance-form					{ margin: 2% 0 2% 0 }
.substance-form label			{ display: inline-block; width: 30%; margin-right: 4%; padding: 10px; background-color: #DDD; font-size: 10px; text-transform: uppercase; letter-spacing: 1px }
.substance-form select			{ display: inline-block; width: 65%; font-family: Raleway,'Century Gothic'; padding-left: 10px; border: 1px solid #DDD }
.substance-infos				{ width: 75%; margin-bottom: 1% }
.substance-infos .col1			{ display: inline-block; width: 30%; background-color: #EFEFEF; padding: 6px 5px 6px 10px; margin-right: 2%; font-size: 13px }
.substance-infos .col1 i		{ font-size: 11px }
.substance-infos .col2			{ display: inline-block; width: 65%; border: 1px solid #DDD; padding: 5px 20px }
.substance-infos input[type="text"]	{ display: inline-block; width: 65%; border: 1px solid #DDD; padding: 5px 20px }

.substance-list .inputfile 				{ width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.substance-list .inputfile + label 		{ width: 100%; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: inline-block; overflow: hidden; padding: 0.625rem; color: #FFF; background-color: #888; font-size: 10px; letter-spacing: 1px  }
.no-js .inputfile + label 		{ display: none }
.substance-list .inputfile:focus + label,.inputfile.has-focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; background-color: #9D000C }
.substance-list .inputfile + label img 		{ width: 24px; height: auto; vertical-align: middle; margin-top: -0.25em; margin-right: 0.25em }

.substance-infos .grise			{ background-color: #EEE }
.proceed 						{ display: block; width: 100%; background-color: #9D000C; text-align: center; margin-top: 2%; cursor: pointer }
.proceed h2						{ background-color: #9D000C!important; color: #FFF; font-size: 18px; padding: 10px 15px; margin: 0; letter-spacing: 1px }
.proceed h2.proceed-small		{ font-size: 0.9em; padding: 10px 2px }
.proceed h2.proceed-padding		{ padding: 3px }
.proceed h2:hover				{ background-color: #767171 }
.proceed img					{ width: 38px; height: auto; vertical-align: middle }
.proceed img:hover, .proceed h2:hover > img	{ -webkit-transition: 500ms; -moz-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform:rotate(-10deg) scale(1) }

.account-list-evaluation .substance-list		{ display: block!important; width: 100%!important }

.account-list h2				{ background-color: #AAA; color: #FFF; font-size: 18px; padding: 9px 15px; margin: 0; text-align: center }
.account-list h3				{ background-color: #888; color: #FFF; font-size: 15px; padding: 10px 15px; margin: 0; text-align: center; letter-spacing: 1px }
.account-list .col1-1			{ display: inline-block; width: 45%; margin-right: 5% }
.account-list .col1-2			{ display: inline-block; width: 45% }

.account-list .cols3			{  }
.account-list .col3-1			{ display: inline-block; width: 38%; vertical-align: top; margin-right: 5% }
.account-list .col3-2			{ display: inline-block; width: 38%; vertical-align: top }
.account-list .col3-2 select, .account-list .col3-2 input { width: 90% }
.account-list .col3-3			{ display: inline-block; width: 16%; vertical-align: top; margin-left: 2% }
.account-list .col3-3 select	{ padding: 8px 1px; font-size: 12px }
.account-list .cols3 input		{ margin: 0 0 1% }
.account-list .cols3 input.info	{ display: inherit; width: 75%; margin-right: 5px }
.account-list .cols3 img.edit	{ opacity: 0; float: right; width: 20px; height: auto; margin-top: -5px }
.info-modif 					{ width: 90%; padding: 5px; border: 1px solid #CCC; margin: 0 0 1% }
.info-modif:hover img.edit 		{ opacity: 1 }

.account-list .substance-list	{ display: inline-block; width: 69%; vertical-align: top; padding: 2% 0  }
#ajout-choix  					{ text-align: center; font-weight: bold; display: table; border-spacing: 5px }
#ajout-choix a 					{ display: table-cell; width: 30%; background-color: #AAA; color: #FFF; font-size: 18px; padding: 10px; cursor: pointer; vertical-align: middle }
#ajout-choix a:hover			{ background-color: #9D000C }
.account-list .manage-list		{ display: inline-block; width: 30%; vertical-align: top; padding: 5px 10px; font-size: 13px; border: 1px solid #666; margin-top: 10px }
.manage-list .skillslist		{ background:url(/images/icone-search-input-fd.png) no-repeat right #FFF; width: 80%; margin: 2% 0 }
.manage-list table				{ width: 100%; border-spacing: 5px; border-collapse: collapse; margin: 5% 0  }
.manage-list .tableau-list		{ min-height: 600px  }
.manage-list table.list	tr		{ vertical-align: top }
.manage-list tr:hover			{ background-color: #CCC  }
.manage-list td					{ padding-left: 10px; border-bottom: 1px solid #CCC  }
.manage-list td.icones			{ width: 25%; text-align: center  }
.manage-list td.icones img		{ width: 20px; height: auto; margin: 0 5%; cursor: pointer }
.manage-list tr.pages			{ text-align: center; border-bottom: 2px solid #CCC }
.manage-list tr.pages td		{ padding: 2% }
.manage-list tr.pages:hover		{ background-color: transparent }
.manage-list tr.pages a			{ padding: 2% 3%; cursor: pointer }
.manage-list tr.pages a.choix	{ background-color: #CCC }
.manage-list tr.pages a:hover	{ background-color: #AAA }

.manage-list-suppr				{ display: block; width: 100%; padding: 0 2% 2%; border: 1px solid #666; margin-top: 10px }
.manage-list-suppr table		{ width: 100%; margin: 1%; border-collapse: collapse; border-spacing: 1px; font-size: 12px  }
.manage-list-suppr table td		{ vertical-align: top }
.manage-list-suppr input 		{ margin: 0 }

@media (max-width: 850px){
.account-list .substance-list, .account-list .manage-list	{ display: block; width: 90%; margin:  auto  }
.manage-list .tableau-list		{ min-height: inherit}
.substance-list .structure		{ float: none; width: 100% }
.substance-list .structure img.v{ width: 205px; height: auto }
.substance-infos				{ width: 100% }
}
@media (max-width: 550px){
.account-list .substance-list, .account-list .manage-list					{ width: 100% }
.substance-list input[type="button"].cancel 	{ display: inline; width: 20% }
.substance-form label, .substance-form select, .substance-infos, .substance-infos .col1, .substance-infos .col2			{ display: block; width: 100%; margin: auto }
.account-list .col1-1, .account-list .col1-2			{ display: block; width: 100%; margin: auto }
}

.applicability-guest				{  }
.applicability-guest ul.substance-entete	{ width: 100% }
.applicability-guest .substance-entete li	{ display: inline-block; width: 24% }
.applicability-guest table			{ width: 60%; margin: auto }
.applicability-guest table th		{ background-color: #DDD; font-weight: bold; padding: 10px }
.applicability-guest table tr		{ background-color: #EEE }
.applicability-guest table td		{ padding: 10px }
.applicability-guest table td.modele{ padding: 10px 40px 10px 0; text-align: right }
.applicability-guest td span.status	{ display: inline-block; width: 80%; margin: auto; border-radius: 10px; text-align: center; padding: 5px; color: #FFF; font-size: 0.9em }
.applicability-guest td	span.status0{ background-color: #CC0000 }
.applicability-guest td	span.status1{ background-color: #00C600 }
.applicability-guest td	span.statusx{ background-color: #ED8C10 }
.applicability-guest td	span.info	{ display: inline-block; width: 15%; text-align: right; padding: 5px; color: #ED8C10; font-weight: bold; cursor: pointer; font-size: 24px }
.applicability-guest .pdf			{ display: inline-block; margin: 0 1% }
.applicability-guest .pdf img		{ width: 48px; vertical-align: middle }

@media (max-width: 550px){
.applicability-guest						{ font-size: 12px }
.applicability-guest .substance-entete li	{ display: block; width: 80%; padding: 1% }
.applicability-guest table			{ width: 100% }
}

[data-tip]							{  display: inline; position: relative;	}
[data-tip]:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 29px; color: #fff; content: attr(data-tip); left: 20px; padding: 5px 15px; position: absolute; z-index: 98; width: 250px; font-size: 13px; font-weight: normal; text-align: left }
[data-tip]:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 23px; content: ""; left: 30px; position: absolute; z-index: 99 }

.applicability						{ width: 100%; margin: auto }
.applicability ul.substance-entete	{ text-align: center }
.applicability .substance-entete li	{ display: inline-block; width: 24% }
.applicability .substance-entete li select	{ width: 100% }
.applicability	table				{ width: 100%; border-collapse: collapse }
.applicability	table th			{ background-color: #DDD; font-weight: bold; padding: 10px }
.applicability	table tr			{ background-color: #EEE }
.applicability table td				{ padding: 10px; border-bottom: 3px solid #FFF }
.applicability table td.modele		{ padding: 10px 40px 10px 0; text-align: right }
.applicability td span.status		{ display: inline-block; width: 80%; margin: auto; border-radius: 10px; text-align: center; padding: 5px; color: #FFF; font-size: 0.9em }
.applicability td span.status0		{ background-color: #CC0000 }
.applicability td span.status1		{ background-color: #00C600 }
.applicability td span.status8		{ background-color: #666 }
.applicability td span.statusx		{ background-color: #ED8C10 }
.applicability td span.statusy		{ background-color: #AAA }
/*.applicability td span.modelstatus0	{ color: #CC0000 }
.applicability td span.modelstatus1	{ color: #00C600 }
.applicability td span.modelstatus4	{ color: #ED8C10 }*/
.applicability td span.info			{ display: inline-block; width: 15%; text-align: right; padding: 5px; color: #ED8C10; font-weight: bold; cursor: pointer; font-size: 24px }
.applicability td div.info			{ display: inline-block; width: 15%; text-align: right; padding: 5px; color: #ED8C10; font-weight: bold; cursor: pointer; font-size: 24px }
.applicability div.formu-submodel	{ font-size: 10px; text-align: left; padding-left: 10%; text-transform: uppercase }
.applicability div.formu-submodel input	{ width: 12px; height: 12px }
.applicability input[type="submit"] { display: inline-block; width: 68%; margin: 2% 0 0 1% }

.applicability .infobulle 			{ text-decoration:none; position:relative } 
.applicability .infobulle i 		{ display:none; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; color: #FFF; background: #333; background: rgba(0,0,0,.9); font-size: 13px } 
.applicability .infobulle:hover i 	{ display:block; position:absolute; top:0; left:0; z-index:1000; width:250px; min-height:20px; border:1px solid black; margin-top:12px; margin-left:32px; overflow:hidden; padding:8px; font-style: normal }
.applicability .infobulle:hover i ul	{  margin-left: -10px }
.applicability .infobulle:hover i li	{  margin-left: 0; padding-left: 1px; margin-bottom: 5px }

.applicability .case				{ display: table; width: 18px; height: 16px; border: 1px solid #666; vertical-align: middle; text-align: center; margin: auto }

@media (max-width: 1200px){
.applicability	table				{ width: 100% }
}
@media (max-width: 992px){
.applicability						{ font-size: 13px }
.applicability table td				{ padding: 10px 5px }
}
@media (max-width: 550px){
.applicability						{ font-size: 11px }
.applicability .substance-entete li	{ display: block; width: 80%; padding: 1% }
}

.applicability-MechoA				{  }
.applicability-MechoA ul.substance-entete	{ text-align: center }
.applicability-MechoA .substance-entete li	{ display: inline-block; width: 24% }
.applicability-MechoA h2			{ background-color: #9D000C; margin-top: 2% }
.applicability-MechoA h3.model		{ border: 1px solid #000; padding: 1%; margin-bottom: 1% }
.applicability-MechoA .scheme		{ width: 80%; height: auto; margin: 1% auto }
.applicability-MechoA .scheme img	{ width: 100%; height: auto }
.applicability-MechoA .MechoA-txt	{ text-align: left }
@media (max-width: 700px){
.applicability-MechoA .scheme		{ width: 100% }
}

.cartvide							{ background: url(/images/logo-panier.png) center center no-repeat; height: 400px }
.cartvide	h2						{ text-align: center; background-color: transparent; color: #000; margin-top: 30px; letter-spacing: 3px }
.cartvide	input					{ margin-top: 130px !important }

.cart								{ margin: 3% 0 }
.cart table							{ width: 90%; margin: auto; border-top: 1px solid #CCC; border-spacing : 0; }
.cart table	th						{ background-color: #CCC; font-weight: bold; padding: 10px; height: 40px; color: #333 }
.cart table	th.prix					{ padding-right: 30px; text-align:right }
.cart table	tr.titre td				{ background-color: #E1E2E3; padding: 8px; cursor: pointer}
.cart table	td						{ font-size: 12px; text-transform:uppercase; padding: 4px }
.cart table	td.prix					{ padding-right: 30px; font-size: 13px; text-align: right }
.cart table	td.prix	span.offered	{ text-transform: none; font-style: italic }
.cart table	td.license				{ height: 50px; text-transform: none; background-color: #005DCC; text-align: center }
.cart table	td.license	a			{ display: block; width: 100%; color: #FFF; font-size: 13px; letter-spacing: 3px; font-weight: bold}
.cart table	tr.discount				{ height: 50px; text-transform: uppercase; background-color: #FFDADC; text-align: right }
.cart table	tr.total				{ height: 50px; text-transform:uppercase; background-color: #F0F1F2; text-align:right }
.cart table	td.total				{ font-size: 15px; line-height: 1.8em  }
/*.cart table	tr.tva					{  height: 20px;  background-color: #F0F1F2 }
.cart table	td.tva					{  text-align:right; font-style:italic; font-size: 12px; text-transform:none }*/
.cart input[type="number"]			{  padding: 5px; font-size: 11px;letter-spacing: 2px; text-align:center}
.cart input[type="button"]				{ 	display: inline-block; width: 250px; text-align: center; margin-top: 10px; background-color: #9D000C;	color: #FFF;	font-size: 11px;	line-height: 20px;	letter-spacing: 2px;	padding: 10px;	resize: none; border: 0; text-transform:uppercase; cursor:pointer;  }
.cart input[type="button"]:hover		{ background-color: #767171;  }
.cart input[type="button"].clair		{ 	display: inline-block; width: 250px; text-align: center; margin-top: 10px; background-color: #767171;	color: #FFF;	font-size: 11px;	line-height: 20px;	letter-spacing: 2px;	padding: 10px;	resize: none; border: 0; text-transform:uppercase; cursor:pointer }
.cart input[type="button"].clair:hover		{background-color: #9D000C; }
.cart input.code		{ 	display: inline; text-align: center; margin-top: 5px; border: 1px solid #F09C9D;	color: #666;	font-size: 11px;	line-height: 20px;	letter-spacing: 1px;	padding: 2px 5px;	resize: none; }
.cart input[type="button"].cart-valid		{ 	display: block; width: 60%; text-align: center; margin: 5% auto; background-color: #9D000C;	color: #FFF;	font-size: 12px;	line-height: 20px;	letter-spacing: 2px;	padding: 10px;	resize: none; border: 0; text-transform:uppercase; cursor:pointer }

.cart form.invoice_info input		{ display: inline-block; width: 250px; text-align: center; margin: 0 3% }
.cart form.invoice_info input[type="submit"]		{ width: 50px; height: auto; background-color: #AAA; font-size: 11px; padding: 6px; margin: 0  }

@media (max-width: 992px){
.cart table							{  width: 100% }
}
@media (max-width: 768px){
.cart table	td						{  font-size: 11px }
}

.cart-user							{ width: 60%; margin: 0 auto 20px auto }
.cart-user	h3						{ background-color: #CCC; font-weight: bold; padding: 10px; height: 40px; color: #333 }

@media (max-width: 992px){
.cart-user							{  width: 100% }
}

.batch 							{ width: 90%; margin: 2% auto}
.batch h3						{ margin: 5% 10% 5% 20%; line-height: 2em }
.batch .ligne					{ width: 50%; margin: auto }
.batch input[type="file"]		{ font-size: 14px; height: auto }
.batch table.enpoints			{ width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 13px }
.batch table.enpoints th		{ background-color: #DDD; font-weight: bold; padding: 10px }
.batch table.enpoints th input	{ margin: 2px 10px 0 0 }
.batch table.enpoints tr		{ background-color: #EEE }
.batch table.enpoints td		{ padding: 10px; border-bottom: 3px solid #FFF }
.batch table					{ width: 100%; border-collapse: collapse }

@media (max-width: 992px){
.batch input					{ width: 80% }
}
@media (max-width: 768px){
.batch h3						{ margin: 5%; line-height: 1.6em }
.batch input					{ font-size: 14px }
}
@media (max-width: 480px){
.batch input					{ width: 100% }
}

.about	 				{ width: 80%; margin: 2% auto; border: 1px solid #AAA }
.about h5				{ font-size: 14px; text-transform: uppercase; letter-spacing: 2px  }
.about .about-txt		{ display: inline-block; width: 65%; vertical-align: top; padding: 1% 2%; min-height: 150px; text-align: justify; line-height: 1.4em }
.about .about-img		{ display: inline-block; width: 30%; vertical-align: top; margin-top: 30px; text-align: center }
.about .about-img img 	{ width: auto; height: auto; max-width: 200px; max-height: 200px }

.about .team			{ width: 90%; margin : 2% auto }
.about .team .team-img	{ display: inline-block; width: 35%; vertical-align: top }
.about .team .team-img img	{ width: 250px; height: auto; padding: 5% }
.about .team .team-txt	{ display: inline-block; width: 60%; vertical-align: top;  text-align: justify }


@media (max-width: 992px){
.about	 										{ width: 100%; margin: 1% auto }
}
@media (max-width: 768px){
.about .about-g, .about .about-d				{ display: block; width: 90%; margin: auto }
.about .about-txt, .about .about-img			{ display: block; width: 95%; margin: auto }
.about .team .team-img, .about .team .team-txt	{ display: block; width: 95%; margin: auto }
}

.guide-txt 				{ width: 70%; margin: 5% auto; text-align: justify }
.guide-pdf 				{ text-align: center }
.guide-pdf a			{ display: inline-block; margin: 0 5% }
.guide-pdf a img		{ width: 128px; height: auto }

.desktop-guide 			{ float: right; text-align: center; width: 30%; border: 1px solid #9D000C; margin: 3%; padding: 3% }
.desktop-guide img		{ width: 80px; height: auto }

.faqs	 				{ width: 80%; margin: 2% auto }
.faqs .faq 				{ width: 100%; line-height: 18px; text-align:justify;	margin: 5px;	cursor:pointer}
.faqs .faq .titre 		{ margin: 0; padding: 10px 10px 7px 10px; line-height: 1.5em; min-height: 50px	}
.faqs .faq .style1 		{ background-color:#DDD }
.faqs .faq .style2 		{ background-color:#BBB }
.faqs .faq .accordion-open {  background-color:#FFF; color: #9D000C; font-weight: bold; line-height: 1.5em }
.faqs .faq .accordion-open span { display:block; float:right; padding: 10px 10px 10px 30px; background:url(/scripts/images/faq-moins.png) center center no-repeat;}
.faqs .faq .accordion-close span { display:block; float:right; padding: 10px 10px 10px 30px; background:url(/scripts/images/faq-plus.png) center center no-repeat;}
.faqs .faq .accordion-no span	 { display:block; float:right; padding: 10px 10px 10px 30px; background:url(/scripts/images/faq-no.png) center center no-repeat;}
.faqs .faq .content 	{ margin: 0; padding:0 50px 5px 30px; line-height: 22px}

@media (max-width: 768px){
.faqs	 				{ width: 95%; margin: 2% auto }
.faqs .faq .titre		{ }
}


.contact .contactform			{ display: inline-block; vertical-align:top; width: 70%; margin: 10px 0 0 30px; font-size: 12px }
.contact .contactform	.col2	{ display: inline-block; width: 47% }
.contactform input, .contactform textarea, .contactform select {	position: relative;	border: 1px solid #CCC; font-family: 'Raleway';	color: #333;	font-size: 13px;	line-height: 20px;	letter-spacing: 1px;	padding: 8px 16px;	margin: 0;	resize: none;}
.contactform  input, .contactform select			 	{ display: inline; width: 90% }
.contactform  textarea			{ width: 90% }
.contactform  label				{ display: block; text-transform:uppercase;	margin: 13px 0 2px 0; }
.contactform  input[type="checkbox"] { width: 17px; height: 17px; margin: 5px 0 5px 60px; vertical-align: middle }
.contactform input[type="submit"] {	width: 90%; height: 40px; background-color: #9D000C; color:#FFF;	border: none;	cursor: pointer;	text-align: center;	vertical-align: middle;	font-size: 15px; letter-spacing: 5px;  text-transform:uppercase	}
.contactform input[type="submit"]:hover		{	background-color: #767171	}	

.contact .contactinfos			{ display: inline-block; vertical-align:top; width: 25%; font-size:14px; text-align:center; line-height: 20px; font-weight: bold; margin-top: 2% }
.contact .contactinfos .titre	{ letter-spacing: 5px;  margin: 15px 0 1px 0; color: #9D000C; font-size:16px; text-transform: uppercase }
.contact .contactinfos .titre img	{ width: 125px; height: auto }
.contact .contactinfo			{ border: 1px solid #CCC; padding: 10px; background-color: #F0F1F2 }
.contact .contactinfo a:hover	{ color:#9D000C }
.contact .contactinfo .tel		{ font-size: 16px; letter-spacing: 3px }
.contact .contactinfo .mail		{ font-size: 14px; letter-spacing: 2px; text-transform: uppercase; padding: 2% 0 }
.contact .contactinfo img		{ width: 38px; height: auto; margin-top: 10px }

.contact .map		 			{ display: block; width: 100%; border-top: 1px solid #000 }
.contact .map .carte  			{ background-color: #AAA }
.contact .map iframe 			{ width: 100% !important; height: 300px!important; padding: 0; margin: 0 }
.contact .map h3	 			{ text-align: center; margin: 1% 0 }

@media (max-width: 900px){
.contact .contactinfos			{ width: 35%;  }
.contact .contactform, .contact .contactinfos			{  display: block; width: 100%; }
}
@media (max-width: 1200px){
.contact section .container		{ width: 100%; padding: 0 }
}
@media (max-width: 768px){
.contact .contactform	.col2	{ display: block; width: 90% }
}

.grpd					{ padding: 0 10% }
.grpd .blocsubdiv 		{ padding: 1%; background-color: #627788; color: #FFF; text-transform:uppercase; letter-spacing: 4px; text-align:center}
.grpd .blocsubdiv p		{ text-transform: none; font-size: 13px; letter-spacing: normal }
.grpd .grpd-logo img 	{ width: 100px; height: auto }
.grpd .grpd-blocs		{ font-size: 12px; text-align: center; margin-top: 2% }
.grpd .grpd-bloc		{ display: inline-block; width: 31%; min-height: 302px; box-sizing: border-box; border: 1px solid #627788; text-align: justify; padding: 2% 2% 1% 2%; margin: 1%; vertical-align:top; line-height: 1.3em }
.grpd h2 				{ color: #22384D; text-align: center; line-height: 1.4em; background-color: transparent }
.grpd .grpd-icone 	 	{ text-align: center }
.grpd .grpd-icone img 	{ width: 48px; height: auto }

@media (max-width: 1200px){
.grpd					{ padding: 0 5% }
}

@media (max-width: 768px){
.grpd .grpd-bloc		{ display: inline-block; width: 45% }
}
@media (max-width: 480px){
.grpd form input 		{ font-size: 13px; letter-spacing: 2px }
.grpd .grpd-bloc 		{ display: block; width: 90%; margin: auto; min-height: inherit; margin-bottom: 2% }
}

.legal					{ margin-top: 5%; font-size: 11px; line-height: 1.1em; text-align: justify; font-weight: normal }

.cgv h3					{ font-size: 18px; letter-spacing: 4px; text-transform: uppercase; color: #333 }
.cgv h4					{ border-left: 4px solid #9D000C; border-bottom: 1px solid #9D000C; padding: 10px 15px; font-size: 16px; letter-spacing: 2px; color: #333 }

.band-infoscommande			{ background-color: #DDD; width: 100%; text-align: center; border-top: 1px solid #AAA; text-transform:  uppercase; letter-spacing: 2px }
.band-infoscommande ul		{ margin: 0; padding: 0 }
.band-infoscommande li		{ display: inline-block; vertical-align: top; width: 33%; padding-bottom: 10px }
.band-infoscommande img		{ width: 64px; height: auto; padding: 10px }
.band-infoscommande img.bank{ width: 90px; padding: 0 }
.band-infoscommande span	{ display: block; margin: 0 5%; padding-top: 10px; border-top: 1px solid #AAA; line-height: 1.4em; font-size: 12px }
.band-infoscommande li a:hover	{ color: #9D000C; font-weight: bold }
@media (max-width: 992px){
.band-infoscommande ul		{ padding: 0 }
.band-infoscommande li		{ width: 47% }
}

@media (max-width: 480px){
.band-infoscommande li		{ display: block; width: 95% }
}

	
footer 				{ width: 100%; padding-bottom: 20px; font-size: 14px; letter-spacing: 2px; color: #F0F1F2 }
footer a 			{ color:#333 }
footer a:hover 		{ color:#9D000C; font-weight: bold }
footer .info 		{ display: inline-block; vertical-align: middle;  width: 33%;	padding: 1%; line-height: 1.5em }
footer .info h5 	{ margin-bottom:10px;	font-weight:normal;	text-transform:uppercase; letter-spacing: 2px;	font-size: 13px; margin: 0 0 5px 0 }
footer .info img	{ width: 90px; height: auto }
footer .ref			{ border-right: 2px solid #9D000C; text-align: right }
footer .ref	img		{ width: 120px; height: auto }


@media (max-width: 1140px){
.band-infos .tel					{ font-size: 16px }	
}
@media (max-width: 992px){
.band-infos					{ width: 100% }
}

@media (max-width: 768px){
.band-infos .bloc-info		{ width: 48% }
footer .info 				{ width: 48% }
footer .ref	img				{ height: 48px; width: auto }
}


@media (max-width: 1200px){

}
@media (max-width: 992px){

}
@media (max-width: 768px){

}
@media (max-width: 480px){

}