/* ------- */
/* page CV */
/* ------- */

/* merci */

.merciCv {
    text-align: center;
    margin-top: 7%;
}

.merciLog {
    display: inline-block;
    text-transform: uppercase;
    color: cyan;
    font-family: 'Permanent Marker', cursive;
}

.merciText {
    display: inline-block;
}

/* feuille */
.feuille {
    background-color: white;
    width: 793px;
    height: 1122px;
    margin: 5% auto 3%;
    border-radius: 1%;
    position: relative;

}

/* titre */
.fonction {
    text-align: center;
    padding: 1%;
    width: 65.5%;
    display: inline-block;
    position: absolute;
    top: 1.5%;
    right: 2%;
    color: #a80705;
}

.titreFonction {
    margin: 0;
}

.listeDonnes {
    border-radius: 4%;
    text-align: left;
    background-color: rgb(191, 188, 188);
    padding: 20% 1% 1% 1%;
    width: 28%;
    display: inline-block;
    position: absolute;
    top: 3.5%;
    left: 2%;
}

/* donnes perso */
.donnee {
    margin: 2%;
}

.photo2 {
    position: absolute;
    top: 4%;
    left: 6.5%;
    margin: 0;
    z-index: 1;
}

/* langues programmation */
.languesProgrammation {
    text-align: center;
    width: 28%;
    display: inline-block;
    position: absolute;
    top: 35.2%;
    left: 2%;
}

.titreProgram {
    color: #a80705;
    margin-bottom: 0%;
}
.iconeProgram {
    font-size: 0.9em;
}

.fa-java {
    color: red;
}

.fa-js {
    color: #dba71d;
}

.fa-php {
    color: #828bb4;
}

.fa-html5 {
    color: #ee522f;
}

.fa-css3 {
    color: #1366b6;
}

.fa-file-code {
    color: #2a74ba;
}

.fa-database {
    color: #67b4bf;
}
.fa-python{
    color: #095792;
}

/* langues parlees */
.languesParlees {
    text-align: left;
    width: 28%;
    display: inline-block;
    position: absolute;
    top: 45.1%;
    left: 2%;
}

.titreLangues {
    text-align: center;
    margin: 2% 2% 10% 2%;
    color: #a80705;
}

.langues {
    margin: 2%;
}

.couleurLangues {
    color: rgb(39, 94, 231);
}

/* les qualites */
.listeQualites {
    text-align: left;
    width: 28%;
    display: inline-block;
    position: absolute;
    top: 62%;
    left: 2%;
}

.titreQualites {
    text-align: center;
    margin: 2% 2% 10% 2%;
    color: #a80705;
}

.qualites {
    margin: 2%;
}

/* l'experience */
.listeExperience {
    text-align: center;
    width: 65.5%;
    display: inline-block;
    position: absolute;
    top: 6%;
    right: 2%;
}

.titreExperience {
    text-align: left;
    margin: 2% 2% 2% 2%;
    color: #a80705;
}

.tableauExperience {
    position: relative;
    height: 320px;
}

/* nom colones */
.anneeExperience .dateExperience {
    border: #bfbcbc 1px solid;
    margin: 0;
    padding-left: 5%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 2%;
    left: 0.49%;
    text-align: left;
    color: #ee522f;
    background-color: #bfbcbc;
}

.societeExperience .nomSocieteExperience {
    border: #bfbcbc 1px solid;
    margin: 0;
    padding-left: 5%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 2%;
    left: 33.49%;
    text-align: left;
    color: #ee522f;
    background-color: #bfbcbc;
}

.fonctionExperience .typeFonctionExperience {
    border: #bfbcbc 1px solid;
    margin: 0;
    padding-left: 5%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 2%;
    left: 66.49%;
    text-align: left;
    color: #ee522f;
    background-color: #bfbcbc;
}

