/*# source 1 1 _responsive/vendor/normalize.css */ /*! normalize.css v1.1.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Prevent system color scheme's background color being used in Firefox, IE, * and Opera. * 2. Prevent system color scheme's text color being used in Firefox, IE, and * Opera. * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { background: #fff; /* 1 */ color: #000; /* 2 */ font-size: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 4 */ -ms-text-size-adjust: 100%; /* 4 */ } /** * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address font sizes and margins set differently in IE 6/7. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.67em; margin: 2.33em 0; } /** * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /** * Address margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /** * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } /** * Address `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /** * Address margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /** * Address paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /** * Correct list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } /** * Define consistent border, margin, and padding. */ fieldset { border: 0; margin: 0; padding:0; } iframe { border:0; padding:0; } /** * 1. Correct color not being inherited in IE 6/7/8/9. * 2. Correct text not wrapping in Firefox 3. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /** * 1. Correct font size not being inherited in all browsers. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improve appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /** * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to content-box in IE 8/9. * 2. Remove excess padding in IE 8/9. * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ /*input[type="search"] {*/ /*-webkit-appearance: textfield; !* 1 *!*/ /*-moz-box-sizing: content-box;*/ /*-webkit-box-sizing: content-box; !* 2 *!*/ /*box-sizing: content-box;*/ /*}*/ /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 6/7/8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /*# source 1 1 _responsive/minimal.compiled.css */ /* // +--------------------------------------------------------------------------------------------------------+ // | Core imports | // +--------------------------------------------------------------------------------------------------------+ */ html, body { font-size: 100%; width: 100%; } /* // +--------------------------------------------------------------------------------------------------------+ // | EM Calculator function | // | Function to convert pixels into EMs | // | Usage: .article-heading { font-size: emCalc(700); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Breakpoint Mixin | // | Shortcut for outputting the media query breakpoints | // | @param point (string) | // | @return content (string) | // | Usage: .page-wrap { width: 75%; @include breakpoint(large) { width: 60%; } @include breakpoint(medium) { width: 80%; } @include breakpoint(small) { width: 95%; } } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Clearfix | // | Shortcut for clearfix | // | @return content (string) | // | Usage: .article { @include clearfix(); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Box Sizing with IE fallback | // | @param width (string) - CSS property | // | @param padding (string) - CSS property | // | Usage: | section { background: white; @include box(50, 3); margin: 0 auto; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Box Sizing | // | Shortcut for clearfix | // | @param box-model (string) - CSS property | // | Usage: *, *:after, *:before { @include box-sizing(border-box); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Border radius | // | Shortcut for border radius | // | @return content (string) | // | Usage: .button { @include border-radius(5px); } .submit-button { @include border-top-radius(10px); @include border-right-radius(8px); @include border-bottom-radius(10px); @include border-left-radius (6px); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Opacity | // | Shortcut for opacity | // | Usage: .article-heading { @include opacity(0.8); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Text truncate - | // | Shortcut for text truncate | // | An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block. | // | Usage: .text-truncate { @include text-truncate; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Font size | // | Shortcut to output rem font-size with px fallback | // | Usage: body { @include font-size(16); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Center Block | // | Center block elements | // | Usage: img { @include center-block; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Center Block | // | Center block elements | // | Usage: img { @include center-block; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Indent | // | Indents text | // | Usage: img { @include center-block; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Min Height | // | Shortcut for min-height | // | @param pixels (Int) // | @return content (string) | // | Usage: .article { @include min-height(); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Min Width | // | Shortcut for min-width | // | @param pixels (Int) // | @return content (string) | // | Usage: .article { @include min-height(); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Transition | // | Shortcut for transitions | // | @param transition-property (String) | // | @param transition-time (String) | // | @param method (String) | // | @return content (string) | // | Usage: button { @include transition(background-color, 0.5s, ease); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Gradient | // | Shortcut for transitions | // | @param from (String) | // | @param to (String) | // | @param height (String) | // | @return content (string) | // | Usage: .gradient { @include gradient(red, white, 100%); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Rotate | // | Shortcut for rotating | // | @param degrees (Int) | // | Usage: div { @include rotate(90); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Translate 3D | // | Shortcut for rotating | // | @param x (Int) - Pixels | // | @param y (Int) - Pixels | // | @param z (Int) - Pixels | // | Usage: div { @include translate3d(10, 20, 30); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Backface Visibility | // | Shortcut for rotating | // | @param value (String) - Optional / Default: visible | // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Font Montserrate | // | Shortcut for transitions | // | @param weight (String) - Optional | // | Usage: button { @include transition(background-color, 0.5s, ease); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Tap Highlight | // | Shortcut for the tap highlight color | // | @param color (String) - Optional / default: black | // | Usage: button { @include tapHighlight(red); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Config Variables | // +--------------------------------------------------------------------------------------------------------+ */ /* // Main body font size // All em measurements should be worked out from this value, for example, if you want to convert 20px into an em, the calculation is // 20 / 16 = 1.25 */ /* // Off canvas menu width */ /* // Font Icon */ /* // Heading font sizes in pixels */ /* // Copy - normal in pixels */ /* // Dir Paths */ /* - Assets Dir: */ /* - Images: */ /* - CSS: */ /* - JS: */ /* - Fonts: */ /* // Colours - hex */ /* // Loading spinner path */ /* // Header height */ /* // Header height small */ /* // Cookie Banner Height */ /* // Cookie Banner Height Small */ /* // Breakpoint variables // These are the responsive breakpoint values - uses the emCalc function, which works out the em values based on the pixel param. */ /*only for checkout information boxes at bottom of page*/ /*only for header-buttons span in header - removes span so text doesn't overlap*/ .content-wrap, .content-wrap--narrow, .content-wrap--wide, .content-wrap--full { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; padding: 0 10px; } .content-wrap, .content-wrap--narrow, .content-wrap--wide, .content-wrap--full { *zoom: 1; } .content-wrap:before, .content-wrap--narrow:before, .content-wrap--wide:before, .content-wrap--full:before, .content-wrap:after, .content-wrap--narrow:after, .content-wrap--wide:after, .content-wrap--full:after { content: ""; display: table; } .content-wrap:after, .content-wrap--narrow:after, .content-wrap--wide:after, .content-wrap--full:after { clear: both; } .content-wrap { max-width: 1200px; } .content-wrap--narrow { max-width: 800px; } .content-wrap--wide { max-width: 2000px; } /* // +--------------------------------------------------------------------------------------------------------+ // | Core imports | // +--------------------------------------------------------------------------------------------------------+ */ html, body { font-size: 100%; width: 100%; } /* // +--------------------------------------------------------------------------------------------------------+ // | EM Calculator function | // | Function to convert pixels into EMs | // | Usage: .article-heading { font-size: emCalc(700); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Breakpoint Mixin | // | Shortcut for outputting the media query breakpoints | // | @param point (string) | // | @return content (string) | // | Usage: .page-wrap { width: 75%; @include breakpoint(large) { width: 60%; } @include breakpoint(medium) { width: 80%; } @include breakpoint(small) { width: 95%; } } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Clearfix | // | Shortcut for clearfix | // | @return content (string) | // | Usage: .article { @include clearfix(); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Box Sizing with IE fallback | // | @param width (string) - CSS property | // | @param padding (string) - CSS property | // | Usage: | section { background: white; @include box(50, 3); margin: 0 auto; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Box Sizing | // | Shortcut for clearfix | // | @param box-model (string) - CSS property | // | Usage: *, *:after, *:before { @include box-sizing(border-box); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Border radius | // | Shortcut for border radius | // | @return content (string) | // | Usage: .button { @include border-radius(5px); } .submit-button { @include border-top-radius(10px); @include border-right-radius(8px); @include border-bottom-radius(10px); @include border-left-radius (6px); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Opacity | // | Shortcut for opacity | // | Usage: .article-heading { @include opacity(0.8); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Text truncate - | // | Shortcut for text truncate | // | An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block. | // | Usage: .text-truncate { @include text-truncate; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Font size | // | Shortcut to output rem font-size with px fallback | // | Usage: body { @include font-size(16); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Center Block | // | Center block elements | // | Usage: img { @include center-block; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Center Block | // | Center block elements | // | Usage: img { @include center-block; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Indent | // | Indents text | // | Usage: img { @include center-block; } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Min Height | // | Shortcut for min-height | // | @param pixels (Int) // | @return content (string) | // | Usage: .article { @include min-height(); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Min Width | // | Shortcut for min-width | // | @param pixels (Int) // | @return content (string) | // | Usage: .article { @include min-height(); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Transition | // | Shortcut for transitions | // | @param transition-property (String) | // | @param transition-time (String) | // | @param method (String) | // | @return content (string) | // | Usage: button { @include transition(background-color, 0.5s, ease); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Gradient | // | Shortcut for transitions | // | @param from (String) | // | @param to (String) | // | @param height (String) | // | @return content (string) | // | Usage: .gradient { @include gradient(red, white, 100%); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Rotate | // | Shortcut for rotating | // | @param degrees (Int) | // | Usage: div { @include rotate(90); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Translate 3D | // | Shortcut for rotating | // | @param x (Int) - Pixels | // | @param y (Int) - Pixels | // | @param z (Int) - Pixels | // | Usage: div { @include translate3d(10, 20, 30); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Backface Visibility | // | Shortcut for rotating | // | @param value (String) - Optional / Default: visible | // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Font Montserrate | // | Shortcut for transitions | // | @param weight (String) - Optional | // | Usage: button { @include transition(background-color, 0.5s, ease); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Tap Highlight | // | Shortcut for the tap highlight color | // | @param color (String) - Optional / default: black | // | Usage: button { @include tapHighlight(red); } // +--------------------------------------------------------------------------------------------------------+ */ /* // +--------------------------------------------------------------------------------------------------------+ // | Config Variables | // +--------------------------------------------------------------------------------------------------------+ */ /* // Main body font size // All em measurements should be worked out from this value, for example, if you want to convert 20px into an em, the calculation is // 20 / 16 = 1.25 */ /* // Off canvas menu width */ /* // Font Icon */ /* // Heading font sizes in pixels */ /* // Copy - normal in pixels */ /* // Dir Paths */ /* - Assets Dir: */ /* - Images: */ /* - CSS: */ /* - JS: */ /* - Fonts: */ /* // Colours - hex */ /* // Loading spinner path */ /* // Header height */ /* // Header height small */ /* // Cookie Banner Height */ /* // Cookie Banner Height Small */ /* // Breakpoint variables // These are the responsive breakpoint values - uses the emCalc function, which works out the em values based on the pixel param. */ /*only for checkout information boxes at bottom of page*/ /*only for header-buttons span in header - removes span so text doesn't overlap*/ .content-wrap, .content-wrap--narrow, .content-wrap--wide, .content-wrap--full { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; padding: 0 10px; } .content-wrap, .content-wrap--narrow, .content-wrap--wide, .content-wrap--full { *zoom: 1; } .content-wrap:before, .content-wrap--narrow:before, .content-wrap--wide:before, .content-wrap--full:before, .content-wrap:after, .content-wrap--narrow:after, .content-wrap--wide:after, .content-wrap--full:after { content: ""; display: table; } .content-wrap:after, .content-wrap--narrow:after, .content-wrap--wide:after, .content-wrap--full:after { clear: both; } .content-wrap { max-width: 1200px; } .content-wrap--narrow { max-width: 800px; } .content-wrap--wide { max-width: 2000px; } /* Colours */ .ui-display { font-size: 48px; font-size: 3rem; font-weight: 300; line-height: 70px; color: rgba(0, 0, 0, 0.74); } @media only screen and (max-width: 768px) { .ui-display { font-size: 26px; font-size: 1.625rem; font-weight: 400; line-height: 40px; } } .ui-product-title { font-size: 26px; font-size: 1.625rem; font-weight: 400; line-height: 36px; color: rgba(0, 0, 0, 0.74); } @media only screen and (max-width: 43.75em) { .ui-product-title { font-size: 16px; font-size: 1rem; font-weight: 400; color: rgba(0, 0, 0, 0.87); } } .ui-product-number { font-size: 14px; font-size: 0.875rem; font-weight: 800; line-height: 24px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-headline, .popup .popup__text { font-size: 20px; font-size: 1.25rem; font-weight: 500; line-height: 28px; color: rgba(0, 0, 0, 0.87); } .ui-label, .ui-btn-back { font-size: 16px; font-size: 1rem; font-weight: 400; color: rgba(0, 0, 0, 0.87); } .ui-body-text, .ui-input-text, .ui-input-textarea, .ui-input-text-search, .newsletter-modal__row .newsletter-modal__row__input, .ui-input-mm, .ui-input-yy { font-size: 16px; font-size: 1rem; font-weight: 400; line-height: 26px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.3px; } .ui-caption, .ui-text-error { font-size: 12px; font-size: 0.75rem; font-weight: 500; line-height: 18px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-btn, .ui-select select, .ui-btn-transactional, .popup .popup__button--checkout, .ui-btn-active, .ui-btn-alt-1, .popup .popup__button--view, .ui-btn-alt-2, .ui-btn-alt-3, .ui-btn-breadbasket, .ui-btn-switch-right-sel, .ui-btn-switch-right, .ui-btn-switch-left-sel, .ui-btn-switch-left, .ui-btn-qty, .ui-btn-accordion, .ui-btn-search-active, .newsletter-modal__row.email .newsletter-modal__row__button--grey-a, .ui-btn-search { font-size: 14px; font-size: 0.875rem; font-weight: 500; line-height: 16px; color: rgba(0, 0, 0, 0.94); letter-spacing: 0.5px; } .ui-menu-inactive { font-size: 15px; font-size: 0.9375rem; font-weight: 400; line-height: 30px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-menu-active { font-size: 15px; font-size: 0.9375rem; font-weight: 500; line-height: 30px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-textlink { font-size: 15px; font-size: 0.9375rem; font-weight: 800; line-height: 30px; color: rgba(0, 0, 0, 0.87); text-decoration: underline; letter-spacing: 0.25px; } .ui-textlink:hover { color: #333333; } button.ui-textlink { padding: 0; text-transform: none; } button.ui-textlink, button.ui-textlink:hover { background: none !important; box-shadow: none; } .ui-placeholder, .ui-input-text::-webkit-input-placeholder, .ui-input-text:-moz-placeholder, .ui-input-text::-moz-placeholder, .ui-input-text:-ms-input-placeholder, .ui-input-textarea::-webkit-input-placeholder, .ui-input-textarea:-moz-placeholder, .ui-input-textarea::-moz-placeholder, .ui-input-textarea:-ms-input-placeholder, .ui-input-text-search::-webkit-input-placeholder, .newsletter-modal__row .newsletter-modal__row__input::-webkit-input-placeholder, .ui-input-text-search:-moz-placeholder, .newsletter-modal__row .newsletter-modal__row__input:-moz-placeholder, .ui-input-text-search::-moz-placeholder, .newsletter-modal__row .newsletter-modal__row__input::-moz-placeholder, .ui-input-text-search:-ms-input-placeholder, .newsletter-modal__row .newsletter-modal__row__input:-ms-input-placeholder, .ui-input-mm::-webkit-input-placeholder, .ui-input-mm:-moz-placeholder, .ui-input-mm::-moz-placeholder, .ui-input-mm:-ms-input-placeholder, .ui-input-yy::-webkit-input-placeholder, .ui-input-yy:-moz-placeholder, .ui-input-yy::-moz-placeholder, .ui-input-yy:-ms-input-placeholder { font-size: 16px; font-size: 1rem; font-weight: 400; line-height: 26px; color: rgba(0, 0, 0, 0.37); letter-spacing: 0.3px; } /* Input types - input[type="number"], input[type="email"], input[type="text"], input[type="password"], textarea, select */ /* Labels */ /* label, .ui-label { @extend .ui-body-text; } */ /* Selects (drop downs) */ .ui-select select { height: 50px; border: 1px solid #e1e1e1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); background: #ffffff; } /* Inputs (field containers) */ .ui-input-text { height: 50px; border: 1px solid #e1e1e1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ background: #ffffff; } .ui-input-text:focus { outline: none !important; border: 2px solid #41b97a; box-shadow: none !important; } .ui-input-textarea { border: 1px solid #e1e1e1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ background: #ffffff; } .ui-input-textarea:focus { outline: none !important; border: 2px solid #41b97a; box-shadow: none !important; } .ui-input-text-search, .newsletter-modal__row .newsletter-modal__row__input { height: 50px; border: 1px solid #e1e1e1; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; background: #ffffff; } .ui-input-text-search:focus, .newsletter-modal__row .newsletter-modal__row__input:focus { outline: none !important; border: 2px solid #41b97a; box-shadow: none !important; } .ui-input-mm { height: 50px; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; background: #ffffff; } .ui-input-mm:focus { outline: none !important; border: 2px solid #41b97a; } .ui-input-yy { height: 50px; border: 1px solid #e1e1e1; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; background: #ffffff; } .ui-input-yy:focus { outline: none !important; border: 2px solid #41b97a; } /* Validation error */ .ui-text-error { color: #ff586d; } .ui-focus-error { border: 2px solid #ff586d !important; } /* Checkboxes and radio buttons */ /* input[type='checkbox']:checked ~ label:before { //font-family: $baseFont !important; content: "\e910"; font-size: 15px; border: 2px solid $active-green; } */ /* .checkbox-container label:before { position: absolute; top: 2px; left: 0; display: inline-block; //font-family: $baseFont !important; content: "" !important; border: 1px solid $middle-grey; width: 26px; height: 26px; line-height: 25px; text-align: center; color: $active-green; overflow: hidden; } */ /* label .ui-checkbox { @extend .ui-caption; } */ /* Buttons */ .ui-btn-transactional, .popup .popup__button--checkout { text-transform: uppercase; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 0; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #e4e726; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-transactional:hover, .popup .popup__button--checkout:hover { background: #cccf22 !important; color: #000000; } .ui-btn-transactional.disabled, .popup .disabled.popup__button--checkout { background: #f0f288; color: #737373; box-shadow: none; } .ui-btn-transactional.disabled:hover, .popup .disabled.popup__button--checkout:hover { background: #f0f288 !important; } .ui-btn-active { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-active:hover { background: #3AA66D !important; } .ui-btn-active.disabled { background: #97d9b6; box-shadow: none; } .ui-btn-active.disabled:hover { background: #97d9b6 !important; } .ui-btn-alt-1, .popup .popup__button--view { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #e1e1e1; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-alt-1:hover, .popup .popup__button--view:hover { background: #e6e6e6 !important; } .ui-btn-alt-1.disabled, .popup .disabled.popup__button--view { background: #efefef; color: #737373; box-shadow: none; } .ui-btn-alt-1.disabled:hover, .popup .disabled.popup__button--view:hover { background: #efefef !important; } .ui-btn-alt-2 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 0; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-alt-2:hover { background: #D4D5D5 !important; } .ui-btn-alt-2.disabled { background: #f5f6f6; color: #737373; box-shadow: none; } .ui-btn-alt-2.disabled:hover { background: #f5f6f6 !important; } .ui-btn-alt-3 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 16px 0; border: 1px solid #e1e1e1; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #ffffff; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-alt-3:hover { background: #E5E5E5 !important; } .ui-btn-alt-3.disabled { color: #737373; box-shadow: none; } .ui-btn-breadbasket { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 0; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: left; background: #ffffff; } .ui-btn-switch-right-sel { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-switch-right-sel:hover { background: #3AA66D !important; } .ui-btn-switch-right { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-switch-right:hover { background: #D4D5D5 !important; } .ui-btn-switch-left-sel { -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-switch-left-sel:hover { background: #3AA66D !important; } .ui-btn-switch-left { -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-switch-left:hover { background: #D4D5D5 !important; } .ui-btn-subtract { -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; background-clip: padding-box; font-size: 20px; font-size: 1.25rem; padding: 14px; height: 50px; border: 1px solid #e1e1e1; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-subtract:hover { background: #D4D5D5 !important; } .ui-btn-subtract.disabled { background: #f5f6f6; color: #737373; } .ui-btn-subtract.disabled:hover { background: #f5f6f6 !important; } .ui-btn-qty { height: 50px; width: 70px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; border-left: none; border-right: none; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #ffffff; } .ui-btn-qty:focus { outline: none !important; border-top: 1px solid #e1e1e1 !important; border-bottom: 1px solid #e1e1e1 !important; border-left: none !important; border-right: none !important; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) !important; } .ui-btn-add { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; background-clip: padding-box; font-size: 20px; font-size: 1.25rem; padding: 14px; height: 50px; border: 1px solid #e1e1e1; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-add:hover { background: #D4D5D5 !important; } .ui-btn-accordion { background: #edeeee; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); border-top: 1px solid #D4D5D5; } .ui-btn-accordion:hover { background: #D4D5D5 !important; } .ui-btn-search-active, .newsletter-modal__row.email .newsletter-modal__row__button--grey-a { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-search-active:hover, .newsletter-modal__row.email .newsletter-modal__row__button--grey-a:hover { background: #3AA66D !important; } .ui-btn-search { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-search:hover { background: #D4D5D5 !important; } .ui-btn-back { padding: 5px 0; text-align: center; background: #ffffff; } @font-face { font-family: 'icons'; src: url("/Assets/RiverIsland/Core/css/_responsive/_scss/ui_lib/icons/icons_20200602.eot?20200602"); src: url("/Assets/RiverIsland/Core/css/_responsive/_scss/ui_lib/icons/icons_20200602.eot?20200602#iefix") format("embedded-opentype"), url("/Assets/RiverIsland/Core/css/_responsive/_scss/ui_lib/icons/icons_20200602.woff?20200602") format("woff"), url("/Assets/RiverIsland/Core/css/_responsive/_scss/ui_lib/icons/icons_20200602.ttf?20200602") format("truetype"), url("/Assets/RiverIsland/Core/css/_responsive/_scss/ui_lib/icons/icons_20200602.svg?20200602#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: swap; } [class^='icon-'], [class*=' icon-'] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-ui-mute:before { font-family: "icons" !important; content: '\e96A'; } .icon-ui-unmute:before { font-family: "icons" !important; content: '\e969'; } .icon-ui-pause_alt:before { font-family: "icons" !important; content: '\e963'; } .icon-ui-play_alt:before { font-family: "icons" !important; content: '\e967'; } .icon-ui-directions_fill:before { font-family: "icons" !important; content: '\e967'; } .icon-ui-video:before { font-family: "icons" !important; content: '\e968'; } .icon-ui-play:before { font-family: "icons" !important; content: '\e967'; } .icon-ui-Filter-sort:before { font-family: "icons" !important; content: '\e966'; } .icon-ui-directions:before { font-family: "icons" !important; content: '\e965'; } .icon-ui-empty-bag1:before { font-family: "icons" !important; content: '\e964'; } .icon-ui-Pause:before { font-family: "icons" !important; content: '\e963'; } .icon-ui-360:before { font-family: "icons" !important; content: '\e962'; } .icon-ui-grid_4:before { font-family: "icons" !important; content: '\e961'; color: #025252; } .icon-ui-grid_1:before { font-family: "icons" !important; content: '\e95e'; } .icon-ui-grid_2:before { font-family: "icons" !important; content: '\e95f'; } .icon-ui-grid_3:before { font-family: "icons" !important; content: '\e960'; } .icon-ui-minus:before { font-family: "icons" !important; content: '\e95c'; } .icon-ui-add:before { font-family: "icons" !important; content: '\e95d'; } .icon-ui-add_alt:before { font-family: "icons" !important; content: '\e900'; } .icon-ui-address-book:before { font-family: "icons" !important; content: '\e901'; } .icon-ui-amazon:before { font-family: "icons" !important; content: '\e902'; } .icon-ui-android:before { font-family: "icons" !important; content: '\e903'; } .icon-ui-apple:before { font-family: "icons" !important; content: '\e904'; } .icon-ui-back_small:before { font-family: "icons" !important; content: '\e905'; } .icon-ui-back:before { font-family: "icons" !important; content: '\e906'; } .icon-ui-blackberry:before { font-family: "icons" !important; content: '\e907'; } .icon-ui-burger-menu:before { font-family: "icons" !important; content: '\e908'; } .icon-ui-call:before { font-family: "icons" !important; content: '\e909'; } .icon-ui-chevron:before { font-family: "icons" !important; content: '\e90a'; } .icon-ui-chat_alt:before { font-family: "icons" !important; content: '\e90b'; } .icon-ui-chat:before { font-family: "icons" !important; content: '\e90c'; } .icon-ui-check-in:before { font-family: "icons" !important; content: '\e90d'; } .icon-ui-close_alt:before { font-family: "icons" !important; content: '\e90e'; } .icon-ui-close:before { font-family: "icons" !important; content: '\e90f'; } .icon-ui-confirmed_alt-2:before { font-family: "icons" !important; content: '\e910'; } .icon-ui-confirmed_alt:before { font-family: "icons" !important; content: '\e911'; } .icon-ui-confirmed:before { font-family: "icons" !important; content: '\e912'; } .icon-ui-currency:before { font-family: "icons" !important; content: '\e913'; } .icon-ui-delete-remove:before { font-family: "icons" !important; content: '\e914'; } .icon-ui-delivery:before { font-family: "icons" !important; content: '\e915'; } .icon-ui-device_phone:before { font-family: "icons" !important; content: '\e916'; } .icon-ui-device_tablet:before { font-family: "icons" !important; content: '\e917'; } .icon-ui-directions-location:before { font-family: "icons" !important; content: '\e918'; } .icon-ui-driving:before { font-family: "icons" !important; content: '\e919'; } .icon-ui-dropdown-menu:before { font-family: "icons" !important; content: '\e91a'; } .icon-ui-edit:before { font-family: "icons" !important; content: '\e91b'; } .icon-ui-email:before { font-family: "icons" !important; content: '\e91c'; } .icon-ui-empty-bag:before { font-family: "icons" !important; content: '\e91d'; } .icon-ui-facebook_like:before { font-family: "icons" !important; content: '\e91e'; } .icon-ui-facebook:before { font-family: "icons" !important; content: '\e91f'; } .icon-ui-filter_android:before { font-family: "icons" !important; content: '\e920'; } .icon-ui-filter:before { font-family: "icons" !important; content: '\e921'; } .icon-ui-forward-on-small-carousel:before { font-family: "icons" !important; content: '\e922'; } .icon-ui-globe_alt:before { font-family: "icons" !important; content: '\e923'; } .icon-ui-globe:before { font-family: "icons" !important; content: '\e924'; } .icon-ui-google-plus:before { font-family: "icons" !important; content: '\e925'; } .icon-ui-grid-view_image-and-description:before { font-family: "icons" !important; content: '\e926'; } .icon-ui-grid-view_image:before { font-family: "icons" !important; content: '\e927'; } .icon-ui-grid-view_list:before { font-family: "icons" !important; content: '\e928'; } .icon-ui-help:before { font-family: "icons" !important; content: '\e929'; } .icon-ui-history:before { font-family: "icons" !important; content: '\e92a'; } .icon-ui-info:before { font-family: "icons" !important; content: '\e92b'; } .icon-ui-instagram:before { font-family: "icons" !important; content: '\e92c'; } .icon-ui-light-bulb:before { font-family: "icons" !important; content: '\e92d'; } .icon-ui-locked:before { font-family: "icons" !important; content: '\e92e'; } .icon-ui-logout:before { font-family: "icons" !important; content: '\e92f'; } .icon-ui-marker:before { font-family: "icons" !important; content: '\e930'; } .icon-ui-more-menu_iOS:before { font-family: "icons" !important; content: '\e931'; } .icon-ui-more_android:before { font-family: "icons" !important; content: '\e932'; } .icon-ui-notification:before { font-family: "icons" !important; content: '\e933'; } .icon-ui-orders:before { font-family: "icons" !important; content: '\e934'; } .icon-ui-photo-image:before { font-family: "icons" !important; content: '\e935'; } .icon-ui-pinterest:before { font-family: "icons" !important; content: '\e936'; } .icon-ui-price-tag_promo:before { font-family: "icons" !important; content: '\e937'; } .icon-ui-price-tag:before { font-family: "icons" !important; content: '\e938'; } .icon-ui-print:before { font-family: "icons" !important; content: '\e939'; } .icon-ui-product_add:before { font-family: "icons" !important; content: '\e93a'; } .icon-ui-product:before { font-family: "icons" !important; content: '\e93b'; } .icon-ui-quick-view:before { font-family: "icons" !important; content: '\e93c'; } .icon-ui-remove_alt:before { font-family: "icons" !important; content: '\e93d'; } .icon-ui-remove:before { font-family: "icons" !important; content: '\e93e'; } .icon-ui-reset-refresh:before { font-family: "icons" !important; content: '\e93f'; } .icon-ui-scanner:before { font-family: "icons" !important; content: '\e940'; } .icon-ui-search:before { font-family: "icons" !important; content: '\e941'; } .icon-ui-secure:before { font-family: "icons" !important; content: '\e942'; } .icon-ui-settings:before { font-family: "icons" !important; content: '\e943'; } .icon-ui-share_android:before { font-family: "icons" !important; content: '\e944'; } .icon-ui-share_iOS:before { font-family: "icons" !important; content: '\e945'; } .icon-ui-shopping-bag:before { font-family: "icons" !important; content: '\e946'; } .icon-ui-size-guide:before { font-family: "icons" !important; content: '\e947'; } .icon-ui-snapchat:before { font-family: "icons" !important; content: '\e948'; } .icon-ui-star_empty:before { font-family: "icons" !important; content: '\e949'; } .icon-ui-star_full:before { font-family: "icons" !important; content: '\e94a'; } .icon-ui-star_half:before { font-family: "icons" !important; content: '\e94b'; } .icon-ui-stock-levels:before { font-family: "icons" !important; content: '\e94c'; } .icon-ui-stores-nearby:before { font-family: "icons" !important; content: '\e94d'; } .icon-ui-time:before { font-family: "icons" !important; content: '\e94e'; } .icon-ui-twitter:before { font-family: "icons" !important; content: '\e94f'; } .icon-ui-user:before { font-family: "icons" !important; content: '\e950'; } .icon-ui-voice-search:before { font-family: "icons" !important; content: '\e951'; } .icon-ui-walk:before { font-family: "icons" !important; content: '\e952'; } .icon-ui-windows:before { font-family: "icons" !important; content: '\e953'; } .icon-ui-wishlist_alt:before { font-family: "icons" !important; content: '\e954'; } .icon-ui-wishlist_empty:before { font-family: "icons" !important; content: '\e955'; } .icon-ui-wishlist_full:before { font-family: "icons" !important; content: '\e956'; } .icon-ui-youtube:before { font-family: "icons" !important; content: '\e957'; } .icon-ui-zoom-in_alt:before { font-family: "icons" !important; content: '\e958'; } .icon-ui-zoom-in:before { font-family: "icons" !important; content: '\e959'; } .icon-ui-zoom-out_alt:before { font-family: "icons" !important; content: '\e95a'; } .icon-ui-zoom-out:before { font-family: "icons" !important; content: '\e95b'; } /* // +--------------------------------------------------------------------------------------------------------+ // | Utils | // | Used for re-usage and generic styles | // +--------------------------------------------------------------------------------------------------------+ */ .loading-container { text-align: center; } .loading-indicator { width: 100%; height: 100%; position: absolute; background: #fff url(/Assets/RiverIsland/Core/images/_responsive/site/loading.gif) no-repeat center center; opacity: 0.8; filter: alpha(opacity=80); z-index: 19; display: none; } .max-width { max-width: 100%; } .clear-fix, .clearfix { *zoom: 1; } .clear-fix:before, .clear-fix:after, .clearfix:before, .clearfix:after { content: ""; display: table; } .clear-fix:after, .clearfix:after { clear: both; } .clear-both { clear: both; } .text-uppercase { text-transform: uppercase; } .relative { position: relative; } .relative { *zoom: 1; } .relative:before, .relative:after { content: ""; display: table; } .relative:after { clear: both; } .f-left { float: left; z-index: 2; } .f-right { float: right; } .opacity-50pc { opacity: 0.5; filter: alpha(opacity=50); } .email-conf-v1 { display: none; } .icon-shipping:before { content: "a"; } .icon-share-alt:before { content: "b"; } .icon-settings:before { content: "c"; } /*.icon-search:before { content: "d"; }*/ .icon-save:before { content: "e"; } .icon-river-island:before { content: "f"; position: relative; left: -10px; } .icon-ribbon:before { content: "g"; } .icon-ri:before { content: "h"; } .icon-refresh:before { content: "i"; } .icon-quote:before { content: "j"; } .icon-print:before { content: "k"; } .icon-pound:before { content: "l"; } .icon-mobile-4:before { content: "m"; } .icon-orders:before { content: "n"; } .icon-padlock:before { content: "o"; } .icon-paragraph:before { content: "p"; } .icon-pause:before { content: "q"; } .icon-paypal:before { content: "r"; } .icon-photo:before { content: "s"; } .icon-pinterest:before { content: "t"; } .icon-play:before { content: "u"; } .icon-plus:before { content: "v"; } .icon-minus:before { content: "w"; } .icon-menu:before { content: "x"; } .icon-location-1:before { content: "y"; } .icon-location:before { content: "z"; } .icon-list-view:before { content: "A"; } .icon-levels:before { content: "B"; } /*.icon-key:before { content: "C"; }*/ .icon-instagram:before { content: "D"; } .icon-info-1:before { content: "E"; } .icon-mobile-3:before { content: "F"; } .icon-home:before { content: "G"; } .icon-email:before { content: "H"; } /*.icon-email-1:before { content: "I"; }*/ .icon-euro:before { content: "J"; } .icon-exclamation:before { content: "K"; } .icon-eye:before { content: "L"; } .icon-facebook:before { content: "M"; } .icon-film:before { content: "N"; } .icon-filter:before { content: "O"; } .icon-google-plus:before { content: "P"; } .icon-grid-view-alt:before { content: "Q"; } .icon-grid-view-alt2:before { content: "R"; } .icon-dollar:before { content: "S"; } .icon-credit-card:before { content: "T"; } .icon-close:before { content: "U"; } .icon-circle-1:before { content: "V"; } .icon-circle:before { content: "W"; } .icon-checked-1:before { content: "X"; } .icon-checked:before { content: "Y"; } .icon-account-2:before { content: "Z"; } .icon-address:before { content: "0"; } .icon-android:before { content: "1"; } .icon-android-menu:before { content: "2"; } .icon-apple:before { content: "3"; } .icon-badge:before { content: "4"; } /*.icon-bag-1:before { content: "5"; }*/ .icon-barcode:before { content: "6"; } .icon-billing:before { content: "7"; } .icon-checkbox:before { content: "8"; } .icon-account-1:before { content: "9"; } .icon-2-up-arrow:before { content: "!"; } .icon-2-right-arrow:before { content: "\""; } .icon-2-left-arrow:before { content: "#"; } .icon-2-down-arrow:before { content: "$"; } .icon-1-up-arrow:before { content: "%"; } .icon-1-right-arrow:before { content: "&"; } .icon-1-left-arrow:before { content: "'"; } .icon-1-down-arrow.icon-1-down-arrow:before { font-family: "navigation-and-filters_v1"; content: "\66"; } /*.icon-account-3:before { content: ")"; }*/ .icon-signup:before { content: "*"; } .icon-speech-2:before { content: "+"; } .icon-star:before { content: ","; } .icon-star-1:before { content: "-"; } .icon-stop:before { content: "."; } .icon-tablet:before { content: "/"; } .icon-target:before { content: ":"; } .icon-tick:before { content: ";"; } .icon-trash:before { content: "<"; } .icon-trend:before { content: "="; } .icon-truck:before { content: ">"; } .icon-twitter:before { content: "?"; } .icon-warning:before { content: "@"; } .icon-windows:before { content: "["; } .icon-wishlist:before { content: "]"; } .icon-youtube:before { content: "^"; } .icon-360:before { content: "_"; } .icon-mobile:before { content: "`"; } .icon-view-1:before { content: "{"; } .icon-3-up-arrow:before { content: "|"; } .icon-3-right-arrow:before { content: "}"; } .icon-3-left-arrow:before { content: "~"; } @font-face { font-family: "proxima-nova"; src: url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-light-webfont.woff2?-gyccju") format("woff2"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-light-webfont.eot?#iefix-gyccju") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-light-webfont.woff?-gyccju") format("woff"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-light-webfont.ttf?-gyccju") format("truetype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-light-webfont.svg?-gyccju#IconFont2015_NavigationandFilters_v1") format("svg"); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: "proxima-nova"; src: url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-regular-webfont.woff2?-gyccju") format("woff2"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-regular-webfont.eot?#iefix-gyccju") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-regular-webfont.woff?-gyccju") format("woff"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-regular-webfont.ttf?-gyccju") format("truetype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-regular-webfont.svg?-gyccju#IconFont2015_NavigationandFilters_v1") format("svg"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "proxima-nova"; src: url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-bold-webfont.woff2?-gyccju") format("woff2"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-bold-webfont.eot?#iefix-gyccju") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-bold-webfont.woff?-gyccju") format("woff"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-bold-webfont.ttf?-gyccju") format("truetype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-bold-webfont.svg?-gyccju#IconFont2015_NavigationandFilters_v1") format("svg"); font-style: normal; font-weight: 600; font-display: swap; } @font-face { font-family: "proxima-nova"; src: url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-semibold-webfont.woff2?-gyccju") format("woff2"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-semibold-webfont.eot?#iefix-gyccju") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-semibold-webfont.woff?-gyccju") format("woff"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-semibold-webfont.ttf?-gyccju") format("truetype"), url("/Assets/RiverIsland/Core/fonts/proxima-nova/proximanova-semibold-webfont.svg?-gyccju#IconFont2015_NavigationandFilters_v1") format("svg"); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: "navigation-and-filters_v1"; src: url("/Assets/RiverIsland/Core/fonts/navigation-and-filters/navigation-and-filters_v1.eot?-gyccju"); src: url("/Assets/RiverIsland/Core/fonts/navigation-and-filters/navigation-and-filters_v1.eot?#iefix-gyccju") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/navigation-and-filters/navigation-and-filters_v1.woff?-gyccju") format("woff"), url("/Assets/RiverIsland/Core/fonts/navigation-and-filters/navigation-and-filters_v1.ttf?-gyccju") format("truetype"), url("/Assets/RiverIsland/Core/fonts/navigation-and-filters/navigation-and-filters_v1.svg?-gyccju#IconFont2015_NavigationandFilters_v1") format("svg"); font-style: normal; font-weight: normal; font-display: swap; } [class^="icon-"], [class*=" icon-"] { font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; text-transform: none; speak: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-back:before { font-family: "navigation-and-filters_v1" !important; content: "\71"; } .icon-back2:before { font-family: "navigation-and-filters_v1" !important; content: "\77"; } .icon-burger:before { font-family: "navigation-and-filters_v1" !important; content: "\65"; } .icon-cevron:before { font-family: "navigation-and-filters_v1" !important; content: "\72"; } .icon-cevron2:before { font-family: "navigation-and-filters_v1" !important; content: "\74"; } .icon-detailview:before { font-family: "navigation-and-filters_v1" !important; content: "\79"; } .icon-filter:before { font-family: "navigation-and-filters_v1" !important; content: "\6f"; } .icon-gridview:before { font-family: "navigation-and-filters_v1" !important; content: "\69"; } .icon-listview:before { font-family: "navigation-and-filters_v1" !important; content: "\75"; } .icon-overflow_And:before { font-family: "navigation-and-filters_v1" !important; content: "\70"; } .icon-overflow_iOS:before { font-family: "navigation-and-filters_v1" !important; content: "\61"; } .icon-reset:before { font-family: "navigation-and-filters_v1" !important; content: "\73"; } .icon-Search:before { font-family: "navigation-and-filters_v1" !important; content: "\64"; } @font-face { font-family: "system-and-misc_v1"; src: url("/Assets/RiverIsland/Core/fonts/system-and-misc/system-and-misc_v1.eot?6pp079"); src: url("/Assets/RiverIsland/Core/fonts/system-and-misc/system-and-misc_v1.eot?#iefix6pp079") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/system-and-misc/system-and-misc_v1.woff?6pp079") format("woff"), url("/Assets/RiverIsland/Core/fonts/system-and-misc/system-and-misc_v1.ttf?6pp079") format("truetype"), url("/Assets/RiverIsland/Core/fonts/system-and-misc/system-and-misc_v1.svg?6pp079#system-and-misc_v1") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-account:before { font-family: "system-and-misc_v1" !important; content: "\71"; } .icon-addressbook:before { font-family: "system-and-misc_v1" !important; content: "\77"; } .icon-browser:before { font-family: "system-and-misc_v1" !important; content: "\65"; } .icon-clock:before { font-family: "system-and-misc_v1" !important; content: "\74"; } .icon-edit:before { font-family: "system-and-misc_v1" !important; content: "\79"; } .icon-globe:before { font-family: "system-and-misc_v1" !important; content: "\72"; } .icon-location:before { font-family: "system-and-misc_v1" !important; content: "\75"; } .icon-no:before { font-family: "system-and-misc_v1" !important; content: "\69"; } .icon-orders:before { font-family: "system-and-misc_v1" !important; content: "\70"; } .icon-padlock:before { font-family: "system-and-misc_v1" !important; content: "\61"; } .icon-printer:before { font-family: "system-and-misc_v1" !important; content: "\73"; } .icon-setting:before { font-family: "system-and-misc_v1" !important; content: "\64"; } .icon-trash:before { font-family: "system-and-misc_v1" !important; content: "\66"; } .icon-X:before { font-family: "system-and-misc_v1" !important; content: "\67"; } .icon-yes:before { font-family: "system-and-misc_v1" !important; content: "\6f"; } .icon-tick:before { font-family: "system-and-misc_v1" !important; content: "\68"; } .icon-cross:before { font-family: "system-and-misc_v1" !important; content: "\67"; } .icon-price-pointer:before { font-family: "system-and-misc_v1" !important; content: "\6d"; } @font-face { font-family: "shopping-actions_v1"; src: url("/Assets/RiverIsland/Core/fonts/shopping-actions/shopping-actions_v1.eot?-fhcalh"); src: url("/Assets/RiverIsland/Core/fonts/shopping-actions/shopping-actions_v1.eot?#iefix-fhcalh") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/shopping-actions/shopping-actions_v1.woff?-fhcalh") format("woff"), url("/Assets/RiverIsland/Core/fonts/shopping-actions/shopping-actions_v1.ttf?-fhcalh") format("truetype"), url("/Assets/RiverIsland/Core/fonts/shopping-actions/shopping-actions_v1.svg?-fhcalh#IconFont2015_ShoppingActions_v1") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-star_hollow:before { font-family: "shopping-actions_v1" !important; content: "\71"; } .icon-Add:before { font-family: "shopping-actions_v1" !important; content: "\79"; } .icon-heart_full:before { font-family: "shopping-actions_v1" !important; content: "\65"; } .icon-heart_hollow:before { font-family: "shopping-actions_v1" !important; content: "\72"; } .icon-quicklook:before { font-family: "shopping-actions_v1" !important; content: "\69"; } .icon-shoppingbag:before { font-family: "shopping-actions_v1" !important; content: "\61"; } .icon-star_full:before { font-family: "shopping-actions_v1" !important; content: "\77"; } .icon-subtract:before { font-family: "shopping-actions_v1" !important; content: "\75"; } .icon-wishlist:before { font-family: "shopping-actions_v1" !important; content: "\74"; } .icon-zoomin:before { font-family: "shopping-actions_v1" !important; content: "\6f"; } .icon-zoomout:before { font-family: "shopping-actions_v1" !important; content: "\70"; } @font-face { font-family: "style-insider_v1"; src: url("/Assets/RiverIsland/Core/fonts/style-insider/style-insider_v1.eot?f0fwer"); src: url("/Assets/RiverIsland/Core/fonts/style-insider/style-insider_v1.eot?#iefixf0fwer") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/style-insider/style-insider_v1.woff?f0fwer") format("woff"), url("/Assets/RiverIsland/Core/fonts/style-insider/style-insider_v1.ttf?f0fwer") format("truetype"), url("/Assets/RiverIsland/Core/fonts/style-insider/style-insider_v1.svg?f0fwer#IconFont2015_StyleInsider_v1") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-Comps:before { font-family: "style-insider_v1" !important; content: "\71"; } .icon-diamond:before { font-family: "style-insider_v1" !important; content: "\77"; } .icon-latest:before { font-family: "style-insider_v1" !important; content: "\65"; } .icon-lifestyle:before { font-family: "style-insider_v1" !important; content: "\72"; } .icon-trends:before { font-family: "style-insider_v1" !important; content: "\74"; } .icon-Video:before { font-family: "style-insider_v1" !important; content: "\79"; } @font-face { font-family: "social-and-app_v1"; src: url("/Assets/RiverIsland/Core/fonts/social-and-app/social-and-app_v1.eot?-khij3b"); src: url("/Assets/RiverIsland/Core/fonts/social-and-app/social-and-app_v1.eot?#iefix-khij3b") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/social-and-app/social-and-app_v1.woff?-khij3b") format("woff"), url("/Assets/RiverIsland/Core/fonts/social-and-app/social-and-app_v1.ttf?-khij3b") format("truetype"), url("/Assets/RiverIsland/Core/fonts/social-and-app/social-and-app_v1.svg?-khij3b#/Assets/RiverIsland/Core/fonts/social-and-app/social-and-app_v1") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-Amazon:before { font-family: "social-and-app_v1" !important; content: "\71"; } .icon-Android:before { font-family: "social-and-app_v1" !important; content: "\77"; } .icon-Apple:before { font-family: "social-and-app_v1" !important; content: "\65"; } .icon-Blackberry:before { font-family: "social-and-app_v1" !important; content: "\72"; } .icon-Facebook:before { font-family: "social-and-app_v1" !important; content: "\74"; } .icon-GooglePlus:before { font-family: "social-and-app_v1" !important; content: "\79"; } .icon-Instagram:before { font-family: "social-and-app_v1" !important; content: "\75"; } .icon-like:before { font-family: "social-and-app_v1" !important; content: "\69"; } .icon-Pinterest:before { font-family: "social-and-app_v1" !important; content: "\6f"; } .icon-Share_Android:before { font-family: "social-and-app_v1" !important; content: "\70"; } .icon-Share_iOS:before { font-family: "social-and-app_v1" !important; content: "\61"; } .icon-Twitter:before { font-family: "social-and-app_v1" !important; content: "\73"; } .icon-WinPhone:before { font-family: "social-and-app_v1" !important; content: "\64"; } .icon-YouTube:before { font-family: "social-and-app_v1" !important; content: "\66"; } @font-face { font-family: 'socialIconSet'; font-style: normal; font-weight: normal; src: url("/Assets/RiverIsland/Core/fonts/social-icon-font/icomoon.eot"); src: url("/Assets/RiverIsland/Core/fonts/social-icon-font/icomoon.eot?#iefix") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/social-icon-font/icomoon.woff") format("woff"), url("/Assets/RiverIsland/Core/fonts/social-icon-font/icomoon.ttf") format("truetype"), url("/Assets/RiverIsland/Core/fonts/social-icon-font/icomoon.svg#iconvault") format("svg"); } [class^="icon-"], [class*=" icon-"] { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-instagram-circle:before { font-family: 'socialIconSet' !important; color: #007bb7; content: "\71"; } .icon-twitter-circle:before { font-family: 'socialIconSet' !important; color: #00aced; content: "\77"; } .icon-facebook-circle:before { font-family: 'socialIconSet' !important; color: #3b5998; content: "\65"; } .icon-pinterest-circle:before { font-family: 'socialIconSet' !important; color: #cd2027; content: "\72"; } .icon-googleplus-circle:before { font-family: 'socialIconSet' !important; color: #dd4b39; content: "\64"; } .icon-youtube-circle:before { font-family: 'socialIconSet' !important; color: #bb0000; content: "\79"; } .icon-snapchat-circle:before { font-family: 'socialIconSet' !important; color: #ece000; content: "\75"; } .icon-thumbsup-circle:before { font-family: 'socialIconSet' !important; content: "\69"; } .icon-bookonline-circle:before { font-family: 'socialIconSet' !important; content: "\6f"; } .icon-call-circle:before { font-family: 'socialIconSet' !important; content: "\70"; } .icon-app-circle:before { font-family: 'socialIconSet' !important; content: "\61"; } .icon-likeus-circle:before { font-family: 'socialIconSet' !important; color: #3b5998; content: "\73"; } .icon-minus-circle:before { font-family: 'socialIconSet' !important; content: "\67"; } .icon-plus-circle:before { font-family: 'socialIconSet' !important; content: "\66"; } @font-face { font-family: "product-details"; src: url("/Assets/RiverIsland/Core/fonts/product-details/product-details.eot"); src: url("/Assets/RiverIsland/Core/fonts/product-details/product-details.eot?#iefix") format("embedded-opentype"), url("/Assets/RiverIsland/Core/fonts/product-details/product-details.woff") format("woff"), url("/Assets/RiverIsland/Core/fonts/product-details/product-details.ttf") format("truetype"), url("/Assets/RiverIsland/Core/fonts/product-details/product-details.svg#iconvault") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-info:before { font-family: "product-details" !important; content: "\6d" !important; } .icon-stock:before { font-family: "product-details" !important; content: "\6e"; } .icon-wishlist:before { font-family: "product-details" !important; content: "\76"; } .icon-wishlistActive:before { font-family: "product-details" !important; content: "\62"; } /* // +--------------------------------------------------------------------------------------------------------+ // | Fonts | // +--------------------------------------------------------------------------------------------------------+ */ /* Generated CSS from */ @font-face { font-family: ri-v1-5; src: url("/Assets/RiverIsland/Core/css/_responsive/fonts/ri-v1-5.eot"); src: url("/Assets/RiverIsland/Core/css/_responsive/fonts/ri-v1-5.eot?#iefix") format("embedded-opentype"), url("/Assets/RiverIsland/Core/css/_responsive/fonts/ri-v1-5.ttf") format("truetype"), url("/Assets/RiverIsland/Core/css/_responsive/fonts/ri-v1-5.svg") format("svg"), url("/Assets/RiverIsland/Core/css/_responsive/fonts/ri-v1-5.woff") format("woff"); font-smooth: always; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; font-display: swap; } [data-icon]:before { font-family: ri-v1-5; content: attr(data-icon); font-style: normal; font-weight: 400; font-variant: normal; text-transform: none !important; speak: none; display: inline-block; text-decoration: none; width: 1em; line-height: 1em; -webkit-font-smoothing: antialiased; font-smooth: always; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: ri-v1-5; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none !important; speak: none; display: inline-block; text-decoration: none; width: 1em; line-height: 1em; -webkit-font-smoothing: antialiased; font-smooth: always; } /* Social icons */ .icon-facebook:hover, .icon-facebook:active { color: rgba(59, 89, 152, 0.7); } .icon-twitter:hover, .icon-twitter:active { color: rgba(0, 172, 237, 0.7); } .icon-google-plus:hover, .icon-google-plus:active { color: rgba(172, 0, 0, 0.7); } .icon-youtube:hover, .icon-youtube:active { color: rgba(167, 41, 36, 0.7); } .icon-pinterest:hover, .icon-pinterest:active { color: rgba(204, 33, 38, 0.7); } .icon-instagram:hover, .icon-instagram:active { color: rgba(71, 117, 155, 0.7); } .icon-mobile-3:hover, .icon-mobile-3:active { color: black; } /* SPRITES */ .sprite { height: 24px; width: 24px; } /* BAG */ .sprite-bag-white { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") -96px -48px; } .icon-bag-1:hover .sprite-bag-white { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") -96px -120px; } /*ACCOUNT */ .sprite-account-white { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") -72px 0; } .icon-account-3:hover .sprite-account-white, .active-a .sprite-account-white { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") -72px -72px; } /*SEARCH*/ .sprite-search-white { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") -192px 0; } .icon-search:hover .sprite-search-white, .active-a .sprite-search-white { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") -192px -72px; } /* SOCIAL */ .sprite-facebook { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") 0 -48px; } .sprite-twitter { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") 0 -24px; } .sprite-pinterest { background: url("https://images.riverisland.com/is/image/RiverIsland/icon.lib.devs?$PNG%20Alpha%20Transparency$&scl=1") 0 0; } html { font-family: 'proxima-nova', Arial, Helvetica; color: #252525; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-size: 16px; } /* STYLES */ .display-4, h1 { font-size: 32px; font-weight: 300; line-height: 52px; color: #696969; } @media only screen and (min-width: 43.8125em) { .display-4, h1 { font-size: 40px; } } @media only screen and (min-width: 64.625em) { .display-4, h1 { font-size: 48px; } } .display-3, h2 { font-size: 26px; font-weight: 400; line-height: 42px; color: #737373; } @media only screen and (min-width: 43.8125em) { .display-3, h2 { font-size: 32px; } } @media only screen and (min-width: 64.625em) { .display-3, h2 { font-size: 36px; } } .display-2, h3 { font-size: 20px; font-weight: 400; line-height: 34px; color: #232323; } @media only screen and (min-width: 43.8125em) { .display-2, h3 { font-size: 24px; } } @media only screen and (min-width: 64.625em) { .display-2, h3 { font-size: 28px; } } .display-1, h4 { font-size: 18px; font-weight: 700; line-height: 32px; color: #838383; } @media only screen and (min-width: 43.8125em) { .display-1, h4 { font-size: 20px; } } @media only screen and (min-width: 64.625em) { .display-1, h4 { font-size: 24px; } } .headline, h5 { font-size: 18px; font-weight: 400; line-height: 28px; color: #404040; } @media only screen and (min-width: 43.8125em) { .headline, h5 { font-size: 20px; } } @media only screen and (min-width: 64.625em) { .headline, h5 { font-size: 20px; } } .label, h6 { font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: 0.1px; color: #404040; } @media only screen and (min-width: 43.8125em) { .label, h6 { font-size: 18px; } } @media only screen and (min-width: 64.625em) { .label, h6 { font-size: 18px; } } .label-2 { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: 0.005em; color: #404040; } @media only screen and (min-width: 43.8125em) { .label-2 { font-size: 16px; } } @media only screen and (min-width: 64.625em) { .label-2 { font-size: 16px; } } .body-2, .body-2 p { font-size: 16px; font-weight: 300; line-height: 22px; letter-spacing: 0.03em; color: #404040; } .body-1, .body-1 p { font-size: 14px; font-weight: 300; line-height: 24px; letter-spacing: 0.03em; color: #2c2c2c; } .caption-2 { font-size: 15px; font-weight: 600; line-height: 24px; letter-spacing: 0.02em; color: #404040; } .caption-1 { font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 0.025em; color: #9a9a9a; } .menu-el-3 { font-size: 15px; font-weight: 600; line-height: 40px; letter-spacing: 0.025em; color: #404040; } .menu-el-2 { font-size: 16px; font-weight: 600; line-height: 40px; letter-spacing: 0.025em; color: #404040; } .menu-el-1 { font-size: 15px; font-weight: 400; line-height: 40px; letter-spacing: 0.025em; color: #404040; } .facet-menu-1 { font-size: 15px !important; font-weight: 400; line-height: 30px; letter-spacing: 0.025em; color: #404040; } .cta-text { font-size: 14px; font-weight: 600; text-transform: uppercase; line-height: 18px; letter-spacing: 0.1em; color: #232323; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: 'proxima-nova', sans-serif; font-weight: "normal"; margin: 0; } h1 { text-align: center; } /*General links*/ a { text-decoration: none; color: #555555; } .no-touch a:hover { color: #00aeef; } footer { margin-top: 32px; padding-bottom: 24px; position: relative; } footer .content-wrap--full { padding: 0; } footer .contribute .center { margin: 0 auto; width: auto; } @media only screen and (min-width: 768px) { footer .contribute .center { width: 768px; } } footer .contribute .center:before, footer .contribute .center:after { clear: both; content: ''; display: table; } footer .footerNav-container { width: 100%; } @media only screen and (min-width: 768px) { footer .footerNav-container { padding: 2em 0; } } footer .footerNav-container .col-span4-right { float: none; margin: 0; width: 100%; } @media only screen and (min-width: 768px) { footer .footerNav-container .col-span4-right { float: none; width: 100%; } } @media only screen and (min-width: 980px) { footer .footerNav-container .col-span4-right { float: right; margin: 0.25em 0; width: 27.25%; } } footer .footerNav-container .col-span4 { background: #edeeee; border-bottom: 1px solid #e1e1e1; float: none; margin: 0.5em 0; width: 100%; } @media only screen and (min-width: 768px) { footer .footerNav-container .col-span4 { background: none; border: none; } } footer .footerNav-container .col-span4:last-of-type { border: none; margin: 0.5em 0 0; } @media only screen and (min-width: 768px) { footer .footerNav-container .col-span4:last-of-type { margin-right: 0; } } @media only screen and (min-width: 768px) { footer .footerNav-container .col-span4 { float: left; margin-right: 1.6%; width: 32.26%; } } @media only screen and (min-width: 980px) { footer .footerNav-container .col-span4 { float: left; margin-right: 0.25%; width: 24%; } } /* Colours */ .ui-display { font-size: 48px; font-size: 3rem; font-weight: 300; line-height: 70px; color: rgba(0, 0, 0, 0.74); } @media only screen and (max-width: 768px) { .ui-display { font-size: 26px; font-size: 1.625rem; font-weight: 400; line-height: 40px; } } .ui-product-title { font-size: 26px; font-size: 1.625rem; font-weight: 400; line-height: 36px; color: rgba(0, 0, 0, 0.74); } @media only screen and (max-width: 43.75em) { .ui-product-title { font-size: 16px; font-size: 1rem; font-weight: 400; color: rgba(0, 0, 0, 0.87); } } .ui-product-number { font-size: 14px; font-size: 0.875rem; font-weight: 800; line-height: 24px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-headline, .popup .popup__text { font-size: 20px; font-size: 1.25rem; font-weight: 500; line-height: 28px; color: rgba(0, 0, 0, 0.87); } .ui-label, .ui-btn-back { font-size: 16px; font-size: 1rem; font-weight: 400; color: rgba(0, 0, 0, 0.87); } .ui-body-text, .ui-input-text, .ui-input-textarea, .ui-input-text-search, .newsletter-modal__row .newsletter-modal__row__input, .ui-input-mm, .ui-input-yy { font-size: 16px; font-size: 1rem; font-weight: 400; line-height: 26px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.3px; } .ui-caption, .ui-text-error { font-size: 12px; font-size: 0.75rem; font-weight: 500; line-height: 18px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-btn, .ui-select select, .ui-btn-transactional, .popup .popup__button--checkout, .ui-btn-active, .ui-btn-alt-1, .popup .popup__button--view, .ui-btn-alt-2, .ui-btn-alt-3, .ui-btn-breadbasket, .ui-btn-switch-right-sel, .ui-btn-switch-right, .ui-btn-switch-left-sel, .ui-btn-switch-left, .ui-btn-qty, .ui-btn-accordion, .ui-btn-search-active, .newsletter-modal__row.email .newsletter-modal__row__button--grey-a, .ui-btn-search { font-size: 14px; font-size: 0.875rem; font-weight: 500; line-height: 16px; color: rgba(0, 0, 0, 0.94); letter-spacing: 0.5px; } .ui-menu-inactive { font-size: 15px; font-size: 0.9375rem; font-weight: 400; line-height: 30px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-menu-active { font-size: 15px; font-size: 0.9375rem; font-weight: 500; line-height: 30px; color: rgba(0, 0, 0, 0.87); letter-spacing: 0.25px; } .ui-textlink { font-size: 15px; font-size: 0.9375rem; font-weight: 800; line-height: 30px; color: rgba(0, 0, 0, 0.87); text-decoration: underline; letter-spacing: 0.25px; } .ui-textlink:hover { color: #333333; } button.ui-textlink { padding: 0; text-transform: none; } button.ui-textlink, button.ui-textlink:hover { background: none !important; box-shadow: none; } .ui-placeholder, .ui-input-text::-webkit-input-placeholder, .ui-input-text:-moz-placeholder, .ui-input-text::-moz-placeholder, .ui-input-text:-ms-input-placeholder, .ui-input-textarea::-webkit-input-placeholder, .ui-input-textarea:-moz-placeholder, .ui-input-textarea::-moz-placeholder, .ui-input-textarea:-ms-input-placeholder, .ui-input-text-search::-webkit-input-placeholder, .newsletter-modal__row .newsletter-modal__row__input::-webkit-input-placeholder, .ui-input-text-search:-moz-placeholder, .newsletter-modal__row .newsletter-modal__row__input:-moz-placeholder, .ui-input-text-search::-moz-placeholder, .newsletter-modal__row .newsletter-modal__row__input::-moz-placeholder, .ui-input-text-search:-ms-input-placeholder, .newsletter-modal__row .newsletter-modal__row__input:-ms-input-placeholder, .ui-input-mm::-webkit-input-placeholder, .ui-input-mm:-moz-placeholder, .ui-input-mm::-moz-placeholder, .ui-input-mm:-ms-input-placeholder, .ui-input-yy::-webkit-input-placeholder, .ui-input-yy:-moz-placeholder, .ui-input-yy::-moz-placeholder, .ui-input-yy:-ms-input-placeholder { font-size: 16px; font-size: 1rem; font-weight: 400; line-height: 26px; color: rgba(0, 0, 0, 0.37); letter-spacing: 0.3px; } /* Buttons */ .ui-btn-transactional, .popup .popup__button--checkout { text-transform: uppercase; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 0; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #e4e726; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-transactional:hover, .popup .popup__button--checkout:hover { background: #cccf22 !important; color: #000000; } .ui-btn-transactional.disabled, .popup .disabled.popup__button--checkout { background: #f0f288; color: #737373; box-shadow: none; } .ui-btn-transactional.disabled:hover, .popup .disabled.popup__button--checkout:hover { background: #f0f288 !important; } .ui-btn-active { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-active:hover { background: #3AA66D !important; } .ui-btn-active.disabled { background: #97d9b6; box-shadow: none; } .ui-btn-active.disabled:hover { background: #97d9b6 !important; } .ui-btn-alt-1, .popup .popup__button--view { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #e1e1e1; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-alt-1:hover, .popup .popup__button--view:hover { background: #e6e6e6 !important; } .ui-btn-alt-1.disabled, .popup .disabled.popup__button--view { background: #efefef; color: #737373; box-shadow: none; } .ui-btn-alt-1.disabled:hover, .popup .disabled.popup__button--view:hover { background: #efefef !important; } .ui-btn-alt-2 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 0; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-alt-2:hover { background: #D4D5D5 !important; } .ui-btn-alt-2.disabled { background: #f5f6f6; color: #737373; box-shadow: none; } .ui-btn-alt-2.disabled:hover { background: #f5f6f6 !important; } .ui-btn-alt-3 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 16px 0; border: 1px solid #e1e1e1; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #ffffff; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-alt-3:hover { background: #E5E5E5 !important; } .ui-btn-alt-3.disabled { color: #737373; box-shadow: none; } .ui-btn-breadbasket { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ padding: 18px 0; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: left; background: #ffffff; } .ui-btn-switch-right-sel { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-switch-right-sel:hover { background: #3AA66D !important; } .ui-btn-switch-right { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-switch-right:hover { background: #D4D5D5 !important; } .ui-btn-switch-left-sel { -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-switch-left-sel:hover { background: #3AA66D !important; } .ui-btn-switch-left { -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-switch-left:hover { background: #D4D5D5 !important; } .ui-btn-subtract { -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; background-clip: padding-box; font-size: 20px; font-size: 1.25rem; padding: 14px; height: 50px; border: 1px solid #e1e1e1; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-subtract:hover { background: #D4D5D5 !important; } .ui-btn-subtract.disabled { background: #f5f6f6; color: #737373; } .ui-btn-subtract.disabled:hover { background: #f5f6f6 !important; } .ui-btn-qty { height: 50px; width: 70px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; border-left: none; border-right: none; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #ffffff; } .ui-btn-qty:focus { outline: none !important; border-top: 1px solid #e1e1e1 !important; border-bottom: 1px solid #e1e1e1 !important; border-left: none !important; border-right: none !important; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) !important; } .ui-btn-add { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; background-clip: padding-box; font-size: 20px; font-size: 1.25rem; padding: 14px; height: 50px; border: 1px solid #e1e1e1; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-add:hover { background: #D4D5D5 !important; } .ui-btn-accordion { background: #edeeee; padding: 18px 3.125em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); border-top: 1px solid #D4D5D5; } .ui-btn-accordion:hover { background: #D4D5D5 !important; } .ui-btn-search-active, .newsletter-modal__row.email .newsletter-modal__row__button--grey-a { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; text-align: center; background: #41b97a; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; color: #ffffff; } .ui-btn-search-active:hover, .newsletter-modal__row.email .newsletter-modal__row__button--grey-a:hover { background: #3AA66D !important; } .ui-btn-search { -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; padding: 18px 3.125em; text-align: center; background: #edeeee; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } .ui-btn-search:hover { background: #D4D5D5 !important; } .ui-btn-back { padding: 5px 0; text-align: center; background: #ffffff; } /* Input types - input[type="number"], input[type="email"], input[type="text"], input[type="password"], textarea, select */ /* Labels */ /* label, .ui-label { @extend .ui-body-text; } */ /* Selects (drop downs) */ .ui-select select { height: 50px; border: 1px solid #e1e1e1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); background: #ffffff; } /* Inputs (field containers) */ .ui-input-text { height: 50px; border: 1px solid #e1e1e1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ background: #ffffff; } .ui-input-text:focus { outline: none !important; border: 2px solid #41b97a; box-shadow: none !important; } .ui-input-textarea { border: 1px solid #e1e1e1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* stops bg color from leaking outside the border: */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ -moz-background-clip: border; /* Firefox 3.6 */ background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ background: #ffffff; } .ui-input-textarea:focus { outline: none !important; border: 2px solid #41b97a; box-shadow: none !important; } .ui-input-text-search, .newsletter-modal__row .newsletter-modal__row__input { height: 50px; border: 1px solid #e1e1e1; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; background: #ffffff; } .ui-input-text-search:focus, .newsletter-modal__row .newsletter-modal__row__input:focus { outline: none !important; border: 2px solid #41b97a; box-shadow: none !important; } .ui-input-mm { height: 50px; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; background-clip: padding-box; background: #ffffff; } .ui-input-mm:focus { outline: none !important; border: 2px solid #41b97a; } .ui-input-yy { height: 50px; border: 1px solid #e1e1e1; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; background-clip: padding-box; background: #ffffff; } .ui-input-yy:focus { outline: none !important; border: 2px solid #41b97a; } /* Validation error */ .ui-text-error { color: #ff586d; } .ui-focus-error { border: 2px solid #ff586d !important; } /* Checkboxes and radio buttons */ /* input[type='checkbox']:checked ~ label:before { //font-family: $baseFont !important; content: "\e910"; font-size: 15px; border: 2px solid $active-green; } */ /* .checkbox-container label:before { position: absolute; top: 2px; left: 0; display: inline-block; //font-family: $baseFont !important; content: "" !important; border: 1px solid $middle-grey; width: 26px; height: 26px; line-height: 25px; text-align: center; color: $active-green; overflow: hidden; } */ /* label .ui-checkbox { @extend .ui-caption; } */ .region-DE .newsletter-modal__window .ui-headline, .region-DE .newsletter-modal__window .popup .popup__text, .popup .region-DE .newsletter-modal__window .popup__text { padding: 0 20px; } .input-validation-error { border: 2px solid #ff586d !important; } #newsletter-signup-modal-wrapper { display: none; } #newsletter-signup-modal-wrapper div.modal__background { background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 998; display: block; } div.modal__background.ng-hide { background-color: transparent; } div.modal__background.ng-hide-add.ng-hide-add-active, div.modal__background.ng-hide-remove.ng-hide-remove-active { transition: 250ms ease all; } .newsletter-modal__window { height: 365px; width: 452px; } .newsletter-modal__window .icon-checkbox, .newsletter-modal__window .icon-tick { height: 26px; margin: 0; line-height: 22px; cursor: pointer; } .newsletter-modal__window .icon-checkbox:before, .newsletter-modal__window .icon-tick:before { float: left; } .newsletter-modal__window .icon-checkbox:before, .newsletter-modal__window .icon-tick:before { background-color: #fff; width: 24px; height: 24px; background-clip: border-box; border: 1px solid #e1e1e1; box-shadow: none; margin-right: 15px; line-height: 1em; } .newsletter-modal__window .icon-checkbox:before { color: #FFF; } .newsletter-modal__window .icon-tick:before { color: #439C00; } div.modal__background > .newsletter-modal__window { background-color: #f9f9f8; border-radius: 0; box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; position: fixed; left: 50%; margin-left: -220px; top: 30%; z-index: 999; display: block; border: 2px solid #e1e1e1; text-align: center; color: #e1e1e1; } div.modal__background > .newsletter-modal__window label { color: #252525; } div.modal__background > .newsletter-modal__window .newsletter-modal__close-icon { float: right; margin: 10px; font-size: 24px; } div.modal__background > .newsletter-modal__window p { margin-bottom: 20px; margin-top: 0; } div.modal__background.ng-hide > .modal__window.ng-enter { top: -200px; transition: 250ms ease top; } div.modal__background.ng-hide > .modal__window.ng-enter.ng-enter-active { top: 200px; } .newsletter-modal__window h1.display-2 { margin-top: 30px; margin-bottom: 20px; float: none; } .newsletter-modal__window .ui-headline, .newsletter-modal__window .popup .popup__text, .popup .newsletter-modal__window .popup__text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 30px; white-space: normal; line-height: 34px; opacity: 1; } .newsletter-modal__window .success-message { margin-bottom: 12px !important; } .newsletter-modal__window .promocode { width: 100%; background-color: #edeeee; height: 60px; color: #e1e1e1; text-align: center; } .newsletter-modal__window .promocode h2 { line-height: 60px; } .newsletter-modal__window p.caption-2 { color: #e1e1e1; margin: 10px !important; } /* NEW */ .close { float: right; } .newsletter-modal__row { padding: 0; } .newsletter-modal__row.validation { float: left; clear: both; width: 100%; overflow: hidden; } .newsletter-modal__row.validation .ng-active { background-color: #ff0000; color: #FFF; } .newsletter-modal__row.email { float: left; clear: both; position: relative; padding-top: 21px; padding-left: 21px; padding-bottom: 8px; width: 100%; box-sizing: border-box; } .newsletter-modal__row.email input { width: 292px; height: 44 px; float: left; padding: 12px 20px; font-family: 'proxima-nova', sans-serif; box-sizing: border-box; } .newsletter-modal__row.email .newsletter-modal__row__button--grey-a { font-family: 'proxima-nova', sans-serif; border: 0; float: left; text-transform: none; padding-left: 1.125em; padding-right: 1.125em; line-height: 14px; width: 110px; } .newsletter-modal__row.email .newsletter-modal__row__button--grey-a:hover { background: #3AA66D !important; } .newsletter-modal__row.email .newsletter-modal__row__button--grey-a:focus { outline: none; } .newsletter-modal__row.disclaimer { position: absolute; bottom: 44px; font-weight: 600; padding: 0 30px; } .newsletter-modal__row.disclaimer p { padding: 0 40px; } .newsletter-modal__row.disclaimer p a { font-weight: bold; text-decoration: underline; color: #000000; } .newsletter-modal__row.headline, h5.newsletter-modal__row { padding: 14px 18px 0 18px; } .modal__footer { clear: both; background: #edeeee; float: left; width: 100%; padding: 11px 14px 11px 14px; box-sizing: border-box; position: absolute; bottom: 0; } .modal__footer .close1 { float: left; } .modal__footer .close2 { float: right; } .region-UK .newsletter-modal__window, .region-SE .newsletter-modal__window { height: 365px; } .region-DE .newsletter-modal__row.email { padding: 26px 18px 8px 18px; } .modal__background .field-validation-error { float: left; clear: both; width: 100%; height: 25px; background-color: #ff0000; color: #fff; box-sizing: border-box; } .modal__background .field-validation-error span:before { display: none; } .popup { top: 0px; z-index: 100; width: 280px; border-radius: 5px; background-color: #edeeee; position: fixed; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); padding: 20px; display: none; color: #000000; padding-top: 10px; padding-bottom: 6px; } .popup div.item-count { top: 6px; left: 4px; height: 16px; width: 16px; border-radius: 8px; color: #000; line-height: 16px; background-color: #e4e53f; font-size: 10px; text-align: center; position: absolute; z-index: 99; pointer-events: none; } .popup .popup__text { margin: 0px; } .popup .popup__bag { padding-top: 11px; display: inline-block; padding-left: 11px; position: absolute; right: 14px; top: 0px; } .popup .popup__bag .icon-shoppingbag { font-size: 1.5rem; float: left; } .popup .popup__bag .popup__bag__text { float: right; margin-top: 2px; margin-left: 5px; color: #000000; } .header--fixed .popup .popup__bag .popup__bag__text { display: none; } .popup .popup__button--view { display: block; margin-top: 15px; margin-bottom: 14px; } .popup .popup__button--checkout { display: block; margin-bottom: 14px; width: 100%; } .popup .popup__close { color: #000000; font-size: 12px; letter-spacing: 0.3px; text-align: center; margin: 0px; } @media (min-width: 0px) and (max-width: 768px) { .popup__bag__text { display: none; } } @media (min-width: 0px) and (max-width: 450px) { .popup { width: 98%; left: 1%; top: 4px; padding: 0px; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } .popup .popup__bag { position: fixed; top: 0px; right: 10px; } .popup .popup__text { text-align: center; margin-top: 20px; font-size: 20px; opacity: 0.87; color: #000000; } .popup .popup__bag__text { display: block; text-align: center; margin-top: 8px; margin-bottom: 4px; font-size: 16px; letter-spacing: 0.3px; } .popup .popup__close { margin-bottom: 10px; font-size: 12px; } .popup .popup__button--checkout { margin-bottom: 25px; } }