/*! HTML5 Boilerplate v7.1.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/* What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */
/* ========================================================================== Base styles: opinionated defaults ========================================================================== */
html { color: #222; font-size: 1em; line-height: 1.4; }

/* Remove text-shadow in selection highlight: https://twitter.com/miketaylr/status/12228805301 Vendor-prefixed and regular ::selection selectors cannot be combined: https://stackoverflow.com/a/16982510/7133471 Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers: https://github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

#fullpage { -webkit-transition-delay: 1s !important; transition-delay: 1s !important; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* ========================================================================== Browser Upgrade Prompt ========================================================================== */
.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; z-index: 500; padding: 30px; position: absolute; text-align: center; width: 100%; }

/* ========================================================================== Author's custom styles ========================================================================== */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Render the `main` element consistently in IE. */
main { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

/*! fullPage 3.0.5 https://github.com/alvarotrigo/fullPage.js @license GPLv3 for open source use only or Fullpage Commercial License for commercial use http://alvarotrigo.com/fullPage/pricing/ Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo */
.fp-enabled body, html.fp-enabled { margin: 0; padding: 0; overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.fp-section { position: relative; box-sizing: border-box; }

.fp-slide { float: left; }

.fp-slide, .fp-slidesContainer { height: 100%; display: block; }

.fp-slides { z-index: 1; height: 100%; overflow: hidden; position: relative; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; }

.fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout: fixed; width: 100%; }

.fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }

.fp-slidesContainer { float: left; position: relative; }

