/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 17, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../../../Applications/Scout.app/Contents/Resources/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

@font-face {
  font-family: "GeogtReg";
  src: url('fonts/../../fonts/gtogtrg.eot');
  src: url('fonts/../../fonts/gtogtrg.eot?#iefix') format('eot'), url('fonts/../../fonts/gtogtrg.woff') format('woff'), url('fonts/../../fonts/gtogtrg.ttf') format('truetype'), url('fonts/../../fonts/gtogtrg.svg') format('svg');
}

@font-face {
  font-family: "GeogtSmB";
  src: url('fonts/../../fonts/geogtqsb.eot');
  src: url('fonts/../../fonts/geogtqsb.eot?#iefix') format('eot'), url('fonts/../../fonts/geogtqsb.woff') format('woff'), url('fonts/../../fonts/geogtqsb.ttf') format('truetype'), url('fonts/../../fonts/geogtqsb.svg') format('svg');
}

@font-face {
  font-family: "GeogtMed";
  src: url('fonts/../../fonts/geogtmd.eot');
  src: url('fonts/../../fonts/geogtmd.eot?#iefix') format('eot'), url('fonts/../../fonts/geogtmd.woff') format('woff'), url('fonts/../../fonts/geogtmd.ttf') format('truetype'), url('fonts/../../fonts/geogtmd.svg') format('svg');
}

@font-face {
  font-family: "RalewayLight";
  src: url('fonts/../../fonts/raleway-light.eot');
  src: url('fonts/../../fonts/raleway-light.eot?#iefix') format('eot'), url('fonts/../../fonts/raleway-light.woff') format('woff'), url('fonts/../../fonts/raleway-light.ttf') format('truetype'), url('fonts/../../fonts/raleway-light.svg') format('svg');
}

@font-face {
  font-family: "RalewayMedium";
  src: url('fonts/../../fonts/raleway-medium.eot');
  src: url('fonts/../../fonts/raleway-medium.eot?#iefix') format('eot'), url('fonts/../../fonts/raleway-medium.woff') format('woff'), url('fonts/../../fonts/raleway-medium.ttf') format('truetype'), url('fonts/../../fonts/raleway-medium.svg') format('svg');
}

@font-face {
  font-family: "RalewayBold";
  src: url('fonts/../../fonts/raleway-bold.eot');
  src: url('fonts/../../fonts/raleway-bold.eot?#iefix') format('eot'), url('fonts/../../fonts/raleway-bold.woff') format('woff'), url('fonts/../../fonts/raleway-bold.ttf') format('truetype'), url('fonts/../../fonts/raleway-bold.svg') format('svg');
}

@font-face {
  font-family: "HelveticaNeueThin";
  src: url('fonts/../../fonts/helveticaneuethin.eot');
  src: url('fonts/../../fonts/helveticaneuethin.eot?#iefix') format('eot'), url('fonts/../../fonts/helveticaneuethin.woff') format('woff'), url('fonts/../../fonts/helveticaneuethin.ttf') format('truetype'), url('fonts/../../fonts/helveticaneuethin.svg') format('svg');
}

@font-face {
  font-family: "HelveticaNeueMedium";
  src: url('fonts/../../fonts/helveticaneuemedium.eot');
  src: url('fonts/../../fonts/helveticaneuemedium.eot?#iefix') format('eot'), url('fonts/../../fonts/helveticaneuemedium.woff') format('woff'), url('fonts/../../fonts/helveticaneuemedium.ttf') format('truetype'), url('fonts/../../fonts/helveticaneuemedium.svg') format('svg');
}

/* ICONS FONTS */
@font-face {
  font-family: "IconDevFont";
  src: url('fonts/../../icons/dev-flaticon.eot');
  src: url('fonts/../../icons/dev-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/dev-flaticon.woff') format('woff'), url('fonts/../../icons/dev-flaticon.ttf') format('truetype'), url('fonts/../../icons/dev-flaticon.svg') format('svg');
}

@font-face {
  font-family: "IconDev2Font";
  src: url('fonts/../../icons/dev2-flaticon.eot');
  src: url('fonts/../../icons/dev2-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/dev2-flaticon.woff') format('woff'), url('fonts/../../icons/dev2-flaticon.ttf') format('truetype'), url('fonts/../../icons/dev2-flaticon.svg') format('svg');
}

@font-face {
  font-family: "IconGraphismeFont";
  src: url('fonts/../../icons/graphisme-flaticon.eot');
  src: url('fonts/../../icons/graphisme-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/graphisme-flaticon.woff') format('woff'), url('fonts/../../icons/graphisme-flaticon.ttf') format('truetype'), url('fonts/../../icons/graphisme-flaticon.svg') format('svg');
}

@font-face {
  font-family: "IconRDFont";
  src: url('fonts/../../icons/r&d-flaticon.eot');
  src: url('fonts/../../icons/r&d-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/r&d-flaticon.woff') format('woff'), url('fonts/../../icons/r&d-flaticon.ttf') format('truetype'), url('fonts/../../icons/r&d-flaticon.svg') format('svg');
}

@font-face {
  font-family: "IconSocial";
  src: url('fonts/../../icons/social-flaticon.eot');
  src: url('fonts/../../icons/social-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/social-flaticon.woff') format('woff'), url('fonts/../../icons/social-flaticon.ttf') format('truetype'), url('fonts/../../icons/social-flaticon.svg') format('svg');
}

@font-face {
  font-family: "IconAdobe";
  src: url('fonts/../../icons/adobe-flaticon.eot');
  src: url('fonts/../../icons/adobe-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/adobe-flaticon.woff') format('woff'), url('fonts/../../icons/adobe-flaticon.ttf') format('truetype'), url('fonts/../../icons/adobe-flaticon.svg') format('svg');
}

@font-face {
  font-family: "IconLoisir";
  src: url('fonts/../../icons/loisir-flaticon.eot');
  src: url('fonts/../../icons/loisir-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/loisir-flaticon.woff') format('woff'), url('fonts/../../icons/loisir-flaticon.ttf') format('truetype'), url('fonts/../../icons/loisir-flaticon.svg') format('svg');
}

@font-face {
  font-family: "IconProjet";
  src: url('fonts/../../icons/projet-flaticon.eot');
  src: url('fonts/../../icons/projet-flaticon.eot?#iefix') format('eot'), url('fonts/../../icons/projet-flaticon.woff') format('woff'), url('fonts/../../icons/projet-flaticon.ttf') format('truetype'), url('fonts/../../icons/projet-flaticon.svg') format('svg');
}

@font-face {
  font-family: "FontAwesome";
  src: url('fonts/../../fonts/fontawesome-webfont.eot');
  src: url('fonts/../../fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('fonts/../../fonts/fontawesome-webfont.woff') format('woff'), url('fonts/../../fonts/fontawesome-webfont.ttf') format('truetype'), url('fonts/../../fonts/fontawesome-webfont.svg') format('svg');
}

/* line 40, ../sass/screen.scss */
.GeogtSmB {
  font-family: "GeogtSmB", Helvetica Neue, Helvetica, Arial;
}

/* line 43, ../sass/screen.scss */
.GeogtReg {
  font-family: "GeogtReg", Helvetica Neue, Helvetica, Arial;
}

/* line 46, ../sass/screen.scss */
.GeogtMed {
  font-family: "GeogtMed", Helvetica Neue, Helvetica, Arial;
}

/* line 50, ../sass/screen.scss */
.wrapper {
  width: 90%;
  max-width: 900px;
  margin: auto;
  position: relative;
}

/* line 57, ../sass/screen.scss */
header {
  height: 100px;
  width: 100%;
  background-color: #FFF;
  z-index: 10;
  position: relative;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px;
}
/* line 64, ../sass/screen.scss */
header a#titre {
  display: block;
  font-size: 22px;
  color: #333333;
  margin-top: 40px;
  float: left;
}
/* line 70, ../sass/screen.scss */
header a#titre span {
  display: inline-block;
  margin-right: 2px;
}
/* line 75, ../sass/screen.scss */
header #bt-menu {
  display: none;
  width: 18px;
  height: 70px;
  background-image: url(../img/bt-menu@2x.png);
  background-size: 18px 14px;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  z-index: 10001;
}
/* line 89, ../sass/screen.scss */
header #bt-menu.open {
  display: block;
  background-image: url(../img/bt-menu-close@2x.png);
  background-size: 15px 15px;
  position: fixed;
  width: 90px;
}
/* line 96, ../sass/screen.scss */
header nav {
  float: right;
  margin-top: 45px;
}
/* line 99, ../sass/screen.scss */
header nav a {
  text-decoration: none;
  font-family: "RalewayLight", Helvetica Neue, Helvetica, Arial;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: #333333;
  display: inline-block;
  margin-left: 30px;
}
/* line 109, ../sass/screen.scss */
header nav a.active {
  font-family: "RalewayBold", Helvetica Neue, Helvetica, Arial;
}

