@import url(http://fonts.googleapis.com/css?family=Dosis|Maven+Pro);

@import url(http://fonts.googleapis.com/css?family=Balthazar);



body{

overflow:hidden;

margin:0;

background:#000000;

}



.Entrar {

    overflow:visible;

}



body {

    margin-top: 25px;

    font-size: 21px;

    text-align: center;

    animation: fadein 2s;

    -moz-animation: fadein 2s; /* Firefox */

    -webkit-animation: fadein 2s; /* Safari and Chrome */

    -o-animation: fadein 2s; /* Opera */

}

@keyframes fadein {

    from {

        opacity:0;

    }

    to {

        opacity:1;

    }

}

@-moz-keyframes fadein { /* Firefox */

    from {

        opacity:0;

    }

    to {

        opacity:1;

    }

}

@-webkit-keyframes fadein { /* Safari and Chrome */

    from {

        opacity:0;

    }

    to {

        opacity:1;

    }

}

@-o-keyframes fadein { /* Opera */

    from {

        opacity:0;

    }

    to {

        opacity: 1;

    }

}





#social {

	position: absolute;

	top: 40px;

	right: 40px;

}



#main_logo {

	position: absolute;

	top: 14px;

	left: 14px;

}







#hoverscroll-go {

 width: 200px;

height: 100%;

background-color: gray;

position: fixed;

padding-left: 50px;

opacity: 0.5;

right: 0;

z-index:9999;

}



#hoverscroll-back {

 width: 200px;

height: 100%;

background-color: gray;

position: fixed;

padding-left: 50px;

opacity: 0.5;

left: 0;

z-index:9999;

}



#p-pattern{

  position: fixed;

  background:url(../images/pattern.png);

  top: 0; 

  left: 0; 

  width: 100%;

  height: 100%;}



#p-portada{

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  overflow: hidden;

  }

  

#p-portada > video {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



hr {

    border: 0;

    border-bottom: 1px dashed #ccc;

    background: #999;

}



#set-height  {

  display block

  height 13500px}

  

#p-portada{

  position: fixed;

  top: 0; 

  left: 0; 

  width: 100%}

  

#p-pescador{

  position: fixed;

  top: 0; 

  left: 0; 

  width: 100%}

  

#p-comunidad{

  position: fixed;

  top: 0; 

  left: 0;

  background-color: #000;

  width: 100%}

  

#p-arte{

  position: fixed;

  top: 0; 

  left: 0; 

  background-color: #fff;

  width: 100%}



#info {

  position: fixed;

  top: 300px;

  left: 300px;

  background-color: rgba(0,0,0,0.5);

  color: #fff;

  padding: 20px;

  z-index: 9999;

  visibility:hidden;

}



