/**
 * @license     
 * MyFonts Webfont Build ID 3269729, 2016-08-17T11:40:11-0400  
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 *   
 * Webfont: Linotte-Regular by JCFonts
 * URL: http://www.myfonts.com/fonts/jcfonts/linotte/regular/
 * 
 * Webfont: Linotte-Bold by JCFonts
 * URL: http://www.myfonts.com/fonts/jcfonts/linotte/bold/
 * 
 * Webfont: Linotte-SemiBold by JCFonts
 * URL: http://www.myfonts.com/fonts/jcfonts/linotte/semi-bold/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3269729
 * Licensed pageviews: 100,000
 * Webfonts copyright: Copyright 2014 by Joel Carrouche. All rights reserved.
 * 
 * © 2016 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("https://hello.myfonts.net/count/31e461");
@font-face {
	font-family: 'Linotte-Regular';
	src: url('/fonts/31E461_0_0.eot');
	src: url('/fonts/31E461_0_0.eot?#iefix') format('embedded-opentype'),url('/fonts/31E461_0_0.woff2') format('woff2'),url('/fonts/31E461_0_0.woff') format('woff'),url('/fonts/31E461_0_0.ttf') format('truetype');
}

@font-face {
	font-family: 'Linotte-Bold';src: url('/fonts/31E461_2_0.eot');
	src: url('/fonts/31E461_2_0.eot?#iefix') format('embedded-opentype'),url('/fonts/31E461_2_0.woff2') format('woff2'),url('/fonts/31E461_2_0.woff') format('woff'),url('/fonts/31E461_2_0.ttf') format('truetype');
	}

@font-face {
	font-family: 'Linotte-SemiBold';src: url('/fonts/31E461_4_0.eot');
	src: url('/fonts/31E461_4_0.eot?#iefix') format('embedded-opentype'),url('/fonts/31E461_4_0.woff2') format('woff2'),url('/fonts/31E461_4_0.woff') format('woff'),url('/fonts/31E461_4_0.ttf') format('truetype');
	}
/*! jQuery UI - v1.13.2 - 2022-07-14
* http://jqueryui.com - etail image path updated
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
	pointer-events: none;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	-ms-filter: "alpha(opacity=25)"; /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: pointer;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	-ms-filter: "alpha(opacity=70)"; /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	-ms-filter: "alpha(opacity=35)"; /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	-ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777777_256x240.png");
}

/* positioning */
/* Three classes needed to override `.ui-button:hover .ui-icon` */
.ui-icon-blank.ui-icon-blank.ui-icon-blank {
	background-image: none;
}
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .003;
	-ms-filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 swiffy 2023
	Filename : swiffy.css
	Last Updated : 04. 04. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

------------------------------------------------------------------------------------- */

:root{
	/* client color scheme */
	--dark-blue:#001689;
	--red:#e30613;
	--pink:#c85096;
	--yellow:#ffdd00;
	--orange:#ec6608;
	--light-blue:#00a7e7;
	--light-blue-alpha:rgb(0 167 231 / 10%);
	--blue:#0069b4;
	--green:#3aaa35;
	--light-green:#95c11f;
}

.swiffy-slider  {
	position: relative;
	display: block;
	width: 100%;
	--swiffy-slider-snap-align: center;
	--swiffy-slider-item-width: 100%;
	--swiffy-slider-item-gap: 1rem;
	--swiffy-slider-item-reveal: 0rem;
	--swiffy-slider-item-ratio: 1/1;
	--swiffy-slider-item-count: 1;
	--swiffy-slider-nav: var(--dark-blue);
	--swiffy-slider-nav-zoom: 1;
	--swiffy-slider-track-opacity: 0.1;
	--swiffy-slider-track-height: 0;
	--swiffy-slider-nav-outside-size: 3.5rem;
	--swiffy-slider-indicator-outside-size: 1.5rem;
	--swiffy-slider-animation-duration: .75s;
	--swiffy-slider-animation-delay: 0s;
	--swiffy-slider-animation-timing: ease-in-out;


	
	--swiffy-slider-item-color:var(--grey);
	--swiffy-slider-active-item-color:var(--dark-blue);
}

.swiffy-slider,
.swiffy-slider::after,
.swiffy-slider::before {
	box-sizing: border-box
}

.swiffy-slider ::-webkit-scrollbar {
	height: var(--swiffy-slider-track-height)
}

.swiffy-slider ::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, var(--swiffy-slider-track-opacity))
}

.swiffy-slider ::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .4);
	border-radius: 1rem
}

.swiffy-slider ::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, .6)
}

.slider-container {
	--swiffy-slider-item-gap-totalwidth: calc(var(--swiffy-slider-item-gap) * (var(--swiffy-slider-item-count) - 1));
	--swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count));
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	display: grid;
	align-items: center;
	height: 100%;
	grid: auto/auto-flow -webkit-max-content;
	grid: auto/auto-flow max-content;
	grid-auto-rows: 100%;
	grid-auto-columns: var(--swiffy-slider-item-width);
	grid-auto-flow: column;
	grid-gap: var(--swiffy-slider-item-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	scrollbar-width: none;
	scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, var(--swiffy-slider-track-opacity));
	background-clip: padding-box
}

.slider-container>* {
	scroll-snap-align: var(--swiffy-slider-snap-align);
	position: relative;
	width: 100%;
	height: 100%
}

.slider-item-helper .slider-container>* {
	background-size: cover;
	background-color: #e1e1e1;
	background-position: 50% 50%;
	display: flex;
	justify-content: center;
	align-items: center
}

.slider-item-helper:not(.slider-item-ratio) .slider-container>* {
	min-height: 20rem
}

.slider-item-ratio .slider-container>*>*{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.slider-item-ratio-contain .slider-container>*>*{
	-o-object-fit: contain;
	object-fit: contain
}

.slider-item-ratio .slider-container>::after{
	display: block;
	padding-top: calc(100% / var(--swiffy-slider-item-ratio) );
	content: ""
}


.slider-indicators {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 1rem 0;
	list-style: none
}

.slider-nav-scrollbar .slider-indicators {
	margin-bottom: calc(1rem + var(--swiffy-slider-track-height))
}

.slider-indicators>.active {
	opacity: 1;
	background-color: var(--swiffy-slider-active-item-color);
}


.slider-indicators>* {
	box-sizing: content-box;
	flex: 0 1 auto;
	width: 2rem;
	height: .2rem;
	padding: 0;
	border: .4rem solid transparent;
	cursor: pointer;
	background-color: var(--swiffy-slider-item-color);
	background-clip: padding-box;
	opacity: .5;
	transition: opacity .4s ease;
	
	width: 10px;
	height:10px;
	border: .4rem solid transparent;
	border-radius: 50%

	
}

.slider-nav {
	position: absolute;
	top: 0;
	left: 0.5rem;
	bottom: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	/* visibility: hidden; */
	opacity: .8;
	transition: visibility .1s, opacity .2s linear;
	margin-bottom: var(--swiffy-slider-track-height);
	display: flex;
	align-items: center;
	padding: 0 .5rem;
	-webkit-filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
	filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
	transform: scale(var(--swiffy-slider-nav-zoom));
	/* overflow:hidden; */
}

.slider-nav::before {
	position: absolute;
	content: "";
	/* padding: .5rem 0; */
	width: 3rem;
	height: 3rem;
	pointer-events:all;
	background-color:var(--white);
}

.slider-nav::after {
	content: "";
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: var(--swiffy-slider-nav);
	background-origin: content-box;
	width: 3rem;
	height: 3rem
}

.slider-nav-arrow .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>")
}

.slider-nav-chevron .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>")
}

.slider-nav-caret .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>")
}

.slider-nav-caretfill .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>")
}

.swiffy-slider:hover .slider-nav {
	visibility: visible
}

.swiffy-slider.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next) {
	visibility: hidden
}

.swiffy-slider.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next {
	visibility: hidden
}

.slider-nav-outside .slider-container {
	margin: 0 var(--swiffy-slider-nav-outside-size)
}

.slider-nav-outside .slider-nav {
	padding: 0
}

.swiffy-slider .slider-nav:hover {
	opacity: 1
}

.slider-nav-square .slider-nav {
	padding: 0
}


.slider-nav-round .slider-nav::before {
	border-radius: 50%
}

.slider-nav-round .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E");
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E")
}

.slider-nav-dark .slider-nav::after {
	background-color: var(--swiffy-slider-nav-dark)
}

.slider-nav-sm {
	--swiffy-slider-nav-zoom: .75;
	--swiffy-slider-nav-outside-size: 2.5rem
}

.slider-nav.slider-nav-next::after {
	transform: rotate(180deg)
}

.slider-nav.slider-nav-next {
	right: .5rem;
	left: unset
}

.slider-nav-visible .slider-nav {
	visibility: visible
}

.slider-nav-dark .slider-nav {
	opacity: .6
}

.slider-nav-mousedrag .slider-container {
	cursor: -webkit-grab;
	cursor: grab
}

.slider-nav-mousedrag.dragging .slider-container {
	-ms-scroll-snap-type: unset;
	scroll-snap-type: unset;
	scroll-behavior: unset;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.slider-nav-mousedrag.dragging .slider-nav {
	visibility: hidden
}

@media (hover:hover) {
	.slider-nav-mousedrag .slider-container::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%
	}
}

@media (prefers-reduced-motion:no-preference) {
	.slider-nav-animation.slider-nav-animation-fast {
		--swiffy-slider-animation-duration: .25s
	}
	.slider-nav-animation.slider-nav-animation-slow {
		--swiffy-slider-animation-duration: 1.25s
	}
	.slider-nav-animation .slider-container>*>* {
		transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);
		transition-delay: var(--swiffy-slider-animation-delay)
	}
	.slider-nav-animation .slider-container .slide-visible>* {
		transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);
		transition-delay: var(--swiffy-slider-animation-delay)
	}
	.slider-nav-animation.slider-nav-animation-fadein .slider-container>*>* {
		opacity: .5
	}
	.slider-nav-animation.slider-nav-animation-scale .slider-container>*>* {
		transform: scale(.9)
	}
	.slider-nav-animation.slider-nav-animation-appear .slider-container>*>* {
		opacity: .3;
		transform: scale(.9)
	}
	.slider-nav-animation.slider-nav-animation-scaleup .slider-container>*>* {
		transform: scale(.25)
	}
	.slider-nav-animation.slider-nav-animation-zoomout .slider-container>* {
		overflow: hidden
	}
	.slider-nav-animation.slider-nav-animation-zoomout .slider-container>*>* {
		transform: scale(1.3)
	}
	.slider-nav-animation.slider-nav-animation-turn .slider-container>*>* {
		transform: rotateY(70deg)
	}
	.slider-nav-animation.slider-nav-animation-slideup .slider-container>*>* {
		transform: translateY(60%) scale(.99)
	}
	.slider-nav-animation.slider-nav-animation-slideup .slider-container {
		overflow-y: hidden
	}
	.slider-nav-animation .slider-container>.slide-visible>* {
		opacity: 1;
		transform: none
	}
}

@media (min-width:62rem) {
	.slider-item-show2:not(.slider-item-snapstart) .slider-container>*,
	.slider-item-show4:not(.slider-item-snapstart) .slider-container>*,
	.slider-item-show6:not(.slider-item-snapstart) .slider-container>* {
		scroll-snap-align: unset
	}
	.slider-item-show2:not(.slider-item-snapstart) .slider-container>::before,
	.slider-item-show4:not(.slider-item-snapstart) .slider-container>::before,
	.slider-item-show6:not(.slider-item-snapstart) .slider-container>::before {
		content: " ";
		display: block;
		position: absolute;
		left: calc((var(--swiffy-slider-item-gap)/2)*-1);
		top: 0;
		width: 1px;
		height: 1px;
		scroll-snap-align: var(--swiffy-slider-snap-align)
	}
	.slider-nav-outside-expand .slider-nav {
		margin-left: -4rem
	}
	.slider-nav-outside-expand .slider-nav.slider-nav-next {
		margin-right: -4rem
	}
	.slider-nav-sm.slider-nav-outside-expand .slider-nav {
		margin-left: -3.5rem
	}
	.slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next {
		margin-right: -3.5rem
	}
	.slider-indicators-sm.slider-indicators {
		display: none
	}
}

@media (max-width:62rem) {
	.swiffy-slider {
		--swiffy-slider-track-height: 0rem;
		--swiffy-slider-item-reveal: 0rem;
		--swiffy-slider-item-count: 1;
		--swiffy-slider-nav-zoom: .875
	}
	.swiffy-slider .slider-item-show2-sm {
		--swiffy-slider-item-count: 2
	}
	.slider-item-reveal {
		--swiffy-slider-item-reveal: 4rem
	}
	.slider-item-snapstart.slider-item-reveal {
		--swiffy-slider-item-reveal: 2rem
	}
	.slider-item-show6 .slider-container {
		grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3))
	}
	.slider-item-show6.slider-item-reveal .slider-container {
		grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3) - .5rem)
	}
	.slider-item-show6.slider-item-reveal .slider-container>* {
		scroll-snap-align: unset
	}
	.slider-item-show6.slider-item-reveal .slider-container>::before {
		content: " ";
		display: block;
		position: absolute;
		left: calc((var(--swiffy-slider-item-gap)/2)*-1);
		top: 0;
		width: 1px;
		height: 1px;
		scroll-snap-align: center
	}
	.slider-nav::after,
	.slider-nav::before {
		width: 2rem;
		height: 2rem;
		padding: .3rem
	}
	.slider-nav-round .slider-nav::after,
	.slider-nav-square .slider-nav::after {
		width: 1.75rem;
		height: 1.75rem;
		margin: .125rem
	}
	.slider-nav-outside .slider-container,
	.slider-nav-outside-expand .slider-container {
		margin: 0 2rem
	}
	.slider-nav-outside-expand .slider-container {
		margin: 0 var(--swiffy-slider-nav-outside-size)
	}
	.slider-nav-outside-expand .slider-nav {
		padding: 0
	}
	.slider-indicators-round .slider-indicators>*,
	.slider-indicators-round.slider-indicators>*,
	.slider-indicators-square .slider-indicators>*,
	.slider-indicators-square.slider-indicators>* {
		width: .3rem;
		height: .3rem
	}
	.slider-indicators {
		/* margin-bottom: .5rem; */
		/* display: none; */
	}
	.slider-nav-scrollbar .slider-indicators {
		margin-bottom: 0
	}
	.slider-indicators>* {
		/* width: 1rem; */
		/* height: .125rem; */
		/* border-width: .25rem; */
	}
	.slider-indicators-sm .slider-indicators,
	.slider-indicators-sm.slider-indicators {
		display: flex
	}
}

@media (max-width:48rem) {
	.slider-item-show6 .slider-container {
		grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/ 2))
	}
	.slider-item-show6.slider-item-reveal .slider-container {
		grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/ 2) - 1.5rem)
	}
}

@media (hover:none) {
	.swiffy-slider.slider-nav-touch .slider-nav {
		visibility: visible
	}
	.swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container,
	.swiffy-slider:not(.slider-nav-touch).slider-nav-outside-expand .slider-container {
		margin: 0 0
	}
	.slider-item-nosnap-touch {
		--swiffy-slider-snap-align: unset
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 Orchard 2023
	Filename : sitepanes.css
	Last Updated : 03. 11. 2025
	Copyright :(c) 2024 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

	Table of Contents
		=Definitions
		=Reset
		=Normalise

		=Page 
		=Typography 	
		=Grid Layout
		=SiteContainers		
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		=Breadcrumb
		=Swiffy Slider
		=Blog

		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Deptsingle  		** not in right place **
		=Subdepartment tree ** not in right place ** 
		=FeaturedProducts 
		=ProductPage 
		=Super Attributes
		=Basket *** needs work ***
		=Checkout Process **** needs works ***
		=MyAccount
			NEW my account menu
		=ConfirmationPage
		=Sitemap  
		=Client Specific Stylings 
		



/* -------------------------------------------------------------------------------------
=Header 
------------------------------------------------------------------------------------- */

/* Subheader
------------------------------------------------------- */
		

/* -------------------------------------------------------------------------------------	
=Definitions
------------------------------------------------------------------------------------- */
:root{

	/*standard colors */
	--error-color: #B51E1E;
	--warn-color: rgb(230 167 27);
	--info-color: #5eb20a;
	--help-color: #2879ff;

	--grey:#c4c4c4;
	--black: #272727;
	--white: #fff;
	--off-white: #f6f6f6;
	
	/* client color scheme */
	--dark-blue:#001689;
	--red:#e30613;
	--pink:#c85096;
	--yellow:#ffdd00;
	--orange:#ec6608;
	--light-blue:#00a7e7;
	--light-blue-alpha:rgb(0 167 231 / 10%);
	--blue:#0069b4;
	--green:#3aaa35;
	--teal:#a0c9cb;
	--blueyBlue:#92bce5;
	--light-green:#95c11f;

	--highlight-color:var(--red);
	--highlight-text-color:var(--white);
	
	--site-max-width: 1400px;
	--menu-max-width: calc(100vw - 2rem);
	--left-panel-width: calc(var(--site-max-width) / 5);
	--right-panel-width: calc(var(--site-max-width) / 5);
	--line-height: 1.5;
	--letter-spacing: .2rem;
	--outline-width: 3px;
	--spacing: 1rem;
	--half-spacing: .5rem;
	--typography-spacing-vertical: .5rem;
	--block-spacing-vertical: calc(var(--spacing) * 2);
	--block-spacing-horizontal: var(--spacing);
	--form-element-spacing-vertical: 0.5rem;
	--form-element-spacing-horizontal: .725rem;
	--nav-element-spacing-vertical: 1rem;
	--nav-element-spacing-horizontal: 0.5rem;
	--nav-link-spacing-vertical: 0.5rem;
	--nav-link-spacing-horizontal: 0.5rem;
	--form-label-font-weight: var(--text-font-weight);
	
	/* fonts */
	--text-font: 'Linotte-Regular', sans-serif;
	--text-font-weight: 400;
	
	--heading-font: 'Linotte-Bold', sans-serif;
	--heading-font-weight: 400;
	
	--sub-heading-font: 'Linotte-SemiBold', sans-serif;
	--sub-heading-font-weight: 400;

	--button-font: 'Linotte-Bold', sans-serif;;
	--button-font-weight: 400;

	--navbar-dropdown-text:'Linotte-Bold', sans-serif;

	--navbar-heading-font:'Linotte-Bold', sans-serif;
	--navbar-heading-font-size:1.25em;
	
	--font-awesome: "Font Awesome 6 Pro";
	--font-size: 16px;
	
	/* grid info */
	--grid-spacing-vertical: var(--spacing);
	--grid-spacing-horizontal: var(--spacing);
	
	/* shadows */
	--box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
	--transition: 0.5s ease-in-out;
	
	/*Section colors */
	--background-color: var(--white);
	
	--top-bar-color: var(--red);
	--top-bar-text-color: var(--white);
	--top-bar-link-color: var(--white);
	--top-panel-color: var(--red);
	
	--center-panel-color: var(--white);
	--main-panel-color: var(--white);
	
	--footer-panel-color: var(--white);
	--footer-panel-alt-color: var(--white);
	
	--bottom-panel-color: var(--dark-blue);
	--bottom-panel-heading-color: var(--white);
	--bottom-panel-text-color: var(--white);
	
	--bottom-bar-color: var(--light-blue);
	--bottom-bar-text-color: var(--white);
	
	
	--panel-color: var(--white);
	--dropdown-color: var(--white);
	--popout-color: var(--white);
	--form-color: var(--white);
	
	/*nav colors */
	--navbar-color: var(--red);
	--navbar-heading-color: var(--white);
	--navbar-heading-weight: var(--heading-font-weight);
	--navbar-link-color: var(--white);
	--nav-text-color: var(--white);


	
	--navbar-active-color: var(--white);
	--navbar-active-text-color: var(--red);
	
	--navbar-hover-color: var(--off-white);
	--navbar-hover-text-color: var(--black);
	
	--navbar-dropdown-width: 240px;
	--navbar-dropdown-item-height: 40px;
	--navbar-dropdown-color: var(--off-white);
	--navbar-dropdown-text-color: var(--dark-blue);
	--navbar-dropdown-text-size: .875rem;
	
	--navbar-sidebar-color: var(--off-white);
	--navbar-sidebar-text-color: var(--grey);
	--navbar-sidebar-hover-color: var(--off-white);
	--navbar-popout-color: var(--white);
	
	/*Buttons */

	--button-color: var(--yellow);
	--button-text-color: var(--dark-blue);
	--button-border-color: var(--yellow);
	--button-hover-text-color: var(--white);
	--button-hover-color: var(--green);
	--button-hover-border-color: var(--green);
	
	--alt-button-color: var(--grey);
	--alt-button-text-color: var(--grey);
	--alt-button-border-color: var(--grey);
	--alt-button-hover-text-color: var(--grey);
	--alt-button-hover-color: var(--grey);
	--alt-button-hover-border-color: var(--grey);
	
	--checkout-button: var(--green);
	--checkout-button-text: var(--white);
	
	--info-button: var(--info-color);
	--info-button-text: var(--white);
	--icon-color: var(--error-color);
	
	/*Borders */
	--border-color: var(--light-blue);
	--border-alt-color: var(--orange);
	--border-color-light: #dde7ea;
	--border-radius: .5em;
	--border-width: 1px;
	
	/*Text */
	--color: var(--black);
	--text-color: var(--dark-blue);
	--text-color-light: var(--grey);
	--text-heading-color: var(--grey);
	--text-sub-heading-color: var(--grey);
	--text-link-color: var(--orange);
	--text-link-color-hover: var(--orange);
	--text-link-color-focus: transparent;
	
	/* featured product element fprd*/
	--fprd-color: var(--off-white);
	--fprd-title-font: var(--sub-heading-font);
	--fprd-title-font-weight: var(--font-weight);
	--fprd-title-color: var(--orange);
	/*sets height of fprd title element for consistency - need to figure a way of this being calculated in a way that matches the desired # of lines*/
	--fprd-title-height: 4.7rem;
}

/* -------------------------------------------------------------------------------------
=Reset 
------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}


/* To enable HTML5 elements in IE */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display: block;
}

input, select, textarea {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
	outline-offset: 0px;
}

/* -------------------------------------------------------------------------------------
=Normalise v8.0.1 | MIT License | github.com/necolas/normalize.css 
------------------------------------------------------------------------------------- */
html {
	line-height: var(--line-height);
	-webkit-text-size-adjust: 100%;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

hr.spc{
	grid-column:1/-1;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b, strong {
	font-weight: var(--heading-font-weight);
}

code, kbd, samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}

.imgcont {}

.imgcont img {
	display: block;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button, input {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--grey);
	opacity: 1;
	/* Firefox */
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: var(--grey);
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	color: var(--grey);
}



/* -------------------------------------------------------------------------------------
=Page 
------------------------------------------------------------------------------------- */
html {
	-webkit-font-smoothing: antialiased
}

body {
	background-color: var(--background-color);
	font-family: var(--text-font);
	-webkit-font-smoothing: antialiased;
	/* Looks pretty much the same than Windows */
	color: var(--text-color);
	font-size: 16px;
}

ol {
	margin-left: .5em;
}

/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */

p {
	overflow-wrap: break-word;
}

b, strong {
	font-weight: 700;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

a, [role=link] {
	--background-color: transparent;
	outline: none;
	background-color: var(--background-color);
	color: inherit;
	-webkit-text-decoration: var(--text-decoration);
	text-decoration: var(--text-decoration);
	transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
	transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
	transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}

a:is([aria-current], :hover, :active, :focus),[role=link]:is([aria-current], :hover, :active, :focus) {
	--color: var(--text-link-color-hover);
	--text-decoration: underline;
}

a:focus, [role=link]:focus {
	--background-color: var(--text-link-color-focus);
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: var(--typography-spacing-vertical);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: var(--font-size);
	overflow-wrap: break-word;
}

h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em{
	font-style:normal;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{
}

h1 {
	font-size: 2rem;
	--typography-spacing-vertical: .5rem;
}

h2 {
	font-size: 2.5rem;
	--typography-spacing-vertical: .5rem;
}

h3 {
	font-size: 1.5rem;
	--typography-spacing-vertical: .5rem;
}

h4 {
	font-size: 1.25rem;
	--typography-spacing-vertical: .5rem;
}

h5 {
	font-size: 1.125rem;
	--typography-spacing-vertical: .5rem;
}

p {
	font-family: var(--text-font);
	font-size:1.2em;
	margin-bottom: var(--typography-spacing-vertical);
}

em {
	font-style: italic;
}

small {
	font-size: .825em;
}

[type=checkbox], [type=radio] {
	--border-width: 2px;
}

[type=checkbox][role=switch] {
	--border-width: 3px;
}

thead th, thead td, tfoot th, tfoot td {
	--border-width: 3px;
}

:not(thead):not(tfoot)>*>td {
	--font-size: 0.875em;
}

pre, code, kbd, samp {
	--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
	--text-font-weight: var(--heading-font-weight);
}

/* custom dropdown - same on all things... */
select, textarea {
	padding: var(--half-spacing);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

select {
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) #fff no-repeat right .5em center;
	padding-right: 2em;
	padding-left:1em;
	display: inline;
	max-width: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	color:var(--dark-blue);
	font-size:1rem;
	font-family:var(--text-font);
	cursor:pointer;
}

/*articles - may require many unsets for other things... */
#pm .artp ul {
	list-style-type: disc;
	padding-inline-start: 2em;
	margin-block-start: 1em;
	margin-block-end: 1em;
	font-size:1.2em;
}

#pm .artp ul ul, #pm .artp ul ul ul {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#pm .artp ul li {}

#pm .artp ul.nobullets {
	list-style-type: none;
	margin: .5em 0;
}

#pm .artp ol {
	font-size:1.2em;
	list-style-type: decimal;
	padding-inline-start: 2em;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

#pm .artp ol li{
	
}

#pm .artp ol ol,
#pm .artp ol ol ol {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#pm .artp a {
	font-weight: 500;
	color:var(--dark-blue);
	text-decoration:underline;
}

#pm .artp a:hover {
	text-decoration: underline;
	text-decoration-color: var(--orange);
}

/* Buttons 
------------------------------------------------------- */
.submit,
a.btn {
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing)
}

.submit:hover,
a.btn:hover {
	text-decoration: none;
	background-color: var(--button-hover-color);
	color: var(--button-hover-text-color);
	border: 1px solid var(--button-hover-border-color);
}

/* iphone specific overrides */
textarea, input.text, 
input.inputtext,
input.inputtext_short,
.ui-widget select,
input[type="text"],
input[type="email"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
	/* 
	removed as it caused issues with radio buttons
	-webkit-appearance: none; */
	font-size: 16px;
	font-weight: 400;
	padding: var(--half-spacing) var(--spacing);
	width: auto;
	border-width: 1px;
	border-style: solid;
}

textarea{
	font-size:1rem;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	color:var(--dark-blue);
}

td a.btn {
	display: block;
}

input.inputtext,
input.inputtext_light {
		font-size:1rem;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	color:var(--dark-blue);
}

/* Tables 
------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
#pm .pmind {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	/* grid-auto-flow: dense; */
	/*don't put margin here*/
}

/*this would be avoided if we just wrote the content out in blocks
would be also better if we could add our own "blocks" for things to be in
you currently can't have a banner and an article side by side because of this */

#pm .pmind .pbnr {
	grid-column: 1/-1;
}

#pm .pmind .pbnr {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}

/*set the default for any non grid class article #pm is needed as the css class is set higher than the immediate parent container */
.art, .prdlst, .carousel, .brnd, #depts {
	grid-column: 1/-1;
}

.fullWidth img,
.halfWidth img,
.halfWidthDbl img,
.thirdWidth img,
.quarterWidth img,
.twoThirdWidth img,
.fullWidth picture,
.halfWidth picture,
.halfWidthDbl picture,
.thirdWidth picture,
.quarterWidth picture,
.twoThirdWidth picture{
	display: block;
	width:100%;
	height: auto;
}

/* layout base classes
------------------------------------------------------- */
.fullWidth {
	grid-column: 1/-1;
}

.titleArticle{
	grid-column:1/-1;
	text-align:center;
}

.halfWidth{
	grid-column: auto / span 6;
}



.halfWidthDbl {
	grid-column: auto / span 6;
	grid-row: span 2;
}

.quarterWidth {
	grid-column: auto / span 3;
}

.thirdWidth {
	grid-column: auto / span 4;
}

.twoThirdWidth {
	grid-column: auto / span 8;
}

.fullWidth,
.halfWidth,
.quarterWidth,
.thirdWidth,
.twoThirdWidth {
	position: relative;
	/* added to ensure carousel elements work right in firefox */
	display: grid;
	grid-template-columns: 100%;
}

.fullWidth a.img,
.halfWidth a.img,
.quarterWidth a.img,
.thirdWidth a.img,
.twoThirdWidth a.img {}

.bnr.fullWidth,
.bnr.halfWidth,
.bnr.quarterWidth,
.bnr.thirdWidth,
.bnr.twoThirdWidth {
	overflow: hidden;
}

.fullWidth .toi,
.halfWidth .toi,
.quarterWidth .toi,
.thirdWidth .toi,
.twoThirdWidth .toi {
	background-color: var(--off-white);
	color: var(--grey);
	max-width: 100%;
	width: calc(100% - 1em);
	padding:.5em;
	text-align: left;
	opacity:.8;
	grid-column:1;
	grid-row:1;
	align-self:end;
	position:absolute;
	bottom:0;
}

.fullWidth .toi h3,
.halfWidth .toi h3,
.quarterWidth .toi h3,
.thirdWidth .toi h3,
.twoThirdWidth .toi h3,
.fullWidth .toi a.txt,
.halfWidth .toi a.txt,
.quarterWidth .toi a.txt,
.thirdWidth .toi a.txt,
.twoThirdWidth .toi a.txt {
	font-size: 1.5rem;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	margin: 0;
	padding: 0;
}

.fullWidth .toi p,
.halfWidth .toi p,
.quarterWidth .toi p,
.thirdWidth .toi p,
.twoThirdWidth .toi p {
	padding: 0;
	margin: 0;
}

.fullWidth .toi p a.btn,
.halfWidth .toi p a.btn,
.quarterWidth .toi p a.btn,
.thirdWidth .toi p a.btn,
.twoThirdWidth .toi p a.btn {
	border-radius: 2rem;
	margin-top: 1rem;
}

.imageText,
.textImage,
.deptfooter {
	grid-column: 1/-1;
	width: unset;
	padding: 0;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto auto;
	width: 100%;
	max-width: var(--site-max-width);
	margin: auto;
}

.imageText .imgcont {
	grid-column: 1;
}

.imageText .artp {
	grid-column: 2;
}

.textImage .artp {
	grid-column: 1;
	grid-row: 2;
}

.textImage .imgcont {
	grid-column: 2;
	grid-row: 2;
}

.imageText h2,
.textImage h2 {
	grid-column: 1/-1;
}

/* responsive iframe - used in articles*/
.responsive-iframe {
	width: calc(100% - 2em);
	margin: 1em;
	display: inline-block;
	vertical-align: top;
	margin-top: 2em;
}
.responsive-iframe .artp,
.responsive-iframe {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

.responsive-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
	margin: auto;
}

#site {
	background-color: var(--background-color);
	
}

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel #ptf
------------------------------------------------------------------------------------- */
#ptf {
	top: 0px;
	width: 100%;
	text-align: center;
}

#ptf #b19761{
	margin:0;
}

/*hide on checkout process */
.chkflow #ptf{
	display:none;
}

#ptf .ext {
	display: grid;
}

#ptf .ext .art {
	grid-area: message;
}

#ptf p {
	margin: 0;
}



/* -------------------------------------------------------------------------------------
=Top Panel #pt
------------------------------------------------------------------------------------- */
#pt {
	width: 100%;
	margin: auto;
	background-color: var(--top-panel-color);

}