/* line 118, ../sass/screen.scss */
div#slider, div#firstBand {
  width: 100%;
  height: 500px;
  background-color: #1abc9c;
  background-image: url(../img/fond2.png);
  background-position: -5px -5px;
  z-index: 5;
  position: relative;
  overflow: hidden;
}

/* line 131, ../sass/screen.scss */
.slide {
  display: none;
  z-index: 5;
}

/* line 136, ../sass/screen.scss */
#slide1 {
  display: block !important;
}

/* line 140, ../sass/screen.scss */
div#timeline {
  width: 100%;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 0px;
}

/* line 148, ../sass/screen.scss */
div#timeline2 {
  width: 0px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0px;
}

/* line 157, ../sass/screen.scss */
div#binaire {
  position: absolute;
  color: white;
  text-decoration: none;
  top: -5px;
  -moz-mask-image: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(100%, rgba(255, 255, 255, 0)));
  mask-image: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
/* line 165, ../sass/screen.scss */
div#binaire p {
  font-family: "GeogtReg", Helvetica Neue, Helvetica, Arial;
  font-size: 24px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.25);
}
/* line 170, ../sass/screen.scss */
div#binaire p span.invisible {
  opacity: 0;
}

/* line 176, ../sass/screen.scss */
.dev-sprite {
  width: 408px;
  height: 352px;
  background-image: url(../img/dev-sprite.png);
  position: absolute;
  top: 143px;
  -webkit-animation: play-dev 0.5s steps(3) infinite;
  -moz-animation: play-dev 0.5s steps(3) infinite;
  -ms-animation: play-dev 0.5s steps(3) infinite;
  -o-animation: play-dev 0.5s steps(3) infinite;
  animation: play-dev 0.5s steps(3) infinite;
}

@-webkit-keyframes play-dev {
  /* line 193, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 194, ../sass/screen.scss */
  to {
    background-position: -1224px;
  }
}

@-moz-keyframes play-dev {
  /* line 198, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 199, ../sass/screen.scss */
  to {
    background-position: -1224px;
  }
}

@-ms-keyframes play-dev {
  /* line 203, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 204, ../sass/screen.scss */
  to {
    background-position: -1224px;
  }
}

@-o-keyframes play-dev {
  /* line 208, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 209, ../sass/screen.scss */
  to {
    background-position: -1224px;
  }
}

@keyframes play-dev {
  /* line 213, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 214, ../sass/screen.scss */
  to {
    background-position: -1224px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* line 219, ../sass/screen.scss */
  .dev-sprite {
    background-image: url(../img/dev-sprite@2x.png);
    -webkit-background-size: 1632px 352px;
    -moz-background-size: 1632px 352px;
    background-size: 1632px 352px;
  }
}
/* line 227, ../sass/screen.scss */
.slide-text {
  color: white;
  font-size: 27px;
  font-family: "HelveticaNeueThin", Arial;
  line-height: 35px;
  position: absolute;
}
/* line 233, ../sass/screen.scss */
.slide-text span.medium {
  font-family: "HelveticaNeueMedium", Arial;
}
/* line 236, ../sass/screen.scss */
.slide-text span.ecart {
  display: inline-block;
  margin-right: 18px;
}
/* line 240, ../sass/screen.scss */
.slide-text span.nb {
  display: block;
}

/* line 244, ../sass/screen.scss */
.dev-text {
  top: 70px;
  left: 360px;
  position: absolute;
  z-index: 1;
}

/* line 251, ../sass/screen.scss */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "IconDevFont";
  display: inline-block;
  margin-right: .2em;
  text-align: center;
  margin-left: .2em;
}

/* line 259, ../sass/screen.scss */
.buttons-rounds .button {
  position: absolute;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  border-radius: 72px;
  font-size: 40px;
  height: 72px;
  width: 72px;
  line-height: 72px;
  margin: 0 24px 10px;
  text-align: center;
  padding: 0px 8px;
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  text-shadow: 0 1px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-transition: background 0.2s, color 0.2s;
  -moz-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}

/* line 283, ../sass/screen.scss */
.buttons-rounds .button:after {
  top: -7px;
  left: -7px;
  padding: 7px;
  box-shadow: 0 0 0 4px #fff;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -webkit-transform: scale(0.8);
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transition: transform 0.2s, opacity 0.2s;
  transform: scale(0.8);
  opacity: 0;
}

/* line 297, ../sass/screen.scss */
.buttons-rounds .button:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #1abc9c;
}

/* line 302, ../sass/screen.scss */
.buttons-rounds .button:hover:after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/* line 310, ../sass/screen.scss */
.buttons-legend {
  display: block;
  position: absolute;
  color: white;
  text-align: center;
  font-family: "GeogtMed", Arial;
  font-size: 16px;
  margin-top: 85px;
  width: 120px;
}

/* line 322, ../sass/screen.scss */
.position-html {
  top: 180px;
  left: 370px;
}

/* line 326, ../sass/screen.scss */
.icon-html:before {
  content: "\e001";
}

/* line 330, ../sass/screen.scss */
.position-responsive {
  top: 180px;
  left: 530px;
}

/* line 334, ../sass/screen.scss */
.icon-responsive:before {
  content: "\e002";
}

/* line 338, ../sass/screen.scss */
.position-cms {
  top: 180px;
  left: 690px;
}

/* line 342, ../sass/screen.scss */
.icon-cms:before {
  content: "\e000";
}

/* line 346, ../sass/screen.scss */
.position-anim {
  top: 310px;
  left: 450px;
}

/* line 350, ../sass/screen.scss */
.icon-anim:before {
  content: "\e003";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -ms-transform: rotate(45deg);
}

/* line 359, ../sass/screen.scss */
.position-flash {
  top: 310px;
  left: 610px;
}

/* line 363, ../sass/screen.scss */
.icon-flash:before {
  font-family: "IconDev2Font";
  content: "\f100";
  transform: scale(0.9);
}

/* line 373, ../sass/screen.scss */
.graphisme-sprite {
  width: 285px;
  height: 386px;
  background-image: url(../img/graphisme-sprite.png);
  position: absolute;
  top: 50px;
  left: 50px;
  -webkit-animation: play-graphisme 0.7s steps(15) infinite;
  -moz-animation: play-graphisme 0.7s steps(15) infinite;
  -ms-animation: play-graphisme 0.7s steps(15) infinite;
  -o-animation: play-graphisme 0.7s steps(15) infinite;
  animation: play-graphisme 0.7s steps(15) infinite;
}

@-webkit-keyframes play-graphisme {
  /* line 389, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 390, ../sass/screen.scss */
  to {
    background-position: -4275px;
  }
}

@-moz-keyframes play-graphisme {
  /* line 394, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 395, ../sass/screen.scss */
  to {
    background-position: -4275px;
  }
}

@-ms-keyframes play-graphisme {
  /* line 399, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 400, ../sass/screen.scss */
  to {
    background-position: -4275px;
  }
}

