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

/* ============================
	GENERALI
   ============================ */

:root {
	--c1: white;
	--c2: #281c18;
	--c3: black;
    --c4: #84263c;
    --font: "PT Sans Narrow";
    --wNormal: 400;
    --wBold: 700;
}

body {
	font-family: var(--font), sans-serif;
	//font-weight: var(--wNormal);
	font-style: normal;
	font-size: 18px;
	color: var(--c2);
	background: var(--c3);
}

.letter-space {
    letter-spacing: 8px;
}

.glass {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.sfondo {
    background: url('../img/sfondo.jpg');
    background-size: 1600px;
    background-repeat: repeat;
}

.wNormal {
	font-weight: var(--wNormal);
}

.shadow {
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.wBold {
	font-weight: var(--wBold);
}

.c4 {
	color: var(--c4);
}

.c2 {
	color: var(--c2);
}

h1, h2, h3, h4, p, a, b {
	font-family: var(--font), sans-serif;
	font-weight: var(--wBold);
	font-style: normal;
	color: var(--c2);
}

p {
  	font-weight: var(--wNormal);
}

a {
  	text-decoration: underline;
}

a:hover, a:focus, a:active {
  	color: var(--c2);
}

.button {
	color: var(--c4);
	background: transparent;
	border: 2px solid var(--c4);
	font-family: var(--font), sans-serif;
	font-weight: var(--wBold);
	font-size: 1.8rem;
	padding: .5rem 2.5rem;
	width: max-content;
	text-decoration: none;
    border-radius: 10px;
}

.button:hover {
	color: var(--c1);
	background: var(--c4);
	border: 2px solid transparent;
}

#ocr.button,
.button.partecipa {
	font-size: 1.3rem;
}

.list {
	margin-bottom: 1rem;
	padding-left: 1rem;
}

.no-list-style {
	list-style-type: none;
	padding-left: 0px;
}

.nascosto {
	height: 0px;
	overflow: hidden !important;
}

.skip-to-main-content-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background-color: black;
	color: white !important;
	opacity: 0;
}

.skip-to-main-content-link:focus {
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
}

.ink {
	background: url('../img/banner_stain.png');
	background-size: auto;
	background-repeat: repeat-x;
	background-position: bottom;
}

.py-6 {
	padding-top: 7rem;
	padding-bottom: 10rem;
}

img[src="assets/img/glass.png"] {
	max-height: 7rem;
	width: auto;
}

.icon-text {
	font-size: 7rem;
}

/* ============================
	HOME
   ============================ */

.glass.wine {
    background: rgba(184, 78, 104, 0.2);
}

.left .carta {
    left: -0.5rem;
    top: 2rem;
}

.left .banner {
    right: -0.5rem;
    bottom: 0rem;
}

.right .carta {
	right: -0.5rem;
	top: 2rem;
}

.right .banner {
	left: -0.5rem;
	bottom: 0rem;
}

@media (max-width: 991px) {
    .left .carta {
        left: 1rem;
        top: -0.5rem;
    }

    .left .banner {
        right: 1rem;
        bottom: -0.5rem;
    }

	.right .carta {
		right: 1rem;
		top: -0.5rem;
	}

	.right .banner {
		left: 1rem;
		bottom: -0.5rem;
	}

	.button.partecipa {
		font-size: 1rem;
		padding: .5rem 1.5rem;
	}
}

.right .bw {
    filter: grayscale(1);
	transition: filter 0.5s ease-in-out;
	&:hover {
		filter: grayscale(0);
	}
}

.right .glass {
	background: rgba(150, 150, 150, 0.2);
	transition: background 0.5s ease-in-out;
	&:hover {
		background: rgba(184, 78, 104, 0.2);
	}
}

/* ============================
	MENU
   ============================ */

#menu {
	background-color: transparent;
}

#menu .container-fluid {
	background-color: transparent;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#logo {
	max-height: 55px;
	width: auto;
}

#attiva_menu {
	max-width: 30px;
	margin:10px 25px;
	cursor: pointer;
}

.bi-list {
  	font-size: 3rem;
  	color: var(--c1);
}

#menu_list li {
	list-style-type: none;
	/*float: left;*/
	padding-left: 2%;
	padding-right: 2%;
}

#menu_list li a {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 5px 10px;
	color: var(--c1);
	font-family: var(--font), sans-serif;
	font-weight: var(--wNormal);
	font-size: 22px;
	text-transform: none;
    border-bottom: 2px solid transparent;
}

@media (max-width: 991px) {
	#menu_list li {
		float: none;
	}
	#menu_list li a {
		text-align: right;
    	font-size: 15px;
	}
}

@media (max-width: 1199px) {

}

