html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b,strong,  u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
.figure, .figcaption, footer, topContent, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	-webkit-font-smoothing : antialiased;
}
em, i {font-style:italic;}
strong, b {font-weight:bold;}

/*----------------*/
html {
	font-size: 62.5%;
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
	background-color: #fff;
}
body {
	font-size:11px;
	font-size: 1.1rem;
	line-height: 14px;
	line-height: 1.4rem;
	color:#666;
	font-family: 'plutoextralight', sans-serif;
	background-color: #fff;
	width:100%;
}
a {
	color:#666;
}

.lazy {
    background: transparent;
    visibility: hidden;
}

.wrapper {
	display:inline-block;
	width:100%;
	position:relative;
	float:left;
	background: #fff;
}

#main {
	width:890px;
	padding-left:90px;
	margin:auto;
	position:relative;
	background:#3f9eea;
	display:table;
}

#navig {
	position:fixed;
	top:0;
	left:50%;
	margin-left:-490px;
	width:90px;
	font-family: 'plutolight';
	text-transform:uppercase;
	background:url("../img/css/bg-main.png") no-repeat;
}
#navig .avatar {
	margin:22px 0 170px 0;
}
#navig ul li {
	list-style:none;
	margin-bottom:15px;
}
#navig ul li ul li {
	float:left;
	width:23px;
	margin:0 1px;
}
#navig ul li ul li.facebook {
	margin-left:9px;
}
#navig ul li ul li a {
	width:23px;
	height:23px;
	overflow:hidden;
	display:block;
	text-indent:-5000px;
}
#navig ul li ul li.facebook a {
	background:url("../img/css/picto-facebook.png") no-repeat;
}
#navig ul li ul li.pinterest a {
	background:url("../img/css/picto-pinterest.png") no-repeat;
}
#navig ul li ul li.behance a {
	background:url("../img/css/picto-behance.png") no-repeat;
}
#navig a {
	color:#fff;
	text-decoration:none;
	display:block;
	text-align:center;
}
.lienContact {
	position:fixed;
	top:0;
	right:50%;
	margin-right:-490px;
	z-index:1000;
	width:160px;
	height:201px;
	background:url("../img/css/fond-contact.png") no-repeat;
	font-size:10px;
	font-size:1rem;
	line-height:14px;
	line-height:1.4rem;
}
.lienContact a {
	color:#3f9feb;
	text-decoration:none;
	font-family: 'pluto_regularregular';
	text-transform:uppercase;
	background:url("../img/css/puce-lien-contact.png") no-repeat right center;
	padding-right:25px;
	display:block;
	margin:15px 5px 0 0;
	width:90px;
	float:right
}

.wrapper#Qui,
.wrapper#Savoir {
	background:#fff;
}
#qui {
	margin:30px 70px 25px 52px;
}
#qui h2 {
	color:#4d4d4d;
	position:absolute;
	top:165px;
	left:440px;
}
#qui .text {
	position:absolute;
	top:195px;
	left:440px;
	color:#808080;
	width:370px;
}

#savoir {
	margin:25px 70px 75px 70px;
	display:inline-block;
}
#savoir h2 {
	position:absolute;
	left:-5000px;
}
#savoir ul li {
	list-style:none;
	float:left;
	width:150px;
	text-align:center;
}
#savoir ul li h3 {
	font-size:16px;
	font-size: 1.6rem;
	line-height: 24px;
	line-height: 2.4rem;
	color:#3f9feb;
	font-family: 'plutomedium';
	text-transform:uppercase;
}
#savoir ul li p {
	margin:0;
}

#portfolio {
	background:#154161 url("../img/css/bg-portfolio.png") no-repeat;
	padding:60px 0 55px 72px;
	color:#fff;
	display:inline-block;
}

#portfolio ul.moreList{
	display:none;
	clear:both;
}


#portfolio h2 {
	margin-bottom:10px;
}
#portfolio ul {
	margin-top:30px;
}
#portfolio ul li {
	list-style:none;
	float:left;
	margin:0 12px 12px 0;
}

#portfolio ul li {
	width:244px;
	height:197px;
	display: block;
	overflow: hidden;
}
#portfolio ul li.focus {
	width:502px;
	height:405px;
}

#portfolio ul li a {
	width:100%;
	height:100%;
	display:block;
}

