@charset "UTF-8";
/* Functional Mixins */
/* Fonts */
/*------------------------------------
	# FONT FACE

	Shorthand for including @font-face in your css.
	Remember also, Google fonts, Typekit have different approaches.

	Example:
		@include font-face(proxima-nova, /fonts/proxima-nova-bold-italic, bold, italic);

 	Order of the includes matters, and it is: normal, bold, italic, bold+italic.
*/
/* Site Configuration */
/*------------------------------------
	# SITE CONFIGURATION

	To get your site looking the way you want it, start here.
	Just change the values. Don't take anything out. Everything is here for a reason.

*/
/* Site direction */
/* Z-index */
/* Base typography */
/* Font Weight and Style */
/* Site Colours */
/* Headings */
/* Lists */
/* Quotes */
/* Graphical ornaments */
/* Buttons */
/* Forms */
/* Font Sizes */
/* Screen sizes */
/* Media ratios */
/* Template */
/* Modal Box */
/* Framework */
/* Grid */
/* Subject / Object */
/* 1/3 */
/* 2/3 */
/* Tables */
/* Prefixes */
/**
* Developer Mode allows a set of predetermined classes
* to be output by default in the CSS
*/
/* Old IE -- Don't touch */
/* Mixins */
/*------------------------------------
	GCD PATTERNS LIBRARY
*/
/*------------------------------------
	LEGACY

	Target old versions of IE.

	Examples

		@include is-old-ie {
			display:inline;
		}

		@include is-not-old-ie {
			display:inline-block;
		}
*/
/*------------------------------------
	OLD-IE
*/
/*------------------------------------
	SCREEN


	Examples:

		@include screen-size(sm-max);

*/
/*------------------------------------
	RESOLUTIONS
	@include screen-size();
*/
/*------------------------------------
	POSITIONING

	An array of positioning tools

	Examples:

		@include align(top, start)

		div.parent {
			@include display(flex);
			@include align-items(stretch);
			@include flex-direction(row);
			@include justify-content(flex-start);
		}

		div.parent > div.child {
			@include flex(1);
		}

		@include margin($base-space n)

		@include padding(n $base-space)

		@include position(fixed, 0 20px 20px 30%)

		@include rem(padding, 20px)

		@include screen-size(sm-max);

		@include size(20px, 30px)

		@include vertical-spacing(force)

*/
/*------------------------------------
	ALIGN

	Shorthand for aligning horizontally and vertically
*/
/* 	An alternative to the above which allows you to
 	vertically align any element in IE9+
	You may also need to add a transform-style: preserve-3d
	to the parent */
/*------------------------------------
	# FLEXBOX

	http://dev.w3.org/csswg/css3-flexbox/
	http://css-tricks.com/snippets/css/a-guide-to-flexbox/

*/
/*------------------------------------
	Position
*/
/*------------------------------------
	SUBJECT / OBJECT
*/
/*------------------------------------
	VERTICAL-SPACING (Consistent spacing)
*/
/*------------------------------------
	# ANIMATION

	Examples:

	## Animations don't need a starting point, such as a hover. They just begin as soon as the page is loaded.

		@include animation-name(scale, slide);
		@include animation-duration(2s);
		@include animation-timing-function(ease);
		@include animation-iteration-count(infinite);

		// Animation shorthand works the same as the CSS3 animation shorthand
		@include animation(scale 1.0s ease-in, slide 2.0s ease);

		@include keyframes(fadeIn) {
			from {
				@include transform(scale(0));
			}
			to {
				@include transform(scale(1));
			}
		}

		@include transform(translateY(50px));
		@include transform-origin(center top);
		@include transform-style(preserve-3d);

	## Transitions define the movement between one state and another.

		@include transition (all 2.0s ease-in-out);
		@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

		@include transition-property (transform);
		@include transition-duration(1.0s);
		@include transition-timing-function(ease-in);
		@include transition-delay(0.5s);
*/
/*------------------------------------
	# ANIMATION

	The animation mixins support comma separated lists of values, which allows different transitions for individual
	properties to be described in a single style rule. Each value in the list corresponds to the value at that same
	position in the other properties.

		box:hover {
		  @include animation-name(scale, slide);
		  @include animation-duration(2s);
		  @include animation-timing-function(ease);
		  @include animation-iteration-count(infinite);

		  // Animation shorthand works the same as the CSS3 animation shorthand
		  @include animation(scale 1.0s ease-in, slide 2.0s ease);
		}

	http://www.w3.org/TR/css3-animations/#the-animation-name-property-
	Each of these mixins support comma separated lists of values, which allows different transitions for individual
	properties to be described in a single style rule. Each value in the list corresponds to the value at that same
	position in the other properties.

	-- From bourbon.io/docs/#animations
*/
/*------------------------------------
	# KEYFRAMES

	Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content

	@include keyframes(fadeIn) {
	 	from {
			@include transform(scale(0));
	 	}
	 	to {
			@include transform(scale(1));
	 	}
	}
*/
/*------------------------------------
	# TRANSFORM

	The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set

	The transform-origin CSS property lets you modify the origin for transformations of an element.

	The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

		@include transform(translateY(50px));
		@include transform-origin(center top);
		@include transform-style(preserve-3d);
*/
/*------------------------------------
	# TRANSITION

	The shorthand mixin supports multiple transition.

		@include transition (all 2.0s ease-in-out);
		@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

	To transition specific vendor-prefixed properties (`-webkit-transform, -moz-transform, ...`), do not use the shorthand mixin. Use the individual transition mixins.

		@include transition-property (transform);
		@include transition-duration(1.0s);
		@include transition-timing-function(ease-in);
		@include transition-delay(0.5s);
*/
/*------------------------------------
	# BACKGROUND

	Examples:

		@include background-color(red);
		// Sets white text if it's darker than a certain amount

		@include background(linear-gradient(red, green) left repeat);
		@include background(linear-gradient(red, green) left repeat, radial-gradient(red, orange) left repeat);
		@include background(url("/images/a.png"), linear-gradient(red, green), center no-repeat orange scroll);

		@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
		// You can list up to ten background images.
*/
/*------------------------------------
	BACKGROUND
*/
/*------------------------------------
	# BACKGROUND-IMAGE

	The background-image mixin is helpful for chaining multiple comma delimited background images and/or
	linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10
	background-images.

	Use in combination with the linear-gradient function and the radial-gradient function.

		// Image asset with a linear-gradient
		@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));

		// Multiple linear-gradients - Demo
		@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
							   linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));

		// NOT SUPPORTED
		@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);

		// Background-image is not a shorthand property, therefore this doesn't make sense.

	## Note about shorthand notation

	All CSS background properties support comma delimited values. For multiple background images you can specify the
	background properties like position, repeat, etc. for each image. For example:

		@include background-image(url("/images/a.png"), url("images/b.png"));
		background-position: center top, center;
		background-repeat: no-repeat, repeat-x;

	-- From bourbon.io/docs/#background

*/
/*------------------------------------
	LINEAR-GRADIENT

	Gradient Position is optional. Position can be a degree (90deg). Mixin supports up to 10 color-stops.

	This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

		@include linear-gradient(#1e5799, #2989d8);
		@include linear-gradient(to top, #8fdce5, #3dc3d1);
		@include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red);
		@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
*/
/*------------------------------------
	RADIAL-GRADIENT

	Takes up to 10 gradients. See also the background-image mixin.

	This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

		@include radial-gradient(#1e5799, #3dc3d1);
		@include radial-gradient(#1e5799, #3dc3d1, $fallback: red);
		@include radial-gradient(circle at 50% 50%, #eee 10%, #1e5799 30%, #efefef);
*/
/*------------------------------------
	# BORDER
	http://davidtheclark.github.io/scut/#border

	Examples:

		@include border(1px solid red, y n);  // Quickly add border styles to particular sides.

		@include border-image(url(/images/border.png) 27 repeat);

		@include border-top-radius(20px);
*/
/*------------------------------------
	# BORDER
	http://davidtheclark.github.io/scut/#border
*/
/*------------------------------------
	# BORDER IMAGE

	Border-image supports short-hand notation.

		@include border-image(url(/images/border.png) 27 repeat);
*/
/*------------------------------------
	# BORDER RADIUS

	Short hand for putting rounded corners on a side of an element

		@include border-top-radius(20px);
*/
/*------------------------------------
	# CONTAINERS

	Useful container properties

	Examples:
		@include border-box;
		@include clear;
		@include media-box(widescreen, iframe);
		@include media-item;
		@include triangle(up, 1em, red);

*/
/*------------------------------------
	BORDER BOX
*/
/*------------------------------------
	CLEARFIX
	From http://nicolasgallagher.com/micro-clearfix-hack/
*/
.box, .box--clean, .box--border-top, .box--tinted, .box--dark, .box--contrast, .box--alternative, .box--border, .box--feature, .chart-list li, .form__item, .global-header, .clean-list, .panel--primary, .product__header, .product__price-actions, .product__actions, .media-item, .overlay-nav__nav-login ul {
  zoom: 1; }
  .box:after, .box--clean:after, .box--border-top:after, .box--tinted:after, .box--dark:after, .box--contrast:after, .box--alternative:after, .box--border:after, .box--feature:after, .chart-list li:after, .form__item:after, .global-header:after, .clean-list:after, .panel--primary:after, .product__header:after, .product__price-actions:after, .product__actions:after, .media-item:after, .overlay-nav__nav-login ul:after {
    content: '';
    display: table;
    clear: both; }

/*------------------------------------*\

	MEDIA BOX

	Used to constrain the proportions of an element with a set width
	like an iframe.

	Should be applied to a parent container with the media element nested.

	e.g. <div class="video-wrapper">
			<iframe></iframe>
		</div>

	- landscape
	- square
	- portrait
	- widescreen

/*------------------------------------*/
/*------------------------------------
	MEDIA-ITEM

	Allows you to make a simole Media Object like the one here:
	http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

	Set to the $layout to stacked to make the image and body stack one above the other.
*/
.media-item {
  zoom: 1;
  margin-bottom: 16px;
  display: block; }
  .media-item:after {
    content: '';
    display: table;
    clear: both; }
  @media only screen and (max-width: 1000px) {
    .media-item {
      margin-bottom: 15.2px; } }
  @media only screen and (max-width: 481px) {
    .media-item {
      margin-bottom: 14.4px; } }
  .media-item:last-child {
    margin-bottom: 0; }

.media-item__image {
  margin-right: 16px;
  float: left; }
  .media-item__image img {
    width: auto; }

.media-item__body {
  overflow: hidden;
  margin-bottom: 0; }
  .media-item__body > :last-child {
    margin-bottom: 0; }

/*------------------------------------
	TRIANGLE
	http://davidtheclark.github.io/scut/#triangle
*/
/*------------------------------------
	CSS3

	Useful CSS3 tools

	Examples:

		@include calc(width, 100% - 30px, 90%);

		@include prefixer(box-shadow,1px 1px 1px red,webkit moz spec);
*/
/*------------------------------------
	CALC

	Performs calculations with a fallback if necessary

		@include calc(width, 100% - 30px, 90%);
*/
/*------------------------------------
	PREFIXER
	From: Bourbon Mixin Library
	@include prefixer([property),[value],[webkit|+|moz|+|ms|+|o|+|spec]);
*/
/*------------------------------------
	DISPLAY

	Display tools

	Examples:

		@include display(inline-block)
			// In Old IE, this makes display:inline

		@include appearance(none)
			// Removes platform-native styling
*/
/*------------------------------------
	# APPEARANCE

	The appearance CSS property is used to display an element using a platform-native styling based on the operating system's theme.

		@include appearance(none);
*/
/*------------------------------------
	# DISPLAY

	Use new display types with more broadly supported equivalents as fallbacks

		@include display(flex)
*/
/*------------------------------------
	EFFECTS

	3D and special effects

	Examples:

		@include perspective(300px);
		@include perspective-origin(30% 30%);
*/
/*------------------------------------
	PERSPECTIVE

	The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.

	The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

		@include perspective(300px);
		@include perspective-origin(30% 30%);

*/
/*------------------------------------
	SHADOWS
*/
/*------------------------------------
	FORMS

	Consistent form inputs and buttons

	Examples:

		@include button(color(primary));

		@include field;

		@include placeholder {
			color: red;
		}
*/
/*------------------------------------*\

   	BUTTON

	Button options and styles can be changed in _config.scss
	under the *Buttons*.

	Options include:

	$button-font-family
	$has-button-border
	$has-button-gradient
	$has-button-shadow
	$is-button-rounded

	/ref/patterns.php#buttons

/*------------------------------------*/
.button:hover, .button--primary:hover, .button--secondary:hover, .button--tertiary:hover, .button--warning:hover, .button--disabled:hover, .button:active, .button--primary:active, .button--secondary:active, .button--tertiary:active, .button--warning:active, .button--disabled:active {
  text-decoration: none; }

.button, .button--primary, .button--secondary, .button--tertiary, .button--warning, .button--disabled {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: baseline;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  cursor: pointer;
  font-family: "Din Text Pro Regular", sans-serif;
  line-height: 32px;
  min-height: 32px;
  white-space: nowrap;
  border: 1px solid;
  border-color: #d0d0d0;
  border-radius: 1.6666666667px; }
  [disabled].button, [disabled].button--primary, [disabled].button--secondary, [disabled].button--tertiary, [disabled].button--warning, [disabled].button--disabled {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
    opacity: 0.5; }

.button-group input[type="submit"].button,
.button-group .button {
  margin-right: -2px; }
