/**********************************************************************************************************************/
/* ----------------------------- MENU flottant à droite ------------------------------------------------------------- */
.menu {
    position: fixed;
    top: 20px;
    right: 0px;
    float: right;
    z-index: 1000;
}
.openclose-btn {
    position: relative;
    float: right;
    width: 50px;    /*à changer*/
    height: 50px;   /*à changer*/
    cursor: pointer;
    padding-top: 3px;
    background-color: dimgray;
    text-align: center;
}
.openclose-icone {
    display: inline-block;
    padding-top: 7px;   /*à changer*/
    font-size: 30px;
    height: 50px;   /*à changer*/
}
.menu-container {
    position: relative;
    display: block;
    left: 100%;
    top: 50px;  /*à changer*/
}
ul {
    list-style: none;
    display: block;
    padding: 0px;
}
a:link, a:hover, a:active, a:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-family: "Roboto Light";
    display: inline-block;
}

.menu-item {
    position: relative;
    /*float: right;*/
    /*width: 100%;*/
    /*padding-left: 15px;*/
    /*top: -70px;*/
    height: 50px;   /*à changer*/
    text-align: left;
    cursor: pointer;
    text-decoration: none;

    background-color: #262626;
}
.menu-item:hover {
    background-color: #dd6666;
}
.menu-item-icone {
    display: inline-block;
    padding-left: 10px;
    padding-top: 7px;
    font-size: 30px;
    /*height: 70px;*/
}

.menu-item-label {
    padding-top: 5px;
    vertical-align: top;
    display: inline-block;
    font-size: 30px;
    padding-left: 15px;
    padding-right: 15px;
}

/**********************************************************************************************************************/
/* ----------------------------- GESTION DES SLIDES ----------------------------------------------------------------- */

#home, #cv, #frontend {
    /*padding-top: 20px;*/
    height: 640px;
    -webkit-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1);
    -moz-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
    -ms-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
    -o-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
    transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
}
#cv {
    overflow-y: scroll;
}

#home { background:url(../img/xs/home-bg.jpg) center 0 no-repeat fixed; }
#cv { background: url(../img/xs/cv-bg.jpg) center 0 no-repeat fixed; }
#frontend { background: url(../img/xs/frontend-bg.jpg) center 0 no-repeat fixed; }

.screen { width: 360px; margin: 0px; position: relative; }

/* ----- slide HOME ------------------------------------------------------------------------------------------------- */
#home { padding-top: 50px; overflow: hidden;}
#home .screen { text-align: center; background-color: transparent; padding-top: 80px; }
#home-title {
    background: url(../img/xs/home-title.png) no-repeat;
    width: 348px;
    height: 80px;
    position: absolute;
    left: -400px; top: 430px;
    /*transform: rotate(10deg);*/
    -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
#home-subtitle {
    background: url(../img/xs/home-subtitle.png) no-repeat;
    width: 348px;
    height: 50px;
    position: absolute;
    left: 350px; top: 510px;
    /*transform: rotate(10deg);*/
    -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
.home-logo {
    background: url(../img/xs/home-logo.png) no-repeat;
    width: 348px;
    height: 348px;
    margin-left: auto;
    margin-right: auto;
}


/* ----- slide CV --------------------------------------------------------------------------------------------------- */

#cv .screen {
    margin-left: auto;
    margin-right: auto;
}
#cv .screen .left-container {
    /*border: solid 1px #66dd66;*/
    margin: 0;
    padding: 20px 0px 0px 0px;
    /*height: 850px;*/
    /*z-index: 30;*/
    /*width:75%; */
    /*float: left; */
    position: relative;
    overflow: visible;
}
#cv .screen .left-content {
    /*width: 360px;*/
    text-align: center;
    margin: 0px;
    padding: 0px;}
#cv .screen .left-content .laius {
    padding: 20px 10px 30px 10px;
    font-family: "Roboto Light";
    width:95%;
    display: inline-block;
}
#cv .screen .right-container {
    /*border: solid 1px #C82829;*/
    margin: 0;
    padding: 0;
    height: 700px;
    /*width:25%; */
    position: relative;
    /*z-index: 20;*/
}

#cv .screen .right-content {
    height: 615px;
    /*padding-top: 50px; */
    margin-left: 0px;
    margin-right: 0px;}
.cv-logo {width: 125px; height: 125px;}
.cv-cat-title { font-family: "Lavanderia"; font-size: 30px; height: 50px; margin-top: 30px;}

