@import url('https://fonts.googleapis.com/css?family=Lato:300, 400,700,900&display=swap');

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400&display=swap');


 *{font-family: 'Lato', sans-serif; font-weight: 300,   box-sizing: border-box; }
 
 body{height: 100vh;}


.menucontainer {
  max-width: 1140px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/*--------- animacion
	data-aos="fade-up"
	fade-down
	fade-left
	fade-right
	
	zoom-in
	zoom-out
	slide-up
	
	flip-up
	flip-down
	flip-left
	flip-right
	 ----------*/


.itemani {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}


/*PRELOADING------------ */
#overlayer {
  width:100%;
  height:100%;  
  position:fixed;
  z-index:10000;
  background-color:#fff;
  background-repeat: no-repeat;
  background-size:  auto 100%;
}
.loaderev {
  /* Uncomment this to make it run! */
  /*
     animation: loader 5s linear infinite; 
  */
  
  position: fixed;
  top: calc(50% - 100px);
  left: calc(50% - 10px);
   z-index:10001;
}
@keyframes loader {
  0% { left: -100px }
  100% { left: 110%; }
}
.box {
  width: 80px;
  height: 80px;
  animation: animate .5s linear infinite;
  position: absolute;
   background: red;
  z-index:10001;
  
}
@keyframes animate {
  17% { border-bottom-right-radius: 3px; }
  25% { transform: translateY(9px)  }
  50% { transform: translateY(28px) scale(1,.9) ;
  }
  75% { transform: translateY(9px) }
  100% { transform: translateY(0)
	    }
} 
.shadow { 
  width: 80px;
  height: 5px;
  background: #4f4f4f;
  opacity: .1;
  position: absolute;
  top: 98px;
  left: 0;
  border-radius: 50%;
  animation: shadow .5s linear infinite;
    z-index:10002;
}
@keyframes shadow {
  50% {
    transform: scale(1.2,1);
  }
}



/*-------------------------- */
		/*- TIPOGRAFIA -  */           
/*-------------------------- */

h1, h2, {-webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;}
  
h1, h2, h3, h4, h5, h6 {font-weight: 400; }
h1{letter-spacing: 1px;  text-transform: uppercase; font-weight: 400;	  }
h1 span{font-size: 130%}

span.regis {  font-size: 80%; position: absolute; margin-top: -5px; margin-left: 3px; letter-spacing: 1px;}
span.regis2 {  font-size: 80%; position: absolute; margin-top: -2px; margin-left: 1px; letter-spacing: 1px;}