#portfolio ul li img {
	width:100%;
	height:100%;
	display:block;
}
#portfolio ul li.plus a {
	width:244px;
	height:197px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	text-transform:uppercase;
	background:url("../img/css/bg-voir-plus-reas.png") no-repeat;
	color:#fff;
	text-decoration:none;
	font-size:25px;
	font-size:2.5rem;
	line-height:26px;
	line-height:2.6rem;
	font-family: 'plutomedium';
}

#portfolio ul li.moins{
clear: both;
width: 100%;
display: block;
height: 50px;
}
#portfolio ul li.moins a {
	color:#fff; width:100px; height:100%; display:block; text-decoration: none;
	padding-left: 30px;
	background: url("../img/css/puce-fermer.png") no-repeat left center;
	font-weight: bold;
	line-height: 5;
}


.wrapper#Reseau,
.wrapper#Clients {
	background:#fff url("../img/css/bg-partenaires.png") repeat-x;
}
#reseau {
	background:url("../img/css/bg-partenaires-bottom.png") no-repeat left bottom;
	padding:40px 0 60px 72px;
	width:818px;
	float:left;
	color:#3f9feb;
}
#reseau ul {
	margin-top:30px;
}
#reseau ul li {
	list-style:none;
	float:left;
	width:185px;
	text-align:center;
	color:#808080;
}
#reseau ul li h3 {
	font-size:16px;
	font-size: 1.6rem;
	line-height: 24px;
	line-height: 2.4rem;
	font-family: 'plutomedium';
	text-transform:uppercase;
}
#reseau ul li p {
	margin:0;
}

#clients {
	padding:40px 0 60px 72px;
	color:#154161;
	display:inline-block;
}
#clients ul {
	margin-top:30px;
}
#clients ul li {
	list-style:none;
	float:left;
	margin:0 12px 12px 0;
}
#clients ul li img {
	display:block;
}

.wrapper#Contact{ background: #3F9EEA !important; }


#contact #carte {
	width:445px;
	height:560px;
	float:left;
}
#contact .infos {
	width:415px;
	float:right;
	color:#fff;
	padding-top:35px;
	background: #3F9EEA !important;
}
#contact .infos .adresse {
	font-family: 'plutoextralight';
	font-size:15px;
	font-size:1.5rem;
	line-height:18px;
	line-height:1.8rem;
	background:url("../img/css/picto-adresse.png") no-repeat left center;
	padding-left:40px;
	margin-bottom:20px;
}
#contact .infos .tel {
	font-family: 'plutoextralight';
	font-size:30px;
	font-size:3rem;
	line-height:40px;
	line-height:4rem;
	background:url("../img/css/picto-tel.png") no-repeat left center;
	padding-left:40px;
	margin-bottom:20px;
}
#contact .infos .email {
	font-family: 'plutoextralight';
	font-size:15px;
	font-size:1.5rem;
	line-height:22px;
	line-height:2.2rem;
	background:url("../img/css/picto-mail.png") no-repeat left center;
	padding-left:40px;
}
#contact .infos form input {
	font-size:11px;
	font-size:1.1rem;
	line-height:34px;
	line-height:3.4rem;
	color:#fff;
	font-family:'plutoextralight', sans-serif;
	background-color:#1e82d4;
	width:100%;
	border:none;
	height:34px;
	width:345px;
	padding:0 5px;
	margin-bottom:5px;
}
#contact .infos form label {
	display:none;
}
#contact .infos form textarea {
	font-size:11px;
	font-size:1.1rem;
	color:#fff;
	font-family:'plutoextralight', sans-serif;
	background-color:#1e82d4;
	width:100%;
	border:none;
	height:100px;
	width:345px;
	padding:5px;
	margin-bottom:8px;
}
#contact .infos form p.mentions {
	float:left;
	width:245px;
}
#contact .infos form input[type="submit"] {
	background:#154161;
	text-transform:uppercase;
	font-size:15px;
	font-size:1.5rem;
	width:110px;
	float:left;
}

/* Fiche projet */
#pageRealisation {
	padding:80px 0 55px 55px;
	display:inline-block;
}
#pageRealisation .desc {
	width:350px;
	float:left;
}
#pageRealisation .share {
	width:108px;
	float:right;
	margin-right:55px;
}
#pageRealisation .share ul {
	margin-top:0;
}
#pageRealisation .share ul li {
	width:24px;
	height:24px;
	margin:0 0 0 3px;
}
#pageRealisation .share ul li a {
	width:24px;
	height:24px;
	display:block;
	overflow:hidden;
	text-indent:-5000px;
}
#pageRealisation .share ul li.facebook a {
	background:url("../img/css/picto-facebook-projet.png") no-repeat;
}
#pageRealisation .share ul li.twitter a {
	background:url("../img/css/picto-twitter-projet.png") no-repeat;
}
#pageRealisation .share ul li.pinterest a {
	background:url("../img/css/picto-pinterest-projet.png") no-repeat;
}
#pageRealisation .share ul li.googleplus a {
	background:url("../img/css/picto-googleplus-projet.png") no-repeat;
}
#pageRealisation ul {
	margin-top:30px;
	display:inline-block;
}
#pageRealisation ul li {
	list-style:none;
	float:left;
	margin:0 20px 20px 0;
}
#pageRealisation ul li img {
	display:block;
}


