@font-face { font-family: "Julius Sans One"; src: url('../fonts/JuliusSansOne-Regular.ttf'); }
@font-face { font-family: "Existence Light"; src: url('../fonts/Existence-Light.ttf'); }
@font-face { font-family: "Quicksand Light"; src: url('../fonts/Quicksand_Light.otf'); }

::selection{ background: rgba(0,0,0,.5); color:#fff; text-shadow: none }
::-moz-selection{ background: rgba(0,0,0,.5); color:#fff; text-shadow: none }
::-webkit-selection{ background: rgba(0,0,0,.5); color:#fff; text-shadow: none }

/* General */
body {
    margin: 0;
    padding: 0;
    background: url(../img/loader.gif) center no-repeat fixed,
        #fff url(../img/bg_fff.jpg) center 0 repeat fixed;
    color:#fff;
    font: normal 100% "Quicksand Light";
    overflow: hidden;
}

h1 { font-family: "Julius Sans One"; }

h2 {
    font-size: 1.5em;
    font-weight:bold;
    color: #fff;
    border-bottom: 1px solid #e16b05;
}

ul li {
    list-style: none;
    font-size: 1.2em;
}

a {
    color:#fff;
    text-decoration: none;
}
.white-popup a {
    color: #333 !important;
}
i {
    width: 1.2em;
    text-align: left;
    margin-left: 10px;
    color: #e16b05;
}

/* Wrapper */
#wrap {
    position: relative;
    top:0;
    float: right;
    width: 80%;
    margin: 0 auto;
    padding: 0;
    -webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
    -ms-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
    -o-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
    z-index: 0;
    background: url(../img/bg_fff.jpg) center 0 repeat fixed;
    display: none;
}

/* Nav */
#nav {
    position: fixed;
    top: 0;
    left:0;
    bottom: 0;
    width: 20%;
    padding: 0;
    margin:0;
    background: #333;
    text-align:left;
    font-family: "Quicksand Light";
    font-size: 1em;
    z-index: 10;
}

#nav li {
    display: inline;
    margin:0;
}
#nav a {
    display: list-item;
    margin: 2em 0 2em 0;
    border-bottom-width: 0;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#nav a::after {
    content: '';
    display: block;
    width: 0%;
    height: 1px;
    background: #e16b05;
    transition: .5s;
}
#nav a:hover::after {
    content: '';
    width: 100%;
}
#nav i {
    width: auto;
    margin-left: 0;
}
#nav li:first-child a::after { width: 0%; }
#nav .geek {
    position: absolute;
    bottom: 15px;
    left: 2.5em;
}
#nav img {
    position: absolute;
    bottom: 0;
    padding-bottom: 1.7em;
    transition: .5s;
    cursor: crosshair;
}
#nav img:hover { padding-bottom: 50px; }
#nav .geek1 { left: 28px; }
#nav .geek2 { left: 50px; }
#nav .geek3 { left: 70px; }
#nav .geek4 { left: 98px; }
#nav .geek5 { left: 120px; }
#nav .geek6 { left: 143px; }

.pdf {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px;
    background: #fff;
    color: #333;
}
.pdf:hover {
    background: #eee;
    color: #000;
}

/* slides */
#contact, #competences, #formations, #experiences, #productions, #loisirs {
    padding:100px 0 500px 0;
    border-top: 5px solid transparent;
}

.inside {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 50px;
    background: rgba(0,0,0,.8);
}

/* contact */
#contact .inside {
    margin: 5% auto;
    text-align: right;

}
#contact h2 { border-bottom: 0; }
#contact img {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 150px;
    height: auto;
    border-radius: 50%;
}

#contact p a, #competences a {
    padding: 0 3px;
    border-width: 0;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
}
#contact a:before, #competences a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    bottom: 0;
    background: #e16b05;
    height: 1px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
#contact a:hover:before,
#contact a:focus:before,
#contact a:active:before,
#competences a:hover:before,
#competences a:focus:before,
#competences a:active:before {
    left: 0;
    right: 0;
}

