/*-------
Police 



/*-------
CSS Agisant sur toute les tailles
-------*/


 /* Classe pour supprimer le flottement */

.clear {
    clear: both;
}

/*-------
CSS Agisant au dessus 1200px (format 12 colonnes)
-------*/
@media only screen and (min-width:1200px) {
    body {
        margin: 0;
        padding: 0;
        font-family: 'calibriregular', sans-serif;
        background: url(img/background.jpg) no-repeat center;
        background-size: cover;

    }
/* couleur du header */
    header {
        background-color: #386AA6;

    }
/* gere la taille du contenu du header pour plus de faciliter a aligner les élément */
    header .contentsize {
        width: 1060px;
        margin: 0 auto 0 auto;

    }

    /*-------
    Nav
    -------*/
    nav ul {
        list-style: none;
        font-size: 26px;
        float: right;
        margin: -53px 0 0 0;
    }

    nav ul li {
        display: inline-block;
        padding: 5px 0px 5px 25px;
    }

    nav ul li a {
        text-decoration: none;
        color: #ffffff;
    }

    nav ul li a.current {
        text-decoration: underline;
    }
    /* Masquage du ☰ uniquement visible sur les versions mobiles */
    label.menu {
        display: none;
    } 
   
    input.menu {
        display: none;
    }

    /*-------
    footer
    -------*/

    /* couleur de fond du footer */
    footer {
        background-color: #386AA6;
    }

    footer{
        margin-top: 70px;
    }

    footer p {
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        padding: 10px 0 10px 0;
        margin: 0;
    }
/* gere la taille du contenu du footer pour plus de faciliter a aligner les élément */    
    footer .contentsize {
        width: 1060px;
        margin: 0 auto 0 auto;

    }

    /*-------
    Logo
    -------*/
    h1.logo {
        font-size: 40px;
        margin: 0;
    }

    .logo-subtitle {
        font-size: 37px;
        letter-spacing: .3px;
    }

    h1 a {
        text-decoration: none;
        color: white;
    }

    header h1 {
        padding: 20px;
        line-height: 30px;
    }

    /*-------
    Section
    -------*/

    /* Taille de la section */
    section {
        width: 1060px;
        margin: 0 auto 0 auto;
    }

    /* couleur de fond pour mes cadres de couleurs  */
    .background-light-blue {
        background-color: #9BC2F2;
    }
    /* option des paragraphes des pages services et de la page home */
    section p.preview, section p.services {
        padding: 15px 15px 0 15px;
        text-align: justify;
        font-size: 16px;
        height: 70px;

    }
    /* option des liens de mes différentes pages */
    section p.link {
        text-align: right;
        padding: 15px 15px 0 15px;
        color: #ffffff;
        font-size: 20px;

    }

    section p.link a {
        text-decoration: none;
        color: #ffffff;
        font-size: 20px;

    }
    /* option des titre de niveau 1 de mes différentes pages */
    section h1 {
        font-size: 40px;
        color: #386AA6;
        text-decoration: underline;
        text-transform: uppercase;
    }

    /* option des titre de niveau 2 des pages home, contact, service, projet */
    section h2.preview,
    section h2.contact,
    section h2.project {
        color: #ffffff;
        font-size: 24px;
        padding: 15px 15px 0 15px;
    }
    section h2.services{
        color: #ffffff;
        font-size: 24px;
        text-align: center;
    }
    /* hauteur des bloc de la page home */
    .preview-size {
        height: 240px;
    }
    /* option de nome / webdev de la page presentation*/
    h2.cv-name {
        font-size: 36px;
        color: #529AF2;
        margin-top: -9px;
    }

    h2.cv-webdev {
        font-size: 27px;
        color: #386AA6;
        margin-top: 55px;
    }

    /* option des titre h2 composant mon cv sur la page presentation */
    h2.cv {
        font-size: 24px;
        color: #386AA6;
        text-decoration: underline;
        margin-top: -6px;
    }

    div.presentation {
        margin-left: 180px;
        margin-bottom: 50px;
    }

    p.presentation {
        text-align: justify;
    }
    /* option de mes date sur la page presentation */
    p.date {
        font-size: 14px;
        padding: 15px 0 0 15px;
        margin: 0;
        color: #386AA6;
    }
    /* optoon de mes titre de niveau 3 pour les certificat / poste et ecole / entreprise sur la page presentation */
    h3.certificate {
        font-size: 20px;
        color: #ffffff;
        padding: 0 15px 0 15px;
        margin: 15px 0 0 0;
    }

    h3.school {
        font-size: 14px;
        color: #ffffff;
        padding: 0 15px 0 15px;

    }
    /* option des paragraphe de description pour mes expériences professionnelles et mes diploles sur la page presentation */
    p.description {
        font-size: 16px;
        text-align: justify;
        padding: 0 15px 0 15px;
    }

    .study {
        height: 150px;
    }

    div.skill {
        padding: 15px 0;
    }

    h2.skill {
        margin-top: 20px;
    }

    p.skill {
        margin: 0 20px 0 0;
        font-size: 16px;
    }

    /*-------
    Mise en forme des barres de compétences
    -------*/
    .skill-bar {
        border: 1px solid black;
        border-radius: 25px;
        height: 18px;
        box-sizing: border-box
    }

    .skill-bar-fill{
        background-color: #9BC2F2;
        border: 1px solid black;
        border-radius: 25px 0 0 25px;
        height: 16px;
        margin-top: -1px;
        margin-left: -1px;
    }

    /* taille des bloc contenant mes projet sur la page portfolio */
    div.project {
        height: 291px;
    }
    /* option de mes paragraphe de description de projet sur la page portfolio */
    p.project {
        font-size: 16px;
        padding: 15px 15px 0 15px;
        height: 120px;
        text-align: justify;
    }
    /* parametre du bouton contacter moi sur la page portfolio */
    .contact-me {
        color: #ffffff;
        font-size: 30px;
        text-align: center;
        margin: 70px 0 0 360px;

    }

    section p.link-contact a {
        text-decoration: none;
        color: #ffffff;
        padding: 10px;

    }
    .services-size{
        height: 380px;
    }
    /* mise en forme et placement des images représentant mes services */
    img.services{
        margin:20px 160px 0;
        width: 200px;
    }
    .project-picture {
        width: 430px;
        height: 291px;
    }
    /* mise en place de l'embed google map */
    .maps {
        border: none;
        height: 340px;
        width: 520px;
    }
    /* parametre des titre de niveau 3 de la page contact */
    h3.contact {
        padding: 10px 0 0 15px;
        font-size: 20px;
        margin: 0;
    }
    /* parametre des paragraphe de la page contact  */
    p.contact {
        padding: 0 0 0 15px;
        margin: 0 0 30px 0;
        font-size: 18px;
    }
    /* hauteur des bloc sur la page contact*/
    div.contact {
        height: 340px;
    }
    /* gestion du formulaire */
    div.forms {
        margin-left: 90px;
    }

    input {
        width: 400px;
        height: 25px;
        margin: 0 15px 10px 15px;
        padding: 0 10px;
        border: none;
        background-color: #DCDCDC;
        box-sizing: border-box;
    }

    .object{
        width: 850px;
    }

    .content {
        width: 850px;
        height: 80px;
        padding: 0 10px;
        margin: 0 15px 10px 15px;
        border: none;
        background-color: #DCDCDC;
        resize: none;
        box-sizing: border-box;
    }

    input.submit {
        color: #ffffff;
        background-color: #386AA6;
        height: 50px;
        width: 240px;
        font-size: 32px;
        float: right;
        margin-top: 50px;

    }

    label.forms {
        margin: 0 0 0 20px;
        font-size: 14px;

    }
    /* fin de la gestion du formulaire */

    /*-------
    Colonne
    -------*/
    .col {
        float: left;
        margin-right: 20px;
    }

    .col-1-12 {
        width: 70px;
    }

    .col-2-12 {
        width: 160px;
    }

    .col-3-12 {
        width: 250px;
    }

    .col-4-12 {
        width: 340px;
    }

    .col-5-12 {
        width: 430px;
    }

    .col-6-12 {
        width: 520px;
    }

    .col-7-12 {
        width: 610px;
    }

    .col-8-12 {
        width: 700px;
    }

    .col-9-12 {
        width: 790px;

    }

    .col-10-12 {
        width: 880px;
    }

    .col-11-12 {
        width: 970px;
    }

    .last {
        margin-right: 0px;
    }

    .notfirst {
        margin-top: 20px;
    }

    .right {
        float: right;
    }
}

