sxarticle,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden] {
	display: none;
}

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

a:focus {
	outline: thin dotted;
}

a:active,
a:hover {
	outline: 0;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

mark {
	background: #ff0;
	color: #000;
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}

pre {
	white-space: pre-wrap;
}

q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}

button,
input {
	line-height: normal;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

*,
*::after,
*::before {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}


body {
	--color-text: #fff;
	--color-bg: #ffffff;
	--color-link: #fff;
	--color-link-dos: #8ED2CC;
	--color-link-hover: #f20c40;
	--color-bg-item1: #15171b;
	--color-bg-item2: #FDF3CB;
	--color-bg-item3: #ffffff;
	--color-bg-item4: #1d2027;
	--color-bg-item5: #8ED2CC;
	--color-item-alt: #57535a;
	--color-quote: #000000;
	--color-info: #57535a;
	--color-title: #e23434;
	--color-tagline: #B19F5A;
	font-family: "Arquitecta W00 Book";
	min-height: 100vh;
	color: #57585c;
	color: var(--color-text);
	background-color: #fff;
	background-color: var(--color-bg);
	overflow: scroll;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;


}

.color {
	color: #252525;
	outline: none;
	transition: color 0.7s;
}

.color:hover,
.color:focus {
	color: var(--color-bg-item5);
}

@font-face {
	font-family: "ArquitectaMedium";
	src: url("../font/40fbe6a81ff9ec94593d0436835fa47f.eot");
	/* IE9*/
	src: url("../font/40fbe6a81ff9ec94593d0436835fa47f.eot?#iefix") format("embedded-opentype"),
		/* IE6-IE8 */
		url("../font/40fbe6a81ff9ec94593d0436835fa47f.woff2") format("woff2"),
		/* chrome、firefox */
		url("../font/40fbe6a81ff9ec94593d0436835fa47f.woff") format("woff"),
		/* chrome、firefox */
		url("../font/40fbe6a81ff9ec94593d0436835fa47f.ttf") format("truetype"),
		/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		url("../font/40fbe6a81ff9ec94593d0436835fa47f.svg#ArquitectaMedium") format("svg");
	/* iOS 4.1- */

}

@font-face {
	font-family: "Arquitecta W00 Book";
	src: url("../font/cdb48a54b84af37a9ca5d003f211707c.eot");
	/* IE9*/
	src: url("../font/cdb48a54b84af37a9ca5d003f211707c.eot?#iefix") format("embedded-opentype"),
		/* IE6-IE8 */
		url("../font/cdb48a54b84af37a9ca5d003f211707c.woff2") format("woff2"),
		/* chrome、firefox */
		url("../font/cdb48a54b84af37a9ca5d003f211707c.woff") format("woff"),
		/* chrome、firefox */
		url("../font/cdb48a54b84af37a9ca5d003f211707c.ttf") format("truetype"),
		/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		url("../font/cdb48a54b84af37a9ca5d003f211707c.svg#Arquitecta W00 Book") format("svg");
	/* iOS 4.1- */
}

.font-book {
	font-family: "Arquitecta W00 Book";
}

.font-medium {
	font-family: "ArquitectaMedium";
}

.green {
	--color-link-dos: #8ED2CC;
}




a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	transition: color 0.4s;
}

a:hover,
a:focus {
	color: var(--color-link-dos);
}

button:focus,
a:focus {
	outline: none;
}

hr {
	border: .5px solid #B19F5A;
	width: 0;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Icons */
.icon {
	display: block;
	width: 1.8em;
	height: 2.2em;
	margin: 0 auto;
	fill: currentColor;
}

/* Icons */
.logo {
	display: block;
	width: 7em;
	height: 3em;
	margin: 0 auto;
	fill: currentColor;
	color: var(--color-bg-item1);
}

.sections__header {
	padding: 2rem 1rem 0 .8rem;
	display: flex;
	position: absolute;
}

main {
	position: relative;
	width: 100%;
}

.button {
	display: inline-block;
	padding: .8rem 1.5rem;
	background-color: var(--color-tagline);
	color: #fff;
	margin-right: 1rem;
	transition-duration: 0.7s;
	border-radius: 0;
	width: 8rem;
	text-align: center;
}

.button--ghost {
	background-color: var(--color-tagline);
	color: white;
}

.button--border:hover {


	border: .5px solid #8ED2CC;
}

.button--border {
	background-color: var(--color-tagline);
	color: white;
	border: .5px solid white;
}

.button--ghost:hover {
	background-color: var(--color-bg-item1);
	color: #fff;
}

.frame {
	position: relative;
	z-index: 199;
}

.content {
	text-align: center;
	position: relative;
	z-index: 100;
}

.background {
	perspective: 1000px;
}

.background,
.background__copy {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: transparent;
	z-index: 1;
}

.background__copy {
	opacity: 0.3;
}

/* Header */
.codrops-header {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: flex-start;
	justify-content: left;
	justify-items: center;
	align-self: start;

}

.codrops-header__title {
	font-size: 1rem;
	line-height: 1;
	font-weight: normal;
	margin: 0 1rem;

}

.info {
	display: block;
	grid-area: info;
	margin: 1rem 0;
	justify-self: end;
	text-align: center;
}

.github {
	display: block;
	margin: 1rem 0 0 0;

}

/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: flex;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	font-size: 0.85rem;
}

.codrops-icon {
	display: inline-block;
	padding: 0.25em;

}

.content__title {
	font-family: "ArquitectaMedium";
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
	font-size: 10vw;
	font-weight: normal;
	line-height: 0.8;
	text-transform: lowercase;
	margin: 0;
	color: var(--color-title);
	z-index: 199;
}

.content__tagline {
	color: var(--color-tagline);
	margin: 1rem 0 0 0;
	font-weight: bold;
	font-size: 1rem;
	letter-spacing: 0.125rem;
	word-spacing: 0.25rem;
	text-transform: uppercase;
	text-align: center;
	z-index: 199;
}

