f8lrebel · July 1, 2012 05:27
diff --git a/index.html b/index.html


 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">

  <title>ClearNav, a responsive navigation boilerplate &middot; CodePen</title>

  <style>
 @font-face {
  font-family: "FontAwesome";
  src: url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.eot');
  src: url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.eot?#iefix') format('eot'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.woff') format('woff'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.ttf') format('truetype'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
 }

 [class^="icon-"]:before,
 [class*=" icon-"]:before {
  font-family: FontAwesome;
 }

 .icon-glass:before {
  content: "\f000";
 }

 .icon-music:before {
  content: "\f001";
 }

 .icon-search:before {
  content: "\f002";
 }

 .icon-envelope:before {
  content: "\f003";
 }

 .icon-heart:before {
  content: "\f004";
 }

 .icon-star:before {
  content: "\f005";
 }

 .icon-star-empty:before {
  content: "\f006";
 }

 .icon-user:before {
  content: "\f007";
 }

 .icon-film:before {
  content: "\f008";
 }

 .icon-th-large:before {
  content: "\f009";
 }

 .icon-th:before {
  content: "\f00a";
 }

 .icon-th-list:before {
  content: "\f00b";
 }

 .icon-ok:before {
  content: "\f00c";
 }

 .icon-remove:before {
  content: "\f00d";
 }

 .icon-zoom-in:before {
  content: "\f00e";
 }

 .icon-zoom-out:before {
  content: "\f010";
 }

 .icon-off:before {
  content: "\f011";
 }

 .icon-signal:before {
  content: "\f012";
 }

 .icon-cog:before {
  content: "\f013";
 }

 .icon-trash:before {
  content: "\f014";
 }

 .icon-home:before {
  content: "\f015";
 }

 .icon-file:before {
  content: "\f016";
 }

 .icon-time:before {
  content: "\f017";
 }

 .icon-road:before {
  content: "\f018";
 }

 .icon-download-alt:before {
  content: "\f019";
 }

 .icon-download:before {
  content: "\f01a";
 }

 .icon-upload:before {
  content: "\f01b";
 }

 .icon-inbox:before {
  content: "\f01c";
 }

 .icon-play-circle:before {
  content: "\f01d";
 }

 .icon-repeat:before {
  content: "\f01e";
 }

 /* \f020 doesn't work in Safari. all shifted one down */
 .icon-refresh:before {
  content: "\f021";
 }

 .icon-list-alt:before {
  content: "\f022";
 }

 .icon-lock:before {
  content: "\f023";
 }

 .icon-flag:before {
  content: "\f024";
 }

 .icon-headphones:before {
  content: "\f025";
 }

 .icon-volume-off:before {
  content: "\f026";
 }

 .icon-volume-down:before {
  content: "\f027";
 }

 .icon-volume-up:before {
  content: "\f028";
 }

 .icon-qrcode:before {
  content: "\f029";
 }

 .icon-barcode:before {
  content: "\f02a";
 }

 .icon-tag:before {
  content: "\f02b";
 }

 .icon-tags:before {
  content: "\f02c";
 }

 .icon-book:before {
  content: "\f02d";
 }

 .icon-bookmark:before {
  content: "\f02e";
 }

 .icon-print:before {
  content: "\f02f";
 }

 .icon-camera:before {
  content: "\f030";
 }

 .icon-font:before {
  content: "\f031";
 }

 .icon-bold:before {
  content: "\f032";
 }

 .icon-italic:before {
  content: "\f033";
 }

 .icon-text-height:before {
  content: "\f034";
 }

 .icon-text-width:before {
  content: "\f035";
 }

 .icon-align-left:before {
  content: "\f036";
 }

 .icon-align-center:before {
  content: "\f037";
 }

 .icon-align-right:before {
  content: "\f038";
 }

 .icon-align-justify:before {
  content: "\f039";
 }

 .icon-list:before {
  content: "\f03a";
 }

 .icon-indent-left:before {
  content: "\f03b";
 }

 .icon-indent-right:before {
  content: "\f03c";
 }

 .icon-facetime-video:before {
  content: "\f03d";
 }

 .icon-picture:before {
  content: "\f03e";
 }

 .icon-pencil:before {
  content: "\f040";
 }

 .icon-map-marker:before {
  content: "\f041";
 }

 .icon-adjust:before {
  content: "\f042";
 }

 .icon-tint:before {
  content: "\f043";
 }

 .icon-edit:before {
  content: "\f044";
 }

 .icon-share:before {
  content: "\f045";
 }

 .icon-check:before {
  content: "\f046";
 }

 .icon-move:before {
  content: "\f047";
 }

 .icon-step-backward:before {
  content: "\f048";
 }

 .icon-fast-backward:before {
  content: "\f049";
 }

 .icon-backward:before {
  content: "\f04a";
 }

 .icon-play:before {
  content: "\f04b";
 }

 .icon-pause:before {
  content: "\f04c";
 }

 .icon-stop:before {
  content: "\f04d";
 }

 .icon-forward:before {
  content: "\f04e";
 }

 .icon-fast-forward:before {
  content: "\f050";
 }

 .icon-step-forward:before {
  content: "\f051";
 }

 .icon-eject:before {
  content: "\f052";
 }

 .icon-chevron-left:before {
  content: "\f053";
 }

 .icon-chevron-right:before {
  content: "\f054";
 }

 .icon-plus-sign:before {
  content: "\f055";
 }

 .icon-minus-sign:before {
  content: "\f056";
 }

 .icon-remove-sign:before {
  content: "\f057";
 }

 .icon-ok-sign:before {
  content: "\f058";
 }

 .icon-question-sign:before {
  content: "\f059";
 }

 .icon-info-sign:before {
  content: "\f05a";
 }

 .icon-screenshot:before {
  content: "\f05b";
 }

 .icon-remove-circle:before {
  content: "\f05c";
 }

 .icon-ok-circle:before {
  content: "\f05d";
 }

 .icon-ban-circle:before {
  content: "\f05e";
 }

 .icon-arrow-left:before {
  content: "\f060";
 }

 .icon-arrow-right:before {
  content: "\f061";
 }

 .icon-arrow-up:before {
  content: "\f062";
 }

 .icon-arrow-down:before {
  content: "\f063";
 }

 .icon-share-alt:before {
  content: "\f064";
 }

 .icon-resize-full:before {
  content: "\f065";
 }

 .icon-resize-small:before {
  content: "\f066";
 }

 .icon-plus:before {
  content: "\f067";
 }

 .icon-minus:before {
  content: "\f068";
 }

 .icon-asterisk:before {
  content: "\f069";
 }

 .icon-exclamation-sign:before {
  content: "\f06a";
 }

 .icon-gift:before {
  content: "\f06b";
 }

 .icon-leaf:before {
  content: "\f06c";
 }

 .icon-fire:before {
  content: "\f06d";
 }

 .icon-eye-open:before {
  content: "\f06e";
 }

 .icon-eye-close:before {
  content: "\f070";
 }

 .icon-warning-sign:before {
  content: "\f071";
 }

 .icon-plane:before {
  content: "\f072";
 }

 .icon-calendar:before {
  content: "\f073";
 }

 .icon-random:before {
  content: "\f074";
 }

 .icon-comment:before {
  content: "\f075";
 }

 .icon-magnet:before {
  content: "\f076";
 }

 .icon-chevron-up:before {
  content: "\f077";
 }

 .icon-chevron-down:before {
  content: "\f078";
 }

 .icon-retweet:before {
  content: "\f079";
 }

 .icon-shopping-cart:before {
  content: "\f07a";
 }

 .icon-folder-close:before {
  content: "\f07b";
 }

 .icon-folder-open:before {
  content: "\f07c";
 }

 .icon-resize-vertical:before {
  content: "\f07d";
 }

 .icon-resize-horizontal:before {
  content: "\f07e";
 }

 .icon-bar-chart:before {
  content: "\f080";
 }

 .icon-twitter-sign:before {
  content: "\f081";
 }

 .icon-facebook-sign:before {
  content: "\f082";
 }

 .icon-camera-retro:before {
  content: "\f083";
 }

 .icon-key:before {
  content: "\f084";
 }

 .icon-cogs:before {
  content: "\f085";
 }

 .icon-comments:before {
  content: "\f086";
 }

 .icon-thumbs-up:before {
  content: "\f087";
 }

 .icon-thumbs-down:before {
  content: "\f088";
 }

 .icon-star-half:before {
  content: "\f089";
 }

 .icon-heart-empty:before {
  content: "\f08a";
 }

 .icon-signout:before {
  content: "\f08b";
 }

 .icon-linkedin-sign:before {
  content: "\f08c";
 }

 .icon-pushpin:before {
  content: "\f08d";
 }

 .icon-external-link:before {
  content: "\f08e";
 }

 .icon-signin:before {
  content: "\f090";
 }

 .icon-trophy:before {
  content: "\f091";
 }

 .icon-github-sign:before {
  content: "\f092";
 }

 .icon-upload-alt:before {
  content: "\f093";
 }

 .icon-lemon:before {
  content: "\f094";
 }

 .icon-phone:before {
  content: "\f095";
 }

 .icon-check-empty:before {
  content: "\f096";
 }

 .icon-bookmark-empty:before {
  content: "\f097";
 }

 .icon-phone-sign:before {
  content: "\f098";
 }

 .icon-twitter:before {
  content: "\f099";
 }

 .icon-facebook:before {
  content: "\f09a";
 }

 .icon-github:before {
  content: "\f09b";
 }

 .icon-unlock:before {
  content: "\f09c";
 }

 .icon-credit-card:before {
  content: "\f09d";
 }

 .icon-rss:before {
  content: "\f09e";
 }

 .icon-hdd:before {
  content: "\f0a0";
 }

 .icon-bullhorn:before {
  content: "\f0a1";
 }

 .icon-bell:before {
  content: "\f0a2";
 }

 .icon-certificate:before {
  content: "\f0a3";
 }

 .icon-hand-right:before {
  content: "\f0a4";
 }

 .icon-hand-left:before {
  content: "\f0a5";
 }

 .icon-hand-up:before {
  content: "\f0a6";
 }

 .icon-hand-down:before {
  content: "\f0a7";
 }

 .icon-circle-arrow-left:before {
  content: "\f0a8";
 }

 .icon-circle-arrow-right:before {
  content: "\f0a9";
 }

 .icon-circle-arrow-up:before {
  content: "\f0aa";
 }

 .icon-circle-arrow-down:before {
  content: "\f0ab";
 }

 .icon-globe:before {
  content: "\f0ac";
 }

 .icon-wrench:before {
  content: "\f0ad";
 }

 .icon-tasks:before {
  content: "\f0ae";
 }

 .icon-filter:before {
  content: "\f0b0";
 }

 .icon-briefcase:before {
  content: "\f0b1";
 }

 .icon-fullscreen:before {
  content: "\f0b2";
 }

 .icon-group:before {
  content: "\f0c0";
 }

 .icon-link:before {
  content: "\f0c1";
 }

 .icon-cloud:before {
  content: "\f0c2";
 }

 .icon-beaker:before {
  content: "\f0c3";
 }

 .icon-cut:before {
  content: "\f0c4";
 }

 .icon-copy:before {
  content: "\f0c5";
 }

 .icon-paper-clip:before {
  content: "\f0c6";
 }

 .icon-save:before {
  content: "\f0c7";
 }

 .icon-sign-blank:before {
  content: "\f0c8";
 }

 .icon-reorder:before {
  content: "\f0c9";
 }

 .icon-list-ul:before {
  content: "\f0ca";
 }

 .icon-list-ol:before {
  content: "\f0cb";
 }

 .icon-strikethrough:before {
  content: "\f0cc";
 }

 .icon-underline:before {
  content: "\f0cd";
 }

 .icon-table:before {
  content: "\f0ce";
 }

 .icon-magic:before {
  content: "\f0d0";
 }

 .icon-truck:before {
  content: "\f0d1";
 }

 .icon-pinterest:before {
  content: "\f0d2";
 }

 .icon-pinterest-sign:before {
  content: "\f0d3";
 }

 .icon-google-plus-sign:before {
  content: "\f0d4";
 }

 .icon-google-plus:before {
  content: "\f0d5";
 }

 .icon-money:before {
  content: "\f0d6";
 }

 .icon-caret-down:before {
  content: "\f0d7";
 }

 .icon-caret-up:before {
  content: "\f0d8";
 }

 .icon-caret-left:before {
  content: "\f0d9";
 }

 .icon-caret-right:before {
  content: "\f0da";
 }

 .icon-columns:before {
  content: "\f0db";
 }

 .icon-sort:before {
  content: "\f0dc";
 }

 .icon-sort-down:before {
  content: "\f0dd";
 }

 .icon-sort-up:before {
  content: "\f0de";
 }

 .icon-envelope-alt:before {
  content: "\f0e0";
 }

 .icon-linkedin:before {
  content: "\f0e1";
 }

 .icon-undo:before {
  content: "\f0e2";
 }

 .icon-legal:before {
  content: "\f0e3";
 }

 .icon-dashboard:before {
  content: "\f0e4";
 }

 .icon-comment-alt:before {
  content: "\f0e5";
 }

 .icon-comments-alt:before {
  content: "\f0e6";
 }

 .icon-bolt:before {
  content: "\f0e7";
 }

 .icon-sitemap:before {
  content: "\f0e8";
 }

 .icon-umbrella:before {
  content: "\f0e9";
 }

 .icon-paste:before {
  content: "\f0ea";
 }

 .icon-user-md:before {
  content: "\f200";
 }

 html, body {
  width: 100%;
  height: 100%;
 }

 body {
  background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #474747), color-stop(100%, #0e0e0e));
  background-image: -webkit-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: -moz-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: -o-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: -ms-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  padding: 0;
  margin: 0;
  height: 100%;
 }

 [class^="icon-"]:before,
 [class*=" icon-"]:before {
  margin-right: 0.5em;
  opacity: 0.2;
 }

 /* Defaut link style */
 #access a, #access #menu a, #menu li a {
  background-color: #689384;
  display: block;
  color: #e5f1ea;
  text-decoration: none;
  padding: 0.5em;
  -webkit-transition: -webkit-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  -moz-transition: -moz-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  -ms-transition: -ms-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  -o-transition: -o-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  transition: transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
 }

 #access a:hover, #access #menu a:hover, #access a.skip-link.focus, #access #menu a.skip-link.focus, #menu li a:hover {
  background-color: #b9d9ce;
  color: #5a4741;
 }

 #access {
  font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 #access a.skip-link, #access #menu a.skip-link {
  position: relative;
  z-index: 2;
 }
 #access a.skip-link span, #access #menu a.skip-link span {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  -webkit-box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
  padding: 0 0.3em;
 }
 #access #menu li.active a a, #access #menu li.active a a:hover, #access #menu li.active:nth-child(odd) a, #access #menu li.active:nth-child(odd) a:hover {
  background-color: #5a4741;
  color: #fff;
  cursor: default;
 }

 #menu {
  border: 0 none;
  margin: 0;
  padding: 0;
 }
 #menu li {
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  -webkit-transition: max-height 500ms linear;
  -moz-transition: max-height 500ms linear;
  -ms-transition: max-height 500ms linear;
  -o-transition: max-height 500ms linear;
  transition: max-height 500ms linear;
 }
 #menu li a {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -moz-binding: url('xml/ellipsis.xml#ellipsis');
 }

 @media only screen and (max-width: 768px) {
  #menu {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: margin 500ms linear;
    -moz-transition: margin 500ms linear;
    -ms-transition: margin 500ms linear;
    -o-transition: margin 500ms linear;
    transition: margin 500ms linear;
    margin-top: -1.2em;
    overflow: hidden;
  }
  #menu li {
    max-height: 0;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
  }
  #menu li a {
    -webkit-transform-origin: top 50%;
    -moz-transform-origin: top 50%;
    -ms-transform-origin: top 50%;
    -o-transform-origin: top 50%;
    transform-origin: top 50%;
    -webkit-transform: rotateX(-90deg) scale(0.97);
    -moz-transform: rotateX(-90deg) scale(0.97);
    -ms-transform: rotateX(-90deg) scale(0.97);
    -o-transform: rotateX(-90deg) scale(0.97);
    transform: rotateX(-90deg) scale(0.97);
    position: relative;
    overflow: hidden;
    background-color: #48665c;
  }
  #menu li:nth-child(odd) a {
    -webkit-box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
    -webkit-transform: rotateX(90deg) scale(0.97);
    -moz-transform: rotateX(90deg) scale(0.97);
    -ms-transform: rotateX(90deg) scale(0.97);
    -o-transform: rotateX(90deg) scale(0.97);
    transform: rotateX(90deg) scale(0.97);
  }
  #menu li.active a:before, #menu li a:hover:before {
    opacity: 1;
  }
  #menu li a:hover:before {
    color: #689384;
  }
  #menu li.active a:before, #menu li.active a:hover:before {
    color: #fff;
  }
  #menu:target, #menu.target {
    margin-top: 0;
  }
  #menu:target li, #menu.target li {
    max-height: 2.5em;
    height: auto;
  }
  #menu:target li a, #menu.target li a {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: rotateX(0) scale(1);
    -moz-transform: rotateX(0) scale(1);
    -ms-transform: rotateX(0) scale(1);
    -o-transform: rotateX(0) scale(1);
    transform: rotateX(0) scale(1);
  }
 }
 @media only screen and (min-width: 769px) {
  [class^="icon-"]:before,
  [class*=" icon-"]:before {
    display: block;
    text-align: center;
    margin-right: 0;
  }

  #access a.skip-link {
    display: none;
  }

  #menu {
    width: 100%;
    background: #689384;
    text-align: center;
  }
  #menu li {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    white-space: nowrap;
  }
  #menu li {
    *display: inline;
  }
  #menu li a:before {
    -webkit-transition: -webkit-transform 500ms ease-in;
    -moz-transition: -moz-transform 500ms ease-in;
    -ms-transition: -ms-transform 500ms ease-in;
    -o-transition: -o-transform 500ms ease-in;
    transition: transform 500ms ease-in;
  }
  #menu li a:hover:before {
    -webkit-transform: translateY(1em) scale(3) rotate(15deg);
    -moz-transform: translateY(1em) scale(3) rotate(15deg);
    -ms-transform: translateY(1em) scale(3) rotate(15deg);
    -o-transform: translateY(1em) scale(3) rotate(15deg);
    transform: translateY(1em) scale(3) rotate(15deg);
  }
 }
  </style>

  <style>
    #codepen-footer, #codepen-footer * {
      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      box-sizing: border-box !important;
    }
    #codepen-footer {
      display: block !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      padding: 0 10px !important;
      margin: 0 !important;
      height: 30px !important;
      line-height: 30px !important;
      font-size: 12px !important;
      color: #eeeeee !important;
      background-color: #505050 !important;
      text-align: left !important;
      background: -webkit-linear-gradient(top, #505050, #383838) !important;
      background: -moz-linear-gradient(top, #505050, #383838) !important;
      background: -ms-linear-gradient(top, #505050, #383838) !important;
      background: -o-linear-gradient(top, #505050, #383838) !important;
      border-top: 1px solid black !important;
      border-bottom: 1px solid black !important;
      border-radius: 0 !important;
      border-image: none !important;
      box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
      z-index: 300 !important; 
      font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
      letter-spacing: 0 !important;
      word-spacing: 0 !important;
    }
    #codepen-footer a {
      color: #a7a7a7 !important; 
      text-decoration: none !important;
    }
    #codepen-footer a:hover {
      color: white !important; 
    }
  </style>
  <script>
    // Kill alerts, confirmations and prompts
    window.alert   = function(){};
    window.confirm = function(){};
    window.prompt  = function(){};
    window.open    = function(){};
    window.print   = function(){};
  </script>

 </head>
 <body>

  <div id="wrapper">
  <nav role="navigation" id="access">
    <a class="skip-link icon-reorder" title="Accéder au menu" href="#menu">Menu</a>
    <ul id="menu">
      <li class="active"><a class="icon-home" href="#accueil">Home</a></li><!-- whitespace
                --><li><a class="icon-group" href="#quisommesnous">About Us</a></li><!-- whitespace
                --><li><a class="icon-leaf" href="#services">Services</a></li><!-- whitespace
                --><li><a class="icon-picture" href="#portfolio">Portfolio</a></li><!-- whitespace
                --><li><a class="icon-envelope-alt" href="#contact">Contact</a></li>
          </ul>
      </nav>
 </div>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
 (function() {

 ;(function($) {
    "use strict";
    $(document).ready(function() {
        $('#access').on('touchstart click', '.skip-link', function(event) {
            $(this).toggleClass('focus');
            $($(this).attr('href')).toggleClass('target');
            event.preventDefault();
        }).find('.skip-link').append('<span>'+$('#menu .active').text()+'</span>');
    });
 })(jQuery);

 })();
  </script>

  <div id="codepen-footer">
    <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href,  null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>

    &nbsp;

    <a href="/clearideaz/pen/clearnav/5">Edit this Pen</a>
  </div>

 </body>

 </html>
diff --git a/index.js b/index.js
 ;(function($) {
    "use strict";
    $(document).ready(function() {
        $('#access').on('touchstart click', '.skip-link', function(event) {
            $(this).toggleClass('focus');
            $($(this).attr('href')).toggleClass('target');
            event.preventDefault();
        }).find('.skip-link').append('<span>'+$('#menu .active').text()+'</span>');
    });
 })(jQuery);
diff --git a/markup.html b/markup.html
 <div id="wrapper">
  <nav role="navigation" id="access">
    <a class="skip-link icon-reorder" title="Accéder au menu" href="#menu">Menu</a>
    <ul id="menu">
      <li class="active"><a class="icon-home" href="#accueil">Home</a></li><!-- whitespace
                --><li><a class="icon-group" href="#quisommesnous">About Us</a></li><!-- whitespace
                --><li><a class="icon-leaf" href="#services">Services</a></li><!-- whitespace
                --><li><a class="icon-picture" href="#portfolio">Portfolio</a></li><!-- whitespace
                --><li><a class="icon-envelope-alt" href="#contact">Contact</a></li>
          </ul>
      </nav>
 </div>
diff --git a/style.css b/style.css
 @font-face {
  font-family: "FontAwesome";
  src: url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.eot');
  src: url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.eot?#iefix') format('eot'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.woff') format('woff'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.ttf') format('truetype'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
 }


 [class^="icon-"]:before,
 [class*=" icon-"]:before {
  font-family: FontAwesome;
 }

 .icon-glass:before {
  content: "\f000";
 }

 .icon-music:before {
  content: "\f001";
 }

 .icon-search:before {
  content: "\f002";
 }

 .icon-envelope:before {
  content: "\f003";
 }

 .icon-heart:before {
  content: "\f004";
 }

 .icon-star:before {
  content: "\f005";
 }

 .icon-star-empty:before {
  content: "\f006";
 }

 .icon-user:before {
  content: "\f007";
 }

 .icon-film:before {
  content: "\f008";
 }

 .icon-th-large:before {
  content: "\f009";
 }

 .icon-th:before {
  content: "\f00a";
 }

 .icon-th-list:before {
  content: "\f00b";
 }

 .icon-ok:before {
  content: "\f00c";
 }

 .icon-remove:before {
  content: "\f00d";
 }

 .icon-zoom-in:before {
  content: "\f00e";
 }

 .icon-zoom-out:before {
  content: "\f010";
 }

 .icon-off:before {
  content: "\f011";
 }

 .icon-signal:before {
  content: "\f012";
 }

 .icon-cog:before {
  content: "\f013";
 }

 .icon-trash:before {
  content: "\f014";
 }

 .icon-home:before {
  content: "\f015";
 }

 .icon-file:before {
  content: "\f016";
 }

 .icon-time:before {
  content: "\f017";
 }

 .icon-road:before {
  content: "\f018";
 }

 .icon-download-alt:before {
  content: "\f019";
 }

 .icon-download:before {
  content: "\f01a";
 }

 .icon-upload:before {
  content: "\f01b";
 }

 .icon-inbox:before {
  content: "\f01c";
 }

 .icon-play-circle:before {
  content: "\f01d";
 }

 .icon-repeat:before {
  content: "\f01e";
 }

 /* \f020 doesn't work in Safari. all shifted one down */
 .icon-refresh:before {
  content: "\f021";
 }

 .icon-list-alt:before {
  content: "\f022";
 }

 .icon-lock:before {
  content: "\f023";
 }

 .icon-flag:before {
  content: "\f024";
 }

 .icon-headphones:before {
  content: "\f025";
 }

 .icon-volume-off:before {
  content: "\f026";
 }

 .icon-volume-down:before {
  content: "\f027";
 }

 .icon-volume-up:before {
  content: "\f028";
 }

 .icon-qrcode:before {
  content: "\f029";
 }

 .icon-barcode:before {
  content: "\f02a";
 }

 .icon-tag:before {
  content: "\f02b";
 }

 .icon-tags:before {
  content: "\f02c";
 }

 .icon-book:before {
  content: "\f02d";
 }

 .icon-bookmark:before {
  content: "\f02e";
 }

 .icon-print:before {
  content: "\f02f";
 }

 .icon-camera:before {
  content: "\f030";
 }

 .icon-font:before {
  content: "\f031";
 }

 .icon-bold:before {
  content: "\f032";
 }

 .icon-italic:before {
  content: "\f033";
 }

 .icon-text-height:before {
  content: "\f034";
 }

 .icon-text-width:before {
  content: "\f035";
 }

 .icon-align-left:before {
  content: "\f036";
 }

 .icon-align-center:before {
  content: "\f037";
 }

 .icon-align-right:before {
  content: "\f038";
 }

 .icon-align-justify:before {
  content: "\f039";
 }

 .icon-list:before {
  content: "\f03a";
 }

 .icon-indent-left:before {
  content: "\f03b";
 }

 .icon-indent-right:before {
  content: "\f03c";
 }

 .icon-facetime-video:before {
  content: "\f03d";
 }

 .icon-picture:before {
  content: "\f03e";
 }

 .icon-pencil:before {
  content: "\f040";
 }

 .icon-map-marker:before {
  content: "\f041";
 }

 .icon-adjust:before {
  content: "\f042";
 }

 .icon-tint:before {
  content: "\f043";
 }

 .icon-edit:before {
  content: "\f044";
 }

 .icon-share:before {
  content: "\f045";
 }

 .icon-check:before {
  content: "\f046";
 }

 .icon-move:before {
  content: "\f047";
 }

 .icon-step-backward:before {
  content: "\f048";
 }

 .icon-fast-backward:before {
  content: "\f049";
 }

 .icon-backward:before {
  content: "\f04a";
 }

 .icon-play:before {
  content: "\f04b";
 }

 .icon-pause:before {
  content: "\f04c";
 }

 .icon-stop:before {
  content: "\f04d";
 }

 .icon-forward:before {
  content: "\f04e";
 }

 .icon-fast-forward:before {
  content: "\f050";
 }

 .icon-step-forward:before {
  content: "\f051";
 }

 .icon-eject:before {
  content: "\f052";
 }

 .icon-chevron-left:before {
  content: "\f053";
 }

 .icon-chevron-right:before {
  content: "\f054";
 }

 .icon-plus-sign:before {
  content: "\f055";
 }

 .icon-minus-sign:before {
  content: "\f056";
 }

 .icon-remove-sign:before {
  content: "\f057";
 }

 .icon-ok-sign:before {
  content: "\f058";
 }

 .icon-question-sign:before {
  content: "\f059";
 }

 .icon-info-sign:before {
  content: "\f05a";
 }

 .icon-screenshot:before {
  content: "\f05b";
 }

 .icon-remove-circle:before {
  content: "\f05c";
 }

 .icon-ok-circle:before {
  content: "\f05d";
 }

 .icon-ban-circle:before {
  content: "\f05e";
 }

 .icon-arrow-left:before {
  content: "\f060";
 }

 .icon-arrow-right:before {
  content: "\f061";
 }

 .icon-arrow-up:before {
  content: "\f062";
 }

 .icon-arrow-down:before {
  content: "\f063";
 }

 .icon-share-alt:before {
  content: "\f064";
 }

 .icon-resize-full:before {
  content: "\f065";
 }

 .icon-resize-small:before {
  content: "\f066";
 }

 .icon-plus:before {
  content: "\f067";
 }

 .icon-minus:before {
  content: "\f068";
 }

 .icon-asterisk:before {
  content: "\f069";
 }

 .icon-exclamation-sign:before {
  content: "\f06a";
 }

 .icon-gift:before {
  content: "\f06b";
 }

 .icon-leaf:before {
  content: "\f06c";
 }

 .icon-fire:before {
  content: "\f06d";
 }

 .icon-eye-open:before {
  content: "\f06e";
 }

 .icon-eye-close:before {
  content: "\f070";
 }

 .icon-warning-sign:before {
  content: "\f071";
 }

 .icon-plane:before {
  content: "\f072";
 }

 .icon-calendar:before {
  content: "\f073";
 }

 .icon-random:before {
  content: "\f074";
 }

 .icon-comment:before {
  content: "\f075";
 }

 .icon-magnet:before {
  content: "\f076";
 }

 .icon-chevron-up:before {
  content: "\f077";
 }

 .icon-chevron-down:before {
  content: "\f078";
 }

 .icon-retweet:before {
  content: "\f079";
 }

 .icon-shopping-cart:before {
  content: "\f07a";
 }

 .icon-folder-close:before {
  content: "\f07b";
 }

 .icon-folder-open:before {
  content: "\f07c";
 }

 .icon-resize-vertical:before {
  content: "\f07d";
 }

 .icon-resize-horizontal:before {
  content: "\f07e";
 }

 .icon-bar-chart:before {
  content: "\f080";
 }

 .icon-twitter-sign:before {
  content: "\f081";
 }

 .icon-facebook-sign:before {
  content: "\f082";
 }

 .icon-camera-retro:before {
  content: "\f083";
 }

 .icon-key:before {
  content: "\f084";
 }

 .icon-cogs:before {
  content: "\f085";
 }

 .icon-comments:before {
  content: "\f086";
 }

 .icon-thumbs-up:before {
  content: "\f087";
 }

 .icon-thumbs-down:before {
  content: "\f088";
 }

 .icon-star-half:before {
  content: "\f089";
 }

 .icon-heart-empty:before {
  content: "\f08a";
 }

 .icon-signout:before {
  content: "\f08b";
 }

 .icon-linkedin-sign:before {
  content: "\f08c";
 }

 .icon-pushpin:before {
  content: "\f08d";
 }

 .icon-external-link:before {
  content: "\f08e";
 }

 .icon-signin:before {
  content: "\f090";
 }

 .icon-trophy:before {
  content: "\f091";
 }

 .icon-github-sign:before {
  content: "\f092";
 }

 .icon-upload-alt:before {
  content: "\f093";
 }

 .icon-lemon:before {
  content: "\f094";
 }

 .icon-phone:before {
  content: "\f095";
 }

 .icon-check-empty:before {
  content: "\f096";
 }

 .icon-bookmark-empty:before {
  content: "\f097";
 }

 .icon-phone-sign:before {
  content: "\f098";
 }

 .icon-twitter:before {
  content: "\f099";
 }

 .icon-facebook:before {
  content: "\f09a";
 }

 .icon-github:before {
  content: "\f09b";
 }

 .icon-unlock:before {
  content: "\f09c";
 }

 .icon-credit-card:before {
  content: "\f09d";
 }

 .icon-rss:before {
  content: "\f09e";
 }

 .icon-hdd:before {
  content: "\f0a0";
 }

 .icon-bullhorn:before {
  content: "\f0a1";
 }

 .icon-bell:before {
  content: "\f0a2";
 }

 .icon-certificate:before {
  content: "\f0a3";
 }

 .icon-hand-right:before {
  content: "\f0a4";
 }

 .icon-hand-left:before {
  content: "\f0a5";
 }

 .icon-hand-up:before {
  content: "\f0a6";
 }

 .icon-hand-down:before {
  content: "\f0a7";
 }

 .icon-circle-arrow-left:before {
  content: "\f0a8";
 }

 .icon-circle-arrow-right:before {
  content: "\f0a9";
 }

 .icon-circle-arrow-up:before {
  content: "\f0aa";
 }

 .icon-circle-arrow-down:before {
  content: "\f0ab";
 }

 .icon-globe:before {
  content: "\f0ac";
 }

 .icon-wrench:before {
  content: "\f0ad";
 }

 .icon-tasks:before {
  content: "\f0ae";
 }

 .icon-filter:before {
  content: "\f0b0";
 }

 .icon-briefcase:before {
  content: "\f0b1";
 }

 .icon-fullscreen:before {
  content: "\f0b2";
 }

 .icon-group:before {
  content: "\f0c0";
 }

 .icon-link:before {
  content: "\f0c1";
 }

 .icon-cloud:before {
  content: "\f0c2";
 }

 .icon-beaker:before {
  content: "\f0c3";
 }

 .icon-cut:before {
  content: "\f0c4";
 }

 .icon-copy:before {
  content: "\f0c5";
 }

 .icon-paper-clip:before {
  content: "\f0c6";
 }

 .icon-save:before {
  content: "\f0c7";
 }

 .icon-sign-blank:before {
  content: "\f0c8";
 }

 .icon-reorder:before {
  content: "\f0c9";
 }

 .icon-list-ul:before {
  content: "\f0ca";
 }

 .icon-list-ol:before {
  content: "\f0cb";
 }

 .icon-strikethrough:before {
  content: "\f0cc";
 }

 .icon-underline:before {
  content: "\f0cd";
 }

 .icon-table:before {
  content: "\f0ce";
 }

 .icon-magic:before {
  content: "\f0d0";
 }

 .icon-truck:before {
  content: "\f0d1";
 }

 .icon-pinterest:before {
  content: "\f0d2";
 }

 .icon-pinterest-sign:before {
  content: "\f0d3";
 }

 .icon-google-plus-sign:before {
  content: "\f0d4";
 }

 .icon-google-plus:before {
  content: "\f0d5";
 }

 .icon-money:before {
  content: "\f0d6";
 }

 .icon-caret-down:before {
  content: "\f0d7";
 }

 .icon-caret-up:before {
  content: "\f0d8";
 }

 .icon-caret-left:before {
  content: "\f0d9";
 }

 .icon-caret-right:before {
  content: "\f0da";
 }

 .icon-columns:before {
  content: "\f0db";
 }

 .icon-sort:before {
  content: "\f0dc";
 }

 .icon-sort-down:before {
  content: "\f0dd";
 }

 .icon-sort-up:before {
  content: "\f0de";
 }

 .icon-envelope-alt:before {
  content: "\f0e0";
 }

 .icon-linkedin:before {
  content: "\f0e1";
 }

 .icon-undo:before {
  content: "\f0e2";
 }

 .icon-legal:before {
  content: "\f0e3";
 }

 .icon-dashboard:before {
  content: "\f0e4";
 }

 .icon-comment-alt:before {
  content: "\f0e5";
 }

 .icon-comments-alt:before {
  content: "\f0e6";
 }

 .icon-bolt:before {
  content: "\f0e7";
 }

 .icon-sitemap:before {
  content: "\f0e8";
 }

 .icon-umbrella:before {
  content: "\f0e9";
 }

 .icon-paste:before {
  content: "\f0ea";
 }

 .icon-user-md:before {
  content: "\f200";
 }

 html, body {
  width: 100%;
  height: 100%;
 }

 body {
  background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #474747), color-stop(100%, #0e0e0e));
  background-image: -webkit-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: -moz-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: -o-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: -ms-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  background-image: radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
  padding: 0;
  margin: 0;
  height: 100%;
 }

 [class^="icon-"]:before,
 [class*=" icon-"]:before {
  margin-right: 0.5em;
  opacity: 0.2;
 }

 /* Defaut link style */
 #access a, #access #menu a, #menu li a {
  background-color: #689384;
  display: block;
  color: #e5f1ea;
  text-decoration: none;
  padding: 0.5em;
  -webkit-transition: -webkit-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  -moz-transition: -moz-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  -ms-transition: -ms-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  -o-transition: -o-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
  transition: transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
 }

 #access a:hover, #access #menu a:hover, #access a.skip-link.focus, #access #menu a.skip-link.focus, #menu li a:hover {
  background-color: #b9d9ce;
  color: #5a4741;
 }

 #access {
  font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 #access a.skip-link, #access #menu a.skip-link {
  position: relative;
  z-index: 2;
 }
 #access a.skip-link span, #access #menu a.skip-link span {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  -webkit-box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
  padding: 0 0.3em;
 }
 #access #menu li.active a a, #access #menu li.active a a:hover, #access #menu li.active:nth-child(odd) a, #access #menu li.active:nth-child(odd) a:hover {
  background-color: #5a4741;
  color: #fff;
  cursor: default;
 }

 #menu {
  border: 0 none;
  margin: 0;
  padding: 0;
 }
 #menu li {
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  -webkit-transition: max-height 500ms linear;
  -moz-transition: max-height 500ms linear;
  -ms-transition: max-height 500ms linear;
  -o-transition: max-height 500ms linear;
  transition: max-height 500ms linear;
 }
 #menu li a {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -moz-binding: url('xml/ellipsis.xml#ellipsis');
 }

 @media only screen and (max-width: 768px) {
  #menu {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: margin 500ms linear;
    -moz-transition: margin 500ms linear;
    -ms-transition: margin 500ms linear;
    -o-transition: margin 500ms linear;
    transition: margin 500ms linear;
    margin-top: -1.2em;
    overflow: hidden;
  }
  #menu li {
    max-height: 0;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
  }
  #menu li a {
    -webkit-transform-origin: top 50%;
    -moz-transform-origin: top 50%;
    -ms-transform-origin: top 50%;
    -o-transform-origin: top 50%;
    transform-origin: top 50%;
    -webkit-transform: rotateX(-90deg) scale(0.97);
    -moz-transform: rotateX(-90deg) scale(0.97);
    -ms-transform: rotateX(-90deg) scale(0.97);
    -o-transform: rotateX(-90deg) scale(0.97);
    transform: rotateX(-90deg) scale(0.97);
    position: relative;
    overflow: hidden;
    background-color: #48665c;
  }
  #menu li:nth-child(odd) a {
    -webkit-box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
    -webkit-transform: rotateX(90deg) scale(0.97);
    -moz-transform: rotateX(90deg) scale(0.97);
    -ms-transform: rotateX(90deg) scale(0.97);
    -o-transform: rotateX(90deg) scale(0.97);
    transform: rotateX(90deg) scale(0.97);
  }
  #menu li.active a:before, #menu li a:hover:before {
    opacity: 1;
  }
  #menu li a:hover:before {
    color: #689384;
  }
  #menu li.active a:before, #menu li.active a:hover:before {
    color: #fff;
  }
  #menu:target, #menu.target {
    margin-top: 0;
  }
  #menu:target li, #menu.target li {
    max-height: 2.5em;
    height: auto;
  }
  #menu:target li a, #menu.target li a {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: rotateX(0) scale(1);
    -moz-transform: rotateX(0) scale(1);
    -ms-transform: rotateX(0) scale(1);
    -o-transform: rotateX(0) scale(1);
    transform: rotateX(0) scale(1);
  }
 }
 @media only screen and (min-width: 769px) {
  [class^="icon-"]:before,
  [class*=" icon-"]:before {
    display: block;
    text-align: center;
    margin-right: 0;
  }

  #access a.skip-link {
    display: none;
  }

  #menu {
    width: 100%;
    background: #689384;
    text-align: center;
  }
  #menu li {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    white-space: nowrap;
  }
  #menu li {
    *display: inline;
  }
  #menu li a:before {
    -webkit-transition: -webkit-transform 500ms ease-in;
    -moz-transition: -moz-transform 500ms ease-in;
    -ms-transition: -ms-transform 500ms ease-in;
    -o-transition: -o-transform 500ms ease-in;
    transition: transform 500ms ease-in;
  }
  #menu li a:hover:before {
    -webkit-transform: translateY(1em) scale(3) rotate(15deg);
    -moz-transform: translateY(1em) scale(3) rotate(15deg);
    -ms-transform: translateY(1em) scale(3) rotate(15deg);
    -o-transform: translateY(1em) scale(3) rotate(15deg);
    transform: translateY(1em) scale(3) rotate(15deg);
  }
 }


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>ClearNav, a responsive navigation boilerplate · CodePen</title>

	<style>
	@font-face {
	font-family: "FontAwesome";
	src: url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.eot');
	src: url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.eot?#iefix') format('eot'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.woff') format('woff'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.ttf') format('truetype'), url('http://fortawesome.github.com/Font-Awesome/assets/font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
	font-weight: normal;
	font-style: normal;
	}

	[class^="icon-"]:before,
	[class*=" icon-"]:before {
	font-family: FontAwesome;
	}

	.icon-glass:before {
	content: "\f000";
	}

	.icon-music:before {
	content: "\f001";
	}

	.icon-search:before {
	content: "\f002";
	}

	.icon-envelope:before {
	content: "\f003";
	}

	.icon-heart:before {
	content: "\f004";
	}

	.icon-star:before {
	content: "\f005";
	}

	.icon-star-empty:before {
	content: "\f006";
	}

	.icon-user:before {
	content: "\f007";
	}

	.icon-film:before {
	content: "\f008";
	}

	.icon-th-large:before {
	content: "\f009";
	}

	.icon-th:before {
	content: "\f00a";
	}

	.icon-th-list:before {
	content: "\f00b";
	}

	.icon-ok:before {
	content: "\f00c";
	}

	.icon-remove:before {
	content: "\f00d";
	}

	.icon-zoom-in:before {
	content: "\f00e";
	}

	.icon-zoom-out:before {
	content: "\f010";
	}

	.icon-off:before {
	content: "\f011";
	}

	.icon-signal:before {
	content: "\f012";
	}

	.icon-cog:before {
	content: "\f013";
	}

	.icon-trash:before {
	content: "\f014";
	}

	.icon-home:before {
	content: "\f015";
	}

	.icon-file:before {
	content: "\f016";
	}

	.icon-time:before {
	content: "\f017";
	}

	.icon-road:before {
	content: "\f018";
	}

	.icon-download-alt:before {
	content: "\f019";
	}

	.icon-download:before {
	content: "\f01a";
	}

	.icon-upload:before {
	content: "\f01b";
	}

	.icon-inbox:before {
	content: "\f01c";
	}

	.icon-play-circle:before {
	content: "\f01d";
	}

	.icon-repeat:before {
	content: "\f01e";
	}

	/* \f020 doesn't work in Safari. all shifted one down */
	.icon-refresh:before {
	content: "\f021";
	}

	.icon-list-alt:before {
	content: "\f022";
	}

	.icon-lock:before {
	content: "\f023";
	}

	.icon-flag:before {
	content: "\f024";
	}

	.icon-headphones:before {
	content: "\f025";
	}

	.icon-volume-off:before {
	content: "\f026";
	}

	.icon-volume-down:before {
	content: "\f027";
	}

	.icon-volume-up:before {
	content: "\f028";
	}

	.icon-qrcode:before {
	content: "\f029";
	}

	.icon-barcode:before {
	content: "\f02a";
	}

	.icon-tag:before {
	content: "\f02b";
	}

	.icon-tags:before {
	content: "\f02c";
	}

	.icon-book:before {
	content: "\f02d";
	}

	.icon-bookmark:before {
	content: "\f02e";
	}

	.icon-print:before {
	content: "\f02f";
	}

	.icon-camera:before {
	content: "\f030";
	}

	.icon-font:before {
	content: "\f031";
	}

	.icon-bold:before {
	content: "\f032";
	}

	.icon-italic:before {
	content: "\f033";
	}

	.icon-text-height:before {
	content: "\f034";
	}

	.icon-text-width:before {
	content: "\f035";
	}

	.icon-align-left:before {
	content: "\f036";
	}

	.icon-align-center:before {
	content: "\f037";
	}

	.icon-align-right:before {
	content: "\f038";
	}

	.icon-align-justify:before {
	content: "\f039";
	}

	.icon-list:before {
	content: "\f03a";
	}

	.icon-indent-left:before {
	content: "\f03b";
	}

	.icon-indent-right:before {
	content: "\f03c";
	}

	.icon-facetime-video:before {
	content: "\f03d";
	}

	.icon-picture:before {
	content: "\f03e";
	}

	.icon-pencil:before {
	content: "\f040";
	}

	.icon-map-marker:before {
	content: "\f041";
	}

	.icon-adjust:before {
	content: "\f042";
	}

	.icon-tint:before {
	content: "\f043";
	}

	.icon-edit:before {
	content: "\f044";
	}

	.icon-share:before {
	content: "\f045";
	}

	.icon-check:before {
	content: "\f046";
	}

	.icon-move:before {
	content: "\f047";
	}

	.icon-step-backward:before {
	content: "\f048";
	}

	.icon-fast-backward:before {
	content: "\f049";
	}

	.icon-backward:before {
	content: "\f04a";
	}

	.icon-play:before {
	content: "\f04b";
	}

	.icon-pause:before {
	content: "\f04c";
	}

	.icon-stop:before {
	content: "\f04d";
	}

	.icon-forward:before {
	content: "\f04e";
	}

	.icon-fast-forward:before {
	content: "\f050";
	}

	.icon-step-forward:before {
	content: "\f051";
	}

	.icon-eject:before {
	content: "\f052";
	}

	.icon-chevron-left:before {
	content: "\f053";
	}

	.icon-chevron-right:before {
	content: "\f054";
	}

	.icon-plus-sign:before {
	content: "\f055";
	}

	.icon-minus-sign:before {
	content: "\f056";
	}

	.icon-remove-sign:before {
	content: "\f057";
	}

	.icon-ok-sign:before {
	content: "\f058";
	}

	.icon-question-sign:before {
	content: "\f059";
	}

	.icon-info-sign:before {
	content: "\f05a";
	}

	.icon-screenshot:before {
	content: "\f05b";
	}

	.icon-remove-circle:before {
	content: "\f05c";
	}

	.icon-ok-circle:before {
	content: "\f05d";
	}

	.icon-ban-circle:before {
	content: "\f05e";
	}

	.icon-arrow-left:before {
	content: "\f060";
	}

	.icon-arrow-right:before {
	content: "\f061";
	}

	.icon-arrow-up:before {
	content: "\f062";
	}

	.icon-arrow-down:before {
	content: "\f063";
	}

	.icon-share-alt:before {
	content: "\f064";
	}

	.icon-resize-full:before {
	content: "\f065";
	}

	.icon-resize-small:before {
	content: "\f066";
	}

	.icon-plus:before {
	content: "\f067";
	}

	.icon-minus:before {
	content: "\f068";
	}

	.icon-asterisk:before {
	content: "\f069";
	}

	.icon-exclamation-sign:before {
	content: "\f06a";
	}

	.icon-gift:before {
	content: "\f06b";
	}

	.icon-leaf:before {
	content: "\f06c";
	}

	.icon-fire:before {
	content: "\f06d";
	}

	.icon-eye-open:before {
	content: "\f06e";
	}

	.icon-eye-close:before {
	content: "\f070";
	}

	.icon-warning-sign:before {
	content: "\f071";
	}

	.icon-plane:before {
	content: "\f072";
	}

	.icon-calendar:before {
	content: "\f073";
	}

	.icon-random:before {
	content: "\f074";
	}

	.icon-comment:before {
	content: "\f075";
	}

	.icon-magnet:before {
	content: "\f076";
	}

	.icon-chevron-up:before {
	content: "\f077";
	}

	.icon-chevron-down:before {
	content: "\f078";
	}

	.icon-retweet:before {
	content: "\f079";
	}

	.icon-shopping-cart:before {
	content: "\f07a";
	}

	.icon-folder-close:before {
	content: "\f07b";
	}

	.icon-folder-open:before {
	content: "\f07c";
	}

	.icon-resize-vertical:before {
	content: "\f07d";
	}

	.icon-resize-horizontal:before {
	content: "\f07e";
	}

	.icon-bar-chart:before {
	content: "\f080";
	}

	.icon-twitter-sign:before {
	content: "\f081";
	}

	.icon-facebook-sign:before {
	content: "\f082";
	}

	.icon-camera-retro:before {
	content: "\f083";
	}

	.icon-key:before {
	content: "\f084";
	}

	.icon-cogs:before {
	content: "\f085";
	}

	.icon-comments:before {
	content: "\f086";
	}

	.icon-thumbs-up:before {
	content: "\f087";
	}

	.icon-thumbs-down:before {
	content: "\f088";
	}

	.icon-star-half:before {
	content: "\f089";
	}

	.icon-heart-empty:before {
	content: "\f08a";
	}

	.icon-signout:before {
	content: "\f08b";
	}

	.icon-linkedin-sign:before {
	content: "\f08c";
	}

	.icon-pushpin:before {
	content: "\f08d";
	}

	.icon-external-link:before {
	content: "\f08e";
	}

	.icon-signin:before {
	content: "\f090";
	}

	.icon-trophy:before {
	content: "\f091";
	}

	.icon-github-sign:before {
	content: "\f092";
	}

	.icon-upload-alt:before {
	content: "\f093";
	}

	.icon-lemon:before {
	content: "\f094";
	}

	.icon-phone:before {
	content: "\f095";
	}

	.icon-check-empty:before {
	content: "\f096";
	}

	.icon-bookmark-empty:before {
	content: "\f097";
	}

	.icon-phone-sign:before {
	content: "\f098";
	}

	.icon-twitter:before {
	content: "\f099";
	}

	.icon-facebook:before {
	content: "\f09a";
	}

	.icon-github:before {
	content: "\f09b";
	}

	.icon-unlock:before {
	content: "\f09c";
	}

	.icon-credit-card:before {
	content: "\f09d";
	}

	.icon-rss:before {
	content: "\f09e";
	}

	.icon-hdd:before {
	content: "\f0a0";
	}

	.icon-bullhorn:before {
	content: "\f0a1";
	}

	.icon-bell:before {
	content: "\f0a2";
	}

	.icon-certificate:before {
	content: "\f0a3";
	}

	.icon-hand-right:before {
	content: "\f0a4";
	}

	.icon-hand-left:before {
	content: "\f0a5";
	}

	.icon-hand-up:before {
	content: "\f0a6";
	}

	.icon-hand-down:before {
	content: "\f0a7";
	}

	.icon-circle-arrow-left:before {
	content: "\f0a8";
	}

	.icon-circle-arrow-right:before {
	content: "\f0a9";
	}

	.icon-circle-arrow-up:before {
	content: "\f0aa";
	}

	.icon-circle-arrow-down:before {
	content: "\f0ab";
	}

	.icon-globe:before {
	content: "\f0ac";
	}

	.icon-wrench:before {
	content: "\f0ad";
	}

	.icon-tasks:before {
	content: "\f0ae";
	}

	.icon-filter:before {
	content: "\f0b0";
	}

	.icon-briefcase:before {
	content: "\f0b1";
	}

	.icon-fullscreen:before {
	content: "\f0b2";
	}

	.icon-group:before {
	content: "\f0c0";
	}

	.icon-link:before {
	content: "\f0c1";
	}

	.icon-cloud:before {
	content: "\f0c2";
	}

	.icon-beaker:before {
	content: "\f0c3";
	}

	.icon-cut:before {
	content: "\f0c4";
	}

	.icon-copy:before {
	content: "\f0c5";
	}

	.icon-paper-clip:before {
	content: "\f0c6";
	}

	.icon-save:before {
	content: "\f0c7";
	}

	.icon-sign-blank:before {
	content: "\f0c8";
	}

	.icon-reorder:before {
	content: "\f0c9";
	}

	.icon-list-ul:before {
	content: "\f0ca";
	}

	.icon-list-ol:before {
	content: "\f0cb";
	}

	.icon-strikethrough:before {
	content: "\f0cc";
	}

	.icon-underline:before {
	content: "\f0cd";
	}

	.icon-table:before {
	content: "\f0ce";
	}

	.icon-magic:before {
	content: "\f0d0";
	}

	.icon-truck:before {
	content: "\f0d1";
	}

	.icon-pinterest:before {
	content: "\f0d2";
	}

	.icon-pinterest-sign:before {
	content: "\f0d3";
	}

	.icon-google-plus-sign:before {
	content: "\f0d4";
	}

	.icon-google-plus:before {
	content: "\f0d5";
	}

	.icon-money:before {
	content: "\f0d6";
	}

	.icon-caret-down:before {
	content: "\f0d7";
	}

	.icon-caret-up:before {
	content: "\f0d8";
	}

	.icon-caret-left:before {
	content: "\f0d9";
	}

	.icon-caret-right:before {
	content: "\f0da";
	}

	.icon-columns:before {
	content: "\f0db";
	}

	.icon-sort:before {
	content: "\f0dc";
	}

	.icon-sort-down:before {
	content: "\f0dd";
	}

	.icon-sort-up:before {
	content: "\f0de";
	}

	.icon-envelope-alt:before {
	content: "\f0e0";
	}

	.icon-linkedin:before {
	content: "\f0e1";
	}

	.icon-undo:before {
	content: "\f0e2";
	}

	.icon-legal:before {
	content: "\f0e3";
	}

	.icon-dashboard:before {
	content: "\f0e4";
	}

	.icon-comment-alt:before {
	content: "\f0e5";
	}

	.icon-comments-alt:before {
	content: "\f0e6";
	}

	.icon-bolt:before {
	content: "\f0e7";
	}

	.icon-sitemap:before {
	content: "\f0e8";
	}

	.icon-umbrella:before {
	content: "\f0e9";
	}

	.icon-paste:before {
	content: "\f0ea";
	}

	.icon-user-md:before {
	content: "\f200";
	}

	html, body {
	width: 100%;
	height: 100%;
	}

	body {
	background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #474747), color-stop(100%, #0e0e0e));
	background-image: -webkit-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
	background-image: -moz-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
	background-image: -o-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
	background-image: -ms-radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
	background-image: radial-gradient(center top, ellipse cover, #474747 0%, #0e0e0e 100%);
	padding: 0;
	margin: 0;
	height: 100%;
	}

	[class^="icon-"]:before,
	[class*=" icon-"]:before {
	margin-right: 0.5em;
	opacity: 0.2;
	}

	/* Defaut link style */
	#access a, #access #menu a, #menu li a {
	background-color: #689384;
	display: block;
	color: #e5f1ea;
	text-decoration: none;
	padding: 0.5em;
	-webkit-transition: -webkit-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
	-moz-transition: -moz-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
	-ms-transition: -ms-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
	-o-transition: -o-transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
	transition: transform 500ms linear, box-shadow 500ms ease-in, background-color 250ms ease-in;
	}

	#access a:hover, #access #menu a:hover, #access a.skip-link.focus, #access #menu a.skip-link.focus, #menu li a:hover {
	background-color: #b9d9ce;
	color: #5a4741;
	}

	#access {
	font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}
	#access a.skip-link, #access #menu a.skip-link {
	position: relative;
	z-index: 2;
	}
	#access a.skip-link span, #access #menu a.skip-link span {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	-webkit-box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.2);
	padding: 0 0.3em;
	}
	#access #menu li.active a a, #access #menu li.active a a:hover, #access #menu li.active:nth-child(odd) a, #access #menu li.active:nth-child(odd) a:hover {
	background-color: #5a4741;
	color: #fff;
	cursor: default;
	}

	#menu {
	border: 0 none;
	margin: 0;
	padding: 0;
	}
	#menu li {
	list-style-image: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-transition: max-height 500ms linear;
	-moz-transition: max-height 500ms linear;
	-ms-transition: max-height 500ms linear;
	-o-transition: max-height 500ms linear;
	transition: max-height 500ms linear;
	}
	#menu li a {
	white-space: nowrap;
	overflow: hidden;
	-ms-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	-moz-binding: url('xml/ellipsis.xml#ellipsis');
	}

	@media only screen and (max-width: 768px) {
	#menu {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: margin 500ms linear;
	-moz-transition: margin 500ms linear;
	-ms-transition: margin 500ms linear;
	-o-transition: margin 500ms linear;
	transition: margin 500ms linear;
	margin-top: -1.2em;
	overflow: hidden;
	}
	#menu li {
	max-height: 0;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
	}
	#menu li a {
	-webkit-transform-origin: top 50%;
	-moz-transform-origin: top 50%;
	-ms-transform-origin: top 50%;
	-o-transform-origin: top 50%;
	transform-origin: top 50%;
	-webkit-transform: rotateX(-90deg) scale(0.97);
	-moz-transform: rotateX(-90deg) scale(0.97);
	-ms-transform: rotateX(-90deg) scale(0.97);
	-o-transform: rotateX(-90deg) scale(0.97);
	transform: rotateX(-90deg) scale(0.97);
	position: relative;
	overflow: hidden;
	background-color: #48665c;
	}
	#menu li:nth-child(odd) a {
	-webkit-box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.5);
	-webkit-transform: rotateX(90deg) scale(0.97);
	-moz-transform: rotateX(90deg) scale(0.97);
	-ms-transform: rotateX(90deg) scale(0.97);
	-o-transform: rotateX(90deg) scale(0.97);
	transform: rotateX(90deg) scale(0.97);
	}
	#menu li.active a:before, #menu li a:hover:before {
	opacity: 1;
	}
	#menu li a:hover:before {
	color: #689384;
	}
	#menu li.active a:before, #menu li.active a:hover:before {
	color: #fff;
	}
	#menu:target, #menu.target {
	margin-top: 0;
	}
	#menu:target li, #menu.target li {
	max-height: 2.5em;
	height: auto;
	}
	#menu:target li a, #menu.target li a {
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
	-moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
	-webkit-transform: rotateX(0) scale(1);
	-moz-transform: rotateX(0) scale(1);
	-ms-transform: rotateX(0) scale(1);
	-o-transform: rotateX(0) scale(1);
	transform: rotateX(0) scale(1);
	}
	}
	@media only screen and (min-width: 769px) {
	[class^="icon-"]:before,
	[class*=" icon-"]:before {
	display: block;
	text-align: center;
	margin-right: 0;
	}

	#access a.skip-link {
	display: none;
	}

	#menu {
	width: 100%;
	background: #689384;
	text-align: center;
	}
	#menu li {
	display: -moz-inline-box;
	-moz-box-orient: vertical;
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	white-space: nowrap;
	}
	#menu li {
	*display: inline;
	}
	#menu li a:before {
	-webkit-transition: -webkit-transform 500ms ease-in;
	-moz-transition: -moz-transform 500ms ease-in;
	-ms-transition: -ms-transform 500ms ease-in;
	-o-transition: -o-transform 500ms ease-in;
	transition: transform 500ms ease-in;
	}
	#menu li a:hover:before {
	-webkit-transform: translateY(1em) scale(3) rotate(15deg);
	-moz-transform: translateY(1em) scale(3) rotate(15deg);
	-ms-transform: translateY(1em) scale(3) rotate(15deg);
	-o-transform: translateY(1em) scale(3) rotate(15deg);
	transform: translateY(1em) scale(3) rotate(15deg);
	}
	}
	</style>

	<style>
	#codepen-footer, #codepen-footer * {
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	}
	#codepen-footer {
	display: block !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	padding: 0 10px !important;
	margin: 0 !important;
	height: 30px !important;
	line-height: 30px !important;
	font-size: 12px !important;
	color: #eeeeee !important;
	background-color: #505050 !important;
	text-align: left !important;
	background: -webkit-linear-gradient(top, #505050, #383838) !important;
	background: -moz-linear-gradient(top, #505050, #383838) !important;
	background: -ms-linear-gradient(top, #505050, #383838) !important;
	background: -o-linear-gradient(top, #505050, #383838) !important;
	border-top: 1px solid black !important;
	border-bottom: 1px solid black !important;
	border-radius: 0 !important;
	border-image: none !important;
	box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
	z-index: 300 !important;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	}
	#codepen-footer a {
	color: #a7a7a7 !important;
	text-decoration: none !important;
	}
	#codepen-footer a:hover {
	color: white !important;
	}
	</style>
	<script>
	// Kill alerts, confirmations and prompts
	window.alert = function(){};
	window.confirm = function(){};
	window.prompt = function(){};
	window.open = function(){};
	window.print = function(){};
	</script>

	</head>
	<body>

	<div id="wrapper">
	<nav role="navigation" id="access">
	<a class="skip-link icon-reorder" title="Accéder au menu" href="#menu">Menu</a>
	<ul id="menu">
	<li class="active"><a class="icon-home" href="#accueil">Home</a></li><!-- whitespace
	--><li><a class="icon-group" href="#quisommesnous">About Us</a></li><!-- whitespace
	--><li><a class="icon-leaf" href="#services">Services</a></li><!-- whitespace
	--><li><a class="icon-picture" href="#portfolio">Portfolio</a></li><!-- whitespace
	--><li><a class="icon-envelope-alt" href="#contact">Contact</a></li>
	</ul>
	</nav>
	</div>

	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<script>
	(function() {

	;(function($) {
	"use strict";
	$(document).ready(function() {
	$('#access').on('touchstart click', '.skip-link', function(event) {
	$(this).toggleClass('focus');
	$($(this).attr('href')).toggleClass('target');
	event.preventDefault();
	}).find('.skip-link').append('<span>'+$('#menu .active').text()+'</span>');
	});
	})(jQuery);

	})();
	</script>

	<div id="codepen-footer">
	<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>



	<a href="/clearideaz/pen/clearnav/5">Edit this Pen</a>
	</div>

	</body>

	</html>