/*-------
CSS Agisant au dessus 992px et en dessous de 1200px (format 12 colonnes)
-------*/
@media only screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin: 0;
        padding: 0;
        font-family: 'calibriregular', sans-serif;
        background: url(img/background.jpg) no-repeat center;
        background-size: cover;

    }
    /* couleur du header */
    header {
        background-color: #386AA6;

    }
/* gere la taille du contenu du header pour plus de faciliter a aligner les élément */
    header .contentsize {
        width: 970px;
        margin: 0 auto 0 auto;

    }

    /*-------
    Nav
    -------*/
    nav ul {
        list-style: none;
        font-size: 26px;
        float: right;
        margin: -53px 0 0 0;
    }

    nav ul li {
        display: inline-block;
        padding: 5px 0px 5px 25px;
    }

    nav ul li a {
        text-decoration: none;
        color: #ffffff;
    }

    nav ul li a.current {
        text-decoration: underline;
    }
 /* Masquage du ☰ uniquement visible sur les versions mobiles */
    label.menu {
        display: none;
    }

    input.menu {
        display: none;
    }

    /*-------
    footer
    -------*/

     /* couleur de fond du footer */
    footer {
        background-color: #386AA6;
    }

    footer{
        margin-top: 50px;
    }

    footer p {
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        padding: 10px 0 10px 0;
        margin: 0;
    }
