/*! normalize.css v1.1.0 | MIT License | git.io/normalize */abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,picture,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}article,aside,details,figcaption,figure,footer,header,picture,main,nav,section,summary,iframe{display:block}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:400}caption,th{text-align:left}a:active,embed,object{outline:0}audio,canvas,video{vertical-align:middle;display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus,button:focus{outline:thin dotted}abbr[title]{border:0}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;display:block;height:0;padding:0;border:0}mark{background:#ff0;color:#000}p,pre{margin:0 0 1em}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:100%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}nav ol,nav ul{list-style:none;list-style-image:none;margin:0}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure,form{margin:0}fieldset{border:0;margin:0;padding:0}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button{padding:0;border:0 none;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


/* global box-sizing */
*, *:after, *:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
html {font-size:62.5%;}
body {font:300 11px/1.4 Arial, sans-serif;color:#444; background: #204c56; margin:0; }
.clear{ clear:both; }
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:'.'; clear:both; height:0; }
.ie8 .clearfix { zoom:1; }

td, th { vertical-align:top; }
hr{ margin: 1em 0; border-top: 1px solid #ccc; }
img {vertical-align:bottom; }
blockquote{ margin-bottom:1em; font-style:italic; }
cite{ font-weight:bold; }
q{ font-style:italic; }
a { color:#444; text-decoration:none; }
a:hover { color:#444; }
a:focus { outline:0; }
a:hover, a:active { outline:0; }
input:focus { outline:0; border:1px solid #04A4CC; }

h1, h2{font: normal 43px/45px 'walkwayregular';letter-spacing: 1px;}
h2{font: bold 26px/29px 'walkwayregular'; }

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	max-width:1000px;
	width:100%;
	margin:0 auto;
	position:relative;
}

/* ----------------- HEADER ----------------- */
.bgHeader{
	width: 100%;
	margin: 0 auto;
	background: #ececec url('../images/bg-header-400.jpg') no-repeat top center;
	min-height: 162px;
	height: 162px;
	height: auto;
	text-align: left;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.bandeHeader{display: inline-block;  width: 100%; text-align: center;}
.personnage{
	display: inline-block;
	vertical-align: top;
	padding: 85px 0 0 0;
	width: 27%;/*17*/
	text-align: right;
}
.personnage img{width: 70px; height: 70px;}
a.signature img{width: 128px; height: 37px;}
.bandeIdentification{display: inline-block; vertical-align: top; width: 64%; padding: 84px 0 0 0;}
.identification{display: inline-block;  width: 100%; vertical-align: top; }
a.signature{display: inline-block;  padding: 0 0 0 13px;  vertical-align: top;}
.titrePersonnage{
	display: inline-block;
	text-align: center;
	font: normal 13px/15px 'walkwayregular';
	letter-spacing: 1px;
	color: #fff;
	padding: 5px 0 0 0;
	vertical-align: top;
}
.topGroupeBtnRS{position: absolute; top:5px; right: 5%;}
a.btnFacebook{display: inline-block; padding: 10px 0 0 0; vertical-align: top;}
a.btnFacebook img{width: 27px; height: 27px;}
a.btnLinkedIn{display: inline-block; padding: 10px 0 0 0; vertical-align: top;}
a.btnLinkedIn img{width: 27px; height: 27px;}
.topGroupeBtnRS a{margin: 0 0 0 2px;}
.groupeBtnRS{display: none;}


/* ----------------- MENU ----------------- */
.menu{display: none;  width: 100%; vertical-align: top; text-align: center; padding: 28px 0 0 0;}
.menu ul li{list-style: none; display: inline-block;}
.menu ul li a{
	display: inline-block;
	text-align: center;
	color: #fff;
	font: 500 18px/20px 'walkwayregular';
	letter-spacing: 1px;
	padding: 5px 15px;
	margin: 0 4px;
	background: #f7b075;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px
}
.menu ul li a:hover{background: #f4974a;}
.menu ul li:nth-child(2) a {background: #fa8989;}
.menu ul li:nth-child(2) a:hover {background: #f86464;}
.menu ul li:nth-child(3) a {background: #cea0cd;}
.menu ul li:nth-child(3) a:hover {background: #be82bd;}
.menu ul li:nth-child(4) a {background: #85c1ce;}
.menu ul li:nth-child(4) a:hover {background: #5eaebf;}
.menu ul li:nth-child(5) a {background: #bfdd93;}
.menu ul li:nth-child(5) a:hover {background: #abd271;}

.btnMobile{
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 999;
	background: #000;
	padding: 10px;
    border-radius:27px;
    -moz-border-radius:27px;
    -webkit-border-radius:27px;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
.menuMobile{
	display: none;
	position: fixed;
	top:0;
	left:0;
	width: 70%;
	height: 100%;
	background: #000;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
	z-index: 999;
}
.menuMobile ul{display: inline-block;}
.menuMobile ul li{width: 100%; display: inline-block; border-bottom: 1px solid #fff; padding: 15px 5px; }
.menuMobile ul li a{font: bold 20px/22px 'walkwayregular'; color: #fff; text-decoration: none; width: 100%; display: inline-block; }
.menuMobile ul li.btnFermer{border-bottom: 0; padding: 12px 12px 0 0;}
.menuMobile ul li.btnFermer a{text-align: right; display: inline-block; width: 100%; font: bold 24px/22px arial, sans-serif;}

/* ----------------- FLECHES ----------------- */
.fleche{position: absolute; top:-29px; left:0; width: 100%; text-align: center; }
.fleche a{text-decoration: none; width: 52px; height: 54px; display: inline-block; background: url(../images/fleche.png) no-repeat 0 0;}
.fleche a:hover{ opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ }

.fleche.verte{top:-25px; }
.fleche.verte a{background: url(../images/fleche-verte.png) no-repeat 0 0;}

a.flecheTOP{ position: fixed; bottom: 20px; right: 20px; text-decoration: none; display: inline-block; }
a.flecheTOP img{ width: 34px; height: 34px; display: inline-block; }


/* ----------------- STRATE ----------------- */
.strate{
	width: 100%;
	display: inline-block;
	text-align: left;
	padding: 40px 0 60px 0;
	border-bottom: 5px solid #fff;
	position: relative;
}

/* ----------------- SERVICES ----------------- */

.strate.service{background: #ececec !important; padding:0;}
.strate.service .bgStrate{
	width: 100%; 
	margin: 0 auto;
	padding: 0 20px 40px 20px;
	min-height: 364px;
	height: auto;
}
.strate.service .contenu{width: 100%; padding: 0; display: inline-block; text-align: center; clear: both;}
.strate.service .contenu h2{text-align: center; padding: 38px 0 18px 0; /*padding: 50px 0 40px 0;*/}

ul.listeService{width: 100%; }
ul.listeService li{
	font: normal 14px/16px Arial, sans-serif;/*17px/18px*/
	color: #3e5701;
	text-decoration: none;
	list-style: none;
	display: inline-block;
	width: 100%;
	background: #dae8c5;
	padding: 8px 10px;
	margin: 5px 0;
}
ul.listeService li:nth-child(even){background: #d1e4e8;} 

.btnServices{width: 100%;/*92*/ display: inline-block; text-align: center;}
.btnServices a{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	background: #d4325c;/*#5eaebf*/
	color: #fff;
	font: bold 19px/21px 'walkwayregular';
	letter-spacing: 1px;
	margin: 10px 0 0 0;
	padding: 6px 8px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

/* ----------------- A PROPOS ----------------- */


.strate.apropos{
	background: url(../images/bg-apropos-700.jpg) no-repeat bottom center;
	background-size: cover;
	width: 100%;
	text-align: center;
	padding: 20px;
}
.strate.apropos h2{color: #fff; padding: 0 0 13px 0;}
.bgApropos{ width: 96%; margin: 0 auto; padding: 18px 0 44px 0; }
.boiteApropos{
	width: 100%;/*92*/
	display: inline-block;
	background: #fff;
	text-align: center;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding: 15px;
    margin:0;
}
.boiteApropos p{font: normal 13px/15px Arial, sans-serif;color: #423d3e; text-align: left;}

/* ----------------- COMPETENCES ----------------- */
.strate.competences{background: #f7b075 !important; border-bottom: 5px solid #fff;}
.strate.competences .contenu{ width: 90% max-width: 750px; margin: 0 auto; text-align: center; }
.strate.competences .contenu h2{font: 700 30px/32px 'walkwayregular'; color: #fff; padding: 0 0 30px 0;  text-align: center;}
img.imgBoites { width: 100%; display: inline-block; }
img.imgBoites.mobile{display: inline-block;max-width: 340px;max-height: 201px;}
img.imgBoites.desktop{display: none;max-width: 722px;max-height: 224px;}
.boiteCompetences{
	width: 80%; 
	display: inline-block;
	background: #fff;
	text-align: center;
    margin:0;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding: 20px;
}
.boiteCompetences img{width: 100%; display: inline-block; max-width: 361px; max-height: 112px;}

/* ----------------- REALISATIONS ----------------- */
.strate.realisations{background: #be82bd !important; border-bottom: 5px solid #fff;}
.strate.realisations .contenu{ width: 90%; max-width: 750px; margin: 0 auto; text-align: center; }
.strate.realisations .contenu h2{font: 700 30px/32px 'walkwayregular'; color: #fff; padding: 0 0 30px 0;  text-align: center;}
.boiteRealisations{
	font: 400 12px/23px Arial, sans-serif;
	text-decoration: none;
	color: #595858;
	background: #fff;
	display: inline-block;
	text-align: center;
	margin:0;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding: 10px 20px 10px 20px;
}
.boiteRealisations img{display: inline-block; margin: 20px;}
.boiteRealisations p.choixRes{margin: 0;}
.boiteRealisations a{text-decoration: underline; display: inline-block; padding: 0 0 1px 0;}
.boiteRealisations a:hover{color: #000; text-decoration: none;}

/* ----------------- CLIENTS ----------------- */
.strate.clients{background: #5eaebf !important; border-bottom: 5px solid #fff;}
.strate.clients .contenu h2{ color: #fff; padding: 0 0 30px 0;  text-align: center;}
.strate.clients .contenu{ width: 90%; margin: 0 auto; text-align: center; }
.boiteClients{
	width: 100%; 
	display: inline-block;
	background: #fff;
	text-align: center;
	padding: 10px;
    margin:0;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding: 20px;
}
.boiteClients img{ width: 100%; max-width: 1000px; max-height: 188px; }

/* ----------------- CONTACT ----------------- */
.strate.contact{background: #abd271 !important;}
.strate.contact .contenu h2{ color: #fff; padding: 0 0 30px 0;  text-align: center;}
.strate.contact .contenu{ width: 90%; max-width: 808px; /*662px*/margin: 0 auto; text-align: left; }

.groupeChamps{width: 100%; float: left; text-align: left; padding: 0 0 20px 0;}
.groupeChamps.simple{width: 100%;}
.groupeChamps.simple:nth-child(1){margin: 0 2% 0 0;}
.groupeChamps label{font: normal 19px/21px Arial, sans-serif; color: #fff; padding: 0 0 5px 0; display: inline-block;}
.groupeChamps input, .groupeChamps textarea{
	width: 100%;
	display: inline-block;
	padding: 10px;
	border: 0;
	font: normal 16px/18px Arial, sans-serif; resize: none;
}
.groupeChamps textarea{height: 150px;}
.groupeChamps.envoyer{text-align: right;}
p.succes{font: bold 13px/15px Arial; background: #d6ff98; padding: 20px 10px; text-align: center; color: #333; border: 2px solid #7aa935;}

button.bouton, input.bouton, input[type="submit"].bouton{background: #7aa935; font: normal 21px/23px 'walkwayregular'; letter-spacing: 1; color: #fff; text-align: center; padding: 10px 30px;}
button.bouton:hover, input.bouton:hover{
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

footer{width: 100%; margin: 0 auto; padding: 20px 0;}
.copyright{text-align: center; color: #fff;font: normal 12px/14px Arial, sans-serif; padding: 0 10px;}

/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
    font-family: 'walkwayregular';
    src: url('../fonts/walkway-webfont.woff2') format('woff2'),
         url('../fonts/walkway-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:400px) {
	.bgHeader{
		background: #ececec url('../images/bg-header-600.jpg') no-repeat top center;
		min-height: 245px;
		height: 245px;
		height: auto;
	}
	.personnage{padding: 168px 0 0 0;}
	.bandeIdentification{padding: 167px 0 0 0;}
	a.signature{width: 100%;}
	img.imgBoites.mobile{display: none;}
	img.imgBoites.desktop{display: inline-block;}
	ul.listeService li{font: normal 17px/18px Arial, sans-serif;}
}
@media only screen and (min-width:417px) {
	.bandeIdentification{ width: 72%; }
	a.signature img{width: 140px; height: 40px;}
	a.btnFacebook{padding: 5px 0 0 0;}
	a.btnFacebook img{width: 33px; height: 33px;}
	a.btnLinkedIn{padding: 5px 0 0 0;}
	a.btnLinkedIn img{width: 33px; height: 33px;}
	.personnage{width: 26%;}
}

@media only screen and (min-width:480px) {
	.personnage{ width: 25%; }
	.bandeIdentification{ width: 64%; }

}
@media only screen and (min-width:540px) {
	.strate.apropos{background: url(../images/bg-apropos.jpg) no-repeat bottom center; background-size: cover;}
	.bgApropos{padding: 30px;}
	.strateApropos h2{ padding: 24px 0 13px 0; font: normal 27px/29px 'walkwayregular'; }
	a.btnFacebook img{width: 47px; height: 47px;}
	a.btnLinkedIn img{width: 47px; height: 47px;}
}
@media only screen and (min-width:600px) {
	.bgHeader{
		background: #ececec url('../images/bg-header.jpg') no-repeat top center;
		min-height: 408px;
		height: 408px;
		height: auto;
	}
	.personnage{padding: 296px 0 0 0;}
	.personnage img{width: 140px; height: 140px;}
	a.signature{width: 40%; padding: 176px 0 0 0;}
	.titrePersonnage{width: 52%; padding: 184px 0 0 0;}
	.contenuService{padding: 0 0 0 300px;width: 94%;}
	.bgService{background: url(../images/plante.jpg) no-repeat bottom left;}
	.btnServices{width: 95%;}
	ul.listeService li{margin: 5px;}
	.strateApropos h2{font: normal 52px/54px 'walkwayregular'; padding: 23px 0 0 0;}
	.boiteApropos{ width: 95%; margin: 0; padding: 20px 20px 10px 20px; }
	.boiteCompetences{padding: 20px;}
	.contenuCompetences{width: 90%;}
	.groupeChamps.simple{width: 49%;}
}

@media only screen and (min-width:700px) {
	.strate.apropos{background: url(../images/bg-apropos.jpg) no-repeat bottom center; background-size: cover;}
	.boiteApropos{width: 95%;}
	.contenuClients{width: 90%;max-width: 662px}

	ul.listeService li:nth-child(even), ul.listeService li:nth-child(odd){ background: #dae8c5; }
	ul.listeService li{ width: 48%; background: #dae8c5; text-align: left; }
	ul.listeService li.double{background: #d1e4e8;}
}

@media only screen and (min-width:768px) {
	.topGroupeBtnRS{right: 3%;}
	a.signature{padding: 169px 0 0 0;}
	a.signature img{ width: 225px; height: 65px; }
	.titrePersonnage{ font: normal 19px/21px 'walkwayregular'; }
	.bandeIdentification{ width: 74%; }
	.boiteApropos{max-width: 750px;}
	.boiteApropos p{font: 400 15px/17px Arial, sans-serif;}
	.btnServices{max-width: 750px;}
	.contenuCompetences{width: 92%; max-width: 750px;}
	.boiteCompetences{padding: 30px;}
	.btnServices{width: 95%; }
	.bgApropos{width: 100%;}
	.contenuClients{max-width: 750px; width: 92%;}
	.boiteApropos{margin: 220px 0 0 0;}/*231*/
	.boiteRealisations{padding: 30px 100px 22px 100px;}
	.boiteRealisations img{margin: 0 20px 20px 20px;}
}

@media only screen and (min-width:822px) {
	.personnage{padding: 299px 0 0 0;}
	.personnage img{width: 130px; height: 130px;}
	a.signature{width: 251px; padding: 40px 0 0 0;}
	a.signature img{width: 175px; height: 50px;}
	.titrePersonnage{font: normal 21px/22px 'walkwayregular';padding: 45px 0 0 0; }
	.bandeIdentification{padding: 300px 0 0 0;}
}


@media only screen and (min-width:860px) {
	.personnage{width: 30%;}
	.personnage img{width: 192px; height: 192px;}
	a.signature{padding: 30px 0 0 13px;}
	a.signature img{width: 251px; height: 72px;}
	.bandeIdentification{width: 68%;}
	.titrePersonnage{padding: 44px 0 0 32px;padding: 44px 0 0 0;  }
	.contenuClients{ max-width: 750px;}
	.contenuContact{width: 92%; max-width: auto;}
	.boiteClients{width: 90%; padding: 4% 0;}
}
	
@media only screen and (min-width:900px) {
	.menu{display: inline-block;}	
	.btnMobile{display: none;}
}

@media only screen and (min-width:930px) {
	.strateApropos{ min-height: 684px; height: 684px; height: auto;}
	.boiteApropos{margin: 246px 0 0 0;}
	a.flecheTOP{ background: #000; }
}


@media only screen and (min-width:1000px) {
	.topGroupeBtnRS{display: none;}
	.groupeBtnRS{display: inline-block; padding: 38px 0 0 0;}
	.titrePersonnage{width: 46%;}
	a.btnFacebook, a.btnLinkedIn{margin: 0 0 0 6px;}
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection { background:#04A4CC; color:#FFF;text-shadow:none;}
::-webkit-selection { background:#04A4CC; color:#FFF; text-shadow:none;}
::-moz-selection { background:#04A4CC; color:#FFF; text-shadow:none;}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important;}
	a,a:visited {text-decoration:underline;}
	a[href]:after {content:" (" attr(href) ")";}
	abbr[title]:after {content:" (" attr(title) ")";}
	.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content:"";}
	pre,blockquote {border:1px solid #999;page-break-inside:avoid;}
	thead {display:table-header-group;}
	tr,img {page-break-inside:avoid;}
	img {max-width:100% !important;}
	@page {margin:0.5cm;}
	p, h2, h3 { orphans:3; widows:3;}
	h2, h3 { page-break-after:avoid; }
}