/** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately.g * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /*common*/ @font-face { font-family: 'FoundersGroteskMono-Regular'; src: url("../fonts/FoundersGroteskMono-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/FoundersGroteskMono-Regular.otf") format("opentype"), url("../fonts/FoundersGroteskMono-Regular.woff") format("woff"), url("../fonts/FoundersGroteskMono-Regular.ttf") format("truetype"), url("../fonts/FoundersGroteskMono-Regular.svg#FoundersGroteskMono-Regular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'FoundersGroteskText-Light'; src: url("../fonts/FoundersGroteskText-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/FoundersGroteskText-Light.otf") format("opentype"), url("../fonts/FoundersGroteskText-Light.woff") format("woff"), url("../fonts/FoundersGroteskText-Light.ttf") format("truetype"), url("../fonts/FoundersGroteskText-Light.svg#FoundersGroteskText-Light") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'FoundersGroteskText-Medium'; src: url("../fonts/FoundersGroteskText-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/FoundersGroteskText-Medium.otf") format("opentype"), url("../fonts/FoundersGroteskText-Medium.woff") format("woff"), url("../fonts/FoundersGroteskText-Medium.ttf") format("truetype"), url("../fonts/FoundersGroteskText-Medium.svg#FoundersGroteskText-Medium") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'FoundersGrotesk-Light'; src: url("../fonts/FoundersGrotesk-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/FoundersGrotesk-Light.otf") format("opentype"), url("../fonts/FoundersGrotesk-Light.woff") format("woff"), url("../fonts/FoundersGrotesk-Light.ttf") format("truetype"), url("../fonts/FoundersGrotesk-Light.svg#FoundersGrotesk-Light") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Icon-Coffee'; src: url("../fonts/icomoon-coffee.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon-coffee.otf") format("opentype"), url("../fonts/icomoon-coffee.woff") format("woff"), url("../fonts/icomoon-coffee.ttf") format("truetype"), url("../fonts/icomoon-coffee.svg#Icon-Coffee") format("svg"); font-weight: normal; font-style: normal; } /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /* // ---------------------------------------------- // Usage example: // For IE set $mq-support to false. // Set the fixed value. // Then use mixins to test whether styles should be applied. // ---------------------------------------------- $mq-support: false; $mq-fixed-value: 1024; // Renders at fixed value @include bp (min-width, 300px) { div { color:#000; } } // Doesn't render without MQ support @include bp (min-width, 1200px) { div { color:#FFF; } } // Doesn't render without MQ support @include bp (max-width, 300px) { div { color:#444; } } // Renders at fixed value @include bp (max-width, 1200px) { div { color:#888; } } // ---------------------------------------------- */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package default_default * @copyright Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /*! normalize.css v2.0.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for `hidden` attribute not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* * 1. Sets default font family to sans-serif. * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * Removes default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: 0; } /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active, a:hover, a:focus { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, * Safari 5, and Chrome. */ h1 { font-size: 2em; } /* * Addresses styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /* * Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* * Addresses styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /* * Corrects font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /* * Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * Sets consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* * Addresses inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /* * Removes border when inside `a` element in IE 8/9. */ img { border: 0; } /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * Addresses margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. Corrects color not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /* * 1. Corrects font family not being inherited in all browsers. * 2. Corrects font size not being inherited in all browsers. * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */ input, select, textarea { font-family: 'FoundersGroteskMono-Regular'; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ color: #808080; font-size: 12px; } /* * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /* * Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to `content-box` in IE 8/9. * 2. Removes excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } select { border: 1px solid #808080; -webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/ -moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */ -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/ appearance: none; } /* * 1. Removes default vertical scrollbar in IE 8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* ============================================ * * Reset * ============================================ */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-tap-highlight-color: transparent; /* Prevent tap highlight on iOS/Android */ -webkit-text-size-adjust: 100%; /* Prevent automatic scaling on iOS */ } body { background: #FFFFFF; color: #000000; line-height: 1; } html, body, img, fieldset, abbr, acronym { border: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } th, code, cite, caption { font-weight: normal; font-style: normal; text-align: left; } address { font-style: normal; } fieldset { margin: 0; padding: 0; border: 0; } img { display: block; max-width: 100%; } ol, ul { list-style: none; } q:before, q:after { content: ''; } input:focus, input[type="search"]:focus { outline-offset: -2px; } input[type="search"] { -webkit-appearance: none; /* 1 */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; /* 2 */ box-sizing: border-box; } /* ============================================ * * Base Styles * ============================================ */ @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } a, button { -ms-touch-action: manipulation; touch-action: manipulation; } body { font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; color: #0d0d0d; font-size: 15px; line-height: 20px; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; } a { color: #0d0d0d; text-decoration: none; outline: none; cursor: pointer; } a:hover { color: #808080; text-decoration: inherit; } button.button:focus, a.button:focus { color: #fff; } a:focus { outline: none; color: #808080; text-decoration: inherit; } ol, ul { list-style: none; margin: 0; padding: 0; } /* ============================================ * * Typography * ============================================ */ h1, .h1 { margin: 0; margin-bottom: 10px; color: #0d0d0d; font-family: "FoundersGrotesk-Light", "Helvetica Neue", Verdana, Arial, sans-serif; font-size: 46px; line-height: 25px; font-weight: 400; font-style: normal; text-rendering: optimizeLegibility; text-transform: none; line-height: 1; letter-spacing: 1px; } h2, .h2 { margin: 0; margin-bottom: 5px; color: #0d0d0d; font-family: "FoundersGrotesk-Light", "Helvetica Neue", Verdana, Arial, sans-serif; font-size: 32px; font-weight: 400; font-style: normal; line-height: 1; text-rendering: optimizeLegibility; text-transform: none; } h3, .h3 { margin: 0; margin-bottom: 10px; color: #0d0d0d; font-family: "FoundersGroteskText-Medium", "Helvetica Neue", Verdana, Arial, sans-serif; font-size: 18px; font-weight: 400; font-style: normal; line-height: 25px; text-rendering: optimizeSpeed; text-transform: none; } h4, .h4, h5, .h5, h6, .h6 { margin: 0; margin-bottom: 10px; color: #0d0d0d; font-family: "FoundersGroteskMono-Regular", "Helvetica Neue", Verdana, Arial, sans-serif; font-size: 12px; font-weight: 400; font-style: normal; line-height: 1.2; text-rendering: optimizeSpeed; text-transform: uppercase; } /* ============================================ * * Shared Classes * ============================================ */ .mobile { display: none; } .desktop { display: inline-block; } .address-list address { margin-bottom: 1em; } .availability { margin-bottom: 0; font-size: 13px; text-transform: uppercase; } .availability .label { display: none; } .availability.in-stock { color: #11b400; } .availability.available-soon, .availability.out-of-stock { color: red; } .availability-only { color: red; margin-bottom: 10px; } /* -------------------------------------------- * * Page Titles */ .page-title h1, .page-title h2, .product-name h1, .product-name .h1 { font-size: 46px; color: #0d0d0d; padding-bottom: 3px; margin-bottom: 15px; text-transform: none; font-family: 'FoundersGrotesk-Light'; } .product-name .h1 { text-transform: none; } /* -------------------------------------------- * * Secondary Navigation */ .block-account .block-title, .block-cms-menu .block-title { padding-top: 0; border-top: none; } .block-account li, .block-cms-menu li { text-transform: uppercase; font-family: "FoundersGroteskText-Light", "Helvetica Neue", Verdana, Arial, sans-serif; margin: 7px 0; } .block-account li strong, .block-cms-menu li strong { font-weight: 400; color: #0d0d0d; } .block-account li a, .block-cms-menu li a { color: #636363; } .block-account li a:hover, .block-cms-menu li a:hover { color: #959595; text-decoration: none; } /* ============================================ * * Buttons * ============================================ */ /* Secondary Buttons */ .cart .buttons-set .button, .cart-table .button, .sidebar .actions .button, .button.button-secondary { background: #dddddd; color: #636363; padding: 7px 15px; } .cart .buttons-set .button:hover, .cart-table .button:hover, .sidebar .actions .button:hover, .button.button-secondary:hover { background: #d0d0d0; cursor: pointer; } .cart .buttons-set .button:active, .cart-table .button:active, .sidebar .actions .button:active, .button.button-secondary:active { background: #c4c4c4; color: #636363; } .cart .buttons-set .button:focus, .cart-table .button:focus, .sidebar .actions .button:focus, .button.button-secondary:focus { color: #636363; background: #c4c4c4; outline: none; } /* Primary Buttons */ a.button { text-decoration: none; } a.button:hover { color: #FFFFFF; } /* Disabled - class for anchor, state for form elements */ .button.disabled, .button:disabled { background: #C8C8C8; opacity: 0.6; cursor: not-allowed; } /* Adjacent buttons */ .button + .button { margin-left: 5px; } .button2 { border: 0; padding: 0 5px; margin: 0; background: transparent; cursor: pointer; vertical-align: middle; } .button2:focus { outline: none; } .button2 span, .button2 span span { line-height: 30px; height: 30px; text-decoration: underline; text-transform: uppercase; display: inline-block; color: #3399cc; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } .button2 span:hover, .button2 span span:hover { text-decoration: none; color: #246b8f; } @media only screen and (max-width: 770px) { .col2-set .buttons-set .button, .col2-set .buttons-set .button2 { float: none; width: 100%; margin-left: 0; margin-right: 0; } .col2-set .buttons-set .back-link { display: none; } .col2-set .buttons-set .required { display: none; } } @media only screen and (max-width: 479px) { .buttons-set .button { float: none; width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 7px; } .buttons-set .back-link { display: none; } .buttons-set .required { display: none; } } /* -------------------------------------------- * * Paypal Button */ .paypal-logo.paypal-after { float: left; } .paypal-after .paypal-or { float: left; } .paypal-or { line-height: 40px; margin: 0px 10px 5px; } .paypal-after .paypal-button { float: left; } .paypal-button { line-height: 0px; } .paypal-button img { display: inline; } @media only screen and (max-width: 670px) { .paypal-or { line-height: 20px; } .paypal-logo, .paypal-or, .paypal-button { text-align: center; width: 100%; display: block; margin-right: 0; margin-left: 0; float: none; } } /* -------------------------------------------- * * Button Sets */ .buttons-set { clear: both; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #999; text-align: right; } .buttons-set p.required { margin: 0; margin-left: 10px; line-height: 33px; float: right; } .buttons-set .back-link { float: left; margin: 0; line-height: 33px; } .buttons-set button.button { float: left; margin-left: 5px; min-width: 140px; } .buttons-set:after { content: ''; display: table; clear: both; } /* -------------------------------------------- * * Breadcrumbs */ .breadcrumbs { overflow: hidden; float: none; clear: both; } .breadcrumbs li { float: left; font-size: 12px; font-family: 'FoundersGroteskMono-Regular'; text-transform: uppercase; } .breadcrumbs a { float: left; color: #999999; } .breadcrumbs a:hover { color: #111; } .breadcrumbs strong { color: #111; font-weight: normal; } .breadcrumbs span { float: left; padding: 0 7px; color: #959595; } /* -------------------------------------------- * * Button - Remove / Previous */ .btn-previous { display: inline-block; width: 20px; height: 20px; border: 1px solid #ededed; text-align: center; /* Hide text */ font: 0/0 a; text-shadow: none; color: transparent; position: relative; } .btn-previous:hover { background-color: #3399cc; border-color: #3399cc; } .btn-previous:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #3399cc; border-left: none; position: absolute; top: 50%; left: 50%; margin-left: -2px; margin-top: -4px; } .btn-previous:hover:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid white; border-left: none; } /* btn remove */ .btn-remove, .btn-remove2 { background: url(../images/marketcoffe/sprites.png) no-repeat; background-position: 0 -57px; text-transform: uppercase; font-family: "FoundersGroteskMono-Regular", Verdana, Arial, sans-serif; font-size: 12px; padding-left: 20px; display: inline-block; } .block-layered-nav .currently .btn-remove, .block-layered-nav .currently .btn-previous, .mini-products-list .btn-remove, .mini-products-list .btn-previous, #compare-items .btn-remove, #compare-items .btn-previous { float: right; margin-left: 6px; } /* -------------------------------------------- * * Checkout Agreements */ .checkout-agreements li { margin-bottom: 20px; } .checkout-agreements .agreement-content { overflow-y: auto; max-width: 670px; max-height: 125px; margin-bottom: 10px; padding: 10px; border: 1px solid #cccccc; background: #f4f4f4; } /* -------------------------------------------- * * CVV Security Code */ .cvv-what-is-this { margin-left: 12px; font-size: 12px; line-height: 35px; text-decoration: underline !important; font-family: "FoundersGroteskMono-Regular"; color: #0d0d0d; } /* -------------------------------------------- * * Container */ .main-container, .footer-container { position: relative; max-width: 1170px; margin: 0 auto; padding: 15px; } .main-container:after, .footer-container:after { content: ''; display: table; clear: both; } @media only screen and (min-width: 480px) { .main-container, .footer-container { padding: 15px; } } .footer-container { padding-top: 11px; } /* -------------------------------------------- * * Column Layouts */ .main:after, .col-wrapper:after { content: ''; display: table; clear: both; } .col-left, .col-right, .col-main { padding: 0 10px; } .col-left { float: left; width: 25%; padding-left: 0; /* Remove the 15px padding */ clear: left; } .col-left img { max-width: 100%; } .col-right { float: right; width: 25%; padding-right: 0; /* Remove the 15px padding */ } .col-right img { max-width: 100%; } .col-main { float: left; width: 75%; } .col1-layout .col-main { clear: both; width: auto; padding: 0; /* Remove the 15px padding */ } .col2-left-layout .col-main { float: right; padding-right: 0; /* Remove the 15px padding */ } .col2-right-layout .col-main { padding-left: 0; /* Remove the 15px padding */ } .col3-layout .col-right { width: 20.83333%; } .col3-layout .col-wrapper { float: left; width: 79.16667%; } .col3-layout .col-wrapper .col-main { float: right; width: 73.68421%; } .col3-layout .col-wrapper .col-left { width: 26.31579%; } @media only screen and (max-width: 1000px) { .col3-layout .col-right { float: left; clear: left; padding-left: 0; padding-right: 10px; width: 25%; } .col3-layout .col-wrapper { float: right; width: 100%; } .col3-layout .col-wrapper .col-main { float: right; width: 75%; } .col3-layout .col-wrapper .col-left { width: 25%; } } @media only screen and (max-width: 770px) { .col-left, .col-right, .col-main, .col1-layout .col-left, .col1-layout .col-right, .col1-layout .col-main, .col2-left-layout .col-left, .col2-left-layout .col-right, .col2-left-layout .col-main, .col2-right-layout .col-left, .col2-right-layout .col-right, .col2-right-layout .col-main, .col3-layout .col-wrapper .col-left, .col3-layout .col-right, .col3-layout .col-wrapper .col-main { padding: 0; margin-bottom: 10px; float: none; width: auto; } .col3-layout .col-wrapper { float: none; width: auto; } .col-main { float: none; width: auto; } .col-main .col-left { padding: 0; /* On product listing pages, the left column gets moved inside col-main on small viewports */ } } /* Content Columns */ .col2-set { width: 100%; } .col2-set .col-1, .col2-set .col-2 { width: 50%; padding: 20px; } @media only screen and (max-width: 770px) { .col2-set .col-1, .col2-set .col-2 { padding: 10px; } } .col2-set .col-1 { float: left; padding-left: 0; } .col2-set .col-2 { float: right; padding-right: 0; } @media only screen and (max-width: 479px) { .col2-set .col-1, .col2-set .col-2 { float: none; width: auto; border: 0; padding-right: 0; padding-left: 0; } } .col2-set .narrow { width: 33%; } .col2-set .wide { width: 65%; } .col2-set:after { content: ''; display: table; clear: both; } /* -------------------------------------------- * * Top Container */ @media only screen and (min-width: 771px) { .top-container { max-width: 1260px; margin: 0 auto; padding: 0 30px; } } /* -------------------------------------------- * * Global Site Notice */ .global-site-notice { background: #676157; color: #e6e6e6; font-size: 11px; } .global-site-notice .notice-inner { padding-left: 120px; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; line-height: 11px; min-height: 40px; padding-top: 14.5px; padding-bottom: 14.5px; background-image: url("../images/demo-logo.png"); background-position: left; background-repeat: no-repeat; } .global-site-notice p { margin-bottom: 0; } /* -------------------------------------------- * * Promotional Message Banner */ .promo-msg { color: #3399cc; text-align: center; margin: 10px; text-transform: uppercase; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } /* -------------------------------------------- * * Grid */ .grid:after { content: ''; display: table; clear: both; } /* -------------------------------------------- * * Messages */ .success { color: #11b400; } .error { color: red; font-weight: bold; } .notice { color: #e26703; font-weight: bold; } /* -------------------------------------------- * * Messages */ @media only screen and (min-width: 915px) { .order-list-grid .col-1 { width: 30%; } .order-list-grid .col-2 { width: 50%; padding-right: 20px; } .order-list-grid .col-3 { clear: none; width: 20%; padding-top: 0; } } /* -------------------------------------------- * * Page Popup */ .page-popup { padding: 20px; background: #FFFFFF; height: auto; } .page-popup h1 { margin: 0 0 0.5em; font-size: 36px; } /* -------------------------------------------- * * Payment Methods */ .payment-methods { margin-bottom: 20px; } .payment-methods dt { padding: 5px 0 17px; } .payment-methods dd { padding: 0 0; } .payment-methods .form-list { position: relative; display: inline-block; max-width: 100%; margin: 5px 0 20px; width: 100%; } .payment-methods .form-list li:last-child { margin-bottom: 0; } /* -------------------------------------------- * * Please Wait (Loading Indicator) */ .please-wait { display: inline-block; margin-left: 10px; margin-top: 5px; line-height: 24px; height: 24px; white-space: nowrap; /* Prevent the linebreak in the HTML from causing layout issues */ } .please-wait img { float: left; margin-right: 5px; width: 24px; } /* -------------------------------------------- * * Price Box - Standard */ .price-box { margin: 7px 0; } .price-box p { margin-bottom: 0; } .price-notice { color: #a0a0a0; } .price-box .price { color: #3399cc; font-size: 16px; } .price-box .price, .price { white-space: nowrap; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } .price-box .price-label { color: #a0a0a0; white-space: nowrap; font-family: "FoundersGroteskText-Medium", "Helvetica Neue", Verdana, Arial, sans-serif; } .price-box .minimal-price-link { padding-left: 1em; color: #3399cc; display: block; /* We want this to show on its own line, otherwise the layout looks funky */ } .price-box .minimal-price-link .label { color: #a0a0a0; } /* -------------------------------------------- * * Price Box - Special */ .price-box .old-price, .price-box .special-price { display: inline-block; } .price-box .old-price .price-label, .price-box .special-price .price-label { display: none; } .price-box .old-price .price, .price-box .special-price .price { display: inline-block; } .price-box .old-price .price { color: #999; text-decoration: line-through; } .price-box .special-price { color: #999; padding-left: 5px; } .price-box .special-price .price-label { color: #D84D3C; } /* -------------------------------------------- * * Price Box - Taxes */ .price-box .price-excluding-tax, .price-box .price-including-tax { display: block; } /* -------------------------------------------- * * Tier Prices */ .product-pricing, .tier-prices, .tier-prices-grouped { display: inline-block; padding: 4px 8px; background: #FBF4DE; border: 1px solid #E2D4C7; margin-top: 7px; } .product-pricing li, .tier-prices li, .tier-prices-grouped li { font-size: 12px; } .product-pricing .benefit, .tier-prices .benefit, .tier-prices-grouped .benefit { font-style: italic; } .product-pricing .price, .tier-prices .price, .tier-prices-grouped .price { font-weight: bold; } /* ============================================ * * Item Options * ============================================ */ .item-options { font-size: 14px; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } .item-options:after { content: ''; display: table; clear: both; } .item-options dt { float: left; clear: left; font-weight: 600; padding-right: 5px; font-style: italic; } .item-options dt:after { content: ': '; } .gift-card.item-options dt { font-style: normal; color: #5d5d5d; width: 50%; font-family: "FoundersGrotesk-Light", "Helvetica Neue", Verdana, Arial, sans-serif; font-weight: 400; } .gift-card.item-options dd { color: #5d5d5d; width: 50%; font-family: "FoundersGrotesk-Light", "Helvetica Neue", Verdana, Arial, sans-serif; } .data-table tbody td .gift-card.item-options { margin-left: 0; } .cart-table .product-cart-info .item-options dd { font-size: 14px; width: auto; } .cart-table .gift-card.item-options dt { font-weight: bold; width: auto; } .item-options dd { float: left; padding-left: 10px; margin: 0 0 6px; } .truncated, .truncated a.dots { cursor: help; } .truncated a.details { cursor: help; height: 16px; line-height: 16px; } .truncated a.details:hover { text-decoration: none; } .truncated .truncated_full_value { position: relative; z-index: 300; } .truncated .truncated_full_value .item-options { display: none; position: absolute; z-index: 300; width: 200px; padding: 8px; border: 1px solid #3399cc; background-color: #F6F6F6; top: 21px; left: -100px; } .truncated .truncated_full_value .item-options:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #3399cc; border-top: none; left: 97px; top: -7px; } .truncated .truncated_full_value .item-options > p { font-weight: bold; text-transform: uppercase; margin-bottom: 8px; } .truncated .show .item-options { display: block; } @media only screen and (max-width: 479px) { .truncated { cursor: inherit; } .truncated a.details { display: none; } .truncated .truncated_full_value .item-options { display: block; position: static; z-index: 1; width: 100%; border: none; background-color: transparent; } .truncated .truncated_full_value .item-options p { float: none; } .truncated .truncated_full_value .item-options:after { display: none; } } /* -------------------------------------------- * * Printer Friendly Page */ .page-print { width: 6.5in; margin: 20px; background: #FFFFFF; } /* -------------------------------------------- * * Add to links */ .add-to-links { margin: 7px 0; } .add-to-links a { display: inline-block; padding: 0px 3px 3px; } .add-to-links .separator { display: none; } /* -------------------------------------------- * * Product Image */ .product-image, .no-touch .product-img-box .product-image:not(.zoom-available):hover { position: relative; display: block; } /* -------------------------------------------- * * Ratings */ .ratings { margin: 7px 0; } .ratings .rating-box, .ratings .rating-links { margin: 5px 0; } .ratings .rating-box { width: 65px; height: 13px; background-repeat: repeat-x; background-position: 0 -615px; overflow: hidden; } .ratings .rating-box .rating { float: left; height: 13px; background-repeat: repeat-x; background-position: 0 -600px; } .ratings .amount { display: block; margin: 5px auto; } .ratings .rating-links .separator { margin: 0 3px; } /* -------------------------------------------- * * Standard Formatted Text Block */ .std p { margin: 0 0 1.5em; } .std ol { list-style: decimal outside; margin-bottom: 1.5em; } .std ol li { margin-left: 2em; } .std ul { list-style: disc outside; margin-bottom: 1.5em; } .std ul li { margin-left: 2em; } .std .note { color: #a0a0a0; font-size: 13px; } /* -------------------------------------------- * * Tabs */ .tabs { margin-bottom: 10px; background: #FFFFFF; } /* -------------------------------------------- * * Toolbar */ .toolbar { margin-top: 10px; margin-bottom: 15px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: #f4f4f4; padding: 5px 10px 0px 10px; } .toolbar:after { content: ''; display: table; clear: both; } .pager-no-toolbar { margin-bottom: 10px; } .pager-no-toolbar ~ .pager-no-toolbar { margin-top: 10px; } .toolbar, .pager { font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; color: #636363; line-height: 30px; font-size: 12px; } .toolbar label, .pager-no-toolbar label { font-weight: normal; text-transform: uppercase; } .sorter { float: left; margin-bottom: 5px; } .sorter label { float: left; margin-right: 5px; } .sorter label:after { content: ':'; } .sorter > .sort-by { float: left; margin-right: 5px; height: 30px; } .sorter > .sort-by .sort-by-switcher { width: 30px; height: 30px; display: inline-block; } .sorter > .sort-by .sort-by-switcher--asc { background-position: 4px -542px; } .sorter > .sort-by .sort-by-switcher--asc:hover { background-position: -46px -542px; } .sorter > .sort-by .sort-by-switcher--desc { background-position: 4px -567px; } .sorter > .sort-by .sort-by-switcher--desc:hover { background-position: -46px -567px; } .sorter > .view-mode { float: right; } .sorter > .view-mode .grid, .sorter > .view-mode .list { float: left; width: 30px; height: 30px; } .sorter > .view-mode .grid { margin-right: 5px; background-position: 8px -492px; } .sorter > .view-mode strong.grid, .sorter > .view-mode a.grid:hover { background-position: -42px -492px; } .sorter > .view-mode .list { background-position: 11px -517px; } .sorter > .view-mode strong.list, .sorter > .view-mode a.list:hover { background-position: -39px -517px; } .pager { float: right; overflow: hidden; } .pager > .count-container { float: left; } .pager .amount { float: left; white-space: nowrap; margin: 0 15px 0 0; } .pager .limiter { float: left; height: 40px; line-height: 40px; } .my-account .pages li { width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 12px; } .my-account .pages li a { color: #0d0d0d; height: 40px; line-height: 40px; } .box-address a.manage-add { line-height: 40px; float: left; vertical-align: middle; margin-top: 15px; clear: both; font-family: "FoundersGroteskText-Medium", Times, "Times New Roman", serif; font-size: 18px; } .my-account .pages { margin-top: 15px; } address { font-family: "FoundersGroteskMono-Regular", Verdana, Arial, sans-serif; font-size: 14px; line-height: 1; } .customer-address-form .form-list .input-box .selector { width: 365px !important; } @media only screen and (max-width: 767px) { .customer-address-form .form-list .input-box .selector { width: 100% !important; } } .pager .limiter > label { padding-right: 5px; } .pager .limiter > label:after { content: ':'; } .pager .amount, .pager .limiter, .pager .pages { margin-bottom: 5px; } .pages { float: right; overflow: hidden; margin-left: 15px; } .pages strong { display: none; } .pages li { float: left; } .pages a, .pages .current { display: inline-block; border: 0; font-size: 12px; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: nowrap; line-height: 30px; width: 25px; height: 30px; padding: 0; color: #3399cc; } .pages .current, .pages .current:hover { color: #636363; border: 1px solid #999; width: 30px; background-color: #FFFFFF; cursor: default; } .pages .next, .pages .previous { font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; position: relative; } .pages .next:hover, .pages .previous:hover { border: 1px solid #999; } .pages .next:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #0d0d0d; border-right: none; top: 50%; margin-top: -3px; left: 50%; margin-left: -2px; } .pages .next:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #0d0d0d; border-right: none; } .pages .previous:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #0d0d0d; border-left: none; top: 50%; margin-top: -3px; left: 50%; margin-left: -2px; } .pages .previous:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #0d0d0d; border-left: none; } .my-account .pages .current:hover { width: 40px; } @media only screen and (max-width: 479px) { .pager .amount--has-pages { display: none; } .pages { float: left; } .limiter label { display: none; } } @media only screen and (max-width: 770px) { .col1-layout .sorter, .col1-layout .pager { width: 100%; } .col1-layout .pager { float: left; clear: both; } .col1-layout .pager .pages { float: left; margin-left: 0; } .col1-layout .pager .count-container { float: right; } } @media only screen and (max-width: 979px) { .col2-left-layout .sorter, .col2-left-layout .pager, .col2-right-layout .sorter, .col2-right-layout .pager, .col3-layout .sorter, .col3-layout .pager { width: 100%; } .col2-left-layout .pager, .col2-right-layout .pager, .col3-layout .pager { float: left; clear: both; } .col2-left-layout .pager .pages, .col2-right-layout .pager .pages, .col3-layout .pager .pages { float: left; margin-left: 0; } .col2-left-layout .pager .count-container, .col2-right-layout .pager .count-container, .col3-layout .pager .count-container { float: right; } } @media only screen and (max-width: 1279px) { .toolbar .view-mode > label { display: none; } } /* ============================================ * * Tax - Full Tax Summary * ============================================ */ #checkout-review-table .summary-collapse, #shopping-cart-totals-table .summary-collapse, body.customer-account .data-table .summary-collapse { position: relative; cursor: pointer; } #checkout-review-table .summary-collapse:before, #shopping-cart-totals-table .summary-collapse:before, body.customer-account .data-table .summary-collapse:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-top: 7px solid #3399cc; border-bottom: none; position: static; display: inline-block; margin-right: 5px; } #checkout-review-table .summary-collapse:hover:before, #shopping-cart-totals-table .summary-collapse:hover:before, body.customer-account .data-table .summary-collapse:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-top: 7px solid #246b8f; border-bottom: none; position: static; display: inline-block; margin-right: 5px; } #checkout-review-table .show-details .summary-collapse:before, #shopping-cart-totals-table .show-details .summary-collapse:before, body.customer-account .data-table .show-details .summary-collapse:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #3399cc; border-top: none; position: static; display: inline-block; margin-right: 5px; } #checkout-review-table .show-details .summary-collapse:hover:before, #shopping-cart-totals-table .show-details .summary-collapse:hover:before, body.customer-account .data-table .show-details .summary-collapse:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #246b8f; border-top: none; position: static; display: inline-block; margin-right: 5px; } #shopping-cart-totals-table tfoot td .summary-collapse:before, #shopping-cart-totals-table tfoot td .summary-collapse:hover:before { margin-bottom: 5px; } .addition-content { margin-top: 23px; } .payment-icons { margin-bottom: 17px; } /* ============================================ * * Widgets * ============================================ */ .widget .pager { float: none; width: 100%; } /* ============================================ * * Magento Helpers * ============================================ */ .a-center { text-align: center; } .a-right, .align-right { text-align: right; } .no-display { display: none !important; } .nobr, .nowrap { white-space: nowrap; } .width-full { width: 100%; } /* ============================================ * * Custom Helpers * ============================================ */ .hidden { display: none; } /* ============================================ * * Print Styles * ============================================ */ .page-print .print-head { margin: 0 0 15px; } .page-print .print-head .logo { float: none; max-height: 50px; width: auto; } /* ============================================ * * FORMS - COMMON * ============================================ */ /* -------------------------------------------- * * Fieldsets */ .fieldset p { margin-bottom: 7px; } .fieldset p.required { margin-bottom: 5px; float: right; font-size: 12px; margin-top: 0px; } .fieldset + .fieldset { margin-top: 5px; } form .legend { margin: 0; margin-bottom: 10px; color: #636363; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; font-size: 18px; font-weight: 400; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; margin-bottom: 15px; padding-bottom: 7px; border-bottom: 1px solid #ededed; } /* -------------------------------------------- * * Input Box */ .input-box { padding-top: 2px; } /*.input-box:after {*/ /*content: '';*/ /*display: table;*/ /*clear: both;*/ /*}*/ /* For adjacent select inputs. */ /* Example: credit card expiration month and year. */ .input-box .v-fix { float: left; margin-right: 0; } /* -------------------------------------------- * * Labels */ label { display: inline-block; font-size: 13px; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } label.required:after, span.required:after { content: ' *'; color: red; font-weight: normal; font-size: 12px; } label.required em, span.required em { display: none; } /* -------------------------------------------- * * Hints */ .input-hint { color: #a0a0a0; font-size: 12px; } /* -------------------------------------------- * * Select */ select { font-size: 14px; } select + select { margin-left: 5px; } select[multiple] { width: 270px; border: 1px solid silver; font-size: 15px; padding: 5px; } /* -------------------------------------------- * * Textarea */ textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; width: 450px; padding: 5px; } /* -------------------------------------------- * * Inputs */ .input-text { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #999; background: #FFFFFF; font-size: 12px; background: #fff; } .input-text:focus { outline: none; outline-width: 0; } .input-text:hover { cursor: default; } .input-text.validation-failed { border-color: #111111; } .input-text.validation-failed:focus { outline: none; outline-width: 0; } input[type=email], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=text] { box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #999; padding: 5px 12px; height: 41px; } input[type=email], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=text], .input-box .selector, textarea { width: 365px; max-width: 100%; background: #fff; } /* fix on chrome: change background yellow for input text */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } #redeem_register input.input-text:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fdfaf1 inset; } input.input-text, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } /* phone number on Ipad/ mobile */ a[href^=tel], a[href^=tel]:link, a[href^=tel]:hover, a[href^=tel]:focus, a[href^=tel]:active { color: inherit; } /* -------------------------------------------- * * Inputs - Quantity */ input[type=number].qty, input[type=text].qty { width: 3em; text-align: center; vertical-align: middle; } /* -------------------------------------------- * * Placeholder */ input::-webkit-input-placeholder { color: #808080; opacity: 1; } input::-moz-placeholder { color: #808080; opacity: 1; } /* FF 19+ */ input:-moz-placeholder { color: #808080; opacity: 1; } /* FF 18- */ input:-ms-input-placeholder { color: #808080; opacity: 1; } /* -------------------------------------------- * * Checkbox And Radio */ .radio { position: relative; top: -3px; display: inline-block; } .checkbox { position: relative; top: -10px; display: inline-block; } .checkbox + label, .radio + label { width: auto; max-width: 100%; padding: 0 0 0 8px; font-size: 14px; font-weight: normal; vertical-align: top; } /* -------------------------------------------- * * Validation */ p.required, .validation-advice { margin: 5px 0 0; color: #f00; font-size: 15px; text-transform: none; font-family: foundersgrotesktext-light; clear: both; } form .input-box label.error { display: block; color: #f00; font-size: 15px; text-transform: none; font-family: foundersgrotesktext-light; font-weight: normal; margin-top: 5px; } form .input-box input.error, form .input-box textarea.error { font-weight: normal; color: #808080; } /* ============================================ * * Header * ============================================ */ @media only screen and (min-width: 771px) { .page-header { max-width: 1170px; margin: 0 auto 42px; padding: 0 15px; position: relative; } .page-header-container { position: relative; } } .header-language-container, .page-header { font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } /* ============================================ * * Language switcher + welcome message * ============================================ */ .header-language-background { padding: 9px 0; background-color: #e6e6e6; } .header-language-background .header-language-container { max-width: 1170px; margin-left: auto; margin-right: auto; padding: 0 15px; } .header-language-background .header-language-container:after { content: ''; display: table; clear: both; } .header-welcome { padding: 9px 0; color: #808080; text-align: right; background: #e6e6e6; } .header-welcome .header-welcome-container { max-width: 1170px; margin-left: auto; margin-right: auto; padding: 0 15px; } .header-welcome .welcome-msg { letter-spacing: 0.7px; font-family: 'FoundersGroteskText-Light'; } .header-language-background .form-language, .header-language-background .currency-switcher { float: left; margin-right: 10px; } .header-language-background .welcome-msg { float: right; font-family: 'FoundersGroteskText-Light'; font-size: 15px; color: #808080; text-transform: none; } .page-header-container .store-language-container { float: right; max-width: 35%; padding: 0; } .page-header-container .store-language-container label { display: none; } .page-header-container .store-language-container select { max-width: 100%; } @media only screen and (max-width: 479px) { .page-header-container .store-language-container { padding-top: 8px; } .page-header-container .store-language-container select { font-size: 12px; } } .header-language-background, .header-language-background a { color: #808080; } @media only screen and (max-width: 770px) { .header-language-background { display: none; } } /* ============================================ * * Logo * ============================================ */ .logo { display: block; float: left; } .logo img { max-width: 100%; } .logo .small { display: block; } .logo .large { display: none; } @media only screen and (min-width: 771px) { .logo { width: 82px; } .logo .small { display: none; } .logo .large { display: block; } .footer .links > h3 { display: none; } } /* ============================================ * * Skip Links * ============================================ */ .skip-links { clear: both; overflow: hidden; } @media only screen and (min-width: 771px) { .skip-links { border-top: 3px solid #000; clear: both; border-bottom: 0; float: right; margin-top: 20px; padding-top: 2px; } } /* -------------------------------------------- * * Skip - Link */ .skip-link { position: relative; float: left; width: 20%; height: 20px; background: transparent; color: #636363; line-height: 20px; text-align: center; } a.skip-link { text-decoration: none; } .skip-link:not(.skip-active):hover { opacity: 0.8; } #header-search, .skip-search { display: none; } @media only screen and (max-width: 770px) { .skip-link:last-child { border-right: 0; } } @media only screen and (min-width: 500px) { .skip-link { width: 25%; } } /* -------------------------------------------- * * Skip Link - Active */ @media only screen and (max-width: 770px) { .skip-link.skip-active { background: transparent; color: inherit; } .skip-link.skip-active span { color: inherit; } } /* -------------------------------------------- * * Skip Link - Icon */ .skip-link .icon { display: inline-block; width: 25px; height: 25px; vertical-align: middle; } .skip-link.skip-nav .icon, .skip-link.skip-cart:not(.no-count) .icon { margin-right: 3px; } @media only screen and (min-width: 500px) { .skip-link .icon { margin-right: 3px; } } /* -------------------------------------------- * * Skip Link - Label */ .skip-link .label { display: none; } @media only screen and (min-width: 500px) { .skip-link .label { display: inline; } } /* ============================================ * * Skip Content * ============================================ */ .skip-content { display: none; } .skip-content.skip-active { display: block; background: #EDEDED; } /* ============================================ * * Global Header Navigation * ============================================ */ @media only screen and (max-width: 770px) { #header-account li a, .nav-primary a.level0 { padding: 0; border-bottom: transparent; text-align: center; color: #808080; text-transform: none; line-height: 30px; } #header-account li:last-child a, .nav-primary li.level0:last-child a.level0 { border-bottom: 0; } .no-touch #header-account a:hover, .no-touch .nav-primary a:hover { background-color: transparent; text-decoration: none; color: #999; } } /* ============================================ * * Nav - Skip Link * ============================================ */ .skip-nav { width: 40%; } .skip-nav:not(.skip-active):hover { text-decoration: none; } .skip-nav:not(.skip-active):hover .icon { background-position: -46px 4px; } .skip-nav .label { display: inline; } .skip-nav .icon { background-position: 4px 4px; } @media only screen and (min-width: 500px) { .skip-nav { width: 25%; } } @media only screen and (min-width: 771px) { .skip-nav { display: none; } } /* ============================================ * * Nav - Skip Content * ============================================ */ @media only screen and (max-width: 770px) { #header-nav { padding: 5px 0; } } @media only screen and (min-width: 771px) { #header-nav { display: block; clear: both; padding: 40px 0 0; width: 90%; float: right; /* Force visibility */ } #header-nav:after { content: ''; display: table; clear: both; } } /* ============================================ * * Nav Primary * ============================================ */ @media only screen and (min-width: 771px) { .nav-primary { display: block; } } /* ============================================ * * General Navigation Styles * ============================================ */ .nav-primary a { text-decoration: none; position: relative; display: block; color: #0d0d0d; line-height: 1; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } .nav-primary li { position: relative; } .nav-primary li a { border-right: 1px solid #0d0d0d; line-height: 0.8; } .nav-primary li.level0.active a { color: #808080; } .nav-primary li.level1 a { border-bottom: 1px solid #cccccc; } .nav-primary .menu-active > ul.level0, .nav-primary li.level0 li.sub-menu-active > ul { display: block; } .nav-primary li.level0 > a { font-family: 'FoundersGroteskText-Medium'; font-size: 16px; color: #0d0d0d; } .nav-primary li.level0.first > a { padding-left: 0; } /* ============================================ * * Small Viewports - Accordion Style Menu * ============================================ */ @media only screen and (max-width: 770px) { #header-nav #nav { float: none; } .nav-primary a.level0, .nav-primary a { line-height: 40px; font-size: 18px; } .nav-primary li.level0 ul { display: none; } .nav-primary li.level0 li { padding: 0 0 0 25px; } .nav-primary li.level1 a { padding: 0 15px 0 25px; } .nav-primary li.parent > a:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #cccccc; border-right: none; top: 50%; left: 10px; right: auto; margin-top: -5px; } .nav-primary li.parent.sub-menu-active > a:after, .nav-primary li.parent.menu-active > a:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #cccccc; border-bottom: none; top: 50%; left: 10px; right: auto; margin-top: -5px; } .nav-primary li.menu-active > a, .nav-primary li.sub-menu-active > a { color: #3399cc; } } /* ============================================ * * Large Viewports - Dropdown Menu * ============================================ */ @media only screen and (min-width: 771px) { .nav-primary { margin-left: 21px; } .nav-primary a.level0 { padding: 0 25px 0 27px; letter-spacing: 0.7px; } .nav-primary li.level0, .nav-primary a.level0 { display: inline-block; } .nav-primary li.last > a { border-right: none; } .nav-primary a:hover, .nav-primary li:hover > a { color: #808080; } .nav-primary .menu-active, .nav-primary li.level0:hover { z-index: 200; } .nav-primary li.level0 ul { background: #FBFBFB; border: solid 1px #cccccc; position: absolute; left: 0; top: 30px; /* Height of ".nav-primary a.level0" */ z-index: 10; width: 250px; padding-left: 10px; padding-right: 10px; display: none; /* Hide until displayed. */ } .custom-nav a:hover { color: #808080; text-decoration: none; } .nav-primary li.level1 ul { left: 60px; top: 15px; } .nav-primary li.level0 ul.level0.position-test { display: block; } .nav-primary li.level0 ul.level0.spill { right: 0; left: auto; } .nav-primary li.level0 ul.level0.spill li.level1 ul { left: auto; right: 50px; top: 20px; } .nav-primary li.level0 li.parent > a { position: relative; } .nav-primary li.level0 li.parent > a:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #cccccc; border-right: none; right: 5px; top: 50%; margin-top: -3px; } .no-touch li:hover > ul { display: block; /* Force display */ } } /* ============================================ * * Search - Skip Link * ============================================ */ .skip-search:not(.skip-active):hover .icon { background-position: -46px -146px; } .skip-search .icon { background-position: 4px -146px; } @media only screen and (min-width: 771px) { .skip-search { display: none; } } /* ============================================ * * Search - Skip Content * ============================================ */ #header-search { padding: 20px; } @media only screen and (min-width: 771px) { #header-search { display: none; position: absolute; top: 55px; right: 0; width: 25%; height: 50px; padding: 0; } } /* ============================================ * * Search Input * ============================================ */ #search_mini_form .input-box { position: relative; padding-top: 0; } #search_mini_form label { display: none; } #search { width: 100%; height: 40px; padding-right: 40px; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } #search_mini_form .search-button { text-indent: -9999px; position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 0; background: none; } #search_mini_form .search-button:before { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; background-position: 4px -146px; } #search_mini_form .search-button:hover:before { opacity: 0.8; } #search_mini_form .search-button:active:before { margin-top: -13px; margin-left: -13px; } /* ============================================ * * Header - Account * ============================================ */ /* -------------------------------------------- * * Skip Link - Account */ .skip-account:not(.skip-active):hover .icon { background-position: -46px -44px; } .skip-account .icon { background-position: 4px -44px; } @media only screen and (min-width: 771px) { .skip-account, .header-minicart, .header-account-info { display: inline-block; vertical-align: top; width: auto; text-transform: uppercase; padding-top: 1px; } #header-account.skip-active { background: #FBFBFB; border: solid 1px #cccccc; display: block; position: absolute; z-index: 200; top: 40px; right: 115px; width: 200px; } #header-account a { display: block; padding: 5px 10px; color: #636363; line-height: 2; } #header-account a:hover { color: #3399cc; } } /* -------------------------------------------- * * Account Links */ #header-account { padding: 5px 0; } #header-account a { position: relative; display: block; padding: 0 10px; line-height: 33px; text-align: center; } #header-account a:hover { color: #3399cc; } /* ============================================ * * Header - Cart * ============================================ */ /* -------------------------------------------- * * Skip Link - Cart */ .skip-cart:not(.skip-active):hover .icon { background-position: -50px -95px; } .skip-cart .icon { background-position: 0px -95px; } @media only screen and (min-width: 771px) { .skip-cart { width: auto; padding: 0 14px 0; margin: 0; } .skip-cart span { font-size: 12px; font-family: 'FoundersGroteskMono-Regular'; } #header-cart.skip-active { background: #FBFBFB; border: solid 1px #cccccc; display: block; position: absolute; z-index: 200; top: 40px; right: 0; width: 320px; background: white; } } /* -------------------------------------------- * * Skip Cart Notifier */ .skip-cart .count { display: inline-block; position: relative; z-index: 5; width: auto; height: 22px; line-height: 20px; text-align: center; } .skip-link.skip-active .count { color: white; } .skip-cart.no-count .count { display: none; } @media only screen and (max-width: 499px) { .skip-cart .count { margin-left: -12px; } } @media only screen and (min-width: 771px) { .skip-cart { color: #0d0d0d; text-transform: uppercase; font-size: 12px; font-family: 'FoundersGroteskMono-Regular'; } .skip-cart:hover { text-decoration: none; } .skip-cart .count { -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; position: static; background: none; margin-left: 0px; } .skip-cart .count:before { content: '('; } .skip-cart .count:after { content: ')'; } } .skip-cart .count.empty { display: none; } /* -------------------------------------------- * * Mini Cart - Empty */ .cart-menu .empty { padding: 20px; text-align: center; } /* -------------------------------------------- * * Mini Cart - Full */ /* Actions */ .cart-menu .actions { overflow: hidden; padding: 15px; } .cart-menu .actions .button { float: left; width: 48%; } .cart-menu .actions .button + .button { margin-left: 4%; } /* Subtotal */ .cart-menu .subtotal { padding: 0 15px 15px; font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; font-size: 24px; line-height: 1.2; } /* List */ .mini-cart-list { margin-bottom: 5px; } .mini-cart-list li { position: relative; min-height: 90px; padding: 15px 15px 15px 90px; border-top: 1px solid #cccccc; font-size: 13px; line-height: 1.35; } .mini-cart-list .product-name { display: inline-block; } .mini-cart-list .product-image { position: absolute; left: 15px; top: 15px; } .mini-cart-list .product-image img { width: 60px; height: 60px; } .mini-cart-list .has-options { margin-bottom: 0; color: #a0a0a0; font-size: 12px; } /* Too full - additional items will be shown in cart */ .cart-menu .last-added { padding: 10px 15px 15px; border-top: 1px solid #cccccc; font-size: 13px; } /* ============================================ * * Footer * ============================================ */ /* -------------------------------------------- * * Footer */ .footer, .footer button { font-family: "FoundersGroteskText-Light", Verdana, Arial, sans-serif; } .footer { clear: both; width: 100%; background: #e6e6e6; padding-top: 35px; /* -------------------------------------------- * * Social icons */ } .footer:after { content: ''; display: table; clear: both; } .footer .block-title { border-bottom: 0; padding: 3px 0; border: none; } .footer .block-title strong { font-weight: normal; } .footer .block-title strong { font-family: 'FoundersGroteskText-Light'; font-size: 15px; text-transform: none; color: #808080; } .footer .block-title, .footer address { color: #3399cc; } .footer .links { float: left; width: 17%; padding: 0 30px 0 0; margin-bottom: 30px; } .footer .links li { word-break: break-all; line-height: 1; padding: 2px 0 1px; } .footer .links a { color: #808080; text-transform: none; font-family: 'FoundersGroteskText-Light'; font-size: 15px; text-decoration: none; } .footer .links a:hover { color: #111; } .footer .block-subscribe { float: right; width: 360px; margin-bottom: 30px; } .footer .links, .footer .block-subscribe { text-transform: uppercase; font-size: 12px; } .footer .block-subscribe .block-title { letter-spacing: .7px; } .footer .form-subscribe-header { display: none; } .footer .links.social-media em { background-image: url(../images/social_icons.png); background-repeat: no-repeat; width: 13px; vertical-align: middle; display: inline-block; margin-right: 7px; } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .footer .links.social-media em { background-image: url(../images/social_icons@2x.png); background-size: 50px 125px; } } .footer .links.social-media em.facebook { background-position: 0 -0px; height: 13px; } .footer .links.social-media a:hover em.facebook { background-position: -25px -0px; } .footer .links.social-media em.twitter { background-position: 0 -24px; height: 13px; } .footer .links.social-media a:hover em.twitter { background-position: -25px -24px; } .footer .links.social-media em.youtube { background-position: 0 -49px; height: 13px; } .footer .links.social-media a:hover em.youtube { background-position: -25px -49px; } .footer .links.social-media em.pinterest { background-position: 0 -74px; height: 15px; } .footer .links.social-media a:hover em.pinterest { background-position: -25px -74px; } .footer .links.social-media em.rss { background-position: 0 -99px; height: 13px; } .footer .links.social-media a:hover em.rss { background-position: -25px -99px; } .footer .block-subscribe .input-box { float: left; width: 90%; padding-top: 0; } @media only screen and (max-width: 767px) { .footer .block-subscribe .input-box { width: 100%; } } .footer .block-subscribe .input-text { width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .footer .block-subscribe .block-content { padding-top: 6px; } @media only screen and (max-width: 767px) { .footer .block-subscribe .block-content { position: relative; } } .footer .block-subscribe .block-content:after { content: ''; display: table; clear: both; } .footer .block-subscribe .actions { float: left; width: 9.375%; margin: 0; } @media only screen and (max-width: 767px) { .footer .block-subscribe .actions { position: absolute; right: 25px; } } .footer .block-subscribe .actions .button { height: 20px; float: left; margin-left: 21px; margin-top: 8px; width: 15px; min-width: inherit; padding: 0; display: inline-block; background: url("../images/marketcoffe/sprites.png") no-repeat 6px 3px; } .footer .block-subscribe .actions .button:hover { background-position: 6px -27px; } .footer .bugs, .footer address { clear: both; } .footer .bugs { display: none; } .footer .form-language, .footer .currency-switcher, .footer .store-switcher { clear: both; margin-bottom: 10px; } .footer .form-language, .footer .currency-switcher { display: none; } .footer address { border-top: 1px solid #cccccc; text-align: center; width: 100%; font-size: 11px; margin-top: 30px; padding: 30px 0; } @media only screen and (max-width: 770px) { .footer .form-language, .footer .currency-switcher { display: block; } } @media only screen and (max-width: 599px) { .footer .links { width: 48.4375%; margin-right: 0; } .footer .links:nth-child(odd) { margin-right: 3.125%; clear: both; } .footer .block-subscribe { clear: both; float: left; width: 100%; } } /* ================================================= * * General Product List Styles (not module-specific) * ================================================= */ /* -------------------------------------------- * * Product List General */ .category-title h1, body.catalogsearch-result-index .page-title h1 { border-bottom: none; } .category-image { margin-bottom: 1.5em; } /* -------------------------------------------- * * Product Name */ /* ============================================ * * Product Grid * ============================================ */ .products-grid { position: relative; } .products-grid:after { content: ''; display: table; clear: both; } .products-grid > li { position: relative; margin-bottom: 20px; text-align: center; } .products-grid > li:after { content: ''; display: table; clear: both; } .products-grid .product-image { width: 100%; margin-bottom: 15px; } .products-grid .product-image img { width: auto; height: auto; margin: 0 auto; } .products-grid .product-image img:hidden { display: none; } .products-grid .product-info { position: relative; padding-bottom: 0; } .products-grid .actions { padding-top: 10px; position: absolute; bottom: 0px; min-height: 85px; width: 100%; } .products-grid .ratings .rating-box { margin: 0 auto; } .products-grid .ratings .amount { display: none; } .products-grid .price-box { color: #a0a0a0; font-size: 13px; margin: 0 0 5px; } .products-grid .add-to-links { margin-bottom: 0; } /* Config: Two columns + flexible gutter */ .products-grid > li:nth-child(odd) { clear: none; } .products-grid > li:nth-child(even) { margin-right: 0; } .products-grid .product-image { margin-bottom: 5px; } .products-grid .product-image:before, .products-grid .product-image:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; } .products-grid .product-image:before { background-color: white; opacity: 0.8; z-index: 2; } .products-grid .product-image:after { background-image: url("../images/opc-ajax-loader.gif"); background-repeat: no-repeat; background-position: center; z-index: 3; } .products-grid .product-image.loading { position: relative; } .products-grid .product-image.loading:before, .products-grid .product-image.loading:after { display: block; } .products-grid li.hover-image { cursor: pointer; } @media only screen and (min-width: 768px) { /* Config: Three columns + flexible gutter */ .products-grid { /* Undo two-column config */ /* Set three-column config */ } .products-grid > li:nth-child(odd) { clear: none; } .products-grid > li:nth-child(even) { margin-right: 2%; } .category-coffee-for-me .box-up-sell .products-grid > li:nth-child(even) { margin-right: 0; } .products-grid > li { width: 32%; margin-right: 2%; margin-left: 0 !important; } .products-grid > li:nth-child(3n+1) { clear: none; } .products-grid > li:nth-child(3n) { margin-right: 0; margin-left: 0 !important; } } @media only screen and (max-width: 767px) { /* Config: Three columns + flexible gutter */ .products-grid.products-grid--max-3-col { margin: 0 -1%; /* Undo two-column config */ /* Set three-column config */ } .products-grid > li:nth-child(odd) { clear: none; } .products-grid > li:nth-child(even) { margin-right: 0; } .products-grid > li { width: 48%; padding: 0 1%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; } .my-account .buttons-set .back-link { display: block; float: none; } .my-account .buttons-set .back-link a { padding-top: 0; line-height: normal; } } @media only screen and (min-width: 768px) { /* Config: Columns + flexible gutter */ /* Undo three-column config */ .products-grid--max-4-col { margin: 0 -10px; } .products-grid--max-4-col > li:nth-child(odd) { clear: none; } .products-grid--max-4-col > li:nth-child(3n+1) { clear: none; } /* Set column config */ .products-grid--max-4-col > li { width: 23.5%; padding: 0 1%; margin: 0; } .products-grid--max-4-col > li:nth-child(4n+1) { clear: none; } .products-grid--max-4-col > li:nth-child(4n) { margin-right: 0; } /* Config: Columns + flexible gutter */ /* Undo three-column config */ .products-grid--max-5-col > li:nth-child(odd) { clear: none; } .products-grid--max-5-col > li:nth-child(3n+1) { clear: none; } .products-grid--max-5-col > li:nth-child(even), .products-grid--max-5-col > li:nth-child(3n) { margin-right: 2.22222%; } /* Set column config */ .products-grid--max-5-col > li { margin-right: 2.22222%; } .products-grid--max-5-col > li { width: 18.22222%; margin-right: 2.22222%; } .products-grid--max-5-col > li:nth-child(5n+1) { clear: left; } .products-grid--max-5-col > li:nth-child(5n) { margin-right: 0; } /* Config: Columns + flexible gutter */ /* Undo three-column config */ .products-grid--max-6-col > li:nth-child(odd) { clear: none; } .products-grid--max-6-col > li:nth-child(3n+1) { clear: none; } .products-grid--max-6-col > li:nth-child(even), .products-grid--max-6-col > li:nth-child(3n) { margin-right: 2.22222%; } /* Set column config */ .products-grid--max-6-col > li { margin-right: 2.22222%; } .products-grid--max-6-col > li { width: 30%; margin-right: 2.22222%; } .products-grid--max-6-col > li:nth-child(6n+1) { clear: left; } .products-grid--max-6-col > li:nth-child(6n) { margin-right: 0; } } /* ============================================ * * Product List * ============================================ */ .products-list { margin-top: 20px; margin-bottom: 20px; } .products-list > li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ededed; } .products-list > li:after { content: ''; display: table; clear: both; } .products-list > li .product-image { float: left; width: 33.33333%; } .products-list > li .product-image img { width: 100%; max-width: 100%; } .products-list > li:last-child { padding-bottom: 0; border-bottom: none; } .products-list .product-shop { float: right; width: 66.66667%; padding-left: 20px; } .products-list .product-shop .product-name { margin-bottom: 0; } .products-list .product-shop .ratings { margin: 0; } .products-list .product-shop .ratings .rating-box, .products-list .product-shop .ratings .rating-links { float: left; margin-right: 7px; } .products-list .product-shop .ratings .rating-links { margin-top: 4px; } .products-list .product-shop .price-box { margin-top: 0; } .products-list .product-shop .price-box .price { font-size: 18px; } .products-list .product-shop .action { margin: 7px 0; } .products-list .product-shop .desc { margin-top: 7px; } .products-list .product-shop .product-primary, .products-list .product-shop .desc { float: left; width: 75%; overflow: hidden; } .products-list .product-shop .product-secondary { float: right; width: 25%; text-align: right; clear: right; } @media only screen and (min-width: 480px) { .products-list .product-name a { font-size: 18px; } } @media only screen and (max-width: 1279px) { .products-list .product-shop .product-primary, .products-list .product-shop .desc { float: left; width: 60%; padding-right: 20px; } .products-list .product-shop .product-secondary { float: right; width: 40%; } } @media only screen and (max-width: 600px) { .products-list .product-shop .price-box .special-price { padding-left: 0; } .products-list .product-shop .product-primary, .products-list .product-shop .product-secondary, .products-list .product-shop .desc { float: none; width: 100%; padding-right: 0; text-align: left; } } /* ============================================ * * Mini Product List * ============================================ */ .mini-products-list .product-image { display: table-cell; min-width: inherit; width: 97px; float: none; } .mini-products-list .product-details { display: table-cell; vertical-align: middle; padding-left: 30px; } .mini-products-list .product-details .product-name { padding-top: 10px; } .mini-products-list li { margin-bottom: 10px; clear: both; } .mini-products-list li:after { content: ''; display: table; clear: both; } .mini-products-images-list:after { content: ''; display: table; clear: both; } .mini-products-images-list li.item { float: left; width: 50%; margin: 0; padding: 0 5px 10px 0; } .mini-products-images-list li.item:nth-child(even) { padding-right: 0; padding-left: 5px; } .mini-products-images-list li.item .product-image { display: block; } .mini-products-images-list li.item .product-image img { width: 100%; max-width: 100%; } /* ============================================ * * Catalog - List * ============================================ */ .category-image img { width: 100%; max-width: 100%; } .category-image img:hidden { display: none; } #infscr-loading { background: url('../images/ajax-loader-dot.gif') no-repeat; width: 70px; height: 17px; background-size: 100%; opacity: 0; } /* ============================================ * * New landing * ============================================ */ .category-coffee-club .coffee-club-faq{ margin-top: 10px} .new-landing .coffee-club-main-banner{ position: relative;} .new-landing .coffee-club-main-banner .section-content{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; text-align: center; max-width: 740px; } .new-landing .landing-section h3{ font-family: 'FoundersGroteskText-Light'; font-size: 46px; color: #000000; } .coffee-club-main-banner .section-content .content-text{ margin-top: 32px;} .coffee-club-main-banner .section-content .content-text p{ font-family: 'FoundersGroteskText-Light'; font-size: 18px; line-height: 24px; } .coffee-club-main-banner .actions{ position: absolute; bottom: 98px; left: 50%; -webkit-transform: translateX(-50%%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .new-landing .landing-section .actions{ max-width: 59%; margin: 0 auto;} .new-landing .landing-section .actions a{ display: inline-block; width: calc(50% - 11px); height: 40px; line-height: 40px; padding: 0px 10px; background: #000000; font-family: 'FoundersGroteskMono-Regular'; font-size: 14px; text-transform: uppercase; text-align: center; color: #fff; margin: 0 4px; } .new-landing .landing-section .actions a:hover{ background: #999; } .coffee-club-get-started{ background: #fdfaf1; margin-top: 92px; padding: 69px 0 59px 0; } .coffee-club-get-started h3{ text-align: center; } .coffee-club-get-started .section-content{ margin: 69px auto 51px; max-width: 89%} .coffee-club-get-started .section-content .column{ float: left; width: calc(33.33% - 12px); margin: 0 6px; font-size: 18px; color: #000000; text-align: center; line-height: 25px; } .coffee-club-get-started .section-content .column img{ margin: 0 auto;} .coffee-club-get-started .section-content .column .title{ font-family: 'FoundersGroteskText-Medium'; } .landing-section .image-left img.mb, .landing-section .image-right img.mb{ display: none; } .coffee-club-get-started .section-content .column .content{ padding: 0 50px; margin-top: 26px;} .coffee-club-images-content{ margin-top: 94px;} .landing-section .image-left, .landing-section .image-right{ margin-bottom: 118px;} .landing-section .image-left, .landing-section .image-right{ position: relative;} .landing-section .image-left img, .landing-section .image-right img{ width: 66.7%;} .landing-section .image-left .right-float{ width: 31.5%; position: absolute; right: 0; top: 52px; } .coffee-club-images-content h3, .coffee-club-testimonial h3{ position: relative; line-height: 49px; color: #000000; margin-bottom: 16px;} .coffee-club-images-content .content-text p, .coffee-club-testimonial p{ font-size: 18px; line-height: 22px; color: #000000;} .landing-section .image-left .right-float h3{left: -89px;} .landing-section .image-right{ overflow: hidden;} .landing-section .image-right img{ float: right;} .landing-section .image-right .left-float{ width: 31%; position: absolute; left: 0; top: 52px; text-align: right; } .landing-section .image-right .left-float h3{right: -96px;} .coffee-club-testimonial ul li{ width: 100%} .coffee-club-testimonial ul li .info .name{ margin-left: 37px;} .coffee-club-testimonial ul li .info .type{ margin-left: 61px;} .coffee-club-testimonial .slideshow-pager{ margin-top: 27px; } .landing-section.coffee-club-testimonial .image-left{ margin-bottom: 0px;} .new-landing .landing-section.coffee-club-testimonial .actions{ margin-top: 75px;} .new-landing .coffee-club-love{ margin: 41px 0 25px;} .new-landing .coffee-club-love .block-related .block-title h2{ padding-bottom: 11px; font-size: 18px; letter-spacing: normal;} .new-landing .coffee-club-love .block-related{ display: block !important} .new-landing .coffee-club-love .block-related .block-content{ margin-top: 47px; margin-left: 3.7%; width: 78.23%; } .new-landing.coffee-club .coffee-club-redeem-container{ margin-bottom: 93px; margin-top: 28px;} .new-landing .coffee-club-main-banner .content-slider img.mb{ display: none} .coffee-club-love .brew-detail .product-view .block-related .products-grid > li .product-details{ padding: 0 5px; margin-top: 25px; } .coffee-club-love .brew-detail .product-view .block-related .products-grid > li .product-details .product-name a{ color: #000;} /*=========input singup page==============*/ .signuppage_form form .checkbox-wrap{ margin-top: 17px; } .signuppage_form button.button{ margin-top: 13px; } @media screen and (max-width: 960px){ .coffee-club-main-banner .section-content .content-text{ margin-top: 22px;} .coffee-club-main-banner .actions{ bottom: 40px;} .coffee-club-get-started{ margin-top: 48px;} .coffee-club-get-started .section-content .column .content{ padding: 0 10px;} .landing-section .image-left, .landing-section .image-right{ margin-bottom: 55px;} .landing-section .image-left .right-float h3{ width: 123%; left: -48px;} .landing-section .image-right .left-float h3{ width: 123%; right: -13px;} .coffee-club-testimonial ul li .info .name{ margin-left: 0px;} .coffee-club-testimonial ul li .info .type{ margin-left: 23px} .new-landing .coffee-club-redeem-container{ margin-bottom: 60px !important;} .category-coffee-club .coffee-club-faq.desktop{ display: none} .category-coffee-club .landing-club-faq.mobile{ display: block} .landing-club-faq .coffee-club-faq .delivery-date{ margin-bottom: 3px;} .landing-club-faq .coffee-club-faq{ padding: 11px 0px 11px; font-size: 12px; float: none; text-align: center; width: 100%; clear: both; line-height: 17px; border-top: 1px solid #929292; border-bottom: 1px solid #929292; } .coffee-club-faq .link-faq { text-align: center !important; } .landing-section .image-left .right-float, .landing-section .image-right .left-float{ top: 23px;} } @media only screen and (max-width: 767px){ .category-coffee-club .page-title{ display: block} .category-coffee-club .page-title h1{ font-size: 32px; letter-spacing: 0.25px; color: #0d0d0d;} .category-coffee-club .main-container{ padding: 0;} .new-landing .coffee-club-main-banner .content-slider{ /*float: left; overflow: hidden;*/ position: relative; /*width: 100%; height: 320px;*/ } /*.new-landing .coffee-club-main-banner .content-slider img{ float: left; left: 41%; position: absolute; top: 0; -moz-transform: translate(-41%, 0px); -webkit-transform: translate(-41%, 0px); -o-transform: translate(-41%, 0px); -ms-transform: translate(-41%, 0px); -webkit-transform: translate(-41%, 0px); transform: translate(-41%, 0px); width: 100%; height: 320px; max-width: inherit; }*/ .new-landing .coffee-club-main-banner .content-slider img{ display: none} .new-landing .coffee-club-main-banner .content-slider img.mb{ display: block} .new-landing .landing-section h3{ font-size: 32px; line-height: 33px;} .coffee-club-main-banner .section-content .content-text p{ font-size: 15px; line-height: 20px;} .coffee-club-main-banner .actions{ position: static; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; max-width: 100%; margin: 0 -8px; float: left; } .new-landing .landing-section .actions a{ width: 48%; margin-right: 4%; margin-left: 0; float: left; } .new-landing .landing-section .actions a:last-child{ margin-right: 0} .new-landing .landing-section .actions{ max-width: 100%; width: 100%; padding: 0 15px; overflow: hidden;} .coffee-club-get-started .section-content .column{ float: none; width: 100%; text-align: left; overflow: hidden; margin: 0 0 30px;} .coffee-club-get-started .section-content .column img{ float: left; width: 25%;} .coffee-club-get-started .section-content .column .content{ padding: 0; float: left; width: 60%; margin-left: 24px; margin-top: 0; } .category-coffee-club .landing-club-faq{ padding: 0 15px;} .coffee-club-get-started .section-content{ max-width: 100%; padding: 0 15px; margin: 43px auto 8px;} .landing-section .image-left img, .landing-section .image-right img{ width: 100%; float: none} .landing-section .image-left .right-float, .landing-section .image-right .left-float{ width: 100%; position: static; text-align: left; margin-top: 15px;} .landing-section .image-left .right-float h3, .landing-section .image-right .left-float h3{ width: 100%; left: 0; right: 0; margin-bottom: 11px;} .coffee-club-images-content .content-text p, .coffee-club-testimonial p{ font-size: 15px; line-height: 20px;} .new-landing .coffee-club-love, .category-coffee-club .page-title{ padding: 0 15px; margin-top: 18px; margin-bottom: 13px;} .new-landing .coffee-club-love{ margin-top: 0} .new-landing .coffee-club-main-banner .section-content{ max-width: 287px;} .coffee-club-main-banner .section-content .content-text{ margin-top: 15px;} .new-landing .landing-section.coffee-club-main-banner .actions{ margin-top: 20px; margin-bottom: 20px;} .coffee-club-get-started{ margin-top: 39px; padding: 0; background: transparent;} .coffee-club-get-started .started-content{ background: #fdfaf1; padding: 35px 0 5px 0;} .coffee-club-get-started .section-content .column.last{ margin-bottom: 0} .new-landing .coffee-club-get-started.landing-section .actions{ margin-top: 20px;} .coffee-club-images-content{ margin-top: 20px; padding: 0 15px;} .landing-section .image-left, .landing-section .image-right{ margin-bottom: 35px;} .coffee-club-testimonial .content-testimonials{ padding: 41px 15px 38px; background: #fcf9f0;} .coffee-club-testimonial .slideshow-pager{ margin-bottom: 0} .new-landing .landing-section.coffee-club-testimonial .actions{ margin-top: 20px;} .coffee-club-get-started .section-content .column .title br, .coffee-club-get-started .section-content .column p br{ display: none} /*coffee-club-get-started .section-content .column.first p, .coffee-club-get-started .section-content .column.last p{ display: inline;}*/ .coffee-club-get-started .section-content .column p{ font-size: 15px; line-height: 20px;} .coffee-club-get-started .section-content .column .title{ font-size: 18px; margin-bottom: 11px;} .landing-section .image-left img, .landing-section .image-right img{ display: none} .landing-section .image-left img.mb, .landing-section .image-right img.mb{ display: block; } .new-landing .brew-detail .product-view .block-related{ margin-bottom: 8px;} .new-landing .brew-detail .product-view .block-related .products-grid > li{ height: auto !important; margin-bottom: 30px; padding: 0 9px 0 9px; } .new-landing .brew-detail .product-view .block-related .products-grid > li:nth-child(2n+1){ clear: left;} .new-landing .coffee-club-love .block-related .block-content{ margin-left: 0; width: 100%; margin-top: 20px; } .new-landing .coffee-club-love .block-related .block-title{ margin-top: 70px;} } /*@media only screen and (max-width: 600px){ .new-landing .coffee-club-main-banner .content-slider img{ width: auto} }*/