.button-group input[type="submit"].button,
.button-group .button {
  border-radius: 0 0 0 0; }
  .button-group input[type="submit"].button:first-child,
  .button-group .button:first-child {
    border-top-left-radius: 1.6666666667px;
    border-bottom-left-radius: 1.6666666667px; }
  .button-group input[type="submit"].button:last-child,
  .button-group .button:last-child {
    border-top-right-radius: 1.6666666667px;
    border-bottom-right-radius: 1.6666666667px; }

/*------------------------------------
	PLACEHOLDER

	Outputs vendor-prefixed placeholders for styling. Must be nested in a rule-set.

		input {
			width: 300px;
				@include placeholder {
					color: red;
				}
		}

*/
/*------------------------------------
	IMAGES

	Consistent retina-display images

	Examples:

		@include hidpi {
			background-image:url(/imagepath_retina.jpg);
		}

		@include image-rendering (optimize-contrast) // Useful for sharper logos, but heavy on performance.

		@include retina-image(home-icon, 32px 20px)
*/
/*------------------------------------
	# HIDPI

	Create specific styles for HiDPI

	@include hidpi {
		background-image:url(/imagepath_retina.jpg);
	}
*/
/*------------------------------------
	# IMAGE-RENDERING
*/
/*------------------------------------
	RETINA IMAGE

	The mixin is a helper to generate a retina background-image and non-retina background-image. The retina background-image will output to a hidpi media-query.

	The mixin uses a _2x.png retina filename by default.
	$filename will resolve a path to the image e.g. '../../home-icon'.
	For rails, you can use the asset-pipeline by passing true to the argument.

	@ retina-image($filename, $background-size, $extension*, $retina-filename*, $retina-suffix*, $asset-pipeline*)
	* = optional

	Argument Defaults

	- $extension: png
	- $retina-filename: null
	- $retina-suffix: _2x
	- $asset-pipeline: false
*/
/*------------------------------------
	TYPOGRAPHY

	Control font settings and text layout with these tools

	Examples:

		@include columns(12 8em);
		@include column-rule(1px solid green);

		@include font-face(proxima-nova);

		@include font-features(liga kern frac);

		@include font-size(font-size(beta))
		@include hide-text;
		@include legibility;
		@include link;

		@include table-borders(grid, 1px, solid, red)
		@include table-layout(fixed)
		@include table-rounded($base-radius)
		@include table-pattern(stripes)

		@include text-truncate(90%);

*/
/*------------------------------------
	# COLUMNS

	Prefixed text column styles.
	Not supported in older browsers.
	Avoid shoehorning polyfills, instead content yourself with single-columns fallbacks
*/
/*------------------------------------
	# FONT FACE

	Shorthand for including @font-face in your css.
	Remember also, Google fonts, Typekit have different approaches.

	Example:
		@include font-face(proxima-nova, /fonts/proxima-nova-bold-italic, bold, italic);

 	Order of the includes matters, and it is: normal, bold, italic, bold+italic.
*/
/*------------------------------------
	# FONT FEATURES

	Make the most of Opentype features
	http://clagnut.com/sandbox/css3/
*/
/*------------------------------------
	FONT-SIZE
*/
/*------------------------------------
	# HIDE-TEXT

	Hide-text is an image replacement mixin. It is based off the HTML5-Boilerplate image-replacement.
*/
/*------------------------------------
	LEGIBILITY
*/
/*------------------------------------
	LINK
*/
a, .link, input.link {
  color: #29ABE2;
  cursor: pointer; }
  a:hover, .link:hover {
    color: #83ceee; }
  a:visited, .link:visited {
    color: #35a6d6; }
  a:active, .link:active {
    color: #29ABE2; }

/*------------------------------------
	TABLES
*/
/*------------------------------------
	LISTS

	Style lists of text or lists of items

	Examples:

		@include item-list(horizontal);

		@include list(clean);
*/
/*------------------------------------
	LIST

*/
/*------------------------------------
	LISTS
*/
/*------------------------------------*\

   	GRID SYSTEM

	Provides various methods used to lay out a page.
	All are based on fractional widths

	@include grid-row();
		// Use on the parent of grid items
	@include grid-row-divs(n);
		// Creates a container for your grid items that ensures flush vertical edges to the outer container, or whatever container it's in.
		// Inserting a number (n) creates equal divisions of that amount
	@include grid-fraction(n, d)
		// A grid fraction. If you want to support old versions of IE, ensure you have an inner container with class .ie-inner

	/ref/patterns.php#grid

/*------------------------------------*/
/**
* See: http://css-tricks.com/make-sure-columns-dont-collapse-horizontally/
*/
/**
* Creates equal divisions of any given amount of items
* Should be applied to the parent, will affect the direct children
*
* NOTE: this isn't designed to be used on it's own, use @include grid_row_div(n) instead
*/
/**
* Used when content is not divided up into fractions
*/
/**
* For setting the width of an element to be a fraction of the page.
* e.g @include grid-fraction(2, 3) would use 2 thirds of the page.
*
* This also adds support for older versions of IE,
* (this requires you using an inner container with class .ie-inner)
*/
.grid-2s > *, .grid-3s > *, .grid-4s > *, .grid-5s > *, .grid-6s > *, .grid-7s > *, .grid-8s > *, .grid-9s > *, .grid-10s > *, .grid-11s > *, .grid-12s > *, .details td {
  min-height: 1px;
  float: left; }

.grid-2s > *, .grid-3s > *, .grid-4s > *, .grid-5s > *, .grid-6s > *, .grid-7s > *, .grid-8s > *, .grid-9s > *, .grid-10s > *, .grid-11s > *, .grid-12s > *, .details td {
  padding-left: 8px;
  padding-right: 8px; }

/**
* Used to contain a number of grid items, adds negative margins to the left and right
*/
.row {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .row:after {
    content: '';
    display: table;
    clear: both; }

/**
* Used when you want to create equal divisions of the children
* in your container.

* By adding a number ($n) when including this in your css you
* can split it's content into equal sections in the grid.
*/
/**
* Used as the main container when setting the fixed with of a page
* Generally good practice to have one of these per main section e.g. header, footer, main
*/
.global-main, .outer-container {
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  max-width: 1280px; }

/* Elements */
/*

    ELEMENTS
    Combines the Normalize (git.io/normalize)
    and the reset at
    csswizardry.com/2011/10/reset-restarted
    with GCD's own preferences

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

/*------------------------------------
	HTML5 INLINE BLOCK ELEMENTS
	Correct `block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
  display: inline-block;
  max-width: 100%; }

/*------------------------------------
	Address styling not present in IE 8/9.
*/
[hidden] {
  display: none; }

/*--------------------------------------
	BOX MODEL
	This works for IE8 and above.
	For IE7, there'll need to be tweaks
*/
/**
* Let’s make the box model all nice, shall we...?
*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*------------------------------------
	Smooth transitions
*/
:hover {
  -moz-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s; }

/*------------------------------------
	Remove margins and padding
*/
h1, h2, h3, h4, h5, h6,
dl, dd, ol, ul,
p, blockquote, pre,
table, th, td, caption,
form, fieldset, legend,
hr {
  margin: 0;
  padding: 0; }

/*------------------------------------
	Spacing Resets
*/
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
table,
form, fieldset, figure,
pre {
  margin-bottom: 16px; }
  @media only screen and (max-width: 1000px) {
    h1, h2, h3, h4, h5, h6,
    ul, ol, dl,
    blockquote, p, address,
    table,
    form, fieldset, figure,
    pre {
      margin-bottom: 15.2px; } }
  @media only screen and (max-width: 481px) {
    h1, h2, h3, h4, h5, h6,
    ul, ol, dl,
    blockquote, p, address,
    table,
    form, fieldset, figure,
    pre {
      margin-bottom: 14.4px; } }
  h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child,
  ul:last-child, ol:last-child, dl:last-child,
  blockquote:last-child, p:last-child, address:last-child,
  table:last-child,
  form:last-child, fieldset:last-child, figure:last-child,
  pre:last-child {
    margin-bottom: 0; }

/*------------------------------------
	HTML & BODY
*/
html {
  font-family: "Din Text Pro Regular", sans-serif;
  font-size: 1em;
  font-size: 16px;
  font-size-adjust: 0.5;
  direction: ltr;
  line-height: 1.5;
  min-height: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }
  @media only screen and (max-width: 1000px) {
    html {
      font-size: 0.95em; } }
  @media only screen and (max-width: 481px) {
    html {
      font-size: 0.9em; } }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-feature-settings: "liga" 1, "kern" 1;
  -moz-font-feature-settings: "liga=1", "kern=1";
  -ms-font-feature-settings: "liga" 1, "kern" 1;
  -o-font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-feature-settings: "liga" 1, "kern" 1;
  font-feature-settings: "liga" 1, "kern" 1;
  background: #ffffff;
  color: #5E5F68;
  margin: 0;
  position: relative;
  width: 100%;
  font-weight: normal; }

/*------------------------------------
	SITE DIRECTION
	This should very rarely be touched
*/
/*------------------------------------
	Links
*/
a {
  text-decoration: none; }
  a:focus {
    outline: thin dotted; }
  a:active, a:hover {
    outline: 0; }
  a:hover, a:active, a:focus {
    text-decoration: underline; }

/*------------------------------------
	Headings
*/
h1 {
  color: #393A45;
  font-family: "Din Text Pro Regular", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5; }
  @media only screen and (max-width: 1000px) {
    h1 {
      font-size: 38px; } }
  @media only screen and (max-width: 481px) {
    h1 {
      font-size: 36px; } }

h2 {
  color: #393A45;
  font-family: "Din Text Pro Regular", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.5; }
  @media only screen and (max-width: 1000px) {
    h2 {
      font-size: 32.3px; } }
  @media only screen and (max-width: 481px) {
    h2 {
      font-size: 30.6px; } }

h3 {
  color: #393A45;
  font-family: "Din Text Pro Regular", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5; }
  @media only screen and (max-width: 1000px) {
    h3 {
      font-size: 26.6px; } }
  @media only screen and (max-width: 481px) {
    h3 {
      font-size: 25.2px; } }

h4 {
  color: #393A45;
  font-family: "Din Text Pro Regular", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5; }
  @media only screen and (max-width: 1000px) {
    h4 {
      font-size: 22.8px; } }
  @media only screen and (max-width: 481px) {
    h4 {
      font-size: 21.6px; } }

h5 {
  color: #393A45;
  font-family: "Din Text Pro Regular", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5; }
  @media only screen and (max-width: 1000px) {
    h5 {
      font-size: 19px; } }
  @media only screen and (max-width: 481px) {
    h5 {
      font-size: 18px; } }

h6 {
  color: #393A45;
  font-family: "Din Text Pro Regular", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5; }
  @media only screen and (max-width: 1000px) {
    h6 {
      font-size: 15.2px; } }
  @media only screen and (max-width: 481px) {
    h6 {
      font-size: 14.4px; } }

/*------------------------------------
	Lists
*/
ul, ol, dd {
  margin-left: 32px; }

ul {
  list-style: disc; }

ol {
  list-style: decimal; }

dt {
  font-weight: bold; }

dd {
  margin: 0 0 16px 0;
  padding: 0; }

/*------------------------------------
	Code
*/
code,
kbd,
pre,
samp {
  font-size: 16px;
  font-family: Consolas, Monaco, "Andale Mono", monospace -family; }
  @media only screen and (max-width: 1000px) {
    code,
    kbd,
    pre,
    samp {
      font-size: 15.2px; } }
  @media only screen and (max-width: 481px) {
    code,
    kbd,
    pre,
    samp {
      font-size: 14.4px; } }

pre {
  white-space: pre-wrap; }

/*------------------------------------
	Form
*/
/* form */
/* fieldset */
fieldset {
  border: 0; }

/* label */
label {
  cursor: pointer;
  display: inline;
  margin-right: 8px; }
  label input {
    margin-right: 8px; }

/* input */
button,
input,
select,
textarea {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: inherit;
  font-size: 100%;
  font-weight: normal;
  margin: 0; }
  button[disabled],
  input[disabled],
  select[disabled],
  textarea[disabled] {
    cursor: default; }
  button::-moz-focus-inner,
  input::-moz-focus-inner,
  select::-moz-focus-inner,
  textarea::-moz-focus-inner {
    border: 0;
    padding: 0; }

button,
select {
  text-transform: none; }

input[type="email"]:focus, input[type="email"]:active, input[type="number"]:focus, input[type="number"]:active, input[type="password"]:focus, input[type="password"]:active, input[type="search"]:focus, input[type="search"]:active, input[type="tel"]:focus, input[type="tel"]:active, input[type="text"]:focus, input[type="text"]:active, input[type="url"]:focus, input[type="url"]:active, input[type="color"]:focus, input[type="color"]:active, input[type="date"]:focus, input[type="date"]:active, input[type="datetime"]:focus, input[type="datetime"]:active, input[type="datetime-local"]:focus, input[type="datetime-local"]:active, input[type="month"]:focus, input[type="month"]:active, input[type="time"]:focus, input[type="time"]:active, input[type="week"]:focus, input[type="week"]:active {
  cursor: text; }

input[type="color"] {
  line-height: 1;
  padding: 0;
  min-height: 32px;
  min-width: 32px; }

input[type="checkbox"],
input[type="radio"] {
  padding: 0; }

/* textarea */
textarea {
  overflow: auto;
  vertical-align: top; }
  textarea:focus, textarea:active {
    cursor: text; }

/*------------------------------------
	Inline Elements
*/
b {
  font-weight: 500; }

strong {
  font-weight: 500;
  font-family: "Din Text Pro Medium", sans-serif; }
  strong strong {
    font-weight: bolder; }

i, em {
  font-style: italic; }
  i i, i em, em i, em em {
    font-style: normal; }

small {
  font-size: 14px; }
  @media only screen and (max-width: 1000px) {
    small {
      font-size: 13.3px; } }
  @media only screen and (max-width: 481px) {
    small {
      font-size: 12.6px; } }

u, ins {
  text-decoration: underline; }

u.typo {
  text-decoration: none;
  border-bottom: 1px dashed #F8ABB5; }

dfn {
  font-style: italic; }

mark {
  color: #5E5F68;
  background-color: #ffff00; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/*------------------------------------
	Quotations
*/
q {
  quotes: "‘" "’" "“" "”"; }
  q:before {
    content: "\2018";
    content: open-quote; }
  q:after {
    content: "\2019";
    content: close-quote; }
  q q:before {
    content: "\201C";
    content: open-quote; }
  q q:after {
    content: "\201D";
    content: close-quote; }

blockquote {
  quotes: "“" "”";
  text-indent: -0.41em; }
  blockquote p {
    margin-bottom: 8px; }
    @media only screen and (max-width: 1000px) {
      blockquote p {
        margin-bottom: 7.6px; } }
    @media only screen and (max-width: 481px) {
      blockquote p {
        margin-bottom: 7.2px; } }
    blockquote p:last-child {
      margin-bottom: 0; }
    blockquote p:before {
      content: "“";
      content: open-quote; }
    blockquote p:after {
      content: "";
      content: no-close-quote; }
    blockquote p:last-of-type {
      margin-bottom: 0; }
      blockquote p:last-of-type:after {
        content: "”";
        content: close-quote; }
  blockquote q:before {
    content: "\2018";
    content: open-quote; }
  blockquote q:after {
    content: "\2019";
    content: close-quote; }
  blockquote footer {
    display: block;
    margin-top: 8px;
    text-indent: 0; }
    blockquote footer:before {
      content: "\2014"; }

/*------------------------------------
	Media
*/
img {
  border: 0;
  font-style: italic;
  max-width: 100%; }
  img[height], img[width] {
    max-width: none; }

audio:not([controls]) {
  display: none;
  height: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0; }
  figure > * {
    margin-bottom: 8px; }
    @media only screen and (max-width: 1000px) {
      figure > * {
        margin-bottom: 7.6px; } }
    @media only screen and (max-width: 481px) {
      figure > * {
        margin-bottom: 7.2px; } }
    figure > *:last-child {
      margin-bottom: 0; }

/*------------------------------------
	Rules
*/
hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.1);
  border: 0;
  height: 1px; }

/*------------------------------------
	Table
*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

th:only-of-type {
  text-align: left;
  vertical-align: bottom; }

td {
  vertical-align: top; }

/* Cell alignments */
[colspan="1"] {
  text-align: left; }

[rowspan] {
  vertical-align: middle; }

[rowspan="1"] {
  vertical-align: top; }

.-disable-hover,
.-disable-hover * {
  pointer-events: none !important; }

/* Objects */
.accordion-select {
  display: none; }
.accordion-title label {
  cursor: default;
  line-height: inherit; }
@media only screen and (max-width: 1000px) {
  .accordion {
    list-style: none;
    margin-left: 0;
    position: relative; }
    .accordion-select {
      position: absolute;
      left: -9999px; }
      .accordion-select:checked ~ .accordion-main {
        max-height: 1000px; }
      .accordion-select:checked ~ .accordion-title:before {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg); }
    .accordion-title {
      margin-top: 16px;
      margin-bottom: 0px;
      position: relative; } }
    @media only screen and (max-width: 1000px) and (min-width: 1000px) {
      .accordion-title {
        line-height: 32px; } }
@media only screen and (max-width: 1000px) {
      .accordion-title:before, .accordion-title:after {
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        transition: 0.5s;
        border-left: 1px solid currentColor;
        content: "";
        position: absolute;
        left: 0.5em;
        width: 0;
        height: 0.5em;
        top: 0.5em; } }
      @media only screen and (max-width: 1000px) and (min-width: 1000px) {
        .accordion-title:before, .accordion-title:after {
          border-left-width: 2px; } }
@media only screen and (max-width: 1000px) {
      .accordion-title:after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg); }
      .accordion-title:first-child {
        margin-top: 0; }
      .accordion-title label {
        color: #29ABE2;
        cursor: pointer;
        padding-left: 32px;
        padding-right: 32px;
        cursor: pointer;
        line-height: inherit; }
        .accordion-title label:hover {
          color: #83ceee; }
        .accordion-title label:visited {
          color: #35a6d6; }
        .accordion-title label:active {
          color: #29ABE2; }
      .accordion-title.report__title, .accordion-title.form__title {
        border: 0;
        margin-bottom: 0;
        padding: 0; }
    .accordion-main {
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
      max-height: 0px;
      overflow: hidden; }
      .accordion-main dl, .accordion-main table {
        margin-top: 16px;
        margin-bottom: 16px; } }

/*------------------------------------*\

   	ALERTS

    Designed to style an alert message with a background
    color depending on the type of alert.

	/ref/patterns.php#alert

/*------------------------------------*/
.alert, .alert--info, .alert--warning, .alert--error, .alert--success {
  background-color: #e1e1e4;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  margin-bottom: 16px;
  position: relative;
  border-left: 5px solid #46474d; }
  @media only screen and (max-width: 1000px) {
    .alert, .alert--info, .alert--warning, .alert--error, .alert--success {
      padding-top: 8px;
      padding-right: 8px;
      padding-bottom: 8px;
      padding-left: 8px; } }

.alert--info, .alert--warning, .alert--error, .alert--success {
  padding-left: 43.2px; }
  @media only screen and (max-width: 1000px) {
    .alert--info, .alert--warning, .alert--error, .alert--success {
      padding-left: 28px; } }
  .alert--info:before, .alert--warning:before, .alert--error:before, .alert--success:before {
    position: absolute;
    top: 16px;
    left: 16px; }
    @media only screen and (max-width: 1000px) {
      .alert--info:before, .alert--warning:before, .alert--error:before, .alert--success:before {
        position: absolute;
        top: 8px;
        left: 8px; } }

.alert--info:before {
  content: '\f05a';
  font-family: FontAwesome; }

.alert--warning {
  background-color: #fef1e2;
  color: #f6931e;
  border-left: 5px solid #d87909; }
  .alert--warning.banner {
    background-color: #f6931e;
    color: white;
    color: white;
    margin: 0; }
    .alert--warning.banner a, .alert--warning.banner a:visited {
      color: white; }
    .alert--warning.banner:before {
      color: #fac280; }
  .alert--warning:before {
    content: '\f05a';
    font-family: FontAwesome; }

.alert--error {
  background: #f8abb5;
  border-left: 5px solid #ec1e39;
  color: #c61128; }
  .alert--error:before {
    content: '\f071';
    font-family: FontAwesome; }

.alert--success {
  background: #b8e986;
  border-left: 5px solid #6cb521;
  color: #528a19; }
  .alert--success:before {
    content: '\f00c';
    font-family: FontAwesome; }

.basket--mini {
  margin-bottom: 0;
  position: relative; }
  .basket--mini .tag--count {
    display: none; }
  @media only screen and (max-width: 481px) {
    .basket--mini .tag--count {
      display: block;
      position: absolute;
      top: -2px;
      right: -2px;
      line-height: 24px;
      z-index: 7000; } }
  @media only screen and (min-width: 481px) {
    .basket--mini {
      margin-left: 16px; } }
  @media only screen and (min-width: 1000px) and (max-width: 1100px) {
    .basket--mini {
      margin-left: 0; } }
  .basket--mini:hover .media-item__image {
    border-color: #144284;
    color: #144284; }
  .basket--mini:hover strong {
    color: #144284; }
  .basket--mini .media-item__image {
    line-height: 60.8px;
    padding: 0 16px;
    font-size: 28px;
    border: 2px solid #f6931e;
    border-radius: 100% 100% 100% 100%;
    color: #f6931e; }
    @media only screen and (max-width: 481px) {
      .basket--mini .media-item__image {
        margin-right: 0;
        float: right;
        line-height: 50.8px;
        padding: 0 13px; } }
    @media only screen and (min-width: 1000px) and (max-width: 1100px) {
      .basket--mini .media-item__image {
        border: none;
        padding: 0;
        line-height: 46.7692307692px; } }
  .basket--mini .media-item__body {
    text-align: left; }
    @media only screen and (max-width: 481px) {
      .basket--mini .media-item__body {
        display: none; } }
    .basket--mini .media-item__body strong {
      display: block; }
  .basket--mini .tag--secondary {
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 32px;
    margin-top: 4px;
    z-index: 7000; }
    @media only screen and (max-width: 1000px) {
      .basket--mini .tag--secondary {
        left: auto;
        margin: 0;
        right: 4px;
        top: 4px; } }
  .basket--mini:hover {
    border-color: #5e5f68;
    cursor: pointer; }

.basket--full td {
  vertical-align: middle; }
.basket--full .product-image {
  float: left;
  width: 50px;
  margin-right: 16px;
  max-width: 30%; }
.basket--full .product-details {
  overflow: hidden; }
  .basket--full .product-details a {
    font-weight: bold; }
  .basket--full .product-details input {
    text-align: end;
    max-width: 50px; }

.basket--next h2 {
  font-size: 20px; }
  @media only screen and (max-width: 1000px) {
    .basket--next h2 {
      font-size: 19px; } }
  @media only screen and (max-width: 481px) {
    .basket--next h2 {
      font-size: 18px; } }
.basket--next .button--primary,
.basket--next .button--tertiary {
  width: 100%;
  text-align: center; }

/*------------------------------------*\

	BOX

	Used as a container. .box includes a smaller
	scale for headings.

	/ref/patterns.php#box

/*------------------------------------*/
.box, .box--clean, .box--border-top, .box--tinted, .box--dark, .box--contrast, .box--alternative, .box--border {
  border: 1px solid #e4e4e4;
  padding: 13.3333333333px 16px;
  background: white;
  margin-bottom: 16px; }

@media only screen and (min-width: 481px) {
  .box--clean {
    border-color: transparent; } }

.box--border-top {
  border-color: #e4e4e4 transparent transparent transparent;
  border-radius: 0; }

.box--tinted {
  background: #F6F6F6; }

.box--dark {
  background-color: #144284;
  color: white;
  border: none; }
  .box--dark a, .box--dark a:visited {
    color: white; }

.box--contrast {
  background-color: #29ABE2;
  color: white;
  border: none; }
  .box--contrast a, .box--contrast a:visited {
    color: white; }

.box--alternative {
  background-color: #fef1e2;
  border: 1px solid #fcdab1; }

.box--border {
  border: 1px solid #e4e4e4;
  margin-bottom: 16px; }

.box--border-bottom {
  padding: 0 0 16px 0;
  border-bottom: 1px solid #aaa;
  margin-bottom: 32px; }

.box--feature {
  background-color: #f5f9fe;
  border: 1px solid #144284;
  padding: 13.3333333333px 16px;
  margin-bottom: 16px; }

.box__header {
  margin: -14px -16px 16px -16px;
  padding: 16px;
  border-bottom: 1px solid #e4e4e4; }

.breadcrumb {
  list-style: none;
  margin-left: 0; }
  .breadcrumb dd, .breadcrumb li {
    margin-left: 0; }
  .breadcrumb * > a:only-child {
    display: block; }
  .breadcrumb > * {
    display: inline-block;
    vertical-align: baseline; }
  .breadcrumb .fa-angle-right {
    padding: 0 8px; }

.button, .button--primary, .button--secondary, .button--tertiary, .button--warning, .button--disabled {
  background: #dddddd;
  border-color: #d0d0d0;
  color: #5d5d5d;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 5px; }
  .button:visited, .button--primary:visited, .button--secondary:visited, .button--tertiary:visited, .button--warning:visited, .button--disabled:visited {
    color: #5d5d5d; }
  .button:hover, .button--primary:hover, .button--secondary:hover, .button--tertiary:hover, .button--warning:hover, .button--disabled:hover {
    background: #d0d0d0;
    color: #444444; }
  .button:active, .button--primary:active, .button--secondary:active, .button--tertiary:active, .button--warning:active, .button--disabled:active {
    background: #c3c3c3;
    color: #2a2a2a; }
  [disabled].button, [disabled].button--primary, [disabled].button--secondary, [disabled].button--tertiary, [disabled].button--warning, [disabled].button--disabled {
    background: #dddddd; }
    [disabled].button:hover, [disabled].button--primary:hover, [disabled].button--secondary:hover, [disabled].button--tertiary:hover, [disabled].button--warning:hover, [disabled].button--disabled:hover, [disabled].button:active, [disabled].button--primary:active, [disabled].button--secondary:active, [disabled].button--tertiary:active, [disabled].button--warning:active, [disabled].button--disabled:active {
      background: #dddddd; }

.button--primary {
  background: #144284;
  border-color: #11376e;
  color: white; }
  .button--primary:visited {
    color: white; }
  .button--primary:hover {
    background: #11376e;
    color: white; }
  .button--primary:active {
    background: #0d2c58;
    color: white; }
  .button--primary[disabled] {
    background: #144284; }
    .button--primary[disabled]:hover, .button--primary[disabled]:active {
      background: #144284; }
.button--secondary {
  background: #f6931e;
  border-color: #f1870a;
  color: white; }
  .button--secondary:visited {
    color: white; }
  .button--secondary:hover {
    background: #f1870a;
    color: white; }
  .button--secondary:active {
    background: #d87909;
    color: white; }
  .button--secondary[disabled] {
    background: #f6931e; }
    .button--secondary[disabled]:hover, .button--secondary[disabled]:active {
      background: #f6931e; }
.button--tertiary {
  background: none; }
.button--fill {
  width: 100%; }
.button--small {
  font-size: 14px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 21.3333333333px;
  min-height: 21.3333333333px; }
  @media only screen and (max-width: 1000px) {
    .button--small {
      font-size: 13.3px; } }
  @media only screen and (max-width: 481px) {
    .button--small {
      font-size: 12.6px; } }
.button--warning {
  background: #c4302b;
  border-color: #af2b26;
  color: white; }
  .button--warning:visited {
    color: white; }
  .button--warning:hover {
    background: #af2b26;
    color: white; }
  .button--warning:active {
    background: #9a2622;
    color: white; }
  .button--warning[disabled] {
    background: #c4302b; }
    .button--warning[disabled]:hover, .button--warning[disabled]:active {
      background: #c4302b; }
  .button--warning a {
    color: white; }
.button--disabled {
  background: #f6931e;
  border-color: #f1870a;
  color: white;
  background-color: transparent;
  cursor: not-allowed;
  color: #c4302b;
  border: 1px solid #c4302b; }
  .button--disabled:visited {
    color: white; }
  .button--disabled:hover {
    background: #f1870a;
    color: white; }
  .button--disabled:active {
    background: #d87909;
    color: white; }
  .button--disabled[disabled] {
    background: #f6931e; }
    .button--disabled[disabled]:hover, .button--disabled[disabled]:active {
      background: #f6931e; }
  .button--disabled:hover {
    background-color: transparent;
    color: #c4302b;
    opacity: 0.5; }
.button--full-width {
  width: 100%; }

.basket--next .button--primary {
  font-size: 14px; }

.chart-list {
  color: #f6931e; }
  .chart-list span {
    color: rgba(94, 95, 104, 0.6); }
  .chart-list b {
    font-weight: bold; }
  .chart-list .chart-thumb {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    float: right;
    max-width: 42px;
    max-height: 42px;
    margin-bottom: 4px;
    overflow: hidden; }

.checkout-steps {
  margin-bottom: 16px;
  list-style: none;
  border: 1px solid #e4e4e4;
  margin-left: 0; }
  @media only screen and (max-width: 1000px) {
    .checkout-steps {
      margin-bottom: 15.2px; } }
  @media only screen and (max-width: 481px) {
    .checkout-steps {
      margin-bottom: 14.4px; } }
  .checkout-steps:last-child {
    margin-bottom: 0; }
  .checkout-steps li {
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    border-top: 1px solid #e4e4e4;
    color: rgba(94, 95, 104, 0.3); }
    .checkout-steps li:first-child {
      border-top: 0; }
    .checkout-steps li.current {
      background: #F6F6F6;
      color: #5e5f68;
      font-weight: bold; }
    .checkout-steps li.completed {
      background: #F6F6F6;
      color: #79cb25; }
    .checkout-steps li .fa-input {
      font-size: 24px;
      margin-top: -7.2727272727px;
      margin-left: -8px;
      float: left;
      width: 24%;
      text-align: center; }
      @media only screen and (max-width: 1000px) {
        .checkout-steps li .fa-input {
          font-size: 22.8px; } }
      @media only screen and (max-width: 481px) {
        .checkout-steps li .fa-input {
          font-size: 21.6px; } }
    .checkout-steps li .num {
      float: right;
      opacity: 0.6; }
  @media only screen and (max-width: 1000px) {
    .checkout-steps {
      display: table;
      max-width: none;
      width: 100%; }
      .checkout-steps li {
        padding-top: 8px;
        padding-right: 8px;
        padding-bottom: 8px;
        padding-left: 8px;
        border-top: 0;
        border-left: 1px solid #e4e4e4;
        display: table-cell;
        text-align: center; }
        .checkout-steps li:first-child {
          border-left: 0; }
        .checkout-steps li .fa-input {
          font-size: 16px;
          display: block;
          margin: 0;
          float: none;
          width: auto; } }
      @media only screen and (max-width: 1000px) and (max-width: 1000px) {
        .checkout-steps li .fa-input {
          font-size: 15.2px; } }
      @media only screen and (max-width: 1000px) and (max-width: 481px) {
        .checkout-steps li .fa-input {
          font-size: 14.4px; } }
  @media only screen and (max-width: 1000px) {
        .checkout-steps li .num {
          display: none; } }

.xp-checkout--button {
  font-size: 0.8em;
  color: #29abe2; }
  .xp-checkout--button img {
    max-height: 11px;
    margin-right: 4px; }
  .xp-checkout--button-large {
    color: #29abe2; }
    .xp-checkout--button-large img {
      max-height: 13px;
      margin-right: 4px; }

.content-area {
  padding-left: 16px; }
  @media only screen and (min-width: 481px) and (max-width: 1000px) {
    .lap__item .content-area {
      padding: 0; } }
  @media only screen and (max-width: 481px) {
    .palm__item .content-area {
      padding: 0; } }

.content-left {
  padding-right: 16px; }
  @media only screen and (min-width: 481px) and (max-width: 1000px) {
    .lap__item .content-left {
      padding: 0; } }
  @media only screen and (max-width: 481px) {
    .palm__item .content-left {
      padding: 0; } }

@media only screen and (max-width: 481px) {
  .content-area,
  .content-left {
    padding: 0; } }

.drop-down {
  position: absolute;
  z-index: 7000;
  border-radius: 0 0 5px 5px;
  min-width: 200px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); }
  .has-drop-down--wide .drop-down {
    min-width: 400px; }
  .drop-down ul {
    list-style: none;
    margin-left: 0; }
    .drop-down ul dd, .drop-down ul li {
      margin-left: 0; }
    .drop-down ul * > a:only-child {
      display: block; }
    .drop-down ul > li {
      margin-bottom: 16px; }
      @media only screen and (max-width: 1000px) {
        .drop-down ul > li {
          margin-bottom: 15.2px; } }
      @media only screen and (max-width: 481px) {
        .drop-down ul > li {
          margin-bottom: 14.4px; } }
      .drop-down ul > li:last-child {
        margin-bottom: 0; }
  .nav .drop-down {
    margin-top: -1px;
    border-radius: 0 5px 5px 5px; }

.form {
  margin-bottom: 32px; }
  .form input[type="email"], .form input[type="number"], .form input[type="password"], .form input[type="search"], .form input[type="tel"], .form input[type="text"], .form input[type="url"], .form input[type="color"], .form input[type="date"], .form input[type="datetime"], .form input[type="datetime-local"], .form input[type="month"], .form input[type="time"], .form input[type="week"], .form textarea, .form select, .form .StripeElement {
    display: inline-block;
    vertical-align: baseline;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
    color: #5E5F68;
    background: #ffffff;
    line-height: 16px;
    max-width: 100%;
    min-height: 35.2px;
    width: auto;
    font-family: inherit;
    border: 1px solid #e4e4e4;
    max-width: 100%; }
    @media only screen and (max-width: 481px) {
      .form input[type="email"], .form input[type="number"], .form input[type="password"], .form input[type="search"], .form input[type="tel"], .form input[type="text"], .form input[type="url"], .form input[type="color"], .form input[type="date"], .form input[type="datetime"], .form input[type="datetime-local"], .form input[type="month"], .form input[type="time"], .form input[type="week"], .form textarea, .form select, .form .StripeElement {
        width: 100%; } }
    .form input[type="email"]:invalid, .form input[type="number"]:invalid, .form input[type="password"]:invalid, .form input[type="search"]:invalid, .form input[type="tel"]:invalid, .form input[type="text"]:invalid, .form input[type="url"]:invalid, .form input[type="color"]:invalid, .form input[type="date"]:invalid, .form input[type="datetime"]:invalid, .form input[type="datetime-local"]:invalid, .form input[type="month"]:invalid, .form input[type="time"]:invalid, .form input[type="week"]:invalid, .form textarea:invalid, .form select:invalid, .form .StripeElement:invalid {
      border-color: #c4302b; }
    .form input[type="email"]:required:valid, .form input[type="number"]:required:valid, .form input[type="password"]:required:valid, .form input[type="search"]:required:valid, .form input[type="tel"]:required:valid, .form input[type="text"]:required:valid, .form input[type="url"]:required:valid, .form input[type="color"]:required:valid, .form input[type="date"]:required:valid, .form input[type="datetime"]:required:valid, .form input[type="datetime-local"]:required:valid, .form input[type="month"]:required:valid, .form input[type="time"]:required:valid, .form input[type="week"]:required:valid, .form textarea:required:valid, .form select:required:valid, .form .StripeElement:required:valid {
      border-color: #b8e986; }
    .form input[type="email"].disabled, .form input[type="number"].disabled, .form input[type="password"].disabled, .form input[type="search"].disabled, .form input[type="tel"].disabled, .form input[type="text"].disabled, .form input[type="url"].disabled, .form input[type="color"].disabled, .form input[type="date"].disabled, .form input[type="datetime"].disabled, .form input[type="datetime-local"].disabled, .form input[type="month"].disabled, .form input[type="time"].disabled, .form input[type="week"].disabled, .form textarea.disabled, .form select.disabled, .form .StripeElement.disabled {
      cursor: not-allowed;
      background: #eaeaea;
      border-style: inset; }
  .form .StripeElement {
    display: block;
    margin-bottom: 16px; }
  .form select {
    background: url("/static/images/icons/directdown.gif") right no-repeat white;
    color: #29abe2;
    padding-right: 0; }
  .form__title {
    font-size: 20px;
    border-bottom: 1px solid #e4e4e4;
    padding: 0 0 8px 0;
    margin-bottom: 16px;
    color: #f6931e; }
    @media only screen and (max-width: 1000px) {
      .form__title {
        font-size: 19px; } }
    @media only screen and (max-width: 481px) {
      .form__title {
        font-size: 18px; } }
    .has-required-fields .form__title:after {
      content: "* Required Fields";
      display: block;
      font-size: 16px;
      opacity: 0.6; }
  .form__actions {
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px; }
    @media only screen and (max-width: 1000px) {
      .form__actions {
        padding: 0; } }
    .form__actions--inline {
      padding-top: 16px;
      padding-right: 16px;
      padding-bottom: 16px;
      padding-left: 16px; }
      @media only screen and (max-width: 1000px) {
        .form__actions--inline {
          padding: 0; } }
    @media only screen and (min-width: 1000px) {
      .form__actions--inline, .form--inline .form__actions {
        padding-left: 40%;
        padding-left: calc(40% + 8px); } }
  .form__item {
    margin-bottom: 16px; }
    @media only screen and (max-width: 1000px) {
      .form__item {
        margin-bottom: 15.2px; } }
    @media only screen and (max-width: 481px) {
      .form__item {
        margin-bottom: 14.4px; } }
    .form__item:last-child {
      margin-bottom: 0; }
    .form__item.is-required label:after {
      color: #c4302b;
      content: "*";
      font-weight: normal;
      margin-left: 2px; }
    .form__item.is-required .error-placeholder {
      display: none; }
      .form__item.is-required .error-placeholder.failed {
        display: block; }
    @media only screen and (max-width: 1000px) {
      .forgot-password .form__item input[type="email"] {
        width: 100%; } }
    @media only screen and (min-width: 1000px) {
      .form__item.form__item--inline label, .form--inline .form__item label {
        position: relative; }
        .form__item.form__item--inline label:after, .form--inline .form__item label:after {
          position: absolute;
          right: -12px;
          margin-left: 0; } }
    .form__item.form__item--inline br + input, .form--inline .form__item br + input {
      margin-top: 4px; }
    .form__item .field__help {
      display: block;
      font-size: 14px;
      opacity: 0.6; }
  .form--grid {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    flex-flow: row nowrap; }
    .form--grid > * {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 100%;
      -moz-flex: 1 100%;
      -ms-flex: 1 100%;
      flex: 1 100%;
      display: block;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: column-reverse;
      -moz-flex-flow: column-reverse;
      flex-flow: column-reverse;
      -webkit-box-pack: end;
      -moz-box-pack: end;
      box-pack: end;
      -webkit-justify-content: flex-end;
      -moz-justify-content: flex-end;
      -ms-justify-content: flex-end;
      -o-justify-content: flex-end;
      justify-content: flex-end;
      -ms-flex-pack: end;
      margin-bottom: 0;
      margin-left: 32px; }
      .form--grid > *:first-child {
        margin-left: 0; }
      .form--grid > * label {
        margin-top: 4px;
        margin-bottom: 0; }
      .form--grid > * input[type="email"], .form--grid > * input[type="number"], .form--grid > * input[type="password"], .form--grid > * input[type="search"], .form--grid > * input[type="tel"], .form--grid > * input[type="text"], .form--grid > * input[type="url"], .form--grid > * input[type="color"], .form--grid > * input[type="date"], .form--grid > * input[type="datetime"], .form--grid > * input[type="datetime-local"], .form--grid > * input[type="month"], .form--grid > * input[type="time"], .form--grid > * input[type="week"], .form--grid > * textarea, .form--grid > * select {
        width: 100%; }
      .form--grid > * .field__error {
        margin-left: 0; }
      .form--grid > * .field__success {
        margin-left: 0; }
  .form--inline {
    margin-bottom: 16px; }
    @media only screen and (max-width: 1000px) {
      .form--inline {
        margin-bottom: 15.2px; } }
    @media only screen and (max-width: 481px) {
      .form--inline {
        margin-bottom: 14.4px; } }
    .form--inline:last-child {
      margin-bottom: 0; }

.label {
  margin-bottom: 4px;
  cursor: default;
  display: block; }
  @media only screen and (min-width: 1000px) {
    .form__item--inline .label, .form--inline .label {
      padding-top: 4px;
      float: left;
      width: 37%;
      text-align: right;
      text-align: end; } }

.field label {
  display: block; }
  .field label input {
    margin-right: 4px; }
  .field label :checked ~ span {
    font-weight: bold; }
@media only screen and (min-width: 1000px) {
  .form__item--inline .field, .form--inline .field {
    float: right;
    width: 60%;
    text-align: left; } }
@media only screen and (min-width: 1000px) {
  .form__item--inline .field label:first-child, .form--inline .field label:first-child {
    margin-top: 4px; }
  .form__item--inline .field label:last-child, .form--inline .field label:last-child {
    margin-bottom: 4px; } }
@media only screen and (min-width: 1000px) {
  .form__item--inline .field .form__actions, .form--inline .field .form__actions {
    padding-left: 0; } }
.field--inline label {
  display: inline-block;
  margin-right: 16px; }
.field__success {
  margin-left: 8px;
  color: #b8e986;
  display: none;
  line-height: 32px; }
  .field__success:before {
    content: "check";
    font-family: FontAwesome; }
.field__error {
  margin-left: 8px;
  color: #c4302b;
  display: none; }
.field input:invalid ~ .field__error {
  display: inline-block;
  line-height: 32px;
  white-space: nowrap; }
.field input:valid ~ .field__success {
  display: inline; }

.report__title {
  font-size: 20px;
  border-bottom: 1px solid #e4e4e4;
  padding: 0 0 8px 0;
  margin-bottom: 16px;
  color: #144284; }
  @media only screen and (max-width: 1000px) {
    .report__title {
      font-size: 19px; } }
  @media only screen and (max-width: 481px) {
    .report__title {
      font-size: 18px; } }

.error-placeholder {
  color: #c4302b;
  font-style: normal;
  margin-left: 8px;
  font-size: 24px; }
  .error-placeholder.failed {
    display: block;
    margin-left: 0;
    padding-top: 5.3333333333px;
    font-size: 16px; }

#voucher-designs .voucher {
  margin: 0 10px 0 0;
  width: 333px;
  height: 217px;
  float: left;
  cursor: pointer; }
  @media only screen and (max-width: 481px) {
    #voucher-designs .voucher {
      float: none; } }
  #voucher-designs .voucher.xmas {
    background: url("/images/vouchers/christmas.png") no-repeat top left; }
  #voucher-designs .voucher.party {
    background: url("/images/vouchers/party.png") no-repeat top left; }
  #voucher-designs .voucher.standard {
    background: url("/images/vouchers/standard.png") no-repeat top left; }
  #voucher-designs .voucher:hover, #voucher-designs .voucher.selected {
    background-position: bottom left; }

textarea {
  padding-top: 8px !important; }

.disabled {
  cursor: not-allowed !important;
  background: #eaeaea;
  border: 1px solid #cecece; }

/*------------------------------------*\

   	GLOABAL FOOTER

	For styles specific to the sites global footer

	e.g If you are repeating content from the header
	and want to style it differently.

	/ref/patterns.php#global-footer

/*------------------------------------*/
.global-footer {
  border-top: 1px solid #e4e4e4; }
  .global-footer ul {
    margin: 0; }

/*------------------------------------*\

   	GLOBAL HEADER

	For styles specific to the sites global header

	e.g Specific styling for your main nav

	/ref/patterns.php#global-header

/*------------------------------------*/
.global-header {
  text-align: left;
  position: relative; }
  @media only screen and (max-width: 1000px) {
    .global-header {
      border-bottom: 1px solid #e4e4e4; } }
  @media only screen and (min-width: 481px) and (max-width: 1000px) {
    .global-header .member-links {
      position: absolute;
      top: 70px;
      right: 16px; } }
  .global-header .vouchers .tag--contrast {
    margin-top: 4px; }
  @media only screen and (min-width: 481px) and (max-width: 1000px) {
    .global-header .vouchers {
      display: none; } }

.top-links {
  padding: 16px; }
  .top-links ul {
    margin-bottom: 0; }
  .top-links a {
    color: #9d9d9d; }

.menu-icon {
  padding-top: 8px;
  padding-bottom: 8px;
  position: absolute;
  top: 0px;
  right: 16px;
  background-color: #144284;
  color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  display: none;
  position: absolute;
  text-align: center;
  width: 20%;
  width: calc(25% - 18px);
  z-index: 9000; }
  .menu-icon a, .menu-icon a:visited {
    color: white; }
  @media only screen and (max-width: 1000px) {
    .menu-icon {
      display: block; } }
  @media only screen and (max-width: 481px) {
    .menu-icon {
      right: 8px; } }
  .menu-icon .fa-times {
    display: none; }
  .menu-icon.MenuIcon--close .fa-times {
    display: block; }
  .menu-icon.MenuIcon--close .fa-bars {
    display: none; }

/*------------------------------------*\

   	GLOBAL MAIN

   	This is the main section of your page, all
   	content is printed in .global-main

	/ref/patterns.php#global-main

/*------------------------------------*/
.global-main {
  padding-top: 32px;
  padding-bottom: 32px;
  min-height: 43.75em;
  position: relative; }
  @media only screen and (max-width: 481px) {
    .global-main {
      min-height: 0; } }

/*------------------------------------*\

   	GRID SYSTEM

	Provides various methods used to lay out a page.
	All are based on fractional widths

	@include grid-row();
		// Use on the parent of grid items
	@include grid-row-divs(n);
		// Creates a container for your grid items that ensures flush vertical edges to the outer container, or whatever container it's in.
		// Inserting a number (n) creates equal divisions of that amount
	@include grid-fraction(n, d)
		// A grid fraction. If you want to support old versions of IE, ensure you have an inner container with class .ie-inner

	/ref/patterns.php#grid

/*------------------------------------*/
.grid {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid:after {
    content: '';
    display: table;
    clear: both; }

.grid__item {
  padding-left: 8px;
  padding-right: 8px;
  float: none;
  width: auto; }

.grid__item-1of2 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 50%; }

.grid__item-1of3 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 33.3333333333%; }

.grid__item-2of3 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 66.6666666667%; }

.grid__item-1of4 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 25%; }

.grid__item-2of4 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 50%; }

.grid__item-3of4 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 75%; }

.grid__item-1of5 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 20%; }

.grid__item-2of5 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 40%; }

.grid__item-3of5 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 60%; }

.grid__item-4of5 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 80%; }

.grid__item-1of6 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 16.6666666667%; }

.grid__item-2of6 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 33.3333333333%; }

.grid__item-3of6 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 50%; }

.grid__item-4of6 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 66.6666666667%; }

.grid__item-5of6 {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 1px;
  float: left;
  width: 83.3333333333%; }

@media only screen and (max-width: 481px) {
  .grid {
    zoom: 1;
    margin-left: -8px;
    margin-right: -8px; }
    .grid:after {
      content: '';
      display: table;
      clear: both; }

  .palm__item {
    padding-left: 8px;
    padding-right: 8px;
    float: none;
    width: auto; }

  .palm__item-1of2 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .palm__item-1of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .palm__item-2of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .palm__item-1of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 25%; }

  .palm__item-2of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .palm__item-3of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 75%; }

  .palm__item-1of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 20%; }

  .palm__item-2of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 40%; }

  .palm__item-3of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 60%; }

  .palm__item-4of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 80%; }

  .palm__item-1of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 16.6666666667%; }

  .palm__item-2of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .palm__item-3of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .palm__item-4of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .palm__item-5of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 83.3333333333%; } }
@media only screen and (min-width: 481px) and (max-width: 1000px) {
  .grid {
    zoom: 1;
    margin-left: -8px;
    margin-right: -8px; }
    .grid:after {
      content: '';
      display: table;
      clear: both; }

  .lap__item {
    padding-left: 8px;
    padding-right: 8px;
    float: none;
    width: auto; }

  .lap__item-1of2 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .lap__item-1of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .lap__item-2of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .lap__item-1of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 25%; }

  .lap__item-2of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .lap__item-3of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 75%; }

  .lap__item-1of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 20%; }

  .lap__item-2of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 40%; }

  .lap__item-3of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 60%; }

  .lap__item-4of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 80%; }

  .lap__item-1of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 16.6666666667%; }

  .lap__item-2of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .lap__item-3of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .lap__item-4of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .lap__item-5of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 83.3333333333%; } }
@media only screen and (min-width: 1000px) {
  .grid {
    zoom: 1;
    margin-left: -8px;
    margin-right: -8px; }
    .grid:after {
      content: '';
      display: table;
      clear: both; }

  .lap-and-up__item {
    padding-left: 8px;
    padding-right: 8px;
    float: none;
    width: auto; }

  .lap-and-up__item-1of2 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .lap-and-up__item-1of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .lap-and-up__item-2of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .lap-and-up__item-1of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 25%; }

  .lap-and-up__item-2of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .lap-and-up__item-3of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 75%; }

  .lap-and-up__item-1of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 20%; }

  .lap-and-up__item-2of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 40%; }

  .lap-and-up__item-3of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 60%; }

  .lap-and-up__item-4of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 80%; }

  .lap-and-up__item-1of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 16.6666666667%; }

  .lap-and-up__item-2of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .lap-and-up__item-3of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .lap-and-up__item-4of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .lap-and-up__item-5of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 83.3333333333%; } }
