@import url('https://fonts.googleapis.com/css2?family=Meie+Script&family=Zilla+Slab:wght@300;400&display=swap');

/*
@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.eot');
    src: url('../fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff'),
         url('../fonts/raleway-regular-webfont.ttf') format('truetype'),
         url('../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

body, html { width:100%; min-height:100%; min-height:calc(var(--vh, 1vh) * 100); overflow-x:hidden; margin: 0; background:#1F1F1F; font-family: 'Zilla Slab', serif; font-weight:300; font-size:18px; line-height:1.5; color:#FFF; }

.hide { display:none; }
.fluidImg { width:100%; height:auto; max-height:100%; border:0; padding:0; display:block; }
.fluidImgVert {min-width:100%; height:auto; height:100% !important; border:0; padding:0; display:block; }
.posMiddle { position:relative; left:50%; transform:translateX(-50%); }
.link { color:#FFF; text-decoration:underline; font-weight:900; transition:0.5s; }
.link:hover { color:#D10A11; text-decoration:underline; transition:0.3s ease-in; }

input { -webkit-appearance:none; border-radius:0; outline: 0; }

.btnDisabled { pointer-events:none; opacity:0.5; transition:0.3s; } /* para prevenir hover y otros eventos */
.btnEnabled { pointer-events:auto; opacity:1; transition:0.4s; } /* para permitir hover y otros eventos */

.bgHolder {
    /*position:absolute; z-index:10; top:0; left:0;*/ position:relative; width:100%; height:100vh; height: calc(var(--vh, 1vh) * 100); overflow:hidden;
    /* /----/ https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ /----/ */
}

