@font-face {
      font-family: 'HankenLight';
      src: url('/fontes/Hanken-Light.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      background: url("/images/fond-kayak.png") no-repeat center fixed;
      -webkit-background-size: cover;
      background-size: cover;
      background-color: #fff;
  }
  .mention-images {
    width: 100%; 
    text-align: center;
    padding-top: 5px;
    font-size: 10px;
  }
  .container-youtube {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
  }

  .video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  #imentete {
      float: right;
      margin-left: 20px;
  }

  .edito {
      display: flex;
      flex-direction: row;
  }

  .edito > h1 {
      width: 100%;
  }

  .imleft {
      display: inline-block;
      margin: 0;
      float: left;
  }

  .orange {
      color: #f0534e;
  }

  .flex {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
  }

  .identite {
      width: 100%;
  }

  .identite img {
      margin-right: 10px;
  }
  /* menu */

  .topnav {
      display: none;
  }

  .topnav-mobile {
      display: block;
      overflow: hidden;
      background-color: #000;
      position: fixed;
      margin-bottom: 5px;
      width: 100%;
      z-index: 200;
  }

  .topnav-mobile #myLinks {
      display: none;
  }

  .topnav-mobile a {
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      display: block;
  }

  .topnav-mobile a.icon {
      background: black;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
  }

  .topnav-mobile a:hover {
      color: black;
  }

  .active {
      background-color: #4CAF50;
      color: white;
  }

  .link {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      height: 100%;
      width: 100%;
      text-decoration: none;
  }

  .nav {
      position: absolute;
      margin: 0;
      padding: 0;
      list-style: none;
      z-index: 10;
  }

  #myLinks a {
      display: block;
      text-align: center;
      text-decoration: none;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
     line-height: 28px;
     width: 100%;
     height: 28px;
     font-size: 12px;
      color: #013e5c;
      padding-top: 1px;
      margin-bottom: 2px;
      text-transform: uppercase;
  }

  .menu .nav {
      display: flex;
      justify-content: center;
      flex-direction: column;
  }

  .niv0 {
      background-color: #013e5c;
      color: #fff;
  }

  .niv1 {
      background-color: #013e5c;
      color: #fff !important;
  }

  .sel0,
  .niv2 {
      background-color: #fff;
      color: #013e5c;
  }

  .sel1,
  .niv1:hover,
  .niv2:hover {
      background-color: #f0534e;
      /*orange*/
      color: #fff !important;
  }
  /*slider*/

  .ls-fullscreen-wrapper,
  #slider {
      z-index: 1;
      /**/
      position: relative;
  }

  #slider-mobile {
      display: block;
  }

  #slider {
      display: block;
  }
  /* container */

  #container {
      width: 100%;
      padding: 5px 10px;
      z-index: 2;
  }
  /* colonne gauche */

  #logo {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
  }

  #logo-mobile {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
  }

  .contact {
      display: none;
  }

  #colonne-gauche {
      display: block;
      position: relative;
      float: left;
      z-index: 5;
      width: 100%;
      margin-top: 50px;
  }

  #colonne-droite {
      display: block;
      position: relative;
      float: left;
  }

  #intro {
      background-color: #fff;
      font-family: Verdana;
      color: #013e5c;
      font-size: 14px;
      height: auto;
      padding: 10px;
  }
  /* colonne droite */

  #colonne-droite {
      z-index: 3;
      margin-right: 0px;
      width: 100%;
      border-right: 0px;
  }

  .bloc-rouge {
      color: #fff;
      background-color: #f0534e;
      font-family: Verdana;
      font-size: 11px;
  }

  .bloc-rouge-interne {
      color: #fff;
      background-color: #f0534e;
      font-family: Verdana;
      font-size: 11px;
      margin: 0 0px 5px 0;
      padding: 10px 20px;
      position: relative;
      float: left;
      width: 100%;
  }

  .bloc-rouge-interne h1 {
      color: #fff !important;
      font-size: 40px;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
  }

  .header2 {
      display: none;
  }

  .bloc-nav {
      position: relative;
      float: left;
      width: 100%;
      background-color: #fff;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 16px;
      line-height: 24px;
      color: #013e5c;
      padding: 5px 20px;
      margin-top: 10px;
      height: 48px;
  }

  .bloc-nav-1 {
      float: left;
  }

  .bloc-nav-2 {
      float: right;
  }

  .bloc-nav-1 a,
  .bloc-nav-2 a {
      text-decoration: none;
      color: #f0534e;
      text-transform: uppercase;
  }

  .bloc-produit {
      position: relative;
      float: left;
      width: 100%;
      background-color: #fff;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 14px;
      line-height: 16px;
      color: #013e5c;
      padding: 20px 20px;
      clear: both;
  }

  .bloc-blanc-produit {
      width: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: #fff;
  }

  .bloc-rouge-produit {
      position: relative;
      float: left;
      width: 100%;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 13px;
      line-height: 13px;
      padding: 20px 20px;
      background-color: #f0534e;
      text-align: left;
  }

  .bloc-rouge-produit p {
      color: #fff;
  }

  .bloc-rouge-produit a {
      color: #fff;
  }

  .bloc-slider {
      background-color: #fff !important;
      max-width: 500px !important;
      min-height: 350px;
      margin: 0 auto;
      padding: 0;
  }

  .ls-thumbnail-slide-container {
      background-color: #e6e6e6 !important;
  }

  #bloc-intro {}

  #bloc-prix {
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      min-width: 140px;
      margin-left:10px;
  }

  #bloc-prix-1 {
      width: 100%;
      border: 1px solid #f0534e;
      color: #f0534e;
      font-size: 30px;
      text-align: center;
      padding-top: 10px;
      line-height: 40px;
      margin-bottom: 2px;
  }

  #bloc-prix-2 {
      width: 100%;
      border: 1px solid #f0534e;
      background-color: #f0534e;
      text-align: left;
      padding: 0px 20px;
      font-size: 16px;
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      line-height: 24px;
      padding-top: 4px;
  }

  .bloc-produit-plus {
      padding: 0px 20px;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
  }

  .bloc-plus-1 {
      padding-top: 45px;
      background-image: url(/images/atouts.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center left;
      width: 160px;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 25px;
      color: #013e5c;
  }

  .bloc-plus {
      width: 100%;
  }
.NewsSummarySummary img {max-width: 100%;height: auto; max-height: 300px;}
#NewsPostDetailContent img {max-width: 100%;height: auto; max-height: 300px;margin: 0 3px 3px 0;float: left;}
  .bloc-devis {
      position: relative;
      padding: 10px;
      background-color: #ffffff;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 20px;
      text-align: right;
      height: 40px;
  }

  .bloc-devis a {
      position: relative;
      color: #fff;
      text-decoration: none;
      display: inline-block;
      background-color: #013e5c;
      padding: 0 20px;
  }

  #btn-devis {
      position: relative;
      float: right;
      font-size: 20px;
      color: #fff;
      text-decoration: none;
      display: inline-block;
      background-color: #013e5c;
      padding: 10px 20px;
  }

  .btn-bleu {
      position: relative;
      font-size: 20px;
      color: #fff;
      text-decoration: none;
      display: inline-block;
      background-color: #013e5c;
      padding: 10px 20px;
      margin-right:20px !important;
      margin-bottom: 15px !important;
  }

  #btn-perso{
      position: relative;
      float: right;
      font-size: 20px;
      color: #fff;
      text-decoration: none;
      display: inline-block;
      background-color: #f0534e;
      padding: 10px 20px;
  }

  p {
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 13px;
      line-height: 18px;
      color: #013e5c;
  }

  h1 {
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 32px;
      line-height: 32px;
      margin-bottom: 10px;
      color: #f0534e !important;
      text-transform: uppercase;
  }

  .News h1 {
      text-transform: none;
  }

  h2 {
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      text-transform: uppercase;
  }

  h3 {
      margin-top: 20px;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 20px;
      line-height: 30px;
      color: #f0534e;
  }

  .subtitle {
      color: #b6bfcd;
      font-family: 'Verdana';
      font-weight: normal;
      font-style: normal;
      font-size: 20px;
      line-height: 20px;
      width: 100%;
      padding-left: 100px;
  }

  .linkorange {
      text-decoration: none;
      color: #f0534e;
  }

  .actu {
      width: 100%;
      margin: 0px;
  }

  .header1 {
      text-align: right;
      margin-bottom: 0px;
      margin-top: 20px;
  }

  #logo-bottom {
      display: none;
      width: 100%;
  }

  #image-edito {
      float: left;
      width: 180px;
      height: 198px;
      margin: 0 auto;
  }

  #imentete {
      display: none;
  }

  #etoile-edito {
      margin-top: 20px;
      position: relative;
      float: left;
      width: 38px;
      height: 66px;
  }

  #bottom-droite {
      position: relative;
      margin-right: 0px;
      width: 100%;
      display: flex;
      margin-top: 10px !important;
      overflow: hidden;
      padding-top: 4px;
  }

  #bottom-droite2 {
      margin-right: 0px;
      width: 100%;
      background-color: #fff;
      color: #013e5c;
      text-align: center;
      margin-bottom: 2px;
  }

  #bottom-droite2 a {
      color: #013e5c;
      text-decoration: none;
      font-size: 13px;
      font-family: Verdana;
  }

  .News {
      min-height: 400px;
      font-size: 16px;
      line-height: 22px;
  }

  .News a {
      text-decoration: none;
      color: #f0534e;
  }

  .NewsSummary {
      min-height: 100px;
  }

  .NewsSummary a {
      min-height: 100px;
  }

  .formbuddy {
      width: 100% padding: 20px;
  }

  fieldset {
      border: 0;
  }

  label {
      width: 200px !important;
      display: inline-block;
  }

  label[for="fbrp__29"] {
      width: 80% !important;
      display: inline-block;
  }

  #message {
      width: 300px;
      height: 150px;
  }

  input,
  textarea {
      border: 1px solid #013e5c;
      margin-bottom: 5px;
  }

  .error_message {
      font-weight: bold;
      color: #f0534e;
  }

  #cntnt01fbrp_submit {
      position: relative;
      float: right;
      font-size: 20px;
      color: #fff;
      text-decoration: none;
      display: inline-block;
      background-color: #013e5c;
      padding: 10px 20px;
      border: 0;
  }

  @media (min-width: 600px) {
      .identite {
          width: 100%;
      }
  }

  @media (min-width: 990px) {
      .bloc-blanc-produit {
      flex-direction: row;
      justify-content: space-between;
        }
      .bloc-produit-plus {
          display: flex;
          flex-direction: row;
          width: 100%;
      }
      .bloc-plus-1 {
          padding-top: 45px;
          background-image: url(/images/atouts.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          width: 30%;
      }
      .bloc-plus {
          width: 20%;
      }
      .header2 {
          display: block;
      }
      .contact {
          display: block;
          position: fixed;
          right: 0;
          top: 88px;
          z-index: 120;
          width: 50px;
      }
      #contact {
          width: 100%;
      }
      #container {
          width: 100%;
          padding: 5px 0px;
      }
      #slider-mobile {
          display: none;
      }
      #slider {
          display: block;
      }
      .ls-fullscreen-wrapper {
          z-index: 1;
          /**/
          position: absolute;
          top: 0;
      }
      .header1 {
          display: inline-block;
          text-align: right;
          width: 100px;
          float: right;
          margin-bottom: 20px;
          margin-top: 0px;
      }
      .header2 {
          display: inline-block;
          text-align: center;
          height: 29px;
          padding-top: 0px;
          line-height: 29px;
          width: 310px;
          float: right;
      }
      .header2 a {
          color: #fff;
          text-decoration: none;
      }
      #logo-bottom {
          display: block;
      }
      /* menu */
      .topnav {
          display: block;
      }
      .topnav-mobile {
          display: none;
          overflow: hidden;
          background-color: #333;
          position: relative;
      }
      /* menu */
      .nav {
          top: 100px;
          left: 0px;
      }
      nav a {
          line-height: 24px;
          width: 255px;
          height: 24px;
          font-size: 16px;
          color: #013e5c;
          margin-bottom: 3px;
          color: #013e5c;
          display: block;
          text-align: center;
          text-decoration: none;
          font-family: 'Verdana';
          font-weight: normal;
          font-style: normal;
          color: #013e5c;
          text-transform: uppercase;
          padding-top: 2px;
      }
      .niv0 {
          background-color: #013e5c;
          color: #fff;
      }
      .niv1 {
          background-color: #013e5c;
          color: #fff;
      }
      .sel0,
      .niv2 {
          background-color: #fff;
          color: #013e5c;
      }
      .sel1,
      .niv1:hover,
      .niv2:hover {
          background-color: #f0534e;
          /*orange*/
          color: #fff !important;
      }
      /* container */
      #container {
          position: relative;
          width: 100%;
          max-width: 1200px;
          margin: 0 auto;
      }
      /* colonne gauche */
      #colonne-gauche {
          display: block;
          position: fixed;
          z-index: 2;
          min-width: 400px;
          margin-left: 100px;
          margin-top: 20px;
          margin-top: 50px;
      }
      #colonne-droite {
          display: block;
          float: right;
          z-index: 4;
          border-right: 2px solid #fff;
      }
      #logo {
          display: block;
      }
      #imlogo {
          width: 302px;
          height: 90px;
      }
      #imentete {
          display: block;
          float: right;
          width: 220px;
          height: 30px;
      }
      #logo-mobile {
          display: none;
      }
      #intro {
          position: absolute;
          top: 240px;
          width: 370px;
          z-index: 3;
          margin-right: 60px;
          padding-left: 30px;
      }
      #etoile-edito {
          position: relative;
          float: left;
          width: 38px;
          height: 66px;
      }
      #image-edito {
          float: right;
          right: 0;
          top: 0;
          width: 180px;
          height: 198px;
      }
      /* colonne droite */
      #surcolonne-droite {
          z-index: 3;
          float: right;
          margin: 0px;
          padding: 0px;
          width: calc(100% - 500px);
          min-width: 600px;
      }
      #colonne-droite {
          z-index: 3;
          margin-right: 60px;
          width: calc(100% - 60px);
      }
      #colonne-droite-gauche {
          width: 100%;
          float: right;
          margin-right: 2px;
      }
      .bloc-bleu h3 {
          font-size: 13px;
          line-height: 22px;
          flex-grow: 1;
      }
      #bottom-droite {
          position: relative;
          margin-right: 0px;
          float: right;
          width: calc(100% - 500px);
          display: flex;
          margin-top: 100px;
          flex-wrap: wrap;
      }
      #bottom-droite2 {
          margin-right: 0px;
          display: inline-block;
          float: left;
          width: calc(100% - 65px);
          background-color: #fff;
          color: #013e5c;
          text-align: center;
          align-self: flex-end;
          margin-bottom: 2px;
      }
      #bottom-droite2 a {
          color: #013e5c;
          text-decoration: none;
          font-size: 13px;
          font-family: Verdana;
          height: 28px;
          line-height: 28px;
      }
      #bottom-droite3 {
          margin-left: 2px;
          width: 62px;
          float: left;
          text-align: right;
          overflow: hidden;
      }
      .bloc-video-mobile,
      .bloc-actu-mobile {
          display: none;
      }
      #imlogo {
          width: 302px;
          height: 90px;
      }
  }

  @media (min-width: 1400px) {
      .identite {
          width: 50%;
      }
      /* container */
      #container {
          position: relative;
          width: 100%;
          max-width: 1920px;
          /*max-width: 1800px;*/
          margin: 0 auto;
      }
      #intro {
          position: absolute;
          top: 360px;
          width: 560px;
          z-index: 3;
          margin-right: 60px;
          padding-left: 40px;
      }
      #logo {
          display: block;
      }
      #image-edito {
          width: 270px;
          height: 297px;
      }
      #imentete {
          float: right;
          width: 335px;
          height: 46px;
      }
      /* colonne droite */
      #surcolonne-droite {
          width: calc(100% - 500px);
      }
      #colonne-droite {
          z-index: 3;
          margin-right: 125px;
          width: calc(100% - 125px);
          display: flex;
      }
      .bloc-rouge {
          font-size: 14px;
      }
      .bloc-rouge h2,
      .bloc-bleu h2 {
          font-size: 26px;
          margin-bottom: 10px;
      }
      .bloc-bleu h3 {
          font-size: 20px;
      }
      .bloc-blanc {
          font-size: 14px;
          margin: 0 5px 0px 0;
          padding: 40px 20px;
          flex-grow: 1;
      }
      #bottom-droite {
          position: relative;
          display: flex;
          width: calc(100% - 500px);
      }
      #bottom-droite2 {
          margin-right: 0px;
          display: inline-block;
          float: left;
          background-color: #fff;
          color: #013e5c;
          text-align: center;
          align-self: flex-end;
          margin-bottom: 2px;
          width: calc(100% - 135px);
      }
      #bottom-droite2 a {
          color: #013e5c;
          text-decoration: none;
          font-size: 13px;
          font-family: Verdana;
          height: 28px;
          line-height: 28px;
      }
      #bottom-droite3 {
          margin-left: 2px;
          width: 125px;
          float: left;
      }
  }