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

/* CSS RESET CORRETTO E CHIUSO */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: top;
    text-decoration: none;
}

}
html {font-size: 20px;
	
	scroll-behavior: smooth;}
@media (prefers-reduced-motion: no-preference) {
    html {scroll-behavior: smooth; }
}

body {
    background-color: #808080; 
    margin: 3%; 
    padding: 1%; 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
	color: #666666;
}

h1 { font-size: 2.5vw; color: #fff; margin:0 0 10px 20px; text-shadow: 2px 2px 7px rgba(5, 5, 5, 0.3); letter-spacing: 2.0px}
h2 { font-size: 2.0vw; color: #ddd; margin:0 0 15px 20px; text-shadow: 2px 2px 7px rgba(5, 5, 5, 0.3); letter-spacing: 1.7px}
h3 { font-size: 1.9vw; color: #fff; margin: 0; text-shadow: 2px 2px 10px rgba(0, 0, 0, 1); }
p { text-indent: 1.5vw; font-size: 2.0vw; letter-spacing: 1px; color: #ddd; margin: 2% 2%; text-align: justify; line-height: 1.3 }
p::first-letter { font-size: 2.5vw; }

 
/* HTML TESTI NEL DATABASE */

	.db-content-1{align-self: flex-start; border: 1px solid transparent; margin-top:110px; }
	.db-content-1 p{font-size:1.5vw; margin:0px 10px 10px 0px; line-height: 1.5; letter-spacing: 1.5px}
	.db-content-1 p:first-letter{font-size:2.5vw;}
	.db-content-1 table{display:block; width:50%; float:left;  margin:0px 20px 0px 0px; border-spacing:10% ;} 
	.db-content-1 td{ padding:2%}
	.db-content-1 img{ width: 100%;  border-radius: 15px}

/* TESTATA HEADER */
.header-container {display: flex; width: 100%; margin-bottom: 50px; align-items: center; justify-content: space-between; }

.cella-header { flex: 1; }
.cella-header.contatti {font-size: 1.5vw; letter-spacing: 2px; text-align: left; width: 20%;}
.cella-header.logo { text-align: center;  width: 70%; padding-left: 80px; border:1px solid transparent}
.cella-header.social { font-size: 1.5vw; letter-spacing: 2px; text-align: right; margin-right: 20px;  width: 20%  }
.cella-header-lingue { font-size: 1.5vw; width: 50px; background-color: #909090; text-align: center; padding: 10px; border-radius: 15px; flex-shrink: 0; }
	
.contatti a, .social a { display: block; margin: 5px 0; color: #bbb; transition: all 0.3s ease; }
.contatti a:hover, .social a:hover { color: #fff; text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.7); }	

.cella-header-lingue  .contatti a{  width: 10px;  background-color: #909090; text-align: center;  padding: 10px; border-radius: 15px; flex-shrink: 0; }
.cella-header-lingue a  { display: block; margin: 5px 0; color: #bbb; transition: all 0.3s ease; }
.cella-header-lingue a:hover { color: #fff; }
.cella-header-lingue a.attivo { color: #fff; font-weight: normal; text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.7); }

/* BANNER HEAD CON TITOLI */

.banner-head { border-radius: 15px; height: 400px; padding: 30px; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.banner-head h1 { margin: 0; letter-spacing: 2px; font-size: 3.5vw; color: #fff; text-shadow: 2px 2px 7px rgba(5, 5, 5, 0.8); }
.banner-head h2 { margin: 5px 0 0 0; letter-spacing: 2px; font-size: 2.5vw; color: #ddd; text-shadow: 2px 2px 7px rgba(5, 5, 5, 0.8); }

/* ELENCO BERKEL AFFETTATRICI */

.riga-affettatrice-loop { display: flex; flex-wrap: wrap; gap: 40px; margin:5% 0; text-decoration: none; color: #fff; }
.link-affettatrice-berkel { display: block; width: 100%; height: auto; border-radius: 15px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease; }
.riga-affettatrice-loop:hover .link-affettatrice-berkel {  transform: translateY(-5px); box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.4); filter: brightness(1.25); }
.cella-sx { flex: 0 0 35%; min-width: 280px; box-sizing: border-box; }
.cella-dx { flex:1; min-width: 300px; box-sizing: border-box; }
.cella-dx h1 {font-size: 2.1vw; color: #fff; font-weight: 600; letter-spacing: 1.5px; }	
.cella-dx h2 {margin-top:10px; margin-bottom:15px; font-size: 1.9; color: #ddd; font-weight: 500; letter-spacing: 1px; }	

/* GRIGLIA SEZIONI E SOTTOSEZIONI */
.sezione { margin: 0px 0px 40px 0px; padding: 20px; background-color: #909090; border-radius: 20px; }
	
.sezione-content h1{ font-size: 2.8vw; color: #fff; padding:20px 0px 10px 20px; text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);}
.sezione-content h2{ font-size: 2.2vw; color: #DDD; padding:0px 0px 10px 20px; text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);}
.sezione-content h3 {font-size: 1.9vw; color: #DDD; margin: 1%; text-shadow: 3px 3px 10px rgba(0, 0, 0, 1.0);}	

.testo { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;  margin: 40px 0 0 0; gap: 0; width: 100%; }
.testo p { font-size: 1.5vw; flex: 1 1 100px; line-height: 150%; margin:0px 20px 20px 20px }
.testo p:first-letter { font-size: 1.9vw; }

.testo2 { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;  margin: 40px 0 0 0 ; gap: 0; width: 100%; }
.testo2 p { font-size: 1.5vw; line-height: 150%; margin:0px 20px 20px 20px }
.testo2 p:first-letter { font-size: 1.9vw; }

.sottosezioni-griglia { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; margin-top: 20px;}
.sottosezioni-griglia a{ box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; overflow: hidden;  border-radius: 20px;}
.sottosezioni-griglia a:hover { transform: translateY(-5px); box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.4); filter: brightness(1.25); }	
	
.larghezza-100 { width: 100%; }
.larghezza-70 { width: 70%; }
.larghezza-60 { width: 60%; }
.larghezza-40 { width: 40%; }
.larghezza-30 { width: 30%; }
.larghezza-50 { width: calc(50% - 10px)}
.larghezza-40 { width: 40%; }
.larghezza-30 { width: 30%; }
.larghezza-33 { width: calc(33% - 10px); }
.larghezza-25 { width: calc(25% - 16px); }
.larghezza-20 { width: calc(20% - 19px); }

.sottosezione-box { border-radius: 15px; width: 100%; height: 300px; padding: 15px; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; align-items: flex-end; }

/* BARRA NAVIGAZIONE */

.nav-container { display: flex; max-width: 100%; justify-content: space-between; align-items: center; margin: 0 0 20px 0; border: 1px solid transparent; border-radius: 20px; }

.colonna-nav-dx { flex: 0 0 30%; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.colonna-nav-sx { flex: 0 0 30%; text-align: left; }
.colonna-nav-cx { flex: 0 0 30%; text-align: center; }

.cella-nav {font-size: 1.5vw; display: inline-block; height: 20px; background-color: #909090; border-radius: 15px;	color: #fff; text-align: center; padding: 4% 6%; line-height: 100%; white-space: nowrap; }

.cella-nav a { color: #fff; text-decoration: none; transition: opacity 0.3s ease; font-weight: 500; }
.cella-nav a:hover { opacity: 0.8; }
.cella-nav img { display:block; width: 30px; margin:-5px; cursor: pointer; }

.indietro{ min-width: 10%; }
.indietro a{ border:1px solid transparent; display:block; margin-top:-1px }

.preferiti{ min-width: 20%; }
.preferiti a{ border:1px solid transparent; display:block; margin-top:-2px}

/* effetto scroll pulsante up */
.cambia { opacity: 0; animation: mostraPlanciaAlloScroll linear both; animation-range: 0px 350px; animation-timeline: scroll(); }

@keyframes mostraPlanciaAlloScroll {
    to { opacity: 1; }
	}
	
/* MAPPA FINDER */

.nav-map { background-color:#666; border-radius: 20px; padding:20px; box-shadow: 10px 10px 30px rgba(0, 0, 0, 1); }
.nav-map table { border-collapse: collapse; border-spacing: 0; }
.nav-map th, .nav-map tr, .nav-map td {	padding: 0; }
.nav-map td { width: 60px; }
.nav-map tr{ height:60px }			
.nav-map a { color: #fff; margin:20px 0 0 10px; text-decoration:none; font-size:18px; padding:0px; letter-spacing: 1.8px; font-weight: 100; text-shadow: 2px 2px 10px rgba(0, 0, 0, 1); display:block; }
.nav-map img { display: block; height: auto; width:100%; margin:0; opacity: 0.7; }

.griglia-finder-orizzontale { display: flex; flex-wrap: wrap; gap: 40px; width: 100%; justify-content: flex-start;  padding: 20px 20px; box-sizing: border-box; }

.blocco-colonna-sezione {
    flex: 1;
    min-width: max-content; /* Fa in modo che la colonna sia larga ALMENO quanto il testo più lungo */
    max-width: none;        /* Rimuove il blocco rigido */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: top;
}
	
.chiudi {border:1px solid #ff0; align:center}	
.chiudi a{border:1px solid #ff0; display:block; width: 100px}

.nav-map { background-color: #666; border-radius: 20px; padding: 20px; box-shadow: 10px 10px 30px rgba(0, 0, 0, 1); }
.chiudi-e-home { display: flex; justify-content:flex-start; align-items: center; gap: 15px; margin:0px 0px 0px 0px; padding:0px 10px 0px 10px; } 
.chiudi, .home { margin-top:0px; border-radius: 15px; height: 40px; display: inline-block; width: 20%; text-align: center; line-height: 35px; background: rgba(0, 0, 0, 0.1); border-radius: 15px; padding: 20px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1); font-size:1.5vw; letter-spacing:1.5px;}

@media screen and (max-width: 768px) {
.griglia-finder-orizzontale { gap: 20px; padding: 10px 0; }
.blocco-colonna-sezione { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* COME ORDINARE E CODICE CERTIFICAZIONE */

.ordine-certificazione-container {
        display: flex;
        max-width: 100%;  
		min-height: 30vh;
		margin: 30px auto;
        justify-content: space-between;
        align-items: stretch; 
        background-color: transparent;
        border-radius: 15px;
        gap: 20px; 
    }

    .cella-ordine, .cella-certificazione { 
        flex: 1; 
        max-width: 50%; 
		padding: 25px; 
        background-color: #707070; 
        border-radius: 15px; 
        min-height: 320px; 
        box-sizing: border-box; 
    }
	
	.cella-ordine h3, .cella-certificazione h3{
		display: block;
	font-weight: 700;
	font-size: 1.7vw;
	color:#fff;
	margin-bottom: 15px;
	letter-spacing: 1.8px;
		
	}
	.cella-ordine h3{text-align: left}
	.cella-certificazione h3{text-align: right}

.cella-ordine p, .cella-certificazione p{
		line-height: 1.8;
		display: block;
        font-size: 1.3vw;
        color: #ccc;
        margin: 5px 0px;
        text-align: left;
    }
	
      .cella-ordine p::first-letter, .cella-certificazione p::first-letter {
        font-size: 1.5vw;
    }
	
      .cella-ordine note{
		font-size: 1.3vw;
		color:#bbb;
		 line-height: 1.5;
	
	}

    .cella-ordine a {
        color: #ddd;
        font-size: 1.5vw;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .cella-ordine a:hover {
        color: #ffffff;
        text-shadow: 2px 2px 7px rgba(5, 5, 5, 0.3);
    }
	
    #testo:focus::placeholder {
        color: transparent;
    }