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, strong, sub, sup, tt, var,
b, 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, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
a{
    text-decoration: none;
    color:inherit;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input {
  padding: 0;
  margin: 0;
  border: none;
}
iframe {
    border: 0;
    margin: 0;
    padding: 0;
}
::-moz-selection {
    background: #0095ff;
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #0095ff;
    color: #fff;
    text-shadow: none;
}
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
button, button:focus{
	background:none;
	border:none;
	outline:none;
	cursor:pointer;
}
/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
	font-family: "AvantGarde";
		src: url("../fonts/avantgardeitcbybt-book-webfont.eot");
		src: url("../fonts/avantgardeitcbybt-book-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/avantgardeitcbybt-book-webfont.woff") format('woff'), url("../fonts/avantgardeitcbybt-book-webfont.ttf") format('truetype'), url("../fonts/avantgardeitcbybt-book-webfont.svg#Univers Condensed") format('svg');
}
@font-face {
	font-family: "AvantGardeBold";
		src: url("../fonts/avantgardeitcbybt-bold-webfont.eot");
		src: url("../fonts/avantgardeitcbybt-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/avantgardeitcbybt-bold-webfont.woff") format('woff'), url("../fonts/avantgardeitcbybt-bold-webfont.ttf") format('truetype'), url("../fonts/avantgardeitcbybt-bold-webfont.svg#Univers Condensed") format('svg');
}
@font-face {
	font-family: "AvantGardeExtraLight";
		src: url("../fonts/avantgardeitcbybt-extralight-webfont.eot");
		src: url("../fonts/avantgardeitcbybt-extralight-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/avantgardeitcbybt-extralight-webfont.woff") format('woff'), url("../fonts/avantgardeitcbybt-extralight-webfont.ttf") format('truetype'), url("../fonts/avantgardeitcbybt-extralight-webfont.svg#Univers Condensed") format('svg');
}
@font-face {
	font-family: "AvantGardeMedium";
		src: url("../fonts/avantgarde-medium-webfont.eot");
		src: url("../fonts/avantgarde-medium-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/avantgarde-medium-webfont.woff") format('woff'), url("../fonts/avantgarde-medium-webfont.ttf") format('truetype'), url("../fonts/avantgarde-medium-webfont.svg#Univers Condensed") format('svg');
}
 /* ==========================================================================
   Classes
   ========================================================================== */

html, body {
    height: 100%;
}

body {
    font-family: 'AvantGarde';
    font-size: 16px;
    line-height: 1.3;
    color: #666;   
    position: relative;
    background: #fff;
}