/* gere la taille du contenu du footer pour plus de faciliter a aligner les élément */   
    footer .contentsize {
        width: 970px;
        margin: 0 auto 0 auto;

    }

    /*-------
    Logo
    -------*/
    h1.logo {
        font-size: 40px;
        margin: 0;
    }

    .logo-subtitle {
        font-size: 37px;
        letter-spacing: .3px;
    }

    h1 a {
        text-decoration: none;
        color: white;
    }

    header h1 {
        padding: 20px;
        line-height: 30px;
    }

    /*-------
    Section
    -------*/

    /* Taille de la section */
    section {
        width: 970px;
        margin: 0 auto 0 auto;
    }
    /* couleur de fond pour mes cadres de couleurs  */
    .background-light-blue {
        background-color: #9BC2F2;
    }
    /* option des paragraphes des pages services et de la page home */
    section p.preview,section p.services {
        padding: 15px 15px 0 15px;
        text-align: justify;
        font-size: 16px;
        height: 70px;

    }
    /* option des liens de mes différentes pages */
    section p.link {
        text-align: right;
        padding: 15px 15px 0 15px;
        color: #ffffff;
        font-size: 20px;

    }

    section p.link a {
        text-decoration: none;
        color: #ffffff;
        font-size: 20px;

    }
    /* option des titre de niveau 1 de mes différentes pages */
    section h1 {
        font-size: 40px;
        color: #386AA6;
        text-decoration: underline;
        text-transform: uppercase;
    }
    /* option des titre de niveau 2 des pages home, contact, service, projet */
    section h2.preview,
    section h2.contact,
    section h2.project {
        color: #ffffff;
        font-size: 24px;
        padding: 15px 15px 0 15px;
    }

    section h2.services{
        color: #ffffff;
        font-size: 24px;
        text-align: center;
        
    }
    /* hauteur des bloc de la page home */
    .preview-size {
        height: 250px;
    }
    /* option de nome / webdev de la page presentation*/
    h2.cv-name {
        font-size: 36px;
        color: #529AF2;
        margin-top: -9px;
    }

    h2.cv-webdev {
        font-size: 27px;
        color: #386AA6;
        margin-top: 55px;
    }
    /* option des titre h2 composant mon cv sur la page presentation */
    h2.cv {
        font-size: 24px;
        color: #386AA6;
        text-decoration: underline;
        margin-top: -6px;
    }

    div.presentation {
        margin-left: 165px;
        margin-bottom: 50px;
    }

    p.presentation {
        text-align: justify;
    }
    /* option de mes date sur la page presentation */
    p.date {
        font-size: 14px;
        padding: 15px 0 0 15px;
        margin: 0;
        color: #386AA6;
    }
    /* option de mes titre de niveau 3 pour les certificat / poste et ecole / entreprise sur la page presentation */
    h3.certificate {
        font-size: 20px;
        color: #ffffff;
        padding: 0 15px 0 15px;
        margin: 15px 0 0 0;

    }

    h3.school {
        font-size: 14px;
        color: #ffffff;
        padding: 0 15px 0 15px;

    }
    /* option des paragraphe de description pour mes expériences professionnelles et mes diploles sur la page presentation */
    p.description {
        font-size: 16px;
        text-align: justify;
        padding: 0 15px 0 15px;
    }

    .study {
        height: 150px;
    }

    div.skill {
        padding: 15px 0;
    }

    h2.skill {
        margin-top: 20px;
    }

    p.skill {
        margin: 0 20px 0 0;
        font-size: 16px;
    }
    /*-------
    Mise en forme des barres de compétences
    -------*/
    .skill-bar {
        border: 1px solid black;
        border-radius: 25px;
        height: 18px;
        box-sizing: border-box
    }

    .skill-bar-fill{
        background-color: #9BC2F2;
        border: 1px solid black;
        border-radius: 25px 0 0 25px;
        height: 16px;
        margin-top: -1px;
        margin-left: -1px;
    }
    .project-picture {
        width: 392.5px;
    }
   /* taille des bloc contenant mes projet sur la page portfolio */
    div.project {
        height: 265.617px;
    }
    /* option de mes paragraphe de description de projet sur la page portfolio */
    p.project {
        font-size: 16px;
        padding: 15px 15px 0 15px;
        height: 95px;
        text-align: justify;
    }
    /* parametre du bouton contacter moi sur la page portfolio */
    .contact-me {
        color: #ffffff;
        font-size: 30px;
        text-align: center;
        margin: 70px 0 0 330px;

    }

    section p.link-contact a {
        text-decoration: none;
        color: #ffffff;
        padding: 10px;

    }
    /* mise en forme et placement des images représentant mes services */
    img.services{
        margin:20px 137.5px 0;
        width: 200px;
    }
    .services-size{
        height: 385px;
    }
    /* mise en place de l'embed google map */
    .maps {
        border: none;
        height: 340px;
        width: 475px;
    }
    /* parametre des titre de niveau 3 de la page contact */
    h3.contact {
        padding: 0 0 0 15px;
        font-size: 20px;
        margin: 0;
    }
    /* parametre des paragraphe de la page contact  */
    p.contact {
        padding: 0 0 0 15px;
        margin: 0 0 30px 0;
        font-size: 18px;
    }
    /* hauteur des bloc sur la page contact*/
    div.contact {
        height: 340px;
    }
    /* gestion du formulaire */
    div.forms {
        margin-left: 90px;
    }

    input {
        width: 362.5px;
        height: 25px;
        margin: 0 15px 10px 15px;
        padding: 0 10px;
        border: none;
        background-color: #DCDCDC;
        box-sizing: border-box;
    }

    .object{
        width: 775px;
    }

    .content {
        width: 775px;
        height: 80px;
        padding: 0 10px;
        margin: 0 15px 10px 15px;
        border: none;
        background-color: #DCDCDC;
        resize: none;
        box-sizing: border-box;
    }

    input.submit {
        color: #ffffff;
        background-color: #386AA6;
        height: 50px;
        width: 240px;
        font-size: 32px;
        float: right;
        margin-top: 50px;

    }

    label.forms {
        margin: 0 0 0 20px;
        font-size: 14px;

    }
    /* fin de la gestion du formulaire */

    /*-------
    Colonne
    -------*/
    .col {
        float: left;
        margin-right: 20px;
    }

    .col-1-12 {
        width: 62.5px;
    }

    .col-2-12 {
        width: 145px;
    }

    .col-3-12 {
        width: 227.5px;
    }

    .col-4-12 {
        width: 310px;
    }

    .col-5-12 {
        width: 392.5px;
    }

    .col-6-12 {
        width: 475px;
    }

    .col-7-12 {
        width: 557.5px;
    }

    .col-8-12 {
        width: 640px;
    }

    .col-9-12 {
        width: 722.5px;

    }

    .col-10-12 {
        width: 805px;
    }

    .col-11-12 {
        width: 887.5px;
    }

    .last {
        margin-right: 0px;
    }

    .notfirst {
        margin-top: 20px;
    }

    .right {
        float: right;
    }
}

