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

@font-face {
	font-family: "DIN-Next";
	src: url("../fonts/DINNextLTPro-LightCondensed.ttf");
  }
  @font-face {
	font-family: "DIN-Next-regular";
	src: url("../fonts/DINNextRoundedLTPro-Regular.ttf");
  }
    @font-face {
	font-family: "DIN-Next-bold";
	src: url("../fonts/DINNextRoundedLTPro-Bold.ttf");
  }
  .logo .col-sm-3 img{
      max-width:130px !important;
  }
  strong, b{
      font-family: "DIN-Next-bold";
  }
   .celular{
        display:none !important;
    }
    .disclaimer{
        background-repeat:no-repeat !important;
            background-image: url(../images/bg_disclaimer.jpg) !important;
     background-size: cover;
}
.hamburger{
	position:fixed;
  background-color:transparent;
	left:0;
	top:0;
	height:30px;
	width:30px;
	padding:20px 20px;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	z-index:1002;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.hamburger.is-active{
  background-color:none;
}
._layer{
	background:#fff;
	margin-bottom:4px;
	border-radius:2px;
	width:28px;
	height:2px;
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
}
.hamburger:hover .-top{
	-webkit-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
.hamburger:hover .-bottom{
	-webkit-transform:translateY(50%);
	-ms-transform:translateY(100%);
	transform:translateY(100%);
	}
.hamburger.is-active .-top{
	-webkit-transform:translateY(200%) rotate(45deg) !important;
	-ms-transform:translateY(200%) rotate(45deg) !important;
	transform:translateY(200%) rotate(45deg) !important;
}
.hamburger.is-active .-mid{
	opacity:0;
}
.hamburger.is-active .-bottom{
	-webkit-transform:translateY(-200%) rotate(135deg) !important;
	-ms-transform:translateY(-200%) rotate(135deg) !important;
	transform:translateY(-200%) rotate(135deg) !important;
}

.menuppal.is_active{
  transform: translate3d(0px, 0px, 0px);
}
.menuppal{
   background-color: rgba(0,0,0, 0.8);
   padding-top:30% !important;
    bottom: 0;
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    transform: translate3d(0px, -100%, 0px);
    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
    width: 100%;
    z-index: 1001;
}
.menuppal ul{
  margin:0;padding:0;
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
#banner-principal img {
    -webkit-animation: blink 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1.5s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1.5s;
    -o-animation-iteration-count: infinite;
}

.menuppal ul li { 
  list-style: none;
	text-align:center;
	font-family: Verdadna, Arial, Helvetica;
	color:$nav-color-text;
	font-size:1.5rem;
	line-height:3em;
	height:3em;
  color:#369;
	text-transform:none;
	font-weight:bold;
}
.menuppal ul li a{
  text-decoration:none;
  color:#369;
}
.menuppal ul li a:hover{
  text-decoration:none;
  color:#333;
}
h1 strong, h1 b, h2 strong, h2 b, h3 strong, h3 b{
    font-family: "DIN-Next"!important;
}
h1,h2,h3,h4,h5{
	font-family: "DIN-Next";
}
label{
	font-family: "DIN-Next-regular";
}
.h2, h2 {
    font-size: 36px;
}
body {
	background-color: #ffffff;
	color: #1f1f1f;
	font-family: "DIN-Next-regular";
}
.cel{
    display:none !important;
}
#banner-principal {
    padding-top: 20% !important;
    color: white;
    height: 100vh;
    background-repeat: no-repeat;
    background: url(../images/Cristal_banner-web_4.png) no-repeat center center fixed;
    background-size: cover !important;
    overflow: hidden;
}

.header{
	position: absolute;
	padding-top: 40px !important;
	width: 100%;
}
.header a{
	font-family: "DIN-Next" !important;
	font-size: 20px;
	padding:0px 10px;
	color:white !important;
}
#banner-principal .container{
	padding-right: 60% !important;
}
.header .col-sm-3{
	width: 30% !important;
}
.header .col-sm-9{
	width: 70% !important;
	text-align: right;
}
p {
    font-size: 18px !important;
    line-height: 28px !important;
}
#valor{
	background-color: #1A1B1F;
    color: white;
    text-align: center;
    padding: 50px !important;
}
#valor h2 {
    font-size: 62px !important;
    font-weight: 100 !important;
    letter-spacing: 1px;
    color: #CBD2D6;
}
#acerca .col-sm-7 {
    padding-left: 17% !important;
    padding-right: 15% !important;
    padding-top: 8% !important;
}
#acerca .col-sm-5 {
    background-image: url(../images/Cristal_agave_img@2x.png);
    height: 640px !important;
    background-size: cover;
    background-position: center;
}
#acerca, #cata{
	overflow: hidden;
}
#acerca .col-sm-5 img {
    max-width: 108% !important;
    position: absolute;
    top: 14%;
    margin-left: 23%;
}
#valor h2  strong{

	font-weight: 100 !important;
    font-size: 46px !important;
    border-top: 2px solid;
    border-bottom: 2px solid;
    line-height: 39px !important;
    display: inline-block;
    padding-top: 8px !important;
    top: -4px;
    position: relative;
}
#valor img{
	max-width: 40px !important;
}
#presentacion {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    width: 70% !important;
    margin-left: 13% !important;
}
#presentacion .col-sm-6:nth-child(1){
	padding-right: 100px !important;
}
.tabla-presentacion {
    margin-top: 20px !important;
    width: 70% !important;
}
.tabla-presentacion div {
    border-bottom: 2px solid #eee;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 15px;
    left: -15px;
    position: relative;
}
#mixologia img{
	max-width: 100% !important;
}
#mixologia h2{
	text-align: center;
}
#mixologia .owl-dots{
	display: none !important;
}
#mixologia  button.owl-prev{
    background-image:url(../images/flecha1.png);
}
#mixologia  button.owl-next{
    background-image:url(../images/flecha2.png);
}
#mixologia  button{
    font-size: 60px !important;
    color: #888888;
    font-weight: 100 !important;
    background-color: transparent !important;
    height: 30px;
    width: 30px !important;
    background-size: contain;
    background-repeat: no-repeat;
}
#mixologia  button span{
    display:none !important;
}
#footer{

