/*! jQuery UI - v1.12.1 - 2016-09-14 - etail path updated
* http://jqueryui.com
* 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;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

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


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


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

	/* 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 {
}
.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 {
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.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%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
}
.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: default;
}
.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 {
}
.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: inherit;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: inherit;
	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;
	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;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	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 */
.ui-icon-blank { background-position: 16px 16px; }
.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: #000;
	opacity: .5;
	filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}
/**
 * Owl Carousel v2.2.1 
 * THIS IS A BASE FILE - overrides should be in sitepanes.css in the relevant place!
 * 
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }
/* ------------------------------------------------------------------------------------
		SCREEN - Beamfeature 2021
		Filename : sitepanes.css
		Last Updated : 17. 02. 2021
		Copyright : (c) 2021 Etail Systems Ltd
		Author : Etail Systems Ltd
		Web : http://www.etailsystems.com

	Table of Contents
	01. =Reset
	02. =Page
	03. =Typography
			Defaults
			Headings
			Links
			Specific headings
			Blockquote
			Base Article Typography
	04. =Buttons
	05. =Tables
			Defaults
			Order
			Quotations
	06. =Forms
			Defaults
			Sign in
			Register
			Forgotten Password
			Checkout (New Customer)
			Checkout (Sign In)
	07. =DepartmentTree / Menu
			top level
			second level
			third level
			forth level
	08. =Breadcrumb
	09. =Jquery Base Overrides
	10. =OwlCarousel Overrides
	11. =AccordionBase
			Header including hide/show icons 
			Panes
	12. =Autocomplete 
	13. =Email when back in stock EWIS
	14. =HoverBasket
	15. =PopupDialog / Popup Add to Basket / Direct Despatch
	16. =Messages
	17. =FIXEDTopPanel
	17. =PanelTop
	18. =CenterPanel
	19. =MainPanel
			Articles
			Banners
	20. =FooterPanel
	21. =BottomPanel
	xx. =FIXEDBottomPanel
	22. =Copyright and Managed By
	23. =FilterSearch
	24. =SearchHeader / SearchFooter 
	25. =FeaturedProducts
			Base Settings
			Image
			Title
			Pricing Structure
			Unit Specifics
			Client ref/Model
			Buy Form
			Media Queries
	26. =ProductLists
	27. =MyAccount
	28. =Blog
	29. =CustomArticles
	30. =CustomBanners
	31. =SpecificPages
	31. =DepartmentPages
			Subdepartment Tree
			Media Queries
	32. =ProductPage
			Title
			Image (carousel)
			Brand and Manufacturer
			barcodes
			Buy Panel
			Pricing info
			Description
			Accordion Description
			Stock
			Leadtime
			Direct Despatch/Dropship
			Links - Ask a question etc
			Video Links (youtube)
			Buytogether
			Personalisation
	33. =Super Attributes
			Defaults
			attributeTypePrice_Matrix_Calculator 
			attributeTypeDimensions
			attributeTypeRadio_button
			attributeTypeText_Box_Free_Text_Entry
			attributeTypeDrop_down_list
			attributeTypeSingle_Image_Upload
	34. =Basket
			Basket header
			Basket Lines
			Basket Line items
			Basket Subtotal
			Delivery info
			Shipping
			Basket Totals
			Basket Payment Buttons
			Media Queries
	35. =Checkout Process
	36. =OrderConfirmation
	36. =Hacks
		
=Definitions
------------------------------------------------------------------------------------- */
:root {
	--mainColor:#231f20;
	--footerColor:#231f20;
	--altColor:#b3d0e6;
	--altColor2:#b3d0e6;
	--altColor3:#b3d0e6;

	--textColor:#231f20;
	--textColorLight:#ffffff;

	--textHeadingColor:#231f20;
	--textHeadingAltColor:#8a8888;
	--textSubHeadingColor:#8a8888;
	--textSubHeadingAltColor:#231f20;

	--bgColor:#ffffff;
	--bgaltColor:#8a8888;
	--bgaltColor2:#231f20;
	--bgaltColor3:#d8d5d5;

	--checkoutButtons:#8EC760;

	--white:#ffffff;

    --mainFont:	verdana, sans-serif;
    --altFont: verdana, sans-serif;
	--altFont2: verdana, sans-serif;

	--headingFont: verdana, sans-serif;
	--buttonFont: verdana, sans-serif;

	--borderColour: #8a8888;
}

	
/* =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;
	/* Looks pretty much the same than Windows */
}

iframe {
	/*don't do this here!*/
	/* width:100% !important; */
}


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

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

body {
	background-color:var(--bgColor);
	font-family: var(--mainFont);
	font-size:16px;
}

ol {
	margin-left:.5em;
}

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


/* Defaults
------------------------------------------------------- */
/* this choice of font-family is supposed to render text the same across platforms */
body, input, button, textarea, select {
	font-family: var(--mainFont);
	-webkit-font-smoothing: antialiased;
	/* Looks pretty much the same than Windows */
}

p, li, label, input, select, textarea {}

select, textarea {
	padding:.5em;
}

input.inputtext,
input.inputtext_light /*used for the newsletter signup */{
	font-family: var(--mainFont);
	font-size: 1em;
	padding: 0.5em .25em;
	border:1px solid var(--borderColour);
	max-width: calc(100% - 1px - .5em);
}

p, ol, ul, dl, address {
	font-family:var(--mainFont);
	font-weight: 400;
}

b, strong {
	font-weight:600;
	font-size:inherit;
}

ol, ul {
	list-style:none;
}

li ul,
li ol {
	font-size:1em;
}

ul.inline li {
	display:inline-block;
}

abbr {
	opacity:0.9;
}

abbr[title]:hover, dfn[title] {
	border-bottom: 1px dotted #656565;
	cursor:help;
}

ins, mark {
	padding:0 0.125em;
	text-decoration:none;
}

sub, sup {
	position:relative;
	font-size:smaller;
	line-height:0;
}

em, em a, i, samp {
	font-style: italic;
}

ins, mark {
	padding: 0 0.125em;
	text-decoration: none;
}

sub, sup {
	position: relative;
	font-size: smaller;
	line-height: 0;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

del, s {
	text-decoration: line-through;
}

img {
	max-width: 100%;
	height: auto;
}

/* correct orientation of phone icon if font awesome used */
.fa-phone {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

/* Headings
------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
	font-family: var(--altFont);

	text-rendering: optimizelegibility;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1.2em;
}

h4 {
	font-size: 1.4em;
}

h5 {
	font-size: 1.2em;
}

h6 {}

/* Specific headings
------------------------------------------------------- */

/* Links
------------------------------------------------------- */
a{
	text-decoration: none;
	color:inherit; /*makes the link the same colour as whatever the thing is that its in h3 h4 p etc*/
}

a:hover{
	text-decoration: none;
}
a.lnk:hover {
	text-decoration:underline;
}

a:active,
a:visited{
	text-decoration: none;
}

/* Blockquote
------------------------------------------------------ */
blockquote {
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid #f8f8f8;
	margin: 0 0 1.5em 0;
	padding: 2em;
}

blockquote p {
	font-size: 1.6em;
	font-style: italic;
	margin-bottom: 1em;
}

blockquote footer, blockquote cite {
	font-size: 1.4em;
	line-height: 1.5;
}

q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

cite {
	font-style: normal;
}

/* Base Article Typography
------------------------------------------------------- */

/*Unified heading colors*/
#pm .art h2,
#pm .art h3,
#pm .art h4,
#pm .art h5 {
	margin-bottom:.5em;
}

/*to ensure a clear break after a paragraph*/
#pm .artp p {
	margin-bottom:1em;
}

#pm .art h3,
#pf .art h3 {}

#pm .art h2,
#pf .art h2 {
	font-weight:600;
	/* margin-bottom:1em; */
}

#pm .artp ul {
	list-style-type:disc;
	margin:1em 1.5em;
}

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

#pm .artp ol {
	list-style-type:decimal;
	margin:1em 1.5em;
}

#pm .artp img {}
#pm .artp a {
	text-decoration:underline;
	font-weight:bold;
}

#pm .artp a {}

/* -------------------------------------------------------------------------------------
=Buttons 
------------------------------------------------------------------------------------- */
.submit,
a.btn,
.hoverbsktadd a[title="Checkout"] {
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:1em;
	padding: 0.5em 1em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--altColor);
	border:1px var(--altColor) solid;
	color:white;
	text-transform:capitalize;
	/* border-radius: 3px; */
}

/* iphone specific overrides */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
	-webkit-appearance: none;
	/* border-radius: 0; */
	font-size: 1em;
}

td a.btn{
	display:block;
}

a.btn:hover {
	text-decoration: none;
}

.submit:hover,
a.btn:hover {}


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

/* Defaults 
------------------------------------------------------- */
table {
	border:1px #e8e8e8 solid;
	/*stops that stupid break between cells */
	border-collapse:collapse;
	min-width: 100%;
	font-size: 1em;
}

thead,
tbody {
 display: contents;
}

/*set table headers */
table th {
	font-family: var(--mainFont);
	color:var(--bgaltColor);
	font-weight:600;
	text-align:left;
	padding:.5em;
	width:auto;
}

/* for when no header has been used in the code !*/
table tbody tr:first-child td{
	font-family: var(--mainFont);
	color: #000;
	text-align:left;
	padding:.5em;
}

table tr td {
	padding:.5em;
	vertical-align:middle;
	font-size:1em;
}

th,
td {
 padding: .5em;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-align:left;
}

tr:nth-child(even) td {
 background: #f8f8f8;
}

/*ensures font size for a p in a table is the same as it is for text that is NOT in a p block */
table tr td p,
table tr td li {
	font-size:1em;
}

#pm .artp table td p {
	font-size:1em;
}

table th:first-child {}

table tr:nth-child(odd) {
	background-color:#e8e8e8;
}

/* Order
------------------------------------------------------- */
table.order {
	width:100%;
	margin-bottom:1em;
}

.ordinfo a.btn.print {
	background-color:#e8e8e8;
	border-color:#e8e8e8;
	margin-left:1em;
}

/* Quotations
------------------------------------------------------- */
table.quotationlist,
table.quotationlines,
table.quotation {
	border-collapse:collapse;
	width:100%;
	max-width:100%;
}

table.quotationlist th.quoteNo,
table.quotationlist th.ref,
table.quotationlist th.value,
table.quotationlist th.expires,
table.quotationlist th.viewQuote,
table.quotationlist th.addQuote {
	width:auto;
}

table.quotationlist	a.btn[title="Download Quote"] {
	font-family: var(--mainFont);
	font-size:1em;
	padding:0;
	text-align:center;
	cursor:pointer;
	background-color:transparent; 
	border:none;
	outline:none;
	color:var(--bgaltColor);
	display:inline-block;
}

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	padding:1em;
}

.form .bt {}

.form .bt h3 {}

.form h5 {}

.form li select,
.form li textarea,
.form li input {
	grid-column:2;
	width:100%;
}

.form li {
	/* try grid layout */
	display:grid;
	grid-template-columns:minmax(auto, 1fr) 3fr 1em;
	grid-gap:.25em;
}

.form label {
	grid-column:1;
	display:inline-block;
	vertical-align:top;
	text-align:right;
}

.form label img {
	display:inline-block;
}

.form li.help,
.form li.info {
	display:inline-block;
	width:100%;
}

.form form {}
.form li {
	margin-bottom:.5em;
}

.form ul.radio {}
.form ul.radio li {}

.form form .submit {}

/* captcha */
.form .g-recaptcha{
	grid-column:2;
	text-align:center;
}

/* fix for checklists*/
.form ul.check {
	max-width: 100%;
	columns:3;
	 -webkit-columns: 3;
	-moz-columns:3;
}

/* Sign In
------------------------------------------------------- */
.form#psign{
	
}

/* as labels aren't being used - placeholders are */
.form#psign select,
.form#psign textarea,
.form#psign input {
	grid-column:1/3;
	text-align: left;
	width:100%;
}

.form#psign .exstreqsubmit input.submit{
	grid-column:1;
	justify-self:start;
	width:auto;
	margin-left:0;
}

.form#psign .exstfgtpwd {
	display:inline-block;
	font-weight:400;
}

.form#psign .exstreglnk{
	display:inline-block;
}

.form#psign .exstreglnk h5{
	font-weight:400;
	color:#1d1d1d;
}

.form#psign .exstreglnk h5 a{
	text-decoration:underline;
	text-decoration-color: var(--mainColor);
}

/* Register
------------------------------------------------------- */
.form#preg{
	width: 50%;
	margin:auto;
}

/* as labels aren't being used - placeholders are */
.form#preg select,
.form#preg textarea,
.form#preg input {
	grid-column: 1/3;
	justify-self:stretch;
	/* would rather not have to do this, but we display the width on the input element and that borks things */
	width:100%;
}

.form#preg li.chkbox.subscribe{
	display:block;
}

.form#preg li.chkbox.subscribe input{
	width:auto;
	margin:.5em;
}

.form#preg input.submit{
	grid-column:1;
	justify-self:start;
	margin-left:0;
}

.form#preg label{
	text-align:left;
}

.form h5 {
	grid-column:1/3;
	margin:1em 0;
}

/* Forgotten Password
------------------------------------------------------- */
.form#pwrem{}

/* Checkout (New Customer)
------------------------------------------------------- */
.form#pchkoutnewcust,
.form#pguest{}



.form#pguest select,
.form#pguest textarea,
.form#pguest input {
	grid-column:1/3;
	text-align: left;
	width:100%;
}

.form#pguest input.submit#submit{
	grid-column:1;
	justify-self:start;
	width:auto;
	margin-left:0;
}

.form li.chkbox {
	display:inline-block;
}

.form li.chkbox #subscribe{
	width:auto;
}

/* Checkout (Sign In)
------------------------------------------------------- */
.checkoutsignin #pm .form#psign,
.checkoutsignin #pm .form#pchkoutnewcust,
.checkoutsignin #pm .form#pguest {
}

/*existing customer pane */
.checkoutsignin #pm .form#psign ul.exstcust {}
.checkoutsignin #pm .form#psign ul.exstcust label {}
.checkoutsignin #pm .form#psign .exstnotme a {
}

/* -------------------------------------------------------------------------------------
=DepartmentTree / Menu
------------------------------------------------------------------------------------- */
#pt .dept{
	grid-column:1/6;
	position: relative;
	margin-top:1em;
	background-color:var(--bgaltColor);
}

#pt .dept .bt,
#pt .dept .bb,
#pt .dept .bc{}

#pt .dept ul{
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
	position: relative;
	z-index: 1001;
	display:block;
	text-align:center;	font-size:.875em;
	text-transform:uppercase;
}


#jnav li.pipe{}

/***********************************************************************/
/* Tabs																*/
/***********************************************************************/

#jnav li.nav,
#jnav li.navcurr{
	/*use same font as headings*/
	font-family:var(--altFont);
	color:var(--textColorLight);
	display:inline-block;
}

