/******* RESET CSS *******/
*{border:0;margin:0;padding:0}
a,button{color:inherit;cursor:pointer;}
@-ms-viewport { width: device-width; }


/******* STYLES EN GENERAL *******/
h2 { font-size: 2.1em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.4em; }

p {
	font-size: 		.9em;
	line-height: 	1.5em;
}

body {
	font-family: 	arial,sans-serif;
	color:			#000;
	background:		#fff;
}
body.modal-open {
	overflow-y: 	hidden;
	height:			100%;
}

section {
	padding:		.5em;
}

.wrapper {
	margin:			0 auto;
}


.grid-item {
	display:	inline-block;
	vertical-align: top;
}

/*** NAVIGATION HACK ***/
/*
.anchor {
	display:		block;
	margin-top:		-4em;
	height:			4em;
}
*/
.anchor {
	display:		block;
	height:			1px;
}


.button {
	padding:		.8em 1.1em;
	font-size:		.8em;
	font-family: 	inherit;
	text-transform: uppercase;
	text-decoration: none;
	color:			#fff;
	border:			.1em solid #fff;
	background:		transparent;
}

.icon {
	display:		inline-block;
}
.icon-rounded {
	border-radius: 	10em;
}


/******* ANIMATIONS *******/
@keyframes fadeIn {
	0%		{ opacity:		0;	}
	100%	{ opacity:		1;	}
}
@keyframes fadeOut {
	0%		{ opacity:		1;	}
	100%	{ opacity:		0;	}
}
@keyframes popupIn {
	0%		{ transform: scale(.9,.9); 	opacity:	0;	}
	100%	{ transform: scale(1,1); 	opacity:	1;	}
}


/******* AU GLOBAL *******/
#main {
	text-align: 	center;
	background:		#fff;
}

#main h2 {
	padding:		2em 0;
	font-weight: 	550;
	letter-spacing: .2em;
	text-transform: uppercase;
}
#main h2::after {
	content:		'';
	display: 		block;
	margin:			.7em auto 0 auto;
	width:			2.6em;
	height:			1px;
	background: 	#000;
}


/******* BANDEAU DU HAUT *******/
#herobanner {
	position: 		relative;
	display:		table;
	width:			100%;
	height: 		100vh;
	padding:		4em 0;
	color:			#fff;
	background:		#0d0d0d;
}
#herobanner .wrapper {
	display:		table-cell;
	vertical-align: middle;
	text-align: 	center;
}
#herobanner .wrapper::after {
	content:		'';
	position: 		absolute;
	left:			50%;
	bottom: 		3em;
	display:		block;
	margin:			2em 0 2em -.5em;
	width:			1em;
	height:			1em;
	border-bottom:	.1em solid #fff;
	border-right:	.1em solid #fff;
	transform: 		rotateZ(45deg);
}

#herobanner a {
	display: 	inline-block;
}
#herobanner img {
	display:	inline-block;
	width:		80%;
}

#herobanner p {
	display:		inline-block;
	width:			100%;
	padding:		0 0 0 10%;
	text-align: 	left;
	font-size:		.6em;
	font-size:		3.45vw;
}
#herobanner p::before {
	content:		'';
	display:		block;
	margin:			2em 0;
	width:			30%;
	height:			2px;
	background: 	#fff;
}

#herobanner .button {
	margin:		4em auto;
}




/******* HEADER MENU *******/
#header {
	height:				4em;
	color:				#3c3c3c;
	border-bottom:		1px solid #eee;
	background: 		#fff;
}
#header ul {
	display:			table;
	width:				100%;
}
#header li {
	display:			table-cell;
	width:				33%;
}
#header a {
	display: 			inline-block;
	padding:			1.4em;
	text-transform: 	uppercase;
	text-decoration: 	none;
	transition:			color 100ms ease-out;
}
#header a:hover {
	color:				#ede035;
}


#main.fixed {
	padding-top:	4em;
}
#main.fixed #header {
	position: 		fixed;
	top:			0;
	left:			0;
	width: 			100%;
}


/******* AGENCE *******/
#agence {
	padding-bottom:	2em;
}
#agence .wrapper {
	padding:		0 2em 1em 2em;
}
#agence p {
	padding-bottom:	2em;
	color:			#a4a4a4;
	font-size:		1.1em;
}