::selection {color:white;background:#4c4b53;}

::-moz-selection {color:white;background:#4c4b53;}



button {

	border: none;

	padding: 0px;

	background: transparent;

	cursor: pointer;

	display: inline-block;

	margin: 3px 2px;

	-webkit-transition: all 0.2s ease-out;

	-moz-transition: all 0.2s ease-out;

	-o-transition: all 0.2s ease-out;

	transition: all 0.2s ease-out;

}



button:hover {

	background: #A5281B;

}



.vertical-alignment-helper {

    display:table;

    height: 100%;

    width: 100%;

}

.vertical-align-center {

    /* To center vertically */

    display: table-cell;

    vertical-align: middle;

}



.md-modal {

    position: fixed;

    top: 50%;

    left: 50%;

    width: 50%;

    max-width: 630px;

    min-width: 320px;

    height: auto;

    z-index: 2000;

    visibility: hidden;

    backface-visibility: hidden;

    transform: translateX(-50%) translateY(-50%);

}

 

.md-show {

    visibility: visible;

}

 

.md-overlay {

    position: fixed;

    width: 100%;

    height: 100%;

    visibility: hidden;

    top: 0;

    left: 0;

    z-index: 1000;

    opacity: 0;

    background: rgba(143,27,15,0.8);

    transition: all 0.3s;

}

 

.md-show ~ .md-overlay {

    opacity: 1;

    visibility: visible;

}



.md-perspective,

.md-perspective body {

    height: 100%;

    overflow: hidden;

}

 

.md-perspective body  {

    background: #222;

    perspective: 600px;

}

 

.container {

    background: #e74c3c;

    min-height: 100%;

}



@font-face {

    font-family: 'basetwelvemedium';

    src: url('../font/basetwelveserif-webfont.eot');

    src: url('../font/basetwelveserif-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font/basetwelveserif-webfont.woff2') format('woff2'),

         url('../font/basetwelveserif-webfont.woff') format('woff'),

         url('../font/basetwelveserif-webfont.ttf') format('truetype'),

         url('../font/basetwelveserif-webfont.svg#basetwelvemedium') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'basetwelvemediumSmall';

    src: url('../font/basetwelveserifsmallcaps-webfont.eot');

    src: url('../font/basetwelveserifsmallcaps-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font/basetwelveserifsmallcaps-webfont.woff2') format('woff2'),

         url('../font/basetwelveserifsmallcaps-webfont.woff') format('woff'),

         url('../font/basetwelveserifsmallcaps-webfont.ttf') format('truetype'),

         url('../font/basetwelveserifsmallcaps-webfont.svg#basetwelvemedium') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'alegreya_scregular';

    src: url('../font/alegreyasc-regular-webfont.eot');

    src: url('../font/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font/alegreyasc-regular-webfont.woff2') format('woff2'),

         url('../font/alegreyasc-regular-webfont.woff') format('woff'),

         url('../font/alegreyasc-regular-webfont.ttf') format('truetype'),

         url('../font/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'engravers_gothicregular';

    src: url('../font/engravers-gothic-webfont.eot');

    src: url('../font/engravers-gothic-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font/engravers-gothic-webfont.woff2') format('woff2'),

         url('../font/engravers-gothic-webfont.woff') format('woff'),

         url('../font/engravers-gothic-webfont.ttf') format('truetype'),

         url('../font/engravers-gothic-webfont.svg#engravers_gothicregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'engravers_lh_facebold';

    src: url('../font/engravers.eot');

    src: url('../font/engravers.eot?#iefix') format('embedded-opentype'),

         url('../font/engravers.woff2') format('woff2'),

         url('../font/engravers.woff') format('woff'),

         url('../font/engravers.ttf') format('truetype'),

         url('../font/engravers.svg#engravers_lh_facebold') format('svg');

    font-weight: normal;

    font-style: normal;



}



#Texto{

	color:#000;

	font-family: 'engravers_lh_facebold';

}



#Texto a{

	color:#900;

	-webkit-transition: all 0.2s ease-out;

	-moz-transition: all 0.2s ease-out;

	-o-transition: all 0.2s ease-out;

	transition: all 0.2s ease-out;

}



#Texto a:hover{

	color:#000;

	text-decoration:none;

}



#Texto-w{

	color:#000;

	font-family: 'engravers_lh_facebold';

}



#Texto-w a{

	color:#FFE1E1;

	-webkit-transition: all 0.2s ease-out;

	-moz-transition: all 0.2s ease-out;

	-o-transition: all 0.2s ease-out;

	transition: all 0.2s ease-out;

}



#Texto-w a:hover{

	color:#000;

	text-decoration:none;

}











.TextoPescador{

	color:#000;

	font-family: 'basetwelvemedium';

	font-size:15px;

	text-align: justify;

    text-justify: inter-word;

}



.TituloBotella{

	color: #000;

	font-family: 'basetwelvemediumSmall';

	font-size: 24px;

	height: 35px;

	width:278px;

	line-height: 28px;

	text-align: center;

	padding-left: 10px;

	padding-right: 10px;

	border: #000 solid 2px;

	letter-spacing: 6px;

	-webkit-transition: all 0.2s ease-out;

	-moz-transition: all 0.2s ease-out;

	-o-transition: all 0.2s ease-out;

	transition: all 0.2s ease-out;

}



.TituloBotellaBig{

	color: #000;

	font-family: 'basetwelvemediumSmall';

	font-size: 24px;

	height: 63px;

	width:278px;

	line-height: 28px;

	text-align: center;

	padding-left: 10px;

	padding-right: 10px;

	border: #000 solid 2px;

	letter-spacing: 6px;

	-webkit-transition: all 0.2s ease-out;

	-moz-transition: all 0.2s ease-out;

	-o-transition: all 0.2s ease-out;

	transition: all 0.2s ease-out;

}



.TextoBotellas{

	color:#000;

	font-family: 'basetwelvemedium';

	font-size:16px;

	text-align: justify;

}



.TextoContacto{

	color:#000;

	font-family: 'basetwelvemedium';

	font-size:40px;

	text-align: justify;

    text-justify: inter-word;

}



.TextoContacto a{

	color:#000;

	text-decoration:none;

}



.TextoContacto a:hover{

	color:#333;

	text-decoration:none;

}



.TextoPescadorMenu{

	color:#fff;

	font-family: 'engravers_gothicregular';

	font-size:14px;

}



.PescadorCatalogo{

color: #000;

font-family: 'basetwelvemediumSmall';

font-size: 16px;

/* height: 35px; */

/* width: 329px; */

line-height: 28px;

text-align: center;

padding-left: 10px;

padding-right: 118px;

border: #000 solid 2px;

letter-spacing: 1px;

-webkit-transition: all 0.2s ease-out;

-moz-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}









a.PescadorCatalogo:link{

	text-decoration:none;

	color: #fff;

}



a.PescadorCatalogo:hover{

	font-size: 18px;

	color: #fff;

	background-color:#000;

}



