/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
/*@font-face {
  font-family: 'Spirax';
  font-style: normal;
  font-weight: 400;
  src: local('Spirax-Regular'), url(Spirax/Spirax-Regular.ttf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/
body {
  padding-top: 3rem;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  font-family: 'Spirax', cursive;
  color: #5a5a5a;
/*  background-image: url("../img/grapes-522008_1920.jpg");
  background-repeat: no-repeat-x;*/
/*  background-size: contain;*/
/*	background-color: rgba(131,46,57,0.3);*/
	background: linear-gradient(to bottom, #832e39, #FFFFC2);
/*	opacity: 1;*/
	
}
/* latin */
img{
	display: block;
	margin: 0 auto;
}

/* navbar colore*/
.navbar-color, .footer-color{
	background: linear-gradient(to bottom right, #2f1014,#381318, #41171c, #4b1a20, #541d24, #5e2129, #67242d, #702731, #7a2a35, #832e39, #832e39);
/*	background-color: #832e39;*/
}
.navbar-toggler-icon {
	z-index: 2000;
	background-color: #FFFFC2 !important;
}
.navbar-toggler {
	position: relative;
	left: 90%;
	color: #FFFFC2;
	border-color: #FFFFC2;
/*	z-index: 2000;*/
}
.nav-link {
	color: #FFFFC2;
	font-size: 1.5rem;
	margin-left: 1rem;
	margin-right: 1rem;
 }
.first {
	margin-left: 8.3rem;
}
.nav-link:hover {
	background-color: #FFFFC2;
	color: #832e39;
}
.active .nav-link {
	background-color: #FFFFC2;
	color: #832e39;
}
.dropdown-menu {
	background-color: #FFFFC2;
}
.dropdown-item {
	color: #832e39;
    font-size: 1.2rem;
}
.dropdown-item:hover {
	background-color: #832e39;;
	color: #FFFFC2;
}
.logo {
	position: fixed;
	top: 1px;
	left: 12px;
	z-index: 2000;
 }
 .logo-desk{
	display: block;
   }
 .logo-mobil{
	display: none;
  }
 .vite{
	background-image: url("../img/grapes-522008_1920.jpg");
    background-repeat: no-repeat-x;
	margin-left: 0;
	margin-right: 0;
  }
 .btn-primary, .btn-secondary {
    color: #832e39;
    background-color: #FFFFC2;
    border-color: #832e39;
  }
 .btn-primary:hover, .btn-secondary:hover {
    color: #FFFFC2;
    background-color: #832e39;
    border-color: #FFFFC2;
  }
 .featurette-divider{
	margin: 2rem 5rem 5rem 5rem;
	
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}
#rag-social{
	color: #FFFFC2;
	font-size: 3rem;
	text-align: center;
	border-top: 0;
	padding-top: 0;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */
.percamena{
	background-image: url("../img/percamena.png");
	background-repeat: no-repeat;
/*	background-size: 100% 60%;*/
}
.img-mobil{
	display: none;
}
.featurette-heading{
	font-size: 25px;
}
.featurette-image{
	border: 5px solid #832e39;
	border-radius: 20px;*/
/*	border: 10px solid #FFFFC2;*/
    padding: 15px;
/*	-webkit-border-image: url(../img/cornice.png) 30 round;  Safari 3.1-5 */
  /*  -o-border-image: url(../img/cornice.png) 30 round;  Opera 11-12.1 */
 /*   border-image: url(../img/cornice.png) 30 round; */
	}

/* Thin out the marketing headings */
.featurette-heading {
   font-weight: 300;
   line-height: 1;
   letter-spacing: -.05rem;
}
 hr {
	border-top: 1px solid #832e39;
/*	background-color: #832e39 !important;*/
}
.footer{
	width: 100%;
	height: auto;
/*	height: 150px;*/
}
.bord-d{
	border-right: 1px solid #ffffc2;
}
.bord-d ul, .bord-s ul{
	list-style: none;
	padding: 0;
    text-align: center;
}
.bord-d ul a, .bord-s ul a {
	color: #ffffc2;
	font-size: 1rem;
	text-decoration: none;
}
}
.bord-s{
	border-left: 1px solid #ffffc2;
}
@keyframes scalaImmagine {
    from {transform: scale(1,1);}
    to {transform: scale(1.5,1.5);}
}
.bord-s li{
	float: right;
	margin: 10px;
}
#scala img:hover {
	animation-name: scalaImmagine;
	transform: scale(1.5,1.5);
	animation-duration: 1.2s;
}
/* PAGINE VINI E STORIA
-------------------------------------------------- */
.carousel2 {
	height: 250px;
	margin-top: 2rem;
}
.carousel2 .carousel2-item>img {
    width: 100%;
}
.carousel2 .carousel2-item {
    visibility: hidden;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
}
.data a{
	text-decoration: none;
	color: #ffffc2;
}
.data a:hover {
	color: #fff;
}
/*[id=~id-fot-] img {
	width: 100%;
	height: auto;
}*/
.img-st img {
	width: 100%;
	height: auto;
}
.color-text {
	color: #832e39;
	font-size: 1.3rem;
}
.colore-sfondo {
	background-color: #fff;
	border: 2px solid #832e39;
	border-radius: 10px;
}