#jnav li.nav:hover{
	background-color:var(--bgaltColor3);
	color:var(--mainColor);
}

#jnav li.nav a,
#jnav li.nav h3,
#jnav li.navcurr a,
#jnav li.navcurr h3{
	display:inline-block;
	/* width: calc(100% - 4em); */
	padding: 0.5em 0.5em;
}

#jnav li.nav a:hover,
#jnav li.nav h3:hover,
#jnav li.navcurr h3:hover
#jnav li.navcurr a:hover{
	background-color:var(--bgaltColor3);
}

#jnav li.navcurr a,
#jnav li.navcurr h3,
#jnav li.nav h3{}

#jnav .navleft,
#jnav .navright,
#jnav .navleftcurr,
#jnav .navrightcurr{}

/***********************************************************************/
/* Drop down														 */
/***********************************************************************/
#jnav li.nav ul.snav,
#jnav li.navcurr ul.snav{
	position: absolute;
	text-align:left;
	display:none;
	/* width: calc(340px - 1em); */
	min-width: 200px;
	padding: 0;
	background-color: var(--bgaltColor3);
	-webkit-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
	-moz-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75);
	box-shadow: 2px 2px 2px 0px rgba(96,94,93,0.75);
}

#jnav li.nav ul.snav li:hover,
#jnav li.navcurr ul.snav li:hover{}

#jnav li.nav ul.snav li,
#jnav li.navcurr ul.snav li{
	display:block;
	/* outline:1px red solid; */
	vertical-align:top;
	margin:.5em;
	padding:.5em 0;
}

#jnav li.nav ul.snav li a,
#jnav li.navcurr ul.snav li a{}

#jnav li.nav ul.snav li a:hover,
#jnav li.navcurr ul.snav li a:hover{}

/* Banners */
#jnav li.nav ul.snav li.bnrs,
#jnav li.navcurr ul.snav li.bnrs{}

#jnav li.nav ul.snav li.bnrs .bnr,
#jnav li.navcurr ul.snav li.bnrs .bnr{}

#jnav li.nav ul.snav li.bnrs .bnr a,
#jnav li.navcurr ul.snav li.bnrs .bnr a{}

/* Level 1 dept header */
#jnav li.nav ul.snav li a.deptIcon,
#jnav li.navcurr ul.snav li a.deptIcon{
    padding:0;
    width:auto;
}

#jnav li.nav ul.snav li a.deptIcon img,
#jnav li.navcurr ul.snav li a.deptIcon img{
	max-width: 70px;
}

#jnav li.nav ul.snav li a,
#jnav li.navcurr ul.snav li a{
	font-family:var(--altFont);
display:inline-block;
	vertical-align:middle;
}

#jnav li.nav ul.snav li a,
#jnav li.navcurr ul.snav li a{
	text-transform:capitalize;
	padding:0 .5em;
	/* width:auto; */
}

#jnav li.nav ul.snav li a.:hover,
#jnav li.navcurr ul.snav li a.:hover{
	color:var(--altColor)
}

/* Level 2 depts */
#jnav li.nav ul.snav li a.l2,
#jnav li.navcurr ul.snav li a.l2,
#jnav li.nav ul.snav li a.seeall,
#jnav li.navcurr ul.snav li a.seeall{}
#jnav li.nav ul.snav li.depts a:hover,
#jnav li.navcurr ul.snav li.depts a:hover{}
#jnav li.nav ul.snav li.arts{}




/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.bdcb{}

.crumb {
	display:block;
	padding:.5em 0;
	/* text-align: center; */
}

.crumb li{
	font-size: 0.875em;
	display:inline-block;
	vertical-align:middle;
}

.home .crumb {
	/*
		as a rule we don't want to show the breadcrumb on the home page, but it is written out anyway
		needs fixing by a dev
	*/
	display:none;
}

/*for the break between the crumb*/
.crumb li:after {
	content:">";
	display:inline-block;
	vertical-align:middle;
	margin:0 .5em;
	font-weight:400;
}

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

.crumb a,
.crumb h1,
.crumb h3 {
	display:inline-block;
	vertical-align:middle;
	/* unify font */
	font-family:var(--mainFont);
	font-size:1em;
	margin:0;
}

.crumb h1 span{
	font-family:var(--mainFont)
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.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(--borderColour);
	background: var(--mainColor);
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--mainColor)
	background-color: #ffffff;
}

/* -------------------------------------------------------------------------------------
=OwlCarousel Overrides
------------------------------------------------------------------------------------- */
/* base settings */
.carousel {
	position:relative;
	margin-bottom:1em;
}

.owl-stage-outer{}

/* this should be the title for the carousel */
.carousel h2{} 
.carousel:hover {
	cursor:-moz-grab;
	cursor:-webkit-grab;
	cursor:grab;
}

.noNav .owl-controls{
	display:none;
}
.owl-controls {}

.owl-carousel .owl-item img {}

.owl-theme .owl-controls {
	/*going with a hardline of this is at the bottom of the carousel (not over anything) and centered */
	text-align:center;
	/* margin-top: 0.5em; */
	font-size:.875em;
}

.owl-theme .owl-nav {
	/*going with a hardline of not showing the arrows/nav */
	display:none;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {}
.owl-prev {}
.owl-next {}

.owl-theme .owl-nav .disabled {}
.owl-theme .owl-dots {}
.owl-theme .owl-dots .owl-dot {
	display:inline-block;
	vertical-align:top;
}
.owl-theme .owl-dots .owl-dot span {
	display:inline-block;
	vertical-align:top;
	width: 0.5em;
	height: 0.5em;
	margin: 0.25em;
	border-radius:50%;
	border:2px solid;
	border-color:var(--borderColour);
	background-color:var(--borderColour);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	border-color: var(--altColor2);
	background-color:var(--altColor2)
}

.owl-theme .owl-item img {}


/* image overlay (because we don't have a better way yet!) */
.carousel .imgcont {
    position: relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    align-items:center; 
}

/*first statement is to cover lack of css class being applied */
.carousel .imgcont img,
.carousel img.slideCont{
	grid-row:1;
	grid-column:1;
	padding:0;
}

/*first statement is to cover lack of css class being applied */
.carousel .imgcont div,
.carousel .slideCont {
	grid-row:1;
	grid-column:1;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	background-color:var(--bgaltColorAlpha);
	background-clip: content-box;
	color:var(--white);
	border: 2px var(--bgaltColor) solid;
	padding: 2px;
	margin:auto;
	min-width:25%;
}

.carousel .imgcont div h2,
.carousel .slideCont h2,
.carousel .imgcont div p,
.carousel .slideCont p{
	width:auto;
	margin:.5em;
}

.carousel .imgcont h2{

}

.carousel .imgcont p{
	margin:.5em;
}


/* Product Carousels
-------------------------------------------------------*/
/* the layout is different so need to undo some of the default settings and re-order */
/* even MORE irritating is the fact that this is done differently for carousels on the product page! */
.carousel .fprd{
	display:grid;
	grid-template-columns: 1fr;
	position:relative;
	background-color:#ffffff;
}
.home .carousel .fprd{
	display:block;
}

/* mini hack for the fact that we aren't consistent in how we write out product info !*/
.home .carousel .fprd .bt,
.home .carousel .fprd .bb{}

.carousel .fprd h3{
	/*some out of stock products have this untargetable h3 tag to shout "out of stock" */
	display:none;
}

.carousel .fprd form label{
	/*lack of space for "quantity" labelon carousels*/
	display:none;
}

/* flags */
#pm .carousel .piflags,
#pm .carousel .flag {
	grid-row:1;
	grid-column:1/4;
	text-align:left;
	vertical-align:top;
	align-items:start;
	align-self:start;
	padding:.5em;
	box-shadow: none;
	border: none;
}

#pm .carousel .piflags img,
#pm .carousel .flag img{
	width:auto;
	height:auto;
}

/* -------------------------------------------------------------------------------------
=AccordionBase 
------------------------------------------------------------------------------------- */
ul.accordion {}

#pm li.address,
#pm li.inst {}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	font-family: var(--altFont2);
	background-color:var(--bgaltColor2);
	font-size: 1em;
	margin:0;
	position:relative;
	cursor:pointer;
	padding:.5em;
}

.accordion .header img {
	position:absolute;
	right: 1em;
	top:.75em;
	width:1em;
	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 {
	/* font-size:.825em; */
}

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

/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */
.ui-helper-hidden-accessible {
	display:none;
}

.ui-widget.ui-widget-content.ui-autocomplete {
	width:355px !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(--borderColour);
	z-index:2000;
	background:var(--bgColor);
}

.ui-autocomplete li.ui-menu-item {
	width:100%;
	display:inline-block;
	cursor:pointer;
	margin:0;
}

.ui-menu-item a {
	display:inline-block;
	width:98%;
	padding:0 1%;
}

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

.foundProduct {
	display:inline-block;
	vertical-align:top;
	width:20%;
}

.foundProduct img {
	width:100%;
	max-width:80px;
	height:auto;
}

.foundProductTitle {
	display:inline-block;
	width:78%;
	/* font-size:.750em; */
	margin:1%;
	font-family:var(--altFont);
	font-weight:600;
}

.foundProductRef {
	display:none;
}

.foundProductDesc {
	display:none;
}

.foundProductDesc {}

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

#ewis label {
	color:#61666b
}

.fprd .ewis {
	grid-column:1/-1;
	text-align:center;
	font-size:.825em;
}

a.lnk.ewisopen,
a.lnk.ewis {
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:1em;
	padding: 0.5em 1em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--altColor);
	border:1px var(--altColor) solid;
	color:white;
	text-transform:capitalize;
	border-radius: 3px;
}

.lnk.ewisopen:hover {
	text-decoration:none;
}

/* -------------------------------------------------------------------------------------
=HoverBsket 
------------------------------------------------------------------------------------- */
.hoverbskt {
	background-color: #ffffff;
	border:1px solid var(--borderColour);
	box-shadow:5px 5px 5px var(--bgaltColor3);
	width: 250px;
	padding:.5em;
	padding-bottom:0;
	z-index: 11103;
	text-align:center;
}

.hoverbskt h3 {
	/*pointless title - hide it */
	display:none;
}

.hoverbskt .lines .item:last-child {}
.hoverbskt .formupdate {}
.hoverbskt .formupdate input {}
.hoverbskt .formupdate input.submitQtyChange {}

.hoverbskt a,
.hoverbsktadd a,
.hoverbskt p,
.hoverbsktadd p {}


.hoverbskt .lines {}
.hoverbskt .lines .item {
	display:grid;
	grid-template-columns: 58px 1fr;
	align-items:center;
	text-align:left;
	grid-gap:.25em;
}

.hoverbskt .lines .item a.title,
.hoverbskt .lines .item p.sample {
	    font-family:var(--altFont);
	    font-weight:600;
	    font-size:.875em;
}
.hoverbskt .lines .item img {}

.hoverbskt .lines .item p.descr {}
.hoverbskt .lines .item p.qty {
/* executive decision to not show this */
    display:none;
}

.hoverbskt .lines .item p.price {
	/* executive decision to not show this */
    display:none;
}

.hoverbskt h4.count {
	text-align:center;
	font-size: 0.825em;
	padding:.5em;
	border-top: 1px var(--borderColour) solid;
}

.hoverbskt h4.total {
	text-align:center;
	font-size: 0.825em;
	padding:.5em;
	border-bottom: 1px var(--borderColour) solid;
}

.hoverbskt a.btn {
	text-align:center;
	margin: 0.5em;
}

/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd,
#popupdialog {
	position:fixed;
	top:25%;
	left:35%;
	width:calc(30% - 1em);
	padding:.5em;
	z-index:2000;
	border:2px var(--borderColour) solid;
	background-color:var(--bgColor);
	display:none;
	text-align:center;
}

.hoverbsktadd .item,
#popupdialog .item {
	display: grid;
	grid-template-columns:100px auto auto;
	grid-gap:.25em;
	align-items:center;
	margin-bottom:1em;
}

.hoverbsktadd .item img,
#popupdialog .item img{
	margin:auto;
}

.hoverbsktadd h3,
#popupdialog h3 {}

.hoverbsktadd a,
#popupdialog a {}

.hoverbsktadd .item a.title,
#popupdialog .item .title {}

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

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


.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}

/* media queries for viewports start BIG and go small
 outside of this it used the default
--------------------------------------- */
/* under 400px wide, go wider */
@media screen and (max-width:400px ){
	.hoverbsktadd,
	#popupdialog {
		left:2.5%;
		width:calc(95% - 1em);
	}
}

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

#mess{
	background-color:#ffffff;
	/* padding:1em; */
	margin:1em 0;
	text-align:center;
}

.warn{
	color:red;
}

/* OOS and DDS popup 20/11/14 */
.outofstockdialog,
.directdespatchdialog {}
.outofstockdialog .outofstockpopup,
.directdespatchdialog .directdespatchpopup {}
.outofstockdialog span,
.directdespatchdialog span {}
.outofstockdialog .outofstockpopup .oosheader,
.directdespatchdialog .ddheader {}
.outofstockdialog .outofstockpopup .oosmessage,
.directdespatchdialog .ddmessage {}
.outofstockdialog .outofstockpopup .oosmessage .oosdate,
.directdespatchdialog .dddate {}
.ui-dialog-titlebar {}
.outofstockdialog .ui-widget-content {}
.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.directdespatchdialog .ui-widget-content .ui-dialog-buttonset button {}


/* Out of Stock, Direct Despatch
------------------------------------------------------- */
.ui-dialog.outofstockdialog,
.ui-dialog.directdespatchdialog {}	
.ui-dialog.outofstockdialog .outofstockpopup,
.ui-dialog.directdespatchdialog .directdespatchpopup-pane {}
.ui-dialog.outofstockdialog .outofstockpopup .oosheader,
.ui-dialog.directdespatchdialog .ui-widget-header {}
.ui-dialog.directdespatchdialog .ui-widget-header {}
.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {}
.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}
.ui-dialog.outofstockdialog .ui-dialog-titlebar {}
.ui-dialog.outofstockdialog .ui-widget-content,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane {}
.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {}
.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {}
.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}
#directdespatchpopup-pane span.ddproduct {}
.ddmessage {}
.ddmessage span.dddatemessage {}
.ddmessage span.dddate {}

/* -------------------------------------------------------------------------------------
=SiteContainer
------------------------------------------------------------------------------------- */
#site {
	width:100%;
	/* max-width: 1200px; */
	margin:auto;
	font-size:16px;
	font-weight:normal;
	text-align:left;
	-webkit-text-size-adjust:100%;
}


/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */
#ptf{
	top:0px;
	z-index:2002;
	width: 100%;
	min-width: 1200px;
	background-color:var(--bgaltColor);
	color:var(--textColorLight);
	font-size:.875em;
}

#ptf .ext {
	width: 1200px;
	margin: 0 auto;
	position: relative;
	text-align:right;

	display:grid;
	grid-template-columns:1fr 1fr 1fr;
}