.PescadorEntrada{

	color: #fff;

	display: block;

	font-family: 'basetwelvemediumSmall';

	font-size: 40px;

	width:80px;

	height: 80px;

	line-height: 72px;

	text-align: center;

	padding-left: 10px;

	padding-right: 10px;

	border: transparent solid 2px;

	-webkit-transition: all 0.2s ease-out;

	-moz-transition: all 0.2s ease-out;

	-o-transition: all 0.2s ease-out;

	transition: all 0.2s ease-out;

}



a.PescadorEntrada:link{

	text-decoration:overline;

	color: #fff;

}



a.PescadorEntrada:hover{

	font-size: 46px;

	color: #fff;

}





.PescadorMenu{

color: #fff;

font-family: 'engravers_gothicregular';

font-size: 10px;

text-transform: uppercase;

height: 30px;

line-height: 28px;

text-align: center;

letter-spacing: 2px;

padding: 10px;

-webkit-transition: all 0.2s ease-out;

-moz-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}



a.PescadorMenu:link{

	text-decoration:none;

	color: #fff;

}



a.PescadorMenu:hover{

	color: #CCC;

}



/* Eric Meyer's CSS Reset */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

/* End of Eric Meyer's CSS Reset */



html {

	height: 100%;

}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {

	display: block;

}







.clearfix:before,

.clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }



.outer-div { position: relative; float: right; right: 50%; }

.inner-div { position: relative; float: right; right: -50%; }





#navMobile{

	height:auto;

	top:-60px;

  left:0;

  width: 100%;

  position:fixed;

  z-index:9999;

}



#Frau {

position: fixed;

width:100%;

height:660px;

margin-left:0%;

left:0px;

margin-top:-330px;

top:50%;

overflow: hidden;

}



#Frau-outside {

position: fixed;

width:100%;

height:100%;

margin-left:0%;

left:0px;

top: 0px;

overflow: hidden;

}



#Scene_Mezcal{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(1);

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	-moz-transform: scale(1);

}



#Scene-outside{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(1);

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	-moz-transform: scale(1);

}



#ColeccionScreen {

width: 16000px;

height: 100%; 

position: absolute;

top:0px;

left:opx;

}



.hey-parallax{

	position: absolute;

	left: 0px;

	top: 0px;

}





.hey-zombie{

	position: absolute;

	left: 50%;

	top: 0px;

}



div {

	display: block;

}



/* Elementos en Escena */







#Portada {

width: 3000px;

height: 660px;

position: absolute;

top: 0px;

left:0px;

}



#Pescador {

width: 3000px;

height: 660px; 

position: absolute;

top: 0px;

left:3000px;

}



#Comunidad {

width: 3000px;

height: 660px; 

position: absolute;

top: 0px;

left:6000px;

}



#Cultura {

width: 3000px;

height: 660px; 

position: absolute;

top: 0px;

left:9000px;

}



#Espiritus {

width: 3000px;

height: 660px; 

position: absolute;

top: 0px;

left:12000px;

}



#Coleccion {

width: 22000px;

height: 660px; 

position: absolute;

top: 0px;

left:15000px;

}



#Contacto {

width: 3000px;

height: 660px; 

position: absolute;

top: 0px;

left:37000px;

}



#Outside {

width: 28000px;

position: absolute;

top: 0px;

left:opx;

height:1000px;

}



#Path {

width: 100%;

position: absolute;

top: 0px;

left:opx;

height:100%;

}



#BotellaPortada {

width: 460px;

height: 660px;

background-position:center; 

background-image:url('../images/botella_pescador.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:200px;

}



#key {

width: 20px;

height: 29px;

background-position:center; 

background-image:url('../images/key.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

margin: auto;

}



#Logo {

width: 460px;

height: 660px;

background-position:center; 

background-image:url('../images/logo.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:500px;

}



#Welcome {

width: 543px;

height: 299px;

background-position:center; 

background-image:url('../images/intro/cover_pescador.png');

background-repeat:no-repeat;

position: absolute;

top: 140px;

left:100px;

}



#intro_00 {

width: 460px;

height: 660px;

background-position:center; 

background-image:url('../images/botella_pescador.png');

background-repeat:no-repeat;

position: absolute;

}



#intro_01 {

width: 100%;

height: 1000px;

position: fixed;

}



#transition_01 {

width: 1414px;

height: 1310px;

background-position:center; 

background-image:url('../images/intro/abstract_01.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#black {

width: 2000px;

height: 2000px;

background:rgba(54,0,22,.7);

top: 0px;

position: relative;

left:-1000px;

}



#transition_02 {

width: 2017px;

height: 1310px;

background-position:center; 

