/*! 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 Base 2023
	Filename : sitepanes.css
	Last Updated : 17. 04. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

	Table of Contents
		=Definitions
		=Reset
		=Normalise
		=Jquery Base Overrides
		=Page
		=Typography
			defaults
			articles
		=Buttons
		=Tables
		=Forms
			Defaults
			Sign In
			Register
			Forgotten Password
		=Base CSS definitions and element stylings
			Messages
			Headings
		=Grid Layout
			layout base classes
			Custom classes - should become standard too
		=Forms
			Defaults
			Sign In
			Register
			Forgotten Password
		=SiteContainers
		=FIXEDTop Panel
		=Top Panel
		=Center Panel
		=Main Panel
			fullwidth
			wide
			leftpanel
		=Footer Panel
		=Bottom Panel
		=FIXEDBottom Panel
			Cookie Popup
			copyright and managed by
		=COMS COMPONENTS
			Breadcrumb
			NavBar (ruby)
				**********************
				**********************
				**********************
			Swiffy Slider
			OwlCarousel
				Basic
				Product
			Newsletter
			Accordion
			Blog
			Store Locator
			HoverBasket
			Autocomplete
			Email when back in stock EWIS
			PopupDialog / Popup Add to Basket / Direct Despatch
		=DepartmentPages
			SearchHeader / SearchFooter
			FilterSearch
			Deptsingle
			Subdepartment tree
		=FeaturedProducts
		=ProductPage
		=Basket
		=Checkout
		=My Account
		=ConfirmationPage
		=Sitemap
		=Client Spefific Stylings 
		
		doesnt validate in css 
		@font-face {
    font-family: "urw-form-fallback";
    size-adjust: 101.4%;
    ascent-override: 100%;
    src: local("Arial"); 
}

fonts used and sizes
URW Form
	light - 300
	regular - 400
	demi - 600

Poppins
	light - 300
	regular - 400
	medium - 6500
	
=Definitions
------------------------------------------------------------------------------------- */

:root {
	--site-max-width: 1400px;
	--menu-max-width: calc(100vw - 2rem);
	--left-panel-width: 240px;
	--line-height: 1.5;
	--font-weight: 600;
	--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(--font-weight);
	/*fonts */
	--text-font: 'Open Sans', sans-serif;
	--text-font-weight: 400;
	--heading-font: 'Open Sans Condensed', sans-serif;
	--heading-font-weight: 400;
	--sub-heading-font: 'Roboto Condensed', sans-serif;
	--sub-heading-font-weight: 500;
	--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;
	/* client color scheme */
	--navy: #CBDD6F;
	--navy: #667c93;
	--grey: #424242;
	--light-grey: #a4abb1;
	--black: #161616;
	--white: #fff;
	--off-white: #f1f2f3;
	--red: #fb3d49;
	--pink: #dac2c2;
	/*standard colors */
	--error-color: #B51E1E;
	--warn-color: rgb(230 167 27);
	--info-color: #5eb20a;
	--help-color: #2879ff;
	/*Section colors */
	--background-color: var(--white);
	--top-bar-color: var(--navy);
	--top-bar-text-color: var(--white);
	--top-bar-link-color: var(--white);
	--top-panel-color: var(--white);
	--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(--off-white);
	--bottom-panel-text-color: var( --grey);
	--bottom-bar-color: var( --grey);
	--bottom-bar-text-color: var( --off-white);
	--bottom-panel-heading-color: var( --navy);
	--panel-color: var( --white);
	--dropdown-color: var( --white);
	--popout-color: var( --white);
	--form-color: var( --white);
	/*nav colors */
	--navbar-height: 50px;
	--navbar-color: var( --navy);
	--navbar-heading-color: var( --grey);
	--navbar-heading-weight: var( --heading-font-weight);
	--navbar-link-color: var( --grey);
	--nav-text-color: var( --grey);
	--navbar-active-color: var( --light-grey);
	--navbar-active-text-color: var( --black);
	--navbar-hover-color: var( --light-grey);
	--navbar-hover-text-color: var( --black);
	--navbar-dropdown-width: 240px;
	--navbar-dropdown-item-height: 40px;
	--navbar-dropdown-color: var( --white);
	--navbar-dropdown-text-color: var( --grey);
	--navbar-dropdown-text-size: .875rem;
	--navbar-sidebar-color: var( --light-grey);
	--navbar-sidebar-text-color: var( --grey);
	--navbar-sidebar-hover-color: var( --off-white);
	--navbar-popout-color: var( --off-white);
	/*Buttons */
	--button-font: 'Open Sans', sans-serif;
	--button-font-weight: 400;
	--button-color: var( --navy);
	--button-text-color: var( --white);
	--button-border-color: var( --navy);
	--button-hover-text-color: var( --white);
	--button-hover-color: var( --navy);
	--button-hover-border-color: var( --navy);
	--alt-button-color: var( --light-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( --light-grey);
	--alt-button-hover-border-color: var( --grey);
	--checkout-button: var( --navy);
	--checkout-button-text: var( --white);
	--info-button: var( --info-color);
	--info-button-text: var( --white);
	--icon-color: var( --error-color);
	/*Borders */
	--border-color: var( --grey);
	--border-alt-color: var( --navy);
	--border-color-light: var( --light-grey);
	--border-radius: .0;
	--border-width: 1px;
	/*Text */
	--color: var( --grey);
	--text-color: var( --grey);
	--text-color-light: var( --grey);
	--text-heading-color: var( --grey);
	--text-sub-heading-color: var( --grey);
	--text-link-color: var( --navy);
	--text-link-color-hover: var( --navy);
	--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: 500;
	--fprd-title-color: var( --navy);
	/*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: 5rem;
}

/* -------------------------------------------------------------------------------------
=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;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline-color:var(--pink);
}

/* -------------------------------------------------------------------------------------
=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;
}

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);
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */

.ui-dialog, .ui-widget.ui-widget-content {
	z-index: 1002;
	border: 1px solid var(--border-color);
}

.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;
}

/* -------------------------------------------------------------------------------------
=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;
	/*total and absolute hack for the fact that some random horizontal scroll appears at certain viewport sizes that I can't explain or fix
	menu element seems to be the culprit but no solution yet found :( */
	overflow-x: hidden;
}

ol {
	margin-left: .5em;
}

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

/* Defaults
------------------------------------------------------- */

p {
	overflow-wrap: break-word;
}

b, strong {
	font-weight: 600;
}

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);
	/* text-transform: capitalize; */
	overflow-wrap: break-word;
}

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

h2 {
	font-size: 1.75rem;
	--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);
	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 {
	--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 .25em center;
	padding-right: 1.5em;
	display: inline;
	max-width: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	border-radius: .25rem;
}

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

/*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;
}

#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 {
	list-style-type: decimal;
	padding-inline-start: 2em;
	margin-inline-start: 0;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

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

#pm .artp a {
	font-weight: 500;
}

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

/* -------------------------------------------------------------------------------------
=Buttons 
------------------------------------------------------------------------------------- */

.submit, a.btn {
	--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)
}

.submit:hover, a.btn:hover {
	text-decoration: none;
	background-color: var(--button-hover-color);
	color: var(--white);
	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 {
	-webkit-appearance: none;
	border-color: var(--border-color);
	border-radius: .25rem;
	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: auto;
	border-width: 1px;
	border-style: solid;
}

td a.btn {
	display: block;
}

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

/* Defaults for tables 
------------------------------------------------------- */

/* Delivery Information
------------------------------------------------------- */

#pm .art.deliveryInfo h3 {}

#pm .art.deliveryInfo h4, #pm .art.deliveryInfo table {}

.deliveryInfo table {}

.deliveryInfo table th {}

.deliveryInfo table td {}

#pm .deliveryInfo .artp table td p {}

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */

/* Defaults
------------------------------------------------------- */

.form {
	background-color: var(--form-color);
	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)
}

/* DON'T try grid layout here - its too restrictive*/

.form li {}

.form li.reqmsg {
	color: var(--error-color);
}

.form li.header {
	margin-bottom: 1.5em;
}

.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;
}

/* fix for checklists*/

.form li ul.check {}

.form li ul.check input {
	margin-right: var(--half-spacing);
}

/* fix for radio buttons */

.form ul.radio {}

.form li ul.radio input {
	margin-right: var(--half-spacing);
}

/* fix for subscribe checkbox */

.form li.subscribe input {
	margin-right: var(--half-spacing)
}

.form li.subscribe label {
	display: inline;
	font-weight: normal;
}

.exstreglnk, .exstfgtpwd {}

.exstreglnk h5, .exstfgtpwd h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}

/* Sign In - these conflict with new checkout forms, need to revisit
------------------------------------------------------- */

.page_signin .form {
	width: 50%;
	margin: auto;
}

.page_signin .form label {
	display: block;
}

.page_signin .form input {
	width: 100%;
}

/* Register/update details - need to add classes to all the input fields
------------------------------------------------------- */

.page_register .form {
	width: 50%;
	margin: auto;
}

.page_register .form label {
	display: block;
}

.page_register .form input {
	width: 100%;
}

/* Forgotten Password
------------------------------------------------------- */

.form#pwrem {
	/*width: 50%;
	margin: auto;*/
}

/* -------------------------------------------------------------------------------------
=Base CSS definitions and element stylings
------------------------------------------------------------------------------------- */

/*code for banner text overlay */

.bnr {
	position: relative;
}

/* Messages 
------------------------------------------------------- */

#mess {
	padding: 1em;
	margin: 1em 0;
}

li.info:not(.sa_name) {
	color: var(--info-color);
	list-style: none;
}

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);
}

/* Headings 
------------------------------------------------------- */

.header h2, .header h3 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.header h2:before, .header h2:after, .header h3:before, .header h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--border-color-light);
}

.header h2:before, .header h3:before {
	margin-left: -50%;
	text-align: right;
}

.deptprods h3, .carousel.prod h2 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
}

.deptprods h3:after, .carousel.prod h2:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(100% - .5em);
	margin-left: .5em;
	height: 2px;
	content: '\a0';
	background-color: var(--navy);
}

/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */

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

/*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 {
	display: block;
	width: 100%;
	height: auto;
}

/* layout base classes
------------------------------------------------------- */

.fullWidth {
	grid-column: 1/-1;
}

/*second declaration is temp hack if a form is used (contact page) as setting a css class on the form removes the .form part which is needed for other defaults to then apply */