h2 {
	font-size:25px;
	font-size:2.5rem;
	line-height:30px;
	line-height:3rem;
	font-family: 'plutomedium';
	text-transform:uppercase;
}
p {
	margin:10px 0;
}

#portfolio p, #Reseau p, #Clients p  {
	margin:0px;
}





/*tablette 10" portrait : ex : nexus10/Galaxy tab 10.1"*/
@media only screen and (max-width: 979px) {

	#main {
		width:87%;
		padding-left:13%;
	}
	#navig {
		margin-left:0;
		left:0;
		width:13%;
	}
	.lienContact {
		margin-right:0;
		right:0;
	}
	#qui {
		margin:30px 70px 25px 52px;
	}
	#qui h2 {
		left:340px;
	}
	#qui .text {
		left:340px;
		width:300px;
	}
	#savoir {
		margin:25px 70px 30px 70px;
		width:570px;
		display:inline-block;
	}
	#savoir ul {
		width:100%;
		text-align:center;
	}
	#savoir ul li {
		float:none;
		display:inline-block;
		width:150px;
		margin:0 15px 30px 15px;
	}
	#portfolio {
		padding:60px 0 55px 72px;
	}

	#portfolio ul li {
		margin:0 9px 9px 0;
	}
	#portfolio ul li{
		display:block;
		width:190px;
		height:154px;
	}
	#portfolio ul li.focus{
		width:392px;
		height:317px;
	}

	#portfolio ul li img, #portfolio ul li.focus img {
		width:100%;
		height:100%;
	}


	#portfolio ul li.plus a {
		width:190px;
		height:154px;
	}
	#reseau {
		width:638px;
		padding:40px 0 20px 72px;
	}
	#reseau ul {
		width:100%;
		text-align:center;
	}
	#reseau ul li {
		float:none;
		display:inline-block;
		margin:0 15px 30px 15px;
	}
	#clients {
		padding:40px 0 40px 72px;
	}
	#clients ul li {
		margin:0 10px 10px 0;
	}
	#clients ul li img {
		width:140px;
		height:auto;
	}
	#contact #carte {
		width:45%;
	}
	#contact .infos {
		width:45%;
		padding-right:5%;
	}
	#contact .infos form {
		width:100%;
	}
	#contact .infos form input {
		width:95%;
	}
	#contact .infos form textarea {
		width:95%;
	}
	#contact .infos form p.mentions {
		width:40%;
	}
	#contact .infos form input[type="submit"] {
		float:right;
		margin-right:4%;
	}

	/* Fiche projet */
	#pageRealisation {
	    padding: 80px 0 55px 8%;
	}
	#pageRealisation ul li {
		margin:0 3% 15px 0;
	}
	#pageRealisation ul li {
		width:44%;
	}
	#pageRealisation ul li.focus {
		width:91%;
	}
	#pageRealisation ul li img {
		width:100%;
		height:auto;
	}
	#pageRealisation .share {
		margin-right:9%;
	}

}

/*tablette 9.7" portrait : ex : ipad*/
@media only screen and (max-width: 799px) {

	#qui {
		margin:30px 70px 25px 52px;
	}
	#qui h2 {
		left:340px;
	}
	#qui .text {
		left:340px;
		width:300px;
	}
	#savoir {
		margin:25px 55px 30px 55px;
		width:568px;
		display:inline-block;
	}
	#portfolio {
		padding:60px 0 55px 55px;
	}
	#reseau {
		width:623px;
		padding:40px 0 20px 55px;
	}
	#clients {
		padding:40px 0 40px 55px;
	}

}