background-image:url('../images/intro/abstract_04.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#sky_dragon {

width: 2000px;

height: 2000px;

background-position:center; 

background-image:url('../images/sky.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#sky_blur {

width: 2000px;

height: 2000px;

background-position:center; 

background-image:url('../images/sky_blur.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}







#abstract_1 {

width: 1414px;

height: 1310px;

background-position:center; 

background-image:url('../images/intro/abstract_1.png');

background-repeat:no-repeat;

position: absolute;

top: -200px;

left:1000px;

}



#abstract_2 {

width: 530px;

height: 1310px;

background-position:center; 

background-image:url('../images/intro/abstract_2.png');

background-repeat:no-repeat;

position: absolute;

top: -200px;

left:1800px;

}



#objeto_01 {

width: 284px;

height: 316px;

background-position:center; 

background-image:url('../images/pescador/objeto_01.png');

background-repeat:no-repeat;

position: absolute;

}



#objeto_02 {

width: 284px;

height: 316px;

background-position:center; 

background-image:url('../images/pescador/objeto_02.png');

background-repeat:no-repeat;

position: absolute;

}



#objeto_03 {

width: 284px;

height: 316px;

background-position:center; 

background-image:url('../images/pescador/objeto_03.png');

background-repeat:no-repeat;

position: absolute;

}



#objeto_04 {

width: 284px;

height: 316px;

background-position:center; 

background-image:url('../images/pescador/objeto_04.png');

background-repeat:no-repeat;

position: absolute;

}



#objeto_05 {

width: 284px;

height: 316px;

background-position:center; 

background-image:url('../images/pescador/objeto_05.png');

background-repeat:no-repeat;

position: absolute;

}



#objeto_06 {

width: 284px;

height: 316px;

background-position:center; 

background-image:url('../images/pescador/objeto_06.png');

background-repeat:no-repeat;

position: absolute;

}



#comunidad_01 {

width: 484px;

height: 359px;

background-position:center; 

background-image:url('../images/pescador/comunidad_01.png');

background-repeat:no-repeat;

position: absolute;

}



#comunidad_02 {

width: 952px;

height: 631px;

background-position:center; 

background-image:url('../images/pescador/comunidad_02.png');

background-repeat:no-repeat;

position: absolute;

}



#comunidad_03 {

width: 484px;

height: 359px;

background-position:center; 

background-image:url('../images/pescador/comunidad_03.png');

background-repeat:no-repeat;

position: absolute;

}



#comunidad_04 {

width: 1000px;

height: 660px;

background-position:center; 

background-image:url('../images/pescador/comunidad_04.png');

background-repeat:no-repeat;

position: absolute;

}



#comunidad_05 {

width: 1000px;

height: 660px;

background-position:center; 

background-image:url('../images/pescador/comunidad_05.png');

background-repeat:no-repeat;

position: absolute;

}



#cover_01 {

width: 1000px;

height: 660px;

background-position:center; 

background-image:url('../images/pescador/cover_01.png');

background-repeat:no-repeat;

position: absolute;

}



#abbey_01 {

width: 1124px;

height: 1584px;

background-position:center; 

background-image:url('../images/pescador/abbey_01.png');

background-repeat:no-repeat;

position: absolute;

}



#abbey_02 {

width: 1124px;

height: 1584px;

background-position:center; 

background-image:url('../images/pescador/abbey_02.png');

background-repeat:no-repeat;

position: absolute;

}



#cover_02 {

width: 1397px;

height: 660px;

background-position:center; 

background-image:url('../images/pescador/cover_02.png');

background-repeat:no-repeat;

position: absolute;

}



#cover_03 {

width: 1118px;

height: 660px;

background-position:center; 

background-image:url('../images/pescador/cover_03.png');

background-repeat:no-repeat;

position: absolute;

}



#amuleto {

width: 92px;

height: 92px;

background-position:center; 

background-image:url('../images/pescador/amuleto.png');

background-repeat:no-repeat;

position: absolute;

}



#arte_01 {

width: 1000px;

height: 870px;

background-position:center; 

background-image:url('../images/pescador/arte_01.png');

background-repeat:no-repeat;

position: absolute;

}



#arte_espiritus {

width: 1000px;

height: 200px;

background-position:center; 

background-image:url('../images/espiritus.png');

background-repeat:no-repeat;

position: absolute;

}



#arte_01_botella {

width: 1000px;

height: 660px;

background-position:center; 

background-image:url('../images/pescador/arte_01_botella.png');

background-repeat:no-repeat;

position: absolute;

}



#arte_02 {

width: 844px;

height: 1000px;

background-position:center; 

background-image:url('../images/pescador/arte_02.png');

background-repeat:no-repeat;

position: absolute;

}



#arte_03 {

width: 314px;

height: 800px;

background-position:center; 

background-image:url('../images/pescador/medalla.png');

background-repeat:no-repeat;

position: absolute;

}



#espiritus_01 {

width: 1735px;

height: 849px;

background-position:center; 