/*because we are floating elements */
#ptf:after{
  content: "";
  clear: both;
  display: table;
}


/* vat switch
------------------------------------------------------- */
#ptf .vatsw{
	float:left;
	text-transform:uppercase;
}

.vatsw div{
	display:inline-block;
	vertical-align:middle;
	font-size:inherit;
}

.vatsw form#vatswitch{
	position: relative;
	margin: 0 auto;
}

.vatsw form input label{
	text-shadow: 0 1px rgba(255, 255, 255, 0.25);
}

.vatsw form input {
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
    width: 1em;
    height: 1em;
	margin:.5em 0;
    background-color: #999999;
    -webkit-appearance: none;
    cursor:pointer;
}

.vatsw form input[checked="checked"] {
    background-color:var(--mainColor);
    background-repeat: no-repeat;
    cursor:initial;
}

#vatswitch div:nth-child(1) label {
	float: left;
	margin: .5em;
	border-radius: .25em 0 0 .25em;
}

#vat_yes {
   	display:inline-block;
    vertical-align:middle;
    border-radius: .25em 0 0 .25em;
    border-top: 1px solid #bfbfbf;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #cecece;
}

#vat_no {
	display:inline-block;
	vertical-align:middle;
    border-radius: 0 .25em .25em 0;
    border-top: 1px solid #bfbfbf;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #fff;
}

#vatswitch div:nth-child(2) label {
    float: right;
    margin:.5em;
    margin-left: .5em;
}



/* top links
------------------------------------------------------- */
#ptf .info{
    float:right;
}

#ptf .info li{
	display:inline-block;
	/* font-family:var(--altFont2); */
}

#ptf .info li a{
	display:inline-block;
	padding: 0.5em .5em;
}

#ptf .info li a:hover{
	color:var(--textColorLight)
}

/* Top content/contact 
------------------------------------------------------- */
#ptf .art#a111509504{
	text-align:left;
}
#ptf .art#a111509505{
	text-align:center;
}

#ptf .artp,
#ptf .imgcont{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--altFont2);
	padding: 0.5em .25em;
}




/* VAT Switch
------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=PanelTop 
------------------------------------------------------------------------------------- */
#pt {
	margin: 0 auto;
	padding: 0;
	padding-top:1em;
	width: 100%;
	min-width: 1200px;
	position:relative;
	background-color:white;
	background: linear-gradient(to top, #898888 32px, #fff 32px, #fff 100%);
}

#pt .ext {
	margin: 0em auto;
	position: relative;
	width: calc(1200px - 0em);
	display:grid;
	grid-template-columns: 250px 2fr 258px 250px;
	grid-gap: 0.5em;
	text-align:right;
	align-items:center;
}

#pt ul {
	/* typically we dont want bullet styles*/
	list-style: none;
	list-style-position: inside;
	display: inline;
}

/* First info block
------------------------------------------------------- */

/* Site Logo
------------------------------------------------------- */
#pt .pbnr{
	grid-column: 1;
	text-align:left;
}

#pt .pbnr .bnr{}

#pt .pbnr img{
	height:auto;
}

/* Second info block (register/sign in)
------------------------------------------------------- */

#pt .info li.pipe{
	/*why do this anyway!*/
	display:none;
}

/* Search
------------------------------------------------------- */
#pt .search {
	grid-column: 2;
	grid-row:1;
	align-self:center;
	align-items:center;
	text-align: center;
	margin:auto;
	font-size:0.813em;
} 

#pt .search form{
	text-align: center;
}
	
#pt .search label {
	display: none;
}

#pt #searchbox {
	background-color:#ffffff;
	border: 2px solid var(--borderColour);
	border-right:none;
	display:inline-block;
	vertical-align:middle;
	color:var(--textColor);
	/* make sure the auto complete width matches this width */
	width: 330px;
}

/*sort the placeholder color*/
#pt #searchbox::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color:var(--bgColor);
}
#pt #searchbox:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	opacity: 1;
	color:var(--bgColor);
}
#pt #searchbox::-moz-placeholder { /* Mozilla Firefox 19+ */
	opacity: 1;
	color:var(--bgColor);
}
#pt #searchbox:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:var(--bgColor);
}
#pt #searchbox::-ms-input-placeholder { /* Microsoft Edge */
	color:var(--bgColor);
}

#pt #searchbox:focus{}

#pt .search input#search {
	display:inline-block;
	vertical-align:middle;
	outline: 0;
	border:0;
	padding:0.5em;
	border-radius:0;
	border: 2px solid var(--altColor);
}

#pt .search input[type="submit"] {}


/* Quick Order
------------------------------------------------------- */
#pt #qord{}

#pt #qord #qoresponse{
	font-size:0.813em;
}

#pt #qord label{
	display:inline-block;
	text-transform:uppercase;
	font-size:0.813em;
	margin:0 .5em;
}

#pt #qord input#qoref{	display:inline-block;
	font-size:0.813em;
	border: 2px solid var(--borderColour);
	width:79px;
	text-transform:uppercase;
	color:#807F83;
	padding:.5em;
}

#pt #qord input#qoref.inputtext{}
#pt #qord input#qoqty{
	display:inline-block;
	border: 2px solid var(--borderColour);
	vertical-align:middle;
	text-align:center;
	padding:.5em;
	font-size:0.813em;
}

#pt #qord .submit{	display:inline-block;
	font-size:0.813em;
	margin-left:.5em;
	padding:.5em;
	border: 2px solid var(--altColor);
}

/* Basket
------------------------------------------------------- */
#pt .bskt {
	grid-column: 4;
	grid-row:1;
	margin-left: calc(100% - 250px);
	/*width needs to be set and match the hoverbasket width */
	width: 250px;
}

#pt .bskt .bc {}
#pt .bskt .bt {
	display:none;
}

#pt .bskt h3,
#pt .bskt h4 {
	font-size: 0.825em;
	padding:.5em;
}

#pt .bskt #mybskt{
	display:grid;
	/* padding:0 .5em; */
	grid-template-columns:1fr 1fr;
	
}

#pt .bskt #mybskt h4{
	grid-column:1/3;
	text-align:center;
}

#pt .bskt #bsktitems {
	grid-column:2;
	grid-row:1;
	text-align:left;
}
#pt .bskt #bsktitems span{
	/* display:none; */
	margin:0 .5em;
}
#pt .bskt #bsktvalue {}
#pt .bskt #bsktvalue span{
	display:none;
}
#pt .bskt span {}

/*the my basket button*/
#pt .bskt a.btn {
	display:none;
}

#pt .bskt a.btn img {}

#pt .art#a109969410{
	grid-column:2;
	grid-row:2;
	text-align:center;
	color:var(--altColor)
}

#pt .art#a109969410 h3{
	font-size: 1.25em;
	margin:1em;
}



/* stick header on scroll
------------------------------------------------------- */
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
#pt.sticky {
	position: fixed;
	top: 0;
	left:0;
	/* padding-top:0; */
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
#pt.sticky + #pc {
    padding-top: 95px;
}

#pt.sticky{
	z-index:9999;
	-webkit-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
    -moz-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
    box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
}

/* define new grid */
#pt.sticky .ext{
    grid-template-columns:100px 1fr 250px;
    /* background-color:red; */
}

/* hide any elements that are not wanted to be displayed in minified header */
#pt.sticky .info,
#pt.sticky .art{
	display:none;
}

/* reduce size of logo */
#pt.sticky .pbnr {}
#pt.sticky .pbnr img{}

/* -------------------------------------------------------------------------------------
=CentrePanel 
------------------------------------------------------------------------------------- */
#pc {
	width: 100%;
	min-width: 1200px;
}

#pc .bc {
	/* width: 1200px; */
	margin: 0 auto;
	position: relative;
	text-align:left;
}

#pc .arts,
#pc .pbnr {}

#pc .arts .bc,
#pc .pbnr .bc{
	width:auto;
}

#site.home #pc {}

#pc .bc .pbnr {}
#pc .bc .pbnr img {}
#pc .bc .pbnr h3 {}

/* carousel bits with text next to image */



#pc .imgcont{
	display:grid;
	grid-template-columns:auto;
	align-items:center;
	grid-gap:1em;
}

/* use grid to change display order - would be better if coms had an option to do this per slide */
#pc .imgcont img{
	grid-column:1;
	grid-row:1
}
#pc .imgcont div{
	grid-column:1;
	grid-row:1;

	background-color:#fff;
    opacity:.9;
}

#pc .imgcont h3{
	font-family:var(--altFont2);
	color:var(--textSubHeadingColor);
	margin-bottom:.25em;
}

#pc .imgcont h2{
	font-family:var(--mainFont);
	color:var(--textHeadingColor);
	margin-bottom:1em;
}

#pc .imgcont p{
	color:var(--textHeadingAltColor);
	margin-bottom:1em;
	max-width:500px;
}

#pc .slideCont{
	color:#fff;
}

#pc .topMessage{
	background-color:var(--altColor);
	color:#fff;
	padding:.25em;
	margin:.5em 0;
	text-align:center;
}

#pc .topMessage h2{
	font-family:var(--altFont2);

}

#pc .topMessage .artp{
	padding:.5em;
	text-align:center;

}

/* -------------------------------------------------------------------------------------
=MainPanel 
------------------------------------------------------------------------------------- */

#pmid {
	width:1200px;
	clear: both;
	margin: 0 auto;
	padding: 0;
	position: relative;
	/*used to ensure left panel displays correctly, unsure why though... */
	display:flex;
}

#pm {
	margin: 0 auto;
	position: relative;
	margin-bottom:1em;
}

/*should only be pmwide if a left panel is in use*/
#pm.pmwide {
	width: 80%;
	display:inline-block;
	vertical-align:top;
}

#pm.pmfull {
	width: 1200px;
	background-color:transparent;
}

#pm .pmind {}

/* Articles
------------------------------------------------------- */

/* Banners
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=RightPanel 
------------------------------------------------------------------------------------- */
#pr {
	width: 25%;
	padding:1em;
}

/* -------------------------------------------------------------------------------------
=LeftPanel 
------------------------------------------------------------------------------------- */
#pl {
	width: calc(20% - 1em);
	margin-right:1em;
	margin-top:1em;
}

#pl .bt h3 {
	font-size: 1em;
	padding: .5em;
	font-size: 1em;
	padding: .5em;
	background-color:var(--bgaltColor2);
	color:white;
	position:relative;
	cursor:pointer;
}

#pl .bc {}
#pl .bc #sldiv {}
#pl p {}
#pl a {}
#pl a:hover {}
#pl .bb {}
#pl .dept{}
#pl .dept .bc{}
#pl .dept .bc li{}
#pl .dept ul{}
#pl .dept ul li{}
#pl .dept ul li a{}
#pl .pbnr {}
#pl .bnr {}
#pl .bnr span {}

/* -------------------------------------------------------------------------------------
=FooterPanel
------------------------------------------------------------------------------------- */
#pf {
	width: 100%;
	background-color:var(--altColor3);
	color:var(--mainColor)
}

#pf .ext {
	margin: 0 auto;
	position: relative;
	padding-top:1em;
	/* width:1200px; */
}

#pf .art.imageText{
	display:inline-block;
	padding:.5em;
	width: calc(33.333333% - 1em);
	text-align:center;
}

#pf ul {}
#pf ul li {}
#pf ul li:last-child {}


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

#pf h2,
#pf h3,
#pf h4,
#pf span,
#pf strong{}

#pf a,
#pf p,
#pf ul{
	margin-bottom:.5em;
}

#pf a:hover{}

#pf h2,
#pf h3,
#pf h4{
	color:var(--mainColor);
	font-size:1.5em;
	margin-bottom:.5em;
}

#pf li{}

/* Testimonial Slider Article
------------------------------------------------------- */
#pf .art{
	background-color:var(--mainColor);
}

#pf .art .carousel{
	width:1200px;
	margin:auto;
}

#pf .art .carousel {
	color:white;
	padding-bottom:1em;
}


#pf .owl-theme .owl-dots .owl-dot span {
	border-color:var(--borderColour);
	background-color:transparent;
}
#pf .owl-theme .owl-dots .owl-dot.active span,
#pf .owl-theme .owl-dots .owl-dot:hover span {
	border-color: var(--altColor);
	background-color:var(--altColor)
}


/* image overlay (because we don't have a better way yet!) */
#pf .art .carousel .imgcont {
    position: relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    align-items:center; 
}

/*first statement is to cover lack of css class being applied */
#pf .art .carousel .imgcont img,
#pf .art .carousel img.slideCont{
	grid-row:1;
	grid-column:1;
	padding:0;
}

/*first statement is to cover lack of css class being applied */
#pf .art .carousel .imgcont div,
#pf .art .carousel .slideCont {
	grid-row:1;
	grid-column:1;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	color:var(--white);
	margin:auto;
	min-width:25%;
	max-width:70%;
}

#pf .art .carousel .imgcont div h2,
#pf .art .carousel .slideCont h2,
#pf .art .carousel .imgcont div p,
#pf .art .carousel .slideCont p{
	width:auto;
	margin:.5em;
	font-family:var(--altFont2);
	font-size:1.25em;
}

#pf .art .carousel .imgcont h4{
	color:var(--textSubHeadingAltColor);
	font-size:1em;
	margin:1em;
}

#pf .art .carousel .imgcont p{
	margin:.5em;
}




/* newsletter
------------------------------------------------------- */
#pf .news{
	background-color:var(--footerColor);
}

#pf .news .bt{
	width:1200px;
	margin:auto;
	padding:2em 0;
	text-align:center;
}



#pf .news .bc{
	width:1200px;
	margin:auto;
	padding:0;
	text-align:center;
}

#pf .news  form{
	text-align:center;
}

#pf .news .bb:before{
	content:'';
	height: 53px;
	display:block;
	background-color:white;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTQwIiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgMTU0MCA1MyI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2Y2ZjRmNzsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJiZ18tX2Y2ZjRmNyIgZGF0YS1uYW1lPSJiZyAtIGY2ZjRmNyIgY2xhc3M9ImNscy0xIiBkPSJNMC0yNjBIMTU0MFYwUzExNTQuNjksNTMsNzY5LjU0Miw1M0MzODQuNjk0LDUzLDAsMCwwLDBWLTI2MFoiLz4KPC9zdmc+Cg==');
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:cover;
}


#pf .pbnr img{
	height:auto;
}


/* Newsletter signup;
------------------------------------------------------- */
#pb .news{}

#pf .news .bc label{
	display:block;
	color:var(--textColor);
	margin-bottom:1em;
}

#pf .news .bc .inputtext_light,
#pf .news .bc .inputtext{
	display:inline-block;
	vertical-align:middle;
	border-right:none;
	border-top-left-radius:8px;
	border-bottom-left-radius:8px;
}

#pf .news .bc .submit{
	padding: 0.6em 0.6em;
	display:inline-block;
	vertical-align:middle;
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
}