.bg {
    background-image: url("../imgs/fake16_9.png");
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg1 { background-image: url("../imgs/home_bg_1.jpg"); }
.bg2 { background-image: url("../imgs/home_bg_2.jpg"); }
.bg3 { background-image: url("../imgs/home_bg_3.jpg"); }
.bg4 { background-image: url("../imgs/home_bg_4.jpg"); }
.bg5 { background-image: url("../imgs/home_bg_5.jpg"); }
.bg6 { background-image: url("../imgs/home_bg_6.jpg"); }
.bg7 { background-image: url("../imgs/home_bg_7.jpg"); }



/* ------------------ SLIDER ------------------- */

.slider-container { position:relative; }

#slideIndex { position:absolute; z-index:10; bottom:calc(36% + 1em); left:66.6%; width:15.7%; margin-left:1%; text-align:left; font-size:1em; }

.tns-nav { position:absolute; z-index:10; bottom:36%; left:66.6%; width:15.7%; margin-left:1%; }
.tns-nav > [aria-controls] { width: calc(33.333% - 10px); height:12px; padding: 0; margin: 0 10px 0 0; background: rgba(0,0,0,0); border:0; outline:0; border-bottom: 2px solid #434343 !important; transition:0.3s; }
.tns-nav > [aria-controls]:hover { border-bottom: 2px solid #FFFFFF !important; transition:0.3s; }
.tns-nav > .tns-nav-active { border-bottom: 2px solid #d10a11 !important; }

.slideTitle { position:absolute; z-index:20; bottom:35%; left:22.5%; font-size:6.5vw; line-height:1; opacity:0; transition:0.3s; }
.slideDescription { position:absolute; z-index:20; top:calc(64% + 1.3em); left:66.6%; width:16.7%; padding-left:1%; box-sizing:border-box; overflow:hidden; }
.descrContent { position:relative; z-index:1; top:0; left:100%; opacity:0; transition:0.1s; }
.descrTitle { text-align:left; font-size:1em; margin-bottom:1.2em; }
.descrTxt { text-align:left; font-size:1em; }

.item.is-transitioned .slideTitle { left:17.5%; opacity:1; transition:0.4s; transition-delay: 0.6s; }
.item.is-transitioned .descrContent { left:0; opacity:1; transition:0.4s; transition-delay: 0.9s; }

/* ------------------ fin SLIDER ------------------- */



/* --------- FORMULARIO EDAD --------- */

#ageBlocker { position:fixed; z-index:1000; top:0; height:100vh; width:100%; background:rgba(0,0,0,0.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#ageContent { position:absolute; z-index:10; top:50vh; top: calc(var(--vh, 1vh) * 50); left:50%; transform:translate(-50%,-50%); width:90%; max-width:500px; height:82vh; max-height:680px; background:#1F1F1F; border:1px solid #9A8667; box-shadow: 6px ​8px 10px 2px rgba(0,0,0,0.65); -webkit-box-shadow: 6px ​8px 10px 2px rgba(0,0,0,0.65); -moz-box-shadow: 6px ​8px 10px 2px rgba(0,0,0,0.65); }
#ageWrapper { position: relative; top: 50%; left: 0; transform: translateY(-50%); }
#ageLogo { position:relative; z-index:100; max-width:55%; margin:1em auto 3em auto; }
.ageTxt { width:96%; margin:0 2%; text-align:center; font-size:1.3em; }
.ageTxt2 { width:96%; margin:0 2%; text-align:center; font-size:0.9em; }


/* --------- MENÚ --------- */

#menuWrapper { position:fixed; z-index:600; top:-100vh; height:100vh; width:100%; background:rgba(0,0,0,0.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
/*#menuHamburguerBtn { position:absolute; z-index:1000; top:1.2em; right:1.2em; width:3em; height:3em; border-radius:50%; }*/
#menuHamburguerBtn { position:relative; width:3em; margin:0 auto; height:2em; border-radius:50%; cursor:pointer; }

.menuLinesHolder { position:absolute; z-index:10; top:50%; left:50%; transform:translate(-50%, -50%); width:2em; height:2px; }
#menuHamburguerBtn.active .menuLinesHolder {  }
.menuLine { position:absolute; width:100%; height:2px; background:#FFF; }
	.line1 { top:-0.5em; z-index:1; }
	.line2 { top:0; z-index:2; }
	.line3 { top:0.5em; z-index:3; }

#menuHamburguerBtn:hover  .menuLine { background:#9A8667; transition: background 0.5s; }
#menuHamburguerBtn.active  .menuLine { background:#9A8667; }	

.menuBtnsHolder { position:absolute; top:1em; right:-70vw; width:auto; height:70vh; max-height:23em; display:inline-block; margin:0.6em; padding:10em 1em 3em 1em; overflow-y:scroll; scrollbar-width: none !important; }
	.menuBtnsHolder::-webkit-scrollbar { display: none; } /* Hide scrollbar for Chrome, Safari and Opera */
	.menuBtnsHolder::-moz-scrollbar { display: none; } /* Hide scrollbar for Firefox */
	.menuBtnsHolder::-o-scrollbar { display: none; } /* Hide scrollbar for Opera */
	.menuBtnsHolder { -ms-overflow-style: none; } /* Hide scrollbar for IE and Edge */
.menuBtn { width:100%; padding:0.7em 5em 0.5em 1em; display:block; text-align:left; font-size:1.1em; line-height:1.2; color:#FFF; text-decoration:none; transition:all 0.5s; border-bottom:1px solid #9A8667; }
.menuBtn:hover { color:#9A8667; text-decoration:none; transition:all 0.5s; }
.menuBtn.sel { color:#9A8667; }
.menuBtn.level2 { margin-left:1.2em; width:calc(100% - 1.2em); border-bottom:1px solid #9A8667; }


#mainLogo { position:absolute; z-index:950; top:7vh; left:50%; transform:translateX(-50%); width:264px;  }

#underConstruction { position:absolute; z-index:950; top:50%; left:0; transform:translateY(-50%); width:100%; color:#FFF; text-align:center; font-family: 'Open Sans', sans-serif; font-size:3em; text-shadow: 0px 0px 4px rgba(0,0,0,0.3); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.3); -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.3); }

#contactHolder { position:absolute; z-index:950; bottom:4vh; left:50%; transform:translateX(-50%); color:#FFF; }
.contactIcon { font-size:3em; padding:0 1.5rem; float:left; text-shadow: 0px 0px 4px rgba(0,0,0,0.3); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.3); -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.3); }
.contactIcon a { color:#FFF; text-decoration:none; transition:all 1s; }
.contactIcon a:hover { color:#000; text-decoration:none; transition:all 0.3s; }



/* --------- estructura básica --------- */
/*
.header { height:auto; width:100%; max-width:1200px; overflow:hidden; }
.mainLogo { width:48%; max-width:215px; padding:1em 0 0.5em 0.5em; height:auto; margin:0; }
.mainLogo.home { width:70% !important; max-width:310px; height:auto; padding:3em 0; margin:0 auto !important; }
.headerTxtHolder { width:100%; font-size:0.75em; padding:0.4rem 0 2rem 0; }
.headerTxtCol { width:50%; float:left; }
*/

.mainWrapper { position:relative; width:100%; margin:0; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); box-sizing:border-box; overflow:hidden; }
.section { position:relative; width:100%; box-sizing:border-box; display:inline-block; padding:3em 0; }
	.noPadd { padding:0 !important; }
	.noMarg { margin:0 !important; }
	.higherIndex { z-index:150; }
	.historiaBlock2 { /*margin-top: -5em;*/ }
	.whiteBg { background:#FFF; }
.contentWrapper { position:relative; max-width:1200px; margin:0 auto; box-sizing:border-box; padding:0 1em; }
.contentLimits { position:relative; z-index:20; width:100%; max-width:800px; min-height:100vh; /*min-height:calc(var(--vh, 1vh) * 100);*/ margin:0 auto; box-sizing:border-box; padding:0; overflow-x:hidden; scrollbar-width: none !important; }

	.contentLimits::-webkit-scrollbar { display: none; } /* Hide scrollbar for Chrome, Safari and Opera */
	.contentLimits::-moz-scrollbar { display: none; } /* Hide scrollbar for Firefox */
	.contentLimits::-o-scrollbar { display: none; } /* Hide scrollbar for Opera */
	.contentLimits { -ms-overflow-style: none; } /* Hide scrollbar for IE and Edge */

.footerPusher { width:100%; height:auto; }
.footer { position:absolute; z-index:500; bottom:0; left:0; height:auto; width:100%; padding-top:7em; }
.footerTop { width:100%; height:2em; background:#9A8667; filter:drop-shadow(8px -8px 8px black); }
.footerCircle { width:9em; height:9em; border-radius:50%; background:#9A8667; overflow:hidden; margin:0 auto; transform:translateY(-35%) }
.footerContent { position:relative; z-index:10; margin-top:-2em; background-position:top left; background-repeat:repeat-x; background-size:auto 100%; background-image: url('../imgs/footer_bg.png'); }
#footerLogo { position:relative; z-index:100; width:5em; margin:0 auto 0.4em auto; }
#footerXo { width:4em; margin:0 auto; }
.footer-rowA { width:100%; display:block; text-align:center; padding:2.5em 0 1.8em 0; box-sizing:border-box; }
.footer-rowB { width:100%; display:block; text-align:center; padding:1.8em 0; box-sizing:border-box; }
.footerTitle { width:100%; font-size:0.8em; margin-bottom:1em; }
.footerTxt { font-size:0.9em; line-height:1.4; text-align:center; width:100%; box-sizing:border-box; padding:0; margin-bottom:0.7rem; }
.footerLine { max-width:280px; height:1px; margin:0 auto; background:#FFF; }
.rrssHolder { display:flex; max-width:500px; margin:2em auto 0 auto; justify-content:center; }
.rrssBtn { width:51px; margin:0 1em; border-radius:50%; overflow:hidden; transform:rotate(0deg); transition: all 600ms linear; }
.rrssBtn:hover { transform:rotate(360deg); transition: all 500ms ease; }
a.footerLink { font-size:1em; text-decoration:none; color:inherit; transition: all 500ms linear; }
a.footerLink:hover { text-decoration:underline; color:#1f1f1f; transition: all 300ms ease; }

#footerMenu { display:flex; max-width:500px; margin:0 auto; justify-content:space-between; }
.footerMenuBtn { width:auto; margin:0; font-size:1em; line-height:1; text-align:center; color:#FFF; text-decoration:none; transition: all 500ms linear; }
.footerMenuBtn:hover { color:#1f1f1f; transition: all 300ms ease; }

.pt0 { padding-top:0 !important; }
.pt1 { padding-top:1em !important; }
.pt2 { padding-top:2em !important; }
.pt3 { padding-top:3em !important; }
.pb0 { padding-bottom:0 !important; }
.pb1 { padding-bottom:1em !important; }
.pb2 { padding-bottom:2em !important; }
.pb3 { padding-bottom:3em !important; }

.mt0 { margin-top:0 !important; }
.mt1 { margin-top:1em !important; }
.mt2 { margin-top:2em !important; }
.mt3 { margin-top:3em !important; }
.mb0 { margin-bottom:0 !important; }
.mb1 { margin-bottom:1em !important; }
.mb2 { margin-bottom:2em !important; }
.mb3 { margin-bottom:3em !important; }

/* --------- \\ estructura básica --------- */



/* --------- header --------- */

#menuHolder { position:fixed; z-index:1000; top:2em; right:2em; width:15%; max-width:90px; }
#sello { width:100%; margin-bottom:0.7em; }
#langsHolder { position:fixed; z-index:1000; top:2em; left:2em; right:auto; }
.langBtn { display:inline-block; text-align:left; font-size:1.4em; line-height:1; color:#FFF; text-decoration:none; transition:all 0.5s; transform:scale(0.6); }
.langBtn:hover { color:#9A8667; transform:scale(1); text-decoration:none; transition:all 0.5s; }
.langBtn.sel { color:#9A8667; transform:scale(1); }
.langDivider {display: inline-block; font-size:1.4em; line-height:1; color:#FFF; padding:0 0.2rem; }

#headerHolder { position:relative; width:100%; height:80vh; background-position:center; background-repeat:no-repeat; background-size:cover; }
.historiaBg { background-image: url('../imgs/historia_header.jpg'); } 
.productoBg { background-image: url('../imgs/producto_header.jpg'); } 
.coctelesBg { background-image: url('../imgs/cocteles_header.jpg'); } 
#headerLogo { position:relative; z-index:100; width:140px; margin:0 auto 0.7em auto; padding-top:2em; }
#headerXo { width:100px; margin:0 auto; }
#headerTitleHolder { position:absolute; z-index:10; bottom:0; left:0; width:100%; height:100%; background-position:left bottom; background-repeat:repeat-x; background-size:auto 30%; background-image: url('../imgs/header_img_mask.png'); }
.headerContentHolder { position:absolute; bottom:0; left:0; width:100%; }
.titleWrapper { position:relative; display:inline-block; }
.headerTitle { margin:0 0 1.5rem 0; font-size:7em; font-weight:300; line-height:1; color:#494848; }
#subtitleWrapper { position:absolute; bottom:0; left:0; width:100%; }
.subtitle { font-size:1.4em; text-align:right; float:right; margin-top:-0.1em; }
.headerAdorno { position:absolute; z-index:20; top:0; right:0; width:700px; opacity:0.05; transform: translate(90%, -10%); }


/* --------- home --------- */

#homeBrandHolder { position:absolute; z-index:500; top:50%; left:50%; width:90%; max-width:900px; transform:translate(-50%, -60%); }
#brandLogo { width:180px; margin:0 auto; }
#brandAdorno { width:100%; margin:2.4em auto; opacity:0.15; mix-blend-mode:multiply; }
.homeClaim { max-width:700px; margin:0 auto; font-family:'Meie Script'; font-size:2.2em; line-height:1.1; color:#FFF; text-align:center; text-shadow: 3px 3px 10px rgba(0,0,0,0.7); }

#homeBottom { position:absolute; z-index:300; bottom:0; left:0; width:100vw; height:20vh; oveflow:hidden; }
#homeBottomMenu { position:absolute; z-index:100; bottom:8vh; left:50%; transform:translateX(-50%); display:flex; width:70%; max-width:1200px; justify-content:center; }
.bottomMenuBtn { width:6em; padding:1.2rem 0; margin:0 3%; font-size:1.8em; line-height:1; text-align:center; color:#FFF; text-decoration:none; border-bottom:1px solid #9A8667; transform:translateY(0); transition:all 0.7s; }
.bottomMenuBtn:hover { color:#9A8667; transform:translateY(-10px); transition:all 0.4s; }
.homeBottomAdorno { position:absolute; z-index:20; bottom:-5vh; left:1vw; right:auto; width:20%; max-width:360px; opacity:0.1; }
.homeBottomAdorno.reversed { left:auto; right:1vw; }
#homeBottomBg { position:absolute; z-index:10; bottom:0; left:0; width:100vw; height:20vh; mix-blend-mode:multiply; opacity:0.9; background-image: url('../imgs/degradado_bottom_home.png'); background-position: left bottom; background-size: auto 100%; }


/* --------- contenido --------- */

.goldenTxt { color:#9A8667 !important; }
.boldTxt { font-weight:600; }

.contentAdornoTop { position:absolute; z-index:100; top:0; left:0; width:630px; opacity:0.05; transform: translate(-85%, -17%); }

.col100 { position:relative; width:100%; margin:0; }
.col50 { position:relative; width:calc(50% - 1em); margin-left:0; margin-right:1em; float:left; }
.col50:nth-child(2) { margin-left:1em; margin-right:0; }
.col50.centered { margin:0 auto !important; float:none; }
.col25 { position:relative; width:calc(25% - 1em); margin-left:0; margin-right:1em; float:left; }
.col75 { position:relative; width:calc(75% - 1em); margin-left:1em; margin-right:0; float:left; }

.txt4cols { width:100%; column-count:4; column-gap:1.5em; column-fill: balance; margin-bottom:2em; }
.txt3cols { width:100%; column-count:3; column-gap:1.5em; column-fill: balance; margin-bottom:2em; }
.txt2cols { width:100%; column-count:2; column-gap:1.5em; column-fill: balance; margin-bottom:2em; }
.txt4cols p, .txt3cols p, .txt2cols p { margin:0 0 1em 0; }
.txt4cols p.dont-break, .txt3cols p.dont-break, .txt2cols p.dont-break { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.txt4cols p.newCol, .txt3cols p.newCol, .txt2cols p.newCol { break-before: column; }

.regularBtn { width:auto; padding:0.6rem 0; font-size:1.2em; cursor:pointer; line-height:1; text-align:center; color:#9A8667; text-decoration:none; background:rgba(154,134,103,0); border-bottom:1px solid #9A8667; transform:translateY(0); transition:all 0.7s; }
.regularBtn:hover { color:#FFF; text-decoration:none; transition:all 0.5s; }
.centerBtn { margin: 0 auto; }

.sendBtn { width:7em; }
.sendBtn:hover { background:rgba(154,134,103,1); }

.imgOverflowRight { position:relative; margin-left:15%; width:180%; }
.imgBarman { width:75%; margin:0; transform: translateY(-60%); }
.imgBottomGradient { position:absolute; z-index:10; bottom:-3em; left:-5%; width:250%; height:110%; background-position:left bottom; background-repeat:repeat-x; background-size:auto 90%; background-image: url('../imgs/header_img_mask.png') }
.imgShadow { box-shadow: 0 0 18px 9px rgba(0,0,0,0.6); }
.opacity50 img { opacity:0.5; }
.imgShadowCoctel { box-shadow: 0 0 19px 7px rgba(0,0,0,0.6); }
.contentOverImg { z-index:20; margin-top:-15em; }
.claimOverImg { width:94%; margin:0 auto; font-family:'Meie Script'; font-size:2.2em; line-height:1.1; color:#9A8667; text-align:center; }
.claimUnderImg { width:94%; margin:2.5rem auto 0 auto; font-family:'Meie Script'; font-size:2.2em; line-height:1.1; color:#9A8667; text-align:center; }
.retrato { width:70%; margin:0 auto 2em auto; }
.piefotoTxt { margin-left:15%; margin-top:0.7em; }

.prodIntro { display:flex; flex-direction:column; }
.prodIntroTxt { order:0; }
.botellaHolder { /*position:relative; top:50%; left:50%; transform:translate(-50%,-50%);*/ width:100%; max-width:160px; margin:4em auto 2em 0; }
.prodIconRow { display:flex; flex-direction:row; align-items:center; margin-bottom:0.7em; }

.underline { width:7em; height:1px; background:#9A8667; float:left; }
.titleUnderline { width:7rem; height:1px; background:#9A8667; margin:0.4rem 0 1rem 0; clear:both; }

.coctelHolder { display:flex; flex-direction:row; flex-wrap:wrap; width:100%; align-items:center; justify-content:space-between; padding-bottom:3em; }
.colCoctel55 { width:55%; order:0; margin:0; }
.colCoctel45 { width:45%; order:0; margin:0; }
.coctelTxtLeft { width:75%; margin-left:0; }
.coctelTxtRight { width:75%; margin-left:25%; }
.coctelName { font-size:2.2em; line-height:1; width:100%; clear:both; }

.contactTxt { margin-left:15%; margin-top:2em; }
.contactMap { position:relative; top:0; left:50%; transform: scale(1) translate(-50%,0); transition:all 0.5s; }
a.contactLink { font-size:1em; text-decoration:none; color:#FFF; transition: all 500ms linear; }
a.contactLink:hover { text-decoration:underline; color:#9A8667; transition: all 300ms ease; }



/* --------- FORMULARIO --------- */

#formHolder { position:relative; z-index:100; max-width:700px; margin:1em auto; padding:0; box-sizing:border-box; }
#ageFormHolder { position:relative; z-index:100; max-width:240px; margin:1em auto; padding:0; box-sizing:border-box; }
#formHolderPart2 { position:relative; max-width:700px; margin:0 auto; padding:0; box-sizing:border-box; }
#formHolderPart2.fullWidth { width:100%; max-width:100%; }
	.inputHolder { max-width:700px; margin:0px auto; padding:0 0 1.3em 0; }
	.inputHolder .textInput { width:100%; padding:0.7em 1.3em; display:inline-block; outline:0; box-sizing: border-box; text-align:left; font-family: 'Zilla Slab', serif; font-weight:300; color:#FFF; font-size:1em; border:1px solid #9A8667; border-radius:0; background:rgba(0,0,0,0); box-shadow: 0px 0px 4px 2px rgba(0,0,0,0); -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0); -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0); transition:all 0.5s; }
	.inputHolder .textInput:hover, .inputHolder .textInput:focus { color:#9A8667; background:rgba(0,0,0,0.2); box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3); transition:all 0.3s ease; }

	textarea { font-family: 'Zilla Slab', serif; font-weight:300; font-size:1em; }
	
	.checkHolder { width:auto; height:30px; margin:15px auto 15px 0px; display:block; clear:both; }
		.checkHolder input { float:left; margin:1px 0px 15px 0px; width:1em; height:1em; }
		.checkTxt { margin-left:30px; padding-top:5px; font-size:1em; line-height:100%; color:#333; outline:0px; }
		.checkTxt a { color:#FFF; text-decoration:underline; }
		.checkTxt a:hover { color:#E2A109; text-decoration:underline; }

	.buttonHolder { max-width:500px; margin:0 auto; height:auto; }
	
		.myBt { width:100%; padding:1.5em; border:0; box-sizing:border-box; background:#8B8B8B; border-radius:6px; cursor:pointer; text-align:center; color:#FFF; outline:0px; transition: all 500ms linear; }
		.myBt:hover, .myBt:focus { background:#000; transition: all 300ms ease; }
	

	.messageHolder { clear:both; max-width:500px; margin:2em 0 15px 0; height:60px; display: block; }
		.load { display:none; text-align:left; color:#9A8667; height:60px; margin-bottom:5px; }
		.message { display:none; text-align:left; color: green; margin-bottom:5px; word-wrap:break-word; }

	::-webkit-input-placeholder { color: #CCC; }
	:-moz-placeholder { color: #CCC; } /* Firefox 18- */
	::-moz-placeholder { color: #CCC; } /* Firefox 19+ */
	:-ms-input-placeholder { color: #CCC; }

#hidden1, #hidden2 { display:none; opacity:0;}


/*
CHECK BOXES
https://codepen.io/dylanraga/pen/Qwqbab
*/


.checkboxesHolder{
  display: flex;
  flex-direction: row;
  margin-top:0.5em;
  margin-bottom:2em;
  flex-wrap:wrap;
}

.checkboxesHolder.column { flex-direction: column !important; }
.checkboxesHolder.fullWidth { width:100%; max-width:100%; }
.checkboxesHolder.deportes { width:80%; margin-left:10%; transform:translateX(10%); }
.checkboxesHolder.deportes .checkInput { width:20%; }
.checkboxesHolder.bases { max-width:600px; margin:-1em auto 2em auto; transform:translateX(15%); }
	
	
.checkboxesHolder p {
	margin:0;
}


input[type='checkbox']{ position:absolute; height: 1px; width: 1px; border:0px; box-sizing: border-box; user-select: none; }

input[type='checkbox'] + label{
  position: relative;
  display: flex;
  margin: 0 0 1rem 0;
  align-items: center;
  font-size: 0.8em;
  color: #FFF;
  transition: color 250ms cubic-bezier(.4,.0,.23,1);
  box-sizing: border-box;
  user-select: none;
}
input[type='checkbox'] + label > ins{
  position: absolute;
  display: block;
  bottom: 0;
  left: 2em;
  height: 0;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box; 
  user-select: none;
  transition: height 300ms cubic-bezier(.4,.0,.23,1);
}
input[type='checkbox'] + label > ins > i{
  position: absolute;
  bottom: 0;
  font-style: normal;
  color: rgba(0,0,0,0);
  box-sizing: border-box;
  user-select: none;
}
input[type='checkbox'] + label > span{
  position:relative;
  display: flex;
  flex: 0 0 1em; 
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;  
  font-size: 1.4rem;
  width: 1em;
  height: 1em;
  background: rgba(154,134,103,0);
  border: 1px solid #FFF;
  border-radius: 2px;
  cursor: pointer; 
  box-sizing: border-box;
  user-select: none;
  transition: all 250ms cubic-bezier(.4,.0,.23,1);
}

input[type='checkbox'] + label > span.blackBorder { border: 1px solid #9A8667; }

input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label{
  zcolor: #fff;
}
input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span{
  background: rgba(0,0,0,.3);
  border: 1px solid #9A8667;
}
input[type='checkbox']:checked + label > ins{ height: 100%; box-sizing: border-box; user-select: none; }

input[type='checkbox']:checked + label > span{
  border: .5em solid #9A8667;
  background: rgba(154,134,103,1);
  box-sizing: border-box;
  user-select: none;
  animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);
}
input[type='checkbox']:checked + label > span:before{
  content: "";
  position: absolute;
  top: 0;
  left: -0.25em;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  box-sizing: border-box;
  user-select: none;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;
}

@keyframes shrink-bounce{
  0%{
    transform: scale(1);
  }
  33%{    
    transform: scale(.85);
  }
  100%{
    transform: scale(1);    
  }
}
@keyframes checkbox-check{
  0%{
    width: 0;
    height: 0;
    border-color: #FFF;
	background: rgba(154,134,103,0);
    transform: translate3d(0,0,0) rotate(45deg);
  }
  33%{
    width: .25em;
    height: 0;
	background: rgba(154,134,103,0);
    transform: translate3d(0,0,0) rotate(45deg);
  }
  90%{
	background: rgba(206,48,38,0);
  }
  100%{    
    width: .25em;
    height: .5em;    
    border-color: #FFF;
	background: rgba(154,134,103,1);
    transform: translate3d(0,-.5em,0) rotate(45deg);
  }
}


/* --------- \\ contenido --------- */



/* --------- ANIMACIONES --------- */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
	animation-delay:0.5s;
}

.animated.order2 { animation-delay:1s; }
.animated.order3 { animation-delay:1.3s; }
.animated.order4 { animation-delay:1.6s; }
.animated.order5 { animation-delay:1.9s; }
.animated.order6 { animation-delay:2.2s; }

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
}

.fadeIn {
    animation-name: fadeIn;
}

.fadeUp {
    animation-name: fadeUp;
}

.typewrite {
	/*width: 22ch;*/
	/*animation: typing 2s steps(22), blink .5s step-end infinite alternate;*/
	width:22ch;
	animation: typing 2s 2s steps(20), blink .5s step-end infinite alternate, blinkOut 0.5s 4s;
	white-space: nowrap;
	overflow: hidden;
	border-right: 3px solid;
	/*font-family: monospace;
	font-size: 2em;*/
}

@keyframes typing {
  from {
    width: 0
  }
  
  to{
    width: 22ch
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

@keyframes blinkOut {
  to {
    border: 0
  }
}


/* MEDIA QUERIES */

	/* Cambios en función de la anchura de la ventana */
	@media all and (min-width: 1921px) {
        
	}


	@media all and (min-width: 1200px) and (max-width: 1920px) {
        .contactMap { transform: scale(1) translate(-65%,0); }
	}


	@media all and (min-width: 960px) and (max-width: 1199px) {
		html, body { font-size:16px; }
		
        .contactMap { transform: scale(1) translate(-75%,0); }
	}


	@media (min-width: 769px) and (max-width: 959px) {
		html, body { font-size:14px; }
		
		.contentOverImg { z-index:20; margin-top:-12em; }

        .coctelTxtLeft { width:90%; margin-left:0; }
		.coctelTxtRight { width:90%; margin-left:10%; }
		
        .contactMap { transform: scale(1) translate(-75%,0); }
	}

	@media all and (min-width: 500px) and (max-width: 768px) {
		html, body { font-size:14px; }
		.desktop { display:none !important; }
        .mobile { display:block !important; }
        #slideIndex { bottom:calc(37% + 0.8em); left:33.2%; width:49.3%; }
        .tns-nav { bottom:37%; left:33.2%; width:49.3%; }
        .slideTitle { bottom:49%; left:22.5%; font-size:7.5vw; }
        .slideDescription { top:calc(63% + 0.8em); left:33.2%; width:49.3%; }
		
		#menuHolder { top:1.2em; right:1.2em; width:10%; max-width:80px; }
		#langsHolder { top:1.2em; }
		
		#homeBrandHolder { width:84%; transform:translate(-50%, -55%); }
		#brandLogo { width:25%; margin:0 auto; }
		#brandAdorno { width:60%; }
		.homeClaim { max-width:100%; font-size:1.8em; }
		#homeBottomMenu { display:none; }
		.homeBottomAdorno { bottom:-5vh; width:30%; }
		
		.col50 { width:100%; margin-left:0; margin-right:0; }
		.col50:nth-child(2) { margin-left:0; margin-right:0; }
		.col25 { width:100%; margin-left:0; margin-right:0; }
		.col75 { width:100%; margin-left:0; margin-right:0; }
		
		.imgOverflowRight { margin-left:0; width:100%; }
		.imgBarman { width:60%; margin-left:20%; transform:translateY(-5%); }
		.contentOverImg { z-index:20; margin-top:-10em; }
		.piefotoTxt { margin-left:0; }
		
		.prodIntro { flex-direction:row; }
		.prodIntroTxt { order:2; }
		.botellaHolder { max-width:90px; margin:0 4em 2em 4em; }

        .coctelHolder { align-items:start; }
		.colCoctel55 { width:calc(50% - 1em); margin:0; }
        .colCoctel45 { width:calc(50% - 1em); margin:0; }
		.coctelTxtLeft { width:100%; margin-left:0; }
		.coctelTxtRight { width:100%; margin-left:0; }
		
		.contactTxt { margin-left:0; }
        .contactMap { transform: scale(1.5) translate(-35%,0); }
		
	}


	@media all and (min-width: 10px) and (max-width: 499px) {
		html, body { font-size:13px; }
		.desktop { display:none !important; }
		.mobile { display:block !important; }
        #slideIndex { bottom:calc(41% + 0.8em); left:33.2%; width:49.3%; }
        .tns-nav { bottom:41%; left:33.2%; width:49.3%; }
        .slideTitle { bottom:55%; left:22.5%; font-size:10vw; }
        .slideDescription { top:calc(59% + 0.8em); left:33.2%; width:50.3%; }
		
		#menuHolder { top:1em; right:1em; width:15%; max-width:76px; }
		#langsHolder { top:1em; left:auto; right:25%; }
		
		#headerLogo { width:140px; margin:0 auto 0.7em 1em; padding-top:1em; }
		#headerXo { width:100px; margin:0 auto 0 33px; }
		.headerTitle { margin:0 0 1.5rem 0; font-size:20vw; }
		.subtitle { font-size:4vw; }
		
		#homeBrandHolder { width:94%; transform:translate(-50%, -50%); }
		#brandLogo { width:45%; margin:0 auto; }
		#brandAdorno { width:90%; }
		.homeClaim { max-width:100%; font-size:1.8em; }
		#homeBottom { height:40vh; }
		#homeBottomMenu { display:none; }
		.homeBottomAdorno { bottom:-4vh; width:40%; }
		#homeBottomBg { height:40vh;}
		
		
		.col50 { width:100%; margin-left:0; margin-right:0; }
		.col50:nth-child(2) { margin-left:0; margin-right:0; }
		.col25 { width:100%; margin-left:0; margin-right:0; }
		.col75 { width:100%; margin-left:0; margin-right:0; }
		
		.imgOverflowRight { margin-left:0; width:100%; }
		.imgBarman { width:70%; margin-left:15%; transform:translateY(-5%); }
		.contentOverImg { z-index:20; margin-top:-7em; }
		.claimOverImg { font-size:6vw; }
		.claimUnderImg { font-size:6vw; }
		.piefotoTxt { margin-left:0; }
		
		.prodIntro { flex-direction:row; }
		.prodIntroTxt { order:2; }
		.botellaHolder { max-width:70px; margin:0 3em 2em 3em; }
		
		.colCoctel55 { width:100%; margin:0 0 1.5em 0; }
        .colCoctel45 { width:100%; order:1; margin:0; }
		.coctelTxtLeft { width:100%; margin-left:0; }
		.coctelTxtRight { width:100%; margin-left:0; }
		
		.contactTxt { margin-left:0; }
        .contactMap { transform: scale(2) translate(-26%,0); }
		
	}

/*
	@media all and (min-width: 10px) and (max-width: 320px) {
		
    }
*/

@media only screen and (orientation : landscape) {
	.showInPortrait { display:none; }
	.showInLandscape { display:block; }

	#warningGiro { display:block; }

}


@media only screen and (orientation : portrait) {
	.showInPortrait { display:block; }
	.showInLandscape { display:none; }

	#warningGiro { display:none; }

}