/* 1. Reset CSS
======================================================================================= */
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,font,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,canvas{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}
/* 2. Global Misc
======================================================================================= */
/* Wrappers */
body {background:#f2f2ed ;font-family: Helvetica,Arial,sans-serif; overflow-x:hidden}
#sections-wrapper {position:absolute; margin-top:1200px; width:100%; -webkit-backface-visibility: hidden}
.inner-wrapper {width:100%; margin:0 auto; padding-right:40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
/* Clear floats */
.fclear {clear:both; float:none; line-height:0; height:0}
/* Text */
::selection {background: #1e2022; color: #fff}
::-moz-selection {background: #1e2022; color: #fff}
.red {color:#f00 !important}
/* Paragraphs */
p {font-size:11px; line-height:20px; letter-spacing:0.3px; color:#777}
p a {color:#555; background:#f2f2ec; text-decoration:none; padding:2px 0 2px 0; border-radius:1px}
p a:hover {border-bottom:none; color:#333}
/* Social links */
a.facebook:hover span {background-color:#3c639c; color:#fff; padding:2px 0 2px 0}
a.twitter:hover span {background-color:#38afd2; color:#fff; padding:2px 0 2px 0}
a.gplus:hover span {background-color:#da4235; color:#fff; padding:2px 0 2px 0}
a.pinterest:hover span {background-color:#cc2127; color:#fff; padding:2px 0 2px 0}
a.linkedin:hover span {background-color:#304e6c; color:#fff; padding:2px 0 2px 0}
/* 3. Intro TEXTE
=======================================================================================*/
#intro {width:100%; height:760px; position:fixed}
#intro #logoprocessing {position:absolute;margin-top:35vh;margin-left:2vw;width:214px; height:214px;overflow:hidden;z-index:0; opacity:1;}
#intro #heading {position:absolute; margin:340px 0 0 0; overflow:hidden; border-bottom: 2px solid rgba(0, 0, 0, 1); padding-bottom:10px; z-index:0}
#intro #heading h1 {display:none; opacity:1; color:#000; letter-spacing:2px; font-family:Helvetica,Arial,sans-serif; font-size:55px;font-weight:bold; text-transform: uppercase}
#intro #heading h1 span {color:#000}
#intro #menu {text-align:right; padding-top:5vh;margin-bottom:5vh; overflow:hidden}
#intro #menu li {float:right; width:55%; padding-bottom:42vh; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#intro #menu li a {font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:21px;font-weight:bold; text-decoration:none; padding:0px 0px 0px 0px; ; -webkit-background-clip: padding-box; background-clip: padding-box}
#intro #menu li a span {border-radius:1px; padding:1px}
#intro #menu li a:hover span {color:#000; opacity:0.5}
#intro #book {text-align:right; top:50%; margin:0; overflow:hidden}
#intro #book li {float:right; width:55%; padding-right:0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#intro #book li a {font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:21px;font-weight:bold; text-decoration:none; padding:0px 0px 0px 0px; ; -webkit-background-clip: padding-box; background-clip: padding-box}
#intro #book li a span {border-radius:1px; padding:1px}
#intro #book li a:hover span {color:#000; opacity:0.5 }
#intro #contact {text-align:right;bottom:5%; margin:0; overflow:hidden}
#intro #contact li {float:right; width:55%; padding-right:0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#intro #contact li a {font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:21px;font-weight:bold; text-decoration:none; padding:0px 0px 0px 0px; ; -webkit-background-clip: padding-box; background-clip: padding-box}
#intro #contact li a span {border-radius:1px; padding:1px}
#intro #contact li a:hover span {color:#000; opacity:0.5}
#intro #intro-banner {position:absolute; width:100%; height:1200px; z-index:-1; overflow:hidden}
#intro #intro-banner img {height:85%; position:absolute; right:-0px}
#intro #intro-banner_iphone {position:absolute; width:0; height:0px; z-index:1; overflow:hidden}
#intro #intro-banner_iphone img {height:0px; position:absolute; right:-0px;opacity:0}
#nojs{font-family: Helvetica,sans-serif; text-transform: uppercase; letter-spacing:1px; font-size:20px; color:#000; position:absolute; margin:340px 0 0 0; overflow:hidden; border-bottom: 2px solid rgba(255, 255, 255, 1); padding-bottom:10px; z-index:0}
/* 4. Main Nav
======================================================================================= */
#main-nav {width:100%; position:fixed; z-index:2; top:-80px; background:#fff; opacity:0; filter:none !important}
#main-nav .inner-wrapper { overflow:hidden}
#main-nav ul {padding:12px 0 13px 0}
#main-nav #main {width:75.5%; float:left}
#main-nav #main-test {width:75.5%; float:left}
#main-nav #main-test2 {width:75.5%; float:left}
#main-nav #main li {float:left; width:16.66%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#main-nav #main-test li {color:#222; font-size:11px; text-decoration:none;font-family: Helvetica,sans-serif;text-transform: uppercase;font-weight:500;letter-spacing:1px;padding:15px 0 15px 0;float:left; width:33%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#main-nav #main-test2 li {color:#222; font-size:11px; text-decoration:none;font-family: Helvetica,sans-serif;text-transform: uppercase;font-weight:500;letter-spacing:1px;padding:15px 0 15px 0;float:left; width:25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#main-nav #main li a {display:block; color:#222; font-size:11px; text-decoration:none; padding:15px 0 15px 0}
#main-nav #main-test li a {display:block; color:#222; font-size:11px; text-decoration:none; padding:15px 0 15px 0}
#main-nav #main-test2 li a {display:block; color:#222; font-size:11px; text-decoration:none; padding:15px 0 15px 0}
#main-nav #main li a span {font-family: Helvetica,sans-serif;text-transform: uppercase;font-weight:500;letter-spacing:1px;padding:1px}
#main-nav #main-test li a span {font-family: Helvetica,sans-serif;text-transform: uppercase;font-weight:500;letter-spacing:1px;padding:1px}
#main-nav #main-test2 li a span {font-family: Helvetica,sans-serif;text-transform: uppercase;font-weight:500;letter-spacing:1px;padding:1px}
#main-nav #main li a:hover span {font-size:11px;color:#000;}
#main-nav #main li.current a span {font-size:11px;color:#000;border-bottom: 2px solid rgba(0, 0, 0,1)}
#main-nav #main-test li a:hover span {font-size:11px;color:#000;}
#main-nav #main-test li.current a span {font-size:11px;color:#000;border-bottom: 2px solid rgba(0, 0, 0,1)}
#main-nav #main-test2 li a:hover span {font-size:11px;color:#000;}
#main-nav #main-test2 li.current a span {font-size:11px;color:#000;border-bottom: 2px solid rgba(0, 0, 0,1)}
/* Menu icon for small screens */
#main-nav #menu {display:none}
/* Dropdown Menu */
#main-nav #main li.drop {margin-left:-10px}
#main-nav #main li.drop a.parent { padding-left:15px}
#main-nav #main li.drop ul {display:none; position:absolute; clear:both; background:#fff; border-bottom:solid 0px #000; padding:1px 5px 3px 0px}
#main-nav #main li.drop:hover ul {display:block}
#main-nav #main li ul li {float:none; width:auto}
#main-nav #main li ul li a span {background:#fff !important; color:#000 !important}
#main-nav #main li ul li a:hover span { !important; color:#aaa !important}
#main-nav #arrows {width:24.5%; float:right}
#main-nav #arrows li {width:25%; float:right}
#main-nav #arrows li a {float:right; opacity:1; display:block; border-radius:1px; margin:5px 0 0 0; width:31px; height:30px; text-indent:200%; white-space: nowrap; overflow:hidden;
-webkit-backface-visibility: hidden !important;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
#main-nav #arrows li a:hover {opacity:0.6; box-shadow:0 0 1px #fff}
#main-nav #arrows li a#start {background:url(img/picto/icon_escalator.png) no-repeat center 7px}
#main-nav #arrows li a#start:hover {background:url(img/picto/icon_escalator.png) no-repeat center -64px #fff}
#main-nav #arrows li a#stop { background:url(img/picto/icon_close.png) no-repeat center right}
#main-nav #arrows li a#end {background:url(img/picto/icon_fb.png) no-repeat center 4px}
#main-nav #arrows li a#end:hover {background:url(img/picto/icon_fb.png) no-repeat center -61px #fff}
#main-nav #arrows li a#eng {background:url(img/picto/icon_eng.png) no-repeat center 6px}
#main-nav #arrows li a#eng:hover {background:url(img/picto/icon_eng.png) no-repeat center -65px #fff}
#main-nav #arrows li a#tw {background:url(img/picto/icon_tw.png) no-repeat center 4px}
#main-nav #arrows li a#tw:hover {background:url(img/picto/icon_tw.png) no-repeat center -61px #fff}
/* 5. Logo
======================================================================================= */
#prologue {margin-top:-187px}
#prologue #logo {float:right; width:25%; opacity:0.8}
#prologue #logo a {width:0px;display:block; margin-left:45px; background:transparent; text-indent:100%; white-space:normal; overflow:hidden}
#prologue #logo a span {display:block;width:0px; height:187px; background: no-repeat center center}
/* 6. Portfolio interactif
======================================================================================= */
#portfolio_interactif {width:100%; overflow:hidden; background:#f2f2ed; padding:170px 0 100px 0;}
#portfolio_interactif ul {margin-right:-60px}
#portfolio_interactif ul li {width:25%; float:left; margin:0 0 60px 0; padding-right:65px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#portfolio_interactif ul li a {display:block; text-decoration:none; font-weight:normal; font-size:11px; color:#ccc; letter-spacing:0.3px; overflow:hidden;
-webkit-backface-visibility: hidden !important;
-webkit-transition: background 0.1s ease-in;
-moz-transition: background 0.1s ease-in;
-ms-transition: background 0.1s ease-in;
-o-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
}
#portfolio_interactif ul li a span {
-webkit-backface-visibility: hidden !important;
-webkit-transition: padding 0.1s ease-in;
-moz-transition: padding 0.1s ease-in;
-ms-transition: padding 0.1s ease-in;
-o-transition: padding 0.1s ease-in;
transition: padding 0.1s ease-in;
}
#portfolio_interactif ul li a img { width:200%;/*margin-top:-1px;*/
/* black and white thumbnails option */
/* filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%) */
background:0 0 no-repeat;
-webkit-transition:-webkit-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
-moz-transition:-moz-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
transition: transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-o-transform: translate(-50%);
transform: translate(-50%);
}
#portfolio_interactif ul li span {display:block; padding:18px 0 18px 0; margin-top:-2px}
#portfolio_interactif ul li a:hover {color:#000}
#portfolio_interactif ul li a:hover img { -webkit-transform: translate(0px);
-moz-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);
background-position:0px;
/* color thumbnails on hover option */
/* filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); */
/* -webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-ms-transform: scale(1.04);
-o-transform: scale(1.04);
transform: scale(1.04); */
}
#portfolio_interactif ul li a:hover #interaction {background-image:url(img/picto/icon_design_interaction2.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_interactif ul li a:hover #graphique {background-image:url(img/picto/icon_design_graphique.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_interactif ul li a:hover #sonore {background-image:url(img/picto/icon_design_sonore2.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_interactif ul li a:hover #complete {background-image:url(img/picto/icon_design_complete.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_interactif ul li a:hover #intergraph {background-image:url(img/picto/icon_design_inter_graph.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_interactif ul li a:hover #interson {background-image:url(img/picto/icon_design_inter_son.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_interactif ul li a:hover #graphson {background-image:url(img/picto/icon_design_graph_son.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
/* 6. Portfolio graphique
======================================================================================= */
#portfolio_graphique {width:100%; overflow:hidden; background:#f2f2ed; padding:170px 0 100px 0;}
#portfolio_graphique ul {margin-right:-60px}
#portfolio_graphique ul li {width:25%; float:left; margin:0 0 60px 0; padding-right:65px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#portfolio_graphique ul li a {display:block; text-decoration:none; font-weight:normal; font-size:11px; color:#ccc; letter-spacing:0.3px; overflow:hidden;
-webkit-backface-visibility: hidden !important;
-webkit-transition: background 0.1s ease-in;
-moz-transition: background 0.1s ease-in;
-ms-transition: background 0.1s ease-in;
-o-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
}
#portfolio_graphique ul li a span {
-webkit-backface-visibility: hidden !important;
-webkit-transition: padding 0.1s ease-in;
-moz-transition: padding 0.1s ease-in;
-ms-transition: padding 0.1s ease-in;
-o-transition: padding 0.1s ease-in;
transition: padding 0.1s ease-in;
}
#portfolio_graphique ul li a img { width:200%; /*margin-top:-1px;*/
/* black and white thumbnails option */
/* filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%) */
background:0 0 no-repeat;
-webkit-transition:-webkit-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
-moz-transition:-moz-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
transition: transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-o-transform: translate(-50%);
transform: translate(-50%);
}
#portfolio_graphique ul li span {display:block; padding:18px 0 18px 0; margin-top:-2px}
#portfolio_graphique ul li a:hover {color:#000}
#portfolio_graphique ul li a:hover img { -webkit-transform: translate(1px);
-moz-transform: translate(1px);
-o-transform: translate(1px);
transform: translate(1px);
background-position:1px;
/* color thumbnails on hover option */
/* filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); */
/* -webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-ms-transform: scale(1.04);
-o-transform: scale(1.04);
transform: scale(1.04); */
}
#portfolio_graphique ul li a:hover #interaction {background-image:url(img/picto/icon_design_interaction2.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_graphique ul li a:hover #graphique {background-image:url(img/picto/icon_design_graphique.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_graphique ul li a:hover #sonore {background-image:url(img/picto/icon_design_sonore2.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_graphique ul li a:hover #complete {background-image:url(img/picto/icon_design_complete.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_graphique ul li a:hover #intergraph {background-image:url(img/picto/icon_design_inter_graph.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_graphique ul li a:hover #interson {background-image:url(img/picto/icon_design_inter_son.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
#portfolio_graphique ul li a:hover #graphson {background-image:url(img/picto/icon_design_graph_son.png);padding-left:30px; background-position:right; background-repeat: no-repeat;}
/* 7. Portfolio Project
======================================================================================= */
#project-wrapper {display:none; position:absolute; background:#f2f2ec; width:100%; height:105%; min-height:105%; z-index:99}
#project-wrapper #looper {display:none; text-align:center; position:absolute; width:100px; height:100px; overflow:hidden; margin-left:-50px; margin-top:-50px; top:50%; left:50%; border-radius:130px; background:#f2f2ec}
#project-wrapper #looper img {width:150px; margin-left:-25px; display:none}
#project {display:none; background:#f2f2ec; padding:100px 0 100px 0; overflow:hidden}
#project h3 {font-size:11px; font-weight:normal; letter-spacing:1px; color:#000;letter-spacing:1px;text-transform:uppercase; padding:60px 0 50px 0}
#project p {margin:0 0 20px 0;color:#000000}
#project p a {border:none;color:#999999;background:#f2f2ec}
#project p a:hover {border:none;color:#000;background:#f2f2ec}
#project-nav {width:100%; position:fixed; background:#fff; z-index:9;height:67px}
#project-nav .inner-wrapper {overflow:hidden; padding:15px 0 33px 0;height:67px}
#project-nav h2#project-title {float:left; padding:15px 0 15px 0; margin:0 5px 0 0; font-weight:500; font-size:11px; text-decoration:none; color:#000;letter-spacing:1px;text-transform:uppercase;}
#project-nav h2#project-title span {font-family: Helvetica,sans-serif;color:#999; padding-right:4px}
#project-nav #controls {float:right}
#project-nav #controls li {float:right; margin:0}
#project-nav #controls li a {opacity:1; text-decoration:none; font-size:11px; display:block; border-radius:1px; overflow:hidden; width:50px; padding:15px 0 15px 0; background:#f2f2ec}
#project-nav #controls li a:hover {opacity:0.5}
#project-nav #controls li a.close {color:#000; text-align:right; margin-left:20px; background:url(img/picto/icon_close.png) no-repeat center right}
#project-nav #controls li a.close_g {color:#000; text-align:right; margin-left:20px; background:url(img/picto/icon_close.png) no-repeat center right}
#project-nav #controls li a.prev {text-indent:200%; white-space:nowrap; background:url(img/picto/icon_precedent.png) no-repeat center left}
#project-nav #controls li a.next {text-indent:200%; white-space:nowrap; background:url(img/picto/icon_suivant.png) no-repeat center right}
#project-nav #controls li a.next_g {text-indent:200%; white-space:nowrap; background:url(img/picto/icon_suivant.png) no-repeat center right}
#project-nav #controls li a.prev_g {text-indent:200%; white-space:nowrap; background:url(img/picto/icon_precedent.png) no-repeat center left}
#project-info {width:20%; margin:0 5% 0 0; float:left;}
#project-info #info {border-bottom:solid 0px #000; margin-bottom:20px }
#project-info #info li {display:block; text-decoration:none; font-weight:normal;text-transform:uppercase;font-size:11px; color:#000; letter-spacing:0.3px; overflow:hidden; line-height:20px}
#project-info #info li #test {text-decoration:none;color:#000;font-weight:500; }
#project-info #info li #test:hover {text-decoration:underline;color:#000; }
#project-samples {width:75%; float:left}
#project-samples h3 {display:none}
#project #media {position:relative; margin:0px; overflow:hidden; background:#f2f2ec; width:100%}
#project #media img {width:100%; cursor:pointer}
#project #media .rslides {padding-bottom:50px; overflow:hidden}
#project #media .rslides li {padding-top:0px; background:#f2f2ec; width:100%}
#project #media .video {position: relative; margin-top:-50px; padding-bottom: 56.25%; height:0; background:url(img/picto/spinner.png) no-repeat center center}
#project #media .video iframe {position: absolute; top: 0; left: 0; width: 100%; height:100%}
#project #media h3 {position:absolute; bottom:2px; right:0; background:#f2f2ec; padding:4px; opacity:0; color:#222}
#project #media:hover h3 {display:block; opacity:0.5}
#project #media .rslides_tabs {position:absolute; z-index:99; bottom:0}
#project #media .rslides_tabs li {float:left; margin:0 20px 0 0}
#project #media .rslides_tabs li a {display:block; padding:9px 11px 9px 11px; font-size:11px; color:#999; text-decoration:none; border-radius:1px}
#project #media .rslides_tabs li.rslides_here a, #project #media .rslides_tabs li a:hover {background:transparent; color:#000;font-weight:500}
#project #media .prev {display:none}
#project #media .next {display:block; position:absolute; z-index:2; bottom:0; left:0; width:100%; height:100%; text-indent:100%; white-space: nowrap; overflow:hidden}
/* canvas css */
#project #media canvas {width:100%; cursor:default}
#project #media .js {position: relative; margin-top:-50px; padding-bottom: 56.25%; height:0; background:url(img/picto/spinner.png) no-repeat center center}
/* #project #media canvas {background:#030100; position: relative; margin-top:-50px; padding-bottom: 56.25%; height:0;}
#project #media canvas {position: absolute; top: 0; left: 0; width: 100%; height:100%} */
#test_draw {width:100%; overflow:hidden; padding-top:20px;margin:0px;background:#f2f2ed}
//#test_draw .inner-wrapper {position:relative;padding:0px;background:#f2f2ed}
/* 8. Services
======================================================================================= */
#services-bg {display:none; position:fixed; top:0; background:#f2f2ec; background-size:100% auto; width:100%; height:100%}
#services {background:#f2f2ec;width:100%; overflow:hidden; padding:105px 0 50px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-webkit-transition: -webkit-background 0.2s ease-in;
-moz-transition: -moz-background 0.2s ease-in;
-ms-transition: -ms-background 0.2s ease-in;
-o-transition: -o-background 0.2s ease-in;
transition: background 0.2s ease-in;
}
#services .inner-wrapper {background:url(img/picto/slash.png) no-repeat right 60px;
-webkit-transition: -webkit-background 0.2s ease-in;
-moz-transition: -moz-background 0.2s ease-in;
-ms-transition: -ms-background 0.2s ease-in;
-o-transition: -o-background 0.2s ease-in;
transition: background 0.2s ease-in;
}
#services #diagramme {background:url(img/diagramme/diagramme_normal.png);width:950px; height:650px;overflow:hidden;z-index:0; opacity:1;margin:0px;float:left;}
#services #diagramme #diagrammeprocessing {width:414px;height:414px;overflow:hidden;z-index:1; opacity:1;margin-top:114px;margin-left:267px}
#services #diagramme #diagrammeprocessing:hover {cursor:pointer}
#services #diagramme2 {background:url(img/diagramme/diagramme_iphone.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin:0px;}
#services #diagramme2 #diagrammeprocessing3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:51px;margin-left:130px}
#services #diagramme2 #diagrammeprocessing3:hover {cursor:pointer}
#services #diagramme3 {background:url(img/diagramme/diagramme_iphone3.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin-top:0px;margin-left:0px;}
#services #diagramme3 #diagrammeprocessingiphone3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:0px;margin-left:0px}
#services #diagramme3 #diagrammeprocessingiphone3:hover {cursor:default}
/* 9. About (Bio)
======================================================================================= */
#about {width:100%; overflow:hidden; background:#f2f2ed; padding:200px 0 0 0;margin-bottom:100px}
#about .inner-wrapper {position:relative;padding-bottom:200px}
#about .text-block {margin:0; overflow:hidden}
#about .text-block p.first {color:#000;;width:25%; float:left; padding:0 35px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.first span.titre {display:block; text-decoration:none; font-weight:normal;text-transform:uppercase;font-size:11px; color:#000; letter-spacing:0.3px; overflow:hidden; line-height:20px}
#about .text-block p.second{color:#000;;width:25%; float:left; padding:0 35px 0px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.third {color:#000;;width:25%; float:left; padding:0 35px 0px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.fourth {float:left;text-align:left;color:#000;;width:25%; float:left; padding:25px 35px 0px 45px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.fourth1 {width:0px;height:0px}
#about .text-block p.fourth2 {width:0px;height:0px}
#about .text-block p.fourth3 {width:0px;height:0px}
/* 10. CONTACTS
======================================================================================= */
#inquire {width:100%; padding:0 0 160px 0; overflow:hidden; background:#f2f2ec}
#inquire h3 {font-family:Helvetica,sans-serif; font-size:60px; color:#000; text-transform:uppercase; margin:0 0 0px 0;border-bottom:solid 2px #000; ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;background:#f2f2ed;line-height:79px;}
#inquire .header {width:25%; float:left; background:#f2f2ed; height:376px; padding:192px 0 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#inquire .header p {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18px}
#inquire .step {display:none}
#inquire .step .choices, #inquire .step .fields {float:left; width:75%; padding:200px 0 0 0; font-size:11px; line-height:16px; letter-spacing:0.3px; color:#999}
#inquire .step .choices li, #inquire .step .fields li {float:left; width:33.3%; padding:0 0 30px 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#inquire .step .choices li input[type=radio], #inquire .step .choices li input[type=checkbox] {display:none}
#inquire .step .choices li label {cursor:pointer; display:block; padding:27px 0 0 0; height:73px; border-bottom:solid 2px #000; ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;background:#f2f2ed}
#inquire .step .singles li label {background:url(img/picto/epingle_open2.png) no-repeat right center #f2f2ec}
#inquire .step .multis li label {background: url(img/picto/epingle_open2.png)no-repeat right center #000}
#inquire .step .choices li label span {font-family:Helvetica,sans-serif; font-size:11px; color:#999; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18px;padding:1px; border-radius:0px}
#inquire .step .choices li label:hover {background:url(img/picto/epingle_close.png)no-repeat right center #000}
#inquire .step .choices li label:hover span {color:#000}
#inquire .step .choices li.checked label{background:url(img/picto/epingle_close.png)no-repeat right center #000}
#inquire .step .choices li.checked label span {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18px}
#inquire .step .fields li input[type=text], #inquire .step .fields li textarea, #inquire .step .fields li input[type=submit] {cursor:text; width:100%; font-family: Helvetica,Arial,sans-serif; font-size:11px; letter-spacing:1px;font-weight:500; color:#000; display:block; padding:28px 0 29px 0; background:#f2f2ec; border:none; border-bottom:solid 2px #000;text-transform:uppercase;}
#inquire .step .fields li input[type=submit] {cursor:pointer}
#inquire .step .fields li input[type=submit]:hover {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed}
#inquire .step .fields li input[type=text]:hover, #inquire .step .fields li textarea:hover, #inquire .step .fields li input[type=text]:focus, #inquire .step .fields li textarea:focus {color:#000}
#inquire .step .fields li.textbox {width:66.6%}
#inquire .step .fields li textarea {padding:27px 0 0 0; height:43px}
#inquire .step .fields li input[type=submit] {background:#000; padding:14px 0 15px 0; color:#fff; margin:28px 0 0 0; border:none; box-shadow:none; border-radius:1px}
#inquire .step .fields li span.required {color:#333; position:absolute; margin:30px 0 0 -7px; font-size:14px}
#inquire .step .fields li .processing {display:none; background:url(img/picto/spinner.png) no-repeat center center #ddd; height:47px; margin:28px 0 0 0; border:none; box-shadow:none; border-radius:1px}
#inquire .step .checkboxerror, #inquire .step .errormsg {display:none}
#inquire .pagination {clear:both; float:right; padding:20px 0 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#inquire .pagination .breadcrumb {float:left; line-height:30px; margin-left:1px; font-family:Helvetica,sans-serif; text-transform:uppercase; letter-spacing:1px;font-weight:500;color:#000}
#inquire .pagination .prev, #inquire .pagination .next {display:none; float:right; margin-left:20px; width:31px; height:30px; text-indent:100%; white-space: nowrap; overflow:hidden}
#inquire .pagination .prev {background:url(img/picto/icon_precedent.png) no-repeat center ;opacity:0.5}
#inquire .pagination .next {background:url(img/picto/icon_suivant.png) no-repeat center;opacity:0.5}
#inquire .pagination .next:hover {background:url(img/picto/icon_suivant.png) no-repeat center ;opacity:1}
#inquire .pagination .prev:hover {background:url(img/picto/icon_precedent.png) no-repeat center ;opacity:1}
#inquire #confirmation {display:none; background:url(img/picto/stamp.png) no-repeat right 90%; width:100%; height:auto; overflow:hidden}
#inquire #confirmation .header {background:#f2f2ec; height:376px}
#inquire #confirmation .header h3 {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:0px;line-height:18px}
#inquire #confirmation .header h3 span {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18px}
#inquire #confirmation .message {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18pxwidth:75%; float:right}
#inquire #confirmation .message p {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18pxtext-align:right; margin:360px 0 0 0}
/* 11. CONTACTS_BIS
======================================================================================= */
#footer {width:100%; background:#f2f2ed;}
#footer .inner-wrapper {position:relative; padding:0px 0 30px 0;background:#f2f2ec}
#footer ul {width:100%; overflow:hidden; margin-right:0px; padding:0 0 0px 0;}
#footer ul li {display:block; width:25%; padding:0 0 60px 60px; float:left; overflow:hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#footer ul li.first {padding:0}
#footer ul li h3 {font-family: Helvetica,sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:11px;font-weight:500; text-decoration:none; padding:0px 25px 20px 0px; border-bottom: 2px solid rgba(1, 1, 1,1); -webkit-background-clip: padding-box; background-clip: padding-box}
#footer ul li p {font-family: Helvetica,sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:11px;font-weight:400; text-decoration:none;line-height:18px; margin-top:20px}
#footer ul li h7 {text-transform:lowercase}
#footer ul li img {position:relative;margin-top:0px;margin-left:00px; width:0%}
/* 12. LIENS
======================================================================================= */
#timeline {width:100%; background:#f2f2ed;margin-top:250px;padding:0px 0 50px 0}
/*#timeline .inner-wrapper {position:relative; padding:200px 0px 200px 0;background:#f2f2ec;}
#timeline ul {width:100%; overflow:hidden; margin-right:0px; padding:0 0 0px 0;}
#timeline ul li {display:block; width:25%; padding:0; float:left; overflow:hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#timeline ul li.third {padding:0 0 60px 60px}*/
#timeline .inner-wrapper {position:relative; padding:200px 0px 250px 0;background:#f2f2ec;}
#timeline ul {width:100%; overflow:hidden; margin-right:0px; padding:0 0 0px 0;}
#timeline ul li {display:block; width:25%; padding:0; float:left; overflow:hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#timeline ul li.third {padding:0 0 60px 60px}
#timeline ul li h3 {font-family: Helvetica,sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:11px;font-weight:500; text-decoration:none; padding:0px 25px 20px 0px; border-bottom: 2px solid rgba(1, 1, 1,1); -webkit-background-clip: padding-box; background-clip: padding-box}
#timeline ul li p {font-family: Helvetica,sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:11px;font-weight:400; text-decoration:none;line-height:12px; margin-top:20px}
#timeline ul li p a span{font-family: Helvetica,sans-serif;text-transform: uppercase;letter-spacing:1px;display:block; color:#000; font-size:11px;font-weight:400; text-decoration:none;line-height:12px; margin-top:20px}
#timeline ul li p a{ color:#000000}
#timeline ul li p a:hover{ border-bottom: 2px solid rgba(1, 1, 1,1)}
#timeline ul li h7 {text-transform:lowercase}
#timeline #copy .copy {width:100%}
#timeline #copy .copy {color:#000;margin:100px 0 0 0;float:left;font-weight:normal; font-size:10px;border-top: 1px solid rgba(1, 1, 1,1);line-height:20px}
/* 13. Media Queries
======================================================================================= */
/* 1 - 1280 */
@media only screen and (device-width: 1280px), only screen and (min-width: 1px) and (max-width: 1280px) {
/* 1. Global Misc */
.inner-wrapper {width:100%; padding:0 45px 0 45px}
/* 2. Intro */
#intro #logoprocessing {position:absolute;margin:45px 0 0 0;opacity:1;}
#intro #heading {margin:305px 0 0 0}
#intro #intro-nav {margin:0; padding-top:450px}
#intro #intro-nav li {width:33.3%; padding-right:95px}
#intro #intro-nav li a {padding:30px 0 20px 0}
#intro #intro-banner img {height:1200px; position:absolute; right:-800px}
/* 4. Prologue (Logo) */
#prologue #logo {width:33.33%}
#prologue #logo a {margin-left:30px}
/* 5. Portfolio */
#portfolio_interactif ul {margin-right:-45px}
#portfolio_interactif ul li {width:25%; padding-right:45px}
#portfolio_graphique ul {margin-right:-45px}
#portfolio_graphique ul li {width:25%; padding-right:45px}
/* 6. Portfolio Project */
#project-nav .inner-wrapper {padding:12px 45px 14px 45px}
#project-nav_g .inner-wrapper {padding:12px 45px 14px 45px}
#project {padding:100px 45px 100px 45px}
/* 7. About (Bio) */
#about .text-block p {width:50%}
#about {width:100%; overflow:hidden; background:#f2f2ed; padding:170px 0 0 0;margin:0}
#about .inner-wrapper {position:relative;padding-bottom:200px}
#about .text-block {overflow:hidden}
#about .text-block p.first {color:#000;;width:25%; float:left; padding:0 35px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.second{color:#000;;width:25%; float:left; padding:0 35px 0px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.third {color:#000;;width:25%; float:left; padding:0 35px 0px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.fourth {float:left;text-align:left;color:#000;;width:25%; float:left; padding:25px 35px 0px 45px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.five {float:right;text-align:left;color:#000;;width:25%; float:left; padding:0 35px 0px 45px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.six {float:right;text-align:left;color:#000;;width:25%; float:left; padding:0 35px 0px 45px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* 9. Services */
#services {padding:100px 0 50px 0;margin:0}
#services-bg {padding:0px 0 50px 0}
#services .inner-wrapper {background:url(img/picto/slash.png) no-repeat 50% 60px !important}
#services #diagramme {background:url(img/diagramme/diagramme_ipad.png);width:928px; height:562px;overflow:hidden;z-index:0; opacity:1;margin-left:150px;float:left;}
#services #diagramme #diagrammeprocessing {width:414px;height:414px;overflow:hidden;z-index:1; opacity:1;margin-top:70px;margin-left:257px}
#services #diagramme #diagrammeprocessing:hover {cursor:pointer}
#services #diagramme2 {background:url(img/diagramme/diagramme_iphone.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin:0px;}
#services #diagramme2 #diagrammeprocessing3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:51px;margin-left:130px}
#services #diagramme2 #diagrammeprocessing3:hover {cursor:pointer}
#services #diagramme3 {background:url(img/diagramme/diagramme_iphone3.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin-top:0px;margin-left:0px;}
#services #diagramme3 #diagrammeprocessingiphone3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:0px;margin-left:0px}
#services #diagramme3 #diagrammeprocessingiphone3:hover {cursor:default}
/* 10. Inquiry */
#inquire .header {width:33.33%}
#inquire .header p {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18px}
#inquire .step .choices, #inquire .step .fields {width:66.66%}
#inquire .step .choices li, #inquire .step .fields li, #inquire .step .fields li.textbox {width:50%}
#inquire #confirmation .message {width:66.66%}
/* 11. Footer */
#footer .inner-wrapper {padding:0px 45px 30px 45px;margin-top:-80px;}
#footer ul {margin-right:-45px}
#footer ul li {width:25%;padding:0;}
#footer ul li p {padding-bottom:20px}
#footer ul li img {width:70%}
/* 12. liens */
#timeline{background:#f2f2ec;}
#timeline .inner-wrapper {position:relative; padding:150px 45px 200px 45px}
#timeline ul {margin-right:-45px}
#timeline ul li {width:25%;padding:0}
#timeline ul li p {padding-bottom:0}
}
/* 1 - 1024 */
@media only screen and (device-width: 1024px), only screen and (min-width: 1px) and (max-width: 1024px) {
/* 1. Global Misc */
.inner-wrapper {width:100%; padding:0 45px 0 45px}
/* 2. Intro */
#intro #logoprocessing {position:absolute;margin:45px 0 0 0;opacity:1;}
#intro #heading {margin:305px 0 0 0}
#intro #intro-nav {margin:0; padding-top:450px}
#intro #intro-nav li {width:33.3%; padding-right:95px}
#intro #intro-nav li a {padding:30px 0 20px 0}
#intro #intro-banner img {height:1200px; position:absolute; right:-800px}
/* 4. Prologue (Logo) */
#prologue #logo {width:33.33%}
#prologue #logo a {margin-left:30px}
/* 5. Portfolio */
#portfolio_interactif ul {margin-right:-45px}
#portfolio_interactif ul li {width:33.33%; padding-right:45px}
#portfolio_interactif ul li a img { width:200%; /*margin-top:-1px;*/
/* black and white thumbnails option */
/* filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%) */
background:0 0 no-repeat;
-webkit-transition:-webkit-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
-moz-transition:-moz-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
transition: transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1;
-webkit-transform: translate(0px);
-moz-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);}
#portfolio_graphique ul {margin-right:-45px}
#portfolio_graphique ul li {width:33.33%; padding-right:45px}
#portfolio_graphique ul li a img { width:200%; /*margin-top:-1px;*/
/* black and white thumbnails option */
/* filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%) */
background:0 0 no-repeat;
-webkit-transition:-webkit-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
-moz-transition:-moz-transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1s;
transition: transform 0.1s ease-in-out, background-position 0.1s ease-in-out 0.1;
-webkit-transform: translate(1px);
-moz-transform: translate(1px);
-o-transform: translate(1px);
transform: translate(1px);}
/* 6. Portfolio Project */
#project-nav .inner-wrapper {padding:12px 45px 14px 45px}
#project-nav_g .inner-wrapper {padding:12px 45px 14px 45px}
#project {padding:100px 45px 100px 45px}
/* 7. About (Bio) */
#about {width:100%; overflow:hidden; background:#f2f2ed; padding:170px 0 0 0;margin-bottom:0px}
#about .text-block p {width:50%}
#about .inner-wrapper {position:relative;padding-bottom:200px}
#about .text-block {overflow:hidden}
#about .text-block p.first {color:#000;;width:33%; float:left; padding:0 35px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.second{color:#000;;width:33%; float:left; padding:0 35px 0px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.third {color:#000;;width:33%; float:left; padding:0 35px 0px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/*#about .text-block p.fourth {float:left;text-align:left;color:#000;;width:25%; float:left; padding:0 35px 0px 25px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} */
#about .text-block p.fourth {display:none;}
/* 9. Services */
#services {padding:100px 0 50px 0;margin-top:0px}
#services-bg {padding:0px 0 50px 0}
#services .inner-wrapper {background:#000}
#services #diagramme {background:url(img/diagramme/diagramme_ipad.png);width:928px; height:562px;overflow:hidden;z-index:0; opacity:1;margin:0px;float:right;}
#services #diagramme #diagrammeprocessing {width:414px;height:414px;overflow:hidden;z-index:1; opacity:1;margin-top:70px;margin-left:255px}
#services #diagramme #diagrammeprocessing:hover {cursor:pointer}
#services #diagramme2 {background:url(img/diagramme/diagramme_iphone.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin:0px;}
#services #diagramme2 #diagrammeprocessing3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:51px;margin-left:130px}
#services #diagramme2 #diagrammeprocessing3:hover {cursor:pointer}
#services #diagramme3 {background:url(img/diagramme/diagramme_iphone3.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin-top:0px;margin-left:0px;}
#services #diagramme3 #diagrammeprocessingiphone3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:0px;margin-left:0px}
#services #diagramme3 #diagrammeprocessingiphone3:hover {cursor:default}
/* 10. Inquiry */
#inquire {background:#f2f2ec}
#inquire .header {width:33.33%}
#inquire .header p {font-family:Helvetica,sans-serif; font-size:11px; color:#000; text-transform:uppercase; letter-spacing:1px;font-weight:500;background:#f2f2ed;margin-left:0px; margin-top:20px;line-height:18px}
#inquire .step .choices, #inquire .step .fields {width:66.66%}
#inquire .step .choices li, #inquire .step .fields li, #inquire .step .fields li.textbox {width:50%}
#inquire #confirmation .message {width:66.66%}
/* 11. Footer */
#footer {background:#f2f2ec}
#footer .inner-wrapper {background:#f2f2ec;padding:0px 45px 30px 45px; margin-top:-80px}
#footer ul {margin-right:-45px}
#footer ul li {width:25%;padding:0;}
#footer ul li p {padding-bottom:20px}
#footer ul li img {width:70%}
/* 12. liens */
#timeline{margin:0}
#timeline .inner-wrapper {background:#f2f2ec;position:relative; padding:150px 45px 200px 45px}
#timeline ul {margin-right:-45px}
#timeline ul li {width:25%;padding:0}
#timeline ul li p {padding-bottom:0}
}
/* 1 - 768 */
@media only screen and (device-width: 780px), only screen and (min-width: 1px) and (max-width: 780px) {
/* 2. Intro */
#intro {position:absolute}
#intro #logoprocessing {position:absolute;margin:45px 0 0 0;opacity:1;}
#intro #heading {z-index:9}
#intro #intro-banner {background:url(img/profile.jpg) right center no-repeat #ccc !important}
#intro #intro-banner img {right:-100px !important; opacity:1 !important}
#intro #intro-nav {margin:0; padding-top:550px}
#intro #intro-nav li {width:50%; padding-right:55px}
#intro #intro-nav li a {padding:30px 0 20px 0}
/* 3. Main Nav */
#main-nav #main {width:80%; float:left;}
#main-nav #arrows {width:20%; float:right;}
#main-nav #main li {float:left; width:16%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
#main-nav #main-test {width:0%; height:0%; font-size:0px;color:#000;padding:0;float:left; }
#main-nav #main-test li {width:0%; height:0%; font-size:0px;color:#000;padding:0;float:left; }
/* 4. Prologue (Logo) */
#portfolio_interactif ul li {width:50%}
#portfolio_graphique ul li {width:50%}
/* 6. Portfolio Project */
#project {padding:100px 45px 100px 45px}
#project-info {width:100%; margin-bottom:50px; float:none}
#project-samples {width:100%; float:none}
#project h3 {display:none}
#project #media img {width:100%; margin:0 !important}
/* 7. About (Bio) */
#about{margin-bottom:0px}
#about .text-block {margin-right:0px}
#about .text-block p {width:50%}
#about {width:100%; overflow:hidden; background:#f2f2ed; padding:170px 0 0 0}
#about .inner-wrapper {position:relative;padding-bottom:200px}
#about .text-block {overflow:hidden}
#about .text-block p.first {color:#000;;width:33%; float:left; padding:0 15px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.second{color:#000;;width:33%; float:left; padding:0 15px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.third {color:#000;;width:33%; float:left; padding:0 15px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/*#about .text-block p.fourth {float:left;text-align:left;color:#000;;width:25%; padding:0 10px 0px 0px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*/
#about .text-block p.fourth {display:none;}
/* 8. Timeline */
#timeline #periods {width:40%}
#timeline #periods li {margin:0 0 50px 0}
#timeline #visual {width:50%; padding-top:80px}
#timeline #visual img {width:100%; height:auto}
/* 9. Services */
#services{padding-top:0px;margin-bottom:30px}
#services #diagramme {background:url(img/diagramme/diagramme_normal.png);width:0px; height:0px;overflow:hidden;z-index:0;margin:0px;float:left;opacity:0}
#services #diagramme #diagrammeprocessing {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:114px;margin-left:267px}
#services #diagramme #diagrammeprocessing:hover {cursor:default}
#services #diagramme2 {background:url(img/diagramme/diagramme_iphone.png);width:539px; height:698px;overflow:hidden;z-index:1; opacity:1;margin-top:150px;margin-left:70px;}
#services #diagramme2 #diagrammeprocessing2 {width:293px;height:293px;overflow:hidden;z-index:0; opacity:1;margin-top:193px;margin-left:123px}
#services #diagramme2 #diagrammeprocessing2:hover {cursor:pointer}
#services #diagramme3 {background:url(img/diagramme/diagramme_iphone3.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin-top:0px;margin-left:0px;}
#services #diagramme3 #diagrammeprocessingiphone3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:0px;margin-left:0px}
#services #diagramme3 #diagrammeprocessingiphone3:hover {cursor:default}
/* 10. Inquiry */
#inquire .header, #inquire #confirmation .header {height:auto; width:100%; float:none; background:none; padding:160px 0 20px 0}
#inquire h3, #inquire .header p {margin-top:20px !important}
#inquire .step .choices, #inquire .step .fields {width:auto; padding:30px 0 0 0; float:none; margin-right:-45px}
#inquire .step .choices li, #inquire .step .fields li {padding:0 45px 1px 0; width:50%}
#inquire #confirmation {background:none}
#inquire #confirmation .header h3 {position:relative; margin-left:-3px}
#inquire #confirmation .message {width:100%; float:none}
#inquire #confirmation .message p {text-align:left; margin:0}
/* 11. Footer */
#footer .inner-wrapper {padding:0px 0 30px 45px}
#footer ul li {width:50%; padding:0 60px 20px 0; margin-top:0px}
#footer ul li.first {padding-right:60px}
#footer ul li h3 {margin:0 0 10px 0}
#footer ul li p {line-height:21px; margin-top:5px}
#footer ul li p.address {float:left; width:50%}
#footer ul li p.location {float:right; width:50%; margin-top:-45px}
#footer ul li img {width:100%}
}
/* 1 - 640 */
@media only screen and (device-width: 640px), only screen and (min-width: 1px) and (max-width: 640px) {
/* 2. Intro */
#intro {position:absolute}
#intro #logoprocessing {position:absolute;margin:200px 0 0 0;opacity:1;}
#intro #heading {z-index:9}
#intro #intro-banner {background:url(img/profile.jpg) right center no-repeat #ccc !important}
#intro #intro-banner img {height:1200px; position:absolute; left:-500px}
#intro #intro-nav {margin:0; padding-top:550px}
#intro #intro-nav li {width:50%; padding-right:55px}
#intro #intro-nav li a {padding:30px 0 20px 0}
/* 3. Main Nav */
#main-nav #menu {float:left; display:block; background:url(img/picto/icon_menu.png) no-repeat center 7px; width:60px; height:45px; margin:19px 0 0 0; text-indent:100%; white-space: nowrap; overflow:hidden;
-webkit-backface-visibility: hidden !important;
-webkit-transition: background 0.1s ease-in;
-moz-transition: background 0.1s ease-in;
-ms-transition: background 0.1s ease-in;
-o-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
}
#main-nav .active #main {display:block !important}
#main-nav .active #menu {background-color:#fff}
#main-nav #main {display:none; width:100%; left:0; top:60px; padding-left:60px; float:none; position:absolute; background:#fff}
#main-nav #arrows {width:50%; float:right}
/* 4. Prologue (Logo) */
#portfolio_interactif ul li {width:50%}
#portfolio_graphique ul li {width:50%}
/* 6. Portfolio Project */
#project {padding:100px 45px 100px 45px}
#project-info {width:100%; margin:0; float:none}
#project-samples {width:100%; float:none}
#project h3 {display:none}
#project #media img {width:100%; margin:0 !important}
/* 7. About (Bio) */
#about{margin-bottom:0px}
#about .text-block {margin-right:-45px}
#about .text-block p {padding:0 45px 30px 0}
#about .inner-wrapper {position:relative;padding-bottom:200px}
#about .text-block {overflow:hidden}
#about .text-block p.first {font-size: 0.8em; color:#000;;width:100%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.second{font-size: 0.8em; color:#000;;width:100%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.third {font-size: 0.8em; color:#000;;width:100%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.fourth {display:none;}
/* 9. Services */
#services{padding-top:0px;margin-bottom:30px}
#services #diagramme {background:url(img/diagramme/diagramme_normal.png);width:0px; height:0px;overflow:hidden;z-index:0;margin:0px;float:left;opacity:0}
#services #diagramme #diagrammeprocessing {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:114px;margin-left:267px}
#services #diagramme #diagrammeprocessing:hover {cursor:default}
#services #diagramme2 {background:url(img/diagramme/diagramme_iphone.png);width:539px; height:698px;overflow:hidden;z-index:1; opacity:1;margin-top:130px;margin-left:0px;}
#services #diagramme2 #diagrammeprocessing2{width:293px;height:293px;overflow:hidden;z-index:0; opacity:1;margin-top:190px;margin-left:123px}
#services #diagramme2 #diagrammeprocessing2:hover {cursor:pointer}
#services #diagramme3 {background:url(img/diagramme/diagramme_iphone3.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin-top:0px;margin-left:0px;}
#services #diagramme3 #diagrammeprocessingiphone3 {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:0px;margin-left:0px}
#services #diagramme3 #diagrammeprocessingiphone3:hover {cursor:default}
/* 10. Inquiry */
#inquire .header, #inquire #confirmation .header {height:auto; width:100%; float:none; background:none; padding:160px 0 20px 0}
#inquire h3, #inquire .header p {margin-top:20px !important}
#inquire .step .choices, #inquire .step .fields {width:auto; padding:30px 0 0 0; float:none; margin-right:-45px}
#inquire .step .choices li, #inquire .step .fields li {padding:0 45px 1px 0; width:50%}
#inquire #confirmation {background:none}
#inquire #confirmation .header h3 {position:relative; margin-left:-3px}
#inquire #confirmation .message {width:100%; float:none}
#inquire #confirmation .message p {text-align:left; margin:0}
/* 11. Footer */
#footer .inner-wrapper {padding:0px 0 30px 45px}
#footer ul li {width:50%; padding:0 60px 20px 0; margin-top:0px}
#footer ul li.first {padding-right:60px}
#footer ul li h3 {margin:0 0 10px 0}
#footer ul li p {line-height:21px; margin-top:5px}
#footer ul li p.address {float:left; width:50%}
#footer ul li p.location {float:right; width:50%; margin-top:-45px}
#footer ul li img {width:100%}
/* 8. liens */
#timeline ul li {width:50%;padding:0;}
#timeline ul li p {padding-bottom:5px}
}
/* 1 - 480 */
@media only screen and (device-width: 480px), only screen and (min-width: 1px) and (max-width: 480px) {
/* 1. Global Misc */
.inner-wrapper {padding:0 20px 0 20px}
/* 2. Intro */
#intro #logoprocessing {position:absolute;margin:0;width:0px; height:0px;overflow:hidden;z-index:0; opacity:0;}
#intro #logoprocessing2 {position:absolute;margin:30px 0 0 0;width:153px; height:153px;overflow:hidden;z-index:0; opacity:1;}
#intro #logoprocessing:hover {cursor:default}
#intro #logoprocessing2:hover {cursor:pointer}
#intro #intro-nav {margin:0; padding-top:350px}
#intro #intro-nav li {width:50%; padding-right:10px}
#intro #intro-nav li a {padding:10px 0 20px 0}
#intro #intro-banner {position:absolute; width:0; height:0; z-index:0; overflow:hidden;opacity:0}
#intro #intro-banner img {height:0px; position:absolute; right:0px;opacity:0}
#intro #heading h1 {font-size:36px}
#intro #heading {position:absolute; margin:215px 0 0 0; overflow:hidden; border-bottom: 2px solid rgba(255, 255, 255, 1); padding-bottom:10px; z-index:0}
#intro #intro-banner_iphone {position:absolute; width:500px; height:1000px; z-index:-1; overflow:hidden}
#intro #intro-banner_iphone img {height:1000px; position:absolute;float:right;opacity:1}
/* 3. Main Nav */
#main-nav #main li {width:75px}
#main-nav #main {display:none; width:80%; left:0; top:50px; padding-left:38px;padding-right:25px; float:left; position:absolute; background:#fff}
#main-nav #arrows {width:50%}
/* 4. Prologue (Logo) */
#prologue #logo {width:100%}
#prologue #logo a {margin-left:0}
/* 6. Portfolio Project */
#project-nav #controls {position:absolute; right:20px}
#project-nav .inner-wrapper {padding:12px 20px 14px 20px}
#project-nav_g #controls {position:absolute; right:20px}
#project-nav_g .inner-wrapper {padding:12px 20px 14px 20px}
#project {padding:100px 20px 100px 20px}
#project #media .rslides {padding-bottom:20px}
#project #media .rslides_tabs {position:relative; width:80%}
#project #media .rslides_tabs li {margin:0 5px 0 0}
/* 7. About (Bio) */
#about{margin-bottom:0px}
#about .text-block {margin-right:0px}
#about .text-block p {padding:0 45px 30px 0}
#about .inner-wrapper {position:relative;padding-bottom:200px}
#about .text-block {overflow:hidden}
#about .text-block p.first {color:#000;;width:50%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.second{color:#000;;width:50%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.third {color:#000;;width:50%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.fourth {width:0px;height:0px;opacity:0}
/* 8. Timeline */
#timeline #periods {width:100%}
#timeline #periods li {margin:0 0 40px 0}
#timeline #periods li .description p {background:#fff}
#timeline #visual {position:absolute; width:50%; right:10px; padding-top:80px}
#timeline #visual img {width:100%}
/* 9. Services */
#services .inner-wrapper {background:url(img/picto/slash.png) no-repeat right 300px !important}
#services{padding-top:0px;margin-bottom:30px}
#services #diagramme {background:url(img/diagramme/diagramme_normal.png);width:0px; height:0px;overflow:hidden;z-index:0;margin:0px;float:left;opacity:0}
#services #diagramme #diagrammeprocessing {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:114px;margin-left:267px}
#services #diagramme #diagrammeprocessing:hover {cursor:default}
#services #diagramme2 {background:url(img/diagramme/diagramme_iphone.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin-top:0px;margin-left:0px;}
#services #diagramme2 #diagrammeprocessing2 {width:0;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:0px;margin-left:0px}
#services #diagramme2 #diagrammeprocessing2:hover {cursor:default}
#services #diagramme3 {background:url(img/diagramme/diagramme_iphone3.png);width:261px; height:377px;overflow:hidden;z-index:1; opacity:1;margin-top:110px;margin-left:80px;}
#services #diagramme3 #diagrammeprocessing3 {width:153px;height:153px;overflow:hidden;z-index:1; opacity:1;margin-top:95px;margin-left:60px}
#services #diagramme3 #diagrammeprocessing3:hover {cursor:pointer}
/* 10. Inquiry */
#inquire .step .choices, #inquire .step .fields {margin:0; padding:20px 0 0 0}
#inquire .step .choices li, #inquire .step .fields li {width:100% !important; padding:0 0 1px 0}
#inquire .step .choices li label {height:50px; padding:16px 0 0 0}
#inquire .step .fields li input[type=text], #inquire .step .fields li textarea, #inquire .step .fields li input[type=submit] {padding:17px 0 18px 0}
#inquire .step .fields li span.required {color:#333; position:absolute; margin:19px 0 0 -7px; font-size:14px}
#inquire #confirmation .header h3 {font-size:42px}
/* 11. Footer */
#footer .inner-wrapper {padding:0px 20px 30px 20px}
#footer ul li {width:100%; padding:0 0 30px 0 !important}
#footer ul li p.address {width:60%}
#footer ul li p.location {width:40%}
/* 12. liens */
#timeline .inner-wrapper {position:relative; padding:150px 20px 200px 20px}
}
/* 1 - 320 */
@media only screen and (device-width: 320px), only screen and (min-width: 1px) and (max-width: 320px) {
/* 2. Intro */
#intro #logoprocessing {position:absolute;margin:0;width:0px; height:0px;overflow:hidden;z-index:0; opacity:0;}
#intro #logoprocessing2 {position:absolute;margin:30px 0 0 0;width:153px; height:153px;overflow:hidden;z-index:0; opacity:1;}
#intro #logoprocessing:hover {cursor:default}
#intro #logoprocessing2:hover {cursor:pointer}
#intro #intro-nav {margin:0; padding-top:275px}
#intro #intro-nav li {width:50%; padding-right:10px}
#intro #intro-nav li a {padding:10px 0 10px 0}
#intro #intro-banner {position:absolute; width:0; height:0; z-index:0; overflow:hidden;opacity:0}
#intro #intro-banner img {height:0px; position:absolute; right:0px;opacity:0}
#intro #heading h1 {font-size:36px}
#intro #heading {position:absolute; margin:215px 0 0 0; overflow:hidden; border-bottom: 2px solid rgba(255, 255, 255, 1); padding-bottom:10px; z-index:0}
#intro #intro-banner_iphone {position:absolute; width:100%; height:1000px; z-index:-1; overflow:hidden}
#intro #intro-banner_iphone img {height:1000px; position:absolute;float:right;opacity:1}
/* 3. Main Nav */
#main-nav #main li {width:80px}
#main-nav #main {display:none; width:80%; left:0; top:50px; padding-left:38px;padding-right:25px; float:left; position:absolute; background:#fff}
#main-nav #arrows {width:50%}
/* 5. Portfolio */
#portfolio_interactif ul li {width:100%}
#portfolio_graphique ul li {width:100%}
/* 7. About (Bio) */
#about{margin-bottom:0px}
#about .text-block {margin-right:0px}
#about .text-block p {padding:0 45px 30px 0}
#about .inner-wrapper {position:relative;padding-bottom:200px}
#about .text-block {overflow:hidden}
#about .text-block p.first {color:#000;;width:100%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.second{color:#000;;width:100%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.third {color:#000;;width:100%; float:left; padding:0 20px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#about .text-block p.fourth {width:0px;height:0px;opacity:0}
/* 8. Timeline */
#timeline #visual {padding-top:120px; opacity:0.5}
/* 9. Services */
#services .inner-wrapper {background:url(img/picto/slash.png) no-repeat right 300px !important}
#services{padding-top:0px;margin-bottom:30px}
#services #diagramme {background:url(img/diagramme/diagramme_normal.png);width:0px; height:0px;overflow:hidden;z-index:0;margin:0px;float:left;opacity:0}
#services #diagramme #diagrammeprocessing {width:0px;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:114px;margin-left:267px}
#services #diagramme #diagrammeprocessing:hover {cursor:default}
#services #diagramme2 {background:url(img/diagramme/diagramme_iphone.png);width:0px; height:0px;overflow:hidden;z-index:1; opacity:0;margin-top:0px;margin-left:0px;}
#services #diagramme2 #diagrammeprocessing2 {width:0;height:0px;overflow:hidden;z-index:0; opacity:0;margin-top:0px;margin-left:0px}
#services #diagramme2 #diagrammeprocessing2:hover {cursor:default}
#services #diagramme3 {background:url(img/diagramme/diagramme_iphone3.png);width:261px; height:377px;overflow:hidden;z-index:1; opacity:1;margin-top:110px;margin-left:10px;}
#services #diagramme3 #diagrammeprocessing3 {width:153px;height:153px;overflow:hidden;z-index:1; opacity:1;margin-top:95px;margin-left:60px}
#services #diagramme3 #diagrammeprocessing3:hover {cursor:pointer}
/* 11. Footer */
#footer .inner-wrapper {padding:0px 20px 30px 20px}
#footer ul li {width:100%; padding:0 0 0px 0 !important}
#footer ul li p {font-size:10px;margin-top:0px}
#footer ul li h3 {margin-top:1px}
#footer ul li p.address {width:60%}
#footer ul li p.location {width:40%}
/* 12. liens */
#timeline .inner-wrapper {position:relative; padding:150px 20px 200px 20px}
#timeline ul li {width:50%;padding:0;}
#timeline ul li p {padding-bottom:0px; font-size:10px}
}
/* 14. Retina Display
======================================================================================= */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
#main-nav .inner-wrapper {background:url(img/slash2@2x.png) no-repeat 115% bottom; background-size:300px 300px}
#main-nav #arrows li a#start {background:url(img/ico-up-double@2x.png) no-repeat center 12px; background-size:11px 46px}
#main-nav #arrows li a#start:hover {background:url(img/ico-up-double@2x.png) no-repeat center -28px #444; background-size:11px 46px}
#main-nav #arrows li a#end {background:url(img/ico-down-double@2x.png) no-repeat center 12px; background-size:11px 46px}
#main-nav #arrows li a#end:hover {background:url(img/ico-down-double@2x.png) no-repeat center -28px #444; background-size:11px 46px}
#project-nav #controls li a.prev {background:url(img/ico-prev@2x.png) no-repeat center center #333; background-size:6px 11px}
#project-nav #controls li a.next {background:url(img/ico-next@2x.png) no-repeat center center #333; background-size:6px 11px}
#project-nav #controls li a.prev_g {background:url(img/ico-prev@2x.png) no-repeat center center #333; background-size:6px 11px}
#project-nav #controls li a.next_g {background:url(img/ico-next@2x.png) no-repeat center center #333; background-size:6px 11px}
#timeline #periods li .period {background:url(img/period@2x.png) no-repeat #999; background-size:31px 31px}
#timeline #periods .prev {background:url(img/ico-up@2x.png) no-repeat center center #fff; background-size:11px 6px}
#timeline #periods .next {background:url(img/ico-down@2x.png) no-repeat center center #fff; background-size:11px 6px}
#services .inner-wrapper {background:url(img/slash@2x.png) no-repeat right 60px; background-size:1000px 1000px}
#inquire .step .singles li label, #inquire .step .multis li label {background:url(img/radio@2x.png) no-repeat right center #999; background-size:1000px 300px}
#inquire .pagination .prev {background:url(img/ico-prev@2x.png) no-repeat 12px center #fff; background-size:6px 11px}
#inquire .pagination .next {background:url(img/ico-next@2x.png) no-repeat 14px center #fff; background-size:6px 11px}
}