img					{	border:none;}
img.noselect 		{ opacity:0.5; filter:alpha(opacity=50); -moz-opacity:5 }
img:hover.estomp	{ opacity:0.8; filter:alpha(opacity=80); -moz-opacity:8 }

img.icone					{ width: 48px!important; height: auto!important }
img.iconesmall				{ width: 38px!important; height: auto!important }
img.iconeverysmall			{ width: 28px!important; height: auto!important }
img.iconeminus				{ width: 18px!important; height: auto!important }

img.iconelien				{ cursor: pointer; vertical-align:middle }
img.iconelien:hover			{ opacity:0.8; filter:alpha(opacity=80); -moz-opacity:8 }

a 	 			{ text-decoration: none; color: #5B373A }
a:hover 	 	{ color: #000 }

tr.fond:hover 	{ background-color: #DDD }

.blanc 			{ color:#F2F2F2 }
.blancG 		{ color:#F2F2F2; font-weight: bold }
.orange  		{ color:#ED8C10}
.orangeG 		{ color:#ED8C10; font-weight: bold}
.rouge  		{ color:#9D000C}
.rougeG 		{ color:#9D000C; font-weight: bold}
.noir	  		{ color:#000}
.noirG	 		{ color:#000; font-weight: bold}

.clair 			{ color:#D0D0CA}
.clairG 		{ color:#D0D0CA; font-weight: bold }
.moyen 			{ color:#9C9A97}
.moyenG 		{ color:#9C9A97;	font-weight: bold}
.fonce 			{ color:#656360 }
.fonceG 		{ color:#656360;	font-weight: bold }

.gras  			{ font-weight: bold }
.grasoff		{ font-weight: normal }
.bold			{ font-family: 'Raleway-Medium' }
.gauche  		{ text-align: left }
.droite  		{ text-align: right }
.centre  		{ text-align: center }
.justif  		{ text-align: justify }
.float-g  		{ float:left }
.float-d  		{ float:right }
.v-top 			{ vertical-align:top }
.milieu 		{ vertical-align:middle }
.retour			{ clear:both }
.cadre 			{ border:1px solid #CC0000 }
.curseur 		{ cursor: pointer }
.nocurseur 		{ cursor: default!important }
.opaque 		{ opacity:0.3; filter:alpha(opacity=30); -moz-opacity:3  }
.visible 		{ display: block; visibility: visible }
.nonvisible 	{ display:none; visibility:hidden }
.minuscule		{ text-transform:none; }
.upper			{ text-transform: uppercase; }
.minus			{ font-size: 10px; text-transform:uppercase; letter-spacing: 2px }
.expli			{ font-size: 10px; text-transform:uppercase; letter-spacing: 2px; color:#9C9A97; padding: 2% }
.alert			{ padding: 10px; background-color:#EE8918; color:#FFF; font-size: 12px; letter-spacing: 4px; text-transform: none; text-align:center }
.alert	a		{ color:#FFF }
.message		{ padding: 10px; background-color:#949FAB; color:#FFF; font-size: 12px; letter-spacing: 4px; text-transform: none; text-align:center }
.filet			{ border-bottom: 1px solid #CCC; margin-top: 10px }
.filet-s		{ border-bottom: 1px solid #9C9A97; margin: 3px 0 }
.filet-d		{ border-bottom: 1px dashed #9C9A97; margin: 3px 0 }
.asterix		{ color: #ED8C10; font-weight: bold; font-size: 24px }

.m-top0			{ margin-top: 0!important }
.m-top1			{ margin-top: 1%!important }
.m-top2			{ margin-top: 2%!important }
.m-top3			{ margin-top: 3%!important }
.m-top5			{ margin-top: 5%!important }
.m-top10		{ margin-top: 10%!important }

.m-left1		{ margin-left: 1%!important }
.m-left2		{ margin-left: 2%!important }
.m-left3		{ margin-left: 3%!important }
.m-left5		{ margin-left: 5%!important }
.m-left10		{ margin-left: 10%!important }

.m-topbot1		{ margin-top: 1%!important; margin-bottom: 1%!important }
.m-topbot2		{ margin-top: 2%!important; margin-bottom: 2%!important }
.m-topbot3		{ margin-top: 3%!important; margin-bottom: 3%!important }
.m-topbot5		{ margin-top: 5%!important; margin-bottom: 5%!important }

.margin1		{ margin: 1%!important }
.margin2		{ margin: 2%!important }
.margin5		{ margin: 5%!important }
.margin10		{ margin: 10%!important }

.padding1		{ padding: 1%!important }
.padding2		{ padding: 2%!important }
.padding5		{ padding: 5%!important }

.p-left1		{ padding-left: 1%!important }
.p-left2		{ padding-left: 2%!important }
.p-left3		{ padding-left: 3%!important }
.p-left5		{ padding-left: 5%!important }
.p-left10		{ padding-left: 10%!important }

.l40			{ width: 40%!important }
.l60			{ width: 60%!important }
.l80			{ width: 80%!important }
.l90			{ width: 90%!important }
.l100			{ width: 100%!important }

span.info		{ display: inline-block; padding: 0 10px; color: #ED8C10; font-weight: bold; cursor: pointer }
div.info		{ display: inline-block; padding: 0 10px; color: #ED8C10; font-weight: bold; cursor: pointer }

.more		 	{ background-color: #9D000C; color: #FFF; margin: 2%; padding: 5px 10px; font-size: 12px; text-align:center; text-transform:uppercase; letter-spacing: 2px; cursor: pointer; font-weight: bold }
.more a			{ color: #FFF }
.more:hover	 	{ background-color: transparent; border-bottom: 2px solid #9D000C; cursor:pointer; color: #000 }
.more:hover a	{ color: #000 }

.bloc .more		 		{ display: block; max-width: 250px; background-color: #AAA; color: #252525; margin: 15px auto; font-size: 12px; text-align:center; text-transform:uppercase; letter-spacing: 2px; cursor: pointer }
.bloc .more a			{ display: block; margin: 15px }
.bloc .more:hover		{ background-color: #9D000C; transition: all 400ms ease-in-out; }
.bloc .more:hover a		{ color: #EEE }

.modalDialog {	position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8);	z-index: 99999;	opacity:0;	-webkit-transition: opacity 400ms ease-in;	-moz-transition: opacity 400ms ease-in;	transition: opacity 400ms ease-in; pointer-events: none; transform:scale(1); animation: fadeIn .5s
}
@keyframes fadeIn { 	0% { transform: scale(0); }  100% { transform: scale(1); }}
.modalDialog:target { opacity:1; pointer-events: auto }
.modalDialog > div { max-width: 700px; position: relative; margin: 10% auto; padding : 2%; background: #EEE; line-height: 1.8em }
.modalDialog .close 	{ font-size: 36px; color: #9D000C; font-weight: bold }


input, textarea, select		{ position: relative;	border: 1px solid #999;	color: #333; font-family: Raleway,'Century Gothic', Verdana; font-size: 13px; line-height: 20px; letter-spacing: 1px; padding: 8px 16px; margin: 0;	resize: none;}
input	 	{ display: block; width: 100%; height: 30px;}
input[type="radio"], input[type="checkbox"] { display: inline-block; width: 17px; height: 25px; margin: 2%; vertical-align: middle }
label				{ display: block; text-transform:uppercase;	margin: 10px 0 2px 0;	font-size: 10px;	letter-spacing: 3px; }
input[type="submit"], input[type="button"], input[type="reset"] {	width: 100%; height: 40px; background-color: #9D000C; color:#FFF; border: none; cursor: pointer; text-align: center; vertical-align: middle; font-size: 18px; letter-spacing: 3px; margin-top: 5%; font-weight: bold;  -webkit-appearance: none  	}
input[type="submit"].valider	{ display: inline; width: 80%; 	margin: 10px 1% 0 0; }
input[type="button"].cancel, input[type="reset"] 	{ display: inline; width: 19%;	margin: 10px 0 0 0; padding: 8px 4px; background-color: #767171 }
input[type="submit"]:hover		{	background-color: #767171;	border: 1px solid #AAA;	}	

input[type="submit"].bloc-small, input[type="button"].bloc-small, input[type="reset"].bloc-small	{ display: block; width: 100%; margin: 2% 0; max-width: 150px; height: auto }
input[type="submit"].bloc-small, input[type="button"].bloc-small, input[type="reset"].bloc-small	{ padding: 8px 4px; font-size: 0.9em }
input[type="button"].bloc-small, input[type="reset"].bloc-small 									{ background-color: #767171; padding: 4px; font-size: 0.8em }

input:hover 					{	border: 2px solid #333 }
.obli			{ font-size: 1.8em; font-weight: bold; line-height: 0 }

form.col label		{ display: inline-block; width: 30%; margin: 0 5% 1% 2%; text-transform: none; font-size: 14px; letter-spacing: 1px }
form.col input[type="text"], form.col input[type="password"], form.col input[type="submit"] { display: inline-block; width: 63%; margin-top: 2% }
form.col select { display: inline-block; width: 62%; margin-top: 2% }

@media (max-width: 550px){
form.col label				{ font-size: 13px }
}

A span.infobulle 	{ opacity:0; transform:scale(0) rotate(-12deg); transition:all .25s; position:absolute;    margin-top:20px;     margin-left:-50px;	 color:#999; background-color:#F0F1F2;     padding:3px 5px;     border-radius:2px;     box-shadow:0 0 1px rgba(0,0,0,.5); font-size:12px; font-style:normal !important; }
A:hover span.infobulle 	{ opacity:1;  transform:scale(1) rotate(0); }
A span.infobulletop 	{ opacity:0; transform:scale(0) rotate(-12deg); transition:all .25s; position:absolute;    margin-top:-22px;     margin-left:-80px;	 color:#DDD; background-color:#000;     padding:3px 5px;     font-size:12px; font-style:normal !important}
A:hover span.infobulletop 	{ opacity:1;  transform:scale(1) rotate(0); }
A span.infobulleentete 	{ opacity:0; transform:scale(0) rotate(-12deg); transition:all .25s; position:absolute;    margin-top:-60px;     margin-left:-90px;	 color:#666; background-color:#FEF6F6;     padding:3px 5px;     border-radius:2px;     box-shadow:0 0 1px rgba(0,0,0,.5); font-size:12px; font-style:normal !important; text-transform: none!important; line-height:normal!important}
A:hover span.infobulleentete 	{ opacity:1;  transform:scale(1) rotate(0); }

/*#skills*/
li.ui-menu-item				{ font-size: 12px; padding: 5px 10px }
li.ui-menu-item:hover		{ background-color: #333 }
li.ui-menu-item:hover a		{ color: #FFF }

#cookie-new					{ background-color: #9D000C; color: #FFF; padding: 10px; text-align:center; margin-bottom: 5px }
#cookie-new input			{ margin: 5px }

#cookie-notice				{ position: fixed; top: 0; width: 100%; box-sizing: border-box; color: #fff; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; background-color: #9D000C; text-align:center; padding: 1% 10%; z-index: 99 }
#cookie-notice img			{ float: right; margin: 0 1%; width: 48px; height: auto; cursor: pointer }

#toppage 							{ position:fixed; background-image:url(/images/haut-page.png); height: 48px; width: 48px; right: 2%;  bottom: 2%; cursor:pointer }
#toppage:hover 						{ opacity:0.8; filter:alpha(opacity=80); -moz-opacity:8 }
@media (max-width: 768px){
#toppage							{ display:none; visibility:hidden }
}

/* A SUPPRIMER /isaferat   */
@font-face { font-family: 'Raleway'; src: url('/fonts/Raleway-Regular.eot'); src: 
url('/fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/Raleway-Regular.woff') format('woff'), url('/fonts/Raleway-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Raleway-Medium'; src: url('/fonts/Raleway-Medium.eot'); src: 
url('/fonts/Raleway-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/Raleway-Medium.woff') format('woff'), url('/fonts/Raleway-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Raleway-Light'; src: url('/fonts/Raleway-Light.eot'); src: 
url('/fonts/Raleway-Light.eot?#iefix') format('embedded-opentype'), url('/fonts/Raleway-Light.woff') format('woff'), url('/fonts/Raleway-Light.ttf') format('truetype'); }
@font-face { font-family: 'Raleway-Bold'; src: url('/fonts/Raleway-Bold.eot'); src: 
url('/fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'), url('/fonts/Raleway-Bold.woff') format('woff'), url('/fonts/Raleway-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Raleway-ExtraBold'; src: url('/fonts/Raleway-ExtraBold.eot'); src: 
url('/fonts/Raleway-ExtraBold.eot?#iefix') format('embedded-opentype'), url('/fonts/Raleway-ExtraBold.woff') format('woff'), url('/fonts/Raleway-ExtraBold.ttf') format('truetype'); }