@-o-keyframes play-graphisme {
  /* line 404, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 405, ../sass/screen.scss */
  to {
    background-position: -4275px;
  }
}

@keyframes play-graphisme {
  /* line 409, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 410, ../sass/screen.scss */
  to {
    background-position: -4275px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* line 415, ../sass/screen.scss */
  .graphisme-sprite {
    background-image: url(../img/graphisme-sprite@2x.png);
    -webkit-background-size: 4560px 386px;
    -moz-background-size: 4560px 386px;
    background-size: 4560px 386px;
  }
}
/* line 424, ../sass/screen.scss */
.graphisme-text {
  top: 100px;
  left: 390px;
}

/* line 429, ../sass/screen.scss */
.position-web {
  top: 160px;
  left: 370px;
}

/* line 433, ../sass/screen.scss */
.icon-web:before {
  content: "\e003";
  font-family: "IconGraphismeFont" !important;
  font-size: 30px !important;
}

/* line 439, ../sass/screen.scss */
.position-mobile {
  top: 160px;
  left: 530px;
}

/* line 443, ../sass/screen.scss */
.icon-mobile:before {
  content: "\e001";
  font-family: "IconGraphismeFont" !important;
  font-size: 32px !important;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.1);
  -ms-transform: rotate(-10deg);
}

/* line 454, ../sass/screen.scss */
.position-tablet {
  top: 160px;
  left: 690px;
}

/* line 458, ../sass/screen.scss */
.icon-tablet:before {
  content: "\e004";
  font-family: "IconGraphismeFont" !important;
  font-size: 32px !important;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -ms-transform: rotate(90deg);
}

/* line 469, ../sass/screen.scss */
.position-pen {
  top: 290px;
  left: 450px;
}

/* line 473, ../sass/screen.scss */
.icon-pen:before {
  content: "\e000";
  font-family: "IconGraphismeFont" !important;
  font-size: 32px !important;
}

/* line 479, ../sass/screen.scss */
.position-book {
  top: 290px;
  left: 610px;
}

/* line 483, ../sass/screen.scss */
.icon-book:before {
  content: "\e002";
  font-family: "IconGraphismeFont" !important;
  font-size: 32px !important;
}

/* line 501, ../sass/screen.scss */
.rd-sprite {
  width: 183px;
  height: 398px;
  background-image: url(../img/r&d-sprite.png);
  position: absolute;
  top: 50px;
  left: 120px;
  -webkit-animation: play-rd 0.5s steps(2) infinite;
  -moz-animation: play-rd 0.5s steps(2) infinite;
  -ms-animation: play-rd 0.5s steps(2) infinite;
  -o-animation: play-rd 0.5s steps(2) infinite;
  animation: play-rd 0.5s steps(2) infinite;
}

@-webkit-keyframes play-rd {
  /* line 517, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 518, ../sass/screen.scss */
  to {
    background-position: -366px;
  }
}

@-moz-keyframes play-rd {
  /* line 522, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 523, ../sass/screen.scss */
  to {
    background-position: -366px;
  }
}

@-ms-keyframes play-rd {
  /* line 527, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 528, ../sass/screen.scss */
  to {
    background-position: -366px;
  }
}

@-o-keyframes play-rd {
  /* line 532, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 533, ../sass/screen.scss */
  to {
    background-position: -366px;
  }
}