.fp-controlArrow { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; position: absolute; z-index: 4; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.fp-controlArrow.fp-prev { left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent; }

.fp-controlArrow.fp-next { right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff; }

.fp-scrollable { overflow: hidden; position: relative; }

.fp-scroller { overflow: hidden; }

.iScrollIndicator { border: 0 !important; }

.fp-notransition { -webkit-transition: none !important; transition: none !important; }

#fp-nav { position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

#fp-nav.fp-right { right: 17px; }

#fp-nav.fp-left { left: 17px; }

.fp-slidesNav { position: absolute; z-index: 4; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0 !important; right: 0; margin: 0 auto !important; }

.fp-slidesNav.fp-bottom { bottom: 17px; }

.fp-slidesNav.fp-top { top: 17px; }

#fp-nav ul, .fp-slidesNav ul { margin: 0; padding: 0; }

#fp-nav ul li, .fp-slidesNav ul li { display: block; width: 14px; height: 13px; margin: 7px; position: relative; }

.fp-slidesNav ul li { display: inline-block; }

#fp-nav ul li a, .fp-slidesNav ul li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; }

#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span { height: 12px; width: 12px; margin: -6px 0 0 -6px; border-radius: 100%; }

#fp-nav ul li a span, .fp-slidesNav ul li a span { border-radius: 50%; position: absolute; z-index: 1; height: 4px; width: 4px; border: 0; background: #333; left: 50%; top: 50%; margin: -2px 0 0 -2px; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }

#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { width: 10px; height: 10px; margin: -5px 0 0 -5px; }

#fp-nav ul li .fp-tooltip { position: absolute; top: -2px; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; opacity: 0; width: 0; cursor: pointer; }

#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; }

#fp-nav ul li .fp-tooltip.fp-right { right: 20px; }

#fp-nav ul li .fp-tooltip.fp-left { left: 20px; }

.fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell, .fp-auto-height.fp-section { height: auto !important; }

.fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell, .fp-responsive .fp-auto-height-responsive.fp-section { height: auto !important; }

.fp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body { font-size: 13px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-image: url("/img/WashiPaper.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; font-family: "DIN Next LT W01 Regular", sans-serif; font-weight: 300; color: #53575a; }

body.homeBG { background-image: none; background-color: #e9e8e8; }

body b { font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; }

h1, h2, h3, h4 { font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; margin: 0; padding: 0; }

h1 { font-style: italic; font-weight: bold; font-size: 40px; }

h2 { font-size: 20px; }

.pageHeading { font-size: 24px; line-height: 30px; font-family: "DIN Next LT W01 Regular", sans-serif; text-align: center; color: #53575a; }

.greentext { color: #71a850; }

.orangetext { color: #e07c00; }

.redtext { color: #e94e19; }

.section { width: 100%; height: 100%; background-size: cover; background-position: 0px 0; -webkit-transition: all 3s; transition: all 3s; }

* { box-sizing: border-box; }

img { width: 100%; }

#container { display: none; }

.no-wrap { white-space: nowrap; display: inline-block; }

#home-container { width: 100%; }

.loader-wrapper { width: 100%; height: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-transform: uppercase; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: absolute; z-index: 100; background-image: url("/img/WashiPaper.jpg"); }

.crest-spinner { width: 140px; padding: 20px; }

.logo-crest { width: 120px; }

.shadowed { -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.6)); }

.bg-image-home-section { background-image: none; background-repeat: repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: fixed; width: 100%; height: 100%; background-image: url("/img/WashiPaper.jpg"); opacity: 0; }

.slider-text-container { position: absolute; width: 100%; height: 100%; display: -webkit-box; display: flex; z-index: 1000; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; }

.slider-text-container .slider-homepage-text { font-size: 18px; line-height: 22px; letter-spacing: -1px; }

@media (min-width: 1550px) { .slider-text-container .slider-homepage-text { font-size: 24px; line-height: 27px; } }

.slider-text-container .slider-homepage-text.left-top { margin-left: 120px; margin-top: 120px; -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; opacity: 0; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; width: 15%; }

@media (min-width: 1550px) { .slider-text-container .slider-homepage-text.left-top { width: 17%; } }

.slider-mask-container5 .slider-text-container .slider-homepage-text.left-top { width: 30%; bottom: 80px; margin-left: 35%; position: absolute; text-align: center; -webkit-transform: translateX(0); transform: translateX(0); }

.slider-text-container .slider-homepage-text.left-top.activeFedeIn { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

@media (max-width: 750px) { .slider-text-container .slider-homepage-text.left-top { -webkit-transform: translateX(0); transform: translateX(0); margin-left: 0; margin-top: 0; width: 100%; text-align: center; bottom: 0; position: absolute; font-size: 15px; line-height: 16px; padding: 20px; }
  .slider-text-container .slider-homepage-text.left-top.activeFedeIn { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  .slider-mask-container1 .slider-text-container .slider-homepage-text.left-top { width: 60%; bottom: 80px; margin-left: 20%; }
  .slider-mask-container5 .slider-text-container .slider-homepage-text.left-top { width: 60%; bottom: 10px; margin-left: 20%; } }

@media (max-width: 350px) { .slider-text-container .slider-homepage-text.left-top { font-size: 14px; line-height: 15px; } }

.slider-text-container .slider-homepage-text.right-bottom { width: 15%; position: absolute; right: 100px; bottom: 100px; -webkit-transform: translateX(140px); transform: translateX(140px); -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; opacity: 0; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }

.slider-text-container .slider-homepage-text.right-bottom.activeFedeIn { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

@media (max-width: 750px) { .slider-text-container .slider-homepage-text.right-bottom { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translatey(250px); transform: translatey(250px); font-size: 15px; line-height: 16px; text-align: center; bottom: 30px; width: 100%; left: 0; } }

@media (max-width: 350px) { .slider-text-container .slider-homepage-text.right-bottom { font-size: 14px; line-height: 15px; } }

.slider-text-container .homepage-text-livecopy { position: absolute; width: 60%; bottom: 40px; margin-left: 20%; font-size: 18px; line-height: 22px; letter-spacing: -1px; text-align: center; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translatey(250px); transform: translatey(250px); opacity: 0; }

.slider-text-container .homepage-text-livecopy.activeFedeIn { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

@media (min-width: 750px) { .slider-text-container .homepage-text-livecopy { display: none; } }

.slider-text-container .homepage-text-image { position: relative; width: 100%; height: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; align-self: center; }

@media (max-width: 750px) { .slider-text-container .homepage-text-image { display: none; } }

.slider-text-container .homepage-text-image img { width: auto; max-width: 100%; height: 65%; margin-top: 5%; left: 35px; position: relative; }

.slider-mask-container { background-position: center center; background-size: 1000px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background-repeat: no-repeat; width: 100%; height: 100%; position: relative; overflow: hidden; }

@media (max-width: 750px) { .slider-mask-container { background-size: 550px; margin-bottom: 100px; } }

@media (max-width: 350px) { .slider-mask-container { background-size: 400px; } }

.slider-mask-container.slider-mask-container1 { background-image: url("../img/koyomi-intro-all.png"); }

.slider-mask-container.slider-mask-container2 { background-image: url("../img/koyomi-intro-01.png"); }

.slider-mask-container.slider-mask-container3 { background-image: url("../img/koyomi-intro-02.png"); }

.slider-mask-container.slider-mask-container4 { background-image: url("../img/koyomi-intro-03.png"); }

.slider-mask-container.slider-mask-container5 { background-image: url("../img/koyomi-intro-04.png"); }

.slider-mask-container .section-wrappper-container { width: 1000px; height: 1000px; position: absolute; overflow: hidden; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }

.slider-mask-container .section-wrappper-container .image { background-repeat: no-repeat; background-position: center center; background-size: 1000px; z-index: 1000; width: 1000px; height: 1000px; left: 0; top: 0; position: absolute; }

.slider-mask-container .section-wrappper-container .mask-outer { width: 1000px; height: 1000px; overflow: hidden; }

.slider-mask-container .section-wrappper-container .mask { background-image: url("../img/stain-rev.png"); background-size: contain; position: absolute; z-index: 80; width: 1000px; height: 12000px; background-position: 0 0; }

.slider-mask-container .slider-crest-container { width: 15%; z-index: 500; position: absolute; }

@media (max-width: 750px) { .slider-mask-container .slider-crest-container { width: 40%; } }

.slider-mask-container .slider-crest-container.can-crest { width: 12%; }

@media (max-width: 750px) { .slider-mask-container .slider-crest-container.can-crest { width: 26%; } }

.slider-mask-container .slider-crest-container.can-crest img { -webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }

.slider-mask-container .slider-crest-container img { -webkit-filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)); }

.slider-mask-container .slider-can-container { width: 10%; }

.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }

.mobile-nav { padding: 15px 20px; min-height: 90px; }

.mobile-nav .mobile-logo { width: 82px; -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4)); }

@media (max-width: 750px) { .mobile-nav .mobile-logo { width: 45px; -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } }

menu, menu a { color: #71a850; }

.menudrop { position: fixed; top: -100%; width: 100%; height: 100%; left: 0; overflow: hidden; border: 0; color: #636569; z-index: 3000; background-image: url("/img/WashiPaper.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; }

#hamburger { position: fixed; top: 24px; right: 20px; width: 30px; height: 50px; z-index: 3010; cursor: pointer; }

#hamburger span { width: 100%; height: 4px; background-color: #6f7271; display: block; margin: 4px auto; border-radius: 2px; }

#hamburger { -webkit-transition: 0.3s; transition: 0.3s; }

menu ul li { margin: auto; text-transform: uppercase; opacity: 0; cursor: pointer; }

menu { position: relative; text-align: center; display: -webkit-box; display: flex; width: 100%; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; height: 100%; margin: 0; padding: 0; margin-top: -40px; }

menu ul { margin: 0; padding: 0; }

menu ul li { margin: 0; padding: 0; list-style-type: none; font-size: 40px; line-height: 80px; letter-spacing: 1px; }

@media (max-width: 750px) { menu ul li { font-size: 24px; line-height: 80px; letter-spacing: -1px; } }

@media (max-width: 350px) { menu ul li { font-size: 18px; line-height: 50px; letter-spacing: 0px; } }

menu ul li a { text-decoration: none; font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; color: #636569; font-weight: 900; -webkit-transition: all 0.5s; transition: all 0.5s; }

menu ul li a:hover { background: -webkit-gradient(linear, left top, right top, from(#b0d28d), color-stop(33.333%, #fcc56f), color-stop(66.6666%, #ee8a52), to(#ea6a66)); background: -webkit-linear-gradient(left, #b0d28d 0%, #fcc56f 33.333%, #ee8a52 66.6666%, #ea6a66 100%); background: linear-gradient(90deg, #b0d28d 0%, #fcc56f 33.333%, #ee8a52 66.6666%, #ea6a66 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.fp-slides { overflow: visible; }

#fp-nav { display: block; }

@media (max-width: 750px) { #fp-nav.fp-right { right: 1px; } }

#fp-nav ul, .fp-slidesNav ul { margin: 0; padding: 0; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; }

.fp-bottom ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; }

#fp-nav ul li a span, .fp-slidesNav ul li a span { border-radius: 50%; position: absolute; z-index: 1; width: 16px; height: 16px; border: 0; background: #b2b2b3; left: 50%; top: 50%; margin: -8px 0 0 -8px; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }

@media (max-width: 750px) { #fp-nav ul li a span, .fp-slidesNav ul li a span { margin: -5px 0 0 -5px; width: 10px; height: 10px; } }

#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span { margin: -8px 0 0 -8px; background: #000; border: 3px solid #b2b2b3; height: 16px; width: 16px; }

@media (max-width: 750px) { #fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span { margin: -5px 0 0 -5px; width: 10px; height: 10px; border: 1px solid #b2b2b3; } }

.fp-controlArrow { border-style: none; }

@media (max-width: 750px) { .fp-controlArrow { top: 99%; z-index: 1000; } }

.fp-controlArrow.fp-next { right: 15px; background-image: url("../img/arrow-right.svg"); width: 22px; height: 40px; background-repeat: no-repeat; }

@media (max-width: 750px) { .fp-controlArrow.fp-next { width: 15px; height: 35px; } }

.fp-controlArrow.fp-prev { right: 15px; background-image: url("../img/arrow-left.svg"); width: 22px; height: 40px; background-repeat: no-repeat; }

@media (max-width: 750px) { .fp-controlArrow.fp-prev { width: 15px; height: 35px; } }

html, body { height: 100%; }

* { box-sizing: border-box; }

.shochu-slide { width: 100%; height: 77%; overflow: hidden; position: relative; top: 12%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }

@media (max-width: 750px) { .shochu-slide { height: 80%; -webkit-box-align: start; align-items: flex-start; } }

.ingrediant-container { position: relative; }

.text-container { color: #ffffff; position: absolute; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; z-index: 500; width: 50%; left: 10%; margin-top: 4%; }

@media (max-width: 750px) { .text-container { width: 80%; margin-top: 8%; left: 2%; } }

@media (max-width: 380px) { .text-container { width: 85%; margin-top: 4%; } }

.text-container .page-heading { opacity: 0; }

.text-container .body-copy { opacity: 0; width: 70%; position: relative; left: 10%; margin-top: 120px; }

@media (max-width: 750px) { .text-container .body-copy { width: 95%; } }

.text-container .body-copy.ingredients { width: 110%; }

@media (max-width: 750px) { .text-container .body-copy.ingredients { width: 100%; }
  .text-container .body-copy.ingredients p { margin: 8px 0; line-height: 12px; }
  .text-container .body-copy.ingredients p b { font-size: 13px; letter-spacing: -1px; } }

.shochu-slide--5 .text-container .body-copy { width: 50%; }

@media (max-width: 750px) { .shochu-slide--5 .text-container .body-copy { width: 90%; } }

.page-heading { font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; font-size: 55px; font-weight: 900; line-height: 53px; letter-spacing: -2px; margin-left: -13%; }

@media (max-width: 750px) { .page-heading { font-size: 33px; line-height: 34px; letter-spacing: -1px; } }

@media (max-width: 350px) { .page-heading { font-size: 28px; line-height: 29px; letter-spacing: -1px; } }

.body-copy { font-family: "DIN Next LT W01 Regular", sans-serif; font-size: 15px; line-height: 19px; color: #ffffff; }

@media (max-width: 750px) { .body-copy { font-size: 13px; line-height: 14px; } }

@media (max-width: 350px) { .body-copy { font-size: 12px; line-height: 13px; } }

.body-copy b { font-size: 15px; }

.side-copy { font-family: "DIN Next LT W01 Regular", sans-serif; font-size: 15px; line-height: 18px; color: #ffffff; position: absolute; width: 35%; right: 2%; top: 120px; opacity: 0; }

.shochu-slide--1 { mix-blend-mode: multiply; overflow: hidden; }

.shochu-slide--1 .grey-container { background-color: rgba(40, 40, 40, 0.6); height: 100%; position: relative; width: 85%; left: 5%; mix-blend-mode: multiply; }

.shochu-slide--1 .grey-container .charactors { width: 7%; position: absolute; bottom: 20px; left: 30px; opacity: 0.6; }

@media (max-width: 750px) { .shochu-slide--1 .grey-container .charactors { width: 10%; } }

.shochu-slide--1 .grey-container .geometric-pattern-slide-1 { position: absolute; bottom: 20px; left: 60%; z-index: 50; }

.shochu-slide--1 .grey-container .grey-overlay { background-color: rgba(176, 179, 178, 0.7); width: 30%; height: 100%; position: absolute; left: 35%; z-index: 2; background-blend-mode: multiply; mix-blend-mode: multiply; }

.shochu-slide--1 .grey-container .image-container-shochu-slide--1 { width: 65%; height: 100%; position: relative; left: 60%; }

.shochu-slide--1 .grey-container .image-container-shochu-slide--1 img { -o-object-fit: cover; object-fit: cover; height: 100%; }

.shochu-slide--2 { overflow: visible; }

.shochu-slide--2 .japanese-vodka { width: 28%; position: absolute; left: 55%; margin-top: 40px; }

@media (max-width: 750px) { .shochu-slide--2 .japanese-vodka { width: 85%; left: 10%; margin-top: 20px; } }

.shochu-slide--2 .orange-container { position: absolute; width: 35%; left: -5%; height: 100%; background-color: rgba(188, 98, 0, 0.5); }

@media (max-width: 750px) { .shochu-slide--2 .orange-container { width: 40%; left: 0; } }

.shochu-slide--2 .orange-container .rotated-text { font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; font-weight: 900; color: #ffffff; font-size: 24px; line-height: 22px; letter-spacing: -1px; position: absolute; width: 340px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 55%; right: -20%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

@media (max-width: 750px) { .shochu-slide--2 .orange-container .rotated-text { right: auto; left: -80px; top: 50%; font-size: 20px; line-height: 21px; width: 320px; } }

.shochu-slide--2 .grey-container { position: absolute; width: 75%; left: 30%; height: 100%; background-color: rgba(40, 40, 40, 0.6); background-image: url("/img/what-is-shochu/japan-vector.svg"); background-position: right 85px center; background-repeat: no-repeat; background-size: contain; }

@media (max-width: 750px) { .shochu-slide--2 .grey-container { width: 60%; left: 40%; } }

.shochu-slide--2 .grey-container .bottle-image { width: 45%; position: absolute; left: 5%; top: 100px; }

@media (max-width: 750px) { .shochu-slide--2 .grey-container .bottle-image { width: 70%; top: 300px; left: 10%; } }

@media (max-width: 350px) { .shochu-slide--2 .grey-container .bottle-image { top: 250px; } }

.shochu-slide--3 .image-container-shochu-slide--3 { width: 25%; height: 100%; position: absolute; left: 75%; z-index: 10; }

@media (max-width: 750px) { .shochu-slide--3 .image-container-shochu-slide--3 { width: 40%; left: 60%; } }

.shochu-slide--3 .image-container-shochu-slide--3 img { -o-object-fit: cover; object-fit: cover; height: 100%; opacity: .8; mix-blend-mode: multiply; }

.shochu-slide--3 .green-container { background-color: rgba(170, 194, 127, 0.7); height: 100%; position: relative; overflow: visible; width: 75%; left: 5%; }

@media (max-width: 750px) { .shochu-slide--3 .green-container { left: 0; } }

.shochu-slide--4 .image-container-shochu-slide--4 { width: 40%; height: 100%; position: absolute; left: 55%; z-index: 10; }

.shochu-slide--4 .image-container-shochu-slide--4 img { -o-object-fit: cover; object-fit: cover; height: 100%; opacity: .8; mix-blend-mode: multiply; }

.shochu-slide--4 .red-container { background-color: rgba(193, 101, 72, 0.5); height: 100%; position: absolute; overflow: visible; width: 65%; left: 5%; }

@media (max-width: 750px) { .shochu-slide--4 .red-container { left: 0%; } }

.shochu-slide--4 .green-container { background-color: rgba(170, 194, 127, 0.7); height: 100%; position: absolute; overflow: visible; width: 5%; left: 0%; }

@media (max-width: 750px) { .shochu-slide--4 .green-container { width: 0%; } }

.shochu-slide--5 { overflow: visible; }

.shochu-slide--5 .orange-container { position: absolute; width: 80%; left: -10%; height: 100%; background-color: rgba(188, 98, 0, 0.5); mix-blend-mode: multiply; }

@media (max-width: 750px) { .shochu-slide--5 .orange-container { width: 100%; left: 0%; } }

.shochu-slide--5 .yellow-container { position: absolute; width: 40%; left: 65%; height: 100%; background-color: rgba(231, 197, 105, 0.8); mix-blend-mode: multiply; }

@media (max-width: 750px) { .shochu-slide--5 .yellow-container { width: 0%; left: 100%; } }

.shochu-slide--5 .image-container-shochu-slide--5 { position: absolute; width: 50%; z-index: 500; right: 12%; top: 100px; }

@media (max-width: 750px) { .shochu-slide--5 .image-container-shochu-slide--5 { width: 75%; right: -4%; top: 235px; } }

@media (max-width: 350px) { .shochu-slide--5 .image-container-shochu-slide--5 { width: 70%; right: -4%; top: 250px; } }

.shochu-slide--6 .grey-container { background-color: rgba(40, 40, 40, 0.6); height: 100%; position: relative; width: 95%; left: 5%; }

.shochu-slide--6 .grey-container .image-container-shochu-slide--6-1 { width: 25%; height: 100%; position: absolute; left: 50%; }

.shochu-slide--6 .grey-container .image-container-shochu-slide--6-1 img { -o-object-fit: cover; object-fit: cover; height: 100%; }

.shochu-slide--6 .grey-container .image-container-shochu-slide--6-2 { width: 25%; height: 100%; position: absolute; left: 75%; }

.shochu-slide--6 .grey-container .image-container-shochu-slide--6-2 img { -o-object-fit: cover; object-fit: cover; height: 100%; }

.shochu-slide--6 .grey-container .grey-overlay { position: absolute; width: 13%; height: 100%; left: 75%; background-color: rgba(176, 179, 178, 0.7); opacity: 1; z-index: 200; width: 35%; }

.shochu-slide--7 .gery-container { background-color: rgba(40, 40, 40, 0.6); height: 100%; position: relative; width: 95%; }

.shochu-slide--7 .gery-container .image-container-shochu-slide--7 { width: 30%; height: 100%; position: relative; left: 55%; }

.shochu-slide--7 .gery-container .image-container-shochu-slide--7 img { -o-object-fit: cover; object-fit: cover; height: 100%; }

.dicover-japan-container { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: start; align-items: flex-start; width: auto; height: 80%; width: auto; }

@media (max-width: 750px) { .dicover-japan-container { height: 65%; } }

.dicover-japan-container img { height: 85%; width: auto; }

.preservatives { height: 80%; width: auto; display: -webkit-box; display: flex; width: 3%; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: start; justify-content: flex-start; }

@media (max-width: 750px) { .preservatives { width: 7%; height: 65%; } }

.preservatives .preservatives-inner { -webkit-box-align: start; align-items: flex-start; display: -webkit-box; display: flex; }

.preservatives .preservatives-inner img { width: auto; width: 50%; }

@media (max-width: 750px) { .preservatives .preservatives-inner img { margin-left: 10px; } }

.can-fullheight { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; opacity: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-out; transition: all 1s ease-out; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

.can-fullheight img.small-can { max-height: 90%; width: auto; }

@media (max-width: 750px) { .can-fullheight img.small-can { height: 87%; } }

.instagram-logo { width: 50%; max-width: 300px; margin-top: 100px; }

.can-fullheight.fade-in { opacity: 1; -webkit-transform: scale(1); transform: scale(1); padding-top: 0px; padding-bottom: 0px; }

.can-fullheight.fade-in .preservatives { -webkit-transform: scale(1); transform: scale(1); }

.can-fullheight.fade-in .dicover-japan-container { -webkit-transform: scale(1); transform: scale(1); }

.product-page-wrapper { position: relative; width: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; }

.blurb { width: 80%; max-width: 580px; position: relative; text-align: center; font-size: 24px; line-height: 35px; margin-top: 88px; z-index: 200; text-align: justify; }

@media (max-width: 750px) { .blurb { font-size: 18px; line-height: 20px; } }

@media (max-width: 350px) { .blurb { font-size: 14px; line-height: 18px; } }

.yellow-watercolour { position: absolute; width: 50%; opacity: 0.7; -webkit-transform: rotate(120deg) scaleX(-1); transform: rotate(120deg) scaleX(-1); overflow: visable; }

@media (max-width: 750px) { .yellow-watercolour { width: 100%; } }

.can-wrapper { position: absolute; top: 34%; width: 100%; z-index: 1000; }

@media (max-width: 750px) { .can-wrapper { z-index: 1; } }

.cans { width: 100%; position: relative; z-index: 1; height: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; top: 0; }

.cans img { -o-object-fit: contain; object-fit: contain; }

.dotted-hr { border-bottom: 2px dotted #000; height: 1px; width: 80%; }

.watercolour-green .dotted-hr { border-bottom: 2px dotted #71a850; }

.watercolour-orange .dotted-hr { border-bottom: 2px dotted #e07c00; }

.watercolour-red .dotted-hr { border-bottom: 2px dotted #e94e19; }

#product-container-outer { width: 100%; }

.product-container { display: -webkit-box; display: flex; -webkit-box-pack: end; justify-content: flex-end; -webkit-box-align: end; align-items: flex-end; width: 100%; height: 100%; position: relative; opacity: 0; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; background-position: center center; background-repeat: no-repeat; mix-blend-mode: screen; background-size: 300px; overflow: visible; padding-top: 100px; /* IE6-9 */ }

@media (max-width: 750px) { .product-container { background-image: none !important; } }

.product-container .product-blurb { -webkit-transition: all .8s ease-out; transition: all .8s ease-out; -webkit-transform: translateX(40px); transform: translateX(40px); -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; position: relative; width: 46%; margin-bottom: 40px; display: -webkit-box; display: flex; justify-content: space-around; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: 20px 40px 20px 110px; margin-right: 20px; /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 22%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(22%, rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0))); background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 22%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); /* IE6-9 */ }

@media (max-width: 1600px) { .product-container .product-blurb { padding: 20px 40px 20px 160px; } }

@media (max-width: 1200px) { .product-container .product-blurb { padding: 20px 40px 20px 170px; } }

@media (max-width: 750px) { .product-container .product-blurb { z-index: 10000; padding: 30px !important; width: 100%; position: absolute; bottom: -20%; /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.6) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.4)), color-stop(22%, rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.6))); background: linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); } }

.product-container .product-blurb h2 { font-size: 28px; line-height: 30px; text-transform: uppercase; width: 80%; opacity: 0; -webkit-transform: translateX(80px); transform: translateX(80px); -webkit-transition: all .6s ease-in; transition: all .6s ease-in; letter-spacing: -1px; }

@media (max-width: 1200px) { .product-container .product-blurb h2 { font-size: 22px; line-height: 26px; } }

@media (max-width: 750px) { .product-container .product-blurb h2 { font-size: 17px; line-height: 16px; } }

@media (max-width: 350px) { .product-container .product-blurb h2 { font-size: 16px; line-height: 17px; } }

.product-container .product-blurb p { opacity: 0; font-size: 17px; line-height: 21px; margin: 8px 10px 8px 0; -webkit-transform: translateX(80px); transform: translateX(80px); -webkit-transition: all .6s ease-in; transition: all .6s ease-in; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }

@media (max-width: 1200px) { .product-container .product-blurb p { font-size: 15px; line-height: 17px; } }

@media (max-width: 750px) { .product-container .product-blurb p { font-size: 14px; line-height: 18px; } }

@media (max-width: 350px) { .product-container .product-blurb p { font-size: 13px; line-height: 15px; } }

.introducing { position: relative; display: -webkit-box; display: flex; font-display: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 100%; height: 100%; z-index: 90; }

@media (max-width: 750px) { .introducing { width: 300%; }
  .introducing img { width: 100%; } }

@media (max-width: 750px) { .introducing { width: 300%; }
  .introducing img { width: 100%; } }

.introducing img { width: 80%; }

.product-container.fade-in { opacity: 1; background-size: 35%; background-size: contain; }

.product-container.fade-in .product-blurb { -webkit-transform: translateX(0); transform: translateX(0); }

.product-container.fade-in .product-blurb h2 { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }

.product-container.fade-in .product-blurb p { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }

.product-container.fade-in .assset-container { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }

.product-avitars.fade-in { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }

.watercolour-green { background-image: url("../img/green-watercolour@3x.png"); }

.watercolour-orange { background-image: url("../img/orange-watercolour@3x.png"); }

.watercolour-red { background-image: url("../img/red-watercolour@3x.png"); }

.assset-container { -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 0; position: absolute; width: 10%; left: 30%; top: 0%; }

.assset-container.assset-container1 { width: 8%; top: 13%; left: 33%; -webkit-transform: translateX(-200px); transform: translateX(-200px); -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

@media (max-width: 750px) { .assset-container.assset-container1 { left: 7%; width: 14%; } }

.assset-container.assset-container4 { width: 8%; top: 6%; -webkit-transform: translateX(-200px); transform: translateX(-200px); -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }

@media (max-width: 750px) { .assset-container.assset-container4 { left: 15%; width: 8%; } }

.assset-container.assset-container2 { left: 62%; width: 8%; top: 3%; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }

@media (max-width: 750px) { .assset-container.assset-container2 { left: 77%; width: 18%; } }

.assset-container.assset-container3 { left: 60%; width: 4%; top: 6%; -webkit-transform: translateX(200px); transform: translateX(200px); }

@media (max-width: 750px) { .assset-container.assset-container3 { left: 75%; width: 10%; } }

.assset-container.assset-container5 { top: 10%; left: 59%; width: 5%; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }

@media (max-width: 750px) { .assset-container.assset-container5 { left: 77%; width: 14%; } }

.assset-container.assset-container6 { top: 14%; left: 60%; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

@media (max-width: 750px) { .assset-container.assset-container6 { left: 75%; width: 17%; } }

.assset-container.assset-container7 { top: 35%; -webkit-transform: translateX(-200px); transform: translateX(-200px); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

@media (max-width: 750px) { .assset-container.assset-container7 { left: 8%; width: 17%; } }

.assset-container.assset-container8 { top: 29%; width: 8%; left: 33%; -webkit-transform: translateX(-200px); transform: translateX(-200px); }

@media (max-width: 750px) { .assset-container.assset-container8 { left: 4%; width: 15%; } }

.assset-container.assset-container9 { top: 29%; width: 12%; left: 27%; -webkit-transform: translateX(-200px); transform: translateX(-200px); }

@media (max-width: 750px) { .assset-container.assset-container9 { left: 4%; width: 15%; } }

.assset-container.assset-container10 { top: 25%; left: 60%; width: 6%; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

@media (max-width: 750px) { .assset-container.assset-container10 { left: 8%; top: 24%; width: 15%; } }

.assset-container.assset-container11 { top: 35%; width: 6%; left: 34%; -webkit-transform: translateX(-200px); transform: translateX(-200px); -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }

@media (max-width: 750px) { .assset-container.assset-container11 { left: 78%; width: 18%; } }

.can-wrapper { position: absolute; }

.avitar-container { height: 100%; width: 100%; position: absolute; z-index: 1500; }

.product-avitars { position: absolute; width: 100%; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateX(200px); transform: translateX(200px); opacity: 0; }

.product-avitars.product-fishbird { width: 160px; margin-left: -80px; left: 58%; top: 5%; z-index: 1001; }

@media (max-width: 750px) { .product-avitars.product-fishbird { left: 68%; } }

.product-avitars.product-crane { width: 200px; margin-left: -100px; left: 45%; top: 33%; z-index: 1001; }

@media (max-width: 750px) { .product-avitars.product-crane { left: 35%; } }

.product-avitars.product-whale { width: 280px; margin-left: -140px; left: 45%; top: 82%; z-index: 1001; }

.anchor-navs { position: fixed; left: 0; top: 50%; z-index: 500; }

.anchor-navs nav { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; margin-top: -50px; }

.anchor-navs nav a { margin: 5px 10px; display: block; font-size: 40px; line-height: 20px; list-style-type: none; border-radius: 50%; width: 15px; height: 15px; cursor: pointer; background-color: #b2b2b3; }

.anchor-navs nav a.inactive { background-color: #b2b2b3; }

.anchor-navs nav a.active { background-color: #000000; border: 4px solid #b2b2b3; }

.anchor-navs.horiz { left: 50%; bottom: 16px; top: auto; }

.anchor-navs.horiz nav { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; margin-top: 0px; margin-left: -60px; }

.product-slide { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }

.menu-footer { display: -webkit-box; display: flex; width: 100%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; padding: 15px 0; }

.menu-footer div { padding: 0 50px; }

@media (max-width: 750px) { .menu-footer div { padding: 0 25px; } }

@media (max-width: 550px) { .menu-footer div { padding: 0 9px; } }

@media (max-width: 350px) { .menu-footer div { padding: 0 4px; } }

.menu-footer div a { text-decoration: none; color: #222222; display: inline-block; font-size: 13px; text-transform: uppercase; font-weight: 600; font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; letter-spacing: -1px; }

@media (max-width: 500px) { .menu-footer div a { font-size: 11px; } }

@media (max-width: 350px) { .menu-footer div a { font-size: 9px; } }

@media (max-width: 380px) { .menu-footer div a { font-size: 8px; } }

@media (max-width: 350px) { .menu-footer div a { font-size: 7px; } }

#instafeed { width: 96%; margin-top: 20px; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; max-width: 1000px; }

@media (max-width: 750px) { #instafeed { margin-top: 20px; } }

#instafeed a { position: relative; width: 32.5%; margin-bottom: 15px; }

@media (max-width: 750px) { #instafeed a { margin-bottom: 5px; } }

#instafeed a::after { content: ""; display: block; padding-bottom: 100%; }

#instafeed a img { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.page-container { width: 96%; display: -webkit-box; display: flex; flex-wrap: wrap; max-width: 1000px; -webkit-box-pack: center; justify-content: center; }

.page-heading-retailers { text-transform: uppercase; font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; margin-top: 90px; text-align: center; width: 90%; }

.page-footer-retailers { text-transform: uppercase; font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; margin-top: 10px; text-align: center; width: 90%; }

.stockist { width: 100%; height: 100%; display: -webkit-box; display: flex; }

.stockist ul { width: 100%; height: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; margin: 0; padding: 0; margin-top: 20px; }

.stockist ul li { list-style-type: none; width: 130px; margin: 0; padding: 10px 20px; }

.stockist ul li.wider { width: 150px; }

.stockist ul li a img { -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 1; }

.stockist ul li a:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); }

.mobile { display: none; }

@media (max-width: 750px) { .mobile { display: inline; } }

.desktop { display: inline-block; }

@media (max-width: 750px) { .desktop { display: none; } }

.js-video-button, .button { background-color: #444; color: #FFFFFF; border-radius: 20px; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 10px 20px; margin-top: 5px; display: inline-block; opacity: 0.9; text-decoration: none; text-transform: uppercase; }

.product-button-container .js-video-button, .product-button-container .button { margin: 0 5px; }

.js-video-button:hover, .button:hover { opacity: 1; background-color: #222; }

.product-button-container { width: 100%; position: absolute; bottom: 50px; z-index: 1000; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; }

.product-slide-last .product-button-container { bottom: 10px; }

@-webkit-keyframes modal-video { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes modal-video { from { opacity: 0; }
  to { opacity: 1; } }

@-webkit-keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
  to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }

@keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
  to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }

.modal-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); z-index: 1000000; cursor: pointer; opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: modal-video; animation-name: modal-video; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }

.modal-video-close { opacity: 0; }

.modal-video-close .modal-video-movie-wrap { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }

.modal-video-body { max-width: 940px; width: 100%; height: 100%; margin: 0 auto; display: table; }

.modal-video-inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }

.modal-video-movie-wrap { width: 100%; height: 0; position: relative; padding-bottom: 56.25%; background-color: #333; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: modal-video-inner; animation-name: modal-video-inner; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; }

.modal-video-movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.modal-video-close-btn { position: absolute; z-index: 2; top: -35px; right: -35px; display: inline-block; width: 35px; height: 35px; overflow: hidden; border: none; background: transparent; }

.modal-video-close-btn:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.modal-video-close-btn:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.modal-video-close-btn:before, .modal-video-close-btn:after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #fff; border-radius: 5px; margin-top: -6px; }

.ageGateBg { background-color: rgba(0, 0, 0, 0); }

.ageGateBg img { max-width: 100%; }

input:focus { outline: none; }

.ageGate2 { margin: 0; box-sizing: border-box; width: 100%; display: inline-block; text-align: center; color: #000; min-height: 530px; }

.ageGate2 p { margin: 1em 0; font-size: 16px; line-height: 18px; padding: 0 14%; font-weight: 600; }

@media (max-width: 700px) { .ageGate2 p { font-size: 14px; line-height: 17px; padding: 0 5%; } }

.ageGate2 #age-form { margin: 0; }

.ageGate2 .ccLogo { width: 25%; max-width: 250px; margin: 0 auto; padding-top: 0; margin-top: 30px; margin-bottom: 20px; -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4)); }

.ageGate2 .drawTheLine { width: 35%; max-width: 100px; margin: 20px auto 0; padding-left: 5%; }

.ageGate2 div.inputs { display: block; width: 300px; margin: 0 auto; overflow: auto; padding: 10px 0; }

.ageGate2 div.ageGate2 h1 { margin: 5px 0; }

.ageGate2 .ageCountry { float: left; }

.ageGate2 select { width: 186px; padding: 2px; }

.ageGate2 .ageDay { float: left; width: 24%; display: inline-block; margin-right: 1%; }

.ageGate2 .ageDay input { width: 100%; }

.ageGate2 .ageDay input:focus { box-shadow: inset 0 0 0 1px #000; }

.ageGate2 .ageMonth { float: left; width: 24%; display: inline-block; margin-right: 1%; }

.ageGate2 .ageMonth input { width: 100%; }

.ageGate2 .ageMonth input:focus { box-shadow: inset 0 0 0 1px #000; }

.ageGate2 .ageYear { float: left; width: 50%; display: inline-block; }

.ageGate2 .ageYear input { width: 100%; }

.ageGate2 .ageYear input:focus { box-shadow: inset 0 0 0 1px #000; }

.ageGate2 input[type="numeric"] { font-size: 30px; font-weight: 300; background-position: center; background-color: #FFF; color: grey; text-align: center; padding: 10px 8px; border: 0; box-shadow: inset 0 0 0 1px #FFF; font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; font-weight: 900; border-radius: 4px; }

@media (max-width: 700px) { .ageGate2 input[type="numeric"] { font-size: 18px; } }

.ageGate2 input[type="submit"] { border: 1px solid #efefef; display: block; margin-top: 15px; padding: 10px 40px; margin-bottom: 0; border: none; text-transform: uppercase; background-color: grey; color: #fff; font-size: 30px; border-radius: 0; font-family: "Iwata GNew Gothic W55 B", Helvetica, Verdana, sans-serif; font-weight: 900; width: 180px; margin: 0 auto; border-radius: 4px; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; }

@media (max-width: 700px) { .ageGate2 input[type="submit"] { font-size: 20px; } }

.ageGate2 input[type="submit"]:hover { background-color: #676767; }

.ageGate2 input[type=number]::-webkit-inner-spin-button, .ageGate2 input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; border-radius: 3px; }

.ageGate2 .marBott { padding-bottom: 10px; }

.ageGate2 label { text-align: center; text-transform: uppercase; font-weight: 600; font-size: 14px; padding: 3px 0px; display: inline-block; }

.ageGate2 select { outline: none; background: none repeat scroll 0 0 #FDF9E3; border: medium none; color: #4B4B45; height: 24px; padding: 2px; font-size: 13px; }

.ageGate2 #hiddenDiv { background-color: #71a850; color: #FFF; padding: 10px 50px; margin: 3px 0; }

.ageGate2 .fancybox-bg { background: #888; }

.ageGate2 .fancybox-is-open .fancybox-bg { opacity: 1; }

@media only screen and (max-width: 479px) { .ageGate2 { text-align: center; min-height: 370px; margin: 20px 5%; box-sizing: border-box; width: 90%; }
  .ageGate2 #hiddenDiv { padding: 8px 20px; margin: 3px 0; font-size: 12px; }
  .ageGate2 div.inputs { display: block; width: 300px; margin: 0 auto; overflow: auto; padding: 10px 0; font-size: 18px; }
  .ageGate2 div.ageGate2 h1 { margin: 5px 0; }
  .ageGate2 div.inputs { display: block; width: 236px; margin: 0 auto; overflow: auto; padding: 10px 0; }
  .ageGate2 .ageDay { float: left; }
  .ageGate2 .ageDay input { width: 100%; }
  .ageGate2 .ageMonth { float: left; }
  .ageGate2 .ageMonth input { width: 100%; }
  .ageGate2 .ageYear { float: left; }
  .ageGate2 .ageYear input { width: 100%; } }

body.ageGateBg { background-image: none; background-color: rgba(0, 0, 0, 0); }

.fancybox-error, .fancybox-content { background: rgba(0, 0, 0, 0) !important; }

.fancybox-iframe { background: rgba(0, 0, 0, 0) !important; }

.fancybox-slide.fancybox-slide--iframe.fancybox-slide--current.fancybox-slide--complete { background-image: url("/img/WashiPaper.jpg"); background-size: cover; }

/* ========================================================================== Helper classes ========================================================================== */
/* Hide visually and from screen readers */
.hidden { display: none !important; }

/* Hide only visually, but have it available for screen readers: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility 1. For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; /* 1 */ }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; white-space: inherit; }

/* Hide visually and from screen readers, 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; }

/* ========================================================================== 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, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }

/* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */
@media print { *, *:before, *:after { background: transparent !important; color: #000 !important; /* Black prints faster */ 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 that are fragment identifiers, or use the `javascript:` pseudo protocol */
  a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
  pre { white-space: pre-wrap !important; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  /* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }