/*Feuille de style mobile du site cv*/

@media screen and (max-width: 1200px) {
    
    .conteneur {
        width: 100%;
        padding-right: 25px;
        padding-left: 25px;
    }



    .intro, .fondcomp .intro {

        border-left: none;
        padding-left: 0;
    }

    .intro h1,
    .intro h2 {

        text-align: center;
        padding-left: 0;
    }
    
    .profil,
    .resume {

        display: inline-block;
        margin: 10px auto;
        text-align: center;
    }
    
 

    .dl {


        margin: 45px auto;

    }

    .portfolio .intro,
    .fond4 .intro {

        border-left: none;
    }

    .rea img {

        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .fond4 .intro h1, .fond4 .intro h2 {
        
        padding-left: 0;
    }
}


@media screen and (max-width: 1110px){
    
    .competences, .contenucomp{
        
   
        margin: auto;
        padding-right: 0;
        padding-left: 0;
    }
    
}


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

        display: none;
    }


    #menu-mobile {

        display: block;
        margin: auto;
    }
}


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

    .contact,
    .info {

        margin: 20px auto;
        width: 100%;
    }


    .contact h2,
    .info h2, .info p {

        text-align: center;
    }
    
    .socialbot p:first-child{
        
        margin-left: auto;
    
    }
    
    .socialbot p:last-child{
        
        margin-right: auto;
    }
    
   
    
    .fond5 .conteneur>small {
        
        display: block;
        margin: auto;
        text-align: center;
    }

}

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

    .rea .projet {

     display: block;
        margin: 20px auto;

    }
        
    #menu ul li {
        
        display: block;
        margin: auto;
    }
    
    .comp h1 {
        
       font-size: 58px; 
    }
      
}

@media screen and (max-width: 600px){
    
        
    .contacttop, .socialtop {
        margin: auto;
    }
    
    .contacttop {
        
        text-align: center;
        padding-top: 15px;
    }
    
    .contacttop p{
        
        padding-top: 10px;
    }
    
    .socialtop p a:hover {
        
        transform: none;
    }    
}


@media screen and (max-width: 586px){
    
        .contenucomp .icone {
        
        margin: auto;
    }
    
    .contenucomp .texteicone {
        
        text-align: center;
        margin: auto;
    }
    
}

@media screen and (max-width: 550px){
    
    .fond1 .entete h1, .intro h1, .portfolio .rea h1, .contact h1{
        
        font-size: 40px;
        padding-left: 0;
    }
    
    .fond1 .entete h2{
        
        font-size:  20px;
    }
}


@media screen and (max-width: 450px) {
    
    .fond1 .entete h1, .intro h1, .portfolio .rea h1, .contact h1{
        
        font-size: 30px;
    }
    
    .contenucomp {
        
        width: 180px;
    }
    
   
    
    .fondcontact{
        
        padding-top: 15px;
    }
    
    .contacttop p {
        
        display: block;
        margin: auto;
        padding-right: 0;
    }
    
    .contacttop .fas {
        padding-right: 0px;
    }
    
    .contacttop, .fondcontact .conteneur {
        
        flex-direction: column;
    }
    
    .contacttop p {
        
        padding-bottom: 15px;
    }
    
    .socialtop p:first-child{
        padding-left: 0px;
    }
    
    .socialtop p{
        
        padding-bottom: 15px;
    }
      
}

@media screen and (max-width: 360px){
    
    .comp h1 {
        
        font-size: 24px;
    }
}