@charset "UTF-8";
/* CSS Document */


/* --------------------- FONTS ----------------------- */

@font-face {
    font-family: 'deftone';
    src: url('deftone/deftone-webfont.eot');
    src: url('deftone/deftone-webfont.eot?#iefix') format('embedded-opentype'),
url('deftone/deftone-webfont.woff') format('woff'),
url('deftone/deftone-webfont.ttf') format('truetype'),
url('deftone/deftone-webfont.svg#deftone_stylusregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bahiana';
    src: url('bahiana/bahiana-regular-webfont.eot');
    src: url('bahiana/bahiana-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('bahiana/bahiana-regular-webfont.woff') format('woff'),
url('bahiana/bahiana-regular-webfont.ttf') format('truetype'),
url('bahiana/bahiana-regular-webfont.svg#bahiana_stylusregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* --------------------- BODY ----------------------- */

body{
	background:url(../images/subtle_grunge.png) repeat;
	font-weight: normal;
	font-family:'bahiana';
	}
	
/*---------------------- index - page d'accueil ----------------*/

#index{
	font-family: 'bahiana';
	margin: 50px 0 0;
	}
	
#index nav{
	position: relative;
	clear: both;
	width: 346px;
	margin-left: -15px;
	}

#index nav ul{
	margin-left: 8px;
	}

#index nav ul li{
	border-radius: 100px;
	box-shadow: 0px 0px 10px #CCC inset;
	width: 100px;
	height: 40px;
	padding: 30px 0px;
	-webkit-animation: nomAnim3 2s linear infinite;
	-moz-animation: nomAnim3 2s linear infinite;
	-ms-animation: nomAnim3 2s linear infinite;
	-o-animation: nomAnim3 2s linear infinite;
	animation: nomAnim3 2s linear infinite;
	}
	
#index nav ul li:hover{
	box-shadow: 0px 0px 10px #888 inset;
	}

#index nav ul li a{
	color: rgba(226,0,122,0.5);
	padding: 25px 10px;
	margin-top: -20px;
	}

#index nav ul li a:hover{
	color: rgba(226,0,122,1);
	}
	
#index nav ul li:nth-child(2){
	-webkit-animation: nomAnim2 2s linear infinite;
	-moz-animation: nomAnim2 2s linear infinite;
	-ms-animation: nomAnim2 2s linear infinite;
	-o-animation: nomAnim2 2s linear infinite;
	animation: nomAnim2 2s linear infinite;
	}
	
#index nav ul li:nth-child(3){
	-webkit-animation: nomAnim4 2s linear infinite;
	-moz-animation: nomAnim4 2s linear infinite;
	-ms-animation: nomAnim4 2s linear infinite;
	-o-animation: nomAnim4 2s linear infinite;
	animation: nomAnim4 2s linear infinite;
	}
	
