/*
	This is the css file for the Default theme

	NOTES:
	- Kong currently doesn't compile sass files, this means a few things:
		- We have to save out default.css (or default.css.twig) into the assets folder for use in the theme
		- If you want to use Twig template variables sass will break so we have to workaround this with a hopefully temporary fix:
			
			/*KONGVAR color: #f7f7f7; *\/
			
			Write a comment prefixed with KONGVAR and output the var inside this comment, then use Grunt to move the declaration outside of the comment block
			Note: some style settings output the whole rule, such as font style, and font-family.
	- We want this theme to be as easy as possible to work with, this means as few build tools as possible (hopefully Grunt will not be a requirement soon).
		This also means it needs to be self contained - anything necessary to work on this theme has to be included in the theme folder.
*/
/* Reset */
/* Breakpoints */
/* Theme variables */
/* Utilities and Helpers */
/*

	Mixins

*/
/*

	Helper CSS classes

*/
.o-hidden {
  overflow: hidden;
}

.right {
  float: right;
}

.left {
  float: left;
}

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

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

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

.no-margin {
  margin: 0;
}

.no-padding {
  padding: 0;
}

.no-bullet {
  list-style: none;
  padding: 0;
}

.hide {
  display: none;
}

@font-face {
  font-family: 'Kong';
  font-weight: normal;
  font-style: normal;
  src: url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/kong.eot?cv6n2u');
  src: url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/kong.eot?#iefixcv6n2u') format('embedded-opentype'), url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/kong.woff?cv6n2u') format('woff'), url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/kong.ttf?cv6n2u') format('truetype'), url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/kong.svg?cv6n2u#kong') format('svg');
}
.kong-font {
  font-family: Kong;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -ms-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

/*
	
	Base Typography

*/
html, body {
  font-family: 'Alegreya Sans SC', sans-serif;;
}

body {
  -webkit-font-smoothing: antialiased;
  color: #ffffff;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 15px;
  font-style: normal;font-weight: normal;;
  letter-spacing: ;
  line-height: 1.9;
  font-variant: normal; text-transform: none;;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0 0 12px;
}

h1 {
  color: #f7f7f7;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 28px;
  font-style: normal;font-weight: normal;;
  letter-spacing: 0em;
  line-height: 1.4;
  font-variant: normal; text-transform: none;;
}

h2 {
  color: #ffffff;
  font-family: 'Droid Serif', serif;;
  font-size: 27px;
  font-style: normal;font-weight: normal;;
  letter-spacing: 0em;
  line-height: 1.4;
  font-variant: normal; text-transform: none;;
}

h3 {
  color: #f7f6f6;
  font-family: 'Droid Serif', serif;;
  font-size: 16px;
  font-style: normal;font-weight: normal;;
  letter-spacing: 0em;
  line-height: 1.4;
  font-variant: normal; text-transform: none;;
}

p {
  margin: 0 0 1em;
  padding: 0;
  color: #ffffff;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 15px;
  font-style: normal;font-weight: normal;;
  letter-spacing: ;
  line-height: 1.9;
  font-variant: normal; text-transform: none;;
}

a {
  text-decoration: none;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -ms-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  color: #f7cd11;
}
a:hover, a:active, a:focus {
  color: #0f05cb;
}

hr {
  background: 0;
  border-style: solid;
  border-width: 1px 0 0 0;
  clear: both;
  margin: 15px 0;
  border-color: #d6d6d6;
  border-top-width: 1px;
}

ul {
  margin-top: 0.5em;
}

/*

	Base form styling

*/
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: block;
  margin: 0 0 16px;
  outline: none;
  padding: 8px;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  -ms-transition: border-color 0.3s;
  -o-transition: border-color 0.3s;
  transition: border-color 0.3s;
  width: 100%;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 15px;
  background: #ffffff;
  border-color: #000000;
  color: #000000;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
  border-color: #d6d6d6;
}

button {
  font-family: 'Alegreya Sans SC', sans-serif;;
}

input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  height: 35px;
}

select {
  background-color: #ffffff;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
  background-position: 101% 50%;
  background-repeat: no-repeat;
  padding-right: 30px;
  background-size: 40px;
}
select::-ms-expand {
  display: none;
}

label {
  cursor: pointer;
  display: block;
  padding-bottom: 0.1em;
  color: #ffffff;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 15px;
  font-style: normal;font-weight: normal;;
  letter-spacing: ;
  line-height: 1.9;
  font-variant: normal; text-transform: none;;
}

.form__flash-error {
  background-color: #e30420;
  background-color: rgba(227, 4, 32, 0.5);
  padding: 0.5em;
}

.form__flash-success {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0.5em 0;
}

.form__error {
  color: #e30420;
  color: rgba(227, 4, 32, 0.8);
  font-weight: bold;
  margin-top: -1em;
  padding: 0.5em 0;
}

.form__field-note {
  display: block;
  font-size: 0.9em;
  position: relative;
  text-align: right;
  top: -0.5em;
  height: 1px;
}

.form-group--shaded {
  background: rgba(0, 0, 0, 0.03);
  margin: 1em 0;
  overflow: hidden;
  padding: 9px;
}
.form-group--shaded > input {
  float: left;
  margin-right: 1em;
}
.form-group--shaded > label {
  float: left;
  font-size: 0.9em;
  line-height: 1.5;
}

/*

	Base table styling

*/
table {
  border-collapse: collapse;
  margin-bottom: 25px;
  width: 100%;
}

thead {
  border-bottom: 1px solid #D6D6D6;
  border-top: 1px solid #D6D6D6;
  border-width: 1px 0;
}

tfoot {
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #D6D6D6;
  border-top: 1px solid #D6D6D6;
}

th,
td {
  padding: 2em 1em 2em 0;
  text-align: left;
}

td > * {
  display: inline-block;
  vertical-align: middle;
}

/* Base Styles */
/* Layout Styles */
.wrapper {
  margin: 0 auto;
  max-width: 1360px;
  padding: 0 20px;
  width: calc(100% - 40px);
  flex: 0 0 auto;
}

