@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,700,400italic);


body, html{
 font-family:Roboto,tahoma,arial,helvetica,sans-serif; 
  font-weight:400;
  margin:0;
  padding:0;
}

h1, h2, h3, h4, h5, h6, header{
 font-family:Roboto;
  font-weight:500;
}
hr{
 margin:50px 0; 
  border:none;
  border-top:1px solid #ccc;
}

header{
  max-width:900px;
  margin:0 auto;
  padding-top:10px;
  z-index:10;
  position:absolute;
  left:0;
  right:0;
}
header a, header nav, header ul, header li{
 display:inline-block;
  padding:5px;
  margin:0;
  vertical-align:bottom;
}
header a img{width:119px}
header #responsive-menu, header #responsive-bg{display:inline;}
header nav{
 padding:0;
  margin:0;
  margin-top:20px;
  list-style:none;
  float:right;
  width:80%;
  text-align:right;
}
header ul{
 width:100%;
  padding:5px 0;
}
header li{
 border-left:1px solid rgba(0,0,0,0.2); 
  padding:0;
  margin:0;
  padding:0 1%;
  font-size:18px;
}
header li:first-child{
 border:none;
}
header li a{
  padding:3px 10px;
  text-decoration:none;
  font-weight:300;
  color:#666666;
  color:rgba(0,0,0,0.7);
  transition:color 0.25s;
}
header li a:hover{
  color:#000000;
  color:rgba(0,0,0,1);
  text-shadow:0 0 1px rgba(0,0,0,0.5);
}

footer{
  max-width:1024px;
  width:100%;
  margin:20px auto;
  padding-top:20px;
  padding-bottom:30px;
  text-align:center;
  font-size:12px;
  color:#999;
  border-top:1px solid #ddd;
}
footer ul, footer nav{
 padding:0;
  margin:0;
  list-style:none;
}
footer nav, footer nav ul{display:inline;}
footer li{display:inline-block;margin:0 5px;}
footer li a{color:#999;}


#message-home{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:10%;
  background:#cb8d50 transparent;
  background-size:cover;
  z-index:0;
  text-align:center;
  font-size:60px;
  color:#FFF;
  text-shadow:0 0 15px #000;
}
#message-home span{
  position:absolute;
  text-align:center;
  left:0;
  right:0;
  top:40%;
}
#page{
 position:absolute;
  margin:0;
  padding:0;
  left:5%;
  right:5%;
  top:100px;
}
.body-contactme #page{
  left:0%;
  right:0%;
  bottom:0;
  overflow:hidden;
}
#body-home #page{ top:90%;}

#page #content{
 width:100%;
  max-width:1000px;
  margin:10px auto;
}
#page #content a{
 color:#333;
  text-decoration:none;
  transition: all 0.2s;
}
#page #content a:hover{color:#000;}
#page #content a.button{
  padding:5px 20px;
  background:#00518c;
  color:#fff;
  font-size:13px;
  font-weight:300;
  letter-spacing:1px;
  border-radius:3px;
  box-shadow:1px 1px 2px rgba(0,0,0,.3);
}
#page #content a.button:hover{
  background:#1171ac;
  box-shadow:1px 1px 2px rgba(0,0,0,.5);
}

#page #content .post-content img{max-width:100%;}
#page #content .post-content img.media{max-width:98%;margin:0 1%;}
#page #content .post-content a img.media{box-shadow:0 0 4px #999;border:1px solid #fff;transition:box-shadow 0.2s;}
#page #content .post-content a:hover img.media{box-shadow:0 0 6px #555;}
#page #content .post-content iframe{
  max-width:100%;
  width:100%;
  height:550px;
  display:block;
}
#page #content .post-content h3, #page #content .post-content h4, #page #content .post-content h5{
  color:#00518c;
  font-size:25px;
  font-weight:normal;
  margin-bottom:1px;
}
#page #content .post-content h4{font-size:22px;}
#page #content .post-content h5{font-size:18px;}

#page .post-content .column{
 display:inline-block;
  width:100%;
  padding:0;
  margin:0;
  vertical-align:top;
}
#page .post-content .column.two{width:48%;}
#page .post-content .column.three{width:31%;}
#page .post-content .column.first{margin-right:3.5%;}
#page #content .post-content .column iframe{
  height:270px;
}



#page h2{
 font-size:35px;
  font-weight:400;
  color:#00518c;
  margin:30px -1% 35px -1%;
  padding:.5% 1%;
  border-bottom:1px solid #eee;
}
#body-home #page h2{
  border:none;
  padding-bottom:0;
  margin-bottom:0;
  margin-top:50px;
}
#page h2 a.button{float:right;margin-top:9px;}


#page ul#liste-solutions, #page ul#liste-references{
 padding:0;
  text-align:center;
  list-style:none;
  clear:both;
}
#page ul#liste-solutions li, #page ul#liste-references li{
display:inline-block;
  width:30%;
  margin:1%;
  vertical-align:top;
}
#page ul#liste-references li{width:14%;}
#page ul#liste-solutions li span{
  width:100%;
  height:220px;
  display:block;
  overflow:hidden;
  border:3px solid #ccc;
  margin-bottom:5px;
  transition:border-color 0.2s;
}
#page ul#liste-solutions li img{min-width:100%;min-height:220px;}
#page ul#liste-references li img{width:100%;border:3px solid #eee;}
#page ul#liste-solutions li a{color:#aaa;}
#page ul#liste-solutions li a:hover{color:#666;}
#page ul#liste-solutions li a:hover span{border-color:#999;}

#page ul.references{
 list-style:none;
  padding:0;
  text-align:center;
}
#page ul.references li{
 display:inline-block;
  border:3px solid #eed;
  margin:10px;
}