@-webkit-keyframes nomAnim2{
     from { width: 100px; padding: 30px 0px; margin: 40px 1px; }
     50%  { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     to   { width: 100px; padding: 30px 0px; margin: 40px 1px;}
}
@-moz-keyframes nomAnim2{
     from { width: 100px; padding: 30px 0px; margin: 40px 1px; }
     50%  { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     to   { width: 100px; padding: 30px 0px; margin: 40px 1px;}
}
@-ms-keyframes nomAnim2{
     from { width: 100px; padding: 30px 0px; margin: 40px 1px; }
     50%  { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     to   { width: 100px; padding: 30px 0px; margin: 40px 1px;}
}
@-0-keyframes nomAnim2{
     from { width: 100px; padding: 30px 0px; margin: 40px 1px; }
     50%  { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     to   { width: 100px; padding: 30px 0px; margin: 40px 1px;}
}
@keyframes nomAnim2{
     from { width: 100px; padding: 30px 0px; margin: 40px 1px; }
     50%  { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     to   { width: 100px; padding: 30px 0px; margin: 40px 1px;}
}

@-webkit-keyframes nomAnim3{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px 40px 6px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@-moz-keyframes nomAnim3{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px 40px 6px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@-ms-keyframes nomAnim3{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px 40px 6px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@-o-keyframes nomAnim3{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px 40px 6px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@keyframes nomAnim3{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px 40px 6px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}

@-moz-keyframes nomAnim4{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@-webkit-keyframes nomAnim4{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@-ms-keyframes nomAnim4{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@-o-keyframes nomAnim4{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
@keyframes nomAnim4{
     from { width: 100px; padding: 35px 5px; margin: 35px 1px;}
     50%  { width: 100px; padding: 30px 0px; margin: 40px 1px;}
     to   { width: 100px; padding: 35px 5px; margin: 35px 1px;}
}
	
#index header, #about{
	width: 300px;
	margin: auto;
	}
	
#index h1, #about h1{
	font-size: 81px;
	text-shadow: 2px 0px 0px rgb(226,0,122);
	text-align: center;
	margin-left: -3px;
	}

#index h2, #about h2{	
	text-align: center;
	font-size: 44px;
	color: rgb(226,0,122);
	}

#index h3{
	color: #666;
	}	

#index li{
	float: left;
	}

#index header li:nth-child(1) h3{
	font-size: 123px;
	line-height: 97px;
	}
	
#index header li:nth-child(2) h3{
	font-size: 77px;
	line-height: 71px;
	}
	
#index header li:nth-child(3) h3{
	line-height: 25px;
	font-size: 43px;
	}
	
#index header li:nth-child(4) h3{
	font-size: 108px;
	line-height: 77px;
	}
	
#index header li:nth-child(5) h3, #index header li:nth-child(6) h3{
	font-size: 61px;
	line-height: 54px;
	padding-left: 5px;
	}
	
#index header li:nth-child(7) h3{
	font-size: 94px;
	line-height: 59px;
	padding-left: 2px;
	}
	
#index header li:nth-child(2n) h3{
	color: #AAA;
	}
	
#index header li:nth-child(8) h3{
	font-size: 40px;
	padding-left: 27px;
	margin-top: 50px;
	color: rgb(226,0,122);
	}
	


/* --------------------- HEADER ----------------------- */
	
#header h2, nav ul li a{
	color: rgb(226,0,122);
	font-family: 'bahiana';/*'deftone';*/
	font-size: 37px;
	}

#header{
	padding: 0 10px;
	position: absolute;
	z-index: 6;
	top: 0;
	width: auto;
	}
	
#header h1{
	font-family: bahiana;
	color: rgb(226,0,122);
	font-size: 55px;
	margin-left: 35px;
	line-height: 36px
	}
	
#header h2{
	line-height: 32px;
	font-size: 31px;
	margin-left: 35px;
	}

/* --------------------- NAV ----------------------- */

nav{
	margin: 0px auto;
	width:100%;
	position: fixed;
	top: 0;
	z-index: 100;
	}

nav ul{
	text-align: center;
	}

nav ul li a{
	font-size: 34px;
	color: #CCC;
	}
	
nav ul li a.active{
	font-size: 34px;
	color: rgb(226,0,122);
	}
	
nav ul li{
	display: inline-block;
	text-align: center;
	width: 231px;
	}

#nav_principale li a{
	font-family: Arial;
	color: #666;
	text-transform: uppercase;
	font-style:italic;
	padding: 10px 0;
	display: block;
	background:url(../images/subtle_grunge.png);
	}

#box{
	position: relative;
	-moz-border-radius: 4px;
	background:url(../images/subtle_grunge.png);
	border-radius: 4px;
	padding: 15px 0;
	color: rgba(0,0,0,0.8);
	text-shadow: 0 1px 0 #fff;
	margin: 0px auto;
	border-bottom: 1px solid #DDD;
	}

#box:before, #box:after, #nav_principale li a:before, #nav_principale li a:after{
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 14px;
	left: 10px;
	width: 45%;
	top: 55%;
	background: rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.4);
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	}

#box:after, #nav_principale li a:after{
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	right: 10px;
	left: auto;
	}
	
/* ---------------------- sous-nav --------------------------- */

#categories, #sous_categories{
	position: fixed;
	top: 50%;
	left: 20px;
	width: 200px;
	margin-top: -170px;
	}
	
#sous_categories{
	position: fixed;
	top: 50%;
	right: 70px;
	left: auto;
	width: 200px;
	margin-top: -170px;
	}


@-webkit-keyframes nomAnim{
     from { width: 110px; padding: 48px 0; }
     50%  { width: 130px; padding: 54px 0; }
     to   { width: 110px; padding: 48px 0; }
}


