@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;800&display=swap');
@font-face {
  font-family: Corsivo;
  src: url(font/corsivo.ttf);
}
/*BOOTSTRAP*/
.container{
	width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	max-width: 1140px;
}
.row{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col-md-3, .col-md-4, .col-md-5, .col-md-7, .col-md-8, .col-md-9{
	position: relative;
    width: 100%;
}
.col-md-3{
	-webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-md-4{
	-webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-md-5{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-md-7{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-md-8{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-md-9{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 72%;
    flex: 0 0 72%;
    max-width: 72%;
}
/*MAIN*/
body{
	font-family: 'Montserrat', sans-serif;
	color:#593a12;
}
img{
	width:100%;
}
/*TYPOGRAPHY*/
h2{
	font-family: Corsivo;
	font-size: 70px;
	margin-bottom:20px;
}
h3{
	margin-bottom: 0px;
	margin-top:5px;
	font-weight:400;
}
h4{
	font-weight:400;
}
h5{
	font-size: 20px;
    margin-bottom: 0px;
	font-weight:400;
}
/*LINGUA*/
.scelta-lingua{
	margin-top: 20px;
	margin-bottom:20px;
	text-align: center;
}
.scelta-lingua a{
	font-size: 20px;
	color:#D2AC7A;
	text-decoration: none;
	margin-right: 20px;
	padding:0 5px 10px 5px;
	border-bottom: 1px solid #D2AC7A;
}
.scelta-lingua a.last{
	border-bottom: 1px solid transparent;
	color:#593a12;
	margin-right: 0px;
}
/*INTESTAZIONE*/
.intestazione{
	margin-top:80px;
	text-align: center;
	margin-bottom: 50px;
}
.logo{
	width:200px;
	margin:0 auto;
}
/*MENU*/
.sezione-menu{
	text-align: center;
    margin-bottom: 50px;
}
.singolo-piatto{
	width: 60%;
    margin: 0 auto;
}
.singolo-piatto.cocktail{
	margin-bottom: 30px !important;
}
.body-extra .singolo-piatto{
	margin-bottom: 10px;
}
.but-vino p{
	margin-top: 5px;
    margin-bottom: 8px;
}
.title-tab{
	position: relative;
    padding: 20px 30px;
    background-color: #593a12;
	margin-bottom: 25px;
	cursor: pointer;
}
.title-tab h3{
	color: #fff;
    margin: 0;
}
.title-tab span{
	position: absolute;
    right: 30px;
    color: #fff;
    font-size: 50px;
    font-weight: 300;
    top: 50%;
    transform: translateY(-50%);
	transition: all 500ms ease;
}
.title-tab.attivo span{
	transform: translateY(-50%) rotate(-45deg);
}
.body-vino h4{
	padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.content-tab{
	text-align: center;
	display: none;
	padding-bottom: 60px;
}
.colonna-filtro{
	padding-right:20px;
	border-right: 1px solid #593a12;
}
/*switch*/
.switch{
	position: absolute;
	top:0;
	left:0;
	z-index: 20;
}
.button-switch{
	width: 150px;
	padding: 20px 20px;
	background-color: #000;
	border-bottom: 3px solid #d9b88e;
}
.button-switch a{
	color:#fff;
	text-transform: uppercase;
	text-decoration: none;
}
/*HOME*/
.content-scelta{
	display: block;
	margin-top: 70px;
}
.box-scelta{
	position: relative;
	text-align: center;
}
.box-scelta h3{
	font-family: Corsivo;
	font-size: 35px;
}
.box-scelta a{
	position: absolute;
	width:100%;
	height: 100%;
	top:0;
	left:0;
	z-index: 3;
}
.box-scelta img{
	width:60%;
}
.filtro-cantina{
	padding: 15px 15px;
	background-color: #eee;
	text-align: left;
	margin-bottom: 7px;
	cursor: pointer;
}
.filtro-cantina:hover{
	opacity: 0.7;
}
.filtro-cantina.attivo{
	background-color: #D2AC7A;
	color: #fff;
}
.singolo-vino{
	position: relative;
	text-align: left;
    padding: 10px 30px;
    border-bottom: 1px dotted;
    margin: 0 0 30px 50px;
}
.info-vino{
	margin-top: 20px;
	display: flex;
}
.info-vino h6{
	margin: 0 8px;
	font-size: 14px;
}
.singolo-vino h5.prezzo{
	position: absolute;
    bottom: 5px;
    right: 0px;
}
/*FOOTER*/
footer{
	margin-top: 80px;
	padding:0 50px;
	text-align: center;
}
.allergeni{
	font-size: 12px;
}
/*FILTRO*/
.filtro{
	position: fixed;
    background-color: rgb(0 0 0 / 95%);
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 300px;
    padding: 50px;
	transform: translateY(100%);
	transition: all 550ms ease;
}
.testa-filtro{
	position: absolute;
    top: -70px;
    background-color: #D2AC7A;
    width: 100%;
    color: #fff;
    font-size: 20px;
    left: 0;
    padding: 25px 0px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}
.box-input{
	position: relative;
	margin-bottom: 20px;
}
.box-input label{
	position: absolute;
    top: 5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    left: 10px;
}
.field{
	width: 100%;
    height: 55px;
    background-color: transparent;
    border: 1px solid #fff;
    color: #d2ac7a;
    padding: 20px 5px 5px 10px;
	box-sizing: border-box;
}
select.field option {
    background-color: #000;
}
.fascia-range{
	padding: 40px 0;
	width: 100%;
    background-color: transparent;
}
/*generated with Input range slider CSS style generator (version 20201227)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
  height: 2px;
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 15px + var(--ratio) * (100% - 15px));
}

input[type=range].styled-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border-radius: 1em;
  background: #D2AC7A;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: calc(max((8px - 1px - 1px) * 0.5,0px) - 15px * 0.5);
  -webkit-appearance: none;
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 0.5em;
  background: #efefef;
  border: 1px solid #b2b2b2;
  box-shadow: none;
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
  background: #D2AC7A;
}

input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
  background: #efefef;
  border-color: #9a9a9a;
}

input[type=range].styled-slider::-webkit-slider-thumb:active {
  background: #D2AC7A;
}

input[type=range].styled-slider:active::-webkit-slider-runnable-track {
  background: #efefef;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#D2AC7A,#D2AC7A) 0/var(--sx) 100% no-repeat, #efefef;
}

input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
  background: linear-gradient(#D2AC7A,#D2AC7A) 0/var(--sx) 100% no-repeat, #efefef;
}

input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
  background: linear-gradient(#D2AC7A,#D2AC7A) 0/var(--sx) 100% no-repeat, #efefef;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 1em;
  background: #D2AC7A;
  border: none;
  box-shadow: 0 0 2px black;
}

input[type=range].styled-slider::-moz-range-track {
  height: max(calc(8px - 1px - 1px),0px);
  border-radius: 0.5em;
  background: #efefef;
  border: 1px solid #b2b2b2;
  box-shadow: none;
}

input[type=range].styled-slider::-moz-range-thumb:hover {
  background: #D2AC7A;
}

input[type=range].styled-slider:hover::-moz-range-track {
  background: #efefef;
  border-color: #9a9a9a;
}

input[type=range].styled-slider::-moz-range-thumb:active {
  background: #D2AC7A;
}

input[type=range].styled-slider:active::-moz-range-track {
  background: #efefef;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#D2AC7A,#D2AC7A) 0/var(--sx) 100% no-repeat, #efefef;
}

input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
  background: linear-gradient(#D2AC7A,#D2AC7A) 0/var(--sx) 100% no-repeat, #efefef;
}

input[type=range].styled-slider.slider-progress:active::-moz-range-track {
  background: linear-gradient(#D2AC7A,#D2AC7A) 0/var(--sx) 100% no-repeat, #efefef;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 15px;
  height: 15px;
  border-radius: 1em;
  background: #D2AC7A;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 8px;
  border-radius: 0.5em;
  background: #efefef;
  border: 1px solid #b2b2b2;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-thumb:hover {
  background: #D2AC7A;
}

input[type=range].styled-slider:hover::-ms-track {
  background: #efefef;
  border-color: #9a9a9a;
}

input[type=range].styled-slider::-ms-thumb:active {
  background: #D2AC7A;
}

input[type=range].styled-slider:active::-ms-track {
  background: #efefef;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  height: max(calc(8px - 1px - 1px),0px);
  border-radius: 0.5em 0 0 0.5em;
  margin: -1px 0 -1px -1px;
  background: #D2AC7A;
  border: 1px solid #b2b2b2;
  border-right-width: 0;
}

input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
  background: #D2AC7A;
  border-color: #9a9a9a;
}

input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
  background: #D2AC7A;
  border-color: #c1c1c1;
}
.bottone-filtro{
	width: 100%;
    padding: 15px 0;
    background-color: #d2ac7a;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
	cursor: pointer;
}
#figlio{
	display: none;
}
.label-prezzo{
	right: 0;
	left: auto !important;
}
.bottone{
	margin-bottom: 30px;
}
.prezzo-frase{
	text-align: center;
}
.prezzo-frase h2{
	font-size: 30px;
	margin-bottom: 40px;
}
.prezzo-frase h3{
	color: #D2AC7A;
    font-weight: 300;
    font-style: italic;
}
/*RESPONSIVE*/
@media screen and (max-width: 1140px) {
	.container{
		max-width: 100%;
		padding-right: 0px;
    	padding-left: 0px;
	}
}
@media screen and (max-width: 767px) {
	.colonna-filtro{
		padding-right: 5px;
	}
	.col-md-9{
		-ms-flex: 0 0 70%;
		flex: 0 0 70%;
		max-width: 70%;	
	}
	.singolo-vino{
		padding: 10px;
		margin: 0 0 30px 10px;
	}
	.info-vino{
		margin-top: 10px;
	}
}
@media screen and (max-width: 500px) {
	.button-switch{
		padding: 10px;
	}
	h2{
		font-size: 50px;
	}
	h3{
		font-size: 15px;
	}
	h4{
		font-size: 20px;
	}
	.singolo-piatto{
		width:100%;
	}
	footer{
		padding: 0 10px;
	}
	footer h4{
		font-size: 16px;
	}
	.col-md-4{
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.box-scelta{
		margin-bottom: 60px;
	}
	.box-scelta h3{
		font-size: 25px;
	}
	.singolo-vino{
	    margin: 0 0 20px 10px;	
	}
	.info-vino{
		padding-bottom: 35px;
		display: block;
	}
	.info-vino h6{
		margin: 0 4px;
		font-size: 9px;
	}
	.singolo-vino h5.prezzo{
		font-size: 15px;
	}
	.filtro-cantina{
		padding: 15px 5px;
		font-size: 10px;
	}
}