/*
Tokens
{Text-A} = #cccccc - Default : #ccc
{Text-B} = #ffffff - Default : #fff
{BTN-Main} = #ffffff - Default : #fff
{BTN-Text} = #000000 - Default : #000
{BTN-Hover} = #dddddd - Default : #ddd
{BG} = #000000 - Default : #000
*/

@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Lato);
/* ---------------------------------------
SCSS file
Authored by Benjamin Hawkyard
Copyright 2013 Benjamin Hawkyard
--------------------------------------- */
/*
NORMALIZE
---------------
HTML & CSS Reset
--------------- */
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }

/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block; }

a,
a:visited {
color: #cccccc;
text-decoration: none; }

/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block; }

/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }

/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none; }

/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */ }

/*
* Removes default margin.
*/
body {
margin: 0; }

/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }

/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }

/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em; }

/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }

/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold; }

/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }

/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000000; }

/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em; }

/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }

/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }

/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }

/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }

sup {
top: -0.5em; }

sub {
bottom: -0.25em; }

/* ==========================================================================
Embedded content
========================================================================== */
/*
* Removes border when inside `a` element in IE 8/9.
*/
img {
border: 0;
max-width: 100%;
height: auto;
}

/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }

/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0; }

/* ==========================================================================
Forms
========================================================================== */
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }

/*
* 1. Corrects color not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }

/*
* 1. Corrects font family not being inherited in all browsers.
* 2. Corrects font size not being inherited in all browsers.
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */ }

/*
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }

/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }

/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default; }

/*
* 1. Addresses box sizing set to `content-box` in IE 8/9.
* 2. Removes excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }

/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }

/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }

/*
* Removes inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }

/*
* 1. Removes default vertical scrollbar in IE 8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }

/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }

header[role=main], .navigation, .products, .product-l {
list-style: none;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
margin-left: 0;
/* [3] */
letter-spacing: -0.31em; }

/* Opera hack */
.opera:-o-prefocus,
header[role=main],
.navigation,
.products,
.product-l {
word-spacing: -0.43em; }

/**
* 1. Cause columns to stack side-by-side.
* 2. Space columns apart.
* 3. Align columns to the tops of each other.
* 4. Full-width unless told to behave otherwise.
* 5. Required to combine fluid widths and fixed gutters.
*/
.logo, .quick-info, .basket,
.contact,
.user-acc, .nav--search, .nav--cat, .product-head,
.review-head, .product-s, .product-l h2, .product-l-img, .product-l-info, .product-l-options li, .contact_address, .contact_form, .nav-collapse, .nav-toggle {
display: inline-block;
/* [1] */
padding-left: 0;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
-webkit-box-sizing: border-box;
/* [5] */
-moz-box-sizing: border-box;
/* [5] */
box-sizing: border-box;
/* [5] */
letter-spacing: normal;
word-spacing: normal; }

.contact-details { letter-spacing: 0em; }

/**
* Reversed grids allow you to structure your source in the opposite order to
* how your rendered layout will appear. Extends `.grid`.
*/
/**
* Gutterless grids have all the properties of regular grids, minus any spacing.
* Extends `.grid`.
*/
/**
* Align the entire grid to the right. Extends `.grid`.
*/
/**
* Centered grids align grid items centrally without needing to use push or pull
* classes. Extends `.grid`.
*/
/**
* Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
* `.grid`.
*/
/**
* Create grids with narrower gutters. Extends `.grid`.
*/
/**
* Create grids with wider gutters. Extends `.grid`.
*/
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Create our width classes, prefixed by the specified namespace.
*/
/**
* Our regular, non-responsive width classes.
*/
/**
* Whole
*/
.product-l-options li {
width: 100%; }

/**
* Halves
*/
.product-l-img, .product-l-info {
width: 49%; }

/**
* Thirds
*/
.nav--search {
width: 33.333%; }

.nav-collapse {
width: 66.666%; }

/**
* Quarters
*/
.logo, .contact_address {
width: 25%; }

.quick-info, .contact_form {
width: 75%; }