/*-------
CSS Agisant au dessus 768px et en dessous de 992px (format 8 colonnes)
-------*/
@media only screen and (min-width:768px) and (max-width:991px) {
    body {
        margin: 0;
        padding: 0;
        font-family: 'calibriregular', sans-serif;
        background: url(img/background.jpg) no-repeat center;
        background-size: cover;

    }
/* couleur du header */
    header {
        background-color: #386AA6;

    }
/* gere la taille du contenu du header pour plus de faciliter a aligner les élément */
    header .contentsize {
        width: 760px;
        margin: 0 auto 0 auto;

    }

    /*-------
    Nav
    -------*/
    nav ul {
        list-style: none;
        font-size: 20px;
        float: right;
        margin: -53px 10px 0 0;
    }

    nav ul li {
        display: inline-block;
        padding: 5px 0px 5px 25px;
    }

    nav ul li a {
        text-decoration: none;
        color: #ffffff;
    }

    nav ul li a.current {
        text-decoration: underline;
    }
    /* Masquage du ☰ uniquement visible sur les versions mobiles */
    label.menu {
        display: none;
    }

    input.menu {
        display: none;
    }

    /*-------
    footer
    -------*/
    /* couleur de fond du footer */    
    footer {
        background-color: #386AA6;
    }

    footer{
        margin-top: 50px;
    }

    footer p {
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        padding: 10px 0 10px 0;
        margin: 0;
    }
/* gere la taille du contenu du footer pour plus de faciliter a aligner les élément */  
    footer .contentsize {
        width: 760px;
        margin: 0 auto 0 auto;

    }

    /*-------
    Logo
    -------*/
    h1.logo {
        font-size: 30px;
        margin: 0;
    }

    .logo-subtitle {
        font-size: 27px;
        letter-spacing: .6px;
    }

    h1 a {
        text-decoration: none;
        color: white;
    }

    header h1 {
        padding: 20px;
        line-height: 30px;
    }

    /*-------
    Section
    -------*/

    /* Taille de la section */    
    section {
        width: 760px;
        margin: 0 auto 0 auto;
    }
    /* couleur de fond pour mes cadres de couleurs  */
    .background-light-blue {
        background-color: #9BC2F2;
    }
  /* option des paragraphes de la page home */
    section p.preview {
        padding: 10px;
        text-align: justify;
        font-size: 16px;
        height: 70px;

    }
    /* option des liens de mes différentes pages */
    section p.link {
        text-align: right;
        padding: 10px;
        color: #ffffff;
        font-size: 20px;

    }

    section p.link a {
        text-decoration: none;
        color: #ffffff;
        font-size: 20px;

    }
    /* option des titre de niveau 1 de mes différentes pages */
    section h1 {
        font-size: 40px;
        color: #386AA6;
        text-decoration: underline;
        text-transform: uppercase;
    }
    
    /* option des titre de niveau 2 des pages home, contact, projet */
    section h2.preview,
    section h2.contact,
    section h2.project {
        color: #ffffff;
        font-size: 24px;
        padding: 10px;
    }
    /* option des titres de niveau 2 de la page service */
    section h2.services{
        color: #ffffff;
        font-size: 24px;
        text-align: center;
        height: 56px;
    }
    /* optio */
    section p.services {
        padding: 10px;
        text-align: justify;
        font-size: 16px;
    /* hauteur des bloc de la page home */
    }
    .preview-size {
        height: 250px;
    }
/* option de nom / webdev de la page presentation*/
    h2.cv-name {
        font-size: 36px;
        color: #529AF2;
        margin-top: -9px;
    }

    h2.cv-webdev {
        font-size: 25px;
        color: #386AA6;
        margin-top: 55px;
    }
    /* option des titre h2 composant mon cv sur la page presentation */
    h2.cv {
        font-size: 24px;
        color: #386AA6;
        text-decoration: underline;
        margin-top: -6px;
    }

    div.presentation {
        margin-bottom: 50px;
    }

    p.presentation {
        text-align: justify;
    }
    /* option de mes date sur la page presentation */
    p.date {
        font-size: 14px;
        padding: 10px 0 0 10px;
        margin: 0;
        color: #386AA6;
    }
    /* option de mes titre de niveau 3 pour les certificat / poste et ecole / entreprise sur la page presentation */
    h3.certificate {
        font-size: 20px;
        color: #ffffff;
        padding: 0 10px;
        margin: 10px 0 0 0;
        height: 46px;
    }

    h3.school {
        font-size: 14px;
        color: #ffffff;
        padding: 0 10px;
        height: 34px;

    }
    /* option des paragraphe de description pour mes expériences professionnelles et mes diploles sur la page presentation */
    p.description {
        font-size: 16px;
        text-align: justify;
        padding: 0 10px;
    }

    .study {
        height: 200px;
    }

    div.skill {
        padding: 15px 0;
    }

    h2.skill {
        margin-top: 20px;
    }

    p.skill {
        margin: 0 20px 0 0;
        font-size: 16px;
    }
    /*-------
    Mise en forme des barres de compétences
    -------*/
    .skill-bar {
        border: 1px solid black;
        border-radius: 25px;
        height: 18px;
        box-sizing: border-box
    }

    .skill-bar-fill{
        background-color: #9BC2F2;
        border: 1px solid black;
        border-radius: 25px 0 0 25px;
        height: 16px;
        margin-top: -1px;
        margin-left: -1px;
    }
    .project-picture {
        width: 370px;
    }
    /* taille des bloc contenant mes projet sur la page portfolio */
    div.project {
        height: 250.4px;
    }

    p.project {
        font-size: 16px;
        padding: 10px;
        height: 80px;
        text-align: justify;
    }
    /* parametre du bouton contacter moi sur la page portfolio */
    .contact-me {
        color: #ffffff;
        font-size: 30px;
        text-align: center;
        margin: 70px 0 0 195px;

    }

    section p.link-contact a {
        text-decoration: none;
        color: #ffffff;
        padding: 10px;

    }
    /* mise en forme et placement des images représentant mes services */
    img.services{
        margin: 20px 85px 0;
        width: 200px;
    }
    div.services-size{
        height: 450px;
    }
    /* mise en place de l'embed google map */
    .maps {
        border: none;
        height: 340px;
        width: 370px;
    }
    /* parametre des titre de niveau 3 de la page contact */
    h3.contact {
        padding: 10px 0 0 10px;
        font-size: 20px;
        margin: 0;
    }
    /* parametre des paragraphe de la page contact  */
    p.contact {
        padding: 0 0 0 10px;
        margin: 0 0 30px 0;
        font-size: 18px;
    }
    /* hauteur des bloc sur la page contact*/
    div.contact {
        height: 340px;
    }
    /* gestion du formulaire */
    div.forms {
        margin-left: 0;
    }

    input {
        width: 350px;
        height: 25px;
        margin: 0 10px 10px 10px;
        padding: 0 10px;
        border: none;
        background-color: #DCDCDC;
        box-sizing: border-box;
    }

    .content {
        width: 740px;
        height: 80px;
        padding: 0 10px;
        margin: 0 10px 10px 10px;
        border: none;
        background-color: #DCDCDC;
        resize: none;
        box-sizing: border-box;
    }

    .object{
        width: 740px;
    }

    input.submit {
        color: #ffffff;
        background-color: #386AA6;
        height: 50px;
        width: 240px;
        font-size: 32px;
        float: right;
        margin-top: 50px;

    }

    label.forms {
        margin: 0 0 0 20px;
        font-size: 14px;

    }
    /* fin de la gestion du formulaire */
    /*-------
    Colonne
    -------*/
    .col {
        float: left;
        margin-right: 20px;
    }

    .col-1-8 {
        width: 77.5px;
    }

    .col-2-8 {
        width: 175px;
    }

    .col-3-8 {
        width: 272.5px;
    }

    .col-4-8 {
        width: 370px;
    }

    .col-5-8 {
        width: 467.5px;
    }

    .col-6-8 {
        width: 565px;
    }

    .col-7-8 {
        width: 662.5px;
    }
    .last {
        margin-right: 0px;
    }

    .notfirst {
        margin-top: 20px;
    }

    .right {
        float: right;
    }
}

