/*RESET*/
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, font, 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 {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
@charset "UTF-8";
/* CSS Document */
/*MAIN*/
body { 
	font-family: 'Quicksand', sans-serif; font-size:18px; color:#009fdb; font-weight:400; line-height: 1.25em; background: none; position:relative;
}
a { 
	color: #009fdb; text-decoration: none; font-weight: normal; 
}
a:hover {
	color: #818285;
	opacity: 0.75; filter:alpha(opacity=75); 
}
img {
	width: 100%; 
} 
header {
	width: 100%; height: 128px; position: fixed; top: 0; left: 0; z-index: 100; background-image:url(/images/menu.png); background-repeat:repeat-x;
}
intro {
	background: #fff; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:60px; padding-bottom:80px; overflow:hidden;
}
#intro_texte {
	background: #fff; width: 80%; margin-left:10%; margin-right:10%; height: auto; position: relative; float:left; text-align:center; padding-top:12px; font-family: 'Raleway', sans-serif;
	font-weight:300; font-size:18px; color:#818285; line-height:130%;
}
intro img{
	width:67px; height:77px;
}
a_propos {
	background: #009fdb; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:60px; padding-bottom:80px; overflow:hidden;
}
#a_propos_texte {
	background: #009fdb; width: 86%; margin-left:7%; margin-right:7%;height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:17px; color:#fff;	line-height:130%;
}
a_propos img{
	width:200px; height:200px;
}
portfolio {
	background: #f0f0f0; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:60px; padding-bottom:80px; overflow:hidden;
}
#portfolio_intro {
	background: #f0f0f0; width: 80%; margin-left:10%; margin-right:10%; height: auto; position: relative; float:left; text-align:center; padding-top:12px; font-family: 'Raleway', sans-serif; font-weight:300; font-size:17px; color:#818285; line-height:130%; padding-bottom:20px;
}
#portfolio_texte {
	background: #f0f0f0; width: 100%; margin-left:0%; margin-right:0%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:17px; color:#009fdb; line-height:130%;
}
.realisations {
	width:20%; min-width: 220px; height:240px; padding:0%; background:none; text-align:center; position:relative; float:left; overflow:hidden;
}
.realisations a:hover{
	opacity: 0.75; filter:alpha(opacity=75);
}
.realisations img {
	width:200px; height:200px; padding-top:10px; background:none; 
}
footer {
	background: #818285; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:40px; overflow:hidden;
}
footer img{
	width:45px; height:45px; background: #818285;
}
footer a {
	color: #fff; text-decoration: none; font-weight: normal;
}
footer a:hover {
	color: #88defe; text-decoration: none; font-weight: normal;
}
#contact{
	background: #818285; width: 80%; margin-left:10%; margin-right:10%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:17px; color:#fff; line-height:120%;
	text-decoration:none;
}
#logo{
	margin-top: 20px; margin-bottom: 20px; margin-left:auto; margin-right:auto; float: center; width: 240px; height: 57px; display: block; background:none
}
#logo img{
	width: 240px; height: 57px;
}
nav {
	float: right; padding: 10px;	
}
#menu-icon {
	display: hidden; width: 40px; height: 40px; background: #009fdb url(../images/menu-icon.png) center;
}
a:hover#menu-icon {
	background-color: #009fdb; border-radius: 4px 4px 0 0;
}
ul {
	list-style: none;
}
li {
	display: inline-block; float: left; padding-left: 12px; padding-right:12px; padding-top:33px; padding-bottom:15px; background-color: #fff;
}
.current {
	color: #d16f1a;
}
section {
	margin-top:0px; width: 100%; position: relative; margin-left:auto; margin-right:auto; overflow:hidden;
}
h1,h2,h3,h4,h5,h6 {
display: inline;
}
H1{
	font-family: 'Quicksand', sans-serif;
	font-size:18px;
	color:#009fdb;
	font-weight:400;
	line-height:120%;
	margin-top:0px;
	text-align : center;
}
H1 a{
	color:#009fdb;
	font-size:18px;
	text-decoration:none;
}
H1 a:hover{
	color:#818285;
	font-size:18px;
	text-decoration:none;
}
H2{
	font-family: 'Quicksand', sans-serif;
	font-size:38px;
	line-height:120%;
	text-align: center;
	color:#fff;
	font-weight:400;
	padding-top:184px;
	text-shadow: 2px 2px 2px #868686;
}
H3{
	font-family: 'Quicksand', sans-serif;
	font-size:42px;
	text-align: center;
	line-height:110%;
	color:#fff;
	font-weight:400;
	margin-top:0px;
	text-shadow: 2px 2px 2px #0279a6;
}
H4{
	font-family: 'Quicksand', sans-serif;
	font-size:42px;
	text-align: center;
	line-height:67%;
	color:#009fdb;
	font-weight:400;
	margin-top:0px;
	text-shadow: 2px 2px 2px #afafaf;
}
H5{
	font-family: 'Quicksand', sans-serif;
	font-size:42px;
	text-align: center;
	line-height:110%;
	color:#fff;
	font-weight:400;
	margin-top:0px;
	text-shadow: 2px 2px 2px #5e5e5e;
}
H5 a:hover{
	text-decoration:none;
}
H6{
	font-family: 'Quicksand', sans-serif;
	font-size:18px;
	text-align: center;
	line-height:120%;
	color: #666;
	font-weight:400;
}
H6 a{
	color: #46166b;
}
p {
	line-height: 1.45em; margin-bottom: 20px; color: #fff; background:none;
}
@-webkit-viewport{
    width: device-width;
}
@-moz-viewport{
    width: device-width;
}
@-ms-viewport{
    width: device-width;
}
@-o-viewport{
    width: device-width;
}
@viewport{
    width: device-width;
}
.rslides {
  position: relative; list-style: none; overflow: hidden; width: 100%; margin: 0; padding: 0; background:none;
  }