.halfWidth, .halfWidth+.form {
	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, .halfWidthDbl, .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, .halfWidthDbl a.img, .quarterWidth a.img, .thirdWidth a.img, .twoThirdWidth a.img {}

.bnr.fullWidth, .bnr.halfWidth, .bnr.halfWidthDbl, .bnr.quarterWidth, .bnr.thirdWidth, .bnr.twoThirdWidth {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.fullWidth .toi, .halfWidth .toi, .halfWidthDbl .toi, .quarterWidth .toi, .thirdWidth .toi, .twoThirdWidth .toi {
	background-color: var(--pink);
	color: var(--white);
	max-width: 100%;
	width: 100%;
	text-align: center;
}

.fullWidth .toi h3, .halfWidth .toi h3, .halfWidthDbl .toi h3, .quarterWidth .toi h3, .thirdWidth .toi h3, .twoThirdWidth .toi h3, .fullWidth .toi a.txt, .halfWidth .toi a.txt, .halfWidthDbl .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, .halfWidthDbl .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, .halfWidthDbl .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;
}

.deptheaderfull {
}


.deptheaderfull .artp {
	font-family:var(--heading-font);
	text-align:center;
	font-size:1.2em;
}

.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, .deptFooterImgTx .imgcont {
	grid-column: 1;
}

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

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

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

.imageText h2, .textImage h2, .deptFooterImgTx 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;
}

/*to sort out the responsive iframe */

.responsive-iframe .artp {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

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

/*to sort out the responsive iframe */

.responsive-iframe,
.video-wrapper{
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

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

/* client specific*/

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

.gallery #pm .pbnr .gallery{
	grid-column: auto / span 3;
}

.gallery #pm  .pbnr .gallery a.txt{
	text-align:center;
	display:block;
	text-transform:capitalize;
	padding:.5em;
	
}

.gallery #pm .pmind .fprd{
	grid-column: auto / span 3;
}


/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */

#cont {
	margin: auto;
}

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

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */

#ptf {
	top: 0px;
	width: 100%;
	margin-top: .25em;
	border-top: 2px var(--top-bar-color) solid;
	color: var(--top-bar-color);
	text-align: center;
	font-size: .825rem
}

#ptf .ext {
	padding: var(--half-spacing);
	display: grid;
	grid-template-areas: ". social message infolinks .";
	--spacerwidth: calc((100% - var(--site-max-width)) / 2);
	grid-template-columns: var(--spacerwidth) auto 1fr auto var(--spacerwidth);
}

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

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

#ptf .ext .info {
	grid-area: infolinks;
}

#ptf .ext .info li {
	display: inline-block;
	list-style: none;
	margin: 0 var(--half-spacing);
}

#ptf p {
	margin: 0;
}

/* -------------------------------------------------------------------------------------
=Top Panel
------------------------------------------------------------------------------------- */

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

/*see media queries for other layouts layout */

#pt .ext {
	--logowidth: 1fr;
	--searchwidth: 1fr;
	--infolinks-width: auto;
	--accountlinks-width: auto;
	--basket-width: 1fr;
	--spacerwidth: calc((100% - var(--site-max-width)) / 2);
	background-color: var(--top-panel-color);
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-gap: 0;
	align-items: center;
	grid-template-columns: var(--spacerwidth) var(--searchwidth) var(--logowidth) var(--basket-width) var(--spacerwidth);
	grid-template-areas: ".  search logo basket ." "nav nav nav nav nav"
}

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

/* menu toggle - hidden by default, shows on mobile/smaller viewport
------------------------------------------------------- */

.home-hamburger {
	grid-area: nav-start;
	display: none;
	z-index: 1001;
}

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

/* logo
------------------------------------------------------- */

#pt .pbnr {
	grid-area: logo;
	margin: 1rem 0;
}

#pt .pbnr img {
	max-width: 100px;
}

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

#pt .info ul, #pt .info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#pt .info li.icon {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "icon" "text";
	margin: var(--spacing);
	text-align: center;
}

#pt .info .icon a.img {
	grid-area: icon;
	display: block;
}

#pt .info .icon .img img {
	display: block;
	max-height: 1.25rem;
	width: auto;
}

#pt .info .icon a.lnk {
	display: none;
}

#pt .info .icon a.tel {
	grid-area: text;
	display: block;
}

#pt .info li.pipe {
	display: none;
}

/* contact links
------------------------------------------------------- */

/* account links
------------------------------------------------------- */

/* search
------------------------------------------------------- */

#pt .search {
	grid-area: search;
	text-align: left;
	/* width: calc(100% - 4rem); */
	font-size: 16px;
}

#pt .search form {
	margin-right:auto;
}

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

#pt .search input#searchbox {
	height: 40px;
	width: calc(100% - 3rem);
	max-width: 100%;
	margin: auto;
	font-size: 16px;
	padding: .5rem 1rem;
	border: 1px solid var(--border-color-light);
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/*could do with some way of nicely seeing font awesome icons in coms */

#pt .search input#search {
	width: 3em;
	height: 40px;
	margin: 0;
	padding: .5rem 1rem;
	background-color: var(--pink);
	font-family: var(--font-awesome);
	border: 1px solid var(--border-color-light);
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Basket
------------------------------------------------------- */

#pt .bskt {
	grid-area: basket;
	text-align: right;
	position: relative;
	margin: var(--half-spacing);
}

/*items in basket */

#pt .bskt p, #pt .bskt a.mybsktlnk {
	position: absolute;
	top: -1rem;
	right: -0.5rem;
	background-color: var(--navy);
	color: #fff;
	border-radius: 50%;
	text-align: center;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	font-size: .825em;
	font-weight: 600;
}

#pt .bskt img {
	max-height: 2rem;
	margin:0;
	margin-left:auto;
	width: auto;
}

#pt .bskt span {
	display: block;
	text-align: center;
	font-family: var(--headingFontAlt);
	text-transform: capitalize;
	font-size: 14px;
	width: 62px
}

/* -------------------------------------------------------------------------------------
=Center Panel
------------------------------------------------------------------------------------- */

#pc {
	margin: auto;
	display: flow-root;
	background-color: var(--center-panel-color);
	text-align: center;
}

/*articles that may be used on depts etc */

#pc .arts {
	width: var(--site-max-width);
	margin: auto;
}

/* -------------------------------------------------------------------------------------
=Main Panel
------------------------------------------------------------------------------------- */

#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;
	padding-bottom: 2em;
}

/* 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);
	min-height: 50vh;
	/* margin-bottom: 1rem; */
}

/* left panel
------------------------------------------------------- */

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

/* wide panel (used with left panel - or is it... see filter search) 
------------------------------------------------------- */

.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;
	margin-right: auto;
}

/* -------------------------------------------------------------------------------------
=Footer Panel
------------------------------------------------------------------------------------- */

#pf {
	width: 100%;
	margin: auto;
	background-color: var(--footer-panel-color);
	margin-bottom:2em;
}

#pf .ext {
	width: var(--site-max-width);
	background-color: var(--footer-panel-color);
	margin: 0 auto;
	/* padding: 4em 0; */
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	align-items: start;
}

/*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 */

#pf .pbnr .bnr{
	/* display:grid; */
	position:relative;
	object-fit:cover;
	aspect-ratio:666/471;
}

#pf .pbnr .toi{
	position:absolute;
	top:50%;
	background-color:transparent;

}

#pf .pbnr .toi a
{
	font-size:3rem;
}

#pf .pbnr .toi a:before {
	
	font: var(--fa-font-brands);
	font-weight: var(--heading-font-weight);
	margin-right: .5em;
	font-size: 1em;
	display: inline-block;
	
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f16d";
}

/* -------------------------------------------------------------------------------------
=Bottom Panel
------------------------------------------------------------------------------------- */

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

#pb .ext {
	background-color: var(--bottom-panel-color);
	margin: 0 auto;
	padding-top: 2em;
	position: relative;
	grid-column-gap: 1rem;
	display: grid;
	align-items: start;
	width: var(--site-max-width);
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: ". logo ." " help about contact" " accreditations accreditations accreditations"
}

#p48922635 {
	grid-area: logo;
}

#p48922635 img {
	max-width: 128px;
}

#p48922635 a.txt {
	display: none
}

#p48922636 {
	grid-area: help;
}

#p48922637 {
	grid-area: about;
}

#a121372672 {
	grid-area: contact;
}

#p48922639 {
	grid-area: accreditations;
	margin-top:4rem;
	text-align:center;
}

#p48922639 .bnr{
	display:inline-block;
	vertical-align:middle;
	margin:.5rem;
}

#p48922639 .bnr img{
	max-height:64px;
	width:auto;
}

/* hide icons if present on info links */

#pb .info li.icon img {
	display: none;
}

/* defaults 
------------------------------------------------------- */

/*because we don't write out all section headings as the same level */

#pb h3, #pb h2 {
	font-size: 1.5em;
	margin-bottom: 1.5rem;
	color: var(--bottom-panel-heading-color);
	font-weight:600;
}

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

#pb a {}

#pb ul {
	padding: 0;
}

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

/*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;
}

/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */

#pbf {
	background-color: var(--bottom-bar-color);
	font-size: .725em;
}

#pbf .ext {}

/* cookie popup
------------------------------------------------------- */

#pbf .cookie {
	position: fixed;
	bottom: 0%;
	left: 0%;
	width: 100%;
	z-index: 1000;
	background: var(--bottom-bar-color);
	text-align: center;
}

#pbf .cookie p {
	margin: 0 auto;
	float: none;
	color: var(--bottom-bar-text-color);
	padding: .5em 0
}

#pbf .cookie p a {
	float: none;
	color: var(--bottom-bar-text-color);
	text-decoration: underline;
	padding: 0 5px
}

#pbf .cookie img {
	float: none;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px
}

#pbf .cookie img:hover {
	cursor: pointer
}

/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */

#pbf .etailcopy {
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1rem;
	padding:.5em;
}

p.etail {
	color: var(--off-white);
	text-align:right;
	margin:0;
}

p.etail a {
	color: var(--white);
}

p.copy {
	color: var(--off-white);
	margin:0;
}

p.copy span {}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=COMS COMPONENTS 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */

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

.home .bdcb {
	display: none;
}

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

.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 {
	font-family: var(--text-font);
	color: var(--text-color-light);
	font-size: .825rem;
	font-weight: normal;
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}

/*active page */

.bdcb li h1 {
	font-size: .825rem;
	margin: 0;
	color: var(--text-color);
}

/*for the break between the crumb*/

.bdcb li:after {
	display: inline-block;
	font-family: var(--text-font);
	color: var(--text-color-light);
	font-size: .825rem;
	font-weight: normal;
	content: "/";
	margin: .5rem;
}

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

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

.bdcb h1 {}

/* -------------------------------------------------------------------------------------
=Swiffy Slider - replaces owlcarousel
------------------------------------------------------------------------------------- */

.swiffy-slider {}

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

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

/*dept sliders */

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

/*dept sliders */

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

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

/*Featured sliders */

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

/*cta slider */

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

.slider-cta li {
	margin: 0;
}

/*cta slider */

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

/*still searching article */

.slider-searching {
	--swiffy-slider-item-count: 4;
}

/* product sliders - code needs some tweaking */

/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */

.carousel.prod .swiffy-slider {
	--swiffy-slider-item-count: 5;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

/* department sliders - code needs some tweaking */

/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */

.carousel.dept .swiffy-slider {
	--swiffy-slider-item-count: 5;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

.carousel.dept h2 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
}

.carousel.dept h2:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(100% - .5em);
	margin-left: .5em;
	height: 2px;
	content: '\a0';
	background-color: var(--navy);
}

