/* CSS Document */


@media screen and (max-width: 1200px) {
	.wrapper {
		padding: 0 10px;
		}
	
	}
        
@media screen and (max-width: 800px) {
    
    /*photo en haut et en bas*/
    .pos-photo-1.nb-photos-1 .para-photos .para-photo,
    .pos-photo-2.nb-photos-1 .para-photos .para-photo,
    .pos-photo-1.nb-photos-2 .para-photos .para-photo,
    .pos-photo-2.nb-photos-2 .para-photos .para-photo {
        width: 97%;
        max-width: 97%;
        margin: 0 1.5%;
    }
    .pos-photo-1.nb-photos-3 .para-photos .para-photo,
    .pos-photo-2.nb-photos-3 .para-photos .para-photo {
        width: 47%;
        margin: 0 1.5%;
    }
    .pos-photo-1.nb-photos-3 .para-photos .para-photo:nth-child(2n+1),
    .pos-photo-2.nb-photos-3 .para-photos .para-photo:nth-child(2n+1){
        clear: both;
        margin: 0 auto;
    }
    .pos-photo-1.nb-photos-4 .para-photos .para-photo,
    .pos-photo-2.nb-photos-4 .para-photos .para-photo,
    .pos-photo-1.nb-photos-more .para-photos .para-photo,
    .pos-photo-2.nb-photos-more .para-photos .para-photo{
        width: 30%;
        margin: 0 1.5%;
    }
    .pos-photo-1.nb-photos-4 .para-photos .para-photo:nth-child(3n+1),
    .pos-photo-2.nb-photos-4 .para-photos .para-photo:nth-child(3n+1),
    .pos-photo-1.nb-photos-more .para-photos .para-photo:nth-child(3n+1),
    .pos-photo-2.nb-photos-more .para-photos .para-photo:nth-child(3n+1){
        clear: both;
    }
    .pos-photo-1.nb-photos-more .para-photos .para-photo:nth-child(4n+1),
    .pos-photo-2.nb-photos-more .para-photos .para-photo:nth-child(4n+1) {
        clear: none;
    }
    
    /* Menu burger */
    #menu-burger {position:absolute; top:18px; right:20px; display:inline-block; cursor:pointer;}
    #menu-burger .bar1,
    #menu-burger .bar2,
    #menu-burger .bar3 {width:32px; height:3px; background-color:#F1F1F1; border-radius: 4px; margin:7px 0; transition:0.4s;}
    #menu-burger:hover {opacity:.75; transition:.5s;}
    #menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-7px, 6px); transform:rotate(-45deg) translate(-7px, 6px);}
    #menu-burger.clicked .bar2 {opacity: 0;}
    #menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-8px, -8px); transform:rotate(45deg) translate(-8px, -8px);}

    /*https://blog.internet-formation.fr/2019/01/creer-un-menu-lateral-swipe-menu-avec-touch-events-et-click-en-css-3-et-javascript-natif/*/
    
    
    .menu-g-container{
        position: absolute;
        top: 0;
        left: -250px;
        bottom: 0;
        width: 250px;
        transition: 500ms ease all;
    }
    .menu-g-container.visible{
        left: 0px;
/*        animation: .5s slideRight ease-in forwards;
        transition-delay:0;*/
    }
    .menu-g-container.notvisible {
        left: -250px;
/*        animation: 1s slideLeft ease-out forwards;
        transition-delay:0;*/
    }
    /* Animations pour le menu slide */
    @keyframes slideRight {
            from {left:-250px;}
            to {left:0px;}
    }
    @-webkit-keyframes slideRight {
            from {left:-250px;}
            to {left:0px;}
    }
    @keyframes slideLeft {
            from {left:0px;}
            to {left:-250px;}
    }
    @-webkit-keyframes slideLeft {
            from {left:0px;}
            to {left:-250px;}
    }
    
    .projets-resultats{
        overflow: auto;
        clear: both;
    }

}

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

    /*photo à droite et à gauche*/
    .pos-photo-3 .para-photos,
    .pos-photo-4 .para-photos {
        max-width: 97%;
        margin: 20px 1.5%;
    }
    /*photo en haut et en bas*/
    .pos-photo-1.nb-photos-3 .para-photos .para-photo,
    .pos-photo-2.nb-photos-3 .para-photos .para-photo,.pos-photo-1.nb-photos-4 .para-photos .para-photo,
    .pos-photo-2.nb-photos-4 .para-photos .para-photo,
    .pos-photo-1.nb-photos-more .para-photos .para-photo,
    .pos-photo-2.nb-photos-more .para-photos .para-photo{
        width: 97%;
    }
	
    .projets-detail{
        flex-direction: column;
    }
	
}