*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


h1 {
  font-size: 40px;
  line-height: 45px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
}
h3 {
  font-size: 20px;
  line-height: 24px;
}
h4 {
  font-size: 18px;
  line-height: 30px;
}
h5 {
  font-size: 16px;
  line-height: 20px;
}
h6 {
  font-size: 14px;
}
p {
  text-align: left;
}
@import url(https://fonts.googleapis.com/css?family=EB+Garamond);

.sp-content > div { list-style: none; margin-top: 320px; text-align: left;}
.sp-content .text { color: #fff; height: 35px; width: auto; background-color: #000; opacity: 0.7;padding: 0% 6%; margin-bottom: 5px; text-align: left; line-height: 35px; display: inline-block; }


@media (max-width: 1279px) {
  /*  .slick-prev, .slick-next {display: none !important}*/
  .copyright-area {text-align: center;}
  .amaro-lucano {background-size: 85%; background-position: top }
  .amaro-lucano-anniversario {background-size: 85%; background-position: top }

  #product .text-left-top {margin-left:15% }
  #product .text-right-top {margin-right:15%}

  .text-left-top{margin: 38% 0 0 22%;}
  .text-right-top {margin: 25% 22% 0 0;}
  .middle {width: 80%; margin: auto}

}

@media (max-width: 1199px) {
  .copyright-area {text-align: center;}
  .amaro-lucano {background-size: 80%; background-position: top }
  .amaro-lucano-anniversario {background-size: 80%; background-position: top }

  #product .banner_lucano .img-grid-lucano, #product .banner_lucano-anniversario .img-grid-lucano {width: 50%}
  #product .banner_lucano .tile-banner-1 .text, #product .banner_lucano-anniversario .tile-banner-1 .text {margin-top: 0 !important;}
  #product .tile-banner-2 { width: 50% !important; }
  #product .tile-banner-3 {display: none}
  #product .fixed {width: 100%}
  #territory .fixed {width: 100%}
  #territory .def-height .pisticci {background-color: #c51026; background-image: none; width: 50%; margin-left: 0; height: auto}
  #territory .def-height .matera {background-color: #1e0c0a; background-image: none; width: 50%; margin-left: 0; left:0; height: auto}
  #territory .ma .w-col-6 {left: 50%}
  #territory .ma .middle p{margin-top: 5%}
  #territory .def-height .middle p { width: 360px}
  #territory .pi, #territory .ma {height: auto}
  #territory .def-height .hide {display: none}
  #mixology .img-grid-3 {width: 33.333333333%; padding-top: 20%}

  #product .prizes {width: 100%}

  .fixed-1894 {top: 150px;width:29%;}
}


@media (max-width: 1499px) and (min-width: 991px) {
  .def-height .w-col-5 {display: none}
  .def-height .w-col-7 {width: 100%}
  #mixology h4 {font-size:16px; line-height: 18px}
  #contact .def-height .w-col-5 {display: table-cell; width: 50%}
  #contact .def-height .w-col-7 { width: 50%}
  #product #recipes_cta .text .position-container .img-responsive {width: 70px}

  #mixology .icon-container .icon img {height: 60px}
  /*#contact .def-height .w-col-7 {display: none}*/
}

@media (max-width: 1499px) and (min-width: 1280px) {
  .top-middle-background {background-size: 80%; background-position: bottom;} 
  #homepage .category {display: none}
}

@media (max-width: 1099px) {
  #mixology .img-grid-3 {width: 50%; padding-top: 30%}
  #mixology .icon-container .icon img {height: 70px}
  .image-store .btn {bottom: 180px}

  .def-height .w-col-6 { float: left; width: 100% }

    #footer p{padding:5% 10%}

}

@media (max-width: 991px) {
  /*  .slick-prev, .slick-next {display: none !important}*/
  .copyright-area {text-align: center;}
  .container { width:100%;}
  .text-left-top{margin: 40% 0 0 22%;}
  .text-right-top {margin: 25% 22% 0 0;}

  /*  #contact .w-col-6 { float: left; width: 100% }*/
  .def-height .w-col-6 { float: left; width: 100% }
  .def-height .w-col-5 {display: none}
  .def-height .w-col-7 {width: 100%}
  .def-height .w-col-7 p{padding-top: 10%}
  #contact .def-height .w-col-5 {display: table-cell; width: 50%;}
  #contact .def-height .w-col-7 {display: table-cell; width: 50%;}

  #product #cocktails .img-grid-3 { width: 50%; padding-top: 30%}
  #product #cocktails .img-grid-3:last-child{display: none}
  #product .fixed {height: 750px}
  .top-background {height: 850px}
  #product .ala .text-right-top{padding: 5% 8% 0 0 !important}
  #product .ala .text-left-top{padding: 15% 0 0 8%!important}

  #js-prize, #js-prize-overlay {display: none}

  #territory .fixed {height: 750px}
  #territory .def-height .middle {width: 50%; left: 50%; margin-left: 0}
  #territory .def-height .middle p{padding: 0%}
  #territory .def-height .w-col-6 {width: 50%; left: 50%; margin-left: 0}
  #territory .def-height .pisticci {background-color: #c51026; background-image: none; width: 50%; margin-left: 0; height: auto}
  #territory .def-height .matera {background-color: #1e0c0a; background-image: none; width: 50%; margin-left: 0; left:0; height: auto}
  #territory .ma .w-col-6 {left: 50%; float: none}
  #territory .ma .middle p{margin-top: 5%}
  #territory .pi, #territory .ma {height: auto}

  #homepage .absolute-container .title h3 {font-size: 35px !important; line-height: 40px;}
  #extra .text-center-top span {font-size: 35px !important; line-height: 40px;}
 

  .img-grid-2 {padding-top:50%; width: 50%; }
  .image-store .btn {bottom: 160px}

  .top-middle-background {background-size: 80%; background-position: bottom;} 

  #news .w-col-9 {width: 85%;} 
  #footer .def-height .w-col-6 p{text-align: center;}
  #footer .sponsor {display: table; float: none; margin: auto;}

  .amaro-lucano {background-size: 100%; background-position: top }
  .amaro-lucano-anniversario {background-size: 100%; background-position: top }

  #cover-2 .img-responsive {max-width: 200%; width: 160%; margin-left: -40% !important}
}
@media screen and (max-width: 900px){
  #territory .fixed {height: 650px}
  #territory .def-height .middle p {width: 80%}

/*    #product .fixed, .top-background {height: 750px}*/

  #mixology #filter {display: none;}

  #js-prize, #js-prize-overlay {display: none}
  .fixed-1894 {top: 150px}


}

@media screen and (max-width: 840px){
  .sp-slideshow { height: 345px; }
  .container .wrap .w-col-9 p {width: 100%}

  #product .w-col-6 {width: 100%; position: relative; z-index: 2; float: left} 
/*  #product .text-left-top {margin-left:15% }
  #product .text-right-top {margin-right:15%}*/
  #product #cocktails .img-grid-3 {width: 100%}
  #product .fixed {height: 700px}
  .top-background {height: 800px}


  /*#territory .w-col-6 {width: 100%; position: relative; z-index: 2} */
  .text-right-top, .text-left-top {margin: 0; padding: 0 5%; text-align: center; text-align: center}
  .text-right-top {margin-top: 10%; }
  .text-right-top span {font-size: 40px; line-height: 50px}
  .text-right-top p, .text-left-top p{ text-align: center; font-size: 20px; line-height: 36px}
  .top-middle-background {background-size: 90%; opacity: 0.4; position: relative; z-index: 1} 

  /*#mixology img { height: 60px;}*/
  .image-store .btn {bottom: 160px; padding: 0 8%}

  #news .w-col-6 {width: 100%; float: left} 
  #news section .w-col-9 .w-col-6 .text {text-align: left}
  #news .w-col-6 img{display: none} 
  #history .w-col-9 p span {font-size: 40px; line-height: 50px}

  #product .container {margin-top: 0px; overflow: hidden;}
  #mixology .container {margin-top: 0px;}
  
  #territory .container {margin-top: -65px;}
  #territory .def-height .middle p {width: 80%; padding-bottom: 10%;}
  #territory .def-height .middle {left: 0}
  #territory .def-height .pisticci, #territory .def-height .matera {width: 100%;}
  #territory .def-height .pisticci {bottom: 0}
  #territory .def-height .w-col-6 {width: 100%}
}

/*@media (min-width: 768px) and (max-width: 1199px) {
  #mixology .img-grid-3 {width: 50%; padding-top: 20%} 
}*/

@media (max-width: 767px) {
  .slidersection {padding-top: 0px;}
  .slidersection h3 {margin-top: 10%}

  nav { right: 10%}
  .logo {left: 0%; padding-left:15px;}

  #footer {background-size: 100%; border-top: 5px solid #b00016;} 

  .slidersection ul {display: none}
  .slidersection h3 {}
  .img-grid-4 {width: 100%;}
  .img-grid-2 {padding-top:70%; width: 100%; } 


  .def-height .w-col-7 p{ padding-bottom: 10%;}
  .def-height .w-col-7 p span {font-size: 30px; line-height: 30px}

  .container .wrap .icon { display: none}
  #history .w-col-9 {width: 85%}
  #history .w-col-9 p span {font-size: 30px; line-height: 30px}
  #history .w-col-9 p {font-size: 16px; line-height: 20px}

  #mixology .w-col-9 {width: 85%}
  #mixology .w-col-9 p span {font-size: 30px; line-height: 30px}
  #mixology .w-col-9 p {font-size: 16px; line-height: 20px}
  #mixology h4 {font-size:16px; line-height: 18px}
  #mixology .mixology-image {background-size: 100% !important}
  #mixology .mixology-box-container span:first-child {margin-bottom: 10px;}
  #mixology .mixology-box-container span:last-child {margin-top: 10px;} 


  #family .w-col-9 {width: 85%}
  #family .w-col-9 p span {font-size: 30px; line-height: 30px}
  #family .w-col-9 p {font-size: 16px; line-height: 20px}
  #family .w-col-9 .mini {font-size: 13px; line-height: 15px}

  #news .img-grid-4 {width: 100%; }
  #communication .img-grid-4 { width: 50%; }


  #product .amaro-lucano img {margin: auto auto auto 20%; width: 120%;}
  #product .amaro-lucano {background-size: 220% auto; background-position: 15% top}
  #product .amaro-lucano-anniversario img {margin: auto auto auto 20%; width: 120%;}
  #product .amaro-lucano-anniversario {background-size: 220% auto; background-position: 15% top}

  .top-background {display: none}
  #product .fixed{width: 95%; margin-left: 5%; height: 600px}
  #product .fixed .text-right-top .grades {display: none}
  #product .fixed .text-left-top .buy {width: 80%}
  #product .fixed .text-left-top .buy img{padding-top: 40px; width: 100%;}
  #product .fixed .text-right-top, #product .fixed .text-left-top {padding: 0px; width: 60%; float: left; }
  #product .fixed .text-right-top { padding-top: 10%;}
  #product .ala .text-left-top {padding: 0px !important}
  #product .fixed .text-right-top p{text-align: left; float: left; width: 100%; font-size: 16px; line-height: 20px}
  #product .fixed .text-left-top p {text-align: left; float: left; padding-top: 20px; width: 100%; font-size: 16px; line-height: 20px;}
  #product .fixed .text-right-top p span, #product .fixed .text-left-top p span {font-size: 30px; line-height: 30px}
  #product .fixed .hidden{ display: block; font-size: 30px; line-height: 30px} 
  
  #product .banner_lucano .img-grid-3,#product .banner_lucano-anniversario .img-grid-3 {width: 100%; }
  #product .banner_lucano .img-grid-lucano, #product .banner_lucano-anniversario .img-grid-lucano {width: 100%}
  #product .banner_lucano .tile-banner-1 .text, #product .banner_lucano-anniversario .tile-banner-1 .text {margin-top: 0 !important; overflow: hidden;}
  #product .tile-banner-2, #product .tile-banner-3{ display: none; padding-bottom: 0% !important; overflow: hidden;}

  #cocktails .img-grid-3 {
    padding-top:50%; /* half to have rectangular props */
  }

  #product #caption_slider p span {font-size: 30px; line-height: 30px}
  #product #caption_slider p {font-size: 16px; line-height: 20px}

  #product{margin-top: -120px; padding-top: 120px}

  #product #cocktails .img-grid-3 {padding-top:75%;}
  #mixology .img-grid-3 {width: 100%; padding-top: 50% } 

  #product #recipes_cta .text p {padding: 4% 8%}

  #recipe .img-grid-4 {padding-top:100%;}
  #recipe section .w-col-9 p{font-size: 16px; line-height: 24px; padding: 10% 0}
  #recipes_cta #tile-cta-2 {display: none}
  #recipes_cta #tile-cta-4 {display: none}

  #contact .section .w-col-6 {float: none; width: 100%;}
  #form .section-icons {margin: auto; width: 100%; padding: 5% 2%}
  #form .w-col-6 { float: left; width: 100%;}
  #form .w-col-1 {width: 22%}
  #form .wrap-form {margin: auto; padding: 0 0 40px; width: 90%; padding: 5%}

  #the_others_communication .black .wrap {display: none}

  #territory .container {margin-top: 0px;}
  #territory .top img {margin: auto -10% auto 0;width: 65%;}
  #territory .fixed{width: 95%; margin-left: 5%; height: 350px}
  #territory .fixed .text-right-top, #territory .fixed .text-left-top {padding: 0px; width: 60%; float: left; }
  #territory .fixed .text-right-top p{text-align: left; float: left; width: 100%; font-size: 16px; line-height: 20px}
  #territory .fixed .text-left-top p {text-align: left; float: left; padding-top: 20px; width: 100%; font-size: 16px; line-height: 20px;}
  #territory .fixed .text-right-top p span, #territory .fixed .text-left-top p span {font-size: 30px; line-height: 30px}

  #cover-2 .img-responsive {max-width: 200%; width: 200%; margin-left: -50% !important}
  #homepage_slider .tile-banner-1-slider .text{ padding: 5% 0 5%}
  #homepage #homepage_slider .banner_lucano .tile-banner-1-slider{display:table-cell; height:100%;}
  #homepage #homepage_slider .banner_lucano .tile-banner-1-slider{display:table-cell; height:100%;}

}

@media (max-width: 680px) {
  .fixed-header .w-col-9 {position: absolute; top: 10px; width: 100%}

  .w-container.lang, .nav-menu span {display: none;}
  .menu {width: 30px;}
  .nav-menu span
  .sp-slideshow { height: 285px; }

  /*#mixology img {display: none}*/

  #product #caption_slider .slick-slider

  #product .text-left-top, #product .text-right-top  {margin:0%; padding: 0 5%}
  #product .text-left-top p, #product .text-right-top p {margin-top:0%; text-align: left; font-size: 18px; width: 60%; float: left}
  #product #caption_slider { padding: 10% 8% 0; margin-top: 10%; }
  #product #caption_slider .slick-slider {width: 100%}
  #product .fixed, .top-background{height: auto; padding-bottom: 20%}
 


  .top-middle-background {background-size: 95%; margin-top: -35%} 

  #footer {padding: 20px 0px; margin: 0;}
  #footer p {margin: 0;}
  #footer .sponsor{margin-top: 0px; padding-left: 0%; padding-right: 0%;}

  #extra .w-col-3 { float: left; width: 50% }

  #tile-cta-3 {float: right; }

  #territory .text-left-top, #territory .text-right-top  {margin:0%; padding: 0 5%}
  #territory .text-left-top p, #territory .text-right-top p {margin-top:0%; text-align: left; font-size: 18px; width: 60%; float: left}
  #territory .fixed {height: 300px}
  #territory .top img {width: 60%}
  #territory .ma .w-col-6 {padding-top: 50%}
  #territory .pi .w-col-6 {padding-bottom: 50%}
  #territory .pi .middle p {margin-top: 5%;}

  /*#territory .def-height .middle {width: 100%; margin-left: 0; left: 0; height: auto}
  #territory .def-height .middle p{padding: 4% 10%; width: 90%}
  #territory .def-height .w-col-6:last-child {display: none}
  #territory .def-height .pisticci {background-color: #c51026; background-image: none; bottom:0;}
  #territory .def-height .matera {background-color: #1e0c0a; background-image: none; height: 100%; bottom:0;}
  #territory .ma {height: 100%}*/

  #homepage #homepage_slider .banner_lucano .tile-banner-1-slider{display:table-cell; height:100%;}
  #homepage_slider .tile-banner-1-slider .text{ padding: 5% 0 5%}

  #form .w-col-1 p {font-size: 11px}
}


@media   (max-width: 560px){
  #menu #lang-switch{position: absolute;top:14px;right:0px}
  .sp-slideshow {height: 235px;}
  .top-background {display: none}

  .def-height .w-col-5 {display: none}
  .def-height .w-col-7 {width: 100%}
  #contact .def-height .w-col-5 {width: 100%}
  #contact .def-height .w-col-7 {display: none}
  #form .w-col-1  {min-height: 150px}

    #communication .img-grid-4 { width: 100%; }

 /* #product{margin-top: -120px; padding-top: 120px}*/

  #territory .top img {margin: auto -20% auto 0;width: 80%;}

  #cover-1 {width: 100%; overflow:hidden;}
  #cover-2 {width: 100%; overflow:hidden;}
  #cover-2 .container{margin: 0}
  #cover-1 img {width: 100%; max-width: 100%; margin-left: 0%}
  #homepage #homepage_slider .banner_lucano .tile-banner-1-slider{display:table-cell; height:100%;}
  #homepage_slider .banner_lucano-anniversario .tile-banner-1-slider .text{ padding: 5% 0 5%}
  #homepage_slider  .tile-banner-1-slider .text{ padding: 5% 0 5%}

  #form .section-icons img{width: 100%}

  #cover-1 {overflow-y:visible; overflow: visible;} /* show the cover on mobile */
}

@media (max-width: 479px) {

  #mixology .icon-container .icon {display:none;}

  .banner_lucano .tile-banner-1 .text, .banner_lucano .tile-banner-1-slider .text {position: relative; padding-bottom: 10%}
  .banner_lucano-anniversario .tile-banner-1 .text, .banner_lucano-anniversario .tile-banner-1-slider .text {position: relative; padding-bottom: 10%}
  
  .fixed-header .w-col-3 {width: 90%}
  .logo {left: 0%}
  .slidersection {padding-top: 0px;}
  .w-col {text-align: center;}

  .middle {width: 90%;}
  .img-grid-2 {padding-top:100%; width: 100%; }

  .top-middle-background {background-size: 100%; margin-top: -50%} 
  #product #recipes_cta .text .position-container .img-responsive {width: 50px}


  #footer .sponsor{margin-top: 0px; padding-left: 5%; padding-right: 5%;}

  #extra .w-col-3 { float: left; width: 100% }

  #product .tile-banner-1 img{ display: none;}
  #product .tile-banner-2 {display: none}
  #product .tile-banner-3 {display: none}

  #product .fixed .prizes {left: 0%}
  #product .amaro-lucano img {margin: auto auto auto 0%; width: 150%;}
  #product .amaro-lucano-anniversario img {margin: auto auto auto 0%; width: 150%;}


  
  #territory .top img {margin: auto -30% auto 0;width: 100%;}
  #territory .amaro-lucano img {margin: auto auto auto -20%; width: 200%;}
  #territory .ma .w-col-6 {padding-top: 100%}
  #form {background-image: none}
  #form .w-col-1  {min-height: 160px}

  #menu { width:100%; }
  #menu .navbar { width:100%; }
  #menu.close { right:-100%;}
  .container .wrap .w-col-9 p span { font-size: 40px; line-height: 50px; }
  .container .wrap .w-col-9 p { font-size: 20px; line-height: 25px}
  #family span.mini { font-size: 25px; line-height: 30px}

  #recipe .container .w-col-9 {width: 90%}
  #recipe .container .w-col-9 p{width: 100%; font-size: 16px; line-height: 30px}
  #recipe .container .w-col-9 p span {font-size: 30px; line-height: 30px}
  #recipe .custom-grid .container .w-col-9 p {padding: 4% 8%;}
  #recipe .custom-grid .container .w-col-9 p span {font-size: 20px; line-height: 35px}
  


}

@media screen and (max-width: 320px){
  .sp-slideshow { height: 158px; }

}



/* +++++ GRID RESPONSIVENESS +++++ */

/* stack in 4,3,2,1 elements per row */
@media (min-width: 1600px) {
  .img-grid-4 {
    width: 25% !important; }

  #recipe .img-grid-4 {
    padding-top:25%;
  }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .img-grid-4 {
    width: 33.333333333%; }
  #recipe .img-grid-4 {
    padding-top:33.333333333%;
  }
  #news .img-grid-4 {
    width: 25%; }

  #communication .img-grid-4 {
    width: 25%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .img-grid-4 {
    width: 50%; }
  #recipe .img-grid-4 {
    padding-top:50%;
  }

  #news .img-grid-4 {
    width: 33.333333333%; }
  #communication .img-grid-4 {
    width: 33.333333333%; }
}