.carousel.dept .deptlink {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.carousel.dept .deptlink img {
	width: 100%;
	object-fit: cover;
	margin: auto;
}

.carousel.dept .deptlink a.txt {
	color: var(--white);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.25rem;
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	margin-right: 1.5rem;
}

.carousel.dept .deptlink a.txt:after {
	font-family: var(--font-awesome);
	font-weight: var(--heading-font-weight);
	margin-left: .5em;
	font-size: 1em;
	display: inline-block;
	content: '\f061';
}

/* -------------------------------------------------------------------------------------
=Newsletter 
------------------------------------------------------------------------------------- */

#pf .ext .news {
	text-align: center;
	align-self: center;
	background:url('https://s3-eu-west-1.amazonaws.com/wwwnewhousetextilescouk/i/bnr/newsbg.webp?_t=23426115722') no-repeat center;
	height:100%;
	background-size: 100%;
	aspect-ratio:666/471;
	display:grid;
}

#pf .ext .news .bt h3 {
	color: var(--white)
}

#pf .ext .news form {
	text-align: center;
	align-self: center;
	/* margin:1rem; */
}

#pf .ext .news label {
	display:block;
	font-family:var(--heading-font);
	font-size:1.25em;
	color:var(--white);
	margin-bottom:1em;
}

#pf .ext .news input {
	display: inline-block;
	margin: 0 .5rem;
}

#pf .ext .news_input_container {
	display: inline-block;
}

#pf .ext .news .submit {
	background-color:var(--pink);
	border-color:var(--pink);
}

/* -------------------------------------------------------------------------------------
=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.25em;
	cursor: pointer;
	border: 2px solid var(--off-white);
	border-radius: var(--border-radius);
	display: grid;
	grid-template-areas:
		"question expand";
	grid-gap: 1rem;
	grid-template-columns: 1fr 2rem;
	padding: 1rem;
	margin: 0;
	/* margin-bottom: 1rem; */
	transition: var(--transition);
}

.accordion .header.current {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 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
------------------------------------------------------- */

#pm ul.accordion li.pane.first {}

#pm ul.accordion li.pane {
	display: none;
	background-color: var(--off-white);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	padding: var(--spacing);
	margin-bottom: 1rem;
}

#pm ul.accordion li.pane p {}

#pm ul.accordion li.pane ul {
	list-style-type: disc;
	margin-left: 1em;
}

#pm ul.accordion li.pane li {}

#pm ul li.title {}

/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */

#site.blog {}

/* -------------------------------------------------------------------------------------
=Store Locator 
------------------------------------------------------------------------------------- */

#storelocator {
	grid-column:1/-1;
}

#storelocator{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-areas:"search search"
	"results map";
	grid-column-gap:1rem;
}

#storelocator #storesearchform{
	grid-area:search;
	margin-bottom:1rem;
}

#storelocator #storesearchform label{
	display:block;
}
#storelocator input#searchpostcode {
	height: 40px;
	margin: auto;
	font-size: 16px;
	padding: .5rem 1rem;
	border: 1px solid var(--border-color-light);
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
#storelocator input.submit {
	width: 3em;
	height: 40px;
	margin: 0;
	padding: .5rem 1rem;
	background-color: var(--pink);
	font-family: var(--font-awesome);
	border: 1px solid var(--border-color-light);
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	vertical-align:top;
}



#storelocator #searchresults{
	grid-area:results;
}

#storelocator #searchresults ol{
	list-style:none;
}

#storelocator #searchresults ol>li{
	display:grid;
	grid-template-areas: "name"
	"address"
	"distance"
	"details";
	grid-template-columns:1fr;
	margin-bottom:1rem;
}

#storelocator #searchresults .storeindex{
display:none;
}

#storelocator #searchresults .storename{
	font-family:var(--heading-font);
	font-size:1.25em;
	grid-area:name
}

#storelocator #searchresults .storedistance{
	grid-area:distance;
	font-size:small;
	margin-left:1rem;
}

#storelocator #searchresults .storeaddress{
	grid-area:address;
	font-size:small;
	margin-left:1rem;
}

#storelocator #searchresults .accordion{
	grid-area:details;
	font-size:small;
	
}

#storelocator #searchresults .accordion .header{
	padding:.5rem;
}

#storelocator #searchresults .accordion .pane{
	padding:.5rem;
}

#storelocator #searchresults .storetel{

}

#storelocator #searchresults .storeemail{
	display: block;
}

#storelocator #searchresults .storewebsite{
	display: block;
}



#storelocator #searchresults  .hideheader{
	display:none;
}

#storelocator #storemap {
	grid-area:map;
    height: 869px;
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0px);
    background-color: rgb(229, 227, 223);
    margin-bottom: 1em;
}


/* -------------------------------------------------------------------------------------
=HoverBasket 
------------------------------------------------------------------------------------- */

.hoverbskt {
	border: 2px solid var(--red);
	border-radius: var(--border-radius);
	width: calc(250px - 1em);
	padding: var(--spacing);
	z-index: 999999;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	background-color: var(--white);
}

.hoverbskt h3 {
	display: none;
}

.hoverbskt .lines .item:last-child {}

.hoverbskt .formupdate {}

.hoverbskt .formupdate input {}

.hoverbskt .formupdate input.submitQtyChange {}

.hoverbskt a, .hoverbsktadd a, .hoverbskt p, .hoverbsktadd p {
	font-size: 0.825em;
	margin: 0;
}

.hoverbsktadd p.descr {
	display: none;
}

.hoverbskt .lines {
	max-height: 260px;
	overflow-y: auto;
	border-bottom: 1px solid var(--border-color-light);
	padding-bottom: var(--half-spacing);
	margin-bottom: var(--spacing);
}

.hoverbskt .lines .item {
	display: grid;
	grid-template-columns: 48px 1fr 16px;
	grid-template-areas: "image title title" "image quantity quantity";
	grid-column-gap: .5em;
	padding-right: .5em;
	margin-bottom: .5rem;
}

.hoverbskt .lines .item a.title, .hoverbskt .lines .item p.sample {
	font-weight: var(--heading-font-weight);
	text-align: left;
	grid-area: title;
}

.hoverbskt .lines .item img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: contain;
	grid-area: image;
	margin: 0 !important;
}

.hoverbskt .lines .item p.price {
	grid-area: price;
	display: none;
}

.hoverbskt .lines .item p.descr {
	grid-area: description;
	display: none;
}

.hoverbskt .lines .item p.qty {
	grid-area: quantity;
	text-align: left;
}

.hoverbskt h4.count, .hoverbskt h4.total {
	padding: 0;
	margin: 0;
	font-size: 0.825em;
	text-align: left;
	display: block;
	width: 50%;
	text-transform: capitalize;
	color: var(--text-color);
	font-weight: var(--heading-font-weight);
}

.hoverbskt a.btn {
	display: inline-block;
	padding: var(--spacing) var(--spacing);
	background-color: var(--red);
	border: 1px var(--red) solid;
	position: absolute;
	right: 1em;
	bottom: 1em;
}

/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */

.ui-helper-hidden-accessible {
	display: none;
}

.ui-widget.ui-widget-content.ui-autocomplete {
	width: 275px !important;
	margin: auto;
	padding: 0;
	z-index: 999999 !important;
	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: 32px 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
}

.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);
}

.fprd .ewis {
	grid-column: 1/-1;
	align-self: end;
}

a.lnk.ewisopen, a.lnk.ewis {
	display: block;
	height: auto;
	background-color: var(--button-color);
	font-family: var(--button-font);
	color: var(--button-text-color);
	border-radius: var(--border-radius);
	border: 2px solid var(--button-border-color);
	padding: var(--spacing);
	text-align: center;
	text-transform: capitalize;
}

.lnk.ewisopen:hover {
	text-decoration: none;
	background-color: var(--button-hover-color);
	border-color: var(--button-hover-color);
}

/* -------------------------------------------------------------------------------------
=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);
}

.hoverbsktadd .item, #popupdialog .item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

.hoverbsktadd .item img, #popupdialog .item img {
	grid-column: 1/-1;
	grid-row: 1;
	align-self: center;
	margin: auto;
}

.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 {
	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;
}

.hoverbsktadd .item p.qty, #popupdialog .item p.qty {
	grid-column: 1;
	grid-row: 3;
	text-align: right;
}

.hoverbsktadd .item p.price, #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(--navy);
	border: 2px 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: 0;
	text-align: left;
}

.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;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=DEPARTMENT PAGES 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=SearchHeader / SearchFooter 
------------------------------------------------------------------------------------- */

.deptwrap {}

.searchheader {
	padding: .5em;
	position: sticky;
	top: 0;
	/* height:36px; */
	z-index: 99;
	background-color: var(--main-panel-color);
}

.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;
}

/*filter options if applicable */

.fltrbtnholder {
	grid-area: filter;
}

/*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;
}

.paging a {}

/*this should be the current page */

.paging span {}

.currpg {
	font-weight: var(--heading-font-weight);
	color: var(--white);
	background-color: var(--navy);
}

.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 {
	padding: .5em;
	position: sticky;
	top: 0;
	height: auto;
	z-index: 99;
	background-color: var(--main-panel-color);
}

/* close filter button */

.fsclsdiv {
	text-align: right;
}

.fsclsdiv .fsclsspn {
	display: inline-block;
	border: 1px solid var(--black);
	color: var(--black);
	background-color: var(--navy);
	border-radius: 50%;
	font-family: monospace;
	padding: 0rem;
	margin: 0rem;
	width: 1rem;
	height: 1rem;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	display: none;
}

.filter .bt {
	border-bottom: 2px solid var(--navy);
	margin-bottom: 1rem;
}

.filter .bt h3 {
	font-weight: var(--heading-font-weight);
	font-size: 1.25rem;
}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1rem;
}

.HeaderContent h5 {
	font-size: 1rem;
}

.collapsed h5 {}

.collapsed h5:hover {}

.items {}

.citem {
	padding: var(--spacing) 0;
	font-family: var(--sub-heading-font);
	margin: 0;
	cursor: pointer;
	text-align: left;
}

.citem::before, .citemselected::before {
	font-family: var(--font-awesome);
	margin-right: .5rem;
	font-size: 1.25rem;
	display: inline-block;
	vertical-align: middle;
}

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

.citemselected::before {
	content: '\f14a';
	color: var(--navy);
	font-weight: 600
}

.citem:empty {
	display: none;
}

.citem:hover {}

.citemselected:hover {}

/* 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;
}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1rem;
}

.attrsection {}

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

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

.HeaderContent.collapsed:after {
	content: '\f106';
}

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

.items {}

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

#sldiv {
	margin: 1em;
}

/* filter buttons
------------------------------------------------------- */

.fltrattrbtn, .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;
}

#fstrigbtn {
	display: none;
}

.fstrigspn {
	display: 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;
	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;
}

/*as we currently write out TWO clear filter buttons*/

.resetfs+.resetfs, .fltrattrbtn+.resetfs {
	display: none;
}

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

.fltrattrbtn {
	background-color: var(--light-grey);
	border-color: var(--light-grey);
}