/*tablette 7" portrait : ex : nexus7/Galaxy tab 7"*/
@media only screen and (max-width: 767px) {

	#navig .avatar {
		margin:22px 0 40px 0;
	}
	#navig ul li ul li {
		float:left;
		width:23px;
		margin:0;
	}
	#navig ul li ul li {
		float:none;
		width:100%;
		margin:0 0 5px 0;
	}
	#navig ul li ul li.facebook {
		margin-left:0;
	}
	#navig ul li ul li a {
		width:23px;
		height:23px;
		overflow:hidden;
		display:block;
		text-indent:-5000px;
		margin:auto;
	}
	#qui {
		margin:30px 70px 25px 30px;
	}
	#qui h2 {
		left:300px;
		top:145px;
	}
	#qui .text {
		left:300px;
		width:220px;
		top:175px;
	}
	#savoir {
		margin:25px 30px 30px 30px;
		width:470px;
	}
	#portfolio {
		padding:60px 20px 55px 30px;
		background:#154161 url("../img/css/bg-portfolio-mobile.png") no-repeat right top;
	}
	#portfolio ul li {
		margin:0 10px 10px 0;
	}
	#portfolio ul li {
		width:230px;
		height:185px;
	}
	#portfolio ul li.focus {
		width:470px;
		height:380px;
	}
	#portfolio ul li.plus a {
		width:230px;
		height:185px;
	}
	#reseau {
		width:470px;
		padding:40px 30px 20px 30px;
	}
	#clients {
		padding:40px 20px 40px 30px;
	}
	#clients ul li img {
		width:150px;
	}
	#contact #carte {
		width:100%;
		height:450px;
	}
	#contact .infos {
		width:90%;
		padding:35px 5%;
	}

	/* Fiche projet */
	#pageRealisation .desc,
	#pageRealisation .share {
		float:none;
		width:70%;
	}

}

/*Mobile portrait*/
@media only screen and (max-width: 599px) {

	#navig {
		bottom:0;
		z-index:999999;
		background:#3f9eea;
		padding-top:130px;
	}
	#navig .avatar {
		margin:0;
		position:absolute;
		top:22px;
		right:-31px;
	}
	#navig a.menu-mobile,
	#navig a.menu-mobile-close {
		position:absolute;
		top:100px;
		left:50%;
		margin-left:-12px;
	}
	a.lienContact {
		display:none;
	}
	#qui {
		margin:25px 2% 30px 2%;
		width:96%;
	}
	#qui h2,
	#qui .text {
		position:relative;
		left:auto;
		top:auto;
		width:auto;
		margin:0 18px;
	}
	#qui h2{
		margin-top:40px;
	}
	#savoir {
		margin:25px 0 0 0;
		width:100%;
	}
	#savoir ul li {
		width:110px;
		margin: 0 5px 30px 5px;
	}
	#savoir ul li img {
		width:90px;
		height:auto;
	}
	.wrapper#Portfolio {
		margin-top:-30px;
	}
	#portfolio {
		padding:60px 5% 55px 5%;
		width:90%;
		background:#154161 url("../img/css/bg-portfolio-mobile.png") no-repeat right top;
	}
	#portfolio ul li {
		margin:0 0 10px 0;
		width:48%;
	}
	#portfolio ul li:nth-child(odd) {
		margin:0 0 10px 0;
		float:right;
	}
	#portfolio ul li img {
		width:100%;
		height:auto;
	}
	#portfolio ul li.focus {
		width:100%;
	}
	#portfolio ul li.focus img {
		width:100%;
		height:auto;
	}
	#portfolio ul li.plus a {
		width:100%;
		height:auto;
		display:block;
	}
	#reseau {
		padding:40px 0 20px 0;
		width:100%;
	}
	#reseau h2,
	#reseau p {
		margin-left:5%;
		margin-right:5%;
	}
	#reseau ul li {
		width:110px;
		margin: 0 5px 30px 5px;
	}
	#reseau ul li img {
		width:90px;
		height:auto;
	}
	#clients {
		padding:40px 5% 40px 5%;
		width:90%;
	}
	#clients ul li {
		width:48%;
		margin:0 2% 10px 0;
	}
	#clients ul li:nth-child(odd) {
		margin:0 0 10px 2%;
		float:right;
	}
	#clients ul li img {
		width:100%;
	}
	#contact #carte {
		width:100%;
		height:300px;
	}
	#contact .infos {
		width:90%;
		padding:35px 5%;
	}
	#contact .infos .tel {
	    font-size: 25px;
	    font-size: 2.5rem;
	}
	#contact .infos form input {
		width:90%;
	}
	#contact .infos form textarea {
		width:90%;
	}
	#contact .infos form p.mentions {
		width:100%;
	}

	/* Fiche projet */
	#pageRealisation ul li,
	#pageRealisation ul li.focus {
		width:91%;
	}




	h2 {
		font-size:14px;
		font-size:1.4rem;
		line-height:20px;
		line-height:2rem;
	}

}






