@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');

@font-face {

  font-family: "Optima";

  src: url("font/Optima.ttc");

}

@font-face {

  font-family: "Rockwell";

  src: url("font/Rockwell.ttc");

}

@font-face {

  font-family: "CalibriCustom";

  src: url("font/calibri.ttf");

}





/*VARIABLES*/

:root {

  --sidebar-width: 400px;

  --sidebar-header-font :40px;

  --sidebar-menu-font: 24px;

  --sidebar-sub-menu-font:20px;

  --sidebar-sub-menu-points:10px;

}

@media only screen and (max-width: 425px) {/* only for MOBLIE L and smaller screen*/

  :root {

    --sidebar-width: 250px;

    --sidebar-header-font :25px;

    --sidebar-menu-font: 20px;

    --sidebar-sub-menu-font:16px;

    --sidebar-sub-menu-points:7px;

  }

}



/*Sidebar*/

.wrapper {

  display: block;

}



#sidebar {

  min-width: var(--sidebar-width);

  max-width: var(--sidebar-width);

  height: 100vh;

  position: fixed;

  top: 0;

  right: calc((-1) *var(--sidebar-width));

  transition: all 0.3s;

  /* top layer */

  z-index: 9999;

  background-color: rgba(9, 161, 178,0.7);

}



.overlay {

  display: none;

  position: fixed;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.7);

  z-index: 1100;

  opacity: 0;

  transition: all 0.5s ease-in-out;

}



#sidebar.active {

  right: 0;

}



/* display .overlay when it has the .active class */

.overlay.active {

  display: block;

  opacity: 1;

}



#dismiss {

  width: 35px;

  height: 35px;

  line-height: 35px;

  text-align: center;

  background: rgb(9, 161, 178);

  position: absolute;

  top: 10px;

  left: 10px;

  cursor: pointer;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;

  border-radius: 25%;

}



#sidebar .sidebar-header {

  text-align: center;

  font-weight: bolder;

  font-family: 'Rockwell';

  color: white;

  font-size: var(--sidebar-header-font);

  padding: 20px;

  padding-left: 55px;

  width:100%;

}



#sidebar ul div.dati{/*FOOTER*/

  position: absolute;

  width: 100%;

  text-align: center;

  bottom: 0px;

  color: #fff !important;

}



#sidebar ul li .sidebar-link {/*MENU ELEMENT*/

  font-size: var(--sidebar-menu-font);

  padding: 10px;

  display: block;

}

#sidebar ul li .sidebar-link #collapser_menu {/*MENU DROPDOWN ICON*/

  position: absolute;

  right:10px;

  margin-top: 5px;

}

#sidebar ul.sub li .sidebar-link {/* SUB MENU ELEMENT*/

  font-size: var(--sidebar-sub-menu-font);

  padding: 3px;

  display: block;

  align-items: center;

}

#sidebar ul.sub li .sidebar-link i {/*ELENCO PUNTATO*/

  font-size: var(--sidebar-sub-menu-points);

  padding: 3px;

  padding-left: var(--sidebar-menu-font); /*SAME PADDING AS PARENT MENU FONT*/

  padding-right: 10px; /*SAME PADDING AS PARENT MENU FONT*/

}

#sidebar ul li .sidebar-link:hover {/* ELEMENT HOVER*/

  color: rgb(9, 161, 178);

  background: #fff;

}

#content { /*PAGE CONTENT*/

  width: 100%;

  min-height: 100vh;

  transition: all 0.3s;

  position: absolute;

  top: 0;

  right: 0;

}

#min-content {

  max-width: 1100px;

  margin: auto;

}

/*================*/

.header-logo{

  width:50px;

  height:50px;

}

.header-brand{

  width:125px;

  height:50px;

}



.whatsapp{

  color:white;

  background-color: #25d366;

  font-size: 5rem;

}

.whatsapp-text{

  font-weight: bolder;

  font-family: 'Rockwell';

  font-size:24px;

  letter-spacing: 2px;

  color:white;

}



.informazioni{

  width:50%;

}



.bottiglia{

  width:100%;

}



.bottiglia-mobile{

  width:40%;

}



.carousel-control-next-icon,.carousel-control-prev-icon {

  filter: invert(1);

}

/* Indicators style */

#slide_prodotti_mobile .carousel-indicators li {

  justify-content:flex-start;

  border-radius: 100%;

  opacity:1;

  width: 20px;

  height: 20px;

}

#slide_prodotti_mobile .carousel-indicators .active{

  width: 30px;

  height: 30px;

}

/* Indicators images style */

#slide_prodotti_mobile .carousel-indicators img {

  float: left;

  width: 20px;

  height:auto;

}

/* Indicators active image style */

#slide_prodotti_mobile .carousel-indicators .active img {

  width: 30px;

  height:auto;

}

#slide_prodotti_mobile .indicators-container{

  height:50px;

}

