@charset "UTF-8";
/* =============================================================================
Boilerplate by Callum Strong
URL: https://github.com/csscallum/Boilerplate
Apache License: v2.0. https://www.apache.org/licenses/LICENSE-2.0
Website Author: Alex Hall
Designed by: Tom Kidd
Purpose: Contains all Lakeland core page stlying, to be included on every
page and that can only be updated during official releases
============================================================================= */
/* =============================================================================
Pre-build - Generic classes, reset (normalize), silent workers
========================================================================= */
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* Misc ===================================================================== */
/* Mixins - Setup some handy, resuable snippets ============================= */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* Normalize - Start with a nice clean cross browser base =================== */
/* =============================================================================
normalize.css v3.0.1 | MIT License | git.io/normalize
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Remove default margin.
*/
body {
margin: 0; }
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block; }
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none; }
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: 300; }
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: .67em 0; }
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* 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: -.5em; }
sub {
bottom: -.25em; }
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0; }
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden; }
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px; }
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto; }
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em; }
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */ }
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible; }
/**
* 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 Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
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.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal; }
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 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 and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em; }
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto; }
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: 300; }
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
td,
th {
padding: 0; }
/* Reusable helper classes such as IR, Clearfix, border-box etc. ============ */
/* =============================================================================
Helper Classes/Mixins
========================================================================== */
.ir, .icn {
color: transparent;
font: 0/0 a;
text-shadow: none; }
/* Vertical alignment - http://goo.gl/Im9MF5 ================================ */
/* Hide from screenreaders and browsers ===================================== */
/*
* Accessibility helper
*/
.ll-a11y {
color: transparent !important;
font: 0/0 serif;
padding: 0 !important;
position: absolute;
text-shadow: none; }
/*
* Visibility
* Avoids setting display to `block` so it works also with `inline-block` and `table`
*/
@media (min-width: 86.375em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-hidden-xlarge {
display: none !important; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-large {
display: none !important; } }
/* Tablets portrait */
@media (min-width: 47.5em) and (max-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-medium {
display: none !important; } }
/* Phone landscape and smaller*/
@media (max-width: 47.5em) {
.ll-visible-medium {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-small {
display: none !important; } }
/* Remove from the flow and screen readers on any device */
.ll-hidden {
display: none !important;
visibility: hidden !important; }
/* Clearfix - Use @extend cf on element ===================================== */
.cf:after, .dl-horizontal:after, .field:after, .nav > ul > li.search form:after, .nav > ul > li.search-form-mobile form:after, .nav > ul > li.store-locate form:after, .pagination:after, .site-header:after, .review-form-box:after, .review-form-box .product:after, .product-range .product-set-item:after, .product-list .product-item:after, .store-list > li a:after {
clear: both;
content: '';
display: table; }
/**
* Clears
*/
.c-both {
clear: both; }
/**
* Floats
*/
.f-right {
float: right; }
.f-left {
float: left; }
.f-none {
float: none; }
/**
* Displays
*/
.d-block {
display: block; }
.d-inline-block {
display: inline-block; }
/**
* Text positioning
*/
.t-center {
text-align: center; }
.t-right {
text-align: right; }
.t-left {
text-align: left; }
/**
* Text styles
*/
.t-underline {
text-decoration: underline !important; }
.t-none {
text-decoration: none !important; }
/**
* Positioning
*/
.p-rel {
position: relative; }
/**
* Super margins
*/
.m-bottom {
margin-bottom: 24px; }
.m-bottom.x01 {
margin-bottom: 12px / 2; }
.m-bottom.x05 {
margin-bottom: 12px; }
.m-bottom.x3 {
margin-bottom: 36px; }
.m-bottom.x4 {
margin-bottom: 48px; }
.m-bottom.x6 {
margin-bottom: 72px; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
/**
* Paddings
*/
.p-all {
padding: 15px; }
/**
* Other position
*/
.v-middle {
vertical-align: middle; }
.v-top {
vertical-align: top; }
/**
* Widths
*/
.w-45 {
width: 45%; }
/**
* Images with borders
*/
.bordered {
border: 1px solid #dcdcdc;
padding: 2px; }
/**
* Images that should be full width
*/
.i-full-width {
display: block;
width: 100%; }
/**
* Need to add a margin to the header on certain pages
* So that elements don't sit flush against it
*/
.header-margin header {
margin-bottom: 20px; }
/**
* Some new margin helpers
*/
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.ll-grid-margin {
margin-top: 20px; }
.ll-margin {
margin-bottom: 20px; }
.ll-margin + .ll-margin {
margin-top: 20px; }
.ll-margin-top {
margin-top: 20px !important; }
.ll-margin-bottom {
margin-bottom: 20px !important; }
.ll-margin-left {
margin-left: 20px !important; }
.ll-margin-right {
margin-right: 20px !important; }
.ll-margin-vertical {
margin-bottom: 20px !important;
margin-top: 20px !important; }
.ll-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important; }
* + .ll-margin {
margin-top: 20px; }
/*
* Smaller margins
*/
.ll-margin-small {
margin-bottom: 10px; }
.ll-margin-small + .ll-margin-small {
margin-top: 10px; }
.ll-margin-small-top {
margin-top: 10px !important; }
.ll-margin-small-bottom {
margin-bottom: 10px !important; }
.ll-margin-small-left {
margin-left: 10px !important; }
.ll-margin-small-right {
margin-right: 10px !important; }
.ll-margin-small-vertical {
margin-bottom: 10px !important;
margin-top: 10px !important; }
.ll-margin-small-horizontal {
margin-left: 10px !important;
margin-right: 10px !important; }
* + .ll-margin-small {
margin-top: 10px; }
/*
* Medium margins
*/
.ll-margin-medium {
margin: 40px; }
.ll-margin-medium-top {
margin-top: 40px !important; }
.ll-margin-medium-bottom {
margin-bottom: 40px !important; }
.ll-margin-medium-left {
margin-left: 40px !important; }
.ll-margin-medium-right {
margin-right: 40px !important; }
.ll-margin-medium-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-medium-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-medium {
margin-top: 40px !important; }
/*
* Larger margins
*/
.ll-margin-large {
margin-bottom: 40px; }
.ll-margin-large + .ll-margin-large {
margin-top: 40px; }
.ll-margin-large-top {
margin-top: 40px !important; }
.ll-margin-large-bottom {
margin-bottom: 40px !important; }
.ll-margin-large-left {
margin-left: 40px !important; }
.ll-margin-large-right {
margin-right: 40px !important; }
.ll-margin-large-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-large-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-large {
margin-top: 40px; }
/*
* Extra Large margins
*/
.ll-margin-xlarge {
margin-bottom: 80px; }
.ll-margin-xlarge + .ll-margin-xlarge {
margin-top: 80px; }
.ll-margin-xlarge-top {
margin-top: 80px !important; }
.ll-margin-xlarge-bottom {
margin-bottom: 80px !important; }
.ll-margin-xlarge-left {
margin-left: 80px !important; }
.ll-margin-xlarge-right {
margin-right: 80px !important; }
.ll-margin-xlarge-vertical {
margin-bottom: 80px !important;
margin-top: 80px !important; }
.ll-margin-xlarge-horizontal {
margin-left: 80px !important;
margin-right: 80px !important; }
* + .ll-margin-xlarge {
margin-top: 80px; }
/*
* Remove margins
*/
.ll-margin-remove {
margin: 0 !important; }
.ll-margin-top-remove {
margin-top: 0 !important; }
.ll-margin-bottom-remove {
margin-bottom: 0 !important; }
.ll-pos-rel {
position: relative; }
/* =============================================================================
Foundation - Base styles which buld on
========================================================================= */
/* Fonts **/
/*!
* Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url("/assets/fonts/fontawesome-webfont.eot?v=4.2.0");
src: url("/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"), url("/assets/fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"), url("/assets/fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), url("/assets/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal; }
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/* makes the font 33% larger relative to the icon container */
.fa-lg {
font-size: 1.33333em;
line-height: 0.75em;
vertical-align: -15%; }
.fa-2x {
font-size: 2em; }
.fa-3x {
font-size: 3em; }
.fa-4x {
font-size: 4em; }
.fa-5x {
font-size: 5em; }
.fa-fw {
width: 1.28571em;
text-align: center; }
.fa-ul {
padding-left: 0;
margin-left: 2.14286em;
list-style-type: none; }
.fa-ul > li {
position: relative; }
.fa-li {
position: absolute;
left: -2.14286em;
width: 2.14286em;
top: 0.14286em;
text-align: center; }
.fa-li.fa-lg {
left: -1.85714em; }
.fa-border {
padding: .2em .25em .15em;
border: solid 0.08em #eee;
border-radius: .1em; }
.pull-right {
float: right; }
.pull-left {
float: left; }
.fa.pull-left {
margin-right: .3em; }
.fa.pull-right {
margin-left: .3em; }
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear; }
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
.fa-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.fa-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.fa-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
.fa-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1); }
.fa-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1); }
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
-webkit-filter: none;
filter: none; }
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle; }
.fa-stack-1x, .fa-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center; }
.fa-stack-1x {
line-height: inherit; }
.fa-stack-2x {
font-size: 2em; }
.fa-inverse {
color: #fff; }
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-glass:before {
content: ""; }
.fa-music:before {
content: ""; }
.fa-search:before {
content: ""; }
.fa-envelope-o:before {
content: ""; }
.fa-heart:before {
content: ""; }
.fa-star:before {
content: ""; }
.fa-star-o:before {
content: ""; }
.fa-user:before {
content: ""; }
.fa-film:before {
content: ""; }
.fa-th-large:before {
content: ""; }
.fa-th:before {
content: ""; }
.fa-th-list:before {
content: ""; }
.fa-check:before {
content: ""; }
.fa-remove:before,
.fa-close:before,
.fa-times:before {
content: ""; }
.fa-search-plus:before {
content: ""; }
.fa-search-minus:before {
content: ""; }
.fa-power-off:before {
content: ""; }
.fa-signal:before {
content: ""; }
.fa-gear:before,
.fa-cog:before {
content: ""; }
.fa-trash-o:before {
content: ""; }
.fa-home:before {
content: ""; }
.fa-file-o:before {
content: ""; }
.fa-clock-o:before {
content: ""; }
.fa-road:before {
content: ""; }
.fa-download:before {
content: ""; }
.fa-arrow-circle-o-down:before {
content: ""; }
.fa-arrow-circle-o-up:before {
content: ""; }
.fa-inbox:before {
content: ""; }
.fa-play-circle-o:before {
content: ""; }
.fa-rotate-right:before,
.fa-repeat:before {
content: ""; }
.fa-refresh:before {
content: ""; }
.fa-list-alt:before {
content: ""; }
.fa-lock:before {
content: ""; }
.fa-flag:before {
content: ""; }
.fa-headphones:before {
content: ""; }
.fa-volume-off:before {
content: ""; }
.fa-volume-down:before {
content: ""; }
.fa-volume-up:before {
content: ""; }
.fa-qrcode:before {
content: ""; }
.fa-barcode:before {
content: ""; }
.fa-tag:before {
content: ""; }
.fa-tags:before {
content: ""; }
.fa-book:before {
content: ""; }
.fa-bookmark:before {
content: ""; }
.fa-print:before {
content: ""; }
.fa-camera:before {
content: ""; }
.fa-font:before {
content: ""; }
.fa-bold:before {
content: ""; }
.fa-italic:before {
content: ""; }
.fa-text-height:before {
content: ""; }
.fa-text-width:before {
content: ""; }
.fa-align-left:before {
content: ""; }
.fa-align-center:before {
content: ""; }
.fa-align-right:before {
content: ""; }
.fa-align-justify:before {
content: ""; }
.fa-list:before {
content: ""; }
.fa-dedent:before,
.fa-outdent:before {
content: ""; }
.fa-indent:before {
content: ""; }
.fa-video-camera:before {
content: ""; }
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
content: ""; }
.fa-pencil:before {
content: ""; }
.fa-map-marker:before {
content: ""; }
.fa-adjust:before {
content: ""; }
.fa-tint:before {
content: ""; }
.fa-edit:before,
.fa-pencil-square-o:before {
content: ""; }
.fa-share-square-o:before {
content: ""; }
.fa-check-square-o:before {
content: ""; }
.fa-arrows:before {
content: ""; }
.fa-step-backward:before {
content: ""; }
.fa-fast-backward:before {
content: ""; }
.fa-backward:before {
content: ""; }
.fa-play:before {
content: ""; }
.fa-pause:before {
content: ""; }
.fa-stop:before {
content: ""; }
.fa-forward:before {
content: ""; }
.fa-fast-forward:before {
content: ""; }
.fa-step-forward:before {
content: ""; }
.fa-eject:before {
content: ""; }
.fa-chevron-left:before {
content: ""; }
.fa-chevron-right:before {
content: ""; }
.fa-plus-circle:before {
content: ""; }
.fa-minus-circle:before {
content: ""; }
.fa-times-circle:before {
content: ""; }
.fa-check-circle:before {
content: ""; }
.fa-question-circle:before {
content: ""; }
.fa-info-circle:before {
content: ""; }
.fa-crosshairs:before {
content: ""; }
.fa-times-circle-o:before {
content: ""; }
.fa-check-circle-o:before {
content: ""; }
.fa-ban:before {
content: ""; }
.fa-arrow-left:before {
content: ""; }
.fa-arrow-right:before {
content: ""; }
.fa-arrow-up:before {
content: ""; }
.fa-arrow-down:before {
content: ""; }
.fa-mail-forward:before,
.fa-share:before {
content: ""; }
.fa-expand:before {
content: ""; }
.fa-compress:before {
content: ""; }
.fa-plus:before {
content: ""; }
.fa-minus:before {
content: ""; }
.fa-asterisk:before {
content: ""; }
.fa-exclamation-circle:before {
content: ""; }
.fa-gift:before {
content: ""; }
.fa-leaf:before {
content: ""; }
.fa-fire:before {
content: ""; }
.fa-eye:before {
content: ""; }
.fa-eye-slash:before {
content: ""; }
.fa-warning:before,
.fa-exclamation-triangle:before {
content: ""; }
.fa-plane:before {
content: ""; }
.fa-calendar:before {
content: ""; }
.fa-random:before {
content: ""; }
.fa-comment:before {
content: ""; }
.fa-magnet:before {
content: ""; }
.fa-chevron-up:before {
content: ""; }
.fa-chevron-down:before {
content: ""; }
.fa-retweet:before {
content: ""; }
.fa-shopping-cart:before {
content: ""; }
.fa-folder:before {
content: ""; }
.fa-folder-open:before {
content: ""; }
.fa-arrows-v:before {
content: ""; }
.fa-arrows-h:before {
content: ""; }
.fa-bar-chart-o:before,
.fa-bar-chart:before {
content: ""; }
.fa-twitter-square:before {
content: ""; }
.fa-facebook-square:before {
content: ""; }
.fa-camera-retro:before {
content: ""; }
.fa-key:before {
content: ""; }
.fa-gears:before,
.fa-cogs:before {
content: ""; }
.fa-comments:before {
content: ""; }
.fa-thumbs-o-up:before {
content: ""; }
.fa-thumbs-o-down:before {
content: ""; }
.fa-star-half:before {
content: ""; }
.fa-heart-o:before {
content: ""; }
.fa-sign-out:before {
content: ""; }
.fa-linkedin-square:before {
content: ""; }
.fa-thumb-tack:before {
content: ""; }
.fa-external-link:before {
content: ""; }
.fa-sign-in:before {
content: ""; }
.fa-trophy:before {
content: ""; }
.fa-github-square:before {
content: ""; }
.fa-upload:before {
content: ""; }
.fa-lemon-o:before {
content: ""; }
.fa-phone:before {
content: ""; }
.fa-square-o:before {
content: ""; }
.fa-bookmark-o:before {
content: ""; }
.fa-phone-square:before {
content: ""; }
.fa-twitter:before {
content: ""; }
.fa-facebook:before {
content: ""; }
.fa-github:before {
content: ""; }
.fa-unlock:before {
content: ""; }
.fa-credit-card:before {
content: ""; }
.fa-rss:before {
content: ""; }
.fa-hdd-o:before {
content: ""; }
.fa-bullhorn:before {
content: ""; }
.fa-bell:before {
content: ""; }
.fa-certificate:before {
content: ""; }
.fa-hand-o-right:before {
content: ""; }
.fa-hand-o-left:before {
content: ""; }
.fa-hand-o-up:before {
content: ""; }
.fa-hand-o-down:before {
content: ""; }
.fa-arrow-circle-left:before {
content: ""; }
.fa-arrow-circle-right:before {
content: ""; }
.fa-arrow-circle-up:before {
content: ""; }
.fa-arrow-circle-down:before {
content: ""; }
.fa-globe:before {
content: ""; }
.fa-wrench:before {
content: ""; }
.fa-tasks:before {
content: ""; }
.fa-filter:before {
content: ""; }
.fa-briefcase:before {
content: ""; }
.fa-arrows-alt:before {
content: ""; }
.fa-group:before,
.fa-users:before {
content: ""; }
.fa-chain:before,
.fa-link:before {
content: ""; }
.fa-cloud:before {
content: ""; }
.fa-flask:before {
content: ""; }
.fa-cut:before,
.fa-scissors:before {
content: ""; }
.fa-copy:before,
.fa-files-o:before {
content: ""; }
.fa-paperclip:before {
content: ""; }
.fa-save:before,
.fa-floppy-o:before {
content: ""; }
.fa-square:before {
content: ""; }
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
content: ""; }
.fa-list-ul:before {
content: ""; }
.fa-list-ol:before {
content: ""; }
.fa-strikethrough:before {
content: ""; }
.fa-underline:before {
content: ""; }
.fa-table:before {
content: ""; }
.fa-magic:before {
content: ""; }
.fa-truck:before {
content: ""; }
.fa-pinterest:before {
content: ""; }
.fa-pinterest-square:before {
content: ""; }
.fa-google-plus-square:before {
content: ""; }
.fa-google-plus:before {
content: ""; }
.fa-money:before {
content: ""; }
.fa-caret-down:before {
content: ""; }
.fa-caret-up:before {
content: ""; }
.fa-caret-left:before {
content: ""; }
.fa-caret-right:before {
content: ""; }
.fa-columns:before {
content: ""; }
.fa-unsorted:before,
.fa-sort:before {
content: ""; }
.fa-sort-down:before,
.fa-sort-desc:before {
content: ""; }
.fa-sort-up:before,
.fa-sort-asc:before {
content: ""; }
.fa-envelope:before {
content: ""; }
.fa-linkedin:before {
content: ""; }
.fa-rotate-left:before,
.fa-undo:before {
content: ""; }
.fa-legal:before,
.fa-gavel:before {
content: ""; }
.fa-dashboard:before,
.fa-tachometer:before {
content: ""; }
.fa-comment-o:before {
content: ""; }
.fa-comments-o:before {
content: ""; }
.fa-flash:before,
.fa-bolt:before {
content: ""; }
.fa-sitemap:before {
content: ""; }
.fa-umbrella:before {
content: ""; }
.fa-paste:before,
.fa-clipboard:before {
content: ""; }
.fa-lightbulb-o:before {
content: ""; }
.fa-exchange:before {
content: ""; }
.fa-cloud-download:before {
content: ""; }
.fa-cloud-upload:before {
content: ""; }
.fa-user-md:before {
content: ""; }
.fa-stethoscope:before {
content: ""; }
.fa-suitcase:before {
content: ""; }
.fa-bell-o:before {
content: ""; }
.fa-coffee:before {
content: ""; }
.fa-cutlery:before {
content: ""; }
.fa-file-text-o:before {
content: ""; }
.fa-building-o:before {
content: ""; }
.fa-hospital-o:before {
content: ""; }
.fa-ambulance:before {
content: ""; }
.fa-medkit:before {
content: ""; }
.fa-fighter-jet:before {
content: ""; }
.fa-beer:before {
content: ""; }
.fa-h-square:before {
content: ""; }
.fa-plus-square:before {
content: ""; }
.fa-angle-double-left:before {
content: ""; }
.fa-angle-double-right:before {
content: ""; }
.fa-angle-double-up:before {
content: ""; }
.fa-angle-double-down:before {
content: ""; }
.fa-angle-left:before {
content: ""; }
.fa-angle-right:before {
content: ""; }
.fa-angle-up:before {
content: ""; }
.fa-angle-down:before {
content: ""; }
.fa-desktop:before {
content: ""; }
.fa-laptop:before {
content: ""; }
.fa-tablet:before {
content: ""; }
.fa-mobile-phone:before,
.fa-mobile:before {
content: ""; }
.fa-circle-o:before {
content: ""; }
.fa-quote-left:before {
content: ""; }
.fa-quote-right:before {
content: ""; }
.fa-spinner:before {
content: ""; }
.fa-circle:before {
content: ""; }
.fa-mail-reply:before,
.fa-reply:before {
content: ""; }
.fa-github-alt:before {
content: ""; }
.fa-folder-o:before {
content: ""; }
.fa-folder-open-o:before {
content: ""; }
.fa-smile-o:before {
content: ""; }
.fa-frown-o:before {
content: ""; }
.fa-meh-o:before {
content: ""; }
.fa-gamepad:before {
content: ""; }
.fa-keyboard-o:before {
content: ""; }
.fa-flag-o:before {
content: ""; }
.fa-flag-checkered:before {
content: ""; }
.fa-terminal:before {
content: ""; }
.fa-code:before {
content: ""; }
.fa-mail-reply-all:before,
.fa-reply-all:before {
content: ""; }
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
content: ""; }
.fa-location-arrow:before {
content: ""; }
.fa-crop:before {
content: ""; }
.fa-code-fork:before {
content: ""; }
.fa-unlink:before,
.fa-chain-broken:before {
content: ""; }
.fa-question:before {
content: ""; }
.fa-info:before {
content: ""; }
.fa-exclamation:before {
content: ""; }
.fa-superscript:before {
content: ""; }
.fa-subscript:before {
content: ""; }
.fa-eraser:before {
content: ""; }
.fa-puzzle-piece:before {
content: ""; }
.fa-microphone:before {
content: ""; }
.fa-microphone-slash:before {
content: ""; }
.fa-shield:before {
content: ""; }
.fa-calendar-o:before {
content: ""; }
.fa-fire-extinguisher:before {
content: ""; }
.fa-rocket:before {
content: ""; }
.fa-maxcdn:before {
content: ""; }
.fa-chevron-circle-left:before {
content: ""; }
.fa-chevron-circle-right:before {
content: ""; }
.fa-chevron-circle-up:before {
content: ""; }
.fa-chevron-circle-down:before {
content: ""; }
.fa-html5:before {
content: ""; }
.fa-css3:before {
content: ""; }
.fa-anchor:before {
content: ""; }
.fa-unlock-alt:before {
content: ""; }
.fa-bullseye:before {
content: ""; }
.fa-ellipsis-h:before {
content: ""; }
.fa-ellipsis-v:before {
content: ""; }
.fa-rss-square:before {
content: ""; }
.fa-play-circle:before {
content: ""; }
.fa-ticket:before {
content: ""; }
.fa-minus-square:before {
content: ""; }
.fa-minus-square-o:before {
content: ""; }
.fa-level-up:before {
content: ""; }
.fa-level-down:before {
content: ""; }
.fa-check-square:before {
content: ""; }
.fa-pencil-square:before {
content: ""; }
.fa-external-link-square:before {
content: ""; }
.fa-share-square:before {
content: ""; }
.fa-compass:before {
content: ""; }
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
content: ""; }
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
content: ""; }
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
content: ""; }
.fa-euro:before,
.fa-eur:before {
content: ""; }
.fa-gbp:before {
content: ""; }
.fa-dollar:before,
.fa-usd:before {
content: ""; }
.fa-rupee:before,
.fa-inr:before {
content: ""; }
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
content: ""; }
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
content: ""; }
.fa-won:before,
.fa-krw:before {
content: ""; }
.fa-bitcoin:before,
.fa-btc:before {
content: ""; }
.fa-file:before {
content: ""; }
.fa-file-text:before {
content: ""; }
.fa-sort-alpha-asc:before {
content: ""; }
.fa-sort-alpha-desc:before {
content: ""; }
.fa-sort-amount-asc:before {
content: ""; }
.fa-sort-amount-desc:before {
content: ""; }
.fa-sort-numeric-asc:before {
content: ""; }
.fa-sort-numeric-desc:before {
content: ""; }
.fa-thumbs-up:before {
content: ""; }
.fa-thumbs-down:before {
content: ""; }
.fa-youtube-square:before {
content: ""; }
.fa-youtube:before {
content: ""; }
.fa-xing:before {
content: ""; }
.fa-xing-square:before {
content: ""; }
.fa-youtube-play:before {
content: ""; }
.fa-dropbox:before {
content: ""; }
.fa-stack-overflow:before {
content: ""; }
.fa-instagram:before {
content: ""; }
.fa-flickr:before {
content: ""; }
.fa-adn:before {
content: ""; }
.fa-bitbucket:before {
content: ""; }
.fa-bitbucket-square:before {
content: ""; }
.fa-tumblr:before {
content: ""; }
.fa-tumblr-square:before {
content: ""; }
.fa-long-arrow-down:before {
content: ""; }
.fa-long-arrow-up:before {
content: ""; }
.fa-long-arrow-left:before {
content: ""; }
.fa-long-arrow-right:before {
content: ""; }
.fa-apple:before {
content: ""; }
.fa-windows:before {
content: ""; }
.fa-android:before {
content: ""; }
.fa-linux:before {
content: ""; }
.fa-dribbble:before {
content: ""; }
.fa-skype:before {
content: ""; }
.fa-foursquare:before {
content: ""; }
.fa-trello:before {
content: ""; }
.fa-female:before {
content: ""; }
.fa-male:before {
content: ""; }
.fa-gittip:before {
content: ""; }
.fa-sun-o:before {
content: ""; }
.fa-moon-o:before {
content: ""; }
.fa-archive:before {
content: ""; }
.fa-bug:before {
content: ""; }
.fa-vk:before {
content: ""; }
.fa-weibo:before {
content: ""; }
.fa-renren:before {
content: ""; }
.fa-pagelines:before {
content: ""; }
.fa-stack-exchange:before {
content: ""; }
.fa-arrow-circle-o-right:before {
content: ""; }
.fa-arrow-circle-o-left:before {
content: ""; }
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
content: ""; }
.fa-dot-circle-o:before {
content: ""; }
.fa-wheelchair:before {
content: ""; }
.fa-vimeo-square:before {
content: ""; }
.fa-turkish-lira:before,
.fa-try:before {
content: ""; }
.fa-plus-square-o:before {
content: ""; }
.fa-space-shuttle:before {
content: ""; }
.fa-slack:before {
content: ""; }
.fa-envelope-square:before {
content: ""; }
.fa-wordpress:before {
content: ""; }
.fa-openid:before {
content: ""; }
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
content: ""; }
.fa-mortar-board:before,
.fa-graduation-cap:before {
content: ""; }
.fa-yahoo:before {
content: ""; }
.fa-google:before {
content: ""; }
.fa-reddit:before {
content: ""; }
.fa-reddit-square:before {
content: ""; }
.fa-stumbleupon-circle:before {
content: ""; }
.fa-stumbleupon:before {
content: ""; }
.fa-delicious:before {
content: ""; }
.fa-digg:before {
content: ""; }
.fa-pied-piper:before {
content: ""; }
.fa-pied-piper-alt:before {
content: ""; }
.fa-drupal:before {
content: ""; }
.fa-joomla:before {
content: ""; }
.fa-language:before {
content: ""; }
.fa-fax:before {
content: ""; }
.fa-building:before {
content: ""; }
.fa-child:before {
content: ""; }
.fa-paw:before {
content: ""; }
.fa-spoon:before {
content: ""; }
.fa-cube:before {
content: ""; }
.fa-cubes:before {
content: ""; }
.fa-behance:before {
content: ""; }
.fa-behance-square:before {
content: ""; }
.fa-steam:before {
content: ""; }
.fa-steam-square:before {
content: ""; }
.fa-recycle:before {
content: ""; }
.fa-automobile:before,
.fa-car:before {
content: ""; }
.fa-cab:before,
.fa-taxi:before {
content: ""; }
.fa-tree:before {
content: ""; }
.fa-spotify:before {
content: ""; }
.fa-deviantart:before {
content: ""; }
.fa-soundcloud:before {
content: ""; }
.fa-database:before {
content: ""; }
.fa-file-pdf-o:before {
content: ""; }
.fa-file-word-o:before {
content: ""; }
.fa-file-excel-o:before {
content: ""; }
.fa-file-powerpoint-o:before {
content: ""; }
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
content: ""; }
.fa-file-zip-o:before,
.fa-file-archive-o:before {
content: ""; }
.fa-file-sound-o:before,
.fa-file-audio-o:before {
content: ""; }
.fa-file-movie-o:before,
.fa-file-video-o:before {
content: ""; }
.fa-file-code-o:before {
content: ""; }
.fa-vine:before {
content: ""; }
.fa-codepen:before {
content: ""; }
.fa-jsfiddle:before {
content: ""; }
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
content: ""; }
.fa-circle-o-notch:before {
content: ""; }
.fa-ra:before,
.fa-rebel:before {
content: ""; }
.fa-ge:before,
.fa-empire:before {
content: ""; }
.fa-git-square:before {
content: ""; }
.fa-git:before {
content: ""; }
.fa-hacker-news:before {
content: ""; }
.fa-tencent-weibo:before {
content: ""; }
.fa-qq:before {
content: ""; }
.fa-wechat:before,
.fa-weixin:before {
content: ""; }
.fa-send:before,
.fa-paper-plane:before {
content: ""; }
.fa-send-o:before,
.fa-paper-plane-o:before {
content: ""; }
.fa-history:before {
content: ""; }
.fa-circle-thin:before {
content: ""; }
.fa-header:before {
content: ""; }
.fa-paragraph:before {
content: ""; }
.fa-sliders:before {
content: ""; }
.fa-share-alt:before {
content: ""; }
.fa-share-alt-square:before {
content: ""; }
.fa-bomb:before {
content: ""; }
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
content: ""; }
.fa-tty:before {
content: ""; }
.fa-binoculars:before {
content: ""; }
.fa-plug:before {
content: ""; }
.fa-slideshare:before {
content: ""; }
.fa-twitch:before {
content: ""; }
.fa-yelp:before {
content: ""; }
.fa-newspaper-o:before {
content: ""; }
.fa-wifi:before {
content: ""; }
.fa-calculator:before {
content: ""; }
.fa-paypal:before {
content: ""; }
.fa-google-wallet:before {
content: ""; }
.fa-cc-visa:before {
content: ""; }
.fa-cc-mastercard:before {
content: ""; }
.fa-cc-discover:before {
content: ""; }
.fa-cc-amex:before {
content: ""; }
.fa-cc-paypal:before {
content: ""; }
.fa-cc-stripe:before {
content: ""; }
.fa-bell-slash:before {
content: ""; }
.fa-bell-slash-o:before {
content: ""; }
.fa-trash:before {
content: ""; }
.fa-copyright:before {
content: ""; }
.fa-at:before {
content: ""; }
.fa-eyedropper:before {
content: ""; }
.fa-paint-brush:before {
content: ""; }
.fa-birthday-cake:before {
content: ""; }
.fa-area-chart:before {
content: ""; }
.fa-pie-chart:before {
content: ""; }
.fa-line-chart:before {
content: ""; }
.fa-lastfm:before {
content: ""; }
.fa-lastfm-square:before {
content: ""; }
.fa-toggle-off:before {
content: ""; }
.fa-toggle-on:before {
content: ""; }
.fa-bicycle:before {
content: ""; }
.fa-bus:before {
content: ""; }
.fa-ioxhost:before {
content: ""; }
.fa-angellist:before {
content: ""; }
.fa-cc:before {
content: ""; }
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
content: ""; }
.fa-meanpath:before {
content: ""; }
@font-face {
font-family: 'icomoon';
src: url("/assets/fonts/icomoon.eot?-g1k4c4");
src: url("/assets/fonts/icomoon.eot?#iefix-g1k4c4") format("embedded-opentype"), url("/assets/fonts/icomoon.ttf?-g1k4c4") format("truetype"), url("/assets/fonts/icomoon.woff?-g1k4c4") format("woff"), url("/assets/fonts/icomoon.svg?-g1k4c4#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
i {
color: #666;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.2;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.ll-icon-arrow_down:before {
content: "\e612"; }
.ll-icon-arrow_up:before {
content: "\e613"; }
.ll-icon-click-and-collect:before {
content: "\e610"; }
.ll-icon-home-delivery:before {
content: "\e611"; }
.ll-icon-international-delivery:before {
content: "\e632"; }
.ll-icon-list:before {
content: "\e600"; }
.ll-icon-contact:before {
content: "\e60f"; }
.ll-icon-arrow_left:before {
content: "\e601"; }
.ll-icon-arrow_right:before {
content: "\e602"; }
.ll-icon-close:before {
content: "\e603"; }
.ll-icon-cog:before {
content: "\e604"; }
.ll-icon-hamburger:before {
content: "\e605"; }
.ll-icon-home:before {
content: "\e606"; }
.ll-icon-logout:before {
content: "\e607"; }
.ll-icon-magnifying_glass:before {
content: "\e608"; }
.ll-icon-my_account:before {
content: "\e609"; }
.ll-icon-paddlock:before {
content: "\e60a"; }
.ll-icon-phone:before {
content: "\e60b"; }
.ll-icon-play_button:before {
content: "\e60c"; }
.ll-icon-pin:before {
content: "\e60d"; }
.ll-icon-trolley:before {
content: "\e60e"; }
/* Set styles; font, background etc. ================================= */
/* =============================================================================
Main
========================================================================= */
@font-face {
font-family: "Humanist";
src: url("/assets/fonts/humanist-light-bt.eot");
src: url("/assets/fonts/humanist-light-bt.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/humanist-light-bt.woff") format("woff"), url("/assets/fonts/humanist-light-bt.ttf") format("truetype"), url("/assets/fonts/humanist-light-bt.svg#Humanist") format("svg");
font-weight: normal;
font-style: normal;
font-stretch: normal; }
@font-face {
font-family: "HumanistReg";
src: url("/assets/fonts/humanist-bt.eot");
src: url("/assets/fonts/humanist-bt.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/humanist-bt.woff") format("woff"), url("/assets/fonts/humanist-bt.ttf") format("truetype"), url("/assets/fonts/humanist-bt.svg#HumanistReg") format("svg");
font-weight: normal;
font-style: normal;
font-stretch: normal; }
@font-face {
font-family: "HumanistBold";
src: url("/assets/fonts/humanist-bold-bt.eot");
src: url("/assets/fonts/humanist-bold-bt.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/humanist-bold-bt.woff") format("woff"), url("/assets/fonts/humanist-bold-bt.ttf") format("truetype"), url("/assets/fonts/humanist-bold-bt.svg#HumanistBold") format("svg");
font-weight: 700;
font-style: normal;
font-stretch: normal; }
@font-face {
font-family: "AbrilReg";
src: url("/assets/fonts/abril-reg.eot");
src: url("/assets/fonts/abril-reg.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/abril-reg.woff") format("woff"), url("/assets/fonts/abril-reg.ttf") format("truetype"), url("/assets/fonts/abril-reg.svg#AbrilReg") format("svg");
font-weight: normal;
font-style: normal;
font-stretch: normal; }
@font-face {
font-family: "DearJoe";
src: url("/assets/fonts/dear-joe.eot");
src: url("/assets/fonts/dear-joe.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/dear-joe.woff") format("woff"), url("/assets/fonts/dear-joe.ttf") format("truetype"), url("/assets/fonts/dear-joe.svg#DearJoe") format("svg");
font-weight: normal;
font-style: normal;
font-stretch: normal; }
/* Don't declare font-size here, 16px is the browser default unless the user has
increased this for accessiblity purposes. Use EM's or REM's ============== */
html {
-webkit-font-smoothing: antialiased;
color: #000;
font-family: "Humanist", sans-serif;
font-weight: 400;
line-height: 1.25em; }
/* Single-direction margin declarations - https://goo.gl/QWu22 =============== */
p,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
ul,
ol,
dd,
figure,
pre,
table,
fieldset,
legend,
hr {
margin: 0 0 15px; }
.note {
color: #28324b;
font-family: "DearJoe", sans-serif; }
/* { box-sizing: border-box } FTW - https://goo.gl/ggTvz ===================== */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.static-page h1 {
font-size: 30px;
font-size: 1.875rem;
color: #28324b;
font-family: "AbrilReg", sans-serif; }
.static-page h2 {
font-size: 24px;
font-size: 1.5rem;
color: #464646; }
.static-page .contact-page .tab-3 {
width: calc(100% / 2 - 12px); }
.static-page .contact-page .tab-3:not(.alpha) {
margin-left: 12px; }
/* Typography =============================================================== */
/* =============================================================================
Typography
- Headings
- Paragraphs
========================================================================= */
html {
-webkit-font-smoothing: antialiased; }
/* 1) Headings ============================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "HumanistReg", sans-serif;
font-weight: 300;
line-height: 1.2;
text-rendering: optimizeLegibility; }
h1.with-icon > img,
h2.with-icon > img,
h3.with-icon > img,
h4.with-icon > img,
h5.with-icon > img,
h6.with-icon > img,
.h1.with-icon > img,
.h2.with-icon > img,
.h3.with-icon > img,
.h4.with-icon > img,
.h5.with-icon > img,
.h6.with-icon > img {
float: left;
margin-right: 7.5px;
position: relative;
top: -1px; }
/**
* Colour that heading blue
*/
h1,
.h1 {
font-size: 21px;
font-size: 1.3125rem;
color: #28324b;
text-transform: uppercase; }
h2,
.h2 {
font-size: 1.325em; }
h3,
.h3 {
font-size: 1.125em; }
h4,
.h4 {
font-size: 1em; }
/* 2) Paragraphs ============================================================ */
p {
font-size: 1em; }
strong {
font-weight: 700; }
.lead {
font-size: 18px;
font-size: 1.125rem;
font-weight: 700; }
.lead.t-upper {
text-transform: uppercase; }
/**
* A more major heading, but not the main
*/
.main-heading {
font-size: 22px;
font-size: 1.375rem;
color: #28324b;
line-height: 1.2; }
/**
* A generic mid-level heading that is blue
*/
.mid-heading {
font-size: 22px;
font-size: 1.375rem;
color: #28324b;
line-height: 1.2;
text-transform: none; }
.mid-heading.uc {
text-transform: uppercase; }
/**
* A generic mid-level heading that is blue
*/
/**
* New 2017 homepage heading, that may need to be used globally
*/
h2.trigger {
font-size: 18px;
font-size: 1.125rem;
background-color: #28324b;
padding: 10px;
position: relative;
text-align: left; }
h2.trigger a {
color: #fff;
display: block;
position: relative;
text-decoration: none; }
h2.trigger a:after {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
content: '';
display: inline-block;
height: 12px;
right: 5px;
width: 21px; }
/**
* Bordered headings for new 2017 homepage / global related products (for now)
*/
.bordered-heading {
font-size: 20px;
font-size: 1.25rem;
color: #464646;
text-align: center;
text-transform: none; }
/**
* Font families
*/
.primaryfont {
font-family: "Humanist", sans-serif; }
.boldfont {
font-family: "HumanistBold", sans-serif; }
.notefont {
font-family: "DearJoe", sans-serif; }
@media screen and (min-width: 47.5em) {
.bordered-heading {
overflow: hidden;
position: relative; }
.bordered-heading:before {
background-color: #000;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
width: 100%;
z-index: -1; }
.bordered-heading span {
background-color: #fff;
display: inline-block;
padding: 0 20px; } }
@media screen and (min-width: 60em) {
.bordered-heading {
font-size: 30px;
font-size: 1.875rem; } }
@media screen and (min-width: 1110px) {
h2.trigger {
font-size: 30px;
font-size: 1.875rem;
background-color: transparent;
color: #464646;
margin-bottom: 30px;
overflow: hidden;
padding: 0;
text-align: center; }
h2.trigger:before {
background-color: #000;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
width: 100%;
z-index: 1; }
h2.trigger a {
background-color: #f7f7f7;
color: #464646;
display: inline-block;
padding: 0 25px;
position: relative;
text-decoration: none;
width: auto;
z-index: 2; }
h2.trigger a:after {
display: none; } }
/* ========================================================================
Component: Animation
========================================================================== */
[class*='ll-animation-'] {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
/* Hide animated element if scrollspy is used */
@media screen {
[data-ll-scrollspy*='ll-animation-']:not([data-ll-scrollspy*='target']) {
opacity: 0; } }
/*
* Fade
* Higher specificity (!important) needed because of reverse modifier
*/
.ll-animation-fade {
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-name: ll-fade;
animation-name: ll-fade;
-webkit-animation-timing-function: linear !important;
animation-timing-function: linear !important; }
/*
* Fade with scale
*/
.ll-animation-scale-up {
-webkit-animation-name: ll-fade-scale-02;
animation-name: ll-fade-scale-02; }
.ll-animation-scale-up-over {
-webkit-animation-name: ll-fade-scale-over;
animation-name: ll-fade-scale-over; }
.ll-animation-scale-down {
-webkit-animation-name: ll-fade-scale-18;
animation-name: ll-fade-scale-18; }
/*
* Fade with slide
*/
.ll-animation-slide-top {
-webkit-animation-name: ll-fade-top;
animation-name: ll-fade-top; }
.ll-animation-slide-bottom {
-webkit-animation-name: ll-fade-bottom;
animation-name: ll-fade-bottom; }
.ll-animation-slide-left {
-webkit-animation-name: ll-fade-left;
animation-name: ll-fade-left; }
.ll-animation-slide-right {
-webkit-animation-name: ll-fade-right;
animation-name: ll-fade-right; }
.ll-animation-slide-top-small {
-webkit-animation-name: ll-fade-top-small;
animation-name: ll-fade-top-small; }
.ll-animation-slide-bottom-small {
-webkit-animation-name: ll-fade-bottom-small;
animation-name: ll-fade-bottom-small; }
/*
* Scale
*/
.ll-animation-scale {
-webkit-animation-name: ll-scale-12;
animation-name: ll-scale-12; }
/*
* Shake
*/
.ll-animation-shake {
-webkit-animation-name: ll-shake;
animation-name: ll-shake; }
/* Direction modifiers
========================================================================== */
.ll-animation-reverse {
animation-direction: reverse;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
/* Duration modifiers
========================================================================== */
.ll-animation-10 {
-webkit-animation-duration: 10s;
animation-duration: 10s; }
.ll-animation-15 {
-webkit-animation-duration: 15s;
animation-duration: 15s; }
/* Origin modifiers
========================================================================== */
.ll-animation-top-left {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0; }
.ll-animation-top-center {
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0; }
.ll-animation-top-right {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0; }
.ll-animation-middle-left {
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%; }
.ll-animation-middle-right {
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.ll-animation-bottom-left {
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%; }
.ll-animation-bottom-center {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%; }
.ll-animation-bottom-right {
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
.ll-spin {
-webkit-animation: spin .5s linear infinite;
-moz-animation: spin .5s linear infinite;
animation: spin .5s linear infinite; }
/* Sub-object: .ll-animation-hover`
========================================================================== */
/*
* Enable animation only on hover
* Note: Firefox also needs this because animations are not triggered when switching between display `hidden` and `block`
*/
.ll-animation-hover:not(:hover),
.ll-animation-hover:not(:hover) [class*='ll-animation-'],
.ll-touch .ll-animation-hover:not(.ll-hover),
.ll-touch .ll-animation-hover:not(.ll-hover) [class*='ll-animation-'],
.ll-animation:not(.ll-animation-click)[class*='ll-animation-'] {
-webkit-animation-name: none;
animation-name: none; }
/* Keyframes: Fade
* Used by dropdown, datepicker and slideshow component
========================================================================== */
@-webkit-keyframes ll-fade {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes ll-fade {
0% {
opacity: 0; }
100% {
opacity: 1; } }
/* Keyframes: Fade with slide
========================================================================== */
/*
* Top
*/
@-webkit-keyframes ll-fade-top {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ll-fade-top {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Bottom
*/
@-webkit-keyframes ll-fade-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ll-fade-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Left
*/
@-webkit-keyframes ll-fade-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes ll-fade-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Right
*/
@-webkit-keyframes ll-fade-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes ll-fade-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Top small
*/
@-webkit-keyframes ll-fade-top-small {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ll-fade-top-small {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Bottom small
*/
@-webkit-keyframes ll-fade-bottom-small {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ll-fade-bottom-small {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/* Keyframes: Fade with scale
========================================================================== */
/*
* Scale by 0.2
*/
@-webkit-keyframes ll-fade-scale-02 {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ll-fade-scale-02 {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes ll-fade-scale-over {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
70% {
opacity: .7;
-webkit-transform: scale(1.2);
transform: scale(1.2); }
90% {
opacity: .9;
-webkit-transform: scale(0.95);
transform: scale(0.95); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ll-fade-scale-over {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
70% {
opacity: .7;
-webkit-transform: scale(1.2);
transform: scale(1.2); }
90% {
opacity: .9;
-webkit-transform: scale(0.95);
transform: scale(0.95); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/*
* Scale by 1.5
* Used by slideshow component
*/
@-webkit-keyframes ll-fade-scale-15 {
0% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ll-fade-scale-15 {
0% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/*
* Scale by 1.8
*/
@-webkit-keyframes ll-fade-scale-18 {
0% {
opacity: 0;
-webkit-transform: scale(1.8);
transform: scale(1.8); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ll-fade-scale-18 {
0% {
opacity: 0;
-webkit-transform: scale(1.8);
transform: scale(1.8); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/* Keyframes: Slide
* Used by slideshow component
========================================================================== */
/*
* Left
*/
@-webkit-keyframes ll-slide-left {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes ll-slide-left {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Right
*/
@-webkit-keyframes ll-slide-right {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes ll-slide-right {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Left third
*/
@-webkit-keyframes ll-slide-left-33 {
0% {
-webkit-transform: translateX(33%);
transform: translateX(33%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes ll-slide-left-33 {
0% {
-webkit-transform: translateX(33%);
transform: translateX(33%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Right third
*/
@-webkit-keyframes ll-slide-right-33 {
0% {
-webkit-transform: translateX(-33%);
transform: translateX(-33%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes ll-slide-right-33 {
0% {
-webkit-transform: translateX(-33%);
transform: translateX(-33%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/* Keyframes: Scale
========================================================================== */
@-webkit-keyframes ll-scale-12 {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ll-scale-12 {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
/* Keyframes: Rotate
========================================================================== */
@-webkit-keyframes ll-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
@keyframes ll-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
/* Keyframes: Shake
========================================================================== */
@-webkit-keyframes ll-shake {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0); }
10% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px); }
20% {
-webkit-transform: translateX(8px);
transform: translateX(8px); }
30% {
-webkit-transform: translateX(-7px);
transform: translateX(-7px); }
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px); }
50% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px); }
60% {
-webkit-transform: translateX(4px);
transform: translateX(4px); }
70% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px); }
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px); }
90% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px); } }
@keyframes ll-shake {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0); }
10% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px); }
20% {
-webkit-transform: translateX(8px);
transform: translateX(8px); }
30% {
-webkit-transform: translateX(-7px);
transform: translateX(-7px); }
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px); }
50% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px); }
60% {
-webkit-transform: translateX(4px);
transform: translateX(4px); }
70% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px); }
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px); }
90% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px); } }
/* Keyframes: Fade with slide fixed
========================================================================== */
/*
* Top fixed
*/
@-webkit-keyframes ll-slide-top-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ll-slide-top-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Bottom fixed
*/
@-webkit-keyframes ll-slide-bottom-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ll-slide-bottom-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/* Keyframes: Spin
========================================================================== */
@-moz-keyframes ll-spin {
100% {
-moz-transform: rotate(360deg); } }
@-webkit-keyframes ll-spin {
100% {
-webkit-transform: rotate(360deg); } }
@keyframes ll-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.ll-spin {
-webkit-animation: ll-spin .5s linear infinite;
-moz-animation: ll-spin .5s linear infinite;
animation: ll-spin .5s linear infinite; }
/* =============================================================================
Quotes
========================================================================= */
blockquote:before {
color: #999;
content: "\201C ";
display: block;
font: italic 400%/1 serif;
height: 0;
margin-left: -.95em; }
blockquote footer {
font-size: 14px;
font-size: 0.875rem; }
/* =============================================================================
Typography - Lists
========================================================================= */
/* Remove vertical spacing from nested lists ================================ */
li > ul,
li > ol {
margin-bottom: 0; }
.ll-list {
padding-left: 15px; }
.ll-unstyled {
list-style: none;
margin: 0 0 15px;
padding: 0; }
.ll-spaced li {
margin: 5px 0; }
.list-inline {
padding: 0; }
.list-inline li {
display: inline-block;
margin: 0 10px; }
.list-inline li:first-child {
margin-left: 0; }
.list-inline li:last-child {
margin-right: 0; }
.list-inline.smaller li {
margin: 0 5px; }
.list-inline.smaller li:first-child {
margin-left: 0; }
.list-inline.smaller li:last-child {
margin-right: 0; }
.arrow-list {
list-style-type: none;
margin: 0;
padding: 0; }
.arrow-list li {
background: url(/assets/images/icons/medium/blue-tick.png) no-repeat left top;
margin-top: 15px;
min-height: 44px;
padding: 10px 0 8px 54px; }
.arrow-list li:first-child {
margin-top: 0; }
/* =============================================================================
Definition Lists
========================================================================= */
.dl-horizontal dt {
clear: left;
float: left;
text-align: right;
width: 20%; }
.dl-horizontal dd {
margin-left: 22%;
/* dt width + a little margin for spacing */ }
/* =============================================================================
Links
========================================================================= */
a {
-webkit-transition: all 0.2s linear;
/* Android 2.1 - 4.3, Blackberry 7+ */
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
color: #28324b;
text-decoration: none; }
a:hover {
color: #161c2a;
text-decoration: underline; }
/* Images =================================================================== */
/* =============================================================================
Images
========================================================================= */
img {
height: auto;
max-width: 100%; }
.img--right {
float: right;
margin-bottom: 15px;
margin-left: 15px; }
.img--left {
float: left;
margin-right: 15px;
margin-bottom: 15px; }
.img--center {
display: block;
margin: 0 auto 15px; }
/* Tables =================================================================== */
/* =============================================================================
Tables
========================================================================= */
table {
max-width: 100%;
width: 100%; }
table th, table td {
padding: 8px;
text-align: left;
vertical-align: top; }
table th {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
font-weight: 700; }
table td {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
table thead th {
vertical-align: bottom; }
.table--striped tbody tr:nth-child(odd) td,
.table--striped tbody tr:nth-child(odd) th {
background-color: rgba(0, 0, 0, 0.04); }
.table--striped tbody tr:hover td,
.table--striped tbody tr:hover th {
background-color: rgba(0, 0, 0, 0.08); }
.table--bordered {
border: 1px solid rgba(0, 0, 0, 0.1);
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
/*
// For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
border-radius: 4px 0 0 0;
}
thead:first-child tr:first-child th:last-child,
tbody:first-child tr:first-child td:last-child {
border-radius: 0 4px 0 0;
}
// For first th or td in the first row in the first thead or tbody
thead:last-child tr:last-child th:first-child,
tbody:last-child tr:last-child td:first-child,
tfoot:last-child tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}
thead:last-child tr:last-child th:last-child,
tbody:last-child tr:last-child td:last-child,
tfoot:last-child tr:last-child td:last-child {
border-radius: 0 0 4px 0;
}
*/ }
.table--bordered th, .table--bordered td {
border-left: 1px solid rgba(0, 0, 0, 0.1); }
.table--bordered thead:first-child tr:first-child th,
.table--bordered tbody:first-child tr:first-child th,
.table--bordered tbody:first-child tr:first-child td {
border-top: 0; }
/* Forms ==================================================================== */
/* =============================================================================
Forms - Base
========================================================================= */
form header {
border-bottom: 1px solid #ddd;
margin-bottom: 15px; }
.field {
margin-bottom: 15px; }
label,
input,
button,
select,
textarea {
font-size: 18px;
font-size: 1.125rem; }
label {
cursor: pointer; }
input,
select {
-webkit-appearance: none;
border-radius: 0; }
input[type="checkbox"] {
-webkit-appearance: checkbox; }
input[type="radio"] {
-webkit-appearance: radio; }
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
display: inline-block;
padding: 4px 6px; }
input[type="file"],
input[type="range"] {
display: block; }
input[type="submit"] {
text-transform: uppercase; }
input,
select,
textarea {
width: 100%; }
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
background-color: #fff;
border: 1px solid #ddd;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: all 0.2s linear;
/* Android 2.1 - 4.3, Blackberry 7+ */
-o-transition: all 0.2s linear;
transition: all 0.2s linear; }
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus {
border-color: #52a8ec;
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */ }
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
line-height: normal;
margin-top: 1px \9;
/* IE8-9 */ }
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; }
input[type="file"].btn--full,
input[type="image"].btn--full,
input[type="submit"].btn--full,
input[type="reset"].btn--full,
input[type="button"].btn--full,
input[type="radio"].btn--full,
input[type="checkbox"].btn--full {
width: 100%; }
select[multiple],
select[size] {
height: auto; }
.actions {
margin-bottom: 15px; }
.field--radio .input label,
.field--checkbox-list .input label,
.field--radio-list .input label {
margin: 0 5px 0 7.5px;
text-align: left;
width: auto; }
.field--radio .input label:first-child,
.field--checkbox-list .input label:first-child,
.field--radio-list .input label:first-child {
margin-left: 0; }
/**
* Placeholders
*/
::-webkit-input-placeholder {
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
padding-top: 2px; }
:-moz-placeholder {
/* Firefox 18- */
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
padding-top: 2px; }
::-moz-placeholder {
/* Firefox 19+ */
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
padding-top: 2px; }
:-ms-input-placeholder {
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
padding-top: 2px; }
/* ========================================================================
Lakeland Component: Form
========================================================================== */
/**
* Form "boxes" for highlighting for sections
*/
.ll-form .form-box {
border: 1px solid #dcdcdc;
padding: 15px; }
.ll-form .form-box .ll-form-row:last-child {
margin: 0; }
/*
* Address inconsistent `text-transform` inheritance which is only inherit in Firefox
*/
.ll-form select {
text-transform: none; }
/*
* Removes inner padding and border in Firefox 4+.
*/
.ll-form input::-moz-focus-inner {
border: 0;
padding: 0; }
/*
* Removes excess padding in IE 8/9/10.
*/
.ll-form input[type="checkbox"],
.ll-form input[type="radio"] {
padding: 0; }
/*
* Improves consistency of cursor style for clickable elements
*/
.ll-form input[type="checkbox"]:not(:disabled),
.ll-form input[type="radio"]:not(:disabled) {
cursor: pointer; }
/*
* Remove default style in iOS.
*/
.ll-form textarea,
.ll-form input:not([type]),
.ll-form input[type="text"],
.ll-form input[type="password"],
.ll-form input[type="email"],
.ll-form input[type="url"],
.ll-form input[type="search"],
.ll-form input[type="tel"],
.ll-form input[type="number"],
.ll-form input[type="datetime"] {
-webkit-appearance: none; }
/*
* Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
*/
.ll-form input[type="search"]::-webkit-search-cancel-button,
.ll-form input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/*
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
.ll-form input[type="number"]::-webkit-inner-spin-button,
.ll-form input[type="number"]::-webkit-outer-spin-button {
height: auto; }
/*
* Define consistent border, margin, and padding.
*/
.ll-form fieldset {
border: 0;
margin: 0 0 30px;
padding: 0; }
.ll-form textarea {
overflow: auto;
vertical-align: top; }
/*
* Removes placeholder transparency in Firefox.
*/
.ll-form ::-moz-placeholder {
opacity: 1; }
/*
* Removes `box-shadow` for invalid controls in Firefox.
*/
.ll-form :invalid {
-webkit-box-shadow: none;
box-shadow: none; }
/*
* Vertical alignment
*/
.ll-form input:not([type="radio"]):not([type="checkbox"]),
.ll-form select {
vertical-align: middle; }
/* Style
========================================================================== */
/*
* Remove margin from the last-child
*/
.ll-form > :last-child {
margin-bottom: 0; }
/*
* Controls
* Except for `range`, `radio`, `checkbox`, `file`, `submit`, `reset`, `button` and `image`
*/
.ll-form select,
.ll-form textarea,
.ll-form input:not([type]),
.ll-form input[type="text"],
.ll-form input[type="password"],
.ll-form input[type="datetime"],
.ll-form input[type="datetime-local"],
.ll-form input[type="date"],
.ll-form input[type="month"],
.ll-form input[type="time"],
.ll-form input[type="week"],
.ll-form input[type="number"],
.ll-form input[type="email"],
.ll-form input[type="url"],
.ll-form input[type="search"],
.ll-form input[type="tel"],
.ll-form input[type="color"] {
background-color: #f5f5f5;
background-position: right center;
border: 1px solid #cecece;
border-color: #cecece #f5f5f5 #f5f5f5 #cecece;
-webkit-box-shadow: inset 1px 1px 1px 0 #e8e8e8;
box-shadow: inset 1px 1px 1px 0 #e8e8e8;
color: #000;
display: inline;
height: 45px;
line-height: 1;
max-width: 100%;
padding: 8px;
-webkit-transition: all linear .2s;
-o-transition: all linear .2s;
transition: all linear .2s; }
.ll-form select:focus,
.ll-form textarea:focus,
.ll-form input:not([type]):focus,
.ll-form input[type="text"]:focus,
.ll-form input[type="password"]:focus,
.ll-form input[type="datetime"]:focus,
.ll-form input[type="datetime-local"]:focus,
.ll-form input[type="date"]:focus,
.ll-form input[type="month"]:focus,
.ll-form input[type="time"]:focus,
.ll-form input[type="week"]:focus,
.ll-form input[type="number"]:focus,
.ll-form input[type="email"]:focus,
.ll-form input[type="url"]:focus,
.ll-form input[type="search"]:focus,
.ll-form input[type="tel"]:focus,
.ll-form input[type="color"]:focus {
border-color: #bebebe #e5e5e5 #e5e5e5 #bebebe;
outline: 0; }
.ll-form select:disabled,
.ll-form textarea:disabled,
.ll-form input:not([type]):disabled,
.ll-form input[type="text"]:disabled,
.ll-form input[type="password"]:disabled,
.ll-form input[type="datetime"]:disabled,
.ll-form input[type="datetime-local"]:disabled,
.ll-form input[type="date"]:disabled,
.ll-form input[type="month"]:disabled,
.ll-form input[type="time"]:disabled,
.ll-form input[type="week"]:disabled,
.ll-form input[type="number"]:disabled,
.ll-form input[type="email"]:disabled,
.ll-form input[type="url"]:disabled,
.ll-form input[type="search"]:disabled,
.ll-form input[type="tel"]:disabled,
.ll-form input[type="color"]:disabled {
border-color: #f5f5f5;
background-color: #f9f9f9;
color: #aaa; }
/*
* Placeholders
*/
.ll-form :-ms-input-placeholder {
color: #333333 !important; }
.ll-form ::-moz-placeholder {
color: #333333; }
.ll-form ::-webkit-input-placeholder {
color: #333333; }
.ll-form :disabled:-ms-input-placeholder {
color: #666666 !important; }
.ll-form :disabled::-moz-placeholder {
color: #666666; }
.ll-form :disabled::-webkit-input-placeholder {
color: #666666; }
/*
* Legend
*/
.ll-form legend {
border: 0;
font-size: 16;
padding-bottom: 15px;
padding: 0;
width: 100%; }
.ll-form legend:after {
content: "";
display: block; }
/* Size modifiers
* Higher specificity needed to override defaults
========================================================================== */
select.ll-form-small,
textarea.ll-form-small,
input[type].ll-form-small,
input:not([type]).ll-form-small {
font-size: 12;
height: 40px;
padding: 3px 3px; }
select.ll-form-large,
textarea.ll-form-large,
input[type].ll-form-large,
input:not([type]).ll-form-large {
font-size: 16;
height: 50px;
padding: 8px 6px; }
.ll-form-controls.ll-form-small {
font-size: 14px;
font-size: 0.875rem; }
/* Reset height
* Must be after size modifiers
========================================================================== */
.ll-form textarea,
.ll-form select[multiple],
.ll-form select[size] {
height: auto; }
/* Validation states
* Using !important to keep the selector simple
========================================================================== */
/*
* Error state
*/
.ll-form-danger {
background-image: url(/assets/images/icons/validation/error.png);
background-position: right center;
background-repeat: no-repeat;
border-color: #d0021b !important;
color: #d0021b !important;
padding-right: 45px !important;
/* Added so validation icons dont mix with input value */ }
.ll-form-danger[type='radio'], .ll-form-danger[type='checkbox'] {
background-image: none;
border-width: 1px !important;
padding-right: 0 !important; }
select.ll-form-danger {
background-image: none; }
span.ll-form-danger,
.ll-form .errorfeedback {
font-size: 14px;
font-size: 0.875rem;
background-image: none;
color: #d0021b !important;
display: block;
font-family: "HumanistReg", sans-serif;
margin-top: 5px;
line-height: 1.5;
position: relative;
z-index: 1; }
/*
* Success state
*/
.ll-form-success {
background-image: url(/assets/images/icons/validation/tick.png);
background-position: right center;
background-repeat: no-repeat;
border-color: #458f29 !important;
padding-right: 45px !important;
/* Added so validation icons dont mix with input value */ }
.ll-form-success[type='radio'], .ll-form-success[type='checkbox'] {
background-image: none;
border-width: 1px !important;
padding-right: 0 !important; }
input[type="password"].ll-form-success {
background-image: none; }
select.ll-form-success {
background-image: none; }
textarea.ll-form-danger,
textarea.ll-form-success {
background-position: right 7px; }
/* Style modifiers
* Using !important to keep the selector simple
========================================================================== */
/*
* Blank form
*/
.ll-form-blank {
border-color: transparent !important;
border-style: dashed !important;
background: none !important; }
.ll-form-blank:focus {
border-color: #eee !important; }
/**
* For buttons that need to sit over the input
*/
.ll-inline-button {
position: relative; }
.ll-inline-button button,
.ll-inline-button .inline-submit {
height: 45px;
line-height: 45px;
padding: 0 15px;
position: absolute;
right: 0;
top: 0; }
/**
* Inline buttons
*/
.input-button {
position: relative; }
.input-button button {
height: 45px;
line-height: 45px;
padding: 0 15px;
position: absolute;
right: 0;
top: 0; }
.input-button button .ll-icon-magnifying_glass {
color: #fff; }
/* Size sub-modifiers
========================================================================== */
/*
* Fixed widths
* Different widths for mini sized `input` and `select` elements
*/
input.ll-form-width-mini {
width: 40px; }
select.ll-form-width-mini {
width: 65px; }
.ll-form-width-small {
width: 40%; }
.ll-form-width-medium {
width: 200px; }
.ll-form-width-large {
width: 100%; }
.ll-form-width-full {
width: 100%; }
/* Sub-objects: `ll-form-row`
* Groups labels and controls in rows
========================================================================== */
/**
* Standard form labels
*/
.ll-form h3 {
color: #28324b;
font-size: 22px;
font-size: 1.375rem;
margin-bottom: 22.5px;
text-transform: none; }
/**
* Form rows
*/
.ll-form-row {
margin-bottom: 15px; }
.ll-form-row.with-gap {
margin-bottom: 30px; }
.ll-form-row.with-big-gap {
margin-bottom: 37.5px; }
/*
* Micro clearfix
* Needed for `ll-form-horizontal` modifier
*/
.ll-form-row:before,
.ll-form-row:after {
content: " ";
display: table; }
.ll-form-row:after {
clear: both; }
/*
* Vertical gutter
*/
.ll-form-row + .ll-form-row {
margin-top: 15px; }
/* Help text
* Sub-object: `ll-form-help-inline`, `ll-form-help-block`
========================================================================== */
.ll-form-help-inline {
display: block;
line-height: 45px;
margin: 0 0 0 7.5px; }
.ll-form-width-medium + .ll-form-help-inline {
display: inline-block; }
.ll-form-help-block {
display: block;
margin: 7.5px 0 0 5px; }
.ll-form-help-block a {
color: #000;
text-decoration: underline; }
/* Controls content
* Sub-object: `ll-form-controls`, `ll-form-controls-condensed`
========================================================================== */
/**
* The actual controls
*/
.ll-form-controls {
position: relative; }
/*
* Remove margins
*/
.ll-form-controls > :first-child {
margin-top: 0; }
.ll-form-controls > :last-child {
margin-bottom: 0; }
/*
* Group controls and text into blocks with a small spacing between blocks
*/
.ll-form-controls-condensed {
margin: 7.5px 0; }
/* Modifier: `ll-form-stacked`
* Requires sub-object: `ll-form-label`
========================================================================== */
.ll-form-label {
font-size: 16px;
font-size: 1rem; }
.ll-form-stacked .ll-form-row {
margin-bottom: 30px; }
.ll-form-stacked .ll-form-row:last-child {
margin-bottom: 0; }
.ll-form-stacked .ll-form-label {
font-size: 18px;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase; }
.ll-form-stacked .ll-form-label,
.ll-form-horizontal .ll-form-label {
display: block;
margin-bottom: 15px; }
/* Sub-object: `ll-form-icon`
========================================================================== */
/*
* 1. Container width fits its content
* 2. Create position context
* 3. Prevent `inline-block` consequences
*/
.ll-form-icon {
display: inline-block;
max-width: 100%;
position: relative; }
/*
* 1. Make form element clickable through icon
*/
.ll-form-icon > [class*='uk-icon-'] {
color: #000;
font-size: 16;
margin-top: -8;
pointer-events: none;
position: absolute;
text-align: center;
top: 50%;
width: 16; }
.ll-form-icon:not(.ll-form-icon-flip) > input {
padding-left: 16 !important; }
/*
* Sub-modifier: `ll-form-icon-flip`
*/
.ll-form-icon-flip > [class*='uk-icon-'] {
right: 0; }
.ll-form-icon-flip > input {
padding-right: 16 !important; }
/**
* Fancy labels
*/
.label-checkbox,
.label-radio {
cursor: pointer;
display: inline-block;
font-size: 16px;
font-size: 1rem;
min-height: 27px;
line-height: 27px;
padding: 0 0 0 20px;
position: relative;
text-align: left; }
.label-checkbox input,
.label-radio input {
left: 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-appearance: checkbox; }
.label-checkbox.ll-enabled,
.label-radio.ll-enabled {
padding: 0 0 0 40px;
-webkit-appearance: none; }
.label-checkbox.ll-enabled input,
.label-radio.ll-enabled input {
left: -9999px;
top: 0;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.label-checkbox.large,
.label-radio.large {
min-height: 34px;
line-height: 34px; }
.label-checkbox.large.ll-enabled,
.label-radio.large.ll-enabled {
padding: 0 0 0 47px; }
.label-checkbox.block,
.label-radio.block {
display: block; }
.label-checkbox.block + .label-checkbox.block,
.label-radio.block + .label-checkbox.block, .label-checkbox.block +
.label-radio.block,
.label-radio.block +
.label-radio.block {
margin-left: 0; }
.label-checkbox + .label-checkbox,
.label-radio + .label-checkbox, .label-checkbox +
.label-radio,
.label-radio +
.label-radio {
margin-left: 30px; }
.label-radio.ll-enabled {
background: url(/assets/images/icons/small/radio-off.png) no-repeat left center; }
.label-radio.ll-enabled.r_on {
background-image: url(/assets/images/icons/small/radio-on.png); }
.label-radio.ll-enabled.large {
background: url(/assets/images/icons/small/radio-off-large.png) no-repeat left center; }
.label-radio.ll-enabled.large.r_on {
background-image: url(/assets/images/icons/small/radio-on-large.png); }
.label-checkbox.ll-enabled {
background: url(/assets/images/icons/small/check-off.png) no-repeat left center; }
.label-checkbox.ll-enabled.c_on {
background-image: url(/assets/images/icons/small/check-on.png); }
.label-checkbox.ll-enabled.large {
background: url(/assets/images/icons/small/check-off-large.png) no-repeat left center; }
.label-checkbox.ll-enabled.large.c_on {
background-image: url(/assets/images/icons/small/check-on-large.png); }
.label-checkbox-inline {
display: inline-block;
padding-top: 0; }
.label-checkbox.c_disabled,
.label-radio.r_disabled {
color: #BBB; }
/* Change Autocomplete styles in Chrome*/
.ll-form input:-webkit-autofill,
.ll-form input:-webkit-autofill:hover,
.ll-form input:-webkit-autofill:focus .ll-form textarea:-webkit-autofill,
.ll-form textarea:-webkit-autofill:hover .ll-form textarea:-webkit-autofill:focus,
.ll-form select:-webkit-autofill,
.ll-form select:-webkit-autofill:hover,
.ll-form select:-webkit-autofill:focus {
-webkit-text-fill-color: #464646 !important;
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
-webkit-transition: background-color 5000s ease-in-out 0s !important;
-o-transition: background-color 5000s ease-in-out 0s !important;
transition: background-color 5000s ease-in-out 0s !important; }
/* Base grid structure ====================================================== */
/* =============================================================================
Grid - Small screens and up
========================================================================= */
.wrapper {
margin: auto;
padding: 0 15px; }
[class*='mob-'] {
display: block;
float: left;
margin-left: 3.125%; }
[class*='ll-width-'] {
display: block; }
.ll-width-1-1 {
width: 100%; }
[class*='mob-']:first-child,
.alpha,
.alpha-mob,
.mob-4 {
clear: left;
margin-left: 0; }
.alpha-mob {
clear: left;
margin-left: 0; }
.mob-4 {
float: none;
width: 100%; }
.mob-3 {
width: 74.21875%; }
.mob-2 {
width: 48.4375%; }
.mob-1 {
width: 22.65625%; }
@media screen and (min-width: 759px) {
/* =============================================================================
Grid - Portrait tablets devices and up
========================================================================= */
.alpha-mob {
clear: none; }
[class*='tab-'] {
display: block;
float: left;
margin-left: 3.125%; }
[class*='tab-']:first-child,
.alpha,
.alpha-tab,
.tab-6 {
clear: left;
margin-left: 0; }
.tab-6 {
float: none;
width: 100%; }
.tab-5 {
width: 82.8125%; }
.tab-4 {
width: 65.625%; }
.tab-3 {
width: 48.4375%; }
.tab-2 {
width: 31.25%; }
.tab-1 {
width: 14.0625%; }
.offset-tab-3 {
margin-left: 51.5625%; }
.ll-width-1-2,
.ll-width-medium-1-2 {
float: left;
width: 50%; }
.ll-width-1-3 {
float: left;
width: 33.33333%; }
.ll-width-2-3 {
float: left;
width: 66.66667%; }
.ll-width-1-4 {
float: left;
width: 25%; }
.ll-width-1-5 {
float: left;
width: 20%; } }
@media screen and (min-width: 959px) {
/* =============================================================================
Grid - Landscape tablets, small desktop/laptops and up
========================================================================= */
.wrapper {
margin: auto;
max-width: 1310px;
min-width: 960px;
width: 98%; }
[class*='dts-'],
.alpha-tab {
clear: none;
display: block;
float: left;
margin-left: 3.125%; }
[class*='dts-']:first-child,
.alpha,
.alpha-dts,
.dts-12 {
clear: left;
margin-left: 0; }
.dts-12 {
float: none;
width: 100%; }
.dts-11 {
width: 91.40625%; }
.dts-10 {
width: 82.8125%; }
.dts-9 {
width: 74.21875%; }
.dts-8 {
width: 65.625%; }
.dts-7 {
width: 57.03125%; }
.dts-6 {
width: 48.4375%; }
.dts-5 {
width: 39.84375%; }
.dts-4 {
width: 31.25%; }
.dts-3 {
width: 22.65625%; }
.dts-2-5 {
width: 17.5%; }
.dts-2 {
width: 14.0625%; }
.dts-1 {
width: 5.46875%; }
.ll-width-large-1-2 {
float: left;
width: 50%; }
.ll-width-large-1-3 {
float: left;
width: 33.33333%; }
.ll-width-large-1-4 {
float: left;
width: 25%; }
.ll-width-large-1-5 {
float: left;
width: 20%; }
.ll-width-large-1-6 {
float: left;
width: 16.66667%; } }
@media screen and (min-width: 1381px) {
/* =============================================================================
Grid - Large Desktops
========================================================================= */
.wrapper {
margin: auto;
max-width: 1310px;
width: 98%; }
[class*='dtl-'] {
display: block;
float: left;
margin-left: 3.125%; }
[class*='dtl-']:first-child,
.alpha,
.dtl-16 {
clear: left;
margin-left: 0; }
.dtl-16 {
float: none;
width: 100%; }
.dtl-15 {
width: 93.55469%; }
.dtl-14 {
width: 87.10938%; }
.dtl-13 {
width: 80.66406%; }
.dtl-12 {
width: 74.21875%; }
.dtl-11 {
width: 67.77344%; }
.dtl-10 {
width: 61.32813%; }
.dtl-9 {
width: 54.88281%; }
.dtl-8 {
width: 48.4375%; }
.dtl-7 {
width: 41.99219%; }
.dtl-6 {
width: 35.54688%; }
.dtl-5 {
width: 29.10156%; }
.dtl-4 {
width: 22.65625%; }
.dtl-3 {
width: 16.21094%; }
.dtl-2 {
width: 9.76563%; }
.dtl-1 {
width: 3.32031%; } }
/* Large desktop and bigger */
.ll-grid + .ll-grid,
.ll-grid-margin,
.ll-grid > * > .ll-panel + .ll-panel {
margin-top: 20px; }
@media screen and (min-width: 1280px) {
.ll-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
margin-left: -20px;
padding: 0;
/*
* Grid cell
* 1. Space is allocated solely based on content dimensions
* 2. Makes grid more robust so that it can be used with other block elements
* 3. DEPRECATED Using `float` to support IE9
*/ }
.ll-grid:before, .ll-grid:after {
content: '';
display: block;
overflow: hidden; }
.ll-grid:after {
clear: both; }
.ll-grid > * {
/* 1 */
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
/* 3 */
float: left;
/* 2 */
margin: 0;
padding-left: 20px;
/*
* Remove margin from the last-child
*/ }
.ll-grid > * > * > :last-child {
margin-bottom: 0; }
/* Grid gutter
========================================================================== */
.ll-width-xlarge-1-1 {
width: 100%; }
.ll-width-xlarge-1-2,
.ll-width-xlarge-2-4,
.ll-width-xlarge-3-6,
.ll-width-xlarge-4-8,
.ll-width-xlarge-5-10,
.ll-width-xlarge-6-12 {
width: 50%; }
.ll-width-xlarge-1-3,
.ll-width-xlarge-2-6,
.ll-width-xlarge-4-12 {
width: 33.333%; }
.ll-width-xlarge-2-3,
.ll-width-xlarge-4-6,
.ll-width-xlarge-8-12 {
width: 66.666%; }
.ll-width-xlarge-1-4,
.ll-width-xlarge-2-8,
.ll-width-xlarge-3-12 {
width: 25%; }
.ll-width-xlarge-3-4,
.ll-width-xlarge-6-8,
.ll-width-xlarge-9-12 {
width: 75%; } }
/* Flex Layouts ============================================================= */
/* ========================================================================
Component: Flex
========================================================================== */
.ll-flex {
display: -ms-flexbox;
display: -webkit-flex;
display: -webkit-box;
display: flex; }
.ll-flex > .container {
width: 100%; }
.ll-flex-inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: -webkit-inline-box;
display: inline-flex; }
/*
* Fixes initial flex-shrink value in IE10
*/
.ll-flex > *,
.ll-flex-inline > * {
-ms-flex-negative: 1; }
/* Alignment
========================================================================== */
/*
* Vertical alignment
* Default value is `stretch`
*/
.ll-flex-top {
-ms-flex-align: start;
-webkit-align-items: flex-start;
-webkit-box-align: start;
align-items: flex-start; }
.ll-flex-middle {
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center; }
.ll-flex-bottom {
-ms-flex-align: end;
-webkit-align-items: flex-end;
-webkit-box-align: end;
align-items: flex-end; }
/*
* Horizontal alignment
* Default value is `flex-start`
*/
.ll-flex-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
-webkit-box-pack: center;
justify-content: center; }
.ll-flex-right {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-webkit-box-pack: end;
justify-content: flex-end; }
.ll-flex-space-between {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-webkit-box-pack: justify;
justify-content: space-between; }
.ll-flex-space-around {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around; }
/*
* Vertical alignment
* Default value is `flex-start`
*/
.ll-flex-self-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end; }
.ll-flex-self-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start; }
.ll-flex-self-middle {
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; }
.ll-flex-self-baseline {
-webkit-align-self: baseline;
-ms-flex-item-align: baseline;
align-self: baseline; }
/* Direction
========================================================================== */
.ll-flex-row-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: row-reverse; }
.ll-flex-column {
-ms-flex-direction: column;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column; }
.ll-flex-column-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: column-reverse; }
/* Wrap
========================================================================== */
.ll-flex-nowrap {
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap; }
.ll-flex-wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; }
.ll-flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse; }
/*
* Horizontal alignment
* Default value is `stretch`
*/
.ll-flex-wrap-top {
-ms-flex-line-pack: start;
-webkit-align-content: flex-start;
align-content: flex-start; }
.ll-flex-wrap-middle {
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center; }
.ll-flex-wrap-bottom {
-ms-flex-line-pack: end;
-webkit-align-content: flex-end;
align-content: flex-end; }
.ll-flex-wrap-space-between {
-ms-flex-line-pack: justify;
-webkit-align-content: space-between;
align-content: space-between; }
.ll-flex-wrap-space-around {
-ms-flex-line-pack: distribute;
-webkit-align-content: space-around;
align-content: space-around; }
.ll-flex-grow > * {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
/* Item ordering
========================================================================== */
/*
* Default is 0
*/
.ll-flex-order-first {
-ms-flex-order: -1;
-webkit-order: -1;
-webkit-box-ordinal-group: 0;
order: -1; }
.ll-flex-order-last {
-ms-flex-order: 99;
-webkit-order: 99;
-webkit-box-ordinal-group: 100;
order: 99; }
/* Phone landscape and bigger */
@media (min-width: 32.438em) {
.ll-flex-order-first-small {
-ms-flex-order: -1;
-webkit-order: -1;
-webkit-box-ordinal-group: 0;
order: -1; }
.ll-flex-order-last-small {
-ms-flex-order: 99;
-webkit-order: 99;
-webkit-box-ordinal-group: 100;
order: 99; } }
/* Tablet and bigger */
@media (min-width: 47.5em) {
.ll-flex-order-first-medium {
-ms-flex-order: -1;
-webkit-order: -1;
-webkit-box-ordinal-group: 0;
order: -1; }
.ll-flex-order-last-medium {
-ms-flex-order: 99;
-webkit-order: 99;
-webkit-box-ordinal-group: 100;
order: 99; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-flex-order-first-large {
-ms-flex-order: -1;
-webkit-order: -1;
-webkit-box-ordinal-group: 0;
order: -1; }
.ll-flex-order-last-large {
-ms-flex-order: 99;
-webkit-order: 99;
-webkit-box-ordinal-group: 100;
order: 99; } }
/* Large screen and bigger */
@media (min-width: 86.375em) {
.ll-flex-order-first-xlarge {
-ms-flex-order: -1;
-webkit-order: -1;
-webkit-box-ordinal-group: 0;
order: -1; }
.ll-flex-order-last-xlarge {
-ms-flex-order: 99;
-webkit-order: 99;
-webkit-box-ordinal-group: 100;
order: 99; } }
/* Item dimensions
========================================================================== */
/*
* Initial: 0 1 auto
* Content dimensions, but shrinks
*/
/*
* No Flex: 0 0 auto
* Content dimensions
*/
.ll-flex-item-none {
-ms-flex: none;
-webkit-flex: none;
-webkit-box-flex: 0;
flex: none; }
/*
* Relative Flex: 1 1 auto
* Space is allocated considering content
* 1. Fixes flex-shrink value in IE10
*/
.ll-flex-item-auto {
-ms-flex: auto;
-webkit-flex: auto;
-webkit-box-flex: 1;
flex: auto;
/* 1 */
-ms-flex-negative: 1; }
/*
* Absolute Flex: 1 1 0%
* Space is allocated solely based on flex
*/
.ll-flex-item-1 {
-ms-flex: 1;
-webkit-flex: 1;
-webkit-box-flex: 1;
flex: 1; }
/**
* Some semblance of flexbox display in IE9
* 1. Requires an extra container, annoyingly
*/
.ie9 {
/* 1 */ }
.ie9 .ll-flex-fix {
display: table;
table-layout: fixed;
width: 100%; }
.ie9 .ll-flex:not(.f-container),
.ie9 .ll-flex-inline:not(.f-container) {
display: table-row; }
.ie9 .ll-flex:not(.f-container) > *,
.ie9 .ll-flex-inline:not(.f-container) > * {
display: table-cell; }
/* =============================================================================
Theming - Modules
========================================================================= */
/* Primary ================================================================== */
/* =============================================================================
CTAs - Small screens and up
========================================================================= */
.cta {
font-size: 16px;
font-size: 1rem;
line-height: 1;
text-transform: uppercase; }
.cta.new--box, .cta.orange--box, .cta.info--box, .cta.green--box, .cta.price-match--box {
border: 1px solid #d0021b;
color: #d0021b;
display: inline-block;
font-weight: 700;
padding: 7.5px; }
.cta.blue {
color: #28324b;
display: inline-block;
font-weight: 700; }
.cta.new {
color: #d0021b; }
.cta.orange {
color: #f5a623;
background-color: inherit; }
.cta.info {
color: #28324b; }
.cta.green {
color: #458f29; }
.cta.red {
color: #d0021b; }
.cta.price-match {
color: #a1d7cc; }
.cta.orange--box {
border-color: #f5a623;
color: #f5a623; }
.cta.info--box {
border-color: #28324b;
color: #28324b; }
.cta.green--box {
border-color: #458f29;
color: #458f29; }
.cta.price-match--box {
background-color: #a1d7cc;
border-color: #a1d7cc;
color: #fff; }
.cta.price-match--box > span {
color: #565656; }
.cta.was, .cta.now {
display: block;
font-weight: 700;
margin-bottom: 5px; }
.cta.was-price {
text-decoration: line-through; }
.cta.now-price {
font-size: 25px;
font-size: 1.5625rem; }
.cta.save {
font-size: 16px;
font-size: 1rem; }
/**
* Special offers
*/
.price-match-section {
border: 1px solid #a1d7cc;
margin: 30px 0; }
.price-match-section h4 {
font-size: 18px;
font-size: 1.125rem;
background-color: #a1d7cc;
color: #fff;
padding: 7.5px 10px; }
.price-match-section h4 span {
color: #565656; }
.price-match-section p {
padding: 0 10px; }
/* =============================================================================
Header - Small screens and up
========================================================================= */
.header-contact {
display: none !important; }
.secure .secure-msg {
font-size: 12px;
font-size: 0.75rem;
display: block;
line-height: 1;
margin: 0;
padding: 5px 5px 20px;
text-transform: none; }
.secure .secure-msg i {
font-size: 32px;
font-size: 2rem;
color: #faa300;
float: left;
margin-right: 7.5px; }
.secure .norton-logo > img {
margin-top: -10px;
padding: 0 5px; }
/**
* Floats in IE8 don't always behave nicely. This should make sure the layout
* stays as expected
*/
.ie8 .head-bits li.phone {
width: 199px; }
/* =============================================================================
Navigation - Small screens and up
========================================================================= */
[role="banner"] .wrapper {
padding: 0; }
/**
* The main navigation with dropdown section
*/
.nav {
border-width: 1px 0;
clear: both; }
.nav.out > ul > li.dropdown .subnav {
-webkit-transition-delay: 0.4s !important;
-o-transition-delay: 0.4s !important;
transition-delay: 0.4s !important; }
.nav > ul {
position: relative; }
.nav > ul > li {
display: inline-block;
line-height: 44px;
margin: 0; }
.nav > ul > li > a {
-webkit-transition: all 0 linear;
/* Android 2.1 - 4.3, Blackberry 7+ */
-o-transition: all 0 linear;
transition: all 0 linear;
border: 0 solid #313e5c;
border-right-width: 1px;
display: block;
font-family: "HumanistReg", sans-serif;
line-height: 44px;
opacity: 0;
position: relative;
text-decoration: none; }
.nav > ul > li > a i {
vertical-align: middle; }
.nav > ul > li:first-child {
display: none; }
.nav > ul > li.nodropdown {
display: none; }
.nav > ul > li.dropdown {
display: none; }
.nav > ul > li.dropdown > a {
position: relative; }
.nav > ul > li.dropdown .subnav {
background: #fff;
left: 15px;
opacity: 0;
padding-left: 45px;
padding-top: 30px;
position: absolute;
right: 15px;
top: 42px;
-webkit-transition: all 0.4s 0s ease;
-o-transition: all 0.4s 0s ease;
transition: all 0.4s 0s ease;
visibility: hidden;
z-index: 1; }
.nav > ul > li.dropdown .subnav ul {
list-style: none;
margin: 0 0 15px;
padding: 0; }
.nav > ul > li.dropdown .subnav li a {
font-size: 14px;
font-size: 0.875rem;
color: #656565;
display: block;
line-height: 1.2;
padding: 0 0 10px;
text-decoration: none;
text-transform: none; }
.nav > ul > li.dropdown .subnav li a:hover {
color: #28324b;
text-decoration: underline; }
.nav > ul > li.dropdown .subnav li a span {
font-size: 16px;
font-size: 1rem;
color: #dc062e;
text-transform: uppercase; }
.nav > ul > li.dropdown:hover > a, .nav > ul > li.dropdown.open > a {
color: #fff;
z-index: 11; }
.nav > ul > li.dropdown:hover .subnav, .nav > ul > li.dropdown.open .subnav {
opacity: 1;
-webkit-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
visibility: visible;
z-index: 10; }
.nav > ul > li.search, .nav > ul > li.search-form-mobile, .nav > ul > li.store-locate {
background: #f7f7f7;
display: block;
position: relative; }
.nav > ul > li.search form, .nav > ul > li.search-form-mobile form, .nav > ul > li.store-locate form {
padding: 10px; }
.nav > ul > li.search input, .nav > ul > li.search-form-mobile input, .nav > ul > li.store-locate input {
font-size: 16px;
font-size: 1rem;
float: left;
padding: 11px 2%; }
.nav > ul > li.search input[type="text"], .nav > ul > li.search-form-mobile input[type="text"], .nav > ul > li.store-locate input[type="text"] {
background: #fff;
border: 1px solid #cbcbcb;
border-radius: 0;
border-width: 1px 0 1px 1px;
display: block;
width: 100%;
height: 43px; }
.nav > ul > li.search button[type="submit"], .nav > ul > li.search-form-mobile button[type="submit"], .nav > ul > li.store-locate button[type="submit"] {
background-color: #faa300;
height: 43px;
padding: 0;
position: absolute;
right: 8px;
width: 45px; }
.nav > ul > li.search-form-mobile, .nav > ul > li.store-locate {
display: none; }
.nav > ul > li.search-form-mobile i, .nav > ul > li.store-locate i {
color: #fff; }
.nav > ul > li.search-form-mobile button[type="submit"] .header-icon, .nav > ul > li.store-locate button[type="submit"] .header-icon {
fill: #28324b;
height: 25px;
vertical-align: middle;
width: 25px; }
.nav > ul > li.store-locate {
display: none; }
/**
* The middle-east header
*/
.me.no-js {
margin-top: 0; }
.me.no-js .flags ul.not-selected.active {
padding: 0;
top: 2px; }
.me.no-js .flags ul.not-selected.active .close-flags {
display: none; }
.me .flags {
float: left;
padding-right: 20px; }
.me .flags ul {
float: left;
height: 50px;
margin: 0;
padding: 0;
position: relative;
top: 4px;
z-index: 2; }
.me .flags ul.not-selected {
background-color: #999;
left: 0;
max-height: 0;
overflow: hidden;
padding: 0 10px;
position: absolute;
right: 0;
top: 0;
-webkit-transition: all 0.5s cubic-bezier(0.17, 0.67, 0.41, 1.31);
-o-transition: all 0.5s cubic-bezier(0.17, 0.67, 0.41, 1.31);
transition: all 0.5s cubic-bezier(0.17, 0.67, 0.41, 1.31); }
.me .flags ul.not-selected.active {
max-height: 50px;
padding: 10px; }
.me .flags ul.selected-flag {
left: 10px;
top: 10px; }
.me .flags ul.selected-flag a {
background-color: #999;
padding: 2px; }
.me .flags ul.selected-flag .selected-flag-text {
color: #999;
display: none; }
.me .flags li {
color: #fff;
display: inline-block; }
.me .flags li a,
.me .flags li span,
.me .flags li img {
float: left; }
.me .flags li span {
font-size: 12px;
font-size: 0.75rem;
cursor: pointer;
line-height: 27px;
margin: 0 7.5px;
text-transform: uppercase; }
.me .flags li.close-flags {
font-size: 24px;
font-size: 1.5rem;
cursor: pointer;
font-weight: 700;
position: absolute;
right: 20px;
top: 12px; }
.me .flags li.close-flags i {
color: #fff; }
/**
* This class prevents the page from being as small as mobile on desktop
*/
/**
* Some styles for the main page sections that consist across the site
*/
[role="main"] {
min-height: 160px; }
/**
* Headings with images
*/
h1 > img {
margin-right: 5px;
position: relative;
top: -2px; }
/**
* Telephone areas with an image
*/
.phone {
font-size: 24px;
font-size: 1.5rem;
color: #28324b;
letter-spacing: -.5px;
line-height: 40px; }
.phone > img {
vertical-align: middle; }
/**
* Norton secure
*/
.secure {
font-size: 18px;
font-size: 1.125rem;
line-height: 40px;
text-transform: uppercase; }
.secure > img {
margin-left: 15px;
vertical-align: middle; }
p.small,
span.small {
font-size: 14px;
font-size: 0.875rem; }
p.very-small,
span.very-small {
font-size: 12px;
font-size: 0.75rem; }
/**
* This modal is required for the mega menu to hide the page
*/
.page-modal {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9;
visibility: hidden; }
/**
* Selects for quantities
*/
select.quantity {
font-size: 18px;
font-size: 1.125rem;
border-color: #000;
float: right;
height: 42px;
line-height: 42px;
padding: 0 6px;
width: 60px; }
select.quantity.nowidth {
width: auto; }
/**
* Javelin CSS
*/
select.pagination-dropdown {
display: none; }
/**
* Boxes for sections
*/
.light-box,
.standard-box,
.blue-box,
.box-white {
border: 1px solid #cecece;
padding: 30px; }
.light-box.noborder,
.standard-box.noborder,
.blue-box.noborder,
.box-white.noborder {
border: 0; }
.light-box *:last-child,
.standard-box *:last-child,
.blue-box *:last-child,
.box-white *:last-child {
margin-bottom: 0; }
.standard-box {
background-color: #f6f6f6; }
.standard-box input.ll-form-width-full {
background-color: #fff; }
.blue-box,
.box-white {
background-color: #28324b;
border: 0;
color: #fff;
margin: 15px 0;
padding: 20px 20px; }
.blue-box > img,
.box-white > img {
float: left;
width: 18%; }
.blue-box .content,
.box-white .content {
margin-left: 18%;
padding-left: 20px; }
.blue-box .content p,
.box-white .content p {
margin: 30px 0; }
.blue-box .content p:last-child,
.box-white .content p:last-child {
margin-bottom: 0; }
.blue-box input.ll-form-width-full,
.box-white input.ll-form-width-full {
background-color: #fff;
color: #000; }
.box-white {
background-color: #fff;
border: 3px solid #dcdcdc;
color: #28324b; }
.box-white.thin {
border: 1px solid #959595; }
.box-white.thin h3 {
color: #000; }
.box-white.thin p {
color: #000; }
/**
* Page spacers
*/
hr {
border: 0;
border-top: 1px solid #e1e1e1;
margin: 30px 0; }
hr.dotty {
border-style: dotted; }
hr.nomargin {
margin-bottom: 0; }
hr.homepage-bottom-hr {
margin-bottom: 20px;
margin-top: 5px; }
/**
* Account benefits, used in a couple of places
*/
.account-benefits {
background: #f6f6f6;
margin-bottom: 30px;
padding: 30px; }
.account-benefits h4 {
font-size: 22px;
font-size: 1.375rem;
color: #28324b;
text-transform: none; }
.account-benefits ul {
list-style: none;
margin: 0;
padding: 0; }
.account-benefits ul li {
background: url(/assets/images/icons/medium/tick.png) no-repeat left center;
margin-bottom: 15px;
min-height: 34px;
padding-left: 45px;
padding-top: 8px; }
/**
* Delivery options
*/
.delivery-option {
background: url(/assets/images/icons/medium/blue-tick.png) no-repeat left top;
margin-bottom: 28px;
min-height: 44px;
padding: 2px 0 8px 54px; }
.delivery-option h3 {
font-size: 14px;
font-size: 0.875rem;
color: #252661;
display: block;
margin: 0; }
.delivery-option p {
color: #5c76ab;
margin: 0;
text-transform: uppercase; }
/**
* Postcode lookup results
*/
.postcode-results {
border: 1px solid #a1a1a1;
margin-bottom: 30px;
padding: 15px; }
.postcode-results h3 {
margin-bottom: 0; }
.postcode-results ul {
list-style: none;
margin: 0;
padding: 0; }
.postcode-results ul li {
margin: 5px 0; }
.postcode-results ul li a {
text-decoration: underline; }
.postcode-results select {
-webkit-appearance: menulist-textfield; }
/**
* Maps
*/
.map-container {
min-height: 500px;
width: 100%; }
.map-container img {
max-width: none; }
/**
* Page navigation... mostly for mobile but is a "blocky" navigation list
*/
.page-nav ul {
border: solid #ccc;
border-width: 1px 0;
list-style-type: none;
margin: 0;
padding: 0; }
.page-nav ul li:first-child a {
border-top: 0; }
.page-nav ul li a {
background: url(/assets/images/icons/small/dash-arrow.png) right center no-repeat;
border-top: 1px solid #ccc;
display: block;
padding: 22.5px;
text-decoration: none; }
.page-nav ul li a:hover {
background-position: 101% center; }
/**
* Simple toggle hider
*/
.hider-btn {
background-image: url(/assets/images/icons/small/hider-up.png);
background-position: 98% center;
background-repeat: no-repeat; }
.hider-btn.hider-down {
background-image: url(/assets/images/icons/small/hider-down.png); }
.hider-btn.dark {
background-image: url(/assets/images/icons/small/hider-up-dark.png); }
.hider-btn.dark.hider-down {
background-image: url(/assets/images/icons/small/hider-down-dark.png); }
.hider-content {
background-color: #f6f6f6;
opacity: 1;
overflow: hidden;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out; }
.hider-content .hider-inner {
padding: 15px; }
.hider-content.hider-hidden {
height: 0;
opacity: 0; }
.hider-content li {
margin-top: 7.5px; }
.hider-content li:first-child {
margin-top: 0; }
/**
* This may need to be split out to other areas of the site
*/
.average-rating {
margin: 0; }
.average-rating .rating {
background: url(/assets/images/icons/stars.png) no-repeat;
display: inline-block;
height: 14px;
overflow: hidden;
text-indent: 1000px;
width: 78px; }
.average-rating.rating-0-5 .rating {
background-position: 0 0; }
.average-rating.rating-1 .rating {
background-position: 0 -20px; }
.average-rating.rating-1-5 .rating {
background-position: 0 -40px; }
.average-rating.rating-2 .rating {
background-position: 0 -60px; }
.average-rating.rating-2-5 .rating {
background-position: 0 -80px; }
.average-rating.rating-3 .rating {
background-position: 0 -100px; }
.average-rating.rating-3-5 .rating {
background-position: 0 -120px; }
.average-rating.rating-4 .rating {
background-position: 0 -140px; }
.average-rating.rating-4-5 .rating {
background-position: 0 -160px; }
.average-rating.rating-5 .rating {
background-position: 0 -180px; }
.average-rating a {
color: #000;
font-family: "HumanistBold", sans-serif; }
.average-rating.large .rating {
background-image: url(/assets/images/icons/stars.png);
height: 20px;
width: 130px; }
.average-rating.white .rating {
background-image: url(/assets/images/icons/stars-white.png); }
/* Secondary ================================================================ */
/* =============================================================================
Breadcrumbs
========================================================================= */
.breadcrumbs {
background: #ebebeb;
clear: both;
line-height: 1.2;
margin-bottom: 12px;
padding: 6px 0; }
.breadcrumbs a {
color: #28324b;
text-decoration: none; }
.breadcrumbs a:hover {
text-decoration: underline; }
.breadcrumb li {
font-size: 14px;
font-size: 0.875rem;
display: inline; }
.breadcrumb li + li:before {
content: '\003e';
margin-right: 5px; }
.breadcrumb--path li {
display: inline; }
.breadcrumb--path li + li:before {
content: '/'; }
/* =============================================================================
Buttons
========================================================================= */
.btn,
button {
font-size: 18px;
font-size: 1.125rem;
background-color: #91bf71;
border: 1px solid #52881d;
border-left-color: #a7d16e;
border-right-color: #659c2a;
border-top-color: #bcdd91;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 300;
line-height: 1;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
vertical-align: middle; }
.btn:hover,
button:hover {
color: #fff;
background-color: #83b75f; }
.btn-alt {
background-color: #28324b;
border-color: #a5b3d0 #49636c #3b574c #889bc1; }
.btn-alt:hover {
color: #fff;
background-color: #1f273a; }
.btn-tertiary {
background-color: #f26522;
border: 1px solid #f7a57e;
border-color: #f7a57e #ae5015 #8d460f #f58854; }
.btn-tertiary:hover {
color: #fff;
background-color: #ed560e; }
.btn-white {
background-color: #fff;
border: 1px solid #52881d;
color: #a1a1a1;
border-color: #ebebeb #9eaf88 #809960 #e4e4e4; }
.btn-white:hover {
background-color: #f2f2f2;
color: #000; }
.btn-grey {
background-color: #dcdcdc;
color: #000; }
.btn-grey:hover {
background-color: #cfcfcf;
color: #000; }
.basket-btn {
background-color: #243044;
color: #fff;
border: 0;
border-color: transparent; }
.basket-btn:hover {
background-color: #364865; }
.basket-btn.no-items {
background-color: #999; }
.basket-btn.no-items:hover {
background-color: #8c8c8c; }
.btn-red {
background-color: #d0021b;
border-color: #ff6a6a #b70000 #950000 #ff3a3a; }
.btn-red i {
color: #fff; }
.btn-red:hover {
background-color: #b70218; }
.btn-none {
background-color: transparent;
color: #b2b2b2;
border: 0;
padding: 0;
text-decoration: underline; }
.btn-none:hover {
background-color: transparent;
color: #28324b; }
.btn-dark-border {
background-color: #fff;
border: 1px solid #959595;
color: #000; }
.btn-dark-border:hover {
background-color: #959595;
color: #fff; }
.btn-transparent {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
padding: 12px 22px; }
.btn-transparent:hover {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.2); }
.btn-clear {
background-color: transparent;
border: 1px solid #fff;
color: #fff; }
.btn-clear:hover {
background-color: #eee;
background-color: rgba(255, 255, 255, 0.2); }
.btn--sml {
font-size: 12px;
font-size: 0.75rem; }
.btn--full {
display: block; }
.btn--match {
height: 45px;
line-height: 45px;
padding: 0 15px; }
.btn--wrap {
white-space: pre-wrap !important; }
@media only screen and (min-width: 47.5em) {
.btn--lrg {
font-size: 22px;
font-size: 1.375rem; } }
/* =============================================================================
Message Alerts
========================================================================= */
.alert,
.error-summary,
.confirmation-summary {
font-size: 18px;
font-size: 1.125rem;
background: #fcedd0;
border: 1px solid #FAE4B8;
color: #d7940f;
font-weight: 700;
line-height: 1.5;
margin-bottom: 30px;
padding: 15px;
border-radius: 4px; }
.alert button,
.error-summary button,
.confirmation-summary button {
font-size: 20px;
font-size: 1.25rem;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
background: none;
border: 0;
color: #d7940f;
cursor: pointer;
float: right;
font-weight: 700;
padding: 0; }
.alert button:hover,
.error-summary button:hover,
.confirmation-summary button:hover {
opacity: 0.75;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); }
.alert.alert--small,
.error-summary.alert--small,
.confirmation-summary.alert--small {
font-size: 14px;
font-size: 0.875rem;
font-weight: 300; }
.alert *:last-child,
.error-summary *:last-child,
.confirmation-summary *:last-child {
margin-bottom: 0; }
.alert--error,
.error-summary {
background: #fd0826;
border-color: #d0021b;
color: #fff; }
.alert--error button,
.error-summary button {
color: #fff; }
.alert--success,
.confirmation-summary {
background: #448d28;
border-color: #3b7b23;
color: white; }
.alert--success h2,
.confirmation-summary h2 {
color: white;
text-align: left;
font-family: "HumanistReg", sans-serif; }
.alert--success button,
.confirmation-summary button {
color: black; }
.alert--information {
background: #f3f3f3;
border-color: #f3f3f3;
color: #243044; }
.alert--information button {
color: #243044; }
/* =============================================================================
Various site wide message panels
========================================================================= */
.ll-panel {
background-color: #f7f7f7;
border-radius: 4px;
display: block;
margin-bottom: 12px;
padding: 12px;
position: relative; }
.ll-panel:hover {
text-decoration: none; }
.ll-panel:hover .panel-icon.recycle {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg); }
.ll-panel h3 {
font-size: 24px;
font-size: 1.5rem; }
.ll-panel p {
clear: none !important;
color: #464646;
margin-bottom: 0;
padding-bottom: 0 !important; }
.ll-panel p.lead {
display: block;
font-family: "HumanistBold", sans-serif; }
.ll-panel a {
font-family: "HumanistBold", sans-serif; }
.ll-panel-large {
padding: 30px; }
.ll-panel-icon p {
padding-left: 55px; }
.ll-panel-icon .panel-icon {
fill: #faa300;
float: left;
height: 40px;
margin-right: 15px;
width: 40px; }
.ll-panel-icon .panel-icon.recycle {
-webkit-transition: -webkit-transform .5s ease;
transition: -webkit-transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
transition: transform .5s ease, -webkit-transform .5s ease; }
/* =============================================================================
Pagination
========================================================================= */
.pagination {
padding: 0; }
.pagination li {
display: inline-block; }
.pagination li.select select {
font-size: 18px;
font-size: 1.125rem;
border-color: #636363;
display: inline-block;
height: 42px;
line-height: 42px;
padding: 0 6px;
width: auto; }
.pagination .disabled span:not(.ll-a11y),
.pagination a:not(.ll-a11y) {
font-size: 24px;
font-size: 1.5rem;
border: 1px solid #ccc;
border-radius: 4px;
color: #000;
float: left;
height: 42px;
line-height: 42px;
padding: 0 15px; }
.pagination .disabled span:not(.ll-a11y):hover,
.pagination a:not(.ll-a11y):hover {
background: #eee; }
.pagination .disabled span {
color: #ccc; }
.pagination .disabled span:hover {
background: #fff; }
.pagination select {
float: left; }
.pagination li:first-child a {
border-width: 1px; }
/* =============================================================================
Sprite
========================================================================= */
.icn {
background-image: url(../img/sprite.png);
background-repeat: no-repeat;
height: 32px;
width: 32px; }
.icn {
display: inline-block; }
.icn--flight {
background-position: 0px 0px; }
/* =============================================================================
Tabs
========================================================================= */
.tabs {
margin-bottom: 15px; }
.tabs > ul {
margin: 0;
padding: 0; }
.tabs > ul li {
display: inline-block;
list-style: none; }
.tabs > ul a {
display: block;
padding: 7.5px; }
.tabs > div {
border: 1px solid #ccc;
margin-top: -1px;
padding: 15px; }
.tabs--full-width > ul {
display: table;
position: relative;
width: 100%;
z-index: 1; }
.tabs--full-width > ul li {
display: table-cell;
text-align: center;
margin-left: 7.5px; }
.tabs--full-width > ul li:first-child {
margin-left: 0; }
/* Resolve issue in IE10 Windows 8 'Snap Mode' - https://goo.gl/BLXV7 ======== */
@-ms-viewport {
width: device-width; }
/* Large/landscape smartphones, small tablets and up ======================== */
/* =============================================================================
Large/landscape smartphones, small tablets and up
========================================================================== */
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 32.438em) {
/* =========================================================================
Theming - Modules
========================================================================= */
/* Primary ============================================================== */
/* =============================================================================
Header - Large/landscape smartphones, small tablets and up
========================================================================= */
/**
* The main header section
* @type {String}
*/
.secure .secure-msg {
width: 270px; }
/* =============================================================================
Navigation - Large/landscape smartphones, small tablets and up
========================================================================= */
.nav.active > ul > li.dropdown {
display: block; }
.nav.active > ul > li.dropdown a {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); }
.nav.active > ul > li.dropdown .subnav {
padding: 0 10px;
position: static; }
/**
* Guarantee message
*/
.guarantee {
padding: 20px; }
.guarantee h3 {
font-size: 22px;
font-size: 1.375rem; }
.guarantee p {
font-size: 16px;
font-size: 1rem;
padding-right: 10%; }
/**
* Telephone areas with an image
*/
.phone {
color: #000; } }
/* Tablets (Portrait) and up ================================================ */
/* =============================================================================
Tablet (Portrait) - Add Styling for tablet devices and up
========================================================================== */
/* Tablet (Portrait) - Add Styling for tablet devices ======================= */
@media only screen and (min-width: 47.5em) {
/* Forms ================================================================ */
/* =============================================================================
Tablet (Portrait) - Form styling for tablet devices and up
========================================================================== */
input,
select,
textarea {
width: 220px; }
input[type="range"] {
width: 100%; }
.form--horizontal label {
display: inline-block;
line-height: 28px;
line-height: 1.75rem;
margin-right: 10px;
vertical-align: top;
width: 180px; }
.form--horizontal .input {
display: inline-block; }
.actions {
padding-left: 194px; }
/**
* Full width forms
*/
.ll-form.ll-form-full .ll-form-row,
.ll-form .ll-form-full .ll-form-row {
max-width: 50%; }
/**
* Form buttons/links with arrows
*/
.ll-form input.has-arrow,
.ll-form a.has-arrow {
background-image: url(/assets/images/icons/small/submit-arrow.png);
background-repeat: no-repeat;
background-position: 100% center;
height: 45px;
line-height: 45px;
padding: 0 100px 0 15px; }
.ll-form input.has-arrow:hover,
.ll-form a.has-arrow:hover {
background-position: 101% center; }
/* =========================================================================
Theming - Modules
========================================================================= */
/* Primary ============================================================== */
/* =============================================================================
Header - Portrait tablets devices and up
========================================================================= */
.secure {
padding: 30px 5px 15px; }
.secure .phone {
clear: none;
float: right; }
/**
* The middle-east header
*/
.me .flags {
display: block;
padding: 5px;
position: relative; }
.me .flags ul {
background-color: transparent;
height: 27px;
width: 100%; }
.me .flags ul.not-selected {
background-color: #fff;
max-height: 90px;
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
overflow: visible;
padding: 5px;
top: 2px;
width: 260px;
z-index: 1; }
.me .flags ul.not-selected.active {
left: 198px;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
padding: 5px; }
.me .flags ul.selected-flag {
left: 0;
top: 2px; }
.me .flags ul.selected-flag a {
padding: 0; }
.me .flags ul.selected-flag .selected-flag-text {
display: inline-block; }
.me .flags ul.selected-flag .selected-flag-text i {
color: #999; }
.me .flags li.close-flags {
display: none; }
/* =============================================================================
Navigation - Portrait tablets devices and up
========================================================================= */
/**
* Hide the secondary search for desktop
*/
.nav {
border: 0; }
.nav ul > li.search-form-mobile, .nav ul > li.store-locate {
display: none; }
.nav ul > li.search-form-mobile input, .nav ul > li.store-locate input {
float: right; }
.nav ul > li.search {
display: none; }
.nav ul > li.store-locate:after {
right: 200px; }
.nav ul > li.search-form-mobile:after {
right: 123px; }
/**
* Stop mobile-tablet nav going to 100%
*/
.mobile-nav > ul {
width: 320px; }
/**
* The middle-east header
*/
.me .flags {
display: block;
padding: 5px;
position: relative; }
.me .flags ul {
background-color: transparent;
height: 27px;
width: 100%; }
.me .flags ul.not-selected {
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
background-color: #fff;
max-height: 90px;
overflow: visible;
padding: 5px;
top: 2px;
width: 260px;
z-index: 1; }
.me .flags ul.not-selected.active {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
left: 198px;
padding: 5px; }
.me .flags ul.selected-flag {
left: 0;
top: 2px; }
.me .flags ul.selected-flag a {
padding: 0; }
.me .flags ul.selected-flag .selected-flag-text {
display: inline-block; }
.me .flags ul.selected-flag .selected-flag-text i {
color: #999; }
.me .flags li.close-flags {
display: none; } }
/* Landscape tablets, small desktop/laptops and up ========================== */
/* This file also handles the larger breakpoints ========================== */
/* =============================================================================
Landscape tablets, small desktop/laptops and up
========================================================================== */
/* Landscape tablets, small desktop/laptops ================================= */
@media only screen and (min-width: 60em) {
/* Forms ================================================================ */
/* =============================================================================
Forms - Landscape tablets, small desktop/laptops and up
========================================================================= */
.form--horizontal label {
text-align: right; }
select {
-webkit-appearance: menulist; }
select[multiple] {
-webkit-appearance: menulist-textfield; }
/**
* Horizontal forms
*/
.ll-form-horizontal .ll-form-label {
float: left;
margin-top: 12px;
width: 200px; }
.ll-form-horizontal .ll-form-label.width-small {
width: 120px; }
.ll-form-horizontal .ll-form-controls {
margin-left: 215px; }
.ll-form-horizontal .ll-form-controls.width-small {
margin-left: 135px; }
.ll-form-horizontal .label-checkbox,
.ll-form-horizontal .label-radio {
margin-top: 10px; }
/* Better vertical alignment if controls are checkboxes and radio buttons with text */
.ll-form-horizontal .ll-form-controls-text {
padding-top: 5px; }
/**
* Form widths
*/
.ll-form-width-large {
width: 500px; }
/* Help text
* Sub-object: `ll-form-help-inline`, `ll-form-help-block`
========================================================================== */
.ll-form-help-inline {
display: inline-block; }
.ll-form-help-inline.help-before {
float: left;
margin-left: 0;
margin-right: 7.5px; }
.ll-form-help-inline.help-before + .ll-form-controls {
margin-left: 215px; }
/**
* Error stuff
*/
#signup-email-error,
#guestEmail-error {
top: 100%;
width: 100%;
left: 0;
margin-left: 0; }
#signup-email-error:after,
#guestEmail-error:after {
border-right-color: transparent; }
/* =========================================================================
Theming - Modules
========================================================================= */
/* Primary ============================================================== */
/* =============================================================================
Header - Landscape tablets, small desktop/laptops and up
========================================================================= */
.me .head-bits li.basket i {
font-size: 28px;
font-size: 1.75rem; }
.header-sitedown {
padding-top: 30px; }
.header-sitedown [role="banner"] {
border-bottom: 1px solid #ededed; }
/* =============================================================================
Navigation - Landscape tablets, small desktop/laptops and up
========================================================================= */
/**
* Set the margins back on
*/
[role="banner"] .wrapper {
padding: 0 15px; }
[role="banner"].secure .secure-msg {
border: 0 solid #ededed;
border-width: 0 0 0 1px;
padding: 5px 17px; }
/**
* The middle-east header
*/
.me .main-nav {
margin-bottom: 30px; }
/**
* And the main navigation
*/
.nav {
display: block; }
.nav:last-of-type {
border: 0; }
.nav > ul > li:hover {
background-color: #2d3955;
-webkit-transition: background-color 0.25s ease 0.4s;
-o-transition: background-color 0.25s ease 0.4s;
transition: background-color 0.25s ease 0.4s; }
.nav > ul > li > a {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); }
.nav > ul > li:first-child {
display: inline-block; }
.nav > ul > li:first-child a {
padding: 0 10px; }
.nav > ul > li.dropdown a:after {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -12px;
content: '';
display: block;
height: 0;
opacity: 0;
width: 0; }
.nav > ul > li.dropdown:hover a:after {
bottom: -2px;
opacity: 1;
-webkit-transition: opacity 0.2s linear 0.5s, bottom 0.2s ease-in-out 0.4s;
-o-transition: opacity 0.2s linear 0.5s, bottom 0.2s ease-in-out 0.4s;
transition: opacity 0.2s linear 0.5s, bottom 0.2s ease-in-out 0.4s; }
.nav > ul > li.dropdown, .nav > ul > li.nodropdown {
display: inline-block; }
.nav > ul > li.dropdown .subnav {
border-top: 2px solid #faa300;
margin-top: 2px;
overflow: hidden;
padding: 0;
z-index: 0; }
.nav > ul > li.dropdown .subnav .link-content {
background-color: #28324b; }
.nav > ul > li.dropdown .subnav ul {
list-style: none;
margin: 0 0 15px;
padding: 0; }
.nav > ul > li.dropdown .subnav li {
display: block;
position: relative; }
.nav > ul > li.dropdown .subnav li.view-all a:after {
margin-left: 5px;
opacity: 1; }
.nav > ul > li.dropdown .subnav li.view-all a:hover:after {
margin-left: 9px; }
.nav > ul > li.dropdown .subnav li a {
color: #28324b;
font-size: .9rem;
line-height: 1.2;
position: relative; }
.nav > ul > li.dropdown .subnav li a:after {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 14px;
font-size: 0.875rem;
border: 0;
color: #3a486c;
content: '\f105';
display: inline-block;
font-family: 'FontAwesome';
height: 28px;
left: auto;
margin-left: 0;
opacity: 0;
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-webkit-transition: margin-left .3s ease, opacity .25s ease;
-o-transition: margin-left .3s ease, opacity .25s ease;
transition: margin-left .3s ease, opacity .25s ease; }
.nav > ul > li.dropdown .subnav li a:hover {
color: #3a486c; }
.nav > ul > li.dropdown .subnav li a:hover:after {
margin-left: 5px;
opacity: 1; }
.nav > ul > li.search-form-mobile {
display: none;
float: right;
top: -1px; }
.nav > ul > li.search-form-mobile:after {
border: 0; }
.nav > ul > li.search-form-mobile form {
padding: 0; }
.nav > ul > li.search-form-mobile input {
padding: 13px 15px; }
.nav > ul > li.search-form-mobile input[type="text"] {
background: #f5f5f5;
border-color: #cbcbcb transparent transparent #cbcbcb;
display: inline-block;
float: left;
margin: 0;
width: 158px; }
.nav > ul > li.search-form-mobile input[type="submit"] {
height: 44px;
right: 0; }
.mobile-nav {
display: none; }
/* =============================================================================
Footer - Landscape tablets, small desktop/laptops and up
========================================================================= */
.footer {
/**
* The middle-east footer
*/
/**
* The Germany footer
*/ }
.footer.footer-secure {
padding-top: 1.5em; }
.footer .phone,
.footer .cards,
.footer .secure {
border: 0;
padding: 0;
text-align: left; }
.footer .secure {
display: block;
text-align: right; }
.footer.me {
padding-bottom: 0; }
.footer.me [role="contentinfo"] {
padding-bottom: 2em; }
.footer.me .dts-4 {
padding-left: 25px; }
.footer.me .dts-4:first-child {
padding-left: 0;
padding-right: 75px; }
.footer.me .m-mobile {
margin-top: 0; }
.footer.me .m-mobile a {
display: inline-block; }
.footer.me .social-links {
margin-top: 100px; }
.footer.de .dts-4 {
padding-left: 2%;
padding-right: 2%; }
.footer.de .dts-4:first-child {
padding-left: 0;
padding-right: 10%; }
.footer.de .dts-4:last-child {
padding-right: 0; } }
/* Print specific stylesheet ================================================ */
/* =============================================================================
Print Styles
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important;
/* Black prints faster: h5bp.com/s */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important; }
a,
a:visited {
text-decoration: underline; }
.ir a:after, .icn a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
thead {
display: table-header-group;
/* h5bp.com/t */ }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
@page {
margin: .5cm; }
p {
font-size: 12pt;
line-height: 1.25em; }
h1 {
font-size: 24pt;
line-height: 1.25em; }
h2 {
font-size: 22pt;
line-height: 1.25em; }
h3 {
font-size: 18pt;
line-height: 1.25em; }
h4 {
font-size: 14pt;
line-height: 1.25em; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; }
header,
.basket-social,
.no-print,
footer {
display: none; } }
/* =============================================================================
Core page styling
========================================================================= */
/* Core Plugins ============================================================= */
.ll-accordion-title {
font-size: 18px;
font-size: 1.125rem;
-webkit-transition: all 0.2s linear;
/* Android 2.1 - 4.3, Blackberry 7+ */
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
background-color: #f6f6f6;
border: 1px solid #28324b;
color: #faa300;
cursor: pointer;
line-height: 24px;
margin-bottom: 0 !important;
margin-top: 0;
padding: 20px; }
.ll-accordion-content {
border: 1px solid #ededed;
margin-top: 20px;
padding: 15px 20px; }
.ll-accordion-content.no-padding {
padding: 15px 0; }
.ll-accordion-content .ll-accordion-content > :last-child {
margin-bottom: 0; }
/*
* Micro clearfix to make panels more robust
*/
.ll-accordion-content:before,
.ll-accordion-content:after {
content: '';
display: table; }
.ll-accordion-content:after {
clear: both; }
@media screen and (min-width: 950px) {
.ll-accordion-title.ll-active {
border-bottom-width: 1px; }
.ll-accordion-content {
float: left;
width: 100%; } }
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* ========================================================================
Component: Modal
========================================================================== */
.ll-modal {
-webkit-overflow-scrolling: touch;
background: #eee;
background: rgba(0, 0, 0, 0.6);
bottom: 0;
display: none;
left: 0;
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
overflow-y: auto;
position: fixed;
right: 0;
top: 0;
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
z-index: 1010;
/*
* Open state
*/ }
.ll-modal.ll-open {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); }
/*
* Prevents duplicated scrollbar
*/
.ll-modal-page,
.ll-modal-page body {
overflow: hidden; }
/* Sub-object: `ll-modal-dialog`
========================================================================== */
.ll-modal-dialog {
background: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin: 50px auto;
max-width: 100%;
max-width: calc(100% - 20px);
opacity: 0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
padding: 15px;
position: relative;
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
-o-transition: opacity 0.3s linear, transform 0.3s ease-out;
transition: opacity 0.3s linear, transform 0.3s ease-out;
transition: opacity 0.3s linear, transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
width: 700px;
/*
* Remove margin from the last-child
*/
/* Close in modal
========================================================================== */
/*
* Remove margin from adjacent element
*/
/**
* Modal headers
*/
/**
* Defaults for iframes inside the modal
*/
/**
* And defaults for the video
*/ }
.ll-modal-dialog > :last-child {
margin-bottom: 0; }
.ll-modal-dialog > .ll-close:first-child {
/*
float: right;
margin: -10px -10px 0 0;
*/
position: absolute;
right: 5px;
top: 5px; }
.ll-modal-dialog > .ll-close:first-child + * {
margin-top: 0; }
.ll-modal-dialog h1 {
margin-bottom: 30px; }
.ll-modal-dialog iframe {
display: block;
height: 100%;
min-height: 500px;
width: 100%; }
.ll-modal-dialog video {
display: block;
max-width: 100%; }
/* Phone landscape and smaller */
@media (max-width: 767px) {
/*
* Fit in small screen
*/
.ll-modal-dialog {
margin: 10px;
width: auto; } }
/*
* Open state
*/
.ll-open .ll-modal-dialog {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
/* Modifier: `ll-modal-dialog-frameless`
========================================================================== */
.ll-modal-dialog-frameless {
padding: 0;
/*
* Close in modal
*/ }
.ll-modal-dialog-frameless > .ll-close:first-child {
float: none;
margin: 0;
position: absolute;
right: -12px;
top: -12px; }
/* Phone landscape and smaller */
@media (max-width: 767px) {
.ll-modal-dialog-frameless > .ll-close:first-child {
right: -7px;
top: -7px; } }
/* Modifier: `ll-modal-dialog-large`
========================================================================== */
/* Tablet and bigger */
@media (min-width: 768px) {
.ll-modal-dialog-large {
width: 930px; } }
/* Large screen and bigger */
@media (min-width: 1220px) {
.ll-modal-dialog-large {
width: 1130px; } }
/* ========================================================================
Component: Close
========================================================================== */
.ll-close {
-webkit-appearance: none;
background: transparent;
border: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
color: inherit;
display: inline-block;
font: inherit;
line-height: 20px;
margin: 0;
opacity: 0.3;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
overflow: visible;
padding: 2px;
text-align: center;
text-decoration: none;
text-transform: none;
vertical-align: middle;
width: 20px;
/* Icon */
/*
* Hover
*/ }
.ll-close:after {
content: "\f00d";
display: block;
font-family: FontAwesome; }
.ll-close:hover, .ll-close:focus {
color: inherit;
cursor: pointer;
opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
outline: none;
text-decoration: none; }
/* Modifier
========================================================================== */
.ll-close-alt {
background: #eee;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
/* Hover */
/* Icon */ }
.ll-close-alt:hover, .ll-close-alt:focus {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); }
.ll-close-alt:after {
opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); }
.ll-close-alt:hover:after, .ll-close-alt:focus:after {
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 60em) {
.ll-modal-dialog {
padding: 30px; }
.ll-modal-dialog.ll-modal-wide {
width: 920px; } }
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Helper Classes/Mixins
========================================================================== */
.ir, .icn {
color: transparent;
font: 0/0 a;
text-shadow: none; }
/* Vertical alignment - http://goo.gl/Im9MF5 ================================ */
/* Hide from screenreaders and browsers ===================================== */
/*
* Accessibility helper
*/
.ll-a11y {
color: transparent !important;
font: 0/0 serif;
padding: 0 !important;
position: absolute;
text-shadow: none; }
/*
* Visibility
* Avoids setting display to `block` so it works also with `inline-block` and `table`
*/
@media (min-width: 86.375em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-hidden-xlarge {
display: none !important; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-large {
display: none !important; } }
/* Tablets portrait */
@media (min-width: 47.5em) and (max-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-medium {
display: none !important; } }
/* Phone landscape and smaller*/
@media (max-width: 47.5em) {
.ll-visible-medium {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-small {
display: none !important; } }
/* Remove from the flow and screen readers on any device */
.ll-hidden {
display: none !important;
visibility: hidden !important; }
/* Clearfix - Use @extend cf on element ===================================== */
.cf:after, .dl-horizontal:after, .field:after, .nav > ul > li.search form:after, .nav > ul > li.search-form-mobile form:after, .nav > ul > li.store-locate form:after, .pagination:after, .site-header:after, .review-form-box:after, .review-form-box .product:after, .product-range .product-set-item:after, .product-list .product-item:after, .store-list > li a:after {
clear: both;
content: '';
display: table; }
/**
* Clears
*/
.c-both {
clear: both; }
/**
* Floats
*/
.f-right {
float: right; }
.f-left {
float: left; }
.f-none {
float: none; }
/**
* Displays
*/
.d-block {
display: block; }
.d-inline-block {
display: inline-block; }
/**
* Text positioning
*/
.t-center {
text-align: center; }
.t-right {
text-align: right; }
.t-left {
text-align: left; }
/**
* Text styles
*/
.t-underline {
text-decoration: underline !important; }
.t-none {
text-decoration: none !important; }
/**
* Positioning
*/
.p-rel {
position: relative; }
/**
* Super margins
*/
.m-bottom {
margin-bottom: 24px; }
.m-bottom.x01 {
margin-bottom: 12px / 2; }
.m-bottom.x05 {
margin-bottom: 12px; }
.m-bottom.x3 {
margin-bottom: 36px; }
.m-bottom.x4 {
margin-bottom: 48px; }
.m-bottom.x6 {
margin-bottom: 72px; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
/**
* Paddings
*/
.p-all {
padding: 15px; }
/**
* Other position
*/
.v-middle {
vertical-align: middle; }
.v-top {
vertical-align: top; }
/**
* Widths
*/
.w-45 {
width: 45%; }
/**
* Images with borders
*/
.bordered {
border: 1px solid #dcdcdc;
padding: 2px; }
/**
* Images that should be full width
*/
.i-full-width {
display: block;
width: 100%; }
/**
* Need to add a margin to the header on certain pages
* So that elements don't sit flush against it
*/
.header-margin header {
margin-bottom: 20px; }
/**
* Some new margin helpers
*/
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.ll-grid-margin {
margin-top: 20px; }
.ll-margin {
margin-bottom: 20px; }
.ll-margin + .ll-margin {
margin-top: 20px; }
.ll-margin-top {
margin-top: 20px !important; }
.ll-margin-bottom {
margin-bottom: 20px !important; }
.ll-margin-left {
margin-left: 20px !important; }
.ll-margin-right {
margin-right: 20px !important; }
.ll-margin-vertical {
margin-bottom: 20px !important;
margin-top: 20px !important; }
.ll-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important; }
* + .ll-margin {
margin-top: 20px; }
/*
* Smaller margins
*/
.ll-margin-small {
margin-bottom: 10px; }
.ll-margin-small + .ll-margin-small {
margin-top: 10px; }
.ll-margin-small-top {
margin-top: 10px !important; }
.ll-margin-small-bottom {
margin-bottom: 10px !important; }
.ll-margin-small-left {
margin-left: 10px !important; }
.ll-margin-small-right {
margin-right: 10px !important; }
.ll-margin-small-vertical {
margin-bottom: 10px !important;
margin-top: 10px !important; }
.ll-margin-small-horizontal {
margin-left: 10px !important;
margin-right: 10px !important; }
* + .ll-margin-small {
margin-top: 10px; }
/*
* Medium margins
*/
.ll-margin-medium {
margin: 40px; }
.ll-margin-medium-top {
margin-top: 40px !important; }
.ll-margin-medium-bottom {
margin-bottom: 40px !important; }
.ll-margin-medium-left {
margin-left: 40px !important; }
.ll-margin-medium-right {
margin-right: 40px !important; }
.ll-margin-medium-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-medium-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-medium {
margin-top: 40px !important; }
/*
* Larger margins
*/
.ll-margin-large {
margin-bottom: 40px; }
.ll-margin-large + .ll-margin-large {
margin-top: 40px; }
.ll-margin-large-top {
margin-top: 40px !important; }
.ll-margin-large-bottom {
margin-bottom: 40px !important; }
.ll-margin-large-left {
margin-left: 40px !important; }
.ll-margin-large-right {
margin-right: 40px !important; }
.ll-margin-large-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-large-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-large {
margin-top: 40px; }
/*
* Extra Large margins
*/
.ll-margin-xlarge {
margin-bottom: 80px; }
.ll-margin-xlarge + .ll-margin-xlarge {
margin-top: 80px; }
.ll-margin-xlarge-top {
margin-top: 80px !important; }
.ll-margin-xlarge-bottom {
margin-bottom: 80px !important; }
.ll-margin-xlarge-left {
margin-left: 80px !important; }
.ll-margin-xlarge-right {
margin-right: 80px !important; }
.ll-margin-xlarge-vertical {
margin-bottom: 80px !important;
margin-top: 80px !important; }
.ll-margin-xlarge-horizontal {
margin-left: 80px !important;
margin-right: 80px !important; }
* + .ll-margin-xlarge {
margin-top: 80px; }
/*
* Remove margins
*/
.ll-margin-remove {
margin: 0 !important; }
.ll-margin-top-remove {
margin-top: 0 !important; }
.ll-margin-bottom-remove {
margin-bottom: 0 !important; }
.ll-pos-rel {
position: relative; }
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
@font-face {
font-family: "raty";
src: url("/assets/fonts/raty.eot");
src: url("/assets/fonts/raty.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/raty.woff") format("woff"), url("/assets/fonts/raty.ttf") format("truetype"), url("/assets/fonts/raty.svg#raty") format("svg");
font-weight: normal;
font-style: normal;
font-stretch: normal; }
.rateit {
cursor: pointer;
display: -moz-inline-box;
display: inline-block;
position: relative;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none; }
.rateit .rateit-range {
background: url(/assets/images/icons/stars/star.png);
display: -moz-inline-box;
display: inline-block;
height: 27px;
outline: none;
position: relative; }
.rateit .rateit-range * {
display: block; }
.rateit .rateit-hover,
.rateit .rateit-selected {
position: absolute;
left: 0; }
.rateit .rateit-hover-rtl,
.rateit .rateit-selected-rtl {
left: auto;
right: 0; }
.rateit .rateit-hover {
background: url(/assets/images/icons/stars/star.png) left -54px; }
.rateit .rateit-hover-rtl {
background-position: right -54px; }
.rateit .rateit-selected {
background: url(/assets/images/icons/stars/star.png) left -27px; }
.rateit .rateit-selected-rtl {
background-position: right -27px; }
.rateit .rateit-preset {
background: url(/assets/images/icons/stars/star.png) left -81px; }
.rateit .rateit-preset-rtl {
background: url(/assets/images/icons/stars/star.png) left -81px; }
.rateit button.rateit-reset {
background: url(/assets/images/icons/stars/delete.png) 0 0;
width: 35px;
height: 27px;
display: -moz-inline-box;
display: inline-block;
float: left;
outline: none;
border: none;
padding: 0; }
.rateit button.rateit-reset:hover,
.rateit button.rateit-reset:focus {
background-position: 0 -20px; }
/* ========================================================================
Component: Slideshow
========================================================================== */
/*
* 1. Create position context
* 2. Create stacking context to prevent z-index issues with other components
* 3. Set width because child elements are positioned absolute. Height is set via JS
* 4. Reset list style
* 5. Clip child elements
* 6. Deactivate browser history navigation in IE11
*/
.ll-slideshow {
/* 1 */
position: relative;
/* 2 */
z-index: 0;
/* 3 */
width: 100%;
/* 4 */
margin: 0;
padding: 0;
list-style: none;
/* 5 */
overflow: hidden;
/* 6 */
-ms-touch-action: pan-y;
touch-action: pan-y;
/*
* Sub-object slides
* 1. Position items above each other
* 2. Expand to parent container width
* 3. Hide by default
*/
/*
* Active
* 1. Stack at first
* 2. Show slide
*/ }
.ll-slideshow > li {
/* 1 */
position: absolute;
top: 0;
left: 0;
/* 2 */
width: 100%;
/* 3 */
opacity: 0;
/*
* Hide default images which is only relevant to keep existing proportions
*/ }
.ll-slideshow > li > img {
visibility: hidden; }
.ll-slideshow > li > a > img {
width: 100%; }
.ll-slideshow > .ll-active {
/* 1 */
z-index: 10;
/* 2 */
opacity: 1; }
/*
* Pointer for controls
*/
[data-ll-slideshow-slide] {
cursor: pointer; }
/* Modifier: .ll-slideshow-fullscreen`
========================================================================== */
.ll-slideshow-fullscreen,
.ll-slideshow-fullscreen > li {
height: 100vh; }
/* Animations
========================================================================== */
/*
* Fade
*/
.ll-slideshow-fade-in {
-webkit-animation: ll-fade .5s linear;
animation: ll-fade .5s linear; }
.ll-slideshow-fade-out {
animation: ll-fade .5s linear reverse; }
/*
* Scroll
*/
.ll-slideshow-scroll-forward-in {
-webkit-animation: ll-slide-right .5s ease-in-out;
animation: ll-slide-right .5s ease-in-out; }
.ll-slideshow-scroll-forward-out {
animation: ll-slide-left .5s ease-in-out reverse; }
.ll-slideshow-scroll-backward-in {
-webkit-animation: ll-slide-left .5s ease-in-out;
animation: ll-slide-left .5s ease-in-out; }
.ll-slideshow-scroll-backward-out {
animation: ll-slide-right .5s ease-in-out reverse; }
/*
* Scale
*/
.ll-slideshow-scale-out {
animation: ll-fade-scale-15 .5s ease-in-out reverse; }
/*
* Swipe
*/
.ll-slideshow-swipe-forward-in {
-webkit-animation: ll-slide-left-33 .5s ease-in-out;
animation: ll-slide-left-33 .5s ease-in-out; }
.ll-slideshow-swipe-forward-out {
animation: ll-slide-left .5s ease-in-out reverse; }
.ll-slideshow-swipe-backward-in {
-webkit-animation: ll-slide-right-33 .5s ease-in-out;
animation: ll-slide-right-33 .5s ease-in-out; }
.ll-slideshow-swipe-backward-out {
animation: ll-slide-right .5s ease-in-out reverse; }
.ll-slideshow-swipe-forward-in:before,
.ll-slideshow-swipe-backward-in:before {
animation: ll-fade .5s ease-in-out reverse;
background: rgba(0, 0, 0, 0.6);
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1; }
/* ========================================================================
Component: Slidenav
========================================================================== */
/*
* 1. Required for `a` elements
* 2. Dimension
* 3. Style
*/
.ll-slidenav {
font-size: 40px;
font-size: 2.5rem;
/* 3 */
background-color: transparent;
border: 0;
/* 2 */
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: rgba(50, 50, 50, 0.4);
/* 1 */
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0;
text-align: center;
width: 40px; }
.ll-slidenav:hover {
background-color: transparent; }
.ll-slidenav > i {
font-size: 40px;
font-size: 2.5rem;
color: #979595;
font-weight: 100; }
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
* 3. Required for `a` elements
* 4. Style
*/
.ll-slidenav:hover,
.ll-slidenav:focus {
/* 4 */
color: rgba(50, 50, 50, 0.7);
cursor: pointer;
/* 2 */
outline: none;
/* 3 */
text-decoration: none; }
.ll-slidenav:active {
color: rgba(50, 50, 50, 0.9); }
/* Sub-object: .ll-slidenav-position`
========================================================================== */
/*
* Create position context
*/
.ll-slidenav-position {
position: relative;
/*
* Center vertically
*/ }
.ll-slidenav-position .ll-slidenav {
margin-top: -20px;
opacity: 1;
position: absolute;
top: 50%;
-webkit-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
transition: opacity .2s linear;
z-index: 1; }
.ll-slidenav-position .ll-slidenav-previous {
left: -5px; }
.ll-slidenav-position .ll-slidenav-next {
right: -5px; }
/* Modifier: .ll-slidenav-contrast`
========================================================================== */
.ll-slidenav-contrast {
color: rgba(255, 255, 255, 0.5); }
/*
* Hover
* 1. Apply hover style also to focus state
*/
.ll-slidenav-contrast:hover,
.ll-slidenav-contrast:focus {
color: rgba(255, 255, 255, 0.7); }
.ll-slidenav-contrast:active {
color: rgba(255, 255, 255, 0.9); }
/* Keyframes: Fade
* Used by dropdown, datepicker and slideshow component
========================================================================== */
@keyframes ll-fade {
0% {
opacity: 0; }
100% {
opacity: 1; } }
/* Keyframes: Fade with slide
========================================================================== */
/*
* Top
*/
@keyframes ll-fade-top {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Bottom
*/
@keyframes ll-fade-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Left
*/
@keyframes ll-fade-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Right
*/
@keyframes ll-fade-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Top small
*/
@keyframes ll-fade-top-small {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Bottom small
*/
@keyframes ll-fade-bottom-small {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
/* Keyframes: Fade with scale
========================================================================== */
/*
* Scale by 0.2
*/
@keyframes ll-fade-scale-02 {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ll-fade-scale-over {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
70% {
opacity: .7;
-webkit-transform: scale(1.2);
transform: scale(1.2); }
90% {
opacity: .9;
-webkit-transform: scale(0.95);
transform: scale(0.95); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/*
* Scale by 1.5
* Used by slideshow component
*/
@keyframes ll-fade-scale-15 {
0% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/*
* Scale by 1.8
*/
@keyframes ll-fade-scale-18 {
0% {
opacity: 0;
-webkit-transform: scale(1.8);
transform: scale(1.8); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/* Keyframes: Slide
* Used by slideshow component
========================================================================== */
/*
* Left
*/
@keyframes ll-slide-left {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Right
*/
@keyframes ll-slide-right {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Left third
*/
@keyframes ll-slide-left-33 {
0% {
-webkit-transform: translateX(33%);
transform: translateX(33%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/*
* Right third
*/
@keyframes ll-slide-right-33 {
0% {
-webkit-transform: translateX(-33%);
transform: translateX(-33%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/* Keyframes: Scale
========================================================================== */
@keyframes ll-scale-12 {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
/* Keyframes: Rotate
* Used by icon component
========================================================================== */
@keyframes ll-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
/* Keyframes: Shake
========================================================================== */
@keyframes ll-shake {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0); }
10% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px); }
20% {
-webkit-transform: translateX(8px);
transform: translateX(8px); }
30% {
-webkit-transform: translateX(-7px);
transform: translateX(-7px); }
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px); }
50% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px); }
60% {
-webkit-transform: translateX(4px);
transform: translateX(4px); }
70% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px); }
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px); }
90% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px); } }
/* Keyframes: Fade with slide fixed
* Used by dropdown and search component
========================================================================== */
/*
* Top fixed
*/
@keyframes ll-slide-top-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/*
* Bottom fixed
*/
@keyframes ll-slide-bottom-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/* ========================================================================
Component: Dotnav
========================================================================== */
/*
* 1. Gutter
* 2. Remove default list style
*/
.ll-dotnav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
/* 1 */
margin-left: -15px;
margin-top: -15px;
/* 2 */
padding: 0;
/*
* DEPRECATED IE9 Support
*/
/*
* 1. Space is allocated solely based on content dimensions
* 2. Horizontal gutter is using `padding` so .ll-width-*` classes can be applied
*/ }
.ll-dotnav:before, .ll-dotnav:after {
content: '';
display: block;
overflow: hidden; }
.ll-dotnav:after {
clear: both; }
.ll-dotnav > * {
/* 1 */
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
float: left;
/* 2 */
margin-top: 15px;
padding-left: 15px;
/* Items
========================================================================== */
/*
* Items
* 1. Hide text if present
*/ }
.ll-dotnav > *.ll-active > * {
background-color: rgba(50, 50, 50, 0.4); }
.ll-dotnav > * > * {
background-color: rgba(50, 50, 50, 0.1);
border-radius: 50%;
-webkit-box-sizing: content-box;
box-sizing: content-box;
display: block;
height: 15px;
overflow: hidden;
/* 1 */
text-indent: 100%;
white-space: nowrap;
width: 15px;
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
/* OnClick */ }
.ll-dotnav > * > *:hover, .ll-dotnav > * > *:focus {
background-color: rgba(50, 50, 50, 0.4);
/* 2 */
outline: none; }
.ll-dotnav > * > *:active {
background-color: rgba(50, 50, 50, 0.6); }
/* Modifier: .ll-dotnav-contrast`
========================================================================== */
.ll-dotnav-contrast > * > * {
background-color: rgba(255, 255, 255, 0.4);
/*
* Hover
* 1. Apply hover style also to focus state
*/
/* OnClick */ }
.ll-dotnav-contrast > * > *:hover, .ll-dotnav-contrast > * > *:focus {
background-color: rgba(255, 255, 255, 0.7); }
.ll-dotnav-contrast > * > *:active {
background-color: rgba(255, 255, 255, 0.9); }
.ll-dotnav-contrast > *.ll-active > * {
background-color: rgba(255, 255, 255, 0.9); }
/* Modifier: `f-dotnav-vertical'
========================================================================== */
/*
* DEPRECATED
*/
.ll-dotnav-vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/*
* DEPRECATED IE9 Support
*/ }
.ll-dotnav-vertical > * {
float: none; }
.ie9 .ll-dotnav.ll-flex-center {
left: calc(50% - 15px);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: auto; }
/* ========================================================================
Component: Slider
========================================================================== */
/*
* RTL Compatibility
*/
[data-f-slider] {
direction: ltr; }
html[dir='rtl'] .ll-slider-new > * {
direction: rtl; }
/*
* 1. Create position context
* 2. Create stacking context to prevent z-index issues with other components
* 3. Deactivate browser history navigation in IE11
*/
.ll-slider-new {
/* 1 */
position: relative;
/* 3 */
-ms-touch-action: pan-y;
touch-action: pan-y;
/* 2 */
z-index: 0;
/*
* 1. Reset list style without interfering with grid
*/
/*
* Sub-object item
* 1. Position items above each other
*/
/*
* 1. Makes text unselectable
*/
/*
* 1. Prevents images and links from being dragged in Firefox
*/ }
@media only screen and (min-width: 960px) {
.ll-slider-new.ll-slider-new-fancy > li > div {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transition: -webkit-transform .1s linear;
transition: -webkit-transform .1s linear;
-o-transition: transform .1s linear;
transition: transform .1s linear;
transition: transform .1s linear, -webkit-transform .1s linear; }
.ll-slider-new.ll-slider-new-fancy > li.ll-next > div, .ll-slider-new.ll-slider-new-fancy > li.ll-previous > div {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 1; }
.ll-slider-new.ll-slider-new-fancy > li.ll-active > div {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
z-index: 2; } }
.ll-slider-new:not(.ll-grid) {
/* 1 */
list-style: none;
margin: 0;
padding: 0; }
.ll-slider-new > * {
/* 1 */
left: 0;
position: absolute;
top: 0; }
.ll-slider-new.ll-drag {
cursor: col-resize;
/* 1 */
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
.ll-slider-new img {
pointer-events: none; }
/*
* Clip child elements
*/
.ll-slider-new-container {
overflow: hidden; }
.ll-slider-new-container + .ll-slide-handle {
background-color: #ebf7fd;
display: none;
height: 5px;
margin: 0 auto;
position: relative;
width: 100%;
z-index: 2; }
.ll-slider-new-container + .ll-slide-handle .ll-drag-handle {
background-color: #d4eefb;
border: 1px solid #a5dbf6;
cursor: pointer;
display: block;
height: 20px;
position: absolute;
top: -7.5px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: background-color .2s linear, border .2s linear, -webkit-transform .1s linear;
transition: background-color .2s linear, border .2s linear, -webkit-transform .1s linear;
-o-transition: background-color .2s linear, border .2s linear, transform .1s linear;
transition: background-color .2s linear, border .2s linear, transform .1s linear;
transition: background-color .2s linear, border .2s linear, transform .1s linear, -webkit-transform .1s linear;
width: 120px;
z-index: 1; }
.ll-slider-new-container + .ll-slide-handle .ll-drag-handle:hover, .ll-slider-new-container + .ll-slide-handle .ll-drag-handle.ll-handle-drag {
background-color: #a5dbf6;
border-color: #8ed2f4; }
.ll-slider-new-container + .ll-slide-handle .ll-slide-step {
float: left;
height: 5px; }
@media only screen and (min-width: 960px) {
.ll-slider-new-container + .ll-slide-handle {
display: block; } }
/*
* Dragged
*/
.ll-slider-new:not(.ll-drag) {
-webkit-transition: -webkit-transform 200ms linear;
transition: -webkit-transform 200ms linear;
-o-transition: transform 200ms linear;
transition: transform 200ms linear;
transition: transform 200ms linear, -webkit-transform 200ms linear; }
/*
* 1. Prevents images and links from being dragged (default browser behavior)
* 2. Disables the default callout shown when you touch and hold a touch target
* Currently only works in Webkit
*/
.ll-slider-new a,
.ll-slider-new img {
/* 2 */
-webkit-touch-callout: none;
/* 1 */
-webkit-user-drag: none;
user-drag: none; }
/* Modifier: `f-slider-fullscreen`
========================================================================== */
.ll-slider-new-fullscreen,
.ll-slider-new-fullscreen > li {
height: 100vh; }
/* Modifier: `f-slider-slideshow-nav`
========================================================================== */
.ll-slider-new-slideshow-nav li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer; }
.ll-slider-new-slideshow-nav li:before {
border: 2px solid transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1; }
.ll-slider-new-slideshow-nav .ll-active:before {
border-color: #07d; }
/* ========================================================================
Component: Sticky
========================================================================== */
/*
* 1. More robust if padding and border are used
* 2. Enable hardware acceleration for iOS browsers, resolves scrolling issue
*/
[data-ll-sticky].ll-active {
/* 1 */
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 980; }
/*
* Faster animations
*/
[data-ll-sticky][class*='ll-animation-'] {
-webkit-animation-duration: .15s;
animation-duration: .15s; }
[data-ll-sticky].ll-animation-reverse {
-webkit-animation-duration: .04s;
animation-duration: .04s; }
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* The base styles */
/* ========================================================================
Component: Switcher
========================================================================== */
.ll-switcher {
list-style: none;
margin: 0;
padding: 0; }
.ll-switcher.activated > * {
display: none; }
.ll-switcher > .ll-active {
display: block; }
.ll-switcher.boxed > li {
border: 1px solid #959595;
border-top-width: 0; }
/* ========================================================================
Component: Tab
========================================================================== */
.ll-tab {
list-style: none;
margin: 0;
padding: 0;
/*
* Micro clearfix on the deepest container
*/
/*
* Items
*/
/*
* Hover
*/
/* Active */
/* Disabled */ }
.ll-tab:before, .ll-tab:after {
content: " ";
display: table;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1; }
.ll-tab:after {
clear: both; }
.ll-tab > li {
display: block;
margin-bottom: -1px;
position: relative; }
.ll-tab > li > a {
background-color: #dcdcdc;
border: 1px solid #959595;
border-bottom-width: 0;
color: #000;
display: block;
margin-bottom: 1px;
padding: 10px 15px 9px;
text-decoration: none;
text-transform: uppercase; }
.ll-tab > li > a > img {
display: none;
float: left;
margin-bottom: 5px;
margin-right: 7.5px;
position: relative;
top: -1px; }
.ll-tab > li:first-child > a {
margin-left: 0; }
.ll-tab > li > a:hover,
.ll-tab > li > a:focus,
.ll-tab > li.ll-open > a {
background: #ccc;
color: #000;
outline: none; }
.ll-tab > li.ll-active > a {
background: #fff;
border-bottom-color: transparent;
border-color: #959595;
margin-bottom: 0; }
.ll-tab > li.ll-disabled > a {
color: #999;
cursor: auto; }
.ll-tab > li.ll-disabled > a:hover,
.ll-tab > li.ll-disabled > a:focus,
.ll-tab > li.ll-disabled.ll-active > a {
background: none;
border-color: transparent; }
/* Modifier: 'tab-flip'
========================================================================== */
.ll-tab-flip > li {
float: right; }
.ll-tab-flip > li > li:nth-child(n+2) > a {
margin-left: 0;
margin-right: 5px; }
/* Modifier: 'tab-responsive'
========================================================================== */
.ll-tab > li.ll-tab-responsive > a {
margin-left: 0;
margin-right: 0; }
/*
* Icon
*/
.ll-tab-responsive > a:before {
content: "\f0c9\00a0";
font-family: FontAwesome; }
/* Modifier: 'tab-center'
========================================================================== */
.ll-tab-center {
border-bottom: 1px solid #ddd; }
.ll-tab-center:before, .ll-tab-center:after {
content: " ";
display: table; }
.ll-tab-center:after {
clear: both; }
.ll-tab-center-bottom {
border-bottom: none;
border-top: 1px solid #ddd; }
/*
* 1. Using `right` to prevent vertical scrollbar caused by centering if to many tabs
*/
.ll-tab-center .ll-tab {
border: none;
float: right;
position: relative;
right: 50%; }
.ll-tab-center .ll-tab > li {
position: relative;
right: -50%; }
.ll-tab-center .ll-tab > li > a {
text-align: center; }
/* Modifier: 'tab-bottom'
========================================================================== */
.ll-tab-bottom {
border-bottom: none;
border-top: 1px solid #ddd; }
.ll-tab-bottom > li {
margin-bottom: 0;
margin-top: -1px; }
.ll-tab-bottom > li > a {
border-bottom-width: 1px;
border-top-width: 0;
padding-bottom: 8px;
padding-top: 8px; }
.ll-tab-bottom > li:not(.ll-active) > a:hover,
.ll-tab-bottom > li:not(.ll-active) > a:focus,
.ll-tab-bottom > li.ll-open:not(.ll-active) > a {
margin-bottom: 0;
margin-top: 1px;
padding-bottom: 8px;
padding-top: 7px; }
.ll-tab-bottom > li.ll-active > a {
border-bottom-color: #dddddd;
border-top-color: transparent; }
/* Modifier: 'tab-grid'
========================================================================== */
.ll-tab-grid {
border-bottom: none;
margin-left: -5px;
position: relative;
z-index: 0; }
.ll-tab-grid:before {
border-top: 1px solid #ddd;
bottom: -1px;
display: block;
left: 5px;
position: absolute;
right: 0;
z-index: -1; }
.ll-tab-grid > li:first-child > a {
margin-left: 5px; }
.ll-tab-grid > li > a {
text-align: center; }
/*
* If `ll-tab-bottom`
*/
.ll-tab-grid.ll-tab-bottom {
border-top: none; }
.ll-tab-grid.ll-tab-bottom:before {
bottom: auto;
top: -1px; }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 32.438em) {
/* ========================================================================
Component: Tab
========================================================================== */
.ll-tab {
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around; }
.ll-tab li {
display: inline-block;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
float: left; }
.ll-tab li > a {
margin-left: 5px; } }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* Tabs
*/
.ll-tab {
/*
* Items
*/ }
.ll-tab > li > a {
font-size: 18px;
font-size: 1.125rem; }
.ll-tab > li > a > img {
display: inline-block; }
.ll-tab-left,
.ll-tab-right {
border-bottom: none; }
.ll-tab-left > li,
.ll-tab-right > li {
float: none;
margin-bottom: 0; }
.ll-tab-left > li > a,
.ll-tab-right > li > a {
padding: 10px 15px; }
.ll-tab-left > li:nth-child(n+2) > a,
.ll-tab-right > li:nth-child(n+2) > a {
margin-left: 0;
margin-top: 5px; }
.ll-tab-left > li.ll-active > a,
.ll-tab-right > li.ll-active > a {
border-color: #ddd; }
/*
* Modifier: 'tab-left'
*/
.ll-tab-left {
border-right: 1px solid #ddd; }
.ll-tab-left > li {
margin-right: -1px; }
.ll-tab-left > li > a {
border-bottom-width: 1px;
border-right-width: 0; }
.ll-tab-left > li:not(.ll-active) > a:hover,
.ll-tab-left > li:not(.ll-active) > a:focus {
margin-bottom: 0;
margin-right: 1px;
padding-bottom: 8px;
padding-right: 11px; }
.ll-tab-left > li.ll-active > a {
border-right-color: transparent; }
/*
* Modifier: 'tab-right'
*/
.ll-tab-right {
border-left: 1px solid #ddd; }
.ll-tab-right > li {
margin-left: -1px; }
.ll-tab-right > li > a {
border-bottom-width: 1px;
border-left-width: 0; }
.ll-tab-right > li:not(.ll-active) > a:hover,
.ll-tab-right > li:not(.ll-active) > a:focus {
margin-bottom: 0;
margin-left: 1px;
padding-bottom: 8px;
padding-left: 11px; }
.ll-tab-right > li.ll-active > a {
border-left-color: transparent; } }
/* ========================================================================
Component: Tooltip
========================================================================== */
.ll-tooltip {
background: #fff;
border: 1px solid #c2c2c2;
border-radius: 4px;
color: #464646;
display: none;
font-size: 12px;
line-height: 18px;
max-width: 200px;
min-width: 200px;
padding: 5px 8px;
position: absolute;
text-align: center;
z-index: 1030; }
/* Triangle
========================================================================== */
/*
* 1. Dashed is less antialised than solid
*/
.ll-tooltip:after,
.ll-tooltip:before {
border: 10px dashed #fff;
content: "";
display: block;
height: 0;
position: absolute;
width: 0; }
/* Direction modifiers
========================================================================== */
/*
* Top
*/
.ll-tooltip-top:before,
.ll-tooltip-top-left:before,
.ll-tooltip-top-right:before {
bottom: -11px;
border-top-style: solid;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: #c2c2c2; }
.ll-tooltip-top:after,
.ll-tooltip-top-left:after,
.ll-tooltip-top-right:after {
bottom: -10px;
border-top-style: solid;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: #fff; }
/*
* Bottom
*/
.ll-tooltip-bottom:before,
.ll-tooltip-bottom-left:before,
.ll-tooltip-bottom-right:before {
top: -11px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: #c2c2c2; }
.ll-tooltip-bottom:after,
.ll-tooltip-bottom-left:after,
.ll-tooltip-bottom-right:after {
top: -10px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: #fff; }
/*
* Top/Bottom center
*/
.ll-tooltip-top:after,
.ll-tooltip-bottom:after,
.ll-tooltip-top:before,
.ll-tooltip-bottom:before {
left: 50%;
margin-left: -10px; }
/*
* Top/Bottom left
*/
.ll-tooltip-top-left:after,
.ll-tooltip-bottom-left:after {
left: 10px; }
/*
* Top/Bottom right
*/
.ll-tooltip-top-right:after,
.ll-tooltip-bottom-right:after {
right: 10px; }
/*
* Left
*/
.ll-tooltip-left:before {
right: -11px;
top: 50%;
margin-top: -10px;
border-left-style: solid;
border-right: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #c2c2c2; }
.ll-tooltip-left:after {
right: -10px;
top: 50%;
margin-top: -10px;
border-left-style: solid;
border-right: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #fff; }
/*
* Right
*/
.ll-tooltip-right:before {
left: -11px;
top: 50%;
margin-top: -10px;
border-right-style: solid;
border-left: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: #c2c2c2; }
.ll-tooltip-right:after {
left: -10px;
top: 50%;
margin-top: -10px;
border-right-style: solid;
border-left: none;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: #fff; }
/*
* jQuery Minimun Password Requirements 1.1
* http://elationbase.com
* Copyright 2014, elationbase
* Check Minimun Password Requirements
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
#pr-box {
font: 13px/16px sans-serif;
position: absolute;
z-index: 1000;
display: none;
width: 300px;
max-width: 100%; }
#pr-box i {
width: 0;
height: 0;
margin-left: 20px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #23a86d; }
#pr-box-inner {
margin-top: 6px;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }
#pr-box p {
padding: 20px;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0; }
#pr-box ul {
padding: 7px;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px; }
#pr-box ul li {
list-style: none;
padding: 7px; }
#pr-box ul li span {
width: 15px;
height: 15px;
display: block;
float: left;
border-radius: 100%;
margin-right: 15px; }
#pr-box.light {
color: #2d2f31; }
#pr-box.light p {
background-color: #23a86d;
color: #f1f1f1; }
#pr-box.light ul {
background-color: #f1f1f1; }
#pr-box.light ul li span {
background-color: #f1f1f1;
border: 3px solid #23a86d; }
#pr-box.light ul li span.pr-ok {
background-color: #23a86d;
border: 3px solid #23a86d; }
#pr-box.dark {
color: #f1f1f1; }
#pr-box.dark p {
background-color: #23a86d; }
#pr-box.dark ul {
background-color: #2d2f31; }
#pr-box.dark ul li span {
background-color: #2d2f31;
border: 3px solid #23a86d; }
#pr-box.dark ul li span.pr-ok {
background-color: #23a86d;
border: 3px solid #23a86d; }
/* Core Modules ============================================================= */
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/**
* The container element
*/
.product-list.recently {
border-radius: 0;
border-top: 1px solid #ebebeb;
border-width: 1px 0 0 0;
margin-top: 15px;
padding: 15px 15px 0 15px; }
.product-list.recently h3 {
text-align: center; }
.product-list.recently ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 170px !important; }
/**
* Footer brand logos
*/
.footer-brand-logos {
text-align: center; }
.footer-brand-logos .more-brands {
clear: both;
height: 61px;
position: relative;
width: 100%; }
.footer-brand-logos .more-brands:before {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #e5e5e5;
left: 0;
right: 0;
content: '';
height: 1px;
width: 100%; }
.footer-brand-logos .btn {
font-size: 16px;
font-size: 1rem;
background-color: #fbaa29;
border: none;
display: inline-block;
margin-top: 15px;
position: relative; }
.footer-brand-logos .btn:hover {
background-color: #fba010; }
.footer-brand {
float: left;
padding: 10px 0;
text-align: center;
width: 50%; }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* The container element
*/
.footer-tabs-container {
display: block;
margin: auto;
position: relative; }
.footer-tabs-container .ll-tab {
border: 0; }
.footer-tabs-container .ll-tab > li {
width: 33.333%; }
.footer-tabs-container .ll-tab a .no-show {
display: none; }
/**
* Customers also bought section styles
*/
#customers-also-bought .dts-6 .dts-6,
#can-we-recommend .dts-6 .dts-6 {
padding: 0 15px; }
/**
* Footer brand logos
*/
.footer-brand {
width: 33%; } }
/* Desktop / table landscape ================================================ */
@media only screen and (min-width: 60em) {
/**
* Making names smaller
*/
.footer-tabs-container .ll-tab a .no-show {
display: inline; }
.product-list.recently ul li {
width: calc(100% / 6) !important; }
/**
* Footer brand logos
*/
.footer-brand {
margin-top: 30px;
width: 11.6%; }
.footer-brand img {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
/* Large Desktop - Add Styling for large desktop computers ================== */
@media only screen and (min-width: 86.375em) {
/**
* The container element
*/
.footer-tabs-container .ll-tab > li {
width: 24.8%; } }
.viewed-items {
margin-bottom: 20px;
margin-top: 20px; }
.viewed-items .wrapper {
padding-left: 10px;
padding-right: 10px; }
.viewed-items .wrapper .dts-6 {
border: 1px solid #ebebeb;
border-radius: 4px;
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
margin-bottom: 20px; }
.viewed-items .wrapper .dts-6.extend-reccomendations {
width: 100%; }
.viewed-items .wrapper .dts-6.extend-viewed-items {
margin-left: 0;
width: 100%; }
.viewed-items .wrapper .dts-6 h3 {
font-family: "Humanist", sans-serif;
margin-bottom: 40px;
margin-left: 20px;
margin-right: 20px;
margin-top: 25px; }
@media (max-width: 960px) and (min-width: 760px) {
.viewed-items .wrapper .dts-6 h3 {
margin-bottom: 20px;
margin-top: 20px; } }
.viewed-items .wrapper .dts-6 h3 button {
background-color: transparent;
float: right;
outline: 0;
padding: 0; }
.viewed-items .wrapper .dts-6 h3 span {
font-size: 10px;
font-size: 0.625rem;
margin-right: 5px;
position: relative;
top: -2px; }
.viewed-items .wrapper .dts-6 h3 img {
margin-left: 5px; }
.viewed-items .wrapper .dts-6 #toggle-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
@media (max-width: 960px) {
.viewed-items .wrapper .dts-6 #toggle-flex {
display: block; } }
.viewed-items .wrapper .dts-6 .ll-flex-center {
margin-bottom: 32px;
margin-left: 0; }
.viewed-items .wrapper .dts-6 .ll-flex-center .img-container {
border: 1px solid #ebebeb;
border-radius: 4px;
margin-left: 20px;
margin-right: 20px;
padding: 8px;
text-align: center;
-webkit-transition: -webkit-box-shadow .3s ease;
transition: -webkit-box-shadow .3s ease;
-o-transition: box-shadow .3s ease;
transition: box-shadow .3s ease;
transition: box-shadow .3s ease, -webkit-box-shadow .3s ease; }
.viewed-items .wrapper .dts-6 .ll-flex-center .img-container:hover {
-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
text-decoration: none; }
@media (max-width: 960px) and (min-width: 760px) {
.viewed-items .tab-6 {
float: left;
margin-bottom: 20px; } }
@media (max-width: 960px) {
.viewed-items .ll-flex {
display: block; }
.viewed-items .ll-flex .ll-flex-center {
width: 33.33%;
float: left; } }
.related-searches {
background: transparent;
margin: 15px 0 0 0;
padding: 0 15px;
padding-top: 0; }
.related-searches h3 {
text-align: center;
color: #464646;
font-family: "HumanistReg", sans-serif; }
.related-searches ul {
margin-bottom: 0;
text-align: center; }
.related-searches ul li {
margin: 0 5px 0 5px; }
.related-searches ul li:before {
content: '|';
position: relative;
left: -4px; }
.related-searches ul li:first-child:before {
content: none; }
.related-searches ul li a {
font-size: 15px;
font-size: 0.9375rem;
border: 0;
color: #464646;
display: inline-block;
font-family: "HumanistReg", sans-serif;
line-height: 0.9375rem;
padding: 0;
text-decoration: none;
text-transform: capitalize; }
.related-searches ul li a:hover {
background-color: transparent;
text-decoration: underline; }
.related-searches .wrapper {
margin: 0 auto;
padding: 0;
width: 100%; }
@media screen and (max-width: 60em) {
/**
* Related search queries at the bottom of the page
*/
.related-searches {
padding-top: 15px;
border-top: 1px solid #ebebeb; }
.related-searches ul li:before {
content: none; }
.related-searches ul li a {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4; } }
/* =============================================================================
Search - Autocomplete
========================================================================= */
.ui-autocomplete {
background-color: #fff;
border: 0 solid #ddd;
border-width: 0 1px 1px;
list-style: none;
max-width: calc(100% - 20px);
padding: 0;
position: absolute;
text-align: left;
top: calc(100% - 10px);
z-index: 999; }
.search-autocomplete-result {
border-bottom: 1px solid #ddd;
padding: 0 7.5px;
text-transform: uppercase;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
width: 100%; }
.search-autocomplete-result:hover {
background-color: #243044;
border-color: #243044; }
.search-autocomplete-result:hover a,
.search-autocomplete-result:hover .price {
color: #fff; }
.search-autocomplete-result:hover.with-image {
border-color: #243044; }
.search-autocomplete-result:last-child {
border-bottom: 0; }
.search-autocomplete-result.with-image {
border-bottom: 1px solid #ddd;
display: table;
padding: 7.5px; }
.search-autocomplete-result.with-image:last-child {
border-bottom: 0; }
.search-autocomplete-result.with-image a {
display: table-row; }
.search-autocomplete-result.with-image a > div {
display: table-cell;
vertical-align: middle; }
.search-autocomplete-result.with-image a > div p {
margin: 0;
padding-right: 52.5px;
position: relative; }
.search-autocomplete-result.with-image a > div p span {
position: absolute;
right: 0;
top: 0; }
.search-autocomplete-result.with-image a > div.pproduct p {
padding-right: 92.5px; }
.search-autocomplete-result.with-image a > div:first-child {
width: 68px; }
.search-autocomplete-result.with-image a > div:first-child img {
width: 58px; }
.search-autocomplete-result a {
font-size: 14px;
font-size: 0.875rem;
color: #545454;
display: block;
height: 100%;
line-height: 1.2;
padding: 10px 0;
text-decoration: none;
width: 100%; }
.search-autocomplete-result a > div:first-child {
float: left;
max-width: 80%; }
.search-autocomplete-result a .price {
color: #767676; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background: #243044; }
.ui-state-hover a,
.ui-state-hover .price, .ui-widget-content .ui-state-hover a,
.ui-widget-content .ui-state-hover .price, .ui-widget-header .ui-state-hover a,
.ui-widget-header .ui-state-hover .price, .ui-state-focus a,
.ui-state-focus .price, .ui-widget-content .ui-state-focus a,
.ui-widget-content .ui-state-focus .price, .ui-widget-header .ui-state-focus a,
.ui-widget-header .ui-state-focus .price {
color: #fff; }
@media screen and (min-width: 47.5em) {
.ui-autocomplete {
width: 100%; }
.search-autocomplete-result {
padding: 0 12px; }
.search-autocomplete-result.with-image {
padding: 7.5px 12px; }
.search-autocomplete-result.with-image a > div:nth-child(2) {
width: 100%; } }
@media screen and (min-width: 60em) {
.ui-autocomplete {
max-width: 100%;
top: 100%; }
.search-autocomplete-result a {
font-size: 12px;
font-size: 0.75rem; }
.search-autocomplete-result a.width-image a > div p {
padding-right: 60px; } }
@media screen and (min-width: 1280px) {
.ui-autocomplete {
max-width: calc(100% - 50px); }
.search-autocomplete-result a {
font-size: 14px;
font-size: 0.875rem; } }
/**
@new 2017 header
---------------------------------------------------------
modules/_header.scss
--------------------------------------------------------
------------------------------------------------------ */
.site-messaging {
margin: 0;
display: block;
clear: both;
width: 100%;
padding: 20px 15px 15px;
text-align: left; }
.site-messaging .title {
font-family: 'AbrilReg', sans-serif;
font-size: 1.5rem;
color: #2E3348; }
.site-messaging p {
color: #2E3348;
font-family: humanist, sans-serif;
font-size: 1rem; }
.site-messaging a {
color: #2E3348;
font-size: 1rem;
text-decoration: underline; }
.site-messaging a:hover {
color: #ffa300;
text-decoration: none; }
.site-messaging .hidden-panel {
margin-top: 30px; }
.site-messaging .display-inline {
display: inline; }
.site-header {
background: #fff;
min-height: 108px;
position: relative;
width: 100%;
z-index: 11; }
.site-header.ll-active {
min-height: 0; }
.site-header.ll-active .logo {
border: 0;
height: 0;
opacity: 0;
padding: 0; }
.site-header .wrapper {
padding: 0; }
.site-header.secure {
border: 0;
margin-bottom: 0;
padding: 15px 5px; }
.site-header.secure .wrapper > img {
margin-left: 7.5px; }
.site-header.secure .logo {
margin-bottom: 0;
margin-top: 5px; }
.site-header.secure .secure-msg {
font-size: 12px;
font-size: 0.75rem;
display: block;
line-height: 1;
margin: 0;
padding: 5px;
text-transform: none; }
.site-header.secure .secure-msg i {
font-size: 32px;
font-size: 2rem;
color: #fbaa29;
float: left;
margin-right: 7.5px; }
.site-header.secure .phone {
clear: both;
margin-right: 30px;
padding: 5px 0; }
.site-header.secure .phone i {
font-size: 32px;
font-size: 2rem;
color: #fbaa29; }
.site-header.secure.ll-active {
position: relative; }
.site-header.ll-active .logo {
border: 0;
height: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0; }
.logo {
border-top: 1px solid #ccc;
float: left;
opacity: 1;
padding: 10px 0;
text-align: center;
-webkit-transition: opacity .001s linear;
-o-transition: opacity .001s linear;
transition: opacity .001s linear;
width: 100%; }
.logo img {
max-height: 44px;
max-width: 150px;
vertical-align: middle; }
.menu-trigger {
display: inline-block;
z-index: 10; }
.menu-trigger img {
height: 18px;
margin-top: 2px;
width: 24px; }
.menu-trigger span {
line-height: 1;
margin-top: 5px; }
.menu-active .menu-trigger {
position: relative; }
.menu-active .menu-trigger:after {
background-color: #ccc;
bottom: 0;
content: '';
display: block;
height: 62px;
left: -12px;
position: absolute;
right: 0;
top: -10px;
width: 200%;
z-index: -1; }
.head-bits {
background-color: #fff;
border-bottom: 2px solid #f3a528;
border-top: 1px solid #ccc;
list-style: none;
margin: 0;
padding: 7px 12px 5px;
z-index: 1001; }
.head-bits > li {
font-size: 12px;
font-size: 0.75rem;
display: inline-block;
float: left;
margin-right: 24px;
position: relative;
text-align: center; }
.head-bits > li:last-child {
margin-right: 0; }
.head-bits > li.header-search {
display: none; }
.head-bits > li.search.showing-form, .head-bits > li.map.showing-form {
position: relative; }
.head-bits > li.search.showing-form:after, .head-bits > li.map.showing-form:after {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border: solid transparent;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fbaa29;
border-width: 8px;
bottom: -7px;
content: '';
height: 0;
margin-right: 0;
pointer-events: none;
width: 0; }
.head-bits > li.contact {
display: none; }
.head-bits > li.basket {
margin-right: 0;
position: relative; }
.head-bits > li.basket:hover .item-count {
line-height: 22px;
width: 22px; }
.head-bits > li.basket .basket-items {
display: inline-block;
position: relative; }
.head-bits > li.basket .item-count {
font-size: 10px;
font-size: 0.625rem;
background-color: #fbaa29;
border-radius: 50%;
color: #243044;
line-height: 20px;
position: absolute;
right: -8px;
text-align: center;
top: 1px;
-webkit-transition: line-height .3s ease, width .3s ease;
-o-transition: line-height .3s ease, width .3s ease;
transition: line-height .3s ease, width .3s ease;
width: 20px; }
.head-bits > li.basket .basket-amount {
color: #767676;
display: none;
text-transform: uppercase; }
.head-bits > li.basket .btn {
display: none; }
.head-bits > li.basket.no-items {
pointer-events: none; }
.head-bits > li.basket.no-items .btn {
background: #e1e1e1;
pointer-events: none; }
.head-bits > li.basket.no-items .item-count {
display: none; }
.head-bits > li.chat {
position: relative; }
.head-bits > li.chat .current-person {
display: none; }
.head-bits > li.chat:hover .login-popdown {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
visibility: visible; }
.head-bits > li a {
text-decoration: none;
vertical-align: middle; }
.head-bits > li a .icon-text {
color: #243044;
display: block;
font-weight: 700;
white-space: nowrap; }
.head-bits > li i {
font-size: 23px;
font-size: 1.4375rem;
color: #243044;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; }
.head-bits > li .header-icon {
height: 25px;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
width: 27px; }
.head-bits > li .menu-trigger .header-icon {
height: 20px; }
.me .head-bits li.basket {
margin-right: 10px; }
.me .head-bits li.basket .item-count {
right: -24px; }
.brand-usp-mobile {
-webkit-box-shadow: 0 5px 4px -2px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 4px -2px rgba(0, 0, 0, 0.2); }
.login-popdown {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #fff;
-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
opacity: 0;
padding-bottom: 3px;
top: 69px;
-webkit-transition: opacity .25s linear, visibility .25s linear;
-o-transition: opacity .25s linear, visibility .25s linear;
transition: opacity .25s linear, visibility .25s linear;
-webkit-transition-delay: .5s;
-o-transition-delay: .5s;
transition-delay: .5s;
visibility: hidden;
width: 285px;
z-index: 1; }
.login-popdown.open {
display: block;
visibility: visible; }
.login-popdown h3 {
background-color: #fbaa29;
color: #243044;
font-family: "Humanist", sans-serif;
font-weight: 700;
height: 46px;
padding: 15px;
position: relative;
text-transform: none; }
.login-popdown h3:before {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-bottom: 15px solid #fbaa29;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
content: '';
display: block;
height: 0;
top: -15px;
width: 0; }
.login-popdown h3 img {
display: inline-block;
margin-right: 10px;
position: relative;
top: -2px;
vertical-align: middle; }
.login-popdown p {
font-size: 12px;
font-size: 0.75rem;
color: #243044;
margin-bottom: 12px; }
.login-popdown .header_login {
padding: 0 12px 12px;
text-align: left; }
.login-popdown .header_login .ll-form-row {
margin-bottom: 12px; }
.login-popdown .header_login .ll-form-row:last-of-type {
margin-bottom: 5px; }
.login-popdown .header_login .ll-form-row input,
.login-popdown .header_login .ll-form-row button {
border-radius: 4px;
width: 100%; }
.login-popdown .header_login .ll-form-row input {
background-color: #f4f4f4;
-webkit-box-shadow: inset 0 0 1px 1px rgba(181, 181, 181, 0.1);
box-shadow: inset 0 0 1px 1px rgba(181, 181, 181, 0.1); }
.login-popdown .header_login .ll-label {
font-size: 12px;
font-size: 0.75rem;
color: #243044;
font-weight: 700;
padding-bottom: 10px; }
.login-popdown .header_login .btn {
position: relative;
width: 100%; }
.login-popdown ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%; }
.login-popdown ul li {
font-size: 12px;
font-size: 0.75rem;
border-radius: 4px;
width: 100%; }
.login-popdown ul li:first-of-type a {
border-bottom: 1px solid #c5c8cf; }
.login-popdown ul li a {
color: #243044;
display: block;
margin: 0 10px;
padding: 12px 0; }
.login-popdown ul li:hover a {
text-decoration: underline; }
@media only screen and (min-width: 47.5em) {
.site-header {
min-height: 115px; }
.logo img {
max-width: 220px; }
.head-bits > li.contact {
display: inline-block; } }
@media only screen and (min-width: 60em) {
.search-form-mobile,
.store-locate {
display: none !important; }
.site-header {
border-bottom: 2px solid #f3a528;
padding: 12px 0 0;
position: relative !important; }
.site-header.ll-active .logo {
height: auto;
max-height: 64px;
opacity: 1;
overflow: auto;
padding: 10px 0; }
.site-header .wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 15px; }
.secure .secure-msg {
float: right; }
.menu-trigger {
display: none;
margin: 0; }
.logo {
border-top: 0;
display: inline;
width: 330px; }
.logo img {
max-width: 330px; }
.head-bits {
background-color: transparent;
border: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
float: right;
padding: 0;
position: relative; }
.head-bits > li {
margin-right: 14px; }
.head-bits > li:last-child {
margin-right: 0; }
.head-bits > li.search {
display: none; }
.head-bits > li.search.showing-form:after, .head-bits > li.map.showing-form:after {
display: none; }
.head-bits > li.header-search {
display: inline-block;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.head-bits > li.header-search :-ms-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
.head-bits > li.header-search ::-ms-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
.head-bits > li.header-search ::-webkit-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
.head-bits > li.header-search ::-moz-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
opacity: 1;
text-transform: none; }
.head-bits > li.header-search .search-trigger {
background-color: #f6f6f6;
border-radius: 4px;
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
border: 0;
-webkit-box-shadow: inset 0 0 1px 1px rgba(181, 181, 181, 0.1);
box-shadow: inset 0 0 1px 1px rgba(181, 181, 181, 0.1);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 45px;
padding: 0 15px; }
.lt-ie9 .head-bits > li.header-search .search-trigger {
min-height: 18px; }
.head-bits > li.header-search .btn {
background-color: #fbaa29;
border: 0;
border-radius: 4px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -3px;
padding: 0 5px; }
.head-bits > li.header-search .btn:hover {
background-color: #fba010; }
.head-bits > li.header-search .btn .header-icon {
vertical-align: middle;
width: 40px; }
.head-bits > li.basket .item-count {
right: -10px;
top: -5px; }
.head-bits > li a .icon-text {
color: #243044; } }
@media screen and (min-width: 1280px) {
.site-header .head-bits > li {
margin-right: 34px; }
.site-header .head-bits > li:last-child {
margin-right: 10px; } }
/**
@new 2017 navigation
---------------------------------------------------------
modules/_navigation.scss
--------------------------------------------------------
------------------------------------------------------ */
/**
* The mobile navigation
*/
body.menu-active,
html.menu-active {
height: 100%;
overflow: hidden; }
.mobile-nav {
background: rgba(61, 61, 61, 0.75);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 107px;
-webkit-transition: visibility 0s linear .3s;
-o-transition: visibility 0s linear .3s;
transition: visibility 0s linear .3s;
visibility: hidden;
z-index: 1000; }
.mobile-nav > ul {
-webkit-overflow-scrolling: touch;
background-color: #fff;
bottom: auto;
left: 0;
max-width: 100%;
overflow-y: auto;
position: absolute;
top: 0;
-webkit-transform: translate(-100%, 0%);
-ms-transform: translate(-100%, 0%);
transform: translate(-100%, 0%);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
width: 100%;
z-index: 1001; }
.mobile-nav > ul > li {
background-color: #fff;
display: block;
z-index: 1010; }
.mobile-nav > ul > li:first-child {
display: block;
position: relative;
z-index: 1010; }
.mobile-nav > ul > li.advice {
background-color: #f6f6f6; }
.mobile-nav > ul > li a {
font-size: 13px;
font-size: 0.8125rem;
border-bottom: 1px solid #ccc;
color: #243044;
display: block;
font-family: "HumanistBold", sans-serif;
line-height: 1.4;
opacity: 1;
padding: 15px 10px;
position: relative;
text-decoration: none;
z-index: 1010; }
.mobile-nav > ul > li a .dropdown-arrow-icon {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
fill: #243044;
height: 12px;
right: 10px;
width: 25px; }
.mobile-nav > ul > li .expand-nav + .subnav {
max-height: 0;
opacity: 0;
-webkit-transition: visibility .25s linear, max-height .25s ease-in-out;
-o-transition: visibility .25s linear, max-height .25s ease-in-out;
transition: visibility .25s linear, max-height .25s ease-in-out;
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
visibility: hidden;
z-index: 1002; }
.mobile-nav > ul > li .expand-nav + .subnav .subnav-container {
-webkit-overflow-scrolling: touch;
background-color: #fff;
max-width: 100%;
overflow-y: auto;
padding: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform .25s ease-in;
transition: -webkit-transform .25s ease-in;
-o-transition: transform .25s ease-in;
transition: transform .25s ease-in;
transition: transform .25s ease-in, -webkit-transform .25s ease-in;
width: 100%;
z-index: 1003; }
.mobile-nav > ul > li .expand-nav + .subnav h4 {
font-size: 16px;
font-size: 1rem;
font-weight: 300;
margin: 0;
text-transform: none; }
.mobile-nav > ul > li .expand-nav + .subnav h4 a {
color: #464646;
display: block;
font-family: "Humanist", sans-serif;
padding: 12px 20px;
text-decoration: none;
text-transform: none;
text-align: left; }
.mobile-nav > ul > li .expand-nav + .subnav h4 a .dropdown-arrow-icon {
fill: #243044;
height: 43px;
margin-top: -21.5px;
position: absolute;
right: 10px;
-webkit-transform: rotate(0) translateY(0);
-ms-transform: rotate(0) translateY(0);
transform: rotate(0) translateY(0);
-webkit-transition: -webkit-transform .25s ease-in-out;
transition: -webkit-transform .25s ease-in-out;
-o-transition: transform .25s ease-in-out;
transition: transform .25s ease-in-out;
transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
width: 25px; }
.mobile-nav > ul > li .expand-nav + .subnav h4 a:hover {
background-color: #ebebeb; }
.mobile-nav > ul > li .expand-nav + .subnav h4 a:hover .dropdown-arrow-icon.clicked {
-webkit-transform: rotate(180deg) translateY(0);
-ms-transform: rotate(180deg) translateY(0);
transform: rotate(180deg) translateY(0); }
.mobile-nav > ul > li .expand-nav + .subnav ul {
background-color: #fff;
list-style: none;
margin: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
-webkit-transform: all .3s ease-out;
-ms-transform: all .3s ease-out;
transform: all .3s ease-out; }
.mobile-nav > ul > li .expand-nav + .subnav ul.active {
border-bottom: 1px solid #ccc;
max-height: 1000px;
opacity: 1;
padding: 10px 0; }
.mobile-nav > ul > li .expand-nav + .subnav ul li {
padding: 0 20px; }
.mobile-nav > ul > li .expand-nav + .subnav ul li a {
border: 0;
font-family: "Humanist", sans-serif;
text-decoration: none; }
.mobile-nav > ul > li .expand-nav + .subnav ul li a .caret {
display: none; }
.mobile-nav > ul > li .expand-nav + .subnav li a {
font-size: 14px;
font-size: 0.875rem;
color: #000;
display: block;
line-height: 24px;
padding: 2px 0; }
.mobile-nav.active {
overflow-y: scroll;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
visibility: visible; }
.mobile-nav.active > ul {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%); }
.mobile-nav.active > ul > li .expand-nav.active {
background-color: #243044;
color: #fff; }
.mobile-nav.active > ul > li .expand-nav.active + .subnav {
max-height: 9999px;
opacity: 1;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
visibility: visible; }
.mobile-nav.active > ul > li .expand-nav.active + .subnav .subnav-container {
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%); }
.mobile-nav.active > ul > li .expand-nav.active .caret {
background: url(/assets/images/icons/2017/arrow-up.png) no-repeat; }
@media screen and (min-width: 47.5em) {
.mobile-nav {
top: 115px; }
.mobile-nav > ul {
bottom: 0; } }
@media screen and (min-width: 60em) {
.nav {
background-color: #243044;
border: 0;
margin-top: 12px; }
.nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around; }
.nav > ul > li {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.nav > ul > li:first-child i,
.nav > ul > li:first-child .nav-icon {
font-size: 22px;
font-size: 1.375rem;
position: relative;
top: -1px; }
.nav > ul > li:not(:first-child):not(.nodropdown) > a {
cursor: default; }
.nav > ul > li > a {
font-size: 14px;
font-size: 0.875rem;
color: #fff;
padding: 0 20px;
text-align: center;
text-transform: none; }
.nav .nav-icon {
fill: #fff;
height: 25px;
vertical-align: middle;
width: 25px; }
.advice-inspiration {
background-color: #f7f7f7;
-ms-flex-preferred-size: 18%;
flex-basis: 18%; }
.advice-inspiration .menu-column {
border: 0; }
.advice-inspiration .menu-column ul > li > a:after {
bottom: 10px !important;
height: auto !important;
top: auto !important;
-webkit-transform: translate(0) !important;
-ms-transform: translate(0) !important;
transform: translate(0) !important; }
.menu-column {
margin: 15px 0 30px;
padding: 0 15px 0 20px; }
.menu-column:not(:nth-child(4n)) {
border-right: 1px dashed #e7e6e2; }
.menu-column h4 {
color: #243044;
margin-bottom: 6px;
text-transform: none; }
.menu-column h4:hover a {
color: #364865; }
.menu-column h4 a {
font-family: "HumanistBold", sans-serif;
font-size: .9rem;
text-decoration: none; }
.menu-column .two-columns {
-webkit-column-count: 2;
column-count: 2; } }
@media screen and (min-width: 1220px) {
.advice-inspiration {
-ms-flex-preferred-size: 14%;
flex-basis: 14%; } }
/**
* lakeland brand messages, to sit at the top of every page
* Carousel on mobile and tablet, then 4 across on desktop
*/
.brand-usps {
background-color: #fff;
-webkit-box-shadow: 0 -15px 15px 12px rgba(0, 0, 0, 0.45);
box-shadow: 0 -15px 15px 12px rgba(0, 0, 0, 0.45);
line-height: 1.6;
position: relative;
z-index: 9; }
.brand-usps li {
font-size: 14px;
font-size: 0.875rem;
display: inline;
font-family: "HumanistBold", sans-serif;
text-align: center; }
.brand-usps li:hover a {
background-color: #f7f7f7; }
.brand-usps li a {
display: block;
overflow: visible;
padding: 8px 0;
position: relative;
text-decoration: none; }
.brand-usps li .usp-icon {
display: inline-block;
fill: #fbaa29;
height: 22px;
margin-right: 8px;
width: 25px; }
.brand-usps li p {
display: inline-block;
margin: 0; }
.brand-usps li p span {
display: inline-block;
font-family: "DearJoe", sans-serif;
line-height: 1; }
.brand-usps li i {
font-size: 26px;
font-size: 1.625rem;
color: #fbaa29;
display: inline-block; }
.brand-usps .wrapper {
padding: 0; }
.usp-info {
font-size: 12px;
font-size: 0.75rem;
background-color: #f7f7f7;
border-top: 2px solid #fbaa29;
padding: 10px 20px;
position: absolute;
z-index: 10; }
@media screen and (min-width: 60em) {
.brand-usps li {
font-size: 12px;
font-size: 0.75rem; }
.brand-usps li p {
position: relative;
top: 1px; }
.brand-usps .ll-slider-container {
margin-left: auto;
margin-right: auto;
max-width: 1100px; } }
@media screen and (min-width: 1024px) {
.brand-usps li {
font-size: 13px;
font-size: 0.8125rem; } }
@media screen and (min-width: 86.375em) {
.brand-usps li {
font-size: 14px;
font-size: 0.875rem; } }
/**
@new 2017 footer
---------------------------------------------------------
modules/_footer.scss
--------------------------------------------------------
------------------------------------------------------ */
.newsletter-signup {
background: #ebebeb;
text-align: center;
margin-top: 15px; }
.newsletter-signup h3 {
font-size: 22px;
font-size: 1.375rem;
font-family: "AbrilReg", sans-serif;
margin-bottom: 5px;
text-transform: none; }
.newsletter-signup p {
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 10px; }
.newsletter-signup .newsletter-form {
margin-top: 15px; }
.newsletter-signup .newsletter-form select {
font-size: 13px;
font-size: 0.8125rem; }
.newsletter-signup .newsletter-form select option {
font-size: 16px;
font-size: 1rem; }
.newsletter-signup .wrapper {
color: #243044;
padding: 15px 10px; }
.newsletter-signup .newsletter-signup_toggle {
font-size: 14px;
font-size: 0.875rem;
background-color: transparent;
border-radius: 4px;
border: 1px solid #243044;
color: #243044;
line-height: inherit;
max-height: 45px;
padding: 11px 15px;
text-transform: none; }
.newsletter-signup .newsletter-signup_toggle:active {
background-color: #fbaa29;
border-color: #fbaa29; }
.newsletter-signup .newsletter-signup_toggle svg {
fill: #243044;
float: left;
height: 18px;
margin-right: 12px;
width: 23px; }
.newsletter-signup .newsletter-form_field {
margin-top: 15px; }
.newsletter-signup .newsletter-form_field :-ms-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
.newsletter-signup .newsletter-form_field ::-ms-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
.newsletter-signup .newsletter-form_field ::-webkit-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
.newsletter-signup .newsletter-form_field ::-moz-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #243044 !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
opacity: 1;
text-transform: none; }
.newsletter-signup .newsletter-form_field input,
.newsletter-signup .newsletter-form_field select {
background-color: #fff;
border-radius: 4px;
border: 0;
-webkit-box-shadow: none;
box-shadow: none; }
.newsletter-signup .newsletter-form_submit {
background-color: transparent; }
.newsletter-signup .newsletter-form_submit .btn {
font-size: 14px;
font-size: 0.875rem;
background-color: #458f29;
border-radius: 4px;
border: 0;
line-height: inherit;
max-height: 45px;
padding: 11px 15px;
text-transform: none; }
.newsletter-signup .newsletter-form_submit .btn svg {
fill: #fff;
float: left;
height: 18px;
margin-right: 12px;
width: 23px; }
.footer {
background: #464646;
clear: both;
padding: 22.5px 0 70px;
position: relative;
/**
* The middle-east footer
*/
/**
* The Germany footer
*/ }
.footer.footer-sitedown {
padding-top: 0; }
.footer.footer-sitedown .copyright {
display: block; }
.footer.footer-secure {
margin-top: 24px;
padding-bottom: 0; }
.footer.footer-secure .footer-list {
text-align: center; }
.footer.footer-secure .footer-list li {
float: none;
width: auto; }
.footer.footer-secure .cards {
margin-bottom: 13px; }
.footer.footer-secure .cards .address {
font-size: 10px;
font-size: 0.625rem;
color: #f7f7f7;
display: block;
margin-top: 5px; }
.footer.footer-secure .phone {
font-size: 16px;
font-size: 1rem;
color: #fff;
letter-spacing: 0; }
.footer.footer-secure .phone .footer-icon {
vertical-align: middle; }
.footer .footer-list {
list-style: none;
margin: 0;
padding: 0; }
.footer .footer-list li {
float: left;
padding-bottom: 10px;
position: relative;
width: 50%; }
.footer .footer-list li .footer-icon {
fill: #fbaa29;
height: 25px;
margin-right: 5px;
width: 20px;
vertical-align: middle; }
.footer .footer-list li a {
color: #fff;
text-decoration: none; }
.footer .footer-list li.contact {
position: relative; }
.footer .footer-list li.contact .footer-icon {
width: 25px; }
.footer .footer-list li.contact .note {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -50px;
color: #fff;
display: none;
width: 156px; }
.footer .footer-list li.contact .note:before {
background-image: url(/assets/images/icons/2017/arrow-right-top.png);
content: '';
display: inline-block;
height: 51px;
left: -35px;
position: absolute;
top: -30px;
width: 37px; }
.footer .social-links {
margin-top: 7.5px;
text-align: center; }
.footer .social-links li {
margin: 0 7px; }
.footer .social-links img {
height: 28px;
width: 28px; }
.footer .show-footer-links {
border: 1px solid #fff;
display: block;
margin-bottom: 15px;
padding: 15px;
width: 100%; }
.footer .show-footer-links a {
color: #fff;
display: block;
position: relative;
text-decoration: none; }
.footer .show-footer-links a:after {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-image: url(/assets/images/icons/2017/arrow-down.png);
content: '';
display: inline-block;
height: 12px;
right: 0;
width: 21px; }
.footer .show-footer-links a.ll-toggled:after {
background-image: url(/assets/images/icons/2017/arrow-up.png); }
.footer .further-footer-links li {
float: none;
text-align: center;
width: 100%; }
.footer .phone,
.footer .cards,
.footer .secure {
line-height: 51px;
text-align: center; }
.footer .phone > img,
.footer .cards > img,
.footer .secure > img {
vertical-align: middle; }
.footer .cards {
line-height: inherit; }
.footer .secure {
display: none; }
.footer.me {
padding-bottom: 2em; }
.footer.me [role="contentinfo"] {
margin-bottom: 0; }
.footer.me .m-mobile {
margin-top: 30px; }
.footer.me .m-mobile a {
display: block; }
.footer.me .list-inline {
margin-bottom: 0; }
.footer.me .social-links {
position: static; }
.footer.de .de-list {
counter-reset: de-counter;
list-style: none;
margin: 0 0 15px;
padding: 0; }
.footer.de .de-list li {
font-size: 18px;
font-size: 1.125rem;
color: #243044;
margin-top: 15px;
min-height: 48px;
padding: 4px 0 10px 64px;
position: relative; }
.footer.de .de-list li:before {
font-size: 38px;
font-size: 2.375rem;
border: 2px solid #243044;
border-radius: 50%;
content: counter(de-counter);
counter-increment: de-counter;
left: 0;
padding: 12px;
position: absolute;
top: 0; }
.footer.de .de-list li:first-child {
margin-top: 0; }
.footer.de .dhl > img {
float: right;
margin-left: 45px; }
.footer.de .dhl p {
font-size: 14px;
font-size: 0.875rem; }
.cookies-consent {
background-color: #243044;
color: #fff;
padding: 15px;
text-align: center; }
.cookies-consent.not-consented {
background-color: rgba(36, 48, 68, 0.97);
position: fixed;
bottom: 0;
width: 100%;
z-index: 2001; }
.cookies-consent.consented {
background-color: #464646;
border-top: 1px solid #636363;
font-size: 12px;
font-size: 0.75rem; }
.cookies-consent p {
color: #fff; }
.cookies-consent a {
color: #fff;
text-decoration: underline; }
.cookies-consent a:hover {
text-decoration: none; }
.cookies-consent .btn-consent {
background-color: #fbaa29;
color: #333;
font-weight: bold;
text-decoration: none; }
.cookies-consent .btn-consent:hover {
color: #333;
background-color: #ed9304; }
.back-to-top {
font-size: 12px;
font-size: 0.75rem;
background-color: #fbaa29;
border-radius: 50%;
bottom: -60px;
-webkit-box-shadow: 2px 3px 32px -9px rgba(0, 0, 0, 0.8);
box-shadow: 2px 3px 32px -9px rgba(0, 0, 0, 0.8);
color: #243044;
display: block;
height: 48px;
opacity: 0;
position: fixed;
right: 15px;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: bottom .4s ease, opacity .3s ease;
-o-transition: bottom .4s ease, opacity .3s ease;
transition: bottom .4s ease, opacity .3s ease;
width: 48px; }
.back-to-top:before {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-image: url(/assets/images/icons/2017/arrow-up-dark.png);
content: '';
display: block;
height: 12px;
top: 9px;
width: 21px; }
.back-to-top:hover {
color: #243044; }
.back-to-top p {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -10px; }
.back-to-top.showing {
bottom: 14px;
opacity: 1; }
@media screen and (min-width: 47.5em) {
.footer-list {
text-align: center; }
.newsletter-signup {
margin-top: 15px; }
.newsletter-signup .wrapper {
margin: 0 auto;
max-width: 65%; }
.newsletter-signup .newsletter-form_submit .btn {
margin-top: 15px; } }
@media screen and (min-width: 60em) {
.newsletter-form {
margin-bottom: 30px; }
.newsletter-signup {
text-align: left; }
.newsletter-signup h3 {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 8px; }
.newsletter-signup .wrapper {
max-width: 1310px;
padding: 12px 15px 5px; }
.newsletter-signup [class*="dts-"] {
margin-left: 9px; }
.newsletter-signup .newsletter-right {
text-align: center; }
.newsletter-signup .newsletter-signup_toggle {
margin-top: 15px; }
.newsletter-signup .newsletter-form_field input {
width: 100%; }
.newsletter-signup .newsletter-form_submit {
text-align: center; }
.newsletter-signup .newsletter-form_submit .btn {
width: auto; }
.newsletter-signup .newsletter-image {
position: relative;
width: auto; }
.newsletter-signup .newsletter-image .note {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
max-width: 80px;
right: -85px; }
.newsletter-signup .newsletter-image .note:before {
background-image: url(/assets/images/icons/2017/arrow-left-top.png);
content: '';
display: inline-block;
height: 19px;
left: -70px;
position: absolute;
top: 0;
width: 55px; }
.footer {
padding: 22.5px 0 0; }
.footer.footer-secure {
padding: 15px 0 0; }
.footer.footer-secure .footer-list {
padding-top: 4px;
text-align: left; }
.footer .footer-list {
padding-left: 0;
text-align: left; }
.footer .footer-list li {
display: inline;
padding-bottom: 0;
text-align: left; }
.footer .footer-list li.contact {
float: right;
text-align: right;
width: auto; }
.footer .footer-list li .footer-icon {
position: relative;
top: -3px;
vertical-align: middle; }
.footer .social-links {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
margin-top: 0;
top: 20px; }
.footer .social-links li {
margin: 0 10px; }
.footer .cards {
float: left;
line-height: initial; }
.footer .further-footer-links {
display: block !important;
margin: 15px 0 22.5px;
text-align: center;
visibility: visible !important; }
.footer .further-footer-links li {
font-size: 12px;
font-size: 0.75rem;
display: inline;
margin: 0 5px;
position: relative; }
.footer .further-footer-links li:after {
color: #fff;
content: '|';
display: inline-block;
height: 100%;
margin-left: 6px;
width: 1px; }
.footer .further-footer-links li:last-child:after {
display: none; }
.footer .further-footer-links li a:hover {
text-decoration: underline; } }
@media screen and (min-width: 1120px) {
.footer .footer-list li.contact .note {
display: inline-block;
left: auto;
right: 90%;
top: 0; }
.footer .footer-list li.contact .note:before {
background-image: url(/assets/images/icons/2017/arrow-right.png);
height: 27px;
left: 105%;
top: 0;
width: 48px; } }
@media screen and (min-width: 1280px) {
.newsletter-signup [class*="dtl-"] {
margin-left: 0; }
.newsletter-signup h3 {
margin-top: 10px; }
.newsletter-signup .newsletter-image .note {
right: -50px; } }
@media screen and (min-width: 86.375em) {
.newsletter-signup .newsletter-right {
margin-left: 0; }
.footer .footer-list li .footer-icon {
height: 39px; } }
/* Secondary Modules ============================================================= */
.mini-basket-overlay {
content: '';
display: block;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000;
opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); }
.mini-basket-added {
border-radius: 4px;
border: 1px solid #ebebeb;
background-color: white;
position: fixed;
width: 50%;
right: calc(125% - 100%);
top: 88px;
max-height: calc(100% - 160px);
overflow-y: auto; }
.mini-basket-added:before {
border: none; }
.mini-basket-added .mini-header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: none;
text-align: right;
height: 74px;
position: relative;
margin-top: 12px;
padding: 12px; }
.mini-basket-added .mini-header h3 {
float: right;
margin-right: 15px;
margin-bottom: 0;
width: 100%;
text-align: center;
font-size: 1.3rem;
font-family: "Humanist",sans-serif;
color: #464646; }
.mini-basket-added .mini-header h3 .header-icon {
display: inline-block;
float: none;
width: 20px;
height: 20px;
vertical-align: bottom;
margin-right: 5px;
fill: #458f29; }
.mini-basket-added .mini-header .close-basket {
position: absolute;
right: 12px;
top: 0;
width: 15px;
height: 15px; }
.mini-basket-added .mini-header .close-basket:hover {
cursor: pointer; }
.mini-basket-added ul {
padding: 0; }
.mini-basket-added ul li {
padding: 12px;
margin: 12px;
display: block;
border: 1px solid #ebebeb;
border-radius: 4px; }
.mini-basket-added ul li:after {
clear: both;
content: '';
display: table; }
.mini-basket-added ul li .product-details {
width: calc(100% - 92px);
font-family: "HumanistReg", sans-serif;
color: #464646; }
.mini-basket-added ul li .product-details .product-name,
.mini-basket-added ul li .product-details .quantity,
.mini-basket-added ul li .product-details .unit-price {
margin: 29px 0;
display: inline-block; }
.mini-basket-added ul li .product-details .product-name {
text-align: left;
font-weight: 300;
width: calc(50% - 12px);
float: left;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
padding-left: 12px; }
.mini-basket-added ul li .product-details .quantity {
width: 25%;
text-align: center; }
.mini-basket-added ul li .product-details .quantity .item-counter {
font-weight: 700; }
.mini-basket-added ul li .product-details .unit-price {
width: 25%;
text-align: right; }
.mini-basket-added ul li .product-details .unit-price .product-price {
font-weight: 700;
color: #d0021b;
border: none; }
.mini-basket-added .mini-actions {
width: 80%;
margin: auto; }
.mini-basket-added .mini-actions .btn {
margin-top: 12px;
font-family: "HumanistBold", sans-serif; }
.mini-basket-added .mini-actions .btn svg {
float: none; }
.mini-basket-added .mini-actions .view-basket {
border: 1px solid #458f29; }
.mini-basket-added .mini-actions .view-basket span {
color: white; }
.mini-basket-added .mini-actions .btn-secondary--inverted {
color: #464646;
border-color: #464646; }
.mini-basket-added .mini-actions .btn-secondary--inverted svg {
fill: #464646; }
.mini-basket-added .mini-actions .btn-secondary--inverted:hover {
border-color: #fbaa29; }
.mini-basket-added .mini-actions .btn-secondary--inverted:hover span {
color: white; }
.mini-basket-added .mini-actions .btn-secondary--inverted:hover svg {
fill: white; }
.mini-basket-added #add-to-basket-rr {
margin: 12px;
border-color: #ebebeb;
min-height: 371px; }
.mini-basket-added #add-to-basket-rr li.product-item {
border: none;
max-width: inherit !important;
width: calc(100% / 4 - 9px); }
.mini-basket-added #add-to-basket-rr li.product-item:last-child {
margin-right: 0; }
.mini-basket-added #add-to-basket-rr li.product-item .options {
border-color: #ebebeb; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit] {
font-family: 'HumanistReg', sans-serif; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit] span {
color: #458f29; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit] span svg {
fill: white;
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 5px; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit].outline-btn {
color: #458f29;
background: white;
border: 1px solid #458f29;
font-family: 'HumanistBold', sans-serif; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit].outline-btn span svg {
fill: #458f29; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit].outline-btn span svg path {
stroke: #458f29; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit].outline-btn:hover {
color: white;
background: #458f29;
border: 1px solid #458f29;
font-family: 'HumanistBold', sans-serif; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit].outline-btn:hover span {
color: white; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit].outline-btn:hover svg {
fill: white; }
.mini-basket-added #add-to-basket-rr li.product-item #addToBasket button[type=submit].outline-btn:hover svg path {
stroke: white; }
#ll-icon-loader {
enable-background: new 0 0 50 50;
margin-right: 10px; }
#ll-icon-loader path {
fill: none;
stroke: white;
stroke-width: 4;
stroke-linejoin: round;
stroke-linecap: round;
stroke-miterlimit: 10; }
#ll-tick-circle {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
margin-right: 15px; }
#ll-tick-circle .circ {
opacity: 0;
stroke-dasharray: 130;
stroke-dashoffset: 130;
-webkit-transition: all .7s;
-moz-transition: all .7s;
-ms-transition: all .7s;
-o-transition: all .7s;
transition: all .7s; }
#ll-tick-circle .tick {
stroke-dasharray: 50;
stroke-dashoffset: 50;
-webkit-transition: stroke-dashoffset .7s .7s ease-out;
-moz-transition: stroke-dashoffset .7s .7s ease-out;
-ms-transition: stroke-dashoffset .7s .7s ease-out;
-o-transition: stroke-dashoffset .7s .7s ease-out;
transition: stroke-dashoffset .7s .7s ease-out; }
.drawn > svg .path {
opacity: 1 !important;
stroke-dashoffset: 0 !important; }
@media screen and (max-width: 32.438em) {
.mini-basket-added {
width: 90%;
height: 100%;
max-height: none;
right: 0;
top: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.mini-basket-added .mini-header {
height: 120px;
padding-top: 0; }
.mini-basket-added .mini-header h3 {
margin-right: 0;
font-family: "HumanistReg", sans-serif;
font-size: 1rem; }
.mini-basket-added .mini-header h3 #ll-tick-circle {
display: block;
margin: auto;
margin-bottom: 12px; }
.mini-basket-added .mini-actions {
width: 100%;
padding: 12px; }
.mini-basket-added .mini-actions .close-basket {
margin-bottom: 12px; }
.mini-basket-added ul li .product-details .product-name,
.mini-basket-added ul li .product-details .quantity,
.mini-basket-added ul li .product-details .unit-price {
margin: 0;
display: block;
width: 100%;
text-align: left;
padding-left: 12px; }
.mini-basket-added ul li .product-details .quantity {
margin-top: 12px; }
.mini-basket-added #add-to-basket-rr li.product-item {
width: -webkit-calc(100% / 2 - 6px); }
.mini-basket-added #add-to-basket-rr li.product-item:nth-child(2) {
margin-right: 0; } }
@media screen and (min-width: 47.5em) {
.mini-basket-added {
width: 90%;
right: calc(105% - 100%); }
.mini-basket-added .mini-actions {
padding: 12px; }
.mini-basket-added .mini-actions .close-basket {
margin-bottom: 12px; } }
@media screen and (min-width: 60em) {
.mini-basket-added {
width: 80%;
right: calc(110% - 100%); } }
@media screen and (min-width: 86.375em) {
.mini-basket-added {
width: 50%;
right: calc(125% - 100%); } }
.loyalty-scheme-subscription .loyalty-scheme-inner {
border-bottom: 1px solid #d7d7d7;
padding: 15px; }
.loyalty-scheme-subscription .loyalty-scheme-inner:last-child {
border-bottom: none; }
.loyalty-scheme-subscription .loyalty-scheme-inner #ManageSubscriptions {
width: 90%;
margin: 0 auto; }
.loyalty-scheme-subscription .loyalty-scheme-inner #ManageSubscriptions .checkout-section--preferences {
width: 48%;
float: left;
margin-left: 2%;
margin-bottom: 15px; }
.loyalty-scheme-subscription .loyalty-scheme-inner #ManageSubscriptions .checkout-section--preferences:nth-child(odd) {
margin-left: 0; }
.loyalty-scheme-subscription .loyalty-scheme-inner #ManageSubscriptions .not-loyalty-member .checkout-section--preferences {
width: 100%; }
.loyalty-scheme-subscription .vip-cta {
background-color: #1b2d45;
border: 1px solid #e7e7e7; }
.loyalty-scheme-subscription .vip-cta .consent-privacy p,
.loyalty-scheme-subscription .vip-cta .consent-privacy a,
.loyalty-scheme-subscription .vip-cta .loyalty-tnc {
color: white; }
.loyalty-scheme-subscription .vip-cta .consent-privacy {
padding: 0 15px 15px;
margin-top: 0; }
.loyalty-scheme-subscription .vip-cta .consent-privacy .js-toggles > p {
margin-bottom: 0;
font-size: 14px; }
.loyalty-scheme-subscription .vip-cta .consent-privacy .loyalty-tnc {
font-size: 14px;
text-align: left;
margin-top: 15px;
border-top: 1px solid #142133; }
.loyalty-scheme-subscription .vip-cta .consent-privacy .loyalty-tnc ol {
padding-left: 15px;
margin-bottom: 0; }
.loyalty-scheme-subscription .vip-cta .consent-privacy .loyalty-tnc ol li a {
background: none;
text-decoration: underline; }
.loyalty-scheme-subscription .vip-cta .consent-privacy .loyalty-tnc ol li a:hover {
text-decoration: none; }
.loyalty-scheme-subscription .vip-cta .consent-privacy .loyalty-tnc p {
margin-top: 15px;
margin-bottom: 0; }
#receiveMobile-footnote p,
#loyaltyMobile-footnote p {
position: relative; }
#receiveMobile-footnote p input[type=tel],
#loyaltyMobile-footnote p input[type=tel] {
margin-top: 15px; }
#receiveMobile-footnote p #subscriptionData_mobile-error,
#receiveMobile-footnote p #loyaltyData_mobile-error,
#loyaltyMobile-footnote p #subscriptionData_mobile-error,
#loyaltyMobile-footnote p #loyaltyData_mobile-error {
top: 105px; }
input[name=sendMeCataloguesButton],
input[name=redirectToAddressBookButton] {
width: 45% !important;
float: left; }
input[name=sendMeCataloguesButton] {
margin-right: 15px; }
#open-registration .ll-form input[type="text"],
#open-registration .ll-form input[type="password"],
#open-registration .ll-form select,
#open-registration .ll-form input[type="number"],
#open-registration .ll-form input[type="email"],
#open-registration .ll-form input[type="tel"] {
border-color: #a1a1a1; }
#open-registration .ll-form.ll-form-full .ll-form-row, #open-registration .ll-form .ll-form-full .ll-form-row {
max-width: 100%; }
#open-registration form[name="RegisterUser"] {
max-width: 50%;
margin: auto; }
#open-registration .ll-form-row.dob input {
float: none;
display: inline-block; }
#open-registration .passStrengthify {
display: none !important; }
#open-registration .address {
position: relative;
margin-bottom: 0; }
#open-registration .address .label {
position: absolute;
top: 13px; }
#open-registration .postcode-results {
max-width: 100%;
width: 100%;
border-radius: 4px;
float: right; }
#open-registration .ll-form-help-block {
margin-top: 8px;
text-decoration: underline; }
#open-registration .ll-form-help-block:hover {
text-decoration: none; }
#open-registration #loyalty-already-member-statement {
padding-bottom: 30px; }
#open-registration #loyalty-already-member-statement h2 {
color: #7a7870; }
.my-account #already-registered-message {
margin-top: 8px;
color: red; }
.my-account #already-registered-message a {
text-decoration: underline;
color: red; }
.my-account #already-registered-message a:hover {
text-decoration: none; }
.my-account input[type="submit"]:disabled {
background-color: #7a7870;
border: 1px solid #7a7870;
border-color: #7a7870;
cursor: not-allowed; }
.post-signup h1 {
text-transform: none; }
#post-signup-prefereneces {
margin: auto 0; }
#post-signup-prefereneces .checkout-section--preferences {
width: 33.3333%;
float: left; }
#post-signup-prefereneces .checkout-section--preferences:after {
clear: both; }
#post-signup-prefereneces .checkout-section--preferences h2 {
font-size: 1.25rem; }
#post-signup-prefereneces .checkout-section--preferences span.ll-form-danger {
position: absolute;
width: 100%;
padding: 0 !important; }
#post-signup-prefereneces .loyalty-member {
margin-top: 0; }
@media only screen and (max-width: 60em) {
.loyalty-scheme-subscription .vip-cta {
width: 100%; }
input[name=sendMeCataloguesButton],
input[name=redirectToAddressBookButton] {
width: auto !important;
float: none; }
input[name=sendMeCataloguesButton] {
margin-bottom: 12px; }
#open-registration form[name="RegisterUser"] {
max-width: 100%; } }
@media only screen and (max-width: 47.5em) {
.loyalty-scheme-subscription .loyalty-scheme-inner #ManageSubscriptions {
width: 100%;
margin: 0 auto; }
.loyalty-scheme-subscription .loyalty-scheme-inner #ManageSubscriptions .checkout-section--preferences {
width: 100%;
float: none;
margin-bottom: 30px;
margin-left: 0; }
input[name=sendMeCataloguesButton] {
margin-bottom: 0; }
#post-signup-prefereneces .checkout-section--preferences {
width: 100%;
float: none;
margin-top: 15px; }
#post-signup-prefereneces .checkout-section--preferences:first-of-type {
margin-top: 15px; } }
/* Basket Page ============================================================== */
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* Variables for this section */
/* Include the main product file ============================================ */
/**
* A little fix to the h1
*/
h1 {
line-height: 40px;
margin: 15px 0; }
/**
* The continue shopping link
*/
.btn-white.small {
font-size: 12px;
font-size: 0.75rem; }
/**
* The main submit button(s)
*/
input.basket-submit {
display: block;
margin: 15px 0;
width: 100%; }
/**
* The main basket styles go in here
*/
.basket-head {
clear: both; }
.basket-head > h2 {
background: #fff;
border: 1px solid #dcdcdc;
margin: 0;
padding: 15px;
width: 100%; }
.basket-head .basket-head-nofire,
.basket-head .basket-head-success {
background: #dcdcdc;
font-size: 16px;
font-size: 1rem;
margin: 0;
padding: 15px; }
.basket-head .basket-head-nofire ul,
.basket-head .basket-head-success ul {
list-style: none;
margin: 0;
padding-left: 0; }
.basket-head .basket-head-nofire ul li,
.basket-head .basket-head-success ul li {
margin-top: 15px; }
.basket-head .basket-head-nofire ul li:first-child,
.basket-head .basket-head-success ul li:first-child {
margin-top: 0; }
.basket-head .basket-head-nofire p:last-child,
.basket-head .basket-head-success p:last-child {
margin-bottom: 0; }
.basket-head .basket-head-success {
background: #b6d986;
color: #4f7023; }
.basket-head img {
vertical-align: middle; }
/**
* The main basket
*/
.main-basket,
.totals,
.quick-basket {
border: 1px solid #dcdcdc;
border-bottom-width: 0;
border-collapse: collapse;
margin: 0;
width: 100%; }
.main-basket td, .main-basket th,
.totals td,
.totals th,
.quick-basket td,
.quick-basket th {
border: 1px solid #dcdcdc;
padding: 15px; }
.main-basket td.no-border, .main-basket th.no-border,
.totals td.no-border,
.totals th.no-border,
.quick-basket td.no-border,
.quick-basket th.no-border {
border: 0; }
.main-basket th,
.totals th,
.quick-basket th {
border: 0;
font-size: 12px;
font-size: 0.75rem;
text-transform: uppercase; }
.main-basket th h4,
.totals th h4,
.quick-basket th h4 {
font-size: 14px;
font-size: 0.875rem; }
.main-basket .product-quantity,
.main-basket .product-price,
.main-basket .overall-price,
.totals .product-quantity,
.totals .product-price,
.totals .overall-price,
.quick-basket .product-quantity,
.quick-basket .product-price,
.quick-basket .overall-price {
font-size: 12px;
font-size: 0.75rem;
padding: 15px 5px;
text-align: center;
width: 110px; }
.main-basket .product-unit,
.totals .product-unit,
.quick-basket .product-unit {
display: none;
text-align: center;
width: 100px; }
.main-basket .product-quantity .btn,
.totals .product-quantity .btn,
.quick-basket .product-quantity .btn {
white-space: pre-wrap; }
.main-basket span.quantity,
.totals span.quantity,
.quick-basket span.quantity {
display: block; }
.main-basket span.quantity input,
.totals span.quantity input,
.quick-basket span.quantity input {
border: 1px solid #000;
border-width: 0 1px 1px 1px;
float: left;
height: 42px;
line-height: 42px;
text-align: center;
width: 100%; }
.main-basket span.quantity input:first-child,
.totals span.quantity input:first-child,
.quick-basket span.quantity input:first-child {
border-top-width: 1px; }
.main-basket span.quantity .quantity-amount,
.totals span.quantity .quantity-amount,
.quick-basket span.quantity .quantity-amount {
font-size: 18px;
font-size: 1.125rem; }
.main-basket span.quantity .quantity-update,
.totals span.quantity .quantity-update,
.quick-basket span.quantity .quantity-update {
background-color: #e1e1e1;
font-size: 18px;
font-size: 1.125rem;
font-weight: 700;
padding: 0 6px; }
.main-basket span.quantity .quantity-update:hover,
.totals span.quantity .quantity-update:hover,
.quick-basket span.quantity .quantity-update:hover {
background-color: #ddd; }
.main-basket .product-add,
.totals .product-add,
.quick-basket .product-add {
width: 99%; }
.main-basket .product > a,
.totals .product > a,
.quick-basket .product > a {
margin-bottom: 15px; }
.main-basket .product h3,
.totals .product h3,
.quick-basket .product h3 {
color: #000;
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 7.5px;
text-transform: uppercase; }
.main-basket .product p, .main-basket .product .cta,
.totals .product p,
.totals .product .cta,
.quick-basket .product p,
.quick-basket .product .cta {
font-size: 12px;
font-size: 0.75rem; }
.main-basket .product .sku,
.totals .product .sku,
.quick-basket .product .sku {
margin-bottom: 7.5px;
text-align: left; }
.main-basket .product .cta.green,
.totals .product .cta.green,
.quick-basket .product .cta.green {
text-transform: none; }
.main-basket .product .cta.new,
.totals .product .cta.new,
.quick-basket .product .cta.new {
font-weight: 300;
padding: 2px 5px; }
.main-basket .product .cta.new.show-offer,
.totals .product .cta.new.show-offer,
.quick-basket .product .cta.new.show-offer {
background-color: #D21034;
color: #fff;
cursor: pointer;
font-size: 22px;
font-size: 1.375rem;
padding: 10px;
margin: 0; }
.main-basket .product .no-c-and-c,
.totals .product .no-c-and-c,
.quick-basket .product .no-c-and-c {
color: #717171; }
.main-basket .product .multibuy-available,
.totals .product .multibuy-available,
.quick-basket .product .multibuy-available {
color: #D21034;
font-weight: 700;
text-transform: uppercase; }
.main-basket .product-details,
.totals .product-details,
.quick-basket .product-details {
clear: both; }
.main-basket .product-quantity select,
.totals .product-quantity select,
.quick-basket .product-quantity select {
float: none;
min-width: 100%;
width: auto; }
.main-basket td {
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out; }
.main-basket > tbody > tr:not(.multibuy):hover td {
background-color: #f9f9f9; }
.main-basket td.product-price,
.main-basket td.product-quantity,
.main-basket td.product-unit {
line-height: 42px; }
.main-basket.giftwrap-basket th {
background-color: #eee; }
.main-basket.giftwrap-basket > tbody > tr:hover td {
background-color: #fff; }
/**
* The totals
*/
.totals {
border-top: 0;
table-layout: fixed;
width: 100%; }
.totals tr:first-child th {
border: 0;
border-bottom: 1px solid gainsboro; }
.totals th {
border: 1px solid #dcdcdc;
font-weight: 300; }
.totals th h4 {
font-size: 14px;
font-size: 0.875rem;
font-weight: 700;
margin: 0; }
.totals th p {
text-transform: none;
line-height: 15px; }
.totals th p:last-child {
margin-bottom: 0; }
.totals td {
border-top: 0;
font-size: 12px;
font-size: 0.75rem;
padding: 15px;
text-transform: uppercase; }
.totals .grand-total {
font-weight: 700; }
/**
* This is in case the table overflows the container
*/
.table-surround {
margin-bottom: 60px;
overflow-x: scroll; }
.table-surround .basket-head h2 {
border-top: 0; }
.table-surround::-webkit-scrollbar-track {
background-color: #fff; }
.table-surround::-webkit-scrollbar {
height: 6px;
width: 6px;
background-color: #F5F5F5; }
.table-surround::-webkit-scrollbar-thumb {
background-color: #959595; }
/**
* Multibuy discount heading
*/
.multibuy h4 {
color: #D21034;
font-size: 16px;
font-size: 1rem;
font-weight: 700;
margin: 0; }
.multibuy .cta {
border: 0;
padding: 0; }
/**
* Multibuy products
*/
.multibuys {
margin: 30px 0 15px; }
.multibuy-product {
margin-top: 15px; }
.multibuy-product:first-child {
margin-top: 0; }
.multibuy-product .sku .cta {
display: inline-block;
margin-right: 15px; }
.multibuy-product .sku .cta.save {
color: #D21034;
font-weight: 700; }
/**
* Free gifts
*/
.free-gift {
background-color: #f5f5f5; }
.free-gift td {
border-top-width: 0;
position: relative; }
.free-gift td > h3 {
color: #243044;
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 30px; }
.free-gift td > h3 small {
color: #000; }
.free-gift td:first-child:after, .free-gift td:first-child:before {
bottom: 100%;
left: 60px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none; }
.free-gift td:first-child:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #f5f5f5;
border-width: 22px;
margin-left: -2px; }
.free-gift.no-arrow td:first-child:before,
.free-gift.no-arrow td:first-child:after {
display: none; }
.free-gift.extra-proms img {
max-width: 90px; }
.free-gift.extra-proms .price {
font-size: 18px;
font-size: 1.125rem;
font-weight: 700;
padding-top: 2px; }
/**
* Discounts are a slightly different colour
*/
.discounted td {
background-color: #f1f1f1; }
/**
* Giftwrapping
*/
.giftwrap {
clear: both;
color: #657daf;
margin: 0;
padding-top: 15px; }
.giftwrap a {
text-decoration: none; }
.giftwrap a:hover {
text-decoration: underline; }
.giftwrap img {
margin-right: 10px;
vertical-align: middle; }
/**
* Delete an item from the basket
*/
.basket-delete {
margin: 0; }
.basket-delete a {
color: #b2b2b2;
text-decoration: underline;
text-transform: uppercase; }
/**
* The overall totals and whatnot table
*/
.basket-bottom {
margin-bottom: 15px;
position: relative; }
.basket-bottom .full-guarantee h3 {
margin-bottom: 15px; }
.basket-bottom .full-guarantee h4 {
font-size: 22px;
font-size: 1.375rem; }
.total-container {
margin-top: -66px; }
.total-container h3 {
font-size: 16px;
font-size: 1rem; }
/**
* The voucher addition form
*/
.voucher,
.guarantee {
border: 1px solid #dcdcdc;
margin-top: 30px;
padding: 30px;
position: relative; }
.voucher .v-middle,
.guarantee .v-middle {
margin-right: 10px; }
.voucher .form--horizontal,
.guarantee .form--horizontal {
display: block;
position: relative; }
.voucher input[type="text"],
.guarantee input[type="text"] {
display: inline-block;
height: 44px;
padding: 13px 15px;
width: 100%; }
.voucher input[type="submit"],
.guarantee input[type="submit"] {
height: 44px;
position: absolute;
right: 0;
top: 0; }
.voucher .ll-form-help-block,
.guarantee .ll-form-help-block {
margin-bottom: 0; }
/**
* New expand voucher section
*/
.expand-voucher {
font-size: 16px;
font-size: 1rem;
cursor: pointer;
display: block;
margin: 15px 0 0;
max-width: 500px;
position: relative; }
.expand-voucher input[type="text"] {
display: inline-block;
width: 100%; }
.expand-voucher input[type="submit"] {
position: absolute;
right: 0;
top: 0; }
.expand-voucher .v-middle {
margin-right: 3px; }
.expand-voucher .ll-form-help-block {
margin-bottom: 0; }
.voucher-new {
border: 0;
margin-top: 10px;
max-width: 500px;
padding: 7.5px 0; }
.guarantee {
border: 0;
padding: 0; }
/**
* The button and link under the basket
*/
.under-basket {
margin-bottom: 30px; }
/**
* Last item of the main basket
*/
.basket-last-item {
margin-bottom: 30px; }
.basket-last-item .delivery-option {
margin: 0 0 30px; }
.basket-last-item .dts-3 {
text-align: center; }
/**
* And the promotions at the bottom of the page
*/
.promotions {
display: none; }
/**
* Flush width sections
*/
.flush {
border-bottom: 1px solid #dcdcdc; }
.flush .dash-box {
border: 0;
padding: 30px 15px;
margin: 0; }
.checkout-section .flush .dash-box {
padding: 7.5px; }
.flush .flush {
border: 0;
margin-top: 30px; }
.flush .flush:first-child {
margin-top: 0; }
.flush:last-child {
border: 0; }
.checkout-section hr + .backup {
margin-top: -30px; }
.backup + hr {
margin-top: 0; }
/**
* Giftwrap page
*/
.gift-cell {
border: 1px solid #dcdcdc;
margin-bottom: 30px;
padding: 30px;
position: relative; }
.gift-cell *:last-child,
.standard-box *:last-child {
margin-bottom: 0; }
.gift-cell ul,
.standard-box ul {
list-style: none;
margin: 0;
padding-left: 20px;
text-indent: -20px; }
.gift-cell ul li,
.standard-box ul li {
margin: 5px 10px 5px 0; }
.gift-cell ul li:before,
.standard-box ul li:before {
content: "- ";
margin-right: 10px; }
th.gift-message,
td.gift-message {
min-width: 190px; }
th.gift-message .add-message label.label-checkbox.ll-enabled,
td.gift-message .add-message label.label-checkbox.ll-enabled {
background-position: left top;
line-height: 1.2;
padding-top: 5px; }
.giftwrap-datepicker {
background: #F9F9F9;
margin-bottom: 30px;
margin-top: -30px;
padding: 15px; }
.giftwrap-datepicker .ll-form-row {
margin-bottom: 0; }
.giftwrap-datepicker .ll-form-row input {
background-color: #fff; }
.giftwrap-datepicker .flowers-delivery-date:after {
content: "";
position: absolute;
width: 200px;
height: 45px;
left: 0;
bottom: -60px;
z-index: 1; }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 32.438em) {
/**
* The main basket
*/
.main-basket span.quantity input {
border-width: 1px 1px 1px 0;
width: 33.3333%; }
.main-basket span.quantity input:first-child {
border-left-width: 1px; } }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* The main site heading
*/
h1.basket-header {
clear: both;
float: left;
margin: 15px 0 15px; }
/**
* The main submit button(s)
*/
input.basket-submit {
float: right;
width: auto; }
/**
* The basket heading
*/
.basket-head > h2 {
font-size: 20px;
font-size: 1.25rem;
padding: 15px 22.5px; }
.basket-head .basket-head-nofire,
.basket-head .basket-head-success {
padding: 15px 22.5px; }
/**
* The main basket
*/
.main-basket th,
.totals th,
.quick-basket th {
font-size: 17px;
font-size: 1.0625rem; }
.main-basket td, .main-basket th,
.totals td,
.totals th,
.quick-basket td,
.quick-basket th {
padding: 8px 15px; }
.main-basket .product-quantity,
.main-basket .product-price,
.main-basket .product-unit,
.main-basket .overall-price,
.totals .product-quantity,
.totals .product-price,
.totals .product-unit,
.totals .overall-price,
.quick-basket .product-quantity,
.quick-basket .product-price,
.quick-basket .product-unit,
.quick-basket .overall-price {
font-size: 16px;
font-size: 1rem;
padding: 8px 15px;
width: 150px; }
.main-basket .product-unit,
.totals .product-unit,
.quick-basket .product-unit {
display: table-cell;
width: 150px; }
.main-basket .product > a,
.totals .product > a,
.quick-basket .product > a {
margin-bottom: 0; }
.main-basket .product h3, .main-basket .product p, .main-basket .product .cta,
.totals .product h3,
.totals .product p,
.totals .product .cta,
.quick-basket .product h3,
.quick-basket .product p,
.quick-basket .product .cta {
font-size: 16px;
font-size: 1rem; }
.main-basket .product-details,
.totals .product-details,
.quick-basket .product-details {
clear: none;
margin-left: 140px; }
.main-basket .product-details h3,
.totals .product-details h3,
.quick-basket .product-details h3 {
margin-top: 5px; }
.main-basket.details-basket .product-details {
margin-left: 0; }
.main-basket.giftwrap-basket .product > img {
margin-bottom: 15px; }
.table-surround {
overflow: auto; }
.table-surround .main-basket {
table-layout: fixed; }
/**
* Last item of the main basket
*/
.basket-last-item .delivery-option {
float: none;
width: auto; }
.basket-last-item .delivery-option h3 {
font-size: 18px;
font-size: 1.125rem; }
.basket-last-item .delivery-option p {
font-size: 14px;
font-size: 0.875rem; }
.basket-last-item .dts-3 {
text-align: left; }
/**
* The overall totals and whatnot table
*/
.total-container {
margin-top: -60px;
float: right;
width: 451px; }
.total-container .cards {
left: 0;
position: absolute;
right: 340px;
top: 44px; }
.totals th {
font-size: 12px;
font-size: 0.75rem; }
.totals th h4 {
font-size: 16px;
font-size: 1rem; }
.totals td {
font-size: 18px;
font-size: 1.125rem;
padding: 30px 15px; }
.voucher {
margin-right: 486px;
margin-top: 0;
max-width: 500px;
top: -30px; }
.voucher input[type="submit"] {
position: static;
width: 100%; }
/**
* New expand voucher section
*/
.expand-voucher {
top: -30px; }
.expand-voucher input[type="submit"] {
position: static;
width: 100%; }
.new-voucher {
margin: 10px 0 0;
top: 0; }
.guarantee {
margin-right: 486px;
margin-top: 0;
top: -30px; }
.guarantee input[type="submit"] {
position: static;
width: 100%; }
/**
* And the promotions at the bottom of the page
*/
.promotions {
background: #f9f9f9;
display: block;
margin-bottom: 30px; }
.promotions > h3 {
border-bottom: 1px solid #ccc;
color: #D21034;
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 0;
padding: 15px 30px; }
.promotions article {
overflow: hidden;
padding: 30px; }
.promotions article .product-details {
margin-left: 130px; }
.promotions article .product-details h4 {
font-weight: 700; }
.promotions article .product-details p {
font-size: 18px;
font-size: 1.125rem; }
.promotions article > img {
margin-right: 20px; }
.promotions article select {
margin-bottom: 15px; }
.promotions article .add-to-basket p {
margin-bottom: 0; }
.promotions hr {
border: 0;
border-bottom: 1px solid #ccc;
margin: 0; }
/**
* Flush width sections
*/
.flush {
border: 0;
float: left;
width: 50%; }
.flush .dash-box {
padding: 60px 30px; }
.flush + .flush .dash-box {
border-left: 1px solid #dcdcdc; }
.flush .flush {
margin: 0; }
.checkout-section .flush .dash-box {
padding: 20px; }
/**
* Let's just stop those forms using the padding and bg image
* on all submit buttons for this section
*/
input.has-arrow {
background-image: url(/assets/images/icons/small/submit-arrow.png);
background-repeat: no-repeat;
background-position: right center;
height: 45px;
line-height: 45px;
padding: 0 100px 0 15px; }
input.has-arrow:hover {
background-position: 101% center; }
/**
* Giftwrap page
*/
.gift-cell .standard-box {
margin-bottom: 0; }
th.gift-message,
td.gift-message {
width: 400px; }
th.gift-message h4,
td.gift-message h4 {
margin: 0; }
th.gift-message .add-message,
td.gift-message .add-message {
float: right;
margin: 0;
max-width: 50%; }
th.gift-message .add-message label,
td.gift-message .add-message label {
margin-top: 0; } }
/* Desktop / table landscape ================================================ */
@media only screen and (min-width: 60em) {
/**
* The main basket
*/
.main-basket .product .giftwrap {
padding-right: 215px; }
.main-basket .product .multibuy-available {
bottom: 30px;
margin: 0;
max-width: 200px;
position: absolute;
right: 30px; }
.main-basket.details-basket .product img {
float: left; }
.main-basket.details-basket .product-details {
margin-left: 140px; }
/**
* The very bottom of the basket
*/
.basket-bottom .basket-last-item {
bottom: 0;
left: auto;
position: absolute;
right: 0;
top: auto;
width: 390px; }
/**
* Last item of the main basket
*/
.basket-last-item .delivery-option {
margin: 0; }
.basket-last-item .dts-3 {
text-align: right; }
.voucher input[type="submit"],
.guarantee input[type="submit"] {
position: absolute;
right: 0;
top: 0;
width: auto; }
/**
* New expand voucher section
*/
.expand-voucher {
font-size: 18px;
font-size: 1.125rem;
padding: 10px 15px; }
.voucher-new {
padding: 15px 37.5px; }
.checkout-section .flush .dash-box {
padding: 15px; }
.giftwrap-datepicker .flowers-delivery-date:after {
display: none; } }
/* Large Desktop - Add Styling for large desktop computers ================== */
/* Dashboard =============================================================== */
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* =============================================================================
Helper Classes/Mixins
========================================================================== */
.ir, .icn {
color: transparent;
font: 0/0 a;
text-shadow: none; }
/* Vertical alignment - http://goo.gl/Im9MF5 ================================ */
/* Hide from screenreaders and browsers ===================================== */
/*
* Accessibility helper
*/
.ll-a11y {
color: transparent !important;
font: 0/0 serif;
padding: 0 !important;
position: absolute;
text-shadow: none; }
/*
* Visibility
* Avoids setting display to `block` so it works also with `inline-block` and `table`
*/
@media (min-width: 86.375em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-hidden-xlarge {
display: none !important; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-large {
display: none !important; } }
/* Tablets portrait */
@media (min-width: 47.5em) and (max-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-medium {
display: none !important; } }
/* Phone landscape and smaller*/
@media (max-width: 47.5em) {
.ll-visible-medium {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-small {
display: none !important; } }
/* Remove from the flow and screen readers on any device */
.ll-hidden {
display: none !important;
visibility: hidden !important; }
/* Clearfix - Use @extend cf on element ===================================== */
.cf:after, .dl-horizontal:after, .field:after, .nav > ul > li.search form:after, .nav > ul > li.search-form-mobile form:after, .nav > ul > li.store-locate form:after, .pagination:after, .site-header:after, .review-form-box:after, .review-form-box .product:after, .product-range .product-set-item:after, .product-list .product-item:after, .store-list > li a:after {
clear: both;
content: '';
display: table; }
/**
* Clears
*/
.c-both {
clear: both; }
/**
* Floats
*/
.f-right {
float: right; }
.f-left {
float: left; }
.f-none {
float: none; }
/**
* Displays
*/
.d-block {
display: block; }
.d-inline-block {
display: inline-block; }
/**
* Text positioning
*/
.t-center {
text-align: center; }
.t-right {
text-align: right; }
.t-left {
text-align: left; }
/**
* Text styles
*/
.t-underline {
text-decoration: underline !important; }
.t-none {
text-decoration: none !important; }
/**
* Positioning
*/
.p-rel {
position: relative; }
/**
* Super margins
*/
.m-bottom {
margin-bottom: 24px; }
.m-bottom.x01 {
margin-bottom: 12px / 2; }
.m-bottom.x05 {
margin-bottom: 12px; }
.m-bottom.x3 {
margin-bottom: 36px; }
.m-bottom.x4 {
margin-bottom: 48px; }
.m-bottom.x6 {
margin-bottom: 72px; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
/**
* Paddings
*/
.p-all {
padding: 15px; }
/**
* Other position
*/
.v-middle {
vertical-align: middle; }
.v-top {
vertical-align: top; }
/**
* Widths
*/
.w-45 {
width: 45%; }
/**
* Images with borders
*/
.bordered {
border: 1px solid #dcdcdc;
padding: 2px; }
/**
* Images that should be full width
*/
.i-full-width {
display: block;
width: 100%; }
/**
* Need to add a margin to the header on certain pages
* So that elements don't sit flush against it
*/
.header-margin header {
margin-bottom: 20px; }
/**
* Some new margin helpers
*/
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.ll-grid-margin {
margin-top: 20px; }
.ll-margin {
margin-bottom: 20px; }
.ll-margin + .ll-margin {
margin-top: 20px; }
.ll-margin-top {
margin-top: 20px !important; }
.ll-margin-bottom {
margin-bottom: 20px !important; }
.ll-margin-left {
margin-left: 20px !important; }
.ll-margin-right {
margin-right: 20px !important; }
.ll-margin-vertical {
margin-bottom: 20px !important;
margin-top: 20px !important; }
.ll-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important; }
* + .ll-margin {
margin-top: 20px; }
/*
* Smaller margins
*/
.ll-margin-small {
margin-bottom: 10px; }
.ll-margin-small + .ll-margin-small {
margin-top: 10px; }
.ll-margin-small-top {
margin-top: 10px !important; }
.ll-margin-small-bottom {
margin-bottom: 10px !important; }
.ll-margin-small-left {
margin-left: 10px !important; }
.ll-margin-small-right {
margin-right: 10px !important; }
.ll-margin-small-vertical {
margin-bottom: 10px !important;
margin-top: 10px !important; }
.ll-margin-small-horizontal {
margin-left: 10px !important;
margin-right: 10px !important; }
* + .ll-margin-small {
margin-top: 10px; }
/*
* Medium margins
*/
.ll-margin-medium {
margin: 40px; }
.ll-margin-medium-top {
margin-top: 40px !important; }
.ll-margin-medium-bottom {
margin-bottom: 40px !important; }
.ll-margin-medium-left {
margin-left: 40px !important; }
.ll-margin-medium-right {
margin-right: 40px !important; }
.ll-margin-medium-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-medium-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-medium {
margin-top: 40px !important; }
/*
* Larger margins
*/
.ll-margin-large {
margin-bottom: 40px; }
.ll-margin-large + .ll-margin-large {
margin-top: 40px; }
.ll-margin-large-top {
margin-top: 40px !important; }
.ll-margin-large-bottom {
margin-bottom: 40px !important; }
.ll-margin-large-left {
margin-left: 40px !important; }
.ll-margin-large-right {
margin-right: 40px !important; }
.ll-margin-large-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-large-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-large {
margin-top: 40px; }
/*
* Extra Large margins
*/
.ll-margin-xlarge {
margin-bottom: 80px; }
.ll-margin-xlarge + .ll-margin-xlarge {
margin-top: 80px; }
.ll-margin-xlarge-top {
margin-top: 80px !important; }
.ll-margin-xlarge-bottom {
margin-bottom: 80px !important; }
.ll-margin-xlarge-left {
margin-left: 80px !important; }
.ll-margin-xlarge-right {
margin-right: 80px !important; }
.ll-margin-xlarge-vertical {
margin-bottom: 80px !important;
margin-top: 80px !important; }
.ll-margin-xlarge-horizontal {
margin-left: 80px !important;
margin-right: 80px !important; }
* + .ll-margin-xlarge {
margin-top: 80px; }
/*
* Remove margins
*/
.ll-margin-remove {
margin: 0 !important; }
.ll-margin-top-remove {
margin-top: 0 !important; }
.ll-margin-bottom-remove {
margin-bottom: 0 !important; }
.ll-pos-rel {
position: relative; }
/* Colours for this page components ========================================= */
/* Include the main product file ============================================ */
/**
* The main dashboard page
*/
[role="main"] {
margin-bottom: 30px; }
.my-account h1 {
margin: 30px 0; }
/**
* The login boxes
*/
.ll-form-box {
background-color: #f6f6f6;
border: 1px solid #cecece;
padding: 30px 30px 60px;
position: relative;
/*
&.new-account {
background-color: #fff;
h3 {
color: $darkblue;
}
}
*/ }
.ll-form-box.has-account input[type="email"],
.ll-form-box.has-account input[type="password"], .ll-form-box.new-account input[type="email"],
.ll-form-box.new-account input[type="password"] {
background-color: #fff; }
.ll-form-box.has-account {
margin-bottom: 20px; }
.ll-form-box .ll-form-row:first-child {
margin-top: 0; }
.ll-form-box .ll-form-row .ll-form-help-inline,
.ll-form-box .ll-form-row .label-checkbox {
line-height: 1;
margin: 0; }
.ll-form-box fieldset {
margin: 0; }
.ll-form-box .account-benefits {
margin: 0 0 -15px;
padding: 0; }
.ll-form-box .account-benefits h4 {
margin-bottom: 8px; }
.ll-form-box .account-benefits .account-benefits-left {
margin-left: 0; }
.ll-form-box .account-benefits .account-benefits-right {
margin-bottom: 40px; }
.ll-form-box input[type="submit"] {
bottom: 30px;
max-width: 100%;
min-width: 50%;
left: 30px;
position: absolute; }
/**
* Dashboard header sections
*/
.dash-head h1,
.dash-head h2 {
font-size: 22px;
font-size: 1.375rem;
color: #fff;
margin: 0;
padding: 15px 15px; }
.dash-head ul {
float: right;
list-style: none;
margin: 0 20px 0 0;
padding: 0; }
.dash-head ul li {
display: inline-block;
margin-top: 20px; }
.dash-head ul li a {
font-size: 22px;
font-size: 1.375rem;
border: 1px solid #fff;
color: #fff;
display: block;
line-height: 40px;
padding: 0 5px;
text-decoration: none;
text-transform: uppercase; }
.dash-head ul li a:hover {
background: rgba(255, 255, 255, 0.2); }
.dash-head ul li:nth-child(n+2) a {
border-left: 0; }
/**
* The main dashboard boxes
*/
.dash-box {
border: 1px solid #dcdcdc;
margin-bottom: 30px; }
.dash-box ul {
list-style: none;
margin: 0;
padding: 0; }
.dash-box ul li.padded,
.dash-box ul li a {
border-top: 1px solid #dcdcdc;
display: block;
padding: 15px 50px 15px 15px;
text-decoration: none; }
.dash-box ul li.padded:hover,
.dash-box ul li a:hover {
background-color: #efefef; }
.dash-box ul li a > img {
display: none;
float: left;
margin-right: 30px;
vertical-align: middle; }
.dash-box ul li a h3 {
margin: 0;
text-transform: none; }
.dash-box ul li a p {
color: #000;
margin: 0; }
.dash-box ul li.status {
color: #9a9a9a;
font-size: 22px;
font-size: 1.375rem; }
.dash-box ul li:first-child.padded,
.dash-box ul li:first-child a {
border-top: 0; }
.dash-box h3.padded {
margin: 0; }
.dash-box h5 {
font-size: 16px;
font-size: 1rem; }
.dash-box table {
border-collapse: collapse;
margin-bottom: 0; }
.dash-box table.smaller td {
padding: 15px; }
.dash-box th {
font-weight: 700;
text-transform: uppercase; }
.dash-box th,
.dash-box td {
border: 1px solid #dcdcdc;
padding: 15px 7.5px;
vertical-align: middle; }
.dash-box th.progress a,
.dash-box td.progress a {
color: #000;
font-weight: 700;
text-decoration: underline;
text-transform: uppercase; }
.dash-box th.progress a.btn,
.dash-box td.progress a.btn {
color: #fff;
font-weight: 300;
text-decoration: none; }
.dash-box th .btn,
.dash-box td .btn {
white-space: nowrap; }
.dash-box th *:last-child,
.dash-box td *:last-child {
margin-bottom: 0; }
.dash-box .box.selected td {
background-color: #ebebeb; }
.dash-box.has-table {
border: 0;
overflow-x: scroll; }
.dash-box.has-table::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5; }
.dash-box.has-table::-webkit-scrollbar {
height: 6px;
width: 6px;
background-color: #F5F5F5; }
.dash-box.has-table::-webkit-scrollbar-thumb {
background-color: #959595; }
.dash-box.padded,
.dash-box .padded {
padding: 15px; }
.dash-box.padded *:last-child,
.dash-box .padded *:last-child {
margin-bottom: 0; }
.dash-box hr {
margin: 0; }
/**
* Review boxes
*/
.review-box {
margin-top: 60px; }
.review-box ul {
list-style: none;
margin: 0;
padding: 0; }
.review-box li {
border: 1px solid #dcdcdc;
margin-bottom: 15px; }
.review-box .product,
.review-box .review-content,
.review-box .lakeland-response {
padding: 15px; }
.review-box .product {
padding-top: 65px;
position: relative; }
.review-box .product .cta {
margin-bottom: 15px; }
.review-box .product img {
float: left;
margin-right: 20px; }
.review-box .product .review-date {
margin-bottom: 5px; }
.review-box .product h4 {
margin-bottom: 10px; }
.review-box .product h4 a {
color: #000;
font-weight: 700; }
.review-box .product h5 {
font-size: 22px;
font-size: 1.375rem;
text-transform: none; }
.review-box .product .average-rating {
margin-bottom: 5px; }
.review-box .product .resubmit {
font-size: 16px;
font-size: 1rem;
left: 15px;
position: absolute;
right: 15px;
top: 15px; }
.review-box .review-content {
border-top: 1px solid #dcdcdc;
padding: 15px;
position: relative; }
.review-box .review-content:after, .review-box .review-content:before {
bottom: 100%;
left: 30px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none; }
.review-box .review-content:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: 0; }
.review-box .review-content:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #dcdcdc;
border-width: 22px;
margin-left: -2px; }
.review-box .lakeland-response {
background-color: #707070;
color: #fff;
padding: 15px;
position: relative; }
.review-box .lakeland-response img {
margin-right: 15px; }
.review-box .lakeland-response p {
margin: 0; }
.review-box .lakeland-response:after {
bottom: 100%;
left: 30px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #707070;
border-width: 20px;
margin-left: 0; }
/**
* Review form
*/
.review-form-box {
border: 1px solid #dcdcdc;
margin-bottom: 60px;
padding-bottom: 65px;
position: relative; }
.review-form-box .right {
float: right;
padding: 15px; }
.review-form-box .right .btn {
bottom: 0;
left: 0;
position: absolute;
right: 0;
white-space: pre-wrap;
width: 100%; }
.review-form-box .product {
float: left;
padding: 15px;
width: 100%; }
.review-form-box .product img {
float: left;
margin-right: 20px; }
.review-form-box .product h4 {
margin-bottom: 5px;
padding-top: 22.5px; }
.review-form-box .product p {
margin: 0; }
.review-form-box .review-form {
border-top: 1px solid #dcdcdc;
padding: 15px; }
.review-form-box textarea {
height: 150px; }
.review-form-box .rating-label {
display: inline-block;
font-family: "HumanistReg", sans-serif;
font-size: 22px;
font-size: 1.375rem;
line-height: 32px;
margin-right: 10px; }
.review-form-box .rateit {
top: 3px; }
.review-form-box .ll-form-label span {
font-size: 14px;
font-size: 0.875rem;
font-weight: 300; }
.review-form-box .char-count.char--success {
color: #9ecd5f; }
.review-form-box .char-count.char--error {
color: #D21034; }
/**
* Review guidelines
*/
.toggle-guidelines {
cursor: pointer; }
.guidelines {
background-color: #f6f6f6;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s ease-out;
-o-transition: max-height .5s ease-out;
transition: max-height .5s ease-out; }
.guidelines.showing {
max-height: 1500px; }
.guidelines .padded {
padding: 15px; }
/**
* Flush width sections
*/
.flush {
border-bottom: 1px solid #dcdcdc; }
.flush .dash-box {
border: 0;
padding: 30px 15px;
margin: 0; }
.flush .flush {
border: 0;
margin-top: 30px; }
.flush .flush:first-child {
margin-top: 0; }
.flush:last-child {
border: 0; }
hr + .backup {
margin-top: -30px; }
.my-messages .dash-head {
background-color: #7A7870; }
.my-messages h3,
.my-messages .the-colour {
color: #7A7870; }
.my-messages .dash-box td {
vertical-align: top; }
.my-messages .dash-box th {
color: #7A7870; }
.my-messages .dash-box th.messages {
min-width: 250px; }
.my-messages .dash-box h4 {
font-weight: 700;
text-transform: none; }
.my-account .dash-head {
background-color: #7A7870; }
.my-account h3,
.my-account .the-colour {
color: #7A7870; }
.my-account .dash-box th {
color: #7A7870; }
.my-account .dash-box li a {
background: url(/assets/images/icons/small/dash-arrow.png) right center no-repeat; }
.my-account .dash-box li a:hover {
background-position: 101% center; }
.my-account-colour {
color: #7A7870 !important; }
/**
* User saved address box
*/
.addresses table.boxes td {
cursor: auto;
vertical-align: middle; }
.addresses table.boxes td a {
display: inline-block;
text-align: left;
width: 105px; }
.addresses table.boxes td p {
margin: 0; }
/**
* Postcode lookup results
*/
.postcode-results select {
border: 0;
margin: 0 0 10px 0;
max-height: 196px;
width: 100%; }
.postcode-results select option {
color: #243044;
cursor: pointer;
padding: 6px 4px;
text-decoration: underline; }
.postcode-results select option:nth-child(even) {
background-color: #fff; }
.order-history {
/*
.btn:not(.btn-white),
&.btn {
background-color: $myOrders;
border-color: #ebebeb #afafaf #999 #e4e4e4;
&:hover {
background-color: lighten($myOrders, 10%);
}
}
*/ }
.order-history .dash-head {
background-color: #7A7870; }
.order-history h3,
.order-history .the-colour {
color: #7A7870; }
.order-history .dash-box th {
color: #7A7870; }
.order-history td {
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out; }
.order-history tr:hover td {
background-color: #f9f9f9; }
.subscriptions .dash-head {
background-color: #7A7870; }
.subscriptions h3,
.subscriptions .the-colour {
color: #7A7870;
text-transform: none; }
.reviews {
/*
.btn:not(.btn-white),
&.btn {
background-color: $myReviews;
border-color: #ebebeb #afafaf #999 #e4e4e4;
&:hover {
background-color: lighten($myReviews, 10%);
}
}
*/ }
.reviews .dash-head {
background-color: #7A7870;
color: #fff; }
.reviews .alert-review {
background-color: #7A7870;
color: #fff;
display: inline-block;
font-size: 22px;
font-size: 1.375rem;
margin: 0 0 30px;
padding: 22.5px 15px; }
.reviews h3,
.reviews .the-colour {
color: #7A7870; }
.reviews .dash-box p {
margin-bottom: 30px; }
/**
* Some of the buttons need to be reverted back to standard colours
*/
.standard .btn:not(.btn-white), .standard.btn {
background-color: #91bf71;
border-color: #bcdd91 #659c2a #52881d #a7d16e; }
.standard .btn:not(.btn-white):hover, .standard.btn:hover {
background-color: #9fc783; }
.standard p .btn.w-45 {
display: block;
float: none;
height: auto;
line-height: 1;
font-size: 18px;
font-size: 1.125rem;
margin-top: 15px;
padding: 5px 50px 5px 15px;
width: auto;
white-space: pre-wrap; }
.standard p .btn.w-45:first-child {
margin-top: 0; }
/**
* Password strengh - in here for now as it's the only place used
*/
.passStrengthify {
float: right;
margin-top: 5px; }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* Dashboard boxes
*/
.dash-box.has-table {
overflow-x: auto; }
/**
* The login boxes
*/
.ll-form-box input[type="submit"] {
text-align: left; }
.ll-form-box.has-account {
margin-bottom: 0; }
.ll-form-box .account-benefits .account-benefits-right {
margin-bottom: 60px; }
/**
* Postcode lookup results
*/
.postcode-results {
max-width: 50%; }
/**
* Review boxes
*/
.review-box .product {
padding-top: 15px; }
.review-box .product .resubmit {
bottom: 15px;
left: auto;
top: auto; }
.review-box .review-content {
padding: 30px 145px; }
.review-box .review-content:after, .review-box .review-content:before {
left: 155px; }
.review-box .lakeland-response {
padding: 15px 145px; }
.review-box .lakeland-response:after, .review-box .lakeland-response:before {
left: 155px; }
/**
* Review form
*/
.review-form-box {
padding-bottom: 55px; }
.review-form-box .right .btn {
bottom: 15px;
left: auto;
right: 15px;
white-space: nowrap;
width: auto; }
.review-form-box .product {
width: 50%; }
/**
* Flush width sections
*/
.flush {
border: 0;
float: left;
width: 50%; }
.flush .dash-box {
padding: 60px 30px; }
.flush + .flush .dash-box {
border-left: 1px solid #dcdcdc; }
.flush .flush {
margin: 0; }
/**
* Let's just stop those forms using the padding and bg image
* on all submit buttons for this section
*/
.ll-form.ll-form-full input[type="submit"],
input.has-arrow,
a.has-arrow {
background-image: url(/assets/images/icons/small/submit-arrow.png);
background-repeat: no-repeat;
background-position: right center;
height: 45px;
line-height: 45px;
padding: 0 100px 0 15px;
text-align: left; }
.ll-form.ll-form-full input[type="submit"]:hover,
input.has-arrow:hover,
a.has-arrow:hover {
background-position: 101% center; }
/**
* Some of the buttons need to be reverted back to standard colours
*/
.standard p .btn.w-45 {
display: inline;
float: right;
font-size: 22px;
font-size: 1.375rem;
margin-top: 0;
width: 48%; }
.standard p .btn.w-45:first-child {
float: left; } }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 60em) {
.dash-head h1,
.dash-head h2 {
padding: 27px 30px; }
.dash-head ul li a {
padding: 0 15px; }
.dash-box ul li.padded,
.dash-box ul li a {
padding: 30px 50px 30px 30px; }
.dash-box th,
.dash-box td {
padding: 22.5px; }
.dash-box.full {
height: auto;
overflow: auto; }
.dash-box.padded,
.dash-box .padded {
padding: 22px; }
/**
* Review form
*/
.review-form-box {
padding-bottom: 0; }
.review-form-box .left {
border-right: 1px solid #dcdcdc;
margin-right: 400px; }
.review-form-box .right {
text-align: center;
width: 400px; }
.review-form-box .right .btn {
width: 370px; }
.review-form-box .product {
width: 100%; }
.review-form-box .rating-label {
margin-top: 45px; }
.my-account .dash-box li a img {
display: inline; }
.reviews .dash-box li a img {
display: inline; }
.ll-form-box .account-benefits .account-benefits-right {
margin-bottom: 20px; } }
/* =============================================================================
reCAPTCHA - UpdateProfile styling
========================================================================= */
.recaptcha-update-profile {
margin-bottom: 10px;
float: right;
padding-left: 15px; }
/* Product pages =========================================================== */
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* Include the main product file ============================================ */
/**
* The twitter tweet button
*/
.tweetme {
float: left;
width: 88px; }
/**
* The plusone button
*/
.productplusone {
float: left;
width: 40px; }
/**
* The pin button
*/
.pinit {
float: left;
width: 54px; }
/**
* The facebook button
*/
.fbproduct {
float: left;
width: 50px; }
/**
* Email a friend link
*/
.email-friend {
color: #000;
display: inline-block;
line-height: 17px;
text-decoration: none; }
.email-friend img {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
vertical-align: middle; }
.email-friend:hover {
text-decoration: underline; }
.email-friend:hover img {
padding-right: 5px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg); }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* The twitter tweet button
*/
.tweetme, .productplusone, .pinit, #fb-root {
width: 50%; } }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 60em) {
/**
* Set the widths as they should be
*/
.tweetme {
width: 88px; }
.productplusone {
width: 40px; }
.pinit {
width: 54px; }
.fbproduct {
width: 50px; } }
/* Include the main product file ============================================ */
/**
* The heading and social section
*/
.recipe h1 {
float: none;
line-height: 1.2;
margin-bottom: 30px; }
.recipe-social .basket-social {
border: 1px solid #dcdcdc;
margin-bottom: 30px;
padding: 15px; }
.recipe-social .basket-social .fbproduct {
margin-bottom: 10px; }
.recipe-social .basket-social .email-friend {
color: #000;
text-decoration: none; }
.recipe-social .basket-social .email-friend img {
vertical-align: middle; }
.recipe-social .basket-social p {
margin-bottom: 0; }
/**
* Recipe detail icons
*/
.recipe-details {
list-style: none;
margin: 0 0 30px;
padding: 0; }
.recipe-details li {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 15px;
text-transform: uppercase; }
.recipe-details li:first-child {
margin-left: 0; }
.recipe-details li img {
margin-right: 7.5px;
vertical-align: middle; }
hr {
margin-bottom: 30px; }
/**
* The recipe instructions
*/
#ingredient-instructions {
margin-bottom: 60px; }
#ingredient-instructions > li {
padding: 30px 15px; }
#ingredient-instructions > li h4 {
margin-bottom: 5px; }
#ingredient-instructions > li h4.with-icon {
margin-bottom: 30px; }
#ingredient-instructions > li ol {
padding-left: 22px; }
#ingredient-instructions > li ol li {
margin-bottom: 15px; }
#ingredient-instructions > li .ingredients {
margin: 0;
padding: 0; }
#ingredient-instructions > li .ingredients > p {
font-size: 18px;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 5px;
text-transform: uppercase; }
#ingredient-instructions > li .ingredients ul {
list-style: none;
margin: 0 0 15px;
padding: 0; }
/**
* Related products below the image
*/
.related-products {
display: none; }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* Basket social and header
*/
.recipe h1 {
margin-bottom: 60px; }
.recipe-social .basket-social {
float: right;
margin-bottom: 60px;
margin-left: 30px;
width: 300px; }
/**
* Recipe detail icons
*/
.recipe-details {
margin: 0 0 60px; }
.recipe-details li {
display: inline-block;
margin-bottom: 0;
margin-left: 30px; }
/**
* Related products
*/
.related-products {
background: #f6f6f6;
display: block;
margin: 30px 0;
padding: 15px; }
.related-products h3 {
font-size: 18px;
font-size: 1.125rem; }
.related-products .dts-6:first-child {
margin-bottom: 15px; }
.related-products a {
display: block;
text-decoration: none; }
.related-products a > img {
border: 1px solid #ccc;
margin-bottom: 15px;
width: 100%; }
.related-products h4 {
color: #000;
height: 45px;
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 7.5px; }
.related-products .options {
float: right;
text-align: right; }
.related-products .options .save {
color: #666666; }
.related-products .options .price {
color: #000;
display: block;
font-weight: 700;
margin-bottom: 15px; }
.related-products .options .price.now {
color: #D21034; } }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 60em) {
/**
* Social stuff
*/ }
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* Misc ===================================================================== */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* Include the main product file ============================================ */
/**
* The twitter tweet button
*/
.tweetme {
float: left;
width: 88px; }
/**
* The plusone button
*/
.productplusone {
float: left;
width: 40px; }
/**
* The pin button
*/
.pinit {
float: left;
width: 54px; }
/**
* The facebook button
*/
.fbproduct {
float: left;
width: 50px; }
/**
* Email a friend link
*/
.email-friend {
color: #000;
display: inline-block;
line-height: 17px;
text-decoration: none; }
.email-friend img {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
vertical-align: middle; }
.email-friend:hover {
text-decoration: underline; }
.email-friend:hover img {
padding-right: 5px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg); }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* The twitter tweet button
*/
.tweetme, .productplusone, .pinit, #fb-root {
width: 50%; } }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 60em) {
/**
* Set the widths as they should be
*/
.tweetme {
width: 88px; }
.productplusone {
width: 40px; }
.pinit {
width: 54px; }
.fbproduct {
width: 50px; } }
/* Include the main product file ============================================ */
/**
* The price ctas
*/
.mobile-cta {
margin-bottom: 5px; }
.cta.was, .cta.now {
display: inline-block;
margin: 0 5px 0 0; }
/**
* Rating CTA
*/
.average-rating {
text-align: right; }
.average-rating .review-count {
display: block;
margin-bottom: 5px; }
/**
* The product gallery section
*/
.product-gallery {
position: relative; }
.product-gallery .badges {
left: 15px;
max-width: 30%;
position: absolute;
top: 15px; }
.product-gallery .main-image {
width: 100%; }
.product-gallery.cf .open-modal, .product-gallery.dl-horizontal .open-modal, .product-gallery.field .open-modal, .nav > ul > li.search form.product-gallery .open-modal, .nav > ul > li.search-form-mobile form.product-gallery .open-modal, .nav > ul > li.store-locate form.product-gallery .open-modal, .product-gallery.pagination .open-modal, .product-gallery.site-header .open-modal, .product-gallery.review-form-box .open-modal, .review-form-box .product-gallery.product .open-modal, .product-range .product-gallery.product-set-item .open-modal, .product-list .product-gallery.product-item .open-modal, .store-list > li a.product-gallery .open-modal {
bottom: 20px; }
.product-gallery .gallery-nav {
clear: both;
overflow: hidden;
position: relative; }
.product-gallery .gallery-nav ul {
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: margin .5s ease-in-out;
-o-transition: margin .5s ease-in-out;
transition: margin .5s ease-in-out; }
.product-gallery .gallery-nav ul li {
float: left; }
.product-gallery .gallery-nav ul li a img {
display: block;
max-width: 91px; }
.product-gallery .gallery-nav .ll-slidenav {
background-color: #f7f7f7;
border-radius: 4px;
left: 0;
position: absolute;
top: 0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
width: 91px; }
.product-gallery .gallery-nav .ll-slidenav:hover {
background-color: #eaeaea; }
.product-gallery .gallery-nav .ll-slidenav.ll-slidenav-next {
bottom: 0;
top: auto; }
.product-gallery .gallery-nav .ll-slidenav .product-icon {
fill: #464646; }
/**
* Background patterns
*/
.special-offer-pattern {
background: url("/assets/images/icons/nacho-red.gif");
background-repeat: repeat;
background-position: center; }
.price-match-pattern {
background: url("/assets/images/icons/nacho-blue.gif");
background-repeat: repeat;
background-position: center; }
/**
* Gift Wrap
*/
.gift-wrap-section {
margin: 15px 0; }
/**
* Product call to action section on the right of the page
*/
.product-cta.mobile {
display: block; }
/**
* The product quantity and add to basket section
*/
.product-qty h3 {
font-size: 18px;
font-size: 1.125rem;
float: left;
line-height: 42px;
text-align: left; }
.product-qty .cta {
font-size: 16px;
font-size: 1rem;
background-color: transparent;
font-weight: 700;
line-height: 1.2;
text-transform: none; }
.product-qty input[type='submit'] {
clear: both;
padding: 10px 15px; }
.product-qty *:last-child {
margin-bottom: 0; }
/**
* The social media section in the product overview
*/
.basket-social {
border-bottom-width: 1px; }
.basket-social ul.list-inline li {
float: left;
margin: 0;
width: 20%; }
.basket-social .c-both {
margin-bottom: 0; }
/**
* Product information
*/
.short-features {
display: block; }
.short-features.ll-list {
padding-left: 0; }
.full-features {
display: none; }
/**
* Product information section
*/
.product-info h1 {
display: block;
float: none; }
.product-info .dts-9 {
display: none; }
.product-info .form--horizontal {
border: 1px solid #dcdcdc;
margin-bottom: 15px;
padding: 15px; }
#product-tabs > li h1,
#product-tabs > li h2 {
margin: 5px 0;
padding: 0; }
/**
* Next to the tabs are the product options and another add to basket button
*/
.product-options {
background: #f6f6f6;
margin-bottom: 30px;
padding: 15px; }
.product-options img {
float: left;
vertical-align: middle; }
.product-options h3,
.product-options p {
font-size: 14px;
font-size: 0.875rem;
color: #657daf;
margin-left: 60px; }
.product-options h3 {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 7.5px; }
/**
* Product set
*/
#product-range {
padding: 0; }
.product-range.ll-carousel-container {
padding: 0; }
.product-range .product-set-item {
background-color: #f5f5f5;
margin-bottom: 30px;
padding: 15px 15px 72px;
position: relative;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s; }
.product-range .product-set-item:hover {
background-color: #e5e5e5; }
.product-range .product-set-item.stacked {
padding: 15px; }
.product-range .product-set-item.stacked:hover {
background-color: #e5e5e5; }
.product-range .product-set-item.stacked .m-remove {
text-transform: uppercase; }
.product-range .product-set-item.stacked .small {
font-size: 14px;
font-size: 0.875rem;
float: left;
text-transform: uppercase; }
.product-range .product-set-item.stacked .options {
float: right; }
.product-range .product-set-item.stacked .options .cta {
text-transform: none; }
.product-range .product-set-item.stacked .product-qty {
bottom: auto;
float: right;
left: auto;
padding: 5px 0 15px;
position: relative;
right: auto;
vertical-align: middle; }
.product-range .product-set-item.stacked .quantity {
float: right;
height: 40px;
max-width: 25%; }
.product-range .product-set-item.stacked .btn {
font-size: 18px;
font-size: 1.125rem;
clear: none;
float: right;
max-width: 75%; }
.product-range .product-set-item .cta {
background: transparent; }
.product-range .product-set-item .m-remove {
text-transform: uppercase; }
.product-range .product-set-item .small {
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase; }
.product-range .product-set-item .options {
float: right; }
.product-range .product-set-item .product-qty {
bottom: 15px;
left: 15px;
position: absolute;
right: 15px; }
.product-range .product-set-item .quantity {
float: left;
max-width: 25%; }
.product-range .product-set-item .btn {
font-size: 18px;
font-size: 1.125rem;
clear: none;
float: right;
max-width: 75%; }
.product-range a {
color: #000;
display: block;
outline: none;
text-align: left;
text-decoration: none; }
.product-range a img {
margin-bottom: 15px;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
width: 100%; }
.product-range a:hover img {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05); }
.product-range .ll-carousel-nav {
background-color: rgba(0, 0, 0, 0.4);
color: #fff; }
.product-range .ll-carousel-nav:hover {
background-color: rgba(0, 0, 0, 0.8); }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* Rating CTA
*/
.average-rating {
text-align: left; }
.average-rating .review-count {
display: inline;
margin-bottom: 0; }
/**
* Product call to action section on the right of the page
*/
.product-cta.mobile {
display: none; }
.product-cta .single-review-text {
display: none; }
.sku {
font-size: 14px;
font-size: 0.875rem;
text-align: left; }
.sku strong {
display: inline; }
/**
* The product gallery
*/
/**
* Mobile reviews should be hidden at this resolution
*/
.mobile-reviews {
display: none; }
.product-tabs-container.reviews-page .product-tabs.ll-tab li {
width: 300px; }
/**
* Product ad
*/
.product-ad {
display: block;
margin: 0 0 30px;
max-width: 100%;
width: 100%; }
/**
* Product set
*/
.product-set .product-tabs li {
display: block;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
/* Let it fill the entire space horizontally */
width: 100%; }
.product-set .product-tabs li a {
margin-left: 0; }
.product-set #product-tabs li .review-header .sort-by {
float: none; }
.product-set #product-tabs li .review-header select.quantity {
float: none; }
.product-set #product-tabs li#product-delivery ul {
padding-left: 15px; }
.product-set .all-reviews .review .review-details {
padding: 10px 15px;
width: 100%; }
.product-set .all-reviews .review .review-details .average-rating {
text-align: left; }
.product-set .all-reviews .review .review-content {
display: block;
margin-left: 0;
width: 100%; }
.product-set .all-reviews .review .review-content:before, .product-set .all-reviews .review .review-content:after {
display: none; }
.product-set .all-reviews .review .review-content .reviewer-text {
padding: 10px 15px; }
.product-range .product-set-item.stacked {
padding: 15px 15px 0; } }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 60em) {
/**
* Individual reviews
*/
.review .review-details {
float: left;
padding: 30px 30px 0;
width: 310px; }
.review .review-details .average-rating {
text-align: right; }
.review .review-content {
border-left: 1px solid #dfdfdf;
border-top: 0;
margin-left: 310px;
min-height: 170px; }
.review .review-content:after, .review .review-content:before {
border: solid transparent;
bottom: 0;
content: '';
height: 0;
left: auto;
pointer-events: none;
position: absolute;
right: 100%;
top: 60px;
width: 0; }
.review .review-content:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-width: 20px;
margin-top: 0; }
.review .review-content:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: #dfdfdf;
border-width: 22px;
margin-top: -2px; }
/**
* Product set
*/
.product-set .product-cta {
margin-bottom: 0; }
.product-set hr {
margin: 15px 0; }
/**
* 2 column layout CTA tweaks
*/
#product-tabs {
margin-bottom: 0; } }
/* =============================================================================
Store stock locator - On product page
========================================================================= */
.store-stock-overlay {
background-color: #fff;
overflow-x: hidden; }
.store-stock-overlay .ll-close {
background-color: transparent;
color: #676767;
left: 5px;
opacity: 1;
right: auto;
text-decoration: underline;
top: 5px !important;
width: 70px; }
.store-stock-overlay .ll-close:after {
content: '< Back';
font-family: "Humanist", sans-serif;
padding: 0;
width: auto; }
.store-stock-overlay .store_locator {
-webkit-box-shadow: none;
box-shadow: none;
margin: 0;
min-width: 100%;
padding: 35px 0 0; }
.store-stock-overlay .store_locator .store-stock-locator {
padding: 0 0 25px; }
.store-stock-overlay .store_locator .store-stock-locator span.ll-form-danger {
bottom: -10px; }
.store-stock-overlay input[type="text"].js-find-stores-input {
background: url(/assets/images/icons/new/pin.png) no-repeat 3% center;
background-size: 18px;
padding-left: 40px;
width: 75%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right: 0; }
.store-stock-overlay .postcode {
font-size: 20px;
font-size: 1.25rem;
color: #243044;
display: inline-block;
margin: 15px; }
.store-stock-product-component {
padding: 0; }
.store-stock-locator input,
.store-stock-locator .store-stock-trigger,
.store-stock-overlay input,
.store-stock-overlay .store-stock-trigger {
display: inline-block;
float: left;
width: 25%;
height: 46px;
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.store-stock-locator .wrapper,
.store-stock-overlay .wrapper {
min-width: 100%; }
.store-stock-locator {
padding: 15px 15px 25px;
position: relative; }
.store-stock-locator h3 {
margin-bottom: 15px;
text-transform: uppercase; }
.store-stock-locator span.ll-form-danger {
bottom: 2px;
position: absolute;
width: 100%; }
.lt-ie9 .store-stock-locator .store-stock-search {
line-height: 35px;
min-height: 35px; }
.store-stock-trigger {
padding: 13.5px 15px; }
.store-stock-list {
background-image: url(/assets/images/testing/results-bg.jpg);
list-style: none;
margin-bottom: 0;
padding: 1px 0; }
.store-stock-result {
background-color: #fff;
margin: 15px;
padding-top: 15px;
position: relative; }
.store-stock-result.selected {
background-color: #243044;
color: #fff; }
.store-stock-result.selected h3,
.store-stock-result.selected .store-info,
.store-stock-result.selected .delivery-message {
color: #fff; }
.store-stock-result.selected .store-availability {
background-color: #fff; }
.store-stock-result.selected .store-details p {
color: #243044; }
.store-stock-result.selected .store-select {
background-color: #8dc443;
border-color: #497f18; }
.store-stock-result h3 {
font-size: 14px;
font-size: 0.875rem;
color: #243044;
max-width: 60%; }
.store-stock-result h3 span {
font-size: 13px;
font-size: 0.8125rem;
display: block;
font-weight: 300; }
.store-stock-result .delivery-message {
font-size: 12px;
font-size: 0.75rem;
color: #666;
line-height: 1.4;
margin-bottom: 12px; }
.store-stock-result .store-info {
font-size: 14px;
font-size: 0.875rem;
padding: 12px 0;
text-transform: uppercase; }
.store-stock-result .store-select {
font-size: 15px;
font-size: 0.9375rem;
background-color: #f69f14;
margin-bottom: 15px;
min-width: 123px;
padding: 12px 15px; }
.store-availability {
font-size: 12px;
font-size: 0.75rem;
border: 1px solid #464646;
color: #464646;
font-weight: 700;
line-height: 1.4;
padding: 4px 8px;
position: absolute;
right: 15px;
text-transform: uppercase;
top: 15px; }
.store-availability.available {
background-image: url(/assets/images/icons/validation/store-available.png);
background: url(/assets/images/icons/validation/tick.svg) no-repeat 93% center, none;
background-size: 15px;
border-color: #91bf71;
color: #91bf71 !important; }
.lt-ie9 .store-availability.available {
background-repeat: no-repeat;
background-position: 93% center; }
.store-availability.unavailable {
background-image: url(/assets/images/icons/validation/store-unavailable.png);
background: url(/assets/images/icons/validation/cross.svg) no-repeat 93% center, none;
background-size: 15px;
border-color: #eb0507;
color: #eb0507 !important; }
.lt-ie9 .store-availability.unavailable {
background-repeat: no-repeat;
background-position: 93% center; }
.store-stock-overlay .store-details {
background-color: #f6f6f6;
color: #243044;
display: none; }
.store-stock-overlay .store-details .store-result-map {
height: 160px;
width: 100%; }
.store-stock-overlay .store-details .store {
padding: 15px; }
.store-stock-overlay .store-details .store-select {
margin-bottom: 0; }
.store-stock-overlay .store-details h4 {
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 10px; }
.store-stock-overlay .store-details p {
font-size: 13px;
font-size: 0.8125rem;
color: #243044; }
.store-stock-overlay .store-details .call-btn {
font-size: 14px;
font-size: 0.875rem;
background-color: #243044;
border-color: #3e5376;
padding: 10px 15px; }
.store-stock-overlay .store-details .call-btn i {
color: #fff;
padding-right: 2px;
vertical-align: middle; }
.store-stock-overlay .store-details .opening-times {
background-color: #fff;
padding: 15px; }
.store-stock-overlay .store-details .opening-times table tr td {
border: 0;
padding: 3px 8px; }
.store-stock-overlay .store-details .opening-times table tr td:first-child {
padding-left: 0; }
.store-stock-product-component .store-selected {
padding-bottom: 15px;
margin-top: 0;
position: relative; }
.store-stock-product-component .store-selected h3 {
font-size: 16px;
font-size: 1rem;
color: #4c4c4c;
font-weight: 700;
margin-bottom: 7px;
max-width: 60%; }
.store-stock-product-component .store-selected h3 span {
font-size: 12px;
font-size: 0.75rem;
display: block;
font-weight: 300; }
.store-stock-product-component .store-selected p {
font-size: 12px;
font-size: 0.75rem;
color: #666;
line-height: 1.4;
margin: 15px 0 7px; }
.store-stock-product-component .store-selected a {
color: #4c4c4c;
cursor: pointer; }
.store-stock-product-component .store-selected .store-availability {
top: 0; }
@media screen and (min-width: 47.5em) {
.store-stock-overlay {
background: #eee;
background: rgba(0, 0, 0, 0.6); }
.store-stock-overlay .ll-close {
left: auto;
right: 5px !important; }
.store-stock-overlay .ll-close:after {
content: 'Close \00d7'; }
.store-stock-overlay .ll-modal-dialog {
margin: 15px auto;
max-width: 730px;
min-width: 0; }
.lt-ie9 .store-stock-overlay .ll-modal-dialog {
opacity: 1;
z-index: 999999999999; }
.store-stock-overlay input[type="text"] {
background-position: 3% center;
width: 35%; }
.store-stock-overlay input[type="submit"] {
width: 30%; }
.store-stock-overlay .postcode {
border-top: 1px solid #f6f6f6;
padding-top: 22.5px;
width: 96%; }
.store-stock-list {
border-top: 1px solid #b7b7b7;
padding-top: 15px;
position: relative; }
.store-stock-list:before {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 20px solid #b7b7b7;
content: '';
display: block;
height: 0;
top: -1px;
width: 0; }
.store-stock-list:after {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 20px solid #fff;
content: '';
display: block;
height: 0;
top: -2px;
width: 0; }
.store-availability {
font-size: 15px;
font-size: 0.9375rem;
left: 51%;
margin-top: 6px;
right: auto; }
.store-stock-result.selected .store-info {
color: #243044; }
.store-stock-result.selected .delivery-message p {
color: #243044; }
.store-stock-result h3 {
font-size: 17px;
font-size: 1.0625rem;
font-weight: 400; }
.store-stock-result h3 span {
font-size: 16px;
font-size: 1rem; }
.store-stock-result .delivery-message {
font-size: 14px;
font-size: 0.875rem;
background-color: #f6f6f6;
margin: 0 -15px;
padding: 10px 15px; }
.store-stock-result .delivery-message p {
float: left;
margin-bottom: 0;
width: 75%; }
.store-stock-result .delivery-message a {
clear: none;
text-align: right;
width: 25%; }
.store-stock-overlay .store-select {
display: inline-block;
position: absolute;
right: 15px;
top: 15px;
width: auto; }
.store-stock-overlay .store-details h4 {
font-size: 16px;
font-size: 1rem; }
.store-stock-overlay .store-details p {
font-size: 14px;
font-size: 0.875rem; }
.store-stock-overlay .store-details img {
width: 100%; }
.store-stock-overlay .store-details .store-result-map {
height: 235px; }
.store-stock-overlay .store-details .store-select {
float: right;
position: relative;
right: auto;
top: auto; }
.store-stock-product-component .store-selected {
padding: 15px; }
.store-stock-product-component .store-selected h3 {
font-size: 16px;
font-size: 1rem;
max-width: 70%; }
.store-stock-product-component .store-selected h3 span {
font-size: 14px;
font-size: 0.875rem; }
.store-stock-product-component .store-selected p {
font-size: 14px;
font-size: 0.875rem; }
.store-stock-product-component .store-selected .store-availability {
font-size: 15px;
font-size: 0.9375rem;
left: auto;
padding: 3px 30px 3px 8px;
right: 15px; } }
@media screen and (min-width: 60em) {
.store-stock-product-component .store-selected .store-availability {
font-size: 14px;
font-size: 0.875rem; } }
@media screen and (min-width: 86.375em) {
.store-stock-product-component .store-selected h3 {
font-size: 16px;
font-size: 1rem; }
.store-stock-product-component .store-selected h3 span {
font-size: 14px;
font-size: 0.875rem; }
.store-stock-product-component .store-selected .store-availability {
font-size: 15px;
font-size: 0.9375rem; } }
/* Reviews ================================================================= */
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* =============================================================================
Helper Classes/Mixins
========================================================================== */
.ir, .icn {
color: transparent;
font: 0/0 a;
text-shadow: none; }
/* Vertical alignment - http://goo.gl/Im9MF5 ================================ */
/* Hide from screenreaders and browsers ===================================== */
/*
* Accessibility helper
*/
.ll-a11y {
color: transparent !important;
font: 0/0 serif;
padding: 0 !important;
position: absolute;
text-shadow: none; }
/*
* Visibility
* Avoids setting display to `block` so it works also with `inline-block` and `table`
*/
@media (min-width: 86.375em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-hidden-xlarge {
display: none !important; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-large {
display: none !important; } }
/* Tablets portrait */
@media (min-width: 47.5em) and (max-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-medium {
display: none !important; } }
/* Phone landscape and smaller*/
@media (max-width: 47.5em) {
.ll-visible-medium {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-small {
display: none !important; } }
/* Remove from the flow and screen readers on any device */
.ll-hidden {
display: none !important;
visibility: hidden !important; }
/* Clearfix - Use @extend cf on element ===================================== */
.cf:after, .dl-horizontal:after, .field:after, .nav > ul > li.search form:after, .nav > ul > li.search-form-mobile form:after, .nav > ul > li.store-locate form:after, .pagination:after, .site-header:after, .review-form-box:after, .review-form-box .product:after, .product-range .product-set-item:after, .product-list .product-item:after, .store-list > li a:after {
clear: both;
content: '';
display: table; }
/**
* Clears
*/
.c-both {
clear: both; }
/**
* Floats
*/
.f-right {
float: right; }
.f-left {
float: left; }
.f-none {
float: none; }
/**
* Displays
*/
.d-block {
display: block; }
.d-inline-block {
display: inline-block; }
/**
* Text positioning
*/
.t-center {
text-align: center; }
.t-right {
text-align: right; }
.t-left {
text-align: left; }
/**
* Text styles
*/
.t-underline {
text-decoration: underline !important; }
.t-none {
text-decoration: none !important; }
/**
* Positioning
*/
.p-rel {
position: relative; }
/**
* Super margins
*/
.m-bottom {
margin-bottom: 24px; }
.m-bottom.x01 {
margin-bottom: 12px / 2; }
.m-bottom.x05 {
margin-bottom: 12px; }
.m-bottom.x3 {
margin-bottom: 36px; }
.m-bottom.x4 {
margin-bottom: 48px; }
.m-bottom.x6 {
margin-bottom: 72px; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
/**
* Paddings
*/
.p-all {
padding: 15px; }
/**
* Other position
*/
.v-middle {
vertical-align: middle; }
.v-top {
vertical-align: top; }
/**
* Widths
*/
.w-45 {
width: 45%; }
/**
* Images with borders
*/
.bordered {
border: 1px solid #dcdcdc;
padding: 2px; }
/**
* Images that should be full width
*/
.i-full-width {
display: block;
width: 100%; }
/**
* Need to add a margin to the header on certain pages
* So that elements don't sit flush against it
*/
.header-margin header {
margin-bottom: 20px; }
/**
* Some new margin helpers
*/
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.ll-grid-margin {
margin-top: 20px; }
.ll-margin {
margin-bottom: 20px; }
.ll-margin + .ll-margin {
margin-top: 20px; }
.ll-margin-top {
margin-top: 20px !important; }
.ll-margin-bottom {
margin-bottom: 20px !important; }
.ll-margin-left {
margin-left: 20px !important; }
.ll-margin-right {
margin-right: 20px !important; }
.ll-margin-vertical {
margin-bottom: 20px !important;
margin-top: 20px !important; }
.ll-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important; }
* + .ll-margin {
margin-top: 20px; }
/*
* Smaller margins
*/
.ll-margin-small {
margin-bottom: 10px; }
.ll-margin-small + .ll-margin-small {
margin-top: 10px; }
.ll-margin-small-top {
margin-top: 10px !important; }
.ll-margin-small-bottom {
margin-bottom: 10px !important; }
.ll-margin-small-left {
margin-left: 10px !important; }
.ll-margin-small-right {
margin-right: 10px !important; }
.ll-margin-small-vertical {
margin-bottom: 10px !important;
margin-top: 10px !important; }
.ll-margin-small-horizontal {
margin-left: 10px !important;
margin-right: 10px !important; }
* + .ll-margin-small {
margin-top: 10px; }
/*
* Medium margins
*/
.ll-margin-medium {
margin: 40px; }
.ll-margin-medium-top {
margin-top: 40px !important; }
.ll-margin-medium-bottom {
margin-bottom: 40px !important; }
.ll-margin-medium-left {
margin-left: 40px !important; }
.ll-margin-medium-right {
margin-right: 40px !important; }
.ll-margin-medium-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-medium-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-medium {
margin-top: 40px !important; }
/*
* Larger margins
*/
.ll-margin-large {
margin-bottom: 40px; }
.ll-margin-large + .ll-margin-large {
margin-top: 40px; }
.ll-margin-large-top {
margin-top: 40px !important; }
.ll-margin-large-bottom {
margin-bottom: 40px !important; }
.ll-margin-large-left {
margin-left: 40px !important; }
.ll-margin-large-right {
margin-right: 40px !important; }
.ll-margin-large-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-large-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-large {
margin-top: 40px; }
/*
* Extra Large margins
*/
.ll-margin-xlarge {
margin-bottom: 80px; }
.ll-margin-xlarge + .ll-margin-xlarge {
margin-top: 80px; }
.ll-margin-xlarge-top {
margin-top: 80px !important; }
.ll-margin-xlarge-bottom {
margin-bottom: 80px !important; }
.ll-margin-xlarge-left {
margin-left: 80px !important; }
.ll-margin-xlarge-right {
margin-right: 80px !important; }
.ll-margin-xlarge-vertical {
margin-bottom: 80px !important;
margin-top: 80px !important; }
.ll-margin-xlarge-horizontal {
margin-left: 80px !important;
margin-right: 80px !important; }
* + .ll-margin-xlarge {
margin-top: 80px; }
/*
* Remove margins
*/
.ll-margin-remove {
margin: 0 !important; }
.ll-margin-top-remove {
margin-top: 0 !important; }
.ll-margin-bottom-remove {
margin-bottom: 0 !important; }
.ll-pos-rel {
position: relative; }
/* Include the main product file ============================================ */
.reviewlist > div > article {
border: 1px solid #bebebe;
margin-bottom: 30px;
padding-bottom: 93px;
position: relative; }
.reviewlist > div > article:nth-child(odd) h1,
.reviewlist > div > article:nth-child(odd) .review-details,
.reviewlist > div > article:nth-child(odd) .review-link {
background-color: #f3f3f3; }
.reviewlist > div > article h1 {
margin: 0;
padding: 22.5px 30px; }
.reviewlist > div > article img {
border-bottom: 1px solid #dfdfdf;
display: block; }
.reviewlist > div > article .review-details {
padding: 30px; }
.reviewlist > div > article .review-details h3 {
color: #243044;
font-size: 22px;
font-size: 1.375rem;
margin-bottom: 5px; }
.reviewlist > div > article .review-details .average-rating {
margin-bottom: 5px;
text-align: left; }
.reviewlist > div > article .review-details .reviewer {
text-transform: none; }
.reviewlist > div > article .review-content {
background-color: #fff;
border-top: 1px solid #dfdfdf;
position: relative; }
.reviewlist > div > article .review-content:after, .reviewlist > div > article .review-content:before {
bottom: 100%;
left: 30px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none; }
.reviewlist > div > article .review-content:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: 0; }
.reviewlist > div > article .review-content:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #dcdcdc;
border-width: 22px;
margin-left: -2px; }
.reviewlist > div > article .review-content .reviewer-text {
font-size: 14px;
font-size: 0.875rem;
padding: 30px; }
.reviewlist > div > article .review-content .reviewer-text *:last-child {
margin-bottom: 0; }
.reviewlist > div > article .review-link {
border-top: 1px solid #dfdfdf;
bottom: 0;
left: 0;
margin: 0;
padding: 30px;
position: absolute;
right: 0; }
/* Large/landscape smartphones, small tablets =============================== */
/* Large/landscape smartphones, small tablets =============================== */
/* Large/landscape smartphones, small tablets =============================== */
/* Large Desktop - Add Styling for large desktop computers ================== */
/* =============================================================================
Lister page 2017
========================================================================= */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* Misc ===================================================================== */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* =============================================================================
Helper Classes/Mixins
========================================================================== */
.ir, .icn {
color: transparent;
font: 0/0 a;
text-shadow: none; }
/* Vertical alignment - http://goo.gl/Im9MF5 ================================ */
/* Hide from screenreaders and browsers ===================================== */
/*
* Accessibility helper
*/
.ll-a11y {
color: transparent !important;
font: 0/0 serif;
padding: 0 !important;
position: absolute;
text-shadow: none; }
/*
* Visibility
* Avoids setting display to `block` so it works also with `inline-block` and `table`
*/
@media (min-width: 86.375em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-hidden-xlarge {
display: none !important; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-large {
display: none !important; } }
/* Tablets portrait */
@media (min-width: 47.5em) and (max-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-medium {
display: none !important; } }
/* Phone landscape and smaller*/
@media (max-width: 47.5em) {
.ll-visible-medium {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-small {
display: none !important; } }
/* Remove from the flow and screen readers on any device */
.ll-hidden {
display: none !important;
visibility: hidden !important; }
/* Clearfix - Use @extend cf on element ===================================== */
.cf:after, .dl-horizontal:after, .field:after, .nav > ul > li.search form:after, .nav > ul > li.search-form-mobile form:after, .nav > ul > li.store-locate form:after, .pagination:after, .site-header:after, .review-form-box:after, .review-form-box .product:after, .product-range .product-set-item:after, .product-list .product-item:after, .store-list > li a:after {
clear: both;
content: '';
display: table; }
/**
* Clears
*/
.c-both {
clear: both; }
/**
* Floats
*/
.f-right {
float: right; }
.f-left {
float: left; }
.f-none {
float: none; }
/**
* Displays
*/
.d-block {
display: block; }
.d-inline-block {
display: inline-block; }
/**
* Text positioning
*/
.t-center {
text-align: center; }
.t-right {
text-align: right; }
.t-left {
text-align: left; }
/**
* Text styles
*/
.t-underline {
text-decoration: underline !important; }
.t-none {
text-decoration: none !important; }
/**
* Positioning
*/
.p-rel {
position: relative; }
/**
* Super margins
*/
.m-bottom {
margin-bottom: 24px; }
.m-bottom.x01 {
margin-bottom: 12px / 2; }
.m-bottom.x05 {
margin-bottom: 12px; }
.m-bottom.x3 {
margin-bottom: 36px; }
.m-bottom.x4 {
margin-bottom: 48px; }
.m-bottom.x6 {
margin-bottom: 72px; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
/**
* Paddings
*/
.p-all {
padding: 15px; }
/**
* Other position
*/
.v-middle {
vertical-align: middle; }
.v-top {
vertical-align: top; }
/**
* Widths
*/
.w-45 {
width: 45%; }
/**
* Images with borders
*/
.bordered {
border: 1px solid #dcdcdc;
padding: 2px; }
/**
* Images that should be full width
*/
.i-full-width {
display: block;
width: 100%; }
/**
* Need to add a margin to the header on certain pages
* So that elements don't sit flush against it
*/
.header-margin header {
margin-bottom: 20px; }
/**
* Some new margin helpers
*/
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.ll-grid-margin {
margin-top: 20px; }
.ll-margin {
margin-bottom: 20px; }
.ll-margin + .ll-margin {
margin-top: 20px; }
.ll-margin-top {
margin-top: 20px !important; }
.ll-margin-bottom {
margin-bottom: 20px !important; }
.ll-margin-left {
margin-left: 20px !important; }
.ll-margin-right {
margin-right: 20px !important; }
.ll-margin-vertical {
margin-bottom: 20px !important;
margin-top: 20px !important; }
.ll-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important; }
* + .ll-margin {
margin-top: 20px; }
/*
* Smaller margins
*/
.ll-margin-small {
margin-bottom: 10px; }
.ll-margin-small + .ll-margin-small {
margin-top: 10px; }
.ll-margin-small-top {
margin-top: 10px !important; }
.ll-margin-small-bottom {
margin-bottom: 10px !important; }
.ll-margin-small-left {
margin-left: 10px !important; }
.ll-margin-small-right {
margin-right: 10px !important; }
.ll-margin-small-vertical {
margin-bottom: 10px !important;
margin-top: 10px !important; }
.ll-margin-small-horizontal {
margin-left: 10px !important;
margin-right: 10px !important; }
* + .ll-margin-small {
margin-top: 10px; }
/*
* Medium margins
*/
.ll-margin-medium {
margin: 40px; }
.ll-margin-medium-top {
margin-top: 40px !important; }
.ll-margin-medium-bottom {
margin-bottom: 40px !important; }
.ll-margin-medium-left {
margin-left: 40px !important; }
.ll-margin-medium-right {
margin-right: 40px !important; }
.ll-margin-medium-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-medium-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-medium {
margin-top: 40px !important; }
/*
* Larger margins
*/
.ll-margin-large {
margin-bottom: 40px; }
.ll-margin-large + .ll-margin-large {
margin-top: 40px; }
.ll-margin-large-top {
margin-top: 40px !important; }
.ll-margin-large-bottom {
margin-bottom: 40px !important; }
.ll-margin-large-left {
margin-left: 40px !important; }
.ll-margin-large-right {
margin-right: 40px !important; }
.ll-margin-large-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-large-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-large {
margin-top: 40px; }
/*
* Extra Large margins
*/
.ll-margin-xlarge {
margin-bottom: 80px; }
.ll-margin-xlarge + .ll-margin-xlarge {
margin-top: 80px; }
.ll-margin-xlarge-top {
margin-top: 80px !important; }
.ll-margin-xlarge-bottom {
margin-bottom: 80px !important; }
.ll-margin-xlarge-left {
margin-left: 80px !important; }
.ll-margin-xlarge-right {
margin-right: 80px !important; }
.ll-margin-xlarge-vertical {
margin-bottom: 80px !important;
margin-top: 80px !important; }
.ll-margin-xlarge-horizontal {
margin-left: 80px !important;
margin-right: 80px !important; }
* + .ll-margin-xlarge {
margin-top: 80px; }
/*
* Remove margins
*/
.ll-margin-remove {
margin: 0 !important; }
.ll-margin-top-remove {
margin-top: 0 !important; }
.ll-margin-bottom-remove {
margin-bottom: 0 !important; }
.ll-pos-rel {
position: relative; }
/* =============================================================================
CTAs - Small screens and up
========================================================================= */
.cta {
font-size: .8rem;
letter-spacing: .5px;
line-height: 1.4; }
.cta.new--box, .cta.orange--box, .cta.info--box, .cta.green--box, .cta.price-match--box {
color: #d0021b;
display: inline-block;
font-weight: 700;
padding: 7.5px; }
.cta.blue {
color: #28324b;
display: inline-block;
font-weight: 700; }
.cta.new {
color: #d0021b; }
.cta.orange {
color: #f5a623; }
.cta.info {
color: #28324b; }
.cta.green {
color: #458f29; }
.cta.price-match {
color: #00aee2; }
.cta.orange--box {
border-color: #f5a623;
color: #f5a623; }
.cta.info--box {
border-color: #28324b;
color: #28324b; }
.cta.green--box {
border-color: #458f29;
color: #458f29; }
.cta.price-match--box {
background-color: #00aee2;
border-color: #00aee2;
color: #fff; }
.cta.price-match--box > span {
color: #565656; }
.cta.was, .cta.now {
display: block;
font-weight: 700;
margin-bottom: 5px; }
.cta.was-price {
text-decoration: line-through; }
.cta.now-price {
font-size: 25px;
font-size: 1.5625rem; }
.cta.save {
font-size: 16px;
font-size: 1rem; }
/**
* Special offers
*/
.price-match-section {
border: 1px solid #00aee2;
margin: 15px 0; }
.price-match-section h4 {
font-size: 18px;
font-size: 1.125rem;
background-color: #00aee2;
color: #fff;
padding: 7.5px 10px; }
.price-match-section h4 span {
color: #565656; }
.price-match-section p {
padding: 0 10px; }
.note {
color: #28324b;
font-family: "DearJoe", sans-serif; }
.roundel {
font-size: 18px;
font-size: 1.125rem;
background-color: #28324b;
border-radius: 50%;
color: #fff;
font-family: "AbrilReg", sans-serif;
height: 64px;
line-height: 1.1;
padding: 20px 0;
position: absolute;
right: 12px;
text-align: center;
text-transform: uppercase;
top: 12px;
width: 64px;
z-index: 10; }
.roundel.new {
background-color: #faa300;
line-height: 1.4; }
.roundel.offers {
font-size: 13px;
font-size: 0.8125rem;
background-color: #dc062e; }
.roundel.exclusive {
font-size: 10px;
font-size: 0.625rem; }
.related-searches {
background: transparent;
margin: 15px 0 0 0;
padding: 0 15px;
padding-top: 0; }
.related-searches h3 {
text-align: center;
color: #464646;
font-family: "HumanistReg", sans-serif; }
.related-searches ul {
margin-bottom: 0;
text-align: center; }
.related-searches ul li {
margin: 0 5px 0 5px; }
.related-searches ul li:before {
content: '|';
position: relative;
left: -4px; }
.related-searches ul li:first-child:before {
content: none; }
.related-searches ul li a {
font-size: 15px;
font-size: 0.9375rem;
border: 0;
color: #464646;
display: inline-block;
font-family: "HumanistReg", sans-serif;
line-height: 0.9375rem;
padding: 0;
text-decoration: none;
text-transform: capitalize; }
.related-searches ul li a:hover {
background-color: transparent;
text-decoration: underline; }
.related-searches .wrapper {
margin: 0 auto;
padding: 0;
width: 100%; }
@media screen and (max-width: 60em) {
/**
* Related search queries at the bottom of the page
*/
.related-searches {
padding-top: 15px;
border-top: 1px solid #ebebeb; }
.related-searches ul li:before {
content: none; }
.related-searches ul li a {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4; } }
/* =============================================================================
Forms - Base
========================================================================= */
form header {
border-bottom: 1px solid #ddd;
margin-bottom: 15px; }
.field {
margin-bottom: 15px; }
label,
input,
button,
select,
textarea {
font-size: 18px;
font-size: 1.125rem; }
label {
cursor: pointer; }
input,
select {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0; }
input[type="checkbox"] {
-webkit-appearance: checkbox; }
input[type="radio"] {
-webkit-appearance: radio; }
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
background-color: #fff;
border-radius: 4px;
border: 1px solid #464646;
-webkit-box-shadow: none;
box-shadow: none;
display: inline-block;
padding: 4px 6px; }
input[type="file"],
input[type="range"] {
display: block; }
input,
select,
textarea {
width: 100%; }
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
-webkit-transition: all 0.2s linear;
/* Android 2.1 - 4.3, Blackberry 7+ */
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
background-color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #464646; }
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */ }
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
line-height: normal;
margin-top: 1px \9;
/* IE8-9 */ }
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; }
input[type="file"].btn--full,
input[type="image"].btn--full,
input[type="submit"].btn--full,
input[type="reset"].btn--full,
input[type="button"].btn--full,
input[type="radio"].btn--full,
input[type="checkbox"].btn--full {
width: 100%; }
select[multiple],
select[size] {
height: auto; }
select,
.ll-form select {
background-image: url(/assets/images/icons/small/select-arrow.png);
background-position: right 12px top 50%;
background-repeat: no-repeat;
background-size: 7px; }
.actions {
margin-bottom: 15px; }
.field--radio .input label,
.field--checkbox-list .input label,
.field--radio-list .input label {
margin: 0 5px 0 7.5px;
text-align: left;
width: auto; }
.field--radio .input label:first-child,
.field--checkbox-list .input label:first-child,
.field--radio-list .input label:first-child {
margin-left: 0; }
/**
* Placeholders
*/
:-ms-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #28324b !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
::-ms-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #28324b !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
::-webkit-input-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #28324b !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
line-height: 1.4;
text-transform: none; }
::-moz-placeholder {
font-size: 13px;
font-size: 0.8125rem;
color: #28324b !important;
font-family: "Humanist", sans-serif !important;
font-weight: 400;
opacity: 1;
text-transform: none; }
/* ========================================================================
Lakeland Component: Form
========================================================================== */
/**
* Form "boxes" for highlighting for sections
*/
.ll-form .form-box {
border: 1px solid #dcdcdc;
padding: 15px; }
.ll-form .form-box .ll-form-row:last-child {
margin: 0; }
/*
* Address inconsistent `text-transform` inheritance which is only inherit in Firefox
*/
.ll-form select {
text-transform: none; }
/*
* Removes inner padding and border in Firefox 4+.
*/
.ll-form input::-moz-focus-inner {
border: 0;
padding: 0; }
/*
* Removes excess padding in IE 8/9/10.
*/
.ll-form input[type="checkbox"],
.ll-form input[type="radio"] {
padding: 0; }
/*
* Improves consistency of cursor style for clickable elements
*/
.ll-form input[type="checkbox"]:not(:disabled),
.ll-form input[type="radio"]:not(:disabled) {
cursor: pointer; }
/*
* Remove default style in iOS.
*/
.ll-form textarea,
.ll-form input:not([type]),
.ll-form input[type="text"],
.ll-form input[type="password"],
.ll-form input[type="email"],
.ll-form input[type="url"],
.ll-form input[type="search"],
.ll-form input[type="tel"],
.ll-form input[type="number"],
.ll-form input[type="datetime"] {
-webkit-appearance: none; }
/*
* Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
*/
.ll-form input[type="search"]::-webkit-search-cancel-button,
.ll-form input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/*
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
.ll-form input[type="number"]::-webkit-inner-spin-button,
.ll-form input[type="number"]::-webkit-outer-spin-button {
height: auto; }
/*
* Define consistent border, margin, and padding.
*/
.ll-form fieldset {
border: 0;
margin: 0 0 30px;
padding: 0; }
.ll-form textarea {
overflow: auto;
vertical-align: top; }
/*
* Removes placeholder transparency in Firefox.
*/
.ll-form ::-moz-placeholder {
opacity: 1; }
/*
* Removes `box-shadow` for invalid controls in Firefox.
*/
.ll-form :invalid {
-webkit-box-shadow: none;
box-shadow: none; }
/*
* Vertical alignment
*/
.ll-form input:not([type="radio"]):not([type="checkbox"]),
.ll-form select {
vertical-align: middle; }
/* Style
========================================================================== */
/*
* Remove margin from the last-child
*/
.ll-form > :last-child {
margin-bottom: 0; }
/*
* Controls
* Except for `range`, `radio`, `checkbox`, `file`, `submit`, `reset`, `button` and `image`
*/
.ll-form select,
.ll-form textarea,
.ll-form input:not([type]),
.ll-form input[type="text"],
.ll-form input[type="password"],
.ll-form input[type="datetime"],
.ll-form input[type="datetime-local"],
.ll-form input[type="date"],
.ll-form input[type="month"],
.ll-form input[type="time"],
.ll-form input[type="week"],
.ll-form input[type="number"],
.ll-form input[type="email"],
.ll-form input[type="url"],
.ll-form input[type="search"],
.ll-form input[type="tel"],
.ll-form input[type="color"] {
border: 1px solid #464646;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
color: #000;
display: inline;
height: 45px;
line-height: 1;
max-width: 100%;
padding: 8px;
-webkit-transition: all linear .2s;
-o-transition: all linear .2s;
transition: all linear .2s; }
.ll-form select ,
.ll-form textarea ,
.ll-form input:not([type]) ,
.ll-form input[type="text"] ,
.ll-form input[type="password"] ,
.ll-form input[type="datetime"] ,
.ll-form input[type="datetime-local"] ,
.ll-form input[type="date"] ,
.ll-form input[type="month"] ,
.ll-form input[type="time"] ,
.ll-form input[type="week"] ,
.ll-form input[type="number"] ,
.ll-form input[type="email"] ,
.ll-form input[type="url"] ,
.ll-form input[type="search"] ,
.ll-form input[type="tel"] ,
.ll-form input[type="color"] {
background-position: right center; }
.ll-form select:focus,
.ll-form textarea:focus,
.ll-form input:not([type]):focus,
.ll-form input[type="text"]:focus,
.ll-form input[type="password"]:focus,
.ll-form input[type="datetime"]:focus,
.ll-form input[type="datetime-local"]:focus,
.ll-form input[type="date"]:focus,
.ll-form input[type="month"]:focus,
.ll-form input[type="time"]:focus,
.ll-form input[type="week"]:focus,
.ll-form input[type="number"]:focus,
.ll-form input[type="email"]:focus,
.ll-form input[type="url"]:focus,
.ll-form input[type="search"]:focus,
.ll-form input[type="tel"]:focus,
.ll-form input[type="color"]:focus {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */ }
.ll-form select:disabled,
.ll-form textarea:disabled,
.ll-form input:not([type]):disabled,
.ll-form input[type="text"]:disabled,
.ll-form input[type="password"]:disabled,
.ll-form input[type="datetime"]:disabled,
.ll-form input[type="datetime-local"]:disabled,
.ll-form input[type="date"]:disabled,
.ll-form input[type="month"]:disabled,
.ll-form input[type="time"]:disabled,
.ll-form input[type="week"]:disabled,
.ll-form input[type="number"]:disabled,
.ll-form input[type="email"]:disabled,
.ll-form input[type="url"]:disabled,
.ll-form input[type="search"]:disabled,
.ll-form input[type="tel"]:disabled,
.ll-form input[type="color"]:disabled {
background-color: #f9f9f9;
border-color: #f5f5f5;
color: #aaa; }
/*
* Placeholders
*/
.ll-form :-ms-input-placeholder {
color: #333333 !important; }
.ll-form ::-moz-placeholder {
color: #333333; }
.ll-form ::-webkit-input-placeholder {
color: #333333; }
.ll-form :disabled:-ms-input-placeholder {
color: #666666 !important; }
.ll-form :disabled::-moz-placeholder {
color: #666666; }
.ll-form :disabled::-webkit-input-placeholder {
color: #666666; }
/*
* Legend
*/
.ll-form legend {
border: 0;
font-size: 16;
padding: 0;
padding-bottom: 15px;
width: 100%; }
.ll-form legend:after {
content: '';
display: block; }
/* Size modifiers
* Higher specificity needed to override defaults
========================================================================== */
select.ll-form-small,
textarea.ll-form-small,
input[type].ll-form-small,
input:not([type]).ll-form-small {
font-size: 12;
height: 40px;
padding: 3px; }
select.ll-form-large,
textarea.ll-form-large,
input[type].ll-form-large,
input:not([type]).ll-form-large {
font-size: 16;
height: 50px;
padding: 8px 6px; }
.ll-form-controls.ll-form-small {
font-size: 14px;
font-size: 0.875rem; }
/* Reset height
* Must be after size modifiers
========================================================================== */
.ll-form textarea,
.ll-form select[multiple],
.ll-form select[size] {
height: auto; }
/* Validation states
* Using !important to keep the selector simple
========================================================================== */
/*
* Error state
*/
.ll-form-danger {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAcCAYAAACZOmSXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY2MkFDREM4NkY2OTExRTY5Mjk2Qzg5OUExNzgyMjZFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjY2MkFDREM5NkY2OTExRTY5Mjk2Qzg5OUExNzgyMjZFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjYyQUNEQzY2RjY5MTFFNjkyOTZDODk5QTE3ODIyNkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjYyQUNEQzc2RjY5MTFFNjkyOTZDODk5QTE3ODIyNkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Hes7LAAABiElEQVR42ryWy0oDMRSGMzqioLTewAoiIgXFnQgiaBFdC9514UbEjS50YTeKYCt4o+1buBKfwgdw4dpXsHb2Sv0DpxDDNMlckh8+6CSTfJPMzJl6weosi5ll8Ey/D8Bb1Ak6YooHwSsYI15Avyv5NRgWjkfAlQv5JDgNaT8DE7blj6A7pJ23PdiUL4AdRf8+mLclrwJP0c/7ajbk22DR4LwlsJWmvIvutWmeaEwq8hOQF46b4FuiKfTnaYwynkGFy4JP6b0OQopKg85t5YsuopFk5ZeS2DRDusKjk4+DcxY/ysKjk9+BngRyZeFRyefoa5U0bQuPSl7RFBTTeFScjOVrYIWllwLYNJH7VCR0qxmQ0O3SPc2tlB+CGc1EGVCXyGjGTINjlbwX3DJ7uQF97eRFMGowSUDbLBIYjMuBizB5juS2U6S/Xf/kZXFLLIY7SqKcP2BHzF34gzflCw+CH2FwVvqERg13lfjKO8EGc591Lv+l99R16q17vgc+6EJs5we8g90/AQYAa4U4X6nnObEAAAAASUVORK5CYII=);
background-position: right 10px center !important;
background-repeat: no-repeat;
background-size: 15px;
border-color: #d0021b !important;
color: #d0021b !important;
padding-right: 45px !important;
/* Added so validation icons dont mix with input value */ }
select.ll-form-danger {
background-image: none; }
span.ll-form-danger,
.ll-form .errorfeedback {
font-size: 14px;
font-size: 0.875rem;
background-image: none;
color: #d0021b !important;
display: block;
font-family: "HumanistReg", sans-serif;
line-height: 1.5;
margin-top: 5px;
position: relative;
z-index: 1; }
/*
* Success state
*/
.ll-form-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0MjE2QjM4RTZENTExRTY4RUMzODQ4NDlGQ0M0MTY0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ0MjE2QjM5RTZENTExRTY4RUMzODQ4NDlGQ0M0MTY0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDQyMTZCMzZFNkQ1MTFFNjhFQzM4NDg0OUZDQzQxNjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDQyMTZCMzdFNkQ1MTFFNjhFQzM4NDg0OUZDQzQxNjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7KieV+AAADWklEQVR42ryXe0hTcRTHz+5MyxSbaD5wkdN8IGaKkFEUSUMpo3wQFL0GGlRgGbbsNaIXNoP6QwjMWP3TH2WJLf+Q9Zf4R0HYA3uprWiwmqm1tmlOjc7v9ttlrt27e7fVgcPd3b27n3t+5/y+50wGIkx9JTcaD5vJR/RidBV6LL3sQDejP0U3oRtNDW8mAj1TFgCYhAct+j70GBBnTvQ2dD2+gE0yGKF1eGhBj4PgzI5+FOHXRYERGIkHA/oOCI/dRtfgC7h5wRT6kOYynEZyX+ENZ3xuMIQLGrcgHvJSi7iY6LM5k/vk9ES4oC01Bqgs3AWvrP1g+2ElX+dnlCdazT2j/dxS0+p9F0IhcbYwKhZaqm9C5uJc9nzC7YSm+7Xw9stLT8Flk2r3LLU2XNDmynYOSiw6Mgaaq9ohJ3k5UIaWjZiKg03CPhWEZifn+71Olrzhzk7PPk9iqCKFBI2KmA8Xt7bxQj+ODcEZY73nlLA2M6FWMYGe33INclMK/F632i1sju2T43N2LkO1NyRogXIlL7Tx7m4Yd331vVTMUMHnrDyvGtITsgJCI+TzREFHnX7lWsV4dRnYmL8NjqjPgb7aIAgnUN2mq7xQAtN27OWDEovllKs0pwIOleqoAChYuDJexQstUa3nhTZ27IERx2fBFSNgB4EeK2sGmYzxUh8FXKq6AamLlkiGWr9/CpQpByGZ1y4rmwP1WEJMElyuucXCGZkcGtUXeKH2yW9iocTMctTP4r73j4oyEnMgTZH+1x1EedZkqlHwC2FdVjkvVHtPA5Zxs9gN0U3CNM3MTsPZ7sPwzPLY710k8tWZGwShH0YHJbVJAjYSGSNwXdcBeGF5IvrXzilHMFAimUY5tqlpXO4EPFk1+2sGeod6IC9lBSTHpQn+mnSd4511MDzyWqrutGJ36vZUlJ62LJia+Qmnuvazoi4E9Wp1UucwPTcIYNQujHqMNgwgkfcNm6BQWcLm19sm3a5gocTqMdreORMImQwQTuSKbTHTs2522b3hZDV0Dw7CgMBqCA19CD3JN3Np6GDGmguLp6mzFgZtAyz0NKbguYTi8xn2NJLHWzJDKRVLg4404Hj7Pwd6Oa+m/cm5gaaD5D1Swj5tRd/uKSTJ/53+5Z+23wIMAEgjWu+RiaI2AAAAAElFTkSuQmCC");
background-position: right 10px center !important;
background-repeat: no-repeat;
background-size: 15px;
border-color: #458f29 !important;
padding-right: 45px !important;
/* Added so validation icons dont mix with input value */ }
input[type="password"].ll-form-success {
background-image: none; }
select.ll-form-success {
background-image: none; }
textarea.ll-form-danger,
textarea.ll-form-success {
background-position: right 7px; }
/* Style modifiers
* Using !important to keep the selector simple
========================================================================== */
/*
* Blank form
*/
.ll-form-blank {
background: none !important;
border-color: transparent !important;
border-style: dashed !important; }
.ll-form-blank:focus {
border-color: #eee !important; }
/**
* For buttons that need to sit over the input
*/
.ll-inline-button {
position: relative; }
.ll-inline-button button,
.ll-inline-button .inline-submit {
height: 45px;
line-height: 45px;
padding: 0 15px;
position: absolute;
right: 0;
top: 0; }
/**
* Inline buttons
*/
.input-button {
position: relative; }
.input-button button {
height: 45px;
line-height: 45px;
padding: 0 15px;
position: absolute;
right: 0;
top: 0; }
.input-button button .ll-icon-magnifying_glass {
color: #fff; }
/* Size sub-modifiers
========================================================================== */
/*
* Fixed widths
* Different widths for mini sized `input` and `select` elements
*/
input.ll-form-width-mini {
width: 40px; }
select.ll-form-width-mini {
width: 65px; }
.ll-form-width-small {
width: 40%; }
.ll-form-width-medium {
width: 200px; }
.ll-form-width-large {
width: 100%; }
.ll-form-width-full {
width: 100%; }
/* Sub-objects: `ll-form-row`
* Groups labels and controls in rows
========================================================================== */
/**
* Standard form labels
*/
.ll-form h3 {
font-size: 22px;
font-size: 1.375rem;
color: #28324b;
margin-bottom: 22.5px;
text-transform: none; }
/**
* Form rows
*/
.ll-form-row {
margin-bottom: 15px; }
.ll-form-row.with-gap {
margin-bottom: 30px; }
.ll-form-row.with-big-gap {
margin-bottom: 37.5px; }
/*
* Micro clearfix
* Needed for `ll-form-horizontal` modifier
*/
.ll-form-row:before,
.ll-form-row:after {
content: '';
display: table; }
.ll-form-row:after {
clear: both; }
/*
* Vertical gutter
*/
.ll-form-row + .ll-form-row {
margin-top: 15px; }
/* Help text
* Sub-object: `ll-form-help-inline`, `ll-form-help-block`
========================================================================== */
.ll-form-help-inline {
display: block;
line-height: 45px;
margin: 0 0 0 7.5px; }
.ll-form-width-medium + .ll-form-help-inline {
display: inline-block; }
.ll-form-help-block {
display: block;
margin: 7.5px 0 0 5px; }
.ll-form-help-block a {
color: #000;
text-decoration: underline; }
/* Controls content
* Sub-object: `ll-form-controls`, `ll-form-controls-condensed`
========================================================================== */
/**
* The actual controls
*/
.ll-form-controls {
position: relative; }
/*
* Remove margins
*/
.ll-form-controls > :first-child {
margin-top: 0; }
.ll-form-controls > :last-child {
margin-bottom: 0; }
/*
* Group controls and text into blocks with a small spacing between blocks
*/
.ll-form-controls-condensed {
margin: 7.5px 0; }
/* Modifier: `ll-form-stacked`
* Requires sub-object: `ll-form-label`
========================================================================== */
.ll-form-label {
font-size: 16px;
font-size: 1rem; }
.ll-form-stacked .ll-form-row {
margin-bottom: 30px; }
.ll-form-stacked .ll-form-row:last-child {
margin-bottom: 0; }
.ll-form-stacked .ll-form-label {
font-size: 18px;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase; }
.ll-form-stacked .ll-form-label,
.ll-form-horizontal .ll-form-label {
display: block;
margin-bottom: 15px; }
/* Sub-object: `ll-form-icon`
========================================================================== */
/*
* 1. Container width fits its content
* 2. Create position context
* 3. Prevent `inline-block` consequences
*/
.ll-form-icon {
display: inline-block;
max-width: 100%;
position: relative; }
/*
* 1. Make form element clickable through icon
*/
.ll-form-icon > [class*='ll-icon-'] {
color: #000;
font-size: 16;
margin-top: -8;
pointer-events: none;
position: absolute;
text-align: center;
top: 50%;
width: 16; }
.ll-form-icon:not(.ll-form-icon-flip) > input {
padding-left: 16 !important; }
/*
* Sub-modifier: `ll-form-icon-flip`
*/
.ll-form-icon-flip > [class*='uk-icon-'] {
right: 0; }
.ll-form-icon-flip > input {
padding-right: 16 !important; }
/**
* Fancy labels
*/
.label-checkbox,
.label-radio {
font-size: 16px;
font-size: 1rem;
cursor: pointer;
display: inline-block;
line-height: 27px;
min-height: 27px;
padding: 0 0 0 20px;
position: relative;
text-align: left; }
.label-checkbox input,
.label-radio input {
-webkit-appearance: checkbox;
left: 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.label-checkbox.ll-enabled,
.label-radio.ll-enabled {
-webkit-appearance: none;
padding: 0 0 0 40px; }
.label-checkbox.ll-enabled input,
.label-radio.ll-enabled input {
left: -9999px;
top: 0;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.label-checkbox.large,
.label-radio.large {
line-height: 34px;
min-height: 34px; }
.label-checkbox.large.ll-enabled,
.label-radio.large.ll-enabled {
padding: 0 0 0 47px; }
.label-checkbox.block,
.label-radio.block {
display: block; }
.label-checkbox.block + .label-checkbox.block,
.label-radio.block + .label-checkbox.block, .label-checkbox.block +
.label-radio.block,
.label-radio.block +
.label-radio.block {
margin-left: 0; }
.label-checkbox + .label-checkbox,
.label-radio + .label-checkbox, .label-checkbox +
.label-radio,
.label-radio +
.label-radio {
margin-left: 30px; }
.label-radio.ll-enabled {
background: url(/assets/images/icons/small/radio-off.png) no-repeat left center; }
.label-radio.ll-enabled.r_on {
background-image: url(/assets/images/icons/small/radio-on.png); }
.label-radio.ll-enabled.large {
background: url(/assets/images/icons/small/radio-off-large.png) no-repeat left center; }
.label-radio.ll-enabled.large.r_on {
background-image: url(/assets/images/icons/small/radio-on-large.png); }
.label-checkbox.ll-enabled {
background: url(/assets/images/icons/small/check-off.png) no-repeat left center; }
.label-checkbox.ll-enabled.c_on {
background-image: url(/assets/images/icons/small/check-on.png); }
.label-checkbox.ll-enabled.large {
background: url(/assets/images/icons/small/check-off-large.png) no-repeat left center; }
.label-checkbox.ll-enabled.large.c_on {
background-image: url(/assets/images/icons/small/check-on-large.png); }
.label-checkbox-inline {
display: inline-block;
padding-top: 0; }
.label-checkbox.c_disabled,
.label-radio.r_disabled {
color: #bbb; }
/* =============================================================================
Buttons
========================================================================= */
.btn,
button {
font-size: 14px;
font-size: 0.875rem;
background-color: #3b7b23;
border: 0;
border-color: transparent;
border-radius: 4px;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 300;
max-height: 45px;
padding: 11px 15px;
text-align: center;
text-decoration: none;
text-transform: none;
-webkit-transition: background-color .2s linear, border-color .2s linear;
-o-transition: background-color .2s linear, border-color .2s linear;
transition: background-color .2s linear, border-color .2s linear;
vertical-align: middle; }
.btn:hover,
button:hover {
background-color: #458f29;
color: #fff;
text-decoration: none; }
input[type="submit"] {
text-transform: none; }
.btn-secondary {
background-color: #faa300;
color: #28324b; }
.btn-secondary:hover {
background-color: #e19200; }
.btn-secondary--inverted {
background-color: transparent;
border: 1px solid #797979;
color: #464646; }
.btn-secondary--inverted:hover {
background-color: #faa300;
border-color: #faa300; }
.btn-alt {
background-color: #28324b; }
.btn-alt:hover {
background-color: #1f273a;
color: #fff; }
.tertiary-link {
background-color: transparent;
color: #28324b;
font-family: "HumanistBold", sans-serif;
position: relative; }
.tertiary-link:after {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
content: '>';
left: 101%;
opacity: 0;
-webkit-transition: opacity .1s linear .1s;
-o-transition: opacity .1s linear .1s;
transition: opacity .1s linear .1s; }
.tertiary-link:hover {
background-color: transparent;
color: #28324b;
text-decoration: underline; }
.tertiary-link:hover:after {
opacity: 1; }
.btn-white {
background-color: #fff;
border: 1px solid #52881d;
border-color: #ebebeb #9eaf88 #809960 #e4e4e4;
color: #767676; }
.btn-white:hover {
background-color: #f2f2f2;
color: #000; }
.btn-grey {
background-color: #dcdcdc;
color: #000; }
.btn-grey:hover {
background-color: #cfcfcf;
color: #000; }
.btn-red {
background-color: #d0021b;
border-color: #ff6a6a #b70000 #950000 #ff3a3a; }
.btn-red i {
color: #fff; }
.btn-red:hover {
background-color: #b70218; }
.btn-none {
background-color: transparent;
border: 0;
color: #b2b2b2;
padding: 0;
text-decoration: underline; }
.btn-none:hover {
background-color: transparent;
color: #28324b; }
.btn-dark-border {
background-color: #fff;
border: 1px solid #959595;
color: #000; }
.btn-dark-border:hover {
background-color: #959595;
color: #fff; }
.btn-transparent {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
padding: 12px 22px; }
.btn-transparent:hover {
background-color: rgba(255, 255, 255, 0.2); }
.btn-clear {
background-color: transparent;
border: 1px solid #fff;
color: #fff; }
.btn-clear:hover {
background-color: rgba(255, 255, 255, 0.2); }
.btn--sml {
font-size: 12px;
font-size: 0.75rem; }
.btn--full {
display: block; }
.btn--match {
height: 45px;
line-height: 45px;
padding: 0 15px; }
.btn--wrap {
white-space: pre-wrap !important; }
.btn-arrow:hover .button-icon--arrow {
right: 10px; }
.btn-arrow .button-icon--arrow {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
fill: #fff;
height: 20px;
right: 15px;
-webkit-transition: right .3s ease;
-o-transition: right .3s ease;
transition: right .3s ease;
width: 20px; }
@media only screen and (min-width: 47.5em) {
.btn--lrg {
font-size: 22px;
font-size: 1.375rem; } }
.btn--icon .button-icon {
fill: #fff;
float: left;
height: 18px;
vertical-align: middle;
width: 25px; }
.d-inline-block {
display: inline-block; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
.v-top {
vertical-align: top; }
.lister-page label {
font-size: 14px;
font-size: 0.875rem;
display: block; }
.lister-page select,
.lister-page select.quantity {
font-size: 14px;
font-size: 0.875rem;
-moz-appearance: none;
background-color: #fff;
background-image: url("/assets/images/icons/new/arrow_down.png");
background-position: right 8px top 50%;
background-repeat: no-repeat;
background-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
float: none;
height: 45px;
line-height: 1.25; }
.category-title-wrapper {
float: left;
max-width: 60%; }
.category-title {
font-family: "HumanistReg", sans-serif;
line-height: 1.2;
margin: 0;
padding: 12px 0;
text-transform: capitalize; }
.category-title span {
font-size: 14px;
font-size: 0.875rem;
display: block; }
.sorts .pagination {
display: inline-block; }
.sorts .pagination li {
margin-right: 5px;
text-align: center; }
.sorts .pagination li a {
font-size: 14px;
font-size: 0.875rem;
color: #28324b;
height: 44px;
padding: 2px 12px;
position: relative;
text-align: center;
text-decoration: none;
width: 40px; }
.sorts .pagination li a svg {
height: 15px;
margin-top: -3px;
vertical-align: middle;
width: 15px; }
.sorts .pagination li .btn {
background-color: #fff; }
.sorts .pagination li .btn.active {
background-color: #faa300;
border: 0;
color: #28324b;
text-decoration: none; }
.sorts .pagination li .btn.active:hover {
background-color: #ffad15; }
.sorts .pagination li .btn:hover {
background-color: #eee; }
.sorts .pagination li .btn-next,
.sorts .pagination li .btn-prev {
background-color: #28324b;
border: 0; }
.sorts .pagination li .btn-next:hover,
.sorts .pagination li .btn-prev:hover {
background-color: #313d5c; }
.sorts .pagination li .btn-next svg,
.sorts .pagination li .btn-prev svg {
fill: #fff; }
.sorts .pagination li .page-fill {
background-color: transparent;
border: 1px solid #dadada; }
.sorts .pagination li.disabled .btn-next,
.sorts .pagination li.disabled .btn-prev {
background-color: transparent;
border: 1px solid #dadada; }
.sorts .pagination li.disabled .btn-next svg,
.sorts .pagination li.disabled .btn-prev svg {
fill: #666; }
.sorts .view-all {
float: left;
margin-bottom: 10px;
margin-right: 10px; }
.sorts select {
font-size: 14px;
font-size: 0.875rem; }
.side-nav .side-nav-box {
border-top-width: 1px; }
/**
* The filters panel on the left
*/
.filters-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.filters-wrap > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.filters-wrap .ll-form select {
font-size: 14px;
font-size: 0.875rem; }
.side-nav.search-nav {
margin-right: 12px; }
.side-nav.search-nav.showing {
left: 0;
position: absolute;
right: 0; }
.side-nav.search-nav h3 {
font-size: 18px;
font-size: 1.125rem;
font-family: "Humanist", sans-serif;
line-height: 1;
margin-bottom: 0;
padding: 10px 15px; }
.side-nav.search-nav .side-nav-box h4 {
cursor: pointer; }
.side-nav.search-nav .side-nav-box ul li:first-child {
margin-top: 0; }
.side-nav.search-nav .side-nav-box ul li a:hover {
padding-left: 0;
text-decoration: none; }
.side-nav.search-nav .side-nav-box ul li a img {
height: 22px;
margin-right: 6px;
margin-top: -1px;
vertical-align: middle;
width: 22px; }
.side-nav.search-nav .side-nav-box .average-rating {
display: inline-block;
height: 20px;
padding-right: 10px;
position: relative;
top: 0; }
.side-nav.search-nav .side-nav-box .hider-content {
background-color: transparent; }
/**
* The product list
*/
.product-list .product-row > .mob-2:nth-child(3n) {
margin-left: 0; }
.product-list .product-item {
color: #000;
display: block;
padding: 6px 0 12px;
text-align: center;
text-decoration: none; }
.product-list .product-item > a {
text-decoration: none; }
.product-list .product-item > a h4 {
color: #000; }
.product-list .product-item .product-image {
position: relative;
overflow: hidden; }
.product-list .product-item .product-image img {
display: block;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto; }
.product-list .product-item .product-image img.picture, .product-list .product-item .product-image img.alt-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear; }
.product-list .product-item .product-image img.picture.loaded, .product-list .product-item .product-image img.alt-img.loaded {
opacity: 1; }
.product-list .product-item .product-detail h4 {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.4;
margin-bottom: 0;
padding-bottom: 6px; }
.product-list .product-item .product-detail .product-cta {
border: 0;
margin: 0; }
.product-list .product-item .product-detail .product-cta .cta {
font-size: .8rem;
border: 0;
letter-spacing: .5px;
padding: 0 0 7.5px;
text-transform: none; }
.product-list .product-item .product-detail .average-rating .review-count {
font-size: 12px;
font-size: 0.75rem;
color: #464646;
vertical-align: text-bottom; }
.product-list .product-item .options {
margin-bottom: 6px;
padding: 6px 0; }
.product-list .product-item .options.recipe {
border-bottom: 0; }
.product-list .product-item .options p {
margin: 0; }
.product-list .product-item .options .was,
.product-list .product-item .options .save {
display: inline-block;
font-family: "HumanistBold", sans-serif;
font-size: .8rem; }
.product-list .product-item .options .was {
color: #4c4c4c; }
.product-list .product-item .options .save {
color: #464646; }
.product-list .product-item .options .price {
font-size: 16px;
font-size: 1rem;
color: #dc062e;
display: block;
font-family: "HumanistBold", sans-serif; }
.product-list .product-item .options .price.now {
color: #d0021b; }
.product-list .product-item .details-bottom {
margin-left: auto;
margin-right: auto;
padding-bottom: 6px;
position: relative; }
.product-list .product-item .details-bottom #addToBasket {
margin-top: 6px; }
.product-list .product-item .details-bottom #addToBasket button[type=submit] {
padding: 5px 10px;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; }
.product-list .product-item .details-bottom #addToBasket button[type=submit] svg {
padding: 1px;
width: 12px;
height: 12px;
fill: white;
vertical-align: top; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn {
color: #3b7b23;
background: white;
border: 1px solid #3b7b23;
font-family: 'HumanistBold', sans-serif;
font-size: 14px;
font-size: 0.875rem; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn span {
color: #3b7b23; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn svg {
fill: #3b7b23; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn svg path {
stroke: #3b7b23; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn:hover {
color: white;
background: #3b7b23;
border: 1px solid #3b7b23;
font-family: 'HumanistBold', sans-serif; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn:hover span {
color: white; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn:hover svg {
fill: white; }
.product-list .product-item .details-bottom #addToBasket button[type=submit].outline-btn:hover svg path {
stroke: white; }
.product-list .product-item .average-rating {
display: block;
text-align: center; }
.product-list .product-item .stock-message-container {
font-size: 12px;
font-size: 0.75rem;
color: #464646;
display: block;
text-align: left; }
.product-list .product-item .stock-message-container.in-stock, .product-list .product-item .stock-message-container.out-of-stock {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
text-align: center; }
.product-list .product-item .stock-message-container.in-stock .stock-icon,
.product-list .product-item .stock-message-container.in-stock .stock-message, .product-list .product-item .stock-message-container.out-of-stock .stock-icon,
.product-list .product-item .stock-message-container.out-of-stock .stock-message {
display: inline-block;
width: auto;
padding: 9px 0; }
.product-list .product-item .stock-message-container .stock-message {
float: left;
margin-bottom: 0;
width: calc(100% - 20px); }
.product-list .product-item .stock-message-container .stock-icon {
float: left;
margin-bottom: 0;
margin-right: 6px; }
.product-list .product-item .stock-message-container .stock-icon > svg {
fill: #28324b;
height: 14px;
text-align: left;
vertical-align: middle;
width: 14px; }
.product-list .product-item .stock-message-container .stock-icon > svg.out-of-stock {
fill: #464646; }
.product-list .product-item .stock-message-container .stock-icon > svg.in-stock {
fill: #458f29; }
.ll-tab > li > a {
background-color: #ebebeb;
border: 1px solid #ccc;
border-bottom-width: 0;
border-radius: 4px 4px 0 0;
color: #636363;
display: block;
margin-bottom: 1px;
padding: 10px 15px 9px;
text-decoration: none;
text-transform: none; }
.ll-tab > li.ll-active > a {
background: #fff;
border-bottom-color: transparent;
border-color: #ccc;
border-radius: 4px 4px 0 0;
margin-bottom: 0; }
.bordered-heading {
font-family: "AbrilReg", sans-serif; }
.bordered-heading:before {
background-color: #ccc;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
width: 100%;
z-index: -1; }
@media screen and (min-width: 47.5em) {
.category-title {
font-size: 24px;
font-size: 1.5rem;
margin-bottom: 20px; }
.sorts {
padding: 0 0 15px; }
.sorts.bottom .pagination {
text-align: right; }
.sorts label {
font-size: 14px;
font-size: 0.875rem;
display: block; }
.sorts select.quantity {
width: 70px; }
/**
* The filters panel on the left
*/
.side-nav.search-nav.showing {
-webkit-box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.45);
box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.45);
top: -21px; }
/**
* The product list
*/
.product-list .product-row:last-child .dts-4 > a,
.product-list .product-row:last-child .dts-4 .product-container,
.product-list .product-row:last-child .dts-3 > a,
.product-list .product-row:last-child .dts-3 .product-container {
border-bottom: 0;
margin-bottom: 0; }
.product-list .product-row:last-child .dts-4:last-child > a,
.product-list .product-row:last-child .dts-4 .product-container,
.product-list .product-row:last-child .dts-3:last-child > a,
.product-list .product-row:last-child .dts-3 .product-container {
border-bottom: 0;
padding-bottom: 0; }
.product-list .product-row > .mob-2:nth-child(3n) {
margin-left: 3.125%; }
.product-list .dts-4 > a,
.product-list .dts-4 .product-container,
.product-list .dts-3 > a,
.product-list .dts-3 .product-container {
margin-bottom: 30px;
padding: 0; }
.product-list .dts-4 > a.price-matched,
.product-list .dts-4 .product-container.price-matched,
.product-list .dts-3 > a.price-matched,
.product-list .dts-3 .product-container.price-matched {
border: 0;
border-bottom: 1px solid #ccc;
margin: 0;
padding: 0; }
.product-list .dts-4 > a.price-matched h5,
.product-list .dts-4 .product-container.price-matched h5,
.product-list .dts-3 > a.price-matched h5,
.product-list .dts-3 .product-container.price-matched h5 {
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0; }
.product-list .dts-4 > a.price-matched .product-image,
.product-list .dts-4 .product-container.price-matched .product-image,
.product-list .dts-3 > a.price-matched .product-image,
.product-list .dts-3 .product-container.price-matched .product-image {
border: 2px solid #00aee2; }
.product-list .tab-1 {
margin-left: 17px;
width: 23%; }
.product-list .tab-1:first-child {
margin-left: 0; }
.product-item.mob-2 {
width: calc(100% / 4 - 2.4%); }
.product-item .product-cta {
display: block;
padding-top: 0;
text-align: center;
width: 100%; } }
.tablet-select select,
.tablet-select select.quantity {
width: 100% !important; }
@media screen and (min-width: 60em) {
.lister-page select {
-webkit-appearance: initial; }
.category-title-wrapper {
width: calc(100% - 730px); }
.category-title {
padding: 10px 0 0; }
.filters-bar {
width: 290px; }
.filters-bar.static-nav {
width: 245px; }
.filters-bar .ll-form {
margin-top: 0; }
.sorts {
margin-top: 15px; }
.sorts .pagination {
margin-bottom: 0;
text-align: right; }
.side-nav.search-nav {
border: 0;
margin: 0;
max-height: 100%;
max-width: 100%;
padding: 0;
position: static;
width: 100%; }
.side-nav.search-nav .side-nav-cont {
display: none; }
.side-nav.search-nav .side-nav-box {
padding-top: 0; }
.side-nav.search-nav .side-nav-box .filters-title {
font-size: 14px;
font-size: 0.875rem;
background-color: #efefef;
cursor: text;
font-family: "Humanist", sans-serif;
margin-bottom: 20px;
padding: 30px 15px;
position: relative; }
.side-nav.search-nav .side-nav-box .filters-title:after {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #efefef;
bottom: -12px;
content: '';
display: block;
height: 0;
width: 0; }
.side-nav.search-nav .side-nav-box .filters-title a {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 15px;
text-decoration: underline; }
.side-nav.search-nav .side-nav-box .filters-title a:hover {
text-decoration: none; }
.dts-8.product-list {
margin-left: 15px;
width: calc(100% - 305px); }
.static-page .product-list {
width: calc(100% - 260px); } }
@media screen and (min-width: 1280px) {
.sorts .pagination.top {
display: block; } }
/**
* The filters panel on the left
*/
.side-nav {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 15px;
max-height: 45px;
overflow: hidden;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index: 1; }
.side-nav.showing {
border: 0;
max-height: none !important; }
.side-nav.showing .side-nav-cont {
margin-bottom: 0;
padding-bottom: 0; }
.side-nav.showing .side-nav-cont svg.filter {
display: none; }
.side-nav.showing .side-nav-cont svg.close {
display: block; }
.side-nav.showing .show-filters {
border-color: transparent; }
.side-nav h3 {
font-size: 24px;
font-size: 1.5rem;
border: 1px solid #ccc;
color: #28324b;
font-family: "HumanistReg", sans-serif;
line-height: 30px;
margin-bottom: 0;
padding: 15px; }
.side-nav .side-nav-cont {
background-position: right center;
background-repeat: no-repeat;
padding: 0 15px 15px;
position: relative; }
.side-nav .side-nav-cont a {
font-size: 14px;
font-size: 0.875rem;
position: relative; }
.side-nav .side-nav-cont svg {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
fill: #464646;
height: 18px;
right: -5px;
width: 18px; }
.side-nav .side-nav-cont svg.filter {
display: block; }
.side-nav .side-nav-cont svg.close {
display: none; }
.side-nav .show-filters {
font-size: 18px;
font-size: 1.125rem;
color: #000;
cursor: pointer;
display: inline-block;
line-height: 45px;
text-decoration: none;
width: 100%; }
.side-nav .side-nav-box {
border-top-width: 0;
padding: 15px 0; }
.side-nav .side-nav-box h4 {
font-size: 14px;
font-size: 0.875rem;
color: #28324b;
font-family: "HumanistBold", sans-serif;
margin: 0 0 5px;
padding: 0 0 0 15px;
position: relative; }
.side-nav .side-nav-box h4 svg {
background-color: #28324b;
border-radius: 4px;
fill: #fff;
height: 22px;
margin-right: 6px;
margin-top: -1px;
padding: 4px;
vertical-align: middle;
width: 22px; }
.side-nav .side-nav-box ul {
list-style: none;
margin: 0;
padding: 0; }
.side-nav .side-nav-box ul.applied-filters {
border-bottom: 1px solid #e5e5e5;
margin: 0 15px 22.5px;
padding-bottom: 12px; }
.side-nav .side-nav-box ul.applied-filters span {
font-size: 14px;
font-size: 0.875rem;
display: block;
padding: 8px 0 8px 33px;
text-transform: capitalize; }
.side-nav .side-nav-box ul li {
margin-top: 0;
position: relative; }
.side-nav .side-nav-box ul li a {
font-size: 14px;
font-size: 0.875rem;
background: none;
color: #28324b;
display: block;
min-height: 27px;
padding: 8px 0;
position: relative;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: padding-left .35s ease;
-o-transition: padding-left .35s ease;
transition: padding-left .35s ease;
vertical-align: top; }
.side-nav .side-nav-box ul li:hover a {
padding-left: 6px;
text-decoration: underline; }
.side-nav .side-nav-box ul li:first-child {
margin-top: 0; }
.side-nav .side-nav-box ul li ul {
background-color: #f9f9f9;
list-style-type: none;
margin: 0;
padding: 0 15px; }
.side-nav .side-nav-box ul li ul li a {
background: none;
padding-left: 22.5px;
position: relative; }
.side-nav .side-nav-box ul li ul li a:before {
content: '-';
left: 7.5px;
position: absolute;
top: 12px; }
.side-nav .side-nav-box ul li .hider-btn {
background-color: #f9f9f9;
background-position: center;
cursor: pointer;
display: block;
height: 50px;
line-height: 50px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 50px; }
.side-nav .side-nav-box ul li .hider-btn.hider-down {
background-color: transparent; }
.side-nav .side-nav-box ul li .more-link {
font-family: "HumanistBold", sans-serif; }
.side-nav .side-nav-box ul li .more-link svg {
fill: #28324b;
height: 17px;
margin-left: 10px;
vertical-align: middle;
width: 17px; }
.side-nav .side-nav-box ul li .hider-content {
background-color: #f9f9f9; }
.side-nav .side-nav-box ul li .hider-inner {
padding: 0; }
.side-nav .side-nav-box .facet-values {
border-bottom: 1px solid #e5e5e5;
margin: 0 15px 22.5px;
padding-bottom: 12px; }
.static-nav .side-nav .side-nav-box {
padding-bottom: 0; }
.static-nav .side-nav .side-nav-box h4 {
border-bottom: 1px solid #e5e5e5;
margin: 0 15px;
padding: 0 0 15px; }
.static-nav .side-nav .side-nav-box .facet-values {
border-bottom: 0; }
.static-nav .side-nav .side-nav-section {
padding-top: 12px; }
@media screen and (min-width: 60em) {
.side-nav {
border: 0;
max-height: 100%;
max-width: 100%;
padding: 0;
position: static;
width: 100%; }
.side-nav .side-nav-cont {
display: none; }
.side-nav .side-nav-box {
background-color: #f7f7f7; } }
/* Store locator Pages ===================================================== */
/* Variables - Establish site wide values =================================== */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* =============================================================================
Helper Classes/Mixins
========================================================================== */
.ir, .icn {
color: transparent;
font: 0/0 a;
text-shadow: none; }
/* Vertical alignment - http://goo.gl/Im9MF5 ================================ */
/* Hide from screenreaders and browsers ===================================== */
/*
* Accessibility helper
*/
.ll-a11y {
color: transparent !important;
font: 0/0 serif;
padding: 0 !important;
position: absolute;
text-shadow: none; }
/*
* Visibility
* Avoids setting display to `block` so it works also with `inline-block` and `table`
*/
@media (min-width: 86.375em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-hidden-xlarge {
display: none !important; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-large {
display: none !important; } }
/* Tablets portrait */
@media (min-width: 47.5em) and (max-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-medium {
display: none !important; } }
/* Phone landscape and smaller*/
@media (max-width: 47.5em) {
.ll-visible-medium {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-small {
display: none !important; } }
/* Remove from the flow and screen readers on any device */
.ll-hidden {
display: none !important;
visibility: hidden !important; }
/* Clearfix - Use @extend cf on element ===================================== */
.cf:after, .dl-horizontal:after, .field:after, .nav > ul > li.search form:after, .nav > ul > li.search-form-mobile form:after, .nav > ul > li.store-locate form:after, .pagination:after, .site-header:after, .review-form-box:after, .review-form-box .product:after, .product-range .product-set-item:after, .product-list .product-item:after, .store-list > li a:after {
clear: both;
content: '';
display: table; }
/**
* Clears
*/
.c-both {
clear: both; }
/**
* Floats
*/
.f-right {
float: right; }
.f-left {
float: left; }
.f-none {
float: none; }
/**
* Displays
*/
.d-block {
display: block; }
.d-inline-block {
display: inline-block; }
/**
* Text positioning
*/
.t-center {
text-align: center; }
.t-right {
text-align: right; }
.t-left {
text-align: left; }
/**
* Text styles
*/
.t-underline {
text-decoration: underline !important; }
.t-none {
text-decoration: none !important; }
/**
* Positioning
*/
.p-rel {
position: relative; }
/**
* Super margins
*/
.m-bottom {
margin-bottom: 24px; }
.m-bottom.x01 {
margin-bottom: 12px / 2; }
.m-bottom.x05 {
margin-bottom: 12px; }
.m-bottom.x3 {
margin-bottom: 36px; }
.m-bottom.x4 {
margin-bottom: 48px; }
.m-bottom.x6 {
margin-bottom: 72px; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
/**
* Paddings
*/
.p-all {
padding: 15px; }
/**
* Other position
*/
.v-middle {
vertical-align: middle; }
.v-top {
vertical-align: top; }
/**
* Widths
*/
.w-45 {
width: 45%; }
/**
* Images with borders
*/
.bordered {
border: 1px solid #dcdcdc;
padding: 2px; }
/**
* Images that should be full width
*/
.i-full-width {
display: block;
width: 100%; }
/**
* Need to add a margin to the header on certain pages
* So that elements don't sit flush against it
*/
.header-margin header {
margin-bottom: 20px; }
/**
* Some new margin helpers
*/
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.ll-grid-margin {
margin-top: 20px; }
.ll-margin {
margin-bottom: 20px; }
.ll-margin + .ll-margin {
margin-top: 20px; }
.ll-margin-top {
margin-top: 20px !important; }
.ll-margin-bottom {
margin-bottom: 20px !important; }
.ll-margin-left {
margin-left: 20px !important; }
.ll-margin-right {
margin-right: 20px !important; }
.ll-margin-vertical {
margin-bottom: 20px !important;
margin-top: 20px !important; }
.ll-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important; }
* + .ll-margin {
margin-top: 20px; }
/*
* Smaller margins
*/
.ll-margin-small {
margin-bottom: 10px; }
.ll-margin-small + .ll-margin-small {
margin-top: 10px; }
.ll-margin-small-top {
margin-top: 10px !important; }
.ll-margin-small-bottom {
margin-bottom: 10px !important; }
.ll-margin-small-left {
margin-left: 10px !important; }
.ll-margin-small-right {
margin-right: 10px !important; }
.ll-margin-small-vertical {
margin-bottom: 10px !important;
margin-top: 10px !important; }
.ll-margin-small-horizontal {
margin-left: 10px !important;
margin-right: 10px !important; }
* + .ll-margin-small {
margin-top: 10px; }
/*
* Medium margins
*/
.ll-margin-medium {
margin: 40px; }
.ll-margin-medium-top {
margin-top: 40px !important; }
.ll-margin-medium-bottom {
margin-bottom: 40px !important; }
.ll-margin-medium-left {
margin-left: 40px !important; }
.ll-margin-medium-right {
margin-right: 40px !important; }
.ll-margin-medium-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-medium-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-medium {
margin-top: 40px !important; }
/*
* Larger margins
*/
.ll-margin-large {
margin-bottom: 40px; }
.ll-margin-large + .ll-margin-large {
margin-top: 40px; }
.ll-margin-large-top {
margin-top: 40px !important; }
.ll-margin-large-bottom {
margin-bottom: 40px !important; }
.ll-margin-large-left {
margin-left: 40px !important; }
.ll-margin-large-right {
margin-right: 40px !important; }
.ll-margin-large-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-large-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-large {
margin-top: 40px; }
/*
* Extra Large margins
*/
.ll-margin-xlarge {
margin-bottom: 80px; }
.ll-margin-xlarge + .ll-margin-xlarge {
margin-top: 80px; }
.ll-margin-xlarge-top {
margin-top: 80px !important; }
.ll-margin-xlarge-bottom {
margin-bottom: 80px !important; }
.ll-margin-xlarge-left {
margin-left: 80px !important; }
.ll-margin-xlarge-right {
margin-right: 80px !important; }
.ll-margin-xlarge-vertical {
margin-bottom: 80px !important;
margin-top: 80px !important; }
.ll-margin-xlarge-horizontal {
margin-left: 80px !important;
margin-right: 80px !important; }
* + .ll-margin-xlarge {
margin-top: 80px; }
/*
* Remove margins
*/
.ll-margin-remove {
margin: 0 !important; }
.ll-margin-top-remove {
margin-top: 0 !important; }
.ll-margin-bottom-remove {
margin-bottom: 0 !important; }
.ll-pos-rel {
position: relative; }
/* Include the main product file ============================================ */
/**
* The store list
*/
.store-list {
list-style: none;
margin: 0 0 30px;
padding: 0; }
.store-list > li {
clear: both; }
.store-list > li a {
background: url(/assets/images/icons/small/dash-arrow.png) right -15px center no-repeat;
border: 1px solid #dcdcdc;
border-width: 0 1px 1px;
color: #000;
display: block;
font-size: 18px;
font-size: 1.125rem;
padding: 15px 30px 15px 15px; }
.store-list > li a:hover {
background-color: #efefef;
background-position: right -20px center; }
.store-list > li:first-child a {
border-top-width: 1px; }
.store-list > li ul {
list-style: none;
margin: 0;
padding: 0; }
.store-list > li li {
padding: 6px 0 5px;
float: left;
width: 40%; }
.store-list > li li:first-child {
padding: 6px 0 5px 35px;
position: relative;
width: 60%; }
.store-list > li li img {
left: 0;
position: absolute;
top: 0;
vertical-align: middle; }
/**
* The select dropdown needs to sit to the right of the word "or"
*/
.store-locator-form {
margin-bottom: 60px; }
.select-or {
float: left;
line-height: 45px;
width: 5%; }
.select-all-stores {
float: left;
width: 95%; }
/**
* The map container
*/
.map-container {
margin-bottom: 15px; }
/**
* Hide address results until they're needed
*/
.address-results {
display: none; }
.store-location {
padding: 15px 0 0 0; }
/**
* Store location on order confirmation
*/
.store-locator .store-location {
background-color: transparent;
border: 0;
margin: 0 0 15px 0;
padding: 0; }
.store-locator .store-location h3 {
color: #243044;
margin-bottom: 60px;
text-transform: none; }
.store-locator .store-location h3 span {
color: #000; }
.store-locator .store-location h4 {
color: #243044;
margin-bottom: 7.5px;
padding-left: 25px; }
.store-locator .store-location h4:first-child {
margin-top: 15px; }
.store-locator .store-location h4 img {
margin-left: -25px;
margin-right: 10px;
vertical-align: middle; }
.store-locator .store-location p {
margin-bottom: 30px;
padding-left: 30px; }
.store-locator .store-location ul {
display: table;
list-style: none;
padding-left: 30px;
width: 100%; }
.store-locator .store-location ul li {
display: table-row; }
.store-locator .store-location ul li span {
display: table-cell;
padding: 5px 0; }
/**
* The tabs for this page
*/
.ll-tab {
border: 0; }
.ll-tab > li a {
font-size: 16px;
font-size: 1rem; }
#store-locator-tabs {
border: 1px solid #959595;
border-width: 1px 0 0;
margin-bottom: 15px;
padding-top: 8px; }
#store-locator-tabs .ll-form {
margin-bottom: 15px; }
/**
* This component hides the input until it's required
*/
.input-hider {
display: inline-block;
float: left;
max-width: 0;
overflow: hidden;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out; }
.input-hider.showing {
max-width: 200px; }
/**
* Some attempt at styling directions
*/
.adp-placemark {
background-color: #f7f7f7;
border: 0;
margin-bottom: 0; }
.adp-placemark td {
border: 0;
padding: 15px 15px 5px; }
.adp-placemark td:first-child {
display: none; }
.adp-summary,
.adp-legal {
background-color: #f7f7f7;
padding: 5px 15px 15px;
margin-bottom: 15px; }
.adp-directions {
border-collapse: collapse; }
.adp-directions td {
border: 1px solid #ccc;
color: #000;
padding: 15px; }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 32.438em) {
/**
* The tabs for this page
*/ }
/* Large/landscape smartphones, small tablets =============================== */
@media only screen and (min-width: 47.5em) {
/**
* The tabs for this page
*/
.ll-tab > li a {
margin-left: 15px;
text-align: left; }
.ll-tab > li a img {
display: inline; } }
/* Desktop / table landscape ================================================ */
@media only screen and (min-width: 60em) {
.map-container {
min-height: 547px;
margin-bottom: 0; } }
/* Large Desktop - Add Styling for large desktop computers ================== */
/* =============================================================================
Basket page 2018
========================================================================= */
/* =============================================================================
Variables
========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* Misc ===================================================================== */
/* =============================================================================
Mixins - Select which (or all) mixins to use
========================================================================= */
/* =============================================================================
Mixins - Include all
========================================================================= */
/* =============================================================================
Animations & Keyframes mixins
========================================================================= */
/* Example
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
a:hover {
@include animationperf;
@include animation(1s, 2s, changecolour);
}
*/
/* =============================================================================
Box-shadow complete with vendor prefixes, up to 5 shadow parameters
========================================================================= */
/* Example
div {
@include box-shadow(
0 0 5px 5px rgba(0,0,0,.25),
inset 0 0 5px rgba(0,0,0,.25),
);
}
*/
/* =============================================================================
Column width calculator
========================================================================= */
/* Example:
.margin-element {
margin-left: column(12, 6);
}
*/
/* Example:
.col-2of6 {
@include col(6, 2);
}
*/
/* =============================================================================
Calculate fluid ratio for an image based on two dimensions (width/height)
- https://goo.gl/Wl694
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.column {
max-width: 800px;
}
.fixedratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(/path/to/file/);
}
*/
/* =============================================================================
Calculate fluid ratio for a video/iframe based on two dimensions (width/height)
- https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.
HTML:
CSS:
.my-fluid-video {
@include fluid-video(640, 360);
}
*/
/* =============================================================================
Font Sizing using rem's
- https://goo.gl/4ow8e
========================================================================= */
/* Example
p {
@include font-size(16);
}
*/
/* =============================================================================
Vertical Gradient with solid colour back-up
========================================================================= */
/* Example
nav {
@include gradient(#F5F5F5, #EEE, #FFF);
}
// multiple backgorun
.multiple-bg-elem {
background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}
*/
/* =============================================================================
Line height using rem's
========================================================================= */
/* Example
p {
@include line-height(24);
}
*/
/* =============================================================================
Opacity with IE8 fallback
========================================================================= */
/* Example
.inactive {
@include opacity(.24);
}
*/
/* =============================================================================
Transition mixin with speed and timing function
========================================================================= */
/* Example
a {
@include transition(.3s, ease-out);
}
*/
/* =============================================================================
Vector (SVG) background with fallback for IE8
- https://goo.gl/72Ok6
========================================================================= */
/* Example
.logo {
@include vector-bg-with-fallback(logo);
}
*/
/* =============================================================================
Font Face includes
========================================================================= */
/* Example
@include font-face('open_sans', 'OpenSans-Regular-webfont');
*/
/* =============================================================================
Helper Classes/Mixins
========================================================================== */
.ir, .icn {
color: transparent;
font: 0/0 a;
text-shadow: none; }
/* Vertical alignment - http://goo.gl/Im9MF5 ================================ */
/* Hide from screenreaders and browsers ===================================== */
/*
* Accessibility helper
*/
.ll-a11y {
color: transparent !important;
font: 0/0 serif;
padding: 0 !important;
position: absolute;
text-shadow: none; }
/*
* Visibility
* Avoids setting display to `block` so it works also with `inline-block` and `table`
*/
@media (min-width: 86.375em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-hidden-xlarge {
display: none !important; } }
/* Desktop and bigger */
@media (min-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-medium {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-large {
display: none !important; } }
/* Tablets portrait */
@media (min-width: 47.5em) and (max-width: 60em) {
.ll-visible-small {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-medium {
display: none !important; } }
/* Phone landscape and smaller*/
@media (max-width: 47.5em) {
.ll-visible-medium {
display: none !important; }
.ll-visible-large {
display: none !important; }
.ll-visible-xlarge {
display: none !important; }
.ll-hidden-small {
display: none !important; } }
/* Remove from the flow and screen readers on any device */
.ll-hidden {
display: none !important;
visibility: hidden !important; }
/* Clearfix - Use @extend cf on element ===================================== */
.cf:after, .dl-horizontal:after, .field:after, .nav > ul > li.search form:after, .nav > ul > li.search-form-mobile form:after, .nav > ul > li.store-locate form:after, .pagination:after, .site-header:after, .review-form-box:after, .review-form-box .product:after, .product-range .product-set-item:after, .product-list .product-item:after, .store-list > li a:after {
clear: both;
content: '';
display: table; }
/**
* Clears
*/
.c-both {
clear: both; }
/**
* Floats
*/
.f-right {
float: right; }
.f-left {
float: left; }
.f-none {
float: none; }
/**
* Displays
*/
.d-block {
display: block; }
.d-inline-block {
display: inline-block; }
/**
* Text positioning
*/
.t-center {
text-align: center; }
.t-right {
text-align: right; }
.t-left {
text-align: left; }
/**
* Text styles
*/
.t-underline {
text-decoration: underline !important; }
.t-none {
text-decoration: none !important; }
/**
* Positioning
*/
.p-rel {
position: relative; }
/**
* Super margins
*/
.m-bottom {
margin-bottom: 24px; }
.m-bottom.x01 {
margin-bottom: 12px / 2; }
.m-bottom.x05 {
margin-bottom: 12px; }
.m-bottom.x3 {
margin-bottom: 36px; }
.m-bottom.x4 {
margin-bottom: 48px; }
.m-bottom.x6 {
margin-bottom: 72px; }
.m-right {
margin-right: 12px; }
.m-left {
margin-left: 12px; }
.m-left.x3 {
margin-left: 36px; }
.m-remove {
margin: 0; }
/**
* Paddings
*/
.p-all {
padding: 15px; }
/**
* Other position
*/
.v-middle {
vertical-align: middle; }
.v-top {
vertical-align: top; }
/**
* Widths
*/
.w-45 {
width: 45%; }
/**
* Images with borders
*/
.bordered {
border: 1px solid #dcdcdc;
padding: 2px; }
/**
* Images that should be full width
*/
.i-full-width {
display: block;
width: 100%; }
/**
* Need to add a margin to the header on certain pages
* So that elements don't sit flush against it
*/
.header-margin header {
margin-bottom: 20px; }
/**
* Some new margin helpers
*/
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.ll-grid-margin {
margin-top: 20px; }
.ll-margin {
margin-bottom: 20px; }
.ll-margin + .ll-margin {
margin-top: 20px; }
.ll-margin-top {
margin-top: 20px !important; }
.ll-margin-bottom {
margin-bottom: 20px !important; }
.ll-margin-left {
margin-left: 20px !important; }
.ll-margin-right {
margin-right: 20px !important; }
.ll-margin-vertical {
margin-bottom: 20px !important;
margin-top: 20px !important; }
.ll-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important; }
* + .ll-margin {
margin-top: 20px; }
/*
* Smaller margins
*/
.ll-margin-small {
margin-bottom: 10px; }
.ll-margin-small + .ll-margin-small {
margin-top: 10px; }
.ll-margin-small-top {
margin-top: 10px !important; }
.ll-margin-small-bottom {
margin-bottom: 10px !important; }
.ll-margin-small-left {
margin-left: 10px !important; }
.ll-margin-small-right {
margin-right: 10px !important; }
.ll-margin-small-vertical {
margin-bottom: 10px !important;
margin-top: 10px !important; }
.ll-margin-small-horizontal {
margin-left: 10px !important;
margin-right: 10px !important; }
* + .ll-margin-small {
margin-top: 10px; }
/*
* Medium margins
*/
.ll-margin-medium {
margin: 40px; }
.ll-margin-medium-top {
margin-top: 40px !important; }
.ll-margin-medium-bottom {
margin-bottom: 40px !important; }
.ll-margin-medium-left {
margin-left: 40px !important; }
.ll-margin-medium-right {
margin-right: 40px !important; }
.ll-margin-medium-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-medium-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-medium {
margin-top: 40px !important; }
/*
* Larger margins
*/
.ll-margin-large {
margin-bottom: 40px; }
.ll-margin-large + .ll-margin-large {
margin-top: 40px; }
.ll-margin-large-top {
margin-top: 40px !important; }
.ll-margin-large-bottom {
margin-bottom: 40px !important; }
.ll-margin-large-left {
margin-left: 40px !important; }
.ll-margin-large-right {
margin-right: 40px !important; }
.ll-margin-large-vertical {
margin-bottom: 40px !important;
margin-top: 40px !important; }
.ll-margin-large-horizontal {
margin-left: 40px !important;
margin-right: 40px !important; }
* + .ll-margin-large {
margin-top: 40px; }
/*
* Extra Large margins
*/
.ll-margin-xlarge {
margin-bottom: 80px; }
.ll-margin-xlarge + .ll-margin-xlarge {
margin-top: 80px; }
.ll-margin-xlarge-top {
margin-top: 80px !important; }
.ll-margin-xlarge-bottom {
margin-bottom: 80px !important; }
.ll-margin-xlarge-left {
margin-left: 80px !important; }
.ll-margin-xlarge-right {
margin-right: 80px !important; }
.ll-margin-xlarge-vertical {
margin-bottom: 80px !important;
margin-top: 80px !important; }
.ll-margin-xlarge-horizontal {
margin-left: 80px !important;
margin-right: 80px !important; }
* + .ll-margin-xlarge {
margin-top: 80px; }
/*
* Remove margins
*/
.ll-margin-remove {
margin: 0 !important; }
.ll-margin-top-remove {
margin-top: 0 !important; }
.ll-margin-bottom-remove {
margin-bottom: 0 !important; }
.ll-pos-rel {
position: relative; }
.basket-order-limit-reached {
background: #d7d7d7;
padding: 7px 10px;
border-radius: 4px; }
header.site-header {
margin-bottom: 0 !important; }
#UpdateBasket,
#UpdateBasket h1,
#UpdateBasket h2,
#UpdateBasket h3,
#UpdateBasket h4 {
color: #464646; }
.continue-shopping {
color: #464646;
float: right; }
.basket-h1 {
margin: 0;
padding-top: 30px;
text-align: center;
text-transform: none; }
.basket-h1 .continue-shopping {
font-size: 18px;
font-size: 1.125rem;
margin: 0; }
.basket-h1 .continue-shopping svg {
fill: #464646;
height: 15px;
width: 10px;
vertical-align: middle; }
.basket-h1 .continue-shopping:hover {
color: #464646; }
.basket-h1 .continue-shopping:hover > svg {
fill: #464646; }
.basket-grid {
padding: 20px 0 30px; }
.basket-grid .table-surround {
border: 1px solid #d7d7d7;
border-radius: 4px;
overflow: hidden; }
.basket-grid .continue-shopping {
display: none; }
.basket-grid .no-slide {
padding: 0 15px 15px; }
.basket-grid table.main-basket {
border: 0; }
.basket-grid table.main-basket .quantity {
display: inline-block; }
.basket-grid table.main-basket .quantity select,
.basket-grid table.main-basket .quantity input[type=text] {
width: 60px; }
.basket-grid table.main-basket .quantity input[type=text] {
border-color: #d7d7d7; }
.basket-grid table.main-basket td {
background-color: transparent !important;
border-color: #d7d7d7;
border-left: 0;
vertical-align: middle; }
.basket-grid table.main-basket td:last-child {
border-right: 0; }
.basket-grid table.main-basket td .remove-prod {
font-size: 14px;
font-size: 0.875rem;
text-transform: none;
color: #464646;
text-decoration: underline; }
.basket-grid table.main-basket td .remove-prod:hover {
text-decoration: underline; }
.basket-grid table.main-basket td .cta {
text-transform: none; }
.basket-grid table.main-basket td select {
font-size: 14px;
font-size: 0.875rem;
-moz-appearance: none;
-webkit-appearance: textfield;
background-color: #fff;
background-image: url(/assets/images/icons/new/arrow_down.png);
background-position: right 8px top 50%;
background-repeat: no-repeat;
background-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
float: none;
height: 45px;
line-height: 1.25; }
.basket-grid table.main-basket th {
font-size: 16px;
font-size: 1rem;
font-family: "HumanistBold", sans-serif;
font-weight: 400;
text-transform: none; }
.basket-grid table.main-basket tr:last-child td {
border-bottom: 0; }
.basket-grid table.main-basket tr td:first-child {
font-weight: 400; }
.basket-grid table.main-basket .product-details h3 {
font-size: 16px;
font-size: 1rem;
margin: 0 0 5px;
text-transform: none; }
.basket-grid table.main-basket .product-details p {
font-size: 14px;
font-size: 0.875rem;
margin: 0 0 5px; }
.basket-grid table.main-basket .product-details p.giftwrap {
margin-bottom: 15px;
padding-top: 0; }
.basket-grid .giftwrap-mob {
clear: both;
padding-left: 85px;
padding-top: 0; }
.basket-grid .giftwrap-mob .giftwrap {
padding-top: 0; }
.basket-grid .giftwrap-mob .giftwrap:hover {
text-decoration: underline; }
.basket-grid .giftwrap svg {
height: 24px;
margin-right: 5px;
vertical-align: middle;
width: 21px; }
.basket-grid .ll-form-help__link.ll-toggle.discount-toggle {
color: #9b9b9b;
display: block;
text-align: center; }
.basket-grid .ll-form-help__link.ll-toggle.discount-toggle:before {
content: ''; }
.basket-grid .ll-form-help__link.ll-toggle.discount-toggle svg {
height: 7px;
width: 14px; }
.basket-grid input.remove-coupon-btn {
font-size: 12px;
padding: 7px 10px; }
.basket-grid .confirmation-summary.coupon-codes {
padding: 20px 102px 20px 60px; }
.basket-grid .confirmation-summary.coupon-codes:before {
top: 20px; }
.basket-grid .confirmation-summary.coupon-codes h2 {
line-height: 30px; }
.basket-grid .confirmation-summary.coupon-codes input.remove-coupon-btn {
position: absolute;
right: 20px;
top: 20px; }
.basket-grid .discount-code input[name='basket.voucherFormBean.voucherCode'] {
float: left;
width: calc(75% - 10px);
margin-right: 10px; }
.basket-grid .discount-code .btn-discount-code {
float: left;
width: 25%;
font-family: "HumanistBold", sans-serif; }
.basket-grid .discount-code .btn-discount-code.btn-grey {
color: darkgray; }
.basket-grid .discount-code .ll-form-help-block {
color: #9b9b9b; }
.basket-grid .basket-summary-section.coupons p.coupon {
line-height: 30px; }
.basket-grid .basket-summary-section.coupons p.coupon:last-of-type {
margin-bottom: 0; }
.basket-grid .popular-products .average-rating {
margin-bottom: 5px; }
.basket-grid .js-prod-list ul li {
margin-bottom: 10px;
max-width: none !important;
padding-bottom: 10px; }
.basket-grid .js-prod-list .btn {
margin-bottom: 5px; }
.basket-grid .product-list.js-prod-list {
border: 0; }
tr.product-promotion td {
padding: 0; }
.end-sticky > .wrapper {
padding: 0;
width: 100%; }
.special-offer-area {
font-size: 16px;
font-size: 1rem;
cursor: pointer;
margin: 0;
padding: 10px 0;
padding-left: 30px;
padding-right: 30px;
position: relative; }
.special-offer-area.active .svg-arrow {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.special-offer-area b {
font-family: "HumanistBold", sans-serif; }
.special-offer-area .svg-star {
fill: #d30d25;
height: 20px;
margin-right: 5px;
position: absolute;
top: 8px;
left: 0;
width: 20px; }
.special-offer-area .svg-arrow {
height: 10px;
position: absolute;
right: 10px;
top: 15px;
width: 20px; }
tr.free-gift,
tr.product-promotion {
background-color: white; }
tr.free-gift td,
tr.product-promotion td {
padding: 8px 15px; }
tr.free-gift .tab-3,
tr.product-promotion .tab-3 {
margin-top: 15px; }
tr.free-gift .tab-3 .product-details h3,
tr.product-promotion .tab-3 .product-details h3 {
margin-bottom: 7px; }
tr.free-gift .tab-3 .product-details .sku,
tr.product-promotion .tab-3 .product-details .sku {
float: none; }
tr.free-gift .btn-cta,
tr.product-promotion .btn-cta {
padding: 9px 12px;
font-family: "HumanistBold", sans-serif; }
tr.free-gift .remove-gift,
tr.product-promotion .remove-gift {
background: none !important;
border: 0;
color: #464646;
cursor: pointer;
font: inherit;
line-height: 1;
text-decoration: underline;
padding: 0 !important; }
.basket-summary {
background: #fff;
border: solid 1px #d7d7d7;
border-radius: 4px;
clear: right;
margin-bottom: 20px; }
.basket-summary .basket-summary-section {
padding: 20px; }
.basket-summary .basket-summary-section.total-area p {
font-size: 18px;
font-size: 1.125rem; }
.basket-summary .basket-summary-section.total-area img {
display: block;
margin: 30px auto 0; }
.basket-summary .basket-summary-section.total-area .btn {
margin-top: 15px;
font-family: "HumanistBold", sans-serif; }
.basket-summary .basket-summary-section.total-area .btn svg {
fill: white;
width: 25px;
height: 18px;
vertical-align: middle; }
.basket-summary .basket-summary-section + .basket-summary-section {
border-top: 1px solid #d7d7d7; }
.basket-summary .basket-vouchers {
border-bottom: 1px solid #d7d7d7;
border-top: 1px solid #d7d7d7;
padding: 10px 20px; }
.basket-summary .basket-vouchers p:last-child {
margin-bottom: 0; }
.basket-summary .basket-vouchers .btn {
padding-bottom: 5px;
padding-top: 5px; }
.basket-summary .basket-vouchers .voucher-code {
font-size: 14px;
font-size: 0.875rem; }
.basket-summary p {
font-size: 16px;
font-size: 1rem;
word-break: break-word; }
.basket-summary p.delivery-methods {
line-height: 1;
margin-top: -15px; }
.basket-summary p.delivery-message {
font-size: 14px;
font-size: 0.875rem;
margin-top: -10px; }
.basket-summary p:last-child {
margin-bottom: 0; }
.basket-summary p small {
font-size: 12px;
font-size: 0.75rem; }
.basket-summary b {
font-family: "HumanistBold", sans-serif; }
.basket-summary .basket-price {
float: right; }
.js-discount-code {
display: none; }
.js-discount-code input:first-child {
padding: 10px; }
.js-discount-code input:last-child {
margin-top: 10px; }
.overflow-h {
overflow: hidden; }
p.free-delivery {
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 0;
padding-left: 40px;
position: relative; }
p.free-delivery svg {
height: 30px;
position: absolute;
top: 0;
left: 0;
width: 30px; }
.pad-left {
padding-left: 30px; }
.product-list.recently .bordered-heading:before {
background-color: #ccc; }
.product-list .details-bottom .btn span {
color: #fff; }
.newsletter-signup h3 {
text-align: left !important; }
#may_interest_you {
margin-bottom: 30px; }
#may_interest_you #addToBasket button[type=submit] {
font-family: 'HumanistReg', sans-serif; }
#may_interest_you #addToBasket button[type=submit] span {
color: white; }
#may_interest_you #addToBasket button[type=submit] span svg {
fill: white;
width: 15px;
height: 15px;
vertical-align: middle;
margin-right: 5px; }
#may_interest_you #addToBasket button[type=submit].outline-btn {
color: #458f29;
background: white;
border: 1px solid #458f29;
font-family: 'HumanistBold', sans-serif; }
#may_interest_you #addToBasket button[type=submit].outline-btn span {
color: #458f29; }
#may_interest_you #addToBasket button[type=submit].outline-btn span svg {
fill: #458f29; }
#may_interest_you #addToBasket button[type=submit].outline-btn span svg path {
stroke: #458f29; }
#may_interest_you #addToBasket button[type=submit].outline-btn:hover {
color: white;
background: #458f29;
border: 1px solid #458f29;
font-family: 'HumanistBold', sans-serif; }
#may_interest_you #addToBasket button[type=submit].outline-btn:hover span {
color: white; }
#may_interest_you #addToBasket button[type=submit].outline-btn:hover svg {
fill: white; }
#may_interest_you #addToBasket button[type=submit].outline-btn:hover svg path {
stroke: white; }
@media only screen and (max-width: 759px) {
table.main-basket {
display: block;
width: 100%; }
table.main-basket thead {
display: none; }
table.main-basket tbody {
display: block;
width: 100%; }
table.main-basket tbody tr {
border-bottom: 1px solid #dcdcdc; }
table.main-basket tbody tr:last-child {
border: 0; }
table.main-basket tbody td {
border: 0; }
table.main-basket tbody td.basket-cell {
padding-bottom: 0; }
table.main-basket td,
table.main-basket td.product-quantity,
table.main-basket td.product-price {
border-right: 0;
display: block;
width: 100%; }
table.main-basket td.product-quantity,
table.main-basket td.product-price {
float: left;
width: auto; }
table.main-basket td.product-quantity {
clear: both;
padding-left: 15px;
padding-top: 0;
width: 140px; }
table.main-basket td.product-quantity .remove {
margin-left: 9px; }
table.main-basket td.product-price {
font-size: 14px;
font-size: 0.875rem;
font-family: "HumanistBold", sans-serif;
text-align: right;
padding-right: 15px;
padding-top: 0;
width: calc(100% - 140px); }
table.main-basket td.product-price .mobile-delete.remove-prod {
font-family: "Humanist", sans-serif;
float: left;
margin-top: 12px; }
table.main-basket td.product img {
border: none;
padding: 5px;
width: 60px; }
table.main-basket .product-details {
clear: none;
float: right;
width: calc(100% - 72px); }
table.main-basket .product-details h3 {
text-align: left; }
table.main-basket .product-details p:last-child {
margin-bottom: 0; }
table.main-basket tr.free-gift .tab-3 input[type='image'],
table.main-basket tr.free-gift .tab-3 img,
table.main-basket tr.free-gift .product input[type='image'],
table.main-basket tr.free-gift .product img,
table.main-basket tr.product-promotion .tab-3 input[type='image'],
table.main-basket tr.product-promotion .tab-3 img,
table.main-basket tr.product-promotion .product input[type='image'],
table.main-basket tr.product-promotion .product img {
width: 60px;
height: auto; }
table.main-basket tr.free-gift .tab-3:after,
table.main-basket tr.free-gift .product:after,
table.main-basket tr.product-promotion .tab-3:after,
table.main-basket tr.product-promotion .product:after {
clear: both;
content: '';
display: table; }
.basket-grid .table-surround {
margin: 0 0 20px; } }
@media only screen and (max-width: 32.438em) {
.basket-h1 {
text-align: left; }
.basket-h1 .continue-shopping {
font-size: 14px; } }
@media only screen and (min-width: 760px) {
.continue-shopping {
margin: 30px 0 40px; }
.basket-h1 {
font-size: 30px;
font-size: 1.875rem;
padding-bottom: 10px;
padding-top: 30px;
text-align: left; }
.basket-grid .table-surround {
margin-bottom: 20px; }
.basket-grid .main-basket h1,
.basket-grid .main-basket h2,
.basket-grid .main-basket h3,
.basket-grid .main-basket h4,
.basket-grid .main-basket h5,
.basket-grid .main-basket h6,
.basket-grid .main-basket p {
text-align: left; }
.basket-grid .main-basket .product-details {
margin-left: 0; }
.basket-grid .product-quantity {
width: 90px; }
.basket-grid .product-unit,
.basket-grid .product-price {
width: 120px; }
.basket-grid .remove-prod.mobile-delete {
display: none; }
.basket-grid .product .cta {
font-size: 14px;
font-size: 0.875rem; }
.giftwrap-mob {
display: none; } }
@media screen and (min-width: 960px) {
.basket-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.basket-grid .table-surround {
margin-bottom: 60px; }
.continue-shopping {
display: block; } }
@media screen and (min-width: 1280px) {
.basket-grid table.main-basket {
/*.remove-prod {
// float: right;
height: 18px;
line-height: 18px;
// margin-top: -9px;
// position: absolute;
// top: 50%;
width: 60px;
}*/ }
.basket-grid table.main-basket p.sku {
float: left;
width: calc(100% - 80px); }
.basket-grid table.main-basket .quantity {
display: block; }
.basket-grid table.main-basket .quantity select {
width: auto; }
.basket-grid table.main-basket .basket-cell {
position: relative; }
.basket-grid table.main-basket .basket-cell .product-details {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: 10px;
position: absolute;
width: calc(100% - 160px); }
.basket-grid table.main-basket .basket-cell .product-details p:last-child {
margin-bottom: 0; }
tr.free-gift .remove-gift,
tr.product-promotion .remove-gift {
float: right;
margin-right: -4px;
margin-top: -20px; } }
/**
@popular products
---------------------------------------------------------
modules/_popular-products.scss
--------------------------------------------------------
- Popular products module, slider on mobile, 6 across desktop
- Content is dynamically generated
- Can be placed on any page through hmc
------------------------------------------------------ */
.popular-products {
padding-top: 15px; }
.popular-products h3 {
font-size: 18px;
font-size: 1.125rem;
font-family: "HumanistReg", sans-serif;
color: #464646;
text-transform: none; }
.popular-products .product-item {
margin-left: 0;
padding: 5px; }
.popular-products .product-item img {
max-width: 100px; }
.popular-products .product-item .product-cta {
padding-bottom: 0; }
.popular-products .product-item .product-detail h4 {
font-size: 14px;
font-size: 0.875rem; }
.popular-products .product-item .details-bottom {
border: 0 !important; }
.popular-products .ll-slidenav-position .ll-slidenav-previous,
.popular-products .ll-slidenav-position .ll-slidenav-next {
overflow: hidden;
top: 75px;
width: 30px; }
.popular-products .ll-slidenav-position .ll-slidenav-previous {
left: -10px; }
.popular-products .ll-slidenav-position .ll-slidenav-next {
right: -10px; }
@media screen and (min-width: 60em) {
.popular-products {
border: 1px solid #ebebeb;
border-radius: 4px;
padding: 15px; }
.popular-products ul > li:not(.br-related-query) {
left: auto !important;
max-width: calc(100% / 6) !important;
padding: 5px;
position: relative !important; } }
/* =============================================================================
Product lists
- Lists of products, for example lister page and 2018 product page
========================================================================= */
.product-list .product-row > .mob-2:nth-child(3n) {
margin-left: 0; }
.product-list .product-item {
color: #000;
display: block;
padding: 6px 0 12px;
text-align: center;
text-decoration: none; }
.product-list .product-item > a {
text-decoration: none; }
.product-list .product-item > a h4 {
color: #000; }
.product-list .product-item .product-image img {
display: block;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto; }
.product-list .product-item .product-detail h4 {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.4;
margin-bottom: 0;
padding-bottom: 6px; }
.product-list .product-item .product-detail .product-cta {
border: 0;
margin: 0; }
.product-list .product-item .product-detail .product-cta .cta {
font-size: .8rem;
border: 0;
letter-spacing: .5px;
padding: 0 0 7.5px;
text-transform: none; }
.product-list .product-item .options {
border: 0 solid #ebebeb;
border-width: 1px 0;
margin-bottom: 6px;
padding: 6px 0; }
.product-list .product-item .options.recipe {
border-bottom: 0; }
.product-list .product-item .options p {
margin: 0; }
.product-list .product-item .options .was,
.product-list .product-item .options .save {
display: inline-block;
font-family: "HumanistBold", sans-serif;
font-size: .8rem; }
.product-list .product-item .options .was {
color: #4c4c4c; }
.product-list .product-item .options .save {
color: #464646; }
.product-list .product-item .options .price {
font-size: 16px;
font-size: 1rem;
color: #dc062e;
display: block;
font-family: "HumanistBold", sans-serif; }
.product-list .product-item .options .price.now {
color: #d0021b; }
.product-list .product-item .details-bottom {
margin-left: auto;
margin-right: auto;
padding-bottom: 6px;
position: relative; }
.product-list .product-item .average-rating {
display: block;
text-align: center; }
.product-list .product-item .stock-message-container {
font-size: 12px;
font-size: 0.75rem;
color: #464646;
display: block;
text-align: left; }
.product-list .product-item .stock-message-container.in-stock, .product-list .product-item .stock-message-container.out-of-stock {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
text-align: center; }
.product-list .product-item .stock-message-container.in-stock .stock-icon,
.product-list .product-item .stock-message-container.in-stock .stock-message, .product-list .product-item .stock-message-container.out-of-stock .stock-icon,
.product-list .product-item .stock-message-container.out-of-stock .stock-message {
display: inline-block;
width: auto; }
.product-list .product-item .stock-message-container .stock-message {
float: left;
margin-bottom: 0;
width: calc(100% - 20px); }
.product-list .product-item .stock-message-container .stock-icon {
float: left;
margin-bottom: 0;
margin-right: 6px; }
.product-list .product-item .stock-message-container .stock-icon > svg {
fill: #28324b;
height: 14px;
text-align: left;
vertical-align: middle;
width: 14px; }
.product-list .product-item .stock-message-container .stock-icon > svg.out-of-stock {
fill: #464646; }
.product-list .product-item .stock-message-container .stock-icon > svg.in-stock {
fill: #458f29; }
@media screen and (min-width: 47.5em) {
.product-list .product-row:last-child .dts-4 > a,
.product-list .product-row:last-child .dts-4 .product-container,
.product-list .product-row:last-child .dts-3 > a,
.product-list .product-row:last-child .dts-3 .product-container {
border-bottom: 0;
margin-bottom: 0; }
.product-list .product-row:last-child .dts-4:last-child > a,
.product-list .product-row:last-child .dts-4 .product-container,
.product-list .product-row:last-child .dts-3:last-child > a,
.product-list .product-row:last-child .dts-3 .product-container {
border-bottom: 0;
padding-bottom: 0; }
.product-list .product-row > .mob-2:nth-child(3n) {
margin-left: 3.125%; }
.product-list .dts-4 > a,
.product-list .dts-4 .product-container,
.product-list .dts-3 > a,
.product-list .dts-3 .product-container {
margin-bottom: 30px;
padding: 0; }
.product-list .dts-4 > a.price-matched,
.product-list .dts-4 .product-container.price-matched,
.product-list .dts-3 > a.price-matched,
.product-list .dts-3 .product-container.price-matched {
border: 0;
border-bottom: 1px solid #ccc;
margin: 0;
padding: 0; }
.product-list .dts-4 > a.price-matched h5,
.product-list .dts-4 .product-container.price-matched h5,
.product-list .dts-3 > a.price-matched h5,
.product-list .dts-3 .product-container.price-matched h5 {
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0; }
.product-list .dts-4 > a.price-matched .product-image,
.product-list .dts-4 .product-container.price-matched .product-image,
.product-list .dts-3 > a.price-matched .product-image,
.product-list .dts-3 .product-container.price-matched .product-image {
border: 2px solid #00aee2; }
.product-list .tab-1 {
margin-left: 17px;
width: 23%; }
.product-list .tab-1:first-child {
margin-left: 0; }
.product-item.mob-2 {
width: calc(100% / 4 - 2.4%); }
.product-item .product-cta {
display: block;
padding-top: 0;
text-align: center;
width: 100%; } }
/* ReCaptcha =========================================================== */
.recaptcha-contact-us {
float: right; }
.recaptcha-enter-address {
left: 50px; }
.recaptcha-register {
float: right; }