/*Table with food*/
#homePic {
    width: 100%;
    height: auto;
    display: block;
}

#innerCont {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 5;
    box-sizing: border-box;
}

.article {
    margin: 1em; 
    text-align: justify;
    width:95%;
    height: auto;
    font-size: 2em;

    
}

.pic {
    margin: 1em; 
    width: 97%;
    height: auto; 
    justify-self: center; /*!!!Elimina il ghost-space orizzontale 
                            fra l'immagine e il contenitore*/
    border-radius: 0% 5%;
    box-shadow: 5px 5px 5px darkgrey;

}

#pic1 {
    grid-column: 1 / 3;
    grid-row: 1;
    padding-left: 2%; 
    margin-top: 1.5em; 
}

#article1 {
    grid-column: 3/7;
    grid-row: 1;
    padding-right: 2%; 
    margin-top:1.5em; 
}

#pic2 {
    grid-column: 5/7;
    grid-row: 2; 
    padding-right: 2%; 
}

#article2 {
    grid-column: 1/5;
    grid-row: 2; 
    padding-left: 2%; 
}

#pic3 {
    grid-column: 1 / 3;
    grid-row: 3;
    padding-left: 2%;
}

#article3 {
    grid-column: 3/7;
    grid-row: 3;
    padding-right: 2%;
}

#pic4 {
    grid-column: 5/7;
    grid-row: 5; 
    padding-right: 2%;
}

#article4 {
    grid-column: 1/5;
    grid-row: 5; 
    padding-left: 2%; 
}

#bannerDiv { 
    grid-column: 1/7;
    grid-row: 4; 
    position: relative;
    width: 98%;
    height: auto;
    left: 1%;
    
    margin: 3% 0%;
    
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;

    overflow: hidden;
    background-color: darkgreen;
    border-top: solid darkred 0.5vw; 
    border-bottom: solid darkorange 0.5vw; 

    transition: 1s;
}

.bannerBrand {
    position: relative;
    height: auto;
    width: 100%;
    margin:0;
}

#bannerBrand {
    grid-column: 1; 
}

#bannerBrand2 {
    grid-column: 3;
}

#bannerTitle {
    font-size: 2.5em;
    font-style: italic;
    text-decoration:underline;
    text-decoration-color: darkred;
    font-family: monospace;
    color: white; 
    text-shadow: 0.2vw 0.2vw 0.2vw darkorange;
    grid-column: 2; 
    text-align: center;
    padding-top: 3%;
}

/* MEDIA__________________________________________________________
_________________________________________________________________
_________________________________________________________________ */

/*Articoli________________________*/
@media all and (max-width: 1800px) {
    .article {
        font-size: 1.8em;
    }
}

@media all and (max-width: 1700px) {
    .article {
        font-size: 1.6em;
    }
}

@media all and (max-width: 1500px) {
    .article {font-size: 1.4em;}
}

@media all and (max-width: 1300px) {
    .article {font-size: 1.2em;}
}

@media all and (max-width: 1100px) {
    .article {font-size: 1em;} 
}

@media all and (max-width: 800px) {
    .article {font-size: 0.8em;}
}

@media all and (max-width: 500px) {
    .article {font-size: 0.6em;}
}

@media all and (max-width: 400px) {
    .article {font-size: 0.5em;}
}

@media all and (max-width: 350px) {
    .article {font-size: 0.4em;}
}

/* banner____________________________ */
@media all and (max-width:5000px) {
    #bannerTitle {
        font-size: 6em; 
    }
}

@media all and (max-width:2500px) {
    #bannerTitle {
        font-size: 5em; 
    }
}

@media all and (max-width:2000px) {
    #bannerTitle {
        font-size: 4em; 
    }
}

@media all and (max-width:1600px) {
    #bannerTitle {
        font-size: 3em; 
    }
}

@media all and (max-width:1200px) {
    #bannerTitle {
        font-size: 2.5em; 
    }
}

@media all and (max-width:1000px) {
    #bannerTitle {
        font-size: 2em; 
    }
}

@media all and (max-width:780px) {
    #bannerTitle {
        font-size: 1.5em; 
    }
}

@media all and (max-width:500px) {
    #bannerTitle {
        font-size: 1.2em; 
    }
}

@media all and (max-width:380px) {
    #bannerTitle {
        font-size: 0.9em;
    }
}

/* POINTERS.....................................
................................................
................................................ */
@media all and (pointer:coarse) {
    .links:active {
        color: darkblue; 
        background-color: orange;
    }
}

@media all and (hover:hover) {
    #bannerDiv:hover { 
    opacity:0.5;
    transform: translateX(1%);
    }
}