.text-stile-birra{

  color: rgb(160,160,160)!important;

  font-size:18px;

}



.text-color-magnolta{

  color: rgb(160, 132, 69)!important;

}

.text-color-palabione{

  color: rgb(130, 187, 41)!important;

}

.text-color-baradello{

  color:rgb(255, 107, 14)!important;

}

.text-color-maipora{

  color: rgb(9, 162, 190)!important;

}

.text-color-porter{

  color: rgb(51, 20, 25)!important;

}

.text-color-torena{

  color: rgb(243, 191, 20)!important;

}

.text-color-winter{

  color: #fffff0!important;

  text-shadow: 1px 0 0 #000000, -1px 0 0 #000000, 0 1px 0 #000000, 0 -1px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;

}

.text-color-magnolta-invertito{

  align-items: center!important;

  vertical-align: middle!important;

  background-color: rgb(160, 132, 69)!important;

  color: white!important;

}

.text-color-palabione-invertito{

  align-items: center!important;

  vertical-align: middle!important;

  background-color: rgb(130, 187, 41)!important;

  color: white!important;

}

.text-color-baradello-invertito{

  align-items: center!important;

  vertical-align: middle!important;

  background-color:rgb(255, 107, 14)!important;

  color: white!important;

}

.text-color-maipora-invertito{

  align-items: center!important;

  vertical-align: middle!important;

  background-color: rgb(9, 162, 190)!important;

  color: white!important;

}

.text-color-porter-invertito{

  align-items: center!important;

  vertical-align: middle!important;

  background-color: rgb(51, 20, 25)!important;

  color: white!important;

}

.text-color-torena-invertito{

  align-items: center!important;

  vertical-align: middle!important;

  background-color: rgb(243, 191, 20)!important;

  color: white!important;

}

.titolo{

  font-weight: bolder;

  font-family: 'Rockwell';

  font-size:32px;

  letter-spacing: 5px;

  color: rgb(9, 161, 178);

}



.sottotitolo{

  font-weight: normal;

  font-family: 'Optima';

  color: rgb(9, 161, 178);

}



.descrizione-prodotto{

  font-size: 15px;

  font-weight: 400;

  font-family: 'CalibriCustom';

}



p{

  font-size: 18px;

  font-weight: 500;

  font-family: 'CalibriCustom';

  text-align: justify!important;

}



.navIcon{

  width:40px;

}



.card-image{

  height:100px;

  width:100px;

}



.custom-caption{

  background-color: rgba(0,0,0,0.4);

  width: 100%;

  left:0px;

  bottom: 0px;

}



.footer-custom{

  background-color: rgb(9, 161, 178);

  font-size: 20px;

  font-weight: bold;

}



.footer-custom a, .footer-custom a:hover, .footer-custom a:visited,.footer-custom a:link{

  color:white;

  text-decoration: none;

}



.components a,.components a:hover,.components a:visited,.components a:link{

  color:white;

  text-decoration: none;

}



.compresso{

  background-image: none;

  background-color: rgb(9, 161, 178);

  background-size: 100%;

  background-repeat: no-repeat;

}



.disteso{

  background-image: url("min/header-min.jpg");

  background-size: 100%;

  background-repeat: no-repeat;

}





#navBrand{

  -moz-transition: opacity .5s;

  -ms-transition: opacity .5s;

  -o-transition: opacity .5s;

  -webkit-transition: opacity .5s;

  transition: opacity .5s;

}



.btn-circle {

  width: 50px;

  height: 50px;

  border-radius: 25px;

}



.info{

  line-height: 1;

}



.compresso #navContent{

  align-items: center!important;

}

.logo-partner {

  width:300px;

}

.logo-partner img {

  filter: invert(40%);

}



.card-valori {

  width: 300px;

  margin: 20px;

  text-align: center;

}

.card-container {

  display: flex;

  justify-content: space-evenly;

  align-items: center;

  flex-wrap: wrap;

  flex-direction: row;

  width: 100%;

}

.container-cross-1, .container-cross-2 {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  margin: 30px auto 30px auto;

 }

.container-cross-1 div, .container-cross-2 div{

  max-width: 400px;

}

@media only screen and (max-width: 900px) {

  .container-cross-1 div, .container-cross-2 div{

    text-align: center;

    max-width: 100%;

  }

  .container-cross-1{

    flex-direction: column-reverse!important;

  }

}

/*PRODOTTI*/

.box-prodotto{

  width:300px;

  height:533px;

  margin-bottom: 1rem!important;

  margin-top: 1rem!important;

}

.nome-birra{

  font-weight: bolder;

  font-family: 'Rockwell';

}

.box-prodotto-dettaglio p{

  margin-bottom: 0px;

  font-size: 12px!important;

  line-height: normal;

}

.text-sottottitolo-birra{

  font-weight: bold;

  margin-bottom: 15px!important;

  margin-top: 5px;

}