#categories li, #sous_categories li{
	width: 110px;
	display: block;
	box-shadow: -2px 2px 7px 1px rgba(226,0,122,0.1), 0px 0px 21px 4px #FFF inset;
	border-radius: 104px;
	margin: -20px 15px;
	float: left;
	padding: 40px 0;
	}
	
#categories li:nth-child(even){
	margin-left: 120px;
	display: block;
	}
	
#sous_categories li:nth-child(odd){
	margin-left: 120px;
	display: block;
	}
	
#categories a, #sous_categories a{
	font-family: 'bahiana';
	color: #BBB;
	text-align: center;
	font-size: 28px;
	text-shadow: 0px 0px 2px 1px #FFF;
	padding: 30px 0;
	}
	
#categories a:hover, #sous_categories a:hover{
	color: #333;
	}

#categories a.actif, #sous_categories a.actif{
	color: rgb(226,0,122);
	}
	
	
/* --------------------- TOUS LES ARTICLES ----------------------- */

#wrapper{
	width:100%;
	margin:100px auto 50px;
	}
	
.work{
	margin: 0px 0px 0px 0px;
	text-align: center;
	}
	
.work article{
	width: auto;
	display: inline-block;
	margin: 0px 5px 15px;
	padding: 0px 20px 20px;
	border : 1px solid pink;
	text-align: left;
	}
	
.work article:nth-child(5n){
	}
	
.work article a:hover{
	}

.work article a{
	}
	
.work article .img_pte{
	}

.work article img{
	height: 300px;
	}
	
.work article header{
	text-align: left;
	margin: 5px 0px;
	font-size: 33px !important;
	color: #000;
	}

/*
@-webkit-keyframes tourne{
     from { border-radius: 40px 100px 40px 100px;}
     50%  { border-radius: 100px 40px 100px 40px;}
     to   { border-radius: 40px 100px 40px 100px;}
}
@-moz-keyframes tourne{
     from { border-radius: 40px 100px 40px 100px;}
     50%  { border-radius: 100px 40px 100px 40px;}
     to   { border-radius: 40px 100px 40px 100px;}
}
@-ms-keyframes tourne{
     from { border-radius: 40px 100px 40px 100px;}
     50%  { border-radius: 100px 40px 100px 40px;}
     to   { border-radius: 40px 100px 40px 100px;}
}
@-o-keyframes tourne{
     from { border-radius: 40px 100px 40px 100px;}
     50%  { border-radius: 100px 40px 100px 40px;}
     to   { border-radius: 40px 100px 40px 100px;}
}
@keyframes tourne{
     from { border-radius: 40px 100px 40px 100px;}
     50%  { border-radius: 100px 40px 100px 40px;}
     to   { border-radius: 40px 100px 40px 100px;}
}

.work article:hover img{
	margin-top: 0px;
}


.work article:hover{
	-webkit-animation: tourne 2s ease-out infinite;
	-moz-animation: tourne 2s ease-out infinite;
	-ms-animation: tourne 2s ease-out infinite;
	-o-animation: tourne 2s ease-out infinite;
	animation: tourne 2s ease-out infinite;
	}


.work article:hover header{
	border-radius: 100px 0px 100px 0px;
	-webkit-border-radius: 100px 0px 100px 0px;
	-moz-border-radius: 100px 0px 100px 0px;
	-o-border-radius: 100px 0px 100px 0px;
	-ms-border-radius: 100px 0px 100px 0px;
	display: block;
	z-index: 3;
	-webkit-animation: tourne 2s ease-out infinite;
	-moz-animation: tourne 2s ease-out infinite;
	-ms-animation: tourne 2s ease-out infinite;
	-o-animation: tourne 2s ease-out infinite;
	animation: tourne 2s ease-out infinite;
	}
	*/
	
.work article header h2, .work article header h1{
	z-index: 20 !important;
	color: rgb(226,0,122);
	position: relative;
	display: inline-block;
	font-size: 25px;
	}
	
.work article header h2{
	color: darkgrey;
	font-size: 22px;
	}
	
/* ------------------------- pages détails du portfolio ---------------------- */

#next_prec .next, #next_prec .prec{
	position: fixed;
	top: 50%;
	right: 0px;
	font-size: 37px;
	background: url(../images/bouton_octogonal.png) 0px -60px no-repeat;
	width: 52px;
	height: 52px;
	width: 30px;
	background-size: 200%;
	padding-top: 9px;
	}
	