color: #fff !important;
    padding: 30px 0px !important;
    background-color: #005A70;
}
#footer .footer1 img {
    max-width: 340px;
    margin-left: -23% !important;
    margin-bottom: 30px !important;
    margin-top: 30px !important;
}
#footer p{
    font-size: 16px !important;
}#footer .footer2 a:hover{
        text-decoration: none !important;
    color: white !important;

}
#footer .footer2 a {
        color: #fff !important;
    width: 100% !important;
    display: block;
    margin-bottom: 10px !important;
    font-family: "DIN-Next";
    font-size: 18px !important;
}
#footer .footer1 {
    width: 40% !important;
    padding-right: 60px !important;
}
#footer .footer2, #footer .footer3{
	width: 30% !important;
}
#footer .footer2{

}
#footer .footer3 a{
	font-family: "DIN-Next";
 color: #fff !important;
    font-size: 18px !important;
    
}

#footer .footer3 span {
    font-family: "DIN-Next";
    font-size: 20px !important;
	top: 32px !important;
	position: relative;
}
#footer .footer3 img {
    max-width: 25px;
    margin-right: 15px;
    margin-top: 23% !important;
    margin-bottom: 20px !important;
}
#instagram_facebook{
	margin-bottom: -1px !important;
}
#banner-principal img{
	max-width: 35px !important;
}