/*see media queries for other layouts layout */
#pt .ext {
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	--logo-width:152px;
	--feefo-width:220px;
	--search-width:minmax(0, 2fr);
	--basket-width:minmax(0, 300px);
	background-color: var(--top-panel-color);
	color:var(--white);
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-column-gap: 1rem;
	grid-template-columns: var(--spacer-width) var(--logo-width) var(--feefo-width) var(--search-width) var(--basket-width)  var(--spacer-width);
	grid-template-areas:
		". logo infolinks infolinks account ."
		". logo feefo search basket ."
		". logo feefo search basket ."
		". logo feefo search basket ."
		"nav nav nav nav nav nav ";
	align-items: center;
	z-index:1;

}

/* for christmas snowflakes*/
#pt .ext:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background-image:url('https://www.orchardtoys.com/orchardtoys/i/art/400x250_snowflake_repeating_pattern.webp?_t=2311112255');
	background-repeat: repeat;
	background-position: 50% 0;
	z-index:-10;
}



#pt .ext>* {
	min-width: 0;
}

/* defaults */
#pt .info li {
	list-style: none;
	display:inline-block;
}

#pt li.pipe {
	display: none;
}

#a128843776{
	display:none;
}


/* menu toggle - hidden by default, shows on mobile/smaller viewport
------------------------------------------------------- */
.home-hamburger {
	grid-area: nav-start;
	display: none;
	z-index: 1000;
}

.home-hamburger .visible-xs {
	visibility: hidden;
}

/* logo
------------------------------------------------------- */
#pt .pbnr {
	grid-area: logo;
}

#pt .pbnr img {
	margin:0;
}

#pt .pbnr a.txt {
	display: none;
}


/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	text-align: center;
	font-size: 16px;
	/* align-self:start; */
}

#pt .icon.srch{
	grid-area:searchtoggle;
	display:none;
}

#pt .search form {
	margin:auto;
	background-color:var(--white);
	border-radius:var(--border-radius);

}

#pt .search input {
	display: inline-block;
	vertical-align: top;
}

#pt .search input#searchbox {
	height: 48.2px;
	width: calc(100% - 3rem);
	/* max-width: 75%; */
	background-color:transparent;
	margin: auto;
	font-size: 16px;
	padding: .5rem 1rem;
	border:none;
}

#pt .search input#searchbox:focus-visible{
	border:none;
	outline:none;
}

/*could do with some way of nicely seeing font awesome icons in coms */
#pt .search input#search {
	width: auto;
	height: 48.2px;
	margin: 0;
	padding: .5rem 1rem;
	background-color: var(--white);
	color:var(--blue);
	font-family: var(--font-awesome);
	border: none;
}

/* Basket
------------------------------------------------------- */
#pt .bskt {
	grid-area: basket;
	text-align:right;
	/* align-self:start; */
}

#pt .bskt #mybskt{
	padding:.5em;
	text-align:center;
	align-items:center;
	background-color:var(--white);
	color:var(--dark-blue);
	border-radius:var(--border-radius);
	display:grid;
	grid-template-columns: 2em auto auto;
	grid-template-areas:
		"icon items value"
		" icon freeshipping freeshipping";
	grid-column-gap:1em;
}

#pt .bskt #mybskt p{
	font-size:.925em;
	font-family:var(--heading-font);
	margin:0;
	padding:0;
	line-height:1;
}

/*items in basket */
#bsktitems,
a.bsktitems{
	grid-area:items;
}

#bsktitems span{
	color:var(--grey);
	font-family:var(--text-font);
}

#bsktvalue,
a.bsktvalue{
	grid-area:value;
}

#bsktvalue span{
	color:var(--grey);
}

#pt .bskt #mybskt a.btn,
#pt .bskt #mybskt img.btn{
	background-color:transparent;
	grid-area:icon;
	display:inline-block;
	outline:none;
	padding:0;
	border:none;
	margin:0;
}

#pt .bskt #mybskt a.btn:hover{
	background-color:transparent;
}

#pt .bskt #mybskt a.btn img{
	margin:0;
	
}

#pt .bskt h4{
	grid-area:freeshipping;
	font-size: .725rem;
	text-align: right;
	margin:0;
}

/* client specific 
------------------------------------------------------- */
#p49676291,
#p50069505{
	grid-area:infolinks;
	grid-column:1/-1;
	text-align:center;
	align-self:start;
}

#p49676291 li,
#p50069505 li{
	display:inline-block;
	padding:.5em;
}

#p49676292,
#p50069506{
	grid-area:account;
	text-align:right;
	align-self:start;
	pointer-events:none;
}

#p49676292 li,
#p50069506 li{
	background-color:var(--dark-blue);
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	padding:.5em;
	margin-left:1em;
	pointer-events:all;
}

#a62062592,
#a62062592{
	grid-area:feefo;
	/* align-self:start; */	background-color:var(--white);
	color:var(--blue);
	border-radius:var(--border-radius);
}

#a62062592 img,
#a62062592 img{
	max-width:100%;
	height:auto;
	border-radius:var(--border-radius);
}



/* -------------------------------------------------------------------------------------
=Center Panel #pc
------------------------------------------------------------------------------------- */
#pc {
	margin: auto;
	display: flow-root;
	background-color:var(--white);
	text-align: center;
	margin-bottom:1em;
}

/* client specific 
------------------------------------------------------- */
#a128548864{
	background-color:var(--light-blue);
	color:var(--white);
	/*  */
}

#a128548864 .slider-container{
	align-items:end;
}

#a128548864 .artp{
	max-width:var(--site-max-width);
	width:100%;
	margin:auto;
}

#a128548864 h4{
	font-family:var(--text-font);
	font-weight:normal;
	margin:0;
	padding:.5em ;
}

#a128548864 li{
	display:grid;
	align-items:center;
}

/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#pmid {
	width: 100%;
	margin: auto;
	background-color: var(--main-panel-color);
	/*used to ensure left panel displays correctly, unsure why though... */
	display: flex;
	justify-content: flex-start;
	min-height: 85vh;
}

/* filter search results? 
------------------------------------------------------- */
#fs {
	display: none;
}

/* full width panel 
------------------------------------------------------- */
.pmfull {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	width: var(--site-max-width);
	background-color: var(--main-panel-color);
}

/* left panel
------------------------------------------------------- */
#pl {
	width: var(--left-panel-width);
	margin: 0;
	margin-left: auto;
	margin-right: 1rem;
	vertical-align: top;
}


/* Right panel
------------------------------------------------------- */
#pr {
	width: var(--right-panel-width);
	margin: 0;
	margin-right: auto;
	margin-left: 1rem;
	vertical-align: top;
}



/* wide panel (used if left or right panels exist 
------------------------------------------------------- */
.pmwide {
	background-color: var(--main-panel-color);
	width: calc(var(--site-max-width) - var(--left-panel-width) - 1rem);
	display: inline-block;
	vertical-align: top;
	margin: 0 auto;
	margin-left:0;
}

.pmstd{
		width: calc(var(--site-max-width) - var(--left-panel-width) - var(--right-panel-width) - 1rem);
}


/*no idea what #fs if for*/
#pl + #fs +.pmwide,
#pl  +.pmwide{

	/*no idea what this was for
	margin-left:0;
	margin-right:auto;*/
}

/* -------------------------------------------------------------------------------------
=Footer Panel #pf
------------------------------------------------------------------------------------- */
#pf {
	width: 100%;
	margin: auto;
	margin-top:1em;
}

/*hackity hack */
.buy #pf{
	display:none;
}

#pf .ext {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	max-width: var(--site-max-width);
	width:100%;
	background-color: var(--main-panel-color);

	
}
#pf .ext .pbnr{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}

#pf .ext .pbnr img{
	border-radius:var(--border-radius);
}

.basket #pf{
	display:none;
}

.nocrossell #pf #p50069522{
	display:none;
}



/* Newsletter 
------------------------------------------------------- */
#a128450560{
	text-align:center;
	padding-top:4em;
}

#a128450560 h4{
	color:var(--dark-blue);
	font-family:var(--text-font);

	font-size:2em;}

#a128450560 em{
	color:var(--light-blue);
	font-family:var(--heading-font)
}


#pf .ext .news {
	grid-area:subscribe;
	text-align:center;
	width:50%;
	margin:auto;
}

#pf .ext .news  h3 {}

#pf .ext .news form {
	text-align: left;
	align-self: center;
	display:grid;
	grid-template-areas:"intro"
					"email"
					"subscribe";
	grid-template-columns:1fr;
	grid-gap:1em;
}

#pf .ext .news label {
	display:none;
}

#pf .ext .news input#email {
	grid-area:email;
	padding: 1em;
	border-radius:2em;
	text-align:center;
	border:2px var(--dark-blue) solid;
}

#pf .ext .news input#subscribe {
	grid-area:subscribe;
	padding:1em;
	border-radius:2em;
	color:var(--white);
	background-color:var(--light-blue);
	border-color:var(--light-blue);
}

#a128450561{
		text-align:center;
	padding-top:1em;
	padding-bottom:4em;
}

#a128450561 a{
	text-decoration:underline;
}

/*because the client doesn't want the register link on the subscribe page */
.subscribe li h5{
display:none;
}


/* client specific 
------------------------------------------------------- */
#p49741824,
#p50069522{
	margin-bottom:1em;
}

.basket #pf #p49741824,
.basket #pf #p50069522{
	display:none;
}



#a128450563{
	background-color:var(--red);
	text-align:center;
	margin:1em 0;
}

#pf #carouselArtImgs {
	--swiffy-slider-item-count:5
}

#a128450563 h5{
	color:var(--white);
	font-size:1.5em;
	padding:1rem;
}

/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */

#pb {
	width: 100%;
	margin: auto;
	background-color: var(--bottom-panel-color);
	margin-top:1em;
}


/* defaults 
------------------------------------------------------- */
/* hide icons if present on info links */
#pb .info li.icon img {
	display: none;
}

#pb h3,
#pb h2 {
	font-size: 1.25em;
	text-transform:uppercase;
	margin-bottom: 1rem;
	color: var(--bottom-panel-heading-color);
}

#pb p {
	color: var(--bottom-panel-text-color);
}

#pb a {}

#pb ul {
	padding: 0;
	display:inline-block;
}

#pb li {
	list-style: none;
	font-size: 1em;
	color: var(--bottom-panel-text-color);
	padding:.5em 0;
}

/*old stuff we don't want written out*/
#pb li.pipe {
	display: none;
}

ul.inline, ul.socials, ul.contacts {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

ul.inline li {
	display: inline-block;
	padding-right: .5em;
}

/* client specific 
------------------------------------------------------- */
#pb .ext {
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	background-color: var(--bottom-panel-color);
	margin: 0 auto;
	padding-top: 3em;
	position: relative;
	display: grid;
	grid-gap:2em;
	align-items: start;
	grid-template-columns: var(--spacer-width) repeat(4, 1fr) 200px var(--spacer-width);
	grid-template-areas:
		". products about contact account logos ."
		"policy policy policy policy policy policy policy";
	z-index:1;
}

/* for christmas snowflakes*/

#pb .ext:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	background-image:url('https://www.orchardtoys.com/orchardtoys/i/art/400x250_snowflake_repeating_pattern.webp?_t=2311112255');
	background-repeat: repeat;
	background-position: 50% 0;
	z-index:-10;
}


#p49676303,
#p50069515{
	grid-area: products;
}


#p49676304,
#p50069516{
	grid-area: about;
}

#p49676305,
#p50069517{
	grid-area: contact;
}

#p49676306,
#p50069518{
	grid-area: account;
}

#a128548865,
#a128548865{
	grid-area: logos;
	text-align:center;
}

#a128548865 .inline,
#a128548865 .inline{
	margin:1em;
}

#a128548865 .inline li,
#a128548865 .inline li{
	font-size:1.5em;
	padding:.5rem
}

#a128548865 .fsc ,
#a128548865 .fsc{
	margin-top:.5em;
}

#a128548865 .fsc img,
#a128548865 .fsc img{
	background-color:#fff;
	border-radius:7px;
	padding:1px;
}

#p49676307,
#p50069520{
	grid-area: policy;
	border-top:1px solid var(--light-blue);
	text-align:center;
	margin-top:2em;
}
/*because of duplicate id's being used grrr */
.pane #p49676307,
.pane #p50069520{
	margin-top:0em;
	border-top:0;
}

#p49676307 .accordion,
#p50069520 .accordion{
	display:block;
	max-width:var(--site-max-width);
	width:100%;
	margin:auto;

}

#p49676307 h3.header,
#p50069520 h3.header{
	display:none;
}

#p49676307 .pane ul,
#p50069520 .pane ul{
	display:grid;
	grid-template-columns: repeat(6, auto);

	max-width:var(--site-max-width);
	width:100%;
	margin:auto;
	padding:1em 0;
}
#p49676307 li,
#p50069520 li{
	display:inline-block;

}


/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel #pbf
------------------------------------------------------------------------------------- */
#pbf {
	background-color: var(--bottom-bar-color);
	font-size: .725em;
	padding:.5em;
}

#pbf .ext {
	text-align:center;
	color:var(--white);
}

#pbf p{
	margin:0;
}




/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.bdcb {
	margin: var(--spacing) auto;
	padding: 0;
	text-align: center;
}

.home .bdcb {
	display: none;
}

.bdcb {
	width: var(--site-max-width);
	margin: auto;
	text-align: left;
}

.crumb {
	display: block;
	text-align: left;
	margin: 0 var(--half-spacing);
}

.bdcb ul li {
	list-style: none;
	display: inline-block;
	margin: 0;
}

.bdcb li a, .bdcb li h1,
.bdcb li h3{
	font-family: var(--text-font);
	color: var(--text-color);
	font-size: .825rem;
	padding: 0;
	margin: 0;
	display: inline-block;

}

/*active page */
.bdcb li h1,
.bdcb li h3{
	font-size: .825rem;
	margin: 0;
	color: var(--text-color);
}

/*for the break between the crumb*/
.bdcb li:after {
	display: inline-block;
	font-family: var(--font-awesome);
	color: var(--text-color);
	font-size: .6rem;
	font-weight: normal;
	content: "\f054";
	margin: .5rem;
}

.bdcb li:last-child:after {
	content: "";
	margin: 0;
	display: none;
}

.bdcb span {
	display: inline-block;
	margin: 0;
}

.bdcb h1 {}

/* -------------------------------------------------------------------------------------
=Swiffy Slider
------------------------------------------------------------------------------------- */
.swiffy-slider {

	}
.swiffy-slider ul, .swiffy-slider li {}

.swiffy-slider .slidecont p {
	padding: 0;
	margin: 0;
}

.slider-product {
	--swiffy-slider-item-count: 5;
}

.slider-cta {
	--swiffy-slider-item-count: 3;
}

.slider-dept {
	--swiffy-slider-item-count: 5;
	--swiffy-slider-nav-light: #fff;
}

.slider-dept-alt {
	--swiffy-slider-item-count: 10;
}

.slider-featured {
	--swiffy-slider-item-count: 5;
}

/* product sliders - code needs some tweaking */
.carousel.prod h2{
	background-color:var(--red);
	color:var(--white);
	text-align:center;
	padding:.5rem;
	margin-bottom:1rem;
}

.carousel.prod .swiffy-slider {
	--swiffy-slider-item-count: 5;
}

/* department sliders - code needs some tweaking */
.carousel.dept .swiffy-slider {
	--swiffy-slider-item-count: 4;
}

.carousel.dept .deptlink a.txt {}

/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
.page_blog #pm{
	display:grid;
	grid-template-areas:
		"header header"
		"blogs nav";
	grid-template-columns:8fr 2fr;
	grid-template-rows:auto 1fr;
	justify-content:end;
	/* grid-column-gap:3em; */
	grid-auto-flow:column dense;
}

.page_blog #pm .deptHeader{
	grid-area:header;
	
}



.page_blog .blogs,
.page_blog .blog{
	display: grid;
	grid-area:blogs;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--spacing);
	/* grid-auto-flow: dense; */
	/* grid-auto-rows: min-content; */
}

/* Blog previews
------------------------------------------------------- */

.page_blog .blogs .blog{
	border-radius:var(--border-radius);
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"image"
	"title"
	"date"
	"readmore";
	background-color:var(--light-blue-alpha);
	padding-bottom:1em;
	align-content:start;
	grid-area:unset;
}


.page_blog .blogs .blog a.img{
	grid-area:image;
	border-bottom:3px white solid;
}

.page_blog .blogs .blog a.img img{
	width:100%;
	height:auto !important;
}

.page_blog .blogs .blog a.title{
	grid-area:title;
	font-family:var(--heading-font);
	color:var(--dark-blue);
	text-align:center;
	padding:1rem;
	font-size:1.25em
}

.page_blog .blogs .blog p.date{
	grid-area:date;
	text-align:center;
	color:var(--light-blue)
}

.page_blog .blogs .blog a.more{
	grid-area:readmore;
	margin:auto;
	padding:.5rem 2rem;
	background-color:var(--dark-blue);
	color:var(--white);
	font-family:var(--heading-font);
	text-align:center;
	font-size:1.125em;
	border-radius:var(--border-radius);
}

/*blog summary text - not wanted for this client */
.page_blog .blogs .blog .artp{
	display:none;
}


/* Blog preview nav
------------------------------------------------------- */


.blognav{
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:auto auto 1fr;
	grid-gap:1em;
	grid-area:nav;
	align-self:start;
	padding-left:3em;
}

.blognav li{
	list-style:none;
	margin-bottom:.5em;
}

.blognav .search{}


.blognav .search form {
	margin:auto;
	background-color:var(--white);
	border-radius:var(--border-radius);
	border-color:var(--text-color);
	border:1px solid var(--text-color);
}

.blognav .search input {
	display: inline-block;
	vertical-align:middle
}

.blognav .search input#searchbox {
	height: 48.2px;
	width: calc(100% - 3rem);
	/* max-width: 75%; */
	background-color:transparent;
	margin: auto;
	font-size: 16px;
	padding: .5rem .5rem;
	border:none;
}

.blognav .search input#searchbox:focus-visible{
	border:none;
	outline:none;
}

/*could do with some way of nicely seeing font awesome icons in coms */
.blognav .search input.submit {
	width: auto;
	height: 26.4px;
	margin: 0;
	padding: 0rem .5rem;
	background-color: var(--white);
	color:var(--blue);
	font-family: var(--font-awesome);
	border: none;
}

.blognav .recent{}

.blognav .archive{}

/* Blog Posts
------------------------------------------------------- */
.art.blog{}

.art.blog h2{
	text-align:center;
	color:var(--dark-blue);
}

.art.blog .imgcont{
	margin:2em auto;
	max-width:50%;
}

.art.blog .imgcont img{
	border-radius:var(--border-radius);
}

/* 2024 new blog stuff */
.page_blog article{
	grid-column:1/-1;
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap:1em;
	align-items:start;
}

.page_blog article h2,
.page_blog article h6,
.page_blog article footer,
.page_blog article section{
	grid-column:1/-1;
	align-content:center;
	margin-bottom:2em;
}

.page_blog section.halfWidth{
	grid-column: auto / span 6;
}

.page_blog section.halfWidthDbl {
	grid-column: auto / span 6;
	grid-row: span 2;
}

.page_blog section.quarterWidth {
	grid-column: auto / span 3;
}

.page_blog section.thirdWidth {
	grid-column: auto / span 4;
}

.page_blog section.twoThirdWidth {
	grid-column: auto / span 8;
}

.page_blog section.blog{
	display:grid;
	grid-area:unset;
	grid-column:1/-1;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:"title title"
						"images images"
	"text text";
	grid-gap:0;
	grid-column-gap:1em;
	align-items:center;	
}

.page_blog section.imageText{
	grid-template-areas:"title title"
						"images text";
	grid-gap:0;
	grid-column-gap:1em;
	align-items:center;	
}

.page_blog section.textImage{
	grid-template-areas:"title title"
						"text images";
	grid-gap:0;
	grid-column-gap:1em;
	align-items:center;	
}

.page_blog section.noTxt{
	grid-template-areas:"title title"
						"images images";
}

.page_blog section.blog h3,
.page_blog section.textImage h3,
.page_blog section.imageText h3{
	grid-area:title;
	text-align:center;
}

.page_blog section.blog .txt,
.page_blog section.textImage .txt,
.page_blog section.imageText .txt{
	grid-area:text;
}

.doubleLine .txt{
	line-height:3
}

.page_blog section.blog.noTxt .txt{
	display:none;
}

.page_blog section.blog .imgs,
.page_blog section.textImage .imgs,
.page_blog section.imageText .imgs{
	grid-area:images;
}

.page_blog section.blog .imgs a,
.page_blog section.blog .imgs img{
	display:inline-block;
}


/* Blog navigation buttons
------------------------------------------------------- */
.blogBtns,
.blogPageBtns{
	grid-column:1/-1;

	display:grid;
	grid-template-areas:"prev next";

}

.blogBtns a.prev,
.blogPageBtns a.prev{
	grid-area:prev;	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	border-radius:var(--border-radius);
	margin-right:auto;
	padding:.5rem 2rem;
}

.blogBtns a.next,
.blogPageBtns a.next{
	grid-area:next;
	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	border-radius:var(--border-radius);
	margin-left:auto;
	padding:.5rem 2rem;
}
/* -------------------------------------------------------------------------------------
=SearchHeader / SearchFooter 
------------------------------------------------------------------------------------- */
.deptwrap {}

.searchheader {
	padding: .5em;
}

.searchheader .search {
	/* for unknown reasons we re-write out the searchbox in the search header*/
	display: none !important;
}

.searchheader label {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem;
	margin: 0;
	margin-right: .5rem;
}

.searchheader .paging {
	/*important needed as something shoves an inline style there!*/
	display: none !important;
}

.searchheader {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "items filter sort-by";
	grid-gap: 1em;
	align-items: center;
}

/* results found */
.searchheader h5#rescou {
	grid-area: items;
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem;
	margin: 0;
	/* display:none !important; */
}

/* sort by */
.searchheader #sorpan, .searchheader form[name="dispord"] {
	grid-area: sort-by;
	margin: 0;
}

/* results per page */
.searchheader #rpppan, .searchheader .rpp {
	margin: 0;
}



/*paging */
.paging {
	grid-area: paging;
	text-align: center;
}

/*writing out "page" is a little daft */
.paging label {
	display: none;
}

.paging span, .paging a {
	font-size: 1em;
	display: inline-block;
	margin-right: .5em;
	border: 1px solid var(--border-color);
	border-radius: .25rem;
	padding: var(--half-spacing);
}

.paging span:last-child, .paging a:last-child {
	margin-right: 0;
}

/*this should be the current page */
.currpg {
	font-weight: var(--heading-font-weight);
	color: var(--white);
	background-color: var(--light-blue);
}

.searchfooter {
	padding: .5em;
	text-align: center;
	margin: 1em 0;
}

#sr {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	position: relative;
	margin-top: 1em;
}

.pmwide #sr {
	grid-template-columns: repeat(4, 1fr);
}

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */

.filter {}
.filter .mnu_filter_search{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	grid-gap:1em;

}

/* close filter button */
.fsclsdiv {
	margin-left:calc(100% - 1em);
	margin-bottom:1em;
}

.fsclsspn {
	border:1px solid var(--light-blue);
	font-family:monospace;
	color:var(--white);
	background-color:var(--light-blue);
	padding:.5em;
	line-height:1;
	border-radius:50%;
}

.fsclsdiv .fsclsspn {
	display: none;
}


.citem {
	padding: .5em 1em;
	color:var(--dark-blue);
	font-family: var(--heading-font);
	font-size:.825em;
	margin: 0;
	cursor: pointer;
	text-align: left;
	display:grid;
	grid-template-areas:"toggle value";
	grid-template-columns:2em 1fr;
	align-items:center;
}

.citem::before, .citemselected::before {
	grid-area:toggle;
	font-family: var(--font-awesome);
	font-size: 1.25rem;
}

.citem::before {
	content: '\f0c8';
}

.citemselected::before {
	content: '\f14a';
	color: var(--light-blue);
	font-weight: 700;
}

.citem:empty {
	display: none;
}

/* price slider 
------------------------------------------------------- */
/* should be a toggle in coms to turn this on or off - also could do with a class on it for better targeting purposes */
div[sectiontype="priceslider"] {
	display:none;
}


.attrsection {}

.filter .HeaderContent {
	padding: var(--spacing) 0;
	position: relative;
	cursor: pointer;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1rem;
	border:2px solid var(--light-blue);
	/* margin-bottom:.5em; */
	color:var(--light-blue);
	padding:1em;
}

.filter .HeaderContent:after {
	content: '\f106';
	font-family: var(--font-awesome);
	font-size: 1rem;
}

.filter .HeaderContent.collapsed:after {
	content: '\f107';
}

.filter .HeaderContent h5 {
	margin: 0;
	font-size: 1rem;
	padding: 0;
	position: relative;
	cursor: pointer;
}

.items {}

#divPriceRangeDisplay {
	text-align: center;
	padding: var(--spacing);
}

#sldiv {
	margin: 1em;
}


/* new dropdown stuff 
------------------------------------------------------- */
.attrsection{
  position: relative;
  width: 100%;
}

.oitems{
	position: absolute;
	z-index:101;
	list-style: none;
	width: calc(100% - 4px);
	box-shadow:var(--box-shadow);
	background-color: var(--white);
	border: 2px solid var(--light-blue);
	border-top:none;
	max-height: 216px;
	overflow-y: auto;
	transition: 0.5s ease;
	transform: scaleY(1);
	opacity: 0;
	visibility: hidden;
}

.oitems:focus-within{
  box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6);
}

.oitems .citem{
  position: relative;
  cursor: pointer;

}

.oitems::-webkit-scrollbar {
  width: 17px;
}
.oitems::-webkit-scrollbar-track{
  background:var(--off-white);

}
.oitems::-webkit-scrollbar-thumb{
  background: var(--light-blue);
  border-radius: 25px;
}

.oitems .citem:hover{
  background-color: #f2f2f2;
}

/* interactivity */
/*if we added the arrow span */
.attrsection.active .arrow{
  transform: rotate(180deg);
}


.attrsection.active .items,
.HeaderContent.collapsed +.items{
	display:block!important;
}
.attrsection.active .oitems,
.HeaderContent.collapsed + .items .oitems{
	opacity: 1;
	visibility: visible;
	transform: scaleY(1);

}

/* filter buttons
------------------------------------------------------- */
.resetfs {
	display:none;
	/*we aren't using this now - see applied filter options  */
}


/*careful this id is used for members too */
#fstrigbtn {
	display:none;
}

.fstrigspn {
	display: block;
	vertical-align: middle;
	text-align: center;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
}

.fstrigspn:before {
	content: "\f1de";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: 1em;
	margin-right: .5rem;
}



.fltrattrtxt,
.resetfs h5 {
	font-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
	margin: 0;
}

/* applied filter options 
------------------------------------------------------- */
.fltrbtnholder {
	grid-area: filter;
}

.fltrbtnholder .resetfs{
	display: inline-block;
	vertical-align: middle;
	margin-right: .5rem;
	margin-bottom: .5rem;
	text-align: center;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
}
/*as we currently write out TWO clear filter buttons within the toggle filters area*/
.resetfs+.resetfs, .fltrattrbtn+.resetfs {
	display: none;
}

.fltrattrbtn{
	display: inline-block;
	vertical-align: middle;
	margin-right: .5rem;
	margin-bottom: .5rem;
	text-align: center;
	background-color: var(--off-white);
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
}

.fltrattrtxt:after {
	content: "\0058";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: .725em;
	margin-left: .5rem;
}

/* -------------------------------------------------------------------------------------
=Deptsingle  
------------------------------------------------------------------------------------- */

.deptsingle {
	position: relative;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

/* -------------------------------------------------------------------------------------
=Subdepartment tree  
------------------------------------------------------------------------------------- */
.depttree {
	grid-column: 1/-1;
}

.depttree>.bt h3 {
	display: none;
}

.depttree {
	display: block;
	/* margin-bottom:1em; */
}

.depttree h4.tagline {}

.depttree ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
}

.depttree li {
	--highlight-color:var(
	--red);
	position: relative;
	margin: 0;
	overflow: hidden;
	align-items: center;
	display: grid;
	grid-template-areas:
		"title"
		"image"
		"shopnow";
	grid-template-columns: 1fr;
	background-color:var(--highlight-color);
	color:var(--white);
	border-radius:var(--border-radius);
	border:.25em solid var(--highlight-color);
	/* background-image:url(https://www.orchardtoys.com/orchardtoys/4128769/i/bdr/Snowflake%20pattern.png?_t=221118124338); */
	/* background-size:contain; */

	/*heights needed to deal with double lined titles*/
	grid-template-rows:8em auto auto;
	/* grid-template-rows:auto auto auto; */
}

.depttree li:nth-child(2), .depttree li:nth-child(9){
	--highlight-color:var(--yellow);
	color:var(--dark-blue)
}
.depttree li:nth-child(3), .depttree li:nth-child(10){
	--highlight-color:var(--light-green);
}
.depttree li:nth-child(4), .depttree li:nth-child(11){
	--highlight-color:var(--light-blue);
}
.depttree li:nth-child(5), .depttree li:nth-child(12){
	--highlight-color:var(--green);
}
.depttree li:nth-child(6), .depttree li:nth-child(13){
	--highlight-color:var(--blue);
}
.depttree li:nth-child(7), .depttree li:nth-child(14){
	--highlight-color:var(--orange);
}
.depttree li:nth-child(8), .depttree li:nth-child(15){
	--highlight-color:var(--red);
}





/*swap image shows on hover using visibility */
.depttree li a.img.swap{
	background-color:transparent;
	opacity:0;
	transition:  1s linear;
}

.depttree li a.img.swap:hover{
	background-color:var(--white);
	opacity:1;
	transition:  0.5s linear;

}

.depttree li a.img{
	grid-area:image;
	display:block;
}

.depttree li a.img img {
	width:100%;
	aspect-ratio:677/561;
	/*aspect-ratio: 1/1;*/
	object-fit: cover;
	background-color:var(--white);
	margin: 0 !important;
}

.depttree li a.txt {
	grid-area:title;
	text-align:center;
	font-family:var(--heading-font);
	padding:1rem;
	font-size:2em;

}

.shopnow{
	grid-area:shopnow;
	background-color:var(--white);
	text-align:center;
	padding:1em;
}

.depttree li a.btn {
	text-align:center;
	font-family:var(--heading-font);
	padding:.5rem 2rem;
	background-color:var(--dark-blue);
	border-color:var(--dark-blue);
	border-radius:var(--border-radius);
	color:var(--white);
	display:inline-block;
	margin:auto;
}


.deptlink.featured{
	padding:2em;
}

.deptlink.featured img{
	max-width: 60%;
}


/* -------------------------------------------------------------------------------------
=FeaturedProducts 
------------------------------------------------------------------------------------- */
/* Base settings
------------------------------------------------------- */
#deptlist .fprdcont, #searchlist .fprdcont {}

.fprd {
	position: relative;
}



.fprd:hover {}

.fprd {
	display: grid;
	/* padding:.5em; */
	/* grid-row-gap: var(--half-spacing); */
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto 4em auto auto;
	grid-template-areas:
		"image image"
		"title title "
		"selling-price selling-price"
		". .";
	align-items:center;
}


/* if in a carousel element */
.slider-container .fprd {
	border: 4px solid var(--light-blue);
	border-radius:var(--border-radius);
}

.slider-container .fprd  .fprdimg{
	border-radius:0;
}
/* image 
------------------------------------------------------- */
.fprd .fprdimg {
	grid-area: image;
	position: relative;
	display:grid;
	align-items: start;
	overflow: hidden;

	background-color:var(--off-white);
	border-radius:1em;
	transition: visibility 0s, opacity 0.5s linear;

}


/*swap image shows on hover using visibility */
.fprd .fprdimg .swap{
	position:absolute;
	opacity:0;
	transition: visibility 0s, opacity 1s linear;
}

.fprd .fprdimg .swap:hover{
	opacity:1;
	transition: visibility 0s, opacity 0.5s linear;

}

.fprd .fprdimg a {}

.fprd .fprdimg img {
	object-fit: cover;
	width: 100%;
	/*remove when we stop writing out inline styles - chase DH*/
	margin:0 !important;
}