h1.borders{ border: solid #818080 2px; padding: 3px 16px; width: auto; display:inline-block;}
h1.ofertatxt{ padding: 3px 16px; width: auto; border-radius: 10px; background-color:#4c4c4c; color: #fff;  display:inline-block;}
h1.guiones {text-transform: inherit; }
h1.guiones:after{content: "-"; font-weight: 400}
h1.guiones:before{content: "-"; font-weight: 400}

h2.valor{  display:inline-block; padding: 0px 24px; margin-top: 10px}
h2.valordos { padding-left: 17px; border-left: solid 2px #818080 } 
h2.nomrec{ border-bottom: solid 2px; padding-bottom: 5px; margin-bottom: 20px }
p.spacio{letter-spacing: 1px}
p{ font-weight: 400; font-size: 1.2em; }
.justi{text-align: justify}
h5 li, h4 li{ display: block; list-style: none; margin-top: 10px;  font-weight: 400; }
b, .b{ font-weight: 700}

.spacing{ letter-spacing: 2px}
.licores h1 {letter-spacing: 17px; color: #807f7f; margin-top: 20px; font-weight: 400}
.bco{color: #fff}
.gris{color: #333}
.grisuno{color: #c3bebe}
.grisdos{color: #6B6D6D}
.gristres{color: #4c4c4c} 
.grisnav{color: #505050}
.grislogo{color: #bfbfbf}

a {color: inherit}
a:hover{ text-decoration: none;  color: inherit}

.calen{  border-bottom: solid 1px #818080; border-left: solid 1px #818080; border-right: solid 1px #818080}
.calen h2, .calen h3, .calen h4 {margin: 0px; padding: 0px}
.calen h2 { margin: -7px}
@media (max-width:991px){
	.expe {font-size: 2.5rem;}
	
	}
/*-------------------------- */
		/*- COLORES -  */           
/*-------------------------- */

.bgbco{background: #fff; }
.bggrisuno{background-color: #c3bebe}
.bggrisdos{background-color: #818080}
.bggristres{background-color: #4c4c4c} 
.bggrisnav{background-color: #505050; }
.bggrislogo{background-color: rgba(191,191,191,.9)}

.flgrisuno{fill:#c3bebe}
.flgrisdos{fill:#818080}
.flgristres{fill:#4c4c4c}
.flgriscuat{fill:#393c3f}

.re-img {width: 100%; height: 100%}
/*-------------------------- */
		/*-NAv-*/
/*-------------------------- */

.navbar{ z-index: 100;  }

.navbar a {color: #fff; font-family: 'Roboto Condensed', sans-serif!important; font-weight:400 }
.navbar a:hover{ background: #323232}
.menu {margin: auto}
.logo{margin: 10px; position: relative; z-index: 1}

/*-------------------------- */
   /*-left animation nav-*/
/*-------------------------- */
@media (max-width:991px){
	.chicquito {font-size: 36px!important}
	.navbar-toggler{z-index: 60}
	.menu {
		position: absolute;
		right:0px!important;
		top: -54px;
		z-index: 0px;
		padding: 10px 33px;
		margin: 0px   ;
		right: 0px!important;
		width: calc(100% + 33px);
		height: 0;

 will-change: transform;
  transition: transform 0.2s;
   -webkit-transform: 0.2s;
  transform: translateY(-140%);
  -webkit-transform: translateY(-140%);
	}
	
.collapse{ 
	background: #505050;
	position: absolute;
	right: -17px!important;
		top: -5px;
		z-index: 10000000;
		height: auto;
	
	transform: translateX(0% !important); -webkit-transform: translateX(0%) !important;
	-webkit-transform: translateX(0% !important); -webkit-transform: translateX(0%) !important; }	
}





/*-------------------------- */
	/*-BUTTON HAMBURGER-*/
/*-------------------------- */

.icon-bar {
	width: 22px; 
	height: 2px;
	background-color: #B6B6B6;
	display: block;
	transition: all 0.2s;
	margin-top: 4px;
	
}
 
.navbar-toggler {
  border: none;
  float: right!important;
	position: relative;
	left: 2px;
	top:0px;
  border-radius: 0px;
  background: #505050 !important;
}


.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
 
.navbar-toggler .middle-bar {
  opacity: 0;
}
 
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
 
.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
 
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}
 
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}


/*-------------------------- */
		/*- NAV -*/           /* --  Si no quires que se esconda quita esto --*/
/*-------------------------- */



.mamey{ position:absolute; top: 0px; z-index: 1; width: 322px; height:; left:calc(50% - 161px);  }
.moras{ position:absolute; top: -35px; left:-20px;  z-index: 1; width: 252px;   }
.fresas{ position:absolute; top: -35px; right: -0px; z-index: 1; width: 252px;  }
.bggrisnav{ position: relative; z-index: 2}
.small{ display: none}
.big{ display: block}

.imgofertas{ margin-top: -130px; margin-bottom: -50px}

@media (max-width:991px){
	
	.licores h1 {letter-spacing: 2px; color: #807f7f; margin-top: 20px; font-size: 30px}
.no {
  margin-right: 0;
  margin-left: 0;}
  
.small{ display: block}
.big{ display: none}

.imgofertas{ margin-top: 0px; margin-bottom: -100px}

	}

/*-------------------------- */
		/*- BANNER -  */           
/*-------------------------- */

.banner {
  height: 90vh;
  min-height: 350px;
  background-image: url('../images/bgbanner.png');
  background-size: cover;
  background-position:center bottom;
  background-repeat: no-repeat;
  background-color: #c3bebe
}
.bghome{  background-image: url('../images/bghome.png');  background-size: cover; background-position:center top; }



@media (max-width:991px){
	.banner {
	 height: 15vh;
	 }
	}

/*-------------------------- */
	   /*- DIAGONALES -  */           
/*-------------------------- */
.contacto{ background-image: url("../images/ubicacion.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat}
.empresa{ background-image: url("../images/empresa.jpg")}
.linea{ background-image: url("../images/bg-linea.png"); background-position: center center}
.mision-vision{ background-image: url("../images/mision-vision.png"); background-position: center center; top:-150px; height: 100vh!important; position:absolute; width: 100%; height: 100vh;  background-size: cover !important;  transform: skewY(8deg);}
.oferta{ background-image: url("../images/bgoferta.png"); background-position: center bottom; top:-150px; height: 120vh!important; position:absolute; width: 100%;  background-size: cover !important;  transform: skewY(8deg);}
.valores{ background-image: url("../images/valores.jpg"); background-position: center center; top:-150px; height: 150vh!important; position:absolute; width: 100%;  background-size: cover !important;  transform: skewY(8deg);}
.perita-cautiv {transform: skewY(-8deg);}
section {
	padding: 80px 0px 120px 0px;
  min-height: 250px;
  display: block;
  position: relative;
  margin-bottom: -8px;
}
.section-content {
  position: inherit;
  z-index: 2;
}

.section-mask {
  position: absolute;
  top: -50px;
  bottom: -50px;
  right: 0;
  left: 0;
  z-index: 1;
  background-size: cover !important;
  transform: skewY(-8deg);
  overflow: hidden;
}

.parallax {
	
  background-attachment: fixed !important;
}

.h10{  min-height: 10vh; }
.h20{  min-height: 20vh; }
.h30{  min-height: 30vh; }
.h40{  min-height: 40vh; }
.h50{  min-height: 50vh; }
.h60{  min-height: 60vh; }
.h80{  min-height: 80vh!important; min-height: 80vh}

.mt10{ margin-top: 10vh}
.mt15{ margin-top: 15vh}
.mt20{ margin-top: 20vh}
.mt25{ margin-top: 25vh}
.mt30{ margin-top: 30vh}
.mt35{ margin-top: 35vh}

.blanco-grsiuno{
	background: rgba(255,255,255,0);
background: -moz-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%,#c3bebe 50%,#c3bebe 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,1)), color-stop(50%,#c3bebe), color-stop(100%,#c3bebe));
background: -webkit-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%,#c3bebe 50%,#c3bebe 100%);
background: -o-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%,#c3bebe 50%,#c3bebe 100%);
background: -ms-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%,#c3bebe 50%,#c3bebe 100%);
background: linear-gradient(172deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%,#c3bebe 50%,#c3bebe 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c3bebe', GradientType=1 );
}
.blanco-grisdos{
	background: rgba(255,255,255,1);
background: -moz-linear-gradient(-8deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(50%, rgba(129,128,128,1)), color-stop(100%, rgba(129,128,128,1)));
background: -webkit-linear-gradient(-8deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: -o-linear-gradient(-8deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: -ms-linear-gradient(-8deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: linear-gradient(172deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#818080', GradientType=1 );
}
.blanco-grisdos-dos{
	background: rgba(255,255,255,1);
background: -moz-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255,255,255,1)), color-stop(50%, rgba(129,128,128,1)), color-stop(100%, rgba(129,128,128,1)));
background: -webkit-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: -o-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: -ms-linear-gradient(-8deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
background: linear-gradient(172deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(129,128,128,1) 50%, rgba(129,128,128,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#818080', GradientType=1 );
}


.blanco-gristres{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,#ffffff+60,#4c4c4c+60,#4c4c4c+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #ffffff 0%, #ffffff 60%, #4c4c4c 60%, #4c4c4c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #ffffff 0%,#ffffff 60%,#4c4c4c 60%,#4c4c4c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #ffffff 0%,#ffffff 60%,#4c4c4c 60%,#4c4c4c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4c4c4c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	
}

.grisuno-blanco{
	background:#c3bebe;
background: -moz-linear-gradient(-8deg,#c3bebe 0%,#c3bebe 43%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%,#c3bebe), color-stop(43%,#c3bebe), color-stop(43%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(-8deg,#c3bebe 0%,#c3bebe 43%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(-8deg,#c3bebe 0%,#c3bebe 43%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(-8deg,#c3bebe 0%,#c3bebe 43%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 100%);
background: linear-gradient(172deg,#c3bebe 0%,#c3bebe 43%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3bebe', endColorstr='#ffffff', GradientType=1 );
}
.grisuno-blanco-grisdos{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3bebe+0,c3bebe+46,ffffff+46,ffffff+46,ffffff+88,818080+88 */
background: #c3bebe; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #c3bebe 0%, #c3bebe 43%, #ffffff 43%, #ffffff 74%, #818080 74%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #c3bebe 0%,#c3bebe 43%, #ffffff 43%, #ffffff 74%,#818080 74%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #c3bebe 0%,#c3bebe 43%, #ffffff 43%, #ffffff 74%,#818080 74%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3bebe', endColorstr='#818080',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
}



.grisdos-grisuno{
	background: rgba(129,128,128,1);
background: -moz-linear-gradient(-8deg, rgba(129,128,128,1) 0%, rgba(129,128,128,1) 50%,#c3bebe 50%,#c3bebe 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(129,128,128,1)), color-stop(50%, rgba(129,128,128,1)), color-stop(50%,#c3bebe), color-stop(100%,#c3bebe));
background: -webkit-linear-gradient(-8deg, rgba(129,128,128,1) 0%, rgba(129,128,128,1) 50%,#c3bebe 50%,#c3bebe 100%);
background: -o-linear-gradient(-8deg, rgba(129,128,128,1) 0%, rgba(129,128,128,1) 50%,#c3bebe 50%,#c3bebe 100%);
background: -ms-linear-gradient(-8deg, rgba(129,128,128,1) 0%, rgba(129,128,128,1) 50%,#c3bebe 50%,#c3bebe 100%);
background: linear-gradient(172deg, rgba(129,128,128,1) 0%, rgba(129,128,128,1) 50%,#c3bebe 50%,#c3bebe 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c3bebe', GradientType=1 );
	
}


.grisdos-blanco{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#818080+1,818080+87,ffffff+87,ffffff+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #818080 0%, #818080 70%, #ffffff 70%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #818080 0%,#818080 70%,#ffffff 70%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #818080 0%,#818080 70%,#ffffff 70%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	
}

.gristres-grisdos{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,#4c4c4c+70,#818080+70,#818080+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #4c4c4c 0%, #4c4c4c 70%, #818080 70%, #818080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #4c4c4c 0%,#4c4c4c 70%,#818080 70%,#818080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #4c4c4c 0%,#4c4c4c 70%,#818080 70%,#818080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#818080',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	
}

.blanco-grisuno-blanco{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+01,ffffff+20,818080+20,818080+80,ffffff+80,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #ffffff 0%, #ffffff 20%, #c3bebe 20%, #c3bebe 80%, #ffffff 80%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #ffffff 0%,#ffffff 20%,#c3bebe 20%, #c3bebe 80%,#ffffff 80%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #ffffff 0%,#ffffff 20%,#c3bebe 20%, #c3bebe 80%,#ffffff 80%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.blanco-grisdos-blanco{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+11,818080+11,818080+89,ffffff+89,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #ffffff 0%, #ffffff 11%, #818080 11%, #818080 89%, #ffffff 89%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #ffffff 0%,#ffffff 11%,#818080 11%, #818080 89%,#ffffff 89%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #ffffff 0%,#ffffff 11%,#818080 11%, #818080 89%,#ffffff 89%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.blanco-gristres-blanco{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/ffffff+0,ffffff+433,4c4c4c+33,4c4c4c+73.7,ffffff+73.7,ffffff+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #ffffff 0%, #ffffff 33%, #4c4c4c 33%, #4c4c4c 73.7%, #ffffff 73.7%,  #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #ffffff 0%, #ffffff 33%, #4c4c4c 33%,#4c4c4c 73.7%,#ffffff 73.7%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #ffffff 0%, #ffffff 33%, #4c4c4c 33%,#4c4c4c 73.7%,#ffffff 73.7%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.grisdos-grisuno-grisdos{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#818080+0,818080+210px,c3bebe+210px,c3bebe+83,818080+83,818080+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #818080 0%, #818080 210px, #c3bebe 210px, #c3bebe 83%, #818080 83%, #818080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #818080 0%,#818080 210px, #c3bebe 210px,#c3bebe 83%, #818080 83%, #818080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #818080 0%,#818080 210px,#c3bebe 210px,#c3bebe 83%, #818080 83%, #818080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818080', endColorstr='#818080',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.grisuno-grisdos-grisuno{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3bebe+0,c3bebe+210px,818080+210px,818080+83,c3bebe+83,c3bebe+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #c3bebe 0%, #c3bebe 210px, #818080 210px, #818080 83%, #c3bebe 83%, #c3bebe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #c3bebe 0%,#c3bebe 210px, #818080 210px,#818080 83%, #c3bebe 83%, #c3bebe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #c3bebe 0%,#c3bebe 210px,#818080 210px,#818080 83%, #c3bebe 83%, #c3bebe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818080', endColorstr='#818080',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}


/*-------------------------- */
/*- Floating elements -  */           
/*-------------------------- */

.float img{ width: 100%}
.float{ position: absolute; z-index: 2; }
.multi{ mix-blend-mode: multiply; }
.floatbc{ position: absolute; z-index: 2}
.gright{ right: 0px; top:-60px;  }

/*---homee--*/
	
	.float-right{right: 0px; top: -15px}
	.float-left{left: 0px; }

.floatcampo{margin-top: -100px; margin-left: -25px; }
.zarz{margin-top: -30px; margin-left: -125px; z-index: 1}
.floatcampo img, .zarz img{transform: rotate(-28deg);  mix-blend-mode: multiply; }
.uvas{ margin-top: -550px; }

@media (max-width:991px){
	
	.uvas{ margin-top: -250px; }
	.abajo{ position: absolute; top: 70%!important}
	.foatuno { width:150px; right: 2px}

}	
	
	

/*-------------------------- */
/*- Botones -  */           
/*-------------------------- */
/* Common button styles */
.button {
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: .4em .6em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}
	.borderbco{border-color:  #fff}
	.borderbco:hover{background-color: #fff; color: #4c4c4c; }
	.borderbco:hover::after{color: #4c4c4c; }
	.btngrisdos {border-color: #818080; color: #818080}
	.btngrisdos:hover{ border-color: #fff; color: #fff; background-color:#818080 }
	.btngrisdos:hover::after{color: #fff; }
	


.winonaround{	border-radius: 40px;}
.winonaborde{border: 2px solid;}
	
	
/* Winona */
.button--winona {
	
	overflow: hidden;
	padding: 0;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;

	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}

.button--winona.dos::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 12%;
	left: 0;
	opacity: 0;
	font-size: 1.2em;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.button--winona > span {
	display: block;
}
.button--winona.button--inverted {
	color: #333;
	background: red;
}
.button--winona.button--inverted:after {
	color: red;
}
.button--winona::after,
.button--winona > span {
	padding: .4em .6em;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}


.button--winona:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0%, 0);
	transform: translate3d(0, 0%, 0);
}
.button--winona:hover > span {
	opacity: 0;
	-webkit-transform: translate3d(0, 0%, 0);
	transform: translate3d(0, 0%, 0);
}



/*-------------------------- */
/*- INPUT -  */           
/*-------------------------- */

.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: .8em 0px;
	max-width: ;
	width: calc(100%);
	vertical-align: top;
}

.input__field {
	position: relative;
	display: block;
	float: right;
	width: 100%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	
	font-weight: 400;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
	
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0;
	width: 100%;
	color: #000;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: .8em 0;
	width: 100%;
}



/* Chisato */

.input--chisato {
	padding-top: 1em;
}

.input__field--chisato {
	width: 100%;
	padding: .9em 0.5em;
	background: #fff;
	border: 2px solid;
	color: #000;
	-webkit-transition: border-color 0.25s;
	transition: border-color 0.25s;
	
}

.input__label--chisato {
	width: 100%;
	position: absolute;
	top: -.6em;
	text-align: left;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0, .1em, 0);
	transform: translate3d(0, 1.1em, 0);
}

.input__label-content--chisato {
	padding: 1.1em 1em;
	font-weight: 400;
	color: #0081c2;
	font-size: 19px;
}

.input__label-content--chisato::after {
	content: attr(data-content);
	position: absolute;
	top: -210%;
	left: 0;
	color: #929292;
	font-weight: 800;
}

.input__field--chisato:focus,
.input--filled .input__field--chisato {
	border-color: #929292;
	
}

.input__field--chisato:focus + .input__label--chisato,
.input--filled .input__label--chisato {
	-webkit-animation: anim-chisato-1 0.25s forwards;
	animation: anim-chisato-1 0.25s forwards;
}

.input__field--chisato:focus + .input__label--chisato .input__label-content--chisato,
.input--filled .input__label-content--chisato {
	-webkit-animation: anim-chisato-2 0.25s forwards ease-in;
	animation: anim-chisato-2 0.25s forwards ease-in;
}

@-webkit-keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 225%, 0);
		transform: translate3d(0, 225%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

@keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}



/*-------------------------- */
/*- carousel -  */           
/*-------------------------- */
.owl-carousel .item img { width: 90%; margin: auto  }

.item h1 { font-size: 22px; font-weight: 400; text-transform: inherit}
.item h1:after { content: "®"; font-size: 60%; position: absolute; margin-top: -3px; ; font-weight: 400}

.item h4{ font-size: 28px; font-weight: 600; text-transform: uppercase}

h1.regis {font-size: 23px; font-weight: 400;  text-transform: inherit}
h1.regis:after { content: "®"; font-size: 60%; position: absolute; margin-top: -3px; letter-spacing: 1px; font-weight: 400}


.owl-carousel .item  {   margin: 0px; text-align: center; height: 100%;}

.owl-carousel .nav-btn{
  height: 48px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top:calc(50% - 24px);
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;

}

.owl-carousel .prev-slide{
  background:  url("../images/flecha.png") no-repeat scroll 0 0;
  background-size: cover;
 transform: rotate(180deg);
  left: -33px;
  
}
.owl-carousel .next-slide{
  background: url("../images/flecha.png")  no-repeat scroll -0px 0px;
  right: -33px;
  opacity: .7;
  background-size: cover;
}
.owl-carousel .prev-slide:hover{
 opacity: 1
}
.owl-carousel .next-slide:hover{
opacity: 1
}  

@media (max-width:991px){
.owl-carousel .prev-slide{
  left: 13px;
}
.owl-carousel .next-slide{
  right: 13px;
}


}


/*
* The function calc is working wrong in case calculations in the Firefox
*/

.photobox{
  display: inline-block;
}

.photobox__previewbox{
  position: relative;
  overflow: hidden;
 
}

.photobox__preview{
  display: block;
  max-width: 100%;
}

.photobox__previewbox:before{
  content: "";
}

/* type 18 */

.photobox_type18 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.photobox_type18:hover .photobox__previewbox:before{
  opacity: 1;
}

.photobox_type18 .photobox__label{
  width: 95%;
  text-align: center!important;
  
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, -50%);
  z-index: 2;
}

.photobox_type18:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 4);
}

.photobox_type18 .photobox__preview{
	transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
	transform: scale(1) translate(0, 0);
}

.photobox_type18:hover .photobox__preview{
  transform: scale(1.2) translate(4%, 4%);
}





/*-------------------------- */
		/*-Productos-*/
/*-------------------------- */

.brrhbco{ border-right: solid 2px #ffffff}
.brrhgdos{border-right: solid 2px #6B6D6D }
.brrtguno {border-right: solid 2px #c3bebe }

.brbtgtres {border-bottom: solid 2px #4c4c4c }


.producto{ position: relative; z-index: 1}
.brbtgtres h2{ text-transform: uppercase!important; font-weight: 700}
.circulogdos {   
	border-radius: 50%;	
	width: 400px;
	height: 400px;
    background-color: rgba(48, 48, 48, 0.26);
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 200px);
	z-index: 0;
}
.circuloguno {   
	border-radius: 50%;	
	width: 400px;
	height: 400px;
    background-color: rgba(189, 189, 189, 0.26);
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 200px);
	z-index: 0;
}

@media (max-width:991px){
footer {padding-bottom: 80px}
	.circulogdos {   
	width: 240px;
	height: 240px;
	top: calc(50% - 120px);
	left: calc(50% - 120px);
}

.espacio{ min-height: 60vh}


.grisdos-grisuno-grisdos{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#818080+0,818080+110px,c3bebe+110px,c3bebe+93,818080+93,818080+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #818080 0%, #818080 110px, #c3bebe 110px, #c3bebe 93%, #818080 93%, #818080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #818080 0%,#818080 110px, #c3bebe 110px,#c3bebe 93%, #818080 93%, #818080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #818080 0%,#818080 110px,#c3bebe 110px,#c3bebe 93%, #818080 93%, #818080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818080', endColorstr='#818080',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.grisuno-grisdos-grisuno{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3bebe+0,c3bebe+110px,818080+110px,818080+93,c3bebe+93,c3bebe+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #c3bebe 0%, #c3bebe 110px, #818080 110px, #818080 93%, #c3bebe 93%, #c3bebe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #c3bebe 0%,#c3bebe 110px, #818080 110px,#818080 93%, #c3bebe 93%, #c3bebe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #c3bebe 0%,#c3bebe 110px,#818080 110px,#818080 93%, #c3bebe 93%, #c3bebe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818080', endColorstr='#818080',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}


.blanco-grisdos-blanco{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+1,818080+11,818080+90,ffffff+90,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #ffffff 0%, #ffffff 5%, #818080 5%, #818080 95%, #ffffff 95%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #ffffff 0%,#ffffff 5%,#818080 5%, #818080 95%,#ffffff 95%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #ffffff 0%,#ffffff 5%,#818080 5%, #818080 95%,#ffffff 95%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.blanco-gristres-blanco{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/ffffff+0,ffffff+33,4c4c4c+33,4c4c4c+85,ffffff+85,ffffff+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #ffffff 0%, #ffffff 33%, #4c4c4c 33%, #4c4c4c 85%, #ffffff 85%,  #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #ffffff 0%, #ffffff 33%, #4c4c4c 33%,#4c4c4c 85%,#ffffff 85%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #ffffff 0%, #ffffff 33%, #4c4c4c 33%,#4c4c4c 85%,#ffffff 85%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.blanco-gristres{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,#ffffff+70,#4c4c4c+70,#4c4c4c+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #ffffff 0%, #ffffff 70%, #4c4c4c 70%, #4c4c4c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #ffffff 0%,#ffffff 70%,#4c4c4c 70%,#4c4c4c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #ffffff 0%,#ffffff 70%,#4c4c4c 70%,#4c4c4c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4c4c4c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	
}


.gristres-grisdos{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,#4c4c4c+70,#818080+90,#818080+100 */
background: #818080; /* Old browsers */
background: -moz-linear-gradient(-8deg,  #4c4c4c 0%, #4c4c4c 90%, #818080 90%, #818080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-8deg,  #4c4c4c 0%,#4c4c4c 90%,#818080 90%,#818080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(172deg,  #4c4c4c 0%,#4c4c4c 90%,#818080 90%,#818080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#818080',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	
}

}