@charset "UTF-8"; @charset "UTF-8"; /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * 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; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * 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; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 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 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * 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; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * 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; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 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 */ } /** * Remove the default vertical scrollbar in IE. */ 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 and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * 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 */ } /* ============================================ */ /* This file has a mobile-to-desktop breakpoint */ /* ============================================ */ @media (max-width: 400px) { @-ms-viewport { width: 320px; } } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .grid-container:before, .mobile-grid-5:before, .mobile-grid-10:before, .mobile-grid-15:before, .mobile-grid-20:before, .mobile-grid-25:before, .mobile-grid-30:before, .mobile-grid-35:before, .mobile-grid-40:before, .mobile-grid-45:before, .mobile-grid-50:before, .mobile-grid-55:before, .mobile-grid-60:before, .mobile-grid-65:before, .mobile-grid-70:before, .mobile-grid-75:before, .mobile-grid-80:before, .mobile-grid-85:before, .mobile-grid-90:before, .mobile-grid-95:before, .mobile-grid-100:before, .mobile-grid-33:before, .mobile-grid-66:before, .grid-5:before, .grid-10:before, .grid-15:before, .grid-20:before, .grid-25:before, .grid-30:before, .grid-35:before, .grid-40:before, .grid-45:before, .grid-50:before, .grid-55:before, .grid-60:before, .grid-65:before, .grid-70:before, .grid-75:before, .grid-80:before, .grid-85:before, .grid-90:before, .grid-95:before, .grid-100:before, .grid-33:before, .grid-66:before, .grid-offset:before, .clearfix:before, .grid-container:after, .mobile-grid-5:after, .mobile-grid-10:after, .mobile-grid-15:after, .mobile-grid-20:after, .mobile-grid-25:after, .mobile-grid-30:after, .mobile-grid-35:after, .mobile-grid-40:after, .mobile-grid-45:after, .mobile-grid-50:after, .mobile-grid-55:after, .mobile-grid-60:after, .mobile-grid-65:after, .mobile-grid-70:after, .mobile-grid-75:after, .mobile-grid-80:after, .mobile-grid-85:after, .mobile-grid-90:after, .mobile-grid-95:after, .mobile-grid-100:after, .mobile-grid-33:after, .mobile-grid-66:after, .grid-5:after, .grid-10:after, .grid-15:after, .grid-20:after, .grid-25:after, .grid-30:after, .grid-35:after, .grid-40:after, .grid-45:after, .grid-50:after, .grid-55:after, .grid-60:after, .grid-65:after, .grid-70:after, .grid-75:after, .grid-80:after, .grid-85:after, .grid-90:after, .grid-95:after, .grid-100:after, .grid-33:after, .grid-66:after, .grid-offset:after, .clearfix:after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .grid-container:after, .mobile-grid-5:after, .mobile-grid-10:after, .mobile-grid-15:after, .mobile-grid-20:after, .mobile-grid-25:after, .mobile-grid-30:after, .mobile-grid-35:after, .mobile-grid-40:after, .mobile-grid-45:after, .mobile-grid-50:after, .mobile-grid-55:after, .mobile-grid-60:after, .mobile-grid-65:after, .mobile-grid-70:after, .mobile-grid-75:after, .mobile-grid-80:after, .mobile-grid-85:after, .mobile-grid-90:after, .mobile-grid-95:after, .mobile-grid-100:after, .mobile-grid-33:after, .mobile-grid-66:after, .grid-5:after, .grid-10:after, .grid-15:after, .grid-20:after, .grid-25:after, .grid-30:after, .grid-35:after, .grid-40:after, .grid-45:after, .grid-50:after, .grid-55:after, .grid-60:after, .grid-65:after, .grid-70:after, .grid-75:after, .grid-80:after, .grid-85:after, .grid-90:after, .grid-95:after, .grid-100:after, .grid-33:after, .grid-66:after, .grid-offset:after, .clearfix:after { clear: both; } .grid-container, .mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66, .grid-offset, .clearfix { /* */ *zoom: 1; /* */ } .grid-container { margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: 10px; padding-right: 10px; } .mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; padding-right: 10px; /* */ *padding-left: 0; *padding-right: 0; /* */ } .mobile-grid-5 > *, .mobile-grid-10 > *, .mobile-grid-15 > *, .mobile-grid-20 > *, .mobile-grid-25 > *, .mobile-grid-30 > *, .mobile-grid-35 > *, .mobile-grid-40 > *, .mobile-grid-45 > *, .mobile-grid-50 > *, .mobile-grid-55 > *, .mobile-grid-60 > *, .mobile-grid-65 > *, .mobile-grid-70 > *, .mobile-grid-75 > *, .mobile-grid-80 > *, .mobile-grid-85 > *, .mobile-grid-90 > *, .mobile-grid-95 > *, .mobile-grid-100 > *, .mobile-grid-33 > *, .mobile-grid-66 > *, .grid-5 > *, .grid-10 > *, .grid-15 > *, .grid-20 > *, .grid-25 > *, .grid-30 > *, .grid-35 > *, .grid-40 > *, .grid-45 > *, .grid-50 > *, .grid-55 > *, .grid-60 > *, .grid-65 > *, .grid-70 > *, .grid-75 > *, .grid-80 > *, .grid-85 > *, .grid-90 > *, .grid-95 > *, .grid-100 > *, .grid-33 > *, .grid-66 > * { /* */ *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '10px'); *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '10px'); /* */ } .grid-parent { padding-left: 0; padding-right: 0; } .grid-offset { clear: both; margin-left: -10px; margin-right: -10px; } @media (max-width: 568px) { .mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 { position: relative; } .mobile-grid-5 { float: left; width: 5%; /* */ *width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-5 { margin-left: 5%; } .mobile-suffix-5 { margin-right: 5%; } .mobile-push-5 { left: 5%; /* */ *left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-5 { left: -5%; /* */ *left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-10 { float: left; width: 10%; /* */ *width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-10 { margin-left: 10%; } .mobile-suffix-10 { margin-right: 10%; } .mobile-push-10 { left: 10%; /* */ *left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-10 { left: -10%; /* */ *left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-15 { float: left; width: 15%; /* */ *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-15 { margin-left: 15%; } .mobile-suffix-15 { margin-right: 15%; } .mobile-push-15 { left: 15%; /* */ *left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-15 { left: -15%; /* */ *left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-20 { float: left; width: 20%; /* */ *width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-20 { margin-left: 20%; } .mobile-suffix-20 { margin-right: 20%; } .mobile-push-20 { left: 20%; /* */ *left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-20 { left: -20%; /* */ *left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-25 { float: left; width: 25%; /* */ *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-25 { margin-left: 25%; } .mobile-suffix-25 { margin-right: 25%; } .mobile-push-25 { left: 25%; /* */ *left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-25 { left: -25%; /* */ *left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-30 { float: left; width: 30%; /* */ *width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-30 { margin-left: 30%; } .mobile-suffix-30 { margin-right: 30%; } .mobile-push-30 { left: 30%; /* */ *left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-30 { left: -30%; /* */ *left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-35 { float: left; width: 35%; /* */ *width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-35 { margin-left: 35%; } .mobile-suffix-35 { margin-right: 35%; } .mobile-push-35 { left: 35%; /* */ *left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-35 { left: -35%; /* */ *left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-40 { float: left; width: 40%; /* */ *width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-40 { margin-left: 40%; } .mobile-suffix-40 { margin-right: 40%; } .mobile-push-40 { left: 40%; /* */ *left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-40 { left: -40%; /* */ *left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-45 { float: left; width: 45%; /* */ *width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-45 { margin-left: 45%; } .mobile-suffix-45 { margin-right: 45%; } .mobile-push-45 { left: 45%; /* */ *left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-45 { left: -45%; /* */ *left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-50 { float: left; width: 50%; /* */ *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-50 { margin-left: 50%; } .mobile-suffix-50 { margin-right: 50%; } .mobile-push-50 { left: 50%; /* */ *left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-50 { left: -50%; /* */ *left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-55 { float: left; width: 55%; /* */ *width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-55 { margin-left: 55%; } .mobile-suffix-55 { margin-right: 55%; } .mobile-push-55 { left: 55%; /* */ *left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-55 { left: -55%; /* */ *left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-60 { float: left; width: 60%; /* */ *width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-60 { margin-left: 60%; } .mobile-suffix-60 { margin-right: 60%; } .mobile-push-60 { left: 60%; /* */ *left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-60 { left: -60%; /* */ *left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-65 { float: left; width: 65%; /* */ *width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-65 { margin-left: 65%; } .mobile-suffix-65 { margin-right: 65%; } .mobile-push-65 { left: 65%; /* */ *left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-65 { left: -65%; /* */ *left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-70 { float: left; width: 70%; /* */ *width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-70 { margin-left: 70%; } .mobile-suffix-70 { margin-right: 70%; } .mobile-push-70 { left: 70%; /* */ *left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-70 { left: -70%; /* */ *left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-75 { float: left; width: 75%; /* */ *width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-75 { margin-left: 75%; } .mobile-suffix-75 { margin-right: 75%; } .mobile-push-75 { left: 75%; /* */ *left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-75 { left: -75%; /* */ *left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-80 { float: left; width: 80%; /* */ *width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-80 { margin-left: 80%; } .mobile-suffix-80 { margin-right: 80%; } .mobile-push-80 { left: 80%; /* */ *left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-80 { left: -80%; /* */ *left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-85 { float: left; width: 85%; /* */ *width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-85 { margin-left: 85%; } .mobile-suffix-85 { margin-right: 85%; } .mobile-push-85 { left: 85%; /* */ *left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-85 { left: -85%; /* */ *left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-90 { float: left; width: 90%; /* */ *width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-90 { margin-left: 90%; } .mobile-suffix-90 { margin-right: 90%; } .mobile-push-90 { left: 90%; /* */ *left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-90 { left: -90%; /* */ *left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-95 { float: left; width: 95%; /* */ *width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-95 { margin-left: 95%; } .mobile-suffix-95 { margin-right: 95%; } .mobile-push-95 { left: 95%; /* */ *left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-95 { left: -95%; /* */ *left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-33 { float: left; width: 33.33333%; /* */ *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-33 { margin-left: 33.33333%; } .mobile-suffix-33 { margin-right: 33.33333%; } .mobile-push-33 { left: 33.33333%; /* */ *left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-33 { left: -33.33333%; /* */ *left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-66 { float: left; width: 66.66667%; /* */ *width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-prefix-66 { margin-left: 66.66667%; } .mobile-suffix-66 { margin-right: 66.66667%; } .mobile-push-66 { left: 66.66667%; /* */ *left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-pull-66 { left: -66.66667%; /* */ *left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .mobile-grid-100 { clear: both; width: 100%; } } @media (min-width: 569px) { .push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 { position: relative; } .hide-on-desktop { display: none !important; } .grid-5 { float: left; width: 5%; /* */ *width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-5 { margin-left: 5%; } .suffix-5 { margin-right: 5%; } .push-5 { left: 5%; /* */ *left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-5 { left: -5%; /* */ *left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-10 { float: left; width: 10%; /* */ *width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-10 { margin-left: 10%; } .suffix-10 { margin-right: 10%; } .push-10 { left: 10%; /* */ *left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-10 { left: -10%; /* */ *left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-15 { float: left; width: 15%; /* */ *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-15 { margin-left: 15%; } .suffix-15 { margin-right: 15%; } .push-15 { left: 15%; /* */ *left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-15 { left: -15%; /* */ *left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-20 { float: left; width: 20%; /* */ *width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-20 { margin-left: 20%; } .suffix-20 { margin-right: 20%; } .push-20 { left: 20%; /* */ *left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-20 { left: -20%; /* */ *left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-25 { float: left; width: 25%; /* */ *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-25 { margin-left: 25%; } .suffix-25 { margin-right: 25%; } .push-25 { left: 25%; /* */ *left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-25 { left: -25%; /* */ *left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-30 { float: left; width: 30%; /* */ *width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-30 { margin-left: 30%; } .suffix-30 { margin-right: 30%; } .push-30 { left: 30%; /* */ *left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-30 { left: -30%; /* */ *left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-35 { float: left; width: 35%; /* */ *width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-35 { margin-left: 35%; } .suffix-35 { margin-right: 35%; } .push-35 { left: 35%; /* */ *left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-35 { left: -35%; /* */ *left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-40 { float: left; width: 40%; /* */ *width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-40 { margin-left: 40%; } .suffix-40 { margin-right: 40%; } .push-40 { left: 40%; /* */ *left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-40 { left: -40%; /* */ *left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-45 { float: left; width: 45%; /* */ *width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-45 { margin-left: 45%; } .suffix-45 { margin-right: 45%; } .push-45 { left: 45%; /* */ *left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-45 { left: -45%; /* */ *left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-50 { float: left; width: 50%; /* */ *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-50 { margin-left: 50%; } .suffix-50 { margin-right: 50%; } .push-50 { left: 50%; /* */ *left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-50 { left: -50%; /* */ *left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-55 { float: left; width: 55%; /* */ *width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-55 { margin-left: 55%; } .suffix-55 { margin-right: 55%; } .push-55 { left: 55%; /* */ *left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-55 { left: -55%; /* */ *left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-60 { float: left; width: 60%; /* */ *width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-60 { margin-left: 60%; } .suffix-60 { margin-right: 60%; } .push-60 { left: 60%; /* */ *left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-60 { left: -60%; /* */ *left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-65 { float: left; width: 65%; /* */ *width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-65 { margin-left: 65%; } .suffix-65 { margin-right: 65%; } .push-65 { left: 65%; /* */ *left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-65 { left: -65%; /* */ *left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-70 { float: left; width: 70%; /* */ *width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-70 { margin-left: 70%; } .suffix-70 { margin-right: 70%; } .push-70 { left: 70%; /* */ *left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-70 { left: -70%; /* */ *left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-75 { float: left; width: 75%; /* */ *width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-75 { margin-left: 75%; } .suffix-75 { margin-right: 75%; } .push-75 { left: 75%; /* */ *left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-75 { left: -75%; /* */ *left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-80 { float: left; width: 80%; /* */ *width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-80 { margin-left: 80%; } .suffix-80 { margin-right: 80%; } .push-80 { left: 80%; /* */ *left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-80 { left: -80%; /* */ *left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-85 { float: left; width: 85%; /* */ *width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-85 { margin-left: 85%; } .suffix-85 { margin-right: 85%; } .push-85 { left: 85%; /* */ *left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-85 { left: -85%; /* */ *left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-90 { float: left; width: 90%; /* */ *width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-90 { margin-left: 90%; } .suffix-90 { margin-right: 90%; } .push-90 { left: 90%; /* */ *left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-90 { left: -90%; /* */ *left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-95 { float: left; width: 95%; /* */ *width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-95 { margin-left: 95%; } .suffix-95 { margin-right: 95%; } .push-95 { left: 95%; /* */ *left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-95 { left: -95%; /* */ *left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-33 { float: left; width: 33.33333%; /* */ *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-33 { margin-left: 33.33333%; } .suffix-33 { margin-right: 33.33333%; } .push-33 { left: 33.33333%; /* */ *left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-33 { left: -33.33333%; /* */ *left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-66 { float: left; width: 66.66667%; /* */ *width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .prefix-66 { margin-left: 66.66667%; } .suffix-66 { margin-right: 66.66667%; } .push-66 { left: 66.66667%; /* */ *left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .pull-66 { left: -66.66667%; /* */ *left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); /* */ } .grid-100 { clear: both; width: 100%; } } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Core Owl Carousel CSS File */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } /* * Remodal - v1.1.0 * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ /* ========================================================================== Remodal's necessary styles ========================================================================== */ /* Hide scroll bar */ html.remodal-is-locked { overflow: hidden; -ms-touch-action: none; touch-action: none; } /* Anti FOUC */ .remodal, [data-remodal-id] { display: none; } /* Necessary styles of the overlay */ .remodal-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; } /* Necessary styles of the wrapper */ .remodal-wrapper { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch; } .remodal-wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; content: ""; } /* Fix iPad, iPhone glitches */ .remodal-overlay, .remodal-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Necessary styles of the modal dialog */ .remodal { position: relative; outline: none; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .remodal-is-initialized { /* Disable Anti-FOUC */ display: inline-block; } /* * Remodal - v1.1.0 * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ /* ========================================================================== Remodal's default mobile first theme ========================================================================== */ /* Default theme styles for the background */ .remodal-bg.remodal-is-opening, .remodal-bg.remodal-is-opened { -webkit-filter: blur(3px); filter: blur(3px); } /* Default theme styles of the overlay */ .remodal-overlay { background: rgba(43, 46, 56, 0.9); } .remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .remodal-overlay.remodal-is-opening { -webkit-animation-name: remodal-overlay-opening-keyframes; animation-name: remodal-overlay-opening-keyframes; } .remodal-overlay.remodal-is-closing { -webkit-animation-name: remodal-overlay-closing-keyframes; animation-name: remodal-overlay-closing-keyframes; } /* Default theme styles of the wrapper */ .remodal-wrapper { padding: 10px 10px 0; } /* Default theme styles of the modal dialog */ .remodal { box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 35px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #2b2e38; background: #fff; } .remodal.remodal-is-opening, .remodal.remodal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .remodal.remodal-is-opening { -webkit-animation-name: remodal-opening-keyframes; animation-name: remodal-opening-keyframes; } .remodal.remodal-is-closing { -webkit-animation-name: remodal-closing-keyframes; animation-name: remodal-closing-keyframes; } /* Vertical align of the modal dialog */ .remodal, .remodal-wrapper:after { vertical-align: middle; } /* Close button */ .remodal-close { position: absolute; top: 0; left: 0; display: block; overflow: visible; width: 35px; height: 35px; margin: 0; padding: 0; cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; text-decoration: none; color: #95979c; border: 0; outline: 0; background: transparent; } .remodal-close:hover, .remodal-close:focus { color: #2b2e38; } .remodal-close:before { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; font-size: 25px; line-height: 35px; position: absolute; top: 0; left: 0; display: block; width: 35px; content: "\00d7"; text-align: center; } /* Dialog buttons */ .remodal-confirm, .remodal-cancel { font: inherit; display: inline-block; overflow: visible; min-width: 110px; margin: 0; padding: 12px 0; cursor: pointer; -webkit-transition: background 0.2s; transition: background 0.2s; text-align: center; vertical-align: middle; text-decoration: none; border: 0; outline: 0; } .remodal-confirm { color: #fff; background: #81c784; } .remodal-confirm:hover, .remodal-confirm:focus { background: #66bb6a; } .remodal-cancel { color: #fff; background: #e57373; } .remodal-cancel:hover, .remodal-cancel:focus { background: #ef5350; } /* Remove inner padding and border in Firefox 4+ for the button tag. */ .remodal-confirm::-moz-focus-inner, .remodal-cancel::-moz-focus-inner, .remodal-close::-moz-focus-inner { padding: 0; border: 0; } /* Keyframes ========================================================================== */ @-webkit-keyframes remodal-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes remodal-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes remodal-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; } } @keyframes remodal-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; } } @-webkit-keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } @keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } /* Media queries ========================================================================== */ @media only screen and (min-width: 641px) { .remodal { max-width: 700px; } } /* IE8 ========================================================================== */ .lt-ie9 .remodal-overlay { background: #2b2e38; } .lt-ie9 .remodal { width: 700px; } /******************VARIABLES*********************/ @-webkit-keyframes loading-anime { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes loading-anime { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes loading-anime { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes loading-anime { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes zoom { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } @-moz-keyframes zoom { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } @-ms-keyframes zoom { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } @keyframes zoom { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } /********************BASE**********************/ html { height: 100%; } body { opacity: 0; height: 100%; background: #000; color: #64562e; font-family: YuGothic, "游ゴシック", Meiryo, "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "メイリオ", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; line-height: 1.4; font-size: 14px; font-size: 0.875rem; letter-spacing: .1em; animation: loading-anime 2s ease 0s 1 normal forwards; -webkit-animation: loading-anime 2s ease 0s 1 normal forwards; -moz-animation: loading-anime 2s ease 0s 1 normal forwards; } a { text-decoration: none; opacity: 1; transition: all .2s ease; color: #395daa; } a:hover { opacity: 0.5; transition: all .2s ease; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0 0 20px; } section { padding: 60px 0; } section.gray-section { background: #efefef; } section.beige-section { background: #f0e8d7; } section.dark-section { background: #000; color: #c9bc9c; } p { line-height: 1.8em; margin: 0 0 20px; } table.tbl--minimal { border-collapse: collapse; } table.tbl--minimal th, table.tbl--minimal td { padding: 10px 5px; text-align: left; vertical-align: top; } table.tbl--minimal tr { border-bottom: 1px solid; } table.tbl--minimal tr:last-child { border: none; } table.tbl--normal--white { border-collapse: collapse; } table.tbl--normal--white th, table.tbl--normal--white td { padding: 10px; text-align: left; vertical-align: top; border: 1px solid #000; } table.tbl--normal--white th { background: #fff; color: #000; } table.tbl--normal--white td { background: rgba(255, 255, 255, 0.25); } @media screen and (max-width: 568px) { /********************BASE mobile**********************/ h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0 0 10px; } section { padding: 30px 0; } p { margin: 0 0 10px; } table.tbl--normal--white { width: 100%; } } /***********************LAYOUT************************/ .grid-container { max-width: 1000px; } .grid-parent { padding: 0; } header, #header { position: fixed; z-index: 100; width: 100%; color: #fff; padding: 20px; box-sizing: border-box; background: rgba(35, 24, 21, 0.6); } header a, #header a { color: #fff; } header .logo--wrap, #header .logo--wrap { float: left; } header .logo--wrap .logo, #header .logo--wrap .logo { width: 242px; } header .grandnav, #header .grandnav { float: right; } header .grandnav .nav__unit, #header .grandnav .nav__unit { font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; display: inline-block; padding: 10px 5px; position: relative; } header .grandnav .nav__unit.show-on-mobile, #header .grandnav .nav__unit.show-on-mobile { display: none; } header .grandnav .nav__unit .ja, #header .grandnav .nav__unit .ja { min-width: 50px; display: inline-block; text-align: center; } header .grandnav .nav__unit .en, #header .grandnav .nav__unit .en { position: absolute; bottom: -5px; left: 0; width: 100%; text-align: center; font-size: 10px; font-size: 0.625rem; } .bottom__reservation { position: fixed; bottom: -75px; left: 0; width: 100%; color: #fff; z-index: 100; } .bottom__reservation .title-tag { position: absolute; width: 300px; height: 40px; top: -40px; left: 50%; margin-left: -150px; background: url(../images/title-tag__bg--off.png) center center no-repeat; background-size: contain; padding: 10px; box-sizing: border-box; text-align: center; } .bottom__reservation .title-tag:hover { background: url(../images/title-tag__bg--on.png) center center no-repeat; background-size: contain; cursor: pointer; } .bottom__reservation .title-area { background: rgba(35, 24, 21, 0.8); padding: 20px 0; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; text-align: center; height: 75px; box-sizing: border-box; float: left; width: 12%; } .bottom__reservation .title-area .en { display: block; font-size: 10px; font-size: 0.625rem; } .bottom__reservation .input-area { background: rgba(57, 93, 170, 0.6); width: 88%; float: left; padding: 10px 0; height: 75px; box-sizing: border-box; letter-spacing: 0em; } .bottom__reservation .input-area .reservation-form { display: table; height: 55px; margin: 0 auto; } .bottom__reservation .input-area .reservation-form .unit { display: table-cell; vertical-align: middle; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; font-size: 11px; font-size: 0.6875rem; padding: 0 5px; } .bottom__reservation .input-area .reservation-form .unit.people { border-left: 1px solid #fff; padding-left: 10px; } .bottom__reservation .input-area .reservation-form .unit .title { display: block; font-size: 14px; font-size: 0.875rem; } .bottom__reservation .input-area .reservation-form .unit .ghost-btn--white { padding: 1em; } .bottom__info { background: #231815; color: #fff; letter-spacing: 0; padding: 30px 0; position: relative; z-index: 5; } .bottom__info .grid-45 { padding-right: 20px; } .bottom__info .grid-20 { border-left: 1px solid #6b4223; } .bottom__info p { line-height: 1.4em; margin-bottom: 15px; } .bottom__info .btn--print { background: #a48b78; color: #fff; width: 100%; border-radius: 5px; padding: 1em 2em; } .bottom__info .btn--print .logo { height: 45px; display: block; margin: 0 auto 10px; } .bottom__info .title--bordered { border-bottom: 1px solid; display: inline-block; } .bottom__info h5 { margin-bottom: 10px; } .bottom__info .btn--beige { background: #a48b78; color: #fff; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; padding: 1em; width: 100%; border-radius: 5px; } ul.access-list { margin: 0 0 10px; padding-left: 25px; } ul.access-list li { font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; font-size: 12px; font-size: 0.75rem; } ul.access-list.no-margin { margin: 0; } .bottom__info__gallery .gallery__unit:last-child { border-bottom: none; } .news { background: rgba(122, 106, 86, 0.9); color: #fff; width: 100%; } .news .title-area, .news .container { display: table-cell; vertical-align: middle; box-sizing: border-box; } .news a { color: #fff; } .news .title-area { width: 15%; padding: 10px 20px; background: #7a6a56; } .news .title-area .title { font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; text-align: center; } .news .title-area .title .ja { font-size: 18px; font-size: 1.125rem; display: block; } .news .title-area .title .en { font-size: 14px; font-size: 0.875rem; } .news .title-area .btn { width: 100%; } .news .container { width: 85%; padding: 20px 0; } .topics-and-plan { background: rgba(201, 188, 156, 0.9); display: table; width: 100%; position: relative; z-index: 5; } .topics-and-plan .title-area, .topics-and-plan .container { display: table-cell; vertical-align: middle; } .topics-and-plan a { color: #64562e; } .topics-and-plan .title-area { width: 15%; padding: 10px 20px; background: #c9bc9c; } .topics-and-plan .title-area .title { font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; text-align: center; } .topics-and-plan .title-area .title .ja { font-size: 18px; font-size: 1.125rem; display: block; } .topics-and-plan .title-area .title .en { font-size: 14px; font-size: 0.875rem; } .topics-and-plan .title-area .btn { width: 100%; } .topics-and-plan .container { width: 85%; padding: 20px 0; } .topics-and-plan ul.topics-and-plan--list li .thumb { width: 100%; height: 145px; margin-bottom: 10px; } .topics-and-plan ul.topics-and-plan--list li .title { display: block; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; font-weight: bold; text-align: center; } .topics-and-plan ul.topics-and-plan--list li .description { text-align: center; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; font-size: 12px; font-size: 0.75rem; display: block; letter-spacing: 0em; } .topics-and-plan ul.topics-and-plan--list:after { content: ""; display: block; width: 0; height: 0; visibility: hidden; clear: both; } #main { position: relative; z-index: 5; background: #fff; } .bottom__info__bg { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bottom__info.jpg) center center no-repeat; background-size: cover; opacity: 0; animation: loading-anime 2s ease 1.5s 1 normal forwards; -webkit-animation: loading-anime 2s ease 1.5s 1 normal forwards; -moz-animation: loading-anime 2s ease 1.5s 1 normal forwards; } footer { background: #231815; color: #fff; padding: 30px 0 10px; position: relative; z-index: 5; } footer a { color: #fff; } footer .logo { width: 242px; } footer .logo--hotespa { height: 22px; } footer .footer__nav { margin-bottom: 45px; } footer .footer__nav .nav__unit { font-size: 12px; font-size: 0.75rem; border: 1px solid #7a6a56; border-radius: 5px; padding: 1em; text-align: center; width: 32%; box-sizing: border-box; display: inline-block; } footer .btn--gray { background: #ccc; color: #64562e; border-radius: 3px; padding: .5em 1em; display: block; float: right; margin-left: 3px; } @media screen and (max-width: 568px) { /***********************LAYOUT mobile************************/ .grid-container { padding-right: 5px; padding-left: 5px; } .mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66 { padding-right: 5px; padding-left: 5px; } .m-menu { position: fixed; top: 10px; right: 20px; z-index: 120; width: 30px; height: 45px; -webkit-transition: ease .5s; transition: ease .5s; cursor: pointer; } .m-menu .bar { background: #eee; width: 30px; height: 2px; position: absolute; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transition: ease .5s; transition: ease .5s; } .m-menu .bar:nth-child(1) { top: 30%; } .m-menu .bar:nth-child(2) { top: 50%; } .m-menu .bar:nth-child(3) { top: 70%; } .m-menu.active .bar { top: 50%; background: #ccc; } .m-menu.active .bar:nth-child(1) { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); } .m-menu.active .bar:nth-child(2) { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); opacity: 0; } .m-menu.active .bar:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); -moz-transform: translate(-50%, -50%) rotate(-45deg); } .header__m-logo { position: fixed; top: 15px; left: 15px; z-index: 120; } .header__m-logo .logo { height: 30px; } header { display: none; background: rgba(35, 24, 21, 0.9); height: 100%; padding: 50px 0 0; } header .grandnav { float: none; } header .grandnav .nav__unit { display: block; padding: 10px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-size: 21px; font-size: 1.3125rem; } header .grandnav .nav__unit.show-on-mobile { display: block; } header .grandnav .nav__unit .en { display: none; } header .grandnav .nav__unit.bar { display: none; } .bottom__reservation { bottom: -300px; } .bottom__reservation .title-area { display: none; } .bottom__reservation .input-area { background: rgba(35, 24, 21, 0.9); width: 100%; float: none; padding: 10px; height: 230px; } .bottom__reservation .input-area .reservation-form { display: block; height: auto; } .bottom__reservation .input-area .reservation-form .unit { display: block; font-size: 12px; font-size: 0.75rem; padding: 5px 0; } .bottom__reservation .input-area .reservation-form .unit.people { border-left: none; padding-left: 0; } .bottom__reservation .input-area .reservation-form .unit .title { display: inline-block; width: 100px; font-size: 12px; font-size: 0.75rem; } .bottom__reservation .input-area .reservation-form .unit input.btn.ghost-btn--white { width: 100%; background: #fff; border-radius: 5px; margin-bottom: 10px; display: block; font-size: 16px; font-size: 1rem; color: #64562e; padding: .5em; } .bottom__reservation .input-area .reservation-form .unit a.ghost-btn--white { padding: 1em; width: 49.4%; } .bottom__reservation .mobile-tel { text-align: center; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; padding: 10px; background: rgba(35, 24, 21, 0.9); height: 70px; box-sizing: border-box; line-height: 1.6em; } .bottom__reservation .mobile-tel span { display: block; font-size: 12px; font-size: 0.75rem; } .bottom__reservation .mobile-tel .tel { font-weight: bold; color: #fff; font-size: 30px; font-size: 1.875rem; } .news .title-area { width: 25%; padding: 10px 5px 10px 10px; background: transparent; } .news .title-area .title { font-family: YuGothic, "游ゴシック", Meiryo, "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "メイリオ", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; margin: 0; } .news .title-area .title .ja { font-size: 12px; font-size: 0.75rem; display: inline-block; background: #3c0505; padding: 5px; white-space: nowrap; } .news .title-area .title .en { display: none; } .news .title-area .btn { display: none; } .news .container { width: 75%; padding: 10px 10px 10px 5px; } .news .container .grid-container, .news .container .grid-100 { padding: 0; } .topics-and-plan { display: block; } .topics-and-plan .title-area, .topics-and-plan .container { display: block; } .topics-and-plan .title-area { width: 100%; padding: 10px; box-sizing: border-box; } .topics-and-plan .title-area .title { margin: 0; } .topics-and-plan .title-area .title .ja { font-size: 12px; font-size: 0.75rem; } .topics-and-plan .title-area .title .en { display: none; } .topics-and-plan .title-area .btn { display: none; } .topics-and-plan .container { width: 100%; padding: 10px 0; } .topics-and-plan ul.topics-and-plan--list li { margin-bottom: 10px; } .topics-and-plan ul.topics-and-plan--list li .thumb { height: 105px; } .topics-and-plan ul.topics-and-plan--list li .title { font-size: 12px; font-size: 0.75rem; } .topics-and-plan ul.topics-and-plan--list li .description { font-size: 10px; font-size: 0.625rem; } footer { padding-bottom: 50px; } } /********************STATE************************/ .align-center { text-align: center; margin-right: auto; margin-left: auto; display: block; } .align-right { text-align: right; } .color-beige { color: #c9bc9c; } .font-ss { font-size: 10px; font-size: 0.625rem; } .font-s { font-size: 12px; font-size: 0.75rem; } .font-default { font-size: 14px; font-size: 0.875rem; } .font-m { font-size: 18px; font-size: 1.125rem; } .font-ml { font-size: 24px; font-size: 1.5rem; } .font-l { font-size: 30px; font-size: 1.875rem; } .font-ll { font-size: 36px; font-size: 2.25rem; } .display-none { display: none; } .mincho { font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; } .no-margin { margin: 0; } .pull-left { float: left; } .pull-right { float: right; } .show-on-mobile { display: none; } .subsection { padding-bottom: 20px; } .subsection.subsection--half { padding-bottom: 10px; } .subsection.subsection--x3 { padding-bottom: 60px; } .w100 { width: 100%; } ul.reset { margin: 0; padding: 0; list-style-type: none; } @media screen and (max-width: 568px) { /********************STATE************************/ .acenter--on-mobile { text-align: center; } .font-ss--on-mobile { font-size: 10px; font-size: 0.625rem; } .font-s--on-mobile { font-size: 12px; font-size: 0.75rem; } .font-default--on-mobile { font-size: 14px; font-size: 0.875rem; } .font-m--on-mobile { font-size: 18px; font-size: 1.125rem; } .font-ml--on-mobile { font-size: 24px; font-size: 1.5rem; } .hide-on-mobile { display: none !important; } .show-on-mobile { display: block; } .subsection { padding-bottom: 10px; } .subsection.subsection--half { padding-bottom: 5px; } .subsection.subsection--x3 { padding-bottom: 30px; } } /********************MODULE************************/ .player--wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 700px; z-index: 1; overflow: hidden; } #player { width: 100%; height: 100%; } .bb { display: table; width: 100%; height: 100%; max-height: 700px; position: relative; z-index: 5; } .bb .bb__container { display: table-cell; vertical-align: middle; color: #fff; } .btn { display: inline-block; padding: .3em 2em; box-sizing: border-box; line-height: 1.2em; text-align: center; } .btn--brown { background: #231815; color: #c9bc9c; } .btn--brown:hover { background: #c9bc9c; color: #231815; opacity: 1; } .ghost-btn { color: #64562e; border: 1px solid #64562e; background: transparent; transition: all .2s ease; } .ghost-btn:hover { background: #64562e; color: #fff; transition: all .2s ease; opacity: 1; cursor: pointer; } .ghost-btn--beige { color: #c9bc9c; border: 1px solid #c9bc9c; background: transparent; transition: all .2s ease; } .ghost-btn--beige:hover { background: #c9bc9c; color: #64562e; transition: all .2s ease; opacity: 1; cursor: pointer; } .ghost-btn--white { color: #fff; border: 1px solid #fff; background: transparent; transition: all .2s ease; } .ghost-btn--white:hover { background: #fff; color: #64562e; transition: all .2s ease; opacity: 1; cursor: pointer; } .gallery .gallery__unit { float: left; display: table; border-right: 1px solid #fff; border-bottom: 1px solid #fff; position: relative; box-sizing: border-box; background: #000; } .gallery .gallery__unit:last-child { border-right: none; } .gallery .gallery__unit .inner { display: table-cell; vertical-align: middle; color: #fff; position: relative; z-index: 5; padding: 30px; } .gallery .gallery__unit .inner.gray40 { background: rgba(0, 0, 0, 0.4); } .gallery .gallery__unit.h140 { height: 140px; } .gallery .gallery__unit.h180 { height: 180px; } .gallery .gallery__unit.h210 { height: 210px; } .gallery .gallery__unit.h340 { height: 340px; } .gallery .gallery__unit.h370 { height: 370px; } .gallery .gallery__unit.h420 { height: 420px; } .gallery .gallery__unit.h525 { height: 525px; } .gallery .gallery__unit.h700 { height: 700px; } .gallery .gallery__unit.h1270 { height: 1270px; } .gallery .gallery__unit.w25 { width: 25%; } .gallery .gallery__unit.w50 { width: 50%; } .gallery .gallery__unit .collage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .gallery .gallery__unit .collage .collage__item { border-right: 1px solid #fff; float: left; box-sizing: border-box; } .gallery .gallery__unit .collage .collage__item:last-child { border-right: none; border-bottom: none; } .gallery .gallery__unit .collage.w33 .collage__item { width: 33.33333%; height: 100%; } .gallery .gallery__unit .gray-area { background: rgba(0, 0, 0, 0.5); padding: 30px; display: inline-block; color: #fff; } .gallery .gallery__unit .gray-area.leftbottom { position: absolute; bottom: 30px; left: 30px; } .gallery .gallery__unit .gray-area.rightbottom { position: absolute; bottom: 30px; right: 30px; } .gallery .gallery__unit .gray-area.right { float: right; } .gallery .gallery__unit .gray-area.bottom { position: absolute; bottom: 0; left: 0; box-sizing: border-box; } .gallery .gallery__unit .gray-area.gray-area--dark { background: rgba(0, 0, 0, 0.8); } .gallery .gallery__unit .white-area { background: rgba(255, 255, 255, 0.7); padding: 10px; } .gallery .gallery__unit .white-area .logo--megumi, .gallery .gallery__unit .white-area .logo--meimeitei { height: 60px; display: block; margin: 70px auto; } .gallery:after { content: ""; display: block; width: 0; height: 0; visibility: hidden; clear: both; } @media screen and (max-width: 568px) { /********************MODULE mobile************************/ .gallery .gallery__unit .inner { padding: 15px; } .gallery .gallery__unit.h60--on-mobile { height: 60px; } .gallery .gallery__unit.h105--on-mobile { height: 105px; } .gallery .gallery__unit.h120--on-mobile { height: 120px; } .gallery .gallery__unit.h150--on-mobile { height: 150px; } .gallery .gallery__unit.h165--on-mobile { height: 165px; } .gallery .gallery__unit.h195--on-mobile { height: 195px; } .gallery .gallery__unit.h240--on-mobile { height: 240px; } .gallery .gallery__unit.h280--on-mobile { height: 280px; } .gallery .gallery__unit.h340--on-mobile { height: 340px; } .gallery .gallery__unit.w50:nth-child(even) { border-right: none; } .gallery .gallery__unit.w50--on-mobile { width: 50%; } .gallery .gallery__unit.w50--on-mobile:nth-child(even) { border-right: none; } .gallery .gallery__unit.w100 { width: 100%; border-right: none; } .gallery .gallery__unit.w100--on-mobile { width: 100%; border-right: none; } .gallery .gallery__unit .collage.w33 .collage__item { width: 33.33333%; height: 100%; } .gallery .gallery__unit .collage.w100--on-mobile.h33--on-mobile .collage__item { width: 100%; height: 33.33333%; border-right: none; } .gallery .gallery__unit .gray-area { display: table-cell; vertical-align: middle; padding: 15px; box-sizing: border-box; } .gallery .gallery__unit .gray-area.leftbottom { position: relative; bottom: 0; left: 0; width: 100%; height: 100%; } .gallery .gallery__unit .gray-area.rightbottom { position: relative; bottom: 0; left: 0; width: 100%; height: 100%; } .gallery .gallery__unit .gray-area.right { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; float: none; } .gallery .gallery__unit .gray-area.bottom { position: relative; } .gallery .gallery__unit .gray-area.gray-area--dark { background: rgba(0, 0, 0, 0.7); } .gallery .gallery__unit .white-area .logo--megumi, .gallery .gallery__unit .white-area .logo--meimeitei { height: 30px; margin: 10px auto; } .gallery:after { content: ""; display: block; width: 0; height: 0; visibility: hidden; clear: both; } } .news { position: relative; z-index: 5; } ul.news-list li { border-bottom: 1px solid #fff; padding: 10px 0; letter-spacing: 0; } ul.news-list li .date { width: 8%; float: left; font-size: 10px; font-size: 0.625rem; } ul.news-list li .text { font-size: 12px; font-size: 0.75rem; width: 92%; float: left; } ul.news-list li:after { content: ""; display: block; width: 0; height: 0; visibility: hidden; clear: both; } ul.news-list li:first-child { border-top: 1px solid #fff; } ul.news-list li .label--brown { display: inline-block; background: #3c0505; font-size: 10px; font-size: 0.625rem; line-height: 1em; padding: 2px 10px; border-radius: 10px; margin-right: 5px; } ul.news-list li .label--red { display: inline-block; background: #ea4e33; font-size: 10px; font-size: 0.625rem; line-height: 1em; padding: 2px 5px; margin-right: 5px; } @media screen and (max-width: 568px) { ul.news-list li { border-bottom: none; margin-bottom: 7px; border-bottom: 1px solid #fff; padding: 3px;} ul.news-list li .date { float: none;width: 25%;} ul.news-list li .text { width: 75%; float: none; text-overflow: ellipsis; overflow: hidden; } ul.news-list li:first-child { border-top: none; display: block; } ul.news-list li .label--brown { display: none; } ul.news-list li .label--red { } } /***** TOP *****/ .top__bb { background: #000; overflow: hidden; } .top__bb .bb__container { position: relative; z-index: 10; } .top__bb .grid-100 { position: relative; } .top__bb .top__bb__bottom { position: absolute; bottom: 90px; left: 90px; margin-top: 200px; display: table; } .top__bb .top__bb__bottom .contact, .top__bb .top__bb__bottom .bestrate { display: table-cell; vertical-align: top; padding: 5px 20px; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; } .top__bb .top__bb__bottom .contact .title { display: block; font-size: 18px; font-size: 1.125rem; } .top__bb .top__bb__bottom .contact .tel { display: block; font-size: 18px; font-size: 1.125rem; } .top__bb .top__bb__bottom .bestrate { border-left: 1px solid #fff; } .top__bb .top__bb__bottom .bestrate span { display: block; } .top__bb .top__bb__bottom .bestrate .title { font-size: 18px; font-size: 1.125rem; } .player--wrap { opacity: 0; } .player--wrap.active { opacity: 1; transition: all .2s ease 1s; } .btn--play { width: 125px; } .logo--onsen { height: 85px; } #top__hot-spring section { padding-bottom: 0; } .ikura-mov--m { display: none; } .ikura-mov { background: #000; height: 460px; overflow: hidden; margin-bottom: 1px; } .ikura-mov video { width: 100%; display: block; } .top__restaurant__text01 { width: 90px; position: absolute; top: 15%; right: 10%; } .top__restaurant__text02 { width: 358px; position: absolute; bottom: 15%; left: 5%; } #top__restaurant section { padding-bottom: 0; } .logo--kaifuurou { width: 468px; } .logo--casa-de-norte { width: 241px; } .logo--bar { width: 277px; } .gallery__unit.top__restaurnat__bar .inner { padding-bottom: 90px; } .gallery__unit.top__restaurant__club .title { margin: 115px 0 0; } .gallery__unit.top__restaurant__club a { color: #fff; } .sightseeing-map { overflow: hidden; } .sightseeing-map iframe { margin-top: -50px; } @media screen and (max-width: 568px) { /***** TOP mobile*****/ .top__bb { background: url(../images/top__bb__bg.jpg) center center no-repeat; background-size: cover; } .m--slider { height: 100%; width: 100%; background: #000; position: relative; } .m--slider h1 { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; margin-top: -27px; z-index: 5; } .m--slider .logo { width: 300px; margin: 0 auto; } .js--owl.owl-carousel { width: 100%; height: 100%; position: relative; z-index: 1; } .js--owl.owl-carousel .owl-stage-outer { height: 100%; } .js--owl.owl-carousel .owl-stage-outer .owl-stage { height: 100%; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item { height: 100%; overflow: hidden; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item { height: 100%; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item .bb { z-index: auto; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item .restaurant__bb { background: url(../images/top__m-slider02.jpg) center center no-repeat; background-size: cover; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item .rooms__bb { background: url(../images/top__m-slider03.jpg) center center no-repeat; background-size: cover; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item .onsen__bb { background: url(../images/top__m-slider01.jpg) center center no-repeat; background-size: cover; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item .relaxation__bb { background: url(../images/top__m-slider04.jpg) center center no-repeat; background-size: cover; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item .top__bb { background: url(../images/top__m-slider05.jpg) center center no-repeat; background-size: cover; } .js--owl.owl-carousel .owl-stage-outer .owl-stage .owl-item .item.zoom .bb { -webkit-animation-name: zoom; -moz-animation-name: zoom; -ms-animation-name: zoom; -o-animation-name: zoom; animation-name: zoom; -webkit-animation-duration: 5.5s; -moz-animation-duration: 5.5s; -ms-animation-duration: 5.5s; -o-animation-duration: 5.5s; animation-duration: 5.5s; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } .btn--play { width: 62px; } .gallery.top__rooms__bb .gallery__unit .inner { padding: 0; } .logo--onsen { height: 60px; } .top__restaurant__text01 { width: 45px; position: absolute; top: 5%; right: 10%; } .top__restaurant__text02 { width: 180px; position: absolute; bottom: 5%; left: 5%; } .gallery.top__restaurant__morning .gallery__unit .inner { padding: 0; letter-spacing: 0em; } .logo--kaifuurou { width: 234px; } .logo--casa-de-norte { width: 120px; } .logo--bar { width: 140px; } .gallery__unit.top__restaurant__kaifuurou .subsection { width: 45%; padding: 0; float: left; } .gallery__unit.top__restaurant__kaifuurou .subsection .logo--kaifuurou { width: 100%; } .gallery__unit.top__restaurant__kaifuurou .btn { float: right; margin-top: 10px; } .gallery__unit.top__restaurant__norte .subsection { width: 45%; padding: 0; float: left; } .gallery__unit.top__restaurant__norte .subsection .logo--casa-de-norte { display: block; width: 65%; margin: 0 auto; } .gallery__unit.top__restaurant__norte .btn { float: right; margin-top: 23px; } .gallery__unit.top__restaurnat__bar .inner { width: 33.33333%; float: left; padding: 10px; box-sizing: border-box; } .gallery__unit.top__restaurnat__bar .subsection { padding: 0; } .gallery__unit.top__restaurnat__bar .subsection .logo--bar { display: block; width: 100%; margin: 5px auto; } .gallery__unit.top__restaurnat__bar .gray-area.bottom.w100 { float: right; width: 66.66666%; height: 105px; padding: 10px; letter-spacing: 0em; } .gallery__unit.top__restaurant__club .inner { padding: 10px 0; background: rgba(0, 0, 0, 0.5); } .gallery__unit.top__restaurant__club .title { margin: 10px 0 0; } .sightseeing-map { height: 300px; } .access-gmap { height: 140px; } } /***** onsen *****/ .onsen__bb { background: url(../images/onsen__bb__bg2.jpg) center center no-repeat; background-size: cover; } .onsen__bb h1 { line-height: 2.4em; } .onsen__bb .logo--onsen { width: 80%; max-width: 300px; height: auto; margin-top: 20px; } #onsen__sora .gallery__unit { border-bottom: none; } .logo--sora { width: 81px; position: absolute; bottom: -30px; right: 60px; } .bath-layout--wrap { background: #7a6a56; padding: 30px; text-align: center; } .bath-layout--wrap .bath-layout { width: 680px; } @media screen and (max-width: 568px) { /***** onsen mobile*****/ .logo--sora { width: 40px; position: absolute; bottom: -15px; right: 30px; } .bath-layout--wrap { padding: 0; } .bath-layout--wrap .bath-layout { width: 100%; display: block; } } /***** restaurant *****/ .restaurant__bb { background: url(../images/restaurant__bb__bg.jpg) center center no-repeat; background-size: cover; } .restaurant__bb h1 { line-height: 2.4em; } .restaurant-label { display: inline-block; background: #fff; border-radius: 15px; padding: 5px 10px; color: #000; line-height: 1em; margin-bottom: 10px; } #restaurant__kitanobanya { color: #fff; } #restaurant__kaifuurou { color: #fff; } #restaurant__norte { color: #fff; } @media screen and (max-width: 568px) { /***** restaurant mobile *****/ } /***** rooms *****/ #rooms__wrapper { background: url(../images/paper.jpg) center center no-repeat; background-size: cover; } .rooms__bb { background: url(../images/rooms__bb__bg.jpg) center center no-repeat; background-size: cover; } .rooms__bb h1 { line-height: 2.4em; } .room { background: #40220f; color: #fff; padding: 20px 10px 0; border-radius: 5px; } .room .gallery__unit.w100.h420, .room .gallery__unit.w100.h140 { border: 1px solid #7a6a56; } .room__owl { display: none; } .room__thumbs.grid-100 { padding: 0 5px; } .room__thumbs.grid-100 .grid-33 { padding: 0 5px; } table.tbl--room-info { width: 100%; border-collapse: collapse; height: 210px; box-sizing: border-box; } table.tbl--room-info tr { border-top: 1px solid #7a6a56; border-bottom: 1px solid #7a6a56; } table.tbl--room-info th, table.tbl--room-info td { padding: 10px; font-weight: bold; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; text-align: left; vertical-align: top; } table.tbl--room-info thead { color: rgba(255, 255, 255, 0.9); } table.tbl--room-info tbody th { border-right: 1px dotted #7a6a56; } table.tbl--room-info--large { width: 100%; border-collapse: collapse; box-sizing: border-box; } table.tbl--room-info--large th, table.tbl--room-info--large td { padding: 10px 20px; border: 1px solid #64562e; font-weight: bold; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; text-align: left; vertical-align: top; } table.tbl--room-info--large thead { background: #64562e; color: rgba(255, 255, 255, 0.9); } .gallery.room-layout .gallery__unit { border: 1px solid #7a6a56; } .gallery.room-layout .label { position: absolute; top: 0; left: 0; padding: 5px 10px; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; font-size: 12px; font-size: 0.75rem; font-weight: bold; } .gallery.room-btn { margin-top: 125px; display: block; } .gallery.room-btn .gallery__unit { border: none; background: #c9bc9c; border-radius: 5px; transition: all .2s ease; } .gallery.room-btn .gallery__unit .inner { color: #40220f; } .gallery.room-btn:hover { opacity: 1; } .gallery.room-btn:hover .gallery__unit { background: #000; transition: all .2s ease; } .gallery.room-btn:hover .gallery__unit .inner { color: #fff; } #special .gallery.room-btn { margin-top: 0; } @media screen and (max-width: 568px) { /***** rooms mobile *****/ .room { padding: 10px 5px; } .room .gallery__unit.w100.h420 { border: none; } .room__owl { display: block; margin-bottom: 10px; } .room__owl .gallery__unit:last-child { border: none; } .room__owl .owl-prev, .room__owl .owl-next { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; background: #000; text-indent: -9999px; overflow: hidden; } .room__owl .owl-prev:after, .room__owl .owl-next:after { content: ""; display: block; width: 12px; height: 12px; border-top: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: 8px; } .room__owl .owl-prev { left: 0; } .room__owl .owl-prev:after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); left: 12px; } .room__owl .owl-next { right: 0; } .room__owl .owl-next:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); right: 12px; } table.tbl--room-info { height: auto; } table.tbl--room-info--large th, table.tbl--room-info--large td { padding: 10px; } .gallery.room-layout .label { font-size: 12px; font-size: 0.75rem; } .gallery.room-btn { margin-top: 0; } .gallery.room-btn .gallery__unit { background: #a29167 !important; } .gallery.room-btn .inner { background: transparent; } .gallery.room-btn:hover .inner { background: transparent; } .room-detail--opener { background: #000; text-align: center; padding: 10px; margin: -10px 5px 0; color: #fff; font-weight: bold; } .room-detail--opener .on { display: none; } .room-detail--opener span:after { content: ""; display: inline-block; width: 15px; height: 15px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin: 0 0 3px 10px; } .room-detail--opener.active .on { display: inline-block; } .room-detail--opener.active .off { display: none; } .room-detail--opener.active span:after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); margin: 0 0 -6px 10px; } .room-detail { padding-bottom: 10px; display: none; } } /***** relaxation *****/ .relaxation__bb { background: url(../images/relaxation__bb__bg.jpg) center center no-repeat; background-size: cover; } .relaxation__bb h1 { line-height: 2.4em; } .gallery.relaxatin__menu-list .gallery__unit { background: #eae4d8; } .gallery.relaxatin__menu-list .gallery__unit:nth-child(4n-2), .gallery.relaxatin__menu-list .gallery__unit:nth-child(4n-1) { background: #d7cdb8; } .gallery.relaxatin__menu-list .gallery__unit .inner { color: #64562e; padding: 30px; } table.tbl--relaxation-price { width: 100%; border-collapse: collapse; } table.tbl--relaxation-price th, table.tbl--relaxation-price td { padding: 10px; border: 1px solid; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important; font-size: 18px; font-size: 1.125rem; font-weight: bold; } table.tbl--relaxation-price th .title, table.tbl--relaxation-price td .title { float: left; } table.tbl--relaxation-price th .price, table.tbl--relaxation-price td .price { float: right; } @media screen and (max-width: 568px) { /***** relaxation mobile *****/ .gallery.relaxatin__menu-list .gallery__unit:nth-child(4n-2), .gallery.relaxatin__menu-list .gallery__unit:nth-child(4n-1) { background: #eae4d8; } .gallery.relaxatin__menu-list .gallery__unit:nth-child(even) { background: #d7cdb8; } .gallery.relaxatin__menu-list .gallery__unit .inner { padding: 15px; } table.tbl--relaxation-price th, table.tbl--relaxation-price td { letter-spacing: 0; font-size: 12px; font-size: 0.75rem; } } /***** jugem *****/ .news__bb { height: 300px; padding-top: 85px; background: url(../images/sora.jpg) center 55% no-repeat; } .max_w768{max-width: 768px !important;width: 100%;margin-top: 18px !important;}