.fprd .fprdimg img:hover {}

/* image flags
------------------------------------------------------- */
.fprdimg .flag{
	position:absolute;
}

.fprdimg .flag.newin,
.fprdimg .flag.newrel,
.fprdimg .flag.stkout{
	right:0;
	top:0;
	max-width:6em;
}

/* title
------------------------------------------------------- */
.fprd .fprdtitle, .fprd a.title {
	grid-area: title;
	text-align: center;
	align-self:center;
	color: var(--dark-blue);

}

.fprd .fprdtitle span,
.fprd a.title span{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
	font-family: var(--heading-font);
	font-weight:var(--heading-font-weight);

}

#sr.listview .fprd .fprdtitle {
	height: auto;
	text-align: left;
}

.fprd .fprdtitle a.lnk, .fprd a.title {
}

/* description - used for seo
------------------------------------------------------- */
.fprd .fprddescr {
	grid-area: description;
	display: none;
}

/* pricing structure
------------------------------------------------------- */
.fprd h6 {
	margin: 0;
	padding: 0;
}

.fprd h6 span {
	font-size: .625rem;
	display: inline;
	color: var(--text-sub-heading-color);
}

.fprd label {
	margin: 0;
	padding: 0;
	font-size: .725em;
	font-weight:500;
}

.fprd .rrp {}
.fprd .rrp label {}
.fprd .rrp h6 {}

.fprd .prevprice {
	grid-area: selling-price;
	margin-right:1em;
	text-align:right;
	padding: 0 1rem;
}

.fprd .prevprice label {}
.fprd .prevprice h6 {
	text-decoration: line-through;
}

.fprd .prevprice h6 span{
	display:none;
}

.fprd .price {
	grid-area: selling-price;
	text-align:center;
	
}
.fprd .price label {
display:none;
}

.fprd .price h6 {
	color:var(--light-blue);
}
.fprd .price h6 span {
	/* display:none; */
}

.fprd .trade {
	margin-top:.5em;
	margin-bottom:.5em;
	grid-area: trade-price;
	margin-left:.5em;
	align-self:center;
	font-size:1.25em;
}

.fprd .trade label {
	display:inline-block;
	margin-right:.25em;
	display:none;
}

.fprd .trade h6 {
	display:inline-block;
	font-weight: 700;
	color:var(--orange)
}

.fprd .trade h6 span {
	display:none;
}

.fprd .offer:not(.flag) {
	grid-area: selling-price;
	margin-left: 1rem;
}

.fprd .offer label {}

.fprd .offer h6 {
	color:var(--light-blue);
}

.fprd .offer h6 span {
	/* display:none; */
}

.fprd .saving {
	position:absolute;
	background-color:var(--orange);
}

.fprd .saving label {}
.fprd .saving h6 {}

/* pricebreaks 
------------------------------------------------------- */
.pricebreak {}

/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	grid-area: unit-price;
	text-align:center;
	border:1px solid var(--border-color);
}

.fprd .packsize {
	grid-area: packsize;
	text-align: left;
}

.fprd .packsize p {
	font-size: .725em;
}

.fprd .unit label {
	color: var(--text-sub-heading-color);
}

.fprd .unit h6 {
	color:var(--orange);
}
.fprd .unit h6 span {
	display:none;
}

.fprd .qty {
	grid-area: carton;
	margin-right: .5rem;
	text-align: center;
	border:1px solid var(--border-color);
	border-left:none;
	border-top-right-radius:2em;
	border-bottom-right-radius:2em;
	text-align:center;
}

.fprd .qty label {
	color: var(--text-sub-heading-color);
}

.fprd .qty h6 {
	color:var(--orange);
}

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref {
	grid-area: client-ref;
	padding:0 .5em;
	text-align: left;
	color: var(--orange);
	font-family: var(--heading-font);
	text-transform: capitalize;
	align-self:start;
}

.fprd .clientref span {}

.fprd .model, .fprd .clientref {
	margin: 0;
	font-weight: var(--heading-font-weight);
	font-size: small
}

.fprd .model span, .fprd .clientref span {
	font-size: small;
	display: inline-block;
	margin-right:.25em;
	font-weight: var(--text-font-weight);
}

.fprd .model {
	grid-area: model-number
}

/* brand
------------------------------------------------------- */
.fprd .brand{
	grid-area:brand;
	font-size:.725em;
	color:var(--grey);
}
.fprd .brand span{
	display:none;
}

/* Product flags
------------------------------------------------------- */
/* piflags are product specific flags, like made in uk, our top pick etc */

.piflags {}

/*flags may exist either within the image or as a separate element, position accordingly */
.fprdimg .piflags {
	position: absolute;
	width:100%;
	height:100%;
	pointer-events:none;
}

.fprdimg .piflags img{
	max-width:50%;
}

/*best seller */
.fprdimg .piflags .f2588672{
	position:absolute;
	bottom:0;
}

.fprdimg .piflags .f2588672 img{
	max-width:100%;
}

.fprdimg .piflags ul{
	padding-top:1em;
}

.f2555906,
.f2555910,
.f2555912,
.f2555904,
.f2555911,
.f2555907,
.f2523136,
.f2555909,
.f2555913,
.f2555905,
.f2555908,
.f2621440{
	display:none;
	
}

.fprd .piflags img[title="Encourages Colour Recognition"],
.fprd .piflags img[title="Encourages Discussion"],
.fprd .piflags img[title="Develops Hand Eye Coordination"],
.fprd .piflags img[title="Promotes Imaginative Play"],
.fprd .piflags img[title="Develops Knowledge and Understanding"],
.fprd .piflags img[title="Promotes Language and Literacy Skills"],
.fprd .piflags img[title="Develops Matching and Memory Skills"],
.fprd .piflags img[title="Develops Number and Counting Skills"],
.fprd .piflags img[title="Encourages Observational Skills"],
.fprd .piflags img[title="Develops Personal and Social Skills"],
.fprd .piflags img[title="Develops Shape and Matching Skills"],
.fprd .piflags img[title="Encourages Problem Solving"]{
}


/* quantity in basket - CAUTION not shown everywhere... 
------------------------------------------------------- */
.fprd .qtyInBskt {
	display: none;
}

/* more info and quickview button 
------------------------------------------------------ */
.fprdinfo {
	grid-area: fprdinfo;
	margin: 1rem;
}

/* quick view */
.fprd a.btn.qkvw {}
.fprd:hover a.qkvw {}
.fprdinfo a.qkvw:hover {}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-area: buy-pane;
	text-align: center;
}


.fprd form .stock{}

.fprd form .stock h6{
	font-size:.825em;
	color:var(--grey);
}

.fprd form select {}

.fprd form label {
	/*seems daft to display a label for an input that is obvious*/
	display: none;
}

.fprd button {
	display: inline-block;
	vertical-align: middle;
	border: 1px var(--off-white) solid;
	background-color: var(--grey);
	color: var(--black);
	border:1px solid var(--grey);

	padding: .5em .75em;
}

.fprd button.fpskuqtysub {
}

.fprd form input.inputtext {
	font-size:1rem;
	display: inline-block;
	vertical-align: middle;
	border-color:white;
	text-align: center;
	width:2em;
	padding:.5em 0
}

.fprd button.fpskuqtyadd {}

.fprd input.fpskuqty {
	display: inline-block;
	text-align: center;
	border-radius:0;
}

.fprd .submit {
	border: 1px var(--button-color) solid;
	background-color: var(--button-color);
	color: var(--button-text-color);
	/* font-size:.825em; */
	padding:.5em 1em
}

/* Email when in stock
------------------------------------------------------- */
.fprd .ewis {
	grid-area: buy-pane;
	align-self:end;
	margin: 0;
}

/* fprd adverts
------------------------------------------------------- */
.fprd.add {
	display: block;
	position: relative;
	padding:0;
}

.fprd.add .bnr {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fprd.add .bnr picture, .fprd.add .bnr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius:1em;
}

.fprd.add .toi {
	position: absolute;
	bottom: 0;
	color: var(--white);
	padding: var(--spacing);
}

.fprd.add p {
	color: var(--white);
}

/* -------------------------------------------------------------------------------------
=ProductPage 
------------------------------------------------------------------------------------- */
#pmid.page_buy {}

/*change of layout here */
#pmid.page_buy #pm.pmfull {
	width: 100%;
}

/* Product Panels 
------------------------------------------------------- */
#pi {
	margin: 0;
	padding: 0;
	padding-top:1em;
}

#pi .main {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	width: var(--site-max-width);
	display: grid;
	/* width set to assume 600px - use fr to scale
	
	calc by doing image size / (width - gap)*/
	grid-template-columns: 1fr 1fr;
	grid-template-columns:calc(50% - 4em) calc(50% - 4em);
	grid-template-areas:
		"top left"
		"top . "
		"bottom bottom";
	grid-column-gap: 8rem;
}

#pi .main .top {
	position:relative;
	grid-area: top;


}

#pi .main .left {
	grid-area: left;
	display:grid;
	grid-template-columns:auto  ;
	grid-template-areas:
	"product-title  "
	"product-price  "
	"feefo-widget "
	"product-strapline "
	"product-bullets "
	
	"product-buy-pane "
	"product-extra-description "
	"product-files "
	"product-tabbed-description ";
}

.nonmem #pi .main .left {
}
.nonmem #pi .pibuy + .pibuy{
	grid-area:membersignin;
	border-bottom:0;
}

#pi .main .right {
	grid-area: right;
}

#pi .main .bottom {
	grid-area: bottom;
}

/*same class used for a div outside of the main section */
#pi .main+.bottom {
	margin-top: 1rem;
	padding-top:1rem;
	margin:auto;
	/* background-color:var(--off-white); */
}

/* feefo review widget */
#pi #a137265152{
	max-width:var(--site-max-width);
	max-width:1140px;
	margin:auto;
	
}

#pi .brandmanu h5,
#pi .brandmanu h6{
	display:inline-block;
	margin:0;
	margin-right:.5em;
	font-size:.825em;
	color:var(--grey);
}

/* Model
------------------------------------------------------- */
#pi .brandmanu.model {
	grid-area:model;
	text-align:right;
}

/* Brand
------------------------------------------------------- */
#pi .brandmanu.brand {
	grid-area:brand;
}

#pi .brandmanu.brand h5{
	display:none;
}

#pi .brandmanu.brand p{
	margin:0;
}

/* Clientref
------------------------------------------------------- */
#pi .brandmanu.clientref {
	grid-area: client-ref;
}


/* Barcode
------------------------------------------------------- */
#pi .brandmanu.gtin {
	grid-area: barcode;
	text-align:right;
}

/* Barcode Inner
------------------------------------------------------- */
#pi .brandmanu.inner {
		grid-area: barcode-inner;
}

/* Barcode Outer
------------------------------------------------------- */
#pi .brandmanu.outer {
	grid-area: barcode-outer;
	background-color:var(--off-white);
	border:1px solid var(--border-color);
	border-left:0;
}

/* Product Title
------------------------------------------------------- */
#pi .pititle {
	grid-area: product-title;
	border-top:0;
	border-bottom:0;
	color:var(--dark-blue);

}

#pi .pititle h2{
	font-size:2.5em;
}

/* Strapline
------------------------------------------------------- */
h4.strap {
	grid-area: product-strapline;
	font-family:var(--text-font);
	font-weight:normal;
	font-size: 1.2em;
}

/* Gallery - now Swiffy
------------------------------------------------------- */
#pi .sticky {
	/* position:sticky; */
	top:0;
}

#pi .gallery {

}
#pi .gallery #mainimages{
	cursor:pointer;
}

#pi .gallery .slider-main {
	margin-bottom: 1rem;
}

#pi .gallery .slider-thumb {
	--swiffy-slider-item-count: 1;
	--swiffy-slider-item-ratio: 3/4;
	margin-bottom: 1rem;
}

#pi #mainimages .slider-nav {
	pointer-events: none;
}

#pi .gallery .slider-main .slider-indicators {
	display: none;
}

#pi .gallery #galleryimages {
	grid-area:thumbs;
	--swiffy-slider-item-count: 5;
	margin-top:2em;
}



#pi .gallery #galleryimages li img{
	aspect-ratio: 1/1;
	cursor:pointer;
}

#pi .gallery #galleryimages .video:after{
	font-family:var(--font-awesome);

	color:var(--white);
	content:"\f144";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	margin:auto;
	text-align:center;
	font-size:4em;
	pointer-events:none;
	
}

#pi .gallery #galleryimages .slider-indicators{
	display:none;
}

/*undo swiffy for this client */
#pi .gallery #galleryimages ul{/* display:block; */}

/*main gallery videos */
.youtubeplayercontainer>* {
	min-height: 20rem
}

.youtubeplayercontainer>* {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.youtubeplayercontainer>* {
	-o-object-fit: contain;
	object-fit: contain
}

#pi .gallery img {
	width: 100%;
	object-fit: cover;
	margin: auto 0 !important;
}

#pi .gallery h4 {
	display: none;
}

/*we don't want product flags showing here - should be controlled by a field in coms, we want the normal product flags like free shipping */
#pi .gallery .piflags {
	display: none;
}



/* Price Panel
------------------------------------------------------- */
.pricecomp{
	grid-area:product-price;
	color:var(--light-blue);

}
.pricecomp .price h6{
		font-size:1.5em;
}
.pricecomp .price label{
	display:none;
}

.pricecomp .prevprice,
.pricecomp .offer ,
.pricecomp .saving {
	display:inline-block;
	margin-right:1em;
}

.pricecomp .prevprice h6{
		font-size:1.5em;
	text-decoration:line-through;
}
.pricecomp .price label{
	display:none;
}


.pricecomp .offer h6{
	font-size:1.5em;
}
.pricecomp .price label{
	display:none;
}



.pricecomp .saving h6{
		font-size:1.5em;
}
.pricecomp .price label{
	display:none;
}
/* Buy Panel
------------------------------------------------------- */
#pi .pibuy {
	background-color:var(--off-white);
	border-radius:var(--border-radius);
	font-size:1.2em;
	padding:.5rem;
	grid-area: product-buy-pane;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:min-content;
	grid-template-areas:
		"buy-pane "
		"cutoff"
		"stock"
		"bspresponse"
		"save-for-later";
	align-items:center;
}


.nonmem #pi .pibuy{}

.nonmem #pi .pibuy #bspsubmit{}

.nonmem #pi .pibuy + .pibuy{
}

.pibuy label {
	display: block;
}

/* for some reasone we always show "price in..." */
.pibuy .title {
	display: none
}

#pi .pibuy h6 {
	display: inline-block;
	color:var(--orange);
	padding: 0;
	margin-bottom: 0;
}

#pi .pibuy  label{
	font-size:.725em;
}

/*normal price */
#pi .pibuy .price {
	grid-area: selling-price;
	display:none;
}

.nonmem #pi .pibuy .price {
}

/*offer price */
#pi .pibuy .offer {
	grid-area: sellingprice;
		display:none;
}

/*previous price (goes with offer) */
#pi .pibuy .prevprice {
	grid-area: prev-price;
		display:none;
}

#pi .pibuy .saving {
		display:none;
}

#pi .pibuy .prevprice h6 {
	text-decoration: line-through;
}

/*unit price */
#pi .pibuy .unit{
	grid-area:unit-price;
	text-align:center;
	border:1px solid var(--border-color);
}

#pi .pibuy .qty {
	grid-area:carton;
	text-align:center;
	border:1px solid var(--border-color);
	border-left:none;
	border-top-right-radius:2em;
	border-bottom-right-radius:2em;
}

#pi .pibuy .trade {
	grid-area:trade-price;
}

#pi .pibuy .trade label{
	display:inline-block;
	font-size:1rem;
}

/* Messages */

/*basket cutoff message? should have a class!*/
#pi .pibuy p {
	grid-area:cutoff;
	font-size:.825em;
	/* padding:1em 0; */
}


#pi .pibuy p.delmsg{
	color:var(--red);
}

#pi .pibuy p#bspresponse {
	grid-area: bspresponse;
	padding:0;
}

#pi .pibuy h4 {}
#pi .pibuy h5 {}

#pi .pibuy p.p_stock {}


/* stock */
#pi .pibuy .stock {
	grid-area:stock;
	/*being written out when not actually in use! */
	list-style:none;
	/* margin:1em 0; */
	font-size:.825em;
}


/*order cutoff timer? */
#pi .pibuy p.cutoff {
	color: var(--info-color);
}

#pi .pibuy p.cutoff::before {}

/* quantity in basket info */
#pi .pibuy .qtyInBskt {
	grid-area:quantity-in-basket;
	font-size:.825em;
	padding:1em 0;
}

/*dynamic price */
.dynprice {
	/*no need for this to be showing here now..*/
	display: none;
}

#bspsubmit{
	grid-area:save-for-later;
	font-size:.625em;
	margin-right:auto;
	background-color:var(--grey);
	border-color:var(--grey);
}

/* Buy Form
-------------------------------------------------------*/
#buy_form {
	grid-area: buy-pane;
	margin: 0;
}

/* attributes/sku select */
#buy_form .attr {}
#buy_form .attr .attrlabel {}

.attritem select {
	width: 100%
}

#buy_form select, #buy_form textarea {}

#buy_form select {
	font-size: 16px;
	max-width: 100%;
}

#pi .pibuy .attrqty {}

#pi .pibuy .attrqty label{
	display:none;
}

#pi .pibuy .attrqty .submit#buy {
	display: inline-block;
	vertical-align: middle;
	margin-bottom:1rem;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--yellow);
	color: var(--dark-blue);
	border: 1px solid var(--yellow);
	outline: none;
	padding: var(--half-spacing) 1em;
}

#pi .pibuy .attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
	margin-right:1rem;
	margin-bottom:1rem;
	
}

#pi .pibuy .attrqty .qtyinput button{
	-webkit-appearance: none;
	background-color:var(--light-blue);
	color:var(--white);

	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: 2em;
	
	border:1px solid var(--light-blue);
	border-radius:var(--border-radius);
}

#pi .pibuy .attrqty #skuqty{
	border-radius:var(--border-radius);
	text-align:center;
	font-size:1em;
	margin:.5em;	
}

#pi .pibuy .attrqty .submit#buy.hideAttr {
	display: none;
}

/* giftwrap */
.giftwraptext{
	position:relative;
}

.hidegwgifttext{
	display:none;
}

.giftwrap{}

.giftwrap li{
	display:grid;
	grid-template-columns:1em 1fr;
	align-items:center;
	margin-bottom:.5em;
}

#pm .giftwrap label{
	font-size:1em;
	display:inline-block;
	margin-left:.5em;
	
}

.giftwrap ul{
	list-style:none;
}



.giftwraptext textarea{
	width:100%;
	height:4em;
	resize:none;
	border-radius:var(--border-radius);
}

.giftwraptext .chars{
	display:block;
	font-size:.6em;
}

/* Sample request 
-------------------------------------------------------*/
#pi .pibuy #smplreq {
	grid-area: sample;
	display: inline-block;
	width:200px;
}

/* message if no option selected*/
#pi .pibuy label#selectResponse {
	color: var(--error-color);
	grid-column: 1/-1;
	display: none;
}

/* Descriptions
-------------------------------------------------------*/
#pi .pidesc {
	grid-area: product-description;

	border:1px solid var(--border-color);
	border-top:0;
	border-bottom:0;
	padding: 0 1em;
}

/*duplicated product title auto written out in the description */

#pi .pidesc h2[itemprop="name"] {
	display: none;
}

/* Extra Descriptions
-------------------------------------------------------*/
.pidescx{
	grid-area: product-extra-description;
	padding: 1.5em 0;
}


.pidescx ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	text-align:center;
}


.pidescx li{
	list-style:none;
	font-family:var(--heading-font);
	color:var(--dark-blue);
	border-right:2px var(--light-blue) solid;
	font-size:1.5em;
	align-self:center;
	padding:.5em;
}

.pidescx li:last-child{
	border:none;
}

.pidescx li span{
	margin-right:.5em;
	font-family:var(--text-font);
}


.pidescx  br{
	display:none;
}


/* Product leadtime
-------------------------------------------------------*/
#pi .pidesc.desp {
	grid-area: product-leadtime;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
}

#pi .pidesc.desp span {
	display: none;
}

#pi .pidesc.desp h5 {
	grid-area: icon;
	display: none;
}

#pi .pidesc.desp p {
	grid-area: text;
	margin: 0;
	font-size: .825rem;
}

/* Product specific delivery info
-------------------------------------------------------*/
#pi .delivery {
	grid-area: product-delivery;
}

/* Bullets
-------------------------------------------------------*/
#pi .bullets {
	grid-area: product-bullets;
	font-size:1.2em;
	/* list-style-position:inside; */
	padding:0 1em;
	margin-bottom:1em;
}

/* Links
-------------------------------------------------------*/
#pi .pilinks {
	grid-area: product-links;
	padding:1em 0;
	font-size:.825em;
}

#pi .pilinks li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

#pi .pilinks ul li.query a.lnk {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}

#pi .pilinks ul li.query a.lnk:before {
	font-family: var(--font-awesome);
	font-weight: var(--heading-font-weight);
	margin-right: .5em;
	font-size: 1em;
	display: inline-block;
	content: '\f059';
}

/* reviews widget 
------------------------------------------------------- */
.reviewsiosmallsummarypanel {
	text-align: left;
}

.reviewsiosmallsummarypanel .title {
	display: none;
}

.reviewsiosmallsummarypanel .stars {
	display: inline-block;
	margin-right: .5rem;
}

.reviewsiosmallsummarypanel .stars img {
	display: inline-block
}

.reviewsiosmallsummarypanel .ratingNumber {
	display: inline-block;
	margin-right: .5rem;
	color: var(--grey)
}

.reviewsiosmallsummarypanel .ratingNumber div {
	display: inline-block;
}

.reviewsiosmallsummarypanel .reviewCount {
	display: inline-block;
	margin-right: .5rem;
	font-size: .725rem;
}

/* reviews.io tab content 
-------------------------------------------------------*/
.reviewsio {}

.reviewsio div[itemprop="review"] {
	border-bottom: 1px solid var(--border-color);
	padding: 1rem 0;
}

.reviewsio .comment {
	margin-bottom: .5rem;
}

.reviewsio .customer {
	font-size: .825rem;
}

.reviewsio .date {
	color: var(--grey);
	font-size: .725rem;
}

.reviewsio div[itemprop="review"]:last-child {
	border-bottom: 0;
}

/* video - use new product gallery insteada!
-------------------------------------------------------*/
/* video - use new product gallery insteada!
-------------------------------------------------------*/
#pi .youtube {
	margin-top:2em;
	grid-area: product-video;
	background-color:var(--light-blue);
	align-content:center;
	align-items:center;
	border-radius:1em;
	padding:1em;
}

#pi .youtube .title{
	display:none;
}

#pi .youtube li{
	display:block;
}

/* Flags (site flags like offer) - would be better if these were inside the gallery - they won't be sticky either unless moved
-------------------------------------------------------*/
#pi .flags {}

#pi .flags .newin{
	position:absolute;
	right:0;
	top:0;
	max-width:150px;
}

#pi .flags .packsize img {
	display: inline-block;
	padding-right: .5rem;
	vertical-align: middle;
}

#pi .flags .packsize p {
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	color: var(--text-heading-color);
}

/* Product flags
-------------------------------------------------------*/
#pi  .piflags {
	grid-area: product-piflags;
}

#pi  .piflags h3{
	font-family:var(--text-font);
	font-size: 1em;
	display:none;
}

#pi .piflags li {
	display: grid;
	grid-template-columns: 3.5em 1fr;
	grid-template-areas: "icon text";
	align-items:center;
	grid-gap: var(--spacing);
	padding: 1rem;
	border-radius: var(--border-radius);
}

#pi  .piflags li img {
	grid-area: icon;
}

#pi  .piflags li span {
	grid-area: text;
	font-family:var(--heading-font);
}

/* nasty hack to hide the flags we dont want showing*/


#pi  .piflags  img[title="Best Seller" i],
#pi  .piflags  img[title="Best Seller" i] + span,

#pi  .piflags  img[title="2 Games in 1" i],
#pi  .piflags  img[title="2 Games in 1" i] + span,

#pi  .piflags  img[title="2 Ways to Play" i],
#pi  .piflags  img[title="2 Ways to Play" i] + span,

#pi  .piflags  img[title="3 games in 1" i] ,
#pi  .piflags  img[title="3 games in 1" i] + span,

#pi  .piflags  img[title="4 ways to play" i],
#pi  .piflags  img[title="4 ways to play" i] + span,

#pi  .piflags  img[title="Classic" i],
#pi  .piflags  img[title="ClaSsic" i] + span,

#pi  .piflags  img[title="Includes activity guide" i],
#pi  .piflags  img[title="Includes activity guide" i] + span,


#pi  .piflags  img[title="poster included" i],
#pi  .piflags  img[title="poster included" i] + span,

#pi  .piflags  img[title="race against time!" i],
#pi  .piflags  img[title="race against time!" i] + span,

#pi  .piflags  img[title="3 ways to play" i],
#pi  .piflags  img[title="3 ways to play" i] + span,

#pi  .piflags  img[title="Double Sided" i],
#pi  .piflags  img[title="Double Sided" i] + span,

#pi  .piflags  img[title="No. 1 Bestseller" i],
#pi  .piflags  img[title="No. 1 Bestseller" i] + span,


#pi  .piflags  img[title="Includes free app" i],
#pi  .piflags  img[title="Includes free app" i] + span
{
	display:none
}



/* Next Day Delivery Countdown
-------------------------------------------------------*/
#pi #ordercutofftime {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

#pi #ordercutofftime img {
	grid-area: icon;
}

#pi #ordercutofftime .countdown {
	grid-area: text;
	font-size: .825rem;
}

#pi #ordercutofftime .countdown span {}

/* Product Files
-------------------------------------------------------*/
#pi .pifile {
	grid-area: product-files;
	text-align:center;
	padding-bottom:1.5em;
	
}

#pi .pifile li{
	list-style:none;
	display:inline-block;
	margin:.5em;
}

/* Product Departments
-------------------------------------------------------*/
#pi .alldepts {
	grid-area: product-departments;
}

#pi .alldepts a {
	display: inline-block;
	padding: var(--spacing);
	border: 1px solid var(--border-color);
	background-color: var(--navbar-tab-color);
	margin: var(--half-spacing);
}

/* Product PDL Article - could do with a class otherwise it will break other article used in places like the tabbed description
-------------------------------------------------------*/
#pi .art {
	grid-area: product-article;
}

/* Tabbed Descriptions
-------------------------------------------------------*/
#pi .pi_tab, #pi #pi_wrapper {
	grid-area: product-tabbed-description;
	margin:1em 0;
}

#pi ul.pi_tabs {
	cursor: pointer;
	margin: 0;
	padding: 0;
}

#pi ul.pi_tabs li {
	list-style: none;
	margin: 0;
	padding: 1em 4em;
	text-align: center;
	color: var(--text-color-light);
	border: 1px solid var(--border-color);
	border-bottom:0;
	display:inline-block;
	position: relative;
	top: 1px;
	
}

/*remove left border for touching tabs*/
#pi ul.pi_tabs li + li {
	border-left:0;
}

#pi ul.pi_tabs li.selected {
	border: 1px var(--border-color) solid;
	border-bottom: 1px var(--off-white) solid;
	background-color:var(--off-white);
}

#pi ul.pi_tabs li:last-child {}

#pi .pi_tab_content {
	margin: auto;
	padding: 1rem;
	background-color:var(--off-white);
	border: 1px var(--border-color) solid;
	max-height:300px;
	overflow-y:scroll;
}

/* accordion description (uses tabbed element)
------------------------------------------------------*/
#pi .pi_accordion{
	grid-area:product-tabbed-description;
}

#pi .pi_accordion .piflags ul{
	/* outline:1px red solid; */
	display:block;
	margin-left:0;
}


/* Feefo reviews - summary
------------------------------------------------------*/

.feefosmallsummarypanel {
}

.feefosmallsummarypanel .title {
    display: none
}

.feefosmallsummarypanel .stars {
    margin-left: .5em
}

.feefosmallsummarypanel .stars img {
    display: inline-block;
    width: 1em
}

.feefosmallsummarypanel .reviewCount,.feefosmallsummarypanel .ratingNumber {
    display: inline-block;
    margin: .5em
}

.feefosmallsummarypanel .ratingNumber {
    display: none
}


/* Feefo reviews - summary
------------------------------------------------------*/
.feeforeviews {}

.feeforeviews .feefosummary {
	display:grid;
	grid-template-areas:"title stars" 
		"title ratingNumber";
	grid-template-columns:1fr 120px;
}

.feeforeviews .feefosummary span.title {
	font-family: var(--heading-font);
	font-weight:normal;
	color:var(--dark-blue);
	font-size:1.5em;
}

.feeforeviews .feefosummary span.stars {
	grid-area:stars;
}

.feeforeviews .feefosummary img {
    display: inline-block;
    width: 1.5em
}

.feeforeviews .feefosummary span.ratingNumber {
	grid-area:ratingNumber;
	text-align:right;
	font-size: 1em;
	display:inline-block;
}

.feeforeviews .feefosummary .ratingCount {
    font-size: .825em;
    margin-left: 1em
}

ul.accordion .feeforeviews ul.feefo {
    margin:0;
	margin-left:0;
}

.feeforeviews ul.feefo li {
    display: grid;
	grid-template-areas:"stars"
		"review"
		"reviewdate"
		"reply";
    margin: 0;
    padding-top:.5em;
    border-bottom: 2px var(--light-blue-alpha) solid;
}

.feeforeviews ul.feefo li:last-child {
    border: none
}

.feeforeviews ul.feefo li .rating {
	grid-area:stars;
}

.feeforeviews ul.feefo li .rating img{
	display:inline-block;
    width: 1em;
    height: auto
}

.feeforeviews ul.feefo li p.comment {
	grid-area:review;
	font-size:1em;
	margin:0;
}

.feeforeviews ul.feefo li p.date {
	grid-area:reviewdate;
    display: block;
    font-size: .8em;
	margin-right:auto;
	text-align:left;
}

.feeforeviews .feefofooter {
    font-size: .8em
}

.feeforeviews .reply{
	grid-area:reply;
	background-color:var(--light-blue-alpha);
	border-radius:var(--border-radius);
	padding:1em;
	margin:1em;
}

.feeforeviews ul.feefo li p.replycomment{
	font-size: .8em;
	margin:0;
}

.feeforeviews ul.feefo li p.replydate{
	font-size:.725em;
	margin:0;
	text-align:right;
}



/* Associated Products - option to also buy these at the same time
------------------------------------------------------*/
#pi .pass{
	width:var(--site-max-width);
	margin:auto;
	grid-area: product-recommended;
	margin-top: 1rem;
}

#pi .pass h3.header{
	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	font-size:2em;
	padding:.5rem 0
}

#pi .pass .fprd{
	border:0;
	margin-bottom:1rem;
	/* grid-template-rows:auto; */
	border: 2px var(--border-color) solid;
}

#pi .pass .fprd form,
#pi .pass .fprd .brand,
#pi .pass .fprd label,
#pi .pass .fprd h6 span{
	display:none;
}
/* Recommended Products - option to also buy these at the same time
------------------------------------------------------*/
#pi .prec {
	width:var(--site-max-width);
	margin:auto;
	grid-area: product-recommended;
	margin-top: 1rem;
}

#pi .prec h3.header{
	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	padding:1rem 0
}

/*recomended products */
.slider-rec {}

#pi .prec .fprd{
	border:4px solid var(--light-blue);
	border-radius:var(--border-radius);
}

#pi .prec h3 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
}

/* Related
------------------------------------------------------*/
#pi .prel {
	width:var(--site-max-width);
	margin:auto;
	grid-area: product-recommended;
	margin-top: 1rem;
}

#pi .prel h3.header{
	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	padding:1rem 0
}

/*recomended products */
.slider-rec {}

#pi .prel .fprd{
	/* background-color:var(--white); */
}

#pi .prel h3 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
}