/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/
/**
* Our responsive classes, if we have enabled them.
*/
@media only screen and (max-width: 480px) {
/**
* Whole
*/
.logo, .quick-info, .nav-collapse, .nav--search, .product-l-img, .product-l-info, .contact_address, .contact_form {
width: 100%; }

/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
@media only screen and (min-width: 481px) and (max-width: 1023px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
.contact_address {
width: 33.333%; }

.contact_form {
width: 66.666%; }

/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items back to the left by certain amounts.
*/
/*
TYPOGRAPHY
---------------
Typography, Stu Robson's font-size mixin etc
--------------- */
/*
TYPOGRAPHY
---------------
This uses Stu Robson's SASS mixin.
--------------- */
/*
COLOURS
---------------
Show me your true colours.
--------------- */
@media (max-width: 1023px) {
body {
font-size: 90%; } }
@media (max-width: 480px) {
body {
font-size: 85%; } }
h1, h2, h3, h4, h5, h6 {
font-family: "Lato", sans-serif; }

h1 {
font-size: 32px;
font-size: 2rem;
line-height: 0.75;
margin-bottom: 24px;
margin-bottom: 1.5rem; }

h2 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 0;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase; }

h3 {
font-size: 28px;
font-size: 1.75rem;
line-height: 0.8571;
margin-bottom: 24px;
margin-bottom: 1.5rem; }

h4 {
font-size: 26px;
font-size: 1.625rem;
line-height: 0.9231;
margin-bottom: 24px;
margin-bottom: 1.5rem; }

h5 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 24px;
margin-bottom: 1.5rem; }

h6 {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.0909;
margin-bottom: 24px;
margin-bottom: 1.5rem; }

/*
MIXINS
---------------
Reusable Mixins
--------------- */
/*
Mixins
---------------
Mixins go here.
--------------- */
.basket li,
.contact li,
.user-acc li, .nav li {
display: inline-block;
padding-right: 2%; }
.basket li:last-of-type,
.contact li:last-of-type,
.user-acc li:last-of-type, .nav li:last-of-type {
padding-right: 0; }

.btn, .contact_form input[type=submit] {
background-color: #ffffff;
border: none;
font-style: italic;
color: #000000;
display: inline-block;
padding: 8px 10px;
text-transform: lowercase;
text-decoration: none;
-webkit-transition: background-color .2s ease;
-moz-transition: background-color .2s ease;
-ms-transition: background-color .2s ease;
-o-transition: background-color .2s ease;
transition: background-color .2s ease; }
.btn:hover, .contact_form input[type=submit]:hover {
background-color: #dddddd; }

/*
BUTTONS
---------------
Button styles
--------------- */
/*
Buttons
---------------
Button Placeholder Styles
--------------- */
/*
COLOURS
---------------
Show me your true colours.
--------------- */
/*
FORMS
---------------
Form Styles
--------------- */
/*
Forms
---------------
Forms!
--------------- */
/*
COLOURS
---------------
Show me your true colours.
--------------- */
#nav--qs {
border-radius: 25px;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.1em;
padding: .5em 1em; }
#nav--qs:focus {
outline: none; }
@media screen and (max-width: 480px) {
#nav--qs {
width: 100%;
margin: 2% 0; } }