#locator .panel{
	border-bottom:0px !important;
	padding-bottom: 0px !important;
	-webkit-box-shadow: none !important;
    box-shadow: none !important;
}
#instagram{
	padding: 0px !important;
}
#footer  .info{
	margin-bottom: 15px !important;
}
#copy a{
	color: white !important;
}
#copy{
    background-color: #030e2b!important;
    color: white !important;
    padding: 20px;
    text-align: center;
}
#footer .col-sm-4{
	height: 390px !important;
}
#footer h4 {
    font-weight: bold;
    font-size: 24px !important;
    width: 100% !important;
    margin-top: 80px !important;
    margin-bottom: 25px !important;
}
#mixologia {
    padding-top: 70px !important;
    padding-bottom: 50px !important;
    width: 90% !important;
    margin: auto;
        overflow: hidden;
}
#mixologia h3 {
    text-transform: uppercase;
    font-size: 32px !important;
}
#mixologia .item {
    padding: 0px 50px;
    height: 250px !important;
}
#mixologia .item p, #mixologia  h3{
	text-align: center;
}
#mixologia img{
	margin-bottom: 30px;
}
.box.buscar input {
    background-image: url(../images/buscar.png);
    background-size: 40px !important;
    background-repeat: no-repeat;
    background-position: right;
    border: 1px solid black !important;
    border-radius: 5px !important;
    padding-left: 15px !important;
    padding-right: 50px !important;
    margin-top: 40px !important;
}
.header .col-sm-9 a img{
        max-width: 20px !important;
    top: -1px;
    position: relative;
}
.locaciones h2::after{
    	content: "";
    width: 16%;
    height: 1px;
    background-color: rgb(0 0 0  / 30%);
    display: block;
    margin: auto;
    margin-top: 10px !important;
}
#mixologia h2::after{
	content: "";
    width: 16%;
    height: 1px;
    background-color: rgb(0 0 0  / 30%);
    display: block;
    margin: auto;
    margin-top: 10px !important;
}
#presentacion center img {
    max-width: 40px !important;
    margin-bottom: 20px !important;
}
.endonde img {
    width: 90% !important;
    margin-left: 5% !important;
}
#proceso .item, #proceso .item h3{
        color: #CBD2D6 !important;
}
#proceso .item p{
    line-height:22px !important;
}
.compra div{
	width: 33.33% !important;
	float: left;
	padding:0px !important;
}
.no-border{
	border-bottom: 0px !important;
}
.compra h3{
	font-weight: bolder !important;
}
.compra  img{
filter: grayscale(1);
}
.compra  img:hover{
filter: grayscale(0);
}
.compra {
	margin-top: 35px;
margin-left: -20px !important;
}
.compra div img{
	width:100% !important;
}
#proceso {
    background-color: #1A1B1F;
    color: white !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}
#proceso h2{
	text-align: center;
	margin-bottom: 30px !important;
}
#proceso h2::after {
    content: "";
    width: 16%;
    height: 1px;
    background-color: rgb(255 255 255 / 20%);
    display: block;
    margin: auto;
    margin-top: 10px !important;
}
#proceso .item img{
	max-width: 60px;
}
#proceso h3 {
    font-size: 32px !important;
    text-transform: uppercase;
}
#proceso .item {
padding: 0px 30px !important;
}
#proceso .container{
	width: 80% !important;
}
#proceso .owl-nav button {
    background-color: rgb(255 255 255 / 20%) !important;
    height: 40px !important;
    width: 40px !important;
    border-radius: 100% !important;
    font-size: 38px !important;
    line-height: 30px !important;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}
#proceso  .owl-nav button span{

    display:none !important;
}
#proceso  .owl-nav button.owl-prev{
	left: -50px !important;
    position: absolute;
    background-image:url(../images/flecha1-claro.png);

}
#proceso  .owl-nav button.owl-next{
	right: -50px !important;
    position: absolute;
    background-image:url(../images/flecha2-claro.png);

}
#proceso  .owl-dots .owl-dot{
	width: 33.33% !important;
}

/*#proceso  .owl-dots .owl-dot:nth-child(1){
	margin-right: 33.33%;
}
#proceso  .owl-dots .owl-dot:nth-child(3){
	margin-left: 33.33%;
}*/
#proceso .owl-theme .owl-nav{
position: relative;
top: -250px !important;
}
#proceso  .owl-dots .owl-dot:nth-child(3) span{