/* -------------------------------------------------------------------------------------
=Super Attributes 
------------------------------------------------------------------------------------- */
.cls_superattrribute.hideAttr  {}
.sacontainerpanel {
	/*hack for gift wrap helper */
	display:none;
}
.sacontainerpanel ul, .sacontainerpanel li  {}

/* Defaults
------------------------------------------------------- */
/*validator messages */
.sa_validator {
	color: var(--error-color);
}

/*this needs a code review - be dealt with in a standard message way like add to basket popups etc */
/*currently displays if you can't make that blind - and is a different message to if you put in measurements outside of the limits, try using max width and drop of blind to demo*/
.cls_superattrribute #sa_pnl_product_not_found  {}
/*help icon */
.cls_superattrribute img[id^="help"] {}

/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */
.attributeTypePrice_Matrix_Calculator  {}
.attributeTypePrice_Matrix_Calculator #saten_pnl_show  {}
.attributeTypePrice_Matrix_Calculator .att_container  {}
.attributeTypePrice_Matrix_Calculator .att_header {}
.attributeTypePrice_Matrix_Calculator label  {}
.att_X, .att_Y  {}
.att_X label, .att_Y label  {}
.att_X  {}
.att_X label:after {}
.att_Y {}
.att_Y label:after  {}
.att_X input::-webkit-outer-spin-button, .att_X input::-webkit-inner-spin-button, .att_Y input::-webkit-outer-spin-button, .att_Y input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0;
	/* <-- Apparently some margin are still there even though it's hidden */
}
.att_X input[type=number], .att_Y input[type=number] {
	-moz-appearance: textfield;
	/* Firefox */
}

.sa_error  {}
/*should be the measure in cm/inch/mm control - currently not displaying as there are no choices yet we still may be writing it out*/
.attributeTypePrice_Matrix_Calculator .att_measure  {}
.attributeTypePrice_Matrix_Calculator .calc_price {}
.attributeTypePrice_Matrix_Calculator .calc_price .submit  {}
/*the widths on these are not nice - need making better !*/
.attributeTypePrice_Matrix_Calculator input.inputtext_short {}
.attributeTypePrice_Matrix_Calculator .calc_price .submit {}

/* attributeTypeDimensions 
***************************************************************/
.attributeTypeDimensions {}
.attributeTypeDimensions .attrContainer {}
.attributeTypeDimensions .sa_name {}
.attributeTypeDimensions .width, .attributeTypeDimensions .drop {}
.attributeTypeDimensions .width .sa_name, .attributeTypeDimensions .drop .sa_name {}
.attributeTypeDimensions .width span, .attributeTypeDimensions .drop span {}
.cls_superattrribute.attributeTypeDimensions img[id^="help"] {}
.attributeTypeDimensions .submit {}

/* attributeTypeRadio_button
***************************************************************/
.attributeTypeRadio_button {}
.attributeTypeRadio_button .radioholder {}
.attributeTypeRadio_button .radioholder label {}

/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.attributeTypeText_Box_Free_Text_Entry {}
.attributeTypeText_Box_Free_Text_Entry .inputtext {}
.attributeTypeText_Box_Free_Text_Entry .attrContainer>div:first-of-type  {}

/*attributeTypeDrop_down_list
***************************************************************/
.attributeTypeDrop_down_list  {}
/*hack to do with validator text placeholder */
.attributeTypeDrop_down_list div {
	line-height: 0;
}

.attributeTypeDrop_down_list div label {
	line-height: 1;
}
/* end hack*/
.attributeTypeDrop_down_list select  {}
.sa_pnl_product_popup_image_show {}

/*attributeTypeSingle_Image_Upload 
***************************************************************/
.attributeTypeSingle_Image_Upload  {}
.attributeTypeSingle_Image_Upload .attrContainer  {}
.attributeTypeSingle_Image_Upload .attrContainer label  {}
/*delete image */
.attributeTypeSingle_Image_Upload .siup_triggerdel {}
/*should be the file uploader*/
.attributeTypeSingle_Image_Upload input {}
.attributeTypeSingle_Image_Upload .progress {}
/*should be the uploaded image */
.cls_superattrribute.attributeTypeSingle_Image_Upload div[id^="siup"]  {}

/* -------------------------------------------------------------------------------------
=Basket
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	display: grid;
	grid-template-columns: 6fr 3fr;
	grid-gap: 0;
	grid-column-gap: 2em;
	grid-template-areas: "breadcrumb breadcrumb"
		"header header"
		"lines totals"
		"lines voucher"
		"lines shipping"
		"lines buttons"
		"lines ."
		"shippingdisclaimer shippingdisclaimer"
		"prompane prompane"
	;
	align-items: start;
	margin-bottom: 4rem;
}


#pm .bskt .carousel{
	grid-area:prompane;
	max-width:calc(100vw - 2em)
}

#a89194496{
	grid-area:shippingdisclaimer;
	padding:1em;
	text-align:center;
}
#pm .bskt form {
	margin: 0 auto;
	padding: 0;
}

/* if basket is empty and user is in it */
.bskt .empty {
	grid-area:header;
	text-align:center;
	margin:2em;
}
.bskt .empty .header {}
.bskt .empty .total {}

/* Checkout Breadcrumb
------------------------------------------------------- */
.chkcrumb {
	grid-area: breadcrumb;
}

/* Basket header
------------------------------------------------------- */
#pm .bskt .header {
	grid-area: header;
}

/*we don't want the image here, but it may be used for something else */
#pm .bskt .header .icon{
	display:none;
}

#pm .bskt .header .title {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

#pm .bskt .header .title span {
	font-size: 1rem;
	font-weight: normal;
	color: var(--grey);
	display:none;
}

/* Basket Lines
------------------------------------------------------- */
#pm .bskt .alllines {
	grid-area: lines;
	padding-right: 1rem;
	overflow-y: auto;
}

#pm .bskt .line {
	padding-bottom: var(--spacing);
	margin-bottom: var(--spacing);
	align-items: start;
	display: grid;
	--image-width: 6rem;
	--description-width: 1fr;
	--qty-width: auto;
	--netprice-width: auto;
	--rem-width: auto;
	--total-width: 100px;
	grid-template-columns: var(--image-width) var(--description-width) var(--qty-width)  var(--total-width) var(--rem-width);
	grid-template-areas: "icon desc qty price rem"
						"icon giftwrap qty price rem"
						"icon gifttext qty price rem"
						"icon gtentry qty price rem"
						 "icon skuselect . . . "
	
	"icon . . . .";
	border-bottom: 1px solid var(--border-color);
	grid-column-gap: 1rem;
}

/* Image */
#pm .bskt .line .prodimg {
	grid-area: icon;
	align-self:start;
}

#pm .bskt .line .prodimg img {
	margin: 0 !important;;
}

/* Product Info - in list form */
#pm .bskt .line .prodinfo {
	grid-area: desc;
	margin: 0;
	padding: 0;
}

#pm .bskt .line .prodinfo .surcharge {
}

#pm .bskt .line .prodinfo li {
	list-style: none;
	font-size: .725rem;
	margin-left:.5em
}

#pm .bskt .line .prodinfo li img {
	margin: 0;
	max-width: 250px
}

#pm .bskt .line .prodinfo li.descr {
	margin-left: 0;
	font-size: initial;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	/* margin-bottom: var(--half-spacing); */
}

#pm .bskt .line .prodinfo li.lead {
	color: var(--info-color);
	font-weight: bolder;
}

#pm .bskt .line .prodinfo li.lead {
	color: var(--text-color);
	font-style: italic;
	font-weight: normal;
	margin: .5rem 0;
}

#pm .bskt .line .prodinfo li.lead span {
	display: inline-block;
	color: var(--orange);
	font-style: normal;
	border: 1px var(--orange) solid;
	padding: .25rem;
	margin-right: .5rem;
}

#pm .bskt .line .prodinfo li.lead span:before {
	font-family: var(--font-awesome);
	content: "\f00c";
	display: inline-block;
	font-size: 1em;
	margin-right: 1em;
}

/*product quantity */
#pm .bskt .lines .line .qty {
	grid-area: qty;
	align-self: center;
}
#pm .bskt .lines .line .netprice {
	grid-area: netprice;
	font-size:.725em;
	margin-left:.5em
}



#pm .bskt .lines .line .qty form {
	line-height: 1;
}

#pm .bskt .lines .line .qty label,
#pm .bskt .lines .line .qty #update{
	display:none;
}

#pm .bskt .lines .line .qty button {
	-webkit-appearance: none;
	background-color:var(--light-blue);
	color:var(--white);

	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: 2em;
	
	border:1px solid var(--light-blue);
	border-radius:var(--border-radius);
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
}

#pm .bskt .lines .line .qty button.skuqtybsktadd {
}

#pm .bskt .lines .line .qty input.inputtext {
	text-align: center;
	border-radius:var(--border-radius);
	text-align:center;
	font-size:1em;
	margin:.5em;
}

/* remove item */
#pm .bskt .line .rem {
	grid-area: rem;
	text-align: center;
	align-self: center;
}

#pm .bskt .line .rem input {
	font-family: var(--font-awesome);
	color: var(--grey);
	background-color: transparent;
	border: none;
	font-weight: 400;
}

/* if product is multi sku then show this in the same area as the quantity update */
#pm .bskt .lines .line .skuselect {
	grid-area: skuselect;
	align-self: end;
}

#pm .bskt .lines .line .skuselect select {
	margin: 0;
	font-size: small;
	width: auto;
}

/* remove item */
#pm .bskt .line .price {
	grid-area: price;
	text-align: center;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	align-self: center;
}

/* out of stock messages */
.oos {
	color: var(--error-color);
}



#pm .bskt  .gifttext{
	grid-area:gifttext;
	font-size:.725em;
		margin-left:.5em;
	display:none;
}

#pm .bskt  .gifttext a{
	text-decoration:underline;
	padding:0 .5em
}

#pm .bskt  .giftwrap{
	grid-area:giftwrap;
	font-size:.725em;
		margin-left:.5em;
		display:none;
}

#pm .bskt  .giftwrap a{
	text-decoration:underline;
	padding:0 .5em
}

.gtentry{
	grid-area:gtentry;
	
}

.gtentry li{
	display:block;
}

.gtentry .chars{
	font-size:.725em;
}

/* Basket Sample Lines
------------------------------------------------------- */
#pm .bskt .lines.sample {
	grid-area: samples;
}

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal {
	/*why display this... we have this info in the totals area... */
	display: none;
	grid-area: basket-sub-total;
	text-align: right;
	font-size: 1.25em;
	margin-bottom: var(--spacing);
}

.prodsubtotal label {}

.prodsubtotal span {}

/* Delivery info
------------------------------------------------------- */
/* for free delivery messages */
#pm .bskt .header.freedel {
	grid-area: freedelivery;
	text-transform: none;
	font-size: 1em;
	padding: 0;
	display:none;
}

.header.delivery {
	/*doesn't exist but should be on the actual delivery header */
}

/* Shipping 
------------------------------------------------------- */
.shipping {
	grid-area: shipping;
	background-color: var(--off-white);
	padding: 1rem;
	text-align:left;
}

.shipping select{
	grid-column:1/-1;
}

/* because the class is used elswhere */
#site.shipping{
	padding:0;
}

.shipping .title{
	/* text-align:left; */
}

.shipping ul {
	margin: 0;
	padding: 0;
}

.shipping li{
	list-style:none;
	text-align:center;
}

.shipping li .delmsg{
	text-align:center;
	font-weight:bold;
	color:var(--red);
}

/*think these should be a header */
.shipping li.delivery .address{
	display:none;
}

.shipping ul li.ship {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: var(--half-spacing);
	display: grid;
	grid-template-columns: 4em 1fr;
}

.shipping ul li.ship input {
	margin: 0;
	padding: 0;
	margin-right: auto;
	font-size: 2em;
	-ms-transform: scale(1.5);
	/* IE 9 */
	-webkit-transform: scale(1.5);
	/* Chrome, Safari, Opera */
	transform: scale(1.5);
}

.shipping ul li.ship label {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 100px;
	font-weight: normal;
}

.shipping ul li.ship input[type="radio"]:checked+label {
}

.shipping ul li.ship label span {
	margin-left: var(--half-spacing);
	text-align: right;
}

.shipping ul li.delivery.deliveryto form{
	display: grid;
	grid-template-columns: 1fr 100px;
	grid-gap:1em;
	grid-template-areas: "title title"
		"postcode locate"
		"country country"
		"address options";
}


.shipping ul li.delivery.deliveryto form span{
	grid-area:title;
	text-align:center;
	display:none;
		text-align:left;
}

.shipping ul li.delivery.deliveryto form input.postcode{
	grid-area:postcode;
}

#countryid{
	grid-area:country;
}


.shipping ul li.delivery.deliveryto form .ship_edit{
	grid-area:country;
	text-align:center;
}

/*if only one country we show the country as a span - a bit redundant so hidden */
.shipping .delivery.deliveryto form span {}

.shipping ul li.delivery.collectstore {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "title title" "location location" "address options";
}

.shipping ul li.delivery.collectstore label {
	grid-area: title;
}

.shipping ul li.delivery.collectstore form {
	grid-area: location
}

.shipping ul li.delivery.collectstore.info:before {
	display: none;
}

.shipping ul li.delivery.collectstore p {
	padding: 0;
	margin: 0;
}

.shipping ul li.delivery.collectstore .address {
	margin-left: var(--spacing);
	font-size: small;
}

/*better code structure needed - is just a p if only one option is available*/
.shipping ul li.delivery.collectstore #serviceid, .shipping ul li.delivery.collectstore .address+p {
	grid-area: options;
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals {

	/*if we could move the basket actions (payment buttons, vouchers, surcharge) into the same div as the basket totals 
	we could go sticky */
	grid-area: totals;
	text-align: center;
	padding: var(--spacing);
	display: grid;
	grid-template-columns:1fr;
	background-color:var(--off-white);
}

.bskttotals .total {
	margin: 0 2rem;
	text-align:left;
	display: grid;
	grid-template-areas: "label total";
	font-family:var(--heading-font);
}


.bskttotals .total label {
	grid-area:label;
}

.bskttotals .total span {
	grid-area:total;
	margin-bottom: var(--half-spacing);
	text-align: right;
}

.bskttotals .subtotal {
	margin: 0 2rem;
	display: grid;
	grid-template-areas: "label total"
}

.bskttotals .subtotal label {
	display: block;
	grid-area: label;
	text-align: left;
}

.bskttotals .subtotal span {
	display: block;
	grid-area: total;
	text-align: right;
}

/* Vouchers
------------------------------------------------------- */
.vouchentryaccord {
	grid-area: voucher;
	background-color: var(--off-white);
	padding: 0 1rem;
	text-align: center;
}
.vouchentryaccord #mess{
	margin:0;
}

.vouchentryaccord ul, .vouchentry ul {
	list-style: none;
}

.vouchentryaccord li, .vouchentry li {
	list-style: none;
}

.vouchentryaccord li.pane {
	display: none;
}

#pm .bskt .vouchentryaccord .header {
	font-size: 1rem;
	border: none;
	border: 0;
	padding: 0;
	font-size: .825rem;
	text-decoration: underline;
	align-items:center;
	border:2px solid var(--blue);
	background-color:var(--white);
	color:var(--blue);
	padding:1em;
}

#pm .bskt  .accordion .header.current {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom:0;
}

.vouchentryaccord .header img {
	width:1.5em;
}

#pm .ul.accordion .vouchentryaccord .pane, #pm .bskt ul.accordion .pane {
	padding: 1em;
	padding-top:0;
	display: none;
	background-color:var(--white);
	border:2px solid var(--blue);
	border-bottom-left-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
	border-top:0;
}

#pm .bskt ul.accordion li.pane ul {
	margin: 0;
}

.vouchentry ul.vouch {
	margin: 0;
	padding: 0;
	display: grid;
	grid-row-gap: .5em;
	grid-gap:1em;
	grid-template-columns: 1fr 100px;
	grid-template-areas: "code submit"
}

.vouchentry .appliedpromovoucher {
	/* margin-top:1em; */
	padding: var(--half-spacing) var(--half-spacing);
	font-size: .725rem;;
}

.vouchentry .remove a {
	display: block;
	background-color: var(--orange);
	border-color: var(--orange);
	font-size: .725rem;
}

.remove input {
	width: 100%;
	display: block;
}

.vouchentry ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vouchentry ul li.info {
	grid-area: title;
	/*due to duplicate title when voucher applied */
	display: none;
}

.vouchentry ul li.vouchentry {
	grid-area: code;
}

.vouchentry ul li.vouchentry input {
	width: 100%;
	font-size:.725em;
}

.vouchentry .submit {
	grid-area: submit;
	background-color: var(--yellow);
	border-color: var(--yellow);
	/* margin-left: .5rem; */
	font-size:.725em;
}

/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons {
	grid-area: buttons;
	text-align: center;
	padding: var(--spacing);
	background-color:var(--off-white);
	margin-bottom: 1rem;
}

.bsktbuttons .startcheckout {
	grid-area: pay;
	margin-bottom: .5em;

}

.bsktbuttons .startcheckout  a{
	color:var(--white);
		background-color:var(--green);
	border:1px solid var(--green);
}

.bsktbuttons .startcheckout a:before {
	content: "\f023";
	font-family: var(--font-awesome);
	margin-right: 1rem;
}

.bsktbuttons .startcheckoutcollect {
	grid-area: collect;
	margin-bottom: .5em;
}

.bsktbuttons .startcheckout a.btn {
	display: block;
}

.bsktbuttons .clear {
	grid-area: empty;
}

.bsktbuttons .clear a.btn {
	display: block;
	margin-top: 1em;
}

.bsktbuttons .cont {
	grid-area: continue;
	display: none;
}

.bsktbuttons .cont a.btn {
	display: block;
	font-size: .825rem;
	border: 2px var(--button-color) solid;
	background-color: transparent;
	color: var(--button-color);
}

#pm .bsktbuttons .art {
	margin-top: 1em;
	grid-area: logos;
}

#pm .bsktbuttons .art .imgcont {
	display: inline-block;
	margin: .5rem;
}

#pm .bsktbuttons .art .imgcont img {
	max-width: 64px;
}

#pm .bsktbuttons .art .imgcont img[alt="PayPal Pay in 3"] {
	max-width: 100%;
}

.bsktbuttons .art h4 {
	font-family: var(--headingFont);
	font-size: 1em;
	text-transform: capitalize;
}

/*promo content on basket - awful layout - why is this a ul?*/

#pm ul.prompane {
	grid-area: prompane;
	list-style: none;
	grid-gap: 0;
	grid-column-gap: 4em;
	margin: 0;
}

#pm ul.prompane li i {
	grid-area: icon;
	color: var(--orange)
}

#pm ul.prompane li span {
	grid-area: text;
	font-size: .825rem
}

/* delivery messages*/
.stddelinfo {
	grid-area: standarddelivery;
}

.priordelinfo {
	grid-area: prioritydelivery;
}

.priordelinfo, .stddelinfo {
	display: grid;
	border-radius: var(--border-radius);
	background-color: var(--off-white);
	padding: var(--spacing);
	margin-bottom: 1rem;
	grid-template-areas: "icon message price" "icon details .";
	grid-template-columns: 4rem 1fr 5rem;
	grid-column-gap: 2rem;
}

.priordelinfo img, .stddelinfo img {
	grid-area: icon;
}

.priordelinfo h4, .stddelinfo h4 {
	grid-area: message;
	margin: 0;
}

.priordelinfo h5, .stddelinfo h5 {
	grid-area: details;
	margin: 0;
}

.priordelinfo p, .stddelinfo p {
	grid-area: price;
	margin: 0;
}

.ordertimer {
	font-size: .825rem;
}

#pm ul.prompane .returns {
	display: grid;
	grid-template-areas: "icon message ." "icon details . ";
	grid-template-columns: 4rem 1fr auto;
	grid-column-gap: 2rem;
	align-items: center;
}

#pm ul.prompane .returns img {
	grid-area: icon;
}

#pm ul.prompane .returns h4 {
	grid-area: message;
	margin: 0;
}

#pm ul.prompane .returns h5 {
	grid-area: details;
	margin: 0;
	font-family: var(--text-font);
	font-size: .825rem
}

/* -------------------------------------------------------------------------------------
=Checkout Process
------------------------------------------------------------------------------------- */
#pt.checkouttop .ext {
	--breadcrumb-width: 1fr;
		--spacerwidth: calc((100% - var(--site-max-width)) / 2);
	grid-template-columns: var(--spacerwidth) 1fr var(--breadcrumb-width) var(--spacerwidth);
	grid-template-areas: ". logo breadcrumb .";
	
}

#pt.checkouttop .ext .pane {
	grid-area: breadcrumb;
	text-align: center;

}

#pt.checkouttop .ext .pane li {
	display: inline-block;
	margin: 0;
	margin-right: 1em;
		color:var(--white);
}

#pt.checkouttop .ext .pane li:last-child {
	margin-right: 0em;
}

#pt.checkouttop .ext .pane li:before {
	font-family: var(--font-awesome);
	content: "\f054";
	display: inline-block;
	font-size: 1em;
	margin-right: 1em;
	color:var(--white);
}

#pt.checkouttop .ext .pane li:first-child:before {
	content: "";
	margin: 0;
	display: none;
}

.chksteps_prev, .chksteps_curr, .chksteps_next {
	text-transform: capitalize;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight)
}

.chksteps_prev {
	color: var(--grey)
}

.chksteps_curr {
	color: var(--text-color)
}

.chksteps_next {
	color: var(--grey)
}

/* Signin/guest pane
------------------------------------------------------- */
.page_checkoutsignin {}

.checkoutsignin .signin {
	width: 50%;
	margin: auto;
	display: grid;
	align-items: start;
	grid-template-columns: 1fr;
	grid-gap: 4em;
	grid-template-areas: "signin" "guest ";
}

.page_checkoutsignin .form#psign {
	grid-area: signin;
	width: auto;
}

.page_checkoutsignin .form#pguest {
	grid-area: guest;
	width: auto;
}

.page_checkoutsignin .form label {
	display: block;
}

.page_checkoutsignin form input,
.page_checkoutsignin form select {
	width: calc(100% - 2em);
}

.page_checkoutsignin form img{
	display:inline-block;
	vertical-align:top;
}

.page_checkoutsignin .form#psign .submit,
.page_checkoutsignin .form#pguest .submit {
	grid-column:1/-1;
	width:auto;
	padding: var(--half-spacing) var(--spacing);
	margin: auto;
}

.exstregfield {
	display: none;
}

.page_delivery, .page_checkout, .page_checkoutsignin, .page_delivery, .page_shipping, .page_payment {}

/* Address (delivery and invoice) 
------------------------------------------------------- */
/*this isn't needed */
.page_delivery form[name="back"] {
	display: none !important;
}


.page_delivery h3,
.page_checkout h3 {
	font-size: 2em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin: 2rem;
}
.page_delivery form, .page_checkout form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"address summary"
		"address continue"
		"address .";
	grid-column-gap: 1rem;
	padding-bottom:2rem;
}

.page_delivery form input,
.page_checkout form input,
.page_delivery form select,
.page_checkout form select,
.page_delivery form textarea,
.page_checkout form textarea
{
	width: calc(100% - 2em);
}

.page_delivery form img, .page_checkout form img{
	display:inline-block;
	vertical-align:top;
}

.page_delivery form .terms, .page_checkout form .terms {}

.page_delivery form .terms h5, .page_checkout form .terms h5 {
	display: grid;
	grid-template-areas: "checkbox text";
	grid-template-columns: 2rem 1fr;
	align-items: center;
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem
}

.page_delivery form .terms input, .page_checkout form .terms input {
	grid-area: checkbox;
	margin: 0;
	width:auto;
}

.page_delivery form .termsart, .page_checkout form .termsart {
	text-align: left;
	font-size: .825rem;
}

/*class needed on this ul!*/
.page_delivery form>ul, .page_checkout form>ul {
	grid-area: address;
}

.page_delivery .form li.info, .page_checkout .form li.info {
	display: none;
}

.page_delivery .form li label, .page_checkout .form li label {
	display: none;
}

.page_delivery .form li.reqmsg, .page_checkout .form li.reqmsg {
	color: var(--error-color);
}

/*display corrections for same invoice as delivery address checkbox */
.page_delivery .form .deladd .chkbox {
	width: auto;
	margin-right: 1rem;
}

.page_delivery .form .deladd label {
	display: inline-block;
}

/*if member this shows */
.page_delivery li.chkbox {}

.page_delivery li.chkbox input {
	width: auto;
	margin: 0;
	margin-right: .5rem;
	display: inline-block;
	vertical-align: middle;
}

.page_delivery .chkbox .help {
	display: inline-block;
	vertical-align: middle;
}

.page_delivery form[name="delAddress"] {}

.page_delivery .remove {
	font-size: .825rem;
	color: var(--error-color)
}

/* Postcode Lookup
------------------------------------------------------- */
.page_delivery .pclup,
.page_checkout .pclup,
.page_delivery .pclupdel,
.page_checkout .pclupdel {
	display:grid;
	width: calc(100% - 2em);
	grid-template-columns: 1fr  1fr auto;
	grid-gap:1em;
	grid-template-areas: "title title title"
	"postcode locate manual"
	"address address address";
	align-items:center;
}


#pclupManualAddressDel,
#pclupManualAddress{
	text-decoration:underline;
}

#txtPostCodeLookup{
	grid-area:postcode;
}

#btnPostCodeLookup{
	grid-area:locate;
}

#pclupManualAddress{
	grid-area:manual;
	text-align:center;
}

span.or{
	grid-area:change;
	text-align:right;
	display:none;
}

#pnlMultiAddressOption,
#pnlMultiAddressOptionDel{
		grid-area:address;
}

#ddlMultiAddress,
#ddlMultiAddressDel{

	background-image:none;
	padding:.5em;
	width:100%;
}


.page_delivery .pclup input,
.page_checkout .pclup input,
.page_delivery .pclupdel input,
.page_checkout .pclupdel input {
	width: auto;
	display: block;
	margin:0;
}

/* Special Instructions
------------------------------------------------------- */

.form li.specialinst textarea{
	margin-bottom:0;
}

/* Order Fulfilment/shipping
------------------------------------------------------- */
.page_shipping {}

.page_shipping .pmfull {
	margin: 0 auto;
	position: relative;
	width: calc(var(--site-max-width) / 2);
}

.page_shipping h3 {
	font-size: 2em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin: 2rem;
}

.page_shipping select {
	width: 100%;
}

.page_shipping .zone span{
	display:none;
}

.page_shipping .service, .page_shipping .shippinginfo, .page_shipping .deliveryinfo {
	margin: 1rem 0;
}

.page_shipping .subtotal {
	margin: 1rem 0;
	display: grid;
	grid-template-areas: "label value";
	grid-template-columns: 1fr auto
}

.page_shipping .subtotal label {
	grid-area: label;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight)
}

.page_shipping .subtotal span {
	grid-area: value;
	text-align: right;
}

.page_shipping .cont a {
	display: block;
}

/* Payment
------------------------------------------------------- */
.page_payment {}

.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: calc(var(--site-max-width) / 2);
	/* 
	using grid layout just isn't feasible here with the way the content blocks are
	it breaks/works depending on the size of the basket
	
	display: grid; 
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"header header"
		"payment payment"
		"cont cont"
		"details details"
		"summary summary";*/
}


.page_payment #pm .bdcb{
	display:none;
}

.page_payment #pm .bt {
	grid-area: header;
	text-align: center;
	margin-bottom: 1rem
}

.page_payment h3 {
	font-size: 2em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin: 2rem;
}

.termsagreemsg {
	margin-bottom: 1em;
	text-align: center;
}

.termsart {
	margin-bottom: 1em;
	text-align: center;
}

.termsmsgcontainer {}

.page_payment #pm form.payoptsform {
	grid-area: payment;
	/* display: grid; */
	grid-template-areas:
		"options"
		"pay"
}

.page_payment #pm form.payoptsform .payopts {
	/* display: grid; */
	grid-template-columns: 1fr;
	/* grid-gap:1em; */
	grid-template-areas:
		"debit"
		"invoice";
}

/*only used in testing - cash payment */
.pt_cash {
	grid-area: cash;
}

/* custom radio buttons with images */
.page_payment #pm .sp_button{
	margin-bottom:1em;
	position: relative;
}

.page_payment #pm .sp_button label,
.page_payment #pm .sp_button input {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

.page_payment #pm  .sp_button  input[type="radio"] {
	opacity: 0;
	z-index: 100;
}

.page_payment #pm .sp_button  label {
	z-index: 90;
	line-height: 1.8em;
	color:transparent;
}

.page_payment #pm  .sp_button input{
	grid-area:check;
	display:block;
}


.page_payment #pm .sp_button.pt_debitcreditcard{
	grid-area:debit;
	background:url('https://www.orchardtoys.com/orchardtoys/4128769/i/bdr/debit_credit.png?_t=23113132539') #fff no-repeat center;
	aspect-ratio:668/65;
	min-height:65px;
	background-size:contain;
}

.page_payment #pm .sp_button.pt_debitcreditcard  input[type="radio"]:checked + label {
	background:url('https://www.orchardtoys.com/orchardtoys/4128769/i/bdr/debit_credit_checked.png?_t=2311313255') #fff no-repeat center;
	aspect-ratio:668/65;
	background-size:contain;
}


.page_payment #pm  .sp_button.pt_paypal{
	grid-area:invoice;
	cursor: pointer;
	background:url('https://www.orchardtoys.com/orchardtoys/4128769/i/bdr/PayPal.png?_t=23113132557') #fff no-repeat center;
	aspect-ratio:668/65;
	min-height:65px;
	background-size:contain;
	margin-bottom:1em;
}

.page_payment #pm .sp_button.pt_paypal input[type="radio"]:checked + label {
	background:url('https://www.orchardtoys.com/orchardtoys/4128769/i/bdr/PayPal_checked.png?_t=2311313262') #fff no-repeat center;
	aspect-ratio:668/65;
	min-height:65px;
	background-size:contain;
}


.page_payment #pm  .sp_button.pt_invoice{
	grid-area:invoice;
	cursor: pointer;
	aspect-ratio:668/65;
	min-height:65px;
	background-size:contain;
	margin-bottom:1em;
}

.page_payment #pm .sp_button.pt_invoice input[type="radio"]:checked + label {
	aspect-ratio:668/65;
	min-height:65px;
	background-size:contain;
}


.page_payment #pm .bc form[action="/payment.aspx"] input[type="submit"]{
	grid-area:pay;
	display:block;
	margin-top:1em;
	background-color:var(--checkout-button);
	border:1px solid var(--checkout-button);
	color:var(--White);
	width:100%;
	padding:.5em 1em;
	text-transform:	capitalize;
	font-family:var(--headingFontAlt);
	font-weight:600;
	font-size:1.5em;
	margin-bottom:1em;
}





.page_payment #pm .bc form[action="/payment.aspx"] input[type="submit"] {
	grid-area: pay;
	display: block;
	margin-top: 1em;
	background-color: var(--checkout-button);
	border: 1px solid var(--checkout-button);
	color: var(--White);
	width: 100%;
	padding: .5em 1em;
	text-transform: capitalize;
	font-family: var(--headingFontAlt);
	font-weight: 700;
	font-size: 1.5em;
	margin-bottom: 1em;
}

/*-- */
/*payment article */
.page_payment #pm .art {
	grid-area: header;
}

.page_payment #pm .art ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page_payment #pm .art li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
}

.page_payment #pm .art li:last-child {
	margin-bottom: 0;
}

.page_payment #pm .art li i {
	grid-area: icon;
	color: var(--navy)
}

.page_payment #pm .art li span {
	grid-area: text;
	font-size: .825rem
}

.payoptentry, #psagepay {
	grid-area: details;
}

.page_payment #pm form.payoptsform .submitcontainer {
	grid-area: pay;
	text-align: center;
}

.page_payment input[type="submit"] {
	/* color:var(--text-color); */
	display: block;
	padding: 1rem 0;
	width: 100%;
}

.confirmorder {
	grid-area: details;
}