@media only screen and (min-width: 1100px) {
  .grid {
    zoom: 1;
    margin-left: -8px;
    margin-right: -8px; }
    .grid:after {
      content: '';
      display: table;
      clear: both; }

  .desk__item {
    padding-left: 8px;
    padding-right: 8px;
    float: none;
    width: auto; }

  .desk__item-1of2 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .desk__item-1of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .desk__item-2of3 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .desk__item-1of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 25%; }

  .desk__item-2of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .desk__item-3of4 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 75%; }

  .desk__item-1of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 20%; }

  .desk__item-2of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 40%; }

  .desk__item-3of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 60%; }

  .desk__item-4of5 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 80%; }

  .desk__item-1of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 16.6666666667%; }

  .desk__item-2of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 33.3333333333%; }

  .desk__item-3of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 50%; }

  .desk__item-4of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 66.6666666667%; }

  .desk__item-5of6 {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 1px;
    float: left;
    width: 83.3333333333%; } }
.grid-1s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-1s:after {
    content: '';
    display: table;
    clear: both; }
.grid-2s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-2s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-2s > * {
    width: 50%; }
    .grid-2s > *:nth-child(2n+1) {
      clear: both; }
.grid-3s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-3s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-3s > * {
    width: 33.3333333333%; }
    .grid-3s > *:nth-child(3n+1) {
      clear: both; }