/* Info
------------------------------------------------------- */
#pf .info{
	display:inline-block;
	vertical-align:top;
	padding:.5em;
	width: calc(20% - 1em);
}

/* Client specific
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=BottomPanel 
------------------------------------------------------------------------------------- */
#pb {
	margin: 0em auto;
	/* margin-top: 1em; */
	width: 100%;
	min-width: 1200px;
	background-color:var(--footerColor);
	font-family:var(--altFont);
	font-weight:600;
	padding-bottom:4em;
}

#pb .ext {
	width: 1200px;
	margin:0 auto;
	position: relative;
	display:grid;
	grid-gap: 0 1em;
	grid-template-columns:1fr 1fr 1fr 1fr;
}

#pb .pipe {
	display: none;
}

#pb ul {
	list-style: none;
	font-family:var(--altFont);
	color:var(--textColorLight);
	text-transform:uppercase;
}

#pb .info h3,
#pb .art h2,
#pb .pbnr h3 {
	font-size: 1.2em;
	font-family: var(--altFont);
	color:white;
	margin-top: 1em;
	margin-bottom: 1em;
}

#pb .info a:hover,
#pb .art a:hover{
	text-decoration:underline;
}

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

#pb h2,
#pb h3,
#pb h4,
#pb span,
#pb strong{}

#pb a,
#pb p{}

#pb a:hover{}

#pb h2,
#pb h3,
#pb h4{}

#pb p,
#pb li{
	color:var(--textColorLight);
	margin-bottom: 0.5em;
	font-size:.875em;
}

/* Articles
------------------------------------------------------- */
#pb .art{
}

/*company details article */
#pb .art#a110100482{}

#pb .art#a110100482 ul:first-of-type li{
	display:block;
}
#pb .art#a110100482 li{
	display:inline-block;
	vertical-align:middle;
}

/*increase size of font awesome icons */
#pb .art#a110100482 i{
    font-size: 1.25em;
    display:inline-block;
    vertical-align:middle;
}


#pb .art#a110100482.textImage .imgcont{
	display:inline-block;
	vertical-align:top;
	margin:0;
	margin-right:.25em;
}


/* Info
------------------------------------------------------- */
#pb .info{}

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


/* Client specific
------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */
#pbf{
	width: 100%;
	min-width: 1200px;
	background-color:var(--footerColor);
	color:var(--textColorLight);
}

#pbf .ext{
	width:1200px;
	margin:auto;
	padding:.5em 0;
	font-size:.725em;
}

/* -------------------------------------------------------------------------------------
=Copyright and Managed by and cookie stuff
------------------------------------------------------------------------------------- */
#pbf .etailcopy {
	display:inline-block;
	width:100%;
	display:grid;
	grid-template-columns:1fr 1fr;
}

#pbf .info{
	display:inline-block;
	width:100%;
	text-align:center;
}

#pbf .info li{
	display:inline-block;
	margin:.5em;
}

/* note to use grid layout */
p.copy{}
p.etail {
	text-align:right;
}

p.copy {
	display:inline-block;
	margin-right: 1em;
}

p.copy span {}

.cookie{
	text-align:center;
}

.cookie a{
	display:inline;
	padding:1
}

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
#pl .filter{
	border:1px var(--bgColor) solid;
}

#pl .filter .bc .ContainerPanel .HeaderContent, #pl .filter .bc .ContainerPanel .HeaderContentClose {}
#pl .filter .bc .ContainerPanel .Content .citem {}
#pl .filter .bc .ContainerPanel .Content .citem:hover {}
#pl .filter .bc .ContainerPanel .Content .citem span {}
#pl .filter .bc .ContainerPanel .Content {}
#pl .filter .bc .ContainerPanel .Content .showmore {
	cursor: pointer;
}

.filter .bt {
	background-repeat: no-repeat;
	width: 100%;
}

.filter .bt h3 {
	display: inline-table;
}

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

.HeaderContent {
	font-size: 1em;
	padding: .5em;
	font-family: var(--mainFont);
	background-color:var(--bgaltColor2);
	color:white;
	position:relative;
	cursor:pointer;
}

.HeaderContent:after{
	content:'\f146';
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	position:absolute;
	right:0;
	top:.5em;
}

.HeaderContent.collapsed:after{
	content:'\f0fe';
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	position:absolute;
	right:0;
	top:.5em;
}

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

.collapsed h5 {}
.collapsed h5:hover {}

.items{
	margin:.5em 0
}

.citem {
	color:var(--textColor);
	font-family:var(--mainFont);
	padding: .5em;
	margin: 0;
	cursor: pointer;
}

.citem:before{
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f0c8';
}

.citemselected:before{
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f14a';
}

.citem:empty {
	display: none;
}

.citem:hover {}
.citemselected {}
.citemselected:hover {}

#divPriceRangeDisplay {
	text-align:center;
	padding: .5em;
}

#sldiv {
	margin: 1em;
}

#resetfs {
	display:none;
}

#resetfs h5 {
	text-transform: uppercase;
	cursor: pointer;
}

/* -------------------------------------------------------------------------------------
=SearchHeader / SearchFooter 
------------------------------------------------------------------------------------- */
.deptwrap{}

.searchheader, .searchfooter {
	padding:.5em 0;
	text-align:right;
}

.searchheader .bc,
.searchfooter .bc{
	display:grid;
	grid-template-columns: 120px 250px 150px 1fr;
	align-items:center;
}

.searchheader label,
.searchfooter label{
	font-size:.825em;
	margin-right:.5em;
}

/* results found */
.searchheader h5#rescou {
	font-size:.825em;
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
	text-align:left;
}

/* sort by */
.searchheader #sorpan,
.searchheader form[name="dispord"]{
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
}

/* results per page */
.searchheader #rpppan,
.searchheader .rpp{
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
}

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

.searchheader .paging {
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
	padding:.5em 0;
}

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

.searchheader .paging span,
.searchheader .paging a,
.searchfooter .paging span,
.searchfooter .paging a {
	font-size:1em;
	display:inline-block;
	margin-right:.5em;
}

.searchheader .paging a,
.searchfooter .paging a{}
/*this should be the current page */
.searchheader .paging span,
.searchfooter .paging span {
	font-family:var(--mainFont)
}

.searchheader .search input#searchbox {}
.searchheader .search input.submit {}
.searchheader label[for="rpp"] {}
.searchfooter .paging {}

#sr {
	/* use grid layout */
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 1em;
	position:relative;
	margin-top:1em;
}

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

/* lets use grid layouts cos they are awesome! */
.fprd {
	border:1px var(--bgaltColor) solid;
}

.fprd:hover{}

/* unfortunately there are cases where a .bc is present inside .fprd*/
.fprd .bc{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	align-items:center;
	grid-gap: 0.5em;
	padding: 0.5em;
	position:relative;
	background-color:#ffffff;
	/*using min height here to make things the same*/
	min-height:425px;
}

.fprd .bc .fprdimg{
	grid-column:1 / -1;
	grid-row:1;
	text-align:center;
	/* padding:.5em; */
	position:relative;
}

/* image 
------------------------------------------------------- */
.fprd a.img {
	grid-column:1/-1;
	grid-row:1;
	text-align:center;
}

.fprd a.img img {
	max-width:100%;
}

.fprd .fprdimg{}

.fprd .fprdimg img{

}

.fprd .fprdimg a.img {
	display:inline-block;
	padding:0;
	width:100%;
}

.fprd .fprdimg a.img img{
	width:100%;
	height:auto;
	margin:0 !important /*due to inine stuff */
}


/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title {
	font-family: var(--headingFont);
	/* font-weight:600; */
	grid-column:1/-1;
	grid-row:2;
	text-align: left;
	/* color: var(--altColor); */
	align-self:start;
	/*min-height set based on 3 line titles */
	min-height: 3.25em;
	align-items:center;
	text-align:center;
}

.fprd .strap {}
.fprd .strap p{}




/* pricing structure
------------------------------------------------------- */
.fprd .fprdbuyform .bc{
min-height:auto;
min-height:revert;
min-height:unset;
}

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

.fprd .qty {
	grid-column:1;
	grid-row:3;
		align-self:start;
}

.fprd .price{
	grid-column:1/3;
	grid-row:3;
	text-align: left;
	align-self:start;
}

.fprd .price h6 {
}

.fprd .prevprice{
	grid-column:2;
	grid-row:3;
	align-self:start;
	text-align:center;
}

.fprd .prevprice h6 {
	text-decoration: line-through;
	text-decoration-color:var(--mainColor);
	color:var(--textColor);
}

.fprd .offer{
	grid-column:3;
	grid-row:3;
	align-self:start;
	text-align:right;
}

.fprd .offer h6 {
	color:var(--altColor);
	font-weight:600;
}

.fprd label {
    font-size: 0.725em;
}


.fprd .trade {
	grid-column:3/-1;
	grid-row:3;
	align-self:start;
	text-align:right;
}

.fprd .trade h6 {
}



/* this is the vat info */
.fprd h6 span{
	font-size:.5em;
}
/* pricebreaks 
------------------------------------------------------- */
.pricebreak{}

.pricebreak tr {
	display:table-row;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr) );
}

.pricebreak th{}
/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	/* display:none; */
	/*just writes out a h5 - needs structural improvement and perhaps a label too like other items do */
}
.fprd .unit label,
.fprd .unit h6 {}
.fprd .unit label {}

.fprd .inner {}
.fprd .outer {}

.fprd .trade.break {
	display:none;
}

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref span {}

.fprd .brand, 
.fprd .manu, 
.fprd .model,
.fprd .clientref {
	grid-row:3;
	font-size:.750em;
	/* equiv to 1em at .75em font size */
	padding: 0.66666666666em;
}

.fprd .flag{
	position:absolute;
	top: -0.5em;
	right: -0.5em;
}

.fprd .flag.offer{
	grid-column:unset;
	grid-row:unset;

}

.fprd .flag.stkout{
	grid-column:unset;
	grid-row:unset;
}

.fprd .piflags {
	position:absolute;
	bottom:0;
}

.fprd .piflags img{
	max-width:32px;
}
.fprd .piflags ul {}
.fprd .piflags li {}
.fprd .flag img,
.fprd .piflags img {
		width:auto;
}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-column:1/-1;
	text-align:center;
	align-self:baseline;
}

.fprd form select {
	grid-column:1;
	grid-row:1;
	max-width:100%;
	display:inline-block;
	border-radius:8px;
}
.fprd form label {
	display:inline-block;
	text-align:left;
	vertical-align:middle;
	margin-right: .5em;
}

.fprd button {
	display:inline-block;
	vertical-align:middle;
	border:none;
	background-color:var(--altColor);
	color:#fff;
	font-weight:600;
	font-size:1.2em;
	padding:.4em .5em;
}

.fprd button.fpskuqtysub {}

.fprd form input.inputtext {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	width:2.5em;
	margin:0 .5em;
}

.fprd button.fpskuqtyadd{}

.fprd form input.submit {
	display:inline-block;
	vertical-align:middle;
	/* font-size:.875em; */
	margin-left: 1em;
}

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

/* more info button */

.fprdinfo,
.fprd a.btn {
	grid-row: 1;
	align-self: end;
	text-align:center;
	grid-column:2/4;
	padding:.5em;
	margin-bottom:1em;
	z-index:1;
}


/* the more info button - both will show */
.fprd a.btn{
	display:none;
}

/* the quickview button */
.fprd a.btn.qkvw{}

.fprd:hover a.qkvw {
	display:block;
    float: none;
    padding:4px;
    font-weight:400;
    display: block;
    margin: 0 auto;
    background-color:var(--altColor);
    border-color:var(--altColor);
    color: #FFF;
    grid-row:2;
}

.fprdinfo a.qkvw:hover {}

/* Media Queries 
------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=QuickView 
------------------------------------------------------------------------------------- */

.quickview{
	background-color:rgba(0,0,0,0.5);
	width:100vw;
	height:100vh;
	z-index: 10038;
	position:fixed;
	top:0;
	left:0;
	padding-top:5%;
}
.quickviewdialog{
	width:800px;
	padding:1em;
	margin:auto;
	background-color:var(--white);
	z-index:999999;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:.25em;
}

.quickviewdialog .quickviewHeader{
	grid-column:1/3;
}
.quickviewdialog .quickviewHeader .closeqkvw{}
.quickviewdialog .left{}
.quickviewdialog .left .piimg{}

.quickviewdialog .left .piimg img{
	/*inline styling override */
    margin:0 !important;
}


/*it seems we now put a broken image carousel on the quickview*/
.quickviewdialog .left .owl-carousel{
	display:none;
}

.quickviewdialog .left img{}
.quickviewdialog .right{}
.quickviewdialog .right .pititle,
.quickviewdialog .right .lnk,
.quickviewdialog .right .delivery{}

.quickviewdialog .right .delivery h4{
	margin-top:.5em;
	font-size:1.2em;
}

.quickviewdialog .right .brandmanu.model{}

.quickviewdialog .right .brandmanu.model h5,
.quickviewdialog .right .brandmanu.model h6{
	font-family:var(--mainFont);
	font-size:.875em;
	margin-right:.5em;
	color:var(--altColor2);
	display:inline-block;
	vertical-align:middle;
}

.quickviewdialog .right .pidesc{
	margin:.5em 0;
}

.quickviewdialog .right .pidesc h2[itemprop="name"]{
	/*duplicated title */
	display:none;
}

.quickviewdialog .right .pidesc h4[itemprop="description"]{
	/*product strapline? */
	display:none;
}


.quickviewdialog .right .pidesc p{
	font-size:.725em;
}

.quickviewdialog .right .lnk{
	font-size:.8em;
	text-align:right;
	margin:.5em;
}

.quickviewdialog .right .pibuy{ 
}

.quickviewdialog .right .pibuy .price,
.quickviewdialog .right .pibuy .qty,
.quickviewdialog .right .pibuy .trade{
	display:inline-block;
	vertical-align:middle;
	margin:.25em;
	font-size: 1em;
}
.quickviewdialog .right .pibuy .price h6{}

.quickviewdialog .right .pibuy .price label,
.quickviewdialog .right .pibuy .qty label,
.quickviewdialog .right .pibuy .trade label{
		font-weight:600;
}
.quickviewdialog .right .pibuy .qty h6,
.quickviewdialog .right .pibuy .trade h6{}

.quickviewdialog .right .pibuy form p{}
.quickviewdialog .right .pibuy form .attrqty{}

.quickviewdialog .right .pibuy form .attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
	margin:.5em;
}

.quickviewdialog .right .pibuy form .attrqty .qtyinput label{}

.quickviewdialog .right .pibuy input#bspsubmit{
	/*save for later*/
	display:none;
}

.quickviewdialog .right .pibuy form .attrqty .qtyinput input.inputtext{}

.quickviewdialog .right .pibuy form .attrqty input#buy{
	display:inline-block;
	vertical-align:middle;
	margin:.5em;
}