/* Basket Summary
------------------------------------------------------- */
.bsktsum {
	grid-area: summary;
	display:grid;
	grid-template-areas:"title"
	"totals"
	"summary"
}

.bsktsum h4 {
	display:none;
}

/*we only want the header on the payment page*/
.page_payment .bsktsum h4 {
	grid-area:title;
	text-align:center;
	margin:.5em;
	display:block;
}

/*but we don't want the basket lines summary on the payment page*/
.page_payment .bsktsum .lines {
	display:none;
}


/*basket lines 
--------------------------*/
.bsktsum .lines {
	grid-area:summary;
	background-color:var(--off-white);
	padding:1em;
	border-radius:var(--border-radius);
	margin-bottom:1em;
}

.bsktsum .lines .line {
	align-items: start;
	display: grid;
	grid-template-columns: 4em 1fr auto 100px;
	grid-template-areas:
		"thumb desc qty price"
		"thumb . . .";
	grid-column-gap: 1rem;
}

.bsktsum .lines .line .unitprice {
	display: none;
}

.bsktsum .lines .thumb {
	grid-area: thumb;
	list-style: none;
}

.bsktsum .lines .thumb img{
	margin:0 !important;
}

/* Product Info - in list form */
.bsktsum .lines .prodinfo {
	grid-area: desc;
	list-style: none;
}

.bsktsum .lines li {
	font-size: .725rem;
	margin-left: .5rem;
}

.bsktsum .lines li.descr {
	font-size: .825rem;
	font-family: var(--heading-font);
	font-weight:500;
	margin-left: 0;
}

.bsktsum .lines li.flags {}

.bsktsum .lines li.flags img {
	margin: 0;
	max-width: 100%;
}

.bsktsum .lines .qty {
	grid-area: qty;
	font-size:.825em;
}

.bsktsum .lines .qty label {
	display: none;
}

.bsktsum .lines .price {
	grid-area: price;
	font-size:.825em;
	text-align: right;
}

.bsktsum .totals {
	grid-area:totals;
	background-color:var(--light-blue-alpha);
	padding:1em;
	border-radius:var(--border-radius);
	margin-bottom:1em;
}

.bsktsum .totals .subtotal {
	display: grid;
	grid-template-areas:"label value";
	grid-template-columns:1fr 100px;
	grid-gap:.5em;
}

.bsktsum .delmsg{
	font-weight:bold;
	text-align:center
}

.bsktsum .totals label{
	grid-area:label;
}

.bsktsum .totals span{
	grid-area:value;
	text-align:right;
}

.bsktsum .totals .subtotal:last-child {
	color:var(--light-blue);
	font-family:var(--heading-font);
	/* display:block; */
	text-align:left;
	font-size:2em;
	/* padding:1em; */
}

.bsktsum .totals .subtotal:last-child label {
	display:inline-block;
	margin-right:.5em;
	color:var(--grey);
	font-family:var(--text-font);
}

.bsktsum .totals .subtotal:last-child span {
}

.ordertotal{}

/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn,
.page_checkout .contbtn {
	grid-area:continue;
}
.page_delivery .contbtn input,
.page_checkout .contbtn input{
	width:100%;
}

.forinvoice {}
.page_delivery .forinvoice .chkbox label {}
.page_delivery .contbtn input, .page_checkout .contbtn input {}


/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
/* is this the sign in page form */
.form.myaccount#psign {}
.page_useraccount{}

.page_useraccount #pl,
.page_orderinfo #pl,
.page_register #pl{
	display:none;
}

/*not needed now we have the menu button? */
.btn.myacct{
	display:none;
}


#pmam + .pmfull{
	background-color: var(--main-panel-color);
	width: calc(var(--site-max-width) - var(--left-panel-width) - 2rem);
	display: inline-block;
	padding:1em;
	vertical-align: top;
	margin: 0;
	margin-right: auto;
}


/* NEW my account menu
------------------------------------------------------- */
#pmam{
	width: var(--left-panel-width);
	margin: 0;
	margin-left: auto;
	margin-right: 1rem;
	vertical-align: top;
}


.myacctmenu{
	padding:0 1em;
	
}

#pmam li{
	list-style:none;
	margin-bottom:.5rem;
}

/* close filter button */
.mamclsdiv {
	text-align:right;
}

.mamclsdiv .mamclsspn{
	display:inline-block;
	border:1px solid var(--off-white);
	color:var(--grey);
	background-color:var(--off-white);
	border-radius:50%;
	font-family:monospace;
	padding:.125rem;
	margin:0rem;
	width:1rem;
	height:1rem;
	line-height:1;
	text-align:center;
	cursor:pointer;
	display:none;
}

#fstrigbtn {
	/* display: none; */
}
/* show/hide menu button */
#mamtrigbtn {
	vertical-align: middle;
	text-align: center;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
	display:none;
}

#mamtrigbtn span{
	display:block;
}

#mamtrigbtn span:before {
	content: "\f7f3";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: 1em;
	margin-right: .5rem;
}

.page_useraccount .arts{
	grid-area:memberarts;
}

.page_useraccount .carousel.prod{
	grid-area:memberarts;
}

/* member orders view */
.member-orders{	}

/* table to grid stuff */
table.orders {
	display: grid;
	border-collapse: collapse;
	min-width: 100%;
	grid-template-columns: 
	minmax(200px, 1fr)
	minmax(200px, auto)
	minmax(200px, auto)
	minmax(200px, auto)
	minmax(200px, auto);
	border:1px solid var(--border-color);
	overflow-x:scroll;
}

table.orders tr:nth-child(odd) td{
	background-color:var(--off-white);
}

table.orders tr td[colspan="2"]{
	grid-column:auto / span 2;
}

table.orders tr td[colspan="3"]{
	grid-column:auto / span 3;
}
table.orders tr td[colspan="4"]{
	grid-column:auto / span 4;
}
table.orders tr td[colspan="5"]{
	grid-column:auto / span 5;
}

table.orders thead,
table.orders tbody,
table.orders tr {
	display: contents;
}

table.orders th,
table.orders td {
	padding: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table.orders th {
	position: sticky;
	top: 0;
	background: var(--orange);
	color:var(--white);
	text-align: left;
	font-weight: normal;
	font-size: 1.1rem;
	width:auto;
}

table.orders td a.btn {
	display: block;
	background:none;
	color:var(--text-color);
	border:none;
	text-align:right;
	font-size:.825em;
}

/* member order detail view */
.member-order{
	display:grid;
	grid-template-areas:"order-info order-info"
	"delivery-address invoice-address"
	"order-details order-details"
	"account-actions account-actions";
	grid-template-columns:1fr 1fr;
	grid-gap:1em;

	margin:2em 0;
}
.order-info{
	grid-area:order-info;
}

.order-info h3{
	text-align:center;
}

.delivery-address{
	grid-area:delivery-address;
}

.delivery-address ul,
#pm .artp .delivery-address ul{
	padding:0;
	margin:0;
}
.delivery-address li{
	list-style:none;
	padding-left:1em;
}

.delivery-address .name{
	padding:0;
}
.delivery-address .header{
	padding:0;
}

.invoice-address{
		grid-area:invoice-address;
}

.invoice-address ul,
#pm .artp .invoice-address ul{
	padding:0;
	margin:0;
}

.invoice-address li{
	list-style:none;
}

.invoice-address li{
	list-style:none;
	padding-left:1em;
}

.invoice-address .name{
	padding:0;
}

.invoice-address .header{
	font-weight:500;
	padding:0;
}

.order-details{
	grid-area:order-details;
}

/* table to grid stuff */
.order-details table.order {
	display: grid;
	border-collapse: collapse;
	min-width: 100%;
	grid-template-columns: 
	minmax(100px, 1fr)
	minmax(100px, auto)
	minmax(100px, auto);
	border:1px solid var(--border-color);
}

table.order tr td[colspan="2"]{
	grid-column:auto / span 2;
}

.order-details table.order thead,
.order-details table.order tbody,
.order-details table.order tr {
	display: contents;
}

.order-details table.order th,
.order-details table.order td {
	padding: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.order-details table.order th {
	position: sticky;
	top: 0;
	text-align: left;
	font-weight: normal;
	font-size: 1.1rem;
	width:auto;
}

.order-details table.order td a.btn {
	display: block;
	background:none;
	color:var(--text-color);
	border:none;
	text-align:right;
	font-size:.825em;
}

.order-details table.order .delivery{}

.account-actions{
	grid-area:account-actions;
}

.account-actions li{
	display:inline-block;
	padding:1em 0;
}

.account-actions ul,
#pm .artp .account-actions ul{
	margin:0;
	padding:0;
}

.account-actions li a,
#pm .artp .account-actions  li a{}

/* -------------------------------------------------------------------------------------
=ConfirmationPage 
------------------------------------------------------------------------------------- */
.page_confirmation {}
.page_confirmation li {
	list-style: none;
}

.page_confirmation .header {
	font-size: 1.5em;
}

.page_confirmation .subhead {
	font-size: 1.25em;
	margin-bottom: 1rem;
}

.page_confirmation .header {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_confirmation .subhead {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

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

.page_confirmation .info li {
	margin-bottom: 1rem;
}

.page_confirmation .info li.subhead:before, .page_confirmation .info li.subhead:after {
	content: '';
	display: none;
}

/* Basket Line items
------------------------------------------------------- */
.page_confirmation .conf .order {}
.page_confirmation .conf .order .line {
	display: grid;
	grid-gap: .5em;
	grid-template-columns: 64px 1fr auto 100px;
	grid-template-areas: "icon desc qty price";
	padding: 1em;
	align-self: center;
	align-items: start;
}

/* Image */
.page_confirmation .conf .order .line img {
	margin:0 !important;
}

/* Product title*/
.page_confirmation .conf .order .line .descr {
	align-self: start;
	font-size: 1rem;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .line .price {
	text-align: right;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	align-self: start;
}

/* Basket Subtotal
------------------------------------------------------- */
.page_confirmation .conf .order .subtotal {
	padding: 1em;
	border-top: 1px var(--border-color) solid;
	text-align: right;
}

.page_confirmation .conf .order .subtotal label {
	margin-right: 1em;
}

.page_confirmation .conf .order .subtotal span {
	font-size: 1.2em;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .address {
	text-align: center;
	margin-bottom: 4rem;
}

/* Post order customer registration panel
------------------------------------------------------- */
.page_confirmation .conf .ordreg {
	padding: 1em;
	margin: 1em 0;
}

.page_confirmation .conf .ordreg input {
	margin: .5em 0;
}

.page_confirmation .conf .ordreg .info {
	margin: .5em 0;
}

.page_confirmation .conf .ordreg .help {
	font-size: .725em;
	padding: 1em 0
}

.success .form li {}

/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */
#pm .smap ul {
	list-style-position: inside;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#pm .smap ul li {}

/* First Level */
#pm .smap ul li {}
#pm .smap ul li a {
	font-weight: var(--heading-font-weight);
	font-size: 1.2em;
}

/* Second Level */
#pm .smap ul li ul {
	grid-template-columns: 1fr;
}

#pm .smap ul li ul li {
	width: 100%;
}

#pm .smap ul li ul li a {
	font-weight: normal;
	font-size: 1em;
}

/* Third Level */
#pm .smap ul li ul li ul li a {
	font-weight: normal;
}




/* -------------------------------------------------------------------------------------
=Client Specific Stylings 
------------------------------------------------------------------------------------- */
.form h3.header{
	display:none;
	/*because this client uses ___ infront of form names whilst waiting for some coms developement on forms*/
}



/* Custom CSS 
------------------------------------------------------- */
/* Red */
.red{
    --highlight-color:var(--red);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
}

/* Yellow */
.yellow {
    --highlight-color:var(--yellow);
	--highlight-text-color:var(--dark-blue);
	--highlight-heading-color:var(--dark-blue);
}

/* Lime */
.lime {
    --highlight-color:var(--light-green);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
}

/* Ice */
.ice {
    --highlight-color:var(--light-blue);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
}

/* Green */
.green {
    --highlight-color:var(--green);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
}

/* Blue */
.blue {
    --highlight-color:var(--blue);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
}

/* Pink */
.pink {
    --highlight-color: var(--pink);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
}

/*Orange*/
.orange {
    --highlight-color:var(--orange);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
}

.teal{
  --highlight-color:var(--teal);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
	
}

.bluey{
  --highlight-color:var(--blueyBlue);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);
	
}

.deptHeader{
	background-color:var(--highlight-color);
	border-radius:var(--border-radius);
	color:var(--highlight-text-color);
	display:grid;
	grid-template-areas:
		". image"
		"title image"
		"copy image"
		". image";
	grid-template-columns:65% 35%;
	margin-bottom:1rem;
	/* background-image:url('https://www.orchardtoys.com/orchardtoys/4128769/i/bdr/Snowflake%20pattern.png?_t=221118124338'); */
}

.deptHeader h2{
	color:var(--highlight-heading-color);
}

.pmwide .deptHeader{
	grid-template-columns:60% 40%
}

.deptHeader .artp p{
	line-height:1.3;
}

.deptHeader h2{
	grid-area:title;
	/* grid-column:1/-1; */
	font-size: 3.25em;
	padding:0rem 2rem;
	margin:0;
	line-height:1;
	color:var(--highlight-heading-color);
}

.deptHeader .artp{
	grid-area:copy;
	padding:0 2rem;
	font-size:1.25em;
}

.deptHeader .imgcont{
	grid-area:image;
	border-left:5px white solid;
	object-fit:cover;
	/* aspect-ratio:1020/592; */
}

.deptHeader .imgcont img{
	border-top-right-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
}

/* things to do */
.thingstodoEntry{
	--border-radius:2em;
	grid-column: auto / span 4;
	border:2px solid var(--highlight-color);
	background-color:var(--highlight-color);
	border-radius:var(--border-radius);
	display:grid;
	grid-template-areas:"title title"
						"image content";
	grid-template-rows:auto;
}

.thingstodoEntry h2{
	grid-area:title;
	font-size:2em;
	text-align:center;
	color:var(--highlight-text-color);
	align-self:center;
	padding:0 .5em;

}

.thingstodoEntry .imgcont{
	grid-area:image;
	padding:1em;
	background-color:var(--white);
	border-bottom-left-radius:var(--border-radius);
}

.thingstodoEntry .artp{
	grid-area:content;
	padding:1em;
	background-color:var(--white);
	border-bottom-right-radius:var(--border-radius);
	display:grid
}

.thingstodoEntry .artp p{
	font-size:1.25em;
	/* margin:0; */
}

.thingstodoEntry .artp p:last-child{
		align-self:end;
}

#pm .thingstodoEntry .artp a{
	display:inline-block;
	background-color:var(--dark-blue);
	color:var(--white);
	padding:.5em 1em;
	border-radius:var(--border-radius);
}



#site.index #pmid.page_index #pl a.sidebar-btn {
    display: block;
	padding:.5em;
    border: 3px solid var(--light-blue);
    border-radius: 2em;
    margin-bottom: 1em;
    font-size: 1em;
	font-family:var(--heading-font);
	color:var(--light-blue);
	text-align:center;
}

#site.index.abt1 #pmid.page_index #pl a.sidebar-btn:nth-child(1),
#site.index.abt2 #pmid.page_index #pl a.sidebar-btn:nth-child(2),
#site.index.abt3 #pmid.page_index #pl a.sidebar-btn:nth-child(3),
#site.index.abt4 #pmid.page_index #pl a.sidebar-btn:nth-child(4),
#site.index.abt5 #pmid.page_index #pl a.sidebar-btn:nth-child(5) {
    color: #fff;
    background-color: var(--light-blue);
}

#site.index.cu1 #pmid.page_index #pl a.sidebar-btn:nth-child(1),
#site.index.cu2 #pmid.page_index #pl a.sidebar-btn:nth-child(2),
#site.index.cu3 #pmid.page_index #pl a.sidebar-btn:nth-child(3),
#site.index.cu4 #pmid.page_index #pl a.sidebar-btn:nth-child(4),
#site.index.cu5 #pmid.page_index #pl a.sidebar-btn:nth-child(5),
#site.index.cu6 #pmid.page_index #pl a.sidebar-btn:nth-child(6) {
    color: #fff;
    background-color: var(--light-blue);
}

#site.index #pmid.page_index #pl a.sidebar-btn:hover {
    color: #fff;
    background-color: var(--light-blue);
}


/* home page
------------------------------------------------------- */
#prom-1495793662,
#prom-1688567779{}

#prom-1495793662 .carousel,
#prom-1688567779 .carousel{
	margin-top:2em;
}
#prom-1495793662 #carouselArtImgs img,
#prom-1688567779 #carouselArtImgs img{
	border-radius:var(--border-radius);

}

#p-1495367678 img,
#p-1492975615 img{
	border-radius:var(--border-radius);

}

/*need some help choosing */
#a128319490{
	background-color:var(--light-blue);
	color:var(--white);
	display:block;
	position:relative;
	margin-top: 2em;
}

#a128319490 h2{
	background-color:var(--blue);
	text-align:center;
	margin:0;
}

#a128319490 .imgcont{
	position:absolute;
	left:0;
	bottom:0;
	/* for christmas elf - otherwise 0 */
	bottom:-1.1em;
	

	max-width:calc(var(--site-max-width)/6);
}


#a128319490 .artp{
	margin-left:calc((var(--site-max-width)/6) + 1em)
}

#a128319490 form{
	display:grid;
	grid-template-areas:
		"form submit";
	grid-template-columns: 1fr 7em;
	grid-gap:1em;
	margin:1em;
}

#a128319490 #mnu_filter_search{
	grid-area:form;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-gap:1em;
}

#a128319490 select{
	width:100%;
}

#a128319490 input{
	grid-area:submit;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	color:var(--dark-blue);
	font-size:2em;
	width: 3.5em;
	height: 3.5em;
	background-color:var(--yellow);
	border:4px #fff solid;
	border-radius:50%;
	margin:0;
	text-transform:none;
	-webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3);

	position:relative;
	/*top:-1.5em;*/
}

/*shop by age */
#a128319491{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:1em;
	margin-top:2em;
}

#a128319491 img{
	border-radius:var(--border-radius);
}

#a128319491 h2{
	grid-column:1/-1;
	text-align:center;

	background-color:var(--blue);
	color:var(--white);
	margin:0;
}

/*Search by learning skill */
#a128319492{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:1em;
	margin-top:2em;
	
}
/* for christmas robins*/

#a128319492 .artp:after {
    content: '';
    width: 170px;
    height: 100px;
    position: absolute;
    top: -32px;
    right: 200px;
    background: url('https://s3-eu-west-1.amazonaws.com/orchardtoys/i/bnr/robins.webp?_t=23111614842') no-repeat center;
    background-size: 165px;
    pointer-events: none
}




#a128319492 h2{
	grid-column:1/-1;
	text-align:center;
padding:.5rem;
	background-color:var(--green);
	color:var(--white);
	margin:0;
}

/*all because of the coloured border not being part of the image!!! */
#a128319492 .imgcont img{
	width:calc(100% - 8px);
}

#a128319492 .imgcont img{
	border:4px solid var(--green);
	border-radius:var(--border-radius);
}

#a128319492 .imgcont:nth-of-type(2) img{
	border:4px solid var(--red);
	border-radius:var(--border-radius);
}

#a128319492 .imgcont:nth-of-type(3) img{
	border:4px solid var(--orange);
	border-radius:var(--border-radius);
}

#a128319492 .imgcont:nth-of-type(4) img{
	border:4px solid var(--blue);
	border-radius:var(--border-radius);
}

/*shop by age / sign up banners */
#p-1494384639 {}

#p-1494384639 img{
	border-radius:var(--border-radius);
}

/* Blog previews
------------------------------------------------------- */
.page_home .blogs{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:2em;
	padding:2em;
	background-color:var(--light-blue-alpha);
	align-content:start;
}

.page_home .blogs .blog:nth-child(1){
	background-color:var(--light-green);
}
.page_home .blogs .blog:nth-child(2){
	background-color:var(--red);
}

.page_home .blogs .blog{
	border-radius:var(--border-radius);
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"image"
	"title"
	"date"
	"readmore";
	padding-bottom:1em;
	align-content:start;
	text-align:center;
}

.page_home .blogs .blog picture{
	grid-area:image;
}

.page_home .blogs .blog picture img{
	border-top-left-radius:var(--border-radius);
	border-top-right-radius:var(--border-radius);
}


.page_home .blogs .blog a.title{
	grid-area:title;
	font-family:var(--heading-font);
	color:var(--white);
	text-align:center;
	padding:1rem;
	font-size:1.25em
}

.page_home .blogs .blog p.date{
	display:none;
}


.page_home .blogs .blog a.more{
	grid-area:readmore;
	margin:auto;
	padding:.5rem 2rem;
	background-color:var(--dark-blue);
	color:var(--white);
	font-family:var(--heading-font);
	text-align:center;
	font-size:1.125em;
	border-radius:var(--border-radius);
}


.page_home .blogs .blog .artp{
	grid-area:readmore;
	display:none;
}




/* About Us - Educational benefits
------------------------------------------------------- */
#prom-1495793655,
#prom-1681162239{}

#prom-1495793655 ul.accordion,
#prom-1681162239 ul.accordion{
}

/* Trade Enquiries
------------------------------------------------------- */
#prom-1678442495{}

#prom-1678442495 .art.fullWidth{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-gap:1em;
}

#prom-1678442495 .art.fullWidth .artp,
#prom-1678442495 .art.fullWidth h2{
	grid-column:1/-1;
}




/* misplaced pieces
------------------------------------------------------- */

/* main contact us intro article with sections */

#pm #a132218880{}


#pm #a132218880 ul.boxed{
	padding-inline-start: 0em;
	margin-block-start: 0em;
	margin-block-end: 0em;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:.5em;
	
}

#pm #a132218880 ul.boxed li{
	display:grid;
	background-color:var(--light-blue-alpha);
	border-radius:var(--border-radius);
	text-align:center;
	align-content:center;
	border:2px solid var(--border-color-light);
}

#pm #a132218880 li:hover{
	border-color:var(--dark-blue)
}

#pm #a132218880 :not(.imgcont) a{
	text-decoration:none;
	font-family:var(--heading-font);
	padding:2em 1em;
	display:block;
}

/* Contact Us
------------------------------------------------------- */

/* main contact us intro article with sections */

#pm #a75005955{}


#pm #a75005955 ul{
	padding-inline-start: 0em;
	margin-block-start: 0em;
	margin-block-end: 0em;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:.5em;
	
}

#pm #a75005955 li{
	display:grid;
	background-color:var(--light-blue-alpha);
	border-radius:var(--border-radius);
	text-align:center;
	align-content:center;
	border:2px solid var(--border-color-light);
}

#pm #a75005955 li:hover{
	border-color:var(--dark-blue)
}

#pm #a75005955 :not(.imgcont) a{
	text-decoration:none;
	font-family:var(--heading-font);
	padding:2em 1em;
	display:block;
}

#prom-1495793647,
#prom-1661272041{}

#prom-1495793647 .art,
#prom-1661272041 .art{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-gap:1em;
}

#prom-1495793647 .art .artp,
#prom-1495793647 .art h2,
#prom-1661272041 .art .artp,
#prom-1661272041 .art h2{
	grid-column:1/-1;
}

#pm .artp ul.twoCols{
    columns:4;
    margin:1em 0;
    padding:0;
}
ul.twoCols li{
	list-style:none;
	display:block;
	vertical-align:top;
	padding-bottom: 1em;
}

/* Contact Us - catalogue requests
-------------------------------------------------------
#pm .pmind#prom-1495793649,
#pm .pmind#prom-1685258238{
	grid-template-areas:"intro catalogue"
	"form catalogue"
	"links links";
	grid-template-columns:1fr 1fr;
}

#pm .pmind#prom-1495793649 #a64323584,
#pm .pmind#prom-1685258238 #a64323584
{
	grid-area:intro
}

#pm .pmind#prom-1495793649 .form,
#pm .pmind#prom-1685258238 .form{
	grid-area:form;
}

#pm .pmind#prom-1495793649 .form h3.header,
#pm .pmind#prom-1685258238 .form h3.header{
display:none;
}

#pm .pmind#prom-1495793649 #a128745472,
#pm .pmind#prom-1685258238 #a128745472{
	grid-area:catalogue;
	
}


#pm .pmind#prom-1495793649 #a74350593,
#pm .pmind#prom-1685258238 #a74350593{
	grid-area:links;
}

 */


/* Contact Us - missing a piece
------------------------------------------------------- */

#prom-1679949817{}

#prom-1679949817 .art{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-gap:1em;
}

#prom-1679949817 .art .artp,
#prom-1679949817 .art h2{
	grid-column:1/-1;
}


/* letter to santa hacks
------------------------------------------------------- */
#site.santa #pm .pmind{
	/* margin-top:-10em; */
	/* display:block; */
}

#site.santa #pmid,
#site.santa .pmfull{
	background-color:transparent;
}


#site.santa #pm .form form {
	display:inline-block;
	max-width: 600px;
	margin:auto;
}


#site.santa .form li.info {
    font-family: var(--heading-font);
    color:var(--black);
    font-size: 1.5em;
    margin-bottom:2em;
}

#site.santa #pm .form .info.req{
	display:none;
}

#site.santa #pm .form .inptext img{
	display:none;
}


#site.santa .bdcb{
	display:none;
}

#site.santa .form {
	text-align:center;
}

#site.santa #pc .bnr{
	width:100%;
	margin:auto;
}

#site.santa .form  label {
	color:black;
	display:block;
	margin:auto;
	min-width: auto;
	max-width:initial;
	font-family: var(--heading-font);
    color:var(--black);
    font-size: 1.5em;
}

#site.santa .form input {
	display:block;
	margin-right:0em;
	margin:.5em auto;
	border-radius:2em;
	border:3px solid black;
	width:calc(100% - 1em);
	max-width:400px;
	font-size:1.5em;
	text-transform:none;
}

#site.santa .form input[type="button"]{
	background-color:var(--green);
	border-color:var(--green);
	color:var(--white);
	font-family:var(--heading-font);
	border:3px var(--green) solid;
	padding:.5em 0;
}

#site.santa .form .submit {
	background-color:var(--dark-blue);
	border-color:var(--dark-blue);
	color:var(--white);
	font-family: var(--heading-font);
		padding:.5em 0;
}

#site.santa .form input[type="file"]{
	display:none;
}

#site.santa .form li.imgupl label{
	display:block;
	padding:.5em 0;
	max-width:400px;
	width:calc(100% - 1em);
	margin:auto;
	background-color:var(--red);
	color:var(--white);
	border-radius:2em;
	border:3px var(--red) solid;
	color:white;
	font-family: var(--heading-font);
	cursor:pointer;
}


#site.santa  form  li.imgupl img{
	width:auto !important;
	height:auto !important;
}


#site.santa .g-recaptcha{
	text-align:center;
}

#site.santa .g-recaptcha div{
	margin:auto;
}

#site.santa .info.formmsg{
	font-size:3em;
	padding:1em;
}


#site.santa #pf #p50069522,
#site.santa #pf #p50069523{
	display:none;

}

#site.santa #pf .ext .pbnr{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}

#b19761{
	margin:1em 0;
}

#a131989504{
		grid-template-columns: 30% 70%;
}
/* letter to santa countdown */
#a131956736{
	display:grid;
	grid-template-columns: 1fr;
}

#a131956736 .artp{
	grid-column:1/-1;
	text-align:center;
}
/* HTML: <div class="ribbon">Your text content</div> */
#countdown {
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	margin:auto;
	text-align:center;
}
#countdown {
	--s: 3.8em; /* the ribbon size */
	--d: .8em;  /* the depth */
	--c: 1.8em;  /* the cutout part */
	
	padding: 0 calc(var(--s) + .5em) var(--d);
	line-height: 1.8;
	background:
	conic-gradient(at left  var(--s) bottom var(--d),
	 #0000 25%,#0008 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
	conic-gradient(at right var(--s) bottom var(--d),
	 #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
	clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
	background-color: #e1001a; /* the main color */
	width: fit-content;
	border-radius:
}


#pm .artp #countdown ul {
	list-style-type: none;
	padding-inline-start: 0em;
	margin-block-start: 0em;
	margin-block-end: 0em;
	font-size:1.2em;
	display:grid;
	grid-gap:.5em;
	grid-template-columns:repeat(4, 1fr);
	margin: 0 1em;
}

#pm .artp #countdown ul p{
	font-size:.725em
}

#pm .artp #countdown ul span{
	font-size:2em;
	line-height:1;
	font-family:var(--heading-font)
}


/*new missing pieces */

.customMissing .form{
		grid-column: auto / span 6;
}


/* Baby and Toddler Dept
------------------------------------------------------- */
.babyToddler #pmid{
	min-height:unset;
}
.babyToddler
{
  --highlight-color:var(--teal);
	--highlight-text-color:var(--white);
	--highlight-heading-color:var(--white);

}

.babyToddler #pf .ext {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
}

.babyToddler #p49741825,
.babyToddler #p49741824,
.babyToddler #p50069523{
	grid-column:1/-1;
}
#b26859{
	position:relative
}

#b26859 img{
	width:100%;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 nav 2023
	Filename : nav.css
	Last Updated : 04. 09. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */

:root{
	--menu-line-height:50px;
}

.nav-wrapper *,
.nav-wrapper *:before,
.nav-wrapper *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.nav-wrapper {
	grid-area:nav;
	position: relative;
	width: 100%;
	min-height: var(--navbar-height);
	margin: 0 auto;
	background-color:var(--navbar-color);
}



.nav-wrapper ul,
.nav-wrapper li{
	margin:0;
	padding:0;
	list-style: none;
}

/* Top Nav
------------------------------------------------------- */
.nav-wrapper ul.nav {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
	/*used to stop the gaps with inline block stuff
	font-size:0;
	*/
	max-width: var(--menu-max-width);
	width:100%;
	text-align:center;

	border-top:1px solid var(--white);
}

div.nav-wrapper>ul {
	position: relative;
}

ul.nav>li {
	display:inline-block;
	font-size: 1em;
}

/* top nav links
------------------------------------------------------- */
ul.nav .l1>a{
	display: block;
	line-height:var(--menu-line-height);
	padding: 0 calc(2em + 10px) 0 1em;
	color: var(--navbar-link-color);
	font-family:var(--navbar-heading-font);
	font-size:var(--navbar-heading-font-size);
	text-decoration: none;
}

ul.nav>li>a:only-child {
	padding: 0 2em 0 2em;
}

ul.nav>li>a:hover,
ul.nav>li:hover>a,
ul.nav>li.active-menu-item>a:hover,
ul.nav>li.active-menu-item:hover>a,
ul.nav>li.first-menu-item>a:hover,
ul.nav>li.first-menu-item:hover>a {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}

ul.nav>li.active-menu-item>a,
ul.nav>li.first-menu-item>a {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}

ul.nav>li>a .fa {
	position: relative;
	width: 24px;
}

ul.nav>li>a>img {
	max-width: 16px;
	display: block;
}

/* Classic Dropdown
-------------------------------------------------------------------------------------------------------------- */
/* dropdown icons
------------------------------------------------------- */
ul.nav li.classic .deptlink{
	/* font-size:0; */
	display:grid;
	grid-template-areas:
		"image text";
	grid-template-columns:4em 1fr;
	align-items:center;
	/*don't put padding here it breaks the menu on mobile */
}

ul.nav li.classic .deptlink a.img{
	grid-area:image;
	padding:.25em;
}

ul.nav li.classic .deptlink a.img img{
}

ul.nav li.classic .deptlink a.txt,
ul.nav li.classic .deptlink a.l2,
ul.nav li.classic .deptlink a.l3,
ul.nav li.classic .deptlink a.l4{
	grid-area:text;
	font-family:var(--heading-font);
	padding:.5em;
}

ul.nav > li > ul > li:hover .deptlink{
	background: var(--navbar-hover-color);
	color:var(--navbar-hover-text-color);
}

ul.nav > li > ul > li:hover .deptlink a.txt{
	color:var(--navbar-hover-text-color);
	/* margin-left:var(--half-spacing); */
}