.grid-4s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-4s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-4s > * {
    width: 25%; }
    .grid-4s > *:nth-child(4n+1) {
      clear: both; }
.grid-5s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-5s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-5s > * {
    width: 20%; }
    .grid-5s > *:nth-child(5n+1) {
      clear: both; }
.grid-6s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-6s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-6s > * {
    width: 16.6666666667%; }
    .grid-6s > *:nth-child(6n+1) {
      clear: both; }
.grid-7s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-7s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-7s > * {
    width: 14.2857142857%; }
    .grid-7s > *:nth-child(7n+1) {
      clear: both; }
.grid-8s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-8s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-8s > * {
    width: 12.5%; }
    .grid-8s > *:nth-child(8n+1) {
      clear: both; }
.grid-9s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-9s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-9s > * {
    width: 11.1111111111%; }
    .grid-9s > *:nth-child(9n+1) {
      clear: both; }
.grid-10s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-10s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-10s > * {
    width: 10%; }
    .grid-10s > *:nth-child(10n+1) {
      clear: both; }
.grid-11s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-11s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-11s > * {
    width: 9.0909090909%; }
    .grid-11s > *:nth-child(11n+1) {
      clear: both; }
.grid-12s {
  zoom: 1;
  margin-left: -8px;
  margin-right: -8px; }
  .grid-12s:after {
    content: '';
    display: table;
    clear: both; }
  .grid-12s > * {
    width: 8.3333333333%; }
    .grid-12s > *:nth-child(12n+1) {
      clear: both; }

