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



body, div, h1, h2, h3, h4, h5, h6, h7,p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0;
	padding: 0;
	border: 0;

}


a.liensgris {
	color: #EF3292;
	/*text-decoration:none;*/
}

a.liensgris2 {
	color: #666;
	/*text-decoration:none;*/
}

/* div content du milieu */
#content
{
    padding         : 70px 0 42px 0;
    width           : 900px;
    margin          : auto;
	Z-index: 5;
}



div#bodyhome {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 5px;
	/* [disabled]bottom: 41px; */
	left: 0px;
	background: url(im/image_homepage2.jpg);
	background-size: 1345px 768px;
	background-repeat: no-repeat;
	z-index: 10;
	}


div#videohome {
	width : 431px;
	height: 244px;
	position: fixed;
	top: 396px;
	bottom: 75px;
	left: 670px;
	Z-index: 20;
	background-color:black;
		}
	
div#texthome {
	width: 350px;
	height: 300px;
	position: fixed;
	top: 200px;
	left: 140px;
	font-family: "fjallaoneregular";
	font-style: normal;
	font-size: 34px;
	text-align:left;
	/*font-color : #FFF;*/
	color: #EF3292;
	z-index: 15;
	/* [disabled]background-color: #EF3292; */
}
	
/* div HAUT */
#header
{
    background: url(im/fd_header.bmp) repeat-x top left;
    height          : 114px;
    position        : fixed;
    top             : 0;
    width           : 100%;
    left            : 0;
	Z-index: 90;
}
	/* Baseline du haut */
#baseline 	{
	position : fixed;
	left : 200px;
	top : 70px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-color : #FFF;
	color: #EF3292;
	Z-index: 90;
	}


/* div BAS */




	/* Logo et ligne CDE */
	#logo_fixe { 
	position: fixed;
	left: 31px;
	top: 0px; 
	Z-index: 55;
	}
	
	#logo_bas { 
	position : fixed; 
	left : 31px; 
	bottom : 0px;
	Z-index: 55; 
		}
	
	div#ligne {
	width : 2px;
	position: fixed;
	top: 180px;
	bottom: 75px;
	left: 94px;
	Z-index: 99;
	background-color: #EF3292;
	}
	
	/* dans le footer */
	
div#footer {
	width: 100%;
	height: 41px;
	background: url(im/footer_fd.gif) repeat-x top left;
	position : fixed;
	bottom: 0px;
	text-align: center;
	z-index: 55;
	}

div#email {
	position : fixed;
	margin-bottom: 8px;
		left : 170px;
	bottom : 0px;
	width: 186px;
	height: 23px;
	Z-index: 65;
	background: url(im/fd_email.gif);
	background-repeat: no-repeat;
	
}


#mail {
	height:22px;
	bottom : 0px;
  /*line-height:22px;*/
  text-align:center;
	Z-index: 90;
	color: #CCC;
}


#social {
	top: 5px;
	padding-top: 5px;
	float: center;
	/* [disabled]margin: 100; */
	z-index: 2;
	margin-left: 150px;
	margin-right: auto;
}


div#cop {
	vertical-align: middle;
	float: right;
	margin-right: 50px;
	fontcolor: #CCC
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	color: #CCC;
	margin: 5px 30px;
}


/* menu header------------------*/
	
	#menu_header {
		height: 44px;
		width: 540px;
		float: right;
	margin-right: 20px;
	top : 55px;
	position: relative;
	display: inline-block;

	}
	
	#survol {
		display: inline-block;
	}
	
	#survol:hover
	{ background-color:#EF3292;

	
	}
	
	
/* mise en page du menu de navigation*/
nav {
	margin: 2px auto;
	text-align: left;
	font-family: "fjallaoneregular";
	font-weight: lighter;
	color: #FFFFFF;
	letter-spacing: 0.2em;
}

nav ul ul {
	display: none;	
}

	nav ul li:hover > ul {
	display: block;	
	}