.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  
------------------------------------------------------------------------------------- */

/* Subdepartment tree
------------------------------------------------------- */

.depttree {
	/* margin-top:1em; */
	grid-column: 1/-1;
}

.depttree>.bt h3 {
	text-align:center;
	background-color:var(--pink);
	color:var(--white);
	padding:1rem;
	font-size:2em;
}

.depttree {
	display: block !important;
}

.depttree h4.tagline {
	font-family:var(--text-font);
	text-align:center;
}

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

.depttree li {
	position: relative;
	/* border-radius:1em; */
	margin: 0;
	overflow: hidden;
	/* padding:.25em; */
	align-items: center;
	display: grid;
	grid-template-columns: 1fr;
}

.depttree li a.img {
	/*cos iphones? */
	display: block;
	margin: 0;
	padding: 0;
	grid-column: 1;
	grid-row: 1;
}

.depttree li a.img img {
	min-width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: auto;
}

.depttree li a.txt {
	background-color: var(--pink);
	text-align:center;
	color: var(--white);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.25rem;
	grid-column: 1;
	grid-row: 2;
	padding: .5rem;
	align-self: end;
}

/* -------------------------------------------------------------------------------------
=FeaturedProducts 
------------------------------------------------------------------------------------- */

/* Base settings
------------------------------------------------------- */

#deptlist .fprdcont, #searchlist .fprdcont {}

/* lets use grid layouts cos they are awesome! */

.fprd {
	position: relative;
}

/*fprd ads */

.fprd.add {
	background-color: var(--fprd-color);
	display: block;
	position: relative;
}

.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;
}

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

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

.fprd:hover {}

/* unfortunately there are cases where a .bc is present inside .fprd 
department listing page uses a .bc*/

.fprd {
	display: grid;
	/* grid-row-gap: var(--half-spacing); */
	grid-template-columns: 1fr 1fr;
	/*use grid template areas */
	grid-template-areas: "image image"
		"buy-pane buy-pane"
		"title title"
		"selling-price prev-price"
		"fprdinfo fprdinfo"
	". .";
	grid-template-rows:auto auto auto auto auto 1fr
		
}

/* reset margins and paddings */

.fprd p, .fprd h3, .fprd h4, .fprd h5 {
	margin: 0;
	padding: 0;
}

.fprd h5.type {
	display: none !important;
}

/* image 
------------------------------------------------------- */

.fprd .fprdimg {
	grid-area: image;
	position: relative;
	align-items: center;
	overflow: hidden;
}

.fprd .fprdimg a {
	display: block;
	text-align: center;
}

.fprd .fprdimg img {
	margin: 0;
	object-fit: cover;
	width: 100%;
}

.fprd .fprdimg img:hover {}

/* title
------------------------------------------------------- */

.fprd .fprdtitle, .fprd a.title {
	grid-area: title;
	text-align: center;
	border-top: 2px solid var(--pink);
	font-weight:400;
	font-family: var(--heading-font);
	font-size: 1.25em;
	padding: .5rem;
	text-transform: capitalize;
}

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

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

/*this client uses the strapline as the title */

.fprd .strap {
	grid-area: title;
	padding: 0 1rem;
	font-size: 1em;
	font-family: var(--fprd-title-font);
	font-weight: 500;
	text-transform: capitalize;
}

.fprd .strap a {}

/* title
------------------------------------------------------- */

.fprd .fprddescr {
	grid-area: description;
	display: none;
}

/* pricing structure
------------------------------------------------------- */

.fprd h6 {
	margin: 0;
	padding: 0;
	font-family: var(--text-font);
	font-weight: 500;
}

.fprd h6 span {
	font-size: small;
	display: block;
	color: var(--text-sub-heading-color);
}

.fprd label {
	margin: 0;
	padding: 0;
	font-size: small;
}

.fprd .rrp {}

.fprd .rrp label {}

.fprd .rrp h6 {}

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

.fprd .prevprice label {}

.fprd .prevprice h6 {
	text-decoration: line-through;
	font-weight: 400;
}

.fprd .price {
	grid-area: selling-price;
	grid-column:1/-1;
	/* margin-left: 1rem; */
	text-align:center;
}

.fprd .price label {
	display:none;
	color: var(--text-sub-heading-color);
}

.fprd .price h6 {
	font-size: 1rem;
	font-weight: var(--heading-font-weight);
	/* color:var(--red); */
}

.fprd .price h6 span {}

.fprd .trade {
	grid-area: selling-price;
	text-align: center;
}

.fprd .trade label {}

.fprd .trade h6 {}

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

.fprd .offer label {}

.fprd .offer h6 {
	font-size: 1.25rem;
	font-weight: var(--heading-font-weight);
	color: var(--red);
}

.fprd .offer h6 span {}

.fprd .saving {}

.fprd .saving label {}

.fprd .saving h6 {}

/* pricebreaks 
------------------------------------------------------- */

.pricebreak {}

/* Unit specifics 
------------------------------------------------------- */

.fprd .unit {
	grid-area: unit-price;
	padding-left: .5rem;
	display: none;
}

.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 {}

.fprd .unit h6 span {
	display: block;
	color: var(--text-sub-heading-color);
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

.fprd .qty {
	grid-area: carton;
	text-align: center;
	display: none;
}

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

.fprd .qty h6 span {
	display: block;
	color: var(--text-sub-heading-color);
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

/* clientref/model code
------------------------------------------------------- */

.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: block;
	font-weight: var(--text-font-weight);
}

.fprd .clientref {
	grid-area: client-ref;
	/* padding: 0 .5rem; */
	font-size: .725em;
	text-align: left;
}

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

/* 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;
	bottom: 1rem;
}

.fprd .piflags ul {
	margin: 0;
	padding: 0;
}

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

.fprd .piflags img {
	width: auto;
	max-width: 80%;
}

/* flag could be any auto sys flag like no stock, offer etc */

.fprd .flag {
	position: absolute;
	display: block;
}

.fprd .flag img {
	display: block;
	margin: 0;
}

.fprd .flag.prdel {
	margin: 0;
	top: 1rem;
	left: 0;
}

.fprd .flag.prdel img {
	max-width: 100px;
	max-width: 40%;
	margin: 0;
}

.fprd .flag.offer {
	margin: 0;
	top: 0;
	right: 1rem;
}

.fprd .flag.offer img {
	max-width: 75px;
	max-width: 30%;
	margin-left: auto;
}

.fprd .flag.newin {}

.fprd.flag.stkout {}

/* quantity in basket - CAUTION not shown everywhere... 
------------------------------------------------------- */

.qtyInBskt {
	display: none;
}

/* more info and quickview button 
------------------------------------------------------- */

.fprdinfo {
	grid-area: fprdinfo;
	margin: 1rem;
}

/*again with the REAL mobile filter results being somehow different! */

.fprd a.btn {
	grid-area: fprdinfo;
}

.fprdinfo a.btn {
	display: block;
	padding: var(--half-spacing);
}

/* 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;
	margin: 0;
	/* this won't work with dropdown skus */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.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(--alt-button-color) solid;
	background-color: var(--alt-button-color);
	color: var(--alt-button-text-color);
	font-weight: 600;
	padding: .5em .75em;
}

.fprd button.fpskuqtysub {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.fprd form input.inputtext {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.fprd button.fpskuqtyadd {}

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

.fprd .submit {
	border: 1px var(--button-color) solid;
	background-color: var(--button-color);
	color: var(--button-text-color);
}

/* Email when in stock
------------------------------------------------------- */

.fprd .ewis {
	grid-area: buy-pane;
	margin: 0;
	padding: 0 .5rem;
}

/* buyform
------------------------------------------------------- */

/*current hack for sample request - things need classes */

.fprd form {
	grid-template-columns: auto;
	grid-column: 1/-1;
	margin: 1rem;
	/* margin-top:0; */
}

.fprd form .submit {
	border: 1px var(--pink) solid;
	background-color: var(--pink);
	color: var(--white);
	margin:auto;
}

/* -------------------------------------------------------------------------------------
=ProductPage 
------------------------------------------------------------------------------------- */

#pmid.page_buy {}

/*change of layout here */

#pmid.page_buy #pm.pmfull {
	width: 100%;
}

/* Product Panels 
------------------------------------------------------- */

#pi {
	margin: 0;
	padding: 0;
	/* margin-bottom: 4em; */
}

#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 650px - use percentages to scale */
	grid-template-columns: 54.1667fr 45.8333fr;
	grid-template-areas: "top left" "right right" "bottom bottom";
	grid-column-gap: 2rem;
}

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

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

#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;
}

/* Product Title
------------------------------------------------------- */

#pi .pititle {
	grid-area: product-title;
}

/* Product description
------------------------------------------------------- */

#pi .pidescx {
	grid-area: product-description;
}

#pi .pidescx p{
	font-size: 13.3333px;
}


/* Strapline
------------------------------------------------------- */

h4.strap {
	grid-area: product-strapline;
}

/* Gallery - now Swiffy
------------------------------------------------------- */

#pi .gallery {
	grid-area: gallery;
}

#pi .gallery .slider-main {
	--swiffy-slider-item-count: 1;
	--swiffy-slider-item-ratio: 3/4;
	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 {
	--swiffy-slider-item-count: 3;
}

/*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;
}

#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
}

#pi .top .flags {
	position: absolute;
	top: 0rem;
	left: 0;
	width: 100%
}

#pi .top .flags .prdel {
	position: absolute;
	left: 0;
	top: 1rem;
}

#pi .top .flags .prdel img {
	max-width: 150px;
}

#pi .top .flags .offer {
	position: absolute;
	right: 1rem;
	top: 0rem;
}

#pi .top .flags .offer img {
	max-width: 120px;
}

/* Buy Panel
------------------------------------------------------- */

#pi .pibuy {
	margin:1rem 0;
	grid-area: product-buy-pane;
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas: "sellingprice prev-price ." "buypane buypane buypane";
	align-items: end;
	grid-gap: 1rem;
}

.pibuy label {
	display: block;
	margin-right: var(--half-spacing);
}

/* for some reasone we always show "price in..." */

.pibuy .title {
	display: none
}

#pi .pibuy h6 {
	display: inline-block;
	padding: 0;
	margin-bottom: 0;
}

/*normal price */

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

#pi .pibuy .price h6 {
	font-size: 1.25rem;
	font-weight: var(--heading-font-weight);
}

/*offer price */

#pi .pibuy .offer {
	grid-area: sellingprice;
}

#pi .pibuy .offer h6 {
	font-size: 1.5rem;
	font-weight: var(--heading-font-weight);
	color: var(--red);
}

/*previous price (goes with offer) */

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

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

/* Messages */

#pi .pibuy p {}

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

#pi .pibuy h4 {}

#pi .pibuy h5 {}

#pi .pibuy p.p_stock {}

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

/* stock */

#pi .pibuy .stock {
	/*being written out when not actually in use! */
	display: none;
}

/*order cutoff timer? */

#pi .pibuy p.cutoff {
	color: var(--info-color);
}

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

/* quantity in basket info */

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

/*dynamic price */

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