@keyframes play-rd {
  /* line 537, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 538, ../sass/screen.scss */
  to {
    background-position: -366px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* line 543, ../sass/screen.scss */
  .rd-sprite {
    background-image: url(../img/r&d-sprite@2x.png);
    -webkit-background-size: 549px 398px;
    -moz-background-size: 549px 398px;
    background-size: 549px 398px;
  }
}
/* line 551, ../sass/screen.scss */
.rd-text {
  top: 70px;
  left: 360px;
}

/* line 556, ../sass/screen.scss */
.position-install {
  top: 170px;
  left: 350px;
  text-transform: uppercase;
}

/* line 561, ../sass/screen.scss */
.icon-install:before {
  content: "\e001";
  font-family: "IconRDFont" !important;
  font-size: 28px !important;
  margin-top: -5px;
}

/* line 569, ../sass/screen.scss */
.position-3d {
  top: 170px;
  left: 510px;
  text-transform: uppercase;
}

/* line 574, ../sass/screen.scss */
.icon-3d:before {
  content: "\e002";
  font-family: "IconRDFont" !important;
  font-size: 28px !important;
}

/* line 581, ../sass/screen.scss */
.position-devart {
  top: 170px;
  left: 670px;
  text-transform: uppercase;
}

/* line 586, ../sass/screen.scss */
.icon-devart:before {
  content: "\e000";
  font-family: "IconRDFont" !important;
  font-size: 28px !important;
}

/* line 596, ../sass/screen.scss */
.resume-text {
  top: 50px;
  left: 0px;
}

/* line 601, ../sass/screen.scss */
.bt-contact {
  width: 200px;
  position: absolute;
  top: 160px;
  left: 600px;
  text-align: center;
}

/* line 609, ../sass/screen.scss */
.bt-cv {
  width: 200px;
  position: absolute;
  top: 250px;
  left: 600px;
  text-align: center;
}

/* line 617, ../sass/screen.scss */
.resume-sprite {
  width: 540px;
  height: 377px;
  background-image: url(../img/resume-sprite.png);
  position: absolute;
  top: 80px;
  left: 0px;
  z-index: 15;
}

/* line 628, ../sass/screen.scss */
.resume-sprite.anim {
  -webkit-animation: resume-rd 0.3s steps(3) alternate 2;
  -moz-animation: resume-rd 0.3s steps(3) alternate 2;
  -ms-animation: resume-rd 0.3s steps(3) alternate 2;
  -o-animation: resume-rd 0.3s steps(3) alternate 2;
  animation: resume-rd 0.3s steps(3) alternate 2;
}

@-webkit-keyframes resume-rd {
  /* line 638, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 639, ../sass/screen.scss */
  to {
    background-position: -1620px;
  }
}

@-moz-keyframes resume-rd {
  /* line 643, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 644, ../sass/screen.scss */
  to {
    background-position: -1620px;
  }
}

@-ms-keyframes resume-rd {
  /* line 648, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 649, ../sass/screen.scss */
  to {
    background-position: -1620px;
  }
}

@-o-keyframes resume-rd {
  /* line 653, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 654, ../sass/screen.scss */
  to {
    background-position: -1620px;
  }
}

@keyframes resume-rd {
  /* line 658, ../sass/screen.scss */
  from {
    background-position: 0px;
  }

  /* line 659, ../sass/screen.scss */
  to {
    background-position: -1620px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* line 664, ../sass/screen.scss */
  .resume-sprite {
    background-image: url(../img/resume-sprite@2x.png);
    -webkit-background-size: 1620px 377px;
    -moz-background-size: 1620px 377px;
    background-size: 1620px 377px;
  }
}
/* line 678, ../sass/screen.scss */
.buttons-square {
  display: inline-block;
  background-color: #FFF;
  padding: 15px 30px;
  -moz-box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
  filter: progid:DXImageTransform.Microsoft.Shadow(color=rgba(0,0,0,0.3), Direction=134, Strength=0);
  font-family: "GeogtReg", Arial;
  font-size: 17px;
  color: #16a085;
  text-decoration: none;
  -webkit-transition: -webkit-box-shadow 0.1s;
  -o-transition: -o-box-shadow 0.1s;
  -moz-transition: -moz-box-shadow 0.1s;
  transition: box-shadow 0.1s;
}
/* line 691, ../sass/screen.scss */
.buttons-square .medium {
  font-family: "GeogtMed";
}

/* line 701, ../sass/screen.scss */
.buttons-square:hover {
  -moz-box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.3);
}

/* line 708, ../sass/screen.scss */
.bt-lab {
  position: absolute;
  top: 330px;
  left: 450px;
}

/* Common styles and resets */
/* line 717, ../sass/screen.scss */
.dotcontainer {
  text-align: center;
  z-index: 15;
  margin: auto;
  width: 100%;
  position: absolute;
  top: 450px;
  margin-left: -50px;
}

/* line 727, ../sass/screen.scss */
.dotstyle {
  position: absolute;
  z-index: 15;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* line 743, ../sass/screen.scss */
.dotstyle li {
  position: relative;
  display: block;
  float: left;
  margin: 0 7px;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

/* line 753, ../sass/screen.scss */
.dotstyle li a {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  text-indent: -999em;
  /* make the text accessible to screen readers */
  cursor: pointer;
  position: absolute;
}

/* line 767, ../sass/screen.scss */
.dotstyle li a:focus {
  outline: none;
}

/* Fill up */
/* line 775, ../sass/screen.scss */
.dotstyle-fillup li a {
  overflow: hidden;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px white;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

/* line 783, ../sass/screen.scss */
.dotstyle-fillup li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 1px #fff;
  -webkit-transition: height 0.3s ease;
  transition: height 0.3s ease;
}

/* line 797, ../sass/screen.scss */
.dotstyle-fillup li a:hover,
.dotstyle-fillup li a:focus {
  background-color: rgba(0, 0, 0, 0.2);
}

/* line 801, ../sass/screen.scss */
.dotstyle-fillup li.current a::after {
  height: 100%;
}

/* line 806, ../sass/screen.scss */
.clear {
  clear: both;
}

/* line 811, ../sass/screen.scss */
#recent-projects {
  padding-top: 70px;
  padding-bottom: 20px;
}

/* line 816, ../sass/screen.scss */
.titre {
  margin: auto;
  width: 99%;
  padding-bottom: 10px;
  position: relative;
  font-family: "GeogtReg", Arial;
  font-size: 23px;
  color: #808080;
  border-bottom: 1px solid #e0e2e5;
  letter-spacing: -1px;
  text-transform: uppercase;
  clear: both;
}
/* line 828, ../sass/screen.scss */
.titre span.firstLetter {
  font-size: 25px;
}
/* line 831, ../sass/screen.scss */
.titre span.sujet {
  font-family: "GeogtSmB", Arial;
  font-size: 25px;
  color: #1abc9c;
  letter-spacing: -0.5px;
}
/* line 837, ../sass/screen.scss */
.titre span.souligne {
  position: absolute;
  display: block;
  bottom: -2px;
  left: 0px;
  width: 50px;
  height: 3px;
  background-color: #1abc9c;
}

/* line 848, ../sass/screen.scss */
#bloc-container {
  position: relative;
  width: 98%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 80px;
  text-align: center;
}
/* line 855, ../sass/screen.scss */
#bloc-container .square {
  -webkit-box-shadow: inset 0 0 0 5px white;
  -moz-box-shadow: inset 0 0 0 5px white;
  box-shadow: inset 0 0 0 5px white;
  position: relative;
  float: left;
  background-color: #000000;
  cursor: pointer;
  background-size: 110% auto;
  background-position: center;
  transition-property: background-size;
  -moz-transition-property: background-size;
  /* Firefox 4 */
  -webkit-transition-property: background-size;
  /* Safari and Chrome */
  -o-transition-property: background-size;
  /* Opera */
  transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  /* Firefox 4 */
  -webkit-transition-duration: 0.2s;
  /* Safari and Chrome */
  -o-transition-duration: 0.2s;
  /* Opera */
  transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
}
/* line 882, ../sass/screen.scss */
#bloc-container .square:hover {
  background-size: 100% auto;
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  /* Firefox 4 */
  -webkit-transition-duration: 0.4s;
  /* Safari and Chrome */
  -o-transition-duration: 0.4s;
  /* Opera */
}
/* line 889, ../sass/screen.scss */
#bloc-container .big {
  width: 49.8%;
  height: 200px;
}
/* line 893, ../sass/screen.scss */
#bloc-container .middle {
  width: 50%;
  height: 100px;
}
/* line 897, ../sass/screen.scss */
#bloc-container .little {
  width: 25%;
  height: 100px;
}
/* line 901, ../sass/screen.scss */
#bloc-container .clear {
  width: 100%;
  height: 100%;
  position: relative;
  clear: both;
}
/* line 907, ../sass/screen.scss */
#bloc-container .shadow {
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-box-shadow: inset 0 0 0 5px white;
  -moz-box-shadow: inset 0 0 0 5px white;
  box-shadow: inset 0 0 0 5px white;
  opacity: 0.4;
}
/* line 916, ../sass/screen.scss */
#bloc-container .barre-titre {
  position: absolute;
  bottom: 0px;
  width: 84%;
  padding-left: 8%;
  padding-right: 8%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  font-family: "GeogtMed", Arial;
  font-size: 13px;
  color: #333;
  display: none;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}
/* line 931, ../sass/screen.scss */
#bloc-container .barre-titre .type {
  font-style: italic;
  font-family: "GeogtReg", Arial;
  color: #777;
  font-size: 11px;
}
/* line 939, ../sass/screen.scss */
#bloc-container .grid-sizer {
  width: 25%;
}

/* line 944, ../sass/screen.scss */
.bt-projets {
  position: relative;
  margin-top: 80px;
  background-color: #333;
  color: #FFF;
}

/* line 950, ../sass/screen.scss */
.bt-projets.link {
  position: absolute;
  bottom: -22px;
  left: 50%;
  margin-left: -75px;
  background-color: #333;
  color: #FFF;
}

/* line 959, ../sass/screen.scss */
.separator1 {
  width: 100%;
  height: 10px;
  background-image: url(../img/separator1.png);
  background-size: 20px 10px;
  background-repeat: repeat-x;
}

/* line 967, ../sass/screen.scss */
#container2 {
  background-color: #1abc9c;
  min-height: 240px;
}

/* line 973, ../sass/screen.scss */
#container3 {
  background-color: #19b697;
  min-height: 200px;
  border-top: 1px solid #19b294;
}

/* line 980, ../sass/screen.scss */
#footer {
  border-top: 1px solid #07332a;
  background-color: #333;
  min-height: 100px;
  text-align: center;
}
/* line 985, ../sass/screen.scss */
#footer .name {
  font-family: "GeogtMed", Arial;
  color: #EEE;
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 50px;
  margin-bottom: 5px;
}
/* line 993, ../sass/screen.scss */
#footer .work {
  font-family: "RalewayLight", Arial;
  color: #CCC;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  width: 80%;
  border-top: 1px solid #EEE;
  margin: auto;
  padding-top: 8px;
  padding-bottom: 50px;
  line-height: 17px;
}

/* line 1008, ../sass/screen.scss */
h1 {
  font-family: "GeogtReg", Arial;
  color: #FFF;
  font-size: 23px;
  padding-top: 50px;
  padding-bottom: 20px;
}
/* line 1014, ../sass/screen.scss */
h1 .medium {
  font-family: "GeogtMed", Arial;
}

/* line 1019, ../sass/screen.scss */
p {
  font-family: "HelveticaNeueThin", Arial;
  font-size: 17px;
  line-height: 21px;
}

/* line 1024, ../sass/screen.scss */
p.white {
  color: white;
}

/* line 1028, ../sass/screen.scss */
.col {
  width: 49%;
  float: left;
  margin-top: 30px;
  padding-bottom: 50px;
  margin-bottom: 30px;
  position: relative;
}
/* line 1035, ../sass/screen.scss */
.col h1 {
  padding-top: 20px;
}
/* line 1038, ../sass/screen.scss */
.col.left {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
/* line 1042, ../sass/screen.scss */
.col.right h1, .col.right p {
  margin-left: 50px;
  color: white;
}

/* line 1050, ../sass/screen.scss */
.bt-apropos {
  position: absolute;
  right: 0px;
}

/* line 1055, ../sass/screen.scss */
.bt-contact2 {
  position: relative;
  float: right;
  margin-top: -75px;
  margin-right: 30px;
}

/* line 1062, ../sass/screen.scss */
#recent-projects.aproposctn {
  padding-bottom: 100px;
}