background-image:url('../images/intro/espiritus_01.png');

background-repeat:no-repeat;

position: absolute;

}



#espiritus_02 {

width: 1735px;

height: 849px;

background-position:center; 

background-image:url('../images/intro/espiritus_02.png');

background-repeat:no-repeat;

position: absolute;

}



#Introduccion {

width: 2000px;

height: 660px;

background-position:center; 

background-image:url('../images/intro.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#texture_pescador {

width: 1811px;

height: 660px;

background-position:center; 

background-image:url('../images/texture_pescador.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#jc-body {

width: 2000px;

height: 1000px;

background-position:center; 

background-image:url('../images/jc-body.png');

background-repeat:no-repeat;

position: fixed;

top: 0px;

left:0px;

}



#jc-backend {

width: 2000px;

height: 1000px;

background-position:center; 

background-image:url('../images/backend-jc.jpg');

background-repeat:no-repeat;

position: fixed;

top: 0px;

left:0px;

}



#form {

width: 1005px;

height: 450px;

background-position:center; 

position: absolute;

top: 0px;

left:0px;

}



#texture_arte {

width: 1640px;

height: 660px;

background-position:center; 

background-image:url('../images/texture_arte.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#soul_child {

width: 471px;

height: 882px;

background-position:center; 

background-image:url('../images/texture_soulchild.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#soul_grandma {

width: 247px;

height: 639px;

background-position:center; 

background-image:url('../images/texture_grandma.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#soul_job {

width: 1012px;

height: 520px;

background-position:center; 

background-image:url('../images/job.png');

background-repeat:no-repeat;

position: absolute;

top: 0px;

left:0px;

}



#intro_Container01 {

width: 2000px;

height: 660px;

position: absolute;

top: 0px;

left:2000px;

}



#intro_Container02 {

width: 2000px;

height: 660px;

position: absolute;

top: 0px;

left:4000px;

}



#intro_Container03 {

width: 2000px;

height: 660px;

position: absolute;

top: 0px;

left:6000px;

}



#Last-agaves {

width: 15000px;

height: 660px;

background-position:center; 

position: absolute;

top: 260px;

background-image:url('../images/last_agaves.png');

background-repeat:repeat-x;

margin: 0 auto;

}



#Front-agaves {

width: 20000px;

height: 182px;

background-position:center; 

position: absolute;

top: 490px;

background-image:url('../images/front_agaves.png');

background-repeat:repeat-x;

margin: 0 auto;

}





#Catalogo {

width: 890px;

height: 660px;

left:7000px;

background-position:center; 

position: absolute;

top: 0px;

margin: 0 auto;



}





#catalogo_botellas {

width: 100%; 

display: block; 

top: 32px;

left: 0px;

position:absolute;

}





#abstract_01 {

width: 1414px;

height: 1310px;

background-position:center; 

background-image:url('../images/intro/abstract_01.png');

background-repeat:no-repeat;

position: absolute;

}



#abstract_02 {

width: 1414px;

height: 1310px;

background-position:center; 

background-image:url('../images/abstract_02.png');

background-repeat:no-repeat;

position: absolute;

top: -200px;;

}



#abstract_03 {

width: 638px;

height: 452px;

background-position:center; 

background-image:url('../images/abstract_03.png');

background-repeat:no-repeat;

position: absolute;

top: -200px;

}



#abstract_04 {

width: 2017px;

height: 1310px;

background-position:center; 

background-image:url('../images/abstract_04.png');

background-repeat:no-repeat;

position: absolute;

top: -200px;

}





/* Tequilas */

#contenedor_edge {

width: 1020px;

height: 660px;

position: absolute;

top:0px;

left:350px;

overflow:hidden;

}



#contenedor_text {

width: 470px;

height: 125px;

position: absolute;

top: 290px;

left: 330px;

}



#contenedor01 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:0px;

}



#contenedor01_img {

width: 2000px;

height: 660px;

position: absolute;

background-position:center; 

background-image:url('../images/botellas/01.png');

background-repeat:no-repeat;

top:0px;

left:0px;

}





#contenedor01_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/tepeztate.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}





#contenedor02 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:2000px;

}



#contenedor02_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/02.png');

background-repeat:no-repeat;

}



#contenedor02_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/tobala.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor03 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:4000px;

}



#contenedor03_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/03.png');

background-repeat:no-repeat;

}



#contenedor03_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/cuishe.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor04 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:6000px;

}



#contenedor04_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/04.png');

background-repeat:no-repeat;

}



#contenedor04_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/espadin.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor05 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:8000px;

}



#contenedor05_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/05.png');

background-repeat:no-repeat;

}



#contenedor05_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/cuixito.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor06 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:10000px;

}



#contenedor06_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/06.png');

background-repeat:no-repeat;

}



#contenedor06_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/madrecuishe.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor07 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:12000px;

}