#next_prec .prec:hover{
	background-position: -30px 2px;
	}
	
#next_prec .next:hover{
	background-position: 0px 2px;
	}
	
#next_prec .prec{
	left: 0px;
	right: auto;
	background-position: -30px -60px;
	}
	
#next_prec .noVisible{
	display: none;
	}

.details{
	width: 1200px;
	margin: auto;
	}

.details header, .details .images{
	width: 30%;
	float: left;
	}
	
.details .images{
	width: 817px;
	}

.details .images .taille1{
	width: 700px;
	}
	
.details .images .taille2{
	width: 346px;
	}
	
.details .images .taille3{
	width: 233px;
	}
	
.details .images .taille4{
	width: 455px;
	float: right;
	}
	
.details .images .taille5{
	width: 455px;
	float: left;
	}

.details .images .taille6{
	width: 400px;
	float: left;
	}
	
.details .images .taille7{
	width: 400px;
	float: right;
	}
	
/*.details.no_texte header{
	width: 24%;
	}
	
.details.no_texte .images{
	width: 75%;
	}*/
	
.details .images img, #cartons_img img{
	box-shadow: -1px -1px 7px 0px rgba(226,0,122,0.1);
	border: 4px double #FFF;
	float: left;
	}

#cartons_img{
	text-align: center;
	width: 70%;
	margin: auto;
	}
	
#cartons_img img{
	margin: 10px;
	display: inline-block;
	}

.details h1, .details h2, .details h3{
	font-family: 'bahiana';
	font-size: 32px;
	text-shadow: 1px 1px 0px rgb(226,0,122);
	}
	
.details h2{
	text-shadow: none;
	font-size: 24px;
	margin-bottom: 25px;
	border-bottom: 1px solid rgb(255,0,122);
	padding-bottom: 10px;
}

.details h2 a{
	color: rgb(226,0,122);
	font-size: 12px;
	font-family: monospace;
	float: right;
	padding: 10px 10px 0 0;
	}

.details h3{
	font-size: 30px;
	text-shadow: none;
	margin-bottom: 5px;
	}

.details p{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	padding-bottom: 10px;
	width: 93%;
	text-align:justify;
	}
	
	
/* ---------------------------- contact ----------------------------------- */

#contact{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 500px;
	height: 500px;
	overflow: hidden;
	margin: 0 auto;
	padding: 1px;
	}
	
.titre_contact{
	text-align: center;
	font-size: 54px;
	width: 270px;
	margin: 0px auto 30px;
	line-height: 42px;
	text-shadow: 2px 0px rgb(226,0,122);
	}

.titre_contact span{
	font-size: 52px;
	}

#contact fieldset{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 480px;
	height: 470px;
	padding: 15px 10px;
	border: 1px dotted rgb(226,0,122);
	}

#contact label{
	display: block;
	text-align: center;
	font-family: 'bahiana';
	font-size: 30px;
	}
	
#captcha-wrap label{
	font-size: 22px;
	color: #777;
	}

#contact input, #contact textarea{	
	display: block;
	margin: 5px auto 10px;
	text-align: center;
	width: 300px;
	height: 20px;
	border: none;
	border-bottom: 1px solid #E2007A;
	color: rgba(226, 0, 122, 0.7);
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	box-shadow: 0px 5px 8px 0px #D1D1D1;
	background: rgba(255,255,255,0.3);
	}
	
#contact textarea{
	text-align: left;
	height: 90px;
	}

#contact .submit{
	height: 32px;
	background: #E2007A;
	color: white;
	font-family: bahiana;
	font-size: 25px;
	line-height: 10px;
	vertical-align: top;
	-webkit-box-align: center;
	-moz-box-align: center;
	white-space: pre;
	box-shadow: none;
	cursor: pointer;
	}
	
.message_envoye{
	position: absolute;
	left: 50%;
	margin-left: 294px;
	top: 433px;
	font-size: 30px;
	padding: 10px;
	border: 1px dashed rgb(226,0,122);
	}
	
.message_envoye span{
	display: block;
	font-size: 27px;
	color: rgb(226,0,122);
	}
	

/* ---------------------------- about ----------------------------------- */

#about{
	width: 300px;
	margin-right: 50%;
	}

#about h1{
	margin: 0px 0px 20px;
	color: rgb(226,0,122);
	text-shadow: 3px 0px 5px #999;
	}