.quickviewdialog .right .pibuy .stock{
	text-align:center;
	font-size:.713em;
}
.quickviewdialog .right .pibuy .title{
	/*pointless pricein gpb value, should only show if it isn't gbp */
	display:none;
}
.quickviewdialog .right .pibuy .ewis_dialog,
.quickviewdialog .right .pibuy .ewis{}

/* -------------------------------------------------------------------------------------
=ProductLists 
------------------------------------------------------------------------------------- */
.prdlst .bc ul{
	display:grid;
	gap: .5em;
	padding:1em;
	/*will use media queries to change breakpoints set default here */
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}

.prdlst .bt h3{
	font-size: 1.5em;
	font-weight: 600;
	text-align: center;
	padding:1em
}

/* media queries for viewports start BIG and go small
 outside of this it used the default
--------------------------------------- */
/* over 600px wide and less than 800px wide - show 3 per row */
@media screen and (max-width:800px ){
.prdlst .bc ul {
		/* for grid widths us the fr unit - which is calcuated on free space (whats left after padding and margin) */
		grid-template-columns:1fr 1fr 1fr;
	}
}

/* over 400px wide and less than 600px wide - show 2 per row */
@media screen and (max-width:600px ){
.prdlst .bc ul{
	 grid-template-columns:1fr 1fr;
	}
}

/* under 400px wide, show 1 per row */
@media screen and (max-width:400px ){
.prdlst .bc ul{
		grid-template-columns: 1fr;
	}
}

/* items in product list - would be better if they had .fprd stylings on them !*/
.prdlst li {
	display:grid;
	grid-template-columns: 1fr 1fr;
	position:relative;
	border: 1px solid var(--borderColour);
	background-color:#ffffff;
	align-items:center;
}

.prdlst li a.img{
	grid-column:1/3;
	grid-row:1;
	text-align:center;
	padding:.5em;
}

.prdlst li a.txt{
	grid-column:1/3;
	grid-row:2;
	text-align:center;
	padding:.5em;
	color:var(--textColor);
	font-weight:600;
}

.prdlst .price{
	grid-column:1/3;
	grid-row:3;
	text-align:center;
	padding:.5em;
}

.prdlst .offer{
	grid-column:2;
	grid-row:3;
	text-align:center;
}

.prdlst .prevprice{
	grid-column:1;
	grid-row:3;
	text-align:center;
}

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

.prdlst h6{
	font-weight:600;
}

.prdlst label{
	font-weight:400;
}

/* -------------------------------------------------------------------------------------
=BrandLists 
------------------------------------------------------------------------------------- */

/* scrolling brand lists */
.brnd .scroller{}

.brnd ul {
	background-color:#ffffff;
	width:100%;
	overflow:hidden;
}

.brnd #buttleft,
.brnd #buttright{
	display:none;
}

.brnd ul li {
	display:inline-block;
	vertical-align:middle;
	height:100%;
	padding-left: 1em;
}

.brnd ul li a{}

.brnd ul li a img {
	display:inline-block;
	vertical-align:middle;
	opacity:0.6;
	filter:alpha(opacity=60);
	-webkit-transition:opacity .2s ease-in-out;
	-moz-transition:opacity .2s ease-in-out;
	-o-transition:opacity .2s ease-in-out;
	transition:opacity .2s ease-in-out;
	filter:grayscale(1);
	max-height:70px;
	width:auto;
	margin:auto;
}

.brnd ul li a:hover img {
	opacity:1;
	filter:alpha(opacity=100);
	filter:grayscale(0);	
}

/* -------------------------------------------------------------------------------------
=RecentItems 
------------------------------------------------------------------------------------- */
.ritm {

}
.ritm .bt {}
.ritm h3 {}
.ritm ul {}

.ritm ul li {
	display:grid;
	grid-template-columns: 50px 1fr;
	align-items:center;
	grid-gap:.25em;
	margin-bottom:1em;
	background-color:#ffffff;
	padding:.5em;
}
.ritm a.img {
    grid-row:1;
    grid-column:1;
}
.ritm ul li a.img img {

}
.ritm ul li a.txt {
    /* font-family: var(--altFont2); */
    color:var(--mainColor);
    align-self:start;
    font-size: 0.825em;
    grid-row:1;
    grid-column:2;
}

.ritm ul li .price,
.ritm ul li .unit,
.ritm ul li .offer{
    display:none;
}
.ritm ul li .qty,
.ritm ul li .trade,
.ritm ul li .offer{
	grid-column:1/3;
	grid-row:1;
	text-align:right;
	font-size:.825em;
	align-self:end;
}

.ritm ul li .prevprice{
	display:none;
}
.ritm ul li .price label,
.ritm ul li .qty label,
.ritm ul li .trade label,
.ritm ul li .offer label{
	display:none;
}


/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
.myaccount ul {}
.link {}

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

/* orderinfo
------------------------------------------------------- */
.orderinfo{}

.orderinfo ul.order li{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-template-columns: 25% 75%;
	grid-gap:.5em;
	margin-bottom:.5em;
}

.orderinfo ul.order label{
	grid-column:1;
	font-weight:600;
}

.orderinfo ul.order li span{
	grid-column:2;
	display:contents;
	word-break:break-word
}

.orderinfo ul.order table{
	grid-column:1/3;
}

/*view order button uses the same image as other things, be careful! */
.orderinfo #pm a.btn.info{
	background:none;
	margin:0;
	padding:0;
}

.orderinfo #pm a.btn img.btn{
	width:1em;
}

ul.order a.lnk {
	grid-column:1/3;
	font-family: "proxima-nova",sans-serif;
	font-weight:600;
	font-size:1em;
	margin:.5em;
	padding:.5em .5em;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	color:#ffffff;
	background-color: var(--bgColor);
}


/* my details
------------------------------------------------------- */
form[name="selectDelAddress"]{}

form[name="selectDelAddress"] li.info{
	width:100%;
	color: #1d1d1d;
	font-family: "open-sans", sans-serif;
	/* www.aestheticallyloyal.com/public/optimize-legibility/ */
	text-rendering: optimizelegibility;
}

form[name="selectDelAddress"] li label{
	grid-column:1/3;
	text-align:left;
}

#psign ul.orders a.img,
#psign ul.contact a.img,
#psign ul.details a.img {
	text-align:center;
	justify-self:center;
	align-self:center;
}

#psign ul.orders a.img img,
#psign ul.contact a.img img,
#psign ul.details a.img img {
	max-height:32px;
	padding:.5em;
}

#psign ul.orders a.lnk,
#psign ul.contact a.lnk,
#psign ul.details a.lnk {
	justify-self:left;
	align-self:center;
	font-weight:600;
}

#pm .form .link {}



/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
#site.blog #pm {}
#site.blog #pm h2 {}
#site.blog #pm .blog {}
#site.blog #pm .blog a.title {}
#site.blog #pm .blog p.date {}
#site.blog #pm .blog img {}
#site.blog #pm .blog .artp {}
#site.blog #pm .blog a.more {}
#site.blog #pm .blogBtns, 
#site.blog #pm .blogPageBtns {}
#site.blog #pm .blogBtns a, 
#site.blog #pm .blogPageBtns a {}
#site.blog #pm .blogBtns a.prev, 
#site.blog #pm .blogPageBtns a.prev {}
#site.blog #pm .blogBtns a.next, 
#site.blog #pm .blogPageBtns a.next {}
#site.blog #pm .art .bc h2 {}
#site.blog #pm .art .bc .artp {}
#site.blog #pm .art .bc .artp h3 {}


/* -------------------------------------------------------------------------------------
=TabbedArticles
------------------------------------------------------------------------------------- */
#pi_wrapper{
	-webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
	-moz-box-shadow: 2px 2px 2px 2px var(--bgaltColor3));
	box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
	margin-bottom:1em;
}

#pi_wrapper ul.pi_tabs{}


#pi_wrapper ul.pi_tabs li{
	display:inline-block;
	padding:1em;
	background-color:var(--bgColor);
	cursor:pointer;
	font-weight:600;
	margin-right:1em;
}

#pi_wrapper ul.pi_tabs li.selected{
	background-color:var(--mainColor);
	color:#ffffff;
	-webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3)
	-moz-box-shadow: 2px 2px 2px 2pxvar(--bgaltColor3);
	box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
}

#pi_wrapper .pi_tab_content{
	border:1px var(--bgColor) solid;
	padding:1em;
	overflow-x:hidden;
	height:20em;
	-webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
	-moz-box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
	box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
}
/* -------------------------------------------------------------------------------------
=CustomArticles
------------------------------------------------------------------------------------- */

.art.fullWidth,
.art.halfWidth,
.art.thirdWidth,
.art.twoThirdWidth,
.art.quarterWidth{
	display:inline-block;
	vertical-align:top;
	/*needed as text may be too wide to show on smaller devices*/
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	padding:.5em;
}


#pm .art.halfWidth .artp,
#pm .art.thirdWidth .artp,
#pm .art.twoThirdWidth .artp,
#pm .art.quarterWidth .artp{
	padding:0;
}

.art.fullWidth{
	width:calc(100% - 1em);
}

.art.halfWidth{
	width:calc(50% - 1em);
}

.art.thirdWidth{
	width:calc(33.33333% - 1em);
}

.art.twoThirdWidth{
	width:calc(66.66666% - 1em);
}

.art.quarterWidth{
	width:calc(25% - 1em);
}

.deptHeader{
	display:grid;
	grid-template-columns:70% 30%;
	background-color:white;
	padding:1em;
	align-items:center;
}
 
/* responsive iframe */
.respIframe{
    width:calc(100% - 2em);
    margin:1em;
    display:inline-block;
    vertical-align:top;
    margin-top:2em;
}

/*to sort out the responsive iframe */
.respIframe .artp {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.respIframe .artp iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* -------------------------------------------------------------------------------------
=CustomBanners
------------------------------------------------------------------------------------- */
.pbnr.blp{
	display:inline-block;
	vertical-align:top;
}

.bnr.fullWidth,
.bnr.halfWidth,
.bnr.thirdWidth,
.bnr.twoThirdWidth,
.bnr.quarterWidth{
	display:inline-block;
	vertical-align:top;
	/*needed as text may be too wide to show on smaller devices*/
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	padding:.5em;
}


/*would be nicer to use % rather than px but that requires yet another code change */
.bnr.fullWidth{
	width:calc(1200px - 1em);
}

.bnr.halfWidth{
	width:calc(600px - 1em);
}

.bnr.thirdWidth{
	width:calc(400px - 1em);
}

.bnr.twoThirdWidth{
	width:calc(800px - 1em);
}

.bnr.quarterWidth{
	width:calc(300px - 1em);
}

/* -------------------------------------------------------------------------------------
=CustomPages/Promotions
------------------------------------------------------------------------------------- */


/* Contact Us
------------------------------------------------------- */

/* 404 page
------------------------------------------------------- */

/* FAQs
------------------------------------------------------- */

/* About US
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=SpecificPages 
------------------------------------------------------------------------------------- */
/* homepage
------------------------------------------------------- */

#site.home #pm .pmind{}

/*product carousels full width */
/*dept carousels full width */
#site.home #pm .deptprods,
#site.home #pm .carousel.prod{}

#site.home #pm .deptprods h3,
#site.home #pm .carousel.prod h2{
	text-align:center;
	font-size:2.5em;
	margin:.25em 0;
	font-family:var(--altFont2)
}

#site.home #pm .deptprods .seeall{
	text-align:center;
	display:block;
	margin-bottom:.5em;
	font-family:var(--altFont);
	font-weight:600;
}

#site.home #pm .deptprods .owl-dots,
#site.home #pm .carousel.prod .owl-dots{
	padding:1em;
}

/* articles */

/* -------------------------------------------------------------------------------------
=DepartmentPages 
------------------------------------------------------------------------------------- */

/* top x dept prod carousel used in promotions 
------------------------------------------------------- */

.deptprods{}
.deptprods h3{
	text-align:center;
	margin:.5em;
	grid-row:1;
}

/* dept single links used in promotions 
------------------------------------------------------- */
.deptsingle {
	align-items:center;
	text-align:center;
	background-color:#fff;
	margin:.5em;
	position:relative;
	display:inline-block;
	vertical-align:top;
	width: calc(25% - 1em)
}

.deptsingle a.imglnk{
	text-align:center;
	display:grid;
}

.deptsingle a.imglnk img{
	object-fit:cover;
	width:100%;
	height:auto;
}

/* done like this due to lack of class on the text link */
.deptsingle a.imglnk + a {
	font-family: var(--altFont2);
	font-size: 1.2em;
	text-align:center;
	display:block;
	height:auto;
	padding:.5em;
	background-color:#fff;
	position:absolute;
	bottom: 1em;
	width:calc(100% - 1em);
	opacity:.9;
}

/* Subdepartment tree
------------------------------------------------------- */
.depttree{
	margin-top:1em;
}

.depttree h3{
	color:var(--mainColor);
	margin-bottom:.5em;
}

.depttree h4.tagline{
	font-size:1em;
	margin-bottom:1em;
}

.depttree ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-gap: 1em;
}

.depttree li{
	display:grid;
	/*will use media queries to change breakpoints set default here */
	grid-template-columns: 1fr;
	align-items:center;
	background-color:#ffffff;
	position:relative;
}

.depttree li a.img{
	grid-row:1;
	grid-column:1;
}

.depttree li a.txt{
	grid-row:1;
	grid-column:1;
	font-family: var(--altFont2);
	font-size:1.5em;
	text-align:center;
	padding:.0em;
	background-color:#fff;
	opacity:.9;
	align-self:end;
	margin-bottom:1em;
}

.depttree li:hover{
	-webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
	-moz-box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
	box-shadow: 2px 2px 2px 2px var(--bgaltColor3);
}

.depttree a.txt{

}

.depttree img{
	margin:0 !important;
	padding:0 !important;
	width:100%;
	height:auto;
}



/* media queries
--------------------------------------- */

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

/* Product Panels 
------------------------------------------------------- */
#pi{
	display:inline-block;
	position:relative;
	margin:0;
	padding:0;
}

#pi .top{}

#pi .main{
	display:inline-block;
	position:relative;
	width:1200px;
	margin:auto;
	padding-top:1em;
	text-align:left;
}

#pi .left{
	display:inline-block;
	vertical-align:top;
	width: calc(632px - 1em);
	margin-right: 2em;
	padding:0;
	position:relative;
}

#pi .left .bc{
	display:grid;
	grid-template-areas:
	"gallery image"
	"gallery youtube"
	"gallery .";
	grid-template-columns:120px minmax(0, 1fr)
}

#pi .right{
	display:inline-block;
	vertical-align:top;
	width: calc(552px - 0em);
	/* padding:.5em; */
}

#pi .bottom{}

/* -------------------------------------------------------------------------------------
=tipsy 
------------------------------------------------------------------------------------- */
.tipsy{
	padding: .5em;
	font-size: 1em;
	opacity: 0.8;
	filter: alpha(opacity=80);
	background-repeat: no-repeat;
	background-image: url(/images/tipsy.gif);
}