/* Buy Form
-------------------------------------------------------*/
#buy_form {
	grid-area: buypane;
	margin: 0;
	/* background-color: var(--off-white); */
	/* padding: 1rem; */
}

/* 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;
	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(--pink);
	color: var(--button-text-color);
	border: 1px solid var(--pink);
	border-radius: .25rem;
	outline: none;
	padding: var(--half-spacing) 0;
	width:200px;
}

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

#pi .pibuy .attrqty .qtyinput button{
	-webkit-appearance: none;
	border-color: var(--border-color);
	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: auto;
	border-width: 1px;
	border-style: solid;
}

#pi .pibuy .attrqty #skuqty{
	border-radius:0;
	text-align:center;
	
}



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

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

/* 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;
}

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

#pi .pidesc h2[itemprop="name"] {
	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:before {
	content: "";
	grid-area: icon;
	width: 30px;
	height: 17px;
	background: url('https://www.orderblinds.co.uk/orderblinds/148701185/i/bdr/deliveryvan.png') no-repeat center;
}

#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;
	list-style-position:inside;
}

/* Links
-------------------------------------------------------*/

#pi .pilinks {
	grid-area: product-links;
}

#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-weight: 600;
	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!
-------------------------------------------------------*/

#pi .youtube {
	grid-area: product-video;
}

/* Flags (site flags like offer)
-------------------------------------------------------*/

#pi .flags {
	grid-area: product-flags;
}

#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 .left .piflags {
	grid-area: product-piflags;
}

#pi .left .piflags li {
}

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

#pi .left .piflags li span {
	grid-area: text;
}

/* 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:before {
	content: "";
	grid-area: icon;
	width: 30px;
	height: 17px;
	background: url('https://www.orderblinds.co.uk/orderblinds/148701185/i/bdr/deliveryvan.png') no-repeat center;
}

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

#pi #ordercutofftime .countdown span {}

/* Product Files
-------------------------------------------------------*/

#pi .pifile {
	grid-area: product-file;
}

/* 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
-------------------------------------------------------*/

#pi .art {
	grid-area: product-article;
	margin: 1rem 0;
}

#pi .art a{
	--border-color: var(--pink);
	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(--pink);
	color: var(--button-text-color);
	border: 1px solid var(--border-color);
	border-radius: .25rem;
	outline: none;
	padding: var(--half-spacing) 0;
	width:200px;
}

#pi .art a:before{
	display: inline-block;
	font-family: var(--font-awesome);
	margin: 0 var(--half-spacing);
	content: '\f002';
}

#pi .art ul {
	display: grid;
	margin: 0;
	padding: 1rem 0;
	grid-template-columns: auto auto auto;
	align-items: center;
	margin-bottom: 2rem;
}

#pi .art li {
	color: var(--navy);
	margin: 0;
	list-style: none;
	text-align: center;
	border-right: 2px solid var(--navy);
	height: 100%;
	align-items: center;
	display: grid;
}

#pi .art li span {
	padding: var(--spacing);
	display: block;
}

#pi .art li i {
	margin-right: 1rem;
	display: inline-block;
	vertical-align: middle;
}

#pi .art li:last-child {
	border: none;
}

#pi .art .promise {
	text-align: center;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	position: relative;
	/*margin equal to half the height of the badge */
	/* margin-top: 38.5px; */
	padding: 2em;
	margin-bottom: 1rem;
}

#pi .art .promise h3 {
	margin-top: 1.5rem;
}

#pi .art .promise img {
	position: absolute;
	left: calc(50% - 38.5px);
	top: -38.5px;
}

#pi .art .promise p {
	margin: 0;
}

#pi .art .product-cta {
	display: grid;
	grid-template-columns: 30px 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 .art .product-cta i {
	grid-area: icon;
	color: var(--navy);
	text-align: center;
	font-size: 1.2rem;
}

#pi .art .product-cta p {
	grid-area: text;
	margin: 0;
	font-size: .825rem;
}

/* Tabbed Descriptions
-------------------------------------------------------*/

#pi .pi_tab, #pi #pi_wrapper {
	grid-area: product-tabbed-description;
}

#pi ul.pi_tabs {
	--spacerwidth: calc((100% - var(--site-max-width)) / 2);
	cursor: pointer;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: var(--spacerwidth) auto auto auto var(--spacerwidth);
	grid-template-areas: ". tab1 tab2 tab3 .";
	border-bottom: 1px solid var(--border-color);
}

/*ugly but it works*/

#pi ul.pi_tabs li[tabid="tabs1"] {
	grid-area: tab1;
}

#pi ul.pi_tabs li[tabid="tabs2"] {
	grid-area: tab2;
}

#pi ul.pi_tabs li[tabid="tabs3"] {
	grid-area: tab3;
}

#pi ul.pi_tabs li {
	list-style: none;
	margin: 0;
	padding: 1em;
	text-align: center;
	color: var(--text-color-light);
}

#pi ul.pi_tabs li.selected {
	color: var(--text-color);
	border: 1px var(--border-color) solid;
	border-radius: var(--border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px white solid;
	;
	position: relative;
	padding: calc(1em + 2px);
	top: 1px
}

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

#pi .pi_tab_content {
	width: calc(var(--site-max-width) - 2rem);
	margin: auto;
	padding: 2rem 1rem;
}

/*a class would be better! */

#pi .pi_tab_content div[itemprop="description"] {
	width: 50%;
	display: inline-block;
	vertical-align: top;
}

#pi .pi_tab_content .img {
	width: 50%;
	display: inline-block;
	vertical-align: top;
}

#pi .pi_tab_content ul, #pi .pi_tab_content ol {
	margin: 1em
}

/* Recommended Products - option to also buy these at the same time
-------------------------------------------------------*/

#pi .prec {
	grid-area: product-recommended;
	margin-top: 1rem;
}

/*recomended products */

.slider-rec {}

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

#pi .prec h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(100% - .5em);
	margin-left: .5em;
	height: 2px;
	content: '\a0';
	background-color: var(--navy);
}

/* -------------------------------------------------------------------------------------
=Super Attributes 
------------------------------------------------------------------------------------- */

.cls_superattrribute.hideAttr {
	visibility: hidden;
	display: block;
	height: 0;
	opacity: 0;
	padding: 0 !important;
	transform: translateY(0);
	transition: all .1s ease;
}

.sacontainerpanel {}

.sacontainerpanel ul, .sacontainerpanel li {
	list-style: none;
	margin: 0;
	font-size: 16px;
}

/* 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 {
	display: none;
	z-index: 2000;
}

/*help icon */

.cls_superattrribute img[id^="help"] {}

/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */

.attributeTypePrice_Matrix_Calculator {
	/*required for the help icon position*/
	position: relative;
}

.attributeTypePrice_Matrix_Calculator #saten_pnl_show {}

/*.attributeTypePrice_Matrix_Calculator .att_container{
	display:grid;
	grid-template-columns:auto auto;
	grid-gap:1rem;
	grid-template-areas:"header header"
	"attX attY"
	"calcprice calcprice"
}*/

.attributeTypePrice_Matrix_Calculator .att_container {
	margin-bottom: 1rem;
}

.attributeTypePrice_Matrix_Calculator .att_header {
	/*not in design so hiding */
	display: none;
}

.attributeTypePrice_Matrix_Calculator label {
	display: inline-block;
}

.att_X, .att_Y {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	padding-bottom: 1rem;
	text-align: center;
	overflow: hidden;
}

.att_X label, .att_Y label {
	display: block;
	margin: 0;
}

.att_X {
	grid-area: attX;
}

.att_X label:after {
	display: inline-block;
	font-family: var(--font-awesome);
	margin: var(--half-spacing);
	content: '\f07e';
	color: var(--navy);
}

/*
.att_X:after{
	content:'cm';
	display:inline-block;
}*/

.att_Y {
	grid-area: attY;
}

.att_Y label:after {
	display: inline-block;
	font-family: var(--font-awesome);
	margin: var(--half-spacing);
	content: '\f07d';
	color: var(--navy)
}

/*
.att_Y:after{
	content:'cm';
	display:inline-block;
}*/

.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 {
	color: var(--error-color);
	display: inline-block !important;
	vertical-align: top;
}

/*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 {
	display: none;
}

.attributeTypePrice_Matrix_Calculator .calc_price {
	grid-area: calcprice;
}

.attributeTypePrice_Matrix_Calculator .calc_price .submit {
	display: inline-block;
	width: 100%;
	padding: 1em;
	border-radius: var(--border-radius);
	text-align: center;
}

/*the widths on these are not nice - need making better !*/

.attributeTypePrice_Matrix_Calculator input.inputtext_short {
	width: 8rem;
}

.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 {
	max-width: 100%;
	width: calc(100% - 3rem);
}

.attributeTypeText_Box_Free_Text_Entry .attrContainer>div:first-of-type {
	position: relative;
	display: grid;
	align-items: start;
	grid-template-columns: 50% 50%;
	padding: .5rem 0;
}

/*attributeTypeDrop_down_list
***************************************************************/

.attributeTypeDrop_down_list {
	position: relative;
	display: grid;
	align-items: start;
	grid-template-columns: 50% 50%;
	padding: .5rem 0;
}

/*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 {
	width: calc(100% - 3rem);
}

/* whatever this is we don't want it! */

.sa_pnl_product_popup_image_show {}

/*attributeTypeSingle_Image_Upload 
***************************************************************/

.attributeTypeSingle_Image_Upload {
	position: relative;
}

.attributeTypeSingle_Image_Upload .attrContainer {
	position: relative;
	display: grid;
	align-items: start;
	grid-template-columns: 50% 50%;
	grid-template-areas: "label image" "fileupload fileupload";
	padding: .5rem 0;
}

.attributeTypeSingle_Image_Upload .attrContainer label {
	grid-area: label;
}

/*delete image */

.attributeTypeSingle_Image_Upload .siup_triggerdel {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
}

/*should be the file uploader*/

.attributeTypeSingle_Image_Upload input {
	grid-area: fileupload;
	padding: 1rem;
}

.attributeTypeSingle_Image_Upload .progress {}

/*should be the uploaded image */

.cls_superattrribute.attributeTypeSingle_Image_Upload div[id^="siup"] {
	grid-area: image;
}

/* -------------------------------------------------------------------------------------
=Basket - Checkout v5
------------------------------------------------------------------------------------- */

/*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" "freedelivery freedelivery" "lines totals" "lines suppchg" "lines voucher" "lines buttons" "lines ." "prioritydelivery prompane" "standarddelivery prompane" ". prompane" "shipping shipping";
	align-items: start;
	margin-bottom: 4rem;
}

#pm .bskt form {
	margin: 0 auto;
	padding: 0;
}

/* if basket is empty and user is in it */

.bskt .empty {}

.bskt .empty .header {}

.bskt .empty .total {}

/* Checkout Breadcrumb
------------------------------------------------------- */

.chkcrumb {
	grid-area: breadcrumb;
}

/* Basket header
------------------------------------------------------- */