nav ul {
	box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
	padding: 0 0px;
	border-radius: 2px;
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
		float: left;
	}
		nav ul li:hover {
	background: #EF3292;
	color: #EF3292;
	text-align: left;
		}
			nav ul li:hover a {
				color: ##FFFFFF;
			}
		
		nav ul li a {
			display: block; 
			padding: 10px 10px;
			color: #FFFFFF; 
			text-decoration: none;
			text-align: left;
		}
			
		
	nav ul ul {
		background: #EF3292; 
		border-radius: 0px; 
		padding: 0;
		position: absolute;
		color: #FFFFFF; 
		top: 100%;
	}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; position: relative;
			font-size: 13px;
		}
			nav ul ul li a {
				padding: 15px 20px;
				color: #FFFFFF;
			}	
				nav ul ul li a:hover {
					background: #4b545f;
				}
		
	nav ul ul ul {
		position: absolute; left: 100%; top:50;
	}
		
.SURMENU {
	text-align: left;
}
td {
	text-align: left;
	font-weight: bold;
	color: #666;
}


/* ==================================================
       div du milieu EXPERTISES
==================================================*/
.bloc_text {
	/*width: 400px;*/
	width: 34%;
	/*height: 550px;*/
	/*margin-top: 200px;*/
	top: 180px;
	left: 170px;
	position: relative;
}

div#body_exp {
	width: 100%;
	height: 1000px;
	position: relative;
	top: 50 px;
	/* [disabled]bottom: 41px; */
	background-color: #8FF;
	background: url(im/image_conseil_strategie.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
	}


div#body_graph {
	width: 100%;
	height: 1000px;
	position: inherit;
	top: 120 px;
	background-color: #FFF;
	background: url(im/image_creagraphique.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
	}	
	
div#body_design {
	width: 100%;
	height: 1000px;
	position: inherit;
	top: 120px;
	background-color: #FFF;
	background: url(im/image_design_agencement.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
	}	
	

div#body_rp {
	width: 100%;
	height: 1000px;
	position: inherit;
	top: 120px;
	background-color: #FFF;
	background: url(im/image_RP.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
	}	
	
	
div#body_digi {
	width: 100%;
	height: 1000px;
	position: inherit;
	top: 120px;
	background-color: #FFF;
	background: url(im/image_Com_digitale.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
	}	


/* ==================================================
       div du milieu CONTACT
==================================================*/


div#bodycont {
	width: 100%;
	height: 85%;
	position: absolute;
	top: 114px;
	bottom: 41px;
	background: url(im/image_contact.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	}
	
div#adresse {
	width: 350px;
	height: 350px;
	position: relative;
	display: block;
	top: 15%;
	padding: 5px;
	float: right;
	margin-right: 400px;
	z-index: 20;
}


div#mail {
	width: 400px;
	height: 350px;
	position: relative;
	display: block;
	top: 50px;
	padding: 5px;
	float: left;
	margin-left: 700px;
	z-index: 20;
}
	

div#formulairecontact {
	width: 400px;
	height: 320px;
	left: 150px;
	position: relative;
	padding: 5px;
	top: 120px;
	background-color: #EF3292;
	z-index: 20;
}	
	


#contact {
	display:block;
		float: right;
}
	
	
#textcontact {
		width: 100%;
		position: relative;
		top: 40px;
		z-index: 20;
}
	
	
/* formulaire de contact */	
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);





#form-main{
	width: 100%;
	/* [disabled]float:left; */
	position: relative;
	top: 40px;
	bottom: 41px;
	padding-top: 0px;
	padding-bottom:20px;
	z-index: 20;
}

#form-div {
	background-color:rgba(72,72,72,0.4);
	padding-left:20px;
	padding-right:20px;
	padding-top:20px;
	padding-bottom:20px;
	width: 450px;
	float: left;
	left: 420px;
	position: absolute;
  margin-top:20px;
	margin-left: -260px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  z-index: 20;
}