#contenedor07_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/07.png');

background-repeat:no-repeat;

}



#contenedor07_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/amarillo.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor08 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:14000px;

}



#contenedor08_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/08.png');

background-repeat:no-repeat;

}



#contenedor08_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/arroqueno.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor09 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:16000px;

}



#contenedor09_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/09.png');

background-repeat:no-repeat;

}



#contenedor09_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/pechuga.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor10 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:18000px;

}



#contenedor10_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/10.png');

background-repeat:no-repeat;

}



#contenedor10_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/coyote.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#contenedor11 {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

left:20000px;

}



#contenedor11_img {

width: 2000px;

height: 660px;

position: absolute;

top:0px;

background-position:center; 

background-image:url('../images/botellas/11.png');

background-repeat:no-repeat;

}



#contenedor11_botella {

width: 480px;

height: 660px;

background-position:center; 

background-image:url('../images/botellas/marteno.png');

background-repeat:no-repeat;

position: absolute;

top:0px;

left:600px;

}



#Bar_Pescador{

width: 100%;

top: 0px;

padding:10px;

z-index: 100;

margin: 0 auto;

left:0px;

height:60px;

position:fixed;

background:#000;

text-align:center;

}



#Bar_Pescador_Footer{

width: 100%;

bottom: 0px;

padding:10px;

z-index: 100;

margin: 0 auto;

left:0px;

height:60px;

position:fixed;

background:#000;

text-align:center;

}



#Bar_Pescador_Botellas{

width: 380px;

top: 30%;

z-index: 100;

margin: 0 auto;

height: auto;

position: fixed;

text-align: left;

}



@media only screen and (max-width: 1380px) {

#Frau {

position: fixed;

width:100%;

height:660px;

margin-left:0%;

left:0px;

margin-top:-250px;

top:50%;

overflow: hidden;

}



#Scene_Mezcal{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(.8);

	-webkit-transform: scale(.8);

	-ms-transform: scale(.8);

	-moz-transform: scale(.8);

}



#Scene-outside{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(.7);

	-webkit-transform: scale(.7);

	-ms-transform: scale(.7);

	-moz-transform: scale(.7);

}



	}



@media only screen and (max-width: 1280px) {

#Frau {

position: fixed;

width:100%;

height:660px;

margin-left:0%;

left:0px;

margin-top:-250px;

top:50%;

overflow: hidden;

}



#Scene_Mezcal{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(.8);

	-webkit-transform: scale(.8);

	-ms-transform: scale(.8);

	-moz-transform: scale(.8);

}



#Scene-outside{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(.7);

	-webkit-transform: scale(.7);

	-ms-transform: scale(.7);

	-moz-transform: scale(.7);

}



	}

	

	@media only screen and (max-width: 980px) {

	#presentador {

	visibility:hidden;

}

}

@media only screen and (max-width: 800px) {

#Frau {

position: fixed;

width:100%;

height:660px;

margin-left:0%;

left:0px;

margin-top:-160px;

top: 60%;

overflow: hidden;

}



	#Scene_Mezcal{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(.5);

	-webkit-transform: scale(.5);

	-ms-transform: scale(.5);

	-moz-transform: scale(.5);

}



#Bar_Pescador_Botellas{

	top: 20%;

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(.7);

	-webkit-transform: scale(.7);

	-ms-transform: scale(.7);

	-moz-transform: scale(.7);

}







#Bar_Pescador_Footer{

	visibility:hidden;

}



	}

	

@media only screen and (max-width: 600px) {

#Frau {

position: fixed;

width:100%;

height:660px;

margin-left:0%;

left:0px;

margin-top:-160px;

top: 60%;

overflow: hidden;

}





	#Scene_Mezcal{

	transform-origin: center;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	-moz-transform-origin: center;

	

	transform: scale(.5);

	-webkit-transform: scale(.5);

	-ms-transform: scale(.5);

	-moz-transform: scale(.5);

}



#Scene-outside{

	visibility:hidden;

}



#Bar_Pescador{

	visibility:hidden;

}







	}