/* line 1067, ../sass/screen.scss */
#liens-sociaux a {
  display: inline-block;
  width: 43px;
  height: 50px;
  text-decoration: none;
  font-family: "IconSocial";
  font-size: 40px;
  color: black;
  opacity: 0.3;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  margin-top: 10px;
}
/* line 1084, ../sass/screen.scss */
#liens-sociaux a:hover {
  opacity: 0.6;
}
/* line 1087, ../sass/screen.scss */
#liens-sociaux .picto-facebook:before {
  content: "\e000";
}
/* line 1090, ../sass/screen.scss */
#liens-sociaux .picto-twitter:before {
  content: "\e006";
}
/* line 1093, ../sass/screen.scss */
#liens-sociaux .picto-pinterest:before {
  content: "\e005";
}
/* line 1096, ../sass/screen.scss */
#liens-sociaux .picto-linkedin:before {
  content: "\e003";
}

/* line 1101, ../sass/screen.scss */
.picto-mail {
  opacity: 0.3;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  font-family: "IconSocial";
  font-size: 50px;
  color: black;
  opacity: 0.3;
  text-decoration: none;
  float: left;
  margin-left: 50px;
  margin-top: 65px;
  margin-right: 30px;
}

/* line 1116, ../sass/screen.scss */
.picto-mail:hover {
  opacity: 0.6;
}

/* line 1120, ../sass/screen.scss */
.picto-mail:before {
  content: "\e004";
}

/* line 1126, ../sass/screen.scss */
.triple {
  width: 33%;
  min-height: 105px;
  float: left;
  margin-top: 20px;
  margin-bottom: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
/* line 1133, ../sass/screen.scss */
.triple.last {
  border-right: none;
}

.doublenew{
  width: 49%;
  display: inline-block;
  margin-top: 20px;
  vertical-align: top;
  padding-bottom: 20px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.doublenew h2{
  font-family: "GeogtMed", Arial;
  color: #666;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 25px;
}
/* line 1136, ../sass/screen.scss */
.triple h2 {
  font-family: "GeogtMed", Arial;
  color: #666;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
}

/* line 1147, ../sass/screen.scss */
p.list {
  font-family: "RalewayLight", Arial;
  font-size: 14px;
  text-align: center;
  font-style: italic;
  width: 90%;
  margin: 10px auto;
  color: #666;
}

/* line 1157, ../sass/screen.scss */
span.logiciel {
  display: inline-block;
  text-align: center;
}

/* line 1163, ../sass/screen.scss */
.picto-logiciel {
  font-family: "IconAdobe";
  font-size: 70px;
  display: block;
  font-style: normal;
  margin-top: 20px;
}

/* line 1171, ../sass/screen.scss */
.picto-photoshop:before {
  content: "\e000";
  color: #2490ea;
}

/* line 1176, ../sass/screen.scss */
.picto-illustrator:before {
  content: "\e002";
  color: #ffbd52;
  font-size: 72px;
}

/* line 1181, ../sass/screen.scss */
.picto-indesign:before {
  content: "\e001";
  color: #db007b;
  font-size: 77px;
}

/* line 1188, ../sass/screen.scss */
span.nom-logiciel {
  display: inline-block;
  font-family: "RalewayLight", Arial;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  color: #666;
  margin-top: 15px;
}

/* line 1199, ../sass/screen.scss */
#resume-timeline {
  width: 98%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 60px;
  clear: both;
  position: relative;
}
/* line 1206, ../sass/screen.scss */
#resume-timeline .ligne {
  height: 100%;
  width: 1px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  left: 50%;
}
/* line 1213, ../sass/screen.scss */
#resume-timeline .etape {
  width: 432px;
  clear: both;
  margin-top: -40px;
  position: relative;
}
/* line 1218, ../sass/screen.scss */
#resume-timeline .etape.right {
  float: right;
}
/* line 1220, ../sass/screen.scss */
#resume-timeline .etape.right .desc {
  background-image: url(../img/bg-timeline2.png);
  background-position: left center;
  padding-left: 50px;
  padding-top: 20px;
}
/* line 1227, ../sass/screen.scss */
#resume-timeline .etape.right .desc:after {
  content: "";
  display: block;
  width: 80%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 20%;
  background-color: #f7f7f7;
  z-index: -1;
}
/* line 1238, ../sass/screen.scss */
#resume-timeline .etape.right .round {
  top: 50%;
  margin-top: -5px;
  left: -13px;
}
/* line 1243, ../sass/screen.scss */
#resume-timeline .etape.right span.date {
  left: 50px;
}
/* line 1247, ../sass/screen.scss */
#resume-timeline .etape.left {
  float: left;
}
/* line 1249, ../sass/screen.scss */
#resume-timeline .etape.left .desc {
  background-image: url(../img/bg-timeline.png);
  background-position: right center;
  padding-left: 20px;
  padding-top: 20px;
}
/* line 1256, ../sass/screen.scss */
#resume-timeline .etape.left .desc:after {
  content: "";
  display: block;
  width: 80%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #f7f7f7;
  z-index: -1;
}
/* line 1267, ../sass/screen.scss */
#resume-timeline .etape.left .round {
  top: 50%;
  margin-top: -5px;
  right: -14px;
}
/* line 1272, ../sass/screen.scss */
#resume-timeline .etape.left span.date {
  left: 20px;
}
/* line 1276, ../sass/screen.scss */
#resume-timeline .etape .desc {
  min-height: 55px;
  height: auto;
  padding-bottom: 47px;
  background-size: 600px 400px;
  font-family: "HelveticaNeueMedium", Arial;
  font-size: 13px;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
/* line 1287, ../sass/screen.scss */
#resume-timeline .etape .desc h3 {
  font-size: 13px;
  margin: 0px;
  padding: 0px;
  width: 90%;
  margin-bottom: 7px;
  letter-spacing: 0px;
  font-family: "RalewayMedium", Arial;
  color: #18ac8f;
}
/* line 1297, ../sass/screen.scss */
#resume-timeline .etape .desc p {
  font-size: 13px;
  margin: 0px;
  padding: 0px;
  width: 90%;
  line-height: 18px;
}
/* line 1304, ../sass/screen.scss */
#resume-timeline .etape .desc span.place {
  color: #777;
  font-family: "RalewayLight", Arial;
  font-size: 10px;
  margin-left: 10px;
}
/* line 1310, ../sass/screen.scss */
#resume-timeline .etape .desc span.date {
  position: absolute;
  bottom: 20px;
  /*color: #1abc9c;*/
  font-family: "RalewayMedium", Arial;
  font-size: 11px;
}
/* line 1318, ../sass/screen.scss */
#resume-timeline .etape .round {
  width: 9px;
  height: 9px;
  -webkit-border-radius: 5px 5px;
  -moz-border-radius: 5px / 5px;
  border-radius: 5px / 5px;
  background-color: #DDD;
  position: absolute;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
/* line 1331, ../sass/screen.scss */
#resume-timeline .etape:hover .desc {
  opacity: 1;
}
/* line 1334, ../sass/screen.scss */
#resume-timeline .etape:hover .round {
  background-color: #666;
}
/* line 1338, ../sass/screen.scss */
#resume-timeline .clear {
  width: 100%;
  height: 10px;
  clear: both;
}

/* line 1346, ../sass/screen.scss */
.loisirs-ctn {
  text-align: center;
}

/* line 1351, ../sass/screen.scss */
.buttons-rounds.loisirs {
  position: relative;
  margin-top: 20px;
  margin-bottom: 100px;
  color: white !important;
  display: inline-block;
  width: 110px;
  margin-left: 18px;
  margin-right: 18px;
  text-align: left;
}
/* line 1361, ../sass/screen.scss */
.buttons-rounds.loisirs a {
  cursor: default !important;
}
/* line 1364, ../sass/screen.scss */
.buttons-rounds.loisirs .button {
  background-color: #555;
  border: none;
}
/* line 1368, ../sass/screen.scss */
.buttons-rounds.loisirs .button:hover {
  background-color: #1abc9c;
  color: white !important;
}
/* line 1372, ../sass/screen.scss */
.buttons-rounds.loisirs .buttons-legend {
  color: #555;
  text-transform: uppercase;
}