#cv #langages {
    position: absolute;
    left: 50px; top: -550px;
    /*transform: rotate(10deg);*/
    -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
#cv #frameworks {
    position: absolute;
    left: 500px; top: 225px;
    /*transform: rotate(10deg);*/
    -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
#cv #softs {
    position: absolute;
    left: 50px; top: 1000px;
    /*transform: rotate(10deg);*/
    -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}

/* slide FRONTEND */






/* parallax Slide 1 ------------------------------------------------------------------------ */
#s1:target ~ #wrap { top:0px; }
#s1:target ~ #wrap #home { background-position: 50% 0%; }
#s1:target ~ #wrap #cv { background-position: 50% -35%; }
#s1:target ~ #wrap #frontend { background-position: 50% -60%; }
#s1:target ~ #wrap #home-title { left: 0px; top: 430px; transform: rotate(0deg); }
#s1:target ~ #wrap #home-subtitle { left: 0px; top: 510px; transform: rotate(0deg); }

/*!* parallax Slide 2 ------------------------------------------------------------------------ *!*/
#s2:target ~ #wrap { top:-645px; }
#s2:target ~ #wrap #home { background-position: 50% 36%; }
#s2:target ~ #wrap #cv { background-position: 50% 0%; }
#s2:target ~ #wrap #frontend { background-position: 50% -30%; }
#s2:target ~ #wrap #langages { left: 50px; top: 30px; transform: rotate(0deg); }
#s2:target ~ #wrap #frameworks { left: 50px; top: 255px; transform: rotate(0deg); }
#s2:target ~ #wrap #softs { left: 50px; top: 420px; transform: rotate(0deg); }

/*!* parallax Slide 2 ------------------------------------------------------------------------ *!*/
#s3:target ~ #wrap { top:-1290px; }
#s3:target ~ #wrap #home { background-position: 50% 60%; }
#s3:target ~ #wrap #cv { background-position: 50% 35%; }
#s3:target ~ #wrap #frontend { background-position: 50% 0%; }







/*********************************************************************************************/
/* ---------------- tab CV ----------------------------------------------------------------- */

.tab-container{
    margin-bottom: 10px;
}

.tab-content{
    padding: 15px;
}
.skills-line {
    margin-left: 15px;
    margin-right: 15px;
}
.skills-txt {
    width:100px;
    float: left;
}

/*********************************************************************************************/
/* --------------- Trigger ----------------------------------------------------------------- */
.jobs_trigger {
    height: 40px;
    border-top: 1px solid #313131;
    cursor: pointer;
    padding: 5px;
    width:90%;
    display: inline-block;
    text-align: initial;
    background: url(../img/cv/bg_trigger_status.png) no-repeat 305px 10px;
}
.jobs_trigger.active {
    background-position: 315px -41px;

}
.jobs_trigger .date1 {
    width: 40px;
    float: left;
    font-style: italic;
    opacity: 0.5;
}
.jobs_trigger .date2 {
    width: 95px;
    float: left;
    font-style: italic;
    opacity: 0.5;
}

/*.jobs_item:last-child {*/
    /*max-height: 80px;*/
    /*overflow-y: auto;*/
/*}*/
.jobs_item {
    width:95%;
    padding: 5px 15px 5px;
    font-family: "Roboto Light";
    font-size: 12px;
    text-align: left;
    background-color: #313131;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

.jobs_item_content {
    /*display: inline-block;*/
    /*padding-right: 20px;*/
    /*width: 55%;*/
    /*z-index: 300;*/
    /*min-height: 130px;*/
}
.jobs_item_infos {
    /*display: inline-block;*/
    /*vertical-align: top;*/
    padding: 10px;
    height: 50px;
    opacity: 0.8;
    /*text-align: initial;*/
    /*float: right;*/
    margin-bottom: 5px;
    background-color: #dd4444;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    /*z-index: 301;*/
}
.jobs_item_infos_entreprise {
    display: inline-block;
    padding-left: 30px;
    background: url(../img/ico_entreprise_white.png) left top no-repeat;
    background-size: 25px;
    line-height: 30px;

}
.jobs_item_infos_date {
    display: inline-block;
    padding-left: 30px;
    float: right;
    background: url(../img/ico_time_white.png) left top no-repeat;
    background-size: 25px;
    line-height: 30px;
}