adaminfinitum/index.html

## 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>

## 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);

## 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>

## 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>