.rslides li {
  -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; padding: 0; padding-top:90px; margin: 0;
  }
.rslides li:first-child {
  position: relative; display: block; float: left;
  }
.rslides img {
  display: block; height: auto; float: left; width: 100%; border: 0;
  }
/*MEDIA QUERY*/
@media only screen and (max-width : 660px) {
#menu-icon {
	display:inline-block; margin-top:10px;
}
nav ul, nav:active ul { 
	display: none; position: absolute; padding: 0px; background: #fff; border: 1px solid #009fdb; right: 0px; top: 90px; width: 100%; border-radius: 4px 0 4px 4px;
}
nav li {
	text-align: center; width: 100%; padding: 10px 0; margin: 0;
}
nav:hover ul {
	display: block;
}
body { 
	font-size: 1em; line-height: 1.25em; font-family: Tahoma, Geneva, sans-serif; background: none; position:relative; z-index:1;
}
.rslides li {
  -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; padding: 0; padding-top:90px; margin: 0;
  }
}
@media screen and (min-width: 0px) and (max-width: 470px) {
#logo{
	margin-top: 20px; margin-bottom: 20px; margin-left:auto; margin-right:auto; float: center; width: 225px; height: 51px; display: block; background:none
}
#logo img{
	width: 215px; height: 51px;
}
nav ul, nav:active ul { 
	display: none; position: absolute; padding: 0px; background: #fff; border: 1px solid #009fdb; right: 0px; top: 90px; width: 100%; border-radius: 4px 0 4px 4px;
}
nav li {
	text-align: center; width: 100%; padding: 10px 0; margin: 0;
}
nav:hover ul {
	display: block;
}
}
@media screen and (min-width: 1300px) {
#intro_texte {
	background: #fff; width: 70%; margin-left:15%; margin-right:15%; height: auto; position: relative; float:left; text-align:center; padding-top:12px; font-family: 'Raleway', sans-serif;
	font-weight:300; font-size:18px; color:#818285; line-height:130%;
}
#a_propos_texte {
	background: #009fdb; width: 76%; margin-left:12%; margin-right:12%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:18px; color:#fff;	line-height:130%;
}
#portfolio_texte {
	background: #f0f0f0; width: 86%; margin-left:7%; margin-right:7%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:18px; color:#009fdb; line-height:130%;
}
}
@media screen and (min-width: 880px) and (max-width: 1100px) {
#portfolio_texte {
	background: #f0f0f0; width: 100%; margin-left:0%; margin-right:0%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:18px; color:#009fdb; line-height:130%;
}
.realisations {
	width:20%; min-width: 172px; height:182px; margin-left:auto; margin-right:auto; padding:0%; background:none; text-align:center; position:relative; float:left; overflow:hidden;
}
.realisations a:hover{
	opacity: 0.75; filter:alpha(opacity=75); 
}
.realisations img {
	width:165px; height:165px; padding-top:4px; background:none
}
portfolio {
	background: #f0f0f0; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:60px; padding-bottom:80px; overflow:hidden;
}
}
@media screen and (min-width: 660px) and (max-width: 879px) {
#portfolio_texte {
	background: #f0f0f0; width: 100%; margin-left:0%; margin-right:0%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:18px; color:#009fdb; line-height:130%;
}
.realisations {
	width:25%; min-width: 160px; height:170px; margin-left:auto; margin-right:auto; padding:0%; background:none; text-align: center; position:relative; float:left; overflow:hidden;
}
.realisations a:hover{
	opacity: 0.75; filter:alpha(opacity=75);
}
.realisations img {
	width:155px; height:155px; padding-top:4px; background:none; 
}
portfolio {
	background: #f0f0f0; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:60px; padding-bottom:80px; overflow:hidden;
}
}
@media screen and (min-width: 440px) and (max-width: 659px) {
#portfolio_texte {
	background: #f0f0f0; width: 100%; margin-left:0%; margin-right:0%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:16px; color:#009fdb; line-height:130%;
}
.realisations {
	width:33%; min-width: 143px; height:153px; margin-left:auto; margin-right:auto; padding:0%; background:none; text-align:center; position:relative; float:left; overflow:hidden;
}
.realisations a:hover{
	opacity: 0.75; filter:alpha(opacity=75);
}
.realisations img {
	width:138px; height:138px; padding-top:3px; background:none
}
portfolio {
	background: #f0f0f0; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:60px; padding-bottom:80px; overflow:hidden;
}
}
@media screen and (max-width: 439px) {
#portfolio_texte {
	background: #f0f0f0; width: 100%; margin-left:0%; margin-right:0%; height: auto; position: relative; float:left; text-align:center; font-family: 'Raleway', sans-serif; font-weight:300; font-size:18px; color:#009fdb; line-height:130%;
}
.realisations {
	width:33%; min-width: 100px; height:110px; margin-left:auto; margin-right:auto; padding:0%; background:none; text-align:center; position:relative; float:left; overflow:hidden;
}
.realisations a:hover{
	opacity: 0.75; filter:alpha(opacity=75); 
}
.realisations img {
	width:90px; height:90px; padding-top:4px; background:none
}
intro { 
	background: #fff; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:30px; padding-bottom:40px; overflow:hidden;
}
a_propos {
	background: #009fdb; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:30px; padding-bottom:40px; overflow:hidden;
}
portfolio {
	background: #f0f0f0; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:30px; padding-bottom:40px; overflow:hidden;
}
footer {
	background: #818285; width: 100%; height: auto; position: relative; float:left; text-align:center; padding-top:20px; overflow:hidden;
}
H1{
	font-family: 'Quicksand', sans-serif;
	font-size:18px;
	color:#009fdb;
	font-weight:400;
	line-height:120%;
	margin-top:0px;
	text-align : center;
}
H1 a{
	color:#009fdb;
	font-size:18px;
	text-decoration:none;
}
H1 a:hover{
	color:#818285;
	font-size:18px;
	text-decoration:none;
}
H6{
	font-family: 'Quicksand', sans-serif;
	font-size:18px;
	text-align: center;
	line-height:120%;
	color: #666;
	font-weight:400;
}
H6 a{
	color: #46166b;
}
}