@import url('https://fonts.googleapis.com/css?family=Anton|Ubuntu:300,400,700');

body
	{
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
	text-decoration: none!important;
}

a:hover{
	text-decoration: none;
}

.navbar{
	    position: fixed;
    z-index: 10000;
    width: 100%;
}


.text-danger {
    color: #202020!important;
}


img{
	width: 100%;
}
.img100{
	width: 100%
}

.b-radius{
	border-radius: 5px;
}
.relative{
	position: relative;
}
.left-30{
	position: absolute;
	left: -30px;
}

.blanco{
	background-color: #ffffff;
}
.negro{
	background-color: #202020;
}

.bg-2{
	background-color: #b3a47c;
}

.tx-blanco{
	color: #ffffff;
}

.tx-color2{
	color: #b3a47c;
}
.line{
	width: 100%;
	height: 10px;
}

.line-50{
	width: 100%;
	height: 50px;
}


.tipo-1{
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
}
.tipo-1-r{
	font-family: 'Ubuntu', sans-serif;
	font-weight: 600;
}
.tipo-anton{
	font-family: 'Anton', sans-serif;
}

.tipo-tamano-14{
	font-size: 14px;
	line-height: 1.2;
}

.tipo-tamano-100{
	font-size: 90px;
	line-height: 1.2;
}

.tipo-tamano-60{
	font-size: 50px;
	line-height: 1.2;
}

.tipo-tamano-40{
	font-size: 40px;
	line-height: 1.2;
}

.tipo-tamano-30{
	font-size: 30px;
	line-height: 1.2;
}


.texto-nuestra::after{
	content: "  ";
    background: url("../img/line-vertical.png") center center no-repeat;
    color: red;
    position: absolute;
    top: 10px;
    right: 35px;
    width: 100px;
    height: 300px;

}

.texto-contacto::after{
	content: "  ";
    background: url("../img/line-vertical.png") center center no-repeat;
    color: red;
    position: absolute;
    top: -5px;
    right: 35px;
    width: 100px;
    height: 80px;

}


.box .btn-box{
	position: absolute;
	margin: auto; /* Center the item vertically & horizontally */
	height: 70px; /* Set your own height: percents, ems, whatever! */
  	width: 70px; /* Set your own width: percents, ems, whatever! */
	bottom: -35px;
	margin: 0px auto;
	top: auto; left: 0; bottom:-40px; right: -20px; /* Set the bounds in which to center it, relative to its parent/container */

}



.box-uva{
	height: 600px;
	background: url("../img/box-uva.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
}


.box-copa{
	height: 600px;
	background: url("../img/box-copa.jpg") center center no-repeat;
	background-size: cover;
}

.box-botella{
	height: 600px;
	background: url("../img/box-botella.jpg") center center no-repeat;
	background-size: cover;
}

.fondo-marca{
	margin: 0px auto;
	height: 300px;
	width: 100%;
	background: url("../img/fondo-marca.png") center center no-repeat;

}

.box {
  width: 80%!important;
  max-width: 400px;
  opacity: 0.9;
  color: #fff;
  padding: 40px !important;
  background: url("../img/fondo-marca.png") center center no-repeat;
  background-size: 100%;
 /* transform: skewX(-4deg);*/
}

.box p, img {
/*  transform: skewX(4deg);*/
}




.parallax-window {
	min-height: 400px;
	background: transparent;
	}




.contacto{
	height: 750px;
	background: url("../img/contacto-fondo.jpg") center center no-repeat;
	background-size: cover;
	opacity: 0.8;

}
.form-inline label{
	 text-align: right !important;
	 display: block;
}


.contacto input {
	background-color: black;
	opacity: 0.8;
}

.contacto textarea {
	background-color: black;
	opacity: 0.8;
}



.box-btn{
	width: 100px;
	height: 100px;
	background: red;
}




/*ANIMACIÓN*/

.caja{
	background-color: red;
	width: 400px;
	height: 400px;
	margin: 0px auto;
}




.heartbeat:hover{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}


.scale-up-center{-webkit-animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both;animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both}
.slide-in-elliptic-top-fwd{-webkit-animation:slide-in-elliptic-top-fwd .7s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-top-fwd .7s cubic-bezier(.25,.46,.45,.94) both}
.slide-in-blurred-top{-webkit-animation:slide-in-blurred-top .5s cubic-bezier(.23,1.000,.32,1.000) both;animation:slide-in-blurred-top .5s cubic-bezier(.23,1.000,.32,1.000) both}
/* ----------------------------------------------
 * Generated by Animista on 2018-9-28 15:43:15
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}


/* ----------------------------------------------
 * Generated by Animista on 2018-9-28 15:46:23
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes slide-in-elliptic-top-fwd{0%{-webkit-transform:translateY(-600px) rotateX(-30deg) scale(0);transform:translateY(-600px) rotateX(-30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 1400px;transform-origin:50% 1400px;opacity:1}}@keyframes slide-in-elliptic-top-fwd{0%{-webkit-transform:translateY(-600px) rotateX(-30deg) scale(0);transform:translateY(-600px) rotateX(-30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 1400px;transform-origin:50% 1400px;opacity:1}}




/* ----------------------------------------------
 * Generated by Animista on 2018-9-28 15:50:36
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}


/* ----------------------------------------------
 * Generated by Animista on 2018-9-28 16:9:49
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}



.openBtn{
	background-color: #202020;
	border: 0px;
}

/* The overlay effect with black background */
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9); /* Black with a little bit see-through */
}

/* The content */
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

/* Close button */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

/* Style the search field */
.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 75%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

/* Style the submit button */
.overlay button {
  float: left;
  width: 25%;
  padding: 15px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}


@media (max-width: 1200px){



.texto-nuestra::after{
    right: 5px;
}


.lg-text-left{
	text-align: left !important;
}

}


@media (max-width: 991px){

	.tipo-tamano-100{
		font-size: 70px;
		line-height: 1.2;
	}

	.left-30{
		position: relative;
		left: 0px;
	}


	.texto-nuestra::after{
	display: none;

	}

.texto-contacto::after{
	display: none;

	}





}

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

    .tienda-link {
        background: #000;
        color: #fff;
        text-align: center;
        padding: 10px 0;
        font-size: 18px;
        font-family: 'Baskervville', serif;
        letter-spacing: 3px;
    }

    .tienda-link a {
        color: #FFD200;
        font-size: 18px;
        font-family: 'Baskervville', serif;
        letter-spacing: 3px;
    }

    @media (max-width: 767px) {
        .tienda-link {
            font-size: 12px;
        }
        .tienda-link a {
            font-size: 12px;
        }
    }