.c-icm-ad {
  height: 100%;
  width: 100%;
  background-color: #006aac;
  position: relative;
  overflow: hidden; }

.c-icm-ad::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  content: "";
  display: block;
  background-image: linear-gradient(0deg, #006AAC, rgba(0, 106, 172, 0));
  opacity: 0.5;
  z-index: 2; }

.c-icm-ad * {
  margin-bottom: 0; }

.c-icm-ad__heading-image {
  width: 90%;
  position: absolute;
  bottom: 0;
  opacity: 0.8;
  display: block;
  z-index: 0; }

@media screen and (max-width: 1012px) {
  .c-icm-ad__heading-image {
    display: none; } }
@media screen and (max-width: 550px) {
  .c-icm-ad__heading-image {
    display: block; } }
@media screen and (max-width: 550px) {
  .c-icm-ad {
    display: none; } }
.c-icm-ad .c-icm-ad__heading-container {
  height: 100%; }

.ad-grid {
  display: grid;
  grid-template-columns: 1fr 320px; }

@media screen and (max-width: 481px) {
  .ad-grid {
    grid-template-columns: 1fr; }

  .ad-grid .grid__item-1of4 {
    width: 100%; }

  /* .c-icm-ad__heading-image {
    display: block;
  } */ }
.ad-grid .grid__item-1of4 {
  width: 100%;
  min-width: 320px;
  min-height: fit-content; }

.ad-grid .grid__item-3of4 {
  width: 100%; }

