* {
    box-sizing: border-box;
}


/* SPECIFICHE PER IL BODY*/
body {
    margin: 0;
    height: auto;
    font-family: 'Montserrat', sans-serif;
    color: black;
    font-size: 22px;
    background-color: #EACB82;
}


.container {
width: 100%;
}



.button {
    background-color: red;
    font-size: 15px;
    font-weight: bold;
    color: white;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    width:30%;
}

    .button:link {
        color: white;
    }

    .button:hover {
        color: black;
        background-color: white;
    }


.button2 {
    background-color: white;
    font-size: 15px;
    font-weight: bold;
    color: black;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    width: 30%;
    border-radius: 30px;
    border: solid red;
    text-align: center;
    text-decoration: none;
}


 .button2:hover {
    background-color: black;
    color: white;
}


.button3 {
    background-color: red;
    font-size: 15px;
    font-weight: bold;
    color: white;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    width: 25%;
}

    .button3:link {
        color: white;
    }

.button3:hover {
    color: black;
    background-color: white;
}

 

/* ALTEZZA DEL CONTAINER CHE HA LOGO E MENU'*/
    .container-logo {
    height: auto;
    background-color: black;
}


/* RIDUCO LA DIMENSIONE DEL LOGO */
.logo {
    width: 60%;
    padding: 10px;
}


/* COLONNA SINISTRA CON LOGO*/
.column-logo {
    float: left;
    width: 30%;
    padding: 10px;
    height: auto;
}



/* COLONNA DESTRA CON MENU'*/
.column-menu {
    float: left;
    width: 70%;
    padding: 10px;
    height: auto;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


/*****************************************************SPECIFICHE MENU' RESPONSIVE */
.topnav {
    overflow: hidden;
}

    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px 14px 16px;
        text-decoration: none;
        font-size: 17px;
        margin-top: 10px;
    }

        .topnav a:hover {
            color: red;
        }

        .topnav a.active {
            color: red;
        }

    .topnav .icon {
        display: none;
    }
/**********************************************FINE SPECIFICHE MENU' RESPONSIVE */



/******************************************************************HERO IMAGE */
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("immagini/sfondo1.jpg");
    background-color: #cccccc;
    height: 700px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: top;
}

.hero-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: 80%;
}



/***************************************************************TITOLO SOTTO LA HERO IMAGE*/
.titolo-intro {
    font-family: 'Pacifico', cursive;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align: center;
    font-size: 50px;
    color: white;
    margin: 0;
    background-color: red;
    padding: 30px 2px;
}



/*********************************************************************INIZIO SEZIONE ORDINA*/
#ordina {
    height: auto;
    width: 80%;
    margin: auto;
    display: block;
    padding-bottom: 80px;
}


/* H3 SOTTO TITOLI "ORDINA E RITIRA" */
h3 {
    color: red;
    font-size: 40px;
    font-family: 'Pacifico', cursive;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align: center;
}


/*IMMAGINE*/
.panettiere {
    margin: auto;
    display: block;
}


.sezione-testo-ordina {
    background: rgba(255,255,255, 0.8);
    padding: 20px;
    border-radius: 50px;
    margin-top: 30px;
    text-align: left !important;
}


/* E' QUI CHE DETTO LE SPECIFICHE PER CREARE 2 COLONNE CHE FLOTTANO UNA VICINO ALL'ALTRA */
.column {
    float: left;
    width: 50%;
    padding: 30px;
    height: auto;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}    
/* FINE SEPCIFICHE CREARE 2 COLONNE CHE FLOTTANO UNA VICINO ALL'ALTRA*/

/****************************************************************************FINE SEZIONE ORDINA*/

/* H3 SOTTO TITOLI "PANETTERIA E FOCACCERIA" */
h3 {
    color: red;
    font-size: 40px;
    padding: 40px;
    font-family: 'Pacifico', cursive;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align: center;
    margin:0;
}


/****************************************************INIZIO DELLA SEZIONE NOSTRI SERVIZI*******************************************************/
#nostri-servizi {
    background-image: url("immagini/sfondo2.jpg");
    height: auto;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
  
}

/*OVERLAY SEZIONE SPECIALITA'*/
.overlay {
    background-color: rgba(0, 0, 0, 0.3);
    padding-top: 80px;
    padding-bottom: 80px;
}

/*SEZIONE INTERNA ALLA SEZIONE SPECIALITA'*/
.inner {
    height: auto;
    width: 75%;
    margin: auto;
    display: block;
}

/*SEZIONE SERVIZI*/
.titolo-servizi {
    background-color: white;
    height: auto;
}