.btn{font-family: 'fff_bionicregular'; font-size:8px; padding:10px;border:1px solid #fff;background-color:transparent;color:#fff; text-transform:uppercase;display:inline-block}

.btn:hover{border-style:dashed;cursor:pointer}

.btn:active,.demo-btn:active{border-style:dotted; background-color:#333;}



.choose {

	background-color:#000000;

	-webkit-border-top-left-radius:42px;

	-moz-border-radius-topleft:42px;

	border-top-left-radius:42px;

	-webkit-border-top-right-radius:42px;

	-moz-border-radius-topright:42px;

	border-top-right-radius:42px;

	-webkit-border-bottom-right-radius:42px;

	-moz-border-radius-bottomright:42px;

	border-bottom-right-radius:42px;

	-webkit-border-bottom-left-radius:42px;

	-moz-border-radius-bottomleft:42px;

	border-bottom-left-radius:42px;

	text-indent:0px;

	display:inline-block;

	color:#ffffff;

	font-family:Arial;

	font-size:16px;

	font-weight:bold;

	font-style:normal;

	height:28px;

	line-height:28px;

	width:30px;

	text-decoration:none;

	text-align:center;

}.choose:hover {

	background-color:#030303;

}.choose:active {

	position:relative;

	top:1px;

}



.pescador {

	display: inline-block;

	position: relative;

	text-indent: -9999px;

	width: 67px;

	height: 67px;

	background: url(../images/button_01.png) no-repeat;

}



.pescador span {

	position: absolute;

	top: 0; left: 0; bottom: 0; right: 0;

	background: url(../images/button_01_hover.png) no-repeat;

	background-position: 0px 0;

	opacity: 0;

	-webkit-transition: opacity 0.5s;

	-moz-transition:    opacity 0.5s;

	-o-transition:      opacity 0.5s;

}



.pescador:hover span {

	opacity: 1;

}



.coleccion {

	display: inline-block;

	position: relative;

	text-indent: -9999px;

	width: 67px;

	height: 67px;

	background: url(../images/button_02.png) no-repeat;

}



.coleccion span {

	position: absolute;

	top: 0; left: 0; bottom: 0; right: 0;

	background: url(../images/button_02_hover.png) no-repeat;

	background-position: 0px 0;

	opacity: 0;

	-webkit-transition: opacity 0.5s;

	-moz-transition:    opacity 0.5s;

	-o-transition:      opacity 0.5s;

}



.coleccion:hover span {

	opacity: 1;

}



.contacto {

	display: inline-block;

	position: relative;

	text-indent: -9999px;

	width: 67px;

	height: 67px;

	background: url(../images/button_03.png) no-repeat;

}



.contacto span {

	position: absolute;

	top: 0; left: 0; bottom: 0; right: 0;

	background: url(../images/button_03_hover.png) no-repeat;

	background-position: 0px 0;

	opacity: 0;

	-webkit-transition: opacity 0.5s;

	-moz-transition:    opacity 0.5s;

	-o-transition:      opacity 0.5s;

}



.contacto:hover span {

	opacity: 1;

}



@-webkit-keyframes agave01 {

  0%   { opacity: 0; }

  40% { opacity: 1; top: 10px; }

  60% { opacity: 1; top: 10px; }

  100% { opacity: 0; }

}

@-moz-keyframes agave01 {

  0%   { opacity: 0; }

  40% { opacity: 1; top: 10px; }

  60% { opacity: 1; top: 10px; }

  100% { opacity: 0; }

}

@-o-keyframes agave01 {

  0%   { opacity: 0; }

  40% { opacity: 1; top: 10px; }

  60% { opacity: 1; top: 10px; }

  100% { opacity: 0; }

}

@keyframes agave01 {

  0%   { opacity: 0; }

  40% { opacity: 1; top: 10px; }

  60% { opacity: 1; top: 10px; }

  100% { opacity: 0; }

}



/* Preloader */

#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000; /* change if the mask should have another color then white */
	z-index:9999; /* makes sure it stays on top */
}

#status {
	width:600px;
	height:600px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../img/loader.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}







.wrap {

  margin:0 auto;

  padding:0;



  

}

.site-nav {

  background: rgb(255,255,255);

  display: block;

  float: left;

  margin: 0;

  padding: 0 10px 10px 10px;

  width: 100%;

  text-align: center;

}

.site-nav-wrap {

  height: 75px;

  float: left;

  overflow: hidden;

  width: 100%;

}

.site-nav-toggle {

  background-color: rgb(255,255,255);

  color: rgb(3,3,3);

  clear: both;

  cursor: pointer;

  display: block;

  height: 50px;

  line-height: 73px;

  margin: -20px auto 40px auto;

  text-align: center;

  color: #000;

font-size: 14px;

font-family: 'alegreya_scregular';

text-transform:uppercase;

  transition: color .5s ease;

  width: 100px;

}

.site-nav-toggle:hover {

  background-color: rgb(226,226,226);

  color: rgb(200,200,200);

  transition: color .5s ease;

}



.header-unit {

  height: 100%;

width: 100%;

}

#video-container {

	position: absolute;

}

#video-container {

	top:0%;

	left:0%;

	height:100%;

	width:100%;

	overflow: hidden;

}

video {

	position:absolute;

	z-index:0;

}

video.fillWidth {

	width: 100%;

}





#loader-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

}