.tipsy-inner{
	padding: .5em;
	background-color: #1a1a1c;
	color: white;
	max-width: 200px;
	text-align: center;
}

.tipsy-inner{
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.tipsy-north{
	background-position: top center;
}

.tipsy-south{
	background-position: bottom center;
}

.tipsy-east{
	background-position: right center;
}

.tipsy-west{
	background-position: left center;
}




/* Title
------------------------------------------------------- */
.pititle{
	display:inline-block;
	vertical-align:middle;
	/* width: 77%; */
	margin-bottom:.25em;
}

h4.strap{
	font-size:1em;
	margin-bottom: .5em;
	margin:.5em 0;
	/* color:var(--textColorLight); */
	font-family:var(--altFont2);
}

#pi .pititle h2{
	color:var(--textColor);
	font-weight:600;
}

/* Image (carousel/Main Image Zoom)
------------------------------------------------------- */
#pi .piimg{
	background-color:#fff;
	text-align:center;
	display:inline-block;
	vertical-align:top;
	grid-area:image;
}

#pi .piimg img{
	width:480px;
	max-width:100%;
	height:auto !important;
}

#pi .piimg p{
	display:none;
}

#pi .piimgx{}

/* If image not aligning centrally */
#pi .piimg a{
	margin:auto;
	text-align:center;
}

#pi .piimg a img{
	margin:0 !important; 
	/* due to inline stylings */
}

/* Gallery
------------------------------------------------------- */
#pi .gallery{
	text-align:left;
	margin-right:1em;
	width:120px;
	display:inline-block;
	vertical-align:top;
	grid-area:gallery;
}

#pi .gallery h4{
	display:none;
}

#pi .gallery .piimg_large{}

#pi .gallery .piimg_large img{
	width:100%;
	height:auto;
	margin:0 !important;;
}
#pi .gallery .piimg_large a{}


/* This is the moving lens square underneath the mouse pointer. Not visible if the zoom window is over the image*/
.cloud-zoom-lens{
	border:1px solid var(--borderColour);
	margin:-1px; /* Set this to minus the border thickness. */
	background-color:#fff;
	cursor:move;
}

/* This is for the title text. */
.cloud-zoom-title{}

/* This is the zoom window. */
.cloud-zoom-big{
	overflow:hidden;
	top:0;
	left:0 !important;
	background-color:#fff;
}

/* This is the loading message. */
.cloud-zoom-loading{
	position:absolute;
	top:0;
	margin:0;
	color:white;
	background:#222;
	padding:3px;
}
 
/* Brand and Manufacturer 
------------------------------------------------------- */
#pi .brandmanu.brand h5{}
#pi .brandmanu.brand p{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	font-size:.825em;
	margin-left:.5em;
	color:var(--textColor);
}


#pi .brandmanu.manu h5{}
#pi .brandmanu.manu p{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	font-size:.825em;
	margin-left:.5em;
	color:var(--textColor);
}

#pi .brandmanu.brand img{}
#pi .brandmanu.model{}



#pi .brandmanu h5{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	font-size:.825em;
	font-weight:600;
	color:var(--textColor);
}

#pi .brandmanu h6{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	font-size:.825em;
	margin-left:.5em;
	color:var(--textColor);
}

/* Barcodes
------------------------------------------------------- */

#pi .brandmanu.gtin{}


#pi .brandmanu.barcode{
	margin:1em 0;
}

#pi .brandmanu.barcode img{
    max-width:200px;
    height:auto;
    }


/* independant price element - not part of the form yay!
------------------------------------------------------- */
#pi .pricecomp{
	display:inline-block;
	vertical-align: top;
	text-align:right;
	width: calc(23% - .5em);
	margin-left:.5em;
	color:var(--textColor);
}

#pi .pricecomp label{
	display:none;
}

#pi .pricecomp h6{
    font-size: 1.25em;
    /* font-family:var(--altFont2); */
}

#pi .pricecomp h6 span{
	font-family:var(--mainFont);
	font-size:.35em;
	display:block;
}

#pi .pricecomp .prevprice,
#pi .pricecomp .saving{
	display:none;
}
#pi .pricecomp .offer{}

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy{
	position:relative;
}



#pi .pibuy h6{}
#pi .pibuy .bt{}
#pi .pibuy .bc{}
#pi .pibuy .bb{}

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

/* pricing info
------------------------------------------------------- */
#pi .pibuy .bc .price,
#pi .pibuy .bc .offer,
#pi .pibuy .bc .prevprice,
#pi .pibuy .bc .rrp,
#pi .pibuy .bc .trade,
#pi .pibuy .bc .saving{
	margin-bottom:1em;
}

/*normal price */
#pi .pibuy .bc .price {
/*because despite my instructions this is being written out when not wanted!!!! *//* display:none; */}
#pi .pibuy .bc .price h6{} 
#pi .pibuy .bc .price label{
    font-weight:600;
}
#pi .pibuy .bc .price span{} 

/*rrp price */
#pi .pibuy .bc.rrp {}
#pi .pibuy .bc .rrp h6{}
#pi .pibuy .bc .rrp label{}
#pi .pibuy .bc .rrp span{} 

/*offer price */
#pi .pibuy .bc .offer {}
#pi .pibuy .bc .offer h6{}
#pi .pibuy .bc .offer label{
	display:none;
} 
#pi .pibuy .bc .offer span{} 

/*previous price (goes with offer) */
#pi .pibuy .bc .prevprice {}
#pi .pibuy .bc .prevprice h6{
	text-decoration:line-through;
	text-decoration-color:#d94927;
}
#pi .pibuy .bc .prevprice label{
	display:none;
}
#pi .pibuy .bc .prevprice span{} 

/*offer price */
#pi .pibuy .bc .saving {
	display:none;
}
#pi .pibuy .bc .saving h6{}
#pi .pibuy .bc .saving label{}
#pi .pibuy .bc .saving span{} 

/*trade price */
#pi .pibuy .bc .trade {}
#pi .pibuy .bc .trade h6{}
#pi .pibuy .bc .trade label{
	font-weight:600;
}
#pi .pibuy .bc .trade span{} 

/* Messages */
#pi .pibuy p{
	font-size:0.688em;
	display:inline-block;
}
#pi .pibuy h4{}
#pi .pibuy h5{}
#pi .pibuy p.p_stock{}


/* stock */
#pi .pibuy .stock{/* display:none; */}

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

/*dynamic price */
.dynprice{
	display:inline-block;
}

/* Pricing info
------------------------------------------------------- */

/* Buy Form
-------------------------------------------------------*/
#buy_form{
	display:inline-block;
	margin-right:1em;
}


/* attributes/sku select */
#buy_form .attr{
	display:inline-block;
	vertical-align:middle;
}
#buy_form .attr label{
	display:none;
}

#buy_form .options{
	grid-column:1;
	grid-row:1;
}

#buy_form select,
#buy_form textarea{}
#buy_form select{
	max-width:100%;
}

#buy_form .attrqty {
	grid-column:2;
	grid-row:1;
}

/* quantity input */
.attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
	margin:.5em;
}

/*hide quantity label*/
.attrqty .qtyinput label{
	display:none;
}
.attrqty .qtyinput #skuqty{
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	padding:.5em;
	margin:.5em;
}

/*increase/decrease buttons */
.attrqty .qtyinput  button{
	display:inline-block;
	vertical-align:middle;
	border:1px var(--borderColour) solid;
	color:var(--textColor);
	font-weight:600;
	font-size:1.3em;
	padding:.25em .5em;
	background-color:#fff;
	cursor:pointer;
}

.attrqty .submit{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	border: none;
	text-align: center;
	cursor:pointer;
}


/* message if no option selected*/
#selectResponse{
	color:red;
	padding:0 .5em
}

/* save for later */

#bspsubmit{
	font-size:.825em;
	background-color:var(--bgaltColor3);
	border-color:var(--bgaltColor3);
}

/* Description
-------------------------------------------------------*/
#pi .pidesc, 
#pi .delivery{
	color:var(--textColor);
	margin: 1em 0;
}

#pi .pidesc h2[itemprop="name"]{
	/*product title gets duplicated on the page*/
	display:none;
}

/*strapline*/
#pi .pidesc h4[itemprop="description"]{
	/*if strapline is added then it too gets duplicated on the page*/
	display:none;
}

#pi .delivery h3{}
#pi .pidesc p, 
#pi .delivery p{
	font-size: .725em;
}

#pi .pidesc ul{}
#pi .pidesc li{}

/* direct despatch */
#pi .pidesc.desp{}

#pi .pidesc.desp h5{}
#pi .pidesc.desp p{
	display:inline-block;
	vertical-align:middle;
}


/* Extra Description 
------------------------------------------------------- */
#pi .pidescx{}
#pi .pidescx ul{}
#pi .pidescx ul li{}


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

/* Accordion Description
-------------------------------------------------------*/

/* Tabbed Descriptions
-------------------------------------------------------*/
#pm #pi .pi_tab{
	display:inline-block;
	width:100%;
}

#pm #pi #pi_wrapper{
	-webkit-box-shadow:-2px 2px 2px 0 var(--bgaltColor3);
	-moz-box-shadow:-2px 2px 2px 0 var(--bgaltColor3);
	box-shadow:-2px 2px 2px 0 var(--bgaltColor3);
}

#pm #pi ul.pi_tabs{
	display:inline-block;
	cursor:pointer;
}

#pm #pi ul.pi_tabs li{
	font-size:1em;
	text-transform:uppercase;
	padding:1em;
	margin:1em;
	text-align:center;
	border:1px #ebecee solid;
	background-color:#ebecee;
}

#pm #pi ul.pi_tabs li.selected{
	background-color:#2c4556;
	color:#fff;
	z-index:9999999;
}

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

#pm #pi .pi_tab_content{
	width:95%;
	margin-left:1em;
}

#pm #pi .pi_tab_content h2{
	font-size:1.2em;
}

#pm #pi .pi_tab_content h3,
#pm #pi .pi_tab_content h4,
#pm #pi .pi_tab_content ul,
#pm #pi .pi_tab_content p{
	padding:.5em;
}

#pm #pi .pi_tab_content p{
	font-size:0.813em;
}

#pm #pi .pi_tab_content a{}
#pm #pi .pi_tab_content a img {}

#pm #pi .pi_tab_content ul ,
#pm #pi .pi_tab_content ol{}

#pm #pi .pi_tab_content ul li,
#pm #pi .pi_tab_content ol li{}

#pm #pi .pi_tab_content ul li{
	list-style:disc;
	font-size:0.938em;
}


/* Stock 
-------------------------------------------------------*/

/* Leadtime 
-------------------------------------------------------*/

/* Direct Despatch/Dropship
-------------------------------------------------------*/

/* Links - Ask a question etc
------------------------------------------------------ */
#pi .pilinks li{
	font-size:0.750em;
	display:inline-block;
	margin-bottom:.5em;
}

#pi .pilinks .linkimg{
	display:inline-block;
	vertical-align:middle;
}

#pi .pilinks .linkimg img{
	display:inline-block;
	vertical-align:middle;
	width:1em;
	height:auto;
}

#pi .pilinks a.lnk{}
#pi .pilinks li.email a.lnk{
	display:inline-block;
	vertical-align:middle;
}

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

/* Files
------------------------------------------------------- */
#pi .pifile{
    margin:.5em 0;
    text-align:right;
}

#pi .pifile li{
	margin-bottom:.5em;
}

#pi .pifile .linkimg,
#pi .pifile a{
	display:inline-block;
	vertical-align:middle;
	margin:.125em;
}

#pi .pifile .linkimg img{
	display:inline-block;
	vertical-align:middle;
}

/* Flags 
------------------------------------------------------ */
#pi .flags{
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	z-index:999;
}

#pi .flags .flag{
	display:inline-block;
	margin-bottom:.5em;
}


/* Video Links (youtube)
------------------------------------------------------ */
#pi .youtube {}
#pi .youtube li.title{
	text-align:center;
}
#pi .youtube li.vid{}




/* responsive iframe */
#pi .youtube{
    width:calc(100% - 2em);
    display:inline-block;
    vertical-align:top;
}

#pi .youtube .vid {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

#pi .youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Social Links
------------------------------------------------------ */
#pi .socbook {}
#pi .socbook .bt h3{
	display:none;
}
#pi .socbook li{
	display:inline-block;
	margin-right:.5em;
}

/* Buytogether
-------------------------------------------------------*/

/* Personalisation
-------------------------------------------------------*/
#pi .pibuy form .pers{}
#pi .pibuy form .pers li{}
#pi .pibuy form .pers li:last-child{}
#pi .pibuy form .pers label{}
#pi .pibuy form .pers input.inputtext{}
#pi .pibuy form .pers span.chars{}
#pi .pibuy form .pers span{}

/* Associated/Recommended/Related
-------------------------------------------------------*/
#pi .prec,
#pi .pass,
#pi .prel,
#pi .pran{}

#pi .prec h3,
#pi .pass h3,
#pi .prel h3,
#pi .pran h3{
	margin:1em 0;
	text-align:center;
	border-bottom:1px var(--borderColour) solid;
	padding-bottom:1em;
}

#pi .prec .fprd,
#pi .pass .fprd,
#pi .prel .fprd,
#pi .pran .fprd{}

#pi .prec .fprd h3,
#pi .pass .fprd h3,
#pi .prel .fprd h3,
#pi .pran .fprd h3{}

#pi .prec .fprd .bc{}

#pi .prec .fprd:last-child,
#pi .pass .fprd:last-child,
#pi .prel .fprd:last-child,
#pi .pran .fprd:last-child{}

#pi .prec .fprd .fprdimg,
#pi .pass .fprd .fprdimg,
#pi .prel .fprd .fprdimg,
#pi .pran .fprd .fprdimg {}

#pi .prec .fprd .fprdimg img,
#pi .pass .fprd .fprdimg img,
#pi .prel .fprd .fprdimg img,
#pi .pran .fprd .fprdimg img{}

#pi .prec .fprd .fprdimg .piflags,
#pi .pass .fprd .fprdimg .piflags,
#pi .prel .fprd .fprdimg .piflags,
#pi .pran .fprd .fprdimg .piflags{}

#pi .prec .fprd .fprdtitle,
#pi .pass .fprd .fprdtitle,
#pi .prel .fprd .fprdtitle,
#pi .pran .fprd .fprdtitle{}

#pi .prec .fprd .piflags,
#pi .pass .fprd .piflags,
#pi .prel .fprd .piflags,
#pi .pran .fprd .piflags{}



