@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: normal; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html { -webkit-font-smoothing: antialiased; } html.modal { overflow: hidden; } html.mobile-nav-open { overflow: hidden; height: 100%; width: 100%; } html.mobile-nav-open body { overflow: hidden; height: 100%; width: 100%; } html.mobile-nav-overflow { overflow: hidden; height: 100%; width: 100%; } body { background: #f7f7f7; color: #111; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; overflow-x: hidden; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { body { background: #fff; } } body.modal { overflow: hidden; } form, input, textarea, select, button { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } button { cursor: pointer; outline: none; } button::-moz-focus-inner { border: 0; padding: 0; } a { text-decoration: none; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .magento { background: #fff; overflow: hidden; } .row { overflow: hidden; } .button { background: #111; border: 0; color: #fff; display: inline-block; font-weight: bold; line-height: 1em; margin: 0; padding: 14px 24px; text-decoration: none; } .button.again { padding-left: 90px; padding-right: 90px; } /* width: 220px > width: 25% grid-gutter width: 240px > width: 25% width: 460px > width: 50% grid-gutter width: 480px; > width: 50% width: 700px > width: 75% grid-gutter width: 720px; > width: 50% width: 940px > width: 100% grid-gutter width: 960px; > width: 50% Find replace @media all and (max-width: 480px) */ .container, .col2-left-layout, .account-login { margin: 0 auto; max-width: 1440px; width: 1200px; } @media all and (min-width: 1480px) { .container, .col2-left-layout, .account-login { width: 1440px; } } @media all and (max-width: 1240px) { .container, .col2-left-layout, .account-login { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .container, .col2-left-layout, .account-login { min-width: 320px; width: 100%; } } .left-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-left: 225px; max-width: 1200px; padding-right: 15px; width: auto; } @media all and (min-width: 1425px) { .left-container { padding: 0; } } @media all and (min-width: 1650px) { .left-container { margin: 0 auto; } } @media all and (max-width: 980px) and (min-width: 0) { .left-container { margin: 0; padding: 0; } } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } .page-title h1 { border-bottom: 1px solid #f1f1f1; color: #8d8d8d; font-size: 16px; font-weight: bold; margin: 40px 10px; padding: 0 0 10px 0; text-transform: uppercase; } .sub-title { color: #111; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; margin: 30px 0; } .sub-title a { color: #111; } .box-title { color: #666; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; margin-bottom: 10px; } .box-title a { color: #666; } .box-content { line-height: 1.4em; } .box-content a { color: #111; } .box-content table th { text-align: left; } .col2-left-layout { overflow: hidden; margin-bottom: 60px; } @media all and (max-width: 980px) and (min-width: 0) { .col2-left-layout { width: 100%; } } .col2-left-layout .col-left { float: left; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { .col2-left-layout .col-left { float: none; margin: 0; padding: 0 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .col2-left-layout .col-left .block-title { border-bottom: 1px solid #f1f1f1; color: #8d8d8d; font-size: 16px; font-weight: bold; margin: 40px 0; padding: 0 0 10px 0; text-transform: uppercase; } .col2-left-layout .col-left .block-title strong { font-weight: bold; } .col2-left-layout .col-left .block-content ul { font-size: 14px; } .col2-left-layout .col-left .block-content li { line-height: 1.6em; } .col2-left-layout .col-left .block-content li a { color: #666; text-decoration: none; } .col2-left-layout .col-left .block-content li a:hover { text-decoration: underline; } .col2-left-layout .col-left .block-content li a.current { color: #111; } .col2-left-layout .col-main { float: right; width: 75%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { .col2-left-layout .col-main { float: none; margin: 0; padding: 0 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .col2-left-layout .col-main .page-title h1 { margin: 40px 0; } .col2-set { overflow: hidden; } .col2-set .col-1, .col2-set .col-2 { float: left; margin: 0 10px; width: 580px; } @media all and (min-width: 1480px) { .col2-set .col-1, .col2-set .col-2 { width: 700px; } } @media all and (max-width: 1240px) { .col2-set .col-1, .col2-set .col-2 { width: 460px; } } @media all and (max-width: 980px) and (min-width: 0) { .col2-set .col-1, .col2-set .col-2 { float: none; margin: 0; padding: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media all and (max-width: 980px) and (min-width: 0) { .col2-set .col-2 { margin-top: 20px !important; } } .col-right.sidebar { /* Hide sidebar when Magento randomly tries to include it */ display: none; } .messages { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 13px; margin-bottom: 30px; } form .fieldset { font-size: 13px; } form .fieldset h2 { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 12px; margin-bottom: 30px; } form .form-list .fields { overflow: hidden; } form .form-list li { margin-bottom: 10px; } form .form-list li label { display: block; margin-bottom: 5px; } form .form-list li label em { display: block; float: left; padding-right: 6px; } form .form-list .field { padding-bottom: 10px; overflow: hidden; } form .form-list input[type=text], form .form-list input[type=tel], form .form-list input[type=email], form .form-list input[type=password] { background: #e5e5e5; border: 0; color: #111; margin: 0; padding: 5px; } form .form-list textarea { background: #e5e5e5; border: 0; color: #111; margin: 0; padding: 5px; } form .form-list select { margin: 0; width: 340px; } @media all and (max-width: 980px) and (min-width: 0) { form .form-list select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } form .form-list .control { overflow: hidden; } form .form-list .control .input-box { float: left; margin-right: 6px; } form .form-list .control .input-box input[type=checkbox] { margin: 1px; } form .form-list .control label { display: inline; } form .validation-advice { color: #ff3000; padding: 4px 0; } form .validation-error input[type=text], form .validation-error input[type=tel], form .validation-error input[type=email], form .validation-error input[type=password], form .validation-error .input-text { -webkit-box-shadow: inset 0 0 10px #ff3000; -moz-box-shadow: inset 0 0 10px #ff3000; box-shadow: inset 0 0 10px #ff3000; } .buttons-set { overflow: hidden; } .buttons-set button, .buttons-set .button { background: #111; border: 0; color: #fff; display: block; float: left; font-weight: bold; line-height: 1em; margin: 0; padding: 14px 24px; text-decoration: none; } .buttons-set .btn-cancel { color: #111; } .back-link a { background: #e5e5e5; border: 0; color: #666; display: block; float: left; font-weight: bold; line-height: 1em; margin-right: 1px; padding: 14px 24px; text-decoration: none; } .back-link a small { display: none; } p.required { color: #999; font-size: 12px; } .table-caption { color: #111; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; margin: 30px 0; } .table-caption a { color: #111; } .data-table { font-size: 13px; width: 100%; } .data-table a { color: #666; text-decoration: none; } .data-table a:hover { text-decoration: underline; } .data-table .even { background-color: #f5f5f5; } .data-table th { border-bottom: 1px solid #f1f1f1; color: #000; padding: 0 15px 10px 15px; white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { .data-table th { padding: 8px 4px; white-space: normal; text-align: left; } } .data-table tbody td { padding: 15px; text-align: center; } @media all and (max-width: 980px) and (min-width: 0) { .data-table tbody td { padding: 8px 4px; text-align: left; } } .data-table tfoot td { border-bottom: 1px solid #f1f1f1; padding-top: 1px; padding-bottom: 1px; } .data-table .a-center, .data-table .nobr, .data-table .wrap { white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { .data-table .a-center, .data-table .nobr, .data-table .wrap { white-space: normal; } } .pager { color: #666; font-size: 12px; margin-bottom: 20px; overflow: hidden; } .pager p { margin: 0 !important; } .pager select { margin-bottom: 1px; padding: 0; } .pager .amount { float: left; line-height: 1.4em; } .pager .limiter { float: right; line-height: 20px; } .pager .pages { color: #333; line-height: 20px; margin: 0 135px; text-align: center; } .pager .pages a { color: #8c8c8c; text-decoration: underline; } .pager .pages a:hover { color: #8c8c8c; text-decoration: none; } .pager .pages ol, .pager .pages li { display: inline; padding: 0 2px; } .pager .pages .current { font-weight: bold; } .pager .pages .i-previous, .pager .pages .i-next { text-decoration: none !important; vertical-align: middle; } .pager-only { clear: both; } .pager-only .pages { margin: 0; } .messages { font-size: 36px; font-weight: bold; line-height: 1em; margin: 0 10px 30px 10px; } @media all and (max-width: 980px) and (min-width: 0) { .messages { font-size: 36px; word-wrap: break-word; } } .messages .success-msg { color: #2ae98f; } .messages .success-msg a { color: #2ae98f; } .messages .error-msg { color: #ff3000; } .messages .error-msg a { color: #ff3000; } .my-account .messages { margin: 0 0 30px 0; } #messages_product_view { margin: 0 auto; width: 1200px; } @media all and (min-width: 1480px) { #messages_product_view { width: 1440px; } } @media all and (max-width: 1240px) { #messages_product_view { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { #messages_product_view { width: 100%; } } #messages_product_view .messages { margin: 30px 10px; } .split-button { display: inline-block; float: left; font-size: 14px; margin-right: 20px; position: relative; white-space: nowrap; z-index: 1; } .split-button * { outline: none; } .split-button.clickable:active { left: auto; top: auto; } .split-button.active { z-index: 100; } .split-button strong { background: #e5e5e5; color: #333; display: block; font-weight: bold; position: relative; padding: 14px 48px 14px 24px; text-decoration: none; } .split-button .clickable > strong, .split-button strong[onclick] { cursor: pointer; } .split-button .change { cursor: pointer; display: block; left: 0; overflow: hidden; position: absolute; text-indent: -999em; top: 0px; width: 100%; height: 100%; } .split-button .change:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999; content: ''; height: 0; margin-top: -3px; position: absolute; right: 12px; top: 50%; width: 0; } .split-button .list-container { display: none; float: left; min-width: 100%; padding: 0; position: absolute; left: 0; top: 100%; } .split-button .list-container ul { border: 1px solid #eee; border-bottom: 0; margin-top: 4px; position: relative; } .split-button .list-container ul > li { display: block !important; margin: 0 !important; white-space: nowrap; } .split-button .list-container li a, .split-button .list-container li span { background: #fff; border-bottom: 1px solid #eee; color: #666; cursor: pointer; display: block; font-size: 13px; overflow: hidden; padding: 12px 18px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .split-button .list-container li:hover a, .split-button .list-container li:hover span, .split-button .list-container li:hover { background: #eee; } .split-button.active .list-container { display: block; } .split-button.light { background: none; height: auto; padding: 0; } .split-button.light.clickable:active { left: auto; top: auto; } .split-button.light strong { background: #fff; border: 1px solid #ebebeb; color: #666; display: block; font-weight: bold; position: relative; text-decoration: none; } .split-button.light:hover strong { background: #ebebeb; } .split-button.light.clickable > strong, .split-button.light strong[onclick] { color: #999; padding: 7px 36px 7px 12px; } .split-button.light.clickable > strong:hover, .split-button.light strong[onclick]:hover { text-decoration: none; } .split-button.light .change { display: block; text-indent: -999em; } .split-button.light .list-container ul { margin: 0 !important; } .paypal-express-review .sub-title { margin: 0 10px; } .paypal-express-review .info-set { margin: 0 10px 20px 10px; } .paypal-express-review .info-set.col2-set { margin: 0 0 20px 0; } @media all and (max-width: 980px) and (min-width: 0) { .paypal-express-review .info-set.col2-set { margin: 0; padding: 0 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .paypal-express-review .info-set.col2-set > h2 { margin: 0 10px; } .paypal-express-review .info-set.col2-set > .form-list { margin: 0 10px; } .paypal-express-review h2.legend { color: #666; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; padding: 20px 0; } .paypal-express-review h2.legend a { color: #666; } .paypal-express-review .paypal-shipping-method h3 { color: #666; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; } .paypal-express-review .form-list { width: 340px; } @media all and (max-width: 980px) and (min-width: 0) { .paypal-express-review .form-list { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .paypal-express-review .form-list li em { display: none; } .paypal-express-review .form-list input[type=text], .paypal-express-review .form-list input[type=tel], .paypal-express-review .form-list input[type=email], .paypal-express-review .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .paypal-express-review .form-list input[type=text], .paypal-express-review .form-list input[type=tel], .paypal-express-review .form-list input[type=email], .paypal-express-review .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .paypal-express-review .input-box select { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .paypal-express-review .input-box select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .paypal-express-review .data-table { width: 100%; } .paypal-express-review .data-table th, .paypal-express-review .data-table .a-center, .paypal-express-review .data-table td { line-height: 1.4em; text-align: left; } .paypal-express-review .data-table .nobr { white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { .paypal-express-review .data-table .nobr { white-space: normal; } } .paypal-express-review tfoot td { padding: 5px 15px; } @media all and (max-width: 980px) and (min-width: 0) { .paypal-express-review tfoot td { padding: 4px; } } .paypal-express-review #review-buttons-container { margin: 30px 10px; overflow: hidden; } .paypal-express-review #review-buttons-container button { display: block; float: left; margin-right: 1px; } .paypal-express-review #update_order { background: #e5e5e5; color: #666; } .paypal-express-review #review-please-wait { display: block; float: left; margin: 11px 0 0 10px; } @media all and (max-width: 980px) and (min-width: 0) { .paypal-express-review #review-please-wait { clear: both; float: none; margin: 0; padding: 10px 0; } } .paypal-express-review #review-please-wait * { vertical-align: middle; } /* Popup Dialog Block */ .window-overlay { background: #000; display: none; left: 0; min-height: 100%; position: absolute; top: 0; width: 100%; z-index: 990; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } .window-overlay.active { display: block; } .popup-block { display: none; left: 50%; margin: -85px 0 0 -250px; position: fixed; text-align: left; top: 40%; width: 500px; z-index: 1000; } .popup-block.active { display: block; } .popup-block .block-title { background: #fff; padding: 30px 30px 0 30px; } .popup-block .block-title strong { color: #111; font-size: 16px; font-weight: bold; line-height: 1em; text-transform: uppercase; } .popup-block div.btn-close { background: url(../images/icon_modal_close.gif) center center no-repeat; cursor: pointer; display: block; height: 15px; position: absolute; right: 17px; text-indent: -9999em; top: 19px; width: 15px; } .popup-block .block-content { background: url(http://needsupply.com/skin/frontend/needsupply/default/images/bkg_block.gif) repeat-x 0 100% white; font-size: 12px; padding: 15px 30px 30px 30px; } .popup-block .block-content .form-list label { width: 180px; } .popup-block .block-content .form-list .input-text { width: 230px; } .popup-block .block-content .form-buttons .button { float: left; margin: 15px 1px 0 0; } .popup-block .block-content .form-buttons .btn-cancel { background: #ccc; } .popup-block.loading .block-content * { margin-left: -9999em; overflow: hidden; position: relative; text-align: left; text-indent: -99999em; } .popup-block.loading .block-content:before { background: url(../images/opc-ajax-loader.gif) no-repeat 0 50%; content: ''; display: block; left: 50%; line-height: 16px; padding: 16px; position: absolute; text-indent: 0 !important; top: 50%; z-index: 99; } .no-display { display: none; } .carousel { cursor: default; display: none; overflow: hidden; position: relative; width: 100%; } .carousel img { display: block; height: auto; width: 100%; } .carousel ul { list-style: none; margin: 0; padding: 0; } .carousel div.slides { position: relative; } .carousel div.slides div { left: 0; position: absolute; top: 0; } .carousel .menu { float: right; margin: 5px 10px; } .carousel .menu li { display: inline; margin-left: 8px; } .carousel .menu .next a { border-bottom: 6px solid transparent; border-left: 6px solid #ccc; border-top: 6px solid transparent; cursor: pointer; display: inline-block; height: 0; width: 0; } .carousel .menu .next a:hover { border-left-color: #999; } .carousel .menu .prev a { border-bottom: 6px solid transparent; border-right: 6px solid #ccc; border-top: 6px solid transparent; cursor: pointer; display: inline-block; height: 0; width: 0; } .carousel .menu .prev a:hover { border-right-color: #999; } .carousel ul.mobile-pagination { display: none; margin: 10px 0; text-align: center; } .carousel ul.mobile-pagination li { display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 36px; font-weight: normal; } .carousel ul.mobile-pagination li a { color: #b3b3b3 !important; cursor: pointer; text-decoration: none; } .carousel ul.mobile-pagination li a:hover, .carousel ul.mobile-pagination li a.active { color: #666 !important; } #home-carousel div.loading-bar { background: #ccc; background: rgba(0, 0, 0, 0.2); height: 3px; left: 0; position: absolute; top: 0; width: 0; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; } #home-carousel div.slides { overflow: hidden; position: relative; width: 100%; } #home-carousel div.slides a { display: block; height: 900px; width: 100%; } #home-carousel div.slides a img { display: none; } #home-carousel ul.pagination { color: #666; font-size: 20px; margin: 30px 0; overflow: hidden; text-align: center; } #home-carousel ul.pagination li { display: inline-block; font-weight: normal; font-size: 16px; } #home-carousel ul.pagination li a { color: #333; cursor: pointer; display: inline-block; padding: 0 8px; text-decoration: none; } #home-carousel ul.pagination li a:hover, #home-carousel ul.pagination li a.active { text-decoration: underline; } #home-carousel ul.mobile-pagination { color: #666; font-size: 20px; margin: 20px 0 24px 0; overflow: hidden; text-align: center; } #home-carousel ul.mobile-pagination li { display: inline-block; font-weight: normal; font-size: 12px; } #home-carousel ul.mobile-pagination li a { color: #333; cursor: pointer; display: inline-block; padding: 0 8px; text-decoration: none; } #home-carousel ul.mobile-pagination li a:hover, #home-carousel ul.mobile-pagination li a.active { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { #home-carousel ul.pagination { display: none; } #home-carousel ul.mobile-pagination { display: block; } #home-carousel .menu { display: none; } } #category-carousel { width: auto; margin-right: 20px; } @media all and (max-width: 980px) and (min-width: 0) { #category-carousel { margin: 0 auto; } } #category-carousel .slides { overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { #category-carousel .slides { margin: 0; } } #category-carousel .slides .slide { background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #category-carousel .slides a { display: block; height: 100%; text-align: center; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } #category-carousel .slides p { display: block; position: absolute; text-align: center; top: 50%; width: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #category-carousel .slides span { background: #fff; color: #111; display: inline-block; padding: 2.5em 4em; } #category-carousel a.prev { cursor: w-resize; display: block; position: absolute; height: 100%; left: 0; top: 0; width: 15%; } #category-carousel a.prev span { background: transparent url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_prev.gif") center center no-repeat; left: 0; top: 50%; -webkit-background-size: 14px 27px; -moz-background-size: 14px 27px; -o-background-size: 14px 27px; background-size: 14px 27px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #category-carousel a.prev span { background-image: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_prev@2x.gif"); } } #category-carousel a.next { cursor: e-resize; display: block; position: absolute; height: 100%; right: 0; top: 0; width: 15%; } #category-carousel a.next span { background: transparent url("../images/icon_quick_view_next.gif") center center no-repeat; right: 0; top: 50%; -webkit-background-size: 14px 27px; -moz-background-size: 14px 27px; -o-background-size: 14px 27px; background-size: 14px 27px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #category-carousel a.next span { background-image: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_next@2x.gif"); } } #category-carousel ul.pagination { color: #666; font-size: 20px; margin: 10px 0; overflow: hidden; text-align: left; } #category-carousel ul.pagination li { display: inline-block; font-size: 12px; font-weight: normal; padding-right: 10px; } #category-carousel ul.pagination li a { color: #333; cursor: pointer; text-decoration: none; } #category-carousel ul.pagination li a:hover, #category-carousel ul.pagination li a.active { text-decoration: underline; } #category-carousel ul.mobile-pagination { color: #666; margin: 10px 0; overflow: hidden; text-align: left; } #category-carousel ul.mobile-pagination li { display: inline-block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; padding-right: 10px; } #category-carousel ul.mobile-pagination li a { color: #333; cursor: pointer; text-decoration: none; } #category-carousel ul.mobile-pagination li a:hover, #category-carousel ul.mobile-pagination li a.active { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { #category-carousel ul.pagination { display: none; } #category-carousel ul.mobile-pagination { display: block; } #category-carousel .menu { display: none; } } #product-carousel ul.pagination { font-size: 12px; line-height: 1.6em; margin: 10px 0; } #product-carousel ul.pagination li { display: block; color: #666; float: left; } #product-carousel ul.pagination li a { color: #666; cursor: pointer; display: block; float: left; } #product-carousel ul.pagination li a:hover, #product-carousel ul.pagination li a.active { text-decoration: underline; } #product-carousel ul.pagination li span { display: block; float: left; margin: 0 4px; } #product-carousel ul.mobile-pagination a { text-decoration: none !important; } @media all and (max-width: 980px) and (min-width: 0) { #product-carousel ul.pagination { display: none; } #product-carousel ul.mobile-pagination { display: block; } #product-carousel .menu { display: none; } } #product-carousel { display: none !important; } @media all and (max-width: 980px) and (min-width: 0) { #product-carousel { display: block !important; } } #product-carousel div.slides { background: #eee; } #product-carousel div.slides div { left: 50%; } #product-carousel img { margin: 0 auto; max-width: 560px; width: 100%; } #about-carousel ul.pagination li, #affiliates-carousel ul.pagination li, #blog-carousel ul.pagination li, #jobs-carousel ul.pagination li { display: block; float: left; font-family: Helvetica, Arial, sans-serif; font-size: 36px; font-weight: normal; } #about-carousel ul.pagination li a, #affiliates-carousel ul.pagination li a, #blog-carousel ul.pagination li a, #jobs-carousel ul.pagination li a { color: #b3b3b3; cursor: pointer; text-decoration: none; } #about-carousel ul.pagination li a:hover, #about-carousel ul.pagination li a.active, #affiliates-carousel ul.pagination li a:hover, #affiliates-carousel ul.pagination li a.active, #blog-carousel ul.pagination li a:hover, #blog-carousel ul.pagination li a.active, #jobs-carousel ul.pagination li a:hover, #jobs-carousel ul.pagination li a.active { color: #666; } #goexplore-carousel { width: 400px; } #goexplore-carousel .slides img { display: block; width: 100%; } #goexplore-carousel .pagination { text-align: center; margin: 1em 0; } #goexplore-carousel .pagination li { display: inline-block; margin: 0 5px; } #goexplore-carousel .pagination a { background: #fff; border: 1px solid #111; display: block; height: 9px; width: 9px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } #goexplore-carousel .pagination a:hover, #goexplore-carousel .pagination a.active { background: #888; border-color: #888; } @media all and (max-width: 980px) and (min-width: 0) { #goexplore-carousel { margin: 0 auto; max-width: 400px; width: 100%; } #goexplore-carousel .slides { height: auto; width: 100%; } #goexplore-carousel .slides div { width: 100%; } } .share { width: 100px; } @media all and (max-width: 980px) and (min-width: 0) { .share { display: none; } } .share a, .share span { background: #2ae98f; color: #fff; display: block; height: 100px; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 100px; text-align: center; text-decoration: none; width: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } .share a.facebook, .share span.facebook { background: #3b5898; color: #fff; } .share a.twitter, .share span.twitter { background: #00abed; color: #fff; } .share a.facebook:hover, .share a.twitter:hover, .share span.facebook:hover, .share span.twitter:hover { text-decoration: underline; } .share ul { display: none; overflow: visible; } @media all and (max-width: 1240px) { .share ul { overflow: hidden; } } .share ul li { margin: 0 0 5px 0; } header { background: #fff; border-bottom: 1px solid #f1f1f1; position: relative; } @media all and (max-width: 980px) and (min-width: 0) { header { padding: 0; } } header.above { z-index: 9999; } header .background { display: none; } header li { color: #111; display: inline-block; font-size: 12px; text-transform: uppercase; } header a { color: #111; text-decoration: none; } header a:hover { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { header a:hover { text-decoration: none; } } header .masthead { float: left; position: absolute; left: 15px; top: 0; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { header .masthead { background: #fff; float: none; height: 60px; padding: 0; position: static; width: 100%; } } header .logo { display: block; padding: 17px 0 16px 0; width: 142px; } header .logo i { -webkit-background-size: 128px 18px; -moz-background-size: 128px 18px; -o-background-size: 128px 18px; background-size: 128px 18px; background: url("../images/logo_black.png") left top no-repeat; display: block; height: 18px; width: 128px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { header .logo i { -webkit-background-size: 128px 18px; -moz-background-size: 128px 18px; -o-background-size: 128px 18px; background-size: 128px 18px; background-image: url("../images/logo_black-2x.png"); } } @media all and (max-width: 980px) and (min-width: 0) { header .logo { margin: 0 auto; padding-top: 20px; } } header .primary { float: left; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { header .primary { display: none; float: none; margin: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media all and (max-width: 980px) and (min-width: 0) { header .primary ul { background: #eee; } } header .primary li { line-height: 18px; margin-right: 20px; } @media all and (max-width: 980px) and (min-width: 0) { header .primary li { display: block; margin: 0; } } header .primary a { display: block; padding: 17px 0 16px 0; } header .primary a.active { font-weight: bold; } @media all and (max-width: 980px) and (min-width: 0) { header .primary a { display: block; border-bottom: 1px solid #f1f1f1; color: #111; font-size: 16px; height: auto; line-height: normal; padding: 14px 0; text-align: center; } } header .secondary { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: right; } @media all and (min-width: 1440px) { header .secondary { float: none; position: absolute; right: 15px; top: 0; } } @media all and (max-width: 980px) and (min-width: 0) { header .secondary { display: none; float: none; margin: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media all and (max-width: 980px) and (min-width: 0) { header .secondary ul { background: #eee; } } header .secondary li { line-height: 18px; margin-left: 20px; } @media all and (max-width: 980px) and (min-width: 0) { header .secondary li { display: none; } } header .secondary li a { display: block; padding: 17px 0 16px 0; } @media all and (max-width: 980px) and (min-width: 0) { header .secondary li a { display: block; color: #111; font-size: 18px; height: auto; line-height: normal; padding: 14px 0; text-align: center; } } header .secondary #header-cart a { padding-left: 30px; } @media all and (max-width: 980px) and (min-width: 0) { header .secondary #header-account { display: block; margin: 0; } } .header-widget { background-color: #fff; border: 1px solid #e8e8e8; border-top: 0; display: none; left: 0; padding: 20px; position: absolute; top: 0; width: 220px; z-index: 999; } .header-widget li { display: block; overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { .category-widget { display: none !important; } } .category-widget li { border: 0; } .category-widget li:first-child a { padding-top: 0; } .category-widget .spacer { height: 16px; } .category-widget a { display: block; line-height: 1em; padding: 6px 0 0 0; text-decoration: none; } .category-widget a:hover { color: #666; } .cart-widget { padding: 20px 0; width: 240px; } @media all and (max-width: 980px) and (min-width: 0) { .cart-widget { display: none !important; } } .cart-widget .products { max-height: 393px; overflow-y: auto; } .cart-widget .products li { border-bottom: 1px solid #f1f1f1; margin-bottom: 20px; padding: 0 20px 20px 20px; } .cart-widget .products a { display: block; text-decoration: none; } .cart-widget .products h4 { font-weight: bold; line-height: 1.2em; } .cart-widget .products img { float: left; margin-right: 20px; width: 70px; } .cart-widget .products p { line-height: 1.2em; margin-left: 90px; } .cart-widget .buttons { overflow: hidden; padding: 0 20px; } .cart-widget .buttons li { border: 0; display: block; float: left; } .cart-widget .view_cart { width: 90px; } .cart-widget .view_cart a { display: block; line-height: 16px; overflow: hidden; padding: 14px 0; text-align: center; width: 70px; } .cart-widget .checkout { width: 110px; } .cart-widget .checkout a { background: #fff; border: 1px solid #222; display: block; font-size: 14px; font-weight: bold; padding: 14px 0; text-align: center; text-decoration: none; } .cart-widget .message { font-size: 14px; font-weight: bold; line-height: 1.2em; padding: 0 20px 20px 20px; } .cart-widget .success { color: #2ae98f; } .cart-widget .error { color: #ff3000; } @media all and (max-width: 980px) and (min-width: 0) { .search-widget { display: none !important; } } .search-widget fieldset { border: 1px solid #555; display: block; padding: 10px 12px; position: relative; } .search-widget fieldset:after { color: #111; content: '→'; display: block; position: absolute; margin-top: -7px; top: 50%; right: 12px; } .search-widget input[type=text] { border: 0; margin: 0; padding: 0; width: 100%; } .search-widget input[type=text]:focus { outline: none; } .currency-widget { padding: 8px 0 12px 0; width: 240px; } @media all and (max-width: 980px) and (min-width: 0) { .currency-widget { display: none !important; } } .currency-widget li { padding: 0 20px; } .currency-widget a { display: block; line-height: 1em; padding: 8px 0; text-decoration: none; } .currency-widget a:hover { color: #666; } .currency-widget span { float: left; width: 40px; } .account-widget { padding: 8px 0 12px 0; width: 240px; } @media all and (max-width: 980px) and (min-width: 0) { .account-widget { display: none !important; } } .account-widget li { padding: 0 20px; } .account-widget a { display: block; line-height: 1em; padding: 8px 0; text-decoration: none; } .account-widget a:hover { color: #666; } #quick_cart_spinner { height: 60px; margin-bottom: 20px; overflow: hidden; position: relative; width: 100%; } header .mobile_menu { display: none; position: relative; /* i { background: none; border-bottom: 8px solid #111; border-left: 8px solid transparent; border-right: 8px solid transparent; bottom: 0; display: none; height: 0; left: 4px; margin-bottom: -18px; position: absolute; width: 0; } */ } @media all and (max-width: 980px) and (min-width: 0) { header .mobile_menu { display: block; float: left; padding: 18px; } } header .mobile_menu span { background: url("../images/icon_hamburger.png") center center no-repeat; display: block; height: 24px; width: 24px; -webkit-background-size: 18px 14px; -moz-background-size: 18px 14px; -o-background-size: 18px 14px; background-size: 18px 14px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { header .mobile_menu span { background-image: url("../images/icon_hamburger-2x.png"); } } header .mobile_cart { display: none; position: relative; /* i { background: none; border-bottom: 8px solid #111; border-left: 8px solid transparent; border-right: 8px solid transparent; bottom: 0; display: none; height: 0; left: 4px; margin-bottom: -18px; position: absolute; width: 0; } */ } @media all and (max-width: 980px) and (min-width: 0) { header .mobile_cart { display: block; float: right; padding: 18px; text-decoration: none; } } @media all and (max-width: 980px) and (min-width: 0) { header .mobile_cart span { background: #111; color: #fff; display: block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; height: 24px; line-height: 24px; width: 24px; text-align: center; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; } } #mobile_search { background: #eee; display: none; } @media all and (max-width: 980px) and (min-width: 0) { #mobile_search { display: block; } } #mobile_search form { border-top: 1px solid #f1f1f1; padding: 10px; } #mobile_search fieldset { background: #fff; overflow: hidden; width: 100%; } #mobile_search fieldset * { vertical-align: middle; } #mobile_search input[type=text] { border: 0; color: #999; float: left; font-size: 16px; padding: 9px 7px 7px 7px; line-height: 1em; outline: none; width: 75%; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #mobile_search button { background: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_mobile_search.png") center center no-repeat; border: 0; float: right; height: 40px; width: 40px; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; -o-background-size: 20px 20px; background-size: 20px 20px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #mobile_search button { background-image: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_mobile_search@2x.png"); } } #mobile_cart_widget { background-color: #fff; border-top: 1px solid #f1f1f1; color: #000; display: none; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.2em; min-height: 80px; padding: 0 10px; position: relative; text-transform: none; } #mobile_cart_widget a { height: auto; letter-spacing: normal; line-height: normal; text-decoration: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } #mobile_cart_widget span { display: inline; height: auto; letter-spacing: normal; line-height: normal; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } #mobile_cart_widget ul { float: none; overflow: hidden; } #mobile_cart_widget li { color: #222; display: block; height: auto; float: none; overflow: hidden; padding: 0; } #mobile_cart_widget .products li { border-bottom: 1px solid #f1f1f1; margin-top: 20px; padding: 0 10px 20px 10px; } #mobile_cart_widget .products h4 { color: #222; font-size: 14px; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; margin-bottom: 6px; } #mobile_cart_widget .products h4 a { color: #222; display: inline; } #mobile_cart_widget .products h4 img { display: block; float: left; margin-right: 20px; width: 70px; } #mobile_cart_widget .products p { font-size: 12px; margin: 0 0 0 90px; } #mobile_cart_widget .buttons { overflow: hidden; padding: 10px 0; } #mobile_cart_widget .view_cart { float: left; width: 50%; } #mobile_cart_widget .view_cart a { background: #f7f7f7; color: #111; display: block; font-size: 14px; font-weight: bold; line-height: 18px; margin-right: 10px; padding: 14px 0; text-align: center; } #mobile_cart_widget .checkout { float: left; width: 50%; } #mobile_cart_widget .checkout a { background: #111; border: 0; color: #fff; display: block; font-size: 16px; font-weight: bold; margin-left: 10px; padding: 14px 0; text-align: center; text-decoration: none; } #mobile_cart_widget .message { font-size: 16px; font-weight: bold; line-height: 1.1em; padding: 20px 10px 0 10px; } #mobile_cart_widget .success { color: #2ae98f; } #mobile_cart_widget .error { color: #ff3000; padding: 20px 10px; } #mobile_cart_widget .empty { color: #999; padding: 20px 10px; } #mobile_cart_spinner { height: 80px; overflow: hidden; position: relative; width: 100%; } .messaging-banner { background: #f8f8f8; border-bottom: 1px solid #e8e8e8; font-size: 14px; min-height: 50px; display: none; -webkit-transition: height 400ms ease-out; -moz-transition: height 400ms ease-out; -o-transition: height 400ms ease-out; transition: height 400ms ease-out; } .messaging-banner a { color: #111; } .messaging-banner .content { display: block; line-height: 1.4em; overflow: hidden; padding: 17px 0; position: relative; text-align: center; } .messaging-banner .content a { font-weight: bold; display: inline-block; } .messaging-banner .content a:hover { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { .messaging-banner .content { padding: 17px 30px; } } .messaging-banner .closed { display: none; text-align: center; } @media all and (max-width: 980px) and (min-width: 0) { .messaging-banner .closed { padding: 0 10px; } } .messaging-banner .closed a { background: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_shipping_arrow.svg") right center no-repeat; display: block; font-weight: bold; margin: 0 10px; padding: 30px 20px; } .messaging-banner .opened { display: block; line-height: 1.4em; overflow: hidden; padding: 20px 0; position: relative; text-align: center; } @media all and (max-width: 980px) and (min-width: 0) { .messaging-banner .opened { padding: 20px 30px; } } .messaging-banner .close { background: url("../images/icon_shipping_close.svg") center center no-repeat; display: block; height: 12px; position: absolute; right: 10px; top: 50%; margin-top: -6px; width: 12px; } @media all and (max-width: 980px) and (min-width: 0) { .messaging-banner .close { height: 24px; width: 24px; margin-top: -12px; } } .messaging-banner .domestic { float: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { .messaging-banner .domestic { padding: 0 20px; width: 100%; } } .messaging-banner .international { float: left; padding: 20px 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .messaging-banner .international { float: none; padding: 30px 0 0 0; width: 100%; } } footer { overflow: hidden; padding: 90px 0 75px 0; position: relative; } @media all and (max-width: 980px) and (min-width: 0) { footer { display: none; } } footer a { color: #111; text-decoration: none; } footer a:hover { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { footer a:hover { text-decoration: none; } } footer .row { overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { footer .row { margin: 0; } } footer .row-2 { padding-top: 40px; } @media all and (max-width: 980px) and (min-width: 0) { footer .row-2 { padding: 0; } } footer .row-3 { padding-top: 70px; } @media all and (max-width: 980px) and (min-width: 0) { footer .row-3 { padding: 0; } } footer .logo { float: left; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { footer .logo { display: none; } } footer .logo a { background: url("../images/logo_black_2014.png") left top no-repeat; display: block; -webkit-background-size: 142px 19px; -moz-background-size: 142px 19px; -o-background-size: 142px 19px; background-size: 142px 19px; height: 19px; width: 142px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { footer .logo a { background-image: url("../images/logo_black_2014-2x.png"); } } footer .social { float: left; width: 50%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { footer .social { display: none; } } footer .social li { color: #111; display: inline-block; font-size: 14px; margin-right: 1em; } footer .social a { display: block; } footer .social img { display: block; height: 16px; width: auto; } footer .newsletter { float: right; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer .newsletter-join { background: none; border: 1px solid #222; display: inline-block; font-weight: bold; float: right; padding: 1em 2em; } @media all and (max-width: 980px) and (min-width: 0) { footer .newsletter-join { display: none; } } footer .address { float: left; line-height: 1.4em; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { footer .address { border-top: 1px solid #ddd; float: none; margin: 0; text-align: center; width: 100%; } footer .address p { padding: 10px 0; } } footer .help { float: left; line-height: 1.4em; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { footer .help { float: none; margin: 0; text-align: center; width: 100%; } footer .help a { display: block; padding: 10px 0; } footer .help li { border-top: 1px solid #ddd; display: none; } footer .help li:first-child { display: block; } } footer .company { float: left; line-height: 1.4em; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { footer .company { border-bottom: 1px solid #ddd; float: none; margin: 0; text-align: center; width: 100%; } footer .company a { display: block; padding: 10px 0; } footer .company li { border-top: 1px solid #ddd; } } footer .copyright { float: left; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { footer .copyright { float: none; margin: 20px 0 0 0; text-align: center; width: 100%; } } footer .legal { float: right; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { footer .legal { float: none; margin: 10px 0 0 0; text-align: center; width: 100%; } } footer .legal li { display: inline-block; margin-left: 1em; } footer h5 { display: none; } @media all and (max-width: 980px) and (min-width: 0) { footer h5 { border-top: 1px solid #ddd; display: block; padding: 10px 0; text-align: center; } } #mobile_newsletter_form { display: none; } @media all and (max-width: 980px) and (min-width: 0) { #mobile_newsletter_form { background: #eee; padding-bottom: 30px; } } #mobile_newsletter_form h6 { color: #111; font-size: 20px; margin: 0; padding-top: 30px; text-align: center; text-transform: uppercase; } #mobile_newsletter_form fieldset { color: #111; padding: 30px 10px 0 10px; text-align: center; } #mobile_newsletter_form input[type=text] { border: 1px solid #ccc; font-size: 18px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #mobile_newsletter_form label { display: block; font-size: 18px; padding-bottom: 12px; } #mobile_newsletter_form label span { color: #f00; } #mobile_newsletter_form label.option { display: inline; } #mobile_newsletter_form button { background: #111; border: 0; color: #fff; display: block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1em; margin: 30px auto 0 auto; padding: 14px 24px; text-transform: uppercase; } #mobile_newsletter_form .complete p { color: #111; font-size: 18px; margin-top: 1em; text-align: center; } .mobile-footer { color: #999; display: none; } .mobile-footer a { color: #999; } @media all and (max-width: 980px) and (min-width: 0) { .mobile-footer { display: block; } } .mobile-footer .container, .mobile-footer .col2-left-layout, .mobile-footer .account-login { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { .mobile-footer .container, .mobile-footer .col2-left-layout, .mobile-footer .account-login { padding: 40px 20px; } } .mobile-footer .social { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; min-width: 320px; text-align: center; padding: 30px 0 28px 0; } .mobile-footer .social li { color: #111; display: inline-block; font-size: 14px; margin-right: 1em; } .mobile-footer .social a { display: block; } .mobile-footer .social img { display: block; height: 16px; width: auto; } .mobile-footer .links { font-size: 24px; margin-bottom: 30px; text-transform: uppercase; } .mobile-footer .links li { margin-bottom: 14px; } .mobile-footer .secondary { font-size: 18px; margin-bottom: 20px; text-transform: uppercase; } .mobile-footer .logo { margin-bottom: 20px; } .mobile-footer .logo a { background: url("../images/logo_black_2014.png") left top no-repeat; display: block; -webkit-background-size: 142px 19px; -moz-background-size: 142px 19px; -o-background-size: 142px 19px; background-size: 142px 19px; height: 19px; width: 142px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { .mobile-footer .logo a { background-image: url("../images/logo_black_2014-2x.png"); } } .mobile-footer .address { font-size: 18px; line-height: 1.22em; margin-bottom: 20px; } .mobile-footer .legal { font-size: 12px; text-transform: uppercase; } .mobile-footer .legal ul { margin-top: 6px; } .mobile-footer .legal li { display: inline-block; margin-right: 6px; } .toolbar { clear: left; } .toolbar .row { overflow: hidden; } .toolbar .categories-container { border-bottom: 1px solid #f1f1f1; -webkit-transition: -webkit-transform 100ms ease-out; -moz-transition: -moz-transform 100ms ease-out; -o-transition: -o-transform 100ms ease-out; transition: transform 100ms ease-out; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .categories-container { display: none; } } .toolbar .categories-container.headroom--top { position: static; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; } .toolbar .categories-container.headroom--not-top { background: #fff; position: fixed; top: 0; left: 0; right: 0; z-index: 999; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .categories-container.headroom--not-top { position: static; } } .toolbar .categories-container.headroom--pinned { -webkit-transform: translateY(0) translateZ(0); -moz-transform: translateY(0) translateZ(0); -ms-transform: translateY(0) translateZ(0); -o-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .categories-container.headroom--pinned { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } .toolbar .categories-container.headroom--unpinned { -webkit-transform: translateY(-100%) translateZ(0); -moz-transform: translateY(-100%) translateZ(0); -ms-transform: translateY(-100%) translateZ(0); -o-transform: translateY(-100%) translateZ(0); transform: translateY(-100%) translateZ(0); } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .categories-container.headroom--unpinned { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } .toolbar .categories { line-height: 18px; margin: 0 10px; } .toolbar .categories .category { display: block; float: left; font-size: 12px; position: relative; text-transform: uppercase; margin-right: 20px; } .toolbar .categories .category-link { color: #111; display: inline-block; padding: 16px 0; } .toolbar .categories .category-link:hover { text-decoration: underline; } .toolbar .categories .category-link.active { font-weight: bold; } .toolbar .categories .category-image img { display: block; height: auto; max-width: 100%; width: 100%; } .toolbar .subcategories { padding-top: 10px; top: 100%; left: -20px; width: 130px; z-index: 999; } .toolbar .subcategories.expanded { width: 280px; overflow: hidden; } .toolbar .subcategories.expanded ul { float: left; margin-right: 20px; width: 130px; } .toolbar .subcategories.expanded .category-image { display: block; float: left; width: 130px; } .toolbar .subcategories li { border: 0; } .toolbar .subcategories a { color: #111; display: block; line-height: 1em; padding: 8px 0 0 0; text-decoration: none; text-transform: none; } .toolbar .subcategories a:hover { text-decoration: underline; } .toolbar .features { width: 260px; } .toolbar .brands { width: 520px; } .toolbar .brands ul { margin-bottom: 1em; overflow: hidden; } .toolbar .brands li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; padding-right: 1em; width: 33.33333%; } .toolbar .toolbar-container { padding-top: 20px; padding-bottom: 20px; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .toolbar-container { padding: 0; } } .toolbar .breadcrumbs { color: #999; float: left; font-size: 12px; line-height: 26px; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .breadcrumbs { display: none; } } .toolbar .breadcrumbs li { display: inline-block; } .toolbar .breadcrumbs a { color: #999; } .toolbar .breadcrumbs a:hover { text-decoration: underline; } .toolbar .breadcrumbs strong { font-weight: bold; } .toolbar .limit { float: right; font-size: 12px; line-height: 26px; padding-right: 20px; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .limit { display: none; } } .toolbar .limit li { display: inline-block; margin-right: 8px; } .toolbar .limit a { color: #111; } .toolbar .limit a:hover, .toolbar .limit a.active { text-decoration: underline; } .toolbar .mobile-filter { display: none; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .mobile-filter { border-bottom: 1px solid #f1f1f1; color: #323031; display: block; font-weight: bold; text-decoration: none !important; padding: 15px 10px; } .toolbar .mobile-filter i { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #000; float: right; margin-right: 12px; height: 0; width: 0; -webkit-transition: -webkit-transform 0.6s ease; -moz-transition: -moz-transform 0.6s ease; -o-transition: -o-transform 0.6s ease; transition: transform 0.6s ease; } .toolbar .mobile-filter.active i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } .toolbar .filters { float: right; font-size: 12px; padding-right: 10px; } @media all and (max-width: 1240px) { .toolbar .filters { float: left; padding: 10px 10px 0 10px; width: 100%; } } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .filters { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: none; padding: 0 10px 10px 10px; } } .toolbar .filters .filter { display: inline-block; margin-right: 20px; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .filters .filter { display: block; margin: 20px 0 0 0; } } .toolbar .filters .customselect { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e8e8e8; line-height: 1em; min-width: 130px; padding: 6px 8px; } .toolbar .filters .customselect-feedback { display: inline; padding-right: 22px; white-space: nowrap; text-overflow: ellipsis; } .toolbar .filters .customselect-button { background: url("http://needsupply.com/skin/frontend/needsupply/default/images/filter-arrow.gif"); height: 7px; position: absolute; width: 11px; top: 8px; right: 8px; } .toolbar .filters select { height: 24px; } .toolbar .pagination { float: right; font-size: 12px; line-height: 26px; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .pagination { display: none; } } .toolbar .pagination li { display: inline-block; margin-left: 4px; } .toolbar .pagination a { color: #111; } .toolbar .pagination a:hover, .toolbar .pagination a.active { text-decoration: underline; } .toolbar .last { margin-left: 4px; } .toolbar .last span { border-top: 5px solid transparent; border-right: 10px solid #ccc; border-bottom: 5px solid transparent; display: inline-block; } .toolbar .last:hover span { border-right-color: #999; } .toolbar .next { margin-left: 4px; } .toolbar .next span { border-top: 5px solid transparent; border-left: 10px solid #ccc; border-bottom: 6px solid transparent; display: inline-block; } .toolbar .next:hover span { border-right-color: #999; } .toolbar .view .mobile-pagination { display: none; } .toolbar .filter_state { border-bottom: 1px solid #f1f1f1; padding: 30px 0; margin-bottom: 30px; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .filter_state { padding: 20px 0; margin: 0; } } .toolbar .filter_state .filters-applied { padding: 0 10px; } .toolbar .filter_state .filters-applied li { margin-bottom: 20px; } .toolbar .filter_state .filter-label { font-size: 36px; font-weight: bold; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .filter_state .filter-label { font-size: 14px; } } .toolbar .filter_state .filter-remove { background: url("../images/icon_filter_close.svg") center center no-repeat; float: right; height: 24px; width: 24px; -webkit-background-size: 24px 24px; -moz-background-size: 24px 24px; -o-background-size: 24px 24px; background-size: 24px 24px; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .filter_state .filter-remove { height: 14px; width: 14px; margin-right: 12px; -webkit-background-size: 14px 14px; -moz-background-size: 14px 14px; -o-background-size: 14px 14px; background-size: 14px 14px; } } .toolbar .filter_state .actions { padding: 0 10px; } .toolbar .filter_state .actions a { color: #999; text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar .filter_state .actions { text-align: center; } } .toolbar-bottom { border-top: 1px solid #ededed; clear: left; margin-top: 40px; padding: 14px 0; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar-bottom { border: 0; margin-top: 20px; padding: 0; } } .toolbar-bottom a { color: #111; } .toolbar-bottom a:hover, .toolbar-bottom a.active { text-decoration: underline; } .toolbar-bottom .row { position: relative; } .toolbar-bottom .prev-page { background: url("../images/icon_caret_left.svg") left center no-repeat; float: left; height: 22px; left: 0; line-height: 22px; margin-left: 10px; padding: 15px 0 15px 40px; position: absolute; top: 0; -webkit-background-size: 13px; -moz-background-size: 13px; -o-background-size: 13px; background-size: 13px; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar-bottom .prev-page { display: none; } } .toolbar-bottom .next-page { background: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_caret_right.svg") right center no-repeat; float: right; height: 22px; line-height: 22px; margin-right: 10px; padding: 15px 40px 15px 0; position: absolute; right: 0; top: 0; -webkit-background-size: 13px; -moz-background-size: 13px; -o-background-size: 13px; background-size: 13px; } @media all and (max-width: 980px) and (min-width: 0) { .toolbar-bottom .next-page { display: none; } } .toolbar-bottom .pagination { text-align: center; } .toolbar-bottom .pagination li { display: inline-block; line-height: 22px; } .toolbar-bottom .pagination a { display: block; padding: 15px; } .toolbar-bottom-placeholder { height: 40px; } .catalog-product-view .toolbar-container { padding-bottom: 0; } .nav { float: left; font-size: 12px; height: auto; left: 25px; overflow: hidden; position: absolute; width: 175px; padding-bottom: 30px; text-transform: uppercase; } @media all and (max-width: 980px) and (min-width: 0) { .nav { display: none; float: none; height: auto; margin: 0; padding: 0; position: static; width: 100%; } .nav.expanded { height: auto; } } .nav h3 { font-weight: bold; line-height: 1em; margin-bottom: 20px; } @media all and (max-width: 980px) and (min-width: 0) { .nav h3 { display: none; } } .nav h3 a { padding: 0; } .nav .links { margin-bottom: 30px; } @media all and (max-width: 980px) and (min-width: 0) { .nav .links { margin-bottom: 0; } } .nav a { color: #111; display: block; line-height: 1.2em; padding: 6px 0 0 0; text-decoration: none; } .nav a:hover { color: #111; text-decoration: underline; } .nav a.highlight { color: #c90000; } @media all and (max-width: 980px) and (min-width: 0) { .nav a { padding: 0; } .nav a:hover { text-decoration: none; } } .nav li { border: 0; display: block; } .nav li:first-child > a { padding-top: 0; } .nav li.active a { font-weight: bold; } .nav li.active > ul { display: block; } .nav li.active > ul li a { font-weight: normal; text-decoration: none; } .nav li > ul { display: none; padding: 6px 0 2px 0; } .nav li > ul li { padding-left: 20px; } .nav li > ul li a { text-transform: none; } .nav li > ul li a:hover { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { .nav li > ul li a:hover { text-decoration: none; } } .nav li > ul li.active a { font-weight: bold; } @media all and (max-width: 980px) and (min-width: 0) { .nav li { border-bottom: 1px solid #f1f1f1; padding: 10px 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .nav li.active { border-bottom: 0; padding: 0; } .nav li.active a { padding: 10px 13px; } .nav li.active > a { border-bottom: 1px solid #f1f1f1; } .nav li.active > ul { padding: 0; } .nav li.active > ul li { padding: 0; } .nav li.active > ul li a { padding-left: 26px; } .nav li > ul { padding: 0; } .nav li > ul li { padding-left: 13px; } } .nav .cat-gifts > ul { display: block; } @media all and (max-width: 980px) and (min-width: 0) { .nav .cat-gifts { border-bottom: 0; padding: 0; } .nav .cat-gifts a { padding: 10px 13px; } .nav .cat-gifts > a { border-bottom: 1px solid #f1f1f1; } .nav .cat-gifts > ul { padding: 0; } .nav .cat-gifts > ul li { padding: 0; } .nav .cat-gifts > ul li a { padding-left: 26px; } .nav .cat-gifts > ul li:first-child > a { padding-top: 10px; } } .nav .spacer { height: 16px; } @media all and (max-width: 980px) and (min-width: 0) { .nav .spacer { display: none; } } .nav .brands { margin-bottom: 30px; } @media all and (max-width: 980px) and (min-width: 0) { .nav .brands { display: none; } } .nav #brands-content { height: 300px; position: relative; overflow: hidden; } .nav #brands-content li { padding-right: 1em; } @media all and (max-width: 980px) and (min-width: 0) { .nav .filter { display: none; } } .nav .filter ul { padding-top: 6px; } .nav .filter .toggle { position: relative; } .nav .filter .toggle:after { color: #666; content: '+'; display: block; position: absolute; right: 0; top: 0; } .nav .filter .toggle.active:after { content: '–'; } .nav .filter-content { display: none; height: auto; margin: 20px 0; position: relative; overflow: hidden; } .nav .filter-content li { padding-right: 1em; } .nav .filter-content-scrollable { height: 300px; } .nav .shipping-promo { font-weight: bold; line-height: 1.2em; padding-right: 1em; width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { .nav .shipping-promo { display: none; } } .categories-title { display: none; /* @include breakpoint(grid-mobile) { border-bottom: 1px solid #f1f1f1; color: #323031; display: block; font-weight: bold; text-decoration: none !important; padding: 15px 3px 13px 13px; i { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #000; float: right; height: 0; margin-right: 20px; width: 0; @include transition(transform 0.6s ease); } &.active i { @include transform(rotate(180deg)); } } */ } .mobile-nav { background: #111; color: #999; display: none; height: 100%; overflow-y: auto; position: fixed; width: 260px; top: 0; left: 0; z-index: 1; } .mobile-nav:after { position: absolute; top: 0; right: 0; width: 0; height: 0; content: ''; opacity: 0; -webkit-transition: opacity .5s,width .1s .5s,height .1s .5s; transition: opacity .5s,width .1s .5s,height .1s .5s; } .mobile-nav.active { display: block; } .mobile-nav a { color: #999; } .mobile-nav a:hover { text-decoration: underline; } .mobile-nav .search { background: #fff; height: 60px; } .mobile-nav .search fieldset { border: 0; height: 60px; line-height: 60px; overflow: hidden; padding-left: 25px; } .mobile-nav .search input[type=text] { border: 0; display: inline-block; float: left; margin: 21px 0 0 0; outline: none; padding: 0; width: 75%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mobile-nav .search button { background: transparent url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_search.png") center center no-repeat; border: 0; color: #111; content: ''; display: inline-block; float: left; line-height: 60px; margin: 0; padding: 0; text-align: center; width: 25%; } .mobile-nav .links { font-size: 24px; padding: 40px 25px 25px 25px; text-transform: uppercase; } .mobile-nav .links a.active { text-decoration: underline; } .mobile-nav .links > ul > li { margin-bottom: 14px; } .mobile-nav .links .categories { display: none; margin-top: 14px; padding-bottom: 20px; } .mobile-nav .links .categories.active { display: block; } .mobile-nav .links .categories > li { margin-bottom: 14px; } .mobile-nav .links .subcategories { display: none; margin-top: 14px; text-transform: none; } .mobile-nav .links .subcategories.active { display: block; } .mobile-nav .links .subcategories a { color: #ccc; } .mobile-nav .links .subcategories > li { margin-bottom: 14px; } .mobile-nav .footer { bottom: 0; padding: 25px 25px 40px 25px; position: relative; text-transform: uppercase; } .mobile-nav .footer ul { margin-bottom: 20px; } .mobile-nav .footer .primary { font-size: 24px; } .mobile-nav .footer .primary > li { margin-bottom: 14px; } .mobile-nav .footer .secondary { font-size: 18px; } .mobile-nav .footer .secondary > li { margin-bottom: 8px; } .mobile-nav .footer p { font-size: 12px; } @media all and (max-width: 980px) and (min-width: 0) { .mobile-container { background: #fff; height: 100%; left: 0; overflow-x: hidden; position: relative; z-index: 1000; width: 100%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 400ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: -moz-transform 400ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: -o-transform 400ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1); } } .mobile-nav-open .mobile-container { overflow: hidden; position: fixed; z-index: 1001; -webkit-transform: translate3d(260px, 0, 0); -moz-transform: translate3d(260px, 0, 0); -ms-transform: translate3d(260px, 0, 0); -o-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0); } #quick_view { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 999; } #quick_view .overlay { background-image: url("../images/quick_view_background.png"); height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 1000; } #quick_view .product { /* min-height: 480px; */ background: #fff; left: 50%; margin: -240px 0 0 -440px; padding: 40px 30px 60px 30px; position: fixed; top: 50%; width: 820px; z-index: 1001; } #quick_view .product .close { background: url("../images/icon_quick_view_close.gif") center center no-repeat; display: block; height: 30px; position: absolute; right: 20px; top: 20px; width: 30px; } #quick_view .product .view_detail { -moz-border-radius: 100px; -webkit-border-radius: 100px; background: #2ae98f; border-radius: 100px; bottom: -30px; color: #fff; display: block; height: 100px; left: 30px; line-height: 100px; position: absolute; text-align: center; text-decoration: none; width: 100px; } #quick_view .product .view_detail:hover { text-decoration: underline; } #quick_view .media { float: left; margin-right: 40px; width: 360px; } #quick_view .media img { display: block; } #quick_view .media .image { float: left; margin-right: 20px; width: 280px; } #quick_view .media .thumbs { float: left; height: 338px; overflow: hidden; width: 60px; } #quick_view .media li { margin-bottom: 10px; } #quick_view .details { float: left; width: 420px; } #quick_view .details h1 { color: #111; font-size: 18px; font-weight: bold; line-height: 1em; margin-bottom: 8px; text-transform: uppercase; } #quick_view .details h2 { color: #333; line-height: 1em; } #quick_view .details h3 { color: #333; line-height: 1em; } #quick_view .details h4 { color: #666; font-size: 13px; line-height: 1em; margin: 30px 0 10px 0; text-transform: none; } #quick_view .details .original_price { color: #999; font-size: 14px; line-height: 1em; margin-bottom: 4px; text-decoration: line-through; } #quick_view .details .phone_order { color: #111; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.4em; margin: 25px 0 30px 0; } #quick_view .details .phone_order a { color: #111; text-decoration: none; } #quick_view .details .phone_order a:hover { text-decoration: underline; } #quick_view .details .buttons-disabled { height: 30px; } #quick_view .details .buttons { margin: 30px 0 40px 0; } #quick_view .details .buttons button { color: #fff; background: #000; border: 0; font-weight: bold; float: left; display: block; line-height: 1em; margin: 0 1px 0 0; padding: 14px 24px; } #quick_view .details .buttons button:first-child { margin-right: 20px; } #quick_view .details .buttons .wishlist { background: #ccc; } #quick_view .options { font-size: 10px; margin: 25px 0 30px 0; text-transform: uppercase; } #quick_view .options > ul { float: left; } #quick_view .options > ul > li > a { background: #fff; border: 1px solid #ebebeb; color: #666; display: block; height: 40px; line-height: 40px; padding-left: 15px; position: relative; text-decoration: none; } #quick_view .options > ul > li > a:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999; content: ''; height: 0; position: absolute; right: 12px; top: 16px; width: 0; } #quick_view .options > ul > li > a.active { background: #ebebeb; } #quick_view .options ul > li { display: block; float: left; margin-right: 20px; position: relative; width: 130px; } #quick_view .options ul > li.disabled { -moz-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; } #quick_view .options ul li ul { border-bottom: 0; display: none; position: absolute; width: 130px; z-index: 1; } #quick_view .options ul li ul li { display: block; width: 130px; } #quick_view .options ul li ul li a { background: #ebebeb; color: #666; display: block; height: 40px; line-height: 40px; padding-left: 16px; text-decoration: none; } #quick_view .options ul li ul li a:hover { background: #d9d9d9; } #quick_view .options .quantity { color: #666; float: left; font-size: 10px; margin: 0; } #quick_view .options .quantity p { float: left; line-height: 40px; margin-right: 10px; } #quick_view .options .quantity fieldset { background: #fff; border: 1px solid #ebebeb; color: #666; height: 40px; float: left; width: 40px; } #quick_view .options .quantity input { background: transparent; border: 0; color: #666; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1em; margin-top: 11px; outline: none; text-align: center; width: 38px; } #quick_view .options .validation-advice { color: #ff3000; padding: 4px 0; } #quick_view .additional ul { margin-bottom: 20px; overflow: hidden; } #quick_view .additional ul .tab { font-weight: bold; } #quick_view .additional ul li { float: left; margin-right: 24px; } #quick_view .additional ul li span { border-bottom: 1px solid #ccc; color: #666; display: block; line-height: 1em; padding: 0 0 3px 0; text-decoration: none; } #quick_view .additional p { color: #666; display: none; font-size: 12px; line-height: 1.4em; } #quick_view .additional p a { color: #666; } #quick_view .additional .description { display: block; } #quick_view_spinner { height: 100px; left: 50%; margin: -50px 0 0 -50px; position: fixed; top: 50%; width: 100px; z-index: 1001; } .customselect-input { background: transparent; cursor: pointer; left: 0; opacity: 0; position: absolute; top: 0; visibility: visible; width: 100%; z-index: 1; } .customselect { background: transparent; cursor: pointer; overflow: hidden; position: relative; width: 100%; } .customselect-disabled { opacity: 0.5; } .customselect-feedback { display: inline-block; overflow: hidden; text-overflow: ellipsis; } .customselect-button { position: absolute; } .contest-form { /* .complete a { background: $need-primary; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; color: #fff; display: inline-block; height: 100px; font-size: 16px; line-height: 100px; margin-bottom: 1em; text-align: center; text-decoration: none; width: 100px; } .complete a:hover { text-decoration: underline; } */ } .contest-form fieldset { margin-bottom: 1.4em; } .contest-form input[type=text] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #111; outline: none; padding: 6px; width: 75%; } .contest-form button { background: #000; border: 0; color: #fff; font-size: 14px; font-weight: bold; line-height: 1em; padding: 12px 24px; text-transform: uppercase; } .contest-form fieldset input.validation-failed { border-color: #ff3000; } .contest-form .newsletter { display: inline-block; margin-right: 12px; } .contest-form .complete { padding: 0 12.5%; } #contest { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99999; } @media all and (max-width: 980px) and (min-width: 0) { #contest { display: none; } } #contest_spinner { height: 100px; left: 50%; margin: -50px 0 0 -50px; position: fixed; top: 50%; width: 100px; z-index: 1001; } #contest .overlay { width: 100%; height: 100%; background-image: url("../images/newsletter_background.png"); position: fixed; top: 0; left: 0; overflow: hidden; z-index: 1000; } #contest .contest-container { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); background: #fff; color: #111; font-size: 14px; height: 600px; left: 50%; margin: -300px 0 0 -530px; overflow: hidden; position: fixed; top: 50%; width: 1060px; z-index: 1002; } @media all and (max-width: 1240px) { #contest .contest-container { height: 525px; margin: -262px 0 0 -480px; width: 960px; } } #contest .close { color: #111; display: block; float: right; letter-spacing: 1px; position: absolute; right: 15px; text-align: right; top: 15px; text-transform: uppercase; } #contest .contest-image { float: left; width: 480px; } @media all and (max-width: 1240px) { #contest .contest-image { width: 430px; } } #contest .contest-image img { display: block; height: auto; width: 100%; } #contest .contest-details { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); float: left; position: relative; top: 50%; width: 578px; text-align: center; z-index: 1003; } @media all and (max-width: 1240px) { #contest .contest-details { width: 528px; } } #contest .contest-details h1 { border: 0; color: #111; font-size: 18px; font-weight: bold; line-height: 1.4em; margin: 0; padding: 0; text-transform: uppercase; } #contest .contest-details h2 { font-size: 18px; margin: 0 0 1em 0; text-transform: uppercase; } #contest .contest-details p { line-height: 1.4em; margin-bottom: 1.2em; padding: 0 5%; } #contest .contest-details a { color: #111; text-decoration: underline; } #contest .contest-details strong { font-weight: bold; } #contest .contest-details form { padding: 10px 0 0 0; } #contest .contest-details .field-group { margin-bottom: 2.8em; } #contest .contest-details .field-group table { line-height: normal; margin: 0 auto; position: relative; width: 75%; } #contest .contest-details .field-group fieldset { margin-bottom: 0; } #contest .contest-details .field-group .validation-advice { bottom: -28px; left: 0; position: absolute; width: 100%; } #contest .contest-details .field-group-input { border: 1px solid #111; line-height: normal; margin: 0; padding: 0; vertical-align: middle; width: 80%; } #contest .contest-details .field-group-input input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 0; display: block; padding: 4px 10px; width: 100%; } #contest .contest-details .field-group-button { background: #111; border: 1px solid #111; line-height: normal; margin: 0; padding: 0; vertical-align: middle; width: 20%; } #contest .contest-details .field-group-button button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: transparent; display: block; padding: 10px; width: 100%; } #contest .contest-details .disclaimer { margin: 0 auto; width: 75%; } #contest .contest-details .grand-prize { margin-bottom: 0.8em; } #contest .contest-details .logos { margin-bottom: 20px; text-align: center; } #contest .contest-details .logos li { display: inline-block; margin: 0 15px; vertical-align: middle; } @media all and (max-width: 980px) and (min-width: 0) { #contest .contest-details .logos li { margin: 10px; } } #contest-page .content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 18px; padding: 130px 10px; text-align: center; } #contest-page strong { font-weight: bold; } #contest-page img { display: inline-block; margin: 20px 0 40px 0; max-width: 100%; } #contest-page h1 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #contest-page p { line-height: 1.6em; margin: 0 auto 1.6em auto; width: 800px; } @media all and (max-width: 980px) and (min-width: 0) { #contest-page p { width: 100%; } } #contest-page p a { color: #111; font-weight: bold; text-decoration: underline; } #contest-page .description { width: 500px; } @media all and (max-width: 980px) and (min-width: 0) { #contest-page .description { width: 100%; } } #contest-page .contest-share li { display: inline-block; } #contest-page .contest-share-icon { background-position: center center; background-repeat: no-repeat; display: inline-block; height: 20px; padding: 0 10px; width: 20px; } #contest-page .complete a { color: #fff; text-decoration: none; } #contest-page .contest-form { font-size: 18px; margin-bottom: 40px; } #contest-page .contest-form input[type=text] { max-width: 430px; } @media all and (max-width: 980px) and (min-width: 0) { #contest-page .contest-form input[type=text] { max-width: 100%; } } #contest-page .contest-form .newsletter { margin-right: 18px; } #go-explore a { color: #111; text-decoration: underline; } #go-explore strong { font-weight: bold; } #go-explore strong.underline { text-decoration: underline; } #go-explore .contest-share li { display: inline-block; } #go-explore .contest-share-icon { background-position: center center; background-repeat: no-repeat; display: inline-block; height: 20px; padding: 0 10px; width: 20px; } #go-explore .contest-tab { -webkit-border-radius: 115px; -moz-border-radius: 115px; -ms-border-radius: 115px; -o-border-radius: 115px; border-radius: 115px; background: #fff; font-size: 14px; font-weight: bold; height: 115px; left: 50%; margin-left: -57px; position: absolute; top: -57px; width: 115px; z-index: 0; } #go-explore .contest-tab span { display: inline-block; padding-top: 2em; } #go-explore .social-share { display: inline-block; font-size: 18px; margin-bottom: 30px; } #go-explore .social-share strong { display: inline-block; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .social-share strong { margin-bottom: 1em; } } #go-explore .social-share .contest-share { display: none; margin-top: 1em; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .social-share .contest-share { display: block; } } #go-explore .header { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url("../images/go-explore/header.jpg"); background-position: center center; background-repeat: no-repeat; height: 900px; } @media all and (max-width: 1240px) { #go-explore .header { height: 600px; } } #go-explore .header-content { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #fff; margin: 0 auto; position: relative; text-align: center; top: 50%; width: 50%; } @media all and (max-width: 1240px) { #go-explore .header-content { width: 60%; } } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .header-content { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } } #go-explore .header-content h1 { font-size: 48px; font-weight: bold; margin-bottom: 30px; } @media all and (max-width: 1240px) { #go-explore .header-content h1 { font-size: 36px; } } #go-explore .header-content p { font-size: 24px; line-height: 1.4em; margin-bottom: 30px; } @media all and (max-width: 1240px) { #go-explore .header-content p { font-size: 18px; } } #go-explore .header-content .links { font-size: 18px; text-align: center; padding-top: 15px; } @media all and (max-width: 1240px) { #go-explore .header-content .links { font-size: 14px; } } #go-explore .header-content .links li { display: inline-block; margin: 0 9px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .header-content .links li { display: block; margin: 10px 0; } } #go-explore .header-content .links a { border: 1px solid #fff; color: #fff; display: inline-block; padding: 1em 2em; text-decoration: none; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .header-content .links a { width: 50%; } } #go-explore .header-content .links a:hover { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .header-content .links a:hover { text-decoration: none; } } #go-explore .contest-one { padding: 80px 0 130px 0; position: relative; text-align: center; } #go-explore .contest-one h2 { font-size: 36px; font-weight: bold; margin-bottom: 30px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one h2 { font-size: 24px; } } #go-explore .contest-one h3 { font-size: 36px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one h3 { font-size: 24px; } } #go-explore .contest-one .grand-prize { margin: 80px 0; padding: 0 12.5%; position: relative; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one .grand-prize { margin: 40px 0; padding: 0; } } #go-explore .contest-one .grand-prize-image { height: 0; padding-top: 67.4%; position: relative; } #go-explore .contest-one .grand-prize-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #go-explore .contest-one .grand-prize-details { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background: #fff; font-size: 18px; line-height: 1.6em; margin-left: -22.5%; padding: 70px; position: absolute; text-align: center; top: 50%; left: 50%; width: 45%; } @media all and (min-width: 1480px) { #go-explore .contest-one .grand-prize-details { font-size: 24px; } } @media all and (max-width: 1240px) { #go-explore .contest-one .grand-prize-details { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin: 0; padding-bottom: 0; position: static; width: 100%; } } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one .grand-prize-details { padding: 40px 10px; } } #go-explore .contest-one .logos { margin-bottom: 60px; text-align: center; } #go-explore .contest-one .logos li { display: inline-block; margin: 0 30px; vertical-align: middle; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one .logos li { margin: 10px; } } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one .logos .spacer { display: none; } } #go-explore .contest-one .second-place { font-size: 18px; line-height: 1.6em; margin-bottom: 30px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one .second-place { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #go-explore .contest-one .third-place { font-size: 18px; line-height: 1.6em; margin-bottom: 60px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one .third-place { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #go-explore .contest-one .contest-form { font-size: 18px; margin-bottom: 40px; } #go-explore .contest-one .contest-form input[type=text] { max-width: 430px; padding: 10px 6px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-one .contest-form input[type=text] { max-width: 100%; } } #go-explore .contest-one .contest-form button { font-size: 18px; text-transform: uppercase; } #go-explore .contest-one .contest-form .newsletter { margin-right: 18px; } #go-explore .contest-one .disclaimer { line-height: 1.4em; } #go-explore .contest-two-container { background: #ececec; } #go-explore .contest-two-wrapper { overflow: hidden; } #go-explore .contest-two { min-height: 672px; padding: 80px 0; position: relative; text-align: center; } #go-explore .contest-two .contest-tab { background: #ececec; } #go-explore .contest-two .instagram-image { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); position: absolute; bottom: 0; left: 50%; margin-left: -80px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-two .instagram-image { display: none; } } #go-explore .contest-two .instagram-image img { display: block; } #go-explore .contest-two .instagram-details { float: right; position: relative; text-align: left; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-two .instagram-details { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; text-align: center; } } #go-explore .contest-two h2 { font-size: 24px; font-weight: bold; margin-bottom: 30px; } @media all and (min-width: 1480px) { #go-explore .contest-two h2 { font-size: 36px; } } #go-explore .contest-two .description { font-size: 18px; line-height: 1.6em; margin-bottom: 30px; } @media all and (min-width: 1480px) { #go-explore .contest-two .description { font-size: 24px; } } #go-explore .contest-two ol { font-size: 18px; line-height: 1.6em; list-style: decimal; margin-bottom: 30px; } @media all and (min-width: 1480px) { #go-explore .contest-two ol { font-size: 24px; } } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-two ol { list-style: none; } } #go-explore .contest-two ol li { margin-left: 32px; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-two ol li { margin: 0 0 10px 0; } } #go-explore .contest-two ol a { text-decoration: none; } #go-explore .contest-two ol a:hover { text-decoration: underline; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-two ol a:hover { text-decoration: none; } } #go-explore .contest-two .contest-share-icon { padding: 0 20px 0 0; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .contest-two .contest-share-icon { padding: 0 10px; } } #go-explore .contest-two .disclaimer { margin-bottom: 30px; } #go-explore .contest-two .logos li { display: inline-block; margin: 0 20px 0 0; vertical-align: middle; } #go-explore .the-explorists { padding: 80px 0; } #go-explore .the-explorists h2 { font-size: 36px; font-weight: bold; margin-bottom: 40px; text-align: center; } #go-explore .the-explorists .description { font-size: 24px; line-height: 1.4em; margin: 0 auto 80px auto; text-align: center; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .the-explorists .description { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } } #go-explore .the-explorists .stories { text-align: center; } #go-explore .the-explorists .stories li { display: inline-block; width: 270px; padding: 10px 10px 20px 10px; vertical-align: top; } #go-explore .the-explorists .stories a { color: #222; display: block; text-decoration: none; } #go-explore .the-explorists .stories img { display: block; height: 196px; margin-bottom: 20px; width: 270px; } #go-explore .the-explorists .placeholder { background: whitesmoke url("../images/go-explore/explorists-seal.png") center center no-repeat; height: 196px; margin-bottom: 20px; width: 270px; } #go-explore .the-explorists .placeholder span { color: #888; display: inline-block; font-size: 18px; line-height: 196px; text-align: center; } #go-explore .the-explorists h5 { font-size: 16px; line-height: 1.2em; } #go-explore .the-explorists h6 { font-size: 16px; font-weight: bold; } #go-explore .the-explorists blockquote { font-size: 24px; line-height: 1.4em; margin: 0 auto; padding: 60px 0; text-align: center; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .the-explorists blockquote { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 40px; padding-top: 20px; width: 100%; } } #go-explore .the-explorists blockquote cite { display: inline-block; margin-top: 1em; } #go-explore .the-explorists .contest-share { text-align: center; } #go-explore .the-explorists .contest-share-icon { height: 40px; width: 40px; } @media all and (min-width: 1480px) { #go-explore .the-explorists .stories li, #go-explore .the-explorists .stories img, #go-explore .the-explorists .stories .placeholder { height: auto; width: 290px; } #go-explore .the-explorists .stories .placeholder span { line-height: 210px; } } @media all and (max-width: 980px) and (min-width: 0) { #go-explore .the-explorists a:hover { text-decoration: none !important; } } #category .go-explore-link { margin-bottom: 20px; text-align: center; } #category .go-explore-link img { display: inline-block; } #general { margin: 0 0 60px 0; } #general a { text-decoration: none; } #general a:hover { text-decoration: underline; } #general h1 { border-bottom: 1px solid #ccc; color: #8d8d8d; font-size: 16px; font-weight: bold; margin: 40px 10px; padding: 0 0 10px 0; text-transform: uppercase; } #general .sections { color: #666; float: left; width: 12.5%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #general .sections { float: none; margin: 40px 0; width: auto; } } #general .sections h3 { color: #111; font-size: 13px; margin-bottom: 20px; } #general .sections li { font-size: 13px; line-height: 1.8em; } #general .sections li a { color: #666; text-decoration: none; } #general .sections li a:hover { text-decoration: underline; } #general .content { color: #111; float: left; width: 87.5%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #general .content { float: none; width: auto; } } #general .content a { color: #000; } #general .content h2 { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 60px; line-height: 76px; } #general .content h3 { font-size: 24px; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; margin-bottom: 25px; } #general .content h4 { font-size: 16px; margin-bottom: 18px; } #general .content p { line-height: 1.6em; margin-bottom: 25px; } @media all and (max-width: 980px) and (min-width: 0) { #general .content p { word-wrap: break-word; } } #general .content ul { line-height: 1.6em; list-style: disc; margin-bottom: 30px; } #general .content ul li { margin-bottom: 1em; margin-left: 24px; padding: 0; } #general .content ul a { text-decoration: underline; } #general .content ol { line-height: 1.6em; list-style: decimal; margin-bottom: 1em; } #general .content ol.lower-alpha { list-style: lower-alpha; } #general .content ol li { margin-bottom: 1em; margin-left: 24px; padding: 0; } #general .content ol p { line-height: 1.6em; margin-bottom: 1em; } #general .content ol ol { list-style: lower-alpha; } #general .content ol a { text-decoration: underline; } #general .content blockquote p { padding-left: 18px; } #general .content ul { line-height: 1.6em; list-style: disc; margin-bottom: 1em; } #general .content ul > ul, #general .content ul > ol { margin-bottom: 24px; } #general .content .last { margin: 0; } #general .content table { margin-bottom: 25px; width: 100%; } #general .content table td { padding: 10px; width: 33%; } #general .content table .odd td { background-color: #eaeaea; } #general hr { background-color: #d5d5d5; border: 0; height: 1px; margin-bottom: 25px; } #about .header { background: url("../images/about_header.jpg") center center no-repeat; height: 500px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media all and (max-width: 980px) and (min-width: 0) { #about .header { height: auto; padding-top: 45%; } } #about .content { text-align: center; margin: 0 auto; padding: 130px 10px; width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { #about .content { width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 60px; padding-bottom: 60px; } } #about h1 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #about p { font-size: 18px; line-height: 1.6em; margin-bottom: 1.6em; } #about p:last-child { margin: 0; } #about .images { display: table; overflow: hidden; padding: 100px 0 130px 0; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #about .images { display: block; padding: 0 0 30px 0; } } #about .images li { display: table-cell; padding: 30px; text-align: center; vertical-align: middle; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #about .images li { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #about .images img { display: inline-block; max-width: 100%; } .account-login { color: #666; font-size: 13px; padding-bottom: 60px; overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { .account-login { width: 100%; } } .account-login a { color: #666; text-decoration: none; } .account-login a:hover { text-decoration: underline; } .account-login p { line-height: 1.4em; margin-bottom: 20px; width: 400px; } @media all and (max-width: 980px) and (min-width: 0) { .account-login p { width: 100%; } } .account-login p.required { display: none; } @media all and (max-width: 980px) and (min-width: 0) { .account-login form { margin: 0 10px; } } @media all and (max-width: 980px) and (min-width: 0) { .account-login .new-users { margin-top: 40px; } } .account-login .new-users p { margin: 0; } .account-login .form-list { width: 340px; } @media all and (max-width: 980px) and (min-width: 0) { .account-login .form-list { width: 100%; } } .account-login .form-list li em { display: none; } .account-login .form-list input[type=text], .account-login .form-list input[type=tel], .account-login .form-list input[type=email], .account-login .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .account-login .form-list input[type=text], .account-login .form-list input[type=tel], .account-login .form-list input[type=email], .account-login .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .account-login .note { float: right; line-height: 46px; padding-top: 20px; } .account-login .buttons-set { padding-top: 20px; } .account-create { color: #666; font-size: 13px; margin: 0 auto; padding-bottom: 60px; overflow: hidden; width: 1200px; } @media all and (min-width: 1480px) { .account-create { width: 1440px; } } @media all and (max-width: 1240px) { .account-create { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .account-create { width: 100%; } } .account-create a { color: #666; text-decoration: none; } .account-create a:hover { text-decoration: underline; } .account-create form { margin: 0 10px; } .account-create .fieldset { width: 100%; } .account-create .divider { height: 20px; } .account-create .form-list input[type=text], .account-create .form-list input[type=tel], .account-create .form-list input[type=email], .account-create .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .account-create .form-list input[type=text], .account-create .form-list input[type=tel], .account-create .form-list input[type=email], .account-create .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .account-create .buttons-set { margin-top: 20px; } .account-create p.required { clear: both; margin-top: 20px; } .customer-account-logoutsuccess .main { margin: 0 auto; width: 1200px; } @media all and (min-width: 1480px) { .customer-account-logoutsuccess .main { width: 1440px; } } @media all and (max-width: 1240px) { .customer-account-logoutsuccess .main { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .customer-account-logoutsuccess .main { width: 100%; } } .customer-account-logoutsuccess .main p { padding: 0 10px 60px 10px; } .customer-account-forgotpassword .main { margin: 0 auto; width: 1200px; } @media all and (min-width: 1480px) { .customer-account-forgotpassword .main { width: 1440px; } } @media all and (max-width: 1240px) { .customer-account-forgotpassword .main { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .customer-account-forgotpassword .main { width: 100%; } } .customer-account-forgotpassword .main form { margin: 0 10px 60px 10px; } .customer-account-forgotpassword .main .fieldset { width: 100%; } .customer-account-forgotpassword .main .fieldset p { margin-bottom: 20px; } .customer-account-forgotpassword .main .form-list input[type=text], .customer-account-forgotpassword .main .form-list input[type=tel], .customer-account-forgotpassword .main .form-list input[type=email], .customer-account-forgotpassword .main .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .customer-account-forgotpassword .main .form-list input[type=text], .customer-account-forgotpassword .main .form-list input[type=tel], .customer-account-forgotpassword .main .form-list input[type=email], .customer-account-forgotpassword .main .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .customer-account-forgotpassword .main .buttons-set { margin-top: 20px; } .customer-account-forgotpassword .main p.required { clear: both; margin-top: 20px; } .customer-account-resetpassword .magento { margin: 0 auto; width: 1200px; } @media all and (min-width: 1480px) { .customer-account-resetpassword .magento { width: 1440px; } } @media all and (max-width: 1240px) { .customer-account-resetpassword .magento { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .customer-account-resetpassword .magento { width: 100%; } } .customer-account-resetpassword .magento form { margin: 0 10px 60px 10px; } .customer-account-resetpassword .magento .fieldset { margin-top: 0 !important; width: 100%; } .customer-account-resetpassword .magento .fieldset p { margin-bottom: 20px; } .customer-account-resetpassword .magento .form-list input[type=text], .customer-account-resetpassword .magento .form-list input[type=tel], .customer-account-resetpassword .magento .form-list input[type=email], .customer-account-resetpassword .magento .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .customer-account-resetpassword .magento .form-list input[type=text], .customer-account-resetpassword .magento .form-list input[type=tel], .customer-account-resetpassword .magento .form-list input[type=email], .customer-account-resetpassword .magento .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .customer-account-resetpassword .magento .buttons-set { margin-top: 20px; } .customer-account-resetpassword .magento p.required { clear: both; margin-top: 20px; } .customer-account-index .dashboard .welcome-msg h2 { color: #666; font-size: 18px; margin-top: 0; } .customer-account-index .dashboard .welcome-msg p { line-height: 1.4em; } .customer-account-index .col2-set .col-1, .customer-account-index .col2-set .col-2 { margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .customer-account-index .col2-set .col-1, .customer-account-index .col2-set .col-2 { width: 100%; } } .my-account { font-size: 13px; } .my-account a { color: #111; } .my-account c { margin: 0 0 30px 0; } @media all and (max-width: 980px) and (min-width: 0) { .my-account .buttons-set { margin-top: 30px; } } .customer-account-edit .form-list input[type=text], .customer-account-edit .form-list input[type=tel], .customer-account-edit .form-list input[type=email], .customer-account-edit .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .customer-account-edit .form-list input[type=text], .customer-account-edit .form-list input[type=tel], .customer-account-edit .form-list input[type=email], .customer-account-edit .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .customer-account-edit .buttons-set { margin-top: 20px; } .customer-account-edit p.required { clear: both; margin-top: 20px; } .customer-address-index .page-title { position: relative; } .customer-address-index .page-title button { background: #111; border: 0; color: #fff; display: block; float: left; line-height: 1em; margin-right: 1px; padding: 4px 24px; position: absolute; right: 0; text-decoration: none; top: -4px; } .customer-address-index h2.sub-title { margin-top: 0; } .customer-address-index .col2-set .col-1, .customer-address-index .col2-set .col-2 { margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .customer-address-index .col2-set .col-1, .customer-address-index .col2-set .col-2 { width: 100%; } } .customer-address-index .info-box { margin-bottom: 30px; } .customer-address-index address { line-height: 1.4em; } .customer-address-index .item .actions { padding-top: 1em; } .customer-address-form .form-list input[type=text], .customer-address-form .form-list input[type=tel], .customer-address-form .form-list input[type=email], .customer-address-form .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .customer-address-form .form-list input[type=text], .customer-address-form .form-list input[type=tel], .customer-address-form .form-list input[type=email], .customer-address-form .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .customer-address-form .buttons-set { margin-top: 20px; } .customer-address-form p.required { clear: both; margin-top: 20px; } #my-orders-table { margin-bottom: 20px; } #my-orders-table tr th:nth-child(3), #my-orders-table tr td:nth-child(3) { text-align: left; } .order-page .col2-set .col-1, .order-page .col2-set .col-2 { margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .order-page .col2-set .col-1, .order-page .col2-set .col-2 { width: 100%; } } .order-page .info-box { margin-bottom: 30px; } .order-page .title-buttons { position: relative; } .order-page .title-buttons a, .order-page .title-buttons .separator { display: none; } .order-info { margin-bottom: 30px; } .order-info dt { color: #111; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px; } .order-info dd ul { overflow: hidden; } .order-info dd ul li { color: #666; float: left; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; padding-right: 10px; } .order-info dd ul li a { color: #666; display: block; } .order-date { margin-bottom: 20px; } .sales-order-view h2.table-caption { margin-top: 0; } .order-links a { color: #111; } .order-items p.a-right { display: none; } .order-items .data-table { margin-bottom: 30px; } .order-items .data-table th, .order-items .data-table .a-center, .order-items .data-table td { text-align: left; line-height: 1.4em; } .order-items .data-table .nobr { white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { .order-items .data-table .nobr { white-space: normal; } } .order-items tfoot .a-right { padding: 5px 15px; } @media all and (max-width: 980px) and (min-width: 0) { .order-items tfoot .a-right { padding: 5px 0; } } .order-items .item-options dt { margin-top: 6px; } .order-additional { line-height: 1.4em; margin-bottom: 20px; } .billing-agreements .info-box { margin: 30px 0; } .recurring-profiles div { margin: 0 0 30px 0; } .newsletter-manage-index .buttons-set { margin-top: 30px; } #customerbalance-history th, #customerbalance-history td { text-align: left; } #gc-please-wait { display: block; margin-bottom: 20px; overflow: hidden; } #gc-please-wait img { padding-right: 6px; } #gc-please-wait * { vertical-align: middle; } #giftcard_balance_lookup .gift-card-info, #giftcard_balance_lookup .error-msg { line-height: 1.4em; margin-bottom: 20px; } #giftcard-form #giftcard_code { background: #e5e5e5; border: 0; color: #111; padding: 5px; width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { #giftcard-form #giftcard_code { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #giftcard-form .buttons-set { margin-top: 30px; } #giftcard-form .buttons-set button { margin-right: 1px; } #invitations-list-table { margin-bottom: 30px; } #invitations-list-table th, #invitations-list-table td { text-align: left; } #invitationForm .form-list input[type=text], #invitationForm .form-list input[type=tel], #invitationForm .form-list input[type=email], #invitationForm .form-list input[type=password], #invitationForm .form-list textarea { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { #invitationForm .form-list input[type=text], #invitationForm .form-list input[type=tel], #invitationForm .form-list input[type=email], #invitationForm .form-list input[type=password], #invitationForm .form-list textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #invitationForm .buttons-set { margin-top: 20px; } #invitationForm p.required { clear: both; margin-top: 20px; } .page-popup .page-title { overflow: hidden; position: relative; } .page-popup .page-title button { background: #111; border: 0; color: #fff; display: block; float: left; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1em; margin-right: 1px; padding: 4px 24px; position: absolute; right: 10px; text-decoration: none; top: 36px; } .page-popup .sub-title { margin: 0 10px; } .page-popup .table-wrapper { margin: 0 10px; } .tracking-table-popup th, .tracking-table-popup td { text-align: left; } .tracking-table-popup .label { border: 0; } .page-popup .buttons-set { margin-top: 30px; } .page-print { line-height: 1.4em; margin: 20px; } .page-print * { font-size: 12px; } .page-print .print-head { margin-bottom: 10px; } .page-print h1 { margin-bottom: 2px; } .page-print h2 { margin-bottom: 10px; } .page-print h3 { margin-bottom: 10px; } .page-print .col2-set { float: left; margin-bottom: 20px; width: 100%; } .page-print .col2-set .col-1, .page-print .col2-set .col-2 { float: left; margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .page-print .col2-set .col-1, .page-print .col2-set .col-2 { float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media all and (max-width: 980px) and (min-width: 0) { .page-print .col2-set .col-2 { margin-top: 20px; } } .page-print .data-table { margin-bottom: 20px; width: 100%; } .page-print .data-table a { color: #000; } .page-print .data-table th, .page-print .data-table .a-center, .page-print .data-table td { line-height: 1.4em; text-align: left; } @media all and (max-width: 980px) and (min-width: 0) { .page-print .data-table th, .page-print .data-table .a-center, .page-print .data-table td { padding: 4px 0; } } .page-print .data-table td { padding: 5px 15px; } @media all and (max-width: 980px) and (min-width: 0) { .page-print .data-table td { padding: 5px 0; } } .page-print .data-table .nobr { white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { .page-print .data-table .nobr { white-space: normal; } } /* CIM */ .authnetcim-manage-index { /*.messages { background: #fff; margin: 0; padding: 30px 0; .success-msg, .error-msg { margin: 0 auto; width: 1200px; @include breakpoint(grid-1440) { width: 1440px; } @include breakpoint(grid-960) { width: 960px; } @include breakpoint(grid-mobile) { min-width: 320px; width: 100%; } li { margin: 0 10px; } } }*/ } .authnetcim-manage-index .col2-set .col-1, .authnetcim-manage-index .col2-set .col-2 { font-size: 14px; margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .authnetcim-manage-index .col2-set .col-1, .authnetcim-manage-index .col2-set .col-2 { width: 100%; } } .authnetcim-manage-index .col2-set h2 { color: #111; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 30px; } .authnetcim-manage-index .col2-set h3 { color: #666; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; } .authnetcim-manage-index .col2-set h4 { color: #666; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 20px; } .authnetcim-manage-index .col2-set ol .item { margin-bottom: 30px; } .authnetcim-manage-index .col2-set ol address { margin-top: 20px; } .authnetcim-manage-index .col2-set .form-list { overflow: hidden; width: 100% !important; } .authnetcim-manage-index .col2-set .form-list li { float: left; display: block; width: 100%; } .authnetcim-manage-index .col2-set .form-list input[type=text], .authnetcim-manage-index .col2-set .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { .authnetcim-manage-index .col2-set .form-list input[type=text], .authnetcim-manage-index .col2-set .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .authnetcim-manage-index .col2-set .form-list label { display: inline-block; } .authnetcim-manage-index .col2-set select { margin: 0; width: 340px; } @media all and (max-width: 980px) and (min-width: 0) { .authnetcim-manage-index .col2-set select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .authnetcim-manage-index .col2-set .buttons-set { padding-top: 20px; } .authnetcim-manage-index .col2-set button { background: #111; border: 0; color: #fff; display: block; float: left; font-weight: bold; line-height: 1em; margin: 0; padding: 14px 24px; text-decoration: none; } .authnetcim-manage-index .col2-set abbr { background: #fcc; border: 0; color: #111; display: block; float: left; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1em; margin: 0; padding: 7px 12px; text-decoration: none; } .authnetcim-manage-index .col2-set .buttons-set-card { overflow: hidden; padding-top: 6px; } .authnetcim-manage-index .col2-set .buttons-set-card button { background: #e5e5e5; color: #666; font-size: 14px; margin-right: 1px; padding: 7px 12px; } .authnetcim-manage-index .col2-set a.back-link { background: #e5e5e5; border: 0; color: #666; display: block; float: left; font-weight: bold; line-height: 1em; margin-left: 1px; padding: 14px 24px; text-decoration: none; } #authnetcim_cc_type_exp_div .v-fix { margin-bottom: 10px; } #affiliates .content { text-align: center; margin: 0 auto; padding: 130px 10px; width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { #affiliates .content { width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 60px; padding-bottom: 60px; } } #affiliates h1 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #affiliates p { font-size: 18px; line-height: 1.6em; margin-bottom: 1.6em; } #affiliates p:last-child { margin: 0; } #affiliates .images { display: table; overflow: hidden; padding: 100px 0 130px 0; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #affiliates .images { display: block; padding: 0 0 30px 0; } } #affiliates .images li { display: table-cell; padding: 10px; text-align: center; vertical-align: middle; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #affiliates .images li { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #affiliates .images img { display: inline-block; max-width: 100%; } #affiliates ol { padding-bottom: 30px; text-align: center; } #affiliates ol li { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #affiliates .button { font-size: 18px; padding: 1em 4em; } #cart { margin: 0 0 60px 0; overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { #cart { margin: 0 0 20px 0; } } #cart a { text-decoration: none; } #cart a:hover { text-decoration: underline; } #cart h1 { border-bottom: 1px solid #ccc; color: #8d8d8d; font-size: 16px; font-weight: bold; margin: 40px 10px; padding: 0 0 10px 0; text-transform: uppercase; } @media all and (max-width: 980px) and (min-width: 0) { #cart h1 { color: #000; margin: 0 10px; padding: 20px 10px; } } #cart .messages { border-bottom: 1px solid #ccc; margin: 0 10px 10px 10px; padding-bottom: 20px; } #cart .messages .success-msg { color: #2ae98f; font-size: 36px; font-weight: bold; line-height: 68px; } @media all and (max-width: 980px) and (min-width: 0) { #cart .messages .success-msg { font-size: 20px; line-height: 1em; } } #cart .messages .error-msg { color: #ff3000; font-size: 36px; font-weight: bold; line-height: 68px; } @media all and (max-width: 980px) and (min-width: 0) { #cart .messages .error-msg { font-size: 20px; line-height: 1em; } } #cart form { font-size: 13px; margin: 0 10px; padding-top: 20px; } #cart .data-table th { color: #333; font-size: 12px; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; } #cart .data-table td { vertical-align: middle; } #cart .data-table .image { width: 220px; text-align: left; } #cart .data-table .product-name { text-align: left; } #cart .data-table .product-name h2 { font-size: 14px; margin-bottom: 6px; } #cart .data-table .product-name h2 a { color: #111; } #cart .data-table .product-name .item-options { color: #666; font-size: 12px; } #cart .data-table .product-name .item-msg { color: #ff3000; font-size: 12px; margin-top: 8px; width: 65%; } #cart .data-table .product-name .edit { font-size: 12px; margin-top: 8px; } #cart .data-table .subtotal { text-align: right; } #cart .data-table input.qty { border: 1px solid #ccc; font-size: 13px; text-align: center; } #cart .data-table tfoot td { overflow: hidden; } #cart .data-table .mobile-label { display: none; } @media all and (max-width: 980px) and (min-width: 0) { #cart .data-table { border-collapse: collapse; line-height: 1.2em; } #cart .data-table thead, #cart .data-table tfoot { display: none; } #cart .data-table tbody tr { background: transparent; border-bottom: 1px solid #ccc; display: block; float: left; margin-bottom: 20px; overflow: hidden; padding-bottom: 20px; width: 100%; } #cart .data-table tbody td { display: block; padding: 0 0 2px 0; text-align: left; width: auto; } #cart .data-table .subtotal { text-align: left; } #cart .data-table .image { float: left; margin-right: 20px; width: auto; } #cart .data-table .product-name h2 { margin-bottom: 2px; } #cart .data-table .product-name .item-options { padding-bottom: 6px; } #cart .data-table .product-name .item-msg { padding-bottom: 6px; width: 100%; } #cart .data-table .btn-remove, #cart .data-table .edit, #cart .data-table input[type=checkbox] { display: none; } #cart .data-table .quantity { padding: 5px 0; } #cart .data-table .link-remove { color: #000; display: block; padding-top: 6px; text-decoration: underline; } #cart .data-table .mobile-label { display: inline; } } #cart .btn-update { background: transparent; border: 0; font-size: 12px; float: right; margin: 12px 0; } #cart .continue-shopping { float: left; margin: 30px 10px 0 10px; } @media all and (max-width: 980px) and (min-width: 0) { #cart .continue-shopping { float: none; margin: 10px; } } #cart .continue-shopping button { background: #e5e5e5; border: 0; color: #666; display: block; font-weight: bold; line-height: 1em; margin-right: 1px; padding: 14px 24px; text-decoration: none; } @media all and (max-width: 980px) and (min-width: 0) { #cart .continue-shopping button { padding: 14px 10px; text-align: left; width: 100%; } } #cart .totals { float: right; margin: 30px 10px 0 10px; } @media all and (max-width: 980px) and (min-width: 0) { #cart .totals { float: none; margin: 0 10px; position: relative; } } #cart .totals button { background: #111; border: 0; color: #fff; display: block; float: right; font-weight: bold; line-height: 1em; margin: 0; padding: 14px 24px; text-decoration: none; } @media all and (max-width: 980px) and (min-width: 0) { #cart .totals button { float: none; padding: 14px 10px; text-align: left; width: 100%; } } #cart .checkout-types { margin-top: 20px; } @media all and (max-width: 980px) and (min-width: 0) { #cart .checkout-types { margin-top: 0; } } #cart .checkout-types li { overflow: hidden; } #cart .crosssell { margin: 40px 0 20px 0; overflow: hidden; } #cart .crosssell h2 { font-size: 14px; margin: 0 10px 20px 10px; } #cart .crosssell .product { color: #666; float: left; font-size: 12px; margin: 0 10px; overflow: hidden; position: relative; width: 220px; } #cart .crosssell .product .image { position: relative; width: 220px; } #cart .crosssell .product .image img { display: block; width: 220px; } #cart .crosssell .product h3 { color: #333; line-height: 1.2em; margin-top: 12px; } #cart .crosssell .product h3 a { color: #333; } #cart .crosssell .product h4 { line-height: 1.2em; margin-top: 6px; } #cart .crosssell .product h4 a { color: #666; } #cart .crosssell .product .colors { color: #2ae98f; white-space: nowrap; } #cart .crosssell .product .buttons { margin-top: 15px; } #cart .crosssell .product button { background: #000; border: 0; color: #fff; display: block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1em; margin: 0 1px 0 0; padding: 14px 24px; } @media all and (min-width: 1480px) { #cart .crosssell .fifth { display: block; } } @media all and (max-width: 1240px) { #cart .crosssell .fifth { display: none; } } #cart .crosssell .sixth { display: none; } @media all and (min-width: 1480px) { #cart .crosssell .sixth { display: block; } } #cart .empty { margin: 0 10px 60px 10px; } #cart .empty h2 { color: #f2f2f2; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 144px; line-height: 118px; margin-bottom: 30px; text-transform: uppercase; } @media all and (max-width: 980px) and (min-width: 0) { #cart .empty h2 { font-size: 60px; line-height: 1em; margin: 20px 0 30px 0; } } #cart .empty p { font-size: 12px; margin-top: 10px; } #cart .empty p a { color: #111; text-decoration: underline; } #shopping-cart-totals-table { font-size: 13px; width: 220px; } @media all and (max-width: 980px) and (min-width: 0) { #shopping-cart-totals-table { margin-bottom: 20px; width: 100%; } } #shopping-cart-totals-table .a-right { text-align: right; } #shopping-cart-totals-table td, #shopping-cart-totals-table th { padding: 0 0 20px 0; } @media all and (max-width: 980px) and (min-width: 0) { #shopping-cart-totals-table td, #shopping-cart-totals-table th { padding: 5px 10px; } } #shopping-cart-totals-table td:first-child, #shopping-cart-totals-table th:first-child { text-align: left; } #shopping-cart-totals-table tfoot td strong { font-weight: bold; } #shopping-cart-totals-table .btn-remove { display: none; } @media all and (max-width: 980px) and (min-width: 0) { #category { padding-top: 0; margin-top: 0; } } #category .container, #category .col2-left-layout, #category .account-login { position: relative; } #category .brand { color: #666; float: left; margin-bottom: 30px; overflow: hidden; width: 50%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #category .brand { float: none; height: auto; margin: 0; padding: 30px 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #category .brand img { display: block; margin-bottom: 20px; max-width: 100%; } #category .brand h2 { color: #333; font-weight: bold; margin-bottom: 12px; } #category .brand p { color: #666; font-size: 12px; line-height: 1.4em; } #category article.promo { color: #666; float: left; font-size: 12px; overflow: hidden; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #category article.promo { padding: 0; } } #category article.promo img { display: block; height: auto; width: 100%; } #category article.promo a { display: block; text-decoration: none; } @media all and (max-width: 980px) and (min-width: 0) { #category article.promo a { margin: 0 10px; } } #category article.promo a:hover, #category article.promo a.active { text-decoration: underline; } #category article.product { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #666; float: left; font-size: 12px; height: auto; margin-bottom: 30px; overflow: hidden; position: relative; width: 25%; } @media all and (max-width: 980px) and (min-width: 0) { #category article.product { padding: 0; } } #category article.product a:hover, #category article.product a.active { text-decoration: underline; } #category article.product .image { position: relative; overflow: hidden; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #category article.product .image { margin: 0 10px; width: auto; } } @media all and (max-width: 980px) and (min-width: 0) { #category article.product .image .overlay { display: none !important; } #category article.product .image .quick_view { display: none !important; } } #category article.product .image:hover .overlay { margin: 0 !important; } #category article.product .image:hover .quick_view { display: block; } #category article.product .image img { display: block; height: auto; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #category article.product .image img { width: 100%; } } #category article.product .image .overlay { background: #fff; bottom: 0; left: 0; min-height: 27px; padding: 10px 0 2px 0; position: absolute; width: 100%; -webkit-transition: margin 200ms; -moz-transition: margin 200ms; -o-transition: margin 200ms; transition: margin 200ms; } #category article.product .image .available_sizes { color: #999; font-size: 12px; line-height: 1.5em; margin-right: 30px; } #category article.product .image .quick_view { background: url("../images/icon_search_small.png") center center no-repeat; bottom: 0; display: none; height: 27px; position: absolute; right: 0; width: 27px; } #category article.product .image .badge { cursor: pointer; display: block; height: 46px; left: 0; position: absolute; top: 0; width: 46px; } #category article.product .image .back-in-stock { background: url("../images/badge_backinstock.png") left bottom no-repeat; -webkit-background-size: 46px 46px; -moz-background-size: 46px 46px; -o-background-size: 46px 46px; background-size: 46px 46px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #category article.product .image .back-in-stock { background-image: url("../images/badge_backinstock-2x.png"); } } #category article.product .image .exclusive { background: url("../images/badge_exclusive.png") left bottom no-repeat; -webkit-background-size: 46px 46px; -moz-background-size: 46px 46px; -o-background-size: 46px 46px; background-size: 46px 46px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #category article.product .image .exclusive { background-image: url("../images/badge_exclusive-2x.png"); } } #category article.product .image .favorite { background: url("../images/badge_favorite.png") left bottom no-repeat; -webkit-background-size: 46px 46px; -moz-background-size: 46px 46px; -o-background-size: 46px 46px; background-size: 46px 46px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #category article.product .image .favorite { background-image: url("../images/badge_favorite-2x.png"); } } #category article.product .image .preorder { background: url("../images/badge_preorder.png") left bottom no-repeat; -webkit-background-size: 46px 46px; -moz-background-size: 46px 46px; -o-background-size: 46px 46px; background-size: 46px 46px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #category article.product .image .preorder { background-image: url("../images/badge_preorder-2x.png"); } } #category article.product h3 { color: #333; line-height: 1.2em; margin-top: 12px; } #category article.product h3 a { color: #333; } @media all and (max-width: 980px) and (min-width: 0) { #category article.product h3 { margin-left: 10px; margin-right: 10px; } } #category article.product h4 { line-height: 1.2em; margin-top: 6px; } #category article.product h4 a { color: #666; } @media all and (max-width: 980px) and (min-width: 0) { #category article.product h4 { margin-left: 10px; margin-right: 10px; } } #category article.product .colors { color: #2ae98f; white-space: nowrap; } #category .product-placeholder { height: 30px; } @media all and (max-width: 980px) and (min-width: 0) { #category .product-placeholder { display: none; visibility: hidden; } } #category article.promo:nth-of-type(4n+1), #category article.product:nth-of-type(4n+1) { clear: left; } @media all and (max-width: 980px) { #category article.promo, #category article.product { height: auto; margin: 10px 0 0 0; padding-bottom: 30px; width: 25%; } #category article.promo:nth-of-type(4n+1), #category article.product:nth-of-type(4n+1) { clear: left; } #category article.promo:nth-of-type(3n+1), #category article.product:nth-of-type(3n+1) { clear: none; } } @media all and (max-width: 780px) { #category article.promo, #category article.product { height: auto; margin: 10px 0 0 0; padding-bottom: 30px; width: 33.333%; } #category article.promo:nth-of-type(4n+1), #category article.product:nth-of-type(4n+1) { clear: none; } #category article.promo:nth-of-type(3n+1), #category article.product:nth-of-type(3n+1) { clear: left; } } @media all and (max-width: 580px) { #category article.promo, #category article.product { height: auto; margin: 10px 0 0 0; padding-bottom: 30px; width: 50%; } #category article.promo:nth-of-type(3n+1), #category article.product:nth-of-type(3n+1) { clear: none; } #category article.promo:nth-of-type(2n+1), #category article.product:nth-of-type(2n+1) { clear: left; } } #category .more { color: #666; cursor: pointer; display: block; float: left; font-size: 12px; overflow: hidden; position: relative; text-align: center; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } @media all and (min-width: 1480px) { #category .more { height: 436px; } } @media all and (max-width: 1480px) { #category .more { height: 359px; } } @media all and (max-width: 1240px) { #category .more { height: 282px; } } @media all and (max-width: 980px) and (min-width: 0) { #category .more { display: none; } } #category .more:hover span { text-decoration: underline; } #category .more .vertical-center { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #category .more span { color: #111; display: block; font-size: 14px; line-height: 1em; margin-bottom: 15px; text-align: center; text-decoration: none; } #category .more .icon-arrow { background: url("../images/icon_arrow_right.svg") center center no-repeat; display: block; height: 9px; } #category .empty { margin: 0 10px 60px 10px; } #category .empty h2 { color: #f2f2f2; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 144px; line-height: 118px; margin-bottom: 30px; } #category .empty p { font-size: 12px; margin-top: 10px; } #category .empty p a { color: #111; text-decoration: underline; } #category .feature_header { margin: 20px 10px; position: relative; } #category .feature_header a { display: block; position: absolute; } #category .feature_header a span { display: block; height: 80px; margin-top: -40px; position: absolute; width: 80px; } #category .feature_header a.prev { height: 100%; left: 0; top: 0; width: 33.333333%; } #category .feature_header a.prev span { background: transparent url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_prev.gif") center center no-repeat; left: 0; top: 50%; } #category .feature_header a.next { height: 100%; right: 0; top: 0; width: 33.333333%; } #category .feature_header a.next span { background: transparent url("../images/icon_quick_view_next.gif") center center no-repeat; right: 0; top: 50%; } #category .feature_header a.disabled { -moz-opacity: 0.2; -webkit-opacity: 0.2; opacity: 0.2; } #category .feature_header .first { background: #fff; height: 80px; margin-top: -40px; position: absolute; right: 0; top: 50%; width: 80px; } #category .feature_header .first:before { background: #fff; content: 'Next'; display: block; height: 80px; line-height: 80px; left: 0; margin-left: -40px; position: absolute; text-align: center; top: 0; width: 80px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; } #category .feature_header img { display: none; width: 100%; } @media all and (max-width: 480px) { #category .feature_header.gallery { padding-bottom: 80px; } #category .feature_header a.prev { bottom: 0px; height: 80px; width: 50%; top: auto; } #category .feature_header a.prev span { left: 50%; margin-left: -50px; } #category .feature_header a.next { bottom: 0px; height: 80px; margin-top: 80px; width: 50%; top: auto; } #category .feature_header a.next span { right: 50%; margin-right: -50px; } #category .feature_header .first { display: none !important; } } #category .feature_header_disabled a { position: static; } #category .feature_header_disabled img { display: block; } #category .feature_description { margin: 30px 0 40px 0; position: relative; text-align: center; } #category .feature_description h1 { font-weight: bold; font-size: 18px; margin-bottom: 1em; } #category .feature_description p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.4em; margin: 0 auto; padding: 0 10px; width: 50%; } @media all and (max-width: 1240px) { #category .feature_description p { width: 75%; } } @media all and (max-width: 980px) and (min-width: 0) { #category .feature_description p { width: 100%; } } #category.features, #category.collections { display: none; } .category-feature { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin: 0 0 0 10px; overflow: hidden; position: absolute; width: 50%; z-index: 1; top: 0; left: 0; } @media all and (max-width: 980px) and (min-width: 0) { .category-feature { float: none; height: auto; margin: 0 auto; padding: 30px 10px; position: static; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .category-feature .images { display: none; } .category-mens .toolbar-container, .category-womens .toolbar-container { display: none; } .category-mens .nav, .category-womens .nav { display: none; } .category-mens #category.page-1, .category-womens #category.page-1 { margin-top: 0; } .category-mens .category-feature, .category-womens .category-feature { margin-bottom: 0; } @media all and (max-width: 980px) and (min-width: 0) { .category-mens .category-feature, .category-womens .category-feature { border-bottom: 1px solid #f1f1f1; margin: 0; } } .back-to-top { bottom: 20px; position: fixed; left: 20px; visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms, visibility 400ms; -moz-transition: opacity 400ms, visibility 400ms; -o-transition: opacity 400ms, visibility 400ms; transition: opacity 400ms, visibility 400ms; } .back-to-top.active { visibility: visible; z-index: 1; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } @media all and (max-width: 980px) and (min-width: 0) { .back-to-top { display: none; } } .back-to-top a { -webkit-background-size: 28px; -moz-background-size: 28px; -o-background-size: 28px; background-size: 28px; background: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_caret_up.svg") center center no-repeat; display: block; height: 16px; width: 28px; } #contest { margin: 0 0 60px 0; } #contest a { text-decoration: none; } #contest a:hover { text-decoration: underline; } #contest h1 { border-bottom: 1px solid #ccc; color: #8d8d8d; font-size: 16px; font-weight: bold; margin: 40px 10px; padding: 0 0 10px 0; text-transform: uppercase; } #contest h3 { border-bottom: 1px solid #ccc; color: #111; font-size: 18px; line-height: 1em; margin-bottom: 24px; padding-bottom: 8px; } #contest .image { margin: 0 10px 40px 10px; overflow: hidden; } @media all and (max-width: 1240px) { #contest .image { margin: 0 0 40px 0; padding: 0 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #contest .image img { display: block; max-width: 100%; width: 100%; } #contest .row { float: left; overflow: hidden; position: relative; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #contest .row { float: none; padding: 0 10px; width: auto; } } #contest .group { float: left; position: relative; width: 75%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #contest .group { float: none; margin: 0; width: auto; } } #contest .statement { float: left; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #contest .statement { display: none; } } #contest .statement h2 { font-size: 60px; line-height: 56px; } @media all and (min-width: 1480px) { #contest .statement h2 { font-size: 72px; line-height: 1em; } } #contest .how { float: left; width: 100%; } #contest .how a { color: #222; text-decoration: underline; } #contest .how ol { font-size: 24px; line-height: 1.6em; list-style: decimal; } #contest .how ol li { margin-left: 32px; } #contest .how p { line-height: 1.4em; margin: 1.4em 0; } #contest .how p:last-child { margin-bottom: 0; } @media all and (max-width: 980px) and (min-width: 0) { #contest .how { float: none; width: auto; } #contest .how ol { font-size: 20px; } #contest .how ol li { word-wrap: break-word; } } #contest .share { overflow: hidden; padding-top: 30px; float: left; } #contest .share:hover { width: 210px; } #contest .share li { float: left; margin: 0 5px 0 0; } #contest .share a { color: #fff; text-decoration: none; } #contest .partner-logo { display: block; float: left; margin-left: 40px; padding-top: 30px; } #checkout { margin: 0 0 60px 0; } #checkout a { color: #111; text-decoration: none; } #checkout a:hover { text-decoration: underline; } #checkout_success { margin: 0 0 60px 0; } #checkout_success a { color: #111; text-decoration: none; } #checkout_success a:hover { text-decoration: underline; } #checkout_success h1 { border-bottom: 1px solid #ccc; color: #8d8d8d; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 22px; margin: 40px 10px; padding: 0 0 10px 0; } #checkout_success .message { color: #333; font-size: 13px; margin: 0 10px; } #checkout_success .message h2 { color: #2ae98f; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 72px; line-height: 1em; } @media all and (max-width: 980px) and (min-width: 0) { #checkout_success .message h2 { font-size: 48px; } } #checkout_success .message p { line-height: 1.4em; } #checkout_success .message p.order_number { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 22px; margin: 20px 0; } #checkout_success .message p.order_number a { text-decoration: underline; } #checkout_success .next_steps { border-top: 1px solid #ccc; margin: 30px 10px 0 10px; padding-top: 30px; } @media all and (max-width: 980px) and (min-width: 0) { #checkout_success .next_steps button { display: block; float: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #payment_form_authnetcim a { color: #333; } #payment_form_authnetcim a:hover { text-decoration: underline; } #payment_form_authnetcim .authnetcim_add_form { padding-top: 10px; } #payment_form_authnetcim .authnetcim_add_first { border-top: 1px solid #e5e5e5; padding-top: 15px; } #payment_form_authnetcim #authnetcim_payment_id { margin: 4px 0 12px 0; } #payment_form_authnetcim label.checkbox { display: inline; } #contact .content { text-align: center; margin: 0 auto; padding: 130px 10px; width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { #contact .content { width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 60px; padding-bottom: 60px; } } #contact h1 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #contact p { font-size: 18px; line-height: 1.6em; margin-bottom: 1.6em; } #contact p:last-child { margin: 0; } #contact .button { font-size: 18px; padding: 1em 4em; } #contact .button-chat { background: transparent; border: 1px dotted #111; color: #111; margin: 30px 0 60px 0; } #contact form { overflow: hidden; padding-top: 35px; } #contact input[type=text], #contact input[type=email], #contact textarea { border: 1px solid #111; padding: 15px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 400ms ease; -moz-transition: border-color 400ms ease; -o-transition: border-color 400ms ease; transition: border-color 400ms ease; } #contact input[type=text].error, #contact input[type=email].error, #contact textarea.error { border: 1px solid #ff3000; } #contact label { display: block; font-size: 18px; padding-bottom: 12px; text-align: left; } @media all and (max-width: 980px) and (min-width: 0) { #contact label { text-align: center; } } #contact .name { float: left; margin-bottom: 50px; padding-right: 10px; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #contact .name { float: none; margin-bottom: 30px; padding: 0; width: 100%; } } #contact .email { float: left; margin-bottom: 50px; padding-left: 10px; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #contact .email { float: none; margin-bottom: 30px; padding: 0; width: 100%; } } #contact .message { margin-bottom: 50px; } /* #contact { margin: 30px 0 60px 0; a { text-decoration: none; &:hover { text-decoration: underline; } } h1 { border-bottom: 1px solid #ccc; color: #8d8d8d; font-size: 16px; font-weight: bold; margin: 40px 10px; padding: 0 0 10px 0; text-transform: uppercase; } .image { margin: 0 10px 30px 10px; @include breakpoint(grid-mobile) { width: auto; } img { display: block; width: 100%; } } .information { color: #666; float: left; font-size: 13px; width: 25%; @include grid-gutter; @include breakpoint(grid-mobile) { float: none; margin: 40px 10px 20px 10px; width: auto; } h2 { color: #111; font-family: $proxima-nova-reg; font-size: 60px; line-height: 54px; margin-bottom: 20px; text-transform: uppercase; } p { line-height: 1.4em; margin-bottom: 20px; width: 75%; a { color: #666; } } .social { overflow: hidden; li { display: block; float: left; margin-right: 10px; } a { @include opacity(0.3); } img { height: 20px; } } } .form { float: left; width: 62.5%; @include grid-gutter; @include breakpoint(grid-mobile) { float: none; width: auto; } form { margin-bottom: 60px; overflow: hidden; } fieldset { border-bottom: 1px solid #ccc; margin-bottom: 10px; overflow: hidden; padding: 10px 0 2px 0; &.message { background: url('../images/contact_textarea.jpg') left top; border: 0; height: 261px; margin-top: 20px; padding: 0; } } input[type=text] { background: transparent; border: 0; color: #666; font-size: 14px; margin: 0; outline: none; width: 100%; } textarea { background: transparent; border: 0; color: #666; display: block; font-size: 14px; height: 261px; line-height: 29px; outline: none; overflow: auto; resize: none; width: 100%; } button { background: #000; border: 0; color: #fff; display: block; float: left; font-weight: bold; line-height: 1em; margin: 30px 0 0 0; padding: 1em 2em; text-align: center; //text-transform: uppercase; } .error input[type=text], .error textarea { color: $need-red; } p { color: #f2f2f2; font-family: $proxima-nova-reg; font-size: 120px; line-height: 100px; //text-transform: uppercase; @include breakpoint(grid-1440) { font-size: 144px; line-height: 118px; } @include breakpoint(grid-960) { font-size: 96px; line-height: 84px; } } } .chat { color: #666; float: left; width: 12.5%; @include grid-gutter; @include breakpoint(grid-mobile) { display: none; float: none; width: auto; } .circle { background: #e8e8e8; color: #999; display: block; float: right; height: 120px; line-height: 120px; margin-bottom: 40px; text-align: center; text-decoration: none; //text-transform: uppercase; width: 120px; @include border-radius(120px); } span { display: block; line-height: 1.2em; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } .chat-available { .circle { background: $need-yellow; border: 2px solid $need-yellow; color: #111; @include box-sizing(border-box); } } .chat-leave-message { .circle { background: #fff; border: 2px solid #111; color: #111; @include box-sizing(border-box); } } } */ #error { background: #2ae98f; overflow: hidden; } #error h1 { color: #fff; font-size: 70px; line-height: 1em; margin: 0 10px; padding-top: 60px; } @media all and (max-width: 980px) and (min-width: 0) { #error h1 { font-size: 48px; } } #error form { overflow: hidden; margin: 60px 10px; } #error form fieldset { border-bottom: 1px solid #fff; display: block; } #error form fieldset input { background: transparent; border: 0; color: #111; color: rgba(0, 0, 0, 0.2); font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 58px; margin: 0; outline: none; padding: 0; } @media all and (max-width: 980px) and (min-width: 0) { #error form fieldset input { width: 75%; } } #error form fieldset input:hover { color: #fff; } #error form fieldset button { background: #fff; border: 0; color: #2ae98f; float: right; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 22px; line-height: 70px; margin: 0; padding: 0 24px; } #error form fieldset button:hover { background: #eee; background: rgba(255, 255, 255, 0.9); cursor: pointer; } #error form p { color: #666; color: rgba(0, 0, 0, 0.4); margin: 20px 0; } #error form p a { color: #666; color: rgba(0, 0, 0, 0.4); font-size: 12px; } .cms-no-route #newsletter_bar { display: none; } #help .container, #help .col2-left-layout, #help .account-login { padding: 60px 0; position: relative; } #help a { text-decoration: none; } #help a:hover { text-decoration: underline; } #help .sections { color: #666; float: left; min-height: 1px; position: relative; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #help .sections { float: none; width: auto; } } #help .sections li { line-height: 1.8em; } #help .sections li a { color: #666; text-decoration: none; } #help .sections li a:hover { text-decoration: underline; } #help .content { color: #111; float: left; font-size: 18px; overflow: hidden; width: 75%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #help .content { float: none; margin: 40px 0; width: auto; } } #help .content a { color: #111; text-decoration: underline; } #help .content .jump { color: #111; font-size: 18px; margin: 40px 0 50px 0; position: relative; } #help .content .jump a { text-decoration: none; } #help .content .jump:after { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #111; content: ''; height: 0; position: absolute; right: 16px; top: 20px; width: 0; } #help .content .jump dt { border: 1px solid #111; } #help .content .jump dd dl { border: 1px solid #111; border-top: 0; } #help .content .jump dt a { background: #fff; display: block; padding: 16px; } #help .content .jump dt a:hover { cursor: pointer; text-decoration: none; } #help .content .jump dl { display: none; } #help .content .jump dl > dd a { background: #fff; border-bottom: 1px dotted #111; display: block; padding: 16px; } #help .content .jump dl > dd a:hover { background: #fff; cursor: pointer; text-decoration: none; } #help .content .jump dl dd:last-child a { border-bottom: 0; } #help .content .active dt a { background: #fff; cursor: pointer; text-decoration: none; } #help .content .active:after { border-bottom: 12px solid #111; border-top: 0; } #help .content .notice { color: #ff3000; } #help .content h2 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #help .content h3 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #help .content h4 { color: #333; font-size: 18px; font-weight: bold; margin-bottom: 1.6em; } #help .content p { line-height: 1.6em; margin-bottom: 1.6em; } #help .content ul { line-height: 1.6em; list-style: disc; margin-bottom: 30px; } #help .content ul li { padding: 0; margin-left: 18px; } #help .content .last { margin: 0; } #help .content table { margin-bottom: 3em; width: 100%; font-size: 14px; } #help .content table td { padding: 10px; } #help .content table .odd td { background-color: #e5e5e5; } @media all and (min-width: 1480px) { #help .content table td { font-size: 16px; padding: 20px; white-space: normal; } } @media all and (max-width: 980px) and (min-width: 0) { #help .content table td { font-size: 12px; padding: 10px; white-space: normal; } } @media all and (max-width: 480px) { #help .content table td { font-size: 11px; padding: 5px 2px; word-break: keep-all; text-overflow: ellipsis; } } #help .content .images { display: table; list-style: none; margin-bottom: 3em; overflow: hidden; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #help .content .images { display: block; } } #help .content .images li { display: table-cell; margin: 0; padding-right: 15px; vertical-align: middle; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #help .content .images li:nth-child(2n) { padding-left: 15px; padding-right: 0; } @media all and (max-width: 980px) and (min-width: 0) { #help .content .images li { display: block; padding: 0; text-align: center; width: 100%; } #help .content .images li:nth-child(2n) { padding: 0; } } #help .content .images img { display: inline-block; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #help .content .images img { margin-bottom: 15px; width: auto; max-width: 100%; } } #help .content .images .image-mens-pants { padding-right: 20px; text-align: right; vertical-align: top; } #help .content .images .image-mens-pants img { width: auto; } @media all and (max-width: 980px) and (min-width: 0) { #help .content .images .image-mens-pants { padding: 0; text-align: center; } } #help .content .images .image-mens-shorts { padding-left: 20px; text-align: left; vertical-align: top; } #help .content .images .image-mens-shorts img { width: auto; } @media all and (max-width: 980px) and (min-width: 0) { #help .content .images .image-mens-shorts { padding: 0; text-align: center; } } #help hr { background-color: #e8e8e8; border: 0; height: 1px; margin: 60px 0; } #help .information { color: #666; float: left; width: 12.5%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 1240px) { #help .information { display: none; } } @media all and (max-width: 980px) and (min-width: 0) { #help .information { display: none; float: none; margin: 0; position: static; width: auto; } } #help .button-chat { background: transparent; border: 1px dotted #111; color: #111; font-size: 18px; margin-top: 30px; padding: 18px 0; text-align: center; width: 100%; } .cms-home header { background-color: transparent; border: 0; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .cms-home header.hover { background-color: #fff; border-bottom: 1px solid #f1f1f1; } @media all and (max-width: 980px) and (min-width: 0) { .cms-home header { position: static; } .cms-home header.hover { background: none; border: 0; } } #home_feature { min-width: 960px; position: relative; } @media all and (max-width: 980px) and (min-width: 0) { #home_feature { height: auto; min-width: 0; width: 100%; } } #home_feature_images { display: none; } #home_departments { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; display: none; overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { #home_departments { display: block; } } #home_departments a { border-right: 1px solid #ddd; color: #222; display: block; float: left; font-weight: bold; font-size: 16px; height: auto; line-height: normal; padding: 24px 0; text-align: center; text-decoration: none; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #home_departments a.womens { border: 0; } #home_content a { color: #111; } #home_content img { border: 0; display: inline-block; height: auto; max-width: 100%; width: auto; -ms-interpolation-mode: bicubic; } #home_content .info a { -webkit-transition: border 200ms ease; -moz-transition: border 200ms ease; -o-transition: border 200ms ease; transition: border 200ms ease; border-bottom: 1px solid #ccc; border-bottom: 1px solid rgba(0, 0, 0, 0.15); font-weight: bold; margin-right: 6px; white-space: nowrap; } #home_content .info a:hover { border-bottom-color: #666; border-bottom-color: rgba(0, 0, 0, 0.5); } #home_content .blog-post { margin: 120px 0; text-align: center; } #home_content .blog-post .info { margin: 30px 20px; } #home_content .blog-post .info strong { margin-right: 30px; } @media all and (min-width: 1480px) { #home_content .blog-post { margin: 200px 0; } } @media all and (max-width: 980px) and (min-width: 0) { #home_content .blog-post { margin: 80px 0; } #home_content .blog-post .info strong { margin-right: 10px; } } #home_content .block-post { margin: 120px 0; text-align: center; position: relative; } #home_content .block-post:hover p { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } #home_content .block-post .image { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; display: block; height: 900px; position: relative; } #home_content .block-post p { display: block; position: absolute; text-align: center; top: 50%; width: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #home_content .block-post span { background: #fff; color: #111; display: inline-block; padding: 2.5em 4em; } #home_content .block-post .info { margin: 30px 20px; } #home_content .block-post .info strong { margin-right: 30px; } @media all and (min-width: 1480px) { #home_content .block-post { margin: 200px 0; } } @media all and (max-width: 980px) and (min-width: 0) { #home_content .block-post { margin: 80px 0; } #home_content .block-post .image { height: 450px; } #home_content .block-post p { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; position: static; top: auto; } #home_content .block-post span { padding: 2em; } #home_content .block-post .info strong { margin-right: 10px; } } @media all and (max-width: 600px) { #home_content .block-post .image { height: 315px; } } #home_content .lookbook-post { margin: 120px 0; text-align: center; } #home_content .lookbook-post .image { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; display: block; height: 570px; } #home_content .lookbook-post .info { margin: 30px 20px; } #home_content .lookbook-post .info strong { margin-right: 30px; } @media all and (min-width: 1480px) { #home_content .lookbook-post { margin: 200px 0; } } @media all and (max-width: 980px) and (min-width: 0) { #home_content .lookbook-post { margin: 80px 0; } #home_content .lookbook-post .image { height: auto; padding-top: 35%; } #home_content .lookbook-post .info strong { margin-right: 10px; } } #home_content .instagram-post { margin: 120px 0; } #home_content .instagram-post .photos { margin: 0 auto; max-width: 1060px; overflow: hidden; width: 90%; } #home_content .instagram-post .photo { float: left; margin: 30px 1.1%; width: 31.1%; } #home_content .instagram-post img { margin-bottom: 30px; } #home_content .instagram-post .caption { margin-bottom: 10px; } @media all and (min-width: 1480px) { #home_content .instagram-post { margin: 200px 0; } } @media all and (max-width: 980px) and (min-width: 0) { #home_content .instagram-post { margin: 80px 0; } #home_content .instagram-post .photo { float: none; margin: 60px auto; padding: 0 20px; max-width: 340px; width: auto; } } #home_content .twitter-post { background: #a6773e; padding: 120px 0; text-align: center; } #home_content .twitter-post > p { margin: 30px auto 0 auto; max-width: 620px; padding: 0 20px; } #home_content .twitter-post > p:first-child { font-size: 28px; font-weight: bold; line-height: 1.3em; } #home_content .twitter-post .info { margin: 30px auto; } @media all and (min-width: 1480px) { #home_content .twitter-post { padding: 200px 0; } } @media all and (max-width: 980px) and (min-width: 0) { #home_content .twitter-post { padding: 80px 0; } } #jobs .content { text-align: center; margin: 0 auto; padding: 130px 10px; width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { #jobs .content { width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 60px; padding-bottom: 60px; } } #jobs h1 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #jobs h2 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #jobs p { font-size: 18px; line-height: 1.6em; margin-bottom: 1.6em; } #jobs p:last-child { margin: 0; } #jobs .image { background: url("../images/jobs_image.jpg") center center no-repeat; height: 500px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media all and (max-width: 980px) and (min-width: 0) { #jobs .image { height: auto; padding-top: 45%; } } #jobs .current-openings { border-top: 1px solid #e8e8e8; font-size: 18px; } #jobs .current-openings li { border-bottom: 1px solid #e8e8e8; display: block; line-height: 1.6em; padding: 40px 0; } #jobs .current-openings a { color: #111; font-weight: bold; } #jobs .current-openings a:hover { text-decoration: underline; } #jobs .thank-you { background: #121212; color: #fff; } .landing-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: none; padding: 0 25px; width: 100%; } .landing_new .grid_images { display: none; } .landing_new .grid { overflow: hidden; padding: 40px 0; /* margin: 0 10px; */ } .landing_new .item { padding: 10px; position: relative; text-align: center; /* span { background: #fff; background: rgba(255, 255, 255, 0.7); display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; @include opacity(0); @include transition(opacity 0.4s); } */ } .landing_new .item a { color: #111; display: inline-block; max-width: 100%; /* FF hack */ position: relative; text-decoration: none; } .landing_new .item a:hover p { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .landing_new .item img { display: inline-block; max-width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { .landing_new .item img { display: block; } } .landing_new .item h3 { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; margin-top: 25px; } .landing_new .item p { display: block; position: absolute; text-align: center; top: 50%; width: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media all and (max-width: 980px) and (min-width: 0) { .landing_new .item p { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; position: static; top: auto; } } .landing_new .item span { background: #fff; color: #111; display: inline-block; padding: 2.5em 4em; } @media all and (max-width: 980px) and (min-width: 0) { .landing_new .item span { padding: 2em; } } .landing_new .item-group { text-align: center; } .landing_new .item-group:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .landing_new .item-group .item { display: inline-block; max-width: 100%; /* FF hack */ vertical-align: bottom; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* FF hack */ } .landing_new .shipping-promo { display: none; } #landing_new_loading { margin-top: 50px; min-height: 100px; position: relative; } .landing .grid_images { display: none; } .landing .grid { height: 2094px; margin: 0 10px 30px 10px; position: relative; } .landing .grid .item { left: 0; position: absolute; top: 0; } .landing .grid .item a { display: block; height: 100%; position: absolute; width: 100%; } .landing .grid .item a:hover .overlay { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .landing .grid .item .image { background-position: center center; background-repeat: no-repeat; height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .landing .grid .item .overlay { background: #e8e8e8; background: rgba(255, 255, 255, 0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } .landing .grid .item .overlay span { color: #111; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 28px; line-height: 1em; margin-top: -18px; position: absolute; padding: 0 10px; text-align: center; top: 50%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .landing .grid .item img { display: none; } .landing .grid .item-1 { height: 584px; width: 1180px; } .landing .grid .item-2 { height: 584px; width: 460px; top: 604px; } .landing .grid .item-3 { /* height: 584px; width: 460px; top: 604px; */ height: 584px; left: 0; width: 460px; top: 1208px; } .landing .grid .item-4 { height: 584px; left: 480px; width: 700px; top: 604px; } .landing .grid .item-5 { /* height: 584px; left: 0; width: 460px; top: 1208px; */ height: 584px; left: 720px; width: 460px; top: 1510px; } .landing .grid .item-6 { height: 282px; left: 480px; width: 460px; top: 1208px; } .landing .grid .item-7 { height: 282px; left: 960px; width: 220px; top: 1208px; } .landing .grid .item-8 { height: 282px; left: 480px; width: 220px; top: 1510px; } .landing .grid .item-9 { display: none; height: 584px; width: 460px; } .landing .grid .item-10 { height: 282px; left: 0px; width: 220px; top: 1812px; } .landing .grid .item-11 { height: 282px; left: 240px; width: 460px; top: 1812px; } @media all and (min-width: 1480px) { .landing .grid { height: 1792px; } .landing .grid .item-1 { width: 940px; } .landing .grid .item-2 { display: block; left: 960px; top: 0; } .landing .grid .item-3 { left: 0; top: 604px; } .landing .grid .item-5 { left: 0; top: 1208px; } .landing .grid .item-7 { left: 1200px; top: 604px; } .landing .grid .item-8 { left: 1200px; top: 906px; } .landing .grid .item-9 { display: block; left: 960px; top: 1208px; } .landing .grid .item-10 { display: none; } .landing .grid .item-11 { left: 480px; top: 1510px; } } @media all and (max-width: 1240px) { .landing .grid { height: 2396px; } .landing .grid .item-1 { width: 940px; } .landing .grid .item-2 { height: 584px; width: 460px; top: 604px; } .landing .grid .item-3 { left: 480px; top: 604px; } .landing .grid .item-4 { left: 0; top: 1208px; } .landing .grid .item-5 { left: 0; top: 1812px; } .landing .grid .item-6 { left: 480px; top: 1812px; } .landing .grid .item-7 { left: 720px; top: 1208px; } .landing .grid .item-8 { left: 720px; top: 1510px; } .landing .grid .item-9 { left: 480px; top: 604px; } .landing .grid .item-10 { display: none; } .landing .grid .item-11 { left: 480px; top: 2114px; } } @media all and (max-width: 980px) and (min-width: 0) { .landing .grid { height: auto !important; margin: 0 8px 10px 8px; overflow: hidden; } .landing .grid .item { float: left; height: auto; left: auto; margin: 0; overflow: hidden; padding: 0 2px; position: relative; top: auto; width: 33.3333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .landing .grid .item a { height: auto; position: static; text-decoration: none; } .landing .grid .item .image { height: 360px; position: static; } .landing .grid .item .overlay { background: transparent; display: block; left: auto; overflow: hidden; position: static !important; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .landing .grid .item .overlay span { display: block; font-size: 24px; left: auto; margin: 0; padding: 12px 0 18px 0; position: static; text-overflow: ellipsis; top: auto; } .landing .grid .item:nth-child(2) { clear: both; } .landing .grid .item:nth-child(5) { clear: both; } .landing .grid .item:nth-child(8) { clear: both; } .landing .grid .item-1 { height: auto; width: 100%; } .landing .grid .item-1 .image { height: 480px; } .landing .grid .item-10 { display: block; height: auto; } } @media all and (max-width: 780px) { .landing .grid .item { height: auto; } .landing .grid .item .image { height: 300px; } .landing .grid .item .overlay span { font-size: 20px; } } @media all and (max-width: 680px) { .landing .grid .item { height: auto; } .landing .grid .item .image { height: 250px; } } @media all and (max-width: 580px) { .landing .grid .item { height: auto; width: 50%; } .landing .grid .item .image { height: 240px; } .landing .grid .item .overlay span { font-size: 18px; } .landing .grid .item:nth-child(2) { clear: both; } .landing .grid .item:nth-child(4) { clear: both; } .landing .grid .item:nth-child(5) { clear: none; } .landing .grid .item:nth-child(6) { clear: both; } .landing .grid .item:nth-child(8) { clear: both; } .landing .grid .item-1 { height: auto; width: 100%; } .landing .grid .item-10 { display: none; height: auto; } } @media all and (max-width: 480px) { .landing .grid .item .image { height: 190px; } } #category.lookbook { display: none; } #lookbook { margin: 30px 0; /* .images { margin: 0 10px; img { display: block; height: auto; margin-bottom: 50px; width: 100%; } } */ } @media all and (max-width: 980px) and (min-width: 0) { #lookbook { margin: 30px 0; } } #lookbook a { color: #111; text-decoration: none; } #lookbook a:hover { text-decoration: underline; } #lookbook h1 { border-bottom: 1px solid #ccc; color: #8d8d8d; font-size: 16px; font-weight: bold; margin: 40px 10px; padding: 0 0 10px 0; text-transform: uppercase; } #lookbook h1 a { color: #8d8d8d; text-decoration: none; } #lookbook .latest { margin: 0 10px; } #lookbook .latest li { margin-top: 20px; position: relative; } #lookbook .latest li a { display: block; } #lookbook .latest li a:hover .overlay { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } #lookbook .latest li img { display: block; height: auto; width: 100%; } #lookbook .latest li .overlay { background: #e8e8e8; background: rgba(255, 255, 255, 0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } @media all and (max-width: 980px) and (min-width: 0) { #lookbook .latest li .overlay { display: none; } } #lookbook .inline-gallery { margin: 0 10px 20px 10px; } #lookbook .inline-gallery .images { position: relative; } #lookbook .inline-gallery .images a { display: block; position: absolute; } #lookbook .inline-gallery .images a span { display: block; height: 80px; margin-top: -40px; position: absolute; width: 80px; } #lookbook .inline-gallery .images a.prev { height: 100%; left: 0; top: 0; width: 33.333333%; } #lookbook .inline-gallery .images a.prev span { background: transparent url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_prev.gif") center center no-repeat; left: 0; top: 50%; -webkit-background-size: 14px 27px; -moz-background-size: 14px 27px; -o-background-size: 14px 27px; background-size: 14px 27px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #lookbook .inline-gallery .images a.prev span { background-image: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_prev@2x.gif"); } } #lookbook .inline-gallery .images a.next { height: 100%; right: 0; top: 0; width: 33.333333%; } #lookbook .inline-gallery .images a.next span { background: transparent url("../images/icon_quick_view_next.gif") center center no-repeat; right: 0; top: 50%; -webkit-background-size: 14px 27px; -moz-background-size: 14px 27px; -o-background-size: 14px 27px; background-size: 14px 27px; } @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx) { #lookbook .inline-gallery .images a.next span { background-image: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_next@2x.gif"); } } #lookbook .inline-gallery .images a.disabled { -moz-opacity: 0.2; -webkit-opacity: 0.2; opacity: 0.2; } #lookbook .inline-gallery .images .first { background: #fff; height: 80px; margin-top: -40px; position: absolute; right: 0; top: 50%; width: 80px; } #lookbook .inline-gallery .images .first:before { background: #fff; content: 'Next'; display: block; height: 80px; line-height: 80px; left: 0; margin-left: -40px; position: absolute; text-align: center; top: 0; width: 80px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; } #lookbook .inline-gallery img { display: block; width: 100%; } #lookbook .inline-gallery ul { display: block; width: 100%; text-align: center; padding-top: 20px; } #lookbook .inline-gallery ul li { display: inline-block; text-align: center; } #lookbook .inline-gallery ul li.active a { text-decoration: underline; } #lookbook .inline-gallery ul a { display: inline-block; padding: 1em 0.8em; } @media all and (max-width: 980px) and (min-width: 0) { #lookbook .inline-gallery { margin-bottom: 0; } #lookbook .inline-gallery ul { font-size: 14px; padding-top: 10px; } #lookbook .inline-gallery ul a { padding: 1em 0.6em; } } @media all and (max-width: 480px) { #lookbook .inline-gallery { margin: 0 10px; padding-bottom: 60px; } #lookbook .inline-gallery .images a.prev { bottom: -110px; height: 80px; width: 50%; top: auto; } #lookbook .inline-gallery .images a.prev span { left: 50%; margin-left: -50px; } #lookbook .inline-gallery .images a.next { bottom: -110px; height: 80px; margin-top: 80px; width: 50%; top: auto; } #lookbook .inline-gallery .images a.next span { right: 50%; margin-right: -50px; } #lookbook .inline-gallery .images .first { display: none !important; } #lookbook .inline-gallery ul { font-size: 11px; } #lookbook .inline-gallery ul a { padding: 1em 0.4em; } } @media all and (max-width: 480px) { #lookbook { margin-bottom: 10px; } } #lookbook-description { margin: 30px 0 40px 0; position: relative; text-align: center; } #lookbook-description h1 { border: 0; color: #111; font-weight: bold; font-size: 18px; margin-bottom: 1em; padding: 0; text-transform: none; } #lookbook-description p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.4em; margin: 0 auto; padding: 0 10px; width: 50%; } @media all and (max-width: 1240px) { #lookbook-description p { width: 75%; } } @media all and (max-width: 980px) and (min-width: 0) { #lookbook-description p { width: 100%; } } #lookbook-description a { text-decoration: underline; } #lookbook-extra { margin: 0 0 40px 0; text-align: center; } #lookbook-extra .button { background: #111; border: 0; color: #fff; display: inline-block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; line-height: 1em; padding: 14px 0; text-align: center; text-decoration: none; width: 220px; } #category.lookbook-view { padding-bottom: 50px; } #lookbook_gallery { height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 999; } @media all and (max-width: 980px) and (min-width: 0) { #lookbook_gallery { display: none !important; } } #lookbook_gallery .overlay { background: #fff; background: rgba(255, 255, 255, 0.98); height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: -1; } #lookbook_gallery .gallery { margin: 20px 10px 0 10px; position: relative; } #lookbook_gallery .close { background: url("../images/icon_quick_view_close.gif") center center no-repeat; display: block; height: 30px; position: absolute; right: 10px; top: 10px; width: 30px; } #lookbook_gallery .images { height: 600px; margin: 0 auto; overflow: hidden; position: relative; } #lookbook_gallery .images .group { height: 600px; position: absolute; z-index: 1; } #lookbook_gallery .images .group img { display: block; position: absolute; } #lookbook_gallery .images a { display: block; height: inherit; position: absolute; width: 30%; } #lookbook_gallery .images a.prev { left: 0; top: 0; } #lookbook_gallery .images a.prev span { background: transparent url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_prev.gif") 30px 25px no-repeat; left: 10px; margin: -40px 0 0 0; top: 50%; } #lookbook_gallery .images a.prev:hover span { background-image: url("http://needsupply.com/skin/frontend/needsupply/default/images/icon_quick_view_prev.gif"); } #lookbook_gallery .images a.next { right: 0; top: 0; } #lookbook_gallery .images a.next span { background: transparent url("../images/icon_quick_view_next.gif") 34px 25px no-repeat; margin: -40px 0 0 0; right: 10px; top: 50%; } #lookbook_gallery .images a.next:hover span { background-image: url("../images/icon_quick_view_next.gif"); } #lookbook_gallery .images a span { display: block; height: 80px; position: absolute; width: 80px; } #lookbook_gallery .images .disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } #lookbook_gallery ul { margin: 15px 0; text-align: center; } #lookbook_gallery ul li { display: inline-block; padding: 6px; } #lookbook_gallery ul a { color: #222; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; text-decoration: none; } #lookbook_gallery ul a:hover, #lookbook_gallery ul li.active a { text-decoration: underline; } #lookbook_gallery_spinner { height: 100px; left: 50%; margin: -50px 0 0 -50px; position: fixed; top: 50%; width: 100px; } .toolbar-lookbook { margin: 30px 0; } .toolbar-lookbook .breadcrumbs { color: #999; float: left; } .toolbar-lookbook .breadcrumbs li { display: inline-block; } .toolbar-lookbook .breadcrumbs a { color: #999; } .toolbar-lookbook .breadcrumbs a:hover { text-decoration: underline; } .toolbar-lookbook .breadcrumbs strong { font-weight: bold; } #meet_the_maker .header { background: url("../images/mtm_header.jpg") center center no-repeat; height: 500px; position: relative; text-align: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } @media all and (max-width: 980px) and (min-width: 0) { #meet_the_maker .header { height: auto; padding-top: 45%; } } #meet_the_maker .header:after { background: url("../images/mtm_logo.svg") left top no-repeat; content: ''; display: inline-block; height: 193px; position: relative; top: 50%; width: 232px; -webkit-background-size: 232px 193px; -moz-background-size: 232px 193px; -o-background-size: 232px 193px; background-size: 232px 193px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media all and (max-width: 480px) { #meet_the_maker .header:after { height: 157px; width: 188px; -webkit-background-size: 188px 157px; -moz-background-size: 188px 157px; -o-background-size: 188px 157px; background-size: 188px 157px; } } #meet_the_maker .content { text-align: center; margin: 0 auto; padding: 130px 10px; width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { #meet_the_maker .content { width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 60px; padding-bottom: 60px; } } #meet_the_maker h1 { font-size: 36px; font-weight: bold; margin-bottom: 1em; } #meet_the_maker p { font-size: 18px; line-height: 1.6em; margin-bottom: 1.6em; } #meet_the_maker p:last-child { margin: 0; } #meet_the_maker .videos { padding-top: 90px; overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { #meet_the_maker .videos { padding-top: 45px; } } #meet_the_maker .videos .video { float: left; font-size: 12px; margin-bottom: 20px; padding: 0 10px; text-align: left; width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #meet_the_maker .videos .video:nth-child(4n+1) { clear: left; } @media all and (max-width: 980px) and (min-width: 0) { #meet_the_maker .videos .video { padding: 0 5px; width: 33.3333%; } #meet_the_maker .videos .video:nth-child(4n+1) { clear: none; } #meet_the_maker .videos .video:nth-child(3n+1) { clear: left; } } @media all and (max-width: 480px) { #meet_the_maker .videos .video { width: 50%; } #meet_the_maker .videos .video:nth-child(3n+1) { clear: none; } #meet_the_maker .videos .video:nth-child(2n+1) { clear: left; } } #meet_the_maker .videos img { display: block; margin-bottom: 1em; max-width: 100%; } #meet_the_maker .videos h4 { margin-bottom: 6px; } #meet_the_maker .videos h5 { color: #666; } #meet_the_maker .event-image { background: url("../images/mtm_event_image.jpg") center center no-repeat; height: 500px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media all and (max-width: 980px) and (min-width: 0) { #meet_the_maker .event-image { height: auto; padding-top: 45%; } } #meet_the_maker .logos { overflow: hidden; } #meet_the_maker .logos li { float: left; padding: 0 10px; width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (max-width: 980px) and (min-width: 0) { #meet_the_maker .logos li { padding: 0 5px; width: 33.3333%; } } @media all and (max-width: 480px) { #meet_the_maker .logos li { width: 50%; } } #meet_the_maker .logos img { display: block; margin-bottom: 1em; max-width: 100%; } #meet_the_maker .schedule { background: #121212; color: #fff; } #meet_the_maker_video { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 999; } #meet_the_maker_video .overlay { background-image: url("../images/quick_view_background.png"); height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 1000; } #meet_the_maker_video .video { background: #fff; left: 50%; margin: -280px 0 0 -440px; padding: 40px 30px 60px 30px; position: fixed; top: 50%; width: 820px; z-index: 1002; } #meet_the_maker_video .video .close { background: url("../images/icon_modal_close.gif") center center no-repeat; display: block; height: 30px; position: absolute; right: 0; top: 0; width: 30px; } #meet_the_maker_video_spinner { height: 100px; left: 50%; margin: -50px 0 0 -50px; position: fixed; top: 50%; width: 100px; z-index: 1001; } #newsletter { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } #newsletter .overlay { width: 100%; height: 100%; background-image: url("../images/newsletter_background.png"); position: fixed; top: 0; left: 0; overflow: hidden; z-index: 1000; } #newsletter_spinner { height: 100px; left: 50%; margin: -50px 0 0 -50px; position: fixed; top: 50%; width: 100px; z-index: 1001; } #newsletter_modal_form { background: #fff; height: 460px; left: 50%; margin: -230px 0 0 -330px; position: fixed; top: 50%; width: 660px; z-index: 1002; } #newsletter_modal_form .close { color: #666; display: block; float: right; font-size: 13px; letter-spacing: 1px; position: absolute; right: 15px; text-align: right; top: 15px; } #newsletter_modal_form .heading { padding-top: 80px; } #newsletter_modal_form .heading h3 { font-size: 48px; line-height: 1em; text-align: center; } #newsletter_modal_form fieldset { margin-top: 32px; text-align: center; } #newsletter_modal_form fieldset label { color: #8e8e8e; display: block; font-size: 14px; margin-bottom: 10px; } #newsletter_modal_form fieldset label span { color: #ff3000; } #newsletter_modal_form fieldset label.option { color: #111; display: inline; font-size: 14px; margin: 0; text-transform: none; } #newsletter_modal_form fieldset input[type=text] { border: 1px solid #ccc; font-size: 14px; padding: 6px; width: 300px; } #newsletter_modal_form button { background: #000; border: 0; color: #fff; font-size: 16px; line-height: 1em; padding: 14px 48px; } #newsletter_modal_form fieldset input.validation-failed { border-color: #ff3000; } #newsletter_modal_form .complete { margin-top: 32px; text-align: center; } #newsletter_modal_form .complete p { color: #333; font-size: 18px; line-height: 1.4em; margin-top: 12px; } #newsletter_modal_form .complete a { background: #2ae98f; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; color: #fff; display: inline-block; height: 100px; font-size: 16px; line-height: 100px; margin-top: 30px; text-align: center; text-decoration: none; width: 100px; } #newsletter_modal_form .complete a:hover { text-decoration: underline; } #newsletter_page { margin: 0 0 60px 0; } #newsletter_form { overflow: hidden; padding: 150px 0; text-align: center; } #newsletter_form h1 { font-size: 60px; line-height: 1em; margin-bottom: 20px; } #newsletter_form form fieldset { overflow: hidden; padding: 20px 0; } #newsletter_form form fieldset label { color: #888; display: block; font-size: 13px; margin-bottom: 10px; } #newsletter_form form fieldset label span { color: #ff3000; } #newsletter_form form fieldset label.option { color: #111; display: inline; font-size: 14px; margin: 0; text-transform: none; } #newsletter_form form fieldset input[type=text] { border: 1px solid #ccc; font-size: 14px; padding: 6px; width: 300px; } #newsletter_form form fieldset input.validation-failed { border-color: #ff3000; } #newsletter_form form button { background: #000; border: 0; color: #fff; display: inline-block; font-size: 18px; font-weight: bold; line-height: 1em; margin-top: 20px; padding: 1em 4em; } #newsletter_form .complete p { color: #333; font-size: 18px; line-height: 1.4em; margin-top: 12px; } #newsletter_grid { margin: 0 10px; } #newsletter_grid img { max-width: 100%; width: 100%; } @media all and (max-width: 980px) { body.cms-newsletter-facebook .container, body.cms-newsletter-facebook .col2-left-layout, body.cms-newsletter-facebook .account-login { width: 100%; } } .opc-wrapper { margin: 0 auto; width: 1200px; } @media all and (min-width: 1480px) { .opc-wrapper { width: 1440px; } } @media all and (max-width: 1240px) { .opc-wrapper { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .opc-wrapper { min-width: 320px; width: 100%; } } #checkoutSteps { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 75%; /* .customselect { background: #fff; border: 1px solid #111; font-size: 14px; line-height: 1em; padding: 16px; position: relative; width: 100%; @include box-sizing(border-box); .validation-advice { display: none !important; } } .customselect-input { height: 44px; width: 100%; } .customselect-feedback { vertical-align: middle; } .customselect-button { height: 100%; position: absolute; right: 15px; top: 0; width: 15px; &:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #111; content: ''; height: 0; position: absolute; left: 0; margin-top: -4px; top: 50%; width: 0; } } .customselect-populated { } */ } @media all and (max-width: 1240px) { #checkoutSteps { width: 100%; } } #checkoutSteps .section { margin-bottom: 10px; } #checkoutSteps .section:last-child { margin-bottom: 0; } #checkoutSteps .section.allow .step-title { cursor: pointer; } #checkoutSteps .section.active .step-title { cursor: auto; } #checkoutSteps .step-title { background: #fff; color: #111; font-size: 18px; margin-bottom: 1px; padding: 30px; } #checkoutSteps .step-title h2 { font-weight: bold; font-size: 18px; } #checkoutSteps .step-title .number { display: none; } #checkoutSteps .step { background: #fff; padding: 30px; position: relative; } #checkoutSteps a { color: #111; text-decoration: underline; } #checkoutSteps .back-link a { background: transparent; color: #666; font-size: 14px; font-weight: normal; line-height: 18px; } #col-right-opcheckout { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: right; width: 25%; } @media all and (max-width: 1240px) { #col-right-opcheckout { display: none; } } #col-right-opcheckout .block-title { background: #fff; color: #111; font-size: 18px; margin-bottom: 1px; padding: 30px; } #col-right-opcheckout .block-title strong { font-weight: bold; } #col-right-opcheckout .block-content { background: #fff; padding: 30px; } #col-right-opcheckout dt { color: #999; font-size: 18px; margin-bottom: 10px; } #col-right-opcheckout dt a { color: #999; font-size: 14px; } #col-right-opcheckout dt.complete { color: #333; } #col-right-opcheckout dt.complete a { color: #666; font-size: 14px; } #col-right-opcheckout dd { margin-bottom: 20px; } #col-right-opcheckout dd.complete, #col-right-opcheckout dd.complete a { color: #666; font-style: italic; } #col-right-opcheckout .changelink { float: right; } #col-right-opcheckout .changelink .separator { display: none; } #col-right-opcheckout .separator { color: #fff; } #col-right-opcheckout address { line-height: 1.4em; } #col-right-opcheckout dd p { margin-bottom: 10px; } #col-right-opcheckout dd table { width: 100%; line-height: 1.4em; } #col-right-opcheckout dd table th { font-weight: normal; text-align: left; } #col-right-opcheckout .block-help { margin-top: 10px; } #col-right-opcheckout .block-help h3 { background: #fff; color: #111; font-size: 18px; font-weight: bold; margin-bottom: 20px; } #col-right-opcheckout .block-help p { font-size: 18px; line-height: 1.2em; } #col-right-opcheckout .block-help .button-chat { background: transparent; border: 1px dotted #111; color: #111; font-size: 18px; padding: 18px 0; text-align: center; width: 100%; } .checkout-onepage-index .magento { background: #eee; padding: 80px 0; } .checkout-onepage-index .magento .page-title { background: #fff; margin: 0 10px 20px 10px; padding: 20px 30px; } .checkout-onepage-index .magento .page-title h1 { color: #111; border: 0; font-size: 36px; line-height: 1em; margin: 0; padding: 0; text-transform: none; } .checkout-onepage-index .magento .col2-set { overflow: hidden; } .checkout-onepage-index .magento .col-1 { float: left; margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index .magento .col-1 { float: none; width: 100%; } } .checkout-onepage-index .magento .col-2 { float: left; margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index .magento .col-2 { float: none; width: 100%; } } .checkout-onepage-index .magento h4 { color: #111; font-size: 18px; font-weight: bold; margin-bottom: 1.4em; } .checkout-onepage-index .magento p { margin-bottom: 1.4em; } .checkout-onepage-index .magento p:last-child { margin-bottom: 0; } .checkout-onepage-index .magento .form-list li { margin-bottom: 1.2em; } .checkout-onepage-index .magento .form-list label { margin-bottom: 1em; } .checkout-onepage-index .magento .form-list .input-box + label { margin-bottom: 0; } .checkout-onepage-index .magento .form-alt label { margin-bottom: 1em; } .checkout-onepage-index .magento .fields { overflow: hidden; } .checkout-onepage-index .magento .fields .field { float: left; padding-bottom: 1.4em; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index .magento .fields .field { float: none; width: 100%; } } .checkout-onepage-index .magento form label { color: #333; display: inline-block; } .checkout-onepage-index .magento form input[type=text], .checkout-onepage-index .magento form input[type=password], .checkout-onepage-index .magento form input[type=email], .checkout-onepage-index .magento form textarea { background: #fff; border: 1px solid #111; padding: 15px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 400ms ease; -moz-transition: border-color 400ms ease; -o-transition: border-color 400ms ease; transition: border-color 400ms ease; } .checkout-onepage-index .magento form input[type=radio], .checkout-onepage-index .magento form input[type=checkbox] { margin: 1px 2px 0 1px; } .checkout-onepage-index .magento form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-background-size: 12px; -moz-background-size: 12px; -o-background-size: 12px; background-size: 12px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzMuNjMycHgiIGhlaWdodD0iMjkuMTI1cHgiIHZpZXdCb3g9IjAgMCAzMy42MzIgMjkuMTI1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMy42MzIgMjkuMTI1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIHBvaW50cz0iMTYuODE2LDI5LjEyNSA4LjQwOCwxNC41NjMgMCwwIDE2LjgxNiwwIDMzLjYzMiwwIDI1LjIyNCwxNC41NjMgIi8+DQo8L3N2Zz4NCg=="); background-position: 97% center; background-position: right 16px center; background-repeat: no-repeat; border: 1px solid #111; cursor: pointer; height: 49px; line-height: 1em; padding: 0 16px; position: relative; width: 100%; } .checkout-onepage-index .magento form select::-ms-expand { display: none; } .checkout-onepage-index .magento .buttons-set { padding-top: 1em; } .checkout-onepage-index .magento .button { font-size: 18px; } .checkout-onepage-index .magento p.required { display: block; font-size: 14px; margin: 0; padding-top: 20px; } .checkout-onepage-index .magento .validation-error input[type=text], .checkout-onepage-index .magento .validation-error input[type=password], .checkout-onepage-index .magento .validation-error input[type=email], .checkout-onepage-index .magento .validation-error textarea { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-color: #ff3000; } .checkout-onepage-index .magento .validation-failed { border-color: #ff3000; /**/ } .checkout-onepage-index .magento .validation-advice { margin-top: 4px; } .checkout-onepage-index .magento .please-wait { display: inline-block; position: absolute; padding: 20px; bottom: 0; right: 0; text-indent: -9999px; } .checkout-onepage-index .magento .please-wait img { float: right; display: block; } @-moz-document url-prefix() { select { background-image: none !important; -moz-appearance: menulist !important; height: 50px !important; } } #checkout-step-login input[type=text], #checkout-step-login input[type=password] { width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-login input[type=text], #checkout-step-login input[type=password] { width: 100%; } } #checkout-step-login .col-2 strong { display: inline-block; font-weight: bold; margin-bottom: 1.4em; } #checkout-step-login .col-2 ul { list-style-type: disc; margin-bottom: 1em; } #checkout-step-login .col-2 li { line-height: 1.4em; margin-left: 1em; } #checkout-step-login .col-2 .form-list { list-style: none; } #checkout-step-login .col-2 .form-list li { line-height: 1em; margin-left: 0; } #checkout-step-billing .input-box, #checkout-step-shipping .input-box { padding-right: 20px; } #checkout-step-billing .control .input-box, #checkout-step-shipping .control .input-box { padding: 0; } #checkout-step-billing .name-firstname, #checkout-step-shipping .name-firstname { clear: left; } #checkout-step-billing .add-field .input-box, #checkout-step-shipping .add-field .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-billing .add-field .input-box, #checkout-step-shipping .add-field .input-box { width: 100%; } } #checkout-step-billing .buttons-set, #checkout-step-shipping .buttons-set { display: inline-block; overflow: hidden; } #checkout-step-billing .back-link, #checkout-step-shipping .back-link { float: right; margin-bottom: 0; } #checkout-step-billing .back-link a, #checkout-step-shipping .back-link a { text-decoration: none; } .checkout-onepage-index [for=billing\:company] + .input-box, .checkout-onepage-index [for=billing\:email] + .input-box, .checkout-onepage-index [for=billing\:street1] + .input-box, .checkout-onepage-index [for=billing\:street2] + .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index [for=billing\:company] + .input-box, .checkout-onepage-index [for=billing\:email] + .input-box, .checkout-onepage-index [for=billing\:street1] + .input-box, .checkout-onepage-index [for=billing\:street2] + .input-box { width: 100%; } } .checkout-onepage-index [for=shipping\:company] + .input-box, .checkout-onepage-index [for=shipping\:email] + .input-box, .checkout-onepage-index [for=shipping\:street1] + .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index [for=shipping\:company] + .input-box, .checkout-onepage-index [for=shipping\:email] + .input-box, .checkout-onepage-index [for=shipping\:street1] + .input-box { width: 100%; } } #opc-shipping_method .sp-methods li { margin-bottom: 1em; } #opc-shipping_method .sp-methods li:last-child { margin-bottom: 0; } #opc-shipping_method dt { color: #111; font-size: 18px; font-weight: bold; margin-bottom: 1em; } #opc-shipping_method dd { margin-bottom: 30px; } #opc-shipping_method .description { color: #666; } #opc-shipping_method .international-note { font-size: 12px; line-height: 1.4em; margin-top: 1.4em; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #opc-shipping_method .international-note { width: 100%; } } #opc-shipping_method .buttons-set { display: inline-block; overflow: hidden; } #opc-shipping_method .back-link { float: right; margin-bottom: 0; } #opc-shipping_method .back-link a { text-decoration: none; } #onepage-checkout-shipping-method-additional-load .add-gift-message { padding: 1em 0; } #onepage-checkout-shipping-method-additional-load .add-gift-message h3 { margin-bottom: 1em; } #onepage-checkout-shipping-method-additional-load p { margin-bottom: 1em; } #onepage-checkout-shipping-method-additional-load .gift-options-for-order > div > a { display: inline-block; margin-bottom: 1em; } #onepage-checkout-shipping-method-additional-load .gift-message-form { margin-bottom: 2em; } #onepage-checkout-shipping-method-additional-load .input-box { padding-right: 20px; } #opc-payment .sp-methods { margin-bottom: 20px; } #opc-payment .sp-methods dt > label { color: #111; font-weight: bold; } #opc-payment .sp-methods li { margin-bottom: 1em; } #opc-payment .sp-methods li:last-child { margin-bottom: 0; } #opc-payment dd { margin-bottom: 1.4em; } #opc-payment .form-list { padding-top: 20px; } #opc-payment .form-list .v-fix { margin-bottom: 1em; } #opc-payment input[type=text] { width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #opc-payment input[type=text] { width: 100%; } } #opc-payment .cvv-what-is-this { display: none; } #opc-payment .buttons-set { clear: left; display: inline-block; overflow: hidden; } #opc-payment .back-link { float: right; margin-bottom: 0; } #opc-payment .back-link a { text-decoration: none; } .checkout-onepage-index [for=authorizenet_cc_type] + .input-box, .checkout-onepage-index [for=authnetcim_payment_id] + .input-box, .checkout-onepage-index [for=authnetcim_cc_type] + .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index [for=authorizenet_cc_type] + .input-box, .checkout-onepage-index [for=authnetcim_payment_id] + .input-box, .checkout-onepage-index [for=authnetcim_cc_type] + .input-box { width: 100%; } } .checkout-onepage-payment-additional-customerbalance { margin-bottom: 20px; } .checkout-onepage-index #authorizenet_cc_type_exp_div .input-box, .checkout-onepage-index #authnetcim_cc_type_exp_div .input-box { overflow: hidden; } .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; } @media all and (max-width: 480px) { .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix { float: none; width: 100%; } } .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix:last-child, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix:last-child { padding-left: 20px; } @media all and (max-width: 480px) { .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix:last-child, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix:last-child { padding-left: 0; } } #need-checkout-additional { border-top: 1px solid #eee; margin-bottom: 30px; overflow: hidden; } #need-checkout-additional h3 { font-weight: bold; font-size: 18px; padding-top: 30px; margin-bottom: 30px; } #need-checkout-additional .checkout-coupon-code { margin-bottom: 20px; } @media all and (max-width: 980px) and (min-width: 0) { #need-checkout-additional form input[type=text] { width: 50%; } } @media all and (max-width: 480px) { #need-checkout-additional form input[type=text] { display: block; margin-bottom: 10px; width: 100%; } } #need-checkout-additional label { display: block; margin-bottom: 10px; } #need-checkout-additional .input-box { margin-bottom: 10px; } #need-checkout-additional .input-box * { vertical-align: middle; } #need-checkout-additional .button { margin-left: 8px; min-width: 114px; padding-top: 15px; padding-bottom: 16px; } @media all and (max-width: 480px) { #need-checkout-additional .button { font-size: 14px; padding: 12px 16px; margin: 0; min-width: 0; } } #need-checkout-additional #button-coupon-remove { display: none; } #need-checkout-additional #button-gift-card-remove { display: none; } #need-checkout-additional .message { display: none; margin-top: 1em; } #need-checkout-additional .success { color: #2ae98f; } #need-checkout-additional .error { color: #ff3000; } #checkout-step-review .data-table { font-size: 14px; width: 100%; } #checkout-step-review .data-table .even { background: #fff; } #checkout-step-review th { font-size: 18px; font-weight: bold; text-align: left; padding: 0 1em 1em 0; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-review th { font-size: 14px; } } #checkout-step-review th.a-center { width: 10%; text-align: right; } #checkout-step-review th:last-child { padding-right: 0; } #checkout-step-review td { padding: 1.4em 1em 1.4em 0; text-align: left; } #checkout-step-review .product-name { font-weight: bold; font-size: 14px; } #checkout-step-review .product-image { float: left; margin-right: 1em; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-review .product-image { display: none; } } #checkout-step-review .item-options { line-height: 1.4em; margin-top: 1em; overflow: hidden; } #checkout-step-review .item-options dt { float: left; margin-right: 4px; clear: left; } #checkout-step-review .item-options dt:after { content: ':'; } #checkout-step-review .item-options dd { float: left; } #checkout-step-review .nobr { white-space: nowrap; } #checkout-step-review .f-left { margin-bottom: 20px; } #checkout-step-review .a-right { text-align: right; } #checkout-step-review tbody td { border-bottom: 1px solid #ececec; } #checkout-step-review tbody td.a-center, #checkout-step-review tbody td.a-right { width: 10%; text-align: right; } #checkout-step-review tbody td.last { padding-right: 0; } #checkout-step-review tfoot { font-size: 18px; font-weight: bold; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-review tfoot { font-size: 14px; } } #checkout-step-review tfoot td { border: 0; padding: 1.4em 1em 0 0; } #checkout-step-review tfoot td.last { padding-right: 0; } #checkout-step-review strong { font-weight: bold; } #checkout-review-table-wrapper { margin-bottom: 20px; } #product { margin: 30px 0; } @media all and (max-width: 980px) and (min-width: 0) { #product { margin: 0; } } #product a { color: #111; text-decoration: none; } #product a:hover { text-decoration: underline; } #product .container, #product .col2-left-layout, #product .account-login { overflow: hidden; } #product .media { float: left; margin-right: 50px; width: 550px; } @media all and (max-width: 980px) and (min-width: 0) { #product .media { float: none; margin: 10px 10px 0 10px; width: auto; } } #product .media .image { cursor: pointer; float: left; margin: 0 10px; position: relative; width: 460px; } @media all and (max-width: 980px) and (min-width: 0) { #product .media .image { display: none; } } #product .media .enlarge { bottom: 0; right: 0; position: absolute; } @media all and (max-width: 980px) and (min-width: 0) { #product .media .enlarge { display: none; } } #product .media .enlarge a { background: url("../images/product_enlarge.png") left top no-repeat; display: block; height: 42px; width: 42px; } #product .media .thumbs { float: left; width: 70px; } @media all and (max-width: 980px) and (min-width: 0) { #product .media .thumbs { display: none; } } #product .media .thumbs li { margin-bottom: 10px; } #product .media .thumbs img { display: block; } #product .details { float: left; margin: 20px 10px 0 10px; width: 460px; } @media all and (max-width: 1240px) { #product .details { float: left; margin: 20px 10px 0 0; width: 350px; } } @media all and (max-width: 980px) and (min-width: 0) { #product .details { float: none; margin: 10px; width: auto; } } #product .details h1 { color: #111; font-size: 18px; font-weight: bold; line-height: 1em; margin-bottom: 8px; text-transform: uppercase; } @media all and (max-width: 980px) and (min-width: 0) { #product .details h1 { font-size: 24px; margin: 0; padding: 0 10px; } } #product .details h2 { color: #333; line-height: 1em; } @media all and (max-width: 980px) and (min-width: 0) { #product .details h2 { border-bottom: 1px solid #000; font-size: 16px; margin: 0 0 10px 0; padding: 5px 10px 10px 10px; } } #product .details h2 a { color: #333; } #product .details h3 { color: #333; font-size: 20px; line-height: 1em; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .price-desktop { display: none; } } #product .details .price-mobile { display: none; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .price-mobile { display: block; } #product .details .price-mobile .original_price { margin: 10px; } #product .details .price-mobile h3 { margin: 10px; } } #product .details .original_price { color: #999; line-height: 1em; margin-bottom: 4px; text-decoration: line-through; } #product .details .out_of_stock { color: #ff3000; font-weight: bold; font-size: 16px; margin: 25px 0 10px 0; } #product .details .alert-stock { margin-bottom: 25px; } #product .details .alert-stock a { font-size: 13px; text-decoration: underline; } #product .details .options { font-size: 10px; margin: 25px 0 30px 0; text-transform: uppercase; } @media all and (max-width: 1240px) { #product .details .options { margin-bottom: 20px; width: 350px; } } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options { margin-top: 20px; margin-bottom: 10px; width: auto; } } #product .details .options > ul { float: left; } @media all and (max-width: 1240px) { #product .details .options > ul { margin-bottom: 20px; } } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options > ul { float: none; margin-bottom: 0; } } #product .details .options > ul > li > a { background: #fff; border: 1px solid #ebebeb; color: #666; display: block; height: 40px; line-height: 40px; padding-left: 15px; position: relative; text-decoration: none; } #product .details .options > ul > li > a.active { background: #ebebeb; } #product .details .options > ul > li > a:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999; content: ''; height: 0; position: absolute; right: 12px; top: 16px; width: 0; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options > ul > li > a:after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #999; top: 13px; } } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options > ul > li { margin-bottom: 10px; } } #product .details .options ul > li { display: block; float: left; margin-right: 20px; position: relative; width: 130px; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options ul > li { float: none; margin-right: 0; width: auto; } } #product .details .options ul > li.disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } #product .details .options ul li ul { border-bottom: 0; display: none; position: absolute; width: 130px; z-index: 999; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options ul li ul { position: static; width: auto; z-index: auto; } } #product .details .options ul li ul li { display: block; width: 130px; } #product .details .options ul li ul li a { background: #ebebeb; color: #666; display: block; height: 40px; line-height: 40px; padding-left: 16px; text-decoration: none; } #product .details .options ul li ul li a:hover { background: #d9d9d9; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options ul li ul li { border-top: 1px solid #ccc; width: auto; } } #product .details .options .quantity { color: #666; float: left; font-size: 12px; margin: 0; } @media all and (max-width: 1240px) { #product .details .options .quantity { margin-bottom: 20px; } } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options .quantity { border: 1px solid #ebebeb; display: block; float: none; overflow: hidden; width: auto; } } #product .details .options .quantity p { float: left; line-height: 40px; margin-right: 10px; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options .quantity p { margin-left: 15px; } } #product .details .options .quantity fieldset { background: #fff; border: 1px solid #ebebeb; color: #666; float: left; height: 40px; width: 40px; } #product .details .options .quantity fieldset:hover { /* border-color: #999; */ } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options .quantity fieldset { border-color: transparent; float: right; width: 75%; } } #product .details .options .quantity fieldset input { background: transparent; border: 0; color: #666; font-size: 12px; line-height: 1em; margin-top: 11px; outline: none; text-align: center; width: 38px; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options .quantity fieldset input { padding-right: 15px; text-align: right; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #product .details .options .validation-advice { color: #ff3000; padding: 6px 0; position: absolute; z-index: -1; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .options .validation-advice { padding: 6px 0 0 0; position: static; z-index: auto; } } #product .details .phone_order { color: #111; line-height: 1.4em; margin: 30px 0; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .phone_order { margin: 30px 10px 0 10px; } } #product .details .buttons-disabled { height: 30px; } #product .details .buttons { margin: 30px 0 60px 0; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .buttons { margin: 0 0 20px 0; } } #product .details .buttons button, #product .details .buttons .wishlist { background: #000; border: 0; color: #fff; display: block; float: left; font-weight: bold; line-height: 1em; margin: 0 1px 0 0; padding: 14px 24px; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .buttons button, #product .details .buttons .wishlist { float: none; margin: 0 0 10px 0; padding: 14px 10px; text-align: left; width: auto; } } #product .details .buttons button::-moz-focus-inner { border: 0; padding: 0; } #product .details .buttons button:first-child { margin-right: 20px; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .buttons button { width: 100%; } } #product .details .buttons .wishlist { background: #ccc; font-weight: bold; line-height: 1em; text-decoration: none; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .buttons .split-button { float: none; margin-right: 0; width: 100%; } } #product .details .buttons .split-button.light { display: block; float: left; } #product .details .buttons .split-button.light * { text-decoration: none; } #product .details .buttons .split-button.light strong { background: #ccc; border: 0; color: #fff; padding: 14px 48px 14px 24px; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .buttons .split-button.light strong { padding: 14px 10px; } } #product .details .buttons .split-button.light .change:after { right: 22px; top: 20px; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .buttons .split-button.light .change:after { right: 14px; } } @media all and (max-width: 980px) and (min-width: 0) { #product .details .additional { margin: 0 10px; } } #product .details .additional a { color: #666; text-decoration: underline; } #product .details .additional .tab { font-weight: bold; } #product .details .additional ul { margin-bottom: 20px; overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .additional ul { margin-bottom: 10px; } } #product .details .additional ul li { float: left; margin-right: 24px; } #product .details .additional ul li a { border-bottom: 1px solid transparent; color: #666; display: block; line-height: 1em; padding: 0 0 3px 0; text-decoration: none; } @media all and (max-width: 980px) and (min-width: 0) { #product .details .additional ul li a { border-bottom: 1px solid #666; margin-bottom: 10px; } } #product .details .additional ul li a:hover, #product .details .additional ul li a.active { border-bottom: 1px solid #666; } #product .details .additional p, #product .details .additional div { color: #666; display: none; font-size: 12px; line-height: 1.4em; } #product .details .additional .shipping h4 { margin-bottom: 10px; } #product .details .additional .shipping table { margin-bottom: 12px; width: 100%; } #product .details .additional .shipping table td { padding-bottom: 2px; } #product .details .additional .shipping table tfoot td { padding-top: 8px; } #product .details .additional .status { color: #ff3000; } #product .details .additional .status a { color: #ff3000; } #product .details .additional .status a:hover, #product .details .additional .status a.active { border-color: #ff3000; } #product .share { float: left; margin: 20px 10px 0 10px; width: 100px; } @media all and (min-width: 1480px) { #product .share { margin-right: 130px; } } @media all and (max-width: 1240px) { #product .share { clear: both; float: left; margin: 40px 0 0 10px; width: 220px; } } #product .chat { float: left; margin: 20px 10px 0 10px; width: 100px; } @media all and (min-width: 1480px) { #product .chat { margin-right: 130px; } } @media all and (max-width: 1240px) { #product .chat { clear: both; } } @media all and (max-width: 980px) and (min-width: 0) { #product .chat { display: none; } } #product .chat .circle { background: #e8e8e8; color: #999; display: block; float: right; height: 100px; text-align: center; text-decoration: none; width: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } @media all and (max-width: 980px) and (min-width: 0) { #product .chat .circle { float: none; margin: 0 auto; } } #product .chat span { display: block; line-height: 1.2em; padding: 0 1em; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #product .chat-available .circle { background: #fffb29; border: 2px solid #fffb29; color: #111; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #product .chat-leave-message .circle { background: #fff; border: 2px solid #111; color: #111; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #product .related { float: left; margin: 0; width: 600px; } @media all and (min-width: 1480px) { #product .related { margin-top: 20px; padding: 0; width: 120px; } } @media all and (max-width: 1240px) { #product .related { float: left; width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { #product .related { display: none; } } #product .related h5 { border-top: 1px solid #ccc; line-height: 1em; margin: 40px 10px 15px 10px; padding: 40px 0 0 0; } @media all and (min-width: 1480px) { #product .related h5 { border: 0; line-height: 1.2em; margin: 0 10px; padding: 0; } } #product .related li { float: left; margin: 0 10px; width: 100px; } @media all and (min-width: 1480px) { #product .related li { margin: 10px 10px 0 10px; } } #product .bottom { width: 100%; height: 30px; float: left; } #product .recommended { float: left; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #product .recommended { display: none; } } #product .recommended a { text-decoration: none; } #product .recommended a:hover { text-decoration: underline; } #product .recommended h5 { border-top: 1px solid #f1f1f1; line-height: 1em; margin: 0 10px 15px 10px; padding: 40px 0 0 0; } #product .recommended .product { color: #666; float: left; font-size: 12px; height: 365px; margin: 0 10px; overflow: hidden; width: 220px; } #product .recommended .product img { display: block; width: 220px; } #product .recommended .product h3 { color: #333; line-height: 1em; margin-top: 12px; } #product .recommended .product h3 a { color: #333; } #product .recommended .product h4 { line-height: 1em; margin-top: 6px; } #product .recommended .product h4 a { color: #666; } #product .recommended .fifth { display: block; } @media all and (max-width: 1240px) { #product .recommended .fifth { display: none; } } #product .recommended .sixth { display: none; } @media all and (min-width: 1480px) { #product .recommended .sixth { display: block; } } #product .giftcard-form .form-list input[type=text], #product .giftcard-form .form-list textarea { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { #product .giftcard-form .form-list input[type=text], #product .giftcard-form .form-list textarea { min-width: 320px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #product .giftcard-form .availability { display: none; } .catalog-product-view .shipping-promo { display: none; } #modal { height: 100%; left: 0; overflow-y: auto; position: fixed; top: 0; width: 100%; z-index: 999; } @media all and (max-width: 980px) and (min-width: 0) { #modal { display: none !important; } } #modal .overlay { background: #fff; background: rgba(255, 255, 255, 0.95); height: 100%; left: 0; position: absolute; position: fixed; top: 0; width: 100%; z-index: -1; } #modal .close { background: url("../images/icon_media_close.gif") center center no-repeat; display: block; height: 70px; width: 70px; top: 0; right: 0; position: absolute; position: fixed; } #modal .gallery-wrapper { width: 100%; } #modal .gallery { margin: 0 auto; padding: 70px 0 60px 0; position: relative; text-align: center; width: 880px; z-index: 1; } #modal .gallery li { display: inline-block; margin-bottom: 10px; } #modal .gallery img { display: block; left: 50%; position: relative; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } #product_sizing { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9999; } #product_sizing .overlay { background-image: url("../images/quick_view_background.png"); height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 1000; } #product_sizing_spinner { height: 100px; left: 50%; margin: -50px 0 0 -50px; position: fixed; top: 50%; width: 100px; z-index: 1001; } #product_sizing .content { background: #fff; left: 50%; margin: -280px 0 0 -440px; padding: 40px 30px; position: fixed; top: 50%; width: 820px; z-index: 1002; } @media all and (max-width: 980px) and (min-width: 0) { #product_sizing .content { left: 0; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #product_sizing .content .close { background: url("../images/icon_modal_close.gif") center center no-repeat; display: block; height: 30px; position: absolute; right: 0; top: 0; width: 30px; } #product_sizing .content .chart { font-size: 14px; height: 460px; overflow: auto; } #product_sizing a { color: #222; } #product_sizing h4 { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 16px; margin-bottom: 18px; } #product_sizing p { line-height: 1.6em; margin-bottom: 25px; } #product_sizing table { width: 100%; margin-bottom: 25px; } #product_sizing table td { padding: 10px; white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { #product_sizing table td { font-size: 12px; white-space: normal; } } @media all and (max-width: 480px) { #product_sizing table td td { font-size: 11px; padding: 5px 2px; word-break: keep-all; } } #product_sizing table .odd td { background-color: #eaeaea; } #product_sizing hr { height: 1px; background-color: #d5d5d5; border: 0; margin-bottom: 25px; } #product_sizing .images { display: table; list-style: none; margin-bottom: 30px; overflow: hidden; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #product_sizing .images { display: block; } } #product_sizing .images li { display: table-cell; margin: 0; padding-right: 15px; vertical-align: middle; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #product_sizing .images li:nth-child(2n) { padding-left: 15px; padding-right: 0; } @media all and (max-width: 980px) and (min-width: 0) { #product_sizing .images li { display: block; padding: 0; text-align: center; width: 100%; } #product_sizing .images li:nth-child(2n) { padding: 0; } } #product_sizing .images img { display: inline-block; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #product_sizing .images img { margin-bottom: 15px; width: auto; max-width: 100%; } } #product_sizing .images .image-mens-pants { padding-right: 20px; text-align: right; vertical-align: top; } #product_sizing .images .image-mens-pants img { width: auto; } @media all and (max-width: 980px) and (min-width: 0) { #product_sizing .images .image-mens-pants { padding: 0; text-align: center; } } #product_sizing .images .image-mens-shorts { padding-left: 20px; text-align: left; vertical-align: top; } #product_sizing .images .image-mens-shorts img { width: auto; } @media all and (max-width: 980px) and (min-width: 0) { #product_sizing .images .image-mens-shorts { padding: 0; text-align: center; } } #rss { margin: 0 0 60px 0; } #rss a { text-decoration: none; } #rss a:hover { text-decoration: underline; } #rss h1 { border-bottom: 1px solid #ccc; color: #8d8d8d; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 22px; margin: 40px 10px; padding: 0 0 10px 0; } #rss h3 { border-bottom: 1px solid #ccc; color: #111; font-size: 18px; line-height: 1em; margin-bottom: 24px; padding-bottom: 8px; } #rss .feeds { margin: 0 10px; } #rss .feeds a { display: block; } #rss .feeds th, #rss .feeds td { text-align: left; } #rss .feeds .label a { color: #111; } #rss .feeds .url { text-align: right; } #search_modal { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #search_modal .overlay { background: #fff; background: rgba(255, 255, 255, 0.95); height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 0; } @media all and (max-width: 980px) and (min-width: 0) { #search_modal { display: none !important; } } #search_modal_container { margin-top: 120px; min-height: 100px; position: relative; } #search_form, #search_modal_form { margin: 60px 10px; overflow: hidden; } #search_form fieldset, #search_modal_form fieldset { border-bottom: 1px solid #ccc; display: block; overflow: hidden; } #search_form fieldset input, #search_modal_form fieldset input { background: transparent; border: 0; color: #ccc; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 58px; margin: 0; outline: none; padding: 0; width: 90%; } @media all and (max-width: 980px) and (min-width: 0) { #search_form fieldset input, #search_modal_form fieldset input { width: 75%; } } #search_form fieldset input:hover, #search_form fieldset input.active, #search_modal_form fieldset input:hover, #search_modal_form fieldset input.active { color: #666; } #search_form fieldset button, #search_modal_form fieldset button { background: #ccc; border: 0; color: #fff; float: right; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 70px; margin: 0; padding: 0 24px; } #search_form fieldset button:hover, #search_modal_form fieldset button:hover { background: #666; cursor: pointer; } #search_form p, #search_modal_form p { margin: 20px 0; } #search_form p a, #search_modal_form p a { color: #666; font-size: 12px; } #search_results { padding: 30px 0 0 0; } #search_results a { text-decoration: none; } #search_results a:hover { text-decoration: underline; } #search_results #search_form { margin: 40px 10px; } #search_results #search_form fieldset input:hover, #search_results #search_form fieldset input.active, #search_results #search_modal_form fieldset input:hover, #search_results #search_modal_form fieldset input.active { color: #222; } #search_results h2 { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 30px; margin: 40px 10px; } #search_results p { font-size: 12px; line-height: 1.6em; margin: 0 10px; } #search_results h1 { padding: 0 10px; } #search_results .no_results { margin-bottom: 60px; padding: 0 10px; } #search_results .no_results h2 { border-bottom: 1px solid #ccc; color: #bababa; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 72px; line-height: 1em; margin: 30px 0; padding: 30px 0; } #search_results .no_results h3 { color: #bababa; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 30px; line-height: 1.3em; } #search_results .no_results ul { border-bottom: 1px solid #ccc; color: #bababa; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 30px; line-height: 1.3em; list-style: none; margin: 0 0 30px 0; padding: 0 0 30px 0; } #search_results .no_results ul a { color: #000; } #search_results .no_results p { font-size: 12px; margin: 10px 0 0 0; } #search_results .no_results p a { color: #111; text-decoration: underline; } #search_results .no_results .new_search { background: #2ae98f; color: #fff; display: block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; height: 100px; line-height: 100px; margin-bottom: 30px; text-align: center; width: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } #search_autocomplete, #search_modal_autocomplete { left: 0 !important; position: relative !important; top: 0 !important; width: auto !important; } #search_autocomplete ul, #search_modal_autocomplete ul { color: #ccc; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 58px; line-height: 1.2em; margin-top: 20px; } #search_autocomplete ul li, #search_modal_autocomplete ul li { cursor: pointer; } #search_autocomplete ul li:hover, #search_modal_autocomplete ul li:hover { color: #666; } #search_autocomplete ul li span, #search_modal_autocomplete ul li span { display: none; } nav #search { display: none; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 12px; min-height: 100px; overflow: hidden; padding: 10px 0; } nav #search_form { letter-spacing: normal; margin: 30px 10px; text-transform: none; } .catalogsearch-result-index nav .row { border-bottom: 0 !important; } .catalogsearch-result-index #category .left-container { margin: 0 auto; max-width: 1440px; padding-right: 0; width: 1200px; } @media all and (min-width: 1480px) { .catalogsearch-result-index #category .left-container { width: 1440px; } } @media all and (max-width: 1240px) { .catalogsearch-result-index #category .left-container { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .catalogsearch-result-index #category .left-container { min-width: 320px; width: 100%; } } #warby-parker { margin: 0 0 60px 0; } #warby-parker a { text-decoration: none; } #warby-parker a:hover { text-decoration: underline; } #warby-parker .header { margin: 100px 10px; text-align: center; width: 1180px; } @media all and (min-width: 1480px) { #warby-parker .header { width: 1420px; } } @media all and (max-width: 1240px) { #warby-parker .header { width: 940px; } } #warby-parker .header h1 { font-size: 30px; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; line-height: 1em; margin-bottom: 25px; } #warby-parker .header p { line-height: 1.4em; } #warby-parker .grid { margin: 0 auto; overflow: hidden; width: 1053px; } @media all and (min-width: 1480px) { #warby-parker .grid { width: 1404px; } } @media all and (max-width: 1240px) { #warby-parker .grid { width: 939px; } } #warby-parker .grid .image { float: left; margin: 0 1px 1px 0; width: 350px; } @media all and (min-width: 1480px) { #warby-parker .grid .image { width: 350px; } } @media all and (max-width: 1240px) { #warby-parker .grid .image { width: 312px; } } #warby-parker .grid .image img { display: block; max-width: 100%; } .wishlist-management { margin-bottom: 20px; } .wishlist-management .sub-title h2 { font-size: 18px; line-height: 1em; margin-bottom: 4px; } .wishlist-management .sub-title .note-msg { color: #999; margin-bottom: 10px; } .wishlist-management .table-caption { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; } #wishlist-create-button { background: #000; border: 0; color: #fff; display: block; float: right; font-weight: bold; line-height: 1em; margin: 0 1px 0 0; padding: 14px 24px; } @media all and (max-width: 480px) { #wishlist-create-button { display: block; float: none; margin-bottom: 30px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #wishlist-table { border-bottom: 1px solid #f1f1f1; margin: 0 0 30px 0; width: 100%; } #wishlist-table th { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-weight: normal; padding: 0 0 10px 0; text-align: left; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table th { padding: 0 4px 10px 4px; } } #wishlist-table td, #wishlist-table tbody td { padding: 20px 0; text-align: left; vertical-align: top; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table td, #wishlist-table tbody td { padding: 20px 4px; } } #wishlist-table tbody td { text-align: left; vertical-align: middle; } #wishlist-table .even { background-color: #fff; } #wishlist-table textarea { background-color: #e5e5e5; border: none; width: 300px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table textarea { display: none; max-width: 100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table .product-image img { height: auto !important; min-width: 40px; max-width: 100%; width: 100%; } } #wishlist-table .product-name, #wishlist-table .description, #wishlist-table .price-box, #wishlist-table .add-to-cart-alt { margin-bottom: 10px; } #wishlist-table .price-box .old-price, #wishlist-table .price-box .price-label { display: none; } #wishlist-table .cart-cell { padding-right: 40px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table .cart-cell { padding-right: 10px; } } #wishlist-table .cart-cell .btn-cart { background: #000; border: 0; color: #fff; display: block; font-weight: bold; line-height: 1em; margin: 15px 0 0 0; padding: 14px 24px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table .cart-cell .btn-cart { font-size: 12px; max-width: 100%; padding: 4px; width: 100%; white-space: nowrap; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #wishlist-table .item-options dl { overflow: hidden; } #wishlist-table .item-options dt, #wishlist-table .item-options dd { float: left; margin: 0 10px 0 0 !important; padding: 0; } #wishlist-table .item-manage { margin-top: 8px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table .item-manage .split-button { margin: 0 0 10px 0; width: 100%; } } @media all and (max-width: 480px) { #wishlist-table .item-manage { display: none; } } #wishlist-table .description { display: none; } #wishlist-table .btn-remove2 { white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table .btn-remove2 { white-space: normal; } } #wishlist-table .nobr { white-space: nowrap; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-table .nobr { white-space: normal; } } #wishlist-table .a-center { text-align: left; } #wishlist-table .truncated .truncated_full_value dt { margin-top: 10px; } #wishlist-table .truncated .details { display: none; } .wishlist-index-index .buttons-set2 { margin-bottom: 30px; overflow: hidden; } .wishlist-index-index .buttons-set2 button { margin-right: 1px; } @media all and (max-width: 980px) and (min-width: 0) { .wishlist-index-index .buttons-set2 button { display: block; float: none; margin: 1px 0 0 0; padding-left: 0; padding-right: 0; text-align: center; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .wishlist-index-share p.required { clear: both; margin-bottom: 20px; } .wishlist-index-configure .add-to-links li a { background: #f1f1f1; border: 0; color: #fff !important; display: block; font-weight: bold; float: left; line-height: 1em; margin-right: 1px; padding: 14px 24px; text-decoration: none !important; } .wishlist-index-configure .add-to-links .separator { display: none; } #wishlist_info { margin: 0 auto 60px auto; width: 1200px; } @media all and (min-width: 1480px) { #wishlist_info { width: 1440px; } } @media all and (max-width: 1240px) { #wishlist_info { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_info { width: 100%; } } #wishlist_info a { text-decoration: none; } #wishlist_info a:hover { text-decoration: underline; } #wishlist_info .info-box { border-bottom: 1px solid #f1f1f1; margin: 0 10px; padding-bottom: 30px; } #wishlist_info .info-box h2 { font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 36px; line-height: 1.2em; } #wishlist_info .info-box h3 { font-size: 13px; line-height: 1.4em; } #wishlist_info .items { margin: 30px 0; overflow: hidden; } #wishlist_info .items .product { color: #666; height: 383px; float: left; font-size: 12px; overflow: hidden; position: relative; width: 25%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media all and (min-width: 1480px) { #wishlist_info .items .product { height: 537px; } } @media all and (max-width: 1480px) { #wishlist_info .items .product { height: 460px; } } @media all and (max-width: 1240px) { #wishlist_info .items .product { height: 383px; } } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_info .items .product { padding: 0; } } @media all and (max-width: 980px) { #wishlist_info .items .product { height: auto; margin: 10px 0 0 0; padding-bottom: 30px; width: 25%; } #wishlist_info .items .product:nth-of-type(4n+1) { clear: left; } } @media all and (max-width: 780px) { #wishlist_info .items .product { height: auto; margin: 10px 0 0 0; padding-bottom: 30px; width: 33.333%; } #wishlist_info .items .product:nth-of-type(4n+1) { clear: none; } #wishlist_info .items .product:nth-of-type(3n+1) { clear: left; } } @media all and (max-width: 580px) { #wishlist_info .items .product { height: auto; margin: 10px 0 0 0; padding-bottom: 30px; width: 50%; } #wishlist_info .items .product:nth-of-type(3n+1) { clear: none; } #wishlist_info .items .product:nth-of-type(2n+1) { clear: left; } } #wishlist_info .items .product .image { position: relative; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_info .items .product .image { margin: 0 10px; width: auto; } } #wishlist_info .items .product .image img { display: block; height: auto; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_info .items .product .image img { width: 100%; } } #wishlist_info .items .product h3 { color: #333; line-height: 1.2em; margin-top: 12px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_info .items .product h3 { margin-left: 10px; margin-right: 10px; } } #wishlist_info .items .product h3 a { color: #333; } #wishlist_info .items .product h4 { line-height: 1.2em; margin-top: 6px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_info .items .product h4 { margin-left: 10px; margin-right: 10px; } } #wishlist_info .items .product h4 a { color: #666; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_info .items .product p { margin-left: 10px; margin-right: 10px; } } #wishlist_info .items .product .colors { color: #2ae98f; white-space: nowrap; } #wishlist_info .items .product .buttons { margin-top: 15px; } #wishlist_info .items .product button { background: #000; border: 0; color: #fff; display: block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1em; margin: 0 1px 0 0; padding: 14px 24px; } #wishlist_info .items .product .comment, #wishlist_info .items .product .checkbox { margin-top: 10px; } #wishlist_info .items .product input[type=checkbox] { margin-left: 0; } #wishlist_info .buttons-set { margin: 0 10px; } #wishlist_info .buttons-set2 { border-top: 1px solid #f1f1f1; overflow: hidden; padding-top: 30px; } #wishlist_info .buttons-set2 button { margin-right: 1px; } #wishlist_info .back-link { display: none; } @media all and (max-width: 600px) { #wishlists-select { display: block; float: none; margin-bottom: 30px; margin-right: 0; } } @media all and (max-width: 600px) { #wishlists-move { display: block; float: none; margin-bottom: 30px; margin-right: 0; } } @media all and (max-width: 600px) { #wishlists-copy { display: block; float: none; margin-bottom: 30px; margin-right: 0; } } #wishlist-public-url { margin-bottom: 20px; overflow: hidden; width: 520px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-public-url { width: 100%; text-align: center; } } #wishlist-public-url strong { display: block; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-weight: normal; margin-bottom: 4px; } #wishlist-public-url textarea { background: #e5e5e5; border: 0; padding: 5px; width: 510px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist-public-url textarea { width: 100%; } } .wishlist-search-index .main, .wishlist-search-results .main { margin: 0 auto; width: 1200px; } @media all and (min-width: 1480px) { .wishlist-search-index .main, .wishlist-search-results .main { width: 1440px; } } @media all and (max-width: 1240px) { .wishlist-search-index .main, .wishlist-search-results .main { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .wishlist-search-index .main, .wishlist-search-results .main { width: 100%; } } .wishlist-search-index .error-msg, .wishlist-search-results .error-msg { color: #bababa; font-family: "Proxima Nova", Helvetica, Arial, sans-serif; font-size: 36px; line-height: 1em; margin: 0 10px; padding-bottom: 40px; } .legend-wishlist-search-results { font-size: 12px; margin: 0 10px 30px 10px; } #wishlist_search_form { color: #666; margin: 0 10px; padding-bottom: 40px; } #wishlist_search_form .fieldset { width: 100%; } #wishlist_search_form .divider { height: 20px; } #wishlist_search_form .form-list input[type=text], #wishlist_search_form .form-list input[type=tel], #wishlist_search_form .form-list input[type=email], #wishlist_search_form .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_search_form .form-list input[type=text], #wishlist_search_form .form-list input[type=tel], #wishlist_search_form .form-list input[type=email], #wishlist_search_form .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #wishlist_search_form .buttons-set { margin-top: 20px; } #wishlist_search_form p.required { clear: both; margin-top: 20px; } #wishlist_search_email_form { color: #666; margin: 0 10px; padding-bottom: 40px; } #wishlist_search_email_form .fieldset { width: 100%; } #wishlist_search_email_form .divider { height: 20px; } #wishlist_search_email_form .form-list input[type=text], #wishlist_search_email_form .form-list input[type=tel], #wishlist_search_email_form .form-list input[type=email], #wishlist_search_email_form .form-list input[type=password] { width: 330px; } @media all and (max-width: 980px) and (min-width: 0) { #wishlist_search_email_form .form-list input[type=text], #wishlist_search_email_form .form-list input[type=tel], #wishlist_search_email_form .form-list input[type=email], #wishlist_search_email_form .form-list input[type=password] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } #wishlist_search_email_form .buttons-set { margin-top: 20px; } #wishlist_search_email_form p.required { clear: both; margin-top: 20px; } #wishlist-search-results { margin: 0 10px; padding-bottom: 40px; } .opc-wrapper { margin: 0 auto; width: 1200px; } @media all and (min-width: 1480px) { .opc-wrapper { width: 1440px; } } @media all and (max-width: 1240px) { .opc-wrapper { width: 960px; } } @media all and (max-width: 980px) and (min-width: 0) { .opc-wrapper { min-width: 320px; width: 100%; } } #checkoutSteps { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 75%; /* .customselect { background: #fff; border: 1px solid #111; font-size: 14px; line-height: 1em; padding: 16px; position: relative; width: 100%; @include box-sizing(border-box); .validation-advice { display: none !important; } } .customselect-input { height: 44px; width: 100%; } .customselect-feedback { vertical-align: middle; } .customselect-button { height: 100%; position: absolute; right: 15px; top: 0; width: 15px; &:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #111; content: ''; height: 0; position: absolute; left: 0; margin-top: -4px; top: 50%; width: 0; } } .customselect-populated { } */ } @media all and (max-width: 1240px) { #checkoutSteps { width: 100%; } } #checkoutSteps .section { margin-bottom: 10px; } #checkoutSteps .section:last-child { margin-bottom: 0; } #checkoutSteps .section.allow .step-title { cursor: pointer; } #checkoutSteps .section.active .step-title { cursor: auto; } #checkoutSteps .step-title { background: #fff; color: #111; font-size: 18px; margin-bottom: 1px; padding: 30px; } #checkoutSteps .step-title h2 { font-weight: bold; font-size: 18px; } #checkoutSteps .step-title .number { display: none; } #checkoutSteps .step { background: #fff; padding: 30px; position: relative; } #checkoutSteps a { color: #111; text-decoration: underline; } #checkoutSteps .back-link a { background: transparent; color: #666; font-size: 14px; font-weight: normal; line-height: 18px; } #col-right-opcheckout { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: right; width: 25%; } @media all and (max-width: 1240px) { #col-right-opcheckout { display: none; } } #col-right-opcheckout .block-title { background: #fff; color: #111; font-size: 18px; margin-bottom: 1px; padding: 30px; } #col-right-opcheckout .block-title strong { font-weight: bold; } #col-right-opcheckout .block-content { background: #fff; padding: 30px; } #col-right-opcheckout dt { color: #999; font-size: 18px; margin-bottom: 10px; } #col-right-opcheckout dt a { color: #999; font-size: 14px; } #col-right-opcheckout dt.complete { color: #333; } #col-right-opcheckout dt.complete a { color: #666; font-size: 14px; } #col-right-opcheckout dd { margin-bottom: 20px; } #col-right-opcheckout dd.complete, #col-right-opcheckout dd.complete a { color: #666; font-style: italic; } #col-right-opcheckout .changelink { float: right; } #col-right-opcheckout .changelink .separator { display: none; } #col-right-opcheckout .separator { color: #fff; } #col-right-opcheckout address { line-height: 1.4em; } #col-right-opcheckout dd p { margin-bottom: 10px; } #col-right-opcheckout dd table { width: 100%; line-height: 1.4em; } #col-right-opcheckout dd table th { font-weight: normal; text-align: left; } #col-right-opcheckout .block-help { margin-top: 10px; } #col-right-opcheckout .block-help h3 { background: #fff; color: #111; font-size: 18px; font-weight: bold; margin-bottom: 20px; } #col-right-opcheckout .block-help p { font-size: 18px; line-height: 1.2em; } #col-right-opcheckout .block-help .button-chat { background: transparent; border: 1px dotted #111; color: #111; font-size: 18px; padding: 18px 0; text-align: center; width: 100%; } .checkout-onepage-index .magento { background: #eee; padding: 80px 0; } .checkout-onepage-index .magento .page-title { background: #fff; margin: 0 10px 20px 10px; padding: 20px 30px; } .checkout-onepage-index .magento .page-title h1 { color: #111; border: 0; font-size: 36px; line-height: 1em; margin: 0; padding: 0; text-transform: none; } .checkout-onepage-index .magento .col2-set { overflow: hidden; } .checkout-onepage-index .magento .col-1 { float: left; margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index .magento .col-1 { float: none; width: 100%; } } .checkout-onepage-index .magento .col-2 { float: left; margin: 0; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index .magento .col-2 { float: none; width: 100%; } } .checkout-onepage-index .magento h4 { color: #111; font-size: 18px; font-weight: bold; margin-bottom: 1.4em; } .checkout-onepage-index .magento p { margin-bottom: 1.4em; } .checkout-onepage-index .magento p:last-child { margin-bottom: 0; } .checkout-onepage-index .magento .form-list li { margin-bottom: 1.2em; } .checkout-onepage-index .magento .form-list label { margin-bottom: 1em; } .checkout-onepage-index .magento .form-list .input-box + label { margin-bottom: 0; } .checkout-onepage-index .magento .form-alt label { margin-bottom: 1em; } .checkout-onepage-index .magento .fields { overflow: hidden; } .checkout-onepage-index .magento .fields .field { float: left; padding-bottom: 1.4em; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index .magento .fields .field { float: none; width: 100%; } } .checkout-onepage-index .magento form label { color: #333; display: inline-block; } .checkout-onepage-index .magento form input[type=text], .checkout-onepage-index .magento form input[type=password], .checkout-onepage-index .magento form input[type=email], .checkout-onepage-index .magento form textarea { background: #fff; border: 1px solid #111; padding: 15px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 400ms ease; -moz-transition: border-color 400ms ease; -o-transition: border-color 400ms ease; transition: border-color 400ms ease; } .checkout-onepage-index .magento form input[type=radio], .checkout-onepage-index .magento form input[type=checkbox] { margin: 1px 2px 0 1px; } .checkout-onepage-index .magento form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-background-size: 12px; -moz-background-size: 12px; -o-background-size: 12px; background-size: 12px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzMuNjMycHgiIGhlaWdodD0iMjkuMTI1cHgiIHZpZXdCb3g9IjAgMCAzMy42MzIgMjkuMTI1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMy42MzIgMjkuMTI1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIHBvaW50cz0iMTYuODE2LDI5LjEyNSA4LjQwOCwxNC41NjMgMCwwIDE2LjgxNiwwIDMzLjYzMiwwIDI1LjIyNCwxNC41NjMgIi8+DQo8L3N2Zz4NCg=="); background-position: 97% center; background-position: right 16px center; background-repeat: no-repeat; border: 1px solid #111; cursor: pointer; height: 49px; line-height: 1em; padding: 0 16px; position: relative; width: 100%; } .checkout-onepage-index .magento form select::-ms-expand { display: none; } .checkout-onepage-index .magento .buttons-set { padding-top: 1em; } .checkout-onepage-index .magento .button { font-size: 18px; } .checkout-onepage-index .magento p.required { display: block; font-size: 14px; margin: 0; padding-top: 20px; } .checkout-onepage-index .magento .validation-error input[type=text], .checkout-onepage-index .magento .validation-error input[type=password], .checkout-onepage-index .magento .validation-error input[type=email], .checkout-onepage-index .magento .validation-error textarea { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-color: #ff3000; } .checkout-onepage-index .magento .validation-failed { border-color: #ff3000; /**/ } .checkout-onepage-index .magento .validation-advice { margin-top: 4px; } .checkout-onepage-index .magento .please-wait { display: inline-block; position: absolute; padding: 20px; bottom: 0; right: 0; text-indent: -9999px; } .checkout-onepage-index .magento .please-wait img { float: right; display: block; } @-moz-document url-prefix() { select { background-image: none !important; -moz-appearance: menulist !important; height: 50px !important; } } #checkout-step-login input[type=text], #checkout-step-login input[type=password] { width: 75%; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-login input[type=text], #checkout-step-login input[type=password] { width: 100%; } } #checkout-step-login .col-2 strong { display: inline-block; font-weight: bold; margin-bottom: 1.4em; } #checkout-step-login .col-2 ul { list-style-type: disc; margin-bottom: 1em; } #checkout-step-login .col-2 li { line-height: 1.4em; margin-left: 1em; } #checkout-step-login .col-2 .form-list { list-style: none; } #checkout-step-login .col-2 .form-list li { line-height: 1em; margin-left: 0; } #checkout-step-billing .input-box, #checkout-step-shipping .input-box { padding-right: 20px; } #checkout-step-billing .control .input-box, #checkout-step-shipping .control .input-box { padding: 0; } #checkout-step-billing .name-firstname, #checkout-step-shipping .name-firstname { clear: left; } #checkout-step-billing .add-field .input-box, #checkout-step-shipping .add-field .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-billing .add-field .input-box, #checkout-step-shipping .add-field .input-box { width: 100%; } } #checkout-step-billing .buttons-set, #checkout-step-shipping .buttons-set { display: inline-block; overflow: hidden; } #checkout-step-billing .back-link, #checkout-step-shipping .back-link { float: right; margin-bottom: 0; } #checkout-step-billing .back-link a, #checkout-step-shipping .back-link a { text-decoration: none; } .checkout-onepage-index [for=billing\:company] + .input-box, .checkout-onepage-index [for=billing\:email] + .input-box, .checkout-onepage-index [for=billing\:street1] + .input-box, .checkout-onepage-index [for=billing\:street2] + .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index [for=billing\:company] + .input-box, .checkout-onepage-index [for=billing\:email] + .input-box, .checkout-onepage-index [for=billing\:street1] + .input-box, .checkout-onepage-index [for=billing\:street2] + .input-box { width: 100%; } } .checkout-onepage-index [for=shipping\:company] + .input-box, .checkout-onepage-index [for=shipping\:email] + .input-box, .checkout-onepage-index [for=shipping\:street1] + .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index [for=shipping\:company] + .input-box, .checkout-onepage-index [for=shipping\:email] + .input-box, .checkout-onepage-index [for=shipping\:street1] + .input-box { width: 100%; } } #opc-shipping_method .sp-methods li { margin-bottom: 1em; } #opc-shipping_method .sp-methods li:last-child { margin-bottom: 0; } #opc-shipping_method dt { color: #111; font-size: 18px; font-weight: bold; margin-bottom: 1em; } #opc-shipping_method dd { margin-bottom: 30px; } #opc-shipping_method .description { color: #666; } #opc-shipping_method .international-note { font-size: 12px; line-height: 1.4em; margin-top: 1.4em; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #opc-shipping_method .international-note { width: 100%; } } #opc-shipping_method .buttons-set { display: inline-block; overflow: hidden; } #opc-shipping_method .back-link { float: right; margin-bottom: 0; } #opc-shipping_method .back-link a { text-decoration: none; } #onepage-checkout-shipping-method-additional-load .add-gift-message { padding: 1em 0; } #onepage-checkout-shipping-method-additional-load .add-gift-message h3 { margin-bottom: 1em; } #onepage-checkout-shipping-method-additional-load p { margin-bottom: 1em; } #onepage-checkout-shipping-method-additional-load .gift-options-for-order > div > a { display: inline-block; margin-bottom: 1em; } #onepage-checkout-shipping-method-additional-load .gift-message-form { margin-bottom: 2em; } #onepage-checkout-shipping-method-additional-load .input-box { padding-right: 20px; } #opc-payment .sp-methods { margin-bottom: 20px; } #opc-payment .sp-methods dt > label { color: #111; font-weight: bold; } #opc-payment .sp-methods li { margin-bottom: 1em; } #opc-payment .sp-methods li:last-child { margin-bottom: 0; } #opc-payment dd { margin-bottom: 1.4em; } #opc-payment .form-list { padding-top: 20px; } #opc-payment .form-list .v-fix { margin-bottom: 1em; } #opc-payment input[type=text] { width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { #opc-payment input[type=text] { width: 100%; } } #opc-payment .cvv-what-is-this { display: none; } #opc-payment .buttons-set { clear: left; display: inline-block; overflow: hidden; } #opc-payment .back-link { float: right; margin-bottom: 0; } #opc-payment .back-link a { text-decoration: none; } .checkout-onepage-index [for=authorizenet_cc_type] + .input-box, .checkout-onepage-index [for=authnetcim_payment_id] + .input-box, .checkout-onepage-index [for=authnetcim_cc_type] + .input-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } @media all and (max-width: 980px) and (min-width: 0) { .checkout-onepage-index [for=authorizenet_cc_type] + .input-box, .checkout-onepage-index [for=authnetcim_payment_id] + .input-box, .checkout-onepage-index [for=authnetcim_cc_type] + .input-box { width: 100%; } } .checkout-onepage-payment-additional-customerbalance { margin-bottom: 20px; } .checkout-onepage-index #authorizenet_cc_type_exp_div .input-box, .checkout-onepage-index #authnetcim_cc_type_exp_div .input-box { overflow: hidden; } .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; } @media all and (max-width: 480px) { .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix { float: none; width: 100%; } } .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix:last-child, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix:last-child { padding-left: 20px; } @media all and (max-width: 480px) { .checkout-onepage-index #authorizenet_cc_type_exp_div .v-fix:last-child, .checkout-onepage-index #authnetcim_cc_type_exp_div .v-fix:last-child { padding-left: 0; } } #need-checkout-additional { border-top: 1px solid #eee; margin-bottom: 30px; overflow: hidden; } #need-checkout-additional h3 { font-weight: bold; font-size: 18px; padding-top: 30px; margin-bottom: 30px; } #need-checkout-additional .checkout-coupon-code { margin-bottom: 20px; } @media all and (max-width: 980px) and (min-width: 0) { #need-checkout-additional form input[type=text] { width: 50%; } } @media all and (max-width: 480px) { #need-checkout-additional form input[type=text] { display: block; margin-bottom: 10px; width: 100%; } } #need-checkout-additional label { display: block; margin-bottom: 10px; } #need-checkout-additional .input-box { margin-bottom: 10px; } #need-checkout-additional .input-box * { vertical-align: middle; } #need-checkout-additional .button { margin-left: 8px; min-width: 114px; padding-top: 15px; padding-bottom: 16px; } @media all and (max-width: 480px) { #need-checkout-additional .button { font-size: 14px; padding: 12px 16px; margin: 0; min-width: 0; } } #need-checkout-additional #button-coupon-remove { display: none; } #need-checkout-additional #button-gift-card-remove { display: none; } #need-checkout-additional .message { display: none; margin-top: 1em; } #need-checkout-additional .success { color: #2ae98f; } #need-checkout-additional .error { color: #ff3000; } #checkout-step-review .data-table { font-size: 14px; width: 100%; } #checkout-step-review .data-table .even { background: #fff; } #checkout-step-review th { font-size: 18px; font-weight: bold; text-align: left; padding: 0 1em 1em 0; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-review th { font-size: 14px; } } #checkout-step-review th.a-center { width: 10%; text-align: right; } #checkout-step-review th:last-child { padding-right: 0; } #checkout-step-review td { padding: 1.4em 1em 1.4em 0; text-align: left; } #checkout-step-review .product-name { font-weight: bold; font-size: 14px; } #checkout-step-review .product-image { float: left; margin-right: 1em; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-review .product-image { display: none; } } #checkout-step-review .item-options { line-height: 1.4em; margin-top: 1em; overflow: hidden; } #checkout-step-review .item-options dt { float: left; margin-right: 4px; clear: left; } #checkout-step-review .item-options dt:after { content: ':'; } #checkout-step-review .item-options dd { float: left; } #checkout-step-review .nobr { white-space: nowrap; } #checkout-step-review .f-left { margin-bottom: 20px; } #checkout-step-review .a-right { text-align: right; } #checkout-step-review tbody td { border-bottom: 1px solid #ececec; } #checkout-step-review tbody td.a-center, #checkout-step-review tbody td.a-right { width: 10%; text-align: right; } #checkout-step-review tbody td.last { padding-right: 0; } #checkout-step-review tfoot { font-size: 18px; font-weight: bold; } @media all and (max-width: 980px) and (min-width: 0) { #checkout-step-review tfoot { font-size: 14px; } } #checkout-step-review tfoot td { border: 0; padding: 1.4em 1em 0 0; } #checkout-step-review tfoot td.last { padding-right: 0; } #checkout-step-review strong { font-weight: bold; } #checkout-review-table-wrapper { margin-bottom: 20px; } .gift-guide-item-hidden { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .gift-guide { background: #fff; overflow: hidden; padding: 100px 0; } @media all and (max-width: 980px) and (min-width: 0) { .gift-guide { padding: 75px 0; } } @media all and (min-width: 1480px) { .gift-guide { padding: 150px 0; } } .gift-guide .animated { -webkit-animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); -moz-animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); -o-animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); } .gift-guide .button { font-size: 18px; } .gift-guide-share-icon { background-position: center center; background-repeat: no-repeat; display: inline-block; height: 25px; padding: 0 10px; width: 25px; } .gift-guide-share-icon.email { background-image: url("../images/icon_email.svg"); -webkit-background-size: 25px auto; -moz-background-size: 25px auto; -o-background-size: 25px auto; background-size: 25px auto; } .gift-guide-share-icon.facebook { background-image: url("../images/icon_facebook.svg"); -webkit-background-size: auto 25px; -moz-background-size: auto 25px; -o-background-size: auto 25px; background-size: auto 25px; } .gift-guide-share-icon.twitter { background-image: url("../images/icon_twitter.svg"); -webkit-background-size: auto 25px; -moz-background-size: auto 25px; -o-background-size: auto 25px; background-size: auto 25px; } .gift-guide-share-icon.gplus { background-image: url("../images/icon_gplus.svg"); -webkit-background-size: auto 25px; -moz-background-size: auto 25px; -o-background-size: auto 25px; background-size: auto 25px; } .gift-guide h1 { background: transparent url("../images/gilded-gifter.png") center center no-repeat; height: 67px; margin: 0 auto; max-width: 477px; width: 90%; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; text-indent: -119988px; overflow: hidden; text-align: left; } @media screen and (-webkit-device-pixel-ratio: 2) { .gift-guide h1 { background-image: url("../images/gilded-gifter-2x.png"); } } .gift-guide-intro { margin: 40px auto; max-width: 800px; padding: 0 10px; text-align: center; } .gift-guide-intro p { color: #1e1e1e; font-size: 18px; font-weight: 400; line-height: 1.5em; padding: 15px 0; } @media all and (max-width: 980px) and (min-width: 0) { .gift-guide-intro p { font-size: 16px; } } .gift-guide-questions { margin: 40px auto; max-width: 690px; padding: 0 10px; text-align: center; } .gift-guide-questions h2 { color: #272727; font-size: 36px; font-weight: 700; line-height: 1.3em; padding: 15px 0; } @media all and (max-width: 980px) and (min-width: 0) { .gift-guide-questions h2 { font-size: 24px; } } .gift-guide-questions h2 em { border-bottom: 1px solid #6c6c6c; font-style: normal; } .gift-guide-questions ul { padding: 25px 0; } .gift-guide-questions ul li { display: inline-block; margin: 8px 7px; } .gift-guide-progress { display: none; padding: 0 10px; text-align: center; } .gift-guide-progress > div { background: #e6e6e6; height: 2px; margin: 0 auto; max-width: 560px; position: relative; } .gift-guide-progress > div > span { background: #6b6b6b; display: block; height: 2px; position: absolute; width: 0%; } .gift-guide-progress p { color: #1e1e1e; font-size: 18px; font-weight: 400; line-height: 1em; padding: 35px 0; } .gift-guide-results { display: none; } .gift-guide-results .gift-guide-loading { position: relative; height: 90px; text-align: center; } .gift-guide-results .gift-guide-loading img { display: inline-block; height: 90px; } .gift-guide-results .gift-guide-products { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .gift-guide-results #category { margin: 0 !important; padding-top: 30px; } @media all and (max-width: 980px) and (min-width: 0) { .gift-guide-results #category { padding-top: 5px; } } @media all and (min-width: 1480px) { .gift-guide-results #category { padding-top: 80px; } } .gift-guide-results #category .empty { text-align: center; margin: 0 10px; } .gift-guide-results #category .empty h2 { color: #111; font-size: 36px; line-height: 1.4em; } @media all and (max-width: 980px) and (min-width: 0) { .gift-guide-results #category .empty h2 { font-size: 24px; } } .gift-guide-results #category .empty p { font-size: 18px; margin: 0; } .brands-list { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 40px; overflow: hidden; } @media all and (max-width: 980px) and (min-width: 0) { .brands-list { padding-top: 30px; padding-bottom: 30px; } } .brands-list .col { font-size: 12px; float: left; width: 25%; } @media all and (max-width: 980px) and (min-width: 0) { .brands-list .col { float: none; width: 100%; text-align: center; } } .brands-list .col .heading { font-weight: bold; margin: 1em 0; } .brands-list .col a { color: #111; display: block; line-height: 1.7em; } .brands-list .col a:hover { text-decoration: underline; } .category-features .toolbar-container { display: none; } .features-page-images { display: none; } .features-page-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 25px; width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { .features-page-container { padding: 0 10px; } } .features-page-items .item { padding: 80px 10px; text-align: center; } @media all and (max-width: 980px) and (min-width: 0) { .features-page-items .item { padding: 40px 0; } } .features-page-items .item a { color: #111; display: inline-block; text-decoration: none; } .features-page-items .item a:hover { text-decoration: underline; } .features-page-items .item img { display: inline-block; margin-bottom: 40px; max-width: 100%; } @media all and (max-width: 980px) and (min-width: 0) { .features-page-items .item img { display: block; } } .features-page-items .item h3 { font-size: 24px; font-weight: bold; line-height: 1em; margin-bottom: 1em; } @media all and (max-width: 980px) and (min-width: 0) { .features-page-items .item h3 { font-size: 18px; } } .features-page-items .item p { width: 33.3333%; line-height: 1.4em; margin: 0 auto; } @media all and (max-width: 980px) and (min-width: 0) { .features-page-items .item p { padding: 0 10px; width: auto; } }