.body-contactme #page iframe{
  width:100%;
  height:100%;
}

.body-contactme #page #content{
  position:absolute;
  z-index:20;
  top:0px;
  bottom:0px;
  left:10px;
  width:360px;
  padding:5px 10px;
  background:#fff;
  border-radius:2px;
  box-shadow:0 0 3px rgba(0,0,0,.25);
  overflow:auto;
}
.body-contactme #page h2{
  margin:0; 
  margin-top:15px;
  font-size:28px;
  padding-bottom:5px;
  padding-left:5px;
  margin-bottom:10px;
  border-bottom:1px solid #ddd;
}
.body-contactme #page h2:first-child{ margin-top:0;}
.body-contactme #page p, .body-contactme #page address{
  padding:0px 10px 10px 10px;
  margin:0;
  font-size:15px;
  font-weight:300;
}
.body-contactme #page span.label{
  color:#666;
  width:80px;
  display:inline-block;
  text-align:right;
}
.body-contactme #page span.champ, .body-contactme #page address{
  font-weight:400;
  font-size:20px;
}
.body-contactme #page address{
padding-left:94px;
}
.body-contactme #page form fieldset{
 border:none;
  padding:0;
  margin:0;
}
.body-contactme #page form fieldset p{
 width:80%;
  margin:0 auto;
}
.body-contactme #page form fieldset label{ display:block;font-size:14px;}

.body-contactme #page form fieldset input[type=text]{
  border:0;
  border-bottom:1px solid #4499bb;
  padding:2px 10px;
  width:90%;
  font-size:16px;
  transition:border-color 0.3s;
}
.body-contactme #page form fieldset input[type=text]:hover, .body-contactme #page form fieldset input[type=text]:focus{
  border-bottom:3px solid #00518c;
  padding-bottom:0;
}
.body-contactme #page form fieldset textarea{
  border:0;
  border-bottom:1px solid #4499bb;
  padding:2px 10px;
  width:90%;
  max-width:90%;
  min-width:90%;
  font-size:16px;
  transition:border-color 0.3s;
}
.body-contactme #page form fieldset input[type=submit]{
  background:#00518c;
  border:none;
  margin:0 auto;
  display:block;
  color:#fff;
  text-transform:uppercase;
  padding:5px 55px;
  cursor:pointer;
  border-radius:2px;
  font-family:roboto;
  font-weight:300;
  font-size:14px;
  letter-spacing:1px;
  box-shadow:1px 1px 3px #666;
  transition:all 0.2s;
}
.body-contactme #page form fieldset input[type=submit]:hover{
  background:#2277bb;
  box-shadow:1px 1px 3px #333;
}

@media screen and (max-width: 1050px) { #message-home span{ top:35%; } }
@media screen and (max-width: 1000px) { #message-home{ font-size:50px; } }
@media screen and (max-width: 850px)  { #message-home span{ top:30%; } }


@media screen and (max-width: 700px) {
  header a{margin:0px 15px;}
  header #responsive-bg.activated{
   position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:20%;
  }
  header nav{
    position:absolute;
    right:0;
    top:0;
    padding:0;
    margin:0;
    width:90px;
    height:90px;
    background:url(img/menu-responsive.png) no-repeat 2px 27px;
    background-size:56px;
  }
  header nav ul{
   position:fixed;
    background:rgba(255,255,255,.9);
    box-shadow:0 0 10px rgba(0,0,0,.5);
    right:0;
    top:0;
    padding:0;
    padding-top:10px;
    margin:0;
    bottom:0;
    width:80%;
    margin-right:-82%;
    transition:margin 0.3s;
  }
   header nav:hover ul,  header nav:focus ul,  header #responsive-menu.activated nav ul{ margin-right:0%; }
  header nav ul li{padding:8px 0;margin:0;display:block;}
   header nav ul li a{
     text-shadow:0 0 3px #fff;
   font-size:38px;
     display:block;
   }
  #message-home{ font-size:30px; }
  #message-home span{ top:40%; }
  #page h2 a.button{float:none;display:block;text-align:center;margin-bottom:9px;}
  #page ul#liste-solutions li, #page ul#liste-references li{width:97%;margin-bottom:15px; }
  #page ul#liste-references li{width:44%;margin-bottom:15px;margin-right:2%;margin-left:2%; }
  #page ul.references li{width:41%;margin:2%;}
  #page ul.references li img{width:100%;}
  .body-contactme #page { overflow: visible; }
  body.body-contactme iframe{display:none;}
  .body-contactme #page #content {
    position: relative;
    z-index: 0;
    margin:0px 0 0 2%;
    height:auto;
    width: 93%;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom:40px;
}
  .body-contactme #page #content h2{ font-size:38px; margin-top:35px;line-height:35px; }
  .body-contactme #page #content address, .body-contactme #page #content p{
  font-size:28px;
    padding:0 10px;
    margin-top:15px;
  }
  .body-contactme #page #content p {margin:15px 0;font-size:22px;}
  .body-contactme #page #content p .label{ display:none; }
  .body-contactme #page #content p .champ{ font-size:28px; }
  .body-contactme #page #content form fieldset p{
  width:98%;
    padding:0;
    padding-left:2%;
    margin:15px 0;
  }
  .body-contactme #page #content form fieldset p label{font-size:20px;}
  .body-contactme #page #content form fieldset p input{font-size:26px;margin:0px 0 15px 0;padding:10px 10px 5px;}
  .body-contactme #page #content form fieldset p input:hover, .body-contactme #page #content form fieldset p input:focus{margin-bottom:13px;}
  .body-contactme #page #content form fieldset p input[type=submit]{width:96%;margin-top:40px;}
  
  
}