@charset "UTF-8";
/* PILOTES lib couleur fonts */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic);
@import url(fonts/font-awesome/css/font-awesome.min.css);
/* Facilite la gestion des paddings */
*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

::-moz-selection { background: lightblue; text-shadow: none; color: #FFF; }

::selection { background: lightblue; text-shadow: none; color: #FFF; }

body { position: relative; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: subpixel-antialiased; /*  -webkit-font-smoothing: antialiased; */ font-smoothing: antialiased; font-size: 16px; color: #333; }

hr { height: 1px; border: none; background: #888; }

h1, h2, h3, h4, h5, h6 { color: inherit; font-weight: lighter; margin-top: 0px; margin-bottom: 1.5em; }

h2 { font-size: 2em; margin-bottom: 20px; }

.cb { clear: both; }

a { text-decoration: none; color: inherit; }

a:hover, a:focus, a:active { outline: none; }

a:hover { text-decoration: underline; }

p { text-align: justify; margin-bottom: 30px; line-height: 1.7em; }

hr { margin: 3em 0; }

@font-face { font-family: 'league_gothicCnRg'; src: url("fonts/league/leaguegothic-condensedregular-webfont.eot"); src: url("fonts/league/leaguegothic-condensedregular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/league/leaguegothic-condensedregular-webfont.woff") format("woff"), url("fonts/league/leaguegothic-condensedregular-webfont.ttf") format("truetype"), url("fonts/league/leaguegothic-condensedregular-webfont.svg#league_gothicCnRg") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'BallparkWeiner'; src: url("fonts/ballpark/ballpark_weiner-webfont.eot"); src: url("fonts/ballpark/ballpark_weiner-webfont-.eot#iefix") format("embedded-opentype"), url("fonts/ballpark/ballpark_weiner-webfont.woff") format("woff"), url("fonts/ballpark/ballpark_weiner-webfont.ttf") format("truetype"), url("fonts/ballpark/ballpark_weiner-webfont.svg#BallparkWeiner") format("svg"); font-weight: normal; font-style: normal; }
* { margin: 0; padding: 0; }

/* LAYOUT RULES */
body { background: #FFF; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

/* fonts class */
.ballpark { font-family: "BallparkWeiner", georgia, times, times New Roman, cursive; }

.league { font-family: "league_gothicCnRg", "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1.ref { position: fixed; font-size: 4px; padding: 0px; margin: 0; color: #1cd4d7; }

.ta-center, .ta-center-all > * { text-align: center; }

.container { position: relative; width: 100%; max-width: 960px; /* pour le moment */ margin: 0 auto; padding: 0px 20px; }

/* ======================================= */
/* ======== HEADER ET NAVIGATION ========= */
/* ======================================= */
@-moz-keyframes reveal-header { 0% { top: -5em; }
  100% { top: 0; } }
@-webkit-keyframes reveal-header { 0% { top: -5em; }
  100% { top: 0; } }
@-o-keyframes reveal-header { 0% { top: -5em; }
  100% { top: 0; } }
@-ms-keyframes reveal-header { 0% { top: -5em; }
  100% { top: 0; } }
@keyframes reveal-header { 0% { top: -5em; }
  100% { top: 0; } }
.header-fixed { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; width: 100%; background-color: #1e2e32; /* @include box-shadow(0px 2px 5px rgba(#000, 2/10)); */ border-bottom: 4px solid #19bec0; -moz-animation: reveal-header 500ms; -webkit-animation: reveal-header 500ms; -o-animation: reveal-header 500ms; -ms-animation: reveal-header 500ms; animation: reveal-header 500ms; }
.header-fixed h1.ref { color: #0b1112; }
.header-fixed li { color: #FFF; }

/* supprime les ••• */
.header-fixed .navbar .nav::after { content: ''; }

.header-fixed .nav li a, .header-fixed #nitro-desktop, .header-fixed #nitro-mobile { color: #fff !important; }
.header-fixed .nav li a:hover, .header-fixed #nitro-desktop:hover, .header-fixed #nitro-mobile:hover { color: #19bec0 !important; }

.header { position: absolute; z-index: 1000; top: 0; left: 0; right: 0; width: 100%; }

.navbar { text-align: center; margin-top: 20px; }
.navbar .nav { list-style: none; padding-bottom: 20px; }
.navbar .nav::after { content: '•••'; display: block; color: #000; }
.navbar .nav li { position: relative; display: inline-block; *display: inline; *zoom: 1; margin: 0px 10px; text-transform: uppercase; letter-spacing: 2px; }
.navbar .nav li a { color: #000; font-size: 13px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
.navbar .nav li a:hover { text-decoration: none; color: #FFF; }

.nav li.nav-mobile-icon { display: none; }

#nitro-desktop, #nitro-mobile { color: #000; font-size: 13px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; cursor: pointer; }
#nitro-desktop:hover, #nitro-mobile:hover { text-decoration: none; color: #FFF; }

.nitro-access { position: fixed; z-index: 1010; right: 0; text-align: center; text-transform: none !important; width: 100%; max-width: 400px; padding: 20px; background-color: #F7F7F7; margin: 100px auto; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); border-bottom: 10px solid #1e2e32; display: none; }
.nitro-access p { margin-bottom: 0; text-align: center; }

#close-nitro-access { float: right; cursor: pointer; }

.nitro-access-overlay { position: absolute; z-index: 1009; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(30, 46, 50, 0.5); width: 100%; height: 100%; display: none; }

/* ======================================= */
/* ============== CONTENT ================ */
/* ======================================= */
/* ============== JUMBOS ================= */
.jumbo { position: relative; text-align: center; height: 600px; background-color: #19BEC0; color: #000; cursor: default; }

.jumbo-inner { margin: 0 auto; padding-top: 170px; }

.jumbo-logo { font-family: "BallparkWeiner", georgia, times, times New Roman, cursive; font-size: 6em; line-height: 100%; font-weight: lighter; display: none; color: #FFF; text-shadow: 0px 4px 0px #19bec0, 0px 8px 0px #073839; }

.jumbo-baseline { font-size: 2em; line-height: 100%; display: none; color: #FFF; letter-spacing: 5px; text-transform: uppercase; }

.jumbo-bullets { color: #1e2e32; display: none; }

.jumbo-icons { font-size: 4em; color: #1e2e32; margin-bottom: 10px; }
.jumbo-icons .fa { padding: 0 5px; display: none; }

.jumbo-cv-online { color: #1e2e32; display: none; }

.jumbo-err404 { background-color: #d54f58; }

/* ======================================= */
/* ============== SECTIONS =============== */
/* ======================================= */
.section { position: relative; padding: 100px 0; }

.title { position: relative; z-index: 2; text-transform: uppercase; font-weight: bold; margin-bottom: 30px; color: #1e2e32; }
.title .fa { margin-right: 7px; }
.title::after { content: '•••'; display: block; }

/* ============== ABOUT =============== */
.about-title img { width: 125px; max-width: 125px; }

/* ============== CV =============== */
.cv { background-color: #1e2e32; color: #FFF; }

.niveler { height: 200px; }

.cv .title { color: #FFF; }

.cv-icon { font-size: 2em; }

/* ============== COMPETENCES =============== */
.competences { background: #F2F2F2; color: #333; position: relative; padding: 100px 0; }
.competences p { font-size: 16px; line-height: 24px; text-align: center; }
.competences h3 { font-size: 30px; text-align: center; font-weight: 300; margin-bottom: 20px; }
.competences .crea-print { color: #19bec0; }
.competences .crea-web { color: #91c46c; }
.competences .integration { color: #f57d57; }
.competences .illus-cv { width: 90%; margin: 0 auto; }

.competences-illus { max-width: 225px; margin: 0 auto 20px auto; }

/* ============== LEVEL BARS =============== */
.show-level { width: 70px; height: 70px; line-height: 70px; background-color: #1e2e32; color: #FFF; font-size: 2em; text-align: center; margin: 0 auto; cursor: pointer; border-radius: 70px; box-shadow: 0 4px 0px #19bec0; }

.level-container { display: none; }

.h3-level { margin-bottom: 10px !important; text-align: left !important; font-size: 1.3em !important; }

.level-bar { background: #333; border: 2px solid #333; height: 20px; position: relative; text-align: left; margin-bottom: 20px; cursor: pointer; overflow: hidden; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; }

.level-bar:hover, .level-bar:focus { background: #FFF; border: 2px solid #CCC; }

.level-photoshop::before, .level-inde::before, .level-illustrator::before, .level-html::before, .level-css::before, .level-jquery::before, .level-php::before { content: ''; position: absolute; left: 0; height: 100%; width: 6%; left: -10px; background: #333; transition-timing-function: cubic-bezier(1, 0, 0.5, 1); transition-duration: 500ms; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

.level-photoshop:hover::before, .level-photoshop:focus::before, .level-photoshop:active::before { width: 90%; background: #19bec0; }

.level-inde:hover::before, .level-inde:focus::before, .level-inde:active::before { width: 80%; background: #d54f58; }

.level-illustrator:hover::before, .level-illustrator:focus::before, .level-illustrator:active::before { width: 70%; background: #f57d57; }

.level-html:hover::before, .level-html:focus::before, .level-html:active::before { width: 90%; background: #f57d57; }

.level-css:hover::before, .level-css:focus::before, .level-css:active::before { width: 80%; background: #19bec0; }

.level-jquery:hover::before, .level-jquery:focus::before, .level-jquery:active::before { width: 60%; background: #91c46c; }

.level-php:hover::before, .level-php:focus::before, .level-php:active::before { width: 40%; background: #d8c46f; }

/* ======================================= */
/* ============== FOOTER   =============== */
/* ======================================= */
.footer { padding: 50px 0; background-color: #1e2e32; color: #FFF; text-align: center; }

.signature { font-size: 1.5em; font-family: "BallparkWeiner", georgia, times, times New Roman, cursive; }

.footer-gotop { margin-top: 10px; width: 100%; text-align: center; font-size: 3em; line-height: 100%; }

.link, button.link { color: #d54f58; border: none; background: none; }

.reset-form { float: right; margin-top: 30px; }

.btn, button.btn { position: relative; height: 55px; line-height: 55px; text-align: center; padding-left: 65px; padding-right: 20px; border-radius: 4px; color: #FFF; display: inline-block; text-transform: uppercase; background: #19bec0; border: none; margin-top: 10px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; overflow: hidden; }
.btn .fa, button.btn .fa { position: absolute; left: 0; height: 100%; line-height: 55px; width: 50px; text-align: center; background-color: #29e1e3; border-radius: 4px 0 0 4px; color: #073839; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 10px 0 20px #16a8a9; }
.btn:hover, button.btn:hover { text-decoration: none; background-color: #139193; }

.btn-default { position: relative; height: 55px; line-height: 55px; text-align: center; padding-left: 65px; padding-right: 20px; border-radius: 4px; color: #FFF; display: inline-block; text-transform: uppercase; background: #19bec0; border: none; margin-top: 10px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; overflow: hidden; }
.btn-default .fa { position: absolute; left: 0; height: 100%; line-height: 55px; width: 50px; text-align: center; background-color: #29e1e3; border-radius: 4px 0 0 4px; color: #073839; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 10px 0 20px #16a8a9; }
.btn-default:hover { text-decoration: none; background-color: #139193; }

.btn-danger { position: relative; height: 55px; line-height: 55px; text-align: center; padding-left: 65px; padding-right: 20px; border-radius: 4px; color: #FFF; display: inline-block; text-transform: uppercase; background: #d54f58; border: none; margin-top: 10px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; overflow: hidden; }
.btn-danger .fa { position: absolute; left: 0; height: 100%; line-height: 55px; width: 50px; text-align: center; background-color: #df787f; border-radius: 4px 0 0 4px; color: #701b21; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 10px 0 20px #d03a44; }
.btn-danger:hover { text-decoration: none; background-color: #c32e38; }

.btn-success { position: relative; height: 55px; line-height: 55px; text-align: center; padding-left: 65px; padding-right: 20px; border-radius: 4px; color: #FFF; display: inline-block; text-transform: uppercase; background: #91c46c; border: none; margin-top: 10px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; overflow: hidden; }
.btn-success .fa { position: absolute; left: 0; height: 100%; line-height: 55px; width: 50px; text-align: center; background-color: #acd390; border-radius: 4px 0 0 4px; color: #466c2b; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 10px 0 20px #83bd5a; }
.btn-success:hover { text-decoration: none; background-color: #76b548; }

.btn-warning { position: relative; height: 55px; line-height: 55px; text-align: center; padding-left: 65px; padding-right: 20px; border-radius: 4px; color: #FFF; display: inline-block; text-transform: uppercase; background: #f57d57; border: none; margin-top: 10px; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; overflow: hidden; }
.btn-warning .fa { position: absolute; left: 0; height: 100%; line-height: 55px; width: 50px; text-align: center; background-color: #f8a287; border-radius: 4px 0 0 4px; color: #a9300a; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 10px 0 20px #f46a3f; }
.btn-warning:hover { text-decoration: none; background-color: #f25827; }

#alert-wrapp { position: fixed; z-index: 1002; top: 65px; width: 100%; height: 80px; display: none; }

.alert { position: relative; width: 100%; padding: 1.3em; text-align: center; color: #FFF; background: #333; }
.alert .close { position: absolute; top: 10px; right: 15px; color: #000; cursor: pointer; text-shadow: none; }

.alert-danger { position: relative; width: 100%; padding: 1.3em; text-align: center; color: #FFF; background: #e00032; }

.alert-success { position: relative; width: 100%; padding: 1.3em; text-align: center; color: #FFF; background: #1de9b6; }

.alert-warning { position: relative; width: 100%; padding: 1.3em; text-align: center; color: #FFF; background: #ffb300; }

/* Form */
.aste { color: #d54f58; }

.link-form { text-decoration: underline; }

/* SUPPRIMER SI INUTILE */
input[type=submit], input[type=reset], input[type=text], input[type=email], input[type=url], textarea, button { /* gestion apparence bouton pour iOS */ -webkit-appearance: none; -webkit-border-radius: 0; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }

#contact-form *::-moz-placeholder { color: #000; }

.error { font-size: 13px; color: red; }

#contact-form p { margin-bottom: 0.5em; }
#contact-form label { text-align: left; width: 100%; display: block; margin-bottom: 7px; }
#contact-form input[type="text"], #contact-form input[type="password"], #contact-form input[type="email"], #contact-form textarea { display: block; padding: 0.85em; text-decoration: none; width: 100%; outline: 0; color: #333; -moz-appearance: none; -webkit-appearance: none; -moz-transition-duration: 300ms; -o-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; background: #f3edd3; border: none; }
#contact-form input[type="text"]:focus, #contact-form input[type="password"]:focus, #contact-form input[type="email"]:focus, #contact-form textarea:focus { background: #19bec0; color: #f3edd3; }
#contact-form input[type="text"], #contact-form input[type="password"], #contact-form input[type="email"] { line-height: 1em; }
#contact-form textarea.message { height: 200px; resize: none; }
#contact-form .cp { width: 50% !important; }
#contact-form ::-webkit-input-placeholder { color: inherit; opacity: 0.5; position: relative; top: 3px; }
#contact-form :-moz-placeholder { color: inherit; opacity: 0.5; }
#contact-form ::-moz-placeholder { color: inherit; opacity: 0.5; }
#contact-form :-ms-input-placeholder { color: inherit; opacity: 0.5; }
#contact-form #aspm { display: none; visibility: hidden; }

/* ======== GRID ========= */
/* ======================= */
.row { position: relative; width: 100%; }

.col { position: relative; padding: 0 10px; float: left; margin-bottom: 20px; }

.col-center { margin: 0 auto; float: none; clear: both; }

.col-no-padding { padding: 0px; float: left; }

.col img { width: 100%; }

.col-1 { width: 8.333333333%; }

.col-2 { width: 16.66667%; }

.col-3 { width: 25%; }

.col-4 { width: 33.33333%; }

.col-5 { width: 41.66667%; }

.col-6 { width: 50%; }

.col-7 { width: 58.33333%; }

.col-8 { width: 66.66667%; }

.col-9 { width: 75%; }

.col-10 { width: 83.33333%; }

.col-11 { width: 91.66667%; }

.col-12 { width: 100%; }

/* ======== RESPONSIVE ======= */
/* =========================== */
@media screen and (max-width: 768px) { .col-1 { width: 8.333333333%; }
  .col-2 { width: 16.66667%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.33333%; }
  .col-5 { width: 41.66667%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.33333%; }
  .col-8 { width: 66.66667%; }
  .col-9 { width: 75%; }
  .col-10 { width: 83.33333%; }
  .col-11 { width: 91.66667%; }
  .col-12 { width: 100%; } }
@media screen and (max-width: 650px) { .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100%; } }
@media screen and (max-width: 480px) { .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100%; } }
@media only screen and (max-width: 768px) { .nav li.nav-desktop { display: none; }
  .nav li.nav-mobile-icon { display: inline-block; }
  .niveler { display: none; } }
@media only screen and (max-width: 650px) { .jumbo-inner { margin: 0 auto; padding-top: 100px; } }
@media only screen and (max-width: 480px) { .jumbo-inner { margin: 0 auto; padding-top: 125px; }
  .jumbo-logo { font-size: 4.5em; }
  .jumbo-baseline { font-size: 1.7em; }
  .level-photoshop::before, .level-inde::before, .level-illustrator::before, .level-html::before, .level-css::before, .level-jquery::before, .level-php::before { width: 10%; }
  .btn { width: 100%; } }