@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/*NORMALIZE*/
body, html {font-size: 100%; padding: 0; margin: 0; }
body{font-family:'Open Sans', sans-serif;background: #fff;}
a{-webkit-transition: all .2s;transition: all .2s ease-out;text-decoration: none}
p {font-family:'Open Sans', sans-serif;}
h1,h2,h3,h4{font-weight: 400;letter-spacing: 0.08em;margin: 0}
* {
  box-sizing: border-box;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; border-radius: 0!important;
}
input[type="submit"] {
  border: none;
}
::-moz-selection { background: #dabb7c; }
::selection { background: #dabb7c; }
#header {z-index:100!important;position:relative;width:100%;}

.header{width:100%;max-width:1500px; height: 140px;position: relative; margin: 0 auto; overflow: hidden;background:#fff;
    display: flex;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;-webkit-transition: box-shadow .3s;transition: box-shadow .3s ease-out;
}
/*  #stickyalias {display: none;height: 140px;}*/

.menu-left{ flex: 0 0 15%;padding-left:0%}.menu-center{ flex: 0 0 60%;}.menu-right{ flex: 0 0 15%;text-align: right;padding-right:0%}
.logo{width: 300px;margin: 0 auto;-webkit-transition: all .3s;transition: all .3s ease-out;}
.logo img{width: 100%;height: auto} .logo:hover{opacity:1.0}
.h-social{} .h-social span{display: inline-block;width: 25px; height:35px;padding: 0;margin: 0 10px;}
.h-social span.h-s-instagram{background: url("../bon-bon/images/ico-instagram.svg") center 55% no-repeat; background-size:contain;width: 20px}
.h-social span.h-s-facebook{background: url("../bon-bon/images/ico-facebook.svg") center center no-repeat; background-size:contain;width: 10px}
.h-social span.h-s-youtube{background:url("../bon-bon/images/ico-youtube.svg") center center no-repeat; background-size:contain;width: 22px}
.h-social span.h-s-email{background:url("../bon-bon/images/ico-email.svg") center center no-repeat; background-size:contain;width: 21px}
.h-social span.h-s-instagram,.h-social span.h-s-facebook,.h-social span.h-s-youtube,.h-social span.h-s-email{
  -webkit-transition: -webkit-filter 0.2s ease-in-out;
  transition: -webkit-filter 0.2s ease-in-out;
  transition: filter 0.2s ease-in-out;
  transition: filter 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;
}
/*.h-social span.h-s-instagram:hover,.h-social span.h-s-facebook:hover,.h-social span.h-s-youtube:hover,.h-social span.h-s-email:hover,
.h-social span.h-s-instagram:focus,.h-social span.h-s-facebook:focus,.h-social span.h-s-youtube:focus,.h-social span.h-s-email:focus {
  filter:invert(64%) sepia(70%) saturate(572%) hue-rotate(7deg) brightness(101%) contrast(82%);
}*/

/* NAV */
#nav-container {
margin-left: auto;
  position: relative;z-index: 99999!important;
}
#nav-toggleX {
  display: block; position:absolute;top:50px;right:50px;background:url("../bon-bon/images/ico-close.svg")center center no-repeat;background-size:contain;
  width:30px;height:30px;
  cursor: pointer;  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
#nav-toggleX.open {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#nav-toggle {
  display: block;
  width: 40px;
  height: 32px;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);  position: relative;z-index: 99!important;
}

#nav-toggle span {
  background-color: black;
  width: 100%;
  height: 2px;
  /*border-radius: 1px;*/
  display: block;
  position: absolute;
  left: 0;
  content: '';
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 7px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

#nav-toggle span:nth-child(2) {
  top: 14px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

#nav-toggle span:nth-child(3) {
  top: 21px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
#nav-toggle:hover span {
  background-color:#A69066;
}
#nav-toggle.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 3px;
  left: 6px;
}

#nav-toggle.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-toggle.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 30px;
  left: 6px;
}

#nav-overlay{
  position: absolute;  position: fixed;
  /*top: 16px;left: 16px;*/top:50%;left:50%; opacity: 1;top:0%;left:50%; 
  z-index: -1; 
  background: rgba(166,144,102, 0.8) ;