/*
COMPONENTS
---------------
Reusable components
--------------- */
/*
Components
---------------
Reusable Website Components
--------------- */
/*
COLOURS
---------------
Show me your true colours.
--------------- */
.border {
border-top: 1px dotted #262626;
border-bottom: 1px dotted #262626; }

hr {
border: 0;
border-bottom: 1px dotted #262626; }

.overlay {
color: #ffffff;
padding: 3px 5px;
position: absolute;
font-size: 13px;
font-weight: 600;
font-family: "Lato", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 2px 1px rgba(0, 0, 0, 0.2); }

.overlay_hot {
background-color: #D12631; }

.overlay_sale {
background-color: #394A97; }

.overlay_new {
background-color: #FFC60A; }

.saving {
color: #D12631; }

#txtQty {
width: 100%; }

.breadcrumbs {
padding: 0; }
.breadcrumbs li {
display: inline; }
.breadcrumbs li:after {
content: "/";
padding: 0 1em; }
.breadcrumbs li:last-of-type:after {
content: ""; }

#pager_sort_by {
font-family: "Lato", sans-serif;
text-transform: uppercase;
padding: 0;
margin: 0;
border-bottom: 1px dotted #262626;
padding-bottom: 3px;
text-align: right; }
#pager_sort_by li {
display: inline-block;
padding-right: 1%; }

.basket_container {
padding-top: 1em; }

.basket_container, .basket_summary
{
  width:100% !important;
}

.basket_links {
margin-bottom: 30px !important; }

#banner_footer {
text-align: center; }

/*
LAYOUT
---------------
The Layout
--------------- */
/*
Layout
---------------
Layout styles, usually extends _grid.scss
--------------- */
/*
COLOURS
---------------
Show me your true colours.
--------------- */
/*
Mixins
---------------
Mixins go here.
--------------- */
.basket li,
.contact li,
.user-acc li, .nav li {
display: inline-block;
padding-right: 2%; }
.basket li:last-of-type,
.contact li:last-of-type,
.user-acc li:last-of-type, .nav li:last-of-type {
padding-right: 0; }

.btn, .contact_form input[type=submit] {
background-color: #ffffff;
border: none;
font-style: italic;
color: #000000;
display: inline-block;
padding: 8px 10px;
text-transform: lowercase;
text-decoration: none;
-webkit-transition: background-color .2s ease;
-moz-transition: background-color .2s ease;
-ms-transition: background-color .2s ease;
-o-transition: background-color .2s ease;
transition: background-color .2s ease; }
.btn:hover, .contact_form input[type=submit]:hover {
background-color: #dddddd; }

html, body {
background-color: #000000;
background: ;
color: #cccccc;
font-family: Poppins, serif;
font-weight: 300;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7143;
margin-bottom: 24px;
margin-bottom: 1.5rem;
-webkit-background-size:;
-moz-background-size:;
-o-background-size:;
background-size:; }

.wrap {
width: 90%;
max-width: 960px;
margin: 0 auto; }

header[role=main] {
padding: 2% 0; }

@media screen and (max-width: 480px) {
.logo {
text-align: center; } }

.quick-info {
padding-top: .75em; }

.basket,
.contact,
.user-acc {
margin: 0;
text-align: right; }
@media screen and (max-width: 480px) {
.basket,
.contact,
.user-acc {
text-align: center; } }

/*.contact li:first-of-type {
color: #aaa; }*/

.navigation {
padding: 2% 0; }

.nav--search {
text-align: right;
font-family: "Lato", sans-serif; }

.nav--cat {
border-top: none !important;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.2857;
margin-bottom: 0;
font-family: "Lato", sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px; }
@media screen and (max-width: 480px) {
.nav--cat {
text-align: center; } }

.product-head h2,
.review-head h2 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 0;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase; }

.review h4 {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7143;
margin-bottom: 24px;
margin-bottom: 1.5rem;
margin-bottom: 0;
text-transform: uppercase; }
.review cite {
display: block; }

.product-s {
width: 23%;
position: relative;
border: 1px dotted #262626;
padding: 1%;
margin: 1%; }
@media screen and (min-width: 481px) and (max-width: 1023px) {
.product-s {
width: 31%; } }

.product-s img {
border: none !important;
display: block;
width: 100%; }
.product-s h3 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 24px;
margin-bottom: 1.5rem;
margin: 0;
color: #ffffff;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase; }

.product-s-main {
overflow: hidden; }

.product-s-overlay {
position: absolute;
left: 0;
right: 0;
top: 60%;
margin: 0 auto;
width: 75%;
text-align: center;
opacity: 0;
-webkit-transition: opacity .4s ease;
-moz-transition: opacity .4s ease;
-ms-transition: opacity .4s ease;
-o-transition: opacity .4s ease;
transition: opacity .4s ease; }

.product-s-main:hover .product-s-overlay {
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
left: 0;
right: 0;
top: 60%;
margin: 0 auto;
width: 75%;
text-align: center;
opacity: 1; }

.product-s-price {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7143;
margin-bottom: 24px;
margin-bottom: 1.5rem;
margin: 0;
display: block; }

.product-l h2 {
text-transform: uppercase;
font-weight: 300;
letter-spacing: 1px; }

.product-l-img img {
border: 1px dotted #262626;
padding: 1%;
width: 95%; }

.product-l-info h2 {
text-transform: uppercase;
font-weight: 300;
letter-spacing: 1px;
margin: 0; }
.product-l-info h4 {
text-transform: uppercase;
font-weight: 300;
letter-spacing: 1px; }
.product-l-info span {
display: block;
padding: .05em 0; }

.product-l-price {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 24px;
margin-bottom: 1.5rem;
color: #ffffff;
font-weight: 300; }

.product-l-options {
border: 1px dotted #262626;
padding: 2%; }
.product-l-options li label {
display: block;
font-family: "Lato", sans-serif;
text-transform: uppercase;
letter-spacing: 1px; }

.panel {
border: 1px dotted #262626;
padding: 2%; }

.nivo_container {
padding: 2% 0 0 0; }

.nivo_container::after{
    content: '';
    display: block;
    width: 100%;
    clear: both;
}

footer {
text-align: center; }

.contact_form input,
.contact_form textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%; }
@media screen and (max-width: 480px) {
.contact_form input,
.contact_form textarea {
max-width: 200px; } }
.contact_form input:focus,
.contact_form textarea:focus {
outline: none; }
.contact_form input[type=submit] {
float: left;
width: 100px; }

/*------------------------------------*\
NAV
\*------------------------------------*/
.nav--cat {
list-style: none;
text-align: center;
margin: 0;
z-index: 5; }

.nav--cat li {
padding: 1em;
position: relative; }

.nav--cat a {
display: block;
color: #ffffff;
text-decoration: none; }

.nav--cat a:hover {
color: #ffffff; }

/*--- DROPDOWN ---*/
.nav--cat ul {
list-style: none;
position: absolute;
text-transform: lowercase;
font-family: serif;
font-style: italic;
padding-top: 1em;
left: -9999px;
z-index: 999;
/* Hide off-screen when not needed (this is more accessible than display:none;) */ }

.nav--cat li ul li {
padding: 0;
width:100%;
}
.nav--cat ul li {
float: none;
font-weight: 600;
margin: 0; }

.nav--cat ul a {
color: #cccccc;
white-space: nowrap;
/* Stop text wrapping and creating multi-line dropdown items */ }

.nav--cat li:hover {
cursor: pointer; }

.nav--cat li:hover > ul {
/* Display the dropdown on hover */
left: 0;
/* Bring back on-screen when needed */
z-index: 999;
background-color: rgba(255, 255, 255, 0.8);
padding: 1em; }

.nav--cat li:hover a {
/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ }

.nav--cat li:hover ul a {
/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration: none; }

.nav--cat li:hover ul li a:hover {
/* Here we define the most explicit hover states--what happens when you hover each individual link. */
color: #1d1d1d; }

.uc_banner {
text-align: center; }

/*
LAYOUT
---------------
The Layout
--------------- */
/*! responsive-nav.js 1.0.25 by @viljamis */
.nav-collapse {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.2857;
margin-bottom: 0;
font-family: "Lato", sans-serif;
font-weight: 400;
text-transform: uppercase;
padding-top: 5px;
letter-spacing: 1px; }
.nav-collapse li:last-of-type {
padding-bottom: 5px; }
@media screen and (max-width: 480px) {
.nav-collapse {
text-align: center; } }

.nav-collapse li {
width: 100%;
display: inline-block; }

.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1; }

.nav-collapse.opened {
max-height: 9999px; }

.nav-collapse.disable-pointer-events {
pointer-events: none !important; }

.nav-toggle {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
text-align: center;
font-family: "Lato", sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px; }

.fa-bars {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0; }

@media screen and (min-width: 40em) {
.js .nav-collapse {
display: inline-block;
position: relative;
padding-top: 5px; }
.js .nav-collapse li {
display: inline; }

.js .nav-collapse.closed {
display: inline-block;
max-height: none; }

.nav-toggle {
display: none; } }

.arrow_box {
position: relative;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: rgba(255,255,255,0.8);
border-width: 10px;
margin-left: -10px;
}

.extra_product_image {
/*width: auto !important; //Disabled to fix additional product images overlapping the description when there is 4 after taking advice from Benjamin*/
padding: 0 !important;
margin: 0 !important;
}

#recaptcha_table {
    background-color: #ffffff;
}

#recaptcha_response_field {
    padding: 5px;
} 

