@charset "utf-8";

/* _____________________________FONT_____________________________ */

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

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

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

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

}

/* _____________________________GENERAL_____________________________ */

* {
    margin:0;
}

html{
    position: relative;
    min-height: 100%;
}

body{
    margin: 0;
}

.clear {
  clear: both;
}

.content{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    padding-bottom: 40px;
}

section {
    width:100%;
    padding-top:58px;
}
/*
span{
    font-family: bikoblack;
    font-size:125px;
    display:block;
    text-align:center;
    margin-bottom: -20px;
}
*/
span.title_content {
    font-family: 'bikobold';
    text-align:center;
    display:block;
    font-size:4em;
    color:#181818;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}


/* _____________________________MENU_____________________________ */

#nav_menu{
    position:fixed;
    background-color:white;
    width:100%;
    height:55px;
    border-bottom: 3px solid  #CCC;
    top: 0;
    z-index:3;
}

#menu_container{
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

#ul_menu {
    padding:0;
    margin:0;
    width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 13px;
}

li.menu{
    display:inline;
    padding-top:13px;
    padding-bottom:13px;
}

li.menu a{
    font-family:'bikoregular';
    font-size:24px;
    color:#181818;
    text-decoration:none;
    height:30px;
    padding:6px;
    padding-right: 20px;
    padding-left: 20px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}

li.menu a.current{
    font-family:'bikoregular';
    font-size:24px;
    color:#0373c8;
    text-decoration:none;
    border-bottom: solid 10px #0373c8;
    height:30px;
    padding:6px;
    padding-right: 20px;
    padding-left: 20px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}

li.menu a:hover{
    border-bottom: solid 10px #0373c8;
    color: #0373c8;
}

/* _____________________________SUB MENU_____________________________ */

#submenu_container {
    background-color:#0373c8;
    margin-top: -20px;
    margin-bottom: 30px;
}

span.sub_menu{
    font-family: bikoblack;
    text-align:left;
    font-size:30px;
    margin-bottom: 20px;
    display: block;
}

#sub_menu {
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    width:800px;
}

#ul_center_apropos{
    width:645px;
    padding:0;
    margin-left:auto;
    margin-right:auto;
}

#ul_center_portfolio{
    width: 605px;
    padding:0;
    margin-left:auto;
    margin-right:auto;
}

li.sub_menu{
    display:inline;
    margin-right:10px;
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

li.sub_menu a{
    font-family:'bikoregular';
    font-size:18px;
    color:white;
    text-decoration:none;
    height:20px;
    text-transform:uppercase;

}

li.sub_menu a:hover{
    border-bottom: solid 2px #181818;
    color: #181818;
}

li.sub_menu img{
    margin-right:5px;
    height:21px;
}

/* ------------------ PORTFOLIO ------------------ */

#portfolio {
    /*padding-top: 58px;*/
    background-color:#181818;
}

#content_portfolio{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    padding-bottom: 40px;
}

#portfolio span.title_content {
    color:#e0e0e0;
}

#portfolio_submenu_container {
    background-color:#0373c8;
    margin-top: -20px;
    margin-bottom: 30px;
}

.portfolioFilter {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 800px;
}

#portfolio img {
    padding:10px;
}

#portfolio .portfolioFilter img {
    padding:0;
}
 
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
 
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

.portfolioFilter a {
    font-family: 'bikoregular';
    font-size: 18px;
    color: #181818;
    text-decoration: none;
    height: 20px;
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}

.hover {
    width: 380px;
    margin-left: 10px;
    position: absolute;
    z-index: 2;
    top: 10px;
    padding-bottom: 268px;
    cursor: pointer;
    padding-top: 20px;
    opacity:0;
}

.hover a {
    color: white;
    font-family: bikoregular;
    font-size: 1.5em;
    text-align: center;
    text-decoration:none;
}

span.more {
    background-image: url('../../images/plus.png');
    z-index:-1;
    position: absolute;
    display: block;
    width: 380px;
    height: 317px;
    bottom: 48px;
}

span.tag {
    font-family: calibriregular;
    font-size: 0.6em;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 3px;
    padding: 5px;
    width: 330px;
    position: absolute;
    bottom: 60px;
    left: 20px;
}

.portfolioContainer .vignette:hover span.tag {
    bottom:100px;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-property: sliding-vertically;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-duration: 0.3s;
    -moz-transition-property: sliding-vertically;
    -moz-transition-timing-function: ease-in;
    -o-transition-duration: 0.3s;
    -o-transition-property: sliding-vertically;
    -o-transition-timing-function: ease-in;
    transition-duration: 0.3s;
    transition-property: sliding-vertically;
    transition-timing-function: ease-in;
}

.portfolioContainer .vignette:hover .hover{
    opacity:1;

    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: opacity;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-duration: 0.4s;
    -moz-transition-property: opacity;
    -moz-transition-timing-function: ease-in;
    -o-transition-duration: 0.4s;
    -o-transition-property: opacity;
    -o-transition-timing-function: ease-in;
    transition-duration: 0.4s;
    transition-property: opacity;
    transition-timing-function: ease-in;
}


/* ------------------ A PROPOS ------------------ */

#apropos {
    /*padding-top: 58px;*/
    background-color: #e0e0e0;
}

#content_apropos{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom: 3px;
}

#apropos .diplome {
    margin-bottom:30px;
}

#apropos .diplome a {
    color:#e0e0e0;
    background-color:#0373c8;
    border-radius:5px;
    padding:5px;
    text-decoration:none;
    font-family: bikoregular;
    font-size:0.8em;
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
    font-style: italic;
}

