@charset "iso-8859-1";

@import url('https://fonts.googleapis.com/css?family=Open Sans:300,300i,400,400i,700,700i,900');

/* ---------------------
INITIALISATION DES STYLES
------------------------*/
* {
  border: 0;
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* --------------
ZONE EXTERIEURE
-----------------*/
body {
  /* Image de l'arrière-plan de la page */
  background: #fff url(../images/bg_body.png) no-repeat center top;
  background-size: cover;
  font-family:'Open Sans', sans-serif, Arial,Helvetica,sans-serif;
  /*font-size:22px;*/
  font-size: 14px;
  line-height:normal;
  color: #4E4E4E;
  width: 100%;
  overflow-x: hidden;
  padding-bottom: 150px;
  position: relative;
  height: 100%;
  height: 100vh;
}

/* ---------------
APPARENCE DES IMAGES
-----------------*/
img {
  border: 0;
  vertical-align: bottom;
  max-width: 100%;
}

/* --------------
TRICKS
-----------------*/
.hide  { display: none; }
.clear {
  border: 0;
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
}


@font-face {
  font-family: "jra1";
  src:url("fonts/jra1.eot");
  src:url("fonts/jra1.eot?#iefix") format("embedded-opentype"),
    url("fonts/jra1.woff") format("woff"),
    url("fonts/jra1.ttf") format("truetype"),
    url("fonts/jra1.svg#jra1") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "jra1" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: sub;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "jra1" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fuel:before {
  content: "\61";
}
.icon-calendar:before {
  content: "\62";
}
.icon-tachometer:before {
  content: "\63";
}
.icon-certificate-file:before {
  content: "\65";
}
.icon-check-square-o:before {
  content: "\66";
}
.icon-angle-down:before {
  content: "\69";
}
.icon-angle-left:before {
  content: "\6a";
}
.icon-angle-right:before {
  content: "\6b";
}
.icon-angle-up:before {
  content: "\6c";
}
.icon-envelope-o:before {
  content: "\6d";
}
.icon-floppy-o:before {
  content: "\6e";
}
.icon-shopping-cart:before {
  content: "\6f";
}
.icon-th-large:before {
  content: "\70";
}
.icon-th-list:before {
  content: "\71";
}
.icon-user:before {
  content: "\72";
}
.icon-tags:before {
  content: "\74";
}
.icon-street-view:before {
  content: "\75";
}
.icon-star:before {
  content: "\76";
}
.icon-star-o:before {
  content: "\77";
}
.icon-sort:before {
  content: "\78";
}
.icon-sort-asc:before {
  content: "\79";
}
.icon-sort-desc:before {
  content: "\7a";
}
.icon-square-o:before {
  content: "\41";
}
.icon-phone:before {
  content: "\42";
}
.icon-smile-o:before {
  content: "\43";
}
.icon-frown-o:before {
  content: "\44";
}
.icon-bullhorn:before {
  content: "\45";
}
.icon-book:before {
  content: "\46";
}
.icon-caret-down:before {
  content: "\47";
}
.icon-caret-up:before {
  content: "\48";
}
.icon-caret-left:before {
  content: "\49";
}
.icon-caret-right:before {
  content: "\4a";
}
.icon-chevron-right:before {
  content: "\64";
}
.icon-chevron-left:before {
  content: "\67";
}
.icon-file-text-o:before {
  content: "\68";
}
.icon-file-image-o:before {
  content: "\4b";
}
.icon-globe:before {
  content: "\4c";
}
.icon-line-chart:before {
  content: "\4d";
}
.icon-lock:before {
  content: "\4e";
}
.icon-meh-o:before {
  content: "\4f";
}
.icon-map-marker:before {
  content: "\50";
}
.icon-undo:before {
  content: "\51";
}
.icon-print:before {
  content: "\52";
}
.icon-search:before {
  content: "\53";
}
.icon-chain-broken:before {
  content: "\54";
}
.icon-bell-o:before {
  content: "\55";
}
.icon-bell-slash-o:before {
  content: "\56";
}
.icon-cog:before {
  content: "\57";
}
.icon-link:before {
  content: "\58";
}
.icon-user-plus:before {
  content: "\59";
}
.icon-trophy:before {
  content: "\73";
}


/*-------------------------------------------------------------------------------
        START CUSTOM STYLE
--------------------------------------------------------------------------------*/
input, button, select, textarea{
  /*border: 1px solid #9f9b8e;
  padding: 5px 10px;
  width: 100%;*/
}
.form-row{
  padding-bottom:15px;
  margin-bottom: 0;
}
input[type="radio"]/*, input[type="checkbox"]*/{
  width: auto !important;
  display: inline-block !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: normal;
  margin: 0px 0 15px;
  padding: 0;
  color: #4E4E4E;
}
h1, .h1{
  font-size: 47px;
}
h2, .h2 {
    font-size: 37px;

}
h3, .h3 {
    font-size: 24px;
}
h4, .h4 {
    font-size: 17px;
}
h5, .h5 {
    font-size: 15px;
}
h6, .h6 {
    font-size: 14px;
}

p{
  padding: 0;
  margin:0 0 15px;
}

a, a:link, a:visited{
  color:#000;
  text-decoration:none;
  /*-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;*/
}
a:hover{
  color:#01a6de;
  text-decoration:none;
  /*-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;*/
}
.no-padding{
  padding: 0;
}
.bg-gray{
  background-color: #f2f2f2;
}
.articleAction{
  display: none;
}
#comments{
  display: none;
}

#wrapper{
  /*position: absolute;
  left: 50%;

  top: 45%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);*/
  width: 100%;
  max-width: 600px;
  margin: 0vh auto;
  padding-top: 20vh
}
.form{
  max-width: 510px;
  margin: 0 auto;
}

