@charset "UTF-8";

/* RESET */
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html, body {width: 100%;height: 100%;background-color: #FFFFFF; -webkit-text-size-adjust: 100%; font-size: 1em; margin: 0;padding: 0;font-family:"brandon_grotesque_regularRg",Arial, Helvetica, sans-serif;}
img, object, embed, canvas, video, audio, picture {max-width: 100%;height: auto;_width: 100%;/* IE6 seulement */ }
.clear {width: 100%;float: left; clear:both;}
a {text-decoration:none;color: #000000;}
a:hover {color: #CEAD8A; text-decoration:none;}
.container {max-width: 1200px; width: 95%; margin:auto; text-align:center;}
ul,li {padding: 0; margin:0;list-style-type: none;}
h1, h2, p {margin:0; padding:0;}

/* ANIMATION */
.transition {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

/* TEXTES & SVG */
h2, h3 {font-family:brandon_grotesquelight;line-height:1.2;}
h3 {font-size: 1.500em;}
h2 {font-size: 2.250em;}
.texte {width: 100%; margin: auto; text-align:center; display:inline-block;font-size:1em;}
.ornement {width:34px; height:16px; display: inline-block;}

/* FONTS */
@font-face {
    font-family: 'brandon_grotesquebold';
    src: url('../fonts/brandon_bld-webfont.eot');
    src: url('../fonts/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_bld-webfont.woff') format('woff'),
         url('../fonts/brandon_bld-webfont.ttf') format('truetype'),
         url('../fonts/brandon_bld-webfont.svg#brandon_grotesquebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesquelight';
    src: url('../fonts/brandon_light-webfont.eot');
    src: url('../fonts/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_light-webfont.woff') format('woff'),
         url('../fonts/brandon_light-webfont.ttf') format('truetype'),
         url('../fonts/brandon_light-webfont.svg#brandon_grotesquelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesque_regularRg';
    src: url('../fonts/brandon_reg-webfont.eot');
    src: url('../fonts/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_reg-webfont.woff') format('woff'),
         url('../fonts/brandon_reg-webfont.ttf') format('truetype'),
         url('../fonts/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* BOUTONS */
.button {width: 100%; padding: 0.625em; font-size:1em; text-align: center; border: 1px solid; margin:0.625em auto 0;display:inline-block;background: none; text-transform: uppercase;font-family:"brandon_grotesque_regularRg",Arial, Helvetica, sans-serif;}
/*.button:hover {border-color: #B59578; color:#FFFFFF;}*/
.black {border-color: #000000; color:#000000;-o-transition:.5s ease-out;  -ms-transition:.5s;  -moz-transition:.5s;  -webkit-transition:.5s; transition:.5s;}
.black:hover {color:#FFFFFF; background-color: #000000;}
.white {border-color: #FFFFFF; color: #FFFFFF;-o-transition:.5s ease-out;  -ms-transition:.5s;  -moz-transition:.5s;  -webkit-transition:.5s; transition:.5s;}
.white:hover {color:#000000; background-color: #FFFFFF;}
 

/* HEADER */
header {height: 100%;background-image:url(../img/bck.jpg);background-color:#000000;text-align: center;}
.titre {margin:auto; max-width: 600px; display: block; height: 80%; background:url(../img/titre.gif) center 0 no-repeat;background-size: contain;position: relative;}
nav {width: 960px;margin: 0 auto; position: relative; z-index: 1000;}
nav ul.menu-normal {margin: auto; padding-top: 10px; margin-bottom: 1.250em;}
nav li {display: inline-block;padding: 0 0.313em;cursor: pointer;}
nav .menu-slim {display: none;}
nav .menu-slim ul {display: none; width: 100%; position:absolute; z-index:2;}
nav .menu-slim li {display: block; padding: 0 0.625em;}
nav .menu-slim li.last {margin-bottom: 0.625em;}
nav .menu-open {width: 100%; display: none;padding: 0.625em 0.625em 0;}
nav .menu-slim ul li a {background: rgba(0,0,0,0.9);}

@media screen AND (max-width: 1023px){
nav {width: 98%;margin: 0 auto;}
}
 
@media screen AND (max-width: 639px){ 
nav ul.menu-normal {display: none;}
nav .menu-slim {display: block; margin-bottom: 10px;}
nav .menu-open {display: block;}
}


/* SECTIONS */
section {width:100%;position: relative; display: block; overflow-x: hidden}


/* À PROPOS */
.a-propos {background-color: #FFFFFF;width: 95%; margin: auto;}
.a-propos h2 {width: 100%;display: inline-block; margin:0.813em auto 0.813em; color:#000000; }
.a-propos h3 {width: 100%; float: left; clear: both; text-align:center; margin:1.250em 0 0.938em 0; }
.pic {width:80px; height:80px; display:inline-block; position: relative;}
.a-propos span {font-family:"brandon_grotesquebold", Arial, Helvetica, sans-serif;}
.a-propos ul {margin: auto; clear: both;}
.a-propos li {display: inline-block;padding: 0 0.313em;}
.experiences-formations {width:50%; float:left;}
.item {width: 100%; display: inline-block; text-align:left;margin:0 0 1.5em 0;}
.competences {width: 45%; float:right; margin: 0 0 0 20px;}
.comp-bur, .comp-graph, .comp-dev, .comp-lang {overflow: hidden;position: relative;}
.discipline {width:65%;display:inline-block;text-align:left;float:left;}
.jauge {width: 35%;display:inline-block;border: 1px #000000 solid;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;behavior: url(../js/PIE.htc); float:right; margin-top:4px;}
.niveau {height: 0.500em;border: 1px #000000 solid;background-color:#000;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;behavior: url(../js/PIE.htc); width: 0%}
.niveau1 {width: 10%;}
.niveau2 {width: 20%;}
.niveau3 {width: 30%;}
.niveau4 {width: 40%;}
.niveau5 {width: 50%;}
.niveau6 {width: 60%;}
.niveau7 {width: 70%;}
.niveau8 {width: 80%;}
.niveau9 {width: 90%;}
.niveau10 {width: 100%;}

#pictos {width: 100%;position: relative;}
#drum {left: -100%; -moz-transform:rotate(-1600deg); -o-transform:rotate(-1600deg); -webkit-transform:rotate(-1600deg)}
#run {left: -100%; -moz-transform:rotate(-1600deg); -o-transform:rotate(-1600deg); -webkit-transform:rotate(-1600deg)}
#cards {right: -100%; -moz-transform:rotate(1600deg); -o-transform:rotate(1600deg); -webkit-transform:rotate(1600deg)}
#combi {right: -100%; -moz-transform:rotate(1600deg); -o-transform:rotate(1600deg); -webkit-transform:rotate(1600deg)}

@media screen AND (max-width: 767px){
.experiences-formations {width: 100%; float:left;}
.competences {width: 100%; float:left;margin: 0;}
.pic {width:70px; height:70px;}
}

@media screen AND (max-width: 639px){
.a-propos li {width: 100%; display: inline-block;padding: 0 0.313em;}
.pic {width:60px; height:60px;}
}


/* PORTFOLIO */
.portfolio {width:100%;background-image:url(../img/bck.jpg); background-color:#000000;text-align: center;position: relative;display: inline-block; margin: auto;font-size:0.875em; padding:0 0 1.250em 0; color: #FFFFFF;}
.portfolio h2 {width: 100%;display: inline-block; margin:0.813em auto 0.813em; color:#FFFFFF; }
.portfolio ul {margin: auto; clear: both;}
.portfolio ul.logos li {display: inline-block;padding: 1em;}
.portfolio ul.creas li {margin:0;display: inline-block;margin: 0.255em; overflow:hidden; cursor: pointer;background-color: #000000;width: 18%;}
.portfolio img.vignette {width: 100%;}
.portfolio ul li img.vignette{-o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;-moz-transform: scale(1.01);-o-transform: scale(1.01);-webkit-transform: scale(1.01);transform: scale(1.01);}
.portfolio ul li:hover img.vignette{opacity:.40; -o-transition:.6s; -ms-transition:.6s; -moz-transition:.6s; -webkit-transition:.6s; transition:.6s;-moz-transform: scale(1.08);-o-transform: scale(1.08);-webkit-transform: scale(1.08);transform: scale(1.08);}

@media screen AND (max-width: 1024px){
.portfolio ul.creas li {width: 23%;}
}

@media screen AND (max-width: 767px){
.portfolio ul.creas li {width: 30%;}
}

@media screen AND (max-width: 639px){ 
.portfolio ul.creas li {width: 45%;}
.portfolio ul.logos {padding-top: 20px;}
.portfolio ul.logos li {width: 30%; display: inline-block;padding: 0 0.313em;}
}


/* CONTACTEZ-MOI */
.contactez-moi {min-height: 100%; background-color: #FFFFFF; width: 100%; margin: auto;}
.contactez-moi h2 {width: 100%;display: inline-block; margin:0.813em auto 0.813em; color:#000000; }
.contactez-moi .formulaire {width: 60%; float: left;padding:0 1.250em;}
.contactez-moi .coordonnees {width: 30%; float: right;}
.contactez-moi ul {text-align: left; display: inline-block; margin:auto;}
.contactez-moi ul li {margin-bottom: 8px;}
.contactez-moi ul .tel img {width:14px; height:16px;}
.contactez-moi ul .mail img {width:20px; height:14px;}
.contactez-moi ul .skype img {width:19px; height:19px;}
.contactez-moi ul .twitter img {width:16px; height:13px;}
.contactez-moi form {text-align: left; width: 100%; padding: 0; margin: 0}
.contactez-moi label {width:30%; display: inline-block; vertical-align: top;}
.contactez-moi label.error {display: none !important;}
.contactez-moi input, textarea {width:70%;border: 1px solid #000000; display: inline-block; margin-bottom: 8px;padding: 0.425em;-webkit-appearance: none;border-radius: 0;}
.contactez-moi input:-webkit-autofill {background-color: #FFFFFF !important;background-image: none !important;}
.contactez-moi input[type="submit"] {float: right;padding: 0.625em; cursor: pointer;}
.contactez-moi input[type="submit"]:focus {-moz-box-shadow: none;-webkit-box-shadow: none; box-shadow: none ;outline: 0;}
.contactez-moi input:focus, textarea:focus {border-color: #B59578;-moz-box-shadow: 0px 0px 8px #B59578;-webkit-box-shadow: 0px 0px 8px #B59578;box-shadow: 0px 0px 8px #B59578;outline: 0;}
.contactez-moi input.error, .contactez-moi textarea.error { color: #d00000; background-color: #ff9393; border: 1px solid #d00000; ;-moz-box-shadow: none;-webkit-box-shadow: none; box-shadow: none; }
.contactez-moi .errors .yes {background-color: #b0d727; border: 1px solid #638000; padding: 5px; color: #638000; text-align: center; display: block; margin-bottom: 20px;}
.contactez-moi .errors .no {background-color: #ff9393; border: 1px solid #d00000; padding: 5px; color: #d00000; text-align: center; display: block; margin-bottom: 20px;}
.contactez-moi .errors ul {width: 100%;}
.contactez-moi span {color: #d00000;}

@media screen AND (max-width: 767px){
.contactez-moi .formulaire {width: 100%; margin: auto;}
.contactez-moi input, textarea {width: 100%;}
.contactez-moi label {width: 100%;}
.contactez-moi .coordonnees {width: 100%; float:left; margin: auto;margin-top: 20px;}
.contactez-moi .social {width: 50px;}
.contactez-moi input[type="submit"] {width:100%;}
}

/* FOOTER */
footer {width: 100%;  padding: 30px 0 30px 0; text-align: center;clear: both;}
#back_top {width:100px; display:block; cursor:pointer; margin: auto;}
.back_top {width:50px; height:50px; display:inline-block;}