.prodotto {
    padding: 20px;
    background: rgba(234, 203, 130, 0.8);
    border-radius: 50px;
    color: white;
    text-align: center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


.icone {
margin:auto;
display:block;
}


.sfondo-testo-prodotti {
    background: rgba(255,255,255, 0.6);
    padding: 20px;
    border-radius: 50px;
    margin-top: 30px;
    text-align: left !important;
}



/* E' QUI CHE DETTO LE SPECIFICHE PER CREARE 2 COLONNE CHE FLOTTANO UNA VICINO ALL'ALTRA */
.column2 {
    float: left;
    width: 50%;
    padding: 50px;
    height: auto;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* FINE SEPCIFICHE CREARE 2 COLONNE CHE FLOTTANO UNA VICINO ALL'ALTRA */

/******************************************FINE DELLA SEZIONE NOSTRI SERVIZI***************************************/



/******************************************INIZIO DELLA SEZIONE NOSTRO LOCALE***************************************/
/*H3 NOSTRO LOCALE*/
.nostro-locale {
    background-color: white;
    height: auto;
}


.sezione-nostro-locale {
    height: auto;
    width: 80%;
    margin: auto;
    display: block;
}

/* E' QUI CHE DETTO LE SPECIFICHE PER CREARE 2 COLONNE CHE FLOTTANO UNA VICINO ALL'ALTRA */
.column3 {
    float: left;
    width: 50%;
    padding: 50px;
    height: auto;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* FINE SEPCIFICHE CREARE 2 COLONNE CHE FLOTTANO UNA VICINO ALL'ALTRA */


.piccole {
    width: 30%;
    text-align: center;
}

/******************************************FINE DELLA SEZIONE NOSTRO LOCALE***************************************/


/******************************************INIZIO DELLA SEZIONE CONTATTI***************************************/
/*SEZIONE DOVE SIAMO*/
.dovesiamo {
    background-color: red;
    height: auto;
    text-align: center;
}


/*TITOLO H3*/
.dove {
    font-size: 40px;
    color: white;
    font-family: 'Pacifico', cursive;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
 

/* H3 SOTTO TITOLI "ORDINA E RITIRA" */
.contattaci {
    color: white;
    font-size: 35px;
    font-family: 'Pacifico', cursive;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align: center;
}

.mappa {
    width: 80%;
    display: block;
    margin: auto;
    text-align: center;
}


#contatti {
    background-image: url("immagini/sfondo1.jpg");
    height: auto;
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/******************************************FINE DELLA SEZIONE CONTATTI***************************************/


/******************************************INIZIO SEZIONE FOOTER***************************************/

footer {
    background-color: #293133;
    height: auto;
}


.column-footer {
    float: left;
    width: 25%;
    padding: 50px;
    height: auto;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


.titoli-footer {
    color: white;
    font-size: 20px;
}

.paragrafi-footer {
    color: white;
    font-size: 14px;
}



/******************************************INIZIO SEZIONE FOOTER WRAPPER***************************************/

#footer-wrapper {
    width: 100%;
    height: auto;
    clear: both;
    background-color: black;
    padding: 15px;
    color: white;
}


.small {
    font-size: 12px;
    font-weight: bolder;
}

.contatti {
    text-align: center;
}




/* MEDIA QUERIES*********************************************************************************/

/* Smartphone o piccoli Tablet */
@media screen and (max-width: 480px) {
   .logo-slider {
       display:none;
    }



/* COLONNA SINISTRA CON LOGO*/
.column-logo {
    float: left;
    width: 100%;
    padding: 10px;
    height: auto;
}



/* COLONNA DESTRA CON MENU'*/
.column-menu {
    float: left;
    width: 100%;
    padding: 10px;
    height: auto;
}


/* POSIZIONO IL LOGO AL CENTRO*/
.logo {
margin: auto;
display: block;
width:80%;
}

.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("immagini/sfondo1.jpg");
    background-color: #cccccc;
    max-height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: top;
}


.titolo-intro {
font-size:40px;
}

/* aumento al 100% la sezione ordina */
    #ordina {
    height: auto;
    width: 100%;
    margin: auto;
    display: block;
    padding-bottom: 80px;
}


/* aumento al 100% le colonne della sezione, diminuendo il padding*/
.column {
width: 100%;
padding:5px !important;
}



/* aumento al 100% la sezione il nostri servizi*/
#nostri-servizi {
    height: auto;
    width: 100%;
    margin: auto;
    display: block;
}


/* aumento al 100% le colonne della sezione, diminuendo il padding*/
.column2 {
width: 100%;
}


/*SEZIONE INTERNA ALLA SEZIONE SPECIALITA'*/
.inner {
    height: auto;
    width: 100%;
    margin: auto;
    display: block;
}


/* aumento al 100% la sezione il nostro locale*/
.sezione-nostro-locale {
    height: auto;
    width: 100%;
    margin: auto;
    display: block;
}

/* aumento al 100% le colonne della sezione, diminuendo il padding*/
.column3 {
    float: left;
    width: 100%;
    padding: 5px;
    height: auto;
}


 /* FOTO DEL LOCALE AL 100% */
    .piccole {
        width: 100% !important;
        margin: auto;
        display: block;
        padding-bottom:20px;
    }


/* H3 SOTTO TITOLI "ORDINA E RITIRA" */
h3 {
    color: red;
    font-size: 40px;
    font-family: Pacifico;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align: center;
}


    .button3 {
    background-color: red;
    font-size: 15px;
    font-weight: bold;
    color: white;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    width: 70%;
}

   .button3:link {
        color: white;
    }

    .button3:hover {
    color: black;
    background-color: white;
}


    .button {
    background-color: red;
    font-size: 15px;
    font-weight: bold;
    color: white;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    width: 80%;
}

   .button:link {
        color: white;
    }

    .button:hover {
    color: black;
    background-color: white;
}


.button2 {
    background-color: white;
    font-size: 15px;
    font-weight: bold;
    color: black;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    width: 60%;
    border-radius: 30px;
    border: solid red;
    text-align: center;
    text-decoration: none;
}


 .button2:hover {
    background-color: black;
    color: white;
}


.mappa {
    width: 100%;
    display: block;
    margin: auto;
    text-align: center;
}

  .column-footer {
        width: 100%;
    }


}



/* Tablet in modalità  verticale *****************************************************************/
    @media all and (min-width: 481px) and (max-width: 736px) {
        .column1, .column2, .column3, .columnok {
            width: 100%;
        }
        

/* COLONNA SINISTRA CON LOGO*/
.column-logo {
    float: left;
    width: 100%;
    padding: 10px;
    height: auto;
}



/* COLONNA DESTRA CON MENU'*/
.column-menu {
    float: left;
    width: 100%;
    padding: 10px;
    height: auto;
}


/* POSIZIONO IL LOGO AL CENTRO*/
.logo {
margin: auto;
display: block;
width:70%;
}

   .logo-slider {
       display:none;
    }


/* riduco altezza HERO IMAGE per Tablet in modalità  verticale */
        .hero-image {
         max-height: 500px;
        }


.titolo-intro {
font-size:40px;
}
        
        #contatti, #ordina, #nostri-servizi, .sezione-nostro-locale {
        width:100%;
    }


    .column, .column2 .column-footer {
        width:100%;
    }
    
    .piccole {
    width: 100%;
    }
    
    
      .column-footer {
        width: 100%;
    }
    
    
      .button2 {
      width:50%;
   }    
   
   
      .button, .button3{
      width:40%;
   }    
    }