margin-left: 80% !important;
}
#proceso  .owl-dots .owl-dot:nth-child(2) span{
	margin-left: 50% !important;
}
#proceso  .owl-dots .owl-dot:nth-child(1) span{
	margin-left: 15% !important;
}
#proceso .owl-dots::after {
    content: "";
    height: 1px;
    width: 100% !important;
    display: block;
    background-color: white !important;
    top: -13px;
    position: relative;
	z-index: -1;
}
#proceso .owl-theme .owl-dots .owl-dot span {
    width: 15px !important;
    height: 15px !important;
	border:1px solid #d6d6d6 !important;
    background: #d6d6d6 !important;
}
#proceso .owl-theme .owl-dots .owl-dot.active span{
	background-color: #1A1B1F !important;
	border:1px solid #d6d6d6 !important;
}
#cata {
    background-image: url(../images/Cristal_notas-cata_img_botella@2x.png);
    padding-top: 50px !important;
    padding-bottom: 50px !important;
	background-size: 100% 100%;
}
.cata-ingles#cata{
    background-image: url(../images/Cristal_notas-cata_img_botella_USA.png) !important;
}
.txt-cata{
	width: 40%;
}

.notas {
    width: 40% !important;
    margin-top: 29% !important;
    top: -40px;
    position: relative;
}
#cata .txt-cata h2::after {
    content: "";
    width: 39%;
    height: 2px;
    background-color: rgb(0 0 0 / 30%);
    display: block;
    margin-left: -19px;
    margin-top: 5px !important;
}
#cata .txt-cata h2{
	margin-bottom: 20px;
}
.notas li {
    font-family: "DIN-Next";
    font-weight: bold;
    font-size: 24px !important;
    margin-bottom: 15px !important;
    list-style: none;
    padding-left: 55px !important;
    height: 50px !important;
    background-size: 45px !important;
    background-repeat: no-repeat;
    padding-top: 10px !important;
    background-position: center left;
}
.notas .col-sm-6:nth-child(1) li:nth-child(1){
	background-image: url(../images/Cristal_chocolate_icon_nuevo@2x.png);
}
.notas .col-sm-6:nth-child(1) li:nth-child(2){
	background-image: url(../images/Cristal_cafe_icon_nuevo@2x.png);
}
.notas .col-sm-6:nth-child(1) li:nth-child(3){
	background-image: url(../images/Cristal_vainilla_icon_nuevo@2x.png);
}
.notas li:nth-child(4){
	
}
.notas .col-sm-6:nth-child(2) li:nth-child(2){
	background-image: url(../images/Cristal_cafe_madera_nuevo@2x.png);
}
.notas .col-sm-6:nth-child(2) li:nth-child(3){
	background-image: url(../images/Cristal_nuez_icon_nuevo@2x.png);
}
#banner-bajo {
    background: url(../images/Cristal_banner_parallax.png);
    height: 550px;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
}
.banner-bajo-ingles#banner-bajo {
    background: url(../images/botella_cristal_USA_img.png);
}
#jlocator .radio input[type="radio"] {
    margin-left: 15px !important;
    margin-right: -10px !important;
    margin-top: 7px !important;
    top: 0px !important;
    position: relative;
}
.imagen-mapa img {
    width: auto !important;
    max-height: 120px !important;
    margin: auto;
    text-align: center;
}
.imagen-mapa {
    margin: auto;
    text-align: center;
    margin-bottom: 20px !important;
}
#jlocator  .radio label {
    padding-left: 0px !important;
}
#jlocator  .box .radio{
	width: 100% !important;
    text-align: center;
}
#jlocator .buscar {
    width: 35% !important;
    clear: both !important;
    margin-left: 32.5% !important;
    margin-bottom: 50px !important;
}
#jlocator .imagenes-mapa{
	width: 50% !important;
}
.imagenes-botellas{
width: 50% !important;
margin-left: 25% !important;
}
.locaciones #jlocator .store img { 
		max-height: 50px !important;
	
}