.color-text h2 {
	margin: 0;
}
#titolo-vr, #titolo-vb, #titolo-st {
	font-size: 3rem;
	text-align: center;
	border-top: 0;
	padding-top: 0;
}
#titolo-vr {
	color: #832e39;
}
#titolo-vb {
	color: #ffffc2;
}
#titolo-st {
	color: #fff;
}
.marg-2{
	margin-top: 2rem;
}
.footer-vini{
	width: 100%;
	height: auto;
/*	height: 150px;*/
	margin-bottom: 0;
}
/* FINE PAGINE VINI E STORIA
-------------------------------------------------- */

/* CANTINA
-------------------------------------------------- */
#cant {
    color: #FFFFC2;
    font-size: 3rem;
    text-align: center;
    border-top: 0;
    padding-top: 20px;
}
.modal-title{
	color: #832e39;
}
img-css {
	height: auto;
}
.img-css img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
	max-height: 208px;
}
.img-css img:hover{
	opacity: 0.5;
	cursor: nw-resize;
}
.img-css div {
	border: 2px solid #000;
	margin-bottom: 10px;
	background-color: #ffffc2;
	padding-top: 20px;
    padding-bottom: 20px;
}
.img-modal img {
	max-width: 800px;
	height: auto;
}
.modal-content {
	width: auto;
	right: 33%;
	background-color: rgba(255,255,255, 0.7);
}

/* FINE CANTINA
-------------------------------------------------- */

/* CONTATTI
-------------------------------------------------- */

.mappa iframe{
	width: 100%;
	height: 400px;
	border: 0;
}

#cont {
    color: #FFFFC2;
    font-size: 3rem;
    text-align: center;
    border-top: 0;
    padding-top: 20px;
}


/* FINE CONTATTI
-------------------------------------------------- */


/* RESPONSIVE CSS
-------------------------------------------------- */
@media all and (max-width: 437px) {
  .first{
	margin-left: 1rem;	
	}
  .logo-desk{
	display: none;
   }
  .logo-mobil{
	display: block;
	}
  .navbar-toggler {
    left: 0%;
	}
  .percamena{
	background-image: url("../img/percamena_v.png");
	background-size: 100% 100%;
	}
  .featurette-heading {
    font-size: 22px;
    text-align: center;
    padding-top: 75px;
  }
  .lead{
	font-size: 20px;
	color: #832e39;
	padding-left: 40px;
	padding-right: 65px;
	padding-bottom: 0px;
	max-width: 630px;
	}
  .featurette-image{
	display: none;
	}
  .img-mobil{
	display: block;
/*	position: relative;*/
	margin: 0 auto 50px auto;
	}
  .bord-d, .bord-s{
	border: 0;
	}
  .img-modal img {
    max-width: 100%;
	}
  .modal-content {
	position: static;
	width: auto;
	z-index: 999999;
    }
}
@media all and (min-width: 438px) and (max-width: 767px) {
  /* Bump up size of carousel content */
/*  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }*/
  .first{
	margin-left: 1rem;	
	}
  .logo-desk{
	display: none;
   }
  .logo-mobil{
	display: block;
	}
	
  .navbar-toggler {
    left: 0%;
	}
  .featurette-heading {
    font-size: 22px;
    text-align: center;
    padding-top: 45px;
  }
  .lead{
	font-size: 20px;
	color: #832e39;
	padding-left: 40px;
	padding-right: 65px;
	padding-bottom: 20px;
	max-width: 630px;
	}
  .percamena{
	background-size: 100% 100%;
   }
  .bord-d, .bord-s{
	border: 0;
   }
  .img-modal img {
    max-width: 100%;
	}
  .modal-content {
	position: static;
	width: auto;
	z-index: 999999;
    }
	
}
@media all and (min-width: 768px) and (max-width: 991px) {
/*
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
*/
 .first {
    margin-left: 7.1rem;
  }
  .nav-link {
    margin-right: 0px;
  }
  .featurette-heading {
    font-size: 22px;
    text-align: center;
    padding-top: 45px;
  }
  .lead{
	font-size: 20px;
	color: #832e39;
	padding-left: 40px;
	padding-right: 65px;
	padding-bottom: 20px;
	max-width: 630px;
	}
  .percamena{
	background-size: 100% 80%;
  }
  .img-modal img {
	width: 700px;
	}
  .modal-content {
	width: auto;
	z-index: 999999;
	right: 22%;
/*	background-color: rgba(255,255,255, 0.7);*/
    }
	
}
@media all and (min-width: 992px) {
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .featurette-heading {
    font-size: 25px;
	padding-top: 50px; 
	text-align: center;
  }
  .lead{
	font-size: 20px;
	color: #832e39;
	padding-left: 55px;
	padding-right: 65px;
	padding-top: 40px;
	max-width: 630px;
	}
  .percamena{
	background-size: 100% 60%;
}
}