.feedback-input {
	color: #3c3c3c;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: 500;
	font-size: 16px;
	border-radius: 0;
	line-height: 18px;
	background-color: #fbfbfb;
	padding: 10px 10px 10px 10px;
	margin-bottom: 10px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 3px solid #F03292;
	color: #333333;
	outline: none;
	padding: 13px 13px 13px 13px;
}

.focused{
	color:#F03292;
	border:#F03292 solid 3px;
}

/* Icons ---------------------------------- 
#name{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#name:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 30px 30px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#comment{
	background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}
*/
textarea {
    width: 100%;
    height: 120px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}

#button-blue{
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	float:left;
	width: 100%;
	border: #fbfbfb solid 4px;
	cursor:pointer;
	background-color: #F03292;
	color:white;
	font-size:24px;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#button-blue:hover{
	background-color: rgba(0,0,0,0);
	color: #F03292;
}
	
.submit:hover {
	color: #3498db;
}
	
.ease {
	width: 0px;
	height: 74px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}

@media only screen and (max-width: 580px) {
	#form-div{
		left: 3%;
		margin-right: 3%;
		width: 88%;
		margin-left: 0;
		padding-left: 3%;
		padding-right: 3%;
		z-index: 20;
	}
}

/* ==================================================
       div du milieu EQUIPE
==================================================*/
#fond_eq
{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 114px;
	Z-index: -1;
}


.pres1 {
	width : 800px;
	height: 350px;
	position: relative;
	top: 120px;
	bottom: 100px;
	margin: 0 auto;
	/*margin-top: 30px;*/
	
	/* [disabled]left: 700px; */
	Z-index: 30;
	
}

#pres_valeurs {
	width : 800px;
	height: 200px;
	position: relative;
	top: 150px;
	margin: 0 auto;
	line-height: 40px;
	Z-index: 30;
}

.photo {
	width : 200px;
	height: 300px;
	position: inherit;
	top: 25px;
	left: 25px;
	/* [disabled]left: 700px; */
	Z-index: 20;
	
}

.textpres {
	width : 500px;
	height: 300px;
	position: relative;
	top: -275px;
	left: 250px;
	/* [disabled]left: 700px; */
	Z-index: 20;
	
}
/* ==================================================
       div du milieu REFERENCES
==================================================*/
	
	div#references {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 114px;
	bottom: 66px;
	background: url(im/image_tresors_caches.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1
	}
	
	
#galerie {
	width: 810px;
	height: 1200px;
	position: relative;
	top: 380px;
	bottom: 180px;
	margin: 0 auto;
	z-index: 15;
	}
	
	
	#lampe {
	width: 810px;
	height: 300px;
	position: relative;
	top: 120px;
	bottom: 180px;
	margin: 0 auto;
	z-index: 15;
	background-color:red;
	}
	
	.lampe{
	display: inline;
	width: inherit;	
	margin: 50px 60px 50px;
	
				}
				
	
#galerie2 {
	top: 80px;
	width: 810px;
	height: 50px;
	display: block;
	position: relative;
	top: 100px;
	/*float: left;*/
	margin: 60 auto;
	text-align: center;
	/*margin: 10px 25px 30px;*/
        /*padding: 10px 10px 25px;*/
	z-index: 9;
	
	}
	
#logo-alignés {
	display: list-item;
	width: 1200px;
	/*marging: 50px 20px*/
	50px;
	margin-left: 0px;
		}
		
.logo-autres{
	display: inline;
	width: inherit;	
	margin: 50px 55px 0px;
	
				}		

.polaroid-images a
{
        top: 450px;
        display: inline;
        float: left;
		left: 100px;
        margin: 10px 25px 30px;
        padding: 10px 10px 25px;
        z-index:10;
}

.polaroid-images img {
        display: block;
        width: inherit;
		box-shadow: 1px 1px 12px #555;
}


	
	
/* ==================================================
       div Clients
==================================================*/

#clients {
	width : 1000px;
	/*height: 90%;*/
	padding:5px;
	position: relative;
	top: 150px;
	/*left: 160px;*/
	bottom: 100px;
	margin: 0 auto;
	/*margin-left: 100px;*/
	/*overflow: scroll;*/
	z-index: 10;
}