.c-icm-ad .c-icm-ad__image {
  border-radius: 14px;
  background-color: lightgrey;
  width: 100%;
  min-height: 100%;
  aspect-ratio: 1/1.18;
  box-shadow: 0px 4px 14px 0px rgba(4, 9, 12, 0.25);
  z-index: 2;
  margin-top: -14px;
  margin-bottom: -10px;
  overflow: hidden; }
  .c-icm-ad .c-icm-ad__image img {
    height: 100%;
    object-fit: cover; }

.c-icm-ad .c-icm-ad__heading-small {
  color: #e9f9fe;
  font-weight: 200;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 100%;
  padding-block: 1vh;
  padding-left: 0.5vw;
  opacity: 0.8;
  margin-top: auto; }

.c-icm-ad .c-icm-ad__heading-large {
  opacity: 0.8;
  font-size: clamp(106px, 10vw, 125px);
  font-weight: 900;
  color: #e9f9fe;
  line-height: 65%;
  margin-left: -0.07em;
  letter-spacing: 0vw; }

.c-icm-ad .c-icm-ad__price-savings {
  font-weight: 200;
  color: #808080;
  font-size: clamp(13px, 2vw, 16px);
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  gap: clamp(8px, 0.75vw, 10px); }

.c-icm-ad .c-icm-ad__main-price {
  color: #f69f25;
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 100%;
  padding-block: 0.5vh;
  letter-spacing: -1px;
  text-transform: uppercase; }

.c-icm-ad .c-icm-ad__card-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5vw; }

.c-icm-ad .c-icm-ad__content-container {
  padding: 12px 8px;
  z-index: 5;
  position: relative; }

@media screen and (max-width: 871px) {
  .ad-grid .grid__item-1of4 {
    display: none; }

  .ad-grid {
    grid-template-columns: 1fr; } }
@media screen and (max-width: 550px) {
  .ad-grid .grid__item-1of4 {
    display: block; } }
