/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var,
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; }


body { font-family: 'Raleway', sans-serif; font-family: 'Open Sans', sans-serif; font-size: 100%; line-height: 130%; font-weight: 300; color: #222222; background-color: #bacddb;}

a {cursor: pointer; color: #333333;}


/* / / / / / / / / / / / / / / S T R U C T U R E */



.page { float: left; position: relative; width: 80%; margin: 0% 10%; padding:0; background-color: white;}
.frame {float: left; position: relative;  width: 80%; margin: 0 10%;  }

hr.clear {float: left; clear: both; width: 100%; visibility: hidden; border: none; background-color: transparent; color:none; opacity: 0;}

.full {float: left; width: 100%; padding: 3% 0; }
.full img.full {width: 100%;}



.col1, .col2 {padding-bottom: 3%;}

.grid1 {float: left; width: 97%; padding: 1.5%;}
.grid1 img.full {width: 100%;}

.grid2 {float: left; width: 100%;   padding: 1.5% 0; }
.grid2 .col1 {float: left; width: 47%; margin: 0 1.5%; }

.gridfourth {float: left; width: 25%;   padding: 1.5% 0; }
.grid2half {float: left; width: 50%;   padding: 1.5% 0; }
.grid2half .col1 {float: left; width: 48.5%; margin: 0 1.5% 0 0 ; }
.grid2half .col2 {float: left; width: 98.5%; margin: 0 1.5% 0 0 ; }

.grid2half h3.title {height: 100px; width: 90%;}

.grid3 {float: left; width: 100%;  padding: 1.5% 0;}
.grid3 .col1 {float: left; width: 30.33%; margin: 0 1.5%; }
.grid3 .col2 {float: left; width: 63.6%; margin: 0 1.5%; }

.grid4 {float: left; width: 100%;  padding: 1.5% 0;}
.grid4 .col1 {float: left; width: 22%; margin: 0 1.5%;}
.grid4 .col2 {float: left; width: 47%; margin: 0 1.5%; }
.grid4 .col3 {float: left; width: 72%; margin: 0 1.5%; }

.grid5 {float: left; width: 100%;  padding: 1.5% 0;}
.grid5 .col1 {float: left; width: 17%; margin: 0 1.5%;}
.grid5 .col2 {float: left; width: 37%; margin: 0 1.5%; }
.grid5 .col3 {float: left; width: 57%; margin: 0 1.5%; }
.grid5 .col4 {float: left; width: 77%; margin: 0 1.5%; }

.grid6 {float: left; width: 100%;  padding: 1.5% 0;}
.grid6 .col1 {float: left; width: 13.6%; margin: 0 1.5%; }
.grid6 .col2 {float: left; width: 30.2%; margin: 0 1.5%; }
.grid6 .col3 {float: left; width: 46.8%; margin: 0 1.5%; }
.grid6 .col4 {float: left; width: 63.4%; margin: 0 1.5%; }
.grid6 .col5 {float: left; width: 80%; margin: 0 1.5%; }

.w100 {width: 100%; margin: 0 0%;}
.w90 {width: 90%; margin: 0 5%;}
.w80 {width: 80%; margin: 0 10%;}
.w70 {width: 70%; margin: 0 15%;}
.w60 {width: 60%; margin: 0 20%;}
.w50 {width: 50%; margin: 0 25%;}
.w30 {width: 30%; margin: 0 35%;}
.w10 {width: 10%; margin: 0 45%;}


.nopadding {padding: 0 0 0 0;}
.nomargin {margin: 0;}
.invisible {visibility: hidden;}

#footer {background-image: url(media/bg_footer.jpg); background-position: center center;}
#footer, #footer2 {color: white; text-align: center; font-size: 80%; }
#footer p {font-size: 0.9em;}
#footer .frame, #footer .col1, #footer .grid4, #footer2 .frame, #footer2 .col1 {padding: 0 0 0 0; }
#footer a, #footer2 a {color: white; text-decoration: none;}
#footer li {list-style: none;}

#footer .btn_center {width: 200px; margin-left:-115px;}

#footer #logo img {width: 60%; margin: 20% 20% 0 20%; }
#footer .rezo {float: left; padding: 0 15%; width: 70%; margin: 0 0 0 16% ; }
#footer .rezo li {float: left; width: 25%;}
#footer .rezo li img {width: 100%;}
#footer #tel {float: left; width: 100%;}

.header { padding: 0; background-color: #DDEAF1;}
.header .frame {margin-top: -250px;}
.header img {width: 100%;}
.header ul {width: 100%; padding: 0; margin: 0 0 5% 0; float: left; }
.header ul li {list-style: none; float: left; margin: 0 10px 10px 0; }
.header ul li a {display:  block; padding: 5px 10px;  -webkit-transition : all 0.25s linear; -o-transition: all 0.25s linear; -moz-transition: all 0.25s linear; 	transition: all 0.25s linear; cursor: pointer; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; background-color: transparent; color: white; font-size: 0.7em; text-transform: uppercase; text-decoration: none; border: 1px solid white;}
.header ul li a:hover {background-color: white; color: black;}

.triangle {width: 100%; height: 18px;  padding: 0; background-image: url(media/blockheader_triangle.png); background-repeat: no-repeat; background-position: 10% top;  float: left;}

.blockhead {background-color: white; width: 80%; float: left; padding: 5% 10%; text-align: center; -webkit-border-radius: 20px;-moz-border-radius: 20px; border-radius: 20px;}
.blockhead a {font-family: Goergia, serif; font-style: italic; color: #999; text-decoration: none; font-weight: normal; margin-top: 30px; font-size: 0.85em;}
.blockhead a:hover {color: #444; text-decoration: underline;}


.teamportrait img {width: 100px; border-radius: 50%; line-height: 200%; margin-bottom: 20px;}

.accordion0 {float: left; width: 100%;}
.accordion0 .btn {margin: 30px 0 0 0; }
.accordion0 .accordionContent {width: 100%;}

.methodo {float: left; width: 100%;  margin: 5% 0 0 0; }
.methodo li {float: left; width: 25%; list-style: none; padding: 0 0; text-align: center; }

.methodo li .accordionButton {padding-bottom: 100px;}
.methodo li .accordionButton img {width: 30%;}

.bgboue .methodo li .accordionButton {background-color: #DDEAF1;}

.methodo li .accordionContent {float: left; width: 400%; z-index: 10; margin: 0 0 0 0 ; border-top: 1px solid #A9BDC7; padding: 10% 0 0 0; }

.bgblue .methodo li .accordionContent {background-color: #DDEAF1;}
.methodo li .accordion1 .accordionContent {margin-left: 0;}
.methodo li .accordion2 .accordionContent {margin-left: -100%;}
.methodo li .accordion3 .accordionContent {margin-left: -200%;}
.methodo li .accordion4 .accordionContent {margin-left: -300%;}



.methodo li .accordionContent .col1 {text-align: left;}
.methodo li .accordionContent .col3 p { text-align: left; margin-bottom: 15px;}
.methodo li .accordionContent .col3 p strong { color: #5e3c6f;}
.methodo li .accordionContent h2 {font-size: 1.6em; line-height: 130%; margin-bottom: 10px;}

/*
.methodo li .accordionContent .content1, .methodo li .accordionContent .content2 {text-align: center;}
.methodo li .accordionContent .content3, .methodo li .accordionContent .content4 {text-align: left;}*/
.methodo li .accordionContent img.portrait, img.portrait {border-radius: 50%; width: 50%; border: 7px solid white; }

a.pdf {font-family: Gerogia, seri; font-style: italic; color:#90969A; letter-spacing: -0.5px; font-size: 0.8em; margin-top: 30px; text-decoration: none;}
a.pdf:hover {color: #000;}

#twitter {overflow: hidden;}
#twitter span {float: left; margin: -48px 0 0 0px;  width: 100%; }
#twitter #twito {float: left; overflow: hidden; width: 100%;}


.project h2 {margin-top: 30px; margin-bottom: 30px; }
.advice {text-align: left; }
.advice p {font-size: 0.65em; font-family: Georgia, serif; line-height: 180%;}
.advice p a {color: #999; font-style: italic;}
.advice em {font-size: 0.8em;}
.advice img {/* margin-top: -10px; */ margin-bottom: 10px; width: 60px;}
.advice h5 {margin-bottom: 15px;}


#project .navproj .hide {display: none;}
.project {padding: 3% 0; }
#catalogue .catalogue {display: none;}


ul.mozaique {float: left; width: 100%; list-style: none; margin-bottom: 7%; } 
ul.mozaique li {list-style: none; float: left; margin: -0.4% 0 0 0;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid white;}
ul.mozaique li.mozaic3 {width: 75%; }
ul.mozaique li.mozaic2 {width: 50%; }
ul.mozaique li.mozaic1 {width: 25%; }
ul.mozaique li img {width: 100%;}
ul.mozaique hr.clear {margin: 0 0 ;}


/* • • • • • F O N D S */


.bgdark {background-color: #401234;}
.bgmedium {background-color: #959eaf;}
.bglight {background-color: #f6f6f6;}
.bgbright {background-color: #ffffff;}

.bgblue {background-color: #DDEAF1;}
.bggreen {background-color: #00a885;}
.bgyellow {background-color: #fac51b;}
.bgred {background-color: #e14939;}
.bgpurple {background-color: #9365b8;}
.bgorange {background-color: #f37935;}
.bggrey {background-color: #aaaaaa;}
.bgblack {background-color: #262626;}
.bgwhite {background-color: #ffffff;}
.bgmaroon {background-color: #72685d;}
.bgpourpre {background-color: #5B1F4C;}




/* • • • • • T E X T E S */

h1 {font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 2em; line-height: 150%;}
h2 {font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 1.25em; line-height: 150%;}

h3 {font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1em; line-height: 150%;}
h4 {font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 0.85em; line-height: 150%;}
h5 {font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 0.65em; text-transform: uppercase; line-height: 150%;}
p {font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 0.8em;}




.tleft {text-align: left;}
.tcenter {text-align: center;}
.tright {text-align: right;}

.tbold {font-weight: 700;}
.tmaj {text-transform: uppercase;}
.legend {font-size: 0.75em; line-height: 170%;}


.tblue {color: #6E8E9D;}
.tgreen {color: #00a885;}
.tyellow {color: #fac51b;}
.tred {color: #FD474C;}
.tpurple {color: #9a005a;}
.torange {color: #f37935;}
.tgrey {color: #aaaaaa;}
.tlight {color: #d1d5d8;}
.tdark {color: #401234;}
.tblack {color: #241520;}
.twhite {color: #ffffff;}
.tmaroon {color: #72685d;}
.tlegend {font-size: 0.6em;}
.tgrey {color: #95918B;}
.tdata {font-size: 3em; font-weight: 300; line-height: 150%; }

.tserif {font-family: Georgia, serif;}

strong {font-weight: bold;}

.borderlight {border: 1px solid #d1d5d8; }
.bordergrey {border: 1px solid #95918B; }
.borderblue {border: 1px solid #6E8E9D; }

sup {font-size: 0.7em; }


.verbat p {font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 0.9em; line-height: 150%;}
.verbat p span {text-transform: uppercase; font-size: 0.7em; font-weight: 700;}
.verbat img {opacity: 0.2; margin-top: -50px;}

.verbatim { padding: 0; margin: 0 10%; float: left; width: 80%;}
.verbatim li  {list-style: none; margin: 0 0 50px 0; padding:0; background-color: #f2f7fb; padding: 50px 50px 45px 50px;}
.verbatim li h5 {line-height: 300%;}

#formulaire h5 {text-align: center;}
#formulaire h5 a {text-decoration: none; font-size: 1.8em; text-transform: none; color: #455588; font-weight: 300; line-height: 150%; text-align: center;}

#formulaire {width: 100%; float: left; padding: 0 0 50px 0; margin: 2% 0 0 0; }
#formulaire h3 {color: #00d36e; width: 60%; text-align: center; font-size: 1.6em; font-weight: 300; margin: 30px 20%; line-height: 150%; font-family: 'Roboto Slab', serif;  }
#formulaire h4 {color: #fd6868; width: 60%; text-align: center; font-size: 1.6em; font-weight: 300; margin: 30px 20%; line-height: 150%; font-family: 'Roboto Slab', serif;  }

form {width: 400px; float: left; position: relative; left: 50%; margin: 3% 0 0 -200px;  }
label {width: 100%; margin: 0 0 2% 0; }
input {width: 100%; padding: 2.5% 4% ; margin: 4px 0; background-color: white; border: 1px solid #d9d9d9; text-transform: uppercase;  color: #c3c3c3; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; font-size: 0.8em;}
textarea {width: 100%; padding: 3.5% 4%; margin: 4px 0; background-color: white; border: 1px solid #d9d9d9;  height: 80px; text-transform: uppercase; color: #c3c3c3; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; font-size: 0.8em;}
input.submit-button { display: block; height: 15px; padding: 13px 20px 27px 20px; background-color: #00d36e; color: white; text-decoration: none; width: 200px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; text-transform: uppercase; text-align: center; position: relative; left:50%; margin: 20px 0 0 -100px; font-weight: 700; border: none; -webkit-transition : all 0.2s linear; 	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear; transition: all 0.2s linear; cursor: hand;}
input.submit-button:hover {background-color: #048a4a; color: white;}


/* • • • • • L I E N S */


a.btn {display: block; float: left;   padding: 8px 15px; text-align: center; position: relative; clear: both;  text-decoration: none; -webkit-transition : all 0.15s linear; -o-transition: all 0.15s linear; -moz-transition: all 0.15s linear; 	transition: all 0.15s linear; line-height: 140%; font-weight: 400; margin-top : 5%;}

a.btn_center {  left: 50%; margin-left:-54px ; width: 78px; }

a.btn_simple {  font-family: 'Roboto Slab', Georgia, serif; font-style: italic;  text-decoration: none; line-height: 150%; color: #aaaaaa; border-bottom: 1px dotted #cccccc; }
a.btn_simple:hover { color: #3e8eb9; border-bottom: 1px solid #3e8eb9;}

a.btn_square { font-size: 0.8em; text-transform: uppercase; }
a.btn_square:hover {}

a.btn_radius {font-size: 0.65em; text-transform: uppercase; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; opacity: 0.7;}
a.btn_radius:hover { opacity: 1;}


a.btn_round {font-size: 0.8em; text-transform: uppercase; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

a.btn_square_picto { font-size: 0.8em; padding: 12px 25px 12px 40px;  text-transform: uppercase;  text-align: left; background-image: url(media/btn_picto.png); background-repeat: no-repeat; background-position: 15px center; }

a.btn_round_picto {font-size: 0.8em;  -webkit-border-radius: 20px;-moz-border-radius: 20px; border-radius: 20px;   padding: 12px 25px 12px 40px;  text-transform: uppercase;  text-align: left; background-image: url(media/btn_picto.png); background-repeat: no-repeat; background-position: 15px center; }

a.btn_picto { background-image: url(media/btn_picto2.png); padding: 55px 20px 12px 20px; background-repeat: no-repeat; background-position: -90px 10px; transition: none; font-size: 0.8em; text-transform: uppercase;}
a.btn_picto:hover {background-position: 10px 10px;}


/* • • • • • M E N U  */


#top {z-index: 999;}
#top .grid5 {padding: 1.5% 0 0 0 ; }

#top ul {float:right; width: 110%; padding: 10px 0 0 0; }
#top ul li {list-style: none; float: right; margin: 0 0 0 0px; }
#top ul li a {display: block;  height: 22px; background-color: #fffff; font-size: 0.7em; text-transform: uppercase;  color: #28324e;  padding: 8px 20px; text-align: center; position: relative; text-decoration: none; color: #777777; font-weight: 500; -webkit-transition : all 0.15s linear; -o-transition: all 0.15s linear; -moz-transition: all 0.15s linear; 	transition: all 0.15s linear; cursor: pointer;}
#top ul li a:hover { background-color: #f2f4f7;}
#top ul.menuround li a {-webkit-border-radius: 20px;-moz-border-radius: 20px; border-radius: 20px;}
#top ul.menuborder li a {border: 1px solid #959eaf;}
#top #toplogo img {width: 110px; float: left; margin: 18px 0 0 0;}


#top ul.menuderoulant li { position: relative; width: auto; padding: 0 2%; margin: 0% 0%; text-align: center;}
#top ul.menuderoulant li#blog {width: 5%; }


#top ul.menuderoulant li a { display: block; float: left; width: 100%; height: 50px; padding: 8px 0px; }

#top ul.menuderoulant li a:hover { background-color: transparent; color: #000; }

#top ul.menuderoulant li.drop:hover ul { display: block; z-index: 999; background-color: #5B1F4C; padding: 10px 0; width: 250px; margin: 0 0 0 -55px;  }


#top ul.menuderoulant li ul { display:none; position:absolute; width: 100%; top: 66px; left:0; list-style-type:none; margin:0; padding: 0 0 0 0; }
#top ul.menuderoulant li ul li {  float:none; height: auto; width: 100%; margin:0; padding:0;  border:none; font-size: 0.9em; line-height: 1.5em;}
#top ul.menuderoulant li ul li a { float:none; background:none; margin:0; width: 100%;  display:block; height:auto; margin:0; color: white; }
#top ul.menuderoulant li ul li a:hover { background-color:#290f22;  border-bottom: none; color: white;}

#mobilemenu { display: none;}




#top ul.bgdark, #top ul.bgmedium, #top ul.bglight, #top ul.bgbright   {background-color: transparent;}
#top ul.bgdark li a {background-color: #28324e ;} #top ul.bgdark li a:hover, a.bgdark:hover {background-color: #202942 ;}
#top ul.bgmedium li a {background-color: #959eaf ;} #top ul.bgmedium li a:hover, a.bgmedium:hover {background-color: #7f8795 ;}
#top ul.bglight li a {background-color: #f3f6f7 ;} #top ul.bglight li a:hover, a.bglight:hover {background-color: #d9e0e2 ;}
#top ul.bgbright li a {background-color: #ffffff ;} #top ul.bgbright li a:hover, a.bgbright:hover {background-color: #f2eeee ;}

#top ul.bgblue li a,  {background-color: #3e8eb9 ;} #top ul.bgblue li a:hover, a.bgblue:hover {background-color: #28749d ;}
#top ul.bggreen li a {background-color: #00a885 ;} #top ul.bggreen li a:hover, a.bggreen:hover {background-color: #079577 ;}
#top ul.bgyellow li a {background-color: #fac51b ;} #top ul.bgyellow li a:hover, a.bgyello:hover {background-color: #e5a000 ;}
#top ul.bgred li a {background-color: #e14939 ;} #top ul.bgred li a:hover, a.bgred:hover {background-color: #c83525 ;}
#top ul.bgpurple li a {background-color: #9365b8 ;} #top ul.bgpurple li a:hover, a.bgpurple:hover {background-color: #7a4f9d ;}
#top ul.bgorange li a {background-color: #f37935 ;} #top ul.bgorange li a:hover, a.bgorange:hover {background-color: #db540b ;}
#top ul.bggrey li a {background-color: #aaaaaa ;} #top ul.bggrey li a:hover, a.bggrey:hover {background-color: #949494 ;}
#top ul.bgblack li a {background-color: #262626 ;} #top ul.bgblack li a:hover, a.bgblack:hover {background-color: #040404 ;}
#top ul.bgwhite li a {background-color: #ffffff ;} #top ul.bgwhite li a:hover, a.bgwhite:hover {background-color: #f2f4f7 ;}
#top ul.bgmaroon li a {background-color: #72685d ;} #top ul.bgmaroon li a:hover, a.bgmaroon:hover {background-color: #5d5246 ;}

#top ul.tblue li a {color: #3e8eb9 ;}
#top ul.tgreen li a {color: #00a885 ;}
#top ul.tyellow li a {color: #fac51b ;}
#top ul.tred li a {color: #e14939 ;}
#top ul.tpurple li a {color: #9365b8 ;}
#top ul.torange li a {color: #f37935 ;}
#top ul.tgrey li a {color: #959eaf ;}
#top ul.tlight li a {color: #d1d5d8 ;}
#top ul.tdark li a {color: #4f4f4f ;}
#top ul.tblack li a {color: #262626 ;}
#top ul.twhite li a {color: #ffffff ;}


/* • • • • • I M A G E S */


.picto {width: 30%; margin: 0 25% 10% 25%;}
.partenaire {width: 70%; margin: 0 15%;}


a.push, a.push2, a.push4 {display: block; width: 100%; height: 100%; background-color: #3A384E; border-radius: 10px; overflow: hidden; color: white; text-decoration: none; position: relative;  }
a.push2 {border: 1px solid #e9e9e9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a.push3 {display: block; width: 100%; height: 100%; border: 1px solid #e9e9e9; border-radius: 10px; overflow: hidden; color: white; text-decoration: none; position: relative; padding: 55px 0; text-align: center; margin-bottom: 18px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  -webkit-transition : all 0.15s linear; -o-transition: all 0.15s linear; -moz-transition: all 0.15s linear; 	transition: all 0.15s linear;}
a.push4 { color: #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e9e9e9;}

a.push4 ul {float: left; width: 100%; position: absolute; top :35%; left: 10%;  padding-left: 18px; width: 70%; list-style-image: url(media/bullet_check.png); }
a.push4 ul li {line-height: 130%; margin-bottom: 7px; }

a.push img {width: 100%; opacity: 0.4; float: left; -webkit-transition : all 0.15s linear; -o-transition: all 0.15s linear; -moz-transition: all 0.15s linear; 	transition: all 0.15s linear;}


a.push2 img {width: 100%; opacity: 1; float: left; -webkit-transition : all 0.15s linear; -o-transition: all 0.15s linear; -moz-transition: all 0.15s linear; 	transition: all 0.15s linear;}
a.push4 img {width: 100%;}
a.pushblog {background-color: #5B1F4C; }
a.pushblog img {opacity: 0.2;}

a.push:hover img {opacity: 0.7; }
a h5 {position: absolute; top :25%; left: 10%; font-weight: 300;}
a h3 {position: absolute; top :35%; left: 10%; width: 80%; font-weight: 400; }
a p {position: absolute; bottom: 15%; left: 10%; }
a img.pushplus {width: 18px; position: absolute; right: 10px; top: 10px; opacity: 1;}
a.push4 img.pushplus {width: 18px; position: absolute; right: 15px; top: 0px; opacity: 1;}

a.push2 h5, a.push2 h3, a.push2 p {color: #333;}
a.push3 p {line-height: 250%; color: #b0b0b0; text-transform: uppercase; font-size: 0.6em; text-align: center; width: 100%; margin: 0 0 0 0 ; left: 0; }
a.push3:hover {background-color: #efefef;}
.content1 h2 {font-family: Georgia, serif;   }
.content1 h4 {text-transform: uppercase; font-weight: 400; font-size: 0.6em;}
.content1 h2, .content2 h2 {font-size: 2em; line-height: 110%; }
.content3 ol {float: left; width: 90%; padding-left: 10%; font-size: 0.8em; font-weight: 400;}
.content3 li {width: 100%;  text-align: left; margin-bottom: 10px; }



.graph {float: left; width: 80%;}
.graph .barre {margin-bottom: 15px; float: left; background: #f6f6f6; border: 1px solid #d6d5d5; height: 12px; width: 100%; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px;}
.graph .barre div {float: left; width: 10%; height: 10px; margin: 1px 0 0 1px; background: #FD474C; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px;}

.graph .barre .pc10  {width: 10%;}
.graph .barre .pc20  {width: 20%;}
.graph .barre .pc30  {width: 30%;}
.graph .barre .pc40  {width: 40%;}
.graph .barre .pc50 {width: 50%;}
.graph .barre .pc60  {width: 60%;}
.graph .barre .pc70  {width: 70%;}
.graph .barre .pc80  {width: 80%;}
.graph .barre .pc90  {width: 90%;}
.graph .barre .pc100  {width: 100%;}


.graph h5 {margin-bottom: 3px;}

.map2 {position: relative; float: left; width: 100%; }
.map2 img {width: 100%;}
.map2 p {position: absolute; color: #FD474C; font-size: 0.6em; text-transform: uppercase;}
.map2 p img {width: auto; margin: 0 0 0 20px}

ul.puredata {float: left; margin: 10px 0 0 0; width: 100%; list-style: none; font-family: 'Raleway', sans-serif; font-weight: 200; }
ul.puredata li {font-size: 24px; margin: 0 0 15px 0; color: #999;}
ul.puredata li h5 {margin: 0 0 3px 0; line-height: 100%; font-size: 10px; }

.description h3, .description p { width: 90%;}
.description h5 {color: #999;}
.clearmobile {display: none;}



#titraille h2 {font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 1.25em; line-height: 150%;}


/* / / / / / / / / / / / / / / M E D I A  Q U E R I E S */


@media only screen and (min-width: 1400px) {

	.page { width: 1300px; position: relative; left: 50%; margin: 0 0 0 -650px;}
	a h3 {position: absolute; top :35%; left: 10%; width: 80%; font-size: 1.2em; }

}

@media only screen and (max-width: 1250px) {
	
	.page { width: 100%; position: relative; left: 0%; margin: 0 0 0 0px;}
	a.push4 ul li {line-height: 110%; margin-bottom: 3px; font-size: 0.7em;}
	
	#top #toplogo { width: 100%;}
	#top #toplogo img {width: 110px; position: relative; float: left;  left:50%;  margin: 18px 0 0 -55px;}
	#top ul.menuderoulant {float: left;  }
	#top ul.menuderoulant li { position: relative; width: auto; padding: 0 2%; margin: 0% 0%; text-align: center; }
	
}

@media only screen and (max-width: 1000px) {

	.grid2half {width: 100%;}
	.grid2half .col1 {float: left; width: 23.5%; margin: 0 1.5% 0 0 ; }
	.mobilehide {display: none;}
	
	#mobilemenu {display: inherit; float: left; width: 100%; padding: 5% 0; }
	#mobilemenu a#minilogomobile {width: 100%;; float: left; text-align: center; }
	#mobilemenu a#minilogomobile img {width: 120px; }
	#mobilemenu .accordion {width: 100%; margin: 0; float: right; }
	#mobilemenu .accordionButton a {display: block; height: 30px; width: 100%; text-align: center; opacity: 0.5; padding: 10px 0 0 0;  float: left;}
	#mobilemenu .accordionButton a img {width: 30px;}
	#mobilemenu .accordionContent {width: 100%; margin: 0; float:left; padding: 5% 0;}
	#mobilemenu .accordionContent ul {width: 100%; margin: 0; float:left; padding: 0;}
	#mobilemenu .accordionContent ul li {width: 100%; margin: 0; float:left; border-top : 1px solid #333; padding: 0; }
	#mobilemenu .accordionContent ul li a {font-weight: 700; color: #401234;}
	#mobilemenu .accordionContent ul li ul {width: 100%;  float:left; padding: 0; margin: 0; }
	#mobilemenu .accordionContent ul li li {width: 100%; margin: 0 ; float:left; border-top : 1px dashed #cccccc; padding: 0; ;}
	#mobilemenu .accordionContent ul li li a {color: #999; font-weight: 300;} 
	#top .smobilehide {display: none;}
}

@media only screen and (max-width: 1050px) {

	a p {display: none; }
	a h3 {position: absolute; top :35%; left: 10%; width: 80%; font-size: 0.8em; }
}

/* @media only screen and (max-width: 650px) { */
@media only screen and (max-width: 640px ) {
	
	.smobilehide {display : none;}
	.clearmobile {display: inline; float: left; clear: both; width: 100%; visibility: hidden; border: none; background-color: transparent; color:none; opacity: 0;}	
	.clear {display: none;}
	.w80 {width: 100%; margin: 0;}
	.grid3 .col2, .grid4 .col2 {width: 100%;}
	.grid3 .col1 {width: 47%; }
	.accordionContent .grid2 .col1 {width: 100%;}
	.grid2half .col1 {float: left; width: 48.5%; margin: 0 1.5% 0 0 ; }
	.grid3 h3 {margin-bottom: 30px;}
	.smalllink {display: none;}
	.blockhead {margin-bottom: 30px; margin: 0;}
	
	#titraille h2 { font-size: 1em; }
	
	.header .frame {margin-top: -150px;}
	
	#footer #logo img {width: 40%; margin: 10% 30% 0 30%;}
	#footer .grid4 .col1, #footer2 .grid4 .col1 {width: 100%;}
	#footer2 {padding: 30px 0;	}
	#footer .col1, #footer2 .col1 {padding: 10px 0;}
	.grid6 .col2, .grid6 .col4 {width: 100%; margin-bottom: 15px;}
	.grid6 .col1 {width: 30%;}
	
	

	.methodo li {width: 100%;}
	.methodo li .accordionContent {float: left; width: 100%; z-index: 100; margin: 0 0 0 0 ; border-top: 1px solid #A9BDC7; padding: 10% 0 0 0; }


	.methodo li .accordionButton {padding-bottom: 100px;}
	.methodo li .accordionButton img {width: 15%;}
	
	.methodo li .accordionButton h5 {margin-top : -30px;}
	
	
	.methodo li .accordion1 .accordionContent {margin-left: 0; }
	.methodo li .accordion2 .accordionContent {margin-left: 0; }
	.methodo li .accordion3 .accordionContent {margin-left: 0;}
	.methodo li .accordion4 .accordionContent {margin-left: 0;}
	.accordionContent .grid4 .col1 {width: 100%; float: left;}
	.methodo li .accordionContent img.portrait, img.portrait {border-radius: 50%; width: 30%; border: 7px solid white; }
	.methodo li .accordionContent {float: left; width: 100%; z-index: 10; margin: 0 0 0 0 ; border-top: 1px solid #A9BDC7; border-bottom: 1px solid #A9BDC7; padding: 10%  0; margin-bottom: 10%;}
	.verbat .col2 {width: 100%;}
	
	
	ul.mozaique li.mozaic2 {width: 100%; }
	.descriptif .graph {width: 45%; margin: 0 5% 0 0; }
	.descriptif .puredata {width:50%; margin: 0;}
	.descriptif .puredata ul {width: 100%;}
	.descriptif .puredata li {width: 33%; float: left; text-align: center;}
	ul.puredata li {font-size: 14px;}
	.descriptif .col1 {width: 100%; }
	.descriptif .col2 {width: 100%;}
	.description h3, .description p { width: 98%;}
	.navproj .col1 {width: 47%;}
	.grid4 .col3 {width: 98%;}
	.grid2half h3.title {height: 130px; width: 90%;}
	
	.header ul li {list-style: none; float: left; margin: 0 5px 5px 0; }
	.header ul li a {display:  block; padding: 3px 5px;  -webkit-transition : all 0.25s linear; -o-transition: all 0.25s linear; -moz-transition: all 0.25s linear; 	transition: all 0.25s linear; cursor: pointer; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; background-color: transparent; color: white; font-size: 0.7em; text-transform: uppercase; text-decoration: none; border: 1px solid white; color: white;}
	
	
	form {width: 90%; float: left; position: relative; left: 0%; margin: 3% 5% ;  }
	label {width: 100%; margin: 0 0 2% 0; }
	input {width: 100%; padding: 2.5% 4% ; margin: 4px 0; background-color: white; border: 1px solid #d9d9d9; text-transform: uppercase;  color: #c3c3c3; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; font-size: 0.8em;}
	textarea {width: 100%; padding: 3.5% 4%; margin: 4px 0; background-color: white; border: 1px solid #d9d9d9;  height: 80px; text-transform: uppercase; color: #c3c3c3; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; font-size: 0.8em;}
	input.submit-button { display: block; height: 15px; padding: 13px 20px 27px 20px; background-color: #00d36e; color: white; text-decoration: none; width: 200px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; text-transform: uppercase; text-align: center; position: relative; left:50%; margin: 20px 0 0 -100px; font-weight: 700; border: none; -webkit-transition : all 0.2s linear; 	-o-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear; transition: all 0.2s linear; cursor: hand;}
	input.submit-button:hover {background-color: #048a4a; color: white;}
	
	#formulaire .g-recaptcha { float: left; position: relative; width: 100%; margin: 5% 0 5% 0;}
	
	
	
	
	
}