h2 {
	font:32px "AvantGardeBold";
	color:#151515;
	line-height:1em;
}
h2 span {
	font:20px "AvantGarde";
}
.open_sans {font-family:"Open sans"; font-weight:600;}
.dark {	color:#fff; }
.gradientblue {
	background: -moz-linear-gradient(left,  #1e5799 0%, #1c3579 100%);
	background: -webkit-linear-gradient(left,  #1e5799 0%,#1c3579 100%);
	background: linear-gradient(to right,  #1e5799 0%,#1c3579 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1c3579',GradientType=0 );
}
.blue {color:#0066b2;}
.button {
	display:inline-block;
	position:relative;
	color:#fff;
	font:14px "Open Sans";
	text-transform:uppercase;
	padding:20px 60px;
	border-left: 5px solid #1d3478;
	border-right: 5px solid #0066b2;
	background-position: 0 0, 0 100% ;
	background-repeat: no-repeat;
	-webkit-background-size: 100% 5px;
	-moz-background-size: 100% 5px;
	background-size: 100% 5px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
	background-image: -webkit-linear-gradient(left, #1d3478 0%, #0066b2 100%), -webkit-linear-gradient(left, #1d3478 0%, #30066b2 100%);
	background-image: -moz-linear-gradient(left, #1d3478 0%, #0066b2 100%), -moz-linear-gradient(left, #1d3478 0%, #0066b2 100%);
	background-image: -o-linear-gradient(left, #1d3478 0%, #0066b2 100%), -o-linear-gradient(left, #1d3478 0%, #0066b2 100%);
	background-image: linear-gradient(to right, #1d3478 0%, #0066b2 100%), linear-gradient(to right, #1d3478 0%, #0066b2 100%);
	-webkit-transition: background-size .4s ease, color.4s ease;
    transition: background-size .3s ease, color .4s ease;
}
.buttonService {
	display:inline-block;
	position:relative;
	color:#fff;
	font:12px bold "AvantGarde";
	text-align:center;
	text-transform:uppercase;
	height:130px; width:130px;
	border-left: 5px solid #1d3478;
	border-right: 5px solid #0066b2;
	background-position: 0 0, 0 100% ;
	background-repeat: no-repeat;
	-webkit-background-size: 100% 2px;
	-moz-background-size: 100% 2px;
	background-size: 100% 2px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
	background-image: -webkit-linear-gradient(left, #1d3478 0%, #0066b2 100%), -webkit-linear-gradient(left, #1d3478 0%, #30066b2 100%);
	background-image: -moz-linear-gradient(left, #1d3478 0%, #0066b2 100%), -moz-linear-gradient(left, #1d3478 0%, #0066b2 100%);
	background-image: -o-linear-gradient(left, #1d3478 0%, #0066b2 100%), -o-linear-gradient(left, #1d3478 0%, #0066b2 100%);
	background-image: linear-gradient(to right, #1d3478 0%, #0066b2 100%), linear-gradient(to right, #1d3478 0%, #0066b2 100%);
	-webkit-transition: background-size .4s ease, color.4s ease;
    transition: background-size .3s ease, color .4s ease;
}
.button:hover, .buttonService:hover {
	-webkit-background-size: 100% 55%;
	-moz-background-size: 100% 55%;
	background-size: 100% 55%;
}
.button:before {
	content:url(../graphics/icon/corner.svg);
	height:10px; width:10px;
	position:absolute;
	bottom:18px; right:8px;
}
.button.light {
	color:#151515;
}
.button:hover.light {
	color:#fff;
}

.maxw {max-width:960px;}
.maxw50 {max-width:480px; width:50%;}
.maxw66 {max-width:480px;}
.maxw33 {max-width:480px;}
.h100 {height:100%;}
.w100 {width:100%;}
.w60 {width:60%;}
.w50 {width:50%;}
.w40{width:40%;}
.w33 {width:32%;}
.w25{width:25%;}
.w20{width:20%;}
.left{float:left;}
.right{float:right;}
.center {margin:0 auto}
.nooverflow {overflow:hidden}
.clear {clear:both;}
.clearfix {clear:auto;}

.fRegular{font-family:"AvantGarde";}
.fBold{font-family:"AvantGardeBold";}
.fExtraLight{font-family:"AvantGardeExtraLight";}
.fMedium{font-family:"AvantGardeMedium";}
.hide {display:none;}


 /* ==========================================================================
   Header
   ========================================================================== */
.navMobile {display:none;}
.header{
	background:#fcfcfc url(../graphics/bg_hp_intro.jpg) fixed;
	background-size: cover;
	text-align:center;
}
.header .logo {
	width:320px;
	margin:0 auto;
	padding:120px 0 60px 0;

}
.nav {padding-bottom:130px;}
.nav ul {
	display:inline-block; 
	margin:0 auto;
	font:13px "AvantGarde";
	text-transform:uppercase;
}
.nav li {
	display:inline-block;
	float:left;
	height:100%;
}
.nav li a {
	height:100%;
	display:inline-block;
	padding:27px 40px; 
	background:#292929; 
	color:#aaa;
	-webkit-transition: color .4s, background .1s; /* Safari */
    transition: color .4s, background .1s;
}
.nav a:hover {
	color:#fff;
	background:#1b1b1b;
}
.nav a.active {
	color:#fff;
	background:#1b1b1b;
	cursor:default;
}
.nav li+li a {
	border-left:1px solid #363636;
}
.nav .accueil {
	position:relative;
	padding:0;
	height:100%;
	width:100px;
}
.nav .accueil div {
	text-align:center;
	padding:0;
	display:inline-block;
	height:100%;
	width:100%;
}
.nav .accueil div+div {
	position:absolute; top:0; left:-100px;;
	background:#1b1b1b;
	-webkit-transition: left .4s; /* Safari */
    transition: left .3s;
}
.nav .accueil div img {
	vertical-align:center;
	width:22px;
	margin-top:23px;
	height:auto;
}
.nav .accueil:hover div+div {
	left:0px;
}


.navService {background:rgba(255,255,255,0.3); padding-top:10px;}
.navService ul {
	display:inline-block;
	margin:0 auto;
}
.navService li {
	float:left; 
	margin:0 15px;
}
.navService a, .navService div {
	position:relative;
	font:11px "AvantGardeMedium";
	text-transform:uppercase;
	color:#0066b2;
	display:inline-block;
	width:130px;
	height:130px;
	text-align:center;
}
.navService div span:before {
	content:url(../graphics/icon/corner.svg);
	height:10px; width:10px;
	position:absolute;
	bottom:5px; right:5px;
}

.navService a {
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
	position:relative;
}
.navService svg {
	display:inline-block;
	margin:35px 0 15px 0;
}
.navService span {
	display:block; 
}
.navService div+div {
	position:absolute;
	top:0px;
	left:-160px;
	-webkit-transition: left .2s ease; /* Safari */
    transition: left .2s ease;
}
.navService .underbutton{
	background:rgba(255,255,255,0.7);
	margin-left:0px;
	-webkit-transition: all .2s ease; /* Safari */
    transition: all .2s ease;
}
.navService .underbutton svg {fill:#444;}
.navService .underbutton +div svg {fill:#15a7e4;}
.navService .svg {
	height:36px; width:auto;
}
a:hover .underbutton {
	margin-left:60px;
}
.pageService .navServic_rec .active div + div, .navService a:hover div + div {
	left:0;
	color:#fff;
}

header.page {
	padding:0;
}
header.page .logo {
	padding-top:50px;
}

 /* ==========================================================================
   Intro
   ========================================================================== */
.intro {background:#151515; border-top:3px solid #0066b2; overflow: auto;}
.intro .visu {position:relative;}

.intro .visu img{
	position:relative;
	display:block;
	height: 100%;
    width: auto;
    left:50%;
    transform:translateX(-50%);
}
.intro .containCopy {
	position:relative;
}
.intro .copy {
	color:#aaaaaf;
	margin:0 auto;
	max-width:500px;
	padding:150px 40px;
	height:100%;
}
.intro h2 {margin-bottom:45px;}
.intro p {
	padding:0px 0 20px 40px;
	font:14px "Open Sans";
	line-height:1.8em;
}

.intro .button{
	margin:25px 0 0 40px;
}



 /* ==========================================================================
   Intro Réalisation
   ========================================================================== */
.hpGalerie {
	background:#fff;
	overflow:auto;
	-webkit-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.49);
	-moz-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.49);
	box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.49);
	position:relative; 
	z-index:2;
}
.hpGalerie .containCopy {
	position:relative;
}
.hpGalerie .copy {
	color:#525252;
	margin:0 auto;
	max-width:500px;
	padding:160px 40px;
	height:100%;
}
.hpGalerie h2 {margin-bottom:45px;}
.hpGalerie p {
	padding:0px 0 20px 40px;
	font:14px "Open Sans";
	line-height:1.8em;
}
.hpGalerie .button{
	margin:25px 0 0 40px;
}
.hpGalerie .right {padding:40px 0;}
.hpGalerie .right ul {}
.hpGalerie .right li {float:left; padding:4px;}
.galdecal {margin-left:120px;}
.pinterest_images_Homepage {

}
.pinterest_images_Homepage li a{
	display:inline-block;
	background-size:cover;
	width:240px;
	height:240px;
	padding:2px;
	border:1px solid #fff;
}

 /* ==========================================================================
   SERVICE
   ========================================================================== */

.section_service {
	background:#151515; 
	border-top:3px solid #0066b2; 
	overflow: auto; 
	position:relative;
}
.section_service .visu {
	display:inline-block; 
}

.section_service .visu img{
	position:relative;
	display:block;
	height: 100%;
    width: auto;
    left:50%;
    transform:translateX(-50%);
}
.section_service .containCopy {
	position:relative;
}
.section_service .copy {
	color:#aaaaaf;
	margin:0 auto;
	max-width:500px;
	padding:150px 40px;
	height:100%;
}
.section_service h2 {margin-bottom:55px;}
.section_service p {
	padding:0px 0 20px 40px;
	font:14px "Open Sans";
	line-height:1.5em;
}

.navServiceDark {
	padding-left:40px;
	display:inline-block;
	margin:0 auto;
}
.navServiceDark li {
	float:left;
	margin:0 20px 20px 0 ;
}
.navServiceDark a, .navServiceDark div {
	position:relative;
	font:11px "AvantGardeMedium";
	text-transform:uppercase;
	color:#fff;
	display:inline-block;
	width:130px;
	height:130px;
	text-align:center;
}
.navServiceDark li a:before {
	content:url(../graphics/icon/corner.svg);
	height:5px; width:5px;
	position:absolute;
	bottom:15px; right:8px;
}

.navServiceDark svg {
	display:inline-block;
	height:36px; 
	width:auto;
	margin:35px 0 15px 0;
	fill:#838383;
}
.navServiceDark .buttonService {
	border-left: 2px solid #1d3478;
	border-right: 2px solid #0066b2;
	background-position: 0 0, 0 100% ;
	background-repeat: no-repeat;
	-webkit-background-size: 100% 2px;
	-moz-background-size: 100% 2px;
	background-size: 100% 2px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
	background-image: -webkit-linear-gradient(left, #1d3478 0%, #0066b2 100%), -webkit-linear-gradient(left, #1d3478 0%, #30066b2 100%);
	background-image: -moz-linear-gradient(left, #1d3478 0%, #0066b2 100%), -moz-linear-gradient(left, #1d3478 0%, #0066b2 100%);
	background-image: -o-linear-gradient(left, #1d3478 0%, #0066b2 100%), -o-linear-gradient(left, #1d3478 0%, #0066b2 100%);
	background-image: linear-gradient(to right, #1d3478 0%, #0066b2 100%), linear-gradient(to right, #1d3478 0%, #0066b2 100%);
	/*-webkit-transition: background-size .4s ease, color.4s ease, fill .4s ease, color.4s ease,;*/
    transition: all .3s ease;
}
.section_service .button {margin-left:40px;}
.buttonService:hover, .buttonService:hover svg {
	fill:#fff;
	-webkit-background-size: 100% 55%;
	-moz-background-size: 100% 55%;
	background-size: 100% 55%;
}

 /* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
	overflow:auto;
	 border-top:3px solid #0066b2;
	 background:#151515;
}
.footer .topinfo {
	background:#efefef url(../graphics/footer_bg.jpg) no-repeat bottom right ;
		overflow:auto;
}

.footer .logo svg {width:250px; height:auto;}
.footer .logo  {text-align:center; margin:110px 0;}

.footer .info {
	display:inline-block;
	overflow:auto;
	margin-top:75px;
}
.footer .info table {
	margin:0 auto
}
.footer .info th {
	font:18px "AvantGardeBold";
	color:#333;
	text-align:left;
	padding-bottom:23px;
}
.footer .info .title + td{
	font:14px "Open Sans";
	color:#646464;
	line-height:1.3em;
	padding-bottom:8px;
}
.footer .info .title {
	display:inline-block;
	font:12px "Open Sans";
	text-transform:uppercase;
	color:#005da7;
	margin-right:10px;
}
.footer .sitemap {
	text-align:center;
}


.footer .sitemap ul li {
	display:inline-block;
}
.footer .sitemap li a{
	display:inline-block;
	padding:25px 40px;
	font:14px "AvantGardeMedium";
	color:#ececec;
}
.footer .sitemap li a:hover{
	color:#fff; background:#1b1b1b;
}
.footer .sitemap li.active a{
	color:#0066b2;
}


 /* ==========================================================================
   PAGE SOCIETE
   ========================================================================== */

.topPageSociete {
	background:#fcfcfc url(../graphics/bg_societe.jpg) fixed;
	background-size: cover;
	background-position:bottom;
	padding:50px 0;
}
.topPageSociete {position:relative;}
.topPageSociete:before {
	background:#151515;
	position:absolute;
	content:'';
	width:50%;
	height:50px;
	bottom:-4px;
	right:0;
}
.page_societe b {
	line-height:0.8em;
	font-size:130px;
}
.page_societe h2 span {font-size:24px;}
.page_societe h2 {position:relative;}
.page_societe .copy {
	background:url(../graphics/horloge.png) no-repeat;
	background-size:245px;
	background-position:60% 70px;
}
#map {
	width:100%;
	height:100%;
}
.googlemap {padding:0 !important;}
.googlemap:before {
	content:'';
	background:url(../graphics/corner.svg) top left no-repeat;
	background-size:200%;
	position:absolute;
	top:0;
	left:50%;
	width:80px;
	z-index:9999;
	height:100%;
}

.navServic_rec {
	position:absolute;
	z-index:21;
	right:0; top:50%;
	transform:translateY(-50%);
}
.navServic_rec ul {
	display:inline-block;
	margin:0 auto;
	font-size: 0;
}
.navServic_rec li+li {
	border-top:1px solid #00599c;
}
.navServic_rec a, .navServic_rec div {
	position:relative;
	font:11px "AvantGardeMedium";
	text-transform:uppercase;
	color:#fff;
	display:inline-block;
	width:240px;
	height:110px;
	text-align:center;
}
.navServic_rec div span:before {
	content:url(../graphics/icon/corner_w.svg);
	height:10px; width:10px;
	position:absolute;
	bottom:5px; right:5px;
}
.navServic_rec a:hover span:before {
	content:url(../graphics/icon/corner.svg);
}
.navServic_rec a {
	position:relative;
}
.navServic_rec svg {
	display:inline-block;
	margin:25px 0 10px 0;
}
.navServic_rec span {
	display:block; 
}
.navServic_rec div+div {
	background:#fff;
	position:absolute;
	top:0px;
	left:-240px;
	-webkit-transition: left .2s ease; /* Safari */
    transition: left .2s ease;
}
.navServic_rec .underbutton{
	margin-left:0px;
	-webkit-transition: all .2s ease; /* Safari */
    transition: all .2s ease;
}
.navServic_rec .underbutton svg {fill:#15a7e4;}
.navServic_rec .underbutton +div svg {fill:#0064af;}
.navServic_rec .svg {
	height:36px; width:auto;
}
.navServic_rec a:hover .underbutton {
	margin-left:60px;
}
.navServic_rec a:hover div + div {
	left:0;
	color:#0066b2;
}

 /* ==========================================================================
   PAGE service
   ========================================================================== */
.topPageService {
	background:#fcfcfc url(../graphics/bg_service.jpg) fixed;
	background-size: cover;
	background-position:center center;
	padding:50px 0;
}
.pageService .left, .pageService .right {position:relative;}
.pageService h2 {
	color:#333;
	font:24px "AvantGarde";
	margin-bottom:55px;
}
.pageService h2 span {
	font:48px "AvantGardeBold";	
	line-height:0.9em;
}
.pageService {
	overflow:initial;
	border-top:3px solid #0066b2; 
}
.pageService .containCopy {
	position:relative;
	background:#fff
}
.pageService .copy {
	color:#333333;
	margin:0 auto;
	max-width:500px;
	padding:150px 40px;
	height:100%;
}
.pageService ul.list-serv {
	margin:20px 0 40px 40px;
}
.pageService ul.list-serv li {
	background:url(../graphics/icon/corner.svg) no-repeat;
	background-size:6px;
	background-position:2px 20px;
	padding:10px 0 10px 20px;
	font:15px "Open Sans";
}
.pageService ul.list-serv li+li {
	border-top:1px solid #dadada;
}
.pageService .navServic_rec {top:0px; left:0px; transform:translateY(0);}
.pageService .navServic_rec {
	background:#fff;
	top:-40px;
}
.pageService .left .navServic_rec {left:0;}
.pageService .navServic_rec a, .pageService .navServic_rec div {
	width:90px; height:90px;
}
.pageService .navServic_rec li {float:left;}
.pageService .navServic_rec .underbutton {background:#0064af;}
.pageService .navServic_rec li+li {border-top:none; border-left:1px solid #00599c;}
.pageService .visu img{
	position:relative;
	display:block;
	height: 100%;
    width: auto;
    left:50%;
    transform:translateX(-50%);
}

 /* ==========================================================================
   Realisation
   ========================================================================== */
.topPageRea {
	background:#fcfcfc url(../graphics/bg_rea.jpg) fixed;
	background-size: cover;
	background-position:bottom;
	padding:50px 0;
}

.page_realisation .galerie li a{
	background-size:cover;
	width:12.5%;
	max-width:300px;
	height:240px;
	float:left;
	padding:2px;
	border:1px solid #fff;
}
.page_realisation .copy {
	margin-left:0; margin-right:0;
	padding-left:0; padding-right:0;
	padding-bottom:0;
	max-width: initial;
	margin-bottom:100px;
}
.page_realisation .copy p {
	padding:0 20px 0 40px;

}
.page_realisation .galerie {margin:100px 0; overflow:auto;}
.map_contact {
	min-width:500px;
	max-width:500px;
	width:100%;
	height:100%;
}	

 /* ==========================================================================
   contact
   ========================================================================== */
.top_page_contact {
}
.contact {
	overflow:auto;
	text-align:left;
	padding-bottom:100px;
}
.contact h2 {
	font:36px "AvantGardeBold";
	letter-spacing:4px;
	line-height:1em;
	margin-bottom:35px;
}
.contact p {
	font:16px "Open Sans";
	line-height:1.5em;
	padding:0 0 20px 0;
}
.contact .intro_contact{
	padding:80px 80px 0 80px;
	overflow:auto;
	background:#fff;
}
.contact .info_contact {
	padding:80px 80px 0 80px;
	overflow:auto;
	background:#151515;
}
.info_contact li { 
	font:16px "Open sans";
	color:#939393;
	padding:6px 0 50px 50px;

}
.info_contact li b { 
	display:inline-block;
	font:18px "Open sans";
	color:#fff;
	font-weight:600;
	padding-bottom:10px;
}
.info_contact .compte {
	text-align:center;
	font:16px "Open sans";
	color:#fff;
	padding-top:100px;
}
.info_contact .adress {
	background:url(../graphics/icon/icon_adress.png) no-repeat top left;
}
.info_contact .tel {
	background:url(../graphics/icon/icon_tel.png) no-repeat top left;
}
.info_contact .fax {
	background:url(../graphics/icon/icon_fax.png) no-repeat top left;
}
.info_contact .mail {
	background:url(../graphics/icon/icon_mail.png) no-repeat top left;
}
.contain_contact {
	position:relative;
	z-index:5;
}
#map_contact {
	min-width:500px;
	min-height:500px;
	width:100%;
	height:100%;
}
.contain_map {
	min-width:500px;
	min-height:500px;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:0;
}
.on_top, .footer.contact {
	position:relative;
	z-index:5;
}


 /* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 1220px) {
  	.checkd {display: block;}
  	.checkt {display: none;}
  	.page_realisation .galerie li a{ width:25%}
	.page_realisation .copy {padding-left:100px; padding-right:100px;}
}

@media screen and (max-width: 850px) {
	.checkd {display: none;}
  	.checkt {display: block;}
  	.w50 {width:100%;}
  	.maxw50 {width:100%;}
  	.visu {height:200px; overflow:hidden; display:none !important;}
  	.hpGalerie .copy, .intro .copy, .section_service .copy {padding-bottom:50px; padding-top:100px;}
  	.galdecal {margin:0;}
  	.header .accueil  {display:none;}
  	.intro .containCopy  {
  		background:url(../graphics/darker.png) top left,  url(../graphics/visu/intro.jpg)top left;
  		background-size: cover, cover;
  	}
  	.section_service .containCopy  {
  		background:url(../graphics/darker.png) top left,  url(../graphics/visu/service.jpg)top left;
  		background-size: cover, cover;
  	}
  	.page_societe .containCopy {
  		background:url(../graphics/darker.png) top left,  url(../graphics/visu/societe.jpg)top left;
  		background-size: cover, cover;
  	}
  	.w33{width:50%}
  	.footer .topinfo {background:#efefef;}
  	.nav li a {
		padding-left:30px; padding-right:30px;
	}
	.navServic_rec, .topPageSociete:before {display:none;}
	#map {min-height:400px;}
	.pageService .containCopy {background:#fff;}
	.pageService ul.list-serv {margin-left:0;}
	.pageService .visu {display:block !important;}
	.pageService .visu img {width:100%; height:auto;}
	.pageService .copy {padding-top:70px;}
	.page_realisation .galerie li a{ width:33%;}
	.page_realisation .copy {padding-bottom:0;}
	.contact .info_contact, .contact .intro_contact {float:initial; margin:0 auto;}
	.contact .intro_contact {padding-bottom:100px;}
}

@media screen and (max-width: 500px) {
	.checkd {display: none;}
  	.checkt {display: none;}
  	.logo.on_top {
  		max-width:65%;
  		height:auto;
  	}
  	.intro p, .section_service p, .hpGalerie p, .section_service .navServiceDark {margin-left:0; padding-left:0;}
	.intro .button, .hpGalerie .button, .section_service .button {margin-left:0; padding-left:40px; padding-right:40px;}
	.section_service .navServiceDark li {margin:0 10px 10px 0;}
	/*FOOTER*/
	.footer .sitemap, .footer .logo {display:none;}
	.footer .info {width:100%; padding-bottom:100px;}
	/*NAV*/
	.header .nav {
		display:none;
		height:100%; width:100%;
		position:fixed;
		z-index:8;
		top:0; left:0;
		background:#1b1b1b url(../graphics/logo_light.svg) no-repeat center top;
		background-size: 50% auto;
		background-position: center 5%;
	}
	header .nav li a, header .nav li  {
		display:inline-block;
		width:100%;
		background:#1b1b1b;		
	}
	header .nav .active{
		background:#1f1f1f;		
	}
	header .nav ul {
		margin-top:150px;
	}
	.navMobile {
		display:block;
		position:fixed;
		bottom:0; left:0;
		background:#1b1b1b;
		z-index:56;
		width:100%;
	}
	.navMobile li a{
		position:inline-block;
		width:33%;
		float:left;
		padding:30px 0 10px;
		color:#666666;
		font:11px "Open Sans" ;
		text-transform:uppercase;
		border-left: 1px solid #090909;
		border-top: 1px solid #090909;
	}
	.navMobile .mail {
		background: url(../graphics/icon_mail.svg) no-repeat center top;
		background-size: 25% auto;
		background-position: center center;
		text-indent:-999em;
	}
	.navMobile .phone {
		background: url(../graphics/icon_call.svg) no-repeat center top;
		background-size: 25% auto;
		background-position: center center;
		text-indent:-999em;

	}
	.navMobile .hamburger {
		background:url(../graphics/icon_menu.svg) left top no-repeat;
		background-size: 20% auto;
		background-position: center 20%;
	}
	.hamburger.open {
		background:#1b1b1b url(../graphics/icon_menu.svg) left top no-repeat;
		background-size: 20% auto;
		background-position: center 20%;
	}
	.navService li {display:inline-block; float:none; margin:10px;}
	.googlemap:before {display:none;}
	.page_realisation .galerie li a{ width:50%}
	.page_realisation .copy {padding-left:20px; padding-right:20px;}
	.contact .info_contact, .contact .intro_contact {padding-left:40px; padding-right:40px;} 
	.page_societe b {font-size:90px;}
	.pageService h2 span {font-size:36px;}
}



@media screen and (max-height: 750px) {
	 .h100 {height:auto;}
	 .header .logo {padding-top:100px;}
	 .header .nav {margin-bottom:50px;} 
	 .header .navService {padding-bottom:100px;}

}




 /* ==========================================================================
   Internet explorer
   ========================================================================== */

.lt-ie9 .wow {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

 /* ==========================================================================
   LightBox
   ========================================================================== */
s

.is-hidden
		{
			display: none;
		}

		.btn
		{
			text-transform: uppercase;
			color: #efefef;
			background-color: #333;
			padding: 0.313em 0.625em; /* 5 10 */
		}
			.btn:hover,
			.btn:focus	{ background-color: #c00; }
			.btn:active	{ background-color: #a00; }


		#container
		{
			width: 41.25em; /* 660 */
			text-align: center;
			padding: 0 1.25em; /* 20 */
			margin: 3.125em auto 6.25em; /* 50 100 */
		}
			#container h1
			{
				font-size: 2.125em; /* 34 */
				line-height: 0.882em; /* 30 (34) */
				text-transform: uppercase;
			}
				#container h1 span
				{
					font-size: 0.588em; /* 20 (34) */
					line-height: 1em; /* 20 (20) */
					color: #aaa;
					display: block;
				}
				#container h1 a:hover span,
				#container h1 a:focus span { color: #333; }

			#container h2
			{
				border-top: 1px solid #ddd;
				padding-top: 1.875em; /* 30 */
				margin-top: 1.875em; /* 30 */
				margin-bottom: 0.625em; /* 10 */
			}
				#container h2 span
				{
					color: #666;
				}
				#container h2[data-caption]:before
				{
					font-size: 0.875rem;
					font-weight: 300;
					color: #fff;
					background-color: #c00;
					display: inline-block;
					content: attr( data-caption );
					padding: 0.125rem 0.313rem; /* 2 5 */
					margin-right: 0.625rem; /* 10 */

					-webkit-transform: rotate( -8deg );
					-ms-transform: rotate( -8deg );
					transform: rotate( -8deg );
				}

			#container ul
			{
			}
				#container li
				{
					display: inline-block;
					margin: 0.625em; /* 10 */
				}
					#container img
					{
						width: 8.75em; /* 140 */
						height: 8.75em; /* 140 */
						border-color: #eee;
						border: 0.625em solid rgba( 255, 255, 255, .5 ); /* 10 */

						-webkit-box-shadow: 0 0 0.313em rgba( 0, 0, 0, .05 ); /* 5 */
						box-shadow: 0 0 0.313em rgba( 0, 0, 0, .05 ); /* 5 */

						-webkit-transition: -webkit-box-shadow .3s ease, border-color .3s ease;
						transition: box-shadow .3s ease, border-color .3s ease;
					}
						#container img:hover,
						#container img:focus
						{
							border-color: #fff;

							-webkit-box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */
							box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */
						}

		#imagelightbox footer
		{
			font-size: 0.875em; /* 14 */
			color: #aaa;
			border-top: 1px solid #ddd;
			padding-top: 2.143em; /* 30 (14) */
			margin-top: 2.143em; /* 30 (14) */
		}
			footer a		{ color: #666; }
			footer a:hover,
			footer a:focus	{ color: #333; }


		/* IMAGE LIGHTBOX SELECTOR */

		#imagelightbox
		{
			cursor: pointer;
			position: fixed;
			z-index: 10000;

			-ms-touch-action: none;
			touch-action: none;

			-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
			box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
		}


		/* ACTIVITY INDICATION */

		#imagelightbox-loading,
		#imagelightbox-loading div
		{
			border-radius: 50%;
		}
		#imagelightbox-loading
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			position: fixed;
			z-index: 10003;
			top: 50%;
			left: 50%;
			padding: 0.625em; /* 10 */
			margin: -1.25em 0 0 -1.25em; /* 20 */

			-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
			box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
		}
			#imagelightbox-loading div
			{
				width: 1.25em; /* 20 */
				height: 1.25em; /* 20 */
				background-color: #fff;

				-webkit-animation: imagelightbox-loading .5s ease infinite;
				animation: imagelightbox-loading .5s ease infinite;
			}

			@-webkit-keyframes imagelightbox-loading
			{
				from { opacity: .5;	-webkit-transform: scale( .75 ); }
				50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
				to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
			}
			@keyframes imagelightbox-loading
			{
				from { opacity: .5;	transform: scale( .75 ); }
				50%	 { opacity: 1;	transform: scale( 1 ); }
				to	 { opacity: .5;	transform: scale( .75 ); }
			}


		/* OVERLAY */

		#imagelightbox-overlay
		{
			background-color: #fff;
    		background-color: rgba( 0, 0, 0, 0.6);
			position: fixed;
			z-index: 9998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}


		/* "CLOSE" BUTTON */

		#imagelightbox-close
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			text-align: left;
			background-color: #666;
			border-radius: 50%;
			position: fixed;
			z-index: 10002;
			top: 2.5em; /* 40 */
			right: 2.5em; /* 40 */

			-webkit-transition: color .3s ease;
			transition: color .3s ease;
		}
		#imagelightbox-close:hover,
		#imagelightbox-close:focus { background-color: #111; }

			#imagelightbox-close:before,
			#imagelightbox-close:after
			{
				width: 2px;
				background-color: #fff;
				content: '';
				position: absolute;
				top: 20%;
				bottom: 20%;
				left: 50%;
				margin-left: -1px;
			}
			#imagelightbox-close:before
			{
				-webkit-transform: rotate( 45deg );
				-ms-transform: rotate( 45deg );
				transform: rotate( 45deg );
			}
			#imagelightbox-close:after
			{
				-webkit-transform: rotate( -45deg );
				-ms-transform: rotate( -45deg );
				transform: rotate( -45deg );
			}


		/* CAPTION */

		#imagelightbox-caption
		{
			text-align: center;
			color: #fff;
			background-color: #666;
			position: fixed;
			z-index: 10001;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0.625em; /* 10 */
		}


		/* NAVIGATION */

		#imagelightbox-nav
		{
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			border-radius: 20px;
			position: fixed;
			z-index: 10001;
			left: 50%;
			bottom: 3.75em; /* 60 */
			padding: 0.313em; /* 5 */

			-webkit-transform: translateX( -50% );
			-ms-transform: translateX( -50% );
			transform: translateX( -50% );
		}
			#imagelightbox-nav button
			{
				width: 1em; /* 20 */
				height: 1em; /* 20 */
				background-color: transparent;
				border: 1px solid #fff;
				border-radius: 50%;
				display: inline-block;
				margin: 0 0.313em; /* 5 */
			}
			#imagelightbox-nav button.active
			{
				background-color: #fff;
			}


		/* ARROWS */

		.imagelightbox-arrow
		{
			width: 3.75em; /* 60 */
			height: 7.5em; /* 120 */
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			vertical-align: middle;
			display: none;
			position: fixed;
			z-index: 10001;
			top: 50%;
			margin-top: -3.75em; /* 60 */
		}
		.imagelightbox-arrow:hover,
		.imagelightbox-arrow:focus	{ background-color: rgba( 0, 0, 0, .75 ); }
		.imagelightbox-arrow:active { background-color: #111; }

			.imagelightbox-arrow-left	{ left: 2.5em; /* 40 */ }
			.imagelightbox-arrow-right	{ right: 2.5em; /* 40 */ }

			.imagelightbox-arrow:before
			{
				width: 0;
				height: 0;
				border: 1em solid transparent;
				content: '';
				display: inline-block;
				margin-bottom: -0.125em; /* 2 */
			}
				.imagelightbox-arrow-left:before
				{
					border-left: none;
					border-right-color: #fff;
					margin-left: -0.313em; /* 5 */
				}
				.imagelightbox-arrow-right:before
				{
					border-right: none;
					border-left-color: #fff;
					margin-right: -0.313em; /* 5 */
				}

		#imagelightbox-loading,
		#imagelightbox-overlay,
		#imagelightbox-close,
		#imagelightbox-caption,
		#imagelightbox-nav,
		.imagelightbox-arrow
		{
			-webkit-animation: fade-in .25s linear;
			animation: fade-in .25s linear;
		}
			@-webkit-keyframes fade-in
			{
				from	{ opacity: 0; }
				to		{ opacity: 1; }
			}
			@keyframes fade-in
			{
				from	{ opacity: 0; }
				to		{ opacity: 1; }
			}

		@media only screen and (max-width: 41.250em) /* 660 */
		{
			#container
			{
				width: 100%;
			}
			#imagelightbox-close
			{
				top: 1.25em; /* 20 */
				right: 1.25em; /* 20 */
			}
			#imagelightbox-nav
			{
				bottom: 1.25em; /* 20 */
			}

			.imagelightbox-arrow
			{
				width: 2.5em; /* 40 */
				height: 3.75em; /* 60 */
				margin-top: -2.75em; /* 30 */
			}
			.imagelightbox-arrow-left	{ left: 1.25em; /* 20 */ }
			.imagelightbox-arrow-right	{ right: 1.25em; /* 20 */ }
		}

		@media only screen and (max-width: 20em) /* 320 */
		{
			.imagelightbox-arrow-left	{ left: 0; }
			.imagelightbox-arrow-right	{ right: 0; }
		}