#loader {

    display: block;

    position: relative;

    left: 50%;

    top: 50%;

    width: 500px;

    height: 300px;

    margin: -150px 0 0 -250px;

    

	background:url(../images/loader.png);

	background-repeat:no-repeat;

	

   



    z-index: 1001;

}



    #loader:before {

        content: "";

        position: absolute;

        top: 5px;

        left: 5px;

        right: 5px;

        bottom: 5px;

        border-radius: 50%;

        border: 3px solid transparent;

        border-top-color: #e74c3c;



        

    }



    #loader:after {

        content: "";

        position: absolute;

        top: 15px;

        left: 15px;

        right: 15px;

        bottom: 15px;

        border-radius: 50%;

        border: 3px solid transparent;

        border-top-color: #f9c922;



        

    }



    @-webkit-keyframes spin {

        0%   { 

            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(0deg);  /* IE 9 */

            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

        }

        100% {

            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(360deg);  /* IE 9 */

            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */

        }

    }

    @keyframes spin {

        0%   { 

            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(0deg);  /* IE 9 */

            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

        }

        100% {

            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(360deg);  /* IE 9 */

            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */

        }

    }



    #loader-wrapper .loader-section {

        position: fixed;

        top: 0;

        width: 51%;

        height: 100%;

        background: #000;

        z-index: 1000;

        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */

        -ms-transform: translateX(0);  /* IE 9 */

        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */

    }



    #loader-wrapper .loader-section.section-left {

        left: 0;

    }



    #loader-wrapper .loader-section.section-right {

        right: 0;

    }



    /* Loaded */

    .loaded #loader-wrapper .loader-section.section-left {

        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: translateX(-100%);  /* IE 9 */

                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */



        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  

                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

    }



    .loaded #loader-wrapper .loader-section.section-right {

        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: translateX(100%);  /* IE 9 */

                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */



-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  

        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

    }

    

    .loaded #loader {

        opacity: 0;

        -webkit-transition: all 0.3s ease-out;  

                transition: all 0.3s ease-out;

    }

    .loaded #loader-wrapper {

        visibility: hidden;



        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: translateY(-100%);  /* IE 9 */

                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */



        -webkit-transition: all 0.3s 1s ease-out;  

                transition: all 0.3s 1s ease-out;

    }

    

    /* JavaScript Turned Off */

    .no-js #loader-wrapper {

        display: none;

    }

    .no-js h1 {

        color: #222222;

    }



    #content {

        margin: 0 auto;

        padding-bottom: 50px;

        width: 80%;

        max-width: 978px;

    }  







/* ==========================================================================

   Helper classes

   ========================================================================== */



/*

 * Image replacement

 */



.ir {

    background-color: transparent;

    border: 0;

    overflow: hidden;

    /* IE 6/7 fallback */

    *text-indent: -9999px;

}



.ir:before {

    content: "";

    display: block;

    width: 0;

    height: 150%;

}



/*

 * Hide from both screenreaders and browsers: h5bp.com/u

 */



.hidden {

    display: none !important;

    visibility: hidden;

}



/*

 * Hide only visually, but have it available for screenreaders: h5bp.com/v

 */



.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}



/*

 * Extends the .visuallyhidden class to allow the element to be focusable

 * when navigated to via the keyboard: h5bp.com/p

 */



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

}



/*

 * Hide visually and from screenreaders, but maintain layout

 */



.invisible {

    visibility: hidden;

}



/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */



.clearfix:before,

.clearfix:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}



.clearfix:after {

    clear: both;

}



/*

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.clearfix {

    *zoom: 1;

}



/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   These examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */



@media only screen and (min-width: 35em) {

    /* Style adjustments for viewports that meet the condition */

}



@media print,

       (-o-min-device-pixel-ratio: 5/4),

       (-webkit-min-device-pixel-ratio: 1.25),

       (min-resolution: 120dpi) {

    /* Style adjustments for high resolution devices */

}



/* ==========================================================================

   Print styles.

   Inlined to avoid required HTTP connection: h5bp.com/r

   ========================================================================== */



@media print {

    * {

        background: transparent !important;

        color: #000 !important; /* Black prints faster: h5bp.com/s */

        box-shadow: none !important;

        text-shadow: none !important;

    }



    a,

    a:visited {

        text-decoration: underline;

    }



    a[href]:after {

        content: " (" attr(href) ")";

    }



    abbr[title]:after {

        content: " (" attr(title) ")";

    }



    /*

     * Don't show links for images, or javascript/internal links

     */



    .ir a:after,

    a[href^="javascript:"]:after,

    a[href^="#"]:after {

        content: "";

    }



    pre,

    blockquote {

        border: 1px solid #999;

        page-break-inside: avoid;

    }



    thead {

        display: table-header-group; /* h5bp.com/t */

    }



    tr,

    img {

        page-break-inside: avoid;

    }



    img {

        max-width: 100% !important;

    }



    @page {

        margin: 0.5cm;

    }



    p,

    h2,

    h3 {

        orphans: 3;

        widows: 3;

    }



    h2,

    h3 {

        page-break-after: avoid;

    }

}