@charset "UTF-8";
/*
	basics
*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

@font-face {
  font-family: 'grotesk-medium';
  src: url("../fonts/grotesk-webfont.eot");
  src: url("../fonts/grotesk-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/grotesk-webfont.woff2") format("woff2"), url("../fonts/grotesk-webfont.woff") format("woff"), url("../fonts/grotesk-webfont.ttf") format("truetype"), url("../fonts/grotesk-webfont.svg#baron_neue_italicitalic") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*
	colors
*/
/* 
 * Heads-Up Grid
 * Simple HTML + CSS grid overlay for web design and development.
 *
 * Files: hugrid.css, hugrid.js, example.html
 * 
 * Example and documentation at: http://bohemianalps.com/tools/grid
 * 
 * Shurane, thanks for your help! https://github.com/shurane
 * 
 * Copyright (c) 2011 Jason Simanek
 *
 * Version: 1.5 (09/03/2011)
 * Requires: jQuery v1.6+
 *
 * Licensed under the GPL license:
 *   http://www.gnu.org/licenses/gpl.html
*/
/* Default Heads-Up Grid Properties - These will be overwritten by the values entered in the document.ready function. */
#hugrid {
  width: 960px;
  /* width of webpage */
  margin-left: -480px;
  /* to center the grid, set half of webpage width as negative value */
}

#hugrid div {
  margin-left: 140px;
  /* width of column */
  width: 24px;
  /* width of column gutter */
}

/* Default Heads-Up Grid Styles - These styles allow you to change the color and style of the lines that make the Heads-Up Grid */
#hugrid div div {
  border-color: #FF00EB;
  /* color of grid line */
  border-style: solid;
  /* style of grid line (dotted, dashed, solid) */
  opacity: 0.3;
  /*opacity of grid line */
}

#hugrid div:hover {
  background-color: #36F3FF;
  /* color of gutter on :hover */
}

#hugrid div.mline {
  border-color: #AA82FF;
  /* color of margin line */
  border-style: solid;
  /* style of margin lines (dotted, dashed, solid) */
}

#hugridRows {
  border-color: #AA82FF;
  /* color of top margin line */
  border-style: solid;
  /* style of top margin line */
}

#hugridRows div.lineB {
  border-color: #5DFF35;
  /* color of row line */
  border-style: solid;
  /* style of row line */
  opacity: 0.3;
  /*opacity of row line */
}

#hugridRows div.lineB:hover {
  border-color: #5DFF35;
  /* color of row line on :hover */
  border-style: solid;
  /* style of row line on :hover */
  opacity: 1.0;
  /*opacity of row line on :hover */
}

/* ------------------------------------------------------------------------- */
/* Fixed Styles (No need to alter the below styles for standard grid needs.) */
#hugrid {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 50%;
  height: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  cursor: crosshair;
}

#hugrid div {
  display: block;
  float: left;
  position: relative;
  top: 0;
  border-width: 0;
}

#hugrid div div {
  margin: 0;
  width: 0;
}

#hugrid div div.lineL {
  float: left;
  height: 10000px;
  border-width: 0 0 0 1px;
}

#hugrid div div.lineR {
  float: right;
  height: 10000px;
  border-width: 0 1px 0 0;
}

#hugrid div.mline {
  margin: 0 0 0 -1px;
  width: 0;
  height: 100000px;
}

#hugrid div.mlineL {
  border-width: 0 1px 0 0;
}

#hugrid div.mlineR {
  float: right;
  margin-right: -1px;
  border-width: 0 0 0 1px;
}

#hugrid div:hover {
  opacity: 0.5;
}

#hugrid div:hover div.lineL,
#hugrid div:hover div.lineR {
  border-style: solid;
  opacity: 1.0;
}

#hugridRows {
  position: absolute;
  z-index: 90000;
  top: -1px;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border-width: 1px 0 0 0;
  cursor: crosshair;
}

#hugridRows div {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
}

#hugridRows div div.lineB {
  margin: 0;
  border-width: 0 0 1px 0;
}

#hugridUX {
  display: block;
  position: fixed;
  z-index: 200000;
  top: 0;
  left: 0;
  margin: 0;
  padding: 4px;
  font: 600 11px/100% "Futura Pt", Arial,sans-serif;
  color: #AAA;
  text-align: center;
}

#hugridUX div#hugridButtonBkgd {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 0 0 16px 0px;
  opacity: 1;
}

#hugridUX button#hugridButton {
  cursor: pointer;
  position: relative;
  width: 28px;
  margin: 0;
  padding: 8px 2px;
  background-color: #fff;
  border-radius: 40px;
  border-width: 0;
  box-shadow: 0 0 0px #666;
  outline: 0;
  font: 600 11px/100% "futura-pt", Arial,sans-serif;
  border: none;
}

#hugridUX button#hugridButton::-moz-focus-inner {
  border: 0;
}

#hugridUX button#hugridButton.buttonisoff {
  background: none;
  box-shadow: none;
}

#hugridUX button#hugridButton.buttonisoff:hover {
  background-color: #fff;
}

#hugbuttonON {
  color: #333;
}

#hugbuttonOFF {
  color: #333;
}