#pm .bskt .header {
	grid-area: header;
	background-color:var(--pink);
	padding:1em;
	margin-bottom:1em;
}

#pm .bskt .header .title {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	text-align:center;
	font-size: 2rem;
	color:var(--white);
}

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

/* Basket Lines
------------------------------------------------------- */

#pm .bskt .alllines {
	grid-area: lines;
	max-height: 620px;
	padding-right: 1rem;
	overflow-y: auto;
}

#pm .bskt .line {
	padding-bottom: var(--spacing);
	margin-bottom: var(--spacing);
	align-items: start;
	display: grid;
	--image-width: 4rem;
	--description-width: 1fr;
	--qty-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" ". desc . . ." ". skuselect . . .";
	border-bottom: 1px solid var(--border-color);
	grid-column-gap: 1rem;
}

/* Image */

#pm .bskt .line .prodimg {
	grid-area: icon;
}

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

/* Product Info - in list form */

#pm .bskt .line .prodinfo {
	grid-area: desc;
	margin: 0;
	padding: 0;
}

#pm .bskt .line .prodinfo .surcharge {
	font-weight: 600;
}

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

#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(--navy);
	font-style: normal;
	border: 1px var(--navy) solid;
	padding: .25rem;
	border-radius: .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 .qty form {
	line-height: 1;
}

#pm .bskt .lines .line .qty label {
	margin-right: var(--half-spacing);
}

#pm .bskt .lines .line .qty button {
	background: var(--white);
	border: 1px solid var(--border-color);
	padding: var(--half-spacing);
	font-family: monospace;
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
	border-right: 0;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

#pm .bskt .lines .line .qty button.skuqtybsktadd {
	border-left: 0;
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

#pm .bskt .lines .line .qty input.inputtext {
	text-align: center;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	font-family: monospace;
}

/* 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);
}

/* 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;
	font-weight: 400;
	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;
}

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

.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 {
	font-weight: 600;
}

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

.shipping form input, .shipping form h4 {
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--half-spacing);
}

.shipping form h4 {}

.shipping ul li.delivery {}

.shipping ul li.delivery.deliveryto {
	display: block;
}

/*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 Sup Charge
------------------------------------------------------- */

.suppchg {
	grid-area: suppchg;
	text-align: left;
	padding: var(--spacing);
	background-color: var(--navy);
	color: var(--white);
}

.suppchg>div {
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 1px solid var(--navy);
	display: grid;
	grid-template-areas: "header header" "checkbox text";
	align-items: start;
}

.suppchg h3 {
	background-color: var(--navy);
	font-weight: 400;
	font-size: 1rem;
	padding: var(--spacing);
	grid-area: header;
	margin-bottom: 1rem
}

.suppchg h3:before {
	content: '\f545';
	font-family: var(--font-awesome);
	color: var(--navy);
	font-size: 1rem;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--half-spacing)
}

.suppchg input {
	grid-area: checkbox;
	margin: 0 1rem;
}

.suppchg .article {
	grid-area: text;
	font-size: .825rem;
}

.suppchg .article p {
	font-size: .725rem;
}

.suppchg .article p:last-child {
	font-size: .725rem;
	background-color: var(--navy);
	border-radius: var(--border-radius);
	padding: .5rem 1rem;
}

/* Basket Totals
------------------------------------------------------- */

.bskttotals {
	grid-area: totals;
	text-align: center;
	padding: var(--spacing);
	display: grid;
	grid-template-areas: "totals" "subtotals" "discount";
}

.bskttotals .total {
	grid-row: 1;
}

.bskttotals .total span {
	grid-area: totals;
	font-size: 2rem;
	font-weight: var(--heading-font-weight);
}

.bskttotals .total label {
	display: block;
	margin-bottom: var(--spacing)
}

.bskttotals .total span {
	display: block;
	margin-bottom: var(--half-spacing);
}

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

.bskttotals .subtotal+.subtotal {
	/* grid-area:discount; */
	display: grid;
}

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

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

/* Vouchers
------------------------------------------------------- */

.vouchentryaccord, .vouchentry {
	grid-area: voucher;
	/* background-color: var(--navy); */
	/* color: var(--white); */
	padding: 0 1rem;
	text-align: center;
}

.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;
}

.vouchentryaccord .header img {
	display: none !important;
}

#pm .ul.accordion .vouchentryaccord .pane, #pm .bskt ul.accordion .pane {
	padding: 0;
	display: none;
}

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

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

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

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

.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%;
}

.vouchentry .submit {
	grid-area: submit;
	background-color: var(--navy);
	border-color: var(--navy);
	margin-left: .5rem;
}

/* Basket Payment Buttons
------------------------------------------------------- */

.bsktbuttons {
	grid-area: buttons;
	text-align: center;
	padding: var(--spacing);
	margin-bottom: 1rem;
}

.bsktbuttons .startcheckout {
	grid-area: pay;
	margin-bottom: .5em;
	background-color:var(--pink);
	border-color:var(--pink)
}

.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;
	font-weight: 600;
	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;
}

.basket-review-badge {
	padding: 1rem;
}

/* the OB Promise */

#pm ul.prompane .promise {
	text-align: center;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	position: relative;
	/*margin equal to half the height of the badge */
	margin-top: 38.5px;
	padding: 2em;
	margin-bottom: 1rem;
}

#pm ul.prompane .promise h3 {
	margin-top: 1.5rem;
}

#pm ul.prompane .promise img {
	position: absolute;
	left: calc(50% - 38.5px);
	top: -38.5px;
}

#pm ul.prompane .promise p {
	font-size: .825rem;
}

#pm ul.prompane ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#pm ul.prompane ul.promises 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;
}

#pm ul.prompane li i {
	grid-area: icon;
	color: var(--navy)
}

#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;
	font-family: var(--text-font);
	font-weight: 400;
	font-size: .825rem
}

.priordelinfo p, .stddelinfo p {
	grid-area: price;
	margin: 0;
	font-weight: 600;
}

.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-weight: 400;
	font-size: .825rem
}

/* -------------------------------------------------------------------------------------
=New Checkout Process - replaces Checkout v5 Accordion Option
------------------------------------------------------------------------------------- */

#pt.checkouttop .ext {
	--breadcrumb-width: 1fr;
		grid-template-columns:100%;
		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;
}

#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;
}

#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(--light-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#psign .exstregfield {
	display: none;
}

.page_checkoutsignin .form#pguest {
	grid-area: guest;
	width: auto;
}

.page_checkoutsignin .form#psign label, .page_checkoutsignin .form#pguest label {
	display: block;
}

.page_checkoutsignin .form#psign input, .page_checkoutsignin .form#pguest input {
	display: block;
	width: 100%;
}
.page_checkoutsignin .form#psign .subscribe input,
.page_checkoutsignin .form#psign .subscribe label,
.page_checkoutsignin .form#pguest .subscribe input,
.page_checkoutsignin .form#pguest .subscribe label{
	display:inline;
	width:auto;
}


.page_checkoutsignin .form#psign .submit, .page_checkoutsignin .form#pguest .submit {
	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) 
------------------------------------------------------- */

.page_delivery h3, .page_checkout h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_delivery h3:before, .page_delivery h3:after, .page_checkout h3:before, .page_checkout h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(15% - 1em);
	margin-left: 1em;
	height: 2px;
	content: '\a0';
	background-color: var(--border-alt-color);
}

.page_delivery h3:before, .page_checkout h3:before {
	margin-left: -15%;
	text-align: right;
}

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

.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;
}

.page_delivery form input, .page_checkout form input, .page_delivery form select, .page_checkout form select {
	width: 100%;
}

.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;
}

.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 .form li .pclup, .page_checkout .form li .pclup {}

.page_delivery .form li .pclup label, .page_checkout .form li .pclup label, .page_delivery .form li .pclupdel label, .page_checkout .form li .pclupdel label {}

.page_delivery .form li label[for="txtPostCodeLookup"], .page_checkout .form li label[for="txtPostCodeLookup"], .page_delivery .form li label[for="ddlMultiAddress"], .page_checkout .form li label[for="ddlMultiAddress"] {
	display: none;
}

.page_delivery .form li .pclup input, .page_checkout .form li .pclup input, .page_delivery .form li .pclupdel input, .page_checkout .form li .pclupdel input {
	width: auto;
	display: inline-block;
}

.page_delivery .form li .pclup input.submit, .page_checkout .form li .pclup input.submit, .page_delivery .form li .pclupdel input.submit, .page_checkout .form li .pclupdel input.submit {}

.page_delivery .form li .pclup span.or, .page_checkout .form li .pclup span.or, .page_delivery .form li .pclupdel span.or, .page_checkout .form li .pclupdel span.or {
	display: none;
}

.page_delivery .form li .pclupdel, .page_checkout .form li .pclupdel {}

.page_delivery form[name="back"] {
	display: none !important;
}

/* 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: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_shipping h3:before, .page_shipping h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(15% - 1em);
	margin-left: 1em;
	height: 2px;
	content: '\a0';
	background-color: var(--border-alt-color);
}

.page_shipping h3:before {
	margin-left: -15%;
	text-align: right;
}

.page_shipping select {
	width: 100%;
}

.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 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "header header" "payment summary" "payment ." ". details" ". cont";
	grid-column-gap: 4rem;
	position: relative;
}

.page_payment #pm .bt {
	grid-area: header;
	text-align: center;
	margin-bottom: 1rem
}

.page_payment h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_payment h3:before, .page_payment h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(15% - 1em);
	margin-left: 1em;
	height: 2px;
	content: '\a0';
	background-color: var(--border-alt-color);
}

.page_payment h3:before {
	margin-left: -15%;
	text-align: right;
}

.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" "paypal" "cash" "header";
}

/*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;
}

.sp_button {}

.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.orderblinds.co.uk/orderblinds/148701185/i/bdr/paywithdebit.png?_t=234316359') #fff no-repeat center;
	aspect-ratio: 668/65;
	background-size: contain;
}

.page_payment #pm .sp_button.pt_debitcreditcard input[type="radio"]:checked+label {
	background: url('https://www.orderblinds.co.uk/orderblinds/148701185/i/bdr/paywithdebit-ticked.png?_t=234316359') #fff no-repeat center;
	aspect-ratio: 668/65;
	background-size: contain;
}

.page_payment #pm .sp_button.paypal {
	grid-area: paypal;
	cursor: pointer;
	background: url('https://www.orderblinds.co.uk/orderblinds/148701185/i/bdr/paywithpaypal.png?_t=234316359') #fff no-repeat center;
	aspect-ratio: 668/65;
	background-size: contain;
	margin-bottom: 1em;
}

.page_payment #pm .sp_button.paypal input[type="radio"]:checked+label {
	background: url('https://www.orderblinds.co.uk/orderblinds/148701185/i/bdr/paywithpaypal-ticked.png?_t=234316359') #fff no-repeat center;
	aspect-ratio: 668/65;
	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;
}

/*-- */

/*payment article */

.page_payment #pm .art {
	grid-area: header;
}

.page_payment #pm .art .promise {
	text-align: center;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	position: relative;
	/*margin equal to half the height of the badge */
	margin-top: 38.5px;
	padding: 2em;
	margin-bottom: 1rem;
}