/* conpétences */
#competences .inside ul {
    width: 31%;
    display: inline-table;
    margin: 0;
    padding: 0;
}
#competences ul.extra > li {
    margin-bottom: 20px;
    font-size: 1em;
}
#competences ul.extra > li > span {
    border-bottom: 1px solid #e16b05;
    font-size: 1.2em;
    line-height: 2;
}
#competences p span { color: #e16b05 }

#competences a, #formations a { font-weight: bold; }

/* expériences */
#experiences a {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}
#experiences a:hover {
    border-color: #e16b05;
}


/* réalisations */
#productions ul {
    display: inline-block;
    width: 100%;
}
#productions li {
    display: inline-block;
}
#productions img {
    float: left;
    clear: both;
    width: 80px;
    height: 80px;
    margin: 0 .5em 0 0;
    padding: 0;
    border-radius: 15px;
    transition: .5s;
}
#productions img:hover{
    transform-origin: 50% 50%;
    transform: scale(1.15);
}

/* loisirs */
#loisirs .inside { height: 300px; }
#loisirs .content { width: calc(100% - 255px); }
#loisirs ul li { display: inline-block; }
#loisirs .image_loisirs {
    float: right;
    position: absolute;
    right: 5px;
    top: calc(50% - 100px);
    width: 250px;
}

#loisirs img {
    width: 100px
}
#loisirs a {
    border-bottom-width: 0;
    opacity: .75;
    transition: opacity .5s;
}
#loisirs a:hover {
    opacity: 1
}

/* target */
#contact:target ~ #wrap #nav li:first-child a::after,
#competences:target ~ #wrap #nav li:nth-child(2) a::after,
#formations:target ~ #wrap #nav li:nth-child(3) a::after,
#experiences:target ~ #wrap #nav li:nth-child(4) a::after,
#productions:target ~ #wrap #nav li:nth-child(5) a::after,
#loisirs:target ~ #wrap #nav li:last-child a::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #e16b05;
    transition: .5s;
}
#contact:target ~ #wrap { top:0px; }
#competences:target ~ #wrap { top:-1140px; }
#formations:target ~ #wrap { top:-2260px; }
#experiences:target ~ #wrap { top:-3260px; }
#productions:target ~ #wrap { top:-4500px; }
#loisirs:target ~ #wrap { top:-5650px; }


@media screen and (max-width: 1160px ) {
    #nav .geek { display: none; }
}
@media screen and (max-width: 960px ) {
    body { overflow: auto; }
    .pdf { display: none; }
    #wrap {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #nav { display: none; }
    #contact, #competences, #formations, #experiences, #productions, #loisirs {
        margin: 0;
        padding: 0 .2em;
    }
    .inside { margin: 0 auto; padding: .5em 1.5em ; }
    #contact {
        margin-top: -25px;
        margin-bottom: -17px;
    }
    #loisirs { margin-bottom: 2em; }
    #contact img {
        bottom: 25px;
        left: 25px;
        width: 110px;
    }
    #competences ul, #productions ul {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }
    #competences ul { margin-bottom: 1em !important; }
    #productions li { padding: 0 .5em .5em 0; }
    #productions img {
        float: left;
        clear: both;
    }
    #loisirs .inside { height: 275px; }
    #loisirs .image_loisirs {
        float: none;
        position: absolute;
        bottom: 25px;
        left: 25px;
        width: 100%;
    }
    #contact:target ~ #wrap,
    #competences:target ~ #wrap,
    #formations:target ~ #wrap,
    #experiences:target ~ #wrap,
    #productions:target ~ #wrap,
    #loisirs:target ~ #wrap { top:inherit; }
}
@media screen and (max-width: 525px ) {
    #loisirs .inside { height: 375px; overflow: inherit; }
}

.mfp-wrap.mfp-gallery .mfp-container { cursor: default; }
.mfp-wrap.mfp-gallery .mfp-close { cursor: pointer; }
.mfp-arrow-right::after, .mfp-arrow-right .mfp-a { border-left: 17px solid #e16b05; }
.mfp-arrow-left::after, .mfp-arrow-left .mfp-a { border-right: 17px solid #e16b05; }