/*  border-radius: 50%;*/
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: scale3d(1, 0, 0);
          transform: scale3d(1, 0, 0);
}

#nav-overlay.open {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1); opacity: 1;top:50%;
}
#nav-toggle.open span {background-color:#fff;}


/*menu testo*/
#nav-fullscreen {
  width: 100%;
  position: fixed;			z-index: 99999!important;background-color:rgba(0,0,0,0.0);

  left: 0;
  top: 0;
  -webkit-transition: ease-in-out 0.25s;
  transition: ease-in-out 0.25s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  visibility: hidden;
  opacity: 0;
}
#nav-fullscreen ul {
  list-style: none; 					margin: 0;padding: 0;
}
#nav-fullscreen a {
  color: #fff;
  text-decoration: none;  -webkit-transition: ease-in-out 0.3s;transition: ease-in-out 0.3s;
}

#nav-fullscreen.open {
  visibility: visible;
  opacity: 1;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

#nav-overlay {
/*  background: -webkit-linear-gradient(top, #FF512F 10%, #FF512F 50%, #DD2476 90%);background: linear-gradient(180deg, #FF512F 10%, #FF512F 50%, #DD2476 90%); */background:rgba(166,144,102,1.0)
}

#nav-toggle span {
  background-color: black;
}

#nav-fullscreen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
  font-family: sans-serif;font-family: 'Playfair Display', serif;
  font-size: 3vh; 
font-weight: 300;letter-spacing: 0.06em;/*text-transform: uppercase*/
}
#nav-fullscreen li {
  margin: 2vh 0; -webkit-transition: ease-in-out 0.3s;transition: ease-in-out 0.3s;/*list-style: disc;*//*list-style-position: outside;*/ /*margin-left: -4rem;*/
	/*background: url("../images/ico-pallino.svg") left center no-repeat;*/
    /*padding-left: 1em;*/ text-align: center;
}

#nav-fullscreen li:hover {
 /* list-style: disc; color:var(--color-oro);*/
}
#nav-fullscreen a:hover {
  color:#F8E8E7
}
#nav-fullscreen a.active {
  color:#EBC3C0}
/*#nav-fullscreen li a {
    position: absolute; background: #FF3399;
    left: 10px;
}*/


/* menu testo*/

.content{width:100%;max-width:1500px; margin: 0 auto;}
.vetrina{width:100%; padding: 0;margin: 0;
 display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

	
	 justify-content: start;
  flex-wrap: wrap; 

}
.flex-cell {
  flex: 0 0 50%;
  display: flex;
  justify-content: center;
  align-items:stretch;

  box-sizing: border-box;
}

.flex-cell:before {
  content: '';
  display: table;
  padding-top: 100%;
}

.flex-item {
  flex-grow: 1;  flex-wrap: wrap;
  color: #000;  
  display: flex;
  justify-content: center;
  align-items: center;
	text-align: center;background: #fff
}
:root {
	--colore-01: #C30000; /* blu */
	--colore-02: #ac936d;
	--colore-03: #D0BA99;
	--colore-04: #FFFFFF;
	--bottonOver: #232d41;
}
/*pasqua
--colore-01:#000;--colore-02:#f6c2d7;--colore-03:#75c280--colore-04:#f6f6f6;;
*/
.colore-01{background:var(--colore-01);}
.colore-02{background:var(--colore-02);}
.colore-03{background:var(--colore-03);} 
.colore-04{background:var(--colore-04);}

