@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1;
  background: #f5f5f5;
  color: #333;
  font-family: 'DroidSansRegular', Arial, sans-serif;
  font-size: 14px;
  line-height: 21px; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }
  blockquote :before, blockquote :after, q :before, q :after {
    content: '';
    content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

::selection {
  background: #ff9f39;
  color: #fff; }

::-moz-selection {
  background: #ff9f39;
  color: #fff; }

@font-face {
  font-family: 'DroidSansRegular';
  src: url("../font/DroidSans-webfont.eot");
  src: url("../font/DroidSans-webfont.eot?#iefix") format("embedded-opentype"), url("../font/DroidSans-webfont.woff") format("woff"), url("../font/DroidSans-webfont.ttf") format("truetype"), url("../font/DroidSans-webfont.svg#DroidSansRegular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'DroidSansBold';
  src: url("../font/DroidSans-Bold-webfont.eot");
  src: url("../font/DroidSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/DroidSans-Bold-webfont.woff") format("woff"), url("../font/DroidSans-Bold-webfont.ttf") format("truetype"), url("../font/DroidSans-Bold-webfont.svg#DroidSansBold") format("svg");
  font-weight: normal;
  font-style: normal; }
p, ul, h1, h2, h3, h4 {
  margin: 21px 0; }

h1 {
  font-size: 36px; }

h2 {
  font-size: 30px; }

h3 {
  font-size: 24px;
  line-height: 21px; }

h4 {
  font-size: 18px;
  line-height: 21px; }

b, strong {
  font-weight: bold; }

em, i {
  font-style: italic; }

/* Liens */
a {
  color: #33a4c9;
  cursor: pointer;
  text-decoration: none; }

a:hover, a:focus {
  color: #2c8eae;
  text-decoration: underline;
  -webkit-transition: all 1s; }

@media (min-width: 481px) {
  /**********
  /* Grid System
  **********/
  .container_16 {
    max-width: 960px;
    width: 92%;
    margin: 0 auto; }

  .grid_6,
  .grid_8,
  .grid_10,
  .grid_16 {
    display: inline;
    float: left;
    position: relative;
    margin-left: 1%;
    margin-right: 1%; }

  .container_16 .grid_6 {
    width: 35.5%; }

  .container_16 .grid_8 {
    width: 48.0%; }

  .container_16 .grid_10 {
    width: 60.5%; }

  .container_16 .grid_16 {
    width: 98.0%; }

  .clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0; }

  .clearfix {
    display: inline-block; }

  * html .clearfix {
    height: 1%; }

  .clearfix {
    display: block; }

  .aws {
    width: 50%;
    height: auto; }

  /**********
  /* Header
  **********/
  header[role=banner] {
    background: #fff;
    border-bottom: 4px solid #33a4c9;
    padding: 19px 0;
    overflow: hidden; }

  header figure {
    border: 3px solid #eee;
    border-radius: 78px;
    float: right;
    height: 156px;
    width: 156px; }

  header figure img {
    border-radius: 75px;
    height: 150px;
    position: relative;
    width: 150px; }

  header hgroup {
    float: left;
    padding: 42px 0; }

  header hgroup h1 {
    color: #555;
    font-family: 'DroidSansBold', Arial, sans-serif; }

  header hgroup h2 {
    color: #cecece;
    font-style: italic;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); }

  /************
  /* Contact
  ************/
  ::-webkit-input-placeholder {
    color: #fff; }

  input:-moz-placeholder {
    color: #fff; }

  .placeholder {
    color: #fff; }

  .contactform {
    background-color: #33a4c9;
    color: #fff;
    display: none; }

  .contactform > div {
    padding: 21px 0; }

  .contactform input[type=text], .contactform input[type=email], .contactform textarea {
    background: #2983a0;
    border: 1px solid #226d85;
    border-radius: 2px;
    color: #fff;
    max-width: 100%;
    opacity: .7;
    padding: 10px 10px 9px 10px;
    margin-top: 0;
    position: relative;
    vertical-align: top;
    width: 100%; }

  .contactform input[type=text], .contactform input[type=email] {
    margin-bottom: 21px; }

  .contactform textarea {
    font-family: 'DroidSansRegular', Arial, sans-serif;
    font-size: 14px;
    height: 148px; }

  .contactform input[type=text]:focus, .contactform input[type=email]:focus, .contactform textarea:focus {
    border: 1px solid #226d85;
    opacity: 1;
    outline: none;
    -webkit-transition: opacity 1s; }

  .contactform input[type=submit] {
    background: #ff9f39;
    border: 1px solid #ff9f39;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    padding: 10px 10px 9px 10px;
    width: 100%; }

  .contactform input.error, .contactform textarea.error {
    border: 1px solid red; }

  .contactform label.error {
    display: none !important; }

  /***********************
  /* Message du formulaire
  ***********************/
  .messageform {
    display: none;
    /* Affiché via jQuery */
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    padding: 10px 10px 9px 10px;
    margin: 0;
    text-align: center;
    width: 100%; }

  .envoi-valid, .envoi-error {
    display: inline-block; }

  .envoi-valid {
    background-color: #31D869;
    border: 1px solid #108D3A;
    color: #108D3A; }

  .envoi-error {
    background-color: #FF5839;
    border: 1px solid #A62913;
    color: #A62913; }

  .envoi-error a {
    color: #A62913;
    text-decoration: underline; }

  /***************
  /* Corps - Main
  ***************/
  section[role=main] {
    padding: 21px 0;
    overflow: hidden; }

  section[role=main] > div {
    margin-top: 63px; }

  section[role=main] h3 {
    border-bottom: 1px solid #e1e1e1;
    padding: 0 0 20px 60px;
    margin-top: 0px;
    position: relative; }

  section[role=main] h3:after, h3:before {
    content: ' ';
    display: block;
    height: 50px;
    left: 0;
    position: absolute;
    top: -15px;
    width: 50px; }

  section[role=main] h3:before {
    background-color: #33a4c9;
    border-radius: 25px; }

  /***************
  /* Pictos titres
  ***************/
  section[role=main] h3:after {
    background: url("../img/pictos-titre.png") no-repeat 11px 10px; }

  section[role=main] .competences h3:after {
    background-position: 11px -34px; }

  section[role=main] .experiences h3:after {
    background-position: 11px -86px; }

  section[role=main] .formations h3:after {
    background-position: 10px -139px; }

  section[role=main] .loisirs h3:after {
    background-position: 10px -250px; }

  section[role=main] .contact h3:after {
    background-position: 11px -194px; }

  .experiences ul, .formations ul {
    margin-left: 60px; }

  section[role=main] h4 {
    margin-bottom: 0px; }

  section[role=main] h4 strong {
    color: #147393;
    font-weight: normal; }

  .experiences li, .formations li {
    margin-bottom: 63px; }

  .experiences li:last-child, .formations li:last-child {
    margin-bottom: 21px; }

  .experiences li p, .formations li p {
    margin-left: 30px; }

  /**********************************************
  /* Affichage des compétences sous forme de tags
  **********************************************/
  .competences .tags li {
    background-color: #33a4c9;
    border: 1px solid #1b91b7;
    border-radius: 15px;
    color: #fff;
    display: inline-block;
    line-height: 13px;
    margin: 0 7px 17px 0;
    padding: 5px 10px; }

  /************************************************
  /* Affichage des compétences sous forme de barres
  *************************************************/
  .competences .barres li {
    margin-bottom: 21px;
    position: relative; }

  .competences .barres li:after {
    background: #e1e1e1;
    bottom: -4px;
    content: ' ';
    display: block;
    height: 5px;
    position: absolute;
    width: 100%; }

  .competences .barres li span {
    background: #33a4c9;
    bottom: -4px;
    content: ' ';
    display: block;
    height: 5px;
    left: 0;
    position: absolute;
    width: inherit;
    z-index: 1; }

  /***********
  /* Pictos
  ***********/
  .lieu, .dates, .phone, .mail, .site, .form, .twitter, .facebook, .dribbble, .skype {
    background: url("../img/pictos-gris.png") no-repeat;
    padding-left: 25px;
    margin: 0 10px 1px 10px; }

  .lieu {
    background-position: 0 -2px;
    color: #999; }

  .dates {
    background-position: 0 -22px;
    color: #999; }

  .phone {
    background-position: 0 -40px; }

  .mail {
    background-position: 0 -58px; }

  .site {
    background-position: 0 -80px; }

  .form {
    background-position: 0 -100px; }

  .twitter {
    background-position: 0 -122px; }

  .facebook {
    background-position: 0 -140px; }

  .dribbble {
    background-position: 0 -160px; }

  .skype {
    background-position: 0 -180px; }

  .tasks li {
    list-style-type: circle;
    margin-bottom: 10px; } }
@media (max-width: 480px) {
  /***************************************
  /* Grille de mise en page pour le mobile
  ***************************************/
  .grid_6,
  .grid_8,
  .grid_10,
  .grid_16,
  .container_16 {
    margin: 0 10px; }

  /* 
  Nom du thème : Simple Vitae (ou Simple Curriculum ou Simple Resume)
  Description : Votre curriculum vitae sur Internet, un moyen supplémentaire de vous faire connaitre. Ce thème correspond à tous les types de métiers.
  Créateur : Christophe HERMANN (@chrishrmnn)
  */
  /**********
  /* Header
  **********/
  header[role=banner] {
    background: #fff;
    border-bottom: 4px solid #33a4c9;
    padding: 19px 0;
    overflow: hidden; }

  header figure {
    display: none; }

  header hgroup {
    text-align: center; }

  header hgroup h1 {
    color: #555;
    font-family: 'DroidSansBold', Arial, sans-serif; }

  header hgroup h2 {
    color: #cecece;
    font-style: italic;
    line-height: 30px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); }

  /************
  /* Contact
  ************/
  ::-webkit-input-placeholder {
    color: #fff; }

  input:-moz-placeholder {
    color: #fff; }

  .placeholder {
    color: #fff; }

  .contactform {
    background-color: #33a4c9;
    color: #fff;
    display: none; }

  .contactform > div {
    padding: 21px 0; }

  .contactform input[type=text], .contactform input[type=email], .contactform textarea {
    background: #2983a0;
    border: 1px solid #226d85;
    border-radius: 2px;
    color: #fff;
    max-width: 100%;
    opacity: .7;
    padding: 10px 10px 9px 10px;
    margin-top: 0;
    position: relative;
    vertical-align: top;
    width: 100%; }

  .contactform input[type=text], .contactform input[type=email], .contactform textarea {
    margin-bottom: 21px; }

  .contactform textarea {
    font-family: 'DroidSansRegular', Arial, sans-serif;
    font-size: 14px;
    height: 148px; }

  .contactform input[type=text]:focus, .contactform input[type=email]:focus, .contactform textarea:focus {
    border: 1px solid #226d85;
    opacity: 1;
    outline: none;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s; }

  .contactform input[type=submit] {
    background: #ff9f39;
    border: 1px solid #ff9f39;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    padding: 10px 10px 9px 10px;
    width: 100%;
    -webkit-appearance: none; }

  .contactform input.error, .contactform textarea.error {
    border: 1px solid red; }

  .contactform label.error {
    display: none !important; }

  /***********************
  /* Message du formulaire
  ***********************/
  .messageform {
    display: none;
    /* Affiché via jQuery */
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    padding: 10px 10px 9px 10px;
    margin: 0;
    text-align: center;
    width: 100%; }

  .envoi-valid, .envoi-error {
    display: inline-block; }

  .envoi-valid {
    background-color: #31D869;
    border: 1px solid #108D3A;
    color: #108D3A; }

  .envoi-error {
    background-color: #FF5839;
    border: 1px solid #A62913;
    color: #A62913; }

  .envoi-error a {
    color: #A62913;
    text-decoration: underline; }

  /***************
  /* Corps - Main
  ***************/
  section[role=main] {
    padding: 21px 0;
    overflow: hidden; }

  .apropos, .competences, .experiences, .formations, .loisirs, .contact {
    margin-top: 63px; }

  section[role=main] h3 {
    border-bottom: 1px solid #e1e1e1;
    padding: 0 0 20px 60px;
    margin-top: 0px;
    position: relative; }

  section[role=main] h3:after, h3:before {
    content: ' ';
    display: block;
    height: 50px;
    left: 0;
    position: absolute;
    top: -15px;
    width: 50px; }

  section[role=main] h3:before {
    background-color: #33a4c9;
    border-radius: 25px; }

  /***************
  /* Pictos titres
  ***************/
  section[role=main] h3:after {
    background: url("../img/pictos-titre.png") no-repeat 11px 10px; }

  section[role=main] .competences h3:after {
    background-position: 11px -34px; }

  section[role=main] .experiences h3:after {
    background-position: 11px -86px; }

  section[role=main] .formations h3:after {
    background-position: 10px -139px; }

  section[role=main] .loisirs h3:after {
    background-position: 10px -250px; }

  section[role=main] .contact h3:after {
    background-position: 11px -194px; }

  section[role=main] h4 {
    margin-bottom: 0px; }

  section[role=main] h4 strong {
    color: #147393;
    font-weight: normal; }

  .experiences li, .formations li {
    margin-bottom: 63px; }

  .experiences li:last-child, .formations li:last-child {
    margin-bottom: 21px; }

  /**********************************************
  /* Affichage des compétences sous forme de tags
  **********************************************/
  .competences .tags li {
    background-color: #33a4c9;
    border: 1px solid #1b91b7;
    border-radius: 15px;
    color: #fff;
    display: inline-block;
    line-height: 13px;
    margin: 0 7px 17px 0;
    padding: 5px 10px; }

  /************************************************
  /* Affichage des compétences sous forme de barres
  *************************************************/
  .competences .barres li {
    margin-bottom: 21px;
    position: relative; }

  .competences .barres li:after {
    background: #e1e1e1;
    bottom: -4px;
    content: ' ';
    display: block;
    height: 5px;
    position: absolute;
    width: 100%; }

  .competences .barres li span {
    background: #33a4c9;
    bottom: -4px;
    content: ' ';
    display: block;
    height: 5px;
    left: 0;
    position: absolute;
    width: inherit;
    z-index: 1; }

  /***********
  /* Pictos
  ***********/
  .lieu, .dates, .phone, .mail, .site, .form, .twitter, .facebook, .dribbble, .skype {
    background: url("../img/pictos-gris.png") no-repeat;
    padding-left: 25px;
    margin: 0 10px 1px 0; }

  .lieu {
    background-position: 0 -2px;
    color: #999; }

  .dates {
    background-position: 0 -22px;
    color: #999; }

  .phone {
    background-position: 0 -40px; }

  .mail {
    background-position: 0 -58px; }

  .site {
    background-position: 0 -80px; }

  .form {
    background-position: 0 -100px; }

  .twitter {
    background-position: 0 -122px; }

  .facebook {
    background-position: 0 -140px; }

  .dribbble {
    background-position: 0 -160px; }

  .skype {
    background-position: 0 -180px; }

  .aws {
    width: 50%;
    height: auto; } }

/*# sourceMappingURL=resume.css.map */