/* line 1378, ../sass/screen.scss */
.icon-loisir-0:before {
  content: "\e000";
  font-family: "IconLoisir", Arial;
  font-size: 34px;
}

/* line 1383, ../sass/screen.scss */
.icon-loisir-1:before {
  content: "\e001";
  font-family: "IconLoisir", Arial;
  font-size: 60px;
  margin-left: -2px;
}

/* line 1389, ../sass/screen.scss */
.icon-loisir-2:before {
  content: "\e002";
  font-family: "IconLoisir", Arial;
  font-size: 27px;
  margin-right: 3px;
  display: block;
}

/* line 1396, ../sass/screen.scss */
.icon-loisir-3:before {
  content: "\e003";
  font-family: "IconLoisir", Arial;
  font-size: 30px;
}

/* line 1401, ../sass/screen.scss */
.icon-loisir-4:before {
  content: "\e004";
  font-family: "IconLoisir", Arial;
  font-size: 25px;
}

/* line 1406, ../sass/screen.scss */
.icon-loisir-5:before {
  content: "\e005";
  font-family: "IconLoisir", Arial;
  font-size: 30px;
}

/* line 1417, ../sass/screen.scss */
#headerProjets {
  width: 100%;
  height: auto;
  min-height: 230px;
  background-color: #1abc9c;
  background-image: url(../img/fond2.png);
  background-position: -5px -5px;
  z-index: 5;
  position: relative;
  overflow: hidden;
}
/* line 1427, ../sass/screen.scss */
#headerProjets .text {
  margin-top: 50px;
  margin-bottom: 30px;
  color: white;
  font-size: 24px;
  font-family: "HelveticaNeueThin", Arial;
  line-height: 30px;
  position: relative;
}
/* line 1435, ../sass/screen.scss */
#headerProjets .text .medium {
  font-family: "HelveticaNeueMedium", Arial;
}
/* line 1438, ../sass/screen.scss */
#headerProjets .text span.ecart {
  display: inline-block;
  margin-right: 18px;
}
/* line 1442, ../sass/screen.scss */
#headerProjets .text .little {
  font-size: 20px;
  font-family: "GeogtMed", Arial;
  margin-left: 8px;
  margin-top: 20px;
  display: inline-block;
  clear: both;
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
}
/* line 1453, ../sass/screen.scss */
#headerProjets .text .filtre-ctn {
  display: block;
  width: 100%;
  text-align: center;
}
/* line 1458, ../sass/screen.scss */
#headerProjets .text .filtre {
  display: inline-block;
  white-space: nowrap;
  font-family: "RalewayLight";
  font-size: 15px;
  margin-right: 20px;
  cursor: pointer;
  margin-left: 10px;
}
/* line 1466, ../sass/screen.scss */
#headerProjets .text .filtre .selector {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: 1px;
  margin-right: 10px;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px white;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
/* line 1477, ../sass/screen.scss */
#headerProjets .text .filtre .selector span {
  position: absolute;
  width: 100%;
  height: 0px;
  bottom: 0px;
  left: 0px;
  overflow: hidden;
  background-color: #FFF;
  box-shadow: inset 0 0 0 2px white;
  -webkit-transition: height 0.3s ease;
  transition: height 0.3s ease;
}
/* line 1490, ../sass/screen.scss */
#headerProjets .text .filtre .selector.selected span {
  height: 100%;
  bottom: 0px;
  left: 0px;
}
/* line 1499, ../sass/screen.scss */
#headerProjets .text .filtre:hover .selector {
  background-color: rgba(0, 0, 0, 0.4);
}

/* line 1506, ../sass/screen.scss */
#projet_entete {
  width: 100%;
  height: auto;
  min-height: 230px;
  background-color: #1abc9c;
  background-image: url(../img/fond2.png);
  background-position: -5px -5px;
  z-index: 5;
  position: relative;
  overflow: hidden;
}
/* line 1517, ../sass/screen.scss */
#projet_entete .title {
  width: 340px;
  text-align: right;
  margin-top: 40px;
}
/* line 1522, ../sass/screen.scss */
#projet_entete h1 {
  margin-bottom: 0px;
  padding-bottom: 10px;
}
/* line 1526, ../sass/screen.scss */
#projet_entete h3 {
  font-family: "HelveticaNeueThin";
  text-transform: uppercase;
  font-size: 17px;
  color: white;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

/* line 1537, ../sass/screen.scss */
.projet_content .featured_image {
  width: 510px;
  height: 350px;
  position: absolute;
  top: -190px;
  right: 0px;
  background-size: cover;
  background-position: center center;
  z-index: 10;
  border: 5px solid white;
}
/* line 1548, ../sass/screen.scss */
.projet_content .fiche {
  height: 220px;
  width: 340px;
  text-align: right;
}
/* line 1552, ../sass/screen.scss */
.projet_content .fiche span {
  display: block;
  font-family: "RalewayLight";
  font-size: 13px;
  margin-top: 15px;
}
/* line 1557, ../sass/screen.scss */
.projet_content .fiche span b {
  font-family: "RalewayMedium";
}
/* line 1561, ../sass/screen.scss */
.projet_content .fiche span:first-child {
  margin-top: 30px;
}
/* line 1564, ../sass/screen.scss */
.projet_content .fiche a {
  color: #333;
  text-decoration: none;
}
/* line 1568, ../sass/screen.scss */
.projet_content .fiche a:hover {
  color: #1abc9c;
}
/* line 1572, ../sass/screen.scss */
.projet_content .resume {
  clear: both;
  text-align: justify;
  margin: auto;
}
/* line 1578, ../sass/screen.scss */
.projet_content .images img {
  width: 100%;
  margin: auto;
  margin-top: 40px;
  /*border: 5px solid #ececec;*/
}