/* 2nd Level
------------------------------------------------------- */
ul.nav>li>ul,
ul.nav>li>ul>li>ul,
ul.nav>li>ul>li>ul>li>ul {
	position: absolute;
	width: var(--navbar-dropdown-width);
	z-index:1001;
	text-align:left;
	background: var(--navbar-dropdown-color);
	color:var(--navbar-dropdown-text-color);
}

/* this class should only be applied to top level menu items if their sub menu flows outside of the viewport,
used for dropdowns that are close to the right edge - this change should align the right edge of the dropdown to the right edge of the screen
removing horizontal scroll
*/

.over{
	/* outline:1px red solid; */
	/* right:0; */
}

ul.nav>li>ul>li,
ul.nav>li>ul>li>ul>li {
	position: relative;
}

ul.nav>li>ul>li>a,
ul.nav>li>ul>li>ul>li>a,
ul.nav>li>ul>li>ul>li>ul>li>a {
	display: block;
	width: var(--navbar-dropdown-width);
	width:100%;
	line-height: var(--navbar-dropdown-item-height);
	padding: 0 var(--spacing);
	color: var(--navbar-dropdown-text-color);
	text-decoration: none;
	font-size: var(--navbar-dropdown-text-size);
}

ul.nav>li>ul>li:hover>a,
ul.nav>li>ul>li>a:hover,
ul.nav>li>ul>li>ul>li:hover>a,
ul.nav>li>ul>li>ul>li>a:hover,
ul.nav>li>ul>li>ul>li>ul>li:hover>a,
ul.nav>li>ul>li>ul>li>ul>li>a:hover {
	background: #efefef;
}

ul.nav>li>ul>li>a:only-child:after,
ul.nav>li>ul>li>ul>li>a:only-child:after,
ul.nav>li>ul>li>ul>li>.deptlink:only-child:after,
ul.nav>li>ul>li>ul>li>ul>li>a:only-child:after {
	content: "";
}

ul.nav>li>ul>li>a .fa,
ul.nav>li>ul>li>ul>li>a .fa,
ul.nav>li>ul>li>ul>li>ul>li>a .fa {
	position: relative;
	width: 24px;
}

ul.nav>li.ruby-menu-right>ul {
	right: 0;
}

/* 3RD & 4TH LEVEL SPECIFIC */
ul.nav>li>ul>li>ul,
ul.nav>li>ul>li>ul>li>ul {
	left: var(--navbar-dropdown-width);
	top: 0;
	z-index: 100;
}

ul.nav>li>ul.over>li>ul.l3,
ul.nav>li>ul.popl>li>ul.l3{
	left: auto;
	right: var(--navbar-dropdown-width);
}


/* Mega Menus */

ul.nav>li.mega-menu-classic>div,
ul.nav>li.mega-menu>div,
ul.nav>li.ruby-menu-mega-shop>div {
	position: absolute;
	z-index:1001;
	width: var(--menu-max-width);
	height: auto;
	top: var(--navbar-height);
	left: 0;
	background: var(--navbar-dropdown-color);
	overflow: hidden;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

/* Mega Menu */

ul.nav>li.mega-menu>div>ul.mega-menu-nav {
	position: relative;
	width: var(--navbar-dropdown-width);
	height: 100%;
	margin:0;
	/* height: 500px;  if you don't want javascript to define height, use manual height */
	left: 0;
	top: 0;
	background: var(--navbar-sidebar-color);
	color:var(--navbar-sidebar-text-color);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.l2 {
	font-size: 1em;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.l2 > .deptlink a.img{
	display:none;
}

/*side bar items */
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink{
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
	text-align:left;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a{
	display:block;
}

/*sort out icons - none in side bar */
.mega-menu-nav .l2 .deptlink .img{
	display:none;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.active-menu-item > .deptlink
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.first-menu-item > .deptlink {
  background: var(--navbar-sidebar-hover-color);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a {
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a,
ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a {
	background: #e6e6e6;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid {
	position: absolute;
	width: calc(var(--menu-max-width) - var(--navbar-dropdown-width));
	height: auto;
	max-height:100%;
	min-height: 100%;
	left: var(--navbar-dropdown-width);
	top: 0;
	background: var(--navbar-popout-color);
}

.mega-menu-nav .l3 .deptlink .img{
	display:block;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a {
	background: #ddd;
}

/* CONTENT GRID */
div.menu-grid,
div.menu-grid-lined {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}

div.menu-grid>div.menu-row {
	position: relative;
	padding:var(--spacing);
	height:auto;
}

div.menu-grid > div.menu-row ul{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-gap:1em;
	margin-bottom:1em;
}

div.menu-grid > div.menu-row ul li{
	/* padding:var(--spacing); */
	list-style:none;
}

div.menu-grid > div.menu-row ul li.l3{
	padding:0;
}

div.menu-grid > div.menu-row ul li.l4{
	display:none;
}

div.menu-grid > div.menu-row ul li .deptlink{
	position:relative;
	margin:0;
	overflow:hidden;
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"image"
		"text";
	grid-template-rows:auto 4em;
	align-items:center;
	border-radius:.5em;
	background-color:var(--light-blue);
}

div.menu-grid > div.menu-row ul li .deptlink a.img{
	grid-area:image;
	background-color:var(--white);
	align-self:start;
}

div.menu-grid > div.menu-row ul li .deptlink a.img img{
	width: 100%;
	object-fit: cover;
	margin:auto;
}

div.menu-grid > div.menu-row ul li .deptlink a.txt{
	color:var(--white);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.25em;
	grid-area:text;
	z-index:10;
	align-self: center;
	padding: 0em .5em;
	text-align:center;
}

div.menu-grid.menu-grid-lined>div.menu-row:after {
	content: "";
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.48) 24%, rgba(204, 204, 204, 1) 50%, rgba(204, 204, 204, 0.42) 79%, rgba(204, 204, 204, 0) 100%);
	/* Chrome10+,Safari5.1+ */
}

div.menu-grid.menu-grid-lined>div.menu-row:last-child:after {
	height: 0;
}

div.menu-grid>div.menu-row::after {
	content: "";
	display: table;
	clear: both;
}


div.menu-grid img {
	position: relative;
	max-width: 100%;
	height: auto;
	display: block;
}

/* mega-menu-classic */
ul.nav>li.mega-menu-classic>div ul{
	margin: 0;
	/* margin-top: 10px; */
}

.mega-menu-classic .l2 .menu-grid-lined{
	display:none;
}

ul.nav>li.mega-menu-classic>div ul li {
	position: relative;

	display: grid;
	width: 100%;
}

ul.nav>li.mega-menu-classic>div ul li>a {
	text-decoration: none;
	color: var(--text-color);
	display: inline-block;
}

ul.nav>li.mega-menu-classic>div ul li>a:hover {
	color: var(--text-link-color-hover);
	text-decoration: underline;
}

ul.nav>li.mega-menu-classic>div ul li .fa {
	position: relative;
	width: 24px;
}

ul.nav>li.mega-menu-classic>div ul li>a>img {
	float: left;
	width: 60px;
	margin-right: 12px;
}

span.ruby-c-content {
	display: block;
	position: relative;
	top: 7px;
	font-size: 12px;
	line-height: 18px;
	text-align: justify;
}

.nav-wrapper .visible-xs {
	visibility: hidden;
	position: absolute;
}

/* DEVICES EXCEPT MOBILE/tablet */
@media(min-width:991px) {

	/* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> HIDE ON NON-MOBILE */
	ul.nav>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	/* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> SHOW ON NON-MOBILE WHEN HOVERED TO PARENT */
	ul.nav>li:hover>ul,
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul {
		/* show */
		visibility: visible;
		opacity: 1;
	}
	/* RUBY MEGA, MEGA BLOG, MEGA SHOP --> HIDE ON NON-MOBILE */
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div,
	ul.nav>li.ruby-menu-mega-shop>div {
		/* hide */
		visibility: hidden;
		opacity: 0;
		z-index:-1001;
	}
	/* RUBY MEGA, MEGA BLOG, MEGA SHOP --> SHOW ON NON-MOBILE */
	ul.nav>li.mega-menu-classic:hover>div,
	ul.nav>li.mega-menu:hover>div,
	ul.nav>li.ruby-menu-mega-shop:hover>div {
		visibility: visible;
		opacity: 1;
		z-index:1001;
		background: var(--navbar-popout-color);
	}
	/* RUBY MEGA BLOG */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink) {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.first-menu-item>div	{
		visibility: visible;
		opacity: 1;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>div {
		visibility: visible;
		opacity: 1;
		z-index: 101;
	}

	ul.nav>li.l1>a:not(:only-child):after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		font-size:1em;
		position: absolute;
		margin-left: 5px;
	}
	ul.nav>li:hover>a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	ul.nav>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>.deptlink:after,
	ul.nav>li>ul>li>ul>li>.deptlink:after,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:after{
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		font-size: 16px;
		padding: 0;
		content: '\f105';
		position: absolute;
		right: 15px;
	}
	/*different position if deptlink icons used*/
	ul.nav > li > ul > li > .deptlink:after,
	ul.nav > li > ul > li > ul > li > .deptlink:after,
	ul.nav > li > ul > li > ul > li > ul > li > .deptlink:after {
		top: 10px;
	}
	
	ul.nav>li>ul>li:hover>a:after,
	ul.nav>li>ul>li>ul>li:hover>a:after,
	ul.nav>li>ul>li>ul>li>ul>li:hover>a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a:after {
		content: "";
		position: absolute;
		right: 0;
		margin-top: 13px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 8px 6px 0;
		border-color: transparent #fff transparent transparent;
	}

	/* no sub menus, don't show arrows*/
	ul.nav > li > ul > li > a:only-child:after,
	ul.nav > li > ul > li > ul > li > a:only-child:after,
	ul.nav > li > ul > li > ul > li > ul > li > a:only-child:after,
	ul.nav > li > ul > li > ul > li > ul > li > ul > li > a:only-child:after{
		content: "";
	}

	ul.nav > li > ul > li > .deptlink:only-child:after,
	ul.nav > li > ul > li > ul > li > .deptlink:only-child:after,
	ul.nav > li > ul > li > ul > li > ul > li > .deptlink:only-child:after,
	ul.nav > li > ul > li > ul > li > ul > li > ul > li > .deptlink:only-child:after{
		content: "";
	}
	
}

/* ########################################################### */

/* #################### RUBY MEGA MENU   ##################### */

/* ######################## V 1.0 ############################ */

/* ################## RESPONSIVE STYLES ###################### */

/* MEDIA QUERY --> EXTRA SMALL DEVICES */

@media(max-width:992px) {
	div.nav-wrapper .hidden-xs {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {
		z-index:1001;
		background:var(--navbar-color);
	}
	.nav-wrapper .visible-xs {
		visibility: visible;
		position: absolute;
		left: 0;
		top: 0;
	}
	/* RUBY 1ST LEVEL */
	div.nav-wrapper>ul.nav {
		position: absolute;
		top: 50px;
		width: 100%;
		text-align:left;
	}
	ul.nav {}
	ul.nav>li,
	ul.nav>li.ruby-menu-right {
		float: none;
		display:block;
	}

	/*style the home nav link if present */
	ul.nav>li.l0>a {
		padding: 0 65px;
		background: var(--navbar-active-color);
		color:var(--text-color);
	}
	ul.nav>li>a,
	ul.nav .l1>a{
		padding: 0 65px;
		background: var(--navbar-dropdown-color);
		color:var(--navbar-dropdown-text-color);
	}
	ul.nav>li>a:only-child {
		padding: 0 65px;
	}
	ul.nav>li>a:hover,
	ul.nav>li:hover>a,
	ul.nav>li.active-menu-item>a:hover,
	ul.nav>li.first-menu-item>a:hover {
		background: var(--off-white);
	}
	ul.nav>li.active-menu-item>a,
	ul.nav>li.first-menu-item>a	{
		background: var(--off-white);
	}
	ul.nav>li.ruby-menu-social>a>span {
		display: block;
	}
	/* RUBY 2ND LEVEL */
	ul.nav>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		position: relative;
		width: 100%;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		border-top: none;
	}
	ul.nav>li,
	ul.nav>li>ul>li,
	ul.nav>li>ul>li>ul>li,
	ul.nav>li>ul>li>ul>li>ul>li {
		position: relative;
	}
	ul.nav>li>ul>li>a,
	ul.nav>li>ul>li>.deptlink,
	ul.nav>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>.deptlink
	ul.nav>li>ul>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink{
		width: 100%;
		line-height: 50px;
		padding: 0 80px;

	}
	ul.nav>li>ul>li:hover>a,
	ul.nav>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>.deptlink:hover,
	ul.nav>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>.deptlink:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:hover{
		background: var(--navbar-sidebar-hover-color);
		color: var(--text-color);
	}
	/* RUBY 3RD & 4TH LEVEL SPECIFIC */
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		left: auto;
		top: auto;
		z-index: auto;
	}
	ul.nav>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul {
		left: auto;
		right: auto;
	}
	ul.nav>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>.deptlink{
		background: var(--popout-color);
		padding: 0 95px;
	}
	ul.nav>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>.deptlink:hover {
		background: var(--popout-color);
	}
	ul.nav>li>ul>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink{
		background: var(--popout-color);
		padding: 0 110px;
	}
	ul.nav>li>ul>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:hover{
		background: var(--popout-color);
	}
	ul.nav>li.ruby-menu-social>a {
		border: none;
	}
	/* RUBY MENU MEGA */
	ul.nav>li.mega-menu-classic,
	ul.nav>li.mega-menu {
		position: relative;
	}
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div {
		position: relative;
		top: auto;
		left: auto;
		border-top: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	/* RUBY MENU MEGA BLOG */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li {
		position: relative;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink{
		line-height: 50px;
		padding: 0;
		padding-left:75px;
		background: var(--navbar-sidebar-color);
		color: #222;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>.deptlink
	{
		background: var(--navbar-active-color);
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {
		position: relative;
		width: 100%;
		min-height: auto;
		left: auto;
		top: auto;
		z-index: auto;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>.deptlink{
		background: #d9d9d9;
	}
	
	/* RUBY MENU DROPDOWN TOGGLE - MOBILE */
	span.dropdown-toggle {
		position: absolute;
		width: 50px;
		height: 50px;
		max-width: 50px;
		max-height: 50px;
		left: 0;
		top: 0;
		padding: 10px 17px;
		z-index: 1000000;
		cursor: pointer;
	}
	span.dropdown-toggle:after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		color: var(--red);
		font-size: 25px;
		right: 0;
	}
	span.dropdown-toggle.dropdown-toggle-rotate {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	ul.nav>li.l0>a:before{
		
		content: '\e3af';
		text-align:center;
		font-family:var(--font-awesome);
		font-weight:600;
		font-size:25px;
		width: 50px;
		height: 50px;
		background: var(--navbar-active-color);
		color:var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.nav>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>ul>li>a:before,
	ul.nav>li>.deptlink:before,
	ul.nav>li>ul>li>.deptlink:before,
	ul.nav>li>ul>li>ul>li>.deptlink:before,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink:before {
		content: "";
		width: 50px;
		height: 50px;
		background: var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.nav>li>ul>li>a:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a:before,
	ul.nav>li>ul>li>.deptlink:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink:before{
		background: var(--navbar-color);
	}
	ul.nav>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>.deptlink:before{
		background: var(--navbar-color);
	}
	ul.nav>li>ul>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:before{
		background: var(--navbar-color);
	}
	/* RUBY MENU HIDE/SHOW SUBMENUS - MOBILE */
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul,
	ul.nav,
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink),
	ul.nav>li.mega-menu>div:not(.deptlink){
		max-height: 0;
		transform: scaleY(0);
		overflow: hidden;
	}
	ul.nav>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul>li>ul.mobile-sublevel-show,
	ul.nav.mobile-sublevel-show,
	ul.nav>li.mega-menu-classic>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.mobile-sublevel-show
	{
		max-height: 20000px;
		transform: scaleY(1);
		position:initial;
		width:100%;
	}

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid{
		position:initial;
		width:100%;
	}

	div.menu-grid>div.menu-row {
		position: relative;
		padding:0;
		height:auto;
	}
	div.menu-grid > div.menu-row ul.l3{
		display:block;
		/* padding: 0 65px; */
		background: var(--navbar-popout-color);
		margin-bottom:0;
	}
	div.menu-grid > div.menu-row ul.l3 li.l3{
		display:block;
		position:relative;
		padding:0;
		
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink{
		align-items:center;
		width: 100%;
		line-height: 50px;
		padding: 0;
		padding-left:66px;
		background: var(--navbar-popout-color);
		color:var(--text-color);
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img{
		display:inline-block;
		vertical-align:top;
		max-width: 50px;
		margin-right: .5em;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img img{
		display:block;
		padding:4px 0;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.txt{
		display:inline-block;

	}
	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink:before{
		content: "";
		width: 50px;
		height: 50px;
		background: var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	
	/* Hamburger icon - mobile */
	.c-hamburger {
		display: block;
		position: relative;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: 50px;
		height: 50px;
		font-size: 0;
		text-indent: -9999px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-shadow: none;
		border-radius: 0;
		border: none;
		cursor: pointer;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
	}
	.c-hamburger:focus {
		outline: none;
	}
	/*middle bit of the x */
	.c-hamburger span {
		display: block;
		position: absolute;
		top: 50%;
		
		left: var(--half-spacing);
		right: var(--half-spacing);
		height: 3px;
		background:var(--white);
	}
	/* top and bottom bits of the x */
	.c-hamburger span::before,
	.c-hamburger span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: var(--white);
		content: "";
	}
	.c-hamburger span::before {
		top: -10px;
	}
	.c-hamburger span::after {
		bottom: -10px;
	}
	/**
   * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
   * down to center and transform into an "x".
   */
	.c-hamburger--htx {
		background-color:transparent;
	}
	.c-hamburger--htx span {
		-webkit-transition: background 0s 0.3s;
		transition: background 0s 0.3s;
	}
	.c-hamburger--htx span::before,
	.c-hamburger--htx span::after {
		-webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
		-webkit-transition-delay: 0.3s, 0s;
		transition-delay: 0.3s, 0s;
	}
	.c-hamburger--htx span::before {
		-webkit-transition-property: top, -webkit-transform;
		transition-property: top, transform;
	}
	.c-hamburger--htx span::after {
		-webkit-transition-property: bottom, -webkit-transform;
		transition-property: bottom, transform;
	}
	/* active state, i.e. menu open */
	.c-hamburger--htx.is-active {
		background-color: transparent;
	}
	.c-hamburger--htx.is-active span {
		background: none;
	}
	.c-hamburger--htx.is-active span::before {
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.c-hamburger--htx.is-active span::after {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
	}
	/* Hide Ruby Dividers on Mobile */
	ul.nav.ruby-menu-dividers>li,
	ul.nav.ruby-menu-dividers>li>a,
	ul.nav.ruby-menu-dividers>li.ruby-menu-social>a,
	ul.nav.ruby-menu-dividers>li>a:hover,
	ul.nav.ruby-menu-dividers>li:hover>a {
		border: none;
	}
	/* Reset transparent menu active menu item padding */
	div.nav-wrapper.ruby-menu-transparent>ul.nav>li.active-menu-item>a,
div.nav-wrapper.ruby-menu-transparent>ul.nav>li.first-menu-item>a	{
		padding-left: 45px;
	}
	/* Hide search in mobile */
	ul.nav>li.ruby-menu-social.ruby-menu-search>a {
		display: none;
	}
}

/* MEDIA QUERY --> SMALL DEVICES */

@media(min-width:768px) and (max-width:991px) {
	.nav-wrapper .hidden-md {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {

	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {

	}
	
	div.menu-grid.menu-grid-lined>div.menu-row:after,
	div.menu-grid.menu-grid-lined>div.menu-row>div[class^="ruby-col"]:after {
		background: none;
	}
}

/* TRANSITION EFFECTS */
span.ruby-dropdown-toggle {
	transition: transform 0.3s ease;
}

span.ruby-dropdown-toggle:after {
	transition: transform 0.3s ease;
}

@media(min-width:767px) {
	/* Arrows */
	ul.nav>li>a:after {
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>ul>li>a:after {
		transition: all 0.3s ease;
	}
	/* 1st level move-up effect */
	ul.nav>li>ul,
	ul.nav>li>div {
		transform: translateY(25px);
		transition: all 0.3s ease;
	}
	ul.nav>li:hover>ul,
	ul.nav>li:hover>div {
		transform: translateY(0);
	}
	/* 1st level move-left effect --> For Vertical Menu Orientation */
	ul.nav.ruby-vertical>li>ul,
	ul.nav.ruby-vertical>li>div {
		transform: translateX(25px);
		transition: all 0.3s ease;
	}
	ul.nav.ruby-vertical>li:hover>ul,
	ul.nav.ruby-vertical>li:hover>div {
		transform: translateX(0);
	}
	/* 2nd 3rd 4th level move-left/right effect */
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul>li>ul {
		transform: translateX(25px);
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li>ul>li:hover>ul {
		transform: translateX(0);
	}
	ul.nav>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li>ul>li.ruby-open-to-left>ul {
		transform: translateX(-25px);
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li.ruby-open-to-left:hover>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left:hover>ul,
	ul.nav>li>ul>li>ul>li>ul>li.ruby-open-to-left:hover>ul {
		transform: translateX(0);
	}
	/* Ruby Mega Menu Blog list content move-down effect */
	ul.nav>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li>div {
		transform: translateY(-50px);
		transition: all 0.5s ease;
	}
	ul.nav>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.nav>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.first-menu-item>div,
	ul.nav>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li:hover>div {
		transform: translateY(0);
	}
	/* Ruby Mega Menu Blog list content move-left effect --> For Vertical Menu Orientation */
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li>div {
		transform: translateX(50px);
		transition: all 0.5s ease;
	}
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.first-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li:hover>div {
		transform: translateX(0);
	}
	/* Ruby Mega Menu Shop List content move-down effect */
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>div {
		transform: translateY(-50px);
		transition: all 0.5s ease;
	}
	ul.nav>li.ruby-menu-mega-shop:hover>div>ul>li.active-menu-item>div,
	ul.nav>li.ruby-menu-mega-shop:hover>div>ul>li.first-menu-item>div,
	ul.nav>li.ruby-menu-mega-shop>div>ul>li:hover>div {
		transform: translateY(0);
	}
	/* Ruby Mega Menu Shop List content move-down effect --> For Vertical Menu Orientation */
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop>div>ul>li>div {
		transform: translateX(50px);
		transition: all 0.5s ease;
	}
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop:hover>div>ul>li.active-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop:hover>div>ul>li.first-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop>div>ul>li:hover>div {
		transform: translateX(0);
	}
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>a:before,
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>a:after {
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra extra large devices (large laptops and desktops, 1400px and up)
	Last Updated : 07. 10. 2024
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1400px) {

	/* defaults */
	:root{
		--site-max-width:1400px;
		--menu-max-width:1400px;
	}

/*accordion dropdown for info panels*/
#pb .accordion{
	background-color:transparent;
}

#pb .accordion .header {
	background-color:transparent;
	font-size: 1.25em;
	text-transform:uppercase;
	margin-bottom: 1rem;
	color: var(--bottom-panel-heading-color);
	padding:0;
	border-radius: 0;
	display: none;
}

#pb .accordion .header img{
	display:none;
}


#pb ul.accordion li.pane {
	display: block !important;
	padding: 0;
	color:var(--black);
	background-color:transparent;
}

#pb ul.accordion li.pane  h3.header{
	display:none;
}

#pb ul.accordion li.pane ul {
	list-style-type: none;
	margin-left: 0em;
}
/*reviews widget on home page hacks */
#prom-1688567779 #a137265152,
#prom-1495793662 #a137265152{
	align-content:center;
	align-items:center;
}

#prom-1688567779 #a137265152 .artp,
#prom-1495793662 #a137265152 .artp{
	margin-left:calc((100% - 1140px)/2);
}

}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra large devices (large laptops and desktops, 1200px and up) 
	Last Updated : 07. 10. 2024
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width:1399px) {
	:root{
		--site-max-width:1200px;
	 }



	/* top nav links
	------------------------------------------------------- */
	ul.nav .l1>a{
		padding: 0 calc(1rem + 10px) 0 1rem;

	}
	
	ul.nav>li>a:only-child {
		padding: 0 1rem 0 1rem;
	}

	/*accordion dropdown for info panels*/
	#pb .accordion{
		background-color:transparent;
	}
	
	#pb .accordion .header {
		background-color:transparent;
		font-size: 1.25em;
		text-transform:uppercase;
		margin-bottom: 1rem;
		color: var(--bottom-panel-heading-color);
		padding:0;
		border-radius: 0;
		display: none;
	}
	
	#pb .accordion .header img{
		display:none;
	}
	
	#pb ul.accordion li.pane {
		display: block !important;
		padding: 0;
		color:var(--black);
		background-color:transparent;
	}
	
	#pb ul.accordion li.pane  h3.header{
		display:none;
	}
	
	#pb ul.accordion li.pane ul {
		list-style-type: none;
		margin-left: 0em;
	}

	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	.page_blog .blogs,
	.page_blog .blog{
		grid-template-columns: repeat(3, 1fr);
	}

/*reviews widget on home page hacks */
#prom-1688567779 #a137265152,
#prom-1495793662 #a137265152{
	align-content:center;
	align-items:center;
}

#prom-1688567779 #a137265152 .artp,
#prom-1495793662 #a137265152 .artp{
	margin-left:calc((100% - 1140px)/2);
}

}
/* ------------------------------------------------------------------------------------
	SCREEN - Large devices (laptops/desktops, 992px and up)
	Last Updated : 07. 10. 2024
	Copyright :(c) 2024 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	/* defaults */
	:root{
		--site-max-width:100%;
	}


	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}


	
	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	
	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		/* grid-column: 1/-1; */
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		/* grid-column: 1/-1; */
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}


	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */
	#pt{}

		#pt .ext {
		--spacer-width: calc((100% - var(--site-max-width)) / 2);
		--logo-width:120px;
		--feefo-width:220px;
		--search-width:minmax(0, 2fr);
		--basket-width:minmax(0, 300px);
		
		background-color: var(--top-panel-color);
		color:var(--white);
		
		margin: 0 auto;
		position: relative;
		display: grid;
		grid-column-gap: 1rem;
	
		grid-template-columns: var(--spacer-width) var(--logo-width)  var(--search-width) var(--basket-width)  var(--spacer-width);
		grid-template-areas:
			". logo  infolinks account ."
			". logo  search basket ."
			". logo  search basket ."
			". logo  search basket ."
			"nav  nav nav nav nav ";
	
		align-items: center;
	}

	#a62062592 {
		grid-area:feefo;
		display:none;
	}

	#p49676291{
		grid-area:infolinks;
		grid-column:1/-1;
		text-align:center;
		align-self:start;
		font-size:.875em;
	}


	#p49676292{
		grid-area:account;
		text-align:right;
		align-self:start;
		font-size:.875em;
	}

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{}


	
	#a128548864 h4{
		font-size:1em;
	}

	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {
		position: relative;
		padding:0 1em;
		width:calc(100% - 2em);
	}

	#pf #carouselArtImgs {
		--swiffy-slider-item-count:4
	}

	/* -------------------------------------------------------------------------------------
	=Bottom Panel #pb
	------------------------------------------------------------------------------------- */
	#pb{

	}

	#pb .ext {
		padding:1em;
		grid-gap:1em;
	}

	/*accordion dropdown for info panels*/
	#pb .accordion{
		background-color:transparent;
	}
	
	#pb .accordion .header {
		background-color:transparent;
		font-size: 1.25em;
		text-transform:uppercase;
		margin-bottom: 1rem;
		color: var(--bottom-panel-heading-color);
		padding:0;
		border-radius: 0;
		display: block;
	}
	
	#pb .accordion .header img{
		display:none;
	}
	
	
	#pb ul.accordion li.pane {
		display: block !important;
		padding: 0;
		color:var(--black);
		background-color:transparent;
	}
	
	#pb ul.accordion li.pane  h3.header{
		display:none;
	}
	
	#pb ul.accordion li.pane ul {
		list-style-type: none;
		margin-left: 0em;
	}

	/*accordion dropdown for info panels*/
	#pb .accordion{
		background-color:transparent;
	}
	
	#pb .accordion .header {
		background-color:transparent;
		font-size: 1.25em;
		text-transform:uppercase;
		margin-bottom: 1rem;
		color: var(--bottom-panel-heading-color);
		padding:0;
		border-radius: 0;
		display: none;
	}
	
	#pb .accordion .header img{
		display:none;
	}
	
	
	#pb ul.accordion li.pane {
		display: block !important;
		padding: 0;
		color:var(--black);
		background-color:transparent;
	}
	
	#pb ul.accordion li.pane  h3.header{
		display:none;
	}
	
	#pb ul.accordion li.pane ul {
		list-style-type: none;
		margin-left: 0em;
	}


	

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf{}


	/* left panel
	------------------------------------------------------- */
	#pl {
	}


	.recent_item{
		grid-template-columns:1fr 1fr;
		grid-gap:1em;
	}

	/* left panel filter with toggle - only works if it is ONLY filter on the left panel
	------------------------------------------------------- */
	#pl.filter {
		width:0;
	}

	#pl .filter{
		height: 100%;
		width: 0%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pl .filter.showfilter{
		display:block;
		width:50%;
	}

	
	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	#site.blog {}
	
	/* -------------------------------------------------------------------------------------
	=SearchHeader / SearchFooter
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=FilterSearch
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=Department
	------------------------------------------------------------------------------------- */

	.deptHeader{
		grid-template-columns:50% 50%;
	}

	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(3, 1fr);
	}

	.depttree li {
		/*heights needed to deal with double lined titles*/
		grid-template-rows:6em auto auto;
	}

	.depttree li a.txt {
		grid-area:title;
		text-align:center;
		font-family:var(--heading-font);
		padding:1rem;
		font-size:1.5em
	}
	
	#sr {
		grid-template-columns: repeat(4, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* -------------------------------------------------------------------------------------
	=FeaturedProducts
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=ProductPage
	------------------------------------------------------------------------------------- */
	#pi .main {
		grid-column-gap:4em;
		grid-template-columns:calc(50% - 2em) calc(50% - 2em);

	}


	
	/* -------------------------------------------------------------------------------------
	=Basket
	------------------------------------------------------------------------------------- */

	#pm .bskt {
		
	}

	
	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
	}



	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	/*account menu panel*/
	#pmam {
		
	}

	/* -------------------------------------------------------------------------------------
	=ConfirmationPage
	------------------------------------------------------------------------------------- */


	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	
	/* home page
	------------------------------------------------------- */
	
	#a128319490 .artp{
		margin-left:0
	}
	#a128319490 #mnu_filter_search{
		grid-template-columns:repeat(1,auto);
		text-align:center;
	}

	#a128319490 form{
		display:grid;
		grid-template-areas:"form"
			"submit";
		grid-template-columns:1fr;
	}
	


	#a128319490 input{
		grid-area:submit;
		font-family:var(--heading-font);
		font-weight:var(--heading-font-weight);
		color:var(--dark-blue);
		font-size:1em;
		margin:auto;
		padding:.5em 2em;
		width:auto;
		height:auto;
		background-color:var(--yellow);
		border:none;
		border-radius:var(--border-radius);
		text-transform:none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}


	#a128319490 .attrsection{
		display:grid;
		grid-template-columns:1fr 2fr;
		grid-gap:1em;
		align-items:center;
	}

	#a128319490 .attrsection h5{
		text-align:right;
		margin:0;
	}

	#a128319490 .attrsection select{
		text-align:left;
		width:100%;
	}

	/*shop by age */
	#a128319491{
		/* grid-template-columns:repeat(2, 1fr); */
	}

			
	/*shop by learning skill */
	#a128319492{
		/* grid-template-columns:repeat(2, 1fr); */
	}

	#a128319492 .artp:after {
    content: '';
    width: 170px;
    height: 100px;
    position: absolute;
    top: -32px;
    right: 100px;
    background: url('https://s3-eu-west-1.amazonaws.com/orchardtoys/i/bnr/robins.webp?_t=23111614842') no-repeat center;
    background-size: 165px;
    pointer-events: none
}

	
	/* top nav links
	------------------------------------------------------- */

	
	ul.nav .l1>a{
		padding: 0 calc(1rem + 10px) 0 1rem;

	}
	
	ul.nav>li>a:only-child {
		padding: 0 1rem 0 1rem;
	}



	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	.page_blog #pm{
		display:grid;
		grid-template-areas:
			"header header"
			"blogs nav";
		grid-template-columns:7fr 3fr;
	}
	
	.page_blog .blogs,
	.page_blog .blog{
		grid-template-columns: repeat(2, 1fr);
	}


	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	
	/* home page
	------------------------------------------------------- */

	
	#a128319490 .imgcont{
		position:absolute;
		left:0;
		/* bottom:0; */
		max-width:calc(var(--site-max-width)/4);
	}
	
	
	#a128319490 .artp{
		margin-left:calc((var(--site-max-width)/4) + 1em)
	}
	#a128319490 #mnu_filter_search{
		grid-template-columns:repeat(2,auto);
	}

	
		
}
/* ------------------------------------------------------------------------------------
	SCREEN - Medium devices (landscape tablets, 768px and up) 
	Last Updated : 01. 12. 2024
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd

	Table of Contents
		=Definitions
		=SiteContainers		
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		=Swiffy Slider
		=Blog
		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Department
		=FeaturedProducts 
		=ProductPage 
		=Basket
		=Checkout Process
		=MyAccount
		=ConfirmationPage

------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 992px)  {

	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
	}

	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}


	
	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	
	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		/* grid-column: 1/-1; */
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		/* grid-column: 1/-1; */
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}


	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	.swiffy-slider ul, .swiffy-slider li {}
	
	.swiffy-slider .slidecont p {
		padding: 0;
		margin: 0;
	}
	
	.slider-product {
		--swiffy-slider-item-count: 3;
	}
	
	/* product sliders - code needs some tweaking */
	.carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 3;
	}
	
	/* department sliders - code needs some tweaking */
	.carousel.dept .swiffy-slider {
		--swiffy-slider-item-count: 3;
	}
	
	.carousel.dept .deptlink a.txt {}

	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt .ext {

		grid-template-columns: auto auto auto auto ;
		grid-template-areas:
		"infolinks infolinks infolinks account "
		"menulink logo logo basket "
		"nav nav nav nav "
		"search  search search search ";
		padding:0 1em;
	}

	#p49676291,
	#p50069505{
		grid-column:unset;
		grid-area:infolinks;

	}

	#a62062592 {
		grid-area:feefo;
		display:none;
	}
	#pt .search {
		grid-area: search;
		margin-bottom:1em;
	}
	#pt .bskt {
		grid-area: basket;
		text-align:right;
		/* align-self:start; */
	}
	
	#pt .bskt #mybskt{
		grid-template-columns:1fr;
		grid-template-areas: "icon value";
		max-width:150px;

		margin-left:auto;
		grid-column-gap:.5em;
	}

	#pt .bskt #mybskt img.btn{
		width:2em;
	}
	#pt .bskt #mybskt a.btn{
		margin:auto;
		width:2em;
	}
	
	#pt .bskt #mybskt p{
		text-align:center;
	}
	
	/*items in basket */
	#bsktitems{
		grid-area:items;
		display:none;
	}

	#bsktvalue span{
	display:none;
	}

	#pt .bskt h4{
		grid-area:freeshipping;
		display:none;
	}
	

	#pt .ext .pbnr{
		grid-area: logo;
		margin:auto;
	}

	#pt .ext .pbnr img{
		max-width:120px;
	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1000;
	}

	.home-hamburger .visible-xs {
		visibility: visible;
	}

	div.nav-wrapper {
		z-index:1001;
		min-height:0;
		background:var(--navbar-color);
	}
	
	div.nav-wrapper>ul.nav {
		top: 0;
	}

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(3,1fr);
		grid-gap:1em;
		margin:0 2em;
	}
	

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{}


	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}

	.deptHeader{
		grid-template-areas:
			"title"
			"image"
			"copy";
		grid-template-columns:1fr;
		margin-bottom:1em;
		border-radius:0;
	}

	.deptHeader h2{
		background-color:var(--highlight-color);
		color:var(--highlight-heading-color);
		text-align:center;
		font-size:2em;
		padding:.5em 0;
		border-bottom:3px solid white;
	}

	.deptHeader .artp{
		grid-area:copy;
		padding: 2rem;
		font-size:1.25em;
		text-align:center;
		background-color:var(--white);
		color:var(--text-color);
	}

	.deptHeader .imgcont{
		grid-area:image;
		border-left:0;		
	}


	.deptHeader .imgcont img{
		border-radius:0;
		margin:0;
		width:100%;
	}
		
	
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}


	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}


	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}

	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {
		position: relative;
		padding:0 1em;
		width:calc(100% - 2em);
	

	}

	#pf #carouselArtImgs {
	--swiffy-slider-item-count:4
}

	/* -------------------------------------------------------------------------------------
	=Bottom Panel #pb
	------------------------------------------------------------------------------------- */
	
	#pb{}

	#pb .ext {
	
		padding:0 1em;
		padding-top: 3em;
		padding-bottom:3em;
		grid-template-columns: 1fr;
		grid-template-areas:
			"products"
			"about" 
			"contact"
			"account"
			"policy"
			"logos";
	}

	#p49676307,
	#p50069520{
		grid-area: policy;
		border-top:none;
		text-align:left;
		margin-top:0em;
	}

	#p49676307 li,
	#p50069520 li{
		display:grid;
	}

	#a128548865 {
		grid-area: logos;
		text-align:left;
		margin-top:2em;
	}



	#a128548865 .artp{
		display:grid;
		grid-gap:1em;
		grid-template-columns:1fr;
		align-items:center;
	}

	#a128548865 .artp p{
		margin:0;
	}

	#a128548865 .artp p img{
		max-width:200px;
	}

	#a128548865 .inline{
		margin:0;
		text-align:center;
	}

	#a128548865 .inline li{
	font-size:1.25em;
	padding:.25rem
}

	


	/* accordion
	------------------------------------------------------- */
	#pb .ext h3.header{
		display:none;
	}

	#pb .accordion{
		width:100%;
	}

	
	#pb .accordion .header {
		font-family: var(--text-font);
		font-weight: var(--heading-font-weight);
		font-size: 1.25em;
		cursor: pointer;
		border-radius: 0;
		/* padding: 1em 0; */
		margin: 0;
		background-color:transparent;
		color:var(--white);
		text-transform:uppercase;
		margin-bottom:0em;
	}

	#pb .accordion h3{
		display:none;
	}

	#pb .accordion .pane{
		display: none;
		padding:0em;
		color:var(--black);
		background-color:transparent;
	}

	#pb .accordion .pane ul{
		margin:0;
		display:block;
		padding:0;
	}

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf{}

	
	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	#site.blog {}
	
	/* -------------------------------------------------------------------------------------
	=SearchHeader / SearchFooter
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=FilterSearch
	------------------------------------------------------------------------------------- */

	.fstrigspn {
		display: none;
	}
	
	/* -------------------------------------------------------------------------------------
	=Department
	------------------------------------------------------------------------------------- */

	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(2, 1fr);
	}

	.depttree li {
		/*heights needed to deal with double lined titles*/
		grid-template-rows:6em auto auto;
	}

	.depttree li a.txt {
		grid-area:title;
		text-align:center;
		font-family:var(--heading-font);
		padding:1rem;
		font-size:1.5em
	}
	
	#sr {
		grid-template-columns: repeat(4, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* -------------------------------------------------------------------------------------
	=FeaturedProducts
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=ProductPage
	------------------------------------------------------------------------------------- */
	#pi .main {
		grid-column-gap:2em;
		grid-template-columns:calc(50% - 1em) calc(50% - 1em);
	}

	#pi .gallery #mainimages{
		position:unset;
		top:0;
	}

	#pi .gallery #galleryimages{
		--swiffy-slider-item-count: 3;
	}
	

	#pi .pititle {
		text-align:center;
	}

	.pricecomp{
		text-align:center;
	}

	#feefologohere{
		text-align:center;
	}


	/* Feefo reviews - summary
	------------------------------------------------------*/
	.feeforeviews {}
	
	.feeforeviews .feefosummary {
		display:grid;
		grid-template-areas:"title"
			"stars" 
			"ratingNumber";
		grid-template-columns:1fr;
	}


	.feeforeviews .feefosummary span.ratingNumber {
		grid-area:ratingNumber;
		text-align:left;
		font-size: .8em;
		display:inline-block;
		margin-bottom:1em;
	}


	
	/* -------------------------------------------------------------------------------------
	=Basket
	------------------------------------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			"lines"
			"totals"
			"shipping"
			"voucher"
			"buttons"
			"prompane";
		align-items:start;
		margin-bottom:4rem;
	}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			"icon giftwrap giftwrap giftwrap"
				"icon gifttext gifttext gifttext"
				"icon gtentry gtentry gtentry "
			". skuselect skuselect skuselect"
			"qty qty price rem"
			". . netprice  . ";
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

	

	#pm .bskt  .line .qty label{
		display:none;
	}
	
	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}


	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"continue"
							"summary"
							;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: 75%;
}



	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 1rem);
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: auto;
	}
	
	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	
	
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}


		
	#pmam .myacctmenu{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pmam .myacctmenu.showmyacctmenu{
		display:block;
	}


	.mamclsdiv .mamclsspn{
	display:inline-block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	/* -------------------------------------------------------------------------------------
	=ConfirmationPage
	------------------------------------------------------------------------------------- */


	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	
	/* home page
	------------------------------------------------------- */

	/*need somehelp choosing */
	#a128319490 .imgcont{
		display:none;
	}
	
	
	#a128319490 .artp{
		margin-left:0
	}
	#a128319490 #mnu_filter_search{
		grid-template-columns:repeat(1,auto);
		text-align:center;
	}

	#a128319490 form{
		display:grid;
		grid-template-areas:"form"
			"submit";
		grid-template-columns:1fr;
	}
	


	#a128319490 input{
		grid-area:submit;
		font-family:var(--heading-font);
		font-weight:var(--heading-font-weight);
		color:var(--dark-blue);
		font-size:1em;
		margin:auto;
		padding:.5em 2em;
		width:auto;
		height:auto;
		background-color:var(--yellow);
		border:none;
		border-radius:var(--border-radius);
		text-transform:none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}


	#a128319490 .attrsection{
		display:grid;
		grid-template-columns:1fr 2fr;
		grid-gap:1em;
		align-items:center;
	}

	#a128319490 .attrsection h5{
		text-align:right;
		margin:0;
	}

	#a128319490 .attrsection select{
		text-align:left;
		width:100%;
	}

	/*shop by age */
	#a128319491{
		/* grid-template-columns:repeat(2, 1fr); */
	}

			
	/*shop by learning skill */
	#a128319492{
		/* grid-template-columns:repeat(2, 1fr); */
	}

		#a128319492 .artp:after {
    content: '';
    width: 170px;
    height: 100px;
    position: absolute;
    top: -32px;
    right: 0px;
    background: url('https://s3-eu-west-1.amazonaws.com/orchardtoys/i/bnr/robins.webp?_t=23111614842') no-repeat center;
    background-size: 135px;
    pointer-events: none
}

	#pm .artp ul.twoCols{
	    columns:2;
	    margin:1em 0;
	    padding:0;
	}

	/* letter to santa hacks
	------------------------------------------------------- */
	#site.santa #pm .pmind{
		margin-top:0;
	}