.format-icon{

  width:30px;

  height:30px;

  display: inline;

}

.prezzi p{

  margin: 0px;

  font-size: 14px;

}

.prezzi p.prezzo{

  font-size: 16px;

}

.aggiungi{

  font-size: 16px;

  font-family: 'Rockwell';

  line-height: 1;

  height: fit-content;

  margin-bottom: 15px;

}

.loghi-aprica{

  width:100%;

}

.simboli-birra{

  width:40px;

  position:absolute;

  top:0px;

  right:0px;

}

#container-birre, #container-gin {

  max-width: 1000px;

  margin: auto;

}

.pop-up-card{

  left: 50%;

  top:50%;

  transform: translate(-50%, -50%);

  z-index: 10000;

  width:95%;

  max-width: 600px;

  display: none;

}

.popover-pwlost{

  cursor: pointer;

}

.form-check-label{

  font-size: .8rem;

  color:unset;

}

.was-validated .form-control:valid,.was-validated .form-control:invalid, .form-control.is-valid, .form-control.is-invalid{

  background-image:none!important;

}

.was-validated .form-control:valid~i, .form-control.is-valid~i{

  color: #198754!important;

}

.was-validated .form-control:invalid~i, .form-control.is-invalid~i{

  color: #dc3545!important;

}

.limited-edition{

    padding: 4px 8px;

    font-size: 12px;

    font-weight: bold;

    color: white;

    background-color: #d32f2f; /* Rosso acceso per catturare l'attenzione */

    border-radius: 12px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border: none;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    line-height: 1;    

    text-align: center;

    margin: 10px 40px;

}

@media only screen and (max-width: 425px) {/* only for MOBLIE L and smaller screen*/



  .disteso{

    background-image: url("min/header-mobile-min.jpg");

    background-size: 100%;

    background-repeat: no-repeat;

  }



}



@media only screen and (max-width: 425px) {/* only for smaller screen*/

  .titolo-cucina{

    font-size: 28px;

    letter-spacing: normal;

  }

}



@media only screen and (min-width: 768px) {/* only for bigger screen*/

  .text-button-menu{

    font-size: 28px;

    font-weight: bold;

  }

  .box-prodotto{

    width:400px;

    height:711px;

  }

  .nome-birra{

    font-size: 30px;

  }

  .box-prodotto-dettaglio.list-group-item p{

    margin-bottom: 0px;

    font-size: 14px!important;

    line-height: normal;

  }

  .box-prodotto-dettaglio.list-group-item{

    margin-bottom: 1.5rem!important;

  }

  .box-prodotto-dettaglio  p{

    font-size: 17px!important;

  }

  .text-sottottitolo-birra{

    font-size:16px;

  }

  .format-icon{

    width:35px;

    height:35px;

  }

  .prezzi p{

    font-size: 17px;

  }

  .prezzi p.prezzo{

    font-size: 20px;

  }

  .aggiungi{

    font-size: 20px;

    margin-bottom: 12px;

  }

  .simboli-birra{

    width:50px;

  }

}



@media only screen and (max-width: 375px) {/* only for smaller screen*/

  .btn-circle{

    width:40px;

    height:40px;

  }

  .header-logo{

    width:40px;

    height:40px;

  }

  .header-brand{

    width:100px;

    height:40px;

  }

}



@media only screen and (max-width: 992px) {/* only for smaller screen*/

  .footer-custom-text{

    font-size: 15px;

  }

  p{

    line-height: 1.1;

    font-size: 16px;

    font-weight: 400;

  }

  .info{

    font-size: 12px;

    font-weight: 400;

  }

  .informazioni{

    width:100%;

  }

}

@media only screen and (max-width: 1024px) {/* only for smaller screen*/

  .list-group-item{

    padding-left: 0;

    padding-right: 0;

    line-height: 1;

  }

  .text-color-palabione{

    letter-spacing: 2px;

  }

  .text-color-magnolta{

    letter-spacing: 1px;

  }

  .text-color-baradello{

    letter-spacing: 1px;

  }

  .text-color-maipora{

    letter-spacing: 2px;

  }

  h3.text-color-palabione{

    letter-spacing: 5px;

    margin-bottom: 0px;

    text-align: center;

  }

  h3.text-color-magnolta{

    letter-spacing: 5px;

    margin-bottom: 0px;

    text-align: center;

  }

  h3.text-color-baradello{

    letter-spacing: 5px;

    margin-bottom: 0px;

    text-align: center;

  }

  h3.text-color-maipora{

    letter-spacing: 5px;

    margin-bottom: 0px;

    text-align: center;

  }

}



@media only screen and (max-width: 768px) and (min-width: 426px){/* only for TABLET and smaller till MOBILE L screen*/

  .disteso{

    background-image: url("min/header-tablet-min.jpg");

    background-size: 100%;

    background-repeat: no-repeat;

  }

}