/* buytogether
-------------------------------------------------------*/
.buytogether{}
.buytogether li.header{}
.buytogether ul.boughtto{}
.buytogether ul.boughtto li{}
.buytogether ul.boughtto li.imgs{}
.buytogether ul.boughtto li.imgs img{}
.buytogether ul.boughtto li.imgs span{}
.buytogether ul.boughtto li.prods{}
.buytogether ul.boughtto li.prods input,
.buytogether ul.boughtto li.prods span.descr,
.buytogether ul.boughtto li.prods span.price{}
.buytogether ul.boughtto li.prods input{	}
.buytogether ul.boughtto li.prods span.descr{}
.buytogether ul.boughtto li.prods span.price{}
.buytogether ul.boughtto li.total{}
.buytogether ul.boughtto li.total span{}
.buytogether ul.boughtto li.btn{}
.buytogether ul.boughtto li.btn .submit{}

/* feefo summary widget
-------------------------------------------------------*/
#pi #feefologohere{}
ul.feefo li{}
ul.feefo li:last-child{}
.feefosmallsummarypanel{}
.feefosmallsummarypanel .title{}
.feefosmallsummarypanel .stars{}
.feefosmallsummarypanel span[itemprop="ratingCount"]{}
.feefosmallsummarypanel .ratingNumber{}
.feefosmallsummarypanel .reviewCount{}

.feefopanel{}

.feefosmallsummarypanel{}

.feefosmallsummarypanel img{}

/* title is a duplicate of product title so we don't want to show it */
.feefosmallsummarypanel .title{
	display:none;
}

.feefosmallsummarypanel .stars{
	text-align:right;
}
.feefosmallsummarypanel .stars img{
	width:1em;
	height:auto;
}

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

.feefosmallsummarypanel .reviewCount{
	display: inline-block;
	margin: .5em;
	text-align:left;
}
.feefosmallsummarypanel .ratingNumber {
	display:none;
}

.feefosmallsummarypanel .ratingNumber {}
.feeforeviews {}
.feeforeviews .feefosummary {}
.feeforeviews .feefosummary span.title {}
.feeforeviews .feefosummary span.stars {}
.feeforeviews .feefosummary img {}
.feeforeviews .feefosummary span.ratingNumber {}
.feeforeviews .feefosummary .ratingCount {}

/* Wishlist (not used)
------------------------------------------------------- */
#pi .pibuy form.wishlist{}
#pi .pibuy form.wishlist input.chkbox{}
#pi .pibuy form.wishlist label{}
#pi .pibuy form.wishlist .submit{}


/* Media Queries
------------------------------------------------------- */

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

/* Defaults
------------------------------------------------------- */
/*validator messages */
.sa_validator {
	color:red;
}

.cls_superattrribute #sa_pnl_product_not_found {
	display: none;
	z-index: 2000;
}

.cls_superattrribute #saten_pnl_show {
	position:relative;
}

.cls_superattrribute {}
.cls_superattrribute .bc table {}
.cls_superattrribute .bc table .sa_left_cell_type_1,
.cls_superattrribute .bc table .sa_right_cell_type_1 {}
.cls_superattrribute .att_measure {}
.cls_superattrribute .att_X,
.cls_superattrribute .att_Y {}
.cls_superattrribute .att_X label,
.cls_superattrribute .att_Y label {}
.cls_superattrribute .calc_price {}
.cls_superattrribute .calc_price .submit {}
#sa_pnl_product_not_found #sa_label_product_not_found_close {}
#sa_pnl_product_not_found table {}
#sa_pnl_product_not_found table label {}
#sa_pnl_product_not_found td {}
#sa_pnl_product_not_found th {}
#sa_pnl_product_not_found #sa_label_product_not_found {}
#safour_panel_show td {}
.sa_pnl_product_not_found_showg {}
.sa_pnl_product_not_found_show label {}
#pi .pibuy form#buy_form .cls_superattrribute .submit {}
/*help icon */
#pi .pibuy form#buy_form .cls_superattrribute img[id^="help"] {}

/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */
.cls_superattrribute.attributeTypePrice_Matrix_Calculator {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .bc {}
/*help icon needs to be placed differently for different items... */
.cls_superattrribute.attributeTypePrice_Matrix_Calculator #saten_pnl_show img[id^="help"] {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_X label,
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_Y label {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator label {}

/* attributeTypeDimensions 
***************************************************************/
.cls_superattrribute.attributeTypeDimensions {}
.cls_superattrribute.attributeTypeDimensions .bc {}
.cls_superattrribute.attributeTypeDimensions .width {}
.cls_superattrribute.attributeTypeDimensions .drop {}
.cls_superattrribute.attributeTypeDimensions .width label,
.cls_superattrribute.attributeTypeDimensions .width input,
.cls_superattrribute.attributeTypeDimensions .drop label,
.cls_superattrribute.attributeTypeDimensions .drop input {}
.cls_superattrribute.attributeTypeDimensions .width span,
.cls_superattrribute.attributeTypeDimensions .drop span{}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDimensions img[id^="help"] {}
.cls_superattrribute.attributeTypeDimensions .att_container {}
.cls_superattrribute.attributeTypeDimensions .att_X label,
.cls_superattrribute.attributeTypeDimensions .att_Y label {}
.cls_superattrribute.attributeTypeDimensions label {}

/* attributeTypeRadio_button
***************************************************************/
.cls_superattrribute.attributeTypeRadio_button {}
.cls_superattrribute.attributeTypeRadio_button .info.sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeRadio_button img[id^="help"] {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali ul {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali li {}


/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry {}
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry .sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry img[id^="help"] {}
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry span {}

/*attributeTypeDrop_down_list
***************************************************************/
.cls_superattrribute.attributeTypeDrop_down_list {}
.cls_superattrribute.attributeTypeDrop_down_list .info.sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDrop_down_list img[id^="help"] {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {}
/* for things with images... */
/*except this isn't just written out when images are in use because people don't think! */
/*don't put stuff in here it breaks things you may not be seeing on other pages */
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner {}
img.sa_img_swatch_selected {}

.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner img,
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner span {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {}

/* whatever this is we don't want it! */
.sa_pnl_product_popup_image_show {
	display:none;
}

/*attributeTypeSingle_Image_Upload 
***************************************************************/
.cls_superattrribute.attributeTypeSingle_Image_Upload {}
.cls_superattrribute.attributeTypeSingle_Image_Upload .progress {}
.cls_superattrribute.attributeTypeSingle_Image_Upload .sa_name {}

/* -------------------------------------------------------------------------------------
=Basket - Checkout v5
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	/* margin:1em 0; */
	padding:.5em;
	background-color:white;
}

/*checkout breadcrumb added - controls the order of the checkout process
doesn't do accordion stuff though */
.chkcrumb{
	text-align:left;
	font-size:.750em;
	padding:.5em;
	/* currently not wanting to show this - ultimately this will be a setting in coms as to whether it is displayed or not at each stage */
	display:none;
}

.chkcrumb .prev,
.chkcrumb .curr,
.chkcrumb .next{
	display:inline-block;
	margin-right:.5em;
}

.chkcrumb .numbers{
	display:inline-block;
}

.chkcrumb .text{}

.chkcrumb .curr{
	font-weight:600;
}

.chkcrumb .prev .numbers{}

/* if basket is empty and user is in it */
.bskt .empty{
	margin:10em 0;
}

.bskt .empty .header{
	color:var(--textColor);
	background:none;
}

.bskt .empty .total{
	text-align:center;
}

/* Basket header
------------------------------------------------------- */
.bskt .header{
	padding: 0.25em 0;
	font-size:1.25em;
	text-align:center;
	font-family:var(--altFont);
	font-weight:600;
	color:var(--textHeadingColor);
}

.bskt .header .icon{
	display:inline-block;
	vertical-align:middle;
}
.bskt .header .icon img{
	max-width:32px;
	margin-right:1em;
}

/* Basket Lines
------------------------------------------------------- */
.bskt .lines{
	background-color:white;
	margin-bottom:1em;
}

/* Basket Line items
------------------------------------------------------- */
.bskt .lines .line{
	display:grid;
	grid-gap:1em;
	grid-template-columns: 100px 6fr auto 30px 100px 1fr;
    align-items:center;
    margin-bottom:1em;
}

/* Image */
.bskt .lines .line .prodimg{
	grid-column:1;
	grid-row:1;
}

.bskt .lines .line .prodimg a,
.bskt .lines .line .prodimg a img{
	display:block;
	text-align:center;
	margin:auto;
}

/* Product Info - in list form */
.bskt .lines .line .prodinfo{
	grid-column:2;
	grid-row:1;
	/* align-self:start; */
}

.bskt .lines .line .prodinfo li.descr{
	font-size:1em;
	font-weight:600;
}
.bskt .lines .line .prodinfo li.subset,
.bskt .lines .line .prodinfo li.model,
.bskt .lines .line .prodinfo li.ref,
.bskt .lines .line .prodinfo li.uom,
.bskt .lines .line .prodinfo li.manu,
.bskt .lines .line .prodinfo li.brnd{
	font-size:.875em;
	margin-left:1em;
}

/*repeat order check box */
.rocheck{
	grid-column:5;
}
.rocheck .chkbox{
	display:inline-block;
	vertical-align:middle;
}

.rocheck form:after{
	content:'Repeat order';
	font-size:.825em;
	display:inline-block;
	vertical-align:middle;

}

/* remove item */
.bskt .lines .line .rem{
	grid-column:4;
	grid-row:1;
	align-self:start;
	text-align:center;
	align-self:center;
}

.bskt .lines .line .rem .submit {
	margin:0;
	padding:0;
	border:none;
	outline:none;
	background:none;
}

.bskt .lines .line .rem .submit{}

.bskt .lines .line .rem .submit:hover {}

/* Change quantity */
.bskt .lines .line .qty{
	grid-column:3;
	grid-row:1;
	font-size:.875em;
	text-align:center;
	align-self:center;
}

.bskt .lines .line .qty label{
	display:none;
}

.bskt .lines .line .qty button{
	display:inline-block;
	vertical-align:middle;
	border:1px var(--textColor) solid;
	background-color: var(--white);
	color:var(--textColor);
	font-weight:600;
	font-size:1.2em;
	padding:.25em .5em;
}

.bskt .lines .line .qty input{
	display:inline-block;
	vertical-align:middle;
	margin: 0 .5em;
	text-align:center;
}

.bskt .lines .line .netprice {
	grid-column:3;
	font-size:.875em;
}

.bskt .lines .line .netprice label,
.bskt .lines .line .netprice span{
	font-size:.750em;
	display:inline-block;
}

.bskt .lines .line .netprice label{
	margin-right:.25em;
}

.bskt .lines .line .price {
	grid-column: 6;
	grid-row: 1;
	text-align:right;
	font-family:var(--altFont);
	align-self:center;
}

/* out of stoc messages */
.oos{
	color:var(--mainColor);
	font-size:.725em;
}

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal{
	padding:1em 0;
	border-top:1px var(--borderColour) solid;
	border-bottom:1px var(--borderColour) solid;
	text-align:right;
}

.prodsubtotal label{
	margin-right: 1em;
}

.prodsubtotal span{
	font-size:1.2em;
    font-weight:600;
}

/* Delivery info
------------------------------------------------------- */
/* for free delivery messages */
.header.freedel{
	display:none;
}

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

/* Shipping 
------------------------------------------------------- */
.shipping{
	padding: 0.5em;
}

/* no need to show this unless collect option is available */
.shipping .deliveryto h4{
	display:none;
}

.shipping .address input,
.shipping .address h4{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	margin:.25em;
}

.shipping .store input,
.shipping .store h4{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	margin:.25em;
}

.shipping .deliveryto form{
	text-align:center;
}

/* if there ARE delivery choices */
.shipping form select{
	width:100%;
	margin-bottom:1em;
}

/* if there are NOI delivery choices */
.shipping .deliverto span{
	font-weight:600;
}

li.shipping{
	padding:0;
	text-align:right;
}

/* selected shipping cost*/
li.shipping form span{
	font-weight:600;
	margin-left:.5em;
}


/* Basket Totals
------------------------------------------------------- */
.bskttotals{
	border-top:3px var(--textColor) solid;
	border-bottom:3px var(--textColor) solid;
	padding:1em;
	text-align:right;
}

.bskttotals label{
	display:inline-block;
}

.bskttotals span{
	font-family:var(--mainFont);
	/*fix a min width for different number alignment */
	display:inline-block;
	width:8em;
}

.bskttotals .total{
	font-size:1.5em;
}
.bskttotals .total span{
	/* reset span size as font size if .total font size is bigger */
	width:5.3333333333em;
}

/* Vouchers
------------------------------------------------------- */
.vouchentry{
	display:inline-block;
	text-align: left;
	background: #eef2f3;
	padding:1em;
}

#pm ul.accordion li.pane ul.vouch li,
.vouchentry ul.vouch li{
	display:inline-block;
}


/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons{
	text-align:right;
	margin:.5em 0;
	font-size: 1em;
}

.bsktbuttons .sp_button{

display:inline-block;

margin-left:1em;
}

.bsktbuttons a{
	padding:.5em;
	margin:.5em 0;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	background-color:var(--checkoutButtons);
	color:#fff;
}

.bsktbuttons .pp_button a.btn{
	background:none;
	padding:0;
}

/*font awesome icons */
#pm .sp_button a.btn.sagepay:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f09d';
}

#pm .sp_button a.btn.bacs:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f19c';
}

#pm .sp_button a.btn.lease:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f154 \f154 \f154';
}

.page_basket .btn.cont a.btn {
	display:inline-block;
	margin:.5em 0;
	border-color:var(--bgColor);
	color:var(--textColor);
	background-color:var(--bgaltColor);
}

.page_basket .btn.cont a.btn:hover {
	color:#ffffff;
	background-color:var(--bgColor);;
}
.page_basket .btn.clear a.btn {
	display:inline-block;
	margin:.5em 0;
}

.page_basket .btn.clear a.btn:hover {}

/* Media Queries
------------------------------------------------------- */
/* over 600px wide and less than 800px */
@media screen and (max-width:800px ){}

/* over 400px wide and less than 600px wide */
@media screen and (max-width:600px ){}

/* under 32400px0px wide */
@media screen and (max-width:400px ){
	/* add an extra row and change order of things */
	.bskt .lines .line .qty{
		grid-column:1/4;
		font-size:.875em;
	}

	.bskt .lines .line .prodinfo{
		grid-column:2/5;
		grid-row:1;
	}

	/* remove item */
	.bskt .lines .line .rem{
		grid-column:4;
		grid-row:2;
	}

	.bskt .lines .line .netprice {
		grid-column:1/3;
	}

	.bskt .lines .line .netprice label,
	.bskt .lines .line .netprice span{
		font-size:.750em;
	}

	.bskt .lines .line .price {
		grid-row:3;
	}
}

/* -------------------------------------------------------------------------------------
=Checkout v5 Accordion Option
------------------------------------------------------------------------------------- */

/* Defaults / Overrides 
------------------------------------------------------- */
#checkout_panel_processing,
#ro_accord_processing {
	position: absolute;
	display:none;
	width: 100%;
	padding: 20px 10px;
	opacity: 0.6;
	filter: Alpha(Opacity=60);
	float: right;
	background-color: var(--textColor);
}

#pm .accord {
	display:inline-block;
	vertical-align:top;
	width: 834px;
	margin-right:1em;
	overflow-x: visible;
}