/* things to do */
.thingstodoEntry{
	--border-radius:2em;
	grid-column: auto / span 6;
	border:2px solid var(--highlight-color);
	background-color:var(--highlight-color);
	border-radius:var(--border-radius);
	display:grid;
	grid-template-areas:"title title"
						"image content";
	grid-template-rows:auto;
}
	
/* misplaced pieces
	------------------------------------------------------- */
	
	/* main contact us intro article with sections */
	
	#pm #a132218880{}
	
	
	#pm #a132218880 ul.boxed{
		padding-inline-start: 0em;
		margin-block-start: 0em;
		margin-block-end: 0em;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}

	/* Contact Us
	------------------------------------------------------- */
	
	/* main contact us intro article with sections */
	
	#pm #a75005955{}
	
	
	#pm #a75005955 ul{
		padding-inline-start: 0em;
		margin-block-start: 0em;
		margin-block-end: 0em;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}


	/* letter to santa
	------------------------------------------------------- */

	#a131989504{
		grid-template-columns: 1fr;
	}

	#a131989504 .imgcont,
	#a131989504 .artp{
		grid-column:unset;
	}

	/* letter to santa countdown */
	#a131956736 .artp{
		grid-column:1/-1;
		text-align:center;
	}
	#countdown {
		font-size: 20px;
	}

	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	.page_blog #pm{
		grid-template-columns:70% 30%;
	}
	
	.page_blog .blogs,
	.page_blog .blog{
		grid-template-columns: repeat(2, 1fr);
	}

}
/* ------------------------------------------------------------------------------------
	SCREEN - Small devices (portrait tablets and large phones, 600px and up)  
	Last Updated : 18. 11. 2024
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd

	Table of Contents
		=Definitions
		=SiteContainers		
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		=Swiffy Slider
		=Blog
		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Department
		=FeaturedProducts 
		=ProductPage 
		=Basket
		=Checkout Process
		=MyAccount
		=ConfirmationPage

------------------------------------------------------------------------------------- */
@media only screen and (min-width: 600px) and (max-width:768px) {

	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
	}

	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}


	
	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	
	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}


	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	.swiffy-slider ul, .swiffy-slider li {}
	
	.swiffy-slider .slidecont p {
		padding: 0;
		margin: 0;
	}
	
	.slider-product {
		--swiffy-slider-item-count: 2;
	}

	.slider-cta {
		--swiffy-slider-item-count: 1;
	}
	
	/* product sliders - code needs some tweaking */
	.carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	/* department sliders - code needs some tweaking */
	.carousel.dept .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	.carousel.dept .deptlink a.txt {}

	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt .ext {

		grid-template-columns: 1fr 5em 1fr ;
		grid-template-areas:
		"account account account "
		"infolinks infolinks infolinks "
		"menulink logo basket "
		"nav nav nav "
		"search search search ";
		padding:0 1em;
	}

	#p49676291,
	#p50069505{
		grid-area:infolinks;
		display:none;
	}

	#a62062592 {
		grid-area:feefo;
		display:none;
	}
	#pt .search {
		grid-area: search;
		margin-top:1em;
		margin-bottom:1em;
	}
	#pt .bskt {
		grid-area: basket;
		text-align:right;
		/* align-self:start; */
		margin-left:auto;
		width:120px;
	}
	
	#pt .bskt #mybskt{
		grid-template-columns:1fr;
		grid-template-areas: "icon value";

		margin-left:auto;
		grid-column-gap:.5em;
	}

	#pt .bskt #mybskt img.btn{
		width:2em;
	}


	#pt .bskt #mybskt a.btn{
		margin:auto;
		width:2em;
	}
	
	#pt .bskt #mybskt p{
		text-align:center;
	}
	
	/*items in basket */
	#bsktitems{
		grid-area:items;
		display:none;
	}

	#bsktvalue span{
	display:none;
	}



	#pt .bskt h4{
		grid-area:freeshipping;
		display:none;
	}

	#pt .ext .pbnr{
		grid-area: logo;
		margin:auto;
	}

	#pt .ext .pbnr img{

	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1000;
	}

	.home-hamburger .visible-xs {
		visibility: visible;
	}

	div.nav-wrapper {
		z-index:1001;
		min-height:0;
		background:var(--navbar-color);
	}
	
	div.nav-wrapper>ul.nav {
		top: 0;
	}

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(2,1fr);
		grid-gap: 1em;
		margin:0 2em;
	}
	
	div.menu-grid > div.menu-row ul li .deptlink{
		grid-template-columns:8em 1fr;
		grid-template-areas:"image text";
		align-items:center;
		border-radius:.5em;
		background-color:var(--light-blue);
		grid-gap:1em;
			grid-template-rows:auto;
	}

	div.menu-grid > div.menu-row ul li .deptlink a.img{
	grid-area:image;
	background-color:var(--white);
	align-self:start;
	border-right:5px white solid
}

	div.menu-grid > div.menu-row ul li .deptlink a.txt{
		align-self:center;
		text-align:left;
		font-size:1.25em;
	}
			

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{}


/* -------------------------------------------------------------------------------------
	=Left Panel #pl
	------------------------------------------------------------------------------------- */
	#pl {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Right Panel #pr
	------------------------------------------------------------------------------------- */
	#pr {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{
		display:block;
	}

	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin: 0 1rem;
}
	
	.pmfull {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 2rem);
		display: block;
		vertical-align: top;
		margin:0 1rem;
	}
	.pmfull {
		margin:0 1rem;
	}

	.deptHeader,
	.pmwide .deptHeader{
		grid-template-areas:
			"title"
			"image"
			"copy";
		grid-template-columns:1fr;
		margin-bottom:1em;
		border-radius:0;
	}

	.deptHeader h2{
		background-color:var(--highlight-color);
		color:var(--highlight-heading-color);
		text-align:center;
		font-size:2em;
		padding:.5em 0;
		border-bottom:3px solid white;
	}

	.deptHeader .artp{
		grid-area:copy;
		padding: 2rem;
		font-size:1.25em;
		text-align:center;
		background-color:var(--white);
		color:var(--text-color);
	}
	
	.deptHeader .imgcont{
		grid-area:image;
		border-left:0;		
	}

	.deptHeader .imgcont img{
		border-radius:0;
		margin:0;
		width:100%
	}
		
	
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {
		position: relative;
		padding:0 1em;
		width:calc(100% - 2em);
	
		
	}

	#pf #carouselArtImgs {
		--swiffy-slider-item-count:2
	}

	#pf .ext .news {
		width:100%;
	}

	/* -------------------------------------------------------------------------------------
	=Bottom Panel #pb
	------------------------------------------------------------------------------------- */
	#pb{}

	#pb .ext {
	
		padding:0 1em;
		padding-top: 3em;
		padding-bottom:3em;
		grid-template-columns: 1fr;
		grid-template-areas:
			"products"
			"about" 
			"contact"
			"account"
			"policy"
			"logos";
	}




	#p49676307,
	#p50069520{
		grid-area: policy;
		border-top:none;
		text-align:left;
		margin-top:0em;
	}

	#p49676307 li,
	#p50069520 li{
		display:grid;
	}

	#a128548865 {
		grid-area: logos;
		text-align:left;
		margin-top:2em;
	}



	#a128548865 .artp{
		display:grid;
		grid-gap:1em;
		grid-template-columns:1fr;
		align-items:center;
	}

	#a128548865 .artp p{
		margin:0;
	}

	#a128548865 .artp p img{
		max-width:200px;
	}

	#a128548865 .inline{
		margin:0;
		text-align:center;
	}

	#a128548865 .inline li{
	font-size:1.25em;
	padding:.25rem
}

	


	/* accordion
	------------------------------------------------------- */
	#pb .ext h3.header{
		display:none;
	}

	#pb .accordion{
		width:100%;
	}

	
	#pb .accordion .header {
		font-family: var(--text-font);
		font-weight: var(--heading-font-weight);
		font-size: 1.25em;
		cursor: pointer;
		border-radius: 0;
		/* padding: 1em 0; */
		margin: 0;
		background-color:transparent;
		color:var(--white);
		text-transform:uppercase;
		margin-bottom:0em;
	}

	#pb .accordion h3{
		display:none;
	}

	#pb .accordion .pane{
		display: none;
		padding:0em;
		color:var(--black);
		background-color:transparent;
	}

	#pb .accordion .pane ul{
		margin:0;
		display:block;
		padding:0;
	}

	

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf{}



	/* left panel filter with toggle - only works if it is ONLY filter on the left panel
	------------------------------------------------------- */
	.filter {
		width:0;
	}

	.filter{
		height: 100%;
		width: 0%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	 .filter.showfilter{
		display:block;
		width:50%;
	}


	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	.filter .mnu_filter_search{
		display:grid;
		grid-template-columns:1fr;
		grid-gap:1em;
	}
	
	/* -------------------------------------------------------------------------------------
	=SearchHeader / SearchFooter
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=FilterSearch
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=Department
	------------------------------------------------------------------------------------- */

	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:1fr;
	}

	.depttree li {
		grid-template-areas:
			"image title"
			"image shopnow";
		grid-template-columns: 1fr 1fr;
grid-template-rows:auto;
	}
	
	.depttree li a.txt {
		grid-area:title;
		text-align:center;
		font-family:var(--heading-font);
		padding:0 1rem;
		font-size:1.5em;
		align-self:end;
	}

	.shopnow{
		grid-area:shopnow;
		align-self:start;
		background-color:transparent;
		padding:0;
	}

	.depttree li a.btn {
		text-align:center;
		font-family:var(--text-font);
		padding: 0rem;
		background-color:transparent;
		border:none;
		color:var(--white);
		display:inline-block;
		text-decoration:underline;
		margin:auto;
}

	.depttree li:nth-child(2) a.btn , .depttree li:nth-child(9) a.btn {
	--highlight-color:var(--yellow);
	color:var(--dark-blue)
}


	
	
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}

	.fprd{
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* -------------------------------------------------------------------------------------
	=FeaturedProducts
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=ProductPage
	------------------------------------------------------------------------------------- */
	#pi .main {
		grid-template-columns: 1fr;
		grid-template-areas: "top"
			"left"
			"right"
			"bottom";
	}

	#pi .gallery #mainimages{
		position:unset;
		top:0;
	}

	#galleryimages{
		display:none;
	}
	

	#pi .pititle {
		text-align:center;
	}

	.pricecomp{
		text-align:center;
	}

	#feefologohere{
		text-align:center;
	}


	
	/* -------------------------------------------------------------------------------------
	=Basket
	------------------------------------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			"lines"	
			"totals"
			"voucher"
			"shipping"
			"buttons"
			"prompane";
		align-items:start;
		margin-bottom:4rem;
	}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			"icon giftwrap giftwrap giftwrap"
				"icon gifttext gifttext gifttext"
				"icon gtentry gtentry gtentry "
			". skuselect skuselect skuselect"
			"qty qty price rem"
			". . netprice  . ";
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

	#pm .bskt  .line .qty label{
		display:none;
	}
	
	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}


	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"continue"
							"summary"
							;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: var(--site-max-width);
	}



	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: var(--site-max-width);
		padding:0;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: 0;
	}
	
	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}


		
	#pmam .myacctmenu{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pmam .myacctmenu.showmyacctmenu{
		display:block;
	}


	.mamclsdiv .mamclsspn{
	display:inline-block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	.page_blog #pm{
		display:grid;
		grid-template-areas:
			"header"
			"blogs "
			"nav";
		grid-template-columns:1fr;
		grid-template-rows:auto 1fr;
		justify-content:end;
		/* grid-column-gap:3em; */
		grid-auto-flow:column dense;
	}
	
	.page_blog .blogs,
	.page_blog .blog{
		grid-template-columns: repeat(2, 1fr);
	}

	.page_blog section.blog{
		display:grid;
		grid-column:1/-1;
		grid-template-columns: 1fr;
		grid-template-areas:"title"
							"text"
						"images";
		grid-gap:1em;
	}
	
	.page_blog section.blog.textImage,
	.page_blog section.textImage,
	.page_blog section.thirdWidth {
		grid-column:1/-1;
		grid-template-columns: 1fr;
		grid-template-areas:"title"
							"text"
							"images";
	}

	.page_blog section.blog.imageText,
	.page_blog section.imageText{
		grid-template-columns: 1fr;
		grid-template-areas:"title"
							"images"
							"text";
	}

	.blognav{
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:auto auto 1fr;
	grid-gap:1em;
	grid-area:nav;
	align-self:start;
	padding-left:0em;
}


	/* -------------------------------------------------------------------------------------
	=ConfirmationPage
	------------------------------------------------------------------------------------- */

	/* -------------------------------------------------------------------------------------
	=Sitemap 
	------------------------------------------------------------------------------------- */
	#pm .smap ul {
		list-style-position: inside;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}


	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	
	/* home page
	------------------------------------------------------- */
	/*need somehelp choosing */
	#a128319490 .imgcont{
		display:none;
	}
	
	#a128319490 .artp{
		margin-left:0
	}
	#a128319490 #mnu_filter_search{
		grid-template-columns:repeat(1,auto);
		text-align:center;
	}

	#a128319490 form{
		display:grid;
		grid-template-areas:"form"
			"submit";
		grid-template-columns:1fr;
	}

	#a128319490 input{
		grid-area:submit;
		font-family:var(--heading-font);
		font-weight:var(--heading-font-weight);
		color:var(--dark-blue);
		font-size:1em;
		margin:auto;
		padding:.5em 2em;
		width:auto;
		height:auto;
		background-color:var(--yellow);
		border:none;
		border-radius:var(--border-radius);
		text-transform:none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}


	#a128319490 .attrsection{
		display:grid;
		grid-template-columns:1fr 2fr;
		grid-gap:1em;
		align-items:center;
	}

	#a128319490 .attrsection h5{
		text-align:right;
		margin:0;
	}

	#a128319490 .attrsection select{
		text-align:left;
		width:100%;
	}

	/*shop by age */
	#a128319491{
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}

			
	/*shop by learning skill */
	#a128319492{
		grid-template-columns:repeat(2, 1fr);
				grid-gap:.5em;
	}


	#a128319492 .artp:after {
	    content: '';
	    background: none;

	}

	.page_home .blogs{
		grid-template-columns:1fr ;
		grid-gap:1em;
	}

	/* Contact Us - catalogue requests
	------------------------------------------------------- */
	#pm .pmind#prom-1495793649,
	#pm .pmind#prom-1685258238{
		grid-template-areas:"intro" 
			"catalogue"
			"form"
			"links";
		grid-template-columns:1fr;
	}

	#pm .artp ul.twoCols{
	    columns:2;
	    margin:1em 0;
	    padding:0;
	}


	/*new missing pieces */
	.customMissing .form{
			grid-column: 1/-1;
	}
	/* letter to santa hacks
	------------------------------------------------------- */
	#site.santa #pm .pmind{
		margin-top:0;
	}

	/* things to do */
	.thingstodoEntry{
		--border-radius:2em;
		grid-column: auto / span 12;
		border:2px solid var(--highlight-color);
		background-color:var(--highlight-color);
		border-radius:var(--border-radius);
		display:grid;
		grid-template-areas:"title title"
							"image content";
		grid-template-rows:auto;
	}
		
	/* misplaced pieces
	------------------------------------------------------- */
	
	/* main contact us intro article with sections */
	#pm #a132218880{}
	
	#pm #a132218880 ul.boxed{
		padding-inline-start: 0em;
		margin-block-start: 0em;
		margin-block-end: 0em;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}

	/* Contact Us
	------------------------------------------------------- */
	/* main contact us intro article with sections */
	
	#pm #a75005955{}
	
	#pm #a75005955 ul{
		padding-inline-start: 0em;
		margin-block-start: 0em;
		margin-block-end: 0em;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}

/* letter to santa
	------------------------------------------------------- */

	#a131989504{
		grid-template-columns: 1fr;
	}

	#a131989504 .imgcont,
	#a131989504 .artp{
		grid-column:unset;
	}

	/* letter to santa countdown */
	#a131956736 .artp{
		grid-column:1/-1;
		text-align:center;
	}
	#countdown {
		font-size: 16px;
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra small devices (phones, 600px and down) 
	Last Updated : 18. 11. 2024
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd

	Table of Contents
		=Definitions
		=SiteContainers
		=Grid Layout
		=Swiffy Slider
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		
		=Blog
		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Department
		=FeaturedProducts 
		=ProductPage 
		=Basket
		=Checkout Process
		=MyAccount
		=ConfirmationPage

------------------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {

	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
	}

	h2{
		font-size:1.8em;
	}

	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}


	
	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	
	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}


	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	.swiffy-slider ul, .swiffy-slider li {}
	
	.swiffy-slider .slidecont p {
		padding: 0;
		margin: 0;
	}
	
	.slider-product {
		--swiffy-slider-item-count: 2;
	}

	.slider-cta {
		--swiffy-slider-item-count: 1;
	}
	
	/* product sliders - code needs some tweaking */
	.carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	/* department sliders - code needs some tweaking */
	.carousel.dept .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	.carousel.dept .deptlink a.txt {}

	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt .ext {

		grid-template-columns: 1fr  1fr 5em 2fr ;
		grid-template-areas:
		"account account account account "
		"menulink  searchtoggle logo basket "
		"nav nav nav nav "
		"search search search search ";
		padding:0 1em;
	}

	#p49676291,
	#p50069505{
		grid-area:infolinks;
		display:none;
	}

	#a62062592,
	#a62062592
	{
		grid-area:feefo;
		display:none;
	}

	#pt .icon.srch{
	grid-area:searchtoggle;
	/* display:block; */
}