/* line 1588, ../sass/screen.scss */
.svg-wrap {
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

/* line 1597, ../sass/screen.scss */
.nav-thumbflip {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* line 1603, ../sass/screen.scss */
.nav-thumbflip a {
  position: absolute;
  top: 50%;
  display: block;
  outline: none;
  text-align: left;
  z-index: 1000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* line 1615, ../sass/screen.scss */
.nav-thumbflip a.prev {
  left: 0;
}

/* line 1619, ../sass/screen.scss */
.nav-thumbflip a.next {
  right: 0;
}

/* line 1623, ../sass/screen.scss */
.nav-thumbflip a svg {
  display: block;
  margin: 0 auto;
  padding: 0;
}

/* line 1630, ../sass/screen.scss */
.nav-thumbflip a {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* line 1635, ../sass/screen.scss */
.nav-thumbflip a.prev {
  -webkit-perspective-origin: 100% 50%;
  perspective-origin: 100% 50%;
}

/* line 1640, ../sass/screen.scss */
.nav-thumbflip a.next {
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

/* line 1645, ../sass/screen.scss */
.nav-thumbflip .icon-wrap {
  display: block;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

/* line 1654, ../sass/screen.scss */
.nav-thumbflip svg.icon {
  position: relative;
  top: 50%;
  -webkit-transition: fill 0.3s;
  transition: fill 0.3s;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  fill: #fff;
}

/* line 1664, ../sass/screen.scss */
.nav-thumbflip .image {
  position: absolute;
  top: 0;
  display: block;
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center center;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* line 1678, ../sass/screen.scss */
.nav-thumbflip a.prev .image {
  left: 100%;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

/* line 1686, ../sass/screen.scss */
.nav-thumbflip a.next .image {
  right: 100%;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

/* line 1694, ../sass/screen.scss */
.nav-thumbflip a:hover .icon-wrap {
  background-color: #fff;
}

/* line 1698, ../sass/screen.scss */
.nav-thumbflip a:hover svg.icon {
  fill: #1abc9c;
}

/* line 1702, ../sass/screen.scss */
.nav-thumbflip a:hover .image {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* line 1709, ../sass/screen.scss */
.projets-list {
  margin-bottom: 100px;
}

/* line 1713, ../sass/screen.scss */
.picto-projet {
  display: inline-block;
  font-family: "IconProjet", Arial;
  font-size: 60px;
  color: white;
  float: left;
  margin-left: 12px;
  margin-top: 13px;
  margin-right: 2px;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  transform: rotate(-6deg);
}

/* line 1724, ../sass/screen.scss */
.picto-projet:before {
  content: "\e000";
}

/* line 1734, ../sass/screen.scss */
#headerProjet {
  width: 100%;
  height: 400px;
  background-size: contain;
}

/* line 1740, ../sass/screen.scss */
#ctn-description-projet {
  border-top: 5px solid #efefef;
}

/* line 1743, ../sass/screen.scss */
#description-projet {
  padding-top: 80px;
  padding-bottom: 100px;
}
/* line 1746, ../sass/screen.scss */
#description-projet .titre-projet {
  font-family: "RalewayLight", Arial;
  font-size: 30px;
  color: #333;
  text-transform: uppercase;
  text-align: center;
  width: 90%;
  margin: auto;
  letter-spacing: -0.5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #555;
  margin-bottom: 10px;
}
/* line 1759, ../sass/screen.scss */
#description-projet .activite {
  font-family: "RalewayLight", Arial;
  font-size: 15px;
  text-align: center;
  margin-bottom: 30px;
}

/* line 1766, ../sass/screen.scss */
#description-projet:after {
  content: ' ';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  display: block;
  margin-left: -10px;
  z-index: 10;
  bottom: -15px;
  margin-left: -16px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid #fff;
}

/* line 1782, ../sass/screen.scss */
#ctn-screens-projet {
  background-color: #efefef;
  min-height: 100px;
  padding-bottom: 50px;
}
/* line 1786, ../sass/screen.scss */
#ctn-screens-projet .projet-img {
  width: 100%;
}

/* line 1792, ../sass/screen.scss */
#ctn-retour .buttons-square {
  margin: 100px 0px;
}

/* line 1798, ../sass/screen.scss */
#ctn-contact {
  min-height: 500px;
  background-color: #efefef;
  background-image: url(../img/fond.png);
}

/* line 1804, ../sass/screen.scss */
#form-contact {
  width: 50%;
  height: 400px;
  background-color: #FFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: right;
  margin-top: 50px;
}

/* line 1815, ../sass/screen.scss */
.masonry {
  width: 100%;
  max-width: 100%;
}

/* line 1820, ../sass/screen.scss */
.stamp {
  background-color: #CCC;
}

/* line 1824, ../sass/screen.scss */
.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

/* line 1843, ../sass/screen.scss */
.md-show {
  visibility: visible;
}

/* line 1847, ../sass/screen.scss */
.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* line 1862, ../sass/screen.scss */
.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}

/* Content styles */
/* line 1868, ../sass/screen.scss */
.md-content {
  color: #fff;
  background: #1abc9c;
  position: relative;
  border-radius: 3px;
  margin: 0 auto;
}

/* line 1876, ../sass/screen.scss */
.md-content h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
  font-size: 2.4em;
  font-weight: 300;
  color: white;
  font-family: "GeogtMed", Arial;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0 0;
}

/* line 1888, ../sass/screen.scss */
.md-content > div {
  padding: 15px 40px 30px;
  margin: 0;
  font-weight: 300;
  font-size: 1.15em;
  font-family: "RalewayLight", Arial;
}

/* line 1896, ../sass/screen.scss */
.md-content > div p {
  margin: 0;
  padding: 10px 0;
}

/* line 1901, ../sass/screen.scss */
.md-content > div ul {
  margin: 0;
  padding: 0 0 30px 20px;
}

/* line 1906, ../sass/screen.scss */
.md-content > div ul li {
  padding: 5px 0;
}

/* line 1910, ../sass/screen.scss */
.md-content button {
  display: block;
  margin: 0 auto;
  font-size: 0.8em;
}