/*
------------------------------

	
	$media queries

------------------------------
*/
@media (min-width: 1600px) {
  section.intro-checkerspot,
  section.cover-storytelling {
    background-size: 100% auto;
  }

  ul.ul-other-works li {
    background-size: 100% auto;
  }

  section.intro-checkerspot,
  section.cover-storytelling {
    background-size: 100% auto;
  }

  section.cover-reductionism {
    background-size: 100% auto;
  }

  /*
  	Menu fixe
  */
  h1 {
    display: block;
    position: absolute;
    left: 10%;
    top: 27px;
    width: 400px;
    height: 60px;
    line-height: 60px;
    z-index: 10;
  }

  nav {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
    right: 10%;
  }

  nav ul {
    position: absolute;
    right: 0px;
    padding-top: 27px;
  }
}
/*
	End (min-width: 1600px)
*/
@media (min-width: 1200px) {
  section.intro-checkerspot,
  section.cover-storytelling,
  section.cover-reductionism {
    background-size: 100% auto;
    background-position: top center;
  }
}
/*
	End (min-width: 1200px)
*/
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1100px), (min-resolution: 2dppx) and (min-width: 1100px) {
  section.intro-checkerspot,
  section.cover-storytelling {
    background-size: 100% auto;
  }
}
/*
	End (min-resolution: 144dpi) and (min-width: 1100px)
*/
@media (max-width: 1200px) {
  /*
  	Index
  */
  section.index-intro {
    width: 90%;
    padding: 5%;
    left: 0px;
    margin: 0 auto;
    z-index: 1;
  }

  section.index-intro {
    position: fixed;
    margin-top: 350px;
    top: 0;
  }

  .index-intro h2, .index-intro h3 {
    font-weight: 600;
    position: relative;
    left: 0;
  }

  .index-pic-intro {
    padding-top: 0vh;
    margin-top: 100vh;
    height: 100vh;
    width: 100%;
    background: #fff url("../img/index/photo-blanc-crop.jpg");
    background-repeat: no-repeat;
    background-position: bottom right;
    /*
    	Allow the image to not be center
    	But cause an issue on 13"
    	background-size: auto 100%;
    */
  }

  img.pic-index-rom {
    display: none;
  }

  section.suite {
    padding-top: 100px;
  }

  article.art-news {
    position: relative;
    margin: 0 auto;
    left: 0;
    width: 654px;
    height: 480px;
  }

  /*
  	Case studies
  */
  section.sec-case-studies p,
  section.sec-other-works p {
    width: 60%;
  }

  /*
  	Checkerspot
  */
  section.approche {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  section.concept {
    width: 100%;
    margin-top: 0;
  }

  section.concept img.pic-school-03 {
    width: 100%;
    margin-bottom: 0;
  }

  section.concept .concept-txt-2 {
    width: 100%;
    overflow: hidden;
    margin-top: 0;
  }

  section.concept .concept-txt-2 img {
    display: none;
  }

  section.concept .concept-txt-2 p {
    float: none;
    width: 654px;
  }

  section.maquette {
    width: 100%;
  }

  section.maquette .maquette-login img {
    width: 654px;
    margin: 0 auto;
    position: static;
  }

  section.maquette .maquette-login .login-croquis {
    margin-top: 0;
  }

  section.maquette .maquette-login .p-croquis {
    display: block;
    width: 654px;
    position: static;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  section.maquette .maquette-login p.after-pics-login {
    float: none;
    width: 654px;
    margin: 0 auto;
    position: relative;
    margin-top: 100px;
    padding-right: 0;
  }

  p.after-pics-login a {
    text-decoration: underline;
  }

  section.maquette .maquette-login .pics-login-final {
    width: 100%;
    position: relative;
  }

  section.maquette .maquette-login .pics-login-final img {
    float: none;
    width: 400px;
    display: block;
    position: static;
    left: 0;
    margin: 0 auto;
    margin-top: 50px;
  }

  section.maquette .maquette-content {
    margin-top: 50px;
  }

  section.maquette .maquette-content .pics-croquis img {
    width: 100%;
    height: auto;
  }

  section.maquette .maquette-content .pics-croquis img:last-child {
    display: none;
  }

  section.wrong-road {
    margin-top: 30px;
  }

  .wrong-road-in {
    width: 100%;
    margin: 0 auto;
  }

  .wrong-road-pics {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 50px;
  }

  section.user-test {
    width: 100%;
  }

  section.user-test .user-test-pics img {
    width: 100%;
    height: auto;
  }

  section.user-test .user-test-pics img:first-child {
    display: none;
  }

  section.refocus {
    width: 100%;
  }

  section.publication {
    width: 100%;
  }

  section.publication .publication-txt {
    width: 100%;
  }

  section.publication p {
    position: static;
  }

  section.publication .publication-txt p:nth-child(2) {
    width: 654px;
    margin: 0 auto;
    float: none;
  }

  section.publication img:nth-child(3) {
    float: none;
    display: block;
    position: static;
    margin: 0 auto;
    margin-top: 30px;
  }

  section.publication .publication-txt p:nth-child(4) {
    clear: both;
    width: 654px;
    margin: 0 auto;
    margin-top: 100px;
    float: none;
  }

  section.publication img:nth-child(5) {
    float: none;
    display: block;
    position: static;
    margin: 0 auto;
    margin-top: 30px;
  }

  section.aspect {
    width: 100%;
    margin-top: 100px;
  }

  section.presentation {
    overflow: hidden;
  }

  section.presentation img {
    height: 1000px;
    width: auto;
    position: relative;
    left: -400px;
  }

  section.presentation .presentation-txt {
    z-index: 100;
  }

  section.conclusion {
    width: 100%;
    margin-top: 100px;
  }

  /*
  	Composition email
  */
  section.intro-email {
    width: 100%;
  }

  section.approche-email {
    width: 100%;
    overflow: hidden;
  }

  section.approche-email h4,
  section.approche-email h4.title-need {
    float: none;
    text-align: left;
    height: auto;
  }

  section.approche-email h4:after,
  section.approche-email h4.title-need:after {
    display: none;
  }

  section.approche-email .approche-email-txt {
    clear: both;
    width: 654px;
    margin: 0 auto;
  }

  section.approche-email .approche-email-txt-in {
    margin-top: 0;
  }

  section.approche-email .we-need {
    display: block;
    clear: both;
    width: 654px;
    margin: 0 auto;
    margin-bottom: 50px;
  }

  section.approche-email .we-need p {
    width: 654px;
    margin: 0 auto;
  }

  section.approche-email .schema-1,
  section.approche-email .schema-2 {
    width: 50%;
    position: relative;
    margin: 0 auto;
    left: 20%;
  }

  section.approche-email .schema-1 {
    float: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 50px;
  }

  section.approche-email .schema-2 {
    float: none;
  }

  section.approche-email p.concl-approche-email {
    margin-top: 50px;
  }

  section.concept-email {
    width: 100%;
  }

  section.concept-email .concept-email-txt {
    width: 100%;
  }

  section.concept-email img {
    display: block;
    margin-top: 40px;
    width: 400px;
  }

  section.concept-email img:nth-child(4) {
    float: none;
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
    margin-right: auto;
  }

  section.concept-email img:nth-child(5) {
    float: none;
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
    margin-right: auto;
  }

  section.concept-email img:nth-child(7) {
    float: none;
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
    margin-right: auto;
  }

  section.concept-email p:nth-child(8) {
    position: relative;
    margin-top: 00px;
    width: 654px;
    margin: 0 auto;
    left: auto;
  }

  section.concept-email .concept-email-txt p:last-child {
    margin-top: 50px;
  }

  section.detail-email {
    width: 100%;
  }

  /*
  	Reductionnisme
  */
  section.cover-reductionism {
    float: none;
    width: auto;
    height: 800px;
    background-position: center center;
  }

  section.intro-reductionism .reduc-exo-bonus,
  section.intro-reductionism-sw .reduc-exo-bonus {
    width: 100%;
  }

  section.reductionism-show,
  section.reductionism-sw-show {
    width: 100%;
  }

  section.reductionism-show ul li img,
  section.reductionism-sw-show ul li img {
    display: block;
    float: none;
    width: 654px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  section.reductionism-show ul li:nth-child(odd) img,
  section.reductionism-sw-show ul li:nth-child(odd) img {
    margin-right: auto;
  }

  /*
  	Storytelling
  */
  section.cover-storytelling {
    float: none;
    width: auto;
    height: 800px;
    background-position: center center;
  }

  section.intro-storytelling {
    width: 100%;
  }

  .storytelling-and-wd-txt {
    width: 654px;
    float: none;
    margin: 0 auto;
    z-index: 10;
  }

  .storytelling-and-wd-txt p,
  .storytelling-and-wd-txt h2 {
    width: 654px;
    margin: 0 auto;
  }

  .storytelling-and-wd-txt h2 {
    margin-top: 50px;
  }

  .storytelling-and-wd img {
    float: none;
    width: 654px;
    display: block;
    margin: 0 auto;
  }

  .storytelling-why-why-txt {
    width: 654px;
    float: none;
    margin: 0 auto;
    z-index: 10;
  }

  .storytelling-why-why-txt p,
  .storytelling-why-why-txt h2 {
    width: 654px;
    margin: 0 auto;
  }

  .storytelling-why-why-txt p {
    margin-bottom: 30px;
  }

  .storytelling-why-why-txt h2 {
    margin-top: 100px;
    margin-bottom: 40px;
  }

  .storytelling-why-why img {
    float: none;
    width: 654px;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
  }

  .storytelling section.story {
    width: 90%;
  }

  .storytelling section.story img {
    width: 100%;
  }

  .storytelling section.story img.story-cover {
    display: inline;
    width: 50%;
    margin: 0 auto;
    margin-bottom: 10px;
    float: left;
  }

  /*
  	Icons
  */
  .icons-pirates section.icons-pics img:last-child {
    width: 100%;
  }

  /*
  	Contact
  */
  .contact section.contact-infos {
    width: 100%;
  }

  .contact section.contact-infos p {
    width: 654px;
    margin: 0 auto;
    margin-bottom: 100px;
  }

  /*
  	Credits
  */
  .cover-credits {
    height: 800px;
    background-size: auto 100%;
  }

  .cover-credits h2 {
    text-align: center;
    position: relative;
    padding-top: 230px;
    color: #80ffbf;
  }

  .cover-credits h2 strong.merci {
    display: block;
    margin-top: 80px;
    font-size: 350px;
    font-weight: inherit;
  }

  section.thx-humans {
    padding-top: 107px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
  }

  section.thx-humans .thx-humans-txt {
    padding-top: 0px;
    width: 654px;
    margin: 0 auto;
    margin-bottom: 50px;
    float: none;
  }

  section.thx-humans img {
    display: block;
    width: 654px;
    position: relative;
    margin: 0 auto;
    float: none;
  }
}
/*
	End (max-width: 1200px)
*/
@media (max-width: 1100px) {
  ul.ul-case-studies li {
    height: 450px;
    background-size: auto 100%;
    background-position: left auto;
  }
}
/*
	End (max-width: 1100px)
*/
@media (max-width: 950px) {
  /*
  	A propos
  */
  .body-a-propos {
    background: #fff;
  }

  .a-propos header h1 a,
  .a-propos header nav ul li a {
    color: #333;
  }

  section.ma-vie {
    padding-top: 0px;
  }

  section.ma-vie img {
    display: none;
  }

  section.ma-vie .ma-vie-txt {
    width: 100%;
    margin-bottom: 50px;
    padding-top: 293px;
    padding-bottom: 0px;
  }
}
/*
	End (max-width: 950px)
*/
@media (max-width: 900px) {
  /*
  	Commons
  */
  body {
    background: rgba(0, 0, 255, 0);
  }

  header {
    height: 110px;
  }

  h1 {
    width: 100%;
    float: none;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
    font-size: 28px;
  }

  nav {
    position: relative;
    width: 100%;
    height: 50px;
    margin-top: 0px;
    float: none;
    left: 0;
  }

  nav ul {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
  }

  nav ul li {
    float: left;
    width: 25%;
  }

  nav ul li a {
    display: block;
    height: 50px;
    line-height: 50px;
    width: 100%;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    position: relative;
    font-size: 22px;
  }

  /*
  	Case studies
  */
  section.sec-case-studies p,
  section.sec-other-works p {
    width: 90%;
  }

  ul.ul-other-works li {
    float: none;
    width: 100%;
    background-size: 100% auto;
  }

  section.sec-other-works {
    margin-top: 100px;
    margin-bottom: 0;
  }

  section.intro-checkerspot {
    height: 900px;
  }

  section .intro-checkerspot-txt {
    left: 5%;
    width: 90%;
  }

  section.approche .approche-txt {
    width: 100%;
  }

  section.approche .approche-txt p {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  section.approche img {
    width: 100%;
    position: relative;
  }

  section.approche .link-post-it-container {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 488px;
    margin: 0 auto;
    position: relative;
    bottom: 0px;
    background: transparent;
    left: 0;
    opacity: 1;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  section.approche a {
    position: relative;
    color: #333;
    margin: 0 auto;
    border: 3px solid #333;
    background: #fff;
  }

  section.approche a:hover {
    color: #fff;
    border-color: #333;
    background: #333;
  }

  section.concept .concept-txt-1,
  section.concept .concept-txt-2 {
    width: 100%;
  }

  section.concept p {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  section.concept .concept-pic-1 {
    width: 100%;
    height: 500px;
  }

  section.concept p.eti-pic-heaj {
    width: 80%;
    top: 20%;
    left: 0;
    margin: 0 auto;
  }

  section.concept .concept-txt-2 p {
    float: none;
    width: 90%;
  }

  section.maquette .maquette-txt {
    width: 90%;
    margin: 0 auto;
  }

  section.maquette .maquette-login img {
    width: 100%;
  }

  section.maquette .maquette-login .p-croquis {
    width: 90%;
  }

  section.maquette .maquette-login p.before-pics-login {
    width: 90%;
  }

  section.maquette .maquette-login .pics-login img {
    width: 33.33332%;
    float: left;
  }

  section.maquette .maquette-login .pics-login img:nth-child(1),
  section.maquette .maquette-login .pics-login img:nth-child(2) {
    display: none;
  }

  section.maquette .maquette-login p.after-pics-login {
    float: none;
    width: 654px;
    margin: 0 auto;
    position: relative;
    margin-top: 50px;
    padding-right: 0;
  }

  section.maquette .maquette-login p.after-pics-login {
    width: 90%;
  }

  section.maquette .maquette-content p {
    width: 90%;
  }

  .wrong-road-in .wrong-road-txt {
    width: 90%;
    margin: 0 auto;
  }

  .wrong-road-pics img {
    width: 33.33332%;
  }

  .wrong-road-pics img:nth-child(3),
  .wrong-road-pics img:nth-child(4) {
    display: none;
  }

  section.user-test .user-test-txt {
    width: 90%;
  }

  section.refocus .refocus-txt {
    width: 90%;
  }

  section.publication .publication-txt p:nth-child(2) {
    width: 90%;
  }

  section.publication .publication-txt p:nth-child(4) {
    width: 90%;
  }

  section.aspect .aspect-txt {
    width: 90%;
  }

  /*
  	Conclusion
  */
  section.conclusion .conclusion-txt {
    width: 90%;
  }

  /*
  	Composition email
  */
  section .intro-email-txt {
    width: 90%;
  }

  section.approche-email .approche-email-txt {
    clear: both;
    width: 100%;
    margin: 0 auto;
  }

  section.approche-email .approche-email-txt {
    width: 90%;
  }

  section.approche-email .approche-email-txt-in {
    width: 100%;
    float: none;
  }

  section.approche-email .approche-email-txt-in p:last-child {
    clear: both;
  }

  section.approche-email .we-need p {
    width: 90%;
  }

  section.approche-email .we-need {
    display: block;
    clear: both;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 50px;
  }

  section.approche-email .we-need p {
    width: 100%;
    margin: 0 auto;
  }

  section.approche-email p.concl-approche-email {
    width: 90%;
  }

  section.concept-email p {
    width: 90%;
  }

  section.concept-email p:nth-child(8) {
    width: 90%;
  }

  section.detail-email img {
    width: 100%;
  }

  section.detail-email .detail-email-txt {
    width: 90%;
  }

  section.intro-reductionism .intro-reductionism-txt,
  section.intro-reductionism-sw .intro-reductionism-sw-txt {
    width: 90%;
  }

  /*
  	Storytelling
  */
  section.cover-storytelling {
    height: 600px;
  }

  section.intro-storytelling .intro-storytelling-txt {
    width: 90%;
  }

  .storytelling-and-wd-txt {
    width: 100%;
    float: none;
    margin: 0 auto;
    z-index: 10;
  }

  .storytelling-and-wd-txt p,
  .storytelling-and-wd-txt h2 {
    width: 90%;
    margin: 0 auto;
  }

  .storytelling-and-wd-txt h2 {
    margin-top: 50px;
  }

  .storytelling-and-wd img {
    float: none;
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  .storytelling-why-why-txt {
    width: 100%;
    float: none;
    margin: 0 auto;
    z-index: 10;
  }

  .storytelling-why-why-txt p,
  .storytelling-why-why-txt h2 {
    width: 90%;
    margin: 0 auto;
  }

  .storytelling-why-why-txt p {
    margin-bottom: 30px;
  }

  .storytelling-why-why-txt h2 {
    margin-top: 100px;
    margin-bottom: 40px;
  }

  .storytelling-why-why img {
    float: none;
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
  }

  .storytelling section.story {
    width: 100%;
  }

  /*
  	Icons
  */
  .icons-pirates section.intro-icons p {
    width: 90%;
  }

  /*
  	Credits
  */
  .cover-credits {
    height: 700px;
  }

  .cover-credits h2 {
    text-align: center;
    position: relative;
    padding-top: 230px;
    color: #80ffbf;
  }

  .cover-credits h2 strong.merci {
    display: block;
    margin-top: 80px;
    font-size: 250px;
    font-weight: inherit;
  }

  section.thx-humans {
    padding-top: 107px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
  }

  section.thx-humans .thx-humans-txt {
    padding-top: 0px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 50px;
    float: none;
  }

  section.thx-humans img {
    display: block;
    width: 100%;
    position: relative;
    margin: 0 auto;
    float: none;
  }

  section.thx-others {
    width: 90%;
    padding: 5%;
    padding-top: 80px;
    overflow: hidden;
  }

  section.thx-others ul {
    display: block;
    position: relative;
    line-height: 64px;
    width: 100%;
    left: auto;
    margin: 0 auto;
  }

  .credits section.thx-others ul li {
    list-style: disc;
    list-style-position: inside;
  }

  /*
  	A propos
  */
  section.ma-vie .ma-vie-txt p {
    width: 90%;
  }

  section.ma-vie .ma-vie-txt img {
    margin-top: 50px;
    width: 100%;
  }
}
/*
	End (max-width: 900px)
*/
@media (max-width: 750px) {
  /*
  	Index
  */
  .index-intro h2 span {
    font-size: 34px;
    line-height: 40px;
  }

  article.art-news {
    width: 90%;
    height: auto;
  }

  section.index-intro {
    position: fixed;
    margin-top: 200px;
    top: 0;
    z-index: 0;
  }

  section.index-intro h2,
  section.index-intro h3 {
    font-size: 18px;
  }

  .my-index footer a {
    z-index: 20;
    background: #fff;
  }

  /*
  	checkerspot
  */
  section.concept img.pic-school-01 {
    display: none;
  }

  section.concept p.eti-pic-heaj {
    width: 90%;
    padding: 5%;
    top: 0;
    left: 0;
    margin: 0 auto;
  }

  section.concept .concept-pic-1 {
    width: 100%;
    height: 270px;
  }

  section.presentation img {
    display: none;
  }

  section.presentation .presentation-txt {
    position: relative;
    width: 100%;
    padding: 0;
    left: 0;
    margin-bottom: 200px;
  }

  section.presentation .presentation-txt p {
    width: 90%;
    margin: 0 auto;
  }

  section.presentation a.link-pres-check {
    margin-top: 50px;
  }

  section.conclusion ul {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 100px;
  }

  section.conclusion ul li {
    float: none;
  }

  section.conclusion ul li a {
    margin: 0 auto;
    margin-bottom: 20px;
  }

  section.conclusion ul li:first-child a {
    margin: 0 auto;
    margin-bottom: 20px;
  }

  section.approche-email .schema-1,
  section.approche-email .schema-2 {
    width: 80%;
    left: 10%;
  }

  /*
  	Reductionnisme
  */
  section.reductionism-show ul li img,
  section.reductionism-sw-show ul li img {
    width: 100%;
  }

  section.intro-reductionism-sw h2 {
    width: 100%;
    line-height: 140%;
    height: 100px;
  }

  section.intro-reductionism-sw h2:after {
    display: none;
    bottom: 0px;
  }

  /*
  	Storytelling
  */
  section.cover-storytelling {
    height: 500px;
  }

  /*
  	Contact
  */
  .contact section.contact-infos ul li {
    text-align: center;
    margin: 100px auto;
    font-size: 22px;
  }

  form {
    width: 100%;
    margin: auto;
    margin-bottom: 100px;
  }

  input {
    display: block;
    width: 90%;
    margin: 30px auto;
  }

  #message {
    display: block;
    margin: 0 auto;
    width: 90%;
  }

  #button {
    width: 90%;
  }

  .errors-display {
    width: 100%;
    margin: 0 auto;
    height: 100px;
  }

  /*
  	Credits
  */
  .cover-credits h2 {
    padding-top: 230px;
  }

  .cover-credits h2 strong.merci {
    margin-top: 60px;
    font-size: 200px;
  }

  /*
  	404
  */
  section.qcq-msg p {
    width: 90%;
  }

  /*
  	Mentions légales
  */
  section.confid-rules {
    min-height: 700px;
  }

  section.confid-rules h2 {
    font-size: 22px;
    width: 300px;
  }

  section.confid-rules p {
    width: 90%;
  }
}
/*
	End (max-width: 750px)
*/
@media (max-width: 600px) {
  header {
    z-index: 0;
  }

  /*
  	index
  */
  .index-pic-intro {
    background-position: 75% center;
  }

  section.suite {
    padding-top: 50px;
    font-size: 18px;
  }

  /*
  	works
  */
  ul.ul-other-works li {
    float: none;
    width: 100%;
    background-size: auto 100%;
    background-position: left;
  }

  ul.ul-case-studies li .titles-case-studies {
    position: relative;
    left: 0;
    margin: 0 auto;
  }

  ul.ul-case-studies li h4 {
    margin: 0 auto;
    width: 80%;
  }

  /*
  	Checkerspot
  */
  .cs-checkerspot section h3 {
    font-size: 22px;
    line-height: 140%;
  }

  /*
  	Composition email
  */
  .cs-email section h2 {
    line-height: 140%;
    margin-bottom: 80px;
  }

  .cs-email section h2:after {
    display: none;
  }

  /*
  	Reductionnisme
  */
  section.intro-reductionism .reduc-exo-bonus ul,
  section.intro-reductionism-sw .reduc-exo-bonus ul {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  section.intro-reductionism .reduc-exo-bonus ul li,
  section.intro-reductionism-sw .reduc-exo-bonus ul li {
    float: none;
    margin: 0 auto;
  }

  section.intro-reductionism .reduc-exo-bonus ul li a,
  section.intro-reductionism-sw .reduc-exo-bonus ul li a {
    display: block;
    position: relative;
    width: 270px;
    text-align: center;
    margin: 0 auto;
    margin-right: auto;
  }

  section.intro-reductionism .reduc-exo-bonus ul li:last-child a,
  section.intro-reductionism-sw .reduc-exo-bonus ul li:last-child a {
    margin-right: auto;
  }

  section.reductionism-show,
  section.reductionism-sw-show {
    margin-top: 100px;
  }

  /*
  	Storytelling
  */
  .storytelling-why-why-txt p:nth-child(2) {
    margin-top: 150px;
  }

  .storytelling section.story img.story-cover {
    display: inline;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    float: none;
  }

  /*
  	Credits
  */
  .cover-credits {
    height: 650px;
  }

  .cover-credits h2 {
    padding-top: 230px;
  }

  .cover-credits h2 strong.merci {
    margin-top: 60px;
    font-size: 150px;
  }

  /*
  	A propos
  */
  section.ma-vie .ma-vie-txt .pic-nbr ul {
    right: 150px;
  }

  section.ma-vie .ma-vie-txt .pic-nbr ul li {
    font-size: 22px;
  }

  /*
  	Footer
  */
  footer a.foot-link-tw {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 100%;
    left: 0;
    text-align: center;
    text-transform: lowercase;
  }

  footer ul {
    width: 100%;
  }

  footer ul li {
    width: 50%;
    text-align: center;
  }

  footer ul li a {
    display: block;
    width: 100%;
    right: 0;
    text-align: center;
  }

  footer ul {
    right: 0;
  }

  footer ul li a:after {
    content: "";
    width: 15px;
    border-bottom: 3px dotted transparent;
    position: absolute;
    bottom: 30px;
    left: calc(50% - 7px);
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
  }

  footer ul li a.active:after {
    content: "";
    width: 20px;
    border-bottom: 3px solid #80ffbf;
    position: absolute;
    bottom: 30px;
    left: calc(50% - 10px);
  }
}
/*
	End (max-width: 600px)
*/
@media (max-width: 500px) {
  nav ul {
    width: 100%;
  }

  nav ul li a {
    font-size: 16px;
  }
}
/*
	End (max-width: 500px)
*/
@media (max-width: 450px) {
  nav ul {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  nav ul li {
    width: 25%;
  }

  nav ul li a {
    width: 100%;
  }

  /*
  	Checkerspot
  */
  section.presentation video {
    display: none;
  }
}
/*
	End (max-width: 450px)
*/
@media (max-width: 400px) {
  section.maquette .maquette-login .pics-login-final img {
    width: 100%;
  }

  section.publication img:nth-child(3) {
    width: 100%;
  }

  section.publication img:nth-child(5) {
    width: 100%;
  }

  section.concept-email img:nth-child(4),
  section.concept-email img:nth-child(5),
  section.concept-email img:nth-child(7) {
    width: 100%;
  }

  /*
  	Credits
  */
  .cover-credits {
    height: 650px;
  }

  .cover-credits h2 {
    padding-top: 230px;
  }

  .cover-credits h2 strong.merci {
    margin-top: 60px;
    font-size: 100px;
  }
}
/*
	End (max-width: 400px)
*/
@media (max-height: 700px) {
  .error-qcq footer,
  .error-qcq header {
    position: absolute;
  }

  section.qcq-msg {
    margin-top: 130px;
    position: absolute;
  }

  p.binary {
    display: none;
  }
}
/*
	End (max-height: 700px)
*/
/*
	Grille
*/
/*
------------------------------
	
	$landings-pages

------------------------------
*/
/*
------------------------------
	
	$prospek

------------------------------
*/
.lp-prospek h1,
.lp-prospek nav {
  font-family: "Futura Pt", "futura-pt", "Futura", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  font-weight: 600;
  color: #fff;
}

.lp-prospek a {
  text-decoration: none;
}

.lp-prospek p {
  margin-bottom: 50px;
}

.lp-prospek h1 a,
.lp-prospek nav ul li a {
  color: #fff;
}

section.intro-lp-prospek {
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: url("../img/landing/accueil-prospek.jpg");
  background-size: auto 100%;
  position: absolute;
  top: 0;
}

section.intro-lp-prospek h2 {
  text-align: center;
  font-size: 34px;
  margin: 0 auto;
  margin-bottom: 50px;
  width: 250px;
  height: 50px;
  background-image: url("../img/checkerspot/nav-border-in.svg");
  background-size: 25px 3px;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 50% 40px;
}

.intro-prospek-txt {
  width: 654px;
  padding: 50px 10px;
  margin: 0 auto;
  position: relative;
  top: 20%;
  color: #fff;
}

.intro-prospek-txt p {
  width: 654px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-weight: 500;
}

.intro-prospek-txt p a {
  color: inherit;
}

.intro-prospek-txt a.prospek-works {
  display: block;
  margin: 0 auto;
  width: 150px;
  border: 3px solid #fff;
  color: #fff;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.intro-prospek-txt a.prospek-works:hover {
  background: #fff;
  color: #333;
}

/*

	Prospek - about

*/
section.lp-prospek-about {
  margin-top: 100vh;
  padding-top: 200px;
  position: relative;
}

.prospek-about-txt {
  width: 600px;
  height: 900px;
  float: right;
  padding-top: 0px;
  padding-top: 60px;
}

.lp-prospek-about .prospek-about-txt p {
  width: 80%;
  margin-bottom: 30px;
}

.lp-prospek-about .prospek-about-txt h3 {
  margin-left: 10%;
  text-align: left;
}

.lp-prospek-about .prospek-about-txt img {
  float: left;
}

.lp-prospek-about,
.lp-prospek-rc,
.lp-prospek-design,
.lp-prospek-code {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.lp-prospek-about h3,
.lp-prospek-rc h3,
.lp-prospek-design h3,
.lp-prospek-code h3 {
  font-family: "Futura Pt", "futura-pt", "Futura", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  text-align: center;
  margin-bottom: 30px;
}

.lp-prospek-about p,
.lp-prospek-rc p,
.lp-prospek-design p,
.lp-prospek-code p {
  margin: 0 auto;
  font-family: "Adobe Caslon Pro", "adobe-caslon-pro", "Garamond", "Georgia", "Times New Roman", "serif";
  line-height: 32px;
  font-weight: 400;
}

.lp-prospek-rc {
  width: 654px;
  margin: 0 auto;
  margin-top: 200px;
  margin-bottom: 200px;
}

.prospek-design-txt {
  width: 600px;
  height: 900px;
  float: right;
  padding-top: 60px;
}

.lp-prospek-design .prospek-design-txt p {
  width: 80%;
  margin-bottom: 30px;
}

.lp-prospek-design .prospek-design-txt h3 {
  margin-left: 10%;
  text-align: left;
}

.lp-prospek-design img {
  display: block;
}

.lp-prospek-design img.tablet {
  float: left;
  width: 600px;
}

.lp-prospek-code {
  clear: both;
  position: relative;
  height: 1400px;
}

.lp-prospek-code img {
  display: block;
}

.prospek-code-txt-container {
  width: 1200px;
  height: 650px;
  padding-top: 90px;
  background-image: url("../img/landing/code2.jpg");
  background-size: 100% auto;
}

.prospek-code-txt {
  width: 514px;
  position: relative;
  margin: 0 auto;
  background: #fff;
  padding: 90px 70px 110px 70px;
  left: -0;
}

.prospek-code-txt h3 {
  text-align: left;
}

.prospek-code-txt p {
  margin-bottom: 20px;
}

.lp-prospek-code img.pic-code,
.lp-tp1-code img.pic-code {
  display: none;
}

.lp-prospek-conclusion {
  width: 1200px;
  margin: 0 auto;
}

.lp-prospek-conclusion p {
  width: 654px;
  position: relative;
  margin: 0 auto;
}

.lp-prospek-conclusion p.prospek-thx {
  width: 654px;
  position: relative;
  margin: 0 0;
  font-weight: 500;
  padding: 50px;
  background: #80ffbf;
}

.lp-prospek-conclusion p.prospek-thx:after {
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  position: relative;
  left: 600px;
  top: 59px;
  background: url("../img/landing/arrow-p-down.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

.lp section.contact-infos {
  width: 1200px;
  margin: 50px auto;
  margin-top: 100px;
  position: relative;
}

.lp section.contact-infos h2 {
  text-align: center;
  font-size: 34px;
  margin: 0 auto;
  margin-bottom: 50px;
  width: 250px;
  height: 50px;
  background-image: url("../img/nav-border-in.svg");
  background-size: 25px 3px;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 50% 40px;
}

.lp section.contact-infos p {
  width: 800px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.lp section.contact-infos ul li {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  margin-top: 100px;
  font-size: 34px;
}

.lp section.contact-infos ul li a {
  text-decoration: none;
  text-transform: lowercase;
}

/*.lp form {
	width: 654px;
    margin: auto;
    margin-bottom: 50px;
    margin-top: 
}*/
p.prospek-last {
  width: 654px;
  position: relative;
  margin: 0 auto;
  right: 223px;
  font-weight: 500;
  padding: 50px;
  background: #80ffbf;
  margin-bottom: 50px;
  margin-top: 50px;
}

p.prospek-last:after {
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  position: relative;
  left: 600px;
  top: 59px;
  background: url("../img/landing/arrow-p-down.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

section.prospek-bonus {
  width: 100%;
  margin: 0 auto;
  height: 800px;
  background: url("../img/landing/fiche-prospek.png");
  background-size: 100% auto;
}

section.prospek-bonus p {
  width: 500px;
  display: block;
  color: #fff;
  position: relative;
  left: 137px;
  top: 50px;
  font-weight: 500;
}

@media (max-width: 1200px) {
  section.prospek-bonus {
    background: url("../img/landing/fiche-prospek-little.png");
    height: 1200px;
  }
}
/*
------------------------------

	
	$dynamo

------------------------------
*/
.lp-dynamo h1,
.lp-dynamo nav {
  font-family: "Futura Pt", "futura-pt", "Futura", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  font-weight: 600;
  color: #fff;
}

.lp-dynamo a {
  text-decoration: none;
}

.lp-dynamo p {
  margin-bottom: 50px;
}

.lp-dynamo h1 a,
.lp-dynamo nav ul li a {
  color: #fff;
}

section.intro-lp-dynamo {
  width: 100%;
  height: 1000px;
  margin: 0px auto;
  background: #212121;
  position: absolute;
  top: 0;
  z-index: 20;
}

section.intro-lp-dynamo h2 {
  text-align: center;
  font-size: 34px;
  margin: 0 auto;
  margin-bottom: 50px;
  width: 250px;
  height: 50px;
  background-image: url("../img/checkerspot/nav-border-in.svg");
  background-size: 25px 3px;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 50% 40px;
}

.intro-lp-dynamo img {
  position: relative;
  display: block;
  margin: 50px auto;
  margin-top: 150px;
}

.intro-dynamo-txt {
  width: 634px;
  padding: 50px 10px;
  margin: 0 auto;
  position: relative;
  top: 0;
  color: #fff;
}

.intro-dynamo-txt p {
  width: 654px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-weight: 500;
}

.intro-dynamo-txt p a {
  color: inherit;
}

.intro-dynamo-txt a.dynamo-works {
  display: block;
  margin: 0 auto;
  width: 150px;
  border: 3px solid #000;
  background: #000;
  color: #ababab;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.intro-dynamo-txt a.dynamo-works:hover {
  background: #333;
  color: #fff;
  border-color: #fff;
}

.dynamo-limits {
  position: relative;
  padding-top: 1000px;
  width: 1200px;
  height: 4800px;
  margin: 0 auto;
  background: rgba(0, 0, 255, 0);
}

.dynamo-line {
  width: 380px;
  height: 100%;
  float: left;
  background: #f2f2f2 url("../img/landing/dots-dynamo.png");
  opacity: 0.9;
}

/*

	Flèches up et down

*/
a.down-arrow,
a.up-arrow {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 400px;
  height: 71px;
  line-height: 71px;
  text-indent: 130px;
  background-repeat: no-repeat;
}

a.down-arrow:hover,
a.up-arrow:hover {
  background-repeat: no-repeat;
}

a.down-arrow {
  background: url("../img/landing/down-dynamo-green.png");
  background-repeat: no-repeat;
}

a.down-arrow:hover {
  background: url("../img/landing/down-dynamo-black.png");
  background-repeat: no-repeat;
}

a.up-arrow {
  background: url("../img/landing/up-dynamo-green.png");
  background-repeat: no-repeat;
}

a.up-arrow:hover {
  background: url("../img/landing/up-dynamo-black.png");
  background-repeat: no-repeat;
}

/*

	Sections dynamo-limits

*/
.dynamo-limits section {
  background: #fff;
  opacity: 1;
}

/*

	dynamo-about

*/
section.dynamo-about {
  width: 820px;
  background: #fff;
  float: left;
  position: relative;
}

section.dynamo-about img {
  display: block;
}

.dynamo-about-txt {
  margin-left: 32px;
  margin-top: 50px;
  padding-bottom: 150px;
}

.dynamo-about-txt h3 {
  margin-bottom: 32px;
}

.dynamo-about-txt p {
  font-family: "Adobe Caslon Pro", "adobe-caslon-pro", "Garamond", "Georgia", "Times New Roman", "serif";
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 32px;
  font-weight: normal;
}

/*

	dynamo-rc

*/
section.dynamo-rc {
  width: 820px;
  float: left;
  position: relative;
}

section.dynamo-rc img {
  display: block;
}

.dynamo-rc-txt {
  margin-left: 32px;
  margin-top: 50px;
  padding-bottom: 150px;
}

.dynamo-rc-txt h3 {
  margin-bottom: 32px;
}

.dynamo-rc-txt p {
  font-family: "Adobe Caslon Pro", "adobe-caslon-pro", "Garamond", "Georgia", "Times New Roman", "serif";
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 32px;
  font-weight: normal;
}

/*

	dynamo-design

*/
section.dynamo-design {
  width: 820px;
  float: left;
  position: relative;
}

section.dynamo-design img {
  display: block;
}

.dynamo-design-txt {
  margin-left: 32px;
  margin-top: 50px;
  padding-bottom: 150px;
}

.dynamo-design-txt h3 {
  margin-bottom: 32px;
}

.dynamo-design-txt p {
  font-family: "Adobe Caslon Pro", "adobe-caslon-pro", "Garamond", "Georgia", "Times New Roman", "serif";
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 32px;
  font-weight: normal;
}

/*

	dynamo-code

*/
section.dynamo-code {
  width: 820px;
  float: left;
  position: relative;
}

section.dynamo-code img {
  display: block;
}

.dynamo-code-txt {
  margin-left: 32px;
  margin-top: 50px;
  padding-bottom: 150px;
}

.dynamo-code-txt h3 {
  margin-bottom: 32px;
}

.dynamo-code-txt p {
  font-family: "Adobe Caslon Pro", "adobe-caslon-pro", "Garamond", "Georgia", "Times New Roman", "serif";
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 32px;
  font-weight: normal;
}

.lp-dynamo-conclusion {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
}

.lp-dynamo-conclusion p.dynamo-thx {
  width: 654px;
  position: relative;
  margin: 0 0;
  font-weight: 500;
  padding: 50px;
  background: #80ffbf;
}

.lp-dynamo-conclusion p.dynamo-thx:after {
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  position: relative;
  left: 600px;
  top: 59px;
  background: url("../img/landing/arrow-p-down.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

.dynamo-bonus {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  font-weight: 500;
}

.dynamo-bonus img {
  float: left;
}

.dynamo-bonus p {
  display: block;
  position: absolute;
  width: 500px;
  top: 100px;
  left: 500px;
  background: orange;
  padding: 50px;
  background: #80ffbf;
}

.dynamo-bonus p:after {
  content: "";
  display: block;
  width: 10px;
  height: 20px;
  position: relative;
  left: -59px;
  top: 30px;
  background: url("../img/landing/arrow-p-left.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

/*
------------------------------

	
	$tp1

------------------------------
*/
section.intro-lp-tp1 .intro-tp1-logo {
  height: 100vh;
  width: 100%;
  background: url("../img/landing/grid-tp1.png");
}

section.intro-lp-tp1 .intro-tp1-logo img {
  display: block;
  position: relative;
  margin: 0 auto;
  top: calc(50% - 250px);
}

.intro-tp1-txt {
  padding-top: 100px;
  padding-bottom: 100px;
  width: 654px;
  margin: 0 auto;
  font-weight: 500;
}

.intro-tp1-txt:after {
  content: "";
  display: block;
  width: 40px;
  height: 20px;
  position: relative;
  left: 310px;
  top: 119px;
  background: url("../img/landing/arrow-tp1-white.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

.intro-tp1-txt p {
  margin-top: 30px;
}

.intro-tp1-txt p a {
  color: inherit;
  text-decoration: none;
}

.intro-tp1-txt a.tp1-works {
  display: block;
  margin: 0 auto;
  width: 150px;
  border: 3px solid #fb2e31;
  background: #fff;
  color: #fb2e31;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.intro-tp1-txt a.tp1-works:hover {
  background: #fb2e31;
  color: #e3cea0;
  border-color: #fb2e31;
}

/*

	TP1 section

*/
.lp-tp1-about p,
section.lp-tp1-rc p,
.lp-tp1-design p,
section.lp-tp1-code p {
  font-family: "Adobe Caslon Pro", "adobe-caslon-pro", "Garamond", "Georgia", "Times New Roman", "serif";
  font-weight: 500;
  margin-top: 30px;
}

/*

	TP1 about

*/
section.lp-tp1-about-cont {
  padding-top: 100px;
  background: #f2f2f2;
  width: 100%;
  padding-bottom: 100px;
}

.tp1-about-txt:after {
  content: "";
  display: block;
  width: 40px;
  height: 20px;
  position: relative;
  left: -88px;
  top: 167px;
  background: url("../img/landing/arrow-tp1-grey.png");
  background-repeat: repeat;
  background-position: 0px 0px;
  z-index: 999;
}

.lp-tp1-about {
  width: 1200px;
  margin: 0 auto;
}

.lp-tp1-about .tp1-about-txt {
  width: 500px;
  padding-top: 100px;
  padding-right: 32px;
  margin: 0 auto;
  float: right;
}

.lp-tp1-about img {
  float: left;
}

/*

	TP1 Rigueur et créativité

*/
section.lp-tp1-rc {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  background: #e4e1d4;
}

.tp1-rc-txt:after {
  content: "";
  display: block;
  width: 40px;
  height: 20px;
  position: relative;
  left: 310px;
  top: 120px;
  background: url("../img/landing/arrow-tp1-brown.png");
  background-repeat: repeat;
  background-position: 0px 0px;
  z-index: 999;
}

.tp1-rc-txt {
  width: 654px;
  margin: 0 auto;
}

/*

	TP1 design

*/
section.lp-tp1-design-cont {
  padding-top: 100px;
  background: #f2f2f2;
  width: 100%;
  padding-bottom: 100px;
}

.tp1-design-txt:after {
  content: "";
  display: block;
  width: 40px;
  height: 20px;
  position: relative;
  left: 580px;
  top: 178px;
  background: url("../img/landing/arrow-tp1-grey.png");
  background-repeat: repeat;
  background-position: 0px 0px;
  z-index: 999;
}

.lp-tp1-design {
  width: 1200px;
  margin: 0 auto;
}

.lp-tp1-design .tp1-design-txt {
  width: 500px;
  padding-top: 100px;
  padding-right: 32px;
  margin: 0 auto;
  float: left;
}

.lp-tp1-design img {
  width: 600px;
  float: right;
}

/*

TP1 code

*/
.lp-tp1-code {
  clear: both;
  position: relative;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  background: #e4e1d4;
}

.tp1-code-txt:after {
  content: "";
  display: block;
  width: 40px;
  height: 20px;
  position: relative;
  left: 236px;
  top: 291px;
  background: url("../img/landing/arrow-tp1-brown.png");
  background-repeat: repeat;
  background-position: 0px 0px;
  z-index: 999;
}

.lp-tp1-code img {
  display: block;
}

.tp1-code-txt-container {
  width: 1200px;
  height: 650px;
  margin: 0 auto;
  padding-top: 90px;
  background-image: url("../img/landing/code2.jpg");
  background-size: 100% auto;
}

.tp1-code-txt {
  width: 514px;
  position: relative;
  margin: 0 auto;
  background: #fff;
  padding: 90px 70px 110px 70px;
  left: -0;
}

.tp1-code-txt h3 {
  text-align: left;
}

.tp1-code-txt p {
  margin-bottom: 20px;
}

.lp-tp1-code img.pic-code {
  position: absolute;
  width: 1200px;
  opacity: 0.5;
  z-index: 9;
}

/*

	TP1 conclusion

*/
.lp-tp1-conclusion {
  width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
}

.lp-tp1-conclusion p {
  width: 654px;
  position: relative;
  margin: 0 auto;
}

.lp-tp1-conclusion p.tp1-thx {
  width: 654px;
  position: relative;
  margin: 0 0;
  font-weight: 500;
  padding: 50px;
  background: #80ffbf;
}

.lp-tp1-conclusion p.tp1-thx:after {
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  position: relative;
  left: 600px;
  top: 59px;
  background: url("../img/landing/arrow-p-down.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

/*
------------------------------

	
	$landings-pages-communs

------------------------------
*/
.lp-prospek nav ul li a:hover:after,
.lp-prospek nav ul li a.active:after,
.lp-dynamo nav ul li a.active:after,
.lp-dynamo nav ul li a:hover:after {
  border-color: #fff;
}

.lp-tp1 nav ul li a:hover:after,
.lp-tp1 nav ul li a.active:after {
  border-color: #ff2d28;
}

/*
------------------------------

	
	$landings-pages-media-queries

------------------------------
*/
@media (max-width: 1200px) {
  /*
  	Prospek
  */
  section.intro-lp-prospek {
    height: 800px;
    background-position: center center;
  }

  .lp-prospek-about,
  .lp-prospek-design,
  .lp-prospek-code {
    width: 100%;
  }

  section.lp-prospek-about {
    margin-top: 700px;
  }

  .prospek-about-txt {
    width: 654px;
    margin: 0 auto;
    height: auto;
    float: none;
  }

  .lp-prospek-about .prospek-about-txt p {
    width: 654px;
    margin-bottom: 30px;
  }

  .lp-prospek-about .prospek-about-txt h3 {
    text-align: left;
    margin-bottom: 50px;
    margin-left: auto;
  }

  .lp-prospek-about img {
    float: none;
    width: 654px;
    display: block;
    margin: 0 auto;
  }

  .lp-prospek-rc {
    margin-bottom: 100px;
  }

  .lp-prospek-design img {
    display: block;
    width: 100%;
  }

  .prospek-design-txt {
    width: 654px;
    margin: 0 auto;
    float: none;
    padding-top: 60px;
    height: auto;
  }

  .lp-prospek-design .prospek-design-txt p {
    width: 100%;
    margin-bottom: 30px;
  }

  .lp-prospek-design .prospek-design-txt h3 {
    margin-left: auto;
  }

  .lp-prospek-design img.tablet {
    float: none;
    width: 654px;
    display: block;
    margin: 0 auto;
    margin-top: 100px;
  }

  .lp-prospek-code {
    height: auto;
  }

  .lp-prospek-code img {
    width: 100%;
  }

  .prospek-code-txt-container {
    width: 654px;
    height: auto;
    margin: 0 auto;
    background-image: none;
  }

  .prospek-code-txt {
    width: 100%;
    position: relative;
    margin: 0 auto;
    background: #fff;
    padding: 0;
  }

  .lp-prospek-code img.pic-code {
    position: relative;
    display: block;
    margin-top: 50px;
    width: 100%;
    float: none;
  }

  .lp-prospek-conclusion {
    width: 100%;
    margin: 0 auto;
  }

  .lp-prospek-conclusion p.prospek-thx {
    width: 654px;
    margin: 0 auto;
  }

  .lp-prospek-conclusion p.prospek-thx:after {
    left: 50%;
  }

  .lp section.contact-infos {
    width: 100%;
  }

  p.prospek-last {
    display: block;
    position: relative;
    width: 654px;
    margin: 0 auto;
    left: auto;
    right: auto;
    margin-bottom: 30px;
  }

  p.prospek-last:after {
    left: 50%;
  }

  section.prospek-bonus {
    background: url("../img/landing/fiche-prospek-little.png");
    width: 100%;
    height: 1500px;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  /*
  	Dynamo
  */
  .dynamo-limits {
    width: 100%;
  }

  .dynamo-line {
    display: none;
  }

  section.dynamo-about,
  section.dynamo-rc,
  section.dynamo-design,
  section.dynamo-code {
    width: 654px;
    float: none;
    margin: 0 auto;
  }

  section.dynamo-about img,
  section.dynamo-rc img,
  section.dynamo-design img,
  section.dynamo-code img {
    display: block;
    width: 100%;
  }

  .lp-dynamo-conclusion {
    position: relative;
    width: 100%;
    padding-top: 0px;
  }

  .lp-dynamo-conclusion p.dynamo-thx {
    width: 554px;
    margin: 0 auto;
  }

  .lp-dynamo-conclusion p.dynamo-thx:after {
    left: 50%;
  }

  .dynamo-bonus {
    width: 100%;
    height: 1200px;
  }

  .dynamo-bonus img {
    position: relative;
    float: none;
    display: block;
    margin: 0 auto;
    top: 250px;
  }

  .dynamo-bonus p {
    display: block;
    position: absolute;
    width: 554px;
    top: 0;
    left: 15%;
    background: orange;
    padding: 50px;
    background: #80ffbf;
  }

  .dynamo-bonus p:after {
    content: "";
    display: block;
    width: 20px;
    height: 10px;
    position: relative;
    left: 50%;
    top: 59px;
    background: url("../img/landing/arrow-p-down.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
  }

  /*
  	TP1
  */
  section.intro-lp-tp1 .intro-tp1-logo {
    height: 700px;
  }

  section.intro-lp-tp1 .intro-tp1-logo img {
    padding-top: 00px;
    width: 500px;
  }

  .lp-tp1-about,
  .lp-tp1-design {
    width: 100%;
  }

  .lp-tp1-about .tp1-about-txt,
  .lp-tp1-design .tp1-design-txt {
    float: none;
    width: 654px;
    padding-right: 0;
    padding-top: 0;
  }

  .lp-tp1-about img,
  .lp-tp1-design img {
    float: none;
    display: block;
    position: relative;
    margin: 0 auto;
    width: 654px;
    margin-top: 30px;
  }

  .tp1-about-txt:after {
    left: calc(50% - 20px);
    top: 1195px;
  }

  .lp-tp1-design {
    width: 100%;
  }

  .tp1-design-txt:after {
    left: calc(50% - 20px);
    top: 1136px;
  }

  .tp1-code-txt-container {
    width: 654px;
    height: auto;
    margin: 0 auto;
    padding-top: 0px;
    background-image: none;
  }

  .tp1-code-txt {
    width: 100%;
    position: relative;
    margin: 0 auto;
    background: transparent;
    padding: 0;
    left: -0;
  }

  .tp1-code-txt:after {
    left: calc(50% - 20px);
    top: 119px;
  }

  .lp-tp1-conclusion {
    width: 100%;
  }

  .lp-tp1-conclusion p.tp1-thx {
    width: 654px;
    margin: 0 auto;
  }

  .lp-tp1-conclusion p.tp1-thx:after {
    left: 50%;
  }
}
/*
	End (max-width: 1200px)
*/
@media (max-width: 900px) {
  /*
  	Prospek
  */
  .intro-prospek-txt {
    width: 90%;
    margin: 0 auto;
    height: auto;
    float: none;
  }

  .intro-prospek-txt p {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 50px;
    font-weight: 500;
  }

  .prospek-about-txt {
    width: 90%;
    margin: 0 auto;
    height: auto;
    float: none;
  }

  .lp-prospek-about .prospek-about-txt p {
    width: 100%;
    margin-bottom: 30px;
  }

  .lp-prospek-about img {
    width: 100%;
  }

  .lp-prospek-rc {
    width: 90%;
    margin-top: 100px;
    margin-bottom: 50px;
  }

  .prospek-design-txt {
    width: 90%;
    height: auto;
  }

  .lp-prospek-design img.tablet {
    width: 100%;
  }

  .lp-prospek-code {
    margin-bottom: 0;
  }

  .prospek-code-txt-container {
    width: 90%;
  }

  .lp-prospek-conclusion p.prospek-thx {
    width: 90%;
    margin: 0 auto;
    padding: 5%;
    margin-top: 0;
  }

  .lp-prospek-conclusion p.prospek-thx:after {
    display: none;
  }

  p.prospek-last {
    width: 90%;
    padding: 5%;
    margin: 0 auto;
  }

  p.prospek-last:after {
    display: none;
  }

  section.prospek-bonus {
    height: 1100px;
  }

  /*
  	Dynamo
  */
  section.intro-lp-dynamo {
    height: 1200px;
  }

  .intro-dynamo-txt {
    width: 90%;
  }

  .intro-dynamo-txt p {
    width: 100%;
  }

  .dynamo-limits {
    padding-top: 1200px;
    height: auto;
  }

  section.dynamo-about,
  section.dynamo-rc,
  section.dynamo-design,
  section.dynamo-code {
    width: 100%;
    float: none;
    margin: 0 auto;
  }

  .dynamo-about-txt,
  .dynamo-rc-txt,
  .dynamo-design-txt,
  .dynamo-code-txt {
    width: 90%;
    margin: 0 auto;
    padding-top: 50px;
  }

  .lp-dynamo-conclusion {
    clear: both;
    position: relative;
  }

  a.up-arrow {
    z-index: 10;
  }

  .lp-dynamo-conclusion p.dynamo-thx {
    width: 90%;
    margin: 0 auto;
    padding: 5%;
    margin-top: 0;
  }

  .lp-dynamo-conclusion p.dynamo-thx:after {
    display: none;
  }

  .dynamo-bonus {
    width: 100%;
    height: 1000px;
  }

  .dynamo-bonus img {
    top: 150px;
  }

  .dynamo-bonus p {
    display: block;
    position: absolute;
    width: 90%;
    top: 0;
    left: 0%;
    background: orange;
    padding: 5%;
    background: #80ffbf;
  }

  .dynamo-bonus p:after {
    display: none;
  }

  /*
  	TP1
  */
  section.intro-lp-tp1 .intro-tp1-logo img {
    padding-top: 100px;
    width: 400px;
  }

  .intro-tp1-txt {
    width: 90%;
  }

  .intro-tp1-txt:after {
    left: calc(50% - 20px);
    top: 119px;
  }

  .lp-tp1-about {
    width: 100%;
  }

  .lp-tp1-about .tp1-about-txt,
  .lp-tp1-design .tp1-design-txt {
    float: none;
    width: 90%;
    padding-right: 0;
  }

  .lp-tp1-about img,
  .lp-tp1-design img {
    width: 100%;
  }

  .tp1-about-txt:after,
  .tp1-design-txt:after {
    display: none;
  }

  .tp1-rc-txt:after {
    display: none;
  }

  .tp1-rc-txt {
    width: 90%;
    margin: 0 auto;
  }

  .tp1-code-txt-container {
    width: 90%;
  }

  .tp1-code-txt {
    width: 100%;
    position: relative;
    margin: 0 auto;
    background: transparent;
    padding: 0;
    left: -0;
  }

  .tp1-code-txt:after {
    display: none;
  }

  .lp-tp1-conclusion p.tp1-thx {
    width: 90%;
    margin: 0 auto;
    padding: 5%;
    margin-top: 0;
  }

  .lp-tp1-conclusion p.tp1-thx:after {
    display: none;
  }
}
/*
	End (max-width: 900px)
*/
@media (max-width: 750px) {
  /*
  	Prospek
  */
  section.intro-lp-prospek {
    height: 1000px;
    background-position: center center;
  }

  section.lp-prospek-about {
    margin-top: 900px;
  }

  .lp section.contact-infos ul li {
    font-size: 22px;
  }

  section.prospek-bonus {
    height: 1000px;
  }
}
/*
	End (max-width: 750px)
*/
@media (max-width: 600px) {
  /*
  	Dynamo
  */
  a.down-arrow,
  a.up-arrow {
    left: 0px;
    width: 300px;
    text-indent: 80px;
  }
}
/*
	End (max-width: 600px)
*/
@media (max-width: 500px) {
  section.prospek-bonus {
    height: 600px;
  }

  .dynamo-bonus img {
    width: 100%;
  }

  section.intro-lp-tp1 .intro-tp1-logo {
    height: 700px;
  }

  section.intro-lp-tp1 .intro-tp1-logo img {
    padding-top: 100px;
    width: 300px;
  }
}
/*
	End (max-width: 500px)
*/
@media (max-width: 400px) {
  section.prospek-bonus {
    height: 500px;
  }
}
/*
	End (max-width: 400px)
*/
/*
	elements
*/
/*
------------------------------
  
    $pre-class 

------------------------------
*/
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

/*
------------------------------

    $clearfix

------------------------------
*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

/*
------------------------------
  
    $transitions 

------------------------------
*/
/*
    transition-base
*/
/*
------------------------------

  $media-queries 

------------------------------
*/
/*
	sections
*/
HTML CSS JS Result Edit on * {
  color: #333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: "Futura Pt", "futura-pt", "Futura", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  font-size: 22px;
  color: #333;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body p {
  line-height: 32px;
}

#container {
  background: rgba(255, 0, 0, 0);
  width: 100%;
  margin: 0 auto;
}

a {
  color: #333;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

/*
	Selection
*/
/*
------------------------------
	
	$commun 

------------------------------
*/
.cs-checkerspot nav ul li a:hover:after,
.cs-checkerspot nav ul li a.active:after,
.storytelling nav ul li a:hover:after,
.storytelling nav ul li a.active:after {
  border-color: #fff;
}

/*
------------------------------
	
	$grille 

------------------------------
*/
#hugridUX {
  display: inherit;
}

/*
------------------------------

  
  $media-queries 

------------------------------
*/
/*
------------------------------

	
	$header 

------------------------------
*/
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding-top: 27px;
  z-index: 300;
  font-size: 22px;
  font-family: "Futura Pt", "futura-pt", "Futura", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
}

/*
------------------------------

	
	$h1 

------------------------------
*/
h1 {
  display: block;
  position: absolute;
  left: 50px;
  top: 27px;
  width: 400px;
  height: 60px;
  line-height: 60px;
  z-index: 10;
}

h1 a {
  text-decoration: none;
  position: relative;
}

h1 a span {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

/*
------------------------------

	
	$nav 

------------------------------
*/
nav {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

nav ul {
  position: absolute;
  right: 0px;
  padding-top: 27px;
  width: 600px;
}

nav ul li {
  float: left;
  overflow: hidden;
  width: 25%;
}

nav ul li a {
  width: 100%;
  display: block;
  height: 60px;
  line-height: 60px;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  position: relative;
}

nav ul li a:after {
  content: "";
  position: absolute;
  width: 15px;
  border-bottom: 3px dotted transparent;
  bottom: 5px;
  left: calc(50% - 7px);
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

nav ul li a:hover:after {
  border-bottom: 3px dotted #fff;
}

nav ul li a.active:after {
  content: "";
  position: absolute;
  width: 20px;
  border-bottom: 3px solid #fff;
  bottom: 5px;
  left: calc(50% - 10px);
}

/*
------------------------------

  
  $media queries

------------------------------
*/
@media (min-width: 1600px) {
  /*
    Menu fixe
  */
  h1 {
    display: block;
    position: absolute;
    left: 10%;
    top: 27px;
    width: 400px;
    height: 60px;
    line-height: 60px;
    z-index: 10;
  }

  nav {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
    right: 10%;
  }

  nav ul {
    position: absolute;
    right: 0px;
    padding-top: 27px;
  }
}
/*
  End (min-width: 1600px)
*/
@media (max-width: 900px) {
  header {
    height: 110px;
  }

  h1 {
    width: 100%;
    float: none;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
    font-size: 28px;
  }

  nav {
    position: relative;
    width: 100%;
    height: 50px;
    margin-top: 0px;
    float: none;
    left: 0;
  }

  nav ul {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
  }

  nav ul li {
    float: left;
    width: 25%;
  }

  nav ul li a {
    display: block;
    height: 50px;
    line-height: 50px;
    width: 100%;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    position: relative;
    font-size: 22px;
  }
}
/*
  End (max-width: 900px)
*/
@media (max-width: 500px) {
  nav ul {
    width: 100%;
  }

  nav ul li a {
    font-size: 16px;
  }
}
/*
  End (max-width: 500px)
*/
@media (max-width: 450px) {
  nav ul {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  nav ul li {
    width: 25%;
  }

  nav ul li a {
    width: 100%;
  }
}
/*
  End (max-width: 450px)
*/
/*
------------------------------

	$footer 

------------------------------
*/
footer {
  clear: both;
  width: 100%;
  background: #fff;
  height: 100px;
  line-height: 100px;
  position: relative;
  bottom: 0;
  font-family: "Futura Pt", "futura-pt", "Futura", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  font-weight: 600;
  font-size: 18px;
}

footer a.foot-link-tw {
  position: absolute;
  left: 50px;
  text-decoration: none;
  text-transform: lowercase;
}

footer ul {
  position: absolute;
  right: 50px;
}

footer ul li {
  list-style: none;
  float: left;
}

footer ul li a {
  text-decoration: none;
  position: relative;
  right: 0px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

footer ul li a:after {
  content: "";
  width: 15px;
  border-bottom: 3px dotted transparent;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 7px);
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

footer ul li a:hover:after {
  border-bottom: 3px dotted #fff;
}

footer ul li a.active:after {
  content: "";
  width: 20px;
  border-bottom: 3px solid #fff;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 10px);
}

footer ul li:first-child a {
  margin-right: 50px;
}

/*
	footer particuliers
*/
.body-icons-pirates footer {
  background: #f0f0f0;
}

/*
------------------------------

  
  $media queries

------------------------------
*/
@media (max-width: 600px) {
  /*
  	Footer
  */
  footer a.foot-link-tw {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 100%;
    left: 0;
    text-align: center;
    text-transform: lowercase;
  }

  footer ul {
    width: 100%;
    right: 0;
    position: relative;
    overflow: hidden;
  }

  footer ul li {
    width: 50%;
    text-align: center;
  }

  footer ul li a {
    display: block;
    width: 100%;
    right: 0;
    text-align: center;
  }

  footer ul li a:after {
    content: "";
    width: 15px;
    border-bottom: 3px dotted transparent;
    position: absolute;
    bottom: 30px;
    left: calc(50% - 7px);
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
  }

  footer ul li a.active:after {
    content: "";
    width: 20px;
    border-bottom: 3px solid #80ffbf;
    position: absolute;
    bottom: 30px;
    left: calc(50% - 10px);
  }
}
/*
	End (max-width: 600px)
*/
/*
	pages
*/
/*
------------------------------

  $index 

------------------------------
*/
body.wokine {
  color: #fff;
  background: #1c1c1c;
  font-family: "proxima-nova","Proxima Nova","Helvetica", "Helvetica Neue", "arial", "Futura Pt", "futura-pt", "Futura", "sans-serif";
  font-size: 14px;
}

body.wokine abbr,
abbr[title], dfn[title] {
  outline: none;
  border-bottom: none;
  border-bottom-width: 0;
}

body.wokine p {
  color: #A1A1A1;
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 19px;
  font-weight: 600;
}

.wokine header {
  position: relative;
  background: #1c1c1c;
  padding-bottom: 40px;
}

.wokine header a {
  color: #fff;
}

footer a {
  color: #a1a1a1;
}

.wokine section h3 {
  font-size: 42px;
  font-weight: 300;
}

/*

  hello-wokine

*/
section.hello-wokine {
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #D83008;
}

.hello-content {
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  background: #ED371E;
  margin-left: auto;
  margin-right: auto;
  padding-top: 70px;
  padding-bottom: 70px;
}

.hello-content h2 {
  color: #fff;
  font-size: 59px;
  line-height: 60px;
  font-weight: 300;
}

.hello-content a.discover-link {
  display: inline-block;
  color: #1c1c1c;
  text-decoration: none;
  margin-top: 32px;
  font-weight: 600;
  margin-right: 40px;
}

.hello-content a.discover-link span.arrow-wokine {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #1c1c1c url(../img/sprite.png) no-repeat -12px 3px;
  background-size: 33px auto;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -khtml-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.hello-content a.discover-link:hover span.arrow-wokine {
  background-position: 6px 3px;
}

.hello-content a.what-do-link {
  display: inline-block;
  color: #1c1c1c;
  text-decoration: none;
  margin-top: 32px;
  font-weight: 600;
  margin-right: 40px;
}

.hello-content a.what-do-link span.arrow-wokine {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #1c1c1c url(../img/sprite.png) no-repeat -12px 3px;
  background-size: 33px auto;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -khtml-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.hello-content a.what-do-link:hover span.arrow-wokine {
  background-position: 6px 3px;
}

.hello-content a.contact-me-link {
  display: inline-block;
  color: #1c1c1c;
  text-decoration: none;
  margin-top: 32px;
  font-weight: 600;
}

.hello-content a.contact-me-link span.arrow-wokine {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #1c1c1c url(../img/sprite.png) no-repeat -12px 3px;
  background-size: 33px auto;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -khtml-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.hello-content a.contact-me-link:hover span.arrow-wokine {
  background-position: 6px 3px;
}

/*

  intro-wokine

*/
section.intro-wokine {
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #191919;
}

.intro-content {
  overflow: hidden;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  background: #1c1c1c;
  margin-left: auto;
  margin-right: auto;
  padding-top: 70px;
  padding-bottom: 70px;
}

.intro-content h3 {
  font-weight: 300;
  font-size: 41px;
  margin-bottom: 32px;
}

.col-presentation {
  width: 400px;
  float: left;
}

.col-presentation a.what-can-do {
  display: block;
  color: #ED371E;
  text-decoration: none;
  margin-top: 32px;
}

.col-presentation a.what-can-do span.arrow-wokine {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #ED371E url(../img/sprite.png) no-repeat -12px 3px;
  background-size: 33px auto;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -khtml-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.col-presentation a.what-can-do:hover span.arrow-wokine {
  background-position: 6px 3px;
}

.col-digits {
  width: 460px;
  overflow: hidden;
  float: right;
}

.col-digits ul li {
  list-style: none;
  margin-bottom: 40px;
}

.col-digits ul li span.redcircle {
  display: block;
  float: left;
  text-align: center;
  padding-top: 25px;
  width: 90px;
  height: 65px;
  border-radius: 100px;
  font-size: 41px;
  font-weight: 300;
  background: #D83008;
  color: white;
  margin-right: 24px;
}

.col-digits ul li p {
  color: #fff;
  font-weight: 600;
  height: 60px;
  padding-top: 15px;
}

.col-digits ul li a {
  color: #fff;
}

.portfolio-intro {
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #2B2B29;
}

.portfolio-intro-content {
  overflow: hidden;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  background: #30302E;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

.portfolio-intro-content h3 {
  font-size: 42px;
  font-weight: 300;
}

.portfolio-works {
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #191919;
}

.portfolio-works-content {
  overflow: hidden;
  width: 95%;
  padding-left: 5%;
  padding-right: 0%;
  background: #1c1c1c;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

ul.works-list li {
  list-style: none;
  float: left;
  width: 460px;
}

ul.works-list li a {
  position: relative;
  display: block;
  height: 236px;
  background: #ED371E;
  text-decoration: none;
  color: #fff;
  margin-bottom: 20px;
}

ul.works-list li a:nth-child(odd) {
  margin-right: 20px;
}

.infos-work {
  display: block;
  padding-left: 25px;
  padding-top: 50px;
}

.infos-work h4 {
  font-weight: 300;
  font-size: 30px;
}

span.see-more-work {
  position: relative;
  background: #1c1c1c url(../img/more-arrow.png);
  background-repeat: no-repeat;
  background-position: 15px 11px;
  display: block;
  height: 33px;
  width: 103px;
  line-height: 33px;
  margin-top: 16px;
  text-align: center;
  text-indent: 10px;
}

span.see-more-work::before  {
  position: absolute;
  content: "";
  width: 5px;
  height: 11px;
  background: blue;
  left: 0;
  bottom: 10px;
}

ul.works-list li a img.vignette {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 208px;
  height: 191px;
}

ul.works-list li a.work-annedekyndt {
  background: #A96F9B;
}

ul.works-list li a.work-moment {
  background: #658DFF;
}

ul.works-list li a.work-moment span.see-more-work {
  margin-top: 32px;
}

.how-intro {
  clear: both;
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #D2373B;
}

.how-intro-content {
  overflow: hidden;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  background: #EA3D42;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

.how-intro-content h3 {
  font-size: 42px;
  font-weight: 300;
}

.how-txt {
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #191919;
}

.how-txt h4 {
  font-size: 41px;
  margin-bottom: 32px;
  font-weight: 300;
}

.how-txt h4 span {
  color: #EA3D42;
}

.how-txt-content {
  overflow: hidden;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  background: #1c1c1c;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

.le-design {
  width: 100%;
  overflow: hidden;
}

.col-design-txt {
  width: 400px;
  float: left;
}

img.logiciels-design {
  display: block;
  width: 460px;
  float: right;
  margin-top: 100px;
}

.le-code {
  width: 100%;
  clear: both;
  padding-top: 100px;
}

.col-code-txt {
  width: 400px;
  float: right;
  margin-right: 40px;
}

img.langages-code {
  display: block;
  width: 390px;
  float: left;
  margin-top: 00px;
}

/*

  $contact-wokine

*/
.contact-intro {
  clear: both;
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #1192E0;
}

.contact-intro-content {
  overflow: hidden;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  background: #13A2F8;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

.contact-infos {
  width: 75%;
  padding-left: 5%;
  padding-right: 20%;
  background: #191919;
}

.contact-infos-content {
  overflow: hidden;
  width: 100%;
  padding-left: 0%;
  padding-right: 0%;
  background: #1c1c1c;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 200px;
  text-align: center;
}

.wokine .contact-infos-content p {
  width: 500px;
  font-size: 20px;
  line-height: 24px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.contact-infos-content a.mailto-rd {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  font-size: 41px;
  font-weight: 300;
  text-align: center;
  text-decoration: none;
  margin-top: 32px;
}

.contact-infos-content a.mailto-rd span.mail-icon {
  opacity: 0.3;
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 100px;
  border: 3px solid #fff;
  vertical-align: middle;
  margin-right: 30px;
  background: url(../img/da-icon.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
}

.contact-infos-content a.mailto-rd:hover span.mail-icon {
  opacity: 1;
  background: #13A2F8 url(../img/da-icon.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  border-color: #13A2F8;
}

.contact-infos-content p.see-you-soon {
  margin-top: 32px;
}

/*
------------------------------

  
  $media queries

------------------------------
*/
@media (max-width: 1300px) {
  section.hello-wokine,
  section.intro-wokine,
  .portfolio-intro,
  .portfolio-works,
  .how-intro,
  .how-txt,
  .contact-intro,
  .contact-infos {
    width: 85%;
    padding-left: 5%;
    padding-right: 10%;
  }
}
/*
  End (max-width: 1300px)
*/
@media (max-width: 1200px) {
  section.hello-wokine,
  section.intro-wokine,
  .portfolio-intro,
  .portfolio-works,
  .how-intro,
  .how-txt,
  .contact-intro,
  .contact-infos {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
  }
}
/*
  End (max-width: 1200px)
*/
@media (max-width: 1100px) {
  section.hello-wokine,
  section.intro-wokine,
  .portfolio-intro,
  .portfolio-works,
  .how-intro,
  .how-txt,
  .contact-intro,
  .contact-infos {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
  }

  .portfolio-works-content,
  .how-txt-content {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
  }
}
/*
  End (max-width: 1100px)
*/
@media (max-width: 1000px) {
  .col-presentation {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    margin-bottom: 60px;
  }

  .col-digits {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }

  .intro-content {
    padding-bottom: 30px;
  }

  .portfolio-works-content {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  ul.works-list li {
    width: 50%;
  }
}
/*
  End (max-width: 1000px)
*/
@media (max-width: 950px) {
  .how-txt-content {
    padding-bottom: 40px;
  }

  .col-design-txt {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }

  img.logiciels-design {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
  }

  .le-code {
    padding-top: 50px;
  }

  .col-code-txt {
    float: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  img.langages-code {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
  }
}
/*
  End (max-width: 950px)
*/
@media (max-width: 900px) {
  .hello-content h2 {
    font-size: 41px;
    line-height: 48px;
  }

  .intro-content {
    padding-top: 30px;
  }
}
/*
  End (max-width: 900px)
*/
@media (max-width: 830px) {
  ul.works-list li {
    float: none;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  ul.works-list li a:nth-child(odd) {
    margin-right: 0;
  }
}
/*
  End (max-width: 830px)
*/
@media (max-width: 800px) {
  .hello-content h2 {
    text-align: center;
  }

  .col-digits {
    width: 80%;
  }

  .contact-infos-content a.mailto-rd {
    margin-top: 10px;
  }

  .contact-infos-content a.mailto-rd span.mail-icon {
    margin-left: auto;
    margin-right: auto;
    display: block;
    opacity: 1;
    background: #13A2F8 url(../img/da-icon.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    border-color: #13A2F8;
    margin-bottom: 20px;
  }

  .contact-infos-content p.see-you-soon {
    text-align: center;
  }
}
/*
  End (max-width: 800px)
*/
@media (max-width: 700px) {
  .how-txt-content {
    padding-top: 32px;
  }

  .how-txt h4 {
    margin-bottom: 22px;
  }

  .hello-content {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .intro-content h3 {
    margin-bottom: 22px;
  }
}
/*
  End (max-width: 700px)
*/
@media (max-width: 650px) {
  .wokine header {
    padding-bottom: 10px;
  }

  .hello-content h2 {
    font-size: 35px;
    text-align: center;
  }

  ul.works-list li {
    width: 90%;
  }

  img.logiciels-design {
    width: 80%;
  }

  img.langages-code {
    width: 80%;
  }

  .col-presentation {
    width: 90%;
  }

  .col-digits {
    width: 100%;
  }

  .portfolio-intro-content {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .how-intro-content {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .contact-intro-content {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .wokine section h3 {
    font-size: 30px;
  }

  ul.works-list li {
    width: 100%;
  }

  .col-design-txt {
    width: 90%;
  }

  .col-code-txt {
    width: 90%;
  }

  .contact-infos-content {
    padding-top: 40px;
  }

  .wokine .contact-infos-content p {
    width: 80%;
  }

  .contact-infos-content a.mailto-rd {
    font-size: 30px;
  }

  footer {
    height: auto;
  }
}
/*
  End (max-width: 650px)
*/
@media (max-width: 550px) {
  .hello-content h2 {
    font-size: 30px;
    line-height: 38px;
  }

  body.wokine p {
    font-size: 18px;
    font-weight: 400;
  }

  .col-presentation a.what-can-do {
    font-size: 18px;
    font-weight: 400;
  }

  .col-digits ul li span.redcircle {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  ul.works-list li a {
    height: 200px;
  }

  ul.works-list li a img.vignette {
    width: 180px;
    height: auto;
  }

  .contact-infos-content {
    padding-bottom: 60px;
  }

  .hello-content a.discover-link,
  .hello-content a.what-do-link,
  .hello-content a.contact-me-link {
    display: block;
    margin-left: 40px;
  }

  .hello-content a.what-do-link,
  .hello-content a.contact-me-link {
    margin-top: 12px;
  }
}
/*
  End (max-width: 550px)
*/
@media (max-width: 500px) {
  .hello-content h2 {
    font-size: 24px;
  }
}
/*
  End (max-width: 500px)
*/
@media (max-width: 350px) {
  .hello-content h2 {
    font-size: 21px;
    line-height: 28px;
  }

  ul.works-list li a {
    height: 170px;
  }

  ul.works-list li a img.vignette {
    width: 130px;
  }

  .contact-infos-content a.mailto-rd {
    font-size: 24px;
  }
}
/*
  End (max-width: 350px)
*/
#hugridUX {
  display: none;
}