/******* AGENCE *******/
#services {
	padding-bottom: 2em;
}
#services .icon {
	padding:		2em;
	width:			8em;
	height:			8em;
	border:			1px solid #eee;
}
#services .icon-installation {
	padding:		1.2em;
}
#services .icon img {
	width:			100%;
	height:			100%;
}
#services h3 {
	padding:		1em 0;
	text-transform: uppercase;
	font-weight: 	400;
	letter-spacing: .2em;
}
#services p {
	padding:		0 2em 3em 2em;
	font-size:		1em;
	color:			#a4a4a4;
	text-align: 	justify;
}


/******* PROJETS *******/

#portfolio {
	padding:		0 1em 4em 1em;
	background:		#f3f3f3;
}

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  column-gap:         	1;
}

#photos a {
	display: 			inline-block;
	padding-bottom: 	1em;
	width: 		100% !important;
}
#photos img {
	width: 		100% !important;
	height:		auto !important;
}


#portfolio #focus {
	display:	table;
	position: 	fixed;
	z-index:	2;
	top:		0;
	left:		0;
	width:		100%;
	height:		100%;
	background: #fff;
	opacity:	0;
	transition: opacity 200ms ease-out;
}
#portfolio #focus.hide {
	display:	none;
}
#portfolio #focus.open {
	opacity:	1;
}
#portfolio #focus-title,
#portfolio #focus-content {
	display:	table-row;
}

#portfolio #focus-title::after {
	margin-bottom:	1em;
}
#portfolio #focus-title h2 {
	padding: 	1em;
}
#portfolio #focus-content {
	height:		100%;
}
#portfolio #focus-image {
	display:	table-cell;
	background-repeat: 		no-repeat;
	background-position: 	center;
	background-size: 		contain;
}
#portfolio #focus-close {
	position: 	absolute;
	z-index: 	3;
	top:		0;
	right:		0;
	width:		5em;
	height:		5em;
	background:	#1C1C1C url(../images/icon-cross.svg) no-repeat center;
	background-size: 60% auto;
}


/******* ECOUTE *******/

#ecoute {
	color:			#fff;
	background:		#101010;
}
#ecoute  {
	margin:			0 auto;
	padding:		2em 0 3em 0;
}
#ecoute .wrapper {
	max-width: 		33em;
}
#ecoute img {
	width:			2em;
	opacity:		.4;
}
#ecoute p {
	padding:		.5em;
	font-size: 		1em;
}
#ecoute em {
	display: 		block;
	padding:		0 2em 2em 2em;
	font-size:		.9em;
	color:			#ccc;
	line-height: 	1.3em;
}
#ecoute em::before {
	content:		'';
	display:		block;
	margin:			2em auto;
	width:			30%;
	height:			2px;
	background: 	#fff;
}




/******* CONTACT *******/
#contact .wrapper {
	text-align: 		left;
	padding:			0 2em 1em 2em;
}
#contact form {
	text-align: 		left;
	padding-bottom:		2em;
}
#contact form label {
	display:			block;
	padding:			1em 0;
	font-size:			.9em;
	text-transform: 	uppercase;
}
#contact form input,
#contact form textarea {
	display:			block;
	padding:			.4em;
	width:				100%;
	font-family:		inherit;
	font-size:			inherit;
	border-top: 		1px solid #000;
	background:			#f8f7f7;
	border-radius: 		0;
	box-shadow: 		0;
}
#contact form input:focus,
#contact form textarea:focus {
	background:			#d2d2d2;
}
#contact form input {
	margin-bottom:		1em;
}
#contact form .message-row {
	padding-top:		2em;
	padding-bottom:		1em;
}
#contact form input[type="submit"] {
	padding:			.8em 0;
	font-size:			.8em;
	text-transform: 	uppercase;
	text-align: 		center;
	background:			transparent;
	border:				0;
	border-radius: 		0;
}


#contact .vcard .nickname {
	padding:			1em 0 1em 6em;
	background:			url(../images/photo-pascal-delescluse.png) no-repeat left center;
	background-size:	auto 100%;
}
#contact .vcard em {
	display:		block;
	padding:		2em 0 1em 0;
	font-style: 	normal;
	color:			#aaa;
}
#contact .vcard .org,
#contact .vcard .adr {
	padding:		1em 0;
}
#contact .vcard .org {
	font-size: 		1.1em;
}
#contact .vcard a {
	text-decoration: 	none;
}
#contact .vcard img {
	width:	1.5em;
	height:	1.5em;
}