/* Accordion tabs 
------------------------------------------------------- */
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	color:#ffffff;
	right:0;
	left:initial;
	background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_fff_256x240.png);
}

#pm .accord h3 {
	padding: 0.5em 0;
	margin: 0;
	/* width: 100%; */
	position: relative;
	cursor: pointer;
	background:var(--bgaltColor2);
	border:none;
	color:#ffffff;
	font-size:1.2em;
	margin-bottom:2px;
	border-radius:0;
}

#personalisation_panel, #gift_panel {
	border: none;
}

#pm .accord h4 {}
#pm .accord label {}

#pm .accord ul li input, 
#pm .accord ul li select, 
#pm .accord ul li textarea,
#pm .accord ul li span {
	margin-bottom:1em;
}

#pm .accord ul li textarea {}
#pm .accord ul li input.submit {
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:1em;
	padding: 0.5em 1em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--altColor);
	border:1px var(--altColor) solid;
	color:white;
	text-transform:capitalize;
	border-radius: 3px;
}
#pm .accord li #submit {}
#checkout_accordion {}
#checkout_accordion input.inputtext,
#checkout_accordion input.inputtext_light,
#checkout_accordion select,
#checkout_accordion textarea {}

#checkout_accordion #deliveryInst{
	width:90%;
}

#checkout_accordion select{
	grid-column: 1/2;
}

.ui-accordion .ui-accordion-content {
	padding: 1em ;
	border-top: 0;
	overflow: auto;
}

#checkout_accordion #ul_left li,
#checkout_accordion #ul_right li{
	margin-bottom:1em;
	display:grid;
	grid-template-columns:10fr .5fr;
	align-items:center;
	grid-gap:.25em;
}

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

/* Specific Fields 
------------------------------------------------------- */
/* sign in in accordion */
#signinform h5{
	font-size:.8em;
}

#signinform li{}

#signinform input.inputtext{
	width:300px;
}

#signin_skip{
	line-height:normal;
	font-weight:600;
	padding:.5em;
	border: none;
	color: var(--textColorLight);
	margin-right:1em;
	text-align: center;
	text-transform: uppercase;
 	background: #eef2f3;
	cursor:pointer;
}


/* Main accordion Sections 
------------------------------------------------------- */
#ul_top{
	font-size:.875em;
	margin-bottom:1em;
}
#ul_left{}
#ul_right{}

#ul_bottom .continue{
	margin:auto;
	text-align:center;
}

/* Customer Details 
------------------------------------------------------- */
#customer_panel{}

#customer_panel #ul_left,
#customer_panel #ul_right{
	width:calc(50% - 1em);
	display:inline-block;
	vertical-align:top;
	padding:0 .5em;
}


/* Delivery Address 
------------------------------------------------------- */
#delivery_panel{}
#delivery_panel #ul_right{
}

#delivery_panel .address,
#delivery_panel #basket_delivery_address,
#delivery_panel .address ul{
	grid-column:1/3;
}

#delivery_panel #basket_delivery_address ul{
	margin:1em 0
}

a#delivery_to_other{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:1em;
	padding: 0.5em 1em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--altColor);
	border:1px var(--altColor) solid;
	color:white;
	text-transform:capitalize;
	border-radius: 3px;
}


/* Delivery Service 
------------------------------------------------------- */
#delivery_date_panel{}

#delivery_date_panel .service{

}

#delivery_date_panel .service span{
	margin-left:.5em;
	font-weight:600;
}


#delivery_date_panel .slot{
	font-size
}

#delivery_date_panel .slot .form li{
	display:inline-block;
}


#delivery_date_panel .slot .form li span{
	display:inline-block;
	vertical-align:middle;
	margin:0 .5em;
	font-family:var(--headingFont);
}


#delivery_date_panel .slot .form li input{

	display:inline-block;
	vertical-align:middle;
		margin:0 .5em;
	font-family:var(--headingFont);
	width:auto;
	font-size:1em;
}

#delivery_date_panel .slot .form{
	padding:0;
}

#delivery_date_panel .slot .form h3{
	background:none;
	color:var(--textColor);
	margin:0;
	font-size:1.4em;
}



#delivery_date_panel .slot .form .info.date{
	font-size:1.5em;
	text-align:right;
}

#delivery_date_panel .slot .form p{
	margin-bottom:1em;
}



/* Confirm Panel inc Basket Summary
------------------------------------------------------- */
#confirm_panel{
	padding:0;
}

#confirm_panel .continue{
	margin:auto;
	text-align:center;
}

#confirm_panel .continue .submit{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:1em;
	padding: 0.5em 1em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--altColor);
	border:1px var(--altColor) solid;
	color:white;
	text-transform:capitalize;
	border-radius: 3px;
}

.basketsummary .header{
	margin:0;
	color:var(--textColor);
	padding:.5em;
	background-color:#ffffff;
	text-align:center;
}

.bsktsum{}

.bsktsum .line{
	display:grid;
	grid-gap:.5em;
	padding:.5em;
	grid-template-columns: 3fr .5fr 1fr;
	align-self:center;
}

.bsktsum .line:nth-child(odd){
	background-color:var(--bgColor);
}

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

.bsktsum .qty label{
	display:none;
}

.bsktsum .price{
	font-weight:600;
	text-align:right;
}

/* no one wants to send people back to the basket at this point - needs to be removed from basket summary */
.bsktsum .editbskt{
	display:none;
}

.bsktsum .line .prodinfo li{
	font-size:.725em;
}

.bsktsum .line .prodinfo li.descr {
	font-size:1em;
    font-family:var(--headingFont);
    font-weight:600;
}

/* Basket Subtotal
------------------------------------------------------- */
.bsktsum .subtotal{
	padding: .5em;
	text-align:right;
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals{
	border-top:3px var(--borderColour) solid;
	border-bottom:3px var(--borderColour) solid;
	padding: 1em 0;
	text-align:right;
}

.bsktsum .subtotal label{
	display:inline-block;
}

.bsktsum .subtotal span{
	font-weight:600;
	/*fix a min width for different number alignment */
	display:inline-block;
	width:5.3333333333em;
}

.bsktsum #ordertotal{
}
.bskttotals #ordertotal{
	/* reset span size as font size if .total font size is bigger */
	width:5.3333333333em;
}

/* Payment Panel Totals
------------------------------------------------------- */
#payment_panel{}
#payment_panel .form{}

#delivery_date_panel .continue{
	margin:auto;
	text-align:center;
}

/* 
PAY WITH AMAZON
------------------------------------------------------- */
/* Please include the min-width, max-width, min-height 
and max-height if you plan to use a relative CSS unit 
measurement to make sure the widget renders in the 
optimal size allowed.	
*/

#addressBookWidgetDiv {
	 min-width: 300px;
	 max-width: 100%;
	 min-height: 228px;
	 height: 300px;
}

#walletWidgetDiv {
	 min-width: 300px; 
	 max-width: 100%;
	 min-height: 228px; 
	 height: 300px;
}

#shippingSelector{
	border:1px solid #bbb;
	margin:1em 0;
	padding:0 1em;
}

#amazonShippingSelection > span{
	margin-top:.5em;
	font-size:1.2em;
	font-weight:600;
	width:100%;
	display:inline-block;
}

#amazonShippingSelection > span +span{
	font-weight:normal;
	margin-top:.5em;
	margin-bottom:.5em;
}

#shippingSelector amazonShippingSelection{
	outline:1px red solid;
}

.amazonShippingCountryDiv span.label{
	font-weight:600;
	margin-right:1em;
}

.amazonShippingOptionsDiv span.value{
	font-weight:600;
}

.amazonShippingOptionsDiv{
	cursor:pointer;
}

.amazonShippingOptionDiv{
	width:40%;
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid #bbb;
	border-radius: 3px;
	display: block;
	text-decoration: none;
	margin: 0 3px 6px 0;
	padding: 0 20px 0 30px;
	color: #333;
	font-size: 11px;
	height: 30px;
	background: #f6f6f6;
	background: -moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%);
}

.amazonShippingOptionsDiv:after{
	display:block;
	clear:both;
	content:'';
}

.amazonShippingOptionDiv.selected {
	background: #f6f6f6 url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%)
}

.amazonShippingOptionDiv.selected:hover {
	background: #ececec url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#ececec 0,#d3d3d3 100%)
}

.amazonShippingOptionDiv:hover {
	background: #ececec;
	background: -moz-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: -webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: -ms-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: linear-gradient(to bottom,#ececec 0,#d3d3d3 100%)
}

.address-list li.selected a.invalid {
	background: #f6f6f6;
	background: -moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%)
}

#cancelAmazon{
	background-color:#eef2f3;
	color:#416976;
	font-weight:600;
	padding:.5em;
}

.noshipping{
	color:var(--mainColor);
	margin-bottom:1em;
	font-weight:bold;
}

.submit[disabled]{
	background-color:#eef2f3;
	color:#ffffff;
}


/* Checkout Breadcrumb panel
------------------------------------------------------- */
#pm .accordbdcb {
	display:inline-block;
	vertical-align:top;
	width: 350px;
}

#pm .accordbdcb .checkoutLogos{
	text-align:center;
}

#pm .accordbdcb .checkoutLogos img{
	margin:.5em;
}

#pm .accordbdcb ul {
	border-bottom:2px #d5d6d6 solid;
	margin-bottom:.5em;
}

#pm .accordbdcb ul li {
	margin: .5em 0em 1em 1em;
}

#pm .accordbdcb ul li.header {
    font-family:var(--altFont);
    font-weight:600;
	padding: 0;
	margin: 0;
    padding:.5em;
	position: relative;
	cursor: pointer;
	border:none;
	font-size:1em;
	border-radius:0;
	border-bottom: var(--borderColour) 2px solid;
    color:var(--textColor)
}

#pm .accordbdcb ul li:last-child {}

#pm .accordbdcb ul li.title {
	font-weight: 600;
	padding: 0;
	margin: 0;
	width: 96%;
	padding:.5em 2%;
	position: relative;
	cursor: pointer;
	border:none;
	font-size:1.2em;
	border-radius:0;
	margin-bottom:2px;
	background: var(--bgaltColor2);
	font-family:var(--altFont);
	color:#ffffff;
}

/* due to the way the payment bit in the checkout crumb is written out */
#pm .accordbdcb ul li span.label {
	width:50%;
	display:inline-block;
}

/* terms and conditions article in checkout
------------------------------------------------------- */
#pp {
	width: 1000px;
	margin: 0 auto;
	background-color: #ffffff;
}

#pp p, #pp h3, #pp h4 {
	margin: 0 1em;
}

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

/* -------------------------------------------------------------------------------------
=ConfirmationPage 
------------------------------------------------------------------------------------- */
.confirmation .conf{
	padding:1em;
}

.confirmation .conf .info li{
	margin-bottom:1em;
	display:block;
}

.confirmation .conf li.info li{
	list-style:disc;
	display:list-item;
	list-style-position:inside;
}

.confirmation .conf .header{
	font-family:var(--headingFont);
	font-size:2em;
}

.confirmation .conf .subhead{
	font-family:var(--headingFont);
	margin:.5em 0;
}

/* Basket Line items
------------------------------------------------------- */
.confirmation .conf .order{}
.confirmation .conf .order .line{
	display:grid;
	align-items:center;
	grid-gap:.5em;
	grid-template-columns: 1fr 6fr 1fr 1fr;
}

.confirmation .conf .order .line:nth-child(odd){
}

/* Image */
.page_confirmation .conf .order .line a.img{}

/* Product title*/
.confirmation .conf .order .line .descr{
	font-size:.875em;
}

.confirmation .conf .order .line .price {
	text-align:right;
}

/* Basket Subtotal
------------------------------------------------------- */
.confirmation .conf .order .subtotal{
	padding:1em 0;
	border-top:1px var(--borderColour) solid;
	text-align:right;
}

.confirmation .conf .order .subtotal label{
	margin-right: 1em;
}

.confirmation .conf .order .subtotal span{
	font-size:1.2em;
	font-weight:600;
}

.confirmation .conf .order .address{
	text-align:left;
	font-size:.875em;
}

/* Post order customer registration panel
------------------------------------------------------- */
.confirmation .conf .ordreg{
	background-color:#ffffff;
	padding:1em;
	margin:1em 0;
}

.confirmation .conf .ordreg input{
	margin:.5em 0;
}

.confirmation .conf .ordreg .info{
	margin:.5em 0;
}

.confirmation .conf .ordreg .help{
	font-size:.725em;
	padding:1em 0
}

.success .form li {}

/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */

#pm .smap ul {
	list-style-position: inside;
	width:100%;
}

#pm .smap ul li {
	padding: 1em 0;
}

#pm .smap ul li a,
#pm .smap ul li h3 {
	padding: 0;
}

#pm .smap .bc ul li ul {
	padding:1em 0;
	float:left;
}

#pm .smap ul li ul li {
	padding: 0;
}

/* First Level */
#pm .smap ul li{
	width:25%;
	float:left;
}
#pm .smap ul li a{
	font-weight:600;
	font-size:1.2em;
}

/* Second Level */
#pm .smap ul li ul{
	margin-left:2%;
	width:98%;
	float:left;
}
#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;
}

/* -------------------------------------------------------------------------------------
=AccordionArticles
------------------------------------------------------------------------------------- */

/* accordion descriptions 
------------------------------------------------------- */
#pm .bc ul.accordion{}

#pm .bc ul.accordion .pane{
	display:none;
}

#pm .bc ul.accordion .pane{
	background-color:var(--bgColor);
	padding:1em;
}

#pm .bc ul.accordion li.header{
}

#pm .bc ul.accordion li.header img{
	position:absolute;
	right:1em;
	top: 0.5em;
	width:1em;
	height:auto;
	cursor:pointer;
}

#pm .bc ul.accordion li.header img.showminus{
	display:none;
}

#pm .bc ul.accordion li.header.current img.showminus{
	display:block;
}

#pm .bc ul.accordion li.header.current img.showplus{
	display:none;
}

#pm .bc .accordion p{
	font-size:1em;
	margin-bottom:1em;
}

#pm .bc .accordion ul{}
#pm .bc .accordion a{}

#pm .bc .accordion a:hover{
	text-decoration:underline;
}

#pm .bc .accordion span{
	font-weight:800;
}

#pm .bc ul.accordion thead td{
	font-weight:800;
}

/* -------------------------------------------------------------------------------------
=Hacks 
------------------------------------------------------------------------------------- */
.clearfix{
	padding:0 !important;
	margin:0 !important;
	float:none !important;
	clear:both !important;
}

.spacer{
	float:left;	
}

.epau .bc{
	display:none;
}

#modal-overlay-inline{
	z-index:999;
}