html { color: #222;font-size: 1em;line-height: 1.4;} 
::-moz-selection { background: #b3d4fc;text-shadow: none;} 
::selection { background: #b3d4fc;text-shadow: none;} 
hr { display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;} 
audio,canvas,iframe,img,svg,video { vertical-align: middle;} 
fieldset { border: 0;margin: 0;padding: 0;} 
textarea { resize: vertical;} 
.browserupgrade { margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}
body { font: 16px/26px Helvetica, Helvetica Neue, Arial;}
.wrapper { width: 90%;margin: 0 5%;}
/* ==============
MOBILE: Menu
============== */
nav ul { margin: 0;padding: 0;list-style-type: none;}
nav a { display: block;margin-bottom: 10px;padding: 15px 0;text-align: center;text-decoration: none;font-weight: bold;}
nav a:hover, nav a:visited{ }
nav a:hover { text-decoration: underline;}

/* ==============
MOBILE: Main
============== */
.main { padding: 30px 0; }
.main article h1 { font-size: 2em;}
.main aside { padding: 0px 5% 10px;}
.footer-container footer { padding: 20px 0;}

/* ===============
ALL: IE Fixes
=============== */
.ie7 .title { padding-top: 20px;}

@media only screen and (min-width: 480px) { 
/* ===
INTERMEDIATE: Menu
=== */
nav a { float: left;width: 27%;margin: 0 1.7%;padding: 25px 2%;margin-bottom: 0;}
nav li:first-child a { margin-left: 0;}
nav li:last-child a { margin-right: 0;}
/* =======
INTERMEDIATE: IE Fixes
======= */
nav ul li { display: inline;}
.oldie nav a { margin: 0 0.7%;}
}
@media only screen and (min-width: 768px) {
/* ===
WIDE: CSS3 Effects
=== */
.header-container,.main aside { -webkit-box-shadow: 0 5px 10px #aaa;-moz-box-shadow: 0 5px 10px #aaa;box-shadow: 0 5px 10px #aaa;}
/* ============
WIDE: Menu
============ */
.title { float: left;}
nav { float: right;width: 38%;}
/* ============
WIDE: Main
============ */
.main article { float: left;width: 57%;}
.main aside { float: right;width: 28%;}
}
@media only screen and (min-width: 1140px) {
/* ===============
Maximal Width
=============== */
.wrapper { width: 1026px; /* 1140px - 10% for margins */ margin: 0 auto;}
}
/* ======
Helper classes
====== */
.hidden { display: none !important;visibility: hidden;}
.visuallyhidden { border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus { clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto;}
.invisible { visibility: hidden;}
.clearfix:before,.clearfix:after { content: " ";display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}

body { color:#183152; font-family: Arial, sans-serif, Monospace; font-size:17px; text-align:center; background-color:transparent; margin:0px; overflow:hidden; }
input, textarea, select {  font-family:Arial, sans-serif, Monospace; }
#info { position:absolute; top:0px; width:100%; padding:5px; }
a {color:#333333;}
.ease{ -webkit-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; }
/*.step * { border:1px dotted #FF4400; } */
.step { opacity:0; }
.step.active { opacity:1; }
.contenu { display:block; position:relative; font-size:20px; text-align:center; min-width:310px;}
#step-1 .contenu { }
#step-2 .contenu {  }
#step-3 .contenu {  }
.contenu .centralise { display:block; height:90%; width:100%; padding-top:10%; }
.contenu .bloc { display:block; overflow:hidden; position:relative; }
.contenu .grostitre { font-size:30px; padding:0 0 35px 0; }
.contenu .bloc .title { font-size:24px;  padding:15px 0 5px 0; }
.contenu .bloc .desc { font-size:21px; }
.cocarde { display:block; width:320px; margin-left:-200px; left:50%; position:fixed; top:0px; color:#183152; background:rgba(200,200,200,0.2); border:1px solid #C4D7ED; border-top:none 0px; overflow:hidden; z-index: 6666; padding:10px 50px 10px 50px; border-radius:0 0 20px 20px; }
.contactez { display:block; position:absolute; top:50%; left:80%; margin-top:-20px; height:40px; line-height:40px; font-size:35px; color:#FFFFFF; background:#333333; padding:0 40px; cursor:pointer; text-decoration:none; border-radius:4px; }
#container { display:block; width:50%; left:0%; position:fixed; top:20px; background:transparent; overflow:hidden; z-index:0; }
.contactez:hover { color:#33FF33; border-radius:0px; background:#000000; }
.tableau { width:280px; text-align:center; vertical-align:middle; font-size:18px;  font-family:Arial, sans-serif, Monospace; }
.tableau * { font-size:16px; }
.tableau tr td { padding:5px;  }
.tableau select { display:block; width:312px; padding:2px 5px; background:#000000; color:#33FF33; border:1px solid #33FF33; border-radius:2px; }
.tableau input, .tableau textarea { display:block; width:300px; padding:2px 5px; background:#000000; color:#33FF33; border:none 0px; border-bottom:1px solid #33FF33; border-radius:2px;}
.tableau input[type="submit"]{ display:block; width:312px; padding:5px 5px; background:#333333; color:#33FF33; border:1px solid #33FF33; border-radius:2px; }
form{ display:block; }
.skills b{ margin:3px 15px; }
.skills { min-width:400px; }

.present .contenu b { display:inline-block; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s;transition:0.5s; text-shadow:#FFFFFF;}
.present .contenu b.positioning { -webkit-transform:translateY(-12px);-moz-transform: translateY(-12px);-ms-transform:  translateY(-12px);-o-transform:   translateY(-12px);transform:translateY(-12px);}
.present .contenu b.positioning1 { -webkit-transform:translateY(-7px);-moz-transform: translateY(-7px);-ms-transform:  translateY(-7px);-o-transform:   translateY(-7px);transform:translateY(-7px);}
.present .contenu b.positioning2 { -webkit-transform:translateY(-3px);-moz-transform: translateY(-3px);-ms-transform:  translateY(-3px);-o-transform:   translateY(-3px);transform:translateY(-3px);}

.present .contenu .rotating { -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -ms-transform:rotate(-15deg); -o-transform:rotate(-15deg); transform:rotate(-15deg);}
.present .contenu .rotating1 { -webkit-transform:rotate(-8deg); -moz-transform:rotate(-8deg); -ms-transform:rotate(-8deg); -o-transform:rotate(-8deg); transform:rotate(-8deg);}
.present .contenu .rotating2 { -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -ms-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg);}

.present .contenu .scaling { -webkit-transform:scale(1.4); -moz-transform:scale(1.4); -ms-transform:scale(1.4); -o-transform:scale(1.4); transform:scale(1.4); }
.present .contenu .scaling1 { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); }
.present .contenu .scaling2 { -webkit-transform:scale(1.3); -moz-transform:scale(1.3); -ms-transform:scale(1.3); -o-transform:scale(1.3); transform:scale(1.3); }

b.d3d { -webkit-transform: translateZ(60px); -moz-transform:translateZ(60px); -ms-transform:translateZ(60px); -o-transform:translateZ(60px); transform:translateZ(60px);}

.present .contenu b:nth-child(1) {-webkit-transition-delay:0.5s; -moz-transition-delay: 0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;}
.present .contenu b:nth-child(2) {-webkit-transition-delay:0.75s; -moz-transition-delay: 0.75s; -ms-transition-delay:0.75s; -o-transition-delay:0.75s; transition-delay:0.75s;}
.present .contenu b:nth-child(3) {-webkit-transition-delay:1s; -moz-transition-delay: 1s; -ms-transition-delay:1s; -o-transition-delay:1s; transition-delay:1s;}
.present .contenu b:nth-child(4) {-webkit-transition-delay:1.25s; -moz-transition-delay: 1.25s; -ms-transition-delay:1.25s; -o-transition-delay:1.25s; transition-delay:1.25s;}
.present .contenu b:nth-child(5) {-webkit-transition-delay:1.5s; -moz-transition-delay: 1.5s; -ms-transition-delay:1.5s; -o-transition-delay:1.5s; transition-delay:1.5s;}
.present .contenu b:nth-child(6) {-webkit-transition-delay:1.75s; -moz-transition-delay: 1.75s; -ms-transition-delay:1.75s; -o-transition-delay:1.75s; transition-delay:1.75s;}
.present .contenu b:nth-child(7) {-webkit-transition-delay:2s; -moz-transition-delay: 2s; -ms-transition-delay:2s; -o-transition-delay:2s; transition-delay:2s;}
.present .contenu b:nth-child(8) {-webkit-transition-delay:2.25s; -moz-transition-delay: 2.25s; -ms-transition-delay:2.25s; -o-transition-delay:2.25s; transition-delay:2.25s;}
.present .contenu b:nth-child(9) {-webkit-transition-delay:2.5s; -moz-transition-delay: 2.5s; -ms-transition-delay:2.5s; -o-transition-delay:2.5s; transition-delay:2.5s;}
.present .contenu b:nth-child(10) {-webkit-transition-delay:2.75s; -moz-transition-delay: 2.75s; -ms-transition-delay:2.75s; -o-transition-delay:2.75s; transition-delay:2.75s;}
.present .contenu b:nth-child(11) {-webkit-transition-delay:3s; -moz-transition-delay: 3s; -ms-transition-delay:3s; -o-transition-delay:3s; transition-delay:3s;}
.present .contenu b:nth-child(12) {-webkit-transition-delay:3.25s; -moz-transition-delay: 3.25s; -ms-transition-delay:3.25s; -o-transition-delay:3.25s; transition-delay:3.25s;}

.swish { -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -moz-transform: scale(1.2) rotate(3deg) translateX(-800px);-webkit-transform: scale(1.2) rotate(3deg) translateX(-800px);-o-transform: scale(1.2) rotate(3deg) translateX(-800px);-ms-transform: scale(1.2) rotate(3deg) translateX(-800px);transform: scale(1.2) rotate(3deg) translateX(-800px); opacity:0;}
.present .swish { -moz-transform: scale(1) rotate(0deg) translateX(0px);-webkit-transform: scale(1) rotate(0deg) translateX(0px);-o-transform: scale(1) rotate(0deg) translateX(0px);-ms-transform: scale(1) rotate(0deg) translateX(0px);transform: scale(1) rotate(0deg) translateX(0px); opacity:1;}

.delay1 { -webkit-transition-delay:1.25s; -moz-transition-delay: 1.25s; -ms-transition-delay:1.25s; -o-transition-delay:1.25s; transition-delay:1.25s;}
.delay2 {-webkit-transition-delay:2.25s; -moz-transition-delay: 2.25s; -ms-transition-delay:2.25s; -o-transition-delay:2.25s; transition-delay:2.25s;}
.delay3 {-webkit-transition-delay:3.25s; -moz-transition-delay: 3.25s; -ms-transition-delay:3.25s; -o-transition-delay:3.25s; transition-delay:3.25s;}
.delay4 {-webkit-transition-delay:4.25s; -moz-transition-delay: 4.25s; -ms-transition-delay:4.25s; -o-transition-delay:4.25s; transition-delay:4.25s;}
.delay5 {-webkit-transition-delay:5.25s; -moz-transition-delay: 5.25s; -ms-transition-delay:5.25s; -o-transition-delay:5.25s; transition-delay:5.25s;}
.delay6 {-webkit-transition-delay:6.25s; -moz-transition-delay: 6.25s; -ms-transition-delay:6.25s; -o-transition-delay:6.25s; transition-delay:6.25s;}

canvas { width:100%; height:100%; }
/* ======
Print styles
====== */
@media print { *,*:before,*:after { background: transparent !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
  a,a:visited { text-decoration: underline;}
  a[href]:after { content: " (" attr(href) ")";}
  abbr[title]:after { content: " (" attr(title) ")";}
  a[href^="#"]:after,a[href^="javascript:"]:after { content: "";}
  pre,blockquote { border: 1px solid #999;page-break-inside: avoid;}
  thead { display: table-header-group;}
  tr,img { page-break-inside: avoid;}
  img { max-width: 100% !important;}
  p,h2,h3 { orphans: 3;widows: 3;}
  h2,h3 { page-break-after: avoid;}
}