@media (max-width:991px) {
	#menu_list {
		margin-left: 0px;
	}
}

#menu_list li a:hover, #menu_list li a.active {
	text-decoration: none !important;
	font-family: var(--font), sans-serif;
	font-weight: var(--wBold);
	color: var(--c1);
    border-bottom: 2px solid white;
}

li.d-lg-inline-block {
	font-size: 1.8rem;
	color: var(--c1);
}

/* ============================
	FORM
   ============================ */

#errore,
#errore_ocr {
	color: #ac182d;
	font-weight: var(--wBold);
	text-align: center;
	font-size: 24px;
}

label, input, select {
  	color: var(--c2);
	font-size: 1.2rem;
}

p.col-1 {
	width: 1%;
}

.form-group {
	margin-bottom: 15px;
}

.bi-info-circle-fill {
	color: var(--c2);
	-webkit-text-stroke: 1px var(--c1);
}

.bi-info-circle-fill:hover {
	color: var(--c1);
	-webkit-text-stroke: 1px var(--c2);
}

/* ============================
	FOOTER
   ============================ */

footer {
	background: var(--c3);
}

footer p {
	color: var(--c1);
	font-family: var(--font), sans-serif;
	font-weight: var(--wNormal);
	font-style: normal;
	text-align: center;
}

footer b, footer a {
	color: var(--c1);
}

footer p a {
	color: var(--c1);
	text-decoration: underline;
	font-weight: var(--wBold);
}

footer a:hover,
footer a:active,
footer a:focus {
	color: var(--c4);
}

.social {
	fill: var(--c1);
	stroke: var(--c1);
	width: 25px;
	height: 25px;
}

.social:hover,
.social:active,
.social:focus {
	fill: var(--c4);
	stroke: var(--c1);
}

.social-link {
	text-decoration: none !important;
}

img[src="assets/img/logo-rosso.png"] {
	max-width: 250px;
}

@media(max-width:576px) {
	.mail_info {
		word-break: break-all;
	}
}

/* ============================
	COOKIE
   ============================ */

#cookie-policy-content > h3, #privacy-cookie-content > h3 {
	font-size: 3rem;
}

#cookie-bar {
  padding: 15px;
  background: #004289;
  color: #fff;
  font-family: 'Plus Jakarta Sans';
  z-index: 1040;
  position: fixed;
  bottom: 0px;
  width: 100%;
	font-size: 0.8em;
}

#carouselExampleIndicators {
    position: relative;
      overflow: hidden;
      /* serve per tagliare la lama correttamente */
}

#carouselExampleIndicators::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  /* LARGO IN ALTO → STRETTO IN BASSO */
  clip-path: polygon(0 0,
      /* alto sinistra */
      60% 0,
      /* molto largo in alto */
      45% 100%,
      /* più stretto in basso */
      0 100%
      /* basso sinistra */
    );

  /* fade morbido verso destra */
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.85) 40%,
      rgba(255, 255, 255, 0.45) 65%,
      rgba(255, 255, 255, 0.00) 100%);
}

/* Il contenuto (immagini) deve stare sotto la lama */
#carouselExampleIndicators .carousel-inner img {
  position: relative;
  z-index: 1;
}

.carousel-indicators li {
	box-sizing: content-box;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	width: 25px;
	height: 0px;
	margin-right: 3px;
	margin-left: 3px;
	text-indent: -999px;
	cursor: pointer;
	background-color: #FFF;
	background-clip: border-box;
	border-radius: 14px;
	opacity: 1;
	transition: opacity 0.6s ease;
	/* border-top: 5px solid transparent; */
	border-bottom: 6px solid transparent;
}

.carousel-indicators .active {
	background-color: #6e8898;
	opacity: 1;
}

.carousel-indicators li::marker {
	color: transparent;
}

/* Mobile: pannello più semplice e centrato */
@media (max-width: 768px) {
  #carouselExampleIndicators::before {
    clip-path: none;
    background: rgba(255, 255, 255, 0.9);
  }
}

.carousel-inner {
    margin-top: 0;
}

.carousel {
    margin-top: -5%;
    z-index: -1;
}

@media (max-width: 768px) {
	.carousel-inner {
    	margin-top: 0;
	}
	
	.carousel {
    	margin-top: -15%;
    	z-index: -1;
	    min-height: 350px;
		background-color: #d1d1d1;
	}
	
	.carousel-indicators, .carousel-inner {
	  display: none;
	}
}

@media (max-width: 575px) {
	.carousel {
	    min-height: 300px;
	}
}

@media (max-width: 450px) {
	.carousel {
	    min-height: 220px;
	}
}
@media (max-width: 350px) {
	.carousel {
	    min-height: 190px;
		margin-top: -20%;
	}
}