#logo2 {
	width: 100px;
	float: left;
	margin-left: 10px;
	z-index:10;
	box-shadow: 1px 1px 12px #555;
		}
	

.client1 {
	width : 880px;
	margin-left: 120px;
	padding: 5px;
	text-align:left;
	z-index:10;
	/* [disabled]left: 700px; */	/*Z-index: 10;*/
}

.client2 {
	width : 1000px;
	padding: 5px;
	text-align:left;
	position:inherit;
	margin-top: -10px;
	/*margin-left: 80px;*/
	overflow:visible;
	float: left ;
	z-index:10;
	/* [disabled]left: 700px; */
}

.client3 {
	width : 500px;
	padding: 5px;
	text-align:left;
	position:inherit;
	margin-top: -10px;
	margin-left: 100px;
	overflow:visible;
	float: left ;
	z-index:10;
	/* [disabled]left: 700px; */
}
.example-image{
	margin-right: 90px;
	box-shadow: 1px 1px 12px #555;
	
	}
	
#retour {
	height: 40px;
	width: auto;
	position: static;
	background-color:#CCC;
	float: right;
	margin-top: 120px;
	margin-right: 20px;
	z-index: 50;
	}
	
	
.image-set {
	display: block;
	width: 1200px;
	}


/* ==================================================
       div du milieu NEWS
==================================================*/

#kidexpert {
	width : 35%;
	height: 500px;
	float: left;
	margin-left: 170px;
	margin-top: 12%;
	overflow: auto;	/*background-color:red;*/
		}


#facebook {
	width : 500px;
	height: 520px;
	float: right;
	margin-right: 10%;
	margin-top: 12%;
		}
		
#pressbook {
	height: 250px;
	width: 80%;
	margin-top: -50px;
	float: left;
	margin-right: 10%;
	margin-left: 170px;
	position: inherit;
	/*bottom: 10%;*/
	text-justify: distribute;	
	
		}
/* ==================================================
   Typography
================================================== */
@font-face {
    font-family: 'fjallaoneregular';
    src: url('font/FjallaOne-Regular-webfont.eot');
    src: url('font/FjallaOne-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/FjallaOne-Regular-webfont.woff2') format('woff2'),
         url('font/FjallaOne-Regular-webfont.woff') format('woff'),
         url('font/FjallaOne-Regular-webfont.ttf') format('truetype'),
         url('font/FjallaOne-Regular-webfont.svg#fjallaoneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 {
	font-family: "fjallaoneregular";
	font-weight: normal;
	color: #666;
	font-size: 28px;
	line-height : 35px;
	padding: 5px;	
}

h2 {
	color: #EF3292;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	line-height : 32px;
	bottom: 10px;
	padding: 5px;
	
}

h3 {
	color: #EF3292;
	font-family: "fjallaoneregular";
	font-weight: normal;
	font-size: 30px;
	line-height : 32px;
	bottom: 10px;
	padding: 5px;	
}

h4 {
	color: #666;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height : 20px;
	padding: 5px;
	text-align: justify;
	text-justify: inter-word;
}

h5 {
	color: #666;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height : 20px;
	text-justify: inter-word;
	padding: 5px;
}

h6 {
	font-family: "fjallaoneregular";
	font-weight: normal;
	color: #EF3292;
	font-size: 16px;
	line-height : 20px;
	padding: 5px;
	}


h7 {
	font-family: "fjallaoneregular";
	font-weight: normal;
	color: #EF3292;
	font-size: 32px;
	line-height : 38px;
	padding: 5px;	
}

h8 {
	color: #666;
	font-family: "fjallaoneregular";
	font-style: normal;
	font-size: 16px;
	line-height : 20px;
	text-align: left;
	padding: 5px;
}

h9 {
	color: #666;
	font-family: "fjallaoneregular";
	font-weight: lighter;
	font-size: 25px;
	line-height : 30px;
	padding: 5px;
	
}