.page_payment #pm .art .promise h3 {
	margin-top: 1.5rem;
}

.page_payment #pm .art .promise img {
	position: absolute;
	left: calc(50% - 38.5px);
	top: -38.5px;
}

.page_payment #pm .art .promise p {
	font-size: .825rem;
}

.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;
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(50% - 2rem);
}

.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;
	align-self: start;
}

.bsktsum h4 {
	display: none;
}

.bsktsum .lines {
	overflow-y: scroll;
	height: 200px;
	border: 1px solid var(--border-color);
	padding: 1rem;
	padding-left: .5rem;
}

.bsktsum .lines .line {
	padding-bottom: var(--spacing);
	margin-bottom: var(--spacing);
	align-items: start;
	display: grid;
	grid-template-columns: 1fr auto 100px;
	grid-template-areas: "desc qty price";
	grid-column-gap: 1rem;
}

.bsktsum .lines .line .unitprice {
	display: none;
}

/* Product Info - in list form */

.bsktsum .lines .prodinfo {
	grid-area: desc;
	list-style: none;
}

.bsktsum .lines li {
	font-size: .825rem;
	margin-left: .5rem;
}

.bsktsum .lines li.descr {
	font-size: 1rem;
	font-family: var(--heading-font);
	margin-left: 0;
}

.bsktsum .lines li.flags {}

.bsktsum .lines li.flags img {
	margin: 0;
	max-width: 100%;
}

.bsktsum .lines .qty {
	grid-area: qty;
}

.bsktsum .lines .qty label {
	display: none;
}

.bsktsum .lines .price {
	grid-area: price;
	text-align: right;
}

.bsktsum .totals {
	margin-top: 1rem;
	text-align: right;
}

.bsktsum .totals label {}

.bsktsum .totals .subtotal {
	display: grid;
}

.bsktsum .totals .subtotal:last-child {}

.bsktsum .totals .subtotal:last-child label {
	font-weight: 600;
}

.bsktsum .totals .subtotal:last-child span {
	font-weight: 600;
}

/* Continue Checkout Process
------------------------------------------------------- */

.page_delivery .contbtn, .page_checkout .contbtn {}

.forinvoice {}

.page_delivery .forinvoice .chkbox label {}

.page_delivery .contbtn input, .page_checkout .contbtn input {}

/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */

.form.myaccount#psign {
	width: calc(100% - 2em);
	margin: auto;
}

/* could do with being in some form of logical container */

.page_useraccount #pm .bnr {
	text-align: center;
}

/* could do with being in some form of logical container */

.page_useraccount #pm .arts {
	text-align: center;
}

#psign h4, #psign h3 {
	margin-bottom: .5em;
}

.page_useraccount ul.orders img, .page_useraccount ul.contact img, .page_useraccount ul.details img {
	max-width: 100%;
	height: auto;
}

.page_useraccount ul.orders {}

/* new order status stuff - no one ever does stuff the same!!!! */

.past_orders {
	display: grid;
}

.past_order_header, .past_order {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* account icons
------------------------------------------------------- */

.page_useraccount .form li.icon {
	display: inline-block;
	margin-right: 1em;
}

.page_useraccount .form li.icon a.img {
	display: block;
	text-align: center;
	border: 1px solid var(--border-color);
}

.page_useraccount .form li.icon a.lnk {
	display: block;
	text-align: center;
	margin: .5em auto;
}

.page_useraccount .form li.icon a.img img {
	display: block;
	margin: auto;
}

/* -------------------------------------------------------------------------------------
=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 .header:before, .page_confirmation .header:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(15% - 1em);
	margin-left: 1em;
	height: 2px;
	content: '\a0';
	background-color: var(--border-alt-color);
}

.page_confirmation .header:before {
	margin-left: -15%;
	text-align: right;
}

.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 .subhead:before, .page_confirmation .subhead:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(15% - 1em);
	margin-left: 1em;
	height: 2px;
	content: '\a0';
	background-color: var(--border-alt-color);
}

.page_confirmation .subhead:before {
	margin-left: -15%;
	text-align: right;
}

.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 a.img {}

/* 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 {
	background-color: #ffffff;
	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 Spefific Stylings 
------------------------------------------------------------------------------------- */

#productGallery {
	max-width: 500px;
	margin: auto;
}

.sahelpart {
	display: none;
}

.jaqshadow {
	display: none!important;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 nav 2023
	Filename : nav.css
	Last Updated : 04. 04. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com


/* ##################### MAIN STYLES ######################### */


: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;
	border-top: 1px solid var(--navbar-color);
	border-bottom: 1px solid 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;
	width: var(--menu-max-width);
	text-align:center;
}

div.nav-wrapper>ul {
	position: relative;
}

ul.nav>li {
	display:inline-block;
	font-size: 1rem;
}

ul.nav>li>a {
	display: block;
	line-height:var(--menu-line-height);
	padding: 0 calc(2rem + 10px) 0 1rem;
	color: var(--navbar-link-color);
	font-family:var(--heading-font);
	font-size:1.25em;
	text-decoration: none;
}

ul.nav>li>a:only-child {
	padding: 0 2rem 0 2rem;
}

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;
	/*don't put padding here it breaks the menu on mobile */
	/* padding:0 var(--half-spacing); */
}

ul.nav li.classic .deptlink a.img{
	display:inline-block;
	vertical-align:middle;
	max-height:var(--navbar-dropdown-item-height);
	width:var(--navbar-dropdown-item-height);
	margin-right:var(--half-spacing);

}

ul.nav li.classic .deptlink a.img img{
	
	padding:4px;
}

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{
	display:inline-block;
	width:calc(100% - 3rem);
	vertical-align:middle;
	font-size:var(--navbar-dropdown-text-size);
	line-height: var(--navbar-dropdown-item-height);
	padding: 0;
	color: var(--navbar-dropdown-text-color);
	text-decoration: none;
	font-size: var(--navbar-dropdown-text-size);
}

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);
}

/* 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);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

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;
}

/* RUBY 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>li.ruby-open-to-left>ul,
ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul {
	left: auto;
	right: var(--navbar-dropdown-width);
}

/* RUBY MENU MEGA */

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);
}

/* RUBY MENU MEGA BLOG */

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: 1rem;
}

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;
}


/* RUBY CONTENT GRID */

div.menu-grid,
div.menu-grid-lined {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}

/*rows*/
div.menu-grid>div.menu-row {
	position: relative;
	padding:var(--half-spacing);
	height:auto;
}

div.menu-grid > div.menu-row ul{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	/* grid-gap:1rem; */
	margin-bottom:1rem;
}

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 .deptlink{
	position:relative;
	/* border-radius:1em; */
	margin:0;
	overflow:hidden;
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"image"
		"text";
	align-items:center;
	background-color:var(--grey);
}

div.menu-grid > div.menu-row ul li .deptlink a.img{
	grid-area:image;
}

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);
	background-color: var(--pink);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size:1rem;
	grid-area:text;
	align-self:center;
	padding: .5rem .25rem;
}




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;
}

/* Ruby Content Related */
ul.nav>li.mega-menu-classic>div ul,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>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,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li {
	position: relative;
	font-size: 14px;
	line-height: 28px;
	display: block;
	width: 100%;
}

ul.nav>li.mega-menu-classic>div ul li>a,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>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,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li>a:hover {
	color: var(--text-link-color-hover);
	text-decoration: underline;
}

ul.nav>li.mega-menu-classic>div ul li .fa,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>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 */

@media(min-width:768px) {

	/* 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:1rem;
		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:767px) {
	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 {
		padding: 0 65px;
		background: var(--pink);
	}
	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(--navbar-hover-color);
	}
	ul.nav>li.active-menu-item>a,
ul.nav>li.first-menu-item>a	{
		background: var(--navbar-hover-color);
	}
	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 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(--navbar-link-color);
		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: .5rem;
	}

	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(--navy);
	}
	/* 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(--navy);
		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;
	}
}

/* MEDIA QUERY --> MEDIUM DEVICES */

@media(min-width:992px) and (max-width:1199px) {}

/* MEDIA QUERY --> LARGE DEVICES */

@media(min-width:1200px) {}



/* ########################################################### */

/* #################### RUBY MEGA MENU   ##################### */

/* ######################## V 1.0 ############################ */

/* ################## TRANSITION EFFECTS ##################### */

/* Ruby Mega Menu - Dropdown Togglers - MOBILE */

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;
	}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	:root{
		--site-max-width:100%;

	}

/* FIXEDTop Panel
	------------------------------------------------------------------------------------- */
	
	#ptf {
		top: 0px;
		width: 100%;
		margin-top: .25em;
		border-top: 2px var(--top-bar-color) solid;
		color: var(--top-bar-color);
		text-align: center;
		font-size: .825rem
	}
	
	#ptf .ext {
		padding: var(--half-spacing);
		display: grid;
		grid-template-areas: 
			"social infolinks"
			"message message";
		grid-row-gap:1em;
		grid-template-columns: 1fr 1fr;
	}

	
	#ptf .ext .art {
		grid-area: social;
		text-align:left;
	}
	
	#ptf .ext .art.fullWidth {
		grid-area: message;
		text-align:center;
	}
	
	#ptf .ext .info {
		grid-area: infolinks;
		text-align:right;
	}
	/* Top panel 
	------------------------------------------------------- */
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:"menulink logo basket "
							"search  search search"
							"nav  nav nav";
	}

	#pt .search{
		grid-area:search;
		z-index:1001;
		margin-bottom:var(--half-spacing)
	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1001;
	}

	.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:0;
	}

	div.menu-grid > div.menu-row ul li{
	padding:var(--half-spacing);
	list-style:none;
}


	div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		/* border-radius:1em; */
		margin:0;
		overflow:hidden;
		display:grid;
		grid-template-columns:48px 1fr;
		align-items:center;
		background-color: var(--white);
		grid-template-areas: "image text";
		grid-column-gap:1em;
	}
	
	div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-area:image
	}
	
	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{
		grid-area:text;
		color:var(--black);
		background-color:var(--white);
		font-family: var(--heading-font);
		font-weight: var(--heading-font-weight);
		font-size:1.25rem;
		align-self:center;
	}


	/* Center panel 
	------------------------------------------------------- */


	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	/* left panel
	------------------------------------------------------- */
	#pl {
		width:0;
		transition: var(--transition);
	}


	#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%;
	}


	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	.searchheader {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"items sort-by "
		" filter filter";
	grid-gap: 1em;
	align-items: center;
}
	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}


	/* Footer panel 
		------------------------------------------------------- */