#apropos .diplome a:hover {
    cursor:pointer;
    background-color: #181818;
    color: white;
}

#apropos .title_sub_apropos {
    font-family: bikoblack;
    font-size:2em;
    color:#181818;
    text-align:left;
    text-transform:uppercase;
    display: inline;
}

#apropos .date_sub_apropos {
    font-family: calibriregular;
    font-size:1em;
    color:#aeaeae;
    text-align:left;
    display: inline;
}

#apropos .lieu_sub_apropos {
    font-family: bikoregular;
    font-size:1em;
    color:#0373c8;
    text-align:left;
    margin-top: 10px;
    display:block;
}

#apropos .description_sub_apropos {
    font-family: calibriregular;
    font-size:1em;
    color:#181818;
    text-align:left;
    display: block;
}

/* ------------------ COMPETENCES -------------------*/

span.description_bar {
    font-family: bikoregular;
    font-size:1em;
    color:#181818;
    text-align:left;
    padding-top: 10px;
    display: block;
}

/* ------------------ DOWNLOAD CV ------------------ */

section#cv {
    padding-bottom:30px;
}

#cv {
    background-color:#181818;
}

#left_cv {
    width:400px;
    float:left;
}

#right_cv {
    width:400px;
    float:right;
}

span.download_cv {
    font-family: bikobold;
    font-size:2em;
    text-align:center;
    display:block;
    margin-bottom:20px;
    color: #e0e0e0;
}

.center_cv {
    width:100px;
    margin-left:auto;
    margin-right:auto;
}

#cv img {
    -webkit-transition:-webkit-transform .7s;
    -moz-transition:-moz-transform .7s;
    -o-transition:-o-transform .7s;
    -ms-transition:-ms-transform .7s;
    transition:transform .7s;
}

#cv img:hover {
  -webkit-transform:rotate(360deg); 
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg); 
  -ms-transform:rotate(360deg); 
  transform:rotate(360deg);
}
    

/* ------------------ CONTACT ------------------ */

section#contact {
    /*padding-top: 58px;*/
    background-color: #e0e0e0;
}

.info_contact{
    height:30px;
    width:100%;
    margin-bottom: 10px;
}

.info_contact tel{
    float:left;
    font-family: bikoregular;
    font-size:16px;
    padding-top: 3px;
    margin-left: 22px;
}

.info_contact adress{
    float:left;
    font-family: bikoregular;
    font-size:16px;
    padding-top: 3px;
    margin-left: 20px;
}

.info_contact span#ville{
    float:left;
    font-family: bikoregular;
    font-size:16px;
    padding-top: 3px;
    margin-left: 24px;
}
    
.info_contact img{
    float:left; 
}

.info_contact img#img_phone {
    margin-left: 4px;
}

.info_contact img#img_localisation {
    margin-left: 3px;
}

img#my_photo {
    width: 200px;
    float: left;
    margin-right: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
}

/* _____________________________FORMULAIRE DE CONTACT_____________________________ */

form{
    width:400px;
}

label {
    margin: 11px 20px 0 0; 
    font-size: 16px;
    color: #181818;
    font-family: bikoregular;
}
     
input[type=text], textarea {
    font-size: 1em;
    font-family: calibriregular;
    color: black;
    width: 380px;
    height: 36px;
    padding: 0px 10px;
    margin: 2px 0 20px 0;
    border:1px solid #f8f5f1;
    outline:none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 0px 0px 1px #726959;
    -webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
    box-shadow:  inset 0px 0px 1px #b3a895;
}

textarea#message {
    width: 778px;
    margin-top:2px;
}
     
textarea {
    height: 80px;
    padding-top:14px;
}
         
form input[type=submit] {
    font-family: bikoregular; 
    font-size:1.5em;
    color: white;
    text-align:center;
    background-color:#0272c8;
    cursor: pointer;
    border:none;
    width: 800px;
    margin-top: 20px;
    padding:10px;
    outline:none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}

form input[type=submit]:hover {
    background-color:#181818;
}

span.error_contact {
    font-family: calibriregular;
    font-size: 1em;
    color: red;
    position: absolute;
    margin-top: -80px;
    margin-left: 60px;
}

span.error_contact.message {
    font-family: calibriregular;
    font-size: 1em;
    color: red;
    position: absolute;
    margin-top: -118px;
    margin-left: 130px;
}

span.send {
    background-color: white;
    color: red;
    font-family: calibriregular;
    font-size:1em;
    padding:20px;
    border-radius:3px;
    margin-bottom: 20px;
    display: block;
    text-align:center;
}

/* _____________________________FOOTER_____________________________ */

footer{
    height: 120px;
    width: 100%;
    background-color:#181818;
}

footer p{
    font-family:bikoregular;
    font-size:1em;
    color:#e0e0e0;
    padding-top: 20px;
    float: left;
    margin-left:20px;
}

footer img {
    -webkit-transition:-webkit-transform .7s;
    -moz-transition:-moz-transform .7s;
    -o-transition:-o-transform .7s;
    -ms-transition:-ms-transform .7s;
    transition:transform .7s;
    margin-left: 20px;
}

footer img:hover {
  -webkit-transform:rotate(360deg); 
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg); 
  -ms-transform:rotate(360deg); 
  transform:rotate(360deg);
}

#social {
    float:right;
    padding-top:18px;
}

footer a#html5 {
    width: 63px;
    height: 64px;
    float:left;
}

footer a#html5 img {
    margin-left: 0;
    padding-top:12px;
    transition:none;
}