@media (max-width: 767px) {
  .img-grid-4 {
    width: 100%; }
  #recipe .img-grid-4 {
    padding-top:100%;
  }
  #news .img-grid-4 {
    width: 50%; }
  #communication .img-grid-4 {
    width: 50%; }
}



/*@media (max-width: 1199px) {
  #product .banner_lucano .img-grid-lucano, #product .banner_lucano-anniversario .img-grid-lucano {
    width: 100%}
  #product .banner_lucano .tile-banner-1 .text, #product .banner_lucano-anniversario .tile-banner-1 .text {
    margin-top: 0 !important;
  }
  #product .tile-banner-2, .tile-banner-3 {
    width: 50% !important; }
}*/


/* stack in 3,1 elements per row */
@media (min-width: 768px) {
  #product .banner_lucano .img-grid-3, #product .banner_lucano-anniversario .img-grid-3 {
    width: 33.333333333%; }
  #cocktails .img-grid-3 {
    padding-top:25%;/* half to have rectangular props */
  }

}

@media (min-width: 1280px) {
  .grid-item{width:16.666666667%;padding-top:16.666666667%;float:left}
  .grid-item-width-2{width:33.333333333%;padding-top:33.333333333%;float:left}
  .grid-item-no-masonry{position:absolute;top:0;bottom:50%;right:0;left:50%}
}

/* stack in 4,2,1 elements per row */
@media (min-width: 1400px) {
  .img-grid-2 { padding-top:25%; width: 25% !important; }

}
@media (min-width: 768px) and (max-width: 1399px) {
  #tile-cta-4 {
    float: left; } 
}

.homepage-grid-container a {background-position: center top}