/* MEDIA QUERIES PER RESPONSIVE MENU*************************************************/
@media screen and (max-width: 600px) 


{
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

}

/* FINE MEDIA QUERIES PER RESPONSIVE MENU*************************************************/



    /* Tablet in modalità orizzontale ********************************************************************/
    @media all and (min-width: 737px) and (max-width: 1279px) {
 
 /* riduco altezza HERO IMAGE per Tablet in modalità orizzontale */
        .hero-image {
         max-height: 400px;
        }
        
        
   .button {
      width:100%;
   }     
        
   .button2{
      width:100%;
   }     
   
   .button3{
      width:50%;
   }     
   
   #contatti, #ordina, #nostri-servizi, .nostro-locale {
        width:100%;
    }
    
    
    .inner {
    height: auto;
    width: 100%;
    margin: auto;
    display: block;
}
}

   /* LAPTOP */
      /* riduco altezza HERO IMAGE per i laptop */
    @media all and (min-width: 738px) and (max-width: 1600px) {
       .hero-image {
         max-height: 450px;
        }
        
         .button, .button2{
      width: 50%;
    }
    
      .button3{
      width: 40%;
    }
    }
    
    
        
     /* DESKTOP LARGE*/
    /* riduco dimensioni delle immagini grandi sui schermi desktop grandi */
  @media screen and (min-width: 1900px) {
  .button, .button2, .button3 {
  padding: 10px 10px 10px 10px;
    }
  }