.vetrina-sx-01{width:100%;}.vetrina-img img{width:100%;height:auto} 
.vetrina-dx-txt{width:100%;color: #fff;}
.vetrina-sx-txt{width:100%; color: #fff; } 
.vetrina-dx-02{width:100%;}

.flex-item h2{width: 100%;font-size:2rem;font-family: 'Playfair Display', serif;letter-spacing: 0.08em;line-height: 1.5} 
.flex-item a h2 {color: var(--bottonOver);-webkit-transition: color .2s;transition: color .2s ease-out;}.flex-item a:hover h2{color:var(--colore-01);}
.flex-item h3{width:100%;font-family:'Open Sans', sans-serif;font-size:0.9rem;/*color: rgba(0,0,0,0.4);*/letter-spacing:0.4em;margin-bottom:10px;opacity:0.8}.flex-item .vetrina-sx-txt h3{;color: var(--bottonOver);}
.flex-item span{display: block;margin-bottom:0px; height:35vh; margin-bottom: 20px} .flex-item span img{height:100%;width:auto;}
.flex-item .freccia{display:block;margin:30px auto 0 auto;width:20px;height:40px; background: url("../bon-bon/images/freccia-giu-cuore.svg") top center no-repeat;background-size:contain; animation: showHide 2.2s ease-in infinite;}

    @keyframes showHide {
		0% { opacity:1;}
		40% { opacity:1;}
        70% {;opacity:0.5;}
		100% {;opacity:1;}
    }


.flex-cell .vetrina-sx-01 img,.flex-cell .vetrina-dx-02 img{width:100%;height:auto;display:block}

.vetrina button {
	border: none;background:transparent;background:var(--colore-01);
	padding: 1.3em 1.5em;	
	color:#fff;
	font-size: 0.72rem;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 35px 0px 0px;
	border-radius: 2px; border:1px solid var(var(--colore-01));font-family:'Open Sans', sans-serif;letter-spacing:0.3em;font-weight: 600;
	-webkit-transition: all .2s;transition: all .2s ease-out;
}

.vetrina button:hover {
	background: var(--bottonOver);color:#FFFFFF;border:1px solid  var(--bottonOver);
}

.contenuto{text-align: center;padding: 100px 0}
.contenuto h2{font-family: 'Playfair Display', serif;font-size:2.5rem;letter-spacing: 0.08em;margin-bottom: 15px;font-style: italic}
.contenuto h3{font-size: 1.1rem;} .sweet{}

.biscotti-cont{width:100%;max-width:900px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around; 
  padding: 0;padding-top:50px;padding-bottom:50px;
  margin: 0 auto;
  list-style: none;}
.biscotti{width: calc(100% / 4 - 20px);height:auto;margin:10px;text-align: center;} .biscotti img{width:100%;height: auto}
.bisc-mobile{display: none}
.biscotti-conf{width:100%;max-width: 900px; margin: 0 auto;}.biscotti-conf img{width:100%;max-width:600px; height: auto} .confezioni{position:relative;}

.informazioni{padding-top:0;max-width:1000px;margin: 0 auto;} 
.informazioni p{padding:16px 0;text-align:left;font-size: 1.05rem;line-height:1.9; color:rgba(0,0,0,0.6)}
.informazioni p strong{ color:rgba(0,0,0,0.8);font-weight: normal}
.h3secondo{margin-top: 20px;text-align:left;}

.ordini{text-align: center;padding-top:0;position: relative}
.ordini::before{content: '';width:68px;height:30px;background:#000;position:relative;display:block;margin: 0 auto;margin-bottom:20px;
background:url("../bon-bon/images/ico-cuoricino.svg") center center no-repeat; background-size: contain;}
.ordini h2{}
.ordini p{padding: 10px 0; text-align: center;line-height: 1.6;font-size: 1.2rem;font-weight: 500}
.ordini p a{color:rgba(0,0,0,1.0); display: block;font-size:120%} .ordini p a:hover{color:#A69066;}

/*collezioni*/
#collezioni{width:100%; height:auto;position:relative; margin-bottom:60px}
.coll-scatole{padding-top:0;}.coll-scatole h2{margin-bottom:30px;}
.coll-img{width:calc(100% / 4 - 6px);display:inline-block;position:relative;overflow:hidden; margin: 0 1px!important; padding: 0;}.coll-img img{width:100%;height:auto}
figcaption {font-size:0.9rem;letter-spacing: 0.04em;padding: 0}
.coll-img p{display: block;margin-top: -10px;font-size:1.0rem}


h3.msg{text-align: center;padding-bottom:40px;font-size: 0.9rem}
/*/ footer */
footer{background:#F8E8E7;}
.foo-cont{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;padding:0;margin: 0 auto;width:100%;max-width:1200px;}
.foo-logo{display: flex; flex: 1 20%;padding:50px 0}.foo-logo img{height:100%;width: auto;}
.foo-centro{display: flex;flex: 1 30%;}
.foo-newsl{display: flex;flex: 1 50%;flex-flow:row wrap;}  .foo-newsl p{font-size: 0.9rem}
.foo-copy{width:100%;margin: 0 auto;background:#fff;text-align:center; padding: 16px 0;font-size: 0.7rem;letter-spacing:0.08em;color:rgba(0,0,0,0.7);}
.foo-copy a{color:rgba(0,0,0,0.7)}.foo-copy a:hover{color:#A69066}

.foo-centro ul{list-style:none;font-size:0.9rem;letter-spacing:0.04em;}.foo-centro li{margin: 8px 0}
.foo-centro li a{color:rgba(0,0,0,1.0)}.foo-centro li a:hover{color:#A69066}
.foo-centro{} .f-social span{display: inline-block;width: 25px; height:35px;padding: 0;margin: 0 10px 0 0px;}
.foo-centro span.f-s-instagram{background: url("../bon-bon/images/ico-instagram.svg") center 55% no-repeat; background-size:contain;width: 18px}
.foo-centro span.f-s-facebook{background: url("../bon-bon/images/ico-facebook.svg") center center no-repeat; background-size:contain;width: 9px}


/* FORM*/
.inscriviti{width:100%;padding:0;display:block;}
.inscriviti p{width:100%;margin:0;padding:0;display:block;}
.form-inscriviti{width:70%;border:none;padding:0 20px;margin: 0;display:inline-block;background:rgba(255,255,255,0.1);height:54px;border:1px solid #000;border-right:none;font-size:0.9rem;letter-spacing: 0.04em;
-webkit-transition:background ease-out 0.2s;
  -o-transition:background ease-out 0.2s;
  transition:background ease-out 0.2s;font-family:'Open Sans', sans-serif;}
.btn-inscriviti{width:calc(30% - 0px);border:none;padding:0;margin:0;display:inline-block;height:54px;float:right;background:transparent;border:1px solid #000;-webkit-transition: all .2s;transition: all .2s ease-out;font-family:'Open Sans', sans-serif!important;letter-spacing:0.08em;cursor:pointer}
.btn-inscriviti:hover{background:#A69066;color:#fff}
.form-inscriviti:focus {
	background:#fff;color:#000;outline: 0;
}

.form-inscriviti::-moz-placeholder {
  color:rgba(0,0,0,0.6);font-size:0.9em;letter-spacing:0.10em;
  opacity: 1;
}
.form-inscriviti:-ms-input-placeholder {
  ccolor:rgba(0,0,0,0.6);font-size:0.9em;letter-spacing:0.10em;
}
.form-inscriviti::-webkit-input-placeholder {
  color:rgba(0,0,0,0.6);font-size:0.9em;letter-spacing:0.10em;
}
input[type=checkbox] {
		/*visibility: hidden;*/	
	opacity: 0;
	position: absolute;
	z-index: -1;
}
.form-sotto{ padding:0; padding-top: 30px!important;overflow: hidden;}


/* SQUARED THREE */
.squaredThree {
	width: 18px;	
	margin: 0px auto;
	position: relative; float: left;
}

.squaredThree label {
	cursor: pointer;
	position: absolute;
	width: 18px;
	height: 18px;
	top: -2px; left: 0;/* border-radius:0 5px 5px 5px; */

	border: 1px solid rgba(0,0,0,0.8);
}
.autorizzo{float: left;	margin-top:0px; margin-left: 18px; width: calc(100% - 25px); }
.autorizzo h3{margin:0;margin-left: 15px; font-size:0.6rem; line-height: 1.4; color:rgba(0,0,0,0.4); text-align: left} 
.autorizzo h3 a {color:rgba(0,0,0,0.4)} .autorizzo h3 a:hover {color:rgba(0,0,0,1.0)}
.squaredThree label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 11px;
	height: 5px;
	background: transparent;
	top: 3px;
	left: 2px;
	border: 3px solid #000;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.squaredThree label:hover {border: 1px solid rgba(0,0,0,1.0);}
.squaredThree label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.6;
}

.squaredThree input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}


.grecaptcha-badge { 
    visibility: hidden;
}

@media screen and (max-width: 1500px) {
	.content{width:100%;  padding-left:5%;padding-right:5%;}
	.menu-left{ flex: 0 0 20%;padding-left:5%}.menu-center{ flex: 0 0 60%;}.menu-right{ flex: 0 0 20%;padding-right:5%;}
	.flex-cell:before {padding-top:none;}
	

}
@media screen and (max-width: 1194px) {
	.coll-img p{margin-top:0px;}
	
	.foo-cont{padding:0 5%;margin: 0 auto;}	
	.foo-logo{flex: 1 15%;padding:50px 0;}.foo-logo img{width:100%!important;height:auto}
	.foo-centro{flex: 1 35%;}
	.foo-newsl{flex: 1 50%;flex-flow:row wrap;}  .foo-newsl p{font-size: 0.9rem}
}

@media screen and (max-width: 992px) {
	.menu-left{ flex: 0 0 25%;padding-left:5%}.menu-center{ flex: 0 0 50%;}.menu-right{ flex: 0 0 25%;padding-right:5%;}
	.logo{width:250px;}
	
	.content{ padding-left:0%;padding-right:0%;} .contenuto{padding-left:5%;padding-right:5%;}
	
	.flex-item h2{font-size:2.7vw;}
	.flex-item h3{font-size:1.1vw; margin-bottom: 12px}
	.flex-item span{margin-bottom:0px;} .flex-item span{height: 22vh;} .flex-item span img{/*max-width: 100px*/}	
	.vetrina button {padding: 1.3em 1.5em;	font-size: 0.72rem;margin: 26px 0px 0px;}
	
	
	.foo-cont{flex-flow:row wrap;padding:0px 5% 10px 5%;}
	.foo-logo{flex: 1 50%;padding:50px 0 10px 0;;justify-content:center;}
	.foo-centro{flex: 1 50%;justify-content:center;}.foo-centro ul{padding: 0}.foo-centro li{padding: 0}
	.foo-newsl{flex: 1 100%;flex-flow:row wrap;}  .foo-newsl p{font-size: 1.0rem}
	.form-sotto{ padding-top: 30px!important;padding-bottom: 30px!important}
	
	.coll-img{width:calc(100% / 2 - 4px);display:inline-block;position:relative;overflow:hidden; margin: 0 0px!important; padding: 0!important;}

}


@media screen and (max-width: 668px) {
	
:root {
	--colore-04: #fff;
}
	.menu-left{ flex: 0 0 25%;}.menu-center{ flex: 0 0 50%;}.menu-right{ flex: 0 0 25%;}
	.logo{width:100%;}
	 .h-social span{width: 20px; height:35px;padding: 0;margin: 0 6px; margin-top: -20px;}
.h-social span.h-s-instagram{background: url("../bon-bon/images/ico-instagram.svg") center 55% no-repeat; background-size:contain;width: 20px;}
.h-social span.h-s-facebook{display: none}
.h-social span.h-s-email{display: none}
	
	#nav-toggle {width:30px;height: 32px;; margin-top: -20px}
	
	
	/*.content{ padding-left:0%;padding-right:0%;}*/ .contenuto{padding-left:0%;padding-right:0%;}
	.flex-cell {flex: 0 0 100%;}
	.flex-item h2{font-size:6.7vw;}
	.flex-item h3{font-size:3.3vw; margin-bottom: 12px}
	
	.contenuto h2{font-size:7.0vw;}.contenuto h3{font-size:3.5vw;} 
	.vetrina-sx-txt h2{font-size:5.5vw;}
	
	.biscotti{width: calc(100% / 2 - 20px);margin:10px;}
	.informazioni{  padding-left:5%;padding-right:5%;}
	
	.foo-cont{text-align: center}
	.foo-logo{flex: 1 100%;padding:50px 0 10px 0;}
	.foo-centro{flex: 1 100%;}
	.foo-newsl{flex: 1 100%;flex-flow:row wrap;}  .foo-newsl p{font-size: 1.0rem}
	.inscriviti p{width:100%;margin:0;padding:0;display:block;}
	.foo-copy {line-height: 1.8}.foo-copy span{display: block}
	
	.coll-img{width:calc(100% / 1 - 0px);display:inline-block;position:relative;overflow:hidden; margin: 0 0px!important; padding: 0;}
	

}