.category-head {
    text-align: center;
}

/* Product Details Price Styles */
.price_breakdown {
    -moz-border-radius:6px;
    position:relative;
    overflow:visible;
    max-width:300px;
    display:inline-block
}

.price_inc_tax {
    font-size:1.25em;
    font-weight:700;
    padding:0 10px;
    float:left
}

.price_inc_tax span {
    font-size:.5em;
    font-weight:400;
    color:grey;
    position:relative;
    top:-1px;text-decoration:none
}

.price_breakdown hr {
    width:100%;
    border:0;
    height:1px;
    color:#ccc;
    background:#ccc;
    float:left;
    clear:left
}

.price_ex_tax {
    font-size:1em;
    padding:0 10px;
    color:grey;
    float:left
}

.price_ex_tax span {
    font-size:.625em;
    position:relative;
    top:-1px;
    text-decoration:none
}

.price_breakdown a {
    font-size:.65em;
    font-weight:700;
    padding:0 5px;
    text-decoration:none;
    color: #fff;
    position:absolute;
    top:0;
    cursor:help;
    float:right
}

.price_breakdown a span {
    display:none;
    width:120px;
    font-size:11px;
    line-height:16px;
    font-weight:400;
    padding:7px 10px;
    text-align:center;
    position:absolute;
    bottom:0;
    left:0;
    color:#FFF;
    background-color:grey;
    -moz-border-radius:6px;
    border-radius:6px;
    text-decoration:none
}

