@charset "UTF-8";
/* CSS Document */

/* Ipad */
@media all and (min-width: 501px) and (max-width:768px) {   
     /* Main menu */ 
    #nav ul { 
        display: flex;
        flex-direction: column;
    }
    #nav ul li{ 
    margin: 0
    }
    .leonie-part{
        display: flex;
        flex-direction: column;
        padding: 2%;
        background: #FFF;
        border-radius: 10px;
        box-sizing: border-box;
        box-sizing: content-box
    }
    .col-l{
        width: 100%;
        color: #5a5a5a;
        margin-right: 2%;
        font-size: 13px;
    }
    .col-r{
        width: 100%;
        text-align: center;
    }

    .info-comp 					{ width:100%; height:auto;margin-top:60px}
    .title 						{height: 50px;border:1px solid #FFF;margin: 10px 0 }
    .title p 					{padding:0px 10px;color:#494646;font-size: 16px;}
    #content-accueil				{ padding:0;height:auto;margin-top:25px;background:#F2F2F2 }
    #content-calendrier				{ padding:0;height:auto;margin-top:25px;background:#FFF}
    .dernier-ajout					{ width: 100%;border:1px solid #FFF;}
    .dernier-ajout	 img			{ width:70%;margin: 10px 100px }
    .dernier-ajout h1				{ font-size:15px;}
    .dernier-ajout a				{ width:150px; font-size:12px;}
    .dernier-ajout p				{ width:100%;font-size:13px;}
    .button							{ width:100%;font-size:18px}
    .ajout-ateliers > div > p span {font-size: 21px;padding: 20px}
    .ajout-ateliers p {width: 100%}
    .ajout-ateliers > div > img {margin-right: 105px}
}


/* maximum 500px */
@media screen and (max-width: 500px) {
    
    .main				{width:100%;}
    .conteneur          {width: 80%}
    .home-title h1 {
            text-align: center;
    }
    
    /* Main menu */ 
    #nav ul { 
        display: flex;
        flex-direction: column;
    }
     .line1 ul {
    position: absolute;
    left: -999em;
    text-align: left;
    z-index: 1000;
    }
    .line1 li:hover ul {
        visibility: hidden
    }
    .info-comp{
        margin-top: 50px}
    /* Menu défilant */
    #navigation 					{ height: 125px;width:100%;}
    #navigation ul					{ margin: 0 auto;padding-top:5px;}
    #navigation ul li a				{ color:#494646;height:35px; width:90%;margin:2px;}
    .leonie-part{
        display: flex;
        flex-direction: column;
    }
    .col-l{
        width: 100%;
    }
    .col-r{
        width: 100%;
    }
    
    .pieces p{
        width: 100%
    }
    .dernier-ajout					{ width:100%;}
    .dernier-ajout p				{ width:100%;font-size:14px;}
    .dernier-ajout img			    { width:100%;margin: 0 auto }
    .dernier-ajout h1				{ font-size:18px;}
    .dernier-ajout a				{ width:100; font-size:15px;}
    .button							{ width:100%;font-size:15px}
    .ajout-ateliers > div > img {margin-right: 0px;width: 100%}
    .ajout-cal p		{width:100%;font-size:12px; margin:5px}
    .portfolio-item img {width: 100%}


}