/***********************************************************************************/
/* WWW.COM1CREA.COM                                                                */
/* FEUILLE DE STYLE INDEX                                                          */
/***********************************************************************************/

@charset "UTF-8";

/***********************************************************************************/
/* SLIDER                                                                          */
/***********************************************************************************/

#slider {
	position: relative;
	width: 100%;
	height: 385px;
	background: #FFF;
	-moz-box-shadow: 0px 0px 7px #999; 
	-webkit-box-shadow: 0px 0px 7px #999; 
	box-shadow: 0px 0px 7px #999; 
	}
	

/***********************************************************************************/
/* DOMAINES DE COMPETENCE                                                          */
/***********************************************************************************/

#competences {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 30px;
	}
	#competences ul {
		position: relative;
		float: left;
		list-style-type: none;
		margin: 20px 0 0 0;
		padding: 0;
		}
		#competences ul li {
			display: block;
			position: relative;
			float: left;
			width: 310px;
			height: 200px;
			background: #FFF;
			margin-right: 35px;
			-moz-box-shadow: 0px 0px 7px #999; 
			-webkit-box-shadow: 0px 0px 7px #999; 
			box-shadow: 0px 0px 7px #999; 
			}
			#competences ul li:nth-child(3n) {margin-right: 0}
			#competences ul li.identite {background: url(../img/habillage/index/bg-identite-visuelle.png) bottom right no-repeat #FFF}
			#competences ul li.print {background: url(../img/habillage/index/bg-supports-print.png) bottom right no-repeat #FFF}
			#competences ul li.web {background: url(../img/habillage/index/bg-supports-web.png) bottom right no-repeat #FFF}
	#competences img {
		position: relative;
		float: left;
		}
	#competences h2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 26px;
		font-weight: normal;
		line-height: 28px;
		text-align: left;
		width: auto;
		padding-top: 30px;
		background: none;
		}
		#competences h2 span {
			font-size: 30px;
			font-weight: bold;
			text-transform: uppercase;
			}
	#competences h3 {
		display: block;
		float: left;
		width: 270px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		color: #999;
		padding: 0 20px;
		line-height: 22px;
		}	
	#competences a {
		position: absolute;
		display: block;
		width: 310px;
		height: 200px;
		background: #000;
		opacity: 0;
		-webkit-transition-property: opacity;
		-webkit-transition-duration: 0.6s;
		-moz-transition-property: opacity;
		-moz-transition-duration: 0.6s;
		transition-property: opacity;
		transition-duration: 0.6s;
		}
		#competences a:hover {opacity: 1}
			#competences ul li.identite a:hover {background: url(../img/habillage/index/realisations-identite-visuelle.png) no-repeat}
			#competences ul li.print a:hover {background: url(../img/habillage/index/realisations-supports-print.png) no-repeat}
			#competences ul li.web a:hover {background: url(../img/habillage/index/realisations-supports-web.png) no-repeat}


/***********************************************************************************/
/* QUI SUIS-JE ?                                                                   */
/***********************************************************************************/

#jcr {
	position: relative;
	float: left;
	width: 48%;
	margin-bottom: 30px;
	display: none;
	}
	

/***********************************************************************************/
/* CONTACT                                                                         */
/***********************************************************************************/

#contact {
	position: relative;
	float: right;
	width: 48%;
	margin-bottom: 30px;
	display: none;
	}
	

/***********************************************************************************/
/* REFERENCES                                                                      */
/***********************************************************************************/

#references {
	position: relative;
	float: left;
	width: 100%;
	margin: 15px 0 30px 0;
	}
	#references ul {
		position: relative;
		float: left;
		list-style-type: none;
		margin: 0;
		padding: 0;
		}
		#references ul li {
			position: relative;
			float: left;
			margin-bottom: 10px;
			}
	#references img {
		/*filter: url(filters.svg#grayscale);	 
		filter: gray;
		-webkit-filter: grayscale(1);
		*/
		filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
		opacity: 0.5;
		-webkit-transition-property: opacity;
		-webkit-transition-duration: 0.6s;
		-moz-transition-property: opacity;
		-moz-transition-duration: 0.6s;
		transition-property: opacity;
		transition-duration: 0.6s;
		}
		#references img:hover {
			/*filter: none;
			-webkit-filter: none;*/
			filter: grayscale(0);
			-webkit-filter: grayscale(0);
			-moz-filter: grayscale(0);
			-o-filter: grayscale(0);
			-ms-filter: grayscale(0);
			opacity: 1;
			}
		#references img[data]:hover:after {background: red}