/* donnes tableau experience */
.date1 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 61%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.nom1 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 54%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.fonction1 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 54%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.date2 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 9.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.nom2 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 7.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.fonction2 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 9.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.date3 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 137.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.nom3 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 130.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.fonction3 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 130.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.date4 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 165%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.nom4 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 165%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.fonction4 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 165%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.date5 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.nom5 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.fonction5 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.date6 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 28.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.nom6 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 28.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.fonction6 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 28.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.date7 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 37%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.nom7 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 37%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.fonction7 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 37%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.date8 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 45.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.nom8 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 45.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.fonction8 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 43.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.date9 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 55%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.nom9 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 55%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.fonction9 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 55%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.date10 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 63.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.nom10 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 63.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.fonction10 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 63.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.date11 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 72%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.nom11 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 72%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.fonction11 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 72%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.date12 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 80.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.nom12 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 80.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.fonction12 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 80.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

/* etudes */
.listeEcoles {
    text-align: center;
    width: 65.5%;
    display: inline-block;
    position: absolute;
    top: 36%;
    right: 2%;
    height: 25%;
}

.titreEcoles {
    text-align: left;
    margin: 2% 2% 2% 2%;
    color: #a80705;
}

.tableauEcoles {
    position: relative;
    height: 125px;
}

/* nom colones */
.anneeEcoles .dateEcoles {
    border: #bfbcbc 1px solid;
    margin: 0;
    padding-left: 5%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 4%;
    left: 0.49%;
    text-align: left;
    color: #ee522f;
    background-color: #bfbcbc;
}

.nomEcoles .nomEtablissement {
    border: #bfbcbc 1px solid;
    margin: 0;
    padding-left: 5%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 4%;
    left: 33.49%;
    text-align: left;
    color: #ee522f;
    background-color: #bfbcbc;
}

.optionEcoles .typeOptionEcoles {
    border: #bfbcbc 1px solid;
    margin: 0;
    padding-left: 5%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 4%;
    left: 66.49%;
    text-align: left;
    color: #ee522f;
    background-color: #bfbcbc;
}

.date13 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 100.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.nom13 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 100.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.fonction13 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 86.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.date14 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 25.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.nom14 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 20.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.fonction14 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 20.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

/* donnees tableau ecoles */
.ecoleDate1 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 188.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.ecoleNom1 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 183.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;

}

.ecoleOption1 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 188.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.ecoleDate2 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 214.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.ecoleNom2 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 214.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.ecoleOption2 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 214.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.ecoleDate3 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 235%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.ecoleNom3 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 235%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.ecoleOption3 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 235%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #1366b6;
}

.ecoleDate4 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 255.5%;
    left: 0.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.ecoleNom4 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 255.5%;
    left: 33.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

.ecoleOption4 p {
    margin: 0;
    padding: 1%;
    width: 33%;
    display: inline-block;
    position: absolute;
    top: 255.5%;
    left: 66.49%;
    text-align: left;
    font-size: 0.9em;
    color: #565d64;
}

/* conpetences */
.competences {
    text-align: center;
    width: 65.5%;
    display: inline-block;
    position: absolute;
    top: 71%;
    right: 2%;
}

.nomCompetences {
    text-align: left;
    margin: 2% 2% 2% 2%;
    color: #a80705;
}

.contenuCompetences {
    text-align: left;
}

.competences1 {
    margin: 0%;
    text-align: left;
    font-size: 1em;
    line-height: 1.3em;
}

/* permis */
.permis {
    text-align: center;
    width: 63%;
    display: inline-block;
    position: absolute;
    top: 83.5%;
    right: 4.5%;
}

.nomPermis {
    text-align: left;
    margin: 2% 2% 2% 2%;
    color: #a80705;
}

.contenuPermis {
    text-align: left;
}

.typePermis {
    margin: 0%;
    text-align: left;
    font-size: 1em;
    line-height: 1.3em;
}

/* Hobbys */
.hobbys {
    text-align: center;
    width: 26%;
    display: inline-block;
    position: absolute;
    top: 83.5%;
    left: 2%;
    margin: 4px;
}

.nomHobbys {
    text-align: center;
    margin: 2% 2% 2% -8%;
    color: #a80705;
}

.contenuHobbys {
    text-align: left;
}

.typeHobbys {
    margin: 0%;
    text-align: left;
    font-size: 1em;
    line-height: 1.3em;
}

/* PDF imprimer/telecharger */
.boutonPDF {
    text-align: center;
    padding-bottom: 5%;
}