.c-icm-ad .c-icm-ad__book-title a {
  font-weight: 800;
  line-height: 110%;
  font-size: clamp(16px, 2vw, 18px);
  color: #5E5F68; }

.c-icm-ad .c-icm-ad__author a {
  font-weight: 400;
  line-height: 110%;
  font-size: clamp(13px, 1.5vw, 16px);
  color: #5E5F68; }

.c-icm-ad .c-icm-ad__content-card {
  background-color: white;
  border-radius: 14px;
  padding-inline: 8px;
  padding-top: 8px;
  position: relative; }

.c-icm-ad .button {
  font-size: clamp(13px, 1vw, 16px);
  border: none;
  text-wrap: nowrap;
  transform: translateY(50%);
  line-height: 100%;
  background-color: #f69f25;
  color: white;
  border-radius: 25px;
  padding: 0.5em 0.75em;
  width: fit-content; }

.c-icm-ad .c-icm-ad__book-details {
  padding: 4px; }

.c-icm-ad .c-icm-ad__saving-price {
  position: relative;
  font-size: clamp(13px, 2vw, 16px);
  text-wrap: nowrap;
  line-height: 100%; }

.c-icm-ad .strike::before {
  position: absolute;
  content: "";
  width: 105%;
  height: 3px;
  background-color: #f69f25;
  transform: rotate(-12deg);
  top: 48%; }

.fa-input {
  font-family: FontAwesome, "Din Text Pro Regular", sans-serif; }

.image-enlarge {
  text-align: center;
  margin: -8px 0 32px 0;
  padding: 4px;
  border-radius: 0 0 5px 5px; }

.image-corner {
  position: absolute;
  top: -8px;
  left: -16px; }

.landing__feature {
  font-size: 0px; }

/*------------------------------------*\

   	LINK

	Make anything have the appearance of a link

	/ref/patterns.php#link

/*------------------------------------*/
a, .link, input.link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-decoration: none; }
  a:hover, .link:hover {
    text-decoration: underline; }

input.link:hover {
  text-decoration: none; }

.clean-list {
  list-style: none;
  margin-left: 0; }
  .clean-list dd, .clean-list li {
    margin-left: 0; }
  .clean-list * > a:only-child {
    display: block; }

.clean-list--alternative {
  float: right; }
  .clean-list--alternative li {
    font-size: 14px;
    display: inline-block;
    margin-right: 8px; }
    @media only screen and (max-width: 1000px) {
      .clean-list--alternative li {
        font-size: 13.3px; } }
    @media only screen and (max-width: 481px) {
      .clean-list--alternative li {
        font-size: 12.6px; } }

.clean-list--inline {
  list-style: none;
  margin-left: 0; }
  .clean-list--inline dd, .clean-list--inline li {
    margin-left: 0; }
  .clean-list--inline * > a:only-child {
    display: block; }
  .clean-list--inline > * {
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px; }
    .clean-list--inline > * > *:only-child {
      margin-top: -8px;
      margin-right: -8px;
      margin-bottom: -8px;
      margin-left: -8px;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 8px;
      padding-right: 8px; }
  .clean-list--inline > * {
    display: inline-block;
    vertical-align: baseline; }

dl.data-inline {
  margin-bottom: 16px;
  overflow: hidden; }
  @media only screen and (max-width: 1000px) {
    dl.data-inline {
      margin-bottom: 15.2px; } }
  @media only screen and (max-width: 481px) {
    dl.data-inline {
      margin-bottom: 14.4px; } }
  dl.data-inline:last-child {
    margin-bottom: 0; }
  dl.data-inline dt:first-of-type, dl.data-inline dd:first-of-type {
    margin-top: 0; }
  dl.data-inline dt {
    clear: both;
    float: left;
    margin-top: 8px;
    opacity: 0.6;
    text-align: right;
    width: 35%; }
  dl.data-inline dd {
    clear: right;
    margin: 0;
    margin-top: 8px;
    float: right;
    width: 62%; }
    dl.data-inline dd + dd {
      margin-top: 0; }

@media only screen and (max-width: 481px) {
  .outer-container {
    padding: 0;
    background-color: white; }
    .panel--primary .outer-container {
      background: none; } }

/*------------------------------------*\

   	NAV

	/ref/patterns.php#nav

/*------------------------------------*/
.nav {
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  list-style: none;
  margin-left: 0;
  padding: 0 16px; }
  .nav dd, .nav li {
    margin-left: 0; }
  .nav * > a:only-child {
    display: block; }
  .nav > * {
    display: inline-block;
    vertical-align: baseline; }
  @media only screen and (min-width: 1100px) {
    .nav {
      padding: 0 24px; } }
  .nav ul {
    list-style: none;
    margin-left: 0; }
    .nav ul dd, .nav ul li {
      margin-left: 0; }
    .nav ul * > a:only-child {
      display: block; }
  @media only screen and (min-width: 1100px) {
    .nav > li > a {
      font-size: 16px;
      padding: 16px 12px !important; } }
  @media only screen and (min-width: 1100px) and (max-width: 1000px) {
    .nav > li > a {
      font-size: 15.2px; } }
  @media only screen and (min-width: 1100px) and (max-width: 481px) {
    .nav > li > a {
      font-size: 14.4px; } }

  .nav .drop-down {
    display: none; }
  .nav .has-drop-down a:hover, .nav .has-drop-down--wide a:hover {
    transition: none; }
  .nav .has-drop-down:hover > a, .nav .has-drop-down--wide:hover > a {
    position: relative;
    border-color: #e4e4e4;
    background: white;
    z-index: 7001; }
  .nav .has-drop-down:hover .drop-down, .nav .has-drop-down--wide:hover .drop-down {
    display: block; }
  .nav > li {
    position: relative; }
    .nav > li > a {
      padding: 16px 4px;
      display: block;
      border-left: 1px solid white;
      border-right: 1px solid white;
      font-weight: 500;
      font-family: "Din Text Pro Medium", sans-serif;
      color: #144284; }
      .nav > li > a.u-secondary {
        color: #f6931e; }
  @media only screen and (max-width: 1000px) {
    .nav {
      display: none; } }

/*------------------------------------*\

   	PAGER

/*------------------------------------*/
.pager {
  display: inline-block;
  border-radius: 5px;
  list-style: none;
  margin-left: 0; }
  .pager dd, .pager li {
    margin-left: 0; }
  .pager * > a:only-child {
    display: block; }
  .pager > * {
    display: inline-block;
    vertical-align: baseline; }
  .pager li:first-child {
    border-left: none; }
  .pager a, .pager span {
    display: block;
    padding: 5.3333333333px 8px; }
  .pager > .current {
    background-color: #144284;
    color: white;
    border-radius: 5px; }
    .pager > .current a, .pager > .current a:visited {
      color: white; }

/*------------------------------------*\

   	PAGE

	/ref/patterns.php#page

/*------------------------------------*/
.page {
  background-color: #f6f6f6; }

.panel, .panel--primary {
  padding: 16px; }
  @media only screen and (min-width: 1100px) {
    .panel, .panel--primary {
      padding: 32px; } }

.panel--primary {
  background-color: #144284;
  color: white;
  padding-top: 5.3333333333px;
  padding-right: 5.3333333333px;
  padding-bottom: 5.3333333333px;
  padding-left: 5.3333333333px; }
  .panel--primary a, .panel--primary a:visited {
    color: white; }

@media only screen and (min-width: 481px) {
  .product, .reviews, .also-bought {
    padding-left: 16px; } }

.product__header {
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 16px; }
  @media only screen and (max-width: 481px) {
    .product__header {
      border: none; } }
  .product__header .mobile-price-actions {
    display: none; }
    @media only screen and (max-width: 481px) {
      .product__header .mobile-price-actions {
        display: block; } }

.product__title {
  margin-bottom: 0; }
  @media only screen and (max-width: 481px) {
    .product__title {
      font-size: 24px; } }

.product__price-actions {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 16px;
  padding: 16px 0; }
  .product__price-actions > * {
    padding: 0; }

.product__price {
  color: #29ABE2;
  text-transform: uppercase;
  margin: 0; }
  @media only screen and (max-width: 481px) {
    .product__price {
      font-size: 24px; } }

.product__price, .product__rrp {
  display: inline-block; }

.image-enlarge {
  display: none; }
  @media only screen and (min-width: 481px) and (max-width: 1000px) {
    .image-enlarge {
      display: block; } }

.product__actions {
  margin-top: 4px; }
  .product__actions .button--primary {
    margin-bottom: 8px; }
  .product__actions form {
    margin: 0 0 0 16px;
    display: inline-block; }
    @media only screen and (max-width: 481px) {
      .product__actions form {
        margin-left: 0; } }

.product__details {
  padding-top: 16px;
  padding-bottom: 16px; }

.product__description {
  margin-bottom: 32px;
  margin-top: 16px; }
  .product__description p {
    margin-bottom: 16px; }
    @media only screen and (max-width: 1000px) {
      .product__description p {
        margin-bottom: 15.2px; } }
    @media only screen and (max-width: 481px) {
      .product__description p {
        margin-bottom: 14.4px; } }
    .product__description p:last-child {
      margin-bottom: 16px; }

.product__image img {
  width: 100%; }
@media only screen and (max-width: 481px) {
  .product__image {
    max-width: 40%;
    float: right;
    padding-left: 16px; } }

.google-maps {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden; }

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important; }

.results {
  margin-bottom: 16px; }
  @media only screen and (min-width: 1000px) and (max-width: 1100px) {
    .results {
      zoom: 1;
      margin-left: -8px;
      margin-right: -8px; }
      .results:after {
        content: '';
        display: table;
        clear: both; }
      .results > * {
        width: 20%; }
        .results > *:nth-child(5n+1) {
          clear: both; }
      .results > * {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 1px;
        float: left; } }
  @media only screen and (min-width: 1100px) {
    .results {
      zoom: 1;
      margin-left: -8px;
      margin-right: -8px; }
      .results:after {
        content: '';
        display: table;
        clear: both; }
      .results > * {
        width: 16.6666666667%; }
        .results > *:nth-child(6n+1) {
          clear: both; }
      .results > * {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 1px;
        float: left; } }
  @media only screen and (max-width: 1000px) {
    .results {
      zoom: 1;
      margin-left: -8px;
      margin-right: -8px; }
      .results:after {
        content: '';
        display: table;
        clear: both; }
      .results > * {
        width: 33.3333333333%; }
        .results > *:nth-child(3n+1) {
          clear: both; }
      .results > * {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 1px;
        float: left; } }
  @media only screen and (max-width: 481px) {
    .results > * {
      float: none;
      width: auto;
      zoom: 1; }
      .results > *:after {
        content: '';
        display: table;
        clear: both; } }
  @media only screen and (min-width: 1000px) {
    .results.results--half {
      zoom: 1;
      margin-left: -8px;
      margin-right: -8px; }
      .results.results--half:after {
        content: '';
        display: table;
        clear: both; }
      .results.results--half > * {
        width: 33.3333333333%; }
        .results.results--half > *:nth-child(3n+1) {
          clear: both; }
      .results.results--half > * {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 1px;
        float: left; } }

.results-with-sidebar {
  margin-bottom: 16px; }
  @media only screen and (min-width: 1000px) and (max-width: 1100px) {
    .results-with-sidebar {
      zoom: 1;
      margin-left: -8px;
      margin-right: -8px; }
      .results-with-sidebar:after {
        content: '';
        display: table;
        clear: both; }
      .results-with-sidebar > * {
        width: 25%; }
        .results-with-sidebar > *:nth-child(4n+1) {
          clear: both; }
      .results-with-sidebar > * {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 1px;
        float: left; } }
  @media only screen and (min-width: 1100px) {
    .results-with-sidebar {
      zoom: 1;
      margin-left: -8px;
      margin-right: -8px; }
      .results-with-sidebar:after {
        content: '';
        display: table;
        clear: both; }
      .results-with-sidebar > * {
        width: 20%; }
        .results-with-sidebar > *:nth-child(5n+1) {
          clear: both; }
      .results-with-sidebar > * {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 1px;
        float: left; } }
  @media only screen and (max-width: 1000px) {
    .results-with-sidebar {
      zoom: 1;
      margin-left: -8px;
      margin-right: -8px; }
      .results-with-sidebar:after {
        content: '';
        display: table;
        clear: both; }
      .results-with-sidebar > * {
        width: 33.3333333333%; }
        .results-with-sidebar > *:nth-child(3n+1) {
          clear: both; }
      .results-with-sidebar > * {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 1px;
        float: left; } }
  @media only screen and (max-width: 481px) {
    .results-with-sidebar > * {
      float: none;
      width: auto;
      zoom: 1; }
      .results-with-sidebar > *:after {
        content: '';
        display: table;
        clear: both; } }

.results__title {
  line-height: 1;
  color: #144284; }

.result {
  position: relative;
  margin-bottom: 8px; }
  .result .add-to-basket-form {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 4px; }

.result__title-author {
  margin: 0; }

.result__image {
  min-height: 160px; }
  @media only screen and (max-width: 481px) {
    .result__image {
      float: left;
      width: 30%; }
      .result__image img {
        max-width: 85%; } }
  .result__image img {
    box-shadow: 3px 3px 10px #9d9d9d;
    border: 1px solid white; }

.result__details {
  min-height: 100px; }
  @media only screen and (max-width: 481px) {
    .result__details {
      float: left;
      min-height: 0;
      width: 70%; } }

.result__actions {
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (min-width: 1000px) and (max-width: 1100px) {
    .result__actions {
      margin-bottom: 16px; } }
  @media only screen and (max-width: 481px) {
    .result__actions {
      min-height: inherit; } }
  .result__actions .button--disabled {
    margin-bottom: 5.3333333333px; }

.results-sorting {
  margin-bottom: 16px; }

/*------------------------------------*\

	SITE LOGO

	/ref/patterns.php#site-logo

/*------------------------------------*/
.site-logo {
  line-height: 1px;
  display: table; }
  .site-logo a {
    display: table-cell;
    vertical-align: bottom; }
  .site-logo img {
    margin-bottom: 16px;
    width: 60%;
    max-width: 300px; }
  @media only screen and (min-width: 481px) {
    .site-logo {
      padding: 16px; }
      .site-logo img {
        width: 100%;
        margin-bottom: 0; } }
  @media only screen and (min-width: 1000px) and (max-width: 1100px) {
    .site-logo {
      padding-top: 32px; } }
  @media only screen and (min-width: 1100px) {
    .site-logo {
      padding: 8px 0 0 0; }
      .site-logo img {
        max-width: 350px; } }

/*------------------------------------*\

	SITE SEARCH

	/ref/patterns.php#site-search

/*------------------------------------*/
@media only screen and (max-width: 481px) {
  .search-box-wrapper {
    padding: 8px; } }

.search-box {
  display: inline-block;
  vertical-align: baseline;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 8px;
  padding-right: 8px;
  color: #5E5F68;
  background: #ffffff;
  line-height: 16px;
  max-width: 100%;
  min-height: 35.2px;
  width: auto;
  font-family: inherit;
  border: 1px solid #e4e4e4;
  clear: both;
  display: inline-block;
  line-height: 32px;
  min-height: 32px;
  position: relative;
  padding-right: 32px;
  z-index: 0;
  width: 100%; }
  .search-box input[type="search"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    line-height: 32px;
    min-height: 32px; }
    .search-box input[type="search"]:focus {
      outline: 0; }

.search-box__submit {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  line-height: 16px;
  min-height: 16px;
  font-size: 14px;
  outline: none; }

.site-wrapper {
  background: white; }
  @media only screen and (min-width: 481px) {
    .site-wrapper {
      border: 1px solid #e4e4e4;
      border-radius: 10px;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); } }

.slideshow {
  list-style: none;
  padding: 0;
  margin: 0; }
  .slideshow li {
    margin: 0;
    height: 0;
    padding: 0;
    position: relative;
    width: 100%;
    padding-bottom: 36.28%;
    z-index: 0; }
    .slideshow li .bg {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0; }
  .slideshow .markdowns .markdown-list, .slideshow .markdowns .landing-list, .slideshow .landing .markdown-list, .slideshow .landing .landing-list {
    position: absolute;
    top: 13%;
    right: 5%;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1;
    text-align: right;
    text-align: end;
    width: 40%; }
    .slideshow .markdowns .markdown-list li, .slideshow .markdowns .landing-list li, .slideshow .landing .markdown-list li, .slideshow .landing .landing-list li {
      display: inline-block;
      width: 31%;
      margin-left: 1%; }
      .slideshow .markdowns .markdown-list li:first-child, .slideshow .markdowns .landing-list li:first-child, .slideshow .landing .markdown-list li:first-child, .slideshow .landing .landing-list li:first-child {
        margin-left: 0; }
      .slideshow .markdowns .markdown-list li img, .slideshow .markdowns .landing-list li img, .slideshow .landing .markdown-list li img, .slideshow .landing .landing-list li img {
        position: static;
        max-width: 100%;
        width: auto;
        height: auto; }
  .slideshow .markdowns .browse-button, .slideshow .landing .browse-button {
    position: absolute;
    right: 5%;
    bottom: 9%;
    height: 14%;
    width: 24%; }
  .slideshow .landing {
    background-color: #40B9EA;
    position: relative; }
    .slideshow .landing .landing-list {
      width: 66%;
      top: 15%; }
      .slideshow .landing .landing-list li a {
        display: block; }
        .slideshow .landing .landing-list li a img {
          max-height: 100%; }
  .slideshow .inventory ul {
    position: absolute;
    right: 0px;
    width: 50%;
    margin: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1; }
    .slideshow .inventory ul li {
      padding-top: 2px;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 20px;
      display: table;
      position: static;
      background-color: #C74400;
      color: white;
      border-radius: 500px 0 0 500px;
      margin-top: 4%;
      height: 15%;
      vertical-align: middle; }
      @media only screen and (max-width: 1000px) {
        .slideshow .inventory ul li {
          font-size: 14px;
          padding-left: 10px;
          margin-top: 2%; } }
  @media only screen and (max-width: 1000px) and (max-width: 1000px) {
    .slideshow .inventory ul li {
      font-size: 13.3px; } }
  @media only screen and (max-width: 1000px) and (max-width: 481px) {
    .slideshow .inventory ul li {
      font-size: 12.6px; } }

      @media only screen and (max-width: 481px) {
        .slideshow .inventory ul li {
          font-size: 12px;
          padding-left: 5px;
          margin-top: 1%; } }
  @media only screen and (max-width: 481px) and (max-width: 1000px) {
    .slideshow .inventory ul li {
      font-size: 11.4px; } }
  @media only screen and (max-width: 481px) and (max-width: 481px) {
    .slideshow .inventory ul li {
      font-size: 10.8px; } }

      .slideshow .inventory ul li span {
        display: table-cell;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden; }
      .slideshow .inventory ul li:first-child {
        margin-top: 9%; }
      .slideshow .inventory ul li a {
        color: white;
        font-weight: bold; }
      .slideshow .inventory ul li:nth-child(5) {
        margin-top: 100%; }

.spinner-container {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #144284;
  display: none;
  opacity: 0.9;
  z-index: 9000; }
  .spinner-container:after {
    position: fixed;
    bottom: 20%;
    left: 0px;
    font-size: 20px;
    content: "PROCESSING...";
    width: 100%;
    color: white;
    text-align: center; }
    @media only screen and (max-width: 1000px) {
      .spinner-container:after {
        font-size: 19px; } }
    @media only screen and (max-width: 481px) {
      .spinner-container:after {
        font-size: 18px; } }

.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 10px;
  margin: -5.5em auto auto -5.5em;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear, to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

.spinner:before {
  width: 50%;
  height: 50%;
  background: #FFF;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: ''; }

.spinner:after {
  background-color: #144284;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
.title--small {
  font-size: 20px; }
  @media only screen and (max-width: 1000px) {
    .title--small {
      font-size: 19px; } }
  @media only screen and (max-width: 481px) {
    .title--small {
      font-size: 18px; } }

.title--page {
  color: #144284; }

.title--splitter {
  background: url("/images/structure/line-repeater.gif") repeat-x center center;
  margin-bottom: 32px; }
  .title--splitter span {
    background: white;
    padding: 8px 16px 8px 0; }

/*------------------------------------*\

   	TABLES

	/ref/patterns.php#tables

/*------------------------------------*/
.table--striped td, .table--lined td, .table--striped th, .table--lined th {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: left; }
  .table--striped td a.padded-link, .table--lined td a.padded-link, .table--striped th a.padded-link, .table--lined th a.padded-link {
    display: block;
    margin-top: -8px;
    margin-bottom: -8px;
    margin-left: -16px;
    margin-right: -16px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px; }

.table--striped {
  border: 0;
  border-collapse: separate; }
  .table--striped tbody tr:first-child td, .table--striped tbody tr:first-child th {
    border-top: 1px solid #e4e4e4; }
  .table--striped tbody tr:last-child td, .table--striped tbody tr:last-child th {
    border-bottom: 1px solid #e4e4e4; }
  .table--striped tbody tr td:first-child, .table--striped tbody tr th:first-child {
    border-left: 1px solid #e4e4e4 !important; }
  .table--striped tbody tr td:last-child, .table--striped tbody tr th:last-child {
    border-right: 1px solid #e4e4e4; }

.table--striped, .table--lined {
  border: 0;
  border-collapse: separate; }
  .table--striped tbody tr td, .table--lined tbody tr td, .table--striped tbody tr th, .table--lined tbody tr th {
    border-bottom: 1px solid #e4e4e4; }
  .table--striped tbody tr:first-child td, .table--lined tbody tr:first-child td, .table--striped tbody tr:first-child th, .table--lined tbody tr:first-child th {
    border-top: 1px solid #e4e4e4; }

.table--striped tr {
  background-color: white; }
.table--striped tr:nth-of-type(odd) {
  background-color: #F6F6F6;
  /* Override this color in your theme stylesheet */ }
.table--striped th {
  font-weight: bold;
  font-family: "Din Text Pro Medium", sans-serif; }

.table--lined tbody tr td, .table--lined tbody tr th {
  border-color: rgba(228, 228, 228, 0.5); }
  .table--lined tbody tr td:first-child, .table--lined tbody tr th:first-child {
    padding-left: 0; }
  .table--lined tbody tr td:last-child, .table--lined tbody tr th:last-child {
    padding-right: 0; }
.table--lined tbody tr:first-child td, .table--lined tbody tr:first-child th {
  border-top: 0; }
.table--lined tbody tr:last-child td, .table--lined tbody tr:last-child th {
  border-bottom: 0; }
.table--lined th {
  font-weight: bold;
  font-family: "Din Text Pro Medium", sans-serif; }

table, .table {
  width: 100%; }
  table caption, table .table-caption, .table caption, .table .table-caption {
    color: #393A45;
    font-family: "Din Text Pro Regular", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center; }
    @media only screen and (max-width: 1000px) {
      table caption, table .table-caption, .table caption, .table .table-caption {
        font-size: 19px; } }
    @media only screen and (max-width: 481px) {
      table caption, table .table-caption, .table caption, .table .table-caption {
        font-size: 18px; } }
  @media only screen and (max-width: 481px) {
    table td.not-on-palm, table th.not-on-palm, .table td.not-on-palm, .table th.not-on-palm {
      display: none; } }
  @media only screen and (max-width: 1000px) {
    table td.not-on-lap, table th.not-on-lap, .table td.not-on-lap, .table th.not-on-lap {
      display: none; } }
  @media only screen and (max-width: 1000px) {
    table td.lose-1, table th.lose-1, .table td.lose-1, .table th.lose-1 {
      display: none; } }
  @media only screen and (max-width: 481px) {
    table td.lose-2, table th.lose-2, .table td.lose-2, .table th.lose-2 {
      display: none; } }
  table th, .table th {
    font-weight: 500; }

.cell--numeric {
  text-align: right; }

.details {
  margin-left: -8px; }
  .details td {
    width: 50%;
    padding: 4px 4px 4px 8px; }

.tabs-wrapper {
  overflow: hidden; }

.tabs {
  margin: 0 0 0 32px;
  padding: 0;
  display: inline-block;
  list-style: none; }
  .tabs > li {
    border: 1px solid #e4e4e4;
    border-bottom: none;
    display: block;
    float: left;
    position: relative;
    margin: 0 8px 0 0;
    text-transform: uppercase;
    font-weight: 500;
    font-family: "Din Text Pro Medium", sans-serif; }
    .tabs > li:hover {
      background-color: #ddf2fa; }
    .tabs > li.selected {
      border-color: #29abe2; }
      .tabs > li.selected:hover {
        background: white; }
      .tabs > li.selected a {
        color: #29abe2;
        box-shadow: inset 0 3px 0px #29abe2; }
      .tabs > li.selected:before, .tabs > li.selected:after {
        content: '';
        position: absolute;
        right: 100%;
        bottom: 0px;
        height: 1px;
        background-color: #29abe2;
        width: 1000px; }
      .tabs > li.selected:after {
        right: auto;
        left: 100%;
        width: 4000px; }
  .tabs a {
    padding: 16px;
    display: block;
    white-space: nowrap;
    color: #9d9d9d;
    text-decoration: none; }
    @media only screen and (min-width: 481px) and (max-width: 1000px) {
      .tabs a {
        padding: 16px 8px;
        font-size: 14px; } }
  @media only screen and (min-width: 481px) and (max-width: 1000px) and (max-width: 1000px) {
    .tabs a {
      font-size: 13.3px; } }
  @media only screen and (min-width: 481px) and (max-width: 1000px) and (max-width: 481px) {
    .tabs a {
      font-size: 12.6px; } }

    @media only screen and (max-width: 481px) {
      .tabs a {
        padding: 16px; }
        .tabs a span {
          display: none; }
        .tabs a .fa {
          font-size: 24px; } }
    @media only screen and (min-width: 481px) {
      .tabs a .fa {
        margin-right: 8px; } }
    .tabs a:hover {
      color: #29abe2;
      text-decoration: none; }

.tag, .tag--primary, .tag--contrast, .tag--secondary, .tag--count {
  text-transform: uppercase;
  color: white;
  border-radius: 5px;
  background-color: #9d9d9d;
  padding: 0 5.3333333333px;
  font-weight: bold;
  font-family: "Din Text Pro Medium", sans-serif;
  font-size: 14px;
  display: inline-block; }

.tag--primary {
  background-color: #144284;
  color: white; }
  .tag--primary a, .tag--primary a:visited {
    color: white; }

.tag--contrast {
  background-color: #29abe2;
  color: white; }
  .tag--contrast a, .tag--contrast a:visited {
    color: white; }

.tag--secondary {
  background-color: #f6931e;
  color: white; }
  .tag--secondary a, .tag--secondary a:visited {
    color: white; }
  .product .tag--secondary {
    float: right;
    margin: 16px; }

.tag--count {
  background-color: #c4302b;
  color: white;
  border-radius: 100%;
  min-width: 23px;
  text-align: center; }
  .tag--count a, .tag--count a:visited {
    color: white; }

/*------------------------------------*\

   	MEDIA ITEM

    Designed to although you to quickly place an image
    and body of text beside each other

	/ref/patterns.php#media-item

/*------------------------------------*/
.media-item {
  margin-bottom: 16px;
  display: block; }
  @media only screen and (max-width: 1000px) {
    .media-item {
      margin-bottom: 15.2px; } }
  @media only screen and (max-width: 481px) {
    .media-item {
      margin-bottom: 14.4px; } }
  .media-item:last-child {
    margin-bottom: 0; }

.media-item__image {
  margin-right: 16px;
  float: left; }
  .media-item__image img {
    width: auto; }

.media-item__body {
  overflow: hidden;
  margin-bottom: 0; }
  .media-item__body > :last-child {
    margin-bottom: 0; }

/*------------------------------------*\

   	OVERLAY

	/ref/patterns.php#overlay

/*------------------------------------*/
.overlay, .overlay-nav {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding-bottom: 70px;
  background: rgba(20, 66, 132, 0.95);
  display: none;
  overflow: auto;
  z-index: 8000; }
  .overlay-nav {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(20, 66, 132, 0.9);
    display: none;
    z-index: 8000; }
    .overlay-nav.show {
      display: block; }
    .overlay-nav__nav-head {
      padding-top: 16px;
      padding-right: 16px;
      padding-bottom: 16px;
      padding-left: 16px; }
      @media only screen and (max-width: 481px) {
        .overlay-nav__nav-head {
          padding-top: 27.2px;
          padding-right: 16px;
          padding-bottom: 8px;
          padding-left: 16px; }
          .overlay-nav__nav-head h1 {
            font-size: 28px; } }
      .overlay-nav__nav-head h1 {
        color: #f6931e;
        text-transform: uppercase; }
    .overlay-nav__nav-body {
      padding-right: 16px;
      padding-bottom: 70px;
      padding-left: 16px;
      overflow: auto; }
      .overlay-nav__nav-body ul {
        float: left;
        list-style: none;
        margin-left: 0;
        margin-right: 5%;
        width: 45%; }
        .overlay-nav__nav-body ul li {
          margin-bottom: 16px; }
          @media only screen and (max-width: 1000px) {
            .overlay-nav__nav-body ul li {
              margin-bottom: 15.2px; } }
          @media only screen and (max-width: 481px) {
            .overlay-nav__nav-body ul li {
              margin-bottom: 14.4px; } }
          .overlay-nav__nav-body ul li:last-child {
            margin-bottom: 0; }
          .overlay-nav__nav-body ul li a {
            color: white;
            text-transform: uppercase; }
          .overlay-nav__nav-body ul li.special {
            background-color: rgba(41, 171, 226, 0.1);
            margin-left: -8px;
            margin-right: -8px;
            padding-left: 8px;
            padding-right: 8px; }
            .overlay-nav__nav-body ul li.special a {
              color: #83ceee; }
          .overlay-nav__nav-body ul li ul {
            float: none;
            width: auto; }
            .overlay-nav__nav-body ul li ul li {
              margin-bottom: 2px; }
              @media only screen and (max-width: 1000px) {
                .overlay-nav__nav-body ul li ul li {
                  margin-bottom: 1.9px; } }
              @media only screen and (max-width: 481px) {
                .overlay-nav__nav-body ul li ul li {
                  margin-bottom: 1.8px; } }
              .overlay-nav__nav-body ul li ul li:last-child {
                margin-bottom: 0; }
              .overlay-nav__nav-body ul li ul li a {
                font-size: 14px;
                text-transform: none; }
      .overlay-nav__nav-body > ul > li > a {
        font-weight: bold;
        font-family: "Din Text Pro Medium", sans-serif; }
    .overlay-nav__nav-login {
      position: fixed;
      right: 0px;
      bottom: 0px;
      left: 0px;
      background-color: rgba(0, 0, 0, 0.5); }
      .overlay-nav__nav-login ul {
        padding-top: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
        list-style: none;
        margin: 0;
        text-transform: uppercase; }
        .overlay-nav__nav-login ul li {
          float: left;
          width: 50%; }
          .overlay-nav__nav-login ul li a {
            font-weight: bold;
            font-family: "Din Text Pro Medium", sans-serif;
            color: white; }
    .overlay-nav-close {
      position: fixed;
      top: 16px;
      right: 16px;
      color: white;
      cursor: pointer; }
  .overlay-exp-checkout {
    z-index: 9010; }
    @media only screen and (min-width: 1000px) {
      .overlay-exp-checkout {
        padding-top: 64px;
        padding-bottom: 64px; } }
    .overlay-exp-checkout .menu-icon {
      display: block; }
    .overlay-exp-checkout__body, .overlay-exp-checkout__header {
      color: #ffffff;
      margin-left: auto;
      margin-right: auto;
      max-width: 600px; }
    .overlay-exp-checkout__header {
      padding-top: 16px;
      padding-bottom: 16px; }
      .overlay-exp-checkout__header h1 {
        background-image: url("/images/icons/express-checkout-big.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: auto 60%;
        color: #29abe2;
        padding-left: 90px;
        text-transform: uppercase;
        white-space: nowrap; }
        .overlay-exp-checkout__header h1 span {
          color: white; }
        @media only screen and (max-width: 1000px) {
          .overlay-exp-checkout__header h1 {
            font-size: 24px;
            padding-left: 60px; } }
  @media only screen and (max-width: 1000px) and (max-width: 1000px) {
    .overlay-exp-checkout__header h1 {
      font-size: 22.8px; } }
  @media only screen and (max-width: 1000px) and (max-width: 481px) {
    .overlay-exp-checkout__header h1 {
      font-size: 21.6px; } }

    .overlay-exp-checkout__close, .overlay-exp-checkout__close:visited {
      color: white;
      float: right;
      font-size: 1.6em; }
    .overlay-exp-checkout__body h2 {
      font-size: 16px;
      color: #f6931e;
      font-weight: bold;
      margin: 0; }
      @media only screen and (max-width: 1000px) {
        .overlay-exp-checkout__body h2 {
          font-size: 15.2px; } }
      @media only screen and (max-width: 481px) {
        .overlay-exp-checkout__body h2 {
          font-size: 14.4px; } }
    @media only screen and (min-width: 1000px) {
      .overlay-exp-checkout__body table {
        font-size: 20px; } }
  @media only screen and (min-width: 1000px) and (max-width: 1000px) {
    .overlay-exp-checkout__body table {
      font-size: 19px; } }
  @media only screen and (min-width: 1000px) and (max-width: 481px) {
    .overlay-exp-checkout__body table {
      font-size: 18px; } }

    .overlay-exp-checkout__body table td:last-child {
      text-align: right; }
    .overlay-exp-checkout__body table tr.total td {
      color: #f6931e;
      font-weight: bold;
      text-align: right; }
    .overlay-exp-checkout__box {
      padding-top: 16px;
      padding-right: 16px;
      padding-bottom: 16px;
      padding-left: 16px; }
      .overlay-exp-checkout__box--b {
        padding-top: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
        background-color: rgba(0, 0, 0, 0.4); }
    .overlay-exp-checkout__button, .overlay-exp-checkout__button:visited {
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 32px;
      padding-right: 32px;
      font-size: 24px;
      background-color: #29abe2;
      border-radius: 5px;
      color: white;
      display: inline-block;
      margin-bottom: 16px; }
      @media only screen and (max-width: 1000px) {
        .overlay-exp-checkout__button, .overlay-exp-checkout__button:visited {
          font-size: 22.8px; } }
      @media only screen and (max-width: 481px) {
        .overlay-exp-checkout__button, .overlay-exp-checkout__button:visited {
          font-size: 21.6px; } }
      .overlay-exp-checkout__button:hover, .overlay-exp-checkout__button:visited:hover {
        background-color: white;
        color: #29abe2; }
      .overlay-exp-checkout__button:hover, .overlay-exp-checkout__button:focus, .overlay-exp-checkout__button:visited:hover, .overlay-exp-checkout__button:visited:focus {
        text-decoration: none; }

/* Utilities */
.u-padded {
  padding: 16px; }

.u-padded-ns {
  padding: 16px 0; }

.u-padded-extra {
  padding: 32px; }

.u-rounded {
  border-radius: 5px; }

.u-bordered {
  border: 1px solid #e4e4e4; }

.u-no-marg {
  margin: 0; }

.u-marg-bottom {
  margin-bottom: 16px; }
  @media only screen and (min-width: 1100px) {
    .u-marg-bottom {
      margin-bottom: 32px; } }

.u-marg-bottom-half {
  margin-bottom: 16px; }

.u-marg-top {
  margin-top: 16px; }

.u-marg-left {
  margin-left: 16px; }

.u-no-pad {
  padding: 0; }

.u-vertical-spacing {
  margin-bottom: 16px; }
  @media only screen and (max-width: 1000px) {
    .u-vertical-spacing {
      margin-bottom: 15.2px; } }
  @media only screen and (max-width: 481px) {
    .u-vertical-spacing {
      margin-bottom: 14.4px; } }
  .u-vertical-spacing:last-child {
    margin-bottom: 0; }

.u-clear {
  zoom: 1; }
  .u-clear:after {
    content: '';
    display: table;
    clear: both; }

.u-pull-right {
  float: right; }

.u-pull-left {
  float: left; }

.u-inline-block {
  display: inline-block; }

.u-well {
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); }

.u-raised {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); }

.u-lighten {
  color: #aaaaaa; }

.-disable-hover,
.-disable-hover * {
  pointer-events: none !important; }

.u-block {
  display: block; }

.u-small {
  font-size: 14px; }
  @media only screen and (max-width: 1000px) {
    .u-small {
      font-size: 13.3px; } }
  @media only screen and (max-width: 481px) {
    .u-small {
      font-size: 12.6px; } }

.u-medium {
  font-size: 16px; }
  @media only screen and (max-width: 1000px) {
    .u-medium {
      font-size: 15.2px; } }
  @media only screen and (max-width: 481px) {
    .u-medium {
      font-size: 14.4px; } }

.u-large {
  font-size: 20px; }
  @media only screen and (max-width: 1000px) {
    .u-large {
      font-size: 19px; } }
  @media only screen and (max-width: 481px) {
    .u-large {
      font-size: 18px; } }

.u-huge {
  font-size: 40px; }
  @media only screen and (max-width: 1000px) {
    .u-huge {
      font-size: 38px; } }
  @media only screen and (max-width: 481px) {
    .u-huge {
      font-size: 36px; } }

.u-upper {
  text-transform: uppercase; }

.u-bold {
  font-weight: bold;
  font-family: "Din Text Pro Medium", sans-serif; }

.u-center {
  text-align: center; }

.u-right {
  text-align: right; }

.u-right-desk {
  text-align: right; }
  @media only screen and (max-width: 1000px) {
    .u-right-desk {
      text-align: inherit; } }

.u-left {
  text-align: left; }

.u-height {
  line-height: 24px; }

.u-primary {
  color: #144284; }

.u-secondary {
  color: #f6931e; }

.u-tertiary {
  color: #29abe2; }

.u-faded {
  color: #aaaaaa; }

.u-warning {
  color: #c4302b; }

.u-bg-shade {
  background-color: rgba(157, 157, 157, 0.1); }

.u-bg-tertiary-light {
  background-color: rgba(41, 171, 226, 0.05); }

@media only screen and (max-width: 481px) {
  .u-hide-mobile {
    display: none !important; } }

@media only screen and (min-width: 481px) and (max-width: 1000px) {
  .u-hide-lap {
    display: none !important; } }

@media only screen and (min-width: 1000px) and (max-width: 1100px) {
  .u-hide-desk {
    display: none !important; } }

.u-image-width--full > img {
  width: 100%; }

.u-temp-height {
  min-height: 260px; }

/*# sourceMappingURL=screen.css.map */