/* mikes hack of a search toggle */
	#a128843776{
		display:block;
		grid-area:searchtoggle;
	}

	#a128843776 button{
		background-color:transparent;
		border:0;
		outline:0;
		color:var(--white);
		font-size:1.6em;
	}
	
	#pt .search {
		grid-area: search;
		margin:1em;
		visibility:hidden;
		height:0;
	}

	#pt .search.toggleSearch {
		grid-area: search;
		visibility:visible;
		height:auto;
		margin:1em;
	}



	
	#pt .bskt {
		grid-area: basket;
		text-align:right;
		/* align-self:start; */
		width:100%;
		max-width: 120px;
		margin-left:auto;
	}

	#pt .bskt a.bsktitems{
		display:none;
	}
	
	#pt .bskt #mybskt{
		grid-template-columns:1.5em 1fr;
		grid-template-areas: "icon value";

		margin-left:auto;
		grid-column-gap:.5em;
	}

	#pt .bskt #mybskt img.btn{
		width:2em;
	}

	#pt .bskt #mybskt a.btn{
		margin:auto;
		width:2em;
	}
	
	#pt .bskt #mybskt p{
		text-align:center;
	}
	
	/*items in basket */
	#bsktitems{
		grid-area:items;
		display:none;
	}

	#bsktvalue span{
	display:none;
	}



	#pt .bskt h4{
		grid-area:freeshipping;
		display:none;
	}
	

	#pt .ext .pbnr{
		grid-area: logo;
		margin:auto;
	}

	#pt .ext .pbnr img{

	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index: 1000;
	}

	.home-hamburger .visible-xs {
		visibility: visible;
	}

	div.nav-wrapper {
		z-index:1001;
		min-height:0;
		background:var(--navbar-color);
	}
	
	div.nav-wrapper>ul.nav {
		top: 0;
	}

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(1,1fr);
		grid-gap:1em;
		margin:0 2em;
	}
	
	div.menu-grid > div.menu-row ul li .deptlink{
		grid-template-columns:8em 1fr;
		grid-template-areas:"image text";
		align-items:center;
		border-radius:.5em;
		background-color:var(--light-blue);
		grid-gap:1em;
		grid-template-rows:auto;
	}

	div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-area:image;
		background-color:var(--white);
		align-self:start;
		border-right:5px white solid
	}

	div.menu-grid > div.menu-row ul li .deptlink a.txt{
		align-self:center;
		text-align:left;
		font-size:1.25em;
	}
			

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{}


	/* -------------------------------------------------------------------------------------
	=Left Panel #pl
	------------------------------------------------------------------------------------- */
	#pl {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Right Panel #pr
	------------------------------------------------------------------------------------- */
	#pr {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}


	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{
		display:block;
	}
	
	.pmfull,
	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 2rem);
		display: block;
		vertical-align: top;
		margin:0 1rem;
	}


	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}

	

	.deptHeader,
	.pmwide .deptHeader{
		grid-template-areas:
			"title"
			"image"
			"copy";
		grid-template-columns:1fr;
		margin-bottom:1em;
		border-radius:0;
	}

	.deptHeader h2{
		background-color:var(--highlight-color);
		color:var(--highlight-heading-color);
		text-align:center;
		font-size:2em;
		padding:.5em 0;
		border-bottom:3px solid white;
	}

	.deptHeader .artp p{
		font-size:1.0em;
		line-height:1.3;
	}

	.deptHeader .artp{
		grid-area:copy;
		padding: 1rem;
		font-size:1.25em;
		text-align:center;
		background-color:white;
		color:var(--text-color);
	}
	.deptHeader .imgcont{
		grid-area:image;
		border-left:0;		
	}

	.deptHeader .imgcont img{
		border-radius:0;
		width:100%;
	}
		
	
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}


	

	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {
		position: relative;
		padding:0 1em;
		width:calc(100% - 2em);
	
		
	}

	#pf #carouselArtImgs {
		--swiffy-slider-item-count:2
	}

	#pf .ext .news {
		width:100%;
	}

	/* -------------------------------------------------------------------------------------
	=Bottom Panel #pb
	------------------------------------------------------------------------------------- */
	#pb{}

	#pb .ext {
		grid-gap:1em;
	padding:0 1em;
	padding-top: 3em;
	padding-bottom: 3em;
	grid-template-columns: 1fr;
	grid-template-areas:
	"products"
	"about"
	"contact"
	"account"
	"policy"
	"logos";
	}




	#p49676307,
	#p50069520{
		grid-area: policy;
		border-top:none;
		text-align:left;
		margin-top:0em;
	}

	#p49676307 li,
	#p50069520 li{
		display:grid;
	}

	#a128548865 {
		grid-area: logos;
		text-align:left;
		margin-top:2em;
	}



	#a128548865 .artp{
		display:grid;
		grid-gap:1em;
		grid-template-columns:1fr;
		align-items:center;
	}

	#a128548865 .artp p{
		margin:0;
	}

	#a128548865 .artp p img,
	.feefoaward img,
	.fsc img{
		max-width:200px;
	}

	#a128548865 .inline{
		margin:0;
		text-align:center;
	}

	#a128548865 .inline li{
	font-size:1.25em;
	padding:.25rem
}

	


	/* accordion
	------------------------------------------------------- */
	#pb .ext h3.header{
		display:none;
	}

	#pb .accordion{
		width:100%;
	}

	
	#pb .accordion .header {
		font-family: var(--text-font);
		font-weight: var(--heading-font-weight);
		font-size: 1.25em;
		cursor: pointer;
		border-radius: 0;
		/* padding: 1em 0; */
		margin: 0;
		background-color:transparent;
		color:var(--white);
		text-transform:uppercase;
		margin-bottom:0em;
	}

	#pb .accordion h3{
		display:none;
	}

	#pb .accordion .pane{
		display: none;
		padding:0em;
		color:var(--black);
		background-color:transparent;
	}

	#pb .accordion .pane ul{
		margin:0;
		display:block;
		padding:0;
	}

	

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf{}




	/* left panel filter with toggle - only works if it is ONLY filter on the left panel
	------------------------------------------------------- */
	.filter {
		width:0;
	}

	.filter{
		height: 100%;
		width: 0%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	 .filter.showfilter{
		display:block;
		width:50%;
	}


	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	.filter .mnu_filter_search{
	display:grid;
	grid-template-columns:1fr;
	grid-gap:1em;

}
	
	
	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	.page_blog #pm{
		display:grid;
		grid-template-areas:
			"header"
			"blogs "
			"nav";
		grid-template-columns:1fr;
		grid-template-rows:auto 1fr;
		justify-content:end;
		/* grid-column-gap:3em; */
		grid-auto-flow:column dense;
	}
	
	.page_blog .blogs,
	.page_blog .blog{
		grid-template-columns: repeat(2, 1fr);
	}

	.page_blog section.blog{
		display:grid;
		grid-column:1/-1;
		grid-template-columns: 1fr;
		grid-template-areas:"title"
							"text"
						"images";
		grid-gap:1em;
	}
	
	.page_blog section.blog.textImage,
	.page_blog section.textImage,
	.page_blog section.thirdWidth {
		grid-column:1/-1;
		grid-template-columns: 1fr;
		grid-template-areas:"title"
							"text"
							"images";
	}

	.page_blog section.blog.imageText,
	.page_blog section.imageText{
		grid-template-columns: 1fr;
		grid-template-areas:"title"
							"images"
							"text"						;
	}
	
	.page_blog section.blog.noTxt{
		grid-template-columns: 1fr;
		grid-template-areas:"title"
							"text"
						"images";
	}

	.blognav{
		padding-left:0em;
	}

	
	/* -------------------------------------------------------------------------------------
	=SearchHeader / SearchFooter
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=FilterSearch
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=Department
	------------------------------------------------------------------------------------- */

	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:1fr;
	}

	.depttree li {
		grid-template-areas:
			"image title"
			"image shopnow";
		grid-template-rows:auto;
		grid-template-columns: 1fr 1fr;
		/* border:none; */
	}

	.depttree li a.img{
		border-right:3px solid white;
	}
	
	.depttree li a.txt {
		grid-area:title;
		text-align:center;
		font-family:var(--heading-font);
		padding:0 1rem;
		font-size:1.5em;
		align-self:end;
	}

	.shopnow{
		grid-area:shopnow;
		align-self:start;
		background-color:transparent;
		padding:0;
	}

	.depttree li a.btn {
		text-align:center;
		font-family:var(--text-font);
		padding: 0rem;
		background-color:transparent;
		border:none;
		color:var(--white);
		display:inline-block;
		text-decoration:underline;
		margin:auto;
}

	.depttree li:nth-child(2) a.btn , .depttree li:nth-child(9) a.btn {
	--highlight-color:var(--yellow);
	color:var(--dark-blue)
}


	
	
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}

	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* -------------------------------------------------------------------------------------
	=FeaturedProducts
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=ProductPage
	------------------------------------------------------------------------------------- */
	#pi .main {
		grid-template-columns: 1fr;
		grid-template-areas: "top"
			"left"
			"right"
			"bottom";
	}

	#pi .gallery #mainimages{
		position:unset;
		top:0;
	}

	#galleryimages{
		display:none;
	}
	

	#pi .pititle {
		text-align:center;
	}

	.pricecomp{
		text-align:center;
	}

	#feefologohere{
		text-align:center;
	}


	#pi .pititle h2{
		font-size:2em;
	}


	.pidescx li span{
		margin-right:0em;}

	.pidescx  br{
		display:block;
	}

	.pifile img{
		max-width:150px;
	}


	
	/* -------------------------------------------------------------------------------------
	=Basket
	------------------------------------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			"lines"
			"totals"
			"voucher"
			"shipping"
			"buttons"	
		"prompane";
		align-items:start;
		margin-bottom:4rem;
	}


	#pm .bskt  .line{

		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			"icon giftwrap giftwrap giftwrap"
				"icon gifttext gifttext gifttext"
				"icon gtentry gtentry gtentry "
			". skuselect skuselect skuselect"
			"qty qty price rem"
			". . netprice  . ";
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

	#pm .bskt  .line .qty label{
		display:none;
	}
	
	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}


	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"continue"
							"summary"
							;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: var(--site-max-width);
	}



	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: var(--site-max-width);
		padding:0;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: 0;
	}
	
	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */


	
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}


		
	#pmam .myacctmenu{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pmam .myacctmenu.showmyacctmenu{
		display:block;
	}


	.mamclsdiv .mamclsspn{
	display:inline-block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	/* -------------------------------------------------------------------------------------
	=ConfirmationPage
	------------------------------------------------------------------------------------- */


	/* -------------------------------------------------------------------------------------
	=Sitemap 
	------------------------------------------------------------------------------------- */
	#pm .smap ul {
		list-style-position: inside;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	
	/* home page
	------------------------------------------------------- */

	/*need somehelp choosing */
	#a128319490 .imgcont{
		display:none;
	}
	
	
	#a128319490 .artp{
		margin-left:0
	}
	#a128319490 #mnu_filter_search{
		grid-template-columns:repeat(1,auto);
		text-align:center;
	}

	#a128319490 form{
		display:grid;
		grid-template-areas:"form"
			"submit";
		grid-template-columns:1fr;
	}
	


	#a128319490 input{
		grid-area:submit;
		font-family:var(--heading-font);
		font-weight:var(--heading-font-weight);
		color:var(--dark-blue);
		font-size:1em;
		margin:auto;
		padding:.5em 2em;
		width:auto;
		height:auto;
		background-color:var(--yellow);
		border:none;
		border-radius:var(--border-radius);
		text-transform:none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}


	#a128319490 .attrsection{
		display:grid;
		grid-template-columns:1fr 2fr;
		grid-gap:1em;
		align-items:center;
	}

	#a128319490 .attrsection h5{
		text-align:right;
		margin:0;
	}

	#a128319490 .attrsection select{
		text-align:left;
		width:100%;
	}

	/*shop by age */
	#a128319491{
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}

			
	/*shop by learning skill */
	#a128319492{
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}

	#a128319492 .artp:after {
	    content: '';
	    background: none;

	}

	.page_home .blogs{
		grid-template-columns:1fr ;
		grid-gap:1em;
	}


	/* Contact Us
	------------------------------------------------------- */
	
	#prom-1495793647,
	#prom-1661272041{}
	
	#prom-1495793647 .art,
	#prom-1661272041 .art{
		display:grid;
		grid-template-columns:repeat(1,1fr);
		grid-gap:1em;
	}



	/* Contact Us - catalogue requests
	------------------------------------------------------- */
	#pm .pmind#prom-1495793649,
	#pm .pmind#prom-1685258238{
		grid-template-areas:"intro" 
			"catalogue"
			"form"
			"links";
		grid-template-columns:1fr;
	}

	#pm .artp ul.twoCols{
	    columns:2;
	    margin:1em 0;
	    padding:0;
	}

	/*new missing pieces */
	.customMissing .form{
			grid-column: 1/-1;
	}
	/* letter to santa hacks
	------------------------------------------------------- */
	#site.santa #pm .pmind{
		margin-top:0;
	}

	/*things to do */

	/* things to do */
	.thingstodoEntry{
		--border-radius:2em;
		grid-column: auto / span 12;
		border:2px solid var(--highlight-color);
		background-color:var(--highlight-color);
		border-radius:var(--border-radius);
		display:grid;
		grid-template-areas:"title title"
							"image content";
		grid-template-rows:auto;
	}

	/* misplaced pieces
	------------------------------------------------------- */
	
	/* main contact us intro article with sections */
	
	#pm #a132218880{}
	
	
	#pm #a132218880 ul.boxed{
		padding-inline-start: 0em;
		margin-block-start: 0em;
		margin-block-end: 0em;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}

	/* Contact Us
	------------------------------------------------------- */
	
	/* main contact us intro article with sections */
	
	#pm #a75005955{}
	
	#pm #a75005955 ul{
		padding-inline-start: 0em;
		margin-block-start: 0em;
		margin-block-end: 0em;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap:.5em;
	}	

	/* letter to santa
	------------------------------------------------------- */

	/* letter to santa countdown */
	#a131956736 .artp{
		grid-column:1/-1;
		text-align:center;
	}
	#countdown {
		font-size: 16px;
	}

	
}
.iv-container {
    overflow: hidden; 
    position: relative
}

.iv-fullscreen {
    position: fixed;
    background: rgb(13 13 13 / 80%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 1000
}

.iv-fullscreen-container {
    position: relative;
    height: 100%;
    width: 100%
}

.iv-fullscreen-close {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 10px;
    top: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-shadow: 0 0 3px #6d6d6d;
    transition: all .2s ease
}

.iv-fullscreen-close:after,.iv-fullscreen-close:before {
    content: "";
    height: 4px;
    width: 24px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%
}

.iv-fullscreen-close:before {
    transform: translate(-50%,-50%) rotate(45deg)
}

.iv-fullscreen-close:after {
    transform: translate(-50%,-50%) rotate(-45deg)
}

.iv-fullscreen-close:hover {
    transform: rotate(90deg);
    transform-origin: 50% 50%
}

.iv-snap-view {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 20px;
    border: 1px solid #aaa;
    background: #000;
    z-index: 100;
    box-sizing: content-box;
    transition: opacity .4s ease;
    opacity: 0;
    left: 20px
}

.iv-snap-image-wrap {
    display: inline-block;
    position: absolute;
    max-width: 150px;
    max-height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden
}

.iv-snap-image {
    position: relative;
    -ms-touch-action: none;
    touch-action: none
}

.iv-snap-handle {
    box-sizing: border-box;
    position: absolute;
    border: 1px solid #fff;
    transform: translateZ(0);
    box-shadow: 0 0 0 200px rgba(0,0,0,.5);
    cursor: pointer;
    cursor: grab
}

.iv-snap-handle:active {
    cursor: grabbing
}

.iv-zoom-actions {
    width: 100%;
    box-sizing: content-box;
    position: absolute;
    top: 150px;
    left: -1px;
    height: 20px;
    border: 1px solid #fff;
    border-top: 0;
    background: rgba(0,0,0,.3)
}

.iv-zoom-actions--has-buttons .iv-zoom-slider {
    left: 24px;
    right: 24px
}

.iv-zoom-handle {
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    cursor: pointer;
    cursor: grab
}

.iv-zoom-handle:active {
    cursor: grabbing
}

.iv-zoom-slider {
    box-sizing: inherit;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.iv-button-zoom,.iv-button-zoom--in,.iv-button-zoom--out {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.iv-button-zoom--in:after,.iv-button-zoom--in:before,.iv-button-zoom--out:after,.iv-button-zoom--out:before,.iv-button-zoom:after,.iv-button-zoom:before {
    content: "";
    height: 2px;
    width: 10px;
    background: #fff;
    position: absolute
}

.iv-button-zoom--in {
    right: 0
}

.iv-button-zoom--in:after {
    transform: rotate(90deg)
}

.iv-button-zoom--out {
    left: 0
}

.iv-image-mode {
    display: inline-block
}

.iv-image-view {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}

.iv-image-wrap {
    display: inline-block
}

.iv-image-wrap:active {
    cursor: move
}

.iv-image {
    max-width: 100%;
    max-height: 100%;
    -ms-touch-action: none;
    touch-action: none
}

.iv-image,.iv-loader {
    position: absolute;
    transform: translateZ(0)
}

.iv-loader {
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    z-index: 100;
    margin-top: -16px;
    margin-left: -16px;
    font-size: 5px;
    text-indent: -9999em;
    border: 1.1em solid rgba(0,0,0,.2);
    border-left-color: #fff;
    animation: loading-icon 1.1s linear infinite
}

.iv-loader:after {
    width: 10em;
    height: 10em;
    border-radius: 50%
}

@keyframes loading-icon {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@media screen and (max-width: 767px) {
    .iv-snap-view {
        z-index:-1;
        visibility: hidden
    }
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 basecomponents 2023
	Last Updated : 04. 04. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd

------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */
.ui-helper-hidden-accessible {
	display: none;
}

.ui-widget.ui-widget-content.ui-autocomplete {
	margin: auto;
	padding: 0;
	border-radius: 0;
	max-height: 332px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid var(--border-color);
	z-index: 2000;
	background-color: var(--white)
}

.ui-autocomplete li.ui-menu-item {
	cursor: pointer;
	margin: 0;
	display: block;
}

.ui-menu-item a {
	display: grid;
	grid-template-columns: 3em 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
	align-items:center;
}

.foundProduct {
	grid-area: image;
}

.foundProduct img {}

.foundProductTitle {
	grid-area: title;
}

.foundProductRef {
	display: none;
}

.foundProductDesc {
	display: none;
}

.ui-autocomplete li {
	list-style: none;
}

.ui-autocomplete li:hover {}

.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active {
	margin: 0;
	border-radius: 0;
	border: none;
	outline: none;
}

.ui-menu-item a.ui-state-active {}
.ui-autocomplete mark {}

/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */
/* take care as the html markup that writes this thing out is a bit borked! */
#ewis h3 {
	font-weight: var(--heading-font-weight);
}

#ewis label {
	color: var(--text-heading-color);
}

a.lnk.ewisopen, a.lnk.ewis {
	display: block;
	height: auto;
	text-align: center;

	background-color:#dbd2ba;
	padding:.5rem;
	text-transform: capitalize;
	font-size:.625em;
}

.lnk.ewisopen:hover {
	text-decoration: underline;
	text-decoration-color:var(--orange);
}

/* -------------------------------------------------------------------------------------
=PopupDialog 
------------------------------------------------------------------------------------- */
#popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

#popupdialog .item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

#popupdialog .item img {
	grid-column: 1/-1;
	grid-row: 1;
	align-self: center;
	margin: auto;
}

#popupdialog h3 {
	font-size: 1em;
	margin-bottom: 1em;
}

#popupdialog a {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing)
}

#popupdialog .item .title {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--text-heading-color);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	grid-column: 1/-1;
	grid-row: 2;
	text-align: center;
}

#popupdialog .item p.qty {
	grid-column: 1;
	grid-row: 3;
	text-align: right;
}

#popupdialog .item p.price {
	grid-column: 2;
	grid-row: 3;
	text-align: left;
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a {
	font-size: 1em;
	padding: var(--spacing);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--checkout-button);
	color: var(--button-text-color);
	border: 1px var(--button-border-color) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}

/* -------------------------------------------------------------------------------------
=Out of Stock, Direct Despatch
------------------------------------------------------------------------------------- */

.ui-dialog.outofstockdialog, .ui-dialog.directdespatchdialog {
	width: 500px !important;
	max-width: 80vw;
	text-align: center;
}

.ui-dialog.outofstockdialog .outofstockpopup, .ui-dialog.directdespatchdialog .directdespatchpopup-pane {
	border: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosheader, .ui-dialog.directdespatchdialog .ui-widget-header {
	padding: 0 0 1em 0;
}

.ui-dialog.directdespatchdialog .ui-widget-header {
	display: none;
}

.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}

.ui-dialog.outofstockdialog .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.outofstockdialog .ui-widget-content, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane {
	background: transparent;
	border: none;
	margin-top: 0;
	text-align: center;
	padding: 0;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing);
	background-color: var(--white);
	color: var(--orange);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
}

/*better use of classes would be nice! ;) */
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
	--border-color: var(--button-border-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
}

.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}

#directdespatchpopup-pane span.ddproduct {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.ddmessage {}
.ddmessage span.dddatemessage {}

.ddmessage span.dddate {
	display: block;
	margin-top: 1em;
	font-size: 1.2em;
}

/* -------------------------------------------------------------------------------------
=Tooltips
------------------------------------------------------------------------------------- */
.helpicon {
	display: inline-block;
	position: absolute;
	top: .5rem;
	right: .5rem;
	text-align: left;
}

.helpicon img{
	max-width:1.5em;
}

.helpicon h3 {
	margin: var(--half-spacing) 0;
}

.helpicon .lefttooltip {
	min-width: 100px;
	max-width: 200px;
	top: 50%;
	right: 100%;
	margin-right: 1rem;
	transform: translate(0, -50%);
	padding: var(--half-spacing);
	color: var(--text-color);
	background-color: var(--white);
	font-weight: normal;
	font-size: .825em;
	position: absolute;
	z-index: 1000;
	box-sizing: border-box;
	display: none;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.helpicon:hover .lefttooltip {
	display: block;
	line-height: 1;
}

.helpicon .lefttooltip i {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -12px;
	width: 12px;
	height: 24px;
	overflow: hidden;
}

.helpicon .lefttooltip i::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	background-color: #FFFFE0;
	border: 1px solid #DCA;
}



/* -------------------------------------------------------------------------------------
=Accordion 
------------------------------------------------------------------------------------- */
ul.accordion {
	grid-column: 1/-1;
	list-style: none;
}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.5em;
	cursor: pointer;


	border-radius: var(--border-radius);
	display: grid;
	grid-template-areas: "question expand";
	grid-gap: 1rem;
	grid-template-columns: 1fr 1rem;
	padding: 1rem;
	margin: 0;
	transition: var(--transition);
	font-family:var(--heading-font);
	background-color:var(--light-blue);
	color:var(--white);
	text-transform:capitalize;
	margin-bottom:1em;
}
.accordion .pane + .header{
	border-bottom: 1px solid var(--grey);
}

.accordion .header.current {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom:0;
}

.accordion .header img {
	grid-area: expand;
	cursor: pointer;
}

.accordion .header .showplus {}

.accordion .header .showminus {
	display: none;
}

.accordion .header.current .showplus {
	display: none;
}

.accordion .header.current .showminus {
	display: block;
}

li.subhead {}

/* Panes
------------------------------------------------------- */
ul.accordion li.pane.first {}

ul.accordion li.pane {
	display: none;
	padding: 1em 2em;
	color:var(--black);
	background-color:var(--light-blue-alpha);
	margin-bottom:1em;
	border-bottom-left-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
}
 ul.accordion li.pane br{}

ul.accordion li.pane p {
	font-size:1.2em;
}

ul.accordion li.pane a {
	text-decoration:underline;
}

ul.accordion li.pane ul {
	list-style-type: disc;
	margin-left: 1em;
	font-size:1.2em;
}

ul.accordion li.pane li {}

ul li.title {}


/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
.etailcopy {
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1rem;
	padding:.5em;
}

p.etail {
	text-align:left;
	margin:0;
}

p.etail a {
}

p.copy {
	text-align:right;
	margin:0;
}

p.copy span {}


/* cookie popup
------------------------------------------------------- */
#pbf .cookie {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    z-index: 1000;
    background: #0d0d0d;
    text-align: center
}

#pbf .cookie p {
    /* width: 1200px; */
    margin: 0 auto;
    float: none;
    color: #fff;
    /* font-size: .75em; */
    padding: .5em 0;
}

#pbf .cookie p a {
    float: none;
    color: #fff;
    text-decoration: underline;
    padding: 0 .25em;
}

#pbf .cookie img {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px
}

#pbf .cookie img:hover {
    cursor: pointer
}



/* vat switch
------------------------------------------------------- */
.vatsw{
	grid-area:vat;
	text-align:left;
	font-size:.875em;
	padding:0 1rem;
}

[type=checkbox][role=switch] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 1.25em;
	height: 1.25em;
	margin-top: -0.125em;
	margin-right: 0.375em;
	margin-left: 0;
	-webkit-margin-start: 0;
	margin-inline-start: 0;
	-webkit-margin-end: 0.375em;
	margin-inline-end: 0.375em;
	border-width: 1px;
	font-size: inherit;
	vertical-align: middle;
	cursor: pointer;	
	width: 2.25em;
	height: 1.25em;
	border-radius: 1.25em;
	line-height: 1.25em;
}

[type=checkbox][role=switch] {
	--background-color: var(--black);
	--border-color: var(--black);
	--border-width:3px;
	width: 2.25em;
	height: 1.25em;
	border: var(--border-width) solid var(--border-color);
	border-radius: 1.25em;
	background-color: var(--background-color);
	line-height: 1.25em;
	margin:0 .5em;
}

[type=checkbox][role=switch]:focus {}

[type=checkbox][role=switch]:checked {
	--background-color: var(--black);
	--border-color: var(--black);
}

[type=checkbox][role=switch]:before {
	display: block;
	width: calc(1.25em - (var(--border-width) * 2));
	height: 100%;
	border-radius: 50%;
	background-color: var(--white);
	content: "";
	transition: margin 0.1s ease-in-out;
}

[type=checkbox][role=switch]:checked:before {
	background-color: var(--white);
}

[type=checkbox][role=switch]:checked {
	background-image: none;
}

[type=checkbox][role=switch]:checked::before {
	margin-left: calc(1.125em - var(--border-width));
	-webkit-margin-start: calc(1.125em - var(--border-width));
	margin-inline-start: calc(1.125em - var(--border-width));
}



/*readmore stuff 
------------------------------------------------------- */
.more{
	margin:1em 0;
}

.more.noexpand{
	display:none;
	transition: var(--transition);
	
}

.showmorecss,
.showlesscss,
.showmore,
.showless{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:.825em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	color:var(--orange);
	text-transform:capitalize;
	transition: var(--transition);
	
}


/* Messages 
------------------------------------------------------- */
#mess {
	padding: 1em;
	margin: 1em 0;
}

li.info:not(.sa_name) {
	color: var(--info-color);
	list-style: none;
	margin-bottom:1rem;
}

li.info.req{
	color:var(--error-color)
}

li.info.acct{
	color:var(--error-color);
	font-size:2em;
}

li.info.acct a{
	margin-left:.5em;
	text-decoration:underline;
}

li.info img{
	display:inline-block;
}

li.info:not(.sa_name)::before {
	font-family: var(--font-awesome);
	content: '\f05a';
	margin-right: var(--half-spacing)
}

.warn {
	color: var(--error-color);
}

.reqmsg {
	color: var(--error-color);
	font-size: smaller;
}

.oos {
	color: var(--error-color);
}


/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	grid-column: 1/-1;
}

/*bit of a hack - really don't want to be using an img as a way of identifying a required field */
.form img {
	width: auto !important;
	height: auto
}

.form ul {
	margin: 0;
	padding: 0;
}

.form ul li {
	list-style: none;
	display: block;
}

.form form {
	margin: auto;
}

.form .help {
	color: var(--help-color);
	font-size: small;
}

.form label {
	display: block
}

.form li select, .form li textarea, .form li input {
	margin-bottom: var(--spacing);
	max-width:100%;
}

.form li.reqmsg {
	color: var(--error-color);
}

.form li.header {
}

.form li.header h3{
	font-family:var(--text-font);
	font-size:1em;
}

.form label img {
	display: inline-block;
}

.form li.help, .form li.info {
	font-size: .825em;
}

.form form {}

.form form .submit {
	display: block;
}

.form .g-recaptcha {
	text-align: right;
	display: block;
	margin-left: auto;
	margin-bottom:1rem;
}

/* fix for checklists*/
.form li ul.check {
	font-weight:bold;
}
.form li ul.check input {
	margin-right: var(--half-spacing);
	width:auto;
}

/* fix for radio buttons */
.form ul.radio {}
.form li ul.radio input {
	margin-right: var(--half-spacing);
	width:auto;
}

.form li ul.radio input + label{
	display:inline-block;
}

/* fix for subscribe checkbox */
.form li.subscribe input,
.form li.thirdparty input{
	margin-right: var(--half-spacing);
	width:auto;
}

.form li.subscribe label,
.form li.thirdparty label{
	display: inline;
	font-weight: normal;
}

.exstreglnk, .exstfgtpwd {}

.exstreglnk h5, .exstfgtpwd h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}

/*image uploader */
.imgupl{
}

.imgupl img{
	margin:0;
	margin-right:auto;
}



/* Sign In - these conflict with new checkout forms, need to revisit
------------------------------------------------------- */
.page_signin .form {
	margin: auto;
	max-width:50%;
}

.page_signin .art{
	margin: auto;
	max-width:50%;
}

.page_signin .form label {
	display: block;
}

.page_signin .form input {
	width: calc(100% - 2em);
}

.page_signin .form input + img{
	display:inline-block;
	vertical-align:top;
}

/* Register/update details - need to add classes to all the input fields
------------------------------------------------------- */
.page_register .form {
	margin: auto;
	max-width:50%;
}

.page_register .form label {
	display: block;
}

.page_register form input,
.page_register form select {
	width: calc(100% - 2em);
}

.page_register form img{
	display:inline-block;
	vertical-align:top;
}


/* Forgotten Password
------------------------------------------------------- */
.page_passwordrequest .form#pwrem {
	width: 50%;
	margin: auto;
}

.page_passwordrequest form input,
.page_register form select {
	width: calc(100% - 2em);
}

.page_passwordrequest form img{
	display:inline-block;
	vertical-align:top;
}

.page_passwordrequest form h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.ui-dialog, .ui-widget.ui-widget-content {
	z-index: 1002;
	border: 1px solid var(--border-color);
}

/* saartdialog*/
.ui-dialog.saartdialog,
.ui-dialog.helpartdialog{
	width: 80vw !important;
	max-width:640px;
}


.gwhelp{
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"intro"
	"options";
}

.gwhelp .art{
	grid-area:intro
}

.gwhelp .art h2{
	text-align:center;
	color:var(--dark-blue);
	font-size:2em;
}


.gwhelp .gwitems {
	grid-area:options;
}

.gwhelp .gwitems .gw{
	grid-area:options;
	display:grid;
	grid-template-columns:4em 1fr;
	grid-column-gap:1em;
	grid-template-areas:"image title"
	"image price";
	align-items:center;
	margin-bottom:1em;
}

.gwhelp .gwitems img{
	grid-area:image;
}

.gwhelp .gwitems p{
	grid-area:title;
}

.gwhelp.gwitems span{
	grid-area:price;
}

.ui-widget {
	font-size: 1em;
	font-family: var(--text-font)
}

.ui-widget-header {
	background: none;
	border: none;
	color: var(--text-heading-color);
	font-size: 1em;
}

.ui-dialog input {
	width: 100%;
}

.ui-dialog input#subscribe {
	width: auto;
}

.ui-dialog input.submit {
	margin: var(--spacing) 0;
	text-align: center;
}

.ui-widget input[type="text"] .ui-widget input[type="email"],
.ui-widget select, .ui-widget textarea, .ui-widget button {
	padding: 0 var(--spacing);
	padding: .25em 0.5em;
	padding: var(--spacing);
	border: none;
	outline: 1px var(--border-color) solid;
}

.validateTips {
	font-size: .688em;
}

/* Interaction states
----------------------------------*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--border-color);
	font-weight: normal;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--border-color);
}

/* the ask for email address popup? */
.ui-dialog.ewisdialog {
	width: 400px !important;
	text-align: center;
}

/* ask a question popup on product pages */
.ui-dialog.techquesdialog {}
.techquesdialog label {}

/* saartdialog*/
.ui-dialog.saartdialog {
	width: 80vw !important;
	max-width: 640px;
	display: none;
}



/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd, #popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

@media only screen and (max-width: 768px) {
	.hoverbsktadd, #popupdialog {
		width: calc(var(--site-max-width) - 4em);
	}
}

.hoverbsktadd .item,
#popupdialog .item {
	display: grid;
	grid-template-areas:"image"
	"title"
	"qty"
	"price";
;
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

.hoverbsktadd .item img, #popupdialog .item img {
	grid-area:image;
	align-self: center;
	margin: 0 auto !important;
}

.hoverbsktadd h3, #popupdialog h3 {
	font-size: 1em;
	/* margin-bottom: 1em; */
}

.hoverbsktadd a, #popupdialog a {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing)
}

.hoverbsktadd .item a.title,
#popupdialog .item .title {
	grid-area:title;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--dark-blue);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	text-align: center;
}

.hoverbsktadd .item p.qty,
#popupdialog .item p.qty {
	grid-area:qty;
	display:none;
}

.hoverbsktadd .item p.price, #popupdialog .item p.price {
	grid-area:price;
	color:var(--light-blue)
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a {
	font-size: 1.25em;
	padding: .5rem 2rem;
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--checkout-button);
	color: var(--white);
	border: 1px var(--checkout-button) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}


/* popout stuff? - used for terms and conditions in checkout process not sure where else it may be used ... */

#pp {
	width: 100%;
	margin: auto;
	background-color: var(--main-panel-color);
	/*used to ensure left panel displays correctly, unsure why though... */
	display: flex;
	justify-content: flex-start;
	min-height: 85vh;
}

#pp .bc {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	width: var(--site-max-width);
	background-color: var(--main-panel-color);
}


#pp .artp ul {
	list-style-type: disc;
	padding-inline-start: 2em;
	margin-block-start: 1em;
	margin-block-end: 1em;
	font-size:1.2em;
}

#pp .artp ul ul, #pp .artp ul ul ul {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#pp .artp ul li {}

#pp .artp ul.nobullets {
	list-style-type: none;
	margin: .5em 0;
}

#pp .artp ol {
	font-size:1.2em;
	list-style-type: decimal;
	padding-inline-start: 2em;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

#pp .artp ol li{
	
}

#pp .artp ol ol,
#pp .artp ol ol ol {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#pp .artp a {
	font-weight: 500;
	color:var(--dark-blue);
	text-decoration:underline;
}

#pp .artp a:hover {
	text-decoration: underline;
	text-decoration-color: var(--orange);
}