.price_breakdown a:hover span {
    display:inline
}

.language-bar {
    text-align: right;
}

.language-bar h5 {
    font-size: 1em;
}

/*Review Form*/
.shop_product_review_form input { width: 100%; border-radius:25px; padding: 0.5em 1em; margin-bottom: 2em; }
.shop_product_review_form select { margin-bottom: 2em; padding:0.5em;}
.shop_product_review_form textarea { width: 100%; height: 10em; margin-bottom: 2em; border-radius:25px; padding: 0.5em 1em; }
.shop_product_review_form img { width: 25%; }
.shop_product_review_form label { display: block; }
.shop_review_form_submit, .shop_review_form_cancel { background-color: #ffffff; color: #000000; padding: 20% 30% 20% 30%; border-radius:5px; }


/* Language Select */
#lang_select {list-style: none outside none;margin:0; text-align:right}
#lang_select li {display:inline-block;margin:0.4em}
#lang_select li:first-child a img {border:solid 1px red}
#lang_select li a img {border:solid 1px #ffffff}
#lang_select li a:hover img {border:solid 1px red}

@media screen and (max-width: 480px) {
 #lang_select { text-align:center;}
}

/* Social media icons */
.social{ clear:both; list-style:none; text-align:center;}
.social li { display:inline-block;}
.social li a{  color: #ffffff; font-size:5em; padding-right:0.2em;}

/* Pager/Pagination */

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 21px 0;
  border-radius: 0;
}

.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: #eeeeee;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  cursor: default;
  background-color: #[Main-A];
  border-color: #[Main-A];
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #999999;
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 19px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pager {
  padding-left: 0;
  margin: 21px 0;
  text-align: center;
  list-style: none;
}

.pager:before,
.pager:after {
  display: table;
  content: " ";
}

.pager:after {
  clear: both;
}

.pager:before,
.pager:after {
  display: table;
  content: " ";
}

.pager:after {
  clear: both;
}

.pager:before,
.pager:after {
  display: table;
  content: " ";
}

.pager:after {
  clear: both;
}

.pager:before,
.pager:after {
  display: table;
  content: " ";
}

.pager:after {
  clear: both;
}

.pager:before,
.pager:after {
  display: table;
  content: " ";
}

.pager:after {
  clear: both;
}

.pager li {
  display: inline;
}

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
}

.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

.pager .next > a,
.pager .next > span {
  float: right;
}

.pager .previous > a,
.pager .previous > span {
  float: left;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #999999;
  cursor: not-allowed;
  background-color: transparent;
}
/* Pager/Pagination */

/*Recaptcha Bugfix*/
#recaptcha_challenge_image {width:100%!important;}