#pf .ext {
	width: var(--site-max-width);
	background-color: var(--footer-panel-color);
	margin: 0 auto;
	/* padding: 4em 0; */
	position: relative;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	align-items: start;
}

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr;
		grid-template-areas: "logo logo "
			" help about"
			"contact contact"
			" accreditations accreditations ";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		padding:4em;
		
	}


	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(2, 1fr);
	}
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}



	/* product layout
	------------------------------------------------------- */
	#pi .main {
		display:grid;
		grid-template-columns:100%;
		grid-template-areas:"top"
							"left"
							"right"
							"bottom";
	}

	/*no longer show gallery thumbs */
	#galleryimages{
		display:none;
	}

		#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}


	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 3;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 1;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 1;
	}
	.slider-reviews{
		--swiffy-slider-item-count: 1;
	}
	.slider-instagram{
	    --swiffy-slider-item-count: 2;
	}
	.slider-searching{
		--swiffy-slider-item-count: 1;
	}
	.slider-reviews .card{
		grid-template-columns:1fr;
		grid-template-areas:"image"
							"review";
		align-items:center;
	}
	.slider-reviews .card .review{
		min-height:220px;
	}

	.slider-reviews .review-image img{
		/*set a max height to avoid it being too humongous on larger displays */
		max-height:430px;
		aspect-ratio: 430/300;
		width: 100%;
		object-fit: cover;
		margin:auto;
	}

	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}

	/* department sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.dept .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}



	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.halfWidth,
	.halfWidth + .form{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl{
		grid-column: 1/-1;
		grid-row:span 2;
	}
	
	.quarterWidth {
		grid-column: auto/span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1;
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	.imageText,
	.textImage,
	.deptFooterImgTx{
		grid-template-columns:1fr ;
	
		width:100%;
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	.imageText .imgcont,
	.deptFooterImgTx .imgcont{
		grid-column:unset;
	}
	.imageText .artp,
	.deptFooterImgTx .artp{
		grid-column:unset;
	}
	
	.textImage .artp{
		grid-column:unset;
		grid-row:unset;
	}
	
	.textImage .imgcont{
		grid-column:unset;
		grid-row:unset;
	}
	
	.imageText h2,
	.textImage h2,
	.deptFooterImgTx h2{
		grid-column:1/-1;
	}





	/* Basket
	------------------------------------------------------- */
	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			
			"lines"
			"prioritydelivery"
			"standarddelivery"
			"totals"
			"suppchg"
			"voucher"
			"buttons"
			"prompane"
			"shipping";



		align-items:start;
		margin-bottom:4rem;
	}

	#pm .bskt .alllines{
	grid-area:lines;
	max-height:100%;
	padding-right:1rem;
	overflow-y:auto;
}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

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

	/* -------------------------------------------------------------------------------------
	=New Checkout Process - replaces Checkout v5 Accordion Option
	------------------------------------------------------------------------------------- */

	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}
	

	/* Signin/guest pane
	------------------------------------------------------- */
	
	.page_checkoutsignin {}
	
	
	.checkoutsignin .signin{
		width:100%;
	}

	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"summary"
							"continue";
	}


	/* Basket Summary
	------------------------------------------------------- */
	.bsktsum h4{
		display:block;
		text-align:center;
		margin:1rem;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 100%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"payment "
			"details"
			"summary"

			"cont";
		grid-column-gap:4rem;
		position:relative;
	}


	.page_payment #pm  form.payoptsform .submitcontainer{
		grid-area:pay;
		position:relative;
		width:100%;
	}

	.page_payment  input[type="submit"]{
		color:var(--text-color);
		display:block;
		margin:1rem 0;
		width:calc(var(--site-max-width) );
	}

	.page_payment #pm .art .promise{
		display:none;
	}
	
}
/* Small devices (portrait tablets and large phones, 600px and up)
	Mobile menu will trigger at this point
*/
@media only screen and (min-width: 600px) and (max-width:768px) {
	:root{
		--site-max-width:100%;

	}


	/* FIXEDTop Panel
	------------------------------------------------------------------------------------- */
	
	#ptf {
		top: 0px;
		width: 100%;
		margin-top: .25em;
		border-top: 2px var(--top-bar-color) solid;
		color: var(--top-bar-color);
		text-align: center;
		font-size: .825rem
	}
	
	#ptf .ext {
		padding: var(--half-spacing);
		display: grid;
		grid-template-areas: 
			"social infolinks"
			"message message";
		grid-row-gap:1em;
		grid-template-columns: 1fr 1fr;
	}

	
	#ptf .ext .art {
		grid-area: social;
		text-align:left;
	}
	
	#ptf .ext .art.fullWidth {
		grid-area: message;
		text-align:center;
	}
	
	#ptf .ext .info {
		grid-area: infolinks;
		text-align:right;
	}
	/* Top panel 
	------------------------------------------------------- */
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:"menulink logo basket "
							"search  search search"
							"nav  nav nav";
	}

	#pt .search{
		grid-area:search;
		z-index:1001;
		margin-bottom:var(--half-spacing)
	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1001;
	}

	.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:0;
	}

	div.menu-grid > div.menu-row ul li{
	padding:var(--half-spacing);
	list-style:none;
}


	div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		/* border-radius:1em; */
		margin:0;
		overflow:hidden;
		display:grid;
		grid-template-columns:48px 1fr;
		align-items:center;
		background-color: var(--white);
		grid-template-areas: "image text";
		grid-column-gap:1em;
	}
	
	div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-area:image
	}
	
	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{
		grid-area:text;
		color:var(--black);
		background-color:var(--white);
		font-family: var(--heading-font);
		font-weight: var(--heading-font-weight);
		font-size:1.25rem;
		align-self:center;
	}

	/*hide phone number and icon from display */
	#pt .info{
		margin:var(--spacing);
	}
	#pt .info ul{
		grid-gap:var(--spacing);
	}
	
	#pt .info li.icon{
		margin:0;
	}
	#pt .info .icon a.lnk,
	#pt .info .icon a.tel{
		grid-area:text;
		display:none;
		font-size:.725rem;
	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1001;
	}

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

	/*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;
	}



	/* Center panel 
	------------------------------------------------------- */


	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	/* left panel
	------------------------------------------------------- */
	#pl {
		width:0;
	}


	#pl .filter{
		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;
	}

	#pl .filter.showfilter{
		display:block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	
	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}

	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}


	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{

		
	}


	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(2, 1fr);
	}
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}



	/* product layout
	------------------------------------------------------- */
	#pi .main {
		display:grid;
		grid-template-columns:100%;
		grid-template-areas:"top"
							"left"
							"right"
							"bottom";
	}

	/*no longer show gallery thumbs */
	#galleryimages{
		display:none;
	}

	#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}



	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 3;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 1;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 1;
	}


	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}

	/* department sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.dept .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}


	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.halfWidth,
	.halfWidth + .form{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl{
		grid-column: 1/-1;
		grid-row:span 2;
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: auto / span 4;
	}
	
	.twoThirdWidth {
		grid-column: auto / span 8;
	}

	.imageText,
	.textImage,
	.deptFooterImgTx{
		grid-template-columns:1fr ;
	
		width:100%;
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	.imageText .imgcont,
	.deptFooterImgTx .imgcont{
		grid-column:unset;
	}
	.imageText .artp,
	.deptFooterImgTx .artp{
		grid-column:unset;
	}
	
	.textImage .artp{
		grid-column:unset;
		grid-row:unset;
	}
	
	.textImage .imgcont{
		grid-column:unset;
		grid-row:unset;
	}
	
	.imageText h2,
	.textImage h2,
	.deptFooterImgTx h2{
		grid-column:1/-1;
	}

		/* Basket
	------------------------------------------------------- */
	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			
			"lines"
			"prioritydelivery"
			"standarddelivery"
			"totals"
			"suppchg"
			"voucher"
			"buttons"
			"prompane"
			"shipping";
		align-items:start;
		margin-bottom:4rem;
	}

		#pm .bskt .alllines{
	grid-area:lines;
	max-height:100%;
	padding-right:1rem;
	overflow-y:auto;
}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

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

	/* -------------------------------------------------------------------------------------
	=New Checkout Process - replaces Checkout v5 Accordion Option
	------------------------------------------------------------------------------------- */

	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}
	

	/* Signin/guest pane
	------------------------------------------------------- */
	
	.page_checkoutsignin {}
	
	
	.checkoutsignin .signin{
		width:75%;
	}

		/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"summary"
							"continue";
	}


	/* Basket Summary
	------------------------------------------------------- */
	.bsktsum h4{
		display:block;
		text-align:center;
		margin:1rem;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 100%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"payment "
			"details"
			"summary"
			"cont";
		grid-column-gap:4rem;
		position:relative;
	}


	.page_payment #pm  form.payoptsform .submitcontainer{
		grid-area:pay;
		position:relative;
		width:100%;
	}

	.page_payment  input[type="submit"]{
		color:var(--text-color);
		display:block;
		margin:1rem 0;
		width:calc(var(--site-max-width) );
	}

		.page_payment #pm .art .promise{
		display:none;
	}

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px)  {
	:root{
		--site-max-width:100%;

	}

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

	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	#pl{
		margin-left:1rem;
	}
	.pmwide{
		margin-right:1rem;
	}

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


	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}


	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
	}



	/* product page 
	------------------------------------------------------- */
	#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}

	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 5;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 2;
	}

	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 3;
	}

	/* department sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.dept .swiffy-slider{
		--swiffy-slider-item-count: 3;
	}

	/* Basket
	------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 5fr 5fr;
		margin:0 1rem;
	}
	
	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}
	
	#pm .bskt  .line .qty label{
		display:none;
	}

	/* -------------------------------------------------------------------------------------
	=New Checkout Process - replaces Checkout v5 Accordion Option
	------------------------------------------------------------------------------------- */

	#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;
	}

	/* 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);
	}

}
/* Large devices (laptops/desktops, 992px and up) */
/* start to introduce padding on main content at this point */
@media only screen and (min-width: 992px) and (max-width:1199px) {
	/* defaults */
	:root{
		--site-max-width:100%;
	}

	/*change to banner content area sizing */
	.mainBanner .toi{
		/*max width of half of fake max width */
		max-width:calc(var(--site-max-width) / 2);
	}

	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	#pl{
		margin-left:1rem;
	}
	.pmwide{
		margin-right:1rem;
	}

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

	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 7;
	}


	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 4;
	}

	/* Basket
	------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 5fr 5fr;
		margin:0 1rem;
	}
	
	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}
	
	#pm .bskt  .line .qty label{
		display:none;
	}

	/* -------------------------------------------------------------------------------------
	=New Checkout Process - replaces Checkout v5 Accordion Option
	------------------------------------------------------------------------------------- */

	#pt.checkouttop .ext {
		padding:0 1rem;
	}

	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
	}

		/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (max-width:1399px) {
	:root{
		--site-max-width:1200px;
	 }
}
/* Extra extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {

	/* defaults */
	:root{
		--site-max-width:1362px;
		--menu-max-width:1362px;
	}
}
.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(--pink);
	--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(--pink);
}

.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: .5rem;
	height: .5rem;
	border: .4rem solid transparent;
	border-radius: 50%

	
}

.slider-nav {
	position: absolute;
	top: 0;
	left: .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))
}

.slider-nav::before {
	position: absolute;
	content: "";
	padding: .5rem;
	width: 3rem;
	height: 3rem;
	pointer-events:all;
}

.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
	}
}