.form{
  background: #fff;
  border:1px solid #dbdbdb;
  padding: 15px;
}
.form legend{
  text-transform: uppercase;
  color: #01a6de;
  text-align: center;
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 18px;
  position: relative;
  line-height: 130%;
  margin-bottom: 15px;
}
.form legend:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 1px;
  background: #01a6de;
}
.form legend span{
  display: inline-block;
  background: #fff;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}
.inscription .form{
  max-width: 100%
}
.inscription .form legend span{
  max-width: 330px;
}
#accountChangePassword > legend{
  margin-bottom: 0;
}
.back-site{
  display: block;
  margin: 0 auto;
  width: 150px;
  padding: 5px 10px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 15px;
}
.form .row{
  display: table;
  width: 100%;
  max-width: 330px;
  margin: 0 auto 10px;
}
.form .row > span{
  display: table-cell;
  vertical-align: middle;
  font-family:'Open Sans', sans-serif, Arial,Helvetica,sans-serif;
  color: #000;
  font-size: 12px;
}
.form .row > span.fields{
  width: 60%;
}
.form .row > span.fields input,
.form .row > span.fields textarea,
.form .row > span.fields select{
  display: block;
  padding: 10px 10px;
  border:1px solid #dbdbdb;
  font-family:'Open Sans', sans-serif, Arial,Helvetica,sans-serif;
  color: #000;
  font-size: 12px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  width: 100%;
  max-height: 39px;
}
.form .row > span.fields input.radio,
.form .row > span.fields input.checkbox{
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.form #divnewsletter .fields{
	text-align: left
}
.form #divnewsletter .fields input{
	width: auto
}
.form .row.rememberMe > span{
  color: #9a9a9a;
}
.form .row > span.fields input#rememberMe{
  float: left;
  width: auto;
  margin-right: 5px;
}
.form .row.submit> span.fields input{
  max-width: 150px;
  background: #01a6de;
  border-color: #01a6de;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.form .row.submit > span p.copy{
  font-size: 11px;
  color: #9a9a9a;
  padding: 10px 0 0;
  margin:0;
}
.passSusc{
  text-align: center;
  color: #000;
  font-size: 12px;
  padding: 5px 15px;
}
.passSusc a{
  color: #000;
  display: inline-block;
  margin:0 10px;
}
.passSusc a:before{
  vertical-align: sub;
  display: inline-block;
  font-size: 14px;
  margin-right: 5px;
}

#accountSubscription .form{
  max-width: 100%;
}
#accountSubscription .form:after{
  display: block;
  width: 100%;
  height: 0;
  clear: both;
  content: "";
}
.inscription fieldset .row,
#accountSubscription fieldset .row{
  max-width: 50%;
  float: left;
  padding: 0 15px;
}
#accountSubscription .row#divnewsletter{
  max-width: 100%
}
.inscription fieldset .row#divfield22,
.inscription fieldset .row#divfield25{
  max-width: 100%
}
.inscription fieldset .row#divfield22{
  padding: 0;
}
.inscription fieldset .row#divfield22 .fields.error label{
  color: #c00;
}
.inscription fieldset .row#divfield22 .errorForm{
  display: none;
}
.inscription fieldset .row#divfield22 .label{
  display: none;
}
.inscription fieldset .row#divfield25 .label{
  vertical-align: top;
}
.inscription fieldset .row#divfield25 .fields{
  /*display: block;
  width: 100%;*/
  width: 81%
}
.inscription fieldset .row#divfield25 .fields textarea{
  max-height: 100px;
}
.inscription fieldset .row#divfield22 .multi_checkbox{
  float: left;
  width: 50%;
  padding: 0 15px;
}
.inscription fieldset .row#divfield23,
.inscription fieldset .row#divfield24,
.inscription .form #reset{
  display: none;
}
.inscription #footer{
  position: relative;
}
/*---footer---*/
#footer{
  background-color: #d1d2d4;
  padding: 30px 0px 20px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.w-contact{
  padding: 0 3%
}
.w-contact h4{
  font-size: 14px;
  color: #000;
  margin: 0;
}
.w-contact p{
  margin: 0;
}
.w-contact img{
  float: right;
  margin-top: -106px;
}
.w-contact a:before{
  margin-right: 5px;
}
.errorForm{
  color: #c00;
  font-style: italic;
  font-size: 11px;
}
.form .row > span.fields.error input, .form .row > span.fields.error textarea, .form .row > span.fields.error select{
  border-color: #c00
}
@media screen and (max-width: 767px){
  #footer{position: relative;}
  .w-contact img{
    margin-top: -50px;
    max-width: 100px;
  }
}