.action {
	background: none;
	border: 0;
	color: #ffffff;
	cursor: pointer;
	padding: 0;
}

.action-black {
	background: none;
	border: 0;
	color: #000;
	cursor: pointer;
	padding: 0;


}

.action-black-historia {
	background: none;
	border: 0;
	color: #000000;
	cursor: pointer;
	padding: 0;


}

.action-black-haiku {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 0;


}

.action--menu {
	pointer-events: auto;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 1000;
}

.action--menu-id {
	pointer-events: auto;
	position: absolute;
	top: 1rem;
	right: 4.5rem;
	z-index: 1;

}

.menu--open .action--menu {
	pointer-events: none;
}

.action--close {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	z-index: 1000;
	opacity: 0;
	padding: 0 0.5rem;
}

.icon--menu {
	width: 2.5rem;

}

.icon--close {
	width: 1.3rem;
	color: aqua;
}

.menu {
	text-align: center;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(2, 70% 30%);
	pointer-events: none;
}

.min-h-mid-screen {
	height: 350px;
}

.menu--open {
	pointer-events: auto;
}

.menu__item {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.menu__item-inner {
	overflow: hidden;
	transform: translate3d(100%, 0, 0);
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.menu__item--1 .menu__item-inner {
	background: var(--color-bg-item1);
	width: 102%;
}

.menu__item--2 .menu__item-inner {
	background: transparent;
	width: 102%;
}

.menu__item--3 .menu__item-inner {
	background: var(--color-bg-item3);
	width: 102%;
}

.menu__item--4 .menu__item-inner {
	background: var(--color-bg-item4);
	width: 102%;
}

.menu__item--5 .menu__item-inner {
	background: var(--color-bg-item5);
	width: 102%;
}

.menu__item--2,
.menu__item--4,
.menu__item--5 {
	display: none;
}

/*.label {
	display: none;
}*/

.mainmenu__item {
	opacity: 0;
}

.mainmenu__item {
	position: relative;
	overflow: hidden;
	transition: color 0.1s;
	margin: 1rem 0;
	display: block;

}

.sidemenu__item {
	position: relative;
	overflow: hidden;
	transition: color 0.1s;
	margin: 1rem 0;
	display: block;

}

.menu-siguenos {
	font-size: 6vw;
}

.sidemenu__item-inner {
	display: block;
	transform: translate3d(0, 100%, 0);

}

.menu__item-map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/v2-gifbotellas.gif) no-repeat 50% 50%;
	background-size: cover;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.menu__item-inner:hover .menu__item-map {
	transform: scale3d(1.1, 1.1, 1);
}

.menu__item-hoverlink {
	font-weight: bold;
	text-transform: capitalize;
	position: relative;
	z-index: 1000;
	display: block;
}

.menu__item-hoverlink:hover {
	color: var(--color-link);
}

.quote {
	font-size: 2rem;
	padding: 1rem;
	text-align: center;
	max-width: 70%;
	color: var(--color-quote);
	font-family: "Arquitecta W00 Book", serif;
}

.menu__item-link {
	text-align: left;
	align-self: flex-start;
	justify-self: start;
	font-size: 1.5rem;
	width: 100%;
	line-height: 1;
	padding: 2rem;
	margin: 3rem 0 auto;
	display: flex;
	flex-direction: column;
	height: calc(100% - 3rem);

}

.menu__item-link::after {
	content: '\27F6';
	display: block;
	margin-top: auto;
	font-size: 0.95rem;
}

.action-white {
	background: none;
	border: 0;
	color: #ffffff;
	cursor: pointer;
	padding: 0;
}

.historia {
	position: relative;
	width: 100%;
	flex-direction: column;

}

.historia .content-historia {
	width: 100%;
	margin-top: 3rem;
	margin-bottom: 3rem;
	padding: 1.7rem;
	/*position: relative;*/
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.titulo-historia {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;

}

.text-historia {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;

}

.historia .foto-historia {
	background: url(../img/historia-foto.jpg);
	width: 100%;
	background-size: cover;
	background-position: center;
	min-height: 500px;

}

.historia .foto-historia-sake {
	background: url(../img/historia-sake.jpg);
	width: 100%;
	background-size: cover;
	background-position: center;
	min-height: 500px;

}

.historia .foto-historia-sake-arroz {
	background: url(../img/historia-arroz.jpg);
	width: 100%;
	background-size: cover;
	background-position: center;
	min-height: 500px;

}

.foto-historia-quote {
	background: url(../img/quote-historia.jpg) no-repeat 50% 50%;
	background-size: cover;
	width: 100%;
	height: 35vh;


}

.foto-historia-full {
	background: url(../img/historia-img-full.jpg) no-repeat 50% 50%;
	background-size: cover;
	width: 100%;
	height: 40vh;


}

.foto-tienda-full {
	background: url(../img/fin-tienda.jpg) no-repeat 50% 50%;
	background-size: cover;
	width: 100%;
	height: 40vh;
}

.sec-historia {
	position: relative;
	width: 100%;
	height: inherit;
	display: flex;
	flex-direction: column-reverse;
}

.sec-historia .foto-historia-dos {
	background: url(../img/foto-historia-dos.jpg);
	width: 100%;
	min-height: 30vh;
	background-size: cover;
	background-position: center;
}

.sec-historia .foto-historia-dos-sake {
	background: url(../img/historia-arroz.jpg);
	width: 100%;
	min-height: 30vh;
	background-size: cover;
	background-position: center;
	flex-direction: column-reverse;
}

.sec-historia .foto-historia-dos-actualidad {
	background: url(../img/actualidad-1.jpg);
	width: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.sec-historia .foto-historia-dos-actualidad-2 {
	background: url(../img/actualidad-2.jpg);
	width: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.sec-historia .foto-historia-dos-actualidad-3 {
	background: url(../img/actualidad-3.jpg);
	width: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.sec-historia .foto-historia-dos-koji {
	background: url(../img/historia-koji.jpg);
	width: 100%;
	min-height: 30vh;
	background-size: cover;
	background-position: center;
	flex-direction: column-reverse;
}

.sec-historia .content-historia-dos {
	margin-top: initial;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.titulo-historia-dos {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;

}

.text-historia-dos {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;

}

.historia-quote {
	position: relative;
	width: 100%;
	height: 42vh;
	display: flex;
	flex-direction: initial;
	background-color: var(--color-bg-item2);

}

.historia-quote .content-historia-quote {
	margin-top: initial;
	width: 100%;
	padding: 2rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.flujo-movil {
	display: block;
}

.flujo-desk {
	display: none;
}

.text-quote-historia {
	color: var(--color-bg-item1);
	font-size: 1.5rem;
	letter-spacing: 1px;
	font-weight: 300;
	margin-bottom: 1rem;
	text-align: center;

}

footer {
	position: relative;
	width: 100%;
	height: 700px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg-item1);
	flex-direction: column;


}

footer ul {
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	padding-right: 40px;

}

footer ul li {
	list-style: none;

}

footer ul li a {
	display: inline-block;
	text-decoration: none;
	padding-bottom: .9rem;
}



.text-footer {
	color: var(--color-bg-item3);
	font-size: 1rem;
	letter-spacing: 1px;
	font-weight: 300;
	margin-bottom: 0px;
	text-align: center;

}

.sec-historia-tres {
	position: relative;
	width: 100%;
	height: inherit;
	display: flex;
	flex-direction: column-reverse;
}

.sec-historia-tres .foto-historia-tres {
	background: url(../img/foto-historia-tres.jpg);
	width: 100%;
	min-height: 30vh;
	background-size: cover;
	background-position: center;
}

.sec-historia-tres .foto-historia-tres-sake {
	background: url(../img/historia-agua.jpg);
	width: 100%;
	min-height: 30vh;
	background-size: cover;
	background-position: center;
}

.sec-historia-tres .foto-historia-tres-levadura {
	background: url(../img/historia-levadura.jpg);
	width: 100%;
	min-height: 30vh;
	background-size: cover;
	background-position: center;
}

.sec-historia-tres-x2 {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.sec-historia-tres-x2 .content-historia-tres-x2 {
	margin-top: initial;
	width: 100%;
	padding: 3rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sec-historia-tres .content-historia-tres {
	margin-top: initial;
	width: 100%;
	padding: 3rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sec-historia-tres-x2 .foto-historia-tres-x2 {
	background: url(../img/corazon.jpg);
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.titulo-historia-tres {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
}

.text-historia-tres {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;
}

.historia .foto-haiku {
	background: url(../img/haiku-img.jpg);
	width: 100%;
	min-height: 500px;
	background-size: cover;
	background-position: center;
	margin-top: -15px;
}

.historia .content-haiku {
	width: 100%;
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.foto-haiku-quote {
	background: url(../img/haiku-im-2.jpg) no-repeat 50% 50%;
	background-size: cover;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	width: 100%;
	height: 50vh;
	display: flex;
	flex-direction: initial;
}

.sec-haiku-tres .foto-haiku-tres {
	background: url(../img/img-haiku-pro.jpg);
	width: 100%;
	min-height: 600px;
	background-size: cover;
	background-position: center;
}

.sec-haiku-tres {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}

.titulo-haiku-tres {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.text-haiku-tres {
	color: var(--color-bg-item1);
	font-size: 1.3rem;
	letter-spacing: 1px;
	font-weight: 100;
}

.text-haiku-tres p {
	margin: 1px;
}

.sec-haiku-tres .content-haiku-tres {
	margin-top: initial;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 1rem;
}

.foto-head-tienda {
	background: url(../img/foto-head-tienda.jpg) no-repeat 50% 50%;
	background-size: cover;
	/*transition: transform 0.8s cubic-bezier(0.2,1,0.8,1);*/
	width: 100%;
	height: 29vh;
	display: flex;
	flex-direction: initial;

}

.grid-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: 0px 0px;
	grid-template-areas:
		"text-foto gridis";
}

.gridis {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0px 0px;
	grid-template-areas:
		"logo1 logo2"
		"logo3 logo4";
	grid-area: gridis;

}

.logo1 {
	grid-area: logo1;
	background-color: var(--color-bg-item5);
}

.logo2 {
	grid-area: logo2;
	background-color: var(--color-bg-item2);
}

.logo3 {
	grid-area: logo3;
	background-color: var(--color-info);
}

.logo4 {
	grid-area: logo4;
	background-color: var(--color-bg-item1);
}

.text-foto {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0px 0px;
	grid-template-areas:
		"tienda"
		"foto-tienda";
	grid-area: text-foto;
}

.tienda {
	grid-area: tienda;
}

.foto-tienda {
	grid-area: foto-tienda;
}

.foto-tienda .foto-tienda-dos {
	background: url(../img/foto-tienda-dos.jpg) no-repeat 50% 50%;
	background-size: cover;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	width: 100%;
	height: 50vh;
	display: flex;
	flex-direction: initial;
}

.text-tienda {
	padding: 3rem;

}

.home-quote {
	position: relative;
	width: 100%;
	height: 420px;
	display: flex;
	flex-direction: initial;
	background-color: var(--color-bg-item5);

}

.home-quote .content-home-quote {
	margin-top: 70px;
	width: 100%;
	padding: 2rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.boxes {
	position: relative;
	width: 100%;
	height: 600px;
	display: flex;
	flex-direction: column;
}

.boxes .content-boxes {
	margin-top: initial;
	margin-bottom: inherit;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.titulo-boxes {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;

}

.text-boxes {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;
	padding-top: 50px;
	padding-bottom: 40px;

}

.boxes .foto-boxes {
	background: url(../img/home-img-un.jpg);
	width: 100%;
	background-size: cover;
	background-position: center;
	min-height: 400px;
}

.sec-home {
	position: relative;
	width: 100%;

	display: flex;
	flex-direction: column;
}

.sec-home .foto-dos-lr {
	background: url(../img/pescadores.jpg);
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.sec-home .foto-dos-dr {
	background: url(../img/pescador.jpg);
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.sec-home .content-home-dos {
	margin-top: initial;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.text-home-dos {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;
	padding-top: 50px;
	padding-bottom: 40px;

}

.home-kanji {
	position: relative;
	width: 100%;

	display: flex;
	flex-direction: initial;
	background-color: var(--color-bg-item2);

}

.home-kanji .content-home-kanji {
	margin-top: initial;
	width: 100%;
	padding: 4.3rem 1.7rem 2rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.text-home-kanji {
	color: var(--color-bg-item1);
	font-size: 1.4rem;
	letter-spacing: 1px;
	font-weight: 300;
	margin-bottom: 1rem;
	text-align: center;

}

.sec-historia-tres .foto-historia-tres-x1 {
	background: url(../img/tradicion.jpg);
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}


.home-familia {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: initial;
	background-color: var(--color-bg-item1);

}

.home-familia .content-home-familia {
	margin-top: initial;
	width: 100%;
	padding: 4rem 1.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.text-home-familia {
	color: var(--color-bg-item3);
	font-size: 1.4rem;
	letter-spacing: 1px;
	font-weight: 300;
	margin-bottom: 1rem;
	text-align: center;

}

.titulo-familia {
	color: var(--color-bg-item3);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.sec-productos {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg-item5);
}

.sec-productos .foto-junmai-lr {
	background: url(../img/JUNMAI-pro.png);
	width: 100%;
	max-width: 290px;
	min-height: 550px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #8ED2CC;
	margin: auto;
}

.sec-productos .foto-maridaje-junmai-dr {
	background: url(../img/maridaje-junmai.jpg);
	width: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center;

}

.sec-productos .content-junmai {
	margin-top: initial;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.text-historia-tres-junmai {
	color: var(--color-bg-item1);
	font-size: 1.1rem;
	letter-spacing: 1px;
	font-weight: 300;
	margin-bottom: 1rem;
}

.bt-maridaje {
	position: relative;
	;
	width: 100%;
	height: 85px;
	background-color: black;
	border: inherit;
	top: 13.5rem;
	display: flex;
	justify-content: stretch;
}

.sec-productos-ginjo {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	background-color: #F4F1C6;
}

.sec-productos-ginjo .foto-ginjo-lr {
	background: url(../img/ginjo-pro.png);
	width: 100%;
	max-width: 290px;
	min-height: 540px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #F4F1C6;
	margin: auto;
}

.sec-productos-ginjo .foto-maridaje-ginjo-dr {
	background: url(../img/maridaje-ginjo.jpg);
	width: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.sec-productos-ginjo .content-ginjo {
	margin-top: initial;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.text-historia-tres-ginjo {
	color: var(--color-bg-item1);
	font-size: 1.1rem;
	letter-spacing: 1px;
	font-weight: 300;
	margin-bottom: 1rem;
}

.sec-productos-DAIGINJO {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #1B1C1D;
}

.sec-productos-DAIGINJO .foto-DAIGINJO-lr {
	background: url(../img/daiginjo-pro.png);
	width: 100%;
	max-width: 290px;
	min-height: 520px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #1B1C1D;
	margin: auto;
}

.sec-productos-DAIGINJO .foto-maridaje-DAIGINJO-dr {
	background: url(../img/dainjo-maridajes.jpg);
	width: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
}

.sec-productos-DAIGINJO .content-DAIGINJO {
	margin-top: initial;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.sec-historia-tres-reco {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg-item5);
}

.sec-historia-tres-reco .foto-historia-tres-reco {
	background: url(../img/reconocimiento1.jpg);
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
}

.sec-historia-tres-reco .content-historia-tres-reco {
	margin-top: initial;
	width: 100%;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.titulo-historia-tres-reco {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.text-historia-tres-reco {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;
}




.sec-historia-tres-reco-dos {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	background-color: var(--color-bg-item2);
}

.sec-historia-tres-reco-dos .foto-historia-tres-reco-dos {
	background: url(../img/reconocimiento2.jpg);
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
}

.sec-historia-tres-reco-dos .content-historia-tres-reco-dos {
	margin-top: initial;
	width: 100%;
	min-height: 400px;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.titulo-historia-tres-reco-dos {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.text-historia-tres-reco-dos {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;
}



.sec-historia-tres-reco-tres {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	background-color: var(--color-bg-item2);
}

.sec-historia-tres-reco-tres .foto-historia-tres-reco-tres {
	background: url(../img/reconocimiento2.jpg);
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
}

.sec-historia-tres-reco-tres .content-historia-tres-reco-tres {
	margin-top: initial;
	width: 100%;
	min-height: 400px;
	padding: 1.7rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.titulo-historia-tres-reco-tres {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.text-historia-tres-reco-tres {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;
}

.banner {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: initial;
	margin-top: -17px;
	display: none;

}

.banner .content-banner {
	margin-top: initial;
	margin-bottom: inherit;
	width: 50%;
	padding: 1rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: url(../img/banner2.png);
	background-size: cover;
	background-position: center;

}


.titulo-banner {
	color: var(--color-bg-item1);
	font-size: 2rem;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 1rem;
	text-transform: uppercase;

}

.text-banner {
	color: var(--color-bg-item1);
	font-size: 1.2rem;
	letter-spacing: 1px;
	font-weight: 100;
	margin-bottom: -14px;

}

.banner .foto-banner {
	background: url(../img/banner1.png);
	width: 0%;
	max-width: 50%;
	background-size: cover;
	background-position: 81% center;
	margin-left: 0;
}

.banner-mov {
	position: relative;
	display: block;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #8ED2CC;



}

.banner-mov .foto-banner-mov {
	background: url(../img/v2-gifbotellas.gif);
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% center;
	background-color: #8ED2CC;
}

.maridajes {
	color: white;
}




@media screen and (min-width: 53em) {
	body {
		padding: 0;
	}

	.logo {
		display: block;
		margin: 0 auto;

	}

	.maridajes {
		color: black;
	}

	.sections__header {
		padding: 2rem 1rem 0 .8rem;
		display: flex;
		position: absolute;
	}

	.action-white {
		background: none;
		border: 0;
		color: #ffffff;
		cursor: pointer;
		padding: 0;


	}

	.action--menu-id {
		pointer-events: auto;
		position: absolute;
		top: 1.5rem;
		right: 4.1rem;
		z-index: 1;
		letter-spacing: 1px;
	}

	.label--bottomright {
		bottom: 2rem;
		right: 2rem;
	}

	/*.label--vert, .label--vert-mirror {
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}*/
	.label {
		display: block;
		color: rgb(214, 214, 214);
		position: absolute;
		z-index: 1000;
		font-size: .9rem;
		font-weight: bold;
		margin: 0;
		white-space: nowrap;
	}

	.banner-mov {
		display: none;
	}

	.action-black {
		background: none;
		border: 0;
		color: #000;
		cursor: pointer;
		padding: 0;


	}

	.action-black-historia {
		background: none;
		border: 0;
		color: #ffffff;
		cursor: pointer;
		padding: 0;


	}

	.action-black-haiku {
		background: none;
		border: 0;
		color: #000;
		cursor: pointer;
		padding: 0;


	}

	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		min-height: 100%;
		text-align: left;
	}

	.frame {
		position: absolute;
		z-index: 199;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		/*height: 100vh;*/

		pointer-events: none;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			'codropsheader info'
			'... ...'
			'github ...';
	}

	.codrops-header {
		grid-area: codropsheader;
		padding: 0;
		justify-content: start;


	}

	.codrops-links {
		margin: 0;
	}

	.frame a {
		pointer-events: auto;
	}

	.github {
		grid-area: github;
		justify-self: start;
	}

	.info {
		margin: 0 6rem 0 0;
		color: var(--color-info);
	}

	.menu {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		grid-template-columns: 20% 30% 50%;
		grid-template-rows: 60% 40%;
		grid-template-areas:
			"item3 item2 item1"
			"item5 item5 item1";
	}

	.menu__item {
		height: 100%;
	}

	.menu__item--1 {
		grid-area: item1;
	}

	.menu__item--2 {
		grid-area: item2;
	}

	.menu__item--3 {
		grid-area: item3;
	}

	.menu__item--4 {
		grid-area: item4;
	}

	.menu__item--5 {
		grid-area: item5;
	}

	.menu__item--2,
	.menu__item--4,
	.menu__item--5 {
		display: block;
	}

	.menu__item-inner {
		align-items: center;
	}

	.mainmenu,
	.sidemenu {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mainmenu {
		counter-reset: menuitem;
	}

	.mainmenu__item {
		font-size: 3vw;
		text-transform: uppercase;
		overflow: visible;
		margin: 0.5rem 0;
		padding: 0 0.5rem;
		position: relative;
		transition: color 0.3s;
	}

	.mainmenu__item:hover {
		color: var(--color-item-alt);
	}

	.mainmenu__item::before {
		counter-increment: menuitem;
		content: counters(menuitem, "", decimal-leading-zero);
		position: absolute;
		font-size: 0.85rem;
		top: 25%;
		left: -1.25rem;
		color: var(--color-item-alt);
	}

	.mainmenu__item::after {
		content: '';
		width: 100%;
		top: 89%;
		height: 6px;
		background: var(--color-link-dos);
		position: absolute;
		left: 0;
		opacity: 0;
		transform: scale3d(0, 1, 1);
		transition: transform 0.3s, opacity 0.3s;
		transform-origin: 100% 50%;
	}

	.mainmenu__item:hover::after {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}

	.sidemenu__item {
		text-transform: uppercase;
		letter-spacing: 0.15rem;
		font-size: 0.85rem;
	}



	.banner {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: initial;
		margin-top: 0;
	}

	.banner .content-banner {
		margin-top: initial;
		margin-bottom: inherit;
		width: 50%;
		padding: 3rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: url(../img/banner2.png);
		background-size: cover;
		background-position: center;
	}


	.titulo-banner {
		color: var(--color-bg-item1);
		font-size: 3rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;

	}

	.text-banner {
		color: var(--color-bg-item1);
		font-size: 1.5rem;
		letter-spacing: 1px;
		font-weight: 100;
		margin-bottom: -27px;

	}

	.banner .foto-banner {
		background: url(../img/v2-gifbotellas.gif);
		width: 0%;
		max-width: 50%;
		height: 100%;
		background-size: cover;
		background-position: center;
	}

	/*Contenido*/

	.historia {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: initial;
	}

	.historia .content-historia {
		margin-top: initial;
		margin-bottom: inherit;
		width: 50%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.titulo-historia {
		color: var(--color-bg-item1);
		font-size: 2rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;

	}

	.text-historia {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;

	}

	.historia .foto-historia {
		background: url(../img/historia-foto.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}

	.historia .foto-historia-sake {
		background: url(../img/historia-sake.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}


	.sec-historia {
		position: relative;
		width: 100%;
		height: 60vh;
		display: flex;
		flex-direction: initial;
	}

	.sec-historia .foto-historia-dos {
		background: url(../img/foto-historia-dos.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;

	}

	.sec-historia .foto-historia-dos-sake {
		background: url(../img/historia-arroz.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-historia .foto-historia-dos-actualidad {
		background: url(../img/actualidad-1.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-historia .foto-historia-dos-actualidad-2 {
		background: url(../img/actualidad-2.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-historia .foto-historia-dos-actualidad-3 {
		background: url(../img/actualidad-3.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-historia .foto-historia-dos-koji {
		background: url(../img/historia-koji.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		flex-direction: column-reverse;
	}

	.sec-historia .content-historia-dos {
		margin-top: initial;
		width: 50%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.titulo-historia-dos {
		color: var(--color-bg-item1);
		font-size: 2rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;

	}

	.text-historia-dos {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;

	}

	.historia-quote {
		position: relative;
		width: 100%;
		height: 30vh;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item2);

	}

	.historia-quote .content-historia-quote {
		margin-top: initial;
		width: 100%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.text-quote-historia {
		color: var(--color-bg-item1);
		font-size: 1.5rem;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: 1rem;
		text-align: center;
		/*width: 400px;*/

	}

	.foto-historia-quote {
		background: url(../img/quote-historia.jpg) no-repeat 50% 50%;
		background-size: cover;
		height: 50vh;

	}

	.foto-historia-full {
		background: url(../img/historia-img-full.jpg) no-repeat 50% 50%;
		background-size: cover;
		height: 70vh;


	}

	.foto-tienda-full {
		background: url(../img/fin-tienda.jpg) no-repeat 50% 50%;
		background-size: cover;
		height: 70vh;
	}

	.sec-historia-tres {
		position: relative;
		width: 100%;
		height: 80vh;
		display: flex;
		flex-direction: initial;
	}

	.sec-historia-tres .foto-historia-tres {
		background: url(../img/foto-historia-tres.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}

	.sec-historia-tres .foto-historia-tres-sake {
		background: url(../img/historia-agua.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}

	.sec-historia-tres .foto-historia-tres-levadura {
		background: url(../img/historia-levadura.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}

	.sec-historia-tres .foto-historia-tres-porcentaje {
		background: url(../img/porcentaje.svg);
		width: 50%;
		background-size: contain;
		background-position: center;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.sec-historia-tres .content-historia-tres {
		margin-top: initial;
		width: 50%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.titulo-historia-tres {
		color: var(--color-bg-item1);
		font-size: 2rem;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: 1rem;
	}

	.text-historia-tres {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;
	}

	footer {
		position: relative;
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--color-bg-item1);
		flex-direction: inherit;
	}

	footer ul {
		position: relative;
		display: flex;
		flex-direction: inherit;
		align-items: center;

	}

	footer ul li {
		list-style: none;



	}

	footer ul li a {
		display: inline-block;
		margin-right: 5px;
		padding-left: 5px;
		text-decoration: none;
		display: flex;
		padding-bottom: 0;

	}

	.icon-social {
		margin-right: 0;
		padding-bottom: inherit;
		margin-left: 10px;
	}

	.text-quote-historia-uppercase {
		color: var(--color-bg-item1);
		font-size: 1.7rem;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: 1rem;
		text-align: center;
		text-transform: uppercase;
	}

	.text-footer {
		color: var(--color-bg-item3);
		font-size: .8rem;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: inherit
	}

	.historia .foto-haiku {
		background: url(../img/haiku-img.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		margin-top: -17px;
	}

	.historia .content-haiku {
		width: 50%;

		margin-bottom: 2rem;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.foto-haiku-quote {
		background: url(../img/haiku-im-2.jpg) no-repeat 50% 50%;
		background-size: cover;

		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: initial;
	}

	.sec-haiku-tres .foto-haiku-tres {
		background: url(../img/img-haiku-pro.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;

	}

	.sec-haiku-tres {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: initial;
	}

	.titulo-haiku-tres {
		color: var(--color-bg-item1);
		font-size: 2rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

	.text-haiku-tres {
		color: var(--color-bg-item1);
		font-size: 1.3rem;
		letter-spacing: 1px;
		font-weight: 100;
	}

	.text-haiku-tres p {
		margin: 1px;
	}

	.sec-haiku-tres .content-haiku-tres {
		margin-top: initial;
		width: 50%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.foto-head-tienda {
		background: url(../img/banner-tienda.nami.webp) no-repeat 50% 50%;
		background-size: cover;
		/*transition: transform 0.8s cubic-bezier(0.2,1,0.8,1);*/
		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: initial;
	}

	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 0px 0px;
		grid-template-areas:
			"text-foto gridis";
	}

	.gridis {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 0px 0px;
		grid-template-areas:
			"logo1 logo2"
			"logo3 logo4";
		grid-area: gridis;
	}

	.logo1 {
		grid-area: logo1;
		background-color: var(--color-bg-item5);
	}

	.logo2 {
		grid-area: logo2;
		background-color: var(--color-bg-item2);
	}

	.logo3 {
		grid-area: logo3;
		background-color: var(--color-info);
	}

	.logo4 {
		grid-area: logo4;
		background-color: var(--color-bg-item1);
	}

	.text-foto {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 0px 0px;
		grid-template-areas:
			"tienda"
			"foto-tienda";
		grid-area: text-foto;
	}

	.tienda {
		grid-area: tienda;
	}

	.foto-tienda {
		grid-area: foto-tienda;
	}

	.foto-tienda .foto-tienda-dos {
		background: url(../img/foto-tienda-dos.jpg) no-repeat 50% 50%;
		background-size: cover;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: initial;
	}

	.text-tienda {
		padding: 8rem 6rem;

	}

	.logos {
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		text-align: center;
	}

	.tienda-boton {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		margin-top: -5rem;
		padding-left: 1rem;
	}

	.home-quote {
		position: relative;
		width: 100%;
		height: 40vh;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item5);

	}

	.home-quote .content-home-quote {
		margin-top: 1.5rem;
		width: 100%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.boxes {
		position: relative;
		width: 100%;
		height: 600px;
		display: flex;
		flex-direction: initial;
	}

	.boxes .content-boxes {
		margin-top: initial;
		margin-bottom: inherit;
		width: 35%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.titulo-boxes {
		color: var(--color-bg-item1);
		font-size: 2rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;

	}

	.text-boxes {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;

	}

	.boxes .foto-boxes {
		background: url(../img/home-img-un.jpg);
		width: 65%;
		background-size: cover;
		background-position: center;
	}

	.sec-home {
		position: relative;
		width: 100%;
		height: 500px;
		display: flex;
		flex-direction: initial;
	}

	.sec-home .foto-dos-lr {
		background: url(../img/pescadores.jpg);
		width: 35%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-home .foto-dos-dr {
		background: url(../img/pescador.jpg);
		width: 35%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-home .content-home-dos {
		margin-top: initial;
		width: 30%;
		padding: 3.5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.text-home-dos {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;

	}

	.home-kanji {
		position: relative;
		width: 100%;
		height: 52vh;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item2);

	}

	.home-kanji .content-home-kanji {
		margin-top: initial;
		width: 100%;
		padding: 1.5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.text-home-kanji {
		color: var(--color-bg-item1);
		font-size: 1.4rem;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: 1rem;
		text-align: center;

	}

	.sec-historia-tres .foto-historia-tres-x1 {
		background: url(../img/tradicion.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-historia-tres .foto-historia-tres-x2 {
		background: url(../img/corazon.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.home-familia {
		position: relative;
		width: 100%;
		height: 39vh;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item1);

	}

	.home-familia .content-home-familia {
		margin-top: initial;
		width: 100%;
		padding: 1.5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.sec-historia-tres-x2 {
		position: relative;
		width: 100%;
		height: 80vh;
		display: flex;
		flex-direction: initial;
	}

	.sec-historia-tres-x2 .content-historia-tres {
		margin-top: initial;
		width: 50%;
		padding: 1.7rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.sec-historia-tres-x2 .foto-historia-tres-x2 {
		background: url(../img/corazon.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-historia-tres-x2 .content-historia-tres-x2 {
		margin-top: initial;
		width: 50%;
		padding: 3rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.text-home-familia {
		color: var(--color-bg-item3);
		font-size: 1.4rem;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: 1rem;
		text-align: center;

	}

	.flujo-movil {
		display: none;
	}

	.flujo-desk {
		display: block;
	}

	.titulo-familia {
		color: var(--color-bg-item3);
		font-size: 2rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

	.sec-productos {
		position: relative;
		width: 100%;
		height: 870px;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item5);
	}

	.sec-productos .foto-junmai-lr {
		background: url(../img/JUNMAI-pro.png);
		width: 23.8%;
		max-width: 440px;
		min-height: 730px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.sec-productos .foto-maridaje-junmai-dr {
		background: url(../img/maridaje-junmai.jpg);
		width: 35%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-productos .content-junmai {
		margin-top: initial;
		width: 34.2%;
		min-width: 400px;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.text-historia-tres-junmai {
		color: var(--color-bg-item1);
		font-size: 1.2vw;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: .9rem;
	}

	.bt-maridaje {
		position: relative;
		width: 35vw;
		height: 200px;
		padding-top: 40px;
		padding-bottom: 40px;
		background-color: black;
		border: inherit;
		top: 45.2rem;
		display: flex;
		justify-content: stretch;
	}

	.sec-productos-ginjo {
		position: relative;
		width: 100%;
		height: 890px;
		display: flex;
		flex-direction: initial;
		background-color: #F4F1C6;
	}

	.sec-productos-ginjo .foto-ginjo-lr {
		background: url(../img/ginjo-pro.png);
		width: 23.8%;
		max-width: 395px;
		min-height: 720px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #F4F1C6;
	}

	.sec-productos-ginjo .foto-maridaje-ginjo-dr {
		background: url(../img/maridaje-ginjo.jpg);
		width: 35%;
		background-size: cover;
		background-position: center;

	}

	.sec-productos-ginjo .content-ginjo {
		margin-top: initial;
		width: 41.2%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.text-historia-tres-ginjo {
		color: var(--color-bg-item1);
		font-size: 1.2vw;
		letter-spacing: 1px;
		font-weight: 300;
		margin-bottom: .9rem;
	}

	.sec-productos-DAIGINJO {
		position: relative;
		width: 100%;
		height: 870px;
		display: flex;
		flex-direction: initial;
		background-color: #1B1C1D;
	}

	.sec-productos-DAIGINJO .foto-DAIGINJO-lr {
		background: url(../img/daiginjo-pro.png);
		width: 23.8%;
		max-width: 440px;
		min-height: 718px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #1B1C1D;
	}

	.sec-productos-DAIGINJO .foto-maridaje-DAIGINJO-dr {
		background: url(../img/dainjo-maridajes.jpg);
		width: 35%;
		background-size: cover;
		background-position: center;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1);
	}

	.sec-productos-DAIGINJO .content-DAIGINJO {
		margin-top: initial;
		width: 41.2%;
		min-width: 400px;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.text-historia-tres-DAIGINJO {
		color: var(--color-bg-item3);
		font-size: 1.2vw;
		letter-spacing: 1px;
		margin-bottom: .9rem;
	}

	.titulo-haiku-tres-daiginjo {
		color: var(--color-bg-item3);
		font-size: calc(.9em + 1vw);
		letter-spacing: 1px;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

	.sec-historia-tres-reco {
		position: relative;
		width: 100%;
		height: 750px;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item5);
	}

	.sec-historia-tres-reco .foto-historia-tres-reco {
		background: url(../img/reconocimiento1.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}

	.sec-historia-tres-reco .content-historia-tres-reco {
		margin-top: initial;
		width: 50%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.titulo-historia-tres-reco {
		color: var(--color-bg-item1);
		font-size: 1.8rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

	.text-historia-tres-reco {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;
	}

	.sec-historia-tres-reco-dos {
		position: relative;
		width: 100%;
		height: 750px;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item2);
	}

	.sec-historia-tres-reco-dos .foto-historia-tres-reco-dos {
		background: url(../img/reconocimiento2.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}
	.foto-historia-tres-reco-dos.premios {
        width: 25%;
    }

	.sec-historia-tres-reco-dos .content-historia-tres-reco-dos {
		margin-top: initial;
		width: 50%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.titulo-historia-tres-reco-dos {
		color: var(--color-bg-item1);
		font-size: 1.8rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

	.text-historia-tres-reco-dos {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;
	}

	.sec-historia-tres-reco-tres {
		position: relative;
		width: 100%;
		height: 750px;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item5);
	}

	.sec-historia-tres-reco-tres .foto-historia-tres-reco-tres {
		background: url(../img/reconocimiento2.jpg);
		width: 50%;
		background-size: cover;
		background-position: center;
	}

	.sec-historia-tres-reco-tres .content-historia-tres-reco-tres {
		margin-top: initial;
		width: 50%;
		padding: 5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.titulo-historia-tres-reco-tres {
		color: var(--color-bg-item1);
		font-size: 1.8rem;
		letter-spacing: 1px;
		font-weight: 400;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

	.text-historia-tres-reco-tres {
		color: var(--color-bg-item1);
		font-size: 1.2rem;
		letter-spacing: 1px;
		font-weight: 100;
	}

	.min-h-mid-screen {
		height: 46.3vh;
	}

	.cuadro {
		height: 33.33vh;
	}
}


.o-image.is-inview img {
	opacity: 1;
	transform: scale(1);
	transition-delay: .6s;
}

.o-image img {
	width: 100%;
	opacity: 0;
	transform: scale(1.4);
	transition: opacity 1.2s cubic-bezier(.215, .61, .355, 1), transform 1.2s cubic-bezier(.215, .61, .355, 1);
}

.c-speed-block_image {
	margin-top: -30px;
	margin-bottom: -30px;
}

.bg-color-beige-sake {
	background-color: #FDF4D4;

}

.bg-color-beige {
	background-color: #FDF4D4;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-verde-maridajes {
	background-color: #8ED2CC;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-verde-maridajes:hover {
	background-color: #FDF4D4;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-black {
	background-color: #000;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-black:hover {
	background-color: #8ED2CC;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}
.bg-color-black.text-white.h-full.hover\:text-white.premios:hover {
    background-color: black;
}

.bg-color-gray.text-black.h-full.hover\:text-black.premios {
    background-color: #FDF4D4;
}

.bg-color-verde-maridajes.text-black.h-full.hover\:bg-color-beige.hover\:text-white.premios:hover {
    background-color: #8ED2CC;
    color: black;
}

.bg-color-white.text-black.h-full.premios {
    background-color: #1B1C1D;
    color: white;
}

.bg-color-gray {
	background-color: #CACECE;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-gray:hover {
	background-color: #8ED2CC;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-white {
	background-color: #ffffff;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-white:hover {
	background-color: #8ED2CC;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-beige:hover {
	background-color: #8ED2CC;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: color 0.8s linear 0.2s;
	animation-duration: 1s;
}

.bg-color-verde-boton {
	background-color: black;


}

.bg-color-verde {
	background-color: #8ED2CC;

}

.bg-color-verde-boton:hover {
	background-color: #B19F5A;
	color: #000;

}

.bg-color-junmai {
	background-color: #FDF4D4;

}

.bg-color-dorado {
	background-color: #B19F5A;
}

.bg-color-dorado:hover {
	background-color: #CACECE;
	color: black;
}

.bg-color-negro {
	background-color: black;
}

.bg-color-negro:hover {
	background-color: #FDF4D4;
	color: black;
}

/*! locomotive-scroll v4.0.6 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
	overflow: hidden;
}

html.has-scroll-dragging {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.has-scroll-smooth body {
	overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
	min-height: 100vh;
}

[data-scroll-direction="horizontal"] [data-scroll-container] {
	white-space: nowrap;
	height: 100vh;
	display: inline-block;
	white-space: nowrap;
}

[data-scroll-direction="horizontal"] [data-scroll-section] {
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	height: 100%;
}

.c-scrollbar {
	position: absolute;
	right: 0;
	top: 0;
	width: 11px;
	height: 100%;
	transform-origin: center right;
	transition: transform 0.3s, opacity 0.3s;
	opacity: 0;
}

.c-scrollbar:hover {
	transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
	opacity: 1;
}

[data-scroll-direction="horizontal"] .c-scrollbar {
	width: 100%;
	height: 10px;
	top: auto;
	bottom: 0;
	transform: scaleY(1);
}

[data-scroll-direction="horizontal"] .c-scrollbar:hover {
	transform: scaleY(1.3);
}

.c-scrollbar_thumb {
	position: absolute;
	top: 0;
	right: 0;
	background-color: black;
	opacity: 0.5;
	width: 7px;
	border-radius: 10px;
	margin: 2px;
	cursor: -webkit-grab;
	cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
	right: auto;
	bottom: 0;
}
.content-junmai.premios {
    background-color: white;
}

.content-ginjo.premios {
    background-color: white;
}

.content-DAIGINJO.premios {
    background-color: white;
}

h2.titulo-haiku-tres-daiginjo.premios {
    color: black;
}

p.text-historia-tres-DAIGINJO.premios {
    color: black;
}

@media (min-width: 1536px) {
	.sm\:container {
		max-width: 1536px;
	}

	.sec-productos {
		position: relative;
		width: 100%;
		height: 1200px;
		display: flex;
		flex-direction: initial;
		background-color: var(--color-bg-item5);
	}

	.bt-maridaje {
		position: relative;
		width: 35vw;
		height: 200px;
		padding-top: 60px;
		padding-bottom: 40px;
		background-color: black;
		border: inherit;
		top: 64.2rem;
		display: flex;
		justify-content: stretch;
	}

	.sec-productos-ginjo {
		position: relative;
		width: 100%;
		height: 1250px;
		display: flex;
		flex-direction: initial;
		background-color: #F4F1C6;
	}

	.sec-productos-DAIGINJO {
		position: relative;
		width: 100%;
		height: 1200px;
		display: flex;
		flex-direction: initial;
		background-color: #1B1C1D;
	}

	.boxes {
		position: relative;
		width: 100%;
		height: 800px;
		display: flex;
		flex-direction: initial;
	}
}

/* Inicio estilos eventos */

.foto-head-eventos {
	position: relative;
	width: 100%;
	height: 50vh;
	overflow: hidden;
}

.foto-head-eventos .img-responsive {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}