/*-------
CSS Agisant au dessus 578px et en dessous de 768px
-------*/
@media only screen and (min-width:578px) and (max-width:767px) {
    body {
        margin: 0;
        padding: 0;
        font-family: 'calibriregular', sans-serif;
        background: url(img/background.jpg) no-repeat center;
        background-size: cover;

    }

    header {
        background-color: #386AA6;
        position: relative;
        margin: 0;
        z-index: 2;

    }

    /*-------
    Logo
    -------*/
    h1.logo {
        font-size: 26px;
        margin: 0;
    }

    .logo-subtitle {
        font-size: 23px;
        letter-spacing: .8px;
    }

    h1 a {
        text-decoration: none;
        color: white;
    }

    header h1 {
        padding: 20px;
        line-height: 30px;
    }

    /*-------
    Nav
    -------*/


    nav ul {
        display: none;
        flex-direction: column;
        background: #386AA6;
        list-style: none;
        font-size: 26px;
        margin: 0;
        padding: 0;

    }

    nav ul li {
        margin: 10px auto;
    }

    nav ul li a {
        text-decoration: none;
        color: #ffffff;

    }

    nav ul li a.current {
        text-decoration: underline;
    }
    /* apparition du menu hamburger qui était en display none sur les tailles d'écran superieur */
    input.menu {
        display: none;
    }

    label.menu {
        display: inline;
        float: right;
        width: 48px;
        margin: -80px 20px 0 0;
        font-size: 40px;
        color: #ffffff;
        cursor: pointer;
    }

    #toggle:checked+ul {
        display: flex;
    }

    /*-------
    footer
    -------*/

    /* couleur de fond du footer */
    footer {
        background-color: #386AA6;
    }
    #home-more{
        display: none;
    }
    footer{
        margin-top: 50px;
    }

    footer p {
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        padding: 10px 0 10px 0;
        margin: 0;
    }



    /*-------
    Section
    -------*/
    section {
        z-index: auto;
        position: relative;
        padding: 0 20px;

    }
    /* couleur de fond pour mes cadres de couleurs  */
    .background-light-blue {
        background-color: #9BC2F2;

    }
    /* option des paragraphes des pages services et de la page home */
    section p.preview, section p.services {
        padding: 10px;
        text-align: justify;
        font-size: 14px;
        height: 100%;

    }
    /* option des liens de mes différentes pages */
    section p.link {
        text-align: right;
        padding: 10px;
        color: #ffffff;
        font-size: 16px;

    }

    section p.link a {
        text-decoration: none;
        color: #ffffff;
        font-size: 16px;

    }
    /* option des titre de niveau 1 de mes différentes pages */
    section h1 {
        font-size: 40px;
        color: #386AA6;
        text-decoration: underline;
        text-transform: uppercase;
        text-align: center;
    }
    /* option des titre de niveau 2 des pages home, contact, service, projet */
    section h2.preview,
    section h2.contact,
    section h2.project {
        color: #ffffff;
        font-size: 20px;
        padding: 10px;
    }
    section h2.services{
        color: #ffffff;
        font-size: 20px;
        text-align: center;
    }

    /* option de nom / webdev de la page presentation*/
    h2.cv-name {
        font-size: 36px;
        color: #529AF2;
        margin: -172px 0 0 180px;
        float: left;
    }

    h2.cv-webdev {
        font-size: 24px;
        color: #386AA6;
        margin: -28px 0 0 180px;
        float: left;
    }
    /* option des titre h2 composant mon cv sur la page presentation */
    h2.cv {
        font-size: 20px;
        color: #386AA6;
        text-decoration: underline;

    }

    p.presentation {
        text-align: justify;
    }
    /* option de mes date sur la page presentation */
    p.date {
        font-size: 14px;
        padding: 10px 0 0 10px;
        margin: 0;
        color: #386AA6;

    }

    div.date {
        width: 25%;
        height: 140px;
        float: left;
    }
    /* option de mes titre de niveau 3 pour les certificat / poste et ecole / entreprise sur la page presentation */
    h3.certificate {
        font-size: 18px;
        color: #ffffff;
        padding: 0 10px;
        margin: 10px 0 0 0;
        float: left;
        width: 75%;
        box-sizing: border-box;

    }

    h3.school {
        font-size: 16px;
        color: #ffffff;
        padding: 0 10px;
        float: left;
        width: 75%;
        box-sizing: border-box;

    }
    /* option des paragraphe de description pour mes expériences professionnelles et mes diploles sur la page presentation */
    p.description {
        font-size: 14px;
        text-align: justify;
        padding: 0 10px;
        float: left;
        width: 75%;
        box-sizing: border-box;
        margin: 0 0 10px 0;
    }


    div.skill {
        padding: 15px 0;
    }

    h2.skill {
        margin-top: 20px;
    }

    p.skill {
        margin: 0 0 15px 0;
        font-size: 16px;
    }
    /*-------
    Mise en forme des barres de compétences
    -------*/
    .skill-bar {
        border: 1px solid black;
        border-radius: 25px;
        height: 18px;
        box-sizing: border-box
    }

    .skill-bar-fill{
        background-color: #9BC2F2;
        border: 1px solid black;
        border-radius: 25px 0 0 25px;
        height: 16px;
        margin-top: -1px;
        margin-left: -1px;
    }
    /* taille des image de la page portefolio */
    .project-picture {
        width: 100%;
    }
    /* option de mes paragraphe de description de projet sur la page portfolio */
    p.project {
        font-size: 14px;
        padding: 10px;
        height: 120px;
        text-align: justify;
    }
    /* parametre du bouton contacter moi sur la page portfolio */
    .contact-me {
        color: #ffffff;
        font-size: 30px;
        text-align: center;
        margin: 20px auto;
        padding: 10px;

    }

    section p.link-contact a {
        text-decoration: none;
        color: #ffffff;
        padding: 10px;

    }
    /* mise en forme et placement des images représentant mes service */
    img.services{
        margin: 20px 25% 0 25%;
        width: 50%;
    }
    .maps {
        border: none;
        height: 340px;
        width: 100%;
    }
    /* parametre des titre de niveau 3 de la page contact */
    h3.contact {
        padding: 10px 0 0 10px;
        font-size: 18px;
        margin: 0;
    }
    /* parametre des paragraphe de la page contact  */
    p.contact {
        padding: 0 0 0 10px;
        margin: 0 0 30px 0;
        font-size: 16px;
    }
    /* hauteur des bloc sur la page contact*/
    div.contact {
        padding: 0 0 10px 0;
        margin-top: 20px;

    }

    div.forms {
        padding: 0 10px 10px 10px;
        float: left;
        width: 100%;
        box-sizing: border-box;

    }
    /* gestion du formulaire */
    input {
        width: 100%;
        height: 25px;
        margin: 0;
        padding: 0 10px;
        border: none;
        background-color: #DCDCDC;
        box-sizing: border-box;
    }

    .content {
        width: 100%;
        height: 80px;
        padding: 0 10px;
        margin: 0;
        border: none;
        background-color: #DCDCDC;
        resize: none;
        box-sizing: border-box;
    }

    input.submit {
        color: #ffffff;
        background-color: #386AA6;
        height: 50px;
        width: 240px;
        font-size: 32px;
        float: right;
        margin-top: 50px;

    }

    label.forms {
        margin: 0;
        font-size: 14px;

    }
}