#about h2{
	margin: 30px 0 10px;
	color: rgb(226,0,122);
	text-shadow: 2px 0px 2px #999;
	}
	
#about ul{
	margin-left: 8px;
	}

#about ul li:nth-child(1){
	font-size: 31px;
	width: 129px;
	line-height: 28px;
	float: left;
	}
	
#about ul li:nth-child(1) strong{
	font-size: 43px;
	}
	
#about ul li:nth-child(2){
	font-size: 79px;
	line-height: 49px;
	color: #999;
	}

#about ul li:nth-child(3){
	font-size: 47px;
	line-height: 35px;
	color: #CCC;
	clear: both;
	width: 300px;
	}	

#about ul li:nth-child(4){	
	width: 206px;
	font-size: 32px;
	float: left;
	line-height: 29px;
	color: #666;
	margin-top: 3px;
	}
	
#about ul li:nth-child(4) span{
	font-size: 31px;
	}	
	
#about ul li:nth-child(4) strong{
	font-size: 34px;
	}	
	
#about ul li:nth-child(5){	
	font-size: 40px;
	line-height: 44px;
	color: #333;
	margin-top: 8px;
	}	
	
#about ul li:nth-child(5) span{	
	font-size: 62px;
	display: block;
	}	

#about ul.design li{
	width: auto;
	float: left;
	font-size: 30px;
	clear:none;
	margin: 0;
	line-height: normal;
	font-weight: normal;
	}
	
#about ul.design li:nth-child(1){
	font-size:98px;
	line-height: 81px;
	}
	
#about ul.design li:nth-child(2){
	font-size:41px;
	line-height: 52px;
	}
	
#about ul.design li:nth-child(3){
	font-size:50px;
	line-height: 19px;
	}
	
#about ul.design li:nth-child(4),#about ul.design li:nth-child(5){
	font-size:53px;
	line-height: 44px;
	}
	
#about ul.design li:nth-child(6),#about ul.design li:nth-child(7){
	font-size:48px;
	line-height: 44px;
	}
	
#about ul.design li:nth-child(7), #about ul.design li:nth-child(12), #about ul.design li:nth-child(4){
	color: #999;
	}
	
#about ul.design li:nth-child(8){
	width: 153px;
	line-height: 43px;
	font-size: 65px;
	margin-top: 3px;
	color: #999;
	}
	
#about ul.design li:nth-child(8) strong{
	font-size: 55px;
	}
	
#about ul.design li:nth-child(9){
	font-size: 80px;
	line-height: 57px;
	}
	
#about ul.design li:nth-child(10){
	font-size: 39px;
	line-height: 42px;
	}
	
#about ul.design li:nth-child(11),#about ul.design li:nth-child(12){
	font-size: 43px;
	line-height: 28px;
	height: 36px;
	padding: 0 1px;
	}
#about .competences{
	position: absolute;
	left: 50%;
	top: 440px;
	padding: 10px;
	border-left: 1px solid rgba(226,0,122,1.00);
	}
	
#about .competences li, #about .formation li{
	font-size: 34px !important;
	text-align: left;
	float: none !important;
	width: 300px !important;
	line-height: 37px !important;
	margin: 0px !important;
	color: #444 !important;
	}
	
#about .formation p{
	font-size: 12px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: left;
	line-height: 20px;
	margin: 12px 0px;
	}
	
#about .formation p a{
	font-size: 13px;
	text-transform: uppercase;
	color: rgb(226,0,122);
	}
	
#about .formation p a:hover{
	color: #999;
	}
	
#about .formation{
	position: absolute;
	left: 50%;
	top: 126px;
	padding: 3px 10px;
	border-left: 1px solid rgba(226,0,122,1.00);
	}
	
.reseauSociaux{
	padding: 4px 0px;
	width: 41px;
	border-radius: 42px;
	box-shadow: 1px 1px 1pc rgba(226,0,122,0.2);
	display: inline-block;
	text-align: center;
	color: rgb(226,0,122) !important;
	margin: 8px 5px 0px;
	line-height: 33px;
	font-size: 28px !important;
	font-family: 'bahiana';
	}
	
.reseauSociaux title{
	display: block;
	background: red;
	}
	
.reseauSociaux:hover{
	background: rgba(226,0,122,1.00);
	color: #FFF !important;
	}
	

/* ------------------ MEDIA QUERIES -------------------- */