.edit-link, .edit-link-post{
	position: absolute;
	top: 5px;
	border-radius: 3px;
	padding: 3px 10px;
	background: orange;
	color:#fff !important;
	display: inline-block;
}
.edit-link:hover, .edit-link-post:hover{
	background-color: #E09100;
}
.edit-link{right:0px; z-index: 999999; top:70px; }
.edit-link-post{left:10px; }

.edit-link a, .edit-link-post a{
	display:block;
	color:#fff !important;
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
}




















/* Common style */
.grid .figure {
	position:relative;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
}

.grid .figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	/* opacity: 0.8; */
}

.grid .figure .figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid .figure .figcaption::before,
.grid .figure .figcaption::after {
	pointer-events: none;
}

.grid .figure .figcaption,
.grid .figure .figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid .figure .figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid .figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid .figure h2 span {
	font-weight: 800;
}

.grid .figure h2,
.grid .figure p {
	margin: 0;
}

.grid .figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}





/*---------------*/
/***** Jazz *****/
/*---------------*/

.figure.effect-jazz {
	/*
	background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
	background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
	*/
}

.figure.effect-jazz img {
	/* opacity: 0.9; */
}

.figure.effect-jazz .figcaption::after,
.figure.effect-jazz img,
.figure.effect-jazz p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.figure.effect-jazz .figcaption::after {
	position: absolute;
	top: -29px !important;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transform: rotate3d(0,0,1,51deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,51deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.figure.effect-jazz h2,
.figure.effect-jazz p {
	opacity: 0;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}

.figure.effect-jazz h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.figure.effect-jazz p {
	padding: 0.5em 2em;
	text-transform: none;
	font-size: 0.85em;
	opacity: 0;
}

.figure.effect-jazz:hover {
	background:#154161;
/*	background: #327ADF; */
/*
	background: -webkit-linear-gradient(-45deg, #327ADF 0%,#000 100%);
	background: linear-gradient(-45deg, #327ADF 0%,#000 100%);
*/

}


.figure.effect-jazz:hover img {
	opacity: 0.5;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

.figure.effect-jazz:hover .figcaption::after {
	opacity: 1;
	-webkit-transform: rotate3d(0,0,1,51deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,51deg) scale3d(1,1,1);
}

.figure.effect-jazz:hover h2,
.figure.effect-jazz:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}










.addthis_toolbox {
	width:126px;
	height:24px;
	display:block;
	overflow: hidden;
	position: relative;
	z-index: 9999999999;
}
.addthis_toolbox a {
	width:24px;
	height: 24px;
	text-align:center;
	display:inline-block;
	/* background:#9b9b9b !important; */
}
/*
.addthis_toolbox a:hover { background:#403f43 !important; }
.addthis_toolbox a:hover { background:#033850 !important; }
*/

.addthis_toolbox a .fa {
	line-height:15px;
	line-height:1.5rem;
}
.addthis_toolbox .at300b {
	width:24px;
	height: 24px;
	color:#fff;
	text-decoration:none;
	font-style:normal;
	display:inline-block;
	overflow:hidden;
	float:left;
	margin-right:4px;
	font-size:10px;
	font-size:1rem;
	line-height:15px;
	line-height:1.5rem;
	position:relative;
}
.addthis_toolbox .imglogo{
	position:absolute;
	z-index:0;
	left:3px;
}
.addthis_toolbox iframe {
	margin-left: -19px;
	opacity: 0;
	z-index:2;
	position:absolute;
}
.addthis_toolbox .addthis_button_facebook_like{
	background:url("../img/css/share/facebook_lo-off.png") no-repeat left top !important;
}



.addthis_toolbox i {
	width:inherit; height: inherit;display: block;
}

.addthis_toolbox  .addthis_button_facebook i {
	background:url("../img/css/picto-facebook-projet.png") no-repeat;
}
.addthis_toolbox  .addthis_button_tweet i {
	background:url("../img/css/picto-twitter-projet.png") no-repeat;
}
.addthis_toolbox  .addthis_button_pinterest_pinit {
	background:url("../img/css/picto-pinterest-projet.png") no-repeat;
}
.addthis_toolbox  .addthis_button_google_plusone i {
	background:url("../img/css/picto-googleplus-projet.png") no-repeat;
}