* {
        box-sizing: border-box;
    }
    
    
    /* ---------------------------------------------------------- */

    /* Large */
    .navigationGallery {
        display: flex;
        flex-flow: row wrap;
        /* This aligns items to the end line on main-axis */
        justify-content: center;
    }


/*----------------------------------------------------------*/
    div.gallery {
        border: 1px solid #ccc;
        
    }

    /* contorno immagine quando il mouse ci passa sopra */
    div.gallery:hover {
        border: 2px solid #254e9c;
        cursor:pointer;
    }

    /* le immagini si adfattano scalndo */
    
    div.gallery img {
        width: 100%;
        height: auto;
    }
    

    div.desc {
        padding: 15px;
        text-align: center;
    }


    /* 
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    .responsiveGallery {
        padding: 0 6px;
        width: 350px;
    }

}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

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

    .responsiveGallery {
        padding: 0 6px;
        width: 350px;
    }

}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 899px) {

    .navigationGallery {
        /* When on medium sized screens, we center it by evenly distributing empty space around items */
        justify-content:  flex-start;
    }

    .responsiveGallery {
        padding: 0 6px;
        width: 500px;
    }

}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .navigationGallery {
        /* When on medium sized screens, we center it by evenly distributing empty space around items */
        justify-content:  flex-start;
    }

    .responsiveGallery {
        padding: 0 6px;
        width: 600px;
    }


}

/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    .navigationGallery {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
        align-self: center;
    }
    .navigationGallery .responsiveGallery {
        /* On small screens, we are no longer using row direction but column */
       
        align-self: center;
       
    }

    .responsiveGallery {
        padding: 0 6px;
        width: 700px;
    }

}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    .navigationGallery {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
        align-self: center;
    }
    .navigationGallery .responsiveGallery {
        /* On small screens, we are no longer using row direction but column */
       
        align-self: center;
       
    }

    .responsiveGallery {
        padding: 0 6px;
        width: 80%;
    }

}