@media all and (max-device-width: 600px)
{
	#cartons_img{
	text-align: center;
	width: 90%;
	margin: auto;
	}
	
	#cartons_img img{
	margin: 10px;
	display: inline-block;
	float: none;
	width: 250px;
	}
	
	/**/
	
	#index{
		margin: 10px 0px 0px;
		}
		
	/*#index h1{
		font-size: 55px;
		line-height: 45px;
		}
		
	#index h2{
		font-size: 31px;
		}*/
	#wrapper{
		width: 100% !important;
		margin-top: 80px;
		}
		
	#about{
		margin: 0px auto;
		}
	
	#about ul{
		overflow: hidden;
		}
	
	#about .competences, #about .formation{
		position: relative;
		left: auto;
		right: auto;
		border-top: 1px solid rgba(226,0,122,1.00);
		border-left: none;
		top: auto;
		margin-top: 20px;
		}
	/**/
	.details{
		width: 90%;
		margin: 0 5%;
		}
		
	.details header{
		width: 100%;
		float: none;
		}
		
	.details .images{
		width: 100%;
		}
		
	.details .images img{
		width: 100% !important;
		}
		
	#next_prec .next, #next_prec .prec{
		top: auto;
		bottom: 0px;
		}
	/**/
	#contact{
		width: 300px;
		transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		-webkit-transform: none;
		margin: auto;
		}
	
	#contact fieldset{
		width: 300px;
		padding: 0px;
		border: none;
		transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		-webkit-transform: none;
		}
	/**/
	#categories{
		display: none;
		}
		
	nav ul#box li{
		width: auto;
		}
		
	nav ul#box li a, nav ul#box li a.active{
		font-size: 25px;
		margin: 10px;
		}
		
	.work{
		margin: 0px auto;
		width: 320px;
		}
		
	.work article{
		width: 140px;
		height: 140px;
		margin: 10px
		}
}

/*@media screen and (min-width: 1445px) {
	.work{
		  margin-left: 310px;
		  width: 1170px;
	  }
	  
	.work article{
		margin: -75px 0px 0px;
		}
		
	.work article:nth-child(even){
		margin: 50px 0 0;
		}
}

@media screen and (max-width: 1444px) {
  .work{
	  margin-left: 280px;
  }
  
  .work article{
	margin: 50px 0px 0px;
	}
	
	.work article:nth-child(5n+2){
		margin: -75px 0 0;
		}
		
	.work article:nth-child(5n+4){
		margin: -75px 0 0;
		}
}


@media screen and (max-width: 1249px) {
  .work{
	  margin-left: 280px;
  }
  
  .work article{
	margin: -75px 0px 0px;
	}
	
.work article:nth-child(even){
	margin: 50px 0 0;
	}
}


@media screen and (max-width: 1055px) {
  .work{
	  margin-left: 280px;
  }
  
  .work article{
	margin: 50px 0px 0px;
	}
  
  .work article:nth-child(3n+2){
	margin: -75px 0 0;
	}
}

@media screen and (max-width: 861px) {
	
	.work article{
		margin: -75px 0px 0px;
		}
		
	.work article:nth-child(even){
		margin: 50px 0 0;
		}
}*/


/* CHANGEMENT DE COULEUR POUR TOUT LE SITE */

.color_btn{
	display: inline-block;
	width: 20px;
	height: 20px;
	background: rgba(226,0,122,0.7);
	}
	
.orange{
	color: rgba(255,148,0,1.00) !important;
	}
	
.background-orange{
	background-color: rgba(255,148,0,0.7) !important;
	}

.bleu{
	color: rgba(40,189,212,0.70) !important;
	}
	
.background-bleu{
	background-color: rgba(40,189,212,0.70) !important;
	}


/* test */

.test-affiche{
	box-shadow: 8px 8px 12px 0px #BBB;
	clear: both;
	display: block;
	margin: 550px auto;
	/*-webkit-animation: effet_affiche 2s linear infinite;*/
	}
	
@-webkit-keyframes effet_affiche{
     from { box-shadow: 8px 8px 12px 0px #BBB; width: 300px; height: 424px; }
     50%  { box-shadow: 13px 8px 12px 0px #BBB; width: 290px; height: 424px; }
     to   { box-shadow: 8px 8px 12px 0px #BBB; width: 300px; height: 424px; }
}