.boutonImprimer {
    padding: 16px 70px;
    cursor: pointer;
    background: linear-gradient(to right, #024a1a, #06fbff);
    border: 1px solid white;
    outline: none;
    color: white;
    margin-right: 2%;
}

.boutonImprimer:hover {
    background: linear-gradient(to left, #024a1a, #06fbff);
}

.boutonDownload {
    padding: 14px 70px;
    text-decoration: none;
    color: black;
    cursor: pointer;
    background: linear-gradient(to left, #024a1a, #06fbff);
    border: 1px solid white;
    outline: none;
    color: white;
    margin-left: 2%;
}

.boutonDownload:hover {
    background: linear-gradient(to right, #024a1a, #06fbff);
}

/* ----------------------------------------------------partie Media Screen----------------------------------------------------------------- */


@media (max-width: 800px) {
    .voirContenu{
        font-size: 1.5em;
    }
    .merciCv{
        margin-top: 17%;
        font-size: 0.6em;
    }
    .feuille{
        width: auto;
        height: auto;
        padding: 1%;
    }
    .listeDonnes{
        display: block;
        position: initial;
        margin: 10% auto;
        width: 90%;
        /* text-align: center; */
        padding: 1% 1% 1% 1%;
    }
    .photo2{
        /* position: initial; */
        display: block;
        width: 150px;
        height: 150px;
        left: initial;
        right: 7%;
        top: 9%;
    }
    .titreLangues, .titreQualites, .nomHobbys{
        text-align: left;
        margin: 2%;
    }
    .listeEcoles{
        display: block;
        position: initial;
        width: 100%;
        margin-top: 25%;
    }
    .competences{
        display: block;
        position: initial;
        width: 100%;
        margin-top: 44%;
    }
    .permis, .hobbys, .fonction, .languesParlees, .languesProgrammation, .listeQualites, .listeExperience{
        display: block;
        position: initial;
        width: 100%;
        margin: 0;
        margin-top: 10%;
    }
    .qualites, .langues{
        margin-left: 0;
    }
    .date2 p, .nom2 p, .fonction2 p{
        top: 7.5%;
    }
    .date5 p, .nom5 p, .fonction5 p{
        top: 19%;
    }
    .date6 p, .nom6 p, .fonction6 p{
        top: 30.5%;
    }
    .date7 p, .nom7 p, .fonction7 p{
        top: 42%;
    }
    .date8 p, .nom8 p, .fonction8 p{
        top: 53.5%;
    }
    .date9 p, .nom9 p, .fonction9 p{
        top: 69%;
    }
    .date10 p, .nom10 p, .fonction10 p{
        top: 80.5%;
    }
    .date11 p, .nom11 p, .fonction11 p{
        top: 92%;
    }
    .date12 p, .nom12 p, .fonction12 p{
        top: 103.5%;
    }
    .date1 p, .nom1 p, .fonction1 p{
        top: 20%;
    }
    .date13 p, .nom13 p, .fonction13 p{
        top: 60.5%;
    }
    .date3 p, .nom3 p, .fonction3 p{
        top: 100.5%;
    }
    .date4 p, .nom4 p, .fonction4 p{
        top: 141%;
    }
    .ecoleDate1 p, .ecoleNom1 p, .ecoleOption1 p{
        top: 167.5%;
    }
    .ecoleDate2 p, .ecoleNom2 p, .ecoleOption2 p{
        top: 198.5%;
    }
    .ecoleDate3 p, .ecoleNom3 p, .ecoleOption3 p{
        top: 224%;
    }
    .ecoleDate4 p, .ecoleNom4 p, .ecoleOption4 p{
        top: 250.5%;
    }
}
@media (max-width: 600px) {
    .voirContenu{
        margin-top: 40%;
    }
    .photo2{
        /* position: initial; */
        /* display: block; */
        width: 100px;
        height: 100px;
        left: initial;
        right: 7%;
        top: 8%;
    }
    .competences{
        margin-top: 74%;
    }
    .nomCompetences, .nomPermis, .titreExperience, .titreEcoles{
        text-align: center;
    }
    .boutonPDF{
        font-size: 0.7em;
    }
    .boutonImprimer{
        padding: 16px 30px;
    }
    .boutonDownload{
        padding: 14px 30px;
    }
}