/* Modal Popup fix */
.md-modal{width:100%;max-width:540px;color:#fff;}
.md-content{background: #e74c3c;position: relative;border-radius: 3px;margin: 0 auto;}
.md-content > h3{color:#fff !important;    margin: 0;padding: 0.4em;text-align: center;font-size: 2em;font-weight: 300;opacity: 0.8;background: rgba(0,0,0,0.1);border-radius: 3px 3px 0 0;}
.md-content div    {padding: 15px 40px 45px;margin: 0;font-weight: 300;font-size: 1em;line-height:1.4em;}        
.md-content > div p { margin: 0;}
.md-content button{border: none;padding: 0.6em 1.2em;background: #c0392b;color: #fff;letter-spacing: 1px;text-transform: uppercase;cursor: pointer;display: inline-block;border-radius: 2px;display:block;margin: 0 auto;font-size: 0.8em;}
.md-content button:hover { background: #A5281B;}
.md-cancel { position:absolute;bottom:2em;left:2em; }
.md-ok { position:absolute;bottom:2em;right:2em; }

/*Additional Pages Nav*/
#additional_pages { text-align:center }




.blog_view{
    margin-top: 10px;
}

.blog_view_container, .comment_wrap{
    overflow: hidden;
}

.blog_view_left{
    margin-bottom: 20px;
    border: 1px dotted #262626;
    padding: 1%;
}

.blog_view_image{
    width: 100%;
    background-size: cover;
    height: 200px;
}

h1.blog_view_title{
    margin-bottom: 0.5rem;
}

.blog_author span{
    font-weight: bold;
}

.blog_date{
    margin-bottom: 10px;
    font-style: italic;
    font-size: 0.8rem;
}

.blog_view_tag_container{
    margin-bottom: 10px;
    overflow: hidden;
}

.blog_view_tag_container a{
    display: inline-block;
    float: left;
    margin-bottom: 5px;
    margin-right: 5px;
    border: 1px dotted #262626;
    height: 25px;
    line-height: 25px;
    padding: 0px 10px;
}

@media only screen and (min-width:750px){
    .blog_view_left, #comments_section{
        display: inline-block;
        float: left;
        width: 40%;
        margin-right: 5%;
    }
    .blog_view_right, .blog_comments_container{
        display: inline-block;
        float: left;
        width: 55%;
    }
}

/* Comments + Comment Form */

#comments_section header, .blog_comments_header{
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: uppercase;
    border-bottom: 1px dotted #262626;
    margin-bottom: 10px;
}

.blog_comments_content, .blog_comments_reply_content{
    width: 100%;
    border: none;
    height: 100px;
    line-height: 20px;
    padding: 0px 20px;
    margin-bottom: 10px;
}

.blog_comments_author, .blog_comments_email, .blog_comments_reply_author, .blog_comments__reply_email{
    width: 100%;
    border: none;
    height: 25px;
    line-height: 25px;
    padding: 0px 20px;
    margin-bottom: 10px;
}

.blog_comments_email, .blog_comments__reply_email{
    margin-bottom: 0px;
}

#comment_email_label, #comment_reply_email_label{ font-size: 0.8rem; margin-bottom: 10px; }

.blog_comments_submit, .blog_comments_reply_submit{
    background-color: #ffffff;
    border: none;
    font-style: italic;
    color: #000000;
    display: inline-block;
    margin-bottom: 10px;
    padding: 8px 10px;
    text-transform: lowercase;
    text-decoration: none;
    -webkit-transition: background-color .2s ease;
    -moz-transition: background-color .2s ease;
    -ms-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease; 
}

.blog_comments_submit:hover, .blog_comments_reply_submit:hover{
    background-color: #dddddd; 
}

.comment {
    border: 1px dotted #262626;
    padding: 10px;
    margin-bottom: 5px;
}

.blog_comments_reply_reply {
    display: block;
    margin-bottom: 20px;
}

.comment_reply {
    margin-left: 20px;
    border-top: 1px dotted #262626;
    padding-top: 10px;
}

.comment_author{
    font-weight: bold;
}
 
.comment_date{
    font-style: italic;
    font-size: 0.8rem;
}



/* Contact Form - Mobile FIX */
.contact_form label{
    display: block;
}


/* FWS BANNER FIX on NAV */
.js .nav-collapse{
    padding-top: 0px;
}
@media screen and (min-width: 40em){
    .js .nav-collapse{
        padding-top: 5px;
    }
}



.wishlist_container{
    clear: both;
    margin-top: 20px;
}


.wishlist_container a{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.wishlist_container a span{
    margin-left: 10px;
}

.wishlist_container a svg{
    font-size: 1.4rem;
    stroke: #cccccc;
    fill: transparent;
    transition: 0.2s;
    width: 30px;
    height: 30px;
    transform: scale(1);
}

#wishlist_logged_in_html a:hover svg,
#wishlist_not_logged_in_html a:hover svg{
    fill: #cccccc;
}

#wishlist_logged_in_html.wishlist_logged_in_html_activated a svg{
    fill: #cccccc;
    animation-name: wishlistAdd;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes wishlistAdd{
  0%   {transform: scale(1);}
  50%  {transform: scale(1.5);}
  100% {transform: scale(1);}
}

#wishlist_not_logged_in_html.wishlist_not_logged_in_html_activated a svg{
    fill: #cccccc;
    animation-name: wishlistAdding;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes wishlistAdding{
  0%   {transform: scale(1);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1);}
}


#wishlist_added_html a svg{
    fill: #cccccc;
}

#wishlist_added_html a:hover svg{
    fill: transparent;
}

#wishlist_added_html.wishlist_added_html_activated a svg{
    fill: transparent;
    animation-name: wishlistRemove;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes wishlistRemove{
  0%   {transform: scale(1);}
  50%  {transform: scale(0.5);}
  100% {transform: scale(1);}
}


[data-editor-type="social-media-icons"] [data-editor-disabled="true"]{
    display: inline-block;
}