/*-------
CSS Agisant en dessous de 578px
-------*/
@media only screen and (max-width:577px) {
    body {
        margin: 0;
        padding: 0;
        font-family: 'calibriregular', sans-serif;
        background: url(img/background.jpg) no-repeat center;
        background-size: cover;

    }

    header {
        background-color: #386AA6;
        position: relative;
        margin: 0;
        z-index: 2;

    }

    /*-------
    Logo
    -------*/
    h1.logo {
        font-size: 26px;
        margin: 0;
    }

    .logo-subtitle {
        font-size: 23px;
        letter-spacing: .8px;
    }

    h1 a {
        text-decoration: none;
        color: white;
    }

    header h1 {
        padding: 20px;
        line-height: 30px;
    }

    /*-------
    Nav
    -------*/


    nav ul {
        display: none;
        flex-direction: column;
        background: #386AA6;
        list-style: none;
        font-size: 26px;
        margin: 0;
        padding: 0;

    }

    nav ul li {
        margin: 10px auto;
    }

    nav ul li a {
        text-decoration: none;
        color: #ffffff;

    }

    nav ul li a.current {
        text-decoration: underline;
    }
    /* affichage du menu hamburger */
    input.menu {
        display: none;
    }

    label.menu {
        display: inline;
        float: right;
        width: 48px;
        margin: -80px 20px 0 0;
        font-size: 40px;
        color: #ffffff;
        cursor: pointer;
    }

    #toggle:checked+ul {
        display: flex;
    }

    /*-------
    footer
    -------*/

    /* couleur de fond du footer */
    #home-more{
        display: none;
    }
    footer {
        background-color: #386AA6;
    }

    footer {
        margin-top: 50px;
    }

    footer p {
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        padding: 10px 0 10px 0;
        margin: 0;
    }



    /*-------
    Section
    -------*/

    /* Taille de la section */
    section {
        z-index: auto;
        position: relative;
        padding: 0 20px;

    }
    /* couleur de fond pour mes cadres de couleurs  */
    .background-light-blue {
        background-color: #9BC2F2;

    }
    /* option des paragraphes des pages services et de la page home */
    section p.preview, section p.services {
        padding: 10px;
        text-align: justify;
        font-size: 14px;
        height: 100%;

    }
    /* option des liens de mes différentes pages */
    section p.link {
        text-align: right;
        padding: 10px;
        color: #ffffff;
        font-size: 16px;

    }

    section p.link a {
        text-decoration: none;
        color: #ffffff;
        font-size: 16px;

    }
    /* option des titre de niveau 1 de mes différentes pages */
    section h1 {
        font-size: 40px;
        color: #386AA6;
        text-decoration: underline;
        text-transform: uppercase;
        text-align: center;
    }
    /* option des titre de niveau 2 des pages home, contact, service, projet */
    section h2.preview,
    section h2.contact,
    section h2.project {
        color: #ffffff;
        font-size: 20px;
        padding: 10px;
    }
    section h2.services{
        color: #ffffff;
        font-size: 20px;
        text-align: center;
    }
    /* option de nom / webdev de la page presentation*/
    h2.cv-name {
        font-size: 36px;
        color: #529AF2;
        margin: -172px 0 0 180px;
        float: left;
    }

    h2.cv-webdev {
        font-size: 24px;
        color: #386AA6;
        margin: -28px 0 0 180px;
        float: left;
    }
    /* option des titre h2 composant mon cv sur la page presentation */
    h2.cv {
        font-size: 20px;
        color: #386AA6;
        text-decoration: underline;

    }

    p.presentation {
        text-align: justify;
    }


    p.date {
        font-size: 14px;
        padding: 10px 0 0 10px;
        margin: 0;
        color: #386AA6;

    }

    div.date {
        width: 30%;
        height: 120px;
        float: left;
    }
    /* option de mes titre de niveau 3 pour les certificat / poste et ecole / entreprise sur la page presentation */
    h3.certificate {
        font-size: 18px;
        color: #ffffff;
        padding: 0 10px;
        margin: 10px 0 0 0;
        float: left;
        width: 70%;
        box-sizing: border-box;

    }

    h3.school {
        font-size: 16px;
        color: #ffffff;
        padding: 0 10px;
        float: left;
        width: 70%;
        box-sizing: border-box;

    }
    /* option des paragraphe de description pour mes expériences professionnelles et mes diploles sur la page presentation */
    p.description {
        font-size: 14px;
        text-align: justify;
        padding: 0 10px;
        float: left;
        width: 70%;
        box-sizing: border-box;
        margin: 0 0 10px 0;
    }


    div.skill {
        padding: 15px 0;
    }

    h2.skill {
        margin-top: 20px;
    }

    p.skill {
        margin: 0 0 15px 0;
        font-size: 16px;
    }
    /*-------
    Mise en forme des barres de compétences
    -------*/
    .skill-bar {
        border: 1px solid black;
        border-radius: 25px;
        height: 18px;
        box-sizing: border-box
    }

    .skill-bar-fill{
        background-color: #9BC2F2;
        border: 1px solid black;
        border-radius: 25px 0 0 25px;
        height: 16px;
        margin-top: -1px;
        margin-left: -1px;
    }
    .project-picture {
        width: 100%;
    }
    /* option de mes paragraphe de description de projet sur la page portfolio */
    p.project {
        font-size: 14px;
        padding: 10px;
        height: 120px;
        text-align: justify;
    }
    /* parametre du bouton contacter moi sur la page portfolio */
    .contact-me {
        color: #ffffff;
        font-size: 30px;
        text-align: center;
        margin: 20px auto;
        padding: 10px;

    }

    section p.link-contact a {
        text-decoration: none;
        color: #ffffff;
        padding: 10px;

    }
    /* mise en forme et placement des images représentant mes projet */
    img.services{
        margin: 20px 25% 0 25%;
        width: 50%;
    }
    /* mise en place de l'embed google map */
    .maps {
        border: none;
        height: 340px;
        width: 100%;
    }
    /* parametre des titre de niveau 3 de la page contact */
    h3.contact {
        padding: 10px 0 0 10px;
        font-size: 18px;
        margin: 0;
    }
    /* parametre des paragraphe de la page contact  */
    p.contact {
        padding: 0 0 0 10px;
        margin: 0 0 30px 0;
        font-size: 16px;
    }
    /* hauteur des bloc sur la page contact*/
    div.contact {
        padding: 0 0 10px 0;
        margin-top: 20px;

    }
    /* gestion du formulaire */
    div.forms {
        padding: 0 10px 10px 10px;
        float: left;
        width: 100%;
        box-sizing: border-box;

    }

    input {
        width: 100%;
        height: 25px;
        margin: 0;
        padding: 0 10px;
        border: none;
        background-color: #DCDCDC;
        box-sizing: border-box;
    }

    .content {
        width: 100%;
        height: 80px;
        padding: 0 10px;
        margin: 0;
        border: none;
        background-color: #DCDCDC;
        resize: none;
        box-sizing: border-box;
    }

    input.submit {
        color: #ffffff;
        background-color: #386AA6;
        height: 50px;
        width: 240px;
        font-size: 32px;
        float: right;
        margin-top: 50px;

    }

    label.forms {
        margin: 0;
        font-size: 14px;

    }
}

.notfirst {
    margin-top: 20px;
}