/* Effect 11: Super scaled */
/* line 1917, ../sass/screen.scss */
.md-effect-11 .md-content {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* line 1928, ../sass/screen.scss */
.md-show.md-effect-11 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/* line 1937, ../sass/screen.scss */
.contact-modal-ctn {
  text-align: center;
}
/* line 1940, ../sass/screen.scss */
.contact-modal-ctn .contact-icon {
  display: inline-block;
  text-align: center;
  margin: 15px;
}
/* line 1945, ../sass/screen.scss */
.contact-modal-ctn .picto-mail {
  margin: 0;
  display: inline-block;
  float: none;
}
/* line 1950, ../sass/screen.scss */
.contact-modal-ctn .legend {
  font-size: 13px;
  display: block;
  margin-top: 10px;
}
/* line 1956, ../sass/screen.scss */
.contact-modal-ctn .md-close {
  margin-top: 50px;
}
/* line 1960, ../sass/screen.scss */
.contact-modal-ctn .fa-skype, .contact-modal-ctn .fa-phone, .contact-modal-ctn .fa-envelope {
  color: black;
  opacity: 0.3;
  text-decoration: none;
  font-size: 45px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
/* line 1970, ../sass/screen.scss */
.contact-modal-ctn .fa-envelope {
  font-size: 40px;
}
/* line 1974, ../sass/screen.scss */
.contact-modal-ctn .fa:hover {
  opacity: 0.6;
}

/* line 1980, ../sass/screen.scss */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

/* line 1986, ../sass/screen.scss */
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 1400px) {
  /* line 1997, ../sass/screen.scss */
  #bloc-container .big, #bloc-container .middle {
    width: 33.2%;
  }

  /* line 2000, ../sass/screen.scss */
  #bloc-container .little {
    width: 16.666666%;
  }

  /* line 2004, ../sass/screen.scss */
  #bloc-container .grid-sizer {
    width: 16.666666%;
  }
}
@media screen and (max-width: 1120px) {
  /* line 2011, ../sass/screen.scss */
  .nav-thumbflip {
    display: none;
  }
}
@media screen and (max-width: 1015px) {
  /* line 2017, ../sass/screen.scss */
  #resume-timeline .ligne {
    left: 0%;
  }

  /* line 2020, ../sass/screen.scss */
  #resume-timeline .etape.left, #resume-timeline .etape.right {
    float: left;
    margin-left: 9px;
  }

  /* line 2024, ../sass/screen.scss */
  #resume-timeline .etape {
    width: 100%;
  }

  /* line 2027, ../sass/screen.scss */
  #resume-timeline .etape.left .desc, #resume-timeline .etape.right .desc {
    background-image: url(../img/bg-timeline2.png);
    background-position: left center;
    padding-left: 50px;
    padding-top: 20px;
    background-repeat: no-repeat;
  }

  /* line 2035, ../sass/screen.scss */
  #resume-timeline .etape.left .round {
    left: -13px;
  }

  /* line 2038, ../sass/screen.scss */
  #resume-timeline .etape {
    margin-top: 20px;
  }

  /* line 2041, ../sass/screen.scss */
  #resume-timeline .etape.left span.date {
    left: auto;
  }

  /* line 2045, ../sass/screen.scss */
  #resume-timeline .etape.left .desc:after {
    left: 20%;
  }

  /* line 2049, ../sass/screen.scss */
  .projet_content .featured_image {
    position: relative;
    top: auto;
    right: auto;
    margin-top: -80px;
    width: 100%;
    height: 570px;
  }

  /* line 2057, ../sass/screen.scss */
  #projet_entete .title {
    width: 100%;
    text-align: center;
    margin-top: 0;
  }

  /* line 2062, ../sass/screen.scss */
  .projet_content .fiche {
    height: auto;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 50px;
  }
}
@media screen and (max-width: 960px) {
  /* line 2074, ../sass/screen.scss */
  .dev-sprite {
    left: 50%;
    margin-left: -204px;
  }

  /* line 2079, ../sass/screen.scss */
  .dev-text {
    top: 50px;
    left: auto;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    /*font-size: 19px;
    line-height: 25px;*/
  }

  /* line 2089, ../sass/screen.scss */
  .slide-text span.ecart, #headerProjets .text span.ecart {
    margin: 0;
  }

  /* line 2093, ../sass/screen.scss */
  .buttons-rounds {
    display: none;
  }

  /* line 2097, ../sass/screen.scss */
  .graphisme-sprite {
    left: 50%;
    margin-left: -142px;
    top: 20px;
  }

  /* line 2102, ../sass/screen.scss */
  .graphisme-text {
    top: -36px;
    left: auto;
    width: 100%;
    text-align: center;
  }

  /* line 2109, ../sass/screen.scss */
  .rd-sprite {
    left: 50%;
    margin-left: -91px;
    top: -10px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }

  /* line 2125, ../sass/screen.scss */
  .rd-text {
    top: -30px;
    left: auto;
    width: 100%;
    text-align: center;
  }

  /* line 2131, ../sass/screen.scss */
  .bt-lab {
    display: none;
  }

  /* line 2135, ../sass/screen.scss */
  .resume-sprite {
    left: 50%;
    margin-left: -270px;
    top: 0px;
  }

  /* line 2140, ../sass/screen.scss */
  .aproposheader .resume-sprite {
    top: 30px;
  }

  /* line 2143, ../sass/screen.scss */
  .bt-contact, .bt-cv {
    display: none;
  }

  /* line 2146, ../sass/screen.scss */
  div#firstBand.aproposheader {
    text-align: center;
    min-height: 500px;
    height: auto;
  }

  /* line 2151, ../sass/screen.scss */
  .aproposheader .wrapper {
    padding-top: 420px;
    margin-bottom: 30px;
  }

  /* line 2155, ../sass/screen.scss */
  .aproposheader .bt-contact, .aproposheader .bt-cv {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    display: inline-block;
    text-align: center;
    top: auto;
    left: auto;
    margin-bottom: 10px;
  }

  /* line 2166, ../sass/screen.scss */
  .resume-text {
    top: 0px;
  }

  /* line 2170, ../sass/screen.scss */
  #container2 {
    text-align: center;
  }

  /* line 2173, ../sass/screen.scss */
  .bt-contact2 {
    float: none;
    margin-top: 30px;
    margin-bottom: 80px;
    display: inline-block;
  }

  /* line 2180, ../sass/screen.scss */
  .col, .col.left, .col.right {
    float: none;
    width: 100%;
    text-align: center;
    border: none;
    margin: 0;
  }

  /* line 2188, ../sass/screen.scss */
  #container3 .col.left h1 {
    margin-top: 30px;
  }

  /* line 2191, ../sass/screen.scss */
  #container3 .col.left {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* line 2194, ../sass/screen.scss */
  #container3 .adresse {
    max-width: 390px;
    text-align: left;
    margin: auto;
  }

  /* line 2200, ../sass/screen.scss */
  .projet_content .featured_image {
    height: 570px;
  }
}
@media screen and (max-width: 768px) {
  /* line 2207, ../sass/screen.scss */
  header {
    height: 70px;
  }
  /* line 2209, ../sass/screen.scss */
  header nav {
    display: block;
    width: 100%;
    height: 0%;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.95);
    top: 0;
    left: 0;
    z-index: 10000;
    margin: 0;
    text-align: center;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  }
  /* line 2225, ../sass/screen.scss */
  header nav a {
    width: 100%;
    text-align: center;
    margin: 0;
    margin-top: 50px;
    -webkit-transition: -webkit-transform 0.3s 0.3s, opacity 0.3s 0.3s;
    -moz-transition: -moz-transform 0.3s 0.3s, opacity 0.3s 0.3s;
    transition: transform 0.3s 0.3s, opacity 0.3s 0.3s;
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    -moz-transform: translate3d(0, 30px, 0);
    -ms-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
  /* line 2242, ../sass/screen.scss */
  header nav a:first-child {
    margin-top: 100px;
  }
  /* line 2247, ../sass/screen.scss */
  header nav.open {
    display: block;
    height: 100%;
  }
  /* line 2252, ../sass/screen.scss */
  header a.open {
    opacity: 1;
    -webkit-transform: translate3d(0, 0px, 0);
    -moz-transform: translate3d(0, 0px, 0);
    -ms-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  /* line 2259, ../sass/screen.scss */
  header a#titre {
    margin-top: 23px;
  }
  /* line 2262, ../sass/screen.scss */
  header #bt-menu {
    display: block;
  }

  /* line 2267, ../sass/screen.scss */
  .dev-text {
    font-size: 25px;
    line-height: 30px;
  }

  /* line 2272, ../sass/screen.scss */
  .graphisme-text {
    font-size: 23px;
  }

  /* line 2276, ../sass/screen.scss */
  .triple, .doublenew {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* line 2283, ../sass/screen.scss */
  .triple.last, .doublenew.last {
    border-bottom: none !important;
    margin-bottom: 50px;
  }


  /* line 2288, ../sass/screen.scss */
  .projet_content .featured_image {
    height: 430px;
  }
}
@media screen and (max-width: 560px) {
  /* line 2295, ../sass/screen.scss */
  .resume-sprite {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    top: 0px;
  }

  /* line 2308, ../sass/screen.scss */
  #bloc-container .big, #bloc-container .middle, #bloc-container .little {
    width: 100%;
  }

  /* line 2311, ../sass/screen.scss */
  #bloc-container .grid-sizer {
    width: 100%;
  }

  /* line 2315, ../sass/screen.scss */
  .projet_content .featured_image {
    height: 340px;
  }
}
@media screen and (max-width: 480px) {
  /* line 2322, ../sass/screen.scss */
  .dev-text {
    top: 60px;
    font-size: 23px;
    line-height: 27px;
  }

  /* line 2327, ../sass/screen.scss */
  .dev-sprite {
    left: 50%;
    margin-left: -204px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }

  /* line 2343, ../sass/screen.scss */
  .slide-text span.nb {
    display: inline;
  }

  /* line 2347, ../sass/screen.scss */
  .rd-text {
    font-size: 23px;
    line-height: 26px;
  }

  /* line 2351, ../sass/screen.scss */
  .rd-sprite {
    top: -20px;
  }

  /* line 2355, ../sass/screen.scss */
  .resume-sprite {
    -webkit-transform: scale(0.65);
    -moz-transform: scale(0.65);
    -ms-transform: scale(0.65);
    transform: scale(0.65);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    top: -70px;
  }

  /* line 2367, ../sass/screen.scss */
  .resume-text {
    top: -20px;
  }

  /* line 2371, ../sass/screen.scss */
  .picto-mail {
    margin-left: 10px;
    margin-right: 20px;
  }

  /* line 2376, ../sass/screen.scss */
  #container3 .adresse p {
    font-size: 16px;
  }

  /* line 2379, ../sass/screen.scss */
  #liens-sociaux a {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* line 2384, ../sass/screen.scss */
  .picto-projet {
    font-size: 50px;
    margin-left: 1px;
    margin-top: 10px;
  }

  /* line 2389, ../sass/screen.scss */
  #headerProjets .text {
    font-size: 18px;
    line-height: 23px;
  }

  /* line 2394, ../sass/screen.scss */
  .aproposheader .resume-sprite {
    top: -90px;
  }

  /* line 2397, ../sass/screen.scss */
  .aproposheader .wrapper {
    padding-top: 330px;
  }

  /* line 2401, ../sass/screen.scss */
  .projet_content .featured_image {
    height: 250px;
  }
}