


@media screen and (max-width: 2000px) {

    /*Acceuil*/

    #menu a{
        font-size: 60px;
    }

    #descriptionMe{
        padding-left: 100px;
        font-size: 22px;
    }

    /*Contact*/

    .phone {
        left: 37%;
        top: 40%;
        height: 300px;
        width: 400px;
    }

    .phone img {
        height: 110px;
        padding: 20px;
    }

}

@media screen and (max-width: 1730px){
    
    /*Acceuil*/

    #menu a {
        font-size: 50px;
    }

    #descriptionMe {
        padding-left: 50px;
        font-size: 20px;
    }

}

@media screen and (max-width: 1630px) {

    /*Acceuil*/

    #menu a {
        font-size: 45px;
    }

    #descriptionMe {
        padding-left: 45px;
        font-size: 18px;
    }

    /*Projets*/

    header #titleProjets{
        font-size:100px;

    }

    #bandeau{
        margin : 1%;
    }

    #menu a{
        font-size: 35px;
    }
}


@media screen and (max-width: 1500px) {

    /*Acceuil*/
    #menu a {
        font-size: 35px;
    }

    #descriptionMe {
        padding-left: 15px;
        font-size: 18px;
    }

    /*Phone*/
    .phone {
        left: 35%;
        top: 42%;
    }
}

    @media screen and (max-width: 1450px) {

        /*Intro*/

        .inner img {
            width: 100px;
            opacity: 0;
            animation-delay: 11s;
            animation-name: apparitionI;
            animation-duration: 3s;
            animation-iteration-count: 1;
            animation-fill-mode: both;
            padding-left: 120px;
            padding-bottom: 10px;
        }

        .inner h {
            color: rgb(0,0,0,0);
            font-size: 40px;
            animation-delay: 8s;
            animation-name: apparitionH;
            animation-duration: 3s;
            animation-iteration-count: 1;
            animation-fill-mode: both;
            font-family: 'BebasNeue';
            text-align: center;
        }

        .inner a {
            color: rgb(0,0,0);
            font-size: 30px;
            animation-delay: 8s;
            animation-name: apparitionP;
            animation-duration: 3s;
            animation-fill-mode: both;
            font-family: 'BebasNeue';
            text-decoration: none;
            text-align: center;
        }

        /*Acceuil*/
        .overlayProject {
            bottom: 15%;
        }

        #menu {
            justify-content: center;
            flex-direction: row;
            width: 100%;
            height: 40px;
            flex-wrap: wrap;
        }

            #menu a {
                font-size: 35px;
            }

        #descriptionMe {
            padding-left: 15px;
            font-size: 18px;
        }

        /*Phone*/

        .phone {
            left: 37%;
            top: 42%;
        }

            .phone img {
                height: 80px;
            }
    }

    @media screen and (max-width: 1320px) {

        /*Intro*/

        #videoContainer {
            display: none;
        }

        .inner h {
            font-size: 60px;
            color: rgb(255,255,255,0);
            animation-delay: 0.1s;
            animation-name: apparitionHWhite;
        }

        .inner a {
            color: white;
            animation-delay: 0.1s;
            animation-name: apparitionPWhite;
        }

        .inner img{
            animation-delay: 0.1s;
            width: 250px;
            padding-left: 15%;
            padding-bottom: 30px;
        }

        /*Acceuil*/
        #imageContainer {
            display: none;
        }

        #responsiveHomeHeader {
            display: block;
            background: gainsboro;
            padding: 3%;
            width: 100%;
        }

       #responsiveHomeHeader h {
            font-family: 'BebasNeue';
            font-size: 100px;
            color: black;
            background-color: gainsboro;
       }

        .overlayProject {
            top: 30%;
        }

        #menu {
            height: 100px;
        }

            #menu a {
                font-size: 60px;
            }

        #descriptionMe {
            font-size: 25px;
            width: 100%;
            padding: 5%;
        }
    }

    @media screen and (max-width: 1320px) {

        /*Intro*/

        .inner img {
           
            padding-left: 25%;
            
        }

        /*Phone*/

        .phone {
            left: 35%;
            top: 42%;
        }
    }

    @media screen and (max-width: 1130px) {

        /*Acceuil*/

        #menu a {
            font-size: 50px;
        }

        #descriptionMe {
            font-size: 18px;
            width: 100%;
            padding: 10%;
        }

        #responsiveHomeHeader h {
            font-size: 80px;
        }

        .overlayProject {
            top: 20%;
        }

        /*Projets*/

        .galerie img {
            padding: 10%;
        }

        /*Phone*/

        .phone {
            left: 31%;
            top: 45%;
        }

            .phone img {
                padding: 30px;
                height: 75px;
            }
    }

    @media screen and (max-width: 1120px) {

        /*Phone*/

        #imageContainerPhone {
            display: none;
        }

        #responsivePhoneHeader {
            font-size: 60px;
            font-family: 'BebasNeue';
            display: block;
            background: gainsboro;
            padding: 3%;
            width: 100%;
        }

        #backBook {
            top: 15%;
        }

        .phone {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            left: 0%;
            top: 40%;
            width: 100%;
            transform: rotate(0deg);
        }

        .phone img {
                height: 100px;
                padding: 10px;
                padding-left: 30px;
                filter: invert(100%) sepia(0%) saturate(7475%) hue-rotate(255deg) brightness(106%) contrast(104%);
                transform: rotate(349deg);
        }

        #menu{
            padding-top: 5%;

        }

        #descriptionMe {
            padding-top: 3%;
        }

    }

    @media screen and (max-width: 1000px) {

        /*Intro*/

        .inner img {
            padding-left: 23%;
        }

    }

    @media screen and (max-width: 940px) {

        /*Intro*/

        .inner img {
            padding-left: 21%;
        }

        /*Acceuil*/

        #menu a {
            font-size: 40px;
        }

        #descriptionMe {
            font-size: 18px;
            padding: 5%;
        }

        #responsiveHomeHeader h {
            font-size: 60px;
        }

        .overlayProject {
            top: 20%;
        }

        /*Projets*/

        header #titleProjets {
            font-size: 80px;
        }

        #menu a {
            font-size: 30px;
        }

        .projet {
            padding-top: 10%;
            padding-bottom: 5%;
        }

        .image {
            padding: 10%;
            width: 35%;
            height: 35%;
        }

        .description {
            width: 80%;
        }

        .chapitre {
            margin-top: 15%;
        }
    }

    @media screen and (max-width: 790px) {

        /*Intro*/

        .inner img {
            padding-left: 15%;
        }

        /*Acceuil*/

        #menu a {
            font-size: 30px;
            padding-top: 10%;
        }

        #descriptionMe {
            font-size: 18px;
        }

        #responsiveHomeHeader h {
            font-size: 60px;
        }

        .overlayProject {
            top: 15%;
        }

        /*Parcours*/

        #cvTitle {
            font-size: 80px;
        }

        #name {
            font-size: 60px;
        }

        #underName {
            font-size: 40px;
        }

        .Categorie {
            font-size: 30px;
        }

        .blaBla span {
            font-size: 18px;
        }

        #backBookCv a {
            font-size: 40px;
        }

        #cvContainer {
            padding-right: 10%;
            padding-left: 10%;
        }

        /*Showreel*/

        #showreelTitle {
            font-size: 80px;
        }

        #backBookShow a {
            font-size: 40px;
        }

        /*Phone*/

        #backBook {
            top: 15%;
        }

            #backBook a {
                font-size: 40px;
            }
    }



    @media screen and (max-width: 790px) {

        /*Projets*/

        header {
            padding-top: 3%;
            padding-bottom: 3%;
        }

            header #titleProjets {
                font-size: 60px;
            }

        #menu a {
            font-size: 30px;
            padding-top: 3%;
            padding-right: 30px;
            padding-left: 30px;
        }

        #backToTop {
            bottom: 30px;
            right: 30px;
        }

            #backToTop a {
                font-size: 40px;
            }
    }

    @media screen and (max-width: 770px) {

        /*  .overlayProject {
        justify-content: start;
        top: 15%;
    }

    #menu a {
        font-size: 30px;
    }

    #menu {
        justify-content: start;
        flex-direction: column;
        width: 20%;
        height: 200px;
    }

    .innerProject {
        flex-wrap: wrap;
        width: 75%;
    }

    #descriptionMe {
        padding-top: 0px;
        padding-right: 5%;
        padding-left: 15%;
        font-size: 15px;
    }*/

        /*Projets*/

        .galerie img {
            width: 120px;
            height: 120px;
            padding: 5%;
        }
    }

    @media screen and (max-width: 600px) {
        .inner h {
            font-size: 40px;
            color: rgb(255,255,255,0);
            animation-delay: 0.1s;
            animation-name: apparitionHWhite;
        }

        .inner img {
            width: 170px;
            padding-left: 17%;
            padding-bottom: 30px;
        }
    }


    @media screen and (max-width: 580px) {

        /*Acceuil*/

        #responsiveHomeHeader h {
            font-size: 40px;
        }

        #menu a {
            font-size: 20px;
            padding-top: 5%;
        }

        /*Parcours*/

        #cvTitle {
            font-size: 60px;
        }

        #name {
            font-size: 40px;
        }

        #underName {
            font-size: 30px;
        }

        .Categorie {
            font-size: 20px;
        }

        .blaBla span {
            font-size: 18px;
        }

        #backBookCv a {
            font-size: 30px;
        }

        #cvContainer {
            padding-right: 5%;
            padding-left: 5%;
        }

        /*Showreel*/

        #showreelTitle {
            font-size: 60px;
        }

        #backBookShow a {
            font-size: 30px;
        }
    }

    @media screen and (max-width: 500px) {

        #responsiveHomeHeader h {
            font-size: 40px;
        }

        #menu {
            padding-bottom: 20%;
        }

            #menu a {
                font-size: 18px;
                padding-top: 5%;
            }

        #descriptionMe {
            font-size: 15px;
        }


        /*Projets*/

        header {
            padding-top: 3%;
            padding-bottom: 3%;
        }

        header #titleProjets {
                font-size: 40px;
        }

        #menu a {
            font-size: 30px;
            padding-top: 3%;
            padding-right: 10px;
            padding-left: 10px;
        }

        #menu {
            padding-bottom: 5%;
        }

        .projet h {
            font-size: 25px;
        }

        .image {
            display: none;
        }

        .description {
            font-size: 15px;
            padding-left: 3%;
        }

        .chapitre {
            font-size: 30px;
        }

        .galerie img {
            width: 80px;
            height: 80px;
            padding: 5%;
        }

        #backToTop {
            bottom: 10px;
            right: 10px;
        }

            #backToTop a {
                font-size: 30px;
            }

        /*Phone*/

        #responsivePhoneHeader {
            font-size: 30px;
        }

        .phone img {
       
            padding: 10px;
            height: 80px;
        }

        #backBook {
            top: 15%;
            padding: 3%;
            height: 40px;
        }

            #backBook a {
                font-size: 20px;
            }
    }

    @media screen and (max-width: 430px){

        /*Intro*/

        .inner h {
            font-size: 25px;
            padding-bottom: 30px;
        }

        .inner a {
            font-size: 20px;
        }

        .inner img {
            width: 150px;
            padding-left: 13%;
            padding-bottom: 30px;
        }
    }

     @media screen and (max-width: 370px){
         /*Intro*/

        .inner img {
            width: 150px;
            padding-left: 0%;
            padding-bottom: 30px;
        }
     }

    @media screen and (max-width: 280px) {

        #responsiveHomeHeader h {
            font-size: 40px;
        }

        #menu a {
            font-size: 20px;
            padding-top: 5%;
        }

        #descriptionMe {
            font-size: 15px;
            padding-top: 5%;
        }


        #menu {
            padding-bottom: 5%;
        }


        /*Parcours*/

        #name {
            font-size: 40px;
        }

        #underName {
            font-size: 20px;
        }

        .Categorie {
            font-size: 18px;
        }

        .blaBla span {
            font-size: 15px;
        }

        #backBookCv a {
            font-size: 30px;
        }

        #cvContainer {
            padding-right: 1%;
            padding-left: 3%;
        }

        .galerie img {
            width: 50px;
            height: 50px;
            padding: 5%;
        }

        /*Projets*/

        #menu a {
            font-size: 20px;
            padding-top: 3%;
            padding-right: 5px;
            padding-left: 5px;
        }

        .projet h {
            font-size: 20px;
        }

        .description {
            font-size: 15px;
            padding-left: 3%;
        }

        #backToTop {
            bottom: 10px;
            right: 10px;
        }

            #backToTop a {
                font-size: 20px;
            }
    }