@media screen and (min-width: 1024px) {
  .wrapper {
    padding: 0 50px;
    width: calc(100% - 100px);
  }
}
/*
	
	A very simple 12 column grid grid that supports nesting

	.grid:
		- grid container
		- uses overflow hidden to clear itself - this may be a problem for some designs if you need to display overflow content
		- has negative margin-left at the same value of the gutter
	.grid__item:
		 - floats left
		 - uses boz-sizing: border box 
		 - uses percentage widths 
		 - columns flow onto new rows
		 - by default always 100% width on smallest screen 

	The grid can be used in two different ways:
		- You can define the number of columns each grid item should span on the column, or
		- You can define the number of columns each grid item should span on the container using l-grid-uniform
*/
.grid {
  margin-left: -20px;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.grid-uniform {
  list-style: none;
  margin-left: -20px;
  margin-top: 0;
  overflow: hidden;
  padding: 0;
}

.grid__item {
  float: left;
  margin-bottom: 20px;
  padding-left: 20px;
  position: relative;
  vertical-align: top;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-uniform--1-cols .grid__item:nth-child(1n + 1), .grid-uniform--2-cols .grid__item:nth-child(2n + 1), .grid-uniform--3-cols .grid__item:nth-child(3n + 1), .grid-uniform--4-cols .grid__item:nth-child(4n + 1), .grid-uniform--5-cols .grid__item:nth-child(5n + 1), .grid-uniform--6-cols .grid__item:nth-child(6n + 1), .grid-uniform--7-cols .grid__item:nth-child(7n + 1), .grid-uniform--8-cols .grid__item:nth-child(8n + 1), .grid-uniform--9-cols .grid__item:nth-child(9n + 1), .grid-uniform--10-cols .grid__item:nth-child(10n + 1), .grid-uniform--11-cols .grid__item:nth-child(11n + 1), .grid-uniform--12-cols .grid__item:nth-child(12n + 1) {
  clear: both;
}

.grid-uniform--1-cols > .grid__item {
  width: 100%;
}

.grid-uniform--2-cols > .grid__item {
  width: 50%;
}

.grid-uniform--3-cols > .grid__item {
  width: 33.33333%;
}

.grid-uniform--4-cols > .grid__item {
  width: 25%;
}

.grid-uniform--5-cols > .grid__item {
  width: 20%;
}

.grid-uniform--6-cols > .grid__item {
  width: 16.66667%;
}

.grid-uniform--7-cols > .grid__item {
  width: 14.28571%;
}

.grid-uniform--8-cols > .grid__item {
  width: 12.5%;
}

.grid-uniform--9-cols > .grid__item {
  width: 11.11111%;
}

.grid-uniform--10-cols > .grid__item {
  width: 10%;
}

.grid-uniform--11-cols > .grid__item {
  width: 9.09091%;
}

.grid-uniform--12-cols > .grid__item {
  width: 8.33333%;
}

@media screen and (min-width: 768px) {
  .grid-uniform--1-cols--medium > .grid__item {
    width: 100%;
  }

  .grid-uniform--2-cols--medium > .grid__item {
    width: 50%;
  }

  .grid-uniform--3-cols--medium > .grid__item {
    width: 33.33333%;
  }

  .grid-uniform--4-cols--medium > .grid__item {
    width: 25%;
  }

  .grid-uniform--5-cols--medium > .grid__item {
    width: 20%;
  }

  .grid-uniform--6-cols--medium > .grid__item {
    width: 16.66667%;
  }

  .grid-uniform--7-cols--medium > .grid__item {
    width: 14.28571%;
  }

  .grid-uniform--8-cols--medium > .grid__item {
    width: 12.5%;
  }

  .grid-uniform--9-cols--medium > .grid__item {
    width: 11.11111%;
  }

  .grid-uniform--10-cols--medium > .grid__item {
    width: 10%;
  }

  .grid-uniform--11-cols--medium > .grid__item {
    width: 9.09091%;
  }

  .grid-uniform--12-cols--medium > .grid__item {
    width: 8.33333%;
  }

  .grid-uniform--1-cols .grid__item:nth-child(1n + 1), .grid-uniform--2-cols .grid__item:nth-child(2n + 1), .grid-uniform--3-cols .grid__item:nth-child(3n + 1), .grid-uniform--4-cols .grid__item:nth-child(4n + 1), .grid-uniform--5-cols .grid__item:nth-child(5n + 1), .grid-uniform--6-cols .grid__item:nth-child(6n + 1), .grid-uniform--7-cols .grid__item:nth-child(7n + 1), .grid-uniform--8-cols .grid__item:nth-child(8n + 1), .grid-uniform--9-cols .grid__item:nth-child(9n + 1), .grid-uniform--10-cols .grid__item:nth-child(10n + 1), .grid-uniform--11-cols .grid__item:nth-child(11n + 1), .grid-uniform--12-cols .grid__item:nth-child(12n + 1) {
    clear: none;
  }

  .grid-uniform--1-cols--medium .grid__item:nth-child(1n + 1), .grid-uniform--2-cols--medium .grid__item:nth-child(2n + 1), .grid-uniform--3-cols--medium .grid__item:nth-child(3n + 1), .grid-uniform--4-cols--medium .grid__item:nth-child(4n + 1), .grid-uniform--5-cols--medium .grid__item:nth-child(5n + 1), .grid-uniform--6-cols--medium .grid__item:nth-child(6n + 1), .grid-uniform--7-cols--medium .grid__item:nth-child(7n + 1), .grid-uniform--8-cols--medium .grid__item:nth-child(8n + 1), .grid-uniform--9-cols--medium .grid__item:nth-child(9n + 1), .grid-uniform--10-cols--medium .grid__item:nth-child(10n + 1), .grid-uniform--11-cols--medium .grid__item:nth-child(11n + 1), .grid-uniform--12-cols--medium .grid__item:nth-child(12n + 1) {
    clear: both;
  }
}
@media screen and (min-width: 1024px) {
  .grid-uniform--1-cols--large > .grid__item {
    width: 100%;
  }

  .grid-uniform--2-cols--large > .grid__item {
    width: 50%;
  }

  .grid-uniform--3-cols--large > .grid__item {
    width: 33.33333%;
  }

  .grid-uniform--4-cols--large > .grid__item {
    width: 25%;
  }

  .grid-uniform--5-cols--large > .grid__item {
    width: 20%;
  }

  .grid-uniform--6-cols--large > .grid__item {
    width: 16.66667%;
  }

  .grid-uniform--7-cols--large > .grid__item {
    width: 14.28571%;
  }

  .grid-uniform--8-cols--large > .grid__item {
    width: 12.5%;
  }

  .grid-uniform--9-cols--large > .grid__item {
    width: 11.11111%;
  }

  .grid-uniform--10-cols--large > .grid__item {
    width: 10%;
  }

  .grid-uniform--11-cols--large > .grid__item {
    width: 9.09091%;
  }

  .grid-uniform--12-cols--large > .grid__item {
    width: 8.33333%;
  }

  .grid-uniform--1-cols--medium .grid__item:nth-child(1n + 1), .grid-uniform--2-cols--medium .grid__item:nth-child(2n + 1), .grid-uniform--3-cols--medium .grid__item:nth-child(3n + 1), .grid-uniform--4-cols--medium .grid__item:nth-child(4n + 1), .grid-uniform--5-cols--medium .grid__item:nth-child(5n + 1), .grid-uniform--6-cols--medium .grid__item:nth-child(6n + 1), .grid-uniform--7-cols--medium .grid__item:nth-child(7n + 1), .grid-uniform--8-cols--medium .grid__item:nth-child(8n + 1), .grid-uniform--9-cols--medium .grid__item:nth-child(9n + 1), .grid-uniform--10-cols--medium .grid__item:nth-child(10n + 1), .grid-uniform--11-cols--medium .grid__item:nth-child(11n + 1), .grid-uniform--12-cols--medium .grid__item:nth-child(12n + 1) {
    clear: none;
  }

  .grid-uniform--1-cols--large .grid__item:nth-child(1n + 1), .grid-uniform--2-cols--large .grid__item:nth-child(2n + 1), .grid-uniform--3-cols--large .grid__item:nth-child(3n + 1), .grid-uniform--4-cols--large .grid__item:nth-child(4n + 1), .grid-uniform--5-cols--large .grid__item:nth-child(5n + 1), .grid-uniform--6-cols--large .grid__item:nth-child(6n + 1), .grid-uniform--7-cols--large .grid__item:nth-child(7n + 1), .grid-uniform--8-cols--large .grid__item:nth-child(8n + 1), .grid-uniform--9-cols--large .grid__item:nth-child(9n + 1), .grid-uniform--10-cols--large .grid__item:nth-child(10n + 1), .grid-uniform--11-cols--large .grid__item:nth-child(11n + 1), .grid-uniform--12-cols--large .grid__item:nth-child(12n + 1) {
    clear: both;
  }
}
/* 

	Set width based on class name. Mainly used for the grid but also useful for form inputs and other things
	
	Based on a 12 column grid
*/
.width--1-col {
  width: 8.33333%;
}

.width--2-col {
  width: 16.66667%;
}

.width--3-col {
  width: 25%;
}

.width--4-col {
  width: 33.33333%;
}

.width--5-col {
  width: 41.66667%;
}

.width--6-col {
  width: 50%;
}

.width--7-col {
  width: 58.33333%;
}

.width--8-col {
  width: 66.66667%;
}

.width--9-col {
  width: 75%;
}

.width--10-col {
  width: 83.33333%;
}

.width--11-col {
  width: 91.66667%;
}

.width--12-col {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .width--1-col--medium {
    width: 8.33333%;
  }

  .width--2-col--medium {
    width: 16.66667%;
  }

  .width--3-col--medium {
    width: 25%;
  }

  .width--4-col--medium {
    width: 33.33333%;
  }

  .width--5-col--medium {
    width: 41.66667%;
  }

  .width--6-col--medium {
    width: 50%;
  }

  .width--7-col--medium {
    width: 58.33333%;
  }

  .width--8-col--medium {
    width: 66.66667%;
  }

  .width--9-col--medium {
    width: 75%;
  }

  .width--10-col--medium {
    width: 83.33333%;
  }

  .width--11-col--medium {
    width: 91.66667%;
  }

  .width--12-col--medium {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .width--1-col--large {
    width: 8.33333%;
  }

  .width--2-col--large {
    width: 16.66667%;
  }

  .width--3-col--large {
    width: 25%;
  }

  .width--4-col--large {
    width: 33.33333%;
  }

  .width--5-col--large {
    width: 41.66667%;
  }

  .width--6-col--large {
    width: 50%;
  }

  .width--7-col--large {
    width: 58.33333%;
  }

  .width--8-col--large {
    width: 66.66667%;
  }

  .width--9-col--large {
    width: 75%;
  }

  .width--10-col--large {
    width: 83.33333%;
  }

  .width--11-col--large {
    width: 91.66667%;
  }

  .width--12-col--large {
    width: 100%;
  }
}
/* 

	Set an offset based on class name. Mainly used for the grid but also useful for form inputs and other things
	
	Based on a 12 column grid
*/
.offset--1-col {
  margin-left: 8.33333%;
}

.offset--2-col {
  margin-left: 16.66667%;
}

.offset--3-col {
  margin-left: 25%;
}

.offset--4-col {
  margin-left: 33.33333%;
}

.offset--5-col {
  margin-left: 41.66667%;
}

.offset--6-col {
  margin-left: 50%;
}

.offset--7-col {
  margin-left: 58.33333%;
}

.offset--8-col {
  margin-left: 66.66667%;
}

.offset--9-col {
  margin-left: 75%;
}

.offset--10-col {
  margin-left: 83.33333%;
}

.offset--11-col {
  margin-left: 91.66667%;
}

.offset--12-col {
  margin-left: 100%;
}

@media screen and (min-width: 768px) {
  .offset--1-col--medium {
    margin-left: 8.33333%;
  }

  .offset--2-col--medium {
    margin-left: 16.66667%;
  }

  .offset--3-col--medium {
    margin-left: 25%;
  }

  .offset--4-col--medium {
    margin-left: 33.33333%;
  }

  .offset--5-col--medium {
    margin-left: 41.66667%;
  }

  .offset--6-col--medium {
    margin-left: 50%;
  }

  .offset--7-col--medium {
    margin-left: 58.33333%;
  }

  .offset--8-col--medium {
    margin-left: 66.66667%;
  }

  .offset--9-col--medium {
    margin-left: 75%;
  }

  .offset--10-col--medium {
    margin-left: 83.33333%;
  }

  .offset--11-col--medium {
    margin-left: 91.66667%;
  }

  .offset--12-col--medium {
    margin-left: 100%;
  }

  .offset--clear-medium {
    margin-left: 0;
  }
}
@media screen and (min-width: 1024px) {
  .offset--1-col--large {
    margin-left: 8.33333%;
  }

  .offset--2-col--large {
    margin-left: 16.66667%;
  }

  .offset--3-col--large {
    margin-left: 25%;
  }

  .offset--4-col--large {
    margin-left: 33.33333%;
  }

  .offset--5-col--large {
    margin-left: 41.66667%;
  }

  .offset--6-col--large {
    margin-left: 50%;
  }

  .offset--7-col--large {
    margin-left: 58.33333%;
  }

  .offset--8-col--large {
    margin-left: 66.66667%;
  }

  .offset--9-col--large {
    margin-left: 75%;
  }

  .offset--10-col--large {
    margin-left: 83.33333%;
  }

  .offset--11-col--large {
    margin-left: 91.66667%;
  }

  .offset--12-col--large {
    margin-left: 100%;
  }

  .offset--clear-large {
    margin-left: 0;
  }
}
/* 

	Pull an item to the left based on class name. Mainly used for the grid but also useful for form inputs and other things
	
	Based on a 12 column grid
*/
.pull--1-col {
  right: 8.33333%;
}

.pull--2-col {
  right: 16.66667%;
}

.pull--3-col {
  right: 25%;
}

.pull--4-col {
  right: 33.33333%;
}

.pull--5-col {
  right: 41.66667%;
}

.pull--6-col {
  right: 50%;
}

.pull--7-col {
  right: 58.33333%;
}

.pull--8-col {
  right: 66.66667%;
}

.pull--9-col {
  right: 75%;
}

.pull--10-col {
  right: 83.33333%;
}

.pull--11-col {
  right: 91.66667%;
}

.pull--12-col {
  right: 100%;
}

@media screen and (min-width: 768px) {
  .pull--1-col--medium {
    right: 8.33333%;
  }

  .pull--2-col--medium {
    right: 16.66667%;
  }

  .pull--3-col--medium {
    right: 25%;
  }

  .pull--4-col--medium {
    right: 33.33333%;
  }

  .pull--5-col--medium {
    right: 41.66667%;
  }

  .pull--6-col--medium {
    right: 50%;
  }

  .pull--7-col--medium {
    right: 58.33333%;
  }

  .pull--8-col--medium {
    right: 66.66667%;
  }

  .pull--9-col--medium {
    right: 75%;
  }

  .pull--10-col--medium {
    right: 83.33333%;
  }

  .pull--11-col--medium {
    right: 91.66667%;
  }

  .pull--12-col--medium {
    right: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .pull--1-col--large {
    right: 8.33333%;
  }

  .pull--2-col--large {
    right: 16.66667%;
  }

  .pull--3-col--large {
    right: 25%;
  }

  .pull--4-col--large {
    right: 33.33333%;
  }

  .pull--5-col--large {
    right: 41.66667%;
  }

  .pull--6-col--large {
    right: 50%;
  }

  .pull--7-col--large {
    right: 58.33333%;
  }

  .pull--8-col--large {
    right: 66.66667%;
  }

  .pull--9-col--large {
    right: 75%;
  }

  .pull--10-col--large {
    right: 83.33333%;
  }

  .pull--11-col--large {
    right: 91.66667%;
  }

  .pull--12-col--large {
    right: 100%;
  }
}
/* 

	Push an item to the right based on class name. Mainly used for the grid but also useful for form inputs and other things
	
	Based on a 12 column grid
*/
.push--1-col {
  left: 8.33333%;
}

.push--2-col {
  left: 16.66667%;
}

.push--3-col {
  left: 25%;
}

.push--4-col {
  left: 33.33333%;
}

.push--5-col {
  left: 41.66667%;
}

.push--6-col {
  left: 50%;
}

.push--7-col {
  left: 58.33333%;
}

.push--8-col {
  left: 66.66667%;
}

.push--9-col {
  left: 75%;
}

.push--10-col {
  left: 83.33333%;
}

.push--11-col {
  left: 91.66667%;
}

.push--12-col {
  left: 100%;
}

@media screen and (min-width: 768px) {
  .push--1-col--medium {
    left: 8.33333%;
  }

  .push--2-col--medium {
    left: 16.66667%;
  }

  .push--3-col--medium {
    left: 25%;
  }

  .push--4-col--medium {
    left: 33.33333%;
  }

  .push--5-col--medium {
    left: 41.66667%;
  }

  .push--6-col--medium {
    left: 50%;
  }

  .push--7-col--medium {
    left: 58.33333%;
  }

  .push--8-col--medium {
    left: 66.66667%;
  }

  .push--9-col--medium {
    left: 75%;
  }

  .push--10-col--medium {
    left: 83.33333%;
  }

  .push--11-col--medium {
    left: 91.66667%;
  }

  .push--12-col--medium {
    left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .push--1-col--large {
    left: 8.33333%;
  }

  .push--2-col--large {
    left: 16.66667%;
  }

  .push--3-col--large {
    left: 25%;
  }

  .push--4-col--large {
    left: 33.33333%;
  }

  .push--5-col--large {
    left: 41.66667%;
  }

  .push--6-col--large {
    left: 50%;
  }

  .push--7-col--large {
    left: 58.33333%;
  }

  .push--8-col--large {
    left: 66.66667%;
  }

  .push--9-col--large {
    left: 75%;
  }

  .push--10-col--large {
    left: 83.33333%;
  }

  .push--11-col--large {
    left: 91.66667%;
  }

  .push--12-col--large {
    left: 100%;
  }
}
/* Module Styles */
/*

	Icon fonts
	- Used for displaying icons from a custom font.
	- To keep the filesize as small as possible we have built a custom font from fontello.com
	- The icons included (and their respective names) are below, if you need to add any more recompile the font from fontello.com and update this file.
	- Uplaod fontconfig.json to fontello.com to quickly select all of the current icons
	pinterest
	facebook
	tumblr
	twitter
	lock
	caret-left
	caret-right
	trash
	google+
	instagram
	evelope

*/
@font-face {
  font-family: 'fontello';
  font-weight: normal;
  font-style: normal;
  src: url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/fontello.eot?cv6n2u');
  src: url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/fontello.eot?#iefixcv6n2u') format('embedded-opentype'), url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/fontello.woff?cv6n2u') format('woff'), url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/fontello.ttf?cv6n2u') format('truetype'), url('//origin.kong365.com/stores/1/themes/1/1/assets/fonts/fontello.svg?cv6n2u#kong') format('svg');
}
.icon {
  display: inline-block;
  font-size: 1.1em;
  height: 1.7em;
  margin-left: 0.5rem;
  overflow: hidden;
  padding-left: 1px;
  position: relative;
  text-align: center;
  width: 1.7em;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -ms-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.icon--social {
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
}
.icon--social:hover, .icon--social:focus, .icon--social:active {
  background: #0c00ff;
  color: #ffffff;
}
.icon--social:first-child {
  margin-left: 0;
}

.icon:before {
  display: inline-block;
  font-family: fontello;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7em;
}

.icon__hide-text {
  height: 0px;
  overflow: hidden;
  position: absolute;
  width: 0px;
}

.icon--footer {
  height: 1.5em;
  margin-left: 0;
  width: 1em;
}
.icon--footer:before {
  line-height: 1;
}

.icon--trash:before {
  content: '\e800';
}

.icon--pinterest:before {
  content: '\e801';
}

.icon--facebook:before {
  content: '\e802';
}

.icon--twitter:before {
  content: '\e803';
}

.icon--tumblr:before {
  content: '\e804';
}

.icon--lock:before {
  content: '\e805';
}

.icon--left-dir:before {
  content: '\e806';
}

.icon--right-dir:before {
  content: '\e807';
}

.icon--google-plus:before {
  content: '\e808';
}

.icon--instagram:before {
  content: '\e809';
}

.icon--mail-alt:before {
  content: '\e80a';
}

.icon--up-dir:before {
  content: '\e80b';
}

.icon--down-dir:before {
  content: '\e80c';
}

.icon--angle-left:before {
  content: '\e80d';
}

.icon--angle-right:before {
  content: '\e80e';
}

.icon--angle-up:before {
  content: '\e80f';
}

.icon--angle-down:before {
  content: '\e810';
}

.icon--ok-circled:before {
  content: '\e811';
}

.icon--basket:before {
  content: '\e812';
}

.icon--menu:before {
  content: '\e813';
}

/*
	
	Site header module styling

*/
.header {
  margin-bottom: -1.4em;
}

.header__utility {
  overflow: hidden;
  padding-top: 1.250em;
  padding-bottom: 0.2em;
}

.header__utility-links {
  float: right;
  font-size: 0.8em;
  list-style: none;
  margin: 0 -7px 0 0;
  margin-right: -7px;
  padding: 0;
}
.header__utility-links > li {
  border-right: 1px solid #d5d5d5;
  float: left;
  line-height: 1;
  padding: 0 7px;
}
.header__utility-links > li > a {
  display: inline-block;
  padding: 0 2px;
}
.header__utility-links > li:last-child {
  border-right: 0;
}

.header--with-accent .header__pull-mobile.offset--7-col {
  margin-left: 0;
}

.header__logo {
  display: inline-block;
  margin: 20px 0 0;
  padding: 0;
  text-align: center;
  color: #000000;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 18px;
  font-style: normal;font-weight: bold;;
  letter-spacing: 0em;
  line-height: 1;
  font-variant: normal; text-transform: uppercase;;
}
.header__logo > a {
  color: inherit;
  text-decoration: none;
  margin: 0 auto;
  background: #2a2626;
  padding-left: 20px;
  padding-right: 20px;
  display: block;
}
.header__logo.has-image {
  background: 0;
  padding: 0;
  display: block;
  margin: 20px auto 0 auto;
}
.header__logo.has-image a {
  position: relative;
  padding: 0;
  display: inline;
}
.header__logo.has-image a:before, .header__logo.has-image a:after {
  content: '';
  position: absolute;
  min-height: 300px;
  height: 100%;
  background: #2a2626;
  width: 0px;
}
.header__logo.has-image a:before {
  left: 0;
  margin-left: -0px;
}
.header__logo.has-image a:after {
  right: 0;
  margin-right: -0px;
}
.header__logo.has-image img {
  position: relative;
  height: auto;
  background: #2a2626;
  max-width: 100%;
}

.header__contact {
  display: inline-block;
  margin-bottom: 30px;
  line-height: 1.8;
  min-height: 20px;
}

.header__contact-empty {
  display: inline-block;
}

.header__basket {
  display: inline-block;
  vertical-align: middle;
}

.header__accent {
  display: none;
}

.header__basket-text {
  display: none;
}

.header__basket-icon {
  display: inline;
  margin-right: 3px;
}

.header__basket-count {
  display: none;
}

.header__pull-mobile {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .header {
    margin-bottom: 0;
    position: relative;
  }

  .header__pull-mobile {
    margin-bottom: 20px;
  }

  .header__vertical-align {
    height: 100%;
    margin: 0;
    vertical-align: middle;
    width: 100%;
  }
  .header__vertical-align > div {
    display: inline-block;
    float: none;
    height: 100%;
    margin-bottom: 0;
    padding-left: 0;
    vertical-align: middle;
  }

  .header__logo {
    margin-bottom: 20px;
  }
  .header__logo.has-image {
    margin: 20px auto;
  }

  .header__accent {
    display: block;
    left: 0;
    margin: 0;
    padding: 0;
    top: 50%;
    position: absolute;
    width: 100%;
    z-index: -1;
    margin-top: -0.5px;
  }

  .header--with-accent .header__basket {
    background: #2a2626;
  }
  .header--with-accent .header__contact {
    background: #2a2626;
    padding-right: 20px;
    margin-bottom: 0;
    line-height: normal;
  }
  .header--with-accent .header__basket {
    padding-left: 20px;
  }

  .header__basket-text {
    display: inline;
  }

  .header__basket-icon {
    display: none !important;
  }

  .header__basket-count {
    display: inline;
  }
}
@media screen and (max-width: 1024px) {
  .header__logo {
    display: block;
    text-align: center;
  }
  .header__logo > a {
    display: inline-block;
  }
}
.footer {
  border-top: 1px solid #fff;
  clear: both;
  color: #706F6F;
  margin: 0;
  max-width: 1366px;
  padding: 20px 20px 0 20px;
  width: calc(100% - 40px);
  border-color: #d6d6d6;
  border-top-width: 1px;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__links > li {
  font-size: 14px;
  margin-bottom: 1em;
  margin-right: 0.75em;
}
.footer__links > li a {
  color: #ffffff;
}
.footer__links > li a:hover {
  color: #0c00ff;
}
.footer__links > li .kong-font {
  color: #3c3c3b;
}

.footer__link--social {
  display: inline-block;
}

@media screen and (min-width: 1024px) {
  .footer {
    border-top: 0;
    padding: 0 50px;
    width: calc(100% - 100px);
  }

  .footer__links {
    overflow: hidden;
  }
  .footer__links > li {
    float: left;
    line-height: 1;
    margin-right: 20px;
    vertical-align: bottom;
  }
  .footer__links > li.active > a {
    color: #0c00ff;
  }
  .footer__links .kong-font {
    font-size: 11px;
  }

  .footer__links--right {
    float: right;
  }
  .footer__links--right > li {
    border-right: #d5d5d5 solid 1px;
    margin-right: 10px;
    padding-right: 10px;
    border-color: #d6d6d6;
  }
  .footer__links--right > li:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
  }
  .footer__links--right > li .icon--footer {
    height: 1em;
  }

  .footer--checkout {
    text-align: center;
  }
  .footer--checkout .footer__links > li {
    display: inline-block;
    float: none;
  }

  .footer__link--social {
    display: block;
  }
}
@media screen and (min-width: 1224px) {
  .footer {
    margin-left: auto;
    margin-right: auto;
  }
}
.navigation {
  margin-bottom: 20px;
  overflow: hidden;
}

.navigation__toggle-label {
  cursor: pointer;
  display: block;
  float: left;
  font-weight: bold;
  padding-right: 23px;
  position: relative;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  color: #ffffff;
  font-size: 24px;
  font-style: normal;font-weight: normal;;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-variant: small-caps; text-transform: none;;
}
.navigation__toggle-label:after {
  content: '\e813';
  display: inline-block;
  font-family: fontello;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  color: #ffffff;
}
.navigation__toggle-label:active {
  color: #ff0000;
}
.navigation__toggle-label:active:after {
  color: #ff0000;
}

#navigation__toggle {
  display: none;
}
#navigation__toggle:checked + .navigation__list {
  display: block;
}

.navigation__list {
  clear: left;
  font-size: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
.navigation__list > li {
  display: block;
}
.navigation__list > li a, .navigation__list > li span.no__link {
  display: block;
  padding: 0 0 10px 0;
  width: 100%;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
  color: #ffffff;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 24px;
  font-style: normal;font-weight: normal;;
  letter-spacing: 0em;
  line-height: 1.5;
  font-variant: small-caps; text-transform: none;;
}
.navigation__list > li a:hover, .navigation__list > li span.no__link:hover {
  color: #ff0000;
}
.navigation__list > li a.no__link:hover, .navigation__list > li span.no__link.no__link:hover {
  color: #ffffff;
}
.navigation__list > li.is-active > a, .navigation__list > li.has-active-child > a {
  color: #ff0000;
}

.navigation__sub-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1em;
}
.navigation__sub-list li span.sub__no-link {
  padding: 0 0 10px 0;
  display: inline-block;
  color: #ffffff;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 24px;
  font-style: normal;font-weight: normal;;
  letter-spacing: 0em;
  line-height: 1.5;
  font-variant: small-caps; text-transform: none;;
}
.navigation__sub-list li.is-active > a {
  color: #ff0000;
}

.navigation__list a:hover + .navigation__sub-list, .navigation__sub-list:hover {
  display: block;
}

.navigation__list .no__link:hover + .navigation__sub-list, .navigation__sub-list:hover {
  display: block;
}

@media screen and (min-width: 768px) {
  .navigation {
    overflow: visible;
    padding-bottom: 15px;
  }

  .navigation__toggle-label {
    float: right;
  }

  .navigation__toggle-label,
  #navigation__toggle {
    display: none;
  }

  .navigation__list {
    display: block;
    position: relative;
    text-align: center;
    z-index: 99;
  }
  .navigation__list > li {
    display: inline-block;
    position: relative;
  }
  .navigation__list > li > a, .navigation__list > li span.no__link {
    display: block;
    padding: 0 1em 10px 1em;
    width: auto;
  }

  .navigation__sub-list {
    padding: 0 2em;
    position: absolute;
    text-align: left;
    white-space: nowrap;
    z-index: 1;
    background: #2a2626;
  }
}
@media screen and (max-width: 768px) {
  .navigation__toggle-label.expand {
    color: #ff0000;
  }
  .navigation__toggle-label.expand:after {
    color: #ff0000;
  }

  #navigation__toggle:checked + .navigation__list {
    max-height: 2000px;
    transition: max-height 1s ease-in;
    border-bottom-style: solid;
  }

  .navigation__list {
    display: block;
    transition: max-height 0.5s ease-out;
    border-bottom-width: 1px;
    border-color: #d6d6d6;
  }
}
@media screen and (max-width: 767px) {
  .navigation__list {
    max-height: 0;
  }
}
.tile-item__image {
  display: block;
  height: auto;
  width: 100%;
}
.tile-item__image.fit {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.grid__item.fit {
  height: 270px;
}

.tile-item__text-container {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  height: 100%;
  left: 20px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  visibility: hidden;
  -moz-transition: opacity 0.5s ease-out;
  -webkit-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
.tile-item:hover .tile-item__text-container, .tile-item:active .tile-item__text-container, .tile-item:focus .tile-item__text-container {
  opacity: 1;
  visibility: visible;
}
.tile-item__text-container h3,
.tile-item__text-container p {
  color: #fff;
  padding-left: 1em;
  padding-right: 1em;
}

.tile-item__link {
  color: #fff;
  display: none;
  height: 100%;
  overflow: hidden;
  position: absolute;
  text-indent: 110%;
  top: 0;
  white-space: nowrap;
  width: 100%;
  /*
      This gives mobile (or other touch device) users a chance to read the text before being taken to the page the item is linked to
      The 'double click' behaviour on iOS when a link's :hover changes a display property doesn't appear to be respected in Chrome for Android, unfortunately
  */
}
.tile-item:hover .tile-item__link, .tile-item:active .tile-item__link, .tile-item:focus .tile-item__link {
  display: block;
}
.touch .tile-item__link {
  height: auto;
  left: 50%;
  margin: 3.5em auto 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  text-indent: 0;
  top: 50%;
  width: 100px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.tile-item__text {
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.tile-item__text p {
  margin-bottom: 0;
}

.product .form__error {
  margin-top: -0.5em;
}

.product__title {
  margin: 0;
  color: #ffffff;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 26px;
  font-style: normal;font-weight: bold;;
  letter-spacing: 0em;
  line-height: 1.2;
  font-variant: small-caps; text-transform: none;;
}

.product__price {
  color: #ffffff;
  font-family: 'Source Sans Pro', sans-serif;;
  font-size: 26px;
  font-style: normal;font-weight: bold;;
  line-height: 1.4;
}

.product__previous-price {
  font-size: 13px;
  padding-left: 20px;
}

.product__description {
  margin: 35px 0 25px 0;
}
.product__description table tr th, .product__description table tr td {
  padding: 0.5em;
  vertical-align: top;
}

.product__image-container {
  background: none;
  overflow: hidden;
}
.product__image-container.is-zoomed .product__image {
  visibility: hidden;
}

.product__image {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
}

.product__image-zoom-text {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: none;
  font-size: 11px;
  line-height: 30px;
  padding: 0 10px;
  position: absolute;
  bottom: 0;
  width: calc(100% - 20px);
}

.breadcrumbs {
  font-size: 0.8em;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0 0 20px;
}
.breadcrumbs > li {
  float: left;
  margin-right: 10px;
}
.breadcrumbs > li:after {
  content: '\e80e';
  display: inline-block;
  font-family: fontello;
  margin-left: 10px;
  vertical-align: middle;
  color: #d6d6d6;
}
.breadcrumbs > li:last-child:after {
  display: none;
}
.breadcrumbs a,
.breadcrumbs span {
  display: inline-block;
  vertical-align: middle;
}

.breadcrumbs--checkout {
  margin-top: 20px;
  padding-bottom: 0;
}
.breadcrumbs--checkout > .breadcrumbs__current {
  font-weight: bold;
  color: #f7cd11;
}

/*

Module button styling

*/
.button {
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  display: block;
  line-height: 2.4;
  margin-bottom: 0.5em;
  outline: none;
  padding: 0 10px;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #fcfcfc;
  color: #0c0c0c;
  font-family: 'Alegreya Sans SC', sans-serif;;
  font-size: 15px;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  -ms-transition: background-color 0.3s, border-color 0.3s;
  -o-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.button:hover {
  background-color: #0a00cc;
  border-color: #0a00cc;
}
.button:hover, .button:focus, .button:active {
  background-color: #f3a406;
  color: #0c0c0c;
}
.button[disabled], .button.disabled {
  cursor: default;
  background-color: #aba4a4;
  color: #0c0c0c;
}
.button > i {
  height: auto;
  vertical-align: middle;
}

.button--secondary {
  background-color: #000000;
  color: #ffffff;
}
.button--secondary:hover, .button--secondary:focus, .button--secondary:active {
  background-color: #2a2a2a;
  color: #ffffff;
}
.button--secondary[disabled], .button--secondary.disabled {
  background-color: #aba4a4;
  color: #ffffff;
}

.button--full {
  width: 100%;
}

.products-table {
  margin-top: 25px;
}
.products-table tbody tr {
  border-top: 1px solid #D6D6D6;
  display: block;
  padding-top: 25px;
  position: relative;
}
.products-table tbody td {
  display: block;
  padding: 0 0 1em;
}
.products-table tbody td > * {
  vertical-align: middle;
}
.products-table tbody td select {
  margin: 0;
}
.products-table tbody td select.country__control + p.form__error {
  margin-top: 0;
}
.products-table tbody td .product-thumb__image {
  width: 80px;
  min-height: 50px;
  text-align: center;
  margin-right: 1.250em;
}
.products-table tbody td .product-table__title {
  width: calc(100% - 120px);
}
.products-table tbody .products-table__update-row {
  margin: 0;
  padding: 0;
}
.products-table tbody .products-table__update-row td {
  box-sizing: border-box;
  padding: 0;
}
.products-table tfoot {
  display: block;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  left: -2%;
  width: 104%;
}
.products-table tfoot tr {
  float: left;
  width: 100%;
}
.products-table tfoot tr:last-child {
  font-size: 1.2em;
}
.products-table tfoot td {
  box-sizing: border-box;
  float: left;
  padding: 0.75em;
  width: 50%;
}
.products-table tfoot td[colspan] {
  display: none;
}
.products-table tfoot td:last-child {
  text-align: right;
}
.products-table img {
  float: left;
  height: auto;
  max-width: 100%;
}

.products-table__product-info {
  overflow: hidden;
  padding-right: 2em;
}

.products-table__delete {
  background: 0;
  border: 0;
  cursor: pointer;
  margin: 10px 0 0 0;
  padding: 0;
  -webkit-transition: colorm 0.2s;
  -moz-transition: colorm 0.2s;
  -ms-transition: colorm 0.2s;
  -o-transition: colorm 0.2s;
  transition: colorm 0.2s;
  font-size: 12px;
  outline: none;
  color: #f7cd11;
  border-bottom: 1px solid #f7cd11;
}
.products-table__delete:hover, .products-table__delete:active, .products-table__delete:focus {
  background: 0;
  color: #0f05cb;
  border-bottom: 1px solid #0f05cb;
}

.products-table__btn {
  width: 100%;
  font-size: 13px;
}
.products-table__btn .icon {
  font-size: 1em;
}
.products-table__btn.cs__btn {
  width: calc(100% - 20px);
}
.products-table__btn.img {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  text-indent: -9999px;
}
.products-table__btn.img.paypalexpress {
  height: 32px;
  width: 170px;
}

.products-table__update {
  background: 0;
  border: 0;
  cursor: pointer;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  display: block;
  outline: none;
  -webkit-transition: colorm 0.2s;
  -moz-transition: colorm 0.2s;
  -ms-transition: colorm 0.2s;
  -o-transition: colorm 0.2s;
  transition: colorm 0.2s;
  color: #f7cd11;
  font-family: 'Droid Serif', serif;;
  font-style: normal;font-weight: normal;;
  letter-spacing: 0em;
  font-variant: normal; text-transform: none;;
  border-bottom: 1px solid #f7cd11;
  font-size: 12px;
  font-weight: normal;
}
.products-table__update:hover, .products-table__update:active, .products-table__update:focus {
  background: 0;
  color: #0f05cb;
  border-bottom: 1px solid #0f05cb;
}

.cart__discount, .cart__note {
  overflow: auto;
  margin-bottom: 25px;
  width: 100%;
  display: none;
}
.cart__discount input[type=text], .cart__note input[type=text] {
  margin-bottom: 0;
}
.cart__discount textarea, .cart__note textarea {
  margin-bottom: 0;
  width: 100%;
  min-height: 100px;
}
.cart__discount .button, .cart__note .button {
  font-size: 13px;
  margin-bottom: 0;
  float: right;
  margin-top: 20px;
}
.cart__discount.__open, .cart__note.__open {
  display: block;
}
.cart__discount.__open .form__error, .cart__note.__open .form__error {
  margin: 0;
}

.note__added, .code__added {
  display: block;
}

@media screen and (min-width: 768px) {
  .products-table thead {
    display: table-header-group;
  }
  .products-table thead.hide {
    border-bottom: none;
  }
  .products-table thead.hide tr th {
    display: none;
  }
  .products-table thead tr th {
    padding: 1em 1em 1em 0;
  }
  .products-table thead tr th:first-child {
    padding: 1em;
  }
  .products-table tfoot tr td {
    padding: 1em 1em 1em 0;
  }
  .products-table tbody tr {
    border-top: 0;
    display: table-row;
    margin-top: 0;
    padding-top: 0;
    position: static;
  }
  .products-table tbody td {
    display: table-cell;
    padding: 1em 1em 1em 0;
  }
  .products-table tbody td[data-label]:before {
    display: none;
  }
  .products-table tbody td > * {
    vertical-align: top;
  }
  .products-table tbody .products-table__update-row td {
    padding: 0;
    text-align: left;
  }
  .products-table tfoot {
    display: table-footer-group;
    margin-top: 0;
  }
  .products-table tfoot tr,
  .products-table tfoot td {
    float: none;
    width: auto;
  }
  .products-table tfoot tr {
    display: table-row;
  }
  .products-table tfoot td[colspan] {
    display: table-cell;
  }
  .products-table tfoot td {
    padding-left: 0;
    padding-right: 0;
  }
  .products-table tfoot td:last-child {
    text-align: left;
  }
  .products-table img {
    float: none;
  }

  .products-table__delete {
    margin-right: 0;
    margin-top: 10px;
    padding: 0;
    position: relative;
    right: auto;
    text-align: left;
    display: block;
  }

  .products-table__update {
    margin-top: 0.5em;
  }
}
@media screen and (min-width: 768px) {
  .products-table tbody tr:first-child td {
    padding-top: 3em;
  }
  .products-table tbody tr:first-child.single__row td {
    padding-top: 1em;
    vertical-align: top;
  }
  .products-table tbody tr:first-child.single__row td label {
    line-height: 34px;
  }
  .products-table tbody tr th:last-child, .products-table tfoot tr th:last-child, .products-table thead tr th:last-child {
    text-align: right;
  }
  .products-table tbody tr th:first-child, .products-table tfoot tr th:first-child, .products-table thead tr th:first-child {
    width: 65%;
  }
  .products-table tbody tr td .show-for-small, .products-table tfoot tr td .show-for-small, .products-table thead tr td .show-for-small {
    display: none;
  }
  .products-table tbody tr td .show-for-large, .products-table tfoot tr td .show-for-large, .products-table thead tr td .show-for-large {
    display: inline-block;
  }
  .products-table tbody tr td:last-child, .products-table tfoot tr td:last-child, .products-table thead tr td:last-child {
    text-align: right;
  }
  .products-table tbody tr td:first-child, .products-table tfoot tr td:first-child, .products-table thead tr td:first-child {
    width: 65%;
  }

  .products-table__btn {
    margin-right: 1em;
    max-width: 52%;
  }
  .products-table__btn.cs__btn {
    width: 48%;
  }
  .products-table__btn.img {
    margin-right: 1em;
    width: auto;
  }
}
@media screen and (min-width: 1024px) {
  .products-table tbody tr th:last-child, .products-table tfoot tr th:last-child, .products-table thead tr th:last-child {
    text-align: right;
  }
  .products-table tbody tr th:first-child, .products-table tfoot tr th:first-child, .products-table thead tr th:first-child {
    width: 65%;
  }
  .products-table tbody tr td .product-table__title, .products-table tfoot tr td .product-table__title, .products-table thead tr td .product-table__title {
    min-height: 75px;
  }
  .products-table tbody tr td:last-child, .products-table tfoot tr td:last-child, .products-table thead tr td:last-child {
    text-align: right;
  }
  .products-table tbody tr td:first-child, .products-table tfoot tr td:first-child, .products-table thead tr td:first-child {
    width: 65%;
  }
}
@media screen and (max-width: 767px) {
  .products-table thead {
    display: none;
  }
  .products-table thead tr th {
    display: none;
  }
  .products-table tbody tr td.text-right-medium.delivery__single-option {
    display: none;
  }
  .products-table tbody tr td.text-right-medium.delivery__single-option + td {
    text-align: right;
    display: inline-block;
    width: calc(100% - 95px);
  }
  .products-table tbody tr td.text-right-medium.delivery__single-option + td + td {
    text-align: right;
    font-weight: bold;
    display: inline-block;
    width: 90px;
  }
  .products-table tbody tr td .show-for-small {
    display: inline-block;
  }
  .products-table tbody tr td .show-for-large {
    display: none;
  }
  .products-table tbody tr.selected__delivery {
    padding-top: 1em;
  }
  .products-table tbody tr.delivery-option__first {
    padding-top: 1em;
  }
  .products-table tbody tr.delivery-option__one {
    padding-top: 1em;
  }
  .products-table tfoot tr td:first-child {
    display: none;
    padding-right: 1em;
  }
  .products-table .quantity__control-wrap {
    width: calc(100% - 105px);
    margin-left: 100px;
    display: inline-block;
    margin-top: -5px;
    position: relative;
    z-index: 2;
  }
  .products-table .sub__total-amount {
    display: inline-block;
    text-align: right;
    width: 100%;
    font-weight: bold;
    margin-top: -50px;
  }

  .products-table__update {
    margin-top: 1.3em;
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .confirm-details > div {
    display: inline-block;
    width: 22%;
  }
}
@media screen and (min-width: 768px) {
  .products-table tbody tr td.text-right-medium {
    text-align: right;
  }
  .products-table tbody tr.delivery-option__first td {
    padding-bottom: 2em;
  }
}
.quantity {
  display: inline-block;
  font-size: 0.8em;
  line-height: 34px;
  min-width: 81px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.quantity .quantity__value {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border-width: 1px 0 1px 0;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  border-color: #D6D6D6;
  width: 40px;
  height: 34px;
  font-size: 1.2em;
  color: #ffffff;
}
.quantity .quantity__value::-webkit-outer-spin-button, .quantity .quantity__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__control {
  border: 1px solid;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  float: left;
  text-align: center;
  border-color: #D6D6D6;
  width: 34px;
  height: 34px;
  font-size: 1.4em;
}
.quantity__control:active {
  border-color: #D6D6D6;
  border-color: #d6d6d6;
}
.quantity__control.disable span {
  line-height: 1;
  opacity: 0.2;
}

.stock__level span {
  display: block;
  padding: 0.5em 0;
}

.carousel {
  margin-bottom: 20px;
  position: relative;
}

.carousel__item-el {
  display: block;
  position: relative;
}

.carousel__item__wrapper {
  display: block;
}
.carousel__item__wrapper > img {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel__item__details {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  visibility: hidden;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out;
}
.carousel__item__details > h3 {
  color: #fff;
  margin-top: -0.5em;
  position: relative;
  top: 50%;
}
.carousel__item__details.no__caption {
  background-color: transparent;
}

.carousel__pagination {
  opacity: 0;
  visibility: hidden;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out;
}

.carousel__btn {
  border: 0;
  color: #000000;
  cursor: pointer;
  height: 40px;
  width: 40px;
  margin: 0;
  opacity: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  outline: none;
  background-color: #ffffff;
  border-radius: 64px;
}
.carousel__btn:before {
  font-size: 33px;
  line-height: 1;
  top: 0;
  position: relative;
}

.carousel__btn--prev {
  left: 20px;
}
.carousel__btn--prev:before {
  left: -2px;
}

.carousel__btn--next {
  right: 20px;
}
.carousel__btn--next:before {
  left: 3px;
}

.carousel:hover .carousel__pagination,
.carousel:focus .carousel__pagination,
.carousel:active .carousel__pagination {
  opacity: 1;
  visibility: visible;
}
.carousel:hover .carousel__item__details,
.carousel:focus .carousel__item__details,
.carousel:active .carousel__item__details {
  opacity: 1;
  visibility: visible;
}
.carousel:hover .carousel__item-link,
.carousel:focus .carousel__item-link,
.carousel:active .carousel__item-link {
  display: block;
}

.carousel__item-link {
  height: 100%;
  display: none;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-indent: 110%;
  top: 0;
  white-space: nowrap;
  width: 100%;
  /* 
  	This gives mobile (or other touch device) users a chance to read the text before being taken to the page the item is linked to
      The 'double click' behaviour on iOS when a link's :hover changes a display property doesn't appear to be respected in Chrome for Android, unfortunately
  */
}
.touch .carousel__item-link {
  color: #fff;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  text-align: center;
  text-decoration: underline;
  text-indent: 0;
  top: 50%;
  width: 100px;
}

.carousel__thumbs {
  margin-bottom: -20px;
  margin-top: 20px;
}
.carousel__thumbs > li {
  cursor: pointer;
}
.carousel__thumbs img {
  height: auto;
  max-width: 100%;
}

.page-banner {
  margin-bottom: 25px;
}
.page-banner > img {
  height: auto;
  max-width: 100%;
}

.pagination {
  display: inline-block;
  list-style: none;
  margin: 1em 0;
  overflow: hidden;
  padding: 0;
}
.pagination > li {
  display: inline-block;
  margin-bottom: 0.3em;
}
.pagination > li > a,
.pagination > li > span {
  padding: 0 0.5em;
}

.delivery-table {
  background: rgba(0, 0, 0, 0.1);
  border: solid;
  border-width: 1px 0;
  margin-bottom: 15px;
  padding: 15px;
  border-color: #d6d6d6;
}
.delivery-table table {
  margin-bottom: 0;
}
.delivery-table label tr td,
.delivery-table table tr td {
  padding: 9px 0 12px;
  font-weight: bold;
}
.delivery-table label tr td:last-child,
.delivery-table table tr td:last-child {
  text-align: right;
}
.delivery-table label.full__width,
.delivery-table table.full__width {
  width: 100%;
}
.delivery-table .grid__item {
  margin: 0;
}

.delivery-table__total {
  font-size: 1.15em;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .delivery-table > .grid > div {
    margin-bottom: 0;
  }
  .delivery-table table {
    width: 53%;
  }
}
@media screen and (min-width: 1024px) {
  .delivery-table__footer-options {
    padding-left: 40%;
    position: relative;
  }
  .delivery-table__footer-options > label {
    box-sizing: border-box;
    left: 0;
    padding-right: 15px;
    position: absolute;
    width: 40%;
  }

  .delivery-table table {
    width: 53%;
  }
}
.v-divider:before {
  content: '';
  border-left: solid;
  box-sizing: border-box;
  display: none;
  margin-left: 10px;
  position: absolute;
  height: 100%;
  width: 1px;
  border-color: #d6d6d6;
  border-left-width: 1px;
}

.v-divider--login:before {
  left: -25%;
}

.v-divider--delivery-table:before {
  left: -12%;
}

@media screen and (min-width: 1024px) {
  .v-divider:before {
    display: block;
  }
}
.confirm-details h4 > .icon {
  position: absolute;
  margin-left: 0;
  margin-top: -0.2em;
  color: #000000;
}

.confirm-details__change-link {
  text-decoration: underline;
}

.confirm-details__payment {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.ssl__seal {
  margin-top: 10px;
}

body {
  margin: 0;
  padding: 0;
  background: #2a2626;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

img {
  max-width: 100%;
}

a img {
  border: 0;
}

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