#contact-confirm {
	margin: 		0 auto 2em auto;
	max-width:		55em;	
	border:			1px solid #ccc;
}
#contact-confirm p {
	padding:		1em;
	font-weight: 	bold;
	color:			darkgreen;
	background:		#d5ffe5;
}
#contact-confirm p.error {
	color:			red;
	background:		#ffced5;
}


/******* FOOTER *******/

#footer {
	padding:		2em 0;
	color:			#fff;
	text-align: 	center;
	background:		#101010;
}

#footer img {
	width:			4em;
	opacity:		.7;
}
#footer ul {
	display: 		table;
	margin:			1em auto;
}
#footer li {
	display: 		inline;
	padding:		0 .8em;
}
#footer li a {
	font-size:		.8em;
	opacity:		.8;
	text-decoration: none;
}
#footer li a:hover {
	opacity:		1;
}




/**** TEST SI CSS3 ***/
@media (min-width:1px)
{
	/**** REDEFINIR LES MODELES DE BOITES ****/
	*{box-sizing:border-box;}

	/**** FAIRE QUE LA TAILLE DE POLICE SUIVE LA LARGEUR D ECRAN ****/
	#main {
		font-size:		3.7vw;
	}

}


@media (min-width:24em){
	#photos {
	    -moz-column-count:    2;
	    -webkit-column-count: 2;
	    column-count:         2;
    }
}
@media (min-width:37em){

	/**** FAIRE QUE LA TAILLE DE POLICE SUIVE LA LARGEUR D ECRAN ****/
	#main {
		font-size:		2.4vw;
	}

	#herobanner .wrapper div {
		margin:			0 auto;
		width:			23em;
	}
	#herobanner img {
		width:			10em;
	}
	#herobanner p {
		width:			27.5em;
		font-size:		.95em;
		padding-left:	2.4em;
	}

}


@media (min-width:47em){
	#main {
		font-size:		2vw;
	}

	#header #menu {
		position: 		relative;
		margin:			0 auto;
		width:			100%;
		text-align: 	right;
	}
	#header #menu::before {
		content:		'';
		position: 		absolute;
		display: 		block;
		width:			13.5em;
		height:			4em;
		background: 	#000 url(../images/logo-header.png) no-repeat center;
		background-size: auto 2.15em;
	}
	#header #menu ul {
		display: 		inline-block;
		text-align: 	center;
		width:			auto;
	}

	#photos {
	    -moz-column-count:    3;
	    -webkit-column-count: 3;
	    column-count:         3;
    }
}

@media (min-width:62em){
	#main {
		font-size:		1em;
	}

	#header #menu {
		width:			60em;
	}

	#agence p {
		font-size:		1em;
		width:			75%;
		margin:			0 auto;
	}
	#services .grid {
		display:		table;
		width:			90%;
		margin:			1em auto;
	}
	#services .grid-item {
		display:		table-cell;
		width:			33.3%;
	}
	#services .icon {
		padding:	1.2em;
		width:		5em;
		height:		5em;
	}
	#services .icon-installation {
		padding:	.8em;
	}
	#services p {
		padding:		0 1em;
		font-size:		.9em;
	}


	#portfolio .wrapper {
		width:			56em;
    }

	#contact form,
	#contact .vcard {
		display:		inline-block;
		vertical-align: top;
	}
	#contact form {
		margin-left:	5em;
		margin-right:	5em;
		width:			25em;
	}
	#contact .vcard {
		width:			19em;
	}
	#contact form .lastname-row,
	#contact form .email-row {
		display:		inline-block;
		vertical-align: top;
		width:			12em;
	}
	#contact form .email-row {
		margin-left:	.9em;
	}
	#contact form input[type="submit"] {
		text-align: 		right;
	}

}

@media (min-width:72em){
	.wrapper {
		margin: 			0 auto;
		width:				69em;
	}

	#photos {
	    -moz-column-count:    3;
	    -webkit-column-count: 3;
	    column-count:         3;
    }

}